/* ============================================================
   RESPONSIVE.CSS - Rumata Propertindo
   Web Design & Development by KitaBikin.Web.id
   ============================================================ */

/* ---------- Matikan auto text-size-adjust browser mobile (fix font ganjil) ---------- */
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* ---------- Warna teks deskripsi Tim Marketing — hitam, berlaku semua ukuran layar ---------- */
#tim-marketing p {
  color: #000000 !important;
}  

/* ==================== 1400px - Laptop Besar ==================== */
@media (max-width: 1400px) {
  .wrap { padding: 0 50px; }

  h1 { font-size: clamp(40px, 6vw, 80px); }
  h2 { font-size: clamp(26px, 3.5vw, 44px); }
  .lead { font-size: 20px; }

  .loc-body h3 { font-size: 22px; }
  .loc-stat strong { font-size: 22px; }
  .loc-stat span { font-size: 18px; }
  .loc-addr { font-size: 18px; }
}

/* Foto "Selamat Datang Di" — KHUSUS sekitar 1440px, gak ngefek ke ukuran desktop lain */
@media (min-width: 1401px) and (max-width: 1440px) {
  #tentang .wrap:not(.rmt-tentang-hero) {
    gap: 10px !important;
  }
    #tentang .meter-decor {
    width: 600px !important;
    height: 600px !important;
  }
}

/* Hero "Tentang Kami" — KHUSUS sekitar 1440px, biar sejajar logo nav tanpa ganggu ukuran lain */
@media (min-width: 1401px) and (max-width: 1440px) {
  .rmt-tentang-hero {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

@media (max-width: 1366px) {
  #tentang .wrap:not(.rmt-tentang-hero) > div:last-child {
    margin-left: -240px; /* geser ke kiri, sesuaikan angkanya */
  }
  #tentang .wrap:not(.rmt-tentang-hero) > div:first-child {
    margin-left: -200px !important; /* override inline style */
    top: 600px !important; /* naikkan dikit dari 750px asli */
  }
  #tentang .meter-decor {
    width: 600px !important;
    height: 600px !important;
  }
  .decor-bottom.decor-drop-diag {
    width: 300px !important;
    height: 300px !important;
    bottom: -170px !important; /* naikkan, sesuaikan angka */
  }
  #dedikasi .bg-ink {
    margin-top: 80px !important; /* was 150px, kurangi jarak */
  }
  .kontak-photo-frame {
    margin-top: -280px !important;
    margin-bottom: -785px !important;
    max-width: 290px !important;
  }

  /* Khusus tentang.html — padding top & lebar kolom, hanya di 1366px */
  .rmt-tentang-hero {
    padding-top: 70px !important;
  }
  .rmt-tentang-hero-text {
    max-width: 970px !important;
  }

    .rmt-tentang-timeline {
    padding-left: 270px !important;
  }
  .rmt-tentang-timeline-desc {
    max-width: 900px !important;
  }
}


/* ==================== 1200px - Laptop Kecil ==================== */
@media (max-width: 1200px) {
  .wrap { padding: 0 40px; }

  h2 { font-size: clamp(24px, 3vw, 38px); }
  .lead { font-size: 19px; }

  section { padding: 80px 0; }
}

/* ---- Universal .lead step 900px (bagian dari cascade presisi 1920->mobile) ---- */
@media (max-width: 900px) {
  .lead { font-size: 18px; }
}

@media (max-width: 768px) {
  /* Sembunyikan div wrapper meter-decor — khusus index.html saja */
  #tentang .wrap:not(.rmt-tentang-hero) > div:first-child {
    display: none !important;
  }

  /* Sembunyikan kompas */
  #tentang .decor-bottom.decor-drop-diag {
    display: none !important;
  }
}

/* ==================== HEADER & NAVIGATION ==================== */

@media (max-width: 900px) {
  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-cta {
    display: none;
  }

  .nav-login-icon-mobile {
    display: flex;
    margin-left: auto;
    margin-right: 8px;
  }
}

@media (max-width: 900px) {
  .nav-links a { 
    color: var(--ink); 
    text-shadow: none;
    font-size: 18px;
    padding: 14px 0;
  }

  .nav-cta { display: none; }

  .fab-group { bottom: 24px; right: 16px; }
  .fab-toggle { width: 160px; height: 56px; }

  .nav-links {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .site-header.scrolled .wrap { padding: 0 16px; }
  .brand-logo { width: 60px; height: 60px; }
}

/* ==================== MOBILE BOTTOM NAV (Login & Pesan Kavling) ==================== */
.nav-mobile-bottom {
  display: none;
}

@media (max-width: 900px) {
  .nav-mobile-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 20px 0 12px;
    border-top: 1px solid var(--line);
    margin-top: 12px;
  }

  .nav-login-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink) !important;
    text-shadow: none !important;
    padding: 14px 0;
    text-decoration: none;
  }

  .nav-login-mobile svg {
    flex-shrink: 0;
  }

  .nav-pesan-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F5B301;
    color: var(--ink) !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 14px 28px;
    text-decoration: none;
    text-shadow: none !important;
    transition: background .2s ease, color .2s ease;
  }

  .nav-pesan-mobile:hover {
    background: var(--ink);
    color: #fff !important;
  }
}

@media (max-width: 900px) {
  .field-row select {
    font-size: 15px !important;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* Icon login di sebelah hamburger (mobile only) */
.nav-login-icon-mobile {
  display: none;
  position: relative;
  z-index: 110;
  color: #1B3A5F;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-right: 20px;
  transition: color .2s ease;
}
.nav-login-icon-mobile:hover {
  color: #F5B301;
}
.nav-login-icon-mobile svg {
  width: 40px;
  height: 40px;
}

@media (max-width: 900px) {
  .nav-login-icon-mobile {
    display: flex;
  }

  /* Pesan Kavling — samakan dengan menu lain */
  .nav-pesan-mobile {
    background: none !important;
    color: #1B3A5F !important;
    padding: 14px 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    justify-content: flex-start !important;
    text-shadow: none !important;
    border-bottom: none !important;
  }

  .nav-pesan-mobile:hover {
    background: none !important;
    color: #F5B301 !important;
  }

  /* Nav mobile bottom — nyatu ke menu, tanpa divider */
  .nav-mobile-bottom {
    border-top: none;
    padding: 0;
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  /* Hilangkan icon kiri (HP, Email, Password) yang nabrak placeholder */
  .field-icon-wrap .field-icon { display: none; }
  .field-icon-wrap input.has-icon { padding-left: 20px; }
}

/* ==================== HERO SECTION (BERANDA) ==================== */

@media (max-width: 1400px) {
  .hero-video-inner { max-width: 640px; }
}

@media (max-width: 1200px) {
  .hero-video-inner { max-width: 520px; }
  .hero-mixed-lead { font-size: 18px; }
}

@media (max-width: 900px) {
  .hero-video-section { min-height: 100dvh; }
  .hero-video-inner { max-width: 100%; padding: 0 24px; text-align: center; }
  .hero-video-inner .hero-title-mixed { font-size: clamp(30px, 6vw, 48px); }
  .hero-mixed-lead { font-size: 17px; margin: 0 auto; }
  .hero-dots { justify-content: center; }
}

@media (max-width: 640px) {
  .hero-video-section { min-height: 100dvh; }
  .hero-video-inner .hero-title-mixed { font-size: clamp(26px, 7vw, 38px); }
  .hero-mixed-lead { font-size: 16px; }
  .hero-eyebrow { font-size: 12px; letter-spacing: .08em; }
}

@media (max-width: 480px) {
  .hero-video-section { min-height: 100dvh; }
  .hero-video-inner .hero-title-mixed { font-size: clamp(24px, 7.5vw, 34px); }
  .hero-mixed-lead { font-size: 15px; }
}

/* ==================== SECTION TENTANG & KENALI KAMI ==================== */

@media (max-width: 1400px) {
  #tentang { padding-top: 80px; }
  .meter-decor { max-width: 800px; height: 280px !important; }
  .about-logo-mark { max-width: 640px; height: 220px; }
}

@media (max-width: 1200px) {
  #tentang .wrap { flex-direction: column; gap: 24px; }
  #tentang .wrap:not(.rmt-tentang-hero) > div:first-child { 
    flex: none; 
    min-width: unset; 
    width: 100%;
    margin-left: 0 !important;
    top: 0 !important;
  }
  #tentang .wrap > div:last-child {
    margin-left: 0 !important;
  }
  .meter-decor { max-width: 600px; height: 220px !important; }
  .about-logo-mark { max-width: 500px; height: 180px; }
}

/* Fix khusus zona 901px–1200px: paksa tetap berdampingan kayak 1366px, mentok kiri layar */
@media (max-width: 1200px) and (min-width: 901px) {
  #tentang .wrap:not(.rmt-tentang-hero) {
    flex-direction: row !important;
    gap: 80px !important;
  }
  #tentang .wrap:not(.rmt-tentang-hero) > div:first-child {
    flex: 0 0 auto !important;
    min-width: 260px !important;
    width: auto !important;
    margin-left: -200px !important;
    top: 600px !important;
  }
  #tentang .wrap:not(.rmt-tentang-hero) > div:last-child {
    margin-left: 0 !important;
    position: relative !important;
    top: -40px !important;
  }
  #tentang .meter-decor {
    width: 550px !important;
    height: 550px !important;
  }
}

/* Jarak foto Tentang Kami — khusus 901px-1200px */
@media (max-width: 1200px) and (min-width: 901px) {
  .rmt-tentang-hero-photo {
    margin-top: 40px !important;
  }
  #tentang {
    padding-bottom: 40px !important;   /* ini yang sebenarnya nge-lock jarak gede tadi — atur manual */
  }
}

/* ---------- Perkecil foto meter-decor khusus 901px-1024px (tablet landscape) ---------- */
@media (max-width: 1024px) and (min-width: 901px) {
  #tentang .meter-decor {
    width: 420px !important;
    height: 420px !important;
  }
  #tentang .wrap:not(.rmt-tentang-hero) > div:first-child {
    margin-left: -120px !important;
  }
}


@media (max-width: 900px) {
  #tentang { padding-top: 60px; padding-bottom: 40px; }
  #tentang .wrap { gap: 20px; }
  .meter-decor { max-width: 400px; height: 160px !important; }
  .about-logo-mark { max-width: 100%; height: 140px; }

  #kenali-kami { padding-top: 40px; }
  .tvid-copy-photo { aspect-ratio: 16/9; }
}

@media (max-width: 640px) {
  #tentang { padding-top: 40px; }
  .meter-decor { max-width: 300px; height: 120px !important; }
  .about-logo-mark { height: 110px; }
}

@media (max-width: 480px) {
  .meter-decor { max-width: 240px; height: 90px !important; }
  .about-logo-mark { height: 90px; }
}

/* ---- Tentang.html khusus ---- */
@media (max-width: 1200px) {
  .rmt-tentang-hero { gap: 80px; padding-top: 80px; }
  .rmt-tentang-timeline { padding-left: 200px !important; }
  .rmt-tentang-timeline-item { padding: 20px 0 !important; }
}

@media (max-width: 900px) {
  .rmt-tentang-hero { gap: 50px; padding-top: 60px; }
  .rmt-tentang-timeline { padding-left: 0; }
  .rmt-tentang-timeline-item { 
    grid-template-columns: 90px 1fr; 
    gap: 20px; 
    padding: 24px 0;
  }
  .rmt-tentang-timeline-year { font-size: 24px; }
  .rmt-tentang-timeline-desc { font-size: 18px; }
  .rmt-tentang-visimisi-title { font-size: 30px; }
  .rmt-tentang-visimisi-text { font-size: 18px; }
}

@media (max-width: 640px) {
  .rmt-tentang-hero { gap: 20px; padding-top: 40px; }
  .rmt-tentang-hero-text .lead { font-size: 17px !important; }
  .rmt-tentang-hero-photo { margin-top: 50px !important; }
  .rmt-tentang-timeline { padding-left: 16px; }
  .rmt-tentang-timeline-item { 
    grid-template-columns: 1fr; 
    gap: 8px; 
  }
  .rmt-tentang-timeline-year { font-size: 20px; }
  .rmt-tentang-timeline-desc { font-size: 16px; }
  .rmt-tentang-visimisi { padding: 100px 0; }
  .rmt-tentang-visimisi-title { font-size: 24px; }
  .rmt-tentang-visimisi-text { font-size: 16px; }
  .rmt-tentang-visimisi-block { margin-bottom: 10px !important; }
}

@media (max-width: 480px) {
  .rmt-tentang-timeline { padding-left: 8px; }
  .rmt-tentang-timeline-year { font-size: 18px; }
  .rmt-tentang-timeline-desc { font-size: 15px; }
}

/* ==================== MENGAPA KAMI & KEUNGGULAN ==================== */

@media (max-width: 1400px) {
  .why-grid { gap: 40px; margin-top: 50px; }
  .why-card h4 { font-size: 26px; }
  .why-card p { font-size: 20px; }
  .why-card .icon { width: 80px; height: 80px; }
  .why-card .icon svg { width: 80px; height: 80px; }
}

@media (max-width: 1200px) {
  .why-grid { gap: 30px; }
  .why-card h4 { font-size: 22px; }
  .why-card p { font-size: 18px; }

  .why-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .why-item:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.25); }
  .why-item:nth-child(2n) { border-right: none; }
  .why-item h3 { font-size: 22px; }
  .why-item p { font-size: 18px; }
  .why-num { font-size: 16px; }
}

@media (max-width: 900px) {
  #mengapa { padding-top: 60px; padding-bottom: 0; }
  #mengapa .section-head { margin-left: 0; }
  #mengapa .section-head p { font-size: 18px; margin-top: 30px; }

  .why-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    margin-top: 40px; 
  }
  .why-card h4 { font-size: 20px; }
  .why-card p { font-size: 16px; }
  .why-card .icon { width: 60px; height: 60px; }
  .why-card .icon svg { width: 60px; height: 60px; }

  #dedikasi { padding-bottom: 0; }
  #dedikasi .bg-ink { 
    margin-top: 80px; 
    padding: 80px 0 80px; 
  }
  #dedikasi .bg-ink h2 { font-size: clamp(22px, 3.5vw, 36px); }

  .why-grid-2 { grid-template-columns: 1fr 1fr; }
  .why-item { padding: 28px 20px; }
  .why-item h3 { font-size: 20px; }
  .why-item p { font-size: 16px; }
}

@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-card { padding: 20px; }
  .why-card h4 { font-size: 18px; }
  .why-card p { font-size: 15px; }

  .why-grid-2 { grid-template-columns: 1fr; }
  .why-item:nth-child(3n) { border-right: none; }
  .why-item:nth-child(2n) { border-right: none; }
  .why-item:last-child { border-bottom: none; }
  .why-item { padding: 24px 20px !important; }
  .why-item h3 { font-size: 18px; }
  .why-item p { font-size: 15px; }
  .why-num { font-size: 14px; margin-bottom: 16px; }

  #dedikasi .bg-ink { 
    margin-top: 60px; 
    padding: 60px 0; 
  }
}

@media (max-width: 480px) {
  .why-card h4 { font-size: 16px; }
  .why-card p { font-size: 14px; }
  .why-item h3 { font-size: 16px; }
  .why-item p { font-size: 14px; }

  .profile-card { padding: 32px 24px; gap: 32px; }
  .profile-card-info h3 { font-size: 22px; }
  .profile-card-info p { font-size: 17px; }
  .profile-card-thumb { width: 160px; height: 200px; }
}

/* ==================== KAVLING & LOKASI CARDS ==================== */

@media (max-width: 1400px) {
  .loc-grid { gap: 20px; }
  .loc-body h3 { font-size: 20px; }
  .loc-stat strong { font-size: 20px; }
  .loc-stat span { font-size: 16px; }
  .loc-addr { font-size: 16px; }
  .loc-stats { gap: 40px; }
}

@media (max-width: 1200px) {
  #kavling { padding-top: 140px; }
  .loc-grid { gap: 16px; }
  .loc-body { padding: 0 20px 20px; }
  .loc-body h3 { font-size: 18px; margin-bottom: 24px; }
  .loc-stat strong { font-size: 18px; }
  .loc-stat span { font-size: 14px; }
  .loc-addr { font-size: 14px; margin-bottom: 30px; }
  .loc-stats { gap: 24px; padding: 14px 0; }
  .loc-num { font-size: 10px; padding: 6px 10px; }
  .loc-status { font-size: 10px; padding: 6px 10px; }
}

@media (max-width: 1400px) {
  .loc-hero { padding: 40px 0 40px; }
  .loc-hero-grid { align-items: center !important; }
  .loc-hero-media { margin-top: 0 !important; }
}

@media (max-width: 900px) {
  #kavling { padding-top: 100px; }
  #kavling .section-head { margin-bottom: 40px; }
  #kavling .section-head h2 { font-size: clamp(24px, 4vw, 34px); }
  #kavling .section-head .lead { margin-top: 24px; }

  .loc-hero h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
    margin-bottom: 50px !important;
    text-align: center;
  }
  .loc-hero-grid > div:first-child { margin-top: 150px !important; }
  .loc-hero .lead { margin-bottom: 50px !important; }

  .loc-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .loc-body h3 { font-size: 16px; margin-bottom: 16px; }
  .loc-stat strong { font-size: 16px; }
  .loc-stat span { font-size: 13px; }
  .loc-addr { font-size: 13px; margin-bottom: 20px; }
  .loc-stats { gap: 16px; }
  .loc-actions .btn-cta { padding: 10px 16px; font-size: 12px; }

  /* Location hero page */
  .loc-hero { padding: 40px 0 48px; }
  .loc-hero-grid { 
    grid-template-columns: 1fr; 
    gap: 16px; 
  }
  .loc-hero-grid > div:first-child {
    display: contents;
  }
  .loc-hero-grid > div:first-child > h1 {
    order: 1;
    margin-top: 100px !important;
    margin-bottom: 24px !important;
    text-align: center !important;
    font-size: 24px !important;
  }
  .loc-hero-media {
    order: 2;
    margin-top: 0 !important;
    aspect-ratio: 16/10;
  }
  .loc-hero-grid > div:first-child > .reveal-kontak-text {
    order: 3;
    padding: 20px 0;
  }
  .loc-hero-grid > div:first-child > .reveal-kontak-text .lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .loc-hero-grid > div:first-child > .reveal-kontak-text > div:last-child {
    justify-content: center !important;
  }
  .loc-quickstats { gap: 10px; margin-top: 12px; }
  .qstat span { font-size: 14px; }
  .qstat strong { font-size: 22px; }
}

@media (max-width: 640px) {
  #kavling { padding-top: 150px; }
  #kavling .section-head { text-align: center; }
  #kavling .section-head h2 { text-align: center; }
  #kavling .section-head .lead { margin-top: 50px; }
  .loc-grid { grid-template-columns: 1fr; gap: 16px; }
  .loc-body h3 { font-size: 18px; }
  .loc-stat strong { font-size: 18px; }
  .loc-stat span { font-size: 16px; }
  .loc-addr { font-size: 14px; }
  .loc-stats { gap: 20px; }

  .loc-hero-grid > div:first-child { margin-top: 80px; }
  .loc-quickstats { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    justify-items: center;
    margin-top: 0;
  }
  .qstat { min-width: 0; }
  .qstat span { font-size: 13px; }
  .qstat strong { font-size: 20px; }

  .access-steps { 
    grid-template-columns: 1fr 1fr; 
    gap: 12px;
    margin-bottom: 40px;
    margin-top: 40px;
  }
  .access-step { padding: 40px 16px 20px; }
  .access-step .an { width: 38px; height: 38px; font-size: 18px; border-radius: 20%; }
  .access-step h4 { font-size: 16px; }
  .access-step p { font-size: 16px; }
}

@media (max-width: 480px) {
  .loc-grid { grid-template-columns: 1fr; }
  .loc-stat span { font-size: 15px; }
  .loc-hero-grid > div:first-child { margin-top: 60px; }
  
  .access-steps { grid-template-columns: 1fr; gap: 28px; }
  .access-step h4 { font-size: 15px; }

  .loc-quickstats { gap: 12px; }
  .qstat { min-width: 100px; }
  .qstat strong { font-size: 18px; }

  /* Siteplan */
  .siteplan-tabs { gap: 6px; }
  .siteplan-tab { font-size: 14px; padding: 6px 10px; }
  .siteplan-info-full .siteplan-info { padding: 60px 20px 80px; }
  .siteplan-info-full h3 { font-size: clamp(18px, 4vw, 24px); }
  .siteplan-datarow span:first-child { font-size: 16px; }
  .siteplan-datarow span:last-child { font-size: 16px; }
  .siteplan-cta { flex-direction: column !important; align-items: center; }
  .siteplan-cta .btn-cta { width: 100% !important; }
}

/* ==================== CARA PEMBELIAN & STEPS ==================== */

@media (max-width: 1400px) {
  #cara-pembelian .step h4 { font-size: 19px; }
  #cara-pembelian .step p { font-size: 19px; }
}

@media (max-width: 1200px) {
  #cara-pembelian { padding-top: 60px; }
  #cara-pembelian .section-head h2 { font-size: clamp(22px, 3vw, 36px); }
  #cara-pembelian .section-head .lead { margin-top: 32px; }
  #cara-pembelian .step h4 { font-size: 18px; }
  #cara-pembelian .step p { font-size: 18px; }
}

@media (max-width: 900px) {
  #cara-pembelian { padding-top: 50px; }
  #cara-pembelian .steps { max-width: 100%; padding: 0 0px; }
  #cara-pembelian .step { padding: 22px 10px; }
  #cara-pembelian .step-num { width: 42px; height: 42px; font-size: 20px; }
  #cara-pembelian .step h4 { font-size: 17px; }
  #cara-pembelian .step p { font-size: 16px; }
}

@media (max-width: 640px) {
  #cara-pembelian .section-head h2 { font-size: clamp(22px, 5vw, 28px); }
  #cara-pembelian .section-head .lead { margin-top: 60px; }
  #cara-pembelian .step { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 18px 8px; }
  #cara-pembelian .step-num { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }
  #cara-pembelian .step h4 { font-size: 16px; }
  #cara-pembelian .step p { font-size: 15px; }
}

@media (max-width: 480px) {
  #cara-pembelian .step { grid-template-columns: 38px 1fr; column-gap: 12px; }
  #cara-pembelian .step h4 { font-size: 15px; }
  #cara-pembelian .step p { font-size: 14px; }
  #cara-pembelian .step-num { width: 34px; height: 34px; font-size: 16px; }
}

/* ==================== CTA BANNER ==================== */

@media (max-width: 1200px) {
  .cta-banner { padding: 80px 0; margin-top: 160px; }
  .cta-banner h2 { font-size: clamp(22px, 3.5vw, 38px); }
}

@media (max-width: 900px) {
  .cta-banner { padding: 60px 0; margin-top: 100px; }
  .cta-banner h2 { font-size: clamp(20px, 4.5vw, 32px); }
}

@media (max-width: 640px) {
  .cta-banner { padding: 48px 0; margin-top: 60px; }
  .cta-banner h2 { font-size: clamp(18px, 5.5vw, 26px); }
}

/* ==================== SITEPLAN PAGE ==================== */

@media (max-width: 1400px) {
  #siteplan .reveal-stagger h4 { font-size: 20px !important; }
}

@media (max-width: 1200px) {
  #siteplan { padding-top: 140px; }
  #siteplan .section-head h2 { font-size: clamp(22px, 3vw, 36px); }
  #siteplan .reveal-stagger { grid-template-columns: 1fr 1fr !important; }
  #siteplan .reveal-stagger h4 { font-size: 18px !important; }
}

@media (max-width: 900px) {
  #siteplan { padding-top: 100px; }
  #siteplan .section-head { margin-bottom: 48px; }
  #siteplan .section-head h2 { font-size: clamp(20px, 4vw, 30px); text-align: center; }
  #siteplan .section-head .lead { margin-top: 50px; text-align: center; margin-left: auto; margin-right: auto; }
  #siteplan .reveal-stagger { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  #siteplan .reveal-stagger h4 { font-size: 17px !important; }
}

@media (max-width: 640px) {
  #siteplan { padding-top: 150px; }
  #siteplan .reveal-stagger { grid-template-columns: 1fr !important; gap: 12px !important; }
  #siteplan .reveal-stagger h4 { font-size: 16px !important; }
}

@media (max-width: 480px) {
  #siteplan { padding-top: 150px; }
  #siteplan .section-head h2 { font-size: clamp(24px, 5.5vw, 28px); }
}

/* ---------- Kompas Siteplan: taruh di atas judul (kanan), khusus mobile ---------- */
@media (max-width: 900px) {
  #siteplan .decor-bottom.decor-drop {
    display: none !important;
  }
}

/* Legalitas siteplan.html */
@media (max-width: 1400px) {
  .legal-row h4 { font-size: 19px; }
  .legal-row span { font-size: 19px; }
}

@media (max-width: 1200px) {
  #legalitas .legal-grid { grid-template-columns: 1fr; gap: 40px; }
  #legalitas { padding-top: 60px; padding-bottom: 100px; }
}

@media (max-width: 900px) {
  .legal-list { margin-top: 0; }
  .legal-row { grid-template-columns: 46px 1fr; column-gap: 16px; padding: 20px 8px; }
  .legal-icon { width: 42px; height: 42px; font-size: 20px; }
  .legal-row h4 { font-size: 17px; }
  .legal-row span { font-size: 16px; }
}

@media (max-width: 640px) {
  #legalitas { padding-bottom: 60px; }
  .legal-row { column-gap: 12px; padding: 16px 6px; }
  .legal-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 20%; }
  .legal-row h4 { font-size: 16px; }
  .legal-row span { font-size: 15px; }
}

/* Tahap 1200px yang sebelumnya kosong — biar font ini juga turun bertahap sebelum sampai 900px */
@media (max-width: 1200px) {
  .legal-row h4 { font-size: 18px !important; }
  .legal-row span { font-size: 17px !important; }
  #pesan-kavling-tahapan .legal-row h4 { font-size: 18px !important; }
  #pesan-kavling-tahapan .legal-row span { font-size: 17px !important; }

  .rmt-tentang-timeline-year { font-size: 28px !important; }
  .rmt-tentang-timeline-desc { font-size: 20px !important; }
  .rmt-tentang-visimisi-title { font-size: 34px !important; }
  .rmt-tentang-visimisi-text { font-size: 20px !important; }

  #tim-marketing h3 { font-size: 20px !important; }
  #tim-marketing p { font-size: 18px !important; }
}

/* ==================== TWOCOL PANEL (VIRTUAL SURVEY) ==================== */

@media (max-width: 1200px) {
  .twocol-panel { grid-template-columns: 1fr 1fr; }
  .panel { padding: 60px 5vw; }
  .panel h4 { font-size: 18px; }
  .panel-dark p, .panel-light p { font-size: 17px; }
  .panel-row { font-size: 17px; }
}

@media (max-width: 900px) {
  .twocol-panel { grid-template-columns: 1fr; }
  .panel { padding: 48px 24px; }
  .panel h4 { font-size: 17px; margin-bottom: 20px; }
  .panel-dark p, .panel-light p { font-size: 16px; }
  .panel-row { font-size: 16px; padding: 10px 0; }
}

@media (max-width: 640px) {
  .panel { padding: 36px 20px; }
  .panel h4 { font-size: 16px; }
  .panel-dark p, .panel-light p { font-size: 15px; }
  .panel-row { font-size: 15px; }
}

/* ==================== VIDEO BLOCK & GALLERY ==================== */

@media (max-width: 1200px) {
  .video-block { grid-template-columns: 1fr 1fr; }
  .gallery { aspect-ratio: 16/9; }
}

@media (max-width: 900px) {
  .video-block { grid-template-columns: 1fr; border-radius: var(--radius-md); }
  .video-block-media { aspect-ratio: 16/10; }
  .video-block-copy { padding: 32px 24px; }
  .gallery { aspect-ratio: 4/3; }
  .gallery-nav { width: 36px; height: 36px; font-size: 14px; }
}

@media (max-width: 640px) {
  .video-block-media { aspect-ratio: 16/11; }
  .gallery { aspect-ratio: 3/2; }
  .gallery-caption { font-size: 11px; padding: 14px 16px 12px; }
  .play-btn-yt svg { width: 56px; height: 40px; }
}

@media (max-width: 480px) {
  .video-block-media { aspect-ratio: 4/3; }
  .gallery-nav { width: 30px; height: 30px; }
}

/* ==================== PROOF GRID (BUKTI PEMBELI) ==================== */

@media (max-width: 1400px) {
  #bukti .proof-check div { font-size: 18px; }
}

@media (max-width: 1200px) {
  #bukti { padding-top: 160px; padding-bottom: 120px; }
  #bukti .tvid { gap: 28px; padding: 32px; }
  #bukti .proof-grid { grid-template-columns: repeat(2, 1fr); }
  #bukti .tvid-copy .eyebrow { font-size: 26px; margin-bottom: 36px; }
  #bukti .tvid-copy h2 { font-size: clamp(20px, 3vw, 32px); margin-bottom: 32px; }
  #bukti .tvid-copy p { font-size: 18px; }
}

@media (max-width: 900px) {
  #bukti { padding-top: 120px; padding-bottom: 80px; }
  #bukti .section-head { margin-bottom: 32px; }
  #bukti .section-head h2 { font-size: clamp(20px, 4vw, 32px); }
  #bukti .section-head .lead { margin-top: 48px; }
  #bukti .tvid { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  #bukti .tvid-copy .eyebrow { font-size: 18px; margin-bottom: 20px; text-align: center; }
  #bukti .tvid-copy h2 { font-size: clamp(18px, 4vw, 26px); margin-bottom: 20px; }
  #bukti .tvid-copy p { font-size: 16px; }
  #bukti .tvid-media { aspect-ratio: 16/9; }
  #bukti .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #bukti .proof-check { margin-top: 60px; gap: 20px; flex-direction: column; align-items: center; }
  #bukti .proof-check div { font-size: 16px; }
  .proof-grid-mosaic { column-count: 2; }
}

@media (max-width: 640px) {
  #bukti { padding-top: 140px; padding-bottom: 60px; }
  #bukti .section-head h2 { font-size: clamp(24px, 5vw, 28px); }
  #bukti .proof-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  #bukti .proof-check { gap: 14px; }
  .proof-grid-mosaic { column-count: 2; column-gap: 8px; }
  .proof-grid-mosaic .proof-cell { margin-bottom: 8px; }
}

@media (max-width: 480px) {
  #bukti .proof-grid { grid-template-columns: 1fr; }
  .proof-grid-mosaic { column-count: 1; }
  #bukti .proof-check div { font-size: 14px; }
}

/* ==================== FAQ ==================== */

@media (max-width: 1400px) {
  #faq .faq-grid { grid-template-columns: 380px 1fr; gap: 120px; }
}

@media (max-width: 1200px) {
  #faq { padding-top: 160px; }
  #faq .faq-grid { grid-template-columns: 300px 1fr; gap: 60px; }
  #faq .faq-q span { font-size: 18px; }
  #faq .faq-a p { font-size: 18px; }
}

@media (max-width: 900px) {
  #faq { padding-top: 120px; }
  #faq .faq-grid { grid-template-columns: 1fr; gap: 48px; }
  #faq .faq-grid h2 { width: auto; }
  #faq .faq-grid > div:first-child .lead { margin-top: 24px; }
  #faq .faq-grid > div:first-child .btn-cta { margin-top: 40px; }
  #faq .faq-item:first-child .faq-q { padding-top: 0; }
  #faq .faq-q span { font-size: 17px; }
  #faq .faq-a p { font-size: 17px; max-width: 100%; }
  #faq .faq-item.open:last-child .faq-a { max-height: 400px; }

  /* Pindahkan "Belum menemukan jawaban" + tombol ke paling bawah */
  #faq .faq-grid > div:first-child {
    display: contents;
  }
  #faq .faq-grid > div:first-child h2 {
    order: 1;
    text-align: center;
    margin-bottom: 25px;
  }
  #faq .faq-grid > div:last-child { order: 2; }
  #faq .faq-grid > div:first-child .lead {
    order: 3;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  #faq .faq-grid > div:first-child .btn-cta {
    order: 4;
    margin-top: 20px !important;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 20px;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  #faq { padding-top: 150px; }
  #faq .faq-q span { font-size: 15px; }
  #faq .faq-q { padding: 18px 0; gap: 14px; }
  #faq .faq-a p { font-size: 15px; }
  #faq .faq-item.open .faq-a { max-height: 500px; }
  #faq .faq-item.open:last-child .faq-a { max-height: 600px; }
}

@media (max-width: 480px) {
  #faq .faq-q span { font-size: 14px; }
  #faq .faq-a p { font-size: 14px; padding-bottom: 18px; }
}

/* ==================== PESAN KAVLING (FORM & HERO) ==================== */

@media (max-width: 1400px) {
  .hero-kontak-text { max-width: 480px !important; }
}

@media (max-width: 1200px) {
  .pesan-hero { padding: 80px 0; }
  .pesan-hero-text { margin-left: -160px; }
  .pesan-hero .hero-title-mixed { font-size: clamp(30px, 4vw, 50px); }
  .pesan-hero-decor { max-width: 700px; margin-left: -80px; }
  .form { padding: 40px; }
  .field-row { grid-template-columns: 180px 1fr; }
  .field-row label { font-size: 17px; }
  .field-row input, .field-row select, .field-row textarea { font-size: 17px; padding: 14px 16px; }
}

@media (max-width: 900px) {
  .pesan-hero-pin-wrap { height: auto; }
  .pesan-hero { min-height: 100dvh; padding: 130px 0 110px; }
  .pesan-hero-text { margin-left: 0; }
  .pesan-hero .hero-title-mixed { font-size: clamp(26px, 5vw, 42px); text-align: center; }
  .pesan-hero-image { display: none; }
  .pesan-hero .wrap { flex-direction: column; justify-content: center; }
  #pesan-kavling-hero .scroll-down-indicator { left: 50%; transform: translateX(-50%); }
  .form { padding: 28px 20px; }
  .form-accordion-header { font-size: 18px; padding: 14px 16px; }
  .field-row { grid-template-columns: 1fr; gap: 6px; }
  .field-row label { font-size: 16px; }
  .field-row input, .field-row select, .field-row textarea { font-size: 16px; padding: 12px 14px; }
  .field-row .field-row-2col { grid-template-columns: 1fr 1fr; }
  .field-row .field-narrow { max-width: 100%; }
  .form-captcha { font-size: 16px; }
  .form-note { font-size: 16px; }
  #pesan-kavling-tahapan .legal-row { grid-template-columns: 44px 1fr; }
  #pesan-kavling-tahapan .legal-icon { width: 40px; height: 40px; font-size: 18px; }
  #pesan-kavling-tahapan .legal-row h4 { font-size: 16px; }
  #pesan-kavling-tahapan .legal-row span { font-size: 15px; }
}

@media (max-width: 640px) {
  .pesan-hero { padding: 80px 0 40px; }
  .pesan-hero .hero-title-mixed { font-size: clamp(22px, 6vw, 34px); }
  .form { padding: 20px 14px; }
  .form-accordion-header { font-size: 16px; padding: 12px 14px; }
  .field-row .field-row-2col { grid-template-columns: 1fr; }
  .field-radio-group { gap: 16px; }
  .field-radio-option { font-size: 16px; }
  .field-address-row { grid-template-columns: 1fr; }
  .form-captcha { font-size: 15px; margin-top: 28px; margin-bottom: 28px; }
  .form-note { font-size: 14px; margin-top: 30px; }
  .btn-submit-kavling { font-size: 15px; padding: 14px 20px; }
}

@media (max-width: 480px) {
  .field-row input, .field-row select, .field-row textarea { font-size: 15px; padding: 11px 12px; }
  .field-row label { font-size: 15px; }
  .field-address-item input { font-size: 15px; padding: 11px 12px; }
  .field-address-item span { font-size: 13px; }
}

/* ==================== KONTAK ==================== */

@media (max-width: 1400px) {
  #kontak { padding: 160px 0 160px; }
  .contact-grid { gap: 16px; }
  .kontak-photo-frame { margin-top: -240px; margin-bottom: -600px; }
}

/* Khusus 901px–1200px: foto tetap tampil di kanan, 2 kolom seperti 1366px */
@media (max-width: 1200px) and (min-width: 901px) {
  .contact-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .kontak-photo-frame {
    display: block !important;
    margin-top: -280px !important;
    margin-bottom: -785px !important;
    max-width: 290px !important;
  }
}

/* ---------- Jarak peta & teks di kontak.html (#kontak-info), khusus mobile ---------- */
@media (max-width: 1500px) {
  #kontak-info .contact-grid { gap: 80px; }
}
@media (max-width: 1200px) {
  #kontak-info { padding-bottom: 60px !important; }
}

@media (max-width: 900px) {
  #formulir-pertanyaan { padding-top: 90px !important; }
}

@media (max-width: 900px) {
  #kontak { padding: 80px 0 80px; }
  .contact-inline { font-size: 18px; }
  .contact-inline span { font-size: 18px; }
  .contact-address { font-size: 18px; }
}

@media (max-width: 640px) {
  #kontak { padding: 60px 0 60px; }
  #kontak h2 { font-size: clamp(20px, 5vw, 30px); }
  #kontak .lead { margin-top: 24px; }
  .contact-inline { font-size: 15px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .contact-inline .contact-label { flex: none; }
  .contact-inline .contact-colon { display: none; }
  .contact-address { font-size: 15px; }
}

/* ---------- Hero Kontak (kontak.html) — naikkan konten, khusus mobile ---------- */
@media (max-width: 900px) {
  .kontak-hero {
    min-height: 100vh;
    align-items: flex-start;
    padding-top: 150px;
  }

  /* Susun ulang urutan: Judul → Gambar → Paragraf */
  #hubungi-kami .hero-kontak-text {
    display: contents;
  }
  #hubungi-kami .hero-eyebrow {
    order: 1;
    margin-bottom: -30px;
    font-size: 24px !important;
  }
  #hubungi-kami .hero-title-mixed {
    order: 2;
    margin-bottom: 28px;
    font-size: 24px !important;
    font-weight: 600 !important;
  }
  #hubungi-kami .hero-kontak-image {
    order: 3 !important;
    max-width: 260px !important;
    margin: 0 auto 28px !important;
  }
  #hubungi-kami .hero-kontak-text .lead {
    order: 4;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

/* ==================== TIM MARKETING ==================== */

@media (max-width: 900px) {
  #tim-marketing .marketing-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  #tim-marketing h3 { font-size: 18px; }
  #tim-marketing p { font-size: 16px; }
  #tim-marketing .marketing-btn { width: 120px; font-size: 15px; padding: 10px 14px; }
}

@media (max-width: 640px) {
  #tim-marketing .marketing-grid { grid-template-columns: 1fr; max-width: 400px; }
  #tim-marketing .marketing-card { padding: 32px 24px; }
}

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

@media (max-width: 1200px) {
  .footer-top { padding: 36px 0; }
  .footer-nav a { font-size: 13px; gap: 18px; }
  .footer-logo { width: 80px; height: 80px; }
  .footer-bottom { padding: 24px 0; font-size: 14px; }
}

@media (max-width: 900px) {
  .footer-top .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
  }
  .footer-top-left { display: contents; }
  .footer-nav {
    grid-column: 1;
    grid-row: 1 / 3;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 28px;
  }
  .footer-nav a { font-size: 17px; }
  .footer-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 70px;
    height: 70px;
  }
  .footer-social {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .footer-bottom .wrap { flex-direction: column; gap: 8px; text-align: center; }
  .footer-bottom .wrap span:first-child { order: 2; }
  .footer-bottom .wrap span:last-child { order: 1; }
  .footer-bottom { font-size: 17px; padding: 20px 0; }
}

@media (max-width: 640px) {
  .footer-top { padding: 28px 0; }
  .footer-nav { gap: 28px; }
  .footer-nav a { font-size: 15px; }
  .footer-social a { width: 34px; height: 34px; }
  .footer-social svg { width: 17px; height: 17px; }
  .footer-logo { width: 90px; height: 90px; margin-top: -10px; }
  .footer-social { margin-top: -50px; }
  .footer-bottom { font-size: 14.5px; }
}

/* ==================== FAB (FLOATING CONTACT BUTTON) ==================== */

@media (max-width: 900px) {
  .fab-group { bottom: 20px; right: 14px; }
  .fab-toggle { width: 150px; height: 52px; }
  .fab-item { width: 190px; padding: 5px 14px; }
  .fab-label { font-size: 12px; }
  .fab-item-icon { width: 26px; height: 26px; }
}

@media (max-width: 640px) {
  .fab-group { bottom: 16px; right: 12px; }
  .fab-toggle { width: 130px; height: 46px; }
  .fab-item { width: 170px; padding: 5px 12px; }
  .fab-label { font-size: 11px; }
  .fab-item-icon { width: 24px; height: 24px; }
}

@media (max-width: 380px) {
  .fab-toggle { width: 115px; height: 42px; }
  .fab-item { width: 155px; }
  .fab-label { font-size: 10.5px; }
}

/* ==================== LOGIN MODAL ==================== */

@media (max-width: 900px) {
  .login-modal-split { max-width: 520px; }
  .login-modal-visual { width: 38%; padding: 32px 24px; }
  .login-modal-visual h3 { font-size: 19px; }
  .login-modal-content { padding: 36px 28px; }
}

@media (max-width: 640px) {
  .login-modal-split { flex-direction: column; max-width: 96vw; border-radius: 14px; }
  .login-modal-visual { width: 100%; padding: 28px 24px 20px; }
  .login-modal-visual h3 { font-size: 17px; margin: 12px 0 6px; }
  .login-modal-visual p { font-size: 13px; }
  .login-modal-content { padding: 22px 20px 24px; }
  .login-modal-content h2 { font-size: 18px; }
  .login-modal-subtitle { font-size: 13px; }
  .login-modal-form input[type="text"],
  .login-modal-form input[type="password"] { font-size: 14px; padding: 11px 14px 11px 40px; }
  .login-modal-form label { font-size: 12px; }
  .login-modal-row { font-size: 12px; }
}

/* ==================== PRELOADER ==================== */

@media (max-width: 480px) {
  .preloader-spinner { width: 80px; height: 80px; }
  .preloader-logo { width: 46px; height: 46px; }
  .preloader-credit { font-size: 12px; left: 16px; }
}

/* ==================== MISC / UTILITIES ==================== */

/* Wrap minimum padding di layar sangat kecil */
@media (max-width: 360px) {
  .wrap { padding: 0 12px; }
  h2 { font-size: clamp(18px, 5.5vw, 24px); }
  .btn-cta { padding: 10px 16px; font-size: 13px; }
}

/* Scroll indicator universal */
@media (max-width: 900px) {
  .scroll-down-indicator {
    bottom: 24px;
    font-size: 11px;
    text-align: center;
    max-width: 200px;
  }
  .scroll-down-indicator svg { width: 18px; height: 18px; }
}

/* Profile card */
@media (max-width: 900px) {
  .profile-card { flex-direction: column; align-items: flex-start; padding: 40px 32px; gap: 32px; }
  .profile-card-thumb { width: 180px; height: 220px; }
}

@media (max-width: 640px) {
  .profile-card { padding: 28px 20px; gap: 24px; }
  .profile-card-info h3 { font-size: 20px; }
  .profile-card-info p { font-size: 15px; }
  .profile-card-thumb { width: 140px; height: 180px; }
}

/* ==================== FIX: SIMETRIS KIRI-KANAN #TENTANG (index.html) ==================== */
@media (max-width: 1200px) {
  #tentang .wrap > div:last-child {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ============================================================
   TIPOGRAFI TERPADU — TEKS BODY & LEAD (basis 1920px = 22px)
   Satu skala turun sistematis untuk SEMUA paragraf sejenis di
   SEMUA halaman & section, dari desktop kecil sampai tablet:
     1920px (basis, di style.css) → 22px
     ≤1400px                      → 20px
     ≤1200px                      → 19px
     ≤900px                       → 18px
   Mobile (≤640/480/360) memakai skala terpisah di bawah
   (sudah final, tidak diubah).
   ============================================================ */

@media (max-width: 1400px) {
  .lead,
  .hero-mixed-lead,
  .why-card p,
  .why-item p,
  .step p,
  #cara-pembelian .step p,
  .access-step p,
  .legal-row span,
  .loc-addr,
  .panel-dark p,
  .panel-light p,
  .panel-row,
  .rmt-tentang-timeline-desc,
  .rmt-tentang-visimisi-text,
  #tim-marketing p,
  #bukti .tvid-copy p,
  #bukti .proof-check div,
  #faq .faq-a p,
  #faq .faq-q span,
  .contact-inline,
  .contact-inline span,
  .contact-address,
  .field-row label,
  .field-address-item span,
  .field-radio-option,
  .form-note,
  .form-captcha,
  .field-row input,
  .field-row textarea,
  .field-address-item input,
  #kontakForm .field label,
  #kontakForm .field input,
  #kontakForm .field textarea,
  .profile-card-info p,
  #mengapa .section-head p,
  .section-head .lead,
  .section-head p {
    font-size: 20px !important;
  }
}

@media (max-width: 1200px) {
  .lead,
  .hero-mixed-lead,
  .why-card p,
  .why-item p,
  .step p,
  #cara-pembelian .step p,
  .access-step p,
  .legal-row span,
  .loc-addr,
  .panel-dark p,
  .panel-light p,
  .panel-row,
  .rmt-tentang-timeline-desc,
  .rmt-tentang-visimisi-text,
  #tim-marketing p,
  #bukti .tvid-copy p,
  #bukti .proof-check div,
  #faq .faq-a p,
  #faq .faq-q span,
  .contact-inline,
  .contact-inline span,
  .contact-address,
  .field-row label,
  .field-address-item span,
  .field-radio-option,
  .form-note,
  .form-captcha,
  .field-row input,
  .field-row textarea,
  .field-address-item input,
  #kontakForm .field label,
  #kontakForm .field input,
  #kontakForm .field textarea,
  .profile-card-info p,
  #mengapa .section-head p,
  .section-head .lead,
  .section-head p {
    font-size: 19px !important;
  }
}

@media (max-width: 900px) {
  .lead,
  .hero-mixed-lead,
  .why-card p,
  .why-item p,
  .step p,
  #cara-pembelian .step p,
  .access-step p,
  .legal-row span,
  .loc-addr,
  .panel-dark p,
  .panel-light p,
  .panel-row,
  .rmt-tentang-timeline-desc,
  .rmt-tentang-visimisi-text,
  #tim-marketing p,
  #bukti .tvid-copy p,
  #bukti .proof-check div,
  #faq .faq-a p,
  #faq .faq-q span,
  .contact-inline,
  .contact-inline span,
  .contact-address,
  .field-row label,
  .field-address-item span,
  .field-radio-option,
  .form-note,
  .form-captcha,
  .field-row input,
  .field-row textarea,
  .field-address-item input,
  #kontakForm .field label,
  #kontakForm .field input,
  #kontakForm .field textarea,
  .profile-card-info p,
  #mengapa .section-head p,
  .section-head .lead,
  .section-head p {
    font-size: 18px !important;
  }
}

/* ============================================================
   NORMALISASI FONT MOBILE — biar semua isi konten/deskripsi/card
   konsisten, gak campur-campur ukurannya
   ============================================================ */

@media (max-width: 640px) {
  .lead,
  .hero-lead,
  .hero-mixed-lead,
  .rmt-tentang-hero-text .lead,
  .rmt-tentang-visimisi-text { font-size: 17px !important; line-height: 1.65 !important; }

  .step p,
  #tim-marketing p,
  #bukti .proof-check div,
  #faq .faq-a p { font-size: 18px !important; line-height: 1.65 !important; }

  .access-step p,
  .panel-dark p,
  .panel-light p,
  .panel-row { font-size: 16px !important; line-height: 1.55 !important; }

  .legal-row span,
  .rmt-tentang-timeline-desc,
  #bukti .tvid-copy p {
    font-size: 17px !important;
    line-height: 1.65 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .loc-addr,
  #cara-pembelian .step p { font-size: 17px !important; line-height: 1.5 !important; }

  .why-item p,
  .why-card p,
  .profile-card-info p { font-size: 17px !important; line-height: 1.65 !important; }

  .field-row label,
  .field-address-item span,
  .field-radio-option,
  .form-note,
  .form-captcha { font-size: 16px !important; line-height: 1.55 !important; }

  .contact-inline,
  .contact-inline span,
  .contact-address { font-size: 17px !important; line-height: 1.55 !important; }

  .field-row input,
  .field-row select,
  .field-row textarea,
  .field-address-item input { font-size: 16px !important; padding: 12px 14px !important; }

  #faq .faq-q span { font-size: 18px !important; }

  .why-card h4,
  .why-item h3 { font-size: 18px !important; }

  #mengapa .section-head p,
  .section-head .lead,
  .section-head p { font-size: 17px !important; }
}

@media (max-width: 480px) {
  .lead,
  .hero-lead,
  .hero-mixed-lead,
  .rmt-tentang-hero-text .lead,
  .rmt-tentang-visimisi-text { font-size: 16px !important; }

  .step p,
  #tim-marketing p,
  #bukti .tvid-copy p,
  #bukti .proof-check div,
  #faq .faq-a p { font-size: 18px !important; }

  .legal-row span,
  .rmt-tentang-timeline-desc { font-size: 16px !important; }
  .access-step p,
  .panel-dark p,
  .panel-light p,
  .panel-row { font-size: 16px !important; }

  .loc-addr,
  #cara-pembelian .step p { font-size: 16px !important; }

  .why-item p,
  .why-card p,
  .profile-card-info p { font-size: 16px !important; }

  .field-row label,
  .field-address-item span,
  .field-radio-option,
  .form-note,
  .form-captcha { font-size: 16px !important; }

  .contact-inline,
  .contact-inline span,
  .contact-address { font-size: 16px !important; }

  .why-card h4,
  .why-item h3 { font-size: 18px !important; }

  #mengapa .section-head p,
  .section-head .lead,
  .section-head p { font-size: 16px !important; }
}

/* Layar sangat kecil (≤360px) — turun sekali lagi dari basis normalisasi 480px di atas.
   Diletakkan SETELAH blok 480px supaya menang (spesifisitas sama-sama .lead + !important,
   jadi urutan penulisan yang menentukan). */
@media (max-width: 360px) {
  .lead { font-size: 15px !important; }
}

/* ============================================================
   UNIVERSAL MOBILE ALIGNMENT — SEMUA SECTION LURUS
   Dari Nav sampai Footer, sengaja ditaruh PALING BAWAH
   supaya jadi rule terakhir & otomatis menang di semua kondisi
   ============================================================ */

@media (max-width: 640px) {
  .why-item,
  .legal-row,
  .access-step,
  #cara-pembelian .step,
  .siteplan-info,
  .tvid-copy,
  .form,
  #tim-marketing .marketing-card,
  .video-block-copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 480px) {
  .why-item,
  .legal-row,
  .access-step,
  #cara-pembelian .step,
  .siteplan-info,
  .tvid-copy,
  .form,
  #tim-marketing .marketing-card,
  .video-block-copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 900px) {

  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #tentang .wrap:not(.rmt-tentang-hero) > div:first-child { margin-left: 0 !important; top: 0 !important; }
  #tentang .wrap > div:last-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .why-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .kontak-photo-frame { display: none !important; }
  .pesan-hero-text { margin-left: 0 !important; }
  .pesan-hero-decor { margin-left: 0 !important; }
  .rmt-tentang-timeline { padding-left: 0 !important; }
  .decor-kavling-corner { display: none !important; }
  .bg-ink .wrap, .siteplan-info-full .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================
   FAB (Hotline 24/7) — DIPERBESAR & DINAIKKAN, khusus mobile
   ============================================================ */
@media (max-width: 900px) {
  .fab-group {
    bottom: 90px !important;   /* naik dari ~16-24px */
    right: -10px !important;
  }
  .fab-toggle {
    width: 190px !important;   /* dari ~115-160px */
    height: 68px !important;   /* dari ~42-56px */
  }
  .fab-item {
    width: 200px !important;
    padding: 6px 16px !important;
  }
  .fab-label {
    font-size: 13px !important;
  }
  .fab-item-icon {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ============================================================
   SECTION "SELAMAT DATANG DI" (index.html) — khusus mobile
   1. Heading + logo dibikin center
   2. Padding atas dinaikkan (jarak dikurangi)
   3. Logo diperbesar
   ============================================================ */
@media (max-width: 900px) {
  #tentang {
    padding-top: 70px !important;
  }
  #tentang h2 {
    text-align: center !important;
  }
  .about-logo-mark {
    display: block !important;
    margin: 50px auto 50px !important;
    width: 90% !important;
    height: 170px !important;
    -webkit-mask-position: center center !important;
    mask-position: center center !important;
  }
}

@media (max-width: 640px) {
  #tentang { padding-top: 70px !important; }
  .about-logo-mark { height: 140px !important; }
}

@media (max-width: 480px) {
  #tentang { padding-top: 70px !important; }
  .about-logo-mark { height: 120px !important; }
}

/* ============================================================
   JARAK FOTO TIM → "MENGAPA KAMI" — dipersempit, khusus mobile
   ============================================================ */
@media (max-width: 900px) {
  #kenali-kami {
    padding-bottom: 70px !important;
  }
  #mengapa {
    padding-top: 70px !important;
  }
}

@media (max-width: 560px) {
  #mengapa {
    padding-top: 70px !important;
  }
}

/* ============================================================
   FIX GABUNGAN: Icon "Yang Kami Bawa", Company Profile, Kontak
   ============================================================ */
@media (max-width: 900px) {

  /* 1. Icon clipboard "Yang Kami Bawa" — naik & geser ke kanan */
  #dedikasi .decor-diag {
    top: 40px !important;
    right: 20px !important;
    width: 200px !important;
    max-width: 200px !important;
  }

  /* 2. Company Profile — semua di-center + font seragam 18px */
  .profile-card {
    align-items: center !important;
    text-align: center !important;
  }
  .profile-card-info {
    text-align: center !important;
  }
  .profile-card-thumb {
    margin: 20px auto !important;
  }
  .profile-card-info h2 {
    font-size: 25px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
  }
  .profile-card-info h3,
  .profile-card-info p {
    font-size: 18px !important;
    text-align: center !important;
  }

  /* 3. Kontak — jarak atas ditambah dari banner kuning */
  #kontak {
    padding-top: 100px !important;
  }

  /* 4. "PT. Rumata Amanah Propertindo" — samain ukuran ke 18px */
  .reveal-kontak-text p:not(.lead) {
    font-size: 18px !important;
  }

  /* 5. Phone & Email — balikin ke format 1 baris "Label : value" */
  .contact-inline {
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .contact-inline .contact-label {
    flex: 0 0 65px !important;
  }
  .contact-inline .contact-colon {
    display: inline !important;
    flex: 0 0 16px !important;
    text-align: left !important;
  }
}

@media (max-width: 640px) {
  #kontak {
    padding-top: 100px !important;
  }
}

/* ---------- Formulir Pertanyaan (kontak.html) — ukuran font & posisi tombol, khusus mobile ---------- */
@media (max-width: 900px) {
  #kontakForm .field label {
    font-size: 16px !important;
  }
  #kontakForm .field input,
  #kontakForm .field textarea {
    font-size: 16px !important;
  }
  #kontakForm button[type="submit"] {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    min-width: 200px;
  }
}

/* ---------- FIX FINAL: samakan font & center eyebrow "Video Dokumentasi" ---------- */
@media (max-width: 900px) {
  #bukti .tvid-copy .eyebrow { align-self: center !important; text-align: center !important; }
}
@media (max-width: 640px) {
  body #bukti .tvid-copy p,
  html body #bukti .tvid #bukti .tvid-copy p { font-size: 17px !important; line-height: 1.65 !important; }

  body #bukti .proof-check div,
  html body #bukti .proof-check div { font-size: 17px !important; }

  body #faq .faq-a p,
  html body #faq .faq-a p { font-size: 17px !important; }

  body #tim-marketing p,
  html body #tim-marketing p { font-size: 16px !important; }
}
@media (max-width: 480px) {
  body #bukti .tvid-copy p,
  html body #bukti .tvid #bukti .tvid-copy p { font-size: 16px !important; }

  body #bukti .proof-check div,
  html body #bukti .proof-check div { font-size: 16px !important; }

  body #faq .faq-a p,
  html body #faq .faq-a p { font-size: 16px !important; }

  body #tim-marketing p,
  html body #tim-marketing p { font-size: 16px !important; }
}

/* ---------- Virtual Survey (loc pages): rapatkan jarak, khusus mobile ---------- */
@media (max-width: 900px) {
  .wrap:has(.access-steps) > div:nth-child(1) > h2 {
    margin-bottom: 80px !important;
  }
  .wrap:has(.access-steps) .lead.reveal-kontak-text {
    margin-bottom: 40px !important;
  }
  .wrap:has(.access-steps) > .gallery {
    margin-bottom: 80px !important;
  }
}

/* ---------- Rapatkan jarak deskripsi hero ke stats (loc-quickstats), khusus mobile ---------- */
@media (max-width: 900px) {
  body .loc-hero-grid .loc-quickstats,
  html body .loc-hero-grid .loc-quickstats {
    margin-top: -10px !important;
  }
}

/* ---------- Lightbox siteplan — putar gambar landscape jadi full layar, khusus mobile ---------- */
@media (max-width: 900px) {
  #siteplanLightbox .lightbox-stage {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  #siteplanLightboxImg {
    transform: rotate(90deg) !important;
    width: 100vh !important;
    max-width: 100vh !important;
    height: auto !important;
    max-height: 100vw !important;
  }
  #siteplanLightboxClose {
    z-index: 20 !important;
  }
}

/* ---------- Panel Petunjuk & Legalitas (twocol-panel) — samakan font 16px, khusus mobile ---------- */
@media (max-width: 900px) {
  body .panel-row,
  html body .panel-dark .panel-row,
  html body .panel-light .panel-row {
    font-size: 16px !important;
  }
}

/* ---------- Spesifikasi Kavling (siteplan-info-full) — samakan font 16px & struktur padding, khusus mobile ---------- */
@media (max-width: 900px) {
  body .siteplan-info-full .siteplan-datarow span:first-child,
  html body .siteplan-info-full .siteplan-datarow span:last-child,
  body .siteplan-info-full .siteplan-info p,
  html body .siteplan-info-full .siteplan-info p {
    font-size: 16px !important;
  }
  .siteplan-info-full .siteplan-info {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ---------- Dokumentasi Lokasi (lokasi pages) — center judul & deskripsi 16px, khusus mobile ---------- */
@media (max-width: 900px) {
  #siteplan-interaktif ~ section h2 {
    text-align: center !important;
  }
  body #siteplan-interaktif ~ section p,
  html body #siteplan-interaktif ~ section p {
    font-size: 16px !important;
    text-align: center !important;
  }
}

@media (max-width: 640px) {
  .siteplan-info-full .siteplan-info {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------- Siteplan & Spesifikasi Kavling (lokasi pages) — center judul & atur jarak, khusus mobile ---------- */
@media (max-width: 900px) {
  #siteplan-interaktif h2 {
    text-align: center !important;
    margin-bottom: 50px !important;
  }
  #siteplan-interaktif > .wrap > p.lead {
    text-align: center !important;
    margin-bottom: 50px !important;
  }

  /* Toggle Gabungan/Harmoni 1/Harmoni 2 — center + jarak ke gambar */
  #siteplan-interaktif .siteplan-tabs {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 20px !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  #siteplan-interaktif .siteplan-tab {
    font-size: 14px !important;
    padding: 12px 20px !important;
    white-space: nowrap !important;
  }
  #siteplan-interaktif .siteplan-photo {
    padding-top: 80px !important;
  }

  /* Gambar siteplan — full lebar layar (bocor keluar .wrap) */
  #siteplan-interaktif .siteplan-shell {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* ---------- Fix scrollbar horizontal khusus tablet landscape (1024px-1366px) ---------- */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  html {
    overflow-x: hidden !important;
  }
}

/* ---------- Sembunyikan foto geodetic & kompas — SEMUA tampilan landscape/horizontal, plus tablet portrait 768-900px. Logo TETAP tampil (tidak disentuh). ---------- */
@media (min-width: 768px) and (max-width: 900px) and (orientation: portrait),
       (max-width: 900px) and (orientation: landscape) {
  #tentang .wrap:not(.rmt-tentang-hero) > div:first-child,
  #tentang .decor-bottom.decor-drop-diag {
    display: none !important;
  }
}

/* ============================================================
   ALIGN SEMUA WRAP KE LOGO NAV (32px) — semua halaman
   Logo nav selalu berjarak 32px dari tepi layar (lihat
   .site-header.scrolled .wrap). Section body pakai .wrap biasa
   yang padding-nya beda-beda tiap breakpoint (16/50/40/20px),
   makanya gak sejajar. Rule ini menyamakan ke 32px, berlaku
   dari 481px ke atas (desktop besar s.d. tablet). Mobile asli
   (≤480px) TIDAK disentuh, tetap pakai skala yang sudah ada.
   ============================================================ */
@media (min-width: 481px) {
  .wrap {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ============================================================
   FIX: Section "Yang Kami Bawa" (#dedikasi) selalu lebih lebar
   dari section lain — karena width:100vw ikut menghitung lebar
   scrollbar, beda dari section lain yang pakai 100%. Section
   ini gak butuh trik "kabur dari .wrap" karena memang gak ada
   di dalam .wrap manapun. Matikan trik itu KHUSUS di sini saja
   (tidak menyentuh .bg-ink di CTA banner / hero Pesan Kavling).
   ============================================================ */
#dedikasi .bg-ink {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   FIX: Menu mobile/tablet gak sejajar logo — karena logo punya
   margin-left:-14px sedangkan menu padding-left tetap 30px.
   Samakan ke 18px (32px wrap - 14px offset logo). Berlaku
   481px-900px: tablet besar s.d. tablet terkecil, termasuk
   desktop/laptop yang window-nya disempitkan ke landscape ≤900px.
   Mobile asli (≤480px) tidak disentuh (skala beda, wrap-nya juga beda).
   ============================================================ */
@media (max-width: 900px) and (min-width: 481px) {
  .nav-links {
    padding-left: 49px !important;
  }
}

/* Mobile asli (≤480px) — sejajarkan menu dengan logo juga */
@media (max-width: 480px) {
  .nav-links {
    padding-left: 36px !important;
  }
}

/* ============================================================
   FIX: Grid "Yang Kami Bawa" (#dedikasi) masih mepet ke tepi —
   wrap keduanya punya inline style padding:0 di HTML yang
   ternyata masih menang. Paksa selaras 32px dengan spesifisitas
   tinggi, khusus di dalam #dedikasi saja (tidak menyentuh .wrap
   section lain).
   ============================================================ */
body #dedikasi .wrap,
html body #dedikasi .wrap {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* ============================================================
   FIX: Icon clipboard "Yang Kami Bawa" nabrak teks di tablet
   landscape 901px-1024px (belum ke-cover rule ≤900px yang sudah
   ada). Naikkan posisi & perkecil sedikit biar ada jarak aman.
   ============================================================ */
@media (max-width: 1024px) and (min-width: 901px) {
  #dedikasi .decor-diag {
    top: 10px !important;
    right: 20px !important;
    width: 100px !important;
  }
}

/* ============================================================
   STANDARISASI HP LANDSCAPE (rebah) — beda dari tablet landscape
   Deteksi pakai max-height supaya HP direbahkan (tinggi pendek)
   tidak ke-detect sebagai tablet.
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-video-section { min-height: 100vh; padding: 0; align-items: flex-start; }
  .hero-video-content { padding-top: 150px; padding-bottom: 10px; }
  .hero-video-inner { padding: 0 20px; }
  .hero-eyebrow { font-size: 11px; margin-bottom: 6px; letter-spacing: .06em; }
  .hero-video-inner .hero-title-mixed { font-size: 20px !important; line-height: 1.25; margin-bottom: 10px; }
  .hero-mixed-lead { font-size: 14px !important; line-height: 1.5; margin-top: 4px; }
  .site-header .wrap { height: 56px; padding-right: 12px !important; }
  .brand-logo { width: 44px; height: 44px; }

  /* Sembunyikan hamburger & icon login mobile — ganti model jadi menu ala desktop */
  .nav-toggle,
  .nav-login-icon-mobile {
    display: none !important;
  }

  .nav-links {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin-left: 16px !important;
    width: auto !important;
    max-width: none !important;
    background: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
    z-index: auto !important;
  }
  .nav-links a {
    padding: 0 !important;
    width: auto !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    text-shadow: none !important;
  }
  .nav-mobile-bottom { display: none !important; }

  .nav-dropdown { width: auto !important; position: relative !important; }
  .nav-dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 140px !important;
    margin-top: 8px !important;
    padding: 4px 0 !important;
    background: var(--signal) !important;
    box-shadow: var(--shadow-md) !important;
    border-left: none !important;
  }
  .nav-dropdown.dropdown-open .nav-dropdown-menu {
    display: block !important;
  }
  .nav-dropdown-menu {
    pointer-events: none;
  }
  .nav-dropdown.dropdown-open .nav-dropdown-menu {
    pointer-events: auto !important;
  }
  .nav-links .nav-dropdown-menu a {
    color: #fff !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  .nav-dropdown-menu a:hover {
    background: #F5B301 !important;
    color: var(--ink) !important;
  }

  .nav-cta {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto !important;
  }
  .nav-cta .btn-cta { padding: 8px 16px !important; font-size: 12px !important; }
  .nav-login { width: 32px !important; height: 32px !important; }

  .fab-group {
    bottom: 16px !important;
    right: 12px !important;
  }
  .fab-toggle {
    width: 150px !important;
    height: 54px !important;
  }

  .fab-item {
    width: 150px !important;
    padding: 4px 12px !important;
  }
  .fab-label {
    font-size: 11px !important;
  }
  .fab-item-icon {
    width: 22px !important;
    height: 22px !important;
  }

    /* Tambah jarak foto tim di halaman Tentang Kami, khusus landscape HP */
  .rmt-tentang-hero {
    gap: 60px !important;
  }

  /* Samakan semua teks deskripsi/lead ke 14px, khusus landscape HP */
  .lead,
  .hero-lead,
  .hero-mixed-lead,
  .why-card p,
  .why-item p,
  .step p,
  #cara-pembelian .step p,
  .access-step p,
  .legal-row span,
  .loc-addr,
  .panel-dark p,
  .panel-light p,
  .panel-row,
  .rmt-tentang-timeline-desc,
  .rmt-tentang-visimisi-text,
  #tim-marketing p,
  #bukti .tvid-copy p,
  #bukti .proof-check div,
  #faq .faq-a p,
  #faq .faq-q span,
  .contact-inline,
  .contact-inline span,
  .contact-address,
  .field-row label,
  .field-address-item span,
  .field-radio-option,
  .form-note,
  .form-captcha,
  .profile-card-info p,
  #mengapa .section-head p,
  .section-head .lead,
  .section-head p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  #tentang .wrap:not(.rmt-tentang-hero) > div:first-child,
  #tentang .decor-bottom.decor-drop-diag {
    display: none !important;
  }

    /* Perkecil icon clipboard "Yang Kami Bawa", khusus landscape HP */
  #dedikasi .decor-diag {
    width: 200px !important;
    max-width: 200px !important;
    top: 40px !important;
    right: 12px !important;
  }

  /* Login modal — presisi khusus landscape HP (tinggi layar pendek) */
  .login-modal-overlay {
    align-items: center !important;
    overflow-y: auto !important;
    padding: 16px !important;
  }
  .login-modal-split {
    flex-direction: row !important;
    max-width: 560px !important;
  }
  .login-modal-visual {
    width: 38% !important;
    padding: 16px 14px !important;
  }
  .login-modal-visual .login-modal-logo {
    width: 40px !important;
    height: 40px !important;
  }
  .login-modal-visual h3 {
    font-size: 13px !important;
    margin: 8px 0 4px !important;
  }
  .login-modal-visual p {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .login-modal-content {
    padding: 16px 18px !important;
  }
  .login-modal-content h2 {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }
  .login-modal-subtitle {
    font-size: 10px !important;
    margin-bottom: 10px !important;
  }
  .login-modal-form label {
    font-size: 10px !important;
    margin-top: 6px !important;
  }
  .login-modal-form input[type="text"],
  .login-modal-form input[type="password"] {
    font-size: 11px !important;
    padding: 8px 12px 8px 34px !important;
  }
  .login-modal-row {
    font-size: 10px !important;
    margin: 8px 0 4px !important;
  }
  .login-modal-submit {
    margin-top: 10px !important;
    padding: 10px !important;
    font-size: 12px !important;
  }
}