:root{--bg:#111316;--kart:#1a1d22;--cizgi:#2a2e35;--yazi:#e8eaed;--soluk:#8a9099;--yesil:#3ecf6e;--turuncu:#f08a24;--kirmizi:#e5484d;--mavi:#3b82f6}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font:13px/1.4 Inter,system-ui,-apple-system,sans-serif;color:var(--yazi);background:#000}
#harita{position:absolute;inset:0}
#ust{position:absolute;top:12px;left:12px;display:flex;gap:10px;align-items:center;z-index:2;flex-wrap:wrap}
#ara{display:flex;background:var(--kart);border:1px solid var(--cizgi);border-radius:10px;overflow:hidden}
#ara input{width:340px;background:none;border:0;color:var(--yazi);padding:9px 12px;font:inherit;outline:none}
#ara button{background:var(--mavi);color:#fff;border:0;padding:0 14px;font:inherit;cursor:pointer}
#ada-ara{display:flex;gap:4px;background:var(--kart);border:1px solid var(--cizgi);border-radius:10px;padding:4px}
#ada-ara select,#ada-ara input{background:#20242a;color:var(--yazi);border:1px solid #333a42;border-radius:6px;padding:5px 6px;font:inherit;max-width:130px}
#ada-ara button{background:var(--mavi);color:#fff;border:0;border-radius:6px;padding:0 12px;font:inherit;cursor:pointer}
.katmanlar{display:flex;gap:12px;background:var(--kart);border:1px solid var(--cizgi);border-radius:10px;padding:8px 12px}
.katmanlar label{display:flex;gap:5px;align-items:center;cursor:pointer;color:var(--soluk)}
#ipucu{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--kart);border:1px solid var(--cizgi);padding:8px 14px;border-radius:999px;color:var(--soluk);z-index:2}
#panel{position:absolute;top:12px;right:12px;height:calc(100vh - 24px);width:380px;min-width:300px;min-height:120px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);resize:both;background:rgba(20,22,26,.96);border:1px solid var(--cizgi);border-radius:14px;z-index:3;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(6px)}
#panel[hidden]{display:none}
#p-bas{padding:14px 16px 8px;border-bottom:1px solid var(--cizgi)}
.konum{color:var(--soluk);font-size:12px}
.baslik{display:flex;justify-content:space-between;align-items:baseline;margin-top:2px}
.baslik b{font-size:18px}.baslik .donum{font-size:18px;font-weight:600}.baslik small{color:var(--soluk);display:block;text-align:right}
.rozetler{display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap}
.rozet{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 8px;border-radius:8px;background:#20242a;font-size:11px;min-width:62px}
.rozet i{width:9px;height:9px;border-radius:50%;display:block}
.r-kirmizi i{background:var(--kirmizi)}.r-turuncu i{background:var(--turuncu)}.r-yesil i{background:var(--yesil)}.r-gri i{background:#5b616b}
#p-sekme{display:flex;gap:2px;padding:8px 10px;border-bottom:1px solid var(--cizgi);overflow-x:auto}
#p-sekme button{background:none;border:0;color:var(--soluk);padding:5px 9px;border-radius:7px;cursor:pointer;font:inherit;white-space:nowrap}
#p-sekme button.aktif{background:#fff;color:#111;font-weight:600}
#p-govde{overflow-y:auto;padding:10px 12px 40px;flex:1}
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:12px;padding:12px;margin-bottom:10px}
.kart h4{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.kart h4 span{font-weight:400;color:var(--soluk);font-size:11.5px}
.durum-kirmizi{color:var(--kirmizi)}.durum-turuncu{color:var(--turuncu)}.durum-yesil{color:var(--yesil)}.durum-gri{color:var(--soluk)}
.buyuk{font-size:26px;font-weight:700}
.not{color:var(--soluk);font-size:11.5px;margin-top:6px}
.kademe{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:10px 0 2px}
.kademe div{height:20px;border-radius:5px;border:1px solid #3a3f47}
.kademe div.on{background:var(--turuncu);border-color:var(--turuncu)}
.kademe-ad{display:grid;grid-template-columns:repeat(5,1fr);font-size:10.5px;color:var(--soluk);text-align:center}
.satir{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid #22262c}
.satir:last-child{border:0}
.cubuk{position:relative;height:4px;background:#2a2e35;border-radius:2px;margin:4px 0 6px}
.cubuk i{position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;background:#fff;transform:translateX(-50%)}
.uclu{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.uclu div{background:#20242a;border-radius:8px;padding:7px}.uclu b{display:block;font-size:15px}.uclu small{color:var(--soluk);font-size:10.5px}
.bekliyor{color:var(--soluk);font-style:italic}
button.ince{background:#252a31;color:var(--yazi);border:1px solid var(--cizgi);border-radius:7px;padding:5px 10px;cursor:pointer;font:inherit}
button.ince.aktif{background:var(--mavi);border-color:var(--mavi)}
svg text{fill:var(--soluk);font-size:10px}
.maplibregl-popup-content{background:var(--kart);color:var(--yazi);border:1px solid var(--cizgi);border-radius:10px;padding:10px 12px}
.maplibregl-popup-tip{border-top-color:var(--kart)!important}
.pop small{color:var(--soluk);font-size:10.5px}.pop table td{padding:2px 6px 2px 0}.pop td:first-child{color:var(--soluk)}

#p-tutamak{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:#181b20;border-bottom:1px solid var(--cizgi);cursor:move;user-select:none;color:var(--soluk);font-size:11.5px;flex:none}
#p-tutamak button{background:none;border:1px solid var(--cizgi);color:var(--yazi);border-radius:6px;width:24px;height:20px;cursor:pointer;line-height:1}
#panel.kucuk{height:auto!important;min-height:0;resize:none}
#panel.kucuk #p-sekme,#panel.kucuk #p-govde{display:none}
#panel.suruk{opacity:.92;box-shadow:0 10px 40px rgba(0,0,0,.5)}

.kart-sar{position:relative}
.kart-sar>button.ayir{position:absolute;top:9px;right:9px;z-index:1;opacity:0;background:#252a31;border:1px solid var(--cizgi);color:var(--yazi);border-radius:6px;width:22px;height:20px;cursor:pointer;font-size:12px;line-height:1;transition:opacity .15s}
.kart-sar:hover>button.ayir{opacity:1}
.kart-sar:hover .kart h4>span{margin-right:26px}
.modul{position:absolute;background:rgba(20,22,26,.96);border:1px solid var(--cizgi);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;resize:both;min-width:240px;min-height:60px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);backdrop-filter:blur(6px)}
.modul-bas{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 10px;background:#181b20;border-bottom:1px solid var(--cizgi);cursor:move;user-select:none;color:var(--soluk);font-size:11.5px;flex:none}
.modul-bas button{background:none;border:1px solid var(--cizgi);color:var(--yazi);border-radius:6px;width:22px;height:20px;margin-left:4px;cursor:pointer;line-height:1}
.modul-govde{overflow:auto;padding:8px;flex:1}
.modul-govde .kart{margin:0;border:0;background:none;padding:4px}

#cizim-cubuk{position:absolute;left:12px;bottom:48px;z-index:4;display:flex;gap:6px;align-items:center;background:var(--kart);border:1px solid var(--cizgi);border-radius:10px;padding:5px 8px;color:var(--soluk)}
#cizim-cubuk button{background:#252a31;color:var(--yazi);border:1px solid var(--cizgi);border-radius:7px;padding:4px 8px;cursor:pointer;font:inherit}
#cizim-cubuk button.aktif{background:#ff2bd6;border-color:#ff2bd6;color:#fff}
#cizim-cubuk input[type=color]{width:26px;height:24px;border:0;background:none;padding:0;cursor:pointer}
#cizim-cubuk label{display:flex;gap:4px;align-items:center;cursor:pointer}

#lejant{position:absolute;left:12px;top:108px;z-index:4;width:300px;max-height:calc(100vh - 260px);overflow:auto;background:rgba(20,22,26,.95);border:1px solid var(--cizgi);border-radius:12px;font-size:12px;color:var(--yazi)}
#lejant[hidden]{display:none}
#lejant .lj-bas{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid var(--cizgi);position:sticky;top:0;background:#181b20}
#lejant .lj-bas button{background:none;border:1px solid var(--cizgi);color:var(--yazi);border-radius:6px;width:22px;height:20px;cursor:pointer}
#lejant .lj-govde{padding:6px 10px 10px}
#lejant .lj-grup{margin-top:6px}
#lejant .lj-baslik{font-weight:700;color:#cfd3da;margin-bottom:3px}
#lejant .lj-sat{display:flex;gap:8px;align-items:center;padding:2px 0;line-height:1.3}
#lejant .lj-soluk{color:var(--soluk);font-size:11px}
#lejant .lj-not{color:var(--soluk);font-size:11px;margin:3px 0}

/* ================= MOBİL (≤ 760 px) ================= */
#mobil-menu{display:none}
@media (max-width: 760px){
  html,body{font-size:13px;overscroll-behavior:none}
  #ust{top:8px;left:8px;right:8px;gap:6px}
  #ara{display:none}
  #ada-ara{flex-wrap:wrap;width:100%;padding:6px;gap:6px}
  #ada-ara select{flex:1 1 30%;max-width:none;min-width:0;font-size:14px;padding:7px 4px}
  #ada-ara input{flex:1 1 22%;width:auto;font-size:14px;padding:7px 6px}
  #ada-ara button{flex:1 1 18%;padding:8px 0}
  #mobil-menu{display:inline-block;background:var(--kart);color:var(--yazi);border:1px solid var(--cizgi);border-radius:10px;padding:7px 12px;font:inherit}
  .katmanlar{display:none;flex-wrap:wrap;width:100%;gap:8px 14px}
  body.katman-acik .katmanlar{display:flex}
  .katmanlar label{font-size:14px;padding:3px 0}
  /* Panel → alttan açılan sayfa */
  #panel{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:100%!important;min-width:0!important;
    height:var(--sayfa,46vh)!important;max-height:92vh!important;border-radius:16px 16px 0 0;resize:none!important;border-left:0;border-right:0;border-bottom:0;transition:height .25s}
  #panel.kucuk{height:auto!important}
  #p-tutamak{justify-content:center;cursor:pointer;padding:10px}
  #p-tutamak::before{content:'';position:absolute;top:5px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#4a505a}
  #p-tutamak span:first-child{display:none}
  #p-tutamak span:last-child{position:absolute;right:10px;top:6px}
  #p-bas{padding:6px 12px}
  .baslik b,.baslik .donum{font-size:16px}
  .rozet{min-width:0;padding:5px 6px;font-size:10.5px}
  #p-govde{padding:8px 8px 60px}
  .kart{padding:10px}
  .buyuk{font-size:22px}
  /* Alt sayfanın üstünde kalan düğmeler */
  #cizim-cubuk{left:8px!important;bottom:calc(var(--alt,0px) + 10px)!important;padding:4px 6px;gap:4px}
  #cizim-cubuk label{display:none}
  #sunum-dugme{left:8px!important;top:auto!important;bottom:calc(var(--alt,0px) + 56px)!important}
  #fv-dugme{right:10px!important;bottom:calc(var(--alt,0px) + 10px)!important}
  #ipucu{bottom:auto;top:var(--ust-h,120px);max-width:92vw;font-size:12px;white-space:normal;text-align:center}
  #lejant{left:auto;right:8px;top:var(--ust-h,120px);bottom:auto;width:min(280px,78vw);max-height:40vh}
  .maplibregl-ctrl-bottom-right{display:none}
  .modul{left:8px!important;right:8px!important;width:auto!important;top:var(--ust-h,120px)!important;max-height:calc(100vh - var(--alt,0px) - var(--ust-h,120px) - 20px)!important;height:auto!important;resize:none}
  .kart-sar>button.ayir{opacity:1}
  .maplibregl-popup-content{max-width:70vw;font-size:12px}
}

#lejant .lj-bas{cursor:move;user-select:none}
#sunum-dugme{display:flex;align-items:flex-start;gap:4px}
#sunum-dugme .surukle{cursor:move;user-select:none;color:#8a9099;background:rgba(20,22,26,.9);border:1px solid var(--cizgi);border-radius:8px;padding:5px 6px;line-height:1;font-size:14px}
@media (max-width: 760px){ #sunum-dugme .surukle{display:none} #lejant{left:auto!important;top:var(--ust-h,120px)!important;bottom:auto!important} }
/* Mobil: alt sayfa tam boydayken yüzen düğmeler/modüller gizlenir (çakışma olmasın) */
@media (max-width: 760px){ body.sayfa-tam #cizim-cubuk, body.sayfa-tam #sunum-dugme, body.sayfa-tam #fv-dugme, body.sayfa-tam .modul, body.sayfa-tam #lejant{display:none!important} #sunum-dugme, #cizim-cubuk{z-index:2} }

/* Sunum modunda lejant ve favori düğmesi görünmez (videoya girmesin) */
body.sunum-acik #lejant, body.sunum-acik #fv-dugme, body.sunum-acik #sunum-indir-kutu{display:none!important}