:root {
  /* Marka vurgu rengi — Kalynda çiplerindeki indigo. Tanımsızken var(--accent)
     kullanan 35 kural geçersiz sayılıyor, düğmeler beyaz yazı + saydam zemin
     olarak görünmez hâle geliyordu. */
  --accent: #6366f1;
  /* KURUMSAL TON — tek marka rengi lacivert. Bağlantı, birincil düğme ve
     seçili durum bunu kullanır. Uçuş kategorisi renkleri (--vfr/--mvfr/…)
     ANLAM taşır; arayüz vurgusu olarak kullanılmaz — eskiden CTA ve "öne
     çıkan plan" --mvfr (mavi = MVFR kategorisi) ile boyanıyordu, bu hem
     kurumsal değildi hem de kategori renk koduyla çakışıyordu. */
  --brand: #2A5FA8;
  --brand-ink: #1F4E8C;
  /* Dolu düğme zemini: beyaz yazıyla kontrast için her temada koyu lacivert. */
  --brand-btn: #1F4E8C;
  --brand-btn-hover: #16386A;
  --vfr: #22c55e;
  --mvfr: #3b82f6;
  --ifr: #ef4444;
  --lifr: #d946ef;
  --unk: #94a3b8;
  --radius: 14px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body[data-theme="dark"] {
  --accent: #5B8AC6;
  --brand: #5B8AC6;
  --brand-ink: #2A5FA8;
  --bg: #0b1220;
  --panel: rgba(15, 23, 42, 0.82);
  --panel-solid: #0f172a;
  --panel-border: rgba(148, 163, 184, 0.16);
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --hover: rgba(148, 163, 184, 0.12);
  --input-bg: rgba(2, 6, 23, 0.55);
  --mono-bg: rgba(2, 6, 23, 0.6);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

body[data-theme="light"] {
  /* Vurgu = marka lacivertidir. Eskiden indigo (#4f46e5) idi: plan şeridi,
     model sekmesi ve "Planları gör" düğmesi mor görünüyor, kurumsal tonla
     çakışıyordu. */
  --accent: #1F4E8C;
  --brand: #1F4E8C;
  --brand-ink: #16386A;
  --bg: #eaeff6;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-solid: #ffffff;
  --panel-border: rgba(15, 23, 42, 0.085);
  --text: #101828;
  --text-dim: #5b6b82;
  --hover: rgba(37, 99, 235, 0.07);
  --input-bg: #f4f7fb;
  --mono-bg: #f6f9fc;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 28px rgba(31, 51, 92, .10);
}
body[data-theme="light"] {
  background:
    radial-gradient(1100px 620px at 12% -12%, #ffffff 0%, transparent 62%),
    radial-gradient(900px 520px at 92% 4%, #e6eefb 0%, transparent 58%),
    var(--bg);
}
body[data-theme="light"] .pcard,
body[data-theme="light"] .tr-card,
body[data-theme="light"] .stat-tile,
body[data-theme="light"] .price-card {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(31, 51, 92, .06);
}
body[data-theme="light"] .cell,
body[data-theme="light"] .raw,
body[data-theme="light"] .kv {
  background: linear-gradient(180deg, #ffffff 0%, var(--mono-bg) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16, 24, 40, .04);
}
body[data-theme="light"] .drawer,
body[data-theme="light"] .modal-card { box-shadow: 0 24px 60px rgba(31, 51, 92, .16); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* VARSAYILAN: sayfa kayar. Kaydırmayı yalnızca harita uygulaması kilitler
   (aşağıdaki html.harita). Eskiden tersiydi — kaydırma kapalı gelir, içerik
   sayfaları `html:has(.page)` ile açardı. `:has()` desteklemeyen tarayıcıda
   (Firefox 121 öncesi, Safari 15.4 öncesi) meydan sayfası hiç kaydırılamıyordu:
   programla scrollTo çalışıyor ama tekerlek ve parmak çalışmıyordu. Kritik bir
   davranışı yeni bir seçiciye bağlamak yanlıştı. */
html, body { height: 100%; }

/* Harita uygulaması: sayfa kaymaz, harita tam ekranı kaplar. Sınıf, boyamadan
   önce index.html'deki satır içi betikle eklenir. */
html.harita, html.harita body { overflow: hidden; overscroll-behavior: none; }
#map {
  position: fixed; inset: 0;
  /* Kürenin arkası UZAY. MapLibre'nin gökyüzü yalnızca kürenin kenarındaki
     haleyi boyuyor, gerisi saydam kalıyor; oraya yıldızlı bir gece düşer.
     Sahte bir küre çizmiyoruz: eskiden çizilen daire gerçek kürenin çapına
     oturmuyor, etrafında mercek gibi halkalar bırakıyordu. */
  background-color: #04060d;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 27% 71%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 41% 12%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 84%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 31%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 62%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 6% 52%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 39%, rgba(199,222,255,.65), transparent 60%),
    radial-gradient(1.7px 1.7px at 66% 8%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 92% 22%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 19% 91%, rgba(255,236,214,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 81% 88%, rgba(255,255,255,.7), transparent 60%),
    /* uzak gökada tozu: düz siyah yerine hafif bir derinlik */
    radial-gradient(ellipse 70% 50% at 22% 28%, rgba(56,84,140,.16), transparent 70%),
    radial-gradient(ellipse 60% 45% at 78% 72%, rgba(78,60,120,.14), transparent 70%);
}

/* GÜNDÜZ: küre aydınlık bir gökyüzünün içinde durur. Koyu uzay ve yıldızlar
   yalnızca gece kipine aittir; gündüz kipinde siyah bir çerçeve içinde duran
   küre yanlış görünüyordu. background-image tümüyle değiştirilir, yoksa
   gündüz zemininin üstünde yıldızlar kalırdı. */
[data-theme="light"] #map {
  background-color: #cfe3f7;
  background-image:
    radial-gradient(ellipse 92% 74% at 50% 44%,
      #f2f8ff 0%, #dcecfb 38%, #bcd8f2 68%, #9cc2e6 100%);
}
body { background: var(--bg); color: var(--text); }

#map { position: absolute; inset: 0; }

body[data-theme="dark"] .maplibregl-ctrl-attrib {
  background: rgba(15, 23, 42, 0.7) !important; color: #94a3b8;
}
body[data-theme="dark"] .maplibregl-ctrl-attrib a { color: #94a3b8; }

/* ---------- Üst bar: tek blok ---------- */
/* Üst bar yüzen kart değil: ekranın tepesine yapışık, tam genişlikte şerit. */
/* z-index 20 iken .drawer (25) menülerin üstüne biniyordu: .topbar fixed +
   z-index ile KENDİ yığın bağlamını yaratıyor, içindeki .mapmenu/.setmenu
   z-index 30 olsa da global sıralamada 20'de kilitli kalıyordu. Mobilde menü
   neredeyse tam ekran açıldığı için alt üçte ikisi drawer'ın arkasında
   kalıyor ve tıklanamıyordu. Topbar drawer'ın üstüne alındı. */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }

.bar {
  display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px;
  background: var(--panel); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 0; border-bottom: 1px solid var(--panel-border); border-radius: 0;
  box-shadow: 0 6px 24px -18px rgba(8, 15, 30, .55);
}
.bar-sep { width: 1px; height: 22px; background: var(--panel-border); flex: none; opacity: .7; }
.bar-spacer { flex: 1; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 0 6px; }
.brand img { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand .t1 { font-weight: 800; font-size: 14.5px; letter-spacing: .2px; white-space: nowrap; }
.brand .t3d { color: var(--brand); font-weight: 800; }
.brand .t2 {
  font-size: 9.5px; color: var(--text-dim); letter-spacing: .2px;
  text-transform: none; white-space: nowrap; margin-top: 1.5px; opacity: .85;
}

.searchbox {
  display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 150px; max-width: 400px;
  height: 40px; padding: 0 13px; border-radius: 11px;
  background: var(--input-bg); border: 1px solid transparent; transition: border-color .16s, background .16s;
}
.searchbox:focus-within { border-color: var(--mvfr); background: var(--panel-solid); }
.searchbox svg { width: 15px; height: 15px; opacity: .5; flex: none; }
.searchbox input {
  flex: 1; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: 14.5px; font-family: inherit; min-width: 0;
}
.searchbox input::placeholder { color: var(--text-dim); }

/* Uçuş kuralı şeridi: dört ayrı kutu yerine tek sakin blok */
.legend {
  display: flex; gap: 2px; padding: 4px; border-radius: 11px;
  background: var(--input-bg);
}
.legend .chip {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap; letter-spacing: .2px;
}
.legend .chip i { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; }
.legend .chip b { color: var(--text); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 800; }

.barbtn {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid transparent;
  background: var(--input-bg); cursor: pointer; color: var(--text);
  display: flex; align-items: center; justify-content: center; flex: none; transition: all .16s;
}
.barbtn:hover { border-color: var(--mvfr); color: var(--mvfr); }
.barbtn.active { border-color: #1D4ED8; color: #fff; background: #1D4ED8; box-shadow: 0 1px 2px rgba(15,23,42,.18), 0 4px 12px rgba(29,78,216,.28); }
.barbtn svg { width: 20px; height: 20px; }

.barlink {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 11px;
  background: transparent; color: var(--text); text-decoration: none;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: all .16s;
}
.barlink:hover { background: var(--hover); color: var(--mvfr); }
.barlink { font-size: 13.5px; }
.barlink.primary { background: var(--mvfr); color: #fff; }
.barlink.primary:hover { filter: brightness(1.08); color: #fff; }

.barsel {
  height: 38px; padding: 0 8px; border-radius: 11px; border: 1px solid transparent;
  background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; max-width: 130px;
}
.barsel:hover { border-color: var(--mvfr); }

/* harita menüsü */
.mapmenu-wrap { position: relative; }
.mapmenu {
  position: absolute; top: 56px; right: 0; z-index: 30; display: none;
  min-width: 208px; padding: 8px;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 13px; box-shadow: var(--shadow);
}
.mapmenu.open { display: block; }
.mm-title {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.9px;
  color: var(--text-dim); font-weight: 700; padding: 7px 8px 5px;
}
.mm-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; color: var(--text); font-family: inherit; font-size: 12.5px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.mm-item:hover { background: var(--hover); }
.mm-item.active { background: var(--mvfr); color: #fff; font-weight: 600; }
.mm-toggle {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  font-size: 12.5px; cursor: pointer; border-radius: 8px;
}
.mm-toggle:hover { background: var(--hover); }
.mm-toggle input { accent-color: var(--mvfr); width: 14px; height: 14px; }

/* koordinat + eylem çubuğu */
.coordbar {
  display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.cb-val {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px;
  font-weight: 500; letter-spacing: 0.2px; color: var(--text);
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 5px 9px;
}
.cb-btn {
  background: transparent; border: 1px solid var(--panel-border); color: var(--text-dim);
  border-radius: 8px; padding: 5px 9px; font-size: 10.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none; line-height: 1.5;
}
.cb-btn:hover { color: var(--brand); border-color: var(--brand); }

.actbar { display: flex; gap: 7px; margin-top: 10px; }
.actbtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all 0.14s;
}
.actbtn:hover { border-color: var(--mvfr); color: var(--mvfr); }
.actbtn svg { width: 14px; height: 14px; }

/* harita altı bilgi paneli */

.searchbox {
  display: flex; align-items: center; gap: 8px; min-width: 240px; flex: 0 1 340px;
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border); border-radius: var(--radius);
  padding: 0 8px 0 14px; box-shadow: var(--shadow); height: 46px;
}
.searchbox svg { width: 16px; height: 16px; opacity: 0.55; flex: none; }
.searchbox input {
  flex: 1; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: 14px; font-family: inherit; min-width: 0;
}
.searchbox input::placeholder { color: var(--text-dim); }

.legend {
  display: flex; gap: 6px;
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border); border-radius: var(--radius);
  padding: 7px 10px; box-shadow: var(--shadow);
}
.legend .chip {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 9px; font-size: 12px; font-weight: 600; cursor: default;
  color: var(--text-dim);
}
.legend .chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.legend .dot { width: 9px; height: 9px; border-radius: 50%; }

.iconbtn {
  width: 46px; height: 46px; border-radius: var(--radius); border: 1px solid var(--panel-border);
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); cursor: pointer; color: var(--text);
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.iconbtn:hover { background: var(--hover); }
.iconbtn svg { width: 19px; height: 19px; }

.iconbtn.active {
  border-color: var(--mvfr);
  color: var(--mvfr);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--mvfr);
}

/* ---------- Meteogram ---------- */
.meteo-wrap {
  display: flex; border: 1px solid var(--panel-border); border-radius: 10px;
  overflow: hidden; background: var(--mono-bg);
}
.meteo-labels {
  flex: none; width: 108px; display: flex; flex-direction: column;
  border-right: 1px solid var(--panel-border); background: var(--mono-bg);
}
/* Türkçe/Almanca satır adları İngilizce'den uzun: dar sütunda kesiliyordu.
   Sığmayanlar iki satıra iner, harf aralığı da daraltıldı. */
.meteo-full .meteo-labels { width: 140px; }
.meteo-labels div {
  display: flex; align-items: center; padding: 0 4px 0 9px;
  font-size: 11px; line-height: 1.15; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.1px; box-sizing: border-box; overflow: hidden;
  white-space: normal; overflow-wrap: anywhere; hyphens: auto;
}
.meteo-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.meteo-inner { position: relative; }
.meteo-inner canvas { display: block; }
.meteo-hi {
  position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none;
  background: rgba(59, 130, 246, 0.16);
  border-left: 1.5px solid var(--mvfr); border-right: 1.5px solid var(--mvfr);
  opacity: 0; transition: opacity 0.12s;
}
.meteo-clickable { cursor: zoom-in; }

.h3row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.minibtn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 8px; padding: 4px 9px; font-size: 10.5px; font-weight: 600;
  font-family: inherit; letter-spacing: 0.3px; cursor: pointer; text-transform: none;
}
.minibtn:hover { background: var(--hover); border-color: var(--mvfr); color: var(--mvfr); }
.minibtn svg { width: 11px; height: 11px; }

/* ---------- Meteogram modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: stretch; justify-content: stretch; padding: 0;
  background: rgba(2, 6, 23, 0.72); backdrop-filter: blur(4px);
}
.modal.open { display: flex; }
.modal-card {
  width: 100%; height: 100%; max-height: 100%; border-radius: 0;
  background: var(--panel-solid); border: 0;
  box-shadow: none; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px; border-bottom: 1px solid var(--panel-border);
}
.modal-title { font-size: 15px; font-weight: 800; letter-spacing: 0.2px; }
.modal-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.modal-legend {
  margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--text-dim);
}
.modal-legend span { display: flex; align-items: center; gap: 5px; }
.modal-legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.modal-body { padding: 14px 18px 18px; overflow: auto; }

.best-window {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 9px 13px; border-radius: 10px; font-size: 12.5px;
  background: var(--mono-bg); border: 1px solid var(--panel-border); border-left: 3px solid #15803D;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
}
.bw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vfr); flex: none; }
.bw-dot.off { background: var(--text-dim); }
.bw-h { color: var(--text-dim); }

/* yükseklik kesiti */
.al-sep {
  height: 22px !important; display: flex; align-items: center; padding-left: 8px;
  font-size: 8.5px; letter-spacing: 0.4px; color: var(--text-dim);
  border-top: 1px solid var(--panel-border); margin-top: 4px; text-transform: uppercase;
}
.al-axis { position: relative; width: 100%; }
.al-spacer { height: 26px; }
.al-canvas { display: block; }

.al-readout { margin-top: 12px; border-top: 1px solid var(--panel-border); padding-top: 10px; }
.al-head {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.9px;
  color: var(--text-dim); margin-bottom: 6px; font-weight: 700;
}
.al-row {
  display: grid; grid-template-columns: 58px 46px 1fr 40px 60px;
  gap: 8px; font-size: 11.5px; padding: 2px 0; font-variant-numeric: tabular-nums;
}
.al-alt { font-weight: 700; }
.al-hpa, .al-cld { color: var(--text-dim); }

.meteo-readout {
  margin-top: 14px; border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--mono-bg); padding: 11px 13px;
}
.ro-head { font-size: 12px; color: var(--text-dim); margin-bottom: 9px; }
.ro-head b { color: var(--text); font-size: 13px; }
.ro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 7px 16px; }
.ro-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.ro-item span { color: var(--text-dim); }
.ro-item b { font-weight: 600; text-align: right; }

/* ---------- Trendler ---------- */
.tr-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--panel-border);
}
.tr-ranges { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-range {
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text-dim);
  border-radius: 9px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all 0.14s;
}
.tr-range:hover { color: var(--text); border-color: var(--mvfr); }
.tr-range.active { background: var(--mvfr); border-color: var(--mvfr); color: #fff; }
.tr-custom { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); }
.tr-custom input {
  background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 8px; padding: 5px 8px; font-family: inherit; font-size: 11.5px; margin-left: 5px;
}
.tr-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.tr-meta b { color: var(--text); font-size: 14px; }

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.stat-tile {
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 11px; padding: 10px 12px;
}
.st-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-dim); font-weight: 700; }
.st-v { font-size: 21px; font-weight: 800; margin-top: 3px; line-height: 1.1; }
.st-v small { font-size: 12px; font-weight: 600; opacity: 0.75; }
.st-s { font-size: 10px; color: var(--text-dim); margin-top: 3px; }

.tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-card {
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 13px; padding: 13px 14px 15px;
}
.tr-card.wide { grid-column: 1 / -1; }
.analysis-card {
  margin-bottom: 16px;
  background: var(--mono-bg);
  border-color: var(--panel-border); border-left: 3px solid #1D4ED8;
}
.analysis-card .lede { font-size: 13.5px; line-height: 1.72; }
.analysis-card b { color: var(--text); font-weight: 700; }
.tr-card h4 {
  font-size: 12.5px; font-weight: 700; margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.tr-card h4 small { font-size: 10.5px; font-weight: 400; color: var(--text-dim); }
.chart-wrap { position: relative; }
.chart-wrap.center { display: flex; justify-content: center; }
.chart-wrap canvas { display: block; max-width: 100%; }

.tt {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.1s;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 9px; padding: 7px 10px; font-size: 11px; min-width: 130px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); z-index: 5;
}
.tt-head { font-weight: 700; margin-bottom: 5px; font-size: 11.5px; }
.tt-row { display: flex; align-items: center; gap: 6px; padding: 1.5px 0; color: var(--text-dim); }
.tt-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tt-row b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }

.rose-legend {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px; font-size: 10px; color: var(--text-dim);
}
.rose-legend span { display: flex; align-items: center; gap: 4px; }
.rose-legend i { width: 8px; height: 8px; border-radius: 2px; display: block; }

.phen-list { display: flex; flex-direction: column; gap: 6px; }
.phen-row { display: grid; grid-template-columns: 118px 1fr 62px; gap: 9px; align-items: center; font-size: 11.5px; }
.ph-label small { color: var(--text-dim); font-size: 9.5px; }
.ph-bar { height: 8px; background: var(--panel-border); border-radius: 4px; overflow: hidden; }
.ph-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mvfr), var(--lifr)); }
.ph-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ph-n small { color: var(--text-dim); font-weight: 400; }

.swing-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 9px;
  padding: 5px 0; border-bottom: 1px solid var(--panel-border); font-size: 11.5px; align-items: center;
}
.swing-row:last-child { border-bottom: 0; }
.sw-time { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sw-end { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- Pist diyagramı ---------- */
.rwy-box {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 10px; margin-bottom: 10px;
}
.rwy-svg { width: 260px; height: 260px; flex: none; }
.rwy-side { flex: 1 1 260px; min-width: 240px; }
.rwy-wind { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; line-height: 1.45; }
.rwy-wind b { color: var(--text); }
.rwy-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rwy-tbl th {
  text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-dim); font-weight: 700; padding: 0 6px 5px 0;
}
.rwy-tbl small { color: var(--text-dim); font-size: 9.5px; }
.rwy-tbl td { padding: 5px 6px 5px 0; border-top: 1px solid var(--panel-border); font-variant-numeric: tabular-nums; }
.rwy-tbl .rwid { font-weight: 700; }
.rwy-tbl tr.pref .rwid { color: var(--brand); }
/* Dolu renk + BEYAZ metin (koyu yeşil üstüne koyu yeşil yazı değil). */
.pref-tag {
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px; padding: 1px 5px;
  border-radius: 4px; background: #15803D; color: #fff; vertical-align: middle;
}
.rwy-legend { display: flex; gap: 12px; margin-top: 8px; font-size: 10px; color: var(--text-dim); }
.rwy-legend span { display: flex; align-items: center; gap: 4px; }
.rwy-legend i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.rw-best polygon { filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.5)); }

/* ---------- Favoriler ---------- */
.favbar {
  position: fixed; top: 74px; left: 14px; z-index: 19;
  display: flex; gap: 8px; flex-wrap: wrap; max-width: min(70vw, 640px);
}
.favchip {
  display: flex; align-items: center; gap: 7px; padding: 7px 13px;
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border); border-radius: 999px; box-shadow: var(--shadow);
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text);
  transition: transform 0.12s, background 0.15s;
}
.favchip:hover { background: var(--hover); }
/* Dokunmatikte parmak hedefi: 31 px yükseklik kaçırmaya açıktı, 40'a çıkarıldı.
   Fare ile hiçbir şey değişmez, yalnızca dokunma cihazlarında rahatlar. */
@media (pointer: coarse) {
  .favchip { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
  .maplibregl-ctrl-geolocate { width: 36px; height: 36px; }
}
.favchip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--unk); }

/* ---------- Yükleme çubuğu ---------- */
.loader {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 30;
  background: linear-gradient(90deg, transparent, var(--mvfr), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: slide 1s linear infinite; opacity: 0; transition: opacity 0.2s;
}
.loader.on { opacity: 1; }
@keyframes slide { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

/* ---------- Drawer ---------- */
/* Windy düzeni: sağ kenar yerine sayfanın altından yukarı açılan tam genişlik
   sayfa. Harita üstte açık kalır, panel altında yükselir. Tutamaktan sürüklenir. */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 25;
  width: 100%;
  height: var(--sheet-h, 58vh);
  max-height: calc(100vh - var(--topbar-h, 60px));
  background: var(--panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 0; border-top: 1px solid var(--panel-border); border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 46px -24px rgba(8, 15, 30, .6);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer.open { transform: translateY(0); }
.drawer.full { height: calc(100vh - var(--topbar-h, 60px)); border-radius: 0; }
.drawer.dragging { transition: none; }

/* sürükleme tutamağı — çift tıkla tam boy */
.drawer-grip {
  flex: none; height: 20px; border: 0; background: transparent; cursor: grab;
  display: flex; align-items: center; justify-content: center; padding: 0;
  touch-action: none;
}
.drawer-grip:active { cursor: grabbing; }
.drawer-grip span {
  width: 42px; height: 4px; border-radius: 999px; background: var(--panel-border);
  transition: background .16s, width .16s;
}
.drawer-grip:hover span { background: var(--accent); width: 58px; }

.drawer-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--panel-border); }
.drawer-head .row1 { display: flex; align-items: flex-start; gap: 10px; }
.drawer-head .icao { font-size: 24px; font-weight: 800; letter-spacing: 0.5px; line-height: 1; }
.drawer-head .name { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }
.drawer-head .spacer { flex: 1; }
.catbadge {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.8px; color: #fff;
}
.drawer-head .meta { display: flex; gap: 10px; margin-top: 10px; font-size: 11.5px; color: var(--text-dim); }

.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px 22px; scrollbar-width: thin; overscroll-behavior: contain; }
/* Geniş ekranda alt sayfa da geniş: dar bölümler yan yana dizilsin.
   Çok kolonlu düzen (column-width) yatay taşma yapıyordu — ızgara kullanılır. */
@media (min-width: 1000px) {
  .drawer-body {
    display: grid; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
    gap: 0 22px;
  }
  /* Izgara öğesinin varsayılan min-width'i içeriğe göre şişiyor; meteogramın
     4000 px'lik tuvali sütun hesabını bozup kabı 2 px'e çökertiyordu. */
  .drawer-body > * { min-width: 0; }
  .drawer-body > .sect-wide, .drawer-body > .emptymsg { grid-column: 1 / -1; }
}

.raw {
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; line-height: 1.55; background: var(--mono-bg);
  border: 1px solid var(--panel-border); border-radius: 10px; padding: 11px 13px;
  word-break: break-word; white-space: pre-wrap;
}

.sect { margin-top: 18px; }
.sect h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-dim); margin-bottom: 9px; font-weight: 700;
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cell {
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 10px 12px;
}
.cell .k { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.7px; }
.cell .v { font-size: 14px; font-weight: 600; margin-top: 3px; line-height: 1.35; }
.cell .v small { font-weight: 400; color: var(--text-dim); }
.cell.wide { grid-column: 1 / -1; }
.windrow { display: flex; align-items: center; gap: 10px; }
.windrow svg { width: 34px; height: 34px; flex: none; }

.tafbar {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--panel-border); margin-bottom: 4px;
}
.tafbar .seg { height: 100%; }
.taf-times { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-dim); margin-bottom: 10px; }

.tafrow {
  display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--panel-border);
  font-size: 12.5px; align-items: baseline;
}
.tafrow:last-child { border-bottom: 0; }
.tafrow .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; top: 1px; align-self: center; }
.tafrow .time { color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.tafrow .chg { font-weight: 700; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.tafrow .txt { flex: 1; line-height: 1.4; }

.starbtn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--panel-border);
  background: transparent; cursor: pointer; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.starbtn:hover { background: var(--hover); }
.starbtn.faved { color: #fbbf24; }
.starbtn svg { width: 18px; height: 18px; }
.closebtn { composes: none; }

.emptymsg { color: var(--text-dim); font-size: 13px; padding: 8px 2px; }

/* ---------- Alt bilgi ---------- */
/* ---------- Meydan sayfası (SSR) ---------- */
/* İçerik sayfaları doğal yükseklikte akar (harita dışındaki her sayfa) */
html:not(.harita), html:not(.harita) body { height: auto; }
.page { min-height: 100%; background: var(--bg); }
.page-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 18px; border-bottom: 1px solid var(--panel-border);
  position: sticky; top: 0; z-index: 20;
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cta {
  margin-left: auto; background: var(--brand-btn); color: #fff; text-decoration: none;
  border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700;
}
.cta:hover { background: var(--brand-btn-hover); }
.page-main { max-width: 1120px; margin: 0 auto; padding: 18px 20px 36px; }

.hero {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--panel-border);
}
.hero-id { flex: 1; min-width: 260px; }
.hero h1 {
  font-size: clamp(23px, 3.2vw, 33px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.12;
}
.hero-sub { font-size: 0.42em; font-weight: 700; color: var(--text-dim); letter-spacing: 1px; }
/* Meydanın tam adı yalnız H1'deki kısa addan FARKLIYSA yazılır; aynıysa
   yerine IATA · şehir · ülke künyesi geçer (eskiden aynı ad iki kez alt
   alta çıkıyordu). */
.hero-name { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; font-weight: 600; letter-spacing: .2px; }
.hero-coords { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.hero-cat { text-align: right; }
.hc-badge {
  display: inline-block; background: var(--c); color: #fff; font-size: 15px; font-weight: 800;
  letter-spacing: 1px; padding: 7px 15px; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}
.hc-time { font-size: 10.5px; color: var(--text-dim); margin-top: 6px; }

.pcard {
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 11px;
}
.pcard h2 {
  font-size: 12px; font-weight: 800; margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim);
}
.lede { font-size: 13px; line-height: 1.6; color: var(--text-dim); max-width: 80ch; }
.lede + .lede { margin-top: 8px; }
.pcard .raw { margin-bottom: 10px; }

.kv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 6px; margin-bottom: 11px;
}
.kv {
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px;
}
.kv span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-dim); font-weight: 700; }
.kv b { font-size: 14px; font-weight: 700; }

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: #fff; letter-spacing: 0.5px;
}
.tbl-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 12px; }
.ptable th {
  text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-dim); padding: 0 10px 6px 0; font-weight: 700; white-space: nowrap;
}
.ptable td { padding: 6px 10px 6px 0; border-top: 1px solid var(--panel-border); vertical-align: top; }
.nowrap { white-space: nowrap; }

.page-foot {
  border-top: 1px solid var(--panel-border); padding: 16px;
  text-align: center; font-size: 11.5px; color: var(--text-dim);
}
.page-foot a { color: var(--brand); text-decoration: none; font-weight: 600; }
.page-foot p { margin-top: 6px; font-size: 10.5px; }

/* ---------- Dünya sıralamaları ---------- */
.ranks { max-width: 1500px; margin: 26px auto 0; }
.ranks-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ranks-head h3 { font-size: 15px; font-weight: 800; }
.ranks-head span { font-size: 11.5px; color: var(--text-dim); }
.rank-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rank-tab {
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text-dim);
  border-radius: 999px; padding: 6px 13px; font-size: 11.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.rank-tab:hover { color: var(--text); }
.rank-tab.active { background: var(--mvfr); border-color: var(--mvfr); color: #fff; }
.rank-filter {
  margin-left: auto; background: var(--input-bg); border: 1px solid var(--panel-border);
  color: var(--text); border-radius: 999px; padding: 6px 11px; font-size: 11.5px; font-family: inherit;
}
.rank-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.rank-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 11px; cursor: pointer; transition: all 0.14s;
}
.rank-item:hover { border-color: var(--mvfr); }
.rank-no {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--panel-border); color: var(--text);
}
.rank-item:nth-child(1) .rank-no { background: #eab308; color: #1c1400; }
.rank-item:nth-child(2) .rank-no { background: #cbd5e1; color: #1e293b; }
.rank-item:nth-child(3) .rank-no { background: #b45309; color: #fff; }
.rank-main { flex: 1; min-width: 0; }
.rank-icao { font-size: 12.5px; font-weight: 700; }
.rank-name {
  font-size: 10.5px; color: var(--text-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rank-val { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-val small { font-size: 10px; font-weight: 600; opacity: 0.7; }
.rank-note { font-size: 11px; color: var(--text-dim); margin-top: 12px; line-height: 1.55; }

/* ---------- Mobil ---------- */
@media (max-width: 980px) {
  .brand .t2, .legend .chip b { display: none; }
  .barlink { padding: 0 10px; font-size: 12px; }
  .barsel { max-width: 92px; }
}
@media (max-width: 720px) {
  .bar { height: auto; flex-wrap: wrap; padding: 8px; gap: 8px; }
  .bar-sep, .bar-spacer { display: none; }
  .brand-txt { display: none; }
  .searchbox { order: 3; flex: 1 1 100%; max-width: none; }
  .legend { order: 4; flex: 1 1 100%; justify-content: space-between; }
  .legend .chip b { display: inline; }
  .favbar { top: auto; bottom: 60px; max-width: calc(100vw - 28px); }
  /* Telefonda alt sayfa biraz daha yüksek açılsın; tutamaktan tam boya çekilir */
  .drawer { height: var(--sheet-h, 64vh); border-radius: 16px 16px 0 0; }
  .drawer-grip { height: 24px; }
  .disclaimer { display: none; }
  .modal { padding: 8px; }
  .modal-head { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .modal-legend { order: 3; width: 100%; margin-left: 0; }
  .modal-body { padding: 10px 12px 14px; }
  .rwy-svg { width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
}

.mm-note { margin-left: auto; font-size: 9px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* metrik SEO sayfaları */
.crumbs { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.crumbs a { color: var(--mvfr); text-decoration: none; }
.metric-h1 { font-size: clamp(26px, 4.5vw, 42px); font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; }
.metric-name { font-size: 15px; color: var(--text); margin-top: 7px; font-weight: 500; }
.metric-intro { margin: 12px 0 18px; max-width: 68ch; }
.metric-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.metric-chip, .lang-chip {
  display: inline-block; padding: 7px 13px; border-radius: 999px; text-decoration: none;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
  font-size: 12px; font-weight: 600;
}
.metric-chip:hover, .lang-chip:hover { border-color: var(--mvfr); color: var(--mvfr); }
.lang-chip.active { background: var(--mvfr); border-color: var(--mvfr); color: #fff; }
html[dir="rtl"] .crumbs, html[dir="rtl"] .page-main { text-align: right; }

/* günlük brifing */
.brief-box {
  margin-bottom: 14px; padding: 13px 15px; border-radius: 12px;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
}
.brief-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.brief-head h3 { font-size: 13px; font-weight: 700; }
.brief-head select { margin-left: auto; }
.brief-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 9px; }
.brief-day {
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 9px 11px;
}
.brief-day b { font-size: 11.5px; display: block; margin-bottom: 4px; }
.brief-day p { font-size: 11.5px; line-height: 1.55; color: var(--text-dim); }

/* fiyatlandırma */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 11px; margin-top: 16px; }
.price-card {
  position: relative; background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 16px 15px; display: flex; flex-direction: column;
}
/* Öne çıkan plan marka lacivertiyle işaretlenir; eskiden --mvfr idi ve o renk
   MVFR uçuş kategorisinin kodu — arayüzde aynı mavi iki farklı anlam taşıyordu. */
.price-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 8px 24px rgba(31,78,140,.12); }
.price-tag {
  position: absolute; top: -9px; left: 15px; background: var(--brand-btn); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .7px; padding: 3px 9px; border-radius: 6px; text-transform: uppercase;
}
.price-card h3 { font-size: 14.5px; font-weight: 800; }
.price { font-size: 26px; font-weight: 800; margin-top: 5px; letter-spacing: -0.8px; }
.price small { font-size: 12px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
.price-year { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.price-blurb { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 9px 0 11px; }
.price-mods { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; margin-bottom: 13px; }
.price-mods li { display: flex; gap: 7px; font-size: 11.5px; align-items: baseline; }

/* Fiyat sayfası tanıtım filmi: metin + dikey film yan yana. */
.video-card {
  margin-top: 16px; display: grid; gap: 18px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}
.video-card > div { align-self: center; }
@media (max-width: 620px) {
  .video-card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}
.price-mods li.off { opacity: .38; }
.price-mods li span { color: var(--vfr); font-weight: 700; width: 12px; flex: none; }
.price-mods li.off span { color: var(--text-dim); }
.price-cta { margin-left: 0; text-align: center; display: block; }
.fld { display: block; margin-bottom: 12px; }
.fld span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-dim); font-weight: 700; margin-bottom: 5px; }
.fld input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 9px; padding: 10px 12px; font-family: inherit; font-size: 14px;
}
.fld input:focus { outline: 0; border-color: var(--mvfr); }
.err { color: var(--ifr); font-size: 12px; min-height: 18px; margin-bottom: 6px; }
.plan-edit { background: var(--mono-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.pe-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pe-head input[type=number] { width: 76px; }
.pe-name { font-weight: 700; font-size: 14px; }
.pe-head input, .pe-blurb {
  background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 8px; padding: 6px 9px; font-family: inherit; font-size: 12.5px;
}
.pe-blurb { width: 100%; margin-bottom: 10px; }
.pe-mods label { font-weight: 500; font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; }

.navlink {
  display: inline-flex; align-items: center; height: 46px; padding: 0 15px;
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; font-size: 12.5px; font-weight: 600;
}
.navlink:hover { color: var(--brand); border-color: var(--brand); }
/* İçerik sayfalarının başlığı haritanınkinden daha sıkı: düşük yükseklik,
   gölgesiz, saydam ikon düğmesi. */
.page-top .navlink { height: 32px; padding: 0 12px; font-size: 12px; box-shadow: none; background: transparent; }
.page-top .iconbtn {
  width: 32px; height: 32px; border-radius: 8px; box-shadow: none; background: transparent;
}
.page-top .iconbtn svg { width: 16px; height: 16px; }
.page-top .brand img { width: 28px; height: 28px; border-radius: 8px; }
.page-top .brand .t1 { font-size: 13.5px; }
@media (max-width: 720px) { .topbar .navlink { display: none; } }

/* çoklu model rüzgar yelpazesi (harita üstü) */
.modelfan { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 5; }
.mf-svg { overflow: visible; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }

.mdl-consensus {
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 11px; padding: 11px 13px; margin-bottom: 9px;
}
.mc-main { display: flex; align-items: baseline; gap: 9px; }
.mc-dir { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-spd { font-size: 22px; font-weight: 800; color: var(--mvfr); }
.mc-spd small { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.mc-gust { font-size: 13px; font-weight: 700; color: #fb923c; }
.mc-meta { display: flex; gap: 7px; font-size: 10.5px; color: var(--text-dim); margin-top: 5px; flex-wrap: wrap; }
.mc-verdict { font-size: 12px; line-height: 1.55; color: var(--text-dim); margin-top: 8px; }
.mdl-list { display: flex; flex-direction: column; gap: 2px; }
.mdl-row {
  display: grid; grid-template-columns: 1fr 18px 42px 78px; gap: 7px; align-items: center;
  padding: 5px 2px; border-bottom: 1px solid var(--panel-border); font-size: 12px;
}
.mdl-row:last-child { border-bottom: 0; }
.mdl-name { font-weight: 600; }
.mdl-arrow { display: inline-block; text-align: center; font-size: 13px; }
.mdl-dir { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 11px; }
.mdl-spd { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mdl-spd small { font-weight: 500; }

/* birleşik çubuk grafiği */
.uni-card { margin-bottom: 14px; }
.uni-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.uni-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text-dim);
  border-radius: 999px; font-size: 11.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .14s;
}
.uni-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--panel-border); display: block; }
.uni-chip:hover { color: var(--text); }
.uni-chip.on { color: var(--text); border-color: var(--c); background: var(--panel-solid); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 3px 10px rgba(16,24,40,.10); }
.uni-chip.on i { background: var(--c); }
.uni-wrap { position: relative; }
.uni-cursor {
  position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none; opacity: 0;
  background: rgba(148,163,184,.14); border-left: 1px solid var(--mvfr); border-right: 1px solid var(--mvfr);
  transition: opacity .12s;
}

/* stat kutusu giriş animasyonu */
@keyframes tileIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.tile-in { animation: tileIn .42s cubic-bezier(.22,1,.36,1) both; }

.uni-brief {
  margin-top: 12px; padding: 0 14px; max-height: 0; overflow: hidden;
  border-radius: 11px; background: var(--mono-bg); border: 1px solid transparent;
  transition: max-height .3s ease, padding .3s ease, border-color .3s;
}
.uni-brief.on { max-height: 260px; padding: 12px 14px; border-color: var(--mvfr); }
.ub-head { font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--mvfr); }
.uni-brief p { font-size: 12.5px; line-height: 1.62; color: var(--text-dim); }
.uni-wrap canvas { cursor: pointer; }

/* ---------- Decoded paneli: kademeli giriş + canlı rüzgar oku ---------- */
@keyframes cellIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.grid2 .cell {
  animation: cellIn .5s cubic-bezier(.22,1,.36,1) both;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.grid2 .cell:nth-child(1) { animation-delay: .02s; }
.grid2 .cell:nth-child(2) { animation-delay: .08s; }
.grid2 .cell:nth-child(3) { animation-delay: .14s; }
.grid2 .cell:nth-child(4) { animation-delay: .20s; }
.grid2 .cell:nth-child(5) { animation-delay: .26s; }
.grid2 .cell:nth-child(6) { animation-delay: .32s; }
.grid2 .cell:nth-child(7) { animation-delay: .38s; }
.grid2 .cell:nth-child(n+8) { animation-delay: .44s; }
.grid2 .cell:hover {
  border-color: var(--mvfr);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59,130,246,.14);
}
.grid2 .cell .v { transition: color .2s; }

/* rüzgar oku: halka nefes alır, ok yerine yumuşak oturur */
@keyframes windRing {
  0%, 100% { opacity: .22; r: 17; }
  50%      { opacity: .45; r: 18.4; }
}
@keyframes windSettle {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
.windrow svg .wr-ring { transform-origin: 20px 20px; }
.windrow svg .wr-arrow { animation: windSettle .55s cubic-bezier(.22,1,.36,1) both; transform-box: fill-box; transform-origin: center; }

/* bölüm başlıkları ve kartlarda ince cila */
.sect h3 { transition: color .2s; }
.tr-card, .pcard, .stat-tile { transition: border-color .18s, box-shadow .18s, transform .18s; }
.tr-card:hover, .pcard:hover { border-color: color-mix(in srgb, var(--mvfr) 40%, var(--panel-border)); }
.raw { transition: border-color .18s; }
.raw:hover { border-color: color-mix(in srgb, var(--mvfr) 45%, var(--panel-border)); }

/* ---------- Açılır panel: yumuşak açılış ---------- */

/* panel içindeki fiyat cetveli */
.panel-pricing { max-width: 1500px; margin: 26px auto 0; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pp-card {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; text-decoration: none;
  background: var(--mono-bg); border: 1px solid var(--panel-border); border-radius: 13px;
  color: var(--text); transition: all .16s;
}
.pp-card:hover { border-color: var(--mvfr); }
.pp-card.featured { border-color: var(--mvfr); box-shadow: inset 0 0 0 1px var(--mvfr); }
.pp-name { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); font-weight: 700; }
.pp-price { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.pp-price small { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.pp-mods { font-size: 11px; color: var(--text-dim); }

/* ---------- Giriş / kayıt sayfası ---------- */
/* ---------- Giriş / hesap sayfası ----------
   İKİ AYRI TEMA: gündüz = aydınlık gökyüzü zemini + BEYAZ kart,
   gece = koyu lacivert zemin + koyu kart. Kurumsal renk: havacılık mavisi
   (#0284c7 / #38bdf8), mor yok. Ortak yapı burada, temaya özgü renkler
   aşağıdaki iki blokta. */
.auth-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.auth-codes { position: absolute; inset: 0; }
.ac-line {
  position: absolute; left: 0; white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  letter-spacing: .4px;
  animation-name: acDrift; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes acDrift { from { transform: translateX(105vw); } to { transform: translateX(-110%); } }

.page.auth-page { background: transparent; }
.auth-page { position: relative; z-index: 1; }
.auth-main { max-width: 460px; display: flex; align-items: center; min-height: calc(100vh - 160px); }

.auth-card {
  position: relative; overflow: hidden;
  width: 100%; padding: 30px 28px 20px; border-radius: 18px;
  animation: cellIn .55s cubic-bezier(.22,1,.36,1) both;
}
/* Aksan: kartın üst kenarına yapışık ince şerit */
.auth-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 48%, transparent 92%);
}
.auth-brand {
  display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: 14.5px; font-weight: 800; letter-spacing: .3px;
}
.auth-brand img { border-radius: 8px; }
.auth-brand b { color: #0ea5e9; }
.auth-brand em { font-style: normal; margin-left: auto; font-size: 11px; font-weight: 600; opacity: .75; }

.fld-in { position: relative; display: block; }
.fld-in svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none; opacity: .6;
}
.auth-card .fld input {
  width: 100%; height: 44px; padding: 0 13px 0 38px; border-radius: 11px;
  font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.auth-card .fld input:focus { outline: 0; }

.auth-cta {
  width: 100%; margin: 4px 0 6px; border: 0; cursor: pointer; font-family: inherit;
  height: 44px; border-radius: 11px; font-size: 14px; font-weight: 700; letter-spacing: .2px;
  background: #0284c7; color: #fff;
  box-shadow: 0 8px 20px -8px rgba(2, 132, 199, 0.6);
  transition: background .15s, transform .05s;
}
.auth-cta:hover { background: #0272ac; }
.auth-cta:active { transform: translateY(1px); }

.auth-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
}
.auth-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.auth-lede { margin: 8px 0 20px; font-size: 12.5px; line-height: 1.6; }
.auth-alt { font-size: 12.5px; text-align: center; }
.auth-alt a { color: #0284c7; text-decoration: none; font-weight: 700; }
.auth-alt-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 14px;
}
.auth-card .fld-sel {
  background: transparent; border-radius: 9px; height: 32px;
  font-size: 12px; padding: 0 8px; font-family: inherit;
}
.auth-note {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 11px; line-height: 1.35; font-weight: 600; text-align: end; opacity: .8;
}
.auth-note svg { flex: none; }

/* ---- GÜNDÜZ: aydınlık gökyüzü zemini, beyaz kart ---- */
body[data-theme="light"] .auth-bg {
  background:
    radial-gradient(900px 520px at 80% -8%, rgba(56, 189, 248, 0.35), transparent 62%),
    radial-gradient(720px 460px at -8% 106%, rgba(2, 132, 199, 0.18), transparent 60%),
    linear-gradient(165deg, #eaf4fb 0%, #d7e9f7 55%, #c3dcf0 100%);
}
body[data-theme="light"] .ac-line { color: #4b6b8a; }
body[data-theme="light"] .auth-page .page-top {
  background: rgba(255, 255, 255, 0.72); border-bottom-color: rgba(2, 132, 199, 0.14);
}
body[data-theme="light"] .auth-card {
  background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); color: #0f172a;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 26px 60px -20px rgba(12, 45, 80, .35);
}
body[data-theme="light"] .auth-brand { color: #0f172a; }
body[data-theme="light"] .auth-h1 { color: #0b1220; }
body[data-theme="light"] .auth-card .lede { color: #5b6b82; }
body[data-theme="light"] .auth-card .fld span { color: #64748b; }
body[data-theme="light"] .auth-card .fld input {
  background: #f4f8fc; border: 1px solid #d5e1ee; color: #0f172a;
}
body[data-theme="light"] .auth-card .fld input:focus {
  border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14);
}
body[data-theme="light"] .auth-badge {
  background: #1D4ED8; color: #fff; border: 1px solid #1D4ED8;
}
body[data-theme="light"] .auth-alt-satir { border-top: 1px solid rgba(15, 23, 42, 0.08); }
body[data-theme="light"] .auth-card .fld-sel { border: 1px solid #d5e1ee; color: #475569; }
body[data-theme="light"] .auth-note { color: #64748b; }

/* ---- GECE: koyu lacivert zemin, koyu kart ---- */
body[data-theme="dark"] .auth-bg {
  background:
    radial-gradient(760px 420px at 82% -12%, rgba(14, 165, 233, 0.14), transparent 62%),
    radial-gradient(680px 420px at -10% 112%, rgba(34, 211, 238, 0.07), transparent 60%),
    linear-gradient(168deg, #0a1220 0%, #0c1830 58%, #0f2140 100%);
}
body[data-theme="dark"] .ac-line { color: #2f4166; }
body[data-theme="dark"] .auth-page .page-top {
  background: rgba(10, 18, 32, 0.55); border-bottom-color: rgba(56, 189, 248, 0.16);
}
body[data-theme="dark"] .auth-page, body[data-theme="dark"] .auth-page .t1,
body[data-theme="dark"] .auth-page .barlink { color: #e2e8f0; }
body[data-theme="dark"] .auth-page .t2 { color: #8494ad; }
body[data-theme="dark"] .auth-card {
  background: linear-gradient(180deg, rgba(19, 28, 48, 0.96), rgba(12, 18, 34, 0.97));
  border: 1px solid rgba(148, 163, 184, 0.14); color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}
body[data-theme="dark"] .auth-brand { color: #cbd5e8; }
body[data-theme="dark"] .auth-h1 { color: #fff; }
body[data-theme="dark"] .auth-card .lede { color: #94a1bd; }
body[data-theme="dark"] .auth-card .fld span { color: #7c89ab; }
body[data-theme="dark"] .auth-card .fld input {
  background: rgba(2, 6, 23, 0.5); border: 1px solid #26314f; color: #e2e8f0;
}
body[data-theme="dark"] .auth-card .fld input:focus {
  border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
body[data-theme="dark"] .auth-card .fld input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #0d1428 inset; -webkit-text-fill-color: #e2e8f0;
}
body[data-theme="dark"] .auth-badge {
  background: #1D4ED8; color: #fff; border: 1px solid #1D4ED8;
}
body[data-theme="dark"] .auth-alt { color: #94a1bd; }
body[data-theme="dark"] .auth-alt a { color: #38bdf8; }
body[data-theme="dark"] .auth-alt-satir { border-top: 1px solid rgba(148, 163, 184, 0.1); }
body[data-theme="dark"] .auth-card .fld-sel { border: 1px solid #26314f; color: #94a1bd; }
body[data-theme="dark"] .auth-note { color: #5b6b92; }

/* ayarlar menüsü */
.setmenu-wrap { position: relative; }
.setmenu {
  position: absolute; top: 56px; right: 0; z-index: 30; display: none; min-width: 232px; padding: 10px;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 14px; box-shadow: var(--shadow);
}
.setmenu.open { display: block; }
.setsel {
  width: 100%; height: 38px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--panel-border); background: var(--input-bg); color: var(--text);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; margin-bottom: 4px;
}
.setsel:hover { border-color: var(--mvfr); }

.ub-raw {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; line-height: 1.5;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; white-space: pre-wrap; word-break: break-word;
}

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  /* Telefonda da yapışık: kenar boşluğu yok, köşe yuvarlaması yok */
  .topbar { top: 0; left: 0; right: 0; }
  .bar { height: auto; padding: 7px 10px; gap: 7px; border-radius: 0; }
  .brand img { width: 30px; height: 30px; }
  .searchbox, .barbtn, .barlink { height: 38px; }
  .barbtn { width: 38px; border-radius: 11px; }
  .searchbox { border-radius: 11px; padding: 0 11px; }
  .searchbox input { font-size: 13.5px; }
  .barlink { padding: 0 10px; font-size: 12px; }
  /* Plans mobilde gizli — açılır panelde ve ayarlar menüsünde zaten var */
  .bar .barlink[href="/pricing"] { display: none; }
  /* Uçuş kuralı şeridi: tam genişlik, dört eşit kutu, barın alt kenarına oturur */
  .legend {
    gap: 4px; margin: 1px -10px 0; padding: 0 10px 6px; width: calc(100% + 20px);
  }
  .legend .chip {
    flex: 1; justify-content: center; padding: 6px 4px; font-size: 10.5px; gap: 5px;
    border-radius: 8px;
  }
  .legend .chip b { font-size: 12.5px; }
  .tr-head { gap: 8px; }
  .tr-custom { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .tr-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
  .st-v { font-size: 18px; }
  .uni-chips { gap: 5px; }
  .uni-chip { padding: 5px 9px; font-size: 11px; }
      .auth-card { padding: 22px 20px; }
  .auth-h1 { font-size: 23px; }
  .rwy-box { padding: 8px; }
  .meteo-labels { width: 92px; }
  .meteo-full .meteo-labels { width: 116px; }
  .meteo-labels div { font-size: 10px; padding: 0 3px 0 6px; }
  .ro-grid { grid-template-columns: 1fr 1fr; gap: 5px 10px; }
  .al-row { grid-template-columns: 50px 38px 1fr 34px; font-size: 10.5px; }
  .al-row .al-cld { display: none; }
  .pp-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .modal-head { padding: 10px 12px; }
  .modal-title { font-size: 15px; }
}
@media (max-width: 420px) {
  .legend .chip { padding: 5px 7px; font-size: 11px; }
  .brand-txt { display: none; }
}

/* ---------- Ayrı veri panelleri ---------- */
.view-toggle { display: flex; gap: 2px; background: var(--mono-bg); border: 1px solid var(--panel-border); border-radius: 9px; padding: 2px; }
.view-toggle button {
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 13px; padding: 4px 10px; border-radius: 7px; line-height: 1;
}
.view-toggle button.active { background: var(--mvfr); color: #fff; }

/* her büyüklük kendi satırında — tek sütun, geniş ve okunur */
.pn-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pn-card {
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 13px; padding: 12px 13px 10px; transition: border-color .16s;
}
.pn-card:hover { border-color: color-mix(in srgb, var(--mvfr) 45%, var(--panel-border)); }
.pn-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.pn-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.pn-title { font-size: 12.5px; font-weight: 700; }
.pn-now { margin-left: auto; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pn-trend { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pn-chart { position: relative; }
.pn-chart canvas { display: block; max-width: 100%; }
.pn-foot {
  font-size: 10.5px; color: var(--text-dim); margin-top: 6px;
  padding-top: 7px; border-top: 1px solid var(--panel-border);
}
.pn-foot b { color: var(--text); font-weight: 600; }
@media (max-width: 720px) { .pn-grid { grid-template-columns: 1fr; } }

.mc-spread { font-size: 11px; color: var(--text-dim); margin-top: 5px; }
.mdl-outlook {
  margin: 10px 0; padding: 10px 12px; border-radius: 11px;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
}
.ol-head { font-size: 11.5px; font-weight: 700; margin-bottom: 8px; color: var(--mvfr); }
.ol-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; }
.ol-row {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px; border-radius: 9px; background: var(--panel-solid);
  border: 1px solid var(--panel-border);
}
.ol-t { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ol-arrow { font-size: 15px; color: var(--mvfr); line-height: 1; display: inline-block; }
.ol-d { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ol-s { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ol-s small { font-size: 9px; font-weight: 500; color: var(--text-dim); }

/* ---------- 3B atmosfer profili ---------- */
/* Kart zemini temayı izler: açık modda siyah bant kalmasın */
#cloud3d .modal-card { background: var(--panel-solid); }
[data-theme="dark"] #cloud3d .modal-card { background: #05080f; }
/* Sahne yüksekliği SABİT: eskiden flex:1 idi ve panel içeriği sonradan
   dolduğu için her zoom basışında farklı yükseklik ölçülüyordu (sahne zıplıyordu).
   METAR/TAF periyot şeridi de artık sahnenin İÇİNDE, hemen altında. */
.c3-stage {
  flex: none; position: relative; display: flex; flex-direction: column;
  height: clamp(320px, 62vh, 820px);
}
.c3-scene { flex: 1; min-height: 0; position: relative; }
.c3-scene canvas { display: block; width: 100%; height: 100%; }
/* Veri paneli artık kendi içinde 22vh'lik pencereye sıkışmıyor: kart
   bütün olarak kaydığı için panel ne kadarsa o kadar uzar. */
.c3-panel {
  flex: none; padding: 10px 16px 12px;
  background: var(--panel-solid); border-top: 1px solid var(--panel-border);
}
.c3-raw {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.5;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 9px; padding: 9px 11px; margin-bottom: 10px; white-space: pre-wrap; word-break: break-word;
}
.c3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 7px; margin-bottom: 12px; }
.c3-cell {
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px;
}
.c3-cell span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); font-weight: 700; }
.c3-cell b { font-size: 14px; font-weight: 700; }
.c3-levels { display: flex; flex-direction: column; gap: 1px; }
.c3-lvl {
  display: grid; grid-template-columns: 84px 1fr 46px 62px; gap: 8px;
  font-size: 11.5px; padding: 4px 2px; border-bottom: 1px solid var(--panel-border);
  font-variant-numeric: tabular-nums;
}
.c3-lvl:last-child { border-bottom: 0; }
.c3-alt { font-weight: 700; }
.c3-wind { color: var(--text-dim); }
.c3-cld { color: var(--text-dim); text-align: right; }
.c3-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) {
  .c3-panel { padding: 10px 12px 14px; }
  .c3-lvl { grid-template-columns: 68px 1fr 40px; }
  .c3-lvl .c3-cld { display: none; }
}

.pn-chart { position: relative; }
.pn-tip {
  position: absolute; top: 2px; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 4px 9px; font-size: 11px; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: 3;
}
.pn-tip .pt-t { display: block; font-size: 9.5px; color: var(--text-dim); margin-bottom: 1px; }
.pn-chart canvas { cursor: crosshair; }

.c3-zoom {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(8,14,28,0.72); backdrop-filter: blur(10px); z-index: 3;
}
.c3-zoom button {
  border: 0; background: transparent; color: #cbd5e1; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  transition: all .14s;
}
.c3-zoom button:hover { color: #fff; background: rgba(255,255,255,.1); }
.c3-zoom button.active { background: var(--mvfr); color: #fff; }
@media (max-width: 720px) { .c3-zoom { top: 8px; gap: 2px; } .c3-zoom button { padding: 4px 8px; font-size: 10px; } }

/* tıklanan saatin tüm panel değerleri */
.pn-readout {
  max-height: 0; overflow: hidden; padding: 0 16px; margin-bottom: 0;
  border-radius: 13px; background: var(--mono-bg); border: 1px solid transparent;
  transition: max-height .32s ease, padding .32s ease, margin .32s ease, border-color .3s;
}
.pn-readout.on { max-height: 74vh; padding: 14px 16px; margin-bottom: 12px; border-color: var(--mvfr); overflow-y: auto; }
.pr-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
  position: sticky; top: -14px; z-index: 2;
  padding: 10px 0 9px; background: var(--mono-bg);
  border-bottom: 1px solid var(--panel-border);
}
.pr-head b { font-size: 14px; font-weight: 800; color: var(--mvfr); }
.pr-head small { font-size: 10px; color: var(--text-dim); font-weight: 600; }
.pr-x {
  margin-left: auto; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: #ef4444; color: #fff; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; transition: transform .15s, background .15s;
}
.pr-x:hover { background: #B91C1C; }
.pr-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; align-items: start; }
.pr-sec {
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 11px; padding: 9px 12px 10px;
}
.pr-sec h4 {
  display: flex; align-items: center; gap: 6px; margin: 0 0 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-dim);
}
.pr-ico { font-size: 12px; }
.pr-line {
  display: flex; align-items: baseline; gap: 7px;
  padding: 3px 0; border-top: 1px solid color-mix(in srgb, var(--panel-border) 55%, transparent);
}
.pr-sec .pr-line:first-of-type { border-top: 0; }
.pr-k { font-size: 11px; color: var(--text-dim); flex: 1 1 auto; }
.pr-v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pr-n { font-size: 9.5px; color: var(--text-dim); font-weight: 600; }
.pr-arrow { display: inline-block; font-style: normal; font-size: 12px; }
.pr-sec .pr-raw { margin: 0; }
@media (max-width: 560px) { .pr-body { grid-template-columns: 1fr; } }
.pr-raw {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; line-height: 1.5;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 9px; padding: 8px 10px; margin-bottom: 10px; white-space: pre-wrap; word-break: break-word;
}
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; }
.pr-cell {
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-left: 3px solid var(--c, var(--mvfr)); border-radius: 9px; padding: 8px 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.pr-cell span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 700; border-left-color: var(--c); }
.pr-cell b { font-size: 14px; font-weight: 700; }
.pr-cell em { font-style: normal; font-size: 11px; color: var(--text-dim); font-weight: 500; }

/* meteogram saat seçim kutusu */
.mg-pick {
  position: fixed; z-index: 80; width: 224px; padding: 10px; opacity: 0; pointer-events: none;
  transform: translateY(-6px); transition: opacity .16s, transform .16s;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.42);
}
.mg-pick.on { opacity: 1; pointer-events: auto; transform: none; }
.mp-head { display: flex; align-items: center; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.mp-x {
  margin-left: auto; border: 0; background: transparent; color: var(--text-dim);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px;
}
.mp-q { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.mp-btn {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 6px;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: all .14s;
}
.mp-btn:hover { border-color: var(--mvfr); color: var(--mvfr); }
.mp-btn svg { width: 16px; height: 16px; flex: none; }

/* saatlik brifing penceresi */
.hour-brief {
  position: fixed; inset: 0; z-index: 78; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(2,6,23,.6); backdrop-filter: blur(4px);
}
.hour-brief.on { display: flex; }
.hb-card {
  width: min(620px, 100%); max-height: 82vh; overflow-y: auto; padding: 20px 22px;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 18px; box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.hb-head { display: flex; align-items: center; font-size: 15px; margin-bottom: 12px; }
.hb-text { font-size: 13.5px; line-height: 1.68; color: var(--text-dim); margin-bottom: 16px; }

.wx-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.wx-overlay canvas { display: block; }

/* trend rozeti — yön bakışta anlaşılsın */
.pn-trend {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px;
  border-radius: 999px; white-space: nowrap;
  background: var(--mono-bg);
  border: 1px solid var(--panel-border);
}
.pn-trend .tb-ico { font-style: normal; font-size: 12px; color: var(--tc, var(--text-dim)); line-height: 1; }
.pn-trend .tb-body { display: flex; flex-direction: column; line-height: 1.15; }
.pn-trend b { font-size: 11.5px; font-weight: 800; color: var(--tc); }
.pn-trend small { font-size: 8.5px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pn-trend.flat { background: transparent; border-color: var(--panel-border); }
.pn-trend.flat .tb-txt { font-size: 9.5px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; }
@keyframes trendUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes trendDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }

/* 3B profil: METAR / TAF periyot şeridi */
.c3-periods {
  flex: none; display: flex; align-items: center; gap: 6px; overflow-x: auto;
  padding: 9px 14px; background: var(--panel-solid);
  border-top: 1px solid var(--panel-border); scrollbar-width: thin;
}
.c3-periods:empty { display: none; }
.cp-lab {
  font-size: 9px; font-weight: 800; letter-spacing: 1px; color: var(--text-dim);
  text-transform: uppercase; padding: 0 4px; flex: none;
}
.cp-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 9px; padding: 5px 10px; font-family: inherit; cursor: pointer; transition: all .14s;
}
.cp-chip b { font-size: 10.5px; font-weight: 800; }
.cp-chip span { font-size: 9px; color: var(--text-dim); white-space: nowrap; }
.cp-chip:hover { border-color: var(--mvfr); }
.cp-chip.on { border-color: #1D4ED8; background: var(--panel-solid); box-shadow: inset 0 0 0 1px #1D4ED8, 0 2px 8px rgba(16,24,40,.10); }
.cp-chip.taf { border-left: 3px solid #a78bfa; }
.cp-chip.metar { border-left: 3px solid #22c55e; }
.mm-toggle.sub { padding-left: 26px; font-size: 11.5px; color: var(--text-dim); }
/* Üyeye özel katman rozeti (yağış radarı): kilit yerine düz bir etiket —
   dolu lacivert + beyaz, tint yok. */
.mm-kilit {
  margin-left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; padding: 2px 6px; border-radius: 5px;
  background: var(--brand-btn); color: #fff; text-decoration: none;
}
.mm-toggle input:disabled + .mm-kilit, .mm-toggle input:disabled { cursor: pointer; }

/* pist bölümü — en iyi pist kartı, yan rüzgar ölçeği, uygunluk halkası */
.rwy-best {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px; border-radius: 10px;
  background: var(--mono-bg);
  border: 1px solid var(--panel-border); border-left: 3px solid var(--brand);
}
.rb-l { display: flex; flex-direction: column; gap: 1px; }
/* Etiket nötr: eskiden yeşildi ve altındaki açık zeminle tint-on-tint
   görünüyordu. Durum rengi yalnız DOLU rozetlerde (BEST/VFR) kalır. */
.rb-k { font-size: 8.5px; font-weight: 800; letter-spacing: 1px; color: var(--text-dim); }
.rb-v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.rb-h { font-size: 10.5px; color: var(--text-dim); }
.rb-r { display: flex; gap: 14px; margin-left: auto; }
.rb-item { display: flex; flex-direction: column; gap: 1px; }
.rb-item span { font-size: 8.5px; font-weight: 800; letter-spacing: .8px; color: var(--text-dim); }
.rb-item b { font-size: 17px; font-weight: 800; line-height: 1; }
.rb-item small { font-size: 9.5px; font-weight: 600; color: var(--text-dim); }

.xw-bar {
  display: block; height: 4px; margin-top: 4px; border-radius: 2px;
  background: var(--panel-border); overflow: hidden; max-width: 96px;
}
.xw-bar i { display: block; height: 100%; border-radius: 2px; transition: width .3s; }
.fitcell { text-align: center; }
.fit-ring {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(var(--vfr) calc(var(--p) * 1%), var(--panel-border) 0);
  position: relative;
}
.fit-ring::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mono-bg);
}
.fit-ring b { position: relative; z-index: 1; font-size: 9.5px; font-weight: 800; }

/* ---- eşik bandı lejantı (trend panelleri) ---- */
.pn-bands {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin: 7px 0 2px; padding-top: 7px;
  border-top: 1px dashed var(--panel-border);
}
.bl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--panel-border);
  font-size: 9.5px; line-height: 1.35; white-space: nowrap;
}
.bl-chip i {
  width: 9px; height: 9px; border-radius: 3px; flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22) inset;
}
.bl-chip b { font-weight: 700; color: var(--text); }
.bl-chip small { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pn-now { display: inline-flex; align-items: baseline; gap: 5px; }
.pn-band {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  color: var(--text); background: var(--mono-bg);
  border: 1px solid var(--bc);
}
@media (max-width: 560px) {
  .bl-chip small { display: none; }
  .bl-chip { font-size: 9px; padding: 2px 6px 2px 4px; }
}

/* ---------- Reklam kapları (yalnız ücretsiz kullanıcıya) ----------
   `uye` sınıfı <html>'e boyamadan ÖNCE eklenir (worker/reklam.js), böylece
   üyede reklam yeri bir kare bile görünmez. Kap SABİT YÜKSEKLİK almaz:
   reklam gelmezse boş çerçeve kalmasın; geldiğinde de sayfayı aşağı itmesin
   diye min-height ile yer ayrılır. */
.uye .reklam { display: none !important; }
.reklam {
  margin: 0 0 11px; padding: 8px 10px 10px; border-radius: 12px;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  overflow: hidden;
}
/* Reklam DOLMAZSA kap tamamen kalkar. AdSense dolmayan birime
   data-ad-status="unfilled" yazar; yoksa sayfada "Reklam" yazan boş bir
   çerçeve kalır ve bu hem çirkin hem de politika açısından kötü görünür. */
.reklam:has(ins[data-ad-status="unfilled"]) { display: none; }
.reklam-et {
  display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dim); opacity: .7; margin-bottom: 6px;
}
/* Yer AYRILIR (CLS): reklam sonradan gelince sayfa zıplamasın. Dolmazsa
   kabın tamamı zaten yukarıdaki :has kuralıyla kalkıyor. */
.reklam .adsbygoogle { display: block; min-height: 100px; }
/* "Üye ol, reklamsız gez" satırı sayfada YALNIZ BİR KEZ ve reklamın DIŞINDA
   durur: her birimin dibine konsaydı reklamla karışır, yanıltıcı yerleşim
   sayılırdı. */
.reklam-uye {
  display: inline-block; margin-top: 9px; font-size: 11.5px; font-weight: 700;
  color: var(--brand); text-decoration: none;
}
.reklam-uye:hover { text-decoration: underline; }

/* ---- istasyonu olmayan meydan sayfası ----
   TASARIM HATASI (27 Eyl 2026'da bulundu): bu sayfanın kabuğu `.seo-page`,
   `.seo-head`, `.seo-main`, `.seo-sub`, `.seo-back` sınıflarını kullanıyor
   ama hiçbiri stil dosyasında TANIMLI DEĞİLDİ — METAR yayımlamayan her
   meydanda (dizinin büyük bölümü) sayfa tarayıcının varsayılan biçimiyle,
   kenar boşluksuz ve altı çizili mavi bağlantılarla çıkıyordu. */
.seo-page { background: var(--bg); color: var(--text); min-height: 100%; }
.seo-head {
  max-width: 860px; margin: 0 auto; padding: 22px 20px 14px;
  border-bottom: 1px solid var(--panel-border);
}
.seo-back {
  display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 700;
  color: var(--brand); text-decoration: none;
}
.seo-head h1 { font-size: clamp(21px, 3vw, 28px); font-weight: 800; letter-spacing: -0.4px; line-height: 1.15; }
.seo-head h1 small { font-size: 0.5em; font-weight: 700; color: var(--text-dim); letter-spacing: 1px; }
.seo-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; font-weight: 600; }
.seo-main { max-width: 860px; margin: 0 auto; padding: 16px 20px 40px; }
.seo-main section { margin-top: 18px; }
.seo-main h2 {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-dim); margin-bottom: 9px;
}
.seo-main p { font-size: 13px; line-height: 1.6; color: var(--text-dim); max-width: 80ch; }

.seo-note {
  background: var(--mono-bg);
  border: 1px solid var(--panel-border); border-left: 3px solid var(--brand);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; line-height: 1.6; font-size: 13px;
}
.near-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.near-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 11px; padding: 10px 13px;
}
.near-row a { font-weight: 700; text-decoration: none; color: var(--text); }
.near-row a:hover { text-decoration: underline; }
.near-ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 2px; }
.near-km { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.near-row .cat-pill {
  font-size: 10px; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 999px;
}
.near-row code {
  flex: 1 1 100%; font-size: 11px; color: var(--text-dim);
  overflow-x: auto; white-space: nowrap;
}

/* ---- saatlik derin havacılık brifingi ---- */
.hb-deep {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-border);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 10px;
  align-items: start;
}
.hb-sec {
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 11px; padding: 9px 12px 10px;
}
.hb-sec h5 {
  margin: 0 0 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--mvfr);
}
.hb-sec ul { margin: 0; padding-left: 15px; display: flex; flex-direction: column; gap: 4px; }
.hb-sec li { font-size: 11.5px; line-height: 1.5; color: var(--text); }
.hb-sec li::marker { color: var(--text-dim); }
@media (max-width: 560px) { .hb-deep { grid-template-columns: 1fr; } }

/* "+N h" — beklenti listesini aşağıya doğru açan yerel açılır kutu */
.ol-more { margin-top: 7px; }
.ol-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--mono-bg);
  border: 1px solid var(--panel-border);
  font-size: 11px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; user-select: none;
}
.ol-more > summary::-webkit-details-marker { display: none; }
.ol-more > summary svg { width: 13px; height: 13px; transition: transform .25s; }
.ol-more[open] > summary svg { transform: rotate(180deg); }
.ol-more > summary:hover { background: var(--hover); }
.ol-more .ol-rows { margin-top: 7px; }

/* Dar ekranda açılır menüler: düğmeye right:0 ile hizalanınca 232 px genişlik
   ekranın soluna taşıyordu (menü görünmüyordu). Telefonda tam genişlik,
   üst barın hemen altında. */
@media (max-width: 720px) {
  /* Sarmalayıcıya göre right:0 ile hizalanınca 232 px genişlik ekranın soluna
     taşıyordu (menü görünmüyordu). Telefonda viewport'a sabitlenir. */
  .mapmenu-wrap > .mapmenu,
  .setmenu-wrap > .setmenu {
    position: fixed;
    top: calc(var(--topbar-h, 120px) + 6px);
    left: 10px; right: 10px;
    min-width: 0; width: auto;
    max-height: calc(100dvh - var(--topbar-h, 120px) - 24px);
    overflow-y: auto;
  }
}

/* seçili TAF periyodu ham metinde vurgulanır */
.c3-mark {
  background: #1D4ED8;
  color: #fff; border-radius: 4px; padding: 1px 3px;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, .55) inset;
}

/* Yatay kaydırmalı meteogram şeridi dikey tekerleği yutmasın:
   fare tekerleği sayfayı kaydırmaya devam etsin. */
.meteo-scroll { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }

/* Gün brifinginin derin bölümleri — meteogram altındaki kutu */
.brief-deep {
  margin-top: 10px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; align-items: start;
}
.brief-deep section {
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 8px 11px 9px;
}
.brief-deep h5 {
  margin: 0 0 6px; font-size: 9px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--mvfr);
}
.brief-deep ul { margin: 0; padding-left: 15px; display: flex; flex-direction: column; gap: 3px; }
.brief-deep li { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 560px) { .brief-deep { grid-template-columns: 1fr; } }

/* ---------- Mobil dokunma ve dar ekran uyumu ---------- */
@media (max-width: 720px) {
  /* Dokunma hedefi en az 40 px: 27 px'lik küçük düğmeler parmakla zor seçiliyordu */
  .cb-btn {
    min-height: 40px; padding: 9px 13px; font-size: 12px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .rank-tab, .tr-range, .uni-chip, .cp-chip { min-height: 38px; }
  .starbtn { min-width: 38px; min-height: 38px; }
  /* Yatay kaydırmalı şeritler parmakla akıcı olsun */
  .c3-periods, .meteo-scroll, .rank-tabs, .tr-ranges { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 380px) {
  /* Çok dar ekranda meteogram şeridine daha fazla yer bırak */
  .meteo-labels { width: 84px; }
  .meteo-full .meteo-labels { width: 100px; }
  .meteo-labels div { font-size: 9px; padding: 0 2px 0 5px; }
  .cb-btn { padding: 9px 10px; font-size: 11.5px; }
}

/* ---------- Mobil üst bar düzeni ---------- */
@media (max-width: 720px) {
  /* Marka solda, menü düğmeleri ortada, Giriş en sağda */
  .bar { flex-wrap: wrap; align-items: center; }
  .bar .brand { order: 1; }
  .bar .bar-spacer { order: 2; display: block; flex: 1; }
  .bar .mapmenu-wrap { order: 3; }
  .bar .setmenu-wrap { order: 4; }
  .bar #themebtn { order: 5; }
  .bar .barlink { order: 6; margin-left: auto; }
  .bar #acct-link { order: 7; margin-left: 6px; }
  .searchbox { order: 9; flex: 1 1 100%; }
  .legend { order: 10; }
}

/* Brifing kutusu — gün / bu saat / sonraki 3 saat blokları */

/* ---------- Çözümlenmiş METAR panosu (görsel göstergeler) ---------- */
.dgrid {
  display: grid; gap: 10px;
  /* Göstergeler eşit hücrelere otursun: tek bir kart satırı kaplamasın */
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.dgcard {
  background: var(--mono-bg); border: 1px solid var(--panel-border); border-radius: 14px;
  padding: 12px 14px 14px; display: flex; flex-direction: column; align-items: center;
  min-width: 0;
  animation: dg-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* Kartlar soldan sağa dalga gibi belirir; her verinin kendi animasyonu içeride sürer */
.dgcard:nth-child(2) { animation-delay: 0.06s; }
.dgcard:nth-child(3) { animation-delay: 0.12s; }
.dgcard:nth-child(4) { animation-delay: 0.18s; }
.dgcard:nth-child(5) { animation-delay: 0.24s; }
.dgcard:nth-child(6) { animation-delay: 0.3s; }
.dgcard:nth-child(n+7) { animation-delay: 0.36s; }
@keyframes dg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dgcard { animation: none; }
}
.dgcard.wide { align-items: stretch; }
.dg-t {
  font-size: 10px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px; align-self: flex-start;
}
.dg-svg { width: 100%; max-width: 190px; height: auto; display: block; margin: auto; }

/* Rüzgar kartı — panonun en üstünde, kadran + büyük okunaklı değerler yan yana */
.dg-windcard .dgw-row { display: flex; align-items: center; gap: 16px; }
.dg-windcard .dg-svg { max-width: 172px; flex: none; margin: 0; }
.dgw-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dgw-dir { display: flex; align-items: baseline; gap: 8px; }
.dgw-dir b { font-size: 32px; font-weight: 800; letter-spacing: 0.5px; color: var(--text); }
.dgw-dir span { font-size: 13px; font-weight: 800; color: var(--text-dim); letter-spacing: 1px; }
.dgw-spd { display: flex; align-items: baseline; gap: 5px; }
.dgw-spd b { font-size: 26px; font-weight: 800; color: var(--text); }
.dgw-spd small { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.dgw-spd em { font-style: normal; font-size: 15px; font-weight: 800; color: #fb923c; margin-left: 6px; }
.dgw-comp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dgwc {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px;
  border-radius: 999px; border: 1.4px solid var(--c, var(--panel-border));
  background: var(--mono-bg);
  font-size: 10.5px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.dgwc b { font-size: 16px; font-weight: 800; color: var(--c, var(--text)); }
.dgwc small { font-size: 9.5px; font-weight: 700; }
.dgwc em { font-style: normal; font-size: 11px; font-weight: 800; color: #fb923c; }
.dgwc.rwy { border-color: var(--accent); color: var(--text); }
.dgwc.rwy b { color: var(--accent); }
@media (max-width: 480px) {
  .dg-windcard .dgw-row { gap: 10px; }
  .dg-windcard .dg-svg { max-width: 132px; }
  .dgw-dir b { font-size: 26px; }
  .dgw-spd b { font-size: 21px; }
}
.dg-scale { width: 100%; max-width: 400px; height: auto; display: block; margin: auto; }
.dg-sub {
  margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--text);
  text-align: center; line-height: 1.35;
}
.dg-wx { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.45; }
.dg-clear {
  display: flex; align-items: center; gap: 8px; color: #22c55e;
  font-size: 13px; font-weight: 700; padding: 6px 0 2px;
}
.dg-clear svg { width: 22px; height: 22px; flex: none; }

@media (max-width: 620px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dgcard { padding: 8px 9px 10px; border-radius: 12px; }
  .dg-svg { max-width: 130px; }
  /* dar ekranda görüş/tavan/sıcaklık/bulut tam satır: eksen okunaklı kalsın */
  .dgcard.wide { grid-column: 1 / -1; }
}

/* Brifing kutusundan 3B profile geçiş */
.hb-3d {
  margin-left: auto; margin-right: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; min-height: 36px; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; border: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
}
.hb-3d svg { width: 15px; height: 15px; }
.hb-3d:hover { filter: brightness(1.08); }

/* Ham METAR ve TAF — panelin en üstünde, etiketli iki satır */
/* Test hesabı şeridi — turkeypilots gibi test modülü açık kullanıcılarda */
#test-band {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  padding: 6px 12px; text-align: center;
  background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 14px, #b45309 14px, #b45309 28px);
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); pointer-events: none;
}

/* ---------- Paylaşım kartı: çözümlenmiş kutular + pist + ham rapor tek kapta ----------
   Ekran görüntüsü düğmesi tam bu kabı PNG'ye çevirir; kart bu yüzden kendi
   zeminini ve kimlik satırını taşır — görüntü tek başına anlaşılır olmalı. */
.shotcard {
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 14px 14px 10px; margin-bottom: 14px;
}
.shot-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.sh-id { display: flex; align-items: center; gap: 8px; }
.sh-id b { font-size: 19px; font-weight: 800; letter-spacing: 0.4px; color: var(--text); }
.sh-id .catbadge { font-size: 10px; padding: 3px 8px; }
.sh-meta { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
/* METAR kutusu geniş açılır: diyagram esas öge, yanında tablo — kaydırma az */
.sheet[data-kind="metar"] { width: min(900px, 100vw); }
.sheet-body .shot-rwy .rwy-box { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; padding: 0; }
.sheet-body .shot-rwy .rwy-svg { flex: 1 1 380px; max-width: 480px; min-width: 300px; width: 100%; height: auto; margin: 0 auto; }
.sheet-body .shot-rwy .rwy-side { flex: 1 1 300px; min-width: 0; margin-top: 0; }
/* Kart içinde veriler BÜYÜK okunur: rüzgar satırı, en iyi pist ve tablo */
.shot-rwy .rwy-wind { font-size: 16.5px; }
.shot-rwy .rb-v { font-size: 34px; }
.shot-rwy .rb-item b { font-size: 20px; }
.shot-rwy .rb-item span { font-size: 11px; }
.shot-rwy .rwy-tbl { font-size: 13px; }
.shot-rwy .rwy-tbl td b { font-size: 16px; }
.shot-share { margin-inline-start: auto; padding: 6px 12px; min-height: 32px; }
.shot-rwy { margin-top: 12px; }
/* En son METAR ve TAF kartın en üstünde ve EN BÜYÜK ögesi: görselin omurgası */
.shot-raw-big { margin: 0 0 12px; }
.shot-raw-big .rawline code { font-size: 15.5px; line-height: 1.6; font-weight: 500; }
.shot-raw-big .rawtag { font-size: 11px; padding: 4px 10px; }
/* Son 5 METAR — gidişat şeridi */
.shot-last5 { margin-top: 12px; }
.l5-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 5px 2px;
  border-bottom: 1px dashed var(--panel-border);
}
.l5-row:last-child { border-bottom: 0; }
.l5-row i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.l5-row .l5-t {
  flex: none; font-size: 10.5px; font-weight: 800; color: var(--text-dim);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.l5-row code {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 10.5px; line-height: 1.5; color: var(--text-dim);
  word-break: break-word; white-space: pre-wrap; min-width: 0;
}
.l5-row.l5-now code { color: var(--text); font-size: 11.5px; }
/* Brifingdeki trend bölümü — turuncu vurgulu, kalın metin */
.hb-sec.hb-trend { border: 2px solid #f97316; }
.hb-sec.hb-trend h5 { color: #f97316; }
.hb-sec.hb-trend li { font-weight: 700; }

/* YZ yorumu — betimleyici metin + kalıcı "tavsiye değildir" notu */
.ai-text { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.ai-text a { color: var(--accent); font-weight: 700; }
.ai-note {
  margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--text-dim); text-transform: uppercase;
}

/* Belirgin durumların analizi — dil dosyasından, tavsiye değil gözlem */
.l5-notes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.l5-notes b {
  font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-dim); margin-inline-end: 2px;
}
.l5-notes span {
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--mono-bg);
  border: 1px solid var(--panel-border);
  color: var(--text);
}
.shotcard .rawpair { margin: 12px 0 0; }
.shot-brand {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--panel-border);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-dim); text-align: end;
}
@media (max-width: 480px) { .shotcard { padding: 10px 10px 8px; } }

.rawpair { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rawline {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--mono-bg); border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 10px 12px;
}
.rawtag {
  flex: none; padding: 3px 9px; border-radius: 6px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.9px; line-height: 1.5;
}
.rawtag.taf { background: #8b5cf6; }
.rawline code {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 12px; line-height: 1.55; color: var(--text);
  word-break: break-word; white-space: pre-wrap; min-width: 0;
}
@media (max-width: 480px) {
  .rawline { flex-direction: column; gap: 6px; padding: 9px 10px; }
  .rawtag { align-self: flex-start; }
}

/* Plan sınırı şeridi — meteogramın kesildiği yerde */
.plan-limit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 11px 14px; border-radius: 12px;
  background: var(--mono-bg);
  border: 1px solid var(--panel-border); border-left: 3px solid var(--accent);
  font-size: 12.5px; line-height: 1.45; color: var(--text);
}
.plan-limit > svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.plan-limit > span { flex: 1; min-width: 180px; }
.pl-cta {
  flex: none; padding: 7px 14px; min-height: 34px; border-radius: 8px;
  background: var(--brand-btn); color: #fff; text-decoration: none;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
}
.pl-cta:hover { background: var(--brand-btn-hover); }

/* ---------- Brifing kutusu: durum → sayılar → bölümler ---------- */
/* Tasarım kararı: her şeyi birden dökmek yerine kapsamı sekmeye, sayıyı
   karta, anlatımı ızgaraya ayırmak. Göz önce dört sayıyı, sonra tek cümlelik
   hükmü, sonra isterse ayrıntıyı okur. */
.hb-tabs {
  display: flex; gap: 6px; margin: 4px 0 14px; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.hb-tabs::-webkit-scrollbar { display: none; }
.hb-tab {
  flex: none; padding: 8px 15px; min-height: 38px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--panel-border); color: var(--text-dim);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.hb-tab:hover { color: var(--text); border-color: var(--accent); }
.hb-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.hb-pane { display: none; }
.hb-pane.on { display: block; animation: hbIn .22s ease both; }
@keyframes hbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* dört kritik sayı */
.hb-key {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px;
}
.hbk {
  background: var(--mono-bg); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 10px 12px; min-width: 0;
}
.hbk-l {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hbk-v { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.1; }
.hbk-v small { font-size: 11px; font-weight: 700; color: #f59e0b; margin-left: 5px; }

/* tek cümlelik hüküm */
.hb-lede {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--mono-bg);
  border-left: 3px solid var(--accent);
  font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--text);
}

/* bölümler — kart ızgarası, uyarılar önde ve vurgulu */
.hb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px;
}
.hb-sec {
  background: var(--mono-bg); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 12px 14px; min-width: 0;
}
.hb-sec.warn {
  grid-column: 1 / -1;
  background: var(--mono-bg);
  border-color: var(--panel-border); border-left: 3px solid #B45309;
}
.hb-sec h5 {
  margin: 0 0 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-dim);
}
.hb-sec.warn h5 { color: #d97706; }

@media (max-width: 620px) {
  .hb-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-grid { grid-template-columns: 1fr; }
  .hbk-v { font-size: 17px; }
}

/* ---------- Trend paneli seri brifingi ---------- */
/* Grafik ne olduğunu gösterir, bu kutu ne anlama geldiğini söyler:
   yön, tepe, bant, ardından uçuşa dönük tavsiye. */
.pn-brief {
  margin-top: 10px; padding: 11px 13px; border-radius: 11px;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
}
.pn-brief:empty { display: none; }
.sb-head {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.sb-text { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.sb-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb-tips li {
  position: relative; padding-left: 20px;
  font-size: 12px; line-height: 1.45; color: var(--text-dim);
}
.sb-tips li::before {
  content: ""; position: absolute; left: 6px; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* Kalynda harmanı rozeti ve model ağırlıkları */
.mc-badge {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 11.5px; font-weight: 800; color: var(--text);
  letter-spacing: 0.2px;
}
.mc-badge small { font-weight: 500; font-size: 10.5px; color: var(--text-dim); letter-spacing: 0; }
.mc-bdot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #22d3ee, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, #6366f1 22%, transparent);
}
.mdl-w {
  flex: none; min-width: 34px; text-align: right;
  font-size: 10.5px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.mdl-row.out { opacity: 0.5; }
.mdl-row.out .mdl-w { color: #ef4444; }

/* ---------- Meteogram üst şeridi: model seçici + kaydırma ---------- */
.mg-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.mg-models {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.mg-models::-webkit-scrollbar { display: none; }
.mgm-lab {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--text-dim); margin-right: 2px;
}
.mgm-btn {
  flex: none; padding: 7px 13px; min-height: 34px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--panel-border); color: var(--text-dim);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.mgm-btn:hover { color: var(--text); border-color: var(--accent); }
.mgm-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Kalynda harmanı: kendi modelimiz olduğunu belli eden gradyan */
.mgm-btn.blend.on {
  background: linear-gradient(135deg, #22d3ee, #6366f1); border-color: transparent;
}
.mgm-btn.blend:not(.on) { border-color: color-mix(in srgb, #6366f1 45%, transparent); color: var(--text); }

.mg-nav { display: flex; gap: 6px; flex: none; }
.mgn-btn {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
}
.mgn-btn:hover { border-color: var(--accent); color: var(--accent); }
.mgn-btn svg { width: 17px; height: 17px; }

/* Plan sınırı şeridi meteogramın ÜSTÜNDE de dursun: kesildiği anlaşılsın */
.plan-limit.top { margin: 0 0 10px; }

/* Marka imzası */
/* Degrade metin yerine tek kurumsal ton — marka imzası da lacivert. */
.brand .by { font-weight: 800; letter-spacing: 0.2px; color: var(--brand); }

/* Seri brifingi — grafiğin hemen altında, yön rozetiyle */
.sb-top { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 6px; }
.sb-arrow { font-size: 15px; line-height: 1.25; flex: none; font-weight: 800; }
.sb-lead { font-size: 13px; line-height: 1.45; font-weight: 700; color: var(--text); }
.pn-brief .sb-head { display: none; }

/* Brifingin tek cümlelik kararı — özetin hemen altında, en görünür yer */
.hb-verdict {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 14px; padding: 13px 15px; border-radius: 12px;
  background: var(--mono-bg);
  border: 1px solid var(--panel-border); border-left: 3px solid #15803D;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
}
.hb-vt {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: 0.9px;
  text-transform: uppercase; color: #16a34a; padding-top: 3px; min-width: 62px;
}
.hb-vv { font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--text); }

/* ---------- Kalynda model sayfası ---------- */
.mdl-page { max-width: 760px; }
.mdl-hero { margin-bottom: 30px; }
.mdl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 11px; border-radius: 999px; margin-bottom: 14px;
  background: var(--mono-bg);
  border: 1px solid var(--panel-border);
  font-size: 12px; font-weight: 800; letter-spacing: 0.4px; color: var(--text);
}
.mdl-page h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.18; margin: 0 0 14px; }
.mdl-lede { font-size: 17px; line-height: 1.62; color: var(--text); margin: 0; font-weight: 500; }
.mdl-sec { margin-top: 28px; }
.mdl-sec h2 {
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); margin: 0 0 9px;
}
.mdl-sec p { font-size: 15px; line-height: 1.72; color: var(--text-dim); margin: 0; }
.mdl-src {
  margin-top: 34px; padding: 16px 18px; border-radius: 14px;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
}
.mdl-src p { font-size: 13px; }
@media (max-width: 620px) {
  .mdl-lede { font-size: 15.5px; }
  .mdl-sec p { font-size: 14.5px; }
}

/* ---------- Yan kutu: alt panelin ikinci katmanı ---------- */
.sheet {
  position: fixed; top: var(--topbar-h, 60px); right: 0; bottom: 0; z-index: 40;
  width: min(440px, 100vw);
  background: var(--panel); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-left: 1px solid var(--panel-border);
  box-shadow: -18px 0 50px -30px rgba(8, 15, 30, .7);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.sheet.open { transform: none; }
.sheet-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 15px 16px 13px; border-bottom: 1px solid var(--panel-border);
}
.sheet-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; letter-spacing: .2px; }
.sheet-title small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-dim); margin-top: 3px; }
.sheet-x {
  flex: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
}
.sheet-x:hover { border-color: var(--accent); color: var(--accent); }
.sheet-x svg { width: 17px; height: 17px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 22px; overscroll-behavior: contain; }

@media (max-width: 720px) {
  /* Telefonda yan kutu alttan gelir: sağdan kayan dar sütun okunmuyor */
  .sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    height: min(86vh, calc(100vh - var(--topbar-h, 60px)));
    border-left: 0; border-top: 1px solid var(--panel-border);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .sheet.open { transform: none; }
}

/* ---------- Panelin üst şeridi: tek satır konum + hızlı kartlar ---------- */
.loc-line {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim); min-width: 0;
}
.loc-line .icao { font-size: 20px; font-weight: 800; letter-spacing: .4px; color: var(--text); line-height: 1.1; }
.loc-line .nm { font-weight: 600; color: var(--text); }
.loc-line .co { font-variant-numeric: tabular-nums; font-size: 12px; }
.loc-line .sep { opacity: .4; }
.loc-line > span { white-space: nowrap; }
/* Telefonda tek satır sığmıyor: koordinat ve ülke düşer, kimlik kalır */
@media (max-width: 560px) {
  .loc-line { gap: 7px; font-size: 12px; }
  .loc-line .icao { font-size: 18px; }
  .loc-line .co, .loc-line .co + .sep { display: none; }
  .loc-line .nm { overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
}

.quick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin: 12px 0 14px;
}
.qcard {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 14px; min-width: 0;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
  transition: border-color .15s, transform .15s, background .15s;
}
.qcard:hover { border-color: var(--accent); }
.qcard.on { border-color: var(--accent); background: var(--panel-solid); box-shadow: inset 0 0 0 1px var(--accent), 0 2px 8px rgba(16,24,40,.10); }
.qc-ico { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.qc-ico svg { width: 22px; height: 22px; }
.qc-main { flex: 1; min-width: 0; }
.qc-lab {
  font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 3px;
}
.qc-val { font-size: 16px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.qc-go { flex: none; color: var(--text-dim); }
.qc-go svg { width: 17px; height: 17px; }
.qcard:hover .qc-go { color: var(--accent); }

/* meteogram başlığı: model seçici ve detay aynı satırda */
.mg-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.mg-bar h3 { margin: 0; flex: none; }
.mg-detay {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; min-height: 34px; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; border: 0; font-size: 12px; font-weight: 700;
}
.mg-detay:hover { filter: brightness(1.08); }
.mg-detay svg { width: 14px; height: 14px; }

/* Yan kutu eylem düğmeleri */
.sheet-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.sa-btn {
  flex: 1 1 auto; min-width: 110px; min-height: 38px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px; border-radius: 11px; text-decoration: none;
  background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text);
  font-size: 12px; font-weight: 700;
}
.sa-btn:hover { border-color: var(--accent); color: var(--accent); }
.sa-btn svg { width: 15px; height: 15px; }
.loc-line .iata {
  font-size: 11px; font-weight: 800; letter-spacing: .6px; color: var(--text-dim);
  padding: 2px 7px; border-radius: 6px; background: var(--mono-bg); border: 1px solid var(--panel-border);
}

/* ---------- Zaman çubuğu: haritanın üstünde sabit ---------- */
.timebar {
  /* Tek z-index: aynı blokta iki tane vardı (70 ve 22), ilki sessizce ölüydü.
     Değer 22: üst barın (30) altında, alt panelin (25) üstünde durmalı. */
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-140%);
  top: calc(var(--topbar-h, 60px) + 10px); z-index: 26;
  width: min(680px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--panel); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 34px -18px rgba(8, 15, 30, .55);
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s;
  opacity: 0; pointer-events: none;
}
.timebar.on { transform: translateX(-50%); opacity: 1; pointer-events: auto; }

.tb-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: 0; color: #fff;
}
.tb-btn:hover { filter: brightness(1.1); }
.tb-btn svg { width: 16px; height: 16px; }
.tb-i-pause { display: none; }
.timebar.playing .tb-i-play { display: none; }
.timebar.playing .tb-i-pause { display: block; }

.tb-live-btn { background: var(--mono-bg); border: 1px solid var(--panel-border); color: var(--text-dim); }
.tb-live-btn:hover { color: var(--accent); border-color: var(--accent); }
.timebar.tb-live .tb-live-btn { color: #22c55e; border-color: color-mix(in srgb, #22c55e 45%, transparent); }

.tb-stamp { flex: none; min-width: 76px; line-height: 1.15; }
.tb-now { display: block; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-day { display: block; font-size: 10px; color: var(--text-dim); font-weight: 600; }

.tb-range {
  flex: 1; min-width: 0; height: 26px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.tb-range::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--tb-fill, 0%), var(--panel-border) var(--tb-fill, 0%));
}
.tb-range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--panel-border); }
.tb-range::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--accent); }
.tb-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 4px solid var(--accent); cursor: grab;
  box-shadow: 0 2px 7px rgba(8,15,30,.35);
}
.tb-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 4px solid var(--accent); cursor: grab;
}

/* Play çubuğu hover ipucu — imlecin üstünde gün · saat */
.tb-tip {
  position: fixed; transform: translate(-50%, -100%);
  padding: 4px 9px; border-radius: 8px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
  z-index: 99999; box-shadow: 0 5px 14px rgba(8,15,30,.4);
}
.tb-tip.show { opacity: 1; }

@media (max-width: 560px) {
  .timebar { width: calc(100vw - 16px); gap: 8px; padding: 7px 10px; }
  .tb-stamp { min-width: 64px; }
  .tb-now { font-size: 13px; }
}

/* ---------- Seçim kutusu: haritada tıklanan yerde ---------- */
.pickbox {
  position: fixed; z-index: 30; width: 264px;
  background: var(--panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--panel-border); border-radius: 16px;
  box-shadow: 0 18px 44px -20px rgba(8, 15, 30, .6);
  opacity: 0; transform: scale(.94); pointer-events: none;
  transition: opacity .16s, transform .16s cubic-bezier(.22,1,.36,1);
}
.pickbox.on { opacity: 1; transform: none; pointer-events: auto; }
.pb-head {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 12px 10px; border-bottom: 1px solid var(--panel-border);
}
.pb-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; letter-spacing: .2px; line-height: 1.25; }
.pb-t small {
  display: block; font-size: 11px; font-weight: 500; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-x {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-dim);
}
.pb-x:hover { background: var(--mono-bg); color: var(--text); }
.pb-x svg { width: 14px; height: 14px; }

.pb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
.pb-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
  padding: 12px 6px 10px; border-radius: 12px; min-width: 0;
  background: transparent; border: 1px solid transparent; color: var(--text);
  transition: background .14s, border-color .14s, transform .14s;
}
.pb-item:hover { background: var(--mono-bg); border-color: var(--panel-border); }
.pb-ico { display: flex; align-items: center; justify-content: center; }
.pb-ico svg { width: 24px; height: 24px; }
.pb-lab { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; }
.pb-sub { font-size: 9.5px; color: var(--text-dim); text-align: center; }

@media (max-width: 480px) {
  /* Telefonda tıklanan noktaya yapışmak yerine altta ortalanır */
  .pickbox { left: 50% !important; right: auto;
    top: auto !important; bottom: 14px; transform: translateX(-50%) scale(.94);
    width: min(300px, calc(100vw - 24px)); }
  .pickbox.on { transform: translateX(-50%); }
}

/* Meteogram kutusu: yalnızca grafik, yüksekliği içeriğine eşit.
   Sabit yükseklik verince kısa grafiğin altında boş alan kalıyordu; kutu
   artık meteogram ne kadarsa o kadar, taşarsa kendi içinde kayar. */
.drawer.meteo-only {
  height: auto; max-height: min(82vh, calc(100vh - var(--topbar-h, 60px)));
}
.drawer.meteo-only .drawer-head { flex: none; padding: 10px 14px 6px; border-bottom: 0; }
.drawer.meteo-only .drawer-body {
  flex: 0 1 auto; padding: 0 12px 12px; display: block; min-height: 0;
}
.drawer.meteo-only #meteo-box { display: block; }
/* Kutu içindeki meteogram kendi yüksekliğini dayatır, panel ona uyar */
.drawer.meteo-only .meteo-wrap { max-height: none; }
.mb-head { display: flex; align-items: center; gap: 10px; }
.mb-t { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
/* Kutu minimalist ama model seçimi burada da olmalı: hangi modelin
   meteogramına baktığın kutuyu kapatmadan değişebilsin. Yalnızca plan
   uyarısı gizlenir — o tam ekranda söylenir. */
.drawer.meteo-only .plan-limit { display: none; }
.drawer.meteo-only .mg-top { margin: 0 0 8px; }
.pb-t1 { display: block; }

/* Zaman çubuğunun meteogramda işaretlediği saat */
.meteo-cursor {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  /* Seçili saat: sütunun TAMAMI yukarıdan aşağıya altın sarısı boyanır —
     oynatıcı akarken hangi saatte olduğu her satırda görülür */
  background: linear-gradient(180deg,
    rgba(250, 204, 21, 0.34), rgba(250, 204, 21, 0.20) 30%, rgba(250, 204, 21, 0.26));
  border-left: 2.5px solid #eab308;
  border-right: 2.5px solid rgba(234, 179, 8, 0.6);
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.25);
  pointer-events: none; opacity: 0; z-index: 3;
  transition: transform .18s cubic-bezier(.22,1,.36,1), opacity .18s;
}
/* Seçili saat sütununun tepesinde küçük üçgen işaret — göz oraya gitsin */
.meteo-cursor::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid #eab308;
}


/* ---------- Harita altı SEO şeridi ---------- */
.seofoot {
  position: fixed; left: 12px; bottom: 12px; z-index: 18;
  width: min(480px, calc(100vw - 24px));
  background: var(--panel); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--panel-border); border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 36px -20px rgba(8, 15, 30, .55);
}
.seof-h {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; min-height: 38px; cursor: pointer;
  background: transparent; border: 0; color: var(--text-dim);
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
}
.seof-h:hover { color: var(--text); }
.seof-h svg { width: 14px; height: 14px; transition: transform .2s; }
.seofoot.open .seof-h svg { transform: rotate(180deg); }
.seof-b {
  max-height: 0; overflow: hidden; transition: max-height .28s ease;
  padding: 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim);
}
.seofoot.open .seof-b { max-height: min(44vh, 340px); overflow-y: auto; padding-bottom: 14px; }
/* Kapalı şeritte uygulama görselleri (simge + 3 ekran görüntüsü, ~170 KB)
   indirilmesin: max-height:0 kırpması loading="lazy"yi durdurmuyordu ve ilk
   açılışta harita motoruyla bant genişliği için yarışıyorlardı. display:none
   tembel görseli bekletir; şerit açılınca iner. Metin DOM'da kalır (SEO). */
.seofoot:not(.open) .app-tanit img { display: none; }
.seof-b h2 { font-size: 14px; color: var(--text); margin: 4px 0 8px; }
.seof-b p { margin: 0 0 9px; }
.seof-b a { color: var(--accent); text-decoration: none; font-weight: 600; }
.seo-links a { margin-right: 7px; }

/* "Bu meydan için dahası" — altı çizili mavi bağlantı yığını yerine nötr
   çipler. Ayraç noktaları (·) çip aralığıyla anlamsızlaştığı için gizlenir. */
.metric-links {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 0; line-height: 0; color: transparent;
}
.metric-links a {
  display: inline-block; margin: 0; font-size: 11.5px; line-height: 1.45;
  padding: 4px 9px; border-radius: 7px; text-decoration: none;
  border: 1px solid var(--panel-border); background: var(--mono-bg);
  color: var(--text); font-weight: 600; white-space: nowrap;
}
.metric-links a:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 720px) {
  /* Telefonda panel/kutularla çakışmasın: yalnızca kapalı şerit, alt çubuk gibi */
  .seofoot { left: 8px; right: 8px; bottom: 8px; width: auto; }
}


/* Brifing: tıklanan tarih/saat damgası büyük ve kalın */
.hb-head b {
  font-size: 20px; font-weight: 800; letter-spacing: .2px; color: var(--text);
  padding: 2px 10px; border-radius: 9px;
  background: var(--mono-bg);
  border: 1px solid var(--panel-border);
}
.mg-pick .mp-head { font-size: 15px; font-weight: 800; }

/* Brifing: o saatin BÜTÜN meteogram değerleri */
.hb-all { margin: 0 0 14px; }
.hb-btitle2 {
  font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 7px;
}
.hb-data {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 3px 18px;
}
.hb-data .hd {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 4px 0; font-size: 12px; color: var(--text-dim); min-width: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--panel-border) 75%, transparent);
}
.hb-data .hd b {
  color: var(--text); font-variant-numeric: tabular-nums; text-align: right;
  font-size: 12.5px; white-space: nowrap;
}
@media (max-width: 560px) {
  .hb-data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; }
  .hb-head b { font-size: 17px; }
}


/* Pist kutusu: diyagram kutunun tam genişliğinde, tablo rahat okunur */
.sheet-body .rwy-svg { width: 100%; max-width: none; height: auto; margin: 0; }
.sheet-body .rwy-box { display: block; }
.sheet-body .rwy-side { margin-top: 12px; }
.sheet-body .rwy-wind { font-size: 14px; }
.sheet-body .ptable th, .sheet-body .ptable td { font-size: 12.5px; padding: 8px 9px; }
.sheet-body .fit-ring { width: 40px; height: 40px; }


/* Seçim kutusu yıldızı + nokta favori çipi */
.pb-fav {
  flex: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-dim);
}
.pb-fav svg { width: 16px; height: 16px; }
.pb-fav:hover { background: var(--mono-bg); color: #eab308; }
.pb-fav.on { color: #eab308; }
.favchip.favpt svg { width: 13px; height: 13px; margin-right: 4px; color: #f59e0b; }

/* Meteogram yükleme iskeleti — bekleme görünür olsun, kullanıcı tekrar basmasın */
.mg-skel { padding: 4px 0 2px; }
.mgs-rows { display: flex; flex-direction: column; gap: 7px; }
.mgs-row {
  height: 16px; border-radius: 6px;
  background: linear-gradient(90deg,
    var(--mono-bg) 0%,
    color-mix(in srgb, var(--panel-border) 65%, transparent) 50%,
    var(--mono-bg) 100%);
  background-size: 220% 100%;
  animation: mgsShimmer 1.25s ease-in-out infinite;
}
.mgs-row:nth-child(1) { width: 100%; }
.mgs-row:nth-child(2) { width: 96%; }
.mgs-row:nth-child(3) { width: 99%; }
.mgs-row:nth-child(4) { width: 92%; }
.mgs-row:nth-child(5) { width: 97%; }
.mgs-row:nth-child(6) { width: 94%; }
.mgs-row:nth-child(7) { width: 98%; }
@keyframes mgsShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
.mgs-note {
  margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.mgs-note::before {
  content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent); animation: mgsSpin .7s linear infinite;
}
@keyframes mgsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mgs-row, .mgs-note::before { animation: none; }
}

/* Paylaş düğmesi — kopyalanınca yeşile döner */
.pb-share.ok { color: #22c55e !important; }


/* Tam ekran meteogram açıkken oynatıcı modalın ÜSTÜNDE, alt kenarda durur */
/* Tam ekran meteogramda alt oynatıcı yok: zaman denetimi üstteki kaydırıcıda.
   Çubuk yine kurulur (olaylar oradan akar) ama görünmez. */
body.tb-over .timebar { display: none; }


/* Windy tarzı zaman kaydırıcısı — tam ekran meteogramın üstünde yapışık durur */
.mg-scrub {
  position: sticky; top: 0; z-index: 6; padding: 30px 16px 10px; background: var(--bg);
  display: flex; align-items: center; gap: 12px;
}
.mg-play {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center; padding: 0;
}
.mg-play svg { width: 17px; height: 17px; }
.mg-play .mp-i-pause, .mg-scrub.on .mg-play .mp-i-play { display: none; }
.mg-scrub.on .mg-play .mp-i-pause { display: block; }
/* İz: meteogram şeridiyle aynı genişlik, aynı kaydırma, aynı sol boşluk */
.mg-scrub-scroll {
  flex: 1; min-width: 0; overflow-x: hidden;
}
.mg-scrub-track {
  position: relative; height: 6px; will-change: transform; border-radius: 3px;
  background: rgba(100, 116, 139, 0.3); cursor: pointer; touch-action: none;
}
.mg-scrub-track::after { content: ""; position: absolute; inset: -14px 0; }
.mg-scrub-fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px;
  background: var(--accent); opacity: .85; pointer-events: none;
}
.mg-scrub-thumb {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: #ff8c28; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%); pointer-events: none;
}
.mg-scrub-b {
  position: absolute; top: 4px; transform: translateX(-50%);
  background: #ff8c28; color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}


/* Sarı saat işareti — işaretli sütunun tepesinde asılı, tıklanabilir */
.mt-pin {
  position: absolute; top: 2px; left: 0; z-index: 8;
  padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; transition: transform 0.18s ease, opacity 0.15s ease;
  pointer-events: auto; line-height: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}
.mt-pin:hover { filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.5)) brightness(1.06); }


/* ---------- Yasal sayfalar ---------- */
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.legal-tab {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--panel-border); color: var(--text-dim); text-decoration: none;
}
.legal-tab.on, .legal-tab:hover { color: var(--text); border-color: var(--accent); }
.legal-date { font-size: 12px; color: var(--text-dim); margin: -6px 0 16px; }
.legal-body h2 { font-size: 16px; margin: 20px 0 6px; }
.legal-body p, .legal-body li { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }
.legal-body b { color: var(--text); }
.legal-body ul { padding-left: 20px; margin: 6px 0 10px; }
/* Rehber kütüphanesi kartları (/guides) */
.guide-list { list-style: none; padding: 0; margin: 14px 0 22px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.guide-card { background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; }
.guide-card a { text-decoration: none; color: var(--text); font-size: 14px; }
.guide-card a:hover { color: var(--brand); }
.guide-card p { margin: 0; font-size: 12.5px; }
.guide-card .legal-date { margin: 2px 0 0; }
.legal-body pre.raw { margin: 8px 0 12px; }
.legal-body table.ptable { margin: 8px 0 14px; }
.legal-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legal-list a { font-size: 14.5px; }
.legal-box {
  border: 1px solid var(--panel-border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 14px; margin: 10px 0;
  font-size: 13px; line-height: 1.65; color: var(--text-dim);
}
.legal-box.warn {
  border-color: color-mix(in srgb, #f59e0b 45%, transparent);
  border-left-color: #B45309;
  background: var(--mono-bg);
  color: var(--text); font-weight: 600; font-size: 13.5px;
}
.legal-links a { color: var(--text-dim); }
.legal-links a:hover { color: var(--text); }


/* ---------- Meydan dizini ---------- */
.dir-search { margin: 14px 0 20px; }
.dir-search input {
  width: 100%; max-width: 460px; height: 42px; padding: 0 14px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--input-bg); border: 1px solid var(--panel-border);
  border-radius: 12px; outline: none;
}
.dir-search input:focus { border-color: var(--accent); }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 18px; }


/* Harita künyesi: OSM ve CARTO lisansları kaynak göstermeyi zorunlu kılar,
   bu yüzden kaldırılmaz — küçük bir (i) düğmesine katlanır, tıklayınca açılır.
   (kunye) */
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner {
  display: none;
}
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 24px; background: transparent; box-shadow: none; }
.maplibregl-ctrl-attrib-button { opacity: .55; }
.maplibregl-ctrl-attrib-button:hover { opacity: 1; }

/* Oynatıcı çubuğu artık hiçbir yüzeyde görünmez: olaylar akmaya devam eder,
   denetim tam ekran meteogramın kaydırıcısındadır. */
.timebar { display: none !important; }


/* ---------- Son 24 saatin ham raporları ---------- */
.raw24 > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.raw24 > summary::-webkit-details-marker { display: none; }
.raw24 > summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 6px solid var(--text-dim); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .18s;
}
.raw24[open] > summary::before { transform: rotate(90deg); }
.raw24-body { max-height: 360px; overflow-y: auto; margin-top: 8px; }
.r24-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: var(--text-dim);
  margin: 10px 0 4px; text-transform: uppercase;
}
.rawline.r24 { margin-bottom: 4px; }
.rawline.r24 code { font-size: 11.5px; line-height: 1.5; }
.rawline.r24 .rawtag { font-variant-numeric: tabular-nums; }


/* Harita altı SEO bloğunun başlığı sayfanın H1'i: görsel olarak eskisi gibi
   durur, ama arama motoruna sayfanın konusunu bildirir. */
.seo-h1 { font-size: 13.5px; font-weight: 800; margin: 0 0 6px; color: var(--text); }


/* ---------- Yakınlaştırma düğmeleri ---------- */
.zoomctl {
  position: fixed; right: 12px; bottom: 96px; z-index: 19;
  display: flex; flex-direction: column; gap: 6px;
}
.zbtn {
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border); color: var(--text);
  font-size: 20px; font-weight: 700; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 8px 22px -14px rgba(8, 15, 30, .6);
}
.zbtn:hover { border-color: var(--accent); }
.zbtn:active { transform: scale(.94); }

/* ---------- Küre / düz harita seçimi ---------- */
.mm-proj { display: flex; gap: 6px; padding: 2px 0 4px; }
.mm-proj .mm-item { flex: 1; text-align: center; }
.mm-item.proj.on { background: var(--accent); color: #fff; border-color: transparent; }


/* Döndürme düğmesi etkinken vurgulanır */
.zbtn.on { background: var(--accent); color: #fff; border-color: transparent; }


/* ---------- Rota şeridi ve SIGMET balonu ---------- */
.rota-bilgi {
  position: fixed; left: 50%; top: 74px; transform: translateX(-50%) translateY(-8px);
  z-index: 19; display: none; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--panel); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border); color: var(--text);
  box-shadow: 0 12px 30px -18px rgba(8, 15, 30, .6);
}
.rota-bilgi.on { display: flex; transform: translateX(-50%); }
.rota-x { border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0 2px; }
.rota-x:hover { color: var(--text); }
.sig-pop { font-size: 12px; line-height: 1.5; }
.sig-pop .sig-t { color: #64748b; margin: 2px 0 6px; font-size: 11px; }
.sig-pop code { display: block; white-space: pre-wrap; font-size: 10.5px; line-height: 1.45; }


/* ---------- Brifing: türbülans bölümü ---------- */
.hb-turb h5 { display: flex; align-items: center; gap: 8px; }
.hb-tb-lv {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; color: #fff;
  padding: 2px 8px; border-radius: 999px;
}
.hb-tb-bar { display: flex; gap: 1px; height: 12px; margin: 8px 0 6px; border-radius: 3px; overflow: hidden; }
.hb-tb-bar i { flex: 1; display: block; }
.hb-tb-num {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px;
  font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.hb-tb-num span { white-space: nowrap; }


/* ---------- Tam ekran katmanlar dikey kayar ----------
 * Kural: ekranı kaplayan hiçbir yüzey içeriğini kesip orada bırakmaz.
 * İçerik ekrandan uzunsa yüzeyin kendisi sayfa gibi yukarı aşağı hareket
 * eder; başlık şeridi (ve kapatma düğmesi) yerinde kalır.
 */

/* 3B atmosfer profili: kart bütün olarak kayar, sahneyi yukarı itip
   altındaki ham METAR/TAF ve seviye tablosunun tamamı okunur. */
#cloud3d .modal-card { overflow-y: auto; overscroll-behavior: contain; }
#cloud3d .modal-head {
  position: sticky; top: 0; z-index: 5; background: var(--panel-solid);
}
[data-theme="dark"] #cloud3d .modal-head { background: #05080f; }

/* Saatlik brifing: kutu 82vh'de kesilip kendi içinde kaymak yerine
   perdenin tamamı kayar — uzun brifingin sonuna kısa ekranda da ulaşılır. */
.hour-brief { overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; }
.hb-card { max-height: none; overflow: visible; margin: auto; }

/* Saat seçim kutusu ekrana sığmazsa kendi içinde kayar */
.mg-pick { max-height: calc(100dvh - 24px); overflow-y: auto; }

/* Kaydırma kabları: parmakla sürüklerken arkadaki harita kaymasın */
.modal-body { overscroll-behavior: contain; }

/* Brifingte en yakın meydanın gözlemi ve TAF periyotları */
.hb-sec.hb-ist { grid-column: 1 / -1; }
.hb-ist-alt {
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-dim); margin: 8px 0 3px;
}
.hb-ist li {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; line-height: 1.6;
}

/* METAR/TAF düz dil yorumu */
.hb-yorum {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.5; color: var(--text);
  margin: 3px 0 2px; padding: 5px 8px;
  background: var(--mono-bg);
  border-left: 2px solid var(--accent); border-radius: 6px;
}
.hy-cat {
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  padding: 1px 6px; border-radius: 999px; color: #fff; flex: none;
}
.hy-cat.cat-VFR { background: #15803D; }
.hy-cat.cat-MVFR { background: #1D4ED8; }
.hy-cat.cat-IFR { background: #B91C1C; }
.hy-cat.cat-LIFR { background: #A21CAF; }
.hb-taf-per { margin-bottom: 9px; }
.htp-raw {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px;
  line-height: 1.55; color: var(--text-dim);
}

/* Sözleşmede eksik zorunlu künye alanı — sessizce boş bırakılmaz, göze batar */
.legal-todo {
  background: #B45309; color: #fff; font-weight: 700;
  padding: 1px 6px; border-radius: 5px; font-size: 12.5px;
}
[data-theme="dark"] .legal-todo { background: #B45309; color: #fff; }
/* Sözleşme sekmeleri çoğaldı: dar ekranda taşmasın, kaydırılabilir kalsın */
.legal-tabs { overflow-x: auto; scrollbar-width: thin; }
.legal-tabs .legal-tab { white-space: nowrap; }

/* 3B panelde dikey rüzgâr profili — biner biner */
.c3-prof { margin-top: 10px; }
.c3-prof-h {
  font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 5px;
}
.c3-prof .c3-lvl { font-variant-numeric: tabular-nums; }

/* Zaman izinde ön izleme: basmadan önce hangi gün/saate gidileceği */
.mg-scrub-ip {
  position: absolute; top: -2px; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--text); color: var(--bg);
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  opacity: 0; pointer-events: none; transition: opacity .12s;
  z-index: 7;
}
.mg-scrub-ip.on { opacity: .92; }

/* Favoriler düğmesi ve açılır liste */
.favbtn { gap: 6px; font-weight: 700; }
.favbtn svg { width: 13px; height: 13px; }
.favbtn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.fav-n {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 0 5px; font-size: 10px; font-weight: 800; margin-left: 2px;
}
.favbtn.active .fav-n { background: rgba(255,255,255,.28); }
.favpanel {
  position: absolute; z-index: 22; display: none;
  min-width: 216px; max-width: 300px; max-height: 320px; overflow-y: auto;
  margin-top: 6px; padding: 6px; border-radius: 13px;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  box-shadow: 0 18px 44px -22px rgba(8, 15, 30, .6);
}
.favpanel.on { display: block; }
.fp-sat {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text); font-family: inherit;
  font-size: 12.5px; text-align: left;
}
.fp-sat:hover { background: var(--hover); }
.fp-ico { flex: none; font-size: 12px; opacity: .8; }
.fp-ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-sil { flex: none; opacity: .35; font-size: 12px; padding: 0 3px; }
.fp-sil:hover { opacity: 1; color: var(--ifr, #ef4444); }
.fp-bos { padding: 10px; font-size: 12px; color: var(--text-dim); }

/* Ayarlar menüsündeki gündüz/gece düğmesi — tek tema anahtarı */
.mm-theme { display: flex; align-items: center; gap: 8px; }
.mm-theme svg { width: 15px; height: 15px; flex: none; }

/* Fiyat kartında GERÇEK tahmin ufku — sunucudaki sınırla aynı kaynaktan */
.price-horizon {
  margin: 2px 0 12px; padding: 7px 10px; border-radius: 9px;
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  font-size: 13px; color: var(--text);
}
.price-horizon small { color: var(--text-dim); font-size: 11.5px; }

/* ---------- Harita menüsündeki favori listesi ---------- */
/* Bu blok eklenirken stili unutulmuştu: düğmeler tarayıcı varsayılanıyla,
   simge ve silme düğmesi hizasız çiziliyordu. */
.mm-favs { max-height: 190px; overflow-y: auto; margin-bottom: 4px; }
.mm-fav {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text);
  font-family: inherit; font-size: 12.5px; text-align: left;
}
.mm-fav:hover { background: var(--hover); }
.mf-ico { flex: none; font-size: 12px; opacity: .75; width: 14px; text-align: center; }
.mf-ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-sil { flex: none; opacity: .3; font-size: 12px; padding: 0 4px; border-radius: 5px; }
.mf-sil:hover { opacity: 1; color: var(--ifr, #ef4444); background: var(--hover); }
.mm-fav-bos { padding: 7px 9px; font-size: 11.5px; color: var(--text-dim); }
@media (pointer: coarse) { .mm-fav { min-height: 40px; } }

/* Kısa bildirim — sessiz kalan işlemlere geri bildirim */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px);
  z-index: 90; padding: 9px 16px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.on { opacity: .95; transform: translateX(-50%) translateY(0); }

/* ---------- Hesap sayfası: abonelik, ayarlar, favoriler, silme ---------- */

/* Ödeme geçmişi tablosu — dar ekranda kendi kutusunda kayar */
.acct-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
.acct-tbl th, .acct-tbl td { padding: 8px 10px; text-align: start; white-space: nowrap; }
.acct-tbl thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); border-bottom: 1px solid var(--panel-border);
}
.acct-tbl tbody tr + tr td { border-top: 1px solid var(--panel-border); }
.acct-tbl tbody td:nth-child(3) { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Dil / birim seçicileri yan yana, dar ekranda alt alta */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.acct-grid .fld { margin: 0; }

/* Kayıtlı yerler */
.acct-favs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.acct-favs li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--input-bg);
}
.acct-favs a { flex: 1; text-decoration: none; color: inherit; font-size: 14px; }
.acct-favs a:hover { text-decoration: underline; }
.acct-favs b { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.fav-del { padding: 2px 9px; line-height: 1.5; font-size: 13px; }

/* Giriş kartındaki dil seçici */
.fld-sel {
  font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 9px;
  border: 1px solid var(--panel-border); background: var(--input-bg); color: inherit;
}

/* Silme bölümü: yıkıcı olduğu görünsün, ama sayfayı kırmızıya boğmasın */
.acct-danger { border-color: color-mix(in srgb, #ef4444 40%, var(--panel-border)); }
.acct-danger h2 { color: #ef4444; }
.acct-del {
  border-color: color-mix(in srgb, #ef4444 55%, var(--panel-border));
  color: #ef4444; font-weight: 700;
}
.acct-del:hover { background: var(--hover); }

/* ---------- 3B profil: ham METAR/TAF kutuları ve tam ekran ---------- */

/* Kutu etiketi: hangi kutunun gözlem, hangisinin tahmin olduğu tek bakışta */
.c3-rawlab {
  display: block; font-family: Inter, system-ui, sans-serif;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 4px;
}

/* Seçili periyot birden fazla satıra taşabilir; vurgu kırılınca da sürsün */
.c3-mark { box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Tam ekran — gerçek Fullscreen API. Kart artık ekranın kendisi olduğu için
   modalın ortalama/kenar boşluğu kalkar, sahne büyür. */
#cloud3d .modal-card:fullscreen {
  width: 100vw; max-width: none; height: 100vh; max-height: none;
  border-radius: 0; margin: 0; display: flex; flex-direction: column;
}
#cloud3d .modal-card:fullscreen .c3-stage { flex: 1 1 auto; min-height: 0; }
#cloud3d .modal-card:fullscreen .c3-panel { flex: 0 0 auto; max-height: 38vh; overflow-y: auto; }

/* Tarayıcı Fullscreen API'ye izin vermezse (gömülü çerçeve, iOS Safari)
   sayfa içi büyütme: kullanıcı düğmeye bastığında yine bir şey olur. */
#cloud3d.c3-max { padding: 0; }
#cloud3d.c3-max .modal-card {
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  border-radius: 0; display: flex; flex-direction: column;
}
#cloud3d.c3-max .c3-stage { flex: 1 1 auto; min-height: 0; }
#cloud3d.c3-max .c3-panel { flex: 0 0 auto; max-height: 38vh; overflow-y: auto; }

/* ---- ham koda dokunma: ülkeye göre çözüm + resmi kaynak ---- */
/* Kod parçaları düğme ama metin gibi akmalı: satır sarması ve punto ham
   METAR'ın kendisiyle aynı kalır, yalnızca dokunma alanı ve vurgu eklenir. */
.rawline code .tok, pre.raw .tok {
  font: inherit; color: inherit; background: none; border: 0;
  padding: 1px 3px; margin: 0 -1px; border-radius: 5px;
  cursor: pointer; transition: background .14s, color .14s, box-shadow .14s;
}
.rawline code .tok:hover:not(:disabled), pre.raw .tok:hover:not(:disabled) { background: var(--hover); }
.rawline code .tok:focus-visible, pre.raw .tok:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rawline code .tok:disabled, pre.raw .tok:disabled { cursor: default; opacity: .75; }
/* Ulusal kod: METAR'ın uluslararası kısmından ayrılsın — altı noktalı çizgi */
.rawline code .tok-ulusal, pre.raw .tok-ulusal {
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  font-weight: 600;
}
.rawline code .tok.secili, pre.raw .tok.secili {
  background: var(--accent); color: #fff;
  box-shadow: inset 0 -2px 0 0 transparent;
}

pre.raw { white-space: pre-wrap; word-break: break-word; }
.kodkutu {
  margin-top: 10px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  animation: kodAc .18s cubic-bezier(.22,1,.36,1);
}
@keyframes kodAc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kod-bas { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kod-bas code {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 14px; font-weight: 700; color: var(--text);
  background: var(--mono-bg); border: 1px solid var(--panel-border);
  padding: 3px 8px; border-radius: 6px;
}
.kod-ad { font-size: 13.5px; font-weight: 650; }
.kod-ulke {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  background: #1E3A8A; color: #fff; padding: 3px 8px; border-radius: 999px;
}
.kod-kapat {
  margin-left: auto; background: none; border: 0; color: var(--muted, #94a3b8);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.kod-kapat:hover { color: inherit; }
.kod-aciklama { margin: 8px 0 0; font-size: 13px; line-height: 1.62; }
.kod-kaynak {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--panel-border);
  font-size: 11.5px; line-height: 1.5; text-decoration: none; color: inherit;
}
.kod-kaynak svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--accent); }
.kod-kaynak b { font-weight: 700; }
.kod-kaynak em { display: block; font-style: normal; opacity: .7; margin-top: 1px; }
.kod-kaynak:hover span { text-decoration: underline; }
/* Paylaşım görüntüsünde düğme/panel görünmesin — kart ham metin gibi kalsın */
.shot-raw-big .tok { box-shadow: none !important; background: none !important; color: inherit !important; }

/* ---- sembol açıklaması (legend) ---- */
.legend {
  position: fixed; right: 14px; bottom: 76px; z-index: 40;
  width: min(340px, calc(100vw - 28px)); max-height: min(70vh, 620px);
  display: flex; flex-direction: column;
  background: var(--panel); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border); border-radius: 16px;
  box-shadow: 0 20px 46px -22px rgba(8, 15, 30, .68);
  opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity .2s, transform .2s cubic-bezier(.22,1,.36,1);
}
.legend.on { opacity: 1; transform: none; }
.lg-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--panel-border);
}
.lg-title { font-size: 13.5px; font-weight: 700; letter-spacing: .2px; }
.lg-x {
  margin-inline-start: auto; background: none; border: 0; color: var(--muted, #94a3b8);
  font-size: 21px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.lg-x:hover { color: inherit; }
.lg-body { overflow-y: auto; padding: 4px 14px 14px; overscroll-behavior: contain; }
.lg-blok { padding: 12px 0; border-bottom: 1px dashed var(--panel-border); }
.lg-blok:last-child { border-bottom: 0; padding-bottom: 4px; }
.lg-blok h4 {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; opacity: .6;
}
.lg-model { width: 100%; height: auto; color: var(--text); }
/* İki sütun: sembol solda, adı sağında — dar ekranda tek sütuna iner */
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
@media (max-width: 380px) { .lg-grid { grid-template-columns: 1fr; } }
.lg-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lg-item canvas { flex: none; }
/* Uzun adlar ("Gök gürültülü fırtına", "Schneetreiben, niedrig") kırpılmasın:
   iki satıra kadar sarar, üçüncüde kısalır */
.lg-item span {
  font-size: 11.5px; line-height: 1.28; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lg-not { margin: 8px 0 0; font-size: 11px; line-height: 1.55; opacity: .72; }
/* Arapça sağdan sola: panel sol kenara, oklar ters */
[dir="rtl"] .legend { right: auto; left: 14px; }

/* Meydan sayfası altbilgisindeki yasal şerit — küçük ama her sayfada erişilir */
.page-foot .foot-legal { font-size: 11.5px; line-height: 1.9; opacity: .75; margin: 6px 0; }
.page-foot .foot-legal a { color: inherit; }

/* Model panelinde Pilot kilidi kartı */
.mdl-lock {
  display: block; padding: 12px 14px; margin: 4px 0;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--panel-border));
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.mdl-lock:hover { border-color: var(--accent); }
.mdl-lock b { display: block; font-size: 13px; margin-bottom: 4px; }
.mdl-lock span { display: block; font-size: 12px; line-height: 1.5; opacity: .78; }
.mdl-lock em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent); }

/* Kayıt formunun altındaki yasal onay satırı.
   Önce burada kehribar bir uyarı kutusu vardı: ücretli döneme geçişi anlatan
   uzun bir paragraf. Formun ortasında duran bu blok, kayıt ekranını bir
   sözleşme ekranına çeviriyordu — kullanıcı okumuyor, form da güven vermiyordu.
   Kapsam artık fiyat sayfasında ve sözleşmede; burada yalnızca kabul beyanı
   ve iki bağlantı kalıyor. */
.auth-legal {
  margin: 14px 0 2px; font-size: 12px; line-height: 1.55;
  color: var(--text-dim); text-align: center;
}
.auth-legal a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--accent); }

/* Uygulama tanıtımı — ana sayfanın SEO bloğunda, mağaza bağlantıları ve
   ekran görüntüleri. Görseller kendi sunucumuzda: CSP dış görsele izin
   vermiyor, Apple CDN'inden hotlink sessizce boş kare olurdu. */
.app-tanit {
  margin: 26px 0 6px; padding: 18px 18px 20px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--panel-border);
}
.app-tanit .app-ikon { border-radius: 16px; display: block; margin-bottom: 10px; }
.app-tanit h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.app-tanit p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.62; color: var(--text-dim); }
.app-rozet { display: flex; flex-wrap: wrap; gap: 10px; }
.app-rozet a {
  padding: 9px 15px; border-radius: 999px; font-size: 13px;
  background: var(--accent); color: #fff; text-decoration: none;
}
.app-rozet a:hover { filter: brightness(1.08); }
.app-shots { display: flex; gap: 12px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.app-shots img {
  width: 286px; height: auto; flex: none; border-radius: 14px;
  border: 1px solid var(--panel-border);
}
@media (max-width: 560px) { .app-shots img { width: 210px; } }

/* ---- MetarTaf3D tanıtımı: köşe rozeti + açılış popup'ı ---- */
#app-rozet-kose {
  position: fixed; left: 12px; bottom: 48px; z-index: 900;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 8px; border-radius: 999px; border: 1px solid var(--panel-border);
  background: var(--panel); color: var(--text); cursor: pointer;
  font: 700 12.5px/1 inherit; box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
#app-rozet-kose img { border-radius: 7px; display: block; }
#app-rozet-kose:hover { filter: brightness(1.06); }
[dir="rtl"] #app-rozet-kose { left: auto; right: 12px; }
@media (max-width: 640px) { #app-rozet-kose span { display: none; } #app-rozet-kose { padding: 7px; } }

#app-pop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; }
#app-pop .app-pop-arka { position: absolute; inset: 0; background: rgba(4,8,18,.6); backdrop-filter: blur(3px); }
#app-pop .app-pop-kart {
  position: relative; width: min(430px, calc(100vw - 32px)); max-height: calc(100vh - 80px);
  overflow: auto; border-radius: 18px; padding: 20px 20px 16px;
  background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: 0 24px 70px rgba(0,0,0,.5); text-align: center;
}
#app-pop .app-pop-x {
  position: absolute; top: 10px; inset-inline-end: 12px; border: 0; background: transparent;
  color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer;
}
#app-pop .app-pop-ikon { border-radius: 13px; margin: 2px auto 8px; display: block; }
#app-pop h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
#app-pop p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
#app-pop .app-pop-ss { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
#app-pop .app-pop-ss img { width: 30%; border-radius: 10px; border: 1px solid var(--panel-border); }
#app-pop .app-pop-dugme { display: flex; gap: 10px; justify-content: center; }
/* Saat uygulamasının dikey tanıtım filmi — popup'ın altında, ikinci ürün
   olarak. preload="none": popup açılınca 7 MB inmiyor, poster yetiyor. */
/* Yan yana düzen: dikey film kartın boyunu 250 px uzatıyordu ve popup'ın
   kaydırma alanına düşüyordu. Etiket solda, 92 px'lik film sağda. */
#app-pop .app-pop-saat { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-border); display: flex; align-items: center; gap: 12px; text-align: left; }
#app-pop .app-pop-saat a { flex: 1; font-size: 12px; line-height: 1.45; font-weight: 600; text-decoration: none; color: var(--accent, #1C63C8); }
#app-pop .app-pop-saat video { flex: 0 0 auto; width: 92px; aspect-ratio: 9 / 16; border-radius: 10px; border: 1px solid var(--panel-border); background: #0b1220; object-fit: cover; }
#app-pop .app-pop-dugme a {
  flex: 1; padding: 11px 10px; border-radius: 11px; background: var(--accent);
  color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 800;
}
#app-pop .app-pop-sonra {
  margin-top: 10px; border: 0; background: transparent; color: var(--text-dim);
  font-size: 12px; cursor: pointer; text-decoration: underline;
}

/* Kurumsal plan kartındaki başvuru notu — düğmenin kayıt değil başvuru
   olduğunu kartın içinde açıklar (bkz. worker/index.js /pricing). */
.price-corp-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted, #6B7F99);
}

/* ============================================================ HESAP PANOSU
   Giriş yapıldıktan sonraki profil ekranı.

   Önceden giriş kartının kabuğu (.auth-main, 460 px) yeniden kullanılıyordu:
   abonelik, ödemeler, modüller, ayarlar, favoriler, istatistik ve destek —
   hepsi tek dar sütunda alt alta diziliyor, ekranın %70'i boş kalıyordu.
   Kullanıcı kendi verisini görmek için metrelerce kaydırıyordu.

   Giriş yapınca <main> `acct-signed` sınıfını alır ve kabuk tam genişlikte
   bir panoya döner. Izgara içerik-öncelikli: dar ekranda tek sütun, geniş
   ekranda iki sütun; abonelik ve ödeme geçmişi (en çok yer isteyen kart)
   geniş sütunu kaplar. */
.auth-main.acct-signed {
  max-width: 1500px; display: block; align-items: initial; min-height: 0;
}
.acct-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: 18px; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: 0 10px 30px rgba(15, 30, 60, .07);
}
/* Avatar hem baş harf rozeti hem de fotoğraf taşıyıcısı; <button> çünkü
   tıklanınca dosya seçici açılıyor — <div> onclick klavyeyle erişilemezdi. */
.acct-ava {
  width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto; padding: 0;
  display: grid; place-items: center; font: 800 22px/1 Inter, sans-serif;
  color: #fff; background: linear-gradient(135deg, #1C63C8, #22d3ee);
  letter-spacing: .5px; border: 0; cursor: pointer; overflow: hidden;
  position: relative; font-family: inherit;
}
.acct-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-ava:hover::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28);
}
.acct-ava:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-hero h1 { font-size: 25px; margin: 0; line-height: 1.2; }
.acct-hero .acct-mail { font-size: 13.5px; color: var(--text-dim); margin-top: 3px; }
.acct-hero-act { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.acct-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; font: 700 12px/1 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .4px; background: #1D4ED8;
  color: #fff; border: 1px solid #1D4ED8;
}
.acct-badge.warn { background: #B45309; color: #fff; border-color: #B45309; }
.acct-badge.ok { background: #15803D; color: #fff; border-color: #15803D; }

/* KPI şeridi: kullanıcının en çok sorduğu beş sayı, kaydırmadan görünür. */
.acct-kpi {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.acct-kpi .st-k { font-size: 11px; letter-spacing: .5px; }
.acct-kpi .st-v { font-size: 22px; }

/* Ana ızgara. minmax(0,…) şart: içindeki tablolar taşıp sütunu genişletmesin. */
.acct-grid2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .acct-grid2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
  .acct-span2 { grid-column: 1 / -1; }
}
.acct-grid2 > section { margin: 0; }
.acct-grid2 .pcard h2 { font-size: 17px; }

/* Kota çubuğu — ücretsiz planda bugünkü hak. */
.kota-bar { height: 8px; border-radius: 99px; background: var(--panel-border); overflow: hidden; margin-top: 8px; }
.kota-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1C63C8, #22d3ee); }
.kota-bar.dolu i { background: linear-gradient(90deg, #b45309, #f59e0b); }

/* Uygulamada aç hapları — yalnız mobil; masaüstünde gizli */
.app-pill-row{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 14px 0;font-size:12px}
.app-pill{display:inline-block;padding:6px 12px;border-radius:999px;background:#0066CC;color:#fff!important;font-weight:700;text-decoration:none;font-size:12px}
.app-pill-t{color:#68809A;font-size:11.5px}
@media (max-width:760px){.app-pill-row{display:flex}}

/* MGM Türkiye radar paneli — ayrı görüntü, harita katmanı değil */
#mgm-radar { position: fixed; inset: 0; z-index: 60; background: rgba(8,14,28,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
#mgm-radar[hidden] { display: none; }
.mgm-kart { background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 12px; max-width: min(96vw, 1100px); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.mgm-bas { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--panel-border); font-size: 13px; }
.mgm-not { color: var(--text-dim); font-size: 11.5px; margin-right: auto; }
#mgm-img { display: block; max-width: 100%; max-height: calc(94vh - 52px); object-fit: contain; background: #fff; }


/* Ücretsiz planda kilitli model düğmeleri: soluk, tıklanmaz; yanındaki
   bağlantı fiyat sayfasına götürür. Tek ton (lacivert/gri), renk tonu yok. */
.mgm-btn.locked { opacity: .55; cursor: not-allowed; display: inline-flex; align-items: center; gap: 5px; }
.mgm-btn.locked:hover { color: var(--text-dim); border-color: var(--panel-border); }
.mgm-btn.locked svg, .mgm-kilit svg { width: 12px; height: 12px; flex: none; }
.mgm-kilit {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--accent); text-decoration: none; margin-left: 4px;
}
.mgm-kilit:hover { text-decoration: underline; }
.hb-kilit { margin: 12px 14px 14px; }