/* ==========================================================================
   OXUS UI — tasarım sistemi katmanı (Aşama 1)
   style.css'ten SONRA yüklenir; mevcut sınıfları bozmaz, token'ları ve
   navigasyonu yeniden tanımlar. Yön: siyah / krom / beyaz + tek vurgu
   (asit yeşili). Kırmızı yalnızca hata/okunmamış bildirim rolünde kalır.
   Kural: efekt küçük yazıya uygulanmaz, hareket bir durumu anlatır.
   ========================================================================== */

:root {
    /* --- Renk rolleri --------------------------------------------------- */
    --ox-bg:          #060607;
    --ox-surface:     #101113;
    --ox-surface-hi:  #17181b;
    --ox-border:      rgba(255,255,255,.14);
    --ox-text:        #f4f5f6;   /* zeminde 17:1 kontrast */
    --ox-text-2:      #b4b7bd;   /* zeminde ~9:1  (eski --muted ≈ 5:1) */
    --ox-chrome-1:    #f2f4f7;
    --ox-chrome-2:    #9aa1ab;
    --ox-chrome-3:    #3a3e45;
    --ox-accent:      #b6ff3c;   /* asit yeşili — SADECE aktif/birincil eylem */
    --ox-accent-ink:  #0a1200;   /* vurgu üstü yazı */
    --ox-danger:      #ff4d5a;   /* hata + okunmamış sayacı */
    --ox-ok:          #3ddc84;
    --ox-warn:        #ffc247;

    /* Eski token'ları yeni role bağla: mevcut sayfalar kendiliğinden uyum sağlar */
    --muted:   var(--ox-text-2);
    --border:  var(--ox-border);
    /* NOT: --red BİLİNÇLİ olarak yeniden eşlenmedi. style.css'te ~50 yerde
       `background: var(--red); color:#fff` var; açık yeşil üstüne beyaz yazı
       kontrastı bozar. Eski bileşenler tek tek taşınana kadar kırmızı yalnızca
       eski bileşenlerde kalır; yeni bileşenler --ox-* token'larını kullanır. */

    --ox-chrome-grad: linear-gradient(160deg, #fdfdfe 0%, #aeb4bd 38%, #5b6169 52%, #d9dde3 100%);
    --ox-focus: 0 0 0 2px var(--ox-bg), 0 0 0 4px var(--ox-accent);

    --ox-font-display: 'Archivo Black', 'Inter', system-ui, sans-serif;
    --ox-sidebar-w: 248px;
}

/* Odak her yerde görünür (klavye erişilebilirliği) */
:focus-visible { outline: none; box-shadow: var(--ox-focus); border-radius: 8px; }
:where(a, button, [role="button"], input, select, textarea):focus-visible { box-shadow: var(--ox-focus); }

/* Başlık yazı stili — yalnızca büyük başlıklarda, Türkçe karakter güvenli */
.ox-display {
    font-family: var(--ox-font-display);
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.05;
    color: var(--ox-text);
}
.ox-chrome-text {           /* sadece ≥28px başlıkta kullan */
    background: var(--ox-chrome-grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* ==========================================================================
   MASAÜSTÜ KENAR ÇUBUĞU — gruplu, her zaman etiketli, daha geniş
   ========================================================================== */
@media (min-width: 769px) {
    :root { --sidebar-w-expanded: var(--ox-sidebar-w); }

    /* Varsayılan GENİŞ (header.php ön-boyama betiği, kayıtlı tercih '0'
       değilse html.sidebar-expanded ekler): ikon tek başına anlam taşımıyor. */

    .sidebar { background: var(--ox-surface); border-right: 1px solid var(--ox-border); }

    .sidebar-group {
        display: flex; flex-direction: column; gap: 2px;
        padding: 6px 0 4px;
    }
    .sidebar-group + .sidebar-group { border-top: 1px solid var(--hairline-soft); }
    .sidebar-group-title {
        padding: 6px 10px 4px;
        font-size: 11px; font-weight: 700; letter-spacing: .09em;
        text-transform: uppercase; color: var(--ox-text-2);
        white-space: nowrap; overflow: hidden;
    }
    html:not(.sidebar-expanded) .sidebar-group-title { visibility: hidden; height: 6px; padding: 0; }

    .sidebar-link { height: 40px; color: var(--ox-text-2); }
    .sidebar-label { font-size: 15px; font-weight: 600; }
    .sidebar-link:hover { background: var(--ox-surface-hi); color: var(--ox-text); }
    .sidebar-link.active {
        background: var(--ox-accent); color: var(--ox-accent-ink); font-weight: 800;
    }
    .sidebar-link.active::before { display: none; }
    .sidebar-link.active .sidebar-icon svg { stroke-width: 2.4; }

    /* "Ürün Gönder" — keşfedilebilir ikincil eylem, birincil renk değil */
    .sidebar-link.is-cta {
        border: 1px dashed var(--ox-border); color: var(--ox-text);
    }
    .sidebar-link.is-cta:hover { border-color: var(--ox-accent); }

    /* Seyrek kullanılan öğeler: yumuşatılmış */
    .sidebar-link.is-minor { height: 36px; }
    .sidebar-top { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
    .sidebar-search { margin: 0 0 2px; }
    .sidebar-link.is-minor .sidebar-label { font-size: 14px; font-weight: 500; }

    .sidebar-badge { background: var(--ox-danger); }

    /* Profil/ayarlar/çıkış her zaman görünür kalsın (uzun menüde kaydırma ile kaybolmasın) */
    .sidebar-bottom {
        position: sticky; bottom: 0; background: var(--ox-surface);
        border-top: 1px solid var(--ox-border);
    }
    /* Daralt/genişlet düğmesi kenar çubuğunun içinde: overflow:hidden ile kırpılmasın */
    .sidebar-toggle { right: 10px; top: 18px; }
    .sidebar-top .sidebar-logo { padding-right: 40px; }
}

/* ==========================================================================
   MOBİL — dairesel menü (Oxus Çarkı)
   Alt çubuk ve "Menü" çekmecesi aynen kalır: çark ek bir yoldur, tek yol değil.
   Açma yalnızca görünür "Menü" düğmesine dokunuşla olur (kaydırma/kenar
   jesti yok, yani yanlışlıkla açılmaz). Kapatma: merkez düğme, dış alan, Esc.
   Hareket: prefers-reduced-motion'da animasyonsuz.
   ========================================================================== */
.oxus-wheel, .oxus-wheel-fab { display: none; }

@media (max-width: 768px) {
    .oxus-wheel-fab {
        display: flex; position: fixed; z-index: 95;
        right: 14px; bottom: calc(var(--bottomnav-h, 56px) + 14px + env(safe-area-inset-bottom, 0px));
        width: 56px; height: 56px; border-radius: 50%;
        align-items: center; justify-content: center; flex-direction: column; gap: 1px;
        background: var(--ox-chrome-grad); color: #0a0a0b;
        border: 1px solid rgba(255,255,255,.5);
        box-shadow: 0 6px 20px rgba(0,0,0,.55);
        font: 800 9px/1 var(--ox-font-display, Inter); letter-spacing: .06em; text-transform: uppercase;
        cursor: pointer; padding: 0;
    }
    .oxus-wheel-fab img { width: 24px; height: 24px; border-radius: 50%; display: block; }
    body.wheel-open .oxus-wheel-fab { visibility: hidden; }

    .oxus-wheel {
        position: fixed; inset: 0; z-index: 100;
        display: none; align-items: center; justify-content: center;
        background: rgba(4,4,5,.88);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .oxus-wheel.open { display: flex; }
    .oxus-wheel-ring {
        position: relative; width: min(86vw, 340px); aspect-ratio: 1;
    }
    .oxus-wheel-hub {
        position: absolute; left: 50%; top: 50%; width: 84px; height: 84px;
        transform: translate(-50%,-50%); border-radius: 50%;
        background: var(--ox-surface-hi); border: 2px solid var(--ox-chrome-2);
        color: var(--ox-text); display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 2px;
        font-size: 12px; font-weight: 800; cursor: pointer; padding: 0;
    }
    .oxus-wheel-hub img { width: 30px; height: 30px; border-radius: 50%; }
    .oxus-wheel-item {
        position: absolute; left: 50%; top: 50%;
        width: 72px; margin: -36px 0 0 -36px;
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        color: var(--ox-text); text-decoration: none; text-align: center;
        transform: translate(var(--x), var(--y));
        opacity: 0; transition: opacity 160ms ease, transform 220ms var(--ease-out, ease);
    }
    .oxus-wheel.show .oxus-wheel-item { opacity: 1; }
    .oxus-wheel-item:hover { text-decoration: none; }
    .oxus-wheel-disc {
        width: 56px; height: 56px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--ox-surface-hi); border: 1px solid var(--ox-border);
        position: relative;
    }
    .oxus-wheel-disc svg { width: 24px; height: 24px; }
    .oxus-wheel-item.active .oxus-wheel-disc {
        background: var(--ox-accent); color: var(--ox-accent-ink); border-color: var(--ox-accent);
    }
    .oxus-wheel-item .oxus-wheel-text { font-size: 12px; font-weight: 700; line-height: 1.15; }
    .oxus-wheel-item .oxus-wheel-dot {
        position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
        border-radius: 999px; background: var(--ox-danger); color: #fff;
        font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    }
    .oxus-wheel-more {
        position: absolute; left: 0; right: 0;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        text-align: center; font-size: 14px;
    }
    .oxus-wheel-more button {
        width: auto; background: none; border: 1px solid var(--ox-border); color: var(--ox-text);
        border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
    }
}

/* Hareket hassasiyeti: animasyon yok, durum değişimi anında */
@media (prefers-reduced-motion: reduce) {
    .oxus-wheel-item, .sidebar, body.has-sidebar, .sidebar-link { transition: none !important; }
}

/* ==========================================================================
   Yorum yazma alanı (post.php) — etiket, sayaç, durumlar
   ========================================================================== */
.oxus-composer { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.oxus-composer-label { font-size: 13px; font-weight: 700; color: var(--ox-text); }
.oxus-composer textarea {
    width: 100%; min-height: 84px; resize: vertical; box-sizing: border-box;
    background: var(--ox-surface-hi); color: var(--ox-text);
    border: 1px solid var(--ox-border); border-radius: 12px; padding: 12px 14px;
    font-family: inherit; font-size: 16px; line-height: 1.45; /* 16px: iOS odakta yakınlaştırmaz, klavye açıkken de rahat */
}
.oxus-composer textarea::placeholder { color: var(--ox-text-2); }
.oxus-composer textarea:focus { outline: none; box-shadow: var(--ox-focus); }
.oxus-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oxus-composer-count { font-size: 12px; color: var(--ox-text-2); font-variant-numeric: tabular-nums; }
.oxus-composer-count.is-near { color: var(--ox-warn); font-weight: 700; }
.oxus-composer button[type=submit] {
    background: var(--ox-accent); color: var(--ox-accent-ink); border: 0;
    border-radius: 999px; padding: 10px 20px; font-weight: 800; font-size: 14px; cursor: pointer; width: auto;
}
.oxus-composer button[type=submit]:disabled { background: var(--ox-chrome-3); color: var(--ox-text-2); cursor: not-allowed; }
@media (max-width: 768px) {
    /* Klavye açıkken alan görünür kalsın: alt çubuğun/çarkın altında kalmasın */
    .oxus-composer { scroll-margin-bottom: calc(var(--bottomnav-h, 56px) + 80px); }
}

/* Bildirim merkezi: sil / temizle */
.notif-delete-form { margin: 0; flex-shrink: 0; }
.notif-delete-btn {
    width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--ox-border); color: var(--ox-text-2); cursor: pointer; padding: 0;
}
.notif-delete-btn svg { width: 14px; height: 14px; }
.notif-delete-btn:hover { color: var(--ox-danger); border-color: var(--ox-danger); }
.notif-delete-btn:disabled { opacity: .5; cursor: progress; }
.notif-page-head { flex-wrap: wrap; gap: 8px; }
.notif-clear-read-btn { background: transparent; border: 1px solid var(--ox-border); color: var(--ox-text); }
.notif-row.unread { border-color: var(--ox-accent); background: rgba(182,255,60,.05); }