/* =======================================================================
   Office Web & Mobile page tweaks (scoped) - MERGED (deduped)
   - Base rules are shared across both versions
   - Extra fixes from CSS #2 are included (image + width + utilities)
   - Unique tweak from CSS #1 (turunkan judul besar) is preserved
   ======================================================================= */

/* Base */
.m365-webmobile .elementor-section { margin: 0; }

/* Hide template sections we don't need */
.m365-webmobile .elementor-section[data-id="428338f"] { display: none !important; }
.m365-webmobile .elementor-section[data-id="45ee4de0"] { display: none !important; }

/* Main section spacing + alignment */
.m365-webmobile .elementor-section[data-id="50069f43"]{
  padding-top: 24px !important;
  padding-bottom: 44px !important;
}
.m365-webmobile .elementor-section[data-id="50069f43"] .elementor-container{
  align-items: flex-start !important;
}

/* ==========================================================
   FIX GAP setelah page heading (lebih aman, fluid)
   ========================================================== */
.m365-webmobile{
  padding-top: 0 !important;
  margin-top: clamp(-35px, -2.5vw, -12px) !important;
}

/* Mobile: jangan pakai negative margin */
@media (max-width: 767px){
  .m365-webmobile{ margin-top: 0 !important; }
}

/* ==========================================================
   Intro (atas sebelum 2 kolom)
   ========================================================== */
.m365-webmobile .m365-intro-wide{
  max-width: 980px;
  margin: 6px auto 18px;
  text-align: center;
  padding: 0 14px;
}
.m365-webmobile .m365-kicker{
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.6;
  color: #2f2f2f;
  margin: 0 0 10px;
}
.m365-webmobile .m365-subkicker{
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: #5a5a5a;
  margin: 0;
}

/* ==========================================================
   Typography (kolom kanan)
   ========================================================== */
.m365-webmobile .m365-lead{
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 14px 0;
}

.m365-webmobile .etheme-advanced-headline{
  font-size: clamp(30px, 3.4vw, 48px) !important;
  line-height: 1.10 !important;
  margin: 0 0 10px !important;
}
.m365-webmobile .etheme-advanced-headline .etheme-a-h-text{
  display: inline-block;
  margin-left: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 16px !important;
  vertical-align: middle;
}

.m365-webmobile .elementor-divider{ margin: 14px 0 18px !important; }

/* ==========================================================
   Highlights list
   ========================================================== */
.m365-webmobile .m365-highlights{
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}
.m365-webmobile .m365-highlights li{
  position: relative;
  padding-left: 28px;
  margin: 12px 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: #2f2f2f;
}
.m365-webmobile .m365-highlights li:before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  opacity: .8;
}

.m365-webmobile .m365-summary{
  margin: 14px 0 0 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: #333;
}
.m365-webmobile .m365-summary em{
  font-style: italic;
  font-weight: 700;
  color: #222;
}

/* ==========================================================
   Placeholder card (LEFT)
   ========================================================== */
.m365-webmobile .m365-placeholder{
  width: 100%;
  min-height: 330px;
  border-radius: 18px;
  background: #f6f7f9;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 34px 28px;
}
.m365-webmobile .m365-placeholder .ph-inner{ text-align: center; max-width: 460px; }
.m365-webmobile .m365-placeholder .ph-title{
  font-size: clamp(20px, 1.6vw, 22px);
  font-weight: 900;
  margin: 0 0 10px;
  color: #222;
}
.m365-webmobile .m365-placeholder .ph-desc{
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.75;
  color: #555;
  margin: 0;
}
.m365-webmobile .m365-placeholder .ph-hint{
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: #666;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  padding: 8px 12px;
  border-radius: 999px;
}

/* ==========================================================
   Feature card
   ========================================================== */
.m365-webmobile .m365-feature-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.m365-webmobile .m365-feature-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(74,108,247,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 900;
  color: #4a6cf7;
  font-size: 18px;
}
.m365-webmobile .m365-feature-title{
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 900;
  margin: 0 0 6px 0;
  color: #1f1f1f;
}
.m365-webmobile .m365-feature-desc{
  font-size: clamp(15px, 1.1vw, 16px);
  margin: 0;
  line-height: 1.65;
  color: #4a4a4a;
}

/* =======================================================================
   RESPONSIVE: Layout 2 kolom -> 1 kolom (scoped ke section 50069f43)
   ======================================================================= */
@media (max-width: 767px){
  .m365-webmobile .m365-intro-wide{
    margin: 10px auto 16px;
    text-align: left;
    padding: 0 10px;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-container{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-column{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .m365-webmobile .etheme-advanced-headline{
    line-height: 1.12 !important;
  }
  .m365-webmobile .etheme-advanced-headline .etheme-a-h-text{
    display: inline-block;
    margin: 10px 0 0 0;
  }

  .m365-webmobile .m365-placeholder{
    min-height: 200px;
    padding: 22px 18px;
  }

  .m365-webmobile .m365-feature-card{
    padding: 16px;
    gap: 12px;
  }
}

/* Tablet (<=991px) */
@media (max-width: 991px){
  .m365-webmobile .m365-placeholder{ min-height: 240px; }
}

/* Very small phones (<=420px) */
@media (max-width: 420px){
  .m365-webmobile .m365-placeholder .ph-hint{
    font-size: 12px;
    padding: 7px 10px;
  }
  .m365-webmobile .m365-highlights li{
    padding-left: 26px;
  }
}

/* ==========================================================
   MOBILE FIX: urutan kolom + hilangkan blank tinggi kosong
   ========================================================== */
@media (max-width: 767px){

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-container{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-column:nth-child(1){
    order: 2 !important;
  }
  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-column:nth-child(2){
    order: 1 !important;
  }

  .m365-webmobile .m365-placeholder{
    min-height: auto !important;
    padding: 18px 16px !important;
  }
}

/* ==========================================================
   TYPOGRAPHY: biar lebih “aesthetic” & enak dibaca
   ========================================================== */
.m365-webmobile .etheme-advanced-headline{
  font-weight: 900 !important;
  letter-spacing: -0.6px !important;
  text-wrap: balance;
  margin-bottom: 14px !important;
}

@media (max-width: 767px){
  .m365-webmobile .etheme-advanced-headline{
    font-size: 28px !important;
    line-height: 1.18 !important;
    text-align: left !important;
    padding: 0 10px !important;
  }

  .m365-webmobile .etheme-advanced-headline .etheme-a-h-text{
    margin: 8px 0 0 0 !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
  }
}

.m365-webmobile .m365-lead{
  max-width: 42ch;
  margin: 0 auto 12px !important;
  color: #3b3b3b;
}
.m365-webmobile .elementor-widget-text-editor{
  padding: 0 10px;
}
.m365-webmobile .elementor-widget-text-editor p{
  line-height: 1.85 !important;
  font-size: 15.5px !important;
  color: #4a4a4a !important;
}

/* ==========================================================
   MOBILE: kasih "page gutters" (padding kiri/kanan)
   ========================================================== */
@media (max-width: 767px){

  .m365-webmobile .elementor-section[data-id="50069f43"]{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-widget{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"]
  :is(.etheme-advanced-headline, .elementor-widget-text-editor, .m365-highlights, .m365-summary){
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .m365-webmobile .elementor-widget-text-editor p{
    line-height: 1.85 !important;
  }
}

@media (max-width: 420px){
  .m365-webmobile .elementor-section[data-id="50069f43"]{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ==========================================================
   DESKTOP/TABLET: jangan disempitin, biar isi kolom kanan penuh
   ========================================================== */
@media (min-width: 768px){
  .m365-webmobile .m365-lead{
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .m365-webmobile .elementor-widget-text-editor{
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .m365-webmobile .elementor-widget-text-editor p{
    max-width: none !important;
  }
}

/* =======================================================================
   ✅ FIX UTAMA (FINAL): Turunin konten kiri + jarak antar kolom (DESKTOP/TABLET)
   ======================================================================= */
@media (min-width: 768px){

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-container{
    display: flex !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-column{
    transform: none !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"]
  .elementor-column:first-child > .elementor-widget-wrap{
    padding-top: 10px !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-column:first-child{
    padding-right: 12px !important;
  }
  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-column:last-child{
    padding-left: 12px !important;
  }
}

/* =======================================================================
   ✅ FIX GAMBAR: kotak/card fixed, gambar ngisi kotak
   ======================================================================= */
.m365-webmobile .m365-placeholder{
  height: 330px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
}
.m365-webmobile .m365-placeholder img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
@media (max-width: 991px){
  .m365-webmobile .m365-placeholder{ height: 240px !important; }
}
@media (max-width: 767px){
  .m365-webmobile .m365-placeholder{ height: 200px !important; }
}

/* =======================================================================
   ✅ FIX LEBAR: bikin kolom kiri lebih lebar biar kotak gambar nggak cimplik
   ======================================================================= */
@media (min-width: 992px){

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-container > .elementor-column:nth-child(1){
    flex: 0 0 50% !important;
    max-width: 60% !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-container > .elementor-column:nth-child(2){
    flex: 0 0 50% !important;
    max-width: 45% !important;
  }

  .m365-webmobile .elementor-section[data-id="50069f43"] .elementor-container > .elementor-column:nth-child(1) .elementor-column{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* =========================
   Utility spacing (mt-10/20/30)
   ========================= */
.m365-webmobile .mt-10{ margin-top: 10px !important; }
.m365-webmobile .mt-20{ margin-top: 20px !important; }
.m365-webmobile .mt-30{ margin-top: 30px !important; }

/* =======================================================================
   ✅ UNIQUE (from CSS #1): Turunkan judul besar saja (yang dilingkari)
   ======================================================================= */
@media (min-width: 768px){
  .m365-webmobile
  .elementor-section[data-id="50069f43"]
  .elementor-column:last-child
  h2.etheme-advanced-headline{
    margin-top: 22px !important; /* atur naik-turun di sini */
  }
}