@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Bricolage+Grotesque:wght@400;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

/* =========================================================================
   MEDYA DENÄ°ZLÄ° - ANA CSS (Global Box Sizing ile)
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr !important; gap: 40px; text-align: center; }
    .footer-links { text-align: center; }
    .site-footer p { text-align: center; }
    .container-wide { padding: 0 15px !important; }
}

.footer-links a { display: block; padding: 5px 0; color: var(--text-muted); text-decoration: none; margin-bottom: 8px; font-size: 15px; font-family: 'Outfit', sans-serif; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--gold); }

:root {
    --navy: #0B1C3D;
    /* Ultra Deep Navy */
    --navy-light: #162a50;
    --gold: #C5A059;
    /* Sophisticated Gold */
    --gold-light: #d4c19d;
    --gold-gradient: linear-gradient(135deg, #DFB973 0%, #C5A059 100%);
    --navy-gradient: linear-gradient(135deg, #0b1c3d 0%, #162a50 100%);

    --white: #ffffff;
    --off-white: #f8fafc;
    --gray-50: #f9fafb;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-800: #1e293b;

    --text-main: #0f172a;
    --text-muted: #475569;
    --border: #f1f5f9;

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 8px;
    --container: 1360px;

    --shadow-soft: 0 4px 20px rgba(11, 28, 61, 0.04);
    --shadow-premium: 0 20px 40px rgba(11, 28, 61, 0.06);
    --shadow-float: 0 25px 50px -12px rgba(11, 28, 61, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: #f4f7fb;
    background-image: radial-gradient(circle at 100% 0%, rgba(197, 160, 89, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(11, 28, 61, 0.04) 0%, transparent 35%);
    background-attachment: fixed;
    color: var(--text-main);
    line-height: 1.7;
    letter-spacing: -0.01em;
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
}

html {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* TaÅŸmayı Önleyici Kesin Küresel Kurallar */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

.standings-table {
    display: block;
    overflow-x: auto;
    width: 100%;
}

/* --- YARDIMCI SINIFLAR --- */
.container-wide {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

/* Header ve top bar icin flex */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-info .container-wide {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breaking-flex {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: flex-start;
}

.text-gold {
    color: var(--gold);
}

.text-navy {
    color: var(--navy);
}

/* --- ÃœST BİLGİ BANDI --- */
.top-info {
    background: var(--navy);
    color: var(--white);
    padding: 8px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.live-stats {
    display: flex;
    align-items: center;
    gap: 25px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.live-stats span {
    color: var(--gold);
    font-weight: 700;
}

/* --- SON DAKÄ°KA BANDI --- */
.breaking-news {
    background: var(--white);
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.breaking-flex {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: flex-start;
}

.breaking-label {
    background: var(--gold-gradient);
    color: white;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(197, 160, 89, 0.2);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.ticker-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    /* Hafif kenar kararması ile yazıların içeri kaymasını pürüzsüzleÅŸtirir */
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
    mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
}

.breaking-ticker {
    display: inline-flex;
    gap: 40px;
    animation: ticker 35s linear infinite;
    white-space: nowrap;
    width: max-content;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.breaking-ticker span {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
}

.breaking-ticker span::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    margin-right: 14px;
    vertical-align: middle;
}

/* --- HEADER & LOGO --- */
header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    position: relative;
    width: 100%;
    z-index: 9999;
    padding: 18px 0;
    transition: all 0.4s ease;
}

/* JS Sticky Header Sınıfı */
header.sticky-active {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    animation: slideDownHeader 0.5s ease forwards;
}

@keyframes slideDownHeader {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gold-gradient);
    box-shadow: 0 2px 10px rgba(197, 160, 89, 0.4);
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.logo-box {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    perspective: 1000px;
    padding: 5px 0;
}

/* 3D LOGO EFEKTÄ° VE ANÄ°MASYONU */
.logo-img-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: gentlePulse 4s ease-in-out infinite;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 15px rgba(11, 28, 61, 0.15)) drop-shadow(0 4px 12px rgba(197, 160, 89, 0.5));
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover durumunda 360 derece premium dönüÅŸ ve parlama */
.logo-box:hover .logo-img {
    transform: rotateY(360deg) scale(1.15);
    filter:
        drop-shadow(0 0 20px rgba(197, 160, 89, 0.8)) drop-shadow(0 25px 30px rgba(11, 28, 61, 0.3));
}

@keyframes gentlePulse {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

.ultra-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 900;
    color: var(--navy);
      letter-spacing: normal;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ultra-logo::before {
    content: '';
    width: 6px;
    height: 26px;
    background: var(--gold);
    display: inline-block;
    border-radius: 4px;
    transform: skewX(-15deg);
}

.ultra-logo span {
    /* Renk tamamen ÅŸeffaf olmak yerine hafif, ıÅŸıltılı bir dolgu kazandı */
    color: rgba(212, 175, 55, 0.4);
    -webkit-text-stroke: 1px var(--gold);
    /* Çizgi biraz inceltildi, daha zarif yapıldı */
    font-weight: 900;
    position: relative;
    letter-spacing: -0.5px;
    /* Gölge ve modernlik korunuyor */
    text-shadow: 2px 2px 0px rgba(11, 28, 61, 0.4);
    transition: all 0.4s ease;
}

/* Nefes alan parlama animasyonu / Glow Effect */
@keyframes neonPulse {
    0% {
        filter: drop-shadow(0 0 2px var(--gold));
        opacity: 0.8;
    }

    50% {
        filter: drop-shadow(0 0 8px var(--gold));
        opacity: 1;
    }

    100% {
        filter: drop-shadow(0 0 2px var(--gold));
        opacity: 0.8;
    }
}

.ultra-logo span::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    /* Parlamayı uyguladığımız arka planı tamamen içsiz, sadece çizgi ile animasyonlu tutuyoruz */
    color: transparent;
    -webkit-text-stroke: 1px var(--gold);
    animation: neonPulse 2s infinite ease-in-out;
    z-index: -1;
}

.ultra-logo:hover span {
    transform: translateY(-2px);
    text-shadow: 4px 4px 0px rgba(11, 28, 61, 0.2);
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    align-items: center;
    justify-content: flex-end;
}

/* --- NAV AKSÄ°YON BUTONLARI (SEARCH & AI) --- */
.nav-action-item {
    display: flex;
    align-items: center;
}

/* Search İkonu ile Hizmetlerimiz Sekmesini Ayıran Dikey Cizgi */
.nav-action-item:first-of-type {
    margin-left: 12px;
    padding-left: 20px;
    border-left: 1px solid rgba(11, 28, 61, 0.1);
}

.search-btn {
    background: transparent;
    border: none;
    color: var(--navy);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-btn:hover {
    background: rgba(11, 28, 61, 0.05);
    color: var(--gold);
    transform: scale(1.1) rotate(5deg);
}

.ai-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--navy), #1A365D);
    color: white;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 30px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(11, 28, 61, 0.15);
    margin-left: 10px;
    animation: aiPulseGlow 2.5s infinite;
}

@keyframes aiPulseGlow {
    0% {
        box-shadow: 0 4px 15px rgba(11, 28, 61, 0.15), 0 0 0 0 rgba(197, 160, 89, 0.5);
    }

    70% {
        box-shadow: 0 4px 15px rgba(11, 28, 61, 0.15), 0 0 0 10px rgba(197, 160, 89, 0);
    }

    100% {
        box-shadow: 0 4px 15px rgba(11, 28, 61, 0.15), 0 0 0 0 rgba(197, 160, 89, 0);
    }
}

.ai-button span {
    position: relative;
    z-index: 2;
}

.ai-button svg {
    position: relative;
    z-index: 2;
    color: var(--gold);
}

.ai-button .ai-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.4), transparent);
    transform: skewX(-20deg);
    transition: all 0.5s ease;
    z-index: 1;
}

.ai-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(197, 160, 89, 0.35);
    border: 1px solid rgba(197, 160, 89, 0.3);
}

.ai-button:hover .ai-glow {
    animation: shine 1.5s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

.ultra-menu {
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--text-main);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ultra-menu::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold-gradient);
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 2px;
}

.ultra-menu:hover::after {
    width: 100%;
}

.ultra-menu:hover {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.3);
}

.menu-icon {
    stroke-width: 2.5px;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ultra-menu:hover .menu-icon {
    animation: iconBounce 0.5s ease;
    color: var(--navy);
}

.ultra-menu.text-gold:hover .menu-icon {
    color: var(--gold);
}

@keyframes iconBounce {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-4px) scale(1.1);
    }

    70% {
        transform: translateY(2px) scale(0.95);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Menü asimetrik modern nokta efekti */
.ultra-menu::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0);
    left: -12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    transition: transform 0.3s ease;
}

.ultra-menu::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--navy);
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ultra-menu:hover {
    color: var(--navy);
    transform: translateX(4px);
}

.ultra-menu:hover::before {
    transform: translateY(-50%) scale(1);
}

.ultra-menu:hover::after {
    width: 100%;
}

/* --- HERO BÖLÜMÜ --- */
.hero-grid {
    max-width: var(--container);
    margin: 40px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 24px;
}

.slider-main {
    position: relative;
    height: 620px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--navy);
    box-shadow: var(--shadow-premium);
    cursor: pointer;
}

/* Hero slayt - JS display:flex/none ile kontrol eder */
.hero-slide {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
    background-size: cover !important;
    background-position: center !important;
    cursor: pointer;
}

.hero-slide:first-child {
    display: flex;
}

.hero-content {
    padding: 40px 50px;
    color: white;
    position: relative;
    z-index: 2;
    background: linear-gradient(to top, rgba(11,28,61,0.95) 0%, rgba(11,28,61,0.5) 60%, transparent 100%);
    padding-top: 120px;
}

.hero-content h2 {
    font-size: clamp(20px, 2.5vw, 34px);
    font-weight: 800;
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
    margin: 10px 0 8px;
    color: #fff;
}

.hero-content p {
    font-size: 15px;
    opacity: 0.85;
    line-height: 1.6;
    margin: 0;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    visibility: hidden;
}

.carousel-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: transform 1.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.slider-main:hover .carousel-item.active .slider-img {
    transform: scale(1.04);
}

.slider-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 120px 60px 60px;
    background: linear-gradient(to top, rgba(11, 28, 61, 0.95) 0%, rgba(11, 28, 61, 0.7) 40%, rgba(11, 28, 61, 0.2) 80%, transparent 100%);
    color: white;
    z-index: 2;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-item.active .badge {
    animation: slideUpFade 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s;
    opacity: 0;
}

.carousel-item.active .slider-title {
    animation: slideUpFade 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s;
    opacity: 0;
}

.carousel-item.active p {
    animation: slideUpFade 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.6s;
    opacity: 0;
}

.slider-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.slider-btn {
    background: rgba(11, 28, 61, 0.6);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.slider-btn:hover {
    background: var(--gold);
    color: var(--navy);
}

.slider-indicators {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.slider-indicators .dot {
    width: 30px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.slider-indicators .dot.active,
.slider-indicators .dot:hover {
    background: var(--gold);
    width: 50px;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
}

.badge {
    background: var(--gold-gradient);
    color: white;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(197, 160, 89, 0.3);
}

.slider-title {
    font-family: 'Outfit', sans-serif;
    font-size: 52px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.slider-desc {
    font-size: 18px;
    max-width: 80%;
    opacity: 0.9;
    font-weight: 300;
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.side-news {
    flex: 1;
    background-color: var(--white);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.side-news:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float);
    border-color: rgba(197, 160, 89, 0.3);
}

.side-news h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 800;
    z-index: 2;
    line-height: 1.25;
    color: inherit;
    letter-spacing: -0.5px;
}

/* Kategori Arka Planlı Kartlar */
.side-news.img-bg {
    color: white;
    border: none;
}

.side-news.img-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 28, 61, 0.95), rgba(11, 28, 61, 0.2));
    z-index: 1;
}

.side-news.img-bg h3,
.side-news.img-bg .badge {
    position: relative;
    z-index: 2;
}

.side-news.img-bg h3 {
    color: white;
}

.side-news.solid-bg {
    background: var(--navy);
    color: white;
}

.side-news.solid-bg h3 {
    color: white;
}

/* --- BÖLÃœM BAŞLIKLARI --- */
.section-header {
    max-width: var(--container);
    margin: 100px auto 50px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 24px;
    width: 60px;
    height: 3px;
    background: var(--gold);
}

.section-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: var(--navy);
    letter-spacing: normal;
}

.section-header h2 span {
    color: var(--gold);
    font-style: italic;
    font-weight: 600;
}

.view-all {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: 0.3s;
}

.view-all:hover {
    color: var(--gold);
}

/* --- HABER KARTLARI --- */
.content-grid {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.news-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.4s ease;
    box-shadow: var(--shadow-soft);
}

.news-card:hover {
    box-shadow: var(--shadow-premium);
    transform: translateY(-5px);
}

.news-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-img {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    background: var(--gray-100);
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

.news-card .badge {
    margin-bottom: 16px;
}

.news-card h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--navy);
    letter-spacing: normal;
    transition: color 0.3s ease;
}

.news-card:hover h4 {
    color: var(--gold);
}

/* --- HÄ°ZMETLERÄ°MÄ°Z --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.service-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    box-shadow: var(--shadow-premium);
    transform: translateY(-5px);
    border-color: rgba(197, 160, 89, 0.5);
}

.service-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.service-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.service-card p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Premium Hizmet Kartı (Reklam & AI Asistan) */
.premium-service {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--navy), #1a365d);
    color: white;
    border: 1px solid rgba(197, 160, 89, 0.4);
    position: relative;
    overflow: hidden;
}

.premium-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(197, 160, 89, 0.2), transparent 70%);
    pointer-events: none;
}

.premium-service h3 {
    color: var(--gold);
}

.premium-service p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
}

.service-btn {
    display: inline-block;
    background: var(--gold-gradient);
    color: white;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 15px;
    align-self: flex-start;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.2);
}

.service-btn:hover {
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.5);
    transform: translateY(-2px);
    color: white;
}

.news-card p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

/* --- EKONOMİ ÅžERİDİ (PREMIUM) --- */
.economy-strip {
    background: var(--white);
    padding: 80px 0;
    margin: 100px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.strip-item {
    padding: 0 24px;
    border-left: 1px solid var(--border);
    transition: 0.3s;
}

.strip-item:first-child {
    border-left: none;
}

.strip-item:hover {
    transform: translateX(5px);
}

.strip-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.strip-label::before {
    content: '';
    width: 16px;
    height: 2px;
    background: var(--gold);
}

.strip-item p {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: var(--navy);
}

/* --- PREMIUM ARAÇLAR (WIDGETS) --- */
.premium-widgets {
    background: var(--gray-50);
    padding: 40px 0 100px;
}

.main-layout {
    display: grid;
    grid-template-columns: 1fr 380px; /* Sol 1 birim, SaÄŸ 380px geniÅŸlik */
    gap: 40px;
}

/* @media 1024px kaldirildi - dosya sonunda 900px breakpoint gecer */


.main-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.md-right-panel {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.widget-wrapper {
    display: block;
}

/* Sadece genel widget kart stili bırakıldı. Sticky yığılma iptal edildi. */
.widget-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border);
    transition: 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Ekranda sabit kalsın denilen son widget için (veya genel kullanım): */
/* Eğer müşterimiz sadece son bileşenin yapışmasını isterse aşağıdaki kural aktif olur */
.md-right-panel .widget-wrapper:last-child .widget-card {
    position: sticky;
    top: 110px;
}

.widget-card:hover {
    box-shadow: var(--shadow-premium);
}

.widget-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
    position: relative;
}

.widget-card h3 i {
    font-style: normal;
    background: var(--gray-50);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* --- HAVA DURUMU (ÖZEL WIDGET) --- */
.weather-main-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy);
    color: white;
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.temp-big {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.city-name {
    font-size: 13px;
    opacity: 0.8;
}

.weather-status-box {
    text-align: right;
}

.status-text {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.status-detail {
    font-size: 11px;
    opacity: 0.6;
}

.weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.forecast-day {
    text-align: center;
    font-size: 13px;
    color: var(--navy);
}

.forecast-day b {
    font-size: 16px;
    display: block;
    margin-top: 5px;
}

/* --- NAMAZ VAKİTLERİ (ÖZEL WIDGET) --- */
.namaz-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.vakit-box {
    background: var(--gray-50);
    padding: 16px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.vakit-isim {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

.vakit-saat {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    font-family: 'Outfit', sans-serif;
}

.active-vakit {
    background: transparent;
    border: 1px solid var(--gold);
}

.active-vakit .vakit-isim,
.active-vakit .vakit-saat {
    color: var(--gold);
}

.next-vakit {
    background: var(--navy);
}

.next-vakit .vakit-isim,
.next-vakit .vakit-saat {
    color: white;
}

.pharmacy-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pharmacy-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    gap: 10px;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    border: 1px solid transparent;
    transition: all 0.3s;
}

.pharmacy-item:hover {
    background: var(--white);
    border-color: rgba(197, 160, 89, 0.4);
    box-shadow: var(--shadow-soft);
}

.pharmacy-info h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
}

.pharmacy-info p {
    font-size: 13px;
    color: var(--text-muted);
}

.pharmacy-call {
    background: var(--off-white);
    color: var(--navy);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border);
    transition: 0.3s;
}

.pharmacy-item:hover .pharmacy-call {
    background: var(--gold);
    color: white;
    border-color: var(--gold);
}

/* Puan Durumu */
.standings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.standings-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding-bottom: 10px;
    text-transform: uppercase;
}

.standings-table td {
    padding: 12px 8px;
    background: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.standings-table tr td:first-child {
    border-radius: 12px 0 0 12px;
}

.standings-table tr td:last-child {
    border-radius: 0 12px 12px 0;
}

.standings-table tr:hover td {
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.team-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.team-icon {
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Hava Durumu */
.weather-card {
    background: var(--navy-gradient);
    color: white;
    padding: 35px;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.weather-card::after {
    content: '☁';
    position: absolute;
    right: -20px;
    top: -30px;
    font-size: 150px;
    opacity: 0.05;
}

.weather-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.weather-temp {
    font-size: 48px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    margin-bottom: 5px;
}

/* --- VİDEO BÖLÃœMÃœ --- */
.video-section {
    background: var(--navy);
    color: white;
    padding: 120px 0;
}

.video-section .section-header {
    border-color: rgba(255, 255, 255, 0.1);
}

.video-section .section-header::after {
    background: var(--gold);
}

.video-section .section-header h2 {
    color: white;
}

.video-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 40px;
}

.video-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 520px;
    background: #000;
}

.video-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    transition: 0.8s;
}

.video-main:hover img {
    opacity: 0.7;
    transform: scale(1.03);
}

.play-trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.play-trigger::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: ripple 2s infinite;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.play-trigger svg {
    width: 28px;
    fill: white;
    margin-left: 5px;
    transition: 0.3s;
}

.video-main:hover .play-trigger {
    background: var(--gold);
    border-color: var(--gold);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-item {
    display: flex;
    gap: 24px;
    background: rgba(255, 255, 255, 0.03);
    padding: 24px;
    border-radius: var(--radius-md);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.4s;
    cursor: pointer;
}

.video-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(197, 160, 89, 0.3);
    transform: translateX(10px);
}

.video-thumb {
    width: 140px;
    height: 90px;
    border-radius: 12px;
    object-fit: cover;
    position: relative;
}


/* --- KÖŞE YAZARLARI --- */
.authors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-bottom: 100px;
}

.author-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    text-align: center;
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid var(--border);
}

.author-box:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-float);
    border-color: transparent;
}

.author-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 24px;
    object-fit: cover;
    padding: 6px;
    background: var(--white);
    border: 2px solid var(--border);
    transition: 0.4s;
}

.author-box:hover .author-avatar {
    border-color: var(--gold);
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2);
}

.author-box h5 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
}

/* --- MEKAN REHBERÄ° --- */
.places-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.place-card {
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.place-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover) !important;
}
.place-card img {
    transition: 0.6s ease;
}
.place-card:hover img {
    transform: scale(1.05);
}
@media (max-width: 992px) {
    .places-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .places-grid {
        grid-template-columns: 1fr;
    }
}

/* --- FOOTER --- */
footer {
    background: var(--navy);
    color: white;
    padding: 100px 0 40px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gold-gradient);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 80px;
}

.footer-brand .logo-brand {
    color: white;
}

.footer-text {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    max-width: 90%;
}

.footer-links h5 {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 15px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: white;
    padding-left: 5px;
}

.newsletter-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 32px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter-box input {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    color: white;
    margin-bottom: 16px;
    font-family: inherit;
    outline: none;
    transition: 0.3s;
}

.newsletter-box input:focus {
    border-color: var(--gold);
}

.newsletter-box button {
    width: 100%;
    padding: 16px;
    background: var(--gold);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
}

.newsletter-box button:hover {
    background: white;
    color: var(--navy);
}

/* --- STANDALONE DARK SECTION (AYRI AYRI BÖLÃœMLER İÇİN) --- */
.standalone-dark-section {
    background: var(--navy);
    border-radius: 28px;
    padding: 50px 40px;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0 10px 40px rgba(11, 28, 61, 0.2);
    color: white;
}

/* Karanlık Kapsayıcı İçindeki BaÅŸlıklar */
.standalone-dark-section .section-header h2 {
    color: white;
}

.standalone-dark-section .section-header::after {
    background: var(--gold-gradient);
}

.standalone-dark-section .section-header {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Karanlık Kapsayıcı İçindeki Haber Kartları */
.standalone-dark-section .news-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.standalone-dark-section .news-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(197, 160, 89, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.standalone-dark-section .news-card-content h4 {
    color: white;
}

.standalone-dark-section .news-card-content p {
    color: rgba(255, 255, 255, 0.75);
}

/* Karanlık Kapsayıcı İçindeki Hizmet Kartları */
.standalone-dark-section .service-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.standalone-dark-section .service-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(197, 160, 89, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.standalone-dark-section .service-card h3 {
    color: white;
}

.standalone-dark-section .premium-service {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(197, 160, 89, 0.4);
}

.standalone-dark-section .service-icon {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* İç butonların rengini gold'a zorlama */
.standalone-dark-section .service-btn {
    background: var(--gold);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
}

.standalone-dark-section .service-btn:hover {
    background: white;
    color: var(--navy);
}

/* --- STANDALONE GOLD SECTION (SADECE DİJİTAL HİZMETLER İÇİN) - PREMIUM EDİTİON --- */
.standalone-gold-section {
    background: linear-gradient(135deg, #d4b065 0%, #c49e4d 100%);
    /* Parlak ve lüks altın gradyanı */
    border-radius: 28px;
    padding: 60px 40px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 15px 50px rgba(196, 158, 77, 0.4);
    color: var(--navy);
    position: relative;
    overflow: hidden;
}

/* Arka plana ince desenli hava katmak için hafif radyal efekt */
.standalone-gold-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.standalone-gold-section .section-header,
.standalone-gold-section .services-grid {
    position: relative;
    z-index: 1;
}

.standalone-gold-section .section-header h2 {
    color: var(--navy);
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.standalone-gold-section .section-header h2 span {
    color: white;
    text-shadow: 1px 1px 3px rgba(11, 28, 61, 0.2);
}

.standalone-gold-section .section-header::after {
    background: var(--navy);
}

.standalone-gold-section .section-header {
    border-color: rgba(11, 28, 61, 0.15);
}

/* KARTLARIN PREMIUM GÖRÃœNÃœMÃœ VE ANİMASYONU */
.standalone-gold-section .service-card {
    background: rgba(255, 255, 255, 0.35);
    /* Hafif beyazımsı kırık cam görünümü */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--navy);
    border-radius: 20px;
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.standalone-gold-section .service-card:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(11, 28, 61, 0.2);
    box-shadow: 0 15px 35px rgba(11, 28, 61, 0.12);
    transform: translateY(-8px);
    /* Yukarı kalkma animasyonu */
}

/* YAZILARIN NET VE OKUNAKLI OLMASI */
.standalone-gold-section .service-card h3 {
    color: var(--navy);
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 15px;
}

.standalone-gold-section .service-card p {
    color: rgba(11, 28, 61, 0.85);
    /* Net okuma için %85 Navy */
    font-size: 15.5px;
    line-height: 1.6;
    font-weight: 500;
}

.standalone-gold-section .premium-service {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(11, 28, 61, 0.15);
    box-shadow: 0 8px 25px rgba(11, 28, 61, 0.05);
}

.standalone-gold-section .service-icon {
    background: rgba(11, 28, 61, 0.08);
    color: var(--navy);
    border-radius: 12px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.standalone-gold-section .service-card:hover .service-icon {
    transform: scale(1.1);
    /* İkonun büyüme animasyonu */
}

/* AI Butonu ve kart içi linkler Navy arka plan / Beyaz yazı */
.standalone-gold-section .service-btn {
    background: var(--navy);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(11, 28, 61, 0.25);
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 15px;
}

.standalone-gold-section .service-btn:hover {
    background: #061025;
    /* Hover'da daha koyu lacivert */
    color: #d4b065;
    /* Hover'da Gold yazı */
    box-shadow: 0 8px 25px rgba(11, 28, 61, 0.4);
    transform: translateY(-2px);
}

/* --- RESPONSIVE / MOBÄ°L UYUMLULUK --- */
@media (max-width: 1200px) {
    .container-wide {
        padding: 0 32px;
        flex-wrap: wrap;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .slider-main {
        height: 500px;
    }

    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    header nav ul {
        gap: 20px;
        flex-wrap: wrap;
    }
}

/* Tüm masaüstü ve geniÅŸ ekranlarda offcanvas yapısını gizle */
.offcanvas-menu,
.menu-overlay {
    display: none;
}

@media (max-width: 900px) {

    .widget-grid,
    .footer-grid,
    .authors-grid {
        grid-template-columns: 1fr;
    }

    .strip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .strip-item {
        border-left: none;
        padding: 0 10px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 20px;
    }

    .strip-item:last-child,
    .strip-item:nth-last-child(2) {
        border-bottom: none;
        padding-bottom: 0;
    }

    .slider-title {
        font-size: 32px;
    }

    /* Header Mobil Düzeni + Hamburger Menü */
    .header-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 15px 24px;
    }

    #site-header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .mobile-menu-btn {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        z-index: 1000;
    }

    .mobile-menu-btn span {
        display: block;
        width: 25px;
        height: 2px;
        background-color: var(--navy);
        margin: 5px 0;
        transition: 0.3s;
    }

    /* Off-Canvas Menü Karanlık Katmanı (Overlay) */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(11, 28, 61, 0.7);
        /* Lüks Navy transparan */
        backdrop-filter: blur(4px);
        z-index: 100000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
        display: block !important;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* SaÄŸdan Kayan Off-Canvas Ana Panel */
    .offcanvas-menu {
        position: fixed;
        top: 0;
        right: -320px;
        /* Kapalı durumda ekran dıÅŸında */
        width: 320px;
        max-width: 85%;
        height: 100vh;
        background: white;
        z-index: 100001;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
    }

    .offcanvas-menu.active {
        right: 0;
        /* Açık durumda ekranda */
    }

    /* Kapatma Butonu ve Off-Canvas Header */
    .offcanvas-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .offcanvas-logo {
        font-family: 'Outfit', sans-serif;
        font-weight: 900;
        color: var(--navy);
        font-size: 18px;
        letter-spacing: -0.5px;
    }

    .offcanvas-logo span {
        color: var(--gold);
    }

    .close-menu-btn {
        background: transparent;
        border: none;
        font-size: 32px;
        color: var(--text-light);
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        line-height: 1;
    }

    .close-menu-btn:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--navy);
        transform: rotate(90deg);
    }

    /* Off-Canvas Menü Linkleri (Aralıklı ve Çizgili Premium Yapı) */
    .offcanvas-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .offcanvas-link {
        display: flex;
        align-items: center;
        gap: 15px;
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--navy);
        text-decoration: none;
        padding: 15px 10px;
        border-radius: 8px;
        transition: 0.3s;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
    }

    .offcanvas-link:last-child {
        border-bottom: none;
    }

    .offcanvas-link:hover {
        background: rgba(197, 160, 89, 0.05);
        color: var(--gold);
        padding-left: 20px;
        /* Premium Hover saÄŸa kayma animasyonu */
    }

    .offcanvas-link svg {
        color: var(--gold);
        transition: 0.3s;
    }

    .offcanvas-link:hover svg {
        transform: scale(1.1);
    }

    .offcanvas-footer {
        padding: 20px;
        padding-bottom: 40px;
        /* Kısa mobil ekranlarda scroll'un en altına tam oturması, ama body'ye de deÄŸmemesi için */
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding-top: 30px;
    }

    .offcanvas-search {
        display: flex;
        align-items: center;
        background: #f4f6fa;
        border-radius: 30px;
        padding: 5px 15px;
        border: 1px solid rgba(0, 0, 0, 0.03);
    }

    .offcanvas-search input {
        border: none;
        background: transparent;
        padding: 10px;
        width: 100%;
        outline: none;
        font-family: 'Outfit', sans-serif;
        color: var(--navy);
        font-size: 15px;
    }

    .offcanvas-search button {
        background: transparent;
        border: none;
        color: var(--navy);
        cursor: pointer;
    }

    .offcanvas-ai-btn {
        background: var(--navy);
        color: white;
        text-decoration: none;
        padding: 15px;
        border-radius: 30px;
        text-align: center;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-shadow: 0 4px 15px rgba(11, 28, 61, 0.2);
        transition: 0.3s;
    }

    .offcanvas-ai-btn:hover {
        background: var(--gold);
        box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3);
        transform: translateY(-2px);
    }

    .offcanvas-ai-btn svg {
        color: var(--gold);
    }

    .offcanvas-ai-btn:hover svg {
        color: white;
    }

    /* Masaüstü standart menüyü telefonda tamamen gizle */
    .desktop-nav {
        display: none !important;
    }

    .ultra-menu {
        padding: 15px;
        display: block;
    }

    .ultra-logo {
        font-size: 24px;
    }

    /* Hava Durumu ve Namaz Vakitleri Mobil Layout */
    .weather-card>div {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .weather-card>div>div:last-child {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .container-wide {
        padding: 0 15px;
        /* Mobilde kenar boÅŸluÄŸunu kısalttık */
    }

    .standalone-gold-section {
        padding: 30px 20px;
        /* Mobilde taÅŸmayı önlemek için altın bölüm paddingi azaltıldı */
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 20px;
    }

    .standalone-dark-section {
        padding: 25px 15px;
        /* Mobilde taÅŸmayı önlemek için lacivert kutu paddingi azaltıldı */
        margin: 20px 0;
        border-radius: 20px;
    }

    .content-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-side {
        grid-template-columns: 1fr !important;
    }

    .news-card[style*="row"] {
        flex-direction: column !important;
    }

    .news-card[style*="row"] .news-img,
    .news-card[style*="row"] .news-card-content {
        width: 100% !important;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .section-header {
        margin: 60px auto 30px;
        padding-bottom: 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .strip-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .strip-item {
        border-bottom: 1px solid var(--border);
        padding-bottom: 15px;
    }

    .strip-item:nth-last-child(2) {
        border-bottom: 1px solid var(--border);
        padding-bottom: 15px;
    }

    /* Video ve Canlı Band */
    .video-main {
        height: 350px;
    }

    .video-item {
        flex-direction: column;
    }

    .video-thumb {
        width: 100%;
        height: 200px;
    }

    .top-info {
        padding: 6px 0;
        font-size: 10.5px;
    }

    .top-info .container-wide {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .live-stats {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        white-space: nowrap;
    }

    .live-stats span {
        margin-left: 0;
    }

    .weather-top {
        text-align: center;
        width: 100%;
        padding-top: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Slider Modifikasyonları */
    .slider-main {
        height: 400px;
    }

    .slider-content {
        padding: 40px 20px 30px;
    }

    .slider-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .slider-content p {
        font-size: 14px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pharmacy-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .pharmacy-call {
        width: 100%;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* --- ALT SAYFALAR / HABER DETAY (MASTER) ŞABLONU --- */
.breadcrumb {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.breadcrumb a {
    color: var(--navy);
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: var(--gold);
}

.breadcrumb .current {
    color: var(--gold);
    font-weight: 700;
}

.single-news {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.single-header {
    margin-bottom: 30px;
}

.single-title {
    font-size: 38px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
}

.single-spot {
    font-size: 18px;
    color: var(--text-main);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 30px;
    border-left: 4px solid var(--gold);
    padding-left: 20px;
}

.single-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.meta-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 45px;
    height: 45px;
    background: var(--navy);
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
}

.meta-author b {
    display: block;
    color: var(--navy);
    font-size: 15px;
}

.meta-author span {
    font-size: 13px;
    color: var(--text-light);
    /* Assuming --text-light doesn't exist, we will add generic color #475569 like --text-muted */
    color: var(--text-muted);
}

.action-btn {
    background: #f4f6fa;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--navy);
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.action-btn:hover {
    background: var(--gold);
    color: white;
    transform: translateY(-2px);
}

.single-featured-image {
    width: 100%;
    margin-bottom: 40px;
}

.single-featured-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    aspect-ratio: 16/9;
}

.single-featured-image figcaption {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 10px;
    text-align: right;
    font-style: italic;
}

.single-body {
    font-size: 19px;
    line-height: 1.85;
    color: #1e293b;
}

.single-body p {
    font-family: 'Libre Baskerville', serif;
    /* Premium okuma deneyimi için serif font */
    margin-bottom: 28px;
}

/* Lüks Okuma Modu - İlk Harf Büyütme (Drop Cap) */
.single-body p:first-of-type::first-letter {
    font-size: 3.8em;
    float: left;
    line-height: 0.85;
    margin-right: 15px;
    margin-top: 5px;
    color: var(--gold);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
}

.single-body h3 {
    font-size: 26px;
    color: var(--navy);
    margin: 40px 0 20px;
    letter-spacing: -0.5px;
}

.single-body blockquote {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--navy);
    margin: 40px 0;
    padding: 24px;
    background: #f4f6fa;
    border-left: 5px solid var(--gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    position: relative;
}

.single-body blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 80px;
    color: rgba(197, 160, 89, 0.2);
    font-family: serif;
    line-height: 1;
}

.single-tags {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.single-tags span {
    font-weight: 700;
    color: var(--navy);
    margin-right: 10px;
}

.single-tags a {
    background: #f4f6fa;
    color: var(--navy);
    text-decoration: none;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    transition: 0.3s;
}

.single-tags a:hover {
    background: var(--navy);
    color: var(--gold);
}

@media (max-width: 600px) {
    .single-news {
        padding: 20px;
    }

    .single-title {
        font-size: 28px;
    }

    .single-spot {
        font-size: 18px;
    }
}

/* --- UX GELİŞTİRMELERİ (MASTER PLAN V2) --- */

/* 1. Scroll (Okuma) İlerleme ÇubuÄŸu */
.scroll-progress-container {
    width: 100%;
    height: 4px;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    /* En üstte, Header'ın (9999) üzerinde */
}

.scroll-progress-bar {
    height: 100%;
    background: var(--gold-gradient);
    width: 0%;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.8);
    border-radius: 0 2px 2px 0;
}

/* 2. Yukarı Çık (Back to Top) Butonu */
.back-to-top {
    position: fixed;
    bottom: -60px;
    /* BaÅŸlangıçta gizli ve aÅŸaÄŸıda */
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--navy);
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 50%;
    /* Dairesel */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(11, 28, 61, 0.3);
    z-index: 9000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* HoÅŸ bir yaylanma (bounce) efekti */
}

.back-to-top svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.back-to-top.show {
    bottom: 30px;
    /* Görünür pozisyona çıkar */
    opacity: 1;
}

.back-to-top:hover {
    background-color: var(--gold);
    color: var(--white);
    border-color: var(--gold);
    box-shadow: 0 8px 25px rgba(197, 160, 89, 0.5);
    transform: translateY(-5px);
}

.back-to-top:hover svg {
    transform: translateY(-3px);
}

@media (max-width: 600px) {
    .back-to-top {
        right: 20px;
        width: 45px;
        height: 45px;
    }

    .back-to-top.show {
        bottom: 20px;
    }
}

/* --- ARAMA MODÜLÜ (SEARCH OVERLAY) --- */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(11, 28, 61, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-close-btn {
    position: absolute;
    top: 40px;
    right: 50px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    transition: 0.3s;
}

.search-close-btn:hover {
    color: var(--white);
    transform: rotate(90deg);
}

.search-container {
    width: 100%;
    max-width: 800px;
    padding: 0 30px;
    text-align: center;
    transform: translateY(30px);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.search-overlay.active .search-container {
    transform: translateY(0);
}

.search-input-group {
    display: flex;
    align-items: center;
    border-bottom: 3px solid rgba(197, 160, 89, 0.5);
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.search-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 32px;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    outline: none;
    padding: 10px 0;
}

.search-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.search-submit {
    background: transparent;
    border: none;
    color: var(--gold);
    cursor: pointer;
    transition: 0.3s;
}

.search-submit:hover {
    color: var(--white);
    transform: scale(1.1);
}

.search-suggestions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.search-suggestions span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.search-suggestions a {
    color: white;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    transition: 0.3s;
}

.search-suggestions a:hover {
    background: var(--gold);
    color: var(--navy);
}

/* --- BÃœLTEN POP-UP (TOAST) --- */
.newsletter-toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold-gradient);
    color: var(--navy);
    padding: 20px 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 15px 40px rgba(11, 28, 61, 0.4);
    z-index: 99999;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    width: 90%;
    max-width: 450px;
}

.newsletter-toast.show {
    bottom: 40px;
    opacity: 1;
}

.toast-icon {
    width: 40px;
    height: 40px;
    background: var(--navy);
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    flex-shrink: 0;
}

.toast-content h4 {
    margin-bottom: 5px;
    font-weight: 800;
}

.toast-content p {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

@media (max-width: 600px) {
    .search-input-group input {
        font-size: 24px;
    }

    .search-close-btn {
        top: 20px;
        right: 20px;
        font-size: 40px;
    }

    .newsletter-toast {
        bottom: -120px;
    }
}

/* --- SKELETON LOADING UI (V3.0) --- */
.skeleton-box {
    position: relative;
    overflow: hidden;
    background-color: var(--gray-200);
}

.standalone-dark-section .skeleton-box,
.widget-card .skeleton-box,
.skeleton-box.dark {
    background-color: rgba(255, 255, 255, 0.05);
    /* Koyu alanda gri sırıtmasın diye */
}

.skeleton-box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(255, 255, 255, 0.5) 60%,
            rgba(255, 255, 255, 0));
    animation: shimmer 1.5s infinite;
    z-index: 10;
    pointer-events: none;
}

.skeleton-box.dark::after,
.standalone-dark-section .skeleton-box::after {
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.05) 20%,
            rgba(255, 255, 255, 0.1) 60%,
            rgba(255, 255, 255, 0));
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-target {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.skeleton-loaded .skeleton-target {
    opacity: 1;
}

.skeleton-loaded.skeleton-box::after {
    display: none;
}

/* --- V3.0 GECE/GÃœNDÃœZ MODU SİSTEMİ --- */
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--navy);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover {
    background: rgba(11, 28, 61, 0.05);
    color: var(--gold);
    transform: rotate(15deg) scale(1.1);
}

.mobile-theme-btn {
    color: white;
    margin-right: 15px;
    margin-left: auto;
}

.mobile-theme-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Light Mode Overrides */
body.light-mode {
    background-color: #ffffff;
    background-image: none;
}

body.light-mode header {
    background: rgba(255, 255, 255, 0.95);
}

body.light-mode .standalone-dark-section {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

body.light-mode .standalone-dark-section h2,
body.light-mode .standalone-dark-section h3,
body.light-mode .standalone-dark-section p,
body.light-mode .widget-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
    position: relative;
}

.widget-card h3 i {
    font-style: normal;
    background: var(--gray-50);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

body.light-mode .news-card-dark {
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-mode .news-card-dark .card-title {
    color: var(--navy);
}

body.light-mode .stat-item {
    background: #f1f5f9;
}

body.light-mode .stat-item .stat-value {
    color: var(--navy);
}

body.light-mode .icon-box.gold {
    background: rgba(197, 160, 89, 0.1);
    color: var(--gold);
}

body.light-mode .finance-widget,
body.light-mode .widget-card,
body.light-mode .horoscope-widget {
    background: #fdfdfd;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-mode .sidebar-container {
    background: transparent;
}

/* Toggle Icon States */
body.light-mode .moon-icon {
    display: none !important;
}

body.light-mode .sun-icon {
    display: block !important;
}

/* --- V3.0 LÃœKS ÃœYE GİRİŞ MODALI (GLASSMORPHISM) --- */
.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 28, 61, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 100005;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.auth-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.auth-box {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 420px;
    padding: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.auth-modal-overlay.active .auth-box {
    transform: translateY(0) scale(1);
}

.auth-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.3s;
}

.auth-close:hover {
    color: var(--navy);
    transform: rotate(90deg) scale(1.1);
}

.auth-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 5px;
    text-align: center;
}

.auth-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 15px;
}

.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--gray-200);
}

.auth-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 10px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}

.auth-tab.active {
    color: var(--navy);
}

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gold);
}

.auth-form-group {
    margin-bottom: 15px;
}

.auth-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--navy);
    text-align: left;
}

.auth-form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

.auth-form-group input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
}

.auth-btn {
    width: 100%;
    padding: 14px;
    background: var(--navy-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(11, 28, 61, 0.2);
    margin-top: 10px;
}

.auth-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(11, 28, 61, 0.3);
}

.auth-opts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 15px;
}

.auth-opts a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}

.top-auth-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 3px 12px;
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
    margin-left: 15px;
}

.top-auth-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
}

/* --- V3.0 AI VOICE READER (SESLÄ° HABER UI) --- */
.voice-reader-box {
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    margin-top: -10px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}

.voice-reader-box:hover {
    border-color: var(--gold);
    box-shadow: 0 5px 20px rgba(197, 160, 89, 0.15);
}

.voice-play-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--navy-gradient);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(11, 28, 61, 0.2);
    transition: 0.3s;
    flex-shrink: 0;
}

.voice-play-btn:hover {
    transform: scale(1.05) translateY(-2px);
}

.voice-info {
    flex: 1;
}

.voice-title {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.voice-progress-container {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    position: relative;
    margin-bottom: 6px;
    cursor: pointer;
}

.voice-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--gold);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.voice-progress-bar::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -3px;
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: 0.2s;
}

.voice-reader-box:hover .voice-progress-bar::after {
    opacity: 1;
}

.voice-time {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

.voice-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
}

.voice-wave span {
    display: block;
    width: 3px;
    height: 4px;
    background: var(--gold);
    border-radius: 3px;
    transition: 0.2s;
}

.voice-wave.playing span {
    animation: waveAnim 1s infinite ease-in-out alternate;
}

.voice-wave.playing span:nth-child(1) {
    animation-delay: 0.0s;
}

.voice-wave.playing span:nth-child(2) {
    animation-delay: 0.2s;
}

.voice-wave.playing span:nth-child(3) {
    animation-delay: 0.4s;
}

.voice-wave.playing span:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes waveAnim {
    0% {
        height: 4px;
    }

    100% {
        height: 20px;
    }
}

body.light-mode .voice-reader-box {
    background: #fdfdfd;
    border-color: rgba(0, 0, 0, 0.05);
}

/* --- V3.0 INFINITY SCROLL LOADER --- */
.infinity-loader-box {
    margin-top: 40px;
    padding: 24px;
    background: var(--gray-50);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    transform: translateY(20px);
}

.infinity-loader-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.infinity-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(197, 160, 89, 0.3);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.infinity-text h4 {
    font-size: 16px;
    font-family: 'Outfit', sans-serif;
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 5px;
}

.infinity-text p {
    font-size: 13px;
    font-family: 'Outfit', sans-serif;
    color: var(--text-muted);
    font-weight: 500;
}

.infinity-progress-bar {
    width: 100%;
    max-width: 300px;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-top: 20px;
    overflow: hidden;
}

.infinity-progress-fill {
    height: 100%;
    background: var(--navy-gradient);
    width: 0%;
    transition: width 0.1s linear;
}

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

body.light-mode .infinity-loader-box {
    background: #fdfdfd;
    border-color: rgba(0, 0, 0, 0.1);
}

/* --- V3.5 GÃœNÃœN HÄ°KAYELERÄ° (STORIES BANDI) --- */
.stories-band {
    background: var(--gray-50);
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--border);
}

.stories-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.stories-track::-webkit-scrollbar {
    display: none;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
    width: 86px;
    transition: transform 0.3s ease;
}

.story-item:hover {
    transform: scale(1.05);
}

.story-ring {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    position: relative;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Okunmamış (Unread) Hikayeler Gold+Navy Gradient Halka */
.story-item.unread .story-ring {
    background: linear-gradient(45deg, var(--gold), #ffdf91, var(--navy));
}

/* OkunmuÅŸ (Read) Hikayeler Gri Halka */
.story-item.read .story-ring {
    background: var(--border);
}

.story-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gray-50);
}

/* Animasyonlu Canlı Hikaye */
.story-item .live-badge {
    position: absolute;
    bottom: -6px;
    background: #e63946;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    border: 2px solid var(--gray-50);
    letter-spacing: 0.5px;
    z-index: 2;
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(230, 57, 70, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
    }
}

.story-title {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    color: var(--navy);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

body.light-mode .stories-band {
    background: #ffffff;
}

body.light-mode .story-ring img,
body.light-mode .story-item .live-badge {
    border-color: #ffffff;
}

/* --- V3.5 DÖVİZ ÇEVİRİCİ --- */
.converter-widget {
    background: linear-gradient(135deg, var(--white), var(--gray-50));
    padding: 25px;
}

.converter-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.converter-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.converter-input-group label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.converter-input-group input {
    padding: 14px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    outline: none;
    color: var(--navy);
    transition: 0.3s;
    background: white;
}

.converter-input-group input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.1);
}

.converter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.converter-controls select {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    outline: none;
    cursor: pointer;
}

.swap-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--navy);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(11, 28, 61, 0.2);
}

.swap-btn:hover {
    background: var(--gold);
    transform: rotate(180deg);
    box-shadow: 0 6px 15px rgba(197, 160, 89, 0.3);
}

.converter-result {
    margin-top: 10px;
    padding: 20px;
    background: linear-gradient(135deg, var(--navy), #172a4f);
    color: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

#conv-result-val {
    font-size: 32px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
}

#conv-result-currency {
    font-size: 18px;
    color: var(--gold);
    font-weight: 700;
}

.converter-note {
    font-size: 11px;
    text-align: center;
    color: var(--text-muted);
    margin-top: 8px;
    font-weight: 500;
}

/* --- V3.5 AI SES Ä°STASYONU --- */
.ai-reader-widget {
    background: linear-gradient(135deg, var(--navy), #0a1128);
    color: white;
}

.ai-reader-widget h3 {
    color: white;
}

.ai-reader-widget h3 i {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gold);
}

.ai-player-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.3);
}

.ai-player-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.player-header {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.ai-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--white);
    object-fit: contain;
    padding: 8px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
}

.player-title h4 {
    font-size: 15px;
    font-family: 'Outfit', sans-serif;
    color: var(--gold);
    margin-bottom: 2px;
    font-weight: 800;
}

.player-title p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

.sound-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 35px;
    position: relative;
    z-index: 2;
}

.sound-wave span {
    display: block;
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 2px;
    transition: 0.2s;
    opacity: 0.5;
}

.sound-wave.playing span {
    animation: bounceWave 1s infinite ease-in-out;
    opacity: 1;
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.8);
}

.sound-wave.playing span:nth-child(2) {
    animation-delay: 0.1s;
}

.sound-wave.playing span:nth-child(3) {
    animation-delay: 0.2s;
}

.sound-wave.playing span:nth-child(4) {
    animation-delay: 0.3s;
}

.sound-wave.playing span:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes bounceWave {

    0%,
    100% {
        height: 4px;
    }

    50% {
        height: 28px;
    }
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.player-controls .time {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Outfit', sans-serif;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background: var(--gold);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
}

.progress-thumb {
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: 0.2s;
}

.progress-bar:hover .progress-thumb {
    opacity: 1;
}

.player-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    position: relative;
    z-index: 2;
    margin-top: 5px;
}

.action-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: 0.3s;
}

.action-btn:hover {
    color: white;
    transform: scale(1.1);
}

.play-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #e8c683);
    color: var(--navy);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(197, 160, 89, 0.4);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(197, 160, 89, 0.6);
}

/* --- V3.5 ETKÄ°NLÄ°K MASASI --- */
.event-widget {
    background: var(--white);
    padding: 0;
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-sm);
}

.event-widget h3 {
    padding: 20px 20px 10px;
    border-bottom: 1px solid var(--border);
}

.event-widget h3 i {
    color: var(--gold);
    background: rgba(197, 160, 89, 0.1);
}

.event-list {
    display: flex;
    flex-direction: column;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
    transition: 0.3s;
    background: var(--white);
}

.event-item:hover {
    background: var(--gray-50);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.1), rgba(197, 160, 89, 0.05));
    color: var(--navy);
    border-radius: var(--radius-md);
    width: 50px;
    height: 55px;
    border: 1px solid rgba(197, 160, 89, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.event-date .day {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    font-family: 'Outfit', sans-serif;
}

.event-date .month {
    font-size: 10px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 1px;
}

.event-info {
    flex: 1;
}

.event-info h4 {
    font-size: 14px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
    font-family: 'Outfit', sans-serif;
}

.event-info p {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.ticket-btn {
    background: transparent;
    border: 1px solid var(--navy);
    color: var(--navy);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Outfit', sans-serif;
}

.ticket-btn:hover {
    background: var(--navy);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(11, 28, 61, 0.2);
}

.featured-event {
    position: relative;
    padding: 30px 20px 25px;
    min-height: 160px;
    display: flex;
    align-items: flex-end;
    border-bottom: none;
    overflow: hidden;
}

.featured-event .event-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 28, 61, 0.95) 0%, rgba(11, 28, 61, 0.3) 100%), url('https://images.unsplash.com/photo-1540039155732-67ed8471c26f?auto=format&fit=crop&q=80&w=400') center/cover;
    transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.featured-event:hover .event-bg {
    transform: scale(1.08);
}

.featured-event .event-content {
    position: relative;
    z-index: 2;
    color: white;
    width: 100%;
}

.featured-event .badge {
    display: inline-block;
    background: var(--gold);
    color: var(--navy);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-family: 'Outfit', sans-serif;
}

.featured-event h4 {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 6px;
    font-family: 'Outfit', sans-serif;
}

.featured-event p {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 15px;
    color: white;
}

.event-btn {
    background: white;
    color: var(--navy);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: 0.3s;
}

.event-btn:hover {
    background: var(--gold);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
}

/* --- V3.5 CANLI TRAFÄ°K RADARI --- */
.traffic-widget {
    padding: 0;
    overflow: hidden;
    background: var(--white);
    border: none;
    box-shadow: var(--shadow-sm);
}

.traffic-widget h3 {
    padding: 20px 20px 10px;
    border-bottom: 1px solid var(--border);
}

.traffic-box {
    display: flex;
    flex-direction: column;
}

.traffic-map {
    position: relative;
    width: 100%;
    height: 180px;
    background: var(--gray-50);
    overflow: hidden;
}

.map-bg {
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&q=80&w=400') center/cover;
    opacity: 0.8;
    filter: grayscale(0.5) contrast(1.2);
    transition: 0.5s;
}

.traffic-map:hover .map-bg {
    transform: scale(1.05);
}

.traffic-markers {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.t-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px white;
}

.t-marker.success {
    background: #22c55e;
}

.t-marker.warning {
    background: #f59e0b;
}

.t-marker.danger {
    background: #ef4444;
}

.t-marker .pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    animation: markerPulse 2s infinite;
    z-index: -1;
}

@keyframes markerPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.t-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--navy);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
}

.t-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--navy) transparent transparent transparent;
}

.t-marker:hover .t-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.traffic-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: white;
}

.t-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--navy);
    font-family: 'Outfit', sans-serif;
}

.t-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.t-status .dot.danger {
    background: #ef4444;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}

.t-btn {
    background: var(--navy);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Outfit', sans-serif;
}

.t-btn:hover {
    background: var(--gold);
}

/* --- V3.5 PARALLAX BANNER --- */
.parallax-banner {
    position: relative;
    width: 100%;
    height: 350px;
    margin: 40px 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 15px 40px rgba(11, 28, 61, 0.2);
}

.parallax-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: brightness(0.55) contrast(1.1);
    z-index: 1;
}

.parallax-content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 24px;
    max-width: 700px;
}

.parallax-content h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    font-family: 'Outfit', sans-serif;
}

.parallax-content p {
    font-size: 16px;
    opacity: 0.95;
    margin-bottom: 30px;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.parallax-btn {
    background: linear-gradient(135deg, var(--gold), #e8c683);
    color: var(--navy);
    border: none;
    padding: 14px 35px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 20px rgba(197, 160, 89, 0.4);
}

.parallax-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.6);
    background: white;
}

/* --- V3.5 BLUR-TO-FOCUS (GELİŞMİŞ REVEAL) --- */
.v3-reveal-pending {
    filter: blur(8px) grayscale(0.3);
    transform: scale(0.95) translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.3;
}

.v3-reveal-pending.reveal-focused {
    filter: blur(0) grayscale(0);
    transform: scale(1) translateY(0);
    opacity: 1;
}

.news-card.reveal-focused:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 28, 61, 0.12);
}

/* --- V3.5 ULTRA MEGA-FOOTER --- */
.mega-footer {
    background: var(--navy);
    position: relative;
    padding-top: 60px;
    color: white;
    font-family: 'Outfit', sans-serif;
    margin-top: 60px;
    overflow: hidden;
}

.footer-neon-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), #ffdf91, var(--gold));
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.8);
}

.mega-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-brand-box {
    max-width: 400px;
}

.mega-logo {
    font-size: 32px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.mega-logo span {
    color: white;
}

.brand-desc {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 14px;
}

.footer-newsletter-vip h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 5px;
    color: white;
}

.footer-newsletter-vip p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
}

.mega-subscribe-form {
    display: flex;
    gap: 10px;
}

.mega-subscribe-form input {
    padding: 14px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-family: inherit;
    width: 250px;
    transition: 0.3s;
}

.mega-subscribe-form input:focus {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.mega-subscribe-form button {
    background: var(--gold);
    color: var(--navy);
    font-weight: 800;
    padding: 0 25px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: 0.3s;
}

.mega-subscribe-form button:hover {
    background: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.mega-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.mega-col h4 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    letter-spacing: 1px;
}

.gold-dot {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--gold);
}

.mega-col ul {
    list-style: none;
}

.mega-col ul li {
    margin-bottom: 15px;
}

.mega-col ul li a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    font-size: 14px;
}

.mega-col ul li a:hover {
    color: var(--gold);
    padding-left: 8px;
}

.contact-col p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.social-mega-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-mega-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-mega-icons a:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    transform: translateY(-3px);
}

.mega-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
}

.ai-powered {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- V3.5 SON DAKİKA FLAŞÖR YAPI --- */
.flash-alert-popup {
    position: fixed;
    bottom: 30px;
    left: 30px;
    max-width: 350px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 9999;
    display: flex;
    gap: 15px;
    border-left: 4px solid #ef4444;
    animation: slideInLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-150%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.flash-icon {
    position: relative;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flash-pulse {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 50%;
    animation: flashPulse 1.5s infinite;
}

@keyframes flashPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.flash-content {
    flex: 1;
}

.flash-badge {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    animation: blinkText 1s infinite alternate;
    font-family: 'Outfit', sans-serif;
}

@keyframes blinkText {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

.flash-content p {
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1.4;
    color: var(--navy);
}

.flash-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
}

.flash-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* --- LIGHT / DARK MODE UYARLAMASI --- */
html.dark-mode body,
body.dark-mode {
    --white: #111827 !important;
    --off-white: #1f2937 !important;
    --gray-50: #111827 !important;
    --gray-100: #1f2937 !important;
    --gray-200: #374151 !important;
    --gray-800: #f1f5f9 !important;
    
    --text-main: #f8fafc !important;
    --text-muted: #cbd5e1 !important;
    --border: #374151 !important;
    
    background-color: #0b1121 !important;
    background-image: none !important;
    color: #f8fafc !important;
}

body.dark-mode header {
    background: rgba(17, 24, 39, 0.95) !important;
}

body.dark-mode .ultra-logo {
    color: var(--text-main) !important;
}

body.dark-mode .breaking-news,
body.dark-mode .side-news,
body.dark-mode .news-card,
body.dark-mode .category-sidebar,
body.dark-mode .authors-widget,
body.dark-mode .mega-footer,
body.dark-mode .widget-card,
body.dark-mode .tools-widget {
    background-color: var(--off-white) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

/* Metinleri karanlıkta görünür yap */
body.dark-mode .text-navy,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title,
body.dark-mode .tools-title,
body.dark-mode .currency-item span,
body.dark-mode .social-item span,
body.dark-mode .story-title,
body.dark-mode .nav-action-btn i,
body.dark-mode .nav-action-btn svg,
body.dark-mode .search-btn svg,
body.dark-mode .theme-toggle-btn i,
body.dark-mode .theme-toggle-btn svg,
body.dark-mode p,
body.dark-mode .nav-links a {
    color: var(--text-main) !important;
}

body.dark-mode .breaking-ticker span {
    color: var(--text-main) !important;
}

body.dark-mode .ultra-menu {
    color: var(--text-main) !important;
}

body.dark-mode .top-info {
    background: #000 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .top-info span {
    color: #cbd5e1 !important;
}

body.dark-mode .auth-box,
body.dark-mode .search-box {
    background-color: var(--white) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: var(--text-main) !important;
}

/* --- V3.5 Yeni Karanlık Mod Geri Bildirim Onarımları --- */
body.dark-mode .logo-box {
    background-color: transparent;
    padding: 0;
}
body.dark-mode .logo-box img {
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.6)) drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.8));
}

body.dark-mode .ticket-btn {
    border-color: var(--text-muted);
    color: var(--text-main);
}
body.dark-mode .ticket-btn:hover {
    background: var(--text-muted);
    color: var(--white);
}

body.dark-mode .weather-main-box {
    background: var(--gray-200);
}
body.dark-mode .forecast-day {
    color: var(--text-muted);
}
body.dark-mode .forecast-day b {
    color: var(--text-main);
}

body.dark-mode .flash-alert-popup {
    background: var(--off-white);
    border-color: var(--border);
    color: var(--text-main);
}
body.dark-mode .flash-alert-popup .flash-close {
    color: var(--text-main);
}
body.dark-mode .search-input {
    background: var(--off-white) !important;
    color: var(--text-main) !important;
}

body.dark-mode .category-list li a:hover,
body.dark-mode .nav-action-item .search-btn:hover {
    background: var(--gray-200) !important;
}

body.dark-mode .pharmacy-item {
    background: var(--gray-200);
    border-color: var(--border);
}
body.dark-mode .pharmacy-call {
    color: var(--text-main);
    border-color: var(--text-muted);
}
body.dark-mode .pharmacy-call:hover {
    background: var(--text-muted);
    color: var(--white);
}

body.dark-mode .vakit-box {
    background: var(--gray-200);
    border-color: var(--border);
}
body.dark-mode .vakit-isim {
    color: var(--text-muted);
}
body.dark-mode .vakit-saat {
    color: var(--text-main);
}
body.dark-mode .active-vakit {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
}

body.dark-mode .converter-controls select,
body.dark-mode .converter-input-group input {
    background: var(--off-white);
    color: var(--text-main);
    border-color: var(--border);
}
body.dark-mode .converter-controls select option {
    background: var(--off-white);
    color: var(--text-main);
}

/* ===================================================
   FLASH ALERT POPUP (SON DAKÄ°KA BÄ°LDÄ°RÄ°MÄ°) - v4.28
   =================================================== */
.flash-alert-popup {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99999;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    padding: 18px 20px;
    max-width: 340px;
    width: calc(100vw - 48px);
    align-items: flex-start;
    gap: 14px;
    border-left: 5px solid #e53e3e;
    animation: flashSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes flashSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.flash-icon {
    flex-shrink: 0;
    font-size: 28px;
    position: relative;
    line-height: 1;
}

.flash-pulse {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #e53e3e;
    border-radius: 50%;
    animation: pulsate 1.2s infinite;
}

@keyframes pulsate {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(2); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

.flash-content {
    flex: 1;
    min-width: 0;
}

.flash-badge {
    display: inline-block;
    background: #e53e3e;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.flash-content p {
    margin: 0;
    font-size: 13px;
    color: #1a202c;
    line-height: 1.5;
    font-weight: 500;
}

.flash-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 22px;
    color: #718096;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    align-self: flex-start;
    pointer-events: all;
    z-index: 100000;
    position: relative;
}

.flash-close:hover {
    color: #e53e3e;
    background: rgba(229, 62, 62, 0.1);
}

.flash-link {
    display: none;
}

/* Dark mode flash */
body.dark-mode .flash-alert-popup {
    background: #1e2a3a;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
body.dark-mode .flash-content p {
    color: #e2e8f0;
}
body.dark-mode .flash-close {
    color: #a0aec0;
}
body.dark-mode .flash-close:hover {
    color: #fc8181;
    background: rgba(252, 129, 129, 0.1);
}

/* ===================================================
   HABER DETAY SAYFASI - DARK MODE STÄ°LLERÄ° v4.28
   =================================================== */

/* Makale ana kartı */
body.dark-mode .single-news {
    background: var(--off-white);
    color: var(--text-main);
}

/* Makale başlığı ve spot */
body.dark-mode .single-title {
    color: var(--text-main) !important;
}
body.dark-mode .single-spot {
    color: var(--text-muted) !important;
}

/* Makale içeriği */
body.dark-mode .single-body {
    background: var(--off-white);
    color: var(--text-main);
}
body.dark-mode .single-body p {
    color: var(--text-main);
}
body.dark-mode .single-body h2,
body.dark-mode .single-body h3,
body.dark-mode .single-body h4 {
    color: var(--text-main);
}
body.dark-mode .single-body strong {
    color: var(--text-main);
}

/* Blockquote */
body.dark-mode blockquote {
    background: rgba(197, 160, 89, 0.08);
    border-left-color: var(--gold);
    color: var(--text-muted);
}

/* Single header */
body.dark-mode .single-header {
    background: var(--off-white);
}
body.dark-mode .single-meta {
    border-color: var(--border);
}
body.dark-mode .meta-author b {
    color: var(--text-main);
}
body.dark-mode .meta-author span {
    color: var(--text-muted);
}
body.dark-mode .author-avatar {
    background: var(--navy) !important;
    color: #fff !important;
}

/* Haber görseli alt yazısı */
body.dark-mode figcaption {
    color: var(--text-muted);
}

/* Etiketler */
body.dark-mode .single-tags a {
    background: var(--gray-50);
    color: var(--text-muted);
    border-color: var(--border);
}
body.dark-mode .single-tags a:hover {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}

/* Voice reader */
body.dark-mode .voice-reader-box {
    background: var(--off-white);
    border-color: var(--border);
}
body.dark-mode .voice-title {
    color: var(--text-main);
}
body.dark-mode .voice-time {
    color: var(--text-muted);
}

/* İlgili haberler bölüm başlığı */
body.dark-mode .related-news-section h3 {
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* Sidebar: Finans widget içindeki inline renk sorunları */
body.dark-mode .finance-widget h4 {
    color: var(--gold) !important;
}
body.dark-mode .finance-widget span[style*="color:var(--navy)"],
body.dark-mode [style*="color:var(--navy)"] {
    color: var(--gold) !important;
}

/* Ana layout container */
body.dark-mode .main-layout {
    background: transparent;
}
body.dark-mode main.main-content {
    background: transparent;
}

/* Yorum bölümü */
body.dark-mode .comments-section h3 {
    color: var(--text-main);
}
body.dark-mode .comment-box {
    background: var(--off-white);
    border-color: var(--border);
}
body.dark-mode .comment-author {
    color: var(--text-main);
}
body.dark-mode .comment-text {
    color: var(--text-muted);
}
body.dark-mode .comment-form input,
body.dark-mode .comment-form textarea {
    background: var(--off-white);
    color: var(--text-main);
    border-color: var(--border);
}

/* AI asistan butonu (nav) hover efekti düzeltmesi */
.ai-button {
    text-decoration: none !important;
}
body.dark-mode .ai-button {
    border-color: var(--gold);
    color: var(--gold);
}

/* Search overlay dark mode */
body.dark-mode .search-overlay {
    background: rgba(10, 15, 30, 0.97);
}

/* Auth modal dark mode */
body.dark-mode .auth-box {
    background: #1a2535 !important;
    color: var(--text-main) !important;
}
body.dark-mode .auth-title {
    color: var(--text-main) !important;
}
body.dark-mode .auth-subtitle {
    color: var(--text-muted) !important;
}
body.dark-mode .auth-form-group label {
    color: var(--text-muted) !important;
}
body.dark-mode .auth-form-group input {
    background: var(--off-white) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}
body.dark-mode .auth-opts a {
    color: var(--gold) !important;
}
body.dark-mode .auth-close {
    color: var(--text-muted) !important;
}

/* ===================================================
   AI ÖZET PANEL STİLLERİ v4.28
   =================================================== */
.ai-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99998;
    backdrop-filter: blur(4px);
}
.ai-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, 95vw);
    max-height: 85vh;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    z-index: 99999;
    overflow: hidden;
    animation: aiPanelSlideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
    flex-direction: column;
}
@keyframes aiPanelSlideUp {
    from { transform: translateX(-50%) translateY(100%); opacity:0; }
    to   { transform: translateX(-50%) translateY(0);    opacity:1; }
}
.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg,#fdf6e9 0%,#fff 100%);
}
.ai-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Bricolage Grotesque',sans-serif;
}
.ai-panel-title em {
    font-weight: 400;
    color: var(--text-muted);
    font-style: normal;
    font-size: 13px;
}
.ai-panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--gray-50);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
    line-height: 1;
}
.ai-panel-close:hover {
    background: #ffe0e0;
    color: #e53e3e;
}
.ai-panel-body {
    padding: 20px 24px 28px;
    overflow-y: auto;
    max-height: calc(85vh - 80px);
}
.ai-typing-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
}
.ai-typing-indicator span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    animation: aiTypingBounce 1.2s ease-in-out infinite;
}
.ai-typing-indicator span:nth-child(1) { animation-delay: 0s; }
.ai-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTypingBounce {
    0%,80%,100% { transform:scale(0.6); opacity:0.4; }
    40%         { transform:scale(1);   opacity:1;   }
}
.ai-summary-text p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-main);
    margin-bottom: 12px;
}
.ai-summary-text ul {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.ai-summary-text ul li {
    font-size: 14px;
    color: var(--text-main);
    padding: 10px 14px;
    background: var(--gray-50);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}
.ai-summary-text strong { color: var(--navy); }

/* AI Panel Dark Mode */
body.dark-mode .ai-panel {
    background: #1a2535;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
body.dark-mode .ai-panel-header {
    background: linear-gradient(135deg,#1e2d42 0%,#1a2535 100%);
    border-color: var(--border);
}
body.dark-mode .ai-panel-title { color: var(--text-main); }
body.dark-mode .ai-panel-close {
    background: #2a3a50;
    color: var(--text-muted);
}
body.dark-mode .ai-panel-close:hover {
    background: rgba(252,129,129,0.15);
    color: #fc8181;
}
body.dark-mode .ai-summary-text p,
body.dark-mode .ai-summary-text ul li { color: var(--text-main); }
body.dark-mode .ai-summary-text ul li { background: rgba(255,255,255,0.05); }
body.dark-mode .ai-summary-text strong { color: var(--gold); }
/* --- MEGA FOOTER (ADDED) --- */
.mega-footer { background: var(--navy); color: white; padding-top: 60px; position:relative; overflow:hidden; }
.footer-neon-line { height: 4px; background: var(--gold-gradient); width: 100%; position: absolute; top:0; left:0; }
.mega-footer-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 40px; margin-bottom: 40px; flex-wrap:wrap; gap:30px; }
.footer-brand-box { max-width: 500px; }
.mega-logo { font-family: 'Outfit', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: 0px; margin-bottom: 15px; display:inline-block; }
.mega-logo span { color: var(--gold); }
.brand-desc { color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.6; }
.footer-newsletter-vip h3 { font-family: 'Outfit', sans-serif; font-size: 22px; margin-bottom: 10px; color:white; }
.footer-newsletter-vip p { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 15px; }
.mega-subscribe-form { display: flex; gap: 10px; }
.mega-subscribe-form input { flex-grow:1; padding: 12px 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color:white; outline:none; }
.mega-subscribe-form button { background: var(--gold-gradient); border:none; padding:12px 25px; border-radius: 8px; color:white; font-weight:bold; cursor:pointer; font-family:'Outfit', sans-serif; text-transform:uppercase; letter-spacing:1px; transition:0.3s; }
.mega-subscribe-form button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4); }
.mega-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-bottom: 40px; }
.mega-col h4 { font-family: 'Outfit', sans-serif; font-size: 18px; margin-bottom: 15px; display:flex; align-items:center; gap:10px; color:white; }
.gold-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; display:inline-block; }
.mega-col ul { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:12px; }
.mega-col ul li a { color: rgba(255,255,255,0.7); text-decoration: none; transition: 0.3s; font-size: 15px; }
.mega-col ul li a:hover { color: var(--gold); padding-left: 5px; }
.contact-col p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; margin-bottom: 15px; }
.social-mega-icons { display: flex; gap: 15px; margin-top: 20px; }
.social-mega-icons a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:white; transition: 0.3s; }
.social-mega-icons a:hover { background: var(--gold); transform: translateY(-3px); }
.mega-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 25px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.bottom-left { color: rgba(255,255,255,0.5); font-size: 13px; font-weight:600; letter-spacing: 0.5px; }
.bottom-right { color: rgba(255,255,255,0.5); font-size: 13px; font-weight:600; }
@media(max-width: 992px) { .mega-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 768px) { .mega-footer-grid { grid-template-columns: 1fr; } .mega-footer-top { flex-direction: column; text-align:center; } .mega-subscribe-form { flex-direction:column; } .mega-footer-bottom { flex-direction: column; gap:15px; text-align:center; } }

/* ===================================================
   GÃœNÃœN ANKETÄ° (POLL WIDGET) STÄ°LLERÄ°
   =================================================== */
.poll-widget { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 24px; box-shadow: var(--shadow-sm); }
.poll-question { font-size: 15px; font-weight: 700; color: var(--navy); margin: 15px 0; line-height: 1.4; }
.poll-options { display: flex; flex-direction: column; gap: 10px; }
.poll-option { display: flex; flex-direction: column; position: relative; cursor: pointer; border: 1px solid var(--border); padding: 12px 15px; border-radius: 8px; transition: all 0.2s ease; background: #fafafa; overflow: hidden; }
.poll-option:hover { border-color: rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.05); }
.poll-option input[type="radio"] { display: none; }
.poll-option input[type="radio"]:checked ~ .poll-text { font-weight: 700; color: var(--navy); }
.poll-text { font-size: 13px; color: var(--text-main); z-index: 2; position: relative; display: flex; justify-content: space-between; }
.poll-options.show-results .poll-progress { opacity: 1; }
.poll-progress { position: absolute; inset: 0; background: transparent; border-radius: 8px; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; z-index: 1; }
.poll-bar { height: 100%; background: rgba(212, 175, 55, 0.2); width: 0%; transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.poll-actions { display: flex; gap: 15px; margin-top: 20px; align-items: center; }
.poll-btn-submit { background: var(--navy); color: #fff; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.poll-btn-submit:hover { background: var(--gold); }
.poll-btn-submit:disabled { background: #ccc; cursor: not-allowed; }
.poll-btn-results { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; font-weight: 600; text-decoration: underline; }
.poll-feedback { margin-top: 15px; font-size: 13px; color: var(--navy); padding: 10px; background: rgba(34, 197, 94, 0.1); border-left: 3px solid #22c55e; border-radius: 4px; }
body.dark-mode .poll-widget { background: #1e2a3a; border-color: rgba(255,255,255,0.05); box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
body.dark-mode .poll-question { color: var(--gold); }
body.dark-mode .poll-option { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); }
body.dark-mode .poll-option:hover { background: rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.3); }
body.dark-mode .poll-text { color: var(--text-main); }
body.dark-mode .poll-option input[type="radio"]:checked ~ .poll-text { color: var(--gold); }
body.dark-mode .poll-feedback { background: rgba(34, 197, 94, 0.15); color: #fff; }

/* BENTO GRID - PREMÄ°UM 2+3 DÄ°ZÄ°LÄ°MÄ° */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 sütunlu grid */
    grid-auto-rows: 350px;
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;
}

.bento-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    text-decoration: none;
    background-size: cover;
    background-position: center;
}

.bento-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-premium);
}

.bento-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px 20px;
    color: white;
    z-index: 2;
    background: linear-gradient(to top, rgba(11,28,61,0.9) 0%, transparent 100%);
}

.bento-content h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 8px;
}

.bento-medium {
    grid-column: span 3; /* 3/6 = Yarım genişlik (2 yan yana) */
}

.bento-small {
    grid-column: span 2; /* 2/6 = Üçte bir genişlik (3 yan yana) */
}

@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(280px, auto);
    }
    .bento-medium, .bento-small {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
}

/* --- MOBIL GUVENLIK YAMASI (GRI BOSLUK VE GIZLI ICERIK KESIN FIX) --- */
@media (max-width: 992px) {
    /* 1. Tum Animasyonlari ve Gizlilikleri Zorla Gecersiz Kil */
    [data-aos], 
    .v3-reveal-pending,
    .carousel-item,
    .slider-content,
    .bento-item,
    .news-card,
    .badge,
    .slider-title,
    .carousel-item.active .badge,
    .carousel-item.active .slider-title,
    .carousel-item.active p {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* 2. Slider'in bos kalmasini onle (Script hatasi ihtimaline karsi) */
    .carousel-item:first-child {
        position: relative !important;
        display: block !important;
        z-index: 5 !important;
    }
    
    .carousel-item:not(:first-child) {
        display: none !important; /* Ilkini goster, digerlerini JS calisana kadar gizle */
    }
    
    .carousel-item.active {
        display: block !important;
    }

    /* 3. Hero alaninin yuksekligini sabitle ve icerigi ortaya cikar */
    .slider-main {
        height: auto !important;
        min-height: 350px !important;
    }
    
    .slider-content {
        position: relative !important;
        padding: 40px 20px !important;
        background: var(--navy) !important;
    }

    /* 4. Tasmalari (Overflow) engelle */
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* --- HIKAYE BOLUMU (STORIES) --- */
.stories {
    background: var(--white);
    padding: 30px 0;
    margin-bottom: 0px;
    border-bottom: 1px solid var(--border);
}

.stories-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
    overflow-x: auto !important;
    padding: 10px 5px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stories-container::-webkit-scrollbar {
    display: none;
}

.story-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px;
    text-decoration: none !important;
    min-width: 85px !important;
    transition: transform 0.3s ease;
}

.story-item:hover {
    transform: scale(1.05);
}

.story-ring {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    padding: 3px;
    background: var(--gold-gradient);
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
    position: relative;
    border: none !important;
    overflow: hidden;
}

.story-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--white);
}

.story-item span {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- HERO SLIDER YAPI KURALLARI --- */
.hero-slider {
    position: relative;
    height: 620px;
    border-radius: 24px;
    overflow: hidden;
    background: #0b1c3d;
    box-shadow: 0 20px 40px rgba(11,28,61,0.06);
}
.slides-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.hero-arrow {
    position: absolute;
    bottom: 20px;
    z-index: 10;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    backdrop-filter: blur(4px);
}
.hero-arrow:hover { background: #C5A059; border-color: #C5A059; }
.hero-prev { left: 20px; }
.hero-next { left: 76px; }
.hero-dots {
    position: absolute;
    bottom: 28px;
    right: 24px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.hero-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: 0.3s;
}
.hero-dots .dot.active { background: #C5A059; width: 24px; border-radius: 4px; }
.side-news-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 620px;
}
.side-news {
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    cursor: pointer;
    text-decoration: none;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.3s;
    flex: 1;
}
.side-news:hover { transform: scale(1.01); }
.side-news h3 { font-size: 18px; font-weight: 700; color: white; margin: 8px 0 0; line-height: 1.3; }

/* --- DIJITAL HIZMETLERIMIZ --- */
.services-section {
    background: #deb86d; 
    padding: 60px 40px;
    border-radius: 20px;
    margin: 40px 0;
}
.services-header {
    margin-bottom: 40px;
}
.services-header h2 {
    font-size: 32px;
    color: var(--navy);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0;
}
.services-header h2 span {
    color: #fff;
    font-style: italic;
    font-weight: 300;
}
.services-header-line {
    width: 120px;
    height: 3px;
    background: var(--navy);
    margin-top: 15px;
}
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.service-card {
    background: #e6d1a1; 
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.service-card.full-width {
    grid-column: 1 / -1;
}
.service-icon {
    font-size: 32px;
    background: #d5bd8d;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
}
.service-card h3 {
    color: var(--navy);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 12px;
}
.service-card p {
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 500;
}
.service-btn {
    background: var(--navy);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
    margin-top: auto;
}
.service-btn:hover { background: #0b1c3d; transform: translateY(-2px); }

/* --- SPOR GUNDEMI (ÖZEL TASARIM) --- */
.spor-gundemi-wrapper {
    background: var(--navy);
    padding: 50px 40px;
    border-radius: 20px;
    margin: 40px 0;
}
.spor-header {
    margin-bottom: 40px;
}
.spor-header h2 {
    font-size: 32px;
    color: #fff;
    font-weight: 900;
    margin: 0;
}
.spor-header h2 span {
    color: var(--gold);
    font-style: italic;
    font-weight: 400;
}
.spor-header-line {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin-top: 15px;
}
.spor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.spor-card {
    background: #1e293b; 
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.spor-card:hover {  transform: translateY(-5px); }
.spor-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.spor-card-body {
    padding: 25px;
}
.spor-badge {
    display: inline-block;
    background: #0f172a;
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 6px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}
.spor-card h3 {
    color: white;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
}
.spor-card p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

@media(max-width: 768px) {
    .services-grid, .spor-grid { grid-template-columns: 1fr; }
    .spor-gundemi-wrapper, .services-section { padding: 30px 20px; }
}

/* --- ORİJİNAL MEDYADENİZLİ V2 TASARIMI (Masaüstü Referansı - JS Uyumlu Mapping) --- */
.hero-grid {
    display: grid !important;
    grid-template-columns: 2.2fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
    align-items: stretch !important;
    height: 620px !important;
}
.hero-slider-wrapper {
    width: 100% !important;
    height: 620px !important;
    min-width: 0 !important;
}
.hero-slider {
    position: relative !important;
    width: 100% !important;
    height: 620px !important;
    min-height: 620px !important;
    max-height: 620px !important;
    border-radius: var(--radius-lg, 24px) !important;
    overflow: hidden !important;
    background: var(--navy) !important;
    box-shadow: var(--shadow-premium, 0 15px 40px rgba(11,28,61,0.2)) !important;
}

/* YAN HABERLER GERÄ° GELDÄ° */
.side-news-stack {
    display: block !important;
    position: relative !important;
    height: 620px !important; 
    max-height: 620px !important;
    min-width: 0 !important;
}
.side-news-stack .side-news {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 298px !important;
    max-height: 298px !important;
    margin: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: var(--radius-lg, 24px) !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-soft) !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.side-news-stack .side-news:first-child {
    top: 0 !important;
}
.side-news-stack .side-news:last-child {
    bottom: 0 !important;
}

/* YAN HABERLER STİL AYARI (H3 Başlıkları resimdeki gibi) */
.side-news-stack .side-news h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: white !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.5px !important;
    position: relative;
    z-index: 2;
}
.side-news-stack .side-news .badge {
    color: var(--navy) !important;
    background: var(--gold) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    position: relative;
    z-index: 2;
    margin-bottom: 12px !important;
    display: inline-block !important;
    align-self: flex-start !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}

/* İÇERİK MİMARİSİ (V2 Birebir Kopya) */
.hero-slide {
    height: 100% !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    /* JS tarafı display:none / flex ile yönettiği için opacity kuralı kaldırıldı */
}
.hero-slide.active {
    z-index: 1 !important;
}
.hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.8 !important;
}
.hero-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 120px 60px 60px 60px !important;
    background: linear-gradient(to top, rgba(11, 28, 61, 0.95) 0%, rgba(11, 28, 61, 0.7) 40%, rgba(11, 28, 61, 0.2) 80%, transparent 100%) !important;
    color: white !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}
.hero-content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 52px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 20px !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3) !important;
    color: white !important;
}
.hero-content p {
    font-size: 18px !important;
    max-width: 80% !important;
    opacity: 0.9 !important;
    font-weight: 300 !important;
    color: white !important;
    font-family: 'Outfit', sans-serif !important;
}

/* V2 KONTROLLER: KENARDA ORTA OKLAR, ALT ORTA NOKTALAR */
.hero-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(11, 28, 61, 0.6) !important;
    color: white !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.spor-card:hover {  transform: translateY(-5px); }
.spor-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.spor-card-body {
    padding: 25px;
}
.spor-badge {
    display: inline-block;
    background: #0f172a;
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 6px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}
.spor-card h3 {
    color: white;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
}
.spor-card p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

@media(max-width: 768px) {
    .services-grid, .spor-grid { grid-template-columns: 1fr; }
    .spor-gundemi-wrapper, .services-section { padding: 30px 20px; }
}

/* --- ORİJİNAL MEDYADENİZLİ V2 TASARIMI (Masaüstü Referansı - JS Uyumlu Mapping) --- */
.hero-grid {
    display: grid !important;
    grid-template-columns: 2.2fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
    align-items: stretch !important;
    height: 620px !important;
}
.hero-slider-wrapper {
    width: 100% !important;
    height: 620px !important;
    min-width: 0 !important;
}
.hero-slider {
    position: relative !important;
    width: 100% !important;
    height: 620px !important;
    min-height: 620px !important;
    max-height: 620px !important;
    border-radius: var(--radius-lg, 24px) !important;
    overflow: hidden !important;
    background: var(--navy) !important;
    box-shadow: var(--shadow-premium, 0 15px 40px rgba(11,28,61,0.2)) !important;
}

/* YAN HABERLER GERÄ° GELDÄ° */
.side-news-stack {
    display: block !important;
    position: relative !important;
    height: 620px !important; 
    max-height: 620px !important;
    min-width: 0 !important;
}
.side-news-stack .side-news {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 298px !important;
    max-height: 298px !important;
    margin: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: var(--radius-lg, 24px) !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-soft) !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.side-news-stack .side-news:first-child {
    top: 0 !important;
}
.side-news-stack .side-news:last-child {
    bottom: 0 !important;
}

/* YAN HABERLER STİL AYARI (H3 Başlıkları resimdeki gibi) */
.side-news-stack .side-news h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: white !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.5px !important;
    position: relative;
    z-index: 2;
}
.side-news-stack .side-news .badge {
    color: var(--navy) !important;
    background: var(--gold) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    position: relative;
    z-index: 2;
    margin-bottom: 12px !important;
    display: inline-block !important;
    align-self: flex-start !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}

/* İÇERİK MİMARİSİ (V2 Birebir Kopya) */
.hero-slide {
    height: 100% !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    /* JS tarafı display:none / flex ile yönettiği için opacity kuralı kaldırıldı */
}
.hero-slide.active {
    z-index: 1 !important;
}
.hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.8 !important;
}
.hero-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 120px 60px 40px 60px !important;
    background: linear-gradient(to top, rgba(11, 28, 61, 0.95) 0%, rgba(11, 28, 61, 0.7) 40%, rgba(11, 28, 61, 0.2) 80%, transparent 100%) !important;
    color: white !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.hero-content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 52px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 16px !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.hero-content p {
    font-size: 18px !important;
    max-width: 80% !important;
    opacity: 0.9 !important;
    font-weight: 300 !important;
    color: white !important;
    font-family: 'Outfit', sans-serif !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}


/* V2 KONTROLLER: KENARDA ORTA OKLAR, ALT ORTA NOKTALAR */
.hero-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(11, 28, 61, 0.6) !important;
    color: white !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(5px) !important;
    transition: all 0.3s !important;
    z-index: 10 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.hero-arrow:hover {
    background: var(--gold) !important;
    color: var(--navy) !important;
}
.hero-prev {
    left: 20px !important;
    bottom: auto !important;
}
.hero-next {
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
}

/* NOKTALARIN %100 ÇALIŞMASI VE GENÄ°Ã…ÂÂLÄ°KLERÄ° İÇİN DÃœZELTME */
.hero-dots {
    position: absolute !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
}
.hero-dots .dot {
    display: inline-block !important; /* inline değil, inline-block olmalı ki genişlik çalışsın */
    width: 30px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.hero-dots .dot.active, .hero-dots .dot:hover {
    background: var(--gold) !important;
    width: 50px !important;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.5) !important;
}

.hero-content .badge {
    background: var(--gold) !important;
    color: var(--navy) !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    display: inline-block !important;
    align-self: flex-start !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}


/* --- BENTO GRID ALIGNMENT --- */
.bento-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}
.bento-item.bento-small, .bento-item.bento-small {
    grid-column: span 1 !important;
}
.bento-item {
    height: 100% !important;
    min-height: 280px !important;
}
.hero-grid, .bento-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
@media (max-width: 992px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .bento-grid { grid-template-columns: 1fr !important; }
}

/* ===================================================
   MOBIL HERO + SIDE-NEWS KESIN OVERRIDE
   =================================================== */
@media (max-width: 992px) {
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 16px !important;
    }
    .hero-slider {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }
    .side-news-stack {
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    /* Mobilde Absolute silinip Normal Akışa Döndürülür */
    .side-news-stack .side-news {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        height: 196px !important;
        max-height: 196px !important;
        padding: 20px !important;
        width: 100% !important;
    }
}
@media (max-width: 768px) {
    .hero-slider {
        height: 560px !important;
        min-height: 560px !important;
        max-height: 560px !important;
    }
    .side-news-stack {
        height: 360px !important;
    }
    .side-news-stack .side-news {
        height: 168px !important;
        max-height: 168px !important;
    }
    .hero-content h2 {
        font-size: 30px !important;
        letter-spacing: -0.5px !important;
        line-height: 1.15 !important;
        margin-bottom: 12px !important;
    }
    .hero-content p {
        font-size: 15px !important;
    }
}

/* --- STORIES DARK MODE OVERRIDE --- */
body.dark-mode .story-item span {
    color: #ffffff !important;
}

/* --- DÄ°JÄ°TAL HÄ°ZMETLERÄ°MÄ°Z DARK MODE OVERRIDE --- */
body.dark-mode .services-section { background: #0b1c3d !important; }
body.dark-mode .service-card { background: #1e293b !important; border: 1px solid rgba(197, 160, 89, 0.2) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; }
body.dark-mode .services-header h2 { color: #ffffff !important; }
body.dark-mode .services-header h2 span { color: var(--gold) !important; }
body.dark-mode .service-icon { background: rgba(197,160,89,0.15) !important; color: var(--gold) !important; }
body.dark-mode .service-card h3 { color: #ffffff !important; }
body.dark-mode .service-card p { color: #cbd5e1 !important; }
body.dark-mode .services-header-line { background: var(--gold) !important; }

/* --- OFFCANVAS MENU FULL DARK MODE FIX --- */
body.dark-mode .offcanvas-menu { background: #0f172a !important; }
body.dark-mode .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
body.dark-mode .offcanvas-logo { color: #ffffff !important; }
body.dark-mode .offcanvas-logo span { color: var(--gold) !important; }
body.dark-mode .offcanvas-link { color: #cbd5e1 !important; border-bottom: 1px dashed rgba(255,255,255,0.1) !important; }
body.dark-mode .offcanvas-link:hover { background: rgba(255,255,255,0.05) !important; color: var(--gold) !important; }

/* --- FOOLPROOF LIGHT MODE OVERRIDES --- */
body:not(.dark-mode) .service-card h3 { color: #0b1c3d !important; }
body:not(.dark-mode) .service-card p { color: #334155 !important; }
body:not(.dark-mode) .services-header h2 { color: #0b1c3d !important; }
body:not(.dark-mode) .services-header h2 span { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; }

/* =========================================================================
   HABER DETAY SAYFA LAYOUT - ANA GRID YAPISI
   main-layout, sidebar-widgets, widget-card class'lari bu dosyada
   eksikti - haber detay sayfasinda sidebar gorunmuyordu. Eklendi.
   ========================================================================= */

:root {
    --text: #0f172a;
}

/* Ana 2 sutunlu grid: makale + sidebar */
.main-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* Sidebar widgetlari */
.md-right-panel {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.widget-wrapper {
    width: 100%;
}

/* Widget karti */
.widget-card {
    background: var(--white);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--shadow-premium);
    border: 1px solid var(--border);
    overflow: hidden;
}

.widget-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--gold);
}

.widget-card h3 i {
    font-style: normal;
    font-size: 18px;
}

/* Hava durumu widget */
.weather-main-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.temp-big {
    font-size: 56px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1;
}

.city-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-top: 4px;
}

.weather-status-box { text-align: right; }
.status-text { font-size: 16px; font-weight: 700; color: var(--navy); }
.status-detail { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Namaz vakitleri */
.namaz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vakit-box {
    background: var(--gray-50);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
}

.vakit-isim {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.vakit-saat {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: var(--navy);
}

/* Makale icerigi */
.article-content-wrapper {
    background: var(--white);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow-premium);
    border: 1px solid var(--border);
}

/* Badge */
.badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Kategoriye git butonu hover */
.gold-cat-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(197,160,89,0.4);
}

/* === RESPONSIVE: TABLET (900-1200px) === */
@media (max-width: 1200px) {
    .main-layout {
        grid-template-columns: 1fr 320px;
        gap: 28px;
    }
}

/* === RESPONSIVE: MOBIL (max 900px) === */
@media (max-width: 900px) {
    .main-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .md-right-panel {
        position: static;
        top: auto;
    }

    .article-content-wrapper {
        padding: 20px;
        border-radius: 16px;
    }
}

/* Dark mode uyumu */
body.dark-mode .widget-card {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .widget-card h3 { color: #ffffff !important; }
body.dark-mode .vakit-box { background: rgba(255,255,255,0.05) !important; }
body.dark-mode .vakit-saat { color: #ffffff !important; }
body.dark-mode .article-content-wrapper {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* =========================================================================
   HABER META ALANI (Yazdır, Paylaş, Kaynak) - DARK/LIGHT DESTEKLİ
   ========================================================================= */
.meta-icon-box {
    width:36px; height:36px; background:var(--navy); border-radius:50%; 
    display:flex; align-items:center; justify-content:center; font-size:14px;
}
body.dark-mode .meta-icon-box { background:#1e293b; color:#fff; border:1px solid rgba(255,255,255,0.1); }

.meta-source { font-size:14px; font-weight:800; color:var(--navy); }
body.dark-mode .meta-source { color:#fff; }

.meta-date { font-size:12px; color:var(--text-muted); }
body.dark-mode .meta-date { color:#94a3b8; }

.btn-action {
    padding:8px 16px; border-radius:10px; font-size:13px; font-weight:700; 
    cursor:pointer; font-family:'Outfit',sans-serif; transition:all 0.3s ease;
}
.btn-print { border:1px solid var(--border); background:var(--white); color:var(--navy); }
.btn-print:hover { background:var(--gray-50); }
body.dark-mode .btn-print { background:#1e293b; color:#cbd5e1; border-color:rgba(255,255,255,0.1); }
body.dark-mode .btn-print:hover { background:#334155; color:#fff; }

.btn-share { border:none; background:var(--navy); color:var(--white); }
.btn-share:hover { background:#0a1930; opacity:0.9; }
body.dark-mode .btn-share { background:var(--gold); color:#1a0e00; }
body.dark-mode .btn-share:hover { background:#d4b360; }

/* =========================================================================
   OKUR YORUMLARI DARK BLOCK (Her Temada Koyu Lacivert Görünüm)
   ========================================================================= */
.dark-block-section {
    margin-top:50px; padding:40px; border-radius:16px;
    background: #0f172a; border: 1px solid #1e293b;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
body.dark-mode .dark-block-section {
    background: transparent; border-color: #334155; /* Default Dark da seffaf olsun ama kenarli kalsin */
}

/* Yorumlarin Dark modda dahi margin yemesini onlemislere karsi temizlik var */
.dark-block-title {
    color: #f8fafc !important; margin:0; font-family:'Outfit', sans-serif;
}
.dark-block-title span { color: var(--gold) !important; }

.dark-block-form-container {
    background: #1e293b; padding:30px; border-radius:15px; 
    border:1px solid #334155; margin-bottom:40px;
}
body.dark-mode .dark-block-form-container {
    background: #0f172a; border-color: rgba(255,255,255,0.1);
}

.dark-block-subtitle {
    font-family:'Playfair Display',serif; color:var(--gold); font-size:22px; margin:0 0 20px;
}

.dark-block-input {
    width:100%; padding:14px 20px; border-radius:10px; border:1px solid #334155; 
    background:#0f172a; color:#f8fafc; font-family:'Outfit',sans-serif; font-size:15px; 
    box-sizing:border-box; transition:border 0.3s;
}
.dark-block-input::placeholder { color:#64748b; }
.dark-block-input:focus { border-color:var(--gold); outline:none; }

.dark-block-btn {
    background: var(--gold); color: #1a0e00; border: none; padding: 15px 35px; 
    border-radius: 10px; font-family:'Outfit',sans-serif; font-weight:800; 
    font-size:15px; cursor:pointer; transition:all 0.3s; 
    box-shadow: 0 4px 15px rgba(197,160,89,0.2);
}
.dark-block-btn:hover { background: #d4b360; transform:translateY(-2px); }

.dark-block-comment-item {
    background: #1e293b; padding:25px; border-radius:15px; border:1px solid #334155;
    transition: transform 0.3s, border-color 0.3s;
}
.dark-block-comment-item:hover { border-color: #475569; }

.comment-avatar {
    width:45px; height:45px; background:var(--gold); border-radius:50%; 
    display:flex; align-items:center; justify-content:center; 
    color:#1a0e00; font-weight:800; font-size:18px; flex-shrink:0;
}
.comment-author { font-weight:800; color:#f8fafc; font-size:16px; }
.comment-date { color:#94a3b8; font-size:12px; }
.comment-text { color:#cbd5e1; font-size:15px; line-height:1.7; margin:0; }


/* --- WIDGET MODERN CSS KODLARI (KAYIP GORSELLER ONARIMI) --- */
.weather-main-box {
    background: linear-gradient(135deg, #0b1c3d 0%, #162a50 100%);
    border-radius: 16px;
    padding: 24px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(11,28,61,0.15);
}
.weather-main-box::after {
    content: '';
    position: absolute;
    right: -20%;
    top: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}
.temp-big {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
    color: #ffffff;
}
.city-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: 0.8;
    color: #ffffff;
}
.weather-status-box {
    text-align: right;
}
.status-text {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #ffffff;
}
.status-detail {
    font-size: 12px;
    opacity: 0.6;
    color: #ffffff;
}
.forecast-day {
    text-align:center; padding:10px; background:var(--gray-50); border-radius:10px; border:1px solid var(--border);
}

/* Namaz Vakitleri */
.namaz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.vakit-box {
    background: var(--gray-50);
    padding: 16px 12px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s;
}
.vakit-isim {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.vakit-saat {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: var(--navy);
}
.vakit-box.active-vakit {
    background: var(--navy);
    border-color: var(--navy);
}
.vakit-box.active-vakit .vakit-isim { color: rgba(255,255,255,0.7); }
.vakit-box.active-vakit .vakit-saat { color: #ffffff; }

.vakit-box.next-vakit {
    border-color: var(--gold);
    background: rgba(197, 160, 89, 0.05);
}
.vakit-box.next-vakit .vakit-saat { color: var(--gold); }

/* Puan Durumu Tablosu Izolasyonu */
.standings-table th { padding:10px; border-bottom:2px solid var(--border); font-size:12px; color:var(--text-muted); }
.standings-table td { padding:12px 10px; border-bottom:1px solid var(--border); font-size:14px; color:var(--text-main); }
.standings-table tr:hover { background: var(--gray-50); }

/* WIDGET DARK MODE UYUMLULUKLARI (GENEL) */
body.dark-mode {
    --gray-50: #1e293b;
    --border: #334155;
    --navy: #e2e8f0;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
}
body.dark-mode .crypto-item, body.dark-mode .finance-item { background: #1e293b !important; border-color: #334155 !important; }
body.dark-mode .finance-item b { color:#fff !important; }
body.dark-mode .crypto-item b { color:#fff !important; }



/* --- VAKIT KUTUSU (NEXT-VAKIT) TIPOGRAFI ONARIMI --- */
.vakit-box.next-vakit .vakit-isim { color: var(--navy) !important; }
body.dark-mode .vakit-box.next-vakit .vakit-isim { color: #ffffff !important; }

/* KÖŞE YAZARLARI & YAZAR DETAY (DARK MODE UYUMLU) */
.author-item { background: var(--gray-50); transition: 0.3s; }
.author-item a { text-decoration: none; }
.author-item:hover { background: rgba(197, 160, 89, 0.1); }
.author-page-wrapper { background: var(--gray-50); }
.author-card { background: var(--white); border: 1px solid var(--border); }
.author-profile { background: linear-gradient(to bottom, var(--gray-50), var(--white)); border-bottom: 1px solid var(--border); }
.author-avatar-box { background: var(--white); border-color: var(--border); }
.author-avatar-lg { border: 3px solid var(--white); background: var(--white); }
.author-name { color: var(--navy); }
.author-article-title { color: var(--navy); transition: 0.2s; }
.author-article-link:hover .author-article-title { color: var(--gold); }

body.dark-mode .author-item { background: #1e293b; }
body.dark-mode .author-item:hover { background: rgba(197, 160, 89, 0.15); }
body.dark-mode .author-page-wrapper { background: #0f172a; }
body.dark-mode .author-card { background: #1e293b; border-color: #334155; }
body.dark-mode .author-profile { background: linear-gradient(to bottom, #0f172a, #1e293b); border-color: #334155; }
body.dark-mode .author-avatar-box, 
body.dark-mode .author-avatar-lg { background: #1e293b; border-color: #334155 !important; }
body.dark-mode .author-name { color: #f8fafc; }
body.dark-mode .author-article-title { color: #cbd5e1; }
body.dark-mode .author-article-link:hover .author-article-title { color: var(--gold); }

/* --- SPOR/BILIM GUNDEMI & FOOTER DARK MOD FIXLERI --- */
body.dark-mode .spor-gundemi-wrapper { 
    background: #0f172a !important; 
    border: 1px solid #1e293b;
}
body.dark-mode .spor-card { 
    background: #1e293b !important; 
    border: 1px solid #334155;
}
body.dark-mode .site-footer { 
    background: #020617 !important; 
    border-top: 1px solid #1e293b !important;
}
body.dark-mode .site-footer p, 
body.dark-mode .footer-links a { 
    color: #cbd5e1 !important; 
}
body.dark-mode .site-footer h4 { 
    color: #f8fafc !important; 
}
body.dark-mode .places-section { 
    background: #0f172a !important; 
    border-top: 1px solid #1e293b !important;
}
body.dark-mode .place-card { 
    background: #1e293b !important; 
}
body.dark-mode .place-card h4 { 
    color: #f8fafc !important; 
}
/* Footer Link Hover */
body.dark-mode .footer-links a:hover { 
    color: var(--gold) !important; 
}

/* ==========================================================
   MEDYA DENIZLI - TEMA STABILIZASYON (LIGHT & DARK)
   ========================================================== */

/* 1. Ortak Buton ve Kutu Sınıfları (Temel - Aydınlık Mod) */
.md-btn-navy, .ai-button, .converter-result-box, .ai-speaker-avatar, .event-date-box {
    background: #0b1c3d !important;
    color: #ffffff !important;
}
.md-btn-navy:hover, .ai-button:hover {
    background: #1e3a6e !important;
    box-shadow: 0 4px 12px rgba(11, 28, 61, 0.2);
}

/* 2. Döviz Çevirici Giriş Alanları (Aydınlık Mod) */
.conv-input, .conv-select {
    background: #f8fafc !important;
    color: #0b1c3d !important;
    border: 1px solid #e2e8f0 !important;
}

/* 3. Karanlık Mod (Dark Mode) Ezicileri */
body.dark-mode .md-btn-navy, 
body.dark-mode .ai-button,
body.dark-mode .converter-result-box,
body.dark-mode .ai-speaker-avatar,
body.dark-mode .event-date-box {
    background: #0f172a !important;
    color: var(--gold) !important;
    border: 1px solid #1e293b !important;
}

body.dark-mode .ai-button span { color: #ffffff !important; }
body.dark-mode .ai-button svg { color: var(--gold) !important; }

body.dark-mode .conv-input, 
body.dark-mode .conv-select {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* 4. Ek Dark Mode İyileştirmeleri */
body.dark-mode .top-info {
    background: #020617 !important;
    border-bottom: 1px solid #1e293b;
}
body.dark-mode .stat-item { color: #cbd5e1 !important; }
body.dark-mode .stat-item i { color: var(--gold) !important; }

body.dark-mode .site-footer { 
    background: #020617 !important; 
}

body.dark-mode .spor-gundemi-wrapper,
body.dark-mode .places-section { 
    background: #0f172a !important; 
}

body.dark-mode .breaking-ticker a { color: #cbd5e1 !important; }
body.dark-mode .breaking-ticker span { color: #f8fafc !important; }

/* Global Navy BG Fix */
body.dark-mode .slider-main { background: #020617 !important; }
body.dark-mode .poll-btn-submit,
body.dark-mode .btn-share {
    background: var(--gold) !important;
    color: #0b1c3d !important;
}