/* ==========================================================================
   UFUK — TEKNOLOJİ / DRONE TEMASI · TAM STİL DOSYASI
   --------------------------------------------------------------------------
   Bu dosya `public/css/shop.css` İLE BİRLİKTE YÜKLENMEZ, ONUN YERİNE geçer
   (bkz. themes/ufuk/shop/layouts/app.blade.php). Dolayısıyla burada yalnız
   temanın kendi blokları değil, ÇEKİRDEK SINIFLAR da (btn, field, alert,
   cartitem, checkout, pagination, prose, datatable…) çizilmek zorundadır;
   eksik bir sınıf, temanın ezmediği sayfayı (sepet, ödeme, blog) sessizce
   stilsiz bırakır.

   :root bloğu, resources/themes/ufuk.php içindeki `tokens` dizisiyle BİREBİR
   AYNI OLMAK ZORUNDA — panel ince ayar formu başlangıç değerini oradan okur ve
   tests/Feature/ThemeTest.php bunu ölçer.

   ÖLÇÜ FİŞİ (Wokiee 4.x "Demo 5 — Drone", 1440px'de ölçüldü):
     kapsayıcı 1400 · SAYFA ZEMİNİ #f0f1f2 · gövde 16px Inter #222222
     kahraman başlığı 64/500 · bölüm başlığı 32/500 · fiyat 24/500 MAVİ
     afiş kartı adı 32/500 · afiş üstlüğü 14/400 · afiş fiyatı 19/500
     menü ve etiket 14/400 · ürün satırı 4 kolon × 335px / 20px oluk
     kart fotoğrafı 1:1 KARE, `contain` · kategori döşemesi 225×145
     afiş kartı 1400×390 · hap düğme r20 / 0 25px / boy 40 / 14-700
     üst şerit 40px #222222 · başlık satırı 80px BEYAZ · yarıçap 20px
   Fişler: referans/wokiee-drone-{olcu,parca}.json + drone-net.mjs
   Referansın CSS'i, JS'i, ikonu ve fotoğrafı KOPYALANMADI.

   İMZA: SAYFA BEYAZ DEĞİL. Zemin açık gri, içerik 20px yuvarlatılmış BEYAZ
   kartlarda yüzüyor — ürün kartı, süzgeç grubu, galeri, satın alma paneli,
   bilgi bölümü, alt bilgi. Kartların çerçevesi yok; kenarını zemin çiziyor.
   Yirmi bir kardeşin hiçbirinde bu yok (nordika/eclectik/maya krem zeminlidir
   ama içerikleri kart değil, doğrudan sayfaya oturur).

   KONTRAST (WCAG bağıl parlaklık; kart zemini #ffffff, sayfa zemini #f0f1f2):
     --title #1b1b1f 17,40:1 (beyazda) · 15,89:1 (gride)
     --text  #222222 16,10:1 · 14,70:1
     --muted #5c6166  6,63:1 ·  6,05:1
     --primary #1565c0 5,69:1 (üstünde beyaz da 5,69:1)
       — referansın #1976d2'si beyaz metinle 4,59:1 veriyordu, sınırda.
     --accent #b3261e 6,54:1
     --control-border #767676 4,54:1 (WCAG 1.4.11 eşiği 3:1)
   ========================================================================== */

:root {
    /* --- panelden ayarlanabilen değişkenler (tokens ile birebir) --- */
    --primary: #1565c0;
    --accent: #b3261e;
    --title: #1b1b1f;
    --text: #222222;
    --page-bg: #f0f1f2;
    --card-bg: #ffffff;
    --border: #e3e5e7;
    --radius: 20px;
    --card-radius: 20px;
    --btn-radius: 20px;
    --font-scale: 1;
    --container: 1400px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #5c6166;
    /* Form denetimi kenarlığı: erişilebilirlik için SABİT, --border ile
       karıştırılmaz. --border yalnızca dekoratif çizgidir ve panelden
       istenildiği kadar açık yapılabilir; bu ise 3:1'in altına inemez. */
    --control-border: #767676;
    --koyu: #222222;
    --yuzey: #f7f8f9;
    --yuzey-koyu: #e8eaec;
    --basari: #1f6b3a;
    --uyari: #8a5a12;
    --hata: #b3261e;
    --golge: 0 2px 10px rgba(16, 24, 40, .06);
    --golge-yuksek: 0 12px 30px rgba(16, 24, 40, .12);
    --gecis: .2s ease;
    --yazi: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Tema tek aileyle çiziliyor; iki değişken de aynı aileyi gösterir ki
       çekirdek sınıflardaki --baslik-yazi/--govde-yazi kullanımları da
       çalışsın. */
    --baslik-yazi: var(--yazi);
    --govde-yazi: var(--yazi);
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    /* Galeri çapaları (küçük resim şeridi) yumuşak kaysın. */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

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

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

img {
    height: auto;
}

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

a:hover {
    text-decoration: underline;
}

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

button {
    cursor: pointer;
}

/* ÖLÇÜ: başlıklar 500 ağırlıkta — referansın tamamında 700 yok, en kalın
   ağırlık 500. Teknoloji vitrininde başlık bağırmaz, ürün fotoğrafı konuşur. */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 12px;
    font-family: var(--baslik-yazi);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--title);
}

/* ÖLÇÜ: kahraman başlığı 64px (4rem).
   KATSAYI HEDEF GENİŞLİKTE ÜST SINIRA OTURACAK BİÇİMDE SEÇİLİR — bu tuzağa
   tempo.css'te de düşülmüştü: 2,6vw değeri 1440px'de yalnız 53,4px veriyordu
   (16 + 2,6 × 14,4), yani fişin bir buçuk kademe altı. 3,6vw ile
   16 + 51,8 = 67,8 → üst sınıra oturur. `clamp()` yazarken ORTA DEĞERİN
   hedef genişlikteki karşılığı hesaplanmalı; yoksa üst sınır hiç
   kullanılmaz ve ölçmeden fark edilmez. */
h1 {
    font-size: clamp(1.75rem, 1rem + 3.6vw, 4rem);
}

/* ÖLÇÜ: bölüm başlığı 32px. */
h2 {
    font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
}

h3 {
    font-size: 1.125rem;
}

p,
ul,
ol,
dl,
figure {
    margin: 0 0 12px;
}

ul,
ol {
    padding-left: 18px;
}

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

table {
    border-collapse: collapse;
    width: 100%;
}

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

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

/* ==========================================================================
   2) DÜZEN İLKELERİ VE KART
   ========================================================================== */

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

.ufk-en--dar {
    max-width: 900px;
}

#ufk-icerik {
    display: block;
    min-height: 40vh;
    padding-bottom: 8px;
}

.ufk-bolum {
    padding: 34px 0 6px;
}

.ufk-bolum__bas {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 20px;
}

.ufk-bolum__bas h2 {
    margin: 0;
    width: 100%;
}

.ufk-bolum__bas p {
    margin: 0;
    font-size: .875rem;
    color: var(--muted);
}

.ufk-tumu {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .875rem;
    font-weight: 700;
    color: var(--primary);
}

/* --- rozet --- */
.ufk-etiket {
    display: inline-block;
    padding: 3px 11px;
    border-radius: var(--btn-radius);
    background: var(--koyu);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
}

.ufk-etiket--indirim {
    background: var(--accent);
}

.ufk-etiket--yeni {
    background: var(--primary);
}

.ufk-etiket--bitti {
    background: var(--muted);
}

.ufk-yildiz {
    color: #d99400;
    letter-spacing: 1px;
}

.ufk-reklam-alan {
    margin: 26px auto;
}

.ufk-reklam {
    display: block;
}

/* ==========================================================================
   3) BAŞLIK — 40px KOYU BİLGİ ŞERİDİ + 80px BEYAZ ANA SATIR
   --------------------------------------------------------------------------
   Aramanın ORTADA ve en geniş öge olduğu tek başlık. teknomart koyu lacivert
   iki katman + daire kategori şeridi; tunga iki koyu katman; bereket kiremit
   üst katman + gri reyon şeridi; tempo 60px siyah, markası ortada.
   ========================================================================== */

.ufk-serit {
    background: var(--koyu);
    color: rgba(255, 255, 255, .86);
}

.ufk-serit__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* ÖLÇÜ: 40px. */
    min-height: 40px;
    font-size: .8125rem;
}

.ufk-serit__baglar {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* Kaydırıcı kapsayıcı blok olmalı: içindeki mutlak konumlu düğümler
       kırpılmazsa belgeyi yatay taşırıyor (bereket'te ölçüldü). */
    position: relative;
}

.ufk-serit__baglar::-webkit-scrollbar {
    display: none;
}

.ufk-serit__baglar a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ufk-serit__sag {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
}

.ufk-serit__sag a,
.ufk-serit__sag span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.ufk-bas {
    background: var(--card-bg);
    box-shadow: var(--golge);
}

.ufk-bas__ic {
    display: flex;
    align-items: center;
    gap: 18px;
    /* ÖLÇÜ: 80px. */
    min-height: 80px;
}

.ufk-marka {
    flex: 0 0 auto;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--title);
}

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

/* --- ÜRÜN AĞACI PANELİ --- */
.ufk-katalog {
    position: relative;
    flex: 0 0 auto;
}

.ufk-katalog > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: var(--btn-radius);
    background: var(--yuzey);
    font-size: .9375rem;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.ufk-katalog > summary::-webkit-details-marker {
    display: none;
}

.ufk-katalog > summary:hover {
    background: var(--yuzey-koyu);
}

/* Izgara ikonu: dokuz kare, tek gradyanla — SVG isteği yok. */
.ufk-katalog__ikon {
    width: 15px;
    height: 15px;
    background-image:
        radial-gradient(circle, var(--title) 1.5px, transparent 1.6px),
        radial-gradient(circle, var(--title) 1.5px, transparent 1.6px),
        radial-gradient(circle, var(--title) 1.5px, transparent 1.6px);
    background-size: 15px 5px;
    background-position: 0 0, 0 5px, 0 10px;
    background-repeat: repeat-x;
}

.ufk-katalog__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 40;
    width: min(920px, 88vw);
    padding: 24px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge-yuksek);
}

.ufk-katalog__izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 26px;
}

.ufk-katalog__kok {
    display: block;
    margin-bottom: 7px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--title);
}

.ufk-katalog__alt {
    display: block;
    padding: 3px 0;
    font-size: .875rem;
    color: var(--muted);
}

.ufk-katalog__alt:hover {
    color: var(--primary);
}

/* --- ARAMA: ana satırın en geniş ögesi --- */
.ufk-ara {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 5px 0 20px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
}

.ufk-ara:focus-within {
    border-color: var(--primary);
    background: var(--card-bg);
}

/* ÖZGÜLLÜK ZORUNLU: çekirdek bloktaki `input[type='search']` kuralı ile aynı
   ağırlıkta (0,1,1) olurdu ve dosyada SONRA geldiği için kazanırdı — arama
   kutusu çerçeveli, dolgulu ikinci bir kutuya dönerdi. */
.ufk-ara input[type='search'] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
}

.ufk-ara button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 20px;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--btn-radius);
    background: var(--primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
}

.ufk-ara button:hover {
    background: #0f4f99;
}

/* --- EYLEMLER --- */
.ufk-eylem {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.ufk-ikon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--title);
    font-size: .875rem;
    white-space: nowrap;
}

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

.ufk-sepet__adet {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
}

.ufk-burger {
    display: none;
}

/* --- MOBİL ÇEKMECE --- */
.ufk-mobil {
    display: none;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    padding: 14px 0 22px;
}

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

.ufk-mobil a,
.ufk-mobil summary {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    font-size: .9375rem;
    color: var(--text);
    cursor: pointer;
}

.ufk-mobil details a {
    padding-left: 16px;
    color: var(--muted);
}

.ufk-mobil__arama {
    display: flex;
    align-items: center;
    height: 48px;
    margin-bottom: 14px;
    padding: 0 5px 0 18px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
}

.ufk-mobil__arama input[type='search'] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.ufk-mobil__arama button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--btn-radius);
    background: var(--primary);
    color: #fff;
}

/* ==========================================================================
   4) ANA SAYFA — DÖŞEME, YUVARLAK KAHRAMAN, AFİŞLER, REYON BLOKLARI, BENTO
   --------------------------------------------------------------------------
   İMZA: REYON BLOĞU DİKEY YIĞILIR — başlık + altyazı, altında TAM GENİŞLİK
   afiş kartı, altında DÖRT ürün, en altta ortalanmış hap düğme. bereket'in
   reyon bloğu TEK SATIRDIR (afiş | 3 ürün | panel); buradaki üç kat.
   ========================================================================== */

/* --- KATEGORİ DÖŞEMESİ ---
   ÖLÇÜ: 225 × 145, yarıçap 20px, dolgu 20px 15px, etiket 14px/400. */
.ufk-doseme {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 0 28px;
}

.ufk-doseme__oge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 145px;
    padding: 20px 15px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
    text-align: center;
    transition: box-shadow var(--gecis), transform var(--gecis);
}

.ufk-doseme__oge:hover {
    box-shadow: var(--golge-yuksek);
    transform: translateY(-2px);
    text-decoration: none;
}

.ufk-doseme__oge img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.ufk-doseme__harf {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--btn-radius);
    background: var(--yuzey);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--muted);
}

.ufk-doseme__ad {
    font-size: .875rem;
    line-height: 1.3;
    color: var(--text);
}

/* --- KAHRAMAN: TAM GENİŞLİK DEĞİL, YUVARLAK KART ---
   ÖLÇÜ: 1400 × 390, yarıçap 20px. */
.ufk-kahraman {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: clamp(280px, 27vw, 390px);
    margin-bottom: 8px;
    padding: 40px 20px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--koyu);
    text-align: center;
}

.ufk-kahraman__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* SABİT PERDE: fotoğrafın üstündeki BEYAZ metnin kontrastı bu katmanla
   garanti altına alınır. Fotoğraf değişse bile oran bozulmaz. */
.ufk-kahraman::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(12, 16, 22, .34) 0%, rgba(12, 16, 22, .72) 100%);
}

.ufk-kahraman__metin {
    max-width: 44ch;
    color: #fff;
}

.ufk-kahraman__metin h1 {
    color: #fff;
    margin-bottom: 14px;
}

.ufk-kahraman__ozet {
    margin: 0 0 22px;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .9);
}

/* --- AFİŞ KARTLARI (yenilikler) --- */
.ufk-afisler {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ufk-afis {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    padding: 20px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--koyu);
    color: #fff;
}

.ufk-afis img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform var(--gecis);
}

.ufk-afis::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(12, 16, 22, .05) 30%, rgba(12, 16, 22, .82) 100%);
}

.ufk-afis:hover {
    text-decoration: none;
}

.ufk-afis:hover img {
    transform: scale(1.04);
}

.ufk-afis__metin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* ÖLÇÜ: afiş üstlüğü 14/400, ad 32/500, fiyat 19/500. */
.ufk-afis__ust {
    font-size: .875rem;
    color: rgba(255, 255, 255, .8);
}

.ufk-afis__ad {
    font-size: clamp(1.0625rem, .8rem + .6vw, 1.375rem);
    font-weight: 500;
    line-height: 1.2;
}

.ufk-afis__fiyat {
    margin-bottom: 8px;
    font-size: 1.1875rem;
    font-weight: 500;
}

/* --- REYON BLOĞU: TAM GENİŞLİK AFİŞ --- */
.ufk-reyon-afis {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(240px, 26vw, 390px);
    margin-bottom: 20px;
    padding: 34px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--koyu);
    color: #fff;
}

.ufk-reyon-afis img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.ufk-reyon-afis::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(12, 16, 22, .78) 0%, rgba(12, 16, 22, .44) 55%, rgba(12, 16, 22, .12) 100%);
}

.ufk-reyon-afis:hover {
    text-decoration: none;
}

.ufk-reyon-afis__metin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 46ch;
}

.ufk-reyon-afis__ust {
    font-size: .875rem;
    color: rgba(255, 255, 255, .8);
}

/* ÖLÇÜ: afiş kartı adı 32px / 500. */
.ufk-reyon-afis__ad {
    font-size: clamp(1.25rem, .9rem + 1.2vw, 2rem);
    font-weight: 500;
    line-height: 1.15;
}

.ufk-reyon-afis__fiyat {
    margin-bottom: 12px;
    font-size: 1.1875rem;
    font-weight: 500;
}

.ufk-reyon-dip {
    display: flex;
    justify-content: center;
    margin: 4px 0 0;
}

/* --- NEDEN BİZ: BENTO --- */
.ufk-neden {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 34px 0 8px;
}

.ufk-neden__buyuk,
.ufk-neden__kutu,
.ufk-neden__genis {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 26px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
}

.ufk-neden__buyuk {
    grid-column: span 2;
    justify-content: center;
}

.ufk-neden__genis {
    grid-column: span 2;
}

.ufk-neden__kutu--vurgu {
    background: var(--primary);
    color: #fff;
}

.ufk-neden__kutu--vurgu .ufk-neden__sayi,
.ufk-neden__kutu--vurgu b {
    color: #fff;
}

.ufk-neden__kutu--vurgu a {
    color: #fff;
    text-decoration: underline;
}

.ufk-neden__sayi {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--primary);
}

.ufk-neden b {
    font-size: 1rem;
    font-weight: 500;
    color: var(--title);
}

.ufk-neden span:not(.ufk-neden__sayi) {
    font-size: .875rem;
    line-height: 1.4;
    color: var(--muted);
}

.ufk-neden__genis svg {
    color: var(--primary);
    margin-bottom: 6px;
}

/* ==========================================================================
   5) ÜRÜN IZGARASI VE KARTI — DÖRT KOLON, BEYAZ KART, KARE `contain`
   --------------------------------------------------------------------------
   ÖLÇÜ: 1400 = 4 × 335 + 3 × 20. Fotoğraf 1:1 KARE ve `contain` —
   KIRPILMAZ. Kardeş temaların hepsinde kart fotoğrafı `cover` ile kırpılır;
   teknoloji ürününde bu kabul edilemez (drone'un pervanesi, kameranın
   objektifi kesiliyor).
   ========================================================================== */

.ufk-izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.ufk-urun {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--golge);
    transition: box-shadow var(--gecis), transform var(--gecis);
}

.ufk-urun:hover {
    box-shadow: var(--golge-yuksek);
    transform: translateY(-2px);
}

.ufk-urun__medya {
    position: relative;
    padding: 18px 18px 0;
    background: var(--card-bg);
}

.ufk-urun__gorsel {
    display: block;
    width: 100%;
}

.ufk-urun__gorsel img {
    width: 100%;
    height: auto;
    /* ÖLÇÜ: 1 : 1 KARE. Oran FOTOĞRAFIN kendisine verilir — sütun yönlü esnek
       kapsayıcının içindeki kutuya verildiğinde `height: 100%` ile döngüsel
       bağ kurulup yanlış çözülüyor (tempo'da ölçüldü). */
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.ufk-urun__bos {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--btn-radius);
    background: var(--yuzey);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--border);
}

.ufk-urun__isaret {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.ufk-urun__fav {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
    z-index: 1;
}

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

.ufk-fav-btn.is-secili,
.ufk-fav-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.ufk-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    padding: 14px 18px 18px;
}

/* ÖLÇÜ: marka 13px, gri, büyük harf (Metin::buyuk ile üretilir). */
.ufk-urun__marka {
    font-size: .8125rem;
    letter-spacing: .04em;
    color: var(--muted);
}

.ufk-urun__ad {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ufk-urun__ad a:hover {
    color: var(--primary);
}

.ufk-urun__puan {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: .75rem;
    color: var(--muted);
}

/* ÖLÇÜ: fiyat 24px / 500, MAVİ — kartın tek renkli ögesi. */
.ufk-urun__fiyat {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: auto 0 0;
    padding-top: 4px;
}

.ufk-urun__fiyat strong {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--primary);
}

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

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

.ufk-urun__stok {
    margin: 0;
    font-size: .75rem;
}

.ufk-urun__eylem {
    margin-top: 10px;
}

.ufk-urun__eylem form {
    margin: 0;
}

.ufk-urun__eylem .ufk-btn {
    width: 100%;
}

.ufk-urun__dip {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: .75rem;
    color: var(--muted);
}

/* ==========================================================================
   6) LİSTE / KATEGORİ SAYFASI — HER SÜZGEÇ GRUBU AYRI BEYAZ KART
   --------------------------------------------------------------------------
   ipek'te sol kolon TEK panel; nordika tek <details>; bereket üstte yapışkan
   çubuk; tempo tam genişlik çekmece; vast ayrı çekmeceler; orion sağda
   yapışkan kolon. Burada gruplar AYRI KARTLAR ve aralarını gri zemin ayırıyor.
   ========================================================================== */

.ufk-baslik-blok {
    margin: 20px 0 22px;
}

.ufk-baslik-blok p {
    margin: 8px 0 0;
    max-width: 70ch;
    color: var(--muted);
}

.ufk-liste {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ufk-suzgec {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}

.ufk-suzgec__kart {
    padding: 20px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
}

.ufk-suzgec__bas {
    margin: 0 0 12px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
}

.ufk-suzgec__agac {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
}

.ufk-suzgec__kok {
    display: block;
    padding: 6px 0 3px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--title);
}

.ufk-suzgec__alt {
    display: block;
    padding: 3px 0 3px 14px;
    font-size: .875rem;
    color: var(--muted);
}

.ufk-suzgec__kok[aria-current],
.ufk-suzgec__alt[aria-current] {
    color: var(--primary);
    font-weight: 700;
}

.ufk-suzgec__liste {
    display: grid;
    gap: 7px;
    max-height: 240px;
    overflow-y: auto;
    position: relative;
}

.ufk-suzgec__liste label,
.ufk-onay {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .9375rem;
    cursor: pointer;
}

.ufk-onay {
    padding: 6px 0;
}

.ufk-suzgec__eylem {
    display: flex;
    gap: 10px;
}

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

.ufk-liste__ust {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 20px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
}

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

.ufk-liste__sayac strong {
    color: var(--title);
}

.ufk-liste__sirala {
    margin-left: auto;
}

.ufk-liste__sirala .field {
    width: 200px;
}

/* ==========================================================================
   7) ÜRÜN SAYFASI — YAN YANA İKİ BEYAZ KART, ALTINDA ARDIŞIK KARTLAR
   ========================================================================== */

.ufk-urun-sayfa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.ufk-galeri-kart {
    padding: 26px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
}

/* Büyük alan yatay bir ray: küçük resimler ona ÇAPA. JavaScript yok. */
.ufk-galeri__buyuk {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    border-radius: var(--btn-radius);
    scrollbar-width: none;
    /* Kaydırıcı kapsayıcı blok olmalı (bkz. bereket'te ölçülen taşma). */
    position: relative;
}

.ufk-galeri__buyuk::-webkit-scrollbar {
    display: none;
}

.ufk-galeri__kare,
.ufk-galeri__bos {
    margin: 0;
    scroll-snap-align: start;
}

.ufk-galeri__kare img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.ufk-galeri__bos {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    background: var(--yuzey);
    border-radius: var(--btn-radius);
    font-size: 4rem;
    font-weight: 700;
    color: var(--border);
}

.ufk-galeri__serit {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    overflow-x: auto;
    scrollbar-width: thin;
    position: relative;
}

.ufk-galeri__kucuk {
    flex: 0 0 auto;
    width: 84px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
    background: var(--card-bg);
}

.ufk-galeri__kucuk:hover,
.ufk-galeri__kucuk:focus-visible {
    border-color: var(--primary);
}

.ufk-galeri__kucuk img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.ufk-satin {
    padding: 26px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
}

.ufk-satin__marka {
    display: inline-block;
    margin-bottom: 6px;
    font-size: .8125rem;
    letter-spacing: .04em;
    color: var(--muted);
}

.ufk-satin h1 {
    font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
    margin-bottom: 12px;
}

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

.ufk-satin__fiyat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 4px;
}

.ufk-satin__fiyat strong {
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--primary);
}

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

.ufk-satin__indirim {
    padding: 3px 11px;
    border-radius: var(--btn-radius);
    background: var(--accent);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.ufk-satin__ozet {
    margin: 12px 0;
    font-size: .9375rem;
}

.ufk-secim {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.ufk-secim legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
}

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

.ufk-secim__oge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    background: var(--card-bg);
    font-size: .875rem;
    cursor: pointer;
}

.ufk-secim__oge:has(input:checked) {
    border-color: var(--primary);
    background: #eaf2fb;
}

.ufk-secim__oge input {
    margin: 0;
}

.ufk-stok {
    margin: 0 0 12px;
    font-size: .875rem;
}

.ufk-adet-sira {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 14px 0 10px;
}

.ufk-adet-sira .ufk-btn {
    flex: 1 1 auto;
}

.ufk-urun-eylem {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.ufk-urun-eylem form {
    margin: 0;
}

.ufk-guven {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.ufk-guven li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: .8125rem;
}

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

/* --- ARDIŞIK BİLGİ KARTLARI --- */
.ufk-bilgi {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.ufk-bilgi__kart {
    padding: 26px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
}

.ufk-bilgi__bas {
    margin: 0 0 14px;
    font-size: 1.25rem;
}

.ufk-detay {
    margin: 0 0 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 30px;
}

.ufk-detay__satir {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}

.ufk-detay__satir dt {
    color: var(--muted);
}

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

.ufk-madde {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: .875rem;
}

.ufk-madde li {
    padding: 3px 0;
}

.ufk-bilgi__kart--yorum {
    max-width: var(--container);
}

/* --- değerlendirmeler --- */
.ufk-yorum {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.ufk-yorum__bas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 6px;
    font-size: .875rem;
}

.ufk-yorum__ad {
    font-weight: 700;
    color: var(--title);
}

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

.ufk-yorum-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
    padding: 22px;
    border-radius: var(--radius);
    background: var(--yuzey);
}

.ufk-yorum-form > label:nth-child(5),
.ufk-yorum-form > div {
    grid-column: 1 / -1;
}

/* ==========================================================================
   8) ALT BİLGİ — GRİ ZEMİNDE BEYAZ KART + BÜLTEN
   --------------------------------------------------------------------------
   ipek SİYAH beş kolon; tempo SİYAH üç kolon; bereket açık gri YÜZEY dört
   kolon + sağda marka kolonu. Burada alt bilgi bir zemin değil, sayfanın
   geri kalanıyla aynı dili konuşan BEYAZ BİR KART.
   ========================================================================== */

.ufk-alt {
    padding-bottom: 30px;
}

.ufk-alt .bulten {
    margin-bottom: 20px;
    padding: 30px;
    background: var(--primary);
    border: 0;
    border-radius: var(--radius);
    color: #fff;
}

.ufk-alt .bulten__ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 26px;
    align-items: center;
}

.ufk-alt .bulten__baslik {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
}

.ufk-alt .bulten__aciklama {
    margin: 0;
    font-size: .875rem;
    color: rgba(255, 255, 255, .86);
}

.ufk-alt .bulten__form {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 5px 0 18px;
    background: #fff;
    border-radius: var(--btn-radius);
}

.ufk-alt .bulten__form input[type='email'] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
}

.ufk-alt .bulten__hata {
    margin: 10px 0 0;
    color: #ffd7d3;
    font-size: .8125rem;
}

.ufk-alt__kart {
    padding: 34px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
}

.ufk-alt__izgara {
    display: grid;
    grid-template-columns: 300px repeat(3, minmax(0, 1fr));
    gap: 30px;
    padding-bottom: 24px;
}

.ufk-alt__izgara h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--title);
}

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

.ufk-alt__izgara li {
    padding: 4px 0;
}

.ufk-alt__izgara a {
    font-size: .875rem;
    color: var(--muted);
}

.ufk-alt__izgara a:hover {
    color: var(--primary);
}

.ufk-alt__marka {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--title);
}

.ufk-alt__satir {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 9px;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--text);
}

.ufk-alt__satir svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--muted);
}

.ufk-alt__dip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: .8125rem;
    color: var(--muted);
}

.ufk-alt__dip p {
    margin: 0;
}

/* ==========================================================================
   9) ÇEKİRDEK SINIFLARIN UFUK DİLİNDE YENİDEN ÇİZİMİ
   --------------------------------------------------------------------------
   Tema `shop.css` yüklemediği için, tema ezmediği görünümlerde (sepet, ödeme,
   hesabım, blog, kampanyalar, koleksiyonlar, karşılaştırma, statik sayfalar)
   çekirdek sınıf adları buradan stil alır. Ad listesi çekirdek görünümlerden
   çıkarılmıştır; bir sınıf burada yoksa o sayfa STİLSİZ görünür — minik
   temasında tam olarak bu yaşandı, ipek'te de form alanları böyle unutuldu.

   Blok tempo.css'teki eşinden TÜRETİLDİ (aynı sınıf listesi, aynı yapı).
   Renklerin, yarıçapların ve yazı tipinin TAMAMI belirteçlerden geldiği için
   blok olduğu gibi Ufuk'un paletiyle çiziliyor: `--radius` 20px olduğundan
   bütün kutular yuvarlak, `--page-bg` gri olduğundan yüzeyler beyaz kalıyor.

   TEK EKLENEN ŞEY: `.panel`, `.summary`, `.statcard` gibi yüzeylerin GÖLGESİ.
   Ufuk'ta kutuların çerçevesi yok, kenarını gri zemin ve gölge çiziyor;
   çerçeveli bir kutu bu sayfada yamalı duruyordu.
   ========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.pcard__media {
    position: relative;
    display: block;
    background: var(--yuzey);
}

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

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

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

.pcard__body {
    display: grid;
    gap: 6px;
    padding: 16px 18px 10px;
    flex: 1 1 auto;
}

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

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

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

.pcard__stars {
    color: var(--accent);
}

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

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

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

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

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

/* --- liste sayfası çekirdek düzeni (tema ezmediği listeler) --- */

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

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

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

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

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

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

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

/* --- sayfalama --- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cartitem__right {
    text-align: right;
}

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

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

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

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

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

.addr-grid,
.contact-grid,
/* --- FORM DENETİMLERİ ---
   ÖLÇÜLMÜŞ AÇIK: bu blok ipek.css'te YOKTU ve blok ondan türetildiği için
   burada da yoktu. Sonuç: temanın ezmediği her form sayfasında (giriş, üyelik,
   ödeme, iletişim, yorum) girdiler TARAYICI VARSAYILANIYLA çiziliyordu —
   ölçüldü: `2px inset #767676`, dolgu `1px 2px`, genişlik 196px. Hata yok,
   uyarı yok, yalnız çirkin ve dar bir kutu. nordika.css'te blok var, o yüzden
   sorun yalnız bu iki temada görünüyordu.

   `.field` bu depoda İKİ ANLAMDA kullanılıyor: bazı görünümlerde SARMALAYICI
   <div class="field">, bazılarında doğrudan <input class="field">. Sarmalayıcı
   kuralı bu yüzden `div.field`/`label.field` ile sınırlandı — düz `.field`
   olsaydı girdiye de `display: grid` uygulanırdı. */

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

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

.field input,
.field select,
.field textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='date'],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--text);
}

textarea {
    resize: vertical;
}

.hint {
    margin: 6px 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

.field-error {
    margin: 6px 0 0;
    font-size: .8125rem;
    color: var(--hata);
}

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

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

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

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

.stars {
    color: var(--accent);
}

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

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

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

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

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

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

.responsive {
    max-width: 100%;
}

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

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

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

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

.tabs__panel[hidden] {
    display: none;
}

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

.prose {
    max-width: 72ch;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tema-onizleme__ayrinti {
    opacity: .9;
}

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

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

.tema-onizleme__btn--birincil {
    background: #fff;
    color: var(--accent);
}

/* ==========================================================================
   10) TEMANIN KENDİ DÜĞMESİ VE YÜZEYLERİ
   --------------------------------------------------------------------------
   `.ufk-btn` çekirdek `.btn` ile BİRLİKTE yazılır (class="ufk-btn btn"):
   taban görünüm .btn'den gelir, Ufuk'a özgü ölçüler buradan. Bu blok
   DOSYANIN SONUNDA durmak ZORUNDA — yukarıda dursaydı eşit belirginlikteki
   `.btn` kuralları onu ezerdi (bereket.css'te ölçüldü).

   ÖLÇÜ: hap yarıçap 20px · dolgu 0 25px · yükseklik 40px · 14px/700.
   Yükseklik dolgudan değil `min-height`ten geliyor: dikey dolgu sıfır
   ölçüldüğü için 40px'i yalnız satır yüksekliği verseydi düğme metni iki
   satıra düştüğünde kutu bozuluyordu.
   ========================================================================== */

.ufk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 25px;
    border: 1px solid var(--primary);
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--primary);
    font-family: var(--yazi);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}

.ufk-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    text-decoration: none;
}

.ufk-btn--dolu {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ufk-btn--dolu:hover {
    background: #0f4f99;
    border-color: #0f4f99;
    color: #fff;
}

.ufk-btn--kucuk {
    min-height: 34px;
    padding: 5px 18px;
    font-size: .8125rem;
}

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

.ufk-btn-metin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--primary);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ÇEKİRDEK YÜZEYLER GÖLGELİ, ÇERÇEVESİZ: Ufuk'ta kutu kenarını gri zemin ve
   gölge çizer. Çekirdek bloktan gelen 1px çerçeveler gri sayfada yamalı
   duruyordu. */
.panel,
.summary,
.statcard,
.cartitem,
.radio-card,
.success-box,
.empty,
.filters,
.datatable,
.table-scroll,
.bayi-panel,
.krs-tablo-kap {
    border-color: transparent;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--golge);
}

.section--surface {
    background: transparent;
}

/* ==========================================================================
   11) DUYARLILIK
   --------------------------------------------------------------------------
   Dört kolonluk ürün ızgarası 1180'de üçe, 900'de ikiye, 560'ta bire iner.
   Kategori döşemesi 6 → 4 → 3 → 2 adım adım düşer; tek adımda düşürmek
   kutuları gereksiz büyütüyordu.
   ========================================================================== */

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

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

    .ufk-urun-sayfa {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

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

@media (max-width: 1024px) {
    /* Kategori paneli ve arama çekmeceye düşer; hamburger görünür. */
    .ufk-katalog {
        display: none;
    }

    .ufk-burger {
        display: grid;
    }

    .ufk-ikon__yazi {
        /* Etiket GÖRSEL OLARAK gizlenir ama DOM'da KALIR: adsız düğme
           oluşmasın (WCAG 4.1.2). */
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

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

    .ufk-suzgec {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .ufk-suzgec__eylem {
        grid-column: 1 / -1;
    }

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

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

    .ufk-neden__buyuk,
    .ufk-neden__genis {
        grid-column: span 2;
    }

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

    /* --- çekirdek düzenler --- */
    .listlayout,
    .cartlayout,
    .checkout,
    .acclayout {
        grid-template-columns: 1fr;
    }

    .filters {
        position: static;
    }
}

@media (max-width: 900px) {
    .ufk-ara {
        /* 900px altında ana satırdaki arama gizlenir; aramanın TEK yolu mobil
           çekmecedeki formdur (bkz. header.blade.php). */
        display: none;
    }

    .ufk-serit__sag span {
        display: none;
    }

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

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

    .ufk-katalog__izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pgrid,
    .pgrid--3,
    .pgrid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

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

    .ufk-bolum,
    .section {
        padding-block: 24px;
    }

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

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

    .ikili {
        grid-template-columns: 1fr;
    }

    .ufk-alt__kart,
    .ufk-galeri-kart,
    .ufk-satin,
    .ufk-bilgi__kart {
        padding: 20px;
    }
}

@media (max-width: 560px) {
    .ufk-izgara,
    .ufk-afisler {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .ufk-neden__buyuk,
    .ufk-neden__genis {
        grid-column: span 1;
    }
}

@media (max-width: 420px) {
    .ufk-en,
    .container {
        padding-inline: 16px;
    }

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

/* Dokunmatik cihazda kart yükselmesi ANLAMSIZ: fare yok, :hover hiç
   tetiklenmiyor ya da tıklamada takılı kalıyor. */
@media (hover: none) {
    .ufk-urun:hover,
    .ufk-doseme__oge:hover {
        transform: none;
        box-shadow: var(--golge);
    }

    .ufk-afis:hover img {
        transform: none;
    }
}