@font-face {
    font-family: 'Aiva';
    src: url('/assets/font/aiva_light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aiva';
    src: url('/assets/font/aiva_regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aiva';
    src: url('/assets/font/aiva_medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aiva';
    src: url('/assets/font/aiva_bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ============================================
   potrait_kalkulator.css
   Base + Mobile Portrait (max-width: 768px)
   Gabungan: Landing, HPP, Panel Calculator
   ============================================ */

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

:root{
  --bg:#f0f4f8;--bg2:#ffffff;--bg3:#f7f9fc;--bg4:#edf2f7;
  --border:#d2dbe6;--border2:#bcc8d9;
  --text:#0a1f3d;--text2:#334e6f;--text3:#323232;
  --navy:#0a1f3d;--navy2:#1a365d;--navy3:#2c4a6e;
  --sea:#2b8ac4;--sea2:#4eaee0;--sea3:#a0d4f1;--sea-bg:rgba(43,138,196,.07);
  --green:#0d8a52;--green-bg:rgba(13,138,82,.06);
  --red:#d14040;--red-bg:rgba(209,64,64,.06);
  --radius:14px;--radius-sm:10px;
  --shadow-sm:0 1px 3px rgba(10,31,61,.06);
  --shadow-md:0 4px 12px rgba(10,31,61,.08);
  --shadow-lg:0 8px 24px rgba(10,31,61,.1);
}

html{font-size:15px;scroll-behavior:smooth}
body{font-family:'Aiva',sans-serif;background:#dbecff;color:var(--text);min-height:100vh;line-height:1.6}
.app{max-width:860px;padding:16px 8px 80px}

/* === HEADER === */
.header{text-align:center;padding:28px 16px 24px;background:linear-gradient(135deg,var(--navy),var(--navy2) 40%,var(--sea) 100%);border-radius:var(--radius);margin-bottom:20px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.header::before{content:'';position:absolute;top:-40%;right:-20%;width:260px;height:260px;background:radial-gradient(circle,rgba(78,174,224,.2),transparent 70%);border-radius:50%}
.logo{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--sea3);font-weight:600;margin-bottom:8px;position:relative;z-index:1}
.logo-icon{width:28px;height:28px;background:rgba(255,255,255,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.header h1{font-size:1.5rem;font-weight:700;color:#fff;position:relative;z-index:1}
.header-desc{font-size:.8rem;color:rgba(255,255,255,.7);margin-top:6px;position:relative;z-index:1}

/* === LANDING CARDS === */
#pageLanding {
  display: block;
  min-height: 80vh;
  width: 100%;
  padding: 20px;
}
.landing-header {
  text-align: center;
  margin-bottom: 30px;
}
.landing-header h1 {
  font-size: 1.8rem;
  color: var(--navy);
  margin-bottom: 8px;
  font-weight: 800;
}
.landing-header p {
  font-size: 0.95rem;
  color: var(--text2);
}
.landing-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.landing-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 28px 24px;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  font-family: 'Aiva', sans-serif;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-tap-highlight-color: transparent;
}
.landing-card:active {
  transform: scale(0.98);
}
.lc-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.lc-title {
  font-size: 1.2rem;
  line-height: 1.4;
}

/* Premium Card Styles */
.card-laba {
  background: linear-gradient(135deg, #24a2fb, #61c0ff);
  border: 4px solid #ffffff;
  box-shadow: 0 8px 16px rgba(36, 162, 251, 0.3), inset 0 2px 4px rgba(255,255,255,0.4);
}
.card-laba .lc-title { color: #ffffff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.card-laba .lc-icon { 
  background: rgba(255, 255, 255, 0.2); 
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.card-panel {
  background: linear-gradient(135deg, #ff9701, #ffb74d);
  border: 4px solid #ffffff;
  box-shadow: 0 8px 16px rgba(255, 151, 1, 0.3), inset 0 2px 4px rgba(255,255,255,0.4);
}
.card-panel .lc-title { color: #ffffff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.card-panel .lc-icon { 
  background: rgba(255, 255, 255, 0.2); 
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.landing-footer {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.btn-back-home {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ffffff;
  border: 2px solid #d2dbe6;
  border-radius: 12px;
  color: var(--navy);
  font-family: 'Aiva', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.btn-back-home:hover {
  background: var(--bg4);
  border-color: var(--sea);
  color: var(--sea);
}
.btn-back-home:active {
  transform: scale(0.96);
}

/* === PAGE TOPBAR === */
.page-topbar{position:relative;display:flex;justify-content: center;gap:12px;margin-bottom:16px;padding:8px}
.mobile-back-top { display: none; }
.btn-back{padding:8px 14px;border:1.5px solid #2386ff;color:#2a2929;font-family:'Aiva',sans-serif;font-size:1.2rem;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.btn-back:active{background:var(--bg4)}
.page-topbar-title{font-size:1.2rem;font-weight:700;color:#2196F3}

/* === SECTION (HPP) === */
.section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow-sm)}
.section-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none;background:#24a2fb;border-bottom:1px solid var(--border);transition:background .15s}
.section-head:active{background:var(--bg4)}
.section-head .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.section-head h2{font-size:.88rem;font-weight:700;flex:1;color:#ffffff}
.section-head .hint{display:none;font-size:.72rem;font-weight:400;color:var(--text3)}
.section-head .badge {
    font-family: 'Arial', monospace;
    font-size: .9rem;
    font-weight: 600;
    padding: 4px 5px;
    border-radius: 5px;
    background: rgb(255 255 255);
    color: #FF5722;
    border: 1px solid #FF5722;
    white-space: nowrap;
}
.section-head .toggle{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:#ffffff;transition:transform .25s;font-size:1rem}
.section.collapsed .toggle{transform:rotate(-90deg)}
.section.collapsed .section-body{display:none}
.section-body{padding:14px 16px 16px;background:#a0caff}
.icon-material{background:rgba(43,138,196,.1);color:var(--sea)}
.icon-labor{background:rgba(26,54,93,.08);color:var(--navy2)}
.icon-overhead{background:rgba(109,72,171,.08);color:#6d48ab}
.icon-margin{background:rgba(13,138,82,.08);color:var(--green)}

/* === FORM === */
.row{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
.row.triple{grid-template-columns:1fr 1fr 1fr}
.field{position:relative}
.field label{display:block;font-size:.9rem;font-weight:600;color:var(--text2);margin-bottom:5px}
.field .helper{font-size:.68rem;color:var(--text3);font-weight:400}
.field .input-wrap{display:flex;align-items:center;background:var(--bg2);border:1px solid #FF5722;border-radius:4px;transition:border-color .2s,box-shadow .2s}
.field .input-wrap:focus-within{border-color:var(--sea);box-shadow:0 0 0 3px rgba(43,138,196,.12)}
.field .prefix{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--text3);padding:0 0 0 12px;flex-shrink:0}
.field .suffix{font-family:'JetBrains Mono',monospace;font-size:.73rem;color:var(--text3);padding:0 12px 0 4px;flex-shrink:0}
.field input[type="number"],.field input[type="text"]{width:100%;padding:8px 2px;background:transparent;border:none;outline:none;font-family:'Arial',monospace;font-size:1.2rem;color:var(--text);-moz-appearance:textfield}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none}
.field input::placeholder{color:#b0b8c4;font-weight:400}
.field input::-moz-placeholder{color:#b0b8c4;font-weight:400}
.field select{width:100%;padding:11px 12px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:'Aiva',sans-serif;font-size:.84rem;color:var(--text);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236e84a0'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.field select:focus{border-color:var(--sea)}

/* === MATERIAL ITEMS === */
.material-item{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px;animation:fadeIn .2s ease}
.material-item .mat-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.material-item .mat-num{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;color:#fff;background:var(--sea);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.material-item .mat-name{flex:1}
.material-item .mat-name input{width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--border);padding:4px 0;font-family:'Aiva',sans-serif;font-size:1rem;font-weight:600;color:var(--navy);outline:none}
.material-item .mat-name input:focus{border-color:var(--sea)}
.material-item .mat-subtotal{font-family:'Arial',monospace;font-size:.85rem;color:#ffffff;font-weight:400;white-space:nowrap;background:#FF5722;padding:2px 8px;border-radius:6px}
.btn-remove{width:26px;height:26px;font-weight: 600;border:none;background:#d140404d;color:#ff0000;border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px;border:2px dashed #ffffff;border-radius:25px;background:#FF5722;color:#ffffff;font-family:'Aiva',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;margin-top:6px}
.btn-add:hover{border-color:var(--sea);color:var(--sea);background:var(--sea-bg)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* === RESULT PANEL (HPP) === */
.result-panel{background:#b1c5ff;border:1px solid #4b95ff;border-radius:var(--radius);padding:20px 16px;margin-top:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.result-title{font-size:1.2rem;text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:16px}
.result-grid{display:grid;grid-template-columns:1fr;gap:10px}
.result-card{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.result-card.highlight{background:#3f79cd;grid-column:1/-1}
.result-card.highlight .rc-label{color:rgba(255,255,255,.7)}
.result-card.highlight .rc-value{color:#fff;font-size:1.5rem}
.result-card.green{background:linear-gradient(135deg, #FFEB3B, #FF5722)}
.result-card .rc-label{font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);font-weight:600}
.result-card .rc-value{font-family:'Arial',monospace;font-size:1.5rem;font-weight:700;color:var(--navy)}
.result-card.green .rc-value{color:#f13d04}
.breakdown{margin-top:16px}
.breakdown-title{font-size:1.2rem;text-transform:uppercase;letter-spacing:2px;color:#000000;margin-bottom:8px;font-weight:700}
.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:1rem}
.breakdown-row:last-child{border:none}
.breakdown-row .br-label{color:var(--text2);display:flex;align-items:center;gap:8px;font-weight:500}
.breakdown-row .br-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.breakdown-row .br-value{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--navy)}
.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{padding:8px 12px;border:none;border-radius:var(--radius-sm);font-size:1.2rem;font-weight:400;cursor:pointer;display:flex;align-items:center;gap:8px}
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;box-shadow:0 2px 8px rgba(10,31,61,.2)}
.btn-secondary{background:var(--bg2);color:var(--text2);border:1.5px solid var(--border)}

/* === CARD (Panel) === */
.card{background:#a0caff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.card-title{font-size:0.9rem;font-weight:500;color:var(--navy);margin-bottom:10px}
.card-desc{font-size:1rem;color:var(--text3);margin:-4px 0 12px;line-height:1.4}
.input-row{display:grid;gap:10px}
.input-row.three{grid-template-columns:1fr 1fr 1fr}
.input-box{display:flex;align-items:center;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.input-box:focus-within{border-color:var(--sea);box-shadow:0 0 0 3px rgba(43,138,196,.12)}
.input-box input{width:100%;padding:11px 8px;background:transparent;border:none;outline:none;font-family:'JetBrains Mono',monospace;font-size:.95rem;color:var(--text);text-align:center}
.input-box input::placeholder{color:#b0b8c4;font-weight:400}
.input-box input::-moz-placeholder{color:#b0b8c4;font-weight:400}
.input-box .unit{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text3);padding-right:10px;flex-shrink:0}
.type-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.type-btn{padding:14px 12px;border:0px solid #03A9F4;border-radius:25px;background:var(--bg3);color:#000000;font-family:'Aiva',sans-serif;font-size:1.2rem;font-weight:600;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;transition:all .2s}
.type-btn.active{background:#ed6f00;color:#ffffff;box-shadow:0 2px 8px rgb(43 138 196 / 0%)}
.type-btn:active{transform:scale(.97)}
.stepper-wrap{display:flex;align-items:center;gap:12px}
.stepper-btn{width:48px;height:48px;border:2px solid var(--border);border-radius:12px;background:var(--bg2);color:var(--navy);font-size:1.4rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-tap-highlight-color:transparent;transition:all .15s}
.stepper-btn:active{transform:scale(.92)}
.stepper-btn.minus{color:var(--text3)}
.stepper-btn.plus{background:#6bc7ff;border-color:var(--sea);color:#fff}
.stepper-value{font-family:'JetBrains Mono',monospace;font-size:1.8rem;font-weight:700;color:var(--navy);min-width:48px;text-align:center}
.stepper-label{font-size:.85rem;color:var(--text3);flex:1}
.toggle-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.toggle-label{flex:1;cursor:pointer}
.toggle-text{display:block;font-size:1.2rem;font-weight:600;color:var(--text)}
.toggle-hint{display:block;font-size:.85rem;color:var(--text3);margin-top:2px}
.toggle-switch{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--border2);border-radius:28px;cursor:pointer;transition:all .25s}
.toggle-slider::before{content:'';position:absolute;width:22px;height:22px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.toggle-switch input:checked + .toggle-slider{background:var(--sea)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(24px)}
.toggle-info{margin-top:10px;font-size:.72rem;color:var(--text3);padding:8px 10px;background:var(--bg4);border-radius:6px;font-style:italic}
.btn-hitung{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border:none;border-radius:var(--radius);font-family:'Aiva',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;margin:20px 0;box-shadow:0 4px 16px rgba(10,31,61,.25);-webkit-tap-highlight-color:transparent}
.btn-hitung:active{transform:scale(.97)}

/* === RESULT (Panel) === */
.result-area{animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.result-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.summary-card{background:#FF9800;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center}
.summary-card.main{grid-column:1/-1;background:#ff8300}
.summary-card.main .sc-label{font-weight: 900; font-size: 1rem; color:#000}
.summary-card.main .sc-value{color:#fff;font-size:1.5rem}
.sc-label{font-size:.9rem;text-transform:uppercase;color:#000000;font-weight:600;margin-bottom:4px}
.sc-value{font-family:'Arial',monospace;font-size:1.8rem;font-weight:700;color:#ad0000}
.sc-sisa{font-size:.9rem;color:var(--text3);margin-top:4px}
.sc-main-row{display:flex;align-items:center;justify-content:center;gap:12px}
.btn-detail{width:36px;height:36px;border:1px solid rgb(95 95 95 / 0%);border-radius:10px;background:rgb(255 255 255);color:rgb(6 139 237);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.btn-detail:active{transform:scale(.9);background:rgba(255,255,255,.2)}
.result-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.rs-title{font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:12px}
.ptable{width:100%;border-collapse:collapse;font-size:.8rem}
.ptable th{text-align:left;padding:8px 6px;font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text3);font-weight:600;border-bottom:2px solid var(--border)}
.ptable td{font-size:.9rem;padding:8px 6px;border-bottom:1px solid var(--bg4);color:var(--text2)}
.ptable .mono{font-family:'JetBrains Mono',monospace;font-size:.9rem}
.ptable .center{text-align:center}
.ptable .right{text-align:right}
.ptable tfoot td{border-bottom:none;border-top:2px solid var(--border);padding-top:10px}
.ptable .foot-label{font-weight:700;color:var(--navy);text-align:right}
.ptable .foot-value{font-weight:700;color:var(--sea);font-size:.85rem}

/* === MODAL === */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,31,61,.5);z-index:1000;align-items:flex-end;justify-content:center;animation:fadeOverlay .2s ease}
.modal-overlay.open{display:flex}
@keyframes fadeOverlay{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--bg2);border-radius:18px 18px 0 0;width:100%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;animation:slideUp .25s ease;box-shadow:0 -4px 24px rgba(10,31,61,.15)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-head{background: #65b8ff;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-title{font-size:1.4rem;font-weight:500;color:#ffffff}
.modal-close{font-weight: 700;width:32px;height:32px;border:none;background:#ffffffa8;color:#fb0202;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close:active{background:var(--border)}
.modal-body{padding:16px 20px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-body .result-section{margin-bottom:12px;box-shadow:none;border:1px solid var(--border)}

/* === NEW: 2-col input row === */
.input-row.two{grid-template-columns:1fr 1fr;gap:10px}

/* === NEW: Lapisan tags in detail table === */
.tag-cell{white-space:nowrap}
.tag-luar{display:inline-block;padding:2px 7px;border-radius:4px;font-size:.7rem;font-weight:700;background:#e8f5e9;color:#2e7d32;margin:1px}
.tag-dalam{display:inline-block;padding:2px 7px;border-radius:4px;font-size:.7rem;font-weight:700;background:#fff3e0;color:#e65100;margin:1px}

/* === NEW: Belakang info card in modal === */
.belakang-info{background:var(--bg4);border-radius:var(--radius-sm);padding:12px 14px}
.bi-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:.88rem;color:var(--text2)}
.bi-row:last-child{border-bottom:none}

/* === NEW: Summary card color variants === */
.summary-card.sc-triplek{background:#FF9800}
.summary-card.sc-triplek-blk{background:#ffb74d}
.summary-card.sc-luar{background:#66bb6a}
.summary-card.sc-luar .sc-label{color:#fff}
.summary-card.sc-luar .sc-value{color:#fff}
.summary-card.sc-luar .sc-sisa{color:rgba(255,255,255,.8)}
.summary-card.sc-dalam{background:#42a5f5}
.summary-card.sc-dalam .sc-label{color:#fff}
.summary-card.sc-dalam .sc-value{color:#fff}
.summary-card.sc-dalam .sc-sisa{color:rgba(255,255,255,.8)}

/* === NEW: Hint & badge in modal === */
.rs-hint{font-size:.75rem;color:var(--text3);margin:-4px 0 12px;font-style:italic;line-height:1.4}
.rs-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;background:#fff3e0;color:#e65100;margin-left:6px;vertical-align:middle}

/* === PRINT === */
@media print{body{background:#fff}.header{-webkit-print-color-adjust:exact;print-color-adjust:exact}.btn-add,.btn-remove,.actions,.section-head .toggle,.btn-back,.btn-hitung,.landing-cards,.page-topbar{display:none!important}}


/* ============================================
   MOBILE PORTRAIT
   ============================================ */
@media (max-width:768px){
  html{font-size:14px}
  .header{padding:22px 14px 20px;margin-bottom:16px}
  .header h1{font-size:1.35rem}
  .landing-card{display: flex; flex-direction: column; padding: 16px 14px;}
  .lc-icon{width:42px;height:42px;font-size:1.3rem}
  .section-head{padding:12px 14px;gap:8px}
  .section-head .icon{width:32px;height:32px;font-size:1rem}
  .section-head h2{font-size:1.1rem}
  .section-body{padding:6px 6px}
  .row{grid-template-columns:1fr}
  .row.triple{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .card{padding:14px 12px}
  .input-row.three{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .result-panel{padding:16px 14px}
  .result-grid{grid-template-columns:1fr}
  .result-card.highlight .rc-value{font-size:1.3rem}
  .actions{flex-direction:column}
  .actions .btn{width:100%;justify-content:center}
  .result-summary{grid-template-columns:1fr 1fr;gap:8px}
  .summary-card.main .sc-value{font-size:1.5rem}
  .stepper-btn{width:40px;height:40px;font-size:3rem}
  .stepper-value{font-size:1.5rem;min-width:40px}

  .page-topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }

  .mobile-back-top {
    display: inline-flex !important;
    flex-direction: row !important;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    padding: 6px 14px 6px 10px;
    gap: 6px;
    background: #ffffff;
    color: #2b2b2b !important;
    border-radius: 20px;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    margin-bottom: 8px;
    margin-left: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .mobile-back-top:hover, .mobile-back-top:active, .mobile-back-top:visited, .mobile-back-top span {
    color: #2b2b2b !important;
    text-decoration: none !important;
    border: none !important;
  }

  .btn-hitung-desktop { display: none !important; }

  /* ----------------------------------------------------------
     DESKTOP HEADER & DROPDOWN — sembunyikan di mobile
     ---------------------------------------------------------- */
  .desktop-header { display: none !important; }

  /* ----------------------------------------------------------
     MOBILE BOTTOM BAR (Buat Poster + Menu)
     ---------------------------------------------------------- */
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: linear-gradient(90deg, #ff00cc, #ff9701);
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  }
  .mobile-bottom-bar .btn-back {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-right: 1px solid rgba(0,0,0,0.1);
    background: #f4f7f6;
    border-radius: 0;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .panel-toggle-btn {
    flex: 1;
    background: linear-gradient(90deg, #ff00cc, #ff9701);
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    background: #24a2fb;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
  }

  /* ----------------------------------------------------------
     MOBILE SIDE PANEL (slide dari kiri)
     ---------------------------------------------------------- */
  .mobile-side-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(255 255 255 / 75%);
    z-index: 5999;
    backdrop-filter: blur(4px);
  }
  .mobile-side-panel-overlay.open { display: block; }

  .mobile-side-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    background: #ffffff;
    z-index: 6000;
    transform: translateX(-110%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 100%;
  }
  .mobile-side-panel.open { border: 1px solid #5eb3f9;transform: translateX(0); }

  .mobile-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #5eb3f9;
    font-size: 1.2rem;
    color: #fff;
  }
  .panel-close-menu-btn {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 20px;
    height: 80px;
    background: #5eb3f9;
    border: none;
    border-radius: 0 8px 8px 0;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1.1;
  }
  .mobile-side-content {
    flex: 1;
    overflow-y: auto;
  }
  .mobile-menu-group-title {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #fff7f7;
    gap: 12px;
  }
  .mobile-submenu {
    display: none;
    background: #f9f9f9;
  }
  .mobile-submenu.open { display: block; }
  .mobile-submenu a {
    display: block;
    padding: 14px 16px 14px 30px;
    color: #054087;
    text-decoration: none;
    background: #b6d2ff;
    font-size: 1.2rem;
    border-bottom: 1px solid #ffffff;
  }
  .mobile-submenu a:last-child { border-bottom: none; }
} /* end mobile */