/* ═══════════════════════════════════════════════════════════
   ÇANTA — "RUGGED" tasarım dili (konsept v2)
   Sadece .rg-screen taşıyan ekranlara uygulanır; eski 14 alet
   dokunulmadan çalışmaya devam eder.
   ═══════════════════════════════════════════════════════════ */

:root {
  --rg-hi:    #f6f3ec;
  --rg-bone:  #e9e4da;
  --rg-lo:    #d3ccbe;
  --rg-edge:  #b6af9e;
  --rg-edge2: #8f887a;
  --rg-ink:   #16150f;
  --rg-soft:  #5d584c;
  --rg-or:    #ff5a1f;
  --rg-grn:   #6fbb2f;
  --rg-red:   #d42a12;
  --rg-armor: #24231f;
  --rg-ch: 14px;

  /* vida başı */
  --rg-screw: radial-gradient(circle at 50% 40%,
      #fdfbf6 0 1.1px, #cfc8b8 1.2px 2.6px, #9a9385 2.7px 4.0px,
      rgba(90,84,72,.55) 4.1px 4.9px, transparent 5px);

  /* kağıt greni */
  --rg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── panel primitifi ────────────────────────────────────── */
.rg {
  position: relative;
  isolation: isolate;
  filter:
    drop-shadow(0 2px 0 rgba(122,114,99,.5))
    drop-shadow(0 9px 14px rgba(34,29,20,.20));
}
.rg::before {                       /* kenar / pah */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(152deg, var(--rg-edge) 0%, var(--rg-edge2) 100%);
  clip-path: polygon(var(--rg-ch) 0, 100% 0, 100% calc(100% - var(--rg-ch)),
                     calc(100% - var(--rg-ch)) 100%, 0 100%, 0 var(--rg-ch));
}
.rg::after {                        /* yüzey + vidalar + gren */
  content: ""; position: absolute; inset: 2px; z-index: -1;
  background:
    var(--rg-screw) left 8px top 8px    / 14px 14px no-repeat,
    var(--rg-screw) right 8px top 8px   / 14px 14px no-repeat,
    var(--rg-screw) left 8px bottom 8px / 14px 14px no-repeat,
    var(--rg-screw) right 8px bottom 8px/ 14px 14px no-repeat,
    var(--rg-noise) 0 0 / 160px 160px,
    linear-gradient(158deg, var(--rg-hi) 0%, var(--rg-bone) 52%, var(--rg-lo) 100%);
  background-blend-mode: normal, normal, normal, normal, overlay, normal;
  clip-path: polygon(calc(var(--rg-ch) - 2px) 0, 100% 0, 100% calc(100% - var(--rg-ch) + 2px),
                     calc(100% - var(--rg-ch) + 2px) 100%, 0 100%, 0 calc(var(--rg-ch) - 2px));
}
.rg.flat { --rg-screw: none; }
.rg.sunk::after {                   /* içeri gömük yüzey */
  background:
    var(--rg-noise) 0 0 / 160px 160px,
    linear-gradient(158deg, var(--rg-lo) 0%, var(--rg-bone) 60%, var(--rg-hi) 100%);
  background-blend-mode: overlay, normal;
}

/* ── ekran iskeleti ─────────────────────────────────────── */
.rg-screen {
  overflow: hidden;                 /* kaydırma içerideki alana ait, sekme çubuğu sabit */
  background:
    var(--rg-noise) 0 0 / 160px 160px,
    radial-gradient(120% 90% at 50% 0%, #efece4 0%, #ded8cc 60%, #cdc6b6 100%);
  background-blend-mode: overlay, normal;
  color: var(--rg-ink);
  padding: 0;
  gap: 0;
}
.rg-screen .rg-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 6px 16px 16px;
  -webkit-overflow-scrolling: touch;
}
.rg-screen .rg-scroll::-webkit-scrollbar { width: 0; }
.rg-screen .rg-scroll > * { flex: 0 0 auto; }

/* başlık */
.rg-top {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px 10px;
}
.rg-top h2 {
  flex: 1; text-align: center;
  font-size: 30px; font-weight: 900; letter-spacing: 1px; line-height: 1;
}
.rg-top h2.two { font-size: 23px; line-height: 1.08; }
.rg-ico {
  --rg-ch: 9px; --rg-screw: none;
  width: 46px; height: 42px;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 900;
}
.rg-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.rg-ico:active { filter: none; transform: translateY(1px); }

/* ── düğmeler ───────────────────────────────────────────── */
.rg-btn {
  --rg-ch: 10px; --rg-screw: none;
  padding: 13px 12px;
  font-size: 12.5px; font-weight: 900; letter-spacing: 1px;
  color: var(--rg-ink);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rg-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.rg-btn:active { transform: translateY(1px); filter: drop-shadow(0 1px 0 rgba(122,114,99,.5)); }
.rg-btn[hidden], .rg-ico[hidden], .rg-chip[hidden] { display: none; }
.rg-btn.on { color: #fff; }
.rg-btn.on::after { background: linear-gradient(158deg, #ff7a44, var(--rg-or) 55%, #e04a12); }
.rg-btn.on::before { background: linear-gradient(152deg, #b03a10, #7d2909); }
.rg-btn.dark { color: var(--rg-hi); }
.rg-btn.dark::after { background: linear-gradient(158deg, #34322c, #16150f 70%); }
.rg-btn.sel::after { background: linear-gradient(158deg, #2e2c26, #16150f 70%); }
.rg-btn.sel { color: var(--rg-hi); }
.rg-btn.outline::before { background: linear-gradient(152deg, var(--rg-or), #c0400f); }
.rg-row { display: flex; gap: 10px; }
.rg-row > * { flex: 1; }

/* ── ortak parçalar ─────────────────────────────────────── */
.rg-read { padding: 16px 18px 14px; text-align: center; }
.rg-read .v {
  font-size: 62px; font-weight: 900; line-height: .92; letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.rg-read .v small { font-size: 24px; letter-spacing: 0; margin-left: 6px; }
.rg-read .k {
  margin-top: 7px;
  font-size: 10px; font-weight: 900; letter-spacing: 2.4px; color: var(--rg-soft);
}
.rg-chip {
  display: inline-flex; align-items: center; gap: 7px;
  --rg-ch: 7px; --rg-screw: none;
  padding: 7px 14px; font-size: 11px; font-weight: 900; letter-spacing: 1.6px;
}
.rg-chip i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--rg-grn);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.rg-chip.mid i { background: var(--rg-or); }
.rg-chip.hot i { background: var(--rg-red); }
.rg-stats { display: flex; gap: 10px; }
.rg-stat { flex: 1; padding: 12px 6px 11px; text-align: center; }
.rg-stat .k { font-size: 9.5px; font-weight: 900; letter-spacing: 1.8px; color: var(--rg-soft); }
.rg-stat .v {
  font-size: 27px; font-weight: 900; line-height: 1.1; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.rg-stat .u { font-size: 10px; font-weight: 900; color: var(--rg-soft); letter-spacing: 1px; }
.rg-note {
  font-size: 11px; font-weight: 700; line-height: 1.55; color: var(--rg-soft);
  text-align: center; padding: 0 6px;
}

/* ── alt sekme çubuğu ───────────────────────────────────── */
.rg-tabs {
  --rg-ch: 12px; --rg-screw: none;
  margin: 0 12px 12px; padding: 9px 6px 8px;
  display: flex;
}
.rg-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 4px 0; position: relative;
  font-size: 9.5px; font-weight: 900; letter-spacing: 1.2px; color: var(--rg-soft);
}
.rg-tab + .rg-tab::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: rgba(90,84,72,.28);
}
.rg-tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; }
.rg-tab.on { color: var(--rg-or); }
.rg-tab.on svg { stroke: var(--rg-or); }

/* ── zırh çerçeve (rugged kasa) ─────────────────────────── */
#armor { display: none; }
#phone-screen:has(.rg-screen.active) #armor {
  display: block; position: absolute; inset: 0; z-index: 200; pointer-events: none;
}
#armor span { position: absolute; display: block; }
#armor .ar-t, #armor .ar-b { left: 0; right: 0; height: 11px;
  background: linear-gradient(#3a3831, #191813 60%, #0e0d0a); }
#armor .ar-t { top: 0; } #armor .ar-b { bottom: 0;
  background: linear-gradient(#0e0d0a, #191813 40%, #3a3831); }
#armor .ar-l, #armor .ar-r { top: 0; bottom: 0; width: 11px;
  background: linear-gradient(90deg, #3a3831, #191813 60%, #0e0d0a); }
#armor .ar-l { left: 0; } #armor .ar-r { right: 0;
  background: linear-gradient(90deg, #0e0d0a, #191813 40%, #3a3831); }
#armor .ar-c {
  width: 44px; height: 44px; background: #201f1b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
#armor .ar-c.tl { top: 0; left: 0; clip-path: polygon(0 0,100% 0,100% 12px,26px 12px,12px 26px,12px 100%,0 100%); }
#armor .ar-c.tr { top: 0; right: 0; clip-path: polygon(0 0,100% 0,100% 100%,88% 100%,88% 26px,74% 12px,0 12px); }
#armor .ar-c.bl { bottom: 0; left: 0; clip-path: polygon(0 0,12px 0,12px 74%,26px 88%,100% 88%,100% 100%,0 100%); }
#armor .ar-c.br { bottom: 0; right: 0; clip-path: polygon(100% 0,100% 100%,0 100%,0 88%,74% 88%,88% 74%,88% 0); }
#armor .ar-led {
  width: 4px; height: 54px; top: 34%;
  background: linear-gradient(var(--rg-or), #ff9a4a, var(--rg-or));
  box-shadow: 0 0 9px rgba(255,90,31,.75);
}
#armor .ar-led.l { left: 3px; } #armor .ar-led.r { right: 3px; }
#armor .ar-top-led {
  top: 2px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #b33c10, var(--rg-or) 30% 70%, #b33c10);
  box-shadow: 0 0 10px rgba(255,90,31,.7);
}

/* ═══ dB METRE ═══════════════════════════════════════════ */
.db-gauge { padding: 14px 10px 16px; }
#db-svg { width: 100%; display: block; }
#db-svg .seg   { fill: #2a2823; }
#db-svg .seg.hot { fill: var(--rg-or); }
#db-svg .lbl   { font: 900 16px "Arial Black", system-ui, sans-serif; fill: var(--rg-ink); }
#db-svg .cap   { font: 900 23px "Arial Black", system-ui, sans-serif; fill: var(--rg-ink); }
#db-svg .val   { font: 900 94px "Arial Black", system-ui, sans-serif; fill: var(--rg-ink); letter-spacing: -4px; }
#db-needle { transition: transform .09s linear; transform-origin: 160px 152px; }
.db-wave { padding: 10px 12px; }
#db-wave { width: 100%; height: 92px; display: block; }
.db-actions { display: flex; gap: 10px; }
.db-actions .rg-btn { flex: 1; flex-direction: column; gap: 7px; padding: 14px 6px 12px; }
.db-actions .rg-btn svg { width: 20px; height: 20px; }

/* ═══ KUMPAS ═════════════════════════════════════════════ */
.kp-hero { padding: 14px 0 12px; overflow: hidden; }
.kp-stage {
  position: relative; width: 134%; margin-left: -7%;
  aspect-ratio: 1000 / 332;
  container-type: inline-size;
}
.kp-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; user-select: none;
}
/* kayan taşıyıcı: aynı görselin sadece sürgü bölgesi, yatayda ötelenir */
.kp-stage .slide {
  clip-path: polygon(13.6% 0, 54.4% 0, 54.4% 100%, 13.6% 100%);
  transition: transform .1s linear;
  filter: drop-shadow(-3px 2px 3px rgba(0,0,0,.25));
}
/* fotoğraftaki LCD'nin üstüne birebir oturan canlı gösterge */
.kp-lcd {
  position: absolute; left: 23.6%; top: 29.5%; width: 16.4%; height: 15.1%;
  display: flex; align-items: center; justify-content: flex-end; gap: 1px;
  padding: 0 4% 0 2%;
  background: linear-gradient(#9aa397, #8d9689);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  font-size: 3.4cqw; font-weight: 900; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums; color: #16150f;
  transition: left .1s linear;
  overflow: hidden;
}
.kp-lcd b { font-size: 1em; }
.kp-lcd i { font-size: .52em; font-style: normal; align-self: flex-end; margin-bottom: .3em; }
.kp-span {
  position: absolute; top: 70%; height: 2px; background: var(--rg-or);
  transition: left .1s linear, width .1s linear;
}
.kp-span::before, .kp-span::after {
  content: ""; position: absolute; top: -4px; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.kp-span::before { left: -1px; border-right: 7px solid var(--rg-or); }
.kp-span::after  { right: -1px; border-left: 7px solid var(--rg-or); }

/* gerçek ölçüm yatağı */
.kp-bed { padding: 0; overflow: hidden; }
.kp-bed canvas { display: block; width: 100%; height: 190px; touch-action: none; }
.kp-bedhead {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 8px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 1.6px; color: var(--rg-soft);
}
.kp-bedhead b { color: var(--rg-or); }
.kp-modes .rg-btn { flex-direction: column; gap: 7px; padding: 12px 4px 10px; font-size: 10.5px; }
.kp-modes .rg-btn svg { width: 22px; height: 22px; }

/* ── ölçüm geçmişi (rugged) ─────────────────────────────── */
.rg-screen .meas-box {
  --rg-ch: 12px; --rg-screw: none;
  max-width: none; margin: 0; border: 0; box-shadow: none; background: none;
  position: relative; isolation: isolate;
  filter: drop-shadow(0 2px 0 rgba(122,114,99,.5)) drop-shadow(0 9px 14px rgba(34,29,20,.2));
  display: block;
}
.rg-screen .meas-box::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(152deg, var(--rg-edge), var(--rg-edge2));
  clip-path: polygon(var(--rg-ch) 0,100% 0,100% calc(100% - var(--rg-ch)),
                     calc(100% - var(--rg-ch)) 100%,0 100%,0 var(--rg-ch));
}
.rg-screen .meas-box::after {
  content: ""; position: absolute; inset: 2px; z-index: -1;
  background: var(--rg-noise) 0 0/160px 160px,
              linear-gradient(158deg, var(--rg-hi), var(--rg-bone) 55%, var(--rg-lo));
  background-blend-mode: overlay, normal;
  clip-path: polygon(calc(var(--rg-ch) - 2px) 0,100% 0,100% calc(100% - var(--rg-ch) + 2px),
                     calc(100% - var(--rg-ch) + 2px) 100%,0 100%,0 calc(var(--rg-ch) - 2px));
}
.rg-screen .meas-head { background: none; border-bottom: 1px solid rgba(90,84,72,.3); padding: 11px 14px 10px; }
.rg-screen .meas-title { font-size: 10px; letter-spacing: 1.8px; }
.rg-screen .meas-f, .rg-screen .meas-save {
  border: 1px solid rgba(90,84,72,.45); border-radius: 3px; padding: 5px 9px;
}
.rg-screen .meas-f.sel { background: var(--rg-ink); color: var(--rg-hi); }
.rg-screen .meas-save { background: var(--rg-or); border-color: #a83a0f; }
.rg-screen .meas-list { max-height: 178px; padding: 2px 6px 6px; }
.rg-screen .meas-row { border-bottom: 1px solid rgba(90,84,72,.2); padding: 9px 8px; }
.rg-screen .meas-row.pinned { background: rgba(255,90,31,.1); }
.rg-screen .meas-val { font-size: 13px; }
.rg-screen .meas-btn { border: 1px solid rgba(90,84,72,.45); background: rgba(255,255,255,.35); border-radius: 3px; }
.rg-screen .meas-btn.on { background: var(--rg-or); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   KÖPRÜ — eski alet markup'ını rugged diline giydirir.
   (rugged.js ilgili elemanlara .rg / .rg-btn / .rg-ico ekler)
   ═══════════════════════════════════════════════════════════ */

/* başlık */
.rg-screen .tool-head {
  background: none; border: 0;
  padding: calc(18px + env(safe-area-inset-top)) 16px 10px;
  gap: 12px;
}
.rg-screen .tool-head h2 {
  flex: 1; text-align: center;
  font-size: 27px; font-weight: 900; letter-spacing: 1px; line-height: 1.05;
}
.rg-screen .btn-back {
  --rg-ch: 9px; --rg-screw: none;
  width: 46px; height: 42px; border: 0; box-shadow: none; background: none;
  display: grid; place-items: center; font-size: 20px; color: var(--rg-ink);
}
.rg-screen .btn-head {
  --rg-ch: 9px; --rg-screw: none;
  border: 0; box-shadow: none; background: none;
  padding: 12px 13px; font-size: 10.5px; font-weight: 900; letter-spacing: 1.2px;
  color: var(--rg-ink); min-width: 46px;
}
.rg-screen .btn-back:active, .rg-screen .btn-head:active {
  transform: translateY(1px); box-shadow: none;
}
.rg-screen .btn-head.ghost { visibility: hidden; }

/* gövde = kaydırma alanı */
.rg-screen .tool-body {
  flex: 1; min-height: 0; overflow-y: auto;
  align-items: stretch; gap: 12px;
  padding: 6px 16px 16px;
}
.rg-screen .tool-body::-webkit-scrollbar { width: 0; }
.rg-screen .tool-body > * { flex: 0 0 auto; }

/* okumalar */
.rg-screen .big-readout {
  font-size: 60px; letter-spacing: -2px; text-align: center; padding: 4px 0;
}
.rg-screen .readout-row { gap: 10px; max-width: none; }
.rg-screen .readout {
  border: 0; box-shadow: none; background: none;
  padding: 13px 6px 12px; gap: 3px;
}
.rg-screen .ro-label { font-size: 9.5px; letter-spacing: 1.8px; color: var(--rg-soft); }
.rg-screen .ro-val { font-size: 24px; }
.rg-screen .sensor-note, .rg-screen .db-scale, .rg-screen .sayac-hint {
  font-size: 11px; font-weight: 700; line-height: 1.55; color: var(--rg-soft);
  max-width: none; text-align: center;
}
.rg-screen .db-unit { font-size: 11px; letter-spacing: 2.2px; color: var(--rg-soft); margin: -8px 0 0; text-align: center; }

/* düğmeler */
.rg-screen .btn-big, .rg-screen .btn-fine, .rg-screen .btn-preset,
.rg-screen .btn-unit, .rg-screen .cev-tab {
  --rg-ch: 10px; --rg-screw: none;
  border: 0; box-shadow: none; background: none;
  color: var(--rg-ink); max-width: none;
  padding: 14px 12px; font-size: 13px; font-weight: 900; letter-spacing: 1px;
}
.rg-screen .btn-big { color: var(--rg-hi); }
.rg-screen .btn-big::after { background: linear-gradient(158deg, #34322c, #16150f 70%); }
.rg-screen .btn-big.warn::after { background: linear-gradient(158deg, #ff7a44, var(--rg-or) 55%, #e04a12); }
.rg-screen .btn-big.warn::before { background: linear-gradient(152deg, #b03a10, #7d2909); }
.rg-screen .btn-big.warn { color: #fff; }
.rg-screen .cev-tab.sel { color: var(--rg-hi); }
.rg-screen .cev-tab.sel::after { background: linear-gradient(158deg, #2e2c26, #16150f 70%); }
.rg-screen .btn-big:active, .rg-screen .btn-fine:active,
.rg-screen .btn-preset:active, .rg-screen .btn-unit:active, .rg-screen .cev-tab:active {
  transform: translateY(1px); box-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(122,114,99,.5));
}

/* panelleşen bloklar (rugged.js .rg ekler) */
.rg-screen .egim-dial, .rg-screen .pusula-dial-wrap { padding: 16px 14px; width: 100%; }
.rg-screen .egim-dial svg, .rg-screen .pusula-dial-wrap svg { width: 100%; }
.rg-screen .chart, .rg-screen .cent-wrap, .rg-screen .db-bar-wrap, .rg-screen .cal-card {
  border: 0; box-shadow: none; background: none; max-width: none; width: 100%;
}
.rg-screen .sayac-pad {
  border: 0; box-shadow: none; background: none; max-width: none;
  min-height: 210px; padding: 20px;
}
.rg-screen .sayac-pad .big-readout { font-size: 96px; }
.rg-screen .cev-table-wrap { max-width: none; }
.rg-screen .cev-table { border: 0; box-shadow: none; background: none; }
.rg-screen .cev-table th, .rg-screen .cev-table td { border: 1px solid rgba(90,84,72,.3); }
.rg-screen .cev-table th { background: var(--rg-ink); color: var(--rg-hi); }

/* su terazisi — daire ve tüp yuvarlak kaldığı için doğrudan biçimlendirilir */
.rg-screen .level-round {
  border: 2px solid rgba(90,84,72,.55);
  background: radial-gradient(circle at 42% 36%, #f4f1e9 0%, #e3ded3 55%, #cdc6b7 100%);
  box-shadow: inset 0 3px 10px rgba(60,54,42,.28), 0 8px 14px rgba(34,29,20,.2);
  width: min(72vw, 300px);
}
.rg-screen .level-target { border-color: rgba(22,21,15,.8); }
.rg-screen .level-bubble {
  border: 2px solid rgba(22,21,15,.75);
  background: radial-gradient(circle at 38% 32%, #c8ef7e, var(--rg-grn) 65%, #4d8a1c);
  box-shadow: 0 2px 5px rgba(30,50,10,.35);
}
.rg-screen .level-bubble.ok { background: radial-gradient(circle at 38% 32%, #d6ff8f, #55c31d 65%, #3d7a10); }
.rg-screen .level-vial {
  border: 0; box-shadow: none; background: none; width: 100%; height: 58px;
}
.rg-screen .vial-lines::before, .rg-screen .vial-lines::after { background: rgba(22,21,15,.7); width: 2px; }

/* cetvel / kamera ekranları — burada gövde kaymaz, tuval boşluğu doldurur */
.rg-screen .cetvel-body { padding: 0; gap: 0; overflow: hidden; }
.rg-screen .cetvel-body > canvas { flex: 1 1 auto; min-height: 0; background: #e5e0d5; }
.rg-screen .cetvel-body > .meas-box { flex: 0 0 auto; margin: 0; }
.rg-screen .cetvel-info {
  background: rgba(214,207,193,.85); border: 0;
  border-top: 1px solid rgba(90,84,72,.35); padding: 12px 14px;
}
.rg-screen .cam-wrap { flex: 1 1 auto; min-height: 0; border: 0; box-shadow: inset 0 0 0 2px rgba(22,21,15,.5); }
.rg-screen .cam-readout {
  background: var(--rg-ink); color: var(--rg-hi); border: 0;
  padding: 7px 16px; font-size: 24px;
}
.rg-screen .cal-panel {
  background:
    var(--rg-noise) 0 0/160px 160px,
    radial-gradient(120% 90% at 50% 0%, #efece4 0%, #ded8cc 60%, #cdc6b6 100%);
  background-blend-mode: overlay, normal;
  z-index: 210;   /* zırh çerçevenin üstünde kalsın */
}
.rg-screen .cal-panel p { color: var(--rg-soft); font-weight: 700; }
.rg-screen .strobe-layer { z-index: 220; }

/* çevirici */
.rg-screen .cev-body { padding: 6px 16px 16px; }
.rg-screen .cev-tabs { gap: 8px; }
.rg-screen .cev-tab { flex: 1 1 auto; padding: 11px 10px; font-size: 11px; }
.rg-screen #cev-in, .rg-screen .cev-form select {
  border: 1px solid rgba(90,84,72,.5); border-radius: 4px;
  background: rgba(255,255,255,.5); color: var(--rg-ink);
}
.rg-screen .cev-form select {
  -webkit-appearance: none; appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--rg-soft) 50%),
                    linear-gradient(135deg, var(--rg-soft) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.rg-screen .cev-out { border: 0; background: var(--rg-ink); color: var(--rg-hi); border-radius: 4px; }

/* ═══ HERO GÖRSELLERİ ════════════════════════════════════ */
.rg-hero { padding: 14px 12px 12px; display: flex; justify-content: center; }
.hero-stage { position: relative; width: 100%; }
.hero-stage img {
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(34,29,20,.28));
}
.hero-lcd {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font: 900 11cqw/1 "Arial Black", system-ui, sans-serif;
  letter-spacing: 1.5px; color: #16150f;
  background: linear-gradient(#f3f1ea, #ddd9cf);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
  font-variant-numeric: tabular-nums;
}
.hero-stage { container-type: inline-size; }
.hero-dial {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #24231f 0%, #131210 70%, #0a0a08 100%);
}
.hero-dial svg { width: 100%; height: 100%; display: block; }
.hero-dial polygon { transform-origin: 50px 50px; transition: transform .25s ease-out; }
#rpm-disc { animation: rg-spin 1s linear infinite; animation-play-state: paused; }
@keyframes rg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #rpm-disc { animation: none; } }

/* ═══ HUB (rugged) ═══════════════════════════════════════ */
.rg-screen .hub-head {
  border: 0; padding: calc(20px + env(safe-area-inset-top)) 16px 10px;
}
.rg-screen .hub-head h1 { font-size: 40px; letter-spacing: 1px; }
.rg-screen .hub-sub { font-size: 10px; letter-spacing: 1.8px; color: var(--rg-soft); margin-top: 7px; }
.hub-search { display: flex; gap: 9px; margin-top: 14px; }
.hub-find {
  --rg-ch: 10px; --rg-screw: none;
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px;
}
.hub-find svg { width: 16px; height: 16px; fill: none; stroke: var(--rg-soft); stroke-width: 2.2; flex: 0 0 auto; }
.hub-find input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 900 12px/1 "Arial Black", system-ui, sans-serif; letter-spacing: .6px;
  color: var(--rg-ink); padding: 13px 0;
}
.hub-find input::placeholder { color: var(--rg-soft); font-weight: 700; }
.hub-find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hub-filter {
  --rg-ch: 10px; --rg-screw: none;
  display: flex; align-items: center; gap: 7px; padding: 0 12px;
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.2px; color: var(--rg-ink);
}
.hub-filter svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.hub-filter b { font-size: 9px; color: var(--rg-soft); }
.hub-filter:active { transform: translateY(1px); }

.rg-screen .hub-head { flex: 0 0 auto; }
.rg-screen .tool-grid {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 16px 8px; gap: 12px;
}
.rg-screen .tool-grid::-webkit-scrollbar { width: 0; }
.rg-screen .tool-card {
  --rg-ch: 13px;
  position: relative; isolation: isolate;
  border: 0; box-shadow: none; background: none;
  padding: 16px 13px 15px; gap: 9px;
  filter: drop-shadow(0 2px 0 rgba(122,114,99,.5)) drop-shadow(0 8px 12px rgba(34,29,20,.18));
}
.rg-screen .tool-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(152deg, var(--rg-edge), var(--rg-edge2));
  clip-path: polygon(var(--rg-ch) 0,100% 0,100% calc(100% - var(--rg-ch)),
                     calc(100% - var(--rg-ch)) 100%,0 100%,0 var(--rg-ch));
}
.rg-screen .tool-card::after {
  content: ""; position: absolute; inset: 2px; z-index: -1;
  background:
    var(--rg-screw) left 7px top 7px/13px 13px no-repeat,
    var(--rg-screw) right 7px top 7px/13px 13px no-repeat,
    var(--rg-noise) 0 0/160px 160px,
    linear-gradient(158deg, var(--rg-hi), var(--rg-bone) 55%, var(--rg-lo));
  background-blend-mode: normal, normal, overlay, normal;
  clip-path: polygon(calc(var(--rg-ch) - 2px) 0,100% 0,100% calc(100% - var(--rg-ch) + 2px),
                     calc(100% - var(--rg-ch) + 2px) 100%,0 100%,0 calc(var(--rg-ch) - 2px));
}
.rg-screen .tool-card:active { transform: translateY(1px); box-shadow: none; }
.rg-screen .tc-name { font-size: 14.5px; letter-spacing: .4px; }
.rg-screen .tc-desc { font-size: 10px; color: var(--rg-soft); line-height: 1.4; }
.rg-screen .tc-badge {
  --rg-ch: 0;
  top: 0; right: 0; border: 0;
  background: linear-gradient(158deg, #ff7a44, var(--rg-or) 60%, #e04a12);
  padding: 5px 9px; letter-spacing: 1.2px;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
}
.tc-fav {
  position: absolute; right: 7px; bottom: 5px;
  width: 26px; height: 26px; display: grid; place-items: center;
  font-size: 14px; line-height: 1; color: rgba(90,84,72,.4);
  cursor: pointer;
}
.tc-fav.on { color: var(--rg-or); }
.rg-note.pad { padding: 26px 20px; line-height: 1.7; }

/* ═══ FAVORİLER ══════════════════════════════════════════ */
.fav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fav-grid .tool-card {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; color: var(--rg-ink);
}
.fav-grid .tool-card svg { width: 38px; height: 38px; }

/* ═══ KAYITLAR ═══════════════════════════════════════════ */
.rec-bar { display: flex; gap: 8px; }
.rec-bar .rg-btn { flex: 0 0 auto; padding: 11px 14px; }
.rec-bar .rg-btn:last-child { flex: 1; }
.rec-bar .rg-btn[disabled] { opacity: .45; pointer-events: none; }
.rec-list { padding: 6px; }
.rec-row {
  display: grid; grid-template-columns: 1fr auto auto auto auto;
  grid-template-areas: "tool time f p d" "val val f p d";
  align-items: center; gap: 2px 6px;
  padding: 9px 8px; border-bottom: 1px solid rgba(90,84,72,.22);
}
.rec-row:last-child { border-bottom: 0; }
.rec-row.pinned { background: rgba(255,90,31,.1); }
.rec-tool { grid-area: tool; font-size: 9px; font-weight: 900; letter-spacing: 1.4px; color: var(--rg-or); }
.rec-val  { grid-area: val; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rec-time { grid-area: time; font-size: 9.5px; font-weight: 700; color: var(--rg-soft); }
.rec-b {
  width: 27px; height: 27px; font-size: 13px; font-weight: 900; line-height: 1;
  border: 1px solid rgba(90,84,72,.45); border-radius: 3px;
  background: rgba(255,255,255,.35); color: rgba(90,84,72,.75);
}
.rec-b[data-act="fav"] { grid-area: f; } .rec-b[data-act="pin"] { grid-area: p; }
.rec-b[data-act="del"] { grid-area: d; }
.rec-b.on { background: var(--rg-or); color: #fff; border-color: #a83a0f; }
.rec-b:active { transform: translateY(1px); }

/* ═══ BİLGİ ══════════════════════════════════════════════ */
.info-card { padding: 16px 16px 15px; }
.info-card p { font-size: 11.5px; font-weight: 700; line-height: 1.6; color: var(--rg-soft); margin-top: 8px; }
.info-h { font-size: 10px; font-weight: 900; letter-spacing: 1.6px; color: var(--rg-or); }
.info-logo { display: flex; align-items: center; gap: 12px; }
.info-logo .logo-svg { width: 40px; height: 40px; }
.info-logo b { display: block; font-size: 26px; letter-spacing: 1px; line-height: 1; }
.info-logo span { font-size: 10px; font-weight: 900; letter-spacing: 1.6px; color: var(--rg-soft); }
.info-rows { padding: 4px 14px; }
.info-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid rgba(90,84,72,.22);
  font-size: 11.5px; font-weight: 700; color: var(--rg-soft);
}
.info-row:last-child { border-bottom: 0; }
.info-row b { font-size: 11px; font-weight: 900; letter-spacing: 1.2px; color: var(--rg-ink); }
.info-row b.ok { color: #3f8f1f; }
.info-row b.warn { color: var(--rg-or); }

/* ── küçük ekran ────────────────────────────────────────── */
@media (max-height: 700px) {
  .rg-top { padding: 12px 16px 8px; }
  .rg-top h2 { font-size: 25px; }
  .rg-read .v { font-size: 50px; }
}