/* ════════════════════════════════════════════════════════════════════
   shared/nav/nav.css
   Üst menü (desktop) + hamburger drawer (mobil) + 4'lü alt nav (mobil).
   Cinematic cyan/blue. Mor YOK. Tüm sayfalarda tutarlı.
   ════════════════════════════════════════════════════════════════════ */

/* ── DESKTOP ÜST MENÜ ŞERİDİ ──────────────────────────────────────── */
.vdn-topnav {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px 24px; border-bottom:1px solid var(--v4-border, rgba(255,255,255,0.06));
  background:linear-gradient(180deg, rgba(10,22,40,0.72), rgba(2,5,13,0.55));
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  position:sticky; top:0; z-index:35;
}
.vdn-topnav a {
  position:relative; text-decoration:none; font-size:13px; font-weight:500;
  color:var(--v4-text-2, #7FA9C9); padding:9px 14px; border-radius:8px;
  transition:color .2s ease, background .2s ease; white-space:nowrap;
}
.vdn-topnav a:hover { color:var(--v4-text, #EAF6FF); background:rgba(0,209,255,0.05); }
.vdn-topnav a.active { color:var(--v4-cyan, #00D1FF); }
.vdn-topnav a.active::after {
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--v4-grad-cta, linear-gradient(135deg,#00D1FF,#007BFF)); border-radius:2px;
}
.vdn-topnav a.vdn-premium {
  color:var(--v4-warn, #FFC247); border:1px solid color-mix(in srgb, var(--v4-warn,#FFC247) 30%, transparent);
  margin-left:auto;
}
.vdn-topnav a.vdn-premium:hover { background:rgba(255,194,71,0.08); }

/* ── HAMBURGER (mobil) ────────────────────────────────────────────── */
.vdn-burger {
  display:none; align-items:center; justify-content:center; gap:4px; flex-direction:column;
  width:40px; height:40px; border:1px solid var(--v4-border-hi, rgba(0,209,255,0.22));
  border-radius:10px; background:rgba(0,209,255,0.04); cursor:pointer; padding:0;
}
.vdn-burger span { display:block; width:18px; height:2px; background:var(--v4-cyan, #00D1FF); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.vdn-burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.vdn-burger.open span:nth-child(2){ opacity:0; }
.vdn-burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── DRAWER ───────────────────────────────────────────────────────── */
.vdn-drawer-overlay {
  position:fixed; inset:0; z-index:90; background:rgba(2,5,13,0.6);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.vdn-drawer-overlay.open { opacity:1; visibility:visible; }
.vdn-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:91; width:min(82vw, 320px);
  background:var(--v4-grad-panel, linear-gradient(180deg,#0d1d36,#02050d));
  border-left:1px solid var(--v4-border-hi, rgba(0,209,255,0.22));
  box-shadow:-20px 0 60px rgba(0,0,0,0.6);
  transform:translateX(100%); transition:transform .3s cubic-bezier(0.22,1,0.36,1);
  display:flex; flex-direction:column; padding:20px 0;
}
.vdn-drawer.open { transform:translateX(0); }
.vdn-drawer-hdr { display:flex; align-items:center; justify-content:space-between; padding:0 20px 16px; border-bottom:1px solid var(--v4-border, rgba(255,255,255,0.06)); margin-bottom:10px; }
.vdn-drawer-hdr .t { font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--v4-text-3, #4a6a85); }
.vdn-drawer-close { background:transparent; border:1px solid var(--v4-border, rgba(255,255,255,0.06)); color:var(--v4-text-2,#7FA9C9); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px; }
.vdn-drawer a {
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--v4-text-2, #7FA9C9);
  font-size:15px; padding:14px 22px; border-left:2px solid transparent; transition:all .2s ease;
}
.vdn-drawer a .ic { width:22px; text-align:center; font-size:16px; }
.vdn-drawer a:hover { color:var(--v4-text, #EAF6FF); background:rgba(0,209,255,0.05); }
.vdn-drawer a.active { color:var(--v4-cyan, #00D1FF); border-left-color:var(--v4-cyan, #00D1FF); background:rgba(0,209,255,0.06); }

/* ── ALT NAV (mobil, 4 kısayol) — standalone sayfalarda oluşturulur ── */
.vdn-bottomnav {
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:linear-gradient(180deg, rgba(7,17,31,0.92), rgba(2,5,13,0.98));
  border-top:1px solid var(--v4-border-hi, rgba(0,209,255,0.18));
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.vdn-bottomnav .vdn-bn-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; color:var(--v4-text-3, #4a6a85); cursor:pointer; text-decoration:none;
  font-size:10px; letter-spacing:0.4px; transition:color .2s ease;
}
.vdn-bottomnav .vdn-bn-item .ic { font-size:18px; line-height:1; }
.vdn-bottomnav .vdn-bn-item.active { color:var(--v4-cyan, #00D1FF); }

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:768px){
  .vdn-topnav { display:none; }
  .vdn-burger { display:flex; }
  .vdn-bottomnav { display:flex; }

  /* index.html mobil temizliği — kaldırılacak öğeler (geri alınabilir) */
  body.vdn-host #fabBtn,
  body.vdn-host #swipePanel,
  body.vdn-host #swipeOverlay { display:none !important; }
}
@media (min-width:769px){
  .vdn-burger, .vdn-drawer, .vdn-drawer-overlay { display:none !important; }
  .vdn-bottomnav { display:none !important; }
}

/* Header marka (coin + isim) — index dışı sayfalarda nav başında */
.vdn-brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:var(--v4-text,#EAF6FF);text-decoration:none;margin-right:16px;letter-spacing:.3px;flex-shrink:0;}
.vdn-brand img{display:block;border-radius:50%;width:22px;height:22px;}
.vdn-brand span{white-space:nowrap;}
.vdn-brand:hover{color:var(--v4-cyan,#00D1FF);}
@media (max-width:560px){ .vdn-brand span{display:none;} }