/* ==============================================================
 DOSYA: style.css - SİTENİN GÖRÜNÜMÜ (renkler, boyutlar, boşluklar, animasyonlar)
 Aşağıdaki HER KURALIN üstünde "bu ne işe yarar" notu vardır. Notlar sitede görünmez.

 KURAL NASIL OKUNUR?
   .ornek {            <- ".ornek" = hangi öğeye uygulanacağı (selector)
     font-size: 20px;  <- "özellik: değer;" = ne yapılacağı
   }
   Nokta (.) ile başlayan = class adı (HTML'de class="ornek"). # ile başlayan = id. Noktasız (nav, footer) = o etiketin kendisi.
   ":hover" = fare üstüne gelince.  ":after" / ":before" = öğeye eklenen süs katmanı.
   "@media(max-width:800px){...}" = SADECE ekran 800px'ten darsa (telefon) geçerli kurallar.

 RENKLERİ DEĞİŞTİRMEK İÇİN en üstteki ":root" kuralına bak:
   --teal turkuaz (ana renk) | --navy koyu lacivert | --paper krem zemin | --ink yazı rengi | --hot turuncu vurgu | --mut soluk gri yazı
   Burada rengi değiştirirsen TÜM sitede o renk değişir. Renk formatı: #02a6b2

 KISA SÖZLÜK (en çok geçen özellikler):
   color = yazı rengi              background = zemin rengi / resmi
   font-size = yazı boyutu         font-family = yazı tipi          font-weight = kalınlık (400 normal, 700 kalın)
   letter-spacing = harf aralığı   line-height = satır aralığı       text-transform:uppercase = BÜYÜK HARF
   margin = dış boşluk             padding = iç boşluk (kutunun içinde)    gap = kutular arası boşluk
   width / height = genişlik / yükseklik     max-width = en fazla genişlik     min-height = en az yükseklik
   border = çerçeve çizgisi        border-radius = köşe yuvarlama (999px = tam hap şekli, 50% = daire)
   box-shadow = gölge              opacity = saydamlık (0 görünmez, 1 tam görünür)
   display:flex / grid = öğeleri yan yana / ızgara halinde dizme    align-items, justify-content = hizalama
   position:fixed = ekrana sabit, absolute = bir kutunun içinde istenen yere, relative = yerinde ama referans
   z-index = katman sırası (büyük olan üstte)    overflow:hidden = taşanı gizle
   transform = kaydırma/döndürme/büyütme          transition = yumuşak geçiş süresi        animation = sürekli hareket
   backdrop-filter:blur = arkası bulanık cam efekti
   px = piksel | vw = ekran genişliğinin yüzdesi (10vw = %10) | % = üstteki kutuya oranı | em = yazı boyutuna oranı
   clamp(en_küçük, ideal, en_büyük) = ekran büyüklüğüne göre değişen ama sınırı olan boyut
   rgba(r,g,b,şeffaflık) = saydam renk (son sayı 0-1)    var(--teal) = yukarıdaki renk değişkenini kullan
   !important = bu kural diğerlerini ezer
 DİKKAT: { } ; : işaretlerini ve nokta/virgülleri silme. Emin değilsen sadece sayıyı değiştir (54px -> 60px).
 ============================================================== */

/* :root = SİTENİN ANA RENKLERİ. --teal turkuaz, --navy lacivert, --paper krem zemin, --ink yazı rengi, --hot turuncu vurgu, --mut soluk gri. Rengi burada değiştir, tüm site değişir. Alttaki 3 satır iPhone çentik boşluğu içindir. */
:root {
  --teal: #02a6b2;
  --navy: #0f3140;
  --paper: #0a2228;
  --ink: #eaf3f2;
  --hot: #02a6b2;
  --mut: #8fa9ad;
  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}

/* Tüm elemanlarda genişlik hesabına kenarlık ve iç boşluk da dahil edilir (kutular taşmasın diye). Dokunma. */
* {
  box-sizing: inherit;
}

/* Sayfa içi linklere (#program gibi) tıklayınca sayfa yumuşakça kayar. */
html {
  scroll-behavior: smooth;
}

/* SAYFANIN GENEL AYARI: kenar boşluğu yok, zemin krem, yazı koyu, ana yazı tipi Barlow 17px, satır aralığı 1.6, yana taşan şeyleri gizle. Yazıyı büyütmek için 17px değişir. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 "Barlow",system-ui,sans-serif;
  overflow-x: hidden;
}

/* Tüm sayfanın üstüne çok hafif (%7) grenli kağıt dokusu serer. Tıklamayı engellemez. Kaldırmak için opacity .07 yerine 0 yaz. */
body:after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* .b = BÜYÜK BAŞLIK yazı tipi (Bebas Neue). filter:url(#rough) harflere hafif elle çizilmiş pürüzlü görünüm verir. Class'ı b olan her yazıya uygulanır. */
.b {
  font-family: "Bebas Neue","Arial Narrow",Impact,sans-serif;
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  filter: url(#rough);
}

/* .m = küçük teknik yazı (JetBrains Mono): 13px, BÜYÜK HARF, açık harf aralığı. Etiketler, saatler, menü yazıları. */
.m {
  font-family: "JetBrains Mono",ui-monospace,monospace;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* .hero (ESKİ İLK HAL): turkuaz zemin, tam ekran yükseklik, iki sütun. Gerçek kapak ayarı aşağıdaki ikinci ".hero" kuralıdır ve bunu EZER. */
.hero {
  background: var(--teal);
  color: #fff;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 2vw;
  padding: 110px 4vw 90px;
  position: relative;
  overflow: hidden;
}

/* Kapaktaki arka plan harita çizgileri (topo): eski hal, aşağıda gizlenmiş. */
.hero svg.topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .35;
}

/* Kapağın içindeki her şey arka plan katmanlarının üstünde görünsün diye konumlanır. */
.hero>* {
  position: relative;
}

/* Eski kapak başlık boyutu (ekrana göre 70-200px). */
.hero h1 {
  font-size: clamp(70px,12vw,200px);
  margin-top: 26px;
}

/* Başlıkta <em> ile vurgulanan kelime lacivert olur ve eğik yazılmaz. */
.hero h1 em {
  font-style: normal;
  color: var(--navy);
}

/* Eski kapak paragrafının genişliği (480px), boyutu (20px) ve boşlukları. */
.hero p {
  max-width: 480px;
  font-size: 20px;
  margin: 26px 0;
}

/* ANİMASYON TANIMI "fl": öğeyi 14px yukarı kaldırıp hafif döndürür (süzülme etkisi). */
@keyframes fl {
  50% {
    transform: translateY(-14px) rotate(-1deg);
  }
}

/* Telefonda (800px'ten dar) eski kapak tek sütuna döner. */
@media(max-width:800px) {
  /* Kapak tek sütun. */
  .hero {
    grid-template-columns: 1fr;
  }
}

/* nav = MENÜ ÇUBUĞU: ekranın üstüne SABİT (kaydırınca kalır), ortalı, en fazla 1260px, yarı saydam lacivert bulanık cam zemin, hap şeklinde yuvarlak köşe, gölge, açılışta yukarıdan kayarak belirir. */
nav {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top,0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(1260px,calc(100% - 24px));
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 15px 6px 18px;
  color: #fff;
  background: rgba(3,31,38,.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(3,31,38,.28),inset 0 1px 0 rgba(255,255,255,.12);
  animation: navin .9s cubic-bezier(.2,.8,.2,1) both;
}

/* Menünün açılış animasyonu (navin): yukarıdan hafifçe kayarak belirir. */
@keyframes navin {
  from {
    opacity: 0;
    transform: translate(-50%,-26px) scale(.96);
  }
}

/* Logo kutusu: logoyu menünün solunda dikey ortalar. */
nav .brand {
  display: flex;
  align-items: center;
  margin: 0;
  position: relative;
}

/* Logo resmi: yükseklik 54px (büyütmek/küçültmek için height), sayfa açılırken pop animasyonuyla büyür, üstüne gelince yumuşak geçiş yapar. */
nav .brand img {
  height: 54px;
  width: auto;
  display: block;
  animation: pop 1.1s .25s cubic-bezier(.2,1.4,.3,1) both;
  transition: transform .4s cubic-bezier(.2,1.4,.3,1),filter .4s;
  filter: drop-shadow(0 0 0 rgba(255,90,54,0));
}

/* Logonun üstüne gelince %9 büyür, hafif döner ve turuncu parlama gölgesi çıkar. */
nav .brand:hover img {
  transform: scale(1.09) rotate(-3deg);
  filter: drop-shadow(0 0 10px rgba(2, 166, 178, 1));
}

/* ANİMASYON "pop": logo küçükten büyüyerek ve dönerek belirir. */
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(.4) rotate(-12deg);
  }
}

/* ANİMASYON "spin": 360 derece dönme. */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ANİMASYON "pulse": nabız gibi büyüyüp sönme. */
@keyframes pulse {
  50% {
    transform: scale(1.18);
    opacity: .55;
  }
}

/* Özel değişken --a (açı) tanımı: butonlardaki dönen renkli çerçevenin animasyonu için gerekli. */
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* .btn = GENEL BUTON: hap şeklinde, lacivert zemin, beyaz yazı, iç boşluk 15px 26px, gölgeli. İkon ve yazı yan yana. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  margin: 0 10px 10px 0;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background: var(--navy);
  border: 2px solid transparent;
  transition: transform .35s cubic-bezier(.2,1.2,.3,1),box-shadow .35s,background .3s;
  box-shadow: 0 8px 22px rgba(3,31,38,.3);
}

/* Butonun etrafındaki DÖNEN renkli çerçeve (turuncu-sarı-turkuaz-beyaz). 4 saniyede bir tur atar (4s). */
.btn:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--a),var(--hot),#ffd24a,var(--teal),#fff,var(--hot));
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ro 4s linear infinite;
  z-index: -1;
}

/* Çerçevenin dönme animasyonu "ro" (açı 0 dan 360 a). */
@keyframes ro {
  to {
    --a: 360deg;
  }
}

/* Butonun üstünden geçen parlama (ışık süpürmesi) çizgisi. Başlangıçta butonun solunda gizli. */
.btn:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform: skewX(-20deg);
  transition: left .7s;
}

/* Üzerine gelince parlama çizgisi butonun sağına süpürür. */
.btn:hover:after {
  left: 130%;
}

/* Butondaki ikon boyutu 18px, hareketi yumuşak. */
.btn svg {
  width: 18px;
  height: 18px;
  transition: transform .35s cubic-bezier(.2,1.4,.3,1);
}

/* Butonun üzerine gelince: 4px yukarı kalkar, %3 büyür, gölgesi artar. */
.btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 30px rgba(3,31,38,.4),0 0 0 6px rgba(255,255,255,.12);
}

/* Üzerine gelince buton içindeki ikon sağ-alta kayar. */
.btn:hover svg {
  transform: translate(3px,3px);
}

/* .btn.o (outline) butonda ikon sağ-üste kayar. */
.btn.o:hover svg {
  transform: translate(3px,-3px);
}

/* Butona basılı tutulunca hafif küçülür (basma hissi). */
.btn:active {
  transform: translateY(0) scale(.97);
}

/* .btn.o = ŞEFFAF CAM buton: yarı saydam beyaz zemin + bulanıklık. */
.btn.o {
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Şeffaf butonun dönen çerçevesi sadece beyaz tonlarında. */
.btn.o:before {
  background: conic-gradient(from var(--a),rgba(255,255,255,.9),rgba(255,255,255,.15),rgba(255,255,255,.9));
}

/* "Animasyonları azalt" ayarı açık kullanıcılarda menü, logo, kapak ve buton animasyonlarını kapatır (erişilebilirlik). */
@media(prefers-reduced-motion:reduce) {
  /* Bu öğelerin animasyonlarını kapat. */
  nav,nav .brand img,.stage,.shine,.btn:before {
    animation: none!important;
  }
}

/* .mq = KAYAN ŞERİT (parkur adları bandı): lacivert zemin, turkuaz yazı, alt-üst turuncu çizgi, tek satır. */
.mq {
  background: var(--navy);
  color: var(--teal);
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  border-block: 3px solid var(--hot);
}

/* Şeridin içindeki yazı 30 saniyede bir sonsuz döngüyle sola kayar. Hız için 30s değişir (büyük sayı = yavaş). Yazı boyutu 34px. */
.mq div {
  display: inline-block;
  animation: mq 30s linear infinite;
  font-size: 34px;
}

/* Şeritteki her parkur adının sağ-sol boşluğu 26px. */
.mq span {
  margin: 0 26px;
}

/* Parkur adları arasındaki dağ simgesi turuncu. */
.mq i {
  color: var(--hot);
  font-style: normal;
  display: inline-block;
  vertical-align: -.08em;
}

/* Dağ simgesinin boyutu. */
.mq i svg {
  width: 1.1em;
  height: .85em;
  display: block;
}

/* ANİMASYON "mq": şeridi yarısı kadar sola kaydırır (kesintisiz döngü için). */
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}

/* section = TÜM BÖLÜMLER: üst-alt boşluk 110px, sağ-sol %4. Bölümler arası boşluğu azaltmak için 110px küçült. */
section {
  padding: 110px 4vw;
}

/* .lab = bölüm etiketi (ör. 03 / Yarış hafta sonu): turuncu renk, altında 10px boşluk. */
.lab {
  color: var(--hot);
  margin-bottom: 10px;
}

/* h2.b = BÖLÜM BAŞLIKLARI (Program, Rota...): ekrana göre 56-150px, altında 50px boşluk. */
h2.b {
  font-size: clamp(56px,10vw,150px);
  margin-bottom: 50px;
}

/* .rv = KAYDIRINCA BELİREN: başlangıçta görünmez ve 50px aşağıda. Yavaşça yukarı çıkıp belirir (0.9sn). */
.rv {
  opacity: 0;
  transform: translateY(50px);
  transition: .9s cubic-bezier(.2,.7,.2,1);
}

/* Ekrana girince (.in eklenince) tam görünür ve yerine oturur. */
.rv.in {
  opacity: 1;
  transform: none;
}

/* .row = AÇILIR SATIR (Parkurlar ve Hakkımızda): üstünde kalın çizgi, tıklanabilir (el imleci). */
.row {
  border-top: 3px solid var(--ink);
  cursor: pointer;
}

/* Son satırın altına da kalın çizgi. */
.row:last-child {
  border-bottom: 3px solid var(--ink);
}

/* .hd = satırın başlık kısmı: 4 sütun (numara | ad | küçük bilgi | + işareti). */
.hd {
  display: grid;
  grid-template-columns: minmax(150px,.7fr) 2fr 1fr 40px;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
}

/* Satırdaki BÜYÜK NUMARA (01, 5K...): içi boş, sadece çizgili (outline) yazı. */
.hd .n {
  font-size: clamp(70px,11vw,150px);
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
  transition: .3s;
}

/* Üzerine gelince veya satır açıkken numara turkuaza dolar ve 12px sağa kayar. */
.row:hover .n,.row.on .n {
  color: var(--teal);
  -webkit-text-stroke-color: var(--teal);
  transform: translateX(12px);
}

/* Satır başlığı (parkur adı) boyutu 28-52px. */
.hd h3 {
  font-size: clamp(28px,4vw,52px);
}

/* Sağdaki + işareti: boyut 40px, sağa yaslı. */
.hd .pl {
  font-size: 40px;
  transition: .3s;
  text-align: right;
}

/* Satır açılınca + işareti 45 derece döner (x olur) ve turuncu olur. */
.row.on .pl {
  transform: rotate(45deg);
  color: var(--hot);
}

/* .bd = açılan alan: kapalıyken yüksekliği 0, açılırken yumuşak (0.6sn). */
.bd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s;
}

/* Satır açık (.on) olunca açılan alan tam yüksekliğe gelir. */
.row.on .bd {
  grid-template-rows: 1fr;
}

/* Açılan alanın taşan içeriği gizlenir (kapanırken görünmesin). */
.bd>div {
  overflow: hidden;
}

/* .in2 = açılan alanın içi: 2 sütun (sol bilgi, sağ grafik/yazı), 40px boşluk. */
.in2 {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  padding: 10px 0 40px;
}

/* .kv = bilgi tablosu (Mesafe, Start, Tırmanış...): 2 sütunlu, kalın çerçeveli. */
.kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 2px solid var(--ink);
}

/* Tablonun her hücresi: 14px iç boşluk, ince çizgi. */
.kv div {
  padding: 14px;
  border: 1px solid var(--ink);
}

/* Hücre içindeki küçük etiket (Mesafe...) soluk renkli. */
.kv small {
  display: block;
  color: var(--mut);
}

/* Hücre içindeki büyük değer (13,89 km...) Bebas fontunda 38px. */
.kv b {
  font: 400 38px "Bebas Neue",Impact,sans-serif;
}

/* TELEFONDA (800px altı): satır başlığı 3 sütuna iner, sağdaki küçük bilgi gizlenir, açılan alan tek sütun olur. */
@media(max-width:800px) {
  /* Satır başlığı 3 sütuna iner (numara 90px, ad, + işareti). */
  .hd {
    grid-template-columns: 90px 1fr 30px;
  }
  /* Sağdaki küçük bilgi (.mt) gizlenir. */
  .hd .mt {
    display: none;
  }
  /* Açılan alan tek sütun olur. */
  .in2 {
    grid-template-columns: 1fr;
  }
}

/* .dk = KOYU BÖLÜM (Rakamlar alanı): lacivert zemin, açık yazı. */
.dk {
  background: var(--navy);
  color: #e8f4f4;
}

/* Koyu bölümde numaralar turkuaz. */
.dk .n {
  color: var(--teal);
}

/* .big = büyük rakamlar kutusu: sığdığı kadar yan yana (en az 220px), 30px boşluk. */
.big {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 30px;
  margin-bottom: 50px;
}

/* Her büyük rakamın solunda turuncu çizgi. */
.big div {
  border-left: 4px solid var(--hot);
  padding-left: 18px;
}

/* Büyük rakam yazısı 70-130px, turkuaz. */
.big .b {
  font-size: clamp(70px,9vw,130px);
  color: var(--teal);
}

/* Grafik (irtifa çizgisi) genişliği tam, yüksekliği otomatik. */
svg.pf {
  width: 100%;
  height: auto;
  display: block;
}

/* Grafik çizgisi başlangıçta gizli (çizilme efekti için hazırlık). */
.pf path.l {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}

/* Bölüm ekrana girince grafik çizgisi 3 saniyede soldan sağa çizilir. */
.in .pf path.l {
  animation: dr 3s forwards;
}

/* ANİMASYON "dr": çizginin çizilmesi. */
@keyframes dr {
  to {
    stroke-dashoffset: 0;
  }
}

/* .tr = Zemin dağılımı satırı: 3 sütun (parkur adı | çubuk | yüzde yazısı). */
.tr {
  display: grid;
  grid-template-columns: 70px 1fr 170px;
  gap: 16px;
  align-items: center;
  margin: 12px 0;
}

/* Renkli çubuğun kutusu: 26px yüksekliğinde. */
.tr .s {
  display: flex;
  height: 26px;
}

/* Çubuk parçaları başta 0 genişlikte. Ekrana girince 1.4sn'de dolar. */
.tr .s i {
  display: block;
  width: 0;
  transition: width 1.4s;
}

/* .sch = PROGRAM: iki sütun (Cumartesi | Pazar), aralarında boşluk. */
.sch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
}

/* Telefonda program sütunları alt alta. */
@media(max-width:800px) {
  /* Program sütunları alt alta. */
  .sch {
    grid-template-columns: 1fr;
  }
}

/* Program satırı: solda saat (90px), sağda açıklama, üstünde çizgi. */
.sch li {
  list-style: none;
  display: grid;
  grid-template-columns: 90px 1fr;
  border-top: 2px solid var(--ink);
  padding: 16px 0;
}

/* Program listesinin varsayılan boşlukları sıfırlanır. */
.sch ul {
  padding: 0;
  margin: 0;
}

/* Program saati: turuncu, kalın, 18px. */
.sch .m {
  color: var(--hot);
  font-weight: 700;
  font-size: 18px;
}

/* .rt = ROTA bölümü: kutular alt alta, en fazla 1000px genişlik. */
.rt {
  display: grid;
  gap: 50px;
  max-width: 1000px;
}

/* Her rota kutusu: solda numara (110px), sağda yazı. */
.rt>div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: start;
}

/* Rota yazı alanının taşmaması için ayar. */
.rt .tx {
  min-width: 0;
}

/* Rota açıklama paragrafının üst-alt boşluğu sıfır. */
.rt .tx p {
  margin: 0;
}

/* Çok dar ekranda (600px altı) rota numarası ve yazı alt alta. */
@media(max-width:600px) {
  /* Rota numarası ve yazı alt alta. */
  .rt>div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Rota numarası (01, 02...): 90px, turkuaz. */
.rt .b {
  font-size: 90px;
  color: var(--teal);
}

/* Rota başlığı (Likya Yolu...): 46px. */
.rt h3 {
  font-size: 46px;
  margin-bottom: 10px;
}

/* .wv = DALGA ŞERİDİ (bölümler arası dalga): tam genişlik, 60px yükseklik, lacivert zemin. Bazı sayfalarda yüksekliği o sayfanın kendi kodu değiştirir. */
.wv {
  display: block;
  width: 100%;
  height: 60px;
  background: var(--navy);
}

/* footer = ALT KISIM: turkuaz zemin, beyaz yazı, ortalı, üstte 100px boşluk. */
footer {
  background: var(--teal);
  color: #fff;
  padding: 100px 4vw 50px;
  text-align: center;
}

/* Alt kısımdaki dev "Zirvede görüşürüz" yazısı: lacivert, 52-170px. */
footer .b {
  font-size: clamp(52px,10.5vw,170px);
  color: var(--navy);
  margin: 26px 0 34px;
}

/* İmza alanı: üstünde ince çizgi, ortalı, en fazla 520px. */
footer .sig {
  margin: 70px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.28);
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255,255,255,.85);
}

/* "Designed & Developed by" küçük yazısı. */
footer .sig .by {
  font: 400 11px/1.4 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}

/* İmza adı (Ayberk Korkmaz): el yazısı fontu, 44px, hafif eğik, gölgeli. */
footer .sig .nm {
  font-family: "Mrs Saint Delafield","Dancing Script","Segoe Script","Brush Script MT",cursive;
  font-size: 44px;
  line-height: 1;
  color: #fff;
  transform: rotate(-2deg);
  text-shadow: 0 2px 10px rgba(3,31,38,.25);
  transition: transform .4s cubic-bezier(.2,1.4,.3,1),color .3s;
}

/* İmzanın üstüne gelince biraz büyür ve lacivert olur. */
footer .sig:hover .nm {
  transform: rotate(-2deg) scale(1.08);
  color: var(--navy);
}

/* © yıl yazısı: küçük ve soluk. */
footer .sig .yr {
  font: 400 11px/1.4 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing: .1em;
  opacity: .7;
}

/* YASAL ALT BANT (footer içinde): sol altta şirket adresi, en altta ortada telif/politika satırı. */
footer .lg {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.28);
  display: flex;
  flex-direction: column;
  gap: 22px;
  font: 400 12px/1.7 "JetBrains Mono",ui-monospace,monospace;
  color: rgba(255,255,255,.88);
}

/* Şirket bilgisi: sola yaslı. */
footer .lg-co {
  font-style: normal;
  text-align: left;
}

footer .lg-co b {
  font-weight: 700;
  color: #fff;
}

/* Telif satırı: ortalı, küçük. */
footer .lg-cp {
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .04em;
  opacity: .85;
}

footer .lg a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer .lg a:hover {
  color: var(--navy);
}

/* details = SSS kutusu: üstünde 2px çizgi, 14px iç boşluk. */
details {
  border-top: 2px solid var(--ink);
  padding: 14px 0;
}

/* summary = SSS sorusu satırı: tıklanabilir, kalın, 20px. */
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 20px;
}

/* "Animasyonları azalt" ayarı açıksa sitedeki TÜM animasyon ve geçişleri kapatır, gizli şeyleri doğrudan gösterir. */
@media(prefers-reduced-motion:reduce) {
  /* Tüm animasyon ve geçişleri kapat. */
  * {
    animation: none!important;
    transition: none!important;
  }
  /* Belirme animasyonu olan her şey doğrudan görünür. */
  .rv {
    opacity: 1;
    transform: none;
  }
  /* Grafik çizgisi çizilmeden tam görünür. */
  .pf path.l {
    stroke-dashoffset: 0;
  }
}

/* Menüden bir bölüme gidince bölüm başlığı menünün altında kalmasın diye üstten 96px pay bırakır. */
section,footer,header {
  scroll-margin-top: 96px;
}

/* Menü yazı boyutu 12px, harf aralığı .03em (ikinci tanım, öncekini ezer). */
nav {
  font-size: 12px;
  letter-spacing: .03em;
}

/* .menu = menü listesi: yan yana dizilir, sağa yaslı, aralarında 2px. */
.menu {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Her menü öğesi, alt menüsünü kendine göre konumlar. */
.menu>li {
  position: relative;
}

/* Menü linkleri ve açılır buton görünümü: beyaz yazı, hap şeklinde, 10x13px iç boşluk, tek satır. */
.menu a,.menu .dd>button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-radius: 999px;
  transition: background .25s,color .25s,transform .3s,box-shadow .3s;
  white-space: nowrap;
  position: relative;
}

/* Üzerine gelince veya aktifken menü öğesinin zemini hafif beyaz olur. */
.menu>li>a:hover,.menu .dd>button:hover,.menu .dd.open>button,.menu a.on,.menu .dd>button.on {
  background: rgba(255,255,255,.14);
}

/* Menü öğesinin altındaki turuncu ince çizgi (başlangıçta genişliği 0). */
.menu>li>a:after,.menu .dd>button:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--hot);
  transform: translateX(-50%);
  transition: width .3s;
}

/* Üzerine gelince/aktifken turuncu çizgi %34 genişliğe açılır. */
.menu>li>a:hover:after,.menu .dd>button:hover:after,.menu a.on:after,.menu .dd>button.on:after {
  width: 34%;
}

/* Menüdeki küçük açılır ok boyutu. */
.cv {
  width: 10px;
  height: 7px;
  transition: transform .3s;
}

/* Alt menü açılınca ok yukarı döner. */
.dd.open>button .cv {
  transform: rotate(180deg);
}

/* .sub = ALT MENÜ (açılır liste): menü öğesinin altında ortalı, koyu yarı saydam bulanık zemin, yuvarlak köşe, gölge. Başlangıçta görünmez (opacity:0). */
.sub {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 230px;
  background: rgba(3,31,38,.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(3,31,38,.42);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%,10px) scale(.97);
  transform-origin: top center;
  transition: opacity .25s,transform .35s cubic-bezier(.2,1.2,.3,1),visibility .25s;
}

/* Fare ulaşırken alt menü kapanmasın diye görünmez köprü (16px). */
.sub:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

/* Alt menü linki: iç boşluk ve yuvarlak köşe. */
.sub a {
  padding: 10px 14px;
  border-radius: 14px;
}

/* Alt menü linklerinde alt çizgi efekti kapalı. */
.sub a:after {
  display: none;
}

/* Alt menü linkinin üstüne gelince: zemin açılır, yazı açık turuncu olur, 3px sağa kayar. */
.sub a:hover {
  background: rgba(255,255,255,.12);
  color: #ffb09e;
  transform: translateX(3px);
}

/* Alt menüdeki parkur kodu (5K, 14K...): turuncu, kalın. */
.sub a b {
  color: var(--hot);
  font-weight: 700;
  min-width: 30px;
}

/* Alt menü açıkken görünür hale gelir. */
.dd.open .sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%,0) scale(1);
}

/* BİLGİSAYARDA (fare varken, ekran 1200px üstü) fareyi üstüne getirince alt menü otomatik açılır. Tıklayınca kapanma ayarı da burada. */
@media(hover:hover) and (min-width:1201px) {
  /* Alt menüyü fare üstüne gelince aç. */
  .dd:hover .sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0) scale(1);
  }
  /* Aynı anda ok yukarı döner. */
  .dd:hover>button .cv {
    transform: rotate(180deg);
  }
  /* Tıklanan menüde alt menüyü hemen kapat (shut). */
  .dd.shut .sub {
    opacity: 0!important;
    visibility: hidden!important;
  }
}

/* .lang = dil seçici (TR/EN) kutusu: yan yana, solunda ince ayraç. */
.lang {
  display: flex;
  gap: 2px;
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.22);
}

/* Dil butonları: hap şeklinde, soluk (.72), üstüne gelince netleşir. */
.lang button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 999px;
  opacity: .72;
  transition: opacity .25s,background .25s;
}

/* Üzerine gelince dil butonu tam görünür. */
.lang button:hover {
  opacity: 1;
  background: rgba(255,255,255,.1);
}

/* Seçili dil butonu (.on): tam görünür, hafif beyaz zemin. */
.lang button.on {
  opacity: 1;
  background: rgba(255,255,255,.17);
}

/* Bayrak ikonu boyutu (21x14px), köşeleri yuvarlak, ince çerçeveli. */
.flag {
  width: 21px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  display: block;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}

/* Bayrağın içindeki resim kutuyu doldurur. */
.flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* "Kayıt Ol" menü butonu: turuncu zemin, gölgeli. */
.menu .cta a {
  background: var(--hot);
  margin-left: 6px;
  padding: 10px 20px;
  box-shadow: 0 6px 18px rgba(15, 49, 64, 1);
}

/* Üzerine gelince açık turuncu olur ve 2px kalkar. */
.menu .cta a:hover {
  background: #0f3140;
  transform: translateY(-2px);
  
}

/* Kayıt Ol butonunda alt çizgi efekti kapalı. */
.menu .cta a:after {
  display: none;
}

/* Bilgisayar görünümünde hamburger (üç çizgi) butonu ve mobil "Kayıt Ol" kısayolu GİZLİ. */
.burger,.cta-m {
  display: none;
}

/* TELEFON/TABLET MENÜ DÜZENİ (ekran 1200px'ten dar): menü hamburger butonuna dönüşür, tıklayınca altta tam genişlik açılan liste olur. */
@media(max-width:1200px) {
  /* Logo küçülür (44px). */
  nav .brand img {
    height: 44px;
  }
  /* Mobil "Kayıt Ol" kısayolu görünür (turuncu hap). */
  .cta-m {
    display: inline-flex;
    margin-left: auto;
    margin-right: 8px;
    background: var(--hot);
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(255, 253, 253, 0.45);
  }
  /* Hamburger butonu görünür (44px yuvarlak). */
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.1);
    cursor: pointer;
    padding: 0;
  }
  /* Hamburger çizgileri (3 adet). */
  .burger i {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .35s cubic-bezier(.2,1.2,.3,1),opacity .2s;
  }
  /* Menü açıkken 1. çizgi aşağı inip döner (X harfinin yarısı). */
  nav.open .burger i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  /* Menü açıkken 2. çizgi kaybolur. */
  nav.open .burger i:nth-child(2) {
    opacity: 0;
  }
  /* Menü açıkken 3. çizgi yukarı çıkıp döner (X harfinin diğer yarısı). */
  nav.open .burger i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* Menü listesi: logonun altında tam genişlikte, koyu zeminli, açılır panel olur. Başlangıçta görünmez. */
  .menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    background: rgba(3,31,38,.95);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 28px;
    box-shadow: 0 22px 50px rgba(3,31,38,.5);
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transform-origin: top;
    transition: opacity .25s,transform .35s cubic-bezier(.2,1.2,.3,1),visibility .25s;
  }
  /* Hamburger tıklanınca (nav.open) panel görünür. */
  nav.open .menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Panelde menü linkleri tam genişlik, yazı solda ok sağda. */
  .menu a,.menu .dd>button {
    width: 100%;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 14px;
  }
  /* Panelde alt çizgi efekti kapalı. */
  .menu>li>a:after,.menu .dd>button:after {
    display: none;
  }
  /* Panelde alt menü yerinde (statik) durur, arka planı yok. */
  .sub {
    position: static;
    min-width: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 12px;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
  }
  /* Panelde alt menünün görünmez köprüsü kapalı. */
  .sub:before {
    display: none;
  }
  /* Alt menü açılınca panelde aşağıya doğru uzar (en fazla 520px). */
  .dd.open .sub {
    transform: none;
    max-height: 520px;
    padding: 4px 0 8px 12px;
  }
  /* Panelde alt menü linkleri soldan hizalı. */
  .sub a {
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 16px;
  }
  /* Dil seçici panelin altında, üstünde ayraç çizgisiyle. */
  .lang {
    margin: 8px 0 0;
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    gap: 8px;
  }
  /* Dil butonları panelde eşit genişlikte, çerçeveli. */
  .lang button {
    flex: 1;
    justify-content: center;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.18);
  }
  /* Panelde "Kayıt Ol" butonu gizli (zaten üstte kısayolu var). */
  .menu .cta {
    display: none;
  }
}

/* Çok dar ekranda (380px altı) mobil Kayıt Ol butonu daha dar. */
@media(max-width:380px) {
  /* Mobil Kayıt Ol butonunun yan boşlukları daralır. */
  .cta-m {
    padding: 10px 13px;
  }
}

/* .hero = KAPAK (GÜNCEL AYAR): lacivert zemin, tek blok, üstte 80px (menü için) boşluk. Üstteki ilk .hero kuralını EZER. */
.hero {
  background: var(--navy);
  display: block;
  min-height: 0;
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
}

/* Eski harita çizgileri gizli. */
.hero svg.topo {
  display: none;
}

/* Kapak resminin arkasındaki BULANIK büyük kopya: yan taraflar boş görünmesin diye (blur 40px, koyulaştırılmış). */
.hero .bgblur {
  position: absolute;
  inset: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  max-width: none;
  object-fit: cover;
  filter: blur(40px) saturate(1.25) brightness(.55);
  z-index: 0;
  pointer-events: none;
}

/* Kapağın içindeki öğeler bulanık arka planın üstünde. */
.hero>* {
  position: relative;
}

/* .stage = kapak resim alanı: tam genişlik, 2:1 oran, açılışta yumuşak belirir, üst kenarı menü altında yumuşak kaybolur. */
.stage {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 2/1;
  overflow: hidden;
  animation: stagein 1s ease-out both;
  -webkit-mask-image: linear-gradient(to bottom,transparent 0,#000 44px);
  mask-image: linear-gradient(to bottom,transparent 0,#000 44px);
}

/* .kapak = kapak resmi: kutuyu doldurur (gerekirse kırpılarak). */
.kapak {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .shine = kapağın üzerinden 8 saniyede bir geçen parlama (ışık süpürmesi). */
.shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 36%;
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: sweep 8s 1.6s ease-in-out infinite;
}

/* .hero-cta = kapaktaki buton/yazı kutusu: resmin sol altında (soldan %3.4, alttan %19), genişlik %32. */
.hero-cta {
  position: absolute;
  left: 3.4%;
  bottom: 19%;
  width: 32%;
  z-index: 3;
}

/* Buton alanının arkasında okunurluk için koyu yumuşak gölge. */
.hero-cta:before {
  content: "";
  position: absolute;
  inset: -60px -70px -40px -60px;
  background: radial-gradient(closest-side,rgba(3,31,38,.62),transparent);
  z-index: -1;
  pointer-events: none;
}

/* Kapaktaki açıklama cümlesi: ekrana göre 13-18px, gölgeli. */
.hero-cta p {
  margin: 0 0 16px;
  font-size: clamp(13px,1.15vw,18px);
  line-height: 1.45;
  max-width: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* .sr = EKRANDA GÖRÜNMEZ ama ekran okuyucular ve Google okur (kapaktaki gizli başlık için). */
.sr {
  position: absolute!important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* .hbtns = kapak butonları satırı: yan yana, sığmazsa alt satıra. */
.hbtns {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px,.9vw,16px);
}

/* .hbtn = KAPAK BUTONU (Parkurlar, Kayıt Ol): hap şeklinde, büyük, kalın BÜYÜK HARF yazı, solda yazı sağda yuvarlak ikon. */
.hbtn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: clamp(12px,1.1vw,18px);
  padding: clamp(7px,.55vw,10px) clamp(7px,.55vw,10px) clamp(7px,.55vw,10px) clamp(22px,1.9vw,34px);
  border-radius: 999px;
  font-family: "Barlow",system-ui,sans-serif;
  font-weight: 700;
  font-size: clamp(14px,1.15vw,19px);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: transform .4s cubic-bezier(.2,1.3,.3,1),box-shadow .4s,background .35s,color .35s,border-color .35s;
}

/* Butondaki yuvarlak ikon kutusu. */
.hbtn .ic {
  display: grid;
  place-items: center;
  width: clamp(38px,3.1vw,56px);
  height: clamp(38px,3.1vw,56px);
  border-radius: 50%;
  flex: none;
  transition: transform .45s cubic-bezier(.2,1.4,.3,1),background .35s,color .35s;
}

/* İkonun boyutu. */
.hbtn .ic svg {
  width: 46%;
  height: 46%;
  display: block;
}

/* Butonun üzerinden geçen parlama çizgisi (başlangıçta solda gizli). */
.hbtn:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform: skewX(-20deg);
  transition: left .75s;
  z-index: -1;
  pointer-events: none;
}

/* Üzerine gelince parlama sağa geçer. */
.hbtn:hover:after {
  left: 130%;
}

/* Üzerine gelince 5px kalkar ve %4 büyür. */
.hbtn:hover {
  transform: translateY(-5px) scale(1.04);
}

/* Basılınca hafif küçülür. */
.hbtn:active {
  transform: translateY(0) scale(.97);
}

/* .hbtn.pri = BİRİNCİL buton (Parkurlar): turuncu-sarı gradyan zemin, parlak gölge. */
.hbtn.pri {
  background: linear-gradient(135deg,#02a6b2 0%,#02a6b2 60%,#0f3140 100%);
  box-shadow: 0 14px 34px rgba(15, 49, 64, 1),inset 0 1px 0 rgba(255,255,255,.45);
}

/* Birincil butonun ikonu: beyaz daire, turuncu ok. */
.hbtn.pri .ic {
  background: #fff;
  color: #0f3140;
}

/* Üzerine gelince gölge büyür, çevresinde beyaz halka belirir. */
.hbtn.pri:hover {
  box-shadow: 0 20px 44px rgba(15, 49, 64, 1),0 0 0 6px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.45);
}

/* Üzerine gelince ikon 3px aşağı iner. */
.hbtn.pri:hover .ic {
  transform: translateY(3px);
}

/* Ok ikonu sürekli hafifçe aşağı-yukarı oynar (dikkat çekmek için). */
.hbtn.pri .ic svg {
  animation: nudge 1.8s ease-in-out infinite;
}

/* .hbtn.gls = CAM buton (Instagram): şeffaf beyaz, bulanık, beyaz çerçeve. */
.hbtn.gls {
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1.5px solid rgba(255,255,255,.6);
  box-shadow: 0 14px 34px rgba(3,31,38,.4),inset 0 1px 0 rgba(255,255,255,.35);
}

/* Cam butondaki ikon zemini. */
.hbtn.gls .ic {
  background: rgba(255,255,255,.22);
}

/* Üzerine gelince zemin beyaza, yazı laciverte döner. */
.hbtn.gls:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  box-shadow: 0 20px 44px rgba(3,31,38,.5),0 0 0 6px rgba(255,255,255,.18);
}

/* Üzerine gelince Instagram ikonu Instagram renk geçişine döner ve eğilir. */
.hbtn.gls:hover .ic {
  background: linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af);
  color: #fff;
  transform: rotate(-12deg) scale(1.08);
}

/* ANİMASYON "nudge": ok ikonunun aşağı-yukarı hareketi. */
@keyframes nudge {
  50% {
    transform: translateY(3px);
  }
}

/* ANİMASYON "stagein": kapak resminin yumuşak belirmesi. */
@keyframes stagein {
  from {
    opacity: 0;
  }
}

/* ANİMASYON "sweep": parlama çizgisinin soldan sağa geçişi. */
@keyframes sweep {
  0% {
    left: -60%;
  }
  22%,100% {
    left: 140%;
  }
}

/* TELEFONDA KAPAK (800px altı): resim doğal oranında gösterilir, yazı ve butonlar resmin altına iner, butonlar 2 sütun olur. */
@media(max-width:800px) {
  /* Kapakta üst boşluk 84px, alt 26px. */
  .hero {
    padding: 84px 0 26px;
  }
  /* Resim alanı: sabit oran kalkar, maske kalkar. */
  .stage {
    aspect-ratio: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Kapak resmi doğal oranında (2:1) gösterilir. */
  .stage .kapak {
    height: auto;
    aspect-ratio: 2/1;
  }
  /* Parlama efekti gizlenir. */
  .stage .shine {
    display: none;
  }
  /* Buton/yazı kutusu resmin üstünden altına iner, tam genişlik olur. */
  .hero-cta {
    position: static;
    width: 100%;
    padding: 22px 16px 0;
  }
  /* Buton arkasındaki koyu gölge kaldırılır. */
  .hero-cta:before {
    display: none;
  }
  /* Açıklama cümlesi 16px. */
  .hero-cta p {
    font-size: 16px;
  }
  /* Butonlar 2 sütun. */
  .hbtns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Buton boyutu küçülür. */
  .hbtn {
    padding: 6px 6px 6px 18px;
    font-size: 14px;
    letter-spacing: .08em;
    justify-content: space-between;
  }
  /* Butondaki ikon 40px. */
  .hbtn .ic {
    width: 40px;
    height: 40px;
  }
}

/* "Animasyonları azalt" açıksa kapak parlaması ve ok animasyonu kapanır. */
@media(prefers-reduced-motion:reduce) {
  /* Parlama ve resim animasyonlarını kapat. */
  .shine,.stage,.hbtn .ic svg {
    animation: none!important;
  }
}

/* .split = "Hakkımızda" ve "Parkurlar" menü öğeleri (link + ok yan yana): ortak hap kutusu. */
.menu .split {
  display: flex;
  align-items: center;
  border-radius: 999px;
  transition: background .25s;
}

/* Üzerine gelince/açıkken veya içindeki link aktifken ortak kutu hafif beyaz olur. */
.menu .split:hover,.menu .split.open,.menu .split:has(a.on) {
  background: rgba(255,255,255,.14);
}

/* Split içindeki link kısmı: kendi zemini yok, sol köşeleri yuvarlak. */
.menu .split>a,.menu .split>a:hover,.menu .split>a.on {
  background: none!important;
  padding: 10px 3px 10px 13px;
  border-radius: 999px 0 0 999px;
}

/* Altındaki turuncu çizginin konumu ince ayarı. */
.menu .split>a:after {
  left: calc(50% + 4px);
}

/* Split içindeki ok butonu: sağ köşeleri yuvarlak, zemini yok. */
.menu .split>button.chev {
  padding: 10px 12px 10px 5px;
  border-radius: 0 999px 999px 0;
  background: none;
  display: flex;
  align-items: center;
}

/* Ok butonunda alt çizgi efekti kapalı. */
.menu .split>button.chev:after {
  display: none;
}

/* Açıkken veya üzerine gelince ok yukarı döner. */
.menu .split.open>button .cv,.menu .split:hover>button .cv {
  transform: rotate(180deg);
}

/* Mobil menüde (1200px altı) split öğeleri: link + ok tam satır olur, alt menü altına iner. */
@media(max-width:1200px) {
  /* Split öğesi alt satıra sarılabilir. */
  .menu .split {
    flex-wrap: wrap;
  }
  /* Split içindeki link kısmı satırın çoğunu kaplar. */
  .menu .split>a,.menu .split>a:hover,.menu .split>a.on {
    flex: 1;
    width: auto;
    padding: 14px 8px 14px 18px;
  }
  /* Ok butonu 56px genişlikte. */
  .menu .split>button.chev {
    width: 56px;
    justify-content: center;
    padding: 14px 0;
  }
  /* Alt menü tam satır genişliğinde. */
  .menu .split .sub {
    flex-basis: 100%;
  }
}

/* .phead = SAYFA ÜST BAŞLIĞI (Hakkımızda, Parkurlar, İletişim...): lacivert zemin + sağ üstte turkuaz ışık, 140px üst boşluk. */
.phead {
  background: radial-gradient(70% 90% at 90% 0%,rgba(2,166,178,.5),transparent 70%),var(--navy);
  color: #fff;
  padding: 140px 4vw 56px;
  position: relative;
  overflow: hidden;
}

/* Sayfa başlığı boyutu 60-190px. */
.phead h1 {
  font-size: clamp(60px,11vw,190px);
  line-height: .92;
  margin: 10px 0 22px;
}

/* Başlıktaki vurgulu kelime turkuaz. */
.phead h1 em {
  font-style: normal;
  color: var(--teal);
}

/* Başlık altı açıklama cümlesi: en fazla 540px genişlik, açık gri-mavi. */
.phead p {
  max-width: 540px;
  font-size: clamp(16px,1.4vw,21px);
  line-height: 1.5;
  color: #cfe3e5;
  margin: 0;
}

/* Satır açılıp kaydırılırken üstten 100px pay bırakır. */
.row {
  scroll-margin-top: 100px;
}

/* Telefonda sayfa başlığı boşlukları azalır. */
@media(max-width:800px) {
  /* Telefonda sayfa başlığı boşlukları. */
  .phead {
    padding: 120px 5vw 50px;
  }
}

/* .ab = HAKKIMIZDA metinleri: paragraf boyutu 17-21px, geniş satır aralığı, en fazla 760px. */
.ab .abt p {
  font-size: clamp(17px,1.35vw,21px);
  line-height: 1.75;
  margin: 0 0 1.1em;
  max-width: 760px;
}

/* Son paragrafın altında boşluk yok. */
.ab .abt p:last-child {
  margin-bottom: 0;
}

/* Telefonda Hakkımızda sol boş sütun gizlenir. */
@media(max-width:800px) {
  /* Hakkımızda sol boş sütun gizlenir. */
  .ab>div:first-child {
    display: none;
  }
}

/* .sp = SPONSOR GRUBU: üstünde 48px boşluk. */
.sp {
  margin-top: 48px;
}

/* Sponsor grup başlığı (Ana Sponsorlar...): küçük, turuncu, BÜYÜK HARF. */
.sp h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hot);
  margin: 0 0 20px;
}

/* Başlığın yanındaki yatay çizgi. */
.sp h3:after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ink);
}

/* .sg = sponsor kutuları ızgarası: --c değişkeni kadar sütun (varsayılan 3). */
.sg {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(var(--c,3),1fr);
}

/* .sg.c2: 2 sütun. */
.sg.c2 {
  --c: 2;
}

/* .sg.c3: 3 sütun. */
.sg.c3 {
  --c: 3;
}

/* .sg.c4: 4 sütun. */
.sg.c4 {
  --c: 4;
}

/* .sg.c5: 5 sütun. */
.sg.c5 {
  --c: 5;
}

/* .slot = TEK SPONSOR KUTUSU: 84-124px yükseklik, kesikli çerçeve, yuvarlak köşe, içi ortalı. Üzerine gelince yumuşak hareket eder. */
.slot {
  height: clamp(84px,8vw,124px);
  border: 2px dashed color-mix(in srgb,var(--ink) 35%,transparent);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none;
  color: var(--mut);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .35s cubic-bezier(.2,1.3,.3,1),border-color .25s,color .25s,background .25s,box-shadow .35s;
}

/* Büyük gruplarda (class big) kutular daha yüksek. */
.sg.big .slot {
  height: clamp(110px,11vw,170px);
}

/* Büyük gruplarda logo biraz daha büyük. */
.sg.big .slot img {
  max-width: 72%;
  max-height: 66%;
}

/* 5 li gruplarda logo boyutu. */
.sg.c5 .slot img {
  max-width: 76%;
  max-height: 68%;
}

/* Kutunun üstüne gelince: 5px kalkar, çerçeve ve yazı turuncu olur. */
.slot:hover {
  transform: translateY(-5px);
  border-color: var(--hot);
  color: var(--hot);
  background: rgba(255,90,54,.06);
}

/* .slot img = logo: kutuya sığacak şekilde orantılı küçülür (en fazla %68 genişlik, %64 yükseklik). */
.slot img {
  display: block;
  width: auto;
  height: auto;
  max-width: 68%;
  max-height: 64%;
  object-fit: contain;
}

/* İçinde logo olan kutu: kesikli çizgi yerine düz ince çerçeve, beyaz zemin. */
.slot:has(img) {
  border-style: solid;
  border-color: color-mix(in srgb,var(--ink) 14%,transparent);
  background: #fff;
}

/* Logolu kutuya gelince gölge çıkar. */
.slot:has(img):hover {
  box-shadow: 0 14px 30px rgba(3,31,38,.18);
}

/* Telefonda sponsor kutuları 2 sütun olur. */
@media(max-width:800px) {
  /* Sponsor kutuları 2 sütun. */
  .sg,.sg.c3,.sg.c4,.sg.c5 {
    grid-template-columns: repeat(2,1fr);
  }
  /* Sponsor grubu üst boşluğu 40px. */
  .sp {
    margin-top: 40px;
  }
}

/* PARKUR İNDİRME BUTONLARI (GPX / KMZ / KML): parkur satırı açılınca bilgi kutusunun altında yan yana. Dosyası olmayan parkurda pasif (soluk). */
.dl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dl a, .dl .off { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; letter-spacing: .08em; transition: background .25s, color .25s, border-color .25s, transform .3s; }
.dl a:before, .dl .off:before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 20h16' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 20h16' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.dl a:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-3px); }
.dl .off { opacity: .35; cursor: not-allowed; border-style: dashed; }

/* ETAP HARİTASI (TraceDeTrail iframe) + "Haritada aç" butonu. */
.mp { display: flex; flex-direction: column; gap: 14px; }
.mp .rt2 { width: 100%; height: auto; display: block; }
.mpb { align-self: flex-start; display: inline-flex; padding: 12px 24px; background: var(--teal); color: #fff; text-decoration: none; letter-spacing: .08em; transition: transform .3s, background .25s; }
.mpb:hover { background: var(--hot); transform: translateY(-3px); }

/* GERÇEK HARİTA (Leaflet): rota haritası kutusu, km işaretleri, bayraklar ve irtifa profili. */
.mp .lmap { width: 100%; height: 440px; border: 2px solid var(--ink); background: #0f3140; position: relative; z-index: 0; }
.mp .lmap .rt2 { height: 100%; }
/* TraceDeTrail iframe haritası: kutuyu tamamen doldurur. */
.mp .lmif { height: 620px; }
.bd > div > .mp { margin-bottom: 28px; }
.mp .lmif iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) { .mp .lmif { height: 520px; } }
.kmk { width: 22px; height: 22px; border-radius: 50%; background: #d6245b; color: #fff; border: 2px solid #fff; font: 700 11px/18px "JetBrains Mono",monospace; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.flg { width: 30px; height: 30px; border-radius: 50%; color: #fff; border: 3px solid #fff; font: 700 14px/24px sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.ep .pf2 { width: 100%; height: auto; display: block; background: #fff; border: 2px solid var(--ink); }

/* PARKUR TANITIM VİDEOSU (YouTube): açılan satırın üstünde tam genişlik, 16:9. */
.vd { position: relative; width: 100%; aspect-ratio: 16/9; margin: 0 0 34px; border: 2px solid var(--ink); background: #0f3140; }
.vd iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video alanı artık haritanın/butonların altında; üstte boşluk. */
.vw { margin-top: 36px; }
.vw .vd { margin-bottom: 0; }
.vw:empty { display: none; }

/* Video kapak resmi + oynat düğmesi. */
.vd .vp { position: absolute; inset: 0; display: block; background: #0f3140 center/cover no-repeat; }
.vd .vp i { position: absolute; left: 50%; top: 50%; width: 84px; height: 58px; margin: -29px 0 0 -42px; border-radius: 16px; background: #ff0033; box-shadow: 0 6px 24px rgba(0,0,0,.45); transition: transform .3s, background .3s; }
.vd .vp i:after { content: ""; position: absolute; left: 34px; top: 17px; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.vd .vp:hover i { transform: scale(1.1); }

/* İNDİRME BUTONLARI: satır açılınca en üstte, daha büyük (üstteki .dl kuralını ezer). */
.dl { margin: 6px 0 34px; gap: 16px; }
.dl a, .dl .off { padding: 18px 44px; font-size: 17px; font-weight: 700; letter-spacing: .1em; gap: 12px; }
.dl a:before, .dl .off:before { width: 17px; height: 17px; }
@media(max-width:600px) { .dl a, .dl .off { flex: 1 1 100%; justify-content: center; } }


/* ==============================================================
PARKUR KARTLARI (anasayfa, eski "Program" bölümünün yerine)
.pk-sec = bölümün arka planı: turkuaz renk, arkada hafif kapak fotoğrafı.
.pk-grid = 3 kart yan yana (telefonda alt alta).
.pk-card = lacivert kart: üstte fotoğraf, altında rozet, başlık, açıklama, buton.
============================================================== */
.pk-sec { background: linear-gradient(rgba(2,150,166,.9),rgba(3,110,130,.94)), url("images/kapak.jpg") center/cover; padding: 80px 4vw 60px; }
.pk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; max-width: 1480px; margin: 0 auto; }
.pk-card { background: #12303f; border-radius: 22px; padding: 14px 14px 34px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; box-shadow: 0 20px 44px rgba(3,31,38,.35); transition: transform .35s cubic-bezier(.2,1.2,.3,1), box-shadow .35s; }
.pk-card:hover { transform: translateY(-8px); box-shadow: 0 30px 56px rgba(3,31,38,.5); }
/* Fotoğraf: yuvarlak köşeli; alt kısmı karta doğru yumuşakça kararır. */
.pk-ph { position: relative; width: 100%; aspect-ratio: 1.6/1; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg,#0f3140,#0a6a78); }
.pk-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-ph:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(transparent,#12303f 94%); }
/* Rozet: fotoğrafın alt kenarına biner (yukarı çekilir). */
.pk-badge { width: 150px; height: auto; margin-top: -80px; position: relative; z-index: 2; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.pk-card h3 { font: italic 700 32px/1.1 "Barlow Condensed","Arial Narrow",sans-serif; margin: 14px 0 16px; filter: none; }
.pk-tx { padding: 0 18px; flex: 1; }
.pk-tx p { font: italic 500 21px/1.18 "Barlow Condensed","Arial Narrow",sans-serif; margin: 0 0 20px; color: #fff; }
/* Buton: rengi karttan karta değişir (--bt arka plan, --bx yazı). */
.pk-btn { display: inline-block; margin-top: 12px; padding: 12px 36px; background: var(--bt,#19e6f5); color: var(--bx,#06323b); font: italic 700 23px/1 "Barlow Condensed","Arial Narrow",sans-serif; text-decoration: none; border-radius: 4px; transition: transform .3s, filter .3s; }
.pk-btn:hover { transform: translateY(-3px); filter: brightness(1.12); }
.pk-all { text-align: center; margin: 34px 0 0; }
.pk-all a { color: #fff; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.6); padding-bottom: 3px; letter-spacing: .08em; }
.pk-all a:hover { border-color: #fff; }
@media(max-width:1000px) { .pk-grid { grid-template-columns: 1fr; max-width: 520px; } }

/* PARKUR KARTI GÖRSELLERİ: Fotoğraf + rozet artık tek PNG/WEBP görsel. Rozet görselin içinde olduğu için eski kırpma/gradyan/rozet ayarları kapatıldı. */
.pk-ph { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.pk-ph:after { display: none; }
.pk-ph img { height: auto; object-fit: initial; }
.pk-card h3 { margin-top: 4px; }

/* KAYIT OL butonu: üzerine gelince ok ikonunun zemini #02a6b2 olur (butonun kendisi cam buton gibi beyaza döner). */
.hbtn.gls.kayit:hover .ic { background: #02a6b2; }


/* ===== 14K DOWNHILL X tanıtım metni (parkurlar.js → xr). İrtifa grafiği yerine açılan satırda sağ sütunda görünür. ===== */
.in2 { align-items: start; }
.xt { font-size: 17px; line-height: 1.65; }
.xt p { margin: 0 0 14px; }
.xt .xh { font: 400 34px/1.1 "Bebas Neue", Impact, sans-serif; letter-spacing: .02em; margin-bottom: 18px; }
.xt h4 { font: 400 28px/1.1 "Bebas Neue", Impact, sans-serif; letter-spacing: .04em; margin: 34px 0 14px; padding-top: 18px; border-top: 2px solid var(--ink); }
.xd { display: grid; grid-template-columns: max-content 1fr; margin: 0; border: 2px solid var(--ink); }
.xd dt, .xd dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--ink); }
.xd dt { color: var(--mut); border-right: 1px solid var(--ink); }
.xd dd { font-weight: 600; }
.xd dt:nth-last-of-type(1), .xd dd:last-of-type { border-bottom: 0; }
.xt .xw { border-left: 4px solid var(--teal); padding: 8px 0 8px 16px; }
.xo { margin: 0; padding-left: 22px; }
.xo li { margin: 0 0 10px; padding-left: 4px; }
@media(max-width:600px) { .xd { grid-template-columns: 1fr; } .xd dt { border-right: 0; border-bottom: 0; padding-bottom: 0; } }

/* ===== TEK PARKUR SAYFASI (parkur-*.html) ===== */
/* Satır hep açık: tıklanmaz, + işareti yok, başlık 3 sütun. */
.row.solo { cursor: default; border-bottom: 3px solid var(--ink); }
.row.solo .hd { grid-template-columns: minmax(150px,.7fr) 2fr 1fr; }
.row.solo .hd .pl { display: none; }
/* Altta önceki / tüm parkurlar / sonraki bağlantıları. */
.pnav { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px 4vw 60px; }
.pnav a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: .2s; }
.pnav a:hover { color: var(--hot); border-color: var(--hot); }
.pnav a.all { border: 2px solid var(--ink); padding: 10px 18px; }
.pnav a.all:hover { border-color: var(--hot); }
@media(max-width:800px) {
  .row.solo .hd { grid-template-columns: 90px 1fr; }
  .pnav { flex-direction: column; align-items: flex-start; }
}

/* KAPAK «KAYIT OL» butonu (.hbtn.pri): «Parkurlar» (cam) butonundaki gibi, üzerine gelince zemin yumuşakça #02a6b2 → #0f3140 olur, ikon #02a6b2 olup eğilir. Renkleri değiştirmek için aşağıdaki değerleri düzenle. */
.hbtn.pri:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0f3140;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.hbtn.pri:hover:before {
  opacity: 1;
}
.hbtn.pri:hover .ic {
  background: #02a6b2;
  color: #fff;
  transform: rotate(-12deg) scale(1.08);
}

/* ===== PARKUR SAYFALARI: BÜTÜN YAZILAR ORTALI (parkurlar.html ve parkur-*.html) ===== */
/* Üst başlık, parkur satırları ve alttaki gezinme bağlantıları ortalanır. */
.phead, #yaris, .pnav { text-align: center; }
.phead p { margin-left: auto; margin-right: auto; }
.hd>* { text-align: center; }
/* İndirme butonları (GPX/KMZ/KML) ortada. */
.dl { justify-content: center; }
/* Tanıtım metni (x) olan parkurda (Downhill X): tek sütun, ortada. */
.in2.in1 { grid-template-columns: 1fr; max-width: 960px; margin-left: auto; margin-right: auto; }
/* Tanıtım metni ortalı: tablo hücreleri, numaralı liste ve uyarı satırı da ortalanır. */
.xd dt, .xd dd { text-align: center; }
.xo { padding-left: 0; list-style-position: inside; }
.xo li { padding-left: 0; }
.xt .xw { border-left: 0; border-top: 4px solid var(--teal); padding: 14px 0 0; }
/* Mesafe/Start/... kutuları, harita butonu ve irtifa yazısı ortalı. */
.kv div, .mp, .pf+.m { text-align: center; }
.vw { text-align: center; }

/* Tanıtım metni (x) olan parkurda (30K) metnin altındaki harita ile arasına boşluk. */
.xt + .mp { margin-top: 40px; }

/* ==============================================================
 MOBİL İYİLEŞTİRMELERİ (v26): SADECE telefon/tablet (800px ve altı) için. Bilgisayar görünümünü ETKİLEMEZ.
 Yatay taşma, sıkışan başlıklar ve çok küçük dokunma alanları düzeltilir.
 ============================================================== */

/* Sayfa yana kayıp menü/hamburger düğmesi ekran dışına çıkmasın diye yatay taşma kırpılır (tüm ekranlarda zararsız). */
html {
  overflow-x: clip;
}

@media(max-width:800px) {
  /* Parkur/Hakkımızda satırları: numara sütunu genişler, + işareti sığar. */
  .hd {
    grid-template-columns: 96px minmax(0,1fr) 34px;
    gap: 12px;
  }
  /* Satırdaki büyük numara (5K, 56K...) 96px sütuna sığacak kadar küçülür. */
  .hd .n {
    font-size: 54px;
    -webkit-text-stroke-width: 1.5px;
    white-space: nowrap;
  }
  /* Dokunmatikte "hover" kayması olmasın (taşma yapıyordu). */
  .row:hover .n,.row.on .n {
    transform: none;
  }
  /* Parkur adı uzun olursa alt satıra kırılır, taşmaz. */
  .hd h3 {
    font-size: clamp(24px,7vw,34px);
    overflow-wrap: anywhere;
  }
  /* + işareti kendi sütununa sığar. */
  .hd .pl {
    font-size: 32px;
    width: 34px;
    line-height: 1;
  }
  /* Anasayfa rota başlıkları (Likya Yolu...) ekrana göre küçülür. */
  .rt h3 {
    font-size: clamp(28px,8.5vw,46px);
    overflow-wrap: anywhere;
  }
  .rt .b {
    font-size: clamp(56px,16vw,90px);
  }
  /* Bölüm başlıkları (Program, Rota, SSS...) uzun kelimelerde taşmaz. */
  h2.b {
    font-size: clamp(40px,13vw,88px);
    margin-bottom: 32px;
    overflow-wrap: anywhere;
  }
}

/* Dokunmatik cihazlarda küçük bağlantı/düğmelere en az 44px dokunma alanı. */
@media(hover:none) and (max-width:1200px) {
  .lang button,.menu a,.menu .dd>button {
    min-height: 44px;
  }
}

/* ==============================================================
 ANASAYFA KAPAĞI - TELEFON DÜZENİ (v27): sadece 800px ve altı. Bilgisayar kapağı değişmez.
 Görsel menüyle aynı yan boşlukta, yuvarlak köşeli; yazı ortalı; iki buton eşit boy ve genişlikte.
 ============================================================== */
@media(max-width:800px) {
  /* Kapak: menünün altından başlar, alt boşluk dengeli. */
  .hero {
    padding: 82px 0 28px;
  }
  /* Kutu: yazı ve butonları da içerdiği için kırpılmaz; yan boşluk menüyle aynı (12px). */
  .stage {
    width: 100%;
    aspect-ratio: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
  }
  /* Görsel: 2:1 oran, yuvarlak köşe, gölge. Yüklenene kadar lacivert zemin görünür (boş parlama olmaz). */
  .stage .kapak {
    width: calc(100% - 24px);
    height: auto;
    aspect-ratio: 2/1;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 18px;
    background: #0f3140;
    box-shadow: 0 14px 34px rgba(3,31,38,.45);
  }
  /* Yazı + butonlar: ortalı, görselle aynı genişlikte. */
  .hero-cta {
    width: calc(100% - 24px);
    max-width: 520px;
    margin: 0 auto;
    padding: 22px 4px 0;
    text-align: center;
  }
  .hero-cta p {
    font-size: 17px;
    line-height: 1.5;
    margin: 0 auto 20px;
    max-width: 34ch;
  }
  /* İki buton: eşit genişlik ve eşit yükseklik (52px). */
  .hbtns {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hbtn {
    min-height: 52px;
    padding: 5px 5px 5px 18px;
    font-size: 14px;
    letter-spacing: .1em;
    justify-content: space-between;
    box-shadow: 0 8px 22px rgba(3,31,38,.35);
  }
  .hbtn .ic {
    width: 42px;
    height: 42px;
    flex: none;
  }
  /* Cam buton koyu zeminde silik kalmasın: biraz daha dolgun. */
  .hbtn.gls {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.7);
  }
}

/* Çok dar telefonlarda (360px ve altı) buton yazısı sığsın. */
@media(max-width:370px) {
  .hbtn {
    padding-left: 14px;
    font-size: 13px;
    letter-spacing: .06em;
  }
  .hbtn .ic {
    width: 38px;
    height: 38px;
  }
}