/* ══════════════════════════════════════════════════════════
   FB07 · Paylaşılan tasarım sistemi
   Landing sayfasındaki dille aynı; panel ve giriş ekranları
   bunu kullanır.
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:      #060607;
  --ink-2:    #0A0A0C;
  --raise:    #101013;
  --raise-2:  #16161A;

  --hair:     rgba(255,255,255,.07);
  --hair-2:   rgba(255,255,255,.13);

  --w:        #FAFAFA;
  --w-70:     rgba(250,250,250,.70);
  --w-45:     rgba(250,250,250,.45);
  --w-28:     rgba(250,250,250,.28);

  --au:       #C9A24B;
  --au-hi:    #E8CE92;
  --au-lo:    #A8854A;
  --au-08:    rgba(201,162,75,.08);
  --au-18:    rgba(201,162,75,.18);

  --ok:       #5FD68F;
  --warn:     #E8B961;
  --bad:      #F0736B;

  --gut:      clamp(18px, 4.5vw, 68px);
  --ease:     cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--w);
  font-family:"Satoshi", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight:300; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
svg{display:block}
::selection{background:var(--au); color:#100C04}

.display{font-family:"Clash Display","Satoshi",sans-serif; font-weight:500;
  line-height:.95; letter-spacing:-.04em}
.micro{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--w-45)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--w-45)}

/* ── Marka ─────────────────────────────────────────────── */
.brand{display:flex; align-items:baseline; gap:9px;
  font-family:"Clash Display",sans-serif; font-weight:600; font-size:19px; letter-spacing:-.03em}
.brand em{font-style:normal; font-family:"JetBrains Mono",monospace; font-size:8.5px;
  letter-spacing:.22em; color:var(--w-28); transform:translateY(-5px)}

/* ── Form ──────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field label{display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--w-28); margin-bottom:8px}
.field input, .field select, .field textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--hair); border-radius:3px;
  padding:12px 14px; color:var(--w); font-size:14px; font-weight:300;
  font-family:inherit; transition:border-color .3s var(--ease), background .3s var(--ease)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--au); background:#000}
.field input::placeholder{color:var(--w-28)}

/* ── Butonlar ──────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 24px; border-radius:2px; position:relative; overflow:hidden;
  font-size:13.5px; font-weight:500; transition:color .5s var(--ease), border-color .5s var(--ease)}
.btn span{position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px}
.btn::before{content:''; position:absolute; inset:0; transform:translateY(101%);
  transition:transform .55s var(--ease)}
.btn:hover:not(:disabled)::before{transform:translateY(0)}
.btn:disabled{opacity:.45; cursor:default}
.btn-solid{background:var(--w); color:var(--ink)}
.btn-solid::before{background:linear-gradient(180deg,var(--au-hi),var(--au))}
.btn-solid:hover:not(:disabled){color:#100C04}
.btn-line{border:1px solid var(--hair-2); color:var(--w-70)}
.btn-line::before{background:rgba(255,255,255,.06)}
.btn-line:hover:not(:disabled){color:var(--w)}
.btn-block{width:100%}

/* ── Durum rozetleri ───────────────────────────────────── */
.dot{width:6px; height:6px; border-radius:50%; background:var(--w-28); flex:none}
.dot.live{background:var(--ok); box-shadow:0 0 9px var(--ok)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}

.note{border:1px solid var(--hair); border-left:2px solid var(--bad);
  background:rgba(240,115,107,.05); border-radius:3px; padding:12px 14px;
  font-size:13px; color:var(--w-70); margin-bottom:16px}
.note.ok{border-left-color:var(--ok); background:rgba(95,214,143,.05)}
.note.hide{display:none}

/* ── Kart ──────────────────────────────────────────────── */
.card{background:linear-gradient(172deg,var(--raise),var(--ink-2));
  border:1px solid var(--hair); border-radius:4px}