/* =====================================================================
   OZ CRAFT — TASARIM SİSTEMİ
   El yapımı deri defterler · minimalist · toprak tonları

   YAKLAŞIM
   Ürün fotoğrafları zaten koyu kahve, taba ve siyah deri dokusundan
   oluşuyor. Arayüz bu fotoğraflarla YARIŞMAMALI. Bu yüzden zeminler
   sıcak-nötr (krem/kağıt), renk yalnızca AKSİYONDA (Sepete Ekle) ve
   durum bildiriminde kullanılıyor.

   Kontrast: tüm metin/zemin çiftleri WCAG AA (4.5:1) üzerinde.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONLAR (design tokens)
   --------------------------------------------------------------------- */
:root {
    /* --- Renk: yüzeyler --- */
    --krem:          #F4EFE7;   /* sayfa zemini */
    --kagit:         #FAF7F2;   /* kart zemini — kremden bir ton açık */
    --kagit-golge:   #EFE8DD;   /* girinti, ayraç */
    --kenar:         #E2D8C9;   /* çizgi */
    --kenar-koyu:    #C9BAA6;

    /* --- Renk: metin --- */
    --deri-koyu:     #2E2621;   /* ana metin — saf siyah değil, deri kahvesi */
    --deri-orta:     #5C4033;   /* ikincil metin */
    --deri-acik:     #8A7968;   /* yardımcı metin, etiket */
    --antrasit:      #26282B;   /* header/footer zemini */

    /* --- Renk: aksiyon --- */
    --taba:          #A9713F;   /* birincil buton */
    --taba-koyu:     #8A5A31;   /* hover */
    --taba-soluk:    #F0E2D3;   /* seçili arka plan */
    --bakir:         #B87333;   /* rozet, vurgu */

    /* --- Renk: durum --- */
    --yesil-onay:    #4F6F52;   /* stokta, başarılı */
    --yesil-soluk:   #E7EFE7;
    --kirmizi:       #A63D40;   /* hata, son ürün */
    --kirmizi-soluk: #F7E9E9;
    --sari-uyari:    #8A6D1F;
    --sari-soluk:    #F7F0DC;

    /* --- Tipografi ---
       Fraunces: yumuşak serif, el işçiliği hissi verir (başlıklar).
       Inter: yüksek okunabilirlik (gövde, fiyat, form).
       Google Fonts erişilemezse sistem fontlarına düşer, site bozulmaz. */
    --yazi-baslik: "Fraunces", "Georgia", "Times New Roman", serif;
    --yazi-govde:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
    --yazi-rakam:  "Inter", ui-monospace, "SF Mono", Menlo, monospace;

    /* Akıcı ölçek: 360px'te alt sınır, 1280px'te üst sınır */
    --olcek-xs:  0.75rem;
    --olcek-sm:  0.875rem;
    --olcek-md:  1rem;
    --olcek-lg:  clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
    --olcek-xl:  clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
    --olcek-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
    --olcek-3xl: clamp(2.25rem, 3vw + 1.4rem, 3.5rem);

    /* --- Boşluk: 4px tabanlı --- */
    --bosluk-1: 0.25rem;
    --bosluk-2: 0.5rem;
    --bosluk-3: 0.75rem;
    --bosluk-4: 1rem;
    --bosluk-5: 1.5rem;
    --bosluk-6: 2rem;
    --bosluk-7: 3rem;
    --bosluk-8: 4rem;

    /* --- Diğer --- */
    --kose:       4px;    /* deri ürünler keskin dikişlidir; köşeler yumuşak değil */
    --kose-buyuk: 8px;
    --golge-sm: 0 1px 2px rgba(46, 38, 33, 0.06);
    --golge-md: 0 2px 8px rgba(46, 38, 33, 0.08);
    --golge-lg: 0 8px 28px rgba(46, 38, 33, 0.12);

    --gecis: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    --genislik: 1200px;   /* içerik maksimum genişliği */

    /* Kağıt/keten dokusu — tek yerde tanımlı, her düz zemin bunu paylaşır
       (bkz. 15. DOKU VE ATMOSFER). `feComponentTransfer` gri fractalNoise'u
       siyah/beyaza gerer; ham hâli düz bir ton gibi görünüp fark edilmiyordu. */
    --doku-kagit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='3' intercept='-1'/><feFuncG type='linear' slope='3' intercept='-1'/><feFuncB type='linear' slope='3' intercept='-1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.16'/></svg>");
}

/* ---------------------------------------------------------------------
   2. SIFIRLAMA
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--krem);
    color: var(--deri-koyu);
    font-family: var(--yazi-govde);
    font-size: var(--olcek-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, picture, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--yazi-baslik);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 var(--bosluk-4);
    color: var(--deri-koyu);
}
h1 { font-size: var(--olcek-3xl); }
h2 { font-size: var(--olcek-2xl); }
h3 { font-size: var(--olcek-xl); }

p { margin: 0 0 var(--bosluk-4); }

a { color: var(--taba-koyu); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--taba); }

/* Klavyeyle gezinen kullanıcı odağı GÖRMELİ. outline:none asla. */
:focus-visible {
    outline: 2px solid var(--taba);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Ekran okuyucuya özel */
.gizli-erisilebilir {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   3. DÜZEN
   --------------------------------------------------------------------- */
.sarmal {
    width: 100%;
    max-width: var(--genislik);
    margin-inline: auto;
    padding-inline: var(--bosluk-4);
}

.bolum { padding-block: var(--bosluk-7); }

@media (min-width: 768px) {
    .sarmal { padding-inline: var(--bosluk-5); }
    .bolum  { padding-block: var(--bosluk-8); }
}

/* ---------------------------------------------------------------------
   4. BUTONLAR
   --------------------------------------------------------------------- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-2);
    /* Dokunma hedefi en az 44px — mobilde parmakla isabet için */
    min-height: 44px;
    padding: var(--bosluk-3) var(--bosluk-5);
    border: 1px solid transparent;
    border-radius: var(--kose);
    font-family: var(--yazi-govde);
    font-size: var(--olcek-md);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--gecis), border-color var(--gecis), transform var(--gecis);
}

.dugme:active { transform: translateY(1px); }

.dugme[disabled], .dugme[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.dugme--birincil {
    background: var(--taba);
    color: #FFF;
}
.dugme--birincil:hover:not([disabled]) { background: var(--taba-koyu); color: #FFF; }

.dugme--ikincil {
    background: transparent;
    color: var(--deri-koyu);
    border-color: var(--kenar-koyu);
}
.dugme--ikincil:hover:not([disabled]) { background: var(--kagit-golge); }

.dugme--blok { width: 100%; }

/* ---------------------------------------------------------------------
   5. ÜRÜN KARTI
   --------------------------------------------------------------------- */
.urun-izgara {
    display: grid;
    /* auto-fill + minmax: medya sorgusu yazmadan akıcı sütun sayısı */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--bosluk-5);
}

.urun-kart {
    background: var(--kagit);
    border: 1px solid var(--kenar);
    border-radius: var(--kose-buyuk);
    overflow: hidden;
    transition: box-shadow var(--gecis), transform var(--gecis);
}
.urun-kart:hover { box-shadow: var(--golge-md); transform: translateY(-2px); }

.urun-kart__gorsel {
    position: relative;
    aspect-ratio: 3 / 4;    /* defterler dikey — sabit oran zıplamayı önler */
    background: var(--kagit-golge);
    overflow: hidden;
}
.urun-kart__gorsel img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.urun-kart:hover .urun-kart__gorsel img { transform: scale(1.03); }

.urun-kart__govde { padding: var(--bosluk-4); }

.urun-kart__baslik {
    font-family: var(--yazi-govde);
    font-size: var(--olcek-sm);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 var(--bosluk-2);
    /* İki satırda kes — kart yükseklikleri hizada kalsın */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   6. FİYAT
   --------------------------------------------------------------------- */
.fiyat { display: flex; align-items: baseline; gap: var(--bosluk-2); flex-wrap: wrap; }

.fiyat__guncel {
    font-family: var(--yazi-rakam);
    font-size: var(--olcek-lg);
    font-weight: 700;
    /* tabular-nums: rakamlar eşit genişlikte, liste hizalı görünür */
    font-variant-numeric: tabular-nums;
    color: var(--deri-koyu);
}

.fiyat__eski {
    font-size: var(--olcek-sm);
    color: var(--deri-acik);
    text-decoration: line-through;
}

.fiyat__indirim {
    font-size: var(--olcek-xs);
    font-weight: 700;
    color: var(--kirmizi);
    background: var(--kirmizi-soluk);
    padding: 2px var(--bosluk-2);
    border-radius: var(--kose);
}

/* ---------------------------------------------------------------------
   7. ROZETLER
   --------------------------------------------------------------------- */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--olcek-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px var(--bosluk-2);
    border-radius: var(--kose);
}
.rozet--stokta  { background: var(--yesil-soluk); color: var(--yesil-onay); }
.rozet--azaldi  { background: var(--sari-soluk);  color: var(--sari-uyari); }
.rozet--tukendi { background: var(--kagit-golge); color: var(--deri-acik); }
.rozet--elyapimi{ background: var(--taba-soluk);  color: var(--taba-koyu); }

/* ---------------------------------------------------------------------
   8. ÜRÜN DETAY — DÖNÜŞÜM ODAKLI DÜZEN

   Masaüstünde galeri solda, satın alma kutusu sağda YAPIŞKAN durur:
   kullanıcı açıklamayı okurken "Sepete Ekle" hep görünür kalır.
   Mobilde kutu alta sabitlenir (aşağıya bakın).
   --------------------------------------------------------------------- */
.urun-detay {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bosluk-6);
}

@media (min-width: 960px) {
    .urun-detay { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); gap: var(--bosluk-7); }
    .urun-detay__yan { position: sticky; top: var(--bosluk-5); align-self: start; }
}

/* --- Galeri --- */
.galeri__ana {
    aspect-ratio: 3 / 4;
    background: var(--kagit-golge);
    border-radius: var(--kose-buyuk);
    overflow: hidden;
}
.galeri__ana img { width: 100%; height: 100%; object-fit: cover; }

.galeri__seritler {
    display: flex;
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-3);
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--bosluk-1);
}
.galeri__serit {
    flex: 0 0 72px;
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: var(--kose);
    overflow: hidden;
    cursor: pointer;
    background: none;
    padding: 0;
}
.galeri__serit[aria-current="true"] { border-color: var(--taba); }
.galeri__serit img { width: 100%; height: 100%; object-fit: cover; }

/* --- Satın alma kutusu --- */
.satin-al {
    background: var(--kagit);
    border: 1px solid var(--kenar);
    border-radius: var(--kose-buyuk);
    padding: var(--bosluk-5);
}

/* --- Güven şeridi: itiraz kırıcı, fiyatın hemen altında --- */
.guven-serit {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bosluk-3);
    padding: var(--bosluk-4) 0;
    margin: var(--bosluk-4) 0;
    border-block: 1px solid var(--kenar);
    list-style: none;
}
.guven-serit li {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-size: var(--olcek-xs);
    color: var(--deri-orta);
}

/* --- Kişiselleştirme: Oz Craft'ta dönüşümü en çok etkileyen alan --- */
.kisisellestirme {
    background: var(--taba-soluk);
    border-radius: var(--kose);
    padding: var(--bosluk-4);
    margin-bottom: var(--bosluk-4);
}
.kisisellestirme__onizleme {
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-lg);
    text-align: center;
    padding: var(--bosluk-4);
    margin-top: var(--bosluk-3);
    background: var(--deri-orta);
    color: var(--taba-soluk);
    border-radius: var(--kose);
    /* Deriye kazınmış izlenimi: içe gömük gölge */
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
}

/* --- Mobilde yapışkan CTA çubuğu --- */
.mobil-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    padding: var(--bosluk-3) var(--bosluk-4);
    /* Çentikli telefonlarda alt boşluk */
    padding-bottom: calc(var(--bosluk-3) + env(safe-area-inset-bottom, 0px));
    background: var(--kagit);
    border-top: 1px solid var(--kenar);
    box-shadow: 0 -2px 12px rgba(46, 38, 33, 0.08);
}
@media (min-width: 960px) { .mobil-cta { display: none; } }

/* ---------------------------------------------------------------------
   9. FORMLAR
   --------------------------------------------------------------------- */
.alan { margin-bottom: var(--bosluk-4); }

.alan__etiket {
    display: block;
    font-size: var(--olcek-sm);
    font-weight: 600;
    margin-bottom: var(--bosluk-2);
    color: var(--deri-orta);
}

.alan__girdi,
.alan__secim,
.alan__metin {
    width: 100%;
    min-height: 44px;
    padding: var(--bosluk-3);
    background: #FFF;
    border: 1px solid var(--kenar-koyu);
    border-radius: var(--kose);
    font-family: var(--yazi-govde);
    /* 16px altı font iOS Safari'de sayfayı otomatik yakınlaştırır */
    font-size: 16px;
    color: var(--deri-koyu);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan__girdi:focus,
.alan__secim:focus,
.alan__metin:focus {
    border-color: var(--taba);
    box-shadow: 0 0 0 3px rgba(169, 113, 63, 0.15);
    outline: none;
}

.alan__yardim { font-size: var(--olcek-xs); color: var(--deri-acik); margin-top: var(--bosluk-1); }
.alan__hata   { font-size: var(--olcek-xs); color: var(--kirmizi);   margin-top: var(--bosluk-1); }
.alan--hatali .alan__girdi { border-color: var(--kirmizi); }

/* ---------------------------------------------------------------------
   10. BİLDİRİM KUTULARI
   --------------------------------------------------------------------- */
.bildirim {
    padding: var(--bosluk-4);
    border-radius: var(--kose);
    border-left: 3px solid;
    font-size: var(--olcek-sm);
    margin-bottom: var(--bosluk-4);
}
.bildirim--basari { background: var(--yesil-soluk);   border-color: var(--yesil-onay); color: #2F4A32; }
.bildirim--hata   { background: var(--kirmizi-soluk); border-color: var(--kirmizi);    color: #7A2B2E; }
.bildirim--uyari  { background: var(--sari-soluk);    border-color: var(--sari-uyari); color: #6B5416; }
.bildirim--bilgi  { background: var(--taba-soluk);    border-color: var(--taba);       color: var(--taba-koyu); }

/* ---------------------------------------------------------------------
   11. İSKELET (yükleniyor)
   React island'lar hydrate olana kadar bu görünür — sayfa "zıplamaz".
   --------------------------------------------------------------------- */
.iskelet {
    background: linear-gradient(90deg,
        var(--kagit-golge) 25%, var(--kenar) 50%, var(--kagit-golge) 75%);
    background-size: 200% 100%;
    animation: iskelet-kayar 1.4s ease-in-out infinite;
    border-radius: var(--kose);
    color: transparent;
    user-select: none;
}
@keyframes iskelet-kayar {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------
   12. BAŞLIK / ALT BİLGİ
   --------------------------------------------------------------------- */

/* --- Duyuru çubuğu: header'ın üstünde ince, koyu şerit ---
   Ücretsiz kargo / iade / el yapımı mesajları sırayla geçer.
   JS'siz de çalışır: ilk mesaj sabit görünür kalır. */
.duyuru-cubugu {
    background: var(--antrasit);
    color: #E4DDD2;
}
.duyuru-cubugu__ic {
    max-width: var(--genislik);
    margin-inline: auto;
    padding: var(--bosluk-2) var(--bosluk-4);
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: var(--olcek-xs);
    letter-spacing: 0.01em;
    min-height: 34px;
    align-items: center;
    position: relative;
}
.duyuru-cubugu__mesaj {
    grid-area: 1 / 1;
    transition: opacity 400ms ease;
}
.duyuru-cubugu__liste {
    display: grid;
    align-items: center;
    justify-items: center;
}
.duyuru-cubugu__liste .duyuru-cubugu__mesaj:not(:first-child) { opacity: 0; }
.duyuru-cubugu__liste[data-donen="true"] .duyuru-cubugu__mesaj { opacity: 0; }
.duyuru-cubugu__liste[data-donen="true"] .duyuru-cubugu__mesaj[data-aktif] { opacity: 1; }

/* --- Header: zemin, logo, masaüstü menü, ikon aksiyonları --- */
.site-baslik {
    background: var(--kagit);
    border-bottom: 1px solid var(--kenar);
    position: sticky;
    top: 0;
    z-index: 30;
    transition: box-shadow var(--gecis);
}
.site-baslik[data-kaydirildi="true"] { box-shadow: var(--golge-md); }

.site-baslik__ic {
    display: flex;
    align-items: center;
    gap: var(--bosluk-5);
    padding-block: var(--bosluk-3);
}

.marka {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    text-decoration: none;
    flex-shrink: 0;
    color: var(--deri-koyu);
}
.marka:hover { color: var(--deri-koyu); }
.marka__amblem { border-radius: var(--kose); flex-shrink: 0; }
.marka__ad {
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.menu-ana {
    display: none;
    flex: 1;
    align-items: center;
    gap: var(--bosluk-5);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.menu-ana::-webkit-scrollbar { display: none; }
.menu-ana__baglanti {
    font-size: var(--olcek-sm);
    font-weight: 500;
    color: var(--deri-orta);
    text-decoration: none;
    white-space: nowrap;
    padding-block: var(--bosluk-2);
    border-bottom: 2px solid transparent;
    transition: color var(--gecis), border-color var(--gecis);
}
.menu-ana__baglanti:hover,
.menu-ana__baglanti[aria-current="page"] {
    color: var(--deri-koyu);
    border-color: var(--taba);
}
@media (min-width: 860px) {
    .menu-ana { display: flex; }
}

.baslik-aksiyonlar {
    display: flex;
    align-items: center;
    gap: var(--bosluk-1);
    flex-shrink: 0;
    margin-left: auto;
}

/* Simge düğme: arama/menü/sepet gibi ikon-only aksiyonlar.
   44px dokunma hedefi korunuyor ama görsel olarak ince/minimal. */
.simge-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    border-radius: var(--kose);
    color: var(--deri-koyu);
    cursor: pointer;
    position: relative;
    transition: background-color var(--gecis);
}
.simge-dugme:hover { background: var(--kagit-golge); }
.simge-dugme svg { width: 22px; height: 22px; stroke-width: 1.5; }

@media (min-width: 860px) {
    .simge-dugme--mobil { display: none; }
}

.sepet-rozet {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--taba);
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* --- Mobil menü: tam ekran panel, sağdan kayarak açılır ---
   Kapalıyken her ikisi de [hidden] (display:none) — klavye ile
   ulaşılamaz, ekran okuyucu atlar. JS `hidden`i kaldırıp bir kare
   sonra `.acik` ekleyince geçiş oynar; kapanışta ters sırayla. */
.menu-mobil__perde {
    position: fixed;
    inset: 0;
    background: rgba(38, 40, 43, 0.4);
    z-index: 49;
    opacity: 0;
    transition: opacity var(--gecis);
}
.menu-mobil__perde.acik { opacity: 1; }

.menu-mobil__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(340px, 86vw);
    background: var(--kagit);
    box-shadow: var(--golge-lg);
    padding: var(--bosluk-4);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-mobil__panel.acik { transform: translateX(0); }
body.menu-kilit { overflow: hidden; }

.menu-mobil__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--bosluk-4);
    padding-bottom: var(--bosluk-4);
    border-bottom: 1px solid var(--kenar);
}
.menu-mobil__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.menu-mobil__liste a {
    display: block;
    padding: var(--bosluk-3) var(--bosluk-1);
    font-size: var(--olcek-md);
    color: var(--deri-koyu);
    text-decoration: none;
    border-bottom: 1px solid var(--kagit-golge);
}
.menu-mobil__liste a:hover { color: var(--taba-koyu); }
.menu-mobil__baslik-alt {
    font-size: var(--olcek-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--deri-acik);
    margin: var(--bosluk-5) 0 var(--bosluk-1);
}
@media (min-width: 860px) {
    .menu-mobil__perde, .menu-mobil__panel { display: none; }
}

/* --- Mini sepet paneli: "Sepete Ekle" sonrası onay + karar noktası ---
   Mobil menüyle aynı desen (sağdan kayan panel + karartma), ama React
   bileşeni mount/unmount ile açılıp kapandığı için geçiş `.acik` sınıfı
   yerine giriş animasyonuyla (@keyframes) sağlanıyor. z-index mobil
   menüden (50) yüksek: ikisi aynı anda tetiklenirse mini sepet üstte kalsın. */
.mini-sepet-perde {
    position: fixed;
    inset: 0;
    background: rgba(38, 40, 43, 0.4);
    z-index: 59;
    animation: mini-sepet-karart var(--gecis) both;
}

.mini-sepet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(380px, 90vw);
    background: var(--kagit);
    box-shadow: var(--golge-lg);
    padding: var(--bosluk-4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: mini-sepet-kaydir 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes mini-sepet-karart { from { opacity: 0; } to { opacity: 1; } }
@keyframes mini-sepet-kaydir { from { transform: translateX(100%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
    .mini-sepet-perde, .mini-sepet { animation: none; }
}

.mini-sepet__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--bosluk-4);
    padding-bottom: var(--bosluk-4);
    border-bottom: 1px solid var(--kenar);
}
.mini-sepet__basarili {
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-lg);
    color: var(--yesil-onay);
}
.mini-sepet__kapat {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--deri-acik);
    cursor: pointer;
    padding: var(--bosluk-1) var(--bosluk-2);
}
.mini-sepet__kapat:hover { color: var(--deri-koyu); }

.mini-sepet__urun {
    display: flex;
    gap: var(--bosluk-3);
    padding-bottom: var(--bosluk-4);
    margin-bottom: var(--bosluk-4);
    border-bottom: 1px solid var(--kagit-golge);
}
.mini-sepet__urun img {
    width: 64px;
    height: 85px;
    object-fit: cover;
    border-radius: var(--kose);
    flex-shrink: 0;
    background: var(--kagit-golge);
}
.mini-sepet__urun-baslik {
    font-size: var(--olcek-sm);
    color: var(--deri-koyu);
    margin: 0 0 var(--bosluk-1);
}
.mini-sepet__kisisel {
    font-size: var(--olcek-xs);
    color: var(--deri-acik);
    font-style: italic;
    margin: 0 0 var(--bosluk-1);
}
.mini-sepet__urun-fiyat {
    font-size: var(--olcek-xs);
    color: var(--deri-orta);
    margin: 0;
}

.mini-sepet__kargo-notu {
    font-size: var(--olcek-xs);
    color: var(--sari-uyari);
    background: var(--sari-soluk);
    padding: var(--bosluk-2) var(--bosluk-3);
    border-radius: var(--kose);
    margin-bottom: var(--bosluk-4);
}
.mini-sepet__kargo-notu--basarili {
    color: var(--yesil-onay);
    background: var(--yesil-soluk);
}

.mini-sepet__toplam {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--olcek-md);
    color: var(--deri-koyu);
    margin-bottom: var(--bosluk-4);
}
.mini-sepet__toplam strong { font-size: var(--olcek-lg); }

/* ---------------------------------------------------------------------
   12b. ANA SAYFA — KAHRAMAN (HERO)
   --------------------------------------------------------------------- */
/* overflow:hidden — sergi ışığı efekti (aşağıda) taşarsa yatay kaydırma
   çubuğu açmasın diye bir güvenlik sınırı. Doku burada da var — body'nin
   krem zemininden ayrı bir "kağıt" yüzey olsa da dokusuz/düz kalmasın. */
.kahraman {
    background-color: var(--kagit);
    background-image: var(--doku-kagit);
    background-repeat: repeat;
    border-bottom: 1px solid var(--kenar);
    overflow: hidden;
}

.kahraman__ic {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bosluk-6);
    align-items: center;
    padding-block: var(--bosluk-7);
}
@media (min-width: 900px) {
    .kahraman__ic { grid-template-columns: 1fr 1fr; gap: var(--bosluk-8); padding-block: var(--bosluk-8); }
    .kahraman__gorsel { order: 2; }
    .kahraman__metin { order: 1; }
}

.kahraman__etiket {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-size: var(--olcek-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--taba-koyu);
    font-weight: 600;
    margin-bottom: var(--bosluk-3);
}
.kahraman__etiket::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    background: var(--taba-koyu);
}

.kahraman__metin { max-width: 56ch; }
.kahraman__lead {
    font-size: var(--olcek-lg);
    color: var(--deri-orta);
    line-height: 1.6;
}
.kahraman__aksiyonlar {
    display: flex;
    gap: var(--bosluk-3);
    flex-wrap: wrap;
    margin-top: var(--bosluk-5);
}
.kahraman__guven {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-size: var(--olcek-sm);
    color: var(--deri-acik);
    margin-top: var(--bosluk-5);
}
.kahraman__yildiz { color: var(--bakir); letter-spacing: 1px; }

.kahraman__gorsel-sarmal {
    position: relative;
    max-width: 460px;
    margin-inline: auto;
    width: 100%;
}
.kahraman__gorsel-cerceve {
    display: block;
    border-radius: var(--kose-buyuk);
    overflow: hidden;
    box-shadow: var(--golge-lg);
}
.kahraman__gorsel-cerceve img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform 500ms ease;
}
.kahraman__gorsel-sarmal:hover .kahraman__gorsel-cerceve img { transform: scale(1.02); }

.kahraman__rozet {
    position: absolute;
    bottom: var(--bosluk-4);
    left: calc(var(--bosluk-4) * -1);
    background: var(--kagit);
    border: 1px solid var(--kenar);
    border-radius: var(--kose-buyuk);
    box-shadow: var(--golge-md);
    padding: var(--bosluk-3) var(--bosluk-4);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-sm);
    color: var(--deri-koyu);
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
}
@media (max-width: 480px) {
    .kahraman__rozet { left: var(--bosluk-2); font-size: var(--olcek-xs); }
}

/* ---------------------------------------------------------------------
   12c. ALT BİLGİ (FOOTER)
   --------------------------------------------------------------------- */
.site-alt {
    background: var(--antrasit);
    color: #C9C3BA;
    padding-block: var(--bosluk-7);
    margin-top: var(--bosluk-8);
}
.site-alt a { color: #E4DDD2; }
.site-alt h4 { color: #FFF; font-size: var(--olcek-md); }

.site-alt__izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--bosluk-6);
}
.site-alt__marka-metin {
    font-size: var(--olcek-sm);
    line-height: 1.7;
    color: #C9C3BA;
    margin-bottom: var(--bosluk-4);
}
.site-alt__baglanti-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--olcek-sm);
    line-height: 2;
}

/* Sosyal ikon düğmeleri: köşeli, ince çerçeveli — deri dikişi hissi */
.sosyal-baglantilar {
    display: flex;
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-4);
}
.sosyal-baglantilar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--kose);
    color: #E4DDD2;
    transition: background-color var(--gecis), border-color var(--gecis);
}
.sosyal-baglantilar a:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.32); }
.sosyal-baglantilar svg { width: 18px; height: 18px; stroke-width: 1.5; }

/* Güven rozetleri: ödeme/iade/güvenlik ikon+metin çifti */
.guven-rozetleri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-5);
    padding: var(--bosluk-5) 0;
    margin-top: var(--bosluk-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.guven-rozetleri li {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-size: var(--olcek-xs);
    color: #C9C3BA;
    list-style: none;
}
.guven-rozetleri svg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; color: #E4DDD2; }

.site-alt__alt-satir {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-3);
    justify-content: space-between;
    align-items: center;
    font-size: var(--olcek-xs);
    margin: var(--bosluk-6) 0 0;
    padding-top: var(--bosluk-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------------------------------
   13. ÜRÜN DETAY — İÇERİK VE DEĞERLENDİRMELER
   --------------------------------------------------------------------- */
.kirinti { font-size: var(--olcek-xs); color: var(--deri-acik); margin-bottom: var(--bosluk-5); }
.kirinti a { color: var(--deri-acik); }
.kirinti a:hover { color: var(--taba-koyu); }

.urun-hikaye { margin-top: var(--bosluk-6); }
.urun-hikaye h2 { font-size: var(--olcek-xl); }
.urun-hikaye p { color: var(--deri-orta); }
.urun-hikaye h3 { font-size: var(--olcek-md); margin-top: var(--bosluk-5); }

.urun-ozellik {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--bosluk-2) var(--bosluk-5);
    font-size: var(--olcek-sm);
    margin-top: var(--bosluk-5);
}
.urun-ozellik dt { color: var(--deri-acik); }
.urun-ozellik dd { margin: 0; }

/* Galeri: ana görsele hover'da hafif yakınlaştırma — "incele" hissi verir */
.galeri__ana { cursor: zoom-in; }
.galeri__ana img { transition: transform 400ms ease; }
.galeri__ana:hover img { transform: scale(1.04); }

/* --- Müşteri değerlendirmeleri --- */
.degerlendirmeler {
    margin-top: var(--bosluk-8);
    border-top: 1px solid var(--kenar);
    padding-top: var(--bosluk-6);
}
.degerlendirmeler__baslik {
    display: flex;
    align-items: baseline;
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-5);
}
.degerlendirme-listesi { display: grid; gap: var(--bosluk-5); max-width: 70ch; margin: 0; padding: 0; list-style: none; }
.degerlendirme-kart { padding-bottom: var(--bosluk-5); border-bottom: 1px solid var(--kenar); }
.degerlendirme-kart:last-child { border-bottom: none; padding-bottom: 0; }
.degerlendirme-kart__ust {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    flex-wrap: wrap;
    margin-bottom: var(--bosluk-2);
}
.degerlendirme-kart__yildiz { color: var(--bakir); letter-spacing: 1px; font-size: var(--olcek-sm); }
.degerlendirme-kart__isim { font-weight: 600; font-size: var(--olcek-sm); color: var(--deri-koyu); }
.degerlendirme-kart__tarih { font-size: var(--olcek-xs); color: var(--deri-acik); }
.degerlendirme-kart__baslik { font-family: var(--yazi-baslik); font-size: var(--olcek-md); margin: 0 0 var(--bosluk-2); }
.degerlendirme-kart__metin { font-size: var(--olcek-sm); color: var(--deri-orta); margin: 0; line-height: 1.7; }

/* ---------------------------------------------------------------------
   14. SEPET
   --------------------------------------------------------------------- */
.sepet-liste { list-style: none; margin: 0 0 var(--bosluk-6); padding: 0; }

.sepet-satir {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--bosluk-4);
    align-items: start;
    padding: var(--bosluk-5) 0;
    border-bottom: 1px solid var(--kenar);
}
.sepet-satir:first-child { padding-top: 0; }

.sepet-satir__gorsel {
    width: 72px;
    height: 72px;
    border-radius: var(--kose);
    overflow: hidden;
    background: var(--kagit-golge);
    flex-shrink: 0;
}
.sepet-satir__gorsel img { width: 100%; height: 100%; object-fit: cover; }

.sepet-satir__baslik {
    font-size: var(--olcek-sm);
    font-weight: 600;
    color: var(--deri-koyu);
    text-decoration: none;
    display: block;
    margin-bottom: var(--bosluk-1);
}
.sepet-satir__baslik:hover { color: var(--taba-koyu); }

.sepet-satir__kisisel {
    font-size: var(--olcek-xs);
    color: var(--deri-orta);
    background: var(--taba-soluk);
    display: inline-block;
    padding: 2px var(--bosluk-2);
    border-radius: var(--kose);
    margin-top: var(--bosluk-1);
}

.sepet-satir__aksiyon {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--bosluk-2);
    text-align: right;
}
.sepet-satir__toplam {
    font-family: var(--yazi-rakam);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--deri-koyu);
}
.sepet-satir__adet {
    width: 64px;
    min-height: 36px;
    padding: var(--bosluk-1) var(--bosluk-2);
    border: 1px solid var(--kenar-koyu);
    border-radius: var(--kose);
    font-family: var(--yazi-govde);
    font-size: 14px;
    background: #FFF;
}
.sepet-satir__sil {
    border: none;
    background: none;
    color: var(--deri-acik);
    font-size: var(--olcek-xs);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.sepet-satir__sil:hover { color: var(--kirmizi); }

@media (max-width: 480px) {
    .sepet-satir { grid-template-columns: 56px 1fr; }
    .sepet-satir__aksiyon { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: var(--bosluk-2); }
}

/* --- Özet kutusu: `.satin-al` kutusuyla aynı görsel dil --- */
.siparis-ozet__satir {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bosluk-3);
    font-size: var(--olcek-sm);
    color: var(--deri-orta);
    margin-bottom: var(--bosluk-3);
}
.siparis-ozet__satir--toplam {
    font-size: var(--olcek-lg);
    font-weight: 700;
    color: var(--deri-koyu);
    border-top: 1px solid var(--kenar);
    padding-top: var(--bosluk-4);
    margin-top: var(--bosluk-2);
}
.kupon-form { display: flex; gap: var(--bosluk-2); margin-bottom: var(--bosluk-4); }
.kupon-form .alan__girdi { text-transform: uppercase; }

/* --- Boş durum: sepet, arama sonucu vb. her yerde tekrar kullanılır --- */
.durum-bos {
    text-align: center;
    padding: var(--bosluk-8) var(--bosluk-4);
    background: var(--kagit);
    border: 1px solid var(--kenar);
    border-radius: var(--kose-buyuk);
}
.durum-bos__ikon { color: var(--kenar-koyu); margin-bottom: var(--bosluk-4); }
.durum-bos__ikon svg { width: 40px; height: 40px; stroke-width: 1.25; }
.durum-bos h2 { font-size: var(--olcek-xl); }
.durum-bos p { color: var(--deri-orta); max-width: 44ch; margin-inline: auto; }

/* ---------------------------------------------------------------------
   15. DOKU VE ATMOSFER
   Bir "sanat eseri" dükkânı asıl vitrinini fotoğrafla kurar — bu yüzden
   buradaki dokular BİLİNÇLİ OLARAK çok hafif (opacity ≤ %5-16). Amaç
   malzeme/atölye hissi eklemek, ürünle rekabet etmek değil.
   --------------------------------------------------------------------- */

/* Kağıt dokusu: düz zemine hafif bir "elle basılmış kağıt/keten" hissi
   verir. `--doku-kagit` jetonu (yukarıda, 1. JETONLAR) her düz renkli
   yüzeyde tekrar kullanılabilir — sadece body'de kalmasın diye. */
body {
    background-image: var(--doku-kagit);
    background-repeat: repeat;
}

/* Sergi ışığı: kahraman görselinin ARKASINDA yumuşak, sıcak bir parlama —
   ürün bir podyumda/vitrinde sergileniyormuş hissi verir. */
.kahraman__gorsel-sarmal { position: relative; }
.kahraman__gorsel-sarmal::before {
    content: "";
    position: absolute;
    inset: -10% -16%;
    background: radial-gradient(closest-side, rgba(169, 113, 63, 0.18), transparent 72%);
    z-index: -1;
    filter: blur(6px);
}

/* Dikiş ayracı: bölümler arası düz çizgi yerine, deri dikişini çağrıştıran
   kesikli çizgi — marka kimliğini süsten öte, arayüzün kendisine taşır. */
.ayrac-dikis {
    border: none;
    height: 1px;
    margin: 0;
    background-image: repeating-linear-gradient(90deg, var(--kenar-koyu) 0 6px, transparent 6px 13px);
}
/* Bir bölümü baştan sona dikişle çevreler (düz border yerine) — hikâye/
   atölye gibi anlatı bölümlerinde marka kimliğini hissettirir. */
.bolum--dikisli {
    border-block: none;
    position: relative;
}
.bolum--dikisli::before,
.bolum--dikisli::after {
    content: "";
    display: block;
    height: 1px;
    background-image: repeating-linear-gradient(90deg, var(--kenar-koyu) 0 6px, transparent 6px 13px);
}

/* ---------------------------------------------------------------------
   16. ATÖLYEDEN — süreç fotoğrafları
   Metin "el yapımı" diyor; bu ızgara bunu KANITLIYOR. Kare/dikdörtgen
   kartlar bilinçli — düzenli ritim, kolaj karmaşası değil.
   --------------------------------------------------------------------- */
.atolye-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--bosluk-4);
    margin: var(--bosluk-6) 0;
}
.atolye-kare {
    margin: 0;
    background: var(--kagit-golge);
    border-radius: var(--kose-buyuk);
    overflow: hidden;
}
.atolye-kare__gorsel {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.atolye-kare__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}
.atolye-kare:hover .atolye-kare__gorsel img { transform: scale(1.03); }
.atolye-kare figcaption {
    padding: var(--bosluk-2) var(--bosluk-3) var(--bosluk-3);
    font-size: var(--olcek-xs);
    color: var(--deri-acik);
    text-align: center;
}

/* ---------------------------------------------------------------------
   17. HİKAYE SAYFASI — alıntı ve imza
   --------------------------------------------------------------------- */
.alinti {
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-xl);
    font-style: italic;
    color: var(--deri-koyu);
    border-left: 3px solid var(--taba);
    padding-left: var(--bosluk-5);
    margin: var(--bosluk-7) 0;
    line-height: 1.5;
}
.imza {
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-lg);
    font-weight: 600;
    color: var(--deri-koyu);
    margin-top: var(--bosluk-6);
}

/* ---------------------------------------------------------------------
   18. YAZDIRMA (fatura / sipariş özeti)
   --------------------------------------------------------------------- */
@media print {
    .site-baslik, .site-alt, .mobil-cta, .dugme,
    .duyuru-cubugu, .menu-mobil__perde, .menu-mobil__panel { display: none !important; }
    body { background: #FFF; color: #000; }
    .satin-al, .urun-kart { border: 1px solid #999; box-shadow: none; }
}

/* ---------------------------------------------------------------------
   19. BLOG VE S.S.S.
   
   Bu iki sayfa satış akışının değil, ORGANİK TRAFİĞİN parçası
   (bkz. db/03_icerik.sql). Görsel dil bilinçli olarak ürün
   sayfalarından daha sakin: okuma ölçüsü dar, kart gölgeleri hafif,
   renk yalnızca bağlantıda ve çağrı kutusunda.
   --------------------------------------------------------------------- */

/* --- Yazı listesi --- */
.yazi-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bosluk-6);
}

.yazi-kart {
    display: flex;
    flex-direction: column;
    background: var(--kagit);
    border: 1px solid var(--kenar);
    border-radius: var(--kose);
    overflow: hidden;
    transition: box-shadow var(--gecis), transform var(--gecis);
}
.yazi-kart:hover { box-shadow: var(--golge-md); transform: translateY(-2px); }

.yazi-kart__gorsel {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--kagit-golge);
    overflow: hidden;
}
.yazi-kart__gorsel img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--gecis);
}
.yazi-kart:hover .yazi-kart__gorsel img { transform: scale(1.03); }

.yazi-kart__govde {
    padding: var(--bosluk-4);
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-2);
}
.yazi-kart__meta {
    font-size: var(--olcek-xs);
    color: var(--deri-acik);
    margin: 0;
}
.yazi-kart__baslik {
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-lg);
    line-height: 1.3;
    margin: 0;
    text-wrap: balance;
}
.yazi-kart__baslik a { color: var(--deri-koyu); text-decoration: none; }
.yazi-kart__baslik a:hover { color: var(--taba-koyu); }
.yazi-kart__ozet {
    font-size: var(--olcek-sm);
    color: var(--deri-orta);
    margin: 0;
    line-height: 1.6;
}

/* --- Tekil yazı ---
   Okuma ölçüsü 68ch: bundan geniş satır, gözün satır başını
   bulmasını zorlaştırır. Kapak fotoğrafı ölçünün dışına taşar. */
.yazi { max-width: 68ch; }

.yazi__baslik-alani { margin-bottom: var(--bosluk-6); }
.yazi__meta {
    font-size: var(--olcek-sm);
    color: var(--deri-acik);
    margin: var(--bosluk-3) 0 0;
}
.yazi__ozet {
    font-size: var(--olcek-lg);
    color: var(--deri-orta);
    line-height: 1.65;
    margin: var(--bosluk-5) 0 0;
}

.yazi__kapak { margin: 0 0 var(--bosluk-6); }
.yazi__kapak img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--kose-buyuk);
    box-shadow: var(--golge-md);
}

.yazi__govde {
    font-size: var(--olcek-lg);
    line-height: 1.8;
    color: var(--deri-orta);
}
.yazi__govde h2 {
    font-size: var(--olcek-xl);
    color: var(--deri-koyu);
    margin: var(--bosluk-7) 0 var(--bosluk-3);
    text-wrap: balance;
}
.yazi__govde h3 {
    font-size: var(--olcek-lg);
    color: var(--deri-koyu);
    margin: var(--bosluk-6) 0 var(--bosluk-2);
}
.yazi__govde p  { margin: 0 0 var(--bosluk-4); }
.yazi__govde ul,
.yazi__govde ol { margin: 0 0 var(--bosluk-4); padding-left: 1.4em; }
.yazi__govde li { margin-bottom: var(--bosluk-2); }
.yazi__govde img {
    width: 100%;
    border-radius: var(--kose-buyuk);
    margin: var(--bosluk-5) 0;
}
.yazi__govde blockquote {
    border-left: 3px solid var(--taba);
    margin: var(--bosluk-6) 0;
    padding-left: var(--bosluk-5);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-xl);
    line-height: 1.45;
    color: var(--deri-koyu);
}
/* Geniş içerik sayfayı yana kaydırmasın */
.yazi__govde table { display: block; overflow-x: auto; max-width: 100%; }

.yazi__etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    list-style: none;
    padding: 0;
    margin: var(--bosluk-6) 0 0;
}
.yazi__etiketler li {
    font-size: var(--olcek-xs);
    color: var(--deri-orta);
    background: var(--kagit-golge);
    border: 1px solid var(--kenar);
    border-radius: 999px;
    padding: var(--bosluk-1) var(--bosluk-3);
}

/* --- Yazıdan koleksiyona köprü: bu sayfaların varlık sebebi --- */
.yazi__cagri {
    margin: var(--bosluk-7) 0 0;
    padding: var(--bosluk-6);
    background: var(--taba-soluk);
    border: 1px solid var(--kenar-koyu);
    border-radius: var(--kose-buyuk);
}
.yazi__cagri-ust {
    font-size: var(--olcek-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--taba-koyu);
    margin: 0 0 var(--bosluk-2);
}
.yazi__cagri-metin {
    font-size: var(--olcek-md);
    line-height: 1.7;
    color: var(--deri-koyu);
    margin: 0 0 var(--bosluk-5);
}
.yazi__cagri-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-3);
}

/* --- S.S.S. akordeonu ---
   <details>/<summary> kullanılıyor: JavaScript gerektirmez, ekran
   okuyucu ve klavye desteği tarayıcıdan gelir. */
.sss-bolum { margin-bottom: var(--bosluk-7); }
.sss-bolum__baslik {
    font-size: var(--olcek-lg);
    color: var(--deri-acik);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--yazi-govde);
    font-weight: 600;
    margin: 0 0 var(--bosluk-4);
    padding-bottom: var(--bosluk-2);
    border-bottom: 1px solid var(--kenar);
}

.sss-oge { border-bottom: 1px solid var(--kenar); }

.sss-oge__soru {
    cursor: pointer;
    list-style: none;
    padding: var(--bosluk-4) var(--bosluk-6) var(--bosluk-4) 0;
    font-weight: 600;
    color: var(--deri-koyu);
    position: relative;
}
.sss-oge__soru::-webkit-details-marker { display: none; }
.sss-oge__soru:hover { color: var(--taba-koyu); }
.sss-oge__soru:focus-visible {
    outline: 2px solid var(--taba);
    outline-offset: 2px;
}

/* Artı/eksi işareti — ikon dosyası gerektirmeden, saf CSS */
.sss-oge__soru::after {
    content: "";
    position: absolute;
    right: var(--bosluk-2);
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--taba);
    transform: translateY(-50%);
}
.sss-oge__soru::before {
    content: "";
    position: absolute;
    right: calc(var(--bosluk-2) + 5px);
    top: 50%;
    width: 2px;
    height: 12px;
    background: var(--taba);
    transform: translateY(-50%);
    transition: opacity var(--gecis);
}
.sss-oge[open] .sss-oge__soru::before { opacity: 0; }

.sss-oge__cevap {
    padding: 0 var(--bosluk-6) var(--bosluk-5) 0;
    color: var(--deri-orta);
    line-height: 1.75;
}
.sss-oge__cevap p:first-child { margin-top: 0; }
.sss-oge__cevap p:last-child  { margin-bottom: 0; }