/* =====================================================================
 *  VİTRİN TEMASI (e-ticaret) — 2.3 (01.11.2026, miven)
 * ---------------------------------------------------------------------
 *  Butik moda mağazası dili: kırık beyaz zemin, ince çizgiler, serif
 *  başlık + sakin arayüz yazısı; gölge yerine çizgi ve boşluk. Rozet
 *  kalabalığı yok; üst başlık yalnız sahibi yazdıysa, çizgisiz küçük
 *  harf aralıklı (2.2). Bölüm başlıkları sola yaslı, "tümü" bağlantısı
 *  aynı satırda. 2.2: logo boyu ve ürün görsel oranı (Görünüm → Tema),
 *  kategori sayısına göre ızgara, Hesabım alt çizgili sekmeler.
 *  Serif başlık yalnız Source Serif 4 (ekran kesimi). Fraunces 2.3'te
 *  çıktı: "f"nin kancası her kesimde yandaki harfe ve i noktasına
 *  biniyordu ("fiyat", "Şifon", "zarif"); "Karakter" çifti kalktı,
 *  "Zarif" Source Serif 4 + Manrope oldu.
 *
 *  MARKALAŞTIRMA (Görünüm → Tema): her şey değişkenden gelir.
 *    · Palet (--cy-brand-*, --cy-accent) → düğmeler, odak halkası, sepet
 *      rozeti; vurgu rengi çizgilere ve ikinci yüzeye hafifçe siner.
 *      Paletin "zemin" tonu (--cy-palet-zemin; yalnız açık kipte) sayfa
 *      zemini olur (mürdümde krem); tanımsızsa zemin vurgudan türer.
 *    · Yazı çifti (--cy-font-baslik, --cy-font) → --vt-serif / --vt-sans.
 *    · Köşe (--cy-radius-*) → kart, görsel, form, seçenek düğmesi.
 *    · Düğme biçimi (SiteGorunumu "dugme") → .cy-btn köşesi.
 *  Mağaza bileşenleri assets/css/magaza.css'te; burası onların temaya
 *  özgü tonunu, köşesini ve ritmini verir (magaza.css'ten sonra değil
 *  ÖNCE yüklenir: eşit özgüllükte .cy-site önekiyle yazılır).
 *
 *  Yazı tipleri: OFL lisanslı (Fontsource), Latin + Latin-ext.
 * ================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-serif-4-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-serif-4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Tokenlar ------------------------------------------------------- */
:root {
    /* Köşeler: temanın varsayılanı az yuvarlak; "Köşe" seçilirse site dosyası (sonra yüklenir) ezer.
       magaza.css'teki --cy-mg-radius de --cy-radius-lg'den gelir. */
    --cy-radius-xs: 2px;
    --cy-radius-sm: 4px;
    --cy-radius:    6px;
    --cy-radius-lg: 8px;

    /* Nötrler: zemin paletin "zemin" tonu (ThemeCustomizer → --cy-palet-zemin, yalnız açık kipte); palet
       tanımlamıyorsa vurgu rengi zemine çok hafif siner. İkinci yüzey ve çizgiler vurgudan, zeminin üstüne. */
    --vt-zemin:  var(--cy-palet-zemin, color-mix(in srgb, var(--cy-accent, #c6a27a) 4%, #fbfaf8));
    --vt-alt:    color-mix(in srgb, var(--cy-accent, #c6a27a) 11%, var(--cy-palet-zemin, #f5f2ee));
    --vt-yuzey:  var(--cy-palet-yuzey, #ffffff);
    --vt-cizgi:  color-mix(in srgb, var(--cy-accent, #c6a27a) 16%, #e5e0d9);
    --vt-metin:  color-mix(in srgb, var(--cy-brand-900, #1d1c1a) 25%, #1c1b19);
    --vt-soluk:  color-mix(in srgb, var(--cy-brand-900, #1d1c1a) 12%, #66615a);
    --vt-vurgu:  var(--cy-accent, #c6a27a);
    --vt-dugme:      var(--cy-brand-600, #2b2a27);
    --vt-dugme-ust:  var(--cy-brand-800, #000);
    --vt-odak:       var(--cy-brand-600, #2b2a27);

    --vt-serif:  var(--cy-font-baslik, "Source Serif 4", Georgia, "Times New Roman", serif);
    --vt-sans:   var(--cy-font, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);

    /* Ritim: bölüm aralığı ve başlık ölçeği (telefon → masaüstü akışkan) */
    --vt-bolum:  clamp(3rem, 2.2rem + 4vw, 6rem);
    --vt-h1:     clamp(2rem, 1.45rem + 2.4vw, 3.4rem);
    --vt-h2:     clamp(1.65rem, 1.3rem + 1.6vw, 2.75rem);
    --vt-h3:     clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
    --vt-dugme-h: 46px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-cy-theme="light"]) {
        --vt-zemin: color-mix(in srgb, var(--cy-accent, #c6a27a) 3%, #121211);
        --vt-alt:   color-mix(in srgb, var(--cy-accent, #c6a27a) 5%, #1a1918);
        --vt-yuzey: #1f1e1c;
        --vt-cizgi: #34312d;
        --vt-metin: #efece6;
        --vt-soluk: #b2aca1;
        --vt-dugme: var(--cy-brand-600, #e9e4dc);
    }
}
:root[data-cy-theme="dark"] {
    --vt-zemin: color-mix(in srgb, var(--cy-accent, #c6a27a) 3%, #121211);
    --vt-alt:   color-mix(in srgb, var(--cy-accent, #c6a27a) 5%, #1a1918);
    --vt-yuzey: #1f1e1c;
    --vt-cizgi: #34312d;
    --vt-metin: #efece6;
    --vt-soluk: #b2aca1;
}

/* Çekirdek nötrleri temaya bağla: magaza.css bileşenleri (kart, süzgeç, sepet, form) aynı tonda kalsın. */
body.cy-site {
    --cy-bg: var(--vt-zemin);
    --cy-surface: var(--vt-yuzey);
    --cy-surface-soft: var(--vt-alt);
    --cy-border: var(--vt-cizgi);
    --cy-text: var(--vt-metin);
    --cy-text-muted: var(--vt-soluk);
    --cy-text-soft: color-mix(in srgb, var(--vt-metin) 80%, var(--vt-soluk));   /* çekirdeğin #475569'u kil paletinde soğuk duruyordu (T25) */
    background: var(--vt-zemin);
    color: var(--vt-metin);
    font-family: var(--vt-sans);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.cy-site :is(h1, h2, h3) { font-family: var(--vt-serif); font-weight: 400; letter-spacing: -.015em; font-optical-sizing: auto; text-wrap: balance; }
/* Serif başlıklar ekran kesimiyle (opsz) çizilir: büyük puntoda ince ve dengeli. Source Serif 4'te eksen 60'ta durur
   (onun ekran kesimi); Manrope'ta eksen yok, yok sayılır. Küçük serif yazı orta kesimde. */
body.cy-site :is(h1, h2, h3, .cy-page-title, .cy-slider__baslik, .cy-urun__ad, .cy-home-hero__title) { font-optical-sizing: none; font-variation-settings: "opsz" 144, "WONK" 0; }
body.cy-site :is(.vitrin-nav__brand, .vitrin-nav .nav-link, .vt-kategori__ad, .cy-hesap__avatar, .cy-urun-yorumlar__baslik, .cy-sec-split p) { font-variation-settings: "opsz" 72, "WONK" 0; }
body.cy-site :is(.cy-urun-kart__ad, .cy-yorum__baslik, .cy-oneri, .cy-suzgec__baslik, .cy-urun-sekmeler__panel-baslik) { font-family: var(--vt-sans); }
.cy-site ::selection { background: color-mix(in srgb, var(--vt-vurgu) 35%, transparent); }

/* Odak halkası: klavyeyle gezen her öğede aynı, marka renginde */
.cy-site :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--vt-odak); outline-offset: 2px; box-shadow: none; }
.cy-site :is(.form-control, .form-select):focus { border-color: var(--vt-metin); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-odak) 18%, transparent); }

/* --- Düğmeler: dikdörtgen, az yuvarlak; "Düğme biçimi" seçilirse site dosyası köşeyi ezer --- */
.cy-site .cy-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: var(--vt-dugme-h); border-radius: 4px; font-weight: 500; letter-spacing: .01em; }
.cy-site .cy-btn--lg { min-height: 52px; padding: .85rem 1.7rem; font-size: .9375rem; }
.cy-site .cy-btn--sm { min-height: 38px; }
.cy-site .cy-btn--primary { background: var(--vt-dugme); border-color: var(--vt-dugme); color: #fff; }
.cy-site .cy-btn--primary:hover, .cy-site .cy-btn--primary:focus-visible { background: var(--vt-dugme-ust); border-color: var(--vt-dugme-ust); color: #fff; }
.cy-site .cy-btn--ghost { border-color: color-mix(in srgb, var(--vt-metin) 70%, transparent); color: var(--vt-metin); background: transparent; }
.cy-site .cy-btn--ghost:hover { background: var(--vt-metin); border-color: var(--vt-metin); color: var(--vt-zemin); }
.cy-site .cy-urun-rozet { border-radius: var(--cy-radius-xs); font-weight: 600; letter-spacing: .02em; box-shadow: none; }

/* --- Formlar (giriş, kayıt, iletişim, ödeme): sakin çizgi, rahat dokunma alanı --- */
.cy-site :is(.form-control, .form-select) { min-height: 46px; border-color: var(--vt-cizgi); border-radius: var(--cy-radius-sm); background-color: var(--vt-yuzey); color: var(--vt-metin); }
.cy-site textarea.form-control { min-height: 120px; }
.cy-site .form-label { font-size: .875rem; font-weight: 500; color: var(--vt-metin); }
.cy-site .form-check-input:checked { background-color: var(--vt-dugme); border-color: var(--vt-dugme); }

/* --- Üst menü ------------------------------------------------------ */
.vitrin-nav { background: color-mix(in srgb, var(--vt-zemin) 94%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--vt-cizgi); box-shadow: none; }
.vitrin-nav.is-stuck { box-shadow: 0 1px 0 var(--vt-cizgi); }
.vitrin-nav > .container { min-height: 64px; }
.vitrin-nav__brand { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; margin-right: .5rem; color: var(--vt-metin); font-family: var(--vt-serif); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); font-weight: 500; letter-spacing: -.01em; }
.vitrin-nav__brand:hover { color: var(--vt-metin); }
.vitrin-nav__brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vitrin-nav__brand img { width: var(--cy-logo-kare, 34px); height: var(--cy-logo-kare, 34px); object-fit: contain; }
/* Yatay kelime markası (logo eni boyunun 1,6 katından fazla): yalnız logo görünür. 36 px'te alt yazılı logo
   ("KAHVE · URLA") okunmuyordu (T25); Görünüm → Tema → "Logo boyu" --cy-logo-yatay ile büyütür. */
.vitrin-nav__brand--yazi img { width: auto; height: var(--cy-logo-yatay, clamp(40px, 1.6vw + 22px, 50px)); max-width: min(56vw, 260px); }
.vitrin-nav .nav-link { color: var(--vt-metin); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.vitrin-nav .nav-link:hover { color: var(--vt-soluk); }
.vitrin-nav .nav-link.active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .6em; }
/* Marka adı kalabalık menüde daralmaz, menü alt satıra geçer ("Simya Gü…": bütün modüller açıkken 1534 px'te bile kesiliyordu). Çok uzun ad yine üç nokta olur. */
@media (min-width: 992px) { .vitrin-nav__brand { flex-shrink: 0; max-width: 34%; } }
.vitrin-nav__araclar { display: flex; align-items: center; gap: .1rem; }
.vitrin-nav__araclar :is(.cy-nav-arac, .cy-topbar__toggle, .navbar-toggler) { width: 44px; height: 44px; }
.vitrin-nav .cy-nav-arac:hover { background: color-mix(in srgb, var(--vt-vurgu) 14%, transparent); color: var(--vt-metin); }
.vitrin-nav .cy-nav-avatar { background: var(--vt-metin); color: var(--vt-zemin); font-family: var(--vt-sans); }
.vitrin-nav .cy-nav-arac--uye:hover { background: none; }
.vitrin-nav .cy-nav-arac__sayi { top: 3px; right: 1px; min-width: 18px; height: 18px; background: var(--vt-dugme); color: #fff; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--vt-zemin); }
.vitrin-ara { position: relative; align-items: center; margin-right: .35rem; }
.vitrin-ara input { width: 200px; height: 40px; padding: 0 2.3rem 0 .9rem; border: 0; border-bottom: 1px solid var(--vt-cizgi); border-radius: 0; background: transparent; color: var(--vt-metin); font-size: .875rem; transition: width .25s ease, border-color .2s; }
.vitrin-ara input:focus { width: 280px; outline: none; border-color: var(--vt-metin); box-shadow: none; }
.vitrin-ara button { position: absolute; right: .2rem; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--vt-metin); }
.vitrin-ara .cy-oneri { left: auto; right: 0; width: 380px; }
.vitrin-ara--mobil { display: flex; margin: .75rem 0 .5rem; }
.vitrin-ara--mobil input, .vitrin-ara--mobil input:focus { width: 100%; height: 48px; border: 1px solid var(--vt-cizgi); border-radius: var(--cy-radius-sm); padding-left: .9rem; font-size: 1rem; }
.vitrin-ara--mobil button { right: .35rem; width: 40px; height: 40px; }
.vitrin-ara--mobil .cy-oneri { left: 0; right: 0; width: auto; }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .vitrin-ara input { width: 150px; }
    .vitrin-ara input:focus { width: 210px; }
    .vitrin-nav .nav-link { letter-spacing: .1em; }
}
/* Telefon ve tablet: açılır menü tam genişlikte, büyük dokunma alanı, ince ayraçlar */
@media (max-width: 991.98px) {
    .vitrin-nav__brand { max-width: calc(100% - 150px); }
    .vitrin-nav .navbar-collapse { margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }
    .vitrin-nav .navbar-collapse.show, .vitrin-nav .navbar-collapse.collapsing { border-top: 1px solid var(--vt-cizgi); }
    .vitrin-nav .navbar-nav { padding-bottom: .75rem; }
    .vitrin-nav .nav-item + .nav-item { border-top: 1px solid var(--vt-cizgi); }
    .vitrin-nav .nav-link { display: flex; align-items: center; min-height: 52px; padding-block: .8rem; font-family: var(--vt-serif); font-size: 1.15rem; letter-spacing: 0; text-transform: none; }
    .vitrin-nav .nav-link.active { text-decoration: none; color: var(--vt-metin); font-weight: 600; }
}
@media (max-width: 359.98px) { .vitrin-nav__araclar .cy-topbar__toggle { display: none; } }
/* Telefonda marka adı biraz küçülür: orta uzunlukta ad ("Çamur & Sır Seramik", T23) tek satıra sığar; çok uzunu çekirdek kuralıyla en çok iki satır. */
@media (max-width: 575.98px) { .vitrin-nav__brand { font-size: 1.15rem; } }

/* --- Slider (karşılama): üst başlık sakin (rozet/çerçeve yok); başlık ince serif ---
   Eskiden üst başlık gizlenirdi: sahibi panelde doldurduğu alanı sitede bulamıyordu (T25). */
.cy-site .cy-slider__ust { display: block; margin: 0 0 .9rem; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: .92; }
.cy-site .cy-slider__slayt--koyu-yazi .cy-slider__ust { background: none; color: var(--vt-metin); }
.cy-site .cy-slider__baslik { max-width: 13ch; font-family: var(--vt-serif); font-size: clamp(2.3rem, 1.6rem + 3.6vw, 5rem); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; text-shadow: none; }
.cy-site .cy-slider__slayt--orta .cy-slider__baslik { margin-inline: auto; }
.cy-site .cy-slider__slayt--sag .cy-slider__baslik { margin-left: auto; }
.cy-site .cy-slider__slayt--koyu-yazi :is(.cy-slider__baslik, .cy-slider__metin) { color: var(--vt-metin); }
.cy-site .cy-slider__metin { max-width: 30rem; font-size: clamp(1rem, .95rem + .35vw, 1.125rem); }
.cy-site .cy-slider__slayt--koyu-yazi .cy-slider__dugmeler .cy-btn:not(.cy-btn--primary) { border-color: var(--vt-metin); color: var(--vt-metin); background: transparent; }
.cy-site .cy-slider__slayt--koyu-yazi .cy-slider__dugmeler .cy-btn:not(.cy-btn--primary):hover { background: var(--vt-metin); color: var(--vt-zemin); }
/* Telefonda slayt görselinin üstü giysi, altı boş: yazı alta, okunurluk için yumuşak zemin */
@media (max-width: 767.98px) {
    .cy-site .cy-slider__icerik { align-self: end; padding-block: 2rem 4.25rem; }
    .cy-site .cy-slider__slayt--koyu-yazi .cy-slider__icerik { background: linear-gradient(to top, color-mix(in srgb, var(--vt-zemin) 88%, transparent) 55%, transparent); }
    .cy-site .cy-slider__baslik { max-width: none; font-size: clamp(2rem, 8.4vw, 2.6rem); }
    .cy-site .cy-slider__metin { margin-bottom: 1.25rem; font-size: 1rem; }
    .cy-site .cy-slider__dugmeler .cy-btn { flex: 1 1 auto; }
}

/* --- Bölüm başlıkları: sola yaslı ince serif; üst etiket (çizgili küçük yazı) gösterilmez --- */
.cy-site .cy-home-section { padding: var(--vt-bolum) 0; background: transparent; }
.cy-site .cy-home-section + .cy-home-section { border-top: 0; }
.cy-site .cy-home-head { max-width: 44rem; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); text-align: left; }
.cy-site .cy-home-head h2 { margin: 0; font-size: var(--vt-h2); font-weight: 300; line-height: 1.08; letter-spacing: -.025em; }
.cy-site .cy-home-head p { max-width: 36rem; margin: .6rem 0 0; color: var(--vt-soluk); }
.cy-site .cy-home-badge { display: none !important; }
/* Üst başlık yalnız sahibi doldurduysa basılır; çizgi ya da rozet olmadan, soluk küçük harf aralıklı (T25). */
.cy-site .cy-eyebrow { display: block; margin: 0 0 .55rem; padding: 0; background: none; color: var(--vt-soluk); font-family: var(--vt-sans); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.vt-bolum-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.vt-bolum-bas .cy-home-head { margin-bottom: 0; }
.vt-bolum-bas__tumu, .cy-site .cy-tum-baglanti { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding-bottom: .2rem; border-bottom: 1px solid currentColor; color: var(--vt-metin); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.vt-bolum-bas__tumu { min-height: 0; padding-block: .6rem .2rem; }
.vt-bolum-bas__tumu:hover, .cy-site .cy-tum-baglanti:hover { color: var(--vt-soluk); }

/* --- Klasik karşılama (Slider kapalıyken) --- */
.cy-site .cy-home-hero { background: var(--vt-alt); border-bottom: 0; }
.cy-site .cy-home-hero__title { font-size: var(--vt-h1); font-weight: 300; line-height: 1.03; letter-spacing: -.03em; }
.cy-site .cy-home-hero__lead { color: var(--vt-soluk); }
.cy-site .cy-home-hero img { border-radius: var(--cy-radius); }

/* --- Kategoriler: görsel üstte, altında ad + sayı (telefon 2, tablet ve üstü 4) --- */
.vt-kategori-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem; }
@media (min-width: 768px) { .vt-kategori-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
/* Kategori sayısına göre (T25: beş kategori 4 + 1 dizilip son kart satırda yalnız kalıyordu) */
@media (min-width: 768px) { .vt-kategori-izgara:is([data-adet="3"], [data-adet="6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .vt-kategori-izgara[data-adet="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 992px) { .vt-kategori-izgara[data-adet="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 991.98px) { .vt-kategori-izgara[data-adet="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Telefonda yana kayan şerit (31.10.2026, T22): tek sayıda kategoride son kart satırda yalnız kalıyordu; Hepsiburada'daki gibi kaydırılır. */
@media (max-width: 767.98px) {
    .vt-kategori-izgara { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; gap: .8rem; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) .4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); scrollbar-width: none; }
    .vt-kategori-izgara::-webkit-scrollbar { display: none; }
    .vt-kategori-izgara > * { scroll-snap-align: start; }
}
.vt-kategori { display: block; color: var(--vt-metin); text-decoration: none; }
.vt-kategori:hover { color: var(--vt-metin); }
.vt-kategori__gorsel { display: block; aspect-ratio: var(--cy-mg-oran, 4 / 5); overflow: hidden; border-radius: var(--cy-radius-lg); background: var(--vt-alt); }
.vt-kategori__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.vt-kategori__alt { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-top: .8rem; }
.vt-kategori__ad { font-family: var(--vt-serif); font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); font-weight: 400; line-height: 1.25; }
.vt-kategori__ad::after { content: " →"; display: inline-block; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.vt-kategori__sayi { flex-shrink: 0; color: var(--vt-soluk); font-size: .8125rem; }
@media (hover: hover) {
    .vt-kategori:hover .vt-kategori__gorsel img { transform: scale(1.04); }
    .vt-kategori:hover .vt-kategori__ad::after { opacity: 1; transform: none; }
}
.vt-kategori:focus-visible { outline: 2px solid var(--vt-odak); outline-offset: 4px; border-radius: var(--cy-radius-lg); }

/* --- Ürün ızgarası: telefon 2, tablet 3, masaüstü 4 (liste sayfasında da) --- */
.cy-site .cy-urun-izgara { gap: 1.75rem .85rem; }
@media (min-width: 768px) { .cy-site .cy-urun-izgara { gap: 2.25rem 1.1rem; } }
@media (min-width: 1200px) {
    .cy-site .cy-urun-izgara--dort, .cy-site .cy-magaza__icerik .cy-urun-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.25rem; }
}
.cy-site .cy-urun-kart__gorsel { border-radius: var(--cy-radius-lg); background: var(--vt-alt); }
.cy-site .cy-urun-kart__govde { gap: .15rem; padding-top: .75rem; }
.cy-site .cy-urun-kart__ad { font-size: .9375rem; font-weight: 400; line-height: 1.4; }
.cy-site .cy-urun-kart .cy-urun-fiyat { font-size: .9375rem; }
.cy-site .cy-urun-fiyat__satis { font-weight: 600; }
.cy-site .cy-urun-kart__bedenler { border-radius: var(--cy-radius-sm); }
/* Ürün sayfasında indirim bir kez: fiyatın yanındaki yüzde ve çizili eski fiyat yeter (görseldeki rozet üçüncüsüydü, T25) */
.cy-site .cy-urun__rozetler .cy-urun-rozet--indirim { display: none; }
.cy-site .cy-urun__stok:not(:has(:not(:empty))) { min-height: 0; margin: 0; }   /* betik boş <span> bırakır; iletisi yoksa yer tutmaz */
.cy-site .cy-urun-kart:focus-within { outline-color: var(--vt-odak); border-radius: var(--cy-radius-lg); }
@media (max-width: 575.98px) {
    .cy-site .cy-urun-kart__ad { font-size: .875rem; }
    .cy-site .cy-urun-kart__alt { gap: .3rem .5rem; }
}

/* Liste sayfasının araç çubuğundaki arama masaüstünde de kalır ("17 ürün · ara · Önerilen"): bir ara gizlenmişti,
   sahibi listenin içinde aramayı istedi (T25, enişte). */

/* --- Hesabım: ana sayfadaki alt çizgili sekme dili; avatar sıcak ikinci yüzeyde (T25: dolgulu hap sekmeler ve
   siyah avatar Vitrin'in sakin dilinden ayrı duruyordu) --- */
.cy-site .cy-hesap__sekmeler { gap: 1.4rem; padding-bottom: 0; scrollbar-width: none; }
.cy-site .cy-hesap__sekmeler::-webkit-scrollbar { display: none; }
.cy-site .cy-hesap__sekme { min-height: 44px; padding: .35rem 0; border-radius: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; color: var(--vt-soluk); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.cy-site .cy-hesap__sekme:hover { background: none; color: var(--vt-metin); }
.cy-site .cy-hesap__sekme.is-active { background: none; border-color: var(--vt-metin); color: var(--vt-metin); }
.cy-site .cy-hesap__avatar { background: var(--vt-alt); color: var(--vt-metin); font-family: var(--vt-serif); font-weight: 400; }

/* --- Sekmeli ürün listesi --- */
.cy-urun-sekmeler__bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cy-urun-sekmeler__bas .cy-home-head { margin-bottom: 0; }
.cy-urun-sekmeler__liste { display: flex; gap: 1.6rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cy-urun-sekmeler__liste::-webkit-scrollbar { display: none; }
.cy-urun-sekmeler__liste [role="tab"] { flex-shrink: 0; min-height: 44px; padding: .35rem 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--vt-soluk); font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.cy-urun-sekmeler__liste [role="tab"][aria-selected="true"] { border-color: var(--vt-metin); color: var(--vt-metin); }
.cy-urun-sekmeler.is-sekmeli .cy-urun-sekmeler__panel-baslik { display: none; }
.cy-urun-sekmeler__panel-baslik { margin: 2rem 0 1rem; font-size: 1.3rem; }
.cy-urun-sekmeler__tumu { margin: 2rem 0 0; text-align: center; }

/* Telefonda ürün şeritleri yana kayar (2 kart + bir sonrakinin ucu görünür) */
@media (max-width: 767.98px) {
    .cy-site :is(.vt-kaydir, .cy-urun-sekmeler .cy-urun-izgara) { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; grid-template-columns: none; gap: .9rem; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) .4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); scrollbar-width: none; }
    .cy-site :is(.vt-kaydir, .cy-urun-sekmeler .cy-urun-izgara)::-webkit-scrollbar { display: none; }
    .cy-site :is(.vt-kaydir, .cy-urun-sekmeler .cy-urun-izgara) > * { scroll-snap-align: start; }
}

/* --- Ürün listesi sayfası --- */
.cy-site .cy-magaza__arac { background: color-mix(in srgb, var(--vt-zemin) 96%, transparent); backdrop-filter: blur(8px); }
.cy-site .cy-magaza__arac :is(.form-control, .form-select) { min-height: 42px; }
.cy-site .cy-cip { border-radius: var(--cy-radius-sm); }
.cy-site .cy-kutu { border-radius: var(--cy-radius-sm); }
.cy-site .cy-kutu input { accent-color: var(--vt-dugme); }
@media (max-width: 575.98px) {
    .cy-site .cy-magaza__arac { gap: .45rem; }
}

/* --- Ürün sayfası: başlık serif, seçenek ve adet kutuları temanın köşesiyle --- */
.cy-site .cy-urun__ad { font-family: var(--vt-serif); font-weight: 400; font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem); letter-spacing: -.02em; }
.cy-site .cy-urun__ana, .cy-site .cy-urun__guven { border-radius: var(--cy-radius-lg); }
.cy-site .cy-urun__guven { background: var(--vt-alt); }
.cy-site :is(.cy-secenek__deger, .cy-adet, .cy-urun__bakim li, .cy-urun__kucukler button) { border-radius: var(--cy-radius-sm); }
.cy-site .cy-secenek__degerler.is-renk .cy-secenek__deger { border-radius: 50%; }
.cy-site .cy-secenek__deger[aria-pressed="true"] { border-color: var(--vt-metin); background: color-mix(in srgb, var(--vt-vurgu) 10%, var(--vt-yuzey)); }
.cy-site .cy-urun__sepete { min-height: 52px; letter-spacing: .02em; }
.cy-site .cy-urun__bolum > summary { font-family: var(--vt-sans); letter-spacing: .01em; }
.cy-site .cy-urun__ilgili h2 { font-size: var(--vt-h2); font-weight: 300; }
.cy-site .cy-urun__yapiskan { background: color-mix(in srgb, var(--vt-yuzey) 96%, transparent); backdrop-filter: blur(10px); }
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Tablet dikey: galeri ve bilgi alt alta ama görsel ekranı doldurmasın */
    .cy-site .cy-urun__ana-kutu { max-width: 560px; margin-inline: auto; }
}

/* --- Sepet, ödeme, hesabım: kutular yüzeyde, ince çizgi --- */
.cy-site :is(.cy-hesap__kutu, .cy-sepet__ozet, .cy-odeme__ozet, .cy-odeme__adim, .cy-hesap__kart) { background: var(--vt-yuzey); border-color: var(--vt-cizgi); border-radius: var(--cy-radius-lg); }
.cy-site .cy-sepet__satir img { border-radius: var(--cy-radius-sm); }
.cy-site .cy-page-title { font-family: var(--vt-serif); font-weight: 300; font-size: var(--vt-h1); line-height: 1.08; letter-spacing: -.025em; }
@media (max-width: 575.98px) {
    .cy-site .cy-sepet__satir { grid-template-columns: 72px minmax(0, 1fr); }
    .cy-site .cy-page-title { font-size: clamp(1.75rem, 7vw, 2.2rem); }
}

/* --- Hikâye (metin + görsel): büyük serif, ikinci yüzey --- */
.cy-site .cy-home-section:has(.cy-sec-split) { background: var(--vt-alt); }
.cy-site .cy-sec-split h2 { font-size: var(--vt-h2); font-weight: 300; line-height: 1.06; }
.cy-site .cy-sec-split :is(.cy-prose, .cy-sec-split__metin) p:first-of-type { font-family: var(--vt-serif); font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.5; color: var(--vt-metin); }
.cy-site .cy-sec-split img { border-radius: var(--cy-radius-lg); box-shadow: none; }

/* --- Son değerlendirmeler --- */
.cy-urun-yorumlar__kart { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: clamp(1.15rem, 2.5vw, 1.5rem); border: 1px solid var(--vt-cizgi); border-radius: var(--cy-radius-lg); background: var(--vt-yuzey); }
.cy-urun-yorumlar__yildiz { color: #b8860b; letter-spacing: .12em; }
.cy-urun-yorumlar__yildiz span { color: var(--vt-cizgi); }
.cy-urun-yorumlar__kart blockquote { flex: 1; margin: 0; }
.cy-urun-yorumlar__kart blockquote p { margin: 0; line-height: 1.6; }
.cy-urun-yorumlar__baslik { margin-bottom: .35rem !important; font-family: var(--vt-serif); font-size: 1.15rem; }
.cy-urun-yorumlar__kart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .8125rem; }
.cy-urun-yorumlar__kim { font-weight: 600; }
.cy-urun-yorumlar__alici { color: #1f7a45; font-weight: 500; }
.cy-urun-yorumlar__urun { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding-top: .8rem; border-top: 1px solid var(--vt-cizgi); color: var(--vt-metin); font-size: .875rem; text-decoration: none; }
.cy-urun-yorumlar__urun img { width: 40px; height: 50px; object-fit: cover; border-radius: var(--cy-radius-xs); }
.cy-urun-yorumlar__urun:hover span { text-decoration: underline; }

/* --- Güven şeridi (kartlar "4 sütun"): kutusuz, ince ayraçlı tek sıra --- */
.cy-site .cy-home-section[data-duzen="dort"] { padding: clamp(2rem, 4vw, 3rem) 0; background: transparent; border-block: 1px solid var(--vt-cizgi); }
.cy-site .cy-home-section[data-duzen="dort"] .cy-home-head { display: none; }
.cy-site [data-duzen="dort"] .cy-bento { gap: 0; }
.cy-site [data-duzen="dort"] .cy-bento__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: start; padding: .5rem 1.4rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cy-site [data-duzen="dort"] .cy-bento__item > :not(.cy-bento__icon) { grid-column: 2; }
.cy-site [data-duzen="dort"] .cy-bento__icon { grid-row: span 3; width: 40px; height: 40px; margin: 0; border: 1px solid var(--vt-cizgi); border-radius: 50%; background: transparent; color: var(--vt-metin); }
.cy-site [data-duzen="dort"] .cy-bento__item h3 { margin: .1rem 0 .2rem; font-family: var(--vt-sans); font-size: .9375rem; font-weight: 600; letter-spacing: 0; }
.cy-site [data-duzen="dort"] .cy-bento__item p { font-size: .8125rem; color: var(--vt-soluk); }
.cy-site [data-duzen="dort"] .cy-bento__item .cy-link { margin-top: .3rem; font-size: .8125rem; font-weight: 500; }
@media (min-width: 992px) { .cy-site [data-duzen="dort"] .cy-bento__item + .cy-bento__item { border-left: 1px solid var(--vt-cizgi); } }
@media (max-width: 991.98px) { .cy-site [data-duzen="dort"] .cy-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.2rem; } .cy-site [data-duzen="dort"] .cy-bento__item { padding: .4rem .5rem; } }
@media (max-width: 479.98px) { .cy-site [data-duzen="dort"] .cy-bento { grid-template-columns: minmax(0, 1fr); } }

/* --- Üyelik bandı: marka renginin koyusu, serif başlık --- */
.cy-site .cy-uyelik-cagri { background: color-mix(in srgb, var(--cy-brand-900, #1d1c1a) 70%, #141312); color: #f6f3ee; }
.cy-site .cy-uyelik-cagri :is(.cy-home-head h2, .cy-home-head p) { color: #f6f3ee; }
.cy-site .cy-uyelik-cagri .cy-btn--primary { background: #f6f3ee; border-color: #f6f3ee; color: #1c1b19; }
.cy-site .cy-uyelik-cagri .cy-btn--ghost { color: #f6f3ee; border-color: rgba(246, 243, 238, .6); }
.cy-site .cy-uyelik-cagri .cy-btn--ghost:hover { background: #f6f3ee; color: #1c1b19; }

/* --- SSS ve çağrı bandı --- */
.cy-site .cy-home-cta, .cy-site .cy-cta { border-radius: var(--cy-radius-lg); }
.cy-site :is(.cy-home-cta, .cy-cta) h2 { font-weight: 300; }
.cy-site .cy-faq :is(summary, .accordion-button) { min-height: 52px; }

/* --- İletişim --- */
.cy-site :is(.cy-contact-card, .cy-iletisim__kart) { border-color: var(--vt-cizgi); border-radius: var(--cy-radius-lg); background: var(--vt-yuzey); box-shadow: none; }
.cy-site .cy-harita__kutu { border-radius: var(--cy-radius-lg); }

/* --- Alt bilgi -------------------------------------------------------- */
.cy-site .cy-site-footer { background: var(--vt-alt); border-top: 1px solid var(--vt-cizgi); }
.cy-site .cy-site-footer :is(h2, h3, h4) { font-family: var(--vt-sans); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.cy-site .cy-footer-list a { display: inline-block; padding-block: .2rem; color: var(--vt-soluk); }
.cy-site .cy-footer-list a:hover { color: var(--vt-metin); }
@media (max-width: 575.98px) {
    .cy-site .cy-footer-list a { padding-block: .45rem; }
    .cy-site .cy-site-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { .vt-kategori__gorsel img, .vt-kategori__ad::after, .vitrin-ara input { transition: none; } }