/* Türkiye Vs30 haritası. Başlık, arama, panel ve alt çubuk İstanbul Jeoloji haritasıyla aynı tasarım dilini kullanır. */
:root{font-family:Arial,Helvetica,sans-serif;color:#19313c;background:#eef1ee;--line:#dbe2e2;--accent:#176b70}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #278995;outline-offset:3px}[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.app-header{height:72px;display:flex;align-items:center;gap:28px;padding:12px 24px;background:white;border-bottom:1px solid var(--line);position:relative;z-index:1100}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}.brand a{display:flex}.brand img{width:30px;height:30px}.brand h1{font-size:18px;letter-spacing:-.4px;margin:0}
.eyebrow{display:block;font-size:9px;letter-spacing:2px;color:var(--accent);font-weight:700;margin-bottom:4px}

.search{width:min(480px,100%);position:relative}.search-row{display:flex;gap:6px}
.search input{min-width:0;width:100%;height:42px;padding:0 12px;border:1px solid #b7c8cb;border-radius:8px;background:#f8faf9;font-size:14px}
.search-submit{border:0;background:var(--accent);color:white;border-radius:8px;padding:0 17px;font-weight:700}
.search-results{position:absolute;top:48px;left:0;right:0;border:1px solid var(--line);background:white;border-radius:10px;box-shadow:0 8px 25px #19313c26;max-height:min(45dvh,340px);z-index:2;display:flex;flex-direction:column;overflow:hidden}
.search-status{font-size:13px;line-height:1.5;margin:0;padding:12px 14px}.search-results ul{padding:0;margin:0;list-style:none}
.result-button{display:block;text-align:left;width:100%;border:0;border-top:1px solid #edf0ef;padding:12px 14px;background:white;line-height:1.45;color:#19313c;font-size:13px}.result-button:hover,.result-button:focus{background:#edf6f4}.result-button strong{display:block;font-size:14px;margin-bottom:3px}

.map-mode{margin-left:auto;display:flex;flex-shrink:0;gap:3px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#f3f6f5}
.map-mode button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 13px;border:1px solid transparent;border-radius:8px;background:transparent;color:#526771;font-size:13px;font-weight:600;line-height:1}
.map-mode button:hover{background:#e5eeeb;color:#145d61}.map-mode button[aria-pressed=true]{background:#176b70;color:white;border-color:#176b70;box-shadow:0 1px 3px #19313c1a}
.map-mode svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.map-stage{position:relative;height:calc(100dvh - 72px);min-height:260px}#map{width:100%;height:100%;background:#f1f1ec}
.vs30-layer canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.map-message{position:absolute;left:50%;top:12px;transform:translateX(-50%);max-width:calc(100% - 110px);background:white;box-shadow:0 2px 12px #19313c26;border-radius:8px;padding:10px 14px;font-size:13px;z-index:1000;line-height:1.5;margin:0}
.leaflet-control-attribution{font-size:10px!important}.leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important}
.locate-button{width:38px;height:38px;border:0;background:white;color:#19313c;font-size:22px}.locate-button[aria-busy=true]{opacity:.5}

.map-actions{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:5px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 3px 16px #19313c1c;z-index:1000;white-space:nowrap}
.map-actions button{border:0;background:white;padding:10px 13px;border-radius:8px;color:#19313c;font-size:13px;font-weight:600}
.map-actions button:hover,.map-actions button[aria-expanded=true]{background:#e8f2ef;color:#145d61}.map-actions button:first-child{background:#e8f2ef;color:#145d61}
.map-actions .count{display:inline-block;min-width:20px;margin-left:4px;padding:1px 6px;border-radius:10px;background:#176b70;color:white;font-size:11px;line-height:18px;text-align:center}

/* Haritanın üzerindeki küçük ölçek; masaüstünde imlecin altındaki değeri, telefonda son seçilen noktayı gösterir. */
.scale-chip{position:absolute;left:16px;bottom:34px;width:250px;padding:9px 12px 8px;background:#ffffffee;border:1px solid var(--line);border-radius:11px;box-shadow:0 3px 16px #19313c1c;z-index:1000;font-size:12px}
.scale-value{display:block;font-weight:700;margin-bottom:6px;line-height:1.4;overflow-wrap:anywhere}
.scale-bar{display:block;position:relative;height:10px;border-radius:5px}.scale-bar.large{height:16px;border-radius:6px}
.scale-pointer{position:absolute;top:-4px;width:4px;height:18px;margin-left:-2px;background:#19313c;border:1px solid white;border-radius:2px}
.scale-ticks{display:block;position:relative;height:15px;margin-top:3px;color:#526771;font-size:11px}
.scale-ticks span{position:absolute;transform:translateX(-50%)}.scale-ticks span:first-child{left:0;transform:none}.scale-ticks span:last-child{right:0;transform:none}

.panel{position:fixed;right:16px;top:88px;bottom:110px;width:380px;max-width:calc(100% - 32px);background:white;z-index:1200;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 32px #19313c26;display:flex;flex-direction:column;overflow:hidden}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line);flex-shrink:0}.panel-header h2{font-size:18px;margin:0}
.panel-close{width:34px;height:34px;border:0;border-radius:50%;background:#f0f4f2;color:#19313c;font-size:23px;line-height:1}
.panel-content{padding:16px 20px;overflow:auto;overscroll-behavior:contain;line-height:1.65;font-size:14px}
.panel-content p{margin:0 0 16px}.panel-content h3{font-size:15px;margin:20px 0 8px}.panel-content a{color:#176b70}
.muted{color:#607580;font-size:12px}.lead{color:#526771}.note{font-size:12px;color:#607580;border-left:2px solid #b6ceca;padding-left:10px}
.related{display:grid;gap:9px}.related a{border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-decoration:none}.contact{margin-top:18px!important}
.legend-scale{margin:4px 0 6px}
.class-list{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:10px}.class-list li{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.45}
.class-list strong{display:block;font-size:13px}.class-swatch{flex:0 0 34px;height:18px;margin-top:1px;border-radius:4px;border:1px solid #0000001a}
.class-swatch.unavailable{background:#f0f4f2;border:1px dashed #8a9aa1}.class-source-range{display:block;color:#607580;font-size:12px;margin-top:3px}
.opacity-tool{margin-top:6px;padding-top:7px;border-top:1px solid var(--line)}
.opacity-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;color:#19313c}
.opacity-heading output{color:#526771;font-variant-numeric:tabular-nums}
.opacity-control{display:flex;align-items:center;gap:8px;font-size:11px;color:#526771}.opacity-control input{flex:1;min-width:0;height:32px;margin:0;accent-color:#176b70;cursor:pointer}
@media(min-width:701px) and (max-width:1020px){.scale-chip{bottom:92px}}

.point-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.point-head{display:grid;grid-template-columns:26px minmax(0,1fr) 36px;align-items:center;column-gap:9px;padding:6px 0}
.point-head .point-badge{grid-column:1;grid-row:1 / 3}
.point-head .point-name{grid-column:2;grid-row:1}
.point-head .point-value{grid-column:2;grid-row:2}
.point-head .point-remove{grid-column:3;grid-row:1 / 3}
.point-badge{flex:0 0 26px;height:26px;border-radius:50%;background:var(--pin);color:#19313c;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #ffffffb3,0 0 0 1px #19313c40}
.point-name{min-width:0;border:0;background:none;padding:4px 0;text-align:left;color:#19313c;font-size:13px;font-weight:700;overflow-wrap:anywhere;line-height:1.4}.point-name:hover{color:#176b70;text-decoration:underline}
.point-remove{flex:0 0 32px;height:32px;border:0;border-radius:50%;background:#f0f4f2;color:#526771;font-size:18px;line-height:1}
.point-value{font-size:12px;font-weight:700;color:#526771;line-height:1.5;overflow-wrap:anywhere}
.points-chart{margin:0 0 14px;padding:8px 6px 4px;border:1px solid var(--line);border-radius:10px;background:#fbfcfb}
.points-chart-svg{display:block;width:100%;height:auto;max-height:210px;font-family:inherit}
.chart-grid{stroke:#19313c;stroke-opacity:.12;stroke-width:1}
.chart-tick,.chart-unit{font-size:10px;fill:#607580;text-anchor:end}.chart-unit{text-anchor:start}
.chart-band{font-size:10px;font-weight:700;fill:#526771}
.chart-column{stroke:#19313c;stroke-opacity:.06;stroke-width:1}
.chart-dot{stroke:white;stroke-width:2;filter:drop-shadow(0 1px 2px #19313c40)}
.chart-dot-label{font-size:10px;font-weight:700;fill:#19313c;text-anchor:middle;pointer-events:none}
.chart-x{font-size:10px;fill:#526771;text-anchor:middle}
.chart-point{cursor:pointer;outline:none}.chart-point:hover .chart-column,.chart-point:focus-visible .chart-column{stroke:#176b70;stroke-opacity:.35;stroke-width:2}
.point-list{gap:4px!important}
.points-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
#points-summary{font-size:12px;color:#607580}
.clear-button{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid #e3b4b4;border-radius:8px;background:#fff6f5;color:#a33a3a;font-size:12px;font-weight:700}
.clear-button:hover{background:#fdeaea;border-color:#d58f8f}
.clear-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.vs30-pin-wrap{background:none;border:0}
.vs30-pin{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pin);border:2px solid white;box-shadow:0 2px 6px #19313c59;color:#19313c;font-size:12px;font-weight:700}
.vs30-pin b{transform:rotate(45deg)}
.point-popup{font-size:13px;line-height:1.5;min-width:190px}.point-popup strong{display:block;font-size:14px;margin-bottom:4px}.point-popup p{margin:0 0 6px}.popup-value{font-size:16px;font-weight:700;color:#145d61}
.leaflet-popup-content{max-width:calc(100vw - 120px);max-height:max(80px,calc(100dvh - var(--mapelse-header-height,72px) - 180px));overflow:auto}
.popup-actions{display:flex;gap:6px;margin-top:8px}.popup-actions button{flex:1;min-height:36px;border:1px solid #a9c8c4;border-radius:7px;background:white;color:#176b70;font-size:12px;font-weight:700}.popup-actions button:first-child{background:#176b70;border-color:#176b70;color:white}

@media(max-width:700px){
  .app-header{height:112px;display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 14px}
  .brand{gap:9px;min-width:0}.brand img{width:26px;height:26px}.brand h1{font-size:16px}.eyebrow{font-size:8px;margin-bottom:3px}
  .search{grid-column:1 / -1;grid-row:2;width:100%}.search input{font-size:16px}.search-submit{font-size:14px}
  .map-mode{position:absolute;top:124px;right:12px;margin:0;background:white;box-shadow:0 2px 10px #19313c1a}.map-mode button{padding:0 10px;font-size:12px;gap:6px}.map-mode svg{width:17px;height:17px}
  .map-stage{height:calc(100dvh - 112px)}
  .map-actions{bottom:calc(30px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);gap:2px}.map-actions button{font-size:12px;padding:10px 11px}
  .scale-chip{left:12px;right:12px;width:auto;bottom:calc(92px + env(safe-area-inset-bottom));padding:7px 11px 5px}
  .panel{top:auto;left:8px;right:8px;bottom:calc(92px + env(safe-area-inset-bottom));width:auto;max-width:none;height:min(60dvh,580px);max-height:calc(100dvh - var(--mapelse-header-height,112px) - 104px - env(safe-area-inset-bottom));border-radius:17px}
  .panel-header{padding:13px 16px}.panel-content{padding:14px 18px}
  .map-message{top:74px;left:64px;right:12px;transform:none;max-width:none;font-size:12px}
  .leaflet-control-attribution{max-width:100%;font-size:9px!important}.leaflet-top .leaflet-control{margin-top:12px}
}
/* On short landscape screens, leave the middle of the map available to tap. */
@media(min-width:560px) and (max-width:700px) and (max-height:500px){
  .scale-chip{left:auto;right:12px;width:250px;bottom:calc(30px + env(safe-area-inset-bottom))}
  .map-actions{left:12px;transform:none}
  .panel{right:274px}
  .panel-header{padding-top:8px;padding-bottom:8px}
  .leaflet-popup-content{max-width:calc(100vw - 370px);max-height:max(80px,calc(100dvh - var(--mapelse-header-height,112px) - 120px))}
}
/* Hesap düğmesi: İstanbul haritasıyla aynı yerleşim; diyalog stili ortak /assets/css/account.css'ten gelir. */
.app-header #account-open{flex-shrink:0;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:white;color:#176b70;font-size:13px;font-weight:700}
@media(max-width:700px){.app-header #account-open{grid-column:2;grid-row:1;justify-self:end;min-height:36px;font-size:12px;padding:0 10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* The shared account stylesheet intentionally targets #account-dialog only. */
#vs30-report-dialog{width:520px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;margin:auto;border:1px solid var(--line);border-radius:16px;background:white;color:#19313c;font:14px/1.55 Arial,Helvetica,sans-serif;box-shadow:0 20px 70px #102e3b40;overflow:hidden}
#vs30-report-dialog[open]{display:flex;flex-direction:column}#vs30-report-dialog::backdrop{background:#102e3b80;backdrop-filter:blur(3px)}
#vs30-report-dialog .offer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px;border-bottom:1px solid var(--line);flex-shrink:0}
#vs30-report-dialog .offer-eyebrow{display:block;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.3px;margin-bottom:5px}
#vs30-report-dialog h2{margin:0;font-size:23px;line-height:1.25;letter-spacing:-.3px}
#vs30-report-dialog #vs30-report-close{width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:#f0f4f3;color:#19313c;font-size:24px;flex-shrink:0}
#vs30-report-dialog .offer-body{padding:20px;overflow:auto;overscroll-behavior:contain;min-height:0}#vs30-report-dialog .offer-body p{margin:0 0 14px}
#vs30-report-dialog .muted{color:#607580;font-size:12px}#vs30-report-quota:not(:empty){padding:12px;border-radius:9px;background:#edf5f3;color:#176b70;font-weight:600}
#vs30-report-dialog .offer-interest{display:block;width:100%;min-height:44px;padding:11px 14px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:white;font-size:14px;font-weight:700;margin-bottom:12px}
#vs30-report-dialog .offer-interest:hover{background:#12585c}#vs30-report-status{font-size:13px;line-height:1.5}#vs30-report-status:empty{display:none}
.points-toolbar{flex-wrap:wrap}#vs30-report-open{order:2;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;padding:9px 12px;border:1px solid #accbc6;border-radius:8px;background:#eff6f4;color:#176b70;font-size:13px;font-weight:700}
#vs30-report-open:hover{background:#e2f0ec}#vs30-report-open .premium-tag{font-size:10px;padding:2px 6px;border:1px solid #bfd6cf;border-radius:5px;background:white}
@media(max-width:400px){#vs30-report-dialog .offer-header{padding:18px 16px;gap:10px}#vs30-report-dialog h2{font-size:21px}#vs30-report-dialog .offer-body{padding:18px 16px}}

/* Keep map controls below the result list and its source visible while scrolling. */
.search-results>.search-status{flex-shrink:0}.search-results ul{min-height:0;overflow:auto;overscroll-behavior:contain}.search-results a{color:#176b70}

/* Source selection stays separate from basemap selection and search results. */
.source-picker{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;border:1px solid var(--line);border-radius:10px;z-index:1000;box-shadow:0 2px 8px #19313c18}
.source-picker label{font-size:12px;font-weight:700;white-space:nowrap}.source-picker select{min-height:36px;min-width:88px;padding:4px 8px;border:1px solid #aebfbe;border-radius:6px;background:#fff;color:#19313c;font:16px Arial,sans-serif;cursor:pointer}
.source-picker select:focus-visible{outline:3px solid #278995;outline-offset:2px}
.vs30-layer{image-rendering:pixelated;image-rendering:crisp-edges}
@media(max-width:700px){.source-picker{top:70px;right:10px}.source-picker label{font-size:11px}.source-picker select{min-height:36px;font-size:14px;min-width:80px}}
@media(max-width:700px) and (max-height:500px){.source-picker{top:62px}}

@media(max-width:700px){.map-message{top:126px}}

/* Keep the source control above the desktop panels, with room for its focus ring. */
@media(min-width:701px){.panel{top:calc(var(--mapelse-header-height,72px) + 80px)}}

/* On short landscape screens, use separate columns for panels and the toolbar
   while keeping source selection above the panel. */
@media(min-width:701px) and (max-height:500px){
  .panel{bottom:calc(30px + env(safe-area-inset-bottom))}
  .map-actions{left:12px;transform:none}
  .map-actions button{min-height:40px;font-size:12px;padding:10px}
}
@media(pointer:coarse){.search input,.source-picker select{font-size:16px}}
@media(min-width:701px) and (max-width:760px){
  .app-header.has-mapelse-nav .brand{min-width:135px;gap:8px}
  .app-header.has-mapelse-nav .brand img{width:26px;height:26px}
  .app-header.has-mapelse-nav .brand h1{font-size:14px;line-height:1.2}
}

/* Reserve measured space for the source selector and scale when opening a point. */
.leaflet-popup-content{max-height:var(--point-popup-height,240px);overscroll-behavior:contain}
.popup-actions{position:sticky;bottom:0;background:white;padding:4px 0;margin-top:4px}
/* A short portrait viewport has no room for both overlays. Keep the scale
   immediately below the map, reachable by page scrolling, rather than cover
   the selected point or shrink its actions. */
@media(max-width:559px) and (max-height:500px){
  .map-stage{margin-bottom:180px}
  .scale-chip{top:calc(100% + 8px);bottom:auto}
}

.report-sample-link{display:grid;justify-items:center;gap:10px;color:#176b70;font-weight:600}.report-sample-link img{max-width:100%;height:auto;border:1px solid #dce5e3}.report-sample-link:focus-visible{outline:3px solid #176b70;outline-offset:3px}
@media(max-width:400px){.map-actions button{padding:10px 7px;font-size:11px}.map-actions .premium-tag{display:none}}

@media(min-width:701px) and (max-height:500px){.map-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:200px}.map-actions .premium-tag{display:none}}