/* ============================================================
   Nexasin by TB Creative — theme.css
   Paylaşılan tema: değişkenler, taban, butonlar, ortak bileşenler
   ============================================================ */
:root{
  /* 1 · Primitives — ham palet (marka rengi buradan değişir) */
  --blue-600:#0C48E2; --blue-500:#2F8FFF; --blue-400:#5B8CFF; --blue-300:#7AA2FF;
  --brand-rgb:12,72,226; --brand-2-rgb:47,143,255;
  --neutral-950:#07080D; --neutral-900:#0A0C14;
  --neutral-100:#F2F3F8; --neutral-400:#9AA0B6; --neutral-500:#666C82;
  --amber-500:#F59E0B; --gray-500:#6B7280; --sky-400:#38BDF8;
  --green-400:#34D399; --yellow-400:#FBBF24; --rose-400:#FB7185;

  /* 2 · Semantic — rol */
  --color-primary:var(--blue-600); --color-primary-2:var(--blue-500);
  --color-bg:var(--neutral-950); --color-bg-2:var(--neutral-900);
  --color-text:var(--neutral-100); --color-muted:var(--neutral-400); --color-faint:var(--neutral-500);

  --glass:rgba(255,255,255,.04); --glass2:rgba(255,255,255,.06); --glass3:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);

  --gradient-primary:linear-gradient(135deg,var(--color-primary),var(--color-primary-2));
  --gradient-soft:linear-gradient(135deg,rgba(var(--brand-rgb),.22),rgba(var(--brand-2-rgb),.18));
  --shadow-brand:0 12px 28px rgba(var(--brand-rgb),.35);
  --shadow-brand-sm:0 6px 16px rgba(var(--brand-rgb),.30);
  --focus-ring:0 0 0 3px rgba(var(--brand-rgb),.20);

  --main:var(--amber-500); --pt:var(--gray-500); --swch:var(--sky-400);
  --ok:var(--green-400); --warn:var(--yellow-400); --err:var(--rose-400);

  --r:18px; --shadow:0 18px 50px rgba(0,0,0,.5);

  /* Legacy alias — eski isimler yeni token'lara bağlı */
  --bg:var(--color-bg); --bg2:var(--color-bg-2);
  --text:var(--color-text); --muted:var(--color-muted); --faint:var(--color-faint);
  --vio:var(--color-primary); --vio2:var(--blue-500); --blue:var(--color-primary-2); --blue2:var(--blue-300);
  --grad:var(--gradient-primary); --grad-soft:var(--gradient-soft);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 500px at 78% -8%,rgba(var(--brand-2-rgb),.20),transparent 60%),
    radial-gradient(800px 520px at 12% 8%,rgba(var(--brand-rgb),.20),transparent 55%),
    radial-gradient(700px 600px at 60% 110%,rgba(var(--brand-rgb),.12),transparent 60%),
    var(--bg)}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,150,180,.22);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(140,150,180,.4);background-clip:padding-box}
*{scrollbar-width:thin;scrollbar-color:rgba(140,150,180,.25) transparent}

/* ============================================================
   AYDINLIK TEMA — data-theme="light" (token override)
   ============================================================ */
:root[data-theme="light"]{
  --color-bg:#eaeef6; --color-bg-2:#e0e5ef;
  --color-text:#161a26; --color-muted:#4c5468; --color-faint:#828aa0;
  --glass:rgba(255,255,255,.7); --glass2:rgba(255,255,255,.85); --glass3:rgba(0,0,0,.06);
  --line:rgba(20,26,45,.10); --line2:rgba(20,26,45,.16);
  --shadow:0 18px 50px rgba(90,100,150,.18);
}
:root[data-theme="light"] body{background:
  radial-gradient(900px 500px at 78% -8%,rgba(var(--brand-2-rgb),.10),transparent 60%),
  radial-gradient(800px 520px at 12% 8%,rgba(var(--brand-rgb),.09),transparent 55%),
  var(--bg)}
button{font:inherit;cursor:pointer}
input{font:inherit}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- buttons ---- */
.btn-grad{width:100%;background:var(--grad);color:#fff;border:none;padding:14px;border-radius:12px;
  font-weight:700;font-size:15px;box-shadow:var(--shadow-brand);transition:.15s}
.btn-grad:hover{filter:brightness(1.08)}
button.btn{border:1px solid var(--line2);background:var(--glass2);color:var(--text);padding:11px 20px;border-radius:12px;font-weight:600;transition:.14s}
button.btn:hover{border-color:var(--vio2);color:var(--vio2)}
button.primary{background:var(--grad);color:#fff;border:none;box-shadow:var(--shadow-brand)}
button.primary:hover{filter:brightness(1.08);color:#fff}
button.ghost{background:transparent}
button:disabled{opacity:.4;cursor:not-allowed;filter:none;box-shadow:none}

/* ---- form fields ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:1.1px;font-weight:700;margin-bottom:7px}
.field input{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line2);color:var(--text);
  padding:13px 14px;border-radius:12px;font-size:14.5px;outline:none;transition:.15s}
.field input::placeholder{color:#5a6075}
.field input:focus{border-color:var(--vio2);box-shadow:var(--focus-ring)}
.field input.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;text-align:center;text-transform:uppercase}
.field input.err{border-color:var(--err);box-shadow:0 0 0 3px rgba(251,113,133,.18)}

/* password show/hide */
.field.pw{position:relative}
.field.pw .toggle{position:absolute;right:10px;top:32px;background:none;border:none;color:var(--faint);font-size:16px;padding:4px}
.field.pw .toggle:hover{color:var(--vio2)}

/* ---- checkbox ---- */
.checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--muted);user-select:none}
.checkbox input{display:none}
.checkbox .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line2);background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:.13s;font-size:11px;color:#fff}
.checkbox input:checked + .box{background:var(--grad);border-color:transparent}
.checkbox input:checked + .box::after{content:"✓"}

/* ---- language switch ---- */
.lang-switch{display:flex;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lang-opt{padding:6px 11px;font-size:12px;font-weight:700;color:var(--muted);background:transparent;border:none;cursor:pointer}
.lang-opt.on{background:var(--grad);color:#fff}
.lang-mini{display:flex;background:var(--glass);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lang-mini button{padding:6px 9px;font-size:11.5px;font-weight:700;color:var(--muted);background:transparent;border:none;cursor:pointer}
.lang-mini button.on{background:var(--grad);color:#fff}

/* ---- Sidebar navigasyon (ortak · kullanıcı + admin panel — tek sistem) ---- */
.side-logo{padding:0 6px 26px;display:flex;align-items:center;gap:10px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:7px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;text-align:left;text-decoration:none;line-height:1}
.nav-item .nav-ico{width:34px;height:34px;border-radius:10px;background:var(--glass);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--faint);transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.nav-item .nav-ico svg{width:17px;height:17px;display:block;flex-shrink:0}
.nav-item>span:last-child{flex:1;min-width:0;line-height:1.5;padding-bottom:1px}
.nav-item .badge{margin-left:auto;font-size:11px;background:var(--glass2);border:1px solid var(--line);color:var(--muted);min-width:22px;height:20px;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0}
.nav-item:hover{color:var(--text);background:var(--glass)}
.nav-item:hover .nav-ico{color:var(--text);border-color:var(--line2)}
.nav-item.active{color:var(--text);font-weight:700;background:var(--grad-soft)}
.nav-item.active .nav-ico{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(var(--brand-rgb),.4)}
.nav-item.locked{opacity:.4;cursor:not-allowed}
.nav-logout{margin-top:2px}
.nav-logout:hover{color:var(--err)}
.nav-logout:hover .nav-ico{color:var(--err);border-color:rgba(251,113,133,.32)}
:root[data-theme="light"] .nav-item:hover{background:rgba(20,26,45,.045)}
:root[data-theme="light"] .nav-item .nav-ico{background:rgba(20,26,45,.035);border-color:rgba(20,26,45,.08)}
:root[data-theme="light"] .nav-item.active{color:#161a26}

/* ---- Hesap Ayarları sayfası (ortak · kullanıcı + admin) ---- */
.acct-grid{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
.acct-side{padding:26px 20px;text-align:center}
.acct-av{width:76px;height:76px;border-radius:50%;background:var(--grad);color:#fff;font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;text-transform:uppercase}
.acct-dispname{font-size:17px;font-weight:800}
.acct-dispmail{font-size:12px;color:var(--faint);margin-top:3px;word-break:break-all}
.acct-meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;text-align:left}
.acct-meta-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.acct-meta-row b{color:var(--text);font-weight:700}
.acct-logout{margin-top:18px;width:100%;color:var(--err);border-color:rgba(251,113,133,.22);background:rgba(251,113,133,.08)}
.acct-logout:hover{background:rgba(251,113,133,.16);border-color:rgba(251,113,133,.35)}
.acct-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.acct-form{padding:18px}
.acct-form .field{margin-bottom:12px}
.acct-form .field:last-of-type{margin-bottom:0}
.acct-btn{margin-top:6px}
@media(max-width:760px){.acct-grid{grid-template-columns:1fr}}
:root[data-theme="light"] .acct-meta{border-color:rgba(20,26,45,.08)}

/* ---- Topbar dropdown: Hesap Ayarları girişi (ortak) ---- */
.um-acct{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--glass);border:1px solid var(--line2);color:var(--muted);border-radius:12px;padding:10px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .13s;margin-bottom:8px}
.um-acct:hover{color:var(--text);border-color:var(--line2)}
:root[data-theme="light"] .um-acct{background:rgba(20,26,45,.04);border-color:rgba(20,26,45,.1);color:#515869}
:root[data-theme="light"] .um-acct:hover{color:#161a26;border-color:rgba(20,26,45,.18)}

/* ---- misc ---- */
.pill{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--vio2);background:var(--grad-soft);border:1px solid var(--line2);padding:5px 11px;border-radius:20px}
.msg{margin-top:13px;font-size:13px;min-height:18px;text-align:center}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--err)}
.hide{display:none!important}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--grad);color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center}

/* ---- Marka logosu (ortak · inline SVG · draw animasyonu) ---- */
.tb-logo{height:30px;width:auto;display:block;color:#fff;flex-shrink:0}
:root[data-theme="light"] .tb-logo{color:var(--color-primary)}
.tb-logo .tbl-mark{stroke:currentColor;stroke-width:8;fill:currentColor;fill-opacity:0;stroke-dasharray:4200;stroke-dashoffset:4200;
  animation:tbDraw 1.8s ease-out forwards,tbFill .7s ease .5s forwards}
@keyframes tbDraw{to{stroke-dashoffset:0}}
@keyframes tbFill{to{fill-opacity:1}}
.auth-brand .tb-logo,#adminLogin .brand .tb-logo{height:36px}

/* ---- AYDINLIK TEMA · ortak form / auth düzeltmeleri ---- */
:root[data-theme="light"] .field input{background:rgba(255,255,255,.92);border-color:rgba(20,26,45,.14);color:#161a26}
:root[data-theme="light"] .field input::placeholder{color:#9aa0b6}
:root[data-theme="light"] .auth-tabs{background:rgba(20,26,45,.06);border-color:rgba(20,26,45,.1)}
:root[data-theme="light"] .auth-tabs button{color:#515869}
:root[data-theme="light"] .auth-tabs button.on{color:#fff}
:root[data-theme="light"] .checkbox .box{background:#fff;border-color:rgba(20,26,45,.22)}
:root[data-theme="light"] select{background:rgba(255,255,255,.92);color:#161a26;border:1px solid rgba(20,26,45,.14);border-radius:9px}
:root[data-theme="light"] button.btn{background:rgba(255,255,255,.85);border-color:rgba(20,26,45,.14);color:#161a26}
:root[data-theme="light"] .lang-switch{background:rgba(20,26,45,.06);border-color:rgba(20,26,45,.1)}