/* TAPS Header Logo Size + Soft Glow V14.6 */

/*
    Mantık:
    - Logo görseli değişmez.
    - Sadece .brand kutusu büyür.
    - Glow düşürülür.
    - Hafif glass overlay eklenir.
*/

:root {
    --taps-header-logo-w: 248px;
    --taps-header-logo-h: 84px;
    --taps-header-logo-radius: 22px;
    --taps-header-logo-pad-x: 17px;
    --taps-header-logo-pad-y: 10px;

    --taps-header-logo-img-h: 58px;
    --taps-header-logo-glow-1: rgba(0, 214, 255, .22);
    --taps-header-logo-glow-2: rgba(0, 214, 255, .14);
    --taps-header-logo-glow-3: rgba(0, 214, 255, .07);
}

/* Header yüksekliğini logo için dengeli hale getir */
.topbar {
    min-height: 96px !important;
}

/* Logo taşıyıcı */
.topbar .brand,
.brand {
    width: var(--taps-header-logo-w) !important;
    min-width: var(--taps-header-logo-w) !important;
    height: var(--taps-header-logo-h) !important;
    min-height: var(--taps-header-logo-h) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: var(--taps-header-logo-pad-y) var(--taps-header-logo-pad-x) !important;
    border-radius: var(--taps-header-logo-radius) !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;

    border: 1px solid rgba(0, 214, 255, .24) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
        linear-gradient(135deg, rgba(3, 10, 22, .96), rgba(7, 20, 37, .92)) !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 0 1px var(--taps-header-logo-glow-1),
        0 0 15px var(--taps-header-logo-glow-2),
        0 0 30px var(--taps-header-logo-glow-3) !important;

    transform: translateZ(0) !important;
    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        background .24s ease !important;
}

/* İç cam / overlay */
.topbar .brand::before,
.brand::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border-radius: inherit !important;

    background:
        linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.045) 24%, transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 48%, rgba(0,214,255,.035) 100%) !important;

    opacity: .46 !important;
    mix-blend-mode: screen !important;
}

/* İnce iç kontur */
.topbar .brand::after,
.brand::after {
    content: "" !important;
    position: absolute !important;
    inset: 7px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    border-radius: calc(var(--taps-header-logo-radius) - 7px) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow:
        inset 0 0 18px rgba(0,214,255,.035) !important;
}

/* Logo görseli: orijinal oran korunur */
.topbar .brand img,
.brand img,
.topbar .brand-logo,
.brand-logo {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;

    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--taps-header-logo-img-h) !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: calc(var(--taps-header-logo-radius) - 10px) !important;
    filter:
        drop-shadow(0 4px 10px rgba(0,0,0,.24))
        drop-shadow(0 0 7px rgba(0,214,255,.08)) !important;
}

/* Light/dark logo görünürlüğünü bozmadan koru */
html[data-theme="dark"] .brand-logo-light,
body.theme-dark .brand-logo-light {
    display: none !important;
}

html[data-theme="dark"] .brand-logo-dark,
body.theme-dark .brand-logo-dark {
    display: block !important;
}

html[data-theme="light"] .brand-logo-light,
body.theme-light .brand-logo-light {
    display: block !important;
}

html[data-theme="light"] .brand-logo-dark,
body.theme-light .brand-logo-dark {
    display: none !important;
}

/* Hover: premium ama patlamayan glow */
.topbar .brand:hover,
.brand:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(0, 214, 255, .34) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.045) inset,
        0 0 0 1px rgba(0, 214, 255, .28),
        0 0 18px rgba(0, 214, 255, .18),
        0 0 34px rgba(0, 214, 255, .09) !important;
}

/* Menü hizasını bozmamak için logo çevresi */
.topbar .brand + .top-nav,
.brand + .top-nav {
    margin-left: clamp(18px, 2vw, 34px) !important;
}

/* Header çok sıkışırsa nav yazılarını stabilize et */
.topbar .top-nav,
.topbar .top-detail-nav,
.topbar .top-actions {
    min-height: 96px !important;
}

/* Desktop dar ekran */
@media (max-width: 1280px) {
    :root {
        --taps-header-logo-w: 224px;
        --taps-header-logo-h: 78px;
        --taps-header-logo-img-h: 52px;
        --taps-header-logo-radius: 20px;
    }

    .topbar {
        min-height: 90px !important;
    }

    .topbar .top-nav,
    .topbar .top-detail-nav,
    .topbar .top-actions {
        min-height: 90px !important;
    }
}

/* Tablet / küçük ekran */
@media (max-width: 920px) {
    :root {
        --taps-header-logo-w: 198px;
        --taps-header-logo-h: 72px;
        --taps-header-logo-img-h: 48px;
        --taps-header-logo-radius: 18px;
        --taps-header-logo-pad-x: 14px;
        --taps-header-logo-pad-y: 9px;
    }

    .topbar {
        min-height: 84px !important;
    }

    .topbar .top-nav,
    .topbar .top-detail-nav,
    .topbar .top-actions {
        min-height: 84px !important;
    }
}

/* Mobil */
@media (max-width: 640px) {
    :root {
        --taps-header-logo-w: 172px;
        --taps-header-logo-h: 64px;
        --taps-header-logo-img-h: 42px;
        --taps-header-logo-radius: 16px;
        --taps-header-logo-pad-x: 12px;
        --taps-header-logo-pad-y: 8px;
    }

    .topbar {
        min-height: 76px !important;
    }

    .topbar .brand + .top-nav,
    .brand + .top-nav {
        margin-left: 12px !important;
    }
}