/* =========================================================
   GECE OLAY YERİ KATMANI
   Islak asfalt, sarı polis şeridi, kırmızı-mavi tepe lambası, fener.
   ========================================================= */
body {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(227,48,42,.07), transparent 60%),
    radial-gradient(1200px 500px at 90% -10%, rgba(45,104,255,.08), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2 { font-stretch: 122%; letter-spacing: -.02em; }

/* Polis şeridi */
.tape {
  display: flex; align-items: center; height: 36px; overflow: hidden; white-space: nowrap;
  color: #0A0D12; font-weight: 900; font-stretch: 125%; font-size: .78rem; letter-spacing: .14em;
  background: linear-gradient(#0A0D12 0 3px, transparent 3px calc(100% - 3px), #0A0D12 calc(100% - 3px)), var(--marker);
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.75);
}
.tape span { padding: 0 16px; flex: none; }
.tape b { flex: none; width: 34px; height: 100%; background: repeating-linear-gradient(-45deg, #0A0D12 0 7px, transparent 7px 14px); }

/* Kabuk */
.topbar { background: rgba(10,13,18,.85); border-bottom: 0; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: repeating-linear-gradient(-45deg, var(--marker) 0 10px, #0A0D12 10px 20px); }
.sidenav { background: #0D1117; border-right-color: var(--line); }
.sidenav a.nav[aria-current="page"] { background: var(--marker); color: var(--marker-ink); }
.bottomnav { background: #0D1117; }
.bottomnav a[aria-current="page"] { color: var(--marker); }
.btn-primary { background: #E8ECF0; color: #0A0D12; }
.btn-primary:hover { background: #fff; }
.btn-ghost:hover { background: var(--surface-2); }
.chip-ink { background: var(--surface-2); color: var(--marker); }

/* Rütbe işareti katmanları: 1-4 gri, 5-8 sarı, 9-12 sarı + kırmızı bant */
.rk { background: #4A5361; color: #E8ECF0; }
.rk.t2 { background: var(--marker); color: #0A0D12; }
.rk.t3 { background: linear-gradient(180deg, var(--marker) 0 62%, var(--siren-r) 62%); color: #0A0D12; }

/* Koyu yüzeylere çevrilen bloklar */
.daily-strip { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 6px solid var(--marker); }
.daily-strip .small { color: var(--ink-2); }
.bundle { background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding-top: 28px; }
.bundle::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--marker) 0 12px, #0A0D12 12px 24px); }
.player { background: #06080B; color: var(--ink); border: 1px solid var(--line); }
.verdict, .result-hero { background: var(--surface); color: var(--ink); border: 1px solid var(--line); position: relative; overflow: hidden; padding-top: 34px; }
.verdict::before, .result-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--marker) 0 12px, #0A0D12 12px 24px); }
.gain div { background: var(--surface-2); }
.pbox.rank { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.pbox.rank .hint { color: var(--ink-2); }
.progress { background: var(--surface-2); }
.filters button[aria-pressed="true"], .who button[aria-pressed="true"] { background: var(--marker); color: var(--marker-ink); border-color: var(--marker); }
.tabs { background: rgba(10,13,18,.92); }
.tabs a[aria-current="page"] { background: transparent; color: var(--marker); border-color: var(--marker); }
.seg button[aria-pressed="true"] { background: var(--marker); color: var(--marker-ink); }
.podium .first .stand { background: var(--marker); color: #0A0D12; }
.streak div.done { background: var(--marker-soft); color: var(--marker); box-shadow: inset 0 0 0 1px rgba(245,197,24,.4); }
.streak div.today { outline-color: var(--marker); }
.node { background: #0E1319; border-color: #3A4656; }
.node.victim { background: var(--marker); color: #0A0D12; border-color: var(--marker); }
.node.victim .dotp { background: #0A0D12; color: var(--marker); }
.board { background-color: #0C1016; background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.4px); }
.board svg.links line { stroke: #8D99A8; }
.board svg.links line.hot { stroke: var(--siren-r); }
.seal { background: #0A0D12; color: var(--marker); box-shadow: inset 0 0 0 4px #0A0D12, inset 0 0 0 6px var(--marker); }
.badge.locked .seal { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 4px var(--surface-2), inset 0 0 0 6px var(--line); }
.switch[aria-checked="true"] { background: #3B3214; }
.ladder div.now { border-color: var(--marker); box-shadow: inset 0 0 0 1px var(--marker); }
.ladder div.future .rk { background: var(--surface-2); color: var(--ink-3); }
#toast { background: #1A222D; color: var(--ink); border: 1px solid var(--line); }
.portrait { background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.06) 23px 24px), #0F141B; }
.portrait svg { color: #3A4554; }
.portrait .ph-note { background: #0A0D12; color: var(--ink-3); }
.rules i { color: var(--marker); }
.sso .btn { background: var(--surface); }
.sso .btn.apple { background: #E8ECF0; color: #0A0D12; border-color: #E8ECF0; }
.doc, .receipt { box-shadow: 0 30px 60px -25px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4); }

/* Delil poşeti: karanlıkta fenerle aydınlanan içerik */
.bag { background: var(--surface); border-color: var(--line); }
.bag-label { background: var(--surface); }
.bag-window { background: radial-gradient(70% 62% at 50% 44%, color-mix(in srgb, var(--tone) 34%, #18202B) 0%, #0D1118 78%); color: #D9DFE6; }
.bag-window::before { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 37%, transparent 44%, transparent 66%, rgba(255,255,255,.06) 70%, transparent 74%); }
.bag-window::after { border-color: rgba(255,255,255,.10); }
.bag-window .bag-no { color: var(--marker); }
.bag-window .lock { background: var(--marker); color: #0A0D12; }
.bundle .bags-mini span { color: #D9DFE6; background: #18202B !important; border-top-color: var(--marker); }

/* ---------- Olay yeri sahnesi (ana sayfa açılışı) ---------- */
.scene {
  position: relative; isolation: isolate; overflow: hidden; background: #06080B;
  min-height: min(86vh, 720px); margin: -20px -16px 0; touch-action: pan-y; cursor: none;
}
@media (min-width: 960px) { .scene { margin: -28px -40px 0; } }
.scene .ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .dark {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle var(--fr, 260px) at var(--fx, 72%) var(--fy, 52%), rgba(0,0,0,0) 0, rgba(0,0,0,.12) 40%, rgba(3,4,7,.86) 100%);
}
.scene .siren { position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
.scene .siren.r { background: radial-gradient(55% 60% at -5% -5%, rgba(227,48,42,.6), transparent 70%); }
.scene .siren.b { background: radial-gradient(55% 60% at 105% -5%, rgba(45,104,255,.6), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .scene .siren.r { animation: siren 1.8s ease-in-out infinite; }
  .scene .siren.b { animation: siren 1.8s ease-in-out infinite reverse; }
  @keyframes siren { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .scene .siren { opacity: .45; } }
.scene .tape { position: absolute; left: -12%; right: -12%; z-index: 3; }
.scene .tape.t1 { top: 12%; transform: rotate(-6deg); }
.scene .tape.t2 { top: 23%; transform: rotate(4deg); }
.scene .copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 110px 20px 26px; cursor: auto;
  background: linear-gradient(180deg, transparent, rgba(5,6,9,.82) 38%, rgba(5,6,9,.96));
}
.scene .copy h1 { font-size: clamp(2.5rem, 8vw, 4.8rem); text-shadow: 0 4px 30px rgba(0,0,0,.8); }
.scene .copy .lead { color: var(--ink-2); font-size: 1.08rem; max-width: 40ch; margin-top: 12px; }
.scene .copy .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.scene .hint { position: absolute; right: 16px; top: 36%; z-index: 4; display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; font-weight: 700; color: var(--ink-2); background: rgba(10,13,18,.75); padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); }
.scene .case-tag { position: absolute; left: 48px; top: 36%; z-index: 4; font-family: var(--type); font-size: .82rem; color: #0A0D12; background: var(--doc); padding: 10px 12px; transform: rotate(-3deg); box-shadow: 0 12px 24px rgba(0,0,0,.7); line-height: 1.4; }
.scene .case-tag::before { content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--siren-r); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
@media (max-width: 760px) { .scene .case-tag { display: none; } .scene .hint { top: 34%; } }
@media (min-width: 960px) {
  .scene .copy { top: 0; right: auto; width: 56%; display: flex; align-items: flex-end; padding: 140px 48px 48px; background: linear-gradient(90deg, rgba(5,6,9,.94) 0%, rgba(5,6,9,.8) 60%, transparent); }
  .scene .copy > div { max-width: 600px; }
  .scene .case-tag { left: auto; right: 7%; top: auto; bottom: 10%; transform: rotate(3deg); }
  .scene .tape.t1 { top: 8%; } .scene .tape.t2 { top: 17%; }
}

/* Bölüm ayırıcı şerit */
.tape-divider { margin: 52px -16px 0; transform: rotate(-1.2deg); }
@media (min-width: 960px) { .tape-divider { margin: 60px -40px 0; } }
@media (min-width: 960px) { .scene .copy { width: 60%; } .scene .copy h1 { font-size: clamp(2.6rem, 4.4vw, 4.1rem); } }
/* Karanlık oda: vaka başlığında kırmızı güvenlik lambası ışığı */
.case-head { position: relative; }
.case-head::before { content: ""; position: absolute; z-index: -1; inset: -28px -40px -10px; background: radial-gradient(520px 200px at 78% 0%, rgba(227,48,42,.22), transparent 70%); pointer-events: none; }
.ev-item[aria-current="true"] { border-color: var(--marker); box-shadow: inset 0 0 0 1px var(--marker); }

/* ---------- Zenginleştirme: sahneli kapaklar, yağmur, afiş tipografisi ---------- */
h1, h2 { font-stretch: 72%; font-weight: 850; text-transform: uppercase; letter-spacing: .005em; line-height: .94; }
.scene .copy h1 { font-size: clamp(3.2rem, 11vw, 6.2rem); line-height: .9; }
@media (min-width: 960px) { .scene .copy h1 { font-size: clamp(3.6rem, 6.4vw, 6rem); } }
.bag-label h3 { font-stretch: 75%; font-weight: 850; text-transform: uppercase; font-size: 1.6rem; letter-spacing: .01em; line-height: 1; }

.bag-window { aspect-ratio: 16 / 10.5; }
.bag-window .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .3s; filter: saturate(.95) brightness(.92); }
a.bag:hover .bag-window .scene-art { transform: scale(1.04); filter: saturate(1.05) brightness(1.05); }
.bag-window .vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0,0,0,.55)), linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6)); pointer-events: none; }
.bag-window .bag-no, .bag-window .lock, .bag-window .bag-tur { z-index: 2; }
.bag-window .bag-tur { position: absolute; right: 14px; bottom: 12px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #E8ECF0; background: rgba(10,13,18,.7); padding: 4px 9px; border-radius: 99px; border: 1px solid rgba(255,255,255,.12); }
.bag-window::before { z-index: 1; }
.bag-window::after { z-index: 1; }
.bundle .bags-mini span { position: relative; overflow: hidden; width: 70px; height: 84px; }
.bundle .bags-mini span .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.scene .rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.scene .fog { position: absolute; inset: -20% -20% 0; z-index: 2; pointer-events: none; opacity: .5;
  background: radial-gradient(40% 30% at 30% 70%, rgba(150,170,190,.18), transparent 70%), radial-gradient(35% 25% at 75% 80%, rgba(150,170,190,.14), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .scene .fog { animation: fog 22s ease-in-out infinite alternate; }
  @keyframes fog { from { transform: translateX(-4%); } to { transform: translateX(6%); } }
}
.scene .ground g[transform^="translate(10"] { filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }
.case-layout > *, .buy > *, .grid-bags > *, .scroller > * { min-width: 0; }