*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;background:#f4f8f6;color:#26352e}.siteHeader{height:88px;background:#fff;border-bottom:1px solid #dfe7e3;box-shadow:0 2px 8px rgba(0,0,0,.05)}.headerInner{width:min(1200px,100%);height:88px;margin:auto;padding:10px 16px;display:flex;align-items:center;gap:28px}.siteLogo{font-size:28px;font-weight:800;color:#087f5b;text-decoration:none;white-space:nowrap}.topMenu{flex:1;display:flex;justify-content:flex-end;gap:6px;overflow-x:auto;scrollbar-width:none}.topMenu::-webkit-scrollbar{display:none}.topMenuBtn{height:48px;padding:0 13px;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #dce5e1;border-radius:11px;color:#26352e;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.04)}.topMenuBtn.active{background:#25843d;border-color:#25843d;color:#fff}.topMenuBtn:hover{background:#f1f8f4;border-color:#b9d5c5}.pageLayout{width:min(1200px,100%);margin:auto;padding:12px 16px 30px;display:grid;grid-template-columns:290px minmax(0,1fr);gap:14px;align-items:start}.discoverSideMenu{background:#fff;border:1px solid #dfe8e3;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.06);position:sticky;top:10px}.discoverSideHeader{padding:15px 16px;background:#087f5b;color:#fff}.discoverSideTitle{font-size:23px;font-weight:800}.discoverSideSubtitle{margin-top:5px;font-size:10px;opacity:.92}.discoverSideList{padding:9px}.discoverSideBtn{min-height:48px;margin-bottom:6px;padding:0 10px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e0e8e4;border-radius:8px;color:#26352e;text-decoration:none}.discoverSideBtn:last-child{margin-bottom:0}.discoverSideBtn>span{width:31px;height:31px;flex:0 0 31px;display:flex;align-items:center;justify-content:center;background:#eef8f2;border-radius:7px;font-size:17px}.discoverSideBtn strong{flex:1;font-size:12px}.discoverSideBtn b{color:#168152;font-size:21px;font-weight:400}.discoverSideBtn.active{background:#e9f8ef;border-color:#9bd1b0;box-shadow:inset 4px 0 #168152}.discoverSideBtn.active strong{color:#087f5b}.pageContent{min-width:0}.heroCard{margin-bottom:12px;padding:22px 24px;background:linear-gradient(135deg,#f2faf5,#fff);border:1px solid #dfe8e3;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:10px;font-weight:800;color:#168152;letter-spacing:.5px}.heroCard h1{margin:5px 0 4px;font-size:30px;color:#173f32}.heroCard p{margin:0;color:#68746f;font-size:13px}.heroBadge{padding:11px 15px;border-radius:9px;background:#087f5b;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}.contentCard{margin-bottom:12px;background:#fff;border:1px solid #dfe8e3;border-radius:12px;overflow:hidden}.cardHeader{padding:17px 21px;border-bottom:1px solid #e1e8e4}.cardHeader h2{margin:0 0 4px;color:#087f5b;font-size:21px}.cardHeader p{margin:0;color:#68746f;font-size:12px}#mapFilters{padding:10px 14px;background:#f7faf8}.homeDistrictNavigation{display:flex!important;gap:6px;overflow-x:auto;padding:4px 0;scrollbar-width:thin}.homeDistrictNavItem{padding:8px 10px;border:1px solid #dce8e1;border-radius:8px;background:#fff;text-decoration:none;color:#2b3b34;white-space:nowrap;font-size:11px;font-weight:700}.homeDistrictNavNumber{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background:#e9f6ef;color:#087f5b;margin-right:5px}.homeDistrictNavItem:hover{border-color:#82c39d;background:#eff9f3}#map{width:100%;height:560px;background:#e6f1ed}.rotaForm{padding:18px 21px;display:grid;grid-template-columns:1fr 1fr auto;gap:12px}.rotaInput label{display:block;margin-bottom:5px;font-size:11px;font-weight:700;color:#45544d}.rotaInput input{width:100%;height:43px;padding:0 12px;border:1px solid #d7e2dc;border-radius:8px;font:500 12px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif}.primaryBtn{align-self:end;height:43px;border:0;border-radius:8px;background:#168152;color:#fff;padding:0 18px;font:700 12px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;cursor:pointer}.weather-tabs{padding:12px 18px 0;display:flex;gap:6px;overflow:auto}.weather-tabs button{border:1px solid #d8e5de;background:#fff;border-radius:8px;padding:8px 11px;font:600 11px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;cursor:pointer}.weather-tabs button.active{background:#087f5b;color:#fff}.weather-grid{padding:14px 18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.weather-item,.emptyState{padding:14px;border:1px solid #e0e8e4;border-radius:9px;background:#f8fbf9;text-align:center;font-size:11px}.statsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.statCard{background:#fff;border:1px solid #dfe8e3;border-radius:10px;padding:17px;text-align:center}.statCard span{display:block;font-size:23px}.statCard strong{display:block;margin-top:3px;color:#087f5b;font-size:25px}.statCard small{color:#68746f;font-size:11px}.sponsorGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}.sponsorCard{height:110px;background:#fff;border:1px solid #dfe8e3;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}.sponsorCard img{max-width:100%;max-height:100%;object-fit:contain}.footerGrid{width:min(1200px,100%);margin:auto;padding:30px 16px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:25px}.footerGrid h3,.footerGrid h4{margin:0 0 9px;color:#087f5b}.footerGrid p,.footerGrid a{font-size:12px;color:#68746f}.footerGrid a{display:block;text-decoration:none;margin:6px 0}.footerBtn{display:inline-block!important;padding:9px 12px;background:#087f5b;border-radius:7px;color:#fff!important}.copyright{padding:15px;text-align:center;border-top:1px solid #dfe7e3;background:#fff;color:#68746f;font-size:11px}@media(max-width:1100px){.headerInner{gap:12px}.siteLogo{font-size:23px}.topMenuBtn{padding:0 9px}.pageLayout{grid-template-columns:240px minmax(0,1fr)}}@media(max-width:750px){.siteHeader,.headerInner{height:auto}.headerInner{padding:8px;display:block}.siteLogo{display:block;margin-bottom:8px;font-size:22px}.topMenu{justify-content:flex-start}.topMenuBtn{height:38px}.pageLayout{display:flex;flex-direction:column;padding:8px}.discoverSideMenu{position:static;width:100%}.discoverSideList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.discoverSideBtn{margin:0}.heroCard{align-items:flex-start;flex-direction:column}.heroCard h1{font-size:25px}.rotaForm{grid-template-columns:1fr}.weather-grid{grid-template-columns:repeat(2,1fr)}.statsGrid,.sponsorGrid{grid-template-columns:repeat(2,1fr)}#map{height:430px}.footerGrid{grid-template-columns:1fr 1fr}.heroBadge{display:none}}
/* =====================================================
   İLÇE MARKER POPUP
===================================================== */

.districtMapPopup{
    min-width:190px;
    max-width:240px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
    text-align:center;
}

.districtPopupIcon{
    width:42px;
    height:42px;
    margin:0 auto 7px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef8f2;
    border-radius:50%;

    font-size:22px;
}

.districtMapPopup h3{
    margin:4px 0 6px;

    color:#173f32;

    font-size:16px;
    line-height:1.25;

    font-weight:800;
}

.districtPopupBadge{
    display:inline-block;

    padding:4px 8px;

    background:#e9f8ef;
    color:#087f5b;

    border-radius:6px;

    font-size:9px;
    font-weight:800;
}

.districtMapPopup p{
    margin:9px 0;

    color:#68746f;

    font-size:10px;
    line-height:1.5;
}


/* =====================================================
   GOOGLE YOL TARİFİ
===================================================== */

.districtMapPopup .mapDirection{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin-top:10px;
    padding:10px 12px;

    background:#087f5b;
    border:1px solid #087f5b;
    border-radius:8px;

    color:#fff !important;
    text-decoration:none !important;

    font-size:11px;
    font-weight:800;

    transition:
        background .2s ease,
        transform .2s ease;
}

.districtMapPopup .mapDirection:hover{
    background:#066b4d;
    border-color:#066b4d;

    color:#fff !important;

    transform:translateY(-1px);
}
/* =====================================================
   HEADER - DARALTILMIŞ ORTALAMA
===================================================== */

.siteHeader{
    width:min(1200px,calc(100% - 40px)) !important;
    max-width:1200px !important;
    margin:0 auto !important;
    border-radius:0 0 12px 12px;
}

.headerInner{
    width:min(1200px,calc(100% - 40px));
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-left:14px;
    padding-right:14px;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1100px){

    .siteHeader{
        width:calc(100% - 24px);
    }

}


/* =====================================================
   MOBİL
===================================================== */

@media(max-width:750px){

    .siteHeader{
        width:calc(100% - 12px);
        margin:0 auto;
        border-radius:0 0 10px 10px;
    }

    .headerInner{
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
    }

}
#weatherSection,
.weatherCard {
    width: 100%;
}

.weatherHeader {
    margin-bottom: 18px;
}

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

.weatherHeaderIcon {
    font-size: 34px;
}

.weatherHeader h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.weatherHeader p {
    margin: 5px 0 0;
    color: #666;
    font-size: 14px;
}

/* İLÇELER */

.weather-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    margin-bottom: 12px;
    scrollbar-width: thin;
}

.weatherDistrictButton {
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    padding: 10px 15px;
    background: #eef4f1;
    color: #087f5b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.weatherDistrictButton:hover {
    transform: translateY(-1px);
}

.weatherDistrictButton.active {
    background: #087f5b;
    color: #fff;
}

/* YÜKLENİYOR */

.weatherLoading {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 25px;
    border-radius: 14px;
    background: #f5f8f6;
    color: #555;
}

/* GÜNCEL HAVA */

.weatherCurrent {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(300px, 1.4fr);
    gap: 16px;
    margin-bottom: 20px;
}

.weatherCurrentMain {
    min-height: 190px;
    padding: 25px;
    border-radius: 18px;
    background: #087f5b;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.weatherIcon {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 10px;
}

.weatherTemperature {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
}

.weatherDescription {
    margin-top: 7px;
    font-size: 16px;
    font-weight: 600;
}

/* DETAYLAR */

.weatherCurrentDetails {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.weatherDetail {
    min-height: 85px;
    padding: 15px;
    border: 1px solid #e5e9e7;
    border-radius: 14px;
    background: #fff;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 8px;
}

.weatherDetailIcon {
    font-size: 22px;
}

.weatherDetail span:not(.weatherDetailIcon) {
    font-size: 13px;
    color: #666;
}

.weatherDetail strong {
    font-size: 16px;
    color: #222;
    white-space: nowrap;
}

/* 5 GÜNLÜK */

.weatherForecastTitle {
    margin: 15px 0 12px;
    font-size: 20px;
    font-weight: 700;
}

.weatherDays {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
}

.weatherDay {
    padding: 16px;
    border: 1px solid #e4e8e6;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0,0,0,.05);
}

.weatherDayHeader {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.weatherDayHeader strong {
    font-size: 15px;
    color: #222;
}

.weatherDayHeader span {
    font-size: 12px;
    color: #777;
}

.weatherDayIcon {
    margin: 15px 0 8px;
    font-size: 38px;
}

.weatherDayText {
    min-height: 38px;
    font-size: 13px;
    color: #555;
}

.weatherDayTemp {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin: 12px 0;
}

.weatherMax {
    font-size: 24px;
    font-weight: 800;
    color: #222;
}

.weatherMin {
    font-size: 17px;
    color: #777;
}

.weatherDayRain,
.weatherDayWind {
    padding-top: 8px;
    border-top: 1px solid #edf0ee;
    margin-top: 8px;
    font-size: 13px;
    color: #555;
}

.weatherDayRain small {
    display: block;
    margin-top: 3px;
    color: #888;
}

.weatherDayWind {
    border-top: 0;
    margin-top: 4px;
}

/* HATA */

.weatherError {
    padding: 25px;
    border-radius: 14px;
    background: #fff4f4;
    color: #b42318;
    text-align: center;
}

.weatherError strong,
.weatherError span {
    display: block;
}

.weatherError span {
    margin-top: 6px;
    font-size: 13px;
}

/* KAYNAK */

.weatherSource {
    margin-top: 14px;
    font-size: 11px;
    color: #888;
    text-align: right;
}

/* MOBİL */

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

    .weatherDays {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 600px) {
    .weatherHeader h2 {
        font-size: 20px;
    }

    .weatherHeader p {
        font-size: 13px;
    }

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

    .weatherDetail {
        grid-template-columns: auto 1fr;
    }

    .weatherDetail strong {
        grid-column: 2;
        margin-top: 3px;
    }

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

    .weatherCurrentMain {
        min-height: 170px;
    }

    .weatherTemperature {
        font-size: 42px;
    }
}
/* =====================================================
   HAVA DURUMU - MİNİMAL / KOMPAKT TASARIM
===================================================== */

#weatherSection,
.weatherCard{
    width:100%;
    margin:0;
    padding:0;

    background:transparent;
    border:0;
    box-shadow:none;
    border-radius:0;

    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
    color:#183126;
}


/* =====================================================
   BAŞLIK
===================================================== */

#weatherSection .cardHeader,
.weatherCard .cardHeader{
    padding:10px 4px 8px;
    background:transparent;
    border:0;
}

#weatherSection .cardHeader h2,
.weatherCard .cardHeader h2{
    margin:0;

    color:#087b59;
    font-size:19px;
    font-weight:800;
    letter-spacing:-.3px;
}

#weatherSection .cardHeader p,
.weatherCard .cardHeader p{
    margin:2px 0 0;

    color:#7b8881;
    font-size:10px;
}


/* =====================================================
   İLÇE BUTONLARI
===================================================== */

#weatherDistricts,
.weather-tabs{
    display:flex;
    gap:5px;

    padding:5px 0 8px;

    overflow-x:auto;
    scrollbar-width:none;

    background:transparent;
}

#weatherDistricts::-webkit-scrollbar,
.weather-tabs::-webkit-scrollbar{
    display:none;
}

#weatherDistricts button,
.weather-tabs button,
.weather-tab{
    flex:0 0 auto;

    height:30px;
    padding:0 10px;

    border:1px solid #dbe5df;
    border-radius:7px;

    background:#fff;
    color:#28734e;

    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:700;

    cursor:pointer;
}

#weatherDistricts button.active,
.weather-tabs button.active,
.weather-tab.active{
    background:#087b59;
    border-color:#087b59;
    color:#fff;
}


/* =====================================================
   ANA HAVA ALANI
===================================================== */

#weatherForecast,
.weather-grid{
    display:block;

    padding:3px 0 8px;

    background:transparent;
}


/* =====================================================
   BUGÜN
===================================================== */

.weatherCurrent{
    width:100%;

    min-height:125px;

    padding:10px 4px;

    display:grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:center;

    gap:15px;

    background:transparent;
    border:0;
    box-shadow:none;
}


/* İlçe */

.weatherCurrentHeader{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.weatherCurrentTitle{
    font-size:14px;
    font-weight:800;
    color:#183126;
}

.weatherCurrentDate{
    font-size:9px;
    color:#919b96;
}


/* Hava ikonu */

.weatherCurrentIcon{
    display:flex;
    align-items:center;
    justify-content:center;

    height:75px;

    font-size:48px;
}


/* Sıcaklık */

.weatherCurrentMain{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.weatherCurrentTemp{
    margin:0;

    color:#087b59;

    font-size:40px;
    font-weight:800;
    line-height:1;

    letter-spacing:-1px;
}

.weatherCurrentTemp span{
    font-size:18px;
}

.weatherCurrentDescription{
    margin-top:4px;

    color:#586960;

    font-size:10px;
    font-weight:600;
}

.weatherCurrentFeels{
    margin-top:2px;

    color:#8a9690;

    font-size:9px;
}


/* =====================================================
   DETAYLAR
===================================================== */

.weatherCurrentDetails{
    grid-column:1/-1;

    display:flex;
    justify-content:flex-start;
    align-items:center;

    gap:22px;

    padding-top:7px;

    border-top:1px solid #e7eee9;
}

.weatherDetail{
    display:flex;
    align-items:center;
    gap:4px;

    background:transparent;
    border:0;
    padding:0;
}

.weatherDetailLabel{
    margin:0;

    color:#8a9690;
    font-size:8px;
}

.weatherDetailValue{
    color:#183126;
    font-size:10px;
    font-weight:800;
}


/* =====================================================
   5 GÜNLÜK ALAN
===================================================== */

.weatherDays{
    width:100%;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    border-top:1px solid #e3ebe6;
}


/* =====================================================
   GÜN KARTLARI
===================================================== */

.weatherDay{
    min-height:135px;

    padding:9px 7px;

    display:flex;
    flex-direction:column;
    align-items:center;

    background:transparent;

    border:0;
    border-right:1px solid #e3ebe6;
    border-radius:0;

    text-align:center;
}

.weatherDay:last-child{
    border-right:0;
}

.weatherDay:hover{
    background:#f6faf8;
}


/* Gün */

.weatherDayName{
    color:#183126;

    font-size:10px;
    font-weight:800;
}

.weatherDayDate{
    margin-top:1px;

    color:#99a29d;

    font-size:8px;
}


/* İkon */

.weatherDayIcon{
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;
}


/* Açıklama */

.weatherDayDescription{
    min-height:25px;

    color:#6e7c75;

    font-size:8px;
    line-height:1.3;
}


/* Sıcaklık */

.weatherDayTemps{
    display:flex;
    align-items:baseline;
    gap:4px;

    margin-top:5px;
}

.weatherDayHigh{
    color:#183126;

    font-size:17px;
    font-weight:800;
}

.weatherDayLow{
    color:#a0aaa4;

    font-size:9px;
}


/* =====================================================
   YAĞIŞ / RÜZGAR
===================================================== */

.weatherDayDetails{
    width:100%;

    margin-top:5px;
    padding-top:5px;

    border-top:1px solid #edf1ee;

    display:flex;
    flex-direction:column;
    gap:2px;

    color:#8a9690;

    font-size:7px;
}

.weatherDayDetails span{
    display:block;
}


/* =====================================================
   KAYNAK
===================================================== */

.weatherSource{
    margin-top:4px;

    text-align:right;

    color:#9ba49f;

    font-size:7px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width:800px){

    .weatherCurrent{
        grid-template-columns:90px 1fr auto;
    }

    .weatherCurrentTemp{
        font-size:34px;
    }

    .weatherDay{
        min-width:105px;
    }
}


/* =====================================================
   MOBİL
===================================================== */

@media (max-width:600px){

    .weatherCurrent{
        grid-template-columns:70px 1fr auto;
        gap:8px;

        min-height:110px;
    }

    .weatherCurrentTitle{
        font-size:12px;
    }

    .weatherCurrentIcon{
        height:60px;
        font-size:40px;
    }

    .weatherCurrentTemp{
        font-size:32px;
    }

    .weatherCurrentDetails{
        gap:12px;
    }

    .weatherDays{
        grid-template-columns:repeat(5,100px);

        overflow-x:auto;
    }

    .weatherDay{
        min-width:100px;
        min-height:130px;
    }
}


/* =====================================================
   iPHONE
===================================================== */

@media (max-width:430px){

    #weatherSection .cardHeader,
    .weatherCard .cardHeader{
        padding:7px 2px;
    }

    #weatherSection .cardHeader h2,
    .weatherCard .cardHeader h2{
        font-size:17px;
    }

    #weatherDistricts,
    .weather-tabs{
        padding:4px 0 6px;
    }

    #weatherDistricts button,
    .weather-tabs button,
    .weather-tab{
        height:28px;
        padding:0 9px;
        font-size:8px;
    }

    .weatherCurrent{
        grid-template-columns:60px 1fr auto;

        min-height:100px;
        padding:7px 2px;

        gap:7px;
    }

    .weatherCurrentTitle{
        font-size:11px;
    }

    .weatherCurrentIcon{
        height:52px;
        font-size:34px;
    }

    .weatherCurrentTemp{
        font-size:29px;
    }

    .weatherCurrentDescription{
        font-size:8px;
    }

    .weatherCurrentDetails{
        gap:8px;
        padding-top:5px;
    }

    .weatherDetailLabel{
        font-size:7px;
    }

    .weatherDetailValue{
        font-size:8px;
    }

    .weatherDays{
        grid-template-columns:repeat(5,88px);
    }

    .weatherDay{
        min-width:88px;
        min-height:118px;
        padding:7px 4px;
    }

    .weatherDayIcon{
        height:40px;
        font-size:25px;
    }

    .weatherDayHigh{
        font-size:15px;
    }

    .weatherDayDescription{
        font-size:7px;
    }
}
/* =====================================================
   HAVA DURUMU - KOMPAKT MİNİMAL TASARIM
   ESKİ YEŞİL KARTI TAMAMEN KALDIRIR
===================================================== */

/* ANA ALAN */
#weatherSection,
.weatherCard{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    overflow:visible !important;
}


/* =====================================================
   BAŞLIK
===================================================== */

#weatherSection .cardHeader,
.weatherCard .cardHeader{
    padding:8px 4px 6px !important;
    margin:0 !important;

    background:transparent !important;
    border:0 !important;
}

#weatherSection .cardHeader h2,
.weatherCard .cardHeader h2{
    margin:0 !important;

    color:#087b59 !important;
    font-size:20px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

#weatherSection .cardHeader p,
.weatherCard .cardHeader p{
    margin:3px 0 0 !important;

    color:#7b8881 !important;
    font-size:10px !important;
}


/* =====================================================
   İLÇELER
===================================================== */

#weatherDistricts,
.weather-tabs{
    display:flex !important;
    gap:5px !important;

    width:100% !important;

    padding:5px 0 7px !important;
    margin:0 !important;

    background:transparent !important;
    border:0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch;
}

#weatherDistricts::-webkit-scrollbar,
.weather-tabs::-webkit-scrollbar{
    display:none;
}

#weatherDistricts button,
.weather-tabs button,
.weather-tab{
    flex:0 0 auto !important;

    height:30px !important;
    min-height:30px !important;

    margin:0 !important;
    padding:0 10px !important;

    border:1px solid #d9e4dd !important;
    border-radius:7px !important;

    background:#fff !important;
    color:#28734e !important;

    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif !important;
    font-size:9px !important;
    font-weight:700 !important;
}

#weatherDistricts button.active,
.weather-tabs button.active,
.weather-tab.active{
    background:#087b59 !important;
    border-color:#087b59 !important;
    color:#fff !important;
}


/* =====================================================
   TAHMİN ANA ALANI
===================================================== */

#weatherForecast,
.weather-grid{
    width:100% !important;

    display:block !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
}


/* =====================================================
   YEŞİL KARTI TAMAMEN YOK ET
===================================================== */

.weatherCurrent{
    width:100% !important;

    min-height:0 !important;
    height:auto !important;

    margin:0 !important;
    padding:10px 4px 12px !important;

    display:grid !important;

    grid-template-columns:90px 70px 1fr !important;

    align-items:center !important;

    column-gap:12px !important;
    row-gap:8px !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    color:#183126 !important;
}


/* Eski yeşil arka plan */
.weatherCurrent::before,
.weatherCurrent::after{
    display:none !important;
}


/* =====================================================
   İLÇE / BUGÜN
===================================================== */

.weatherCurrentHeader{
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;

    background:transparent !important;
}

.weatherCurrentTitle{
    color:#183126 !important;

    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

.weatherCurrentDate{
    color:#8b9791 !important;

    font-size:9px !important;
}


/* =====================================================
   HAVA İKONU
===================================================== */

.weatherCurrentIcon{
    width:auto !important;
    height:58px !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

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

    background:transparent !important;

    font-size:38px !important;
}


/* =====================================================
   SICAKLIK
===================================================== */

.weatherCurrentMain{
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:flex-start !important;
    justify-content:center !important;

    background:transparent !important;
}

.weatherCurrentTemp{
    margin:0 !important;
    padding:0 !important;

    color:#087b59 !important;

    font-size:34px !important;
    line-height:1 !important;
    font-weight:800 !important;

    letter-spacing:-1px !important;
}

.weatherCurrentTemp span{
    font-size:16px !important;
}

.weatherCurrentDescription{
    margin:3px 0 0 !important;

    color:#52645a !important;

    font-size:9px !important;
    font-weight:600 !important;
}

.weatherCurrentFeels{
    margin:2px 0 0 !important;

    color:#8b9791 !important;

    font-size:8px !important;
}


/* =====================================================
   DETAYLAR
===================================================== */

.weatherCurrentDetails{
    grid-column:1/-1 !important;

    width:100% !important;

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

    gap:22px !important;

    margin:0 !important;
    padding:8px 0 0 !important;

    border-top:1px solid #e5ece8 !important;

    background:transparent !important;
}

.weatherDetail{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
}

.weatherDetailLabel{
    margin:0 !important;

    color:#89958e !important;
    font-size:8px !important;
}

.weatherDetailValue{
    color:#183126 !important;
    font-size:10px !important;
    font-weight:800 !important;
}


/* =====================================================
   5 GÜNLÜK BAŞLIK
===================================================== */

.weatherDaysTitle{
    margin:8px 0 6px !important;
    padding:0 2px !important;

    color:#183126 !important;

    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:800 !important;

    background:transparent !important;
}


/* =====================================================
   5 GÜNLÜK
===================================================== */

.weatherDays{
    width:100% !important;

    display:grid !important;

    grid-template-columns:repeat(5,minmax(0,1fr)) !important;

    gap:0 !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border-top:1px solid #e5ece8 !important;
}


/* =====================================================
   GÜN KARTI - KUTUSUZ
===================================================== */

.weatherDay{
    min-width:0 !important;
    min-height:145px !important;

    margin:0 !important;
    padding:10px 7px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    background:transparent !important;

    border:0 !important;
    border-right:1px solid #e5ece8 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    text-align:center !important;
}

.weatherDay:last-child{
    border-right:0 !important;
}

.weatherDay:hover{
    background:#f7faf8 !important;
    box-shadow:none !important;
    transform:none !important;
}


/* Gün */

.weatherDayName{
    color:#183126 !important;

    font-size:10px !important;
    font-weight:800 !important;
}

.weatherDayDate{
    margin:2px 0 0 !important;

    color:#929d97 !important;
    font-size:8px !important;
}


/* İkon */

.weatherDayIcon{
    height:42px !important;
    min-height:42px !important;

    margin:3px 0 !important;

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

    font-size:28px !important;
}


/* Açıklama */

.weatherDayDescription{
    min-height:24px !important;

    margin:0 !important;

    color:#68766f !important;

    font-size:8px !important;
    line-height:1.25 !important;
}


/* Dereceler */

.weatherDayTemps{
    display:flex !important;
    align-items:baseline !important;
    justify-content:center !important;

    gap:4px !important;

    margin:6px 0 0 !important;
}

.weatherDayHigh{
    color:#183126 !important;

    font-size:18px !important;
    font-weight:800 !important;
}

.weatherDayLow{
    color:#9ba49f !important;

    font-size:9px !important;
}


/* Alt bilgiler */

.weatherDayDetails{
    width:100% !important;

    margin:5px 0 0 !important;
    padding:5px 0 0 !important;

    border-top:1px solid #edf1ee !important;

    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;

    color:#8a9690 !important;

    font-size:7px !important;
}

.weatherDayDetails span{
    display:block !important;
}


/* Kaynak */

.weatherSource{
    margin:4px 0 0 !important;

    text-align:right !important;

    color:#9aa39e !important;
    font-size:7px !important;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width:800px){

    .weatherCurrent{
        grid-template-columns:80px 55px 1fr !important;
        column-gap:9px !important;
    }

    .weatherCurrentTemp{
        font-size:30px !important;
    }

    .weatherDays{
        overflow-x:auto !important;

        grid-template-columns:repeat(5,115px) !important;
    }

    .weatherDay{
        min-width:115px !important;
    }
}


/* =====================================================
   iPHONE
===================================================== */

@media (max-width:430px){

    #weatherSection .cardHeader,
    .weatherCard .cardHeader{
        padding:5px 2px !important;
    }

    #weatherSection .cardHeader h2,
    .weatherCard .cardHeader h2{
        font-size:17px !important;
    }

    #weatherSection .cardHeader p,
    .weatherCard .cardHeader p{
        font-size:8px !important;
    }

    #weatherDistricts,
    .weather-tabs{
        padding:4px 0 5px !important;
    }

    #weatherDistricts button,
    .weather-tabs button,
    .weather-tab{
        height:27px !important;
        min-height:27px !important;

        padding:0 8px !important;

        font-size:8px !important;
    }

    .weatherCurrent{
        grid-template-columns:55px 48px 1fr !important;

        column-gap:7px !important;
        row-gap:5px !important;

        padding:7px 2px 9px !important;
    }

    .weatherCurrentTitle{
        font-size:10px !important;
    }

    .weatherCurrentIcon{
        height:45px !important;
        font-size:32px !important;
    }

    .weatherCurrentTemp{
        font-size:28px !important;
    }

    .weatherCurrentTemp span{
        font-size:13px !important;
    }

    .weatherCurrentDescription{
        font-size:8px !important;
    }

    .weatherCurrentFeels{
        font-size:7px !important;
    }

    .weatherCurrentDetails{
        gap:9px !important;
        padding-top:6px !important;
    }

    .weatherDetailLabel{
        font-size:7px !important;
    }

    .weatherDetailValue{
        font-size:8px !important;
    }

    .weatherDaysTitle{
        margin:6px 0 5px !important;
        font-size:12px !important;
    }

    .weatherDays{
        grid-template-columns:repeat(5,92px) !important;
        overflow-x:auto !important;
    }

    .weatherDay{
        min-width:92px !important;
        min-height:125px !important;

        padding:8px 4px !important;
    }

    .weatherDayName{
        font-size:9px !important;
    }

    .weatherDayIcon{
        height:36px !important;
        font-size:24px !important;
    }

    .weatherDayDescription{
        font-size:7px !important;
    }

    .weatherDayHigh{
        font-size:15px !important;
    }

    .weatherDayLow{
        font-size:8px !important;
    }
}
/* =====================================================
   BUGÜN - TEK SATIR MİNİMAL TASARIM
===================================================== */

.weatherCurrent{
    width:100% !important;

    min-height:0 !important;
    height:auto !important;

    margin:0 !important;
    padding:10px 4px !important;

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

    gap:22px !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}


/* Eski dekoratif yeşil alanlar */
.weatherCurrent::before,
.weatherCurrent::after{
    display:none !important;
}


/* =====================================================
   İLÇE / BUGÜN
===================================================== */

.weatherCurrentHeader{
    display:flex !important;
    flex-direction:column !important;

    width:auto !important;
    min-width:auto !important;

    margin:0 !important;
    padding:0 !important;
}

.weatherCurrentTitle{
    font-size:13px !important;
    font-weight:800 !important;
    color:#183126 !important;
    white-space:nowrap !important;
}

.weatherCurrentDate{
    font-size:8px !important;
    color:#929d97 !important;
}


/* =====================================================
   HAVA İKONU
===================================================== */

.weatherCurrentIcon{
    width:auto !important;
    height:45px !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

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

    font-size:34px !important;
}


/* =====================================================
   SICAKLIK + AÇIKLAMA
===================================================== */

.weatherCurrentMain{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;

    gap:8px !important;

    margin:0 !important;
    padding:0 !important;
}

.weatherCurrentTemp{
    margin:0 !important;
    padding:0 !important;

    color:#183126 !important;

    font-size:30px !important;
    line-height:1 !important;
    font-weight:800 !important;

    letter-spacing:-1px !important;
}

.weatherCurrentTemp span{
    font-size:14px !important;
}

.weatherCurrentDescription{
    margin:0 !important;

    color:#5d6d65 !important;

    font-size:10px !important;
    font-weight:600 !important;

    white-space:nowrap !important;
}

.weatherCurrentFeels{
    margin:0 !important;

    color:#8a9690 !important;
    font-size:9px !important;

    white-space:nowrap !important;
}


/* =====================================================
   ALT DETAYLAR DA AYNI SATIRA BAĞLANSIN
===================================================== */

.weatherCurrentDetails{
    width:auto !important;

    margin:0 !important;
    padding:0 0 0 18px !important;

    display:flex !important;
    align-items:center !important;

    gap:20px !important;

    border-top:0 !important;
    border-left:1px solid #e4ebe7 !important;

    background:transparent !important;
}

.weatherDetail{
    display:flex !important;
    align-items:center !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;

    white-space:nowrap !important;
}

.weatherDetailLabel{
    margin:0 !important;

    color:#89958e !important;
    font-size:9px !important;
}

.weatherDetailValue{
    color:#183126 !important;
    font-size:11px !important;
    font-weight:800 !important;
}


/* =====================================================
   5 GÜNLÜK BAŞLIK
===================================================== */

.weatherDaysTitle{
    margin:8px 0 5px !important;
    padding:0 !important;

    font-size:13px !important;
    font-weight:800 !important;
    color:#183126 !important;
}


/* =====================================================
   5 GÜNLÜK TAHMİN
===================================================== */

.weatherDays{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;

    margin:0 !important;
    padding:0 !important;

    border-top:1px solid #e4ebe7 !important;

    background:transparent !important;
}

.weatherDay{
    min-height:125px !important;

    margin:0 !important;
    padding:8px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    background:transparent !important;

    border:0 !important;
    border-right:1px solid #e4ebe7 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.weatherDay:last-child{
    border-right:0 !important;
}

.weatherDay:hover{
    background:#f7faf8 !important;
    transform:none !important;
    box-shadow:none !important;
}

.weatherDayName{
    font-size:10px !important;
    font-weight:800 !important;
}

.weatherDayDate{
    margin-top:1px !important;
    font-size:8px !important;
}

.weatherDayIcon{
    height:38px !important;
    font-size:27px !important;
    margin:4px 0 !important;
}

.weatherDayDescription{
    min-height:20px !important;
    font-size:8px !important;
}

.weatherDayTemps{
    margin-top:4px !important;
}

.weatherDayHigh{
    font-size:17px !important;
}

.weatherDayLow{
    font-size:9px !important;
}


/* =====================================================
   iPHONE
===================================================== */

@media (max-width:600px){

    .weatherCurrent{
        display:flex !important;
        flex-wrap:wrap !important;

        gap:10px 15px !important;

        padding:7px 2px !important;
    }

    .weatherCurrentDetails{
        width:100% !important;

        padding:7px 0 0 !important;

        border-left:0 !important;
        border-top:1px solid #e4ebe7 !important;

        justify-content:space-between !important;

        gap:8px !important;
    }

    .weatherCurrentTitle{
        font-size:11px !important;
    }

    .weatherCurrentIcon{
        height:36px !important;
        font-size:29px !important;
    }

    .weatherCurrentTemp{
        font-size:25px !important;
    }

    .weatherCurrentDescription{
        font-size:8px !important;
    }

    .weatherDays{
        grid-template-columns:repeat(5,90px) !important;
        overflow-x:auto !important;
    }

    .weatherDay{
        min-width:90px !important;
        min-height:120px !important;
    }
}
/* =====================================================
   BUGÜNKÜ HAVA - TEK YEŞİL SATIR
===================================================== */

.weatherCurrent{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;

    margin:0 !important;
    padding:10px 14px !important;

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

    gap:16px !important;

    background:#087f5b !important;
    border:0 !important;
    border-radius:8px !important;
    box-shadow:none !important;

    color:#ffffff !important;
}

/* Eski dekoratif alanları kaldır */
.weatherCurrent::before,
.weatherCurrent::after{
    display:none !important;
}

/* İlçe adı */
.weatherCurrentHeader{
    width:auto !important;
    min-width:auto !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;

    gap:1px !important;
}

.weatherCurrentTitle{
    color:#ffffff !important;

    font-size:12px !important;
    font-weight:800 !important;

    white-space:nowrap !important;
}

.weatherCurrentDate{
    color:rgba(255,255,255,.72) !important;
    font-size:8px !important;
}

/* Hava ikonu */
.weatherCurrentIcon{
    width:auto !important;
    height:42px !important;
    min-height:42px !important;

    margin:0 !important;
    padding:0 !important;

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

    font-size:34px !important;
}

/* Sıcaklık ve açıklama */
.weatherCurrentMain{
    display:flex !important;
    align-items:center !important;

    gap:7px !important;

    margin:0 !important;
    padding:0 !important;
}

.weatherCurrentTemp{
    margin:0 !important;
    padding:0 !important;

    color:#ffffff !important;

    font-size:30px !important;
    line-height:1 !important;
    font-weight:800 !important;

    letter-spacing:-1px !important;
}

.weatherCurrentTemp span{
    font-size:14px !important;
}

.weatherCurrentDescription{
    margin:0 !important;

    color:#ffffff !important;

    font-size:10px !important;
    font-weight:700 !important;

    white-space:nowrap !important;
}

.weatherCurrentFeels{
    margin:0 !important;

    color:rgba(255,255,255,.75) !important;

    font-size:8px !important;
    white-space:nowrap !important;
}


/* =====================================================
   DETAYLAR - AYNI SATIR
===================================================== */

.weatherCurrentDetails{
    width:auto !important;

    margin:0 !important;
    padding:0 0 0 14px !important;

    display:flex !important;
    align-items:center !important;

    gap:18px !important;

    border:0 !important;
    border-left:1px solid rgba(255,255,255,.25) !important;

    background:transparent !important;
}

.weatherDetail{
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:4px !important;

    background:transparent !important;
    border:0 !important;

    white-space:nowrap !important;
}

.weatherDetailLabel{
    margin:0 !important;

    color:rgba(255,255,255,.72) !important;

    font-size:8px !important;
}

.weatherDetailValue{
    color:#ffffff !important;

    font-size:10px !important;
    font-weight:800 !important;
}


/* =====================================================
   MOBİL
===================================================== */

@media (max-width:700px){

    .weatherCurrent{
        padding:9px 10px !important;
        gap:10px !important;

        flex-wrap:wrap !important;
    }

    .weatherCurrentTitle{
        font-size:10px !important;
    }

    .weatherCurrentIcon{
        height:34px !important;
        min-height:34px !important;

        font-size:28px !important;
    }

    .weatherCurrentTemp{
        font-size:25px !important;
    }

    .weatherCurrentDescription{
        font-size:8px !important;
    }

    .weatherCurrentDetails{
        width:100% !important;

        padding:6px 0 0 !important;

        border-left:0 !important;
        border-top:1px solid rgba(255,255,255,.22) !important;

        justify-content:space-between !important;

        gap:7px !important;
    }
}


/* =====================================================
   iPHONE
===================================================== */

@media (max-width:430px){

    .weatherCurrent{
        gap:7px !important;
        padding:8px !important;
    }

    .weatherCurrentHeader{
        max-width:65px !important;
    }

    .weatherCurrentIcon{
        font-size:25px !important;
    }

    .weatherCurrentTemp{
        font-size:23px !important;
    }

    .weatherCurrentDescription{
        font-size:7px !important;
    }

    .weatherCurrentDetails{
        gap:5px !important;
    }

    .weatherDetailLabel{
        font-size:6px !important;
    }

    .weatherDetailValue{
        font-size:8px !important;
    }
}
/* =====================================================
   HAVA DURUMU - ÇOK KOMPAKT YEŞİL SATIR
===================================================== */

.weatherCurrent{
    width:100% !important;
    height:68px !important;
    min-height:68px !important;

    margin:0 !important;
    padding:7px 14px !important;

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

    gap:14px !important;

    background:#087f5b !important;
    border:0 !important;
    border-radius:8px !important;
    box-shadow:none !important;

    color:#fff !important;

    overflow:hidden !important;
}

/* Eski dekorasyonları kaldır */
.weatherCurrent::before,
.weatherCurrent::after{
    display:none !important;
}


/* =====================================================
   İKON
===================================================== */

.weatherCurrentIcon{
    width:42px !important;
    min-width:42px !important;
    height:48px !important;
    min-height:48px !important;

    margin:0 !important;
    padding:0 !important;

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

    background:transparent !important;

    font-size:34px !important;
}


/* =====================================================
   SICAKLIK + AÇIKLAMA
===================================================== */

.weatherCurrentMain{
    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    margin:0 !important;
    padding:0 !important;

    white-space:nowrap !important;
}

.weatherCurrentTemp{
    margin:0 !important;
    padding:0 !important;

    color:#ffffff !important;

    font-size:34px !important;
    line-height:1 !important;
    font-weight:800 !important;
}

.weatherCurrentTemp span{
    color:#ffffff !important;
    font-size:16px !important;
}

.weatherCurrentDescription{
    margin:0 !important;

    color:#ffffff !important;

    font-size:11px !important;
    font-weight:700 !important;

    white-space:nowrap !important;
}

.weatherCurrentFeels{
    color:#ffffff !important;
    font-size:9px !important;
}


/* =====================================================
   İLÇE / TARİH
===================================================== */

.weatherCurrentHeader{
    display:flex !important;
    flex-direction:column !important;

    width:auto !important;
    min-width:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#ffffff !important;
}

.weatherCurrentTitle{
    color:#ffffff !important;

    font-size:11px !important;
    font-weight:800 !important;

    white-space:nowrap !important;
}

.weatherCurrentDate{
    color:rgba(255,255,255,.75) !important;
    font-size:7px !important;
}


/* =====================================================
   DETAYLAR
===================================================== */

.weatherCurrentDetails{
    width:auto !important;

    margin:0 !important;
    padding:0 0 0 14px !important;

    display:flex !important;
    align-items:center !important;

    gap:18px !important;

    border:0 !important;
    border-left:1px solid rgba(255,255,255,.28) !important;

    background:transparent !important;

    white-space:nowrap !important;
}

.weatherDetail{
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:4px !important;

    background:transparent !important;
    border:0 !important;
}

.weatherDetailLabel{
    color:rgba(255,255,255,.75) !important;
    font-size:8px !important;
}

.weatherDetailValue{
    color:#ffffff !important;
    font-size:10px !important;
    font-weight:800 !important;
}


/* =====================================================
   ALTTAKİ 5 GÜNLÜK ALANI DA YAKIN OLSUN
===================================================== */

.weatherDaysTitle{
    margin:8px 0 5px !important;
    padding:0 !important;

    color:#183126 !important;
    font-size:13px !important;
}

.weatherDays{
    margin:0 !important;
    padding:0 !important;
}


/* =====================================================
   iPHONE / MOBİL
===================================================== */

@media (max-width:700px){

    .weatherCurrent{
        height:58px !important;
        min-height:58px !important;

        padding:5px 8px !important;

        gap:8px !important;
    }

    .weatherCurrentIcon{
        width:30px !important;
        min-width:30px !important;

        height:40px !important;
        min-height:40px !important;

        font-size:26px !important;
    }

    .weatherCurrentTemp{
        font-size:26px !important;
    }

    .weatherCurrentTemp span{
        font-size:12px !important;
    }

    .weatherCurrentDescription{
        font-size:8px !important;
    }

    .weatherCurrentDetails{
        gap:9px !important;
        padding-left:8px !important;
    }

    .weatherDetailLabel{
        font-size:6px !important;
    }

    .weatherDetailValue{
        font-size:8px !important;
    }
}


@media (max-width:430px){

    .weatherCurrent{
        height:54px !important;
        min-height:54px !important;

        padding:4px 7px !important;

        gap:6px !important;
    }

    .weatherCurrentIcon{
        width:27px !important;
        min-width:27px !important;

        font-size:23px !important;
    }

    .weatherCurrentTemp{
        font-size:23px !important;
    }

    .weatherCurrentDescription{
        font-size:7px !important;
    }

    .weatherCurrentDetails{
        gap:6px !important;
        padding-left:6px !important;
    }

    .weatherDetailLabel{
        font-size:5px !important;
    }

    .weatherDetailValue{
        font-size:7px !important;
    }
}
/* =====================================================
   YEŞİL HAVA SATIRI - TÜM DETAYLAR BEYAZ
===================================================== */

.weatherCurrentDetails{
    color:#ffffff !important;
}

.weatherCurrentDetails *{
    color:#ffffff !important;
}

.weatherCurrentDetails .weatherDetailLabel{
    color:#ffffff !important;
    opacity:1 !important;
}

.weatherCurrentDetails .weatherDetailValue{
    color:#ffffff !important;
    opacity:1 !important;
    font-weight:800 !important;
}
/* =========================================
   RİZE'Yİ KEŞFET - BAĞIMSIZ SOL BÖLÜM
   ========================================= */

.rizeKesfetSideSection {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.rizeKesfetSideBtn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    box-sizing: border-box;

    text-decoration: none;
    border-radius: 12px;

    background: linear-gradient(135deg, #0f766e, #159a8c);
    color: #fff;

    transition: all 0.2s ease;
}

.rizeKesfetSideBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0,0,0,0.18);
}

.rizeKesfetIcon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: rgba(255,255,255,0.18);
    font-size: 21px;
}

.rizeKesfetText {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rizeKesfetText strong {
    font-size: 15px;
    line-height: 1.2;
}

.rizeKesfetText small {
    font-size: 11px;
    opacity: 0.85;
    line-height: 1.2;
}


/* =====================================================
   INDEX MOBILE RESPONSIVE - BİRLEŞTİRİLDİ
   Ayrı index-mobile-responsive.html dosyası artık gerekli değildir.
===================================================== */

/* =====================================================
   INDEX.HTML - iPHONE / MOBİL DÜZEN
   Masaüstü tasarımına dokunmaz
===================================================== */

@media (max-width: 768px) {

    .container {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* =========================
       HEADER
    ========================= */

    header {
        width: 100% !important;
        overflow: hidden !important;
    }

    header .header-inner {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 8px 8px 10px !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
    }

    .brandTicker {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;

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

        overflow: hidden !important;
    }

    .brandLogo {
        font-size: 27px !important;
        white-space: nowrap !important;
    }

    .brandDynamic {
        display: none !important;
    }

    .mainNav {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-wrap: nowrap !important;

        gap: 7px !important;
        padding: 2px 0 5px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mainNav::-webkit-scrollbar {
        display: none;
    }

    .topMenuBtn {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        min-height: 42px !important;

        padding: 0 12px !important;
        border-radius: 12px !important;

        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .topMenuBtn > span:first-child {
        font-size: 17px !important;
    }


    /* =========================
       HARİTA
    ========================= */

    #map-section {
        width: 100% !important;
        overflow: hidden !important;
    }

    #map {
        width: 100% !important;
        min-height: 420px !important;
        height: 420px !important;
        border-radius: 14px !important;
    }


    /* =========================
       ROTA
    ========================= */

    .rotaSection {
        width: 100% !important;
        overflow: hidden !important;
    }

    .rotaBox {
        width: 100% !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .rotaTitle h2 {
        font-size: 24px !important;
    }

    .rotaTitle p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .rotaForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .rotaInput {
        width: 100% !important;
    }

    .rotaInput input,
    .rotaBtn {
        width: 100% !important;
        min-height: 46px !important;
    }


    /* =========================
       BÖLÜM BAŞLIKLARI
    ========================= */

    .section-title {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .section-title h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .section-title p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }


    /* =========================
       ULAŞIM MESAFELERİ
    ========================= */

    .districtDistanceSection {
        width: 100% !important;
        overflow: hidden !important;
    }

    #districtDistances {
        width: 100% !important;
        max-width: 100% !important;
    }

    #homeDistanceTable {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .homeDistanceTableInner {
        min-width: 620px !important;
    }


    /* =========================
       RİZE'NİN DEĞERLERİ
    ========================= */

    .homeValuesSection {
        width: 100% !important;
        overflow: hidden !important;
        padding-top: 35px !important;
    }

    .valuesShowcaseTitle {
        margin-bottom: 18px !important;
        gap: 8px !important;
    }

    .valuesShowcaseTitle span {
        font-size: 30px !important;
    }

    .valuesShowcaseTitle h2 {
        font-size: 27px !important;
        text-align: center !important;
    }

    .valuesShowcaseList {
        width: 100% !important;
        gap: 12px !important;
    }

    .valueShowcaseCard {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        border-radius: 17px !important;
    }

    .valueVisual {
        width: 100% !important;
        height: 135px !important;
        min-height: 135px !important;
    }

    .valueVisualEmoji {
        font-size: 46px !important;
    }

    .valueVisualTitle {
        font-size: 11px !important;
        margin-top: 9px !important;
    }

    .valueShowcaseContent {
        width: 100% !important;
        min-width: 0 !important;

        padding: 15px 13px 9px !important;
        gap: 11px !important;
    }

    .valueShowcaseIcon {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;

        font-size: 21px !important;
    }

    .valueShowcaseText {
        min-width: 0 !important;
    }

    .valueShowcaseText h3 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    .valueShowcaseText p {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin-bottom: 9px !important;
    }

    .valueShowcaseItems {
        width: 100% !important;
        overflow: hidden !important;

        font-size: 11px !important;
        line-height: 1.4 !important;

        padding: 8px 9px !important;
        border-radius: 9px !important;
    }

    .valueShowcaseButton {
        width: calc(100% - 26px) !important;
        min-height: 52px !important;

        margin: 0 13px 13px !important;
        padding: 7px 10px !important;

        border-radius: 13px !important;
    }

    .valueShowcaseButton span {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        font-size: 19px !important;
    }

    .valueShowcaseButton strong {
        flex: 1 !important;
        font-size: 12px !important;
    }

    .valueShowcaseButton b {
        font-size: 24px !important;
    }


    /* =========================
       RAKAMLARLA RİZE
    ========================= */

    .stats-grid {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .stat-card {
        min-width: 0 !important;
        padding: 15px 7px !important;
    }

    .stat-card h3 {
        font-size: 27px !important;
    }

    .stat-card p {
        font-size: 12px !important;
    }


    /* =========================
       HAVA DURUMU
    ========================= */

    .weather-tabs {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .weather-tabs::-webkit-scrollbar {
        display: none;
    }

    .weather-tabs > * {
        flex: 0 0 auto !important;
    }

    .weather-grid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }


    /* =========================
       SPONSORLAR
    ========================= */

    .sponsor-grid {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sponsor-card {
        min-width: 0 !important;
    }


    /* =========================
       FOOTER
    ========================= */

    .footerGrid {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: center !important;
    }

    .footerColumn {
        width: 100% !important;
    }

    .footerColumn ul {
        padding: 0 !important;
        list-style: none !important;
    }
}


/* =====================================================
   DAR iPHONE
===================================================== */

@media (max-width: 430px) {

    .container {
        width: calc(100% - 16px) !important;
    }

    .brandLogo {
        font-size: 24px !important;
    }

    .topMenuBtn {
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    .topMenuBtn > span:first-child {
        font-size: 15px !important;
    }

    #map {
        height: 360px !important;
        min-height: 360px !important;
    }

    .section-title h2 {
        font-size: 25px !important;
    }

    .valuesShowcaseTitle h2 {
        font-size: 24px !important;
    }

    .valueVisual {
        height: 125px !important;
        min-height: 125px !important;
    }

    .valueShowcaseText h3 {
        font-size: 19px !important;
    }

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


/* =====================================================
   ÇOK DAR iPHONE
===================================================== */

@media (max-width: 390px) {

    .container {
        width: calc(100% - 12px) !important;
    }

    .brandLogo {
        font-size: 22px !important;
    }

    .topMenuBtn {
        padding: 0 9px !important;
        font-size: 10px !important;
    }

    #map {
        height: 330px !important;
        min-height: 330px !important;
    }

    .valuesShowcaseTitle h2 {
        font-size: 22px !important;
    }

    .valueVisual {
        height: 115px !important;
        min-height: 115px !important;
    }
}


/* =====================================================
   ANA HARİTA — İLÇE RENKLERİ + MARKERLAR
===================================================== */
#map{position:relative;overflow:hidden;min-height:430px}
.rizeDistrictMarker,
.rizeCategoryMarker{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
.rizeDistrictMarker{z-index:1000!important}
.rizeCategoryMarker{z-index:900!important}
.districtMarkerPin{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50% 50% 50% 0;
    transform:rotate(-45deg);
    background:var(--district-color,#287C35)!important;
    border:3px solid #fff;
    box-shadow:0 3px 9px rgba(0,0,0,.30);
    font-size:19px;line-height:1;
}
.districtMarkerPin::first-letter{transform:rotate(45deg)}
.categoryMarkerPin{
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:#fff;
    border:2px solid #087f5b;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
    font-size:18px;line-height:1;
}
.rizeDistrictLabel{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
.rizeDistrictLabel a{
    display:inline-block;
    padding:4px 7px;
    border-radius:6px;
    background:rgba(255,255,255,.92);
    border:2px solid var(--district-label-color,#287C35);
    color:#173f32!important;
    font-size:10px;
    font-weight:800;
    text-decoration:none!important;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,.16);
}
.homeDistrictNavigation{display:flex!important;gap:6px;overflow-x:auto;padding:4px 0;scrollbar-width:thin}
.homeDistrictNavItem{border-color:var(--home-district-color,#287C35)!important;color:var(--home-district-color,#287C35)!important}
.homeDistrictNavItem:hover{background:color-mix(in srgb,var(--home-district-color,#287C35) 9%,white)!important}
/* =====================================================
   KEŞFET MENÜSÜ
===================================================== */

.discoverExploreMenu{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.18);
}

.discoverExploreItem{
    display:flex;
    align-items:center;
    gap:12px;

    width:100%;
    min-height:48px;

    margin-bottom:7px;
    padding:8px 14px;

    box-sizing:border-box;

    background:#f3f5f4;
    border-radius:14px;

    color:#3d4945;
    text-decoration:none;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.discoverExploreItem:hover{
    background:#e8eeeb;
    transform:translateX(2px);
    box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.discoverExploreItem span{
    width:32px;
    flex:0 0 32px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    line-height:1;
}

.discoverExploreItem strong{
    flex:1;

    font-size:15px;
    font-weight:800;
    line-height:1.2;
}

/* MOBİL */
@media(max-width:700px){

    .discoverExploreItem{
        min-height:46px;
        padding:7px 12px;
        border-radius:13px;
    }

    .discoverExploreItem span{
        width:30px;
        flex-basis:30px;
        font-size:19px;
    }

    .discoverExploreItem strong{
        font-size:14px;
    }
}
/* =========================================================
   RİZE HARİTASI – STANDART SOL MENÜ
   Tüm HTML sayfalarında kullanılabilir.
   Menü HTML yapısı:
   <aside class="discoverSideMenu">
     <div class="discoverSideList">
       <a class="discoverSideBtn">...</a>
     </div>
   </aside>
   Keşfet alt menüsü de aynı stile otomatik dahil edilir.
   ========================================================= */

.pageLayout{
    width:min(1200px,calc(100% - 40px)) !important;
    max-width:1200px !important;
    margin:12px auto !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:250px minmax(0,1fr) !important;
    column-gap:0 !important;
    gap:0 !important;
    align-items:start !important;
}

.discoverSideMenu{
    width:250px !important;
    min-width:250px !important;
    max-width:250px !important;
    padding:12px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

.discoverSideList{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
    margin:0 !important;
    padding:0 !important;
}

.discoverSideBtn,
.discoverExploreItem{
    width:100% !important;
    min-height:38px !important;
    height:38px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    padding:8px 11px !important;
    margin:0 !important;
    gap:6px !important;
    border-radius:7px !important;
    text-decoration:none !important;
    background:#f1f6f3 !important;
    color:#40504a !important;
    border:1px solid transparent !important;
    transform:none !important;
}

.discoverSideBtn:hover,
.discoverExploreItem:hover{
    background:#e7f1ec !important;
    color:#087f5b !important;
    transform:none !important;
}

.discoverSideBtn span,
.discoverExploreItem span{
    width:30px !important;
    min-width:30px !important;
    font-size:18px !important;
    line-height:1 !important;
    text-align:center !important;
}

.discoverSideBtn strong,
.discoverExploreItem strong{
    flex:1 1 auto !important;
    font-size:14px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
}

.discoverSideBtn b{
    width:20px !important;
    min-width:20px !important;
    margin-left:auto !important;
    text-align:center !important;
    font-size:17px !important;
    font-weight:500 !important;
    color:#087f5b !important;
}

.discoverExploreMenu{
    width:100% !important;
    margin-top:6px !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
}

.discoverExploreItem::after{
    content:'›' !important;
    width:20px !important;
    min-width:20px !important;
    margin-left:auto !important;
    text-align:center !important;
    font-size:17px !important;
    font-weight:500 !important;
    color:#087f5b !important;
}

.discoverSideBtn.active{
    background:#e7f5ef !important;
    color:#087f5b !important;
    border-left:4px solid #087f5b !important;
    padding-left:7px !important;
}

@media(max-width:900px){
    .pageLayout{
        display:block !important;
        width:100% !important;
        max-width:none !important;
        margin:0 auto !important;
        padding:6px !important;
    }

    .discoverSideMenu{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 0 6px 0 !important;
        padding:6px !important;
    }

    .discoverSideList,
    .discoverExploreMenu{
        width:100% !important;
    }
}
.siteLogo{
  display:flex;
  align-items:center;
  line-height:0;
}
.siteLogo img{
  height:90px; /* tam yazı ölçüsü */
  width:auto;
  object-fit:contain;
  display:block;
}
@media (max-width:750px){
  .siteLogo img{ height:48px; }
}
.filterBar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.filterBar .ilceDropdown{
  margin-left:auto; /* Resmi kurumların sağına iter, en sağa yaslar */
}

@media(max-width:820px){
  .filterBar .ilceDropdown{
    margin-left:0;
    width:100%; /* mobilde tam genişlik */
  }
}