/* Gece altını. Onaylı yönün jetonları bütün ekranlarda ortak kullanılır. */
:root {
  color-scheme:dark;
  --zemin:#0a0d14; --yuzey:#10141d; --yuzey-2:#161b26; --yuzey-3:#1c2230;
  --murekkep:#ecebe6; --ikincil:#a9aebb; --soluk:#8a90a0;
  --cizgi:#1f2533; --cizgi-2:#2b3242; --izgara:#1a2030;
  --vurgu:#c9a35d; --vurgu-acik:#dcbd80; --vurgu-zayif:rgb(201 163 93/.12); --vurgu-yazi:#15110a;
  --gumus:#b4bac7; --iyi:#6cc39a; --kritik:#e58a78; --kritik-zayif:rgb(229 138 120/.12);
  --r-1:6px; --r-2:10px; --r-3:14px;
  --sure-hizli:140ms; --sure:240ms; --egri:cubic-bezier(.2,.7,.2,1);
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Inter Tight",system-ui,-apple-system,sans-serif;
  --bg:var(--zemin); --card:var(--yuzey); --line:var(--cizgi); --text:var(--murekkep);
  --muted:var(--ikincil); --gold:var(--vurgu); --blue:var(--gumus); --good:var(--iyi); --bad:var(--kritik);
  --sidebar-bg:#0c1018; --code-bg:#07090e; --shadow:0 8px 24px rgb(0 0 0/.25);
}
:root[data-tema="acik"] {
  color-scheme:light;
  --zemin:#f5f3ee; --yuzey:#fffefa; --yuzey-2:#eeece5; --yuzey-3:#e4e1d8;
  --murekkep:#242722; --ikincil:#535950; --soluk:#60645c;
  --cizgi:#dedbd2; --cizgi-2:#cac6bb; --izgara:#e7e3da;
  --vurgu:#7d5d25; --vurgu-acik:#71511b; --vurgu-zayif:rgb(128 96 38/.09); --vurgu-yazi:#fffefa;
  --gumus:#626b78; --iyi:#22704b; --kritik:#a93d2e; --kritik-zayif:rgb(169 61 46/.08);
  --sidebar-bg:#f0eee7; --code-bg:#eeece5; --shadow:0 8px 24px rgb(40 35 20/.08);
}
* { box-sizing:border-box }
html { background:var(--bg); scroll-padding-bottom:90px }
body { margin:0; color:var(--text); background:var(--bg); font:400 14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv11" }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit; touch-action:manipulation }
button { cursor:pointer; border:1px solid var(--cizgi-2); border-radius:var(--r-2); padding:9px 14px; min-height:42px; background:var(--card); font-size:13px; font-weight:500; transition:background var(--sure-hizli),border-color var(--sure-hizli) }
button:hover { border-color:var(--soluk); background:var(--yuzey-2) }
button:active { transform:translateY(1px) }
button:disabled { opacity:.45; cursor:not-allowed }
button.primary { background:var(--gold); border-color:var(--gold); color:var(--vurgu-yazi) }
button.primary:hover { background:var(--vurgu-acik) }
button.danger { background:var(--bad); color:var(--bg); border-color:var(--bad) }
.quiet { border-color:transparent; background:transparent; color:var(--soluk) }
.danger-text,.error { color:var(--bad) }
.error { line-height:1.7; overflow-wrap:anywhere; padding:14px 18px; border:1px solid var(--bad); border-radius:var(--r-2); background:var(--kritik-zayif) }
.error:empty { display:none }
.muted { color:var(--muted); line-height:1.7 }
.wide { width:100% }
label { display:block; font-weight:500; font-size:12.5px; color:var(--ikincil) }
input,select,textarea { display:block; width:100%; min-width:0; margin-top:7px; padding:9px 12px; min-height:42px; border:1px solid var(--cizgi-2); border-radius:8px; background:var(--yuzey-2); color:var(--text) }
textarea { resize:vertical }
input::placeholder { color:var(--soluk) }
input:hover,select:hover,textarea:hover { border-color:var(--soluk) }
input[type=checkbox] { accent-color:var(--gold) }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px }
h1,h2,h3,p { margin-top:0 }
h1 { font:600 42px/1.05 var(--serif); letter-spacing:-.01em; margin-bottom:0; font-variant-numeric:lining-nums }
h2 { font:600 22px/1.15 var(--serif); margin-bottom:16px }
h3 { font:600 20px/1.2 var(--serif) }
.eyebrow { color:var(--gold); font-size:10.5px; font-weight:500; letter-spacing:.16em; margin-bottom:8px }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-3) }
svg.i { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none }
.brand { display:flex; align-items:center; gap:12px; font:600 19px/1.05 var(--serif) }
.brand-mark { display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold); border-radius:8px; width:34px; height:34px; font:600 15px/1 var(--serif); flex-shrink:0 }
.brand small { display:block; color:var(--gold); font:500 10px/1 var(--sans); letter-spacing:.22em; margin-top:5px }
.sidebar { position:fixed; inset:0 auto 0 0; width:248px; display:flex; flex-direction:column; padding:28px 18px 20px; background:linear-gradient(180deg,var(--sidebar-bg),var(--bg)); border-right:1px solid var(--line) }
.sidebar>.brand { margin:0 8px 28px }
.nav-label { font-size:10.5px; letter-spacing:.16em; color:var(--soluk); padding:0 12px; margin-bottom:10px }
.sidebar nav { display:flex; flex-direction:column; gap:2px }
.sidebar nav a { position:relative; display:flex; align-items:center; gap:12px; padding:10px 12px; min-height:42px; border-radius:var(--r-2); color:var(--ikincil) }
.sidebar nav a:hover { color:var(--text); background:var(--card) }
.sidebar nav a[aria-current=page] { color:var(--text); background:var(--yuzey-2) }
.sidebar nav a[aria-current=page]::before { content:""; position:absolute; left:-18px; top:10px; bottom:10px; width:2px; background:var(--gold); border-radius:2px }
.sidebar nav a[aria-current=page] svg { color:var(--gold) }
.sidebar-user { margin-top:auto; padding:16px 4px 0; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px }
.sidebar-user>div { min-width:0; flex:1 }
.sidebar-user strong { display:block; font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.plan { display:inline-flex; margin-top:4px; font-size:10px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:2px 8px }
.avatar { background:var(--yuzey-3); border:1px solid var(--cizgi-2); color:var(--gumus); display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; font-weight:600 }
.sidebar-user button { padding:8px; min-width:36px }
.workspace { margin-left:248px; padding:32px 40px 64px; min-width:0; max-width:1360px }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; color:var(--soluk); margin-bottom:10px }
.topbar>span { display:flex; flex-wrap:wrap; gap:8px }
#breadcrumb { color:var(--ikincil) }
.theme-toggle { margin:-10px 0 -10px; font-size:12px }
.page-heading .muted { margin:8px 0 0; font-size:14.5px; max-width:60ch }
.clock-rule { height:9px; margin:24px 0 28px; position:relative; background:repeating-linear-gradient(90deg,var(--cizgi-2) 0 1px,transparent 1px 60px) 0 0/100% 9px no-repeat,repeating-linear-gradient(90deg,var(--izgara) 0 1px,transparent 1px 12px) 0 4px/100% 5px no-repeat }
.clock-rule::after { content:""; position:absolute; left:0; top:0; width:1px; height:9px; background:var(--gold) }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.skeleton-card { padding:22px; min-width:0 }
.placeholder-lines { display:flex; flex-direction:column; gap:14px; padding:6px 0 }
.placeholder-lines span { height:10px; width:72%; display:block; border-radius:5px; background:var(--yuzey-3) }
.placeholder-lines span:first-child { width:42%; height:24px }
.placeholder-lines span:last-child { width:56%; height:6px }
.large-skeleton { margin:24px 0; min-height:260px }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.settings-card { padding:22px 24px; margin-bottom:20px }
.settings-card .section-head p { font-size:12.5px }
.team-form { display:grid; grid-template-columns:1fr 1.4fr .7fr auto; gap:14px; align-items:end; margin-top:24px }
.table-scroll { max-width:100%; margin-top:24px }
table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; table-layout:fixed }
th,td { border-bottom:1px solid var(--line); padding:12px 10px; overflow-wrap:anywhere; vertical-align:middle }
th { color:var(--soluk); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500 }
th:first-child { width:50% }
tr:last-child td { border-bottom:0 }
tbody tr:hover { background:var(--yuzey-2) }
td small { display:block; color:var(--soluk); margin-top:5px; font-size:12px }
td select { padding:8px; margin:0; max-width:130px }
td button { font-size:12px; padding:8px 12px }
.password-form { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:640px; margin-top:24px }
.password-form button { justify-self:start }
.password-form small { display:block; color:var(--soluk); font-weight:400; margin-top:8px }
dialog { width:min(460px,calc(100% - 32px)); border:1px solid var(--cizgi-2); border-radius:var(--r-3); background:var(--card); padding:28px; color:var(--text); box-shadow:var(--shadow) }
dialog::backdrop { background:rgb(0 0 0/.7) }
dialog p { font-size:13px; line-height:1.8; color:var(--muted); overflow-wrap:anywhere }
dialog output { display:block; background:var(--bg); padding:16px; border:1px solid var(--line); border-radius:8px; font-family:monospace; overflow-wrap:anywhere; user-select:all; font-size:17px; color:var(--gold) }
.dialog-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap }
.ui-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--yuzey-3); border:1px solid var(--cizgi-2); border-radius:var(--r-2); padding:12px 18px; font-size:13px; opacity:0; pointer-events:none; transition:opacity var(--sure),transform var(--sure) var(--egri); z-index:30; box-shadow:var(--shadow); max-width:calc(100% - 32px); width:max-content }
.ui-toast.visible { opacity:1; transform:translate(-50%,0) }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px 18px; background:var(--gold); color:var(--vurgu-yazi); z-index:50 }
.skip-link:focus { top:12px }
.mobile-header,.bottom-nav { display:none }
.login-body { min-height:100dvh; display:grid; place-items:center; padding:40px 20px; background:radial-gradient(ellipse at 50% 0,var(--vurgu-zayif),transparent 60%),var(--bg) }
.login-wrap { width:min(100%,460px) }
.login-wrap>.brand { justify-content:center; margin-bottom:36px }
.login-card { padding:36px }
.login-card h1 { font-size:38px }
.login-card>.muted { font-size:13.5px; margin:12px 0 0 }
.login-card .clock-rule { margin:24px 0 }
.login-card label { margin-top:20px }
.login-card button { margin-top:24px; display:flex; justify-content:space-between; align-items:center }
.login-foot { text-align:center; color:var(--soluk); font-size:11.5px; margin:16px 0 0 }
.login-theme { display:block; margin:20px auto 0 }
[hidden] { display:none!important }
@media(max-width:1200px) { .team-form { grid-template-columns:1fr 1fr } .team-form button { justify-self:start } }
@media(max-width:900px) {
  .sidebar { display:none }
  .mobile-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:10 }
  .mobile-header .quiet { font-size:12px; padding:8px }
  .bottom-nav { display:grid; position:fixed; left:0; right:0; bottom:0; grid-template-columns:repeat(5,minmax(0,1fr)); background:var(--sidebar-bg); border-top:1px solid var(--cizgi-2); z-index:20; padding-bottom:env(safe-area-inset-bottom) }
  .bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:9px 2px 8px; min-height:60px; font-size:10.5px; color:var(--soluk) }
  .bottom-nav a[aria-current=page] { color:var(--gold) }
  .bottom-nav a:hover { background:var(--yuzey-2) }
  .workspace { margin-left:0; padding:24px 20px 100px; max-width:none }
  .topbar .theme-toggle { display:none }
  .ui-toast { bottom:80px }
}
@media(max-width:640px) {
  h1 { font-size:34px }
  button,input,select,textarea { min-height:44px }
  button { min-width:44px }
  .two-column,.team-form,.password-form { grid-template-columns:1fr }
  .settings-card { padding:18px 16px }
  .password-form { gap:16px }
  th,td { padding:12px 5px; font-size:12px }
  th { font-size:10px }
  th:first-child { width:46% }
  td select { font-size:12px; padding:7px 3px }
  td button { padding:8px }
  .login-card { padding:28px 24px }
  .login-card h1 { font-size:34px }
  .metric-grid { grid-template-columns:1fr 1fr }
  .mobile-header .brand { font-size:18px }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important } }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap }
.heading-copy { min-width:0 }
#page-controls { min-width:0; max-width:100% }
#page-controls:empty { display:none }
@media(max-width:640px) { #page-controls { width:100% } .mobile-header .brand { min-height:44px } }