/* ==========================================================================
   FİDE — BİTKİ VE ÇİÇEK TEMASI · TAM STİL DOSYASI
   ==========================================================================

   Bu dosya `public/css/shop.css` İLE BİRLİKTE YÜKLENMEZ, ONUN YERİNE geçer
   (bkz. resources/views/themes/fide/shop/layouts/app.blade.php). Yani burada
   yalnız temanın kendi sınıfları değil, ÇEKİRDEĞİN paylaşılan sınıfları da
   (btn, badge, alert, field, pagination, cartitem, checkout, prose,
   datatable…) bu temanın dilinde yeniden çizilir. Tema ezmediği bir görünüme
   düşüldüğünde (sepet, ödeme, hesabım, blog, kampanyalar, koleksiyonlar,
   karşılaştırma, statik sayfalar) sayfanın stilsiz kalmamasının tek sebebi
   12. bölümdür.

   :root DEĞERLERİ resources/themes/fide.php içindeki `tokens` dizisiyle
   BİREBİR AYNI OLMAK ZORUNDA — panel ince ayar formu başlangıç değerini
   oradan okur ve tests/Feature/ThemeTest.php bunu doğrular.

   KONTRAST (WCAG bağıl parlaklık, #f6f8f4 zemin üstünde ölçüldü):
     --title #1e2b20 13,82:1 · --text #3f4f42 8,16:1 · --muted #5f6f62 4,99:1
     --accent #3f6f3a 5,54:1 · --primary #2f5d3a (üstünde beyaz 7,64:1)
     --control-border #7d8b7f 3,35:1 (WCAG 1.4.11 eşiği 3:1)
     --basari #2f6b46 5,93:1 · --hata #a33131 6,46:1 · --uyari #8a5a12 5,53:1
   Renkler DEĞİŞTİRİLMEZ: hepsi ölçülmüştür.

   TÜRKÇE BÜYÜK HARF: bu dosyada `text-transform: uppercase` HİÇ KULLANILMAZ.
   CSS dönüşümü 'istanbul' sözcüğünü 'ISTANBUL' yapar ('İSTANBUL' olmalı);
   büyütme sunucuda App\Support\Metin::buyuk() ile yapılır.
   ========================================================================== */

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile BİREBİR aynı) --- */
    --primary: #2f5d3a;
    --accent: #3f6f3a;
    --title: #1e2b20;
    --text: #3f4f42;
    --page-bg: #f6f8f4;
    --card-bg: #ffffff;
    --border: #dfe8dc;
    --radius: 14px;
    --card-radius: 24px;
    --btn-radius: 999px;
    --font-scale: 1;
    --container: 1240px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #5f6f62;
    /* Form denetimi kenarlığı: erişilebilirlik için SABİT, --border ile
       karıştırılmaz. --border yalnızca dekoratif çizgidir ve panelden
       istenildiği kadar açık yapılabilir; bu ise 3:1'in altına inemez. */
    --control-border: #7d8b7f;

    --yuzey: #eaf0e6;
    --yuzey-koyu: #dde7d8;
    /* KART HALKASI: bu temanın imzalarından biri. Düşen gölge DEĞİL —
       yayılma yarıçapı 0 olan düz bir halka (0 0 0 6px). Kartlar zeminde
       "fide kabı" gibi durur ve üst üste binen gölgeler oluşmaz. */
    --halka: #eef3ea;
    --halka-koyu: #dfeada;

    --basari: #2f6b46;
    --uyari: #8a5a12;
    --hata: #a33131;

    --golge-yuzen: 0 18px 48px rgba(30, 43, 32, .16);
    --gecis: .18s ease;

    --baslik-yazi: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --govde-yazi: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   1) SIFIRLAMA
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    /* Galeri çapaları (#fid-foto-N) ve bölüm bağlantıları yumuşak kaysın. */
    scroll-behavior: smooth;
    /* Yapışkan başlığın altında kalmasınlar. */
    scroll-padding-top: 96px;
}

/* HAREKET AZALTMA: kullanıcı işletim sisteminde hareketi kısmışsa geçişler
   ve yumuşak kaydırma kapanır. Galeri çapası hâlâ çalışır, yalnızca anında
   sıçrar. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--govde-yazi);
    font-size: calc(16px * var(--font-scale));
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--baslik-yazi);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--title);
}

h1 { font-size: calc(2.125rem * var(--font-scale)); }
h2 { font-size: calc(1.625rem * var(--font-scale)); }
h3 { font-size: calc(1.1875rem * var(--font-scale)); }
h4 { font-size: calc(1.0625rem * var(--font-scale)); }

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul, ol {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

/* ODAK HALKASI: klavye kullanıcısı nerede olduğunu GÖRMELİ. Fare tıklamasında
   görünmesin diye :focus değil :focus-visible. Halka --accent ile çiziliyor;
   yeşil zemin üstünde de görünsün diye ikinci bir beyaz dış halka var. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.fid-serit :focus-visible,
.fid-alt :focus-visible,
.fid-btn:focus-visible {
    outline-color: #ffffff;
}

/* Ekran okuyucuya görünür, gözle görünmez. Çekirdek görünümler de bu adı
   kullanıyor; TANIMLANMAZSA gizli metinler sayfaya düşer. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Fiyatlar: rakam genişlikleri eşit olsun (sütun sütun kaymasın) ve
   "1.299,90 ₺" satır sonunda ikiye BÖLÜNMESİN. */
.fid-fiyat__tutar,
.fid-urun__fiyat strong,
.fid-liste-sayi strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   2) KAPSAYICI VE BÖLÜM
   ========================================================================== */

.fid-en,
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.fid-en--dar {
    max-width: 820px;
}

.fid-bolum,
.section {
    padding-block: 60px;
}

/* Kapsayıcının İÇİNDE kullanılan bölüm: yanlardan bir kez daha girinti
   almasın (ürün sayfasındaki "benzer ürünler" böyle). */
.fid-bolum--ic {
    padding-inline: 0;
}

.fid-bolum--yuzey {
    background: var(--yuzey);
}

.fid-bolum__ust {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.fid-bolum__baslik {
    margin: 0;
    font-size: calc(1.5rem * var(--font-scale));
    /* Başlığın altında ince yaprak çizgisi: bu temanın bölüm imzası. */
    padding-bottom: 10px;
    border-bottom: 3px solid var(--halka-koyu);
}

.fid-bolum__not {
    margin: 0;
    font-size: .875rem;
    color: var(--muted);
}

.fid-bolum__bag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
    background: var(--card-bg);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--accent);
}

.fid-bolum__bag:hover {
    background: var(--yuzey);
    text-decoration: none;
}

.fid-bolum__bag svg {
    transition: transform var(--gecis);
}

.fid-bolum__bag:hover svg {
    transform: translateX(3px);
}

/* Yeşil vurgu etiketi (sera şeridi, bölüm üstü). */
.fid-etiket-yesil,
.fid-rozet {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 15px;
    background: var(--yuzey);
    border-radius: var(--btn-radius);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
}

/* ==========================================================================
   3) BAŞLIK — İKİ KATMAN
   --------------------------------------------------------------------------
   1) ince YEŞİL şerit  2) beyaz ana satır: SOLDA marka, SAĞDA menü + arama +
   ikonlar. Menü SAĞA YASLI (nordika ortalıyor) — imza budur.
   ========================================================================== */

.fid-serit {
    background: var(--primary);
    color: #dfeadb;
    font-size: .8125rem;
}

.fid-serit__sira {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 36px;
    flex-wrap: wrap;
}

.fid-serit__baglar {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.fid-serit a {
    color: #dfeadb;
}

.fid-serit a:hover {
    color: #ffffff;
}

/* --- ana satır --- */

.fid-ust {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.fid-ust__sira {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 78px;
}

.fid-marka {
    flex: 0 0 auto;
    display: grid;
    gap: 2px;
}

.fid-marka:hover {
    text-decoration: none;
}

.fid-marka__ad {
    font-family: var(--baslik-yazi);
    font-size: calc(1.375rem * var(--font-scale));
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--primary);
}

.fid-marka__alt {
    font-size: .6875rem;
    letter-spacing: .12em;
    color: var(--muted);
}

/* SAĞ BLOK: menü + arama + ikonlar tek grupta. `margin-left: auto` bloğu
   sağa yaslar; menü ortalanmaz. */
.fid-sag {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    min-width: 0;
}

.fid-menu__sira {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fid-menu__bag {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: var(--btn-radius);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--title);
    white-space: nowrap;
}

.fid-menu__bag:hover {
    background: var(--yuzey);
    text-decoration: none;
}

.fid-menu__bag[aria-current='page'] {
    background: var(--yuzey);
    color: var(--accent);
}

/* --- arama: TAM YUVARLAK ve GÖRÜNÜR --- */

.fid-arama {
    display: flex;
    align-items: center;
    width: 250px;
    background: var(--yuzey);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: border-color var(--gecis), background var(--gecis);
}

.fid-arama:focus-within {
    background: var(--card-bg);
    border-color: var(--control-border);
}

.fid-arama__alan {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 4px 10px 18px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: .9375rem;
}

.fid-arama__alan:focus {
    outline: none;
}

.fid-arama__gonder {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: 3px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--primary);
}

.fid-arama__gonder:hover {
    background: var(--yuzey-koyu);
}

.fid-ikonlar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fid-ikon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--title);
}

.fid-ikon-btn:hover {
    background: var(--yuzey);
    text-decoration: none;
}

.fid-sayac {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #ffffff;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fid-burger {
    display: none;
}

/* --- mobil çekmece (public/js/shop.js `#mobile-menu` arıyor) --- */

.fid-mobil {
    display: none;
    padding-block: 12px 20px;
    border-top: 1px solid var(--border);
}

.fid-mobil.is-open {
    display: block;
}

.fid-mobil > a,
.fid-mobil summary {
    display: block;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
    color: var(--title);
    cursor: pointer;
}

.fid-mobil details a {
    display: block;
    padding: 10px 2px 10px 18px;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
    color: var(--text);
}

.fid-mobil__arama {
    width: 100%;
    margin-bottom: 12px;
    background: var(--yuzey);
}

/* ==========================================================================
   4) ANA SAYFA
   --------------------------------------------------------------------------
   1) tam genişlik fotoğraf + SOL ALT köşede yüzen kart
   2) kategori balonları (tam yuvarlak)
   3/5) ürün ızgarası 4 kolon
   4) sera şeridi (iki fotoğraf + arada metin)
   6) SSS: solda fotoğraf, sağda açılır sorular
   ========================================================================== */

.fid-kahraman {
    position: relative;
    background: var(--card-bg);
}

.fid-kahraman__foto {
    margin: 0;
}

.fid-kahraman__foto img {
    width: 100%;
    /* Oran sabit: `width`/`height` nitelikleri Blade'de yazılı, burada da
       kırpma oranı sabitlenerek CLS tamamen kapatılıyor. */
    aspect-ratio: 16 / 8;
    max-height: 620px;
    object-fit: cover;
}

/* Kart fotoğrafın SOL ALT köşesinde YÜZER — ortalanmış değil. */
.fid-kahraman__kap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    pointer-events: none;
}

.fid-kahraman__kart {
    pointer-events: auto;
    max-width: 540px;
    padding: 34px 34px 30px;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--golge-yuzen);
}

.fid-kahraman__baslik {
    margin: 0 0 14px;
    font-size: calc(2.5rem * var(--font-scale));
    line-height: 1.08;
}

.fid-kahraman__baslik span {
    display: block;
    margin-top: 10px;
    font-size: calc(1.0625rem * var(--font-scale));
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
}

.fid-kahraman__giris {
    margin-bottom: 22px;
    font-size: calc(1rem * var(--font-scale));
    color: var(--text);
}

.fid-kahraman__eylem {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.fid-guven {
    display: grid;
    gap: 8px;
}

.fid-guven li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    color: var(--text);
}

.fid-guven svg {
    flex: 0 0 auto;
    color: var(--accent);
}

/* --- kategori balonları --- */

.fid-balonlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 26px 20px;
}

.fid-balon {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
}

.fid-balon:hover {
    text-decoration: none;
}

/* TAM YUVARLAK. Kategori görseli varsa daireyi doldurur. */
.fid-balon__daire {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 148px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 999px;
    background: var(--yuzey);
    box-shadow: 0 0 0 6px var(--halka);
    transition: box-shadow var(--gecis), transform var(--gecis);
}

.fid-balon:hover .fid-balon__daire {
    transform: translateY(-3px);
    box-shadow: 0 0 0 9px var(--halka-koyu);
}

.fid-balon__daire img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fid-balon__harf {
    font-family: var(--baslik-yazi);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--accent);
}

.fid-balon__ad {
    margin-top: 12px;
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--title);
}

.fid-balon__alt {
    font-size: .75rem;
    color: var(--muted);
}

/* --- sera şeridi: iki fotoğraf + arada metin --- */

.fid-sera {
    background: var(--yuzey);
    padding-block: 64px;
}

.fid-sera__ic {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr);
    gap: 32px;
    align-items: center;
}

.fid-sera__gorsel {
    margin: 0;
}

.fid-sera__gorsel img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--card-radius);
}

/* İki fotoğraf BİRBİRİNE GÖRE KAYDIRILMIŞ: ilki yukarı, ikincisi aşağı.
   Metin ortada sabit kalıyor; şerit "sıralı üç kutu" gibi değil, sera rafı
   gibi okunuyor. */
.fid-sera__gorsel:first-of-type {
    transform: translateY(-18px);
}

.fid-sera__gorsel:last-of-type {
    transform: translateY(18px);
}

.fid-sera__gorsel figcaption {
    margin-top: 10px;
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--muted);
    text-align: center;
}

.fid-sera__metin {
    padding: 30px;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: 0 0 0 6px var(--halka);
}

.fid-sera__metin h2 {
    margin-bottom: 12px;
    font-size: calc(1.5rem * var(--font-scale));
}

.fid-sera__metin p {
    font-size: .9375rem;
}

/* --- SSS: solda fotoğraf, sağda sorular --- */

.fid-sss {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 40px;
    align-items: start;
}

.fid-sss__gorsel {
    margin: 0;
}

.fid-sss__gorsel img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--card-radius);
    box-shadow: 0 0 0 6px var(--halka);
}

.fid-acilir-grup {
    display: grid;
    gap: 10px;
}

.fid-acilir {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.fid-acilir__bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    font-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--title);
    cursor: pointer;
    list-style: none;
}

.fid-acilir__bas::-webkit-details-marker {
    display: none;
}

.fid-acilir__bas svg {
    flex: 0 0 auto;
    color: var(--accent);
    transition: transform var(--gecis);
}

.fid-acilir[open] .fid-acilir__bas svg {
    transform: rotate(180deg);
}

.fid-acilir__govde {
    padding: 0 18px 18px;
    font-size: .9375rem;
    color: var(--text);
}

/* ==========================================================================
   5) ÜRÜN KARTI — 24px köşe, 1:1 fotoğraf, YEŞİL HALKA, favori sağ üstte
   ========================================================================== */

.fid-izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 22px;
}

/* Liste sayfasında 3 kolon (imza: liste 3, ana sayfa 4). */
.fid-izgara--liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fid-urun {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    /* GÖLGE YOK — düz yeşil halka. Yayılma yarıçapı 0 olduğu için kartlar
       birbirinin üstüne bulanık bir iz düşürmüyor. */
    box-shadow: 0 0 0 6px var(--halka);
    transition: box-shadow var(--gecis), transform var(--gecis);
}

.fid-urun:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 9px var(--halka-koyu);
}

.fid-urun__ust {
    position: relative;
}

.fid-urun__gorsel {
    display: block;
    overflow: hidden;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    background: var(--yuzey);
}

/* FOTOĞRAF 1:1 — bitki fotoğrafı kare çekilir, saksı kadrajın altına oturur. */
.fid-urun__gorsel img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--gecis);
}

.fid-urun:hover .fid-urun__gorsel img {
    transform: scale(1.03);
}

.fid-urun__bos {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    font-family: var(--baslik-yazi);
    font-size: 3rem;
    font-weight: 600;
    color: var(--accent);
}

/* Etiketler SOL ÜSTTE ve METİN TAŞIR: renk tek başına anlam taşımaz. */
.fid-urun__isaret {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    gap: 6px;
    justify-items: start;
}

/* FAVORİ SAĞ ÜSTTE — imza. */
.fid-urun__fav {
    position: absolute;
    top: 10px;
    right: 10px;
}

.fid-fav-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    transition: color var(--gecis), border-color var(--gecis);
}

.fid-fav-btn:hover {
    color: var(--hata);
    border-color: var(--hata);
}

.fid-fav-btn.is-secili {
    color: var(--hata);
    border-color: var(--hata);
    background: #fdf2f2;
}

.fid-fav-btn.is-secili svg {
    fill: currentColor;
}

.fid-urun__govde {
    display: grid;
    gap: 5px;
    padding: 16px 18px 8px;
    flex: 1 1 auto;
    align-content: start;
}

.fid-urun__marka {
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--muted);
}

.fid-urun__ad {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.fid-urun__ad a {
    color: var(--title);
}

.fid-urun__puan {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.fid-urun__puan-adet {
    color: var(--muted);
}

.fid-yildiz {
    color: #b0741c;
    letter-spacing: .05em;
}

.fid-urun__fiyat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 0;
}

.fid-urun__fiyat strong {
    font-family: var(--baslik-yazi);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--title);
}

.fid-urun__fiyat del {
    font-size: .875rem;
    color: var(--muted);
}

.fid-urun__birim {
    margin: 0;
    font-size: .75rem;
    color: var(--muted);
}

.fid-urun__stok {
    margin: 2px 0 0;
    font-size: .8125rem;
}

.fid-urun__dip {
    display: grid;
    gap: 8px;
    padding: 0 18px 18px;
}

/* ==========================================================================
   6) DÜĞMELER (temanın kendi adları; çekirdek `.btn` ailesi 12. bölümde)
   --------------------------------------------------------------------------
   TAM YUVARLAK (--btn-radius: 999px). Bitki vitrininde köşeli düğme
   fotoğrafların yuvarlak kompozisyonuyla çakışıyordu.
   ========================================================================== */

.fid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
    border-radius: var(--btn-radius);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background var(--gecis), border-color var(--gecis);
}

.fid-btn:hover {
    background: #24482d;
    border-color: #24482d;
    text-decoration: none;
}

.fid-btn:disabled,
.fid-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.fid-btn--bos {
    background: transparent;
    color: var(--title);
    border-color: var(--control-border);
}

.fid-btn--bos:hover {
    background: var(--yuzey);
    border-color: var(--primary);
    color: var(--title);
}

.fid-btn--sm {
    padding: 8px 16px;
    font-size: .8125rem;
}

.fid-btn--lg {
    padding: 14px 28px;
    font-size: 1rem;
}

.fid-btn--tam {
    width: 100%;
}

/* Adet kutusunun yanında kalan tüm genişliği kaplar. */
.fid-btn--genis {
    flex: 1 1 auto;
}

/* Metin düğmesi: çerçevesiz, altı çizgili eylem (favori, "sepete git"). */
.fid-btn--metin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    background: none;
    border: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fid-btn--metin:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

/* ==========================================================================
   7) LİSTE SAYFASI — çip şeridi + sol süzgeç kolonu + 3 kolon ızgara
   ========================================================================== */

.fid-iz {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-block: 18px 6px;
    font-size: .8125rem;
    color: var(--muted);
}

.fid-iz a:hover {
    color: var(--accent);
}

.fid-iz__ayrac {
    color: var(--border);
}

.fid-liste-basi {
    padding-block: 6px 18px;
}

.fid-liste-basi h1 {
    margin-bottom: 6px;
}

.fid-liste-basi p {
    max-width: 70ch;
    margin: 0;
    color: var(--muted);
}

/* --- ALT KATEGORİ ÇİP ŞERİDİ (İMZA) --- */

.fid-cipler {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    /* Dar ekranda yatay kayar; kırpılmasın diye kabın kendisi kaydırılıyor
       (sayfa gövdesi ASLA yatay kaymamalı). */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-block: 4px 18px;
    margin-bottom: 8px;
}

.fid-cip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--title);
    white-space: nowrap;
    transition: background var(--gecis), border-color var(--gecis);
}

.fid-cip:hover {
    background: var(--yuzey);
    border-color: var(--control-border);
    text-decoration: none;
}

/* Bulunulan kategori: renk TEK BAŞINA anlam taşımasın diye aria-current da
   basılıyor (ekran okuyucu "geçerli sayfa" der). */
.fid-cip[aria-current='page'] {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.fid-cip--tumu {
    font-weight: 600;
}

/* --- iki kolon: SOL süzgeç, SAĞ sonuç --- */

.fid-liste {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 32px;
}

.fid-suzgec {
    position: sticky;
    /* Yapışkan başlık 78px + şerit 36px; süzgeç kolonu onun altında durur. */
    top: 128px;
}

.fid-suzgec__kap {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

/* Masaüstünde süzgeç HER ZAMAN AÇIK: `<summary>` gizlenir ve gövde
   `details[open]` durumundan bağımsız gösterilir. Düğme yalnızca 1024px
   altında anlamlıdır (aşağıdaki medya sorgusu). */
.fid-suzgec__ac {
    display: none;
}

.fid-suzgec__govde {
    display: grid;
    gap: 4px;
    padding: 18px;
}

.fid-suzgec__grup {
    padding-block: 12px;
    border-bottom: 1px solid var(--border);
}

.fid-suzgec__grup:last-of-type {
    border-bottom: 0;
}

.fid-suzgec__baslik {
    margin: 0 0 10px;
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--title);
    cursor: pointer;
    list-style: none;
}

.fid-suzgec__baslik::-webkit-details-marker {
    display: none;
}

/* Açılır grup başlığında ok: sözde öğe, ikon dosyası gerektirmiyor. */
details.fid-suzgec__grup > summary.fid-suzgec__baslik::after {
    content: '';
    float: right;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform var(--gecis);
}

details.fid-suzgec__grup[open] > summary.fid-suzgec__baslik::after {
    transform: rotate(-135deg);
    margin-top: 7px;
}

.fid-suzgec__liste {
    display: grid;
    gap: 6px;
    font-size: .9375rem;
}

.fid-suzgec__liste ul {
    display: grid;
    gap: 4px;
    margin: 4px 0 8px 12px;
    font-size: .875rem;
    color: var(--muted);
}

.fid-suzgec__kok {
    font-weight: 600;
    color: var(--title);
}

.fid-suzgec__liste a[aria-current='page'] {
    color: var(--accent);
    font-weight: 700;
}

.fid-suzgec__onaylar {
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.fid-suzgec__dip {
    display: grid;
    gap: 8px;
    padding-top: 14px;
}

/* Etkin süzgeç işareti: yanında GİZLİ METİN var, renk tek başına anlam
   taşımıyor. */
.fid-suzgec__isaret {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.fid-sonuc__serit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
}

.fid-liste-sayi {
    margin: 0;
    font-size: .9375rem;
    color: var(--muted);
}

.fid-liste-sayi strong {
    color: var(--title);
}

.fid-sirala {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fid-sirala select {
    width: auto;
    min-width: 190px;
    border-radius: var(--btn-radius);
}

.fid-bos {
    padding: 56px 24px;
    text-align: center;
    background: var(--card-bg);
    border: 1px dashed var(--control-border);
    border-radius: var(--card-radius);
}

.fid-bos p {
    color: var(--muted);
}

/* ==========================================================================
   8) FORM ÖĞELERİ (tema + çekirdek `.field` ortak görünümü)
   ========================================================================== */

.fid-alan,
.field {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.fid-alan > span,
.field > label,
.field > span {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--title);
}

.fid-alan input,
.fid-alan select,
.fid-alan textarea,
.field input,
.field select,
.field textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='date'],
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--card-bg);
    /* 3:1 eşiğini geçen SABİT kenarlık — dekoratif --border değil. */
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--text);
}

textarea {
    resize: vertical;
}

.fid-ikili-alan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fid-onay {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-block: 3px;
    font-size: .9375rem;
    cursor: pointer;
}

.fid-onay input {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.field-error,
.hint {
    font-size: .8125rem;
}

.field-error {
    color: var(--hata);
}

.hint {
    color: var(--muted);
}

/* ==========================================================================
   9) ÜRÜN SAYFASI — GALERİ ÜSTTE, SATIN ALMA SOLDA (İMZA)
   ========================================================================== */

/* --- galeri: tam genişlik yatay scroll-snap şeridi --- */

.fid-galeri {
    padding-block: 8px 6px;
}

.fid-galeri__serit {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* İlk kare kapsayıcı hizasında başlar, şerit ekranın iki kenarına kadar
       uzanır. `max()` dar ekranda 24px'e düşer. */
    padding-inline: max(24px, calc((100% - var(--container)) / 2 + 24px));
    scroll-padding-inline-start: max(24px, calc((100% - var(--container)) / 2 + 24px));
    padding-block: 6px 14px;
}

.fid-galeri__kare {
    flex: 0 0 min(600px, 78%);
    scroll-snap-align: start;
    /* Çapa hedefi: yapışkan başlığın altında kalmasın. */
    scroll-margin-top: 110px;
}

.fid-galeri__kare img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--card-radius);
    background: var(--yuzey);
}

.fid-galeri__kare--bos {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--yuzey);
    border-radius: var(--card-radius);
    color: var(--muted);
}

.fid-galeri__kare--bos span {
    font-family: var(--baslik-yazi);
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--accent);
}

.fid-galeri__kare--bos p {
    margin: 6px 0 0;
    font-size: .875rem;
}

/* Çapa numaraları: galeri JavaScript'siz gezilebilsin diye. */
.fid-galeri__capa {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.fid-galeri__capa a {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding-inline: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

.fid-galeri__capa a:hover,
.fid-galeri__capa a:target {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    text-decoration: none;
}

/* --- iki kolon: SOL satın alma (yapışkan), SAĞ bilgi (akan) --- */

.fid-detay {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    padding-block: 26px 8px;
}

.fid-satin {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 14px;
}

.fid-satin__kutu {
    padding: 26px 24px;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: 0 0 0 6px var(--halka);
}

.fid-satin__marka {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--accent);
}

.fid-satin__ad {
    margin: 0 0 10px;
    font-size: calc(1.5rem * var(--font-scale));
    line-height: 1.22;
}

.fid-satin__kod {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    font-size: .8125rem;
    color: var(--muted);
}

.fid-fiyat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding-block: 14px;
    border-block: 1px solid var(--border);
    margin-bottom: 16px;
}

.fid-fiyat__tutar {
    font-family: var(--baslik-yazi);
    font-size: calc(1.875rem * var(--font-scale));
    font-weight: 700;
    color: var(--title);
}

.fid-fiyat del {
    font-size: 1rem;
    color: var(--muted);
}

.fid-fiyat__kdv {
    flex: 1 0 100%;
    font-size: .75rem;
    color: var(--muted);
}

.fid-not {
    margin: 8px 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

/* --- varyant seçimi --- */

.fid-secim {
    margin-bottom: 16px;
}

.fid-secim__ad {
    margin-bottom: 8px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--title);
}

.fid-secim__liste {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fid-secim__oge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: 999px;
    font-size: .875rem;
    cursor: pointer;
    transition: border-color var(--gecis), background var(--gecis);
}

.fid-secim__oge:hover {
    background: var(--yuzey);
}

/* Seçili seçenek: radyo düğmesi görünür kalıyor (renk tek başına anlam
   taşımasın), kutu ayrıca kalın kenarlıkla işaretleniyor. */
.fid-secim__oge:has(input:checked) {
    border-color: var(--primary);
    border-width: 2px;
    padding: 7px 14px;
    background: var(--yuzey);
}

.fid-secim__oge input {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
}

.fid-boya {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .18);
}

.fid-stok {
    margin: 0 0 14px;
    font-size: .875rem;
    font-weight: 600;
}

/* --- adet + sepete ekle --- */

.fid-adet-sira {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 6px;
}

.fid-adet {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    overflow: hidden;
}

.fid-adet button {
    width: 40px;
    height: 44px;
    background: transparent;
    border: 0;
    font-size: 1.125rem;
    color: var(--title);
}

.fid-adet button:hover:not(:disabled) {
    background: var(--yuzey);
}

.fid-adet button:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.fid-adet input {
    width: 52px;
    height: 44px;
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.fid-adet input::-webkit-outer-spin-button,
.fid-adet input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fid-satin__yan-eylem {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* --- SAĞ KOLON: akan bilgi --- */

.fid-bilgi {
    display: grid;
    gap: 8px;
    align-content: start;
}

.fid-bilgi__ozet {
    margin: 0 0 8px;
    font-size: calc(1.0625rem * var(--font-scale));
    color: var(--text);
}

.fid-bilgi__blok {
    padding-block: 26px;
    border-top: 1px solid var(--border);
}

.fid-bilgi__blok:first-child {
    border-top: 0;
    padding-top: 8px;
}

.fid-bilgi__blok h2 {
    font-size: calc(1.25rem * var(--font-scale));
}

/* --- BAKIM KUTUSU: ürünün kendi özellik listesinden süzülür --- */

.fid-bakim {
    padding: 22px 24px;
    background: var(--yuzey);
    border-radius: var(--card-radius);
    margin-bottom: 8px;
}

.fid-bakim h2 {
    margin-bottom: 12px;
    font-size: calc(1.125rem * var(--font-scale));
}

.fid-bakim__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 22px;
}

.fid-bakim__liste li {
    position: relative;
    padding-left: 20px;
    font-size: .9375rem;
}

/* Yaprak biçimli madde imi: ikon dosyası gerektirmiyor, süs olduğu için
   ekran okuyucuya hiç ulaşmıyor (sözde öğe). */
.fid-bakim__liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 0 999px 0 999px;
}

.fid-bakim__etiket {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
}

.fid-bakim__deger {
    color: var(--title);
}

.fid-bakim .fid-not {
    margin-top: 14px;
    margin-bottom: 0;
}

/* --- künye ve özellikler --- */

.fid-kunye {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0 26px;
    margin: 0 0 16px;
}

.fid-kunye > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-block: 10px;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
}

.fid-kunye dt {
    color: var(--muted);
}

.fid-kunye dd {
    margin: 0;
    text-align: right;
    color: var(--title);
    font-weight: 500;
}

.fid-madde {
    display: grid;
    gap: 7px;
    font-size: .9375rem;
}

.fid-madde li {
    position: relative;
    padding-left: 20px;
}

.fid-madde li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 9px;
    height: 9px;
    background: var(--halka-koyu);
    border-radius: 0 999px 0 999px;
}

.fid-yazi {
    color: var(--text);
}

/* --- değerlendirmeler --- */

.fid-yorum {
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.fid-yorum__bas {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: .8125rem;
    color: var(--muted);
}

.fid-yorum__kisi {
    font-weight: 700;
    color: var(--title);
}

.fid-yorum p:last-child {
    margin-bottom: 0;
}

.fid-yorum-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    margin-top: 20px;
    padding: 22px 24px;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: 0 0 0 6px var(--halka);
}

.fid-alan--genis {
    grid-column: 1 / -1;
}

/* --- durum etiketleri --- */

.fid-etiket {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.fid-etiket--indirim {
    background: var(--hata);
    color: #ffffff;
}

.fid-etiket--yeni {
    background: var(--primary);
    color: #ffffff;
}

.fid-etiket--bitti {
    background: var(--yuzey-koyu);
    color: var(--title);
}

.fid-etiket--onay {
    background: var(--yuzey);
    color: var(--basari);
}

/* ==========================================================================
   10) ALT BİLGİ
   ========================================================================== */

.fid-alt {
    margin-top: 56px;
    background: var(--primary);
    color: #d9e6d5;
}

.fid-alt a {
    color: #d9e6d5;
}

.fid-alt a:hover {
    color: #ffffff;
}

.fid-hizmet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px 28px;
    padding-block: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.fid-hizmet li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .875rem;
}

.fid-hizmet svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #ffffff;
}

.fid-hizmet strong {
    display: block;
    color: #ffffff;
    font-weight: 600;
}

.fid-hizmet a {
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fid-alt__sira {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    padding-block: 40px 32px;
}

.fid-alt__marka {
    margin: 0 0 10px;
    font-family: var(--baslik-yazi);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #ffffff;
}

.fid-alt__metin {
    max-width: 42ch;
    font-size: .875rem;
}

.fid-alt__baslik {
    margin: 0 0 12px;
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #ffffff;
}

.fid-alt__kolon ul {
    display: grid;
    gap: 8px;
    font-size: .875rem;
}

.fid-sosyal {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.fid-sosyal a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
}

.fid-sosyal a:hover {
    background: rgba(255, 255, 255, .12);
}

.fid-alt__dip {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 18px 26px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .8125rem;
}

/* ==========================================================================
   11) REKLAM YUVASI
   --------------------------------------------------------------------------
   Yuva her zaman İÇERİK IZGARASININ DIŞINDA duruyor ve kendi boşluğunu
   ayırıyor: rıza sonradan verildiğinde reklam yerine oturur, sayfa
   kıpırdamaz (CLS). Birim kimliği girilmemişse bileşen hiçbir şey basmaz ve
   bu kutu da boş kalır — o yüzden görünür bir zemin/çerçeve verilmiyor.
   ========================================================================== */

.fid-reklam-alan {
    padding-block: 26px;
}

.fid-reklam-alan--liste {
    padding-block: 0 22px;
}

.fid-reklam-alan--urun {
    padding-block: 20px 40px;
}

.fid-reklam {
    display: block;
    margin-inline: auto;
    max-width: 100%;
}

/* ==========================================================================
   12) ÇEKİRDEK SINIFLARIN FİDE DİLİNDE YENİDEN ÇİZİMİ
   --------------------------------------------------------------------------
   Tema `shop.css` yüklemediği için, tema ezmediği görünümlerde (sepet, ödeme,
   hesabım, blog, kampanyalar, koleksiyonlar, karşılaştırma, statik sayfalar,
   bayi paneli) çekirdek sınıf adları buradan stil alır. Ad listesi çekirdek
   görünümlerden çıkarılmıştır; BİR SINIF BURADA YOKSA O SAYFA STİLSİZ
   GÖRÜNÜR — hata da vermez, sessizce çirkinleşir.
   ========================================================================== */

/* --- düğmeler: çekirdek adları, Fide görünümü --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
    border-radius: var(--btn-radius);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background var(--gecis), border-color var(--gecis);
}

.btn:hover {
    background: #24482d;
    border-color: #24482d;
    text-decoration: none;
}

.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.btn--primary,
.btn--navy {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.btn--gold {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.btn--gold:hover {
    background: #33582f;
    border-color: #33582f;
}

.btn--outline,
.btn--ghost {
    background: transparent;
    color: var(--title);
    border-color: var(--control-border);
}

.btn--outline:hover,
.btn--ghost:hover {
    background: var(--yuzey);
    border-color: var(--primary);
}

.btn--sm {
    padding: 8px 16px;
    font-size: .8125rem;
}

.btn--lg {
    padding: 14px 28px;
    font-size: 1rem;
}

.btn--block {
    width: 100%;
}

/* --- yüzeyler --- */

.panel,
.statcard,
.success-box,
.summary,
.radio-card,
.coupon,
.optgroup {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 22px;
}

.panel__desc {
    color: var(--muted);
    font-size: .875rem;
}

.panel--sss summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--title);
}

.section--surface {
    background: var(--yuzey);
}

.section-head {
    margin-bottom: 26px;
}

.section-head h2 {
    margin-bottom: 6px;
}

.section-head p {
    margin: 0;
    color: var(--muted);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
}

/* --- rozetler ve durum metinleri --- */

.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--yuzey-koyu);
    color: var(--title);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.badge--gold {
    background: var(--accent);
    color: #ffffff;
}

.badge--info {
    background: var(--primary);
    color: #ffffff;
}

.badge--success {
    background: #e2eee7;
    color: var(--basari);
}

.badge--warning {
    background: #f6ecd8;
    color: var(--uyari);
}

.badge--danger {
    background: #f6e2e2;
    color: var(--hata);
}

.badge--muted {
    background: var(--yuzey-koyu);
    color: var(--muted);
}

.text-danger { color: var(--hata); }
.text-success { color: var(--basari); }
.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- uyarı kutuları --- */

.alert {
    padding: 13px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--muted);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-size: .9375rem;
}

.alert--success {
    border-left-color: var(--basari);
    background: #f0f7f2;
}

.alert--error {
    border-left-color: var(--hata);
    background: #fbf1f1;
}

.alert--info {
    border-left-color: var(--accent);
    background: var(--yuzey);
}

/* --- ızgaralar ve listeler --- */

.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack {
    display: grid;
    gap: 16px;
}

.ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.statcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.statcards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps {
    display: grid;
    gap: 16px;
}

.steps__item {
    display: flex;
    gap: 14px;
}

.steps__no {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    background: var(--primary);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .875rem;
}

.optlist {
    display: grid;
    gap: 10px;
}

.optgroup__title {
    font-weight: 600;
    color: var(--title);
    margin-bottom: 8px;
}

/* --- çekirdek ürün kartı (tema ezmediği yerlerde: koleksiyon, karşılaştırma,
       kombin, favoriler) --- */

.pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: 0 0 0 6px var(--halka);
}

.pcard__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    background: var(--yuzey);
}

.pcard__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.pcard__flags {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    gap: 6px;
    justify-items: start;
}

.pcard__fav {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}

.pcard__body {
    display: grid;
    gap: 5px;
    padding: 16px 18px 8px;
    flex: 1 1 auto;
    align-content: start;
}

.pcard__brand {
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--muted);
}

.pcard__name {
    font-family: var(--baslik-yazi);
    font-size: 1rem;
    font-weight: 600;
    color: var(--title);
}

.pcard__rating {
    font-size: .8125rem;
    color: var(--muted);
}

.pcard__stars {
    color: #b0741c;
}

.pcard__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.pcard__price strong {
    font-family: var(--baslik-yazi);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pcard__price del {
    font-size: .875rem;
    color: var(--muted);
}

.pcard__foot {
    display: grid;
    gap: 8px;
    padding: 0 18px 18px;
}

.pcard__stock {
    margin: 0;
    font-size: .8125rem;
}

/* --- liste sayfası çekirdek düzeni (tema ezmediği listeler: koleksiyon,
       marka listesi, kampanya listesi) --- */

.listlayout {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.filters {
    position: sticky;
    top: 128px;
    display: grid;
    gap: 20px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

.filters__title {
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--title);
    margin-bottom: 8px;
}

.filters__list {
    display: grid;
    gap: 7px;
    font-size: .9375rem;
}

.listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.breadcrumb {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 18px 6px;
    font-size: .8125rem;
    color: var(--muted);
}

.empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--muted);
}

/* --- sayfalama --- */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-block: 40px;
}

.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding-inline: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
    font-size: .875rem;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}

.pagination a:hover {
    border-color: var(--primary);
    background: var(--yuzey);
    text-decoration: none;
}

.pagination .is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    font-weight: 700;
}

.pagination .is-disabled {
    color: var(--muted);
    opacity: .6;
}

/* --- sepet / ödeme / hesap --- */

.cartlayout,
.acclayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
    padding-block: 24px 56px;
}

.acclayout {
    grid-template-columns: 240px minmax(0, 1fr);
}

.accnav {
    display: grid;
    gap: 4px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

.accnav a {
    padding: 10px 14px;
    border-radius: var(--btn-radius);
    font-size: .9375rem;
    color: var(--text);
}

.accnav a:hover,
.accnav a[aria-current='page'] {
    background: var(--yuzey);
    color: var(--title);
    text-decoration: none;
}

.cartlist {
    display: grid;
    gap: 14px;
}

.cartitem {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}

.cartitem__img img {
    width: 92px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
}

.cartitem__name {
    font-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--title);
}

.cartitem__meta {
    font-size: .8125rem;
    color: var(--muted);
}

.cartitem__right {
    text-align: right;
}

.cartitem__total {
    font-family: var(--baslik-yazi);
    font-weight: 700;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.summary__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 9px;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.summary__row--total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-family: var(--baslik-yazi);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--title);
}

.summary__note {
    font-size: .8125rem;
    color: var(--muted);
}

.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
    padding-block: 24px 56px;
}

.addr-grid,
.contact-grid,
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
}

.qty,
.qtyrow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qty input {
    width: 64px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .18);
}

.stars {
    color: #b0741c;
}

.check {
    color: var(--basari);
}

/* --- tablolar: KABI kaydırılır, tabloya display:block VERİLMEZ
       (display:block satır/sütun anlamını ekran okuyucudan siler) --- */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.datatable,
.kargo-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.datatable th,
.datatable td,
.kargo-tablo th,
.kargo-tablo td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.datatable th,
.kargo-tablo th {
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--title);
    background: var(--yuzey);
}

.responsive {
    max-width: 100%;
}

/* --- sekmeler (çekirdek ürün sayfası tema ezmediğinde kullanır) --- */

.tabs__nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.tabs__btn {
    padding: 11px 18px;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    color: var(--muted);
}

.tabs__btn[aria-selected='true'],
.tabs__btn.is-active {
    color: var(--title);
    border-bottom-color: var(--accent);
}

.tabs__panel[hidden] {
    display: none;
}

/* --- düz metin (blog, sözleşmeler, ürün açıklaması) --- */

.prose {
    max-width: 72ch;
}

.prose h2,
.prose h3 {
    margin-top: 1.6em;
}

.prose p,
.prose li {
    color: var(--text);
}

.prose ul,
.prose ol {
    margin: 0 0 1em 1.2em;
}

.prose ul li {
    list-style: disc;
}

.prose ol li {
    list-style: decimal;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose img {
    border-radius: var(--card-radius);
}

.prose blockquote {
    margin: 1.2em 0;
    padding-left: 18px;
    border-left: 4px solid var(--accent);
    color: var(--muted);
}

/* --- karşılaştırma modülü (çekirdek yaprak CSS'i ile birlikte) --- */

.krs-ekle__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--title);
}

.krs-ekle__btn:hover {
    background: var(--yuzey);
}

.krs-ekle__btn[aria-pressed='true'] {
    background: var(--yuzey);
    border-color: var(--primary);
    color: var(--primary);
}

.krs-tablo-kap {
    overflow-x: auto;
}

/* --- bayi paneli --- */

.bayi-panel {
    padding: 18px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    margin-block: 16px;
}

/* --- tema önizleme çubuğu (yalnız panel personeline basılır) --- */

.tema-onizleme {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 16px;
    background: var(--primary);
    color: #ffffff;
    font-size: .875rem;
}

.tema-onizleme__ayrinti {
    opacity: .92;
}

.tema-onizleme__eylemler {
    display: flex;
    gap: 8px;
}

.tema-onizleme__btn {
    padding: 5px 14px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--btn-radius);
    color: #ffffff;
    font-size: .8125rem;
    font-weight: 600;
}

.tema-onizleme__btn--birincil {
    background: #ffffff;
    color: var(--primary);
}

/* ==========================================================================
   13) DUYARLILIK
   --------------------------------------------------------------------------
   Kırılma noktaları içeriğe göre seçildi, cihaz adına göre değil:
     1180px → 4 kolonluk ızgara 3'e iner
     1024px → ürün sayfası tek kolona, süzgeç kolonu açılır kutuya iner
      980px → başlıktaki arama gizlenir, mobil çekmece devreye girer
      900px → kahraman kartı fotoğrafın altına iner
      620px → ızgaralar 2 ve 1 kolona iner
   ========================================================================== */

@media (max-width: 1180px) {
    .fid-izgara {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fid-liste {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 24px;
    }

    .fid-izgara--liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fid-detay {
        grid-template-columns: 330px minmax(0, 1fr);
        gap: 32px;
    }

    .fid-alt__sira {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    /* ÜRÜN SAYFASI TEK KOLON: satın alma kutusu ÖNCE gelir (DOM sırası zaten
       öyle), bilgi altında akar. Yapışkanlık kapatılıyor — tek kolonda
       yapışkan bir kutu ekranın yarısını kalıcı olarak yer. */
    .fid-detay {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .fid-satin {
        position: static;
    }

    .fid-galeri__kare {
        flex: 0 0 min(520px, 86%);
    }

    /* SÜZGEÇ KOLONU AÇILIR KUTUYA İNER: <summary> görünür olur ve
       `details[open]` durumu artık gerçekten iş yapar. */
    .fid-liste {
        grid-template-columns: minmax(0, 1fr);
    }

    .fid-suzgec {
        position: static;
    }

    .fid-suzgec__ac {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 14px 18px;
        font-family: var(--baslik-yazi);
        font-weight: 700;
        color: var(--title);
        cursor: pointer;
        list-style: none;
    }

    .fid-suzgec__ac::-webkit-details-marker {
        display: none;
    }

    .fid-suzgec__kap:not([open]) .fid-suzgec__govde {
        display: none;
    }

    .fid-suzgec__govde {
        border-top: 1px solid var(--border);
    }

    .fid-sss {
        grid-template-columns: minmax(0, 1fr);
    }

    .fid-sss__gorsel img {
        aspect-ratio: 16 / 9;
    }

    .fid-sera__ic {
        grid-template-columns: 1fr 1fr;
    }

    .fid-sera__metin {
        grid-column: 1 / -1;
        order: -1;
    }

    .fid-sera__gorsel:first-of-type,
    .fid-sera__gorsel:last-of-type {
        transform: none;
    }

    .fid-sera__gorsel img {
        aspect-ratio: 4 / 3;
    }

    .cartlayout,
    .checkout,
    .acclayout,
    .listlayout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    /* Ana satır: marka + menü + arama + üç ikon aynı satıra sığmıyor.
       Menü ve arama gizlenir, TEK arama yolu mobil çekmecedeki formdur. */
    .fid-menu,
    .fid-ust__sira > .fid-sag > .fid-arama {
        display: none;
    }

    .fid-burger {
        display: grid;
    }

    .fid-mobil__arama {
        display: flex;
    }

    .fid-ust__sira {
        min-height: 66px;
    }

    .fid-serit__baglar a:not(:first-child) {
        display: none;
    }
}

@media (max-width: 900px) {
    /* KAHRAMAN: kart köşede kalırsa metin fotoğrafın koyu kısmına biner ve
       okunmaz olur. Fotoğrafın ALTINA iner, üstüne 28px biner. */
    .fid-kahraman__kap {
        position: static;
        margin-top: -48px;
    }

    .fid-kahraman__kart {
        max-width: none;
        padding: 26px 24px 24px;
    }

    .fid-kahraman__baslik {
        font-size: calc(2rem * var(--font-scale));
    }

    .fid-kahraman__foto img {
        aspect-ratio: 3 / 2;
    }

    .fid-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fid-yorum-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .fid-alt__sira {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fid-bolum,
    .section {
        padding-block: 44px;
    }
}

@media (max-width: 620px) {
    .fid-izgara,
    .fid-izgara--liste,
    .pgrid,
    .pgrid--3,
    .pgrid--4,
    .ikili,
    .statcards--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .fid-sera__ic {
        grid-template-columns: minmax(0, 1fr);
    }

    .fid-balonlar {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 18px 14px;
    }

    .fid-galeri__kare {
        flex: 0 0 92%;
    }

    .fid-kunye > div {
        flex-direction: column;
        gap: 2px;
    }

    .fid-kunye dd {
        text-align: left;
    }

    .fid-adet-sira {
        flex-wrap: wrap;
    }

    .fid-btn--genis {
        flex: 1 0 100%;
    }

    .cartitem {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .cartitem__right {
        grid-column: 1 / -1;
        text-align: left;
    }

    .fid-ikili-alan {
        grid-template-columns: minmax(0, 1fr);
    }

    .fid-serit__sira {
        justify-content: center;
        text-align: center;
    }

    .fid-alt__dip {
        justify-content: center;
        text-align: center;
    }
}