/* ---------------------------------------------------------------------------
   Kategori basligi + alt kategori karuseli
   (Magento_Catalog::category/subcategorylistimage.phtml)

   Referans: davidyurman.com kategori sayfasi. Sira: breadcrumb, buyuk baslik,
   aciklama, alt kategori karuseli, sonra filtreler.

   Tailwind bu temada ONCEDEN DERLENIYOR (JIT yok), yani sablonda kullanilacak
   yardimci siniflarin derlemede bulundugu garanti degil. Bu bilesenin butun
   stilleri bu yuzden duz CSS; hicbir Tailwind sinifina bagli degil.
   --------------------------------------------------------------------------- */

[x-cloak] { display: none !important; }

.cathead {
    background: #fff;
    padding: 20px 16px 0;

    /* `.category-view` bir flex kabi; flex ogesinin varsayilan `min-width: auto`
       degeri onu ICERIGININ min-content genisligine kadar buyutur. Karuselin
       min-content'i tum kartlarin toplami (olculen: 1440px ekranda 3379px), yani
       `overflow-x: auto` hic devreye girmeden blok sayfadan tasiyordu.
       Taban sifirlanmadan genislik sinirlanamaz. */
    min-width: 0;
    width: 100%;

    /* Ayirici cizgi YOK. Karusel ile filtre satirini bosluk ayiriyor;
       cizgi sayfayi gereksiz yere boluyordu. */
    padding-bottom: 24px;
}

@media (min-width: 1024px) {
    /* Sitenin geri kalaniyla ayni oluk: header ve urun izgarasi da 80px. */
    .cathead { padding: 24px 80px 0; }
}

/* --- breadcrumb -----------------------------------------------------------
   Blok normalde gri bir seritte, kendi dolgusuyla duruyor; burada baslik
   blogunun icine giriyor, o yuzden zemin ve oluk sifirlaniyor. */
.cathead__crumbs .breadcrumbs { background: transparent; padding: 0; }
.cathead__crumbs .breadcrumbs ol { padding: 0; margin: 0; }
.cathead__crumbs .breadcrumbs .item,
.cathead__crumbs .breadcrumbs a,
.cathead__crumbs .breadcrumbs span { font-size: 13px; line-height: 20px; }
.cathead__crumbs .breadcrumbs a { color: #5b5b5b; text-decoration: none; }
.cathead__crumbs .breadcrumbs a:hover { text-decoration: underline; }

/* --- baslik + aciklama ---------------------------------------------------- */
.cathead__intro { margin-top: 14px; }

.cathead .page-main-title { padding: 0; margin: 0; font-size: inherit; }

.cathead .page-main-title h1,
.cathead .page-main-title .page-title {
    margin: 0;
    color: #111;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .005em;
    /* 393px'te 26px, 1440'ta 44px */
    font-size: clamp(26px, 3.05vw, 44px);
    line-height: 1.06;
}

.cathead__desc {
    margin-top: 10px;
    color: #3d3d3d;
    font-size: 15px;
    line-height: 1.45;
}
.cathead__desc p { margin: 0; }

/* PageBuilder aciklama sablonu iki surum basiyor: `desktopview` (sm altinda
   `hidden`) ve `mobileview` (kategoriye bagli ayri bir statik blok). Eski
   banner duzeninde aciklama mobilde banner'in uzerine sigmadigi icin boyleydi;
   bu duzende aciklama basligin altinda, her ekranda ayni metin. Kategori
   aciklamasi tek kaynak olsun diye `desktopview` her genislikte aciliyor,
   `mobileview` kopyasi bu blok icinde kapatiliyor (disarida etkilenmiyor). */
.cathead__desc .category-description.desktopview { display: block; }
.cathead__desc .category-description.mobileview { display: none; }

@media (min-width: 1024px) {
    /* Masaustunde aciklama basligin SAGINDA, ayni satirda. */
    .cathead__intro {
        display: flex;
        gap: 40px;
        /* Aciklama iki satira sardiginda ILK satir basligin taban cizgisine
           oturuyordu ve blok asagi tasiyordu; goz basligi ortada birakiyor.
           Hizalanmasi gereken SON satir: metin yukari dogru buyusun, alt
           kenarlar bir hizada kalsin.
           `last baseline` desteklenmeyen tarayicida `flex-end` devrede
           kaliyor - kutu altlari hizali, taban cizgileri bir iki piksel
           kayabilir ama blok yine asagi dusmuyor. */
        align-items: flex-end;
        align-items: last baseline;
    }
    .cathead .page-main-title { flex: 0 0 auto; }
    .cathead__desc {
        margin-top: 0;
        max-width: 640px;
        font-size: 16px;
    }
}

/* --- karusel --------------------------------------------------------------
   Kart yuksekligi tek bir degiskenden geliyor; genislikler ondan turuyor,
   boylece kahraman kart genis, digerleri dar ama HEPSI ayni yukseklikte.
   Oranlar referanstan olculdu: kahraman 1.69:1, digerleri 5:7. */
.cathead__slider {
    position: relative;
    margin-top: 22px;
}

.cathead__track {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* Kaydirma tutturmasi (scroll-snap) BILEREK yok. Denendi ve birakildi:
       400px suruklendikten sonra birakinca en yakin tutturma noktasina
       ucuyordu (olculdu: 400 -> 722, yani bir kart ileri) ve surukleme
       elden kaciyormus gibi hissettiriyordu. Sitedeki diger karuseller de
       `drag: free`. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.cathead__track::-webkit-scrollbar { display: none; }

/* Fareyle surukleme icin: imlec tutulabilir oldugunu soylesin, surukleme
   sirasinda metin secilmesin ve tarayici gorseli surukleme islemine
   baslamasin. Kaydirma tutturmasi (snap) surukleme boyunca kapaniyor,
   aksi halde birakmadan once slayti geri cekiyor. */
.cathead__track { cursor: grab; }
.cathead__track--suruyor {
    cursor: grabbing;
    user-select: none;
}
.cathead__img { -webkit-user-drag: none; user-select: none; }

.cathead__card {
    flex: 0 0 auto;
    /* Mobilde referansta ekranin ~%34.6'si: ucuncu karttan bir parca gorunur,
       yani karuselin devami oldugu belli olur. */
    width: 34.6vw;
}

.cathead__link {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    /* `contain` yatay urun cekimlerinde alt/ust bant birakiyor; katalog
       gorselleri beyaz zeminli oldugu icin zemin de beyaz - bant gorunmuyor. */
    background: #fff;
}

@media (min-width: 1024px) {
    .cathead__slider { --cathead-h: clamp(300px, 29vw, 420px); }
    .cathead__track { gap: 16px; }
    .cathead__card { width: calc(var(--cathead-h) * 5 / 7); }
    .cathead__card--hero { width: calc(var(--cathead-h) * 1.69); }
    .cathead__link { aspect-ratio: auto; height: var(--cathead-h); }
}

/* Kahraman kart genis (1.69:1) ve kategori gorselleri genelde yatay yasam
   tarzi fotograflari - `cover` orada dogru kirpma.
   Dar kartlar 5:7 dikey; katalogdaki gorseller ise beyaz zeminli YATAY urun
   cekimi, `cover` bunlarin yarisini kesiyordu (olculen: 298px kutuda ~%60
   genislik kaybi, bot govdesi kadrajdan tasiyordu). `contain` urunu butun
   birakiyor ve dikey kirpilmis gorsel yuklendiginde kutuyu zaten tam
   dolduruyor - yani gorseller dogru orana gecince gorunum kendiliginden
   referansa oturuyor, CSS'i degistirmek gerekmiyor. */
.cathead__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cathead__card--hero .cathead__img { object-fit: cover; }

/* Etiket dogrudan gorselin uzerinde - PERDE YOK (referansta da yok).
   Okunurluk perdeyle degil, yazi rengiyle cozuluyor: ViewModel gorselin
   etiket kosesini olcup karta `--koyu` veriyor, etiket o zaman beyaza
   doner. Acik urun cekimlerinde siyah, koyu yasam tarzi fotografinda
   beyaz - ikisinde de gorselin ustune bir kusak binmeden. */
.cathead__label {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    max-width: calc(100% - 28px);
    color: #111;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 3px;
}
.cathead__card--koyu .cathead__label { color: #fff; }

/* Yaprak bir kategorideyken serit KARDESLERI gosteriyor; icinde bulunulan
   kategori daha kalin bir alt cizgiyle isaretleniyor - "buradasin" isareti.
   Renkle degil kalinlikla, cunku etiket rengi gorselin tonuna gore degisiyor. */
.cathead__card--aktif .cathead__label { border-bottom-width: 3px; }

@media (min-width: 1024px) {
    .cathead__label { left: 18px; bottom: 18px; font-size: 13px; }
}

/* --- oklar ---------------------------------------------------------------- */
.cathead__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #fff;
    color: #111;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    cursor: pointer;
}
.cathead__nav svg { width: 20px; height: 20px; }
.cathead__nav--prev { left: 10px; }
.cathead__nav--next { right: 10px; }

/* --- kategori govdesi -----------------------------------------------------
   Blok artik kendi beyaz zemininde; sarmalayicinin gri seridi baslikla
   karusel arasinda bir kusak birakiyordu. */
.category-view:has(.cathead) { background: #fff; }