/* Sirius Konum Rehberi — personel (/sirius/konum/) ve ziyaretçi (/konum/) ortak görünümü. Renk: Nova yeşil + altın. */
@font-face { font-family: "Inter"; src: url(/font/inter-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url(/font/inter-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair"; src: url(/font/playfair-latin.woff2) format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair"; src: url(/font/playfair-latin-ext.woff2) format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --yesil: #123c30; --derin: #0b2a21; --orta: #1d5242;
  --altin: #c9a45c; --altin-acik: #e6cd96; --altin-koyu: #9c7a37;
  --krem: #f6f2ea; --zemin: #efeadf;
  --kart: rgba(11, 42, 33, 0.9); --kart-acik: rgba(11, 42, 33, 0.78);
  --cizgi: rgba(255, 255, 255, 0.14); --soluk: #b8c7c0; --metin: #e9efec;
  --egitim: #2f6fdb; --ibadet: #0f9b8e; --saglik: #d9473b; --ulasim: #7c4ddb; --alisveris: #e08a12; --ticaret: #c43a68; --park: #2e9d4f; --kamu: #56657a;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --serif: "Playfair", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --guvenli-alt: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--derin); color: #fff; font-family: var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
#harita { position: fixed; inset: 0; background: var(--zemin); }
#harita.uydu { background: #1d2a24; }
.leaflet-container { font-family: var(--sans); }
.leaflet-container a { color: inherit; }
:focus-visible { outline: 3px solid var(--altin); outline-offset: 2px; }

/* Yükleniyor */
.yukleniyor { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--derin); transition: opacity .5s; }
.yukleniyor.bitti { opacity: 0; pointer-events: none; }
.yukleniyor div { text-align: center; color: var(--soluk); font-size: 14px; }
.yukleniyor b { display: block; font-family: var(--serif); font-size: 28px; color: #fff; margin-bottom: 8px; letter-spacing: .02em; }
.yukleniyor i { display: block; width: 120px; height: 3px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--altin), transparent); background-size: 200% 100%; animation: akis 1.2s linear infinite; }
@keyframes akis { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Üst marka */
.marka { position: fixed; top: 14px; left: 14px; z-index: 1000; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 14px; background: var(--kart); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--cizgi); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.marka b { letter-spacing: .3em; font-size: 13px; color: var(--altin); font-weight: 700; }
.marka span { font-size: 13px; color: var(--soluk); }
.marka a { font-size: 12px; color: var(--altin-acik); text-decoration: none; border-left: 1px solid var(--cizgi); padding-left: 12px; white-space: nowrap; }
.marka a:hover { color: #fff; }

/* Bölüm listesi (geniş ekran) */
.bolumler { position: fixed; top: 70px; left: 14px; bottom: 82px; z-index: 1000; width: 236px; display: flex; flex-direction: column; gap: 4px; overflow: auto; padding: 10px; border-radius: 16px; background: var(--kart); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--cizgi); }
.bolumler h4 { margin: 4px 8px 6px; font-size: 11px; letter-spacing: .18em; color: var(--altin); text-transform: uppercase; font-weight: 600; }
.bolumler > button { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 6px 9px; border-radius: 10px; font-size: 14px; line-height: 1.3; color: var(--soluk); transition: background .25s, color .25s; }
.bolumler > button .n { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 1px solid var(--cizgi); display: grid; place-items: center; font-size: 11px; }
.bolumler > button:hover { background: rgba(255,255,255,.06); color: #fff; }
.bolumler > button[aria-current="true"] { background: rgba(201,164,92,.17); color: #fff; }
.bolumler > button[aria-current="true"] .n { background: var(--altin); border-color: var(--altin); color: var(--derin); font-weight: 700; }
.bolumler > button:focus-visible { outline: 2px solid var(--altin); }
.bolumler .katmanlar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-width: none; margin: 4px 2px 0; }
.bolumler .katmanlar .altlik { grid-column: 1 / -1; justify-content: center; }
.bolumler .katmanlar .altlik span { flex: 1; text-align: center; }
.bolumler .katmanlar .kat { height: 30px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; background: rgba(255,255,255,.04); backdrop-filter: none; -webkit-backdrop-filter: none; }
.bolumler .katmanlar .kat i { width: 20px; height: 20px; }
.bolumler h4.ara { margin-top: 12px; }
.dipnot { margin: auto 4px 0; padding-top: 10px; font-size: 11px; color: var(--soluk); line-height: 1.5; }
.dipnot summary { cursor: pointer; color: var(--altin-acik); font-size: 11.5px; list-style: none; }
.dipnot summary::before { content: "ⓘ "; }
.dipnot p { margin: 6px 0 0; }

/* Hikâye kartı */
.kart { position: fixed; right: 14px; top: 14px; z-index: 1000; width: 410px; max-height: calc(100% - 110px); overflow: auto; overscroll-behavior: contain; padding: 22px 22px 18px; border-radius: 18px; background: var(--kart); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--cizgi); box-shadow: 0 24px 60px rgba(0,0,0,.32); color: var(--metin); }
.kart.giris > * { animation: kartGir .55s var(--ease) both; }
.kart.giris > *:nth-child(2) { animation-delay: .04s; } .kart.giris > *:nth-child(3) { animation-delay: .08s; } .kart.giris > *:nth-child(4) { animation-delay: .12s; } .kart.giris > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes kartGir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tutamak { display: none; }
.kart .ust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; }
.rozet.satista { background: var(--altin); color: var(--derin); }
.rozet.satista::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--derin); animation: nabiz 1.6s infinite; }
.rozet.kapali { background: rgba(255,255,255,.1); color: #dfe6e2; border: 1px solid rgba(255,255,255,.22); }
.rozet.bilgi { background: rgba(255,255,255,.08); color: var(--soluk); }
@keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.kart h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.15; color: #fff; letter-spacing: -.01em; }
.kart p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; }
.kart .gorsel { position: relative; margin: 2px 0 14px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--orta); }
.kart .gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.temsili { position: absolute; right: 8px; bottom: 6px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 6px rgba(0,0,0,.35); pointer-events: none; }
.kanit { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 8px; }
.kanit li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 14.5px; line-height: 1.45; }
.kanit li b { color: #fff; }
.kanit .ik { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(201,164,92,.18); }
.kanit .ik svg { width: 18px; height: 18px; fill: var(--altin-acik); }
.son { margin: 4px 0 12px; padding: 12px 14px; border-left: 3px solid var(--altin); background: rgba(201,164,92,.1); border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.55; color: #fff; }
.olgular { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.olgular div { padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.06); }
.olgular small { display: block; color: var(--soluk); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.olgular b { font-size: 14.5px; font-weight: 600; color: #fff; }
.olgular .tam { grid-column: 1 / -1; }

/* Çevre özeti */
.ozet-bas { margin: 12px 0 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--altin); font-weight: 600; }
.ozet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.ozet button { all: unset; cursor: pointer; padding: 9px 8px 8px; border-radius: 11px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 3px; min-height: 76px; transition: background .2s; }
.ozet button:hover { background: rgba(255,255,255,.12); }
.ozet button:focus-visible { outline: 2px solid var(--altin); }
.ozet .ob { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; font-weight: 600; }
.ozet .ob i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; }
.ozet .ob i svg { width: 12px; height: 12px; fill: #fff; }
.ozet .m { font-size: 15px; font-weight: 700; color: var(--altin-acik); }
.ozet .p { font-size: 11px; color: var(--soluk); line-height: 1.3; }
.ozet .p.plan { color: #fff; }
.ozet .p.plan::before { content: "PLAN"; font-size: 9px; letter-spacing: .08em; border: 1px dashed rgba(255,255,255,.6); border-radius: 4px; padding: 0 3px; margin-right: 4px; }

/* Yakın liste */
.yakinlar { margin: 8px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.yakinlar li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); cursor: pointer; animation: satirGir .45s var(--ease) both; }
.yakinlar li:hover, .yakinlar li:focus-visible { background: rgba(255,255,255,.11); }
.yakinlar li .ad { flex: 1; min-width: 0; line-height: 1.3; }
.yakinlar li .ad small { display: block; color: var(--soluk); font-size: 11.5px; }
.yakinlar li .m { color: var(--altin-acik); font-weight: 700; white-space: nowrap; font-size: 13.5px; text-align: right; }
.yakinlar li .m small { display: block; color: var(--soluk); font-weight: 400; font-size: 11px; }
.yakinlar .nk { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.yakinlar .nk svg { width: 13px; height: 13px; fill: #fff; }
@keyframes satirGir { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.kart .not { margin-top: 10px; font-size: 12px; color: var(--soluk); line-height: 1.5; }
.kaynak-mobil { display: none; margin-top: 14px; font-size: 10.5px; color: var(--soluk); line-height: 1.45; }
.kaynak-mobil a { color: var(--altin-acik); }
.ipucu { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(201,164,92,.55); font-size: 13px; line-height: 1.5; color: var(--altin-acik); }
.ipucu b { color: var(--altin); font-weight: 600; }

/* Çağrı */
.cta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cta .adres { width: 100%; font-size: 13px; color: var(--soluk); margin-bottom: 2px; }
.dugme { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); transition: background .2s, transform .2s; white-space: nowrap; }
.dugme:hover { background: rgba(255,255,255,.18); }
.dugme:active { transform: scale(.97); }
.dugme:focus-visible { outline: 3px solid var(--altin); outline-offset: 2px; }
.dugme.ana { background: var(--altin); color: var(--derin); }
.dugme.ana:hover { background: var(--altin-acik); }
.dugme.buyuk { height: 52px; font-size: 16px; padding: 0 22px; }
.dugme svg { width: 18px; height: 18px; fill: currentColor; }
.dugme:disabled, .dugme[aria-disabled="true"] { opacity: .35; cursor: default; }

/* Alt kontrol */
.kontrol { position: fixed; left: 50%; bottom: calc(14px + var(--guvenli-alt)); transform: translateX(-50%); z-index: 1001; display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 999px; background: var(--kart); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--cizgi); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.noktalar { display: flex; gap: 6px; padding: 0 6px; }
.noktalar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: all .3s var(--ease); cursor: pointer; }
.noktalar i.on { width: 22px; border-radius: 4px; background: var(--altin); }
.sayac { font-size: 13px; color: var(--soluk); min-width: 44px; text-align: center; display: none; }

/* Katman çipleri */
.katmanlar { position: fixed; left: 14px; bottom: calc(76px + var(--guvenli-alt)); z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px - 440px); }
.kat { all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 7px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--kart); border: 1px solid var(--cizgi); color: var(--soluk); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color .2s, border-color .2s, background .2s; }
.kat i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; transition: opacity .2s; }
.kat i svg { width: 12px; height: 12px; fill: #fff; }
.kat[aria-pressed="true"] { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(11,42,33,.95); }
.kat[aria-pressed="false"] i { opacity: .35; }
.kat:focus-visible { outline: 2px solid var(--altin); }
.kat.plan-cip i { background: transparent !important; border: 1.5px dashed #fff; }
.kat.altlik { padding: 0 4px; gap: 2px; }
.kat.altlik span { padding: 5px 10px; border-radius: 999px; }
.kat.altlik span.on { background: var(--altin); color: var(--derin); font-weight: 600; }

/* Yakınlaştırma */
.leaflet-control-zoom { border: 1px solid var(--cizgi) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.2) !important; }
.leaflet-control-zoom a { background: var(--kart) !important; color: #fff !important; width: 38px !important; height: 38px !important; line-height: 38px !important; border-bottom-color: var(--cizgi) !important; }
.leaflet-control-zoom a:hover { background: var(--orta) !important; }
.leaflet-control-attribution { font-size: 10px; background: rgba(11,42,33,.72) !important; color: #c6d3cd; border-radius: 8px 0 0 0; }
.leaflet-control-attribution a { color: var(--altin-acik); }
.leaflet-bottom.leaflet-right { bottom: calc(var(--guvenli-alt)); }

/* Parseller */
.parsel { transition: fill-opacity .5s, stroke-width .5s, stroke-opacity .5s; }
.parsel.ciz { stroke-dasharray: 3200; stroke-dashoffset: 3200; animation: ciz 1.6s var(--ease) forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.etiket { background: transparent; border: 0; }
.etiket div { position: absolute; left: 0; top: 0; transform: translate(-50%, 14px); white-space: nowrap; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.3); animation: popE .5s var(--ease) both; }
.etiket .satista { background: var(--altin); color: var(--derin); }
.etiket .kapali { background: rgba(11,42,33,.88); color: #e6ece9; border: 1px solid rgba(255,255,255,.3); }
@keyframes popE { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
.nabiz-halka { background: transparent; border: 0; }
.nabiz-halka div { width: 16px; height: 16px; border-radius: 50%; background: var(--altin); transform: translate(-8px, -8px); animation: halka 2s infinite; }
@keyframes halka { 0% { box-shadow: 0 0 0 0 rgba(201,164,92,.75); } 70% { box-shadow: 0 0 0 30px rgba(201,164,92,0); } 100% { box-shadow: 0 0 0 0 rgba(201,164,92,0); } }

/* Nokta işaretleri */
.poi { background: transparent; border: 0; }
.poi .pin { position: absolute; left: 0; top: 0; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); animation: pop .4s var(--ease) both; }
.poi .pin svg { width: 15px; height: 15px; fill: #fff; }
.poi.kucuk .pin { width: 22px; height: 22px; border-width: 1.5px; } .poi.kucuk .pin svg { width: 11px; height: 11px; }
.poi.buyuk .pin { width: 36px; height: 36px; } .poi.buyuk .pin svg { width: 18px; height: 18px; }
.poi.plan .pin { border: 2px dashed #fff; background-clip: padding-box; box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.3); }
.poi.plan .pin::after { content: "PLAN"; position: absolute; top: 100%; left: 50%; transform: translate(-50%, 3px); font-size: 8.5px; font-weight: 700; letter-spacing: .08em; color: #fff; background: rgba(11,42,33,.85); padding: 1px 4px; border-radius: 4px; }
.poi .ad { position: absolute; left: 0; top: 0; transform: translate(-50%, 20px); white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(11,42,33,.88); color: #fff; pointer-events: none; animation: pop .5s var(--ease) both; }
.poi .ad.ust { transform: translate(-50%, calc(-100% - 22px)); }
.poi .ad.sag { transform: translate(22px, -50%); }
.poi .ad.sol { transform: translate(calc(-100% - 22px), -50%); }
@keyframes pop { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
.ofis-pin { background: transparent; border: 0; }
.ofis-pin .pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px; padding: 6px 11px 6px 6px; border-radius: 999px; background: var(--derin); border: 2px solid var(--altin); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.35); animation: pop .5s var(--ease) both; }
.ofis-pin .pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--altin); border-bottom: 0; }
.ofis-pin .pin i { width: 22px; height: 22px; border-radius: 50%; background: var(--altin); display: grid; place-items: center; }
.ofis-pin .pin i svg { width: 12px; height: 12px; fill: var(--derin); }

.yer-etiket { background: transparent; border: 0; pointer-events: none; }
.yer-etiket span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; text-transform: uppercase; letter-spacing: .22em; font-weight: 600; color: #5f6b66; text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.yer-etiket.ilce span { font-size: 15px; color: #2f3b36; letter-spacing: .28em; }
.yer-etiket.semt span { font-size: 11px; }
.uydu .yer-etiket span { color: #fff; text-shadow: 0 0 3px #000, 0 1px 6px rgba(0,0,0,.9); }
/* İmar planındaki yol (bulvar) etiketi */
.plan-yol { background: transparent; border: 0; }
.plan-yol div { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 4px 10px; border-radius: 999px; border: 1.5px dashed #fff; background: rgba(11,42,33,.82); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 3px 10px rgba(0,0,0,.3); cursor: pointer; }
/* Yol etiketleri ve vurgu */
.yol-etiket { background: transparent; border: 0; pointer-events: none; }
.yol-etiket span { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 11px; font-weight: 600; color: #3b3a35; letter-spacing: .01em; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; transform-origin: 0 0; }
.yol-etiket.e-m span, .yol-etiket.e-t span { font-size: 12px; font-weight: 700; color: #5b3a12; }
.uydu .yol-etiket span { color: #fff; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 4px rgba(0,0,0,.9); }
.yol-etiket.vurgulu span { color: var(--derin) !important; background: var(--altin); padding: 2px 8px; border-radius: 999px; text-shadow: none !important; font-size: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.vurgu-cizgi { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: ciz 2.2s var(--ease) forwards; }
.olcum-cizgi { animation: kay 1s linear infinite; }
@keyframes kay { to { stroke-dashoffset: -16; } }
.olcum-etiket { background: transparent; border: 0; pointer-events: none; }
.olcum-etiket div { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; padding: 5px 10px; border-radius: 10px; background: #fff; color: var(--derin); font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.3); animation: popE .5s var(--ease) both; line-height: 1.2; }
.olcum-etiket small { display: block; font-size: 10px; font-weight: 500; color: #5f6b66; }
.olcum-uc { background: transparent; border: 0; pointer-events: none; }
.olcum-uc div { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--altin); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.olcum-uc span { position: absolute; left: 0; top: 0; transform: translate(10px, -50%); white-space: nowrap; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(11,42,33,.88); padding: 3px 8px; border-radius: 6px; }

/* Açılır pencere */
.leaflet-popup-content-wrapper { background: var(--derin); color: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.leaflet-popup-tip { background: var(--derin); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13.5px; line-height: 1.5; min-width: 200px; }
.leaflet-popup-content b { font-size: 14.5px; }
.leaflet-popup-content .tur { display: block; color: var(--altin-acik); font-size: 12px; margin-top: 2px; }
.leaflet-popup-content .plan-not { display: block; margin-top: 6px; padding: 6px 8px; border: 1px dashed rgba(255,255,255,.4); border-radius: 8px; font-size: 12px; color: #fff; }
.leaflet-popup-content .mes { display: block; margin-top: 6px; }
.leaflet-popup-content .mes b { color: var(--altin-acik); font-size: 13.5px; }
.leaflet-popup-content small { display: block; margin-top: 6px; color: var(--soluk); font-size: 11px; }
.leaflet-container a.leaflet-popup-close-button { color: #fff; }

/* Tablet (dikey) ve küçük dizüstü */
@media (max-width: 1180px) {
  .bolumler { display: none; }
  .kontrol { left: 14px; transform: none; }
  .sayac { display: block; }
}
/* Telefon ve dikey tablet: kart alttan açılır (rehber.js → ALT_KART ile aynı koşul) */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .marka { top: 10px; left: 10px; right: 10px; padding: 8px 12px; justify-content: space-between; }
  .marka span { display: none; }
  .katmanlar { top: 58px; bottom: auto; left: 0; right: 0; max-width: none; flex-wrap: nowrap; overflow-x: auto; padding: 0 10px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .katmanlar::-webkit-scrollbar { display: none; }
  .kat { flex: 0 0 auto; }
  .kart { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 56%; padding: 8px 16px calc(78px + var(--guvenli-alt)); border-radius: 20px 20px 0 0; transition: max-height .35s var(--ease); }
  .kart.kucuk { max-height: calc(132px + var(--guvenli-alt)); overflow: hidden; }
  .tutamak { all: unset; display: block; width: 100%; height: 22px; cursor: pointer; position: relative; margin-bottom: 4px; }
  .tutamak::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); transform: translateX(-50%); }
  .kart h2 { font-size: 22px; }
  .kart p { font-size: 15px; }
  .ozet { grid-template-columns: repeat(3, 1fr); }
  .kontrol { left: 10px; right: 10px; transform: none; justify-content: space-between; bottom: calc(10px + var(--guvenli-alt)); }
  .noktalar { display: none; }
  .leaflet-control-zoom { display: none; }
  .leaflet-control-attribution { display: none; }
  .kaynak-mobil { display: block !important; }
  .kart .gorsel { aspect-ratio: 16 / 6; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Kart galerisi: görseller yumuşak geçişle akar, dokununca tam ekran (2026-10-19) */
.kart-galeri { position: relative; margin: 2px 0 14px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--orta); cursor: zoom-in; }
.kart-galeri figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s var(--ease); }
.kart-galeri figure.on { opacity: 1; }
.kart-galeri img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); }
.kart-galeri figure.on img { animation: yakin 7.5s ease-out forwards; }
@keyframes yakin { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.kart-galeri figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 110px 8px 12px; font-size: 12.5px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(5, 20, 15, .72)); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.g-nokta { position: absolute; top: 9px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.g-nokta i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); transition: width .3s var(--ease), background .3s; }
.g-nokta i.on { width: 16px; background: #fff; }
.g-buyut { all: unset; position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(5, 20, 15, .45); z-index: 2; cursor: pointer; }
.g-buyut svg { width: 16px; height: 16px; fill: #fff; }
.isik { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; background: rgba(4, 16, 12, .94); animation: kartGir .3s var(--ease); }
.isik figure { position: relative; margin: 0; max-width: 94vw; max-height: 88vh; }
.isik img { display: block; max-width: 94vw; max-height: 82vh; object-fit: contain; border-radius: 10px; }
.isik figcaption { margin-top: 10px; text-align: center; color: #e9efec; font-size: 14px; }
.isik .temsili { bottom: 36px; right: 12px; font-size: 12px; }
.isik-kapat, .isik-ok { all: unset; position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; cursor: pointer; }
.isik-kapat { top: 16px; right: 16px; }
.isik-ok.geri { left: 16px; top: 50%; transform: translateY(-50%); }
.isik-ok.ileri { right: 16px; top: 50%; transform: translateY(-50%); }
.isik-kapat:hover, .isik-ok:hover { background: rgba(255,255,255,.22); }
.isik-kapat:focus-visible, .isik-ok:focus-visible { outline: 3px solid var(--altin); }

/* Uçuş sırasında etiketler sakin; varınca katmanlar sırayla belirir */
.ucuyor .olcum-etiket, .ucuyor .olcum-uc { opacity: 0; }
.ucuyor .leaflet-yolEtiket-pane { opacity: .35; transition: opacity .3s; }
.leaflet-yolEtiket-pane { transition: opacity .5s; }
.parsel.ciz { animation-duration: 1.2s; }

/* Büyük yazı: tablette ya da TV'de sunum */
body.buyuk .kart { width: 480px; }
body.buyuk .kart h2 { font-size: 34px; }
body.buyuk .kart p { font-size: 18.5px; line-height: 1.6; }
body.buyuk .kanit li, body.buyuk .son { font-size: 17px; }
body.buyuk .yakinlar li { font-size: 16px; }
body.buyuk .ozet .m { font-size: 18px; }
body.buyuk .ozet .ob { font-size: 13.5px; }
body.buyuk .bolumler > button { font-size: 15.5px; }
#yaziDugme[aria-pressed="true"], #notDugme[aria-pressed="true"] { background: rgba(201,164,92,.3); }
@media (min-width: 1600px) { .kart { width: 450px; } .kart h2 { font-size: 30px; } .kart p { font-size: 16.5px; } }
/* Dokunmatikte tek elle ileri/geri: büyük düğmeler */
@media (pointer: coarse) { .kontrol .dugme { height: 52px; min-width: 52px; font-size: 15px; } .kontrol .dugme.ana { padding: 0 24px; } }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .kart-galeri { aspect-ratio: 16 / 7; }
  body.buyuk .kart { width: auto; }
  body.buyuk .kart h2 { font-size: 26px; }
  body.buyuk .kart p { font-size: 17px; }
}
.kart .g-not { margin: -8px 0 12px; font-size: 11.5px; color: var(--soluk); line-height: 1.45; }

/* CBS görünümü, görselli parseller ve gizlenebilir paneller (Sercan 2026-10-19 akşam) */
.kart { width: 450px; }
.kart p { font-size: 16px; }
.kart h2 { font-size: 28px; padding-right: 30px; }
@media (min-width: 1500px) { .kart { width: 480px; } .kart h2 { font-size: 30px; } .kart p { font-size: 16.5px; } }
.kart, .bolumler { transition: transform .35s var(--ease), opacity .35s; }
.panel-gizle { all: unset; position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; z-index: 3; }
.panel-gizle:hover { background: rgba(255,255,255,.2); }
.panel-gizle:focus-visible, .panel-ac:focus-visible { outline: 2px solid var(--altin); }
.bolumler h4 { position: relative; display: flex; align-items: center; justify-content: space-between; }
.panel-gizle.sol { position: static; width: 26px; height: 26px; font-size: 18px; }
.panel-ac { all: unset; position: fixed; z-index: 1001; display: none; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--kart); border: 1px solid var(--cizgi); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.panel-ac:hover { background: var(--orta); }
.kart-ac { top: 14px; right: 14px; }
.nav-ac { top: 70px; left: 14px; }
body.kart-gizli .kart { transform: translateX(calc(100% + 30px)); opacity: 0; pointer-events: none; }
body.kart-gizli .kart-ac { display: inline-flex; }
body.nav-gizli .bolumler { transform: translateX(calc(-100% - 30px)); opacity: 0; pointer-events: none; }
body.nav-gizli .nav-ac { display: inline-flex; }
@media (max-width: 1180px) { .nav-ac, .panel-gizle.sol { display: none !important; } }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .panel-gizle:not(.sol), .kart-ac { display: none !important; }
  body.kart-gizli .kart { transform: none; opacity: 1; pointer-events: auto; }
  .kart h2 { padding-right: 0; }
}
/* Uyduda Esri yol katmanı yolları ve adları gösterir; bizim yol adlarımızdan yalnız vurgulananlar kalır */
.uydu .yol-etiket:not(.vurgulu) { display: none !important; }
/* Görselli parsel etiketi: dokununca görseller açılır */
.etiket div.gorselli { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; pointer-events: auto; }
.etiket div.gorselli i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(11,42,33,.85); }
.etiket div.gorselli i svg { width: 11px; height: 11px; fill: #fff; }
.etiket div.kapali.gorselli i { background: var(--altin); }
.etiket div.kapali.gorselli i svg { fill: var(--derin); }
.etiket div.gorselli:hover { filter: brightness(1.08); transform: translate(-50%, 12px) scale(1.04); }
.pop-gorsel { all: unset; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--altin); color: var(--derin); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.pop-gorsel svg { width: 14px; height: 14px; fill: var(--derin); }
.leaflet-tooltip small { color: #5f6b66; }