/* ═══════════════════════════════════════════════════════════════════
   ÜST ŞERİT — YENİ ESTETİK (kullanıcı isteği)
   ------------------------------------------------------------------
   İKİ REFERANS:
     1) Mevcut marka bloğu — marka kutusu + isim + alt başlık
     2) 2. görsel — koyu panelde İKONLU menü satırları, aktif satırda
        sol kenarda turkuaz şerit + vurgulu zemin, satırlar arasında
        ince ayraç

   DEĞİŞENLER:
     · Sekmeler artık "çıplak metin" değil: her birinde küçük ikon,
       hover/aktif hâlde yumuşak zemin + altın alt çizgi
     · Aktif sekme sol kenarında altın şerit (2. görseldeki mantık)
     · Marka bloğu: harf kutusu köşe çentikli, isim harf aralığı
       dengeli, alt başlık ayraçlı
     · Şerit yüksekliği sıkılaştırıldı, yapışkan gölge eklendi

   Dosya site.css'ten SONRA yüklenir.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ŞERİT: yapışkan, cam efektli, yumuşak gölge ────────────────── */
.ust{
  background:color-mix(in srgb,var(--void) 90%,transparent);
  backdrop-filter:blur(18px) saturate(1.25);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 12%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--gold) 6%,transparent),
             0 18px 44px -34px rgba(0,0,0,.9);
}

/* ══════════════ SEKMELER ═════════════════════════════════════════
   İkonlu, kapsüllü. Aktif olanın solunda ince altın şerit. */
.sekme{
  gap:4px;
  padding:9px 0 8px;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 10%,transparent);
}
.sekme a{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border-radius:2px;
  color:var(--muted);
  font-size:10px;letter-spacing:.15em;
  border:1px solid transparent;
  transition:color .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease);
}
/* alt çizgi animasyonu kaldırıldı — yerine zemin + sol şerit */
.sekme a::after{display:none}

/* ikon: 13px, marka rengini alır */
.sekme a svg{
  width:13px;height:13px;flex:none;
  opacity:.7;
  transition:opacity .3s var(--ease),transform .3s var(--ease),
             color .3s var(--ease);
}
.sekme a:hover{
  color:var(--gold-hi);
  background:color-mix(in srgb,var(--gold) 6%,transparent);
  border-color:color-mix(in srgb,var(--gold) 18%,transparent);
}
.sekme a:hover svg{opacity:1;transform:translateY(-1px)}
.sekme a:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px;
}

/* ── AKTİF SEKME: sol şerit + zemin + tam parlak ikon ───────────── */
.sekme a[aria-current="page"]{
  color:var(--gold);
  background:color-mix(in srgb,var(--gold) 9%,transparent);
  border-color:color-mix(in srgb,var(--gold) 26%,transparent);
}
.sekme a[aria-current="page"] svg{opacity:1}
/* sol kenarda dikey altın şerit (2. görseldeki mantık) */
.sekme a[aria-current="page"]::before{
  content:'';position:absolute;left:-1px;top:16%;bottom:16%;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  border-radius:1px;
}

/* rozet ("Yeni") */
.sekme .rozet{
  margin-left:2px;padding:2px 6px;border-radius:1px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  color:var(--void);
  font-size:7px;letter-spacing:.13em;font-weight:600;
  vertical-align:0;
}

/* ══════════════ MARKA BLOĞU ══════════════════════════════════════
   Harf kutusu: köşe çentikli, içten ışıklı. İsim: dengeli harf
   aralığı. Alt başlık: noktalı ayraçlarla bölünmüş. */
.logo{gap:clamp(12px,1.5vw,20px)}
.logo__harf{
  position:relative;
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--gold) 22%,transparent),transparent 68%),
    color-mix(in srgb,var(--void-2) 82%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 52%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--gold) 26%,transparent),
    0 12px 34px -18px color-mix(in srgb,var(--gold) 70%,transparent);
}
/* köşe çentikleri: dört kısa çizgi */
.logo__harf::before,
.logo__harf::after{
  content:'';position:absolute;width:7px;height:7px;pointer-events:none;
  border-color:var(--gold-hi);border-style:solid;
}
.logo__harf::before{left:3px;top:3px;border-width:1px 0 0 1px}
.logo__harf::after{right:3px;bottom:3px;border-width:0 1px 1px 0}

.logo__ad{
  letter-spacing:.015em;
  /* hafif altın gradyan — düz beyaz yerine "mühür" hissi */
  background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 72%,var(--gold) 28%));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ink);
}
.logo__alt{
  color:var(--muted-2);
  letter-spacing:.24em;
  /* alt başlık: ortada nokta ayraçlar */
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
/* mevcut metin içindeki "·" zaten ayraç; ince çizgiyle güçlendir */
.logo__alt::before{
  content:'';width:22px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 60%,transparent));
}

/* marka bloğuna hover: kutu hafif parlar, isim altına ince çizgi */
.logo--bag .logo__harf{transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.logo--bag:hover .logo__harf{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--gold) 40%,transparent),
    0 16px 40px -16px color-mix(in srgb,var(--gold) 85%,transparent);
}
.logo--bag:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

/* ══════════════ ARAMA ════════════════════════════════════════════ */
.ara__satir{
  border-color:color-mix(in srgb,var(--gold) 16%,transparent);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--gold) 3%,transparent),transparent),
    var(--field);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.ara__satir:focus-within{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent),
             0 0 26px -12px color-mix(in srgb,var(--gold) 55%,transparent);
}
/* sunucu seçici: ayrı bölme, altın başlık */
.ara__sunucu{
  border-right:1px solid var(--line);
}

/* ══════════════ MOBİL ════════════════════════════════════════════
   Menü düğmesi ve açılır liste; ikonlar korunur, satırlar tam
   genişlik olur (2. görseldeki satır mantığı). */
.ust__menu{
  border-radius:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background .3s var(--ease);
}
.ust__menu:hover{background:color-mix(in srgb,var(--gold) 7%,transparent)}

@media (max-width:900px){
  .sekme{
    flex-direction:column;align-items:stretch;gap:1px;
    padding:8px 0 10px;
  }
  .sekme a{
    justify-content:flex-start;
    padding:12px 14px;
    font-size:11px;letter-spacing:.1em;
    border-radius:0;
    border-width:0 0 1px 0;
    border-color:color-mix(in srgb,var(--line) 70%,transparent);
  }
  .sekme a svg{width:15px;height:15px}
  /* aktif satır: sol kenarda tam boy şerit (2. görsel) */
  .sekme a[aria-current="page"]{
    background:color-mix(in srgb,var(--gold) 8%,transparent);
  }
  .sekme a[aria-current="page"]::before{
    top:0;bottom:0;left:0;width:3px;border-radius:0;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--gold) 30%,transparent),var(--gold),
      color-mix(in srgb,var(--gold) 30%,transparent));
  }
  /* gizli menü açılınca görünsün */
  .sekme.aciq{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .sekme a,.sekme a svg,.logo__harf,.ara__satir{transition:none}
}