/* ═══════════════════════════════════════════════════════════════════════════
   STİL CADDESİ — marka temelleri
   Kartvizitten alınan palet: siyah + altın.

   ⚠️ ÖLÇÜLMÜŞ KONTRAST — bu tablo tahmin değil, hesaplanmış değerlerdir:
     #FFD700 / #000000  → 14.97:1  AAA ✅
     #D4AF37 / #0B0B0C  →  9.35:1  AAA ✅
     #000000 / #D4AF37  →  9.99:1  AAA ✅  (altın dolgu üstünde siyah metin)
     #FFD700 / #FFFFFF  →  1.40:1  HER SEVİYEDE BAŞARISIZ ❌
     #8A6D1F / #FFFFFF  →  4.89:1  AA  ✅

   KURAL: altın, AÇIK zeminde ASLA metin olarak kullanılmaz.
   Bu kaza eseri olur ve önlem alınmazsa kesin gerçekleşir. Yaptırım basit:
   o CSS sınıfı HİÇ tanımlanmadı. Açık zeminde tek izinli altın --gold-on-light.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --surface-dark: #0B0B0C;
    --surface-dark-2: #16161A;
    --surface-light: #FFFFFF;

    --gold: #D4AF37;              /* koyu zeminde metin/ikon/kenarlık */
    --gold-bright: #FFD700;       /* vurgu, yalnızca koyu zeminde */
    --gold-on-light: #8A6D1F;     /* açık zeminde İZİNLİ tek altın */
    --on-gold: #000000;           /* altın dolgu üstündeki metin */

    --text-on-dark: #F5F5F4;
    --text-on-dark-muted: #B8B8B4;
    --text-on-light: #1A1A1A;

    --border-dark: #2A2A2E;

    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --radius: 6px;
    --content-width: 72rem;
}

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-on-dark);
    background-color: var(--surface-dark);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 0.5em;
    font-weight: 700;
}

h1:focus {
    outline: none;
}

a {
    color: var(--gold);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--gold-bright);
}

/* Klavye odağı her zaman görünür — altın çerçeve koyu zeminde AAA. */
:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

/* ── Yerleşim ─────────────────────────────────────────────────────────────── */

.kabuk {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.icerik {
    flex: 1;
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 2rem 1.25rem;
}

/* ── Butonlar ─────────────────────────────────────────────────────────────── */
/* Dokunma hedefi en az 44×44 CSS px — telefonda kullanılabilirlik şartı. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.65rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-birincil {
    background-color: var(--gold);
    color: var(--on-gold);
}

.btn-birincil:hover {
    background-color: var(--gold-bright);
    color: var(--on-gold);
}

.btn-ikincil {
    background-color: transparent;
    border-color: var(--gold);
    color: var(--gold);
}

.btn-ikincil:hover {
    background-color: var(--gold);
    color: var(--on-gold);
}

/* ── Marka ────────────────────────────────────────────────────────────────── */

.marka {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    text-decoration: none;
}

.marka-ad {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-on-dark);
}

.marka-ad em {
    font-style: normal;
    color: var(--gold);
}

.marka-alt {
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── Üst gezinme ──────────────────────────────────────────────────────────── */

.ust-baslik {
    border-bottom: 1px solid var(--border-dark);
    background-color: var(--surface-dark);
}

.ust-baslik-ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
}

/* Header'daki marka hero'dan küçük — ana sayfadaki büyük marka bloğuyla
   karışmasın diye boyutu burada sabitleniyor, clamp() ile değil. */
.marka-kucuk .marka-ad {
    font-size: 1.35rem;
}

.ust-baslik nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ust-baslik nav a {
    color: var(--text-on-dark);
    text-decoration: none;
    font-weight: 600;
    /* Dokunma hedefi en az 44px yükseklik — telefonda kullanılabilirlik şartı. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.ust-baslik nav a:hover {
    color: var(--gold);
}

.slogan {
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    color: var(--text-on-dark-muted);
    font-style: italic;
}

/* ── Alt bilgi ────────────────────────────────────────────────────────────── */

.altbilgi {
    border-top: 1px solid var(--border-dark);
    background-color: var(--surface-dark-2);
    color: var(--text-on-dark-muted);
    font-size: 0.9rem;
}

.altbilgi .icerik {
    padding-block: 1.5rem;
}

/* ── Ekmek kırıntısı ──────────────────────────────────────────────────────── */

.ekmek-kirintisi {
    font-size: 0.875rem;
    color: var(--text-on-dark-muted);
    margin-bottom: 1rem;
}

.ekmek-kirintisi span[aria-hidden] {
    margin-inline: 0.4rem;
}

.giris {
    font-size: 1.1rem;
    color: var(--text-on-dark-muted);
    max-width: 60ch;
}

/* ── Kategori kartları ────────────────────────────────────────────────────── */

.kart-izgara {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.kart {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 100px;
    padding: 1.25rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background-color: var(--surface-dark-2);
    text-decoration: none;
}

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

.kart-baslik {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-on-dark);
}

.kart-alt {
    font-size: 0.85rem;
    color: var(--gold);
}

/* ── Ürün ızgarası ────────────────────────────────────────────────────────── */

.urun-izgara {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.5rem;
}

.urun-kart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background-color: var(--surface-dark-2);
}

.urun-kart > a:first-child {
    text-decoration: none;
}

.urun-kart img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius) - 2px);
    background-color: #000;
}

.gorsel-yok {
    aspect-ratio: 3 / 4;
    display: grid;
    place-items: center;
    border: 1px dashed var(--border-dark);
    border-radius: calc(var(--radius) - 2px);
    color: var(--text-on-dark-muted);
    font-size: 0.9rem;
}

.urun-ad {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--text-on-dark);
}

.urun-ozet {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-on-dark-muted);
}

.urun-moq {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gold);
}

/* Ürün detay sayfası görselleri.
   Kaynak görseller 3:4 ve yalnızca ~300-400 px geniş (katalog sayfasının
   izin verdiği en yüksek çözünürlük). Bu yüzden max-width ile sınırlanıyor:
   daha geniş göstermek büyütme demek olurdu ve bulanıklaşırdı. */
.urun-gorseller {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
}

.urun-gorseller img {
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-dark);
    background-color: #000;
}

/* D10 — katalog görselleri render/AI olduğu için zorunlu ibare. */
.gorsel-notu {
    margin-top: 2rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--gold);
    background-color: var(--surface-dark-2);
    font-size: 0.875rem;
    color: var(--text-on-dark-muted);
}

.bos-durum {
    padding: 1.5rem;
    border: 1px dashed var(--border-dark);
    border-radius: var(--radius);
    color: var(--text-on-dark-muted);
}

.tesvik {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-dark);
}

/* ── Ürün detayı ──────────────────────────────────────────────────────────── */

.urun-detay {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.ozellik-listesi {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.ozellik-listesi dt {
    font-weight: 600;
    color: var(--gold);
}

.ozellik-listesi dd {
    margin: 0;
    color: var(--text-on-dark);
}

.ipucu {
    font-size: 0.875rem;
    color: var(--text-on-dark-muted);
}

.renk-listesi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.renk-listesi li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.renk-nokta {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    flex-shrink: 0;
}

/* Geniş tablo sayfayı yatay kaydırmasın — kendi kabında kaysın. */
.tablo-kaydir {
    overflow-x: auto;
}

.olcu-tablosu {
    border-collapse: collapse;
    width: 100%;
    min-width: 30rem;
}

.olcu-tablosu caption {
    text-align: left;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-on-dark-muted);
}

.olcu-tablosu th,
.olcu-tablosu td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-dark);
    text-align: left;
}

.olcu-tablosu thead th {
    color: var(--gold);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Form doğrulama ───────────────────────────────────────────────────────── */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #3DDC84;
}

.invalid {
    outline: 1px solid #FF6B6B;
}

.validation-message {
    color: #FF9C9C;
}

/* ── Hata sınırı ──────────────────────────────────────────────────────────── */

.blazor-error-boundary {
    background-color: #7A1B1B;
    color: #FFFFFF;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
}

.blazor-error-boundary::after {
    content: "Beklenmeyen bir hata oluştu.";
}

/* ── Hareket azaltma tercihi ──────────────────────────────────────────────── */

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