/* ============================================================
   FLIGHT DECK — ferdi.fun görsel teması
   Kokpit/enstrüman estetiği: amber aksan, teknik HUD, okunaklı tip
   Bu dosya styles.css'in ÜZERİNE yüklenir (index.html'de sonra).
   Yalnızca ana sayfanın hero + genel tonunu yükseltir; alt sayfalar
   etkilenmez.
   ============================================================ */

:root {
  --fd-amber: #f5a524;          /* enstrüman ışığı */
  --fd-amber-hi: #ffce6b;       /* vurgu parlaması */
  --fd-amber-dim: rgba(245,165,36,0.14);
  --fd-ink: #05070d;            /* kokpit neredeyse-siyahı */
  --fd-navy: #0a1628;
  --fd-text: #dce6f2;
  --fd-muted: #7f93ab;
  --fd-line: rgba(245,165,36,0.28);
}

/* ---- Tabii styles.css'te tanımlı hero-badge/highlight'ı amber'e çek ---- */
body { background: var(--fd-ink); }

.highlight {
  background: linear-gradient(135deg, var(--fd-amber-hi), var(--fd-amber));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   HERO — yeni sentetik görsel + kokpit ambiyansı
   ============================================================ */
.hero {
  min-height: 100vh;
  align-items: center;
  padding-top: 80px;
}

/* Yeni arka plan görseli (sentetik): uçak sağ-üstte, sol 2/3 karanlık */
.hero-bg {
  background: linear-gradient(180deg, #060a14 0%, #0a1426 55%, #0e1a2e 100%),
              url('img/hero-fal.webp') center 42%/cover no-repeat;
  filter: saturate(1.05);
  animation: heroZoom 60s ease-in-out infinite alternate;
}
/* FAL görselini background-image olarak net ayır — üstteki gradienti maskele */
.hero-bg {
  background-image:
    radial-gradient(120% 90% at 75% 55%, rgba(10,20,38,0.15) 0%, rgba(6,10,20,0.55) 55%, rgba(6,10,20,0.88) 100%),
    url('img/hero-fal.webp');
}
/* Metin koruması: sol taraf koyu, sağ net (görsel zaten solda karanlık) */
.hero-bg::before {
  background: linear-gradient(90deg,
    rgba(6,10,20,0.92) 0%, rgba(6,10,20,0.72) 34%,
    rgba(6,10,20,0.38) 58%, rgba(6,10,20,0.06) 82%, rgba(6,10,20,0) 100%);
}
.hero-bg::after {
  background: linear-gradient(180deg, rgba(6,10,20,0.35) 0%, transparent 30%,
    transparent 62%, rgba(6,10,20,0.5) 90%, rgba(6,10,20,0.94) 100%);
}

/* Başlık — keskin, büyük, enstrüman tipi */
.hero h1 {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #f4f8ff;
}
.hero h1 .highlight { font-size: 4rem; }

/* Hero rozet: amber çerçeveli, monte kutu (enstrüman etiketi) */
.hero-badge {
  font-family: 'JetBrains Mono', monospace;
  color: var(--fd-amber);
  border: 1px solid var(--fd-line);
  background: rgba(6,10,20,0.6);
  text-transform: none;
  letter-spacing: 3px;
  padding: 6px 16px;
}
.hero-badge::before { content: '● '; color: var(--fd-amber); font-size: 0.6em; position: relative; top: -2px; }

/* Alt metin */
.hero p { color: var(--fd-muted); }
.hero-sub { color: #5c6f88; }

/* Butonlar */
.hero-buttons .btn-primary {
  background: linear-gradient(135deg, var(--fd-amber), #d98a0e);
  color: #171205;
  box-shadow: 0 4px 24px rgba(245,165,36,0.35);
  border: none;
}
.hero-buttons .btn-primary:hover {
  box-shadow: 0 8px 32px rgba(245,165,36,0.5);
  transform: translateY(-2px);
}
.hero-buttons .btn-outline {
  background: rgba(6,10,20,0.5);
  border-color: rgba(220,230,242,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--fd-text);
}
.hero-buttons .btn-outline:hover {
  border-color: var(--fd-amber);
  color: var(--fd-amber-hi);
  background: var(--fd-amber-dim);
}

/* ============================================================
   FLIGHT DECK HUD — kokpit telemetri çerçevesi
   ============================================================ */
.hud {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  color: var(--fd-amber);
  text-shadow: 0 0 8px rgba(245,165,36,0.5);
}
/* Köşe braketleri — kokpitteki görüş karesi */
.hud-corner {
  position: absolute; width: 46px; height: 46px;
  border: 2px solid rgba(245,165,36,0.55);
  filter: drop-shadow(0 0 4px rgba(245,165,36,0.5));
  opacity: 0.85;
}
.hud-tl { top: 90px; left: 26px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.hud-tr { top: 90px; right: 26px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.hud-bl { bottom: 26px; left: 26px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.hud-br { bottom: 26px; right: 26px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

/* Telemetri etiketleri (sağ üst sütun) */
.hud-label {
  position: absolute; right: 40px;
  font-size: 0.72rem; letter-spacing: 1px;
  color: var(--fd-muted);
  border-left: 2px solid var(--fd-amber-dim);
  padding-left: 10px;
  opacity: 0.9;
}
.hud-label .hud-val {
  display: block;
  font-size: 1.5rem; font-weight: 500;
  color: var(--fd-amber-hi);
  text-shadow: 0 0 12px rgba(245,165,36,0.5);
  line-height: 1.1;
}
.hud-alt { top: 24%; }
.hud-hdg { top: 39%; }
.hud-spd { top: 54%; }

/* Sahte ufuk çizgisi + reticle */
.hud-bogus-horizon {
  position: absolute; left: 44px; top: 54%;
  width: 130px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,165,36,0.8), transparent);
  opacity: 0.5;
}
.hud-ret {
  position: absolute; left: 44px; top: calc(54% - 9px);
  width: 18px; height: 18px; opacity: 0.5;
}
.hud-ret-in {
  width: 18px; height: 18px;
  border: 1.5px solid var(--fd-amber);
  border-radius: 50%;
  position: relative;
}
.hud-ret-in::after {
  content: ''; position: absolute; left: 8px; top: 8px;
  width: 2px; height: 2px; background: var(--fd-amber); transform: translate(-50%,-50%);
}

/* Sürat kaseti (sol) */
.hud-speedtape {
  position: absolute; left: 8px; top: 44%;
  width: 4px; height: 90px;
  border-left: 2px solid rgba(245,165,36,0.5);
  opacity: 0.55;
}
.hud-speedtape::before {
  content: '462'; position: absolute; left: 10px; top: -5px;
  font-size: 0.7rem; color: var(--fd-amber-hi);
}

/* Yaklaşım tick'ler */
.hud-tick { position: absolute; left: 46px; width: 16px; height: 2px; background: rgba(245,165,36,0.5); opacity: 0.5; }
.hud-tick-1 { top: 46%; }
.hud-tick-2 { top: 62%; }

/* Küçük vurgu noktaları */
.hud-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--fd-amber-hi); opacity: 0.6; }
.hud-dot-1 { left: 30%; top: 30%; animation: hudPulse 3.2s ease-in-out infinite; }
.hud-dot-2 { left: 62%; top: 64%; animation: hudPulse 3.2s ease-in-out 1.6s infinite; }

/* Hedef braketleri (sağ alt) */
.hud-bracket { position: absolute; width: 24px; height: 24px; border: 1.5px solid rgba(245,165,36,0.7); opacity: 0.7; }
.hud-bracket-1 { right: 12%; bottom: 20%; border-radius: 50%; }
.hud-bracket-2 { right: 16%; bottom: 27%; transform: rotate(45deg); border-radius: 2px; width: 14px; height: 14px; }

@keyframes hudPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.9; }
}

/* Hareket azaltma: HUD statik */
@media (prefers-reduced-motion: reduce) {
  .hud-dot { animation: none; }
  .hero-bg { animation: none; }
}

/* ============================================================
   GENEL TON — bölüm başlıkları, kartlar amber aksan
   ============================================================ */
.section-label {
  font-family: 'JetBrains Mono', monospace;
  color: var(--fd-amber);
  letter-spacing: 3px;
  text-transform: none;
}
.section-title .highlight { font-family: inherit; }
.update-badge { border: 1px solid rgba(245,165,36,0.18); }

.news-card, .gu-kart, .about-card, .contact-card, .sozluk-kelime {
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.06);
}
.news-card:hover, .gu-kart:hover {
  border-color: var(--fd-line);
}
.news-source-badge, .gu-tip {
  color: var(--fd-amber);
  background: var(--fd-amber-dim);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: 1px;
}
.news-title a:hover { color: var(--fd-amber-hi); }
.news-source a { color: var(--fd-amber); }

/* Hermes yorumu amber yerine mor yerine kokpit teal */
.hermes-comment {
  background: rgba(245,165,36,0.05);
  border: 1px solid rgba(245,165,36,0.12);
  border-left: 3px solid var(--fd-amber);
}
.hermes-comment-label { color: var(--fd-amber); }
.hermes-comment p { color: #e0c489; }

/* Günün uçağı */
.gu-ozel { color: var(--fd-amber-hi); background: var(--fd-amber-dim); border-color: rgba(245,165,36,0.3); }
.gu-teknisyen { border-left-color: var(--fd-amber); background: var(--fd-amber-dim); }
.gu-teknisyen strong { color: var(--fd-amber-hi); }
.gu-link { color: var(--fd-amber); }

.btn { border-radius: 6px; }
.btn-primary { border-radius: 6px; }

/* Section dönüşü */
.section-alt { background: rgba(255,255,255,0.015); border-color: rgba(255,255,255,0.04); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hero h1, .hero h1 .highlight { font-size: 2.4rem; }
  .hud-label { right: 20px; }
  .hud-label .hud-val { font-size: 1.2rem; }
  .hud-corner { width: 30px; height: 30px; }
  .hud-tl, .hud-tr { top: 78px; }
  .hud-speedtape, .hud-bogus-horizon, .hud-ret, .hud-tick { display: none; }
  /* Mobilde uçak/hero fotoğrafı ortada, metin altta — karartmaları güçlendir */
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(6,10,20,0.4) 0%, rgba(6,10,20,0.1) 30%,
      transparent 48%, rgba(6,10,20,0.4) 70%, rgba(6,10,20,0.85) 100%);
  }
  .hero-bg::before {
    background: linear-gradient(90deg, rgba(6,10,20,0.85) 0%, rgba(6,10,20,0.4) 60%, rgba(6,10,20,0) 100%);
  }
}