/* ============================================================================
   Case Files — casefilesgame.com
   ----------------------------------------------------------------------------
   Kaynak: "design_handoff_case_files_website" teslim paketi (high-fidelity).
   Prototipler `.dc.html` bileşen formatindaydi ve pakette OLMAYAN bir tasarim
   sistemine (`_ds/organic-.../styles.css`) baglilardi. Bu dosya o eksik katmani
   yeniden kurar: .btn / .tag / .card / .input siniflari, radius ve golge
   degiskenleri, `style-hover` niteliklerinin gercek :hover kurallari.

   TEK SAPMA — YAZI TIPI. Teslim paketi Caprasimo + Figtree'yi Google Fonts'tan
   cekiyordu. Iki sebeple degistirildi:
     1. Kullanici talebi: uygulamanin kendi yazi tipi kullanilacak.
     2. Google Fonts CDN'i ziyaretcinin IP'sini Google'a gonderir; Alman
        mahkemesi bunu GDPR ihlali saydi (LG Munchen I, 20.01.2022 - 3 O 17493/20).
        Gizlilik sayfasi "ucuncu tarafa veri gitmiyor" derken sayfa IP sizdiramaz.
   Yerine: Special Elite (repoda, uygulamanin basli fontuyla ayni TTF) + sistem
   yazi tipi yigini. Baska hicbir renk, olcu veya bosluk degistirilmedi.
   ========================================================================== */

@font-face {
  font-family: 'Special Elite';
  src: url('fonts/special-elite.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Teslim paketinin jetonlari — birebir ──────────────────────────────── */
  --color-accent:     #c8a87a;
  --color-accent-100: #f7efe1;
  --color-accent-200: #ecdcc2;
  --color-accent-300: #e0c9a5;
  --color-accent-400: #d4b892;
  --color-accent-500: #c8a87a;
  --color-accent-600: #ac8d60;
  --color-accent-700: #8a7350;
  --color-accent-800: #66502f;
  --color-accent-900: #43341c;

  --color-bg:      #0d1117;
  --color-surface: #161b22;
  --color-text:    #e6edf3;
  --color-divider: #30363d;

  --color-neutral-100: #161b22;
  --color-neutral-200: #1c2128;
  --color-neutral-300: #30363d;
  --color-neutral-400: #30363d;
  --color-neutral-500: #6e7681;
  --color-neutral-600: #6e7681;
  --color-neutral-700: #8b949e;
  --color-neutral-800: #adb6bf;
  --color-neutral-900: #010509;

  /* Dedektif ipi */
  --thread: #b1231c;

  /* Kagit kart — koyu temanin icindeki tek acik yuzey */
  --paper:     #e9dcbd;
  --paper-ink: #2b2318;
  --paper-body:#4a3f30;

  /* Bicim jetonlari (README "Design Tokens") */
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 10px 24px rgba(1, 5, 9, 0.35);

  /* ── YAZI TIPI — tek sapma ─────────────────────────────────────────────── */
  --font-heading: 'Special Elite', 'Courier New', ui-monospace, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
}

/* ── Temel ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--color-accent-400); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-300); }

::selection { background: rgba(200, 168, 122, 0.3); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skiplink {
  position: absolute; left: -9999px; top: 8px; z-index: 90;
  background: var(--color-accent); color: var(--color-bg);
  padding: 10px 16px; border-radius: var(--radius-pill);
  font-family: var(--font-heading); text-decoration: none;
}
.skiplink:focus { left: 12px; }

/* ── Üç dil — JS olmadan da TR gorunur ────────────────────────────────────
   Uc dilin metni de DOM'da; gorunurlugu CSS ayiriyor. Kok nitelik hic yoksa
   (JS kapali / henuz calismadi) TR gorunur, digerleri gizli — yani sayfa
   javascript'siz de okunur durumda.                                        */

/* 22 Agu 2026 — kurallar dil basina TEK satira indirildi.
   Eskiden her dil DIGER TUM dilleri tek tek gizliyordu; kural sayisi dil
   sayisinin karesi gibi buyuyordu (3 dil -> 6 satir, 5 dil -> 20 satir) ve
   yeni dil eklerken MEVCUT kurallarin hepsine dokunmak gerekiyordu.
   :not([data-t='<dil>']) ile artik her dil kendi satirini tasiyor.

   Yeni dil eklerken iki yer: asagiya bir satir + yedek kuraldaki :not() zinciri. */

/* Yedek: bilinmeyen/eksik data-lang (JS kapali ya da henuz calismadi) -> TR.
   Sayfa javascript'siz de okunur durumda kalir. */
:root:not([data-lang='en']):not([data-lang='de']):not([data-lang='fr']):not([data-lang='es'])
  [data-t]:not([data-t='tr']) { display: none !important; }

:root[data-lang='en'] [data-t]:not([data-t='en']) { display: none !important; }
:root[data-lang='de'] [data-t]:not([data-t='de']) { display: none !important; }
:root[data-lang='fr'] [data-t]:not([data-t='fr']) { display: none !important; }
:root[data-lang='es'] [data-t]:not([data-t='es']) { display: none !important; }

/* ── Tasarim sistemi yerine: butonlar ─────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg) !important;
  font-weight: 700;
}
.btn-primary:hover { background: var(--color-accent-400); color: var(--color-bg) !important; }

/* Cerceveli ikincil buton — teslimde `style-hover` niteligiyle belirtilmisti */
.btn-ghost:hover {
  background: rgba(200, 168, 122, 0.09);
  border-color: rgba(200, 168, 122, 0.45);
}
.btn-outline:hover { background: rgba(200, 168, 122, 0.12); }

/* ── Etiketler ────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
}
.tag-outline {
  border: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-700);
  background: transparent;
}

/* ── Kartlar ──────────────────────────────────────────────────────────────── */

.card { background: var(--color-surface); }

/* Laboratuvar karti — hover teslimde `style-hover` ile verilmisti */
.lab-card { transition: background 160ms ease, border-color 160ms ease; }
.lab-card:hover {
  background: rgba(200, 168, 122, 0.12) !important;
  border-color: rgba(200, 168, 122, 0.4) !important;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */

.field label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.input {
  width: 100%;
  font-family: var(--font-body);
  transition: border-color 160ms ease;
}
.input:focus { border-color: var(--color-accent) !important; }
.input::placeholder { color: var(--color-neutral-500); }

/* ── Ust bant ─────────────────────────────────────────────────────────────── */

/* 24 Agu 2026 — ust bandin yerlesimi satir ici stilden BURAYA tasindi.
   Sebep: dar ekranda menu sarilarak 215px yer kapliyordu (844px'lik bir
   telefonda ekranin dortte biri) ve sticky oldugu icin her kaydirmada orada
   duruyordu. Satir ici stille duyarli bir kural yazilamaz — media query
   ancak stylesheet'te yasar. Masaustu gorunum birebir ayni: ayni olculer,
   ayni renkler, yalnizca tasiyicisi degisti. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(13, 17, 23, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}
.site-header__bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 11px 26px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text);
  flex: 0 0 auto;
}
.brand img {
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 1px solid rgba(200, 168, 122, 0.55);
}
.brand__ad {
  font-family: var(--font-heading);
  font-size: 17px;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.navpanel {
  display: flex;
  align-items: center;
  gap: 26px; /* eski yapida menu ile dil kutusu ust bandin 26px'lik gap'iyle ayriliyordu */
  margin-left: auto;
  flex-wrap: wrap;
}
.mainnav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: center;
}
.langwrap {
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
  flex: 0 0 auto;
}

/* Hamburger — varsayilan olarak YOK. Yalnizca dar ekranda ve JS calistiysa
   ([data-nav='ready']) gorunur; JS calismazsa menu eskisi gibi acik sarar,
   yani hicbir sartta ulasilmaz kalmaz. */
.navtoggle {
  display: none;
  margin-left: auto;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.navtoggle:hover {
  border-color: rgba(200, 168, 122, 0.45);
  background: rgba(200, 168, 122, 0.09);
}
.navtoggle__bars { position: relative; display: block; width: 20px; height: 14px; }
.navtoggle__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--color-accent-300);
  transition: transform 180ms ease, opacity 120ms ease;
}
.navtoggle__bars span:nth-child(1) { top: 0; }
.navtoggle__bars span:nth-child(2) { top: 6px; }
.navtoggle__bars span:nth-child(3) { top: 12px; }
.navtoggle[aria-expanded='true'] .navtoggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded='true'] .navtoggle__bars span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded='true'] .navtoggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-link {
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 13px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  color: var(--color-neutral-700);
  transition: background 140ms ease, color 140ms ease;
}
.nav-link:hover { color: var(--color-accent-300); background: rgba(200, 168, 122, 0.09); }
.nav-link[aria-current='page'] {
  color: var(--color-accent-300);
  background: rgba(200, 168, 122, 0.16);
}

.langbtn {
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-neutral-700);
}
/* aria-pressed: join.html'deki <button> secici (calisma aninda dil degistirir).
   aria-current: uretilmis sayfalardaki <a> secici (dil ADRESTEN gelir).
   Ikisi ayni goruntuyu vermeli — ziyaretci arasindaki farki bilmemeli. */
.langbtn[aria-pressed='true'],
.langbtn[aria-current='true'] { background: var(--color-accent); color: var(--color-bg); }
a.langbtn { text-decoration: none; display: inline-block; }

.footer-link {
  text-decoration: none;
  font-size: 13.5px;
  color: var(--color-neutral-700);
}
.footer-link:hover { color: var(--color-accent-300); }

/* ── Dedektif ipi — imza etkilesim ────────────────────────────────────────── */

.thread-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 40;
  overflow: visible;
}

/* Raptiye — README'deki gradyan birebir */
.pin {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 34% 30%, #f07a6a 0%, #cf2b21 52%, #6e120d 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
  z-index: 45;
}
.pin--lg { width: 20px; height: 20px; box-shadow: 0 4px 9px rgba(0, 0, 0, 0.5); }
.pin--paper { box-shadow: 0 3px 7px rgba(46, 43, 37, 0.5); }

/* ── Telefon yelpazesi ────────────────────────────────────────────────────── */

.fan { position: relative; width: 430px; max-width: 100%; aspect-ratio: 430/585; }
.fan__card {
  position: absolute;
  top: 0;
  width: 55.3%;
  aspect-ratio: 739/1600;
  border-radius: 34px;
  overflow: hidden;
  border: 8px solid var(--color-neutral-900);
  background: var(--color-neutral-900) center/cover no-repeat;
  cursor: pointer;
  padding: 0;
  transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.45s;
}
.fan__card[data-pos='front'] {
  left: 22.35%;
  transform: rotate(0deg) translateY(0);
  z-index: 3;
  box-shadow: 0 26px 60px rgba(1, 5, 9, 0.7);
}
.fan__card[data-pos='left'] {
  left: 0;
  transform: rotate(-9deg) translateY(5%) scale(0.94);
  z-index: 2;
  box-shadow: 0 14px 30px rgba(1, 5, 9, 0.5);
}
.fan__card[data-pos='right'] {
  left: 44.7%;
  transform: rotate(9deg) translateY(5%) scale(0.94);
  z-index: 2;
  box-shadow: 0 14px 30px rgba(1, 5, 9, 0.5);
}

/* ── Kagit kart (oyun dongusu) ────────────────────────────────────────────── */

.paper {
  position: relative;
  background: var(--paper) url('img/case-paper.webp');
  background-size: 200% 130%;
  background-position: center;
  padding: 46px 42px 40px;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 36px rgba(1, 5, 9, 0.55);
  width: 247px;
  height: 307px;
}

/* ── SSS akordeonu ────────────────────────────────────────────────────────── */

details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details[open] .faq-mark { transform: rotate(45deg); }
.faq-mark { transition: transform 200ms ease; color: var(--color-accent); flex: 0 0 auto; }

/* ── Hukuki sayfa ─────────────────────────────────────────────────────────── */

.toc-link {
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-neutral-700);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  transition: background 140ms ease, color 140ms ease;
}
.toc-link:hover { background: rgba(200, 168, 122, 0.14); color: var(--color-accent-300); }

/* Doldurulmasi gereken yer tutucu — gozden kacmasin diye GORUNUR isaretli */
.fillin {
  background: rgba(210, 153, 34, 0.16);
  border-bottom: 1px dashed #d29922;
  color: #d29922;
  padding: 0 4px;
  font-family: var(--font-heading);
}

/* Genis icerik kendi kutusunda kaysin — sayfa govdesi yatayda ASLA kaymaz */
.tablewrap { overflow-x: auto; margin: 18px 0 0; }
.tablewrap table {
  width: 100%; min-width: 480px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.tablewrap th, .tablewrap td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--color-neutral-300);
  vertical-align: top;
}
.tablewrap th {
  font-family: var(--font-heading);
  font-weight: 400; font-size: 12.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  background: var(--color-surface);
}
.tablewrap td { color: var(--color-neutral-700); }
.tablewrap td strong, .tablewrap th strong { color: var(--color-text); }

/* ── Duyarlilik ───────────────────────────────────────────────────────────── */

/* Izgara hucresinin kendi icerigi tarafindan SISIRILMESINI engelle.
   `1fr` aslinda `minmax(auto, 1fr)`; `auto` alt sinir hucrenin min-content'i
   demek ve `.tablewrap table { min-width: 480px }` oradan sizip TUM sutunu
   480px'e cikariyordu. 390px'lik telefonda hukuki sayfanin govde metni
   sagdan kirpiliyordu (govde `overflow-x: clip` oldugu icin kaydirilamiyordu
   da) — OLCULDU: `.legal-grid` sutunu 320px'te de 390px'te de 480px.
   min-width:0 alt siniri sifirlar; tablo yine kendi kutusunda kayar. */
.legal-grid > * { min-width: 0; }
.tablewrap { min-width: 0; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr !important; gap: 44px !important; }
  .legal-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  .legal-toc { position: static !important; flex-direction: row !important; flex-wrap: wrap; }
  .stage { grid-template-columns: 60px minmax(0, 1fr) !important; margin-left: 0 !important; }

  .site-header__bar { padding: 9px 18px; gap: 12px; }

  /* Menu katlanir. Asagidaki kurallarin hepsi JS bayragina bagli — bkz. .navtoggle */
  :root[data-nav='ready'] .navtoggle { display: inline-flex; }
  :root[data-nav='ready'] .navpanel { display: none; }
  :root[data-nav='ready'] .navpanel.is-open {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 2px 0 6px;
    /* Yatay tutulan telefonda liste ekrandan uzun kalabilir; kendi icinde
       kaysin. dvh adres cubugu acikken de dogru olcuyu verir, vh eski
       tarayicilar icin yedek. */
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
  }
  /* Acilir listenin bicimi de JS bayragina bagli: JS yoksa menu eski
     kompakt satir halinde sarar, boylece yedek gorunum eskisinden KOTU
     olmaz (olculdu: bayraksiz 215px, bayrakla katlanmis 63px). */
  :root[data-nav='ready'] .navpanel .mainnav { flex-direction: column; align-items: stretch; gap: 2px; }
  :root[data-nav='ready'] .navpanel .nav-link { font-size: 15px; padding: 12px 14px; border-radius: var(--radius-md); }
  :root[data-nav='ready'] .navpanel .langwrap { align-self: flex-start; }
}

@media (max-width: 760px) {
  .nav-link { font-size: 12.5px; padding: 8px 10px; }
  .fan { width: 100%; max-width: 360px; }
  .paper { width: 100%; height: auto; min-height: 260px; }

  /* İp dar ekranda da CIZILIR (24 Agu 2026).
     Onceki surumde gizliydi: kagit kartlar tam genislikte alt alta dizilince
     raptiyeler kartin ORTASINDA kaliyor, iki raptiye arasindaki dikey atlama
     dogrudan kartin govde metninin ustunden geciyordu. Cozum ipi gizlemek
     degil, raptiyeyi kenara almak: dar ekranda kagit raptiyeleri kartin sol
     ust kosesine gecer, ip de kartin 42px'lik sol bosluguna iner — metnin
     ustunden gecmez. `left` satir ici stille verildigi icin !important sart. */
  .paper .pin { left: 20px !important; }

  /* Ayni gerekce, "Nasil Oynanir" adim kartlari: masaustunde raptiye 96px'lik
     sayi sutununun ortasinda (left:44px). Dar ekranda sutun 60px'e dusuyor ve
     ip tam "04" rakaminin uzerinden geciyordu; raptiye kartin 36px'lik sol
     bosluguna alindi. */
  .stage .pin { left: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* İp GIZLENMEZ — tasarimin imza ogesi ve vestibuler bir hareket degil,
     dekoratif bir cizgi. Hareket azaltmada scroll'a bagli aciga cikma
     atlanir, ip tamami cizili olarak durur (site.js: initThread). */
}