/* ============================================
   desktop_kalkulator.css
   Desktop Overrides (min-width: 768px)
   ============================================ */

@media (min-width:768px){
  html{font-size:15px}
  .app{padding:24px 24px 80px}
  .header{padding:40px 32px 36px;border-radius:18px;margin-bottom:24px}
  .header h1{font-size:1.8rem}

  /* Landing */
  .landing-cards{flex-direction:row;gap:16px}
  .landing-card{flex:1;flex-direction:column;text-align:center;padding:28px 24px}
  .landing-card:hover{transform:translateY(-5px)}
  .lc-icon{width:56px;height:56px;font-size:1.8rem;margin:0 auto 8px}
  .lc-arrow{margin:8px auto 0}

  /* Topbar */
  .page-topbar{margin-bottom:20px}
  .btn-back:hover{border-color:var(--sea);color:var(--sea)}

  /* Section */
  .section-head{padding:5px 22px;gap:12px}
  .section-head .icon{width:40px;height:40px;font-size:1.2rem}
  .section-head h2{font-size:1.2rem}
  .section-head .hint{display:inline}
  .section-body{padding:20px 24px 24px}
  .row{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .row.triple{grid-template-columns:1fr 1fr 1fr}

  /* Card */
  .card{padding:22px 24px;margin-bottom:14px}
  .input-row.three{grid-template-columns:1fr 1fr 1fr;gap:14px}
  .input-row.two{grid-template-columns:1fr 1fr;gap:14px}

  /* Material hover */
  .material-item:hover{border-color:var(--sea);box-shadow:0 2px 10px rgba(43,138,196,.1)}
  .section:hover{box-shadow:var(--shadow-md)}

  /* Result HPP */
  .result-panel{padding:28px;border-radius:18px}
  .result-grid{grid-template-columns:1fr 1fr;gap:14px}
  .result-card.highlight .rc-value{font-size:1.7rem}
  .actions{flex-direction:row}
  .actions .btn{width:auto}

  /* Result Panel */
  .result-summary{grid-template-columns:1fr 1fr;gap:12px}
  .summary-card{padding:18px}
  .summary-card.main .sc-value{font-size:1.7rem}
  .result-section{padding:20px 24px}

  /* Stepper */
  .stepper-btn{width:52px;height:52px;font-size:1.5rem}
  .stepper-btn:hover{transform:scale(1.05)}
  .stepper-btn.plus:hover{background:var(--navy);border-color:var(--navy)}
  .stepper-value{font-size:2rem;min-width:56px}

  /* Button */
  .btn-hitung{padding:18px;font-size:1.05rem;border-radius:16px}
  .btn-hitung:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,31,61,.3)}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(10,31,61,.25)}

  /* Modal */
  .modal-overlay{align-items:center}
  .modal-box{border-radius:18px;max-height:80vh;max-width:640px}
  .modal-head{padding:20px 24px}
  .modal-body{padding:20px 24px 28px}
  .modal-close:hover{background:var(--border);color:var(--navy)}
  .btn-detail:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5)}

  .card:hover,.result-section:hover{box-shadow:var(--shadow-md)}

  /* ----------------------------------------------------------
     DESKTOP HEADER BAR
     ---------------------------------------------------------- */
  .desktop-header {
    display: flex;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    min-height: 55px;
    flex-shrink: 0;
    box-sizing: border-box;
    z-index: 1000;
    background: linear-gradient(120deg, #9d00ff, #5076ff, #61e3ff, #cceeff);
    border-bottom: 1px solid #e0e0e0;
    padding: 0 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    align-items: center;
    gap: 12px;
  }
  .header-left {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .logo-aiva {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
  }
  .header-menu {
    display: flex;
    gap: 0;
  }
  .menu-dropdown { position: relative; }
  .menu-btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 8px 16px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 25px;
  }
  .menu-btn:hover { background: rgba(255, 255, 255, 0.15); }
  .dropdown-content {
    display: none;
    position: absolute;
    top: 43px;
    left: 0;
    background: #fff;
    min-width: 180px;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 40%);
    border-radius: 4px;
    z-index: 2000;
  }
  .dropdown-content.show { display: block; }
  .submenu-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    transition: background 0.2s;
    border-bottom: 1px solid #dbdada;
  }
  .submenu-item:hover { background: #f0f0f0; }
  .submenu-dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 0 4px rgb(0 0 0 / 40%);
    border-radius: 4px;
    z-index: 2001;
  }
  .submenu-dropdown.show { display: block; }
  .submenu-dropdown button {
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background 0.2s;
    border-bottom: 1px solid #dbdada;
  }
  .submenu-dropdown button:hover { background: #e8f4ff; }
  .mobile-bottom-bar,
  .mobile-side-panel,
  .mobile-side-panel-overlay,
  .panel-overlay { display: none !important; }
} /* end desktop */