.bg-cpm-gradient {
    background: linear-gradient(
      270deg,
      #b8ffff -20%,
      #269b88 20%,
      #2197a9 55%,
      #1c94c5 80%,
      #90e3ff 120%
    );
    transition-property: filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.bg-cpm-gradient:hover {
    filter: brightness(1.1);
}

/* ==========================================================================
   1. UTILITY CLASSES (jika diperlukan di masa depan)
   ========================================================================== */

/* ==========================================================================
   2. NAVIGATION
   ========================================================================== */
.menu-toggle {
    position: relative;
}

.menu-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.menu-toggle .icon-close {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
}

.menu-toggle.is-open .icon-open {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
}

.menu-toggle.is-open .icon-close {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.hero-visual {
    align-items: center;
}

.header-frame {
    /* Edit ukuran/posisi PNG rounded kiri bawah di sini. */
    --corner-bottom-left-size: clamp(5rem, 8vw, 7rem);
    --corner-bottom-left-x: 2.86%;
    --corner-bottom-left-y: 2.96%;
    --frame-motif-size: 80%;
    --frame-motif-opacity: 0.053;
    width: 100%;
}

.header-frame::after {
    content: '';
    position: absolute;
    z-index: 45; /* Di atas service-strip (z-40) */
    bottom: var(--corner-bottom-left-y);
    left: var(--corner-bottom-left-x);
    width: var(--corner-bottom-left-size);
    height: var(--corner-bottom-left-size);
    background: url('assets/2x/bottom-left.png') no-repeat;
    background-size: contain;
    pointer-events: none; /* Agar tidak menghalangi interaksi */
}

.frame-motif {
    position: absolute;
    top: 2.96%;
    right: 2.86%;
    bottom: 2.96%;
    left: 2.86%;
    z-index: 25;
    overflow: hidden;
    pointer-events: none;
    border-radius: 4.5rem;
}

.frame-motif::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: var(--frame-motif-opacity);
    background: url("assets/2x/frame-motif.png") center / var(--frame-motif-size) auto no-repeat;
}

.gradient-frame {
    background: linear-gradient(
      270deg,
      #b8ffff -10%,
      #269b88 30%,
      #2197a9 55%,
      #1c94c5 80%,
      #90e3ff 100%
    );
    -webkit-mask-image: url('assets/SVG/frame-header.svg');
    mask-image: url('assets/SVG/frame-header.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Mengganti background frame kanan dengan gambar */
.hero-visual .gradient-frame {
    /* Menambahkan lapisan gelap transparan di atas gambar agar tidak terlalu kontras */
    background: linear-gradient(rgba(10, 29, 55, 0.55), rgba(10, 29, 55, 0.55)),
                url('assets/img/header-right-bg.webp');
    background-size: cover;
    background-position: center;
}

.mobile-menu {
    animation: mobile-menu-enter 0.18s ease both;
}

@keyframes mobile-menu-enter {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu-panel {
    width: 100%;
    max-width: 28rem; /* 448px */
    background-color: #ffffff;
    border-radius: 1.5rem; /* 24px */
    padding: 1rem; /* 16px */
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    border: 1px solid rgb(226 232 240 / 80%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    text-align: center;
}

.mobile-lang-switcher button {
    transition: background-color 0.2s, color 0.2s;
}
.mobile-lang-switcher button:not(.rounded) {
    color: #64748b; /* slate-500 */
}

.mobile-lang-switcher button:not(.rounded):hover {
    background-color: #f1f5f9; /* slate-100 */
}

/* ==========================================================================
   3. HEADER & HERO SECTION
   ========================================================================== */

.hero-frame-left {
    width: 100%;
    /* Menyamakan ukuran dengan frame kanan */
    aspect-ratio: 838 / 810;
    /* [FIX] Menambahkan variabel motif agar sama dengan frame kanan */
    --frame-motif-size: 80%;
    --frame-motif-opacity: 0.053;
}

.hero-frame-left::after {
    content: '';
    position: absolute;
    z-index: 45;
    /* Menggunakan variabel yang sama dengan frame kanan untuk konsistensi */
    bottom: var(--corner-bottom-left-y, 2.96%);
    right: var(--corner-bottom-left-x, 2.86%);
    width: var(--corner-bottom-left-size, clamp(5rem, 8vw, 7rem));
    height: var(--corner-bottom-left-size, clamp(5rem, 8vw, 7rem));
    background: url('assets/2x/bottom-right.png') no-repeat;
    background-size: contain;
    pointer-events: none;
}

.hero-services-link:hover,
.hero-services-link:focus-visible {
    color: white;
    border-color: transparent;
    background: linear-gradient(
      270deg,
      #b8ffff -20%,
      #269b88 20%,
      #2197a9 55%,
      #1c94c5 80%,
      #90e3ff 120%
    );
}

.service-strip {
    left: 2.86%;
    right: 2.86%;
    bottom: 2.96%;
    min-height: clamp(7.25rem, 13vw, 8.4rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom-left-radius: 3.5rem;
    border-bottom-right-radius: 3.5rem;
}

.service-tile {
    isolation: isolate;
    align-content: center;
    grid-template-rows: 1fr;
    min-height: clamp(7.25rem, 13vw, 8.4rem);
    padding: 0.75rem 0.35rem;
}

.service-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--service-image);
    background-position: center;
    background-size: cover;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.service-tile:hover::before,
.service-tile:focus-visible::before {
    opacity: 1.68;
}

.service-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* [FIX] Gradient from dark top to transparent bottom for text readability */
    background: linear-gradient(180deg, rgba(4, 26, 45, 0.7) 5%, rgba(4, 26, 45, 0) 60%);
}

.service-label {
    font-size: clamp(0.78rem, 1.12vw, 1rem);
    /* [FIX] Position label at the top, initially hidden */
    position: absolute;
    top: 0.75rem;
    left: 0.25rem;
    right: 0.25rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* Ensure hover targets the parent button */
}

.service-tile:hover .service-label,
.service-tile:focus-visible .service-label {
    opacity: 1;
    transform: translateY(0);
}
.service-tile--construction {
    --service-image: url("assets/img/konstruksi-img.jpg");
}

.service-tile--fiber {
    --service-image: url("assets/img/fiber-img.jpg");
}

.service-tile--it {
    --service-image: url("assets/img/perangkat-img.jpg");
}

.service-tile--tv {
    --service-image: url("assets/img/tv-img.jpg");
}

/* ==========================================================================
   4. TRUST SECTION
   ========================================================================== */
.trust-section {
    --trust-title-size: clamp(1.85rem, 3.7vw, 3.25rem);
    padding-block: clamp(3rem, 6vw, 4.75rem);
}

.trust-section-inner {
    min-height: clamp(12rem, 20vw, 16rem);
}

.trust-title {
    gap: 0.18em;
    max-width: 50rem;
    font-size: var(--trust-title-size);
    line-height: 1.08;
}

.trust-title span {
    display: block;
}

.trust-icon {
    position: absolute;
    z-index: 1;
    width: clamp(3.5rem, 6vw, 4.55rem);
    height: auto;
    animation: float 5s ease-in-out infinite;
}

.trust-icon-wrapper {
    /* On desktop, this wrapper just holds the absolutely positioned icons */
    position: absolute;
    inset: 0;
}

.trust-icon--grow {
    left: 0;
    top: 0.35rem;
}

.trust-icon--quality {
    left: 8.25rem;
    bottom: 0.75rem;
    animation-delay: -1.2s;
}

.trust-icon--deal {
    right: 0.35rem;
    top: 0.65rem;
    animation-delay: -2.5s;
}

.trust-icon--people {
    right: 6.8rem;
    bottom: 1.15rem;
    animation-delay: -3.7s;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* ==========================================================================
   5. ABOUT SECTION
   ========================================================================== */
/* About Frame Layout */
.about-frame-box {
    position: absolute;
    border-radius: 30px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    overflow: hidden; /* Prevent content from spilling out */
}

/* Left Column */
.about-frame-box-company {
    top: 0;
    left: 0;
    width: 48%;
    height: 230px;
    background: #ffffff;
    color: rgb(5, 4, 31);
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);

}

.about-frame-box-mission {
    top: 270px;
    left: 0;
    width: 48%;
    min-height: 300px;
}

/* Right Column */
.about-frame-box-vision {
    top: 0;
    right: 0;
    width: 48%;
    min-height: 320px;
}

.about-frame-box-location {
    top: 360px;
    right: 0;
    width: 48%;
    height: 210px;
    background: #ffffff;
    color: rgb(5, 4, 31);
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);

}

.about-frame-box-vision, .about-frame-box-mission {
    color: white;
}

.about-frame-box-vision::before,
.about-frame-box-mission::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.06;
    background: url("assets/2x/frame-motif.png") center / 110% auto no-repeat;
    border-radius: inherit;
    pointer-events: none;
}

/* About Frame Layout */
/* (These styles were likely misplaced in the previous reordering) */


@media (min-width: 1024px) {
    /* [FIX] Menyamakan ukuran font judul untuk kedua frame (Desktop) */
    .hero-copy h1, .hero-visual h2 { /* Ukuran disamakan */
        font-size: clamp(4rem, 5vw, 5rem);
    }
}

@media (max-width: 900px) {
    .trust-section-inner {
        /* Change to flex layout to control spacing with gap */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem; /* 20px */
        min-height: auto;
        padding-bottom: 0; /* No longer needed */
    }

    .trust-title {
        max-width: 28rem;
        font-size: clamp(1.8rem, 7vw, 1.5rem); /* 1. Perkecil text */
    }

    .trust-icon-wrapper {
        position: static; /* Become a flex item */
        display: flex;
        justify-content: center;
        gap: clamp(1rem, 4vw, 2rem);
        width: 100%;
    }

    .trust-icon {
        position: static; /* Become a flex item */
        transform: none; /* Remove the translateX */
        width: clamp(3rem, 7vw, 3.5rem); /* 1. Perkecil ukuran ikon */
    }
}

.about-frame-box-vision > *,
.about-frame-box-mission > * {
    position: relative;
    z-index: 1;
}

.about-frame-box-vision {
    background-image: url('assets/2x/bottom-right.png'), linear-gradient( 270deg, #b8ffff -20%, #269b88 20%, #2197a9 55%, #1c94c5 80%, #90e3ff 120% );
    background-repeat: no-repeat; /* Berlaku untuk semua gambar background */
    background-position: bottom right, 0 0;
    background-size: 6rem, cover;
}

.about-frame-box-mission {
    background-image: url('assets/2x/top-right.png'), linear-gradient( 270deg, #b8ffff -20%, #269b88 20%, #2197a9 55%, #1c94c5 80%, #90e3ff 120% );
    background-repeat: no-repeat; /* Berlaku untuk semua gambar background */
    background-position: top right, 0 0;
    background-size: 6rem, cover;
}

.about-frame-list {
    padding-left: 1.25rem; /* Give some space for bullets */
}

.about-frame-map-pin {
    width: 3.5rem;
    height: 3.5rem;
}


.badge-stat {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.bg-stat-blue {
  background: linear-gradient(90deg, #6fd6f5 -10%, #1c94c5 25%, #1c94c5 75%, #c7f2ff 110%);
}

.bg-stat-green {
  background: linear-gradient(90deg, #c7fff2 -10%, #11a589 25%, #11a589 75%, #c7fff0 110%);
}
/* ==========================================================================
   7. FOOTER
   ========================================================================== */

/* ==========================================================================
   8. RESPONSIVE & MEDIA QUERIES
   ========================================================================== */

@media (max-width: 1023px) {
    /* --- HERO SECTION REFACTOR --- */
    .hero-shell {
        min-height: auto;
        align-items: flex-start;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }
    .hero-frame-left,
    .hero-visual {
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem; /* Jarak diperkecil agar lebih rapat */
    }

    /* --- GENERAL HERO STYLES --- */
    .hero-copy {
        text-align: left;
        justify-items: start;
        gap: 1rem;
        padding-top: 0;
        transform: none;
    }

    .hero-copy h1, .hero-visual h2 {
        font-size: clamp(2.25rem, 10vw, 3.5rem); /* 2. Perkecil ukuran teks judul */
        line-height: 1;
    }
    /* 2. Atur padding konten frame header */
    .hero-frame-left .flex.flex-col,
    .header-frame .flex.flex-col {
        padding: clamp(2rem, 8vw, 3rem);
    }

    /* 2. Adjust hero button sizes on mobile */
    .hero-copy a[data-scroll-to],
    .hero-visual a[data-scroll-to] {
        padding-left: 1.5rem; /* 24px */
        padding-right: 1.5rem; /* 24px */
        padding-top: 0.5rem; /* 8px */
        padding-bottom: 0.5rem; /* 8px */
        min-height: auto;
        min-width: auto; /* Override min-w-52 on portfolio button */
    }

    .hero-visual .pb-32 {
        padding-bottom: clamp(2rem, 8vw, 3rem);
    }

    .hero-panel-copy {
        justify-items: center;
        text-align: center;
        width: 85%;
    }

    .hero-copy .hero-icon-strip,
    .header-footer-img {
        display: none;
    }

    .hero-visual {
        min-height: auto;
        margin-left: 0;
    }

    .service-tile {
        min-height: 5rem;
    }
    
    .service-tile:nth-child(2) {
        border-right: none;
    }

    .service-label {
        font-size: 0.7rem;
    }

    /* --- TRUST SECTION --- */
    .trust-section {
        /* Adjust top padding for mobile to bring it closer to the header */
        padding-top: 2rem;
    }

    /* --- ABOUT SECTION --- */
    .about-frame-section {
        padding-top: 2rem;
    }
    .about-frame-container {
        height: auto;
        display: grid;
        gap: 1.5rem;
    }
    .about-frame-box {
        position: static;
        width: 100%;
        height: auto;
        min-height: 0; /* Reset min-height agar frame bisa menyesuaikan konten */
        padding: 1.5rem;
        border-radius: 28px;
    }
    /* Adjust font sizes within About frames for mobile */
    .about-frame-box h3 {
        font-size: clamp(1.3rem, 5vw, 1.75rem);
    }
    .about-frame-box p,
    .about-frame-list {
        font-size: 0.875rem; /* 14px */
        line-height: 1.6;
    }
    .about-frame-box-location h3 {
        font-size: 1.1rem;
    }

    .about-frame-box-vision {
        background-image: url('assets/2x/top-right.png'), linear-gradient( 270deg, #b8ffff -20%, #269b88 20%, #2197a9 55%, #1c94c5 80%, #90e3ff 120% );
        background-position: top right, 0 0;
        background-size: 5rem, cover;
    }
    
    /* --- SERVICES / PORTFOLIO SECTION --- */
    .services-wrap {
        /* 1. Atur margin agar tidak rapat ke tepi layar */
        padding-inline: 1.5rem;
    }
    .hero-media,
    .portfolio-panel {
        border-radius: 0;
    }
    .hero-media {
        /* Perkecil tinggi gambar layanan */
        min-height: 260px;
    }
    .portfolio-card .client {
        /* Perkecil teks client di portofolio */
        font-size: 13px;
    }
    .portfolio-card .desc {
        /* Perkecil teks deskripsi di portofolio */
        font-size: 12px;
    }
    .portfolio-track {
        /* 2. Buat portofolio menjadi satu baris slide */
        grid-template-rows: 1fr;
    }
    .detail-text h3 {
        /* 3. Perkecil ukuran teks detail */
        font-size: 20px;
    }
    .detail-text h4 {
        /* 3. Perkecil ukuran teks lingkup pekerjaan */
        font-size: 17px;
    }
    .scope-list li {
        font-size: 14.5px;
    }

    /* --- VALUE & FOOTER SECTIONS --- */
    .value-section .text-5xl {
        font-size: 2.5rem; /* 40px */
    }
    .value-section .py-10 {
        padding-block: 1.5rem;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
    }
    .footer-logo {
        order: -1; /* 4. Pindahkan logo ke atas */
        justify-content: center; /* Tengahkan logo */
        margin-bottom: 1.5rem; /* Beri jarak antara logo dan konten di bawahnya */
    }
}


    .trust-section-inner {
        min-height: auto;
        padding-bottom: 0; /* No longer needed, spacing is handled by gap in 900px breakpoint */
    }

    /* Other 640px styles can go here */


.site-footer {
    background: linear-gradient(
      270deg,
      #b8ffff -20%,
      #269b88 20%,
      #2197a9 55%,
      #1c94c5 80%,
      #90e3ff 120%
    );
    color: #f8fafc;
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
    max-width: 1440px; /* Disesuaikan dengan lebar konten navigasi */
    margin-inline: auto;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.7;
}

.footer-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.footer-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.footer-addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 2.5rem;
}

.footer-logo {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.footer-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.95; /* Sedikit melembutkan warna putih agar tidak terlalu kontras */
}

.footer-socials a {
    color: #fff;
    opacity: 0.9;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.footer-socials a:hover {
    opacity: 1;
    transform: scale(1.1);
}

.footer-socials svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
}

@media (min-width: 1024px) {
    .footer-container {
        grid-template-columns: 3fr 1fr;
        gap: 4rem;
    }

    .footer-logo {
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .site-footer {
        border-top-left-radius: 1.75rem;
        border-top-right-radius: 1.75rem;
        padding: 2.5rem 1.5rem;
    }
}

/* Background World Node untuk Value Section */
.value-section {
    position: relative;
    isolation: isolate;
    background-color: #ffffff;
}

.value-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #0a1d37;

    -webkit-mask-image: url('assets/SVG/world-node.svg');
    mask-image: url('assets/SVG/world-node.svg');

    /* ====== NILAI YANG BISA DIEDIT ====== */
    --pattern-size: 1200px;
    --pattern-opacity: 0.08;

    -webkit-mask-size: var(--pattern-size);
    mask-size: var(--pattern-size);
    -webkit-mask-position: center;
    mask-position: left;
    opacity: var(--pattern-opacity);
}

.about-frame-list li {
    opacity: 0.9;
}

/* ==========================================================================
   9. SERVICES / PORTFOLIO SECTION
   ========================================================================== */
/* ---------- TABS ---------- */
.tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content: center; /* Menengahkan tombol tab */
  gap:14px;
  margin-bottom:28px;
}
.tab-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:999px;
  border:1.5px solid #22d3ee; /* --cyan-400 */
  border:1.5px solid #269b88; /* Warna outline disamakan dengan tema gradient */
  background:#ffffff; /* --surface */
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  color:#0f172a; /* --ink-900 */
  color:#269b88; /* Warna teks disamakan dengan outline */
  transition:box-shadow .25s ease, transform .2s ease, background .25s ease;
}
.tab-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(15,23,42,0.06); }
.tab-btn .icon-badge{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc; /* --muted-bg */
  color:#0d9488; /* --teal-500 */
  color:#269b88; /* Warna ikon disamakan dengan outline */
  flex-shrink:0;
  transition:background .25s ease, color .25s ease;
}
.tab-btn .icon-badge svg{ width:20px; height:20px; }
.tab-btn span.label{ padding-right:10px; }

.tab-btn.active{
  /* [FIX] Menggunakan gradient yang sama dengan tombol "Hubungi Kami" */
  background: linear-gradient(
      270deg,
      #b8ffff -20%,
      #269b88 20%,
      #2197a9 55%,
      #1c94c5 80%,
      #90e3ff 120%
    );
  border-color:transparent;
  color:#fff;
}
.tab-btn.active .icon-badge{
  background:rgba(255,255,255,0.22);
  color:#fff;
}
.tab-btn:focus-visible{
  outline:3px solid #0284c7; /* --sky-600 */
  outline-offset:2px;
}

/* ---------- DETAIL PANEL ---------- */
.detail-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:28px;
}
@media (max-width:820px){
  .detail-panel{ grid-template-columns:1fr; }
}

.hero-media{
  border-radius:22px;
  overflow:hidden;
  min-height:340px;
  position:relative;
  background:#f8fafc; /* --muted-bg */
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .45s ease;
}
.hero-media img.show{ opacity:1; }

.detail-text{
  border-radius:22px;
  padding:28px 30px;
  background: #fff;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
}
.detail-text h3{
  margin:0 0 12px;
  font-size:22px;
  font-weight:800;
}
.detail-text p.desc{
  margin:0 0 20px;
  color:#334155; /* --ink-700 */
  line-height:1.65;
  font-size:15.5px;
}
.detail-text h4{
  margin:0 0 12px;
  font-size:18px;
  font-weight:800;
}
.scope-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.scope-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#334155; /* --ink-700 */
  font-size:15px;
  line-height:1.5;
}
.scope-list svg{
  width:19px;
  height:19px;
  flex-shrink:0;
  margin-top:2px;
  color:#0284c7; /* --sky-600 */
}

/* ---------- PORTFOLIO ---------- */
.portfolio-panel{
  position:relative;
  border-radius:22px;
  padding:26px;
  background: linear-gradient(
      270deg,
      #b8ffff -20%,
      #269b88 20%,
      #2197a9 55%,
      #1c94c5 80%,
      #90e3ff 120%
    );
}
.portfolio-track{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2, auto);
  grid-auto-columns:minmax(230px, 1fr);
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:4px;
  scrollbar-width:none;
}
.portfolio-track::-webkit-scrollbar{ display:none; }

.portfolio-card{
  scroll-snap-align:start;
  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* For Safari compatibility */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius:14px;
  padding:14px 16px;
}
.portfolio-card .client{
  margin:0 0 4px;
  font-weight:700;
  font-size:14px;
  color:#ffffff;
}
.portfolio-card .desc{
  margin:0;
  font-size:12.5px;
  color:rgba(255, 255, 255, 0.8);
  line-height:1.4;
}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  border:1.5px solid #22d3ee; /* --cyan-400 */
  background:#fff;
  color:#0d9488; /* --teal-500 */
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(15,23,42,0.06);
  transition:background .2s ease, color .2s ease;
  z-index:2;
}
.slider-btn:hover{ background:#0d9488; color:#fff; }
.slider-btn.prev{ left:-19px; }
.slider-btn.next{ right:-19px; }
.slider-btn svg{ width:18px; height:18px; }
.slider-btn:focus-visible{ outline:3px solid #0284c7; outline-offset:2px; }

@media (max-width:600px){
  .slider-btn{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .hero-media img, .portfolio-track{ transition:none; scroll-behavior:auto; }
}

/* ==========================================================================
   10. CONTACT FORM SECTION
   ========================================================================== */
.contact-wrap{
  max-width:80rem; /* Disesuaikan dengan lebar header/footer (1440px) */
  margin:0 auto;
  padding:0 20px;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:40px;
  align-items:start;
}
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- MAP BOX ---------- */
.map-box{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#ffffff;
}
.map-box iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.pin-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  width:64px;
  height:64px;
  background:#ffffff;
  border-bottom-left-radius:32px;
}
.pin-badge::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#ffffff;
}
.pin-badge .pin-circle{
  position:absolute;
  top:8px;
  right:8px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.pin-badge .pin-circle svg{ width:18px; height:18px; }
.pin-badge .corner-fill{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  border-top-right-radius:28px;
}

/* ---------- FORM ---------- */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:520px){
  .field-row{ grid-template-columns:1fr; }
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field label{
  font-size:15px;
  font-weight:600;
  color:#0f172a;
}

.field input,
.field select,
.field textarea{
  font-family:inherit;
  font-size:14.5px;
  color:#0f172a;
  padding:12px 14px;
  border:1.5px solid #9aa3af;
  border-radius:10px;
  outline:none;
  background:#ffffff;
  transition:border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.field input,
.field select {
  border-radius: 9999px; /* Full rounded */
}
.field textarea {
  border-radius: 20px; /* Disesuaikan agar lebih bulat */
}
.field select {
  appearance: none;
  background-color: #f8fafc; /* slate-50 */
  border-color: #e2e8f0; /* slate-200 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%231c94c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem; /* 48px */
  cursor: pointer;
}
.field textarea{ resize:vertical; min-height:110px; font-family:inherit; }

.field select:hover {
  border-color: #cbd5e1; /* slate-300 */
}

.field select option {
  padding: 10px 14px; /* Memberi padding pada item. Efek mungkin bervariasi antar browser. */
  font-weight: 500;
  background: #ffffff; /* Memastikan latar belakang putih solid. */
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:#0f172a;
  box-shadow:0 0 0 3px rgba(15,23,42,0.08);
}

.field .error-msg{
  display:none;
  font-size:12.5px;
  color:#dc2626;
}
.field.has-error .error-msg{ display:block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#dc2626;
}

.submit-btn{
  align-self:flex-start;
  margin-top:4px;
  padding:14px 34px;
  border:none;
  border-radius:9999px;
  background:#0f172a;
  color:#fff;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}
.submit-btn:hover{ opacity:.9; transform:translateY(-1px); }
.submit-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.submit-btn:focus-visible{ outline:3px solid #0f172a; outline-offset:3px; }

.form-status{
  font-size:14px;
  font-weight:600;
  display:none;
}
.form-status.success{ display:block; color:#16a34a; }
.form-status.error{ display:block; color:#dc2626; }