/* Snipe & Seek tanıtım sitesi. Oyunun kartlarının dili: kalın koyu dış çizgi, sert gölge, düz renk. */

@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:900;font-display:swap;src:url(fonts/barlow-condensed-900-italic-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:900;font-display:swap;src:url(fonts/barlow-condensed-900-italic-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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800-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:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/barlow-condensed-900-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/barlow-condensed-900-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:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/nunito-400-900-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/nunito-400-900-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: #1f1b2e;
  --ink-deep: #14111f;
  --cream: #fff6e6;
  --paper: #f1e4cf;
  --red: #e8452c;
  --red-dark: #b8301c;
  --olive: #6e7b36;
  --leaf: #93a24a;
  --yellow: #f7c33b;
  --orange: #ff8a2a;
  --sky: #ddf1fb;
  --night: #2a2540;
  --scope: #c8f03c;
  --muted: #5b5466;
  --head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--cream); color: var(--ink); font: 500 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { max-width: 100%; height: auto; display: block }
a { color: var(--red) }
a:hover { color: var(--red-dark) }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 900; line-height: .95 }
p { margin: 0 }

/* İki dil aynı sayfadadır: <html data-lang> seçili olmayanı gizler (site.js). */
html[data-lang="tr"] [lang="en"], html[data-lang="en"] [lang="tr"] { display: none !important }
/* Yayın durumu <html>'in öznitelikleridir (index.html'in başı). */
html[data-play="soon"] .only-live, html[data-play="live"] .only-soon, html[data-beta="off"] .only-beta { display: none !important }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px }
section { scroll-margin-top: 70px }
.band { padding: clamp(72px, 9vw, 112px) 0 }
.dark { background: var(--night); border-block: 4px solid var(--ink) }
.sky { background: var(--sky); border-block: 4px solid var(--ink) }

/* Yazının dış çizgisi harfin arkasında kalır (paint-order): çizgi film başlığı. */
.stroke { -webkit-text-stroke: var(--sw, 6px) var(--ink); paint-order: stroke fill }
.title {
  margin-bottom: 20px; font-size: clamp(46px, 6.5vw, 88px); line-height: .9; color: #fff;
  --sw: 7px; text-shadow: 0 6px 0 var(--ink); text-wrap: balance;
}
.dark .title { color: var(--cream); text-shadow: 0 6px 0 var(--red) }
.lead { max-width: 40em; margin-bottom: 52px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; text-wrap: pretty }
.dark .lead { color: #e9e3f5 }

.card {
  background: #fff; border: 3px solid var(--ink); border-radius: 24px; overflow: hidden;
  box-shadow: inset -5px -7px 0 rgb(31 27 46 / .06), 0 7px 0 var(--ink);
}
.dark .card { background: var(--cream); border-color: var(--ink-deep); box-shadow: inset -5px -7px 0 rgb(31 27 46 / .07), 0 7px 0 var(--ink-deep) }
.grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)) }

.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink); background: var(--yellow); color: var(--ink); font: 800 17px/1 var(--head); letter-spacing: .02em; white-space: nowrap;
}
.chip img { width: 20px; height: 20px }
.chip.green { background: var(--olive); color: #fff }

/* ---------- Üst çubuk ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 3px solid var(--ink) }
.top .wrap { display: flex; align-items: center; gap: 12px; padding-block: 9px; padding-inline: 16px }
.logo { display: flex; align-items: center; gap: 9px; margin-right: auto; min-width: 0; text-decoration: none }
.logo img { width: 42px; height: 42px; border-radius: 12px; border: 3px solid var(--ink); flex: none }
.wordmark { display: flex; align-items: center; gap: 5px; font: italic 900 clamp(21px, 6vw, 28px)/1 var(--head); --sw: 4px; white-space: nowrap }
.wordmark .snipe { color: var(--red) }
.wordmark .seek { color: var(--leaf) }
.wordmark .amp {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 3px solid var(--ink); border-radius: 50%;
  background: #fff; color: var(--ink); font: normal 900 15px/1 var(--head); -webkit-text-stroke: 0;
}
.nav { display: none; gap: 22px; margin-right: 10px }
.nav a { color: var(--ink); text-decoration: none; font: 800 19px/1 var(--head); letter-spacing: .02em }
.nav a:hover { color: var(--red) }
@media (min-width: 960px) { .nav { display: flex } }
.langs { display: flex; flex: none; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 0 var(--ink) }
.langs button { border: 0; padding: 6px 10px; background: transparent; color: var(--ink); font: 900 17px/1 var(--head); cursor: pointer }
.langs button + button { border-left: 3px solid var(--ink) }
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--cream) }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 12px;
  background: var(--red); color: #fff; text-decoration: none; font: 900 19px/1.1 var(--head); letter-spacing: .02em;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18), 0 3px 0 var(--ink); transition: transform .12s;
}
.btn:hover { color: #fff; transform: translateY(-2px) }
.btn:active { transform: translateY(2px) }
.btn.light { background: #fff; color: var(--ink) }
.btn.big { height: 64px; padding: 0 22px; font-size: 23px; border-radius: 14px; box-shadow: inset 0 -5px 0 rgb(31 27 46 / .08), 0 5px 0 var(--ink) }
.btn .rec { width: 12px; height: 12px; border-radius: 50%; background: #ff2a1a; box-shadow: 0 0 0 4px rgb(255 42 26 / .22) }

/* ---------- Giriş ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #8ed1f5 0%, #c4e8fa 58%, #ffe3b3 100%); border-bottom: 4px solid var(--ink) }
.cloud { position: absolute; height: auto; pointer-events: none }
.cloud.c1 { left: 2%; top: 4px; width: 128px }
.cloud.c2 { right: 5%; top: 10px; width: 108px }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center; padding-top: 76px }
.hero h1 { font-size: clamp(60px, 8.4vw, 120px); line-height: .9; --sw: 8px; text-shadow: 0 7px 0 var(--ink) }
.hero h1 span { display: block }
.hero h1 .l1 { color: var(--leaf) }
.hero h1 .l2 { color: var(--red) }
.hero h1 .l3 { color: var(--yellow) }
.hero .pitch { max-width: 30em; margin-top: 28px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; text-wrap: pretty }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px }
.soon {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; height: 64px; padding: 0 20px; border: 3px solid var(--ink); border-radius: 14px;
  background: var(--ink); color: #fff; box-shadow: 0 5px 0 rgb(31 27 46 / .35); line-height: 1;
}
.soon small { color: #ffb36b; font: 800 12px/1 var(--body); letter-spacing: .12em }
.soon b { font: 800 22px/1 var(--body) }
.badge img { height: 64px; width: auto }
.facts { margin-top: 18px; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-wrap: balance }

.shot { position: relative; padding: 26px 10px 24px }
.shot .frame { aspect-ratio: 5 / 4; border: 4px solid var(--ink); border-radius: 28px; overflow: hidden; box-shadow: 0 10px 0 var(--ink); background: #8ed1f5 }
.shot .frame img { width: 100%; height: 100%; object-fit: cover }
/* Dürbün eki: nişancının gördüğü, oyunun ikonundaki halkayla. */
.scope {
  position: absolute; right: -6px; top: -4px; width: 36%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 7px solid var(--scope); box-shadow: 0 0 0 3px var(--ink), 0 9px 0 3px var(--ink); background: #000;
  animation: sway 6s ease-in-out infinite;
}
.scope img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08) }
@keyframes sway { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(4px, -3px) } 50% { transform: translate(-2px, 3px) } 75% { transform: translate(-4px, -1px) } }
.sticker {
  position: absolute; padding: 4px 14px; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink);
  color: #fff; font: 900 32px/1.1 var(--head); --sw: 4px;
}
.sticker.fire { right: 30%; top: 28%; transform: rotate(6deg); background: var(--red) }
.sticker.hide { left: -6px; bottom: 6px; transform: rotate(-5deg); background: var(--olive) }
.skyline { position: relative; display: flex; align-items: flex-end; height: 96px; margin-top: 56px }
.skyline i { height: var(--h); width: var(--w); margin-left: -3px; background: var(--c); border: 3px solid var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0 }
.skyline i:first-child { margin-left: 0 }
.skyline i:last-child { flex: 1; border-right: 0; border-radius: 8px 0 0 0 }

/* ---------- Nasıl oynanır ---------- */
.steps { --min: 270px; gap: 52px 36px }
.phone { position: relative; max-width: 250px; margin: 0 auto; padding: 9px; background: var(--ink); border: 3px solid var(--ink); border-radius: 38px; box-shadow: 0 8px 0 rgb(31 27 46 / .25) }
.phone img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; border-radius: 29px; background: #0e1215 }
.step-head { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px }
.num {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink); color: #fff; font: 900 26px/1 var(--head);
}
.step-head h3 { font-size: 42px; line-height: 1 }
.steps p { text-wrap: pretty }

/* ---------- Öne çıkanlar ---------- */
.features { --min: 250px }
.feature .pic { aspect-ratio: 4 / 3; border-bottom: 3px solid var(--ink-deep); background: #000 }
.feature .pic img { width: 100%; height: 100%; object-fit: cover }
.feature .body { padding: 20px 22px 24px }
.feature h3 { margin-bottom: 8px; font-size: 30px }
.feature p { font-size: 16px; line-height: 1.5; text-wrap: pretty }
.rewards { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 14px 0 0; padding: 0; list-style: none }
.rewards li { display: flex; align-items: center; gap: 6px; font: 800 16px/1 var(--head); letter-spacing: .02em }
.rewards img, .rewards svg { width: 34px; height: 34px }

/* ---------- Haritalar ---------- */
.maps { --min: 300px }
/* Yalnızca kartın resmi: etiketteki kupa da kartın içinde, ona uymasın. */
.map > img { width: 100%; aspect-ratio: 800 / 347; object-fit: cover; border-bottom: 3px solid var(--ink) }
.map .body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px }
.map .head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.map h3 { font-size: 40px }
.map p { font-size: 16px; line-height: 1.45 }

/* ---------- Karakterler ---------- */
.chars { --min: 180px; gap: 24px }
.char { position: relative; background: var(--c); border: 3px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: inset -5px -7px 0 rgb(31 27 46 / .08), 0 6px 0 var(--ink) }
.char .stage { position: relative; aspect-ratio: 3 / 4; padding: 16px 12px 10px }
.char .stage::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: 10px; height: 16px; border-radius: 50%; background: rgb(31 27 46 / .16) }
.char .stage img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: center bottom }
.char .plate { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; background: #fff; border-top: 3px solid var(--ink) }
.char h3 { font-size: 32px; line-height: 1 }
.price { display: inline-flex; align-items: center; gap: 4px; font: 900 18px/1 var(--head) }
.price svg { width: 18px; height: 18px }
.price.free { padding: 4px 8px; border-radius: 8px; background: var(--olive); color: #fff; font-size: 15px }

/* ---------- Tüfekler ---------- */
/* Beşi masaüstünde tek sırada; daralınca artan kart ortada kalır. */
.rifles { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px }
.rifle { display: flex; flex: 1 1 200px; flex-direction: column; max-width: 300px }
.rifle .pic { display: grid; place-items: center; aspect-ratio: 16 / 8; padding: 10px 14px; background: linear-gradient(180deg, #fff3e2, #ffe6cf); border-bottom: 3px solid var(--ink) }
.rifle .pic img { width: 100%; height: auto }
.rifle .body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 16px 18px }
.rifle .name { display: flex; flex-direction: column; align-items: flex-start; gap: 6px }
.rifle h3 { font-size: 27px; line-height: 1 }
.rifle .blurb { margin-top: -4px; color: var(--muted); font-size: 14px; font-weight: 700 }
.from { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--muted); font: 800 14px/1 var(--head); letter-spacing: .02em; white-space: nowrap }
.from img { width: 22px; height: 22px }
.stats { display: grid; gap: 6px; margin: 2px 0 0 }
.stats div { display: grid; grid-template-columns: 64px 1fr 24px; align-items: center; gap: 8px }
.stats dt { font: 800 14px/1 var(--head); letter-spacing: .02em }
.stats dd { margin: 0 }
.bar { height: 10px; border: 2px solid var(--ink); border-radius: 6px; background: #f2e8d8; overflow: hidden }
.bar i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--red) }
.bar.steady i { background: var(--olive) }
.stats .val { font: 900 16px/1 var(--head); text-align: right }
.ammo { display: flex; gap: 5px }
.ammo i { width: 9px; height: 18px; border: 2px solid var(--ink); border-radius: 5px 5px 2px 2px; background: #e0a83c }
.ability { margin-top: auto; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff7e8; font-size: 14.5px; line-height: 1.4 }
.ability b { display: block; margin-bottom: 2px; font: 900 18px/1.1 var(--head); letter-spacing: .02em }
.ability b::before { content: '★ '; color: var(--orange) }
.ability small { display: block; margin-top: 4px; color: var(--muted); font-weight: 800; font-size: 13px }
.note { max-width: 62em; margin-top: 28px; color: var(--muted); font-size: 14px; font-weight: 700 }

/* ---------- İlerleme ---------- */
.progress { --min: 420px }
.progress .card { display: flex; flex-direction: column; gap: 20px; padding: 26px }
.progress h3 { font-size: 32px }
.progress p { font-size: 16px; line-height: 1.5; text-wrap: pretty }
.merge { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px }
.merge .chest { width: 104px; height: 104px }
.trio { display: flex; padding-left: 20px }
.c { position: relative; display: grid; place-items: center; width: 56px; height: 76px; margin-left: -20px; border: 3px solid var(--ink); border-radius: 10px; background: var(--r); box-shadow: inset -3px -4px 0 rgb(0 0 0 / .15) }
.c img { width: 90%; transform: rotate(-35deg) }
.trio .c:nth-child(1) { transform: rotate(-10deg) }
.trio .c:nth-child(3) { transform: rotate(10deg) }
.c.big { width: 70px; height: 94px; margin-left: 0; box-shadow: inset -4px -5px 0 rgb(0 0 0 / .15), 0 4px 0 var(--ink), 0 0 0 7px rgb(79 196 90 / .3) }
.arrow { width: 0; height: 0; border-left: 16px solid var(--ink); border-block: 11px solid transparent }
.rarities { display: flex; flex-wrap: wrap; gap: 10px }
.rarity {
  padding: 8px 13px; border: 3px solid var(--ink); border-radius: 12px; background: var(--r); color: #fff; box-shadow: inset -3px -4px 0 rgb(0 0 0 / .14), 0 3px 0 var(--ink);
  font: 900 21px/1 var(--head); --sw: 4px;
}
.wide { grid-column: 1 / -1 }
.split { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center }
.split > div { display: flex; flex-direction: column; gap: 14px }
.gear { display: grid; gap: 8px; margin: 0 }
.gear div { display: grid; grid-template-columns: 82px repeat(5, 66px); align-items: center; gap: 8px }
.gear dt { font: 800 15px/1 var(--head); letter-spacing: .02em; overflow-wrap: anywhere }
.gear dd { margin: 0; aspect-ratio: 1; padding: 3px; border: 2px solid var(--ink); border-radius: 10px; background: #fff }
.gear img { width: 100%; height: 100% }
.cups { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 34px }
.cups p { flex: 1 1 260px; align-self: center; margin-left: 12px }
.cup { display: flex; flex-direction: column; align-items: center; gap: 6px }
.cup img { width: var(--s); height: var(--s) }
.cup b { font: 900 22px/1 var(--head) }
.cup small { color: var(--muted); font: 800 15px/1 var(--head); letter-spacing: .02em }

/* ---------- Arkadaşınla ---------- */
.friend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 56px; align-items: center }
.howto { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none }
.howto li { display: flex; align-items: center; gap: 18px }
.howto .num { width: 56px; height: 56px; font-size: 30px; box-shadow: 0 4px 0 var(--ink) }
.howto strong { display: block; font: 900 32px/1 var(--head) }
.howto li > span:last-child { font-size: 16px; line-height: 1.45 }
.modes { margin-top: 40px; padding-top: 28px; border-top: 3px dashed rgb(31 27 46 / .25) }
.modes h3 { margin-bottom: 14px; font-size: 22px; letter-spacing: .04em }
.modes ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none }
.modes li { padding: 8px 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700 }
.modes li strong { font-weight: 900 }
/* İki telefon: arkada menü, önde oda. */
.duo { position: relative; width: min(100%, 440px); margin: 0 auto; padding-bottom: 72px }
.duo .phone { width: 60%; margin: 0 }
.duo .phone:first-child { transform: rotate(-4deg) }
.duo .phone:last-child { position: absolute; right: 0; bottom: 0; transform: rotate(5deg) }

/* ---------- SSS ---------- */
.faq { display: grid; gap: 16px; max-width: 860px }
.faq details { border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--ink) }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font: 900 26px/1.05 var(--head) }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font: 900 24px/1 var(--head) }
.faq details[open] summary::after { content: '–' }
.faq details p { padding: 0 22px 20px; font-size: 16.5px; text-wrap: pretty }

/* ---------- Son çağrı ---------- */
.final { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 128px) 0; background: #d63b22; border-top: 4px solid var(--ink); text-align: center }
.final .ring { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border: 14px solid rgb(31 27 46 / .16); border-radius: 50% }
.final .ring::before, .final .ring::after { content: ''; position: absolute; background: rgb(31 27 46 / .16) }
.final .ring::before { left: 50%; top: 6%; bottom: 6%; width: 6px; margin-left: -3px }
.final .ring::after { top: 50%; left: 6%; right: 6%; height: 6px; margin-top: -3px }
.final .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 900px }
.final h2 { font-size: clamp(64px, 10vw, 144px); line-height: .88; color: #fff; --sw: 9px; text-shadow: 0 8px 0 var(--ink) }
.final p { color: #fff; font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; text-wrap: balance }
.final .ctas { justify-content: center; margin-top: 0 }

/* ---------- Alt bilgi ---------- */
.foot { padding: 40px 0; background: var(--ink); color: var(--cream) }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px }
.foot .wordmark { margin-right: auto; font-size: 24px; -webkit-text-stroke: 0 }
.foot .wordmark .snipe { color: #ff6b4f }
.foot .wordmark .seek { color: #b4c25e }
.foot a { color: var(--cream); font-weight: 700; font-size: 15px; text-underline-offset: 3px }
.foot a:hover { color: #ffb36b }
.foot .wrap > span { font-size: 15px; font-weight: 700 }
.foot .fine { flex-basis: 100%; color: #a9a2b8; font-size: 13px; font-weight: 600 }

/* ---------- Metin sayfaları (gizlilik, 404) ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 48px 20px 72px }
.doc h1 { font-size: clamp(40px, 7vw, 64px); color: #fff; --sw: 6px; text-shadow: 0 5px 0 var(--ink); margin-bottom: 10px }
.doc h2 { margin: 34px 0 8px; font-size: 28px }
.doc p, .doc li { font-size: 16.5px }
.doc ul { padding-left: 22px }
.doc li { margin: 6px 0 }
.doc .date { color: var(--muted); font-weight: 700; margin-bottom: 18px }
.doc hr { margin: 52px 0; border: 0; border-top: 3px dashed rgb(31 27 46 / .25) }
.doc .jump { display: flex; gap: 12px; margin-bottom: 24px }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
  .top .wrap { gap: 8px; padding-inline: 12px }
  .logo img { width: 36px; height: 36px; border-radius: 10px }
  .wordmark .amp { width: 22px; height: 22px; font-size: 13px }
  .hero-grid { padding-top: 40px }
  .cloud.c1 { display: none }
  .cloud.c2 { top: 4px; right: 3%; width: 84px }
  .progress .card { padding: 22px 20px }
  .merge { gap: 10px }
  .merge .chest { width: 70px; height: 70px }
  .c { width: 44px; height: 60px; margin-left: -16px }
  .c.big { width: 56px; height: 76px }
  .cups { gap: 16px 14px }
  .cup img { width: calc(var(--s) * .72); height: calc(var(--s) * .72) }
  .cup b { font-size: 19px }
  .sticker { font-size: 26px }
  .gear div { grid-template-columns: 64px repeat(5, 1fr); gap: 4px }
  .cups p { margin-left: 0 }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  html { scroll-behavior: auto }
}