/* navx.css - Tamamen izole mobil/desktop navigasyon bileşeni
 * BEM benzeri adlandırma: .navx, .navx__toggle, .navx__icon, .navx__panel, .navx__list, .navx__item, .navx__link
 * Çakışmayı önlemek için sadece .navx namespace kullanılır; global hiçbir .navmenu/.mobile-nav-toggle kullanılmaz.
 */
:root {
  --navx-bg: #121212;
  --navx-bg-panel: #181818;
  --navx-border: #2a2a2a;
  --navx-link: #f5f5f5;
  --navx-link-hover: #ffffff;
  --navx-accent: #0078ff;
  --navx-radius: 18px;
  --navx-z: 12000;
  --navx-transition: 260ms cubic-bezier(.55,.1,.25,1);
  --navx-backdrop: rgba(0,0,0,.50);
}

/* Light tema varyantı (beyaz arka plan + koyu metin) */
.navx--light {
  --navx-bg: #ffffff;
  --navx-bg-panel: #ffffff;
  --navx-border: #e2e2e2;
  --navx-link: #222222;
  --navx-link-hover: #000000;
  --navx-backdrop: rgba(0,0,0,.35);
}

/* Light tema spesifik görünümler */
.navx--light .navx__toggle { background:#f3f3f3; border-color:#d8d8d8; }
.navx--light .navx__toggle:hover { background:#ececec; }
.navx--light .navx__toggle[aria-expanded="true"] { background:#e9e9e9; border-color:#cccccc; }
.navx--light .navx__icon-line { background: linear-gradient(90deg,#222,#555); }
.navx--light .navx__panel { box-shadow: -12px 0 32px -8px rgba(0,0,0,.20); }
.navx--light .navx__link { color:var(--navx-link); }
.navx--light .navx__link:hover, .navx--light .navx__link:focus { background:rgba(0,0,0,.06); color:var(--navx-link-hover); }
.navx--light .navx__link[aria-current="page"], .navx--light .navx__link.active { color:#fff; background: linear-gradient(95deg,#0a3158,#084d8f); }
.navx--light .navx__item--cta .navx__link { background:linear-gradient(135deg,#0078ff,#00b4ff); color:#fff; }

@media (min-width:992px){
  .navx--light .navx__link { background:transparent; }
  .navx--light .navx__link:hover { background:rgba(0,0,0,.08); }
}

/* Kapsayıcı */
.navx { position: relative; display: flex; align-items: center; gap: 28px; }
.navx[hidden] { display:none !important; }

/* Toggle Button */
.navx__toggle { 
  -webkit-tap-highlight-color: transparent;
  background: #202020;
  border: 1px solid #2d2d2d;
  width: 50px; height: 50px; padding:0; cursor:pointer;
  display: inline-flex; align-items:center; justify-content:center;
  border-radius: var(--navx-radius);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.55);
  position: relative; z-index: var(--navx-z);
  transition: background .25s, box-shadow .25s, border-color .25s;
}
.navx__toggle:hover { background:#262626; }
.navx__toggle:focus-visible { outline:3px solid rgba(0,120,255,.6); outline-offset:3px; }
.navx__toggle[aria-expanded="true"] { background:#252525; border-color:#3a3a3a; }

/* Hamburger ikon (3 çizgi) */
.navx__icon { width:26px; height:18px; position:relative; }
.navx__icon-line { position:absolute; left:0; width:100%; height:3px; border-radius:2px; background: linear-gradient(90deg,#fff,#e9e9e9); transition: transform .5s cubic-bezier(.68,-0.55,.27,1.55), top .35s ease, opacity .25s ease; transform-origin:center; }
.navx__icon-line:nth-child(1){ top:0; }
.navx__icon-line:nth-child(2){ top:7.5px; }
.navx__icon-line:nth-child(3){ top:15px; }

/* X durumuna dönüşüm */
.navx__toggle[aria-expanded="true"] .navx__icon-line:nth-child(1){ top:7.5px; transform:rotate(45deg); }
.navx__toggle[aria-expanded="true"] .navx__icon-line:nth-child(2){ opacity:0; }
.navx__toggle[aria-expanded="true"] .navx__icon-line:nth-child(3){ top:7.5px; transform:rotate(-45deg); }

/* Panel + Backdrop */
.navx__panel-wrapper { position:fixed; inset:0; pointer-events:none; z-index: calc(var(--navx-z) - 2); }
.navx__backdrop { position:absolute; inset:0; background: var(--navx-backdrop); opacity:0; transition: opacity var(--navx-transition); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.navx__panel { position:absolute; top:0; right:0; width:min(80vw,320px); height:100dvh; background:var(--navx-bg-panel); border-left:1px solid var(--navx-border); box-shadow: -12px 0 32px -8px rgba(0,0,0,.55); transform:translateX(110%); display:flex; flex-direction:column; padding:96px 26px 26px; gap:8px; transition: transform .55s cubic-bezier(.71,-0.46,.29,1.46); overflow-y:auto; overscroll-behavior:contain; }

/* Açık durum */
.navx--open .navx__panel-wrapper { pointer-events:auto; }
.navx--open .navx__backdrop { opacity:1; }
.navx--open .navx__panel { transform:translateX(0); }

/* Liste ve linkler */
.navx__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.navx__item { margin:0; padding:0; }
.navx__link { display:block; width:100%; padding:12px 14px; color:var(--navx-link); font-weight:500; font-size:15px; text-decoration:none; letter-spacing:.3px; border-radius:12px; position:relative; transition: background .25s, color .25s, transform .25s; }
.navx__link:hover, .navx__link:focus { background:rgba(255,255,255,.07); color:var(--navx-link-hover); }
.navx__link[aria-current="page"], .navx__link.active { color:#fff; background: linear-gradient(95deg,#0a3158,#084d8f); }

/* CTA örneği */
.navx__item--cta .navx__link { background:linear-gradient(135deg,#0078ff,#00b4ff); color:#fff; font-weight:600; box-shadow:0 6px 18px rgba(0,120,255,.35); }
.navx__item--cta .navx__link:hover { filter:brightness(1.1); }

/* Desktop düzende panel yerine inline görünüm (>=992px) */
@media (min-width:992px){
  .navx__toggle { display:none; }
  .navx__panel-wrapper { position:static; inset:auto; pointer-events:auto; width:auto; height:auto; }
  .navx__backdrop { display:none !important; }
  .navx__panel { position:static; transform:none !important; flex-direction:row; height:auto; width:auto; background:transparent; box-shadow:none; border:none; padding:0; gap:0; overflow:visible; }
  .navx__list { flex-direction:row; align-items:center; }
  .navx__link { padding:10px 16px; border-radius:30px; background:transparent; }
  .navx__link:hover { background:rgba(255,255,255,.08); }
  .navx__item--cta .navx__link { margin-left:8px; }
}

/* Scroll kilidi */
body.navx-lock { overflow:hidden; touch-action:none; }

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .navx__icon-line, .navx__panel, .navx__backdrop { transition:none !important; }
}

/* Yüksek Kontrast / Kullanıcı tercihi (basit örnek) */
@media (prefers-contrast: more){
  .navx__link { outline:1px solid #666; }
  .navx__link:focus-visible { outline:2px solid #fff; }
}