/* ===================================================================
   ENA MODERN — PANEL MARKA KATMANI
   -------------------------------------------------------------------
   TÜM /client/* sayfalarında yüklenir. Yükleyen yer:
   ena/views/client/layouts/app.blade.php içindeki <head>, tam olarak
   iskeletin gömülü <style> bloğundan SONRA ve "styles" yield'inden
   ÖNCE — böylece sayfaya özel katmanlar (ör. store.css) bunu ezebilir.

   NEDEN theme.css DEĞİL: theme.css tanıtım sitesi için yazıldı ve
   .btn-primary / .btn-outline / .btn-accent gibi adları da tanımlıyor.
   Bu adlar panelde başka anlamda kullanılıyor; theme.css'i panele
   yüklemek panelin kendi bileşenlerini bozardı.

   Burada YALNIZCA her panel sayfasında ortak olan şeyler var:
   yazı tipi, üst bar, alt bilgi. Mağazaya özel olan her şey
   store.css içinde.
   =================================================================== */

:root {
    --ena-ink:        #0d1224;
    --ena-navy:       #0a2c66;
    --ena-blue:       #1e88ff;
    --ena-blue-deep:  #1668d6;
    --ena-cyan:       #00c2ff;
    --ena-grad:       linear-gradient(135deg, #1e88ff 0%, #00c2ff 100%);
    --ena-grad-deep:  linear-gradient(135deg, #2b94ff 0%, #1668d6 100%);
    --ena-sh-1: 0 1px 2px rgba(13,18,36,.05), 0 1px 3px rgba(13,18,36,.04);
    --ena-sh-2: 0 12px 28px -10px rgba(10,44,102,.18), 0 4px 10px -4px rgba(10,44,102,.08);
    --ena-sh-3: 0 30px 60px -18px rgba(10,44,102,.26), 0 10px 22px -10px rgba(10,44,102,.14);
    --ena-ring: 0 0 0 4px rgba(30,136,255,.14);
}

/* ── Tipografi ────────────────────────────────────────────────────
   Panel gövdesi Inter'e sabitlenmiş; marka yazı tipi Poppins.
   --theme-font-family zaten tanımlı ama iskelet onu kullanmıyor. */
body,
.pn-navbar, .pn-main, .pn-footer,
.btn, .pn-input, .form-control,
h1, h2, h3, h4 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── ÜST BAR ──────────────────────────────────────────────────────
   Panelin beyaz üst barı iki sorun üretiyordu:
   1) Yüklenen logo koyu zemin sürümü (beyaz yazılı) — beyaz barda
      marka adı görünmüyordu, yalnızca ikon çıkıyordu. Bu her panel
      sayfasında böyleydi, sadece mağazada değil.
   2) Tanıtım sitesinin koyu menüsünden panele geçince görsel kimlik
      tamamen değişiyordu.
   Koyu lacivert bar ikisini birden çözüyor. */
.pn-navbar {
    background: linear-gradient(180deg, rgba(13,18,36,.97) 0%, rgba(10,44,102,.97) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 6px 24px -12px rgba(10,44,102,.55) !important;
    backdrop-filter: saturate(140%) blur(10px);
}
.pn-navbar-inner { height: 66px; }
.pn-brand img { max-height: 34px !important; }

.pn-navbar .pn-nav-link {
    color: rgba(255,255,255,.78) !important;
    font-weight: 500;
    border-radius: 9px;
}
.pn-navbar .pn-nav-link:hover,
.pn-navbar .pn-nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.11) !important;
}

/* Açılır menüler koyu barın altında açılıyor; kendileri açık kalıyor
   ki okunaklılık düşmesin. */
.pn-navbar .pn-dropdown {
    border: 1px solid rgba(10,44,102,.12);
    border-radius: 14px;
    box-shadow: var(--ena-sh-3);
    padding: 8px;
}

/* Hizmetler açılırındaki bölüm başlıkları (Ürün Grupları / Alan Adları / SSL).
   Menü uzun olduğu için kullanıcı nereye baktığını görmeli; başlıklar tıklanabilir
   değil, sadece ayırıcı. */
.pn-navbar .pn-dropdown .pn-dd-sec {
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(10,44,102,.45);
    border-top: 1px solid rgba(10,44,102,.09);
    margin-top: 6px;
}
.pn-navbar .pn-dropdown .pn-dd-sec:first-child {
    border-top: 0;
    margin-top: 0;
}
:root[data-theme="dark"] .pn-navbar .pn-dropdown .pn-dd-sec {
    color: rgba(255,255,255,.42);
    border-top-color: rgba(255,255,255,.1);
}

/* Girişli kullanıcının adının olduğu buton koyu barda da okunmalı. */
.pn-navbar .pn-user-btn {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.2) !important;
}
.pn-navbar .pn-user-btn:hover {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}
.pn-navbar .pn-avatar {
    background: var(--ena-grad) !important;
    color: #fff !important;
}

/* Sağ üstteki misafir butonları */
.pn-nav-right .btn-outline {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.28) !important;
}
.pn-nav-right .btn-outline:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.5) !important;
}
.pn-nav-right .btn-primary {
    background: var(--ena-grad) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 16px -6px rgba(30,136,255,.6);
}
.pn-nav-right .btn-primary:hover { background: var(--ena-grad-deep) !important; }

/* Karanlık mod düğmesi de koyu barda */
.pn-nav-right .dark-toggle {
    color: rgba(255,255,255,.75) !important;
    border-color: rgba(255,255,255,.22) !important;
}
.pn-nav-right .dark-toggle:hover { color: #fff !important; }

.pn-hamburger span { background: #fff !important; }

/* Mobil menü koyu barın altından açılıyor */
.pn-mobile-menu { border-top: 1px solid rgba(255,255,255,.08); }

/* ── DAR EKRAN: ÜST BAR TAŞMASI ───────────────────────────────────
   İskeletin üst barı telefonda sayfayı yatay kaydırıyordu: 384 px
   pencerede gövde 479 px oluyordu. Sebep sağ üst blok — dil seçici
   (bayrak + "Türkçe" + ok) yanında iki buton, artı hamburger; toplam
   303 px yalnızca sağ taraf. Bu her panel sayfasında vardı, mağazaya
   ya da karşılaştırma tablosuna özgü değil (tablo kendi kabında kayıyor,
   sayfayı kaydırmıyor).

   Çözüm: dar ekranda dil seçici bayrağa iner, Giriş/Kayıt butonları
   üst bardan kalkar — ikisi de mobil menüye eklendi, yani hiçbir yol
   kaybolmuyor. */
@media (max-width: 640px) {
    .pn-navbar-inner { padding: 0 14px; gap: 6px; }

    /* Dil seçici: bayrak kalır, etiket ve ok gizlenir.
       Yalnızca üst bardaki düğmeyi hedefler; açılır menüdeki dil
       adları düz metin düğümü ve .pn-nav-link taşımıyor, etkilenmez. */
    .pn-nav-right > .pn-nav-item > .pn-nav-link > span,
    .pn-nav-right > .pn-nav-item > .pn-nav-link > .pn-chevron { display: none; }
    .pn-nav-right > .pn-nav-item > .pn-nav-link { padding: 7px 9px; }

    /* Misafirdeki iki buton mobil menüde duruyor.
       !important şart: derlenmiş app.css içinde ".btn{display:inline-flex
       !important}" var ve özgüllük yetmiyor — importantsız yazılınca kural
       CSSOM'a giriyor, medya sorgusu eşleşiyor ama uygulanmıyordu. */
    .pn-nav-right > .btn { display: none !important; }

    /* Girişli kullanıcıda ad gizlenir, baş harf rozeti kalır.
       Ad düz metin düğümü olduğu için display ile gizlenemiyor;
       font-size 0 ile kapatılıp rozette geri açılıyor. */
    .pn-navbar .pn-user-btn { font-size: 0 !important; padding: 5px 7px !important; gap: 0 !important; }
    .pn-navbar .pn-user-btn .pn-avatar { font-size: 12px !important; }
    .pn-navbar .pn-user-btn .pn-chevron { display: none; }
}

/* ── DAR EKRAN: SATIR İÇİ IZGARA TAŞMALARI ────────────────────────
   İki iskelet şablonu ızgarayı satır içi stille kuruyor ve dar ekranda
   tek sütuna inmiyor; sayfa yatay kayıyordu:
     client/contact.blade.php:12      grid-template-columns: 1fr 380px
     client/kb/index.blade.php:27     minmax(340px, 1fr)
   Şablonları ezmek yerine (iki dosya daha güncelleme borcu demek olurdu)
   satır içi değere göre hedefleniyor. Yukarı akış bu değerleri
   değiştirirse kural sessizce devre dışı kalır — bozmaz, yalnızca
   taşma geri gelir. Satır içi stil olduğu için !important şart. */
@media (max-width: 700px) {
    .pn-main div[style*="1fr 380px"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px) {
    .pn-main div[style*="minmax(340px"] { grid-template-columns: 1fr !important; }
}

/* ── ALT BİLGİ ────────────────────────────────────────────────── */
.pn-footer { border-top: 1px solid var(--border); }
.pn-footer a { color: var(--ena-blue); }

/* ── KARANLIK MOD ─────────────────────────────────────────────── */
:root[data-theme="dark"] .pn-navbar .pn-dropdown { border-color: rgba(255,255,255,.1); }
