/* ============================================================ JuckBox — shared theme Readark / AnnealX design language: dark + teal/amber, Geist Fontlar @import ile DEĞİL, her sayfanın 'inde ile yüklenir (Safari'de bir stylesheet'in en başındaki çapraz-köken @import kırılgandır; sistem fontu yedeği zaten var). ============================================================ */ :root { /* Backgrounds */ --bg:#0A0E13; --bg-2:#11171F; --card:#161E28; --card-2:#1C2530; --panel-3:#232D3A; /* Hairlines / borders */ --border:rgba(255,255,255,0.06); --border-strong:rgba(255,255,255,0.12); --border-teal:rgba(0,180,200,0.25); /* Text */ --text:#E2E8EE; --txt-2:#B4BFCA; --muted:#7A8896; --txt-faint:#4A5666; /* Accents — straight from the firmware palette */ --accent:#00B4C8; --accent-deep:#00788B; --teal-glow:rgba(0,180,200,0.18); --accent2:#E8A83C; --success:#3CA656; --ok:#3CA656; --danger:#D04848; /* Type + layout */ --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; --radius:14px; --radius-sm:8px; } /* subtle printed-circuit glow behind everything */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(1200px 600px at 80% -10%, rgba(0,180,200,0.06), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(232,168,60,0.04), transparent 60%); } body > *{ position:relative; z-index:1; } ::selection{ background:var(--accent); color:var(--bg); } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:var(--card-2); border-radius:6px; } ::-webkit-scrollbar-track{ background:transparent; } input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--teal-glow); } /* ── Açılır menüler (bölge filtresi, kayıt adresi) — tema uyumu ── Sayfalar kendi input/select kuralını verebilir; bu, kural vermeyen yerlerde (master paneli) koyu kutu + açık yazı sağlar. Yerel arrow bilinçli korunur (appearance:none, çapraz-sayfa `background` kısayoluyla çakışıp oku kaybettirebilir). Açılan liste rengi option ile ayarlanır. */ select{ background-color:var(--bg-2); border:1px solid var(--border-strong); color:var(--text); border-radius:var(--radius-sm); padding:9px 11px; font-size:14px; font-family:inherit; cursor:pointer; } select:disabled{ opacity:.5; cursor:not-allowed; } option{ background:var(--card); color:var(--text); } /* ── Brand bar (Readark logo + product + page chip) ── */ .brandbar{ border-bottom:1px solid var(--border); margin-bottom:20px; } .brandbar__in{ display:flex; align-items:center; gap:12px; padding:14px 2px; } .brandbar__logo{ height:22px; width:auto; opacity:0.92; } .brandbar__sep{ width:1px; height:22px; background:var(--border-strong); } .brandbar__product{ font-weight:600; letter-spacing:-0.02em; font-size:18px; color:var(--text); } .brandbar__page{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-left:auto; } /* ── helpers ── */ .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); opacity:0.7; } .mono{ font-family:var(--font-mono); font-feature-settings:"tnum","zero"; } /* ── Panel geçişi (Hesap Yönetim ↔ Kasa) ── */ .panelswitch{ margin-left:auto; display:inline-flex; gap:4px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; padding:4px; } .panelswitch a{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); padding:6px 12px; border-radius:7px; transition:background .15s, color .15s; white-space:nowrap; } .panelswitch a:hover{ color:var(--text); } .panelswitch a.active{ background:var(--accent); color:#001014; font-weight:600; } /* ── Çıkış butonu (her panelde brandbar'ın en sağında sabit, kırmızı) ── Konumlandırma: brandbar__in zaten gap:12px'li flex; panelswitch/brandbar__page kendi margin-left:auto'suyla sağa yaslanıyor, logoutbtn onun ardından akışta kalır. */ .logoutbtn{ display:inline-flex; align-items:center; gap:6px; background:rgba(208,72,72,.12); border:1px solid rgba(208,72,72,.5); color:var(--danger); border-radius:8px; padding:7px 14px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:background .15s, color .15s; white-space:nowrap; } .logoutbtn:hover{ background:var(--danger); color:#fff; } /* Geniş tablolar dar ekranda kart dışına taşmasın: sarmalayıcı yatay kaydırır. */ .tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .tscroll table{ white-space:nowrap; } /* ── Dar ekran (yalnız .brandbar--stack işaretli paneller: hesap + kasa) ── Geçiş + çıkış butonları logo/yazıyla aynı satıra sığmaz → alt satıra iner; JuckBox yazısı sağa yaslanır ki üst satırın sağı boş kalmasın. Müşteri sayfasının header'ı işaretsiz olduğundan ETKİLENMEZ (kullanıcı direktifi). */ @media (max-width:640px){ .brandbar--stack .brandbar__in{ flex-wrap:wrap; row-gap:18px; } .brandbar--stack .brandbar__product{ margin-left:auto; } .brandbar--stack .panelswitch{ margin-left:0; flex:1 1 calc(100% - 120px); } /* üst satıra sığmaz → iner; yanında çıkışa yer kalır */ .brandbar--stack .panelswitch a{ flex:1 1 auto; text-align:center; } .brandbar--stack .logoutbtn{ margin-left:auto; } }