@keyframes pulse-red {0% {transform:scale(0.95);box-shadow:0 0 0 0 rgba(239, 68, 68, 0.8);}70% {transform:scale(1);box-shadow:0 0 0 10px rgba(239, 68, 68, 0);}100% {transform:scale(0.95);box-shadow:0 0 0 0 rgba(239, 68, 68, 0);}}
.notif-badge {animation:pulse-red 2s infinite;display:flex;align-items:center;justify-content:center;background:#ef4444;color:#fff;font-family:'Inter', sans-serif;font-weight:900;border:3px solid #fff;border-radius:50%;position:absolute;z-index:99;pointer-events:none;box-shadow:0 4px 10px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);line-height:1;}
.nav-others-btn {position:relative;overflow:hidden;background:linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);color:#fff !important;box-shadow:0 4px 15px rgba(37, 99, 235, 0.3);z-index:1;display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:800; padding:9px 18px; font-size:1.02rem; border-radius:50px; transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border:1px solid transparent;}
.nav-others-btn::after {content:'';position:absolute;top:-50%;left:-100%;width:50%;height:200%;background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);transform:rotate(25deg);animation:shimmer 3s infinite;z-index:2;}
@keyframes shimmer {0% { left:-100%; }25% { left:120%; }100% { left:120%; }}
.nav-others-btn:hover, .nav-others-btn.active {transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px rgba(37, 99, 235, 0.5), 0 0 15px rgba(168, 85, 247, 0.4);}
.nav-others-btn span, .nav-others-btn i {position:relative;z-index:3;transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);}
.nav-others-btn:hover i.fa-compass {transform:rotate(90deg);}
.dropdown-stagger-wrapper {display:flex;flex-direction:column;gap:3px;}
.dropdown-item-link {display:flex;align-items:center;gap:10px;padding:0.45rem 0.65rem;color:#1e293b;text-decoration:none;border-radius:12px;font-size:0.88rem;font-weight:700;transition:all 0.2s ease;animation:fadeIn 0.2s ease forwards;animation-delay:calc(var(--delay) * 0.03s);opacity:0;}
@keyframes fadeIn {from { opacity:0; }to { opacity:1; }}
.dropdown-item-link .icon-wrap {width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:0.95rem;transition:all 0.2s ease;flex-shrink:0;}
.dropdown-item-link:hover {background:#f1f5f9;transform:translateX(4px);color:var(--primary);}
.dropdown-item-link:hover .icon-wrap {transform:scale(1.08);background:#fff !important;box-shadow:0 3px 8px rgba(0,0,0,0.06);}

/* 🌟 SOLID FIXED FULL-WIDTH HEADER NAVBAR */
.navbar, .navbar.scrolled, .navbar.solid-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 72px !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
    padding: 0.50rem 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navbar .container {
    max-width: 1200px !important;
    height: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

@media (min-width: 992px) {
    .navbar .container {
        padding: 0 20px !important;
    }
}

@media (max-width: 991px) {
    .navbar .container {
        padding: 0 !important;
    }
}

.nav-links {
    display: flex !important;
    gap: 1.5rem !important;
    list-style: none !important;
    align-items: center !important;
}

.nav-links li a {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    transition: all 0.2s ease !important;
}

.nav-links li a i {
    font-size: 1.10rem !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.mobile-toggle {
    display: none !important;
}

.profile-dropdown-container {
    display: flex !important;
    align-items: center !important;
}

.logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.logo-icon-badge {
    width: 53px !important;
    height: 53px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    transform: scale(1.08) !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.logo:hover .logo-icon-badge {
    transform: scale(1.08) rotate(-4deg) !important;
    box-shadow: 0 6px 20px rgba(255, 56, 92, 0.28), 0 0 0 2px rgba(255, 56, 92, 0.3) !important;
}

.logo:hover .logo-img {
    transform: scale(1.15) !important;
}

.logo-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.1 !important;
}

.logo-title-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 0.25rem !important;
    line-height: 1.15 !important;
}

.city-name-text {
    font-size: 1.88rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
    color: #ff385c !important;
}

.city-module-sep {
    color: #cbd5e1 !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    margin: 0 0.25rem !important;
    margin-bottom: 3px !important;
    line-height: 1 !important;
}

.module-name-badge {
    background: transparent !important;
    color: #2563eb !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 3px !important;
}

.logo-subtitle-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin-top: 2px !important;
}

.logo-subtitle-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ff385c !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.logo-subtitle {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #64748b !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

@media (max-width: 991px) {
    .mobile-toggle {
        display: none !important;
    }
    .navbar, .navbar.scrolled, .navbar.solid-nav {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 64px !important;
        box-sizing: border-box !important;
        padding: 0.50rem 0.85rem !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
        background: #ffffff !important;
    }
    .logo {
        gap: 0.65rem !important;
    }
    .logo-icon-badge {
        width: 46px !important;
        height: 46px !important;
        border-radius: 12px !important;
        padding: 0 !important;
    }
    .city-name-text {
        font-size: 1.55rem !important;
    }
    .city-module-sep {
        font-size: 1.05rem !important;
        margin-bottom: 2px !important;
    }
    .module-name-badge {
        font-size: 0.80rem !important;
        padding: 0 !important;
        margin-bottom: 2px !important;
    }
    .logo-subtitle-dot {
        width: 5px !important;
        height: 5px !important;
    }
    .logo-subtitle {
        font-size: 0.63rem !important;
        letter-spacing: 0.04em !important;
    }
}

/* 🌟 Hikayeler (Story Viewer) Tam Ekran Modunda Header & Alt Menü Gizleme */
.story-viewer-overlay {
    z-index: 999999 !important;
}
body.story-active .navbar,
body.story-active .mobile-app-nav-bar,
body.story-active #mobileAppNavBar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   UNIFIED HEADER OFFSET SYSTEM (ALL 17 MODULES & DETAIL PAGES)
   ========================================================================== */
:root {
    --global-header-offset: 72px;
}

@media (max-width: 991px) {
    :root {
        --global-header-offset: 64px;
    }
}

/* Master Top Padding for All Main Containers & Page Wrappers */
main,
body > .container,
body > div.container,
.sa-container,
.news-portal-main,
.haber-detay-main,
.eczaneler-main,
.firmalar-main,
.firma-detay-main,
.firm-search-container,
.taziye-container,
.harkulade-detail-main,
.ruya-portal-main,
.ruya-index-main,
.ruya-detay-main,
.astro-portal-main,
.weather-portal,
.weather-portal-main,
.tv-container,
.tv-container-main,
.search-page,
.instructor-container,
.my-courses-container,
.my-favs-container,
.corporate-main,
.create-container,
.my-container,
.msg-container,
.pazar-seller-profile,
.favorites-container,
.edit-container,
.detail-container,
.map-page-container {
    padding-top: calc(var(--global-header-offset, 72px) + 0.75rem) !important;
}

/* ==========================================================================
   UNIFIED MASTER HERO COMPONENT SYSTEM (PAZAR, EĞİTİM, PLAY, BLOG, KURAN, KARİYER, FİRMALAR, TAZİYELER, ECZANELER)
   ========================================================================== */
.egitim-hero,
.pazar-hero,
.play-hero,
.blog-hero,
.kuran-hero,
.career-hero,
.firm-hero,
.taziye-hero,
.meydan-hero,
.eczane-hero,
.astro-hero,
.weather-hero {
    margin-top: 0 !important;
    border-radius: 24px !important;
    padding: 1.5rem !important;
    margin-bottom: 0 !important;
    min-height: 210px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}

.firm-hero {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.85) 0%, rgba(49, 46, 129, 0.9) 100%), url('/public/images/firmalar_hero.jpg') center/cover !important;
}

.taziye-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

.eczane-hero {
    background: linear-gradient(135deg, #1e293b 0%, #881337 100%) !important;
    margin-bottom: 0.75rem !important;
}

.astro-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%) !important;
    margin-bottom: 0.75rem !important;
}

.weather-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0284c7 100%) !important;
    margin-bottom: 0.75rem !important;
}

.taziye-detail-bar {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
}

/* Reduce top gap for layouts immediately following hero cards */
.pazar-layout,
.egitim-layout,
.play-layout,
.blog-layout,
.kuran-layout,
.news-layout,
.eczane-layout,
.weather-layout {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .eczane-hero,
    .astro-hero,
    .weather-hero {
        margin-bottom: 0.50rem !important;
    }
}

.egitim-hero h1,
.pazar-hero h1,
.play-hero h1,
.blog-hero h1,
.kuran-hero h1,
.career-hero h1,
.firm-hero h1,
.taziye-hero h1,
.meydan-hero h1,
.eczane-hero h1,
.astro-hero h1,
.weather-hero h1 {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    margin: 0 0 0.35rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #ffffff !important;
}

.egitim-hero p,
.pazar-hero p,
.play-hero p,
.blog-hero p,
.kuran-hero p,
.career-hero p,
.firm-hero p,
.taziye-hero p,
.meydan-hero p,
.eczane-hero p,
.astro-hero p,
.weather-hero p {
    font-size: 0.9rem !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
}

.egitim-hero-body,
.pazar-hero-body,
.play-hero-body,
.blog-hero-body,
.kuran-hero-body,
.career-hero-body,
.firm-hero-body,
.taziye-hero-body,
.eczane-hero-body,
.astro-hero-body,
.weather-hero-body {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.5rem !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.egitim-search-bar,
.pazar-search-bar,
.play-search-bar,
.blog-search-bar,
.kuran-search-bar,
.career-search-bar,
.firm-search-bar,
.taziye-search-bar,
.eczane-search-bar,
.astro-search-bar,
.weather-search-bar {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.egitim-search-bar input,
.pazar-search-bar input,
.play-search-bar input,
.blog-search-bar input,
.kuran-search-bar input,
.career-search-bar input,
.firm-search-bar input,
.taziye-search-bar input,
.eczane-search-bar input,
.astro-search-bar input,
.weather-search-bar input {
    flex: 1 !important;
    padding: 0.75rem 1.25rem !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 0.92rem !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.egitim-search-bar button,
.pazar-search-bar button,
.play-search-bar button,
.blog-search-bar button,
.kuran-search-bar button,
.career-search-bar button,
.firm-search-bar button,
.taziye-search-bar button,
.eczane-search-bar button,
.astro-search-bar button {
    padding: 0.7rem 1.15rem !important;
    border: none !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.cat-pills {
    display: flex !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    padding: 0.25rem 0 !important;
    margin-top: 0.5rem !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
}

.cat-pill,
.kuran-hero .cat-pill,
.pazar-hero .cat-pill,
.egitim-hero .cat-pill,
.play-hero .cat-pill,
.blog-hero .cat-pill,
.firm-hero .cat-pill,
.taziye-hero .cat-pill,
.eczane-hero .cat-pill,
.astro-hero .cat-pill {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cat-pill:hover,
.cat-pill.active,
.kuran-hero .cat-pill:hover,
.kuran-hero .cat-pill.active,
.firm-hero .cat-pill:hover,
.firm-hero .cat-pill.active,
.taziye-hero .cat-pill:hover,
.taziye-hero .cat-pill.active,
.eczane-hero .cat-pill:hover,
.eczane-hero .cat-pill.active,
.astro-hero .cat-pill:hover,
.astro-hero .cat-pill.active {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 991px) {
    body.search-active .navbar,
    body.search-active nav.navbar,
    body.search-active .desktop-header {
        display: none !important;
    }
}

@media (max-width: 768px) {
    main,
    body > .container,
    body > div.container,
    .sa-container,
    .news-portal-main,
    .haber-detay-main,
    .eczaneler-main,
    .firmalar-main,
    .firma-detay-main,
    .firm-search-container,
    .taziye-container,
    .harkulade-detail-main,
    .ruya-portal-main,
    .ruya-index-main,
    .ruya-detay-main,
    .astro-portal-main,
    .weather-portal,
    .weather-portal-main,
    .tv-container,
    .tv-container-main,
    .search-page,
    .instructor-container,
    .my-courses-container,
    .my-favs-container,
    .corporate-main,
    .create-container,
    .my-container,
    .msg-container,
    .pazar-seller-profile,
    .favorites-container,
    .edit-container,
    .detail-container,
    .map-page-container {
        padding-top: calc(var(--global-header-offset, 64px) + 0.5rem) !important;
    }

    main .container,
    .news-portal-main .container,
    .astro-portal-main .container,
    .taziye-container .container,
    .haber-detay-main .container,
    .firmalar-main .container,
    .eczaneler-main .container,
    .ruya-portal-main .container,
    .corporate-main .container,
    .weather-portal-main .container {
        padding-top: 0 !important;
    }

    .egitim-hero,
    .pazar-hero,
    .play-hero,
    .blog-hero,
    .kuran-hero,
    .career-hero,
    .firm-hero,
    .taziye-hero,
    .meydan-hero,
    .eczane-hero,
    .astro-hero {
        border-radius: 16px !important;
        padding: 1rem 0.85rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }

    .egitim-top-bar {
        display: none !important;
    }
}

/* Reset Inner Elements to avoid double padding */
.news-portal-header-strip {
    padding-top: 0.65rem !important;
    margin-top: 0 !important;
}

.mobile-article-header {
    padding-top: 0 !important;
}