/* ============================================================
   PRICE CALCULATOR — 03-responsive.css
   Breakpoint diperbanyak biar transisi antar ukuran layar
   lebih halus & simetris — dari monitor lebar sampe HP kecil.

   Skala breakpoint:
   ≥1440px  Desktop lebar
   1280–1439  Laptop besar
   1025–1279  Laptop / Tablet landscape besar
   901–1024   Tablet landscape
   769–900    Tablet portrait besar
   601–768    Tablet portrait / phablet
   481–600    HP besar (landscape kecil)
   381–480    HP standar
   321–380    HP kecil
   ≤320       HP sangat kecil / lawas
   ============================================================ */

/* ============================================================
   A. ≥1440px — DESKTOP LEBAR
   ============================================================ */
@media (min-width: 1440px) {
  :root { --pc-sidebar-w: 264px; }

  .pc-page-body { padding: 28px 32px; }

  .pc-stats-row { gap: 16px; }

  .pc-customer { max-width: 680px; }
}

/* ============================================================
   B. 1280px–1439px — LAPTOP BESAR
   ============================================================ */
@media (max-width: 1439px) {
  :root { --pc-sidebar-w: 240px; }
}

/* ============================================================
   C. 1025px–1279px — LAPTOP / TABLET LANDSCAPE BESAR
   ============================================================ */
@media (max-width: 1279px) {
  .pc-stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   34. 901px–1024px — TABLET LANDSCAPE (Laptop kecil)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --pc-sidebar-w: 224px; }

  .pc-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .pc-row-2 {
    grid-template-columns: 1fr;
  }

  .pc-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ============================================================
   D. 769px–900px — TABLET PORTRAIT BESAR
   ============================================================ */
@media (max-width: 900px) {
  .pc-page-body { padding: 20px; }

  .pc-stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .pc-service-grid { grid-template-columns: 1fr 1fr; }

  .pc-customer { max-width: 100%; }
}

/* ============================================================
   35. 601px–768px — TABLET PORTRAIT / PHABLET
   ============================================================ */
@media (max-width: 768px) {
  .td-sidebar {
    transform: translateX(-100%) !important;
    position: fixed !important;
  }

  .td-sidebar.open {
    transform: none !important;
  }

  .td-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .pc-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #wpadminbar {
    display: none !important;
  }

  html {
    margin-top: 0 !important;
  }
  .pc-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--pc-shadow-xl);
  }

  .pc-sidebar.open { transform: translateX(0); }

  .pc-main { margin-left: 0; }

  .pc-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pc-topbar { padding: 0 16px; }

  .pc-page-body { padding: 18px; }

  .pc-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pc-row-2 { grid-template-columns: 1fr; }

  .pc-modal { border-radius: var(--pc-r-xl) var(--pc-r-xl) 0 0; }
  .pc-modal-backdrop { align-items: flex-end; padding: 0; }
  .pc-modal-header { border-radius: var(--pc-r-xl) var(--pc-r-xl) 0 0; }

  .pc-service-grid { grid-template-columns: 1fr 1fr; }

  .pc-form-row { grid-template-columns: 1fr; gap: 0; }

  .pc-toast-container { left: 12px; right: 12px; bottom: 16px; }
  .pc-toast { min-width: unset; max-width: 100%; }
}

/* ============================================================
   E. 481px–600px — HP BESAR (phablet kecil / landscape HP)
   ============================================================ */
@media (max-width: 600px) {
  .pc-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .pc-service-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .pc-page-body { padding: 16px; }

  .pc-cust-header { padding: 20px 16px 16px; }

  .pc-calc-main { padding: 16px; }

  .pc-lead-card { padding: 18px; }
}

/* ============================================================
   36. 381px–480px — HP STANDAR
   ============================================================ */
@media (max-width: 480px) {
  .pc-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .pc-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .pc-stat-card { padding: 12px 10px; gap: 8px; }
  .pc-stat-icon { width: 36px; height: 36px; font-size: 16px; }
  .pc-stat-val  { font-size: 16px; }
  .pc-stat-lbl  { font-size: 11px; }

  .pc-page-body { padding: 12px; }

  .pc-card-header { padding: 13px 14px; }
  .pc-card form, .pc-card > form { padding: 14px; }

  .pc-modal-body { padding: 14px; }
  .pc-modal-footer { padding: 12px 14px; }

  .pc-service-grid { grid-template-columns: 1fr; }

  .pc-customer { max-width: 100%; }

  .pc-steps { padding: 12px 14px; }
  .pc-step-lbl { display: none; }
  .pc-step-line { min-width: 10px; margin: 0 4px; }

  .pc-calc-main { padding: 14px; }

  .pc-calc-step-title { font-size: 15px; }

  .pc-result-total { font-size: 28px; }

  .pc-lead-card { padding: 16px; }

  .pc-cust-nama { font-size: 17px; }
  .pc-cust-logo { width: 48px; height: 48px; font-size: 22px; }

  .pc-pkg-card { padding: 14px; }

  .pc-btn-hitung,
  .pc-btn-submit { font-size: 14px; padding: 13px; }
}

/* ============================================================
   F. 321px–380px — HP KECIL
   ============================================================ */
@media (max-width: 380px) {
  .pc-stats-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pc-stat-card { padding: 10px; gap: 8px; }

  .pc-cust-logo-wrap { gap: 10px; }
  .pc-cust-logo { width: 44px; height: 44px; font-size: 20px; }
  .pc-cust-nama { font-size: 15.5px; }
  .pc-cust-desc { font-size: 12px; }

  .pc-topbar { padding: 0 12px; gap: 8px; }
  .pc-topbar-title { font-size: 14px; }

  .pc-modal { max-width: 100%; }

  .pc-result-total { font-size: 24px; }
  .pc-result-label { font-size: 11px; }

  .pc-btn-hitung,
  .pc-btn-submit,
  .pc-btn-wa { font-size: 13.5px; padding: 12px; }

  .pc-lead-card,
  .pc-spec-card,
  .pc-addon-section { padding: 12px; }

  .pc-toast { font-size: 12.5px; padding: 10px 14px; }
}

/* ============================================================
   G. ≤320px — HP SANGAT KECIL / LAWAS
   ============================================================ */
@media (max-width: 320px) {
  .pc-page-body { padding: 10px; }

  .pc-stat-icon { width: 32px; height: 32px; font-size: 14px; }
  .pc-stat-val  { font-size: 14px; }
  .pc-stat-lbl  { font-size: 10px; }

  .pc-sc-emoji { width: 40px; height: 40px; font-size: 22px; }
  .pc-sc-name  { font-size: 13px; }
  .pc-sc-desc  { font-size: 11px; }

  .pc-pkg-price { font-size: 17px; }
  .pc-pkg-nama  { font-size: 14px; }

  .pc-result-total { font-size: 21px; }

  .pc-success-icon { font-size: 42px; }
  .pc-success-title { font-size: 17px; }
  .pc-success-desc { font-size: 13px; }
}

/* ============================================================
   38. PRINT
   ============================================================ */
@media print {
  .pc-sidebar,
  .pc-topbar,
  .pc-toast-container,
  .pc-modal-backdrop,
  .pc-btn-hitung,
  .pc-btn-submit,
  .pc-btn-wa { display: none !important; }

  .pc-main { margin-left: 0 !important; }
  .pc-card  { box-shadow: none; border: 1px solid #ddd; }
  .pc-result-total-wrap { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

body.page-template-kalkulator-jasa {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}