:root {
    /* Açık tema (2026-07): sayfa/panel zemini artık açık, sadece header kasıtlı
       olarak koyu bırakıldı (bkz. .app-header ve header içi elemanlar). */
    --navy-bg: #f5f0e3;
    --navy-panel: #ffffff;
    --navy-panel-2: #f1ead9;
    --gold: #d4af37;
    --gold-light: #f3d879;
    --gold-deep: #8a6a1f;
    --brown: #6b4f2a;
    --text: #241c11;
    --muted: #756a59;
    --green: #16a34a;
    --red: #dc2626;
    --border: rgba(138, 106, 31, 0.22);
    --radius: 10px;

    /* İkinci fiyat tablosu (Nakit/KK Satış) için mavi vurgu ailesi */
    --blue: #2f6fd1;
    --blue-light: #eaf1fc;
    --blue-deep: #1d4f9e;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* html'de de aynı zemin: mobilde sayfa üstten/alttan esneyip (bounce/overscroll)
   taştığında da arkada boşluk/siyahlık değil bizim zeminimiz görünsün. */
html, body {
    background:
        radial-gradient(ellipse 900px 500px at 50% 0%, rgba(212, 175, 55, 0.10), transparent 60%),
        radial-gradient(ellipse 700px 500px at 100% 100%, rgba(212, 175, 55, 0.05), transparent 60%),
        var(--navy-bg);
}

body {
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* mobil tarayıcıda üst/alt bar açılıp kapansa da doğru yüksekliği korur */
    overflow: hidden;
}

/* ---------- Header ---------- */
.app-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #241b0e, #17110a);
    border-bottom: 1px solid var(--gold-deep);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    position: relative;
}

.app-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.brand-logo-wrap {
    display: flex;
    align-items: center;
}

.brand-logo {
    height: 56px;
    width: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
    border: 2px solid var(--gold);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.45);
}

.brand-center {
    /* Sağ/sol içerik farklı genişlikte olsa bile başlık tam ortada kalsın diye
       header'a göre mutlak konumlandırılır (flex'in doğal ortalamasına güvenilmez). */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 60%;
    pointer-events: none;
}

.brand-title {
    font-weight: 700;
    font-style: italic;
    font-size: clamp(14px, 2.2vw, 21px);
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #8a6a1f 0%, #d4af37 25%, #f3d879 50%, #d4af37 75%, #8a6a1f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldTextShine 4s linear infinite;
}

/* .brand-title/.brand-sub header dışında (ör. change_password.php'de) açık bir
   .panel üzerinde de kullanılıyor - orada parıltı/eğik efekti değil, okunaklı koyu ton. */
.panel .brand-title {
    font-style: normal;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--gold-deep);
    animation: none;
    text-shadow: none;
}

.brand-sub {
    font-size: 11px;
    /* Header kasıtlı olarak koyu kaldığı için burada genel (artık açık tema
       için koyulaştırılmış) --muted yerine sabit açık ton kullanılır. */
    color: #b8ab8d;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Açılır menü artık ekran genişliğinden bağımsız her zaman hamburger arkasında
   (önceden sadece dar ekranda böyleydi) - başlık gerçekten ortada kalabilsin diye
   sağ taraf kompakt tutulur. .app-header'ın position:relative'ine göre
   konumlanır (right:0 = header'ın en sağı), .header-actions'a göre değil. */
.header-right {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 220px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    background: #1f1811;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
    font-size: 13px;
    color: #b8ab8d;
    z-index: 20;
}

.header-right.open { display: flex; }

.header-right .btn { text-align: center; }

.header-user-name {
    margin-top: 4px;
    font-weight: 800;
    font-size: 13px;
    color: var(--gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-clock {
    color: var(--gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--gold-light);
    border-radius: 2px;
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--navy-panel-2);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

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

.btn-gold {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    color: #1a1406;
    border-color: var(--gold);
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.25);
}

.btn-gold:hover { filter: brightness(1.05); }

.btn-gold::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: goldShimmer 3.2s ease-in-out infinite;
}

@keyframes goldShimmer {
    0%   { left: -60%; }
    45%  { left: 130%; }
    100% { left: 130%; }
}

/* ÖNEMLİ - ESKİ TARAYICI UYUMU (Smart TV / eski tablet tarayıcıları):
   Aşağıdaki bölümde her clamp() satırından ÖNCE aynı özelliğin vh/vw tabanlı
   sade bir sürümü yazılıdır. clamp() desteklemeyen eski tarayıcılar o satırı
   yok sayıp bir öncekini kullanır, böylece ekrana oranlı ölçekleme yine çalışır.
   Aynı sebeple satır düzeni CSS Grid yerine Flexbox ile kurulmuştur (Grid eski
   TV tarayıcılarında desteklenmiyor, satırlar alt alta kayıyordu) ve flex "gap"
   yerine margin kullanılmıştır. */

/* ---------- Main content: kaydırmasız alan ---------- */
.app-main {
    flex: 1 1 auto;
    min-height: 0;
    /* Sabit piksel yerine ekran boyutuna oranlı: küçük ekranda mevcut sıkı
       tasarım korunur, büyük ekranda (TV) kenar boşluğu da orantılı büyür. */
    padding: 2vh 2.2vw;
    padding: clamp(12px, 2vh, 40px) clamp(18px, 2.2vw, 56px);
    display: flex;
    flex-direction: column;
}

/* ---------- Fiyat tablosu ("board"): tekli + ikili bölüm, kaydırmasız ---------- */
.board {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.board > * { margin-bottom: 1.6vh; }
.board > *:last-child { margin-bottom: 0; }

/* Has Altın ham alış/satış satırı - tabloların EN ALTINDA, bilerek sade ve
   küçük: müşteriye değil kuyumcuya yönelik bir referans bilgisi. Bu fiyatlara
   kâr marjı uygulanmaz, kaynaktan geldiği gibi gösterilir. */
.has-strip {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 4px;
    color: var(--muted);
}

.has-strip-title {
    font-weight: 700;
    letter-spacing: 0.4px;
    font-size: 1.45vh;
    font-size: clamp(10px, min(1.6vh, 1.25vw), 20px);
    margin-right: 0.8em;
}

.has-strip-item { margin-right: 1.4em; }
.has-strip-item:last-child { margin-right: 0; }

.has-strip-item .lbl {
    font-size: 1.3vh;
    font-size: clamp(9px, min(1.4vh, 1.1vw), 18px);
    margin-right: 0.35em;
}

.has-strip-item .val {
    font-weight: 700;
    color: var(--gold-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 1.5vh;
    font-size: clamp(10px, min(1.7vh, 1.3vw), 22px);
}

.board-marquee {
    flex: 0 0 auto;
    overflow: hidden;
    white-space: nowrap;
    padding: 1vh 0;
    padding: clamp(4px, 1vh, 10px) 0;
    background: var(--navy-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.board-marquee-track {
    display: inline-flex;
    font-size: 2.8vh;
    font-size: clamp(14px, 2.8vh, 56px);
    font-weight: 700;
    color: var(--text);
    animation: marqueeScroll 55s linear infinite;
}

.board-marquee-track > span { padding-right: 40px; }

.marquee-highlight {
    color: var(--red);
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.4);
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.board-sections {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.board-sections > .board-section { margin-bottom: 1.6vh; }
.board-sections > .board-section:last-child { margin-bottom: 0; }

.board-section {
    /* Varsayılan (ilk tablo): turuncu-altın vurgu ailesi. İkinci tabloda
       .section-blue ile bu üç değişken maviye çevrilir, geri kalan tüm
       kurallar aynı kalır. Sadece bu üst başlık çubuğu turuncuya çekildi,
       genel --gold değişkeni (butonlar vb.) etkilenmedi. */
    --accent: #d9822b;
    --accent-strong: var(--gold-deep);
    --accent-soft: #f0b64a;
    --accent-text: #1a1406;
    --accent-zebra: rgba(217, 130, 43, 0.08);

    display: flex;
    flex-direction: column;
    background: var(--navy-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.board-section.section-blue {
    --accent: var(--blue);
    --accent-strong: var(--blue-deep);
    --accent-soft: var(--blue-light);
    --accent-text: #ffffff;
    --accent-zebra: rgba(47, 111, 209, 0.07);
}

.board-header {
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--accent-soft), var(--accent));
    color: var(--accent-text);
    font-weight: 800;
    text-align: center;
    padding: 1.2vh;
    padding: clamp(3px, 1.2vh, 16px);
    font-size: 2.2vh;
    font-size: clamp(11px, min(2.6vh, 2.4vw), 60px);
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-section.section-blue .board-header {
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}

.board-subheader {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    background: var(--navy-panel-2);
    color: var(--muted);
    font-weight: 700;
    font-size: 1.6vh;
    font-size: clamp(9px, min(1.8vh, 1.5vw), 40px);
    border-bottom: 1px solid var(--border);
}

.board-subheader > div, .board-row > div {
    padding: 0.8vh 1.5vw;
    padding: clamp(1px, 0.8vh, 18px) clamp(6px, 1.5vw, 12px);
    /* Flex öğesinin içeriğinden daha dar olabilmesi için şart - bu olmadan
       uzun fiyatlar sütunu şişirip tüm tabloyu ekran dışına taşırıyordu. */
    min-width: 0;
}

.board-subheader > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-subheader .val, .board-row .value { text-align: right; }

.board-rows {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.board-row {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: transparent;
}
.board-row:last-child { border-bottom: none; }
.board-row:nth-child(even) { background: var(--accent-zebra); }

/* Yazı boyutu SADECE ekran yüksekliğine (vh) bağlı olduğunda, ekranı görece
   dar/uzun olan cihazlarda (bazı TV ve tabletler) rakamlar sütuna sığmayıp
   tabloyu ekran dışına taşırıyordu. Bu yüzden min(...) ile genişliğe (vw) de
   bağlandı: hangisi küçükse o kullanılır, böylece her ekran oranında sığar. */
.board-row .name {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    font-weight: 800;
    color: var(--text);
    /* Ürün resimleri kaldırıldığı için boşalan yer yazıya verildi (eskiden
       ikon 1.6em yer kapladığından vw sınırı daha düşük tutulmak zorundaydı).
       Mobil değerler aşağıdaki @media bloğunda ayrı tanımlı, oradan etkilenmez. */
    font-size: 2.4vh;
    font-size: clamp(10px, min(3.6vh, 2.1vw), 150px);
    line-height: 1.05;
    text-align: left;
}

.board-row .name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.product-icon {
    width: 1.6em;
    height: 1.6em;
    margin-right: 0.35em;
    object-fit: contain;
    flex-shrink: 0;
}

.board-row .value {
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-size: 3vh;
    font-size: clamp(10px, min(4.8vh, 2.8vw), 220px);
    line-height: 1.05;
    /* Fiyat asla iki satıra bölünmesin (bozuk ekranlarda böyle oluyordu). */
    white-space: nowrap;
    transition: color 0.4s ease;
}

/* Fabrika ayarında SATIŞ vurgulu (bölümün kendi rengi), KK SATIŞ ve ürün adı
   nötr koyu. Admin panelinden bölüm rengi GERÇEKTEN değiştirilirse KK SATIŞ ve
   ürün adı da o renge döner - bkz. core/pricing.php board_theme_css() (bu
   koşullu geçiş orada, burada değil yapılır ki varsayılan görünüm bozulmasın). */
.board-row .value[data-field="sell"] {
    color: var(--accent-strong);
}

.board-row .value[data-field="card"] {
    color: var(--text);
    font-weight: 700;
}

/* Sütun genişlikleri (Flexbox). "flex-basis: 0" + "min-width: 0" birlikte,
   içerik ne kadar geniş olursa olsun sütunların ekran dışına taşmasını önler. */
.cols-2 > div, .cols-3 > div { flex: 1 1 0%; }
.cols-2 > div:first-child { flex: 1.3 1 0%; }
/* Ürün adı sütunu, büyütülen yazıyı kısaltmadan alabilmesi için daha geniş. */
.cols-3 > div:first-child { flex: 1.4 1 0%; }

.board-note {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    text-align: center;
    padding: 2px 4px;
}

/* ---------- Fiyat değişim animasyonu ---------- */
@keyframes flashUp {
    0% { background-color: rgba(22, 163, 74, 0.28); }
    100% { background-color: transparent; }
}
@keyframes flashDown {
    0% { background-color: rgba(220, 38, 38, 0.28); }
    100% { background-color: transparent; }
}
.flash-up { animation: flashUp 0.9s ease-out; }
.flash-down { animation: flashDown 0.9s ease-out; }

.arrow-up::after { content: " \25B2"; color: var(--green); font-size: 10px; }
.arrow-down::after { content: " \25BC"; color: var(--red); font-size: 10px; }

/* ---------- Geniş ekranlarda iki bölümü yan yana yerleştir ---------- */
@media (min-width: 900px) {
    .board-sections {
        flex-direction: row;
    }

    /* Tablolar yan yanayken boşluk ALTTA değil YANDA olmalı. Alttaki margin
       burada da geçerli kalsaydı soldaki tablo sağdakinden o kadar yukarıda
       biter, alt kenarları hizasız görünürdü. */
    .board-sections > .board-section {
        margin-bottom: 0;
        margin-right: 1.6vw;
        margin-right: clamp(10px, 1.6vw, 28px);
    }
    .board-sections > .board-section:last-child { margin-right: 0; }
}

/* ---------- Basit form/panel stilleri (admin & login) ---------- */
.panel {
    background: var(--navy-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 8px 28px rgba(60, 45, 20, 0.12);
}

/* .panel + .btn-gold bir arada kullanıldığında (ör. admin ana panel kartı)
   altın zemin/koyu yazı kombinasyonu kaybolmasın diye özellikle üstün kılınır. */
.panel.btn-gold {
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    color: #1a1406;
}
.panel.btn-gold * { color: #1a1406; }

.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--navy-panel-2);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.form-group textarea { resize: vertical; min-height: 44px; }

/* Renk seçici (admin panelinde bölüm/Has Altın renklerini özelleştirmek için) -
   metin girdileriyle aynı genişlikte olması gerekmiyor, küçük bir kare yeterli. */
.form-group input[type="color"] {
    width: 56px;
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

.form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.form-row .form-group { flex: 1 1 160px; }
.form-row .form-group.form-group-color { flex: 0 0 auto; }

.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}
.alert-error { background: rgba(248,113,113,0.15); color: var(--red); border: 1px solid rgba(248,113,113,0.4); }
.alert-success { background: rgba(52,211,153,0.15); color: var(--green); border: 1px solid rgba(52,211,153,0.4); }

.login-wrap {
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.login-box { width: 100%; max-width: 360px; }

.login-brand { text-align: center; margin-bottom: 22px; }

.login-logo {
    height: 68px;
    width: 68px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    margin-bottom: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.35);
}

.login-divider {
    width: 60px;
    height: 2px;
    margin: 10px auto;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- Giriş ekranı: fotoğraflı split-screen ---------- */
.auth-outer {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    background-color: #fdfbf6;
    background-image: url("../img/minimal-white-gold-bg.webp");
    background-size: cover;
    background-position: center;
}

/* Yazı + kart bloğu tek parça halinde ekranın ortasında toplanır - arka plan
   yine de tüm ekranı kaplamaya devam eder, sadece İÇERİK aşırı geniş
   ekranlarda birbirinden kopup ortada boşluk bırakmasın diye sınırlandırılır. */
.auth-content {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 32px 16px;
}

.auth-visual {
    flex: 1.15;
    position: relative;
}

.auth-visual-overlay {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 56px;
    color: #3a2e17;
    overflow-y: auto;
}

@keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(138, 106, 31, 0.3); }
    50% { box-shadow: 0 0 22px rgba(138, 106, 31, 0.55); }
}

.auth-badge-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 26px;
}

.auth-badge {
    position: relative;
    z-index: 1;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    overflow: hidden;
    background: #fff;
    animation: goldPulse 3s ease-in-out infinite;
}
.auth-badge img { width: 100%; height: 100%; object-fit: cover; }

.auth-heading {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 3.2vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #2c2312;
    white-space: nowrap;
}
.auth-heading .accent {
    background: linear-gradient(90deg, #8a6a1f 0%, #d4af37 25%, #f3d879 50%, #d4af37 75%, #8a6a1f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldTextShine 4s linear infinite;
}

@keyframes goldTextShine {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Rozetin çevresinde küçük, JS ile üretilen pırıltı noktaları */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px 1px rgba(212, 175, 55, 0.9);
    pointer-events: none;
    animation: sparkleTwinkle 1.8s ease-in-out infinite;
}

@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50% { opacity: 1; transform: scale(1); }
}

.auth-heading-sub {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 26px);
    color: #2c2312;
    margin: 2px 0 28px;
}

.auth-features {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auth-features li { display: flex; align-items: flex-start; gap: 12px; }
.auth-features .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-deep);
    margin-top: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(138, 106, 31, 0.5);
}
.auth-features strong { display: block; font-size: 14px; color: #2c2312; }
.auth-features .desc { display: block; font-size: 12px; color: #7a6a48; margin-top: 2px; }

.auth-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(138, 106, 31, 0.25);
    font-size: 11px;
    color: #8a7a58;
}

.auth-panel {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    /* .panel'in genel koyu gölgesi (açık zeminde bulanık bir "leke" gibi görünüyordu) yerine daha dar/hafif bir gölge */
    box-shadow: 0 6px 18px rgba(60, 45, 20, 0.18);
}

.auth-card-head { margin-bottom: 18px; }
.auth-card-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-deep);
}
.auth-card-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

.auth-back-link { text-align: center; margin-top: 16px; font-size: 13px; }
.auth-back-link a { color: var(--gold); }
.auth-back-link a:hover { text-decoration: underline; }

@media (max-width: 899px) {
    .auth-page {
        background-image: url("../img/minimal-white-gold-mobile-bg.webp");
    }
    .auth-content {
        flex-direction: column;
        align-items: stretch;
        max-width: none;
        padding: 0;
    }
    .auth-visual {
        flex: 0 0 auto;
    }
    .auth-visual-overlay {
        padding: 28px 22px 8px;
        justify-content: flex-start;
        overflow-y: visible;
    }
    .auth-badge-wrap { margin-bottom: 14px; }
    .auth-badge { width: 96px; height: 96px; }
    .auth-heading { font-size: 22px; }
    .auth-heading-sub { font-size: 15px; margin-bottom: 0; }
    .auth-features, .auth-footer { display: none; }
    .auth-panel {
        justify-content: flex-start;
        padding: 0 18px 40px;
    }

    /* Header dar ekranda tek satıra sığmadığı için başlık/saat küçülür. */
    .app-header { gap: 8px; padding: 8px 12px; }
    .header-actions { gap: 8px; }
    .brand-title { font-size: 12px; }
    .brand-sub { display: none; }
    .brand-logo { width: 42px; height: 42px; }
    .header-user-name { font-size: 11px; }
    .menu-toggle { width: 34px; height: 34px; }

    /* Başlık, header'ın tam ortasına sabitlenir (mutlak konum) ama genişliği
       logo ve saat+menü için ayrılan payı ASLA yiyemeyecek şekilde sınırlanır.
       Böylece hem gerçekten ortada durur hem de üst üste binme imkânsız olur;
       sığmazsa iki satıra kendisi iner. */
    .brand-center { max-width: calc(100% - 200px); }

    /* Dar ekranda açılır menü tam genişlik kaplar (sağda dar bir kutu yerine). */
    .header-right {
        left: 18px;
        right: 18px;
        min-width: 0;
    }

    /* Başlığa yer açmak için dar ekranda saat küçültülür (logo boyutu korunur). */
    .live-clock { font-size: 12px; }

    /* Dar ekranda tablolar alt alta (tam genişlik) olduğu için sütunlara ayrılan
       genişlik payı farklıdır: isim sütununa daha fazla pay verilir ve vw
       sınırları buna göre gevşetilir (geniş ekran değerleri burada çok küçük kalırdı). */
    .cols-3 > div:first-child { flex: 1.4 1 0%; }
    .board-row .name { font-size: clamp(9px, min(1.8vh, 3.2vw), 18px); }
    .product-icon { width: 1.4em; height: 1.4em; margin-right: 0.25em; }
    .board-row .value {
        font-size: clamp(9px, min(2.2vh, 5vw), 24px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Has Altın satırı: geniş ekran için ayarlanan vw sınırları dar ekranda
       en küçük değere (9-10px) takılıp okunamayacak kadar küçülüyordu. */
    .has-strip-title {
        font-size: clamp(12px, 3.2vw, 16px);
    }
    .has-strip-item .lbl {
        font-size: clamp(11px, 3vw, 15px);
    }
    .has-strip-item .val {
        font-size: clamp(13px, 3.8vw, 19px);
    }
}

table.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.admin-table th, table.admin-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
table.admin-table th { color: var(--muted); font-weight: 600; }
table.admin-table input, table.admin-table select {
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--navy-panel-2);
    color: var(--text);
    width: 100%;
}