.harita {
  position: absolute;
  inset: 0;
  overflow: hidden;

  background: #6f8a45;
  cursor: grab;
}

.harita.surukleniyor { cursor: grabbing; }


html.savasIzleAcik .haritaKap, html.savasIzleAcik .haritaPus { display: none; }



.harita::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 12% 0%, rgba(255, 196, 110, .28), transparent 70%),
    linear-gradient(155deg, rgba(255, 214, 150, .10) 0%, transparent 45%, rgba(30, 40, 60, .16) 100%),
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 55%, rgba(8, 6, 3, .42) 100%);
  mix-blend-mode: normal;
}





.harita.egik {
  perspective: 760px;
  perspective-origin: 50% 30%;
}



.haritaSvg {
  position: absolute;
  left: -100%;
  top: -100%;
  width: 300%;
  height: 300%;
  display: block;
  touch-action: none;
  transform-origin: 50% 50%;
}



.haritaKap {
  position: absolute;
  inset: 0;
}
.harita.egik .haritaKap { perspective: 760px; perspective-origin: 50% 30%; }
.haritaDuzlem {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}


.haritaPus {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(222, 214, 190, .75) 0%, rgba(222, 214, 190, .25) 22%, transparent 45%);
}

.sus { pointer-events: none; }



.yollar { pointer-events: none; }

.hayvanlar { pointer-events: none; }

.yolGolge {
  fill: none;
  stroke: rgba(60, 42, 20, .35);
  stroke-width: 13;
  stroke-linecap: round;
}

.yolToprak {
  fill: none;
  stroke: rgba(176, 146, 98, .75);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 26 5 14 4;
}



.cemberler { pointer-events: none; }

.cemberIc { opacity: .06; }
.cember-ben .cemberIc { opacity: .08; }

.cemberKenar {
  fill: none;
  stroke-width: 2.5;
  opacity: .92;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .35));
}

.cemberAzami {
  fill: none;
  stroke: #fff6dc;
  stroke-width: 1.5;
  stroke-dasharray: 6 10;
  opacity: .45;
}






.dugum { cursor: pointer; }

.dugumHale {
  fill: #fff3c4;
  opacity: 0;
  transition: opacity .15s;
}

.dugum:hover .dugumHale { opacity: .16; }
.dugum.secili .dugumHale {
  opacity: .24;
  stroke: #f3dc9a;
  stroke-width: 2;
}



.adEtiket rect {
  fill: rgba(11, 14, 24, .82);
  stroke: rgba(224, 187, 108, .5);
  stroke-width: 1;
}

.dugum-yakinda .adEtiket rect,
.dugum-uzak .adEtiket rect { stroke: rgba(255, 255, 255, .18); }

.adEtiket .ad {
  fill: #f1e6cd;
  font: 800 19px var(--yazi);
  text-anchor: middle;
}

.adEtiket .alt {
  fill: #d8c49a;
  font: 800 16.5px var(--yazi);
  text-anchor: middle;
}

.adEtiket .alt .ben { fill: #a8ea8c; }
.adEtiket .alt .diger { fill: #ff9f8f; }


.dugum-erisilir .adEtiket rect { stroke: #e8c46a; stroke-width: 2; }



.sehir { cursor: pointer; }

.sehirHale { opacity: .18; }
.sehir-ben .sehirHale { opacity: .28; }
.sehir:hover .sehirHale { opacity: .42; }

.levhaZemin {
  fill: rgba(11, 14, 24, .86);
  stroke: rgba(224, 187, 108, .7);
  stroke-width: 1;
}


.levhaZemin.levhaOtag {
  stroke: #e9c36a;
  stroke-width: 2.5;
}


.levhaZemin.levhaVip { stroke: #f2cf6b; stroke-width: 2.2; fill: rgba(40, 28, 8, .9); }
.levhaAd.levhaAdVip { fill: #ffd97a; }
.levhaKalkan { pointer-events: none; }

.iktidarBayrak { pointer-events: none; }
.ibDirek { stroke: #4a3520; stroke-width: 4; stroke-linecap: round; }
.ibBez { stroke: rgba(20, 12, 4, .55); stroke-width: 2; }
.ibYildiz { fill: #f3d58c; stroke: rgba(60, 40, 10, .6); stroke-width: 1; }

.umaySancak { pointer-events: none; }
.usKalkan { fill: #a8261c; stroke: #f0d9a0; stroke-width: 2.5; }
.usYildiz { fill: #3a6fc4; stroke: #e8eefb; stroke-width: 1; }
.usSeviye { fill: #fff6df; font: 800 15px var(--yazi, sans-serif); text-anchor: middle; paint-order: stroke; stroke: rgba(40, 8, 4, .7); stroke-width: 3px; }

.obaBayrak { pointer-events: none; }

.kalkanYazi { pointer-events: none; }
.kalkanYaziZemin { fill: rgba(11, 14, 24, .86); stroke: rgba(150, 200, 240, .85); stroke-width: 1.6; }
.kalkanYaziMetin { fill: #dcecff; font: 800 21px var(--yazi); letter-spacing: .06em; text-anchor: middle; }

.levhaAd {
  fill: #f6ecd4;
  font: 800 22px var(--oyma);
  letter-spacing: .04em;
  text-anchor: middle;
}

.levhaSahip {
  font: 800 17px var(--yazi);
  text-anchor: middle;
}







.koy {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #6f7f3c;
  cursor: grab;
  touch-action: none;
}

.koy.surukleniyor { cursor: grabbing; }

.koyDunya {
  position: absolute;
  left: 0;
  top: 0;
  width: 4400px;
  height: 2400px;
  transform-origin: 0 0;

  background: url(../gorsel/koy-cimen.webp) 0 0 / 560px auto repeat;
}



.koyDunya::before,
.koyDunya::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.koyDunya::before {
  background: url(../gorsel/koy-cimen.webp) 211px 137px / 830px auto repeat;
  opacity: .35;
}
.koyDunya::after {
  background:
    radial-gradient(ellipse 1700px 1000px at 1000px 560px, rgba(255, 212, 128, .75), rgba(255, 212, 128, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .28) 100%);
  mix-blend-mode: soft-light;
}

.koyZemin,
.surParlak,
.koySahne {
  position: absolute;
  z-index: 1;
  left: 1300px;
  top: 755px;
  width: 1800px;
  height: 890px;

  transform: scale(1.4);
  transform-origin: 50% 50%;
}





@supports (zoom: 1.4) {
  .koyZemin,
  .surParlak,
  .koySahne { left: 671.4286px; top: 412.1429px; transform: none; zoom: 1.4; }
}

.koyZemin {
  background: url(../gorsel/koy-zemin.webp) center / 100% 100% no-repeat;


  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.koy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 12% 0%, rgba(255, 196, 110, .2), transparent 70%),
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 60%, rgba(8, 6, 3, .35) 100%);
}


.koyYeri {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;


}

.koyYeri > * { position: absolute; left: 0; top: 0; }


.arti {
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%) scale(calc(var(--yazi, 1) * .8));
  display: grid;
  place-items: center;
  border: 1px solid var(--panel-cizgi);
  border-radius: 50%;
  background: rgba(14, 12, 10, .72);
  color: var(--altin);
  font: 700 26px var(--yazi);
  line-height: 1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
  opacity: .75;
  transition: opacity .15s, transform .15s;
}

.koyYeri.bos:hover .arti { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--yazi, 1) * .9)); }
.bosAd {
  transform: translate(-50%, calc(22px * var(--yazi, 1))) scale(var(--yazi, 1));
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(12, 10, 8, .72);
  color: var(--metin);
  font: 800 13px var(--yazi);
  white-space: nowrap;
  transform-origin: 50% 0;
}



.binaResmi {
  display: block;
  pointer-events: none;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .22));
  transition: filter .15s;
}

.yerResmi { width: 240px; transform: translate(-50%, -64%); }
.merkezResmi { width: 300px; transform: translate(-50%, -66%); }


.koySahne .binaResmi { pointer-events: auto; cursor: inherit; }
.koySahne .koyYeri { cursor: inherit; }
.koySahne.isaretli, .koySahne .koyLevha, .koySahne .arti { cursor: pointer; }
.koy.surukleniyor .koySahne { cursor: grabbing; }
.koyYeri.uzerinde .binaResmi { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .22)) brightness(1.12); }


.surParlak {
  pointer-events: none;
  background: rgb(255, 238, 200);
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .15s;
}
.surParlak.gorunur { opacity: .5; }

@media (pointer: coarse) { .surParlak { display: none; } }

.koyLevha {
  transform: translate(-50%, 0) scale(var(--yazi, 1));
  transform-origin: 50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 12px 3px;
  border: 1px solid var(--panel-cizgi);
  border-radius: 5px;
  background: rgba(12, 10, 8, .84);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
  color: var(--metin);
  line-height: 1.15;
  white-space: nowrap;
  transition: border-color .15s;
}




.koyYeri.resimli .koyLevha { top: 34px; }
.koyLevha.ustte { top: auto !important; transform-origin: 50% 100%; }
.koyYeri:not(.resimli) .koyLevha { transform: translate(-50%, -50%) scale(var(--yazi, 1)); transform-origin: 50% 50%; }
.koyLevha strong { font: 800 16px var(--oyma); letter-spacing: .04em; }
.koyLevha small { font: 800 13px var(--yazi); color: var(--soluk); }
.koyLevha.buyuk strong { font-size: 19px; }
.koyYeri.uzerinde .koyLevha, .koyLevha:hover { border-color: var(--altin); }


body.koyKipi #sagAlt { display: none; }

.yerResmi.duz { transform: translate(-50%, -52%); }


.koyYeri.insaatta .binaResmi { opacity: .5; filter: grayscale(.35) drop-shadow(0 6px 8px rgba(0, 0, 0, .22)); }
.koyLevha small b { color: var(--yesil); font-variant-numeric: tabular-nums; }

.yerResmi.kucuk { width: 170px; transform: translate(-50%, -70%); }

.canliKatman { display: block; pointer-events: none; }
.canliOge { position: absolute; display: block; background-repeat: no-repeat; pointer-events: none; filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .28)); }
.canliOn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; pointer-events: none; }

.ayrintiDoku { mix-blend-mode: overlay; opacity: .6; pointer-events: none; }
.ayrintiDoku.ikinci { opacity: .35; }



.seferler .sefer { pointer-events: none; }
.seferGolge { fill: none; stroke: rgba(8, 6, 4, .5); stroke-width: 18; stroke-linecap: round; }
.seferIz {
  fill: none;
  stroke: var(--renk);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 2 20;
  opacity: .9;
}
.seferGecilen {
  fill: none;
  stroke: var(--renk);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .95;
}
.seferHedef {
  fill: none;
  stroke: var(--renk);
  stroke-width: 6;
  transform-box: fill-box;
  transform-origin: center;

  opacity: .5;
}
@keyframes seferNabiz { 0% { opacity: .95; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.1); } }
.seferIsaret { pointer-events: auto; cursor: pointer; }
.seferDaire { fill: rgba(14, 11, 8, .92); stroke: var(--renk); stroke-width: 6; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .65)); }
.seferIsaret:hover .seferDaire { stroke-width: 8; }
.seferIcSimge { color: var(--renk); }
.seferRozet circle { fill: var(--renk); stroke: #140f0a; stroke-width: 3; }
.seferYigin circle { fill: #f6ead0; stroke: #140f0a; stroke-width: 3; }
.seferYigin text { font: 900 21px var(--yazi); text-anchor: middle; fill: #140f0a; }
.seferRozet use { color: #fff; }
.seferEtiket rect { fill: rgba(14, 11, 8, .9); stroke: var(--renk); stroke-width: 2.5; }
.seferEtiket text { font: 800 21px var(--yazi); text-anchor: middle; fill: #f6ead0; }
.seferEtiketAd { fill: #d8c49a; font-weight: 700; }
.seferEtiketSure { fill: #fff3d2; }
.sefer.gelen .seferDaire { stroke-width: 9; }
@keyframes gelenOrdu { to { stroke-width: 10; } }



.yangin { pointer-events: none; }
.duman { filter: url(#dumanBulanik); }
.duman circle {
  fill: #2a2622;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: duman 7s linear infinite;
}

@keyframes duman {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; fill: #4a2a16; }
  8% { opacity: .85; }
  35% { fill: #2e2a26; opacity: .75; }
  70% { fill: #4d4843; opacity: .4; }
  100% { transform: translate(var(--kay, 10px), -230px) scale(3.6); opacity: 0; fill: #6a655f; }
}
.atesIsik {
  fill: url(#atesIsikGrad);
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
  animation: atesIsik .5s ease-in-out infinite alternate;
}
@keyframes atesIsik { from { opacity: .45; transform: scale(.9); } to { opacity: .85; transform: scale(1.08); } }
.alevler { filter: url(#alevBulanik); }
.alev {
  fill: url(#alevGrad);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: alev .4s ease-in-out infinite alternate;
}
@keyframes alev {
  0% { transform: scale(1.06, .78) skewX(-4deg); }
  45% { transform: scale(.95, 1.04) skewX(2deg); }
  100% { transform: scale(.88, 1.18) skewX(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .duman circle, .atesIsik, .alev { animation: none; }
  .duman circle { opacity: .4; }
}
.yerTaramasi { pointer-events: none; }



.levhaZemin.levhaVip.levha-gumus { stroke: #d4dbe3; }
.levhaAd.levhaAdVip.levhaAd-gumus { fill: #f0f3f7; }
.levhaZemin.levhaVip.levha-bakir { stroke: #dc915b; }
.levhaAd.levhaAdVip.levhaAd-bakir { fill: #f4b98e; }
.levhaZemin.levhaVip.levha-yesim { stroke: #7fd3a0; }
.levhaAd.levhaAdVip.levhaAd-yesim { fill: #bff2d1; }
.levhaZemin.levhaVip.levha-gece { stroke: #86acf2; }
.levhaAd.levhaAdVip.levhaAd-gece { fill: #c3d7ff; }