/* Thunko tanıtım sayfası: oyunun Bordo · Kemik renkleri, piksel yazı */
:root {
  --zemin: #0e0b0c;
  --zemin2: #150e10;
  --panel: #1f1517;
  --panel2: #2a1c1f;
  --cizgi: #3a2a2e;
  --bordo: #9e3548;
  --bordo-acik: #c4546a;
  --bordo-koyu: #3a1a20;
  --altin: #e0a93b;
  --altin-acik: #f4c35a;
  --kemik: #e9e0cc;
  --kemik-koyu: #b9ab8d;
  --soluk: #9a8e80;
  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --genislik: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--zemin); color: var(--kemik);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--altin-acik); }
h1, h2, h3 { font-family: var(--pixel); font-weight: 700; line-height: 1.1; margin: 0; }

/* --- Üst çubuk --- */
.ust {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  padding: 10px max(16px, env(safe-area-inset-left)); background: rgba(14, 11, 12, .88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px solid var(--cizgi);
}
.ust-logo { font: 700 26px/1 var(--pixel); text-decoration: none; letter-spacing: 1px; }
.ust-logo span { color: var(--kemik); }
.ust-logo b { color: var(--bordo-acik); display: inline-block; transform: translateX(2px) rotate(8deg); }
.ust nav { display: flex; gap: 20px; margin-left: auto; }
.ust nav a { font-family: var(--pixel); color: var(--kemik-koyu); text-decoration: none; font-size: 16px; }
.ust nav a:hover { color: var(--kemik); }
.ust .dil {
  font: 700 14px/1 var(--pixel); color: var(--kemik-koyu); text-decoration: none; padding: 7px 9px; border-radius: 6px;
  border: 2px solid var(--cizgi); letter-spacing: 1px;
}
.ust .dil:hover { color: var(--kemik); border-color: var(--kemik-koyu); }
@media (max-width: 720px) { .ust nav { display: none; } .ust .dil { margin-left: auto; } }

/* --- Düğmeler --- */
.dugme {
  display: inline-block; font: 700 20px/1 var(--pixel); letter-spacing: .5px; text-decoration: none;
  padding: 16px 26px; border-radius: 8px; border: 0; cursor: pointer; text-align: center;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.dugme.ana { background: var(--bordo); color: var(--kemik); box-shadow: 0 5px 0 var(--bordo-koyu), 0 7px 0 #070506; }
.dugme.ikinci { background: var(--panel2); color: var(--kemik); box-shadow: 0 5px 0 #120c0d, 0 7px 0 #070506; border: 2px solid var(--cizgi); }
.dugme:hover { filter: brightness(1.12); }
.dugme:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bordo-koyu); }
.dugme:focus-visible, .ust a:focus-visible, .platform:focus-visible { outline: 3px solid var(--altin-acik); outline-offset: 3px; }
.kucuk-dugme { font-size: 16px; padding: 10px 18px; box-shadow: 0 3px 0 var(--bordo-koyu), 0 5px 0 #070506 !important; }

/* --- Giriş (gece denizi) --- */
.kahraman {
  position: relative; overflow: hidden; min-height: min(86vh, 760px); display: grid; place-items: center;
  padding: 72px 16px 140px; text-align: center;
  background: radial-gradient(ellipse at 50% 110%, #3a1a20 0%, transparent 60%), linear-gradient(#0b0809, #140c0f 70%, #1c1013);
}
.gok {
  position: absolute; inset: 0; opacity: .85;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #e9e0cc 99%, transparent), radial-gradient(2px 2px at 27% 42%, #b9ab8d 99%, transparent),
    radial-gradient(2px 2px at 41% 12%, #e9e0cc 99%, transparent), radial-gradient(2px 2px at 63% 30%, #9a8e80 99%, transparent),
    radial-gradient(2px 2px at 78% 14%, #e9e0cc 99%, transparent), radial-gradient(2px 2px at 88% 46%, #b9ab8d 99%, transparent),
    radial-gradient(2px 2px at 8% 60%, #9a8e80 99%, transparent), radial-gradient(2px 2px at 52% 56%, #9a8e80 99%, transparent),
    radial-gradient(2px 2px at 34% 70%, #b9ab8d 99%, transparent), radial-gradient(2px 2px at 94% 72%, #e9e0cc 99%, transparent);
  animation: yildiz 5s ease-in-out infinite alternate;
}
@keyframes yildiz { from { opacity: .5; } to { opacity: .95; } }
.ay {
  position: absolute; top: 9%; right: 11%; width: 84px; height: 84px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, #d8cbae 0 9%, transparent 10%), radial-gradient(circle at 60% 64%, #d8cbae 0 7%, transparent 8%),
    radial-gradient(circle at 66% 30%, #d8cbae 0 5%, transparent 6%), radial-gradient(circle at 48% 50%, #f2ead7 0 60%, #c9bb9b 72%);
  box-shadow: 0 0 0 10px rgba(242, 234, 215, .06), 0 0 0 26px rgba(242, 234, 215, .035), 0 0 60px 10px rgba(242, 234, 215, .12);
}
@media (max-width: 720px) { .ay { width: 56px; height: 56px; top: 6%; right: 8%; } }
.dalgalar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(233, 224, 204, .07) 22px 40px) 0 18px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(233, 224, 204, .05) 34px 50px) 0 52px / 100% 4px no-repeat,
    linear-gradient(transparent, #1c1418 30%, var(--zemin));
  animation: dalga 9s linear infinite;
}
@keyframes dalga { from { background-position: 0 18px, 0 52px, 0 0; } to { background-position: 400px 18px, -400px 52px, 0 0; } }
@media (prefers-reduced-motion: reduce) { .gok, .dalgalar { animation: none; } }
.kahraman-ic { position: relative; max-width: 720px; }
.logo { font-size: clamp(64px, 17vw, 150px); letter-spacing: 2px; margin-bottom: 14px; }
.logo span { color: var(--kemik); text-shadow: 0 6px 0 #6b5a4a, 0 10px 0 #070506; }
.logo b { color: var(--bordo); text-shadow: 0 6px 0 var(--bordo-koyu), 0 10px 0 #070506; display: inline-block; transform: translateX(6px) rotate(8deg); }
.slogan { font: 600 clamp(22px, 4.4vw, 32px)/1.2 var(--pixel); color: var(--altin-acik); margin: 0 0 16px; }
.ozet { color: var(--kemik-koyu); max-width: 600px; margin: 0 auto 28px; font-size: 18px; }
.dugmeler { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.not { color: var(--soluk); font-size: 14px; margin: 22px 0 0; font-family: var(--pixel); }

/* --- Bölümler --- */
.bolum { max-width: var(--genislik); margin: 0 auto; padding: 72px 16px 24px; }
.bolum > h2, .son-cagri h2 {
  font-size: clamp(30px, 6vw, 44px); color: var(--kemik); text-align: center; margin-bottom: 28px;
  text-shadow: 0 4px 0 #070506;
}
.bolum-yazi { max-width: 720px; margin: -8px auto 28px; text-align: center; color: var(--kemik-koyu); }
.cerceve {
  background: var(--panel); border: 3px solid var(--cizgi); border-radius: 10px; padding: 8px;
  box-shadow: 0 8px 0 #070506;
}
.cerceve video { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: #000; }

.sayilar {
  list-style: none; margin: 56px auto 0; padding: 0 16px; max-width: var(--genislik);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.sayilar li {
  background: var(--panel); border: 2px solid var(--cizgi); border-radius: 8px; padding: 14px 8px; text-align: center;
}
.sayilar b { display: block; font: 400 38px/1 var(--pixel); color: var(--altin-acik); }  /* kalın yazıda 2, 8 gibi görünüyor */
.sayilar span { font-size: 14px; color: var(--soluk); }
@media (max-width: 720px) { .sayilar { grid-template-columns: repeat(2, 1fr); } .sayilar li:last-child { grid-column: 1 / -1; } }

.ozellik { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: center; margin-bottom: 44px; }
.ozellik.ters img { order: 2; }
.ozellik img { border: 3px solid var(--cizgi); border-radius: 8px; box-shadow: 0 8px 0 #070506; }
.ozellik h3, .hikaye h2 { font-size: 28px; color: var(--altin-acik); margin-bottom: 10px; }
.ozellik p, .hikaye p { margin: 0 0 10px; color: var(--kemik-koyu); }
@media (max-width: 760px) {
  .ozellik { grid-template-columns: 1fr; gap: 16px; }
  .ozellik.ters img { order: 0; }
}

.hikaye { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: center; }
.hikaye img { border: 3px solid var(--cizgi); border-radius: 8px; box-shadow: 0 8px 0 #070506; }
.hikaye h2 { font-size: 30px; }
@media (max-width: 760px) { .hikaye { grid-template-columns: 1fr; gap: 16px; } }

/* --- Platformlar --- */
.platformlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .platformlar { grid-template-columns: repeat(2, 1fr); } }
.platform {
  display: grid; justify-items: center; gap: 4px; padding: 22px 12px 18px; border-radius: 10px; text-align: center;
  background: var(--panel); border: 2px solid var(--cizgi); color: var(--kemik); text-decoration: none;
}
.platform svg { width: 44px; height: 44px; fill: var(--kemik-koyu); shape-rendering: crispEdges; margin-bottom: 6px; }
.platform b { font: 700 22px/1.1 var(--pixel); }
.platform small { color: var(--soluk); font-size: 14px; }
.platform span {
  margin-top: 8px; font: 700 13px/1 var(--pixel); letter-spacing: 1px; padding: 6px 10px; border-radius: 5px;
  color: var(--soluk); background: var(--panel2); border: 1px solid var(--cizgi);
}
.platform.simdi { border-color: var(--bordo); background: linear-gradient(var(--bordo-koyu), var(--panel)); }
.platform.simdi svg { fill: var(--kemik); }
.platform.simdi span { color: var(--kemik); background: var(--bordo); border-color: var(--bordo-acik); }
.platform.simdi:hover { filter: brightness(1.12); }

/* --- Son çağrı ve alt --- */
.son-cagri {
  text-align: center; padding: 80px 16px; margin-top: 64px;
  background: radial-gradient(ellipse at 50% 120%, #3a1a20, transparent 70%);
}
.son-cagri p { color: var(--kemik-koyu); max-width: 560px; margin: 0 auto 28px; }
.alt { text-align: center; color: var(--soluk); font-size: 14px; padding: 28px 16px 40px; border-top: 2px solid var(--cizgi); }
.alt p { margin: 4px 0; }
.alt b { font-family: var(--pixel); color: var(--kemik); }