/* RizeHaritası - İlçeler CSS v21 */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Poppins,Arial,sans-serif;background:#f4f8f6;color:#26352e}
a{text-decoration:none;color:inherit}
.siteHeader{height:74px;background:#fff;border-bottom:1px solid #dfe7e3;box-shadow:0 2px 8px rgba(0,0,0,.05);position:relative;z-index:100}
.headerInner{width:min(1500px,100%);height:74px;margin:auto;padding:7px 16px;display:flex;align-items:center;gap:22px}
.siteLogo{font-size:25px;font-weight:800;color:#087f5b;white-space:nowrap}
.siteLogo strong{color:#287c35}
.topMenu{flex:1;display:flex;justify-content:flex-end;gap:6px;overflow-x:auto;scrollbar-width:none}
.topMenu::-webkit-scrollbar{display:none}
.topMenuBtn{height:44px;padding:0 12px;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #dce5e1;border-radius:10px;color:#26352e;font-size:11px;font-weight:700;white-space:nowrap;transition:.15s}
.topMenuBtn:hover{background:#f1f8f4;border-color:#b9d5c5;color:#287c35}
.topMenuBtn.active{background:#fff;color:#26352e;border-color:#dce5e1}
.pageLayout{width:min(1500px,100%);margin:auto;padding:12px 16px 30px;display:grid;grid-template-columns:250px 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,.05);position:sticky;top:10px}
.discoverSideList{padding:8px;display:flex;flex-direction:column;gap:6px}
.discoverSideBtn{min-height:44px;padding:0 9px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e0e8e4;border-radius:8px;color:#26352e}
.discoverSideBtn>span{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#eef8f2;border-radius:7px;font-size:16px;flex:0 0 30px}
.discoverSideBtn strong{flex:1;font-size:11px}.discoverSideBtn b{color:#168152;font-size:19px;font-weight:400}
.discoverSideBtn:hover{background:#edf8f1;border-color:#9bd1b0}
.pageContent{min-width:0}.breadcrumb{font-size:11px;color:#748078;margin:2px 0 10px}.breadcrumb a{color:#287b35;font-weight:700}.breadcrumb span{padding:0 6px}
.hero{padding:20px 22px;margin-bottom:12px;background:linear-gradient(135deg,#f2faf5,#fff);border:1px solid #dfe8e3;border-radius:12px}
.eyebrow{font-size:10px;font-weight:800;color:#168152;letter-spacing:.4px}.hero h1{margin:5px 0 4px;font-size:29px;color:#173f32}.hero p{margin:0;color:#68746f;font-size:12px;line-height:1.5}
.districtSection,.districtDistanceSection{background:#fff;border:1px solid #dfe8e3;border-radius:12px;padding:16px;margin-bottom:12px}
.sectionHead,.distanceSectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.sectionHead h2,.distanceSectionHead h2{margin:3px 0;font-size:20px;color:#087f5b}.sectionHead strong{font-size:11px;color:#287c35}
.searchBox{height:44px;margin:12px 0;padding:0 12px;display:flex;align-items:center;gap:8px;background:#f7faf8;border:1px solid #d9e5de;border-radius:8px}.searchBox input{width:100%;height:100%;border:0;outline:0;background:transparent;font:500 12px Poppins,Arial,sans-serif;color:#26352e}.searchBox:focus-within{border-color:#80bd96;background:#fff;box-shadow:0 0 0 3px rgba(22,129,82,.07)}
.districtGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.districtCard{min-height:62px;padding:9px 10px;display:grid;grid-template-columns:32px 1fr 14px;align-items:center;gap:7px;background:#fff;border:1px solid #dfe8e3;border-radius:9px;transition:.15s}
.districtCard>span{width:30px;height:30px;display:grid;place-items:center;background:#eef8f2;border-radius:7px;font-size:15px}.districtCard strong{font-size:11px;line-height:1.2}.districtCard b{font-size:18px;color:#168152;text-align:right}.districtCard:hover{background:#f5fbf7;border-color:#8fc6a3;transform:translateY(-1px)}
.distanceSectionHead p{margin:3px 0 0;color:#718078;font-size:11px;line-height:1.4}.distanceBadge{padding:8px 10px;background:#edf7ef;color:#287c35;border-radius:8px;font-size:10px;font-weight:700;white-space:nowrap}.districtDistances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}.distanceLoading{grid-column:1/-1;padding:20px;text-align:center;color:#748078;border:1px dashed #cad9d0;border-radius:8px;font-size:11px}
.siteFooter{background:#173d26;color:#fff}.footerInner{width:min(1500px,100%);margin:auto;padding:18px 16px;display:flex;justify-content:space-between;gap:15px}.footerInner span{color:#d2dfd6;font-size:10px}.copyright{text-align:center;padding:10px;border-top:1px solid rgba(255,255,255,.12);color:#d2dfd6;font-size:10px}
@media(max-width:1100px){.pageLayout{grid-template-columns:220px minmax(0,1fr)}.districtGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.districtDistances{grid-template-columns:repeat(2,minmax(0,1fr))}.topMenuBtn{padding:0 9px}}
@media(max-width:800px){.siteHeader,.headerInner{height:auto}.headerInner{padding:8px;display:block}.siteLogo{display:block;margin-bottom:7px;font-size:22px}.topMenu{justify-content:flex-start}.pageLayout{display:flex;flex-direction:column;padding:8px}.discoverSideMenu{position:static;width:100%}.discoverSideList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.districtGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:18px}.distanceSectionHead{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.districtGrid,.districtDistances{grid-template-columns:1fr}.districtCard{min-height:58px}.districtSection,.districtDistanceSection{padding:12px}.hero h1{font-size:25px}.discoverSideList{grid-template-columns:1fr}.footerInner{flex-direction:column}}
/* =====================================================
   İLÇE GRID
   MASAÜSTÜ = 4'LÜ
===================================================== */

.districtGrid{
    padding:2px 18px 20px;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:10px;
}


/* =====================================================
   İLÇE KARTI
===================================================== */

.districtCard{
    min-height:70px;

    padding:10px 11px;

    display:flex;
    align-items:center;

    gap:9px;

    background:#fff;

    border:1px solid #dfe8e3;
    border-radius:10px;

    color:#26352e;
    text-decoration:none;

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

.districtCard:hover{
    background:#f1f9f4;

    border-color:#91c9a6;

    box-shadow:
        0 5px 14px rgba(22,129,82,.08);

    transform:translateY(-1px);
}

.districtCard>span{
    width:37px;
    height:37px;

    flex:0 0 37px;

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

    background:#eef8f2;

    border:1px solid #d5ebdd;

    border-radius:8px;

    font-size:18px;
}

.districtCard strong{
    flex:1;

    color:#26352e;

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

    line-height:1.3;
}

.districtCard:hover strong{
    color:#087f5b;
}

.districtCard b{
    width:25px;
    height:25px;

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

    background:#f0f7f3;

    border-radius:50%;

    color:#168152;

    font-size:18px;
    font-weight:400;
}

.districtCard:hover b{
    background:#087f5b;
    color:#fff;
}


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

.districtDistanceSection{
    margin-top:12px;

    background:#fff;

    border:1px solid #dfe8e3;
    border-radius:12px;

    overflow:hidden;

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


/* =====================================================
   ULAŞIM BAŞLIK
===================================================== */

.distanceSectionHead{
    padding:18px 21px;

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

    gap:15px;

    background:
        linear-gradient(
            135deg,
            #f2faf5,
            #fff
        );

    border-bottom:1px solid #e1e8e4;
}

.distanceSectionHead h2{
    margin:4px 0;

    color:#087f5b;

    font-size:21px;
    line-height:1.2;
}

.distanceSectionHead p{
    margin:0;

    color:#68746f;

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

.distanceBadge{
    padding:9px 12px;

    background:#087f5b;

    border-radius:8px;

    color:#fff;

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

    white-space:nowrap;
}


/* =====================================================
   ULAŞIM KARTLARI
   MASAÜSTÜ = 3'LÜ
===================================================== */

.districtDistances{
    padding:14px 18px 20px;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}


/* =====================================================
   MESAFE ANA KART
===================================================== */

.districtDistanceCard{
    background:#fff;

    border:1px solid #dfe8e3;
    border-radius:10px;

    overflow:hidden;

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

.districtDistanceCard:hover{
    border-color:#91c9a6;

    box-shadow:
        0 5px 14px rgba(22,129,82,.08);

    transform:translateY(-1px);
}


/* =====================================================
   MESAFE KART BAŞLIĞI
===================================================== */

.districtDistanceHeader{
    min-height:48px;

    padding:8px 10px;

    display:flex;
    align-items:center;

    justify-content:space-between;

    gap:8px;

    background:#f7faf8;

    border-bottom:1px solid #e2e9e5;
}

.districtDistanceName{
    min-width:0;

    display:flex;
    align-items:center;

    gap:6px;

    color:#26352e;

    text-decoration:none;
}

.districtDistanceArrow{
    color:#168152;

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

.districtDistancePin{
    font-size:15px;
}

.districtDistanceTitle{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

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

.districtDistanceName:hover
.districtDistanceTitle{
    color:#087f5b;
}

.districtDistanceGo{
    width:27px;
    height:27px;

    flex:0 0 27px;

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

    background:#e8f6ed;

    border-radius:50%;

    color:#087f5b;

    text-decoration:none;

    font-size:18px;
}

.districtDistanceGo:hover{
    background:#087f5b;
    color:#fff;
}


/* =====================================================
   HEDEF KARTLARI
===================================================== */

.districtDistanceTargets{
    padding:8px;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:7px;
}

.districtDistanceTarget{
    position:relative;

    min-height:75px;

    padding:8px;

    background:#f8fbf9;

    border:1px solid #e2e9e5;

    border-radius:8px;

    text-align:center;
}

.districtDistanceTargetName{
    min-height:28px;

    color:#53615a;

    font-size:9px;
    font-weight:700;

    line-height:1.25;
}

.districtDistanceTargetIcon{
    margin-top:2px;

    font-size:15px;
}

.districtDistanceNumber{
    display:inline-block;

    margin-top:1px;

    color:#087f5b;

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

.districtDistanceUnit{
    margin-left:2px;

    color:#68746f;

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


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

.districtDistanceDirection{
    position:absolute;

    right:5px;
    bottom:5px;

    width:22px;
    height:22px;

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

    background:#087f5b;

    border-radius:50%;

    color:#fff !important;

    text-decoration:none !important;

    font-size:11px;

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

.districtDistanceDirection:hover{
    background:#066b4d;

    color:#fff !important;

    transform:scale(1.08);
}


/* =====================================================
   YÜKLENİYOR
===================================================== */

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

    padding:25px;

    text-align:center;

    color:#68746f;

    background:#f8fbf9;

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

    font-size:11px;
}
/* =========================================================
   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;
    }
}
/* FINAL HEADER - FOTOĞRAFTAKİ GİBİ ORTALI KUTU */
body{background:#f3f7f4}
.siteHeader{
  max-width:1120px;
  margin:14px auto 0 auto;
  width:calc(100% - 32px);
  background:#fff;
  border:1px solid #e6ece8;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(25,61,38,.06);
  position:sticky;
  top:14px;
  z-index:1000;
}
.headerInner{
  max-width:100%;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.siteLogo{flex-shrink:0;display:flex;align-items:center}
.siteLogo img{height:58px!important;width:auto!important;display:block}

.topMenu{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.topMenu::-webkit-scrollbar{display:none}
.topMenuBtn{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 13px;
  border:1px solid #e7ece9;
  border-radius:12px;
  background:#fff;
  font-size:12px;font-weight:700;
  white-space:nowrap;flex-shrink:0;
  transition:.15s;
}
.topMenuBtn:hover,.topMenuBtn.active{
  background:#287C35;
  color:#fff;
  border-color:#287C35;
}

/* FOOTER DE AYNI KUTU */
.siteFooter{
  max-width:1120px;
  margin:24px auto 20px auto;
  width:calc(100% - 32px);
  background:#173d26;
  border-radius:18px;
}
.footerInner{padding:20px 24px;display:flex;justify-content:space-between;gap:20px}
.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding:11px;font-size:10px;color:#a9c0b0}

@media(max-width:900px){
  .siteHeader{width:calc(100% - 16px);top:8px;border-radius:14px}
  .headerInner{flex-wrap:wrap;justify-content:center;gap:8px}
  .siteLogo img{height:50px!important}
  .topMenu{width:100%;justify-content:flex-start;padding-bottom:2px}
}
/* FOTOĞRAFTAKİ FİNAL HEADER */
.siteHeader{
  max-width:1180px;
  margin:14px auto 0 auto;
  width:calc(100% - 32px);
  background:#fff;
  border:1px solid #e6ece8;
  border-radius:20px;
  box-shadow:0 8px 28px rgba(25,61,38,.07);
  position:sticky;
  top:14px;
  z-index:1000;
}
.headerInner{
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.siteLogo img{height:58px!important;width:auto!important;display:block}

.topMenu{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.topMenu::-webkit-scrollbar{display:none}
.topMenuBtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;
  border:1px solid #e5ece7;
  border-radius:14px;
  background:#fff;
  color:#1a3d28;
  font-size:12.5px;font-weight:700;
  white-space:nowrap;flex-shrink:0;
  transition:.15s ease;
}
.topMenuBtn:hover{background:#eef6f0}
.topMenuBtn.active{
  background:#287C35;
  border-color:#287C35;
  color:#fff;
  box-shadow:0 4px 12px rgba(40,124,53,.25);
}

/* FOOTER DE AYNI KUTU */
.siteFooter{
  max-width:1120px;
  margin:24px auto 20px auto;
  width:calc(100% - 32px);
  background:#173d26;
  border-radius:20px;
}
/* =========================================================
   İLÇELERİ TANIYIN
   ========================================================= */

.districtProfiles {
    width: 100%;
    margin: 26px 0;
}

.districtProfilesHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 22px 24px;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f3faf5 100%
    );
    border: 1px solid #dfe9e2;
    border-radius: 17px;
    box-shadow: 0 5px 20px rgba(24,70,38,.055);
}

.districtProfilesHead h2 {
    margin: 5px 0 5px;
    color: #116f4f;
    font-size: 25px;
    line-height: 1.2;
}

.districtProfilesHead p {
    margin: 0;
    color: #6b7a71;
    font-size: 12px;
    line-height: 1.55;
}

.districtProfilesBadge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 16px;
    background: #0d7f5d;
    color: #fff;
    box-shadow: 0 7px 18px rgba(13,127,93,.18);
}

.districtProfilesBadge strong {
    font-size: 24px;
    line-height: 1;
}

.districtProfilesBadge span {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
}


/* GRID */

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


/* KART */

.districtProfileCard {
    position: relative;
    padding: 17px;
    background: #fff;
    border: 1px solid #dfe8e2;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(27,70,40,.045);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.districtProfileCard:hover {
    transform: translateY(-3px);
    border-color: #a4cdb0;
    box-shadow: 0 10px 25px rgba(27,80,45,.10);
}


/* BAŞLIK */

.districtProfileTop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1ee;
}

.districtProfileIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    background: #edf8f1;
    border: 1px solid #d9ebe0;
    font-size: 19px;
}

.districtProfileKicker {
    display: block;
    margin-bottom: 2px;
    color: #14805d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.districtProfileTop h3 {
    margin: 0;
    color: #173d2b;
    font-size: 17px;
    font-weight: 800;
}

.districtProfileArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    min-width: 31px;
    margin-left: auto;
    border-radius: 50%;
    background: #edf8f1;
    color: #087c5a;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    transition: .18s ease;
}

.districtProfileArrow:hover {
    background: #087c5a;
    color: #fff;
}


/* TANITIM */

.districtProfileIntro {
    min-height: 53px;
    margin: 12px 0;
    color: #5e7066;
    font-size: 11px;
    line-height: 1.55;
}


/* BİLGİLER */

.districtProfileFacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.districtProfileFacts > div {
    padding: 9px 10px;
    background: #f8faf9;
    border: 1px solid #edf1ee;
    border-radius: 9px;
}

.districtProfileFacts span {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.districtProfileFacts strong {
    display: block;
    margin-bottom: 3px;
    color: #28503b;
    font-size: 10px;
    font-weight: 800;
}

.districtProfileFacts p {
    margin: 0;
    color: #6c7971;
    font-size: 9px;
    line-height: 1.45;
}


/* ÖNE ÇIKANLAR */

.districtProfileHighlights {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px;
}

.districtProfileHighlights span {
    padding: 5px 7px;
    border-radius: 7px;
    background: #eef7f1;
    color: #347153;
    font-size: 8px;
    font-weight: 700;
}


/* ALT ÇAĞRI */

.districtProfilesBottom {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #dce9e0;
    border-radius: 14px;
    background: linear-gradient(
        90deg,
        #f2faf5,
        #ffffff
    );
}

.districtProfilesBottomIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #087f5d;
    color: #fff;
    font-size: 19px;
}

.districtProfilesBottom strong {
    display: block;
    color: #1d4933;
    font-size: 12px;
}

.districtProfilesBottom p {
    margin: 3px 0 0;
    color: #6b7a71;
    font-size: 10px;
}

.districtProfilesBottom a {
    margin-left: auto;
    padding: 9px 14px;
    border-radius: 9px;
    background: #087f5d;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
}


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

@media (max-width: 1050px) {

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

}


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

@media (max-width: 700px) {

    .districtProfiles {
        margin: 18px 0;
    }

    .districtProfilesHead {
        padding: 17px;
        align-items: flex-start;
    }

    .districtProfilesHead h2 {
        font-size: 21px;
    }

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

    .districtProfilesBadge {
        width: 55px;
        height: 55px;
        min-width: 55px;
        border-radius: 13px;
    }

    .districtProfilesBadge strong {
        font-size: 20px;
    }

    .districtProfileGrid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .districtProfileCard {
        padding: 14px;
    }

    .districtProfileIntro {
        min-height: auto;
        font-size: 11px;
    }

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

    .districtProfilesBottom {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .districtProfilesBottom a {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

}


/* =========================================================
   DAR TELEFON
   ========================================================= */

@media (max-width: 390px) {

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

    .districtProfilesHead {
        gap: 10px;
    }

}