/* =============================================================================
   GisAI AR -- web sürümü stil sistemi

   Android sürümüyle AYNI tasarım token'ları (values/tokens.xml karşılığı).
   Koyu tema birincildir: AR görüntüsü üzerinde kontrast ve OLED'de pil.
   ========================================================================== */

:root {
  /* --- ham palet --- */
  --ink-900:#0A0C0E; --ink-800:#121619; --ink-700:#1A1F24; --ink-600:#252C33;
  --ink-500:#39424B; --ink-400:#5A6673; --ink-300:#8A97A4; --ink-200:#B8C2CC;
  --ink-100:#DDE3E9; --ink-050:#F2F5F8; --white:#FFFFFF;

  --brand-400:#4DA3FF; --brand-500:#2E8BF0; --brand-600:#1C6FC9;
  --ok:#3FBF7F; --warn:#E8A33D; --err:#E5484D;

  /* --- şebeke renkleri --- */
  --net-water:#2E9BE6; --net-sewer:#8D6E63; --net-storm:#26C6DA;
  --net-gas:#F5C518; --net-power:#E5484D; --net-telecom:#3FBF7F;
  --net-boundary:#8A97A4; --net-unknown:#B8C2CC;

  /* --- semantik (koyu tema) --- */
  --bg:var(--ink-900); --surface:var(--ink-800); --surface-2:var(--ink-700);
  --on-surface:var(--ink-050); --on-surface-var:var(--ink-300);
  --outline:var(--ink-500); --primary:var(--brand-400); --on-primary:var(--ink-900);

  /* --- boşluk --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  /* --- yarıçap --- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  /* --- dokunma hedefi --- */
  --touch:48px; --touch-primary:56px;
  /* --- hareket --- */
  --motion:200ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  margin:0; padding:0; height:100%; overflow:hidden;
  background:var(--bg); color:var(--on-surface);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:manipulation;
}

/* iOS'ta metin seçimi ve uzun basma menüsünü kapat (saha aracı) */
body { -webkit-user-select:none; user-select:none; }
.selectable { -webkit-user-select:text; user-select:text; }

.screen { position:fixed; inset:0; display:flex; flex-direction:column; }
[hidden] { display:none !important; }

/* --- sayısal değerler: TABULAR rakam, birim küçük ve soluk --- */
.metric { font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
          font-weight:600; font-size:20px; }
.metric .unit { font-size:12px; font-weight:400; color:var(--on-surface-var);
                margin-left:2px; }

/* =========================== AÇILIŞ / YASAL =========================== */
.legal { background:var(--bg); overflow-y:auto; padding:var(--safe-top) var(--s5) var(--s8); }
.legal-card { margin:auto; max-width:520px; padding:var(--s6) 0; }
.legal-mark { display:flex; justify-content:center; margin-bottom:var(--s4); }
.legal h1 { margin:0; font-size:30px; letter-spacing:-.5px; text-align:center; }
.legal-sub { margin:var(--s1) 0 var(--s6); text-align:center; color:var(--on-surface-var);
             font-size:13px; }
.legal-body { background:var(--surface); border:1px solid var(--outline);
              border-radius:var(--r-lg); padding:var(--s4); font-size:14px; }
.legal-body p { margin:0 0 var(--s3); }
.legal-body p:last-child { margin-bottom:0; }
.legal-web-note { color:var(--warn); border-top:1px solid var(--outline);
                  padding-top:var(--s3); font-size:13px; }

/* =========================== ÜST ŞERİT =========================== */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--safe-top) + var(--s2)) var(--s3) var(--s2);
  background:var(--surface); border-bottom:1px solid var(--outline);
  z-index:5;
}
.brand { font-size:20px; font-weight:650; letter-spacing:-.3px; }
.topbar-actions { display:flex; gap:var(--s1); }

.icon-btn {
  width:var(--touch); height:var(--touch); display:grid; place-items:center;
  background:transparent; border:0; border-radius:var(--r-pill); cursor:pointer;
  color:var(--on-surface);
}
.icon-btn:active { background:rgba(255,255,255,.08); }
.icon-btn.light { color:var(--white); }
.icon-btn svg, .ar-btn svg, .fab svg, .btn-ico {
  width:24px; height:24px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}

/* =========================== DURUM ROZETLERİ =========================== */
.status-strip {
  display:flex; gap:var(--s2); padding:var(--s2) var(--s3);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.status-strip::-webkit-scrollbar { display:none; }
.status-strip.compact { padding:0; flex:1; }

.pill {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  min-height:32px; padding:0 var(--s3);
  background:rgba(10,12,14,.80); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill); font-size:13px; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  color:var(--white);
}
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--ink-300); }
.pill.ok .dot { background:var(--ok); }  .pill.ok { color:var(--ok); }
.pill.warn .dot { background:var(--warn); } .pill.warn { color:var(--warn); }
.pill.err .dot { background:var(--err); } .pill.err { color:var(--err); }

/* =========================== HARİTA =========================== */
.map-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1;
              touch-action:none; }

.fab {
  position:absolute; right:var(--s4); top:calc(var(--safe-top) + 128px);
  width:var(--touch-primary); height:var(--touch-primary);
  border-radius:var(--r-pill); border:1px solid var(--outline);
  background:var(--surface-2); color:var(--brand-400);
  display:grid; place-items:center; z-index:4; cursor:pointer;
}
.fab:active { transform:scale(.95); }

.bottom-card {
  position:absolute; left:var(--s3); right:var(--s3);
  bottom:calc(var(--safe-bottom) + var(--s3));
  background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--r-lg); padding:var(--s4); z-index:4;
}
.card-title { font-size:17px; font-weight:600; }
.card-sub { font-size:13px; color:var(--on-surface-var); margin-top:2px; }
.empty-line { font-size:14px; color:var(--on-surface-var); margin-top:var(--s2); }

.chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:0 var(--s3);
  border:1px solid var(--outline); border-radius:var(--r-pill);
  font-size:13px; background:transparent;
}
.chip.off { opacity:.5; }
.chip .swatch { width:10px; height:10px; border-radius:50%; }
.chip .mark { font-weight:700; }

.legal-strip {
  display:flex; align-items:flex-start; gap:var(--s2);
  margin-top:var(--s4); font-size:11px; color:var(--on-surface-var);
}
.warn-ico { width:14px; height:14px; flex:0 0 auto; margin-top:1px;
            fill:none; stroke:var(--warn); stroke-width:2;
            stroke-linecap:round; stroke-linejoin:round; }

/* =========================== DÜĞMELER =========================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--touch); padding:0 var(--s5);
  border-radius:var(--r-md); border:1px solid transparent;
  font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:transform var(--motion) ease-out;
}
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--primary); color:var(--on-primary); min-height:var(--touch-primary); }
.btn-ghost { background:transparent; color:var(--on-surface); border-color:var(--outline); }
.btn-block { width:100%; margin-top:var(--s3); }

/* =========================== AR =========================== */
.ar { background:#000; }
#video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; background:#000;
}
.ar-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; }

.ar-scrim-top {
  position:absolute; top:0; left:0; right:0; height:150px; z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,0));
  pointer-events:none;
}
.ar-scrim-bottom {
  position:absolute; bottom:0; left:0; right:0; height:190px; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  pointer-events:none;
}
.ar-top {
  position:absolute; top:calc(var(--safe-top) + var(--s2)); left:var(--s2); right:var(--s2);
  display:flex; align-items:center; gap:var(--s2); z-index:3;
}
.guidance {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:3; max-width:82%; text-align:center;
  background:rgba(10,12,14,.88); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-md); padding:var(--s3) var(--s5);
  font-size:15px; color:var(--white);
}
.ar-legal {
  position:absolute; left:var(--s4); right:var(--s4);
  bottom:calc(var(--safe-bottom) + 96px); z-index:3;
  text-align:center; font-size:11px; color:rgba(255,255,255,.78);
}
.ar-actions {
  position:absolute; left:0; right:0; bottom:calc(var(--safe-bottom) + var(--s3));
  display:flex; justify-content:center; gap:var(--s3); z-index:3;
}
.ar-btn {
  width:64px; height:64px; border-radius:var(--r-pill);
  background:rgba(26,31,36,.78); border:1px solid rgba(255,255,255,.25);
  color:var(--white); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; cursor:pointer;
  font-family:inherit;
}
.ar-btn:active { transform:scale(.94); }
.ar-btn span { font-size:10px; letter-spacing:.02em; }
.ar-btn svg { width:20px; height:20px; }

/* --- yön ince ayar --- */
.heading-panel {
  position:absolute; left:var(--s3); right:var(--s3);
  bottom:calc(var(--safe-bottom) + 96px); z-index:6;
  background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--r-lg); padding:var(--s4);
}
.hp-row { display:flex; align-items:baseline; justify-content:space-between; }
.hp-label { font-size:14px; }
.hp-help { font-size:12px; color:var(--on-surface-var); margin:var(--s2) 0 var(--s3); }
.hp-actions { display:flex; gap:var(--s2); }
.hp-actions .btn { flex:1; }
input[type=range] {
  width:100%; margin:var(--s3) 0 0; height:36px; -webkit-appearance:none;
  background:transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height:4px; border-radius:2px; background:var(--outline);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
  background:var(--primary); margin-top:-12px; border:0;
}

/* =========================== ALT SAYFA =========================== */
.sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:8; }
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:9;
  max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface); border-top:1px solid var(--outline);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s2) var(--s5) calc(var(--safe-bottom) + var(--s8));
}
.sheet-handle {
  width:38px; height:4px; border-radius:2px; background:var(--outline);
  margin:var(--s2) auto var(--s4);
}
.sheet-title { font-size:20px; margin:0 0 var(--s3); }
.sheet-note { font-size:12px; color:var(--on-surface-var); margin-top:var(--s4); }

/* --- detay kartı --- */
.d-head { display:flex; align-items:center; gap:var(--s3); }
.d-dot { width:14px; height:14px; border-radius:50%; flex:0 0 auto; }
.d-title { font-size:20px; font-weight:650; }
.d-sub { font-size:13px; color:var(--on-surface-var); margin-top:2px; }

.badges { display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s3) 0; }
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px var(--s3); border-radius:var(--r-pill);
  font-size:12px; border:1px solid currentColor; background:transparent;
}
.badge.high { color:var(--ok); } .badge.med { color:var(--warn); }
.badge.low { color:var(--err); } .badge.unk { color:var(--ink-300); }

.metrics { display:flex; gap:var(--s4); margin:var(--s4) 0; flex-wrap:wrap; }
.metrics > div { min-width:74px; }
.metrics .label { font-size:11px; color:var(--on-surface-var); text-transform:uppercase;
                  letter-spacing:.03em; }

.kv { width:100%; border-collapse:collapse; font-size:14px; }
.kv td { padding:7px 0; vertical-align:top; }
.kv td:first-child { color:var(--on-surface-var); width:42%; font-size:13px; }

.help-box {
  margin-top:var(--s4); padding:var(--s3); border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); font-size:12px; color:var(--on-surface-var);
}

/* --- katman satırı --- */
.layer-row {
  border:1px solid var(--outline); border-radius:var(--r-md);
  padding:var(--s3); margin-bottom:var(--s2);
}
.lr-head { display:flex; align-items:center; gap:var(--s3); min-height:var(--touch); }
.lr-dot { width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.lr-text { flex:1; min-width:0; }
.lr-title { font-size:16px; font-weight:600; }
.lr-sub { font-size:12px; color:var(--on-surface-var); }

/* iOS tarzı anahtar */
.switch { position:relative; width:52px; height:32px; flex:0 0 auto; }
.switch input { opacity:0; width:100%; height:100%; margin:0; }
.switch .track {
  position:absolute; inset:0; border-radius:var(--r-pill);
  background:var(--ink-600); transition:background var(--motion) ease-out;
  pointer-events:none;
}
.switch .knob {
  position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:var(--white); transition:transform var(--motion) ease-out;
  pointer-events:none;
}
.switch input:checked ~ .track { background:var(--brand-600); }
.switch input:checked ~ .knob { transform:translateX(20px); }

/* =========================== BİLDİRİM =========================== */
.toast {
  position:fixed; left:50%; bottom:calc(var(--safe-bottom) + 110px);
  transform:translateX(-50%); z-index:20;
  max-width:88%; padding:var(--s3) var(--s4);
  background:rgba(10,12,14,.94); border:1px solid var(--outline);
  border-radius:var(--r-md); font-size:14px; color:var(--white);
  text-align:center;
}

/* =========================== ERİŞİLEBİLİRLİK =========================== */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* =========================== İÇE ALMA SİHİRBAZI =========================== */
.step-label {
  padding:var(--s3) var(--s4) 0; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--on-surface-var);
}
.progress {
  height:4px; margin:var(--s2) var(--s4) 0; border-radius:2px;
  background:var(--ink-600); overflow:hidden;
}
.progress .bar {
  height:100%; width:35%; border-radius:2px; background:var(--primary);
  animation:slide 1.1s ease-in-out infinite;
}
@keyframes slide { 0%{transform:translateX(-100%)} 100%{transform:translateX(320%)} }

.import-body {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--s4); padding-bottom:var(--s8);
}
.import-footer {
  display:flex; gap:var(--s3); padding:var(--s3) var(--s4);
  padding-bottom:calc(var(--safe-bottom) + var(--s3));
  background:var(--surface); border-top:1px solid var(--outline);
}

.sec-title { font-size:16px; font-weight:600; margin:var(--s5) 0 var(--s2); }
.sec-title:first-child { margin-top:0; }
.para { font-size:14px; margin:0 0 var(--s2); }
.para.dim { color:var(--on-surface-var); font-size:13px; }

/* açılır liste */
select, .ta {
  width:100%; min-height:var(--touch); padding:0 var(--s3);
  background:var(--surface-2); color:var(--on-surface);
  border:1px solid var(--outline); border-radius:var(--r-md);
  font-size:15px; font-family:inherit; -webkit-appearance:none; appearance:none;
}
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A97A4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s3) center;
  padding-right:var(--s8);
}
.ta { padding:var(--s3); min-height:96px; resize:vertical; line-height:1.45; }

.field-row { margin-bottom:var(--s3); }
.field-row label { display:block; font-size:12px; color:var(--on-surface-var); margin-bottom:4px; }

.chk {
  display:flex; align-items:center; gap:var(--s3);
  min-height:var(--touch); font-size:14px; margin:var(--s2) 0;
}
.chk input { width:22px; height:22px; accent-color:var(--primary); }

.row-2 { display:flex; gap:var(--s3); margin-top:var(--s3); }
.row-2 .btn { flex:1; }

.report {
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; line-height:1.5; white-space:pre-wrap;
  background:var(--surface-2); border:1px solid var(--outline);
  border-radius:var(--r-md); padding:var(--s3);
  -webkit-user-select:text; user-select:text;
}

.note-box {
  border:1px solid var(--outline); border-radius:var(--r-md);
  padding:var(--s3); font-size:13px; color:var(--on-surface-var);
  margin:var(--s2) 0;
}
.note-box.warn { border-color:var(--warn); color:var(--warn); }
.note-box.err  { border-color:var(--err); color:var(--err); }

.note-list { margin-top:var(--s5); }
.note-item {
  border:1px solid var(--outline); border-radius:var(--r-md);
  padding:var(--s3); margin-bottom:var(--s2); font-size:13px;
}
.note-item .meta { font-size:11px; color:var(--on-surface-var); margin-top:4px;
                   font-variant-numeric:tabular-nums; }

/* katman satırı ek kontroller */
.lr-controls { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2); }
.lr-controls input[type=range] { flex:1; margin:0; }
.lr-actions { display:flex; gap:var(--s1); margin-top:var(--s2); flex-wrap:wrap; }
.mini-btn {
  min-height:40px; padding:0 var(--s3); font-size:13px;
  background:transparent; color:var(--on-surface);
  border:1px solid var(--outline); border-radius:var(--r-sm);
  font-family:inherit; cursor:pointer;
}
.mini-btn.danger { color:var(--err); border-color:var(--err); }

/* ayarlar satırı */
.set-row { padding:var(--s3) 0; border-bottom:1px solid var(--ink-700); }
.set-row:last-child { border-bottom:0; }
.set-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.set-title { font-size:15px; }
.set-help { font-size:12px; color:var(--on-surface-var); margin-top:2px; }