:root {
            --bg-base: #0f172a;
            --banner-bg: rgba(15, 23, 42, 0.7);
            --banner-border: rgba(255, 255, 255, 0.1);
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --accent: #38bdf8;
            
            --sunny: #fcd34d;
            --cloudy: #e2e8f0;
            --rainy: #60a5fa;
            --snowy: #bae6fd;
            --storm: #818cf8;
        }



        .weather-banner-wrapper {
            width: 100%;
            background: #0060ce;
        }

        .weather-banner {
            width: 100%;
            background: var(--banner-bg);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-top: 1px solid var(--banner-border);
            border-bottom: 1px solid var(--banner-border);
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
            display: flex;
            align-items: stretch;
            position: relative;
            overflow: hidden;
            padding: 0 2rem;
        }

        .weather-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, transparent 10%, transparent 90%, rgba(255,255,255,0.03) 100%);
            pointer-events: none;
        }

        .divider {
            width: 1px;
            background: rgba(255, 255, 255, 0.1);
            margin: 1.5rem 2rem;
            flex-shrink: 0;
        }

        .banner-main {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 1.5rem 0;
            min-width: max-content;
        }

        /* Eski Phosphor Icon Stili yerine animasyonlu icon wrapperı eklendi */
        .main-icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90px;
        }

        .main-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .main-temp {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
        }

        .temp-val {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -1px;
            color: #ffffff;
        }

        .temp-desc {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--accent);
            text-transform: capitalize;
        }

        .main-city {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .last-update {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.4);
            margin-top: 0.35rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-weight: 500;
        }

        .banner-details {
            display: flex;
            align-items: center;
            gap: 2.5rem;
            padding: 1.5rem 0;
        }

        .detail-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .detail-icon {
            font-size: 2rem;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.05);
            padding: 0.5rem;
            border-radius: 12px;
        }

        .detail-texts {
            display: flex;
            flex-direction: column;
        }

        .d-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .d-val {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .banner-forecast {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            padding: 1.5rem 0;
            gap: 1rem;
        }

        .forecast-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            flex: 1;
            transition: transform 0.2s;
            cursor: pointer;
        }

        .forecast-item:hover {
            transform: translateY(-3px);
        }

        .f-day {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
        }

        .f-icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            margin: 0.25rem 0;
        }

        .f-temps {
            font-size: 0.95rem;
            font-weight: 600;
            display: flex;
            gap: 0.4rem;
        }

        .f-max { color: var(--text-primary); }
        .f-min { color: var(--text-secondary); }

        .loading {
            width: 100%;
            padding: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

        .spinner {
            width: 30px;
            height: 30px;
            border: 3px solid rgba(255,255,255,0.1);
            border-left-color: var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        @media (max-width: 1200px) {
            .banner-details { display: none; }
            .divider:first-of-type { display: none; }
        }

        @media (max-width: 850px) {
            .weather-banner {
                flex-direction: column;
                align-items: center;
                padding: 1.5rem;
                gap: 1rem;
            }
            .divider {
                width: 100%;
                height: 1px;
                margin: 0.5rem 0;
            }
            .banner-main { padding: 0; }
            .banner-forecast { padding: 0; width: 100%; }
        }
        
        @media (max-width: 480px) {
            .banner-forecast {
                overflow-x: auto;
                justify-content: flex-start;
                padding-bottom: 0.5rem;
                scrollbar-width: none;
            }
            .banner-forecast::-webkit-scrollbar { display: none; }
            .forecast-item { min-width: 70px; }
        }

        /* --- TRPORTAL ANIMATED WEATHER ICONS --- */
        /* ===================================================
   MeteoTürkiye — Animated Weather Icons (Pure CSS)
   =================================================== */

.wi {
    display: inline-block;
    position: relative;
}

/* ---- SUN ---- */
.wi-sun {
    width: 48px;
    height: 48px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wi-sun .sun-core {
    width: 22px;
    height: 22px;
    background: radial-gradient(circle, #ffe566, #ffb800);
    border-radius: 50%;
    box-shadow: 0 0 14px 4px rgba(255, 200, 0, 0.5);
    animation: sunPulse 2.5s ease-in-out infinite;
    z-index: 2;
    position: relative;
}

.wi-sun .sun-rays {
    position: absolute;
    inset: 0;
    animation: sunRotate 10s linear infinite;
}

.wi-sun .sun-rays span {
    position: absolute;
    width: 3px;
    height: 10px;
    background: linear-gradient(to bottom, #ffe566, transparent);
    border-radius: 2px;
    left: 50%;
    top: 0;
    transform-origin: 50% 24px;
}

.wi-sun .sun-rays span:nth-child(1) {
    transform: translateX(-50%) rotate(0deg);
}

.wi-sun .sun-rays span:nth-child(2) {
    transform: translateX(-50%) rotate(45deg);
}

.wi-sun .sun-rays span:nth-child(3) {
    transform: translateX(-50%) rotate(90deg);
}

.wi-sun .sun-rays span:nth-child(4) {
    transform: translateX(-50%) rotate(135deg);
}

.wi-sun .sun-rays span:nth-child(5) {
    transform: translateX(-50%) rotate(180deg);
}

.wi-sun .sun-rays span:nth-child(6) {
    transform: translateX(-50%) rotate(225deg);
}

.wi-sun .sun-rays span:nth-child(7) {
    transform: translateX(-50%) rotate(270deg);
}

.wi-sun .sun-rays span:nth-child(8) {
    transform: translateX(-50%) rotate(315deg);
}

@keyframes sunRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sunPulse {

    0%,
    100% {
        box-shadow: 0 0 14px 4px rgba(255, 200, 0, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 22px 8px rgba(255, 200, 0, 0.7);
        transform: scale(1.08);
    }
}

/* ---- CLOUD ---- */
.wi-cloud {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 32px;
    animation: cloudFloat 4s ease-in-out infinite;
}

.wi-cloud .cloud-body {
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 40px;
    height: 20px;
    background: linear-gradient(180deg, #c8d8e8, #a0b8cc);
    border-radius: 20px;
}

.wi-cloud .cloud-top {
    position: absolute;
    bottom: 14px;
    left: 12px;
    width: 22px;
    height: 22px;
    background: linear-gradient(180deg, #ddeaf5, #c8d8e8);
    border-radius: 50%;
}

.wi-cloud .cloud-top2 {
    position: absolute;
    bottom: 12px;
    left: 24px;
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, #ddeaf5, #c8d8e8);
    border-radius: 50%;
}

@keyframes cloudFloat {

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

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

/* ---- PARTLY CLOUDY ---- */
.wi-partly-cloudy {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 48px;
}

.wi-partly-cloudy .pc-sun {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
}

.wi-partly-cloudy .pc-sun .sun-core {
    width: 16px;
    height: 16px;
}

.wi-partly-cloudy .pc-sun .sun-rays span {
    height: 7px;
    transform-origin: 50% 17px;
}

.wi-partly-cloudy .pc-cloud {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 26px;
    animation: cloudFloat 4s ease-in-out infinite;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
}

.wi-partly-cloudy .pc-cloud .cloud-body {
    position: absolute;
    bottom: 0;
    left: 3px;
    width: 36px;
    height: 17px;
    background: linear-gradient(180deg, #ddeaf5, #b8cede);
    border-radius: 17px;
}

.wi-partly-cloudy .pc-cloud .cloud-top {
    position: absolute;
    bottom: 11px;
    left: 9px;
    width: 19px;
    height: 19px;
    background: linear-gradient(180deg, #eaf3fb, #ddeaf5);
    border-radius: 50%;
}

.wi-partly-cloudy .pc-cloud .cloud-top2 {
    position: absolute;
    bottom: 10px;
    left: 22px;
    width: 13px;
    height: 13px;
    background: linear-gradient(180deg, #eaf3fb, #ddeaf5);
    border-radius: 50%;
}

/* ---- RAIN ---- */
.wi-rain {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 52px;
    overflow: visible;
}

.wi-rain .r-cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 28px;
}

.wi-rain .r-cloud .cloud-body {
    position: absolute;
    bottom: 0;
    left: 2px;
    width: 44px;
    height: 18px;
    background: linear-gradient(180deg, #7a9ab5, #5a7a95);
    border-radius: 18px;
}

.wi-rain .r-cloud .cloud-top {
    position: absolute;
    bottom: 12px;
    left: 10px;
    width: 22px;
    height: 22px;
    background: linear-gradient(180deg, #8aaccb, #7a9ab5);
    border-radius: 50%;
}

.wi-rain .r-cloud .cloud-top2 {
    position: absolute;
    bottom: 10px;
    left: 26px;
    width: 15px;
    height: 15px;
    background: linear-gradient(180deg, #8aaccb, #7a9ab5);
    border-radius: 50%;
}

.wi-rain .drops {
    position: absolute;
    top: 26px;
    left: 6px;
    display: flex;
    gap: 6px;
}

.wi-rain .drop {
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(to bottom, #60a5fa, #93c5fd);
    animation: rainFall 1s ease-in infinite;
    opacity: 0;
}

.wi-rain .drop:nth-child(1) {
    height: 10px;
    animation-delay: 0s;
}

.wi-rain .drop:nth-child(2) {
    height: 14px;
    animation-delay: 0.2s;
    margin-top: 3px;
}

.wi-rain .drop:nth-child(3) {
    height: 10px;
    animation-delay: 0.4s;
}

.wi-rain .drop:nth-child(4) {
    height: 14px;
    animation-delay: 0.15s;
    margin-top: 3px;
}

.wi-rain .drop:nth-child(5) {
    height: 10px;
    animation-delay: 0.35s;
}

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

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.6;
    }

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

/* ---- HEAVY RAIN ---- */
.wi-heavy-rain .drop {
    animation-duration: 0.7s !important;
}

/* ---- SNOW ---- */
.wi-snow {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 52px;
    overflow: visible;
}

.wi-snow .s-cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 28px;
}

.wi-snow .s-cloud .cloud-body {
    position: absolute;
    bottom: 0;
    left: 2px;
    width: 44px;
    height: 18px;
    background: linear-gradient(180deg, #b8d4f0, #8fb8dd);
    border-radius: 18px;
}

.wi-snow .s-cloud .cloud-top {
    position: absolute;
    bottom: 12px;
    left: 10px;
    width: 22px;
    height: 22px;
    background: linear-gradient(180deg, #cce0f5, #b8d4f0);
    border-radius: 50%;
}

.wi-snow .s-cloud .cloud-top2 {
    position: absolute;
    bottom: 10px;
    left: 26px;
    width: 15px;
    height: 15px;
    background: linear-gradient(180deg, #cce0f5, #b8d4f0);
    border-radius: 50%;
}

.wi-snow .flakes {
    position: absolute;
    top: 26px;
    left: 6px;
    display: flex;
    gap: 6px;
}

.wi-snow .flake {
    font-size: 10px;
    animation: snowFall 1.8s ease-in-out infinite;
    opacity: 0;
    color: #a5f3fc;
}

.wi-snow .flake:nth-child(1) {
    animation-delay: 0s;
}

.wi-snow .flake:nth-child(2) {
    animation-delay: 0.4s;
    margin-top: 4px;
}

.wi-snow .flake:nth-child(3) {
    animation-delay: 0.8s;
}

.wi-snow .flake:nth-child(4) {
    animation-delay: 0.2s;
    margin-top: 4px;
}

.wi-snow .flake:nth-child(5) {
    animation-delay: 0.6s;
}

@keyframes snowFall {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translateY(18px) rotate(180deg);
    }
}

/* ---- STORM / THUNDER ---- */
.wi-storm {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 56px;
    overflow: visible;
}

.wi-storm .st-cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 28px;
}

.wi-storm .st-cloud .cloud-body {
    position: absolute;
    bottom: 0;
    left: 2px;
    width: 44px;
    height: 18px;
    background: linear-gradient(180deg, #4a5568, #2d3748);
    border-radius: 18px;
}

.wi-storm .st-cloud .cloud-top {
    position: absolute;
    bottom: 12px;
    left: 10px;
    width: 22px;
    height: 22px;
    background: linear-gradient(180deg, #606878, #4a5568);
    border-radius: 50%;
}

.wi-storm .st-cloud .cloud-top2 {
    position: absolute;
    bottom: 10px;
    left: 26px;
    width: 15px;
    height: 15px;
    background: linear-gradient(180deg, #606878, #4a5568);
    border-radius: 50%;
}

.wi-storm .bolt {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    filter: drop-shadow(0 0 6px #fef08a);
    animation: boltFlash 2s ease-in-out infinite;
}

.wi-storm .st-drops {
    position: absolute;
    top: 28px;
    left: 6px;
    display: flex;
    gap: 6px;
}

.wi-storm .st-drop {
    width: 3px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(to bottom, #60a5fa, #93c5fd);
    animation: rainFall 0.8s ease-in infinite;
    opacity: 0;
}

.wi-storm .st-drop:nth-child(1) {
    animation-delay: 0s;
}

.wi-storm .st-drop:nth-child(2) {
    animation-delay: 0.3s;
    margin-top: 3px;
}

.wi-storm .st-drop:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes boltFlash {

    0%,
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 6px #fef08a);
    }

    40%,
    60% {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px #fef08a);
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0 0 14px #fef08a) drop-shadow(0 0 28px #fbbf24);
    }
}

/* ---- FOG ---- */
.wi-fog {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 36px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.wi-fog .fog-line {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.8), transparent);
    animation: fogDrift 3s ease-in-out infinite;
}

.wi-fog .fog-line:nth-child(1) {
    width: 100%;
    animation-delay: 0s;
}

.wi-fog .fog-line:nth-child(2) {
    width: 80%;
    margin-left: 10%;
    animation-delay: 0.5s;
}

.wi-fog .fog-line:nth-child(3) {
    width: 90%;
    margin-left: 5%;
    animation-delay: 1s;
}

.wi-fog .fog-line:nth-child(4) {
    width: 70%;
    margin-left: 15%;
    animation-delay: 1.5s;
}

@keyframes fogDrift {

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

    50% {
        opacity: 1;
        transform: translateX(5px);
    }
}

/* ---- DRIZZLE ---- */
.wi-drizzle .drop {
    height: 6px !important;
    animation-duration: 1.4s !important;
}

/* ---- SIZE VARIANTS ---- */
.wi-sm .wi-sun {
    width: 32px;
    height: 32px;
}

.wi-sm .wi-sun .sun-core {
    width: 14px;
    height: 14px;
}

.wi-sm .wi-sun .sun-rays span {
    height: 6px;
    transform-origin: 50% 16px;
}

.wi-sm .wi-cloud,
.wi-sm .wi-rain,
.wi-sm .wi-snow,
.wi-sm .wi-storm,
.wi-sm .wi-partly-cloudy {
    transform: scale(0.7);
    transform-origin: left center;
}

.wi-lg .wi-sun {
    width: 72px;
    height: 72px;
}

.wi-lg .wi-sun .sun-core {
    width: 32px;
    height: 32px;
}

.wi-lg .wi-sun .sun-rays span {
    height: 14px;
    transform-origin: 50% 36px;
}

.wi-lg .wi-cloud,
.wi-lg .wi-rain,
.wi-lg .wi-snow,
.wi-lg .wi-storm,
.wi-lg .wi-partly-cloudy {
    transform: scale(1.5);
    transform-origin: left center;
}

/* ---- MODAL BIG ICONS ---- */
.wi-modal {
    transform: scale(1.4);
    transform-origin: left center;
}