/* ============================================================
 * XREX — Ortak Gezinme Stilleri  v3.0
 *
 * Bu dosya SADECE xrex-nav.js'in kendi kurduğu öğeleri biçimlendirir
 * (.xnav-* önekli sınıflar). Sayfaların kendi CSS'iyle çakışmaz:
 * hiçbir genel etiket seçicisi (body, a, button) kullanılmaz.
 * ============================================================ */

:root{
  --xnav-bg:#0f1524;
  --xnav-bg-2:#151d31;
  --xnav-line:rgba(255,255,255,.09);
  --xnav-text:#e8eefc;
  --xnav-muted:#93a1bd;
  --xnav-accent:#2f73f6;
  --xnav-accent-2:#7c5cf0;
  --xnav-w:264px;
}

/* ---------- Üst çubuk (kenar menüsü olmayan sayfalarda) ---------- */
.xnav-bar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:12px;
  height:56px; padding:0 14px;
  background:var(--xnav-bg); color:var(--xnav-text);
  border-bottom:1px solid var(--xnav-line);
}
.xnav-brand{
  font-weight:900; letter-spacing:.14em; font-size:.9rem;
  color:var(--xnav-text); text-decoration:none;
  background:linear-gradient(135deg,var(--xnav-accent),var(--xnav-accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.xnav-burger{
  width:38px; height:38px; flex:none;
  display:grid; place-content:center; gap:5px;
  background:transparent; border:1px solid var(--xnav-line);
  border-radius:10px; cursor:pointer; padding:0;
}
.xnav-burger span{
  display:block; width:17px; height:2px; border-radius:2px;
  background:var(--xnav-text); transition:transform .2s,opacity .2s;
}
.xnav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.xnav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.xnav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Açılır çekmece ---------- */
.xnav-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:80;
  width:var(--xnav-w); max-width:82vw;
  background:var(--xnav-bg); border-right:1px solid var(--xnav-line);
  transform:translateX(-100%); transition:transform .26s ease;
  display:flex; flex-direction:column; padding:16px 12px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.xnav-drawer.open{transform:translateX(0)}
.xnav-drawer-head{
  font-weight:900; letter-spacing:.16em; font-size:.82rem;
  color:var(--xnav-muted); padding:6px 10px 14px;
}
.xnav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; margin-bottom:3px; border-radius:11px;
  color:var(--xnav-muted); text-decoration:none;
  font-size:.9rem; font-weight:600; transition:background .16s,color .16s;
}
.xnav-item:hover{background:var(--xnav-bg-2); color:var(--xnav-text)}
.xnav-item.active{
  background:linear-gradient(135deg,rgba(47,115,246,.20),rgba(124,92,240,.18));
  color:#fff;
}
.xnav-item i{width:19px; text-align:center; font-size:15px}
.xnav-drawer-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--xnav-line)}
.xnav-drawer-foot button{
  width:100%; min-height:40px; border:1px solid var(--xnav-line);
  background:transparent; color:var(--xnav-muted);
  border-radius:11px; font:inherit; font-weight:700; cursor:pointer;
}
.xnav-drawer-foot button:hover{color:var(--xnav-text); background:var(--xnav-bg-2)}

/* ---------- Karartma ---------- */
.xnav-scrim{
  position:fixed; inset:0; z-index:70;
  background:rgba(8,13,24,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .22s,visibility .22s;
}
.xnav-scrim.show{opacity:1; visibility:visible}

/* ---------- Mevcut kenar menülü sayfalarda mobil düğme ---------- */
.xnav-fab{
  position:fixed; left:14px; bottom:16px; z-index:75;
  width:48px; height:48px; display:none; place-content:center; gap:5px;
  border:0; border-radius:14px; cursor:pointer; padding:0;
  background:linear-gradient(135deg,var(--xnav-accent),var(--xnav-accent-2));
  box-shadow:0 10px 26px rgba(47,115,246,.34);
}
.xnav-fab span{display:block; width:18px; height:2px; border-radius:2px; background:#fff}

/* Kenar menüsü mobilde açılabilsin — sayfanın kendi kuralı yoksa devreye girer */
@media (max-width:900px){
  .xnav-fab{display:grid}
  .sidebar.xnav-open{transform:translateX(0) !important}
}
@media (min-width:901px){
  .xnav-scrim{display:none}
}

/* ---------- Çekmeceli sayfalarda içerik taşmasın ---------- */
.xnav-has-bar .wrap{padding-top:20px}

/* ---------- Dokunmatik hedef boyutu ---------- */
@media (max-width:640px){
  .xnav-item{padding:13px 12px; font-size:.94rem}
  .xnav-bar{height:52px}
}

/* ============================================================
   v3.3 — MENÜ GÖRÜNÜM BİRLİĞİ
   Sayfaların .sidebar CSS'i birbirinden farklıydı: kimi koyu, kimi açık,
   satır yükseklikleri ve ikon boşlukları tutmuyordu. Aşağıdaki kurallar
   yalnızca gezinme BAĞLANTILARINI hizalar; kenar çubuğunun kendi arka
   planına, genişliğine ve sayfanın geri kalanına dokunmaz.
   ============================================================ */

.sidebar a.nav-link[data-xnav],
#sidebar a.nav-link[data-xnav]{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin:0 0 3px;
  border-radius:11px;
  font-size:.9rem; font-weight:600; line-height:1.3;
  text-decoration:none;
  white-space:nowrap; overflow:hidden;
  transition:background .16s ease, color .16s ease;
}

/* İkon: sabit genişlik — yazılar aynı hizadan başlasın */
.sidebar a.nav-link[data-xnav] > i,
#sidebar a.nav-link[data-xnav] > i{
  flex:none; width:20px; text-align:center; font-size:15px;
}

.sidebar a.nav-link[data-xnav] > .nav-txt,
#sidebar a.nav-link[data-xnav] > .nav-txt{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
}

/* Etkin sayfa — tüm sayfalarda aynı vurgu */
.sidebar a.nav-link[data-xnav].active,
#sidebar a.nav-link[data-xnav].active{
  background:linear-gradient(135deg, rgba(47,115,246,.16), rgba(124,92,240,.14));
  font-weight:800;
}

/* Açık zeminli kenar çubuklarında okunur renk */
.sidebar a.nav-link[data-xnav]:hover,
#sidebar a.nav-link[data-xnav]:hover{
  background:rgba(47,115,246,.10);
}

@media (max-width:720px){
  .sidebar a.nav-link[data-xnav],
  #sidebar a.nav-link[data-xnav]{ padding:12px; font-size:.94rem; }
}
