/* ============================================================================
   PatternFusion — belge sayfaları (privacy/, support/)

   Tanıtım sayfasının (style.css) token'ları ve yazı tipi; ama onun ağır
   parçaları (hero tuvali, telefon vitrini, beliriş) yok. Hukuk metni ve
   SSS okunmak için var: tek sütun, rahat satır aralığı, dışarıya istek yok.

   Yapı Balina'nın gizlilik sayfasından (balina-simulator.web.app/privacy):
   üst bant + TR/EN sekmesi + düz metin. Renkler PatternFusion temasından —
   yanlarındaki adlar style.css'tekiyle aynı.
   ========================================================================== */

@font-face { font-family:Sora; src:url(fonts/Sora-Regular.woff)  format("woff"); font-weight:400; font-display:swap }
@font-face { font-family:Sora; src:url(fonts/Sora-SemiBold.woff) format("woff"); font-weight:600; font-display:swap }
@font-face { font-family:Sora; src:url(fonts/Sora-Bold.woff)     format("woff"); font-weight:700; font-display:swap }

:root{
  /* Zemin — DarkBlues (#0E3E6A) ailesi */
  --abyss:#071E33;  --deep:#0E3E6A;   --surface:#0C2A47;  --raised:#124A7C;
  --border:#1B4A78;
  /* Vurgu ve eylem — LightBlue. Temada sıcak renk yok, uydurulmadı. */
  --accent:#0095E0; --accent-bright:#4FC3F7; --action:#4FC3F7; --on-action:#062032;
  --fg:#E6F2FA;     --muted:#93B2C9;   --dim:#628299;
  --maxw:48rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--abyss); color:var(--fg);
  font-family:Sora,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:6px}
::selection{background:rgba(0,149,224,.35); color:#fff}

.skip{position:absolute; left:12px; top:-60px; z-index:10; padding:10px 18px;
      background:var(--deep); color:#fff; border-radius:12px; transition:top .2s}
.skip:focus{top:12px}

/* ── Üst bant ────────────────────────────────────────────────────────────── */
.top{
  background:
    radial-gradient(40rem 20rem at 50% -40%, rgba(0,149,224,.24), transparent 70%),
    linear-gradient(180deg,var(--deep) 0%,var(--abyss) 100%);
  border-bottom:1px solid var(--border);
}
.top-in{max-width:var(--maxw); margin:0 auto; padding:1.6rem 1rem 2.2rem}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:2rem}
.brand{display:inline-flex; align-items:center; gap:.65rem; color:var(--fg); text-decoration:none}
.brand img{width:36px; height:36px; border-radius:9px; flex:none}
.brand span{font-weight:700; font-size:.95rem; letter-spacing:.22em}
.links{display:flex; gap:.25rem 1.1rem; flex-wrap:wrap; font-size:.88rem}
.links a{color:var(--muted); text-decoration:none; padding:.35rem 0}
.links a:hover,.links a[aria-current=page]{color:var(--fg)}
.links a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--accent)}

h1{font-size:1.9rem; line-height:1.25; font-weight:700; margin:0 0 .5rem; letter-spacing:-.01em}
.meta{color:var(--dim); font-size:.85rem; margin:0}

/* Dil anahtarı — gerçekten değiştiriyor; JS yoksa iki dil alt alta görünür */
.lang{display:inline-flex; gap:.25rem; margin-top:1.5rem;
      background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.25rem}
.lang button{
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  background:none; border:0; color:var(--muted);
  padding:.45rem 1.1rem; border-radius:999px; min-height:36px; transition:.15s;
}
.lang button:hover{color:var(--fg)}
.lang button[aria-selected=true]{background:var(--action); color:var(--on-action)}

/* ── Metin ───────────────────────────────────────────────────────────────── */
main{max-width:var(--maxw); margin:0 auto; padding:0 1rem 5rem}
.lede{font-size:1.04rem; color:var(--fg); margin:2.4rem 0 0}

h2{
  font-size:1.14rem; font-weight:700; letter-spacing:-.005em; line-height:1.4;
  margin:3rem 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--border);
}
h3{font-size:1rem; font-weight:600; color:var(--fg); margin:1.9rem 0 .5rem}
p{margin:.9rem 0}
ul,ol{padding-left:1.2rem; margin:.9rem 0}
li{margin:.45rem 0}
li::marker{color:var(--accent)}
p,li,td{color:var(--muted)}
strong{font-weight:600; color:var(--fg)}
a{color:var(--accent-bright); text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{color:var(--fg)}
code{background:var(--raised); border:1px solid var(--border); color:var(--fg);
     padding:.1em .4em; border-radius:4px; font-size:.86em;
     font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
p,li,a,td{overflow-wrap:anywhere}

.callout{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--action);
  border-radius:0 12px 12px 0; padding:1rem 1.15rem; margin:1.6rem 0;
  color:var(--muted); font-size:.95rem;
}
.callout p{margin:.4rem 0}

/* Özet tablo — dar ekranda kendi içinde kayıyor, sayfa yana kaymıyor */
.tbl{overflow-x:auto; margin:1.2rem 0; border:1px solid var(--border); border-radius:12px}
table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:34rem}
th,td{text-align:left; vertical-align:top; padding:.7rem .85rem; border-bottom:1px solid var(--border)}
th{color:var(--fg); font-weight:600; background:var(--surface)}
tr:last-child td{border-bottom:0}

/* ── SSS (support/) ──────────────────────────────────────────────────────── */
.faq details{border:1px solid var(--border); border-radius:12px; background:var(--surface); margin:.7rem 0}
.faq summary{cursor:pointer; list-style:none; padding:1rem 2.6rem 1rem 1.1rem; font-weight:600;
             color:var(--fg); position:relative; min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:1.1rem; top:.85rem; color:var(--accent); font-size:1.2rem}
.faq details[open] summary::after{content:"−"}
.faq details > div{padding:0 1.1rem .6rem}

.mail{
  display:inline-flex; align-items:center; gap:.5rem; margin:.4rem 0;
  background:var(--action); color:var(--on-action); text-decoration:none; font-weight:600;
  padding:.75rem 1.4rem; border-radius:999px; min-height:48px;
}
.mail:hover{color:var(--on-action); filter:brightness(1.08)}

footer{border-top:1px solid var(--border); margin-top:4rem; padding-top:1.6rem;
       color:var(--dim); font-size:.82rem}
footer p{color:var(--dim); margin:.4rem 0}
footer a{color:var(--muted)}

[hidden]{display:none !important}

@media (max-width:480px){
  body{font-size:15px}
  h1{font-size:1.55rem}
  .top-in{padding:1.3rem 1rem 1.8rem}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important} }