/* =========================================================
   RİZE WEB SİTELERİ REHBERİ
   Ana stil dosyası
   ========================================================= */

:root{
    --wr-green:#2f7d32;
    --wr-green-dark:#246628;
    --wr-green-light:#edf7ee;
    --wr-green-soft:#f5faf5;
    --wr-text:#263238;
    --wr-muted:#6b7280;
    --wr-border:#e5e7eb;
    --wr-bg:#f4f7f4;
    --wr-white:#fff;
    --wr-shadow:0 4px 16px rgba(31,73,40,.08);
    --wr-radius:12px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--wr-text);
    background:var(--wr-bg);
}

a{
    color:inherit;
    text-decoration:none;
}

/* =========================================================
   RİZEHARİTASI STANDART HEADER
   1160px ana çerçeve
   ========================================================= */
.siteHeader{
    width:100%;
    background:#fff;
    border-bottom:1px solid #e5ece7;
    box-shadow:0 2px 10px rgba(25,55,35,.05);
}

.siteHeader .headerInner{
    width:1160px;
    max-width:calc(100% - 30px);
    min-height:76px;
    margin:0 auto;
    padding:7px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-sizing:border-box;
}

.siteLogo{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    text-decoration:none;
}

.siteLogo img{
    display:block;
    width:auto;
    height:52px;
    max-width:185px;
    object-fit:contain;
}

.topMenu{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
}

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

.topMenuBtn{
    flex:0 0 auto;
    min-height:38px;
    padding:0 11px;
    border:1px solid #e2e9e4;
    border-radius:7px;
    background:#fff;
    color:#19342a;
    display:flex;
    align-items:center;
    gap:7px;
    text-decoration:none;
    font-weight:700;
    font-size:13px;
    white-space:nowrap;
    box-sizing:border-box;
    transition:.2s ease;
}

.topMenuBtn:hover{
    background:var(--wr-green-light);
    border-color:#cbded0;
}

.topMenuBtn.active{
    color:#fff;
    background:var(--wr-green);
    border-color:var(--wr-green);
}

@media(max-width:900px){
    .siteHeader .headerInner{
        width:100%;
        max-width:none;
        min-height:68px;
        padding:7px 12px;
        gap:12px;
    }

    .siteLogo img{
        height:42px;
        max-width:145px;
    }

    .topMenu{
        justify-content:flex-start;
    }

    .topMenuBtn{
        min-height:38px;
        padding:0 10px;
        font-size:13px;
    }
}

/* ANA ALAN */
/* ANA ALAN */
.web-rehber-container{
    width:min(1160px,calc(100% - 28px));
    margin:18px auto 35px;
}

/* ARAMA */
.web-search-panel{
    background:var(--wr-white);
    border:1px solid var(--wr-border);
    border-radius:var(--wr-radius);
    padding:15px;
    box-shadow:var(--wr-shadow);
    margin-bottom:14px;
}

.web-search-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px auto;
    gap:9px;
}

.web-search-input,
.web-category-select{
    width:100%;
    height:44px;
    border:1px solid #d8dee3;
    border-radius:10px;
    padding:0 13px;
    background:#fff;
    color:var(--wr-text);
    font-size:14px;
    outline:none;
}

.web-search-input:focus,
.web-category-select:focus{
    border-color:var(--wr-green);
    box-shadow:0 0 0 3px rgba(40,124,53,.1);
}

.web-clear-btn{
    height:44px;
    border:0;
    border-radius:10px;
    padding:0 16px;
    background:#eef1f2;
    color:#374151;
    font-weight:600;
    cursor:pointer;
}

.web-clear-btn:hover{
    background:#e2e7e8;
}

.web-filter-title{font-size:12px;font-weight:800;color:#53635a;margin:10px 0 5px;text-transform:uppercase;letter-spacing:.04em}.web-district-nav{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-bottom:9px}.web-district-btn{min-height:34px;border:1px solid #d9e1dc;background:#f7faf8;color:#405047;border-radius:9px;padding:6px 7px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}.web-district-btn:hover{border-color:#8ab692;background:#edf7ef}.web-district-btn.active{background:#287c35;color:#fff;border-color:#287c35}@media (max-width:900px){.web-district-nav{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (max-width:560px){.web-district-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.web-district-btn{font-size:11px}}
/* SAYFA BAŞLIĞI */
.web-section-heading{
    margin:24px 0 13px;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
}

.web-section-heading h2{
    margin:0;
    font-size:21px;
}

.web-section-heading p{
    margin:4px 0 0;
    color:var(--wr-muted);
    font-size:13px;
}

.web-result-count{
    color:var(--wr-green-dark);
    font-weight:700;
    font-size:13px;
}

/* KATEGORİ BLOKLARI */
.web-category-section{
    margin:22px 0 30px;
}

.web-category-title{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 12px;
    padding-bottom:9px;
    border-bottom:2px solid #e3e9e5;
}

.web-category-title .icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--wr-green-light);
    font-size:18px;
}

.web-category-title h3{
    margin:0;
    font-size:18px;
}

/* SİTE KARTLARI */
.web-sites-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.web-site-card{
    position:relative;
    background:#fff;
    border:1px solid var(--wr-border);
    border-radius:var(--wr-radius);
    padding:14px;
    box-shadow:0 3px 12px rgba(25,55,35,.055);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.web-site-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--wr-shadow);
    border-color:#c8ddcc;
}

.web-site-top{
    display:flex;
    align-items:flex-start;
    gap:11px;
}

.web-site-icon{
    width:40px;
    height:40px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:var(--wr-green-light);
    color:var(--wr-green-dark);
    font-size:18px;
}

.web-site-info{
    min-width:0;
    flex:1;
}

.web-site-name{
    margin:0;
    font-size:15px;
    line-height:1.3;
    font-weight:700;
}

.web-site-type{
    display:inline-block;
    margin-top:5px;
    font-size:11px;
    color:var(--wr-green-dark);
    background:var(--wr-green-light);
    border-radius:12px;
    padding:4px 8px;
    font-weight:700;
}

.web-site-description{
    margin:13px 0 14px;
    color:#66716b;
    font-size:13px;
    line-height:1.55;
    min-height:40px;
}

.web-site-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:13px;
}

.web-site-meta span{
    padding:5px 8px;
    border-radius:7px;
    background:#f4f6f5;
    color:#65706a;
    font-size:11px;
}

.web-site-link{
    width:100%;
    min-height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:9px;
    background:var(--wr-green);
    color:#fff;
    font-size:13px;
    font-weight:700;
}

.web-site-link:hover{
    background:var(--wr-green-dark);
}

/* RESMİ SİTE */
.web-site-card.official{
    border-top:3px solid var(--wr-green);
}

.web-official-badge{
    position:absolute;
    top:12px;
    right:12px;
    font-size:10px;
    padding:4px 7px;
    border-radius:10px;
    background:#e9f6ec;
    color:var(--wr-green-dark);
    font-weight:700;
}

/* BOŞ SONUÇ */
.web-no-results{
    padding:40px 20px;
    text-align:center;
    background:#fff;
    border:1px dashed #ccd6d0;
    border-radius:var(--wr-radius);
    color:var(--wr-muted);
}

.web-no-results strong{
    display:block;
    margin-bottom:5px;
    color:var(--wr-text);
}

/* ALT BİLGİ */
.web-rehber-note{
    margin-top:24px;
    padding:13px 15px;
    background:#f0f6f2;
    border:1px solid #dce9df;
    border-radius:10px;
    color:#5d6a62;
    font-size:13px;
    line-height:1.5;
}

/* FOOTER */
.web-rehber-footer{
    padding:20px;
    text-align:center;
    color:#77817b;
    font-size:12px;
}

/* TABLET */
@media (max-width:1050px){
    .web-sites-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

/* MOBİL */
@media (max-width:760px){
    .web-header-inner{
        min-height:auto;
        padding:12px 14px;
        align-items:flex-start;
    }

    .web-logo{
        width:48px;
        height:48px;
    }

    .web-header-title h1{
        font-size:19px;
    }

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

    .web-header-actions{
        width:100%;
        margin-top:8px;
    }

    .web-header-btn{
        flex:1;
        min-height:35px;
        font-size:12px;
    }

    .web-search-row{
        grid-template-columns:1fr;
    }

    .web-clear-btn{
        width:100%;
    }

    .web-sites-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .web-site-card{
        padding:13px;
    }

    .web-site-name{
        font-size:14px;
    }

    .web-site-description{
        font-size:12px;
    }

    .web-section-heading h2{
        font-size:18px;
    }
}

@media (max-width:480px){
    .web-rehber-container{
        width:calc(100% - 18px);
        margin-top:12px;
    }

    .web-header-inner{
        display:grid;
        grid-template-columns:48px 1fr;
    }

    .web-header-actions{
        grid-column:1 / -1;
    }

    .web-sites-grid{
        grid-template-columns:1fr;
    }

    .web-category-title h3{
        font-size:16px;
    }
}

/* =========================================================
   SOL KATEGORİ MENÜSÜ - ANA DÜZEN
   Toplam içerik genişliği: 1160px
   ========================================================= */
.web-main-layout{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.web-category-sidebar{
    background:#fff;
    border:1px solid var(--wr-border);
    border-radius:10px;
    padding:9px;
    box-shadow:0 3px 12px rgba(31,73,40,.06);
    position:sticky;
    top:12px;
}

.web-sidebar-title{
    font-size:16px;
    font-weight:800;
    color:var(--wr-text);
    padding:5px 7px 10px;
    border-bottom:1px solid #e7ece9;
    margin-bottom:7px;
}

.web-category-nav{
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow:visible;
    padding:0;
}

.web-category-btn{
    width:100%;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    border:1px solid transparent;
    background:#f3f7f4;
    color:#33453a;
    border-radius:8px;
    padding:6px 9px;
    font-size:12px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
    white-space:normal;
}

.web-category-btn:hover,
.web-category-btn.active{
    background:var(--wr-green);
    color:#fff;
    border-color:var(--wr-green);
}

.web-results-area{
    min-width:0;
}

@media (max-width:900px){
    .web-main-layout{
        grid-template-columns:210px minmax(0,1fr);
        gap:12px;
    }
}

@media (max-width:700px){
    .web-main-layout{
        grid-template-columns:1fr;
    }

    .web-category-sidebar{
        position:static;
    }

    .web-category-nav{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:5px;
    }

    .web-category-btn{
        justify-content:center;
        text-align:center;
        font-size:11px;
    }
}


/* =========================================================
   SON STANDART DOKUNUŞLAR
   RizeHaritası genel sayfa yapısına uyum
   ========================================================= */

.siteHeader .headerInner{
    min-height:78px;
}

.siteLogo img{
    height:55px;
    max-width:183px;
}

.topMenuBtn{
    min-height:38px;
    border-radius:7px;
    background:#f7faf7;
}

.topMenuBtn.active,
.topMenuBtn:hover{
    background:var(--wr-green);
    color:#fff;
    border-color:var(--wr-green);
}

.web-search-panel,
.web-category-sidebar,
.web-site-card,
.web-no-results{
    background:#fff;
}

.web-search-panel{
    border-color:#dfe8e1;
    border-radius:10px;
}

.web-search-input,
.web-category-select{
    height:40px;
    border-radius:7px;
    border-color:#d6e0d8;
}

.web-clear-btn{
    height:40px;
    border-radius:7px;
    background:var(--wr-green);
    color:#fff;
}

.web-clear-btn:hover{
    background:var(--wr-green-dark);
}

.web-district-btn{
    min-height:34px;
    border-radius:7px;
    background:#f5f8f5;
}

.web-district-btn.active{
    background:var(--wr-green);
    border-color:var(--wr-green);
}

.web-section-heading{
    margin:18px 0 12px;
}

.web-section-heading h2{
    color:var(--wr-green-dark);
}

.web-category-title{
    border-bottom-color:#dfe8e1;
}

.web-category-title .icon,
.web-site-icon{
    background:var(--wr-green-light);
    color:var(--wr-green-dark);
}

.web-site-card{
    border-radius:10px;
    border-color:#dfe8e1;
}

.web-site-link{
    background:var(--wr-green);
    border-radius:7px;
}

.web-site-link:hover{
    background:var(--wr-green-dark);
}

.web-site-card.official{
    border-top-color:var(--wr-green);
}

.web-rehber-note{
    background:#f0f6f1;
    border-color:#d9e6dc;
}

@media(max-width:900px){
    .siteHeader .headerInner{
        min-height:68px;
        padding:7px 12px;
    }

    .siteLogo img{
        height:45px;
        max-width:150px;
    }

    .web-main-layout{
        grid-template-columns:210px minmax(0,1fr);
    }
}

@media(max-width:700px){
    .web-main-layout{
        grid-template-columns:1fr;
    }

    .web-category-sidebar{
        position:static;
    }

    .web-category-nav{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:5px;
    }

    .web-category-btn{
        min-height:38px;
        justify-content:center;
        text-align:center;
    }
}

@media(max-width:480px){
    .siteHeader .headerInner{
        max-width:100%;
        padding:7px 10px;
    }

    .siteLogo img{
        height:42px;
        max-width:140px;
    }

    .topMenu{
        width:100%;
        order:3;
        justify-content:flex-start;
    }

    .web-rehber-container{
        width:calc(100% - 18px);
        margin-top:12px;
    }
}

/* =========================================================
   RİZEHARİTASI INDEX HEADER - WEB REHBERİ İLE AYNI GÖRÜNÜM
   ========================================================= */
.siteHeader{
  width:1160px!important;
  max-width:calc(100% - 24px)!important;
  height:90px!important;
  min-height:90px!important;
  max-height:90px!important;
  margin:0 auto!important;
  padding:0!important;
  position:relative!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:#fff url("https://rizeharitasi.com/images/logo/header.png") center center / 1160px 90px no-repeat!important;
  border:0!important;
  box-shadow:none!important;
}

.siteHeader .headerInner{
  width:100%!important;
  max-width:1160px!important;
  height:90px!important;
  min-height:90px!important;
  max-height:90px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
  background:transparent!important;
}

.siteHeader .siteLogo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 auto!important;
}

.siteHeader .siteLogo img{
  display:block!important;
  width:183px!important;
  height:86px!important;
  max-width:183px!important;
  max-height:86px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  background:transparent!important;
}

.siteHeader .topMenu{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
  overflow-x:visible!important;
}

.siteHeader .topMenuBtn{
  white-space:nowrap!important;
  flex:0 0 auto!important;
  min-height:38px!important;
  padding-left:7px!important;
  padding-right:7px!important;
  border:1px solid #e2e9e4!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#263238!important;
  font-size:11px!important;
  font-weight:700!important;
  box-shadow:0 1px 3px rgba(30,60,40,.08)!important;
}

.siteHeader .topMenuBtn:hover{
  background:#f1f8f2!important;
  border-color:#cbded0!important;
}

@media(max-width:1350px){
  .siteHeader{
    width:100%!important;
    max-width:none!important;
  }
  .siteHeader .headerInner{
    max-width:none!important;
  }
}

@media(max-width:1050px){
  .siteHeader .topMenuBtn{
    font-size:10px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
}

@media(max-width:760px){
  .siteHeader{
    width:100%!important;
    max-width:none!important;
    height:90px!important;
    min-height:90px!important;
    max-height:90px!important;
    background-size:cover!important;
  }
  .siteHeader .headerInner{
    width:100%!important;
    max-width:none!important;
    height:90px!important;
    min-height:90px!important;
    padding:0!important;
  }
  .siteHeader .siteLogo img{
    width:76px!important;
    height:76px!important;
    max-width:76px!important;
    max-height:76px!important;
  }
}