/* =====================================================================
   MENU CAPSULE — alt ortada yüzen, morph özellikli menü
   ===================================================================== */

.menu-capsule {
    position: fixed;
    bottom: max(24px, 3vh);
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;

    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;

    background: rgba(20, 18, 14, 0.88);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);

    border: 1px solid rgba(245, 240, 228, 0.12);
    border-radius: 999px;

    box-shadow:
        0 10px 40px rgba(20, 18, 14, 0.18),
        0 2px 8px rgba(20, 18, 14, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform 500ms var(--ease-out),
        padding 500ms var(--ease-out),
        gap 500ms var(--ease-out),
        background 400ms ease;

    will-change: transform, padding;
}

/* Hover — kapsül büyür, yukarı çıkar */
.menu-capsule:hover {
    transform: translateX(-50%) translateY(-6px);
    padding: 10px;
    gap: 6px;
    background: rgba(20, 18, 14, 0.94);
    box-shadow:
        0 18px 60px rgba(20, 18, 14, 0.28),
        0 4px 14px rgba(20, 18, 14, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Menü item */
.menu-capsule__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;

    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(245, 240, 228, 0.75);
    text-decoration: none;
    white-space: nowrap;

    background: transparent;
    transition:
        color 300ms var(--ease-out),
        background 400ms var(--ease-out),
        border-radius 500ms var(--ease-out),
        padding 400ms var(--ease-out),
        transform 400ms var(--ease-out);

    will-change: border-radius, background, color;
}

/* Item hover — morph efektı: daireden yuvarlak dikdörtgene, sonra tekrar */
.menu-capsule__item:hover {
    color: var(--bg);
    background: rgba(245, 240, 228, 0.12);
    border-radius: 14px;                 /* MORPH: yuvarlak → köşeli */
    padding: 12px 22px;
    transform: translateY(-1px);
}

/* Aktif sayfa */
.menu-capsule__item.is-active {
    background: var(--acc);
    color: var(--acc-ink);
    font-weight: 600;
    border-radius: 999px;
}
.menu-capsule__item.is-active:hover {
    background: var(--acc-hover);
    border-radius: 14px;
}

/* Logo/home link — sol baş */
.menu-capsule__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
    margin-right: 4px;
    font-family: var(--ff-display);
    font-size: 18px;
    font-style: italic;
    font-weight: 500;

    transition: border-radius 500ms var(--ease-out),
                transform 500ms var(--ease-out),
                background 400ms ease;
}
.menu-capsule__brand:hover {
    border-radius: 14px;                 /* MORPH: daire → kare */
    transform: rotate(-8deg) scale(1.05);
    background: var(--acc-hover);
}

/* Sağ baş: CTA (yardımcı) */
.menu-capsule__cta {
    padding: 12px 22px;
    background: var(--acc);
    color: var(--acc-ink);
    font-weight: 600;
    margin-left: 4px;
    border-radius: 999px;
    transition: border-radius 500ms var(--ease-out), background 300ms, transform 400ms;
}
.menu-capsule__cta:hover {
    border-radius: 14px;
    background: var(--bg);
    color: var(--fg);
    transform: translateY(-1px);
}

/* Mobilde kısalt */
@media (max-width: 720px) {
    .menu-capsule {
        bottom: max(14px, 2vh);
        padding: 6px;
        gap: 2px;
    }
    .menu-capsule__item {
        padding: 10px 14px;
        font-size: 12px;
    }
    .menu-capsule__brand { width: 36px; height: 36px; font-size: 16px; }
    .menu-capsule__cta { padding: 10px 16px; font-size: 12px; }
}

/* Çok dar ekranda bazı item'ları gizle */
@media (max-width: 520px) {
    .menu-capsule__item[data-priority="3"] { display: none; }
}
@media (max-width: 400px) {
    .menu-capsule__item[data-priority="2"] { display: none; }
}

/* Site header'ını gizle — menu-capsule onun yerini aldı */
html.intro-done .site-header,
body .site-header {
    display: none;
}

/* Ama top bar gibi bir mini-header istenirse — isteğe bağlı */
.top-bar {
    position: fixed;
    top: 24px;
    left: 24px;
    right: 24px;
    z-index: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-mut);
    pointer-events: none;
}
.top-bar a { pointer-events: auto; color: var(--fg); }
.top-bar__left, .top-bar__right { display: flex; gap: 16px; }

@media (max-width: 720px) {
    .top-bar { top: 14px; left: 14px; right: 14px; font-size: 10px; }
    .top-bar__right { display: none; }
}