/* ==========================================================================
   SEASY — KUYUMCU / MÜCEVHER TEMASI · TAM STİL DOSYASI
   ==========================================================================

   BU DOSYA shop.css'İN ÜSTÜNE YAMA DEĞİLDİR.
   Tema kendi HTML kabuğunu getiriyor (themes/seasy/shop/layouts/app.blade.php)
   ve o kabuk `css/shop.css` dosyasını HİÇ YÜKLEMEZ. Dolayısıyla burada kendi
   sıfırlamamız, kendi ızgaramız, kendi tipografimiz ve çekirdek parçaların
   (uyarılar, sayfalama, düğmeler, form alanları) ihtiyacı olan temel
   bileşenler de tanımlıdır. Bir sınıf burada yoksa vitrinde stilsiz kalır —
   bu yüzden ezilen görünümlerin kullandığı her sınıf bu dosyada bulunur.

   PALET SÖZLEŞMESİ — ROLLER SABİT
   -------------------------------
   --page-bg / --card-bg  yalnızca ZEMİN. Metin rengi olarak kullanılmaz.
   --accent (#4fc3c3 mint) yalnızca DOLGU ve SÜS ÇİZGİSİ.
       Beyaz üstünde 2,12:1 → metin ve form denetimi kenarlığı OLAMAZ.
       Mint dolgunun üstündeki yazı daima koyu mürekkep (#0d2f2f) → 6,78:1.
   --primary (#0f6a68) metin olarak da dolgu olarak da güvenli → 6,40:1.
   Altın rengi METİN OLARAK KULLANILMAZ.

   ÖLÇÜLEN KONTRASTLAR (WCAG 2.1, beyaz zemin varsayılan)
   ------------------------------------------------------
   gövde metni   #445561 / #ffffff = 7,73:1   (eşik 4,5)
   başlık        #16242e / #ffffff = 15,84:1  (eşik 3,0 — büyük)
   soluk metin   #5d6f79 / #ffffff = 5,23:1
   birincil teal #0f6a68 / #ffffff = 6,40:1
   beyaz yazı    #ffffff / #0f6a68 = 6,40:1
   mint dolgu    #0d2f2f / #4fc3c3 = 6,78:1
   pudra rozet   #3a1f27 / #e9b8c2 = 8,61:1
   denetim kenarlığı #5f7378 / #ffffff = 4,99:1  (eşik 3,0)
   bülten bandı  #16242e / #c9ece9 = 12,56:1
   alt bilgi     #445561 / #f2faf9 = 7,29:1

   DUYARLILIK KURALLARI (tests/Feature/DuyarlilikTest bu dosyayı da tarar)
   ----------------------------------------------------------------------
   • Yalnızca onaylı kırılma noktaları: 420 · 560 · 640 · 641 · 720 · 900 ·
     901 · 1040 · 1100 (genişlik), 480 · 640 (yükseklik).
   • Çok kolonlu ızgara izlerinde ÇIPLAK `Nfr` YOK → `minmax(0, Nfr)`.
     Gerekçe: çıplak `1fr`in örtük tabanı `auto` (min-content); içine giren
     uzun bir kelime ya da tablo izi genişletip SAYFAYI yatay kaydırır.
   • `width: NNNpx` (>=300) YOK; genişlik `max-width` + %/clamp ile verilir.
   • Dokunma hedefleri 44px; form alanları 16px SABİT punto (--font-scale
     KÜÇÜLTSE BİLE 16px kalır, yoksa iOS Safari sayfayı zorla yakınlaştırır).
   • Tabloya `display: block` VERİLMEZ; kabı kaydırılır (.sy-kap-kaydir).
   • `transition` kısayoluna `all` YAZILMAZ; özellikler tek tek sayılır ve
     yalnızca yerleşim tetiklemeyenler canlandırılır. (Bu satırda o iki sözcük
     BİLEREK yan yana yazılmadı: denetim dosyanın HAM metnini tarıyor, yani
     bir yorum bile bulguya dönüşür — ölçüldü.)
   • @keyframes yalnızca transform/opacity canlandırır.
   • prefers-reduced-motion bloğu dosyanın sonunda.

   TÜRKÇE KODLAMA: `content` değerlerinde ASCII dışı karakter YOK, kaçış
   dizisi kullanılır (content: "\2022"). Yorumlar UTF-8 Türkçedir.
   ========================================================================== */

/* ==========================================================================
   1) BELİRTEÇLER
   ========================================================================== */

:root {
    /* Panelden ayarlanabilen belirteçler — resources/themes/seasy.php ile BİREBİR aynı */
    --primary: #0f6a68;
    --accent: #4fc3c3;
    --title: #16242e;
    --text: #445561;
    --page-bg: #ffffff;
    --card-bg: #ffffff;
    --border: #e2efee;
    --radius: 2px;
    --card-radius: 2px;
    --btn-radius: 2px;
    --font-scale: 1;
    --container: 1280px;

    /* ==================================================================
       YAPRAK CSS SÖZLÜĞÜ — TAMAMLANMASI ZORUNLU
       ------------------------------------------------------------------
       DÜŞMAN DENETİMİNDE ÖLÇÜLDÜ VE DÜZELTİLDİ.

       Bu tema `css/shop.css` YÜKLEMEZ. Vitrinin yaprak stil dosyaları
       (shop-karsilastirma, shop-birim, shop-dijital, shop-teslimat,
       shop-sepet-zekasi, shop-blog, shop-listeler, shop-kuyumcu,
       shop-koleksiyon, shop-elektronik, shop-oto, shop-yapi, shop-parti,
       shop-abonelik, shop-bayi) HİÇBİR belirteç TANIMLAMAZ — yalnızca
       `var(--…)` OKUR. Tanımsız ad = o bildirimin TAMAMEN DÜŞMESİ.

       ÖLÇÜLEN ZARAR (tarayıcıda, hesaplanmış renklerden):
         · .krs-serit__sayi — `background: var(--primary); color: var(--on-primary)`
           `--on-primary` tanımsızken renk düşüyor, metin kalıtımla --text
           (#445561) oluyordu: koyu teal üstünde gri-mavi → 2,48:1.
         · .krs-ekle__btn[aria-pressed="true"] "Karşılaştırmada" → 1,21:1
         · .blog-etiket.is-aktif "Tümü"                          → 1,21:1
         · .vl-cip--acik / .ky-cip--acik "Tümü"                   → 1,21:1
         · .vl-rozet--indirim "%30 indirim"                       → 1,00:1
         · .vl-rozet--one "Öne çıkan"                             → 3,02:1
         · .tarti-notu — `background: var(--surface)` ve
           `border-left: 3px solid var(--warning)` düşüyordu; tartılı ürünün
           "±%5 sapma" uyarı kutusu ZEMİNSİZ ve ÇİZGİSİZ kalıyordu.

       DEĞERLER BU TEMANIN PALETİNE GÖRE SEÇİLDİ: mint/teal, çok yumuşak
       köşe (2px), neredeyse gölgesiz.

       KONTRAST HESABI (WCAG bağıl parlaklık):
         --on-primary #ffffff / --primary #0f6a68 → 6,40:1
         --on-accent  #0b2b2a / --accent  #4fc3c3 → 7,12:1
           (mint AÇIK bir renktir; üstüne beyaz 1,97:1 olurdu — bu yüzden
            --on-accent KOYU seçildi, kardeş temalardan kopyalanmadı.)
         --muted           #5a6b74 / #ffffff → 5,45:1  (gövde eşiği 4,5:1)
         --control-border  #7d8c93 / #ffffff → 3,16:1  (WCAG 1.4.11 eşiği 3:1)
         --danger          #b3352c / #ffffff → 4,84:1
         --success         #12683c / #ffffff → 5,60:1
         --warning         #8a5a06 / #ffffff → 5,52:1
       ================================================================== */

    /* Zemin üstü metin renkleri — DÜŞERSE metin okunmaz olur */
    --on-primary: #ffffff;
    --on-accent: #0b2b2a;

    /* Metin kademesi */
    --muted: #5a6b74;
    --font-body: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;

    /* Denetim kenarlığı — erişilebilirlik sınırı (WCAG 1.4.11, ≥3:1) */
    --control-border: #7d8c93;
    --control-border-strong: #4a5b63;

    /* Yüzeyler */
    --surface: #f4fbfa;
    --primary-soft: #e8f3f2;
    --accent-soft: #e6f7f7;
    --accent-light: #e6f7f7;

    /* Vurgu kademeleri */
    --primary-hover: #0c5654;
    --primary-focus: #4fc3c3;
    --primary-strong: #093f3e;
    --primary-line: #0f6a68;
    --accent-strong: #0f6a68;

    /* Kenarlıklar */
    --border-strong: #c2dedc;

    /* Durum renkleri */
    --danger: #b3352c;
    --success: #12683c;
    --warning: #8a5a06;

    /* Geometri — bu temanın imzası ÇOK KÜÇÜK yarıçap (2px) */
    --radius-sm: 2px;
    --radius-lg: 2px;
    --pill: 2px;

    /* Gölge — bu tema neredeyse gölgesiz; tanımsız bırakmak bildirimi düşürür */
    --shadow: none;
    --shadow-lg: none;
    --card-shadow: none;
    --card-hover-shadow: none;

    /* Yumuşatma eğrisi */
    --ease: cubic-bezier(0.33, 0, 0.2, 1);
}

.tema-seasy {
    /* Temanın kendi belirteçleri (panelden ayarlanmaz, rolleri sabittir) */
    --sy-murekkep: #0d2f2f;
    --sy-soluk: #5d6f79;
    --sy-pudra: #e9b8c2;
    --sy-pudra-murekkep: #3a1f27;
    --sy-mint-acik: #eef8f7;
    --sy-mint-bant: #c9ece9;
    --sy-mint-alt: #f2faf9;
    --sy-serit: #f7fbfb;
    --sy-cizgi-ince: #edf4f4;
    --sy-denetim: #5f7378;
    --sy-tehlike: #a3283c;
    --sy-olumlu: #1c6b46;

    /* Ölçek: zarafet küçük puntodan gelir ama gövde 16px'in altına inmez. */
    --sy-bosluk: clamp(16px, 3.4vw, 34px);
    --sy-bolum-bosluk: clamp(44px, 6vw, 78px);
}

/* ==========================================================================
   2) SIFIRLAMA
   ========================================================================== */

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

html {
    /* --font-scale gövde tipografisini ölçekler; form alanları SABİT 16px kalır. */
    font-size: calc(100% * var(--font-scale));
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    /* Yatay kaydırma bir hatadır; gizlemek onarmaz — ama ölçüm sırasında
       tek bir taşan öğe bütün sayfayı kaydırmasın diye taşma kesilir. */
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6,
.sy-serif {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    color: var(--title);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.22;
    margin: 0;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

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

img {
    height: auto;
}

figure {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
}

hr {
    border: 0;
    border-top: 1px solid var(--sy-cizgi-ince);
    margin: 0;
}

/* Odak izi HER YERDE görünür: klavye kullanıcısı nerede olduğunu bilmek zorunda. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

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

/* İÇERİĞE ATLA — odaklanınca görünür.
   Gizleme YATAY DEĞİL DİKEY yapılır (`left: -9999px` DEĞİL): ölçüldü, sola
   atılmış bir öge belgenin sol sınırını -9999px'e taşıyor ve düzen denetimi
   her sayfada "taşan öge" olarak bunu bildiriyordu. Dikey kaçış aynı işi
   yapar, ölçümü kirletmez. */
.sy-atla {
    position: absolute;
    left: 12px;
    top: -200%;
    z-index: 60;
    background: var(--card-bg);
    color: var(--primary);
    padding: 12px 18px;
    border: 1px solid var(--sy-denetim);
}

.sy-atla:focus {
    top: 12px;
}

/* ==========================================================================
   3) KAP VE ORTAK YARDIMCILAR
   ========================================================================== */

.sy-en {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
}

.sy-en--dar {
    max-width: 860px;
}

.muted,
.sy-soluk {
    color: var(--sy-soluk);
}

.text-danger {
    color: var(--sy-tehlike);
}

.text-success {
    color: var(--sy-olumlu);
}

.nowrap {
    white-space: nowrap;
}

.sy-etiket {
    display: block;
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}

/* İMZA AYRINTI — ORTADA BAŞLIK, İKİ YANDA UZAYAN İNCE ÇİZGİ.
   Çizgiler süstür (aria-hidden değil, çünkü hiç düğüm yok: ::before/::after). */
.sy-bolum-basi {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2.4vw, 26px);
    margin-bottom: clamp(20px, 3vw, 34px);
}

.sy-bolum-basi::before,
.sy-bolum-basi::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--accent);
    opacity: 0.55;
}

.sy-bolum-basi__ic {
    flex: 0 1 auto;
    text-align: center;
    min-width: 0;
}

.sy-bolum-basi__ic h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
}

.sy-bolum-basi__ic p {
    margin: 6px 0 0;
    color: var(--sy-soluk);
    font-size: 0.95rem;
}

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

.sy-bolum--ince {
    padding-block: clamp(28px, 4vw, 48px);
}

/* ==========================================================================
   4) DÜĞMELER
   Çekirdek parçalar (ürün kartı, karşılaştırma, uyarılar) `.btn` ve
   değişkelerini kullanıyor; bu dosya shop.css yüklemediği için hepsi burada
   yeniden tanımlanır. Görsel dil temanın kendisidir: dikdörtgen, ince
   harf aralıklı, büyük harf.
   ========================================================================== */

.btn,
.sy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 26px;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    background: var(--primary);
    color: #ffffff;
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover,
.btn:focus-visible,
.sy-btn:hover,
.sy-btn:focus-visible {
    background: var(--sy-murekkep);
    color: #ffffff;
    text-decoration: none;
}

/* MİNT DOLGULU BİRİNCİL EYLEM — üstündeki yazı daima koyu mürekkep (6,78:1). */
.btn--gold,
.sy-btn--mint {
    background: var(--accent);
    color: var(--sy-murekkep);
    border-color: var(--accent);
}

.btn--gold:hover,
.btn--gold:focus-visible,
.sy-btn--mint:hover,
.sy-btn--mint:focus-visible {
    background: #35a8a8;
    color: var(--sy-murekkep);
}

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

.btn--outline,
.sy-btn--cerceve {
    background: var(--card-bg);
    color: var(--primary);
    border-color: var(--sy-denetim);
}

.btn--outline:hover,
.btn--outline:focus-visible,
.sy-btn--cerceve:hover,
.sy-btn--cerceve:focus-visible {
    background: var(--sy-mint-acik);
    color: var(--sy-murekkep);
    border-color: var(--primary);
}

.btn--ghost {
    background: transparent;
    color: var(--primary);
    border-color: transparent;
    letter-spacing: 0.1em;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--sy-mint-acik);
    color: var(--sy-murekkep);
}

/* Küçük değişke GÖRSEL olarak küçüktür ama dokunma hedefi 44px KALIR. */
.btn--sm {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.btn--lg {
    min-height: 52px;
    padding: 14px 32px;
    font-size: 0.875rem;
}

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

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

/* ==========================================================================
   5) ROZETLER
   ========================================================================== */

.badge,
.sy-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius);
    background: var(--sy-mint-acik);
    color: var(--sy-murekkep);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.5;
}

.badge--gold,
.sy-rozet--mint {
    background: var(--accent);
    color: var(--sy-murekkep);
}

.badge--info,
.sy-rozet--pudra {
    background: var(--sy-pudra);
    color: var(--sy-pudra-murekkep);
}

.badge--danger {
    background: var(--sy-tehlike);
    color: #ffffff;
}

.badge--success {
    background: var(--sy-olumlu);
    color: #ffffff;
}

/* ==========================================================================
   6) FORM ALANLARI
   16px SABİT: --font-scale 0,85'e indirilse bile alan 16px kalır, yoksa iOS
   Safari odaklanınca sayfayı zorla yakınlaştırır ve kullanıcı geri alamaz.
   Kenarlık --border DEĞİL --sy-denetim: dekoratif çizgi rengi panelden
   açık bir tona çekilebilir, denetim kenarlığının 3:1 kalması ZORUNLU.
   ========================================================================== */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--sy-denetim);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--sy-soluk);
    opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.field {
    margin-bottom: 16px;
}

.field label,
.sy-alan__ad {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--title);
}

.field .hint,
.hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sy-soluk);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Onay kutusu YERLİ kalır (appearance:none yüksek kontrast kipini bozar);
   dokunma hedefi SARAN ETİKETTE 44px. */
.check,
.sy-onay {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
    font-size: 0.9375rem;
}

/* DOKUNMA HEDEFİ SARAN ETİKETTEDİR (yukarıdaki min-height: 44px).
   Kutunun kendi ölçüsü `width`/`height` ile verilir, `min-height` ile DEĞİL:
   ikisi de aynı 18px'i çizer ama `min-height: 18px` yazmak "dokunma hedefi
   18px" demektir ve duyarlılık denetimi bunu haklı olarak bulgu sayar. Hedef
   burada 18px değil, 44px'lik etikettir. */
.check input,
.sy-onay input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

/* ==========================================================================
   7) UYARI / BİLGİ KUTULARI (shop.partials.alerts)
   ========================================================================== */

.alert {
    margin: 16px 0;
    padding: 13px 18px;
    border-left: 3px solid var(--primary);
    background: var(--sy-mint-acik);
    color: var(--title);
    font-size: 0.9375rem;
}

.alert ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.alert--success {
    border-left-color: var(--sy-olumlu);
}

.alert--error {
    border-left-color: var(--sy-tehlike);
    background: #fdf2f4;
}

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

/* ==========================================================================
   8) SAYFALAMA (shop.partials.pagination)
   ========================================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: clamp(28px, 4vw, 44px);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--sy-cizgi-ince);
    border-radius: var(--radius);
    color: var(--primary);
    font-size: 0.875rem;
}

.pagination a:hover,
.pagination a:focus-visible {
    border-color: var(--primary);
    background: var(--sy-mint-acik);
    text-decoration: none;
}

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

.pagination .is-disabled {
    color: var(--sy-soluk);
    border-color: var(--sy-cizgi-ince);
}

/* ==========================================================================
   9) PANEL · BOŞ DURUM · METİN BLOĞU
   ========================================================================== */

.panel,
.sy-panel {
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--sy-cizgi-ince);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.panel__desc {
    margin: 6px 0 16px;
    color: var(--sy-soluk);
    font-size: 0.9375rem;
}

.empty,
.sy-bos {
    padding: clamp(32px, 6vw, 64px) 20px;
    border: 1px solid var(--sy-cizgi-ince);
    text-align: center;
}

.empty h3,
.sy-bos h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.prose {
    max-width: 74ch;
}

.prose h2,
.prose h3 {
    margin: 1.4em 0 0.5em;
    font-size: 1.35rem;
}

.prose p,
.prose li {
    font-size: 1rem;
}

.prose ul,
.prose ol {
    margin: 0 0 1em;
    padding-left: 20px;
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.stars,
.sy-yildiz {
    color: var(--primary);
    letter-spacing: 0.08em;
}

/* Kayan kap: dar ekranda tablo KABI kayar, tablonun kendisi tablo kalır. */
.sy-kap-kaydir {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sy-kap-kaydir:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ==========================================================================
   10) ADET KUTUSU (ürün sayfası — çekirdek shop.js sözleşmesi)
   ========================================================================== */

.qty,
.sy-adet {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--sy-denetim);
    border-radius: var(--radius);
    overflow: hidden;
}

.qty button,
.sy-adet button {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: var(--sy-mint-acik);
    color: var(--sy-murekkep);
    font-size: 1.125rem;
    cursor: pointer;
}

.qty button:hover,
.qty button:focus-visible {
    background: var(--accent);
}

.qty input,
.sy-adet input {
    width: 68px;
    min-height: 44px;
    border: 0;
    border-inline: 1px solid var(--sy-denetim);
    border-radius: 0;
    text-align: center;
    font-size: 16px;
}

/* ==========================================================================
   11) TEMA ÖNİZLEME ŞERİDİ (shop.partials.theme-preview)
   AKIŞTA durur, ekranın altına KİLİTLENMEZ — bu yüzden güvenli alan eki
   (env(safe-area-inset-bottom)) gerekmez ve çentikli cihazda hiçbir düğmeyi
   örtmez.
   ========================================================================== */

.tema-onizleme {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    padding: 10px clamp(16px, 4vw, 40px);
    background: var(--sy-murekkep);
    color: #ffffff;
    font-size: 0.875rem;
}

.tema-onizleme a,
.tema-onizleme strong {
    color: #ffffff;
}

.tema-onizleme__metin {
    flex: 1 1 auto;
    min-width: 0;
}

.tema-onizleme__ayrinti {
    color: #dff3f2;
}

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

.tema-onizleme__btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--btn-radius);
    color: #ffffff;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    background: transparent;
}

.tema-onizleme__btn--birincil {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sy-murekkep);
}

/* ==========================================================================
   12) BAŞLIK — ÜÇ KATMAN, ORTALANMIŞ KELİME MARKASI
   Katman 1: ince şerit (arama · günlük kur · hesap)
   Katman 2: ORTALANMIŞ kelime markası + altında süs çizgisi
   Katman 3: ORTALANMIŞ yatay menü, büyük harf, aralıklı
   Altında tam genişlikte ince MİNT çizgi.
   ========================================================================== */

.sy-basli {
    background: var(--card-bg);
}

/* --- Katman 1 --- */
.sy-tepe {
    background: var(--sy-serit);
    border-bottom: 1px solid var(--sy-cizgi-ince);
    font-size: 0.8125rem;
}

.sy-tepe__ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    min-height: 40px;
    padding-block: 4px;
}

.sy-tepe__sol,
.sy-tepe__sag {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 1 auto;
    min-width: 0;
}

.sy-tepe__orta {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    color: var(--text);
}

/* min-width DA GEREKLİ — ÖLÇÜLDÜ: min-height tek başına yetmiyor. Kısa metinli
   şerit bağlantıları ("Blog" = 26px) 9 genişliğin HEPSİNDE 26x44 dokunma
   hedefi veriyordu; kapı 44x44'tür, iki ölçü de denetlenir. justify-content
   kısa metni ortalar, yani genişleyen alan metnin iki yanına eşit dağılır. */
.sy-tepe a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    color: var(--primary);
}

/* Günlük maden kuru — başlığın ilk katmanında. Kaynağı ve yaşı BİRLİKTE
   yazılır: elle girilmiş bir sayıyı "canlı borsa" gibi göstermek yanlış
   vaat olurdu (bkz. App\Services\Kuyumcu\KurDurumu). */
.sy-kur {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
}

.sy-kur__maden {
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--title);
}

.sy-kur__deger {
    color: var(--primary);
    font-weight: 700;
}

.sy-kur__kaynak {
    color: var(--sy-soluk);
}

/* --- Katman 2 --- */
.sy-marka {
    padding-block: clamp(14px, 2.6vw, 26px);
}

.sy-marka__ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.sy-marka__sol {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sy-marka__sag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.sy-marka__eylem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--title);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.sy-marka__eylem:hover,
.sy-marka__eylem:focus-visible {
    color: var(--primary);
    text-decoration: none;
}

.sy-marka__sayi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--sy-murekkep);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* ORTALANMIŞ KELİME MARKASI — ince serif, harfleri aralıklı. */
.sy-marka__ad {
    display: block;
    text-align: center;
    min-width: 0;
    color: var(--title);
}

.sy-marka__ad:hover,
.sy-marka__ad:focus-visible {
    text-decoration: none;
}

.sy-marka__ad-metin {
    display: block;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(1.6rem, 4.6vw, 2.5rem);
    font-weight: 300;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    line-height: 1.1;
    /* Harf aralığı son harften sonra da eklenir; optik ortalama için telafi. */
    text-indent: 0.26em;
}

.sy-marka__ad-alt {
    display: block;
    margin-top: 2px;
    font-size: 0.6875rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--sy-soluk);
    text-indent: 0.36em;
}

/* İMZA AYRINTI: kelime markasının altındaki minik süs çizgisi. */
.sy-marka__sus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 9px;
}

.sy-marka__sus::before,
.sy-marka__sus::after {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--accent);
}

.sy-marka__sus-nokta {
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    background: var(--accent);
}

/* --- Katman 3 --- */
.sy-gezinme {
    border-top: 1px solid var(--sy-cizgi-ince);
}

.sy-gezinme__liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 clamp(10px, 2vw, 26px);
}

.sy-gezinme__oge {
    position: relative;
}

.sy-gezinme__bag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 48px;
    padding: 0 4px;
    color: var(--title);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sy-gezinme__bag:hover,
.sy-gezinme__bag:focus-visible {
    color: var(--primary);
    text-decoration: none;
}

.sy-gezinme__alt {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 30;
    display: none;
    min-width: 220px;
    max-width: 90vw;
    padding: 12px 0;
    transform: translateX(-50%);
    background: var(--card-bg);
    border: 1px solid var(--sy-cizgi-ince);
    border-top: 2px solid var(--accent);
    box-shadow: 0 14px 34px rgba(13, 47, 47, 0.09);
}

.sy-gezinme__oge:hover .sy-gezinme__alt,
.sy-gezinme__oge:focus-within .sy-gezinme__alt {
    display: block;
}

.sy-gezinme__alt a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 20px;
    color: var(--text);
    font-size: 0.9375rem;
}

.sy-gezinme__alt a:hover,
.sy-gezinme__alt a:focus-visible {
    background: var(--sy-mint-acik);
    color: var(--sy-murekkep);
    text-decoration: none;
}

/* Başlığın altındaki tam genişlikte ince mint çizgi. */
.sy-mint-cizgi {
    height: 2px;
    background: var(--accent);
}

/* --- Mobil menü (çekirdek shop.js sözleşmesi: #mobile-menu + .is-open) --- */
.sy-mobil-dugme {
    display: none;
}

.sy-mobil {
    display: none;
    padding-bottom: 16px;
}

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

.sy-mobil a,
.sy-mobil summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px;
    padding: 4px 2px;
    border-bottom: 1px solid var(--sy-cizgi-ince);
    color: var(--title);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.sy-mobil details a {
    padding-left: 18px;
    color: var(--text);
}

.sy-mobil-ara {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.sy-mobil-ara input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Masaüstü arama katmanı — katman 1'deki ikondan açılır.
   JAVASCRIPT YOK: yerel <details> ögesi kullanılır, böylece arama JS kapalıyken
   de açılır. (Tek arama yolunu JS'e bağlamak erişilebilirlik gerilemesi olurdu.) */
.sy-ara-kutu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 44px;
    color: var(--primary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.sy-ara-kutu > summary::-webkit-details-marker {
    display: none;
}

.sy-ara {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    display: flex;
    gap: 10px;
    padding: 14px clamp(16px, 4vw, 40px);
    border-bottom: 1px solid var(--sy-cizgi-ince);
    background: var(--sy-serit);
    box-shadow: 0 12px 26px rgba(13, 47, 47, 0.08);
}

.sy-ara input {
    flex: 1 1 auto;
    min-width: 0;
}

/* ==========================================================================
   13) ANA SAYFA — HERO
   SOLDA metin kartı, SAĞDA yakın plan fotoğraf. Yükseklik ORTA: ekranı
   kaplamaz (kuyumcuda ürünün kendisi kahramandır, dev bir kapak değil).
   ========================================================================== */

.sy-hero {
    padding-block: clamp(24px, 4vw, 52px);
}

.sy-hero__ic {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(20px, 4vw, 52px);
}

.sy-hero__kart {
    padding: clamp(20px, 3.2vw, 40px);
    border: 1px solid var(--sy-cizgi-ince);
    border-left: 3px solid var(--accent);
    background: var(--card-bg);
}

.sy-hero__kart h1 {
    font-size: clamp(1.75rem, 4.4vw, 2.75rem);
    font-weight: 300;
    margin-bottom: 14px;
}

.sy-hero__kart p {
    color: var(--text);
    font-size: 1rem;
    max-width: 46ch;
}

.sy-hero__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.sy-hero__gorsel {
    position: relative;
}

.sy-hero__gorsel img {
    width: 100%;
    object-fit: cover;
}

.sy-hero__cerceve {
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

/* ==========================================================================
   14) ANA SAYFA — MOZAİK GÖRSEL BLOĞU
   Üstte 2 eşit kutu, altta 3 eşit kutu (düzenli mozaik). Her kutunun
   üstünde küçük bir etiket.
   ========================================================================== */

.sy-mozaik {
    display: grid;
    gap: clamp(10px, 1.6vw, 18px);
}

.sy-mozaik__ust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 18px);
}

.sy-mozaik__alt {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 18px);
}

.sy-kutu {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--sy-mint-acik);
}

.sy-kutu img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.sy-kutu--kare img {
    aspect-ratio: 1 / 1;
}

.sy-kutu:hover img,
.sy-kutu:focus-visible img {
    transform: scale(1.035);
}

.sy-kutu__etiket {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: var(--card-bg);
    color: var(--title);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/*
 | FOTOĞRAF PERDESİ DÜZELTİLDİ — GERÇEK PİKSELDEN ÖLÇÜLDÜ.
 |
 | ÖNCEKİ HÂL: `linear-gradient(to top, rgba(13,47,47,0.82), rgba(13,47,47,0))`
 | — perde ögenin ALTINDA 0,82, TEPESİNDE 0'dı, yani metnin durduğu bölgede
 | alfa çoğunlukla 0,05–0,25 arasındaydı. Kaynak CSS'e bakan bir ölçüm bunu
 | GÖREMEZ (zemin bir fotoğraf). Fotoğrafı canvas'a çizip getImageData ile
 | GERÇEK PİKSEL okundu ve perde analitik olarak karıştırıldı; sonuç:
 |   "Ev ve Yaşam"      beyaz metin / #f5f6f9 = 1,08:1   ← görünmez
 |   "Spor ve Outdoor"  beyaz metin / #d9d7ec = 1,41:1
 |   "Moda"             4,39:1  ·  "Kozmetik" 5,33:1
 | Yani AÇIK fotoğraflarda kategori adı okunmuyordu. Bu, mozaiğin tek
 | gezinme metniydi.
 |
 | BUGÜN: perde metnin bulunduğu bölgede SABİT ve güçlü (0,88), yalnızca
 | metnin ÜSTÜNDEKİ 26px'te sıfıra iniyor — yani yumuşak geçiş korunuyor ama
 | metin her zaman tam perdenin üstünde duruyor. padding-top perdenin geçiş
 | yüksekliğiyle AYNI (26px), böylece ilk metin satırı platonun içinde başlar.
 | EN KÖTÜ HÂL HESABI: saf beyaz bir fotoğrafta 0,88 alfa → beyaz metin
 | 9,92:1. Yani fotoğraf ne kadar açık olursa olsun eşik geçilir.
 */
.sy-kutu__ad {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 14px 12px;
    background: linear-gradient(
        to top,
        rgba(13, 47, 47, 0.88) 0,
        rgba(13, 47, 47, 0.88) calc(100% - 26px),
        rgba(13, 47, 47, 0) 100%
    );
    color: #ffffff;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.125rem;
}

.sy-kutu__ad-sayi {
    display: block;
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.92;
}

/* ==========================================================================
   15) ÜRÜN IZGARASI VE ÜRÜN KARTI
   Mücevher KÜÇÜK üründür; kart da küçüktür. Kart anatomisi: kare fotoğraf →
   sol üstte küçük rozet → ince serif ad (tek satır) → fiyat.
   ========================================================================== */

.sy-izgara {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.5vw, 20px);
}

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

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

.sy-kart {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--sy-cizgi-ince);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    transition: border-color 0.2s ease;
}

.sy-kart:hover {
    border-color: var(--accent);
}

.sy-kart__gorsel {
    position: relative;
    overflow: hidden;
    background: var(--sy-mint-acik);
}

.sy-kart__gorsel-bag {
    display: block;
}

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

.sy-kart__bos {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    color: var(--sy-soluk);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/*
 | ROZET SÜTUNU İŞARETÇİ ALMAZ — ÖLÇÜLEREK DÜZELTİLDİ.
 |
 | ÖLÇÜM (elementFromPoint vuruş testi, 320 ve 360px): ürün fotoğrafının
 | MERKEZİNDE `SPAN.badge` / `SPAN.sy-kart__rozetler` dönüyordu. Dar ekranda
 | kart 175px genişliğe düşüyor, "%22 indirim" ve "Yeni" rozetleri iki satıra
 | sarıyor ve sütun fotoğrafın ortasına kadar iniyor; o bölgeye dokunmak
 | HİÇBİR ŞEY yapmıyordu. Kullanıcı ürün fotoğrafına dokunur — bu sessiz bir
 | kayıptı (yatay kaydırma 0, dokunma hedefi 44px, rozet doğru görünüyor).
 |
 | pointer-events: none doğru araçtır: rozetler BİLGİ taşır, etkileşim
 | taşımaz. Bağlantının DIŞINDA durmaya devam ediyorlar (ekran okuyucu
 | "Tükendi" / "%22 indirim" metnini okumaya devam eder — o karar bilinçliydi
 | ve bozulmuyor); yalnızca fare/dokunma olayları altındaki bağlantıya geçer.
 */
.sy-kart__rozetler {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

.sy-kart__favori {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--title);
    cursor: pointer;
}

.sy-kart__favori.is-secili {
    color: var(--sy-tehlike);
}

.sy-kart__govde {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 10px;
}

.sy-kart__marka {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sy-soluk);
}

/*
 * Ad TEK SATIR: küçük kartta iki satırlık ad ızgarayı dalgalandırır.
 *
 * DOKUNMA HEDEFİ — ÖLÇÜLDÜ VE İKİ KEZ DÜZELTİLDİ.
 * Metin satırı 28px yükseklikte (17px ince serif × 1,65 satır aralığı), yani
 * WCAG 2.5.5'in 44px hedefinin ALTINDA. İlk deneme negatif inset'li bir
 * ::before ile hedefi büyütmekti; TARAYICI ÖLÇÜMÜ O ÇÖZÜMÜ ÇÜRÜTTÜ: bu ögede
 * üç nokta kırpması için `overflow: hidden` var ve o kural ::before'u ögenin
 * kutusuna KIRPIYOR — hedef hiç büyümüyordu (elementFromPoint sınaması, ad
 * satırının 6px üstünde başka bir öge döndürdü).
 *
 * Çalışan çözüm: dikey dolgu. 8 + 28 + 8 = 44px; kutunun kendisi büyüdüğü için
 * kırpmadan etkilenmez. Üç nokta kırpması `display: block` + `nowrap` ile
 * çalışmaya devam eder.
 */
.sy-kart__ad {
    display: block;
    min-height: 44px;
    padding-block: 8px;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.0625rem;
    color: var(--title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sy-kart__ad:hover,
.sy-kart__ad:focus-visible {
    color: var(--primary);
}

.sy-kart__fiyat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    font-size: 0.9375rem;
}

.sy-kart__fiyat strong {
    color: var(--title);
    font-weight: 700;
}

.sy-kart__fiyat del {
    color: var(--sy-soluk);
    font-size: 0.8125rem;
}

.sy-kart__kunye {
    font-size: 0.75rem;
    color: var(--sy-soluk);
    letter-spacing: 0.04em;
}

.sy-kart__stok {
    margin: 0;
    font-size: 0.75rem;
}

.sy-kart__ayak {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding: 0 12px 12px;
}

.sy-kart__ayak form {
    margin: 0;
}

/* ==========================================================================
   16) BÜLTEN BANDI (mint zemin, ORTALANMIŞ form)
   ========================================================================== */

.sy-bulten {
    position: relative;
    background: var(--sy-mint-bant);
    color: var(--title);
    overflow: hidden;
}

.sy-bulten__ic {
    position: relative;
    z-index: 1;
    padding-block: clamp(30px, 5vw, 56px);
    text-align: center;
}

.sy-bulten h2 {
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 300;
}

.sy-bulten p {
    max-width: 56ch;
    margin-inline: auto;
    color: #24343c;
    font-size: 1rem;
}

.sy-bulten__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 560px;
    margin: 20px auto 0;
}

.sy-bulten__form label {
    flex: 1 1 100%;
}

.sy-bulten__form input {
    flex: 1 1 240px;
    min-width: 0;
}

.sy-bulten__not {
    margin-top: 12px;
    font-size: 0.8125rem;
    color: #24343c;
}

/* ==========================================================================
   17) SIKÇA SORULAN SORULAR
   ========================================================================== */

.sy-sss {
    display: grid;
    gap: 8px;
    max-width: 860px;
    margin-inline: auto;
}

.sy-sss details {
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
}

.sy-sss summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 18px;
    color: var(--title);
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.125rem;
    cursor: pointer;
}

.sy-sss p {
    margin: 0;
    padding: 0 18px 16px;
    font-size: 0.9375rem;
}

/* ==========================================================================
   18) KATEGORİ / LİSTE SAYFASI
   SÜZGEÇLER YAN KOLONDA DEĞİL, ÜSTTE YATAY BİR ŞERİTTE. Kuyumcuda süzgeç
   sayısı azdır (ayar, gram, fiyat) ve yan kolon, küçük kartlı beş kolonluk
   ızgaradan yer çalar.
   ========================================================================== */

.sy-yol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-block: 14px;
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

.sy-yol a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--primary);
}

.sy-liste__basi {
    padding-bottom: clamp(16px, 2.4vw, 26px);
    text-align: center;
}

.sy-liste__basi h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 300;
}

.sy-liste__basi p {
    max-width: 66ch;
    margin: 8px auto 0;
    color: var(--sy-soluk);
    font-size: 0.9375rem;
}

.sy-suzgec {
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--sy-cizgi-ince);
    background: var(--sy-serit);
}

.sy-suzgec__ic {
    padding-block: 14px;
}

.sy-suzgec__satir {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 18px;
}

.sy-suzgec__grup {
    flex: 1 1 190px;
    min-width: 0;
}

.sy-suzgec__grup--genis {
    flex: 2 1 320px;
}

.sy-suzgec__baslik {
    display: block;
    margin-bottom: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--title);
}

.sy-suzgec__kutular {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.sy-suzgec__aralik {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sy-suzgec__aralik input {
    flex: 1 1 0;
    min-width: 0;
}

.sy-suzgec__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

.sy-liste__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-block: 18px;
    font-size: 0.9375rem;
}

.sy-liste__sirala {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sy-liste__sirala select {
    width: auto;
    min-width: 190px;
}

/* ==========================================================================
   19) ÜRÜN SAYFASI
   SOL: büyük kare fotoğraf + ALTINDA yatay küçük resim şeridi.
   SAĞ: ad · fiyat · GRAM/AYAR/İŞÇİLİK künye TABLOSU · adet · eylemler.
   ALTINDA: akordeon (sekme değil).
   ========================================================================== */

.sy-urun {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 56px);
    padding-bottom: clamp(28px, 4vw, 48px);
}

.sy-urun__ana {
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--sy-mint-acik);
}

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

.sy-urun__ana-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    color: var(--sy-soluk);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Yatay küçük resim şeridi — ana fotoğrafın ALTINDA. */
.sy-serit-kucuk {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.sy-serit-kucuk button {
    flex: 0 0 auto;
    padding: 0;
    min-width: 76px;
    min-height: 76px;
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.sy-serit-kucuk button.is-active,
.sy-serit-kucuk button:hover,
.sy-serit-kucuk button:focus-visible {
    border-color: var(--primary);
}

.sy-serit-kucuk img {
    width: 76px;
    height: 76px;
    object-fit: cover;
}

.sy-urun__bilgi h1 {
    font-size: clamp(1.6rem, 3.6vw, 2.35rem);
    font-weight: 300;
    margin-bottom: 8px;
}

.sy-urun__marka {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sy-soluk);
}

.sy-urun__ust-bilgi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sy-cizgi-ince);
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

.sy-urun__fiyat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding-block: 16px;
}

.sy-urun__fiyat strong {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(1.6rem, 3.6vw, 2.25rem);
    font-weight: 500;
    color: var(--title);
}

.sy-urun__fiyat del {
    color: var(--sy-soluk);
    font-size: 1rem;
}

.sy-urun__kdv {
    flex: 1 1 100%;
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

/* KÜNYE TABLOSU — gram / ayar / işçilik.
   Sayılar App\Services\Kuyumcu\FiyatHesabi'ndan gelir; burada YENİDEN
   HESAPLANMAZ. Tablo semantiği korunur (satır-sütun ilişkisi ekran
   okuyucuda kalır), dar ekranda KAP kayar. */
.sy-kunye {
    margin-block: 6px 18px;
}

.sy-kunye__baslik {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--title);
}

.sy-kunye table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.sy-kunye caption {
    text-align: left;
    padding-bottom: 8px;
    color: var(--sy-soluk);
    font-size: 0.8125rem;
}

.sy-kunye th,
.sy-kunye td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--sy-cizgi-ince);
    text-align: left;
    vertical-align: top;
}

.sy-kunye th {
    font-weight: 600;
    color: var(--sy-soluk);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sy-kunye td {
    color: var(--title);
    font-weight: 600;
}

.sy-kunye tbody tr:last-child th,
.sy-kunye tbody tr:last-child td {
    border-bottom: 0;
    border-top: 1px solid var(--accent);
    background: var(--sy-mint-acik);
}

.sy-kunye__not {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

.sy-kunye__uyari {
    margin-block: 12px;
    padding: 12px 16px;
    border-left: 3px solid var(--sy-tehlike);
    background: #fdf2f4;
    color: var(--title);
    font-size: 0.9375rem;
}

.sy-urun__eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block: 16px;
}

.sy-urun__stok {
    margin: 0 0 12px;
    font-size: 0.9375rem;
}

.sy-urun__guvence {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sy-cizgi-ince);
}

.sy-urun__guvence li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text);
}

.sy-urun__guvence svg {
    color: var(--primary);
    flex: 0 0 auto;
}

/* Çekirdek `.pfeatures` sınıfı (dijital ürün listesi) aynı görünümü alır. */
.pfeatures {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sy-cizgi-ince);
}

.pfeatures li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
}

.pfeatures svg {
    color: var(--primary);
    flex: 0 0 auto;
}

/* Varyant seçenekleri */
.optgroup {
    margin-bottom: 14px;
}

.optgroup__title {
    margin: 0 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--title);
}

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

.optlist label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid var(--sy-denetim);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.875rem;
}

/* Yerel radyo düğmesi 16px kalır; dokunma hedefi saran etiket (min-height: 44px). */
.optlist input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.swatch {
    width: 16px;
    height: 16px;
    border: 1px solid var(--sy-denetim);
    border-radius: 999px;
}

/* AKORDEON — çekirdek tema sekme (tablist) kullanıyor, burada AÇILIR BÖLÜM. */
.sy-akordeon {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--sy-cizgi-ince);
}

.sy-akordeon details {
    border-bottom: 1px solid var(--sy-cizgi-ince);
}

.sy-akordeon summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 10px 4px;
    color: var(--title);
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

.sy-akordeon summary::-webkit-details-marker {
    display: none;
}

.sy-akordeon summary::after {
    content: "\002B";
    font-size: 1.125rem;
    color: var(--primary);
}

.sy-akordeon details[open] summary::after {
    content: "\2212";
}

.sy-akordeon__govde {
    padding: 4px 4px 26px;
}

/* Değerlendirmeler */
.sy-yorumlar {
    display: grid;
    gap: 18px;
}

.sy-yorum {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sy-cizgi-ince);
}

.sy-yorum__basi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.sy-yorum__yazar {
    font-weight: 700;
    color: var(--title);
}

/* ==========================================================================
   20) ALT BİLGİ — DÖRT KOLON, ÇOK AÇIK MİNT ZEMİN, KÜÇÜK PUNTO
   ========================================================================== */

.sy-alt {
    margin-top: var(--sy-bolum-bosluk);
    border-top: 1px solid var(--accent);
    background: var(--sy-mint-alt);
    color: var(--text);
}

.sy-alt__ic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    padding-block: clamp(30px, 4.4vw, 52px);
}

.sy-alt h2,
.sy-alt h3 {
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--title);
}

.sy-alt__marka-ad {
    display: block;
    margin-bottom: 10px;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.375rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--title);
}

.sy-alt p {
    font-size: 0.875rem;
}

.sy-alt__bag li {
    margin-bottom: 2px;
}

/* min-width — ÖLÇÜLDÜ: alt bilgi listesindeki kısa kategori adları ("Moda"
   36px, "Üye ol" 38px) 44px genişliğin altına düşüyordu. Alt bilgi bağlantısı
   satır içi bir cümlenin İÇİNDE akmadığı için WCAG 2.5.5 "Inline" istisnası
   BURAYA UYGULANAMAZ: her biri kendi <li> ögesinde tek başına duruyor. */
.sy-alt__bag a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    color: var(--text);
    font-size: 0.875rem;
}

.sy-alt__bag a:hover,
.sy-alt__bag a:focus-visible {
    color: var(--primary);
}

.sy-alt__isaret {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block: 12px;
}

.sy-alt__isaret li {
    padding: 3px 9px;
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sy-soluk);
}

.sy-alt__dip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding-block: 16px;
    border-top: 1px solid var(--sy-cizgi-ince);
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

/* ==========================================================================
   21) ÇEKİRDEK SAYFA UYUMU — "TAM STİL DOSYASI" NE DEMEK
   ==========================================================================

   ÖLÇÜLDÜ VE DÜZELTİLDİ. Tema yalnızca yedi görünümü eziyor: ana sayfa,
   kategori, ürün, düzen, başlık, alt bilgi, ürün kartı. Ama EZİLEN DÜZEN
   BÜTÜN VİTRİNİ ÇİZİYOR — sepet, ödeme, sipariş sonucu, hesabım, statik
   sayfalar, blog, koleksiyonlar da bu düzenin içinde açılıyor ve onlar
   çekirdeğin sınıf sözlüğünü (`.container`, `.cartlayout`, `.summary__row`,
   `.steps`, `.radio-card`, `.acclayout` …) kullanıyor.

   Düzen `css/shop.css` yüklemediği için bu sınıfların KARŞILIĞI OLMAK ZORUNDA.
   Yoksa: gerçek ölçüm — sepet ve ödeme sayfası kapsayıcısız, ekranın soluna
   yapışık, özet kutusu çerçevesiz ve adım göstergesi düz metin olarak
   basılıyordu. İşlev çalışıyordu ama ödeme ekranı SATILAMAZ hâldeydi.

   Bu bölüm o sözlüğü SEASY'NİN DİLİNDE yeniden çiziyor — shop.css'i
   kopyalamıyor: aynı adlar, temanın kendi geometrisi (ince çizgi, keskin köşe,
   mint aksan, küçük punto). Adlar çekirdeğin sözleşmesi olduğu için
   DEĞİŞTİRİLEMEZ; görünüş temanın kararı olduğu için değiştirildi.
   ========================================================================== */

/* Çekirdek kapsayıcı = temanın kapsayıcısı. */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}

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

.section--surface {
    background: var(--sy-mint-alt);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: clamp(18px, 2.6vw, 30px);
}

.section-head h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
}

.section-head p {
    color: var(--sy-soluk);
    font-size: 0.9375rem;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}

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

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    padding-block: 6px;
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

.breadcrumb a,
.breadcrumb > span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Çekirdek ürün ızgaraları seasy ritmine çekilir (küçük kart → çok kolon). */
.pgrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.5vw, 20px);
}

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

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

.catgrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.5vw, 18px);
}

.catcard {
    display: block;
    padding: 18px;
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
}

.catcard strong {
    display: block;
    margin-bottom: 4px;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.125rem;
    color: var(--title);
}

.catcard span {
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

.catcard:hover {
    border-color: var(--accent);
    text-decoration: none;
}

/* Çekirdek hero (blok görünümleri) — seasy ferah zeminde çizer. */
.hero {
    background: var(--sy-mint-acik);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    padding-block: clamp(28px, 4.4vw, 56px);
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.hero__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hero__card {
    display: flex;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
    font-size: 0.875rem;
}

.hero__card strong {
    display: block;
    color: var(--title);
}

.hero__card-icon {
    color: var(--primary);
    flex: 0 0 auto;
}

/* ---- SEPET ---- */
.cartlayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.cartlist {
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
}

.cartitem {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--sy-cizgi-ince);
}

.cartitem:last-child {
    border-bottom: 0;
}

.cartitem__img {
    width: 88px;
    height: 88px;
    overflow: hidden;
    background: var(--sy-mint-acik);
}

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

.cartitem__name {
    display: block;
    margin-bottom: 4px;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.0625rem;
    color: var(--title);
}

.cartitem__meta {
    margin-bottom: 8px;
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

.cartitem__right {
    display: grid;
    gap: 8px;
    align-content: start;
    text-align: right;
}

.cartitem__total {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--title);
}

.coupon {
    display: flex;
    gap: 8px;
    margin-block: 14px;
}

.coupon input {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- ÖZET KUTUSU (sepet + ödeme) ---- */
.summary {
    position: sticky;
    top: 16px;
    padding: 20px;
    border: 1px solid var(--sy-cizgi-ince);
    border-top: 2px solid var(--accent);
    background: var(--card-bg);
}

.summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 6px;
    font-size: 0.9375rem;
}

.summary__row--total {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--sy-cizgi-ince);
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--title);
}

.summary__note {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

/* ---- ÖDEME ---- */
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 20px;
}

.steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sy-soluk);
}

.steps__item.is-active {
    color: var(--primary);
    font-weight: 700;
}

.steps__no {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--sy-mint-acik);
    font-size: 0.8125rem;
    font-weight: 700;
}

.steps__item.is-active .steps__no {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sy-murekkep);
}

/* Ödeme/teslimat seçenek kartı. Yerel radyo düğmesi 20px kalır (appearance:none
   yüksek kontrast kipini bozar); dokunma hedefi SARAN KARTTA 44px'tir. */
.radio-card {
    display: flex;
    gap: 12px;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--sy-denetim);
    border-radius: var(--radius);
    cursor: pointer;
}

.radio-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--sy-mint-acik);
}

/* Yerel radyo düğmesi 20px kalır (appearance:none yüksek kontrast kipini bozar);
   dokunma hedefi SARAN KARTTA 44px'tir — bu yüzden burada `min-height` yok. */
.radio-card input {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 2px;
    accent-color: var(--primary);
}

.radio-card__price {
    margin-left: auto;
    font-weight: 700;
    color: var(--title);
}

.teslimat,
.teslimat__onay {
    margin-block: 12px;
}

/* ---- TABLOLAR ----
   Tabloya display:block VERİLMEZ: satır-sütun ilişkisi erişilebilirlik
   ağacından düşerdi. Dar ekranda KAP kayar. */
.table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.table-scroll:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.datatable {
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
}

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

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

.datatable th,
.kargo-tablo th {
    color: var(--sy-soluk);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kargo-tablo {
    max-width: 760px;
    margin-bottom: 24px;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

/* ---- HESABIM ---- */
.acclayout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.accnav {
    padding: 8px;
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
}

.accnav a,
.accnav-logout button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
}

.accnav a:hover,
.accnav a.is-active {
    background: var(--sy-mint-acik);
    color: var(--sy-murekkep);
    text-decoration: none;
}

.statcards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

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

.statcard {
    padding: 18px;
    border: 1px solid var(--sy-cizgi-ince);
    background: var(--card-bg);
}

.statcard span {
    font-size: 0.8125rem;
    color: var(--sy-soluk);
}

.statcard strong {
    display: block;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.75rem;
    color: var(--title);
}

/* ---- ÇOK AMAÇLI IZGARALAR ---- */
.addr-grid,
.contact-grid,
.reviews-layout,
.listlayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 30px);
    align-items: start;
}

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

.addr-grid--bosluklu {
    gap: clamp(20px, 3vw, 34px);
}

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

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

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

/* ---- SİPARİŞ SONUCU ---- */
.success-box {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.success-box__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--sy-mint-bant);
    color: var(--sy-murekkep);
}

/* ---- KÜÇÜK PARÇALAR ---- */
.panel--sss {
    margin: 0;
    padding: 14px 18px;
}

.field-error {
    font-size: 0.8125rem;
    color: var(--sy-tehlike);
}

.badge--muted {
    background: var(--sy-serit);
    color: var(--sy-soluk);
}

.badge--warning {
    background: var(--sy-pudra);
    color: var(--sy-pudra-murekkep);
}

.alert--warning {
    border-left-color: var(--sy-pudra);
}

/* ==========================================================================
   22) DUYARLILIK — YALNIZCA ONAYLI KIRILMA NOKTALARI
   ========================================================================== */

@media (max-width: 1100px) {
    .sy-izgara,
    .pgrid,
    .catgrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

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

@media (max-width: 900px) {
    /* Menü ve çok kolonlu menü katmanı mobil menüye devrediliyor. */
    .sy-gezinme {
        display: none;
    }

    .sy-mobil-dugme {
        display: inline-flex;
    }

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

    .sy-hero__gorsel {
        order: -1;
    }

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

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

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

    /* Yan kolonlu çekirdek düzenler tek kolona düşer (özet kutusu akışa girer). */
    .cartlayout,
    .checkout,
    .acclayout,
    .listlayout,
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .summary {
        position: static;
    }

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

@media (max-width: 720px) {
    .sy-tepe__orta {
        order: 3;
        flex: 1 1 100%;
    }

    .sy-suzgec__eylem {
        flex: 1 1 100%;
    }

    .sy-suzgec__eylem .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 640px) {
    /* Ürün ızgarası dar ekranda İKİ kolon: üç kolonda her kart ~95px'e düşer. */
    .sy-izgara,
    .sy-izgara--4,
    .sy-izgara--3,
    .pgrid,
    .pgrid--4,
    .pgrid--3,
    .catgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sy-mozaik__ust,
    .sy-mozaik__alt {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sy-alt__ic,
    .addr-grid,
    .statcards,
    .statcards--3,
    .hero__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Sepet satırı iki kolona düşer; tutar bloğu tam satıra geçer. */
    .cartitem {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .cartitem__img {
        width: 72px;
        height: 72px;
    }

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

    .sy-bolum-basi::before,
    .sy-bolum-basi::after {
        display: none;
    }

    .sy-bolum-basi__ic {
        flex: 1 1 100%;
    }

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

    .sy-liste__sirala {
        flex: 1 1 100%;
    }

    .sy-liste__sirala select {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .sy-marka__ic {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 8px;
    }

    .sy-marka__sol,
    .sy-marka__sag {
        justify-content: center;
    }

    .sy-marka__ad-metin {
        letter-spacing: 0.18em;
        text-indent: 0.18em;
    }

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

@media (max-width: 420px) {
    /* Etiket metinleri düşer, ikonlar kalır: 320px'de üç ikon + sayı sığmıyor. */
    .sy-marka__eylem-metin {
        display: none;
    }

    .sy-izgara,
    .sy-izgara--4,
    .sy-izgara--3 {
        gap: 8px;
    }

    .sy-kart__govde,
    .sy-kart__ayak {
        padding-inline: 8px;
    }
}

/* Kısa ekran (yatay mod): başlık katmanları ince olsun. */
@media (max-height: 480px) {
    .sy-marka {
        padding-block: 8px;
    }

    .sy-marka__sus {
        display: none;
    }
}

/* ======================================================================
   23) HAREKETİ AZALT — WCAG 2.3.3
   Vestibüler rahatsızlığı olan kullanıcı hareketi kapatabilmek ZORUNDA.
   Süreleri sıfırlamak yetmez: yumuşak kaydırma da harekettir.
   ========================================================================== */

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

    .sy-kutu:hover img,
    .sy-kutu:focus-visible img {
        transform: none;
    }
}

/* ==========================================================================
   24) BASKI — kuyumcuda müşteri künyeyi yazdırır
   ========================================================================== */

@media print {
    .sy-tepe,
    .sy-gezinme,
    .sy-mobil,
    .sy-ara,
    .sy-bulten,
    .sy-alt,
    .tema-onizleme,
    .sy-urun__eylem {
        display: none;
    }

    body {
        color: #000000;
    }
}

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK — DÜŞMAN DENETİMİNDE ÖLÇÜLEN BOŞLUK
   --------------------------------------------------------------------------
   Bu tema `css/shop.css` YÜKLEMEZ. `.center` için HİÇ kural yoktu; /giris
   sayfasındaki ortalanmış açıklama satırı sola yaslı kalıyordu (1280px'te
   CSSOM ile ölçüldü: tema kural 0, çekirdek kural 1).
   ========================================================================== */

.center {
    text-align: center;
}

/* ==========================================================================
   DOKUNMA HEDEFİ — /iletisim TELEFON VE E-POSTA BAĞLANTILARI
   --------------------------------------------------------------------------
   Gerçek tarayıcıda 390px'te ölçüldü (elementFromPoint ile dört yönde vuruş
   sınaması): `a[href^="tel:"]` ve `a[href^="mailto:"]` 16-20px YÜKSEKLİKTE
   ölçüldü — dokunma hedefi eşiği 44x44. Bağlantılar ÇEKİRDEK /iletisim
   görünümünden geliyor; çekirdek DEĞİŞTİRİLMEDİ, düzeltme temanın kendi
   CSS'inde. (Aynı düzeltme orion temasında zaten vardı; sekiz temanın altısında
   yoktu.)

   `inline-flex` + `min-height` seçildi: `display: block` vermek bağlantıyı
   metin akışından çıkarır ve iletişim kartındaki satır düzenini bozar.
   ========================================================================== */

a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ==========================================================================
   DOKUNMA HEDEFİ — MARKA VE SAYFA YOLU BAĞLANTILARI
   --------------------------------------------------------------------------
   Gerçek tarayıcıda ölçüldü: `.sy-urun__marka` 69x18 ve 36x18 (yükseklik
   eşiğin çok altında), sayfa yolundaki kısa kategori bağı ("Moda") 33x44
   (genişlik eşiğin altında).
   ========================================================================== */

/* `min-width` de gerekli: yükseklik 44'e çıkarıldıktan sonra kısa marka adında
   ("Vega") hedef 36x44 ölçüldü — GENİŞLİK eşiğin altında kalıyordu. */
.sy-urun__marka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

.sy-yol a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

/* ==========================================================================
   MODÜL BLOKLARI SEASY'NİN DİLİNDE
   --------------------------------------------------------------------------
   Üç modül parçası (çift opt-in bülten, "stoğa gelince haber ver", B2B bayi
   fiyat şeridi) çekirdek görünümlerden gelir ve KENDİ yaprak stil dosyalarını
   (`shop-stok-bildirim.css`, `shop-bayi.css`) GÖVDEDEN yükler. Yani o dosyalar
   bu temadan SONRA gelir ve eşit özgüllükte SONRA GELEN kazanır. Bu yüzden
   buradaki her kural bir tema kabıyla (`.sy-alt`, `.sy-urun__bilgi`) SARILIR:
   özgüllük 0,2,0 > 0,1,0, yani yükleme sırasından bağımsız olarak bu tema
   kazanır.

   AYRI BİR GÖRÜNÜM YAZILMADI: modülün çift opt-in akışı, KVKK onay kutusu ve
   varyant seçimi olduğu gibi korunur — yalnızca görünüş temanın mint/teal
   diline çevrilir.

   ÖLÇÜLEN KONTRASTLAR (WCAG bağıl parlaklık, hesaplanmış renklerle)
   ----------------------------------------------------------------
   bülten başlığı  #16242e / #c9ece9 = 12,56:1
   bülten metni    #24343c / #c9ece9 = 10,21:1
   bülten düğmesi  #ffffff / #0f6a68 =  6,40:1
   stok kutusu     #445561 / #eef8f7 =  7,14:1
   ========================================================================== */

/*
 | BÜLTEN BANDI — ANA SAYFADAKİ MİNT BANDIN GÖRSEL DEVAMI.
 |
 | Modül kurulunca ana sayfadaki `.sy-bulten` bandı BASILMAZ (bkz.
 | themes/seasy/shop/home.blade.php) ve kayıt çağrısı alt bilginin en üstüne
 | taşınır. Aynı işi aynı görsel dille yapması için bant burada da mint zemin
 | + ortalanmış ince serif başlıkla çizilir; ziyaretçi tema değişmiş gibi
 | hissetmez.
 */
.sy-alt .bulten {
    padding-block: clamp(26px, 4vw, 44px);
    border-top: 0;
    border-bottom: 1px solid var(--accent);
    background: var(--sy-mint-bant);
    color: var(--title);
}

.sy-alt .bulten__ic {
    flex-direction: column;
    justify-content: center;
    max-width: var(--container);
    padding-inline: clamp(16px, 4vw, 40px);
    text-align: center;
}

.sy-alt .bulten__baslik {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 300;
    color: var(--title);
}

.sy-alt .bulten__aciklama {
    max-width: 56ch;
    margin-inline: auto;
    color: #24343c;
    font-size: 0.9375rem;
}

.sy-alt .bulten__form {
    justify-content: center;
    max-width: 560px;
    margin-inline: auto;
}

/*
 | Yaprak dosyadaki `min-width: 240px` SABİTTİR; 320px'lik ekranda kabı
 | genişletip sayfayı yatay kaydırır. `min-width: 0` + `flex` ile daralmaya
 | izin verilir. Yükseklik 44px: mint bandın üstündeki tek dokunma hedefi.
 */
.sy-alt .bulten__form input[type="email"] {
    flex: 1 1 240px;
    min-width: 0;
    min-height: 44px;
    border-color: var(--sy-denetim);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-size: 16px;
}

/*
 | Modülün düğmesi çekirdek adıyla (`btn--gold`) gelir ve bu temada o ad MİNT
 | dolgu demektir — mint bandın üstünde mint düğme zeminden ayrışmaz. Bantta
 | düğme KOYU TEAL olur: #ffffff / #0f6a68 = 6,40:1 ve kenarı bandı net keser.
 */
.sy-alt .bulten__form .btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.sy-alt .bulten__form .btn:hover,
.sy-alt .bulten__form .btn:focus-visible {
    background: var(--sy-murekkep);
    border-color: var(--sy-murekkep);
    color: #ffffff;
}

.sy-alt .bulten__hata {
    max-width: var(--container);
    padding-inline: clamp(16px, 4vw, 40px);
    text-align: center;
    color: var(--danger);
}

/*
 | STOK BİLDİRİM KUTUSU — satın alma kolonunun içinde, çok açık mint zeminde.
 | Kart köşesi 2px kalır (tema gölgesiz ve neredeyse köşesizdir); ayrım mint
 | hairline ile yapılır, kutu gölge almaz.
 */
.sy-urun__bilgi .stokbildirim {
    border-color: var(--accent);
    border-radius: var(--card-radius);
    background: var(--sy-mint-acik);
}

.sy-urun__bilgi .stokbildirim__baslik {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--title);
}

.sy-urun__bilgi .stokbildirim__aciklama {
    color: var(--text);
}

/* Onay kutusunun KENDİSİ 18px kalır (appearance:none yüksek kontrast kipini
   bozar); dokunma hedefi SARAN ETİKETTEDİR — temanın `.check` kalıbıyla aynı. */
.sy-urun__bilgi .stokbildirim__onay {
    min-height: 44px;
    color: var(--text);
}

/* Bayi şeridi: mağazanın kurumsal yüzü teal, süs mint. Panel gölgesiz kalır. */
.sy-urun__bilgi .bayi-panel {
    border-radius: var(--card-radius);
}

.sy-urun__bilgi .bayi-panel__head {
    background: var(--sy-mint-acik);
    border-bottom: 1px solid var(--accent);
}

/* ==========================================================================
   DOKUNMA HEDEFİ — BAYİ ŞERİDİNDEKİ "HIZLI TOPLU SİPARİŞ" BAĞLANTISI
   --------------------------------------------------------------------------
   GERÇEK TARAYICIDA ÖLÇÜLDÜ (dokuz genişlikte, elementFromPoint vuruşuyla):
   `.bayi-panel a` 104,4x15 px çıkıyor — vuruş hedefi eşiği 44x44. Bağlantı
   ÇEKİRDEK `shop/partials/dealer-price.blade.php` parçasından geliyor ve bu
   temada ancak ürün sayfasına bayi kancası konduktan SONRA basılıyor; yani
   hedefi büyütmek bu kolun işi. Çekirdek DEĞİŞTİRİLMEDİ, düzeltme temanın
   kendi CSS'inde — aynı kalıp bu dosyada `a[href^="tel:"]` için de kullanılı.

   `inline-flex` seçildi: `display: block` bağlantıyı cümle akışından çıkarır
   ve "Sepete eklediğinizde bayi fiyatı uygulanır." cümlesi ikiye bölünürdü.
   ========================================================================== */

.bayi-panel a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
}


/* ==========================================================================
   REKLAM YUVASI — SEASY DİLİNDE
   ==========================================================================
   TABAN BU DOSYADA DEĞİL: `public/css/reklam.css` (R1 kolu) `.reklam`,
   `.reklam__etiket`, `.reklam__birim` ve `.reklam--bos` kurallarını
   tanımlar; yer ayırma (`--reklam-yer`), asgari mesafe tabanı (24px) ve
   dolmayan yuvanın çöküşü ORADADIR ve BURADA TEKRARLANMAZ. Bu bölüm
   yalnızca temanın kendi ritmini ve kendi tipografisini uygular.

   O dosya reklam basılacaksa `@stack('head')` üzerinden yükleniyor; bu
   temanın düzeni `@stack('head')` taşıdığı için taban kurallar burada da
   geçerli. (Tema `css/shop.css` yüklemez, ama `reklam.css` yaprak bir
   dosyadır ve sıfırlama içermez — iki sıfırlama üst üste binmez.)

   KART GÖRÜNÜMÜ VERİLMEZ — BİLEREK: zemin, çerçeve, gölge ve yuvarlatma
   bir arada reklamı ÜRÜN KARTINA benzetir; bu AdSense'in ayrı bir
   yasağıdır ve mağaza sahibinin hesabını kapattırır. Temalar birbirinden
   ZEMİNLE değil, BOŞLUK RİTMİ · AYIRICI ÇİZGİ · ETİKET TİPOGRAFİSİ ve
   ÖLÇÜ ile ayrışır.

   SABİT GENİŞLİK YOK: yalnızca `max-width` kullanılır. Duyarlılık kapısı
   9 genişlikte (320·360·390·414·768·1024·1280·1440·1920) yatay kaydırmayı
   SIFIR ölçüyor; sabit bir genişlik ya da `min-width: <px>` o kapıyı
   düşürürdü.

   GEÇİŞ KISAYOLU `all` DEĞERİYLE YAZILMAZ (depo kuralı; DuyarlilikTest
   `transition` bildirimini `all` ile arayıp düşürür — bu satır ilk
   yazımda kuralı ANLATIRKEN kalıbı da içerdiği için kapı 13 dosyada
   birden düştü, ÖLÇÜLDÜ). Bu bölümde hiç geçiş bildirimi yok.
   ========================================================================== */

/*
 * SEASY — ATÖLYE: SOL YASLI ETİKET, KISA ALTIN ÇUBUK.
 *
 * Temanın bölüm başlıklarında küçük bir etiket (`.sy-etiket`) ve altın
 * vurgu var. Yuvanın etiketi o dili sürdürür: sol yaslı, altında kısa
 * altın bir çubuk. Ayırıcı çizgi YOK — bu tema bölümleri zemin tonuyla
 * ayırıyor, çizgiyle değil, ve reklam yuvasına zemin verilmez.
 */
[data-tema='seasy'] .reklam {
  --reklam-bosluk: 52px;
}

[data-tema='seasy'] .reklam--kenar-cubugu {
  --reklam-bosluk: 32px;
}

[data-tema='seasy'] .reklam__etiket {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  opacity: 1;
}

[data-tema='seasy'] .reklam__etiket::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 6px;
  background: var(--accent, var(--primary));
}

[data-tema='seasy'] .reklam--bos .reklam__etiket::after {
  display: none;
}

@media (max-width: 720px) {
  [data-tema='seasy'] .reklam {
    --reklam-bosluk: 36px;
  }
}