/* Renkler, başlık ve düğmeler diğer Verinomi araçlarıyla aynı */
:root { --ink:#13213b; --muted:#66748f; --line:#dbe3ef; --line-2:#c3cfe2; --bg:#f3f6fb; --surface:#fff; --soft:#f5f8fc; --accent:#17468f; --sky:#1c9ad6;
        --ok:#0b7a63; --warn:#9a6400; --bad:#c2410c;
        --glow-a:rgba(28,154,214,.16); --glow-b:rgba(53,184,166,.14); --g1:#17468f; --g2:#1a84c4; --g3:#1c9c8a;
        --shadow:0 1px 2px rgba(19,33,59,.06),0 10px 28px -14px rgba(19,33,59,.22);
        --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,monospace;
        --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color-scheme:light; }
:root[data-theme="dark"] { --ink:#e8eef8; --muted:#8fa0bd; --line:#1e2c47; --line-2:#32456c; --bg:#0a1224; --surface:#111a2c; --soft:#162036; --accent:#4fb3e8;
        --ok:#3fd2b4; --warn:#e9b04c; --bad:#ff8a5c;
        --glow-a:rgba(15,34,68,.95); --glow-b:rgba(45,212,191,.12); --g1:#1c9ad6; --g2:#35b8a6; --g3:#9fcf63;
        --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.7); color-scheme:dark; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--vt-bar-h,0px) + 70px); }
body { margin:0; color:var(--ink); font:16px/1.6 var(--sans); background:radial-gradient(1100px 480px at 12% -8%,var(--glow-a),transparent 60%),radial-gradient(800px 460px at 100% 0,var(--glow-b),transparent 60%),var(--bg); background-repeat:no-repeat; }
a { color:var(--accent); }
.wrap { max-width:960px; margin:0 auto; padding:0 16px; }
.head { position:sticky; top:var(--vt-bar-h,0px); z-index:20; -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); background:color-mix(in srgb,var(--bg) 78%,transparent); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.top-in { display:flex; align-items:center; justify-content:space-between; gap:12px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted); min-width:0; }
.brand img { display:block; height:30px; width:auto; }
.brand-tag { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-left:1px solid var(--line-2); padding-left:10px; white-space:nowrap; }
.logo-d { display:none !important; }
:root[data-theme="dark"] .logo-d { display:block !important; }
:root[data-theme="dark"] .logo-l { display:none !important; }
.top-right { display:flex; align-items:center; gap:8px; }
.ctl { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; min-width:36px; padding:0 12px; border-radius:999px; cursor:pointer; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:600 13px var(--sans); text-decoration:none; }
.ctl:hover { border-color:var(--sky); }
.ctl svg { width:16px; height:16px; }
.ctl .sun { display:none; }
:root[data-theme="dark"] .ctl .sun { display:block; }
:root[data-theme="dark"] .ctl .moon { display:none; }
:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }

.hero { padding:36px 0 20px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); background:color-mix(in srgb,var(--surface) 70%,transparent); font:600 13px var(--sans); color:var(--accent); }
.eyebrow svg { width:15px; height:15px; flex:none; }
h1 { font-size:clamp(30px,5.2vw,46px); line-height:1.1; margin:14px 0 10px; letter-spacing:-.025em; font-weight:700; }
.grad { background:linear-gradient(90deg,var(--g1),var(--g2) 55%,var(--g3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--muted); margin:0; max-width:640px; }

.kart { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.sonuc { padding:20px; }
.sifre { padding:16px 18px; border-radius:12px; background:var(--soft); border:1px solid var(--line); font:500 clamp(18px,2.8vw,24px)/1.4 var(--mono); letter-spacing:.01em; text-align:center; overflow-wrap:anywhere; min-height:calc(1.4em + 34px); user-select:all; -webkit-user-select:all; font-variant-ligatures:none; }
.dugmeler { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:0 18px; border-radius:999px; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#fff; font:600 15px var(--sans); }
:root[data-theme="dark"] .btn:not(.ikinci) { color:#07101f; }
.btn:hover { filter:brightness(1.08); }
.btn svg { width:17px; height:17px; }
.btn.ikinci { background:transparent; color:var(--accent); border-color:var(--line-2); }
.btn.ikinci:hover { border-color:var(--sky); filter:none; }

.guc { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.guc-ust { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:14px; }
.guc-ust b { font-size:15px; }
.guc-ust span { color:var(--muted); }
.cubuk { height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin:8px 0 0; }
.cubuk i { display:block; height:100%; border-radius:999px; background:var(--ok); transition:width .15s; }
.guc[data-seviye="0"] b { color:var(--bad); } .guc[data-seviye="0"] .cubuk i { background:var(--bad); }
.guc[data-seviye="1"] b { color:var(--warn); } .guc[data-seviye="1"] .cubuk i { background:var(--warn); }
.guc[data-seviye="2"] b, .guc[data-seviye="3"] b { color:var(--ok); }
.not { margin:10px 0 0; font-size:13.5px; color:var(--muted); }
#pin-not { color:var(--warn); }

.toplu { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.toplu-ust { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:14px; color:var(--muted); }
.liste { list-style:none; margin:0; padding:0; }
.liste li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line); }
.liste li:last-child { border-bottom:0; }
.liste code { font:500 14.5px/1.4 var(--mono); overflow-wrap:anywhere; min-width:0; font-variant-ligatures:none; }
.mini { flex:none; height:30px; padding:0 12px; border-radius:999px; cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--accent); font:600 13px var(--sans); }
.mini:hover { border-color:var(--sky); }

.ayarlar { margin-top:14px; padding:20px; }
.baslik { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.hazir { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px; }
.hazir button { min-height:44px; padding:6px 10px; border-radius:10px; cursor:pointer; border:1px solid var(--line-2); background:var(--soft); color:var(--ink); font:600 14px/1.25 var(--sans); }
.hazir button:hover { border-color:var(--sky); }
.hazir button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:#fff; }
:root[data-theme="dark"] .hazir button[aria-pressed="true"] { color:#07101f; }
.uzunluk { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.uzunluk input[type=range] { flex:1; min-width:0; accent-color:var(--accent); height:28px; }
input[type=number], input[type=text] { height:40px; padding:0 10px; border-radius:10px; border:1px solid var(--line-2); background:var(--soft); color:var(--ink); font:600 15px var(--sans); }
input[type=number] { width:76px; text-align:center; }
.secim { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; margin-bottom:20px; }
.secim label { display:flex; align-items:center; gap:10px; min-height:28px; cursor:pointer; font-size:15px; }
.secim input { width:18px; height:18px; flex:none; accent-color:var(--accent); }
.secim input:disabled + span { color:var(--muted); }
.alt { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; }
.alt input[type=text] { width:100%; font:500 15px var(--mono); font-variant-ligatures:none; }

section { padding:36px 0 0; }
h2 { font-size:22px; line-height:1.25; margin:0 0 14px; letter-spacing:-.01em; }
h3 { font-size:16px; margin:0 0 6px; }
.uclu { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.uclu .kart { padding:16px 18px; }
.uclu p { margin:0; font-size:14.5px; color:var(--muted); }
.maddeler { margin:0; padding-left:20px; color:var(--muted); }
.maddeler li { margin-bottom:7px; }
.maddeler b { color:var(--ink); }
.metin { margin:0 0 12px; color:var(--muted); }
.kod { margin:0; padding:14px 16px; border-radius:12px; overflow-x:auto; background:#0f1b2d; color:#d7e3f4; font:500 13.5px/1.75 var(--mono); }
.kod .c { color:#7d8ea8; }
details { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:10px; }
summary { cursor:pointer; font-weight:600; }
details p { margin:8px 0 0; color:var(--muted); }
#vt-footer { margin-top:48px; }

.bildirim { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600; opacity:0; transition:opacity .15s; pointer-events:none; z-index:30; }
.bildirim.acik { opacity:1; }
.gizli { position:fixed; opacity:0; left:-999px; }
.uyari { padding:16px 20px; }

@media (max-width:760px) { .uclu { grid-template-columns:1fr; } }
@media (max-width:640px) {
  .head { position:static; } .ctl { height:34px; min-width:34px; padding:0 10px; } .brand img { height:26px; }
  .hero { padding-top:24px; } .sonuc, .ayarlar { padding:16px; }
  .hazir { grid-template-columns:repeat(2,1fr); } .secim { grid-template-columns:1fr; } .alt { grid-template-columns:1fr; }
  .dugmeler .btn { flex:1 1 140px; }
}
@media (prefers-reduced-motion:reduce) { .cubuk i, .bildirim { transition:none; } }