/* ==========================================================================
   T.C. SAĞLIK BAKANLIĞI - AİLE SAĞLIĞI MERKEZİ SAAS TEMASI (CSS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS DEĞİŞKENLERİ VE 4 AYRI RENK PALETİ
   -------------------------------------------------------------------------- */
:root {
    /* Varsayılan Tema: Sağlık Turkuazı (istanbulism.saglik.gov.tr bazlı) */
    --primary-color: #00828a;
    --primary-hover: #006a70;
    --secondary-color: #d32f2f; /* Bakanlık Kırmızısı */
    --body-bg: #fcfcf6;         /* Kullanıcının istediği yumuşak sarımsı beyaz */
    --card-bg: #ffffff;
    --pastel-bg: #f4f9f9;       /* Ultra Soft Pastel Turkuaz */
    --warm-pastel-bg: #ffffff;  /* Beyaz Zemin */
    --text-main: #2b3b42;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --footer-bg: #151e22;
    --footer-bottom: #0d1316;
    --footer-text: #cbd5e1;
}

/* Tema 2: Hastane Mavisi */
body.theme-blue {
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --secondary-color: #d32f2f;
    --body-bg: #f8fafc;
    --pastel-bg: #f4f7fc;       /* Ultra Soft Pastel Mavi */
    --warm-pastel-bg: #ffffff;  /* Beyaz Zemin */
    --footer-bg: #0f172a;
    --footer-bottom: #090d16;
}

/* Tema 3: Doğal Yeşil */
body.theme-green {
    --primary-color: #1b8a5a;
    --primary-hover: #146c46;
    --secondary-color: #c93b2b;
    --body-bg: #fbfdf9;
    --pastel-bg: #f3f8f5;       /* Ultra Soft Pastel Yeşil */
    --warm-pastel-bg: #ffffff;  /* Beyaz Zemin */
    --footer-bg: #13241b;
    --footer-bottom: #0c1711;
}

/* Tema 4: Bakanlık Kırmızısı / Bordo */
body.theme-red {
    --primary-color: #b71c1c;
    --primary-hover: #8e1414;
    --secondary-color: #00828a;
    --body-bg: #fdfbfa;
    --pastel-bg: #fbf5f5;       /* Ultra Soft Pastel Bordo */
    --warm-pastel-bg: #ffffff;  /* Beyaz Zemin */
    --footer-bg: #211314;
    --footer-bottom: #160a0b;
}

/* ==========================================================================
   KARANLIK MOD (DARK MODE) DEĞİŞKENLERİ & GLOBAL OVERRIDES
   ========================================================================== */
body.dark-mode {
    --body-bg: #0f172a;
    --card-bg: #1e293b;
    --pastel-bg: #1e293b;
    --warm-pastel-bg: #1e293b;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --footer-bg: #090d16;
    --footer-bottom: #05070a;
    --footer-text: #94a3b8;
}

/* Karanlık Mod - Kartlar, Başlıklar, Inputlar, Dropdownlar, Butonlar ve Bileşenler */
body.dark-mode .main-header {
    background-color: #1e293b !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .brand-naming .bottom-line {
    color: #e2e8f0 !important;
}

body.dark-mode .section-title,
body.dark-mode .page-title,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #f8fafc !important;
}

body.dark-mode .bg-white,
body.dark-mode .bg-warm-soft,
body.dark-mode .bg-yellow-soft {
    background-color: #1e293b !important;
}

body.dark-mode .bg-pastel,
body.dark-mode .bg-theme-soft {
    background-color: #0f172a !important;
}

body.dark-mode .service-card,
body.dark-mode .unit-box,
body.dark-mode .feed-card,
body.dark-mode .article-row-card,
body.dark-mode .info-block:not(.emergency-standalone-card):not(.first-aid-standalone-card),
body.dark-mode .home-featured-card,
body.dark-mode .theme-drawer-panel,
body.dark-mode .mobile-menu-fullscreen,
body.dark-mode .detail-content-card,
body.dark-mode .listpage-side-panel,
body.dark-mode .doctor-profile-card,
body.dark-mode .doctor-full-card,
body.dark-mode .pharmacy-card,
body.dark-mode .comment-item-card,
body.dark-mode .mini-survey-box,
body.dark-mode .survey-option-label,
body.dark-mode .stat-counter-card,
body.dark-mode .excel-filter-card,
body.dark-mode .card,
body.dark-mode .white-box,
body.dark-mode .content-box {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .working-hours-card-wrap,
body.dark-mode .working-hours-card-wrap > div,
body.dark-mode .schedule-list-standalone,
body.dark-mode .schedule-list-standalone li {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

body.dark-mode .detail-page-wrapper,
body.dark-mode .listpage-layout-wrapper,
body.dark-mode section {
    background-color: var(--body-bg) !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

/* Karanlık Modda Beyaz Kalan Bütün Butonları Koyu Temaya Uyarla */
body.dark-mode button:not(.btn-mode-toggle.active):not(.btn-primary-action):not(.theme-floating-btn):not(.mobile-sticky-back-btn):not(.mobile-fab):not(.virtual-scroll-thumb):not(#custom-thumb):not(.bottom-bar-btn):not(.search-input-wrapper button):not(.quick-arrow-btn):not(.neon-swatch-btn),
body.dark-mode .btn-white,
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline,
body.dark-mode .btn-detail-action,
body.dark-mode .btn-section-more,
body.dark-mode .slider-nav-btn,
body.dark-mode .btn-theme-reset,
body.dark-mode .filter-btn,
body.dark-mode .page-link,
body.dark-mode .doc-filter-btn {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode button:hover:not(.btn-mode-toggle.active):not(.btn-primary-action):not(.theme-floating-btn):not(.mobile-sticky-back-btn):not(.mobile-fab):not(.virtual-scroll-thumb):not(#custom-thumb):not(.bottom-bar-btn):not(.search-input-wrapper button):not(.quick-arrow-btn):not(.neon-swatch-btn),
body.dark-mode .btn-white:hover,
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-outline:hover,
body.dark-mode .btn-detail-action:hover,
body.dark-mode .btn-section-more:hover,
body.dark-mode .slider-nav-btn:hover,
body.dark-mode .btn-theme-reset:hover,
body.dark-mode .filter-btn:hover,
body.dark-mode .page-link:hover,
body.dark-mode .doc-filter-btn:hover {
    background-color: #0f172a !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .schedule-list li {
    border-bottom-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .schedule-list .day {
    color: #e2e8f0 !important;
}

body.dark-mode .theme-drawer-header,
body.dark-mode .mobile-menu-header {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .theme-drawer-title h4,
body.dark-mode .mobile-menu-header h4 {
    color: #ffffff !important;
}

body.dark-mode .theme-card-option {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .theme-card-title {
    color: #ffffff !important;
}

body.dark-mode .theme-card-desc {
    color: #94a3b8 !important;
}

body.dark-mode .mobile-submenu {
    background-color: #0b1120 !important;
}

body.dark-mode .mobile-submenu a {
    color: #94a3b8 !important;
    border-bottom-color: #1e293b !important;
}

body.dark-mode .mobile-submenu a:hover {
    color: var(--primary-color) !important;
}

body.dark-mode .news-filter-tabs {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .feed-tab-btn {
    color: #94a3b8 !important;
}

body.dark-mode .feed-tab-btn.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   KARANLIK MOD: MOBİL MENÜ, ARAMA, ARAMA RESULT VE MENÜ FOOTER DÜZENLEMELERİ
   ========================================================================== */

/* 1. Mobil Menü Başlıkları & Yazı Okunurluğu */
body.dark-mode .mobile-nav-list ul li a {
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .mobile-nav-list ul li a:hover {
    background-color: #0f172a !important;
}

body.dark-mode .m-title {
    color: #f8fafc !important;
}

body.dark-mode .m-title i {
    color: var(--primary-color) !important;
}

body.dark-mode .m-desc {
    color: #cbd5e1 !important; /* Okunurluğu artırılmış parlak gri */
}

body.dark-mode .mobile-nav-list .arrow {
    color: #94a3b8 !important;
}

body.dark-mode .brand-text-mobile .asm-title {
    color: #e2e8f0 !important;
}

/* 2. Alt Menü (Submenu) Karanlık Mod Uyumu */
body.dark-mode .mobile-submenu {
    background-color: #090d16 !important;
}

body.dark-mode .mobile-nav-list .mobile-submenu li a {
    color: #cbd5e1 !important;
    border-bottom-color: #1e293b !important;
    opacity: 0.9 !important;
}

body.dark-mode .mobile-nav-list .mobile-submenu li a:hover {
    color: #ffffff !important;
    background-color: #1e293b !important;
}

/* 3. Mobil Arama Alanı ve Arama Result Bölümü */
body.dark-mode .mobile-search-box {
    background-color: #1e293b !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .search-input-wrapper input {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .search-input-wrapper input::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .search-input-wrapper input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 130, 138, 0.25) !important;
}

body.dark-mode .mobile-menu-search-results {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    border-bottom-color: var(--primary-color) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    color: #f1f5f9 !important;
}

body.dark-mode .mobile-menu-search-results .search-result-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .mobile-menu-search-results .search-result-item:hover {
    background-color: #26354a !important;
    border-color: var(--primary-color) !important;
}

/* 4. Mobil Menü Footer'ı, Sosyal Medya İkonları ve Metinleri */
body.dark-mode .mobile-menu-footer {
    background-color: #0f172a !important;
    border-top-color: #334155 !important;
}

body.dark-mode .mobile-theme-row,
body.dark-mode .m-util-link {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .mobile-theme-label {
    color: #f1f5f9 !important;
}

body.dark-mode .mobile-social-bar a {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: var(--primary-color) !important;
}

body.dark-mode .mobile-social-bar a:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .mobile-copy {
    color: #94a3b8 !important;
}

/* 5. PC Mega Dropdown Flyout Menü Karanlık Mod Desteği */
body.dark-mode .flyout-card-menu,
body.dark-mode .flyout-sub-list {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .flyout-list li a {
    border-bottom-color: #334155 !important;
}

body.dark-mode .flyout-list li a:hover {
    background-color: #0f172a !important;
}

body.dark-mode .flyout-link-title {
    color: #f8fafc !important;
}

body.dark-mode .flyout-link-desc {
    color: #94a3b8 !important;
}

body.dark-mode .mega-menu-banner {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .mega-banner-desc {
    color: #cbd5e1 !important;
}

/* 6. Muayene & Randevu Rehberi ve Tahlil Bilgi Kartı */
.muayene-title {
    color: var(--primary-color);
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.muayene-desc {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0 0 14px 0;
}

.tahlil-info-box {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.84rem;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.tahlil-info-box i {
    color: var(--primary-color);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.muayene-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.btn-detail-action {
    background: #ffffff;
    color: #334155;
    border: 1.5px solid #cbd5e1;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 140px;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-detail-action:hover {
    background: var(--pastel-bg);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .muayene-desc {
    color: #cbd5e1 !important;
}

body.dark-mode .tahlil-info-box {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .btn-detail-action {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .btn-detail-action:hover {
    background: #1e293b !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* --------------------------------------------------------------------------
   2. TEMEL SIFIRLAMA (RESET) VE GENEL AYARLAR
   -------------------------------------------------------------------------- */
/* Tarayıcı Scrollbar Şekillendirme (Native Browser Scrollbar) */
html {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* TARAYICI SCROLLBAR İPTALİ (Verilen projedeki gibi - özel scrollbar devrede) */
::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--body-bg);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    padding-top: var(--header-actual-height, 220px) !important; /* Fixed Top Header Payı (Duyurular-bar + Kurumsal-bar + Mapping-bar) */
}

/* Tüm body içeriğini saran ana kapsayıcı */
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow-x: clip;
}

.app-wrapper > main,
.app-wrapper > #app-view-container {
    flex: 1 0 auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.bg-pastel,
.bg-theme-soft {
    background-color: var(--pastel-bg) !important;
}

.bg-warm-soft,
.bg-white,
.bg-yellow-soft {
    background-color: #ffffff !important;
}

section {
    padding: 3rem 0;
}

.page-wrapper {
    padding: 3rem 0;
    min-height: 60vh;
}

.page-content-container {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

/* --------------------------------------------------------------------------
   3. BÖLÜM VE SAYFA BAŞLIKLARI (SOLA YASLI BAŞLIK + AYNI HİZADA SAĞA YASLI BUTON)
   -------------------------------------------------------------------------- */
.section-head, .page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 2px solid color-mix(in srgb, var(--primary-color) 16%, #f1f5f9);
    position: relative;
    text-align: left;
}

.section-head::after, .page-head::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

.section-head-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    flex: 1;
}

.section-badge, .detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--primary-color);
    background: var(--pastel-bg);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    margin-bottom: 4px;
    line-height: 1.2;
    white-space: nowrap !important;
    max-width: 100%;
    flex-shrink: 0;
}

.section-title, .page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 3px 0;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-title::before {
    content: '';
    display: inline-block;
    width: 3.5px;
    height: 1.05em;
    background-color: var(--primary-color);
    border-radius: 2px;
    flex-shrink: 0;
}

.section-desc, .page-desc {
    display: none !important; /* Kullanıcı talebi: Section başlıklarındaki açıklamalar tamamen kaldırıldı */
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.35;
}

.title-underline {
    display: none;
}

/* Sağdaki 'Tümünü Gör / Diğer' Aksiyon Butonu */
.btn-section-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--pastel-bg);
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-section-more:hover {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(0, 130, 138, 0.2);
}

.btn-section-more i {
    font-size: 0.78rem;
    transition: transform 0.2s ease;
}

.btn-section-more:hover i {
    transform: translateX(3px);
}

/* Mobilde Başlık ve Butonun Aynı Hizada Uyumlu Kalması */
@media (max-width: 768px) {
    .section-head, .page-head {
        margin-bottom: 20px;
        padding-bottom: 10px;
        gap: 10px;
    }

    .section-title, .page-title {
        font-size: 1.25rem;
    }

    .section-desc, .page-desc {
        font-size: 0.8rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .btn-section-more {
        padding: 5px 12px;
        font-size: 0.76rem;
    }
}

@media (max-width: 480px) {
    .section-title, .page-title {
        font-size: 1.1rem;
    }

    .btn-section-more {
        padding: 4px 10px;
        font-size: 0.74rem;
        gap: 4px;
    }
}

/* --------------------------------------------------------------------------
   3-B. SPA ÖZEL DİNAMİK DAİRESEL YÜKLEME (ORBITAL CIRCULAR LOADER)
   -------------------------------------------------------------------------- */
.spa-view-stage {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 280px);
}

.spa-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px 20px;
    z-index: 50;
    pointer-events: none;
    background: transparent;
    animation: loaderOverlayFadeOut 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loaderOverlayFadeOut {
    0%, 45% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.spa-loader-container {
    width: 100%;
    min-height: calc(100vh - 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 80px 20px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    animation: spaLoaderFadeIn 0.35s ease-out forwards;
}

@keyframes spaLoaderFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.spa-loader-orbit {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.spa-orbit-track-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transform-origin: center center;
}

.spa-orbit-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible !important;
}

/* Dairenin Dolu İçi (Tema pastel rengiyle dolu) */
.orbit-fill-bg {
    fill: color-mix(in srgb, var(--primary-color) 8%, #ffffff);
    transition: fill 0.3s ease;
}

/* Dışındaki Daha Açık Renkli Zarif Bordür */
.orbit-light-border {
    fill: none;
    stroke: color-mix(in srgb, var(--primary-color) 22%, #e2e8f0);
    stroke-width: 2.5;
}

/* Noktanın Çizdiği Canlı Çember */
.orbit-spark-tracer {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 263.89;
    stroke-dashoffset: 263.89;
    animation: drawCircleProgress 2s cubic-bezier(0.35, 0, 0.15, 1) forwards;
}

@keyframes drawCircleProgress {
    0% {
        stroke-dashoffset: 263.89;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Yörüngede Daire Çizen Parlak Dairesel Nokta */
.orbit-glow-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: orbitDotTrace 2s cubic-bezier(0.35, 0, 0.15, 1) forwards;
    pointer-events: none;
}

.orbit-glow-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 13px;
    height: 13px;
    background: #ffffff;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 16px var(--primary-color);
}

@keyframes orbitDotTrace {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.orbit-center-icon {
    position: absolute;
    font-size: 1.7rem;
    color: var(--primary-color);
    animation: heartPulse 1.2s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.18); opacity: 1; }
}

.spa-loader-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.spa-loader-text .loading-dots {
    color: var(--primary-color);
    font-weight: 800;
    letter-spacing: 2px;
    animation: loadingDotsBlink 1.4s infinite;
}

@keyframes loadingDotsBlink {
    0%, 20% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

/* Sayfanın Ortadan Yukarıya Doğru 3sn Süreyle Yükselerek Yerleşmesi (Opacity: 0.3 -> 1) */
.spa-view-entering {
    animation: spaPageRiseUp 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

@keyframes spaPageRiseUp {
    0% {
        opacity: 0.3;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   4. ÜST KOYU PASTEL HABER & DUYURU ŞERİDİ (LIVE ANNOUNCEMENT TICKER)
   -------------------------------------------------------------------------- */
.top-utility-bar {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    color: #cbd5e1;
    padding: 4px 0;
    min-height: 48px;
    box-sizing: border-box;
    position: relative;
    z-index: 920;
    overflow: hidden;
    transition: background 2.5s ease-in-out;
}

/* 1 Dakikada Bir Otomatik Değişen Koyu Pastel Zemin Renkleri */
.top-utility-bar.theme-phase-0 {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}
.top-utility-bar.theme-phase-1 {
    background: linear-gradient(90deg, #06282d 0%, #0d444b 50%, #06282d 100%);
}
.top-utility-bar.theme-phase-2 {
    background: linear-gradient(90deg, #0f1c3f 0%, #1a2f68 50%, #0f1c3f 100%);
}
.top-utility-bar.theme-phase-3 {
    background: linear-gradient(90deg, #2b0b14 0%, #4a1523 50%, #2b0b14 100%);
}
.top-utility-bar.theme-phase-4 {
    background: linear-gradient(90deg, #0b2228 0%, #143e49 50%, #0b2228 100%);
}

.top-bar-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ticker-left-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    cursor: pointer !important;
    user-select: none;
}

/* Yanıp Sönen Canlı Duyuru Rozeti */
.ticker-live-badge {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2.5px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.live-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ef4444;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: livePulseGlow 1.8s infinite;
}

@keyframes livePulseGlow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Üst Haber ve Duyuru Şeridi Akışı */
.ticker-content-flow {
    flex: 1;
    min-width: 0;
    height: 38px;
    position: relative;
    overflow: visible;
}

/* Kalp Kardiyo (EKG) Ritim Grafiği Canvas Katmanı */
.ticker-ecg-canvas {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: calc(100% + 12px);
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Yazı Üzerinde Rastgele Eğri Yörüngelerle İlerleyen Nokta Işık (Spark Orb) */
.ticker-spark-orb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 8px #ffffff,
        0 0 16px #00f2fe,
        0 0 28px #38bdf8,
        0 0 45px rgba(255, 255, 255, 0.95);
    z-index: 999;
    pointer-events: none;
    opacity: 0;
}

/* Işığın Yazı Biter Bitmez Hızla Genişleyerek Şeffaflaşması (Fast Dissolve) */
.ticker-spark-orb.orb-dissolve-expand {
    animation: orbExpandAndFadeOut 0.22s ease-out forwards;
}

@keyframes orbExpandAndFadeOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: brightness(2.5);
    }
    50% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0.45;
        filter: brightness(1.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0;
        filter: brightness(1.0);
    }
}

/* Işığın 2 Satırlık Yazı Yüksekliğini Saran Işıltı Halesi */
.ticker-spark-orb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.6) 0%, rgba(56, 189, 248, 0.25) 55%, transparent 100%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.ticker-flip-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Kart: Harfler karakter bazlı sıra ile görünür, 2 satır uyumlu */
.ticker-flip-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    white-space: normal;
    overflow: hidden;
}

.ticker-flip-card.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.ticker-flip-card.exit-up {
    display: flex;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ticker-item {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #ffffff;
    font-size: 12.5px;
    line-height: 1.35;
    max-height: 36px;
    white-space: normal !important;
    will-change: transform;
}

.ticker-word {
    display: inline-block;
    white-space: nowrap;
}

.ticker-char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.05s ease;
}

.ticker-item i {
    color: #38bdf8;
    font-size: 0.92rem;
    margin-right: 6px;
    display: inline-block;
    vertical-align: baseline;
}

.ticker-item strong {
    color: #ffffff;
    font-weight: 600;
}



/* Sağ Acil & Hızlı Link Butonları */
.top-emergency-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.top-util-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.top-util-chip:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.top-util-chip.chip-emergency {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-weight: 600;
}

.top-util-chip.chip-emergency:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

/* --------------------------------------------------------------------------
   4-B. SAĞDAN/SOLDAN AÇILAN VE DİKEY SÜRÜKLENEBİLEN FLOATING EYLEM DOCK'U
   -------------------------------------------------------------------------- */
.sticky-action-dock {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99998;
    display: flex;
    flex-direction: column;
    gap: 4px;
    touch-action: none;
    user-select: none;
}

.sticky-action-dock.is-dragging {
    cursor: grabbing !important;
}

.sticky-action-dock.is-dragging * {
    cursor: grabbing !important;
}

.theme-floating-btn {
    background: var(--primary-color);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-right: none;
    border-radius: 8px 0 0 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    box-shadow: -3px 4px 14px rgba(0, 0, 0, 0.2);
    cursor: grab;
    user-select: none;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.90rem;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
}

.theme-floating-btn:hover:not(.is-dragging) {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.mobile-sticky-back-btn {
    display: none;
}

.theme-floating-btn.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
    box-shadow: -8px 12px 30px rgba(0, 0, 0, 0.35) !important;
}

.theme-floating-btn:hover:not(.is-dragging) {
    padding-left: 18px;
    background: var(--primary-hover);
    box-shadow: -6px 8px 28px rgba(0, 0, 0, 0.25);
}

.theme-floating-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.theme-floating-btn:hover .theme-floating-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}

/* Tema Çekmecesi & Blur Backdrop */
.theme-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0.3s, opacity 0.3s;
}

.theme-drawer-overlay.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.theme-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.theme-drawer-panel {
    position: absolute;
    top: 0;
    right: -360px;
    width: 330px;
    max-width: 90vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    z-index: 2;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.theme-drawer-overlay.open .theme-drawer-panel {
    right: 0;
}

.theme-drawer-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.theme-drawer-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-drawer-title i {
    font-size: 1.4rem;
    color: var(--primary-color);
}

.theme-drawer-title h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
}

.theme-drawer-title p {
    margin: 2px 0 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.theme-drawer-close {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.theme-drawer-close:hover {
    color: #ef4444;
    transform: rotate(90deg);
}

.theme-drawer-body {
    flex: 1;
    padding: 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.theme-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    margin: 0;
}

.theme-options-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theme-card-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-card-option:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateX(-3px);
}

.theme-card-option.active {
    border-color: var(--primary-color);
    background: var(--pastel-bg);
    box-shadow: 0 4px 14px rgba(0, 130, 138, 0.12);
}

.theme-swatch-box {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.theme-swatch-box .check-icon {
    display: none;
}

.theme-card-option.active .theme-swatch-box .check-icon {
    display: block;
}

.swatch-default { background: linear-gradient(135deg, #00828a, #005a60); }
.swatch-blue { background: linear-gradient(135deg, #0d6efd, #0948a8); }
.swatch-green { background: linear-gradient(135deg, #1b8a5a, #0f5436); }
.swatch-red { background: linear-gradient(135deg, #b71c1c, #700f0f); }

.theme-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.theme-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
}

.theme-card-desc {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.3;
}

.theme-drawer-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--border-color);
    background: #f8fafc;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-theme-reset {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-theme-reset:hover {
    background: #f1f5f9;
    color: var(--primary-color);
}

/* Karanlık Modda Tema Menüsü Bileşenleri */
body.dark-mode .theme-drawer-panel {
    background-color: #1e293b !important;
    border-left: 1px solid #334155;
    color: #f1f5f9 !important;
}

body.dark-mode .theme-drawer-header {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .theme-drawer-title h4 {
    color: #f1f5f9 !important;
}

body.dark-mode .theme-drawer-title p {
    color: #94a3b8 !important;
}

body.dark-mode .theme-drawer-close {
    color: #94a3b8;
}

body.dark-mode .theme-drawer-close:hover {
    color: #ef4444;
}

body.dark-mode .theme-drawer-footer {
    background-color: #0f172a !important;
    border-top-color: #334155 !important;
}

body.dark-mode .btn-theme-reset {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .btn-theme-reset:hover {
    background-color: #0f172a !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .theme-card-option {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .theme-card-option:hover {
    border-color: #64748b !important;
    background-color: #162032 !important;
}

body.dark-mode .theme-card-option.active {
    border-color: var(--primary-color) !important;
    background-color: rgba(0, 130, 138, 0.15) !important;
}

body.dark-mode .theme-card-title {
    color: #f1f5f9 !important;
}

body.dark-mode .theme-card-desc {
    color: #94a3b8 !important;
}

/* --------------------------------------------------------------------------
   FIXED TOP HEADER SECTION (HEADER + ANA MENÜ SABİTLEME)
   -------------------------------------------------------------------------- */
.sticky-header-wrapper,
#main-header-area {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 950 !important;
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease;
}

body.dark-mode .sticky-header-wrapper,
body.dark-mode #main-header-area {
    background-color: #1e293b;
}

.sticky-header-wrapper .primary-navbar {
    position: relative;
    top: auto;
}

/* --------------------------------------------------------------------------
   5. PC HEADER ALANI (80px LOGO + KURUMSAL KİMLİK)
   -------------------------------------------------------------------------- */
.main-header {
    background-color: #ffffff;
    min-height: 92px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: relative;
    z-index: 915;
    overflow: hidden; /* Taşmaları gizler */
    padding: 0;
}

.header-layout {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Sol Kurumsal Kimlik: 80x80 Logo + 2 Satır İsim */
.brand-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 5; /* Bayrak zemininden üstte net okunur */
    cursor: pointer !important;
    text-decoration: none !important;
    user-select: none;
    transition: opacity 0.2s ease;
}

.brand-identity:hover {
    opacity: 0.92;
}

.brand-identity * {
    cursor: pointer !important;
}

.header-logo-box,
.round-emblem {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}

.header-logo-img,
.round-emblem img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    display: block;
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
    transition: filter 0.25s ease, transform 0.2s ease;
}

.round-logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: filter 0.25s ease;
}

.footer-logo-img,
.round-emblem-small img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    display: block;
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
    transition: filter 0.25s ease;
}

/* Karanlık Modda PNG Logo (Hafif ve Net Aydınlık Görünüm) */
body.dark-mode .header-logo-img,
body.dark-mode .round-emblem img,
body.dark-mode .round-logo img,
body.dark-mode .footer-logo-img,
body.dark-mode .round-emblem-small img {
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)) !important;
}

.brand-naming {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    max-height: 86px; /* 86px logo ile tam orantılı hizalama */
    overflow: hidden;
}

.brand-naming .brand-line-1 {
    font-size: 0.7rem; /* 1. Satır: .7rem ve bold */
    font-weight: 700;
    color: #dc2626; /* Aydınlık temada sadece kırmızı */
    letter-spacing: 0px;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    transition: color 0.2s ease;
}

.brand-naming .brand-line-2 {
    font-size: 0.8rem; /* 2. Satır: .8rem ve bold */
    font-weight: 700;
    color: #dc2626; /* Aydınlık temada sadece kırmızı */
    letter-spacing: -0.1px;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    transition: color 0.2s ease;
}

.brand-naming .brand-line-3 {
    font-size: 0.6rem; /* 3. Satır: .6rem ve bold */
    font-weight: 700;
    color: #dc2626; /* Aydınlık temada sadece kırmızı */
    letter-spacing: -0.1px;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    transition: color 0.2s ease;
}

/* Mobilde 52px Logo İçi 3 Satır Kompakt Boyutlandırma */
.brand-text-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0px;
    max-height: 52px; /* Mobil logonun 52px yüksekliğini geçmez */
    overflow: hidden;
}

.brand-text-mobile .brand-line-1 {
    font-size: 0.85rem; /* Mobilde 1. Satır */
    font-weight: 700;
    color: #dc2626; /* Aydınlık temada sadece kırmızı */
    letter-spacing: 0px;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    transition: color 0.2s ease;
}

.brand-text-mobile .brand-line-2 {
    font-size: 0.72rem; /* Mobilde 2. Satır */
    font-weight: 700;
    color: #dc2626; /* Aydınlık temada sadece kırmızı */
    letter-spacing: -0.1px;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    transition: color 0.2s ease;
}

.brand-text-mobile .brand-line-3 {
    font-size: 0.72rem; /* Mobilde 3. Satır */
    font-weight: 500;
    color: #dc2626; /* Aydınlık temada sadece kırmızı */
    letter-spacing: -0.15px;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    transition: color 0.2s ease;
}

/* Karanlık Modda Kurumsal Alandaki Bütün Yazılar Tema Rengi ile Boyanır */
body.dark-mode .brand-naming .brand-line-1,
body.dark-mode .brand-naming .brand-line-2,
body.dark-mode .brand-naming .brand-line-3,
body.dark-mode .brand-text-mobile .brand-line-1,
body.dark-mode .brand-text-mobile .brand-line-2,
body.dark-mode .brand-text-mobile .brand-line-3 {
    color: var(--primary-color) !important;
}

.mobile-hamburger-btn {
    position: relative;
    z-index: 10;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--pastel-bg);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: 10px;
    font-size: 1.35rem;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.mobile-hamburger-btn:hover {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* Belirgin, Ergonomik ve Şık Menü Kapatma Butonu */
.close-menu-btn {
    position: relative;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 1.25rem;
    color: #334155;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.close-menu-btn:hover {
    color: #ffffff;
    background-color: #ef4444; /* Vurgulu kapatma hissi */
    border-color: #ef4444;
    transform: scale(1.05);
}

body.dark-mode .close-menu-btn {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .close-menu-btn:hover {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   6. PC ANA MENÜ ÇUBUĞU (TURKUAZ + UÇARAK GELEN DROPDOWN)
   -------------------------------------------------------------------------- */
.primary-navbar {
    background-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 130, 138, 0.2);
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 52px;
}

/* --------------------------------------------------------------------------
   ALT MENÜ AÇILDIĞINDA SAYFAYA HAFİF BLUR EFEKTİ
   -------------------------------------------------------------------------- */
.navbar-backdrop-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 850; /* Navbar (900) ve Dropdown (1000) altında kalır */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Menü hover edildiğinde veya JS ile tetiklendiğinde blur devreye girer */
body:has(.primary-navbar .has-flyout:hover) .navbar-backdrop-blur,
body.menu-blur-active .navbar-backdrop-blur {
    opacity: 1;
    visibility: visible;
}

body:has(.primary-navbar .has-flyout:hover) main,
body:has(.primary-navbar .has-flyout:hover) .hero-slider-section,
body:has(.primary-navbar .has-flyout:hover) .breadcrumb-bar,
body.menu-blur-active main,
body.menu-blur-active .hero-slider-section,
body.menu-blur-active .breadcrumb-bar {
    filter: blur(1.5px);
    transition: filter 0.25s ease;
}

main, .hero-slider-section, .breadcrumb-bar {
    transition: filter 0.25s ease;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Dikeyde menüyü tam kaplar */
    position: relative; /* Mega menünün tam ortalanması için referans */
    height: 100%;
    min-height: 52px;
}

.main-nav-items {
    display: flex;
    align-items: stretch; /* Dikeyde menüyü tam kaplar */
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    position: relative; /* Alt menülerin ilgili butona göre hizalanması için */
    display: flex;
    align-items: stretch; /* Dikeyde menüyü tam kaplar */
    height: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 clamp(10px, 1.25vw, 20px);
    min-height: 52px;
    height: 100%;
    width: 100%;
    color: #ffffff;
    font-size: clamp(0.86rem, 0.95vw, 0.95rem);
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap; /* Menü metinlerinin 2 satıra kırılıp yüksekliği bozmasını engeller */
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
    border-top: none;
    border-radius: 0;
    text-decoration: none;
}

.nav-link.home-icon {
    padding: 0 clamp(14px, 1.4vw, 20px);
    margin: 0;
    font-size: 1.15rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-top: none;
}

.nav-arrow {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}

/* Hover & Active Efekti: Dikeyde tüm menüyü sıfır boşlukla kaplar */
.nav-item:hover > .nav-link,
.nav-item.active > .nav-link,
.nav-link:hover,
.nav-link.active {
    background-color: var(--primary-hover);
    color: #ffffff;
    border-radius: 0;
    height: 100%;
}

.nav-item:hover > .nav-link .nav-arrow {
    transform: rotate(180deg);
}

/* KESİNTİSİZ HOVER KÖPRÜSÜ */
.has-flyout::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 14px;
    background: transparent;
    z-index: 999;
}

/* UÇAN MEGA DROPDOWN MENÜ: SOLDAN HİZALI + SABİT STABİL YÜKSEKLİK */
.flyout-card-menu {
    --shift-x: 0px;
    position: absolute;
    top: 100%;
    left: 0; /* Soldaki menüler soldan hizalı */
    right: auto;
    transform: translate(var(--shift-x), 4px);
    transform-origin: top left;
    margin-top: 6px;
    width: 680px;
    height: 330px; /* Sabit yükseklik: Hoverda veya ilk açılışta boyutu asla değişmez */
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border-radius: 10px; /* Dört köşesi tamamen yuvarlatılmış */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    padding: 16px;
    box-sizing: border-box;
    
    display: grid;
    grid-template-columns: 1fr 260px; /* SOL: Linkler, SAĞ: Dinamik Kategori Bannerı */
    gap: 16px;
    align-items: stretch;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
    z-index: 1000;
}

.has-flyout:hover > .flyout-card-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--shift-x), 0);
    pointer-events: auto;
}

/* SAĞDAKİ MENÜLER: SAĞDAN HİZALI AÇILIR */
.nav-item.align-right > .flyout-card-menu,
.main-nav-items > .nav-item:nth-last-child(-n+3) > .flyout-card-menu {
    left: auto;
    right: 0; /* Sağdan menü ile tam hizalı açılır */
    transform-origin: top right;
}

/* 1260px - 763px ARASI: HİZMETLERİMİZ VE SAĞDAKİ TÜM MENÜLER SAĞDAN HİZALI AÇILIR */
@media (max-width: 1260px) and (min-width: 763px) {
    .main-nav-items > .nav-item:nth-child(n+4) > .flyout-card-menu {
        left: auto !important;
        right: 0 !important;
        transform-origin: top right !important;
    }

    .flyout-card-menu {
        width: 580px;
        max-width: calc(100vw - 32px);
        grid-template-columns: 1fr 210px;
    }
}

@media (max-width: 992px) and (min-width: 763px) {
    .flyout-card-menu {
        width: 520px;
        max-width: calc(100vw - 24px);
        grid-template-columns: 1fr 180px;
        padding: 12px;
        gap: 12px;
    }
}

/* Sol Alt Menü Listesi */
.flyout-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: 100%;
    box-sizing: border-box;
}

.flyout-list li {
    position: relative;
}

.flyout-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border-bottom: 1px solid #f8fafc;
    transition: all 0.2s ease;
}

/* Sol İkon Kutusu */
.flyout-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--pastel-bg);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.flyout-link-box {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    flex: 1;
}

.flyout-link-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    transition: color 0.2s ease;
}

.flyout-link-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 400;
    transition: color 0.2s ease;
    line-height: 1.2;
}

.flyout-list li a:hover {
    background-color: var(--pastel-bg);
}

.flyout-list li a:hover .flyout-icon-box {
    background-color: var(--primary-color);
    color: #ffffff;
    transform: scale(1.05);
}

.flyout-list li a:hover .flyout-link-title {
    color: var(--primary-color);
}

.flyout-list li a:hover .flyout-link-desc {
    color: var(--primary-color);
    opacity: 0.85;
}

.flyout-list li a:hover i.sub-arrow {
    color: var(--primary-color);
    transform: translateX(3px);
}

.sub-arrow {
    font-size: 0.75rem;
    color: #cbd5e1;
    transition: all 0.2s ease;
    margin-left: auto;
}

/* Sağ Kategori Banner Alanı (Sabit ve Taşmayan Boyutlar) */
.mega-menu-banner {
    background-color: var(--pastel-bg);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 1px solid rgba(0, 0, 0, 0.04);
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.mega-banner-img {
    width: 100%;
    height: 135px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.mega-banner-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow: hidden;
}

.mega-banner-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.25;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.mega-banner-desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px; /* Sabit 3 satır yüksekliği, metin değişse de kutu boyutu asla değişmez */
    transition: color 0.2s ease;
}

/* Alt Kırılım Menü: Dört Köşesi Tamamen Yuvarlatılmış */
.flyout-sub-list {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 6px;
    min-width: 230px;
    background: #ffffff;
    border-radius: 10px; /* Dört köşesi tamamen yuvarlatılmış */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    padding: 6px 0;
    
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.flyout-sub-list li:first-child a {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.flyout-sub-list li:last-child a {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

/* Sola Açılan / Ekrana Sığdırılan Alt Menü (Flip Left) */
.flyout-sub-list.flip-left {
    left: auto !important;
    right: 100% !important;
    margin-left: 0 !important;
    margin-right: 6px !important;
    transform: translateX(-10px);
}

.has-flyout-sub:hover > .flyout-sub-list {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.has-flyout-sub:hover > .flyout-sub-list.flip-left {
    transform: translateX(0);
}

.sub-arrow {
    font-size: 0.75rem;
    color: #94a3b8;
}

.nav-search-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.1rem;
    padding: 0 16px;
    height: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.nav-search-btn:hover {
    background-color: var(--primary-hover);
}

/* --------------------------------------------------------------------------
   7. BREADCRUMB / KONUM ÇUBUĞU (PAGE MAPPING)
   -------------------------------------------------------------------------- */
.breadcrumb-bar {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 6px 0;
    font-size: 0.76rem; /* Yazı boyutu biraz küçültüldü */
    position: relative;
    z-index: 910;
}

body.dark-mode .breadcrumb-bar {
    background-color: #1e293b;
    border-bottom-color: #334155;
}

.breadcrumb-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.breadcrumb-path {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 400; /* Bold kaldırıldı, regular yapıldı */
}

.crumb-location-icon {
    font-size: 10px !important; /* Konum ikonu 10px olarak gösterilsin */
    color: var(--primary-color);
    flex-shrink: 0;
    margin-right: 2px;
}

.breadcrumb-path a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 400; /* Regular */
    flex-shrink: 0;
}

.breadcrumb-path a:hover {
    text-decoration: underline;
}

.breadcrumb-path .sep {
    margin: 0 3px;
    color: #94a3b8;
    flex-shrink: 0;
    font-weight: 400;
}

.breadcrumb-path .current {
    color: #64748b;
    font-weight: 400; /* Regular */
    overflow: hidden;
    text-overflow: ellipsis; /* Butonların arkasına geçmez, üç nokta ile kesilir */
    white-space: nowrap;
    min-width: 0;
}

body.dark-mode .breadcrumb-path .current {
    color: #cbd5e1;
}

.breadcrumb-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.breadcrumb-actions button {
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 3px 8px;
    color: #475569;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb-actions button:hover {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

body.dark-mode .breadcrumb-actions button {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

/* --------------------------------------------------------------------------
   8. GENEL SECTİON VE HERO / SLIDER STİLLERİ
   -------------------------------------------------------------------------- */
section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.hero-slider-section {
    position: relative;
    width: 100%;
    height: 280px;
    max-height: 280px;
    min-height: 280px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sayfa genişliğinde yatayda yayılan ambiyans zemin rengi (Yavaş ve Sinematik Çapraz Geçiş) */
.hero-ambient-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-ambient-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity;
}

.hero-ambient-bg.active {
    opacity: 1;
}

.hero-ambient-bg.ambient-layer-a {
    background: #e6f4f5;
}

.hero-ambient-bg.ambient-layer-b {
    background: #e8f0fe;
}

/* Ortadaki Container Kutusu - Kenarlara Fixli Tam Genişlik (Boşluksuz) */
.hero-container-box {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.hero-slider-container {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* KUSURSUZ VE SİNEMATİK ÇAPRAZ GEÇİŞ (CROSS-FADE) */
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    color: #ffffff;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2;
}

/* =========================================================
   4 AYRI ÖZEL SLAYT DÜZENİ ŞABLONU (HERO SLIDER TEMPLATES)
   ========================================================= */

/* ---------------------------------------------------------
   SLAYT 1: TİPOGRAFİ & KOYU PASTEL ZEMİN (BAŞLIK, ALT BAŞLIK, AÇIKLAMA, BUTON)
   1. En üstte başlık
   2. İkinci satır Alt Başlık (boş geçilebilir)
   3. Üçüncü satırda 2 satırlık açıklama
   4. Altında aksiyon butonu
   Koyu pastel zemin, açık renk yazılar.
   Arka planda orta bölümde 1/3 alanına yayılan yumuşak organik bulut efekti.
   --------------------------------------------------------- */
.hero-slide.slide-type-typography {
    background: #132e35; /* Koyu pastel petrol / turkuaz zemin */
    position: relative;
    overflow: hidden;
}

/* Orta bölümde slaytın 1/3 alanına yayılan yumuşak, organik bulut / sis ışık efekti */
.hero-slide.slide-type-typography::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38%; /* Slaytın yaklaşık 1/3 genişliğinde */
    height: 75%;
    background: radial-gradient(ellipse at center, 
        rgba(255, 255, 255, 0.18) 0%, 
        rgba(56, 189, 248, 0.14) 30%, 
        rgba(255, 255, 255, 0.06) 60%, 
        transparent 80%
    );
    filter: blur(28px);
    -webkit-filter: blur(28px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.hero-slide.slide-type-typography .hero-slide-grid {
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

.hero-slide.slide-type-typography .hero-content {
    align-items: flex-start;
    padding: 16px 0;
}

.hero-slide.slide-type-typography .hero-content h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.25;
}

.hero-slide.slide-type-typography .hero-subtitle {
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-slide.slide-type-typography .hero-content p {
    font-size: 0.96rem;
    line-height: 1.55;
    color: #e2e8f0;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
    max-width: 760px;
}

/* ---------------------------------------------------------
   SLAYT 2: ARKA PLAN RESMİ + KADEMELİ GEÇİŞLİ MASKE KATMANI
   - Resim daima sola yaslı gelir (veya .align-right ile sağa)
   - Sola yaslıyken maske katmanı soldan sağa 0.1 -> 0.3 -> 0.5 (ve koyulaşarak 1'e)
     opacity değerine sahip olur ve yazılar sağda kalır.
   - Sağa yaslıyken tersi uygulanır (maske sağdan sola 0.1 -> 0.3 -> 0.5 ve yazılar solda).
   - 1 satır başlık, 5 satır açıklama, altta link butonlar.
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   KATEGORİ ROZETLERİ (SLAYT KATEGORİSİ ETİKETLERİ)
   - Haber Slaytı, Duyuru Slaytı, Kurumsal Tanıtım, Hizmet & Galeri
   --------------------------------------------------------- */
.hero-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    width: fit-content;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero-category-tag.tag-news {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.9), rgba(194, 65, 12, 0.95));
    color: #ffffff;
    border-color: rgba(251, 146, 60, 0.4);
}

.hero-category-tag.tag-announcement {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.9), rgba(2, 132, 199, 0.95));
    color: #ffffff;
    border-color: rgba(56, 189, 248, 0.4);
}

.hero-category-tag.tag-intro {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.95));
    color: #ffffff;
    border-color: rgba(52, 211, 153, 0.4);
}

.hero-category-tag.tag-gallery {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(126, 34, 206, 0.95));
    color: #ffffff;
    border-color: rgba(192, 132, 252, 0.4);
}

/* Tüm slayt tıklanabilir link davranışı */
.hero-slide[data-slide-url] {
    cursor: pointer;
}

.hero-slide .hero-btns a,
.hero-slide .hero-btns button,
.hero-slide .gallery-circle-node {
    cursor: pointer;
    position: relative;
    z-index: 10;
}

/* ---------------------------------------------------------
   SLAYT 2: HABER SLAYTI (REFERANS FOTOĞRAF MODELİ)
   - Arka planda sağda hekim/sağlık görseli
   - Solda zengin petrol mavisi kademeli degrade (0.98 -> 0.85 -> 0.2 -> 0)
   - Sol tarafta net, okunabilir beyaz başlık ve açıklama metni
   - Sola yaslı görsel istendiğinde tersi (.align-left)
   --------------------------------------------------------- */
.hero-slide.slide-type-gradient-image {
    background-color: #0b2730 !important;
    position: relative;
    overflow: hidden;
}

/* Arka plan görseli: Varsayılan olarak sağa yaslı hekim görseli */
.hero-slide.slide-type-gradient-image .slide-under-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 68%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Sola yaslı alternatif görsel seçeneği */
.hero-slide.slide-type-gradient-image.align-left .slide-under-bg {
    left: 0;
    right: auto;
    background-position: left center;
}

/* Degrade maske katmanı (Sağdaki resim için: Soldan sağa 0.98 -> 0.85 -> 0.35 -> 0.10) */
.hero-slide.slide-type-gradient-image .slide-gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to right, 
        rgba(11, 39, 48, 0.98) 0%, 
        rgba(11, 39, 48, 0.94) 38%, 
        rgba(11, 39, 48, 0.65) 58%, 
        rgba(11, 39, 48, 0.15) 80%,
        transparent 100%
    );
}

/* Degrade maske - Resim solda ise: Sağdan sola koyulaşan maske */
.hero-slide.slide-type-gradient-image.align-left .slide-gradient-overlay {
    background: linear-gradient(to left, 
        rgba(11, 39, 48, 0.98) 0%, 
        rgba(11, 39, 48, 0.94) 38%, 
        rgba(11, 39, 48, 0.65) 58%, 
        rgba(11, 39, 48, 0.15) 80%,
        transparent 100%
    );
}

.hero-slide.slide-type-gradient-image .hero-slide-grid {
    position: relative;
    z-index: 3;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    width: 100%;
    height: 100%;
}

.hero-slide.slide-type-gradient-image.align-left .hero-slide-grid {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
}

.hero-slide.slide-type-gradient-image .hero-content {
    max-width: 640px;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-slide.slide-type-gradient-image .hero-content h2 {
    font-size: clamp(1.4rem, 2.3vw, 2.0rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.hero-slide.slide-type-gradient-image .hero-content p.desc-5-lines {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    -webkit-line-clamp: 4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden;
    margin-bottom: 14px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------
   SLAYT 3: DUYURU SLAYTI (ŞIK PASTEL MASKE & NET DUYURU METNİ)
   --------------------------------------------------------- */
.hero-slide.slide-type-blur-circle {
    background-color: #0d2238;
    position: relative;
    overflow: hidden;
}

.hero-slide.slide-type-blur-circle .slide-base-photo-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 60%;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 1;
}

.hero-slide.slide-type-blur-circle .slide-frosted-mask-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to right, 
        rgba(13, 34, 56, 0.98) 0%, 
        rgba(13, 34, 56, 0.92) 42%, 
        rgba(13, 34, 56, 0.55) 65%, 
        rgba(13, 34, 56, 0.10) 85%,
        transparent 100%
    );
}

.hero-slide.slide-type-blur-circle .hero-slide-grid {
    position: relative;
    z-index: 3;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    width: 100%;
    height: 100%;
}

.hero-slide.slide-type-blur-circle .hero-content {
    max-width: 640px;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-slide.slide-type-blur-circle .hero-content h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 6px;
}

.hero-slide.slide-type-blur-circle .hero-content p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------
   SLAYT 4: İNTERAKTİF GALERİ & YUMUŞAK HATLI POPUP TOOLTİP
   - Yuvarlak resimler tercihe göre farklı konumlarda bulunabilir:
     .gallery-layout-top : Başlık üzerinde dairesel nodelar
     .gallery-layout-bottom : Açıklama altında (varsayılan)
     .gallery-layout-vertical-left : Solda dikey alt alta
     .gallery-layout-vertical-right : Sağda dikey alt alta
   - Hover penceresi: Ekran ve slayt dışına ASLA taşmaz!
   - Soft, yuvarlak hatlı (border-radius: 14px), şık ve yumuşak gölgeli
   --------------------------------------------------------- */
.hero-slide.slide-type-interactive-gallery {
    background: #0f1c2e;
    background-image: radial-gradient(circle at 50% 40%, #1e334d 0%, #091320 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible !important; /* Tooltip taşmasını önlemek ve görünür kılmak için */
}

.hero-gallery-cluster-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 12px 24px 34px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.hero-gallery-heading {
    text-align: center;
    margin-bottom: 12px;
}

.hero-gallery-heading h3 {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.hero-gallery-heading p {
    margin: 0;
    font-size: 0.82rem;
    color: #94a3b8;
}

/* Dairesel resim dizilimi - Varsayılan (Yatay) */
.hero-gallery-nodes-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    width: 100%;
    position: relative;
}

/* Alternatif Dizilim 1: Başlık Üstünde */
.hero-gallery-cluster-wrap.gallery-layout-top {
    flex-direction: column-reverse;
}

.hero-gallery-cluster-wrap.gallery-layout-top .hero-gallery-heading {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Alternatif Dizilim 2 & 3: Dikey Sol ve Dikey Sağ */
.hero-gallery-cluster-wrap.gallery-layout-vertical-left,
.hero-gallery-cluster-wrap.gallery-layout-vertical-right {
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
}

.hero-gallery-cluster-wrap.gallery-layout-vertical-right {
    flex-direction: row-reverse;
}

.hero-gallery-cluster-wrap.gallery-layout-vertical-left .hero-gallery-nodes-container,
.hero-gallery-cluster-wrap.gallery-layout-vertical-right .hero-gallery-nodes-container {
    flex-direction: column;
    width: auto;
    gap: 12px;
}

.gallery-circle-node {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s, box-shadow 0.25s;
    background: #1e293b;
    flex-shrink: 0;
}

.gallery-circle-node:hover,
.gallery-circle-node:focus {
    transform: scale(1.15);
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(0, 130, 138, 0.55);
    z-index: 60;
}

.gallery-circle-node img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* SOFT, YUVARLAK HATLI VE TAŞMAYAN TOOLTIP PENCERESİ */
.gallery-node-tooltip {
    position: absolute;
    top: calc(100% + 10px); /* Dairelerin altına açılır, slaytın üstünden kesilmez */
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 14px; /* Çok daha soft ve yuvarlak hatlar */
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 130, 138, 0.25);
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: normal;
    width: 220px;
    max-width: 80vw;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

/* Dairenin üstüne gelen ok ucu */
.gallery-node-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent rgba(15, 23, 42, 0.96) transparent;
}

/* İlk eleman solda taşmasın diye akıllı sol hizalama */
.gallery-circle-node:first-child .gallery-node-tooltip {
    left: 0;
    transform: translateX(0) translateY(-6px);
}
.gallery-circle-node:first-child .gallery-node-tooltip::before {
    left: 28px;
}

/* Son eleman sağda taşmasın diye akıllı sağ hizalama */
.gallery-circle-node:last-child .gallery-node-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-6px);
}
.gallery-circle-node:last-child .gallery-node-tooltip::before {
    left: auto;
    right: 28px;
}

.gallery-node-tooltip strong {
    display: block;
    color: #38bdf8;
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.gallery-node-tooltip span {
    display: block;
    color: #cbd5e1;
    font-size: 0.74rem;
}

.gallery-circle-node:hover .gallery-node-tooltip,
.gallery-circle-node:focus .gallery-node-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.gallery-circle-node:first-child:hover .gallery-node-tooltip,
.gallery-circle-node:first-child:focus .gallery-node-tooltip {
    transform: translateX(0) translateY(0);
}

.gallery-circle-node:last-child:hover .gallery-node-tooltip,
.gallery-circle-node:last-child:focus .gallery-node-tooltip {
    transform: translateX(0) translateY(0);
}

@media (max-width: 600px) {
    .gallery-circle-node {
        width: 50px;
        height: 50px;
    }
    .hero-gallery-nodes-container {
        gap: 10px;
    }
    .gallery-node-tooltip {
        width: 180px;
        padding: 8px 12px;
        font-size: 0.72rem;
    }
}

.gallery-node-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(15, 23, 42, 0.94) transparent transparent transparent;
}

.gallery-node-tooltip strong {
    display: block;
    color: var(--primary-color);
    font-size: 0.78rem;
    margin-bottom: 2px;
}

.gallery-circle-node:hover .gallery-node-tooltip,
.gallery-circle-node:focus .gallery-node-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .gallery-circle-node {
        width: 52px;
        height: 52px;
    }
    .hero-gallery-nodes-container {
        gap: 10px;
    }
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* Slider İçi İki Sütunlu Izgara (Sol = Yazılar & Butonlar, Sağ = Resim & Pencere) */
.hero-slide-grid {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto; /* Yazı alanı resmi sıkıştırmaz, resim üzerine taşmaz */
    align-items: center;
    gap: 16px;
    padding-right: 28px;
    box-sizing: border-box;
}

/* Sol Taraf: Tipografi ve Aksiyon Butonları (Sola Yaslı, Büyütülmüş Açıklama, Taşırmayan Yapı) */
.hero-content {
    padding: 16px 12px 16px 36px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Sağ Taraf: Görsel Alanı & 1/4 Yarıçaplı Dairesel Pencere (Circular Window Frame) */
.hero-slide-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Asla küçülüp ezilmez veya yazının altında kalmaz */
    z-index: 4;
}

.hero-visual-frame {
    position: relative;
    width: 140px; /* Yüksekliğin 280px olduğu durumda çap 140px, yarıçap 70px (1/4 oran) */
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.2), 0 12px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-visual-frame:hover {
    transform: scale(1.05);
}

.hero-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08);
    transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide.active .hero-visual-img {
    transform: scale(1);
}

.hero-circle-window-lens {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

@media (max-width: 992px) {
    .hero-slide-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-right: 18px;
        gap: 12px;
    }

    .hero-content {
        padding: 12px 8px 42px 18px;
    }

    .hero-visual-frame {
        width: 105px;
        height: 105px;
        border-width: 3px;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.35);
    }
}

@media (max-width: 480px) {
    .hero-slide-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-right: 12px;
        gap: 8px;
    }

    .hero-content {
        padding: 8px 4px 38px 12px;
    }

    .hero-visual-frame {
        width: 82px;
        height: 82px;
        border-width: 2.5px;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 6px 14px rgba(0, 0, 0, 0.35);
    }
}

.hero-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.74rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.1s;
}

.hero-content h2 {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 6px;
    text-align: left;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.18s;
}

/* Büyütülmüş ve Sola Yaslı Açıklama Metni (Metin wrap ile asla resme taşmaz) */
.hero-content p {
    font-size: 0.92rem;
    font-weight: 400;
    opacity: 0;
    margin-bottom: 12px;
    line-height: 1.45;
    text-align: left;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transform: translateY(10px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.25s;
}

.hero-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    opacity: 0;
    margin-bottom: 0;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    transform: translateY(10px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.32s;
}

.hero-btns .btn-primary-action,
.hero-btns .btn-secondary-action {
    padding: 7px 15px;
    font-size: 0.82rem;
    border-radius: 6px;
}

.hero-slide.active .hero-subtitle,
.hero-slide.active .hero-content h2,
.hero-slide.active .hero-btns {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide.active .hero-content p {
    opacity: 0.95;
    transform: translateY(0);
}

.btn-primary-action {
    background-color: var(--secondary-color);
    color: #ffffff;
    padding: 11px 22px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.35);
    transition: all 0.2s ease;
}

.btn-primary-action:hover {
    background-color: #b71c1c;
    transform: translateY(-2px);
}

.btn-secondary-action {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--primary-color);
    padding: 11px 22px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-secondary-action:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
}

/* SLIDER İÇERİSİNDE EN ALTTA VE YATAY ORTALANMIŞ AKIŞKAN ÖNİZLEMELİ NAVİGASYON */
.hero-slider-nav {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 250;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    pointer-events: auto !important;
    touch-action: manipulation;
    overflow: visible;
}

.slider-thumb-dot {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: #0f172a;
    position: relative;
    outline: none;
    display: block;
    overflow: hidden;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                border-radius 0.4s ease;
    will-change: transform, border-radius;
}

.slider-thumb-dot:active {
    transform: scale(0.92);
}

.slider-thumb-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    filter: brightness(0.7);
    transition: all 0.35s ease;
    pointer-events: none;
}

.slider-thumb-dot:hover {
    transform: scale(1.12);
    border-color: #ffffff;
}

.slider-thumb-dot:hover img {
    filter: brightness(1);
    transform: scale(1.08);
}

/* Aktif Thumbnail: Sıvı gibi birleşen ve ışıldayan damla */
.slider-thumb-dot.active {
    border-color: #ffffff;
    transform: scale(1.22);
    box-shadow: 0 0 0 3.5px var(--primary-color), 
                0 0 20px rgba(0, 242, 254, 0.65), 
                0 8px 22px rgba(0, 0, 0, 0.55);
}

.slider-thumb-dot.active img {
    filter: brightness(1);
}

/* Akışkan Birleşme (Merging) Sıvı Damlası Animasyonu */
.slider-thumb-dot.fluid-merging {
    animation: liquidMergeBlob 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes liquidMergeBlob {
    0% {
        transform: scale(0.85);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        box-shadow: 0 0 0 1px var(--primary-color), 0 0 10px rgba(0, 242, 254, 0.9);
    }
    32% {
        transform: scale(1.34, 0.86);
        border-radius: 65% 35% 30% 70% / 60% 30% 70% 40%;
    }
    62% {
        transform: scale(0.95, 1.15);
        border-radius: 48% 52% 60% 40% / 42% 58% 42% 58%;
    }
    84% {
        transform: scale(1.24, 0.98);
        border-radius: 52% 48% 48% 52% / 50% 50% 50% 50%;
    }
    100% {
        transform: scale(1.22);
        border-radius: 50%;
        box-shadow: 0 0 0 3.5px var(--primary-color), 0 0 20px rgba(0, 242, 254, 0.65), 0 8px 22px rgba(0, 0, 0, 0.55);
    }
}

/* Akışkan Ayrılma (Separating / Detaching) Sıvı Kopuş Animasyonu */
.slider-thumb-dot.fluid-separating {
    animation: liquidDetachBlob 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes liquidDetachBlob {
    0% {
        transform: scale(1.22);
        border-radius: 50%;
    }
    30% {
        transform: scale(0.88, 1.22);
        border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
    }
    65% {
        transform: scale(1.08, 0.94);
        border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%;
    }
    100% {
        transform: scale(1);
        border-radius: 50%;
    }
}

.slider-thumb-dot.fluid-stretch-right {
    transform-origin: left center;
}

.slider-thumb-dot.fluid-stretch-left {
    transform-origin: right center;
}

/* MOBİL GÖRÜNÜM: AMBİYANS ARKA PLANI KAPAT, SLIDER EKRAN GENİŞLİĞİNDE VE KÖŞELER DÜZ */
@media (max-width: 992px) {
    /* Mobilde ambiyans arka plan katmanını kapat */
    .hero-ambient-layer {
        display: none !important;
    }

    .hero-slider-section {
        height: 260px;
        min-height: 260px;
        max-height: 260px;
        margin: 0 !important; /* Sıfır margin */
        padding: 0 !important;
        width: 100vw !important;
        max-width: 100% !important;
        background: transparent !important;
    }

    /* Slider tam ekran genişliğinde (sağdan soldan sıfır boşluk) */
    .hero-container-box {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100%;
    }

    /* Köşeleri yuvarlatma iptal edildi (tamamen düz kenarlar) */
    .hero-slider-container {
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        height: 100%;
        margin: 0 !important;
    }

    .hero-slide {
        border-radius: 0 !important;
        padding: 0 !important;
        height: 100%;
    }

    .hero-slide-grid {
        grid-template-columns: 1fr;
        height: 100%;
    }

    .hero-content {
        max-width: 100%;
        padding: 14px 16px 42px 46px !important; /* Sol taraftaki tema ve geri butonlarının altında kalmaması için güvenli sol boşluk */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: 100%;
    }

    .hero-subtitle {
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        width: fit-content !important;
        max-width: fit-content !important;
        align-self: flex-start !important;
        font-size: 0.70rem;
        padding: 2px 8px;
        margin-bottom: 5px;
    }

    .hero-content h2 {
        font-size: 1.15rem;
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 0.78rem;
        line-height: 1.35;
        margin-bottom: 8px;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-btns {
        gap: 8px;
        margin-bottom: 0px;
    }

    .hero-btns .btn-primary-action,
    .hero-btns .btn-secondary-action {
        padding: 6px 12px;
        font-size: 0.76rem;
    }

    .hero-slider-nav {
        bottom: 8px;
        gap: 8px;
        padding: 3px 8px;
        z-index: 250;
    }

    .slider-thumb-dot {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        border-width: 1.5px;
    }
}

@media (max-width: 640px) {
    .hero-slider-section {
        height: 250px;
        min-height: 250px;
        max-height: 250px;
    }

    .hero-content {
        padding: 12px 14px 40px 44px !important;
        align-items: flex-start;
    }

    .hero-subtitle {
        font-size: 0.68rem;
        padding: 2px 7px;
        margin-bottom: 4px;
    }

    .hero-content h2 {
        font-size: 1.05rem;
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 0.74rem;
        line-height: 1.3;
        margin-bottom: 6px;
        -webkit-line-clamp: 2;
    }

    .hero-btns {
        gap: 6px;
    }

    .hero-btns .btn-primary-action,
    .hero-btns .btn-secondary-action {
        padding: 5px 10px;
        font-size: 0.74rem;
    }

    .slider-thumb-dot {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
    }

    .hero-slider-nav {
        bottom: 6px;
        gap: 6px;
        padding: 2px 6px;
    }
}

@media (max-width: 420px) {
    .hero-slider-section {
        height: 245px;
        min-height: 245px;
        max-height: 245px;
    }

    .hero-content {
        padding: 10px 12px 38px 42px !important;
        align-items: flex-start;
    }

    .hero-subtitle {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .hero-content h2 {
        font-size: 0.98rem;
    }

    .hero-content p {
        font-size: 0.72rem;
        -webkit-line-clamp: 2;
    }

    .hero-btns .btn-primary-action,
    .hero-btns .btn-secondary-action {
        padding: 5px 10px;
        font-size: 0.72rem;
    }
}

/* --------------------------------------------------------------------------
   9. BİRİMLER & DOKTORLAR STİLLERİ
   -------------------------------------------------------------------------- */
.grid-4-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

/* --------------------------------------------------------------------------
   BİRİMLER KARTI: EN ÜSTTE BİRİM İSMİ, SOLDA HEKİM (140PX), SAĞDA HEMŞİRE (140PX)
   -------------------------------------------------------------------------- */
.slider-wrapper-rel {
    position: relative;
    width: 100%;
    overflow: hidden; /* Dairesel kaydırmada kartların dışarı taşmasını gizler */
    border-radius: 14px;
    padding: 14px 6px; /* Kartların hover/focus durumunda yukarı kalkma ve gölge payı */
    margin: -14px -6px; /* Dış yerleşim boşluğunu korur */
}

.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    color: var(--primary-color);
    font-size: 0.95rem;
    display: none; /* Mobilde flex */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 25;
    opacity: 0; /* Başlangıçta şeffaf / görünmez */
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.2s ease, background 0.2s ease;
    padding: 0;
    outline: none;
}

/* Ekrana / Slider'a dokunulduğunda görünen durum */
.slider-wrapper-rel.show-controls .slider-nav-btn,
.slider-nav-btn.show-active {
    opacity: 0.85;
    pointer-events: auto;
}

.slider-nav-btn:hover, .slider-nav-btn:active {
    background: rgba(255, 255, 255, 0.75);
    color: var(--primary-color);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%) scale(1.05);
}

.slider-nav-btn.prev-btn {
    left: 4px;
}

.slider-nav-btn.next-btn {
    right: 4px;
}

.units-section {
    padding: 2rem 0;
    background-color: var(--pastel-bg);
}

.units-grid-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .slider-nav-btn {
        display: flex;
    }

    .slider-nav-btn.prev-btn {
        left: 4px;
    }

    .slider-nav-btn.next-btn {
        right: 4px;
    }

    .units-grid-duo {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0;
        padding: 0;
        margin: 0;
        overflow: visible;
        will-change: transform;
    }

    .units-grid-duo .unit-box {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-right: 14px !important;
        margin-bottom: 0;
    }
}

.unit-box, .doctor-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 14px;
    padding: 10px 12px 8px;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, #e2e8f0);
    border-top: 3.5px solid var(--primary-color);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Birimlerimiz Slider: Dikey yukarı zıplamayı engelle, sadece yatay eksende çalışsın */
#units-slider .unit-box,
#units-slider .unit-box:hover,
#units-slider .unit-box:focus,
#units-slider .unit-box:focus-within,
#units-slider .unit-box:active {
    transform: none !important;
}

/* 1. Kartın En Üstü: Birim İsmi */
.unit-card-top-bar {
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 15%, #f1f5f9);
}

.unit-top-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary-color);
    background: var(--pastel-bg);
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* 2. Yan Yana Sol (Hekim) ve Sağ (Hemşire) */
.unit-duo-staff-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    gap: 8px;
    margin-bottom: 6px;
    position: relative;
}

.duo-staff-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

a.staff-doctor-col {
    cursor: pointer;
    transition: transform 0.2s ease;
}

a.staff-doctor-col:hover .duo-staff-name {
    color: var(--primary-color);
}

a.staff-doctor-col:hover .duo-avatar-wrapper {
    transform: scale(1.05);
    border-color: var(--primary-hover);
}

/* Kompakt Yuvarlak Thumbnail Fotoğraf (80px - 50px daha kompakt) */
.duo-avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 4px;
    border: 2.5px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 130, 138, 0.14);
    background: var(--pastel-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.staff-nurse-col .duo-avatar-wrapper {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.14);
}

.unit-box:hover .duo-avatar-wrapper {
    transform: scale(1.03);
}

.duo-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.duo-staff-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Fotoğraf Altı Ünvan */
.duo-role-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.25px;
}

.badge-dr {
    background: var(--pastel-bg);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.badge-nurse {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

/* Fotoğraf Altı Ad Soyad */
.duo-staff-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    margin: 2px 0 0 0;
    line-height: 1.25;
}

/* Ortadaki İnce Dikey Ayraç */
.duo-divider-line {
    width: 1px;
    align-self: stretch;
    background: color-mix(in srgb, var(--primary-color) 15%, #e2e8f0);
    margin: 6px 0;
}

/* 3. Kartın Altı: Detay Butonu */
.unit-footer.duo-footer {
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 15%, #f1f5f9);
    padding-top: 10px;
    margin-top: auto;
}

.unit-footer.duo-footer .unit-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.unit-footer.duo-footer .unit-link:hover {
    text-decoration: underline;
    transform: translateX(2px);
}

/* Mobilde ve Küçük Ekranlarda Fotoğraf ve Metin Boyutlarının Dengelenmesi */
@media (max-width: 600px) {
    .unit-box {
        padding: 10px 12px 8px;
    }

    .unit-top-title {
        font-size: 0.76rem;
        padding: 2px 10px;
    }

    .duo-avatar-wrapper {
        width: 80px;
        height: 80px;
        border-width: 2.5px;
        margin-bottom: 4px;
    }

    .duo-staff-name {
        font-size: 0.88rem;
    }

    .duo-role-badge {
        font-size: 0.68rem;
        padding: 2px 6px;
    }
}

@media (max-width: 380px) {
    .duo-avatar-wrapper {
        width: 72px;
        height: 72px;
    }

    .duo-staff-name {
        font-size: 0.85rem;
    }
}

/* Detay Sayfası Tasarımları (Birim & Doktor Detay) */
.detail-layout-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    padding: 35px;
    margin-bottom: 30px;
}

.profile-header-flex {
    display: flex;
    gap: 30px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.profile-avatar-large {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--primary-color);
    flex-shrink: 0;
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.info-table th, .info-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.info-table th {
    background-color: var(--pastel-bg);
    width: 30%;
    font-weight: 600;
    color: #334155;
}

/* --------------------------------------------------------------------------
   10. HİZMETLER STİLLERİ (WEBDE 3 SÜTUN GRID, MOBİLDE TEK SATIR SLIDER)
   -------------------------------------------------------------------------- */
.services-section {
    background-color: var(--pastel-bg);
}

.grid-3-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

@media (max-width: 768px) {
    .services-section .grid-3-cols {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0;
        padding: 0;
        margin: 0;
        overflow: visible;
        will-change: transform;
    }

    .services-section .grid-3-cols .service-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
        padding: 24px 38px 22px; /* Yanlardan butonların çakışmaması için ferah boşluk */
    }
}

.service-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Tam genişlik */
    text-align: left;
    gap: 8px;
}

.service-card:hover,
.service-card:focus,
.service-card:focus-within {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 130, 138, 0.08);
    outline: none;
}

.service-card-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.srv-icon {
    font-size: 1.15rem;
    color: var(--primary-color);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-card h3 {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.service-card p {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
    width: 100%; /* Cardın en başından en sonuna kadar kullanılır */
}

/* --------------------------------------------------------------------------
   11. AYRI BÖLÜMLER: ÇALIŞMA SAATLERİ, NÖBETÇİ ECZANELER VE 112 ACİL ÇAĞRI
   -------------------------------------------------------------------------- */
.working-hours-section {
    padding: 2rem 0;
    background-color: var(--warm-pastel-bg);
}

.working-hours-card-wrap {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 0;
    background: #ffffff;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, #e2e8f0);
    border-radius: 14px;
    box-shadow: none !important; /* Gölge efekti kaldırıldı (Aydınlık & Karanlık) */
    overflow: hidden;
}

.working-hours-main-col {
    padding: 22px 5px !important; /* Sağ ve sol padding 5px'e düşürüldü */
    overflow-x: auto; /* Yatayda fixleme */
    -webkit-overflow-scrolling: touch;
}

.working-hours-list-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.schedule-list-standalone {
    width: 100%;
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-shadow: none !important; /* Gölge efekti kaldırıldı */
}

.schedule-list-standalone li {
    padding: 10px 5px !important; /* Sağ ve sol padding 5px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: none !important;
}

.schedule-list-standalone .day {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    text-align: left;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.schedule-list-standalone .day i {
    color: var(--primary-color);
    width: 15px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.schedule-list-standalone .time {
    font-size: 0.85rem;
    text-align: right !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    white-space: normal;
}

.schedule-list-standalone .time .time-val {
    display: block;
    font-weight: 700;
    white-space: nowrap;
}

/* Parantez içi açıklama yerine şık alt satır etiketi (Badge / Chip) */
.schedule-list-standalone .time .schedule-badge-note {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(0, 130, 138, 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(0, 130, 138, 0.25);
    white-space: nowrap;
    text-align: right;
    box-shadow: none !important;
}

.status-closed {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    white-space: nowrap;
}

.working-hours-side-col {
    background: var(--pastel-bg);
    padding: 22px 24px;
    border-left: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.muayene-title {
    color: var(--primary-color);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.muayene-desc {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.working-hours-note-box,
.tahlil-info-box {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.84rem;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.working-hours-note-box i,
.tahlil-info-box i {
    color: var(--primary-color);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Koyu Tema: Haftalık Hizmet Çizelgesi, Kartlar ve Etiketler */
body.dark-mode .working-hours-card-wrap {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .working-hours-main-col {
    background: #1e293b !important;
}

body.dark-mode .working-hours-side-col {
    background: #162032 !important;
    border-left-color: #334155 !important;
}

body.dark-mode .working-hours-list-title {
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .schedule-list-standalone li {
    border-bottom-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .schedule-list-standalone .day {
    color: #cbd5e1 !important;
}

body.dark-mode .schedule-list-standalone .time-val {
    color: #f8fafc !important;
}

body.dark-mode .schedule-list-standalone .time .schedule-badge-note {
    background: rgba(56, 189, 248, 0.20) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.40) !important;
    box-shadow: none !important;
}

body.dark-mode .status-closed {
    background: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
}

body.dark-mode .working-hours-note-box {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .muayene-title {
    color: var(--primary-color) !important;
}

body.dark-mode .muayene-desc {
    color: #cbd5e1 !important;
}

.duty-pharmacy-section {
    padding: 2rem 0;
    background-color: var(--warm-pastel-bg);
}

.duty-pharmacy-standalone-wrap {
    width: 100%;
    margin: 0 auto;
}

/* NÖBETÇİ ECZANELER: MASAÜSTÜNDE AYRI AYRI 3 KART (GRID) */
@media (min-width: 769px) {
    .duty-pharmacy-card.standalone-pharmacy-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* Masaüstünde 1-2-3 header çubuğu gizlenir, kartlar zaten yan yana görünür */
    .duty-pharmacy-card.standalone-pharmacy-card .pharma-card-header {
        display: none !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slider-viewport {
        overflow: visible !important;
        background: transparent !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slider-track {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Her bir eczane bağımsız beyaz bir kart olarak gösterilir */
    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-item {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        border: 1.5px solid color-mix(in srgb, var(--primary-color) 25%, #e2e8f0) !important;
        border-top: 3.5px solid var(--primary-color) !important;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04) !important;
        padding: 16px 18px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 12px !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-item:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(0, 130, 138, 0.10) !important;
        border-color: var(--primary-color) !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-title {
        color: #1e293b !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 2px 0 0 0 !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-hours {
        background: color-mix(in srgb, var(--primary-color) 12%, #ffffff) !important;
        color: var(--primary-color) !important;
        border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
        font-size: 0.76rem !important;
        padding: 2px 8px !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-info-line {
        color: #475569 !important;
        font-size: 0.80rem !important;
        gap: 7px !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-info-line i {
        color: var(--primary-color) !important;
        font-size: 0.85rem !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-phone {
        color: var(--primary-color) !important;
        font-weight: 700 !important;
        font-size: 0.92rem !important;
    }

    .duty-pharmacy-card.standalone-pharmacy-card .btn-pharma-map {
        background: var(--primary-color) !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 130, 138, 0.2) !important;
        justify-content: center !important;
        width: 100% !important;
        font-size: 0.80rem !important;
        padding: 7px 12px !important;
    }
}

/* NÖBETÇİ ECZANELER: MOBİLDE (768px ve altı) AYNI SLIDER YAPISI */
@media (max-width: 768px) {
    .duty-pharmacy-card.standalone-pharmacy-card {
        background-color: var(--primary-color);
        border: 2px solid var(--primary-hover);
        border-radius: 14px;
        overflow: hidden;
    }
}

.emergency-call-section {
    padding: 2rem 0;
    background-color: #ffffff;
}

.emergency-standalone-wrap {
    width: 100%;
    margin: 0 auto;
}

.emergency-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
    width: 100%;
}

.wide-emergency-card {
    border-radius: 16px;
    overflow: hidden;
}

.emergency-call-btn-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: #b71c1c;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-left: auto;
    max-width: 200px;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
}

.emergency-call-btn-large:hover {
    background: #fee2e2;
    color: #991b1b;
    transform: scale(1.04);
}

/* 2. KART: TEMEL İLK YARDIM KARTI STİLLERİ */
.first-aid-standalone-card {
    background-color: #047857; /* Medikal zümrüt yeşili */
    color: #ffffff;
    border: 2px solid #065f46;
    box-shadow: 0 8px 24px rgba(4, 120, 87, 0.22);
}

.first-aid-header-row {
    background-color: #065f46;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.first-aid-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #ffffff;
    flex-shrink: 0;
}

.first-aid-badge-text {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #a7f3d0;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.first-aid-header-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

.first-aid-btn-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    color: #065f46;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.80rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-left: auto;
    max-width: 180px;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
}

.first-aid-btn-large:hover {
    background: #d1fae5;
    color: #064e3b;
    transform: scale(1.04);
}

.first-aid-card-body {
    padding: 22px 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #047857;
}

.first-aid-card-body .instruction-heading {
    color: #d1fae5;
}

.first-aid-steps-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #ecfdf5;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.first-aid-steps-list li strong {
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 900px) {
    .working-hours-card-wrap {
        grid-template-columns: 1fr;
    }
    .working-hours-main-col {
        padding: 24px 20px;
    }
    .working-hours-side-col {
        padding: 24px 20px;
        border-left: none;
        border-top: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
    }
    .emergency-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .emergency-header-row,
    .first-aid-header-row {
        flex-wrap: wrap;
    }
    .emergency-call-btn-large,
    .first-aid-btn-large {
        margin-left: 0;
        max-width: none;
        width: 100%;
        justify-content: center;
    }
}

.hours-quick-section {
    padding: 2rem 0;
}

.hours-layout-grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 1.45fr);
    gap: 20px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.hours-layout-grid-3 > .info-block {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.info-block {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.block-header {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.block-header i {
    font-size: 1.3rem;
}

.block-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

.block-body {
    padding: 20px 22px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
}

.schedule-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
}

.schedule-list li:last-child {
    border-bottom: none;
}

.schedule-list .day {
    font-weight: 600;
    color: #334155;
    font-size: 0.92rem;
}

.schedule-list .time {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.92rem;
}

.schedule-list .status-closed {
    color: #b71c1c;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   2. BAĞIMSIZ NÖBETÇİ ECZANE KARTI (SABİT YÜKSEKLİKLİ & 1-2-3 NUMARALI SLIDER)
   -------------------------------------------------------------------------- */
.duty-pharmacy-card {
    background-color: var(--primary-color); /* Kartın tamamı tema rengi */
    color: #ffffff;
    border: 2px solid var(--primary-hover);
    box-shadow: 0 8px 24px rgba(0, 130, 138, 0.22);
    display: flex;
    flex-direction: column;
}

.pharma-card-header {
    background-color: rgba(0, 0, 0, 0.12); /* Hafif koyu üst ton */
    color: #ffffff;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.pharma-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pharma-header-left i {
    font-size: 1.5rem;
    color: #ffffff;
}

.pharma-badge-pill {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

.pharma-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Taşıyıcı Kart Başlığındaki 1 - 2 - 3 Küçük Yuvarlak Numaralar */
.pharma-header-nav-nums {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pharma-num-nav-btn {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
    user-select: none;
}

.pharma-num-nav-btn:hover {
    background: rgba(255, 255, 255, 0.45);
    transform: scale(1.1);
}

.pharma-num-nav-btn.active {
    background: #ffffff;
    color: var(--primary-color);
    border-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.14);
}

/* Sabit Yükseklikli Slider Viewport & Track */
.pharma-slider-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    background-color: var(--primary-color);
    touch-action: pan-y pinch-zoom;
    user-select: none;
    box-sizing: border-box;
}

.pharma-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* İç Kutu Kartı Olmayan Saf Slider Öğesi */
.pharma-slide-item {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.pharma-slide-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.pharma-slide-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.2px;
}

.pharma-slide-badge.badge-blue { background: rgba(56, 189, 248, 0.28); border: 1px solid rgba(56, 189, 248, 0.55); color: #ffffff; }
.pharma-slide-badge.badge-amber { background: rgba(251, 191, 36, 0.28); border: 1px solid rgba(251, 191, 36, 0.55); color: #ffffff; }
.pharma-slide-badge.badge-emerald { background: rgba(52, 211, 153, 0.28); border: 1px solid rgba(52, 211, 153, 0.55); color: #ffffff; }

.pharma-slide-hours {
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pharma-slide-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pharma-slide-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pharma-slide-info-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.45;
}

.pharma-slide-info-line i {
    font-size: 0.95rem;
    color: #ffffff;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.pharma-slide-phone {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s;
    letter-spacing: 0.3px;
}

.pharma-slide-phone:hover {
    text-decoration: underline;
    opacity: 0.9;
}

.pharma-slide-footer {
    margin-top: auto;
    padding-top: 4px;
}

.duty-pharmacy-card .btn-pharma-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #ffffff;
    color: var(--primary-color);
    padding: 11px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, transform 0.2s;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.duty-pharmacy-card .btn-pharma-map:hover {
    background-color: #f8fafc;
    color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* --------------------------------------------------------------------------
   RESPONSIVE DÜZEN KORUYUCU (GENİŞ VE DAR EKRAN KAYMALARINI ENGELLEME)
   -------------------------------------------------------------------------- */
@media (max-width: 1140px) and (min-width: 769px) {
    .hours-layout-grid-3 {
        grid-template-columns: 1fr 1.35fr;
        gap: 20px;
    }

    .hours-layout-grid-3 .duty-pharmacy-card {
        grid-column: 1 / -1;
        order: 2;
    }

    .hours-layout-grid-3 .hours-block {
        order: 1;
    }

    .hours-layout-grid-3 .emergency-standalone-card {
        order: 3;
    }
}

@media (max-width: 768px) {
    .hours-quick-section {
        padding: 2.2rem 0;
    }

    .hours-layout-grid-3 {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hours-layout-grid-3 .duty-pharmacy-card {
        grid-column: auto;
        order: 0;
    }

    .pharma-card-header {
        padding: 12px 16px;
    }

    .pharma-card-body.pharma-rows-list {
        padding: 8px 12px;
    }
}

@media (max-width: 540px) {
    .pharma-card-body.pharma-rows-list {
        padding: 6px 10px;
    }

    .pharma-row-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 10px 12px 12px;
    }

    .pharma-row-action {
        width: 100%;
    }

    .pharma-map-btn {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
    }
}

/* --------------------------------------------------------------------------
   3. BAĞIMSIZ 112 ACİL ÇAĞRI KARTI (TEK RENK KIRMIZI + TALİMAT LİSTESİ)
   -------------------------------------------------------------------------- */
.emergency-standalone-card {
    background-color: #b71c1c; /* Tek renk kırmızı zemin */
    color: #ffffff;
    border: 2px solid #991b1b;
    box-shadow: 0 8px 24px rgba(183, 28, 28, 0.22);
}

.emergency-header-row {
    background-color: #991b1b; /* Daha koyu kırmızı üst şerit */
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.emergency-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #ffffff;
    flex-shrink: 0;
}

.emergency-badge-text {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fecaca;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.emergency-phone-number {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

.emergency-card-body {
    padding: 14px 18px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #b71c1c;
}

.instruction-heading {
    font-size: 0.86rem;
    font-weight: 700;
    color: #fee2e2;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.emergency-steps-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #fef2f2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emergency-steps-list li strong {
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 991px) {
    .hours-layout-grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --------------------------------------------------------------------------
   12. HABERLER, DUYURULAR VE MAKALELER (CARD TASARIMI)
   -------------------------------------------------------------------------- */
.category-filter-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 35px;
}

.cat-btn {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.88rem;
    color: #475569;
    font-weight: 500;
    transition: all 0.2s;
}

.cat-btn:hover, .cat-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   14. HABERLER & DUYURULAR (CONTAINER KUTUSU + SOL BAŞLIK + SAĞ TAB BUTONLARI)
   -------------------------------------------------------------------------- */
.news-announcements-section {
    padding: 2rem 0;
    background-color: var(--pastel-bg);
}

.news-box-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.news-box-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 2px solid color-mix(in srgb, var(--primary-color) 16%, #f1f5f9) !important;
    position: relative;
    text-align: left;
}

.news-box-head::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

.news-box-title-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    flex: 1;
}

/* Başlığın sağındaki tab buton grubu */
.news-filter-tabs {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    padding: 4px;
    border-radius: 30px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, #cbd5e1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    gap: 4px;
}

.feed-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 25px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.feed-tab-btn i {
    font-size: 0.9rem;
}

.feed-tab-btn:hover {
    color: var(--primary-color);
}

.feed-tab-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 130, 138, 0.25);
}

@media (max-width: 768px) {
    .news-box-container {
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .news-box-head {
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 2px solid color-mix(in srgb, var(--primary-color) 16%, #f1f5f9) !important;
    }

    .feed-tab-btn {
        padding: 6px 12px;
        font-size: 0.76rem;
    }
}

@media (max-width: 480px) {
    .feed-tab-btn {
        padding: 5px 10px;
        font-size: 0.72rem;
        gap: 4px;
    }
}

.feed-card {
    background: #ffffff;
    border-radius: 8px;
    border: 1.5px solid var(--primary-color); /* PC'de tema renginde belirgin çerçeve */
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.feed-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
}

.card-media {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.feed-card:hover .card-media img {
    transform: scale(1.05);
}

.card-category-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

.news-tag { background-color: var(--primary-color); }
.announcement-tag { background-color: var(--secondary-color); }
.article-tag { background-color: #d97706; }

.mobile-cat-badge {
    display: none; /* Sadece mobilde görünür */
}

.card-content-area {
    padding: 14px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-headline {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
    line-height: 1.3;
    transition: color 0.2s;
}

.feed-card:hover .card-headline {
    color: var(--primary-color);
}

.card-excerpt-3lines {
    color: #64748b;
    font-size: 0.80rem;
    line-height: 1.45;
    margin-bottom: 10px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74rem;
    color: #64748b;
    margin-bottom: 10px;
}

.card-meta .meta-date {
    color: #94a3b8; /* Soluk tarih */
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-meta .meta-date i {
    font-size: 0.72rem;
    color: #94a3b8;
}

.card-meta .meta-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-meta .meta-stat i {
    font-size: 0.72rem;
    color: #94a3b8;
}

.card-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.btn-card-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-color);
    padding: 3px 0;
    align-self: flex-start;
    border-bottom: 2px solid transparent;
}

.btn-card-read:hover {
    border-bottom-color: var(--primary-color);
    gap: 10px;
}

/* MOBİL GÖRÜNÜM: DİKEY YAYILAN YATAY KARE RESİMLİ KART DÜZENİ */
@media (max-width: 768px) {
    .news-feed-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .feed-card {
        flex-direction: row;
        height: 118px;
        min-height: 118px;
        max-height: 118px;
        border: 1px solid color-mix(in srgb, var(--primary-color) 30%, #e2e8f0); /* Yumuşatılmış çerçeve rengi */
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 0;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .feed-card:hover {
        transform: translateY(-2px);
        border-color: var(--primary-color);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .card-media {
        width: 118px;
        height: 118px;
        min-width: 118px;
        flex-shrink: 0;
    }

    .card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card-category-tag {
        display: none;
    }

    .card-content-area {
        padding: 10px 14px;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Satır araları açılarak dikey yayılır */
        gap: 3px;
        text-align: left;
    }

    /* 1. Sıra (En Üstte): Tema Rengi ile Etiketli Kategori Adı */
    .mobile-cat-badge {
        display: block;
        font-size: 0.76rem; /* Büyütüldü */
        font-weight: 700;
        color: var(--primary-color);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        line-height: 1.2;
    }

    /* 2. Sıra: Başlık */
    .card-headline {
        font-size: 0.98rem; /* Büyütüldü */
        font-weight: 700;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        margin: 0;
    }

    /* 3. Sıra: Kısa Text */
    .card-excerpt-3lines {
        font-size: 0.82rem; /* Büyütüldü */
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.35;
        margin: 0;
        display: block;
        -webkit-line-clamp: 1;
    }

    /* 4. Sıra (En Altta): Tarih (Soluk), Okunma, Like + Oku Butonu */
    .card-bottom-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        padding-top: 2px;
    }

    .card-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.78rem; /* Büyütüldü */
        line-height: 1;
        margin: 0;
    }

    .card-meta .meta-date {
        color: #94a3b8; /* Soluk renkli tarih */
        font-weight: 400;
    }

    .card-meta .meta-stat {
        color: #64748b;
    }

    /* Oku Butonu */
    .btn-card-read {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--primary-color);
        background: var(--pastel-bg);
        padding: 4px 10px;
        border-radius: 5px;
        border: none;
        line-height: 1.2;
        transition: all 0.2s ease;
    }

    .btn-card-read:hover {
        background: var(--primary-color);
        color: #ffffff;
    }
}

/* Detay Sayfası Metin Bloğu */
.article-detail-content {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.detail-featured-img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 25px;
}

.detail-body-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #334155;
}

/* Arama Formu (Makale Arama) */
.search-form-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 30px;
    border: 1px solid var(--border-color);
    margin-bottom: 35px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.search-input-group {
    display: flex;
    gap: 10px;
}

.search-input-group input {
    flex-grow: 1;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
}

.search-input-group button {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 0 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
}

/* Resimler / Galeri */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
}

/* İletişim Sayfası */
.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
}

.contact-card, .contact-form-card {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 35px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
    font-family: inherit;
}

.form-control:focus {
    border-color: var(--primary-color);
}

.btn-submit-form {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-submit-form:hover {
    background-color: var(--primary-hover);
}

/* --------------------------------------------------------------------------
   12.B HARİTA & KONUM BİLEŞENLERİ (GOOGLE MAPS & ULAŞIM REHBERİ)
   -------------------------------------------------------------------------- */
.map-embed-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    margin-top: 25px;
}

.map-embed-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.map-embed-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.map-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.map-address-text {
    font-size: 0.95rem;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-address-text i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.btn-google-directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #1a73e8; /* Google Maps Mavi */
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
}

.btn-google-directions:hover {
    background-color: #1557b0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
    color: #ffffff;
}

.btn-view-location-detail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-view-location-detail:hover {
    background-color: var(--primary-hover);
    color: #ffffff;
}

.transit-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 25px;
}

.transit-card {
    background: var(--pastel-bg);
    border-radius: 8px;
    padding: 18px;
    border-left: 4px solid var(--primary-color);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.transit-card .transit-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.transit-card .transit-title i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.transit-card .transit-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   13. SAĞLIK MAKALE LİSTESİ BÖLÜMÜ (DOKTOR RESİMLİ VE ZENGİN METADATA'LI KARTLAR)
   -------------------------------------------------------------------------- */
.articles-summary-section {
    padding: 2rem 0;
    background-color: var(--pastel-bg);
}

.articles-list-container {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .articles-list-container {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0;
        padding: 0;
        margin: 0;
        overflow: visible;
        will-change: transform;
    }

    .articles-list-container .article-row-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
        padding: 16px 36px 16px 18px;
    }
}

.article-row-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, #e2e8f0);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.article-row-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* Sol: Dikdörtgen Doktor Profil Thumbnail Resmi */
.art-doctor-avatar {
    width: 105px;
    height: 140px;
    min-width: 105px;
    min-height: 140px;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 130, 138, 0.12);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pastel-bg);
}

.art-doctor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: calc(0.75rem - 2px);
    transition: transform 0.3s ease;
}

.article-row-card:hover .art-doctor-avatar img {
    transform: scale(1.05);
}

/* Sağ: İçerik Alanı */
.art-content-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* 1. Satır: Başlık */
.art-card-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.art-card-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.art-card-title a:hover {
    color: var(--primary-color);
}

/* 2. Satır: Alt Metadata ve Butonlar */
.art-meta-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.art-stats-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.art-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #64748b;
}

.art-meta-item.art-doctor-tag {
    font-weight: 600;
    color: var(--primary-color);
}

.art-meta-item.art-date {
    color: #94a3b8; /* Soluk ve küçük tarih */
    font-size: 0.70rem;
}

.art-meta-item.art-views i,
.art-meta-item.art-likes i {
    color: #94a3b8;
}

.art-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Paylaş Butonu */
.btn-art-share {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-art-share:hover {
    background: var(--pastel-bg);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Detay Butonu */
.btn-art-detail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--primary-color);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-art-detail:hover {
    background: var(--primary-hover);
    transform: translateX(2px);
}

/* Mobilde Uyum */
@media (max-width: 768px) {
    .article-row-card {
        padding: 16px 36px 16px 18px;
        gap: 16px;
        align-items: center;
    }

    .art-doctor-avatar {
        width: 140px;
        height: 200px;
        min-width: 140px;
        min-height: 200px;
    }

    .art-card-title {
        font-size: 0.98rem;
    }

    .art-meta-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .art-action-group {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

/* Karanlık Mod Doktor Makaleleri Kart Uyarlamaları */
body.dark-mode .article-row-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .art-card-title a {
    color: #f1f5f9 !important;
}

body.dark-mode .art-card-title a:hover {
    color: var(--primary-color) !important;
}

body.dark-mode .art-doctor-avatar {
    background: #0f172a !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .btn-art-share {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

body.dark-mode .btn-art-share:hover {
    background: #1e293b !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}


/* --------------------------------------------------------------------------
   13.B SAĞLIK REHBERİ ARAMA SAYFASI (SEARCH HERO, KATEGORİ TABLARI & FEED CARDS)
   -------------------------------------------------------------------------- */
.article-search-hero-box {
    width: 55%;
    max-width: 620px;
    margin: 0 auto 26px;
    position: relative;
}

.article-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 14px;
    padding: 5px 8px 5px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.article-search-input-wrap:focus-within {
    background: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.article-search-input-wrap .search-lead-icon {
    color: var(--primary-color);
    font-size: 1.15rem;
    margin-right: 12px;
    flex-shrink: 0;
}

.article-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none !important;
    font-size: 0.96rem;
    color: #1e293b;
    font-family: inherit;
    padding: 11px 4px;
}

.article-search-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.article-search-clear-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.05rem;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    outline: none;
}

.article-search-clear-btn:hover {
    color: #ef4444;
}

.article-search-submit-btn {
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    box-shadow: 0 3px 8px rgba(0, 130, 138, 0.25);
}

.article-search-submit-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.04);
}

.article-tabs-container {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
    width: 100%;
}

.article-filter-tabs {
    display: inline-flex;
    align-items: center;
    background: var(--pastel-bg);
    padding: 5px;
    border-radius: 30px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.article-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
    outline: none;
}

.article-tab-btn i {
    font-size: 0.92rem;
}

.article-tab-btn:hover {
    color: var(--primary-color);
}

.article-tab-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 130, 138, 0.25);
}

.active-query-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--primary-color) 10%, #ffffff);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
}

.active-query-pill button {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    display: flex;
    align-items: center;
}

.articles-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
    width: 100%;
}

.article-feed-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 18%, #e2e8f0);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.article-feed-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 130, 138, 0.12);
    border-color: var(--primary-color);
}

.article-feed-card .card-media {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #f1f5f9;
}

.article-feed-card .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.article-feed-card:hover .card-media img {
    transform: scale(1.06);
}

.article-feed-card .card-category-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.article-feed-card .card-content-area {
    padding: 22px 20px 18px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.article-feed-card .card-headline {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.article-feed-card:hover .card-headline {
    color: var(--primary-color);
}

.article-feed-card .card-excerpt-3lines {
    color: #64748b;
    font-size: 0.89rem;
    line-height: 1.55;
    margin: 0 0 16px 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-feed-card .card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 14px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.article-feed-card .meta-author {
    color: var(--primary-color);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.article-feed-card .meta-date {
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.article-feed-card .meta-views {
    margin-left: auto;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.article-feed-card .card-footer-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.88rem;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    transition: color 0.2s ease;
}

.article-feed-card:hover .card-footer-action i {
    transform: translateX(4px);
    transition: transform 0.2s ease;
}

@media (max-width: 768px) {
    .article-search-hero-box {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .article-tabs-container {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .article-tabs-container::-webkit-scrollbar {
        display: none;
    }

    .article-filter-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .article-tab-btn {
        padding: 7px 14px;
        font-size: 0.82rem;
    }

    .articles-cards-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .article-feed-card .card-media {
        height: 180px;
    }
}

/* --------------------------------------------------------------------------
   14. KOYU GENİŞ FOOTER
   -------------------------------------------------------------------------- */
.dark-wide-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding-top: 60px;
    font-size: 0.9rem;
    border-top: 3px solid var(--primary-color);
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 50px;
}

.brand-col .footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.brand-col .footer-brand:hover {
    opacity: 0.92;
}

.brand-col .footer-brand * {
    cursor: pointer !important;
}

.footer-logo-box,
.round-emblem-small {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}

.footer-logo-img,
.round-emblem-small img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

.brand-text-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.brand-text-footer .f-top {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff; /* Beyaz ve bold */
    letter-spacing: 0.2px;
    text-transform: uppercase;
    line-height: 1.25;
    text-align: center;
    transition: color 0.2s ease;
}

.brand-text-footer .f-bot {
    display: block;
    font-size: 0.95rem;
    font-weight: 700; /* İkinci satır da bold */
    color: #ffffff; /* İkinci satır da beyaz */
    letter-spacing: -0.2px;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.footer-about-text {
    line-height: 1.6;
    margin-bottom: 14px;
    color: #94a3b8;
}

/* Kurumsal Künye Kartı (Desktop & Shared) */
.footer-kunye-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kunye-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.84rem;
    color: #cbd5e1;
    line-height: 1.4;
}

.kunye-item i {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.kunye-label {
    font-weight: 600;
    color: #e2e8f0;
    margin-right: 4px;
}

.kunye-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
}

.kunye-badge.badge-gov {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}

.footer-social-links {
    display: flex;
    gap: 10px;
}

.footer-social-links a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.2s;
}

.footer-social-links a:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.footer-heading {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-links-list li {
    margin-bottom: 10px;
}

.footer-links-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
}

.footer-links-list li a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.footer-links-list li a i {
    font-size: 0.75rem;
    color: var(--primary-color);
}

.contact-info-list p {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    line-height: 1.5;
    color: #cbd5e1;
}

.contact-info-list i {
    color: var(--primary-color);
    margin-top: 4px;
    font-size: 1rem;
}

.footer-bottom-bar {
    background-color: var(--footer-bottom);
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    color: #64748b;
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom-links a {
    color: #94a3b8;
    margin: 0 6px;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   15. AÇILIŞ DUYURU POPUP'I
   -------------------------------------------------------------------------- */
.news-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.news-popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

.news-popup-box {
    background: #ffffff;
    width: 90%;
    max-width: 520px;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-popup-overlay.show .news-popup-box {
    transform: scale(1);
}

.close-news-popup {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #94a3b8;
    line-height: 1;
}

.close-news-popup:hover { color: #000; }

.popup-badge {
    display: inline-block;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.popup-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
}

.popup-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 14px;
}

.popup-desc {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.popup-close-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   16. MOBİL YÜZEN BUTON (FAB) & BLUR EKRAN
   -------------------------------------------------------------------------- */
.mobile-fab {
    display: none;
    position: fixed;
    bottom: 65px;
    right: 20px;
    width: 48px;
    height: 48px;
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 6px 18px rgba(0, 130, 138, 0.4);
    z-index: 950;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mobile-fab:active {
    transform: scale(0.9);
}

/* Bottom Bar İçindeki Hızlı Başlat Butonu */
.btn-quick-launch {
    color: #38bdf8 !important; /* Canlı mavi/turkuaz hızlı başlat vurgusu */
    position: relative;
}

.btn-quick-launch:hover,
.btn-quick-launch:active {
    color: var(--primary-color) !important;
    transform: scale(1.1);
}

/* HIZLI BAŞLAT BALONCUK POPUP (BOTTOM BAR ÜSTÜNDE AÇILAN KÜÇÜK KARTLAR BALONU) */
/* HIZLI İŞLEM BUTON ÜSTÜ BEYAZ BALONCUK POPUP (CLEAN WHITE BUBBLE WITH POINTER ARROW) */
.fab-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 66px; /* 50px bottom barın hemen üstünde boşluklu dursun */
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.fab-popup.active,
.fab-popup.open {
    opacity: 1;
    visibility: visible;
}

.clean-bubble-card {
    background: #ffffff !important;
    width: 360px;
    max-width: calc(100vw - 24px);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
    transform: translateY(14px) scale(0.96);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, left 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    position: absolute;
    bottom: 66px;
    left: 12px;
    box-sizing: border-box;
}

body.dark-mode .clean-bubble-card {
    background: #1e293b !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.fab-popup.active .clean-bubble-card,
.fab-popup.open .clean-bubble-card {
    transform: translateY(0) scale(1);
}

/* Butonun Üstünü Gösteren Aşağı Yönlü Ok (Pointer Arrow) */
.bubble-pointer-arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #ffffff;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.08));
    pointer-events: none;
    transition: left 0.15s ease;
}

body.dark-mode .bubble-pointer-arrow {
    border-top-color: #1e293b;
}

/* Kapatma Butonu (Sağ Üst Köşe) */
.bubble-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bubble-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

body.dark-mode .bubble-close-btn {
    background: #334155;
    color: #94a3b8;
}

body.dark-mode .bubble-close-btn:hover {
    background: #475569;
    color: #ffffff;
}

/* Baloncuk İçi İçerik Düzeni: Başlık - Çizgi - Açıklama - Çizgi - Buton */
.bubble-body-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.bubble-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 28px; /* Kapatma butonuna pay */
}

.bubble-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bubble-title-group i {
    font-size: 1.05rem;
    color: var(--primary-color);
}

.bubble-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}

body.dark-mode .bubble-title {
    color: #f8fafc;
}

/* İnce Ayırıcı Çizgiler */
.bubble-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 11px 0;
    width: 100%;
}

body.dark-mode .bubble-divider {
    background: #334155;
}

.bubble-desc-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.bubble-heading {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.3;
}

.bubble-desc {
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
    margin: 0;
}

body.dark-mode .bubble-desc {
    color: #cbd5e1;
}

/* Alt Buton Kutusu */
.bubble-action-box {
    display: flex;
    justify-content: stretch;
    width: 100%;
}

.bubble-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 130, 138, 0.25);
    transition: background 0.2s ease, transform 0.15s ease;
}

.bubble-action-btn:hover {
    background: var(--primary-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.bubble-action-btn:active {
    transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   16.B TAM EKRANA YAYILAN GOOGLE HARİTA MODALI (FULLSCREEN MAP MODAL)
   -------------------------------------------------------------------------- */
.fullscreen-map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: 10005;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.fullscreen-map-overlay.active {
    opacity: 1;
    visibility: visible;
}

.fullscreen-map-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    background: #ffffff;
    border-radius: 0 !important; /* Ekranı tamamen kapatır */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
    transform: translateY(0) scale(1);
    transition: none;
}

body.dark-mode .fullscreen-map-box {
    background: #1e293b;
    box-shadow: none !important;
}

.fullscreen-map-overlay.active .fullscreen-map-box {
    transform: translateY(0) scale(1);
}

.fullscreen-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    height: 52px;
    box-sizing: border-box;
    background: var(--primary-color);
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.fullscreen-map-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.fullscreen-map-title i {
    font-size: 1.15rem;
}

.fullscreen-map-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-map-external {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.btn-map-external:hover {
    background: #ffffff;
    color: var(--primary-color);
}

.close-fullscreen-map {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-fullscreen-map:hover {
    background: #ffffff;
    color: var(--primary-color);
}

.fullscreen-map-frame-wrap {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    background: #e2e8f0;
}

.fullscreen-map-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

@media (max-width: 767px) {
    .fullscreen-map-box {
        height: 92vh;
        border-radius: 14px;
    }
    .fullscreen-map-title {
        font-size: 0.9rem;
    }
    .btn-map-external {
        font-size: 0.74rem;
        padding: 4px 9px;
    }
}

/* --------------------------------------------------------------------------
   17. MOBİL TAM EKRAN MENÜ (TARAYICI SCROLLBARI TAMAMEN İPTAL, SANAL SCROLLBAR GEÇERLİ)
   -------------------------------------------------------------------------- */
.mobile-menu-fullscreen {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto; /* Tüm menü tek akışta kaydırılır */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important; /* Tarayıcı scrollbarını tamamen gizle */
    -ms-overflow-style: none !important;
}

.mobile-menu-fullscreen::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.mobile-submenu {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.mobile-submenu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.mobile-menu-fullscreen.open,
.mobile-menu-fullscreen.active {
    transform: translateX(100vw);
}

.menu-backdrop.open,
.menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    min-height: 72px;
    height: 72px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}

.brand-box-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer !important;
    text-decoration: none !important;
    user-select: none;
    transition: opacity 0.2s ease;
}

.brand-box-mobile:hover {
    opacity: 0.92;
}

.brand-box-mobile * {
    cursor: pointer !important;
}

.round-logo {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}

.round-logo img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
}

.brand-text-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.brand-text-mobile .ministry-title {
    font-size: 0.88rem; /* Üstteki ve alttaki satır fontları aynı büyüklükte */
    font-weight: 700; /* Üstteki kalın */
    color: var(--primary-color); /* Üstteki tema renginde */
    letter-spacing: 0.2px;
    text-transform: uppercase;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.brand-text-mobile .asm-title {
    font-size: 0.88rem; /* Üstteki ve alttaki satır fontları aynı büyüklükte */
    font-weight: 400; /* Alttaki normal fontta */
    color: #1e293b; /* Alttaki yazı renginde */
    letter-spacing: -0.3px; /* Harf aralığı sıkılaştırıldı */
    word-spacing: -0.5px; /* Kelime aralığı azaltıldı */
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
}

.mobile-search-box {
    flex-shrink: 0;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 10;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper input {
    width: 100%;
    padding: 13px 44px 13px 18px;
    background-color: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    outline: none !important;
    font-size: 0.95rem;
    color: #1e293b;
    font-family: inherit;
    transition: all 0.2s ease;
}

.search-input-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.search-input-wrapper input:focus {
    background-color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--pastel-bg);
}

.search-input-wrapper .mobile-search-clear-btn {
    position: absolute;
    right: 42px;
    background: transparent;
    border: none;
    outline: none !important;
    color: #94a3b8;
    font-size: 1rem;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search-input-wrapper .mobile-search-clear-btn:hover {
    color: #ef4444;
}

.search-input-wrapper button {
    position: absolute;
    right: 14px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--primary-color);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 0;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.search-input-wrapper button:focus,
.search-input-wrapper button:focus-visible,
.search-input-wrapper button:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.search-input-wrapper button:hover {
    color: var(--primary-hover);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mobil Menüde Arama Aktif Olduğunda: Sayfanın/Menünün Scrollbar'ını Kesinlikle Kilitle */
.mobile-menu-fullscreen.search-active {
    overflow: hidden !important;
}

.mobile-menu-fullscreen.search-active .mobile-search-box {
    box-shadow: 0 4px 18px rgba(0, 130, 138, 0.14);
    border-bottom: none;
    z-index: 100;
}

/* Alt Menüyü ve Footer'ı Gizle (Sayfa scrollbarını tamamen önler) */
.mobile-menu-fullscreen.search-active .mobile-nav-list,
.mobile-menu-fullscreen.search-active .mobile-menu-footer {
    display: none !important;
}

/* Mobil Arama Sonuç Kutusu (Arama çubuğunun hemen altında açılan tam kapsayıcı card) */
.mobile-menu-search-results {
    margin-top: 12px;
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, #e2e8f0);
    border-bottom: 4.5px solid var(--primary-color);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    padding: 14px 8px 16px 14px;
    height: calc(100vh - 175px);
    max-height: calc(100vh - 175px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
}

/* Mobil Menü Arama Sonuç Kartları Tema Uyumu (Koyu Menü ve Koyu Mod) */
.mobile-menu-fullscreen .mobile-menu-search-results,
body.dark-mode .mobile-menu-search-results {
    background: #0f172a !important;
    border-color: #334155 !important;
    border-bottom: 4.5px solid var(--primary-color) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55) !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-result-card,
body.dark-mode .mobile-menu-search-results .search-result-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-result-card:hover,
body.dark-mode .mobile-menu-search-results .search-result-card:hover {
    background: #273549 !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 6px 18px rgba(0, 130, 138, 0.25) !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-card-thumb,
body.dark-mode .mobile-menu-search-results .search-card-thumb {
    background: #0f172a !important;
    border-color: var(--primary-color) !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-card-badge,
body.dark-mode .mobile-menu-search-results .search-card-badge {
    background: rgba(0, 130, 138, 0.25) !important;
    color: #38bdf8 !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-card-title,
body.dark-mode .mobile-menu-search-results .search-card-title {
    color: #f8fafc !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-card-desc,
body.dark-mode .mobile-menu-search-results .search-card-desc {
    color: #94a3b8 !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-card-arrow,
body.dark-mode .mobile-menu-search-results .search-card-arrow {
    color: #64748b !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-empty-state,
body.dark-mode .mobile-menu-search-results .search-empty-state {
    color: #94a3b8 !important;
}

.mobile-menu-fullscreen .mobile-menu-search-results .search-empty-state p,
body.dark-mode .mobile-menu-search-results .search-empty-state p {
    color: #cbd5e1 !important;
}

/* Scrollbar sadece result kutusu içinde ve boyu kutudan daha küçük olarak açılır */
.mobile-menu-search-results::-webkit-scrollbar {
    width: 5px;
}

.mobile-menu-search-results::-webkit-scrollbar-track {
    background: transparent;
    margin: 24px 0; /* Boyu result kutusundan belirgin biçimde daha küçüktür, köşelerden taşmaz */
    border-radius: 6px;
}

.mobile-menu-search-results::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 6px;
}

.mobile-nav-list {
    flex: 1 0 auto;
    overflow: visible;
    padding: 10px 0;
}

.mobile-nav-list ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
}

.mobile-nav-list ul li a:hover {
    background-color: var(--pastel-bg);
}

.menu-item-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
}

.m-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.m-title i {
    width: 20px;
    color: var(--primary-color);
    font-size: 1rem;
    text-align: center;
}

.m-desc {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 400;
    line-height: 1.3;
    padding-left: 30px; /* İkonun altını boş bırakarak hizalar */
}

.mobile-nav-list .arrow {
    color: #94a3b8;
    font-size: 0.85rem;
    transition: transform 0.25s ease, color 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
}

/* Alt menü: Düz hatlar, ana temanın daha açık soft light zemin tonu, 5rem sol girinti */
.mobile-submenu {
    display: none;
    background-color: color-mix(in srgb, var(--pastel-bg) 50%, #ffffff); /* Daha açık ve ferah soft light ton */
    padding: 2px 0;
    margin: 0;
    border: none;
    border-radius: 0; /* Tamamen düz hatlar */
    box-shadow: none;
}

.mobile-dropdown.open > .mobile-submenu {
    display: block;
    animation: mobileSubmenuSlide 0.2s ease-out forwards;
}

@keyframes mobileSubmenuSlide {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-dropdown.open > .mobile-drop-toggle .arrow {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.mobile-nav-list .mobile-submenu li a {
    padding: 10px 20px 10px 4.5rem; /* Soldan dengeli girinti */
    font-size: 0.84rem; /* Küçültülmüş zarif font */
    color: #475569; /* Aşırı koyu olmayan yumuşak okunabilir ton */
    opacity: 0.9;
    font-weight: 450; /* Çok kalın olmayan, dengeli ağırlık */
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 0;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.mobile-nav-list .mobile-submenu li:last-child a {
    border-bottom: none;
}

.mobile-nav-list .mobile-submenu li a:hover {
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.85);
}

/* DOĞAL AKIŞTA LİSTE SONUNDA YER ALAN MOBİL MENÜ FOOTER (FIXED/STICKY DEĞİL) */
.mobile-menu-footer {
    position: static;
    flex-shrink: 0;
    width: 100%;
    padding: 24px 20px 30px;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    box-shadow: none;
    text-align: center;
}

.mobile-announcement-card {
    background: var(--pastel-bg);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    margin-bottom: 14px;
    border-left: 3px solid var(--primary-color);
}

.mobile-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.mobile-theme-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-theme-widget.theme-picker-widget {
    display: inline-flex !important;
    gap: 8px;
}

.mobile-theme-widget .t-btn {
    width: 22px;
    height: 22px;
}

.mobile-utility-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.m-util-link {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.m-util-link i {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.m-util-link:hover {
    background: var(--pastel-bg);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.mobile-msg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 18px;
}

.mobile-social-bar {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}

.mobile-social-bar a {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.mobile-copy {
    font-size: 0.75rem;
    color: #94a3b8;
}

.menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}

/* --------------------------------------------------------------------------
   18. DUYARLILIK (RESPONSIVE BREAKPOINTS: WEB >762px, MOBİL <=762px)
   -------------------------------------------------------------------------- */

/* TABLET VE ARA EKRANLARDA KOMPAKT YATAY MENÜ (763px - 1080px arası) */
@media (min-width: 763px) and (max-width: 1080px) {
    .nav-link {
        padding: 14px 10px;
        font-size: 0.86rem;
        gap: 4px;
    }

    .nav-link.home-icon {
        padding: 14px 12px;
    }
}

/* 1360px İLE 763px ARASI ARA EKRANLAR (1200px - 1220px ve çevresi dahil: 3rem padding) */
@media (min-width: 763px) and (max-width: 1360px) {
    .header-layout {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .hero-container-box {
        padding: 0 !important;
    }
}

/* MOBİL MODU: SADECE 762px VE ALTINDA DEVREYE GİRER (1rem padding) */
@media (max-width: 762px) {
    .top-utility-bar {
        display: block !important;
        padding: 3px 0 !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        font-size: 11.5px;
    }

    .top-utility-bar .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .top-utility-bar .top-emergency-links {
        display: none !important; /* Mobilde duyuru metninin tam genişlikte net okunması için sağ butonlar gizlenir */
    }

    .top-utility-bar .ticker-left-wrap {
        width: 100%;
        gap: 6px;
        margin: 0;
        padding: 0;
    }

    .top-utility-bar .ticker-live-badge {
        font-size: 9px;
        padding: 2px 6px;
        gap: 4px;
        flex-shrink: 0;
    }

    /* Mobilde CANLI DUYURU yerine sadece CANLI yazsın */
    .top-utility-bar .ticker-live-badge .badge-text-sub {
        display: none !important;
    }

    .top-utility-bar .ticker-content-flow {
        height: 36px !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .top-utility-bar .ticker-item {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        max-height: 34px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
        gap: 4px;
    }

    .breadcrumb-bar {
        display: block !important;
        background-color: #f8fafc;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 6px 0 !important;
        font-size: 0.76rem;
    }

    body.dark-mode .breadcrumb-bar {
        background-color: #0f172a;
        border-color: #334155;
    }

    .breadcrumb-bar .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .main-header {
        position: relative;
        width: 100%;
        z-index: 950;
        min-height: 72px;
        height: 72px;
        border-bottom: none;
    }

    .primary-navbar {
        display: none;
    }

    .mobile-hamburger-btn {
        display: flex;
    }

    .header-right-graphics {
        display: none;
    }

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

    /* Mobilde Container & Header 1.25rem padding alır */
    .container {
        width: 100% !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-sizing: border-box !important;
    }

    .page-content-container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .units-section,
    .working-hours-section,
    .duty-pharmacy-section,
    .emergency-call-section,
    .news-announcements-section,
    .articles-summary-section,
    .hours-quick-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .header-layout {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-sizing: border-box;
    }

    /* Mobilde Slider tam genişlikte, kenarlara sıfır ve üst boşluk sıfır */
    .hero-slider-section {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-container-box,
    .container.hero-container-box {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-slider-container {
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Kapatma butonu ile menü butonu aynı konumda */
    .mobile-menu-header {
        min-height: 72px;
        height: 72px;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-sizing: border-box;
    }

    .mobile-hamburger-btn,
    .close-menu-btn {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }

    .header-logo-box,
    .round-emblem,
    .round-logo {
        width: 50px;
        height: 50px;
    }

    .header-logo-img,
    .round-emblem img,
    .round-logo img {
        width: 50px;
        height: 50px;
    }

    .brand-identity,
    .brand-box-mobile {
        gap: 10px;
    }

    .brand-naming .top-line,
    .brand-text-mobile .ministry-title {
        font-size: 0.88rem;
        line-height: 1.15;
    }

    .brand-naming .bottom-line,
    .brand-text-mobile .asm-title {
        font-size: 0.82rem;
        line-height: 1.15;
    }

    .hero-content h2 {
        font-size: 1.6rem;
    }

    .hours-layout-grid-3, .hours-layout-grid, .contact-layout-grid {
        grid-template-columns: 1fr;
    }

    /* Mobilde Footer Tek Sütun ve Koyu Sonlanma */
    .dark-wide-footer {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding-bottom: 24px !important;
    }

    .footer-col {
        width: 100%;
        box-sizing: border-box;
    }

    /* Mobilde Kurumsal & Sosyal Medya Özel Tasarım Künye Kartı (Tek Parça Koyu Glass Kart) */
    .footer-col.brand-col {
        background: rgba(0, 0, 0, 0.28); /* Koyu zemin tüm ana karta yayıldı */
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 14px;
        padding: 20px 16px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    }

    .footer-col.brand-col .footer-brand {
        margin-bottom: 12px;
        gap: 12px;
    }

    .footer-col.brand-col .footer-logo-box {
        width: 50px;
        height: 50px;
    }

    .footer-col.brand-col .footer-logo-img {
        width: 50px;
        height: 50px;
    }

    .footer-col.brand-col .brand-text-footer {
        align-items: center;
        text-align: center;
    }

    .footer-col.brand-col .brand-text-footer .f-top {
        font-size: 0.85rem;
        font-weight: 700;
        color: #ffffff;
        text-align: center;
    }

    .footer-col.brand-col .brand-text-footer .f-bot {
        font-size: 0.82rem;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.25;
        text-align: center;
    }

    .footer-col.brand-col .footer-about-text {
        font-size: 0.82rem;
        line-height: 1.5;
        margin-bottom: 14px;
        color: #94a3b8;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* İçteki kart kutusu kalktı, doğrudan kartın içeriği olarak akıcı duruyor */
    .footer-col.brand-col .footer-kunye-card {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
        gap: 10px;
    }

    .footer-col.brand-col .kunye-item {
        font-size: 0.80rem;
    }

    .footer-col.brand-col .footer-social-links {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-col.brand-col .footer-social-links a {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #f1f5f9;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .footer-col.brand-col .footer-social-links a:hover {
        background: var(--primary-color);
        color: #ffffff;
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

    .footer-heading {
        margin-bottom: 14px;
        padding-bottom: 8px;
    }

    .footer-bottom-bar {
        padding-top: 16px !important;
        padding-bottom: 25px !important;
        background-color: var(--footer-bottom) !important;
    }

    .footer-bottom-flex {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    .footer-bottom-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    /* Mobilde Tüm Detay Kartları, Profil Blokları ve Sayfa Kartları: Ferah İç Padding */
    .detail-layout-card,
    .doc-profile-card,
    .doc-section-card,
    .doctor-detail-wrapper,
    .management-container-card,
    .org-diagram-container,
    .detail-pane,
    .master-detail-layout,
    .gallery-group-block,
    .gallery-strip-card,
    .article-detail-content,
    .cookie-policy-card,
    .privacy-policy-card {
        padding: 22px 18px !important;
        border-radius: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .cookie-banner {
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        box-sizing: border-box;
    }
}

/* KÜÇÜK EKRANLI TELEFONLAR (500px ve altı) */
@media (max-width: 500px) {
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .detail-layout-card,
    .doc-profile-card,
    .doc-section-card,
    .management-container-card,
    .org-diagram-container,
    .detail-pane,
    .gallery-group-block,
    .gallery-strip-card {
        padding: 18px 14px !important;
        border-radius: 10px !important;
    }

    .header-logo-box,
    .round-emblem,
    .round-logo {
        width: 46px;
        height: 46px;
    }

    .header-logo-img,
    .round-emblem img,
    .round-logo img {
        width: 46px;
        height: 46px;
    }

    .brand-naming .top-line,
    .brand-text-mobile .ministry-title {
        font-size: 0.80rem;
    }

    .brand-naming .bottom-line,
    .brand-text-mobile .asm-title {
        font-size: 0.74rem;
    }

    .hero-content h2 {
        font-size: 1.45rem;
    }

    .footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .profile-header-flex {
        flex-direction: column;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   19. ÇEREZ AYDINLATMA BANNERI (COOKIE CONSENT)
   -------------------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 460px;
    width: calc(100% - 48px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--primary-color);
    padding: 22px;
    z-index: 99999;
    transform: translateY(120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease,
                visibility 0.4s;
}

.cookie-banner.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cookie-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cookie-icon {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.cookie-text h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.cookie-text p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.cookie-text a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-cookie-accept {
    flex: 1;
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background-color 0.2s;
}

.btn-cookie-accept:hover {
    background-color: var(--primary-hover);
}

.btn-cookie-reject {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid var(--border-color);
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.2s;
}

.btn-cookie-reject:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}

@media (max-width: 480px) {
    .cookie-banner {
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        padding: 16px 1rem !important;
    }

    .cookie-actions {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   20. MASTER-DETAIL DÜZENİ (MASTER-DETAIL LAYOUT)
   -------------------------------------------------------------------------- */
.master-detail-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    align-items: start;
}

/* Sol Master Sidebar */
.master-sidebar {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    position: sticky;
    top: 75px;
}

.master-sidebar-header {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 16px 20px;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.master-sidebar-header i {
    font-size: 1.1rem;
}

.master-list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.master-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 500;
    border-bottom: 1px solid #f1f5f9;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.master-item-link:last-child {
    border-bottom: none;
}

.master-item-link:hover {
    background-color: var(--pastel-bg);
    color: var(--primary-color);
    padding-left: 24px;
}

.master-item-link.active {
    background-color: var(--pastel-bg);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 700;
}

.master-item-info {
    display: flex;
    flex-direction: column;
}

.master-item-title {
    font-size: 0.95rem;
    color: inherit;
}

.master-item-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 2px;
}

.master-item-link i.arrow-icon {
    font-size: 0.8rem;
    color: #cbd5e1;
}

.master-item-link.active i.arrow-icon {
    color: var(--primary-color);
    transform: translateX(3px);
}

/* Sağ Detail İçerik Alanı */
.detail-pane {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    padding: 35px;
    min-height: 520px;
}

.detail-pane-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.detail-badge {
    display: inline-block;
    background: var(--pastel-bg);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 15px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.detail-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.3;
}

.detail-meta-bar {
    display: flex;
    gap: 18px;
    font-size: 0.85rem;
    color: #64748b;
}

.detail-meta-bar span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Master-Detail Responsive Düzeni & Mobilde Side Menüleri Gizleme */
@media (max-width: 992px) {
    .master-sidebar,
    .page-sidebar,
    .detail-sidebar,
    .sidebar-widget,
    .category-sidebar,
    .doctor-sidebar,
    .aside-sidebar,
    .side-nav-menu {
        display: none !important;
    }

    .master-detail-layout {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    .detail-pane {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   21. SPA MASTER-DETAIL VIEW INJECTION ANIMASYONU
   -------------------------------------------------------------------------- */
.spa-view-container,
.spa-view-entering {
    min-height: 50vh;
    animation: spaFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes spaFadeIn {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   22. DOKTOR DETAY SAYFASI (STANDALONE DETAIL VIEW)
   -------------------------------------------------------------------------- */
.doctor-detail-wrapper {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 1. Üst Profil Kartı: Solda 160px Yuvarlak Fotoğraf, Sağda Bilgiler & Özgeçmiş */
.doc-profile-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 36px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.doc-avatar-160 {
    width: 160px;
    height: 160px;
    min-width: 160px;
    min-height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--primary-color);
    background: var(--pastel-bg);
    flex-shrink: 0;
}

.doc-avatar-160 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.doc-profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.doc-badge-unit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pastel-bg);
    color: var(--primary-color);
    font-size: clamp(0.70rem, 2.2vw, 0.82rem);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap !important;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.doc-name-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #1e293b;
    margin: 4px 0 2px;
    line-height: 1.25;
}

.doc-role-subtitle {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--primary-color);
}

/* İletişim Bilgileri Satırı */
.doc-contact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;
    padding: 14px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.92rem;
    color: #475569;
}

.doc-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.doc-contact-item i {
    color: var(--primary-color);
    font-size: 1rem;
}

.doc-contact-item a {
    color: #334155;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.doc-contact-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Mezun Olunan Okul & Özgeçmiş */
.doc-bio-block {
    margin-top: 4px;
}

.doc-education {
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.doc-education strong {
    color: #1e293b;
}

.doc-bio-text {
    font-size: 0.96rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

/* 2. Section: Haftalık Çalışma & Muayene Saatleri Çizelgesi */
.doc-section-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    padding: 32px;
}

.doc-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--pastel-bg);
}

.doc-section-head i {
    font-size: 1.35rem;
    color: var(--primary-color);
}

.doc-section-head h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.doc-table-responsive {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    margin-top: 6px;
}

.doc-schedule-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    margin: 0;
    table-layout: fixed;
}

.doc-schedule-table th,
.doc-schedule-table td {
    padding: 14px 16px;
    font-size: 0.92rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.doc-schedule-table tr:last-child td,
.doc-schedule-table tr:last-child th {
    border-bottom: none;
}

.doc-schedule-table thead th {
    background-color: var(--pastel-bg);
    color: var(--primary-color);
    font-weight: 700;
    text-align: left;
    border-bottom: 1.5px solid var(--border-color);
}

.doc-schedule-table thead th:first-child {
    width: 18%;
}

.doc-schedule-table thead th:nth-child(2),
.doc-schedule-table thead th:nth-child(3) {
    width: 41%;
}

.doc-schedule-table tbody th {
    background-color: #fafbfc;
    color: var(--primary-color);
    font-weight: 700;
    text-align: left;
    border-right: 1px solid #f1f5f9;
}

.doc-schedule-table td {
    color: #334155;
    background: #ffffff;
}

.doc-schedule-table tr:hover td {
    background-color: #f8fafc;
}

/* 3. Section: Doktorun Makaleleri */
.doc-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.doc-article-card {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.2s ease;
}

.doc-article-card:hover {
    background: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.doc-article-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    margin: 0;
}

.doc-article-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.doc-article-title a:hover {
    color: var(--primary-color);
}

.doc-article-desc {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

.doc-article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* 4. Alt Randevu CTA Kartı */
.doc-appointment-banner {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    border-radius: 16px;
    padding: 32px 40px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 130, 138, 0.25);
}

.doc-appointment-text h3 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #ffffff;
}

.doc-appointment-text p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

.btn-mhrs-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: var(--primary-color);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 15px 32px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.btn-mhrs-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    background: #f8fafc;
    color: var(--primary-hover);
}

@media (max-width: 762px) {
    .doc-profile-card {
        flex-direction: column;
        align-items: center;
        text-align: left;
        padding: 24px 1rem;
        box-sizing: border-box;
    }

    .doc-profile-info {
        width: 100%;
        padding: 0 0.25rem;
        box-sizing: border-box;
    }

    /* Üst İsim, Unvan ve Birim Rozeti: Ortalanmış */
    .doc-header-top {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        gap: 8px;
        margin-bottom: 6px;
    }

    .doc-header-top > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .doc-name-title {
        text-align: center;
    }

    .doc-role-subtitle {
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .doc-badge-unit {
        margin: 4px auto 0;
        font-size: clamp(0.66rem, 2.4vw, 0.78rem);
        padding: 5px 12px;
        white-space: nowrap !important;
        max-width: 100%;
    }

    /* İletişim Bilgileri (E-posta, Dahili Telefon, Hemşire): Sola Yaslı ve Sol-Sağ Padding */
    .doc-contact-meta {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
        gap: 10px;
        padding: 14px 1rem;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        box-sizing: border-box;
    }

    .doc-contact-item {
        justify-content: flex-start;
        text-align: left;
        width: 100%;
    }

    /* Mezun Olunan Okul & Kısa Özgeçmiş: Sola Yaslı ve Sol-Sağ Padding */
    .doc-bio-block {
        text-align: left;
        width: 100%;
        padding: 8px 0.5rem 0;
        box-sizing: border-box;
    }

    .doc-education {
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .doc-bio-text {
        text-align: left;
        line-height: 1.65;
    }

    .doc-section-card {
        padding: 20px 0.75rem;
        box-sizing: border-box;
    }

    /* Mobilde Tablo: Kaydırma Çubuğu Olmadan Tam Ekrana Oturan Text-Wrap ve Orantılı Boyutlandırma */
    .doc-table-responsive {
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 8px;
        margin: 6px 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .doc-table-responsive::-webkit-scrollbar {
        display: none;
    }

    .doc-schedule-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .doc-schedule-table th,
    .doc-schedule-table td {
        padding: 8px 6px !important;
        font-size: 0.76rem !important;
        line-height: 1.32 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        vertical-align: middle !important;
    }

    .doc-schedule-table thead th {
        font-size: 0.72rem !important;
        padding: 7px 4px !important;
        text-align: center !important;
    }

    .doc-schedule-table thead th:first-child {
        width: 24% !important;
        text-align: left !important;
        color: var(--primary-color) !important;
        font-weight: 700 !important;
        padding-left: 1rem !important;
        padding-right: 4px !important;
        box-sizing: border-box;
    }

    .doc-schedule-table thead th:nth-child(2),
    .doc-schedule-table thead th:nth-child(3) {
        width: 38% !important;
    }

    .doc-schedule-table tbody th {
        width: 24% !important;
        font-size: 0.76rem !important;
        text-align: left !important;
        color: var(--primary-color) !important;
        font-weight: 700 !important;
        padding-left: 1rem !important;
        padding-right: 4px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        box-sizing: border-box;
    }

    .doc-schedule-table td {
        width: 38% !important;
    }

    .doc-appointment-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 1rem;
        box-sizing: border-box;
    }

    .btn-mhrs-cta {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 440px) {
    .doc-section-card {
        padding: 16px 0.4rem;
    }

    .doc-schedule-table th,
    .doc-schedule-table td {
        padding: 6px 3px !important;
        font-size: 0.70rem !important;
        line-height: 1.25 !important;
    }

    .doc-schedule-table thead th {
        font-size: 0.68rem !important;
    }

    .doc-schedule-table thead th:first-child {
        width: 24% !important;
        text-align: left !important;
        color: var(--primary-color) !important;
        font-weight: 700 !important;
        padding-left: 1rem !important;
        padding-right: 3px !important;
        box-sizing: border-box;
    }

    .doc-schedule-table thead th:nth-child(2),
    .doc-schedule-table thead th:nth-child(3) {
        width: 38% !important;
    }

    .doc-schedule-table tbody th {
        width: 24% !important;
        font-size: 0.70rem !important;
        text-align: left !important;
        color: var(--primary-color) !important;
        font-weight: 700 !important;
        padding-left: 1rem !important;
        padding-right: 3px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        box-sizing: border-box;
    }

    .doc-schedule-table td {
        width: 38% !important;
    }
}

/* --------------------------------------------------------------------------
   23. WEB ARAMA OVERLAY & CANLI SONUÇLAR MODAL (%50 x %50)
   -------------------------------------------------------------------------- */
.web-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s;
}

.web-search-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Hafif Arka Plan Karartması ve Blur */
.web-search-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

/* Menünün Tam Üst Çizgisinden Başlayan %50 x %50 Arama Konteyneri */
.web-search-container {
    position: relative;
    z-index: 2;
    width: 50%;
    height: 50%;
    min-width: 320px;
    max-width: 820px;
    min-height: 380px;
    max-height: 560px;
    margin-top: 124px; /* Menünün tam üst çizgisi */
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: scale(0.98) translateY(-6px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.2s ease;
    outline: none !important;
}

.web-search-container,
.web-search-container *:focus,
.web-search-input-box,
.web-search-input-box:focus,
.web-search-input-box:focus-within,
.web-search-results-box,
.web-search-results-box:focus,
.web-search-clear-btn:focus,
.web-search-close-btn:focus,
.search-result-card:focus,
.search-tag-chip:focus {
    outline: none !important;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent !important;
}

.web-search-overlay.active .web-search-container {
    transform: scale(1) translateY(0);
}

/* Arama Çubuğu (Mobildeki şık input tasarımıyla) */
.web-search-bar-wrapper {
    width: 100%;
    flex-shrink: 0;
}

.web-search-input-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid var(--primary-color) !important;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 0 16px;
    height: 56px;
    box-sizing: border-box;
    outline: none !important;
}

.web-search-input-box:focus-within {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 10px 32px rgba(0, 130, 138, 0.22) !important;
}

.web-search-input-box .search-lead-icon {
    font-size: 1.15rem;
    color: var(--primary-color);
    margin-right: 12px;
}

.web-search-input-box input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 1.05rem;
    color: #1e293b;
    font-family: inherit;
    padding: 0;
    height: 100%;
}

.web-search-input-box input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.web-search-input-box input::placeholder {
    color: #94a3b8;
    font-size: 0.95rem;
}

.web-search-clear-btn {
    background: transparent;
    border: none;
    outline: none !important;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1rem;
    padding: 6px;
    margin-right: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.web-search-clear-btn:hover {
    color: #ef4444;
}

.web-search-close-btn {
    background: transparent;
    border: none;
    outline: none !important;
    color: #64748b;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.2s;
}

.web-search-close-btn:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* Arama Sonuçları Kutusu (%50 Yüksekliği doldurur, Kartlar şeklinde gösterir) */
.web-search-results-box {
    flex: 1;
    min-height: 0;
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, #e2e8f0);
    border-bottom: 4.5px solid var(--primary-color); /* Kartların karakteristik kıvrımlı tema bordürü */
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    padding: 14px 10px 14px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    outline: none !important;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
}

.web-search-results-box::-webkit-scrollbar {
    width: 6px;
}

.web-search-results-box::-webkit-scrollbar-track {
    background: transparent;
    margin: 14px 0; /* Scrollbar'ın kutunun yuvarlak üst ve alt köşelerinden dışarı taşmasını engeller */
    border-radius: 6px;
}

.web-search-results-box::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 6px;
}

.web-search-results-box::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-hover);
}

/* Arama Sonuç Kartları */
.search-result-card {
    background: #f8fafc;
    border: 0.3px solid #cbd5e1; /* Kart yapısında 0.3px incelikte zarif bordür */
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.search-result-card:hover {
    background: #ffffff;
    border: 0.3px solid var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 130, 138, 0.12);
}

.search-card-thumb {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pastel-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--primary-color);
    flex-shrink: 0;
}

.search-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-card-thumb i {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.search-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-card-badge {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--pastel-bg);
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 2px;
}

.search-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-card-desc {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-card-arrow {
    color: #cbd5e1;
    font-size: 0.9rem;
    transition: transform 0.2s, color 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

.search-result-card:hover .search-card-arrow {
    color: var(--primary-color);
    transform: translateX(4px);
}

/* Boş Durum & Öneriler */
.search-empty-state,
.search-suggestions-box {
    padding: 20px 12px;
    text-align: center;
    color: #64748b;
}

.search-suggestions-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* --------------------------------------------------------------------------
   KARANLIK MOD (DARK MODE) ARAMA AÇILIR KUTUSU VE SONUÇ KARTLARI UYUMU
   -------------------------------------------------------------------------- */
body.dark-mode .web-search-input-box {
    background: #1e293b !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .web-search-input-box input {
    color: #f8fafc !important;
}

body.dark-mode .web-search-input-box input::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .web-search-close-btn,
body.dark-mode .web-search-clear-btn {
    color: #94a3b8 !important;
}

body.dark-mode .web-search-close-btn:hover {
    color: #f8fafc !important;
}

body.dark-mode .web-search-results-box {
    background: #0f172a !important;
    border-color: #334155 !important;
    border-bottom: 4.5px solid var(--primary-color) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55) !important;
}

body.dark-mode .search-result-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .search-result-card:hover {
    background: #273549 !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 6px 18px rgba(0, 130, 138, 0.25) !important;
}

body.dark-mode .search-card-thumb {
    background: #0f172a !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .search-card-badge {
    background: rgba(0, 130, 138, 0.22) !important;
    color: #38bdf8 !important;
}

body.dark-mode .search-card-title {
    color: #f8fafc !important;
}

body.dark-mode .search-card-desc {
    color: #94a3b8 !important;
}

body.dark-mode .search-card-arrow {
    color: #64748b !important;
}

body.dark-mode .search-result-card:hover .search-card-arrow {
    color: var(--primary-color) !important;
}

body.dark-mode .search-empty-state,
body.dark-mode .search-suggestions-box {
    color: #94a3b8 !important;
}

body.dark-mode .search-empty-state p,
body.dark-mode .search-empty-state h4 {
    color: #cbd5e1 !important;
}

body.dark-mode .search-suggestions-title {
    color: #cbd5e1 !important;
}

body.dark-mode .search-tag-chip {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #38bdf8 !important;
}

body.dark-mode .search-tag-chip:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

.search-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.search-tag-chip {
    background: var(--pastel-bg);
    color: var(--primary-color);
    border: 1px solid rgba(0, 130, 138, 0.2);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-tag-chip:hover {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateY(-2px);
}

.mobile-search-btn-top {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 1.1rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-search-btn-top:hover {
    background: var(--pastel-bg);
}

@media (max-width: 762px) {
    .mobile-search-btn-top {
        display: flex;
    }

    .web-search-overlay {
        padding-top: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: rgba(15, 23, 42, 0.5) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Mobilde arama çubuğu ve altındaki sonuç kutusu kapsayıcısı */
    .web-search-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        margin-top: 0 !important;
        padding: 12px 14px 18px 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        transform: translateY(-8px);
    }

    .web-search-overlay.active .web-search-container {
        transform: translateY(0);
    }

    .web-search-bar-wrapper {
        width: 100%;
        flex-shrink: 0;
    }

    .web-search-input-box {
        height: 52px;
        padding: 0 14px;
        border-radius: 14px;
        border: 2px solid var(--primary-color) !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important;
    }

    .web-search-input-box input {
        font-size: 0.95rem;
    }

    /* Arama çubuğunun hemen altından sayfanın sonuna kadar uzanan sonuç kartı kutusu */
    .web-search-results-box {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: calc(100vh - 90px) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, #e2e8f0) !important;
        border-bottom: 4.5px solid var(--primary-color) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
        padding: 12px 8px 14px 12px !important;
        overflow-y: auto !important;
    }

    .search-result-card {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 10px;
        border: 0.3px solid #cbd5e1;
    }

    .search-card-thumb {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .search-card-title {
        font-size: 0.88rem;
    }

    .search-card-desc {
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   YENİ DETAY VE LİSTE SAYFALARI MİMARİSİ (BİRİMLER, DOKTORLAR, HİZMETLER, MAKALELER)
   ========================================================================== */

/* 1. Sidebar Canlı Arama & Süzme Kutuları */
.sidebar-search-box {
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
    box-sizing: border-box;
}

.sidebar-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.sidebar-search-input-wrap i {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    font-size: 0.90rem;
    pointer-events: none;
}

.sidebar-search-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    font-size: 0.88rem;
    color: #1e293b;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.sidebar-search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* 2. Sayfalama (Pagination) Navigasyonu */
.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pagination-btn:hover {
    background: #f8fafc;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pagination-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.pagination-btn:disabled, .pagination-btn.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* 3. Kategorili Makale Bölüm Başlığı & "Kategoriye Git" Butonu */
.category-section-block {
    margin-bottom: 45px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.category-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid color-mix(in srgb, var(--primary-color) 15%, #f1f5f9);
    flex-wrap: wrap;
}

.category-header-left h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-header-left p {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
}

.btn-category-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 10%, #ffffff);
    color: var(--primary-color);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-category-go:hover {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* 4. 2 Sütunlu Yatay Makale Kartları (w:~300px, h:~100px) */
.articles-2col-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

@media (max-width: 820px) {
    .articles-2col-grid {
        grid-template-columns: 1fr;
    }
}

.article-card-horizontal {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    height: 112px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.article-card-horizontal:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(0, 130, 138, 0.08);
}

.article-thumb-wrap {
    width: 110px;
    min-width: 110px;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #e2e8f0;
}

.article-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card-horizontal:hover .article-thumb-wrap img {
    transform: scale(1.06);
}

.article-info-wrap {
    flex: 1;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.article-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-card-snippet {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 4px;
}

.article-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-meta-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-meta-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f1f5f9;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.70rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.article-meta-btn:hover {
    background: var(--primary-color);
    color: #ffffff;
}

/* 5. Rozetler (Pills / Badges) */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: clamp(0.65rem, 1.8vw, 0.74rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap !important;
    max-width: 100%;
    line-height: 1.25;
    flex-shrink: 0;
}

.badge-pill.badge-baby { background: #e0f2fe; color: #0284c7; }
.badge-pill.badge-chronic { background: #fef3c7; color: #d97706; }
.badge-pill.badge-preventive { background: #dcfce7; color: #16a34a; }
.badge-pill.badge-urgent { background: #fee2e2; color: #dc2626; }
.badge-pill.badge-info { background: #f3e8ff; color: #9333ea; }

/* 6. Makale Detay Sayfası Ekstra Bileşenleri */
.detail-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 22px;
}

.detail-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-detail-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-detail-action:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #f8fafc;
}

.btn-detail-action.btn-like:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

/* 7. 5 Yıldızlı Puan Verme Widget'ı */
.star-rating-box {
    margin: 30px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.star-rating-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.4rem;
    color: #cbd5e1;
    cursor: pointer;
}

.star-rating-stars i.active, .star-rating-stars i.hover {
    color: #f59e0b;
}

.star-rating-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
}

/* 8. Doktora Soru Sor & Soru-Cevap Bileşenleri */
.qa-section-wrap {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e2e8f0;
}

.ask-doctor-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 25%, #e2e8f0);
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

.qa-card-item {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 18px;
    margin-bottom: 16px;
}

.qa-question-box {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.qa-question-box i {
    color: #64748b;
    margin-top: 3px;
}

.qa-answer-box {
    background: #ffffff;
    border-left: 3px solid var(--primary-color);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    font-size: 0.90rem;
    color: #334155;
    line-height: 1.6;
}

.qa-doctor-sign {
    font-size: 0.80rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 6px;
    display: block;
}

/* 9. Sağlıklı Yaşam & Vücut Kitle İndeksi (VKİ) Hesaplayıcı */
.bmi-calculator-box {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 8%, #ffffff), #ffffff);
    border-radius: 16px;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, #e2e8f0);
    padding: 28px;
    margin-bottom: 35px;
}

.bmi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

/* ==========================================================================
   10. BİRİMLER SAYFASI: ÇİFT PERSONEL (DOKTOR + ASE) KARTLARI
   ========================================================================== */
.unit-duo-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
}

.unit-duo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.unit-duo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.unit-duo-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 7px;
}

.unit-room-badge {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.unit-personnel-duo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width: 580px) {
    .unit-personnel-duo-grid {
        grid-template-columns: 1fr;
    }
}

.personnel-sub-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.personnel-sub-card.doctor-side {
    border: 0.5px solid var(--primary-color);
}

.personnel-sub-card.nurse-side {
    border: 0.5px solid color-mix(in srgb, var(--primary-color) 42%, #cbd5e1);
}

.personnel-avatar-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 8px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.personnel-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.personnel-avatar-icon {
    font-size: 1.8rem;
    color: #0284c7;
}

.personnel-role-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 6px;
    margin-bottom: 5px;
    display: inline-block;
}

.personnel-role-tag.doc-tag {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

.personnel-role-tag.ase-tag {
    background: #e0f2fe;
    color: #0369a1;
}

.personnel-name {
    font-size: 0.90rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.personnel-spec {
    font-size: 0.74rem;
    color: #64748b;
    margin: 0;
}

.unit-card-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #64748b;
    background: #f8fafc;
    padding: 7px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* ==========================================================================
   11. YÖNETİM KADROMUZ: SİDEBARSIZ, TEK BÜYÜK CARD & DİKDÖRTGEN RESİMLİ SOFT BLOKLAR
   ========================================================================== */
.management-container-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 36px 32px;
    max-width: 1180px;
    margin: 0 auto;
}

.management-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px auto;
}

.management-header .detail-badge {
    margin: 0 auto 10px auto;
    display: inline-flex;
}

.management-header h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.management-header p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.management-member-item {
    background: var(--pastel-bg);
    border: 0.5px solid color-mix(in srgb, var(--primary-color) 28%, #cbd5e1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.management-member-item:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

.management-member-photo-wrap {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #e2e8f0;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
}

.management-member-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.3s ease;
}

.management-member-item:hover .management-member-photo-wrap img {
    transform: scale(1.03);
}

.management-member-body {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.management-member-role {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    margin-bottom: 8px;
    display: inline-block;
    align-self: center;
}

.management-member-name {
    font-size: 1.12rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 3px 0;
}

.management-member-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 10px 0;
}

.management-member-meta {
    font-size: 0.78rem;
    color: #475569;
    background: rgba(255, 255, 255, 0.75);
    padding: 6px 10px;
    border-radius: 6px;
    border: 0.5px solid #e2e8f0;
    margin-bottom: 12px;
}

.management-member-desc {
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 16px 0;
    flex: 1;
}

/* Sorumlu Hekim / Müdür Özel Vurgulu Koyu Zemin & Açık Yazı Stili */
.management-member-item.director-featured {
    background: linear-gradient(145deg, var(--primary-color), var(--primary-hover));
    border: 1px solid color-mix(in srgb, var(--primary-color) 60%, #ffffff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.management-member-item.director-featured .management-member-role {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.management-member-item.director-featured .management-member-name {
    color: #ffffff;
}

.management-member-item.director-featured .management-member-title {
    color: rgba(255, 255, 255, 0.88);
}

.management-member-item.director-featured .management-member-meta {
    background: rgba(0, 0, 0, 0.22);
    color: #ffffff;
    border: 0.5px solid rgba(255, 255, 255, 0.25);
}

.management-member-item.director-featured .management-member-meta span,
.management-member-item.director-featured .management-member-meta i {
    color: #ffffff !important;
}

.management-member-item.director-featured .management-member-desc {
    color: rgba(255, 255, 255, 0.92);
}

.management-member-item.director-featured .btn-director-action {
    background: #ffffff;
    color: var(--primary-color);
    font-weight: 700;
    border: none;
    transition: all 0.2s ease;
}

.management-member-item.director-featured .btn-director-action:hover {
    background: #f8fafc;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Müdür Satırında Tek / Solo Kart Düzeni */
.management-director-solo-wrap {
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
}

.management-member-item.director-featured.director-solo {
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 24px;
}

.management-member-item.director-featured.director-solo .management-member-photo-wrap {
    width: 220px;
    min-width: 220px;
    height: 240px;
    margin-bottom: 0;
}

.management-member-item.director-featured.director-solo .management-member-body {
    text-align: left;
    align-items: flex-start;
}

.management-member-item.director-featured.director-solo .management-member-role {
    align-self: flex-start;
}

@media (max-width: 768px) {
    .management-member-item.director-featured.director-solo {
        flex-direction: column;
        text-align: center;
        padding: 18px;
    }
    
    .management-member-item.director-featured.director-solo .management-member-photo-wrap {
        width: 100%;
        min-width: unset;
        height: 220px;
        margin-bottom: 14px;
    }
    
    .management-member-item.director-featured.director-solo .management-member-body {
        text-align: center;
        align-items: center;
    }
    
    .management-member-item.director-featured.director-solo .management-member-role {
        align-self: center;
    }
}

/* ==========================================================================
   12. TEŞKİLAT ŞEMASI & DİYAGRAM YAPISI
   ========================================================================== */
.org-diagram-container {
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 36px 28px;
    max-width: 1180px;
    margin: 0 auto;
}

.org-tree-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 10px;
}

/* Dikey Bağlantı Çizgisi */
.org-line-vertical {
    width: 2.5px;
    height: 32px;
    background: color-mix(in srgb, var(--primary-color) 40%, #cbd5e1);
    margin: 0 auto;
}

/* 1. Seviye: İl Sağlık Müdürlüğü Düğümü */
.org-node-provincial {
    background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 16px 28px;
    text-align: center;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 6px 18px rgba(183, 28, 28, 0.18);
    border: 1px solid #ef4444;
}

.org-node-provincial h3 {
    font-size: 1.12rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.org-node-provincial p {
    font-size: 0.82rem;
    margin: 0;
    opacity: 0.92;
}

/* 2. Seviye: ASM Yönetimi Düğümü */
.org-node-asm {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 16px 28px;
    text-align: center;
    max-width: 540px;
    width: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid color-mix(in srgb, var(--primary-color) 60%, #ffffff);
}

.org-node-asm h3 {
    font-size: 1.18rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.org-node-asm p {
    font-size: 0.84rem;
    margin: 0;
    opacity: 0.94;
}

/* 3. Seviye: Dallanma & Ana Departman Başlıkları */
.org-branches-container {
    width: 100%;
    position: relative;
    margin-top: 0;
}

.org-branch-splitter {
    position: relative;
    width: 60%;
    margin: 0 auto;
    height: 24px;
    border-top: 2.5px solid color-mix(in srgb, var(--primary-color) 40%, #cbd5e1);
    border-left: 2.5px solid color-mix(in srgb, var(--primary-color) 40%, #cbd5e1);
    border-right: 2.5px solid color-mix(in srgb, var(--primary-color) 40%, #cbd5e1);
}

.org-columns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    width: 100%;
}

@media (max-width: 768px) {
    .org-columns-grid {
        grid-template-columns: 1fr;
    }
    .org-branch-splitter {
        display: none;
    }
}

.org-column-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.org-column-header {
    background: var(--pastel-bg);
    border: 0.5px solid color-mix(in srgb, var(--primary-color) 30%, #cbd5e1);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
    margin-bottom: 16px;
}

.org-column-header h4 {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.org-column-header span {
    font-size: 0.78rem;
    color: #64748b;
}

/* 4. Seviye: Alt Alta Küçük Kartlar (Mini Cards) */
.org-mini-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.org-mini-card {
    background: #ffffff;
    border: 0.5px solid color-mix(in srgb, var(--primary-color) 25%, #cbd5e1);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    text-decoration: none;
}

.org-mini-card:hover {
    transform: translateX(4px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.org-mini-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.org-mini-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--pastel-bg);
    border: 0.5px solid color-mix(in srgb, var(--primary-color) 30%, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.org-mini-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.org-mini-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #1e293b;
}

.org-mini-staff {
    font-size: 0.78rem;
    color: #64748b;
}

.org-mini-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.org-mini-room-badge {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    border: 0.5px solid #e2e8f0;
}

/* ==========================================================================
   13. FOTOĞRAF GALERİSİ: 100PX STRIP KARTLARI & FULLSCREEN LIGHTBOX POPUP
   ========================================================================== */
.gallery-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.gallery-group-block {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.gallery-group-block:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, #cbd5e1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.gallery-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.gallery-header-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    flex: 1;
    min-width: 220px;
}

.gallery-header-info h3 {
    font-size: clamp(0.95rem, 1.8vw, 1.22rem);
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.35;
}

.gallery-header-info h3 i {
    color: var(--primary-color);
    font-size: 0.95em;
}

.gallery-count-badge {
    background: var(--pastel-bg);
    color: var(--primary-color);
    font-size: clamp(0.70rem, 1.2vw, 0.78rem);
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    border: 0.5px solid color-mix(in srgb, var(--primary-color) 30%, #cbd5e1);
    white-space: nowrap;
}

.btn-open-gallery {
    background: color-mix(in srgb, var(--primary-color) 10%, #ffffff);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    padding: clamp(5px, 1.2vw, 7px) clamp(10px, 1.8vw, 16px);
    border-radius: 8px;
    font-size: clamp(0.76rem, 1.3vw, 0.84rem);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-open-gallery:hover {
    background: var(--primary-color);
    color: #ffffff;
}

/* 100px Yüksekliğinde & Sayfa Genişliğinde Adaptif Thumbnail Strip Card */
.gallery-strip-card {
    width: 100%;
    height: clamp(82px, 11vw, 100px);
    background: var(--pastel-bg);
    border: 0.5px solid color-mix(in srgb, var(--primary-color) 25%, #cbd5e1);
    border-radius: 10px;
    padding: 6px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color) 30%, #cbd5e1) transparent;
}

.gallery-strip-card::-webkit-scrollbar {
    height: 4px;
}

.gallery-strip-card::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color) 30%, #cbd5e1);
    border-radius: 4px;
}

.gallery-strip-thumbnails {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
    height: 100%;
    width: 100%;
}

@media (max-width: 540px) {
    .gallery-group-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .gallery-header-info {
        width: 100%;
        justify-content: space-between;
    }
    
    .btn-open-gallery {
        width: 100%;
        justify-content: center;
    }
}

.gallery-thumb-item {
    height: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #e2e8f0;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.gallery-thumb-item .thumb-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-thumb-item:hover .thumb-hover-overlay {
    opacity: 1;
}

/* ==========================================================================
   FULLSCREEN LIGHTBOX POPUP MODAL (SLIDE, TOUCH SWAP / SWIPE DESTEKLİ)
   ========================================================================== */
.gallery-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(8, 12, 20, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease;
    user-select: none;
    box-sizing: border-box;
}

.gallery-lightbox-modal.active {
    display: flex;
    opacity: 1;
}

/* Lightbox Üst Barı */
.lightbox-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    z-index: 10;
}

.lightbox-gallery-title {
    font-size: clamp(0.88rem, 2.2vw, 1.15rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lightbox-gallery-title i {
    color: #38bdf8;
}

.lightbox-counter-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: clamp(0.72rem, 1.4vw, 0.82rem);
    font-weight: 600;
}

.lightbox-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: clamp(34px, 5vw, 40px);
    height: clamp(34px, 5vw, 40px);
    border-radius: 50%;
    font-size: clamp(1rem, 2vw, 1.25rem);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lightbox-close-btn:hover {
    background: #ef4444;
    transform: rotate(90deg);
}

/* Lightbox Sahne / Orta Alan */
.lightbox-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding: 16px 20px 24px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    gap: 14px;
}

/* ==========================================================================
   ŞEFFAF SİYAH TONLU FOTOĞRAF KARTI (BAŞLIK + FOTOĞRAF + AÇIKLAMA)
   ========================================================================== */
.lightbox-carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-carousel-viewport {
    position: relative;
    width: 100%;
    max-width: 1240px;
    height: clamp(330px, 50vh, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    overflow: hidden;
}

.lightbox-card {
    position: absolute;
    width: 740px;
    max-width: 70vw;
    height: 100%;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    gap: 0;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, filter 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    will-change: transform, opacity;
    user-select: none;
    overflow: hidden;
}

/* 1. Kart Başlık Alanı (Sola Yaslı, Şık İç Boşluklu) */
.card-header-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 20px 12px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-photo-title {
    color: #ffffff;
    font-size: clamp(1.02rem, 1.8vw, 1.3rem);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.2px;
    text-align: left;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* 2. Kart Fotoğraf Çerçevesi (Yuvarlatmasız, Sağdan Soldan Tam Oturan) */
.card-photo-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background: #000000;
    border: none;
    margin: 0;
}

.card-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* 3. Kart Açıklama Alanı (Açıklama Etiketli & Sola Yaslı) */
.card-desc-box {
    padding: 12px 20px 14px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.desc-label-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--pastel-bg);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 9px;
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 1.2;
}

.card-photo-desc {
    color: #e2e8f0;
    font-size: clamp(0.82rem, 1.3vw, 0.92rem);
    line-height: 1.5;
    margin: 0;
    text-align: left;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 1. Ortadaki Aktif Resim Kartı (Tamamen Siyah & Şeffaf) */
.lightbox-card.slot-active {
    transform: translateX(0) scale(1);
    z-index: 5;
    opacity: 1;
    filter: brightness(1);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 30px 75px rgba(0, 0, 0, 0.98);
    background: rgba(0, 0, 0, 0.88);
}

/* 2. Soldaki Önceki Resim Kartı */
.lightbox-card.slot-prev {
    transform: translateX(-76%) scale(0.82);
    z-index: 2;
    opacity: 0.42;
    filter: brightness(0.65) blur(0.5px);
    background: rgba(0, 0, 0, 0.68);
    cursor: pointer;
}

.lightbox-card.slot-prev:hover {
    opacity: 0.85;
    transform: translateX(-74%) scale(0.86);
    filter: brightness(0.9);
    border-color: var(--primary-color);
}

/* 3. Sağdaki Sonraki Resim Kartı */
.lightbox-card.slot-next {
    transform: translateX(76%) scale(0.82);
    z-index: 2;
    opacity: 0.42;
    filter: brightness(0.65) blur(0.5px);
    background: rgba(0, 0, 0, 0.68);
    cursor: pointer;
}

.lightbox-card.slot-next:hover {
    opacity: 0.85;
    transform: translateX(74%) scale(0.86);
    filter: brightness(0.9);
    border-color: var(--primary-color);
}

/* Kart Üzeri Yan Yönlendirme İpucu Rozetleri */
.card-side-hint {
    position: absolute;
    bottom: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    transition: all 0.2s ease;
}

.slot-prev .card-side-hint {
    left: 14px;
}

.slot-next .card-side-hint {
    right: 14px;
}

.slot-active .card-side-hint {
    display: none;
}

/* Hızlı Kayma Animasyon Tetikleyicileri */
.lightbox-carousel-viewport.slide-anim-right .slot-active {
    animation: quickSlideInRight 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-carousel-viewport.slide-anim-left .slot-active {
    animation: quickSlideInLeft 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes quickSlideInRight {
    0% {
        transform: translateX(50px) scale(0.96);
        opacity: 0.6;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes quickSlideInLeft {
    0% {
        transform: translateX(-50px) scale(0.96);
        opacity: 0.6;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Slide Navigasyon Butonları */
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: clamp(38px, 6vw, 48px);
    height: clamp(38px, 6vw, 48px);
    border-radius: 50%;
    font-size: clamp(1rem, 2vw, 1.25rem);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.lightbox-nav-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav-btn.prev {
    left: clamp(8px, 2vw, 20px);
}

.lightbox-nav-btn.next {
    right: clamp(8px, 2vw, 20px);
}

/* 4. Açıklamanın Hemen Altındaki 3 ila 6 Sütunlu Numaralı Thumbnail Izgarası */
.lightbox-thumb-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 880px;
    width: 92vw;
    gap: 10px;
    margin-top: 6px;
    z-index: 10;
    box-sizing: border-box;
    justify-content: center;
}

.lightbox-grid-thumb-btn {
    position: relative;
    width: 100%;
    height: clamp(68px, 9vh, 84px);
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.16);
    opacity: 0.48;
    cursor: pointer;
    background: #0f172a;
    padding: 0;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.lightbox-grid-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
}

.thumb-num-overlay {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    line-height: 1;
}

.lightbox-grid-thumb-btn.active, .lightbox-grid-thumb-btn:hover {
    opacity: 1;
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.lightbox-grid-thumb-btn.active .thumb-num-overlay {
    background: var(--primary-color);
    border-color: #ffffff;
    color: #ffffff;
}

/* ==========================================================================
   FOTOĞRAF BEĞENİ (LIKE) ROZETİ VE KALP BURST ANİMASYONU
   ========================================================================== */
.photo-like-badge {
    position: absolute;
    bottom: 14px;
    right: 16px;
    z-index: 15;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.photo-like-badge i {
    font-size: 1.05rem;
    color: #f43f5e;
    transition: transform 0.2s ease, color 0.2s ease;
}

.photo-like-badge:hover {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.08);
}

.photo-like-badge.liked {
    background: rgba(244, 63, 94, 0.22);
    border-color: #f43f5e;
    color: #ffffff;
}

.photo-like-badge.liked i {
    color: #f43f5e;
}

.photo-like-badge.heart-bounce {
    animation: heartBadgeBounce 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes heartBadgeBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* Tıklanınca Ortada Beliren Uçan Kalp (Heart Burst) Animasyonu */
.floating-heart-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    color: #f43f5e;
    font-size: 4.5rem;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    animation: burstHeartAnim 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    filter: drop-shadow(0 6px 20px rgba(244, 63, 94, 0.7));
}

@keyframes burstHeartAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    35% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.35);
    }
    60% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -75%) scale(1.4);
    }
}

/* ==========================================================================
   LIGHTBOX RESPONSIVE AYARLARI (3 İLA 6 SÜTUNLU IZGARA)
   ========================================================================== */
@media (max-width: 1023px) {
    .lightbox-thumb-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 720px;
        gap: 10px;
    }
    
    .lightbox-grid-thumb-btn {
        height: 64px;
    }
}

@media (max-width: 768px) {
    .lightbox-carousel-viewport {
        height: clamp(320px, 48vh, 420px);
        max-height: 52vh;
    }
    
    .lightbox-card {
        width: 86vw;
        max-width: 86vw;
        border-radius: 12px;
    }
    
    .card-header-bar {
        padding: 10px 14px 8px;
    }
    
    .card-desc-box {
        padding: 10px 14px 12px;
    }
    
    .lightbox-card.slot-prev {
        transform: translateX(-88%) scale(0.85);
        opacity: 0.28;
    }
    
    .lightbox-card.slot-next {
        transform: translateX(88%) scale(0.85);
        opacity: 0.28;
    }
    
    .card-side-hint {
        display: none;
    }
}

@media (max-width: 640px) {
    .lightbox-thumb-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
        width: 94vw;
        gap: 8px;
    }
    
    .lightbox-grid-thumb-btn {
        height: 56px;
    }
}

/* --------------------------------------------------------------------------
   26. TÜM SAYFALARDA ETİKETLER, ROZETLER VE ÇİZELGELER (ÖNCE FONT KÜÇÜLTSÜN, TAŞMA OLURSA WRAP OLSUN)
   -------------------------------------------------------------------------- */

/* Tablo Saat Bloğu (Görseli boğmadan alt satıra ferahça konumlanır) */
.schedule-time {
    display: block;
    font-size: clamp(0.70rem, 1.2vw, 0.78rem);
    color: #64748b;
    font-weight: 500;
    margin-top: 3px;
    line-height: 1.25;
}

/* Genel Rozetler ve Etiketler */
.doc-badge-unit,
.badge-pill,
.section-badge,
.detail-badge,
.personnel-role-tag,
.unit-room-badge,
.org-mini-room-badge,
.card-category-tag,
.mobile-cat-badge,
.news-tag,
.announcement-tag,
.article-tag,
.art-doctor-tag,
.dr-title-tag,
.emergency-badge-text,
.first-aid-badge-text,
.popup-badge,
.duo-role-badge,
.pharma-badge-pill,
.pharma-slide-badge,
.top-util-chip,
.search-tag-chip,
.active-query-pill,
.photo-like-badge,
.gallery-count-badge,
.lightbox-counter-badge {
    max-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: normal;
    transition: font-size 0.2s ease, padding 0.2s ease;
}

/* Tablo içindeki rozetler: Hücre genişliğini aşarsa taşmak yerine güvenle wrap olur, öncelikle küçük font dener */
.info-table td .badge-pill,
.doc-schedule-table td .badge-pill,
.table-responsive td .badge-pill {
    font-size: clamp(0.55rem, 1.2vw, 0.66rem) !important;
    padding: 2px 7px !important;
    letter-spacing: 0.15px !important;
    white-space: normal !important;
    text-align: center;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 2px;
}

/* Tablo ve hücre taşma koruması */
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.info-table th, .info-table td {
    padding: 10px 12px;
    vertical-align: middle;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Doktor Birim Rozeti: Geniş ekranda tek satır dener, dar ekranda fontu küçültür, taşarsa wrap olur */
.doc-badge-unit {
    font-size: clamp(0.68rem, 1.8vw, 0.80rem);
    padding: 5px 12px;
    white-space: normal;
    text-align: center;
}

/* 768px Tablet: Fontlar otomatik orantılı küçülür */
@media (max-width: 768px) {
    .doc-badge-unit {
        font-size: clamp(0.62rem, 2.2vw, 0.74rem);
        padding: 4px 10px;
    }

    .badge-pill {
        font-size: clamp(0.60rem, 2vw, 0.70rem);
        padding: 3px 8px;
    }

    .section-badge,
    .detail-badge {
        font-size: clamp(0.62rem, 2vw, 0.72rem);
        padding: 3px 10px;
    }

    .dr-title-tag {
        font-size: clamp(0.66rem, 2.2vw, 0.76rem);
        padding: 3px 8px;
    }

    .info-table th, .info-table td {
        padding: 8px 8px;
        font-size: 0.80rem;
    }
}

/* 480px Mobil: Fontlar en kompakt düzeye iner, kartı/sayfayı aşarsa satır kırılır */
@media (max-width: 480px) {
    .doc-badge-unit {
        font-size: clamp(0.58rem, 2.6vw, 0.70rem);
        padding: 3px 8px;
        gap: 4px;
        white-space: normal;
    }

    .badge-pill {
        font-size: clamp(0.56rem, 2.2vw, 0.65rem);
        padding: 2px 6px;
        gap: 3px;
        white-space: normal;
    }

    .section-badge,
    .detail-badge {
        font-size: clamp(0.58rem, 2.2vw, 0.68rem);
        padding: 2px 8px;
        gap: 4px;
    }

    .personnel-role-tag {
        font-size: clamp(0.55rem, 2vw, 0.64rem);
        padding: 2px 5px;
    }

    .unit-room-badge,
    .org-mini-room-badge {
        font-size: clamp(0.60rem, 2vw, 0.68rem);
        padding: 2px 6px;
    }

    .dr-title-tag {
        font-size: clamp(0.62rem, 2.4vw, 0.72rem);
        padding: 2px 6px;
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   27. HAFTALIK ÇALIŞMA VE MUAYENE ÇİZELGESİ (DAR İLK SÜTUN + SIFIR MOBİL SCROLL)
   -------------------------------------------------------------------------- */
.schedule-matrix-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* Mobilde scroll çubuğu tamamen engellenir */
    box-sizing: border-box;
    margin-bottom: 25px;
}

.schedule-matrix-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    margin: 0 !important;
    box-sizing: border-box;
}

.schedule-matrix-table th,
.schedule-matrix-table td {
    vertical-align: middle;
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: break-word;
}

/* İlk Başlık Sütunu (Gün): Web (Masaüstü) görünümünde orijinal 140px ve sola yaslı */
.schedule-matrix-table th.col-schedule-day,
.schedule-matrix-table td.col-schedule-day {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 150px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    font-weight: 700;
    font-size: 0.92rem;
    color: #1e293b;
    background-color: transparent;
    border-right: none;
}

/* Oturum Sütunları (Sabah & Öğleden Sonra) Masaüstünde */
.schedule-matrix-table th.col-schedule-session,
.schedule-matrix-table td.col-schedule-session {
    width: calc((100% - 140px) / 2) !important;
    padding: 12px 16px !important;
    text-align: left !important;
}

.schedule-matrix-table th.col-schedule-session {
    font-size: 0.90rem;
    line-height: 1.3;
}

.schedule-matrix-table th .th-time-sub {
    display: block;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
}

.schedule-matrix-table td .badge-pill {
    font-size: clamp(0.56rem, 1.2vw, 0.66rem) !important;
    padding: 2px 6px !important;
    white-space: normal !important;
    text-align: center;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 2px;
    line-height: 1.2;
}

.schedule-matrix-table .schedule-time {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
}

.schedule-matrix-table .day-abbr {
    display: none;
}
.schedule-matrix-table .day-full {
    display: inline;
}

/* Tablet & Küçük Ekranlar (768px ve altı) */
@media (max-width: 768px) {
    .schedule-matrix-table th.col-schedule-day,
    .schedule-matrix-table td.col-schedule-day {
        width: 62px !important;
        min-width: 62px !important;
        font-size: 0.76rem !important;
        padding: 6px 2px !important;
    }

    .schedule-matrix-table th.col-schedule-session,
    .schedule-matrix-table td.col-schedule-session {
        width: calc((100% - 62px) / 2) !important;
        padding: 6px 4px !important;
    }

    .schedule-matrix-table th.col-schedule-session {
        font-size: 0.76rem !important;
    }

    .schedule-matrix-table th .th-time-sub {
        font-size: 0.68rem !important;
    }

    .schedule-matrix-table td .badge-pill {
        font-size: 0.54rem !important;
        padding: 2px 4px !important;
    }

    .schedule-matrix-table .schedule-time {
        font-size: 0.66rem !important;
    }
}

/* Mobil Telefonlar (500px ve altı): Tam Ekrana Oturma & Sıfır Scroll */
@media (max-width: 500px) {
    .schedule-matrix-wrapper {
        overflow-x: hidden !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .schedule-matrix-table .day-full {
        display: none;
    }
    .schedule-matrix-table .day-abbr {
        display: inline;
    }

    .schedule-matrix-table th.col-schedule-day,
    .schedule-matrix-table td.col-schedule-day {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 46px !important;
        font-size: 0.72rem !important;
        padding: 6px 1px !important;
    }

    .schedule-matrix-table th.col-schedule-session,
    .schedule-matrix-table td.col-schedule-session {
        width: calc((100% - 44px) / 2) !important;
        padding: 6px 3px !important;
    }

    .schedule-matrix-table th.col-schedule-session {
        font-size: 0.70rem !important;
        line-height: 1.15 !important;
    }

    .schedule-matrix-table th .th-time-sub {
        font-size: 0.60rem !important;
    }

    .schedule-matrix-table td .badge-pill {
        font-size: 0.52rem !important;
        padding: 2px 3px !important;
        border-radius: 4px !important;
    }

    .schedule-matrix-table .schedule-time {
        font-size: 0.62rem !important;
    }
}

/* --------------------------------------------------------------------------
   28. YENİ MENÜ & MODÜL BİLEŞENLERİ (SIDE PANEL, EXCEL FILTER, ANKET, SAYAÇ)
   -------------------------------------------------------------------------- */
.side-panel-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 24px;
}

@media (max-width: 992px) {
    .side-panel-layout {
        grid-template-columns: 1fr;
    }
}

.side-panel-nav {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.side-panel-nav-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #f1f5f9;
}

.side-panel-nav-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.side-panel-nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    color: #475569;
    font-size: 0.90rem;
    font-weight: 500;
    background: #f8fafc;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.side-panel-nav-btn:hover {
    background: var(--pastel-bg);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.side-panel-nav-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
}

.side-panel-nav-btn .badge-pill {
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.side-panel-nav-btn.active .badge-pill {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Excel Tarzı Filtreleme Çubuğu */
.excel-filter-bar {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.excel-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.excel-filter-search-wrap {
    position: relative;
    min-width: 240px;
    flex: 1;
}

.excel-filter-search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
}

.excel-filter-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.88rem;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s;
}

.excel-filter-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 130, 138, 0.15);
}

.excel-filter-select {
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.88rem;
    color: #334155;
    background: #ffffff;
    outline: none;
    cursor: pointer;
}

.excel-filter-select:focus {
    border-color: var(--primary-color);
}

.excel-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Sayaç / İstatistik Bloğu */
.stat-counter-card {
    background: linear-gradient(135deg, var(--pastel-bg) 0%, #ffffff 100%);
    border: 1.5px solid var(--primary-color);
    border-radius: 12px;
    padding: 22px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-counter-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--primary-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.stat-counter-num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-counter-label {
    color: #475569;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Mini Anket Bileşeni */
.mini-survey-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin: 28px 0;
}

.mini-survey-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.survey-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.92rem;
    color: #334155;
}

.survey-option-label:hover {
    border-color: var(--primary-color);
    background: var(--pastel-bg);
}

.survey-submit-btn {
    margin-top: 10px;
    padding: 10px 22px;
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.survey-submit-btn:hover {
    background: var(--primary-hover);
}

/* Yıldızlı Puanlama */
.rating-stars {
    display: flex;
    gap: 8px;
    font-size: 1.6rem;
    color: #cbd5e1;
    cursor: pointer;
    margin: 10px 0;
}

.rating-star.active,
.rating-star:hover {
    color: #f59e0b;
}

/* Yorum Kartı */
.comment-item-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}

.comment-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.comment-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pastel-bg);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.comment-author-name {
    display: block;
    font-size: 0.95rem;
    color: #1e293b;
}

.comment-date {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
}

.comment-text {
    font-size: 0.90rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* Geri Dön Butonu */
.back-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.90rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 18px;
    text-decoration: none !important;
}

.back-nav-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Ana Sayfa Özel Kartlar Gridi */
.home-featured-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 12px 0;
}

@media (max-width: 768px) {
    .home-featured-action-grid {
        grid-template-columns: 1fr;
    }
}

.home-featured-shortcuts-section {
    background-color: var(--body-bg, #f8fafc);
    transition: background-color 0.3s ease;
}

body.dark-mode .home-featured-shortcuts-section {
    background-color: var(--body-bg, #0f172a) !important;
}

.home-featured-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.3s, color 0.3s;
    text-decoration: none !important;
    color: inherit;
    text-align: left;
}

.home-featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.home-featured-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.home-featured-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-featured-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--pastel-bg, #e0f2fe);
    color: var(--primary-color, #0284c7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.home-featured-title {
    margin: 0;
    font-size: 0.98rem;
    color: #1e293b;
    font-weight: 700;
    line-height: 1.25;
    transition: color 0.3s ease;
}

.home-featured-card p {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
    width: 100%; /* Cardın en başından en sonuna kadar kullanılır */
    transition: color 0.3s ease;
}

/* Karanlık Mod Uyumları - Hem aydınlık hem karanlık modda genel temaya kusursuz uyum */
body.dark-mode .home-featured-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .home-featured-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .home-featured-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .home-featured-title {
    color: #f1f5f9 !important;
}

body.dark-mode .home-featured-card p {
    color: #94a3b8 !important;
}

/* ==========================================================================
   KARANLIK MOD: TÜM KARTLAR, BAŞLIKLAR VE YAZILAR İÇİN TAM UYUM KURALLARI
   ========================================================================== */
/* 1. Hizmet Kartları (Service Cards) */
body.dark-mode .service-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .service-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .service-card h3 {
    color: #f8fafc !important;
}
body.dark-mode .service-card p {
    color: #cbd5e1 !important;
}
body.dark-mode .srv-icon {
    color: var(--primary-color) !important;
}

/* 2. Nöbetçi Eczaneler & Slide Elemanları */
body.dark-mode .duty-pharmacy-card,
body.dark-mode .standalone-pharmacy-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .pharma-slide-item,
body.dark-mode .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
body.dark-mode .pharma-slide-title,
body.dark-mode .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-title {
    color: #f8fafc !important;
}
body.dark-mode .pharma-slide-info-line,
body.dark-mode .pharma-slide-info-line span,
body.dark-mode .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-info-line {
    color: #cbd5e1 !important;
}
body.dark-mode .pharma-slide-phone,
body.dark-mode .duty-pharmacy-card.standalone-pharmacy-card .pharma-slide-phone {
    color: #93c5fd !important;
}
body.dark-mode .pharma-card-header {
    border-bottom-color: #334155 !important;
}
body.dark-mode .pharma-num-nav-btn {
    background: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}
body.dark-mode .pharma-num-nav-btn.active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}
body.dark-mode .btn-pharma-map {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
body.dark-mode .btn-pharma-map:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* 3. Haber / Duyuru Feed Kartları & Başlıkları */
body.dark-mode .feed-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .card-headline {
    color: #f8fafc !important;
}
body.dark-mode .feed-card:hover .card-headline {
    color: var(--primary-color) !important;
}
body.dark-mode .card-excerpt-3lines {
    color: #cbd5e1 !important;
}
body.dark-mode .card-meta,
body.dark-mode .card-meta .meta-date {
    color: #94a3b8 !important;
}
body.dark-mode .mobile-cat-badge {
    color: var(--primary-color) !important;
}

/* 4. Sağlık Rehberi Makaleleri */
body.dark-mode .article-row-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .art-card-title {
    color: #f8fafc !important;
}
body.dark-mode .article-row-card:hover .art-card-title {
    color: var(--primary-color) !important;
}
body.dark-mode .art-meta-item {
    color: #94a3b8 !important;
}

/* 5. Acil ve İlk Yardım Kartları (Kullanıcı İsteği: Temalar ve Dark Mode Bu Kartlara Asla Uygulanmaz, Özgün Canlı Renkleri Korunur) */
.emergency-standalone-card,
body.dark-mode .emergency-standalone-card {
    background-color: #b71c1c !important;
    border: 2px solid #991b1b !important;
    color: #ffffff !important;
}
.emergency-header-row,
body.dark-mode .emergency-header-row {
    background-color: #991b1b !important;
    color: #ffffff !important;
}
.emergency-card-body,
body.dark-mode .emergency-card-body {
    background-color: #b71c1c !important;
    color: #ffffff !important;
}
.emergency-card-body .instruction-heading,
body.dark-mode .emergency-card-body .instruction-heading {
    color: #fee2e2 !important;
}
.emergency-steps-list,
body.dark-mode .emergency-steps-list,
.emergency-steps-list li,
body.dark-mode .emergency-steps-list li {
    color: #fef2f2 !important;
}
.emergency-steps-list li strong,
body.dark-mode .emergency-steps-list li strong {
    color: #ffffff !important;
}

.first-aid-standalone-card,
body.dark-mode .first-aid-standalone-card {
    background-color: #047857 !important;
    border: 2px solid #065f46 !important;
    color: #ffffff !important;
}
.first-aid-header-row,
body.dark-mode .first-aid-header-row {
    background-color: #065f46 !important;
    color: #ffffff !important;
}
.first-aid-card-body,
body.dark-mode .first-aid-card-body {
    background-color: #047857 !important;
    color: #ffffff !important;
}
.first-aid-card-body .instruction-heading,
body.dark-mode .first-aid-card-body .instruction-heading {
    color: #d1fae5 !important;
}
.first-aid-steps-list,
body.dark-mode .first-aid-steps-list,
.first-aid-steps-list li,
body.dark-mode .first-aid-steps-list li {
    color: #ecfdf5 !important;
}
.first-aid-steps-list li strong,
body.dark-mode .first-aid-steps-list li strong {
    color: #ffffff !important;
}
body.dark-mode .instruction-item {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
body.dark-mode .instruction-item h5 {
    color: #f8fafc !important;
}
body.dark-mode .instruction-item p {
    color: #94a3b8 !important;
}
body.dark-mode .step-box-horizontal {
    background: #0f172a !important;
    border-color: #334155 !important;
}
body.dark-mode .step-box-horizontal p {
    color: #cbd5e1 !important;
}

/* 6. Çalışma Saatleri & Randevu Rehberi */
body.dark-mode .working-hours-card-wrap {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .schedule-list-standalone li {
    border-bottom-color: #334155 !important;
}
body.dark-mode .schedule-list-standalone li .day {
    color: #f1f5f9 !important;
}
body.dark-mode .working-hours-card-wrap span,
body.dark-mode .working-hours-card-wrap p {
    color: #cbd5e1 !important;
}
body.dark-mode .schedule-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* 7. Birimler (Unit Box) */
body.dark-mode .unit-box {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .unit-card-top-bar {
    border-bottom: none !important;
    background: transparent !important;
}
body.dark-mode .duo-staff-name {
    color: #f8fafc !important;
}
body.dark-mode .duo-doctor-item {
    border-bottom-color: #334155 !important;
}
body.dark-mode .duo-shift-hours {
    color: #94a3b8 !important;
}

/* 8. Çerez İzin Paneli & Duyuru Popupları */
body.dark-mode #cookie-consent-banner,
body.dark-mode .cookie-banner {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .cookie-text h4 {
    color: #f8fafc !important;
}
body.dark-mode .cookie-text p {
    color: #cbd5e1 !important;
}
body.dark-mode .btn-cookie-reject {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
body.dark-mode #opening-announcement-popup .news-popup-box,
body.dark-mode #news-popup-overlay .news-popup-box,
body.dark-mode .news-popup-box {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}
body.dark-mode .popup-title {
    color: #f8fafc !important;
}
body.dark-mode .popup-desc {
    color: #cbd5e1 !important;
}
body.dark-mode .popup-close-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

/* 9. Genel Bölüm Zeminleri ve Açıklamaları */
body.dark-mode .section-title {
    color: #f8fafc !important;
}
body.dark-mode .section-desc {
    color: #94a3b8 !important;
}
body.dark-mode .bg-white {
    background-color: #1e293b !important;
}
body.dark-mode .bg-pastel {
    background-color: #0f172a !important;
}
body.dark-mode .home-featured-shortcuts-section {
    background-color: #0f172a !important;
}

/* 10. Mobil FAB ve Balon Kartı Yazıları */
body.dark-mode .fab-card-title {
    color: #f8fafc !important;
}
body.dark-mode .fab-card-desc {
    color: #cbd5e1 !important;
}
body.dark-mode .fab-action-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* ==========================================================================
   MOBİL ÖZEL BİLEŞENLER (APP-LIKE DESIGN, STATUS BAR, VIRTUAL SCROLL & BOTTOM BAR)
   ========================================================================== */

@media (max-width: 767px) {
    /* Mobilde doğal sayfa kaydırmasını koru ve dokunmatik desteği sağla */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100% !important;
        position: relative;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body {
        padding-top: var(--header-actual-height, 140px) !important; /* Duyurular-bar + Kurumsal-bar + Mapping-bar toplam payı */
        padding-bottom: 0 !important; /* Footer altındaki boşluk sıfırlandı: Site footer ile sonlanır */
        margin-bottom: 0 !important;
    }

    #app-view-container, main, #main-content, .site-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .main-footer-area {
        margin-bottom: 0 !important;
    }

    .footer-bottom-bar {
        padding-bottom: 65px !important; /* 50px sabit alt barın arkasında kalmaması için iç padding */
    }

    #app-view-container {
        height: auto !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }

    /* Mobilde Soldaki İki Yapışkan Buton Dock'u: Geri Butonu ve Tema Butonu */
    .sticky-action-dock {
        right: auto !important;
        left: 0 !important;
        top: calc(var(--header-actual-height, 142px) + 10px);
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        z-index: 99995 !important;
        user-select: none;
        touch-action: none;
    }

    .mobile-sticky-back-btn {
        display: flex !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 9995 !important;
        background: var(--primary-color) !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        border-left: none !important;
        border-radius: 0 6px 6px 0 !important;
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        font-size: 0.82rem !important;
        box-shadow: 2px 3px 8px rgba(0,0,0,0.22) !important;
        cursor: grab !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.15s, background-color 0.2s !important;
    }

    .mobile-sticky-back-btn:active {
        transform: scale(0.92);
    }

    .mobile-back-tooltip {
        position: absolute;
        left: calc(100% + 6px);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        background: #0f172a;
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 5px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        border: 1px solid rgba(255, 255, 255, 0.15);
        z-index: 9996;
    }

    .mobile-sticky-back-btn:hover .mobile-back-tooltip,
    .mobile-sticky-back-btn:focus .mobile-back-tooltip {
        opacity: 1;
        transform: translateY(-50%) translateX(0px);
    }

    /* Mobilde Tema Butonu */
    .theme-floating-btn {
        right: auto !important;
        left: auto !important;
        top: auto !important;
        position: relative !important;
        z-index: 9995 !important;
        transform: none !important;
        border-radius: 0 6px 6px 0 !important;
        padding: 0 !important;
        font-size: 0.82rem !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        border-left: none !important;
        box-shadow: 2px 3px 8px rgba(0,0,0,0.22) !important;
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: grab !important;
        box-sizing: border-box !important;
    }

    .theme-floating-tooltip {
        left: calc(100% + 6px) !important;
        right: auto !important;
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* 2. DİNAMİK SCROLLBAR */
/* ARKA PLAN TAMAMEN ŞEFFAF - IŞIK SIZMASI ENGELLENMİŞTİR */
/* HAREKET ALANI: HEADER'IN (MAPPING-BAR DAHİL) HEMEN ALTI İLE BOTTOM-BAR'IN HEMEN ÜSTÜ ARASI */
#custom-scrollbar {
    position: fixed;
    top: var(--header-actual-height, 220px) !important;
    bottom: 0;
    right: 0;
    width: 3px !important;
    height: auto !important;
    background-color: transparent !important;
    z-index: 99999;
    user-select: none;
    touch-action: none;
}

body.dark-mode #custom-scrollbar {
    background-color: transparent !important;
}

@media (max-width: 767px) {
    #custom-scrollbar {
        top: var(--header-actual-height, 140px) !important;
        bottom: 50px !important;
        height: auto !important;
    }
}

/* DİNAMİK TRACKBAR (THUMB): SABİT 30PX YÜKSEKLİK, 40PX GENİŞLİK, TEMA RENGİ */
#custom-thumb {
    position: absolute;
    top: 0;
    right: 0;

    /* Sabit 30px yükseklik (içerik uzunluğuna göre ASLA değişmez), 40px genişlik */
    width: 40px;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    min-width: 40px;
    max-width: 260px;

    background-color: var(--primary-color, #00828a) !important;
    color: #ffffff;
    border-radius: 12px 0 0 12px;
    cursor: grab;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 6px;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.25);

    /* Boyut değişimlerinin pürüzsüz animasyonu */
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.2s ease,
        box-shadow 0.2s ease;
    touch-action: none;
}

/* İkon Taşıyıcı */
.scroll-icon-container {
    display: flex;
    gap: 3px;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.scroll-icon-line {
    width: 2px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 1px;
}

/* Dinamik Başlık Metni Alanı (Normalde Gizli) */
.thumb-caption-text {
    position: absolute;
    opacity: 0;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    line-height: 1.25;
    width: calc(100% - 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s ease;
}

#custom-thumb.dragging {
    cursor: grabbing !important;
}

/* HOVER VEYA SÜRÜKLEME/DOKUNMA ANINDA 50PX / MAX-CONTENT GENİŞLİĞE ÇIKAR, YÜKSEKLİK SABİT 30PX KALIR */
#custom-scrollbar:hover #custom-thumb,
#custom-thumb:hover,
#custom-thumb.dragging {
    width: max-content;
    min-width: 50px;
    height: 30px !important;
    background-color: var(--primary-color, #00828a) !important;
    padding: 0 10px;
    box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.45);
}

/* Baloncuk açıldığında ikonu gizle, metni göster */
#custom-scrollbar:hover .scroll-icon-container,
#custom-thumb:hover .scroll-icon-container,
#custom-thumb.dragging .scroll-icon-container {
    opacity: 0;
}

#custom-scrollbar:hover .thumb-caption-text,
#custom-thumb:hover .thumb-caption-text,
#custom-thumb.dragging .thumb-caption-text {
    position: relative;
    opacity: 1;
}

/* 2-B. MOBİL MENÜ FULLSCREEN */
.mobile-menu-fullscreen {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto; /* Doğal menü içi kaydırma */
    -webkit-overflow-scrolling: touch;
}

/* 3. 50PX SABİT SİYAH ALT BAR (id: bottom-bar / .mobile-bottom-bar) */
#bottom-bar,
.mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #090d16;
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    z-index: 9995;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.35);
    border-top: 1px solid #1e293b;
}

@media (max-width: 767px) {
    #bottom-bar,
    .mobile-bottom-bar {
        display: flex;
    }
}

.bottom-bar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    transform: translateY(-4px); /* Butonları bar yüksekliğini değiştirmeden biraz yukarı taşır */
}

.bottom-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    transform: translateY(-4px); /* Hızlı okları da aynı hizada yukarı taşır */
}

.bottom-bar-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: 0;
    border-radius: 0;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease, color 0.2s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.bottom-bar-btn:focus,
.bottom-bar-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

.bottom-bar-btn:active {
    transform: scale(0.85);
}

.bottom-bar-btn:hover {
    transform: translateY(-2px) scale(1.1);
    filter: drop-shadow(0 2px 8px currentColor);
}

/* Canlı ve Şık İkon Renkleri (Tema Uyumlu & Canlı Pastel/Vivid Renk Paleti) */
/* 1. Randevu: Canlı Cyan / Turkuaz */
.bottom-bar-btn:nth-child(1) {
    color: #06b6d4; /* Vibrant Cyan */
}
.bottom-bar-btn:nth-child(1):hover,
.bottom-bar-btn:nth-child(1).active {
    color: #22d3ee;
}

/* 2. Nöbetçi Eczaneler: Canlı Zümrüt Yeşili */
.bottom-bar-btn:nth-child(2) {
    color: #10b981; /* Emerald Green */
}
.bottom-bar-btn:nth-child(2):hover,
.bottom-bar-btn:nth-child(2).active {
    color: #34d399;
}

/* 3. İletişim Telefon: Canlı Amber / Altın Sarısı */
.bottom-bar-btn:nth-child(3) {
    color: #f59e0b; /* Amber Gold */
}
.bottom-bar-btn:nth-child(3):hover,
.bottom-bar-btn:nth-child(3).active {
    color: #fbbf24;
}

/* 4. İletişim / Mesaj Formu: Canlı Menekşe / Mor */
.bottom-bar-btn:nth-child(4) {
    color: #8b5cf6; /* Violet Purple */
}
.bottom-bar-btn:nth-child(4):hover,
.bottom-bar-btn:nth-child(4).active {
    color: #a78bfa;
}

/* 5. Canlı Harita / Navigasyon: Canlı Mavi / Rose */
.bottom-bar-btn:nth-child(5) {
    color: #3b82f6; /* Electric Blue */
}
.bottom-bar-btn:nth-child(5):hover,
.bottom-bar-btn:nth-child(5).active {
    color: #60a5fa;
}

.bottom-bar-btn.btn-emergency-icon {
    color: #ef4444 !important;
}

/* 15px'lik Yuvarlak Hızlı Yukarı / Aşağı Geçiş Butonları */
.bottom-quick-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-arrow-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s, transform 0.15s, background-color 0.2s;
}

.quick-arrow-btn:hover,
.quick-arrow-btn:active {
    opacity: 0.95;
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.quick-arrow-btn.hidden-arrow {
    opacity: 0.12;
    pointer-events: none;
}

/* Header Sağ Eylemler & Aydınlık / Karanlık Mod Hızlı Butonu */
.header-right-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    z-index: 10;
}

.header-mode-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.header-mode-btn:hover {
    background: var(--pastel-bg, #f0fdfa);
    border-color: var(--primary-color, #00828a);
    color: var(--primary-color, #00828a);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

body.dark-mode .header-mode-btn {
    background: #1e293b;
    border-color: #334155;
    color: #f59e0b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.dark-mode .header-mode-btn:hover {
    background: #334155;
    border-color: #f59e0b;
    color: #fbbf24;
}

@media (max-width: 767px) {
    .header-mode-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        border-radius: 10px;
    }
}

/* Tema Çekmecesinde Karanlık / Aydınlık Mod Karesel Check Butonları */
.mode-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

body.dark-mode .mode-toggle-group {
    background: transparent;
}

.btn-mode-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.btn-mode-toggle i.mode-main-icon {
    font-size: 1.5rem;
    color: #64748b;
    transition: transform 0.2s ease, color 0.2s ease;
}

.btn-mode-toggle .mode-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #334155;
    transition: color 0.2s ease;
}

.btn-mode-toggle.active {
    border-color: var(--primary-color);
    background: var(--pastel-bg);
    box-shadow: 0 4px 14px rgba(0, 130, 138, 0.18);
}

.btn-mode-toggle.active i.mode-main-icon {
    color: var(--primary-color);
    transform: scale(1.15);
}

.btn-mode-toggle.active .mode-label {
    color: var(--primary-color);
}

body.dark-mode .btn-mode-toggle {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .btn-mode-toggle i.mode-main-icon {
    color: #94a3b8 !important;
}

body.dark-mode .btn-mode-toggle .mode-label {
    color: #cbd5e1 !important;
}

body.dark-mode .btn-mode-toggle:hover {
    background: #162032 !important;
    border-color: #64748b !important;
}

body.dark-mode .btn-mode-toggle.active {
    background: rgba(0, 130, 138, 0.2) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .btn-mode-toggle.active i.mode-main-icon {
    color: var(--primary-color) !important;
}

body.dark-mode .btn-mode-toggle.active .mode-label {
    color: #ffffff !important;
}

/* ==========================================================================
   HİZMET VE LİSTE SAYFASI DOKUNMATİK DESTEĞİ STİLLERİ
   ========================================================================== */
.btn-service-touch-toggle {
    background: #ffffff;
    color: #1e293b;
    border: 1.5px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}

.btn-service-touch-toggle:hover {
    background: #f1f5f9;
    border-color: #10b981;
    color: #10b981;
}

.btn-service-touch-toggle.active {
    background: #10b981 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.btn-service-touch-toggle.active i {
    animation: pulseTouchIcon 1.5s infinite;
}

/* Liste Sayfası Dokunmatik Butonu */
.listpage-touch-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.listpage-touch-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: #f0fdf4;
}

.listpage-touch-btn.active {
    background: #10b981;
    border-color: #059669;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.listpage-touch-btn.active i {
    animation: pulseTouchIcon 1.5s infinite;
}

@keyframes pulseTouchIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Dokunmatik Bilgilendirme Tostu */
.service-touch-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #1e293b;
    color: #ffffff;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 0.88rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 100000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    max-width: 380px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.service-touch-toast.show {
    opacity: 1;
    transform: translateY(0);
}

body.dark-mode .btn-service-touch-toggle {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-mode .btn-service-touch-toggle:hover {
    border-color: #10b981;
    color: #10b981;
}

body.dark-mode .btn-service-touch-toggle.active {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

body.dark-mode .listpage-touch-btn {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-mode .listpage-touch-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: #132238;
}

body.dark-mode .listpage-touch-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

body.service-touch-active,
body.listpage-touch-active,
body.touch-emulation-mode,
html.touch-emulation-mode {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.touch-emulation-mode.touch-dragging,
body.service-touch-active.touch-dragging {
    cursor: grabbing !important;
}

/* --------------------------------------------------------------------------
   SECTION BAŞLIK ÜSTÜ ETİKETLERİN KALDIRILMASI (SECTION BADGE REMOVAL)
   -------------------------------------------------------------------------- */
.section-badge,
.section-head .section-badge,
.section-badge-pill {
    display: none !important;
}