/* ==========================================================================
   Üst menü — profesyonel dövme stüdyosu barı (marka · bölümler · Randevu)
   ========================================================================== */

.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-ui);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.3rem clamp(1.2rem, 5vw, 3.5rem);
    background: linear-gradient(180deg, rgba(8, 7, 6, 0.72) 0%, rgba(8, 7, 6, 0) 100%);
    transition: padding 0.35s var(--ease), background 0.35s ease;
}

.topbar.kucuk {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    background: rgba(9, 8, 6, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hair);
}

.topbar-marka {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-serif);
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.28em;
    color: #f7f2e8;
    white-space: nowrap;
}

.topbar-logo {
    width: clamp(1.9rem, 3vw, 2.5rem);
    height: auto;
    opacity: 0.95;
    transition: width 0.35s var(--ease);
}

.topbar.kucuk .topbar-logo { width: 1.8rem; }

.topbar-marka-yazi span { font-style: normal; font-weight: 500; color: #f7f2e8; }

@media (max-width: 460px) {
    .topbar-marka-yazi { display: none; }
}

.topbar-nav {
    margin-left: auto;
    display: flex;
    gap: clamp(1.2rem, 3vw, 2.6rem);
}

.topbar-nav a {
    position: relative;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.5rem 0;
    transition: color var(--sure) var(--ease);
}

.topbar-nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--iz);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sure) var(--ease);
}

.topbar-nav a:hover { color: var(--text); }
.topbar-nav a.aktif { color: var(--iz); }
.topbar-nav a.aktif::after { transform: scaleX(1); }

.topbar-randevu {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--iz-bright, #e0c290);
    border: 1px solid var(--iz-soft);
    padding: 0.7rem 1.2rem;
    white-space: nowrap;
    transition: background var(--sure) var(--ease), color var(--sure) var(--ease), border-color var(--sure) var(--ease);
}

.topbar-randevu:hover {
    background: var(--iz);
    border-color: var(--iz);
    color: #0a0908;
}

.topbar-menu { display: none; }

/* — Mobil — */
@media (max-width: 860px) {
    .topbar-nav {
        position: fixed;
        inset: 0;
        margin: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        background: rgba(9, 8, 6, 0.97);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    }
    body.menu-acik .topbar-nav { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
    .topbar-nav a { font-size: 0.9rem; letter-spacing: 0.3em; }

    .topbar-randevu { display: none; }

    .topbar-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 2.4rem;
        height: 2.4rem;
        margin-left: auto;
        z-index: calc(var(--z-ui) + 2);
        position: relative;
    }
    .topbar-menu span {
        display: block;
        height: 1px;
        width: 1.6rem;
        margin: 0 auto;
        background: var(--text);
        transition: transform 0.3s var(--ease), opacity 0.3s ease;
    }
    body.menu-acik .topbar-menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
    body.menu-acik .topbar-menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}