/* =====================================================================
   GoreWin — Site başlığı (LikedWin düzeni: üst bar + logo barı + menü barı)
   Renkler site.css token'larından gelir; burada sabit renk yazılmaz.

   Yerleşim:
     1) .topbar   — ince duyuru şeridi + Görev Ver + gece modu (sayfayla kayar)
     2) .headbar  — logo + hesap/CTA (yapışkan kalır)
     3) .menubar  — ikonlu menü pill'leri (yapışkan kalır)
   ≤1080px'te topbar ve menubar gizlenir; hamburger + tam ekran menü devreye girer.
   ===================================================================== */

:root { --gw-topbar-h: 42px; }

.site-head {
    position: sticky;
    top: calc(-1 * var(--gw-topbar-h));   /* üst bar sayfayla gider, alt iki bar sabitlenir */
    z-index: 200;
    background: var(--bg);
    transition: box-shadow .25s ease;
}
/* Sayfa kaydırılınca başlık "otursun" (site.js ekler) */
.site-head.is-stuck { box-shadow: 0 8px 26px rgba(3, 20, 40, .07); }
:root[data-theme="dark"] .site-head.is-stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, .38); }

/* ---------- 1) Üst duyuru barı ---------- */
.topbar { border-bottom: 1px solid var(--line); }
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--gw-topbar-h);
    font-size: 13.5px;
}
.topbar__promo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    min-width: 0;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}
/* Kısaltma yalnızca YAZIDA — kaba overflow:hidden verilirse canlı noktanın
   nabız halkası (.live-dot::after, scale 1.7) kırpılır ve nokta yarım görünür. */
.topbar__promo-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar__promo strong { color: var(--text-strong); font-weight: 700; }

.topbar__aside {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}
.topbar__give {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    transition: color .2s ease;
}
.topbar__give:hover { color: var(--accent-text); }
.topbar__give i { font-size: 11px; }

/* Gece modu — sol çizgiyle ayrılmış sade metin düğmesi (LikedWin tarzı) */
.nightmode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px 5px 14px;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease;
}
.nightmode:hover { color: var(--accent-text); }
.nightmode i { font-size: 14px; }
/* Açık temada ay + "Gece Modu", koyu temada güneş + "Gündüz Modu" görünür
   (düğme her zaman GEÇİLECEK modu söyler). */
.nightmode__sun,
.nightmode__label--light { display: none; }
:root[data-theme="dark"] .nightmode__moon,
:root[data-theme="dark"] .nightmode__label--dark { display: none; }
:root[data-theme="dark"] .nightmode__sun,
:root[data-theme="dark"] .nightmode__label--light { display: inline-block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .nightmode__moon,
    :root:not([data-theme]) .nightmode__label--dark { display: none; }
    :root:not([data-theme]) .nightmode__sun,
    :root:not([data-theme]) .nightmode__label--light { display: inline-block; }
}

/* ---------- 2) Logo barı ---------- */
.headbar { border-bottom: 1px solid var(--line); }
.headbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 70px;
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand__img {
    width: auto;
    height: 38px;
    filter: var(--logo-filter);
    transition: transform .25s ease;
}
.brand:hover .brand__img { transform: scale(1.03); }

.head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* Hesap kartı — ikon + iki satır yazı (LikedWin account-btn düzeni) */
.account-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: var(--bg);
    transition: border-color .2s ease;
}
.account-btn:hover { border-color: var(--accent-line); }
.account-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    flex: none;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 14px;
}
.account-btn__text { display: flex; flex-direction: column; line-height: 1.15; }
.account-btn__title { font-size: 13px; font-weight: 800; color: var(--text-strong); }
.account-btn__sub { font-size: 11px; font-weight: 600; color: var(--ok-fg); margin-top: 2px; }
.account-btn__sub i { font-size: 9px; }

/* ---------- Hamburger (≤1080) ---------- */
.burger {
    display: none;
    width: 40px; height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-2);
    cursor: pointer;
    position: relative;
}
.burger span {
    position: absolute;
    left: 11px;
    width: 18px; height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 24px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 3) Menü barı ---------- */
.menubar { border-bottom: 1px solid var(--line); background: var(--bg); }
.menubar__inner {
    display: flex;
    align-items: stretch;
    min-height: 54px;
}
.site-nav { display: flex; align-items: center; }
.site-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0; padding: 0;
}
.site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .2s ease, background .2s ease;
}
/* İlk pill'in içeriği logoyla aynı sol hizada başlasın */
.site-nav ul > li:first-child a { margin-left: -14px; }
.site-nav .nav-ico {
    font-size: 14px;
    color: var(--muted-2);
    transition: color .2s ease, transform .3s ease;
}
.site-nav a:hover,
.site-nav a.is-active {
    color: var(--accent-text);
    background: var(--accent-soft);
}
.site-nav a:hover .nav-ico,
.site-nav a.is-active .nav-ico {
    color: var(--accent-text);
    transform: scale(1.1) rotate(5deg);
}

/* Sağ blok: Görev Ver — iki yanı dikey çizgili (LikedWin menu-order düzeni) */
.menubar__aside { display: flex; align-items: stretch; margin-left: auto; }
.menu-give {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    padding: 0 20px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}
.menu-give:hover { color: var(--accent-text); background: var(--accent-soft); }
.menu-give i { font-size: 12px; }

/* ---------- Mobil menü (tam ekran) ---------- */
.mobile-menu {
    position: fixed;
    inset: 71px 0 0;                   /* headbar yüksekliği (70px + 1px çizgi) */
    z-index: 190;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
    opacity: 0;
    transition: opacity .25s ease;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }

.mobile-menu__panel { padding: 22px var(--gutter) 48px; }
.mobile-menu nav ul { list-style: none; margin: 0 0 22px; padding: 0; }
.mobile-menu nav a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-strong);
    opacity: 0;
    transform: translateX(-14px);
    transition: color .2s ease;
}
.mobile-menu.is-open nav a {
    animation: gw-menu-in .4s cubic-bezier(.22, 1, .36, 1) forwards;
}
.mobile-menu.is-open nav li:nth-child(1) a { animation-delay: .04s; }
.mobile-menu.is-open nav li:nth-child(2) a { animation-delay: .09s; }
.mobile-menu.is-open nav li:nth-child(3) a { animation-delay: .14s; }
.mobile-menu.is-open nav li:nth-child(4) a { animation-delay: .19s; }
.mobile-menu.is-open nav li:nth-child(5) a { animation-delay: .24s; }
.mobile-menu nav a.is-active { color: var(--accent-text); }
.mobile-menu nav a .nav-ico {
    width: 22px;
    text-align: center;
    color: var(--muted-2);
    font-size: 15px;
}
.mobile-menu nav a.is-active .nav-ico { color: var(--accent-text); }
.mobile-menu nav a > i:last-child { margin-left: auto; color: var(--muted-2); font-size: 14px; }

@keyframes gw-menu-in {
    to { opacity: 1; transform: none; }
}

.mobile-menu__cta { display: grid; gap: 12px; }
/* Mobil menüde gece modu — çerçeveli tam genişlik satır */
.mobile-menu__theme {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}
.mobile-menu__theme .nightmode__sun,
.mobile-menu__theme .nightmode__moon { font-size: 15px; color: var(--accent-text); }
.mobile-menu__login {
    text-align: center;
    font-size: 14px;
    color: var(--muted);
    margin-top: 4px;
}
.mobile-menu__login strong { color: var(--accent-text); }

/* Menü açıkken arka plan kaymasın */
body.gw-menu-open { overflow: hidden; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1080px) {
    /* Üst bar ve menü barı gizlenir; her şey hamburger menüye taşınır */
    :root { --gw-topbar-h: 0px; }
    .topbar, .menubar { display: none; }
    .site-head { top: 0; }
    .burger { display: block; }
}

@media (max-width: 720px) {
    .headbar__inner { min-height: 62px; gap: 12px; }
    .mobile-menu { inset: 63px 0 0; }
    .brand__img { height: 31px; }
    .account-btn__sub { display: none; }
    .account-btn { padding: 5px 10px 5px 5px; }
}

@media (max-width: 420px) {
    .head-actions { gap: 8px; }
    .head-actions .btn { padding: 10px 13px; font-size: 13px; }
    .account-btn__text { display: none; }
    .account-btn { padding: 4px; }
}