*{
  box-sizing:border-box;
  margin:0;
  padding:0
}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:#eef2f3;
  color:#1d2930;
  min-height:100vh
}

button,
select{
  font:inherit
}

button{
  -webkit-tap-highlight-color:transparent
}

.app{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:16px
}


/* =========================================================
   HEADER
   ========================================================= */

.app-header{
  background:#26353b;
  border-radius:18px 18px 0 0;
  padding:22px 16px;
  text-align:center;
  color:#fff
}

.app-header h1{
  font-size:32px;
  letter-spacing:4px;
  font-weight:800;
  color:#fff
}

.app-header p{
  font-size:12px;
  margin-top:5px;
  color:#d9e2e5
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.main-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
  gap:18px;
  background:#26353b;
  padding:0 16px 18px
}

.meter-panel{
  min-width:0
}


/* =========================================================
   METER FACE
   ========================================================= */

.meter-face{
  position:relative;
  background:#fff;
  border:7px solid #101a1e;
  border-radius:12px;
  overflow:hidden
}

.school-logo{
  position:absolute;
  top:12px;
  left:14px;
  width:52px;
  height:52px;
  object-fit:contain;
  z-index:5;
  pointer-events:none
}

/* =========================================================
   LOGO KEMENTERIAN AGAMA — KANAN ATAS
   ========================================================= */

.kemenag-logo{
  position:absolute;
  top:12px;
  right:14px;
  width:52px;
  height:52px;
  object-fit:contain;
  z-index:5;
  pointer-events:none
}

/* =========================================================
   BRAND — BAWAH JARUM
   ========================================================= */

.meter-brand{
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  width:72%;
  text-align:center;
  z-index:5;
  pointer-events:none
}

.brand-title{
  font-size:16px;
  line-height:1;
  font-weight:800;
  letter-spacing:5px;
  color:#111;
  white-space:nowrap
}

.brand-subtitle{
  font-size:7px;
  line-height:1.2;
  margin-top:3px;
  color:#555;
  white-space:nowrap
}


/* =========================================================
   DIAL
   ========================================================= */

.dial-area{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
  background:#fff;
  overflow:hidden
}

.dial-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  z-index:1
}


/* =========================================================
   LAMBANG OHM
   SKALA BAWAH
   ========================================================= */

.ohm-label{
  position:absolute;
  z-index:2;
  left:50%;
  top:58%;
  transform:translateX(-50%);
  font-size:18px;
  font-weight:800;
  color:#111;
  pointer-events:none
}


/* =========================================================
   JARUM MULTIMETER
   POSISI DIKUNCI
   =========================================================

   PIVOT:
   X = 50%
   Y = 82.5%

   PANJANG:
   68%

   ROTASI:
   0   = -70°
   2.5 = -35°
   5   = 0°
   7.5 = +35°
   10  = +70°

   JANGAN DIUBAH
   ========================================================= */

.needle{
  position:absolute;
  z-index:3;
  left:50%;
  top:82.5%;
  width:3px;
  height:68%;
  background:#df2b24;
  border-radius:3px;
  transform-origin:50% 100%;
  transform:
    translate(-50%,-100%)
    rotate(-70deg);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  pointer-events:none;
  transition:transform .35s ease-out
}


/* =========================================================
   PIVOT
   POSISI DIKUNCI
   ========================================================= */

.needle-pivot{
  position:absolute;
  z-index:4;
  left:50%;
  top:82.5%;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#222;
  border:2px solid #111;
  transform:translate(-50%,-50%);
  pointer-events:none
}


/* =========================================================
   TEST JARUM
   ========================================================= */

.test-panel{
  margin-top:10px;
  background:#17282e;
  border-radius:8px;
  padding:10px;
  color:#fff
}

.test-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px
}

.test-header h2{
  font-size:11px;
  color:#fff
}

.test-header p{
  font-size:8px;
  margin-top:3px;
  color:#d9e2e5
}

.test-status{
  font-size:8px;
  color:#f0c719;
  white-space:nowrap
}

.needle-test-buttons{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  margin-top:8px
}

.needle-test-btn{
  height:30px;
  border:1px solid #e4bd2d;
  border-radius:5px;
  background:#e4bd2d;
  color:#111;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease
}

.needle-test-btn:hover{
  filter:brightness(1.08)
}

.needle-test-btn.active{
  background:#fff;
  color:#111;
  outline:2px solid #fff
}


/* =========================================================
   CONTROL
   ========================================================= */

.controls{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px
}

.control-group{
  display:flex;
  flex-direction:column;
  gap:4px
}

.control-group label{
  color:#fff;
  font-size:9px;
  font-weight:700
}

.control-group select{
  width:100%;
  height:34px;
  border:0;
  border-radius:6px;
  padding:0 8px;
  font-size:10px;
  background:#fff;
  color:#202a30;
  cursor:pointer;
  outline:none
}

.control-group select:focus{
  box-shadow:0 0 0 2px #e4bd2d
}


/* =========================================================
   TERMINAL OBJEK UKUR
   ========================================================= */

.measurement-terminal-panel{
  margin-top:10px;
  padding:10px;
  background:#17282e;
  border:1px solid #31474e;
  border-radius:8px;
  color:#fff
}

.terminal-title{
  font-size:11px;
  font-weight:800;
  color:#fff;
  margin-bottom:5px
}

.terminal-info{
  background:#22383f;
  border-radius:5px;
  padding:7px 8px;
  margin-bottom:8px
}

.terminal-info p{
  font-size:8px;
  line-height:1.45;
  color:#d9e2e5
}

.terminal-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.terminal-btn{
  min-height:42px;
  border-radius:6px;
  cursor:pointer;
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  transition:.15s ease
}

.terminal-btn.positive{
  background:#fff;
  color:#d51f1f;
  border:2px solid #d51f1f
}

.terminal-btn.negative{
  background:#fff;
  color:#111;
  border:2px solid #111
}

.terminal-btn:hover{
  transform:translateY(-1px)
}

.terminal-btn:active{
  transform:translateY(0)
}

.terminal-symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  font-size:15px;
  font-weight:900
}

.terminal-btn.positive .terminal-symbol{
  background:#d51f1f;
  color:#fff
}

.terminal-btn.negative .terminal-symbol{
  background:#111;
  color:#fff
}

.terminal-btn.connected{
  box-shadow:
    0 0 0 2px #e4bd2d,
    0 0 10px rgba(228,189,45,.35)
}

.terminal-btn.red-connected{
  border-color:#ed211d
}

.terminal-btn.black-connected{
  border-color:#111
}

.terminal-status{
  margin-top:8px;
  padding:7px 8px;
  border-radius:5px;
  background:#0f2025;
  color:#d9e2e5;
  text-align:center;
  font-size:8px
}

.terminal-status strong{
  color:#f0c719
}


/* =========================================================
   PROBE
   ========================================================= */

.probe-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px
}

.probe-btn{
  height:38px;
  border-radius:6px;
  color:#fff;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  border:1px solid #e4bd2d;
  transition:.15s ease
}

.probe-btn:hover{
  filter:brightness(1.08)
}

.probe-btn span{
  margin-right:6px;
  font-size:14px
}

.probe-btn.red{
  background:#ed211d
}

.probe-btn.black{
  background:#111
}

.probe-btn.active{
  outline:2px solid #fff;
  box-shadow:
    0 0 0 2px #e4bd2d inset,
    0 0 10px rgba(228,189,45,.35)
}


/* =========================================================
   STATUS PROBE
   ========================================================= */

.probe-status{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:6px;
  padding:7px;
  background:#17282e;
  border-radius:5px;
  color:#fff;
  font-size:8px
}

.probe-status-item{
  min-width:0;
  text-align:center;
  line-height:1.4
}

.probe-status-item strong{
  color:#f0c719
}

.status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:4px
}

.red-dot{
  background:#ff4f6d
}

.black-dot{
  background:#999
}


/* =========================================================
   STATUS KONEKSI PROBE
   ========================================================= */

.probe-connection-panel{
  margin-top:6px;
  padding:8px;
  background:#17282e;
  border:1px solid #31474e;
  border-radius:5px;
  color:#fff
}

.connection-title{
  font-size:9px;
  font-weight:800;
  color:#fff;
  margin-bottom:6px
}

.connection-row{
  padding:5px 7px;
  margin-top:4px;
  border-radius:4px;
  background:#22383f;
  color:#d9e2e5;
  font-size:8px
}

.connection-row strong{
  color:#f0c719
}


/* =========================================================
   BUTTON PENGUKURAN
   ========================================================= */

.measure-btn{
  width:100%;
  height:40px;
  margin-top:10px;
  border:0;
  border-radius:6px;
  background:#e4bd0f;
  color:#111;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease
}

.measure-btn:hover{
  background:#f0ca1c;
  transform:translateY(-1px)
}

.measure-btn:active{
  transform:translateY(0)
}

.reset-btn{
  display:block;
  margin:7px auto 0;
  height:24px;
  padding:0 12px;
  border:1px solid #fff;
  border-radius:5px;
  background:transparent;
  color:#fff;
  font-size:8px;
  cursor:pointer;
  transition:.15s ease
}

.reset-btn:hover{
  background:#fff;
  color:#17282e
}


/* =========================================================
   PANEL HASIL
   ========================================================= */

.result-panel{
  background:#fff;
  border-radius:12px;
  padding:14px;
  align-self:start;
  color:#1d2930
}

.result-panel h2{
  font-size:17px;
  margin-bottom:10px;
  color:#123b2e
}


/* =========================================================
   RESULT BOX
   ========================================================= */

.result-box{
  background:#edf2f3;
  border-left:4px solid #12805d;
  border-radius:7px;
  padding:11px;
  min-height:82px;
  font-size:9px;
  line-height:1.5;
  color:#24343a
}

.result-box.info{
  border-left-color:#3978a8
}

.result-box.warning{
  border-left-color:#d9a800;
  background:#fff9df
}

.result-box.success{
  border-left-color:#12805d;
  background:#edf8f3
}

.result-box p{
  color:#33454c;
  margin-top:3px
}

.result-box strong{
  color:#16282e
}

.result-title{
  font-weight:800;
  margin-bottom:6px;
  color:#16282e
}


/* =========================================================
   INSTRUCTION
   ========================================================= */

.instruction-box{
  margin-top:10px;
  padding:11px;
  background:#fff4cc;
  border-left:4px solid #ddb429;
  border-radius:7px;
  color:#574d25;
  font-size:9px;
  line-height:1.5
}

.instruction-box p{
  color:#574d25
}

.instruction-title{
  font-weight:800;
  margin-bottom:5px;
  color:#4c421f
}


/* =========================================================
   RANGKAIAN
   ========================================================= */

.circuit-panel{
  margin-top:12px
}

.circuit-panel h3{
  font-size:11px;
  margin-bottom:7px;
  color:#1d2930
}

.circuit-area{
  background:#edf2f3;
  border-radius:6px;
  padding:12px;
  min-height:52px;
  color:#66777d;
  font-size:8px;
  line-height:1.55
}

.circuit-area p{
  margin-bottom:4px;
  color:#52656c
}

.circuit-area strong{
  color:#25383f
}


/* =========================================================
   FOOTER
   ========================================================= */

.app-footer{
  background:#26353b;
  color:#fff;
  text-align:center;
  padding:8px 16px 14px;
  font-size:8px;
  border-radius:0 0 18px 18px
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .main-layout{
    grid-template-columns:1fr
  }

  .result-panel{
    width:100%
  }

}


@media(max-width:600px){

  .app{
    padding:6px
  }

  .app-header h1{
    font-size:22px
  }

  .main-layout{
    padding:0 8px 12px
  }

  .controls{
    grid-template-columns:1fr
  }

  .probe-controls{
    grid-template-columns:1fr
  }

  .probe-status{
    grid-template-columns:1fr
  }

  .terminal-buttons{
    grid-template-columns:1fr
  }

  .school-logo{
    width:42px;
    height:42px;
    left:8px;
    top:8px
  }

  .kemenag-logo{
    width:42px;
    height:42px;
    right:8px;
    top:8px
  }

  .meter-brand{
    bottom:4px;
    width:88%
  }

  .brand-title{
    font-size:13px;
    letter-spacing:3px
  }

  .brand-subtitle{
    font-size:6px;
    margin-top:2px
  }

}

/* =========================================================
   TAHAP 8.2 — RESPONSIVE MOBILE
   Fokus: 360–600 px
   Tidak mengubah posisi / panjang / sudut jarum.
   ========================================================= */

@media (max-width: 600px){

  .app{
    width:100%;
    max-width:none;
    padding:4px;
  }

  .app-header{
    border-radius:12px 12px 0 0;
    padding:12px 8px 10px;
  }

  .app-header h1{
    font-size:20px;
    letter-spacing:3px;
    line-height:1.15;
  }

  .app-header p{
    font-size:9px;
    margin-top:4px;
  }

  .main-layout{
    grid-template-columns:1fr;
    gap:8px;
    padding:0 6px 10px;
  }

  .meter-panel{
    width:100%;
    min-width:0;
  }

  .meter-face{
    width:100%;
    border-width:5px;
    border-radius:9px;
  }

  .dial-area{
    width:100%;
    aspect-ratio:2/1;
  }

  /* Logo tetap di sudut dan tidak masuk area skala */
  .school-logo{
    top:7px;
    left:7px;
    width:38px;
    height:38px;
  }

  .kemenag-logo{
    top:7px;
    right:7px;
    width:38px;
    height:38px;
  }

  /* Branding bawah tetap berada di dalam meter face */
  .meter-brand{
    bottom:3px;
    width:82%;
  }

  .brand-title{
    font-size:12px;
    letter-spacing:2.5px;
  }

  .brand-subtitle{
    font-size:5.5px;
    margin-top:2px;
  }

  .test-panel{
    margin-top:7px;
    padding:8px;
    border-radius:7px;
  }

  .test-header h2{
    font-size:10px;
  }

  .test-header p{
    font-size:7px;
  }

  .test-status{
    font-size:7px;
  }

  .needle-test-buttons{
    gap:4px;
    margin-top:6px;
  }

  .needle-test-btn{
    height:28px;
    font-size:10px;
  }

  .controls{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:8px;
  }

  .control-group{
    gap:3px;
  }

  .control-group label{
    font-size:8px;
  }

  .control-group select{
    width:100%;
    height:34px;
    font-size:10px;
  }

  .probe-controls{
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:7px;
  }

  .probe-btn{
    height:36px;
    font-size:10px;
  }

  .probe-btn span{
    font-size:12px;
    margin-right:4px;
  }

  .probe-status{
    margin-top:5px;
    padding:5px;
    font-size:7px;
  }

  .status-dot{
    width:6px;
    height:6px;
  }

  .measure-btn{
    height:40px;
    margin-top:8px;
    font-size:10px;
  }

  .reset-btn{
    margin-top:6px;
    height:22px;
    font-size:7px;
  }

  .result-panel{
    width:100%;
    padding:11px;
    border-radius:9px;
  }

  .result-panel h2{
    font-size:15px;
    margin-bottom:8px;
  }

  .result-box,
  .instruction-box,
  .circuit-area{
    font-size:8px;
  }

  .result-box{
    min-height:72px;
    padding:9px;
  }

  .instruction-box{
    margin-top:8px;
    padding:9px;
  }

  .circuit-panel{
    margin-top:9px;
  }

  .circuit-panel h3{
    font-size:10px;
    margin-bottom:6px;
  }

  .circuit-area{
    padding:9px;
    min-height:45px;
  }

  .app-footer{
    padding:7px 8px 10px;
    font-size:7px;
    border-radius:0 0 12px 12px;
  }

}


/* =========================================================
   EXTRA SMALL PHONE — 360 px and below
   ========================================================= */

@media (max-width: 380px){

  .app{
    padding:2px;
  }

  .main-layout{
    padding:0 4px 8px;
  }

  .app-header h1{
    font-size:18px;
    letter-spacing:2.5px;
  }

  .app-header p{
    font-size:8px;
  }

  .school-logo,
  .kemenag-logo{
    width:34px;
    height:34px;
  }

  .meter-brand{
    width:88%;
  }

  .brand-title{
    font-size:10px;
    letter-spacing:2px;
  }

  .brand-subtitle{
    font-size:5px;
  }

  .needle-test-btn{
    height:27px;
    font-size:9px;
  }

  .probe-controls{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   TAHAP 8.2.1 — OPTIMASI HP KECIL
   Target: 360–380 px
   Probe tetap 2 kolom.
   Geometri jarum/branding meter TIDAK diubah.
   ========================================================= */

@media (max-width: 380px){

  .app{
    padding:2px;
  }

  .main-layout{
    padding:0 4px 8px;
    gap:6px;
  }

  .app-header{
    padding:10px 6px 8px;
  }

  .app-header h1{
    font-size:18px;
    letter-spacing:2.5px;
  }

  .app-header p{
    font-size:8px;
  }

  /* Meter tetap lega */
  .meter-face{
    border-width:5px;
  }

  .school-logo,
  .kemenag-logo{
    width:34px;
    height:34px;
    top:7px;
  }

  .school-logo{
    left:7px;
  }

  .kemenag-logo{
    right:7px;
  }

  .meter-brand{
    bottom:3px;
    width:88%;
  }

  .brand-title{
    font-size:10px;
    letter-spacing:2px;
  }

  .brand-subtitle{
    font-size:5px;
  }

  /* Test jarum: tetap satu baris */
  .test-panel{
    padding:7px;
    margin-top:6px;
  }

  .test-header h2{
    font-size:9px;
  }

  .test-header p{
    font-size:6.5px;
  }

  .test-status{
    font-size:6.5px;
  }

  .needle-test-buttons{
    grid-template-columns:repeat(5,1fr);
    gap:3px;
    margin-top:5px;
  }

  .needle-test-btn{
    height:27px;
    padding:0 2px;
    font-size:9px;
  }

  /* Kontrol utama tetap ringkas */
  .controls{
    grid-template-columns:1fr;
    gap:6px;
    margin-top:7px;
  }

  .control-group{
    gap:2px;
  }

  .control-group label{
    font-size:7.5px;
  }

  .control-group select{
    height:32px;
    font-size:9px;
    padding:0 7px;
  }

  /* Terminal tetap 2 kolom */
  .terminal-controls{
    grid-template-columns:1fr 1fr;
    gap:5px;
  }

  .terminal-btn{
    min-width:0;
    height:34px;
    padding:0 4px;
    font-size:9px;
  }

  /* PROBE: tetap 2 kolom */
  .probe-controls{
    grid-template-columns:1fr 1fr !important;
    gap:5px;
    margin-top:6px;
  }

  .probe-btn{
    min-width:0;
    height:34px;
    padding:0 3px;
    font-size:9px;
    white-space:nowrap;
  }

  .probe-btn span{
    font-size:11px;
    margin-right:3px;
  }

  .probe-status{
    gap:4px;
    padding:5px 3px;
    font-size:6.5px;
  }

  .status-dot{
    width:5px;
    height:5px;
    margin-right:2px;
  }

  /* Status koneksi dibuat compact */
  .connection-status{
    padding:5px 4px;
    font-size:6.5px;
  }

  /* Tombol utama */
  .measure-btn{
    height:38px;
    margin-top:7px;
    font-size:9px;
  }

  .reset-btn{
    height:21px;
    margin-top:5px;
    font-size:7px;
  }

  /* Panel hasil */
  .result-panel{
    padding:9px;
  }

  .result-panel h2{
    font-size:14px;
  }

  .result-box{
    min-height:65px;
    padding:8px;
    font-size:7.5px;
  }

  .instruction-box{
    padding:8px;
    font-size:7.5px;
  }

  .circuit-area{
    padding:8px;
    font-size:7px;
    min-height:40px;
  }

  .app-footer{
    padding:6px 6px 8px;
    font-size:6.5px;
  }
}
/* =========================================================
   TAHAP 8.3 — POLISHING KONTROL & INTERAKSI
   FINAL OVERRIDE
   ========================================================= */

/* ---------------------------------------------------------
   BRANDING METER — KUNCI TETAP DI BAWAH JARUM
   --------------------------------------------------------- */

.meter-brand{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:5px !important;

  transform:translateX(-50%) !important;

  width:72% !important;

  text-align:center !important;

  z-index:5;
  pointer-events:none;
}

.brand-title{
  font-size:16px;
  line-height:1;
  font-weight:800;
  letter-spacing:5px;
  color:#111;
  white-space:nowrap;
}

.brand-subtitle{
  font-size:7px;
  line-height:1.2;
  margin-top:3px;
  color:#555;
  white-space:nowrap;
}


/* ---------------------------------------------------------
   TEST JARUM
   --------------------------------------------------------- */

.needle-test-btn{
  transition:
    transform .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

.needle-test-btn:hover{
  filter:brightness(1.04);
}

.needle-test-btn:active{
  transform:scale(.97);
}

.needle-test-btn.active{
  background:#fff;
  outline:2px solid #fff;
  box-shadow:0 0 0 1px #e4bd2d;
}


/* ---------------------------------------------------------
   DROPDOWN KONTROL
   --------------------------------------------------------- */

.control-group select{
  width:100%;
  height:34px;

  transition:
    box-shadow .15s ease,
    background .15s ease;
}

.control-group select:focus{
  box-shadow:0 0 0 2px #e4bd2d;
}


/* ---------------------------------------------------------
   PROBE
   --------------------------------------------------------- */

.probe-btn{
  width:100%;
  min-height:40px;

  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

.probe-btn:hover{
  filter:brightness(1.05);
}

.probe-btn:active{
  transform:scale(.98);
}

.probe-btn.active{
  outline:2px solid #fff;

  box-shadow:
    0 0 0 2px #e4bd2d inset,
    0 0 6px rgba(228,189,45,.35);
}


/* ---------------------------------------------------------
   STATUS PROBE
   --------------------------------------------------------- */

.probe-status{
  display:flex;
  justify-content:space-around;
  align-items:center;

  gap:8px;

  min-height:28px;
}


/* ---------------------------------------------------------
   TOMBOL MULAI PENGUKURAN
   --------------------------------------------------------- */

.measure-btn{
  height:42px;
  min-height:42px;

  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

.measure-btn:hover{
  filter:brightness(1.04);
}

.measure-btn:active{
  transform:scale(.99);

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.18);
}


/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */

.reset-btn{
  min-width:52px;
  height:24px;

  transition:
    background .12s ease,
    color .12s ease,
    transform .12s ease;
}

.reset-btn:hover{
  background:#fff;
  color:#17282e;
}

.reset-btn:active{
  transform:scale(.96);
}


/* =========================================================
   MOBILE — 600 PX KE BAWAH
   ========================================================= */

@media(max-width:600px){

  /* -------------------------------------------------------
     BRANDING — TETAP BAWAH JARUM
     ------------------------------------------------------- */

  .meter-brand{
    left:50% !important;
    right:auto !important;
    top:auto !important;

    bottom:4px !important;

    transform:translateX(-50%) !important;

    width:82% !important;

    text-align:center !important;
  }

  .brand-title{
    font-size:13px;
    letter-spacing:3px;
  }

  .brand-subtitle{
    font-size:6px;
    margin-top:2px;
  }


  /* -------------------------------------------------------
     TEST JARUM
     ------------------------------------------------------- */

  .test-panel{
    margin-top:7px;
    padding:8px;
  }

  .test-header{
    gap:5px;
  }

  .test-header h2{
    font-size:10px;
  }

  .test-header p{
    font-size:7px;
  }

  .test-status{
    font-size:7px;
  }

  .needle-test-buttons{
    gap:4px;
    margin-top:6px;
  }

  .needle-test-btn{
    height:32px;
    min-width:0;
    font-size:10px;
  }


  /* -------------------------------------------------------
     DROPDOWN
     ------------------------------------------------------- */

  .controls{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:8px;
  }

  .control-group{
    gap:3px;
  }

  .control-group label{
    font-size:8px;
  }

  .control-group select{
    height:38px;
    min-height:38px;
    padding:0 10px;
    font-size:11px;
    border-radius:6px;
  }


  /* -------------------------------------------------------
     TERMINAL
     ------------------------------------------------------- */

  .terminal-controls{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .terminal-btn{
    height:40px;
    min-height:40px;
    font-size:10px;
  }


  /* -------------------------------------------------------
     PROBE — TETAP 2 KOLOM
     ------------------------------------------------------- */

  .probe-controls{
    grid-template-columns:1fr 1fr !important;
    gap:7px;
    margin-top:7px;
  }

  .probe-btn{
    height:40px;
    min-height:40px;
    font-size:10px;
  }

  .probe-btn span{
    margin-right:4px;
    font-size:13px;
  }


  /* -------------------------------------------------------
     STATUS
     ------------------------------------------------------- */

  .probe-status{
    gap:4px;
    padding:6px 4px;
    min-height:28px;
    font-size:7px;
  }

  .status-dot{
    width:6px;
    height:6px;
    min-width:6px;
    margin-right:3px;
  }


  /* -------------------------------------------------------
     PENGUKURAN
     ------------------------------------------------------- */

  .measure-btn{
    height:44px;
    min-height:44px;
    margin-top:8px;
    font-size:11px;
    border-radius:6px;
  }

  .reset-btn{
    height:26px;
    min-width:56px;
    margin-top:7px;
    font-size:8px;
  }

}


/* =========================================================
   MOBILE KECIL — 380 PX KE BAWAH
   ========================================================= */

@media(max-width:380px){

  /* BRANDING TETAP DI BAWAH JARUM */

  .meter-brand{
    left:50% !important;
    right:auto !important;
    top:auto !important;

    bottom:3px !important;

    transform:translateX(-50%) !important;

    width:88% !important;

    text-align:center !important;
  }

  .brand-title{
    font-size:10px;
    letter-spacing:2px;
  }

  .brand-subtitle{
    font-size:5px;
  }


  /* TEST JARUM */

  .needle-test-buttons{
    grid-template-columns:repeat(5,1fr);
    gap:3px;
  }

  .needle-test-btn{
    height:31px;
    font-size:9px;
  }


  /* DROPDOWN */

  .control-group select{
    height:37px;
    min-height:37px;
    font-size:10px;
  }


  /* TERMINAL */

  .terminal-controls{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .terminal-btn{
    height:39px;
    min-height:39px;
    font-size:9px;
  }


  /* PROBE TETAP 2 KOLOM */

  .probe-controls{
    grid-template-columns:1fr 1fr !important;
    gap:6px;
  }

  .probe-btn{
    height:39px;
    min-height:39px;
    font-size:9px;
  }


  /* STATUS */

  .probe-status{
    font-size:6.5px;
  }


  /* TOMBOL PENGUKURAN */

  .measure-btn{
    height:43px;
    min-height:43px;
    font-size:10px;
  }

}


/* =========================================================
   TOUCH SCREEN
   ========================================================= */

@media(hover:none) and (pointer:coarse){

  .needle-test-btn,
  .probe-btn,
  .terminal-btn,
  .measure-btn,
  .reset-btn,
  .control-group select{
    -webkit-user-select:none;
    user-select:none;
  }

  .needle-test-btn:active,
  .probe-btn:active,
  .terminal-btn:active,
  .measure-btn:active,
  .reset-btn:active{
    opacity:.9;
  }

}

/* =========================================================
   SIMUTER — FINISHING POLISH
   Tambahan aman: tidak mengubah fungsi JavaScript/HTML.
   ========================================================= */

/* Tampilan umum */
.app-header h1,
.result-panel h2,
.test-header h2,
.circuit-panel h3{
  letter-spacing:.2px;
}

/* Tombol utama lebih jelas dan nyaman */
.measure-btn{
  cursor:pointer;
  font-weight:800;
  letter-spacing:.3px;
  border-radius:8px;
}

/* Dropdown */
.control-group select{
  cursor:pointer;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.control-group select:focus{
  box-shadow:0 0 0 2px rgba(17,138,104,.12);
}

/* Tombol terminal/probe */
.terminal-btn,
.probe-btn,
.needle-test-btn,
.reset-btn{
  cursor:pointer;
}

.terminal-btn,
.probe-btn{
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.terminal-btn:hover,
.probe-btn:hover{
  filter:brightness(1.025);
}

.terminal-btn:active,
.probe-btn:active{
  transform:scale(.99);
}

/* Status lebih mudah dibaca */
.probe-status-item,
.connection-row{
  line-height:1.35;
}

/* Panel hasil */
.result-box,
.instruction-box,
.circuit-panel{
  overflow:hidden;
}

/* =========================================================
   MOBILE FINISHING
   ========================================================= */

@media(max-width:650px){

  .app{
    padding:10px;
  }

  .app-header{
    padding:8px 4px 10px;
  }

  .app-header h1{
    font-size:18px;
  }

  .app-header p{
    font-size:8px;
  }

  .meter-panel{
    width:100%;
  }

  /* Multimeter tetap menjadi fokus utama */
  .meter-face{
    width:100%;
  }

  /* Tombol pengukuran mudah ditekan */
  .measure-btn{
    width:100%;
    min-height:44px;
    height:44px;
    margin-top:8px;
    font-size:10px;
  }

  /* Dropdown tidak terlalu kecil */
  .control-group select{
    width:100%;
    min-height:38px;
    height:38px;
    font-size:10px;
  }

  /* Terminal dan probe tetap berdampingan */
  .terminal-controls,
  .probe-controls{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .terminal-btn,
  .probe-btn{
    width:100%;
    min-height:40px;
    height:40px;
    font-size:9px;
  }

  /* Status tidak terlalu memakan tempat */
  .probe-status{
    margin-top:6px;
  }

  /* Panel hasil diberi jarak jelas dari simulator */
  .result-panel{
    margin-top:10px;
  }

}

/* =========================================================
   MOBILE SANGAT KECIL
   ========================================================= */

@media(max-width:380px){

  .app{
    padding:7px;
  }

  .app-header h1{
    font-size:16px;
  }

  .app-header p{
    font-size:7px;
  }

  .measure-btn{
    min-height:42px;
    height:42px;
    font-size:9px;
  }

  .terminal-btn,
  .probe-btn{
    min-height:38px;
    height:38px;
    font-size:8px;
  }

  .control-group select{
    min-height:36px;
    height:36px;
    font-size:9px;
  }

}