/* ======================================================================
   THEME TOKENS & VARIABLES (single source of truth)
   ====================================================================== */
:root{
  --tsu-blue:#1F3AA6;
  --tsu-blue-700:#162C7A;
  --tsu-orange:#F1871A;
  --tsu-orange-700:#DA7410;
  --tsu-bg:#F7F9FC;
  --tsu-text:#111827;
  --tsu-muted:#6B7280;
  --tsu-divider:#E5E7EB;
  --tsu-radius:12px;
  --tsu-shadow:0 10px 25px rgba(0,0,0,.08);
  --nav-height:72px;

  /* Typography scale */
  --h1-size:clamp(2rem,4vw,3rem);         /* hero title & h1 */
  --h2-size:clamp(1.8rem,3vw,2.2rem);
  --lead-size:clamp(1rem,1.6vw,1.125rem); /* penjelasan/lead seragam */
  --text-size:1rem;
  --h1-weight:600;        /* default heading (nanti dioverride anti-bold) */
  --h2-weight:600;
  --lead-weight:400;
  --heading-line:1.2;
  --lead-line:1.6;
}

/* ======================================================================
   GLOBAL BASE & TYPOGRAPHY
   ====================================================================== */
html,body{height:100%;}
body{
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:var(--text-size);
  color:var(--tsu-text);
  background:var(--tsu-bg);
  padding-top:var(--nav-height); /* kompensasi navbar fixed */
}
p{font-weight:400;color:var(--tsu-muted);font-size:0.95rem;line-height:1.6;}
b,strong,.fw-bold{font-weight:600;}

h1,h2,h3,h4,h5,h6,.brand-word{
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--tsu-text);
  letter-spacing:0;
  font-weight:600;
}
h1,.hero-title{
  font-size:var(--h1-size);
  font-weight:var(--h1-weight);
  line-height:var(--heading-line);
  margin:0 0 1rem 0;
  letter-spacing:-0.01em;
}
h2{font-size:var(--h2-size);line-height:1.3;margin:0 0 .75rem 0;color:var(--tsu-orange);}

/* span berwarna di judul */
.hero-title .o{color:var(--tsu-orange);font-weight:inherit;}

/* Utilitas: semua “penjelasan” sama ukuran */
.u-lead,.hero-lead,.section-lead,.service-desc,.card-text.lead,.text-lead,.project-caption{
  font-size:var(--lead-size) !important;
  line-height:var(--lead-line) !important;
  font-weight:var(--lead-weight) !important;
  color:var(--tsu-muted) !important;
  margin:0 0 1rem 0;
}

/* ======================================================================
    NAVIGATION BAR (FIXED)
   ====================================================================== */
#mainNavbar {
    position: fixed; top: 0; left: 0; right: 0;
    background: #fff;
    box-shadow: var(--tsu-shadow);
    z-index: 1030;
    transition: top .25s ease;
}

.navbar-brand img { max-height: 58px; }

.navbar-nav .nav-link {
    font-size: 14px;
    color: #344054 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 12px 14px;
    position: relative;
    transition: color .2s ease;
}

/* KODE YANG HILANG: Menambahkan kembali struktur garis bawah */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    height: 2px;
    background: transparent;
    transition: background-color .2s;
}

/* 1. Saat kursor di atas link (HOVER) */
.navbar-nav .nav-link:hover {
    color: var(--tsu-orange) !important; /* Teks menjadi oranye */
}
.navbar-nav .nav-link:hover::after {
    background: var(--tsu-orange); /* Garis bawah menjadi oranye */
}

/* 2. Saat link aktif/diklik (ACTIVE) */
.navbar-nav .nav-link.active {
    color: var(--tsu-blue) !important; /* Teks menjadi biru */
}
.navbar-nav .nav-link.active::after {
    background: var(--tsu-blue); /* Garis bawah menjadi biru */
}

.navbar .dropdown-toggle::after { display: none !important; }

.dropdown-mega {
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--tsu-radius);
    box-shadow: var(--tsu-shadow);
}
.navbar .dropdown .dropdown-menu.dropdown-mega {
    left: 50% !important; right: auto !important;
    transform: translate(-50%, 10px); margin-top: 0 !important;
}

.dropdown-mega .list-group { display: inline-block; width: max-content; margin: 0 auto; text-align: left; }
.dropdown-mega .list-group-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border: 0; border-radius: 8px;
    transition: background .15s ease, transform .12s ease;
}

/* KODE BARU: Menambahkan transisi pada ikon dan teks submenu */
.dropdown-mega .list-group-item i,
.dropdown-mega .list-group-item span {
    transition: color 0.2s ease;
}
.dropdown-mega .list-group-item i { font-size: .95rem; line-height: 1; color: var(--tsu-blue); }
.dropdown-mega .list-group-item span { font-size: .9rem; color: #3A3F45; }

/* KODE BARU: Efek hover untuk submenu */
.dropdown-mega .list-group-item:hover {
    background: #F4F7FF;
    transform: translateY(-1px);
}
.dropdown-mega .list-group-item:hover i,
.dropdown-mega .list-group-item:hover span {
    color: var(--tsu-orange);
}

.navbar .dropdown .dropdown-menu.dropdown-mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; display: block; }
.navbar .dropdown-toggle .bi-chevron-down { font-size: .85rem; margin-left: .3rem; }

@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu { display: block; }
}
@media (max-width: 991.98px) {
    .navbar .navbar-collapse { overflow: visible; }
    .navbar .dropdown .dropdown-menu.dropdown-mega { position: static !important; transform: none !important; min-width: 100%; box-shadow: none; display: none; }
    .navbar .dropdown.show .dropdown-menu.dropdown-mega,
    .navbar .dropdown-menu.show { display: block !important; }
    .dropdown-mega .list-group { width: 100%; }
    .dropdown-mega .list-group-item { padding: 10px 12px; }
    .dropdown-mega .list-group-item span { font-size: .95rem; }
    .dropdown-mega .list-group-item i { font-size: 1.02rem; }
}
/* ======================================================================
   GLOBAL BUTTONS
   ====================================================================== */
.btn-brand{
  --bs-btn-bg:var(--tsu-blue);
  --bs-btn-border-color:var(--tsu-blue);
  --bs-btn-hover-bg:var(--tsu-blue-700);
  --bs-btn-hover-border-color:var(--tsu-blue-700);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
  border-radius:10px; padding:.55rem 1rem; font-weight:600;
}
.btn-outline-brand{
  --bs-btn-color:var(--tsu-blue);
  --bs-btn-border-color:var(--tsu-blue);
  --bs-btn-hover-bg:var(--tsu-blue);
  --bs-btn-hover-color:#fff;
  border-radius:10px; padding:.55rem 1rem; font-weight:600;
}
.badge-brand{background:var(--tsu-orange); color:#fff;}

/* ======================================================================
   INDEX.PHP — HERO
   ====================================================================== */
#hero{background:#fff;}
.hero-wrap{
  display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;
}
.hero-cta{margin-top:1.75rem;}
.hero-media{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1rem;
}
.hm{position:relative; overflow:hidden; border-radius:18px; background:#f3f4f6;}
.hm img{width:100%; height:100%; object-fit:cover; display:block;}
.hm:nth-child(1),.hm:nth-child(2){grid-column:span 3; aspect-ratio:16/10;}
.hm:nth-child(3),.hm:nth-child(4),.hm:nth-child(5){grid-column:span 2; aspect-ratio:4/3;}

@media (min-width:992px){
  .hero-wrap{grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem);}
}

/* ======================================================================
   INDEX.PHP — OUR SERVICES
   ====================================================================== */
#services .bi{font-size:2.5rem; color:var(--tsu-blue) !important;}

/* ======================================================================
   INDEX.PHP — SELECTED PROJECTS
   ====================================================================== */
#selected-projects{background:#fff;}
.sp-sticky{position:sticky; top:calc(var(--nav-height) + 20px);}
.project-list{padding-top:.25rem;}
.project-link{color:inherit; display:block; margin-bottom:22px; text-decoration:none !important;
  transition:transform .2s ease-in-out, box-shadow .2s ease-in-out;}
.project-link:hover{transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,.1);}
.project-link:last-child{margin-bottom:0;}
.project-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:var(--tsu-shadow); border:1px solid var(--tsu-divider);
}
.project-card img,.project-img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; object-position:50% 85%;
  border-radius:12px 12px 0 0; display:block;
}
@media (max-width:991.98px){
  .project-card img,.project-img{aspect-ratio:4/3; object-position:center;}
  .sp-sticky{position:static; margin-bottom:.5rem;}
}

.project-caption {
    padding: 1.25rem !important; /* DIPAKSA: Memberi ruang di sekeliling teks */
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tsu-muted);
}

/* ======================================================================
   INDEX.PHP — CLIENTS
   ====================================================================== */
#clients .client-box{
  background:#fff; border:1px solid var(--tsu-divider);
  border-radius:12px; padding:24px; height:140px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
#clients .client-box:hover{transform:translateY(-4px); box-shadow:var(--tsu-shadow);}
#clients .client-box img{
  display:block; width:auto; max-width:85%; height:auto;
  max-height:clamp(80px,9vw,140px); object-fit:contain;
}
@media (min-width:992px){
  #clients .client-box{height:170px;}
  #clients .client-box img{max-height:clamp(100px,8vw,160px);}
}
@media (min-width:1200px){
  #clients .client-box{height:190px;}
  #clients .client-box img{max-height:clamp(110px,7vw,180px);}
}

/* ======================================================================
   CTA BANNER
   ====================================================================== */
#cta-banner{
  background-image:linear-gradient(90deg,#1d2b64,#f88c2b);
  background-size:cover; background-position:center; color:#fff;
}
.cta-title{font-size:clamp(2rem,4vw,2.8rem); font-weight:600; color:#fff;}
.btn-cta.btn-outline-light{
  border-color:rgba(255,255,255,.9); color:#fff; border-radius:50px;
  padding:10px 24px; font-weight:500; text-transform:uppercase; letter-spacing:.5px;
  transition:all .3s ease;
}
.btn-cta.btn-outline-light:hover{
  background:#fff; color:var(--tsu-blue-700); border-color:#fff; transform:translateY(-2px);
}

/* ======================================================================
   ABOUT.PHP — GROUP COMPANIES (single, no duplicates)
   ====================================================================== */
#group-companies .client-box{
  background:#fff; border:1px solid var(--tsu-divider); border-radius:12px;
  padding:24px; height:180px; display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
#group-companies .client-box:hover{transform:translateY(-3px); box-shadow:var(--tsu-shadow);}
#group-companies .client-box img{
  display:block; width:auto; height:auto; max-width:85%;
  max-height:clamp(90px,9vw,160px); object-fit:contain;
}
@media (min-width:992px){
  #group-companies .client-box{height:185px;}
  #group-companies .client-box img{max-height:clamp(110px,8vw,175px);}
}
@media (min-width:1200px){
  #group-companies .client-box{height:200px;}
  #group-companies .client-box img{max-height:clamp(120px,7vw,190px);}
}

/* ======================================================================
   ABOUT — TEKS & LIST
   ====================================================================== */
.about-title{
  font-family:'DM Sans',sans-serif;
  color:var(--tsu-orange);
  line-height:1.2;
  font-weight:600;
}
.about-imgcard img{object-fit:cover;}
.about-list .about-bullet{
  flex:0 0 28px; width:28px; height:28px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#FFF3E6; color:var(--tsu-orange-700);
  font-size:14px; line-height:1;
}


/* ======================================================================
   ABOUT — HERO ANIMATED BACKGROUND (blob lebih kecil & cepat)
   ====================================================================== */
#hero-about{
  min-height:100vh; display:grid; place-items:center; position:relative;
  overflow:hidden; color:#fff; background-color:#0c102a;
}
#hero-about .hero-content{grid-area:1/1; z-index:2; text-align:center; padding:2rem;}
.animated-background{grid-area:1/1; position:relative; width:100%; height:100%;}
.animated-background > div{position:absolute; border-radius:50%; filter:blur(40px);}
.blob-1{width:300px; height:300px; background:var(--tsu-blue); animation:moveBlob1 6s infinite linear;}
.blob-2{width:350px; height:350px; background:var(--tsu-orange); animation:moveBlob2 8s infinite linear;}
.blob-3{width:250px; height:250px; background:var(--tsu-blue-700); animation:moveBlob3 7s infinite linear;}
@keyframes moveBlob1{
  0%{top:-50px; left:-100px; transform:rotate(0);}
  50%{top:100px; left:300px; transform:rotate(180deg);}
  100%{top:-50px; left:-100px; transform:rotate(360deg);}
}
@keyframes moveBlob2{
  0%{bottom:-100px; right:-150px; transform:scale(1);}
  50%{bottom:200px; right:100px; transform:scale(1.2);}
  100%{bottom:-100px; right:-150px; transform:scale(1);}
}
@keyframes moveBlob3{
  0%{top:60%; left:50%; transform:translate(-50%,-50%) skew(0);}
  50%{top:40%; left:40%; transform:translate(-40%,-60%) skew(-10deg,-5deg);}
  100%{top:60%; left:50%; transform:translate(-50%,-50%) skew(0);}
}
#hero-about .hero-about-title{
  font-family:'DM Sans',sans-serif; font-weight:600; color:#fff;
  font-size:clamp(2.2rem,5vw,3.5rem); margin-bottom:1rem;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}
#hero-about .hero-about-subtitle{
  font-size:1.1rem; color:rgba(255,255,255,.9); max-width:650px; margin-inline:auto;
  text-shadow:0 1px 5px rgba(0,0,0,.3);
}

/* ======================================================================
   GLOBAL HORIZONTAL PORTFOLIO (scroll-snap)
   ====================================================================== */
.portfolio-wrap{position:relative;}
.portfolio-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc(50% - 12px);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px;
}
.pf-card{
  scroll-snap-align:start; background:#fff; border:1px solid var(--tsu-divider);
  border-radius:18px; overflow:hidden; margin:0; min-width:260px; box-shadow:var(--tsu-shadow);
}
.pf-card img{
  display:block; width:100%; height:220px; object-fit:cover;
  border-bottom:1px solid var(--tsu-divider); border-radius:18px 18px 0 0;
}
.pf-card figcaption{padding:10px 12px 14px; text-align:center; font-weight:600; color:#111;}
.pf-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px;
  border:0; border-radius:999px; background:#fff; box-shadow:var(--tsu-shadow);
  display:none; align-items:center; justify-content:center; z-index:2;
}
.pf-prev{left:-12px;} .pf-next{right:-12px;}
.pf-nav i{font-size:1rem;}
@media (min-width:992px){.portfolio-track{grid-auto-columns:calc(33.333% - 12px);} .pf-nav{display:inline-flex;}}
@media (max-width:575.98px){.portfolio-track{grid-auto-columns:92%;} .pf-card img{height:200px;}}
/* Scrollbar */
.portfolio-track::-webkit-scrollbar{height:8px;}
.portfolio-track::-webkit-scrollbar-thumb{background:#ddd; border-radius:8px;}

/* ======================================================================
   GLOBAL HORIZONTAL CARDS (pf-h*)
   ====================================================================== */
.pf-hwrap{position:relative;}
.pf-htrack{
  display:grid; grid-auto-flow:column; grid-auto-columns:80%;
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 2px 8px;
}
.pfh-card{
  scroll-snap-align:start; background:#fff; border:1px solid var(--tsu-divider);
  border-radius:18px; overflow:hidden; min-width:260px; box-shadow:var(--tsu-shadow);
}
.pfh-card img{display:block; width:100%; height:220px; object-fit:cover;}
.pfh-card figcaption{padding:10px 12px 14px; text-align:center; font-weight:600; color:#111;}
.pfh-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px;
  border:0; border-radius:999px; background:#fff; box-shadow:var(--tsu-shadow);
  display:none; align-items:center; justify-content:center; z-index:2;
}
.pfh-prev{left:-12px;} .pfh-next{right:-12px;}
@media (min-width:768px){.pf-htrack{grid-auto-columns:calc(50% - 12px);}}
@media (min-width:992px){.pf-htrack{grid-auto-columns:calc(33.333% - 12px);} .pfh-nav{display:inline-flex;}}
@media (min-width:1200px){.pf-htrack{grid-auto-columns:calc(25% - 12px);}}
.pf-htrack::-webkit-scrollbar{height:8px;}
.pf-htrack::-webkit-scrollbar-thumb{background:#ddd; border-radius:8px;}

/* ======================================================================
    FOOTER (Cleaned up with Full Hover Effects)
   ====================================================================== */

footer {
    background-color: #03015a;
    color: rgba(255, 255, 255, 0.7);
}

footer h6 {
    color: #ffffff;
}

/* Gaya dasar untuk semua teks & link di footer */
footer p, footer small, footer .list-unstyled a, footer .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* === Ikon === */
/* Gaya dasar untuk SEMUA ikon (kontak kiri & sosial media) */
footer .col-md-5 .bi,
footer .social-icons .bi {
    color: var(--tsu-orange); /* Dibuat oranye agar menonjol */
    transition: transform 0.2s ease-out, color 0.2s ease-out; /* Transisi untuk animasi */
}

/* Efek hover untuk SEMUA ikon */
footer .col-md-5 a:hover .bi, /* Target ikon saat link-nya di-hover */
footer .social-icons .bi:hover {
    transform: translateY(-3px);
    color: #ffffff; /* Berubah menjadi putih saat hover */
}


/* === Link Teks === */
/* Menyiapkan transisi untuk semua link teks */
footer .list-unstyled a,
footer .col-md-5 a {
    transition: color 0.2s ease-in-out;
}

/* Efek hover untuk semua link teks (navigasi & info kontak) */
footer .list-unstyled a:hover,
footer .col-md-5 a:hover {
    color: #ffffff !important;
}


/* === Tombol === */
footer .btn-orange,
footer .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    font-weight: 500;
}
footer .btn-orange:hover,
footer .btn-outline-light:hover {
    background: #ffffff;
    color: #343A40;
}

/* === Spacing (tidak berubah) === */
footer .col-md-5 small {
    display: flex;
    align-items: center;
    margin-bottom: 1rem !important;
    line-height: 1.5;
}
footer .col-md-5 small .bi {
    margin-right: 0.75rem;
}
footer .col-md-3 li {
    margin-bottom: 1rem;
}

/* ======================================================================
   >>> OVERRIDE ANTI-BOLD UNTUK JUDUL & SUBJUDUL <<<
   Letakkan di PALING BAWAH file agar mengalahkan Bootstrap/komponen lain
   ====================================================================== */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.hero-title,
.section-title,
.about-title,
.cta-title,
.card-title,
#hero-project-page .hero-title,
#hero-about .hero-about-title {
  font-weight: 400 !important;
}


/* ======================================================================
    PROJECT PAGE HERO (Final Adjustments)
   ====================================================================== */

#hero-project-page {
    /* BARU: Memberi jarak dari menu navigasi */
    margin-top: 2rem;

    /* Aturan yang sudah ada (tidak berubah) */
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    min-height: 450px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
    border-radius: 24px;
}

#hero-project-page .hero-background-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* DIHAPUS: filter: blur(2px); */
    z-index: 1;
}

#hero-project-page .hero-overlay {
    position: absolute;
    inset: 0;
    /* DIUBAH: Overlay sedikit lebih gelap agar teks tetap terbaca */
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 2;
}

/* Sisa aturan di bawah ini tidak perlu diubah */
#hero-project-page .hero-content {
    position: relative;
    z-index: 3;
}

#hero-project-page .hero-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    color: white;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

#hero-project-page .hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 650px;
    margin: 0 auto;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
#hero-project-page .hero-background-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pastikan baris "filter: blur(2px);" SUDAH DIHAPUS dari sini */
    z-index: 1;
}


/* ======================================================================
    PAGE: CONTACT US (Smaller Boxes)
   ====================================================================== */

.contact-section-title {
    color: var(--tsu-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.contact-section-subtitle {
    color: var(--tsu-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.8;
}

/* Kotak pembungkus untuk setiap item kontak */
.contact-item-box {
    padding: 1.5rem; /* DIKECILKAN: dari 2rem menjadi 1.5rem */
    height: 100%;
    border-radius: var(--tsu-radius);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efek animasi saat cursor diarahkan */
.contact-item-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.contact-icon-circle {
    width: 70px; /* DIKECILKAN: dari 80px */
    height: 70px; /* DIKECILKAN: dari 80px */
    background-color: var(--tsu-blue);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.contact-icon-circle .bi {
    color: #ffffff;
    font-size: 1.75rem; /* DIKECILKAN: dari 2rem */
    transition: transform 0.5s ease-in-out;
}

/* Aturan untuk membuat ikon berputar saat box di-hover */
.contact-item-box:hover .contact-icon-circle .bi {
    transform: rotate(360deg);
}

.contact-item-title {
    color: var(--tsu-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Mengatur form agar lebih rapi */
#contact-form-section .form-control {
    padding: 0.75rem 1rem;
}
#contact-form-section .form-control:focus {
    border-color: var(--tsu-blue);
    box-shadow: 0 0 0 0.25rem rgba(31, 58, 166, 0.25);
}

/* Menghilangkan gaya default pada link kontak */
a.contact-link, a.contact-link:hover {
    text-decoration: none;
    color: inherit;
}
/* ======================================================================
    PAGE: CONTACT US (Map Styling)
   ====================================================================== */

.map-container {
    overflow: hidden;
    border-radius: 24px; /* Memberi sudut melengkung */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Memberi bayangan halus */
}

.map-container iframe {
    display: block; /* Menghilangkan celah kecil di bawah iframe */
}

/* ... (sisa kode CSS untuk contact us lainnya tidak perlu diubah) ... */



/* ======================================================================
    MENGUBAH WARNA DI HERO TITLE HERO
   ====================================================================== */
#hero-project-page .hero-title {
    color: var(--tsu-orange);
}

/* ======================================================================
    PAGE: HEAVY TRANSPORT
   ====================================================================== */

.ht-card {
    background: #fff;
    border: 1px solid var(--tsu-divider);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--tsu-shadow);
    margin: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ht-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.ht-card img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.ht-card figcaption {
    padding: 12px 14px;
    font-weight: 600;
    color: #111;
    text-align: center;
}

@media (min-width: 992px) {
    .ht-card img { height: 240px; }
}

/* ======================================================================
    PAGE: EXPORT & IMPORT
   ====================================================================== */

/* Mengganti warna ikon di kolom Services menjadi Biru */
#export-import-details .col-md-6:first-child .bi {
    color: var(--tsu-blue) !important;
}

/* Mengganti warna ikon di kolom Advantages menjadi Oranye */
#export-import-details .col-md-6:last-child .bi {
    color: var(--tsu-orange) !important;
}

/* ======================================================================
    PAGE: CRANE SERVICE
   ====================================================================== */

/* Mengganti warna ikon di kolom Types & Capacities menjadi Biru */
#crane-service-details .col-md-6:first-child .bi {
    color: var(--tsu-blue) !important;
}

/* Mengganti warna ikon di kolom Support & Safety menjadi Oranye */
#crane-service-details .col-md-6:last-child .bi {
    color: var(--tsu-orange) !important;
}