/* =========================================================
   STAR // DİJİTAL ODA
   brutalism + eskiz + cybercore + graffiti + 8-bit
   Palet: DawnBringer 32 (avatarın kendi renkleri)
   ========================================================= */

/* Yazı tipleri sitenin kendisinden yüklenir (Google'a istek gitmez → gizlilik + hız). Sadece Latin + Türkçe karakterler. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url('../assets/fonts/archivo-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url('../assets/fonts/archivo-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/caveat-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/caveat-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/caveat-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/caveat-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik Glitch'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/rubik-glitch-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik Glitch'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/rubik-glitch-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik Wet Paint'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/rubik-wet-paint-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik Wet Paint'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/rubik-wet-paint-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/silkscreen-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/silkscreen-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/silkscreen-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/silkscreen-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Silkscreen'de Türkçenin Ğ ğ İ ı Ş ş harfleri yok; fontun kendi parçalarıyla çizilmiş yama (sonra tanımlandığı için bu harflerde önce o denenir) */
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/silkscreen-tr-400.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130-0131, U+015E-015F; }
@font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/silkscreen-tr-700.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130-0131, U+015E-015F; }
/* UltraTurk'ün oyunda kullandığı font (VCR OSD Mono, Türkçe karakterli sürüm; sadece Latin + Türkçe alt kümesi) */
@font-face { font-family: 'VCR OSD Mono TR'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/vcr-osd-mono-tr.woff2') format('woff2'); }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/vt323-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/vt323-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #222034;
  --paper: #F2EEE3;
  --paper2: #E6E0D0;
  --white: #FFFFFF;
  --acid: #99E550;
  --orange: #DF7126;
  --pink: #D77BBA;
  --cyan: #5FCDE4;
  --yellow: #FBF236;
  --red: #AC3232;
  --hot: #FF2A2A;
  --steel: #9BADB7;
  --grey: #847E87;
  --navy: #3F3F74;
  --green: #6ABE30;
  --dkgreen: #4B692F;
  --blue: #639BFF;
  --ice: #CBDBFC;

  /* semantik */
  --bg: var(--paper);
  --fg: var(--ink);
  --line: var(--ink);
  --panel: var(--white);
  --panel2: var(--paper2);
  --shadow: var(--ink);
  --accent: var(--acid);
  --muted: var(--grey);
  --grid: rgba(34, 32, 52, .07);

  --f-brut: 'Archivo', system-ui, sans-serif;
  --f-px: 'Silkscreen', ui-monospace, monospace;
  --f-term: 'VT323', ui-monospace, monospace;
  --f-tag: 'Rubik Wet Paint', 'Archivo', cursive;
  --f-hand: 'Caveat', cursive;
  --f-glitch: 'Rubik Glitch', 'Archivo', cursive;

  --b: 4px;
  --gut: 44px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --cur: auto;
}

html[data-mode="drug"] {
  --bg: #050409;
  --fg: #F2EEE3;
  --line: #99E550;
  --panel: #0B0A12;
  --panel2: #12101C;
  --shadow: #D77BBA;
  --muted: #9BADB7;
  --grid: rgba(153, 229, 80, .07);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--fg);
  font-family: var(--f-brut);
  font-size: 18px;
  line-height: 1.5;
  cursor: var(--cur);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html[data-mode="drug"] body { background-size: 48px 48px; }

img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button, [role="tab"], label { cursor: pointer; }
a { color: inherit; }
a:hover { color: var(--orange); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
mark { background: var(--accent); color: var(--ink); padding: 0 5px; }

.px { font-family: var(--f-px); text-transform: uppercase; } /* Silkscreen'in küçük harfleri büyük harfle aynı; büyütünce Türkçede i → İ doğru görünür */
.term { font-family: var(--f-term); }
.hand { font-family: var(--f-hand); }
.tag { font-family: var(--f-tag); }
.brut { font-family: var(--f-brut); font-stretch: 125%; font-weight: 900; }
.pixelated { image-rendering: pixelated; }
.acc { color: var(--accent); }
.cy { color: var(--cyan); }
.dim { color: var(--muted); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spr { display: inline-flex; line-height: 0; }
.spr svg { display: block; }
.mob-only { display: none; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); font-family: var(--f-px); font-size: 12px; }
.skip:focus { left: 8px; }

/* ---------- animasyon ---------- */
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes jit { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 25% { transform: translate(2px, -1px) rotate(-5deg); } 50% { transform: translate(-1px, 2px) rotate(-7deg); } 75% { transform: translate(1px, 1px) rotate(-6deg); } }
@keyframes glx { 0%, 90%, 100% { transform: translate(0, 0) skewX(0); } 91% { transform: translate(6px, -2px) skewX(10deg); text-shadow: -8px 0 0 var(--pink), 8px 0 0 var(--cyan); } 93% { transform: translate(-8px, 2px) skewX(-6deg); text-shadow: 8px 3px 0 var(--cyan), -6px -3px 0 var(--orange); } 95% { transform: translate(0, 0) skewX(0); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
@keyframes sl { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-16px); } 40% { transform: translateX(12px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(20px); } }
@keyframes shake { 0%, 86%, 100% { transform: translate(0, 0); } 88% { transform: translate(-6px, 3px); } 90% { transform: translate(5px, -4px); } 92% { transform: translate(-3px, -2px); } 94% { transform: translate(4px, 2px); } }
@keyframes flick { 0%, 48%, 52%, 100% { opacity: 1; } 50% { opacity: .35; } 80% { opacity: .8; } }
@keyframes pop { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 25% { transform: scaleY(.9); } 50% { transform: scaleY(.55); } 75% { transform: scaleY(.75); } }
@keyframes sweep { from { transform: translateY(-10vh); } to { transform: translateY(110vh); } }
.blink { animation: blink 1s steps(1) infinite; }
.bob { animation: bob 1.1s steps(2) infinite; }

/* ---------- çerçeve ---------- */
.frame {
  max-width: 1440px;
  margin: 0 auto;
  border-left: var(--b) solid var(--line);
  border-right: var(--b) solid var(--line);
  background: transparent;
}

/* ---------- üst bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: stretch;
  height: 60px;
  background: var(--bg);
  border-bottom: var(--b) solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  background: var(--ink); color: var(--accent);
  font-family: var(--f-px); font-size: 18px; font-weight: 700; text-decoration: none;
  border-right: var(--b) solid var(--line);
  white-space: nowrap;
}
.logo:hover { color: var(--yellow); }
.nav { display: flex; flex-grow: 1; min-width: 0; overflow: hidden; }
.nav a {
  display: flex; align-items: center;
  padding: 0 18px;
  border-right: var(--b) solid var(--line);
  font-family: var(--f-px); font-size: 13px; text-decoration: none; white-space: nowrap;
}
.nav a:hover, .nav a.on { background: var(--ink); color: var(--paper); }
.nav a.on { box-shadow: inset 0 -6px 0 var(--accent); }
.top-ctrl { display: flex; align-items: center; gap: 12px; padding: 0 16px; margin-left: auto; }
.lang { display: flex; border: 3px solid var(--line); }
.lang button {
  min-width: 44px; height: 38px; border: 0;
  background: var(--panel); color: var(--fg);
  font-family: var(--f-px); font-size: 12px;
}
.lang button + button { border-left: 3px solid var(--line); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pill {
  display: flex; align-items: stretch; height: 42px; padding: 0;
  border: 3px solid var(--line); border-radius: 999px; overflow: hidden;
  background: var(--panel); box-shadow: 4px 4px 0 var(--shadow);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover { transform: translate(calc(var(--mx, 0px) - 2px), calc(var(--my, 0px) - 2px)); box-shadow: 6px 6px 0 var(--shadow); }
  .pill:hover .pill-real, .pill:hover .pill-drug { letter-spacing: .08em; }
}
.pill:active { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 var(--shadow) !important; transition-duration: .06s; }
.pill span { transition: letter-spacing .3s var(--ease-out), background-color .3s, color .3s; }
.pill span { display: flex; align-items: center; padding: 0 14px; font-family: var(--f-px); font-size: 12px; }
.pill-real { background: var(--accent); color: var(--ink); font-weight: 700; }
.pill-drug { background: var(--ink); color: var(--steel); }
html[data-mode="drug"] .pill-real { background: #000; color: var(--grey); font-weight: 400; }
html[data-mode="drug"] .pill-drug { background: var(--acid); color: #000; font-weight: 700; animation: hue 4s linear infinite; }
html[data-mode="drug"] .pill { box-shadow: 0 0 14px rgba(215, 123, 186, .8); border-color: var(--paper); }
.menu-btn { display: none; width: 56px; border: 0; border-left: var(--b) solid var(--line); background: var(--yellow); color: var(--ink); font-family: var(--f-px); font-size: 22px; font-weight: 700; }
.mobile-nav { display: none; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; white-space: nowrap; background: var(--ink); color: var(--accent); border-bottom: var(--b) solid var(--line); }
.ticker-track { display: inline-flex; align-items: center; gap: 28px; padding: 10px 0; font-family: var(--f-px); font-size: 14px; animation: mq 30s linear infinite; }
html[data-mode="drug"] .ticker { background: var(--pink); color: #000; }
html[data-mode="drug"] .ticker-track { animation-duration: 16s; font-weight: 700; }

/* ---------- ortak bileşenler ---------- */
/* Tuşlar: gölge boyu --sh, mıknatıs kayması --mx/--my. Hover sadece gerçek fareli cihazlarda. */
.btn {
  --sh: 6px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 20px;
  border: var(--b) solid var(--line);
  background: var(--panel); color: var(--fg);
  font-family: var(--f-px); font-size: 14px; text-decoration: none; text-align: center;
  box-shadow: var(--sh) var(--sh) 0 var(--shadow);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  content: ''; position: absolute; inset: -4px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, .55) 52%, transparent 60%);
  translate: -120% 0;
  transition: translate .7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: inherit; transform: translate(calc(var(--mx, 0px) - 3px), calc(var(--my, 0px) - 3px)); box-shadow: calc(var(--sh) + 3px) calc(var(--sh) + 3px) 0 var(--shadow); }
  .btn:hover::after { translate: 120% 0; }
}
.btn:focus-visible { transform: translate(-3px, -3px); box-shadow: calc(var(--sh) + 3px) calc(var(--sh) + 3px) 0 var(--shadow); }
.btn:active { transform: translate(var(--sh), var(--sh)) !important; box-shadow: 0 0 0 var(--shadow) !important; transition-duration: .06s; }
.btn-acc { background: var(--accent); color: var(--ink); font-weight: 700; }
.btn-or { background: var(--orange); color: var(--ink); font-weight: 700; }
.btn-cy { background: var(--cyan); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink::after { background: linear-gradient(105deg, transparent 38%, rgba(153, 229, 80, .4) 46%, rgba(153, 229, 80, .4) 52%, transparent 60%); }
.btn-dash { --shadow: rgba(34, 32, 52, .28); border-style: dashed; background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: var(--sh) var(--sh) 0 var(--shadow) !important; }
html[data-mode="drug"] .btn { box-shadow: calc(var(--sh) * -.7) 0 0 var(--pink), calc(var(--sh) * .7) 0 0 var(--cyan); }
html[data-mode="drug"] .btn-dash { --shadow: var(--pink); }
@media (hover: hover) and (pointer: fine) {
  html[data-mode="drug"] .btn:hover { box-shadow: calc(var(--sh) * -1.2) 0 0 var(--pink), calc(var(--sh) * 1.2) 0 0 var(--cyan), 0 0 22px rgba(153, 229, 80, .45); }
}
html[data-mode="drug"] .btn:active { box-shadow: 0 0 0 var(--pink) !important; }
html[data-mode="drug"] .btn-acc, html[data-mode="drug"] .btn-or, html[data-mode="drug"] .btn-cy { color: #000; }

.chip { display: inline-flex; align-items: center; padding: 5px 9px; border: 3px solid var(--line); font-family: var(--f-px); font-size: 11px; background: var(--panel); }
.chip-red { background: var(--hot); color: #fff; }
.chip-y { background: var(--yellow); color: var(--ink); }
.chip-p { background: var(--pink); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.btn-row .btn { --sh: 5px; min-height: 48px; padding: 0 16px; font-size: 13px; }

.tape { position: absolute; top: -18px; left: 40%; z-index: 2; width: 120px; height: 34px; background: rgba(251, 242, 54, .75); border: 1px solid rgba(34, 32, 52, .2); transform: rotate(-4deg); }
.tape-p { left: auto; right: 18%; background: rgba(215, 123, 186, .7); transform: rotate(6deg); }

.win-dots { display: flex; gap: 5px; }
.win-dots i { width: 12px; height: 12px; background: var(--orange); }
.win-dots i:nth-child(2) { background: var(--accent); }
.win-dots i:nth-child(3) { background: var(--pink); }

/* ---------- HERO ---------- */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: var(--b) solid var(--line); }
.hero-main { grid-column: span 8; position: relative; padding: 32px 40px 48px; display: flex; flex-direction: column; gap: 26px; min-height: 720px; }
.hero-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.box-label { font-family: var(--f-px); font-size: 12px; padding: 6px 10px; border: 3px solid var(--line); background: var(--panel); }
.sysline { font-size: 24px; }
.hero-title { position: relative; margin-top: 18px; }
.star-h1 {
  position: relative; margin: 0;
  font-family: var(--f-brut); font-stretch: 125%; font-weight: 900;
  font-size: clamp(96px, 15.5vw, 232px); line-height: .8; letter-spacing: -0.05em;
  text-shadow: 9px 9px 0 var(--accent);
  white-space: nowrap;
  animation: glx 3.4s steps(1) infinite;
}
.star-h1 .ch { display: inline-block; will-change: transform; }
.hero-tag {
  position: absolute; right: 2%; bottom: -70px;
  font-size: clamp(70px, 10vw, 140px); line-height: 1; color: var(--orange);
  -webkit-text-stroke: 3px var(--ink);
  animation: jit .45s steps(2) infinite;
  pointer-events: none;
}
.hero-note { position: absolute; left: 6px; bottom: -88px; display: flex; align-items: flex-end; gap: 6px; font-size: 32px; line-height: 1; transform: rotate(-3deg); }
.hero-note svg path, .pill-note svg path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero-copy { margin-top: 100px; display: flex; flex-direction: column; gap: 22px; }
.manifesto { margin: 0; font-size: clamp(32px, 3.6vw, 50px); line-height: .98; letter-spacing: -0.02em; }
.mf-box { display: inline-block; margin-top: 8px; padding: 2px 12px 6px; background: var(--ink); color: var(--accent); }
.hero-sub { margin: 0; max-width: 560px; font-size: 20px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.cta-row .btn { min-height: 54px; font-size: 15px; }
.cta-tick { font-size: 28px; line-height: 1; }

.hero-side { grid-column: span 4; position: relative; border-left: var(--b) solid var(--line); display: flex; flex-direction: column; }
.halftone { position: absolute; inset: 0; background-image: radial-gradient(var(--fg) 1.1px, transparent 1.5px); background-size: 7px 7px; opacity: .14; pointer-events: none; }
.pill-note { position: absolute; right: 22px; top: 8px; z-index: 2; display: flex; align-items: center; gap: 4px; font-size: 26px; transform: rotate(4deg); }
.avatar-win { position: relative; margin: 64px 34px 0; border: var(--b) solid var(--line); background: var(--panel); box-shadow: 10px 10px 0 var(--shadow); transform: rotate(2deg); }
.win-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: var(--ink); color: var(--paper); }
.win-name { font-family: var(--f-px); font-size: 12px; }
.win-name::before { content: 'avatar_real.png'; }
html[data-mode="drug"] .win-name::before { content: 'avatar_drug.gif'; }
.av { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.av-drug { display: none; background: #000; }
html[data-mode="drug"] .av-real { display: none; }
html[data-mode="drug"] .av-drug { display: block; }
.avatar-win figcaption { display: flex; justify-content: space-between; padding: 8px 10px; border-top: var(--b) solid var(--line); font-family: var(--f-px); font-size: 11px; }
.lvl-sticker { position: absolute; left: -30px; bottom: 70px; width: 84px; height: 84px; border-radius: 50%; border: var(--b) solid var(--ink); background: var(--pink); color: var(--ink); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--f-px); font-size: 13px; font-weight: 700; line-height: 1.1; transform: rotate(-14deg); }
.status { position: relative; margin: 40px 34px 34px; padding: 14px 16px; background: var(--ink); color: var(--paper); border: var(--b) solid var(--ink); box-shadow: 6px 6px 0 var(--accent); font-size: 22px; line-height: 1.2; }

/* ---------- bölüm başlıkları ---------- */
.sec { border-bottom: var(--b) solid var(--line); }
.sec-head { display: flex; align-items: stretch; border-bottom: var(--b) solid var(--line); background: var(--bg); }
.sec-num { display: flex; align-items: center; justify-content: center; width: 120px; flex-shrink: 0; border-right: var(--b) solid var(--line); background: var(--accent); color: var(--ink); font-family: var(--f-px); font-size: 40px; font-weight: 700; }
.sec-title { margin: 0; padding: 22px 28px; flex-grow: 1; font-size: clamp(34px, 4.5vw, 64px); line-height: .9; letter-spacing: -0.02em; }
.sec-note { display: flex; align-items: center; padding: 0 28px; font-size: 28px; transform: rotate(-2deg); }
.sec-link { display: flex; align-items: center; padding: 0 28px; border-left: var(--b) solid var(--line); font-size: 13px; text-decoration: none; }
.sec-link:hover { background: var(--ink); color: var(--paper); }

/* ---------- 01 ODA ---------- */
.oda-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.oda-card-col { grid-column: span 4; padding: 44px 36px; border-right: var(--b) solid var(--line); }
.idcard { border: var(--b) solid var(--line); background: var(--panel); box-shadow: 8px 8px 0 var(--shadow); transform: rotate(-1.5deg); }
.idcard-head { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--accent); color: var(--ink); border-bottom: var(--b) solid var(--line); font-family: var(--f-px); font-size: 14px; font-weight: 700; }
.idcard-who { display: flex; align-items: center; gap: 16px; padding: 16px; border-bottom: var(--b) dashed var(--line); }
.idcard-who img { display: block; width: 92px; height: 92px; border: 3px solid var(--line); background: var(--paper); }
.idcard-name { font-size: 44px; line-height: .85; }
.idcard-class { margin-top: 8px; font-size: 11px; }
.idcard-dl { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 3px; font-size: 22px; line-height: 1.15; }
.idcard-dl dt { color: var(--muted); }
.idcard-dl dd { margin: 0; }
.online-dot { color: var(--green); }
.barcode { height: 40px; margin: 0 16px 16px; background-image: repeating-linear-gradient(90deg, var(--fg) 0 2px, transparent 2px 5px, var(--fg) 5px 9px, transparent 9px 11px, var(--fg) 11px 12px, transparent 12px 16px); }
.oda-text { grid-column: span 5; padding: 44px 40px; display: flex; flex-direction: column; gap: 20px; }
.oda-text p { margin: 0; font-size: 20px; line-height: 1.55; }
.oda-text .hand { font-size: 27px; }
.oda-hello { margin: 0; font-size: 46px; font-stretch: 100%; line-height: 1; letter-spacing: -0.01em; }
.oda-hello .dot { color: var(--orange); }
.oda-text p.oda-todo { margin-top: 8px; padding: 14px 16px; border: 3px dashed var(--line); font-size: 12px; line-height: 1.7; }
.oda-notes { grid-column: span 3; padding: 36px 28px; border-left: var(--b) solid var(--line); display: flex; flex-direction: column; gap: 30px; background: rgba(34, 32, 52, .04); }
.sticky { position: relative; padding: 24px 20px 20px; color: var(--ink); box-shadow: 5px 6px 0 rgba(34, 32, 52, .35); }
.sticky p { margin: 0; font-size: 26px; line-height: 1.1; }
.sticky .hand-b { margin-bottom: 6px; font-size: 28px; font-weight: 700; }
.sticky .tape { top: -14px; left: 34%; width: 90px; height: 28px; background: rgba(242, 238, 227, .75); transform: rotate(-5deg); }
.sticky-y { background: var(--yellow); transform: rotate(3deg); }
.sticky-p { background: var(--pink); transform: rotate(-1deg); }
.quote-block { padding: 22px 18px; background: var(--ink); border: var(--b) solid var(--ink); transform: rotate(-2.5deg); box-shadow: 6px 6px 0 var(--orange); }
.quote-block .tag { margin: 0; font-size: 34px; line-height: 1.05; color: var(--accent); }
.quote-block .px { margin: 12px 0 0; font-size: 10px; color: var(--steel); }

/* ---------- 02 PROJELER ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding: 56px var(--gut) 44px; align-items: start; }
.proj-card { position: relative; display: flex; flex-direction: column; border: var(--b) solid var(--line); background: var(--panel); box-shadow: 10px 10px 0 var(--shadow); }
.proj-card {
  --rz: 0deg;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--rz)) translateY(var(--ty, 0px));
  transition: transform .7s var(--ease-out), box-shadow .5s var(--ease-out);
}
.proj-card.tilting { transition: transform .15s linear, box-shadow .5s var(--ease-out); }
.proj-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .5), transparent 42%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
}
@media (hover: hover) and (pointer: fine) {
  .proj-card:hover { --rz: 0deg; --ty: -8px; box-shadow: 16px 16px 0 var(--shadow); }
  .proj-card:hover::after { opacity: 1; }
}
.tilt-l { --rz: -1deg; }
.tilt-r { --rz: 1.2deg; }
.proj-offset { margin-top: 36px; }
.proj-top { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: var(--b) solid var(--line); font-size: 12px; }
.proj-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.proj-body > p { margin: 0; font-size: 18px; line-height: 1.5; }
.proj-name { margin: 0; font-size: 48px; line-height: .9; letter-spacing: -0.03em; }
.proj-kicker { margin: 6px 0 0; font-size: 11px; }
.ut-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-bottom: var(--b) solid var(--line); background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px); }
.ut-lines { position: absolute; left: 7%; top: 50%; margin: 0; display: flex; flex-direction: column; gap: .32em; min-width: 11ch; transform: translateY(-50%); font-family: 'VCR OSD Mono TR', var(--f-term); font-size: clamp(17px, 2.3vw, 32px); line-height: 1; letter-spacing: .02em; color: #ff1e1e; text-shadow: 0 0 10px rgba(255, 30, 30, .75), 0 0 2px rgba(255, 120, 120, .9); }
.ut-lines span { display: block; min-height: 1em; white-space: nowrap; }
.ut-lines span.typing::after { content: '_'; animation: blink .5s steps(1) infinite; }
.ut-lines.glitch { translate: 3px 0; text-shadow: -3px 0 rgba(95, 205, 228, .8), 3px 0 rgba(255, 30, 30, .9); }
.ut-cap b { color: var(--paper); font-weight: 400; }
.ut-cover img { position: absolute; right: 3%; top: 50%; width: 34%; height: auto; transform: translateY(-50%) rotate(-6deg); filter: drop-shadow(6px 6px 0 var(--navy)); }
.ut-cap { position: absolute; left: 7%; bottom: 14px; font-size: 10px; color: var(--grey); }
.ut-head { display: flex; align-items: center; gap: 14px; }
.ut-head img { width: 58px; height: 58px; padding: 4px; border: 3px solid var(--line); background: var(--ink); }
.role { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.5; }
.role-tag { padding: 2px 6px; background: var(--accent); color: var(--ink); font-weight: 700; }
.cast { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 1px; font-size: 20px; line-height: 1.15; }
.cast div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed rgba(34, 32, 52, .3); }
html[data-mode="drug"] .cast div { border-color: rgba(153, 229, 80, .25); }
.cast dt { color: var(--muted); }
.cast dd { margin: 0; text-align: right; }
.g2048-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 36px; background: var(--panel2); border-bottom: var(--b) solid var(--line); }
.g2048-cover .hand { max-width: 170px; font-size: 32px; line-height: 1; }
.g2048 { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; padding: 10px; background: var(--ink); border: var(--b) solid var(--ink); }
.g2048 span { width: clamp(38px, 4.3vw, 62px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); font-family: var(--f-px); font-weight: 700; font-size: clamp(12px, 1.6vw, 24px); color: var(--ink); transition: transform .1s steps(2); }
.g2048 span.big { font-size: clamp(9px, 1.1vw, 16px); }
.g2048 span.pop { transform: scale(1.15); }
.term-win { margin: 8px var(--gut) 52px; border: var(--b) solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: 10px 10px 0 var(--accent); }
.term-win-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 2px solid var(--navy); font-size: 12px; color: var(--steel); }
.term-body { padding: 16px 20px 18px; font-size: 23px; line-height: 1.3; overflow-x: auto; }
.repo-row { display: grid; grid-template-columns: 200px 150px 70px minmax(0, 1fr); gap: 14px; padding: 6px 0; border-top: 1px dashed rgba(242, 238, 227, .25); }
.repo-row a { color: var(--yellow); }
.repo-row a:hover { color: var(--accent); }

/* ---------- 03 ENVANTER ---------- */
.char-stage { position: relative; height: 300px; border: var(--b) solid var(--ink); background: var(--ink); box-shadow: 8px 8px 0 var(--shadow); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.char-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background-image: linear-gradient(rgba(153, 229, 80, .35) 2px, transparent 2px), linear-gradient(90deg, rgba(153, 229, 80, .35) 2px, transparent 2px); background-size: 30px 30px; transform: perspective(200px) rotateX(55deg); transform-origin: bottom; }
.char-sprite { position: relative; margin-bottom: 46px; }
.char-l, .char-r { position: absolute; top: 10px; font-size: 11px; }
.char-l { left: 12px; color: var(--accent); }
.char-r { right: 12px; color: var(--paper); }
.empty-note { padding: 18px; border: 3px dashed var(--line); font-family: var(--f-px); font-size: 12px; line-height: 1.6; }

/* ---------- 04 OYUN RAFI ---------- */
.shelf-wrap { position: relative; padding: 70px var(--gut) 56px; }
.shelf { display: flex; align-items: flex-end; gap: 22px; padding: 64px 32px 0 24px; margin-top: -40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.shelf::-webkit-scrollbar { height: 10px; }
.shelf::-webkit-scrollbar-thumb { background: var(--ink); }
@media (hover: hover) and (pointer: fine) {
}
.shelf-plank { height: 18px; margin: -2px 0 0; background: var(--ink); box-shadow: 0 10px 0 rgba(34, 32, 52, .25); }
html[data-mode="drug"] .shelf-plank { background: var(--acid); box-shadow: 0 0 18px var(--acid); }
.shelf-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-top: 34px; }
.shelf-msg { display: flex; align-items: center; gap: 14px; }
.shelf-msg p { margin: 0; font-size: 30px; line-height: 1.1; }
.cd-in { display: flex; gap: 16px; padding: 16px; }
.cd-cover { width: 150px; flex-shrink: 0; align-self: flex-start; border: 3px solid var(--line); background: var(--c, var(--red)); }
.cd-cover img { display: block; width: 100%; aspect-ratio: 460 / 215; object-fit: cover; image-rendering: pixelated; }
.cd-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cd-name { font-size: 30px; font-stretch: 100%; line-height: 1; }
.cd-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 1px; font-size: 20px; line-height: 1.15; }
.cd-dl dt { color: var(--muted); }
.cd-dl dd { margin: 0; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-chips > * { padding: 4px 8px; border: 3px solid var(--line); font-family: var(--f-px); font-size: 10px; text-decoration: none; }
.cd-chips .st { background: var(--accent); color: var(--ink); font-weight: 700; }
.cd-note { margin: 0; font-size: 24px; line-height: 1.05; }

/* ---------- 05 MÜZİK ---------- */
.music-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px; padding: 64px var(--gut); align-items: start; }
.mp3-col { grid-column: span 4; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 30px; }
.lanyard { position: absolute; left: -10px; top: -40px; }
.lanyard path { fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round; }
.lanyard .lanyard-dash { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 8; }
.mp3 { position: relative; width: 300px; max-width: 100%; padding: 20px 20px 24px; border: var(--b) solid var(--ink); border-radius: 30px; background: var(--accent); color: var(--ink); box-shadow: 12px 12px 0 var(--ink); transform: rotate(-4deg); display: flex; flex-direction: column; gap: 16px; }
html[data-mode="drug"] .mp3 { box-shadow: 0 0 30px rgba(153, 229, 80, .5), -6px 0 0 var(--pink), 6px 0 0 var(--cyan); }
.mp3-loop { position: absolute; right: 30px; top: -20px; width: 26px; height: 22px; border: var(--b) solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; }
.mp3-brand { display: flex; justify-content: space-between; align-items: center; }
.mp3-brand .b { font-size: 14px; font-weight: 700; }
.mp3-brand .s { font-size: 9px; }
.mp3-hold { display: flex; align-items: center; gap: 4px; font-size: 8px; }
.mp3-hold i { position: relative; width: 26px; height: 12px; border: 3px solid var(--ink); background: var(--paper); }
.mp3-hold i::after { content: ''; position: absolute; left: 0; top: 0; width: 10px; height: 100%; background: var(--ink); }
.mp3-screen { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: var(--b) solid var(--ink); border-radius: 6px; background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 2px var(--navy); }
.mp3-status { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--acid); }
.batt { display: flex; gap: 2px; }
.batt i { width: 4px; height: 8px; background: var(--acid); }
.batt i:last-child { background: var(--navy); }
.mp3-now { display: flex; gap: 10px; align-items: flex-start; }
.mp3-art { width: 88px; height: 88px; flex-shrink: 0; border: 2px solid var(--paper); background: repeating-linear-gradient(45deg, var(--navy) 0 6px, var(--ink) 6px 12px); }
.mp3-art img { display: block; width: 84px; height: 84px; }
.mp3-art img:not([src]) { visibility: hidden; }
.mp3-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp3-title { display: block; overflow: hidden; white-space: nowrap; font-size: 17px; font-stretch: 100%; line-height: 1.05; }
#mpTitle { display: inline-flex; }
#mpTitle > span { display: inline-block; }
.mp3-title.long #mpTitle { animation: mq 10s linear infinite; }
.mp3-title.long #mpTitle > span { padding-right: 48px; }
.mp3-artist { font-size: 20px; line-height: 1; color: var(--ice); }
.mp3-album { font-size: 17px; line-height: 1; color: var(--steel); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mp3-bar { position: relative; height: 8px; background: var(--navy); cursor: pointer; }
.mp3-fill { width: 0; height: 100%; background: var(--acid); }
.mp3-knob { position: absolute; left: 0; top: -4px; width: 8px; height: 16px; margin-left: -4px; background: var(--paper); }
.mp3-times { display: flex; justify-content: space-between; margin-top: 4px; font-size: 18px; }
.mp3-times .pv { color: var(--pink); }
.mp3-pad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 48px); gap: 6px; justify-content: center; }
.mp3-pad button { border: var(--b) solid var(--ink); background: var(--paper); color: var(--ink); font-size: 12px; box-shadow: 3px 3px 0 var(--ink); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .mp3-pad button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); background: #fff; }
  .mp3-pad .mp3-play:hover { background: #000; color: var(--yellow); }
}
.mp3-pad button:active { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 var(--ink) !important; transition-duration: .05s; }
.mp3-pad .mp3-play { background: var(--ink); color: var(--acid); font-size: 15px; font-weight: 700; }
.mp3-sticker { position: absolute; right: -22px; bottom: 70px; padding: 0 8px; background: var(--pink); border: 3px solid var(--ink); font-size: 24px; transform: rotate(14deg); }
.mp3-spark { position: absolute; left: -16px; bottom: 132px; transform: rotate(-10deg); }
.mp3-jack { position: absolute; left: 50%; bottom: -12px; width: 14px; height: 10px; margin-left: -7px; background: var(--ink); }
.earbuds { display: block; margin-top: -2px; max-width: 100%; }
.earbuds path { fill: none; stroke: var(--fg); stroke-width: 4; stroke-linecap: round; }
.earbuds circle { fill: var(--paper); stroke: var(--fg); stroke-width: 4; }
.mp3-note { margin: 0; font-size: 26px; line-height: 1.1; text-align: center; transform: rotate(-2deg); }

.library { grid-column: span 8; min-width: 0; border: var(--b) solid var(--line); background: var(--panel); box-shadow: 8px 8px 0 var(--shadow); }
.lib-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--ink); color: var(--paper); }
.lib-head > .px { font-size: 14px; font-weight: 700; }
.lib-filter { display: flex; align-items: center; gap: 8px; }
.lib-filter .px { font-size: 10px; color: var(--steel); }
.lib-filter input { width: 220px; min-height: 40px; padding: 0 10px; border: 3px solid var(--paper); background: var(--navy); color: var(--paper); font-size: 20px; }
.lib-filter input::placeholder { color: var(--steel); }
.lib-scroll { max-height: 560px; overflow: auto; }
.lib-table { width: 100%; border-collapse: collapse; }
.lib-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 10px 8px; font-family: var(--f-px); font-size: 10px; font-weight: 400; color: var(--muted); text-align: left; border-bottom: 3px solid var(--line); }
.lib-table th:first-child, .lib-table td:first-child { padding-left: 16px; }
.lib-table th:last-child, .lib-table td:last-child { padding-right: 16px; }
.lib-table tbody tr { border-bottom: 2px dashed rgba(34, 32, 52, .2); cursor: pointer; }
html[data-mode="drug"] .lib-table tbody tr { border-color: rgba(153, 229, 80, .2); }
.lib-table tbody tr:hover { background: rgba(251, 242, 54, .35); }
.lib-table tbody tr.on { background: var(--accent); color: var(--ink); }
.lib-table td { padding: 8px; vertical-align: middle; }
.lib-n { font-family: var(--f-px); font-size: 12px; }
.lib-art { width: 46px; height: 46px; border: 3px solid var(--line); background: var(--navy); }
.lib-art img { display: block; width: 40px; height: 40px; }
.lib-t { font-family: var(--f-brut); font-weight: 900; font-size: 16px; line-height: 1.05; }
.lib-a, .lib-y { font-family: var(--f-term); font-size: 20px; line-height: 1; }
.lib-al { font-family: var(--f-term); font-size: 19px; line-height: 1.05; }
.lib-al small { display: block; font-size: 17px; color: var(--muted); }
.lib-table tr.on .lib-al small { color: var(--dkgreen); }
.lib-g { padding: 3px 6px; border: 2px solid currentColor; font-family: var(--f-px); font-size: 9px; text-transform: uppercase; white-space: nowrap; }
.lib-d { font-family: var(--f-term); font-size: 22px; }
.lib-act { white-space: nowrap; }
.lib-act button, .lib-act a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; vertical-align: top; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-family: var(--f-px); font-size: 12px; text-decoration: none; }
.lib-table tr.on .lib-act button { background: var(--ink); color: var(--acid); }
.lib-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 3px solid var(--line); font-size: 10px; color: var(--muted); }

/* ---------- 06 DUVAR ---------- */
.wall-wrap { padding: 44px var(--gut) 52px; display: flex; flex-direction: column; gap: 24px; }
.wall-scroll { overflow-x: auto; border: var(--b) solid var(--ink); box-shadow: 10px 10px 0 var(--shadow); }
.wall {
  position: relative; width: 100%; min-width: 720px; aspect-ratio: 2 / 1; overflow: hidden;
  background-color: #ABA59C;
  background-image:
    radial-gradient(circle at 40px 30px, #5F5A54 5px, rgba(95, 90, 84, .4) 7px, transparent 8px),
    radial-gradient(circle at 200px 30px, #5F5A54 5px, rgba(95, 90, 84, .4) 7px, transparent 8px),
    radial-gradient(circle at 40px 110px, #5F5A54 5px, rgba(95, 90, 84, .4) 7px, transparent 8px),
    radial-gradient(circle at 200px 110px, #5F5A54 5px, rgba(95, 90, 84, .4) 7px, transparent 8px),
    linear-gradient(#8E8880 3px, transparent 3px),
    linear-gradient(90deg, #8E8880 3px, transparent 3px),
    radial-gradient(rgba(34, 32, 52, .10) 1px, transparent 1.4px);
  background-size: 240px 140px, 240px 140px, 240px 140px, 240px 140px, 240px 140px, 240px 140px, 5px 5px;
  touch-action: pan-x pan-y;
}
.wall canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wall.spraying { touch-action: none; cursor: var(--cur-spray, crosshair); }
.wall-cursors { position: absolute; inset: 0; pointer-events: none; }
.rcur { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 3px; transition: transform .08s linear; }
.rcur b { margin-top: 22px; padding: 2px 6px; border: 2px solid var(--ink); background: var(--pink); color: var(--ink); font-family: var(--f-px); font-size: 10px; font-weight: 400; white-space: nowrap; }
.wall-tagline { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; background: var(--ink); color: var(--paper); font-size: 11px; }
.wall-tools { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.spray-box { width: 360px; max-width: 100%; padding: 14px; border: var(--b) solid var(--line); background: var(--bg); box-shadow: 6px 6px 0 var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.spray-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spray-head .b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.spray-head .live { font-size: 10px; color: var(--dkgreen); }
html[data-mode="drug"] .spray-head .live { color: var(--acid); }
.swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.swatches button { aspect-ratio: 1; min-height: 36px; border: 3px solid var(--ink); background: var(--sw); }
.swatches button[aria-checked="true"] { outline: 3px solid var(--orange); outline-offset: 2px; }
.nozzles { display: flex; gap: 6px; }
.nozzles button { flex: 1; min-height: 44px; border: 3px solid var(--line); background: var(--panel); color: var(--fg); font-size: 11px; }
.nozzles button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
html[data-mode="drug"] .nozzles button[aria-checked="true"] { background: var(--acid); color: #000; }
.spray-toggle { min-height: 48px; font-size: 13px; box-shadow: 4px 4px 0 var(--shadow); }
.spray-toggle[aria-pressed="true"] { background: var(--orange); }
.buff { padding: 6px; background: repeating-linear-gradient(45deg, var(--yellow) 0 14px, var(--ink) 14px 28px); box-shadow: 6px 6px 0 var(--shadow); }
.buff-in { padding: 12px 16px; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; gap: 4px; }
.buff-l { font-size: 11px; color: var(--yellow); }
.buff-t { font-size: 40px; line-height: 1; }
.buff-a { padding: 4px 0; border: 0; background: none; color: var(--cyan); font-size: 11px; text-align: left; text-decoration: underline; }
.wall-notice { margin: 0; padding: 10px 12px; border: 3px dashed var(--line); font-size: 11px; line-height: 1.6; }
.gb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; margin-top: 20px; }
.gb-form { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: var(--b) solid var(--line); background: var(--panel); box-shadow: 8px 8px 0 var(--shadow); }
.gb-title { font-size: 32px; line-height: .95; margin-bottom: 4px; }
.gb-form label { font-size: 12px; }
.gb-form input, .gb-form textarea { width: 100%; padding: 8px 12px; border: 3px solid var(--line); background: var(--bg); color: var(--fg); font-size: 24px; resize: none; }
.gb-form input { min-height: 46px; }
.gb-status { margin: 0; min-height: 14px; font-size: 10px; }
.gb-notes { grid-column: span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-top: 8px; }
.note { position: relative; padding: 18px; border: 3px solid var(--ink); color: var(--ink); box-shadow: 5px 5px 0 rgba(34, 32, 52, .4); overflow-wrap: anywhere; }
.note p { margin: 0; }
.note .hand { font-size: 26px; line-height: 1.1; }
.note .px { margin-top: 10px; font-size: 10px; }
.note-more { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 3px dashed var(--line); background: transparent; color: var(--fg); font-family: var(--f-px); font-size: 11px; text-align: center; }

/* ---------- FOOTER ---------- */
.foot { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
html[data-mode="drug"] .foot { background: #000; border-top: 2px solid var(--acid); }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; padding: 56px var(--gut) 48px; }
.foot-bye { grid-column: span 7; }
.foot-bye > .px { font-size: 13px; }
.bye { margin-top: 22px; font-size: clamp(100px, 16vw, 236px); line-height: .8; letter-spacing: -0.05em; }
.bye-tag { margin: 26px 0 0; font-size: clamp(28px, 3.2vw, 46px); line-height: 1; color: var(--pink); transform: rotate(-3deg); }
.foot-links { grid-column: span 5; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.contact { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: var(--b) solid var(--paper); box-shadow: 8px 8px 0 var(--paper); color: var(--ink); text-decoration: none; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.contact-dc { background: var(--cyan); }
.contact-gh { background: var(--acid); }
@media (hover: hover) and (pointer: fine) {
  a.contact:hover { color: var(--ink); transform: translate(calc(var(--mx, 0px) - 3px), calc(var(--my, 0px) - 3px)); box-shadow: 12px 12px 0 var(--paper); }
}
a.contact:active { transform: translate(8px, 8px) !important; box-shadow: 0 0 0 var(--paper) !important; transition-duration: .06s; }
.contact-txt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.contact-txt .px { font-size: 12px; }
.contact-txt .brut { font-size: clamp(22px, 2.4vw, 34px); font-stretch: 100%; line-height: 1; overflow-wrap: anywhere; }
.contact .btn { min-height: 46px; padding: 0 14px; font-size: 12px; border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }
.gh-ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--acid); font-size: 16px; flex-shrink: 0; }
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px var(--gut); border-top: var(--b) solid var(--paper); font-size: 11px; color: var(--steel); }

/* ---------- TERMİNAL ---------- */
.terminal {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: min(720px, calc(100vw - 32px)); height: min(440px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  border: 2px solid var(--acid); background: rgba(0, 0, 0, .94); color: var(--paper);
  box-shadow: 0 0 30px rgba(153, 229, 80, .35), 10px 10px 0 var(--ink);
}
.terminal[hidden] { display: none; }
.terminal-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: var(--acid); color: #000; font-size: 12px; font-weight: 700; }
.terminal-close { min-height: 32px; padding: 0 10px; border: 2px solid #000; background: transparent; color: #000; font-size: 11px; }
.terminal-out { flex-grow: 1; overflow-y: auto; padding: 10px 14px; font-size: 21px; line-height: 1.15; white-space: pre-wrap; word-break: break-word; }
.terminal-out .ln-cmd .acc { color: var(--acid); }
.terminal-out .err { color: var(--pink); }
.terminal-out .ok { color: var(--acid); }
.terminal-out .y { color: var(--yellow); }
.terminal-out .d { color: var(--steel); }
.terminal-out a { color: var(--cyan); }
.terminal-in { display: flex; align-items: center; gap: 8px; padding: 8px 14px 12px; font-size: 21px; border-top: 1px dashed rgba(153, 229, 80, .35); }
.terminal-in .prompt { white-space: nowrap; }
.terminal-in input { flex-grow: 1; min-width: 0; border: 0; background: transparent; color: var(--paper); font: inherit; caret-color: var(--acid); outline: none; }

/* ---------- MODAL + TOAST ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(34, 32, 52, .7); }
.modal[hidden] { display: none; }
.modal-box { width: min(1000px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: var(--b) solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 var(--pink); }
.modal-bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--ink); color: var(--paper); font-size: 13px; }
.modal-x { min-width: 44px; min-height: 36px; border: 2px solid var(--paper); background: transparent; color: var(--paper); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 20px; }
.archive-item { border: 3px solid var(--ink); background: #fff; }
.archive-item canvas { display: block; width: 100%; aspect-ratio: 2 / 1; background: #ABA59C; }
.archive-item p { margin: 0; padding: 8px 10px; font-family: var(--f-px); font-size: 10px; border-top: 3px solid var(--ink); }
.toasts { position: fixed; left: 50%; bottom: 24px; z-index: 95; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 10px 14px; border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); font-family: var(--f-px); font-size: 12px; box-shadow: 5px 5px 0 var(--ink); }

/* =========================================================
   DRUG MOD
   ========================================================= */
html[data-mode="drug"] .logo { background: #000; color: var(--acid); text-shadow: -3px 0 var(--pink), 3px 0 var(--cyan); animation: hue 4s linear infinite; }
html[data-mode="drug"] .topbar { background: #000; box-shadow: 0 0 18px rgba(153, 229, 80, .45); }
html[data-mode="drug"] .nav a { border-right-color: rgba(153, 229, 80, .35); font-family: var(--f-term); font-size: 22px; }
html[data-mode="drug"] .nav a:hover, html[data-mode="drug"] .nav a.on { background: var(--pink); color: #000; }
html[data-mode="drug"] .lang { border-color: var(--cyan); }
html[data-mode="drug"] .lang button { background: #000; color: var(--cyan); border-color: var(--cyan); }
html[data-mode="drug"] .lang button[aria-pressed="true"] { background: var(--cyan); color: #000; }
html[data-mode="drug"] .star-h1 { font-family: var(--f-glitch); font-stretch: 100%; font-weight: 400; letter-spacing: 0; color: var(--acid); text-shadow: -7px 0 var(--pink), 7px 0 var(--cyan); animation: hue 4s linear infinite, shake 2.2s steps(1) infinite; }
html[data-mode="drug"] .star-h1::before, html[data-mode="drug"] .star-h1::after { content: attr(data-text); position: absolute; left: 0; top: 0; pointer-events: none; text-shadow: none; }
html[data-mode="drug"] .star-h1::before { color: var(--cyan); clip-path: inset(32% 0 52% 0); animation: sl .9s steps(1) infinite; }
html[data-mode="drug"] .star-h1::after { color: var(--pink); clip-path: inset(68% 0 14% 0); animation: sl 1.3s steps(1) infinite reverse; }
html[data-mode="drug"] .hero-tag { color: var(--pink); -webkit-text-stroke: 2px #000; }
html[data-mode="drug"] .mf-box { background: var(--acid); color: #000; }
html[data-mode="drug"] .manifesto { font-family: var(--f-term); font-stretch: 100%; font-weight: 400; color: var(--acid); font-size: clamp(36px, 4vw, 56px); }
html[data-mode="drug"] .sysline .mode-name { color: var(--hot); animation: flick 2.6s steps(1) infinite; }
html[data-mode="drug"] .box-label { border-color: var(--acid); color: var(--acid); background: transparent; }
html[data-mode="drug"] .avatar-win { box-shadow: 0 0 24px rgba(153, 229, 80, .35), -8px 0 0 var(--pink), 8px 0 0 var(--cyan); transform: rotate(0deg); }
html[data-mode="drug"] .win-bar { background: var(--acid); color: #000; }
html[data-mode="drug"] .status { background: #000; border-color: var(--acid); box-shadow: 0 0 18px rgba(153, 229, 80, .3); }
html[data-mode="drug"] .sec-num { background: #000; color: var(--acid); text-shadow: -3px 0 var(--pink), 3px 0 var(--cyan); }
html[data-mode="drug"] .sec-title { font-family: var(--f-glitch); font-stretch: 100%; font-weight: 400; letter-spacing: 0; color: var(--acid); }
html[data-mode="drug"] .sec-head { background: #000; }
html[data-mode="drug"] .idcard-head { color: #000; }
html[data-mode="drug"] .proj-card, html[data-mode="drug"] .idcard, html[data-mode="drug"] .library, html[data-mode="drug"] .gb-form, html[data-mode="drug"] .spray-box { box-shadow: -6px 0 0 var(--pink), 6px 0 0 var(--cyan), 0 0 24px rgba(153, 229, 80, .2); }
html[data-mode="drug"] .term-win { background: #000; border-color: var(--acid); box-shadow: 0 0 24px rgba(153, 229, 80, .35); }
html[data-mode="drug"] .quote-block { background: #000; border-color: var(--pink); }
html[data-mode="drug"] .lib-head { background: var(--acid); color: #000; }
html[data-mode="drug"] .lib-head .px, html[data-mode="drug"] .lib-filter .px { color: #000; }
html[data-mode="drug"] .lib-filter input { background: #000; border-color: #000; color: var(--acid); }
html[data-mode="drug"] .lib-table thead th { background: var(--panel); }
html[data-mode="drug"] .wall-scroll { border-color: var(--acid); }
html[data-mode="drug"] .wall { filter: saturate(1.4) contrast(1.1); }
html[data-mode="drug"] .bye { font-family: var(--f-glitch); font-stretch: 100%; font-weight: 400; letter-spacing: 0; color: var(--acid); text-shadow: -6px 0 var(--pink), 6px 0 var(--cyan); }
html[data-mode="drug"] .sticky, html[data-mode="drug"] .note { box-shadow: 0 0 18px rgba(215, 123, 186, .5); }
html[data-mode="drug"] .char-stage { border-color: var(--acid); }
html[data-mode="drug"] .halftone { opacity: .25; background-image: radial-gradient(var(--pink) 1.1px, transparent 1.5px); }

.fx-scan, .fx-line { display: none; pointer-events: none; }
html[data-mode="drug"] .fx-scan { display: block; position: fixed; inset: 0; z-index: 70; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }
html[data-mode="drug"] .fx-line { display: block; position: fixed; left: 0; right: 0; top: 0; height: 6px; z-index: 71; background: rgba(95, 205, 228, .35); animation: sweep 5s linear infinite; }


/* =========================================================
   DUYARLI
   ========================================================= */
@media (max-width: 1180px) {
  .nav a { padding: 0 12px; font-size: 11px; }
  .hero-main { grid-column: span 7; }
  .hero-side { grid-column: span 5; }
}
@media (max-width: 980px) {
  :root { --gut: 20px; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .top-ctrl { padding-right: 0; }
  .mobile-nav:not([hidden]) { position: sticky; top: 60px; z-index: 39; display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: var(--b) solid var(--line); background: var(--bg); }
  .mobile-nav a { padding: 14px 16px; border-bottom: 2px solid var(--line); font-family: var(--f-px); font-size: 12px; text-decoration: none; }
  .mobile-nav a:nth-child(odd) { border-right: 2px solid var(--line); }
  .hero, .oda-grid, .music-grid, .gb-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .hero > *, .oda-grid > *, .music-grid > *, .gb-grid > *, .foot-grid > * { grid-column: auto !important; border-left: 0 !important; border-right: 0 !important; }
  .hero-main { min-height: 0; padding: 20px 20px 28px; }
  .hero-side { border-top: var(--b) solid var(--line); padding-bottom: 8px; }
  .avatar-win { margin: 48px auto 0; width: min(320px, 80%); }
  .status { margin: 32px 20px 20px; }
  .oda-card-col, .oda-text, .oda-notes { padding: 26px 20px; }
  .oda-notes { border-top: var(--b) solid var(--line); }
  .proj-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 32px 20px; }
  .proj-offset { margin-top: 0; }
  .shelf-foot { flex-direction: column; }
  .music-grid { padding: 40px 20px; }
  .mp3-col { padding-top: 40px; }
  .wall-tools { flex-direction: column; }
  .spray-box { width: 100%; }
  .gb-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-num { width: 64px; font-size: 22px; }
  .sec-title { padding: 14px 16px; }
  .sec-note { display: none; }
  .sec-link { padding: 0 14px; font-size: 10px; }
  .repo-row { grid-template-columns: minmax(0, 1fr) auto; }
  .repo-row > :nth-child(3) { display: none; }
  .repo-row > :nth-child(4) { grid-column: 1 / -1; color: var(--steel); }
  .hide-m { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .logo { padding: 0 12px; font-size: 14px; }
  .logo .spr, .logo-sfx { display: none; }
  .lang button { min-width: 34px; height: 34px; font-size: 11px; }
  .pill { height: 38px; }
  .pill span { padding: 0 7px; font-size: 9px; }
  .menu-btn { width: 48px; }
  .top-ctrl { gap: 6px; padding-left: 6px; min-width: 0; }
  .sec-link { display: none; }
  .ut-head > div { min-width: 0; }
  .proj-name { font-stretch: 100%; }
  .desk-only { display: none; }
  .mob-only { display: inline; }
  .hero-tag { bottom: -46px; }
  .hero-note { bottom: -70px; font-size: 26px; }
  .hero-copy { margin-top: 84px; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }
  .proj-name { font-size: 30px; }
  .cast { grid-template-columns: minmax(0, 1fr); }
  .cd-in { flex-direction: column; }
  .cd-cover { width: 100%; }
  .hide-s { display: none; }
  .gb-notes { grid-template-columns: minmax(0, 1fr); }
  .bye { font-size: 100px; }
  .terminal { right: 8px; bottom: 8px; left: 8px; width: auto; }
  .lib-filter input { width: 160px; }
  .lvl-sticker { left: -16px; width: 66px; height: 66px; font-size: 11px; }
}

/* FX: AZ — süs döngüleri durur, etkileşim geri bildirimi kalır */
html[data-motion="reduce"] { scroll-behavior: auto; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }

/* =========================================================
   FX 2.0 — açılış, imleç, beliren öğeler, etkileşim
   ========================================================= */

/* ---------- açılış ekranı ---------- */
.boot { display: none; }
html.booting { overflow: hidden; }
html.booting .boot { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: #050409; color: var(--paper); cursor: pointer; }
.boot::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .7) 100%); }
.boot-in { position: relative; width: min(560px, 100%); display: flex; flex-direction: column; gap: 18px; }
.boot-log { margin: 0; min-height: 210px; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.3; white-space: normal; }
.boot-row { display: flex; align-items: baseline; gap: 10px; animation: boot-in .18s steps(3) both; }
.boot-row span:first-child { white-space: nowrap; }
.boot-row:first-child { color: var(--acid); }
.boot-row i { flex: 1; border-bottom: 2px dotted rgba(242, 238, 227, .35); transform: translateY(-5px); }
.boot-row b { font-weight: 400; color: var(--acid); }
.boot-row:nth-child(5) b { color: var(--hot); animation: blink .5s steps(1) infinite; }
.boot-bar { height: 14px; border: 2px solid var(--paper); padding: 2px; }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--acid) 0 10px, transparent 10px 12px); transition: width .18s steps(4); }
.boot-skip { margin: 0; font-size: 10px; color: var(--grey); text-align: right; }
@keyframes boot-in { from { opacity: 0; transform: translateX(-8px); } }

/* İlk boyamadan önce hero'yu gizle (fx.js açar; 6 sn sonra kendiliğinden açılır) */
html.fx-pending .hero-title, html.fx-pending .hero-copy, html.fx-pending .avatar-win, html.fx-pending .status, html.fx-pending .hero-meta, html.fx-pending .pill-note { opacity: 0; }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel] { overscroll-behavior: contain; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---------- üst bar: ilerleme + saklanma ---------- */
.topbar { transition: transform .5s var(--ease-out), background-color .3s; }
html.hdr-hide .topbar { transform: translateY(calc(-100% - 6px)); }
/* kaydırma ilerlemesi: başlığın alt çizgisinin TAM içine oturur (sayfanın üstüne taşmaz) */
.topbar-prog { position: absolute; left: 0; right: 0; bottom: calc(var(--b) * -1); height: var(--b); pointer-events: none; overflow: hidden; }
.topbar-prog i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); }
html[data-mode="drug"] .topbar-prog i { background: linear-gradient(90deg, var(--pink), var(--cyan), var(--acid)); box-shadow: 0 0 8px rgba(215, 123, 186, .8); }

/* ---------- FX anahtarı ---------- */
.hero-meta-r { display: flex; align-items: center; gap: 14px; }
.fx-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 3px solid var(--line); background: var(--panel); color: var(--fg); font-size: 10px; transition: background-color .2s, color .2s, transform .3s var(--ease-out); }
.fx-dot { width: 9px; height: 9px; background: var(--grey); }
.fx-toggle[aria-pressed="true"] .fx-dot { background: var(--green); box-shadow: 0 0 0 2px var(--ink); animation: blink 1.4s steps(1) infinite; }
.foot-fx { padding: 2px 6px; border: 2px solid var(--steel); background: transparent; color: var(--steel); font-size: 10px; }
@media (hover: hover) and (pointer: fine) {
  .fx-toggle:hover { background: var(--yellow); color: var(--ink); }
  .foot-fx:hover { background: var(--acid); border-color: var(--acid); color: var(--ink); }
}
.fx-toggle:active, .foot-fx:active { transform: scale(.94); }

/* ---------- imleç köşeleri ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 94; width: 26px; height: 26px; pointer-events: none; opacity: 0; transition: opacity .2s; }
html.has-cur .cur { opacity: 1; }
.cur.off { opacity: 0 !important; }
.cur i { position: absolute; width: 10px; height: 10px; border: 3px solid var(--ink); transition: width .3s var(--ease-out), height .3s var(--ease-out), border-color .2s; }
.cur i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.cur i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.cur i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.cur i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.cur.on i { width: 14px; height: 14px; border-color: var(--orange); }
.cur.down i { width: 6px; height: 6px; }
.cur-l { position: absolute; left: 100%; top: -2px; margin-left: 6px; padding: 2px 6px; background: var(--ink); color: var(--acid); font-family: var(--f-px); font-size: 9px; font-weight: 400; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--ease-out); }
.cur.on.lbl .cur-l { opacity: 1; transform: none; }
html[data-mode="drug"] .cur i { border-color: var(--acid); }
html[data-mode="drug"] .cur.on i { border-color: var(--pink); }
html[data-mode="drug"] .cur-l { background: var(--acid); color: #000; }

/* ---------- görünce belirenler (sadece FX: TAM) ---------- */
.fx .rv:not(.rv-in) { opacity: 0; }
.fx .rv.rv-in { animation: rv-up .95s var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 14) * 70ms); }
.fx .rv[data-rv="slap"].rv-in { animation-name: rv-slap; animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
.fx .rv[data-rv="drop"].rv-in { animation-name: rv-drop; animation-duration: .9s; animation-timing-function: linear; }
.fx .rv[data-rv="pop"].rv-in { animation-name: rv-pop; animation-duration: .55s; animation-timing-function: var(--ease-out); animation-delay: calc(min(var(--i, 0), 30) * 30ms); }
.fx .rv[data-rv="wipe"].rv-in { animation-name: rv-wipe; animation-duration: 1.1s; animation-timing-function: var(--ease-io); }
.fx .rv[data-rv="left"].rv-in { animation-name: rv-left; }
.fx .rv[data-rv="swing"].rv-in { animation-name: rv-swing; animation-duration: 1.5s; animation-timing-function: linear; }
html.fx-frozen .rv { animation: none !important; opacity: 1 !important; }
@keyframes rv-up { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
@keyframes rv-left { from { opacity: 0; translate: -56px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rv-slap { 0% { opacity: 0; scale: 1.7; rotate: -9deg; } 55% { opacity: 1; scale: .95; rotate: 1deg; } 78% { scale: 1.02; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes rv-drop { 0% { opacity: 0; translate: 0 -150px; animation-timing-function: cubic-bezier(.5, 0, 1, .6); } 45% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0, .4, .5, 1); } 65% { translate: 0 -22px; animation-timing-function: cubic-bezier(.5, 0, 1, .6); } 82% { translate: 0 0; animation-timing-function: cubic-bezier(0, .4, .5, 1); } 91% { translate: 0 -6px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes rv-pop { 0% { opacity: 0; scale: .5; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes rv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rv-swing { 0% { opacity: 0; rotate: -32deg; translate: 0 -110px; } 30% { opacity: 1; rotate: 12deg; translate: 0 0; } 50% { rotate: -7deg; } 66% { rotate: 4deg; } 80% { rotate: -2deg; } 100% { opacity: 1; rotate: 0deg; } }
/* envanter çubukları sırayla dolsun */

/* ---------- yukarı çık ---------- */
.totop { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 60px; height: 60px; border: var(--b) solid var(--ink); background: var(--accent); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); opacity: 0; pointer-events: none; transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 30px)); transition: opacity .3s, transform .5s var(--ease-out), box-shadow .3s var(--ease-out); }
.totop.show { opacity: 1; pointer-events: auto; transform: translate(var(--mx, 0px), var(--my, 0px)); }
.totop .px { font-size: 14px; font-weight: 700; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .totop.show:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 4px)); box-shadow: 7px 9px 0 var(--ink); }
  .totop.show:hover .spr { animation: spin .8s steps(8) infinite; }
}
.totop:active { transform: translate(5px, 5px) !important; box-shadow: none !important; }
html[data-mode="drug"] .totop { background: #000; color: var(--acid); border-color: var(--acid); box-shadow: 0 0 16px rgba(153, 229, 80, .6); }

/* ---------- mod geçişi ---------- */
.pxswap { position: fixed; inset: 0; z-index: 199; width: 100vw; height: 100vh; pointer-events: none; image-rendering: pixelated; }

/* ---------- şerit (JS hız kontrollü) ---------- */
.ticker-track.js-mq { animation: none !important; }

/* ---------- eylem bildirimi ---------- */
.toast-act { display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); pointer-events: auto; }
.toast-act button { min-height: 34px; padding: 0 10px; border: 3px solid var(--ink); background: var(--ink); color: var(--acid); font-size: 11px; white-space: nowrap; }
.toast-act .toast-x { background: transparent; color: var(--ink); border-color: transparent; padding: 0 6px; }
.toast { animation: toast-in .35s var(--ease-out) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* ---------- küçük kontroller: hover / basma ---------- */
.lang button, .nozzles button, .swatches button, .lib-act button, .lib-act a, .terminal-close, .modal-x, .menu-btn, .note-more, .buff-a, .nav a, .sec-link, .logo, .repo-row, .lib-table tbody tr {
  transition: background-color .2s, color .2s, transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.lang button, .nozzles button, .swatches button, .lib-act button, .lib-act a, .menu-btn { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .lang button:not([aria-pressed="true"]):hover { background: var(--yellow); color: var(--ink); }
  .nozzles button:not([aria-checked="true"]):hover { background: var(--yellow); color: var(--ink); }
  .swatches button:hover { transform: translateY(-5px) rotate(-4deg); box-shadow: 0 5px 0 var(--ink); }
  .lib-act button:hover, .lib-act a:hover { background: var(--ink); color: var(--acid); }
  .menu-btn:hover { background: var(--acid); }
  .note-more:hover { background: var(--yellow); color: var(--ink); }
  .terminal-close:hover { background: #000; color: var(--acid); }
  .modal-x:hover { background: var(--paper); color: var(--ink); }
  .repo-row:hover { background: rgba(242, 238, 227, .07); }
  .logo:hover .spr { animation: spin .7s steps(4); }
  .sticky:hover, .quote-block:hover, .note:hover { scale: 1.035; z-index: 2; }
  .idcard:hover { scale: 1.015; }
  .avatar-win:hover { box-shadow: 14px 14px 0 var(--shadow); }
}
.lang button:active, .nozzles button:active, .lib-act button:active, .lib-act a:active, .menu-btn:active { transform: scale(.93) !important; transition-duration: .06s; }
.swatches button:active { transform: scale(.88) !important; transition-duration: .06s; }
.sticky, .quote-block, .note, .idcard { transition: scale .45s var(--ease-spring), box-shadow .3s, transform .35s var(--ease-out), background-color .2s; }
.avatar-win { transition: box-shadow .4s var(--ease-out); }
.swatches button[aria-checked="true"] { transform: translateY(-3px); box-shadow: 0 3px 0 var(--ink); }

/* ---------- Spotify bandı ---------- */
.sp-dot { width: 9px; height: 9px; border-radius: 50%; background: #1ED760; box-shadow: 0 0 0 3px rgba(30, 215, 96, .25); }

/* ---------- MP3 çalar ayrıntıları ---------- */
.mp3-eq { display: flex; align-items: flex-end; gap: 2px; height: 10px; margin-left: auto; margin-right: 8px; }
.mp3-eq i { width: 3px; height: 100%; background: var(--acid); transform-origin: 50% 100%; transform: scaleY(.2); }
.mp3.is-playing .mp3-eq i { animation: eq .8s steps(4) infinite; }
.mp3.is-playing .mp3-eq i:nth-child(2) { animation-delay: -.2s; }
.mp3.is-playing .mp3-eq i:nth-child(3) { animation-delay: -.45s; }
.mp3.is-playing .mp3-eq i:nth-child(4) { animation-delay: -.1s; }
.mp3.is-playing .mp3-eq i:nth-child(5) { animation-delay: -.6s; }
.mp3-art img { transition: opacity .3s steps(3); opacity: 0; }
.mp3-art.lit img { opacity: 1; }
.mp3.is-playing .mp3-screen { box-shadow: inset 0 0 0 2px var(--navy), 0 0 18px rgba(153, 229, 80, .35); }
.mp3 { transition: transform .6s var(--ease-spring), box-shadow .4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mp3:hover { transform: rotate(-1deg) translateY(-4px); } }
/* çubuk büyürken yerleşim değişmesin (eskiden height değişiyordu → bütün mp3 uzuyordu) */
.mp3-bar { transition: transform .2s var(--ease-out); transform-origin: 50% 50%; }
.mp3-bar::before { content: ''; position: absolute; inset: -8px 0; }
.mp3-bar:hover, .mp3-bar:focus-visible { transform: scaleY(1.5); }
.lib-e { display: inline-block; padding: 0 4px; border: 2px solid currentColor; font-family: var(--f-px); font-size: 8px; vertical-align: middle; }
.lib-table tbody tr.on .lib-n { animation: blink 1s steps(1) infinite; }

@media (max-width: 640px) {
  .hero-meta { flex-wrap: wrap; }
  .totop { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

/* =========================================================
   v3 — envanter, oyun kutuları, kutu görüntüleyici, ses, TV
   ========================================================= */

/* ---------- nadirlik renkleri ---------- */
.r0 { --rc: #847E87; } .r1 { --rc: #9BADB7; } .r2 { --rc: #6ABE30; } .r3 { --rc: #639BFF; } .r4 { --rc: #D77BBA; } .r5 { --rc: #DF7126; }

/* ---------- 03 ENVANTER ---------- */
.inv2 { display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr); }
.inv2-side { padding: 40px 32px; border-right: var(--b) solid var(--line); display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.char-card, .inv-card { border: var(--b) solid var(--line); background: var(--panel); box-shadow: 8px 8px 0 var(--shadow); }
.char-card .char-stage { height: 250px; border: 0; border-bottom: var(--b) solid var(--line); box-shadow: none; }
.char-stage::before { content: ''; position: absolute; inset: 0 0 60px; background-image: radial-gradient(#fff 1px, transparent 1.6px), radial-gradient(var(--acid) 1px, transparent 1.6px); background-size: 64px 64px, 96px 96px; background-position: 0 0, 30px 40px; opacity: .4; animation: stars 40s linear infinite; }
@keyframes stars { to { background-position: -640px 0, -330px 40px; } }
.char-glow { position: absolute; left: 50%; bottom: 34px; width: 230px; height: 70px; margin-left: -115px; background: radial-gradient(ellipse at center, rgba(153, 229, 80, .5), transparent 70%); animation: glowp 2.6s ease-in-out infinite; }
@keyframes glowp { 50% { opacity: .45; scale: .85 1; } }
.char-card .char-sprite { margin-bottom: 40px; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .45)); }
.char-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.char-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.char-name .brut { font-size: 42px; line-height: .9; letter-spacing: -0.03em; }
.char-cls { padding: 4px 7px; background: var(--ink); color: var(--acid); font-size: 10px; }
.xp-l { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; }
.xp-bar { position: relative; height: 18px; border: 3px solid var(--line); background: var(--panel2); overflow: hidden; }
.xp-bar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, var(--green) 10px 12px); transition: width 1.4s var(--ease-out); }
.xp-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--line) calc(10% - 2px) 10%); opacity: .25; }
.char-stats { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: 20px; line-height: 1.15; }
.char-stats dt { color: var(--muted); }
.char-stats dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ink); color: var(--paper); font-size: 11px; }
.card-h .dim { color: var(--steel); font-size: 9px; text-align: right; }
html[data-mode="drug"] .card-h { background: var(--acid); color: #000; }
html[data-mode="drug"] .card-h .dim { color: #1d3a12; }

.radar { display: block; width: 100%; height: auto; padding: 8px 6px 4px; overflow: visible; }
.radar .rg { fill: none; stroke: var(--line); stroke-opacity: .16; stroke-width: 1.5; }
.radar .rg-out { stroke-opacity: .6; stroke-width: 2.5; fill: var(--panel2); fill-opacity: .6; }
.radar .ra { stroke: var(--line); stroke-opacity: .3; stroke-width: 1.5; stroke-dasharray: 3 4; }
.radar .rv-poly { fill: var(--accent); fill-opacity: .5; stroke: var(--line); stroke-width: 3; stroke-linejoin: round; transform-box: view-box; transform-origin: 165px 130px; }
.radar .rp { stroke: var(--ink); stroke-width: 2; }
.radar .rl { font-family: var(--f-px); font-size: 10px; fill: var(--fg); }
.radar .rlv { fill: var(--muted); }
.radar .rl-empty { font-family: var(--f-hand); font-size: 21px; fill: var(--muted); }
.fx .inv-card.rv-in .rv-poly { animation: radar-in 1.1s var(--ease-spring) .35s backwards; }
@keyframes radar-in { from { scale: 0; opacity: 0; } }

.equip { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.eq { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 9px 5px 5px; border: 3px solid var(--line); border-left: 8px solid var(--rc, var(--line)); background: var(--panel2); }
.eq.empty { border-style: dashed; border-left-style: solid; --rc: var(--grey); opacity: .75; }
.eq-ico { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); border: 2px solid var(--line); }
.eq-ico svg { width: 28px; height: 28px; }
.eq.empty .eq-ico svg { opacity: .35; filter: grayscale(1); }
.eq-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.eq-slot { font-size: 9px; color: var(--muted); }
.eq-nm { font-family: var(--f-brut); font-weight: 900; font-size: 17px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-lv { font-size: 11px; font-weight: 700; color: var(--fg); }

.inv2-main { padding: 40px 40px 44px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.inv2-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; border-bottom: var(--b) solid var(--line); }
.inv2-tabs { display: flex; flex-wrap: wrap; gap: 6px 0; padding-left: 6px; }
.inv2-tabs button {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; margin-right: -4px; padding: 0 14px;
  border: var(--b) solid var(--line); border-bottom: 0; background: var(--panel2); color: var(--fg);
  font-family: var(--f-px); font-size: 12px; translate: 0 5px;
  transition: translate .3s var(--ease-out), background-color .15s, color .15s; -webkit-tap-highlight-color: transparent;
}
.inv2-tabs button::before { content: ''; width: 10px; height: 10px; background: var(--cc); border: 2px solid var(--line); }
.inv2-tabs button b { padding: 1px 5px; background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 400; }
.inv2-tabs button[aria-selected="true"] { z-index: 1; translate: 0 0; background: var(--panel); font-weight: 700; box-shadow: inset 0 5px 0 var(--cc), 0 var(--b) 0 var(--panel); }
@media (hover: hover) and (pointer: fine) {
  .inv2-tabs button:not([aria-selected="true"]):hover { translate: 0 1px; background: var(--yellow); color: var(--ink); }
}
.inv2-tabs button:focus-visible { outline: 3px dashed var(--line); outline-offset: 3px; z-index: 2; }
.inv2-sort { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.inv2-sort button { min-height: 32px; padding: 0 9px; border: 3px solid var(--line); background: var(--panel); color: var(--fg); font-size: 10px; transition: background-color .15s, color .15s, transform .15s; }
.inv2-sort button[aria-pressed="true"] { background: var(--ink); color: var(--acid); }
.inv2-sort button:active { transform: scale(.94); }
html[data-mode="drug"] .inv2-sort button[aria-pressed="true"] { background: var(--acid); color: #000; }

.inv2-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; border: var(--b) solid var(--line); border-top: 0; background: var(--panel); box-shadow: 10px 10px 0 var(--shadow); }
.inv2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; padding: 16px; align-content: start; outline: none; }
.item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1 / 1.08; min-width: 0; padding: 14px 6px 16px;
  border: 3px solid var(--line); background: var(--panel2); color: var(--fg); font: inherit; text-align: center;
  box-shadow: inset -4px -4px 0 rgba(34, 32, 52, .16), inset 4px 4px 0 rgba(255, 255, 255, .85);
  transition: translate .25s var(--ease-out), background-color .15s, box-shadow .25s var(--ease-out); -webkit-tap-highlight-color: transparent;
}
.item::before { content: ''; position: absolute; inset: 3px; border: 2px solid var(--rc); pointer-events: none; opacity: .9; }
.item.r0::before { border-style: dashed; opacity: .55; }
.item-cat { position: absolute; left: 5px; top: 5px; width: 9px; height: 9px; background: var(--cc); border: 2px solid var(--line); }
.item-ico svg { display: block; width: 30px; height: 30px; }
.item.r0 .item-ico { opacity: .45; filter: grayscale(.8); }
.item-nm { font-family: var(--f-px); font-size: 10px; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.item-lv { position: absolute; right: 5px; top: 3px; font-family: var(--f-px); font-size: 11px; font-weight: 700; }
.item-nm.long { font-size: 8px; letter-spacing: -0.03em; }
.item.r0 .item-lv { color: var(--muted); font-weight: 400; }
.item-pips { position: absolute; left: 7px; right: 7px; bottom: 6px; display: flex; gap: 2px; }
.item-pips i { flex: 1; height: 4px; background: rgba(34, 32, 52, .14); }
.item-pips i.on { background: var(--rc); }
.item.r4 { background: linear-gradient(160deg, #fbe3f2, var(--panel2) 60%); }
.item.r5 { background: linear-gradient(160deg, #ffe7b8, var(--panel2) 60%); }
.item.r5::before { animation: legend 1.6s steps(2) infinite; }
@keyframes legend { 50% { border-color: var(--yellow); } }
.item.r4 .item-ico, .item.r5 .item-ico { filter: drop-shadow(0 0 5px var(--rc)); }
.item[aria-pressed="true"] { z-index: 1; translate: 0 -3px; background: var(--panel); box-shadow: 5px 5px 0 var(--shadow); }
.item[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: -8px; pointer-events: none;
  background:
    linear-gradient(var(--fg), var(--fg)) left top / 14px 3px, linear-gradient(var(--fg), var(--fg)) left top / 3px 14px,
    linear-gradient(var(--fg), var(--fg)) right top / 14px 3px, linear-gradient(var(--fg), var(--fg)) right top / 3px 14px,
    linear-gradient(var(--fg), var(--fg)) left bottom / 14px 3px, linear-gradient(var(--fg), var(--fg)) left bottom / 3px 14px,
    linear-gradient(var(--fg), var(--fg)) right bottom / 14px 3px, linear-gradient(var(--fg), var(--fg)) right bottom / 3px 14px;
  background-repeat: no-repeat;
  animation: sel 1s steps(2) infinite;
}
@keyframes sel { 50% { inset: -5px; } }
.item:focus-visible { outline: 3px dashed var(--line); outline-offset: 10px; }
html[data-mode="drug"] .item { background: var(--panel2); box-shadow: inset 0 0 0 2px rgba(215, 123, 186, .25); }
html[data-mode="drug"] .item.r4, html[data-mode="drug"] .item.r5 { background: linear-gradient(160deg, rgba(223, 113, 38, .25), var(--panel2) 60%); }
html[data-mode="drug"] .item[aria-pressed="true"] { background: #1a1726; box-shadow: 0 0 0 2px var(--rc), 0 0 18px rgba(153, 229, 80, .35); }
html[data-mode="drug"] .item-pips i { background: rgba(153, 229, 80, .12); }

.inspect { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-left: var(--b) solid var(--line); min-height: 100%; }
.inspect > * { animation: insp .35s var(--ease-out) backwards; }
.inspect > :nth-child(2) { animation-delay: .04s; } .inspect > :nth-child(3) { animation-delay: .08s; } .inspect > :nth-child(4) { animation-delay: .12s; } .inspect > :nth-child(5) { animation-delay: .16s; }
@keyframes insp { from { opacity: 0; translate: 10px 0; } }
.inspect-empty { margin: 0; font-size: 11px; color: var(--muted); }
.in-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.in-ico { width: 88px; height: 88px; display: grid; place-items: center; background: var(--ink); border: 3px solid var(--line); box-shadow: inset 0 0 0 3px var(--rc), 5px 5px 0 var(--rc); }
.in-ico svg { width: 60px; height: 60px; }
.inspect.r0 .in-ico svg { opacity: .45; filter: grayscale(.8); }
.in-rar { padding: 4px 7px; background: var(--rc); color: var(--ink); font-size: 10px; font-weight: 700; }
.in-nm { font-size: 34px; line-height: .95; letter-spacing: -0.02em; overflow-wrap: break-word; }
.in-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 20px; line-height: 1.15; }
.in-dl dt { color: var(--muted); }
.in-dl dd { margin: 0; text-align: right; }
.in-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--cc); border: 2px solid var(--line); vertical-align: 1px; }
.in-segs { display: flex; gap: 3px; }
.in-segs i { flex: 1; height: 16px; border: 2px solid var(--line); }
.in-segs i.on { background: var(--rc); animation: seg-in .3s var(--ease-spring) backwards calc(var(--j) * 45ms + .1s); }
@keyframes seg-in { from { scale: 1 0; } }
.in-flav { margin: 0; font-size: 25px; line-height: 1.05; color: var(--muted); }
.in-note { margin: 0; padding: 8px 10px; border: 2px dashed var(--line); font-size: 10px; line-height: 1.5; }

.rarity { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; }
.rar { display: flex; align-items: center; gap: 6px; }
.rar i { width: 12px; height: 12px; background: var(--rc); border: 2px solid var(--line); }
.rar b { color: var(--muted); font-weight: 400; }

/* ---------- 02 2048 AI LAB ---------- */
.g2048-side { display: flex; flex-direction: column; gap: 12px; max-width: 190px; }
.g2048-live { align-self: flex-start; padding: 4px 8px; background: var(--ink); color: var(--acid); font-size: 10px; }
.g2048-live .blink { color: var(--hot); animation: blink 1s steps(1) infinite; }
.g2048-badge { flex-shrink: 0; display: grid; place-items: center; width: 58px; height: 58px; border: 3px solid var(--line); background: var(--yellow); color: var(--ink); font-size: 15px; font-weight: 700; box-shadow: 4px 4px 0 var(--shadow); }
.chip-or { background: var(--orange); color: var(--ink); }
.chip-cy { background: var(--cyan); color: var(--ink); }
.g2048-soon { margin: 0; font-size: 25px; line-height: 1.05; color: var(--muted); rotate: -1deg; }
.cta-arrow { display: inline-block; animation: arrow-bob 1.4s ease-in-out infinite; }
@keyframes arrow-bob { 50% { translate: 0 5px; } }
.lvl-sticker { user-select: none; -webkit-tap-highlight-color: transparent; }
.lvl-sticker.poke { animation: poke .32s var(--ease-spring); }
@keyframes poke { 40% { scale: 1.2; } }

/* ---------- 04 OYUN RAFI: gerçek kutular ---------- */
.shelf-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; font-size: 11px; }
#gmCount { padding: 4px 8px; background: var(--ink); color: var(--acid); }
#gmCount:empty { display: none; }
.shelf-hint { color: var(--muted); }
html[data-mode="drug"] #gmCount { background: var(--acid); color: #000; }
.shelf { gap: 34px; padding: 76px 44px 0 34px; margin-top: -10px; user-select: none; -webkit-user-select: none; --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.shelf.can-l { --fl: 48px; }
.shelf.can-r { --fr: 72px; }
.shelf.dragging { cursor: grabbing; }
.shelf.dragging .case { pointer-events: none; }
.case-slot { flex-shrink: 0; }
.case {
  --w: 150px; --h: 225px; --d: 18px;
  position: relative; display: block; width: var(--w); height: var(--h); padding: 0; border: 0; background: none; color: inherit;
  perspective: 900px; text-align: left; cursor: pointer;
  transition: translate .5s var(--ease-spring); -webkit-tap-highlight-color: transparent;
}
.case-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(26deg); transition: transform .65s var(--ease-out); }
.case-face, .cv-face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.case-front { inset: 0; display: flex; flex-direction: column; overflow: hidden; border: 3px solid var(--ink); border-radius: 3px 6px 6px 3px; background: var(--ink); transform: translateZ(calc(var(--d) / 2)); container-type: inline-size; }
.case-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), inset 6px 0 0 rgba(0, 0, 0, .28); pointer-events: none; }
.case-spine {
  top: 0; bottom: 0; left: calc(50% - var(--d) / 2); width: var(--d);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; padding: 0 0 6px; overflow: hidden;
  border: 3px solid var(--ink); background: var(--c, var(--red)); color: var(--ink);
  font-size: calc(var(--d) * .62);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .18);
}
.dark .case-spine, .case.dark .case-spine { color: var(--paper); }
.sp-band { width: 100%; padding: 2px 0; background: var(--ink); color: var(--paper); font-size: .7em; text-align: center; line-height: 1.2; }
.sp-title { flex: 1; min-height: 0; writing-mode: vertical-rl; font-size: 1em; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-logo svg { display: block; width: .9em; height: .9em; }
.case-band { flex: 0 0 auto; display: flex; align-items: center; gap: 3cqw; height: 11cqw; padding: 0 4cqw; background: var(--ink); color: var(--paper); font-size: 5.4cqw; line-height: 1; }
.case-band b { padding: .6cqw 1.6cqw; background: var(--paper); color: var(--ink); }
.case-band i { margin-left: auto; display: flex; }
.case-band i svg { width: 6.5cqw; height: 6.5cqw; }
html[data-mode="drug"] .case-band { background: #000; color: var(--acid); }
html[data-mode="drug"] .case-band b { background: var(--acid); }
.case-art { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--c, var(--red)); container-type: inline-size; }
.case-img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.case-gloss {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .32) 44%, rgba(255, 255, 255, 0) 54%), linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 7%, rgba(255, 255, 255, .12) 8.5%, rgba(255, 255, 255, 0) 12%);
  background-size: 260% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat;
  transition: background-position .9s var(--ease-out);
}
.case-shadow { position: absolute; left: 4%; right: -6%; bottom: -12px; height: 18px; background: radial-gradient(ellipse at center, rgba(34, 32, 52, .5), transparent 70%); transition: transform .5s var(--ease-out), opacity .5s; pointer-events: none; }
html[data-mode="drug"] .case-shadow { background: radial-gradient(ellipse at center, rgba(153, 229, 80, .45), transparent 70%); }
.case-now {
  position: absolute; right: -20px; top: -22px; z-index: 3; width: 66px; height: 66px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1.05; color: var(--ink); text-align: center;
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
  animation: sticker 2.4s ease-in-out infinite;
}
.case-now::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--yellow); clip-path: polygon(50% 0%, 60.1% 12.3%, 75% 6.7%, 77.6% 22.4%, 93.3% 25%, 87.7% 39.9%, 100% 50%, 87.7% 60.1%, 93.3% 75%, 77.6% 77.6%, 75% 93.3%, 60.1% 87.7%, 50% 100%, 39.9% 87.7%, 25% 93.3%, 22.4% 77.6%, 6.7% 75%, 12.3% 60.1%, 0% 50%, 12.3% 39.9%, 6.7% 25%, 22.4% 22.4%, 25% 6.7%, 39.9% 12.3%); }
@keyframes sticker { 0%, 100% { rotate: 12deg; scale: 1; } 50% { rotate: 4deg; scale: 1.08; } }
.case-tag { position: absolute; left: -8px; bottom: 18px; z-index: 3; padding: 3px 6px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 9px; rotate: -6deg; box-shadow: 2px 2px 0 var(--ink); transition: rotate .4s var(--ease-spring), translate .4s var(--ease-spring); }
.case.is-now .case-tag { background: var(--acid); }
@media (hover: hover) and (pointer: fine) {
  .case:hover { translate: 0 -16px; }
  .case:hover .case-3d { transform: rotateY(8deg) rotateX(5deg); }
  .case:hover .case-gloss { background-position: 0 0, 0 0; }
  .case:hover .case-shadow { transform: translateY(16px) scale(.8); opacity: .55; }
  .case:hover .case-tag { rotate: 2deg; translate: -4px 0; }
}
html[data-mode="drug"] .case-front { box-shadow: -4px 0 0 var(--pink), 4px 0 0 var(--cyan); }
@media (hover: hover) and (pointer: fine) { html[data-mode="drug"] .case:hover .case-front { box-shadow: -6px 0 0 var(--pink), 6px 0 0 var(--cyan), 0 0 26px rgba(153, 229, 80, .55); } }
html[data-mode="drug"] .inv2-body, html[data-mode="drug"] .char-card, html[data-mode="drug"] .inv-card, html[data-mode="drug"] .shelf-now { box-shadow: -6px 0 0 var(--pink), 6px 0 0 var(--cyan), 0 0 24px rgba(153, 229, 80, .2); }
.case:focus-visible { translate: 0 -16px; outline: 3px dashed var(--line); outline-offset: 10px; }
.case:focus-visible .case-3d { transform: rotateY(8deg) rotateX(5deg); }
.case:active { translate: 0 -8px; transition-duration: .12s; }
.case.away { visibility: hidden; }
.shelf-plank { position: relative; height: 24px; margin: 0; }
.shelf-plank::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(255, 255, 255, .18); }
.shelf-plank::after { content: '★ STAR // PC KOLEKSİYONU · RAF 01 ★'; position: absolute; left: 50%; top: 50%; translate: -50% -42%; padding: 1px 8px; background: var(--paper); color: var(--ink); font-family: var(--f-px); font-size: 9px; white-space: nowrap; }
html[lang="en"] .shelf-plank::after { content: '★ STAR // PC COLLECTION · SHELF 01 ★'; }
html[data-mode="drug"] .shelf-plank::after { background: #000; color: var(--acid); }

/* tasarlanmış kapak (kutu fotoğrafı yoksa) */
.cover-gen { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 7cqw; overflow: hidden; background: var(--c, var(--red)); color: var(--ink); }
.dark .cover-gen, .case.dark .cover-gen { color: var(--paper); }
.cg-pat { position: absolute; inset: 0; background-image: radial-gradient(rgba(34, 32, 52, .3) 1.2px, transparent 1.7px); background-size: 6cqw 6cqw; }
.cg-pat::after { content: ''; position: absolute; left: -20%; right: -20%; top: 36%; height: 13cqw; background: repeating-linear-gradient(45deg, rgba(34, 32, 52, .85) 0 3cqw, transparent 3cqw 6cqw); rotate: -12deg; }
.cg-ico { position: absolute; left: 50%; top: 13cqw; translate: -50% 0; }
.cg-ico svg { display: block; width: 48cqw; height: 48cqw; filter: drop-shadow(2.5cqw 2.5cqw 0 rgba(34, 32, 52, .55)); }
.cg-ini { position: absolute; right: 5cqw; top: 9cqw; font-size: 62cqw; font-weight: 700; line-height: .8; color: transparent; -webkit-text-stroke: 1.1cqw currentColor; opacity: .85; }
.cg-title { position: relative; display: flex; flex-direction: column; font-size: 15cqw; font-weight: 900; line-height: .86; letter-spacing: -0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.cg-sub { position: relative; margin-top: 3cqw; font-size: 4.6cqw; opacity: .9; }
.cg-ed { position: absolute; left: 6cqw; top: 5cqw; padding: 1cqw 2cqw; background: var(--ink); color: var(--paper); font-size: 4cqw; }

/* şu an oynanan kartı */
.shelf-now { width: 560px; max-width: 100%; flex-shrink: 0; border: var(--b) solid var(--line); background: var(--panel); box-shadow: 8px 8px 0 var(--shadow); rotate: 1deg; }
.shelf-now:empty { display: none; }
.sn-bar { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--ink); color: var(--paper); font-size: 11px; }
.sn-bar .blink { color: var(--hot); animation: blink 1s steps(1) infinite; }
html[data-mode="drug"] .sn-bar { background: var(--acid); color: #000; }
.sn-in { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 20px; padding: 18px; }
.sn-art { position: relative; display: block; width: 124px; aspect-ratio: 2 / 3; overflow: hidden; border: 3px solid var(--ink); background: var(--c, var(--red)); box-shadow: 5px 5px 0 var(--shadow); rotate: -3deg; }
.sn-main { min-width: 0; }
.sn-name { font-size: 34px; line-height: .9; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.sn-meta { margin: 8px 0 10px; font-size: 10px; color: var(--muted); }
.sn-note { margin: -4px 0 14px; font-size: 24px; line-height: 1.05; }
.sn-dl { margin: 0 0 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; font-size: 20px; line-height: 1.15; }
.sn-dl dt { color: var(--muted); }
.sn-dl dd { margin: 0; overflow-wrap: anywhere; }
.sn-open { min-height: 44px; padding: 0 14px; font-size: 11px; }

/* ---------- kutu görüntüleyici ---------- */
.cv { --w: var(--cw, 300px); --h: var(--ch, 450px); --d: var(--cd, 22px); position: fixed; inset: 0; z-index: 92; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; color: var(--paper); touch-action: none; }
.cv[hidden] { display: none; }
.cv-bg { position: absolute; inset: 0; background: rgba(34, 32, 52, .86); background-image: radial-gradient(rgba(242, 238, 227, .08) 1px, transparent 1.6px); background-size: 8px 8px; backdrop-filter: blur(6px) saturate(.6); -webkit-backdrop-filter: blur(6px) saturate(.6); opacity: 0; transition: opacity .45s var(--ease-out); }
html[data-mode="drug"] .cv-bg { background-color: rgba(5, 4, 9, .9); }
.cv.open .cv-bg { opacity: 1; }
.cv-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 22px; font-size: 11px; opacity: 0; translate: 0 -12px; transition: opacity .4s var(--ease-out), translate .4s var(--ease-out); }
.cv.open .cv-top { opacity: 1; translate: 0 0; transition-delay: .25s; }
.cv-title { flex: 1; min-width: 0; font-family: var(--f-brut); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; text-align: center; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-face-l { padding: 3px 7px; background: var(--acid); color: var(--ink); }
.cv-stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.cv-stage::before { content: ''; position: absolute; left: 50%; top: 50%; width: 80vmin; height: 80vmin; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--c, var(--red)) 0, transparent 62%); opacity: 0; transition: opacity .7s var(--ease-out); pointer-events: none; }
.cv.open .cv-stage::before { opacity: .5; }
.cv-fly { position: relative; width: var(--w); height: var(--h); }
.cv-float { position: absolute; inset: 0; perspective: 1700px; animation: cv-float 5s ease-in-out infinite; }
@keyframes cv-float { 50% { translate: 0 -10px; } }
.cv-box { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--ease-out); cursor: grab; }
.cv-box.grab { transition: none; cursor: grabbing; }
.cv .cv-box > .case-front { border-width: 4px; }
.cv-back { inset: 0; overflow: hidden; border: 4px solid var(--ink); border-radius: 6px 3px 3px 6px; background: var(--ink); color: var(--paper); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); container-type: inline-size; }
.cv-edge { top: 0; bottom: 0; left: calc(50% - var(--d) / 2); width: var(--d); border: 3px solid var(--ink); background: linear-gradient(90deg, #1a1828, #45415e 50%, #1a1828); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.cv-cap { left: 0; right: 0; top: calc(50% - var(--d) / 2); height: var(--d); border: 3px solid var(--ink); background: #2c2a40; }
.cv-cap-t { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.cv-cap-b { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.cv-disc { position: absolute; left: 50%; top: 50%; width: calc(var(--w) * .9); aspect-ratio: 1; translate: -50% -50%; opacity: 0; transition: translate .9s var(--ease-out), opacity .25s; pointer-events: none; }
.cv.disc-out .cv-disc { opacity: 1; }
.cv.disc-out .cv-disc { translate: 8% -50%; }
.cv.flipped .cv-disc { translate: -50% -50%; transition-duration: .4s; }
.disc-spin { position: absolute; inset: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 50%; background: conic-gradient(from 20deg, #e9e9f2, #b8c4ff, #ffd0f0, #fff7b0, #b0ffe0, #c8d0ff, #ffd0f0, #e9e9f2); box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .45), 8px 8px 0 rgba(0, 0, 0, .35); animation: spin 5s linear infinite; }
.disc-label { position: absolute; inset: 15%; overflow: hidden; border: 3px solid var(--ink); border-radius: 50%; background: var(--c, var(--red)); container-type: inline-size; }
.disc-label img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.disc-ring { position: absolute; left: 50%; bottom: 5%; translate: -50% 0; font-size: 8px; color: var(--ink); white-space: nowrap; opacity: .75; }
.disc-hole { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #1a1828; box-shadow: 0 0 0 5px rgba(255, 255, 255, .75), 0 0 0 8px var(--ink); }
.cv-ui { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px 6px; opacity: 0; translate: 0 14px; transition: opacity .4s var(--ease-out), translate .4s var(--ease-out); }
.cv.open .cv-ui { opacity: 1; translate: 0 0; transition-delay: .3s; }
.cv-ui .btn { min-height: 48px; color: var(--ink); }
.cv-ui .btn-ink { color: var(--paper); }
.cv-nav { width: 54px; padding: 0; font-size: 18px; }
.cv-keys { position: relative; z-index: 2; margin: 0; padding: 6px 16px 16px; font-size: 9px; color: var(--steel); text-align: center; }
@media (pointer: coarse) { .cv-keys { display: none; } }

/* arka kapak */
.bk { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.2cqw; padding: 5cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--c, #AC3232) 34%, #222034) 0, #222034 46%); font-size: 4cqw; }
.bk-top { display: flex; justify-content: space-between; font-size: 3.2cqw; color: var(--steel); }
.bk-shot { position: relative; flex-shrink: 0; aspect-ratio: 460 / 215; overflow: hidden; border: 1cqw solid var(--paper); background: var(--c, var(--red)); box-shadow: 1.6cqw 1.6cqw 0 rgba(0, 0, 0, .5); rotate: -1.5deg; }
.bk-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-shot-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 4cqw; font-size: 8cqw; line-height: .9; color: var(--ink); text-align: center; text-transform: uppercase; background-image: repeating-linear-gradient(45deg, rgba(34, 32, 52, .2) 0 3cqw, transparent 3cqw 6cqw); }
.cv.dark .bk-shot-ph { color: var(--paper); }
.bk-name { font-size: 8.4cqw; line-height: .9; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.bk-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5cqw 3cqw; font-family: var(--f-term); font-size: 5.4cqw; line-height: 1.05; }
.bk-dl dt { font-family: var(--f-px); font-size: 2.9cqw; line-height: 1.9; color: var(--steel); }
.bk-dl dd { margin: 0; overflow-wrap: anywhere; }
.bk-row { display: flex; align-items: center; gap: 3cqw; flex-wrap: wrap; }
.bk-st { padding: 1cqw 2cqw; background: var(--acid); color: var(--ink); font-size: 3.2cqw; }
.bk-mc { display: flex; align-items: center; gap: 1.5cqw; }
.bk-mc b { display: grid; place-items: center; width: 9cqw; height: 9cqw; border: .8cqw solid var(--paper); background: var(--green); color: var(--ink); font-family: var(--f-brut); font-size: 4.6cqw; }
.bk-mc small { font-family: var(--f-px); font-size: 2.8cqw; }
.bk-note { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 5.6cqw; line-height: 1; color: var(--yellow); }
.bk.has-note .bk-shot { aspect-ratio: 460 / 160; }
.bk.has-note .bk-legal { display: none; }
.bk-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.bk-bar { display: flex; flex-direction: column; align-items: center; gap: .6cqw; padding: 1.6cqw 2.2cqw 1cqw; background: #fff; color: #000; }
.bk-bar svg { display: block; width: 30cqw; height: 9cqw; fill: #000; }
.bk-bar span { font-family: var(--f-term); font-size: 3.6cqw; line-height: 1; letter-spacing: .12em; }
.bk-store { padding: 2cqw 3cqw; border: .8cqw solid var(--paper); color: var(--paper); font-size: 3.4cqw; text-decoration: none; transition: background-color .15s, color .15s; }
.bk-store:hover, .bk-store:focus-visible { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.bk-legal { margin: 0; font-size: 2.6cqw; line-height: 1.3; color: var(--grey); }

/* ---------- MP3: ses kontrolü ---------- */
.mp3-vol { display: grid; grid-template-columns: auto 34px minmax(0, 1fr) 34px; align-items: center; gap: 6px; padding: 6px 8px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.mp3-vol button { height: 32px; border: 3px solid var(--ink); font-weight: 700; transition: transform .2s var(--ease-out), background-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.vol-mute { position: relative; padding: 0 7px; background: var(--ink); color: var(--acid); font-size: 10px; }
.vol-step { background: #fff; color: var(--ink); font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .vol-step:hover { background: var(--ink); color: var(--acid); }
  .vol-mute:hover { background: #000; color: var(--yellow); }
}
.mp3-vol button:active { transform: scale(.9); transition-duration: .05s; }
.mp3-vol.is-muted .vol-mute { background: var(--hot); color: var(--paper); }
.mp3-vol.is-muted .vol-mute::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 3px; margin-top: -1.5px; background: currentColor; rotate: -24deg; }
.vol-segs { display: flex; align-items: flex-end; gap: 3px; height: 32px; cursor: pointer; touch-action: none; }
.vol-segs i { flex: 1; height: calc(28% + var(--j) * 8%); border: 2px solid var(--ink); background: rgba(34, 32, 52, .12); transition: background-color .15s, scale .25s var(--ease-spring); transform-origin: bottom; }
.vol-segs i.on { background: var(--ink); }
.vol-segs i.on:nth-child(n+8) { background: var(--orange); }
.vol-segs i.on:nth-child(10) { background: var(--hot); }
.mp3-vol.is-muted .vol-segs i.on { background: rgba(34, 32, 52, .3); }
@media (hover: hover) and (pointer: fine) { .vol-segs:hover i { scale: 1 1.08; } }
.vol-segs:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }

/* ---------- müzik bandı: şarkı bilgisi + spektrum ---------- */
.dock { border-bottom: 3px solid var(--line); background: #121212; color: #fff; }
.dock-l { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px 0; font-size: 10px; color: #b3b3b3; }
.dock.is-playing .sp-dot { animation: blink 1s steps(1) infinite; }
.dock-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 16px 14px; }
.dock-pv { margin-left: auto; padding: 2px 6px; border: 2px solid #1ED760; color: #1ED760; }
.viz { display: block; width: 100%; height: 230px; border: 3px solid #000; background: #0b0a12; cursor: pointer; box-shadow: 4px 4px 0 #000; }
@media (max-width: 640px) { .viz { height: 190px; } }
.mp3-eq.live i { animation: none !important; transition: transform .08s linear; }
.di-none { font-size: 9px; color: var(--orange); }
.dock-info { min-width: 0; display: flex; align-items: flex-start; gap: 14px; min-height: 100px; padding-bottom: 12px; border-bottom: 2px dashed #2f2f2f; }
.dock-wait { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 84px; margin: 0; padding: 10px; border: 2px dashed #3a3a3a; border-radius: 12px; font-size: 10px; color: #8a8a8a; text-align: center; }
.di-art { flex-shrink: 0; width: 100px; height: 100px; overflow: hidden; border: 3px solid #000; background: #2a2838; box-shadow: 4px 4px 0 #000; animation: insp .4s var(--ease-out) backwards; }
.di-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dock.is-playing .di-art { animation: di-beat 1s ease-in-out infinite; }
@keyframes di-beat { 50% { rotate: -2deg; scale: 1.03; } }
.di-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; animation: insp .4s var(--ease-out) .05s backwards; }
.di-idx { font-size: 9px; color: #8a8a8a; }
.di-t { font-size: 23px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.di-a { font-family: var(--f-term); font-size: 23px; line-height: 1; color: #CBDBFC; }
.di-al { font-family: var(--f-term); font-size: 19px; line-height: 1.05; color: #9BADB7; }
.di-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.di-links a { padding: 6px 8px; border: 2px solid #fff; color: #fff; font-size: 9px; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.di-links a:hover, .di-links a:focus-visible { background: #fff; color: #000; }
.di-links .di-sp:hover, .di-links .di-sp:focus-visible { background: #1ED760; border-color: #1ED760; color: #000; }
.mp3-times .pv { color: var(--pink); }

/* ---------- duyarlı ---------- */
@media (max-width: 1100px) {
  .inv2 { grid-template-columns: minmax(0, 1fr); }
  .inv2-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; border-right: 0; border-bottom: var(--b) solid var(--line); }
}
@media (max-width: 900px) {
  .inv2-side, .inv2-main { padding: 26px 20px; }
  .inv2-body { grid-template-columns: minmax(0, 1fr); }
  .inspect { position: static; border-left: 0; border-top: var(--b) solid var(--line); min-height: 0; }
  .shelf-now { rotate: 0deg; }
}
@media (max-width: 640px) {
  .inv2-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; padding: 12px; }
  .inv2-bar { align-items: stretch; }
  .inv2-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; max-width: 100%; padding: 6px 6px 4px; margin-bottom: -4px; }
  .inv2-tabs::-webkit-scrollbar { display: none; }
  .inv2-tabs button { flex-shrink: 0; min-height: 40px; padding: 0 10px; font-size: 10px; white-space: nowrap; }
  .inv2-sort { order: -1; justify-content: flex-end; padding-bottom: 0; }
  .item-nm { font-size: 9px; }
  .case { --w: 124px; --h: 186px; --d: 15px; }
  .shelf { gap: 26px; padding: 70px 28px 0 22px; }
  .sn-in { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .sn-art { width: 92px; }
  .sn-name { font-size: 26px; }
  .cv-top { padding: 12px 14px; }
  .cv-title { font-size: 16px; }
  .cv-ui { gap: 8px; }
  .cv-ui .btn { min-height: 44px; padding: 0 12px; font-size: 12px; }
  .cv-nav { width: 46px; }
  .cv.disc-out .cv-disc { translate: -12% -50%; }
  .di-art { width: 76px; height: 76px; }
  .lib-table td { padding: 6px 4px; }
  .lib-act button, .lib-act a { width: 36px; height: 36px; }
  .lib-art { width: 40px; height: 40px; }
  .lib-art img { width: 34px; height: 34px; }
}

/* =========================================================
   v4 — footer veda ekranı, çerez onayı, yasal sayfalar, 404
   ========================================================= */

/* ---------- FOOTER ---------- */
.foot-mq { position: relative; z-index: 3; margin: 0 -24px; padding: 10px 0; overflow: hidden; background: var(--acid); color: var(--ink); border-block: var(--b) solid var(--ink); rotate: -1.2deg; translate: 0 -2px; }
.foot-mq-track { display: flex; width: max-content; animation: mq 28s linear infinite; }
.foot-mq-track > div { display: flex; align-items: center; gap: 22px; padding-right: 22px; }
.foot-mq span { font-family: var(--f-tag); font-size: clamp(26px, 3.4vw, 50px); line-height: 1; white-space: nowrap; }
.foot-mq span.o { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.foot-mq i { font-style: normal; font-size: clamp(16px, 2vw, 26px); }
.foot:not(.is-in) .foot-mq-track { animation-play-state: paused; }
html[data-mode="drug"] .foot-mq { background: var(--pink); color: #000; border-color: #000; box-shadow: 0 0 24px rgba(215, 123, 186, .5); }

.foot-grid { position: relative; z-index: 2; padding-top: 64px; }
.foot-bye { grid-column: span 6; min-width: 0; }
.foot-label { font-size: 13px; }
.foot-side { grid-column: span 6; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.foot-links { grid-column: auto; justify-content: flex-start; }
.bye { display: flex; align-items: flex-end; }
.bye-l { display: inline-block; clip-path: inset(-30% -12% 0 -12%); transform: translateY(calc(var(--k, 0) * -22px)) rotate(calc(var(--k, 0) * var(--r, 0deg))) scale(calc(1 + var(--k, 0) * .12)); transition: transform .4s var(--ease-out), color .3s; transform-origin: 50% 100%; }
.bye-l > i { display: inline-block; font-style: normal; }
.bye-l.acc { color: var(--acid); }
@media (hover: hover) and (pointer: fine) { .bye-l:hover { color: var(--yellow); } .bye-l.acc:hover { color: var(--pink); } }

.cont { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; max-width: 560px; margin-top: 34px; padding: 14px 16px; border: 3px dashed rgba(242, 238, 227, .45); }
.cont-l { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.cont-q { font-size: 18px; color: var(--yellow); }
.cont-n { min-width: 1.1ch; font-size: 58px; line-height: .8; color: var(--paper); text-shadow: 4px 4px 0 var(--hot); }
.cont-n.flip { animation: cont-flip .35s steps(3); }
@keyframes cont-flip { 0% { scale: 1.7; opacity: .2; } }
.cont.over { border-color: var(--hot); }
.cont.over .cont-q { font-size: 24px; color: var(--hot); animation: blink .9s steps(1) infinite; }
.cont.over .cont-n { display: none; }
.cont-btn { min-height: 48px; font-size: 12px; }
.cont.over .cont-btn { background: var(--yellow); }

.foot-cols { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 18px; }
.foot-col { min-width: 0; padding: 14px 16px; border: 3px solid rgba(242, 238, 227, .22); background: rgba(255, 255, 255, .03); }
html[data-mode="drug"] .foot-col { border-color: rgba(153, 229, 80, .35); }
.foot-h { display: block; margin-bottom: 10px; font-size: 10px; color: var(--acid); }
.foot-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.foot-nav a { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; color: var(--paper); font-family: var(--f-px); font-size: 12px; text-decoration: none; transition: color .15s, translate .25s var(--ease-out); }
.foot-nav a::before { content: '▸'; color: var(--steel); transition: color .15s; }
@media (hover: hover) and (pointer: fine) { .foot-nav a:hover { color: var(--yellow); translate: 6px 0; } .foot-nav a:hover::before { color: var(--yellow); } }
.foot-nav a:focus-visible { outline: 2px dashed var(--acid); outline-offset: 3px; }
.foot-stat { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 19px; line-height: 1.1; }
.foot-stat > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.foot-stat dt { font-family: var(--f-px); font-size: 9px; color: var(--steel); }
.foot-stat dd { margin: 0; overflow-wrap: anywhere; }
.foot-stat .clk dd { color: var(--acid); font-size: 30px; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.foot-stat .on dd::before { content: '♪ '; color: var(--acid); }

/* piksel oda sahnesi (canvas): tam sayı ölçekle çizilir, ortalanır, kenarlar taşarsa kırpılır */
.foot-scene { position: relative; display: flex; justify-content: center; overflow: hidden; border-top: var(--b) solid var(--paper); background: #29273f; }
html[data-mode="drug"] .foot-scene { background: #07060d; border-top-color: var(--acid); }
.room { display: block; flex-shrink: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.room-fx { position: absolute; left: 50%; top: 0; translate: -50% 0; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.room-hint { position: absolute; left: 12px; bottom: 8px; margin: 0; padding: 3px 6px; background: rgba(34, 32, 52, .75); color: var(--steel); font-size: 9px; pointer-events: none; }
@media (hover: none) { .room-hint { display: none; } }

.foot-bar { position: relative; z-index: 2; align-items: center; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-legal a, .foot-legal button, .legal-foot a, .legal-foot button { padding: 0; border: 0; background: none; color: var(--paper); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-legal a:hover, .foot-legal button:hover, .legal-foot a:hover, .legal-foot button:hover { color: var(--acid); }

/* ---------- arşiv: buff'lanmış duvarlar ---------- */
.archive-item figcaption { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-top: 3px solid var(--ink); font-family: var(--f-px); font-size: 10px; color: var(--ink); }
.archive-item figcaption span { font-size: 9px; color: var(--grey); }
.archive-item.is-buff figcaption b::before { content: '✕ '; color: var(--red); }

/* ---------- yükleniyor / bilgilendirme ---------- */
.load-note { margin: 0; padding: 18px; font-size: 11px; color: var(--muted); animation: blink 1.4s steps(1) infinite; }
.shelf .load-note { align-self: center; }
.gb-legal { margin: 0; font-size: 9px; line-height: 1.6; color: var(--muted); }
.gb-legal a { color: inherit; }

/* ---------- ÇEREZ ONAYI ---------- */
.ck-banner { position: fixed; left: 16px; bottom: 16px; z-index: 88; width: min(540px, calc(100vw - 32px)); border: var(--b) solid var(--line); background: var(--panel); color: var(--fg); box-shadow: 10px 10px 0 var(--shadow); opacity: 0; translate: 0 30px; transition: opacity .3s, translate .45s var(--ease-out); }
.ck-banner.in { opacity: 1; translate: 0 0; }
.ck-banner[hidden] { display: none; }
.ck-in { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 14px; }
.ck-head { display: flex; align-items: center; gap: 10px; }
.ck-head b { font-size: 14px; }
.ck-ico svg { display: block; }
.ck-txt { margin: 0; font-size: 15px; line-height: 1.45; }
.ck-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-acts .btn, .ck-foot .btn { --sh: 4px; min-height: 44px; padding: 0 10px; font-size: 11px; }
.ck-acts [data-ck="prefs"] { grid-column: 1 / -1; }
.ck-link { align-self: flex-start; color: var(--fg); font-size: 10px; }
.ck-modal { position: fixed; inset: 0; z-index: 91; display: grid; place-items: center; padding: 16px; background: rgba(34, 32, 52, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ck-modal[hidden] { display: none; }
.ck-card { display: flex; flex-direction: column; width: min(740px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border: var(--b) solid var(--line); background: var(--panel); color: var(--fg); box-shadow: 12px 12px 0 var(--shadow); }
.ck-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ink); color: var(--paper); font-size: 12px; }
html[data-mode="drug"] .ck-bar { background: var(--acid); color: #000; }
.ck-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; overflow: auto; overscroll-behavior: contain; }
.ck-intro, .ck-desc { margin: 0; font-size: 15px; line-height: 1.45; }
.ck-desc { margin-top: 8px; font-size: 14px; }
.ck-cat { padding: 12px 14px; border: 3px solid var(--line); background: var(--panel2); }
.ck-cat-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ck-cat-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ck-cat-t b { font-size: 13px; }
.ck-tag { padding: 2px 6px; background: var(--acid); color: var(--ink); font-size: 9px; }
.ck-tag-dim { border: 2px dashed var(--muted); background: transparent; color: var(--muted); }
.ck-sw { position: relative; flex-shrink: 0; width: 60px; height: 32px; cursor: pointer; }
.ck-sw input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.ck-sw input:disabled { cursor: not-allowed; }
.ck-sw-ui { position: absolute; inset: 0; border: 3px solid var(--line); background: var(--panel); transition: background-color .2s; }
.ck-sw-ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: var(--line); transition: translate .3s var(--ease-spring), background-color .2s; }
.ck-sw input:checked + .ck-sw-ui { background: var(--acid); }
.ck-sw input:checked + .ck-sw-ui::after { translate: 28px 0; background: var(--ink); }
.ck-sw input:disabled + .ck-sw-ui { opacity: .6; }
.ck-sw input:focus-visible + .ck-sw-ui { outline: 3px dashed var(--line); outline-offset: 3px; }
.ck-det { margin-top: 10px; }
.ck-det summary { cursor: pointer; font-size: 10px; }
.ck-table, .legal-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.ck-table { margin-top: 8px; font-size: 13px; }
.ck-table th, .ck-table td, .legal-table th, .legal-table td { padding: 6px 8px; border-bottom: 1px dashed rgba(34, 32, 52, .3); text-align: left; vertical-align: top; }
html[data-mode="drug"] .ck-table th, html[data-mode="drug"] .ck-table td, html[data-mode="drug"] .legal-table th, html[data-mode="drug"] .legal-table td { border-color: rgba(153, 229, 80, .25); }
.ck-table th, .legal-table th { font-family: var(--f-px); font-size: 9px; font-weight: 400; color: var(--muted); }
.ck-table code, .legal-table code { font-family: var(--f-term); font-size: 17px; overflow-wrap: anywhere; }
.ck-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 14px; border-top: var(--b) solid var(--line); }
.ck-foot .btn { flex: 1 1 160px; }

/* ---------- YASAL SAYFA ---------- */
.legal-page { background-color: var(--bg); }
.legal-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 var(--gut); border-bottom: var(--b) solid var(--line); background: var(--panel); }
.legal-top .logo { align-self: stretch; margin-left: calc(var(--gut) * -1); padding: 0 18px; font-size: 16px; color: var(--accent); }
.legal-crumb { font-size: 11px; color: var(--muted); }
.legal-top .lang { margin-left: auto; }
.legal { max-width: 900px; margin: 0 auto; padding: 48px var(--gut) 72px; }
.legal-kicker { margin: 0; font-size: 11px; color: var(--muted); }
.legal-doc h1 { margin: 10px 0 6px; font-size: clamp(40px, 7vw, 84px); line-height: .9; letter-spacing: -0.03em; }
.legal-meta { margin: 0 0 28px; font-size: 11px; }
.legal-sum { margin-bottom: 28px; padding: 18px 20px; border: var(--b) solid var(--line); background: var(--accent); color: var(--ink); box-shadow: 8px 8px 0 var(--shadow); }
.legal-sum ul { margin: 10px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.55; }
.legal-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 0 0; font-size: 10px; }
.legal-cta .btn { min-height: 46px; font-size: 12px; }
.legal-toc { margin-bottom: 34px; padding: 16px 20px; border: 3px dashed var(--line); }
.legal-toc ol { margin: 10px 0 0; padding-left: 24px; columns: 2 260px; font-size: 15px; line-height: 1.7; }
.legal-toc a, .legal-doc a { color: inherit; text-underline-offset: 3px; }
.legal-doc section { padding-top: 26px; margin-top: 26px; border-top: 3px solid var(--line); scroll-margin-top: 80px; }
.legal-doc h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-family: var(--f-brut); font-stretch: 112%; font-weight: 900; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.05; }
.legal-doc h2 .px { flex-shrink: 0; padding: 2px 6px; background: var(--ink); color: var(--acid); font-size: 12px; }
.legal-doc p, .legal-doc li { font-size: 17px; line-height: 1.65; }
.legal-doc p { margin: 0 0 12px; }
.legal-doc ul { padding-left: 22px; }
.legal-table-wrap { margin: 6px 0 14px; overflow-x: auto; border: 3px solid var(--line); background: var(--panel); }
.legal-table td:first-child { font-weight: 700; }
.ck-tbl h3 { margin: 18px 0 6px; font-size: 12px; }
.ck-tbl p { font-size: 15px; }
.legal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px var(--gut); background: var(--ink); color: var(--paper); font-size: 11px; }

/* ---------- 404 ---------- */
.nf-page { display: flex; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; padding: 32px 16px; }
.nf { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; gap: 48px; width: min(1080px, 100%); }
.nf-win { border: 6px solid var(--ink); background: var(--red); box-shadow: 14px 14px 0 var(--ink); animation: shake 2.2s steps(1) infinite; }
.nf-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--ink); color: var(--paper); font-size: 14px; }
.nf-bar i { display: inline-block; width: 16px; height: 16px; margin-left: 6px; background: var(--orange); }
.nf-bar i:nth-child(2) { background: var(--yellow); }
.nf-bar i:nth-child(3) { background: var(--red); }
.nf-face { position: relative; height: 300px; }
.nf-404 { position: absolute; left: 0; right: 0; top: 18px; color: #fff; font-size: 72px; font-weight: 700; text-align: center; text-shadow: 6px 6px 0 var(--ink); }
.nf .eye { position: absolute; top: 130px; width: 72px; height: 64px; border: 6px solid var(--ink); background: #fff; }
.nf .eye::after { content: ''; position: absolute; left: 8px; top: 18px; width: 26px; height: 26px; background: var(--ink); }
.nf .eye.l { left: 22%; } .nf .eye.r { right: 22%; }
.nf .brow { position: absolute; top: 106px; width: 92px; height: 14px; background: var(--ink); }
.nf .brow.l { left: 20%; transform: rotate(18deg); } .nf .brow.r { right: 20%; transform: rotate(-18deg); }
.nf .mouth { position: absolute; left: 24%; right: 24%; top: 226px; height: 50px; border: 6px solid var(--ink); background: var(--ink) linear-gradient(135deg, #fff 25%, transparent 25%) 0 0 / 28px 28px repeat-x; }
.nf-code { margin: 0 0 10px; font-size: 11px; color: var(--muted); }
.nf-copy h1 { margin: 0 0 14px; font-size: clamp(44px, 7vw, 88px); line-height: .88; letter-spacing: -0.03em; }
.nf-lead { margin: 0 0 8px; font-size: 18px; line-height: 1.5; }
.nf-en { color: var(--muted); font-size: 15px; }
.nf-term { display: block; margin: 18px 0; padding: 12px 14px; background: var(--ink); color: var(--paper); font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.nf-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.nf-links { padding: 14px 16px; border: 3px dashed var(--line); }
.nf-links b { font-size: 10px; }
.nf-links ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 18px; }
.nf-links a { display: flex; flex-direction: column; color: var(--fg); font-family: var(--f-px); font-size: 12px; text-decoration: none; }
.nf-links a span { font-family: var(--f-hand); font-size: 19px; color: var(--muted); }
.nf-links a:hover { color: var(--red); }

/* ---------- duyarlı (v4) ---------- */
@media (max-width: 980px) {
  .foot-grid { padding-top: 48px; }
  .nf { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .nf-win { max-width: 420px; }
}
@media (max-width: 640px) {
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .cont-n { font-size: 46px; }
  .cont-btn { width: 100%; }
  .ck-banner { left: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .ck-acts { grid-template-columns: minmax(0, 1fr); }
  .ck-acts [data-ck="prefs"] { grid-column: auto; }
  .ck-txt { font-size: 14px; }
  .ck-table thead { display: none; }
  .ck-table tr { display: grid; padding: 6px 0; border-bottom: 1px dashed rgba(34, 32, 52, .3); }
  .ck-table td { border: 0; padding: 2px 4px; }
  .legal-top { flex-wrap: wrap; padding: 8px 16px; }
  .legal-crumb { display: none; }
  .legal { padding: 32px 16px 56px; }
  .legal-doc p, .legal-doc li { font-size: 16px; }
  .nf-face { height: 250px; }
  .nf .eye { top: 112px; width: 58px; height: 52px; } .nf .brow { top: 92px; width: 76px; } .nf .mouth { top: 190px; height: 42px; }
  .nf-404 { font-size: 56px; }
}

/* 3B eğilen kartlar ve döndürülmüş öğeler sayfaya yatay kaydırma eklemesin (clip kaydırma kutusu oluşturmaz, sticky bozulmaz) */
.sec, .foot { overflow-x: clip; }

/* ---------- çok dar ekranlar (320–480px) ---------- */
@media (max-width: 480px) {
  .star-h1 { font-size: 25vw; text-shadow: 6px 6px 0 var(--accent); }
  .sec-title { font-size: clamp(24px, 8.4vw, 34px); overflow-wrap: anywhere; }
  .hero-tag { bottom: -38px; }
  .hero-note { bottom: -104px; font-size: 22px; }
  .hero-note svg { width: 32px; height: auto; }
  .hero-copy { margin-top: 112px; }
  .mp3-sticker { right: -6px; }
  .g2048-cover { flex-direction: column; gap: 14px; aspect-ratio: auto; padding: 22px 12px; }
  .g2048-side { max-width: none; align-items: center; text-align: center; }
  .g2048-side .g2048-live { align-self: center; }
}
@media (max-width: 360px) {
  .lib-table th:nth-child(2), .lib-table td:nth-child(2) { display: none; }
}

/* =========================================================
   v6 — DRUG modu easter egg'leri (js/drug.js)
   ========================================================= */
.egg-toasts { position: fixed; left: 50%; top: 74px; z-index: 96; display: flex; flex-direction: column; align-items: center; gap: 8px; translate: -50% 0; pointer-events: none; }
.egg-toast { display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 24px)); padding: 10px 14px; border: 3px solid #000; background: #0b0a12; color: #F2EEE3; box-shadow: -5px 0 0 var(--pink), 5px 0 0 var(--cyan), 0 0 26px rgba(153, 229, 80, .45); animation: egg-in .5s var(--ease-spring) both; }
.egg-toast.big { border-color: var(--yellow); box-shadow: -6px 0 0 var(--pink), 6px 0 0 var(--cyan), 0 0 40px rgba(251, 242, 54, .6); }
.egg-toast.out { opacity: 0; translate: 0 -12px; transition: opacity .4s, translate .4s; }
.egg-ico svg { display: block; }
.egg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.egg-txt b { font-size: 12px; color: var(--acid); }
.egg-txt i { font-family: var(--f-term); font-size: 19px; font-style: normal; line-height: 1.1; }
@keyframes egg-in { from { opacity: 0; translate: 0 -24px; scale: .9; } }

.trip-trail { position: fixed; inset: 0; z-index: 93; pointer-events: none; image-rendering: pixelated; }
html:not([data-mode="drug"]) .trip-trail { display: none; }
.trip-rain { position: fixed; inset: 0; z-index: 92; pointer-events: none; }

/* halüsinasyon böceği */
.trip-bug { position: fixed; left: 0; top: 0; z-index: 89; padding: 6px; border: 0; background: none; cursor: crosshair; animation: bug-walk var(--dur) linear forwards; filter: drop-shadow(0 0 6px rgba(153, 229, 80, .8)); -webkit-tap-highlight-color: transparent; }
.trip-bug span { display: block; rotate: var(--rot); }
.trip-bug svg { display: block; }
.trip-bug .f2 { position: absolute; left: 6px; top: 6px; opacity: 0; }
.trip-bug:not(.splat) .f1 { animation: bug-f1 .24s steps(1) infinite; }
.trip-bug:not(.splat) .f2 { animation: bug-f2 .24s steps(1) infinite; }
@keyframes bug-f1 { 50% { opacity: 0; } }
@keyframes bug-f2 { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes bug-walk {
  0% { translate: var(--x0) var(--y0); }
  25% { translate: calc(var(--x0) + (var(--x1) - var(--x0)) * .25) calc(var(--y0) + 40px); }
  50% { translate: calc(var(--x0) + (var(--x1) - var(--x0)) * .5) calc((var(--y0) + var(--y1)) / 2 - 40px); }
  75% { translate: calc(var(--x0) + (var(--x1) - var(--x0)) * .75) calc(var(--y1) + 30px); }
  100% { translate: var(--x1) var(--y1); }
}
.trip-bug.splat { animation-play-state: paused; scale: 1.6; opacity: 0; filter: hue-rotate(180deg) drop-shadow(0 0 10px #D77BBA); transition: scale .2s, opacity .5s .2s; }

/* hızlı kaydırınca jöle başlıklar — JS sadece ekrandaki başlıklara yazar (kökte değişken yok) */
html[data-mode="drug"] .sec-head { transition: transform .5s var(--ease-spring); transform-origin: 50% 100%; }

/* kayan şeritteki gizli mesajlar */
.tk-secret { color: var(--pink); font-family: var(--f-glitch); text-shadow: -2px 0 var(--cyan), 2px 0 var(--acid); }

/* negatif (Shift basılı) */
html.trip-neg { filter: invert(1) hue-rotate(180deg); }

/* ters dünya: dönme noktası JS ile her karede ekranın ortasına taşınır */
html[data-mode="drug"] .frame { transition: rotate .85s var(--ease-spring); }
html.trip-flip .frame { rotate: 180deg; }
html.trip-thud .frame { animation: trip-thud .5s steps(8); }
@keyframes trip-thud { 0%, 100% { translate: 0 0; } 15% { translate: 0 -22px; } 35% { translate: 0 12px; } 55% { translate: 0 -6px; } 75% { translate: 0 3px; } }
html.trip-blink body::before { content: ''; position: fixed; inset: 0; z-index: 99; background: #F2EEE3; pointer-events: none; }

/* asit — desen sabit bir katmanda büyüyüp küçülür (kompozitörde; her karede sayfa yeniden boyanmaz) */
html.trip-acid { animation: acid-hue 2.4s linear infinite; }
html.trip-acid body::before { content: ''; position: fixed; inset: -50vmax; z-index: -1; pointer-events: none; background: repeating-radial-gradient(circle at 50% 50%, #99E550 0 16px, #D77BBA 16px 32px, #5FCDE4 32px 48px, #050409 48px 64px); opacity: .6; animation: acid-zoom 1.2s ease-in-out infinite alternate; will-change: transform; }
@keyframes acid-hue { to { filter: hue-rotate(360deg); } }
@keyframes acid-zoom { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.18) rotate(8deg); } }

/* üçüncü göz: avatar gözlerini açar (48×48 piksel ızgarasına oturan SVG) */
.av-eyes { position: absolute; z-index: 2; pointer-events: none; }
.av-eyes svg { display: block; width: 100%; height: 100%; }
.av-eyes .ae-f, .av-eyes .ae-pupils { display: none; }
.av-eyes[data-f="1"] .ae-f[data-f="1"], .av-eyes[data-f="2"] .ae-f[data-f="2"], .av-eyes[data-f="3"] .ae-f[data-f="3"], .av-eyes[data-f="3"] .ae-pupils { display: inline; }
.ae-iris { animation: hue 3s linear infinite; }
html:not([data-mode="drug"]) .av-eyes { display: none; }

/* logo sarhoş */
html.trip-logo .topbar .logo { animation: logo-drunk .55s steps(3) infinite, acid-hue 1.2s linear infinite; }
@keyframes logo-drunk { 0% { rotate: -6deg; translate: 0 2px; } 50% { rotate: 5deg; translate: 3px -2px; } 100% { rotate: -2deg; translate: -2px 1px; } }
.trip-star { position: fixed; z-index: 95; pointer-events: none; filter: hue-rotate(var(--hue)); animation: trip-star 1.2s var(--ease-out) forwards; }
.trip-star svg { display: block; }
@keyframes trip-star { to { translate: var(--dx) var(--dy); rotate: 360deg; opacity: 0; } }

/* hiçbir şey yapmayınca erime: ekranın resmi WebGL shader'ında akar (js/melt.js) */
.melt-gl { position: fixed; inset: 0; z-index: 69; display: block; width: 100%; height: 100%; pointer-events: none; }
/* WebGL yoksa yedek: renkli damlalar yukarıdan akar */
html.trip-melt body::after {
  content: ''; position: fixed; inset: 0; z-index: 91; pointer-events: none; opacity: .85;
  background:
    linear-gradient(#D77BBA, #D77BBA) 4% 0, linear-gradient(#99E550, #99E550) 13% 0, linear-gradient(#5FCDE4, #5FCDE4) 22% 0,
    linear-gradient(#D77BBA, #D77BBA) 34% 0, linear-gradient(#FBF236, #FBF236) 45% 0, linear-gradient(#99E550, #99E550) 57% 0,
    linear-gradient(#5FCDE4, #5FCDE4) 66% 0, linear-gradient(#D77BBA, #D77BBA) 78% 0, linear-gradient(#99E550, #99E550) 88% 0, linear-gradient(#FBF236, #FBF236) 97% 0;
  background-repeat: no-repeat;
  background-size: 16px 0, 24px 0, 12px 0, 28px 0, 14px 0, 20px 0, 26px 0, 12px 0, 22px 0, 16px 0;
  animation: trip-drip 7s steps(28) forwards;
}
@keyframes trip-drip { to { background-size: 16px 46vh, 24px 72vh, 12px 30vh, 28px 88vh, 14px 54vh, 20px 100vh, 26px 38vh, 12px 76vh, 22px 60vh, 16px 92vh; } }

/* başlık patlaması (çift tıkta harfler seçilmez) */
.sec-title { -webkit-tap-highlight-color: transparent; }
.boom-ch { display: inline-block; transition: transform .8s var(--ease-out), opacity .6s; }
.booming .boom-ch { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: .85; transition-duration: .5s; }

/* =========================================================
   v7 — mini MP3 çalar: dikey, sol kenara saklanır (müzik bölümü ekranda değilken)
   Saklıyken sadece "MP3" tutamağı görünür → sayfanın önüne geçmez. Geniş ekranda sayfanın yanındaki boşlukta hep açık.
   ========================================================= */
.mini-mp3 { --bw: 150px; position: fixed; left: 0; top: 50%; z-index: 58; display: flex; align-items: center; opacity: 0; visibility: hidden; translate: calc(-1 * var(--bw) - 44px) -50%; transition: translate .5s var(--ease-out), opacity .3s, visibility 0s .5s; }
.mini-mp3.in { opacity: 1; visibility: visible; translate: calc(-1 * var(--bw)) -50%; transition: translate .5s var(--ease-out), opacity .3s, visibility 0s; }
.mini-mp3.in.open { translate: 0 -50%; }
.mini-mp3.roomy { left: 14px; }
.mini-mp3.roomy:not(.open) { left: 0; }
.mm-body { display: flex; flex-direction: column; gap: 8px; width: var(--bw); padding: 10px; border: var(--b) solid var(--ink); border-left: 0; border-radius: 0 18px 18px 0; background: var(--accent); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.mini-mp3.roomy.open .mm-body { border-left: var(--b) solid var(--ink); border-radius: 18px; }
.mm-head { display: flex; align-items: center; justify-content: space-between; }
.mm-brand { font-size: 10px; font-weight: 700; }
.mm-x { width: 22px; height: 22px; padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 9px; transition: background-color .15s, color .15s; }
.mm-screen { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; border: 3px solid var(--ink); border-radius: 6px; background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 2px var(--navy); }
.mm-state { overflow: hidden; color: var(--acid); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.mm-art { align-self: center; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid var(--paper); background: repeating-linear-gradient(45deg, var(--navy) 0 6px, var(--ink) 6px 12px); }
.mm-art img { display: block; width: 100%; height: 100%; }
.mm-art img:not([src]) { visibility: hidden; }
.mm-title { display: block; overflow: hidden; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--paper); font-size: 14px; font-stretch: 100%; font-weight: 800; line-height: 1.1; text-align: left; white-space: nowrap; }
.mm-t { display: inline-flex; }
.mm-title.long .mm-t { animation: mq 8s linear infinite; }
.mm-title.long .mm-t > span { padding-right: 30px; }
.mm-artist { overflow: hidden; color: var(--ice); font-size: 16px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; }
.mm-bar { position: relative; height: 4px; margin-top: 5px; background: var(--navy); cursor: pointer; }
.mm-bar::before { content: ''; position: absolute; inset: -7px 0; }
.mm-bar i { position: absolute; inset: 0; background: var(--acid); transform-origin: 0 50%; transform: scaleX(0); transition: transform .25s linear; }
.mm-bar:focus-visible { outline: 2px dashed var(--paper); outline-offset: 3px; }
.mm-ctrl { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 5px; }
.mm-vol { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 5px; }
.mm-ctrl button, .mm-vol button { height: 32px; padding: 0; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 9px; box-shadow: 2px 2px 0 var(--ink); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.mm-vol button { height: 28px; }
.mm-ctrl button:active, .mm-vol button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); transition-duration: .05s; }
.mm-ctrl .mm-play { background: var(--ink); color: var(--acid); font-size: 12px; font-weight: 700; }
.mm-vol .mm-mute { position: relative; font-size: 8px; }
.mm-segs { display: flex; align-items: flex-end; gap: 2px; height: 20px; cursor: pointer; }
.mm-segs i { flex: 1; height: calc(28% + var(--j) * 8%); border: 1px solid var(--ink); background: rgba(34, 32, 52, .14); }
.mm-segs i.on { background: var(--ink); }
.mm-segs i.on:nth-child(n+8) { background: var(--orange); }
.mm-segs i.on:nth-child(10) { background: var(--hot); }
.mini-mp3.is-muted .mm-segs i.on { background: rgba(34, 32, 52, .3); }
.mini-mp3.is-muted .mm-mute { background: var(--hot); color: var(--paper); }

/* tutamak */
.mm-grip { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 28px; padding: 9px 0; border: var(--b) solid var(--ink); border-left: 0; border-radius: 0 10px 10px 0; background: var(--accent); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); -webkit-tap-highlight-color: transparent; }
.mini-mp3.open .mm-grip { margin-left: -3px; }
.mm-grip-t { writing-mode: vertical-rl; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.mm-arrow { font-size: 9px; line-height: 1; transition: rotate .3s var(--ease-out); }
.mini-mp3.open .mm-arrow { rotate: 180deg; }
.mm-eq { display: flex; align-items: flex-end; gap: 1px; height: 12px; }
.mm-eq i { width: 3px; height: 100%; background: var(--ink); transform-origin: 50% 100%; transform: scaleY(.25); }
.mini-mp3.is-playing .mm-eq i { animation: eq .8s steps(4) infinite; }
.mini-mp3.is-playing .mm-eq i:nth-child(2) { animation-delay: -.3s; }
.mini-mp3.is-playing .mm-eq i:nth-child(3) { animation-delay: -.55s; }
.mini-mp3.is-playing .mm-eq i:nth-child(4) { animation-delay: -.15s; }
.mm-grip.bump { animation: mm-bump .6s var(--ease-spring); }
@keyframes mm-bump { 30% { translate: 9px 0; } 65% { translate: -2px 0; } }

@media (hover: hover) and (pointer: fine) {
  .mm-ctrl button:hover, .mm-vol button:hover { background: var(--yellow); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
  .mm-ctrl .mm-play:hover { background: var(--ink); color: var(--yellow); }
  .mm-x:hover { background: var(--hot); color: var(--paper); }
  .mm-art:hover, .mm-title:hover { filter: brightness(1.15); }
  .mm-grip:hover { background: var(--yellow); }
}
html[data-mode="drug"] .mm-body, html[data-mode="drug"] .mm-grip { border-color: var(--acid); background: #000; color: var(--acid); box-shadow: 5px 0 0 var(--cyan), 0 0 24px rgba(153, 229, 80, .35); }
html[data-mode="drug"] .mm-screen { border-color: var(--acid); background: #07060d; }
html[data-mode="drug"] .mm-x, html[data-mode="drug"] .mm-ctrl button, html[data-mode="drug"] .mm-vol button { border-color: var(--acid); background: #000; color: var(--acid); box-shadow: none; }
html[data-mode="drug"] .mm-ctrl .mm-play { background: var(--acid); color: #000; }
html[data-mode="drug"] .mm-eq i { background: var(--pink); }
html[data-mode="drug"] .mm-segs i { border-color: var(--acid); background: rgba(153, 229, 80, .1); }
html[data-mode="drug"] .mm-segs i.on { background: var(--acid); }
html[data-mode="drug"] .mm-segs i.on:nth-child(n+8) { background: var(--pink); }
@media (hover: hover) and (pointer: fine) {
  html[data-mode="drug"] .mm-ctrl button:hover, html[data-mode="drug"] .mm-vol button:hover, html[data-mode="drug"] .mm-grip:hover { background: var(--pink); color: #000; }
}
@media (max-height: 640px) {
  .mm-art { width: 72px; }
  .mm-segs { display: none; }
}
@media (max-height: 470px) {
  .mm-art { display: none; }
}

/* =========================================================
   v8 — yazılar seçilemez (formlar, terminal çıktısı ve gizlilik metni hariç)
   ========================================================= */
body { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"], .terminal-out, .legal { -webkit-user-select: text; user-select: text; }