/* Kickhood tanıtım sitesi · tek stil dosyası
   Renkler uygulamadaki Renk.swift ile aynıdır. Dış istek yoktur; yazı tipi fonts/ klasöründen gelir.
   Hareketler: açılış sahnesi (site.js, canvas), LED pano, harita gezinmesi, yana kayan anlar şeridi.
   prefers-reduced-motion açıkken hepsi durur. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --cim: #0E231A;
  --cim-acik: #153426;
  --gece: #07130E;
  --tebesir: #F2EEE4;
  --soluk: #C3CBBF;
  --toprak: #E4572E;
  --altin: #F2B93B;
  --cizgi: rgba(242, 238, 228, .26);
  --cizgi-guclu: rgba(242, 238, 228, .6);
  --baslik: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --govde: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kenar: clamp(20px, 5vw, 72px);
  --en: 1320px;
  --ust: 64px;
  --yay: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; overflow-x: clip; scroll-behavior: smooth; }
body { font: 17px/1.6 var(--govde); color: var(--tebesir); background: var(--cim); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--altin); }
:focus-visible { outline: 3px solid var(--altin); outline-offset: 3px; border-radius: 4px; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--baslik); font-weight: 800; line-height: .92; letter-spacing: -.005em; }

.atla { position: absolute; left: 12px; top: -80px; z-index: 30; background: var(--tebesir); color: var(--cim); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.atla:focus { top: 12px; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sar { width: 100%; max-width: calc(var(--en) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); }

/* Üst şerit */
.ust { position: sticky; top: 0; z-index: 20; background: var(--cim); border-bottom: 1px solid var(--cizgi); }
.ust .sar { display: flex; align-items: center; gap: 12px 28px; min-height: var(--ust); padding-block: 8px; }
.marka { font: 800 28px/1 var(--baslik); letter-spacing: .01em; text-decoration: none; margin-right: auto; }
.marka span { color: var(--altin); }
.menu { display: flex; align-items: center; gap: 4px 22px; font-size: 15px; font-weight: 600; }
.menu a { text-decoration: none; padding: 10px 0; color: var(--soluk); white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--tebesir); }
.dil { border: 1px solid var(--cizgi-guclu); border-radius: 999px; padding: 7px 14px !important; color: var(--tebesir) !important; }
.dil:hover { border-color: var(--altin); }

/* Kaydırma çizgisi: sol kenarda taç çizgisi ve yuvarlanan top (site.js ekler) */
.tac { position: fixed; left: 22px; top: var(--ust); bottom: 0; width: 2px; background: var(--cizgi); z-index: 5; pointer-events: none; display: none; }
.tac i { position: absolute; left: -8px; top: calc(var(--p, 0) * (100% - 18px)); width: 18px; height: 18px; border-radius: 50%; background: var(--tebesir); transform: rotate(calc(var(--p, 0) * 2160deg)); }
.tac i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--cim); }
@media (min-width: 1180px) { .tac { display: block; } }

/* Açılış: oynanabilir serbest vuruş */
.vurus { position: relative; display: flex; flex-direction: column; min-height: clamp(620px, calc(100svh - var(--ust)), 880px); overflow: hidden; background: var(--gece); }
.sahne { position: absolute; inset: 0; }
#saha { width: 100%; height: 100%; display: block; }
.vurus-ic { position: relative; z-index: 2; padding-top: clamp(28px, 5.5vh, 60px); pointer-events: none; }
.vurus h1 { font-size: clamp(48px, 9vw, 148px); }
.vurus h1 .satir { display: block; }
.vurus h1 em { font-style: normal; color: var(--altin); }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; max-width: 27em; margin-top: clamp(18px, 2.6vh, 30px); }
.durum { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(18px, 2.6vh, 30px); border: 1px solid var(--cizgi-guclu); border-radius: 999px; padding: 10px 22px 10px 12px; background: var(--cim-acik); }
.durum svg { width: 44px; height: 44px; flex: none; }
.durum b { display: block; font: 800 26px/1 var(--baslik); letter-spacing: .01em; }
.durum small { display: block; font-size: 13.5px; line-height: 1.3; color: var(--soluk); margin-top: 3px; }
.js .durum svg { animation: don 2.6s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

.top-alani { position: absolute; left: 50%; top: 80%; width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 50%; touch-action: none; cursor: grab; z-index: 3; display: none; }
.js .top-alani { display: block; }
.top-alani:active { cursor: grabbing; }
.top-alani::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 2px solid var(--tebesir); opacity: 0; animation: halka 2.2s ease-out infinite; }
@keyframes halka { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.ipucu { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: 13.5px; font-weight: 600; line-height: 1; padding: .6em .95em; border-radius: 999px; background: rgba(7, 19, 14, .86); border: 1px solid var(--cizgi); color: var(--tebesir); pointer-events: none; transition: opacity .4s; }
.oynadi .ipucu, .oynadi .top-alani::before { opacity: 0; animation: none; }
.sonuc { position: absolute; left: 50%; top: 40%; z-index: 2; margin: 0; transform: translate(-50%, -50%); font: 800 clamp(72px, 13vw, 220px)/.9 var(--baslik); text-transform: uppercase; white-space: nowrap; color: var(--tebesir); opacity: 0; pointer-events: none; }
.sonuc.gol { color: var(--altin); }
.sonuc.vur { animation: vur 1.5s var(--yay) both; }
@keyframes vur {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) skewX(-16deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1) skewX(-6deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) skewX(-6deg); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1.08) skewX(-6deg); }
}
.js .vurus h1 .satir { animation: gel .9s var(--yay) both; }
.js .vurus h1 em.satir { animation-delay: .12s; }
.js .vurus .lead, .js .vurus .durum { animation: belir .7s ease-out .45s both; }
@keyframes gel { from { opacity: 0; transform: translateY(42%) skewY(5deg); } }
@keyframes belir { from { opacity: 0; } }

/* LED pano: kaydırma hızıyla hızlanan yazı şeridi */
.pano { position: relative; overflow: hidden; background: var(--gece); border-block: 2px solid var(--cizgi-guclu); padding-block: clamp(10px, 1.4vw, 18px); }
.pano-serit { display: flex; align-items: center; width: max-content; animation: kay 38s linear infinite; font: 800 clamp(36px, 5.6vw, 80px)/1 var(--baslik); text-transform: uppercase; letter-spacing: .01em; color: var(--altin); white-space: nowrap; }
.pano-serit span { display: block; padding-inline: .45em; transform: skewX(var(--egim, 0deg)); }
.pano-serit i { flex: none; width: .36em; height: .36em; border-radius: 50%; background: var(--toprak); }
.pano::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, transparent 0 1.25px, var(--gece) 1.7px); background-size: 4px 4px; opacity: .8; }
@keyframes kay { to { transform: translateX(-50%); } }

/* Bölümler */
.bolum { padding-block: clamp(64px, 9vw, 136px); }
.bolum + .bolum { border-top: 1px solid var(--cizgi); }
.bolum h2 { font-size: clamp(44px, 6.6vw, 104px); max-width: 11em; }
.bolum-giris { max-width: 34em; margin-top: 22px; color: var(--soluk); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
/* Başlık kelimeleri çizginin altından yükselir (site.js kelimelere böler) */
.kw { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .02em .1em; margin: -.14em -.02em -.1em; }
.kw > span { display: inline-block; transform: translateY(118%); }
.gir .kw > span { transform: none; transition: transform .8s var(--yay) calc(var(--i) * 70ms); }

/* Şehir */
.harita { position: relative; overflow: hidden; margin-top: clamp(36px, 5vw, 64px); border-block: 2px solid var(--cizgi-guclu); background: #5DB04C; }
.harita-ic { position: relative; transform-origin: 50% 45%; }
.js .harita-ic { animation: gez 44s ease-in-out infinite alternate; }
@keyframes gez { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.6%, 1.2%); } }
.harita picture, .harita img { width: 100%; }
.harita img { aspect-ratio: 36 / 17; object-fit: cover; }
.etiketler li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  background: rgba(14, 35, 26, .92); color: var(--tebesir);
  font-size: clamp(11.5px, 1.05vw, 15px); font-weight: 700; line-height: 1; white-space: nowrap;
  padding: .55em .9em; border-radius: 999px; border: 1px solid rgba(242, 238, 228, .22); cursor: default;
  transition: background-color .2s, color .2s;
}
.etiketler li.sicak { background: var(--toprak); border-color: transparent; color: #fff; }
.etiketler li.sec { background: var(--altin); color: var(--cim); border-color: transparent; }
.js .harita .etiketler li { opacity: 0; transform: translate(-50%, -50%) translateY(-22px) scale(.7); }
.js .harita.gir .etiketler li { opacity: 1; transform: translate(-50%, -50%); transition: opacity .3s calc(var(--i) * 120ms + 250ms), transform .55s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * 120ms + 250ms), background-color .2s, color .2s; }
.sehir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(36px, 5vw, 64px); }
.yerler { border-top: 2px solid var(--cizgi-guclu); }
.yerler li { display: grid; grid-template-columns: minmax(130px, 19rem) 1fr; gap: 6px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--cizgi); transition: padding-left .25s var(--yay); }
.yerler h3 { font-size: clamp(26px, 2.6vw, 36px); transition: color .2s; }
.yerler p { color: var(--soluk); font-size: clamp(17px, 1.45vw, 20px); }
.yerler li.sec { padding-left: 14px; }
.yerler li.sec h3 { color: var(--altin); }
.ekran { position: relative; border-radius: 30px; border: 1px solid var(--cizgi-guclu); overflow: hidden; background: #0A1A13; }
.ekran img { width: 100%; aspect-ratio: 540 / 1169; }

/* Kritik anlar: masaüstünde sabitlenip yana kayar, telefonda parmakla kaydırılır */
.bolum-anlar { padding-block: 0; }
/* Betik yoksa ya da hareket azaltılmışsa şerit sabitlenmez; yana kaydırılır */
.serit { display: flex; align-items: center; overflow-x: auto; padding-block: clamp(64px, 9vw, 136px); }
.js .serit-sabit { height: 260vh; }
.js .serit { position: sticky; top: var(--ust); height: calc(100vh - var(--ust)); overflow: hidden; padding-block: 0; }
.serit-iz { display: flex; align-items: center; will-change: transform; }
.serit-bas { flex: none; width: min(44vw, 620px); padding-left: var(--kenar); }
.serit-bas h2 { font-size: clamp(44px, 6vw, 96px); }
.anlar { display: flex; flex: none; gap: clamp(48px, 6vw, 110px); padding-inline: clamp(48px, 6vw, 110px) var(--kenar); }
.anlar li { flex: none; }
.anlar figure { display: flex; align-items: flex-end; gap: clamp(20px, 2.4vw, 36px); }
.anlar .ekran { flex: none; height: min(68vh, 640px); aspect-ratio: 540 / 1169; }
.anlar .ekran img { height: 100%; width: auto; }
.anlar figcaption { width: clamp(200px, 19vw, 280px); padding-bottom: 6px; }
.anlar h3 { font-size: clamp(40px, 4.4vw, 68px); margin-top: 12px; }
.anlar p { color: var(--soluk); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; margin-top: 10px; }
.jest-ad { display: inline-block; font-size: 14px; font-weight: 700; line-height: 1; padding: .55em .9em; border-radius: 999px; background: var(--altin); color: var(--cim); }
/* Parmak hareketi gösterimi */
.jest { position: absolute; inset: 0; pointer-events: none; display: none; }
.js .jest { display: block; }
.jest i { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid var(--tebesir); background: rgba(242, 238, 228, .3); opacity: 0; }
.jest-0 i { left: 70%; top: 30%; animation: j-dokun 2.4s ease-out infinite; }
.jest-1 i { animation: j-surukle 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }
.jest-2 i { left: 51%; top: 86%; animation: j-zaman 2.2s ease-in infinite; }
.jest-3 i { top: 70%; animation: j-kaydir 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes j-dokun { 0%, 15% { transform: scale(1.5); opacity: 0; } 32% { transform: scale(1); opacity: 1; } 46% { transform: scale(.72); opacity: 1; } 78%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes j-surukle { 0% { left: 48%; top: 84%; opacity: 0; } 14% { left: 48%; top: 84%; opacity: 1; } 72% { left: 60%; top: 40%; opacity: 1; } 100% { left: 60%; top: 40%; opacity: 0; } }
@keyframes j-zaman { 0% { transform: scale(2.6); opacity: 0; } 20% { opacity: .9; } 70% { transform: scale(1); opacity: 1; } 78% { transform: scale(.8); opacity: 1; background: var(--altin); } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes j-kaydir { 0% { left: 36%; opacity: 0; } 16% { left: 36%; opacity: 1; } 70% { left: 74%; opacity: 1; } 100% { left: 74%; opacity: 0; } }

/* Saha dışı */
.kariyer { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(36px, 5vw, 64px); }

/* Gizlilik: ceza sahası çizimi */
.saha { position: relative; margin-top: clamp(36px, 5vw, 64px); border: 2px solid var(--cizgi-guclu); border-bottom: 0; padding: clamp(24px, 4vw, 56px); padding-bottom: clamp(120px, 15vw, 210px); }
.saha-yay { position: absolute; left: 50%; bottom: 0; width: clamp(150px, 22vw, 300px); transform: translateX(-50%); overflow: visible; }
.saha-yay path { fill: none; stroke: var(--cizgi-guclu); stroke-width: 2; vector-effect: non-scaling-stroke; }
.js .saha-yay path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .saha.gir .saha-yay path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease-in-out .3s; }
.uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 64px); position: relative; z-index: 1; }
.uclu h3 { font-size: clamp(40px, 5vw, 76px); transform-origin: 0 100%; }
.uclu p { color: var(--soluk); margin-top: 10px; max-width: 22em; font-size: clamp(17px, 1.45vw, 20px); }
.js .saha .uclu h3 { opacity: 0; transform: scale(1.35) rotate(-3deg); }
.js .saha.gir .uclu h3 { opacity: 1; transform: none; transition: opacity .2s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.js .saha.gir .uclu li:nth-child(2) h3 { transition-delay: .18s; }
.js .saha.gir .uclu li:nth-child(3) h3 { transition-delay: .36s; }
.saha-not { margin-top: 28px; position: relative; z-index: 1; }

/* Rehber özeti (ana sayfa) */
.rehber-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin-top: clamp(28px, 4vw, 48px); border-top: 2px solid var(--cizgi-guclu); }
.rehber-ozet a { display: block; height: 100%; padding: 22px 0 24px; border-bottom: 1px solid var(--cizgi); text-decoration: none; }
.rehber-ozet h3 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1; transition: color .2s; }
.rehber-ozet p { color: var(--soluk); margin-top: 10px; max-width: 34em; }
.rehber-ozet a:hover h3 { color: var(--altin); }
.hepsi { margin-top: 26px; font-weight: 600; }

/* Sorular */
.sorular { margin-top: clamp(28px, 4vw, 48px); border-top: 2px solid var(--cizgi-guclu); }
.sorular div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px 40px; padding: 20px 0; border-bottom: 1px solid var(--cizgi); }
.sorular dt { font: 800 clamp(24px, 2.2vw, 30px)/1.05 var(--baslik); }
.sorular dd { color: var(--soluk); font-size: clamp(17px, 1.45vw, 20px); max-width: 34em; }

/* Düz metin sayfaları (gizlilik, destek, 404, rehber) */
.yazi { padding-block: clamp(48px, 7vw, 104px) clamp(64px, 9vw, 120px); }
.yazi h1 { font-size: clamp(52px, 8vw, 120px); max-width: 10em; }
.yazi .tarih { color: var(--soluk); margin-top: 18px; font-size: 15px; }
.yazi .govde { max-width: 42em; margin-top: clamp(28px, 4vw, 48px); }
.yazi h2 { font-size: clamp(30px, 3.2vw, 42px); margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--cizgi); }
.yazi .govde p, .yazi .govde li { color: var(--soluk); margin-top: 12px; }
.yazi .govde > p:first-child { color: var(--tebesir); font-size: 19px; margin-top: 0; }
.yazi .govde ul { list-style: disc; padding-left: 1.2em; }
.yazi .govde strong { color: var(--tebesir); }
.posta { display: inline-block; margin-top: 18px; font: 800 clamp(30px, 4.4vw, 56px)/1 var(--baslik); color: var(--altin); overflow-wrap: anywhere; }

/* Rehber yazısı */
.iz { font-size: 15px; color: var(--soluk); margin-bottom: 22px; }
.iz a { text-decoration: none; }
.iz a:hover { text-decoration: underline; }
.rehber h1 { font-size: clamp(42px, 5.8vw, 88px); max-width: 15em; line-height: .96; }
.rehber .govde { font-size: 18px; line-height: 1.65; }
.rehber .govde h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1; }
.rehber .govde h3 { font-size: 26px; line-height: 1.05; margin-top: 28px; }
.kisaca { border-left: 4px solid var(--altin); background: var(--cim-acik); padding: 20px 24px 22px; border-radius: 0 12px 12px 0; }
.yazi .kisaca h2 { font-size: 24px; margin: 0; padding: 0; border: 0; color: var(--altin); }
.yazi .govde .kisaca p { color: var(--tebesir); margin-top: 8px; }
.yazi-gorsel { margin: 36px 0 8px; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: end; }
.yazi-gorsel .ekran { border-radius: 24px; }
.yazi-gorsel figcaption { color: var(--soluk); font-size: 15px; padding-bottom: 6px; }
.yazi .govde .uyari { margin-top: 44px; padding: 16px 20px; border: 1px solid var(--cizgi); border-radius: 12px; font-size: 15.5px; }
.diger { max-width: 42em; margin-top: 56px; padding-top: 26px; border-top: 2px solid var(--cizgi-guclu); }
.yazi .diger h2 { font-size: 30px; margin: 0; padding: 0; border: 0; }
.diger li { margin-top: 12px; font-size: 18px; }
.diger p { margin-top: 20px; font-weight: 600; }

/* Rehber dizini */
.dizin-giris { max-width: 34em; margin-top: 22px; color: var(--soluk); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
.rehber-liste { margin-top: clamp(32px, 5vw, 64px); border-top: 2px solid var(--cizgi-guclu); }
.rehber-liste a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 10px 40px; align-items: baseline; padding: 26px 0 28px; border-bottom: 1px solid var(--cizgi); text-decoration: none; }
.yazi .rehber-liste h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: .98; margin: 0; padding: 0; border: 0; transition: color .2s; }
.rehber-liste p { color: var(--soluk); }
.rehber-liste time { color: var(--soluk); font-size: 15px; white-space: nowrap; }
.rehber-liste a:hover h2 { color: var(--altin); }

/* Alt bilgi */
.alt { border-top: 2px solid var(--cizgi-guclu); padding-block: 36px 48px; font-size: 15px; color: var(--soluk); }
.alt .sar { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: baseline; }
.alt .marka { font-size: 24px; color: var(--tebesir); margin-right: 0; }
.alt nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-right: auto; }
.alt nav a { padding: 6px 0; }

@media (max-width: 860px) {
  .vurus { min-height: 0; }
  .vurus-ic { order: 1; padding-block: 28px 26px; background: var(--cim); }
  .sahne { order: 2; position: relative; inset: auto; height: 116vw; max-height: 600px; border-top: 2px solid var(--cizgi-guclu); }
  .harita img { aspect-ratio: 4 / 5; }
  .etiketler li { left: var(--xm); top: var(--ym); font-size: 12.5px; }
  .sehir, .kariyer { grid-template-columns: 1fr; }
  .sehir .ekran, .kariyer .ekran { max-width: 260px; }
  .kariyer .ekran { order: 2; }
  .ekran { border-radius: 22px; }
  .bolum-anlar { padding-block: clamp(64px, 9vw, 136px); }
  .serit-sabit { height: auto !important; }
  .serit, .js .serit { position: static; height: auto; display: block; overflow: visible; padding-block: 0; }
  .serit-iz { display: block; transform: none !important; }
  .serit-bas { width: auto; padding-inline: var(--kenar); }
  .anlar { margin-top: 36px; gap: 16px; padding-inline: var(--kenar); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--kenar); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .anlar::-webkit-scrollbar { display: none; }
  .anlar li { scroll-snap-align: start; width: 64vw; max-width: 300px; }
  .anlar figure { display: block; }
  .anlar .ekran { height: auto; width: 100%; }
  .anlar .ekran img { width: 100%; height: auto; }
  .anlar figcaption { width: auto; margin-top: 16px; padding: 0; }
  .anlar h3 { font-size: 34px; }
  .uclu { grid-template-columns: 1fr; }
  .rehber-ozet { grid-template-columns: 1fr; }
  .sorular div { grid-template-columns: 1fr; }
  .rehber-liste a { grid-template-columns: 1fr; gap: 8px; }
  .ust .sar { gap: 10px; }
  .marka { font-size: 25px; }
  .menu { gap: 0 14px; font-size: 14px; }
  .dil { padding: 6px 12px !important; }
  .menu .ikincil { display: none; }
}
@media (max-width: 520px) {
  .yerler li { grid-template-columns: 1fr; gap: 2px; }
  .yazi-gorsel { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 861px) {
  .js .serit-sabit { height: auto !important; }
  .js .serit { position: static; height: auto; overflow-x: auto; padding-block: clamp(64px, 9vw, 136px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .jest, .tac { display: none !important; }
  .pano-serit { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 6px; }
  .pano-serit > :nth-child(n+13) { display: none; }
  .kw > span, .js .harita .etiketler li, .js .saha .uclu h3 { transform: none; opacity: 1; }
  .js .harita .etiketler li { transform: translate(-50%, -50%); }
  .js .saha-yay path { stroke-dashoffset: 0; }
}