/* ==========================================================================
   TMA MODERN v1 - lapisan override tampilan (fokus HP + polish)
   Dimuat PALING AKHIR setelah custom.css & responsive.css.
   Tidak mengubah PHP / database / JS / URL.
   Rollback: hapus 1 baris <link ... tma-modern.css> di media.php.
   ========================================================================== */

:root{
  --tma-blue:#0d70b7;
  --tma-navy:#072235;
  --tma-ink:#16222d;
  --tma-muted:#56677a;
  --tma-soft:#f3f7fa;
  --tma-line:#e4ebf1;
  --tma-radius:14px;
  --tma-shadow:0 8px 26px rgba(7,34,53,.09);
}

html{-webkit-text-size-adjust:100%}
#content img,.main-footer img{max-width:100%;height:auto}

/* ---------- Polish ringan (semua ukuran layar) ---------- */
.news-block-two .inner-box,
.featured-section-four .inner-box,
.team-member .inner-box{
  background:#fff;border-radius:var(--tma-radius);
  box-shadow:var(--tma-shadow);overflow:hidden;
}
.news-block-two .image img,
.services-block-three .image img,
.team-member .image img{border-radius:var(--tma-radius) var(--tma-radius) 0 0}
.services-block-three .inner-box{border-radius:var(--tma-radius);box-shadow:var(--tma-shadow)}
.theme-btn{border-radius:999px}
.text-gen,.t-lcontent,
.text-gen *,.t-lcontent *{line-height:1.75;text-align:left!important}

/* ==========================================================================
   TABLET & HP (<= 991px)
   ========================================================================== */
@media (max-width:991px){
  .lowest-content{min-height:0}
}

/* ==========================================================================
   HP (<= 767px)
   ========================================================================== */
@media (max-width:767px){

  /* sticky bekerja: pembungkus tidak boleh membuat scroll-container */
  .page-wrapper{overflow:clip!important}

  /* ----- Header: satu baris ringkas (logo kiri, hamburger kanan) ----- */
  .main-header{
    position:sticky;top:0;z-index:1000;
    background:#fff;box-shadow:0 2px 14px rgba(7,34,53,.12);
  }
  .header-top,
  .header-upper .upper-right{display:none!important}
  .header-upper{padding:8px 0}
  .header-upper .logo-outer{
    float:none!important;width:auto;text-align:left;
    padding:0 64px 0 0!important;
  }
  .header-upper .logo{padding:0;text-align:left}
  .header-upper .logo img{height:56px;width:auto;max-width:100%}

  .main-header .header-lower{position:static!important;background:#fff!important;height:auto!important}
  .main-header .header-lower .nav-outer{padding:0!important}
  .main-menu,
  .header-lower .nav-outer{position:static!important}

  .main-header .main-menu .navbar-header{
    position:absolute;left:auto!important;right:15px!important;top:14px!important;
    width:auto!important;margin:0;float:none;z-index:5;
  }
  .main-header .main-menu .navbar-header .navbar-toggle{
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0!important;margin:0!important;
    background:var(--tma-blue)!important;border:0;border-radius:12px;
  }
  .main-header .main-menu .navbar-toggle .icon-bar{
    display:block!important;width:20px!important;height:2px!important;
    margin:0!important;background:#fff!important;border-radius:2px;
  }
  .main-header .main-menu .navbar-toggle .icon-bar + .icon-bar{margin-top:5px!important}

  /* menu terbuka: panel di bawah bar, bisa discroll */
  .header-lower .navbar-collapse{
    max-height:calc(100vh - 80px);overflow-y:auto;padding:6px 15px 10px;
    border-top:1px solid var(--tma-line);background:#fff;
  }
  .header-lower .navbar-collapse:not(.in){padding:0;border:0}

  /* tautan grup perusahaan: muncul hanya saat menu dibuka */
  .more-options{display:none}
  .nav-outer:has(.navbar-collapse.in) .more-options{
    display:block;position:static;padding:10px 15px 14px;background:var(--tma-soft);
  }
  .more-options .btn{width:100%;text-align:left;font-weight:700}

  .sticky-header{display:none!important}

  /* ----- Slider: judul / subjudul / tombol tersusun atas-bawah ----- */
  #rev_slider_two > ul > li{
    display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;
    padding:24px 18px!important;box-sizing:border-box;
  }
  #rev_slider_two > ul > li .slotholder,
  #rev_slider_two > ul > li .tp-bgimg{position:absolute!important}
  #rev_slider_two > ul > li .tp-parallax-wrap,
  #rev_slider_two > ul > li .tp-loop-wrap,
  #rev_slider_two > ul > li .tp-mask-wrap,
  #rev_slider_two > ul > li .tp-caption{
    position:relative!important;left:auto!important;top:auto!important;
    right:auto!important;bottom:auto!important;transform:none!important;
    width:100%!important;max-width:100%!important;height:auto!important;
    margin:0!important;padding:0!important;display:block;
  }
  #rev_slider_two .tp-caption.tp-resizeme{margin-top:14px!important}
  #rev_slider_two .tp-caption.tp-resizeme a{margin:0 8px 8px 0;display:inline-block}
  .main-sliders .tp-caption{white-space:normal!important}
  .main-sliders h2.twhite,
  .main-sliders h2.tblack{
    font-size:24px!important;line-height:1.18em!important;
    padding-bottom:8px!important;white-space:normal!important;
  }
  .main-sliders .swhite,
  .main-sliders .sblack{font-size:14px!important;line-height:1.5em!important;white-space:normal!important}
  .main-sliders h2.tblack,.main-sliders .sblack{text-shadow:0 1px 10px rgba(255,255,255,.7)}
  .main-sliders h2.twhite,.main-sliders .swhite{text-shadow:0 2px 12px rgba(0,0,0,.5)}
  .main-sliders .btn-style-new{padding:10px 22px;font-size:12px;border-radius:999px}

  /* ----- Jarak section lebih rapat ----- */
  .welcome-section,.choose-section,.team-section,.clients-section{padding-top:40px;padding-bottom:30px}
  .video-section{padding:44px 0 28px}
  .head-gen,.head-gen-white{font-size:22px;line-height:1.25}
  .shead-gen{font-size:15px;line-height:1.5;color:var(--tma-muted)}
  .text-gen,.t-lcontent{font-size:15px}

  /* ----- Kartu values ----- */
  .news-block-two{margin-bottom:18px}
  .lowest-content{min-height:0;padding:14px 16px 6px;border-bottom:0}
  .j-lcontent{font-size:17px;margin-top:6px}
  .featured-section-four{margin-bottom:16px}
  .featured-section-four .inner-box{padding:20px 18px 8px 74px}

  /* ----- Kartu services: tombol Learn More bisa diakses di layar sentuh ----- */
  .services-block-three .inner-box{height:auto!important}
  .services-block-three .overlay-box{
    position:static!important;opacity:1!important;height:auto!important;
    background:none!important;background-image:none!important;
    padding:0 20px 20px;visibility:visible!important;
  }
  .services-block-three .overlay-box:before,
  .services-block-three .overlay-box:after{display:none!important}
  .services-block-three .overlay-inner{padding:0!important;position:static!important}
  .services-block-three .overlay-box .upper-box{display:none}
  .services-block-three .content-box{
    position:static!important;color:var(--tma-muted);font-size:14px;line-height:1.65;
  }
  .services-block-three .content-box p{color:var(--tma-muted);margin:0 0 12px}
  .b-learn{margin-top:0!important}
  .services-block-three{margin-bottom:20px}

  /* ----- Video ----- */
  .video-thumb{display:block}
  .play-btn{width:64px;height:64px}
  .head-gen-white{font-size:18px;margin-top:18px}

  /* ----- Tim ----- */
  .team-member{margin-bottom:22px}
  .team-member .overlay-box{opacity:1;background:transparent;top:auto;bottom:8px;height:auto}

  /* ----- Footer ----- */
  .main-footer .widgets-section{padding:40px 0 10px}
  .footer-widget{margin-bottom:28px}
  .footer-widget h2{font-size:20px}
  .footer-links li{margin-bottom:0}
  .footer-links li a{display:block;padding:9px 0}
  .newsletter-form input[type=text],
  .newsletter-form input[type=email],
  .newsletter-form textarea{width:100%;font-size:16px;border-radius:10px}
  .footer-bottom .column{text-align:center}
  .footer-nav{float:none}

  /* ----- Halaman dalam: breadcrumb, kontak, tabel coverage ----- */
  .page-info{padding:14px 0}
  .contact-section .form-column input,
  .contact-section .form-column textarea{font-size:16px;border-radius:10px}
  .contact-form .capca-2{flex-wrap:wrap}
  .contact-section .col-xs-3,.contact-section .col-xs-5{width:100%}
  .demo-table{max-width:100%;width:100%;margin:14px 0 18px}
  .map-section .p-4{padding:1rem!important}
  .scroll-to-top{right:14px;bottom:14px}
}

/* ==========================================================================
   v2 - margin lebih lega, elemen di tengah (HP <= 767px)
   ========================================================================== */
@media (max-width:767px){
  .auto-container{padding-left:20px!important;padding-right:20px!important}

  /* logo di tengah (diseimbangkan dengan hamburger di kanan) */
  .header-upper .logo-outer{padding:0 64px!important;text-align:center}
  .header-upper .logo{text-align:center}
  .main-header .main-menu .navbar-header{right:20px!important}

  /* judul section di tengah, jarak baris rapat */
  .choose-section .clearfix > .pull-left,
  .choose-section .clearfix > .pull-right{float:none!important;width:100%;text-align:center}
  .choose-section .clearfix > .pull-right{margin-top:12px}
  .shead-gen,.centered{text-align:center!important}
  .welcome-section h2,.choose-section h2,.team-section h2,.clients-section h2{font-size:22px!important;line-height:1.3!important;margin-bottom:6px}
  .text-gen,.t-lcontent,.text-gen *,.t-lcontent *{line-height:1.7}

  /* teks slider di tengah */
  #rev_slider_two > ul > li{align-items:center;text-align:center;padding:24px 22px!important}
  #rev_slider_two h2,#rev_slider_two span,#rev_slider_two .tp-caption{text-align:center!important}
  #rev_slider_two .tp-caption.tp-resizeme a{margin:0 5px 8px}

  .footer-widget .footer-logo,.footer-widget .social-icon-one{text-align:left}
}

/* ==========================================================================
   v3 - teks kartu Our Mission & Meet Our Team tidak lagi mepet (HP <= 767px)
   ========================================================================== */
@media (max-width:767px){
  .team-member .lower-content{padding:20px 20px 24px!important}
  .team-member .lower-content .text{margin-top:10px}
  .featured-section-four .inner-box{padding:20px 20px 10px 92px!important}
  .featured-section-four .icon-box{left:20px!important;top:22px!important}
}

/* ==========================================================================
   v4 - perbaikan desktop + warna nama tim (semua ukuran layar)
   ========================================================================== */
.team-member .lower-content h3,
.team-member .lower-content h3 a{color:var(--tma-ink)!important}
.team-member .designation{color:var(--tma-blue);font-weight:700}
.team-member .text{color:var(--tma-muted)!important}
.featured-section-four h3{color:var(--tma-ink)}
.lowest-content{border-bottom:0}

@media (min-width:768px){
  /* kartu tim: teks tidak menempel ke tepi kartu */
  .team-member .lower-content{padding:22px 24px 28px!important}
  .team-member .lower-content h3{margin:0 0 4px}
  .team-member .designation{margin-bottom:8px}
  .team-member .text{font-size:15px;line-height:1.7;margin-top:10px}
  .team-member .image img{width:100%;height:380px;object-fit:contain}

  /* Our Mission / Our Vision: ikon & teks punya ruang di dalam kartu */
  .featured-section-four .inner-box{padding:26px 26px 18px 104px}
  .featured-section-four .inner-box .icon-box{left:26px!important;top:28px!important}
  .featured-section-four h3{margin-bottom:10px}

  /* kartu values */
  .lowest-content{padding:18px 20px 22px}
}