/* Shared styling for the legal pages (kullanim-kosullari.html, kvkk.html).
   The landing page keeps its CSS inline; these two are long reading pages
   with the same tokens, so they share one small sheet instead. */

:root{
  --n0:#232752; --n1:#1d2145; --n2:#181c3a; --n3:#141733;
  --ink:#f4f1ea; --body:#c9d0e8; --mute:#9aa3c7; --line:rgba(255,255,255,.09);
  --glass:rgba(255,255,255,.055);
  --gold:#ffd98a; --gold-deep:#f5b45a; --gold-ink:#1b1200;
  --blue:#8b9bf5; --lav:#c5d0ff; --terra:#e8795e;
  --display:'Baloo 2',system-ui,sans-serif;
  --text:'Nunito',system-ui,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --pad:clamp(18px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  background:linear-gradient(180deg,var(--n0) 0%,var(--n1) 26%,var(--n2) 62%,var(--n3) 100%);
  background-attachment:fixed;
  color:var(--body);font-family:var(--text);font-size:16px;line-height:1.75;
}

.wrap{max-width:820px;margin:0 auto;padding:0 var(--pad)}

/* --- header --- */
.top{padding-block:28px 0}
.top a.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.top a.brand svg{width:34px;height:34px;border-radius:8px}
.top a.brand span{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink)}
.back{display:inline-block;margin-top:22px;color:var(--lav);text-decoration:none;font-size:14px;font-weight:700}
.back:hover{color:var(--gold)}

h1{
  font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(30px,5vw,42px);line-height:1.1;margin:18px 0 6px;letter-spacing:-.015em;
}
.updated{font-family:var(--data);font-size:12.5px;color:var(--mute);margin:0 0 6px}
.lede{font-size:17px;color:var(--body);margin:0 0 4px}

/* --- the "fill this in" banner --- */
.todo{
  margin:26px 0 0;padding:16px 18px;border-radius:16px;
  background:rgba(232,121,94,.1);border:1px solid rgba(232,121,94,.34);
  color:#f3c4b6;font-size:14px;line-height:1.65;
}
.todo b{color:var(--terra)}

/* --- table of contents --- */
.toc{
  margin:30px 0 0;padding:18px 20px;border-radius:18px;
  background:var(--glass);border:1px solid var(--line);
}
.toc h2{font-family:var(--display);font-size:15px;color:var(--ink);margin:0 0 10px;font-weight:700}
.toc ol{margin:0;padding-left:20px;color:var(--body);font-size:14.5px}
.toc li{margin:4px 0}
.toc a{color:var(--lav);text-decoration:none}
.toc a:hover{color:var(--gold);text-decoration:underline}

/* --- sections --- */
main{padding-block:10px 72px}
section{margin-top:44px;scroll-margin-top:24px}
h2{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(20px,3vw,25px);line-height:1.2;margin:0 0 12px;letter-spacing:-.01em;
}
h2 .no{color:var(--gold);font-family:var(--data);font-size:.62em;margin-right:10px;vertical-align:.18em}
h3{font-family:var(--display);font-weight:700;color:var(--ink);font-size:17px;margin:22px 0 8px}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:6px 0}
b,strong{color:var(--ink);font-weight:800}
a{color:var(--lav)}
a:hover{color:var(--gold)}
code,.mono{font-family:var(--data);font-size:.92em;color:var(--ink)}
.fill{
  background:rgba(232,121,94,.16);border-bottom:1px dashed rgba(232,121,94,.7);
  color:#f3c4b6;padding:0 4px;border-radius:4px;font-family:var(--data);font-size:.9em;
}

/* --- callouts --- */
.note{
  margin:18px 0;padding:16px 18px;border-radius:16px;
  background:rgba(139,155,245,.09);border:1px solid rgba(139,155,245,.28);font-size:15px;
}
.warn{
  margin:18px 0;padding:16px 18px;border-radius:16px;
  background:rgba(232,121,94,.09);border:1px solid rgba(232,121,94,.3);font-size:15px;
}
.note b,.warn b{display:block;margin-bottom:4px;font-family:var(--display)}

/* --- tables --- */
.tablewrap{overflow-x:auto;margin:0 0 16px;border-radius:16px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px;background:var(--glass)}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink);font-family:var(--display);font-weight:700;font-size:14px;background:rgba(255,255,255,.04)}
tr:last-child td{border-bottom:none}

/* --- footer --- */
footer{
  border-top:1px solid var(--line);padding-block:24px 40px;margin-top:40px;
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  font-size:13.5px;color:var(--mute);
}
footer a{text-decoration:none}
footer .mono{font-family:var(--data);font-size:12.5px;margin-left:auto}

@media (max-width:520px){
  body{font-size:15.5px}
  footer .mono{margin-left:0;width:100%}
}