/* ═══════════════════════════════════════════════
   ÖMÜR MEDİKAL — ANA SAYFA (slider altı)
   Bannerlar panelden: Banner Yönetimi → Banner Yeri
   ana-serit1, ana-kategori, ana-genis, ana-kategori-blok, ana-serit2
   ═══════════════════════════════════════════════ */

:root{
  --om-ana:      #004cae;
  --om-ana-koyu: #003a86;
  --om-soluk:    #eef4fc;
  --om-cizgi:    #e3e8ef;
  --om-yazi:     #1b2430;
  --om-r:        16px;
}

.om-anasayfa{ color:var(--om-yazi); }
.om-blok{ margin:28px 0; }

/* ── Kayan şerit ── */
.om-serit{ background:#f8f8f8; color:#011bdf; overflow:hidden; white-space:nowrap; }
.om-serit-akis{ display:flex; width:max-content; animation:om-kay 40s linear infinite; }
.om-serit:hover .om-serit-akis{ animation-play-state:paused; }
.om-serit-grup{ display:flex; flex:0 0 auto; }
.om-serit-oge{ display:inline-flex; align-items:center; gap:10px; padding:10px 25px; font-size:18px; font-weight:500; }
.om-serit-oge img{ height:25px; width:auto; }
.om-serit-alt{ margin-top:36px; }
@keyframes om-kay{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .om-serit-akis{ animation:none; } }

/* ── Kategori kutuları ── */
.om-katlar-izgara{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.om-kat{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none!important; color:var(--om-yazi); }
.om-kat-resim{ display:block; width:100%; aspect-ratio:1/1; border-radius:var(--om-r); overflow:hidden; background:#fff; }
.om-kat-resim img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.om-kat:hover .om-kat-resim img{ transform:scale(1.04); }
.om-kat-ad{ font-size:14px; font-weight:600; text-align:center; line-height:1.3; }
.om-kat:hover .om-kat-ad{ color:var(--om-ana); }

/* ── Sekmeli vitrin ── */
.om-sekme-bas{ display:flex; justify-content:flex-start; gap:15px; margin-bottom:24px; overflow-x:auto; scrollbar-width:none; }
.om-sekme-bas::-webkit-scrollbar{ display:none; }
.om-sekme{ flex:0 0 auto; height:46px; padding:0 35px; border:1px solid #060606; border-radius:0; background:#fff; color:#000; font-size:18px; font-weight:700; cursor:pointer; transition:background .3s ease-in-out,color .3s ease-in-out; }
.om-sekme:hover,
.om-sekme.om-sekme-acik,.om-sekme.om-sekme-acik:hover{ background:#000; color:#fff; }
.om-sekme-govde{ display:none; }
.om-sekme-govde.om-sekme-acik{ display:block; }

/* ── Yatay kaydırmalı ürün izi ── */
.om-kaydir{ position:relative; }
.om-iz{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 10px; scrollbar-width:none; }
.om-iz::-webkit-scrollbar{ display:none; }
.om-iz > *{ flex:0 0 calc((100% - 4*16px) / 5); min-width:0; scroll-snap-align:start; }
.om-iz .sbx-card{ height:100%; margin:0; }
.om-ok{ position:absolute; top:40%; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--om-cizgi); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 10px rgba(16,24,40,.08); transition:border-color .15s ease; }
.om-ok:hover{ border-color:var(--om-ana); }
.om-ok svg{ width:18px; height:18px; fill:none; stroke:var(--om-ana); stroke-width:2.5; }
.om-ok-geri{ left:-14px; }
.om-ok-ileri{ right:-14px; }
.om-ok[disabled]{ opacity:0; pointer-events:none; }

/* ── Tam genişlik bannerlar ── */
.om-genis .container{ display:flex; flex-direction:column; gap:14px; }
.om-genis-oge{ display:block; border-radius:var(--om-r); overflow:hidden; }
.om-genis-oge img{ width:100%; height:auto; display:block; }

/* ── Kategori blokları: solda banner, sağda ürünler ── */
.om-kblok-ic{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:16px; align-items:stretch; }
.om-kblok-banner{ display:block; border-radius:var(--om-r); overflow:hidden; background:var(--om-soluk); }
.om-kblok-banner img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.om-kblok-banner:hover img{ transform:scale(1.03); }
.om-kblok-urunler .om-iz > *{ flex-basis:calc((100% - 3*16px) / 4); }

/* ── Duyarlı ── */
@media (max-width:1199px){
  .om-serit-oge{ font-size:16px; }
  .om-iz > *{ flex-basis:calc((100% - 3*16px) / 4); }
  .om-kblok-urunler .om-iz > *{ flex-basis:calc((100% - 2*16px) / 3); }
}
@media (max-width:991px){
  .om-serit-oge{ font-size:15px; }
  .om-katlar-izgara{ grid-template-columns:repeat(3,1fr); }
  .om-sekme{ font-size:15px; padding:0 20px; }
  .om-iz > *,
  .om-kblok-urunler .om-iz > *{ flex-basis:calc((100% - 2*16px) / 3); }
  .om-kblok-ic{ grid-template-columns:minmax(0,1fr); }
  .om-kblok-banner img{ height:auto; object-fit:initial; }
  .om-ok-geri{ left:-6px; }
  .om-ok-ileri{ right:-6px; }
}
@media (max-width:575px){
  .om-blok{ margin:20px 0; }
  .om-katlar-izgara{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .om-kat-ad{ font-size:12px; }
  .om-iz{ gap:10px; }
  .om-iz > *,
  .om-kblok-urunler .om-iz > *{ flex-basis:calc((100% - 10px) / 2); }
  .om-ok{ display:none; }
  .om-sekme-bas{ gap:6px; }
  .om-sekme{ flex:1 1 0; min-width:0; height:40px; padding:0 4px; font-size:13px; white-space:nowrap; }
  .om-serit-oge{ padding:8px 18px; font-size:14px; }
  .om-serit-oge img{ height:20px; }
}