*{box-sizing:border-box}

:root{
 --green:#287c35;
 --green2:#216b2d;
 --bg:#f2f6f3;
 --text:#173128;
 --muted:#6b7771;
 --border:#dbe5df;
 --white:#fff;
}

html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}

.siteHeader{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000}
.headerInner{width:calc(100% - 40px);max-width:1460px;margin:auto;padding:8px 18px;display:flex;align-items:center;gap:24px;min-height:64px}
.siteLogo{font-size:23px;font-weight:900;color:var(--green);white-space:nowrap}
.siteLogo span{color:var(--text)}
.topMenu{display:flex;gap:5px;overflow-x:auto;flex:1;padding-bottom:2px;scrollbar-width:none}
.topMenu::-webkit-scrollbar{display:none}
.topMenuBtn{padding:10px 12px;border:1px solid transparent;border-radius:9px;font-size:12px;font-weight:800;white-space:nowrap}
.topMenuBtn:hover{background:var(--green);color:#fff}

.container{width:calc(100% - 40px);max-width:1250px;margin:auto;padding:16px 0}
.breadcrumb{font-size:12px;color:var(--muted);margin:2px 0 14px}
.breadcrumb a{color:var(--green);font-weight:800}
.breadcrumb span{padding:0 8px}

.pageHero{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#fff,#edf7ef);border:1px solid var(--border);border-radius:16px;padding:26px 28px}
.heroIcon{font-size:48px}
.eyebrow,.sectionLabel,.categoryLabel{font-size:10px;font-weight:900;letter-spacing:.6px;color:var(--green)}
.pageHero h1{margin:5px 0 7px;font-size:32px}
.pageHero p{margin:0;color:var(--muted);font-size:13px}

.categoryBox{margin-top:15px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.valueTabs{display:flex;gap:8px;margin-top:8px;overflow-x:auto}
.valueTab{border:1px solid var(--border);background:#f9fbfa;color:var(--text);border-radius:10px;padding:12px 16px;cursor:pointer;font-size:12px;font-weight:900;white-space:nowrap}
.valueTab:hover{border-color:var(--green);color:var(--green)}
.valueTab.active{background:var(--green);border-color:var(--green);color:#fff}

.contentBox{margin-top:15px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px}
.contentHeader{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--border);padding:6px 3px 14px;margin-bottom:14px}
.contentHeader h2{font-size:23px;margin:4px 0}
.contentHeader p{font-size:12px;color:var(--muted);margin:0}
.countBadge{background:#eef7f0;color:var(--green);padding:8px 11px;border-radius:9px;font-size:11px;font-weight:900;white-space:nowrap}

.contentLayout{display:grid;grid-template-columns:390px minmax(0,1fr);gap:14px}
.listPanel,.detailPanel{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}

.searchBox{position:relative;padding:10px;border-bottom:1px solid var(--border)}
.searchBox span{position:absolute;left:23px;top:50%;transform:translateY(-50%)}
.searchBox input{width:100%;height:43px;border:1px solid var(--border);border-radius:9px;padding:0 12px 0 38px;font-size:13px;outline:none}
.searchBox input:focus{border-color:var(--green)}

.valueList{max-height:620px;overflow:auto}
.valueItem{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;border:0;border-bottom:1px solid #edf1ee;background:#fff;text-align:left;cursor:pointer}
.valueItem:hover{background:#f3faf5}
.valueItem.active{background:#eaf6ed;box-shadow:inset 4px 0 0 var(--green)}
.valueItemIcon{width:28px;flex:0 0 28px;font-size:18px;text-align:center}
.valueItemText{min-width:0}
.valueItemText strong{display:block;font-size:13px}
.valueItemText small{display:block;color:var(--muted);font-size:10px;margin-top:4px}

.detailPanel{padding:12px;min-width:0}
.detail{min-height:0}
.welcome,.detailCard{background:#f7faf8;border:1px solid var(--border);border-radius:11px;padding:16px}
.welcome{min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.welcomeIcon{font-size:42px}
.welcome h2{margin:10px 0 5px;font-size:20px}
.welcome p{margin:0;color:var(--muted);font-size:12px}

.detailCard{min-height:250px}
.detailCard h2{margin:5px 0 9px;font-size:25px}
.detailCard p{margin:0;color:#53635b;font-size:14px;line-height:1.8;white-space:pre-line}
.detailCategory{font-size:10px;color:var(--green);font-weight:900}
.detailDistrict{font-size:11px;color:var(--muted);margin-bottom:14px}

.detailImage{margin:-16px -16px 17px;overflow:hidden;border-radius:11px 11px 0 0}
.detailImage img{width:100%;height:240px;object-fit:cover;display:block}

/* HARİTA SADECE RİZE'NİN DEĞERLERİ */

.mapSection{margin-top:12px}
.mapTitle{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:10px 12px;background:#f7faf8;border:1px solid var(--border);border-radius:9px}
.mapTitle small{margin-left:auto;color:var(--muted);font-size:10px}
#valueMap{height:430px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}

.pharmacyMapMarker{background:transparent!important;border:0!important}

.valueMapMarker{
 width:38px;
 height:38px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#fff;
 border:3px solid var(--green);
 border-radius:50%;
 box-shadow:0 3px 10px rgba(0,0,0,.25);
 font-size:20px;
}

.loading,.empty{text-align:center;padding:35px;color:var(--muted);font-size:12px}

.footer{background:#173d26;color:#fff;margin-top:28px}
.footerInner{width:calc(100% - 40px);max-width:1250px;margin:auto;padding:22px 0;display:flex;justify-content:space-between}
.footerInner span{font-size:11px;color:#d4e1d7}
.copyright{text-align:center;border-top:1px solid #ffffff20;padding:11px;font-size:10px;color:#d4e1d7}

@media(max-width:850px){
 .headerInner{width:calc(100% - 16px);display:block}
 .siteLogo{display:block;margin-bottom:8px}
 .container{width:calc(100% - 16px)}
 .contentLayout{grid-template-columns:1fr}
 .valueList{max-height:380px}
 .pageHero{padding:20px}
 .pageHero h1{font-size:27px}
 #valueMap{height:380px}
}

@media(max-width:520px){
 .container{width:calc(100% - 12px)}
 .pageHero{gap:12px}
 .heroIcon{font-size:35px}
 .pageHero h1{font-size:24px}
 .contentHeader{align-items:start}
 .contentHeader h2{font-size:20px}
 .topMenuBtn{font-size:11px;padding:9px 10px}
 .footerInner{width:calc(100% - 20px);flex-direction:column;gap:8px}
}
.valueMarkerPopup{
    min-width:180px;
    text-align:center;
}

.valueMarkerPopup strong{
    display:block;
    font-size:14px;
    margin-bottom:7px;
}

.valueMarkerPopup .markerDistrict{
    font-size:11px;
    color:#68776f;
    margin-bottom:10px;
}

.valueMarkerPopup .routeBtn{
    display:block;
    padding:9px 12px;
    background:#287C35;
    color:#fff !important;
    border-radius:8px;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.valueMarkerPopup .routeBtn:hover{
    background:#216b2d;
}
/* =========================================================
   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:100% !important;
    max-width:1180px !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;
    }
}