/* ==========================================================================
   DMNKND ortak navbar — shared/navbar/dk-navbar.ejs ile birlikte kullanılır.

   Tema tamamen --dknav-* jetonlarından gelir. Varsayılan KOYU (dmnknd.com,
   dominara, lejyon); shop gibi açık temalı bir site yalnızca bu jetonları
   yeniden tanımlar, bileşen kurallarına dokunmaz.
   ========================================================================== */

:root {
    --dknav-h:        64px;
    --dknav-bg:       rgba(16, 13, 10, .86);
    --dknav-bg-solid: #100d0a;
    --dknav-ink:      #f4eee2;
    --dknav-soft:     #c4b9a6;
    --dknav-line:     rgba(255, 255, 255, .13);
    --dknav-line-2:   rgba(255, 255, 255, .22);
    --dknav-hover:    rgba(255, 255, 255, .08);
    --dknav-surface:  #17130d;
    --dknav-accent:   #d4af37;
    --dknav-accent-2: #f5d76e;
    --dknav-on-accent:#1b1304;
    --dknav-logo:     #f4eee2;
    --dknav-sh:       0 18px 44px -20px rgba(0, 0, 0, .75);
    --dknav-r:        12px;
    --dknav-r-pill:   999px;
    --dknav-font:     "Outfit", "Inter", system-ui, sans-serif;
    --dknav-wrap:     1280px;
    --dknav-gut:      clamp(14px, 3.5vw, 36px);
}

/* ---- eski navbar ile uyum ----
   Sitelerin eski navbar.css'i sabit konumlu bir başlık için `body`ye
   `padding-top: var(--dmnknd-nav-bar-h)` veriyor. Ortak navbar sticky ve
   akış içinde olduğundan o boşluk ölü kalıyor; değişkeni sıfırlamak ilgili
   tüm kuralları (medya sorguları dâhil) tek yerden etkisizleştirir.
   Bu dosya eski navbar.css'ten SONRA yüklenmeli. */
:root { --dmnknd-nav-bar-h: 0px; }

.dk-nav {
    position: sticky; top: 0; z-index: 900;
    background: var(--dknav-bg);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
            backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--dknav-line);
    font-family: var(--dknav-font);
}
.dk-nav__row {
    display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.4rem);
    max-width: var(--dknav-wrap); margin-inline: auto;
    padding-inline: var(--dknav-gut); min-height: var(--dknav-h);
}

/* ---------------------------------------------------------------- marka */
.dk-nav__brand {
    display: inline-flex; align-items: center; gap: .55rem; flex: none;
    text-decoration: none; color: var(--dknav-ink);
}
.dk-nav__logo {
    width: 34px; height: 34px; flex: none; display: block;
    background-color: var(--dknav-logo);
    /* Düz (ters değil) ejder; beyaz PNG maske olarak kullanılır, renk jetondan gelir. */
    -webkit-mask: url("/files/images/beyazlogo.png") center / contain no-repeat;
            mask: url("/files/images/beyazlogo.png") center / contain no-repeat;
}
.dk-nav__wordmark {
    font-weight: 800; font-size: 1.05rem; letter-spacing: .14em;
    text-transform: uppercase; white-space: nowrap; color: var(--dknav-ink);
}

/* ------------------------------------------------------------ bağlantılar */
.dk-nav__links { display: flex; align-items: center; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.dk-nav__link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .75rem; border-radius: var(--dknav-r-pill);
    font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--dknav-soft); text-decoration: none; white-space: nowrap;
    transition: color .18s, background .18s;
}
.dk-nav__link:hover { color: var(--dknav-ink); background: var(--dknav-hover); }
.dk-nav__link--on { color: var(--dknav-accent); }
.dk-nav__chev { font-size: .6rem; opacity: .7; transition: transform .2s; }

.dk-navitem { position: relative; }
.dk-navitem:hover .dk-nav__chev, .dk-navitem:focus-within .dk-nav__chev { transform: rotate(180deg); }
.dk-navitem__panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
    min-width: 13rem; padding: .4rem; border-radius: var(--dknav-r);
    background: var(--dknav-surface); border: 1px solid var(--dknav-line);
    box-shadow: var(--dknav-sh);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.dk-navitem:hover .dk-navitem__panel,
.dk-navitem:focus-within .dk-navitem__panel { opacity: 1; visibility: visible; transform: none; }
.dk-navitem__link {
    display: block; padding: .55rem .7rem; border-radius: calc(var(--dknav-r) - 4px);
    font-size: .85rem; font-weight: 600; color: var(--dknav-soft); text-decoration: none;
}
.dk-navitem__link:hover { background: var(--dknav-hover); color: var(--dknav-ink); }
.dk-navitem__link--on { color: var(--dknav-accent); }

.dk-tag {
    font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: .14rem .4rem; border-radius: var(--dknav-r-pill);
    background: var(--dknav-accent); color: var(--dknav-on-accent);
}
.dk-tag--indirim { background: #c0392b; color: #fff; }

/* ------------------------------------------------------------- sağ taraf */
.dk-nav__actions { display: flex; align-items: center; gap: .45rem; flex: none; margin-left: auto; }

.dk-iconbtn {
    width: 40px; height: 40px; flex: none; cursor: pointer;
    display: inline-grid; place-items: center; border-radius: var(--dknav-r-pill);
    background: var(--dknav-hover); border: 1px solid var(--dknav-line);
    color: var(--dknav-ink); font-size: .95rem; transition: border-color .18s, background .18s;
}
.dk-iconbtn:hover { border-color: var(--dknav-line-2); background: var(--dknav-hover); }
.dk-iconbtn--avatar { padding: 0; overflow: hidden; }
.dk-nav__avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.dk-nav__badges { display: inline-flex; align-items: center; gap: .25rem; flex: none; }
.dk-nav__badge { width: 24px; height: 24px; object-fit: contain; display: block; }

.dk-btn {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .55rem 1rem; border-radius: var(--dknav-r-pill);
    font-family: var(--dknav-font); font-weight: 700; font-size: .82rem; white-space: nowrap;
    text-decoration: none; border: 1px solid var(--dknav-line-2);
    background: transparent; color: var(--dknav-ink); transition: .18s;
}
.dk-btn:hover { border-color: var(--dknav-accent); color: var(--dknav-accent); }

/* ------------------------------------------------------------ hesap menüsü */
.dk-menu { position: relative; }
.dk-menu__panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
    min-width: 15rem; padding: .4rem; border-radius: var(--dknav-r);
    background: var(--dknav-surface); border: 1px solid var(--dknav-line);
    box-shadow: var(--dknav-sh);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.dk-menu.is-open .dk-menu__panel { opacity: 1; visibility: visible; transform: none; }
.dk-menu__item {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .7rem; border-radius: calc(var(--dknav-r) - 4px);
    font-size: .86rem; font-weight: 600; color: var(--dknav-soft); text-decoration: none;
}
.dk-menu__item:hover { background: var(--dknav-hover); color: var(--dknav-ink); }
.dk-menu__item iconify-icon { font-size: .9rem; opacity: .85; flex: none; }
.dk-menu__sep { height: 1px; background: var(--dknav-line); margin: .35rem .2rem; }
.dk-menu__head {
    display: block; padding: .35rem .7rem .2rem; font-size: .62rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--dknav-accent); opacity: .85;
}

/* --------------------------------------------------------- mobil çekmece */
.dk-nav__burger { display: none; }
.dk-drawer {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s;
}
.dk-drawer.is-open { opacity: 1; visibility: visible; }
.dk-drawer__panel {
    position: absolute; inset-block: 0; right: 0; width: min(21rem, 86vw);
    overflow-y: auto; padding: 1rem 1.1rem 2rem;
    background: var(--dknav-bg-solid); border-left: 1px solid var(--dknav-line);
    transform: translateX(100%); transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.dk-drawer.is-open .dk-drawer__panel { transform: none; }
.dk-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.dk-drawer__badges {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    padding: .2rem 0 .8rem; border-bottom: 1px solid var(--dknav-line); margin-bottom: .5rem;
}
.dk-drawer__badges .dk-nav__badge { width: 26px; height: 26px; }
.dk-drawer__link {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .7rem .2rem; font-size: .92rem; font-weight: 600;
    color: var(--dknav-soft); text-decoration: none; border-bottom: 1px solid var(--dknav-line);
}
.dk-drawer__link:hover { color: var(--dknav-ink); }
.dk-drawer__link--on { color: var(--dknav-accent); }
.dk-drawer__link--sub { padding-left: 1rem; font-size: .85rem; opacity: .85; }
.dk-drawer__sep { height: 1px; background: var(--dknav-line); margin: .6rem 0; border: 0; }
.dk-drawer__head-label {
    display: block; padding: .3rem .2rem; font-size: .62rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--dknav-accent);
}

@media (max-width: 1000px) {
    .dk-nav__links { display: none; }
    .dk-nav__burger { display: inline-grid; }
}
@media (max-width: 560px) {
    .dk-nav__badges { display: none; }
    .dk-btn__txt { display: none; }
    .dk-btn { padding: .55rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dk-navitem__panel, .dk-menu__panel, .dk-drawer, .dk-drawer__panel { transition: none; }
}

/* Cekmecede buton olarak render edilen giris baglantisi link gibi gorunsun. */
.dk-drawer__link--btn {
    width: 100%; text-align: left; background: none; border: 0;
    border-bottom: 1px solid var(--dknav-line); cursor: pointer;
    font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--dknav-soft);
}
.dk-drawer__link--btn:hover { color: var(--dknav-ink); }

/* Avatar uzerindeki okunmamis bildirim noktasi. Sitenin kendi JS'i gizlemek
   icin .sc-hidden gibi bir sinif ekleyebilir; o yuzden display yerine
   gorunurlugu sinifa birakiyoruz. */
.dk-iconbtn { position: relative; }
.dk-nav__dot {
    position: absolute; top: 2px; right: 2px; width: 10px; height: 10px;
    border-radius: 50%; background: #e0483c;
    border: 2px solid var(--dknav-bg-solid); pointer-events: none;
}
.dk-nav__dot.sc-hidden, .dk-nav__dot[hidden] { display: none; }

/* Uzun acilir menulerde bolum basligi (href'i olmayan oge). */
.dk-navitem__label {
    display: block; padding: .5rem .7rem .25rem;
    font-size: .62rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dknav-accent); opacity: .8;
}
.dk-navitem__label:not(:first-child) { margin-top: .25rem; border-top: 1px solid var(--dknav-line); padding-top: .55rem; }
.dk-drawer__head-label--sub { padding-left: .6rem; opacity: .75; }
/* Cok ogeli menuler tasmasin */
.dk-navitem__panel { max-height: min(70vh, 32rem); overflow-y: auto; }