/* ════════════════════════════════════════════════════════════════════
   HEADER — nicdark (Pesce) düzeni:
   üst bar koyu lacivert (beyaz yazı) · ana bar beyaz (lacivert menü)
   sağda kenara taşan açık mavi aksiyon bloğu (arama/sepet/hesap)
   Spec: docs/superpowers/specs/2026-07-15-nicdark-header-design.md
   ════════════════════════════════════════════════════════════════════ */

:root {
    --hd-top-bg: #0b1826;                 /* üst bar — çok koyu lacivert */
    --hd-navy: #0d395e;                   /* ana bar metin/logo rengi */
    --hd-accent: #79a1bb;                 /* vurgu + sağ aksiyon bloğu */
    --hd-top-text: rgba(255, 255, 255, .92);
    --hd-line: rgba(255, 255, 255, .12);
}

/* ── Kabuk: sabit; renkler bar bazında ── */
.eh {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1030;
    transition: box-shadow .35s ease;
}
.eh--scrolled { box-shadow: 0 10px 30px rgba(13, 57, 94, .18); }

/* ── ÜST BAR — koyu zemin + deniz ürünleri foto dokusu, beyaz yazı ── */
.eh-top {
    background:
        linear-gradient(90deg, var(--hd-top-bg) 0%, rgba(11, 24, 38, .86) 60%, rgba(11, 24, 38, .72) 100%),
        url("../img/header/seafood-dark.jpg") right center / cover no-repeat var(--hd-top-bg);
    color: var(--hd-top-text);
}
.eh-top a { color: var(--hd-top-text); text-decoration: none; }
.eh-top-inner {
    max-width: 1480px; margin: 0 auto; padding: .6rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Sol: ikonlu iletişim bilgileri (mail / telefon / adres) */
.eh-contact { display: flex; align-items: center; gap: 1.6rem; min-width: 0; }
.eh-contact-item {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    white-space: nowrap; max-width: 400px; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s ease;
}
.eh-contact-item i { font-size: .9rem; flex: 0 0 auto; }
.eh-contact-item:hover { color: var(--hd-accent); }

/* Sağ: yasal linkler │ sosyal ikonlar (daire zeminli) */
.eh-top-right { display: flex; align-items: center; gap: 1.2rem; flex: 0 0 auto; }
.eh-legal { display: flex; align-items: center; gap: 1.4rem; }
.eh-legal-link {
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    white-space: nowrap; transition: color .2s ease;
}
.eh-legal-link:hover { color: var(--hd-accent); }
.eh-top-sep { width: 1px; height: 16px; background: var(--hd-line); }
.eh-social { display: flex; align-items: center; gap: .5rem; }
.eh-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(121, 161, 187, .38);
    color: #fff; font-size: .78rem;
    transition: background .2s ease, transform .2s ease;
}
.eh-social a:hover { background: var(--hd-accent); transform: translateY(-1px); }

/* ── ANA BAR — beyaz zemin + eskiz dokusu (ahtapot/balık), lacivert menü ── */
.eh-main {
    /* eskiz motifleri (ahtapot sol, balık sağ) bar şeridine denk gelsin diye dikey %22 */
    background: url("../img/header/sketch-light.jpg") 0 22% / cover no-repeat #fff;
    color: var(--hd-navy); overflow: clip;
}
.eh-main a { color: var(--hd-navy); text-decoration: none; }
.eh-main-inner {
    max-width: 1480px; margin: 0 auto; padding: 0;
    min-height: 84px;
    display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem;
}
.eh-logo { display: flex; align-items: center; flex: 0 0 auto; }
.eh-logo-img { height: 80px; width: auto; }
.eh-logo-text { font-weight: 800; font-size: 1.4rem; color: var(--hd-navy); letter-spacing: .02em; }

/* Menü: ortada değil — sağa dayalı (mavi aksiyon bloğunun yanına) */
.eh-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; margin-left: auto; margin-right: 2.5rem; }
.eh-nav-link {
    position: relative; padding: .35rem 0;
    font-size: .95rem; font-weight: 600; letter-spacing: .01em;
    transition: color .2s ease;
}
.eh-nav-link:hover { color: var(--hd-accent) !important; }
.eh-nav-link::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
    background: var(--hd-accent); transition: width .25s ease;
}
.eh-nav-link:hover::after { width: 100%; }

/* Sağ: kenara taşan açık mavi aksiyon bloğu (arama / sepet / hesap) */
.eh-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    align-self: stretch;
    background: linear-gradient(rgba(121, 161, 187, .88), rgba(121, 161, 187, .88)), url("../img/header/seafood-dark.jpg") center / cover no-repeat var(--hd-accent);
    background-attachment: scroll, fixed;
    padding: 2rem 4rem;
}
.eh-actions::after {
    /* blok sayfanın sağ kenarına kadar uzar (max-width dışında da);
       fixed attachment ile ana bloğun dokusuyla dikişsiz birleşir */
    content: ""; position: absolute; left: 100%; top: 0; bottom: 0;
    width: 50vw;
    background:
        linear-gradient(rgba(121, 161, 187, .88), rgba(121, 161, 187, .88)),
        url("../img/header/seafood-dark.jpg") center / cover no-repeat var(--hd-accent);
    background-attachment: scroll, fixed;
}
.eh-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(13, 57, 94, .28); border: 0;
    color: #fff !important; font-size: 1.05rem; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.eh-action:hover { background: var(--hd-navy); transform: translateY(-1px); }

/* Mobil hamburger (mavi blok içinde, daire zeminli) */
.eh-burger {
    display: none; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(13, 57, 94, .28); border: 0;
    color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
    transition: background .2s ease;
}
.eh-burger:hover { background: var(--hd-navy); }

/* ── Responsive: mobilde üst bar gizli; logo + sepet + hamburger ── */
@media (max-width: 991px) {
    .eh-top { display: none; }
    .eh-nav { display: none; }
    .eh-action--search, .eh-action--account { display: none; }
    .eh-burger { display: inline-flex; }
    .eh-logo-img { height: 44px; }
    .eh-main-inner { min-height: 64px; padding-left: 1rem; }
    .eh-actions { padding: 0 1rem; }
}