:root { --ink:#07110d; --lime:#c6ef3c; --card:#102019; --card2:#0c1813; --line:#24362c; --text:#f4f7f1; --muted:#b7c2b8; --paper:#e7f6b0; --red:#ff8d7e; --amber:#f5c518; --blue:#7cc4ff; }
[hidden] { display:none !important; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--ink); color:var(--text); font-family:"Segoe UI", system-ui, sans-serif; }
a { color:inherit; }
img { max-width:100%; display:block; }
button, input, select, textarea { font:inherit; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; font-weight:700; letter-spacing:.08em; }
.brand img { width:34px; height:34px; object-fit:contain; }
.lang a, .navlink { color:var(--muted); text-decoration:none; margin-left:12px; }
.hero { min-height:72vh; display:grid; align-items:end; padding:28px 22px 40px; background:linear-gradient(180deg,rgba(7,17,13,.15),rgba(7,17,13,.9)), url("/brand/hero/magari.jpg") center/cover; }
.hero h1 { font-size:clamp(40px,7vw,80px); line-height:.94; margin:8px 0; letter-spacing:-.045em; max-width:15ch; }
.kicker { color:var(--lime); letter-spacing:.18em; font-size:12px; font-weight:700; margin:0; }
.le { max-width:62ch; color:var(--muted); font-size:18px; }
.wrap { width:min(1180px,100%); margin:0 auto; padding:24px 22px 64px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.paketi, .card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px; }
.card.sub { background:var(--card2); }
.paketi button, .go, .ghost, .danger { border:0; border-radius:12px; padding:11px 14px; font-weight:700; cursor:pointer; }
.paketi button, .go { background:var(--lime); color:var(--ink); }
.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.danger { background:transparent; color:var(--red); border:1px solid #6a3a34; }
.go:disabled, .ghost:disabled { opacity:.5; cursor:not-allowed; }
.sm { padding:6px 10px; border-radius:10px; font-size:13px; }
.bei { font-size:28px; margin:10px 0; }
.paketi.on { outline:2px solid var(--lime); }
.stack { display:grid; gap:10px; }
.row-flex { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
label { display:grid; gap:6px; color:var(--muted); font-size:13px; }
label.check { display:flex; gap:8px; align-items:center; color:var(--text); font-size:14px; }
input, select, textarea { background:#0b120e; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:11px; width:100%; }
input[type=checkbox], input[type=radio] { width:auto; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--lime); outline-offset:1px; }
.split { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }
.phone { border-radius:24px; min-height:280px; object-fit:cover; }
.err { background:#3a201c; color:#ffd0c8; padding:10px 12px; border-radius:12px; margin:0; }
.ok { background:#1c2a12; color:var(--lime); padding:10px 12px; border-radius:12px; margin:0; }
.list { display:grid; gap:10px; }
.plate { display:inline-block; background:var(--amber); color:#1a1a1a; font-weight:800; border-radius:6px; padding:5px 8px; letter-spacing:.03em; white-space:nowrap; }
.top { display:flex; justify-content:space-between; gap:12px; align-items:end; flex-wrap:wrap; margin-bottom:14px; }
h1 { margin:0; letter-spacing:-.035em; }
h2 { margin:6px 0 10px; letter-spacing:-.02em; }
h3 { margin:8px 0 4px; font-size:15px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.banner { background:#1c2a12; color:var(--lime); padding:10px 14px; border-radius:12px; }
.banner.warn { background:#33290b; color:var(--amber); }
.banner.bad { background:#3a201c; color:#ffd0c8; }
table { width:100%; border-collapse:collapse; font-size:14px; }
td, th { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.tablewrap { overflow-x:auto; }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fgrid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line); margin:0 0 18px; scrollbar-width:none; }
.tabs button { background:none; border:0; color:var(--muted); padding:12px 14px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs button.on { color:var(--text); border-bottom-color:var(--lime); }
.tabs .pill { background:var(--red); color:#1a0806; border-radius:99px; font-size:11px; padding:1px 7px; margin-left:4px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; }
.kpi .v { font-size:26px; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums; }
.kpi .s { color:var(--muted); font-size:13px; margin-top:4px; }
.badge { display:inline-block; border-radius:99px; padding:2px 9px; font-size:12px; font-weight:700; background:#1d2c23; color:var(--muted); white-space:nowrap; }
.badge.g { background:#1c2a12; color:var(--lime); }
.badge.a { background:#33290b; color:var(--amber); }
.badge.r { background:#3a201c; color:var(--red); }
.badge.b { background:#10263a; color:var(--blue); }
.bar-meter { height:8px; border-radius:99px; background:#1d2c23; overflow:hidden; }
.bar-meter > span { display:block; height:100%; background:var(--lime); }
.bar-meter.a > span { background:var(--amber); }
.bar-meter.r > span { background:var(--red); }
#ramani, .ramani { height:440px; border-radius:20px; overflow:hidden; border:1px solid var(--line); }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.65); display:grid; place-items:center; padding:16px; z-index:2000; }
.modal > .card { width:min(640px,100%); max-height:92vh; overflow:auto; }
.steps { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 14px; }
.steps span { padding:6px 12px; border-radius:99px; border:1px solid var(--line); color:var(--muted); font-size:13px; }
.steps span.on { border-color:var(--lime); color:var(--lime); }
.steps span.done { background:#1c2a12; color:var(--lime); border-color:#1c2a12; }
.key { font-family:Consolas, "Courier New", monospace; letter-spacing:.06em; text-transform:uppercase; font-size:18px; text-align:center; }
.lock { max-width:720px; margin:6vh auto; }
.chart { display:flex; gap:8px; align-items:end; height:120px; }
.chart > div { flex:1; display:flex; flex-direction:column; justify-content:end; gap:2px; align-items:stretch; }
.chart .m { background:var(--lime); border-radius:5px 5px 0 0; min-height:2px; }
.chart .x { background:var(--red); border-radius:5px 5px 0 0; min-height:2px; opacity:.75; }
.chart small { color:var(--muted); font-size:11px; text-align:center; }
.qr { background:#fff; padding:12px; border-radius:14px; display:inline-block; }
.qr img, .qr canvas { display:block; }
.code-big { font-family:Consolas, monospace; font-size:34px; letter-spacing:.2em; font-weight:700; color:var(--lime); }
.toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--lime); color:var(--ink); padding:12px 18px; border-radius:12px; font-weight:700; z-index:3000; max-width:90vw; }
@media (max-width:900px) { .grid4 { grid-template-columns:1fr 1fr; } }
@media (max-width:800px) { .grid, .split, .fgrid, .fgrid3 { grid-template-columns:1fr; } .wrap { padding:18px 16px 56px; } .bar { padding:14px 16px; } }
@media print {
  body { background:#fff; color:#000; }
  .bar, .tabs, .noprint, button { display:none !important; }
  .card, .kpi { background:#fff; border:1px solid #ccc; color:#000; }
  .muted, th { color:#444; }
  .wrap { width:100%; padding:0; }
}