@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#F4F6FB; --bg2:#EAF0FA; --card:#FFFFFF; --ink:#0F1B33; --ink2:#475569; --ink3:#94A3B8;
  --soft:#F8FAFC; --soft2:#F1F5F9;
  --line:#E5EAF2; --primary:#1D4ED8; --primary2:#2563EB; --primaryL:#EFF4FF; --primaryD:#1E3A8A;
  --accent:#0EA5E9; --green:#059669; --greenL:#ECFDF5; --amber:#D97706; --red:#DC2626; --redL:#FEF2F2;
  --shadow:0 1px 2px rgba(16,27,51,.04),0 8px 24px rgba(16,27,51,.06);
  --shadow2:0 2px 4px rgba(16,27,51,.06),0 12px 32px rgba(16,27,51,.10);
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.dis{font-family:'Plus Jakarta Sans',sans-serif}
h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;margin:0}
button{font-family:inherit;cursor:pointer;border:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
input,textarea,select{font-family:inherit}
a{color:var(--primary);text-decoration:none}
.wrap{max-width:460px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative}
.pad{padding:18px}
.row{display:flex;gap:10px}.col{display:flex;flex-direction:column;gap:10px}
.spread{display:flex;justify-content:space-between;align-items:center}
.muted{color:var(--ink2)}.faint{color:var(--ink3)}
.sm{font-size:13px}.xs{font-size:11.5px}.center{text-align:center}.hide{display:none!important}
.wrap-narrow{max-width:420px}

/* üst bar */
header.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:12px 16px}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary2),var(--primaryD));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(29,78,216,.3)}
.brand{font-size:18px;font-weight:800;color:var(--ink)}
.iconbtn{width:38px;height:38px;border-radius:11px;background:var(--primaryL);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:17px;position:relative}
.iconbtn.ghost{background:#F1F5F9;color:var(--ink2)}
.dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid #fff}
.dotN{position:absolute;top:2px;right:2px;background:var(--red);color:#fff;font-size:10px;font-weight:800;
  min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}

/* butonlar */
.btn{border-radius:13px;padding:15px;font-weight:700;font-size:15.5px;width:100%;transition:transform .05s,box-shadow .15s;font-family:'Plus Jakarta Sans',sans-serif}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary2),var(--primary));color:#fff;box-shadow:0 6px 16px rgba(29,78,216,.28)}
.btn-primary:disabled{background:#CBD5E1;box-shadow:none;color:#fff}
.btn-light{background:var(--primaryL);color:var(--primary)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(5,150,105,.25)}
.btn-danger{background:var(--redL);color:var(--red)}
.btn-sm{padding:9px 14px;border-radius:10px;font-size:13.5px;width:auto}
.btn:disabled{cursor:default}

/* kart */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card.click{cursor:pointer;transition:box-shadow .15s,transform .1s}
.card.click:active{transform:scale(.995)}
.tag{display:inline-flex;align-items:center;gap:5px;background:#F1F5F9;color:var(--ink2);padding:6px 11px;border-radius:9px;font-size:12.5px;font-weight:600}
.tag.blue{background:var(--primaryL);color:var(--primary)}
.tag.green{background:var(--greenL);color:var(--green)}
.badge{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:20px;letter-spacing:.02em}
.chip-verified{display:inline-flex;align-items:center;gap:3px;background:var(--primaryL);color:var(--primary);font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}

/* form */
label.lbl{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:18px 0 8px;font-family:'Plus Jakarta Sans',sans-serif}
.inp{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--ink);font-size:15.5px;outline:none;transition:border-color .15s}
.inp:focus{border-color:var(--primary)}
.inp::placeholder{color:var(--ink3)}
textarea.inp{min-height:80px;resize:none}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:38px}
.chip{background:#fff;color:var(--ink2);border:1.5px solid var(--line);border-radius:20px;padding:9px 15px;font-size:14px;font-weight:600;transition:all .12s}
.chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.kalemBtn{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px 6px;text-align:center;color:var(--ink2);transition:all .12s}
.kalemBtn.on{background:var(--primaryL);border-color:var(--primary);color:var(--primary)}
.kalemBtn .em{font-size:24px}.kalemBtn .ad{font-size:11.5px;margin-top:4px;line-height:1.2;font-weight:600}
input[type=range]{accent-color:var(--primary);height:6px}

/* alt menü */
nav.alt{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:460px;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;padding:8px 6px max(10px,env(safe-area-inset-bottom))}
nav.alt button{flex:1;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:var(--ink3);font-size:11px;font-weight:600;position:relative;font-family:'Plus Jakarta Sans',sans-serif}
nav.alt button .ic{font-size:20px}
nav.alt button.on{color:var(--primary)}
nav.alt .notif{position:absolute;top:-2px;right:50%;transform:translateX(15px);background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid #fff}

/* istatistik kutusu */
.statBox{flex:1;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 10px;box-shadow:var(--shadow)}
.statBox .n{font-size:25px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em}
.statBox .t{font-size:11.5px;color:var(--ink2);font-weight:600;margin-top:2px}

/* avatar */
.av{border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;flex-shrink:0}

/* medya başlık */
.media{height:96px;border-radius:16px 16px 0 0;display:flex;align-items:flex-end;padding:12px;position:relative;color:#fff}
.media .ov{position:absolute;inset:0;border-radius:16px 16px 0 0;background:linear-gradient(120deg,rgba(0,0,0,.05),rgba(0,0,0,.35))}

/* yıldız */
.stars{color:var(--amber);letter-spacing:1px}

/* hero (giriş) */
.hero{background:linear-gradient(150deg,var(--primaryD),var(--primary) 60%,var(--accent));color:#fff;
  padding:40px 24px 34px;border-radius:0 0 28px 28px;box-shadow:0 10px 30px rgba(29,78,216,.25)}

/* toast / spinner */
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:13px 20px;border-radius:13px;z-index:90;font-weight:600;font-size:14px;max-width:90%;text-align:center;box-shadow:var(--shadow2)}
.toast.err{background:var(--red)}
.toast.ok{background:var(--green)}
.spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loadwrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:70px 0}
.rise{animation:rise .3s ease both}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* boş durum */
.empty{background:#fff;border:1.5px dashed var(--line);border-radius:18px;padding:34px 20px;text-align:center}
.empty .ic{font-size:34px}

/* mesaj balonu */
.bubble{max-width:78%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.4;word-break:break-word}
.bubble.me{background:var(--primary);color:#fff;border-bottom-right-radius:5px;margin-left:auto}
.bubble.you{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}

/* tablo (admin) */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line)}
th{color:var(--ink3);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.tabbar{display:flex;gap:7px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.tabbar button{white-space:nowrap;background:#fff;color:var(--ink2);border:1.5px solid var(--line);border-radius:20px;padding:8px 15px;font-size:13.5px;font-weight:600}
.tabbar button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.segment{display:flex;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.segment button{flex:1;border-radius:9px;padding:9px;font-size:13.5px;font-weight:600;background:none;color:var(--ink2)}
.segment button.on{background:var(--primary);color:#fff}

/* ===== Büyük yazı / erişilebilirlik modu ===== */
body.buyuk{font-size:18px}
body.buyuk .sm{font-size:15.5px}
body.buyuk .xs{font-size:13px}
body.buyuk .inp{font-size:17.5px;padding:15px 14px}
body.buyuk .btn{font-size:17.5px}
body.buyuk .btn-sm{font-size:15px}
body.buyuk .lbl{font-size:14.5px}
body.buyuk h1{font-size:27px}
body.buyuk h2{font-size:23px}
body.buyuk .brand{font-size:20px}
body.buyuk .tag{font-size:14px}
body.buyuk .muted,body.buyuk .faint{font-size:inherit}
body.buyuk nav.alt button{font-size:12.5px}
body.buyuk nav.alt button .ic{font-size:23px}
body.buyuk .kalemBtn .ad{font-size:13px}

/* ===== Sözleşme yazdırma ===== */
@media print {
  body * { visibility:hidden; }
  #sozlesmeArea, #sozlesmeArea * { visibility:visible; }
  #sozlesmeArea { position:absolute; left:0; top:0; width:100%; padding:0 }
  .top, nav.alt, .btn { display:none !important; }
}

/* ===================== 🌙 KARANLIK MOD ===================== */
body.dark{
  --bg:#0E1525; --bg2:#162133; --card:#172234; --ink:#E7ECF6; --ink2:#9FB0CC; --ink3:#65759A;
  --line:#26324B; --primaryL:#172A4D; --soft:#141E30; --soft2:#1B2740;
}
body.dark header.top{background:rgba(14,21,37,.88)!important}
body.dark nav.alt{background:rgba(18,27,44,.97)!important}
body.dark .iconbtn.ghost{background:var(--soft2)}
body.dark .btn-ghost{background:var(--card)}
body.dark .tag{background:var(--soft2);color:var(--ink2)}
body.dark .inp{background:var(--soft);color:var(--ink)}
body.dark .chip{background:var(--card);color:var(--ink2)}
body.dark .kalemBtn{background:var(--card);color:var(--ink2)}
body.dark .statBox{background:var(--card)}
body.dark .empty{background:var(--card)}
body.dark .bubble.you{background:var(--card)}
body.dark .tabbar button{background:var(--card);color:var(--ink2)}
body.dark .segment{background:var(--card)}
body.dark .av{box-shadow:0 0 0 1px var(--line)}
