/* Ana sayfa — harita gezgini (6. oturum; yalnız index.html). Taban /stil.css (token, kabuk, tablo); burada gezgin düzeni.
   Masaüstü (≥ 1024 px): solda 360 px katman + panel (seçenekler, il kartı), sağda harita alanı; ilk ekranın tamamı.
   Mobil: tek sütun (katman → harita → lejant → dağılım → seçenekler); il kartı ekranın altında açılır çekmece. */

.bas-genis .bas-ic{max-width:none;padding-inline:20px}
.js-yok{margin:0;padding:14px 20px;background:var(--zemin-2);border-bottom:1px solid var(--cizgi);font-size:15px}

.gezgin{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"seg harita" "panel harita";height:calc(100svh - 57px);min-height:600px;max-height:1000px;border-bottom:1px solid var(--cizgi)}

/* Katman segmenti */
.katman-sec{grid-area:seg;background:var(--yuzey);border-right:1px solid var(--cizgi);padding:16px 20px 2px}
.segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--lacivert);border-radius:2px;overflow:hidden}
.segment button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:50px;padding:6px 4px;text-align:center;font:600 14px/1.2 var(--govde);color:var(--lacivert);background:var(--yuzey);transition:background-color .15s,color .15s}
.segment button+button{border-left:1px solid var(--lacivert)}
.segment button small{font:400 11.5px/1.2 var(--govde);color:var(--ikincil);font-variant-numeric:tabular-nums}
.segment button:hover{background:var(--zemin-2)}
.segment button[aria-pressed=true]{background:var(--lacivert);color:#fff}
.segment button[aria-pressed=true] small{color:var(--lacivert-ust)}
.segment button:focus-visible{outline:2px solid var(--altin);outline-offset:-4px}

/* Panel */
.panel{grid-area:panel;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--yuzey);border-right:1px solid var(--cizgi)}
.panel-ust{display:flex;flex-direction:column;gap:14px;padding:14px 20px 18px}
.panel .alan{gap:6px}
.panel select{width:100%}
.panel details.olcer{max-width:none;padding:0;border:1px solid var(--cizgi);border-left:2px solid var(--altin);background:var(--zemin);font-size:13.5px;line-height:1.55}
.panel details.olcer summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:0 12px;margin:0;
  font:600 11.5px/1.3 var(--govde);letter-spacing:.12em;text-transform:uppercase;color:var(--altin)}
.panel details.olcer summary::-webkit-details-marker{display:none}
.panel details.olcer summary::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.panel details.olcer[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.panel details.olcer summary:focus-visible{outline:2px solid var(--altin);outline-offset:2px}
.olcer-ici{padding:0 12px 12px;color:var(--murekkep)}
.yil-sira{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px;gap:6px}
.dugme-kare{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--cizgi);border-radius:2px;
  background:var(--yuzey);color:var(--lacivert);font:600 17px/1 var(--govde)}
.dugme-kare:hover{border-color:var(--ikincil)}
.dugme-kare:disabled{color:var(--azsayi);cursor:default;border-color:var(--cizgi)}
.dugme-kare[aria-pressed=true]{background:var(--lacivert);border-color:var(--lacivert);color:#fff;font-size:12px;letter-spacing:-.1em}
.dugme-kare:focus-visible{outline:2px solid var(--altin);outline-offset:2px}

/* İl arama (combobox) */
.combo{position:relative}
.combo input{box-sizing:border-box;width:100%;min-height:44px;padding:11px 14px 11px 38px;border:1px solid var(--cizgi);border-radius:2px;
  background:var(--yuzey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a5468' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") 12px center/16px no-repeat;
  font:500 15px/1.3 var(--govde);color:var(--murekkep)}
.combo input::placeholder{color:var(--soluk);font-weight:400}
.combo input:hover{border-color:var(--ikincil)}
.combo input:focus-visible{outline:2px solid var(--altin);outline-offset:2px}
#il-oneri{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px 0;list-style:none;max-height:340px;overflow:auto;
  background:var(--yuzey);border:1px solid var(--ikincil);border-radius:2px}
#il-oneri li{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 14px;cursor:pointer;font-size:15px;color:var(--murekkep)}
#il-oneri li span{color:var(--soluk);font-size:13px;font-variant-numeric:tabular-nums}
#il-oneri li[aria-selected=true],#il-oneri li:hover{background:var(--zemin-2)}

/* İl kartı */
.il-kart{border-top:1px solid var(--cizgi)}
.cekmece-bas{display:none}
#profil{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px}
#profil:focus{outline:none}
.kart-ust{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.kart-ust .etiket{width:100%;color:var(--altin)}
.kart-ust .ad{margin:0;font:400 28px/1.15 var(--baslik);color:var(--lacivert)}
.kart-ust .ad small{margin-left:8px;font:600 12px var(--govde);letter-spacing:.06em;color:var(--soluk);vertical-align:5px}
.il-git{margin-left:auto;font-size:14px;white-space:nowrap}
.buyuk{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.buyuk strong{font:400 36px/1.05 var(--baslik);color:var(--lacivert);font-variant-numeric:lining-nums tabular-nums}
.buyuk span{font-size:13.5px;line-height:1.4;color:var(--ikincil)}
.sira-sat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;font-size:14px}
.sira-sat b{font-weight:600;color:var(--lacivert)}
.sira-ser{display:flex;align-items:center;gap:6px}
.sira-ser small{font-size:11px;color:var(--soluk);font-variant-numeric:tabular-nums}
.sira-serit{position:relative;flex:1;height:2px;background:var(--cizgi)}
.sira-serit::after{content:"";position:absolute;top:50%;left:calc(var(--p)*100%);box-sizing:border-box;width:12px;height:12px;margin:-6px 0 0 -6px;
  background:var(--lacivert);border:2px solid var(--yuzey);border-radius:50%}
.kiyas{margin:0;font-size:14px;color:var(--murekkep)}
.kiyas b{font-weight:600;color:var(--lacivert)}
.kucuk{margin:0;font-size:12.5px;line-height:1.5;color:var(--ikincil)}
.egri-kap{display:flex;flex-direction:column;gap:2px;padding-top:4px;border-top:1px solid var(--cizgi)}
.egri-kap .etiket{padding-top:10px}
#profil .suclar{font-size:13.5px}
.suclar-bas{margin:6px 0 2px;font:600 13.5px var(--govde);color:var(--lacivert)}
.suclar-bas small{font-weight:400;color:var(--soluk)}
.suc-sat.etkin{background:var(--zemin-2)}
#profil .suc-sat{grid-template-columns:minmax(0,1fr) 52px 64px;padding:6px 0}
#profil .rehber-bag{display:block;width:max-content;max-width:100%;margin-top:2px;font-size:12.5px;color:var(--ikincil)}
details.tum{border-top:1px solid var(--cizgi)}
details.tum summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px;font:600 13.5px var(--govde);color:var(--lacivert)}
details.tum summary::-webkit-details-marker{display:none}
details.tum summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--lacivert);border-radius:2px;font-size:15px;line-height:1}
details.tum[open] summary::before{content:"−"}
details.tum summary:focus-visible{outline:2px solid var(--altin);outline-offset:2px}
.panel-alt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding:14px 20px 18px;border-top:1px solid var(--cizgi)}
.dugme-ince{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--lacivert);border-radius:2px;
  font:600 13.5px/1 var(--govde);color:var(--lacivert);background:var(--yuzey);text-decoration:none}
.dugme-ince:hover{background:var(--zemin-2)}
.dugme-ince:focus-visible{outline:2px solid var(--altin);outline-offset:2px}
#paylas-durum{flex-basis:100%;margin:0;font-size:13px;color:var(--ikincil)}
#paylas-durum:empty{display:none}
#paylas-durum input{width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--cizgi);font:13px var(--govde)}

/* Harita alanı */
.harita-alan{grid-area:harita;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;min-width:0;min-height:0;padding:10px 28px 16px;background:var(--zemin)}
.harita-bas{display:flex;flex-direction:column;gap:3px}
#harita-baslik{margin:0;font:400 clamp(21px,1.75vw,27px)/1.2 var(--baslik);color:var(--lacivert)}
#harita-alt{margin:0;font-size:14px;line-height:1.4;color:var(--ikincil)}
.bulgu{margin:0;font-size:13.5px;line-height:1.4;color:var(--murekkep);font-variant-numeric:tabular-nums}
.bulgu b,.bulgu span{font-weight:600;color:var(--lacivert)}
.harita-kap{position:relative;min-height:0}
.gezgin svg.harita{display:block;width:100%;height:auto;aspect-ratio:1000/425;max-height:calc(min(100svh - 57px,1000px) - 240px);touch-action:manipulation}
.gezgin svg.harita path{vector-effect:non-scaling-stroke;transition:opacity .15s}
.gezgin svg.harita path:hover{opacity:1;stroke:var(--lacivert);stroke-width:1.6}
.gezgin svg.harita path.secili{stroke:var(--altin);stroke-width:2.6}
.gezgin svg.harita path.isik{stroke:var(--lacivert);stroke-width:2.2}
.gezgin svg.harita.vurgu path:not(.on):not(.secili){opacity:.2}
.gezgin svg.harita.yakin{cursor:grab;touch-action:none}
.gezgin svg.harita.suruk{cursor:grabbing}
.yakin-dug{position:absolute;right:6px;bottom:6px;display:flex;gap:4px}
.yakin-dug button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:36px;height:36px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:2px;
  color:var(--lacivert);font:600 18px/1 var(--govde)}
.yakin-dug button:hover{border-color:var(--ikincil)}
.yakin-dug button:disabled{color:var(--azsayi);cursor:default}
.yakin-dug button:focus-visible{outline:2px solid var(--altin);outline-offset:2px}

/* Lejant: sınıf düğmeleri (gelince / tıklayınca o sınıftaki iller vurgulanır) */
.gezgin .lejant{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding:0;border:0;font:400 12.5px var(--govde);color:var(--murekkep)}
.lej-not{margin-right:8px;white-space:nowrap;font:600 11px/1.3 var(--govde);letter-spacing:.1em;text-transform:uppercase;color:var(--ikincil)}
.lejant button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 8px;border:1px solid transparent;border-radius:2px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lejant button:hover,.lejant button[aria-pressed=true]{border-color:var(--ikincil);background:var(--yuzey)}
.lejant button:focus-visible{outline:2px solid var(--altin);outline-offset:1px}
.gezgin .lejant i{display:inline-block;width:22px;height:12px;margin:0}
.lejant i.az{background:var(--azsayi);outline:1px solid var(--cizgi)}

/* 81 il dağılım şeridi */
.dagilim{display:flex;flex-direction:column;gap:5px;padding-top:16px;margin-top:auto}
.dagilim:empty{display:none}
.dag-cubuk{position:relative;display:flex;align-items:flex-end;gap:1px;height:46px;border-bottom:1px solid var(--ikincil)}
.dag-cubuk span{position:relative;flex:1 1 0;min-width:0;cursor:pointer}
.dag-cubuk span:hover{outline:1px solid var(--lacivert);z-index:1}
.dag-cubuk span.secili{outline:2px solid var(--altin);z-index:2}
.dag-cubuk span.secili::after{content:attr(data-ad);position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);padding:0 3px;
  font:600 11px/1.3 var(--govde);color:var(--lacivert);white-space:nowrap;background:var(--zemin)}
.dagilim.vurgu .dag-cubuk span:not(.on):not(.secili){opacity:.2}
.dag-tr{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--ikincil);pointer-events:none}
.dag-trn{white-space:nowrap}
.dag-trn::before{content:"";display:inline-block;width:16px;margin:0 5px 0 12px;border-top:1px dashed var(--ikincil);vertical-align:middle}
.dag-eksen{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--soluk);font-variant-numeric:tabular-nums}
.dag-eksen span:nth-child(2){text-align:center}
.dag-eksen span:last-child{text-align:right}

/* İpucu (stil.css) üstüne */
.ipucu{z-index:50}

/* Tablo ve yöntem özeti */
.tablo-bolum{padding-block:48px 8px}
.yontem-ozet{margin-top:40px;background:var(--zemin-2);border-top:1px solid var(--cizgi)}
.yontem-ozet .kap{display:flex;flex-direction:column;gap:16px;padding-block:44px 52px}
.yontem-ozet ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;max-width:78ch}
.yontem-ozet li{font-size:15px;line-height:1.6}
.yontem-ozet li::marker{color:var(--altin)}
.yontem-ozet p{margin:0}

/* Mobil ve dar ekran: tek sütun, il kartı alt çekmece */
@media (max-width:1023px){
  .bas-genis .bas-ic{padding-inline:max(16px,min(24px,4vw))}
  .gezgin{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;border-bottom:0}
  .katman-sec{order:1;border-right:0;padding:12px 16px 0}
  .harita-alan{order:2;justify-content:flex-start;gap:10px;padding:12px 16px 20px}
  .panel{order:3;overflow:visible;border-right:0;border-top:1px solid var(--cizgi)}
  .panel-ust{padding:18px 16px}
  .harita-bas{display:contents}
  #harita-baslik{order:1} #harita-alt{order:2} .harita-kap{order:3} .bulgu{order:4} .gezgin .lejant{order:5} .dagilim{order:6;margin-top:0}
  .harita-kap{margin-inline:-16px}
  .gezgin svg.harita{max-height:none}
  .yakin-dug{position:static;justify-content:flex-end;margin:6px 12px 0}
  .yakin-dug button{width:40px;height:40px}
  .gezgin .lejant{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:12px}
  .gezgin .lejant::-webkit-scrollbar{display:none}
  .panel-alt{padding:16px}
  .il-kart{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:column;max-height:78vh;max-height:78dvh;background:var(--yuzey);border-top:2px solid var(--lacivert)}
  .cekmece-bas{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:58px;padding:8px 16px;
    font:400 15px/1.3 var(--govde);color:var(--murekkep);background:var(--yuzey)}
  .cekmece-bas b{font:400 18px/1.2 var(--baslik);color:var(--lacivert)}
  .cekmece-bas .ok{flex:none;width:9px;height:9px;margin-top:5px;border-right:2px solid var(--lacivert);border-bottom:2px solid var(--lacivert);transform:rotate(-135deg)}
  .il-kart.acik .cekmece-bas .ok{margin-top:-5px;transform:rotate(45deg)}
  .cekmece-bas:focus-visible{outline:2px solid var(--altin);outline-offset:-4px}
  .il-kart:not(.acik) #profil{display:none}
  .il-kart.acik #profil{overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--cizgi);padding:16px}
  body{padding-bottom:60px}
}
@media (max-width:420px){
  .segment button{font-size:13.5px}
  .kart-ust .ad{font-size:25px}
  .buyuk strong{font-size:32px}
  .dag-not{display:none}
  .dag-trn::before{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.segment button,.gezgin svg.harita path{transition:none}}