/* =========================================================================
   Ana sayfa (#/) — ürün sitesi düzeni, OSD kimliği korunur.
   Tokenlar main.css :root'tan gelir (--fs-*, --f-*, renkler).
   ========================================================================= */

.ana { --kap: 1180px; --kap-pad: clamp(16px, 4vw, 40px); overflow-x: clip; }
.ana-kap { max-width: calc(var(--kap) + 2 * var(--kap-pad)); margin: 0 auto; padding: 0 var(--kap-pad); }

.ana-kicker {
  margin: 0 0 12px; font: 600 var(--fs-label)/1.3 var(--f-mono); letter-spacing: .14em; color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.ana-kicker::before { content: ''; width: 18px; height: 1.5px; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ---------- Kahraman ---------- */
.ana-hero { position: relative; isolation: isolate; }
.ana-hero-medya { position: relative; aspect-ratio: 5 / 4; max-height: 56svh; width: 100%; overflow: hidden; background: #071a20; }
.ana-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.ana-hero-medya::after { /* alt kenarda zemine erime + hafif tarama çizgisi */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,14,20,.35) 0, transparent 22%, transparent 55%, var(--bg) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.ana-hero-osd { position: absolute; inset: 14px 16px auto; z-index: 1; display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; color: rgba(238,243,250,.86); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.ana-hero-osd .ana-osd-alt { display: none; }
.ana-rec { color: #FF6B70; animation: ana-rec 2s steps(2) infinite; }
@keyframes ana-rec { 50% { opacity: .35; } }

.ana-hero-ic { position: relative; z-index: 1; padding: 0 var(--kap-pad); margin-top: -64px; max-width: calc(var(--kap) + 2 * var(--kap-pad)); margin-left: auto; margin-right: auto; }
.ana-h1 {
  margin: 0 0 16px; font: 700 var(--fs-2xl)/1.02 var(--f-head); letter-spacing: -0.035em; color: #fff;
  text-wrap: balance; max-width: 12ch;
}
.ana-lead { margin: 0 0 26px; max-width: 36ch; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.55; color: var(--text-2); }
.ana-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-lg { min-height: 52px; padding: 14px 24px; font-size: 1rem; border-radius: 12px; }
.btn-lg .icon { width: 20px; height: 20px; }
.btn-cam { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-cam:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.ana-cta .btn { flex: 1 1 auto; }
.ana-devam {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; min-height: var(--tap);
  color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
}
.ana-devam .osd-num { color: var(--cyan); font-size: var(--fs-xs); }
.ana-devam .icon { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease); }
.ana-devam:hover { color: var(--text); }
.ana-devam:hover .icon { transform: translateX(3px); color: var(--text); }

.ana-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.ana-sayilar > div { padding: 0 10px; border-left: 1px solid var(--line); min-width: 0; }
.ana-sayilar > div:first-child { padding-left: 0; border-left: 0; }
.ana-sayilar dt { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; color: #fff; line-height: 1.05; }
.ana-sayilar dd { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }

/* Giriş animasyonu (hareket azaltılmışsa main.css genel kuralı kapatır) */
.ana-hero-ic > * { animation: ana-yuksel .8s var(--ease) both; }
.ana-hero-ic > :nth-child(2) { animation-delay: .06s; }
.ana-hero-ic > :nth-child(3) { animation-delay: .12s; }
.ana-hero-ic > :nth-child(4) { animation-delay: .18s; }
.ana-hero-ic > :nth-child(n+5) { animation-delay: .24s; }
@keyframes ana-yuksel { from { opacity: 0; transform: translateY(16px); } }

@media (min-width: 900px) {
  .ana-hero { min-height: min(86vh, 800px); display: flex; align-items: center; }
  .ana-hero-medya { position: absolute; inset: 0 0 0 30%; aspect-ratio: auto; max-height: none; width: auto; background: transparent; }
  .ana-hero-video { object-position: 50% 50%; }
  .ana-hero-medya::after {
    background:
      linear-gradient(90deg, var(--bg) 0, rgba(10,14,20,.6) 22%, transparent 48%),
      linear-gradient(to bottom, transparent 70%, var(--bg) 100%),
      repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  }
  .ana-hero-osd { inset: 22px 28px auto 34%; }
  .ana-hero-osd .ana-osd-alt { display: inline; }
  .ana-hero-ic { width: 100%; margin-top: 0; padding-top: 48px; padding-bottom: 96px; }
  .ana-hero-ic > * { max-width: 560px; }
  .ana-h1 { max-width: 11ch; }
  .ana-cta .btn { flex: 0 0 auto; }
  .ana-sayilar { max-width: 520px; }
}

/* ---------- İlerleme şeridi ---------- */
.ana-ilerleme { position: relative; z-index: 2; margin-top: 28px; }
.ana-ilerleme-kart {
  display: grid; gap: 18px; padding: clamp(18px, 3vw, 26px);
  background: linear-gradient(160deg, rgba(24,32,44,.92), rgba(14,19,27,.96));
  border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  --hud: rgba(61,255,154,.5);
}
.ana-ilerleme-pil .ana-kicker { margin-bottom: 14px; }
.ana-ilerleme .battery.lg .cell { width: clamp(24px, 6vw, 30px); height: 38px; }
.ana-ilerleme-bar { align-self: center; min-width: 0; }
.ana-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ana-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--accent)); box-shadow: 0 0 12px rgba(61,255,154,.6); }
.ana-ilerleme-metin { margin: 12px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.ana-ilerleme-metin b { color: #fff; font-weight: 700; }
.ana-nokta { color: var(--muted); }
.ana-siradaki {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; min-height: 64px;
  color: var(--text); text-decoration: none;
  background: rgba(0,217,255,.06); border: 1px solid rgba(0,217,255,.32); border-radius: 12px;
  transition: background .2s, border-color .2s;
}
.ana-siradaki:hover { background: rgba(0,217,255,.1); border-color: rgba(0,217,255,.6); }
.ana-siradaki > .icon { margin-left: auto; width: 18px; height: 18px; color: var(--cyan); }
.ana-siradaki.tamam { color: var(--accent); border-color: rgba(61,255,154,.4); background: rgba(61,255,154,.06); font-weight: 600; }
.ana-siradaki-ikon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: #00222A; box-shadow: 0 0 18px rgba(0,217,255,.45); }
.ana-siradaki-ikon .icon { width: 16px; height: 16px; }
.ana-siradaki-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ana-siradaki-metin .osd-small { color: var(--cyan); }
.ana-siradaki-metin b { font: 600 1.0625rem/1.25 var(--f-head); }
.ana-siradaki-meta { font-size: var(--fs-xs); color: var(--muted); }
@media (min-width: 900px) {
  .ana-ilerleme { margin-top: -56px; }
  .ana-ilerleme-kart { grid-template-columns: auto minmax(180px, 1fr) minmax(280px, 360px); align-items: center; gap: 32px; }
}

/* ---------- Bölümler ---------- */
.ana-bolum { padding-top: clamp(64px, 9vw, 120px); }
.ana-bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 36px); }
.ana-h2 { margin: 0; font: 700 var(--fs-xl)/1.08 var(--f-head); letter-spacing: -0.03em; color: #fff; max-width: 26ch; }
.ana-bolum-aciklama { margin: 12px 0 0; max-width: 58ch; color: var(--text-2); font-size: var(--fs-md); line-height: 1.6; }
.ana-tumu { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--accent); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.ana-tumu .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.ana-tumu:hover .icon { transform: translateX(3px); }

/* Ne öğreneceksin */
.ana-ogren { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.ana-ogren-oge {
  position: relative; padding: 22px 20px 20px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
}
.ana-ogren-ikon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; color: var(--accent); background: rgba(61,255,154,.1); border: 1px solid rgba(61,255,154,.25); }
.ana-ogren-no { position: absolute; top: 22px; right: 20px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.ana-ogren-oge h3 { margin: 0 0 6px; font: 600 1.1875rem/1.25 var(--f-head); letter-spacing: -0.01em; color: #fff; }
.ana-ogren-oge p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 599px) {
  .ana-ogren-oge { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 18px 16px; }
  .ana-ogren-ikon { grid-row: 1 / span 2; margin: 0; }
  .ana-ogren-no { top: 18px; right: 16px; }
}
@media (min-width: 600px) { .ana-ogren { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ana-ogren { grid-template-columns: repeat(4, 1fr); } }

/* Görev hatları */
.ana-gorevler { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.ana-gorev {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px;
  color: #fff; text-decoration: none; background: #0d131c; border: 1px solid var(--line);
  transform: translateZ(0);
}
.ana-gorev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ana-gorev::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,9,14,.94) 0, rgba(6,9,14,.7) 32%, rgba(6,9,14,.1) 62%, rgba(6,9,14,0) 100%); }
.ana-gorev:hover img { transform: scale(1.045); }
.ana-gorev:hover { border-color: rgba(61,255,154,.45); }
.ana-gorev-osd {
  position: absolute; z-index: 1; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 6px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em;
  background: rgba(6,10,16,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14);
}
.ana-gorev-osd .icon { width: 14px; height: 14px; color: var(--accent); }
.ana-rozet { position: absolute; z-index: 1; top: 14px; right: 14px; padding: 6px 10px; border-radius: 999px; background: var(--accent); color: #04140B; font: 700 var(--fs-label)/1 var(--f-mono); letter-spacing: .1em; }
.ana-gorev-metin { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ana-gorev-metin h3 { margin: 0; font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.1 var(--f-head); letter-spacing: -0.02em; }
.ana-gorev-aciklama { color: #D5DEEA; font-size: var(--fs-sm); line-height: 1.5; max-width: 46ch; }
.ana-ok { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; }
.ana-ok .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
a:hover .ana-ok .icon { transform: translateX(3px); }
@media (min-width: 720px) { .ana-gorevler { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

/* Dron filosu: yatay kaydırmalı şerit */
.ana-filo {
  list-style: none; margin: 0 calc(-1 * var(--kap-pad)); padding: 4px var(--kap-pad) 16px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 78%); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--kap-pad); scrollbar-width: thin; overscroll-behavior-x: contain;
}
.ana-filo > li { scroll-snap-align: start; }
.ana-dron {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 18px;
  color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s, transform .2s var(--ease);
}
.ana-dron:hover { border-color: rgba(61,255,154,.45); transform: translateY(-2px); }
.ana-dron-gorsel { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(180deg, #E6E9ED, #CFD4DA); }
.ana-dron-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.ana-dron:hover .ana-dron-gorsel img { transform: scale(1.04); }
.ana-dron-metin { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.ana-dron-metin .osd-small { color: var(--accent); letter-spacing: .08em; }
.ana-dron-metin h3 { margin: 0; font: 600 1.1875rem/1.25 var(--f-head); letter-spacing: -0.01em; color: #fff; }
.ana-dron-ozellik { display: flex; gap: 14px; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }
.ana-dron-ozellik b { color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.ana-dron .ana-ok { margin-top: auto; padding-top: 8px; }
@media (min-width: 720px) { .ana-filo { grid-auto-columns: minmax(280px, 42%); } }
@media (min-width: 1100px) {
  /* masaüstünde yatay kaydırma yok: beş kart tek satıra sığar */
  .ana-filo { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 4px 0 0; overflow: visible; }
  .ana-dron-metin { padding: 14px 16px 16px; }
  .ana-dron-metin h3 { font-size: 1.0625rem; }
}

/* Ders haritası (mevcut ilerleme özelliği, yeni kabuk) */
.ana-harita-sayac { font-size: 1.25rem; font-weight: 700; color: var(--accent); padding: 8px 12px; border: 1px solid rgba(61,255,154,.35); border-radius: 10px; }
.ana-harita-ic { display: grid; gap: 14px; }
.ana-harita .tier {
  margin: 0; padding: clamp(16px, 2.6vw, 24px); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)); border: 1px solid var(--line);
}
.ana-harita .tier-head { align-items: flex-start; border-bottom-color: var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.ana-harita .tier-no { padding-top: 2px; }
.tier-ust { margin: 0 0 2px; color: var(--accent); }
.tier-ad { margin: 0; font: 700 1.375rem/1.15 var(--f-head); letter-spacing: -0.015em; color: #fff; }
.ana-harita .level-node { padding-right: 4px; }
.ana-harita .tier-hint { font: 500 var(--fs-sm)/1.45 var(--f-body); letter-spacing: 0; color: var(--text-2); margin: 0 0 14px; }
.ana-harita .level-node:not(.file):hover { background: rgba(255,255,255,.03); }
@media (min-width: 1000px) {
  .ana-harita-ic { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .ana-harita .tier-file, .ana-harita .tier-final { grid-column: 1 / -1; }
}

/* Alt bilgi */
.ana-alt {
  margin-top: clamp(64px, 9vw, 120px); padding-top: 28px; padding-bottom: 40px; color: var(--muted); font-size: var(--fs-xs);
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--kap-pad)) 1px no-repeat;
}
.ana-alt p { margin: 6px 0 0; }
.ana-alt-marka { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font: 700 1rem/1 var(--f-head); }
.ana-alt-marka b { color: var(--accent); }
.ana-alt-marka .icon { width: 22px; height: 22px; color: var(--accent); }
.ana-alt-not { opacity: .85; }

/* Kaydırınca belirme */
.ana-goster.bekle { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.ana-goster.bekle.gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ana-rec { animation: none; }
  .ana-goster.bekle { opacity: 1; transform: none; }
  .ana-gorev img, .ana-dron-gorsel img { transition: none; }
}