/* Premium "karanlık lüks + cam" katmanı — tüm viewer'lara <link> ile eklenir.
   Inline <style>'dan SONRA yüklendiği için cascade ile chrome'u override eder. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body { font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }

/* ---- Üst bar (cam + gradyan aksan çizgisi) ---- */
#tabs { background:rgba(10,13,18,.72); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid rgba(255,255,255,.08); }
#tabs::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(47,109,240,.95),rgba(56,232,208,.95),transparent); }
#tabs strong { font-weight:700; letter-spacing:.2px; }

.tab { border-radius:10px; font-weight:500; transition:.25s cubic-bezier(.2,.7,.2,1); }
.tab:hover { background:rgba(255,255,255,.08); color:#fff; }
.tab.active { background:linear-gradient(135deg,#2f6df0,#38e8d0); color:#04222c; font-weight:700; box-shadow:0 6px 18px -8px rgba(47,109,240,.85); }

.homelink { border-radius:10px; background:rgba(255,255,255,.05); backdrop-filter:blur(6px); transition:.25s cubic-bezier(.2,.7,.2,1); }
.homelink:hover { color:#fff; border-color:rgba(56,232,208,.45); box-shadow:0 0 18px -8px rgba(56,232,208,.6); }

/* ---- Kalite / araç / DEM katman butonları (cam → gradyan aktif) ---- */
#quality button, #tools button, #dem-layers .dl {
  background:rgba(18,22,30,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:11px; transition:.25s cubic-bezier(.2,.7,.2,1); }
#quality button:hover, #tools button:hover, #dem-layers .dl:hover {
  background:rgba(42,50,62,.88); color:#fff; border-color:rgba(255,255,255,.22); transform:translateY(-1px); }
#quality button.active, #tools button.on, #dem-layers .dl.active {
  background:linear-gradient(135deg,#2f6df0,#38e8d0); color:#04222c; border-color:transparent; font-weight:700;
  box-shadow:0 8px 20px -10px rgba(47,109,240,.85); }
#quality button.ultra.active {
  background:linear-gradient(135deg,#b3471d,#e0903f); color:#fff; border-color:transparent;
  box-shadow:0 8px 20px -10px rgba(179,71,29,.9); }

/* ---- Cam paneller: künye / lejant / durum / ölçüm ---- */
#kunye { background:rgba(12,15,21,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.1); border-radius:15px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 50px -28px #000; }
#kunye h4 { font-weight:700; background:linear-gradient(120deg,#ffffff,#9fe6dd); -webkit-background-clip:text; background-clip:text; color:transparent; }

#dem-legend, .status, #measure-readout {
  background:rgba(12,15,21,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 16px 40px -28px #000; }

.hint { background:rgba(12,15,21,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.07); border-radius:14px; }

/* ---- Uyarı şeridi ---- */
#warn { background:rgba(40,30,12,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(240,200,120,.22); color:#f0d9a8; }