/* ==========================================================================
   ÇİÇEK BOUTIQUE — Tasarım Sistemi
   Tüm değerler referans sitenin derlenmiş CSS'inden ÖLÇÜLDÜ, tahmin değil.
   ========================================================================== */

:root {
  /* --- Ölçü token'ları --------------------------------------------------- */
  --header-h:          72px;   /* masaüstü */
  --header-h-mobile:   56px;
  --header-max:        1920px; /* üstünde header ortalanır */
  --menu-w:            min(33.3333vw, 480px); /* çekmece genişliği */
  --menu-pad:          20px;   /* masaüstünde clamp'e döner */
  --z-header:          12;     /* referanstan birebir */
  --subnav-h:          47px;
  /* Hero yüksekliği sabit piksel DEĞİL, görünen alana oranlı.
     Referanstaki 875px yalnızca `--aem-editor` (CMS düzenleyici) varyantında
     geçiyor; canlı değerler 90vh masaüstü / 95vh mobil.
     svh varyantı aşağıda @supports ile geliyor. */
  --hero-h:            90vh;
  --hero-h-mobile:     95vh;

  --gutter:            20px;   /* masaüstü yatay margin */
  --gutter-mobile:     16px;
  /* Header kenar boşluğu sabit değil, akışkan: 900px'te 20px, 1440px ve
     üstünde 32px'e sabitleniyor. Referanstan birebir. */
  --header-pad:        clamp(20px, 2.2222vw, 32px);
  --grid-gap:          1px;    /* imza: kartlar neredeyse bitişik */
  --card-ratio:        4 / 5;

  /* --- Tipografi ---------------------------------------------------------- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  /* Logotip için font değişkeni yok — logo SVG kontur olarak gömülü. */

  --tracking:          0.2px;  /* baskın letter-spacing (88 kullanım) */
  --tracking-wide:     0.1em;  /* küçük uppercase etiketler */

  --fs-kicker:         12px;
  --fs-title:          32px;
  --fs-title-mobile:   20px;
  --fs-cta:            14px;
  --fs-body:           14px;
  --fs-nav:            14px;  /* header etiketleri: 14px / lh 18px */

  /* Ağırlık yalnızca 400 ve 500 — bold yok. Lüks hissinin yarısı bu. */
  --fw-regular:        400;
  --fw-medium:         500;

  /* --- Hareket ------------------------------------------------------------ */
  --ease:              cubic-bezier(.4, 0, .2, 1); /* 106 kullanım */
  --dur-fast:          .2s;
  --dur-base:          .3s;
  --dur-slow:          .5s;
  --dur-line:          .45s;  /* CTA alt çizgisi sağa kayma süresi */
  --dur-media:         .6s;   /* görsel crossfade */

  /* --- Renk --------------------------------------------------------------- */
  --c-ink:             #191b1c;
  --c-paper:           #ffffff;
  --c-muted:           #6b7072;
  --c-line:            #e3e4e5;
  --player-bg:         rgba(78, 85, 90, .4);
}

/* svh, mobil tarayıcı çubuğu açılıp kapanırken hero'nun zıplamasını önler.
   Referans da aynı @supports kademesini kullanıyor. */
@supports (height: 1svh){
  :root {
    --hero-h:        90svh;
    --hero-h-mobile: 95svh;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure { margin: 0; }
img, video, picture { display: block; max-width: 100%; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Klavye kullanıcıları için görünür odak — fare kullanıcısını rahatsız etmez */
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   HEADER — 72px / 56px
   Referansta ÜÇ durum var, üçü de aynı beyaz/koyu görünümü paylaşır:
     1) şeffaf  — hero üzerinde, beyaz yazı
     2) :hover  — imleç header'a girince beyaz zemin + koyu yazı
     3) opaque  — hero geçildikten sonra kalıcı beyaz
   Hover hedefi header'ın KENDİSİ değil iç konteyner; header yalnızca
   sabitleme ve max-width ortalama işini yapar.
   Referansta header'da kenarlık yok (border-width: 0) — eklemiyoruz.
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h-mobile);
  z-index: var(--z-header);
  display: flex;
  justify-content: center; /* --header-max genişliğini ortalar */
}

.header__container {
  width: 100%;
  max-width: var(--header-max);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter-mobile);
  line-height: 24px;
  background-color: transparent;
  color: var(--c-paper);
  /* Referansta bu geçiş imza easing'i DEĞİL, düz ease-in-out kullanıyor. */
  transition:
    background-color var(--dur-fast) ease-in-out,
    color            var(--dur-fast) ease-in-out;
  will-change: background-color, color;
}

/* Hover ve scroll durumu aynı görünüm.
   @media (hover: hover): dokunmatikte "yapışık hover" olmasın diye —
   fareli cihazda davranış birebir aynı. */
.header.is-scrolled .header__container{
  background-color: var(--c-paper);
  color: var(--c-ink);
}

@media (hover: hover){
  .header__container:hover {
    background-color: var(--c-paper);
    color: var(--c-ink);
  }
}

/* Grup aralığı: 12px dar mobil → 20px → 32px masaüstü (referanstan) */
.header__group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__group--right { justify-content: flex-end; }

.header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 24px;
  transition: opacity .2s linear; /* referanstaki değer */
}

/* Bir butonun üzerine gelindiğinde ODAKLANMAYAN diğerleri %50'ye söner.
   Referans bunu JS ile yapıyor (mouseenter'da diğerlerine
   `--not-active-hover` sınıfını ekliyor, o sınıf da opacity:50%).
   Aynı sonucu :has() ile JS'siz alıyoruz.
   Logo kapsam dışı: seçici yalnızca .header__action'ı hedefliyor, yani
   ortadaki markaya gelince hiçbir şey sönmüyor. */
@media (hover: hover){
  .header__container:has(.header__action:hover) .header__action:not(:hover) {
    opacity: .5;
  }
}

/* Görünmez dokunma alanı: ikon 24px ama tıklama hedefi her yönde en az
   40px. Referanstan birebir alındı. */
.header__action::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  min-width: 40px;
  width: calc(100% + 8px);
}

/* Etiketler 768px altında gizlenir, ikonlar kalır */
.header__action-label {
  display: none;
  font-size: var(--fs-nav);
  line-height: 18px;
}

/* Yarı saydam varyant (referansta pasif "Bize ulaşın" için kullanılıyor) */
.header__action--muted { opacity: .5; }

/* Oturum açıkken kişi ikonu içi dolu görünür (referanstaki gibi); ikon
   zaten kapalı yollardan olustugu icin fill yeterli. Giris yoksa cizgi
   halinde kalir. */
.header__action.is-signed .icon,
.menu__hicon.is-signed .icon { fill: currentColor; stroke: none; }

/* Hesap menüsü — ikonun üstüne gelince ikonun altında açılan panel.
   Açma/kapama tamamen CSS: fare için :hover, klavye için :focus-within. */
/* Sarmalayıcı header yüksekliğince uzar (align-self:stretch), böylece
   panel `top:100%` ile tam header'ın altından başlar. */
.acctmenu {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}
/* Ölçüler referanstan: 203px genişlik, satır başına 42px (4 satırda 168px),
   iki katmanlı yumuşak gölge, 0.5s ease-in-out geçiş. */
.acctmenu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  width: 203px;
  min-width: 203px;
  background: var(--c-paper);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .05), 0 0 4px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s linear .5s;
}
.acctmenu:hover .acctmenu__panel,
.acctmenu:focus-within .acctmenu__panel {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-in-out, visibility 0s;
}
.acctmenu__item {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 24px;
  color: var(--c-ink);
  font-size: var(--fs-body);
  line-height: 42px;
  text-align: left;
  white-space: nowrap;
  transition: opacity var(--dur-fast) linear;
}
/* Üzerine gelinen satır siyah kalır, DİĞERLERİ soluklaşır — header'daki
   ikon davranışının aynısı (:has ile, JS'siz). */
@media (hover: hover){
  .acctmenu__panel:has(.acctmenu__item:hover) .acctmenu__item:not(:hover) {
    opacity: .5;
  }
}

/* Mobilde ve dokunmatikte panel yok: ikona basınca doğrudan hesap
   sayfasına gidilir (hesap menüsü zaten orada). */
@media (max-width: 1023px), (hover: none){
  .acctmenu__panel { display: none; }
}

/* Logotip SVG — canlı metin değil.
   Engry fontunda Ç ve İ yok (Latin + Kiril, aksanlı harf içermiyor), bu yüzden
   harfler fontun konturlarından çıkarıldı; Ç çengeli fontun kendi virgülünden,
   İ noktası kendi noktasından türetildi. `currentColor` sayesinde header'ın
   beyaz → koyu geçişini logo da birlikte yapar. */
.header__mark {
  display: block;
  line-height: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.header__mark svg {
  display: block;
  width: 104px;
  height: auto;
}

/* Referanstaki taban kural: .text-icon { font-size:24px; line-height:24px }
   İkonlar 24 birimlik viewBox'ta çizilip 24px render ediliyor — 1 birim =
   1 piksel, kenarlar tam piksele oturuyor.
   Gövde kalınlığı referansın 24px'teki piksel ızgarası okunarak bulundu.
   non-scaling-stroke KULLANILMIYOR: ikon büyütülünce çizgiyi sabit tutup
   orantıyı bozuyordu. */
.icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: round;
  flex: none;
}

/* ==========================================================================
   MEGA MENÜ
   Ölçüler referanstan: çekmece 33.333vw / max 480px, satır dolgusu
   12px clamp(20px,2.7778vw,40px), etiket 16/22px, başlık 12/18px.
   ========================================================================== */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 18;
  background: #000;
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}

.menu-scrim.is-visible { opacity: .3; }

.menu {
  position: fixed;
  left: 0;
  /* Mobilde TÜM ekranı kaplar (site header dahil) — Prada mobil menü gibi.
     z-index header'dan (12) yüksek olduğu için header'ın üzerine biner. */
  top: 0;
  z-index: 20;
  width: 100vw;
  height: 100dvh;
  background: var(--c-paper);
  color: var(--c-ink);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}

.menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease), visibility 0s linear 0s;
}

.menu__col {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Açılışta satırlar hafifçe yukarı kayarak belirir (referanstaki desen).
   DİKKAT: transform `li`'ye DEĞİL, li'nin alt panel dışındaki çocuklarına
   uygulanıyor. Aksi halde transform'lu li, `position: fixed` alt paneller
   için kapsayıcı blok olur ve paneller ekranın tepesi yerine satırın
   hizasından açılır. Referans da bu yüzden `li > :not(...)` kullanıyor. */
.menu__header,
.menu__items > li > :not(.menu__sub),
.menu__service {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--dur-fast) ease-in-out, transform var(--dur-fast) ease-in-out;
}

.menu.is-open .menu__header,
.menu.is-open .menu__items > li > :not(.menu__sub),
.menu.is-open .menu__service {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}

/* --- panel içi başlık: Kapat / Ara ------------------------------------- */
/* Sticky (referans: .new-menu__header position:sticky;top:0;z-index:4) —
   mobilde alt panel açılınca Kapat butonu üstte görünür kalır. */
.menu__header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  flex: none;
  padding: 0 var(--menu-pad);
  background: var(--c-paper);
}

.menu__header-group { display: flex; align-items: center; gap: 32px; }
/* Sağ ikon grubu (favori/hesap/sepet) yalnızca mobilde görünür. */
.menu__header-group--right { display: none; }
.menu__hicon { line-height: 0; transition: opacity var(--dur-fast) linear; }
.menu__hicon:hover { opacity: .6; }
.menu__hicon .icon { width: 24px; height: 24px; }

.menu__hbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-nav);
  line-height: 18px;
  transition: opacity var(--dur-fast) linear;
}

/* Görünmez 40px dokunma alanı — header'daki ile aynı desen */
.menu__hbtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  min-width: 40px;
  width: calc(100% + 8px);
}

/* --- satırlar ----------------------------------------------------------- */
.menu__level { flex: 1 1 auto; }

.menu__items { list-style: none; margin: 0; padding: 0; }

.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 24px;
  width: 100%;
  padding: 12px var(--menu-pad);
  text-align: left;
  background-color: var(--c-paper);
  transition: opacity var(--dur-fast) linear;
}

.menu__label {
  display: block;
  font-size: 16px;
  line-height: 22px;
  transition: opacity .15s linear;
}

/* Ok varsayılanda GİZLİ; hover'da 4px sağa kayarak beliriyor. */
.menu__chev {
  flex: none;
  line-height: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) ease-in-out, transform var(--dur-fast) ease-in-out;
}

.menu__chev svg { width: 16px; height: 16px; stroke-width: 1.6; display: block; }

/* Alt menüsü AÇIK (aria-expanded="true") 1. seviye item — tıklayıp 2. seviyeye
   geçince ok GÖRÜNÜR kalır, etiket SİYAH kalır; aynı listedeki diğer item
   etiketleri .5'e söner. Referans: .level-item--active → icon+text opacity:1;
   kardeşler .level-item--not-hover → opacity:.5. Hover'dan bağımsız (tıklama
   durumu) olduğu için @media(hover) DIŞINDA. */
.menu__item[aria-expanded="true"] .menu__chev{ opacity: 1; transform: translateX(0); }
.menu__item[aria-expanded="true"] .menu__label { opacity: 1; }

.menu__items:has(> li > .menu__item[aria-expanded="true"]) > li >
  .menu__item:not([aria-expanded="true"]) .menu__label {
  opacity: .5;
}

@media (hover: hover){
  .menu__item:hover .menu__chev { opacity: 1; transform: translateX(0); }

  /* Bir satırın üzerine gelince aynı listedeki diğerlerinin ETİKETİ %50'ye
     söner (satırın tamamı değil — ok ayrı yönetiliyor).
     Seçici `> li >` ile TEK seviyeye kilitli: alt panellere ve servis
     listesine taşmıyor, referanstaki davranış da böyle.
     Aktif (expanded) item hover'la SÖNMEZ — daima siyah kalır. */
  .menu__items:has(> li > .menu__item:hover) > li >
    .menu__item:not(:hover):not([aria-expanded="true"]) .menu__label {
    opacity: .5;
  }

  /* Servis listesi: kataloğun solma sisteminin AYNISI — listenin üzerine
     gelince tüm item'lar .5'e söner, hover edilen 1'e döner.
     Referans: .new-menu-service__list:hover .service-item{opacity:.5} /
               .new-menu-service__list:hover .service-item:hover{opacity:1} */
  .menu__service ul:hover .service-item { opacity: .5; }
  .menu__service ul:hover .service-item:hover { opacity: 1; }
}

/* --- bölüm başlığı ve boşluk ------------------------------------------- */
.menu__title {
  margin: 0;
  padding: 15px var(--menu-pad);
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--fw-regular);
  color: rgb(113 121 127);
}

.menu__spacer { padding: 12px 0; width: 100%; }

/* --- alt seviyeler ------------------------------------------------------ */
.menu__sub {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: var(--c-paper);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
  transition:
    transform  .15s linear,
    opacity    .15s ease-out,
    visibility 0s linear .15s;
}

.menu__sub.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: transform .15s linear, opacity .15s ease-out, visibility 0s linear 0s;
}

/* 2. seviyenin İLK item'ı, sol sütundaki header boşluğunu telafi ederek
   1. seviye ile hizalanır. Referans:
   .new-menu__second-level li:first-child{padding-top:24px} (mobil) →
   masaüstünde 96px'e döner (aşağıdaki @media 768). */
.menu__sub .menu__items > li:first-child{ padding-top: 24px; }

/* Breadcrumb (geri + kategori adı) yalnızca mobilde görünür; masaüstünde
   alt panel sağa açıldığı ve üst item görünür kaldığı için gerek yok. */
.menu__crumb { display: none; }

/* --- MOBİL: tam ekran menü davranışı ----------------------------------- */
@media (max-width: 767px){
  /* Header (image 34): Kapat/Ara etiketleri gizli (yalnızca ikon), sağda
     favori/hesap/sepet ikonları görünür. */
  .menu__hbtn span { display: none; }
  .menu__header-group { gap: 20px; }
  .menu__header-group--right { display: flex; gap: 20px; }

  /* Oklar dokunmatikte hover olmadığı için DAİMA görünür (Prada mobil gibi:
     alt menüsü olan her item'da sağ ok var). */
  .menu__chev { opacity: 1; transform: none; }

  /* Alt panel, sabit (sticky) başlığın ALTINDA açılır — böylece Kapat butonu
     her zaman erişilebilir kalır ve panel içeriği başlığın arkasında kalmaz. */
  .menu__sub {
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
  }

  /* Breadcrumb bar — referans .new-menu-breadcrumb: sol ‹ geri oku + ortada
     kategori adı, alt kenarda ince çizgi. Alt panelin en üstünde sticky. */
  .menu__crumb {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 var(--menu-pad);
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--c-ink);
  }
  .menu__crumb-icon {
    position: absolute;
    left: var(--menu-pad);
    line-height: 0;
    transition: opacity var(--dur-fast) linear;
  }
  .menu__crumb:hover .menu__crumb-icon { opacity: .6; }
  .menu__crumb-icon svg { width: 20px; height: 20px; stroke-width: 1.6; display: block; }
}

/* --- mozaik ------------------------------------------------------------- */
.mosaic { padding: 0 var(--menu-pad) 24px; }

.mosaic__title {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  color: rgb(113 121 127);
}

.mosaic__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap); /* 1px — imza */
}

.mosaic__item { display: block; }

/* Yer tutucu: gerçek görseller gelince <img> ile değişecek */
/* Fotoğraf yüklenmemişse <div> (gri kutu), yüklenmişse <img> — ikisi de aynı
   kutuyu doldursun diye kural ortak. */
.mosaic__media {
  display: block;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  object-fit: cover;
  background: #f1f1f2;
  transition: opacity var(--dur-media) var(--ease);
}

.mosaic__item:hover .mosaic__media { opacity: .8; }

.mosaic__name {
  padding: 8px 0 0;
  font-size: var(--fs-body);
  line-height: 18px;
}

/* --- alt servis listesi ------------------------------------------------- */
/* Referans: .new-menu-service{padding-top:48px;padding-bottom:56px}
   (masaüstünde alt 48px'e döner). */
.menu__service {
  flex: none;
  padding-top: 48px;
  padding-bottom: 56px;
}

.menu__service ul { list-style: none; margin: 0; padding: 0; }

/* Sepet satırındaki sayaç: satırın sağ ucunda nokta + ürün sayısı.
   Yalnızca sepette ürün varken görünür (sayı sepet.js'ten gelir). */
.service-item__counter {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: #2535e5;   /* referanstan: rgb(37, 53, 229) */
  font-size: var(--fs-body);
  line-height: 18px;
}
.service-item.has-items .service-item__counter { display: inline-flex; }
.service-item__counter::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px var(--menu-pad);
  font-size: var(--fs-body);
  background-color: var(--c-paper);
  /* Prada: hover'da gri dikdörtgen YOK — arka plan beyaz kalır, tek efekt
     opacity. Bu yüzden geçiş background yerine opacity üzerinde. */
  transition: opacity .2s ease-in-out;
}

.service-item .icon { width: 20px; height: 20px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; /* .hero__player'ın konumlanma referansı */
  height: var(--hero-h-mobile);
  min-height: 480px;
  display: grid;
  isolation: isolate;
}

/* Medya ve içerik aynı grid hücresini paylaşır — üst üste biner */
.hero__media,
.hero__overlay { grid-area: 1 / 1; }

.hero__media { overflow: hidden; }

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Metin okunabilirliği için degrade — düz siyah katman görseli öldürür */
.hero__overlay {
  position: relative;
  display: flex;
  align-items: flex-end;   /* referans: flex-end */
  justify-content: center;
  /* padding-block: 16px 40px / padding-inline: 16px — referanstan birebir.
     Alt boşluk 40px; içerik bloğunun hero tabanına uzaklığını bu belirliyor. */
  padding: 16px var(--gutter-mobile) 40px;
  pointer-events: none; /* hero'nun tamamı tıklanabilir kalsın */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .18) 0%,
    rgba(0, 0, 0, 0)   28%,
    rgba(0, 0, 0, 0)   55%,
    rgba(0, 0, 0, .42) 100%
  );
}

/* Referansta içerik bloğu flex sütun; kicker/başlık arası boşluğu
   margin değil `gap` veriyor (8px mobil / 12px masaüstü). */
.hero__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  color: var(--c-paper);
}

.hero__kicker {
  display: block;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hero__title {
  /* margin yok — dikey boşluğu .hero__content'in `gap`i veriyor */
  font-size: var(--fs-title-mobile);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.hero__cta-group {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: .75rem;
  pointer-events: auto; /* overlay none, linkler tekrar aktif */
}

.hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;   /* alt çizgi ::after ile çizilir (animasyon için) */
}

.hero__cta:hover::after,
.hata__ara:hover::after,
.search__close:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* --- Ortak CTA alt çizgisi ---
   Yeni Gelenler / Koleksiyon / Keşfedin / @cicek.bozyel gibi altı çizili
   metin linkleri. Alt çizgi native değil, ::after ile çizilir; böylece hover'da
   çizgi sağa doğru silinip soldan yeniden gelerek "kayma" efekti yapar.
   Konum lh birimiyle satır kutusunun altına hizalanır (flex/min-height'tan
   bağımsız). */
.hero__cta::after,
.banner__cta::after,
.hata__ara::after,
.search__close::after,
.insta__handle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}

@keyframes link-underline {
  0%     { transform: translateY(.5lh) scaleX(1); transform-origin: right; }
  50%    { transform: translateY(.5lh) scaleX(0); transform-origin: right; }
  50.01% { transform: translateY(.5lh) scaleX(0); transform-origin: left; }
  100%   { transform: translateY(.5lh) scaleX(1); transform-origin: left; }
}

/* Video oynat/duraklat — sağ alt köşe */
.hero__player {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px;
  display: grid;
  place-items: center;
  color: var(--c-paper);
  line-height: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.hero__player:hover { opacity: .7; }

/* İkon geçişi data-state üzerinden yapılır.
   `hidden` özelliği KULLANILMAZ: `hidden` HTMLElement'e ait, SVGElement'te
   yok. `svg.hidden = true` yalnızca işe yaramaz bir expando yaratır ve
   tarayıcının UA stili de [hidden] kuralını SVG namespace'ine uygulamaz —
   iki ikon birden görünür kalır. */
/* 24px: viewBox 24 birim olduğu için 1 birim = 1 piksel hizası korunur. */
.hero__player .icon { width: 24px; height: 24px; display: none; }
.hero__player[data-state="playing"] .icon--pause { display: block; }
.hero__player[data-state="paused"]  .icon--play  { display: block; }

/* ==========================================================================
   EDITORIAL — hero altı beyaz metin bloğu
   ========================================================================== */
.editorial {
  padding: 72px var(--gutter-mobile);
  text-align: center;
}

.editorial__text {
  max-width: 620px;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink);
}

.editorial__link {
  display: inline-block;
  margin-top: 28px;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-base) var(--ease);
}

.editorial__link:hover { opacity: .6; }

/* ==========================================================================
   KATEGORİ IZGARASI — Prada "slider-grid" uyarlaması
   Değerler referanstan: bölüm gap 24px mobil / 56px masaüstü, padding-top
   72px masaüstü; ızgara boşluğu 1px (imza); kart medyası 4:5; başlık 14px /
   line-height 125% / ağırlık 500, ortalı.
   Kadın odaklı olduğu için sekme (Kadın/Erkek) yok.
   ========================================================================== */
.catgrid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 48px;
  background: var(--c-paper);
}

/* Açıklama metni — referans .slider-grid-headings: ortalı, max 600px,
   14px/18px masaüstü. */
.catgrid__desc {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  color: var(--c-ink);
}

/* Referans .slider-grid-lists__grid: gap 1px. Mobilde 2 sütun, masaüstünde
   4 sütun (referans 4-cards tek sıra). */
.catgrid__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

.catgrid__card { display: block; }

/* Yer tutucu: gerçek görseller gelince <img> ile değişecek */
.catgrid__media {
  /* 4:5'ten biraz daha UZUN kart (7:10). Yalnızca kartlar aşağı doğru
     büyür; açıklama, üst boşluk ve kartların başlangıç hizası aynı kalır —
     böylece bölüm ekranı tam doldurur, altındaki banner tepeden görünmez.
     (Bu değer yalnızca bu bölüme özel; hero/mozaik/koleksiyon etkilenmez.) */
  aspect-ratio: 7 / 10;
  background: #f1f1f2;
  overflow: hidden;
  transition: opacity var(--dur-media) var(--ease);
}
.catgrid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.catgrid__card:hover .catgrid__media { opacity: .8; }

/* Referans .slider-grid-card-headings: ortalı, padding 12px 16px 24px mobil /
   24px 24px 56px masaüstü; başlık 14px, lh 125%, ağırlık 500. */
.catgrid__title {
  padding: 12px 16px 24px;
  text-align: center;
  font-size: 14px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* ==========================================================================
   TANITIM BANNER'I — Prada "hero-card" uyarlaması
   Referanstan: kart ~90vh (max 90vh), arka plan görseli cover; içerik altta
   (align flex-end) ve ORTALI; içerik padding 16px yatay / 40px alt; başlık
   32px masaüstü / 20px mobil (ağırlık 500), açıklama 14px, CTA altı çizili.
   Görselin üstünde metin okunsun diye hafif alt gradyan.
   ========================================================================== */
.banner__card {
  position: relative;
  display: grid;
  isolation: isolate;
  width: 100%;
  /* Yükseklik SABİT vh DEĞİL: görselin kendi oranına bırakıldı. Böylece
     yatay kampanya görseli (2400×1453 ≈ 1.65:1) tam genişlikte kırpılmadan
     oturuyor. Sabit 90vh, görselden daha geniş bir kap yaratıp cover ile
     üst/altını kesiyordu. */
}

/* Medya ve içerik aynı grid hücresini paylaşır — üst üste biner (hero deseni) */
.banner__media,
.banner__overlay { grid-area: 1 / 1; }

.banner__media { overflow: hidden; }

.banner__media picture { display: block; }
.banner__media img {
  width: 100%;
  height: auto;   /* kendi oranında akar — kırpılmadan tam oturur */
  display: block;

  /* YER AYIRMA — sayfanın en büyük tek kaymasını bu satır kapatıyor.
     `height: auto` görselin yüksekliğini dosyanın kendisinden alıyordu; yani
     dosya inene kadar kutu 0px'ti ve gelince masaüstünde ÖLÇÜLEN 766px'i bir
     anda açıp altındaki bölümlerin tamamını aşağı itiyordu. Oran baştan
     bildirilince tarayıcı yeri en baştan ayırıyor, görsel boşluğa yerleşiyor.

     Oranlar UYDURULMADI, dosyalardan okundu:
       masaüstü  cq5dam.web.2400.2400.avif  2400×1453
       mobil     mobile_her.avif            1280×2434
     Sabit yazmak güvenli, çünkü panel bu iki yuvaya farklı oranda görsel
     KABUL ETMİYOR: yükleme %2 toleransla aynı orana zorlanıyor
     (bkz. api/gorsel.php → cicek_gorsel_olcu_kurali). Yuva `oranSerbest`
     olsaydı burada sabit oran yanlış olurdu.

     Mobil değer varsayılan: <picture> 767px'te kaynak değiştiriyor, site de
     mobil öncelikli yazılmış. */
  aspect-ratio: 1280 / 2434;
}
@media (min-width: 768px) {
  .banner__media img { aspect-ratio: 2400 / 1453; }
}

.banner__overlay {
  position: relative;
  display: flex;
  align-items: flex-end;   /* içerik altta — referans: --a4358064 flex-end */
  justify-content: center;
  padding: 16px var(--gutter-mobile) 40px;
  pointer-events: none;    /* tıklama kapsayan <a>'ya geçsin */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)   55%,
    rgba(0, 0, 0, .35) 100%
  );
}

.banner__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  max-width: 600px;
  color: var(--c-paper);
}

.banner__title {
  font-size: var(--fs-title-mobile); /* 20px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.banner__desc {
  font-size: var(--fs-body);   /* 14px */
  line-height: 20px;
}

/* CTA — referans hero-button--link: altı çizili, hover'da soluyor */
.banner__cta {
  position: relative;
  pointer-events: auto;
  align-self: center;
  margin-top: .75rem;
  font-size: var(--fs-cta);    /* 14px */
  font-weight: var(--fw-medium);
  text-decoration: none;   /* alt çizgi ::after ile çizilir (animasyon için) */
}

/* Animasyon yalnızca "Keşfedin" yazısının üzerine gelince çalışır (kartın
   tümü değil). Kart hâlâ tümüyle tıklanabilir; cta pointer-events:auto ile
   hover'ı kendisi yakalar. */
.banner__cta:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* ==========================================================================
   KOLEKSIYON SLIDER'I — başlıklı slider-grid uyarlaması
   Referanstan: bölüm gap 24/56px, padding-top 48/72px; başlık 16/20px (500),
   açıklama 14px; kart adı 12/14px (500), lh 125%; ızgara boşluğu 1px; kart
   medyası 4:5. Kartlar yatay kaydırılır (scroll-snap) — Swiper yerine.
   ========================================================================== */
.collgrid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Alt boşluk üstten FAZLA (48 → 96): kartların altındaki kaydırma çubuğu
     bittiği anda alttaki koyu Instagram bölümü ekranın kenarından
     görünüyordu — bölümün bittiği yer belirsiz kalıyor, koyu şerit kartların
     dibine yapışmış gibi duruyordu. */
  padding: 48px 0 96px;
  background: var(--c-paper);
  overflow: hidden;   /* güvenlik: yatay taşma sayfayı kaydırmasın */
}

.collgrid__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  text-align: center;
}

.collgrid__title {
  font-size: 16px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

.collgrid__desc {
  font-size: 14px;
  line-height: 18px;
  color: var(--c-ink);
}

/* Yatay kaydırılabilir şerit — grid sütunları, 1px boşluk, scroll-snap.
   4 kart tam sığar; fazlası eklenirse kaydırılır. */
.collgrid__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62vw;      /* mobilde ~1.5 kart görünür */
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;        /* Firefox: çubuğu gizle */
}
.collgrid__track::-webkit-scrollbar { display: none; } /* WebKit */

.collgrid__card {
  display: block;
  scroll-snap-align: start;
}

/* Kartın görsel kutusu — sitenin her yerindeki ürün kartı oranı (4:5).
   BU KURAL EKSİKTİ ve iki sorun birden çıkarıyordu:

   1) YER AYRILMIYORDU. Kutunun yüksekliği tamamen görselden geliyordu, yani
      görsel yüklenene kadar 0px'ti. Şerit `loading="lazy"` kullandığı için
      kartlar görünür alana girince birden yükseliyor, altındaki her şeyi
      aşağı itiyordu (CLS). Yerel sunucuda görseller anında geldiği için
      ölçümde görünmüyordu — gerçek bağlantıda görünür.

   2) KARTLAR FARKLI BOYDAYDI. Ürün fotoğrafları farklı oranlarda geliyor
      (1024×1024, 1170×1450, 1080×1080 …) ve her kart kendi görselinin
      oranını alıyordu: aynı sırada 320px, 397px, 427px yükseklikler ölçüldü,
      başlıklar farklı hizalarda kalıyordu.

   Oran uydurulmadı: `plp-card__media`, `wish-card__media`, `cart-item__media`,
   `ord-line__media` ve `mosaic__media` zaten `--card-ratio` kullanıyor —
   AYNI ürün görselleri kategori sayfalarında da 4:5'e kırpılıyor. Alttaki
   `height: 100%` + `object-fit: cover` de zaten kutunun ölçülü olmasını
   bekliyordu; eksik olan tek şey kutunun kendisiydi. */
.collgrid__media {
  aspect-ratio: var(--card-ratio);
  overflow: hidden;
  background: #f1f1f2;   /* görsel gelene kadar boş kutu değil, sessiz zemin */
}
.collgrid__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Üzerine gelince İKİNCİ FOTOĞRAFA GEÇME YOK (ürün listesindeki
   .plp-card__media-alt davranışı buraya taşınmadı) — vitrinde hafif bir
   soluklaşma yeterli. */
.collgrid__card:hover .collgrid__media { opacity: .92; }

/* İndirim rozeti — kartın sol üstünde, sessiz. */
.collgrid__rozet {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 8px;
  background: var(--c-ink);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
}

.collgrid__card-title {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* Viewport — track + ok butonlarını sarar; oklar buna göre konumlanır. */
.collgrid__viewport { position: relative; }

/* Ok butonları — yalnızca masaüstünde görünür (mobilde parmakla kaydırılır).
   Kartların medya (4:5) alanının dikey ortasında, kenardan hafif içeride durur.
   .is-hidden ile uçlarda gizlenir (sonsuz loop yok). */
.collgrid__nav { display: none; }
@media (min-width: 768px){
  .collgrid__nav {
    position: absolute;
    top: calc(25vw * 5 / 4 / 2);   /* 25vw genişlikte 4:5 medyanın dikey ortası */
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--c-ink);
    transition: opacity var(--dur-fast) linear,
                visibility var(--dur-fast) linear;
  }
  .collgrid__nav svg { width: 24px; height: 24px; stroke-width: 1.5; display: block; }
  .collgrid__nav--prev { left: 16px; }
  .collgrid__nav--next { right: 16px; }
  .collgrid__nav:hover { opacity: .7; }
  .collgrid__nav.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Sürüklenebilir kaydırma çubuğu — Prada slider-grid swiper-scrollbar
   uyarlaması. İnce çizgi + koyu tutamak; kaydırma yoksa gizlenir (JS). */
/* Referans (Prada swiper-scrollbar): kısa (~300px), ORTALANMIŞ, açık gri zemin
   #f7f7f7, yuvarlak köşe. Tam genişlik DEĞİL. */
.collgrid__scrollbar {
  position: relative;
  width: 300px;
  max-width: calc(100% - 2 * var(--gutter-mobile));
  height: 2px;
  margin: 16px auto 0;
  background: #f7f7f7;
  border-radius: 10px;
}
.collgrid__scrollbar.is-hidden { display: none; }
.collgrid__scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 24px;
  background: var(--c-ink);
  border-radius: 10px;
  cursor: grab;
}
.collgrid__scrollbar-thumb:active { cursor: grabbing; }

/* ==========================================================================
   REVEAL — IntersectionObserver ile tetiklenir (referans sitedeki model)
   Kütüphane yok. GSAP yok. ~1 KB JS.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   SOHBET BALONU
   ========================================================================== */
/* Sohbet düğmesi — canlı widget'ın gerçek ölçüleri:
   48px DAİRE, 8px iç boşluk, beyaz zemin / siyah ikon, 32px ikon kutusu.
   Widget üçüncü parti olduğu için Prada'nın kendi CSS'inde yok;
   yalnızca konum (right/bottom) markup'ta yer almadığından ekran
   görüntüsünden ölçüldü. */
/* ⚠️ ŞU AN GİZLİ — CANLI DESTEK KULLANILMIYOR (19 Ağustos 2026).
   Düğme 23 sayfanın markup'ında duruyor ama hiçbir şeye bağlı DEĞİL:
   tıklanınca hiçbir şey olmuyordu, yani müşteriye ölü bir buton
   gösteriliyordu. Markup'ı 23 dosyadan tek tek silmek yerine burada
   gizlendi — canlı destek açılacağı gün bu tek kuralı silmek yeterli.
   Aşağıdaki ölçü/konum kuralları o gün için olduğu gibi bırakıldı. */
.chat-bubble { display: none !important; }

.chat-bubble {
  position: fixed;
  right: 36px;
  bottom: 36px;
  z-index: 90;
  width: 48px;
  height: 48px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-paper);
  color: #000;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  transition: box-shadow var(--dur-base) var(--ease);
}

.chat-bubble:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }

.chat-bubble__icon { width: 32px; height: 32px; display: block; }

/* Menü açıkken (tam ekran) sohbet balonu gizlenir — Prada mobil davranışı.
   Sınıf, menü açılıp kapanırken main.js tarafından <html>'e eklenir. */
/* Tam ekran / kayan katmanların hepsinde sohbet balonu gizleniyor: panelin
   üstünde asılı kalması hem görüntüyü bozuyor hem de dokunma hedefini
   çakıştırıyor. `is-mcart-open` SONRADAN eklendi — mini sepet listedeki tek
   eksikti, açıldığında balon panelin üstünde duruyordu. */
.is-menu-open .chat-bubble,
.is-contact-open .chat-bubble,
.is-empty-drawer-open .chat-bubble,
.is-mcart-open .chat-bubble,
.is-search-open .chat-bubble { display: none; }

/* ==========================================================================
   BOŞ DURUM ÇEKMECESİ — sepet / istek listesi boş (Prada empty-drawer uyarlaması)
   Sağdan kayan panel + karartma; ortada tek satır mesaj, sağ üstte kapat.
   main.js body'ye enjekte eder; header/menü #sepet & #favoriler bağları açar.
   ========================================================================== */
.edrawer {
  position: fixed; inset: 0; z-index: 70;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.edrawer.is-open { visibility: visible; transition: visibility 0s linear 0s; }

.edrawer__scrim {
  position: absolute; inset: 0;
  background: #000; opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.edrawer.is-open .edrawer__scrim { opacity: .3; }

.edrawer__panel {
  position: absolute; top: 0; right: 0;
  height: 100dvh; width: min(100vw, 500px);
  background: var(--c-paper); color: var(--c-ink);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
  display: flex; flex-direction: column;
  padding: 72px 24px 56px;
}
.edrawer.is-open .edrawer__panel { transform: translateX(0); }

.edrawer__close {
  position: absolute; top: 18px; right: 16px;
  padding: 0; line-height: 0; color: var(--c-ink);
  background: none; border: none; cursor: pointer;
  transition: opacity var(--dur-fast) linear;
}
.edrawer__close:hover { opacity: .6; }
.edrawer__close svg { width: 22px; height: 22px; stroke-width: 1.6; display: block; }

.edrawer__body {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
}
.edrawer__message {
  max-width: 340px; margin: 0 auto;
  text-align: center; font-size: 15px; line-height: 1.6;
  color: var(--c-ink);
}
@media (min-width: 768px){
  .edrawer__close { top: 26px; right: 26px; }
}
/* Mobilde alttan yukarı açılan kısmi sayfa (bottom sheet); üstte menü/görünen
   içerik gri maskeyle kalır. */
@media (max-width: 767px){
  .edrawer__panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto;
    transform: translateY(100%);
    padding: 56px 24px 40px;
  }
  .edrawer.is-open .edrawer__panel { transform: translateY(0); }
  .edrawer__body { min-height: 160px; }
}

/* ==========================================================================
   ARAMA KATMANI — üstten inen beyaz panel (arama kutusu + koleksiyon/öne çıkan
   sütunları) + altında karartma maske (Prada search-algolia uyarlaması).
   main.js body'ye enjekte eder; header/menü "Ara" butonları açar.
   ========================================================================== */
.search {
  position: fixed; inset: 0; z-index: 40;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.search.is-open { visibility: visible; transition: visibility 0s linear 0s; }

.search__mask {
  position: absolute; inset: 0; z-index: 1;
  background: #000; opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.search.is-open .search__mask { opacity: .5; }

.search__panel {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  background: var(--c-paper); color: var(--c-ink);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease);
  padding-bottom: 40px;
}
.search.is-open .search__panel { transform: translateY(0); }

.search__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h-mobile);
  padding: 0 var(--gutter-mobile);
  border-bottom: 1px solid var(--c-line);
}
.search__input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 15px; color: var(--c-ink);
}
.search__input::placeholder { color: var(--c-muted); }
/* Alt çizgi native değil: ortak CTA alt çizgisi kuralına bağlandı
   (bkz. `.hero__cta::after` grubu). Hover'da eskiden `opacity: .6` ile
   sönüyordu; artık Yeni Gelenler / Koleksiyon bağlantılarıyla aynı
   `link-underline` kayma animasyonunu oynatıyor. `position: relative`
   ::after'ın dayanağı, o yüzden şart. */
.search__close {
  position: relative;
  flex: none;
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 13px; color: var(--c-ink);
  cursor: pointer;
  text-decoration: none;
}

.search__cols {
  display: flex; gap: 48px;
  padding: 32px var(--gutter-mobile) 0;
}
.search__col-title {
  margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-ink);
}
.search__list { list-style: none; margin: 0; padding: 0; }
.search__item { margin-bottom: 14px; }
.search__link {
  position: relative; display: inline-block;
  font-size: 14px; color: var(--c-ink); text-decoration: none;
}
.search__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-line) var(--ease);
}
.search__link:hover::after { transform: scaleX(1); }

/* Sonuç listesi — kutuya yazınca öneri sütunlarının yerini alır. */
.search__results { padding: 32px var(--gutter-mobile) 0; }
.search__hits {
  max-height: min(56vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-hit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  text-decoration: none;
}
.search-hit:first-child { border-top: 1px solid var(--c-line); }
.search-hit__name  { grid-column: 1; font-size: 14px; }
.search-hit__price { grid-column: 2; grid-row: 1; font-size: 14px; white-space: nowrap; }
.search-hit__meta  { grid-column: 1; font-size: 12px; color: var(--c-muted); }
.search-hit:hover .search-hit__name { text-decoration: underline; text-underline-offset: 3px; }
.search__empty { margin: 0; font-size: 14px; color: var(--c-muted); }

@media (min-width: 768px){
  .search__top { height: var(--header-h); padding: 0 var(--header-pad); }
  .search__input { font-size: 16px; }
  .search__cols { gap: 80px; padding: 40px var(--header-pad) 0; }
  .search__results { padding: 40px var(--header-pad) 0; }
}

/* ==========================================================================
   BİZE ULAŞIN ÇEKMECESİ — Prada "cu-drawer" uyarlaması
   Sağdan kayan panel + karartma. Kanallar dikey liste (title solda, ikon
   sağda), altında iletişim notu.
   ========================================================================== */
.cdrawer {
  position: fixed;
  inset: 0;
  z-index: 30;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.cdrawer.is-open {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.cdrawer__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.cdrawer.is-open .cdrawer__scrim { opacity: .3; }

.cdrawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(100vw, 460px);
  background: var(--c-paper);
  color: var(--c-ink);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
  overflow-y: auto;
  overflow-x: hidden;   /* sağdan kayan WhatsApp katmanı taşmasın */
  padding: 72px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cdrawer.is-open .cdrawer__panel { transform: translateX(0); }

/* Mobilde tam ekran, ancak animasyon alttan yukarı kayar (sepet/istek listesi
   gibi kısmi değil — tüm ekranı kaplar). */
@media (max-width: 767px){
  .cdrawer__panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: 100dvh;
    transform: translateY(100%);
  }
  .cdrawer.is-open .cdrawer__panel { transform: translateY(0); }
}

.cdrawer__close {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 2;   /* WhatsApp katmanının üstünde kalsın */
  line-height: 0;
  color: var(--c-ink);
  transition: opacity var(--dur-fast) linear;
}
.cdrawer__close:hover { opacity: .6; }
.cdrawer__close svg { width: 22px; height: 22px; stroke-width: 1.6; display: block; }

.cdrawer__title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
}
/* Ana görünümde başlık ile buton listesi arası boşluk (Prada: title-wrapper
   margin-bottom 2rem). WhatsApp alt görünümünü etkilememesi için main'e özgü. */
.cdrawer__main .cdrawer__title { margin-bottom: 32px; }

.cdrawer__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;   /* Prada: social-buttons-section gap 16px */
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--c-line);
  font-size: var(--fs-body);   /* 14px */
  color: var(--c-ink);
  transition: border-color var(--dur-fast) ease-in-out;
}
/* Hover: gri dolgu değil, diğer kutular gibi kenar siyaha döner. */
.social-btn:hover { border-color: var(--c-ink); }
.social-btn__title { text-align: left; }
.social-btn__icon { flex: none; line-height: 0; }
.social-btn__icon svg { width: 24px; height: 24px; display: block; }

.cdrawer__notes {
  /* Buton listesi ile not metni arası boşluk (Prada: section gap 16px +
     notes margin-top 16px ≈ 32px). Böylece son buton ile dipdibe olmuyor. */
  margin-top: 32px;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-muted);
}
.cdrawer__notes a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- WhatsApp'a Bağlan alt görünümü --- */
/* Geri oku: normalde gizli, yalnızca WhatsApp görünümünde solda görünür
   (kapat butonunun ayna konumu). */
.cdrawer__back {
  position: absolute;
  top: 18px;
  left: 16px;
  z-index: 2;   /* WhatsApp katmanının üstünde kalsın */
  line-height: 0;
  color: var(--c-ink);
  display: none;
  transition: opacity var(--dur-fast) linear;
}
.cdrawer__back:hover { opacity: .6; }
.cdrawer__back svg { width: 22px; height: 22px; stroke-width: 1.6; display: block; }

/* WhatsApp görünümü — panelin üstünde tam kaplayan bir katman; normalde sağda
   (translateX %100) gizli durur, .is-whatsapp iken sağdan kayarak gelir. Böylece
   "Bize ulaşın" çekmecesinin kendi açılışı gibi yumuşakça açılır (anında değil).
   Ana görünüm (main) altta kalır; WhatsApp katmanı beyaz zemniyle üzerini örter. */
.cdrawer__wa {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;   /* başlık ile gri kutu arasında boşluk (referans) */
  /* Dolguyu panelden miras al: mobilde 72/24/40, masaüstünde 120/clamp/80.
     Sabit değer verilince masaüstünde başlık/içerik yukarı-sola kayıyordu. */
  padding: inherit;
  background: var(--c-paper);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease),
              visibility 0s linear var(--dur-base);
}
.cdrawer__panel.is-whatsapp .cdrawer__wa {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease),
              visibility 0s linear 0s;
}
.cdrawer__panel.is-whatsapp .cdrawer__back { display: block; }
/* Yalnız-WhatsApp modu (Bize ulaşın sayfasındaki kanal kartından açılış):
   geri oku olmaz, sadece kapatma tuşu kalır. Header'daki çekmece akışı
   etkilenmez — orada is-wa-only eklenmediği için geri oku görünür kalır. */
.cdrawer__panel.is-wa-only .cdrawer__back { display: none; }
/* Mobilde yalnız-WhatsApp modu alttan yukarı açılsın: WhatsApp katmanı kendi
   başına yatay (sağdan) kaymasın; panel zaten alttan yükseldiği için katman da
   onunla birlikte tek parça gelsin. Header çekmece akışı (is-wa-only yok)
   etkilenmez — orada katman yine sağdan kayar. */
@media (max-width: 767px){
  .cdrawer__panel.is-wa-only .cdrawer__wa {
    transform: none;
    visibility: visible;
    transition: none;
  }
}

/* Gri kutu — referans: açık gri zemin, ortalı içerik. */
.cdrawer__wa-box {
  background: #f7f7f7;
  padding: 40px 24px;
  text-align: center;
}
/* QR artık sabit bir görsel değil, sunucuda üretilen SVG (api/qr.php).
   Sarmalayıcı eski ölçüyü koruyor; SVG içeriye tam oturuyor. */
.cdrawer__wa-qr {
  width: 200px;
  height: 200px;
  margin: 0 auto 24px;
  display: block;
}
.cdrawer__wa-qr svg { width: 100%; height: 100%; display: block; }
.cdrawer__wa-text {
  margin: 0 0 24px;
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--c-ink);
}
/* Siyah dolgulu buton (referans button--primary). */
.cdrawer__wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 0 24px;
  background: #000;
  color: #fff;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  transition: opacity var(--dur-base) var(--ease);
}
.cdrawer__wa-btn:hover { opacity: .7; }

/* ==========================================================================
   INSTAGRAM — Prada "Pradasphere" bölümünün uyarlaması
   Referanstan: koyu zemin #111, padding 56/64px → 96px masaüstü; başlık
   20/24px (500) ortalı beyaz; kart hover overlay rgba(0,0,0,.4) + altı çizili
   beyaz metin. Kartlar yatay kaydırılır (Swiper yerine CSS scroll-snap).
   Instagram gönderileri kare olduğu için medya 1:1.
   ========================================================================== */
.insta {
  background: #111111;
  color: var(--c-paper);
  padding: 56px 0 64px;
  overflow: hidden;
}

.insta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 var(--gutter-mobile) 40px;
  text-align: center;
}

.insta__icon svg { width: 28px; height: 28px; display: block; }

.insta__title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
}

.insta__handle {
  position: relative;
  font-size: 14px;
  letter-spacing: var(--tracking);
  text-decoration: none;   /* alt çizgi ::after ile çizilir (animasyon için) */
}
.insta__handle:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* Ortalı carousel — aktif slide merkezde ve TAM boyutta, komşular scale(.9)
   ile küçük; aralarında boşluk (görsel slide'ın %90'ı). Ok butonlarıyla
   gezinilir (Swiper yerine main.js'teki mantık). Referans: slideWidth %75
   mobil / %55.8 masaüstü, image-width %90, non-active scale(.9). */
.insta__carousel { position: relative; }
.insta__viewport { overflow: hidden; }

.insta__wrapper {
  display: flex;
  transition: transform .5s var(--ease);
  will-change: transform;
}

.insta__slide {
  flex: 0 0 75%;                /* mobil slideWidth */
  display: flex;
  justify-content: center;
}

.insta__slide-link {
  position: relative;
  display: block;
  width: 90%;                  /* image-width → slide'lar arası boşluk */
  transform: scale(.9);
  transition: transform .4s var(--ease);
}
.insta__slide.is-active .insta__slide-link { transform: scale(1); }

.insta__media {
  aspect-ratio: 4 / 5;          /* Instagram dikey — hem mobil hem masaüstü */
  background: #2a2a2a;          /* görsel yüklenene kadar koyu zemin */
  overflow: hidden;
}
.insta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* kare görseli kaba kırparak sığdır */
  object-position: center;
  display: block;
}

.insta__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .3s ease;
}
.insta__slide-link:hover .insta__overlay { opacity: 1; }

/* --- ok butonları --- */
.insta__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--c-paper);
  transition: opacity .2s linear;
}
.insta__arrow svg { width: 24px; height: 24px; stroke-width: 1.4; display: block; }
.insta__arrow--prev { left: 5%; }
.insta__arrow--next { right: 5%; }
.insta__arrow:hover { opacity: .7; }

.insta__overlay-text {
  position: relative;
  color: var(--c-paper);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 14px;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.insta__overlay-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--c-paper);
}

/* ==========================================================================
   FOOTER — Prada footer uyarlaması
   Referanstan: konteyner 12/18px, padding-top 32px; başlık 12px/700/uppercase,
   letter-spacing .2px; item 14/20px mobil → 12/18px masaüstü; alt bölüm telif
   10/14px uppercase + CTA'lar. Mobilde sütunlar akordeon, masaüstünde açık.
   ========================================================================== */
.footer {
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: 12px;
  line-height: 18px;
  padding-top: 32px;
}

/* Mobil: tek sütun, her sütun akordeon (üst ayraç çizgili) */
.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  /* Yatay boşluk YOK — böylece akordiyon ayraç çizgileri (border-top) ekranın
     tam kenarına değer. Metin insetsi içerik tarafına (toggle + liste) verildi.
     Alt boşluk YOK — aksi halde son akordiyon kutusu diğerlerinden yüksek
     görünüyordu. */
  padding: 0;
}

.footer-nav { border-top: 1px solid var(--c-line); }
.footer-nav__title { margin: 0; }

.footer-nav__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--gutter-mobile);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--c-ink);
}

.footer-nav__chev { flex: none; line-height: 0; transition: transform var(--dur-fast) var(--ease); }
.footer-nav__chev svg { width: 16px; height: 16px; stroke-width: 1.6; display: block; }
.footer-nav.is-open .footer-nav__chev { transform: rotate(180deg); }

/* Liste: mobilde kapalı (max-height 0), açılınca genişler */
.footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter-mobile);
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease);
}
.footer-nav.is-open .footer-nav__list { max-height: 24rem; }

.footer-nav__item { margin-top: 24px; }
.footer-nav__item:last-child { padding-bottom: 24px; }
.footer-nav__item a {
  font-size: 14px;
  line-height: 20px;
  transition: opacity .15s linear;
}
.footer-nav__item a:hover { opacity: .6; }

/* --- alt bölüm: telif + CTA'lar --- */
.footer__bottom {
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
}

.footer__copyright {
  order: 2;
  width: 100%;
  align-self: center;
  border-top: 1px solid var(--c-line);
  padding: 24px 20px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
}

.footer__cta-wrap {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px var(--gutter-mobile);
}

.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  transition: opacity .15s linear;
}
.footer__cta:hover { opacity: .6; }
.footer__cta .icon { width: 18px; height: 18px; }

/* ==========================================================================
   BREAKPOINT'LER — 768 / 1024 / 1280 / 1600 (referanstan birebir)
   ========================================================================== */
@media (min-width: 768px){
  .header { height: var(--header-h); }
  .header__container { padding: 0 var(--header-pad); }

  .header__action-label { display: block; }
  .header__group { gap: 20px; }

  /* Genişlik değil cap-height eşleştirildi: referans logotipin gövde
     yüksekliği ~20px; bizimkinde çengel+nokta payı olduğu için toplam
     yükseklik daha fazla, gövde aynı optik boyuta oturuyor. */
  .header__mark svg { width: 126px; }

  /* Negatif margin YOK: header `position: fixed`, yani akış dışında.
     Bu yüzden hero zaten y=0'dan başlıyor ve video header'ın altına
     kendiliğinden uzanıyor. Negatif margin eklemek videonun üst
     72px'ini kırpıyordu. */
  .hero { height: var(--hero-h); }

  /* padding-block: 40px (üst ve alt) / padding-inline: 40px */
  .hero__overlay { padding: 40px; }

  /* Referansta blok genişliği görünen alana oranlı, alt ve üst sınırlı */
  .hero__content {
    gap: 12px;
    width: 33.3333vw;
    max-width: 600px;
    min-width: 460px;
  }

  .hero__title  { font-size: var(--fs-title); line-height: 1.17; }

  /* --- MENÜ, masaüstü ---------------------------------------------------
     Çekmece 33.333vw / max 480px. Alt seviyeler çekmecenin SAĞINA açılıyor;
     kırpılmamaları için `fixed` konumlandırıldılar (kaydırılan sütunun
     `overflow` bağlamından çıkıyorlar). */
  :root { --menu-pad: clamp(20px, 2.7778vw, 40px); }

  .menu {
    top: 0;
    width: var(--menu-w);
    height: 100dvh;
  }

  /* Başlık: Prada'nın masaüstü modeli — sabit 72px'lik ortalanmış çubuk
     DEĞİL. Butonlar üstte (24px), altında 48px boşluk, sonra katalog listesi.
     Referans: .new-menu-header-desktop__container
       padding: 24px clamp(20px,2.2222vw,32px) 48px
     (--header-pad zaten bu clamp'e eşit). Bu boşluk sayesinde ilk katalog
     item'ı Prada ile aynı dikey konuma (~102px) oturuyor. */
  .menu__header {
    height: auto;
    align-items: flex-start;
    padding: 24px var(--header-pad) 48px;
  }

  /* Boşluk elemanı masaüstünde 24px (referans: .new-menu-spacer{padding:24px 0}).
     Mobilde 12px kalıyor — Prada da öyle. */
  .menu__spacer { padding: 24px 0; }

  /* Masaüstünde liste alanı büyür (.menu__level flex:1 korunur) ve servis
     listesini viewport'un dibine iter — referans: .new-menu-first-column
     {display:flex;height:100%} + .new-menu__first-level{flex-grow:1}.
     Fark yalnızca alt boşlukta: Prada 48px (biz eskiden 16px'e dibe
     yapışıyorduk), böylece servis dipten 48px yukarıda oturuyor. */
  .menu__service { padding-bottom: 48px; }

  .menu__sub {
    position: fixed;
    top: 0;
    left: var(--menu-w);
    width: var(--menu-w);
    height: 100dvh;
    border-left: 1px solid var(--c-line);
  }

  /* Üçüncü seviye bir sütun daha sağa.
     Üstteki panelin `transform`u onu `position: fixed` çocuklar için
     kapsayıcı blok yapıyor, yani `left` zaten o panelin sol kenarından
     ölçülüyor — bu yüzden 2× değil tek genişlik veriliyor.
     `100%` KULLANILMIYOR: üst panelde kaydırma çubuğu çıktığında kutusu
     daralıyor ve sütun 15px sola kayıyordu. */
  .menu__sub .menu__sub { left: var(--menu-w); }

  /* Masaüstünde ilk item 96px yukarıdan boşlukla 1. seviyeye hizalanır
     (referans: .new-menu__second-level li:first-child{padding-top:96px}). */
  .menu__sub .menu__items > li:first-child { padding-top: 96px; }

  .service-item { padding: 8px 32px; }
  .hero__player { padding: 36px; }

  .editorial { padding: 96px var(--gutter); }

  /* Kategori ızgarası, masaüstü — referans: gap 56px, padding-top 72px,
     4 sütun tek sıra, başlık padding 24px 24px 56px. */
  .catgrid { gap: 56px; padding-top: 72px; }
  .catgrid__grid { grid-template-columns: repeat(4, 1fr); }
  .catgrid__title { padding: 24px 24px 56px; }

  /* Banner, masaüstü — içerik 33vw blok, başlık 32px, padding 40px.
     Yükseklik görselin oranıyla belirleniyor (sabit vh yok). */
  .banner__overlay { padding: 40px; }

  /* Koleksiyon slider'ı, masaüstü — gap 56px, padding-top 72px, başlık 20px,
     kart 25vw (4 kart tam sıra), kart adı padding 24/24/56. */
  .collgrid { gap: 56px; padding-top: 72px; }
  .collgrid__title { font-size: 20px; }
  .collgrid__track { grid-auto-columns: 25vw; }
  .collgrid__card-title { padding: 24px 24px 56px; font-size: 14px; }
  .collgrid__scrollbar { margin: 24px auto 0; max-width: none; }
  .banner__content { gap: 12px; width: 33.3333vw; max-width: 600px; min-width: 460px; }
  .banner__title { font-size: var(--fs-title); line-height: 1.17; }

  /* --- INSTAGRAM, masaüstü: padding 96px, başlık 24px, kart ~22vw (~4-5
     kart görünür), yatay gutter --- */
  .insta { padding: 96px 0; }
  .insta__head { padding-bottom: 56px; }
  .insta__title { font-size: 24px; }
  /* Kart 4:5 dikey. Daha minimal yükseklik için slide %28; merkez kart
     vurgulu, iki yanda kartların bir kısmı görünür. */
  .insta__slide { flex: 0 0 28%; }
  /* Oklar İKİ görselin arasındaki boşluğun TAM ortasına gelsin.
     Komşu kartlar scale(.9) ile küçüldüğü için boşluk hesabı:
       merkez görsel sol kenarı = 50% - (0.45 × 28) = %37.4
       sol komşu görsel sağ kenarı = (50 - 28) + (0.45 × 28 × 0.9) = %33.34
       ortası ≈ %35.4
     transform ile okun MERKEZİ bu çizgiye oturuyor (sol kenarı değil). */
  .insta__arrow--prev { left: 35.4%; transform: translate(-50%, -50%); }
  .insta__arrow--next { right: 35.4%; transform: translate(50%, -50%); }

  /* --- BİZE ULAŞIN ÇEKMECESİ, masaüstü — Prada ölçüleri: genişlik ~50vw
     (maks 960px), üst 120px / alt 80px boşluk, yanlar ~5.5vw. --- */
  .cdrawer__panel {
    width: clamp(400px, 50vw, 960px);
    padding: 120px clamp(40px, 5.5vw, 106px) 80px;
    gap: 32px;
  }
  .cdrawer__close { top: 40px; right: 40px; }
  .cdrawer__close svg { width: 24px; height: 24px; }
  /* Geri oku: × ile aynı üst hizada (40px), yatayda içerik kenarına hizalı
     (panel yan padding'iyle aynı) — referans Prada. */
  .cdrawer__back { top: 40px; left: clamp(40px, 5.5vw, 106px); }
  .cdrawer__back svg { width: 24px; height: 24px; }
  .social-btn { padding: 18px 24px; }

  /* --- FOOTER, masaüstü: 3 sütun yan yana, daima açık; akordeon yok --- */
  .footer__cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 27px;
    padding: 0 var(--gutter) 32px;
  }
  .footer-nav { border-top: 0; }
  .footer-nav__toggle { padding: 0; cursor: default; pointer-events: none; }
  .footer-nav__chev { display: none; }          /* masaüstünde ok yok */
  .footer-nav__list { max-height: none; overflow: visible; padding: 0; }  /* daima açık */
  .footer-nav__item { margin-top: 8px; }
  .footer-nav__item:first-child { margin-top: 20px; }
  .footer-nav__item:last-child { padding-bottom: 0; }
  .footer-nav__item a { font-size: 12px; line-height: 18px; }

  /* Alt bölüm satır düzenine geçer */
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--gutter);
  }
  .footer__copyright {
    order: 1;
    width: auto;
    border-top: 0;
    padding: 0;
    text-align: left;
  }
  .footer__cta-wrap {
    order: 2;
    flex-direction: row;
    width: auto;
    gap: 24px;
    padding: 0;
  }
}

@media (min-width: 1024px){
  .header__group { gap: 32px; }
}

@media (min-width: 1280px){
  .editorial__text { max-width: 680px; }
}

/* ==========================================================================
   ERİŞİLEBİLİRLİK — hareket azaltma tercihi
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   GİRİŞ / KAYIT SAYFASI (login-register.php)
   Prada "login-register" (CDC) uyarlaması. Sade logo header (altta ince çizgi)
   + sayfa ortasında dar kolon: e-posta adımı ve hesap avantajları listesi.
   Ana sayfayla aynı token'lar; sadece bu sayfada kullanılır.
   ========================================================================== */
/* Prada cdc-header: kısa header (~56px), logo sola yakın (dar sol boşluk). */
.auth-header {
  /* Yapışkan: bildirim şeridi başlığın altına (56px) sabitlendiği için
     başlık kayıp giderse şerit sayfanın ortasında havada kalıyordu.
     Ayrıca uzun listelerde marka ve menü erişimi de kaybolmuyor. */
  position: sticky;
  top: 0;
  z-index: 121;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-paper);
}
.auth-header__logo { display: block; line-height: 0; color: var(--c-ink); }
/* Logo Prada'daki gibi biraz büyük (mobil 120px / masaüstü 150px). */
.auth-header__logo svg { width: 120px; height: auto; display: block; }

/* Başlıktaki "Yönetim" etiketi — mağaza sahibi hangi kapıda olduğunu bir
   bakışta görsün. `margin-left: auto` onu başlığın sağ ucuna itiyor.

   Kural BURADA, panel.css'te değil: iki ekran da basıyor ama panel.css'i
   yalnızca girişli düzen (sera/duzen.php) yüklüyor. Kural orada dururken
   giriş ekranı (sera/index.php) onu hiç görmüyordu ve etiket stilsiz kalıp
   logoya yapışıyordu. 7 satır için oraya 106 KB'lik panel.css'i yüklemek
   yanlış olurdu; tek kaynak olarak buraya alındı. */
.sera-header__etiket {
  margin-left: auto;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Giriş ekranının durum kutuları — AYNI TUZAK, aynı çözüm.
   `.sera-uyari` panel.css'te tanımlıydı ama o dosyayı yalnızca GİRİŞLİ düzen
   (sera/duzen.php) yüklüyor; giriş ekranı (sera/index.php) yalnızca bu
   dosyayı alıyor. Sonuç: "Kullanıcı adı veya parola hatalı" satırı stilsiz
   basılıyordu — çerçevesiz, renksiz, sıradan bir paragraf gibi.
   Şifre sıfırlama akışı bu ekrana yeni mesajlar eklediği için kural buraya
   taşındı; panel.css'teki kopya girişli ekranlar için duruyor. */
.sera-uyari,
.sera-iyi {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid currentColor;
  font-size: 13px;
  line-height: 1.5;
}
.sera-uyari { color: #e2001a; }
.sera-iyi   { color: #256a29; }

/* İçerik kolonu — Prada'daki gibi sayfada yatay ortalı, dar (~456px),
   üstten boşluklu (dikey ortalı DEĞİL). */
.auth { padding: 56px var(--gutter-mobile) 96px; }
.auth__inner { width: 100%; max-width: 456px; margin: 0 auto; }

.auth__title {
  margin-bottom: 24px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

.auth__field { position: relative; margin-bottom: 16px; }
.auth__input {
  width: 100%;
  height: 54px;
  /* Üst dolgu, etiket yukarı kayınca yazının onunla çakışmaması için. */
  padding: 18px 16px 0;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  font-family: inherit;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
  transition: border-color var(--dur-fast) linear;
}
.auth__input::placeholder { color: transparent; }  /* etiket placeholder görevini görür */
.auth__input:focus { outline: none; border-color: var(--c-ink); }

/* Yüzen etiket — varsayılan: dikey ortalı, gri, 14px.
   Odak/dolu: yukarı kayar ve küçülür (Prada cdc-material-label). */
.auth__label {
  position: absolute;
  left: 16px;
  top: 0;
  display: flex;
  align-items: center;
  height: 54px;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  color: var(--c-muted);
  pointer-events: none;
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease);
}
.auth__input:focus + .auth__label,
.auth__input:not(:placeholder-shown) + .auth__label {
  transform: translateY(-15px) scale(.78);
}

/* İleri butonu — siyah zemin, beyaz uppercase (contact drawer WhatsApp
   butonuyla aynı dil). */
.auth__submit {
  width: 100%;
  min-height: 54px;
  background: #000;   /* saf siyah — --c-ink (#191b1c) biraz soluk duruyordu */
  color: var(--c-paper);
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) linear;
}
.auth__submit:hover { opacity: .85; }

/* Ayraç — Prada: margin 56px 0 48px, ince #d9dce0 çizgi. */
.auth__divider {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 56px 0 48px;
}

/* İçerik başlığı — Prada: 14px / lh 20px, alt boşluk 24px. */
.auth__benefits-title {
  margin-bottom: 24px;
  font-size: var(--fs-body);
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  /* Mobilde satırlara bölünürken kelimeleri dengeli dağıt (tek başına kalan
     kelime olmasın, tek cümle gibi dursun). */
  text-wrap: balance;
}

/* Avantaj listesi — Prada cdc-step-one-list birebir:
   liste gap 12px; her satır dikey ortalı; metin 12px/18px tam genişlik;
   ikon 24px + sağdan 16px boşluk (flex gap değil, ikon padding-right'ı). */
/* list-style/padding/margin sıfırlanır: yoksa <ul>'un varsayılan sol girintisi
   (~40px) maddeleri başlığın sol kenarından içeri kaydırıyor. */
.auth__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Prada align-items:center kullanır çünkü onların dar fontunda metin tek satır.
   Bizim (daha geniş) fontumuzda uzun maddeler 2 satıra sarıyor; center olsaydı
   ikonlar farklı yüksekliklerde durup "random" görünürdü. Bunun yerine ikonu
   İLK SATIRIN ortasına hizalarız: flex-start + margin-top -3px (ikon 24px,
   satır 18px → (24-18)/2). Böylece tüm ikonlar aynı hizada, tek satırlıklarda
   da Prada gibi ortalı görünür. */
.auth__item { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; }
.auth__item-icon {
  flex: none;
  margin-top: -4px;   /* ikonu ilk satırın ortasına hizala (ikon 24, satır 16) */
  line-height: 0;
  padding-right: 16px;
  color: var(--c-ink);
}
.auth__item-icon svg { width: 24px; height: 24px; display: block; }
.auth__item p {
  width: 100%;
  /* 11px + sıfır harf aralığı: en uzun madde bile 456px kolonda tek satıra
     sığar (Inter, GT-America'dan geniş olduğu için 12px'te sarıyordu). */
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0;
  text-align: left;
  color: var(--c-ink);
}

/* Masaüstünde başlığı biraz aşağı al (referanstaki gibi header'dan sonra
   hafif boşluk) ve header dolgusunu büyüt. */
@media (min-width: 768px){
  .auth { padding-top: 64px; }
  .auth-header__logo svg { width: 150px; }
  .sera-header__etiket { font-size: 13px; }
}

/* Mobil: header 56px, kolon kenarlardan boşluklu (max-width zaten sınırlar). */
@media (max-width: 767px){
  .auth-header { height: var(--header-h-mobile); }

  /* Başlık dar ekranda tek satırda kalsın: font ekran genişliğine göre
     akışkan küçülür (clamp) ve nowrap ile satır kırılması engellenir.
     14px çok geniş olduğu için 2 satıra düşüyordu. */
  .auth__benefits-title {
    font-size: clamp(10px, 3.3vw, 14px);
    line-height: 1.4;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/* ==========================================================================
   KAYIT ADIMI (afterSign) + YÜKLEME KATMANI
   Prada "Kişisel hesabınızı oluşturun" ekranının uyarlaması. E-posta adımıyla
   aynı dar kolon (456px) ve aynı token'lar; yardım/onay metinleri Prada'nın
   karakteristik zeytin/haki tonunda (--auth-note), yalnızca bu sayfada.
   ========================================================================== */
.auth {
  --auth-note: var(--c-ink);   /* yardım/onay metinleri — siyah */
  --auth-fill: #f5f5f5;   /* dolgulu alanlar (select, bildirim kutusu) */
}

/* İki adım aynı kolonda üst üste durur; gizli olan display:none (UA [hidden]). */
.auth__step[hidden] { display: none; }

/* Tıklanabilir öğelerde el imleci (bazı tarayıcılarda select/label varsayılan
   gelir; hepsini garanti altına al). */
.auth a,
.auth button,
.auth select,
.auth__check { cursor: pointer; }

/* Altı çizili bağlantılar (Düzenle / Tekrar gönder / Daha fazla bilgi /
   Gizlilik Politikamız). Çizgi native değil, ::after ile çizilir; hover'da
   ana sayfadaki CTA gibi sağa silinip soldan yeniden gelir — SOLMA YOK. */
.auth__link,
.auth__field-action {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.auth__link::after,
.auth__field-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.auth__link:hover::after,
.auth__field-action:hover::after {
  animation: link-underline var(--dur-line) var(--ease);
}

/* Giriş paragrafı — başlık altı açıklama, zeytin tonda, 13px. */
.auth__intro {
  margin: -8px 0 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--auth-note);
}

/* Doğrulama kodu bildirimi — gri dolgulu kutu, sol üstte zarf ikonu. */
.auth__notice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon ." "title title" "mail mail";
  gap: 6px 12px;
  padding: 22px 24px;
  margin-bottom: 28px;
  background: var(--auth-fill);
}
.auth__notice-icon { grid-area: icon; line-height: 0; color: var(--c-ink); }
.auth__notice-icon svg { width: 22px; height: 22px; display: block; }
.auth__notice-title {
  grid-area: title;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.auth__notice-mail {
  grid-area: mail;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-body);
  color: var(--c-ink);
}

/* "Zorunlu alanlar *" — küçük zeytin başlık. */
.auth__required {
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--auth-note);
}

/* Kayıt formunda alanlar arası biraz daha ferah (Prada ~24px). */
.auth__form--register .auth__field { margin-bottom: 24px; }
.auth__row { display: flex; gap: 16px; margin-bottom: 24px; }
.auth__row .auth__field { flex: 1; margin-bottom: 0; }

/* Kod alanı — sağda "Tekrar gönder" bağlantısı; metin çakışmasın diye sağ dolgu. */
.auth__field--code { margin-bottom: 8px !important; }
.auth__field--code .auth__input { padding-right: 118px; }
.auth__field-action {
  position: absolute;   /* kod alanının sağında; ::after yine buna göre hizalanır */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-body);
  color: var(--c-ink);
}

/* Yardım metni (kod geçerliliği / parola kuralı) — zeytin, 12px. */
.auth__hint {
  margin: 0 0 24px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--auth-note);
}
/* Parola kuralları ipucu — şifre alanından sonraki hint biraz daha küçük. */
.auth__field--reveal + .auth__hint { font-size: 10px; }

/* Doğum tarihi — geçerli tarih girilince sağda yeşil tik. */
.auth__field--birth .auth__input { padding-right: 44px; }
.auth__valid {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 0;
  color: #3a9a3a;              /* onay yeşili */
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
  pointer-events: none;
}
.auth__valid svg { width: 22px; height: 22px; display: block; }
/* Alan geçerliyken tik görünür (doğum tarihi + telefon ortak). */
.auth__field.is-valid .auth__valid { opacity: 1; }

/* Telefon — tik kutunun sağ ucunda; numara tik ile çakışmasın diye sağ dolgu. */
.auth__phone { position: relative; }
.auth__field--phone .auth__phone-main .auth__input { padding-right: 40px; }

/* Geçersiz alan — kırmızı kenarlık + altında kırmızı uyarı metni.
   Kenarlık girişlerde input'ta, telefonda dış çerçevede. Hata mesajı JS ile
   display:block olur; negatif üst boşluk onu üstteki ipucuna/alana yaklaştırır
   (aksi hâlde 24px'lik alt boşluk araya büyük boşluk koyuyor). */
.auth__field.is-error .auth__input,
.auth__field--phone.is-error .auth__phone {
  border-color: #e2001a;
}
.auth__error {
  display: none;
  margin: -16px 0 24px;
  font-size: 11px;
  line-height: 1.5;
  color: #e2001a;
}
/* Görünürlüğü JS `is-shown` sınıfıyla açıyor (eskiden satır içi `display`
   yazıyordu; CSS'in yerleşimi yönetebilmesi için sınıfa geçildi). */
.auth__error.is-shown { display: block; }
/* Geçersiz alanda yüzen etiket de kırmızı (ör. "Şifre *"). */
.auth__field.is-error .auth__label { color: #e2001a; }

/* Şifre gücü ölçer — alan odaktayken input'un ÜSTÜNDE açılan küçük panel. */
.auth__pwmeter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  padding: 14px 18px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility 0s linear var(--dur-fast);
}
.auth__field--reveal.is-focus .auth__pwmeter {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.auth__pwmeter-head {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
/* Güç çubuğu — ince gri iz; dolum genişliği/rengi güce göre (JS). */
.auth__pwmeter-bar {
  position: relative;
  height: 2px;
  margin: 12px 0;
  background: var(--c-line);
}
.auth__pwmeter-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #e2001a;
  transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.auth__pwmeter-req {
  font-size: 12px;
  text-align: center;
  color: var(--c-muted);
}

/* Dar ekran (panel üstte): AŞAĞI bakan ok, "Şifre" etiketi hizasında — kutuyu
   input'a bağlar, etiketi gösteriyor gibi durur. Çift üçgen: kenarlık + beyaz. */
@media (max-width: 1199.98px){
  .auth__pwmeter::before,
  .auth__pwmeter::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
  }
  .auth__pwmeter::before {
    top: 100%;
    left: 24px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid var(--c-line);
  }
  .auth__pwmeter::after {
    top: calc(100% - 1.5px);
    left: 25px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--c-paper);
  }
}

/* Geniş ekran: panel input'un SOLUNA taşınır (Prada yerleşimi), geniş kutu +
   gereksinim tek satır + sağ kenarda input'a bakan ok. Kolon ortalı ve dar
   olduğundan yalnızca solda yeterli boşluk varken (>=1200px) uygulanır; daha
   darda üstte kalır (taşmasın). */
@media (min-width: 1200px){
  .auth__pwmeter {
    left: auto;
    bottom: auto;
    right: calc(100% + 18px);
    top: 50%;
    width: 340px;
    transform: translate(4px, -50%);
  }
  .auth__field--reveal.is-focus .auth__pwmeter { transform: translate(0, -50%); }
  .auth__pwmeter-req { white-space: nowrap; }

  /* Sağ kenarda input'a bakan ok — çift üçgen: kenarlık üçgeni (::before) +
     üstünde beyaz dolgu üçgeni (::after) ki kutunun ince kenarlığıyla sürsün. */
  .auth__pwmeter::before,
  .auth__pwmeter::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
  }
  .auth__pwmeter::before {
    right: -9px;
    margin-top: -9px;
    border-left: 9px solid var(--c-line);
  }
  .auth__pwmeter::after {
    right: -8px;
    margin-top: -8px;
    border-left: 8px solid var(--c-paper);
  }
}

/* Hitap — sabit "Sayın" değeri (seçim yok), gri dolgulu kutu. */
.auth__static {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 16px;
  background: var(--auth-fill);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  color: var(--c-muted);
}

/* Telefon ülke-kodu select'inin sağ ok'u. */
.auth__phone-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23191b1c' stroke-width='1.4'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* Telefon — ülke kodu + numara tek çerçevede (ortak kenarlık). */
.auth__phone {
  display: flex;
  align-items: stretch;
  height: 54px;
  border: 1px solid var(--c-line);
}
.auth__phone-code {
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--c-line);
}
.auth__phone-select {
  height: 100%;
  padding: 0 30px 0 14px;
  border: 0;
  background-color: transparent;
  background-position: right 10px center;
  font-family: inherit;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
  -webkit-appearance: none;
  appearance: none;
}
.auth__phone-select:focus { outline: none; }
.auth__phone-main { position: relative; flex: 1; }
/* Numara girişi dış çerçeveyi kullanır, kendi kenarlığı yok. */
.auth__phone-main .auth__input { height: 100%; border: 0; }

/* Şifre — sağda göster/gizle butonu. */
.auth__field--reveal { margin-bottom: 8px !important; }
.auth__field--reveal .auth__input { padding-right: 52px; }

/* Şifre alanının hata satırı — İKİ SORUN BİRDEN ÇÖZÜLÜYOR.

   1) KIRPILMA: hata satırı, alanın alt boşluğunu negatif üst kenarla iptal
      edip inputun hemen altına oturuyor (bkz. .auth__error: margin-top -16px).
      Şifre alanının boşluğu 16 değil 8px olduğu için o -16px 8px FAZLA
      çekiyordu; "E-posta veya parola hatalı." inputun çerçevesinin içine
      girip yarısı kırpılıyordu.

   2) ZIPLAMA: mesaj `display:none`↔`block` ile açılıp kapandığı için
      göründüğü anda "Beni hatırla", "Şifremi unuttum" ve düğme bir anda
      aşağı kayıyordu. Satır artık HER ZAMAN yer kaplıyor, yalnızca
      görünürlüğü değişiyor — altındaki blok hiç oynamıyor. Boş hâlde de
      duran bu şerit, aynı zamanda istenen nefes payını veriyor.

   Bu kural yalnızca giriş adımını etkiliyor: kayıt adımında şifre alanıyla
   hata satırının arasında `.auth__hint` var, yani komşu seçici tutmuyor. */
.auth__field--reveal + .auth__error {
  display: block;              /* `is-shown` olmasa da akışta kalır */
  visibility: hidden;
  margin-top: -8px;
  margin-bottom: 0;
  min-height: 17px;            /* tam bir satır (11px × 1.5) */
  padding: 6px 0 8px;          /* nefes payı: üstte input, altta onay kutusu */
}
.auth__field--reveal + .auth__error.is-shown { visibility: visible; }
.auth__reveal {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  line-height: 0;
  color: var(--c-ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.auth__reveal svg { width: 22px; height: 22px; display: block; }
/* Özgüllük notu: gizleme kuralları ".auth__reveal svg { display:block }"i
   ezmek için en az onun kadar özgül olmalı (yoksa iki ikon üst üste görünür). */
.auth__reveal .auth__reveal-hide { display: none; }
.auth__reveal.is-on .auth__reveal-show { display: none; }
.auth__reveal.is-on .auth__reveal-hide { display: block; }

/* Oturum açma adımı — şifrenin altındaki "Beni hatırla" + "Şifremi unuttum"
   satırı; kutucuk solda, bağlantı sağda, ikisi de aynı hizada. */
.auth__signin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 28px;
  font-size: 13px;
  line-height: 18px;
}
.auth__check--inline { margin-bottom: 0; align-items: center; }

/* "Hesabınız yok mu? Hesap oluşturun" — parola adımının altında.
   Akış artık hesabın var olup olmadığını sormadığı (hesap sayımı) için
   kayıt ekranına TEK giriş burası; görünür ama gürültü yapmayan bir satır. */
.auth__alt {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--c-muted);
}
.auth__alt .auth__link { margin-left: 4px; }

/* Onay kutuları — özel kare kutu + zeytin metin. */
.auth__check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 20px;
  cursor: pointer;
}
.auth__check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Kutu = yalnızca konumlandırıcı. Görünür yüz ::after (üstte, opak), hover
   halosu ::before (arkada). Böylece hover kutuyu DOLDURMAZ; kutunun arkasından
   kenarlardan dışarı taşan bir kare merkezden büyür (Prada). İç beyaz kalır. */
.auth__check-box {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
/* Görünür yüz: işaretsiz beyaz + ink kenarlık; işaretli ink + beyaz tik. */
.auth__check-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--c-ink);
  background: var(--c-paper);
}
.auth__check-input:checked + .auth__check-box::after {
  background: var(--c-ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 6.5'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}
/* Hover halosu: kutudan ~5px taşkın ink kare, ARKADA; merkezden büyür.
   ≤20px iken opak yüzün arkasında gizli, >20px olunca dışarı çerçeve olarak
   çıkar → "içten dışa" hissi. Fare çekilince küçülüp kaybolur. */
.auth__check-box::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 0;
  background: #dfe1e2;   /* taşan halo — ink değil, açık gri */
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease);
}
.auth__check:hover .auth__check-box::before { transform: scale(1); }
/* Klavye odağı göstergesi */
.auth__check-input:focus-visible + .auth__check-box { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.auth__check-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--auth-note);
}

/* Yasal metin — zeytin, "Kaydol" butonu öncesi. */
.auth__legal {
  margin: 8px 0 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--auth-note);
}

/* --------------------------------------------------------------------------
   YÜKLEME KATMANI — Prada'nın dönen logolu ara ekranı. Tam ekran beyaz;
   ortada dönen üçgen (Prada logo silüeti). Görünürlük opacity+visibility ile
   yönetilir (display değil), böylece [hidden] ile çakışmaz.
   -------------------------------------------------------------------------- */
.auth-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.auth-loader.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease);
}
.auth-loader__mark { width: 148px; height: 148px; display: block; }

/* Soluk çiçek izi (track) — hep görünür, dolumun üzerine oturduğu zemin. */
.auth-loader__track use {
  stroke: var(--c-line);
  stroke-width: 1.4;
}

/* Sırayla çizilen siyah yapraklar. pathLength=100 → dash yüzde gibi:
   offset 100 boş, 0 tam çizili, -100 baştan silinmiş. Her yaprak aynı
   döngüde ama --i ile kaydırılmış negatif gecikmeyle → dönen açılma. */
.auth-loader__petal {
  stroke: var(--c-ink);
  stroke-width: 1.4;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: auth-bloom 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.5s);
}
@keyframes auth-bloom {
  0%   { stroke-dashoffset: 100; }   /* boş */
  35%  { stroke-dashoffset: 0; }     /* çizildi */
  60%  { stroke-dashoffset: 0; }     /* kısa bekleme */
  100% { stroke-dashoffset: -100; }  /* silindi */
}

/* Merkez pistil — yapraklarla eşzamanlı hafif nabız. */
.auth-loader__core {
  fill: var(--c-ink);
  transform-box: fill-box;
  transform-origin: center;
  animation: auth-core 3s ease-in-out infinite;
}
@keyframes auth-core {
  0%, 100% { transform: scale(.7); opacity: .55; }
  50%      { transform: scale(1);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .auth-loader__petal { animation: none; stroke-dashoffset: 0; }
  .auth-loader__core  { animation: none; transform: scale(1); opacity: 1; }
}

/* Masaüstünde kayıt kolonu e-posta adımıyla aynı hizada kalır (max-width 456px).
   Dar ekranda Ad/Soyad satırı yeterince sığar; gerekirse alt alta iner. */
@media (max-width: 420px){
  .auth__row { flex-direction: column; gap: 24px; }
}

/* ==========================================================================
   ÜYE ALANI (hesabim.php) — Prada "logged-area" uyarlaması.
   Sabit site header'ı bu sayfada hep katı (is-scrolled) + altında ince çizgi.
   Sol sidebar (karşılama + gezinme) + sağda büyük görsel kartlar.
   ========================================================================== */
/* Bu sayfada header her zaman katı; altına ince ayraç. */
.account-page .header__container { border-bottom: 1px solid var(--c-line); }

/* Sabit header yüksekliği kadar boşluk (içerik altına kaymasın). */
.header-spacer { height: var(--header-h-mobile); }

.account { display: grid; grid-template-columns: 1fr; }

/* Sidebar — üstte karşılama, altında gezinme; mobilde kart üstünde blok. */
.account__sidebar { --acc-pad: var(--gutter-mobile); padding: 32px var(--acc-pad) 8px; }
.account__welcome {
  font-size: 20px;
  line-height: 1.3;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin-bottom: 28px;
}
.account__nav { display: flex; flex-direction: column; gap: 16px; }
.account__nav-link {
  position: relative;
  align-self: flex-start;
  font-size: var(--fs-body);
  color: var(--c-ink);
  text-decoration: none;
}
/* Geçerli/aktif ve hover — ana sayfa CTA çizgisi (soluma yok). */
.account__nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.7lh);
  height: 1px;
  background: currentColor;
  opacity: 0;
}
.account__nav-link.is-current::after { opacity: 1; }
.account__nav-link:hover::after { opacity: 1; animation: link-underline var(--dur-line) var(--ease); }

/* Bize ulaşın — yerinde akordeon (sağdaki çekmece DEĞİL). Blok sidebar
   dolgusunu aşıp TAM GENİŞLİĞE yayılır (--acc-pad kadar negatif margin) ki
   ayraç çizgisi kenardan kenara olsun; buton içeride --acc-pad ile hizalanır. */
.account__actions {
  margin-top: 28px;
  margin-left: calc(-1 * var(--acc-pad));
  margin-right: calc(-1 * var(--acc-pad));
}
/* Buton tam genişlik: metin solda, ok en sağda; siyah, 56px yükseklik. */
.account__contact {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 var(--acc-pad);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: #000;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}
/* Fare butonun dikdörtgenine gelince hafif gri zemin (Prada). */
.account__contact:hover { background-color: #f6f6f6; }
/* Açıkken üstünde tam genişlik ince ayraç; kapalıyken çizgi yok. */
.account__contact[aria-expanded="true"] { border-top: 1px solid var(--c-line); }
.account__contact-icon {
  width: 18px;
  height: 18px;
  color: #000;
  transition: transform var(--dur-fast) var(--ease);
}
.account__contact[aria-expanded="true"] .account__contact-icon { transform: rotate(180deg); }

/* Açılır iletişim listesi — kapalıyken max-height 0; açılınca yumuşak iner. */
/* Prada: animasyon DIŞ sarmalayıcıda (padding yok, overflow hidden); iç <ul>
   padding taşır (üst 20px = butonla ilk öğe arası, alt 48px = son öğe altı).
   Kapalıyken dış kutu 0'a inince iç padding'iyle birlikte tamamen kırpılır. */
.account__contact-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease);
}
.account__contact[aria-expanded="true"] + .account__contact-wrap { max-height: 320px; }
.account__contact-list {
  list-style: none;
  margin: 0;
  padding: 20px var(--acc-pad) 48px;
}
.account__contact-link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: var(--fs-body);
  color: var(--c-ink);
  text-decoration: none;
}
.account__contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  opacity: 0;
}
.account__contact-link:hover::after { opacity: 1; }

/* Kart listesi — dikey yığın, aralarında 1px çizgi (Prada grid hissi). */
.account__content { display: flex; flex-direction: column; gap: 1px; margin-top: 24px; }
.account-card {
  position: relative;
  display: block;
  min-height: 58vh;
  background: #e8e6e2;
  color: var(--c-paper);
  text-decoration: none;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
/* Büyüyen görsel katmanı (yalnızca bu ölçeklenir; metin/geçiş sabit kalır).

   GÖRSEL ADRESİ BURADA DEĞİL, sayfada satır içi `background-image` olarak
   veriliyor (panelden yönetilen yuva). Önce `--card-img` adında bir CSS
   değişkeniyle geliyordu ve GÖRSEL HİÇ ÇIKMIYORDU: değişken sayfada (belge
   tabanı) tanımlanıp bu stil dosyasında kullanılınca tarayıcı göreli adresi
   STİL DOSYASINA göre çözüyor, `varlik/gorsel/…` → `varlik/css/varlik/gorsel/…`
   olup 404 veriyordu. Adres satır içi kalınca belge tabanına göre çözülüyor;
   kök-göreli (`/varlik/…`) yapmak da çözerdi ama alt klasöre kurulumda bozulurdu.

   Kısayol `background:` yerine uzun yazımlar: kısayol, satır içi gelen
   `background-image`'i ezerdi. */
.account-card__bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform var(--dur-line) var(--ease);
}
/* Alt köşeye doğru hafif karartma — beyaz metin her görselde okunsun. */
.account-card::before {
  content: "";
  position: absolute;
  inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 45%);
}
/* Hover: çerçeve siyah + görsel hafifçe yakınlaşır (siparişler hero'suyla aynı) */
.account-card:hover { border-color: var(--c-ink); }
.account-card:hover .account-card__bg { transform: scale(1.04); }
.account-card__body {
  position: absolute;
  z-index: 2;
  left: var(--gutter-mobile);
  right: var(--gutter-mobile);
  bottom: 28px;
  max-width: 420px;
}
.account-card__title { font-size: 18px; font-weight: var(--fw-medium); margin-bottom: 8px; }
.account-card__desc { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.account-card__cta {
  position: relative;
  display: inline-block;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.account-card__cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.6lh);
  height: 1px;
  background: currentColor;
}
.account-card:hover .account-card__cta::after { animation: link-underline var(--dur-line) var(--ease); }

/* Üye alanı alt bilgisi — içerik kolonunun altında, kartlardan sonra. */
.account-footer {
  padding: 24px var(--gutter-mobile);
  font-size: 11px;
  letter-spacing: var(--tracking);
  color: var(--c-muted);
}

/* Masaüstü: sabit sol sidebar + geniş kart kolonu; header 72px. */
@media (min-width: 768px){
  .header-spacer { height: var(--header-h); }
  .account { grid-template-columns: 354px 1fr; align-items: start; }
  /* Sidebar viewport yüksekliğinde dikey flex: karşılama+gezinme üstte,
     iletişim bloğu en alta iter (margin-top:auto). Akordeon açılınca buton
     yukarı kalkar, altından linkler çıkar; blok altı sidebar altına sabit
     kalır (Prada yerleşimi). Sticky ile kaydırırken sol altta durur. */
  .account__sidebar {
    --acc-pad: 32px;
    position: sticky;
    top: var(--header-h);
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    padding: 40px var(--acc-pad) 0;
  }
  .account__actions { margin-top: auto; }
  .account__content { margin-top: 0; }
  .account-card { min-height: 78vh; }
  .account-card__body { left: 40px; right: auto; bottom: 40px; max-width: 560px; }
  .account-card__title { font-size: 22px; }
  /* Açıklama tek satır (masaüstü); mobilde tabii ki sarabilir. */
  .account-card__desc { font-size: 14px; white-space: nowrap; }
  .account-footer { padding: 28px 40px; }
}

/* Mobil: sidebar yatay sekme çubuğuna dönüşür (Prada). Karşılama ve
   "Bize ulaşın" gizlenir; gezinme header altında tam genişlik, alt çizgili
   yatay sekmeler (~49px). Kartlar hemen altında başlar. */
@media (max-width: 767px){
  /* --- Kart görselinde odak kayması -------------------------------------
     Hesap kartlarının görselleri 16:9 YATAY ve masaüstü için kadrajlanmış:
     model sağda, sol taraf boş duvar — kart metni oraya oturuyor. Masaüstünde
     kutu geniş olduğu için kare bütün görünüyor.

     Mobilde kutu DİKEY; `cover` yalnızca ortadaki dar şeridi gösteriyor ve
     sağdaki model kadraj dışında kalıyor. Bu sınıf odağı sağa kaydırıp modeli
     çerçeveye sokuyor.

     GEÇİCİ ÇÖZÜM: kompozisyon burada varsayılıyor. O yuvaya modeli ORTADA
     olan bir görsel yüklenirse bu sefer o kesilir — sınıf karttan
     kaldırılmalı. Kalıcısı, odak noktasının panelden yuva başına
     seçilebilmesi olurdu. */
  .account-card--odak-sag .account-card__bg { background-position: 90% center; }

  .account__sidebar { padding: 0; }
  .account__welcome,
  .account__actions { display: none; }
  .account__nav {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    height: 49px;
    padding: 0 var(--gutter-mobile);
    border-bottom: 1px solid var(--c-line);
  }
  /* Sekme tüm çubuk yüksekliğini kaplar; metin dikey ortalı, alt çizgi
     çubuğun EN ALTINDA (border çizgisine değer) — Prada gibi. */
  .account__nav-link {
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  .account__nav-link::after {
    top: auto;
    bottom: 0;
    transform: none;
  }
  /* Kartlar sekme çubuğunun hemen altında — arada boşluk yok. */
  .account__content { margin-top: 0; }
}

/* Üye alanı içerik yükleyicisi — header'ın ALTINDAKİ alanı kaplar; içerik
   hazırlanırken çiçek amblemi döner, sonra söner ve içerik yumuşak belirir. */
.account-loader {
  position: fixed;
  top: var(--header-h-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.account-page.is-loading .account-loader {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease);
}
/* Yüklenirken içerik gizli; sınıf kalkınca yumuşak belirir. */
.account, .account-footer { transition: opacity var(--dur-base) var(--ease); }
.account-page.is-loading .account,
.account-page.is-loading .account-footer { opacity: 0; }

@media (min-width: 768px){
  .account-loader { top: var(--header-h); }
}

/* ==========================================================================
   ÜYE ALT SAYFASI — KİŞİSEL BİLGİLER (kisisel-bilgiler.php)
   Prada "personal-information" uyarlaması. İçerik alanı açık gri; beyaz bilgi
   kartları; üstte Geri + başlık; altta Ödeme Yöntemleri ve devre dışı bırakma.
   ========================================================================== */
.account__content--profile {
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  /* Gri alan içerik kısa olsa bile ekranın altına kadar uzasın (altta beyaz
     boşluk kalmasın) — header yüksekliği çıkarılır. */
  min-height: calc(100vh - var(--header-h-mobile));
}
@media (min-width: 768px){
  .account__content--profile { min-height: calc(100vh - var(--header-h)); }
}
.pinfo {
  /* Sabit genişlik: flex öğesi olsa da büzülmeden 841px'e açılır, ortalanır. */
  width: min(100%, 841px);
  margin: 0 auto;
  padding: 32px var(--gutter-mobile) 48px;
}

/* Alt sayfa başlığı */
.pinfo__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--c-ink);
  text-decoration: none;
}
.pinfo__back svg { width: 20px; height: 20px; }
.pinfo__back:hover { opacity: .7; }
.pinfo__title { font-size: 22px; font-weight: var(--fw-medium); color: var(--c-ink); }
.pinfo__subtitle { margin-top: 6px; font-size: 14px; color: var(--c-muted); }

.pinfo__grid { display: flex; flex-direction: column; gap: 40px; margin-top: 32px; }
.pinfo__col-title { margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--c-ink); }

/* Beyaz bilgi kartı */
.info-card {
  background: var(--c-paper);
  padding: 40px;
  margin-bottom: 24px;
}
.info-card:last-child { margin-bottom: 0; }
.info-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.info-card__head--divider {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
}
.info-card__title { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.info-card__edit {
  flex: none;
  position: relative;
  display: inline-block;
  padding: 0; background: none; border: none;
  font-family: inherit; font-size: 13px;
  color: var(--c-ink);
  cursor: pointer;
}
/* CTA alt çizgisi (Yeni Gelenler gibi): ::after ile çizilir, hover'da kayar */
.info-card__edit::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(.5lh);
  height: 1px; background: currentColor;
}
.info-card__edit:hover::after { animation: link-underline var(--dur-line) var(--ease); }
.info-card__row { margin-top: 16px; }
.info-card__head--divider + .info-card__row { margin-top: 0; }
.info-card__label { font-size: 13px; font-weight: 700; color: var(--c-ink); margin-bottom: 4px; }
.info-card__value { font-size: 14px; color: var(--c-ink); word-break: break-word; }

/* Ödeme bilgi notu */
.info-card--note { display: flex; align-items: flex-start; gap: 12px; }
/* `display: flex` tarayıcının `[hidden] { display: none }` kuralını EZİYOR:
   sınıf seçicisi tarayıcı stilinden güçlü. Kayıtlı kart varken gizlenmesi
   gereken "kartınız yok" kutusu bu yüzden kartların altında duruyordu. */
.info-card--note[hidden] { display: none; }
.info-card__note-icon { width: 24px; height: 24px; flex: none; color: var(--c-ink); }
.info-card--note p { font-size: 14px; line-height: 1.5; color: var(--c-ink); }

/* Hesabı devre dışı bırak */
.pinfo__deactivate-text {
  margin: 8px 0 16px;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted);
}
.pinfo__deactivate-btn {
  position: relative;
  display: inline-block;
  padding: 0; background: none; border: none;
  font-family: inherit; font-size: 13px;
  color: var(--c-ink);
  cursor: pointer;
}
.pinfo__deactivate-btn::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(.5lh);
  height: 1px; background: currentColor;
}
.pinfo__deactivate-btn:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* Alt bilgi de içerik bloğuyla aynı hizada (ortalanmış, 841px) ve her iki
   sayfada aynı: margin-top:auto ile gri alanın en altına yaslanır (içerik kısa
   olsa da alta iner; içerik uzunsa hemen ardından gelir). */
.account__content--profile .account-footer,
.account__content--orders .account-footer {
  max-width: 841px;
  margin: auto auto 0;
  padding-left: 16px;
  padding-right: 16px;
  color: var(--c-ink);
}

/* ==========================================================================
   ÜYE ALT SAYFASI — ÖNERİLEN ADRESLER (onerilen-adresler.php)
   İki sütun: Sevkiyat adresleri / Fatura adresi; her birinde "adres ekle" kartı.
   ========================================================================== */
.padr__columns { display: flex; gap: 24px; margin-top: 32px; }
.padr__column { flex: 1 1 0; min-width: 0; }
.padr__heading { margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--c-ink); }

.add-address {
  width: 100%; min-height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 26px 32px;
  background: var(--c-paper); border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--c-ink);
}
/* Hover efekti yok (kullanıcı isteği) — soluma/gri zemin kaldırıldı. */
.add-address__text { font-weight: var(--fw-medium); text-align: left; }
.add-address__icon { width: 24px; height: 24px; flex: none; }

/* Kayıtlı adres kartı — "adres ekle" kartının altında görünür (Prada
   address-card uyarlaması): ad, şehir, "posta kodu, İLÇE", telefon; altta
   ince ayraç çizgisi, sonra favori (kalp) + Düzenle | Sil satırı. */
.address-card {
  width: 100%;
  margin-top: 24px;
  padding: 40px;
  background: var(--c-paper);
}
.address-card__name {
  margin-bottom: 14px;
  font-size: 14px; font-weight: 700; color: var(--c-ink);
}
.address-card__address { font-style: normal; }
.address-card__entry { font-size: 14px; line-height: 1.7; color: var(--c-ink); }

.address-card__actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid var(--c-line);
}
/* Favori (kalp): birincil adres değilken içi boş (yalnız kenarlık), birincil
   seçilince içi dolu siyah kalp. Renk her durumda siyah. */
.address-card__fav {
  padding: 0; background: none; border: none; cursor: pointer;
  color: var(--c-ink); line-height: 0;
}
.address-card__fav svg { width: 22px; height: 22px; display: block; }
.address-card__fav path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.address-card--fav .address-card__fav path { fill: currentColor; stroke: none; }

.address-card__actions-section { display: flex; align-items: center; }
.address-card__divider { width: 1px; height: 13px; margin: 0 14px; background: var(--c-line); }

/* Düzenle / Sil — Yeni Gelenler'deki CTA alt çizgi animasyonu */
.address-card__button {
  position: relative; display: inline-block;
  padding: 0; background: none; border: none;
  font-family: inherit; font-size: 13px; color: var(--c-ink);
  cursor: pointer;
}
.address-card__button::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(.5lh);
  height: 1px; background: currentColor;
}
.address-card__button:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* Bildirim şeridi — kaydetme/favori sonrası içerik alanının üstünde beliren
   mavi bilgi çubuğu ("Profil güncellendi"); birkaç saniye sonra söner.
   Viewport'a göre değil, içerik sütunlarına göre ortalı (sol nav'ı hesaba katar);
   geniş ve yazı sola hizalı (Prada gibi). */
.account__content--profile { position: relative; }
/* SAYFAYLA BİRLİKTE KAYMAZ: header gibi `fixed`, hemen onun altında durur.
   Önce `absolute` idi — içerik sütununun tepesine yapışıyor, aşağı inince
   ekrandan çıkıyordu ve kullanıcı bildirimi hiç göremiyordu.

   Yatayda hâlâ İÇERİK SÜTUNUNA göre ortalı (sol menüyü hesaba katar);
   `fixed` bunu kendiliğinden bilemediği için `left` değerini bildirim.js
   ölçüp yazıyor. JS çalışmadan kutu zaten görünmüyor. */
/* MOBİL: kutu en tepede, kenardan kenara — header'ın ÜSTÜNÜ kaplar
   (istek listesi şeridiyle aynı davranış). z-index header'dan (12) yüksek,
   yoksa arkasında kalıp görünmezdi. */
.toast {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 13;
  width: 100%; max-width: none;
  padding: 22px 40px;
  background: #2a28e6; color: var(--c-paper);
  font-size: 14px; text-align: left;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility 0s linear var(--dur-base);
}
.toast.is-show {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

/* MASAÜSTÜ: 400px kutu, header'ın hemen ALTINDA, üst kenarı header'ın alt
   kenarına değecek şekilde. Yatayda içerik sütununa göre ortalı (`left`
   değerini bildirim.js ölçüyor).

   Bu kural `.toast` ana kuralından SONRA gelmek ZORUNDA: ikisinin özgüllüğü
   aynı, dosyada önce yazılan kaybeder. Breakpoint bölümüne (dosyanın başı)
   konduğunda mobil değer masaüstünü eziyor, kutu ya header'a biniyor ya da
   altında boşluk bırakıyordu.

   z-index header'ın (12) ALTINDA: kutu açılırken 8px yukarıdan iniyor, o
   taşma header'ın arkasında kalsın, kutu header'ın altından çıkıyor gibi
   görünsün diye. */
@media (min-width: 768px){
  .toast {
    top: var(--header-h);
    z-index: 11;
    width: 400px; max-width: calc(100% - 32px);
  }
}

@media (max-width: 767px){
  .padr__columns { flex-direction: column; gap: 32px; }
  /* Sütunlar alt alta olduğunda sevkiyat ile fatura arasına ayırıcı çizgi
     (Prada gibi): ikinci sütunun üstünde ince çizgi + boşluk. */
  .padr__column + .padr__column {
    border-top: 1px solid var(--c-line);
    padding-top: 32px;
  }
}

@media (min-width: 768px){
  .pinfo { padding: 40px 16px 80px; }
}

/* ==========================================================================
   ÜYE ALT SAYFASI — SİPARİŞLERİM (siparislerim.php)
   Üstte tam genişlik hero (devam eden sipariş yok + CTA), altında ortalanmış
   "Alışveriş geçmişi": sekmeler + boş durum paneli. Footer alta yaslı.
   ========================================================================== */
.account__content--orders {
  display: flex; flex-direction: column;
  background: #f5f5f5;
  min-height: calc(100vh - var(--header-h-mobile));
}
@media (min-width: 768px){
  .account__content--orders { min-height: calc(100vh - var(--header-h)); }
}

/* Hero banner — tamamı tek bir link; buton yalnızca görsel. Hover'da çerçeve
   siyahlaşır ve arka plan görseli hafifçe büyür (overflow gizli çerçeve içinde). */
.orders-hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 300px;
  padding: 24px var(--gutter-mobile);
  overflow: hidden;
  border: 1px solid transparent;
  background: #d8d2c8;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease);
}
/* Büyüyen görsel katmanı (yalnızca bu ölçeklenir; metin/geçiş sabit kalır).
   Görsel adresi sayfada satır içi `background-image` olarak veriliyor; dosya
   adı burada YAZILI DEĞİL, yoksa panelden değiştirilemez olurdu.
   Neden CSS değişkeni değil: bkz. .account-card__bg — göreli adres değişken
   içinde stil dosyasına göre çözülüyor ve 404 veriyordu. */
.orders-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform var(--dur-line) var(--ease);
}
/* Alt-sol koyu geçiş — sabit (metin okunurluğu için) */
.orders-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 42%);
}
/* Hover: çerçeve siyah + görsel hafifçe yakınlaşır */
.orders-hero:hover { border-color: var(--c-ink); }
.orders-hero:hover .orders-hero__bg { transform: scale(1.04); }

.orders-hero__inner { position: relative; z-index: 2; max-width: 420px; }
.orders-hero__title {
  display: block; margin-bottom: 20px;
  font-size: 17px; line-height: 1.4;
  font-weight: var(--fw-medium); color: var(--c-paper);
}
.orders-hero__cta {
  display: inline-block;
  padding: 14px 26px;
  background: var(--c-paper); color: var(--c-ink);
  font-size: 12px; font-weight: var(--fw-medium);
  letter-spacing: .06em; text-transform: uppercase;
}

/* Alışveriş geçmişi — ortalanmış blok (profil bloğuyla aynı genişlik) */
.orders-history {
  width: min(100%, 841px);
  margin: 0 auto;
  padding: 40px var(--gutter-mobile) 64px;
}
.orders-history__title { font-size: 20px; font-weight: 700; color: var(--c-ink); }
.orders-history__subtitle { margin-top: 6px; font-size: 14px; color: var(--c-muted); }

/* Sekmeler — aktif olanın altında kalın çizgi */
.orders-tabs {
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 32px;
  border-bottom: 1px solid var(--c-line);
}
.orders-tab {
  position: relative;
  padding: 0 0 16px; background: none; border: none;
  font-family: inherit; font-size: 14px; color: var(--c-muted);
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.orders-tab.is-active { color: var(--c-ink); font-weight: var(--fw-medium); }
.orders-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--c-ink);
}

/* Boş durum paneli */
.orders-panel {
  margin-top: 32px;
  padding: 48px 24px;
  background: var(--c-paper);
}
.orders-panel__text { text-align: center; font-size: 14px; color: var(--c-ink); }

@media (min-width: 768px){
  .orders-hero { min-height: 380px; padding: 40px; }
  .orders-history { padding: 56px 16px 80px; }
}

/* Mobilde sekmeler dar alanda alt alta düşmesin: yan yana kalsın, metin sekme
   içinde sarabilsin (Prada mobil davranışı). */
@media (max-width: 767px){
  .orders-tabs { flex-wrap: nowrap; gap: 16px; }
  /* İki sekme eşit alan kaplasın; uzun metin sekme içinde sarsın. */
  .orders-tab { flex: 1 1 0; min-width: 0; white-space: normal; font-size: 13px; }
}

/* ==========================================================================
   KİŞİSEL BİLGİLER DÜZENLEME ÇEKMECESİ (sağdan kayan, 500px)
   ========================================================================== */
.pi-drawer {
  position: fixed; inset: 0; z-index: 60;
  visibility: hidden;
  /* Kapanışta görünürlüğü kayma animasyonu bitince gizle (yumuşak kapanma) */
  transition: visibility 0s linear var(--dur-base);
}
.pi-drawer.is-open { visibility: visible; transition: visibility 0s; }

/* Çekmece açıkken sayfa kaydırma kilitli, sağdaki scrollbar gizli */
body.pi-drawer-open { overflow: hidden; }
/* Çekmece açıkken sağ alttaki sohbet balonu görünmesin */
body.pi-drawer-open .chat-bubble { display: none; }

.pi-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.pi-drawer.is-open .pi-drawer__scrim { opacity: 1; }

.pi-drawer__panel {
  position: absolute; top: 0; right: 0;
  height: 100%; width: 500px; max-width: 100%;
  background: var(--c-paper);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
}
.pi-drawer.is-open .pi-drawer__panel { transform: none; }

.pi-drawer__topbar { display: flex; justify-content: flex-end; padding: 16px 16px 0; }
.pi-drawer__close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--c-ink);
}
.pi-drawer__close svg { width: 24px; height: 24px; }
.pi-drawer__close:hover { opacity: .7; }

.pi-drawer__content { padding: 8px 40px 48px; }

.pi-form__title { font-size: 20px; font-weight: var(--fw-medium); color: var(--c-ink); }
.pi-form__mandatory { margin: 24px 0 20px; font-size: 12px; color: var(--c-muted); }
.pi-form__mandatory sup { font-size: 11px; }
.pi-form__explanation { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-muted); }

/* Çekmecenin altındaki kısa bildirim: "Kaydediliyor…" ya da sunucudan gelen
   hata. JS ekliyor (kisisel-bilgiler.php), işaretlemede durmuyor. */
.pi-form__mesaj { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.pi-form__mesaj--hata { color: #c0392b; }

/* E-posta çekmecesi: içerik alanı boyu doldurur, Onayla en alta yaslanır */
.pi-drawer__content--fill { display: flex; flex-direction: column; flex: 1 1 auto; }
.pi-form__form--fill { display: flex; flex-direction: column; flex: 1 1 auto; }
/* Özgüllük: base .pi-form__foot { margin-top:32px } kuralını ez, en alta yasla */
.pi-form__form--fill .pi-form__foot--bottom { margin-top: auto; }

/* Alanlar */
.pi-field { position: relative; margin-bottom: 16px; }
.pi-field__control {
  width: 100%; height: 58px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  padding: 22px 16px 6px;
  font-family: inherit; font-size: 14px; color: var(--c-ink);
  border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) var(--ease);
}
/* Düzenlenebilir metin alanları: hover/focus'ta kenar gri → siyah */
.pi-field__control:hover,
.pi-field__control:focus { outline: none; border-color: var(--c-ink); }
/* Zaten seçili/sabit alanlar (Yer, Doğum Tarihi) hep siyah kenarlı */
.pi-field--select .pi-field__control,
.pi-field--date .pi-field__control { border-color: var(--c-ink); }
.pi-field select.pi-field__control { cursor: pointer; }
/* Başlık (Sayın) / Yer / pasif İlçe: sabit — açık gri iç, siyah kenar, "yasak"
   imleci. (pointer kuralını ezmek için :disabled daha özgül yazıldı.) */
.pi-field__control:disabled,
.pi-field select.pi-field__control:disabled {
  color: var(--c-ink); background: #f6f6f6;
  cursor: not-allowed; border-color: var(--c-ink);
}
.pi-field--disabled { cursor: not-allowed; }

/* Doğum Tarihi: yerli input tamamen görünmez (mavi segment vurgusu görünmesin),
   ama tıklanabilir; değer üstteki GG / AA / YYYY kapağında gösterilir. */
.pi-field--date { min-height: 58px; border: 1px solid var(--c-ink); }
.pi-field--date .pi-field__control--date {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; border: none; padding: 0; cursor: pointer;
}
.pi-field--date .pi-field__control--date::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.pi-field__datecover {
  position: absolute; left: 16px; bottom: 8px;
  font-size: 14px; color: var(--c-ink); pointer-events: none;
}

.pi-field__label {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--c-muted);
  pointer-events: none; transition: top var(--dur-fast) var(--ease), font-size var(--dur-fast) var(--ease);
}
.pi-field__control:focus + .pi-field__label,
.pi-field__control:not(:placeholder-shown) + .pi-field__label,
.pi-field--filled .pi-field__label {
  top: 10px; transform: none; font-size: 11px;
}

/* Açılır alanlar için ok işareti */
.pi-field__chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--c-ink); pointer-events: none;
}
.pi-field__chevron svg { width: 20px; height: 20px; display: block; }
.pi-field--select .pi-field__control { padding-right: 40px; }
/* Açılır alanlarda ok'tan önce kısa dikey ayraç (Prada) */
.pi-field--select .pi-field__chevron::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: var(--c-line);
}

/* Telefon: ülke kodu + numara tek çerçevede */
.pi-phone {
  display: flex; align-items: stretch;
  border: 1px solid var(--c-line);
  transition: border-color var(--dur-fast) var(--ease);
}
.pi-phone:hover, .pi-phone:focus-within { border-color: var(--c-ink); }
.pi-phone__code { position: relative; flex: none; }
.pi-phone__code-select {
  height: 56px; border: none;
  background: var(--c-paper); padding: 0 34px 0 16px;
  font-family: inherit; font-size: 14px; color: var(--c-ink);
  -webkit-appearance: none; appearance: none; border-radius: 0; cursor: pointer;
}
/* Odakta genel `:focus-visible` outline'ı (3px dışarıda çerçeveli kare)
   gösterme; odak zaten .pi-phone:focus-within ile kutu kenarında belli olur
   (diğer form alanlarındaki .pi-field__control:focus{outline:none} ile aynı). */
.pi-phone__code-select:focus,
.pi-phone__code-select:focus-visible { outline: none; }
.pi-phone__code .pi-field__chevron { right: 10px; }
.pi-phone__num { position: relative; flex: 1 1 auto; }
.pi-phone__num .pi-field__control,
.pi-phone__num .pi-field__control:hover,
.pi-phone__num .pi-field__control:focus { border: none; height: 56px; }
/* +90 ile numara arasında kısa dikey çizgi */
.pi-phone__num::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: var(--c-line);
}

/* Şifre alanı: göz ikonu ile göster/gizle */
.pi-field--pass .pi-field__control { padding-right: 48px; }
.pi-field__reveal {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink); cursor: pointer;
}
.pi-field__reveal:hover { opacity: .7; }
.pi-eye { width: 22px; height: 22px; display: block; }
.pi-field__reveal .pi-eye--off { display: none; }
.pi-field--pass.is-revealed .pi-eye--on { display: none; }
.pi-field--pass.is-revealed .pi-eye--off { display: block; }

/* Şifre kuralları ipucu */
.pi-form__hint {
  margin: -6px 0 16px; font-size: 11px; line-height: 1.45;
  color: var(--c-muted);
}

.pi-form__paragraph { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.pi-form__paragraph a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }

.pi-form__foot { margin-top: 32px; text-align: right; }
.pi-form__confirm {
  min-width: 240px; height: 48px; padding: 0 24px;
  background: var(--c-ink); color: var(--c-paper);
  border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-cta); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.pi-form__confirm:hover { opacity: .85; }
/* Pasif Onayla: kriterler sağlanana kadar gri, tıklanamaz */
.pi-form__confirm:disabled {
  background: #b6b6b6; color: var(--c-paper);
  cursor: not-allowed; opacity: 1;
}

/* Doğrulama: geçerli alanda yeşil tik, geçersizde kırmızı kenar + hata
   (login-register mantığı). Tik gösteren alanlarda sağda yer bırakılır. */
.pi-field--tick .pi-field__control { padding-right: 44px; }
.pi-field__valid {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; color: #1f8a4c;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.pi-field__valid svg { width: 20px; height: 20px; display: block; }
.pi-field.is-valid > .pi-field__valid,
.pi-field.is-valid .pi-phone__num > .pi-field__valid { display: flex; }
.pi-field.is-error .pi-field__control { border-color: #e2001a; }
.pi-field.is-error.pi-phone { border-color: #e2001a; }
/* Hatalı alanda etiket metni de kırmızı */
.pi-field.is-error .pi-field__label { color: #e2001a; }
.pi-field__error {
  display: none;
  margin: -8px 0 16px;
  font-size: 12px; line-height: 1.4; color: #e2001a;
}

/* Sunucu hatası (ağ koptu, oran sınırı, eksik alan). Alan hatalarıyla aynı
   görünüm ama ayrı sınıf: onlar `display:none` ile başlayıp durum sınıfıyla
   açılıyor, bu ise `hidden` özniteliğiyle yönetiliyor. */
.contact-form__error {
  margin: 0 0 4px;
  font-size: 13px; line-height: 1.5; color: #e2001a;
}
.contact-form__error[hidden] { display: none; }

@media (max-width: 767px){
  /* Tüm paneller e-posta paneliyle aynı: içerik alanı boyu doldurur,
     Onayla butonu en alta yaslanır ve tam genişlik olur. */
  .pi-drawer__content {
    padding: 8px 20px 40px;
    display: flex; flex-direction: column; flex: 1 1 auto;
  }
  .pi-drawer__content .pi-form__form { display: flex; flex-direction: column; flex: 1 1 auto; }
  .pi-drawer__content .pi-form__foot { margin-top: auto; }
  .pi-form__confirm { min-width: 0; width: 100%; }
}

/* ==========================================================================
   YARDIM MERKEZİ (bize-ulasin.php) — Prada "contact-us" uyarlaması.
   Sol dikey gezinme + dikey ayraç + sağda içerik (iletişim metni, kanal
   kartları, önerilen sorular, e-posta formu).
   Çiçek'te RANDEVU SİSTEMİ YOK: Prada'daki "Mağaza Randevunuzu Alın" görsel
   banner'ı ve sol bardaki "Randevu oluştur" bağlantısı bilerek alınmadı.
   Form .pi-field / .pi-phone sistemini; kanal kartları .social-btn'i yeniden
   kullanır (yeni bileşen icat edilmedi).
   ========================================================================== */
/* Bu sayfada header her zaman katı (is-scrolled) + altında ince ayraç. */
.help-page .header__container { border-bottom: 1px solid var(--c-line); }

/* Ana içerik ile footer'ı ayıran tam genişlik yatay çizgi — dikey ayracın
   (help-content border-left) bittiği yerden sağa-sola uzanır (Prada referansı). */
.help-page .footer { border-top: 1px solid var(--c-line); }

.help { display: grid; grid-template-columns: 1fr; }

/* --- Sol gezinme (Prada help-center-nav) --- */
.help-nav { padding: 32px var(--gutter-mobile) 24px; }
.help-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.help-nav__link {
  position: relative; align-self: flex-start;
  font-size: var(--fs-body); color: var(--c-ink);
}
/* Aktif/hover — ana sayfa CTA çizgisi (account__nav-link ile aynı desen). */
.help-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(.72lh); height: 1px; background: currentColor; opacity: 0;
}
.help-nav__link[aria-current="page"]::after { opacity: 1; }
/* Paylaşılan `link-underline` keyframe'i translateY(.5lh) kullanır; bu çizgi ise
   .72lh'de durduğu için animasyon sonrası çizgi aşağı "zıplıyordu". Bu nav'a özel
   keyframe dikey konumu (.72lh) sabit tutar, yalnızca soldan-sağa siler/çizer. */
@keyframes help-nav-underline {
  0%     { transform: translateY(.72lh) scaleX(1); transform-origin: right; }
  50%    { transform: translateY(.72lh) scaleX(0); transform-origin: right; }
  50.01% { transform: translateY(.72lh) scaleX(0); transform-origin: left; }
  100%   { transform: translateY(.72lh) scaleX(1); transform-origin: left; }
}
.help-nav__link:hover::after { opacity: 1; animation: help-nav-underline var(--dur-line) var(--ease); }
.help-nav__hours {
  margin-top: 40px; font-size: 12px; line-height: 1.5; color: var(--c-muted);
}

/* --- İçerik --- */
.help-content { padding: 40px var(--gutter-mobile) 64px; }
/* İçerik bloğu content sütununda ortalanır (Prada yerleşimi): dar sütunlarda
   tüm genişliği doldurur, geniş masaüstünde ~800px'e sabitlenip ortalanır —
   böylece dikey ayraca yapışmaz, sütunun ortasında durur. */
.contact { max-width: 800px; margin-inline: auto; }
.contact__title { font-size: 23px; font-weight: var(--fw-medium); line-height: 1.2; }
.contact__lead {
  margin-top: 20px; max-width: 780px;
  font-size: var(--fs-body); line-height: 1.6; color: var(--c-muted);
}
.contact__lead a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Kanal kartları — .social-btn yeniden kullanılır; burada 2 sütunlu ızgara. */
.contact-channels {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin-top: 40px; max-width: 880px;
}
/* Bu sayfadaki kanal kartlarında hover'da zemin solması YOK; yalnızca kenarlık
   siyaha döner (form input/chatbox hover'ıyla aynı). cdrawer'daki .social-btn
   etkilenmez. */
.contact-channels .social-btn { transition: border-color var(--dur-fast) var(--ease); }
.contact-channels .social-btn:hover { background-color: var(--c-paper); border-color: var(--c-ink); }
/* "Çevrim içi" yeşil durum noktası (Prada) — başlık metninden sonra. */
.social-btn__dot {
  display: inline-block; width: 7px; height: 7px; margin-left: 8px;
  border-radius: 50%; background: #2bb24c; vertical-align: middle;
}

/* Önerilen Sorular */
.contact-faq { margin-top: 72px; }
/* SSS'te "Önerilen Sorular" genel bakışın ilk öğesi; üstteki 72px'i sıfırla ki
   başlık iadeler/siparis-takip'teki başlıkla aynı hizadan başlasın. */
.faq-overview > .contact-faq:first-child { margin-top: 0; }
.contact-faq__title { font-size: 20px; font-weight: var(--fw-medium); }
.contact-faq__grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin-top: 28px; max-width: 880px;
}
.contact-faq__item {
  display: flex; align-items: center; min-height: 56px;
  padding: 12px 20px; border: 1px solid var(--c-line);
  font-size: var(--fs-body); line-height: 1.4; color: var(--c-ink);
  /* Zemin solması yok; hover'da yalnızca kenarlık siyaha döner (form
     input'ları / chatbox hover'ı ile aynı his). */
  transition: border-color var(--dur-fast) var(--ease);
}
.contact-faq__item:hover { border-color: var(--c-ink); }
/* Dikdörtgen buton değil, altı çizili metin bağlantısı. Hover efekti index'teki
   "Yeni Gelenler" CTA'sıyla aynı: alt çizgi ::after ile çizilir, hover'da sağa
   silinip soldan yeniden gelir (link-underline). */
.contact-faq__all {
  position: relative;
  display: inline-block; margin-top: 32px;
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-ink);
  text-decoration: none;
}
.contact-faq__all::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(.5lh); height: 1px; background: currentColor;
}
.contact-faq__all:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* Bize e-posta gönderin formu — .pi-field sistemi yeniden kullanılır. */
/* scroll-margin-top: "Bize e-posta gönderin" kartından bu forma kaydırırken
   (ya da yer imi/native atlamada) sabit header başlığı örtmesin. */
.contact-form { margin-top: 88px; max-width: 880px; scroll-margin-top: calc(var(--header-h) + 24px); }
.contact-form__title { font-size: 20px; font-weight: var(--fw-medium); margin-bottom: 28px; }
/* Satır aralığı .pi-field'in kendi margin-bottom'undan gelir; grid yalnızca
   sütun boşluğu taşır (row-gap 0). */
/* Boşluk yalnızca ızgara row-gap'inden gelir (alan marjları sıfırlanır), böylece
   her kutu arası EŞİT durur. Hata mesajları akıştan çıkarıldığı (absolute) için
   bir alanda hata belirse bile kutu yüksekliği ve komşu hizalama değişmez. */
.contact-form__grid { display: grid; grid-template-columns: 1fr; column-gap: 24px; row-gap: 28px; }
.contact-form__full { grid-column: 1 / -1; }
.contact-form .pi-field { margin-bottom: 0; }
/* Paylaşılan `.pi-field__control:not(:placeholder-shown)` kuralı select'i her
   zaman "dolu" saydığı için (select'te placeholder pseudo'su yoktur), boş bir
   placeholder ile açılan select'lerin etiketi haksız yere yukarı kalıyordu.
   Burada boş + odaksız select'lerde etiketi ortaya (placeholder konumuna) geri
   çekiyoruz; değer seçilince JS `.pi-field--filled` ekler, odakta ise :focus
   kuralı etiketi yine yükseltir. */
.contact-form .pi-field--select:not(.pi-field--filled) .pi-field__control:not(:focus) + .pi-field__label {
  top: 50%; transform: translateY(-50%); font-size: 14px;
}

/* Ek bilgiler alanı (karakter sayaçlı textarea). Boşluk row-gap'ten gelir. */
.contact-textarea { position: relative; }
.contact-textarea__control {
  width: 100%; min-height: 132px;
  /* Kullanıcı elle büyütmez (köşe tutamacı yok); JS içeriğe göre büyütür. */
  resize: none; overflow: hidden;
  padding: 18px 16px 30px; border: 1px solid var(--c-line);
  font-family: inherit; font-size: var(--fs-body); letter-spacing: inherit;
  color: var(--c-ink); background: var(--c-paper);
}
.contact-textarea__control::placeholder { color: var(--c-muted); }
.contact-textarea__control:hover,
.contact-textarea__control:focus { outline: none; border-color: var(--c-ink); }
.contact-textarea__count {
  position: absolute; right: 14px; bottom: 20px;
  font-size: 12px; color: var(--c-muted); pointer-events: none;
}
/* Doğrulanan alan + altındaki hata mesajını taşıyan grid hücresi. Hata mesajı
   absolute olduğu için hücre yüksekliğine eklenmez → satır kaymaz. */
.contact-field { position: relative; min-width: 0; }
.contact-form .contact-field .pi-field__error,
.contact-form .contact-textarea .pi-field__error,
.track-form .contact-field .pi-field__error {
  position: absolute; left: 0; top: 100%; margin: 5px 0 0;
}
/* Ek bilgiler zorunlu alanı geçersizken kırmızı kenar (textarea .pi-field değil). */
.contact-textarea.is-error .contact-textarea__control { border-color: #e2001a; }

/* Alt metinlerin ekstra üst boşlukları kaldırıldı; aralar row-gap ile eşit. */
.contact-form__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--c-muted); }
.contact-form__consent { margin: 0; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.contact-form__consent a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.contact-form__foot { margin: 0; display: flex; justify-content: flex-end; }
.contact-form__submit {
  min-width: 200px; height: 44px; padding: 0 24px;
  background: var(--c-ink); color: var(--c-paper); border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-cta); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.contact-form__submit:hover { opacity: .85; }
.contact-form__submit:disabled { background: #b6b6b6; color: var(--c-paper); cursor: not-allowed; opacity: 1; }
/* Gönderim sonrası onay mesajı (arka uç yok; yerinde teyit). */
.contact-form__success {
  display: none; margin-top: 24px; padding: 16px 20px;
  border: 1px solid #2bb24c; background: #f3faf4;
  font-size: var(--fs-body); line-height: 1.5; color: var(--c-ink);
}
.contact-form.is-sent .contact-form__success { display: block; }

/* ==========================================================================
   SİPARİŞİNİZİ TAKİP EDİN (siparis-takip.php) — Prada "track-guest".
   İki alanlı (e-posta + sipariş no) form; "Devam etmek" tam genişlik buton.
   ========================================================================== */
.track-form { margin-top: 40px; }
.track-form__grid {
  display: grid; grid-template-columns: 1fr; column-gap: 24px; row-gap: 28px;
}
.track-form .pi-field { margin-bottom: 0; }
.track-form__foot { margin-top: 32px; }
/* DEVAM ETMEK butonu tam genişlik (Prada). */
.track-form__submit { width: 100%; min-width: 0; }
.track-form__success {
  display: none; margin-top: 24px; padding: 16px 20px;
  border: 1px solid #2bb24c; background: #f3faf4;
  font-size: var(--fs-body); line-height: 1.5; color: var(--c-ink);
}
.track-form.is-sent .track-form__success { display: block; }

/* --- Masaüstü --- */
@media (min-width: 768px){
  .help { grid-template-columns: 354px 1fr; align-items: start; }
  /* Sidebar viewport boyunda sabit kalır; çalışma saatleri en alta yaslanır. */
  .help-nav {
    position: sticky; top: var(--header-h);
    min-height: calc(100vh - var(--header-h));
    display: flex; flex-direction: column;
    padding: 48px 32px 40px;
  }
  .help-nav__hours { margin-top: auto; }
  .help-content {
    /* İçerik kısa olsa bile sütunu grid satır yüksekliğine (sidebar'ın 100vh
       min-height'ı) uzat; böylece dikey ayraç aşağı inip footer'ın yatay
       çizgisiyle kesişir. */
    align-self: stretch;
    border-left: 1px solid var(--c-line);
    padding: 56px 0 96px;
  }
  /* İçerik bloğu, ayraç ile sağ kenar arasında ORTALANIR (Prada yardım-merkezi):
     yatay boşluk artık content'in kendisinde değil, ortalanan çocuk kutularında.
     Böylece geniş ekranda içerik sola yapışmaz. */
  .help-content > * {
    max-width: 872px;
    margin-inline: auto;
    padding-inline: clamp(24px, 4vw, 64px);
  }
  .contact__title { font-size: 26px; }
  .contact-channels { grid-template-columns: repeat(2, 1fr); }
  .contact-faq__grid { grid-template-columns: repeat(2, 1fr); }
  .contact-form__grid { grid-template-columns: repeat(2, 1fr); }
  .track-form__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px){
  /* Mobilde sol gezinme, hesap sayfalarındaki gibi yatay sekme çubuğuna döner
     (Prada mobil): sekmeler yan yana, taşınca yatay kaydırılır; çalışma saatleri
     üstte gösterilmez. */
  .help-nav { padding: 0; }
  .help-nav__hours { display: none; }
  .help-nav__list {
    flex-direction: row;
    align-items: stretch;             /* li'ler çubuğun tam yüksekliğine uzasın */
    gap: 24px;
    height: 49px;
    padding: 0 var(--gutter-mobile);
    border-bottom: 1px solid var(--c-line);
    overflow-x: auto;                 /* taşınca yatay kaydır */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* kaydırma çubuğunu gizle */
  }
  .help-nav__list::-webkit-scrollbar { display: none; }
  /* li de flex kutu: link tam yüksekliği doldursun ki alt çizgi tabana insin. */
  .help-nav__list > li { flex: none; display: flex; }
  .help-nav__link {
    align-self: stretch;
    display: flex;
    align-items: center;
    white-space: nowrap;              /* etiketler tek satır */
  }
  /* Aktif sekme alt çizgisi çubuğun EN ALTINA (border çizgisine değer). */
  .help-nav__link::after { top: auto; bottom: 0; transform: none; }

  .contact-form__foot { justify-content: stretch; }
  .contact-form__submit { width: 100%; }
}

/* ==========================================================================
   SSS (sss.php) — Prada "faqs" uyarlaması. İki seviye: (1) Önerilen Sorular +
   Konular listesi, (2) bir konuya tıklayınca o konunun akordeonlu görünümü.
   ========================================================================== */

/* Önerilen Sorular maddeleri artık <button> (konuya + maddeye götürür); görsel
   olarak kutu bağlantısıyla aynı kalsın diye buton varsayılanlarını sıfırla. */
.contact-faq__item {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--c-paper); font-family: inherit; letter-spacing: inherit;
  justify-content: space-between; gap: 16px;
}

/* --- Konular listesi --- */
.faq-topics { margin-top: 72px; }
.faq-topics__title { font-size: 20px; font-weight: var(--fw-medium); }
/* Tek sütun, bitişik (aralarında boşluk yok); kenarlıklar üst üste binip tek
   çizgi olur (margin-top: -1px), hover'da o satır öne alınıp siyah kenar görünür. */
.faq-topics__list {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: flex; flex-direction: column; max-width: 880px;
}
.faq-topics__list > li { display: flex; }
.faq-topics__list > li:not(:first-child) .faq-topic { margin-top: -1px; }
.faq-topic {
  position: relative; z-index: 0;
  width: 100%; display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 12px 20px;
  border: 1px solid var(--c-line); background: var(--c-paper);
  font-family: inherit; font-size: var(--fs-body); color: var(--c-ink);
  text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.faq-topic:hover { border-color: var(--c-ink); z-index: 1; }
.faq-topic__icon { flex: none; width: 24px; height: 24px; }
.faq-topic__icon svg { width: 100%; height: 100%; }
.faq-topic__name { flex: 1 1 auto; font-weight: var(--fw-medium); }
.faq-topic__arrow { flex: none; width: 20px; height: 20px; color: var(--c-ink); }
.faq-topic__arrow svg { width: 100%; height: 100%; }

/* --- Konu görünümü (akordeon) --- */
.faq-back {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 28px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.faq-back__icon { width: 18px; height: 18px; }
.faq-back__icon svg { width: 100%; height: 100%; }
.faq-back span:last-child { position: relative; }
.faq-back span:last-child::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease);
}
.faq-back:hover span:last-child::after { transform: scaleX(1); }
.faq-section__title { font-size: 26px; font-weight: var(--fw-medium); }

/* Akordeon = "Konular" ile aynı bitişik, tam kenarlıklı kutu dili. Komşu
   kenarlıklar üst üste biner (margin-top:-1px); hover VEYA açık durumda o kutu
   öne alınıp kenarları siyaha döner ve AÇIK kaldıkça siyah kalır. */
.faq-acc { margin-top: 24px; max-width: 880px; }
.faq-item {
  position: relative; z-index: 0;
  border: 1px solid var(--c-line);
  transition: border-color var(--dur-fast) var(--ease);
}
.faq-item:not(:first-child) { margin-top: -1px; }
.faq-item:hover,
.faq-item.is-open { border-color: var(--c-ink); z-index: 1; }
.faq-item__head {
  width: 100%; display: flex; align-items: center; gap: 20px;
  padding: 22px 24px; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--c-ink);
}
.faq-item__q { flex: 1 1 auto; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.4; }
.faq-item__chev {
  flex: none; width: 22px; height: 22px; color: var(--c-ink);
  transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item__chev svg { width: 100%; height: 100%; }
.faq-item.is-open .faq-item__chev { transform: rotate(180deg); }
/* 0fr→1fr grid geçişi: değişken yükseklikli içerik yumuşak açılır/kapanır.
   Uzun süre + easeOutCubic ile "soft" açılış; padding kalıcı (kapalıyken 0fr
   satırı zaten kırptığı için görünmez) — böylece açılış başında sıçrama olmaz. */
.faq-item__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
/* Kapalıyken alt padding 0 → kutu TAM sıfıra iner (metin görünmez). Açılırken
   satır yüksekliği ile aynı ritimde padding de animasyonlanır → sıçrama olmaz. */
.faq-item__inner {
  overflow: hidden; min-height: 0;
  padding: 0 24px;
  font-size: var(--fs-body); line-height: 1.6; color: var(--c-body, #4a4d4e);
  transition: padding-bottom 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item.is-open .faq-item__inner { padding-bottom: 24px; }
.faq-item__inner p { margin: 0 0 12px; }
.faq-item__inner p:last-child { margin-bottom: 0; }
.faq-item__inner a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }

/* SSS mobil — "Konular" listesi VE akordeon soruları çerçeveli kutu değil,
   footer gibi ekranı EN SOLDAN EN SAĞA kaplayan tam genişlik satırlar (yalnızca
   yatay ayraç). NOT: bu blok, yukarıdaki `.faq-*` TEMEL tanımlarından SONRA
   gelmeli — aksi halde eşit özgüllükte sonraki kural (temel border) kazanır ve
   override çalışmaz. */
@media (max-width: 767px){
  .faq-topic,
  .faq-item {
    border-left: none; border-right: none; border-top: none;
    border-bottom: 1px solid var(--c-line);
  }
  .faq-topics__list > li:not(:first-child) .faq-topic,
  .faq-acc .faq-item:not(:first-child) { margin-top: 0; }
  .faq-topics__list > li:first-child .faq-topic,
  .faq-acc .faq-item:first-child { border-top: 1px solid var(--c-line); }
  /* Liste, içeriğin 16px yan boşluğunu negatif margin ile aşıp ekran kenarına
     dayanır; satır içi padding metin/ikonu 16px gutter'da tutar. */
  .faq-topics__list,
  .faq-acc {
    margin-left: calc(-1 * var(--gutter-mobile));
    margin-right: calc(-1 * var(--gutter-mobile));
    max-width: none;
  }
  .faq-topic,
  .faq-item__head,
  .faq-item__inner {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }

  /* Bir soru AÇILINCA (mobil): sadece ÜST ve ALT çizgi siyah, tam genişlik
     (yan kenar yok). Açık öğe -1px yukarı çekilip üst siyah çizgisi bir
     üstteki satırın gri ayracını örter (z-index) → çift çizgi olmaz; ilk
     öğede üst çizgi de siyaha döner. */
  .faq-item.is-open {
    border-top: 1px solid var(--c-ink);
    border-bottom: 1px solid var(--c-ink);
    z-index: 1;
  }
  .faq-item.is-open:not(:first-child) { margin-top: -1px; }
  /* İlk öğenin temel üst-çizgi kuralı (`.faq-acc .faq-item:first-child`, özgüllük
     0,3,0) yukarıdaki is-open kuralından (0,2,0) güçlü olduğu için en üstteki
     açılınca üst çizgi gri kalıyordu; daha yüksek özgüllükle siyaha çeviriyoruz. */
  .faq-acc .faq-item.is-open:first-child { border-top-color: var(--c-ink); }
}

/* ==========================================================================
   YASAL METİN SAYFALARI (gizlilik-politikasi.php vb.) — Prada
   "terms-conditions" uyarlaması: sade, ORTALANMIŞ tek sütun uzun-metin makale.
   Yardım-merkezi split düzeni yok; başlık + numaralı bölümler.
   ========================================================================== */
.legal { padding: 48px var(--gutter-mobile) 80px; }
.legal__inner { max-width: 860px; margin: 0 auto; }
.legal__title { font-size: 26px; font-weight: var(--fw-medium); margin: 0 0 8px; letter-spacing: .01em; }
.legal__updated { margin: 0 0 36px; font-size: 13px; color: var(--c-muted); }
.legal__lead { font-size: var(--fs-body); line-height: 1.7; color: var(--c-ink); }
.legal h2 { font-size: 18px; font-weight: var(--fw-medium); color: var(--c-ink); margin: 40px 0 12px; }
.legal p { margin: 0 0 16px; font-size: var(--fs-body); line-height: 1.7; color: var(--c-body, #4a4d4e); }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin: 0 0 8px; font-size: var(--fs-body); line-height: 1.7; color: var(--c-body, #4a4d4e); }
.legal a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { font-weight: var(--fw-medium); color: var(--c-ink); }
.legal__table-wrap { overflow-x: auto; margin: 0 0 24px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.legal th, .legal td { border: 1px solid var(--c-line); padding: 12px 14px; text-align: left; vertical-align: top; color: var(--c-body, #4a4d4e); }
.legal thead th { background: #f6f6f6; color: var(--c-ink); font-weight: var(--fw-medium); }
.legal th[scope="row"] { background: #fafafa; color: var(--c-ink); font-weight: var(--fw-medium); white-space: nowrap; }
@media (min-width: 768px){
  .legal { padding: 72px clamp(24px, 6vw, 80px) 120px; }
  .legal__title { font-size: 32px; }
}


/* ==========================================================================
   404 — SAYFA BULUNAMADI (404.php)
   --------------------------------------------------------------------------
   Yeni bir görsel dil DEĞİL: sayfa baştan sona mevcut token'larla kuruldu.
   Başlık .legal__title ile aynı 26/32px, metin 14px/1.7, düğme referans
   button--primary (bkz. .cdrawer__wa-btn), "Ara" bağlantısı hero CTA'sının
   animasyonlu alt çizgisini paylaşıyor, kategori ızgarası ana sayfadaki
   .catgrid__grid'in ta kendisi.

   TEK İSTİSNA RAKAM: sitenin en büyük yazısı 32px, 404 bilerek onun dışında.
   Ağırlık yine 400 — sistemde bold yok, "lüks hissinin yarısı bu" (bkz. :root).
   Boyut sabit piksel değil, ekranla ölçekleniyor.

   İSTENEN ADRES BİLEREK BASILMIYOR: htmlspecialchars ile XSS'i keserdik ama
   ekrana kullanıcının yazdığı metni koymak 404'ü metin enjeksiyonuna ("hesabınız
   kilitlendi, şu numarayı arayın") açık bir yüzey yapıyor. Adres zaten tarayıcı
   çubuğunda; kazancı riskine değmiyor.
   ========================================================================== */
.hata__giris {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px var(--gutter-mobile) 72px;
}

.hata__kod {
  display: block;
  font-size: clamp(84px, 20vw, 168px);
  font-weight: var(--fw-regular);
  line-height: 1;
  /* Açık harf arası rakamı "hata kodu" olmaktan çıkarıp sayfanın tipografik
     öğesi yapıyor. text-indent, aralığın sağda bıraktığı boşluğu telafi eder —
     aksi hâlde rakam bir tık sola kaçık duruyor. */
  letter-spacing: .06em;
  text-indent: .06em;
  color: var(--c-ink);
}

/* Rakamla metni ayıran çizgi — sitenin her yerindeki 1px ayraç.
   Genişlik rakamla birlikte ölçekleniyor (rakam da vw'ye bağlı): sabit bir
   değerde büyük ekranda 404'ün altında iz gibi kalıyordu, ayrım okunmuyordu. */
.hata__ayrac {
  width: clamp(120px, 26vw, 200px);
  height: 1px;
  margin: 28px 0;
  border: 0;
  background: var(--c-line);
}

.hata__baslik {
  font-size: 26px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: .01em;
}

.hata__metin {
  max-width: 46ch;
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-muted);
}

/* Siyah düğme + altı çizili "Ara": sitenin birincil/ikincil eylem çifti.
   Dar ekranda alt alta düşerken düğme üstte kalsın diye satır sarması serbest. */
.hata__eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 32px;
  margin-top: 36px;
}

/* Referans button--primary (.cdrawer__wa-btn ile aynı ölçüler). */
.hata__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 0 32px;
  background: #000;
  color: #fff;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  transition: opacity var(--dur-base) var(--ease);
}
.hata__btn:hover { opacity: .7; }

/* Arama katmanını açar. Alt çizgisi hero CTA'sıyla ortak (bkz. link-underline). */
.hata__ara {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --- Kategori önerileri --------------------------------------------------
   Çıkışsız bir 404 bırakmamak için: ana sayfadaki kategori ızgarasının aynısı,
   yalnızca üstüne küçük bir başlık geliyor. */
.hata-oneri { border-top: 1px solid var(--c-line); }
.hata-oneri__baslik {
  padding: 48px var(--gutter-mobile) 24px;
  text-align: center;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* --- Yardım satırı ------------------------------------------------------- */
.hata-yardim {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  padding: 8px var(--gutter-mobile) 72px;
}
.hata-yardim__bag {
  font-size: 13px;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-line);
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}
.hata-yardim__bag:hover { color: var(--c-ink); text-decoration-color: currentColor; }

@media (min-width: 768px){
  .hata__giris { padding: 96px clamp(24px, 6vw, 80px) 104px; }
  .hata__ayrac { margin: 36px 0; }
  .hata__baslik { font-size: 32px; }
  .hata-oneri__baslik { padding: 72px 24px 32px; }
  .hata-yardim { padding-bottom: 96px; }
}


/* ==========================================================================
   MAĞAZA BULUCU (magaza-bulucu.php)
   Prada "store-locator" uyarlaması: solda sürüklenebilir harita (Leaflet +
   CARTO açık gri tile), sağda arama + mağaza listesi. Mobilde ikisi
   sekmelerle değişir; başlık/arama üstte sabit kalır.
   ========================================================================== */

.store-page .header__container { border-bottom: 1px solid var(--c-line); }
.store-page .footer { border-top: 1px solid var(--c-line); }

/* Harita ve tile'lar hazırlanana kadar duran çiçek yükleyicisi —
   .account-loader ile aynı davranış, sadece hedef sınıf farklı. */
.store-loader {
  position: fixed;
  top: var(--header-h-mobile);
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.store-page.is-loading .store-loader {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease);
}
.store, .store-foot { transition: opacity var(--dur-base) var(--ease); }
.store-page.is-loading .store,
.store-page.is-loading .store-foot { opacity: 0; }

/* ------------------------------------------------------------ düzen */
.store {
  display: flex;
  align-items: stretch;
  background: var(--c-paper);
}

/* `z-index: 0` şart: Leaflet kendi katmanlarını 400–1000 arasına koyuyor
   (pane 400, kontroller 800, zoom 1000). Bu kutu yığın bağlamı kurmayınca o
   sayılar SAYFA seviyesinde yarışıyor ve haritayı "Bize ulaşın" çekmecesinin
   (.cdrawer, z-index 30) ve mega menünün üstüne çıkarıyordu — çekmece açıkken
   panelin yarısı haritanın altında kalıyordu. Sıfır, içerideki bütün o
   sayıları bu kutunun içine hapsediyor. */
.store__map { position: relative; z-index: 0; flex: 1 1 auto; min-width: 0; }

.store-map { position: absolute; inset: 0; background: #f2f3f3; }
.store-map__fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  font-size: var(--fs-body); color: var(--c-muted);
}

.store__panel {
  flex: 0 0 clamp(380px, 33vw, 600px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--c-line);
  background: var(--c-paper);
}

/* --------------------------------------------------- panel başlığı */
.store-panel__head {
  flex: none;
  padding: 28px var(--gutter) 0;
}
.store-panel__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
}

.store-search { position: relative; }
.store-search__input {
  width: 100%;
  height: 56px;
  padding: 0 52px 0 16px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: var(--c-paper);
  font: inherit;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.store-search__input::placeholder { color: var(--c-muted); }
.store-search__input:focus { outline: none; border-color: var(--c-ink); }
.store-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.store-search__locate {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; background: none;
  color: var(--c-ink);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.store-search__locate svg { width: 20px; height: 20px; stroke-width: 1.4; }
.store-search__locate:hover { opacity: .6; }
.store-search__locate.is-busy { animation: store-spin 1s linear infinite; }
@keyframes store-spin { to { transform: translateY(-50%) rotate(360deg); } }

.store-panel__count {
  margin: 16px 0 0;
  padding-bottom: 16px;
  font-size: 13px;
  letter-spacing: var(--tracking);
  color: var(--c-muted);
}

/* Mobil sekmeler — masaüstünde gizli. */
.store-tabs { display: none; }

/* ------------------------------------------------------------ liste */
.store-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--gutter) 28px;
  -webkit-overflow-scrolling: touch;
}

.store-card {
  padding: 22px 20px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  transition: border-color var(--dur-fast) var(--ease);
}
.store-card + .store-card { margin-top: 12px; }
.store-card.is-active { border-color: var(--c-ink); }

.store-card__name {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
}
.store-card__address,
.store-card__hours,
.store-card__distance {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: var(--tracking);
  color: var(--c-ink);
}
.store-card__distance { color: var(--c-muted); margin-top: 2px; }

/* Açık/kapalı rozeti — yeşil/gri nokta + metin. */
.store-card__hours { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.store-card__dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--c-muted);
}
.store-card__hours.is-open  .store-card__dot { background: #1f7a45; }
.store-card__hours.is-open  { color: var(--c-ink); }
.store-card__hours.is-closed { color: var(--c-muted); }

/* Telefon ve "Detayları görün": alt çizgi native değil ::after ile çiziliyor,
   böylece hover'da ana sayfadaki "Yeni Gelenler" ile AYNI kayma efektini
   alıyorlar (bkz. @keyframes link-underline). Eskiden telefon `text-decoration`
   kullanıyordu — o çizgi animasyon almaz. */
.store-card__phone {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
  text-decoration: none;
}

.store-card__toggle {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-cta);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
  cursor: pointer;
  position: relative;
}

/* Çizginin konumu hero'daki kuralla birebir: satır kutusunun altına lh
   birimiyle hizalanıyor, yükseklikten bağımsız. */
.store-card__phone::after,
.store-card__toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.store-card__phone:hover::after,
.store-card__toggle:hover::after {
  animation: link-underline var(--dur-line) var(--ease);
}

/* Detaylar — 0fr→1fr grid geçişi (sss.php akordeonuyla aynı teknik). */
.store-card__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}
.store-card.is-expanded .store-card__details { grid-template-rows: 1fr; }
.store-card__details-inner { overflow: hidden; }

.store-card__sub {
  margin: 22px 0 10px;
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

.store-hours { margin: 0; }
.store-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-line);
}
.store-hours__row:last-child { border-bottom: 0; }
.store-hours__row dt, .store-hours__row dd { margin: 0; }
.store-hours__row.is-today { color: var(--c-ink); font-weight: var(--fw-medium); }

.store-services {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: var(--tracking);
  color: var(--c-ink);
}

.store-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}
.store-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--c-ink);
  font-size: var(--fs-cta);
  letter-spacing: var(--tracking);
  color: var(--c-ink);
  background: var(--c-paper);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.store-action svg { width: 18px; height: 18px; stroke-width: 1.4; flex: none; }
/* Resmi marka glifleri (WhatsApp) dolu ve viewBox'i kenardan kenara doldurur;
   kontur cizilmis UI ikonlarindan optik olarak agir basmasin diye biraz kucuk. */
.store-action__brand { width: 16px; height: 16px; stroke: none; }
.store-action:hover { background: var(--c-ink); color: var(--c-paper); }
.store-action--primary { background: var(--c-ink); color: var(--c-paper); }
.store-action--primary:hover { background: var(--c-ink); color: var(--c-paper); opacity: .8; }

.store-list__empty {
  margin: 0;
  padding: 28px 20px;
  border: 1px solid var(--c-line);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: var(--tracking);
  color: var(--c-muted);
}
.store-list__empty a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------- harita marker */
/* Leaflet divIcon'un varsayılan beyaz kutusunu sıfırla. */
.store-marker { background: none; border: 0; }
.store-marker__dot {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-paper);
  box-shadow: 0 2px 10px rgba(25, 27, 28, .25);
  transition: transform var(--dur-fast) var(--ease);
}
.store-marker:hover .store-marker__dot { transform: scale(1.08); }
.store-marker__dot svg { width: 26px; height: 26px; }

/* Leaflet'in kendi bileşenlerini site diline çek. */
.leaflet-container {
  font-family: var(--font-sans);
  font-size: 13px;
  background: #f2f3f3;
}
.leaflet-container a { color: var(--c-ink); }
.leaflet-control-attribution {
  padding: 3px 8px;
  background: rgba(255, 255, 255, .8);
  font-size: 10px;
  letter-spacing: 0;
  color: var(--c-muted);
}
.leaflet-bar {
  border: 1px solid var(--c-line);
  border-radius: 0;
  box-shadow: none;
}
.leaflet-bar a,
.leaflet-bar a:hover {
  width: 34px; height: 34px; line-height: 34px;
  border-radius: 0;
  border-bottom-color: var(--c-line);
  color: var(--c-ink);
  background: var(--c-paper);
}
.leaflet-bar a:hover { background: #f4f5f5; }
.leaflet-popup-content-wrapper {
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(25, 27, 28, .16);
}
.leaflet-popup-content {
  margin: 14px 16px;
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: var(--tracking);
  color: var(--c-ink);
}
.leaflet-popup-content a { text-decoration: underline; text-underline-offset: 3px; }
.leaflet-popup-tip { box-shadow: none; }

/* ------------------------------------------------- harita altı blok */
.store-foot {
  padding: 40px var(--gutter);
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
}
.store-foot__text {
  max-width: 980px;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: var(--tracking);
  color: var(--c-muted);
}


/* ------------------------------------------------------- MASAÜSTÜ */
@media (min-width: 1024px){
  .store { height: calc(100vh - var(--header-h)); }
  .store-loader { top: var(--header-h); }
  .store-foot { padding: 56px var(--gutter) 48px; }
}
@supports (height: 100svh){
  @media (min-width: 1024px) {
    .store { height: calc(100svh - var(--header-h)); }
  }
}

/* ---------------------------------------------------------- MOBİL */
/* Harita ile liste sekmelerle değişir; başlık + arama üstte kalır. */
@media (max-width: 1023px){
  .store {
    flex-direction: column;
    height: auto;
  }

  .store__panel {
    order: 1;
    flex: none;
    border-left: 0;
  }
  .store-panel__head { padding: 24px var(--gutter-mobile) 0; }
  .store-list {
    order: 3;
    overflow: visible;
    padding: 0 var(--gutter-mobile) 32px;
  }

  .store__map {
    order: 2;
    display: none;
    flex: none;
    height: 62vh;
    min-height: 340px;
    border-top: 1px solid var(--c-line);
  }
  .store-view-map .store__map { display: block; }
  .store-view-map .store-list { display: none; }

  /* Sekme çubuğu — iki eşit yarım, BÜYÜK HARF, ortalanmış; ayraç çizgisi
     panel dolgusunu taşarak kenardan kenara gider (Prada mobil deseni).
     Aktif sekmenin alt çizgisi yalnızca kendi yarısını kaplar. */
  .store-tabs {
    display: flex;
    margin: 20px calc(var(--gutter-mobile) * -1) 0;
    border-bottom: 1px solid var(--c-line);
  }
  .store-tabs__btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 15px 8px 14px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-align: center;
    color: var(--c-muted);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
  }
  .store-tabs__btn::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--c-ink);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
  }
  .store-tabs__btn.is-active { color: var(--c-ink); }
  .store-tabs__btn.is-active::after { opacity: 1; }

  .store-panel__count { margin-top: 14px; }
  .store-foot { padding: 32px var(--gutter-mobile); }
}

@media (prefers-reduced-motion: reduce){
  .store-search__locate.is-busy { animation: none; }
  .store-card__details { transition: none; }
  /* Çizgi yerinde kalsın, kaymasın. */
  .store-card__phone:hover::after,
  .store-card__toggle:hover::after { animation: none; }
}

/* ==========================================================================
   KATEGORİ SAYFASI / PLP (dis-giyim.php)
   Prada "product-list-editorial-page" uyarlaması. İki yapışkan çubuk:
     1) .plp-bar   — solda kategori adı, ortada alt kategoriler
     2) .plp-tools — solda ürün sayısı, sağda Filtreler · Sıralama
   İkisi de header'ın hemen altına yapışır; --plp-top ile hizalanır.
   ========================================================================== */

.plp-page .header__container { border-bottom: 1px solid var(--c-line); }

.plp {
  --plp-top:   var(--header-h-mobile);
  --plp-bar-h: 90px;               /* mobil: 46px başlık + 43px alt kategori + 1px çizgi */
}

/* -------------------------------------------------- 1) kategori çubuğu
   Mobilde İKİ SATIR (Prada mobil deseni): üstte kategori adı, altında
   yatay kaydırmalı alt kategoriler. Masaüstünde tek satıra iner. */
.plp-bar {
  position: sticky;
  top: var(--plp-top);
  z-index: 10;                     /* --z-header (12) altında kalsın */
  height: var(--plp-bar-h);
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
}

.plp-bar__title {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 var(--gutter-mobile);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
  white-space: nowrap;
}

.plp-subnav { height: 43px; }

/* Taşarsa yatay kaydırılır; çubuk görünmez (mobilde parmakla kaydırma). */
.plp-subnav__list {
  display: flex;
  align-items: stretch;
  gap: 24px;
  height: 100%;
  margin: 0;
  padding: 0 var(--gutter-mobile);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.plp-subnav__list::-webkit-scrollbar { display: none; }
.plp-subnav__list > li { flex: none; display: flex; }

.plp-subnav__link {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fs-nav);
  line-height: 18px;
  letter-spacing: var(--tracking);
  color: var(--c-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
/* Aktif alt kategorinin altındaki 2px'lik çizgi, çubuğun kenarlığını örter. */
.plp-subnav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c-ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.plp-subnav__link:hover { color: var(--c-ink); }
.plp-subnav__link.is-active { color: var(--c-ink); font-weight: var(--fw-medium); }
.plp-subnav__link.is-active::after { opacity: 1; }

/* -------------------------------------------------- 2) araç çubuğu */
.plp-tools {
  position: sticky;
  top: calc(var(--plp-top) + var(--plp-bar-h));
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 48px;
  padding: 0 var(--gutter-mobile);
  background: var(--c-paper);
}

.plp-tools__count {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

.plp-tools__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

.plp-tools__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: inherit;
  /* Chrome'un UA stil sayfası button'a text-transform:none veriyor; miras
     aldırmazsak "Filtreler" küçük harf kalır. */
  text-transform: inherit;
  transition: opacity var(--dur-fast) linear;
}
.plp-tools__btn:hover { opacity: .6; }

/* Seçili filtre sayısı — Prada'daki gibi parantez içinde: FİLTRELER (1) */
.plp-tools__badge[hidden] { display: none; }

.plp-tools__sep { color: var(--c-muted); }

/* Görünen etiketin üstünde şeffaf <select>: masaüstünde tek satır kalır,
   mobilde yerel seçim çarkı açılır. */
.plp-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.plp-sort__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.plp-sort__value { display: none; }   /* dar ekranda yalnızca etiket */
/* İki nokta değerin parçası: mobilde değerle birlikte gizlenir. */
.plp-sort__value::before { content: ': '; }

/* -------------------------------------------------- 3) ürün ızgarası */
.plp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plp-card { position: relative; background: var(--c-paper); }
.plp-card__link { display: block; }

.plp-card__media {
  position: relative;
  aspect-ratio: var(--card-ratio);
  background: #f1f1f2;
  overflow: hidden;
  transition: opacity var(--dur-media) var(--ease);
}
.plp-card__link:hover .plp-card__media { opacity: .8; }
.plp-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* İKİNCİ GÖRSEL — üzerine gelince yumuşak geçişle beliren kombin/detay
   fotoğrafı (referanstaki davranış). İlk görselin üstünde duruyor, normalde
   şeffaf; kart hover'ında görünür oluyor.

   İkinci görseli OLAN kartta eski soluklaşma (opacity .8) devre dışı:
   geçişi artık fotoğraf yapıyor, ikisi üst üste binince görüntü kirleniyordu.
   Dokunmatik cihazda hover yok — `@media (hover: hover)` ile ayrıldı, orada
   kart eskisi gibi davranıyor. */
.plp-card__media-alt{
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Geçiş bilerek YAVAŞ ve YUMUŞAK: 0,6 sn'lik standart crossfade burada
     sert duruyordu. `ease-in-out` iki ucu da yumuşatıyor, sitenin keskin
     giriş eğrisi (--ease) fotoğraf geçişinde ani başlıyordu. Fareyi
     çektiğinde biraz daha hızlı sönsün diye çıkış süresi ayrı. */
  transition: opacity .9s cubic-bezier(.33, 0, .2, 1);
}
@media (hover: hover){
  .plp-card__link:hover .plp-card__media-alt {
    opacity: 1;
    transition-duration: .7s;    /* girişte biraz daha çabuk belirsin */
  }
  .plp-card__link:hover .plp-card__media:has(.plp-card__media-alt) { opacity: 1; }
}

/* --------------------------------------------------------------------------
   MOBİLDE KART = KAYDIRMALI GALERİ
   Dokunmatik cihazda "üzerine gelme" diye bir şey yok; ikinci fotoğrafa
   PARMAKLA KAYDIRARAK geçiliyor ve görselin altındaki iki nokta hangisinde
   olunduğunu gösteriyor (referanstaki davranış).

   Kaydırma tamamen CSS: medya kutusu yatay kaydırılabilir oluyor, iki fotoğraf
   yan yana diziliyor ve `scroll-snap` her birini tam ekrana oturtuyor.
   JS'in tek işi noktayı işaretlemek.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   TAM EKRAN GÖRSEL (urun.php) — galerideki fotoğrafa tıklayınca açılır.
   Zemin sitenin açık grisi; fotoğraf ortada, ekrana sığacak kadar büyük.
   Yakınlaştırma iki kademeli ve imleci izleyen daire ile yapılıyor.
   ========================================================================== */
.zoom {
  position: fixed;
  inset: 0;
  z-index: 150;              /* header (12) ve çekmecelerin üstünde */
  background: #f1f1f2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom[hidden] { display: none; }
/* Katman açılırken odağı kendisi alıyor; odak karesi çizilmesin. */
.zoom:focus { outline: none; }

/* Sahne TÜM EKRANI kaplıyor: fotoğraf yakınlaştıkça dar bir sütunun içinde
   sıkışıp kalmasın, ekrana doğru büyüyüp kenarlarından taşsın (referanstaki
   davranış). Taşan kısım burada kırpılıyor. */
.zoom__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Parmak hareketleri tarayıcıya kaptırılmıyor: iki parmakla yakınlaştırma
     ve sürükleme sahnenin kendi işi. */
  touch-action: none;
}
/* Sahnenin tamamında (fotoğrafın yanındaki boş zemin dahil) normal imleç
   gizleniyor, yerini izleyen yakınlaştırma dairesi alıyor. Sınıf yalnızca
   fare sahneye girdikten sonra ekleniyor: daire, imlecin gerçek yerine
   oturmadan bir kez sol üst köşede parlamasın. */
.zoom__stage.is-over { cursor: none; }
@media (max-width: 767px){
  .zoom__stage.is-over { cursor: auto; }
}
/* Kapalıyken fotoğraf ekran yüksekliğini dolduruyor; yakınlaştırma bunun
   üzerine biniyor. */
.zoom__image {
  /* Ölçü birimi vw/vh DEĞİL sahnenin kendisi: mobilde adres çubuğu açılıp
     kapandıkça 100vh gerçek görünür alandan büyük kalıyor ve fotoğrafın altı
     kesiliyordu. */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform .6s cubic-bezier(.33, 0, .2, 1);
  will-change: transform;
}
/* Kademe değişimi yavaş ve akıcı; yakınken imleçle gezinme kısa geçişle
   imleci takip ediyor. */
.zoom__stage.is-panning .zoom__image { transition: transform .2s linear; }

/* İmleci izleyen daire — + yakınlaştırır, son kademede - olur. */
.zoom__cursor {
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.zoom__cursor svg { width: 22px; height: 22px; }
.zoom__stage.is-over .zoom__cursor { opacity: 1; }
@media (max-width: 767px){ .zoom__cursor { display: none; } }

.zoom__close,
.zoom__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--c-ink);
  cursor: pointer;
}
.zoom__close { top: 28px; right: 32px; width: 32px; height: 32px; }
.zoom__close svg { width: 20px; height: 20px; }
/* Mobilde referansta düğme ekranın köşesine daha yakın duruyor. */
@media (max-width: 767px){
  .zoom__close { top: 9px; right: 11px; }
}
.zoom__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.zoom__nav svg { width: 24px; height: 24px; }
.zoom__nav--prev { left: 16px; }
.zoom__nav--next { right: 16px; }
.zoom__nav[disabled] { opacity: .25; cursor: default; }

/* Sağ altta diğer görsellerin küçük halleri — referanstaki "bottom-banner"
   ölçüleri: 70×87 kutu, aralarında boşluk yok, her birinin 1px açık gri
   çerçevesi var. Seçili olmayanlar YARI SAYDAM (.5), seçili tam opak; ayrım
   çerçeveyle değil saydamlıkla yapılıyor, geçiş kısa (.1s ease-in).

   Şerit kaydırılabilir: referansta 5 görsel var, bizim kataloğumuzda 20'ye
   çıkan ürünler de var ve sabit şerit ekranı boydan boya doldurup fotoğrafın
   üstüne biniyordu. Kaydırma çubuğu gizli, seçili küçük görsel JS ile
   görünür alana getiriliyor. */
.zoom__thumbs {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: calc(100vw - 48px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.zoom__thumbs::-webkit-scrollbar { display: none; }
.zoom__thumbs li { flex: 0 0 auto; width: 70px; height: 87px; }
.zoom__thumbs button {
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  background: none;
  border: 1px solid #d9dce0;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  opacity: .5;                  /* seçili olmayanlar soluk */
  transition: opacity .1s ease-in;
}
.zoom__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoom__thumbs button:hover { opacity: 1; }
.zoom__thumbs .is-on button { opacity: 1; }
/* MOBİLDE KÜÇÜK GÖRSEL ŞERİDİ YOK — referansta da yok: ekranda yalnızca
   fotoğraf, iki yanda ok ve kapat düğmesi var. Görseller arasında parmakla
   kaydırarak da geçiliyor. */
@media (max-width: 767px){
  .zoom__thumbs { display: none; }
}

/* Tam ekran açıkken arkadaki sayfa kaymasın. */
body.zoom-open { overflow: hidden; }

/* Galerideki fotoğraf tıklanabilir olduğunu belli etsin. Büyüteç (zoom-in)
   değil normal el imleci: yakınlaştırma tam ekranda yapılıyor, burada yapılan
   iş yalnızca "aç". */
.pdp-shot img { cursor: pointer; }

/* Fotoğrafları taşıyan iç katman. Kaydırma MEDYA KUTUSUNDA değil burada:
   böylece noktalar medya kutusuna göre konumlanıp kaydırmayla birlikte
   sürüklenmiyor, görselin üstünde sabit duruyor. */
.plp-card__slider { width: 100%; height: 100%; }

.plp-card__slides { display: none; }

@media (max-width: 767px){
  .plp-card__slider {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* kaydırma çubuğu görünmesin */
    overscroll-behavior-x: contain;        /* sayfa yatay kaymasın */
  }
  .plp-card__slider::-webkit-scrollbar { display: none; }
  .plp-card__slider img {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;              /* tek kaydırmada bir fotoğraf */
  }
  /* İkinci fotoğraf mobilde üst üste binmiyor, YANDA duruyor. */
  .plp-card__media-alt {
    position: static;
    opacity: 1;
    transition: none;
  }

  /* NOKTALAR GÖRSELİN ÜSTÜNDE — kendilerine yer ayrılmıyor, kart düzeni
     ve fotoğrafın yüksekliği hiç değişmiyor. */
  .plp-card__slides {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;                  /* karta dokunmayı engellemesin */
  }
  .plp-card__slides li {
    width: 5px;
    height: 5px;
    border: 1px solid var(--c-ink);
    border-radius: 50%;
    opacity: .45;
    transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .plp-card__slides li.is-on {
    background: var(--c-ink);
    opacity: 1;
  }
}

/* Ürün fotoğrafı gelene kadarki yer tutucu (index.php'deki dille aynı). */
.plp-card__media--empty::after {
  content: 'Görsel yakında';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #b6b8ba;
}

.plp-card__body { padding: 12px 16px 28px; }
.plp-card__name {
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.plp-card__price { margin-top: 6px; font-size: var(--fs-body); line-height: 18px; }

/* ==========================================================================
   İNDİRİMLİ FİYAT — üstü çizili eski fiyat + geçerli fiyat
   Sitenin dili tek renk: indirim KIRMIZIYLA bağırmıyor, eski fiyat sönük
   griye çekilip üstü çiziliyor, geçerli fiyat normal mürekkep renginde
   kalıyor. Ölçüler değişmiyor — kart yüksekliği indirimle oynamasın.
   Fiyatın yazıldığı her yerde aynı: kart, ürün sayfası, istek listesi.
   ========================================================================== */
.fiyat-eski {
  margin-right: 8px;
  color: var(--c-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.fiyat-yeni { color: var(--c-ink); }

/* Tükenmiş ürün: sepet düğmesi kapalı. Renk değil, DOYGUNLUK düşüyor —
   sitenin tek renkli dili bozulmasın. */
.pdp__cta.is-out,
.pdp__cta:disabled { background: #9a9a9a; cursor: not-allowed; }

.plp-card__colors {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.plp-card__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
}

.plp-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px;
  line-height: 0;
  transition: opacity var(--dur-fast) linear;
}
.plp-card__fav:hover { opacity: .6; }
.plp-card__fav svg {
  width: 22px; height: 22px;
  stroke-width: 1.4;
  fill: none;
  display: block;
}
.plp-card__fav.is-active svg { fill: currentColor; }

/* -------------------------------------------------- 4) boş durum / daha fazla / breadcrumb */
.plp-empty {
  padding: 72px var(--gutter-mobile);
  text-align: center;
  color: var(--c-muted);
}

.plp-more {
  display: flex;
  justify-content: center;
  padding: 48px var(--gutter-mobile) 56px;
}
.plp-more[hidden] { display: none; }

.plp-more__btn {
  position: relative;
  font-size: var(--fs-cta);
  line-height: 18px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* Alt çizgi ::after ile çizilir; hover'da sağa kayıp soldan geri gelir —
   sitedeki diğer CTA'larla (Yeni Gelenler, Keşfedin…) aynı hareket. */
.plp-more__btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.plp-more__btn:hover::after { animation: link-underline var(--dur-line) var(--ease); }

.plp-crumbs {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 20px var(--gutter-mobile);
}
.plp-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body);
}
.plp-crumbs__item + .plp-crumbs__item::before {
  content: '/';
  margin-right: 8px;
  color: var(--c-muted);
}
.plp-crumbs__item a:hover { opacity: .6; }
.plp-crumbs__item[aria-current="page"] span { color: var(--c-muted); }

/* -------------------------------------------------- masaüstü */
@media (min-width: 1024px){
  .plp { --plp-top: var(--header-h); --plp-bar-h: 48px; }

  /* Tek satır: başlık solda mutlak, alt kategoriler ortada. */
  .plp-bar { display: flex; align-items: stretch; justify-content: center; }
  .plp-bar__title {
    position: absolute;
    left: var(--header-pad);
    top: 0; bottom: 0;
    height: auto;
    padding: 0;
    font-size: 15px;
    line-height: 1.2;
  }
  .plp-subnav { height: auto; flex: 0 1 auto; min-width: 0; }
  .plp-subnav__list { gap: 28px; padding: 0 var(--header-pad); }

  .plp-tools { padding: 0 var(--header-pad); }
  .plp-sort__value { display: inline; }

  .plp-grid { grid-template-columns: repeat(4, 1fr); }
  .plp-card__body { padding: 16px 20px 36px; }
  .plp-card__fav { top: 12px; right: 12px; }

  .plp-empty { padding: 96px var(--header-pad); }
  .plp-more  { padding: 56px var(--header-pad) 72px; }
  .plp-crumbs { padding: 22px var(--header-pad); }
}

/* ==========================================================================
   FİLTRE ÇEKMECESİ — Prada "filter-alt-drawer" uyarlaması.
   Sağdan kayar; masaüstünde ekranın YARISINI kaplar (referans: lg:w-1/2),
   mobilde tam ekran. Seçenekte kutucuk YOK — seçilince yanında tik belirir
   ve etiketi koyulaşır. Renk/Malzeme iki sütun, beden tek satır.
   ========================================================================== */
.plp-filters {
  position: fixed;
  inset: 0;
  z-index: 30;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.plp-filters.is-open {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.plp-filters__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.plp-filters.is-open .plp-filters__scrim { opacity: .3; }

.plp-filters__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  color: var(--c-ink);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
}
.plp-filters.is-open .plp-filters__panel { transform: translateX(0); }

/* Mobilde alttan yukarı kayar (site deseni). */
@media (max-width: 767px){
  .plp-filters__panel { top: auto; bottom: 0; left: 0; transform: translateY(100%); }
  .plp-filters.is-open .plp-filters__panel { transform: translateY(0); }
}

/* --- üst şerit: solda "Filtreleri temizle", sağda kapat --- */
.plp-filters__top {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--gutter-mobile) 0;
}

.plp-filters__clear {
  position: relative;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.plp-filters__clear::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.55lh);
  height: 1px;
  background: currentColor;
}
.plp-filters__clear:hover:not(:disabled)::after {
  animation: link-underline var(--dur-line) var(--ease);
}
.plp-filters__clear:disabled { color: var(--c-muted); cursor: default; }
.plp-filters__clear:disabled::after { background: var(--c-line); }

.plp-filters__close {
  line-height: 0;
  transition: opacity var(--dur-fast) linear;
}
.plp-filters__close:hover { opacity: .6; }
.plp-filters__close svg { width: 22px; height: 22px; stroke-width: 1.6; display: block; }

.plp-filters__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* Üstteki "Filtreleri temizle" ile ilk grup arasında referanstaki nefes
     payı (~32px); grubun kendi 26px dolgusuyla toplam boşluğu verir. */
  padding: 32px var(--gutter-mobile);
}

/* Alt şerit — YALNIZCA MOBİLDE. Seçim yapılsın ya da yapılmasın, basınca
   çekmece kapanır ve o anki sonuç listesi görünür. */
.plp-filters__foot {
  flex: none;
  padding: 14px var(--gutter-mobile) 20px;
  border-top: 1px solid var(--c-line);
}
.plp-filters__cta {
  width: 100%;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) linear;
}
.plp-filters__cta:hover { opacity: .6; }

/* --- filtre grupları --- */
.plp-facet {
  border-bottom: 1px solid var(--c-line);
  /* Ayraç çizgisi panelin kenarlarına DEĞSİN: grup, gövdenin yatay
     dolgusunu negatif margin'le taşar, içeriği kendi dolgusuyla
     eski hizasında tutar. */
  margin: 0 calc(var(--gutter-mobile) * -1);
  padding: 26px var(--gutter-mobile);
}

/* Başlık satırı: mobilde akordeon düğmesi (sağda ok), masaüstünde düz başlık */
.plp-facet__head { margin: 0; }
.plp-facet__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.plp-facet__title {
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.plp-facet__chev { line-height: 0; transition: transform var(--dur-base) var(--ease); }
.plp-facet__chev svg { width: 18px; height: 18px; display: block; }
.plp-facet.is-open .plp-facet__chev { transform: rotate(180deg); }

.plp-facet__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}
.plp-facet.is-open .plp-facet__wrap { grid-template-rows: 1fr; }
.plp-facet__inner { overflow: hidden; }
/* seçili filtre sayısı — başlığın üst simgesi */
.plp-facet__count {
  margin-left: 3px;
  font-size: 10px;
  font-weight: var(--fw-regular);
}

.plp-facet__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
}

/* Renk ve Malzeme: iki sütun */
.plp-facet__list--color .plp-opt-row,
.plp-facet__list--mat .plp-opt-row { width: 100%; padding: 8px 0; }
@media (min-width: 640px){
  .plp-facet__list--color .plp-opt-row,
  .plp-facet__list--mat .plp-opt-row { width: 50%; }
}

/* Beden: yan yana tek satır */
.plp-facet__list--size { gap: 4px 28px; }
.plp-facet__list--size .plp-opt-row { padding: 8px 0; }

/* "Daha fazla göster" ile açılan fazlalık satırlar */
.plp-opt-row.is-extra { display: none; }
.plp-facet.is-expanded .plp-opt-row.is-extra { display: block; }

.plp-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 18px;
  cursor: pointer;
}
.plp-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.plp-opt__swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
}

.plp-opt__check {
  flex: none;
  width: 16px;
  line-height: 0;
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.plp-opt__check svg { width: 16px; height: 16px; stroke-width: 2; display: block; }

/* Seçenek adı — hover'da altı çizilir (çizgi ::after, kayma animasyonlu) */
.plp-opt__name { position: relative; }
.plp-opt__name::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
  opacity: 0;
}
.plp-opt:hover .plp-opt__name::after {
  opacity: 1;
  animation: link-underline var(--dur-line) var(--ease);
}

.plp-opt input:checked ~ .plp-opt__check { opacity: 1; }
.plp-opt input:checked ~ .plp-opt__name { font-weight: var(--fw-medium); }
.plp-opt input:focus-visible ~ .plp-opt__name {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

/* O anki seçimle sonuç vermeyecek seçenekler soluk ve tıklanamaz */
.plp-opt-row.is-disabled .plp-opt { cursor: default; color: var(--c-muted); }
.plp-opt-row.is-disabled .plp-opt__swatch { opacity: .4; }
.plp-opt-row.is-disabled .plp-opt:hover .plp-opt__name::after { opacity: 0; animation: none; }

.plp-facet__more {
  position: relative;
  margin-top: 12px;
  /* Alt çizgi ::after ile satırın 9px altına düşüyor; bu dolgu olmadan
     butonun kutusunun dışında kalıp .plp-facet__inner'ın overflow:hidden'ı
     tarafından kırpılıyor (çizgi hiç görünmüyordu). */
  padding-bottom: 4px;
  font-size: var(--fs-body);
  line-height: 18px;
}
.plp-facet__more::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.plp-facet__more:hover::after { animation: link-underline var(--dur-line) var(--ease); }

@media (min-width: 1024px){
  .plp-filters__panel { width: 50vw; }
  .plp-filters__top   { padding: 40px 40px 0; }
  .plp-filters__body  { padding: 20px 40px 40px; }
  .plp-filters__foot  { display: none; }
  .plp-facet          { margin: 0 -40px; padding: 30px 40px; }

  /* Masaüstünde gruplar her zaman açık, akordeon oku yok. */
  .plp-facet__wrap    { grid-template-rows: 1fr; }
  .plp-facet__chev    { display: none; }
  .plp-facet__toggle  { cursor: default; }
}

/* ==========================================================================
   ÜRÜN SAYFASI (PDP) — Prada "product-detail-page" uyarlaması.
   Masaüstünde iki sütun: solda akan görsel galerisi, sağda EKRANA YAPIŞIK
   bilgi paneli. Sol altta sabit nokta göstergesi (hangi görseldeysek dolu).
   MOBİLDE referans deseni: her görsel EKRANI KAPLAR, en altta yapışkan bir
   bilgi şeridi durur (.pdp-sheet); çekilince/dokununca bilgi paneline kayar.
   Görseller bitince zaten aynı panel görünür — iki yol, tek sonuç.
   ========================================================================== */
.pdp-page .header__container { border-bottom: 1px solid var(--c-line); }

.pdp {
  --pdp-top: var(--header-h-mobile);
  /* Mobil alt şeridin yüksekliği. Ürün adı iki satıra sarabildiği için gerçek
     değeri JS ölçüp buraya yazar; buradaki yalnızca ilk çizim için taban. */
  --pdp-peek: 150px;
  /* EKRAN YUKSEKLIGI — JS OLCUP YAZAR, `dvh` BILEREK KULLANILMIYOR.
     `100dvh` "dinamik" gorunum yuksekligi demek: telefonda adres cubugu
     kayarken gizlenince deger degisir. O an alti gorselin ALTISI DA boy
     degistiriyor, belge yuksekligi bir karede yuzlerce piksel oynuyor ve
     kaydirma ZIPLIYOR. Masaustu benzetiminde adres cubugu olmadigi icin
     bu hic gorunmuyordu — "PC'de calisiyor, telefonda bozuk" farkinin
     kaynagi buydu. Referans site de ayni sebeple kendi olctugu yuksekligi
     kullaniyor (`appheight` ozniteligi). Buradaki yalnizca ilk cizim icin
     taban; JS `resize`/yon degisiminde gunceller, kaydirmada ASLA. */
  --pdp-app-h: 100dvh;

  /* ÇEKMECENİN AÇILMA ORANI — 0 kapalı, 1 tam açık. Tek sürücü BU.
     JS galerinin kaydırma konumundan hesaplayıp yazar; panelin dönüşümü
     doğrudan buna bağlı. Eşik, hız, mesafe ölçüsü YOK. */
  --pdp-oran: 0;
  /* Kapalıdan tam açığa panelin kat edeceği yol. Tamamen CSS'ten türüyor,
     JS'in ölçmesine gerek yok. */
  --pdp-yol: calc(var(--pdp-app-h) - var(--pdp-top) - var(--pdp-peek));

  /* ⚠️ MOBİLDE SAYFA DEĞİL, GALERİ KAYAR.
     Referans sitedeki düzen bu: `.pdp` ekran boyunda SABİT bir kutu,
     içindeki galeri kendi kaydırma kutusu, panel de üstünde bağımsız bir
     katman. Böylece çekmecenin konumu tek bir sayının (galerinin
     `scrollTop`u) fonksiyonu oluyor — kullanıcı hangi fotoğrafta olursa
     olsun davranış aynı.
     Önerilerin ve footer'ın sayfası normal akışta, `.pdp`nin ALTINDA;
     oraya erişim etkilenmiyor. */
  position: relative;
  height: calc(var(--pdp-app-h) - var(--pdp-top));
  overflow: hidden;
}

/* -------------------------------------------------- 1) görsel galerisi */
/* Galeri KENDİ kaydırma kutusu. Fotoğraflarda parmak doğrudan tarayıcının
   kaydırmasını sürüyor: momentum, hız, hassasiyet bedava geliyor — bizim
   hesabımız yok. `overscroll-behavior` zinciri kesiyor ki galeri dibe
   gelince altındaki sayfa birlikte sıçramasın. */
.pdp__gallery {
  position: relative;
  height: calc(100% - var(--pdp-peek));
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* HAYALET BOŞLUK — referanstaki `phantomscroll` karşılığı.
   Son fotoğraftan sonra 1,5 ekran boyu BOŞ kaydırma alanı. Galeride
   gösterecek bir şeyi yok; tek işi son fotoğrafın ALTINA kaydırmaya yer
   açmak — çekmece o kaydırmayla açılıyor.

   ⚠️ BU YÜKSEKLİK ORANI BELİRLEMİYOR, geri öyle bağlamayın. Bir ara oran
   boşluğun TAMAMINA yayılmıştı: galeri 1,5 px kayarken panel yalnızca 1 px
   yükseliyordu (panelin yolu bir ekran, boşluk 1,5 ekran). Fotoğrafın alt
   kenarı panelin üst kenarından hızlı kaçtığı için aradan BEYAZ bir şerit
   görünüyordu. Artık çekmeceyi `TETIK` (urun.php, 40 px) açıyor: panel
   fotoğraftan hep hızlı yükseldiği için boşluk oluşamıyor. Buradaki 1,5
   ekran yalnızca parmağın savurabileceği momentum payı. */
.pdp__phantom { height: calc(1.5 * (var(--pdp-app-h) - var(--pdp-top) - var(--pdp-peek))); }

/* Kalp: sayfa kaydıkça görselle akmasın diye yapışkan; akışta yer kaplamaması
   için alt marjı negatif (ilk görselin üstüne biner). */
.pdp__fav {
  position: sticky;
  /* ⚠️ ÖLÇÜ GALERİNİN TEPESİNDEN, HEADER'DAN DEĞİL.
     Mobilde kaydıran kutu `.pdp__gallery` ve o kutu zaten header'ın altında
     başlıyor; buraya `--pdp-top` eklemek header payını İKİNCİ KEZ saymak
     olur ve kalp 20px yerine 72px aşağıda dururdu (referansta `top: 20px;
     right: 16px`). Masaüstünde kaydıran SAYFA ve header sabit olduğu için
     orada `--pdp-top` gerekli — aşağıdaki medya sorgusunda geri veriliyor. */
  top: 20px;
  z-index: 3;
  display: block;
  width: 24px;
  height: 24px;
  /* 20 (üst) + 24 (yükseklik) - 44 = 0 → akışta yer kaplamaz, görsele biner */
  margin: 20px 16px -44px auto;
  line-height: 0;
  color: var(--c-ink);
  transition: opacity var(--dur-fast) linear;
}
.pdp__fav:hover { opacity: .6; }
.pdp__fav svg { width: 24px; height: 24px; stroke-width: 1.5; display: block; }
.pdp__fav.is-active svg { fill: currentColor; }

.pdp-shot {
  position: relative;
  margin: 0;
  /* Mobilde tek görsel ekranı kaplar: başlık ve alt şerit dışında kalan alan.
     Masaüstünde bu iptal edilip kart oranına dönülür. */
  /* Galeri kutusunun TAMAMI — yani bir fotoğraf = bir ekran.
     ⚠️ `height: 100%` YAZMAYIN: fotoğraflar `[data-pdp-shots]` sarmalayıcısının
     içinde ve o sarmalayıcının yüksekliği `auto`; yüzde çözülemeyip fotoğraf
     469px gibi rastgele bir boya düşüyordu. Değer galeri kutusuyla birebir
     aynı: (.pdp yüksekliği) - (şerit). */
  height: calc(var(--pdp-app-h) - var(--pdp-top) - var(--pdp-peek));
  /* ⚠️ BU ZEMİN MOBİLDE GÖRÜNÜYOR ve süs değil. Kutu 4:5'ten uzun, görsel
     `contain` ile yerleştiği için ürünün ÜSTÜNDE ve ALTINDA birer şerit
     kalıyor; o şeritlerin rengi bu. Eskiden #f1f1f2 idi ve ürün
     fotoğraflarının kendi zemininden belirgin biçimde açık kaldığı için
     beyaz bant gibi görünüyordu.

     DEĞER ÖLÇÜMLE SEÇİLDİ, göz kararı değil: 295 ürün fotoğrafının köşe
     renkleri tarandı, zeminler #dd–#e5 arasında toplanıyor ve ortancası
     #e3e3e3. Bir ara #ececec denendi ama o, fotoğrafların NEREDEYSE HEPSİNDEN
     AÇIK olduğu için şerit yine açık bir çerçeve gibi görünüyordu.

     ⚠️ BU YALNIZCA YEDEK RENK. Asıl renk çalışma anında FOTOĞRAFIN
     KENDİSİNDEN okunuyor (urun.php → zeminOku/zeminUygula): görsel yüklenince
     kenar pikselleri sayılıp şeride o renk veriliyor. Buradaki değer yalnızca
     görsel henüz yüklenmemişken ve tuval okunamadığında görünür.
     Tek bir sabit renk yeterli olamazdı: zeminler #dd–#e5 arasına dağılıyor
     ve mağaza her hafta yeni fotoğraf yüklüyor.

     Sitedeki diğer #f1f1f2 kullanımları (sepet, form alanları, görsel yer
     tutucuları) BİLEREK dokunulmadı — onlar ürün fotoğrafının yanında
     durmuyor. */
  background: #e3e3e3;
  overflow: hidden;
}
/* Prada'da görseller arasında ince beyaz ayraç var */
.pdp-shot + .pdp-shot { border-top: 2px solid var(--c-paper); }
/* Mobil çerçeve 4/5'ten uzun; `cover` giysinin yanlarını kırpardı, bu yüzden
   `contain` + kutuyla aynı zemin rengi. Masaüstünde yine `cover`. */
.pdp-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pdp-shot--empty::after {
  content: 'Görsel yakında';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #b6b8ba;
}

/* Nokta göstergesi — ekranın sol altında sabit, galeri görünürken açılır. */
/* Noktalar GALERİYE bağlıdır, ekrana değil. Çapa sıfır yükseklikli ve
   yapışkan: kaydırırken ekranın altında (mobilde şeridin üstünde) kalır,
   galerinin alt kenarı yukarı çıkınca onunla birlikte yükselip orada durur.
   Eskiden `.pdp-dots` doğrudan `position: fixed` idi; galeri bittikten sonra
   da ekranın altında asılı kalıp footer'ın üstüne biniyordu. */
.pdp-dots-anchor {
  position: sticky;
  bottom: var(--pdp-peek);
  z-index: 11;                    /* --z-header (12) altında */
  height: 0;                      /* akışta yer kaplamaz */
}
.pdp-dots {
  position: absolute;
  left: 20px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) linear, visibility 0s linear var(--dur-base);
}
.pdp-dots.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) linear, visibility 0s linear 0s;
}
.pdp-dots__dot {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: none;
  transition: background var(--dur-fast) linear;
}
.pdp-dots__dot.is-on { background: var(--c-ink); }


/* ⚠️ KAYDIRMA YAPIŞMASI (scroll-snap) BİLEREK YOK — geri eklemeyin.
   Eskiden `html:has(.pdp-page) { scroll-snap-type: y proximity }` vardı.
   Gerçek telefonda momentumlu bırakışta yapışma, çekmecenin yükselişini
   yolun ortasında kapıp en yakın GÖRSELE geri çekiyordu; panel ekranı
   kaplamadan yarıda kalıyordu. Bunu telafi etmek için sırayla
   `is-pdp-gliding`, `scroll-margin-top` ve "panele scroll-snap-align KOYMA"
   notu eklenmişti — üçü de aynı yaranın pansumanıydı.
   Referans sitenin galerisinde de `scroll-snap-type: none`. Görselden
   görsele geçiş noktalara (pdp-dots) `scrollIntoView` ile bağlı, o yeterli. */

/* -------------------------------------------------- 2) bilgi paneli
   MOBİLDE PANELİN KENDİSİ ÇEKMECEDİR. Ayrı bir "şerit" öğesi YOK — bir ara
   `position: fixed` bir şerit denendi, kaydırırken kıpırdamadığı için sürükleme
   hissi vermedi ve panelin yükselişini de örttü.
   Şimdiki düzen: panel akışta, galerinin hemen ardında. `position: sticky` +
   NEGATİF `bottom` ile ekranın altına yapışır; negatif değer sayesinde yalnızca
   tepesi (tutamak + ad + fiyat + düğme) görünür, gerisi ekranın altında bekler.
   Parmakla kaydırınca panel doğal olarak yükselir — yani çekmece parmakla
   birebir hareket eder — ve galerinin sonuna gelindiğinde yapışkanlık kendi
   kendine çözülüp panel akışa karışır. Tek mekanizma, iki yol. */
.pdp__panel {
  /* GALERİNİN HEMEN ALTINDA DURAN BAĞIMSIZ KATMAN.
     Artık akışta değil, yapışkan da değil: konumunu YALNIZCA `--pdp-oran`
     belirliyor. Kapalıyken (oran 0) tepesi ekranın altından `--pdp-peek`
     kadar yukarıda; tam açıkken (oran 1) `.pdp` kutusunu tam kaplıyor.
     Eski düzende panel `position: sticky` ile akıştaydı ve konumu sayfanın
     kaydırmasına, yapışma noktasına, `--pdp-panel-h` ölçümüne ve `dvh`ye
     aynı anda bağlıydı; biri şaşınca çekmece bozuluyordu. */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - var(--pdp-peek));
  height: calc(var(--pdp-app-h) - var(--pdp-top));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  z-index: 2;                       /* görsellerin üstünde */
  background: var(--c-paper);
  padding: 16px var(--gutter-mobile) 8px;

  /* Tek bağ: oran ne ise panel oradadır. Geçiş (transition) BİLEREK yok —
     parmak sürüklerken oran her karede yazılıyor, geçiş olsa panel parmağı
     geriden takip ederdi. Bırakınca yumuşama, galerinin kendi yumuşak
     kaydırmasından geliyor. */
  transform: translateY(calc(-1 * var(--pdp-yol) * var(--pdp-oran)));

  /* ⚠️ BURADA `touch-action: none` DOĞRU — eski koddaki hatayla karıştırmayın.
     Panel bir kaydırma kutusu DEĞİL; üzerindeki sürüklemeyi biz galerinin
     `scrollTop`una çeviriyoruz, yani sürüklemenin sahibi tamamen biziz ve
     tarayıcıyla yarışacak bir şey yok. Eskiden bu satır AKIŞTAKİ yapışkan
     panelin üstündeydi ve sayfanın kendi kaydırmasını kapatıyordu; asıl
     sorun oydu. */
  touch-action: none;
}

/* Sürükleme BİTİNCE panel hedefe süzülerek gitsin (referanstaki
   `.bottomsheet` da 0.3s ile süzülüyor). JS bu sınıfı yalnızca bırakma anında
   ~320ms takıyor; sürüklerken KAPALI, yoksa panel parmağı geriden takip
   ederdi. */
.pdp__panel.is-animating { transition: transform .3s var(--ease); }

/* ⚠️ AÇIKKEN JESTİ TARAYICIYA GERİ VERİYORUZ — silmeyin.
   Kapalıyken `touch-action: none` doğru: çekmeceyi biz sürüyoruz. Ama panel
   açıldığında içi normal bir sayfa oluyor (ürün bilgileri + öneriler +
   footer). Jest bizde kalırsa momentum yok, önerilerin YATAY karuseli hiç
   kaymıyor, footer akordeonları zor açılıyor. Açıkken kaydırma tarayıcının;
   bize yalnızca içerik tepedeyken yapılan aşağı çekiş (kapatma jesti) kalıyor,
   onu da JS `panel.scrollTop === 0` şartıyla üstleniyor. */
.pdp__panel.is-open { touch-action: auto; }
/* Kapalıyken görünen düğme; panel yukarı çekilince kapanıp yerini asıl sepet
   düğmesine bırakır (referansta da öyle). */
.pdp__peek-cta {
  overflow: hidden;
  max-height: 60px;
  margin-top: 14px;
  transition: max-height var(--dur-base) var(--ease),
              margin-top var(--dur-base) var(--ease),
              opacity var(--dur-fast) linear;
}
.pdp__panel.is-open .pdp__peek-cta {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
}

/* ÇEKMECEYE TAŞINAN ALT BÖLÜMLER (öneriler, sayfa yolu, footer).
   ⚠️ Mobilde bunlar JS ile `.pdp__panel`in içine alınıyor; gerekçesi
   urun.php'deki `altTasi` yorumunda. Panelin yan dolgusu var, bu üçü ise
   sayfa genişliğinde duruyordu — negatif marj o dolguyu geri alıyor ki
   taşınmadan önceki görünümleri birebir korunsun. Masaüstünde bu seçiciler
   hiç eşleşmez: öğeler orada panelin çocuğu değil. */
.pdp__panel > .ymal,
.pdp__panel > .plp-crumbs,
.pdp__panel > .footer {
  margin-left: calc(-1 * var(--gutter-mobile));
  margin-right: calc(-1 * var(--gutter-mobile));
}
/* Ürün bağlantılarıyla öneriler arasına nefes payı (referansta da var). */
.pdp__panel > .ymal { margin-top: 34px; }
/* Footer panelin 8px'lik alt dolgusunu yutar, altında boşluk kalmasın. */
.pdp__panel > .footer { margin-bottom: -8px; }
/* ÇEKMECE TUTAMAĞI — referanstaki `drag-handle-container` karşılığı.
   ⚠️ Eskiden `.pdp__panel::before` ile çizilen bir SÜS çizgisiydi; sözde öğe
   olduğu için dokunmaya cevap veremiyordu. Şimdi gerçek bir düğme: hem
   sürüklemenin başladığı yeri gösteriyor hem de tıklanınca çekmeceyi açıyor.
   Dokunma alanı görünen çizgiden çok daha büyük (44×2 çizgi, ~40px kutu):
   parmakla isabet ettirmek için gerekiyor. */
.pdp__handle {
  display: block;
  width: 100%;
  padding: 4px 0 16px;
  margin: 0 0 6px;
  background: none;
  border: 0;
  line-height: 0;
  cursor: pointer;
}
.pdp__handle span {
  display: block;
  width: 44px;
  height: 2px;
  margin: 0 auto;
  background: var(--c-ink);
}

.pdp__name {
  font-size: 17px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
}
.pdp__price {
  margin-top: 8px;
  font-size: var(--fs-body);
  line-height: 18px;
}

/* Fiyat ile renk arasında ayraç çizgi (referansta da var). */
.pdp__color {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-body);
  line-height: 18px;
}
.pdp__color-label { font-weight: var(--fw-medium); }
.pdp__color-name { margin-left: 8px; }

.pdp__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.pdp__swatch {
  display: block;
  width: 26px;
  height: 26px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 50%;
}
.pdp__swatch.is-on { border-color: var(--c-muted); }
.pdp__swatch-dot {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--c-line);
  border-radius: 50%;
}

/* Beden bölümü. MOBİLDE alt alta: tam genişlikte seçim kutusu, altında altı
   çizili "Beden tablosu" bağlantısı (referanstaki gibi). Masaüstünde yan yana
   iki kutuya döner. */
.pdp__size {
  margin-top: 26px;
}
/* ŞAL/EŞARP GİBİ TEK BEDENLİ ÜRÜNLERDE BEDEN SATIRI HİÇ BASILMAZ.
   urun.php satırı `hidden` yapıyor ama AŞAĞIDA masaüstü için
   `.pdp__size { display: flex }` var ve yazar kuralı olduğu için
   tarayıcının `[hidden] { display: none }` kuralını EZİYOR — satır
   gizlenmiş sayılırken ekranda durmaya devam ediyordu. (Aynı tuzak
   .info-card--note ve .contact-form__error için de çözülmüştü.) */
.pdp__size[hidden] { display: none; }
.pdp-select {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  font-size: var(--fs-body);
}
.pdp-select__text { flex: 1 1 auto; text-align: left; }
.pdp-select__chev { flex: none; line-height: 0; }
.pdp-select__chev svg { width: 18px; height: 18px; display: block; }
.pdp-select:hover { background: #f6f6f7; }
.pdp__size-guide {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--fs-body);
  line-height: 18px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity var(--dur-fast) linear;
}
.pdp__size-guide:hover { opacity: .6; }

.pdp__error {
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  color: #b3261e;
}
.pdp__error[hidden] { display: none; }

.pdp__cta {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  padding: 0 20px;
  /* Tam siyah — site geneli --c-ink (#191b1c) griye çalıyor, sepet butonu düz siyah. */
  background: #000;
  color: var(--c-paper);
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) linear;
}
.pdp__cta:hover { opacity: .8; }
.pdp__cta.is-done { background: #2f6b4f; }

.pdp__links {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.pdp__links li + li { margin-top: 22px; }
.pdp__link {
  position: relative;
  font-size: var(--fs-body);
  line-height: 18px;
}
.pdp__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
  /* Mobilde bağlantılar HEP çizili (referansta öyle); masaüstünde çizgi
     yalnızca imleç üstündeyken belirir. */
  opacity: 1;
}
.pdp__link:hover::after {
  opacity: 1;
  animation: link-underline var(--dur-line) var(--ease);
}

.pdp__missing {
  padding: 96px var(--gutter-mobile);
  text-align: center;
  font-size: var(--fs-body);
}

/* -------------------------------------------------- 3) öneri karuseli */
.ymal {
  border-top: 1px solid var(--c-line);
  padding: 40px 0 0;
}
.ymal[hidden] { display: none; }

.ymal__title {
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  text-align: center;
}

.ymal__viewport { position: relative; }

.ymal__track {
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ymal__track::-webkit-scrollbar { display: none; }

.ymal__item {
  flex: 0 0 72%;
  scroll-snap-align: start;
}

.ymal__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  /* Yalnızca ok — daire/zemin yok, tıklama alanı için ölçü korunuyor. */
  width: 40px;
  height: 40px;
  color: var(--c-ink);
  line-height: 0;
  transition: opacity var(--dur-fast) linear;
}
.ymal__nav:hover { opacity: .6; }
.ymal__nav svg { width: 20px; height: 20px; margin: 0 auto; display: block; }
.ymal__nav--prev { left: 8px; }
.ymal__nav--next { right: 8px; }

/* --- Öneri kartlarında KART İÇİ fotoğraf kaydırması kapalı ---------------
   Kart içi galeri KATALOG için: orada parmakla ikinci fotoğrafa geçiliyor
   (.plp-card__slider + scroll-snap). Burada aynı kart bir KARUSELİN içinde
   duruyor ve yatay hareketin karuseli kaydırması gerekiyor — ama kartın kendi
   slider'ı `overscroll-behavior-x: contain` ile o hareketi yutuyor, karusel
   yerinde kalıp fotoğraf değişiyordu.

   İkinci fotoğraf yalnızca DAR EKRANDA gizleniyor; masaüstündeki "üzerine
   gelince ikinci fotoğrafa geçiş" olduğu gibi duruyor, çünkü kural mobil
   media sorgusunun içinde. Katalog sayfaları da etkilenmiyor — seçici
   `.ymal` ile sınırlı. */
@media (max-width: 767px){
  .ymal .plp-card__slider {
    display: block;
    /* `hidden` DEĞİL, `visible`: `hidden` öğeyi hâlâ bir KAYDIRMA KABI
       yapıyor. Kabın kendisi kayamıyor ama tabandaki
       `overscroll-behavior-x: contain` hareketin üst öğeye geçmesini de
       engelliyor — parmak görselin üzerinde ölüyor, karusel kımıldamıyordu.
       (Fiyat/ad alanı slider'ın dışında olduğu için orası çalışıyordu.)
       `visible` ile öğe kaydırma kabı olmaktan çıkıyor, dokunuş doğrudan
       karusele gidiyor. Taşma riski yok: üstteki .plp-card__media zaten
       `overflow: hidden` ve ikinci fotoğraf burada gizli. */
    overflow: visible;
    scroll-snap-type: none;
  }
  .ymal .plp-card__media-alt { display: none; }
}

/* -------------------------------------------------- 4) bilgi çekmecesi */
.pdrawer {
  position: fixed;
  inset: 0;
  z-index: 30;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.pdrawer.is-open {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.pdrawer__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.pdrawer.is-open .pdrawer__scrim { opacity: .3; }

.pdrawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  color: var(--c-ink);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
}
.pdrawer.is-open .pdrawer__panel { transform: translateX(0); }

@media (max-width: 767px){
  .pdrawer__panel { top: auto; bottom: 0; left: 0; transform: translateY(100%); }
  .pdrawer.is-open .pdrawer__panel { transform: translateY(0); }
}

.pdrawer__top {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 20px var(--gutter-mobile) 0;
}
.pdrawer__close { line-height: 0; transition: opacity var(--dur-fast) linear; }
.pdrawer__close:hover { opacity: .6; }
.pdrawer__close svg { width: 22px; height: 22px; stroke-width: 1.6; display: block; }

.pdrawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px var(--gutter-mobile) 40px;
}

/* Başlık satırı: solda başlık, sağda isteğe bağlı eylem ("Beden tablosu") */
.pdrawer__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.pdrawer__title {
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.pdrawer__action {
  flex: none;
  font-size: var(--fs-body);
  line-height: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) linear;
}
.pdrawer__action:hover { opacity: .6; }

/* --- beden seçim listesi --- */
.psize {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.psize__row {
  border-bottom: 1px solid var(--c-line);
  transition: border-color var(--dur-fast) linear;
}
/* Üzerine gelince solma yok — yalnızca alt çizgi siyaha döner. */
.psize__row:not(.is-out):hover { border-bottom-color: var(--c-ink); }
.psize__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: left;
}

/* Üründe bulunmayan bedenler */
.psize__row.is-out .psize__btn {
  color: var(--c-muted);
  font-weight: var(--fw-regular);
  cursor: default;
}
.psize__out { font-size: 12px; }

.psize__tick { line-height: 0; opacity: 0; }
.psize__tick svg { width: 16px; height: 16px; stroke-width: 2; display: block; }
.psize__btn[aria-checked="true"] .psize__tick { opacity: 1; }

.psize__note { margin-top: 20px; }
.pdrawer__sub {
  margin: 28px 0 10px;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.pdrawer__text {
  font-size: var(--fs-body);
  line-height: 22px;
}
.pdrawer__text + .pdrawer__text { margin-top: 10px; }
.pdrawer__text a { text-decoration: underline; }

.pdrawer__list {
  margin: 12px 0 0 20px;
  padding: 0;
  font-size: var(--fs-body);
  line-height: 22px;
}
.pdrawer__note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-muted);
}
.pdrawer__note a { text-decoration: underline; }

.pdrawer__table-wrap { margin-top: 16px; overflow-x: auto; }
.pdrawer__table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.pdrawer__table th,
.pdrawer__table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}
.pdrawer__table th { font-weight: var(--fw-medium); }

.pdrawer__store { margin-top: 18px; }

/* -------------------------------------------------- masaüstü */
@media (min-width: 1024px){
  .pdp {
    --pdp-top: var(--header-h);
    /* Masaüstünde alt şerit yok: noktalar galerinin dibine kadar iner. */
    --pdp-peek: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Masaüstünde mobil deseni TAMAMEN geri al: sayfa normal kayar, galeri
     kendi kutusu değil, panel yine ekrana yapışan sütun. */
  .pdp { position: static; height: auto; overflow: visible; }
  .pdp__gallery { height: auto; overflow: visible; }
  .pdp__phantom { display: none; }        /* hayalet boşluk yalnızca mobile ait */

  .pdp-shot { height: auto; aspect-ratio: var(--card-ratio); }
  .pdp-shot img { object-fit: cover; }
  .pdp__peek-cta { display: none; }

  /* Panel ekranda kalır; görseller yanından akar. */
  /* Panel içeriği sütunun ORTASINDA durur (referansta da öyle): geniş bir
     blok, iki yanında eşit boşluk. Dar masaüstlerinde --header-pad taban. */
  .pdp__panel {
    position: sticky;
    top: var(--header-h);
    left: auto;
    right: auto;
    z-index: auto;
    transform: none;                 /* çekmece dönüşümü yalnızca mobilde */
    touch-action: auto;
    overflow: visible;
    height: calc(100dvh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--header-pad);
  }
  /* Tutamak yalnızca mobil çekmeceye ait. */
  .pdp__handle { display: none; }

  /* Masaüstünde galeri kaydırma kutusu değil: kaydıran sayfa, header ise
     sabit. Kalbin yapışma çizgisi header'ın altı olmalı, yoksa kaydırırken
     başlığın arkasına giriyor. Mobil değerler (20px) burada geçersiz. */
  .pdp__fav {
    top: calc(var(--pdp-top) + 16px);
    margin: 16px 16px -40px auto;
  }

  /* Beden satırı masaüstünde yan yana: solda kutu, sağda çerçeveli düğme. */
  .pdp__size { display: flex; }
  .pdp__size-guide {
    flex: none;
    min-height: 46px;
    margin-top: 0;
    padding: 0 18px;
    border: 1px solid var(--c-line);
    border-left: 0;
    text-decoration: none;
  }
  /* İmleçle GRİ DOLGU YOK (kullanıcı isteği): yalnızca kutu kenarı siyaha
     döner. Taban kuraldaki `background: #f6f6f7` burada iptal ediliyor. */
  .pdp-select,
  .pdp__size-guide { transition: border-color var(--dur-fast) linear; }
  .pdp-select:hover,
  .pdp__size-guide:hover {
    background: none;
    opacity: 1;
    border-color: var(--c-ink);
  }
  /* "Beden tablosu"nun sol kenarlığı yok (border-left: 0); aradaki çizgi
     aslında soldaki kutunun SAĞ kenarı. Sağdaki düğmenin üstündeyken onu da
     karartmazsak çerçeve üç kenarlı görünüyor. */
  .pdp__size:has(.pdp__size-guide:hover) .pdp-select { border-right-color: var(--c-ink); }

  /* Fiyat ile "Renk" arasındaki ayraç yalnızca mobil çekmeceye ait; panelin
     ekranda durduğu masaüstünde bölmeye gerek yok. */
  .pdp__color { border-top: 0; padding-top: 0; }

  /* Bağlantılarda çizgi masaüstünde yalnızca imleçle belirir. */
  .pdp__link::after { opacity: 0; }
  .pdp__panel-inner { width: 100%; max-width: 680px; }
  .pdp__links li + li { margin-top: 20px; }

  .pdp__name { font-size: 20px; line-height: 24px; }
  .pdp-dots { left: 26px; bottom: 28px; }
  /* Çapanın kendisi mobil şerit yüksekliğine bağlıydı; masaüstünde şerit yok. */
  .pdp-dots-anchor { bottom: 0; }

  .ymal { padding-top: 56px; }
  .ymal__title { margin-bottom: 32px; }
  .ymal__item { flex: 0 0 33.3333%; }
  .ymal__nav { display: block; }

  .pdrawer__panel { width: 50vw; }
  .pdrawer__top  { padding: 32px 40px 0; }
  .pdrawer__body { padding: 8px 40px 48px; }
}


/* ==========================================================================
   MİNİ SEPET (urun.php) — "Alışveriş sepetine ekle" sonrası açılan çekmece.
   Referans deseni: masaüstünde sağdan SABİT 500px genişlikte tam boy panel
   (bilgi çekmecesinin 50vw'sinden farklı, bilerek); mobilde alttan İÇERİK
   BOYUNDA bir sayfa — liste kısaysa çekmece de kısa kalır, referansta da öyle.
   Sepetin arka ucu YOK: liste yalnızca sayfa açık kaldığı sürece yaşar.
   ========================================================================== */
.mcart {
  position: fixed;
  inset: 0;
  z-index: 31;                      /* .pdrawer (30) üstünde */
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.mcart.is-open { visibility: visible; transition: visibility 0s linear 0s; }

.mcart__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.mcart.is-open .mcart__scrim { opacity: .3; }

.mcart__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  /* Uzun listede ekranı tümüyle kaplamasın; kısa listede kendi boyunda kalır. */
  max-height: 90dvh;
  background: var(--c-paper);
  color: var(--c-ink);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease);
}
.mcart.is-open .mcart__panel { transform: translateY(0); }

.mcart__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--gutter-mobile) 14px;
}
.mcart__title {
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
/* Başlık iki dilli değil, iki BAĞLAMLI: mobilde her zaman "Alışveriş
   sepetine eklendi", masaüstünde "Seçtikleriniz" (referans böyle). */
.mcart__title-desk { display: none; }
.mcart__title-mob  { display: inline; }

.mcart__close { line-height: 0; transition: opacity var(--dur-fast) linear; }
.mcart__close:hover { opacity: .6; }
.mcart__close svg { width: 22px; height: 22px; stroke-width: 1.6; display: block; }

/* MOBİLDE ÜRÜNLER ALT ALTA DEĞİL, YAN YANA KAYAN BİR ŞERİT (referans):
   bir ürün tam görünür, parmakla yana kaydırınca diğeri gelir. Masaüstünde
   klasik dikey liste (aşağıdaki blokta geri alınıyor). */
.mcart__list {
  flex: 1 1 auto;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Yapışma noktası kutunun İÇ boşluğunu hesaba katsın; yoksa ilk ürün
     16px sola kayıp görselin sol kenarı ekrana yapışıyor. */
  scroll-padding-left: var(--gutter-mobile);
  overscroll-behavior-x: contain;
  margin: 0;
  padding: 0 var(--gutter-mobile);
  list-style: none;
  /* Kaydırma çubuğu gizli — şeridi parmak sürükler. */
  scrollbar-width: none;
}
.mcart__list::-webkit-scrollbar { display: none; }
/* Boş sepet bloğu — yalnızca açıklama metni.
   Metin ve ölçüler sepet SAYFASINDAKİ karşılığıyla aynı (.cart-empty__text:
   14px/20px). Önceden tek satırlık "Alışveriş sepetiniz boş" yazıyordu ve
   koca panelin ortasında tek başına duruyordu.

   Sayfadaki karşılığında bir de "Alışverişe devam edin" düğmesi var; burada
   YOK — çekmece gezilen sayfanın üstünde açıldığı için kapatma (X + karartma)
   zaten çıkış yolu, ayrı bir düğme fazlalık olur. */
.mcart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0 var(--gutter-mobile);
  text-align: center;
}
/* Tipografi İSTEK LİSTESİNİN boş metninden birebir (.edrawer__message):
   15px / 1.6 / 340px. Buradaki değerler 14px ve 20px'ti; iki panel yan yana
   konunca aynı işi yapan iki yazı farklı boyda görünüyordu. Renk, ağırlık,
   harf aralığı ve ortalama zaten aynıydı, yalnızca bu üçü ayrışıyordu. */
.mcart__empty-text {
  margin: 0 auto;
  max-width: 340px;
  font-size: 15px;
  line-height: 1.6;
}
/* Sepet boşken: başlık yok, yalnızca kapatma düğmesi kalır; mesaj panelin
   ortasında durur (referans). Liste kaydırma davranışı da kapanır.

   ÖLÇÜLER İSTEK LİSTESİNİN BOŞ ÇEKMECESİNDEN (.edrawer) ALINDI. İki panel
   aynı işi yapıyor ama farklı boydaydı: mobilde sepet 294px, istek listesi
   256px ölçüldü. Sayı uydurmadım, edrawer'ın kendi değerlerini kullandım —
   üst şerit 56px + gövde 160px + alt boşluk 40px = 256px.
   (Masaüstünde ikisi de zaten 500×100dvh; orada bir şey değişmiyor.) */
.mcart.is-empty .mcart__title { display: none; }

/* X SAĞA. Başlık gizlenince `justify-content: space-between` tek kalan
   çocuğu (kapatma düğmesi) SOLA yaslıyordu; dolu sepette başlık solda,
   X sağda olduğu için sorun yalnızca boş durumda görünüyordu. İstek
   listesinde X her zaman sağda — aynı hizaya getiriliyor. */
.mcart.is-empty .mcart__head {
  justify-content: flex-end;
  padding: 18px var(--gutter-mobile) 16px;   /* toplam 56px: edrawer ile aynı */
}

.mcart.is-empty .mcart__list {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;        /* edrawer__body ile aynı */
  overflow: hidden;
  padding: 0;
}
.mcart.is-empty .mcart__list > li { width: 100%; }
.mcart.is-empty .mcart__panel { padding-bottom: 40px; }   /* edrawer ile aynı */

.mcart-item {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
  /* Ürün şeridin genişliğini kaplar; bir sonraki ürün kenardan hafif görünür
     ki kaydırılabildiği anlaşılsın. */
  flex: 0 0 calc(100% - 36px);
  scroll-snap-align: start;
}

.mcart-item__media {
  position: relative;
  flex: none;
  width: 96px;
  height: 120px;
  background: #f1f1f2;
  overflow: hidden;
}
.mcart-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ürün fotoğrafı gelene kadarki yer tutucu (kart ve galerideki dille aynı). */
.mcart-item__media--empty::after {
  content: 'Görsel yakında';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: #b6b8ba;
}

.mcart-item__text { min-width: 0; flex: 1 1 auto; }
.mcart-item__name {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.mcart-item__meta { margin: 4px 0 0; font-size: 13px; line-height: 17px; }
.mcart-item__price { margin: 10px 0 0; font-size: var(--fs-body); line-height: 18px; }
/* Alt çizgi native DEĞİL, ::after ile çizilir: imleç üzerine gelince çizgi
   sağa doğru silinip soldan yeniden gelir (site genelindeki `link-underline`
   deseni — "Yeni Gelenler", "Ürün detayları" vb. ile aynı). Griye solma yok. */
.mcart-item__remove {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 17px;
  text-decoration: none;
}
.mcart-item__remove::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.mcart-item__remove:hover::after { animation: link-underline var(--dur-line) var(--ease); }

.mcart__foot {
  flex: none;
  border-top: 1px solid var(--c-line);
  padding: 16px var(--gutter-mobile) 20px;
}
.mcart__foot[hidden] { display: none; }
.mcart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  /* Referansta kalın; bu projede 700 ağırlık yok, vurgu punto ile veriliyor. */
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
}
.mcart__btn {
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) linear;
}
.mcart__btn {
  /* "Alışveriş sepetine git" bir bağlantı, "Ödemeye geçin" düğme — ikisi de
     aynı kutuyu kullansın diye inline-flex + ortalama. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.mcart__btn + .mcart__btn { margin-top: 10px; }
.mcart__btn:hover { opacity: .8; }
.mcart__btn--ghost { border: 1px solid #000; background: none; color: #000; }
.mcart__btn--solid { background: #000; color: var(--c-paper); }

/* Sepet ve ödeme adımları henüz yok; düğmeler sessizce ölü kalmasın diye
   tıklanınca bu not beliriyor. WooCommerce bağlanınca kaldırılacak. */
.mcart__soon {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: #6b6d6f;
}
.mcart__soon[hidden] { display: none; }

@media (min-width: 1024px){
  .mcart__panel {
    top: 0;
    left: auto;
    width: 500px;
    height: 100dvh;
    max-height: none;
    transform: translateX(100%);
  }
  .mcart.is-open .mcart__panel { transform: translateX(0); }

  .mcart__title-desk { display: inline; }
  .mcart__title-mob  { display: none; }

  .mcart__head { padding: 26px 20px 20px; }
  /* Masaüstünde şerit değil, dikey liste. */
  .mcart__list {
    display: block;
    overflow-x: visible;
    overflow-y: auto;
    scroll-snap-type: none;
    padding: 0 20px;
  }
  .mcart-item { flex: none; }
  .mcart-item + .mcart-item { padding-top: 20px; border-top: 1px solid var(--c-line); }
  .mcart__empty { padding: 0 20px; }
  .mcart__foot { padding: 20px; }
  .mcart-item__media { width: 120px; height: 150px; }
  .mcart-item__text { padding-left: 8px; }
}


/* ==========================================================================
   SEPET SAYFASI (sepet.php) — referans deseni: gri sayfa zemini üzerinde
   beyaz kartlar. Masaüstünde solda ürünler / sağda özet, mobilde tek sütun.
   Alt bilgi tam site footer'ı DEĞİL, tek satırlık sade bir şerit.
   ========================================================================== */
.cart-page { background: #f1f1f2; }
/* Header'ın altındaki ince ayraç — diğer sayfa tipleriyle aynı kalıp
   (.plp-page, .pdp-page, .help-page ...); sepette eksikti. */
.cart-page .header__container { border-bottom: 1px solid var(--c-line); }

/* Başlıktaki çanta rozeti (sepet.js basar). */
.header__action[href="sepet.php"] { position: relative; }
.header__badge {
  position: absolute;
  right: -7px;
  bottom: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
  opacity: 0;

  /* ROZET İKONUN TERSİ. Sepet simgesi header'ın rengini alıyor
     (`.header__container` → `color`); rozet de her durumda onun ZIDDI olmalı,
     yoksa ikonun içinde okunmaz bir leke kalıyor.

     Varsayılan = hero üzerindeki ŞEFFAF header: simge beyaz, dolayısıyla
     rozet BEYAZ daire + SİYAH rakam. Önceden burada da siyah daire/beyaz
     rakam vardı; beyaz simgenin üstünde koyu bir nokta gibi duruyordu.

     Renk geçişi header'ınkiyle aynı süre ve eğri: kaydırırken rozet
     simgeyle birlikte dönsün, bir adım geriden gelmesin. */
  background: var(--c-paper);
  color: var(--c-ink);
  transition:
    opacity          var(--dur-fast) linear,
    background-color var(--dur-fast) ease-in-out,
    color            var(--dur-fast) ease-in-out;
}

/* Katı header (kaydırılmış ya da üzerine gelinmiş): simge siyaha döner,
   rozet de tersine — SİYAH daire + BEYAZ rakam. Aynı iki durum
   `.header__container` renk kurallarında da yan yana duruyor. */
.header.is-scrolled .header__badge {
  background: var(--c-ink);
  color: var(--c-paper);
}
@media (hover: hover) {
  .header__container:hover .header__badge {
    background: var(--c-ink);
    color: var(--c-paper);
  }
}

.header__action.has-items .header__badge { opacity: 1; }

.cart {
  display: grid;
  gap: 40px;                 /* kartlar arasındaki gri boşluk */
  align-items: start;
  /* Sayfa `min-height:100dvh` ile uzatıldığı için grid satırları esneyip
     kartların ARASINDA kocaman gri boşluk bırakıyordu. Satırları açıkça
     tanımlayıp artan yeri SON satıra (özet kartı) veriyoruz: ürün kartı
     kendi boyunda kalır, özet kartının beyazı footer'a kadar iner. */
  grid-template-rows: auto 1fr;
  padding: 0;                /* üstte gri şerit yok, altta kart footer'a yapışır */
}
.cart__panel { background: var(--c-paper); padding: 20px var(--gutter-mobile) 24px; }

/* Mobilde başlık ürün listesinden ince ayraçla ayrılır (referans); ayraç
   metinle aynı hizada başlar, ekran kenarına dayanmaz. */
.cart__title {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}

.cart-list { margin: 0; padding: 0; list-style: none; }
.cart-item + .cart-item { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.cart-item__row { display: flex; gap: 14px; }

.cart-item__media {
  position: relative;
  flex: none;
  width: 150px;
  aspect-ratio: var(--card-ratio);
  background: #f1f1f2;
  overflow: hidden;
}
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ürün fotoğrafı gelene kadarki yer tutucu (kart ve galerideki dille aynı). */
.cart-item__media--empty::after {
  content: 'Görsel yakında';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: #b6b8ba;
}

/* Mobilde fiyat ADIN ALTINDA değil, bilgilerin ALTINDA ve sağa yaslı
   (referans). __head'i akıştan çıkarıp üç parçayı `order` ile diziyoruz. */
.cart-item__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cart-item__head { display: contents; }
.cart-item__name { order: 1; }
.cart-item__meta { order: 2; }
.cart-item__price { order: 3; text-align: right; }
.cart-item__name {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.cart-item__meta { margin: 6px 0 0; font-size: 13px; line-height: 17px; }
/* Mobilde fiyat bilgilerin altında; masaüstünde ada hizalı sağda. */
.cart-item__price { margin: 18px 0 0; font-size: var(--fs-body); line-height: 18px; }

.cart-item__actions {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-top: 18px;
}
/* Sağa yaslanan tek bağlantı ("İstek listesine taşı"). */
.cart-item__actions .cart-link--end { margin-left: auto; }

/* Alt çizgi native değil ::after ile çizilir; imleçle sağa silinip soldan
   yeniden gelir (site genelindeki `link-underline` deseni). */
.cart-link {
  position: relative;
  display: inline-block;
  font-size: 13px;
  line-height: 17px;
  color: var(--c-ink);
  text-decoration: none;
}
.cart-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.cart-link:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* --------------------------------------------------------- boş sepet
   Mesaj + düğme sayfanın ORTASINDA. Önce sol üstteki beyaz kartın içinde,
   tam genişlikte siyah bir düğmeyle duruyordu: iki kolonluk ızgarada özet
   kartı da gizlenince altında kocaman boş gri alan kalıyordu. Düzen istek
   listesinin boş durumuyla (.wish-empty) aynı — site tek dille konuşsun. */
.cart.is-empty {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  align-items: stretch;
}
/* Kart sayfayı kaplıyor. Başlık YERİNDE kalıyor (sol üst, altında ayraç) —
   ortalanan yalnızca mesaj bloğu. Başlık da ortalanınca sayfa bir hata
   ekranına benziyordu. */
.cart.is-empty .cart__items {
  display: flex;
  flex-direction: column;
}

/* Mesaj artan yeri kaplayıp kendi içinde ortalanıyor. */
.cart-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px 20px;
  text-align: center;
}
.cart-empty[hidden] { display: none; }
.cart-empty__text {
  margin: 0;
  max-width: 570px;      /* istek listesinin boş metniyle aynı ölçü */
  font-size: var(--fs-body);
  line-height: 20px;
}
/* Düğme sayfa genişliğinde değil, içerik genişliğinde — istek listesindeki
   boş durumun ölçüsüyle aynı. */
.cart-empty .cart-cta {
  width: auto;
  min-width: 210px;
  min-height: 44px;
  padding: 15px 20px 13px;
}

/* Ödeme düğmesi ve "Alışverişe devam edin" aynı biçim. */
.cart-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  background: #000;
  color: var(--c-paper);
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--dur-fast) linear;
}
.cart-cta:hover { opacity: .8; }

/* ------------------------------------------------------------- özet */
.cart__side[hidden] { display: none; }
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 26px;
  /* Referansta kalın; bu projede 700 ağırlık yok, vurgu punto ile veriliyor. */
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
}
/* Sepet ve ödeme adımları henüz yok; düğme sessizce ölü kalmasın diye
   tıklanınca bu not beliriyor. WooCommerce bağlanınca kaldırılacak. */
.cart-soon { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: #6b6d6f; }
.cart-soon[hidden] { display: none; }

/* Akordeonlar SSS sayfasındaki `.faq-item` desenini yeniden kullanır AMA
   burada çerçeveli kutu değiller: referansta satırlar arasında yalnızca ince
   ayraç var, metin kartın kenarına hizalı. */
/* Mobilde akordeon ayraçları ekranın EN SOLUNDAN EN SAĞINA uzanır (kart
   padding'ini negatif margin ile aşar); metin/ok yine 16px gutter'da kalır.
   Masaüstünde kart kenarına hizalı, aşağıdaki blokta geri alınıyor. */
.cart-acc {
  margin: 28px calc(-1 * var(--gutter-mobile)) 0;
}
.cart-acc .faq-item {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-top: 0;
}
.cart-acc .faq-item:hover,
.cart-acc .faq-item.is-open { border-color: var(--c-line); }
/* Mobilde sonuncunun ALT çizgisi yok ve özet kartının alt boşluğu sıfır:
   son satırın altındaki tek çizgi footer'ın üst çizgisi olur, aralarında
   beyaz boşluk kalmaz. Masaüstünde ikisi de geri geliyor. */
.cart__side {
  padding-bottom: 0;
  /* Kart 1fr satırı KAPLASIN: `.cart`taki align-items:start yüzünden içerik
     boyunda kalıyor ve altında gri şerit oluşuyordu. */
  align-self: stretch;
}
.cart-acc .faq-item__head  { padding: 20px var(--gutter-mobile); }
.cart-acc .faq-item__inner { padding: 0 var(--gutter-mobile); }
.cart-acc .faq-item.is-open .faq-item__inner { padding-bottom: 22px; }

/* Kabul edilen ödeme yöntemleri — resmi logo dosyaları (../gorsel/odeme/).
   Logoların en/boy oranları çok farklı (Visa 3:1, Amex kare); hepsi aynı
   42×27 beyaz kartın içinde ORANI KORUNARAK ortalanıyor. */
.cart-marks { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.cart-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 27px;
  padding: 3px;
  border: 1px solid var(--c-line);
  border-radius: 3px;
  background: var(--c-paper);
}
.cart-mark img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* Amex'in resmi işareti zaten mavi bir KARTIN kendisi; beyaz çerçevenin içine
   küçük bir kutu olarak oturmasın diye tüm alanı kaplıyor. */
.cart-mark--fill { padding: 0; border-color: transparent; overflow: hidden; }
.cart-mark--fill img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* Sade alt şerit — sepet akışında tam footer yok (referansta da öyle).
   Sayfanın EN ALTINA yapışır: gövde dikey flex, main esner. Üstünde tam
   genişlikte ince ayraç var. */
.cart-page { display: flex; flex-direction: column; min-height: 100dvh; }
.cart-page .cart { flex: 1 0 auto; }
/* Ölçüler referansın hesaplanmış stilinden birebir: 1px üst ayraç,
   40px/16px iç boşluk (yani kartların geniş kenar boşluğuna UYMAZ, sayfanın
   soluna 16px kalır), 10px/14px yazı, harf aralığı normal → toplam 95px. */
.cart-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Şerit başlıkla aynı beyaz; gri sayfa zemini yalnızca kartların arkasında. */
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  padding: 40px 16px;
  font-size: 10px;
  line-height: 14px;
  /* Gövdeden gelen --tracking'i iptal et; referansta harf aralığı normal. */
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-ink);
}

@media (min-width: 1024px){
  /* Referansta kartlar sayfanın kenarına yapışmaz; iki yanda geniş boşluk
     var. Sabit padding yerine akan bir kenar boşluğu: dar masaüstünde
     --header-pad, geniş ekranda %8'e kadar açılır. */
  .cart {
    grid-template-columns: minmax(0, 1fr) 560px;
    gap: 42px;
    padding: 24px clamp(var(--header-pad), 8.4vw, 160px) 64px;
  }
  .cart__panel { padding: 24px 28px 28px; }
  .cart { grid-template-rows: auto; }
  .cart__title { margin-bottom: 24px; }

  /* SATIR DÜZENİ: görsel solda İKİ SATIR boyunca; sağ sütunda üstte bilgiler,
     ALTTA "Düzenle / Çıkar / İstek listesine taşı". Referansta bağlantılar
     görselin ALTINDA değil, YANINDA ve görselin alt hizasında duruyor. */
  .cart-item { display: grid; grid-template-columns: 285px 1fr; column-gap: 24px; }
  .cart-item__row { display: contents; }
  .cart-item__media { grid-column: 1; grid-row: 1 / span 2; width: 285px; }
  .cart-item__text { grid-column: 2; grid-row: 1; padding-left: 0; display: block; }
  .cart-item__actions { grid-column: 2; grid-row: 2; align-self: end; margin-top: 24px; }

  /* Masaüstünde ad solda, fiyat aynı satırda sağda. */
  .cart-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
  .cart-item__price { margin: 0; flex: none; text-align: left; }

  /* Masaüstünde başlık ayracı yok. */
  .cart__title { padding-bottom: 0; border-bottom: 0; }

  /* Akordeon ayraçları masaüstünde kart kenarına hizalı (taşma yok);
     sonuncunun altında da ayraç var ve kartın alt boşluğu geri gelir. */
  .cart__side { padding-bottom: 28px; align-self: start; }
  .cart-acc .faq-item:last-child { border-bottom: 1px solid var(--c-line); }
  .cart-acc { margin-left: 0; margin-right: 0; }
  .cart-acc .faq-item__head  { padding: 20px 0; }
  .cart-acc .faq-item__inner { padding: 0; }

}


/* ==========================================================================
   ÜRÜN DÜZENLEME PENCERESİ (sepet.php — satırdaki "Düzenle")
   Referans deseni: karartma üzerinde ortalanmış kutu; solda görsel karuseli,
   sağda ad/fiyat, renk, beden, adet, ayrıntılar ve İptal/Onayla.
   Mobilde tüm ekranı kaplar, görsel üstte.
   ========================================================================== */
.pedit {
  position: fixed;
  inset: 0;
  z-index: 32;                      /* .mcart (31) üstünde */
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.pedit.is-open { visibility: visible; transition: visibility 0s linear 0s; }

.pedit__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.pedit.is-open .pedit__scrim { opacity: .55; }

.pedit__box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--c-paper);
  color: var(--c-ink);
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.pedit.is-open .pedit__box { opacity: 1; }

.pedit__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  line-height: 0;
  transition: opacity var(--dur-fast) linear;
}
.pedit__close:hover { opacity: .6; }
.pedit__close svg { width: 22px; height: 22px; stroke-width: 1.6; display: block; }

/* ---------------------------------------------------------- görseller */
.pedit__media {
  position: relative;
  flex: none;
  background: #f1f1f2;
  overflow: hidden;
}
.pedit__slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pedit__slides::-webkit-scrollbar { display: none; }
.pedit__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: var(--card-ratio);
}
.pedit__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pedit__slide--empty::after {
  content: 'Görsel yakında';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #b6b8ba;
}
.pedit__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  color: var(--c-ink);
  transition: opacity var(--dur-fast) linear;
}
.pedit__nav svg { width: 22px; height: 22px; display: block; margin: 0 auto; }
.pedit__nav:hover { opacity: .6; }
.pedit__nav[hidden] { display: none; }
.pedit__nav--prev { left: 4px; }
.pedit__nav--next { right: 4px; }

.pedit__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pedit__dots[hidden] { display: none; }
.pedit__dot {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: none;
  transition: background var(--dur-fast) linear;
}
.pedit__dot.is-on { background: var(--c-ink); }

/* ------------------------------------------------------------- bilgiler */
.pedit__info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px var(--gutter-mobile) 20px;
}
.pedit__title {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 20px;
  font-weight: var(--fw-medium);
}
.pedit__price { margin: 6px 0 0; font-size: var(--fs-body); line-height: 18px; }

/* Renk / Beden / Adet satırları — aralarında ince ayraç (referans). */
.pedit__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-body);
  line-height: 18px;
}
.pedit__row:first-of-type { margin-top: 18px; }
.pedit__row[hidden] { display: none; }
.pedit__label { flex: none; font-weight: var(--fw-medium); }

.pedit__swatches,
.pedit__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.pedit__swatch {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  line-height: 17px;
}
.pedit__swatch.is-on { border-color: var(--c-ink); }
.pedit__swatch-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

.pedit__size {
  min-width: 44px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  font-size: 13px;
  line-height: 32px;
  transition: border-color var(--dur-fast) linear;
}
.pedit__size:hover:not(:disabled) { border-color: var(--c-ink); }
.pedit__size.is-on { border-color: var(--c-ink); }
.pedit__size:disabled { color: #b6b8ba; text-decoration: line-through; }

.pedit__qty { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pedit__qty button {
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  color: var(--c-ink);
  transition: opacity var(--dur-fast) linear;
}
.pedit__qty button:disabled { opacity: .3; }
.pedit__qty button:hover:not(:disabled) { opacity: .6; }
.pedit__qty-value { min-width: 16px; text-align: center; }

/* Ayrıntılar — gövde ÜSTTE, düğme ALTTA (referansta da öyle). */
.pedit__acc { padding: 18px 0 0; border-top: 1px solid var(--c-line); }
.pedit__acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pedit__acc.is-open .pedit__acc-body { grid-template-rows: 1fr; }
.pedit__acc-inner {
  overflow: hidden;
  min-height: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-body, #4a4d4e);
}
.pedit__acc.is-open .pedit__acc-inner { padding-bottom: 14px; }
.pedit__acc-inner ul { margin: 8px 0 0; padding-left: 18px; }

.pedit__actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}
.pedit__btn {
  flex: 1 1 0;
  min-height: 46px;
  padding: 0 20px;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) linear;
}
.pedit__btn:hover:not(:disabled) { opacity: .8; }
.pedit__btn--ghost { border: 1px solid #000; background: none; color: #000; }
.pedit__btn--solid { background: #000; color: var(--c-paper); }
.pedit__btn--solid:disabled { background: #c9cbcc; }

@media (min-width: 1024px){
  /* Ölçüler referansın hesaplanmış stilinden: kutu 926px; görsel sütunu tam
     yarısı (463px) ve 4/5 oranında → 578,75px. Kutu yüksekliği bundan
     türüyor; altta 40px beyaz boşluk kalıyor (referansta 618,75 = 578,75+40),
     bu yüzden yükseklik ELLE VERİLMİYOR. */
  .pedit__box {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: row;
    /* `stretch` (varsayılan) ŞART: satır yüksekliğini 4/5 oranlı görsel
       belirliyor, sağ sütun da o boya uzuyor — böylece düğmeler görselin
       alt hizasına oturuyor. `flex-start` verirsen sütun içerik boyunda
       kalıyor ve düğmeler yukarıda asılı duruyor. */
    align-items: stretch;
    width: min(926px, calc(100vw - 64px));
    max-height: calc(100dvh - 48px);
    padding-bottom: 40px;
  }
  .pedit__close { top: 16px; right: 16px; }

  .pedit__media { flex: 0 0 50%; max-width: 50%; }
  .pedit__slides { height: 100%; }
  .pedit__slide { aspect-ratio: var(--card-ratio); height: auto; }

  /* Sağ sütun görselle aynı boyda; içeriği taşarsa kendi içinde kayar. */
  .pedit__info {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 26px 32px 0;
    overflow-y: auto;
  }
  .pedit__actions { justify-content: flex-end; padding-top: 28px; }
  .pedit__btn { flex: 0 0 auto; min-width: 178px; }
}


/* ==========================================================================
   ÖDEME AKIŞI — 1. ADIM: GÖNDERİM (odeme.php)
   Referans deseni: site başlığı/menüsü YOK, yalnızca logo. Solda adımlar +
   form, sağda ayraçla ayrılmış sipariş özeti. Altta tek satırlık şerit.
   ========================================================================== */
/* Odeme akisinin yan boslugu site genelindeki --header-pad'den genistir:
   referansta 1270px genislikte 120px olculdu (icerik 1030px). Daha dar
   ekranlarda iki sutun sikismasin diye 1270'in altinda oranli kuculur,
   1270 ve uzerinde referanstaki gibi 120px'te sabitlenir. */
.checkout-page { display: flex; flex-direction: column; min-height: 100dvh; --ck-pad: var(--gutter-mobile); }

/* Logo + adimlar + baslik ayni gri bantta durur. Bant referansta 1270px,
   yani yalnizca sol sutunu kaplar; sipariş ozeti sutunu onun yaninda
   sayfanin en ustunden baslar. Altindaki teslimat kutucuklarinin zemini
   ayni renk oldugu icin bant kesintisiz devam ediyormus gibi gorunur. */
.ckhead {
  background: #f5f5f5;
  padding: 0 0 32px;
}
/* Mobilde logo satiri beyaz bir cubuk: solda logo, sagda tutar + ok
   (referansta 57px = 16 + 25 + 16). Masaustunde bu cubuk kaybolur, logo
   dogrudan gri bandin icinde durur. */
.ckhead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  min-height: 57px;
  padding: 16px;
  background: var(--c-paper);
}
.ckhead__mark { display: block; width: 100px; color: var(--c-ink); }   /* ~23px yükseklik */
.ckhead__mark svg { width: 100%; height: auto; display: block; }

.ck-crumb,
.ck-title { padding-left: var(--ck-pad); padding-right: var(--ck-pad); }

.ck { flex: 1 0 auto; display: flex; flex-direction: column; }
/* Alt serit sol sutunun son cocugu; kisa sayfada da en alta yapissin diye
   sutun dikey flex ve seride margin-top:auto veriliyor. */
.ck__main { display: flex; flex-direction: column; padding: 0; }
/* Mobilde son akordeon cizgisi footer'a yapisir (sepet sayfasiyla ayni). */
.ck__side { border-top: 1px solid var(--c-line); padding: 28px var(--gutter-mobile) 0; }

/* ------------------------------------------------------------- adımlar */
.ck-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 17px;
}
.ck-steps li { display: flex; align-items: center; gap: 8px; color: #8a8d8f; }
.ck-steps li.is-current { color: var(--c-ink); }
.ck-steps li.is-current span:first-child {
  border-bottom: 1px solid var(--c-ink);
  padding-bottom: 2px;
}
.ck-steps__sep { width: 14px; height: 14px; flex: none; color: #b6b8ba; }
.ck-steps__sep svg { width: 100%; height: 100%; display: block; }

.ck-title {
  margin: 22px 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--fw-medium);
}

/* ---------------------------------- mobil sipariş özeti (başlık çubuğu)
   Tutara basılınca panel yukarıdan aşağı iner (referansta -translate-y-full
   → 0, 1s ease-in-out) ve ekranı kaplar. */
.cksum__btn {
  display: flex;
  align-items: center;
  gap: 14px;                      /* referansta mr-sp-14 */
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: var(--fw-medium);
}
.cksum__chev { width: 12px; height: 12px; flex: none; }
.cksum__chev svg { width: 100%; height: 100%; display: block; }

/* Sabit konum: sayfa kaydirilinca panel de kayip arkasindaki icerigi
   gostermesin — acikken gorunen alanin tamamini kaplar (govde kaydirmasi
   da `body.pi-drawer-open` ile kilitleniyor). */
.cksum__panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 16px;
  background: var(--c-paper);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 1s ease-in-out, visibility 0s linear 1s;
}
.cksum__panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform 1s ease-in-out, visibility 0s;
}
/* Panelde "Toplam" satirinin ustunde cizgi yok; referansta yalnizca
   mt-sp-14 ile ayriliyor (sag sutundaki ozette cizgi kaliyor). */
/* Ozgulluk: ustteki kural `.ck-sum li.ck-sum__total` (0,2,1) oldugu icin
   burada da li ile yaziliyor, aksi halde cizgi kalkmiyor. */
.cksum__panel .ck-sum li.ck-sum__total {
  border-top: 0;
  margin-top: 14px;
  padding-top: 0;
}

/* Ayraclar: ustteki panelin iki kenarina kadar uzanir (referansta
   -ml-4 -mr-4), alttaki icerik genisliginde kalir. */
.cksum__sep { flex: none; margin-bottom: 15px; border-bottom: 1px solid var(--c-line); }
.cksum__sep--bleed { margin: 30px -16px 15px; }

/* Tutarlarin altindaki urun listesi — masaustu cekmecesiyle ayni satirlar,
   yalnizca gorsel daha buyuk (w-25.5 = 102px) ve miktar satiri buyuk harf. */
.cksum__list {
  flex: 0 1 auto;
  max-height: 556px;
  padding: 24px 0 70px;
}
.cksum__list .ck-line__media { width: 102px; }
.cksum__list .ck-line__qty { text-transform: uppercase; }
.cksum__list .ck-line__variant { font-size: 12px; line-height: 16px; }

.cksum__close { align-self: flex-end; flex: none; width: 14px; height: 14px; }
.cksum__close svg { width: 100%; height: 100%; display: block; }
.cksum__title {
  margin: 24px 0 24px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

/* ------------------------------------------------- teslimat yöntemi */
/* Referansta iki kutucuk aralarinda bosluk olmadan yan yana durur; secili
   olan beyaz, digeri gri kalir, ikisinin de disinda bandin acik grisi
   surer. Yukseklik referanstan: mobil 70px, md ustu 108px. */
.ck-tiles {
  display: grid;
  /* Referansta her genislikte yan yana ve esit: iki kez w-1/2. Yan bosluk
     yalnizca lg ustunde var (lg:px-sp-68 xl:px-sp-120); mobilde serit
     ekrani kenardan kenara kaplar. */
  grid-template-columns: 1fr 1fr;
  background: #f5f5f5;
}
.ck-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 70px;
  padding: 14px 30px 14px 24px;
  background: #eaeaea;
  text-align: left;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast) linear;
}
.ck-tile.is-on { background: var(--c-paper); }
/* Daire = yalnizca konumlandirici; gorunur yuz ::after (ustte, opak), hover
   halosu ::before (arkada) — giris formundaki onay kutusuyla ayni sistem.
   Secili haldeki nokta ayri bir katman degil, yuzun icine cizilen beyaz
   halka (inset box-shadow): ink zemin uzerinde 4px beyaz halka ortada
   12px'lik ink nokta birakir. */
.ck-radio {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
}
.ck-radio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  /* Ici her zaman beyaz: secili olmayan kutucugun gri zemini dairenin
     icinden gorunmesin. */
  background: var(--c-paper);
}
.ck-tile.is-on .ck-radio::after {
  background: var(--c-ink);
  box-shadow: inset 0 0 0 4px var(--c-paper);
}
/* Halo: daireden 7px taskin acik gri daire, ARKADA; merkezden buyur.
   Opak yuzun arkasinda kaldigi icin yalnizca disari tasan kismi gorunur;
   fare cekilince kucululup kaybolur. */
.ck-radio::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 0;
  border-radius: 50%;
  background: #dfe1e2;
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease);
}
.ck-tile:hover .ck-radio::before { transform: scale(1); }

/* --------------------------------------------------------------- form */
.ck-form { padding: 30px var(--ck-pad) 40px; max-width: 520px; }
.ck-req { margin: 0 0 26px; font-size: 12px; line-height: 16px; color: #8a8d8f; }
.ck-h2 {
  margin: 0 0 14px;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.ck-block { margin-bottom: 40px; }
.ck-note { margin: 0 0 14px; font-size: 13px; line-height: 17px; }

/* Kayıtlı adres kartı (referanstaki seçilebilir kutu). Olculer referanstan:
   ust/alt 24, sol 24, sag 56 ic bosluk; satirlar 19px; "Düzenle" 16px asagida. */
/* Kartin iki hali var. Ozet halinde (varsayilan) yalnizca secili adres
   gorunur: sutunun tamamini kaplar ve icinde radyo yoktur. "Düzenle"ye
   basilinca secim haline gecilir: butun adresler referanstaki gibi yarim
   genisliginde (1030px icerikte 507+16+507) yan yana dizilir ve her birinin
   soluna radyo gelir. */
.ck-addrs { display: grid; gap: 16px; }
.ck-addrs[hidden] { display: none; }   /* display:grid, hidden'i ezer */
.ck-addr {
  padding: 24px 56px 24px 24px;
  border: 1px solid #c9cbcc;
  font-size: var(--fs-body);
  line-height: 19px;
}
.ck-addr.is-on { border-color: var(--c-ink); }
.ck-addr--pick { display: flex; align-items: flex-start; cursor: pointer; }
.ck-addr--pick .ck-radio { margin-right: 16px; }   /* referansta pr-sp-16 */
.ck-addr--pick.is-on .ck-radio::after {
  background: var(--c-ink);
  box-shadow: inset 0 0 0 4px var(--c-paper);
}
/* Kartlarda hover halosu yok (yalnizca teslimat kutucuklarinda var). */
.ck-addr--pick .ck-radio::before { content: none; }
.ck-addr[hidden] { display: none; }
.ck-addr__body p { margin: 0; }
.ck-addr__name { font-weight: var(--fw-medium); }
/* Ozgulluk: ustteki `.ck-addr__body p { margin: 0 }` kuralini gecmesi icin
   iki sinifla yaziliyor — aksi halde 16px'lik bosluk hic uygulanmiyor ve
   "Düzenle" adres satirlarina yapisik duruyor. */
.ck-addr__body .ck-addr__edit { margin-top: 16px; }
.ck-addr__edit .ck-add { margin-top: 0; }

.ck-add[hidden] { display: none; }   /* display:inline-block, hidden'i ezer */
.ck-add {
  position: relative;
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* Site genelindeki CTA alt cizgisi: hover'da saga silinip soldan geri gelir. */
.ck-add::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.ck-add:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* Adres formu — referansta iki sütunlu ızgara: satır arası 32px, sütun
   arası 20px. Alan + hata mesajı tek hücrede durur (`.ck-fcol`), bu yüzden
   alanların kendi alt boşluğu sıfırlanır. */
/* Fatura adresi bölümü — "aynı adres" kutucuğu işaretsizken açılır. */
.ck-bill { margin-top: 40px; }
.ck-bill[hidden] { display: none; }
.ck-bill .ck-h2 { margin-bottom: 20px; }

.ck-addrform { display: grid; grid-template-columns: 1fr; gap: 32px 20px; }
.ck-addrform[hidden] { display: none; }
.ck-addrform .pi-field { margin-bottom: 0; }
/* Hata mesajı ızgaranın MEVCUT satır aralığına yerleşir, kendine yer açmaz.
   Bileşenin kendi `margin-top: -8px` değeri, alanın 16px'lik alt boşluğuna
   oturmak için var (bkz. `.pi-field__error`); burada o boşluk yukarıda
   sıfırlandığı için mesaj kutunun ALT KENARININ ÜSTÜNE biniyordu — posta
   kodu alanında ölçüldü. Aynı çakışma 2. adımın kart ızgarasında da çıkmış
   ve orada bu şekilde çözülmüştü (bkz. `.ck-card__grid .pi-field__error`);
   düzeltme oradan alındı, yeni bir yöntem uydurulmadı.

   Konumlandırarak akıştan çıkarıyoruz: 32px'lik satır aralığı 4px + ~17px'lik
   mesajı rahat alıyor, yani hata görününce satır yüksekliği büyümüyor ve
   formun altındaki her şey aşağı zıplamıyor. */
.ck-addrform .ck-fcol { position: relative; }
.ck-addrform .pi-field__error {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
}
.ck-addrform__foot { text-align: right; }
.ck-addrform__foot .ck-add { margin-top: 0; }

/* Onay kutusu — site geneliyle aynı kare tik. */
/* --- Kayıtlı kartlar (ödeme 2. adım) --------------------------------------
   Üyenin iyzico'da saklı kartları. Referansta bunlar bir LİSTE değil, kenarlıklı
   KAROLAR: mobilde tek sütun, masaüstünde iki. Görünüş 1. adımdaki adres seçim
   kartıyla birebir aynı olduğu için kutu kendi kenarlığını/radyosunu tanımlamaz,
   `.ck-addr--pick` sınıflarını ödünç alır. Buradaki kurallar yalnızca iki farkı
   kapatıyor: gerçek bir radio girişi var (adres kartında yok) ve satırlar <p>
   değil <span> (etiketin içinde <p> geçersiz olurdu).
   Kart numarası burada YOK; yalnızca son dört hane. */
/* Ödeme markaları şeridiyle karolar arasındaki boşluk referanstan:
   icons-payment-list → pb-sp-20 (mobil) / md:pb-sp-32. Boşluk şeride değil
   bu bloğa yazılıyor — şeride yazsak kayıtlı kart YOKKEN ham kart formunu da
   iterdi; formun kendi 26px'lik üst boşluğu zaten var. */
.ck-saved { margin: 20px 0 22px; }
.ck-saved__list { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ÖLÇÜLER REFERANSTAN ALINDI (ödeme ekranındaki kart karosu):
     genişlik 482 · yükseklik 160 · min-width 160 · dolgu 24/56/24/24
     satır yüksekliği 24 · kenarlık 1px, seçilide siyah · zemin beyaz.
   Genişlik ızgaradan geliyor: masaüstünde iki sütun + 16px aralık, kart
   kutusunun içinde ~983px kalıyor → sütun başına ~483px. Yükseklik seçili
   kartta CVV alanıyla 160'a oturuyor; seçili olmayan karo min-height ile
   aynı boyda kalıyor, ızgara satırında iki kart eşit görünüyor.
   Dolgu ve radyo boşluğu .ck-addr / .ck-addr--pick'ten geliyor (aynı kutu). */
.ck-savedcard {
  position: relative;   /* gizli radyo karonun içine sabitlensin */
  min-width: 160px;
  min-height: 160px;
  line-height: 24px;
  cursor: pointer;
  /* .ck-addr--pick'te `flex-start`: gövde içerik boyunda kalır ve CVV'yi
     karonun altına yaslayan `margin-top: auto` çalışmaz. Radyo sabit
     22×22 olduğu için `stretch` onu bozmuyor. */
  align-items: stretch;
}
/* Teslimat kutucuklarındaki (.ck-tile) halo burada da olsun: fareyle
   üstüne gelince radyonun arkasından açık gri daire büyüyor, çekilince
   küçülüp kayboluyor. `.ck-addr--pick .ck-radio::before` bunu kapatıyor
   (adres kartlarında halo yok); iki sınıfla yazılıp geri açılıyor —
   kaynak sırasından bağımsız kazansın diye özgüllük bilerek yüksek. */
.ck-savedcard.ck-addr--pick .ck-radio::before { content: ""; }
.ck-savedcard:hover .ck-radio::before { transform: scale(1); }

/* Radyo görünmüyor ama odaklanabilir kalıyor (klavyeyle seçim). */
.ck-savedcard input[name="ck-kayitli"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-savedcard input[name="ck-kayitli"]:focus-visible + .ck-radio { outline: 2px solid var(--c-ink); outline-offset: 3px; }
/* Referans: card-right → flex flex-col items-start w-full. */
.ck-savedcard__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ck-savedcard__body > * { margin: 0; }
.ck-savedcard__brand { font-weight: var(--fw-medium); cursor: pointer; }
.ck-savedcard__num { letter-spacing: .04em; }

/* CVV YALNIZCA SEÇİLİ KARTTA görünür — referansta da seçili kartın içinde
   duruyor. `margin-top: auto` alanı karonun altına yaslıyor: 160px'lik kutuda
   metin üstte, CVV altta kalıyor (referanstaki yerleşim).

   ⚠️ `display: none` DEĞİL `visibility: hidden`: gizlerken kutu yerinden
   kalkınca karo seçildiğinde büyüyüp bırakıldığında küçülüyordu (ızgara satırı
   da onunla birlikte zıplıyordu). Görünmezken de yerini tutuyor, böylece karo
   seçili olsa da olmasa da AYNI BOYDA kalıyor. Yan etkisi de doğru:
   görünmeyen alan odaklanamıyor, ekran okuyucuya da düşmüyor — seçili
   olmayan kartların CVV'sine sekme ile girilmiyor. */
.ck-savedcard__cvc { visibility: hidden; margin-top: auto; }
.ck-savedcard.is-on .ck-savedcard__cvc { visibility: visible; }

/* Referanstaki "ADD CREDIT CARD": karoların altında, kendi satırında. */
.ck-saved__new { margin-top: 24px; }

/* --- Çizgili alan (referans: input-container-line) -------------------------
   .pi-field'in kutulu yüzü yok: yalnızca alt çizgi, yan dolgu sıfır. Yüzen
   etiket aynı desende çalışıyor, sadece dinlendiği yer farklı — kutulu alanda
   dikeyde ortada, burada çizginin hemen üstünde. */
.pi-field--line { margin-bottom: 0; }
.pi-field--line .pi-field__control {
  /* `block`: satır içi öğe olarak kalırsa altında satır yüksekliğinden gelen
     birkaç piksellik boşluk oluşuyor ve karo 160px'i aşıyor. */
  display: block;
  height: 40px;
  border: 0;
  border-bottom: 1px solid var(--c-ink);
  background: transparent;
  padding: 18px 0 4px;
}
.pi-field--line .pi-field__label { left: 0; top: auto; bottom: 7px; transform: none; }
.pi-field--line .pi-field__control:focus + .pi-field__label,
.pi-field--line .pi-field__control:not(:placeholder-shown) + .pi-field__label {
  top: 2px;
  bottom: auto;
  font-size: 11px;
}

.ck-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; font-size: 13px; line-height: 18px; }
.ck-check input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Radyoyla ayni yapi: kutu yalnizca konumlandirici, gorunur yuz ::after
   (ustte, opak), hover halosu ::before (arkada, merkezden buyur). Tik
   ayri bir katman degil, isaretli yuzun arka plan gorseli. */
.ck-check__box {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.ck-check__box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--c-ink);
  background: var(--c-paper);
}
.ck-check input:checked + .ck-check__box::after {
  background: var(--c-ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 6.5'/%3E%3C/svg%3E")
    center / 20px no-repeat;   /* 24'lük viewBox'ta tik ~%58, 20px'te belirgin */
}
.ck-check__box::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 0;
  background: #dfe1e2;
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease);
}
.ck-check:hover .ck-check__box::before { transform: scale(1); }
.ck-check input:focus-visible + .ck-check__box { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.ck-actions { display: flex; justify-content: flex-end; margin-top: 36px; }
/* display:flex, [hidden]'i ezer — onay adımına ait "Alışverişe devam edin"
   düğmesi 1., 2. ve 3. adımda da görünüyordu. (Aynı tuzak .ck-addrs ve
   .ck-add için de var.) */
.ck-actions[hidden] { display: none; }
.ck-cta {
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  background: #000;
  color: var(--c-paper);
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) linear;
}
.ck-cta:hover:not(:disabled) { opacity: .8; }
.ck-cta:disabled { background: #c9cbcc; }

/* ------------------------------------------------------ sipariş özeti */
.ck-side__title { margin: 0 0 24px;   /* referansta mb-6 */ font-size: 16px; line-height: 20px; font-weight: var(--fw-medium); }
.ck-see {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-body);
  line-height: 18px;
  text-align: left;
}
.ck-see__chev { width: 18px; height: 18px; flex: none; transition: transform var(--dur-base) var(--ease); }
.ck-see__chev svg { width: 100%; height: 100%; display: block; }
/* Ok referanstaki gibi hep saga bakar — panel accordion degil, cekmece. */

/* ------------------------------------------- ürün listesi çekmecesi
   Referansta liste ayri bir bolum degil, ozetin uzerini kaplayan beyaz bir
   panel: sagdan kayarak gelir (translateX(100%) → 0, 500ms ease-in-out),
   sag ustundeki carpi ile kapanir. Sutunun ic sarmalayicisi konumlandirici
   oldugu icin panel tam olarak icerik sutununu kaplar. */
/* overflow:clip destekleyen tarayicida sarmalayici hic kaydirilamaz olur;
   boylece "gorunur alana getir" davranisi paneli yerinden oynatamaz. */
.ck-side__inner { position: relative; overflow: hidden; overflow: clip; }
.ck-drawer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--c-paper);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 500ms ease-in-out, visibility 0s linear 500ms;
}
.ck-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 500ms ease-in-out, visibility 0s;
}
.ck-drawer__close {
  align-self: flex-end;
  flex: none;
  width: 20px;
  height: 20px;
  margin-bottom: 20px;   /* referansta mb-sp-20 */
  color: var(--c-ink);
}
.ck-drawer__close svg { width: 100%; height: 100%; display: block; }

.ck-drawer__list {
  margin: 0;
  padding: 0 0 30px;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none;
}
.ck-drawer__list::-webkit-scrollbar { width: 0; height: 0; }

.ck-line { display: flex; padding-bottom: 24px; }
.ck-line__media { flex: none; width: 85px; aspect-ratio: var(--card-ratio); background: #f1f1f2; }
.ck-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fiyat referansta satirin sag altina yaslanir; bu yuzden metin blogu
   sutunun tamamini kaplar ve dikey flex olur. */
.ck-line__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  padding-left: 16px;
  font-size: var(--fs-body);
  line-height: 18px;
}
.ck-line__name { margin: 4px 0 0; font-weight: var(--fw-medium); }
.ck-line__meta { margin: 10px 0 0; }
.ck-line__price { margin: 10px 0 0; text-align: right; font-weight: var(--fw-medium); }

.ck-sum { margin: 18px 0 0; padding: 0; list-style: none; font-size: var(--fs-body); line-height: 18px; }
.ck-sum li { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
/* display:flex, [hidden]'i ezer — vade farkı satırı taksit seçilmese de
   "0 TL" diye görünüyordu. (Aynı tuzak .ck-actions, .ck-addrs ve .ck-add
   için de var; hepsinde açıkça sıfırlanıyor.) */
.ck-sum li[hidden] { display: none; }
.ck-sum li.ck-sum__total {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
}
.ck-kdv { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: #6b6d6f; }

/* Mobilde ozet zaten baslik cubugundaki panelde acilir; sag sutundaki
   kopyasi (baslik, urun listesi, tutarlar) gizlenir, yalnizca akordeonlar
   kalir. Basliktaki panelin kendi .ck-sum'ina dokunulmaz. */
@media (max-width: 1023px){
  /* Çekmece mobilde kapalı olduğu için kırpmaya gerek yok; kırpma açıkken
     akordeon ayraçlarının negatif kenar boşluğu kesiliyor ve çizgiler
     ekranın kenarına ulaşamıyordu. */
  .ck-side__inner { overflow: visible; }

  .ck__side .ck-side__title,
  .ck__side .ck-see,
  .ck__side .ck-drawer,
  .ck__side .ck-sum,
  .ck__side .ck-kdv { display: none; }

  /* Ozet gizlendigi icin sutunun ust cizgisi ve ust boslugu bosa dusuyor;
     ikisi de kalkiyor, akordeonun kendi cizgileri yetiyor. Referansta ilk
     satirin USTUNDE cizgi yok, sonuncunun ALTINDA var. */
  .checkout-page .ck__side { border-top: 0; padding-top: 0; }
  .checkout-page .cart-acc { margin-top: 16px; }
  .checkout-page .cart-acc .faq-item:first-child { border-top: 0; }
  .checkout-page .cart-acc .faq-item:last-child {
    border-bottom: 1px solid var(--c-line);
  }
}

/* Alt serit sepet sayfasindan geliyor; odeme akisinda ustundeki ayrac
   cizgisi yok ve yazi sayfa icerigiyle ayni hizadan (--ck-pad) baslar. */
.checkout-page .cart-foot {
  border-top: 0;
  margin-top: auto;
  padding-left: var(--ck-pad);
  padding-right: var(--ck-pad);
}

/* Doldurulabilir alanların kenarı ödeme akışında SİYAH (kullanıcı isteği).
   Tasarım sisteminde .pi-field--select ve --date zaten siyah kenarlı; bu
   onlarla tutarlı. HER İKİ ADIMDA da geçerli — yalnızca 2. adıma verilseydi
   adres formu gri, kart formu siyah kalır, aynı akış içinde tutarsız olurdu.
   Kapsam .checkout-page ile sınırlı: aynı .pi-field bileşeni hesabım,
   iletişim, iade ve sipariş takip sayfalarında da kullanılıyor, oralar
   değişmesin. Site geneline yaymak istenirse bu seçici kaldırılır. */
.checkout-page .pi-field__control { border-color: var(--c-ink); }
/* Telefon alanı bileşik: dış çerçeve .pi-phone'da, içteki input'un kenarı
   zaten none — border-color vermek onu geri getirmez, dokunmuyoruz. */

/* Adım geçişi: .ck-tiles ve .ck-see kendi display değerlerini taşıdığı için
   [hidden] tek başına yetmez, açıkça kapatılıyor. */
.ck-tiles[hidden],
.ck-see[hidden],
.ck-form[hidden],
.ck-pay[hidden] { display: none; }

/* Tamamlanmış adım tıklanabilir (referansta 2. adımdayken 1. adıma dönülür)
   ve SİYAH: şerit bir ilerleme sırası, geçilmiş adım tamamlanmış görünür.
   Yalnızca HENÜZ GELİNMEMİŞ adımlar gri kalır. Altı çizili olan tek adım
   bulunulan adımdır (.is-current), böylece ikisi karışmaz. */
.ck-steps li.is-done { cursor: pointer; color: var(--c-ink); }
.ck-steps li.is-done:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ 2. ADIM
   Ödeme yöntemi — referans: checkout-new.html#step2. Gri bant 1. adımdaki
   gibi başlıkta biter (bu adımda teslimat kutucukları olmadığı için bandın
   altı doğrudan beyaz alana açılır, .ckhead'in kendi alt dolgusu yeter). */
.ck-pay { padding: 30px var(--ck-pad) 40px; }

/* Kart kutusu — tek ince çerçeve, iç dolgu 24px. Çerçeve SİYAH (kullanıcı
   isteği): içindeki alanların açık gri kenarlarından ayrışsın, seçili ödeme
   yöntemi olduğu belli olsun. İç alanlar gri kalır. */
.ck-card {
  border: 1px solid var(--c-ink);
  padding: 22px 20px 26px;
}
.ck-card__head { display: flex; align-items: center; gap: 12px; }
.ck-card__label { font-weight: var(--fw-medium); }
/* Kart ikonu satırın en sağında; başlıkla arasındaki boşluğu itsin.
   Ölçü kart oranında (32×22), ikon dolu olduğu için renk devralmıyor. */
.ck-card__icon { margin-left: auto; width: 32px; height: 22px; }
.ck-card__icon svg { width: 100%; height: 100%; display: block; }

/* Radyo .ck-tile içindekiyle aynı bileşen; ama seçili hâli orada üst
   öğeye (.ck-tile.is-on) bağlı. Burada üst öğe yok — tek ödeme yöntemi
   olduğu için radyo kendi .is-on sınıfıyla dolu duruyor. */
.ck-card__head .ck-radio.is-on::after {
  background: var(--c-ink);
  box-shadow: inset 0 0 0 4px var(--c-paper);
}

/* Marka işaretleri sepet sayfasındakinin küçüğü (referansta ~32×20). */
.ck-card__marks { margin: 18px 0 0; }
.ck-card__marks .cart-mark { width: 32px; height: 21px; }

.ck-card__grid { display: grid; grid-template-columns: 1fr; gap: 26px 20px; margin-top: 26px; }
.ck-card__grid .pi-field { margin-bottom: 0; }
/* Hata mesajı ızgaranın MEVCUT boşluğuna yerleşir, kendine yer açmaz.
   Bileşenin kendi `margin-top: -8px` değeri 1. adımda alanın 16px'lik alt
   boşluğuna oturmak için var; burada o boşluk sıfırlandığından mesaj kutunun
   üstüne biniyordu. Konumlandırarak akıştan çıkarıyoruz: 26px'lik satır
   aralığı 4px + ~17px'lik mesajı rahat alıyor, satır yüksekliği büyümüyor. */
.ck-card__grid .ck-fcol { position: relative; }
.ck-card__grid .pi-field__error {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
}

/* CVC ipucu — alanın sağ içinde, tik göstergesinin yerinde. Rengi SİYAH:
   gri tonda tıklanabilir olduğu anlaşılmıyordu. */
.ck-card__hint {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
}
.ck-card__hint svg { width: 100%; height: 100%; display: block; }
/* CVV alanında hem ipucu düğmesi hem yeşil tik var; tik ipucunun soluna
   kayar, yoksa üst üste binerler. */
.pi-field--hint .pi-field__valid { right: 40px; }
.ck-card__hinttext { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: #6c6f71; }

.ck-3ds { margin: 20px 0 0; font-size: 12px; line-height: 16px; color: #6c6f71; }
.ck-card__sub {
  margin: 30px 0 0;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
/* Taksit açıklaması referansta soluk — henüz seçilebilir değil. */
.ck-check--muted { color: #8a8d8f; }
.ck-check--muted .ck-check__box::after { border-color: #c9cbcc; }

/* Açılır liste — sitenin başka yerinde yerel <select> yok, o yüzden kendi
   çerçevesi burada tanımlanıyor. Ok işareti ayrı bir katman; select'in
   kendi oku appearance:none ile kaldırılıyor. */
/* --- Bilgi baloncuğu (taksit satırının sonundaki "i") ---------------------
   Referans: ödeme ekranındaki installment-information-icon. Ölçülmüş
   değerler: siyah zemin, beyaz yazı, 192px genişlik, 10/14 punto, ikonun
   ÜSTÜNDE ve sağa yaslı, gagası sağ altta.

   Bu baloncuk artık taksit bilgisinin TEK yeri: seçim kutusunda "Bu kart için
   taksit yok" / "Banka kartlarında taksit yapılamaz" gibi değişken metinler
   basılıyordu, kaldırıldı. Kutuda her zaman "Taksit sayısını seçin" yazıyor,
   sebebini merak eden buraya bakıyor. */
.ck-info {
  position: relative;
  display: inline-flex;
  vertical-align: -3px;   /* ikon satırın ortasına otursun */
  margin-left: 6px;
}
/* Tam siyah: satırın kendi rengi gri (.ck-check--muted) ve ikon onu devralıp
   soluk kalıyordu. Referansta da ikon siyah. */
.ck-info__btn { display: flex; width: 16px; height: 16px; color: #000; cursor: pointer; }
.ck-info__btn svg { width: 16px; height: 16px; display: block; }

.ck-tip {
  position: absolute;
  /* GAGA İKONUN ORTASINA DENK GELSİN diye hesaplanmış değer, göz kararı
     değil: ikon 16px, ortası sağ kenardan 8px içeride. Gaga baloncuğun sağ
     kenarından 12px + kendi yarısı 7px = 19px içeride duruyor. Baloncuğun
     19 − 8 = 11px sağa taşması gerekiyor. */
  right: -11px;
  bottom: calc(100% + 12px);
  z-index: 5;
  display: flex;
  align-items: flex-start;
  width: 192px;
  background: #000;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: left;
}
.ck-tip[hidden] { display: none; }   /* display:flex, hidden'i ezer */
.ck-tip__text { padding: 12px 0 12px 12px; }
.ck-tip__close { flex: none; padding: 8px; color: #fff; cursor: pointer; }
.ck-tip__close svg { width: 11px; height: 11px; display: block; }
/* Gaga: sağ altta, aşağı bakar (referans: beak-bottom + beak-right). */
.ck-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: #000;
}

/* ÖLÇÜLER REFERANSTAN (taksit seçimi kutusu, hesaplanmış değerler):
     genişlik 476 · yükseklik 56 · satır yüksekliği 24
     kapalıyken kenarlık #71797f, zemin #f7f7f7, yazı #71797f
     sol dolgu 12 · sağ dolgu 64 (ok için) · ok sağdan 12
   Bizdeki farklar buydu: kutu 46px yüksekliğindeydi, ok 44px'lik bir
   hücrede duruyordu ve solunda AYRAÇ ÇİZGİSİ vardı — referansta ayraç yok,
   ok doğrudan kenarın 12px içinde. */
.ck-select { position: relative; margin-top: 16px; max-width: 476px; }
.ck-select select {
  width: 100%;
  min-height: 56px;
  padding: 0 64px 0 12px;
  border: 1px solid var(--c-ink);
  border-radius: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
}
/* Tarayıcının kendi odak çerçevesi kutunun DIŞINA çiziliyor; kutunun zaten
   siyah kenarlığı olduğu için ikinci bir çerçeve gibi görünüyordu (liste
   açıkken belirginleşiyor). Dış çerçeve kalkıyor, odak kutunun KENDİ
   kenarında kalınlaşarak veriliyor — böylece klavye kullanıcısı da nerede
   olduğunu görüyor ama fazladan çerçeve oluşmuyor. */
.ck-select select:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--c-ink);
}

/* Kapalıyken gri: referansta da taksit seçimi kart girilene kadar soluk.
   Taksit bağlandığında (BIN sorgusu) kendiliğinden siyaha döner. */
.ck-select select:disabled {
  /* Referanstaki kapalı hâlin ölçülmüş renkleri. */
  border-color: #71797f;
  background: #f7f7f7;
  color: #71797f;
  cursor: not-allowed;
}
/* Ok kutunun sağ kenarından 12px içeride, dikeyde ortalı. */
.ck-select__chev {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--c-ink);
}
/* Okun solundaki ayraç: referansta kutunun TAM BOYU DEĞİL, ortada duran kısa
   bir çizgi. Site genelindeki açılır alanlarla aynı desen
   (bkz. .pi-field--select .pi-field__chevron::before) — aynı ölçüler. */
.ck-select__chev::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: var(--c-line);
}
.ck-select__chev svg { width: 18px; height: 18px; display: block; }

/* ============================================================ 3. ADIM
   Sipariş onayı — referans: checkout-new.html#step3. Ödeme BURADA çekilir. */
.ck-onay { padding: 30px var(--ck-pad) 40px; }
.ck-onay[hidden] { display: none; }
/* Başlık altındaki açıklama satırı gri bandın içinde kalır. */
.ck-lead { margin: 10px 0 0; padding: 0 var(--ck-pad); font-size: 13px; line-height: 18px; color: #6c6f71; }
.ck-lead[hidden] { display: none; }

/* Özet mobilde 3. adımda buraya taşınır; altına referanstaki ayraç gelir.
   Ürün listesi mobilde normalde gizli (.ck-line-list { display:none }) —
   burada açılıyor. */
.ck-onay > .ck-ozet {
  margin: 0 0 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
}
.ck-onay .ck-line-list { display: block; }
.ck-onay .ck-line-list[hidden] { display: none; }
/* Burada üst üste üç çizgi oluyordu: ürünlerin altı, "Toplam"ın üstü ve
   özetin altı. Ortadaki kalkıyor — boşluk kalıyor, çizgi gitmiyor. Kural
   yalnızca .ck-onay içinde geçerli; özet sütununun kendi düzeni değişmez.
   ÖZGÜLLÜK: temel kural `.ck-sum li.ck-sum__total` (0,2,1). Aynı yapıyı
   kullanmazsak ezilir — sadece `.ck-onay .ck-sum__total` yazmak yetmiyor. */
.ck-onay .ck-sum li.ck-sum__total { border-top: 0; }

.ck-onay__h {
  margin: 0 0 30px;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.ck-onay__blok { margin-bottom: 30px; }
.ck-onay__baslik {
  margin: 0 0 8px;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.ck-onay__govde p { margin: 0; line-height: 20px; }
.ck-onay__duzenle { margin: 12px 0 0; }
.ck-onay__daha { margin: 0; }
/* "Daha fazla göster" akordeonu — SSS'teki .faq-item deseninin aynısı.
   Yükseklik grid satırıyla animasyonlanıyor; içerik yüksekliğini bilmeye
   gerek yok. Üst boşluk İÇ düğümde: kapalıyken kutu tam sıfıra insin. */
.ck-onay__ek {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ck-onay__ek.is-open { grid-template-rows: 1fr; }
/* Kapalıyken üst dolgu 0 → kutu TAM sıfıra iner (yoksa 22px'lik boş şerit
   kalırdı). Açılırken dolgu, satır yüksekliğiyle AYNI ritimde animasyonlanır
   ki sıçrama olmasın — .faq-item__inner ile birebir aynı yöntem. */
.ck-onay__ek-ic {
  overflow: hidden;
  min-height: 0;
  padding-top: 0;
  transition: padding-top 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ck-onay__ek.is-open .ck-onay__ek-ic { padding-top: 22px; }
.ck-onay__ek p { margin: 0; line-height: 20px; }
.ck-onay__ek h3 { margin: 0 0 8px; font-size: var(--fs-body); line-height: 18px; font-weight: var(--fw-medium); }
.ck-onay__ek .ck-onay__blok:last-child { margin-bottom: 0; }

.ck-onay__ayrac { margin: 30px 0 0; border-top: 1px solid var(--c-line); }

/* Sözleşme onayı referansta küçük punto; metin uzun olduğu için satır
   yüksekliği biraz açık. */
.ck-onay__onay { font-size: 12px; line-height: 17px; }
/* Uzun metnin içindeki bağlantılar satır ortasında kalabilir — alt çizgi
   bileşeni satır içinde de doğru dursun. */
.ck-onay__onay .ck-ul { display: inline; }

/* Siparişlerim listesi. */
.orders-list { margin-top: 24px; }
.orders-list[hidden] { display: none; }

/* Takip sonucunun basıldığı alan. Zemin BEYAZ kalıyor: kartı oluşturan
   blokların kendi çerçeveleri sınırı yeterince belli ediyor, ayrıca gri
   bir kutuya gerek yok. */
.track-result { margin-top: 34px; }
.track-result[hidden] { display: none; }
/* Sorgu başarısızsa durum satırı kırmızı. */
.track-form__success.is-error { color: #e2001a; }

/* ======================================================== SİPARİŞ KARTI
   Ortak bileşen (siparis-karti.js): siparişlerim ve misafir takip
   sayfalarında kullanılır. Referans: Prada "My Orders" sipariş detayı. */
/* Kartın kendi çerçevesi YOK: ayrıntı üç ayrı beyaz bloktan oluşuyor
   (aşağıda), dışarıdan bir çizgi daha çekmek fazlalık olurdu. */
.ord-card { padding: 24px 0 26px; }
.ord-card__no {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
}
/* Açıklama numaranın hemen altına yapışıyor, o yüzden numaranın alt boşluğu
   bu durumda daralıyor. */
.ord-card__no:has(+ .ord-card__aciklama) { margin-bottom: 6px; }
.ord-card__aciklama {
  margin: 0 0 22px;
  /* Uzun açıklama masaüstünde tek bir uçsuz satıra yayılmasın. */
  max-width: 62ch;
  font-size: 13px;
  line-height: 19px;
  color: var(--c-muted);
}
/* Ayrıntı üç ayrı BEYAZ BLOKTAN oluşuyor (referanstaki gibi):
     1) durum / tarih / teslimat   2) ürün satırları   3) toplam
   Sipariş sayfasının zemini gri (#f5f5f5), bloklar oradan ayrılıyor. Takip
   sayfasının zemini beyaz olduğu için ince çerçeve de var: orada blok
   yalnızca çerçeveyle, gri zeminde beyazlık + hafif gölgeyle okunuyor. */
.ord-card__ust,
.ord-kargo,
.ord-talep,
.ord-lines,
.ord-card__toplam {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.ord-card__ust {
  margin: 0 0 20px;
  padding: 20px;
}
.ord-card__satir {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.ord-card__satir:last-child { margin-bottom: 0; }
.ord-card__satir dt { color: #6c6f71; }
.ord-card__satir dd { margin: 0; text-align: right; }

/* Durum: referansta renkli nokta + büyük harf etiket. */
.ord-durum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* "KARGOYA VERİLDİ" iki satıra bölünüp katı yükseltmesin. */
  white-space: nowrap;
}
.ord-durum::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8a8d8f;
}
.ord-durum.is-ok::before   { background: #1f8a4c; }  /* teslim edildi */
.ord-durum.is-wait::before { background: #c98a12; }  /* hazırlanıyor */
.ord-durum.is-bad::before  { background: #e2001a; }  /* iptal edildi */
/* Kargoda: hazırlanıyordan tek bakışta ayrılsın diye ayrı renk — ikisi de
   "süren" aşama, aynı amberde olsalar birbirine karışırdı. */
.ord-durum.is-yol::before  { background: #1a63c4; }
/* İade: ne olumlu ne olumsuz — kapanmış bir süreç, nötr kalsın. */
.ord-durum.is-off          { color: var(--c-muted); }
.ord-durum.is-off::before  { background: #8a8d8f; }

/* ------------------------------------------------------------ KARGO BLOĞU
   Yalnızca gönderim yapılmış siparişlerde var (siparis-karti.js →
   kargoBlogu). Solda firma + logo, sağda takip numarası ve firmanın takip
   sayfasına giden düğme. Dar ekranda alt alta geçiyor. */
.ord-kargo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin: 0 0 20px;
  padding: 20px;
}
.ord-kargo__baslik {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.ord-kargo__firma { display: flex; align-items: center; gap: 10px; min-height: 34px; }
/* Logo dosyası yoksa img kendini kaldırıyor, firma adı yazısı kalıyor.
   Firmaların en/boy oranı çok farklı (2.7:1 ile 1.4:1 arası); yalnızca
   yükseklik sabitlenirse geniş olanlar satırı taşırıyor. İki sınır birden
   veriliyor, `object-fit` oranı bozmuyor. */
.ord-kargo__logo {
  display: block;
  max-height: 34px;
  max-width: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ord-kargo__ad { font-size: 14px; line-height: 19px; }
/* Logo yüklendiyse firma adını AYRICA yazmıyoruz — logo zaten adı söylüyor.
   Yazı yalnızca yedek: dosya yoksa (ya da yüklenemezse) `<img>` kendini
   kaldırıyor, `:has()` de o an yeniden değerlendirilip adı geri getiriyor.
   Ekran okuyucu her hâlükârda görüyor: img'nin alt metni firma adı. */
.ord-kargo__firma:has(.ord-kargo__logo) .ord-kargo__ad { display: none; }

.ord-kargo__sag { margin-left: auto; }
.ord-kargo__takip { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
/* Numara seçilebilir bir alan gibi dursun — kopyalanacak şey o. */
.ord-kargo__no {
  display: flex; align-items: center;
  padding: 9px 14px;
  background: #f1f1f2;
  border-radius: 4px;
  font-size: 14px;
  line-height: 19px;
  user-select: all;
}
.ord-kargo__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-size: 13px;
  line-height: 19px;
  font-weight: var(--fw-medium);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease);
}
.ord-kargo__btn:hover { border-color: var(--c-ink); }
.ord-kargo__ok {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

@media (max-width: 599px){
  /* Dar ekranda iki sütun alt alta; sağ blok sola yaslanıyor. */
  .ord-kargo__sag { margin-left: 0; }
}

/* Birden fazla ürün varsa aralarına ince ayırıcı giriyor. */
.ord-lines {
  margin: 0;
  padding: 20px;
  list-style: none;
}
.ord-line { display: flex; gap: 16px; padding-bottom: 20px; }
.ord-line + .ord-line { padding-top: 20px; border-top: 1px solid var(--c-line); }
.ord-line:last-child { padding-bottom: 0; }
.ord-line__media {
  display: block;
  flex: none;
  width: 85px;
  aspect-ratio: var(--card-ratio);
  background: #f1f1f2;
}
.ord-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ord-line__text { flex: 1 1 auto; min-width: 0; }
.ord-line__name { margin: 0; font-weight: var(--fw-medium); }
.ord-line__meta { margin: 8px 0 0; }
.ord-line__price { margin: 10px 0 0; text-align: right; font-weight: var(--fw-medium); }

/* Ara toplam · gönderim · toplam. Ara satırlar normal ağırlıkta ve küçük,
   yalnızca son satır vurgulu — kargo ücreti eklenince bu kırılım şart oldu. */
.ord-card__toplam {
  margin-top: 20px;
  padding: 18px 20px;
}
.ord-card__tsatir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 19px;
}
.ord-card__tsatir--son {
  margin-bottom: 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
}
/* Tek satır kaldıysa (eski kayıt) üstündeki çizgi gereksiz. */
.ord-card__tsatir--son:first-child { padding-top: 0; border-top: none; }

/* ------------------------------------------------ DESTEK / İADE DÜĞMELERİ
   Kargo bloğunun hemen altında, diğerleriyle aynı beyaz kart. */
.ord-talep { margin: 0 0 20px; padding: 20px; }
.ord-talep__metin {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 19px;
  color: var(--c-muted);
}
.ord-talep__btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* Destek bir bağlantı (iletişim formuna gider), iade bir düğme (kutu açar) —
   ikisi de aynı görünmeli. */
.ord-talep__btn {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  padding: 12px 18px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.ord-talep__btn:hover { border-color: var(--c-ink); }
.ord-talep__ok {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

@media (max-width: 599px){
  /* Dar ekranda düğmeler alt alta ve TAM GENİŞLİK — yan yana sığmadıkları
     için kısa kalıp sağda boşluk bırakıyorlardı. */
  .ord-talep__btns { flex-direction: column; }
  .ord-talep__btn { width: 100%; justify-content: center; }
}

/* ============================================================ TALEP KUTUSU
   Destek ve iade formlarının açıldığı ortak modal (siparis-karti.js).
   Sayfaya tek bir kabuk ekleniyor, içerik talebe göre değişiyor. */
.tmodal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tmodal[hidden] { display: none; }
.tmodal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
/* Kutu açıkken arkadaki sayfa kaymasın. */
body.tmodal-acik { overflow: hidden; }

.tmodal__panel {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px 24px 24px;
  background: var(--c-paper);
  border-radius: 6px;
}
.tmodal__panel:focus { outline: none; }

/* Çerçevesiz: sitedeki diğer kapatma düğmeleri de yalnızca çarpı. */
.tmodal__close {
  position: absolute;
  top: 16px; right: 16px;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.tmodal__close:hover { opacity: .6; }
.tmodal__close svg { width: 16px; height: 16px; stroke-width: 1.5; }

.tmodal__baslik {
  margin: 0 40px 20px 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------- Form alanları */
.tform__ust {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  line-height: 19px;
}
.tform__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.tform__input {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 11px 12px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.tform__input:focus { outline: none; border-color: var(--c-ink); }

/* Açılır alan: tarayıcının kendi oku kenara yapıştığı için kapatılıp
   sitedeki diğer select'lerle aynı ok konuyor (.pi-field--select deseni:
   sağdan 14px, öncesinde kısa dikey ayraç). */
.tform__select { position: relative; margin-bottom: 20px; }
.tform__select .tform__input {
  margin-bottom: 0;
  padding-right: 46px;
  appearance: none;
  -webkit-appearance: none;
}
.tform__chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--c-ink); pointer-events: none;
}
.tform__chevron svg { width: 20px; height: 20px; display: block; }
.tform__chevron::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: var(--c-line);
}
/* Salt okunur sipariş numarası: düzenlenebilir görünmesin. */
.tform__input--kilitli { background: #f1f1f2; color: var(--c-muted); }

/* ------------------------------------------------------ İade ürün listesi */
.tform__urunler { margin: 0 0 20px; padding: 0; list-style: none; }
.tform__urun + .tform__urun { border-top: 1px solid var(--c-line); }
.tform__urun-etiket {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
}

/* Onay kutusu — .ck-check ile aynı yapı: gerçek input gizli, görünen yüz
   ::after (üstte, opak), hover halosu ::before (arkada, merkezden büyür). */
.tform__kutu { position: absolute; opacity: 0; width: 0; height: 0; }
.tform__kutu-yuz {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
}
.tform__kutu-yuz::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--c-ink);
  background: var(--c-paper);
}
.tform__kutu:checked + .tform__kutu-yuz::after {
  background: var(--c-ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 6.5'/%3E%3C/svg%3E")
    center / 20px no-repeat;
}
.tform__kutu-yuz::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 0;
  background: #dfe1e2;
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease);
}
.tform__urun-etiket:hover .tform__kutu-yuz::before { transform: scale(1); }
.tform__kutu:focus-visible + .tform__kutu-yuz { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.tform__urun-media {
  display: block;
  flex: none;
  width: 56px;
  aspect-ratio: var(--card-ratio);
  background: #f1f1f2;
}
.tform__urun-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tform__urun-bilgi { min-width: 0; }
.tform__urun-ad { display: block; font-size: 14px; line-height: 19px; font-weight: var(--fw-medium); }
.tform__urun-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--c-muted); }
.tform__urun-tutar { display: block; margin-top: 6px; font-size: 14px; font-weight: var(--fw-medium); }

/* ------------------------------------------------------------- Alt kısım */
.tform__hata {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 18px;
  color: #e2001a;
}
.tform__hata[hidden] { display: none; }

.tform__alt { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.tform__gonder {
  padding: 13px 24px;
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
  color: #fff;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
/* Destek formunda tek düğme var, tam genişlik (referanstaki gibi). */
.tform > .tform__gonder { width: 100%; }
.tform__gonder:hover { opacity: .85; }
.tform__gonder:disabled { opacity: .5; cursor: default; }
.tform__vazgec {
  padding: 13px 24px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.tform__vazgec:hover { border-color: var(--c-ink); }

/* --------------------------------------------------------------- Sonuç */
.tform__ok { text-align: center; padding: 8px 0 4px; }
.tform__ok-metin { margin: 0 0 10px; font-size: 14px; line-height: 20px; }
.tform__ok-no { margin: 0 0 22px; font-size: 13px; color: var(--c-muted); }
.tform__ok .tform__gonder { min-width: 160px; }

/* ==================================================== SİPARİŞ ÖZET SATIRI
   Listede duran tıklanabilir satır: no · durum + alıcı · görsel · tarih +
   tutar · "›". Tamamı tek bağlantı, ayrıntı görünümünü açar.

   Masaüstünde tek satır (5 sütunlu ızgara), mobilde iki kata sarıyor:
     [ no          durum  › ]
     [ görsel   tarih/tutar ]
   ======================================================================== */
.ord-row {
  display: grid;
  align-items: center;
  gap: 12px 20px;
  /* Mobil: iki kat + aralarında ayırıcı çizgi. Ok YALNIZCA üst katta —
     iki katın ortasına sarkmıyor. Alt katta tarih/tutar en sağa kadar
     uzanıyor (ok sütununu da kaplıyor). */
  grid-template-columns: 1fr auto 14px;
  grid-template-areas:
    "no     durum  ok"
    "ayrac  ayrac  ayrac"
    "media  son    son";
  padding: 20px 16px;
  /* Dört kenarı da olan BEYAZ bir kutu; sayfanın gri zemininden (#f5f5f5)
     ayrılıyor. Üzerine gelince çerçeve siyahlaşıyor. */
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
/* Numara ve durum artık ikisi de bölünmediği için üst katın en az bir
   genişliği var. Çok dar ekranda (360px ve altı) yan yana sığmayabilirler;
   taşmak yerine boşlukları ve numara puntosunu kısıyoruz. Değerler aynı
   ekrandaki bütün kartlarda aynı olduğu için liste yine tekdüze kalıyor. */
@media (max-width: 400px){
  .ord-row { gap: 10px 12px; padding: 18px 14px; }
  .ord-row__ayrac { margin: 0 -14px; }
  .ord-row__deger { font-size: clamp(13px, 3.9vw, 16px); }
  .ord-durum { font-size: 11px; }
}

.ord-row + .ord-row { margin-top: 12px; }
.ord-row:hover { border-color: var(--c-ink); }
.ord-row:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.ord-row__no    { grid-area: no; display: block; min-width: 0; }
/* `min-width: 0` olmadan uzun alıcı adı sütunu şişirip numarayı sıkıştırır;
   artık daralan taraf burası, numara değil. */
.ord-row__durum { grid-area: durum; display: block; text-align: right; min-width: 0; }
.ord-row__media { grid-area: media; }
.ord-row__son   { grid-area: son; display: block; text-align: right; }
.ord-row__ok    { grid-area: ok; }
.ord-row__ayrac {
  grid-area: ayrac;
  display: block;
  height: 1px;
  /* Kutunun yan dolgusunu aşıp kenardan kenara uzansın (referanstaki gibi). */
  margin: 0 -16px;
  background: var(--c-line);
}

.ord-row__etiket {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: #6c6f71;
}
.ord-row__deger {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 21px;
  font-weight: var(--fw-medium);
  /* SİPARİŞ NUMARASI BÖLÜNMEZ. Önce `overflow-wrap: anywhere` vardı ve
     ızgara sol sütunu dilediği kadar daraltabiliyordu: durum etiketi uzun
     olduğunda ("HAZIRLANIYOR" > "TESLİM EDİLDİ") numara ikiye bölünüp kart
     bir satır uzuyordu — aynı listedeki kartlar farklı boyda görünüyordu.
     `nowrap`, numaranın genişliğini sütunun alt sınırı yapıyor. */
  white-space: nowrap;
}
.ord-row__alici {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  color: #6c6f71;
  /* Uzun ad sarıp katı yükseltmesin: tek satır, taşarsa üç nokta. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Durum etiketi burada sağa yaslı: nokta metnin solunda kalsın diye satır içi. */
.ord-row__durum .ord-durum { justify-content: flex-end; }

.ord-row__media {
  display: block;
  width: 64px;
  aspect-ratio: var(--card-ratio);
  background: #f1f1f2;
}
.ord-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Çoklu ürün: görseller üst üste, sırayla açılıp kapanıyor (siparis-karti.js
   → slaytlar). Tek fotoğraf birden fazla ürünlü siparişi temsil etmiyor. */
.ord-row__media--slayt { position: relative; overflow: hidden; }
.ord-row__media--slayt img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease);
}
.ord-row__media--slayt img.is-on { opacity: 1; }
/* Hareketi azalt: geçiş anında olsun. Sayaç zaten hiç başlamıyor, bu
   yalnızca ilk karenin belirmesini anlık yapıyor. */
@media (prefers-reduced-motion: reduce){
  .ord-row__media--slayt img { transition: none; }
}

.ord-row__tarih { display: block; font-size: 13px; line-height: 18px; color: #6c6f71; }
.ord-row__tutar {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 21px;
  font-weight: var(--fw-medium);
}

/* Ok: CSS ile çizilen köşe — ayrı bir görsel dosyası gerekmiyor. */
.ord-row__ok {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--c-ink);
  border-bottom: 1.5px solid var(--c-ink);
  transform: rotate(-45deg);
  justify-self: end;
  transition: transform var(--dur-fast) var(--ease);
}
.ord-row:hover .ord-row__ok { transform: rotate(-45deg) translate(2px, 2px); }

@media (min-width: 768px){
  /* Masaüstü: hepsi tek satırda. */
  .ord-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto minmax(0, 0.8fr) 14px;
    grid-template-areas: "no durum media son ok";
    gap: 24px;
    padding: 24px;
  }
  .ord-row__durum { text-align: left; }
  .ord-row__durum .ord-durum { justify-content: flex-start; }
  .ord-row__media { width: 72px; }
  /* Tek satırda ayıracak bir şey yok. */
  .ord-row__ayrac { display: none; }
}

/* ===================================================== SİPARİŞ AYRINTISI
   Özet satırına tıklanınca liste yerine bu görünüm geliyor
   (#/siparislerim/<sipariş no>). Üstte listeye dönen "Geri" bağlantısı. */
.orders-detail { margin-top: 8px; }
.orders-detail[hidden] { display: none; }

/* Ayrıntı açıkken listenin tüm parçaları ve üstteki hero saklanıyor —
   referansta da ayrıntı ekranı sayfayı tek başına kaplıyor. Sınıf JS ile
   <section class="account__content--orders"> üzerine konuyor. */
.account__content--orders.is-detail .orders-hero,
.account__content--orders.is-detail .orders-history__title,
.account__content--orders.is-detail .orders-history__subtitle,
.account__content--orders.is-detail .orders-tabs,
.account__content--orders.is-detail .orders-list,
.account__content--orders.is-detail .orders-panel { display: none; }

.orders-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 19px;
  color: var(--c-ink);
  cursor: pointer;
}
.orders-back::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.orders-back:hover::before { transform: rotate(45deg) translate(-2px, 2px); }

/* Sipariş numarası "Geri"nin hemen altında dursun: kartın üst dolgusu
   burada daralıyor. Açıklama metni kartın içinde, numaranın altında
   (bkz. siparis-karti.js → karti(s, aciklama)). */
.orders-detail .ord-card { padding-top: 6px; }

/* ==================================================== SİPARİŞ ONAY SAYFASI
   tesekkurler.html — ödeme sonrası. Ödeme akışının başlığını ve bileşenlerini
   (.ck-line, .ck-sum, .ck-onay__*) yeniden kullanır; özet sütunu YOKTUR,
   her şey tek sütunda akar. Referans: Prada "thanks for shopping" ekranı. */
/* Özet sütunu onay durumunda da DURUR: masaüstünde sipariş özeti ve
   akordeonlar (Güvenli ödeme / Bize ulaşın / Gönderim ve iade) orada.
   Mobilde sütunun özet kısmı zaten gizli, yalnızca akordeonlar kalır —
   sipariş özetini mobilde sol sütundaki gri şerit (.tsk-ozet) veriyor. */
/* Ödeme akışında başlık gri bandın içinde durur; burada bant yok (referansta
   logo beyaz zeminde), yoksa altında boş gri bir şerit kalıyor. */
/* Ödeme hatası durumu (#odeme-hatasi) aynı iskeleti kullanır: form kapanır,
   geriye logo + tek sütunluk metin kalır. */
.ck.is-onay .ckhead,
.ck.is-hata .ckhead { background: none; padding-bottom: 0; }
/* Mobil özet çubuğu (tutar + açılır panel) sepete bakar; onay durumunda sepet
   boşaltıldığı için "0 TL" yazıp duruyordu. Form kapandı, o da kapanır.
   Hata durumunda sepet DOLU kalır ama ödenecek bir şey kalmadığı için tutar
   çubuğu orada da anlamsız. */
.ck.is-onay .cksum,
.ck.is-hata .cksum { display: none; }

.tsk { padding: 30px var(--ck-pad) 0; }
.tsk[hidden] { display: none; }
.tsk__title {
  margin: 0;
  /* Referansta sayfanın en büyük yazısı; projede 700 ağırlık yok, vurgu
     punto ve --fw-medium ile veriliyor. */
  font-size: clamp(26px, 5.4vw, 34px);
  line-height: 1.2;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.tsk__no { margin: 18px 0 0; font-size: 16px; line-height: 22px; }
.tsk__no span { font-weight: var(--fw-medium); }
.tsk__desc { margin: 16px 0 0; line-height: 20px; max-width: 560px; }
.tsk__acc { margin: 0; }
.tsk--hata { padding-bottom: 40px; }

/* --------------------------------------------- ödeme hatası (#odeme-hatasi)
   Referans: prada.com/tr/tr/checkout-new/checkout-error.html. Başlık +
   açıklama + iki eylem; sağ sütunda yalnızca akordeonlar kalır (sipariş
   özeti data-step ile kapanıyor). */
.tsk--odeme-hatasi { padding-bottom: 40px; }
/* Açıklama referansta iki satırda akıyor; onay ekranındaki 560px ölçüsü bu
   uzun metni dört satıra bölüyordu. */
.tsk--odeme-hatasi .tsk__desc { max-width: 680px; }
/* Eylem satırı: metin bağlantı + siyah düğme. MOBİLDE düğme üstte ve tam
   genişlikte (.ck-cta orada %100), bağlantı altında ortalanır — bu yüzden
   column-reverse: DOM sırası masaüstündeki soldan sağa okunuşu korur.
   Bağlantı `align-self: center` olmasa esner ve alt çizgisi (.ck-add::after
   left/right:0) satırın tamamına uzardı. */
.ck-actions--hata {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 22px;
  margin-top: 40px;
}
.ck-actions--hata .ck-add { align-self: center; margin-top: 0; }

/* Sipariş özeti referansta gri bir şerit: ekranın en solundan en sağına. */
.tsk-ozet { margin-top: 34px; background: #f5f5f5; }
.tsk-ozet[hidden] { display: none; }
.tsk-ozet__inner { padding: 30px var(--ck-pad) 34px; }
.tsk-ozet__h {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--fw-medium);
}
/* .ck-line-list mobilde gizli (ödeme sayfasının kuralı) — burada her zaman
   görünür; listenin alt çizgisi tutarlardan önceki ayracı veriyor.
   ÖZGÜLLÜK: `.ck-line-list { display:none }` bu bloktan SONRA tanımlı, aynı
   özgüllükte yazarsak sonraki kazanır ve liste gizli kalır. İki sınıfla
   yazılıyor ki kaynak sırasından bağımsız olsun. */
.tsk-ozet .ck-line-list { display: block; }
.tsk-ozet .ck-line-list[hidden] { display: none; }
/* Gri zeminde ürün görseli yer tutucusu beyaz kalsın, zemine karışmasın. */
.tsk-ozet .ck-line__media { background: #fff; }

/* "Gönderim ve ödeme ayrıntıları" ÖZET SÜTUNUNDA durur (kullanıcı isteğiyle
   sipariş özetiyle yer değiştirdi). Sütunun kendi yan dolgusu olduğu için
   burada yalnızca dikey boşluk ve alt ayraç var. */
/* Alt çizgi YOK: hemen altındaki akordeonun (.cart-acc .faq-item) kendi
   üst çizgisi var, ikisi birden konunca çift ayraç oluyordu.
   Üst boşluk MOBİL için: orada özet sütununun kendi üst dolgusu sıfırlandığı
   için başlık gri şeride yapışıyordu. Masaüstünde sütunun dolgusu yeter. */
.tsk-detay { padding: 30px 0 4px; }
.tsk-detay[hidden] { display: none; }
.tsk-detay .ck-onay__blok:last-child { margin-bottom: 0; }
.tsk-actions { margin: 34px 0 40px; }
/* Düğme ana sütundayken (masaüstü) bölümlerin yan dolgusunu alır; yoksa
   sütunun en sağına dayanıp özet sütununa yapışıyor. Mobilde düğme özet
   sütununa taşındığı için bu seçici eşleşmez — orada sütunun kendi dolgusu
   geçerli, çift dolgu oluşmaz. */
.ck__main > .tsk-actions { padding: 0 var(--ck-pad); }
/* CTA burada <a>; düğme metnini ortalamak için açık hizalama gerekiyor. */
.tsk-actions .ck-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ------------------------------------------ güvenlik kodu çekmecesi
   Referansta sağdan gelen panel: masaüstünde 500px genişlik + tam boy,
   mobilde ekranın tamamı. Sayfa üstünde durduğu için `fixed`. */
.ck-cvc { position: fixed; inset: 0; z-index: 60; }
.ck-cvc[hidden] { display: none; }
.ck-cvc__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.ck-cvc.is-open .ck-cvc__scrim { opacity: 1; }
/* MOBİLDE ALTTAN, İÇERİK BOYUNDA — mini sepet ve istek listesi çekmeceleriyle
   aynı davranış. Tam ekran YAPMA: içerik kısaysa çekmece kısa kalır. */
.ck-cvc__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90dvh;
  background: var(--c-paper);
  transform: translateY(100%);
  transition: transform 400ms var(--ease);
  overflow-y: auto;
}
.ck-cvc.is-open .ck-cvc__panel { transform: none; }
.ck-cvc__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
}
.ck-cvc__close svg { width: 100%; height: 100%; display: block; }
/* Çekmece açılınca odak kapatma düğmesine veriliyor (klavye erişimi için).
   Fareyle açıldığında odak halkası görünmesin; klavyeyle gelindiğinde görünür. */
.ck-cvc__close:focus:not(:focus-visible) { outline: none; }
.ck-cvc__body { padding: 56px 24px 40px; }
.ck-cvc__title {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
}
/* Çizim kendi genişliğini korur, panelden taşmaz. */
.ck-cvc__art { margin: 32px 0 28px; }
.ck-cvc__art svg { width: 100%; max-width: 420px; height: auto; display: block; }
.ck-cvc__text { margin: 0; line-height: 20px; }

/* Çekmece açıkken arkadaki sayfa kaymasın. */
body.is-locked { overflow: hidden; }

.ck-pay__h2 { margin-top: 34px; }
/* Ödeme hatası — CTA'nın altında, sağa yaslı, kırmızı. */
.ck-pay__err { margin: 14px 0 0; font-size: 13px; line-height: 18px; color: #e2001a; text-align: right; }
.ck-pay__err[hidden] { display: none; }
.ck-pay__note { margin: 0; font-size: 13px; line-height: 18px; color: #6c6f71; }

/* ---------------------------------------- özet sütununun 2. adım ekleri */
/* Ürünler 1. adımda çekmecede, burada doğrudan listede. .ck-line
   bileşeninin kendisi çekmeceden geliyor; yalnızca listenin dış boşlukları
   burada. */
/* Ürün listesi ile tutarlar arasında ayırıcı çizgi — 1. adımda bu çizgiyi
   "Ürünleri görüntüle" düğmesinin border-bottom'ı veriyor; 2. adımda düğme
   olmadığı için listenin kendisi taşıyor. */
.ck-line-list {
  /* Mobilde GİZLİ: referansta 2. adımda ürünler özet sütununda değil,
     başlıktaki açılır özet panelinde (.cksum) duruyor. Masaüstünde açılır. */
  display: none;
  margin: 22px 0 0;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--c-line);
  list-style: none;
}
.ck-line-list[hidden] { display: none; }
.ck-line-list .ck-line:last-child { padding-bottom: 0; }

.ck-ship { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.ck-ship[hidden] { display: none; }
.ck-ship__title { margin: 0 0 12px; font-size: var(--fs-body); line-height: 18px; font-weight: var(--fw-medium); }
.ck-ship__body p { margin: 0; line-height: 20px; }
.ck-ship__edit { margin: 12px 0 0; }

/* Alt çizgili bağlantı — site genelindeki CTA çizgisi: hover'da sağa silinip
   soldan geri gelir. .ck-add ile aynı davranış ama BÜYÜK HARF/aralık yok
   (referansta "Düzenle" normal yazımda).
   DİKKAT: `link-underline` bir SINIF DEĞİL, @keyframes adı — sınıf olarak
   yazmak hiçbir şey yapmaz. Çizgiyi veren ::after'dır. */
.ck-ul { position: relative; display: inline-block; }
.ck-ul::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.ck-ul:hover::after { animation: link-underline var(--dur-line) var(--ease); }

@media (min-width: 1024px){
  .checkout-page { --ck-pad: clamp(56px, 9.4488vw, 120px); }

  /* Referansta bant ~177px; logo 29 + adimlar 17 + baslik 28 satirlariyla
     birlikte asagidaki bosluklar bu yuksekligi verir. Baslik ile teslimat
     kutucuklari arasindaki 32px referanstan bire bir alindi. */
  .ckhead { padding: 24px var(--ck-pad) 32px; }
  /* Masaüstünde beyaz çubuk ve mobil özet yok; logo doğrudan bantta. */
  .ckhead__bar { display: block; min-height: 0; padding: 0; background: none; }
  .ckhead__mark { width: 128px; }
  .cksum { display: none; }
  .ck-crumb,
  .ck-title { padding-left: 0; padding-right: 0; }
  /* Izgara: 1. satır form + özet, 2. satır alt şerit. Özet sütunu iki
     satırı birden kapladığı için sol kenarındaki ayraç çizgisi şeridin
     yanından geçip sayfanın en altına iner. */
  .ck {
    display: grid;
    grid-template-columns: 1fr 33.3333%;
    align-items: stretch;
  }
  .ck__main { grid-column: 1; grid-row: 1; }
  .ck__side { grid-column: 2; grid-row: 1 / span 2; }
  .checkout-page .cart-foot { grid-column: 1; grid-row: 2; }

  /* Referansta sol sutun sayfanin 2/3'u, ozet sutunu 1/3'u: 1905px'lik bir
     ekranda sol sutun 1270, iki yandaki 120px dolgu dusunce icerik 1030,
     her kutucuk 515px olur. Sabit bir ust sinir koyarsak genis ekranlarda
     kutucuklar referanstan genis kaliyor, bu yuzden oran serbest. */
  .ck__main { flex: 1 1 auto; min-width: 0; }
  /* Referanstaki degerler: 1905px'lik ekranda sutun 635px, sol dolgu 60,
     sag dolgu 150, icerik 424px. Sutun sayfanin en ustunden baslar (gri
     bant yalnizca sol sutunda), ic blokta py-20 = 80px ust bosluk var;
     boylece baslik logo hizasinin biraz altina denk gelir. Ayrac
     referansta cok acik gri (#f7f7f7). */
  .ck__side {
    flex: 0 0 33.3333%;
    border-top: 0;
    border-left: 1px solid #f7f7f7;
    padding: 80px 32px 64px;
    align-self: stretch;
  }

  .ck-steps { margin-top: 26px; }
  .ck-title { font-size: 22px; line-height: 28px; }

  /* Şeridin iki yanında da bandın grisi 120px kalır — sağdaki 120px aynı
     zamanda sipariş özeti sütunuyla arasındaki mesafedir. */
  .ck-tiles { padding: 0 var(--ck-pad); }
  .ck-tile {
    min-height: 108px;
    padding: 14px 30px 14px 32px;
    gap: 16px;
    font-size: 16px;
    line-height: 20px;
  }

  /* Alanlar dar bir sütunda dursun ama "Onayla" referanstaki gibi sütunun
     sağ kenarına yaslansın — bu yüzden genişlik formda değil bloklarda. */
  .ck-form { padding: 34px var(--ck-pad) 64px; max-width: none; }
  .ck-block,
  .ck-req { max-width: 520px; }
  /* Adres/mağaza kartları referansta sütunun tamamını kaplar (1028px);
     dar 520px sınırı yalnızca giriş alanları için geçerli. */
  .ck-block[data-pane] { max-width: none; }
  .ck-block[data-pane] .ck-check { max-width: 520px; }
  /* Form referansta sütunun tamamını kaplar: 505 + 20 + 505 = 1030. */
  .ck-addrform { grid-template-columns: 1fr 1fr; }
  .ck-fcol--wide { grid-column: 1 / -1; }
  .ck-fcol--row { grid-column: 1; }   /* kendi satırında başlasın */
  /* Seçim halinde iki kart yan yana: 507 + 16 + 507 = 1030. */
  .ck-addrs--pick { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  /* Kayıtlı kartlar da aynı ızgarada (referans: md:grid-cols-2, gap-4). */
  .ck-saved__list { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .ck-saved { margin-top: 32px; }   /* referans: md:pb-sp-32 */
  .ck-cta { width: auto; min-width: 182px; }

  /* 2. adım: kart kutusu referansta sütunun tamamını kaplar (1030px),
     alanlar iki sütun. .ck-fcol--wide yukarıda tanımlı, kart numarası
     satırının tamamını almasını o sağlıyor. */
  .ck-pay { padding: 34px var(--ck-pad) 64px; }
  .ck-card { padding: 26px 24px 32px; }
  .ck-card__grid { grid-template-columns: 1fr 1fr; }
  .ck-pay__note { max-width: 520px; }

  /* Masaüstünde SAĞDAN, tam boy, 500px (referans: lg:w-500, lg:pt-sp-144).
     Mobildeki alt çekmece geometrisi burada tersine çevriliyor. */
  .ck-cvc__panel {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    width: 500px;
    height: 100%;
    max-height: none;
    transform: translateX(100%);
  }
  .ck-cvc.is-open .ck-cvc__panel { transform: none; }
  .ck-cvc__close { top: 30px; right: 30px; }
  .ck-cvc__body { padding: 144px 40px 48px; }

  /* Ürünler özet sütununda yalnızca masaüstünde listelenir. */
  .ck-line-list { display: block; }
  .ck-line-list[hidden] { display: none; }

  .tsk { padding: 40px var(--ck-pad) 0; }
  .tsk-ozet__inner { padding: 36px var(--ck-pad) 40px; }
  /* Referansta iki eylem aynı satırda, sütunun sağına yaslı: önce metin
     bağlantı, sonra siyah düğme. */
  .ck-actions--hata {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
  }
  .ck-actions--hata .ck-add { align-self: auto; }

  /* Hata durumunda sağ sütunda ayraç YOK: referansta (checkout-error.html)
     akordeon satırları çizgisiz duruyor. Yalnızca bu durum ve yalnızca
     masaüstü — mobilde çizgiler satırları bir arada tutuyor, orada
     kaldırılırsa başlıklar boşlukta yüzüyor.
     Kaynak kurallar: `.cart-acc .faq-item { border-top }` (temel) ve
     `.cart-acc .faq-item:last-child { border-bottom }` (sepet sayfasının
     masaüstü bloğu); ikisi de burada sıfırlanıyor. */
  .ck.is-hata .cart-acc .faq-item,
  .ck.is-hata .cart-acc .faq-item:last-child { border: 0; }
  /* Masaüstünde özet sütununun kendi üst dolgusu var. */
  .tsk-detay { padding-top: 0; }

  /* 3. adım: bloklar sol sütunun tamamını değil, okunabilir bir genişliği
     kaplar (referansta metin sütunu dar). */
  .ck-onay { padding: 34px var(--ck-pad) 64px; }
  .ck-lead { padding: 0; }
  .ck-onay__onay { max-width: 1030px; }
}

/* Ozet sutununun yan dolgulari referanstaki kirilimlari izler:
   lg px-32 → xl px-60 → 2xl sol 60 / sag 150. */
@media (min-width: 1280px){
  .ck__side { padding-left: 60px; padding-right: 60px; }
}
@media (min-width: 1536px){
  .ck__side { padding-right: 150px; }
}


/* ==========================================================================
   İSTEK LİSTESİ (istek-listesi.php) + kalp bildirimi
   Referans deseni: kalbe basınca üstte mavi şerit ("Ürün istek listenize
   eklendi." + Görüntüle), header kalbinde küçük nokta, ayrı bir liste sayfası.
   ========================================================================== */

/* Mobil: şerit ekranın en üstüne yapışır — kenardan kenara, header'la aynı
   yükseklikte, tek satır (solda mesaj, sağda GÖRÜNTÜLE). Header'ın üstüne
   biner ve yukarıdan aşağı kayarak gelir. Masaüstü deseni aşağıda. */
.fav-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h-mobile);
  padding: 10px var(--gutter-mobile);
  background: #2535e5;
  color: var(--c-paper);
  font-size: var(--fs-body);
  line-height: 20px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease),
              visibility 0s linear var(--dur-base);
}
.fav-toast > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-toast.is-on {
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--dur-base) var(--ease), visibility 0s;
}
.fav-toast__cta {
  position: relative;
  flex: none;
  color: inherit;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.fav-toast__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.fav-toast__cta:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* Header kalbi: liste doluysa sağ üstte küçük nokta. */
.header__action[href="istek-listesi.php"] { position: relative; }
.header__action[href="istek-listesi.php"].has-items::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2535e5;
}

/* Sayfa: başlık + PLP'yle aynı ızgara (1px aralık). Bu sayfada da hero yok,
   bu yüzden header'ın altında diğer iç sayfalardaki ince ayraç var. */
.wish-page .header__container { border-bottom: 1px solid var(--c-line); }
.wish-page { display: flex; flex-direction: column; min-height: 100dvh; }
/* Sabit header'ın yerini sayfadaki .header-spacer tutuyor; burada ayrıca üst
   dolgu YOK — olursa içerik header yüksekliği kadar aşağı kayıyor. */
.wish {
  flex: 1 0 auto;
  padding: 0 0 64px;
}
/* Başlık referanstan: 20px soldan, 24px üstten, 16px/700, 0.2px aralık. */
.wish__title {
  margin: 0;
  padding: 24px 20px 4px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .2px;
}
/* Izgara referanstan: sütun arası 20px, satır arası 40px, yanlarda 20px
   dolgu, altta 40px. PLP'deki 1px'lik bitişik düzenden farklı — kartlar
   burada ayrık duruyor. */
.wish-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 40px;
  margin: 0;
  padding: 20px 20px 40px;
  list-style: none;
}
/* Kart dikey flex: görsel → ad/fiyat → düğme. Düğme margin-top:auto ile
   alta yaslanır, böylece adı iki satıra düşen kartlarla hizalı kalır. */
.wish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
}
.wish-card__link { display: block; }
.wish-card__media {
  position: relative;
  aspect-ratio: var(--card-ratio);
  background: #f1f1f2;
  overflow: hidden;
}
.wish-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wish-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px;
  line-height: 0;
  transition: opacity var(--dur-fast) linear;
}
.wish-card__fav:hover { opacity: .6; }
.wish-card__fav svg { width: 22px; height: 22px; stroke-width: 1.4; fill: none; display: block; }
.wish-card__fav.is-active svg { fill: currentColor; }
.wish-card__body { padding: 12px 0 14px; }
.wish-card__name {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
.wish-card__price { margin: 4px 0 0; font-size: var(--fs-body); line-height: 18px; }
.wish-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;      /* kart yüksekliği ne olursa olsun en altta */
  min-height: 44px;
  padding: 0 20px;
  background: #000;
  color: var(--c-paper);
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) linear;
}
.wish-card__cta:hover { opacity: .8; }

/* Boş durum referansta sayfanın ortasında: yazı ve düğme hem yatay hem
   dikey ortalı, aralarında 16px. Dikey dolgu masaüstünde 198px; dar
   ekranda bu kadar boşluk gerekmediği için oranlı küçülüyor. */
.wish-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(72px, 22vh, 198px) 20px;
  text-align: center;
}
.wish-empty[hidden] { display: none; }
.wish-empty__text {
  margin: 0;
  max-width: 570px;
  font-size: var(--fs-body);
  line-height: 20px;
}
/* Düğme sayfa genişliğinde değil, içerik genişliğinde (referansta ~210px). */
.wish-empty .cart-cta {
  width: auto;
  min-width: 210px;
  min-height: 44px;
  padding: 15px 20px 13px;
}

@media (min-width: 1024px){
  /* Masaüstü: eskisi gibi header'ın altında ortalanmış kutu. */
  .fav-toast {
    top: var(--header-h);
    left: 50%;
    right: auto;
    justify-content: flex-start;
    gap: 28px;
    min-height: 0;
    max-width: calc(100% - 32px);
    padding: 16px 24px;
    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease),
                visibility 0s linear var(--dur-base);
  }
  .fav-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease),
                visibility 0s;
  }
  /* Referansta 1905px'te 4 × 451.25 + 3 × 20 aralık + 2 × 20 dolgu. */
  .wish-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Dar ekranda iki sütun tek kolona iniyor. Sıralamayı KOLON değil KART
   düzeyinde yapıyoruz.

   NEDEN: kolonu bütün hâlinde taşımak yetmiyordu — aynı kolonda hem
   "gönderen kim" hem "ne yapayım" kartı olabiliyor ve talep ekranında
   gönderenin bilgileri formun en altına düşüyordu. `display: contents`
   kolon kutusunu kaldırıp kartları doğrudan akışa veriyor, böylece her
   kart kendi yerini `data-mobil-sira` ile söylüyor.

   Sıra fikri her ekranda aynı: önce KİM, sonra NE, en sonda NE YAPAYIM —
   işlem düğmeleri okumadan önce çıkmasın. */
@media (max-width: 999px){
  [data-mobil-sira="1"] { order: 1; }
  [data-mobil-sira="2"] { order: 2; }
  [data-mobil-sira="3"] { order: 3; }
  [data-mobil-sira="4"] { order: 4; }
  [data-mobil-sira="5"] { order: 5; }
  [data-mobil-sira="6"] { order: 6; }
  [data-mobil-sira="7"] { order: 7; }
  [data-mobil-sira="8"] { order: 8; }
}


/* ==========================================================================
   ÇEREZ BİLDİRİMİ (parca/cerez.php)
   --------------------------------------------------------------------------
   Ekranın ortasında beyaz kutu. Ölçüler referanstan: 800px genişlik, 40px iç
   boşluk. Site tek renkli olduğu için düğmeler siyah dolgu / beyaz yazı —
   sepetteki CTA diliyle aynı.
   ========================================================================== */
.cerez {
  position: fixed;
  inset: 0;
  z-index: 10000;         /* header (100) ve çekmecelerin üstünde */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cerez[hidden] { display: none; }

/* Perde: arkadaki sayfa okunur kalsın diye hafif. Karar verilene kadar
   tıklamayı da engelliyor — bildirim "görmezden gelinebilir" olmasın. */
.cerez__perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }

.cerez__panel {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 40px;
  background: var(--c-paper);
}
.cerez__panel:focus { outline: none; }

/* Bildirim ve ayarlar AYNI grid gözünde üst üste: satır yüksekliği ikisinin
   büyüğü kadar olduğu için "Çerez ayarları"na basınca kutu boyu değişmiyor.
   Ayrı pencere olduklarında geçişte kutu zıplıyordu. */
.cerez__gorunumler { display: grid; }
.cerez__gorunum {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
}
/* Pasif görünüm yerini koruyor ama görünmüyor. `visibility` bilerek seçildi:
   `opacity` aksine içindeki düğmeleri odaklanamaz ve ekran okuyucuya görünmez
   yapıyor — arkada gizli bir sekme durağı kalmıyor. */
.cerez__gorunum:not(.is-etkin) { visibility: hidden; }

/* Alt bilgideki "Çerez tercihleri" ile doğrudan ayarlara girildiğinde bildirim
   hiç akışta değil: kutu, gösterilmeyen metin kadar boşluk taşımasın. */
.cerez--yalniz .cerez__gorunum:not(.is-etkin) { display: none; }

.cerez__baslik {
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking);
}

.cerez__metin { font-size: 14px; line-height: 22px; color: var(--c-ink); }
.cerez__metin p { margin: 0 0 10px; }
.cerez__metin p:last-child { margin-bottom: 0; }

/* Politika bağlantısı: sitenin her yerindeki animasyonlu alt çizgi. */
.cerez__bag {
  position: relative;
  display: inline-block;
  color: var(--c-ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.cerez__bag::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.cerez__bag:hover::after { animation: link-underline var(--dur-line) var(--ease); }

/* Düğmeler: ayarlar solda, karar düğmeleri sağda. Dar ekranda alt alta ve
   tam genişlik — parmakla en kolay hedef.

   `margin-top: auto`: kutu her iki görünümde de aynı boy olduğu için kısa olan
   görünümün altında boşluk kalıyor. Düğmeler o boşluğun üstünde asılı durmasın
   diye kutunun tabanına iniyor — iki görünümde de aynı hizada. */
.cerez__dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
}
.cerez__dugme-grup { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }

.cerez__btn {
  min-height: 46px;
  padding: 0 24px;
  background: #000;
  border: 1px solid #000;
  color: var(--c-paper);
  font-family: inherit;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--dur-fast) linear;
}
.cerez__btn:hover { opacity: .8; }

/* --- Ayar penceresi ------------------------------------------------------ */
.cerez__grup { margin-top: 24px; border-top: 1px solid var(--c-line); }
.cerez__satir {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
}
.cerez__satir-metin { flex: 1 1 auto; min-width: 0; }
.cerez__satir-ad { margin: 0 0 4px; font-size: 14px; font-weight: var(--fw-medium); }
.cerez__satir-alt { margin: 0; font-size: 13px; line-height: 19px; color: #6b6d6f; }

/* Kapatılamayan kategori: anahtar yerine yazı — kapalıymış gibi görünen
   devre dışı bir anahtar "acaba kapattım mı" sorusu bırakıyor. */
.cerez__acik {
  flex: none;
  align-self: center;
  font-size: 12px;
  letter-spacing: var(--tracking);
  color: #6b6d6f;
  white-space: nowrap;
}

/* Anahtar (checkbox) — gerçek kutu gizli, görünen kısım bizim. */
.cerez__anahtar { flex: none; align-self: center; cursor: pointer; }
.cerez__anahtar input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cerez__anahtar-yuva {
  display: block;
  position: relative;
  width: 46px; height: 26px;
  border-radius: 999px;
  background: #d4d6d7;
  transition: background-color var(--dur-fast) linear;
}
.cerez__anahtar-yuva::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-paper);
  transition: transform var(--dur-fast) var(--ease);
}
.cerez__anahtar input:checked + .cerez__anahtar-yuva { background: #000; }
.cerez__anahtar input:checked + .cerez__anahtar-yuva::after { transform: translateX(20px); }
.cerez__anahtar input:focus-visible + .cerez__anahtar-yuva {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

/* Bildirim açıkken arka plan kaymasın. */
body.cerez-acik { overflow: hidden; }

@media (max-width: 600px){
  .cerez__panel { padding: 24px 20px; }
  .cerez__baslik { font-size: 17px; line-height: 22px; }
  .cerez__dugmeler { flex-direction: column-reverse; }
  .cerez__dugme-grup { flex-direction: column; margin-left: 0; width: 100%; }
  .cerez__btn { width: 100%; }
}


/* ==========================================================================
   KAYITLI KARTLAR (kisisel-bilgiler.php → Ödeme Yöntemleri)
   --------------------------------------------------------------------------
   Kart numarası burada YOK: yalnızca maskeli son dört hane, kuruluş ve banka.
   Kartları iyzico saklıyor (bkz. api/kart-kayit.php).
   ========================================================================== */
/* Ölçüler sayfadaki diğer kartlarla (.info-card) BİREBİR aynı: 40px iç
   boşluk, aralarında 24px. Kayıtlı kart kutuları daha dar olunca sütun
   alt alta iki farklı ritimde görünüyordu. */
.pay-cards { display: flex; flex-direction: column; gap: 24px; }
.pay-cards[hidden] { display: none; }

.pay-card {
  display: flex; align-items: center; gap: 16px;
  padding: 40px;
  background: var(--c-paper);
}
.pay-card__text { flex: 1 1 auto; min-width: 0; }
.pay-card__name {
  margin: 0 0 4px;
  font-size: var(--fs-body);
  line-height: 18px;
  font-weight: var(--fw-medium);
}
/* Maskeli numara tabular: noktalar hizada dursun. */
.pay-card__num {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: #6b6d6f;
  font-variant-numeric: tabular-nums;
}

/* Kaldır: aynı sayfadaki "Düzenle" düğmesinin (.info-card__edit) birebir
   aynısı. Alt çizgi `text-decoration` DEĞİL kendi 1px çizgimiz — o çizgi
   animasyon almıyor; hover'da sağa silinip soldan geliyor
   (@keyframes link-underline), sitenin her yerindeki davranış. */
.pay-card__del {
  flex: none;
  position: relative;
  display: inline-block;
  padding: 0;
  background: none; border: none;
  font-family: inherit; font-size: 13px;
  color: var(--c-ink);
  cursor: pointer;
}
.pay-card__del::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(.5lh);
  height: 1px;
  background: currentColor;
}
.pay-card__del:hover::after { animation: link-underline var(--dur-line) var(--ease); }
/* Silme sürerken düğme sönük ve çizgisiz: tıklanacak bir şey kalmadı. */
.pay-card__del:disabled { color: #9a9c9e; cursor: default; }
.pay-card__del:disabled::after { display: none; }

.pay-cards__note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: #6b6d6f;
}

/* ==========================================================================
   YÖNETİM PANELİ STİLLERİ BU DOSYADA DEĞİL
   --------------------------------------------------------------------------
   Panel kuralları ayrıldı ve yalnızca panelin yüklediği ayrı bir dosyaya
   taşındı — bu dosya herkese açık olduğu için yönetim arayüzünün sınıf
   adlarını taşımamalı. Kural sırası korundu.
   ========================================================================== */


/* ==========================================================================
   YAPIŞKAN FOOTER — kısa sayfalarda footer ekranın dibine otursun
   --------------------------------------------------------------------------
   SORUN: içerik görünen alandan kısa kaldığında belge de kısa kalıyor, footer
   sayfanın ortasında bitiyor ve altında bomboş bir şerit kalıyordu. En belirgin
   hâli kategori sayfasının "ürün bulunamadı" durumu: 940px'lik bir pencerede
   footer 719'da bitiyor, ALTINDA 221px boşluk ölçüldü.

   Sepet, ödeme ve istek listesi ekranlarında bu düzen ZATEN vardı
   (.cart-page / .checkout-page / .wish-page — yukarıda). Kalan sayfalara aynı
   kalıp aynı birimlerle uygulanıyor; yeni bir yöntem uydurulmadı:
   gövde dikey flex + `min-height: 100dvh`, ana içerik `flex: 1 0 auto` ile
   artan boşluğu yutuyor, footer aşağı itiliyor.

   `1 0 auto` bilinçli: içerik BÜYÜYOR ama küçülmüyor (shrink 0), yani uzun
   sayfalarda hiçbir şey değişmiyor — kural yalnızca kısa sayfalarda etkili.
   ========================================================================== */
.plp-page,
.pdp-page,
.help-page,
.account-page,
.store-page { display: flex; flex-direction: column; min-height: 100dvh; }

/* Her sayfanın ana içerik kapsayıcısı farklı adlandırılmış; hepsi listeleniyor
   ki büyüyecek olan öğe belirsiz kalmasın. */
.plp-page .plp,
.pdp-page .pdp,
.help-page .help,
.help-page .legal,
.help-page .hata,
.account-page .account,
.store-page .store { flex: 1 0 auto; }

/* Kategori sayfasında SAYFA YOLU (breadcrumb) `main.plp`'nin İÇİNDE, son
   çocuk olarak duruyor (ürün sayfasında ise <main> dışında — orada ek bir
   şey gerekmiyor). Üstteki kural `.plp`yi büyütünce artan boşluk son çocuğun
   ALTINDA birikiyor, yani sayfa yolu ile footer arasında: "0 ürün" durumunda
   661px ölçüldü.

   Çözüm: `.plp` de dikey flex olsun ve sayfa yolu `margin-top: auto` ile
   kutunun dibine insin. Böylece boşluk ürün ızgarasının altında kalıyor,
   sayfa yolu footer'ın hemen üstüne oturuyor. Uzun sayfalarda büyüyecek
   boşluk olmadığı için hiçbir şey değişmiyor. */
.plp-page .plp { display: flex; flex-direction: column; }
.plp-page .plp-crumbs { margin-top: auto; }