/* =====================================================
   RİZE HARİTASI - ECZANELER
===================================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:#f4f8f5;
    color:#183126;
}

a{
    text-decoration:none;
}

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

.siteHeader{
    width:100%;
    background:#fff;
    border-bottom:1px solid #dce7df;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    position:relative;
    z-index:1000;
}

.headerInner{
    width:100%;
    max-width:1250px;
    min-height:72px;
    margin:0 auto;
    padding:0 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* Logo */

.siteLogo{
    display:inline-flex;
    align-items:center;
    flex-shrink:0;

    color:#287C35;
    font-size:25px;
    font-weight:800;
    letter-spacing:-.5px;
    white-space:nowrap;
}

.siteLogo strong{
    color:#183126;
}

/* Menü */

.topMenu{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    flex-wrap:wrap;
}

.topMenuBtn{
    min-height:42px;
    padding:0 10px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid transparent;
    border-radius:9px;

    color:#183126;
    font-size:12px;
    font-weight:700;

    transition:.2s ease;
}

.topMenuBtn:hover{
    background:#f0f7f2;
    border-color:#d7e4da;
    color:#287C35;
}

.topMenuBtn.active{
    background:#287C35;
    border-color:#287C35;
    color:#fff;
}

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

.section-title{
    width:100%;
    max-width:1250px;
    margin:0 auto;
    padding:28px 18px 18px;
}

.section-title h1{
    margin:0 0 6px;
    color:#183126;
    font-size:28px;
    font-weight:800;
    letter-spacing:-.5px;
}

.section-title p{
    margin:0;
    color:#668073;
    font-size:13px;
    font-weight:500;
}

/* =====================================================
   ANA ECZANE ALANI
===================================================== */

.pharmacySection{
    width:100%;
    max-width:1250px;
    margin:0 auto;
    padding:0 18px 30px;
}

/* =====================================================
   BÖLÜM BAŞLIĞI
===================================================== */

.pharmacySectionHeader{
    background:#fff;
    border:1px solid #dce7df;
    border-radius:14px;
    padding:17px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    box-shadow:0 3px 12px rgba(0,0,0,.04);
}

.pharmacySectionHeader h2{
    margin:0 0 4px;
    font-size:17px;
    font-weight:800;
    color:#183126;
}

.pharmacySectionHeader p{
    margin:0;
    color:#71877b;
    font-size:12px;
}

/* =====================================================
   FİLTRE KONTROLLERİ
===================================================== */

.controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.controls select{
    min-height:40px;
    min-width:180px;
    padding:0 12px;

    background:#f7faf8;
    border:1px solid #d6e2d9;
    border-radius:9px;

    color:#183126;
    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:600;

    outline:none;
    cursor:pointer;
}

.controls select:focus{
    border-color:#287C35;
}

/* Filtre butonları */

.filterBtn{
    min-height:40px;
    padding:0 13px;

    border:1px solid #d6e2d9;
    border-radius:9px;

    background:#fff;
    color:#365343;

    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:700;

    cursor:pointer;
    transition:.2s ease;
}

.filterBtn:hover{
    background:#f1f8f3;
    border-color:#287C35;
    color:#287C35;
}

.filterBtn.active{
    background:#287C35;
    border-color:#287C35;
    color:#fff;
}

/* =====================================================
   HARİTA + NÖBETÇİ DÜZENİ
===================================================== */

.dutyMapLayout{
    display:grid;
    grid-template-columns:390px minmax(0,1fr);
    gap:15px;
    margin-top:15px;
    align-items:stretch;
}

/* =====================================================
   NÖBETÇİ ECZANE KUTUSU
===================================================== */

.officialDutyPharmacy{
    min-width:0;
    background:#fff;
    border:1px solid #dce7df;
    border-radius:14px;
    overflow:hidden;

    box-shadow:0 3px 12px rgba(0,0,0,.04);
}

.officialDutyHeader{
    min-height:68px;
    padding:13px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    border-bottom:1px solid #e4ece6;
}

.officialDutyHeader h2{
    margin:0 0 3px;
    font-size:15px;
    font-weight:800;
    color:#183126;
}

.officialDutyHeader p{
    margin:0;
    font-size:11px;
    color:#788c80;
}

.officialDutyHeader a{
    flex-shrink:0;

    padding:7px 9px;
    border:1px solid #dce7df;
    border-radius:8px;

    color:#287C35;
    background:#f5faf6;

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

.officialDutyHeader a:hover{
    background:#287C35;
    color:#fff;
}

.officialDutyPharmacy iframe{
    width:100%;
    height:470px;
    display:block;
    border:0;
    background:#fff;
}

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

.pharmacyMapArea{
    min-width:0;

    background:#fff;
    border:1px solid #dce7df;
    border-radius:14px;
    overflow:hidden;

    box-shadow:0 3px 12px rgba(0,0,0,.04);

    display:flex;
    flex-direction:column;
}

.pharmacyMapHeader{
    min-height:68px;
    padding:13px 15px;

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

    border-bottom:1px solid #e4ece6;
}

.pharmacyMapHeader h3{
    margin:0;
    font-size:15px;
    font-weight:800;
    color:#183126;
}

#pharmacyCount{
    padding:5px 9px;

    border-radius:20px;
    background:#edf7ef;
    color:#287C35;

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

#pharmacyMap{
    width:100%;
    min-height:470px;
    flex:1;
}

/* Leaflet */

.leaflet-container{
    font-family:'Poppins',sans-serif;
}

.leaflet-popup-content-wrapper{
    border-radius:10px;
}

.leaflet-popup-content{
    font-size:12px;
}

/* =====================================================
   LİSTE KUTUSU
===================================================== */

.listBox{
    margin-top:15px;

    background:#fff;
    border:1px solid #dce7df;
    border-radius:14px;
    overflow:hidden;

    box-shadow:0 3px 12px rgba(0,0,0,.04);
}

.listTitle{
    min-height:65px;
    padding:13px 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    border-bottom:1px solid #e4ece6;
}

.listTitle > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.listTitle strong{
    font-size:15px;
    font-weight:800;
    color:#183126;
}

.listTitle span{
    color:#788c80;
    font-size:11px;
}

#listStatus{
    flex-shrink:0;

    padding:5px 9px;
    border-radius:20px;

    background:#f1f6f2;
    color:#52695b;

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

/* =====================================================
   ECZANE LİSTESİ
===================================================== */

.pharmacyList{
    padding:14px;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;

    /* Yaklaşık 2 sıra görünür */
    max-height:460px;

    /* Fazlası içeride kayar */
    overflow-y:auto;

    /* Scroll görünümü */
    scrollbar-width:thin;
    scrollbar-color:#287C35 #edf4ef;
}

/* Chrome / Edge / Safari */

.pharmacyList::-webkit-scrollbar{
    width:8px;
}

.pharmacyList::-webkit-scrollbar-track{
    background:#edf4ef;
    border-radius:10px;
}

.pharmacyList::-webkit-scrollbar-thumb{
    background:#287C35;
    border-radius:10px;
}

.pharmacyList::-webkit-scrollbar-thumb:hover{
    background:#1f642b;
}


/* Eczane kartı */

.pharmacyCard{
    position:relative;

    padding:13px;

    background:#f9fbfa;
    border:1px solid #dfe9e2;
    border-radius:11px;

    cursor:pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.pharmacyCard:hover{
    border-color:#287C35;
    box-shadow:0 5px 14px rgba(40,124,53,.09);
    transform:translateY(-2px);
}

.pharmacyCard.active{
    border-color:#287C35;
    background:#f1f8f3;
}
/* =====================================================
   FOOTER
===================================================== */

footer{
    margin-top:15px;
    border-top:1px solid #dce7df;
    background:#183126;
}

footer .container{
    width:100%;
    max-width:1250px;
    margin:0 auto;
    padding:18px;
}

.copyright{
    text-align:center;
    color:#d8e5dc;
    font-size:11px;
}

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

@media (max-width:1050px){

    .headerInner{
        flex-direction:column;
        padding-top:12px;
        padding-bottom:12px;
    }

    .topMenu{
        justify-content:center;
    }

    .dutyMapLayout{
        grid-template-columns:330px minmax(0,1fr);
    }

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

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

@media (max-width:760px){

    .headerInner{
        gap:12px;
    }

    .siteLogo{
        font-size:22px;
    }

    .topMenu{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:5px;
    }

    .topMenuBtn{
        width:100%;
        min-height:43px;
        padding:5px 4px;

        flex-direction:column;
        gap:3px;

        font-size:9px;
    }

    .section-title{
        padding:22px 14px 15px;
    }

    .section-title h1{
        font-size:23px;
    }

    .pharmacySection{
        padding:0 14px 25px;
    }

    .pharmacySectionHeader{
        flex-direction:column;
        align-items:stretch;
    }

    .controls{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .controls select{
        grid-column:1/-1;
        width:100%;
    }

    .filterBtn{
        width:100%;
    }

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

    .officialDutyPharmacy iframe{
        height:430px;
    }

    #pharmacyMap{
        min-height:400px;
    }

    .listTitle{
        align-items:flex-start;
        flex-direction:column;
    }

    #listStatus{
        align-self:flex-start;
    }

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

/* =====================================================
   KÜÇÜK TELEFON
===================================================== */

@media (max-width:480px){

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

    .section-title h1{
        font-size:21px;
    }

    .section-title p{
        font-size:11px;
    }

    .pharmacySectionHeader{
        padding:14px;
    }

    .officialDutyHeader,
    .pharmacyMapHeader{
        padding:12px;
    }

    .officialDutyHeader h2,
    .pharmacyMapHeader h3{
        font-size:14px;
    }

    .officialDutyPharmacy iframe{
        height:400px;
    }

    #pharmacyMap{
        min-height:360px;
    }
}
@media (max-width:760px){

    .pharmacyList{
        grid-template-columns:1fr;

        /* Mobilde yaklaşık 3 kart görünsün */
        max-height:430px;

        overflow-y:auto;
    }
}
@media (min-width:761px) and (max-width:1050px){

    .pharmacyList{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:460px;
        overflow-y:auto;
    }
}
/* =====================================================
   iPHONE / MOBİL ECZANE LİSTESİ
===================================================== */

@media (max-width:430px){

    .pharmacyList{
        display:grid;
        grid-template-columns:1fr;

        width:100%;
        max-height:430px;

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

        padding:10px;

        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;

        scrollbar-width:thin;
        scrollbar-color:#287C35 #edf4ef;
    }

    .pharmacyCard{
        width:100%;
        min-width:0;
        padding:13px;
    }

    .pharmacyCard h3,
    .pharmacyCard h4{
        font-size:14px;
    }

    .pharmacyCard p{
        font-size:11px;
    }

    /* iPhone'da scrollbar */
    .pharmacyList::-webkit-scrollbar{
        width:7px;
    }

    .pharmacyList::-webkit-scrollbar-track{
        background:#edf4ef;
        border-radius:10px;
    }

    .pharmacyList::-webkit-scrollbar-thumb{
        background:#287C35;
        border-radius:10px;
    }
}
/* =====================================================
   İLÇE SEÇ
===================================================== */

.districtFilterBox{
    width:100%;
    margin:15px 0 15px;

    padding:12px 16px;

    display:flex;
    align-items:center;
    gap:14px;

    background:#ffffff;
    border:1px solid #dce7df;
    border-radius:12px;

    box-shadow:0 2px 8px rgba(0,0,0,.035);
}

.districtFilterTitle{
    flex-shrink:0;

    display:flex;
    align-items:center;

    color:#183126;
    font-size:14px;
    font-weight:700;
    line-height:1;
}

.districtFilterBox select{
    width:260px;
    height:40px;

    padding:0 12px;

    border:1px solid #d6e2d9;
    border-radius:9px;

    background:#f7faf8;
    color:#183126;

    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:700;

    outline:none;
    cursor:pointer;
}

.districtFilterBox select:hover{
    border-color:#287C35;
}

.districtFilterBox select:focus{
    border-color:#287C35;
    background:#ffffff;
}


/* =====================================================
   ECZANE LİSTESİ
   3 SÜTUN + 2 SIRA
===================================================== */

.pharmacyList{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;

    padding:12px 14px 14px;

    /* 2 sıra görünür */
    max-height:470px;

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

    scrollbar-width:thin;
    scrollbar-color:#287C35 #edf4ef;

    -webkit-overflow-scrolling:touch;
}


/* Chrome / Edge / Safari scrollbar */

.pharmacyList::-webkit-scrollbar{
    width:8px;
}

.pharmacyList::-webkit-scrollbar-track{
    background:#edf4ef;
    border-radius:10px;
}

.pharmacyList::-webkit-scrollbar-thumb{
    background:#287C35;
    border-radius:10px;
}

.pharmacyList::-webkit-scrollbar-thumb:hover{
    background:#1f642b;
}


/* =====================================================
   ECZANE KARTI
===================================================== */

.pharmacyCard{
    min-width:0;
    width:100%;

    padding:13px;

    background:#f9fbfa;
    border:1px solid #dfe9e2;
    border-radius:11px;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.pharmacyCard:hover{
    border-color:#287C35;
    background:#ffffff;
    box-shadow:0 4px 12px rgba(40,124,53,.08);
}

.pharmacyCard.active{
    border-color:#287C35;
    background:#f1f8f3;
}


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

@media (min-width:761px) and (max-width:1050px){

    .pharmacyList{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:470px;
    }

}


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

@media (max-width:760px){

    .districtFilterBox{
        flex-direction:column;
        align-items:stretch;
        gap:8px;

        padding:12px;
    }

    .districtFilterTitle{
        font-size:13px;
    }

    .districtFilterBox select{
        width:100%;
        height:42px;
    }

    .pharmacyList{
        grid-template-columns:1fr;

        max-height:430px;

        padding:10px;

        gap:9px;
    }

}


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

@media (max-width:430px){

    .districtFilterBox{
        margin-top:12px;
        margin-bottom:12px;
        border-radius:10px;
    }

    .districtFilterBox select{
        width:100%;
        max-width:none;
    }

    .pharmacyList{
        display:grid;
        grid-template-columns:1fr;

        max-height:430px;

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

        -webkit-overflow-scrolling:touch;
    }

    .pharmacyCard{
        width:100%;
        padding:12px;
    }

}