/* ==========================================================================
   Risk365 OSGB Panel — Design Tokens & Base Components
   Kaynak: osgb/OSGB-MIMARI.md §6.2/§6.3 — bireysel ürünle GÖRSEL SÜREKLİLİK.
   Tokenlar birebir korunur (canlı index.html:68'den). Light blok mimari
   dokümanda VERİLMEMİŞ — burada türetilen değerler DOĞRULANMAMIŞ VARSAYIMDIR
   (bkz. panel raporu). Emoji/gradyan/renkli glow/hover-translateY YASAK.
   ========================================================================== */

:root{
  color-scheme:dark;
  --bg:#0a0b0d;--bg2:#101318;--bg3:#171b21;--bg4:#20242c;
  --border:#22262e;--border2:#2f343d;
  --text:#eef0f3;--text2:#9aa1ad;--text3:#666d79;
  --org:#ff6b00;--org2:#cc5500;--og:rgba(255,107,0,.10);
  --warn:#e8a23d;--red:#e5484d;--grn:#2bb673;--blu:#4c8ef7;
  --r:8px;--rs:6px;--rl:12px;
  --font:'Inter',system-ui,sans-serif;--syne:'Syne',sans-serif;

  /* Aşağıdakiler mimari dokümanda YOK — panel iç ihtiyacı için eklenmiş
     yardımcı tokenlar (gölge/kaplama/süre). Renk paletini bozmaz. */
  --shadow-modal:0 20px 60px rgba(0,0,0,.45);
  --overlay:rgba(0,0,0,.55);
  --dur:160ms;
}

/* DOĞRULANMAMIŞ VARSAYIM: light tema tam paleti mimari dokümanda verilmedi
   (yalnız dark blok kaynak gösterildi). Aşağıdaki değerler dark paletle aynı
   yapıyı (bg/bg2/bg3/bg4 kademesi, aynı radius/font) koruyarak türetildi.
   Mimar gerçek canlı light tema değerleriyle değiştirebilir. */
[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f7f8;--bg2:#ffffff;--bg3:#f0f1f3;--bg4:#e7e9ec;
  --border:#e2e4e8;--border2:#d3d6db;
  --text:#14161a;--text2:#5b6270;--text3:#8b909b;
  --org:#ff6b00;--org2:#cc5500;--og:rgba(255,107,0,.08);
  --warn:#b9790a;--red:#c93a3f;--grn:#1f9d5c;--blu:#3568c9;
  --r:8px;--rs:6px;--rl:12px;
  --font:'Inter',system-ui,sans-serif;--syne:'Syne',sans-serif;
  --shadow-modal:0 20px 60px rgba(20,22,26,.12);
  --overlay:rgba(20,22,26,.45);
  --dur:160ms;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; }
h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
input,select,textarea,button{ font-family:var(--font); }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------------------------------------------------------- typography */
/* Syne YALNIZ marka/başlık wordmark'ı için — CLAUDE.md deseni
   (.load-brand/.land-title/.sb-brand). Genel başlıklar Inter 700/800. */
.brand{
  font-family:var(--syne);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
}
.brand .brand-accent{ color:var(--org); }

h1,h2,h3,.title-lg,.title-md{ font-family:var(--font); font-weight:800; color:var(--text); letter-spacing:-.01em; }
.title-lg{ font-size:22px; }
.title-md{ font-size:16px; font-weight:700; }
.text-muted{ color:var(--text2); }
.text-faint{ color:var(--text3); }
.text-sm{ font-size:12.5px; }
.num{ font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------- layout */
.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-4{ gap:4px; } .gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.hidden{ display:none !important; }
.grow{ flex:1 1 auto; }

/* ----------------------------------------------------------- view root */
.view{ display:none; }
.view.active{ display:flex; }
/* Admin kabuğu kendi iç flex düzenini (.app-shell) zaten kuruyor —
   burada düz blok yeterli (ID özgüllüğü .view.active'i bilerek ezer). */
#view-admin.active{ display:block; }
#app{ min-height:100vh; background:var(--bg); }

/* ------------------------------------------------------------- button */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 16px; border-radius:var(--rs);
  border:1px solid transparent; background-color:var(--bg4); color:var(--text);
  font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--org); outline-offset:2px; }

.btn-primary{ background-color:var(--org); color:#fff; }
.btn-primary:hover:not(:disabled){ background-color:var(--org2); }

.btn-secondary{ background-color:var(--bg3); border-color:var(--border2); color:var(--text); }
.btn-secondary:hover:not(:disabled){ background-color:var(--bg4); }

.btn-ghost{ background-color:transparent; color:var(--text2); }
.btn-ghost:hover:not(:disabled){ background-color:var(--bg3); color:var(--text); }

.btn-danger{ background-color:var(--red); color:#fff; }
.btn-danger:hover:not(:disabled){ background-color:#c93e42; }

.btn-sm{ height:32px; padding:0 12px; font-size:12.5px; }
.btn-block{ width:100%; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--rs); border:1px solid transparent;
  background-color:transparent; color:var(--text2); cursor:pointer;
  transition:background-color var(--dur) ease, color var(--dur) ease;
}
.icon-btn:hover{ background-color:var(--bg3); color:var(--text); }
.icon-btn:focus-visible{ outline:2px solid var(--org); outline-offset:2px; }

/* --------------------------------------------------------------- form */
.field{ display:flex; flex-direction:column; gap:6px; }
.label{ font-size:12.5px; font-weight:600; color:var(--text2); }

.input,.select,.textarea{
  height:40px; width:100%; padding:0 12px; border-radius:var(--rs);
  border:1px solid var(--border2); background-color:var(--bg3); color:var(--text);
  font-size:14px; transition:border-color var(--dur) ease, background-color var(--dur) ease;
}
.textarea{ height:auto; padding:10px 12px; resize:vertical; min-height:80px; }
.input::placeholder,.textarea::placeholder{ color:var(--text3); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--org); background-color:var(--bg2); }

.input-group{ position:relative; display:flex; align-items:center; }
.input-group .input{ padding-right:42px; }
.input-group .input-icon-btn{
  position:absolute; right:4px; width:32px; height:32px; border-radius:var(--rs);
  border:none; background-color:transparent; color:var(--text3); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.input-group .input-icon-btn:hover{ color:var(--text2); }

/* ⚠️ Select chevron tuzağı: inline stilde `background:` shorthand KULLANMA
   (global chevron image'ını ezer, ok kaybolur). Burada da bilerek
   background-color + background-image AYRI verildi. */
.select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:36px; cursor:pointer;
  background-color:var(--bg3);
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="light"] .select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.field-error{ color:var(--red); font-size:12.5px; min-height:16px; }

/* --------------------------------------------------------------- card */
.card{
  background-color:var(--bg2); border:1px solid var(--border); border-radius:var(--rl);
  padding:20px;
}

/* -------------------------------------------------------------- badge */
.badge{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px;
  border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;
  background-color:var(--bg4); color:var(--text2);
}
.badge-grn{ background-color:rgba(43,182,115,.14); color:var(--grn); }
.badge-red{ background-color:rgba(229,72,77,.14); color:var(--red); }
.badge-warn{ background-color:rgba(232,162,61,.14); color:var(--warn); }
.badge-blu{ background-color:rgba(76,142,247,.14); color:var(--blu); }
.badge-org{ background-color:var(--og); color:var(--org); }
.badge-neutral{ background-color:var(--bg4); color:var(--text2); }

/* -------------------------------------------------------------- table */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--rl); background-color:var(--bg2); }
table.table{ width:100%; border-collapse:collapse; min-width:560px; }
.table th{
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text3); padding:12px 16px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.table td{ padding:14px 16px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr{ transition:background-color var(--dur) ease; }
.table tbody tr:hover{ background-color:var(--bg3); }
.cell-primary{ color:var(--text); font-weight:600; }
.cell-muted{ color:var(--text2); }

/* ------------------------------------------------------------ skeleton
   Gaming/renkli glow'a düşmemek için hareketli gradyan DEĞİL, opaklık
   nabzı kullanılıyor (buton/kart/sidebar gradyan yasağıyla karışmasın). */
.skeleton{
  background-color:var(--bg4); border-radius:var(--rs);
  animation:rc-pulse 1.4s ease-in-out infinite;
}
@keyframes rc-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.skeleton-row td{ padding:14px 16px; border-bottom:1px solid var(--border); }
.skeleton-text{ height:13px; width:70%; }
.skeleton-text.short{ width:40%; }

/* --------------------------------------------------------- empty state */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:56px 24px; gap:14px;
}
.empty-state-icon{
  width:52px; height:52px; border-radius:50%; background-color:var(--bg3);
  color:var(--text3); display:flex; align-items:center; justify-content:center;
}
.empty-state-title{ font-size:15px; font-weight:700; color:var(--text); }
.empty-state-msg{ font-size:13px; color:var(--text2); max-width:360px; }

/* --------------------------------------------------------------- toast */
.toast-container{
  position:fixed; top:20px; right:20px; z-index:1000;
  display:flex; flex-direction:column; gap:10px; width:340px; max-width:calc(100vw - 40px);
}
.toast{
  display:flex; align-items:flex-start; gap:10px; padding:13px 14px;
  background-color:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--border2);
  border-radius:var(--rs); box-shadow:var(--shadow-modal);
  animation:rc-toast-in var(--dur) ease-out;
}
@keyframes rc-toast-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.toast-success{ border-left-color:var(--grn); }
.toast-error{ border-left-color:var(--red); }
.toast-warn{ border-left-color:var(--warn); }
.toast-info{ border-left-color:var(--blu); }
.toast-icon{ flex:0 0 auto; margin-top:1px; }
.toast-success .toast-icon{ color:var(--grn); }
.toast-error .toast-icon{ color:var(--red); }
.toast-warn .toast-icon{ color:var(--warn); }
.toast-info .toast-icon{ color:var(--blu); }
.toast-msg{ font-size:13px; color:var(--text); flex:1 1 auto; }
.toast-close{ flex:0 0 auto; background:none; border:none; color:var(--text3); cursor:pointer; padding:2px; }
.toast-close:hover{ color:var(--text); }

/* --------------------------------------------------------------- modal */
.modal-overlay{
  position:fixed; inset:0; background-color:var(--overlay);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:900;
}
.modal{
  width:100%; max-width:480px; max-height:calc(100vh - 40px); overflow:auto;
  background-color:var(--bg2); border:1px solid var(--border); border-radius:var(--rl);
  box-shadow:var(--shadow-modal); display:flex; flex-direction:column;
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-title{ font-size:15px; font-weight:700; }
.modal-body{ padding:20px; }
.modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--border); }

/* ---------------------------------------------------------- app shell */
.app-shell{ display:flex; width:100%; min-height:100vh; }
.sidebar{
  width:232px; flex:0 0 auto; background-color:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 14px;
}
.sidebar-brand{ padding:0 8px; margin-bottom:22px; font-size:16px; }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; }
.sidebar-link{
  display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border-radius:var(--rs);
  color:var(--text2); font-size:13.5px; font-weight:600; cursor:pointer; border:none; background-color:transparent;
  text-align:left; width:100%; transition:background-color var(--dur) ease, color var(--dur) ease;
}
.sidebar-link:hover{ background-color:var(--bg3); color:var(--text); }
.sidebar-link.active{ background-color:var(--og); color:var(--org); }
.sidebar-link svg{ flex:0 0 auto; }

.main-col{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.topbar{
  height:60px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; border-bottom:1px solid var(--border); background-color:var(--bg2);
}
.topbar-user{ font-size:13px; color:var(--text2); }
.content{ flex:1 1 auto; padding:28px 24px; overflow:auto; }
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.page-header-title{ font-size:20px; font-weight:800; }
.page-header-desc{ font-size:13px; color:var(--text2); margin-top:4px; }

/* -------------------------------------------------------- auth screens
   Login / no-access / coming-soon ortak merkezi kart düzeni. */
.auth-shell{
  width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:24px; padding:24px;
}
.auth-card{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:20px; }
.auth-brand{ display:flex; align-items:center; gap:10px; justify-content:center; font-size:19px; }
.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-foot{ text-align:center; font-size:12.5px; color:var(--text3); }

/* ------------------------------------------------------------- splash */
.splash{ width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; }
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--bg4); border-top-color:var(--org);
  animation:rc-spin .7s linear infinite;
}
@keyframes rc-spin{ to{ transform:rotate(360deg); } }
.splash-error{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; max-width:340px; }
.splash-error-icon{ color:var(--red); }

/* --------------------------------------------------------------- misc */
.divider{ height:1px; background-color:var(--border); border:none; margin:0; }
.link{ color:var(--org); text-decoration:none; font-weight:600; }
.link:hover{ text-decoration:underline; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 760px){
  .sidebar{ width:72px; padding:16px 10px; }
  .sidebar-brand{ display:none; }
  .sidebar-link span.label-text{ display:none; }
  .sidebar-link{ justify-content:center; }
  .content{ padding:20px 16px; }
  .topbar{ padding:0 16px; }
}