/* RESET & BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden; /* Scroll dihandle oleh .page-wrapper */
}

body {
    font-family: 'Poppins', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

/* SCROLL SNAP WRAPPER */
.page-wrapper {
    height: 100vh;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-padding-top: 10px;       /* Kompensasi tinggi navbar */
}

/* Snap mandatory HANYA aktif di halaman Home (full-page slideshow). */
.page-home .page-wrapper {
    scroll-snap-type: y mandatory;
}

/* BASE SECTION */
.section {
    scroll-snap-align: start;       /* Snap dari atas setiap section */
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between; /* brand kiri, lang-switcher kanan */
    height: 60px;
    padding: 0 60px;

    background-color: #ffffff;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;

    transition:
        background-color 0.4s ease,
        backdrop-filter 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* State: navbar sedang di atas section BERGAMBAR (bukan section putih) — */
.navbar.on-image {
    background-color: rgba(15, 15, 15, -0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.navbar.on-image .navbar-menu a {
    color: #ffffff;
}

.navbar.on-image .navbar-menu a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.navbar.on-image .hamburger span {
    background: #ffffff;
}

.navbar.on-image .lang-switcher a {
    color: rgba(255, 255, 255, 0.85);
}

.navbar.on-image .lang-switcher a:hover,
.navbar.on-image .lang-switcher a.active {
    color: #ffffff;
}

.navbar.on-image .lang-divider {
    color: rgba(255, 255, 255, 0.4);
}

.navbar-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    display: block;
}

.navbar-brand .logo-white {
    display: none;
}

.navbar.on-image .navbar-brand .logo-default {
    display: none;
}

.navbar.on-image .navbar-brand .logo-white {
    display: block;
}

.navbar-menu {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.navbar-menu li {
    list-style: none;
}

.navbar-menu a {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #333;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.navbar-menu a:hover {
    color: #3aabab;
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.lang-switcher a {
    color: #777;
    transition: color 0.2s ease;
}

.lang-switcher a:hover,
.lang-switcher a.active {
    color: #333;
    font-weight: 700;
}

.lang-divider {
    color: #ccc;
}

/* SECTION 1 — HERO */
#section1 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

.hero-content {
    position: relative;
    z-index: 10;
    padding: 0 60px 90px 60px;
    max-width: 520px;
}

.hero-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-transform: uppercase;
    line-height: 1.2;
}

.hero-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    text-decoration: none;
    z-index: 20;

    transition: opacity 0.35s ease, transform 0.35s ease;
    animation: heroScrollBounce 2.2s ease-in-out infinite;
}

@keyframes heroScrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

.scroll-arrow {
    display: inline-block;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

.hero-scroll:hover {
    opacity: 0.65;
    animation-play-state: paused;
}

/* SECTION 2 — PRODUCT DETAIL */
.section2 {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.section2-inner {
    padding: 80px 0 20px 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section2-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 60px;
    align-items: center;
}

.spec-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #111;
    margin-bottom: 24px;
}

.spec-desc {
    font-size: 13.5px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 30px;
    max-width: 440px;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
}

.spec-table tr {
    border-bottom: 1px solid #e5e5e5;
}

.spec-table td {
    padding: 13px 0;
    font-size: 13.5px;
    color: #444;
}

.spec-table td:last-child {
    text-align: right;
    color: #666;
}

.bottom-stats {
    display: flex;
    gap: 60px;
    margin-top: 36px;
}

.bottom-stat .bottom-number {
    font-size: 38px;
    font-weight: 700;
    color: #111;
    line-height: 1;
}

.bottom-stat .bottom-label {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

.machine-col {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.machine-col img {
    max-height: 360px;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
}

.stats-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 16px;
}

.stat-item .stat-number {
    font-size: 42px;
    font-weight: 700;
    color: #111;
    line-height: 1;
}

.stat-item .stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

.carousel-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cccccc;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    width: 26px;
    border-radius: 4px;
    background: #333333;
}

.section2-slide {
    position: absolute;
    inset: 0;
    display: none;
}

.section2-slide.active {
    display: block;
    animation: fadeSwap 0.4s ease;
}

@keyframes fadeSwap {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* IMAGE SECTION (Section 3, 5, dst) */
.image-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

/* PRODUCT SECTION (Section 4, dst) */
.product-section {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.product-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    height: 100%;
    padding: 80px 60px 20px 60px;
}

.product-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #111;
    margin-bottom: 32px;
}

.spec-bold {
    font-weight: 700;
}

.product-desc {
    margin-top: 28px;
    font-size: 13px;
    line-height: 2;
    color: #555;
    text-align: justify;
    max-width: 420px;
}

.product-left {
    flex: 1;
    max-width: 480px;
}

.product-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.product-right img {
    max-height: 420px;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
}

.product-slide {
    position: absolute;
    inset: 0;
    display: none;
}

.product-slide.active {
    display: block;
    animation: fadeSwap 0.4s ease;
}

/* SECTION 4 — LAYOUT 3 KOLOM (sesuai HOME REVAMP) */
.product-inner--3col {
    display: grid;
    grid-template-columns: 1fr 1.15fr 0.72fr;
    align-items: center;
    gap: 50px;
}

.product-inner--3col .product-left {
    max-width: 460px;
}

/* Baris Jenis / Ketersediaan — HANYA di Home */
.product-extra-specs {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
}

.product-extra-specs tr {
    border-bottom: 1px solid #e5e5e5;
}

.product-extra-specs td {
    padding: 14px 0;
    font-size: 13.5px;
    color: #444;
}

.product-extra-specs td:last-child {
    text-align: right;
    color: #666;
}

.product-seeall {
    display: inline-block;
    margin-top: 26px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #111;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.product-seeall span {
    margin-left: 4px;
}

.product-seeall:hover {
    opacity: 0.55;
}

/* SEE ALL sejajar dots, di kanan */
.product-seeall-bar {
    position: absolute;
    bottom: 22px;
    right: 60px;
    z-index: 15;
}

.product-seeall-bar .product-seeall {
    margin-top: 0;
}

/* Tengah: cone */
.product-cone {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.product-cone img {
    max-height: 440px;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Kanan: nilai besar + label kecil + swatch */
.product-stats {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.product-stat__value {
    font-size: 34px;
    font-weight: 700;
    color: #111;
    line-height: 1;
}

.product-stat__label {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}

.product-swatch {
    margin-top: 8px;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

.product-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PANAH SCROLL — varian gelap (untuk section background putih) */
.hero-scroll--dark .scroll-arrow {
    color: #111;
}

/* SECTION 9 — FACTORY EXPERIENCE (1 section penuh) */
.section9 {
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* VARIANT: Teks di kiri ATAS — Dipakai Section 7 */
.content-top {
    position: absolute;
    top: 80px;
    left: 0;
    bottom: auto;
    padding: 0 60px;
    max-width: 520px;
}

/* SECTION 5 — CAPACITY */
.cap-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

.cap-content {
    position: absolute;
    top: 80px;
    left: 60px;
    z-index: 10;
    max-width: 380px;
}

.cap-stats {
    position: absolute;
    bottom: 64px;
    left: 60px;
    right: 60px;
    z-index: 10;
    display: flex;
    gap: 0;
}

.cap-stat {
    flex: 1;
}

.cap-number {
    font-size: 42px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.cap-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.8px;
    margin-top: 8px;
    text-transform: uppercase;
}

/* SECTION 6 — NEWS + NEWSLETTER */
.section6 {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    overflow: hidden;
}

.news-area {
    flex: 0 0 58%;
    position: relative;
    display: flex;
    align-items: center;
}

.news-track-container {
    overflow: hidden;
    width: 100%;
    padding: 20px 80px;
}

.news-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
    cursor: grab;
}

.news-track:active {
    cursor: grabbing;
}

.news-card {
    flex: 0 0 calc(38% - 10px);
    background: #ffffff;
    border: none;
    overflow: hidden;
    user-select: none;
}

.news-img-placeholder {
    display: block;
    width: 100%;
    height: 200px;
    background: #e0e0e0;
    overflow: hidden;
}

.news-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-body {
    padding: 18px 4px 0;
}

.news-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    line-height: 1.5;
    margin-bottom: 10px;
}

.news-title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.news-title a:hover {
    opacity: 0.65;
}

.news-excerpt {
    font-size: 12.5px;
    color: #777;
    line-height: 1.6;
}

.news-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    font-size: 40px;
    color: #aaa;
    cursor: pointer;
    padding: 0 20px;
    line-height: 1;
    transition: color 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

.news-arrow:hover {
    color: #333;
}

.prev-arrow { left: 0; }
.next-arrow { right: 0; }

.news-dots-wrapper {
    flex: 0 0 7%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.newsletter-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 60px 32px;
    text-align: center;
    gap: 20px;
}

.newsletter-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #333;
    max-width: 560px;
    line-height: 1.8;
}

.newsletter-form {
    display: flex;
    gap: 0;
}

.newsletter-input {
    width: 280px;
    padding: 11px 16px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    border: 1px solid #ccc;
    border-right: none;
    outline: none;
    color: #333;
}

.newsletter-input::placeholder {
    color: #bbb;
}

.newsletter-input:focus {
    border-color: #999;
}

.newsletter-btn {
    padding: 11px 24px;
    background: #222;
    color: #fff;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid #222;
    cursor: pointer;
    transition: background 0.2s ease;
}

.newsletter-btn:hover {
    background: #444;
}

.newsletter-success {
    font-size: 12px;
    color: #2a7a7a;
    font-weight: 600;
    display: none;
}

/* SECTION 8 — CERTS + CTA */
.section8 {
    height: auto;
    min-height: 0;
    display: block;
    scroll-snap-align: start;
    background: #ffffff;
}

.s8-certs {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 60px;
    gap: 28px;
}

.s8-cert-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #111;
    text-align: center;
}

.cert-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px 44px;
}

.cert-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-logo-item img {
    max-height: 44px;
    max-width: 100px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.5);
    transition: filter 0.3s ease;
}

.cert-logo-item img:hover {
    filter: grayscale(0%) opacity(1);
}

.cert-placeholder {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #bbb;
    text-align: center;
    padding: 10px;
    border: 1px solid #eee;
    min-width: 80px;
    align-items: center;
    justify-content: center;
    height: 44px;
}

.s8-cta {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s8-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}

.s8-cta-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 40px;
    max-width: 1000px;         /* dilebarkan: judul 60px butuh ruang 1 baris */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.s8-line1,
.s8-line2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;          /* Medium */
    font-size: 60px;
    line-height: 70px;
    letter-spacing: 0;
    color: #ffffff;
}

.s8-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;          /* SemiBold */
    font-size: 12px;
    line-height: 23px;
    letter-spacing: 1.2px;
    color: #ffffff;
    max-width: 700px;
}

.s8-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 0 22px;
    border: 0;
    border-radius: 7px;
    background: #58595B;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;          /* SemiBold */
    font-size: 12px;
    line-height: 32px;         /* sekaligus jadi tinggi tombol */
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.15s ease;
}

.s8-btn:hover {
    background: #6E6F71;
    color: #ffffff;
    transform: translateY(-1px);
}

/* FOOTER */
.site-footer {
    background: #58595B;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
    padding: 0;
}

.footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 52px 60px 36px;
    gap: 60px;
    flex: 1;
}

.footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    flex: 0 0 auto;
    max-width: 480px;
}

.footer-logo img,
.footer-logo svg {
    width: 72px;
    height: auto;
    flex-shrink: 0;
    margin-top: 4px;
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-office-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #333;
}

.footer-address {
    font-size: 11.5px;
    color: #555;
    line-height: 1.7;
    max-width: 340px;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.footer-contacts p {
    font-size: 11.5px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-label {
    font-weight: 700;
    color: #333;
    font-size: 11px;
    min-width: 10px;
}

.footer-contacts a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contacts a:hover {
    color: #3aabab;
}

.footer-email {
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-email:hover {
    color: #3aabab;
}

.footer-nav {
    display: flex;
    gap: 60px;
    flex-shrink: 0;
}

.footer-nav-col {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-nav-col li a {
    font-size: 12px;
    color: #555;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.footer-nav-col li a:hover {
    color: #3aabab;
}

.footer-bottom {
    border-top: 1px solid #d8d5cf;
    padding: 16px 60px;
}

.footer-bottom p {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #888;
}

.section[data-slideshow] {
    transition: background-image 0.8s ease-in-out;
}

/* HAMBURGER MENU */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    z-index: 1100;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* REVEAL ANIMATIONS (per section) */
.reveal {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-up    { transform: translateY(36px); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-fade  { transform: none; }

.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.25s; }
.reveal[data-delay="3"] { transition-delay: 0.4s; }
.reveal[data-delay="4"] { transition-delay: 0.55s; }

.reveal.visible {
    opacity: 1;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    .hero-scroll { animation: none; }
    .section2-slide.active,
    .product-slide.active { animation: none; }
}

/* FLIP COUNTER — Gaya Airport / Split-Flap Display */
.flip-char {
    display: inline-block;
    min-width: 0.58em;
    text-align: center;
}

@keyframes flipTick {
    0%   { transform: rotateX(0deg);  opacity: 1;   }
    45%  { transform: rotateX(85deg); opacity: 0.25; }
    55%  { transform: rotateX(85deg); opacity: 0.25; }
    100% { transform: rotateX(0deg);  opacity: 1;   }
}

.flip-anim {
    display: inline-block;
    animation: flipTick 0.16s ease;
    transform-style: preserve-3d;
}

/* CERTIFICATIONS — RUNNING BELT ANIMATION */
.cert-belt-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.cert-belt-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: cert-belt-run 28s linear infinite;
}

.cert-belt-wrapper:hover .cert-belt-track {
    animation-play-state: paused;
}

.cert-logo-item {
    flex: 0 0 auto;
    margin: 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-logo-item img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.55);
    transition: filter 0.3s ease;
}

.cert-logo-item img:hover {
    filter: grayscale(0%) opacity(1);
}

@keyframes cert-belt-run {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ABOUT PAGE */
:root {
    --about-us-gray: #d9d9d9;
    --about-us-dark: #111111;
    --about-us-gap: 48px;
}

.container {
    min-width: 100vh;
    margin: 0 auto;
    padding: 0 60px;
}

.about-us-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    background: var(--about-us-gray);
    overflow: hidden;
}
.about-us-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.about-us-hero__content {
    position: relative;
    z-index: 1;
    margin: 0;
    padding-bottom: 48px;
}
.about-us-hero__title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    color: var(--about-us-dark);
}
.about-us-hero__people {
    display: flex;
    gap: 64px;
}
.about-us-hero__person {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.about-us-hero__role {
    font-size: 13px;
    color: #6b6b6b;
}
.about-us-hero__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--about-us-dark);
}

.about-us-hero__bg.reveal-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Reveal / parallax image wrapper (efek hover + scroll) */
.reveal-img {
    position: relative;
    overflow: hidden;
    background: var(--about-us-gray);
}
.reveal-img__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 136%;
    transform: translateY(0);
    transition: transform .1s linear;
    will-change: transform;
}
.reveal-img__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.08);
    transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .8s ease;
    filter: saturate(.92);
}
.reveal-img:hover .reveal-img__inner img {
    transform: scale(1.18);
    filter: saturate(1);
}

/* Director's Notes */
.about-us-notes {
    padding: 96px 60px;
}
.about-us-notes__quote {
    max-width: 720px;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.4;
    margin: 0 0 56px;
}
.about-us-notes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--about-us-gap);
    align-items: start;
}
.about-us-notes__photo {
    aspect-ratio: 3 / 4;
}
.about-us-notes__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.about-us-notes__text p {
    font-size: 14px;
    line-height: 1.7;
    color: #3a3a3a;
    margin-bottom: 16px;
    text-align: justify;
}
.about-us-notes__side {
    display: flex;
    flex-direction: column;
    gap: var(--about-us-gap);
}
.about-us-notes__sidequote {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    text-align: justify;
}
.about-us-notes__side .about-us-notes__photo {
    aspect-ratio: 1 / 1;
}

/* Features */
.about-us-features {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--about-us-gap);
    padding: 0 60px 96px;
}
.about-us-features__col {
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.about-us-feature__icon {
    display: block;
    width: 36px;
    height: 36px;
    color: #9a9a9a;
    margin-bottom: 16px;
}
.about-us-feature__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.about-us-feature h3 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 12px;
}
.about-us-feature p {
    font-size: 14px;
    line-height: 1.7;
    color: #3a3a3a;
    text-align: justify;
}

/* Gallery */
.about-us-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--about-us-gap);
    margin-bottom: 64px;
}
.about-us-gallery__item {
    aspect-ratio: 3 / 4;
}

.about-us-tongs {
    background: #ffffff;
    overflow: hidden;            /* sembunyikan can saat masih "di luar" (terdorong) */
}

.about-us-tongs__stage {
    position: relative;
    height: 380px;              /* WAJIB ada tinggi -> %top resolve & observer jalan */
    max-width: 1200px;
    margin: 0 auto 40px;
}

/* Video pengganti animasi tong */
.about-us-tongs__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;        /* tampil utuh; ganti 'cover' bila mau penuh */
    display: block;
}

/* ABOUT PAGE — BATCH 2 */

/* FIX: .container (sebelumnya `min-width: 100vh` keliru) */
.container {
    min-width: 0;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;

}

/* FIX: navbar saat di atas gambar (alpha sebelumnya negatif = transparan) */
.navbar.on-image {
    background-color: rgba(15, 15, 15, 0.45);
}

/* FIX: ikon fitur memakai <img>, bukan <svg> */
.about-us-feature__icon {
    width: auto;
    height: auto;
    margin-bottom: 16px;
}
.about-us-feature__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

/* Placeholder rapi saat gambar belum diupload (garis diagonal halus) */
.reveal-img.is-placeholder {
    background-image: repeating-linear-gradient(
        45deg,
        #e3e3e3 0, #e3e3e3 14px,
        #d9d9d9 14px, #d9d9d9 28px
    );
}
.reveal-img.is-placeholder .reveal-img__inner { background: transparent; }

/* SECTION 4: reveal/clip saat masuk layar (parallax tetap via JS) */
.about-us-gallery__item {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transition: clip-path 1s cubic-bezier(.22, .61, .36, 1),
                -webkit-clip-path 1s cubic-bezier(.22, .61, .36, 1),
                opacity .8s ease;
}
.about-us-gallery__item.visible {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}

/* Aksesibilitas: hormati reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .about-us-gallery__item {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        transition: none !important;
    }
}

/* MOBILE — tuning tambahan About (≤900px & ≤600px) */
@media (max-width: 900px) {
    .about-us-hero__people {
        flex-wrap: wrap;
        gap: 20px 32px;
    }
    /* Pastikan efek clip tetap jalan saat 1 kolom */
    .about-us-gallery {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .about-us-hero__content { padding-bottom: 36px; }
    .about-us-hero__title   { font-size: 28px; }
    .about-us-notes__quote     { font-size: 22px; line-height: 1.35; }
    .about-us-notes__sidequote { font-size: 16px; }
    .about-us-features__col { gap: 32px; }
    .about-us-feature h3 { font-size: 14px; }
    .about-us-feature p,
    .about-us-notes__text p { font-size: 13.5px; }
    .about-us-tongs__stage { height: 180px; }
}

/* Biarkan Lenis yang mengatur easing (matikan smooth native di About) */
.page-about-us .page-wrapper { scroll-behavior: auto; }

/* Rekomendasi resmi Lenis */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* RESPONSIVE — MOBILE (semua breakpoint dikumpulkan di sini) */

@media (max-width: 900px) {

    /* NAVBAR */
    .navbar {
        padding: 0 24px;
        gap: 14px;
    }

    .navbar-brand {
        margin-right: auto;
    }

    .lang-switcher {
        order: 1;
    }

    /* HAMBURGER */
    .hamburger {
        display: flex;
        order: 2;
    }

    .navbar-menu {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        transform: none;
        background: #ffffff;
        flex-direction: column;
        padding: 8px 0 20px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
        z-index: 999;
        gap: 0;
    }

    .navbar-menu.open {
        display: flex;
    }

    .navbar.on-image .navbar-menu {
        background-color: rgba(15, 15, 15, 0.78);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    }

    .navbar-menu li {
        border-bottom: 1px solid #f0f0f0;
    }

    .navbar.on-image .navbar-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .navbar-menu li a {
        display: block;
        padding: 14px 28px;
        font-size: 13px;
    }

    /* SECTION 1 — HERO */
    .hero-content {
        padding: 0 24px 70px 24px;
        max-width: 100%;
    }

    .hero-title {
        font-size: 26px;
    }

    /* SECTION 2 — WINDING */
    .section2-inner {
        padding: 80px 24px 60px 24px;
        overflow-y: auto;
    }

    .section2-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "image  image"
            "title  title"
            "table  table"
            "right  bottom";
        gap: 24px;
    }

    .specs-col {
        display: contents;
    }

    .spec-title { grid-area: title; }
    .spec-table { grid-area: table; }

    .machine-col {
        grid-area: image;
    }

    .machine-col img {
        max-height: 200px;
    }

    .stats-col {
        grid-area: right;
        flex-direction: column;
        gap: 24px;
        padding-top: 0;
    }

    .bottom-stats {
        grid-area: bottom;
        flex-direction: column;
        gap: 24px;
        margin-top: 0;
    }

    .stats-col .stat-number,
    .bottom-stats .bottom-number {
        font-size: 30px;
    }

    /* SECTION 4 — PRODUCT DETAIL */
    .product-inner {
        flex-direction: column;
        padding: 80px 24px 60px 24px;
        overflow-y: auto;
        gap: 24px;
    }

    .product-right {
        order: -1;
    }

    .product-right img {
        max-height: 220px;
    }

    /* Layout 3 kolom → 1 kolom di mobile */
    .product-inner--3col {
        display: flex;
        flex-direction: column;
        padding: 80px 24px 60px 24px;
        gap: 24px;
        overflow-y: auto;
    }

    .product-inner--3col .product-left {
        max-width: 100%;
    }

    .product-cone {
        order: -1;
    }

    .product-cone img {
        max-height: 220px;
    }

    .product-stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px 36px;
    }

    .product-swatch {
        width: 90px;
        height: 90px;
    }

    .product-extra-specs {
        margin-top: 20px;
    }

    /* SECTION 5 — CAPACITY */
    .cap-content {
        left: 24px;
        right: 24px;
        max-width: 100%;
    }

    .cap-stats {
        left: 24px;
        right: 24px;
        flex-wrap: wrap;
        gap: 24px;
        bottom: 50px;
    }

    .cap-stat {
        flex: 0 0 45%;
    }

    .cap-number {
        font-size: 30px;
    }

    /* SECTION 6 — NEWS + NEWSLETTER */
    .news-card {
        flex: 0 0 calc(80% - 10px);
    }

    .news-track-container {
        padding: 20px 50px;
    }

    .newsletter-input {
        width: 200px;
    }

    /* SECTION 8 — CERTS + CTA */
    .s8-certs {
        padding: 70px 24px 16px;
    }

    .cert-logos {
        gap: 20px 28px;
    }

    .s8-cta-content {
        max-width: 100%;
    }

    .s8-line1,
    .s8-line2 {
        font-size: 34px;
        line-height: 40px;
    }

    .s8-desc {
        font-size: 11px;
        line-height: 21px;
    }

    /* Section 2 (Winding) — kolom mesin bisa berisi video */
    .machine-col video {
        max-height: 240px;
    }

    /* FOOTER */
    .footer-main {
        flex-direction: column;
        padding: 40px 24px 28px;
        gap: 36px;
    }

    .footer-brand {
        flex-direction: column;
        gap: 20px;
        max-width: 100%;
    }

    .footer-nav {
        gap: 32px;
    }

    .footer-bottom {
        padding: 14px 24px;
    }

    /* ABOUT PAGE */
    .container {
        padding: 24px;
    }

    .about-us-hero__people {
        gap: 32px;
    }

    .about-us-notes {
        padding: 64px 24px;
    }

    .about-us-notes__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about-us-notes__side {
        order: -1;
    }

    .about-us-features {
        grid-template-columns: 1fr;
        padding: 40px 24px 64px;
        gap: 40px;
    }

    .about-us-features__col {
        gap: 40px;
    }

    .about-us-gallery {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
    }

    .about-us-tongs__stage {
        height: 240px;
    }

}

/* MOBILE KECIL (≤768px) — tuning tambahan untuk Certifications Belt */
@media (max-width: 768px) {
    .cert-logo-item {
        width: 110px;
        margin: 0 18px;
    }

    .cert-belt-track {
        animation-duration: 18s;
    }
}
/* POPPINS (semua halaman) + FOOTER + HALAMAN PRODUK */

/* FONT: Poppins untuk seluruh situs */
body,
button, input, textarea, select,
.newsletter-input, .newsletter-btn {
    font-family: 'Poppins', sans-serif;
}

/* FOOTER — abu gelap, logo + 3 kolom link + copyright */
.site-footer {
    background: #575757;
    color: #e6e6e6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
    padding: 0;
}

.footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 56px 60px 40px;
    gap: 60px;
    flex: 1;
}

.footer-brand { display: flex; align-items: flex-start; flex: 0 0 auto; }
.footer-logo img { width: 84px; height: auto; display: block; }

.footer-nav {
    display: flex;
    gap: 90px;
    flex-shrink: 0;
    margin-right: 40px;
}
.footer-nav-col {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
}
/* Link Section — Poppins Regular 12 / 18 / 1.2px */
.footer-nav-col li a {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.2px;
    color: #d8d8d8;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-nav-col li a:hover { color: #ffffff; }

.footer-bottom {
    border-top: none;              /* garis putih dihilangkan */
    padding: 0 60px 40px;
}
/* COPYRIGHT — Poppins Regular 13 / 23 / 1.2px */
.footer-bottom p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 23px;
    letter-spacing: 1.2px;
    color: #d8d8d8;
    margin: 0;
    text-transform: uppercase;
}

/* HALAMAN PRODUK — grid katalog */
.products-page {
    padding: 120px 0 20px;               /* jarak bawah ke footer sesuai desain */
    background: #ffffff;
    min-height: 100vh;
}
.products-page__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 45px;
    color: var(--about-us-dark, #111111);
    margin: 0 0 120px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    /* Full-bleed: kartu melebar sampai dekat tepi layar, sesuai desain */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0 20px;
    box-sizing: border-box;
}
.products-empty {
    grid-column: 1 / -1;
    padding: 48px 0;
    color: #888;
    text-align: center;
}

/* KARTU PRODUK (dipakai di grid & baris "produk lain") */
.product-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f2f2f4;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.product-card.is-clickable { cursor: pointer; }
.product-card.is-clickable:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);   /* shadow tipis */
}
.product-card.is-clickable:focus-visible {
    outline: 2px solid var(--about-us-dark, #111);
    outline-offset: 2px;
}
.product-card__media {
    aspect-ratio: 1 / 1;
    background: #f2f2f4;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.product-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;              /* gambar MEMENUHI kartu, tanpa bingkai putih */
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}
.product-card.is-clickable:hover .product-card__media img { transform: scale(1.04); }
.product-card__media.is-placeholder::after {
    content: ""; width: 56px; height: 56px; border-radius: 8px; background: #e2e2e2;
}

/* Badge PE — TRANSPARAN | Poppins Regular 15 / 29 */
.product-card__badge {
    position: absolute;
    top: 14px; left: 16px;
    z-index: 2;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 29px;
    color: #333;
    background: transparent;
    border: 1px solid #b9b9b9;
    border-radius: 999px;
    padding: 0 14px;
}
/* Ne 10-40 — Poppins Regular 15 / 29 */
.product-card__ne {
    position: absolute;
    top: 5px; right: 12px;
    z-index: 2;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
}

.product-card__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 18px;
    background: transparent;         /* tanpa gradasi putih */
}
/* Nama produk — Poppins SemiBold 18 / 29 */
.product-card__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 29px;
    color: var(--about-us-dark, #111);
    margin: 0;
    text-transform: uppercase;
}

/* Penomoran halaman grid — Poppins Medium 12 / 25 / 1.2px */
.pager {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-top: 48px;
}
.pager__num,
.pager__arrow {
    min-width: 30px; height: 30px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: #6b6b6b;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pager__num:hover, .pager__arrow:hover { color: var(--about-us-dark, #111); }
.pager__num.is-active {
    color: var(--about-us-dark, #111);
    text-decoration: underline;
    text-underline-offset: 5px;
}
.pager__arrow { font-size: 16px; }
.pager__arrow.is-disabled { color: #cfcfcf; cursor: default; }

/* POPUP QUICK-VIEW — layout 2×2 */
.product-modal[hidden] { display: none; }
.product-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.product-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(20, 20, 20, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.product-modal__panel {
    position: relative; z-index: 1;
    width: min(680px, 100%);
    height: auto;                        /* menyesuaikan isi → tanpa scrollbar */
    max-height: 92vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 4px;
    padding: 40px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    animation: productModalIn 0.28s ease both;
}
@keyframes productModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.product-modal__close {
    position: absolute; top: 22px; left: 26px;
    width: 32px; height: 32px;
    border: none; background: transparent;      /* lingkaran dihilangkan */
    font-size: 26px; line-height: 1; color: #222;
    cursor: pointer; border-radius: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}
.product-modal__close:hover { opacity: 0.55; background: transparent; color: #222; }
.product-modal__close:focus { outline: none; }   /* hilangkan kotak fokus */

.product-modal__grid {
    position: relative;                 /* untuk specs yang mengambang */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "media media"
        "info  swatch";
    gap: 40px 70px;                      /* jarak deskripsi ↔ gambar kain */
    align-items: start;
}
a.product-modal__media {
    grid-area: media;
    min-height: 300px;
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 0;
    text-decoration: none; cursor: pointer; overflow: hidden;                   /* cone sedikit ke kanan, seperti PDF */
    box-sizing: border-box;
}
a.product-modal__media img {
    max-height: 290px; max-width: 230px;  /* ukuran cone sesuai PDF */
    object-fit: contain; transition: transform 0.3s ease;
}
a.product-modal__media:hover img { transform: scale(1.03); }
.product-modal__media.is-placeholder::after {
    content: ""; width: 90px; height: 90px; border-radius: 10px; background: #ececec;
}
.product-modal__specs {
    position: absolute;                 /* mengambang di kanan-atas panel */
    top: 0; right: 0;
    z-index: 2;
    display: flex; flex-direction: column;
    gap: 18px;                          /* jarak antar baris spesifikasi */
    text-align: right;
}
/* Nilai spesifikasi — Poppins Bold 28 / 65 | Label — Poppins Regular 12 / 29 / 1px */
.product-modal__spec-value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;                  /* statistik dikecilkan (sesuai PDF) */
    color: var(--about-us-dark, #111);
}
.product-modal__spec-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;                  /* label kecil, nempel di bawah nilai */
    letter-spacing: 1px;
    color: #8a8a8a;
    margin-top: 2px;
}
.product-modal__info { grid-area: info; padding-bottom: 20px; }   /* jarak bawah ke swatch */
.product-modal__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 36px;
    color: var(--about-us-dark, #111);
    margin: 0 0 12px;
    text-transform: uppercase;
}
.product-modal__desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: #5a5a5a;
    margin: 0 0 8px;
    max-width: 38ch;
    text-align: justify;                /* rata kanan-kiri */
}
.product-modal__swatch {
    grid-area: swatch;
    align-self: start;
    margin-top: 48px;                   /* rata atas dengan baris pertama deskripsi */
}
.product-modal__swatch img {
    width: 160px; max-width: 160px;
    aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: 2px; margin-left: auto; display: block;
}
.product-modal__footer {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e4e4e4;       /* SEPARATOR di bawah deskripsi & gambar kain */
    display: flex;
    justify-content: center;
}
.product-modal__detail-link {
    display: inline-flex; align-items: center; gap: 8px;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--about-us-dark, #111);
    transition: opacity 0.2s ease;
}
.product-modal__detail-link:hover { opacity: 0.6; }

/* HALAMAN DETAIL PRODUK — 3 kolom (sesuai desain) */
.product-detail {
    padding: 104px 0 32px;
    background: #ffffff;
    min-height: 100vh;
}
.product-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.8fr;
    gap: 28px 48px;
    align-items: stretch;          /* cone mengisi tinggi penuh baris */
    min-height: 0;
}

/* KIRI — judul (Poppins Medium 40/45) + deskripsi (Poppins Medium 11/25/1.2px) */
.product-detail__info { align-self: start; }   /* judul & deskripsi rata atas */
.product-detail__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 45px;
    color: var(--about-us-dark, #111);
    margin: 0 0 20px;
    text-transform: uppercase;
}
.product-detail__desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: #5a5a5a;
    margin: 0 0 10px;
    max-width: 38ch;
    text-align: justify;           /* rata kanan-kiri */
}

/* TENGAH — cone */
.product-detail__media {
    align-self: stretch;
    display: flex; align-items: stretch; justify-content: center;
    background: #ffffff;
}
.product-detail__media img {
    height: 100%;
    width: 100%;
    max-height: 54vh;              /* dibatasi → hero + pagination muat 1 layar */
    object-fit: contain;
}
.product-detail__media.is-placeholder::after {
    content: ""; width: 100px; height: 100px; border-radius: 10px; background: #ececec;
}

/* KANAN — spesifikasi + swatch */
.product-detail__side {
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: flex-start;
    gap: 26px;
}
.product-detail__specs {
    display: flex; flex-direction: column;
    gap: 8px; text-align: right;
}
/* Nilai — Poppins Bold 28 / 65 */
.product-detail__spec-value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 45px;
    color: var(--about-us-dark, #111);
}
/* Label — Poppins Regular 12 / 29 / 1px */
.product-detail__spec-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 1px;
    color: #8a8a8a;
}
.product-detail__swatch img {
    width: 100%; max-width: 230px;
    aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: 2px; display: block;
}

/* Swiper */
.pd-swiper { position: relative; }
.pd-viewport {
    overflow: hidden;
    touch-action: pan-y;
    perspective: 1400px;                 /* ruang 3D untuk efek swap */
}
.pd-track {
    display: grid;                        /* semua slide DITUMPUK di sel yang sama */
    transform: none !important;           /* tidak ada geser menyeluruh */
}
.pd-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.85s;
}
.pd-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    z-index: 1;
}

.pd-slide .product-detail__info,
.pd-slide .product-detail__side {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);   /* fade halus, tanpa bounce */
}
.pd-slide .product-detail__media img {
    opacity: 0;
    filter: blur(16px);
    transform: scale(1.07);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
                filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, filter, transform;
}
.pd-slide.is-active .product-detail__media img {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}
.pd-slide.is-active .product-detail__info { opacity: 1; }
.pd-slide.is-active .product-detail__side { opacity: 1; }

/* Kontrol: ‹ 3 4 5 › (tengah) + SEE ALL > (kanan) */
.pd-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 40px;                    /* jarak dari gambar benang */
    min-height: 34px;

    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0 20px;
    box-sizing: border-box;
}
.pd-pager {
    grid-column: 2;
    justify-self: center;
    display: flex; align-items: center; gap: 42px;   /* jarak panah ↔ angka */
}
/* Jarak ANTAR ANGKA (1 2 3) — sesuai UI/UX: 42px */
.pd-pager__nums {
    display: inline-flex;
    align-items: center;
    gap: 22px;
}
/* reset tampilan tombol bawaan browser/tema */
.pd-pager__num,
.pd-pager__arrow {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Penomoran — Poppins Medium 12 / 25 / 1.2px */
.pd-pager__num {
    background: none; border: none; cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: #6b6b6b;
    padding: 2px 6px;
    transition: color 0.2s ease;
}
.pd-pager__num:hover { color: var(--about-us-dark, #111); }
.pd-pager__num.is-active {
    color: var(--about-us-dark, #111);
    text-decoration: underline;
    text-underline-offset: 5px;
}
.pd-pager__arrow {
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: #6b6b6b;
    padding: 2px 6px;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.pd-pager__arrow:hover:not(:disabled) { color: var(--about-us-dark, #111); }
.pd-pager__arrow:disabled { opacity: 0.3; cursor: default; }

/* SEE ALL > — Poppins Regular 12 / 29 */
.pd-seeall {
    grid-column: 3;
    justify-self: end;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0.5px;
    color: #444;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pd-seeall:hover { color: var(--about-us-dark, #111); }

/* Baris kartu produk lain — 4 KOLOM */
.product-detail__related { margin-top: 20px; }
.product-detail__related .product-card__media {
    aspect-ratio: auto;
    height: clamp(340px, 44vh, 560px);   /* kartu ditinggikan */
}
.product-detail__related .product-card__media img {
    object-fit: cover;                   /* full cover */
    object-position: center top;
}
.product-detail__related .product-card__caption {
    padding: 26px 18px 16px;
    background: transparent;             /* tanpa gradasi putih */
}

/* Full-bleed: baris kartu melebar sampai tepi layar, seperti desain */
.product-detail__related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0 20px;               /* jarak dari tepi kiri-kanan layar */
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .pd-track { transition: none; }
    .pd-slide .product-detail__media img,
    .pd-slide .product-detail__info,
    .pd-slide .product-detail__side { opacity: 1; transform: none; transition: none; }
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .footer-main { flex-direction: column; gap: 36px; padding: 44px 28px 28px; }
    .footer-nav { gap: 48px; margin-right: 0; }
    .footer-bottom { padding: 0 28px 28px; }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 10px; }
    .products-page__title { font-size: 30px; line-height: 36px; }

    .product-modal__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "media" "info" "specs" "swatch";   /* urutan mobile */
        gap: 14px;                                              /* statistik dekat dgn deskripsi */
    }

    .product-modal__specs {
        grid-area: specs;
        position: static;
        display: grid;
        grid-template-columns: 1fr;        /* 3 baris: masing-masing satu baris */
        row-gap: 14px;
        text-align: left;
        margin-top: 0;
    }
    .product-modal__spec-value { line-height: 28px; }
    .product-modal__swatch { margin-top: 0; }
    .product-modal__swatch img { margin-left: 0; max-width: 180px; }
    .product-modal__info {padding-bottom: 0px; }

    .product-detail__grid { grid-template-columns: 1fr; gap: 16px; min-height: 0; }
    .product-detail__info, .product-detail__side { align-self: start; align-items: flex-start; }

    /* Urutan mobile: gambar benang PALING ATAS → judul + deskripsi → statistik → kain */
    .product-detail__media { order: 1; }
    .product-detail__info  { order: 2; }
    .product-detail__side  { order: 3; width: 100%; }

    .product-detail__specs {
        display: grid;
        grid-template-columns: 1fr;        /* 3 baris: masing-masing satu baris */
        row-gap: 14px;
        text-align: left;
        width: 100%;
    }
    .product-detail__spec-value { line-height: 32px; }
    .product-detail__title { font-size: 30px; line-height: 36px; }

    /* Deskripsi full, tidak terpotong di kanan */
    .product-detail__desc { max-width: none; width: 100%; }

    .product-detail__related-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px; gap: 12px; }
    .pd-controls {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
    }
    .pd-pager, .pd-seeall { grid-column: 1; justify-self: center; }
}

@media (max-width: 768px) {
    .products-page { padding-top: 96px; }
    .product-detail { padding-top: 104px; }

    .product-modal { padding: 16px; }
    .product-modal__panel { padding: 60px 22px 24px; height: auto; max-height: calc(100vh - 32px); }
    .product-modal__grid { grid-template-rows: auto auto; grid-template-columns: 1fr; height: auto; }
    a.product-modal__media { padding-left: 0; min-height: 220px; }
    a.product-modal__media img { max-height: 240px; }
    .product-modal__swatch { margin-top: 0; }
    .product-modal__close { top: 16px; left: 18px; width: 30px; height: 30px; font-size: 24px; }
    .product-modal__title { font-size: 26px; line-height: 32px; }
    .product-modal__specs { row-gap: 14px; }
    .product-modal__desc { max-width: none; width: 100%; }
    .product-modal__info {padding-bottom: 0px; }
}

@media (max-width: 560px) {
    .products-grid { grid-template-columns: 1fr; gap: 10px; }
    .product-detail__related-grid { grid-template-columns: 1fr; }
}

/* FOOTER — tampil langsung, tanpa animasi reveal */
.site-footer .reveal,
.site-footer .reveal-up,
.site-footer .reveal-left,
.site-footer .reveal-right,
.site-footer .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* HALAMAN "DAFTAR TUR" / KONTAK  (contact.blade.php) */
:root {
    --tour-ink:      #1c1c1c;   /* teks utama gelap */
    --tour-body:     #4a4a4a;   /* teks paragraf */
    --tour-muted:    #9a9a9a;   /* label / caption */
    --tour-line:     #ececec;   /* garis pemisah tipis */
    --tour-field:    #f2f2f2;   /* background input */
    --tour-btn-hover:#4b4b4b;   /* abu tua saat hover btn */
    --about-us-gray: #efefef;   /* fallback bg reveal-img */
}

/* HERO (banner aerial full-width) */
.tour-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 45 / 28;        /* = 1440/896, rasio asli gambar banner (tanpa crop) */
    max-height: 100vh;
    overflow: hidden;
    background: var(--about-us-gray);
}
.tour-hero__bg.reveal-img { position: absolute; inset: 0; z-index: 0; }

/* Fade putih dari atas hero agar menyatu dengan navbar putih (sesuai PDF). */
.tour-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 190px;
    background: linear-gradient(to bottom,
        #ffffff 0%,
        rgba(255, 255, 255, 0.85) 26%,
        rgba(255, 255, 255, 0.45) 55%,
        rgba(255, 255, 255, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

/* WRAPPER HALAMAN */
.tour-page { background: #ffffff; padding-bottom: 40px; }

/* KEPALA: JUDUL + TOMBOL (tengah) */
.tour-head {
    display: flex;
    flex-direction: column;
    align-items: center;          /* judul/subjudul/tombol tetap di tengah */
    text-align: center;
    max-width: 1200px;            /* header tetap di container standar & center (sesuai PDF 1) */
    margin: 52px auto 8px;
    padding-top: 8px;
}
.tour-badge {
    display: inline-block;
    border: 1px solid #d8d8d8;
    border-radius: 40px;
    padding: 5px 18px;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--tour-muted);
    align-self: flex-start;       /* SERTIFIKASI di pojok kiri atas */
    margin-bottom: 28px;
}
.tour-head__title {
    font-size: 47px;              /* Poppins Medium 47 */
    font-weight: 500;
    line-height: 50px;            /* 50px */
    letter-spacing: 0.012em;      /* 1.2% */
    color: var(--tour-ink);
    max-width: 620px;
    margin: 0 auto;
}
.tour-head__subtitle {
    font-size: 28px;              /* Poppins Medium 28 */
    font-weight: 500;
    line-height: 34px;            /* 34px */
    letter-spacing: 0.012em;      /* 1.2% */
    color: #2b2b2b;
    margin: 18px auto 0;
    max-width: 520px;
}

/* TOMBOL DAFTAR (outline pill) */
.tour-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbcbcb;
    background: transparent;
    color: #333333;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 12px 42px;
    border-radius: 40px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tour-btn:hover,
.tour-btn:focus-visible {
    background: var(--tour-btn-hover);   /* abu tua */
    color: #ffffff;
    border-color: var(--tour-btn-hover);
    outline: none;
}
.tour-head__btn { margin-top: 26px; }

/* LAYOUT 2 KOLOM */
.tour-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    max-width: 1272px;            /* lebar blok dua kolom sesuai PDF 1 (cap utk layar lebar) */
    width: auto;
    /* margin-kiri = posisi konten container 1200 yang di-center; margin-kanan rapat */
    margin-left: calc(max(0px, (100% - 1200px) / 2) + 60px);
    margin-right: 32px;           /* rapat ke kanan seperti PDF 1 */
    padding: 0;                   /* padding .container diganti margin di atas */
    margin-top: 44px;
    align-items: start;
}

/* ARTIKEL (kiri) */
.tour-meta {
    font-size: 13px;
    font-weight: 500;
    color: var(--tour-ink);
    margin-bottom: 22px;
}
.tour-meta__sep { margin: 0 10px; color: #c4c4c4; }
.tour-meta__loc { color: #555; font-weight: 400; }

.tour-prose p,
.tour-prose__p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--tour-body);
    text-align: justify;
    margin-bottom: 16px;
}

.tour-figure { margin: 30px 0 8px; }
.tour-figure__img.reveal-img {
    width: 100%;
    aspect-ratio: 19 / 10;        /* proporsi foto artikel sesuai PDF 1 (~1.9:1) */
    border-radius: 2px;
}
.tour-figure figcaption {
    margin-top: 12px;
    font-size: 12px;
    font-style: italic;
    line-height: 1.7;
    color: #8f8f8f;
}

.tour-block { margin-top: 30px; }
.tour-h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--tour-ink);
    margin: 0 0 12px;
}
.tour-block__intro,
.tour-block__lead {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
    color: var(--tour-body);
    margin-bottom: 12px;
}

/* Tujuan Kunjungan — daftar tanpa bullet (sesuai PDF) */
.tour-list { list-style: none; margin: 0; padding: 0; }
.tour-list li {
    font-size: 14px;
    line-height: 1.9;
    color: var(--tour-body);
    margin-bottom: 6px;
}

/* Rundown / jadwal */
.tour-schedule { list-style: none; margin: 0; padding: 0; }
.tour-schedule li {
    display: flex;
    gap: 14px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--tour-body);
    padding: 2px 0;
}
.tour-schedule__time {
    flex: 0 0 132px;
    color: var(--tour-ink);
    font-weight: 500;
}
.tour-schedule__act { flex: 1; }

/* Area produksi (list bernomor manual) */
.tour-areas { list-style: none; margin: 6px 0 0; padding: 0; }
.tour-area { margin-bottom: 16px; }
.tour-area__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tour-ink);
    margin: 0 0 4px;
}
.tour-area__desc {
    font-size: 14px;
    line-height: 1.9;
    color: var(--tour-body);
    text-align: justify;
    margin: 0;
}

/* SIDEBAR (kanan) */
.tour-sidebar { position: relative; }
.tour-news { margin-bottom: 40px; }
.tour-news__heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--tour-ink);
    padding-bottom: 10px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--tour-line);
}
.tour-news__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid var(--tour-line);
}
.tour-news__item:hover .tour-news__title { color: #000; }
.tour-news__text { flex: 1; min-width: 0; }
.tour-news__cat {
    display: block;
    font-size: 9px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--tour-muted);
    margin-bottom: 6px;
}
.tour-news__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--tour-ink);
    margin: 0 0 8px;
    transition: color .2s ease;
}
.tour-news__date { font-size: 10.5px; color: #a6a6a6; }
.tour-news__thumb {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--about-us-gray);
}
.tour-news__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* MODAL FORM PENDAFTARAN */
.tour-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tour-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(24, 24, 24, 0.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tour-modal__panel {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: #ffffff;
    padding: 80px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
    animation: tourModalIn .28s ease both;
}
@keyframes tourModalIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.tour-modal__close {
    position: absolute;
    top: 16px;
    left: 18px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #9a9a9a;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease;
}
.tour-modal__close:hover { color: #333; }

.tour-modal__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--tour-ink);
    margin: 4px 0 6px;
}
.tour-modal__required {
    font-size: 11px;
    color: #7a7a7a;
    margin-bottom: 22px;
}

/* FORM */
.tour-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.tour-field { min-width: 0; }
.tour-field--full { grid-column: 1 / -1; }

.tour-input {
    width: 100%;
    background: var(--tour-field);
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    transition: background-color .2s ease, border-color .2s ease;
}
.tour-input::placeholder { color: #9a9a9a; }
.tour-input:focus {
    outline: none;
    background: #ffffff;
    border-color: #cbcbcb;
}
.tour-input.is-error { border-color: #e0736b; background: #fff5f4; }

/* Telepon: kode negara + nomor */
.tour-phone { display: flex; gap: 8px; }
.tour-phone__code {
    flex: 0 0 88px;
    padding-right: 26px;
}
.tour-phone__num { flex: 1; }

/* Select dengan caret custom */
.tour-select { position: relative; }
select.tour-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.tour-form__privacy {
    font-size: 11px;
    line-height: 1.7;
    color: #8a8a8a;
    margin: 20px 0 22px;
}
.tour-form__wa { color: #555; white-space: nowrap; }

.tour-form__submit { margin-top: 2px; }

/* TOAST SUKSES */
.tour-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 20px);
    background: #2b2b2b;
    color: #fff;
    font-size: 13px;
    padding: 13px 22px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    z-index: 2500;
}
.tour-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Kunci scroll latar saat modal terbuka */
.tour-modal-open .page-wrapper { overflow: hidden; }

/* RESPONSIVE — HALAMAN DAFTAR TUR */
@media (max-width: 992px) {
    .tour-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .tour-sidebar { max-width: 560px; }
}

@media (max-width: 640px) {
    .tour-hero { aspect-ratio: 45 / 28; max-height: 60vh; }
    .tour-head { margin-top: 36px; }
    .tour-head__title { font-size: 28px; line-height: 32px; }
    .tour-head__subtitle { font-size: 18px; line-height: 24px; }
    .tour-btn { padding: 11px 34px; font-size: 12px; }

    .tour-schedule li { flex-direction: column; gap: 0; padding: 6px 0; }
    .tour-schedule__time { flex: none; }

    .tour-modal { padding: 14px; }
    .tour-modal__panel { padding: 52px 22px 26px; }
    .tour-form__grid { grid-template-columns: 1fr; }
    .tour-figure__img.reveal-img { aspect-ratio: 16 / 10; }
}

/* Cegah grid blowout oleh teks panjang / justify */
.tour-article { min-width: 0; }

/* HALAMAN TECHNOLOGY */

/* Scroll snap: proximity (snap lembut, tidak "nyangkut" di 6 layar). */
.page-technology .page-wrapper {
    scroll-snap-type: y proximity;
}

/* Section penuh 1 layar */
.page-technology .tech-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    scroll-snap-align: start;
    background: #14141a;
}

/* ── Lapisan media (foto/video) — saling menumpuk, fade antar slide ── */
.tech-media { position: absolute; inset: 0; }

.tech-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}
.tech-layer.active { opacity: 1; }

video.tech-layer { width: 100%; height: 100%; object-fit: cover; }

.tech-layer--empty {
    background: linear-gradient(135deg, #23232b 0%, #14141a 100%);
    opacity: 1;
}

.tech-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.page-technology .pos-bottom .tech-overlay {
    background: linear-gradient(to top,
        rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.30) 42%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 100%);
}
.page-technology .pos-top .tech-overlay {
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.30) 42%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 100%);
}

/* ── Wrapper posisi kartu ── */
.tech-panel {
    position: absolute;
    z-index: 5;
    left: 60px;
    right: 60px;
    display: flex;
}
/* Vertikal: bawah / atas */
.page-technology .pos-bottom .tech-panel { bottom: 92px; align-items: flex-end; }
.page-technology .pos-top    .tech-panel { top: 104px;    align-items: flex-start; }
/* Horizontal: kiri / kanan */
.page-technology .pos-left  .tech-panel { justify-content: flex-start; }
.page-technology .pos-right .tech-panel { justify-content: flex-end; }

/* ── Kotak kaca doff (frosted glass) — SATU kartu berisi teks + statistik ── */
.tech-glass {
    display: flex;
    align-items: stretch;
    gap: 34px;
    max-width: 460px;                 /* tanpa statistik → ramping */
    padding: 26px 32px;
    background: rgba(18, 18, 24, 0.34);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.tech-glass.has-stats { max-width: 700px; } /* dengan statistik → lebih lebar */

.tech-glass-text { flex: 1 1 auto; max-width: 420px; }

.tech-title {
    font-size: 34px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 1.15;
    margin: 0 0 14px 0;
}
.tech-desc {
    font-size: 12.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.9);
    text-align: justify;
    margin: 0;
}

/* ── Statistik DI DALAM kartu (kolom kanan, dipisah garis tipis) ── */
.tech-glass-stats {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding-left: 34px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.tech-stat { color: #ffffff; }
.tech-number {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.tech-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 8px;
    line-height: 1.4;
}

/* ── Flip counter chars (dipakai JS animateCounter) ── */
.tech-number .flip-char { display: inline-block; }
.tech-number .flip-char.flip-anim { animation: techFlip 0.18s ease; }
@keyframes techFlip {
    0%   { transform: rotateX(-90deg); opacity: 0.35; }
    100% { transform: rotateX(0);      opacity: 1; }
}

/* ── Chevron dropdown (pengganti tombol bundar + dots) ── */
.tech-chevron {
    position: absolute;
    z-index: 6;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: techChevronBounce 2s ease-in-out infinite;
}
.tech-chevron svg { width: 32px; height: 32px; display: block; }
.tech-chevron:hover { color: #ffffff; }
@keyframes techChevronBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

/* RESPONSIVE — TABLET / MOBILE */
@media (max-width: 992px) {
    .tech-panel { left: 40px; right: 40px; }
    .page-technology .pos-bottom .tech-panel { bottom: 80px; }
    .tech-glass.has-stats { max-width: 620px; }
    .tech-number { font-size: 36px; }
    .tech-title  { font-size: 30px; }
}

@media (max-width: 640px) {
    .tech-panel { left: 22px; right: 22px; }
    .page-technology .pos-bottom .tech-panel { bottom: 60px; }
    .page-technology .pos-top    .tech-panel { top: 86px; }

    /* Kartu jadi menumpuk: teks di atas, statistik di bawah */
    .tech-glass,
    .tech-glass.has-stats {
        flex-direction: column;
        gap: 20px;
        max-width: 100%;
        padding: 20px 22px;
    }
    .tech-glass-text { max-width: 100%; }

    .tech-glass-stats {
        flex-direction: row;
        gap: 30px;
        padding-left: 0;
        padding-top: 18px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .tech-title { font-size: 26px; margin-bottom: 10px; }
    .tech-desc  { font-size: 12px; line-height: 1.75; }
    .tech-number { font-size: 30px; }
    .tech-stat-label { font-size: 11px; }

    .tech-chevron { bottom: 20px; }
    .tech-chevron svg { width: 28px; height: 28px; }
}

/* Hormati preferensi kurangi-gerak */
@media (prefers-reduced-motion: reduce) {
    .tech-layer { transition: none; }
    .tech-chevron { animation: none; }
}
/* HALAMAN BERITA / NEWS  (List + Detail) */

/* HERO LIST */
.news-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: none;
    overflow: hidden;
    background: var(--about-us-gray);
}
.news-hero.no-img { aspect-ratio: 45 / 8; background: #e9e9e9; }
.news-hero__bg.reveal-img { position: absolute; inset: 0; z-index: 0; }
.news-hero::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 170px;
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 100%);
    z-index: 2; pointer-events: none;
}

/* WRAPPER */
.news-page { background: #fff; padding-bottom: 56px; }

/* FILTER BAR */
.news-filterbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 64px auto 40px;
    padding: 0 60px;
}
.news-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.news-chip {
    display: inline-block;
    border: 1px solid #dcdcdc;
    border-radius: 40px;
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #4a4a4a;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.news-chip:hover { border-color: #9a9a9a; color: #111; }
.news-chip.is-active { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }

/* Tombol FILTERS + dropdown sort */
.news-filters { position: relative; flex: 0 0 auto; }
.news-filters__btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase; color: #3a3a3a;
    padding: 8px 4px;
}
.news-filters__btn:hover { color: #000; }
.news-filters__menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: #fff; border: 1px solid #e6e6e6; border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    padding: 6px; min-width: 170px; z-index: 20;
}
.news-filters__opt {
    display: block; padding: 8px 12px; border-radius: 6px;
    font-size: 12.5px; color: #444; text-decoration: none;
}
.news-filters__opt:hover { background: #f4f4f4; color: #111; }
.news-filters__opt.is-active { color: #111; font-weight: 600; }

/* Notifikasi filter tanggal aktif */
.news-activefilter {
    max-width: 1200px; margin: 6px auto 0; padding: 10px 60px;
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; color: #555;
}
.news-activefilter strong { color: #1c1c1c; }
.news-activefilter__clear { color: #a23; text-decoration: none; font-weight: 500; }
.news-activefilter__clear:hover { text-decoration: underline; }

/* DAFTAR ARTIKEL */
.news-list { max-width: 1200px; margin: 22px auto 0; padding: 0 60px; }
.news-empty { color: #999; font-size: 14px; padding: 40px 0; text-align: center; }

.news-list .news-card {
    display: grid;
    grid-template-columns: 66px 320px 1fr;
    gap: 40px;
    align-items: start;
    padding: 40px 0;
    border-top: 1px solid var(--tour-line);
    user-select: auto;
}
.news-list .news-card:last-child { border-bottom: 1px solid var(--tour-line); }

/* Kolom tanggal */
.news-card__date {
    display: flex; flex-direction: column; align-items: flex-start;
    text-decoration: none; color: var(--tour-ink); line-height: 1;
    padding-top: 2px;
}
.news-card__day { font-size: 34px; font-weight: 600; letter-spacing: -.5px; }
.news-card__mon { font-size: 10px; font-weight: 600; letter-spacing: 1px; margin-top: 4px; color: #7a7a7a; }
.news-card__wd  { font-size: 10px; font-weight: 500; letter-spacing: 1px; margin-top: 2px; color: #b3b3b3; }
.news-card__date:hover .news-card__day { text-decoration: underline; }

/* Thumbnail */
.news-card__thumb {
    display: block; width: 100%; aspect-ratio: 4 / 3;
    border-radius: 2px; overflow: hidden; background: var(--about-us-gray);
}

/* Body */
.news-card__body { min-width: 0; }
.news-card__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.news-card__cat {
    display: inline-block; border: 1px solid #dcdcdc; border-radius: 40px;
    padding: 4px 12px; font-size: 9.5px; letter-spacing: .8px;
    text-transform: uppercase; color: #9a9a9a; text-decoration: none;
}
.news-card__cat:hover { border-color: #9a9a9a; color: #222; }
.news-card__pax { font-size: 11px; color: #9a9a9a; white-space: nowrap; }

.news-card__title { margin: 0 0 10px; }
.news-card__title a {
    font-size: 23px; font-weight: 500; line-height: 1.25;
    color: var(--tour-ink); text-decoration: none;
}
.news-card__title a:hover { text-decoration: underline; }

.news-card__excerpt {
    font-size: 13px; line-height: 1.75; color: #8f8f8f;
    margin: 0 0 34px; max-width: 560px;
}
.news-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 20px; }
.news-card__meta-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; color: #8a8a8a;
}
.news-card__meta-item svg { color: #b3b3b3; flex: 0 0 auto; }

.news-card__btn {
    display: inline-block; border: 1px solid #cfcfcf; border-radius: 40px;
    padding: 8px 22px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; color: #3a3a3a; text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.news-card__btn:hover { background: var(--tour-btn-hover); border-color: var(--tour-btn-hover); color: #fff; }

/* NEWS DETAIL */
.news-detail-hero {
    position: relative; width: 100%;
    aspect-ratio: 45 / 22; max-height: 78vh;
    overflow: hidden; background: var(--about-us-gray);
}
.news-detail-hero__bg.reveal-img { position: absolute; inset: 0; z-index: 0; }
.news-detail-hero::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 180px;
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 100%);
    z-index: 2; pointer-events: none;
}

.news-detail { background: #fff; padding-bottom: 48px; }

/* Kepala */
.news-detail__head {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    max-width: 780px; margin: 46px auto 8px; padding: 0 20px;
}
.news-detail__badge {
    display: inline-block; border: 1px solid #d8d8d8; border-radius: 40px;
    padding: 5px 18px; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--tour-muted); text-decoration: none; margin-bottom: 26px;
    transition: color .2s ease, border-color .2s ease;
}
.news-detail__badge:hover { color: #222; border-color: #9a9a9a; }
.news-detail__title {
    font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: .012em;
    color: var(--tour-ink); max-width: 680px; margin: 0 auto;
}
.news-detail__subtitle {
    font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: .012em;
    color: #2b2b2b; margin: 18px auto 0; max-width: 560px;
}

/* Layout 2 kolom (sama pola tour-layout) */
.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    max-width: 1272px; width: auto;
    margin-left: calc(max(0px, (100% - 1200px) / 2) + 60px);
    margin-right: 32px;
    padding: 0; margin-top: 40px;
    align-items: start;
}

/* Artikel (kiri) */
.news-article { min-width: 0; }
.news-article__meta { font-size: 13px; font-weight: 500; color: var(--tour-ink); margin-bottom: 24px; }
.news-article__sep { margin: 0 10px; color: #c4c4c4; }
.news-article__loc { color: #555; font-weight: 400; }

/* Isi (RichEditor) */
.article-body { color: var(--tour-body); }
.article-body p {
    font-size: 14px; line-height: 1.9; color: var(--tour-body);
    text-align: justify; margin: 0 0 16px;
}
.article-body h2 { font-size: 15px; font-weight: 700; color: var(--tour-ink); margin: 28px 0 12px; }
.article-body h3 { font-size: 14px; font-weight: 700; color: var(--tour-ink); margin: 20px 0 8px; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; }
.article-body li { font-size: 14px; line-height: 1.9; color: var(--tour-body); margin-bottom: 4px; }
.article-body blockquote {
    margin: 20px 0; padding-left: 16px; border-left: 3px solid #e2e2e2;
    font-style: italic; color: #555;
}
.article-body img { max-width: 100%; height: auto; border-radius: 2px; margin: 12px 0; }

.article-body a {
    color: inherit; text-decoration: underline;
    text-underline-offset: 2px; text-decoration-thickness: 1px;
    transition: color .15s ease;
}
.article-body a:hover { color: #000; text-decoration-thickness: 1.5px; }

/* Kutipan besar (pull quote) */
.news-quote { margin: 40px auto 8px; max-width: 620px; text-align: center; }
.news-quote__text {
    margin: 0; font-size: 22px; line-height: 1.5; font-style: italic;
    color: #2a2a2a; letter-spacing: .2px;
}
.news-quote__by { margin-top: 18px; font-size: 12px; color: #8a8a8a; }
.news-quote__role { color: #6a6a6a; }
.news-quote__sep { margin: 0 6px; color: #c4c4c4; }
.news-quote__name { color: #3a3a3a; font-weight: 500; }

/* SIDEBAR (kanan, bisa scroll) */
.news-sidebar { min-width: 0; }

.news-side--sticky {
    position: sticky; top: 92px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
}
.news-side--sticky::-webkit-scrollbar { width: 6px; }
.news-side--sticky::-webkit-scrollbar-thumb { background: #d6d6d6; border-radius: 4px; }
.news-side--sticky::-webkit-scrollbar-track { background: transparent; }

.news-side__block { margin-bottom: 36px; }
.news-side__heading {
    font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--tour-ink); padding-bottom: 10px; margin: 0 0 4px;
    border-bottom: 1px solid var(--tour-line);
}
.news-side__item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 15px 0; border-bottom: 1px solid var(--tour-line);
}
.news-side__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.news-side__cat {
    font-size: 9px; letter-spacing: .7px; text-transform: uppercase;
    color: var(--tour-muted); text-decoration: none; margin-bottom: 6px;
    align-self: flex-start;
}
.news-side__cat:hover { text-decoration: underline; color: #666; }
.news-side__title {
    font-size: 13px; font-weight: 600; line-height: 1.45;
    color: var(--tour-ink); text-decoration: none; margin-bottom: 8px;
    transition: color .2s ease;
}
.news-side__title:hover { text-decoration: underline; color: #000; }
.news-side__date {
    font-size: 10.5px; color: #a6a6a6; text-decoration: none; align-self: flex-start;
}
.news-side__date:hover { text-decoration: underline; color: #7a7a7a; }
.news-side__thumb {
    flex: 0 0 62px; width: 62px; height: 62px; border-radius: 6px;
    overflow: hidden; background: var(--about-us-gray);
}
.news-side__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .news-layout {
        grid-template-columns: 1fr;
        margin: 34px auto 0; max-width: 720px; padding: 0 28px;
    }
    .news-side--sticky { position: static; max-height: none; overflow: visible; padding-right: 0; }
    .news-sidebar { max-width: 560px; }
}

@media (max-width: 760px) {
    .news-filterbar, .news-list, .news-activefilter { padding-left: 22px; padding-right: 22px; }
    .news-detail__title { font-size: 28px; }
    .news-detail__subtitle { font-size: 17px; }

    /* Kartu list jadi vertikal */
    .news-list .news-card {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 26px 0;
    }
    .news-card__date { flex-direction: row; align-items: baseline; gap: 8px; }
    .news-card__day { font-size: 20px; }
    .news-card__mon, .news-card__wd { margin-top: 0; }
    .news-card__thumb { aspect-ratio: 16 / 9; max-height: 220px; }
    .news-card__title a { font-size: 19px; }
}

/* NEWS LIST — PENYESUAIAN FINAL SESUAI DESAIN "JOURNAL" (v2) */

/* 1) CHIPS FILTER */
.news-filterbar {
    max-width: 1200px;
    margin: 56px auto 34px;
    padding: 0 60px;
    align-items: flex-start;
}
.news-chips { max-width: 830px; gap: 10px 8px; }
.news-chip { padding: 6px 14px; font-size: 10px; letter-spacing: .5px; }

/* 2) GRID KARTU */
.news-list { max-width: 1200px; margin: 0 auto; padding: 0 60px; }

.news-list .news-card {
    display: grid;
    grid-template-columns: 96px 345px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 34px 0;
}

/* 3) GAMBAR BERITA */
.news-list .news-card__thumb {
    width: 100%;
    max-width: 345px;
    aspect-ratio: 5 / 4;
    border-radius: 2px;
    overflow: hidden;
}
.news-list .news-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* 4) KOLOM TANGGAL (GRID 2x2) */
.news-list .news-card__date {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 7px;
    row-gap: 2px;
    justify-content: start;
    align-items: start;
    width: auto;
    padding-top: 0;
    line-height: normal;
    text-decoration: none;
    flex-wrap: nowrap;
}

/* Poppins Medium 48 — LS 0 */
.news-list .news-card__day {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    font-family: 'Poppins', sans-serif;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: .92 !important;
    letter-spacing: 0 !important;
    color: #1c1c1c;
    margin: 0 !important;
}

/* Poppins Bold 15 — sejajar bagian atas angka */
.news-list .news-card__mon {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    font-family: 'Poppins', sans-serif;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #1c1c1c;
    margin: 3px 0 0 0 !important;
}

/* Poppins Regular 15 — tepat di bawah bulan */
.news-list .news-card__wd {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #9a9a9a;
    margin: 0 !important;
}

/* 5) BODY (lebih sempit) */
.news-card__body  { max-width: 600px; }
.news-card__top   { margin-bottom: 12px; }

.news-card__title { margin: 0 0 8px; }
.news-card__title a {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    max-width: 520px;
    display: inline-block;
}

.news-card__excerpt {
    font-size: 13px;
    line-height: 1.7;
    max-width: 400px;
    margin-bottom: 20px;
}

.news-card__meta { flex-direction: column; gap: 6px; margin-bottom: 18px; }
.news-card__meta-item { font-size: 11.5px; }
.news-card__btn { padding: 8px 20px; font-size: 10px; }

/* 6) RESPONSIVE */
@media (max-width: 1100px) {
    .news-list .news-card { grid-template-columns: 88px 290px minmax(0,1fr); gap: 22px; }
    .news-list .news-card__thumb { max-width: 290px; }
}

@media (max-width: 760px) {
    .news-filterbar, .news-list { padding-left: 22px; padding-right: 22px; }
    .news-chips { max-width: none; }

    .news-list .news-card { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
    .news-list .news-card__thumb { max-width: 100%; aspect-ratio: 16 / 9; }

    .news-list .news-card__date { column-gap: 6px; }
    .news-list .news-card__day { font-size: 30px !important; }
    .news-list .news-card__mon,
    .news-list .news-card__wd { font-size: 12px !important; }

    .news-card__body, .news-card__title a, .news-card__excerpt { max-width: 100%; }
    .news-card__title a { font-size: 19px; }
}

/* REVISI: lebar konten, jarak meta, warna tombol */

/* 1) Kanan-kiri lebih sempit (konten News saja) */
.news-filterbar,
.news-list,
.news-activefilter {
    max-width: 1100px;
    padding-left: 90px;
    padding-right: 90px;
}

/* 2) Jarak antara deskripsi dengan waktu baca & lokasi */
.news-card__excerpt { margin-bottom: 0; }
.news-list .news-card__meta { margin-top: 30px; margin-bottom: 24px; }

/* 3) Tulisan LEARN MORE / PELAJARI default abu-abu */
.news-card__btn {
    color: #9a9a9a !important;
    border-color: #dcdcdc !important;
    background: transparent !important;
}
.news-card__btn:hover {
    color: #fff !important;
    background: #2b2b2b !important;
    border-color: #2b2b2b !important;
}

@media (max-width: 760px) {
    .news-filterbar,
    .news-list,
    .news-activefilter { padding-left: 22px; padding-right: 22px; }
    .news-list .news-card__meta { margin-top: 20px; }
}

/* REVISI 2: lebar konten & tombol solid */

.news-filterbar,
.news-list,
.news-activefilter {
    max-width: 1140px;
    padding-left: 60px;
    padding-right: 60px;
}

/* Tombol LEARN MORE / PELAJARI: gelap solid seperti PDF */
.news-card__btn {
    background: #4a4a4a !important;
    border: 1px solid #4a4a4a !important;
    color: #ffffff !important;
    border-radius: 40px;
    padding: 9px 22px !important;
    font-size: 10px !important;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.news-card__btn:hover {
    background: #1c1c1c !important;
    border-color: #1c1c1c !important;
    color: #ffffff !important;
}

@media (max-width: 760px) {
    .news-filterbar,
    .news-list,
    .news-activefilter { padding-left: 22px; padding-right: 22px; }
}

/* REVISI 3: padding kanan-kiri 0 */
.news-filterbar,
.news-list,
.news-activefilter {
    max-width: 1140px;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 760px) {
    .news-filterbar,
    .news-list,
    .news-activefilter { padding-left: 20px; padding-right: 20px; }
}

/* REVISI 4 — TINGGI GAMBAR SERAGAM + TIPOGRAFI SESUAI FIGMA */

/* Gambar: ukuran TETAP di semua kartu (tidak ikut memanjang */
.news-list .news-card__thumb {
    width: 345px;
    max-width: 100%;
    height: 276px;              /* 345 x 5:4 */
    aspect-ratio: auto;
    align-self: start;
    flex: 0 0 auto;
    overflow: hidden;
}
.news-list .news-card__thumb .reveal-img__inner,
.news-list .news-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Kategori / pax — Poppins Regular 12 / 29 / LS 0 */
.news-list .news-card__top {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0;
    margin-bottom: 10px;
}
.news-list .news-card__cat,
.news-list .news-card__pax {
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 29px !important;
    letter-spacing: 0 !important;
}
.news-list .news-card__cat { padding: 0 16px; }

/* Judul — Poppins Medium 32 / 37 / LS 1.2% */
.news-list .news-card__title { margin: 0 0 10px; }
.news-list .news-card__title a {
    font-family: 'Poppins', sans-serif;
    font-weight: 500 !important;
    font-size: 32px !important;
    line-height: 37px !important;
    letter-spacing: .012em !important;
    max-width: 100%;
}

/* Deskripsi — Poppins Regular 12 / 25 / LS 1.2px */
.news-list .news-card__excerpt {
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 25px !important;
    letter-spacing: 1.2px !important;
    max-width: 430px;
    margin-bottom: 0;
}

/* Meta (waktu baca & lokasi) — Poppins Medium 10 / 17 / LS 1.2px */
.news-list .news-card__meta { margin-top: 28px; margin-bottom: 22px; }
.news-list .news-card__meta-item {
    font-family: 'Poppins', sans-serif;
    font-weight: 500 !important;
    font-size: 10px !important;
    line-height: 17px !important;
    letter-spacing: 1.2px !important;
}

/* Tombol — bg #58595B, Poppins Regular 12 / 29 / LS 0 */
.news-list .news-card__btn {
    background: #58595B !important;
    border: 1px solid #58595B !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 29px !important;
    letter-spacing: 0 !important;
    padding: 2px 26px !important;
    border-radius: 40px;
}
.news-list .news-card__btn:hover {
    background: #3f4042 !important;
    border-color: #3f4042 !important;
}

@media (max-width: 760px) {
    .news-list .news-card__thumb { width: 100%; height: 220px; }
    .news-list .news-card__title a { font-size: 22px !important; line-height: 28px !important; }
}

/* REVISI 5 — PROPORSI DISAMAKAN DENGAN DESAIN JOURNAL */

/* 1) Konten selebar layar dgn padding 60px (bukan max-width sempit) */
.news-filterbar,
.news-list,
.news-activefilter {
    max-width: 1440px;
    padding-left: 60px;
    padding-right: 60px;
}
.news-chips { max-width: 1000px; }

/* 2) Kolom: tanggal | gambar besar | body */
.news-list .news-card {
    grid-template-columns: 96px 500px minmax(0, 1fr);
    gap: 40px;
    padding: 36px 0;
}

/* 3) Gambar besar & tinggi seragam (500 x 410) */
.news-list .news-card__thumb {
    width: 500px;
    height: 410px;
    max-width: 100%;
    align-self: start;
}

/* 4) Judul lebih sempit (wrap 2 baris seperti desain) */
.news-list .news-card__title a {
    max-width: 430px;
    display: inline-block;
}

/* 5) Deskripsi sempit + rata kanan-kiri seperti desain */
.news-list .news-card__excerpt {
    max-width: 375px;
    text-align: justify;
}

/* 6) Jarak besar sebelum waktu baca & lokasi; lokasi ikut wrap */
.news-list .news-card__meta {
    margin-top: 56px;
    margin-bottom: 20px;
    max-width: 390px;
}
.news-list .news-card__meta-item { align-items: flex-start; }
.news-list .news-card__meta-item svg { margin-top: 3px; }

@media (max-width: 1200px) {
    .news-list .news-card { grid-template-columns: 88px 360px minmax(0,1fr); gap: 28px; }
    .news-list .news-card__thumb { width: 360px; height: 295px; }
    .news-list .news-card__title a { max-width: 100%; }
    .news-list .news-card__excerpt { max-width: 100%; }
    .news-list .news-card__meta { margin-top: 32px; max-width: 100%; }
}

@media (max-width: 760px) {
    .news-filterbar,
    .news-list,
    .news-activefilter { padding-left: 20px; padding-right: 20px; }
    .news-list .news-card__thumb { width: 100%; height: 220px; }
    .news-list .news-card__excerpt { text-align: left; }
}

/* REVISI 6 — META & TOMBOL MENEMPEL DI DASAR GAMBAR */
.news-list .news-card__body {
    display: flex;
    flex-direction: column;
    min-height: 410px;          /* = tinggi gambar */
    max-width: 100%;
}

/* meta didorong ke dasar; tombol mengikut di bawahnya */
.news-list .news-card__meta {
    margin-top: auto !important;
    margin-bottom: 16px;
}

.news-list .news-card__btn {
    align-self: flex-start;
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .news-list .news-card__body { min-height: 295px; }
}

@media (max-width: 760px) {
    .news-list .news-card__body { min-height: 0; }
    .news-list .news-card__meta { margin-top: 24px !important; }
}

/* HALAMAN DETAIL ARTIKEL — PENYESUAIAN KE DESAIN "ARTICLES" */

/* 1) NAVBAR PUTIH di halaman detail artikel (tidak gelap di atas banner) */
.page-news-show .navbar,
.page-news-show .navbar.on-image {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #eee;
}
.page-news-show .navbar.on-image .navbar-menu a,
.page-news-show .navbar.on-image .lang-switcher a { color: #333 !important; }
.page-news-show .navbar.on-image .navbar-menu a:hover { color: #3aabab !important; }
.page-news-show .navbar.on-image .lang-divider { color: #bbb !important; }
.page-news-show .navbar.on-image .hamburger span { background: #333 !important; }
.page-news-show .navbar.on-image .navbar-brand .logo-default { display: block !important; }
.page-news-show .navbar.on-image .navbar-brand .logo-white { display: none !important; }

/* Banner tidak lagi tertutup gradasi gelap */
.news-detail-hero::before { display: none; }

/* 2) BADGE KATEGORI RATA KIRI (judul tetap di tengah) */
.news-detail__head {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px;
    padding-right: 48px;
    align-items: stretch;
    text-align: center;
}
.news-detail__badge {
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
}

/* 3) SIDEBAR TIDAK DI-SCROLL (tampil penuh, ikut halaman) */
.news-side--sticky,
.news-sidebar .news-side--sticky {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

/* 4) Gambar di dalam isi artikel (hasil upload editor) rapi */
.article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 18px 0;
    border-radius: 2px;
}
.article-body figure { margin: 18px 0; }
.article-body figcaption {
    font-size: 11px;
    color: #9a9a9a;
    margin-top: 6px;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .news-detail__head { padding-left: 20px; padding-right: 20px; }
}

/* Banner artikel = 1 viewport, sama dengan hero halaman News */
.news-detail-hero {
    height: 100vh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

/* SEE ALL — katalog muncul di bawah (tanpa pindah halaman) */
.all-products[hidden] { display: none; }

.all-products {
    padding: 56px 0 64px;
    min-height: 0;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.all-products.is-open {
    opacity: 1;
    transform: none;
}
.all-products .products-page__title {
    margin-bottom: 36px;
}

/* Kartu katalog muncul bertahap (delay diatur dari JS) */
.all-products .product-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.all-products .product-card.visible {
    opacity: 1;
    transform: none;
}

/* MOBILE — lepas kunci 1 viewport pada halaman detail */
@media (max-width: 992px) {
    .all-products { padding: 40px 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .pd-slide.is-active .product-detail__media img,
    .all-products.is-open,
    .all-products .product-card.visible {
        opacity: 1 !important;
        transition: none !important;
        filter: none !important;
        transform: none !important;
    }
}

/* DESKTOP — VIEWPORT 1: banner + pagination + SEE ALL */
@media (min-width: 993px) {
    .product-detail { padding: 88px 0 0; }

    /* Blok banner mengisi PENUH layar pertama (hero + pagination + SEE ALL) */
    .pd-swiper {
        min-height: calc(100vh - 88px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* hero — cone */
    .product-detail__media img { max-height: 50vh; }

    /* hero — kolom kanan (spesifikasi + swatch) */
    .product-detail__side  { gap: 22px; }
    .product-detail__specs { gap: 4px; }
    .product-detail__spec-value { line-height: 42px; }
    .product-detail__spec-label { line-height: 22px; }
    .product-detail__swatch img { max-width: min(230px, 26vh); }

    /* pagination + SEE ALL — masih di layar pertama */
    .pd-controls { margin-top: 34px; }

    /* Baris 4 kartu — dimulai di layar berikutnya */
    .product-detail__related { margin-top: 0; padding-bottom: 48px; }
    .product-detail__related .product-card__media { height: clamp(220px, 34vh, 380px); }
    .product-detail__related .product-card__caption { padding: 26px 18px 16px; }
    .product-detail__related .product-card__name { font-size: 16px; line-height: 24px; }
}

/* PERBAIKAN GAMBAR — hero setinggi PDF + kartu tetap COVER */

/* HERO: cone setinggi baris (sejajar dari atas sampai dasar swatch) */
.product-detail__grid  { align-items: stretch; }
.product-detail__media {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.product-detail__media img {
    width: 100%;
    height: 100%;                 /* mengisi tinggi baris, seperti PDF */
    max-height: 65vh;
    object-fit: contain;          /* proporsi cone tetap benar */
}

/* KARTU "PRODUK LAIN": tetap COVER, kartu ditinggikan agar crop minimal. */
.product-detail__related-grid > .product-card .product-card__media {
    height: auto;
    aspect-ratio: 1 / 1;
}
.product-detail__related-grid > .product-card .product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* BACKGROUND MEDIA (GAMBAR + VIDEO) — Section 1, 3, 5, 7, 9 */
.media-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #14141a;
}

.media-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.media-layer.active { opacity: 1; }

video.media-layer {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay tetap di atas media, di bawah teks */
.hero-overlay,
.cap-overlay-bottom { z-index: 1; }

/* SECTION 9 — background video, tanpa overlay */
.section9 > video.media-layer { z-index: 0; }

/* Overlay dihapus → teks pakai drop shadow supaya tetap terbaca di atas video. */
.section9 .s8-line1,
.section9 .s8-line2 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45),
                 0 2px 10px rgba(0, 0, 0, 0.35);
}

.section9 .s8-desc {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55),
                 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Section 2 (Winding) — kolom mesin bisa berisi video */
.machine-col video {
    max-height: 360px;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* SILVER KRIS — Halaman /silver-kris  (v7 — proporsional desain 1440) */
.page-silver-kris { --sk-teal:#3aabab; --sk-dark:#111111; --sk-body:#555555; --sk-muted:#8a8a8a; }

.sk-wrap { font-family:'Poppins', sans-serif; color:#1c1c1c; overflow-x:hidden; }
/* 1266 / 1440 = 87.92% → margin kanan-kiri 6.04% seperti desain */
.sk-wrap .container { width:87.92%; max-width:1266px; margin:0 auto; padding:0; box-sizing:border-box; }

/* 1 & 2. HERO HEADER */
.sk-hero { background:#fff; }
.sk-wrap .sk-hero__header { display:grid; grid-template-columns:1fr 38.07%; column-gap:4%;
    row-gap:28px; align-items:start; padding:150px 0 56px; }
.sk-wrap .sk-hero__title { font-family:'Poppins', sans-serif; font-weight:500; font-size:40px;
    line-height:45px; letter-spacing:0; text-transform:uppercase; color:#111; margin:0; max-width:none; }
.sk-wrap .sk-hero__accent { color:var(--sk-teal); }
.sk-wrap .sk-hero__intro { font-family:'Poppins', sans-serif; font-weight:400; font-size:12px;
    line-height:25px; letter-spacing:1.2px; text-align:justify; color:#555; margin:0; }

/* 3 & 4. HERO VISUAL 1440x808 + STATISTIK */
.sk-wrap .sk-hero__visual { position:relative; width:100%; aspect-ratio:1440 / 808;
    height:auto; min-height:0; overflow:hidden; background:#1c1c1c; }
.sk-wrap .sk-hero__img { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block; }
.sk-wrap .sk-hero__visual::after { content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%); }
.sk-wrap .sk-hero__stats { position:absolute; left:50%; transform:translateX(-50%);
    bottom:6.5%; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:0; }
.sk-wrap .sk-stat__value { font-family:'Poppins', sans-serif; font-weight:700; font-size:34px;
    line-height:65px; letter-spacing:0; color:#fff; }
.sk-wrap .sk-stat__value .flip-char { color:#fff; display:inline-block; }
.sk-wrap .sk-stat__label { font-family:'Poppins', sans-serif; font-weight:400; font-size:12px;
    line-height:27px; letter-spacing:1px; text-transform:none; color:rgba(255,255,255,.92); }
.sk-wrap .sk-hero__scroll { position:absolute; left:50%; transform:translateX(-50%); bottom:24px;
    z-index:3; color:#fff; font-size:26px; line-height:1; text-decoration:none; opacity:.9; }
.sk-wrap .sk-hero__scroll:hover { opacity:1; }

/* 5, 6 & 7. VISION / DISTRIBUTION / PRODUCT */
/* kolom desain 389 : 354 : 407 dari container 1266 → persen */
.sk-vision { background:#fff; padding:140px 0 120px; }
.sk-wrap .sk-vision__brand { display:block; margin-bottom:48px; }
.sk-wrap .sk-vision__brand img { width:180px; height:30px; object-fit:contain; display:block; }
.sk-wrap .sk-vision__grid { display:grid; grid-template-columns:30.73% 27.96% 32.15%;
    justify-content:space-between; column-gap:0; row-gap:40px; }
.sk-wrap .sk-vision__title { font-family:'Poppins', sans-serif; font-weight:600; font-size:18px;
    line-height:29px; letter-spacing:0; text-transform:uppercase; color:#111; margin:0 0 14px; padding:0; }
.sk-wrap .sk-vision__title::before,
.sk-wrap .sk-vision__title::after { content:none !important; display:none !important; }
.sk-wrap .sk-vision__title--gap { margin-top:44px; }
.sk-wrap .sk-vision__body p { font-family:'Poppins', sans-serif; font-weight:400; font-size:12px;
    line-height:25px; letter-spacing:1.2px; text-align:justify; color:#555; margin:0 0 14px; }
.sk-wrap .sk-vision__media { width:100%; height:auto; aspect-ratio:407 / 587; border-radius:0;
    overflow:hidden; background:#eee; }
.sk-wrap .sk-vision__media img { width:100%; height:100%; object-fit:cover; display:block; }

/* 8. SLIDER KARTU PRODUK */
/* Semua ukuran kartu dibuat vw (1px desain@1440 = 0.06944vw) supaya PROPORSI */
.sk-slider { position:relative; width:100%; aspect-ratio:1440 / 808; height:auto; min-height:0;
    overflow:hidden; background:#1c1c1c; display:flex; flex-direction:column;
    justify-content:flex-end; padding:0 0 40px; }
.sk-wrap .sk-slider__bg { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block; z-index:0; }
.sk-wrap .sk-slider__stage { position:relative; z-index:2; padding:0 0 0 1.46%; }
.sk-wrap .sk-slider__viewport { overflow:hidden; }
.sk-wrap .sk-slider__track { display:flex; align-items:stretch; gap:1.2%;
    transition:transform .55s cubic-bezier(.4,0,.2,1); cursor:grab; }
.sk-wrap .sk-pcard { position:relative; flex:0 0 36.36%; width:36.36%;
    min-height:17.5vw;                 /* 252px @1440 */
    height:auto; padding:1.667vw 2.5vw;/* 24px 36px */
    box-sizing:border-box; display:block; border-radius:0;
    background:rgba(20,20,20,.30);
    -webkit-backdrop-filter:blur(20px) saturate(120%);
    backdrop-filter:blur(20px) saturate(120%);
    border:1px solid rgba(255,255,255,.12); }
.sk-wrap .sk-pcard::before,
.sk-wrap .sk-pcard::after { content:none !important; display:none !important; }
.sk-wrap .sk-pcard__bg { display:none !important; }
.sk-wrap .sk-pcard__inner { display:block; position:relative; padding:0; }
/* Nomor: font 25 / line-height 65 (spec Figma). Leading 65px dikompensasi */
.sk-wrap .sk-pcard__num { display:block; font-family:'Poppins', sans-serif; font-weight:500;
    font-size:1.736vw; line-height:4.514vw; letter-spacing:0; color:#fff;
    margin:-1.25vw 0 -1.083vw -1.083vw; }
.sk-wrap .sk-pcard__title { font-family:'Poppins', sans-serif; font-weight:500;
    font-size:2.222vw; line-height:2.222vw; letter-spacing:0; color:#fff;
    margin:0 0 .833vw 1.528vw; }      /* indent 22px dari nomor */
.sk-wrap .sk-pcard__desc { font-family:'Poppins', sans-serif; font-weight:500;
    font-size:.833vw; line-height:2.014vw; letter-spacing:.083vw;
    color:rgba(255,255,255,.9); margin:0 0 0 1.528vw; }
.sk-wrap .sk-slider__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:40px; height:40px; padding:0; background:none; border:0; cursor:pointer;
    color:rgba(255,255,255,.85); font-size:34px; line-height:1;
    transition:color .2s ease, opacity .2s ease; user-select:none; }
.sk-wrap .sk-slider__arrow:hover { color:#fff; }
.sk-wrap .sk-slider__arrow--prev { left:-6px; }
.sk-wrap .sk-slider__arrow--next { right:2px; }
.sk-wrap .sk-slider__dots { position:relative; z-index:3; display:flex; justify-content:center;
    gap:8px; margin-top:24px; }
.sk-wrap .sk-dot { width:10px; height:4px; border-radius:2px; background:rgba(255,255,255,.45);
    cursor:pointer; transition:all .25s ease; }
.sk-wrap .sk-dot.active { width:28px; border-radius:2px; background:#fff; }

/* 9. GALERI 601x728 */
.sk-gallery { background:#fff; padding:120px 0; }
.sk-wrap .sk-gallery__grid { display:grid; grid-template-columns:repeat(2,47.47%);
    justify-content:space-between; column-gap:0; row-gap:32px; }
.sk-wrap .sk-gallery__item { width:100%; height:auto; aspect-ratio:601 / 728; border-radius:0;
    overflow:hidden; background:#eee; }
.sk-wrap .sk-gallery__item img { width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s ease; }
.sk-wrap .sk-gallery__item:hover img { transform:scale(1.04); }

/* RESPONSIVE */
@media (max-width:992px) {
    .sk-wrap .container { width:92%; }
    .sk-wrap .sk-hero__header { grid-template-columns:1fr; column-gap:0; padding:120px 0 44px; }
    .sk-wrap .sk-vision__grid { grid-template-columns:48% 48%; }
    .sk-wrap .sk-vision__media { grid-column:1 / -1; aspect-ratio:16/9; }
    .sk-wrap .sk-pcard { flex:0 0 60%; width:60%; min-height:0; padding:20px 26px; }
    .sk-wrap .sk-pcard__num { font-size:20px; line-height:24px; margin:0 0 2px; }
    .sk-wrap .sk-pcard__title { font-size:26px; line-height:28px; margin:0 0 10px 16px; }
    .sk-wrap .sk-pcard__desc { font-size:12px; line-height:26px; letter-spacing:1.2px; margin-left:16px; }
}
@media (max-width:768px) {
    .sk-wrap .sk-hero__title { font-size:30px; line-height:36px; }
    .sk-wrap .sk-hero__visual, .sk-slider { aspect-ratio:auto; height:auto; }
    .sk-wrap .sk-hero__visual { min-height:440px; }
    .sk-wrap .sk-hero__stats { grid-template-columns:repeat(2,1fr); bottom:8%; gap:8px 16px; }
    .sk-wrap .sk-stat__value { font-size:26px; line-height:42px; }
    .sk-vision { padding:70px 0; }
    .sk-wrap .sk-vision__grid { grid-template-columns:1fr; row-gap:36px; }
    .sk-wrap .sk-vision__title--gap { margin-top:28px; }
    .sk-slider { padding:70px 0 40px; }
    .sk-wrap .sk-slider__stage { padding:0 0 0 4%; }
    .sk-wrap .sk-pcard { flex:0 0 86%; width:86%; min-height:0; padding:18px 22px; }
    .sk-wrap .sk-pcard__num { font-size:18px; line-height:22px; margin:0 0 2px; }
    .sk-wrap .sk-pcard__title { font-size:22px; line-height:24px; margin:0 0 8px 12px; }
    .sk-wrap .sk-pcard__desc { font-size:12px; line-height:24px; margin-left:12px; }
    .sk-gallery { padding:70px 0; }
    .sk-wrap .sk-gallery__grid { grid-template-columns:1fr; row-gap:20px; }
}

/* HALAMAN KARIR — "JOIN WITH US" */

:root {
    --career-ink:   #1c1c1c;
    --career-body:  #4a4a4a;
    --career-muted: #9a9a9a;
    --career-line:  #e6e6e6;
    --career-field: #f4f4f4;
    --career-active:#58595B;   /* warna aktif chip / hover / border */
}

.career-page {
    padding: 100px 0 0;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    color: var(--career-body);
}

/* Bungkus khusus career: sejajarkan tepi kiri-kanan dengan navbar */
.career-page .container {
    max-width: none;
    padding: 0 60px;
}

/* JUDUL */
.career-head { margin-bottom: 56px; }
.career-title {
    font-weight: 500;              /* Poppins Medium */
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 0;
    color: var(--career-ink);
    text-transform: uppercase;
    margin: 0;
}

/* FILTER BAR */
.career-filterbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 4px;
}
.career-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.career-chip {
    display: inline-block;
    border: 1px solid #dcdcdc;
    border-radius: 40px;
    padding: 8px 17px;
    font-weight: 400;              /* Poppins Regular */
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--career-body);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.career-chip:hover { border-color: var(--career-active); color: var(--career-ink); }
.career-chip.is-active {
    background: var(--career-active);
    border-color: var(--career-active);
    color: #fff;
}

/* Tombol FILTERS */
.career-filters { flex: 0 0 auto; margin-left: auto; }
.career-filters__btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: none; cursor: pointer;
    font-family: inherit;
    font-weight: 400;              /* Poppins Regular */
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #3a3a3a;
    padding: 8px 4px;
    transition: color .2s ease;
}
.career-filters__btn:hover,
.career-filters__btn.is-active { color: var(--career-active); }

/* PANEL FILTERS (dua kolom) */
.career-filterpanel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-top: 28px;
    padding-bottom: 8px;
    border-top: 1px solid var(--career-line);
    margin-top: 18px;
}
/* Sembunyikan panel selama [hidden] (sebelum FILTERS diklik). Wajib eksplisit */
.career-filterpanel[hidden] { display: none; }

.career-filtercol__title {
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--career-ink);
    margin: 0 0 22px;
}
.career-filterlist {
    list-style: none; margin: 0; padding: 0;
    columns: 2; column-gap: 30px;
}
.career-filterlist li { margin-bottom: 20px; break-inside: avoid; }
.career-filterlist a {
    font-weight: 400;
    font-size: 13px;
    color: var(--career-body);
    text-decoration: none;
    transition: color .18s ease;
}
.career-filterlist a:hover { color: var(--career-ink); text-decoration: underline; text-underline-offset: 4px; }
.career-filterlist a.is-active { color: var(--career-active); font-weight: 600; }

/* Saat panel FILTERS terbuka: */
.career-page.filters-open .career-chips { display: none; }
.career-page.filters-open .career-filterbar { padding-bottom: 0; }
.career-page.filters-open .career-filters { position: relative; z-index: 5; }
.career-page.filters-open .career-filterpanel {
    margin-top: -22px;
    padding-top: 0;
    border-top: none;       /* hilangkan garis di atas panel */
}

/* NOTIF FILTER AKTIF */
.career-activefilter {
    margin-top: 16px;
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; color: #555;
}
.career-activefilter strong { color: var(--career-ink); }
.career-activefilter__clear { color: #a23; text-decoration: none; font-weight: 500; }
.career-activefilter__clear:hover { text-decoration: underline; }

/* DAFTAR LOWONGAN (accordion) */
.career-list { margin-top: 34px; }
.career-empty { color: #999; font-size: 14px; padding: 50px 0; text-align: center; }

.career-item { border-top: 1px solid var(--career-line); }
.career-item:last-child { border-bottom: 1px solid var(--career-line); }

.career-item__row {
    width: 100%;
    display: grid;
    grid-template-columns: 40% 15% 1fr 28px;
    align-items: center;
    gap: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 32px 2px;
    font-family: inherit;
    transition: opacity .2s ease;
}
.career-item__row:hover { opacity: .72; }
.career-item__title {
    font-weight: 500;              /* Poppins Medium */
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
    color: var(--career-ink);
}
.career-item__loc {
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--career-body);
}
.career-item__level {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    color: var(--career-muted);
}
.career-item__chev {
    justify-self: end;
    color: var(--career-ink);
    transition: transform .3s ease;
    display: inline-flex;
}
.career-item.is-open .career-item__chev { transform: rotate(180deg); }

/* Detail — buka/tutup halus */
.career-item__detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}

.career-item__detail-inner {
    display: grid;
    grid-template-columns: 40% 15% 1fr 28px;
    gap: 0 20px;
    padding: 4px 2px 48px;
}
.career-item__detail-content {
    grid-column: 3 / -1;   /* mulai dari kolom Level sampai tepi kanan */
    min-width: 0;
}

.career-block__title {
    font-weight: 700;              /* Poppins Bold */
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--career-ink);
    margin: 22px 0 10px;
}
.career-block__list {
    margin: 0 0 8px;
    padding-left: 18px;
    list-style: disc;
}
.career-block__list li {
    font-weight: 400;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: var(--career-body);
    margin-bottom: 2px;
}

/* TOMBOL DAFTAR (buka form) */
.career-apply { margin-top: 26px; }
.career-apply__btn,
.career-form__submit {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--career-ink);
    border-radius: 40px;
    padding: 11px 36px;
    font-family: inherit;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--career-ink);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.career-apply__btn:hover,
.career-form__submit:hover {
    background: var(--career-active);
    border-color: var(--career-active);
    color: #fff;
}

/* Form disembunyikan sampai tombol DAFTAR ditekan */
.career-form { display: none; margin-top: 4px; }
.career-apply.is-open .career-form { display: block; }
.career-apply.is-open .career-apply__btn { display: none; }

/* Setelah DAFTAR ditekan → sembunyikan Deskripsi Pekerjaan & Kualifikasi */
.career-item:has(.career-apply.is-open) .career-info { display: none; }

.career-form__req { font-size: 12px; color: #c0392b; margin: 0 0 14px; }
.career-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.career-form__field { margin-bottom: 14px; }

.career-input {
    width: 100%;
    background: var(--career-field);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 13px;
    color: var(--career-ink);
    cursor: text;                  /* kursor ketik (I-beam) */
    transition: border-color .2s ease, background-color .2s ease;
}
.career-input::placeholder { color: #9a9a9a; }
.career-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--career-active);
}
/* Placeholder hilang begitu input diklik/fokus */
.career-input:focus::placeholder { color: transparent; }
.career-input.is-error { border-color: #c0392b; background: #fff5f4; }
.career-textarea { resize: vertical; min-height: 120px; }

/* Lampiran CV */
.career-form__file { position: relative; }
.career-filelabel {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    background: var(--career-field);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.career-filelabel:hover { border-color: #d5d5d5; }
.career-filelabel__text {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: #6f6f6f;
}
.career-filelabel__hint { font-size: 11px; color: #c0392b; white-space: nowrap; }
.career-fileinput {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.career-filelabel:has(.career-fileinput.is-error) { border-color: #c0392b; background: #fff5f4; }
.career-form__err { display: block; font-size: 12px; color: #c0392b; margin-top: 6px; }

/* Status file terunggah */
.career-file-status {
    display: none;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 12px;
    color: #1f7a68;
}
.career-file-status.is-visible { display: inline-flex; }
.career-file-status svg { flex: 0 0 auto; }

.career-form__note {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.7;
    color: var(--career-muted);
    margin: 8px 0 22px;
}
.career-form__note a { color: var(--career-active); text-decoration: underline; }

.career-form__success {
    margin-top: 26px;
    background: #eafaf7;
    border: 1px solid #b7e6dd;
    border-radius: 6px;
    padding: 16px 18px;
    font-size: 14px;
    color: #1f7a68;
}

/* RESPONSIVE */
@media (max-width: 820px) {
    .career-page { padding-top: 110px; }
    .career-page .container { padding: 0 22px; }
    .career-head { margin-bottom: 38px; }
    .career-title { font-size: 30px; line-height: 34px; }

    .career-filterbar { flex-direction: column; gap: 14px; }
    .career-filterpanel { grid-template-columns: 1fr; gap: 26px; }
    .career-filterlist { columns: 1; }

    .career-item__row {
        grid-template-columns: 1fr 28px;
        grid-template-areas:
            "title chev"
            "meta  chev";
        row-gap: 6px;
        padding: 24px 2px;
    }
    .career-item__title { grid-area: title; font-size: 20px; line-height: 26px; }
    .career-item__loc   { grid-area: meta; line-height: 18px; }
    .career-item__level { display: none; }
    .career-item__chev  { grid-area: chev; }

    .career-item__detail-inner { grid-template-columns: 1fr; padding-bottom: 34px; }
    .career-item__detail-content { grid-column: 1 / -1; }
    .career-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* HOME REVAMP (mengacu HOME REVAMP - ID / Figma) */

.navbar-menu a, .lang-switcher,
.hero-title, .hero-desc,
.spec-title, .spec-desc, .spec-table td,
.bottom-number, .bottom-label,
.product-title, .product-desc, .product-extra-specs td,
.product-stat__value, .product-stat__label, .product-seeall,
.cap-number, .cap-label,
.news-title, .news-excerpt,
.newsletter-text, .newsletter-input, .newsletter-btn,
.s8-cert-title, .s8-line1, .s8-line2, .s8-desc, .s8-btn {
    font-family: 'Poppins', sans-serif;
}

/* 1) HEADER / NAVBAR */
.navbar-menu a {
    font-weight: 600;                 /* SemiBold */
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.lang-switcher {
    font-weight: 500;                 /* Medium */
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 2px;
}
.lang-switcher a { font-weight: 500; }
.lang-switcher a.active { font-weight: 600; }

/* Desktop: navbar 3 kolom (brand | menu center | lang) agar saat */
@media (min-width: 901px) {
    .navbar { gap: 24px; }
    .navbar-menu {
        position: static;
        transform: none;
        left: auto; top: auto;
        flex: 1 1 auto;
        justify-content: center;
        gap: 30px;
    }
    .navbar-brand, .lang-switcher { flex: 0 0 auto; }
}

/* 2) SECTION 1 — HERO (judul dipakai S1/S3/S5/S7) */
.hero-title {
    font-weight: 500;                 /* Medium */
    font-size: 40px;
    line-height: 63px;
    letter-spacing: 0;
}
/* deskripsi hero berbeda per-section → di-scope by id */
#section1 .hero-desc,
#section5 .hero-desc {
    font-weight: 400;                 /* Regular */
    font-size: 12px;
    line-height: 27px;
    letter-spacing: 1px;
}
#section3 .hero-desc,
#section7 .hero-desc {
    font-weight: 500;                 /* Medium */
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
}
/* Panah dropdown → gambar ARROW.png (40x20), center bawah */
.scroll-arrow-img {
    display: block;
    width: 40px;
    height: 20px;
    object-fit: contain;
    pointer-events: none;
}

/* 3) SECTION 2 — WINDING */
.spec-title {
    font-weight: 500;
    font-size: 40px;
    line-height: 65px;
    letter-spacing: 0;
    margin-bottom: 12px;
}
.spec-desc {
    font-weight: 500;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 1.2px;
    color: #555;
    max-width: 460px;
    white-space: pre-line;            /* hormati baris baru dari CMS */
}
.spec-table td {                       /* tbody */
    font-weight: 500;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 1.2px;
    padding: 8px 0;
}
.bottom-stat .bottom-number {
    font-weight: 700;                 /* Bold */
    font-size: 34px;
    letter-spacing: 0;
}
.bottom-stat .bottom-label {
    font-weight: 400;
    font-size: 15px;
    line-height: 27px;
    letter-spacing: 1px;
    color: #666;
    margin-top: 2px;
}

/* 5) SECTION 4 — PRODUCT */
.product-title {
    font-weight: 500;
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 0;
    margin-bottom: 20px;
}
.product-desc {
    font-weight: 500;
    font-size: 11px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: #555;
}
.product-extra-specs td {              /* tbody */
    font-weight: 500;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 1.2px;
    padding: 8px 0;
}
.product-stats .product-stat__value {
    font-weight: 700;
    font-size: 34px;
    letter-spacing: 0;
}
.product-stats .product-stat__label {
    font-weight: 400;
    font-size: 15px;
    line-height: 27px;
    letter-spacing: 1px;
    color: #666;
    margin-top: 0;
}
.product-seeall {
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0;
}
/* Pergantian produk (& winding) lebih smooth */
.section2-slide.active,
.product-slide.active {
    animation: fadeSwapSmooth 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes fadeSwapSmooth {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 6) SECTION 5 — CAPACITY */
.cap-number {
    font-weight: 700;
    font-size: 35px;
    letter-spacing: 0;
}
.cap-label {
    font-weight: 400;
    font-size: 12px;
    line-height: 27px;
    letter-spacing: 1px;
    text-transform: none;
    color: rgba(255, 255, 255, 0.85);
}

/* 7) SECTION 6 — NEWS + NEWSLETTER */
/* Boleh scroll sedikit bila tak muat 1 viewport */
.section6 {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    padding-top: 48px;
    padding-bottom: 10px;
}
.news-area        { flex: 0 0 auto; }
.news-dots-wrapper{ flex: 0 0 auto; padding: 10px 0; }
.newsletter-area  { flex: 0 0 auto; }
.news-track-container { padding: 10px 80px; }

/* Kartu berita: rasio 638x494, teks di DALAM gambar (overlay) */
.news-card { flex: 0 0 calc(33.333% - 14px); }
.news-img-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 638 / 494;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    background: #d9d9d9;
}
.news-img-placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-img-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.18) 46%, rgba(0,0,0,0) 72%);
}
.news-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 22px 150px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
}
.news-excerpt {
    font-weight: 400;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Newsletter — input & tombol DIPISAH */
.newsletter-area { gap: 16px; padding: 8px 60px 40px; }
.newsletter-text {
    font-weight: 500;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: #333;
    max-width: 640px;
}
.newsletter-form {
    display: flex;
    align-items: center;
    gap: 12px;                         /* pisahkan input & tombol */
    width: 100%;
    max-width: 582px;
}
.newsletter-input {
    flex: 1 1 auto;
    width: auto;
    padding: 0 18px;
    font-weight: 400;
    font-size: 12px;
    line-height: 32px;
    letter-spacing: 1.2px;
    border: 1px solid #cfcfcf;
    border-radius: 720px;                /* corner radius 7 */
}
.newsletter-btn {
    flex: 0 0 auto;
    min-width: 82px;
    padding: 0 24px;
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0;
    border: 1px solid #222;
    border-radius: 720px;              /* pill */
    background: #222;
    color: #fff;
}

/* 9) SECTION 8 — CERTIFICATIONS */
.s8-cert-title {
    font-weight: 700;
    font-size: 28px;
    line-height: 70px;
    letter-spacing: 0;
}

/* 10) SECTION 8 (CTA / Factory) = .section9 di kode */
.s8-line1,
.s8-line2 {
    font-weight: 500;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: 0;
}
.section9 .s8-line1,
.section9 .s8-line2 {                   /* line1 & line2 pakai shadow */
    text-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 2px 16px rgba(0,0,0,0.35);
}
.section9 .s8-desc { text-shadow: none; } /* desc TANPA shadow */
.s8-desc {
    font-weight: 600;
    font-size: 12px;
    line-height: 23px;
    letter-spacing: 1.2px;
}
.s8-btn {
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0;
    border-radius: 720px;              /* pill */
    min-width: 82px;
    margin-top: 22px;                  /* jarak antar teks & tombol */
    background: #58595B;
}

/* FLIP COUNT-UP — lebih halus */
.flip-char { display: inline-block; min-width: 0.6em; text-align: center; }
@keyframes flipRoll {
    0%   { transform: translateY(-45%); opacity: 0.25; }
    60%  { transform: translateY(6%);   opacity: 1; }
    100% { transform: translateY(0);    opacity: 1; }
}
.flip-anim { animation: flipRoll 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); }

/* MOBILE (≤900px) — proporsional mengikuti Figma */
@media (max-width: 900px) {
    .navbar-menu li a { font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }

    .hero-title { font-size: 30px; line-height: 42px; }
    #section1 .hero-desc, #section3 .hero-desc,
    #section5 .hero-desc, #section7 .hero-desc { font-size: 12px; line-height: 22px; }

    .spec-title { font-size: 28px; line-height: 38px; margin-bottom: 10px; }
    .spec-desc  { font-size: 12px; line-height: 24px; }
    .spec-table td { font-size: 12px; line-height: 24px; }
    .bottom-stat .bottom-number { font-size: 28px; line-height: 40px; }
    .bottom-stat .bottom-label  { font-size: 13px; line-height: 20px; }

    .product-title { font-size: 28px; line-height: 34px; margin-bottom: 14px; }
    .product-desc  { font-size: 11px; line-height: 22px; }
    .product-extra-specs td { font-size: 12px; line-height: 24px; }
    .product-stats .product-stat__value { font-size: 28px; line-height: 40px; }
    .product-stats .product-stat__label { font-size: 13px; line-height: 20px; }

    .cap-number { font-size: 28px; line-height: 40px; }
    .cap-label  { font-size: 12px; line-height: 20px; }

    .news-card { flex: 0 0 100%; }
    .news-track-container { padding: 10px 44px; }
    .news-title { font-size: 20px; line-height: 26px; }
    .news-excerpt { font-size: 12px; line-height: 22px; }
    .newsletter-form { flex-direction: column; gap: 10px; max-width: 100%; }
    .newsletter-input, .newsletter-btn { width: 100%; }

    .s8-cert-title { font-size: 20px; line-height: 40px; }
    .s8-line1, .s8-line2 { font-size: 34px; line-height: 42px; }
    .s8-desc { font-size: 11px; line-height: 21px; }
    .s8-btn { margin-top: 16px; }

    .scroll-arrow-img { width: 36px; height: 18px; }
}

/* SCROLL ALA ABOUT-US + SECTION 1 VIEWPORT */

.page-home .page-wrapper { scroll-snap-type: none; }
.page-content { position: relative; }

/* 2) Tiap section = minimal 1 viewport, boleh tumbuh & di-scroll bila konten lebih */
.page-home .section {
    scroll-snap-align: none;
    min-height: 100vh;
    height: auto;
    overflow: visible;         /* jangan klip; kalau lebih tinggi → halaman scroll */
}
/* Sertifikasi memang band pendek → biarkan setinggi konten */
.page-home .section8 { min-height: 0; height: auto; }

/* 3) SECTION PUTIH (Winding & Produk): konten center vertikal, slide ikut alur */
.page-home .section2,
.page-home .product-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;          /* klip transisi geser horizontal saja */
}
.page-home .section2-inner,
.page-home .product-inner,
.page-home .product-inner--3col {
    height: auto;
    padding-top: 96px;
    padding-bottom: 84px;
    overflow: visible;
}
.page-home .section2-slide,
.page-home .product-slide {
    position: relative;
    inset: auto;
    width: 100%;
}
.page-home .section2-slide:not(.active),
.page-home .product-slide:not(.active) { display: none; }
.page-home .section2-slide.active,
.page-home .product-slide.active { display: block; }

.page-home #section2 .carousel-dots,
.page-home #section4 .carousel-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 32px;
    margin: 0;
    justify-content: center;
    z-index: 15;
}
.page-home #section4 .product-seeall-bar {
    position: absolute;
    right: 60px;
    bottom: 26px;
    left: auto;
    margin: 0;
    padding: 0;
    text-align: right;
    z-index: 16;
}

/* 5) GAMBAR CONE LEBIH TINGGI (sesuai screenshot) */
.page-home .product-cone img {
    max-height: min(74vh, 660px);
    max-width: 100%;
    object-fit: contain;
}

/* 6) PANAH DROPDOWN — chevron SVG gaya Technology, sedikit dibesarkan */
.hero-scroll { color: #ffffff; }
.hero-scroll .scroll-arrow-svg {
    width: 40px;
    height: 40px;
    display: block;
}

/* 7) NAVBAR — gap 50px, menu center halaman, semua center vertikal */
@media (min-width: 901px) {
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .navbar-brand { display: flex; align-items: center; flex: 0 0 auto; }
    .navbar-brand a { display: flex; align-items: center; }
    .navbar-menu {
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -50%);
        flex: 0 0 auto;
        justify-content: center;
        gap: 50px;                 /* jarak antar menu = 50px */
    }
    .lang-switcher { display: flex; align-items: center; flex: 0 0 auto; }
}

/* 8) MOBILE — tetap 1 viewport & scroll bila lebih; arrow menyesuaikan */
@media (max-width: 900px) {
    .hero-scroll .scroll-arrow-svg { width: 34px; height: 34px; }
    .page-home .section2-inner,
    .page-home .product-inner,
    .page-home .product-inner--3col {
        padding-top: 84px;
        padding-bottom: 72px;
    }
    .page-home .product-cone img { max-height: 52vh; }
    .page-home #section4 .product-seeall-bar { right: 24px; }
}

/* PERBAIKAN BERITA/NEWSLETTER + NAVBAR BLUR + FACTORY */

/* 1) SECTION 6 — Berita & Newsletter */
/* Ukuran gambar berita dibuat ringkas (mirip target) */
.page-home .news-track-container { padding: 10px 72px; }
.page-home .news-card { flex: 0 0 calc(33.333% - 16px); }
.page-home .news-img-placeholder {
    aspect-ratio: 638 / 494;
    height: auto;
    max-height: 340px;          /* jaga tetap pendek → beri ruang newsletter */
}

/* Jarak (margin top) untuk newsletter-area */
.page-home .newsletter-area {
    margin-top: 34px;
    padding: 8px 60px 40px;
}

/* Input newsletter jadi abu-abu */
.page-home .newsletter-input {
    background: #f0f0f0;
    border: 1px solid #d9d9d9;
    color: #555;
}
.page-home .newsletter-input::placeholder { color: #9a9a9a; letter-spacing: 1.2px; }
.page-home .newsletter-input:focus { border-color: #b9b9b9; background: #eeeeee; }

/* 2) NAVBAR — frosted/blur di atas section bergambar */

.navbar.on-image {
    background-color: rgba(18, 18, 18, 0.30);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
}

/* 3) SECTION 9 — Factory: layout teks lebih ringkas (spt gambar 4) */
.section9 .s8-cta-content {
    max-width: 900px;
    gap: 12px;
}
.section9 .s8-line1,
.section9 .s8-line2 {
    font-size: 48px;
    line-height: 56px;
}
.section9 .s8-desc {
    max-width: 620px;
    font-size: 12px;
    line-height: 22px;
}
.section9 .s8-btn { margin-top: 18px; }

/* MOBILE */
@media (max-width: 900px) {
    .page-home .news-img-placeholder { max-height: none; aspect-ratio: 16 / 10; }
    .page-home .newsletter-area { margin-top: 24px; padding: 8px 24px 32px; }
    .section9 .s8-line1, .section9 .s8-line2 { font-size: 30px; line-height: 38px; }
    .section9 .s8-desc { font-size: 11px; line-height: 20px; }
}

/* BANNER BERITA (no radius + ukuran), RUANG KOSONG, */

/* 1) Banner berita: tanpa corner-radius + rasio benar */
.page-home .news-card { border-radius: 0; }
.page-home .news-img-placeholder {
    border-radius: 0;            /* hilangkan sudut membulat */
    aspect-ratio: 638 / 494;     /* rasio sesuai desain */
    height: auto;
    max-height: none;
}

/* 2) Hilangkan ruang kosong di bawah newsletter (semua layar) */
.page-home .section6 {
    min-height: 0;
    height: auto;
    overflow: visible;
}

/* MOBILE */
@media (max-width: 900px) {

    /* 3) WINDING — urutan: gambar → judul → spec-desc → bottom-stats → tbody */
    .section2-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "desc"
            "bottom"
            "table";
        gap: 20px;
    }
    .specs-col   { display: contents; }
    .machine-col { grid-area: image; }
    .spec-title  { grid-area: title; }
    .spec-desc   { grid-area: desc; }
    .bottom-stats{
        grid-area: bottom;
        display: flex;
        flex-direction: row;
        gap: 40px;
        margin-top: 0;
    }
    .spec-table  { grid-area: table; }

    /* 4) PRODUK — 3 stat jadi 3 baris (kolom kiri) + swatch kain di kolom kanan */
    .product-stats {
        display: grid;
        grid-template-columns: 1fr auto;   /* kiri: stat | kanan: swatch */
        grid-auto-rows: auto;
        column-gap: 22px;
        row-gap: 16px;
        align-items: start;
    }
    .product-stat {
        grid-column: 1;                    /* semua stat di kolom kiri → 3 baris */
    }
    .product-swatch {
        grid-column: 2;
        grid-row: 1 / span 3;              /* kolom kanan, sejajar 3 baris */
        align-self: center;
        width: 118px;
        height: 118px;
    }

    /* Banner berita mobile: 1 kartu, rasio sedikit lebih landscape */
    .page-home .news-img-placeholder { aspect-ratio: 16 / 10; }
}

/* DESKTOP: banner berita mentok kiri (3 penuh + ~1/4), */

/* DESKTOP (≥901px) */
@media (min-width: 901px) {
    /* Berita: track menempel ke kiri, kartu lebih ramping → tampak 3 penuh + ~1/4 */
    .page-home .news-area { padding: 0; }
    .page-home .news-track-container {
        padding: 10px 0;         /* kartu pertama mentok ke kiri */
        overflow: hidden;
    }
    .page-home .news-track { gap: 24px; }
    .page-home .news-card { flex: 0 0 30%; }   /* ±3,25 kartu per viewport */

    /* Panah prev/next tetap overlay di tepi */
    .page-home .prev-arrow { left: 6px; }
    .page-home .next-arrow { right: 6px; }
}

/* MOBILE (≤900px) */
@media (max-width: 900px) {

    /* 1) product-stats: hilangkan jarak kiri-kanan (flush), swatch mepet kanan */
    .product-stats {
        margin: 0;
        padding: 0;
        width: 100%;
        column-gap: 12px;
    }
    .product-swatch { justify-self: end; margin: 0; }

    /* 2) Beri jarak antara panah (hero-scroll) dengan cap-stats di section Capacity */
    .cap-stats { bottom: 108px; }     /* dinaikkan → ada ruang ke panah */
    #section5 .hero-scroll { bottom: 30px; }

    /* 3) Banner berita mobile diperbesar: 1 kartu penuh, gambar lebih tinggi */
    .page-home .news-track-container { padding: 10px 18px; }
    .page-home .news-card { flex: 0 0 100%; }
    .page-home .news-img-placeholder {
        aspect-ratio: 4 / 3;
        height: auto;
        max-height: none;
    }
}

/* SESUAIKAN KE GRID FIGMA 1440px */

.page-home {
    /* jarak tepi konten yang ikut grid 1440 */
    --edge: max(60px, calc((100% - 1320px) / 2));
}

/* Navbar: brand & lang ikut grid 1440 (menu tetap center layar) */
.page-home .navbar { padding-left: var(--edge); padding-right: var(--edge); }

/* Section 1 — Hero */
.page-home .hero-content { padding-left: var(--edge); padding-right: var(--edge); }

/* Section 2 — Winding */
.page-home .section2-inner { padding-left: var(--edge); padding-right: var(--edge); }

/* Section 4 — Product */
.page-home .product-inner,
.page-home .product-inner--3col { padding-left: var(--edge); padding-right: var(--edge); }
.page-home .product-seeall-bar { right: var(--edge); }

/* Section 5 — Capacity (overlay absolute) */
.page-home .cap-content { left: var(--edge); }
.page-home .cap-stats   { left: var(--edge); right: var(--edge); }

/* Section 7 — Winding Icon (teks kiri-atas) */
.page-home .content-top { padding-left: var(--edge); padding-right: var(--edge); }

/* Section 8 — Certifications (judul & belt tetap center, cukup samakan gutter) */
.page-home .s8-certs { padding-left: var(--edge); padding-right: var(--edge); }

/* Newsletter tetap center; batasi lebar mengikuti proporsi 1440 */
.page-home .newsletter-area { padding-left: var(--edge); padding-right: var(--edge); }

/* Mobile: gutter mengecil (24px), tidak memakai grid 1440 */
@media (max-width: 900px) {
    .page-home { --edge: 24px; }
}

/* SECTION 6: bukan 1 viewport + carousel 2¼ thumbnail */

/* Section berita setinggi konten (boleh scroll bila tidak muat) */
.page-home .section6 {
    min-height: 0;
    height: auto;
    overflow: visible;
}

/* Desktop: tampil 2 kartu penuh + ~¼ kartu berikutnya */
@media (min-width: 901px) {
    .page-home .news-track { gap: 20px; }
    .page-home .news-card { flex: 0 0 44%; }   /* 2¼ thumbnail per viewport */
}

/* SECTION 8/CTA (.section9): rapikan jarak */

/* Hilangkan gap seragam; atur jarak eksplisit & lebih rapat */
.section9 .s8-cta-content { gap: 0; }
.section9 .s8-line1 { margin: 0; }
.section9 .s8-line2 { margin: 0; }          /* dua baris judul rapat (hanya line-height) */
.section9 .s8-desc  { margin-top: 18px; }   /* jarak judul → deskripsi */
.section9 .s8-btn   { margin-top: 20px; }   /* jarak deskripsi → tombol (lebih dekat) */

@media (max-width: 900px) {
    .section9 .s8-desc { margin-top: 12px; }
    .section9 .s8-btn  { margin-top: 14px; }
}

/* ABOUT US: judul hero (1440) + animasi TONG (SVG/CSS) */

/* Judul hero: Poppins Medium 48/63, dipaksa 2 baris (±428px) */
.about-us-hero__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 63px;
    letter-spacing: 0;
    max-width: 430px;      /* → "Lahir Dari Sebuah / Misi Sederhana" */
}

/* Panggung TONG */
.about-us-tongs__stage {
    height: 440px;
    max-width: 1440px;
    margin: 0 auto 40px;
}
.tong-scene { position: relative; width: 100%; height: 100%; }

/* garis horizon */
.tong-line {
    position: absolute;
    left: 0; right: 0;
    top: 58%;
    height: 1px;
    background: #111;
    opacity: .30;
}
.tong-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Tiap tong (gambar tong.png) — FLOW: dari luar viewport → masuk → nabrak → keluar viewport → loop */
.tong {
    position: absolute;
    display: block;
    height: auto;
    opacity: 0;
    animation: tongFlow 12s cubic-bezier(.33, .02, .30, 1) infinite both;
    will-change: transform, opacity;
}

/* Sesuai VIDEO: SEMUA tong masuk dari KANAN → menyapu ke KIRI → nabrak/menumpuk → */
.tong--1 { left: 12%; bottom: 22%; width: 142px; --from: 900%; --over: -12%; --exit: -720%;  animation-delay: 0.00s; }
.tong--2 { left: 22%; bottom: 30%; width: 138px; --from: 860%; --over: -12%; --exit: -820%;  animation-delay: 0.45s; }
.tong--3 { left: 32%; bottom: 21%; width: 142px; --from: 740%; --over: -10%; --exit: -900%;  animation-delay: 0.90s; }
.tong--4 { left: 60%; bottom: 22%; width: 142px; --from: 460%; --over: -10%; --exit: -1180%; animation-delay: 1.35s; }
.tong--5 { left: 70%; bottom: 30%; width: 138px; --from: 370%; --over: -8%;  --exit: -1280%; animation-delay: 1.80s; }

@keyframes tongFlow {
    0%   { transform: translateX(var(--from)); opacity: 0; }   /* di luar layar (kanan) */
    4%   { opacity: 1; }                                        /* muncul saat masuk */
    42%  { transform: translateX(var(--over)); opacity: 1; }   /* menyapu kiri + overshoot (NABRAK) */
    50%  { transform: translateX(0); }                         /* mundur → diam di posisi rest */
    72%  { transform: translateX(0); opacity: 1; }             /* DIAM sejenak (seperti video) */
    100% { transform: translateX(var(--exit)); opacity: 1; }   /* KELUAR ke KIRI lewat tepi layar → loop */
}

/* Hormati pengguna yang mematikan animasi → tampil diam di posisi rest */
@media (prefers-reduced-motion: reduce) {
    .tong { opacity: 1; animation: none; }
}

/* Mobile */
@media (max-width: 900px) {
    .about-us-hero__title { font-size: 30px; line-height: 40px; max-width: 280px; }

    .about-us-tongs__stage { height: 300px; }
    .tong-line { top: 60%; }

    /* Lebar tong RESPONSIF (diperbesar) — tetap ikut lebar layar, tak menindih */
    .tong { width: clamp(56px, 19vw, 92px) !important; }
    /* Pola 2 klaster rapat (3 kiri + 2 kanan) → tong bersentuhan/nabrak, badan tak menindih */
    .tong--1 { left: 4%;  bottom: 20%; }
    .tong--2 { left: 20%; bottom: 28%; }
    .tong--3 { left: 36%; bottom: 19%; }
    .tong--4 { left: 60%; bottom: 20%; }
    .tong--5 { left: 76%; bottom: 28%; }
}

/* HOME Section 4 (Product): samakan UKURAN FONT stats */

#section4 .product-stats .product-stat__value {
    font-size: 28px;
    line-height: 45px;
    font-weight: 700;
}

#section4 .product-stats .product-stat__label {
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 1px;
    font-weight: 400;
    color: #8a8a8a;
    margin-top: 2px;
}
/* Tinggi gambar cone disamakan dengan product-detail */
#section4 .product-cone img {
    max-height: 54vh;
    max-width: 100%;
    object-fit: contain;
}

/* HOME Section 4: samakan ANIMASI SWAP & LAYOUT dengan */

/* LAYOUT: kolom rata-atas + proporsi grid seperti product-detail */
#section4 .product-inner--3col {
    grid-template-columns: 1fr 1.2fr 0.7fr;   /* info | cone(lebih lebar) | stats */
    align-items: start;                        /* judul kiri-atas, stats kanan-atas (spt gbr 2) */
}
#section4 .product-desc {
    text-align: justify;                       /* rata kiri-kanan seperti product-detail */
    max-width: 45ch;
}

/* ANIMASI SWAP: slide-in BERARAH seperti mp4 (konten masuk dari sisi + fade) */
#section4 .product-slide.active {
    animation: pdSlideIn 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes pdSlideIn {
    0%   { opacity: 0; transform: translateX(calc(var(--enter, 1) * 46px)); }
    35%  { opacity: 1; }
    100% { opacity: 1; transform: translateX(0); }
}

/* Cone muncul dari BLUR + ZOOM (persis product-detail) */
#section4 .product-slide.active .product-cone img {
    animation: pdConeReveal 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes pdConeReveal {
    from { opacity: 0; filter: blur(16px); transform: scale(1.07); }
    to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #section4 .product-slide.active,
    #section4 .product-slide.active .product-left,
    #section4 .product-slide.active .product-stats,
    #section4 .product-slide.active .product-cone img { animation: none; }
}

/* HOME Section 4: cone lebih TINGGI + STATISTIK dirapatkan */

#section4 .product-cone img { max-height: 62vh; height: 70vh}

/* Statistik: nilai rapat ke label (line-height ketat), atur jarak antar-stat & swatch */
#section4 .product-stats { gap: 18px; }                       /* jarak antar 3 statistik */
#section4 .product-stats .product-stat__value {
    line-height: 1.05;                                        /* rapet batas atas-bawah */
}
#section4 .product-stats .product-stat__label { margin-top: 4px; }
#section4 .product-swatch { margin-top: 50px; }               /* swatch sedikit terpisah dari stats */

/* hamburger clickable + pd-swiper anim=Home + swatch */

/* (1) HAMBURGER clickable + menu di atas segalanya (mobile) */
.hamburger { position: relative; z-index: 5; pointer-events: auto; }
@media (max-width: 900px) {
    .navbar-menu { z-index: 1200; }
    .hamburger   { z-index: 1201; }
}

/* (2a) pd-swiper: slide-in berarah + fade (mendekati Home section 4) */
.pd-slide {
    transform: translateX(46px);
    transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1),
                transform 0.7s cubic-bezier(0.22,0.61,0.36,1),
                visibility 0s linear 0.7s;
}
.pd-slide.is-active {
    transform: translateX(0);
    transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1),
                transform 0.7s cubic-bezier(0.22,0.61,0.36,1),
                visibility 0s;
}

/* (2b) product-detail__swatch di KANAN stats — HANYA MOBILE (desktop tetap seperti awal) */
@media (max-width: 900px) {
    .product-detail__side {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
    }
    .product-detail__swatch { align-self: flex-start; margin-top: 0; }
    .product-detail__swatch img { max-width: 120px; }
}

/* (2c) MOBILE Home section 4: info full-width & cone di TENGAH (seperti /products) */
@media (max-width: 900px) {
    #section4 .product-inner--3col { grid-template-columns: 1fr; gap: 18px; }
    #section4 .product-left, #section4 .product-desc { max-width: 100%; }
    #section4 .product-cone { order: -1; display: flex; justify-content: center; }
    #section4 .product-cone img { margin: 0 auto; max-height: 42vh; }
}

/* (4) MODAL quick-view → 1 VIEWPORT (tanpa scroll) + layout 3 kolom ala pd-viewport */
.product-modal { padding: 3vh 24px; }
.product-modal__panel {
    width: min(1120px, 94vw);
    max-height: 94vh; height: auto;
    overflow: visible;
    padding: 40px 48px;
}
.product-modal__grid {
    grid-template-columns: 1fr 1.2fr 0.8fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "info media specs"
        "info media swatch";
    gap: 18px 44px; align-items: start;
}
.product-modal__info  { grid-area: info;  align-self: start; padding-bottom: 0; }
a.product-modal__media { grid-area: media; min-height: 0; }
a.product-modal__media img { max-height: 56vh; max-width: 100%; }
.product-modal__specs {
    position: static; grid-area: specs;
    align-items: flex-end; align-self: start;
}
.product-modal__swatch { grid-area: swatch; align-self: start; margin-top: 12px; }
.product-modal__swatch img { width: 150px; max-width: 150px; }
.product-modal__footer { grid-column: 1 / -1; margin-top: 18px; padding-top: 16px; }

@media (max-width: 900px) {
    .product-modal__panel { max-height: 92vh; overflow-y: auto; padding: 28px 20px; }
    .product-modal__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "media" "info" "specs" "swatch";
        gap: 14px;
    }
    a.product-modal__media img { max-height: 38vh; }
    .product-modal__specs { align-items: flex-start; }
}

/* MODAL quick-view: kolom lebih rapat + X tak mepet judul */
.product-modal__grid { gap: 16px 24px; }                 /* kolom lebih rapat */
.product-modal__info { padding-top: 46px; }              /* judul turun → tidak ketutupan tombol X */
@media (max-width: 900px) {
    .product-modal__grid { gap: 12px; }
    .product-modal__info { padding-top: 8px; }           /* mobile stacked: X di atas media */
}

/* HALAMAN TECHNOLOGY: grid 1440, section 1440x897 (tak dipaksa */

/* Grid 1440 (gutter mengikuti Home REV16) */
.page-technology { --edge: max(60px, calc((100% - 1320px) / 2)); }

.page-technology .page-wrapper { scroll-snap-type: none; }
.page-technology .tech-section {
    height: auto;
    min-height: 897px;
    scroll-snap-align: none;
}
.page-technology .tech-panel { left: var(--edge); right: var(--edge); }

/* Tipografi (Poppins) */
.page-technology .tech-title {
    font-family: 'Poppins', sans-serif; font-weight: 500;
    font-size: 32px; line-height: 32px; letter-spacing: 0;
}
.page-technology .tech-desc {
    font-family: 'Poppins', sans-serif; font-weight: 500;
    font-size: 12px; line-height: 29px; letter-spacing: 1.2px;
}
.page-technology .tech-number {
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: 32px; line-height: 65px; letter-spacing: 0;
}
.page-technology .tech-stat-label {
    font-family: 'Poppins', sans-serif; font-weight: 400;
    font-size: 12px; line-height: 27px; letter-spacing: 1px;
    margin-top: 2px;
}

/* Glass: lebar 527 + tinggi per-section (min-height) */
.page-technology .tech-glass,
.page-technology .tech-glass.has-stats { width: 527px; max-width: 527px; }
.page-technology .tech-s1 .tech-glass { min-height: 289px; }
.page-technology .tech-s2 .tech-glass { min-height: 289px; }
.page-technology .tech-s3 .tech-glass { min-height: 333px; }
.page-technology .tech-s4 .tech-glass { min-height: 359px; }
.page-technology .tech-s5 .tech-glass { min-height: 415px; }
.page-technology .tech-s6 .tech-glass { min-height: 359px; }

/* Count-up: flip ala Home (rolling), bukan rotateX */
.page-technology .tech-number .flip-char { display: inline-block; min-width: 0.62em; text-align: center; }
.page-technology .tech-number .flip-char.flip-anim { animation: flipRoll 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); }

/* MOBILE: seperti Figma (PDF hal.1) — section mengalir, glass full */
@media (max-width: 900px) {
    .page-technology { --edge: 16px; }
    .page-technology .tech-section {
        min-height: 78vh;
        height: auto;
    }
    .page-technology .tech-panel { left: 16px; right: 16px; }
    .page-technology .tech-glass,
    .page-technology .tech-glass.has-stats {
        width: 100%; max-width: 100%; min-height: 0 !important;
        flex-direction: column; gap: 16px; padding: 20px 20px;
    }
    .page-technology .tech-glass-text { max-width: 100%; }
    .page-technology .tech-glass-stats {
        flex-direction: row; flex-wrap: wrap; gap: 26px;
        border-left: 0; padding-left: 0;
        border-top: 1px solid rgba(255,255,255,0.18); padding-top: 14px;
    }
    .page-technology .tech-title  { font-size: 26px; line-height: 30px; }
    .page-technology .tech-desc   { font-size: 12px; line-height: 25px; }
    .page-technology .tech-number { font-size: 30px; line-height: 40px; }
    .page-technology .tech-stat-label { font-size: 11px; line-height: 20px; }
}

/* Technology: cegah .tech-desc bergeser saat angka beranimasi. */
.page-technology .tech-number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
@media (min-width: 901px) {
    .page-technology .tech-glass-stats { flex: 0 0 160px; }
}

/* Technology: arrow-down disamakan PERSIS dengan Home */
.page-technology .tech-chevron { color: #ffffff; animation: techChevronBounce 2.2s ease-in-out infinite; }
.page-technology .tech-chevron svg { width: 40px; height: 40px; }
@keyframes techChevronBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 10px); }
}

/* HALAMAN KARIR (revamp mengacu Figma "Join With Us") */

/* Lebar situs 1440 (sama seperti Home / REV 16) */
.page-career {
    --edge: max(60px, calc((100% - 1320px) / 2));
}
.page-career .navbar {
    padding-left: var(--edge);
    padding-right: var(--edge);
}
.career-page .container {
    max-width: none;
    padding: 0 var(--edge);
    margin: 0;
}

/* JUDUL HALAMAN (.career-title) */
/* Poppins Medium 40 / LH 45 / LS 0 — boleh 1 atau 2 baris dari CMS */
.career-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--career-ink);
}

/* CHIP FILTER (.career-chip) — LOKASI saja */
/* Ukuran 142x45 — Poppins Regular 14 / LH 12 / LS 0 */
.career-chips { gap: 14px 12px; }
.career-chip {
    width: 142px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 12px;
    border-radius: 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* TOMBOL FILTERS (.career-filters__btn) */

.career-filters__btn {
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0;
    gap: 8px;
    align-items: center;
}
.career-filters__icon {
    height: 13px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* PANEL FILTERS sebagai DROPDOWN (overlay) */
.career-filterbar { position: relative; }

.career-page.filters-open .career-filters {
    position: relative;
    z-index: 50;
    background: #fff;
    padding-left: 10px;
}
.career-filterpanel {
    position: absolute;
    top: 0;
    left: var(--edge);
    right: calc(var(--edge) + 120px);   /* sisakan ruang kanan untuk tombol FILTERS */
    margin: 0;
    padding: 2px 0 34px;
    border-top: none;
    background: #fff;
    z-index: 30;
    box-shadow: 0 24px 34px -24px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.career-page.filters-open .career-filterpanel {
    margin: 0;
    padding: 20px;
    border-top: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .24s ease, transform .24s ease;
}

.career-filterpanel .career-filtercol:first-child .career-filterlist { columns: 3; column-gap: 24px; }
.career-filterpanel .career-filtercol:last-child  .career-filterlist { columns: 1; }
.career-filtercol__title { letter-spacing: 1px; }

/* BARIS LOWONGAN (.career-item__row) */

.career-item__row {
    align-items: start;
    padding: 32px 2px 40px;
}
/* Judul jabatan: ikut data (tanpa kapital paksa), default 1 baris, */
.career-item__title {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
    text-transform: none;
    padding-right: 14px;
}
.career-item__loc {
    font-weight: 500;              /* Medium */
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0;
    text-transform: uppercase;
    padding-top: 3px;
}
.career-item__level {
    font-weight: 400;              /* Regular */
    font-size: 12px;
    line-height: 26px;
    letter-spacing: 1.2px;
    padding-top: 3px;
}

/* BLOK DESKRIPSI / KUALIFIKASI */
.career-block__title {
    font-weight: 700;              /* Bold */
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.career-block__list li {
    font-weight: 400;              /* Regular */
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
}

/* FORM LAMARAN */
.career-form { max-width: 552px; }

/* Wajib diisi */
.career-form__req {
    font-weight: 400;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    margin: 0 0 12px;
}

/* Baris Nama Depan + Nama Belakang → tiap field 269x28 */
.career-form__row {
    display: grid;
    grid-template-columns: 269px 269px;
    gap: 14px;
    width: 552px;
    max-width: 100%;
    margin-bottom: 14px;
}
.career-form__row .career-form__field {
    width: 100%;
    margin-bottom: 0;
}

/* Field tunggal (Email, CV, Pesan) → 552 lebar */
.career-form__field {
    width: 552px;
    max-width: 100%;
    margin-bottom: 14px;
}

/* Input teks umum → tinggi 28, radius 7, Poppins Regular 12 / LS 1.2px */
.career-input {
    height: 28px;
    padding: 0 14px;
    border-radius: 7px;
    font-weight: 400;
    font-size: 12px;
    line-height: 28px;
    letter-spacing: 1.2px;
}
/* Pesan → 552x175 */
.career-textarea {
    height: 175px;
    min-height: 175px;
    padding: 7px 14px;
    line-height: 32px;
    resize: vertical;
}

/* Lampirkan CV → 552x28, radius 7 */
.career-filelabel {
    height: 28px;
    padding: 0 14px;
    border-radius: 7px;
    align-items: center;
}
.career-filelabel__text {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1.2px;
    gap: 7px;
}
.career-filelabel__hint {
    font-size: 11px;
    letter-spacing: .3px;
}

.career-form__note {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1.2px;
    text-align: justify;
    margin: 10px 0 22px;
}

/* Tombol DAFTAR / KIRIM → 82x21, Poppins Regular 12 / LH 29 / LS 0 */
.career-apply__btn,
.career-form__submit {
    width: 82px;
    height: 21px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    font-weight: 400;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

/* RESPONSIVE (mobile): dropdown & chip menyesuaikan */
@media (max-width: 900px) {
    .page-career { --edge: 24px; }
}
@media (max-width: 820px) {
    .career-title { font-size: 30px; line-height: 34px; }

    .career-chip {
        width: auto;
        height: auto;
        min-width: 0;
        padding: 9px 16px;
        line-height: 14px;
    }

    /* panel dropdown → full lebar, kolom menumpuk */
    .career-filterpanel {
        left: var(--edge);
        right: var(--edge);
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .career-filterpanel .career-filtercol:first-child .career-filterlist { columns: 2; }

    /* form full-width di mobile */
    .career-form,
    .career-form__field,
    .career-form__row { width: 100%; max-width: 100%; }
    .career-form__row { grid-template-columns: 1fr; gap: 0; }
    .career-form__row .career-form__field { margin-bottom: 14px; }
}

.career-page .career-head { margin: 0 0 100px; }

/* Bar filter: chip & tombol FILTERS sejajar center */
.page-career .career-filterbar { align-items: center; padding-bottom: 0; }
.page-career .career-chips { gap: 10px 8px; align-items: center; }

/* CHIP kompak — mengikuti lebar teks (bukan kotak 142x45) */
.page-career .career-chip {
    width: auto;
    height: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .2px;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Chip aktif tetap gelap, ukuran sama biar rapi sebaris */
.page-career .career-chip.is-active { padding: 7px 16px; }

/* Tombol FILTERS ikut kecil & rata dengan chip */
.page-career .career-filters__btn { line-height: 1.2; }

/* Mobile: sedikit lebih longgar tapi tetap kompak */
@media (max-width: 820px) {
    .career-page .career-head { margin-bottom: 28px; }
    .page-career .career-chip { padding: 7px 14px; font-size: 11px; }
}

/* Career: margin-left judul, jarak filterbar, panel */

/* (1) MARGIN-LEFT judul (seperti Figma: judul menjorok dari tepi garis/chip). */
.page-career .career-title { margin-left: 40px; }
.page-career .career-item__title { padding-left: 40px; }

/* (2) Jarak bawah filter bar (tadinya 0 → chip nempel daftar) */
.career-page .career-filterbar { margin-bottom: 26px; }

/* (4) Sejajarkan CHEVRON + LOKASI + LEVEL dengan judul di baris pertama. */
.page-career .career-item__loc,
.page-career .career-item__level {
    line-height: 32px;
    padding-top: 0;
}
.page-career .career-item__chev {
    height: 32px;
    align-items: center;
}

/* (3) PANEL FILTERS full-width (seperti gambar 3): Divisi | Lokasi | ruang FILTERS */
.career-filterpanel {
    right: var(--edge);
    grid-template-columns: 48% 24% 28%;
    column-gap: 32px;
}

.page-career .career-form__note { color: var(--career-ink); }

/* Responsive kecil: indent judul dilepas, panel jadi 1 kolom */
@media (max-width: 820px) {
    .page-career .career-title { margin-left: 0; }
    .page-career .career-item__title { padding-left: 0; }
    .career-filterpanel { grid-template-columns: 1fr; }
}

/* Career: PANEL FILTER full-bleed (mentok kiri & kanan) */
.career-filterpanel {
    left: 0;
    right: 0;                     /* penuh: tepi kiri → tepi kanan */
    padding-left: var(--edge);    /* isi sejajar chip/judul, tak mepet tepi */
    padding-right: var(--edge);
}
.career-page.filters-open .career-filterpanel {
    padding: 20px var(--edge) 40px;
}

/* Isi panel filter indent 40px (sejajar judul), */
.career-filterpanel {
    padding-left: calc(var(--edge) + 40px);
}
.career-page.filters-open .career-filterpanel {
    padding: 20px var(--edge) 40px calc(var(--edge) + 40px);
}

/* NEWS: hover & warna selaras page Career, */

/* (1) HOVER seperti Career: kartu meredup halus, tanpa underline */
.news-list .news-card { transition: opacity .2s ease; }
.news-list .news-card:hover { opacity: .72; }

/* (2) Judul artikel TIDAK underline (termasuk saat hover) */
.news-page .news-card__title a,
.news-page .news-card__title a:hover { text-decoration: none; }

/* (3) Tanggal kiri TIDAK underline saat hover */
.news-page .news-card__date:hover .news-card__day { text-decoration: none; }

/* (4) Warna diselaraskan dgn Career (accent #58595B, ink #1c1c1c) */
.news-page .news-chip.is-active { background: #58595B; border-color: #58595B; }
.news-page .news-chip:hover      { border-color: #58595B; color: #1c1c1c; }
.news-page .news-card__cat:hover { border-color: #58595B; color: #1c1c1c; }
.news-page .news-card__btn:hover { background: #58595B; border-color: #58595B; }
.news-page .news-filters__btn:hover { color: #1c1c1c; }

.news-page .news-card__excerpt { text-align: left; }

/* NEWS: ikon FILTERS pakai aset yang sama dgn Career */
.news-filters__icon {
    height: 13px;
    width: auto;
    display: block;
    object-fit: contain;
}
/* jaga tombol tetap sejajar ikon+teks */
.news-filters__btn { display: inline-flex; align-items: center; gap: 8px; }

/* SILVER KRIS: stats (jarak/ukuran/posisi), arrow SVG, */

/* (1) STATISTIK: angka diperbesar + rapat ke label + dinaikkan dari arrow */
.sk-wrap .sk-hero__stats { bottom: 11%; }
.sk-wrap .sk-stat__value { font-size: 40px; line-height: 1.08; margin-bottom: 4px; }
.sk-wrap .sk-stat__label { line-height: 1.4; }

/* (1b) ARROW: chevron SVG (sama seperti home & technology) + bounce */
.sk-wrap .sk-hero__scroll {
    bottom: 30px;
    font-size: 0;
    animation: heroScrollBounce 2.2s ease-in-out infinite;
}
.sk-wrap .sk-hero__scroll .scroll-arrow-svg { width: 36px; height: 36px; display: block; }

/* (4) LOGO SILVER KRIS sejajar sisi atas foto di kanannya */
.sk-wrap .sk-vision__media { margin-top: -78px; }

/* (3) PARALLAX: container gambar butuh position:relative utk .reveal-img__inner */
.sk-wrap .sk-vision__media,
.sk-wrap .sk-gallery__item { position: relative; }

@media (max-width: 992px) {
    .sk-wrap .sk-vision__media { margin-top: 0; }
}

/* ARROW: pakai images/ARROW.png (bukan SVG) di semua */
.sd-arrow { display: block; width: 32px; height: auto; }
/* Home hero: setara chevron lama */
.hero-scroll .sd-arrow { width: 34px; }
/* Technology */
.tech-chevron .sd-arrow { width: 34px; }
.page-technology .tech-chevron .sd-arrow { width: 42px; }
/* Silver Kris */
.sk-wrap .sk-hero__scroll .sd-arrow { width: 34px; }

/* Products: grid "Lihat Semua" 4 kolom (desktop), */

@media (min-width: 993px) and (max-width: 1600px) {
    .products-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Saat swipe/drag: gambar & teks tidak ikut terseleksi ("keblok") */
.swiper, .swiper-slide,
.sk-slider__track, .sk-slider__viewport,
.pd-track {
    -webkit-user-select: none;
    user-select: none;
}
.swiper-slide img,
.sk-slider__track img,
.pd-track img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* Rata kiri (Home/Technology/About) + warna putih */

.product-desc,                 /* deskripsi produk (Home/Produk) */
.tech-desc,                    /* deskripsi mesin (Technology) */
.about-us-notes__text p,       /* Director's Notes (About) */
.about-us-notes__sidequote,    /* kutipan samping (About) */
.about-us-feature p            /* Presisi/Diversifikasi/Keahlian */
{ text-align: left; }

/* (4) Judul Direktur & Komisaris → PUTIH (di atas foto hero) */
.about-us-hero__role,
.about-us-hero__name { color: #ffffff; }

/* Product detail: saat SEE ALL dibuka, rapatkan jarak */
.product-detail.catalog-open { padding-bottom: 0; }
.product-detail.catalog-open .product-detail__related { padding-bottom: 6px; }
.product-detail.catalog-open + .all-products {
    margin-top: 0;
    padding-top: 0;        /* jarak total = 6px (dari related padding-bottom) */
}

/* REV 40 — Newsletter loading state + note */
.newsletter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
}
.newsletter-btn.is-loading { pointer-events: none; opacity: 0.9; }
.newsletter-btn .btn-spinner {
    width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: nlspin 0.6s linear infinite;
    display: none;
}
.newsletter-btn.is-loading .btn-spinner { display: inline-block; }
.newsletter-btn.is-loading .btn-label { opacity: 0.7; }
@keyframes nlspin { to { transform: rotate(360deg); } }
.newsletter-note {
    font-size: 12px;
    color: #e05555;
    font-weight: 500;
    margin-top: 8px;
    display: none;
}

/* HOME: fix teks kolaps saat zoom-out + label kapasitas */
/* (3) .hero-content: posisikan via margin-left (bukan padding), */
.page-home .hero-content {
    margin-left: var(--edge);
    padding-left: 0;
    box-sizing: border-box;
}

.page-home .cap-label { text-transform: none; }

/* Silver Kris dots + perbaikan mobile (hamburger, tur, news) */

/* (2) SK slider dots: bentuk pill(aktif) + bulat(non-aktif) seperti referensi */
.sk-wrap .sk-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
}
.sk-wrap .sk-dot.active {
    width: 26px; height: 8px;
    border-radius: 999px;
    background: #ffffff;
}

/* (3) Hamburger benar-benar bisa diklik (naikkan z-index di atas overlay hero) */
.hamburger { position: relative; z-index: 60 !important; pointer-events: auto !important; }
.navbar, .navbar-inner { pointer-events: auto; }

/* (10) Halaman Tur/Up Close (mobile): konten seimbang kiri-kanan */
@media (max-width: 992px) {
    .tour-layout, .news-layout {
        margin-left: 24px !important;
        margin-right: 24px !important;
        max-width: none !important;
    }
}
@media (max-width: 640px) {
    .tour-layout, .news-layout {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

/* (9) News mobile: hilangkan ruang kosong besar (min-height body 410 direset) */
@media (max-width: 760px) {
    .news-list .news-card__body { min-height: 0 !important; }
    .news-list .news-card { grid-template-columns: 1fr !important; gap: 14px !important; }
    .news-list .news-card__thumb { width: 100% !important; height: 220px !important; max-width: 100% !important; }
    .news-list .news-card__meta { margin-top: 22px !important; }
}

/* Mobile: produk detail = home, popup, cone center, */
@media (max-width: 768px) {
    /* (4) HOME: cone benar-benar center */
    .page-home .product-cone { justify-content: center; width: 100%; margin: 0 auto; }
    .page-home .product-cone img { margin: 0 auto; }

    /* (5) PRODUCTS detail = HOME: kolom kanan STACK (specs → swatch di BAWAH), */
    .product-detail__side {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        width: 100%;
    }
    .product-detail__swatch { margin-top: 2px; }
    .product-detail__swatch img { margin-left: 0 !important; max-width: 200px; }
    .product-detail__media { display: flex; justify-content: center; }
    .product-detail__media img { max-height: 300px !important; margin: 0 auto; }

    /* (7) POPUP produk = layout HOME (cone atas → info → specs → swatch bawah) */
    .product-modal__grid { display: flex !important; flex-direction: column !important; }
    a.product-modal__media { order: -1; }
    .product-modal__side { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
    .product-modal__swatch { margin-top: 8px; }
    .product-modal__swatch img { margin-left: 0 !important; max-width: 200px; }

    /* (6) SEE ALL mobile: 1 kolom, margin seragam (atas-bawah = kiri-kanan) */
    .products-grid,
    .product-detail__related-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 12px !important;
    }
}

/* (8) TECHNOLOGY per-section di mobile (snap tegas 1 layar/section) */
@media (max-width: 992px) {
    .page-technology .page-wrapper { scroll-snap-type: y mandatory; }
    .page-technology .tech-section { height: 100vh; scroll-snap-align: start; overflow: hidden; }
}

/* menu mobile (home), swatch products = home, gap SEE ALL */

/* (1) Navbar & menu mobile SELALU di atas + tampil (termasuk Home) */
.navbar { z-index: 1000; }
.navbar-menu { z-index: 1001 !important; }
@media (max-width: 900px) {
    .navbar-menu { position: fixed; top: 60px; left: 0; width: 100%; }
    .navbar-menu.open,
    .page-home .navbar-menu.open { display: flex !important; }
}

@media (max-width: 768px) {
    /* (2) PRODUCTS swatch = HOME: specs KIRI, swatch KANAN (bukan menumpuk) */
    .product-detail__side {
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 16px !important;
        width: 100%;
    }
    .product-detail__specs { text-align: left !important; flex: 1 1 auto; }
    .product-detail__swatch { flex: 0 0 auto; margin-top: 0 !important; }
    .product-detail__swatch img { max-width: 120px !important; margin-left: 0 !important; }

    /* (3) SEE ALL mobile: rapat, tanpa spasi besar antar kartu */
    .all-products .products-grid,
    .products-grid { gap: 6px !important; }
    .all-products .product-card { margin: 0 !important; }
}

/* FIX menu mobile Home + jarak SEE ALL mobile (final) */

/* (2) MENU MOBILE: navbar punya backdrop-filter → position:fixed menu jadi */
.navbar { z-index: 2000 !important; }
@media (max-width: 900px) {
    .navbar-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100vw !important;
        z-index: 2001 !important;
    }
    .navbar-menu.open,
    .page-home .navbar-menu.open { display: flex !important; }
}

/* (1) SEE ALL mobile: matikan SEMUA sumber jarak besar */
@media (max-width: 768px) {
    /* gap antar kartu */
    .all-products .products-grid,
    .products-grid { gap: 6px !important; row-gap: 6px !important; }
    .all-products .product-card,
    .products-grid > * { margin: 0 !important; }
    /* jarak grid "4 produk" (related) → sisa (allProducts) */
    .product-detail.catalog-open .product-detail__related { padding-bottom: 6px !important; }
    .product-detail.catalog-open + .all-products { padding-top: 0 !important; margin-top: 0 !important; }
    .all-products { padding-top: 6px !important; }
    .all-products .products-page__title { margin-bottom: 12px !important; }
}

/* Menu mobile di-PORTAL ke body (fix Home) + samakan */

/* (2) Menu yang sudah di-portal ke <body>: fixed di bawah navbar, di atas semua */
.navbar-menu--portaled {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 100000 !important;
}
.navbar-menu--portaled:not(.open) { display: none !important; }
.navbar-menu--portaled.open { display: flex !important; }

@media (max-width: 768px) {
    /* (1) Kartu "4 produk teratas" (related) = kartu SEE ALL: 1 kolom, aspek 1:1, */
    .product-detail__related-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 0 12px !important;
    }
    .product-detail__related .product-card__media {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    .product-detail__related .product-card__caption {
        padding: 16px 16px 18px !important;
    }
}

/* hilangkan padding .container (@media 900) di halaman */
@media (max-width: 900px) {
    .product-detail .container,
    .all-products .container,
    .products-page .container {
        padding: 0 !important;
    }
}

/* kembalikan SPACE kiri-kanan pd-viewport (mobile). */
@media (max-width: 900px) {
    .product-detail .container,
    .all-products .container,
    .products-page .container {
        padding: 0 20px !important;
    }
}

/* Popup produk = layout home (gbr 3): cone → judul+desc → specs → swatch */
@media (max-width: 768px) {
    .product-modal__grid { display: flex !important; flex-direction: column !important; }
    a.product-modal__media  { order: 0 !important; }
    .product-modal__info    { order: 1 !important; }
    .product-modal__side,
    .product-modal__specs   { order: 2 !important; width: 100%; }
    .product-modal__swatch  { order: 3 !important; }
    .product-modal__swatch img { margin-left: 0 !important; max-width: 200px; }
}

/* menu frosted (portaled), swatch products = home, */

/* (1) Menu mobile yang di-portal ke body: frosted/bening (blur) supaya */
.navbar-menu--portaled {
    background: rgba(255,255,255,0.82) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

@media (max-width: 768px) {
    /* (2) PRODUCTS swatch = HOME (gbr 2): pojok KANAN-BAWAH, ukuran ~110px */
    .product-detail__side { align-items: flex-end !important; }
    .product-detail__swatch { align-self: flex-end !important; margin-top: 0 !important; }
    .product-detail__swatch img { max-width: 110px !important; margin-left: 0 !important; }

    /* (3) POPUP: cone ke TENGAH + swatch kanan-bawah */
    a.product-modal__media,
    .product-modal__media {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .product-modal__media img { margin: 0 auto !important; display: block !important; }
    .product-modal__side { align-items: flex-end !important; }
    .product-modal__swatch { align-self: flex-end !important; }
    .product-modal__swatch img { max-width: 110px !important; margin-left: 0 !important; }
}

/* menu frosted GELAP saat di atas gambar (putih kalau bg */

/* (1) Default: putih. Saat di atas gambar (class menu-on-image dari JS): */
.navbar-menu--portaled {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.navbar-menu--portaled.menu-on-image {
    background: rgba(35,35,35,0.5) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.navbar-menu--portaled.menu-on-image a,
.navbar-menu--portaled.menu-on-image a:hover { color: #ffffff !important; }

/* (2) POPUP mobile: cone ke TENGAH + swatch rapat (tidak terlalu bawah) */
@media (max-width: 768px) {
    a.product-modal__media,
    .product-modal__media {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }
    .product-modal__media img { margin: 0 auto !important; display: block !important; }

    .product-modal__swatch {
        align-self: flex-end !important;
        margin-top: 4px !important;
    }
    .product-modal__swatch img { max-width: 100px !important; margin-left: 0 !important; }
}

/* POPUP mobile: swatch SEBARIS dengan specs (grid-areas) */
@media (max-width: 768px) {
    .product-modal__grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "media media"
            "info  info"
            "specs swatch" !important;
        gap: 0 12px !important;
        align-items: start !important;
    }
    .product-modal__media  { grid-area: media !important; justify-self: center !important; }
    .product-modal__info   { grid-area: info !important; }
    .product-modal__specs  { grid-area: specs !important; }
    .product-modal__swatch {
        grid-area: swatch !important;
        align-self: end !important;
        justify-self: end !important;
        margin: 0 !important;
    }
    .product-modal__swatch img { max-width: 100px !important; margin: 0 !important; }
}

/* samakan frosted menu portaled PERSIS dengan .navbar */
.navbar-menu--portaled {
    background: #ffffff !important;
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;
    box-shadow: none !important;
}
.navbar-menu--portaled.menu-on-image {
    background: rgba(18, 18, 18, 0.30) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30) !important;
}
.navbar-menu--portaled.menu-on-image a,
.navbar-menu--portaled.menu-on-image a:hover { color: #ffffff !important; }

/* HALAMAN KONTAK (Hubungi Kami) — sesuai PDF + spec Figma */
.contact-page {
    background: #ffffff;
    padding-top: 140px;
    color: var(--tour-ink);
    font-family: 'Poppins', sans-serif;
}

.contact-title {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #111111;
    margin: 0 0 64px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: start;
    padding-bottom: 72px;
}

/* KIRI: info */
.contact-info { margin-top: 56px; }
.contact-info__row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    margin-bottom: 44px;
}
.contact-info__label {
    font-size: 15px; font-weight: 600; color: var(--tour-ink);
    margin: 0; line-height: 1.4;
}
.contact-info__value { font-size: 13px; line-height: 1.9; color: var(--tour-body); }
.contact-info__value p { margin: 0; }
.contact-info__value a { color: var(--tour-body); text-decoration: none; }
.contact-info__value a:hover { color: var(--tour-ink); }

/* KANAN: form (lebar total 552px sesuai Figma) */
.contact-form-wrap { max-width: 552px; }
.contact-form__heading {
    font-size: 20px; font-weight: 600; color: var(--tour-ink); margin: 0 0 22px;
}
.contact-required { font-size: 12px; color: var(--tour-body); margin: 0 0 14px; }
.contact-required span { color: #e0736b; margin-right: 3px; }

.contact-form { max-width: 552px; }
.contact-form__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;                     /* 269 + 14 + 269 = 552 */
}
.contact-field { min-width: 0; }
.contact-field--half { flex: 0 0 calc(50% - 7px); }   /* -> 269px pada 552 */
.contact-field--full { flex: 0 0 100%; }              /* -> 552px */

.contact-input {
    width: 100%;
    height: 28px;
    background: #f3f3f3;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12px;
    line-height: 28px;
    color: var(--tour-ink);
    box-sizing: border-box;
    transition: border-color .2s ease, background-color .2s ease;
}
.contact-input::placeholder { color: var(--tour-muted); }
.contact-input:focus { outline: none; border-color: #cfcfcf; background: #eeeeee; }
.contact-input.is-error { border-color: #e0736b; background: #fff5f4; }

/* Textarea 552x175, label *Pesan di dalam kiri-atas */
.contact-msg-field { position: relative; }
.contact-textarea {
    height: 175px;
    line-height: 1.6;
    padding: 10px 14px;
    resize: vertical;
}
.contact-msg-hint {
    position: absolute;
    top: 10px; left: 15px;
    font-size: 12px;
    color: var(--tour-muted);
    pointer-events: none;
    transition: opacity .15s ease;
}
.contact-msg-hint span { color: #e0736b; margin-right: 3px; }
/* sembunyikan hint saat fokus / sudah ada isi (textarea pakai placeholder=" ") */
.contact-msg-field textarea:focus ~ .contact-msg-hint,
.contact-msg-field textarea:not(:placeholder-shown) ~ .contact-msg-hint { opacity: 0; }

/* Tombol Kirim 71x21, pill penuh (r720) */
.contact-form__actions { margin-top: 20px; }
.contact-submit {
    min-width: 71px;
    height: 21px;
    padding: 0 14px;
    border-radius: 720px;
    font-size: 9.5px;
    letter-spacing: 1px;
    line-height: 1;
}
.contact-submit:hover { background: var(--tour-btn-hover); color: #fff; border-color: var(--tour-btn-hover); }

.contact-alert { font-size: 13px; margin: 0 0 16px; }
.contact-alert--ok  { color: #2e7d5b; }
.contact-alert--err { color: #c0564e; }

/* MAP full-width */
.contact-map { width: 100%; height: 340px; line-height: 0; background: var(--about-us-gray); }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* TABLET 1024px (iPad landscape) */
@media (max-width: 1024px) {
    .contact-page  { padding-top: 120px; }
    .contact-title { font-size: 30px; margin-bottom: 48px; }
    .contact-grid  { gap: 44px; }
    .contact-info  { margin-top: 44px; }
    .contact-info__row { grid-template-columns: 130px 1fr; gap: 18px; margin-bottom: 36px; }
    .contact-map   { height: 300px; }
}

/* TABLET 768px (iPad portrait) */
@media (max-width: 768px) {
    .contact-page  { padding-top: 104px; }
    .contact-title { font-size: 26px; margin-bottom: 36px; }
    .contact-grid  { grid-template-columns: 1fr; gap: 40px; }
    .contact-info  { margin-top: 0; order: 2; }
    .contact-form-wrap { order: 1; max-width: 100%; }
    .contact-form  { max-width: 100%; }
    .contact-info__row { grid-template-columns: 140px 1fr; }
    .contact-map   { height: 260px; }
}

/* HP kecil */
@media (max-width: 480px) {
    .contact-field--half { flex: 0 0 100%; }
    .contact-info__row   { grid-template-columns: 1fr; gap: 6px; }
    .contact-title       { font-size: 23px; }
}

/* REVISI KLIEN (poin 1–14) */

/* (0) CHEVRON GLOBAL — SATU bentuk untuk SELURUH situs */
.ui-chevron {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    overflow: visible;
    pointer-events: none;
}
.ui-chevron--right { transform: rotate(0deg); }
.ui-chevron--left  { transform: rotate(180deg); }
.ui-chevron--down  { transform: rotate(90deg); }
.ui-chevron--up    { transform: rotate(-90deg); }

/* Versi kecil (SEE ALL, pager) — proporsi identik, hanya diperkecil */
.ui-chevron--sm { width: 14px; height: 14px; }

/* Tombol pembungkus chevron: hilangkan gaya tombol bawaan */
.news-arrow,
.sk-wrap .sk-slider__arrow,
.pd-pager__arrow {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;                 /* buang sisa glyph teks lama */
    line-height: 0;
}

/* (1) & (2) FORMAT iPAD / TABLET (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Gutter tablet */
    .page-home,
    .page-technology { --edge: 40px; }

    /* Tiap section = TEPAT 1 layar (svh → aman dari bilah URL iPadOS) */
    .page-home .section {
        min-height: 100svh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }
    .page-home .section6,
    .page-home .section8 { min-height: 0; overflow: visible; }

    .page-home .section2-inner,
    .page-home .product-inner,
    .page-home .product-inner--3col {
        display: grid;
        overflow: visible;
        padding-top: 88px;
        padding-bottom: 72px;
        box-sizing: border-box;
    }

    /* Section 2 (Winding): 2 kolom */
    .page-home .section2-grid {
        display: grid;
        grid-template-areas: none;
        grid-template-columns: 1fr 1.05fr;
        gap: 30px;
        align-items: center;
    }
    .page-home .specs-col   { display: block; grid-area: auto; }
    .page-home .machine-col { grid-area: auto; }
    .page-home .spec-title,
    .page-home .spec-desc,
    .page-home .spec-table,
    .page-home .bottom-stats { grid-area: auto; }
    .page-home .bottom-stats { display: flex; flex-direction: row; gap: 40px; margin-top: 26px; }
    .page-home .machine-col img,
    .page-home .machine-col video {
        max-height: 44svh;
        max-width: 100%;
        object-fit: contain;
    }

    /* Section 4 (Product) */
    .page-home .product-inner--3col {
        grid-template-columns: 1fr 0.9fr;
        grid-template-areas:
            "left cone"
            "stats stats";
        gap: 20px 28px;
        align-content: center;
        align-items: center;
    }
    .page-home .product-inner--3col .product-left { grid-area: left; max-width: none; order: 0; }
    .page-home .product-cone  { grid-area: cone; order: 0; }
    .page-home .product-stats { grid-area: stats; }
    .page-home .product-cone img { max-height: 40svh; }

    .page-home .product-stats {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 34px;
    }
    .page-home .product-stat   { grid-column: auto; grid-row: auto; }
    .page-home .product-swatch {
        grid-column: auto;
        grid-row: auto;
        width: 96px;
        height: 96px;
        margin: 0 0 0 auto;
        align-self: center;
    }
    .page-home .product-extra-specs { margin-top: 22px; }
    .page-home .product-extra-specs td { padding: 8px 0; }

    @media (min-width: 901px) {
        .page-home .product-inner--3col {
            grid-template-columns: 1fr 1fr 0.62fr;
            grid-template-areas: "left cone stats";
            gap: 26px;
        }
        .page-home .product-stats {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }
        .page-home .product-swatch { margin: 12px 0 0; width: 104px; height: 104px; }
        .page-home .product-cone img { max-height: 44svh; }
    }

    /* Tipografi dinaikkan: keluhan "kurang gede" di iPad */
    .page-home .hero-title,
    .page-home .spec-title,
    .page-home .product-title { font-size: 34px; line-height: 40px; }
    .page-home .hero-desc     { font-size: 13px; line-height: 26px; }
    .page-home .spec-desc,
    .page-home .product-desc  { font-size: 12.5px; line-height: 25px; max-width: none; }
    .page-home .spec-table td,
    .page-home .product-extra-specs td { font-size: 13px; line-height: 24px; }
    .page-home .product-stats .product-stat__value { font-size: 26px; line-height: 34px; }
    .page-home .product-stats .product-stat__label { font-size: 13px; line-height: 22px; }
    .page-home .bottom-stat .bottom-number,
    .page-home .cap-number { font-size: 30px; line-height: 38px; }
    .page-home .bottom-stat .bottom-label,
    .page-home .cap-label  { font-size: 13px; line-height: 22px; }

    /* Section 6 (Berita): 2 kartu per layar */
    .page-home .news-track-container { padding: 10px 0px; }
    .page-home .news-card { flex: 0 0 calc(50% - 10px); }
    .page-home .news-img-placeholder { aspect-ratio: 638 / 494; }

    /* Halaman lain */
    .sk-wrap .sk-hero__header { padding: 130px 0 44px; grid-template-columns: 1fr 42%; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr 1fr; }
    .sk-wrap .sk-pcard { flex: 0 0 46%; width: 46%; }
    .career-page .container,
    .page-career .container { padding: 0 40px; }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .about-us-notes,
    .about-us-features { padding-left: 40px; padding-right: 40px; }
}

/* (3) SCROLL BALIK KE AWAL SAAT SCROLL */
html { scroll-behavior: auto; }
.page-wrapper { overflow-anchor: none; }
.page-home .page-wrapper,
.page-silver-kris .page-wrapper { scroll-snap-type: none !important; }

/* (4) PANAH ARTIKEL / BERITA — versi kecil, stroke, identik */
.page-home .news-dots-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 16px;
    width: 100%;
    padding: 14px var(--edge) 4px;
    box-sizing: border-box;
}
.page-home .news-dots {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.page-home .news-arrow {
    position: static;
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none;
    flex: 0 0 auto;
    z-index: 10;
    color: #dcdcdc;
    cursor: pointer;
    padding: 0;
    transition: color .2s ease, opacity .2s ease;
    user-select: none;
}
.page-home .news-arrow .ui-chevron { width: 42px; height: 42px; }
.page-home .news-arrow:hover { color: #9a9a9a; }

/* Ukuran chevron panah-turun (hero / winding / capacity / technology) */
.hero-scroll,
.tech-chevron { font-size: 0; line-height: 0; }
.hero-scroll  .ui-chevron { width: 58px; height: 58px; }
.tech-chevron .ui-chevron { width: 58px; height: 58px; }
.page-technology .tech-chevron .ui-chevron { width: 66px; height: 66px; }

/* (5) "SEE ALL" — jenis panah sama + SEJAJAR baris paling atas */
.product-seeall,
.pd-seeall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.product-seeall span:not(.product-seeall__label) { margin-left: 0; }

/* Dots & SEE ALL dikunci pada BASELINE yang sama */
.page-home #section2 .carousel-dots,
.page-home #section4 .carousel-dots {
    bottom: 30px;
    align-items: center;
}
.page-home #section4 .product-seeall-bar {
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 8px;                  /* = tinggi dot → titik tengah sejajar */
}
.page-home #section4 .product-seeall-bar .product-seeall { margin-top: 0; }

/* (6) PANAH DI PRODUK — "rounded" seperti Figma */
/* Kotak tombol DIKUNCI sama besar → panah kiri & kanan tidak mungkin */
.pd-pager__arrow {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    color: #6b6b6b;
    transition: color .2s ease, opacity .2s ease;
}
.pd-pager__arrow .ui-chevron { width: 20px; height: 20px; }
.pd-pager__arrow:hover:not(:disabled) { color: var(--about-us-dark, #111); }
.pd-pager__arrow:disabled { opacity: .3; cursor: default; }

/* Angka & panah duduk di garis tengah yang sama */
.pd-pager { align-items: center; }
.pd-pager__nums { align-items: center; }

.page-home .dot          { width: 8px; height: 8px; border-radius: 999px; background: #cfcfcf; }
.page-home .dot.active   { width: 26px; height: 8px; border-radius: 999px; background: #4a4a4a; }

/* (7) PADDING ATAS JUDUL — HALAMAN CAREER */
.career-page { padding-top: 118px; }
.page-career .career-head { padding-top: 6px; }
@media (max-width: 820px) {
    .career-page { padding-top: 96px; }
}

/* (8) SILVER KRIS — halaman tidak "offside" saat scroll */
.page-silver-kris,
.page-silver-kris body { overflow-x: hidden; }
.page-silver-kris .page-wrapper,
.page-silver-kris .page-content { overflow-x: hidden; max-width: 100%; }
.sk-wrap { overflow-x: clip; max-width: 100vw; }
.sk-wrap .sk-slider,
.sk-wrap .sk-hero__visual { max-width: 100%; overflow: hidden; }
.sk-wrap .sk-slider__stage { max-width: 100%; overflow: hidden; }
.sk-wrap .sk-slider__viewport { overflow: hidden; max-width: 100%; }
.sk-wrap .sk-hero__stats { max-width: 100%; }

/* (9) SILVER KRIS — scroll telat + panah sesuai Figma */
.sk-wrap .sk-hero__scroll {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 0;
    line-height: 0;
    color: #fff;
    opacity: .95;
}
.sk-wrap .sk-hero__scroll .ui-chevron { width: 58px; height: 58px; }

/* Panah slider kartu — bentuk sama, warna putih */
.sk-wrap .sk-slider__arrow {
    width: 44px; height: 44px;
    color: rgba(255,255,255,.85);
}
.sk-wrap .sk-slider__arrow .ui-chevron { width: 34px; height: 34px; }
.sk-wrap .sk-slider__arrow:hover { color: #fff; }

/* Scroll terasa "telat": parallax & reveal dipercepat */
.sk-wrap .reveal-img__inner { transition: transform .18s linear; will-change: transform; }
.sk-wrap .reveal { transition-duration: .45s; }

/* (10) SUBTITLE — SATU STYLE, huruf kecil semua, */
.bottom-stat .bottom-label,
.product-stats .product-stat__label,
.page-home .cap-label,
.sk-wrap .sk-stat__label,
.about-us-hero__role {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    text-transform: lowercase;
}
.bottom-stat .bottom-label::first-letter,
.product-stats .product-stat__label::first-letter,
.page-home .cap-label::first-letter,
.sk-wrap .sk-stat__label::first-letter,
.about-us-hero__role::first-letter {
    text-transform: uppercase;
}

/* (11) & (12) ABOUT US — ketebalan font sesuai Figma + JUSTIFY */
.about-us-notes__text p,
.about-us-feature p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    color: #555;
    text-align: justify;
    text-justify: inter-word;
}
.about-us-notes__sidequote {
    font-weight: 400;
    text-align: justify;
    text-justify: inter-word;
}
.about-us-notes__label,
.about-us-feature h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: .06em;
}
.about-us-feature h3 { font-size: 15px; line-height: 24px; }
.about-us-hero__name { font-weight: 400; }

/* (13) TITLE — disamakan persis dengan Figma */
.hero-title,
.spec-title,
.product-title,
.career-title,
.products-page__title,
.product-detail__title,
.sk-wrap .sk-hero__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.about-us-hero__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: 0;
    text-transform: none;
}
@media (max-width: 900px) {
    .hero-title,
    .spec-title,
    .product-title,
    .career-title,
    .products-page__title,
    .product-detail__title,
    .about-us-hero__title,
    .sk-wrap .sk-hero__title { font-size: 30px; line-height: 38px; }
}

/* (14) ANIMASI TONG — sesuai Motion_Tong_Rev.mp4 */
.tong {
    opacity: 0;
    animation: none;
    transform: translateX(var(--from));
}
.about-us-tongs__stage.is-playing .tong {
    animation: tongSettle 1.85s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes tongSettle {
    0%   { transform: translateX(var(--from)); opacity: 0; }
    8%   { opacity: 1; }
    72%  { transform: translateX(var(--over)); opacity: 1; }   /* menabrak (overshoot) */
    100% { transform: translateX(0); opacity: 1; }             /* DIAM — tidak pergi ke kiri */
}
/* Jeda antar tong seperti video */
.about-us-tongs__stage.is-playing .tong--1 { animation-delay: 0.00s; }
.about-us-tongs__stage.is-playing .tong--2 { animation-delay: 0.18s; }
.about-us-tongs__stage.is-playing .tong--3 { animation-delay: 0.36s; }
.about-us-tongs__stage.is-playing .tong--4 { animation-delay: 0.54s; }
.about-us-tongs__stage.is-playing .tong--5 { animation-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
    .tong,
    .about-us-tongs__stage.is-playing .tong {
        opacity: 1;
        animation: none;
        transform: translateX(0);
    }
}

/* Penyesuaian setelah cek staging vs Figma (Home) */

/* (A) ANGKA STATISTIK: "1 , 000+" → "1,000+" */
.flip-char--sep {
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    text-align: center;
}

.cap-number .flip-char--sep,
.bottom-number .flip-char--sep,
.product-stat__value .flip-char--sep,
.sk-stat__value .flip-char--sep,
.tech-number .flip-char--sep { letter-spacing: 0; margin: 0 -0.02em; }

/* (B) SECTION 5 "OUR CAPACITY": panah menimpa label statistik */
.page-home #section5 .hero-scroll { bottom: 30px; }

@media (max-width: 900px) {
    .page-home #section5 .cap-stats   { bottom: 112px; }
    .page-home #section5 .hero-scroll { bottom: 30px; }
}

/* CHEVRON: geometri & warna dari aset Figma resmi */

/* Ukuran cukup diatur lewat `height`; lebar mengikuti aspect-ratio */
.ui-chevron {
    display: block;
    width: auto;
    flex: 0 0 auto;
    overflow: visible;
    pointer-events: none;
}
.ui-chevron--horiz { aspect-ratio: 17 / 28; height: 28px; }
.ui-chevron--vert  { aspect-ratio: 40 / 23; height: 23px; }

.ui-chevron--right,
.ui-chevron--down  { transform: none; }
.ui-chevron--left,
.ui-chevron--up    { transform: rotate(180deg); }

/* Versi kecil — bentuk identik, hanya diperkecil (poin 4) */
.ui-chevron--sm { height: 10px; }

/* Panah berita: 17x28, #D9D9D9 (Group_59 / Group_60) */
.page-home .news-arrow { color: #D9D9D9; }
.page-home .news-arrow .ui-chevron { width: auto; height: 28px; }
.page-home .news-arrow:hover { color: #9a9a9a; }

/* SEE ALL: versi kecil, #414042 (Home - Body 24) */
.product-seeall,
.pd-seeall { color: #414042; }
.product-seeall .ui-chevron,
.pd-seeall .ui-chevron { width: auto; height: 10px; }

/* Pager produk: versi kecil, #414042, kotak dikunci sama */
.pd-pager__arrow { color: #414042; width: 24px; height: 24px; min-width: 24px; padding: 0; }
.pd-pager__arrow .ui-chevron { width: auto; height: 13px; }

/* Panah slider Silver Kris: bentuk sama, warna putih */
.sk-wrap .sk-slider__arrow { color: rgba(255,255,255,.85); width: 44px; height: 44px; }
.sk-wrap .sk-slider__arrow .ui-chevron { width: auto; height: 26px; }
.sk-wrap .sk-slider__arrow:hover { color: #fff; }

/* Panah turun (scroll): 40x23, putih (ARROW (1).png) */
.hero-scroll,
.tech-chevron,
.sk-wrap .sk-hero__scroll { color: #ffffff; font-size: 0; line-height: 0; }
.hero-scroll .ui-chevron,
.tech-chevron .ui-chevron,
.sk-wrap .sk-hero__scroll .ui-chevron { width: auto; height: 23px; }
.page-technology .tech-chevron .ui-chevron { height: 26px; }

@media (max-width: 900px) {
    .page-home .news-arrow .ui-chevron { height: 22px; }
    .hero-scroll .ui-chevron,
    .tech-chevron .ui-chevron,
    .sk-wrap .sk-hero__scroll .ui-chevron { height: 18px; }
}

/* Perbaikan lanjutan setelah cek 5 halaman staging */

/* (A) SUBTITLE di halaman PRODUK belum ikut aturan poin 10. */
.product-detail__spec-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    text-transform: lowercase;
}
.product-detail__spec-label::first-letter { text-transform: uppercase; }

/* (B) "President Director" jangan ikut di-sentence-case. */
.about-us-hero__role {
    text-transform: none;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 1.2px;
    font-weight: 400;
}
.about-us-hero__role::first-letter { text-transform: none; }

/* Chevron akordeon lowongan ikut bentuk chevron bersama */
.page-career .career-item__chev .ui-chevron { width: auto; height: 12px; }

/* (C) ANIMASI TONG — DIPERBAIKI sesuai Motion_Tong_Rev.mp4 */
.tong {
    opacity: 0;
    animation: none;
    transform: translateX(var(--from));
}
.tong--1 { --slow: 128%; --hit: -122%; }   /* rest 12% → nabrak di 0% */
.tong--2 { --slow: 132%; --hit: -142%; }   /* rest 22% → nabrak di 8% */
.tong--3 { --slow: 136%; --hit: -162%; }   /* rest 32% → nabrak di 16% */
.tong--4 { --slow: 120%; --hit: -142%; }   /* rest 60% → nabrak di 46% */
.tong--5 { --slow: 126%; --hit: -152%; }   /* rest 70% → nabrak di 55% */

.about-us-tongs__stage.is-playing .tong {
    animation: tongSlamLeft 7s both;
}
.about-us-tongs__stage.is-playing .tong--1 { animation-delay: 0.00s; }
.about-us-tongs__stage.is-playing .tong--2 { animation-delay: 0.35s; }
.about-us-tongs__stage.is-playing .tong--3 { animation-delay: 0.70s; }
.about-us-tongs__stage.is-playing .tong--4 { animation-delay: 1.00s; }
.about-us-tongs__stage.is-playing .tong--5 { animation-delay: 1.30s; }

@keyframes tongSlamLeft {
    /* meluncur masuk dari kanan, makin melambat */
    0% {
        transform: translateX(var(--from)); opacity: 0;
        animation-timing-function: cubic-bezier(.12, .62, .30, .99);
    }
    6% {
        transform: translateX(calc(var(--from) * 0.72)); opacity: 1;
        animation-timing-function: cubic-bezier(.12, .62, .30, .99);
    }
    /* hampir berhenti — menunggu didorong tong berikutnya */
    34% {
        transform: translateX(var(--slow)); opacity: 1;
        animation-timing-function: linear;
    }
    38% {
        transform: translateX(calc(var(--slow) * 0.94)); opacity: 1;
        animation-timing-function: cubic-bezier(.42, .10, .78, .62);
    }
    /* MENABRAK ujung kiri */
    50% {
        transform: translateX(var(--hit)); opacity: 1;
        animation-timing-function: linear;
    }
    /* jeda benturan sesaat */
    55% {
        transform: translateX(var(--hit)); opacity: 1;
        animation-timing-function: cubic-bezier(.15, .70, .27, 1);
    }
    /* mental balik ke posisi rest, lalu DIAM (tidak looping) */
    100% { transform: translateX(0); opacity: 1; }
}

/* Mobile: posisi rest berbeda (4/20/36/60/76%) dan tong lebih kecil, */
@media (max-width: 900px) {
    .tong--1 { --slow: 90%;  --hit: -22%; }
    .tong--2 { --slow: 95%;  --hit: -55%; }
    .tong--3 { --slow: 100%; --hit: -85%; }
    .tong--4 { --slow: 88%;  --hit: -55%; }
    .tong--5 { --slow: 92%;  --hit: -65%; }
}

@media (prefers-reduced-motion: reduce) {
    .tong,
    .about-us-tongs__stage.is-playing .tong {
        opacity: 1; animation: none; transform: translateX(0);
    }
}

/* Kartu berita PUTIH + arah chevron Karir */

/* (A) KARTU BERITA — DIBATALKAN atas permintaan klien. */

/* (B) CHEVRON AKORDEON KARIR — arah KANAN (sesuai Figma) */
.page-career .career-item__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}
.page-career .career-item__chev .ui-chevron { width: auto; height: 13px; }
.career-item.is-open .career-item__chev,
.page-career .career-item.is-open .career-item__chev { transform: rotate(90deg); }

/* TONG: posisi rest MENUMPUK + lintasan per-tong */

.tong { width: 150px; }                        /* 10,4% dari panggung 1440 */

/* Posisi rest — angka video. Tong TERANGKAT (2 & 5) diletakkan lebih */
.tong--1 { left: 16.8%; bottom: 22%; z-index: 3; }
.tong--2 { left: 22.1%; bottom: 34%; z-index: 1; }   /* terangkat, di BELAKANG */
.tong--3 { left: 29.2%; bottom: 23%; z-index: 3; }
.tong--4 { left: 57.5%; bottom: 21%; z-index: 3; }
.tong--5 { left: 65%;   bottom: 29%; z-index: 1; }   /* terangkat, di BELAKANG */

/* LINTASAN — dua pola berbeda, sesuai video. */
.tong { opacity: 0; animation: none; transform: translateX(var(--from)); }

/* TONG 1: meluncur → hampir berhenti → didorong → NABRAK → mental */
.tong--1 { --from: 820%; --slow: 128%; --hit: -161%; }   /* rest 16,8% → nabrak di 0% */

.about-us-tongs__stage.is-playing .tong--1 {
    animation: tongSlamLeft 7s both;
    animation-delay: 0s;
}

@keyframes tongSlamLeft {
    0%   { transform: translateX(var(--from)); opacity: 0;
           animation-timing-function: cubic-bezier(.12,.62,.30,.99); }
    6%   { transform: translateX(calc(var(--from) * .72)); opacity: 1;
           animation-timing-function: cubic-bezier(.12,.62,.30,.99); }
    34%  { transform: translateX(var(--slow)); opacity: 1;
           animation-timing-function: linear; }                       /* hampir berhenti */
    38%  { transform: translateX(calc(var(--slow) * .94)); opacity: 1;
           animation-timing-function: cubic-bezier(.42,.10,.78,.62); }/* didorong */
    50%  { transform: translateX(var(--hit)); opacity: 1;
           animation-timing-function: linear; }                       /* NABRAK tepi kiri */
    55%  { transform: translateX(var(--hit)); opacity: 1;
           animation-timing-function: cubic-bezier(.15,.70,.27,1); }  /* jeda benturan */
    100% { transform: translateX(0); opacity: 1; }                    /* mental balik → diam */
}

/* TONG 2-5: meluncur masuk, melambat, MENEMPEL (tanpa mental balik) */
.tong--2 { --from: 700%; --bump: -20%; }
.tong--3 { --from: 640%; --bump: -18%; }
.tong--4 { --from: 380%; --bump: -20%; }
.tong--5 { --from: 300%; --bump: -16%; }

.about-us-tongs__stage.is-playing .tong--2,
.about-us-tongs__stage.is-playing .tong--3,
.about-us-tongs__stage.is-playing .tong--4,
.about-us-tongs__stage.is-playing .tong--5 {
    animation: tongGlideIn 4.4s both;
}
.about-us-tongs__stage.is-playing .tong--2 { animation-delay: 1.60s; }
.about-us-tongs__stage.is-playing .tong--3 { animation-delay: 2.00s; }
.about-us-tongs__stage.is-playing .tong--4 { animation-delay: 2.40s; }
.about-us-tongs__stage.is-playing .tong--5 { animation-delay: 2.80s; }

@keyframes tongGlideIn {
    0%   { transform: translateX(var(--from)); opacity: 0;
           animation-timing-function: cubic-bezier(.14,.60,.28,.98); }
    6%   { transform: translateX(calc(var(--from) * .74)); opacity: 1;
           animation-timing-function: cubic-bezier(.14,.60,.28,.98); }
    78%  { transform: translateX(var(--bump)); opacity: 1;                /* menyenggol */
           animation-timing-function: cubic-bezier(.24,.70,.32,1); }
    100% { transform: translateX(0); opacity: 1; }                        /* menempel → diam */
}

/* Mobile: proporsi sama, hanya diperkecil */
@media (max-width: 900px) {
    .tong { width: clamp(58px, 20vw, 96px) !important; }
    .tong--1 { left: 6%;  bottom: 20%; --from: 420%; --slow: 90%; --hit: -30%; }
    .tong--2 { left: 15%; bottom: 31%; --from: 360%; --bump: -18%; }
    .tong--3 { left: 25%; bottom: 21%; --from: 320%; --bump: -16%; }
    .tong--4 { left: 55%; bottom: 19%; --from: 200%; --bump: -18%; }
    .tong--5 { left: 63%; bottom: 28%; --from: 150%; --bump: -14%; }
}

@media (prefers-reduced-motion: reduce) {
    .tong,
    .about-us-tongs__stage.is-playing .tong {
        opacity: 1; animation: none; transform: translateX(0);
    }
}

/* CHEVRON KARIR — abu-abu #D9D9D9, ukuran 12x19 (Group 60 (1).png) */
.page-career .career-item__chev,
.career-item__chev { color: #D9D9D9; }
.page-career .career-item__chev .ui-chevron,
.career-item__chev .ui-chevron { width: auto; height: 19px; }
.career-item__row:hover .career-item__chev { color: #b0b0b0; }

/* TONG: gerakan MULUS + posisi akhir persis video */

/* (1) POSISI AKHIR — dikembalikan PERSIS ke angka video. */
.tong--5 { left: 70.7%; bottom: 29%; z-index: 1; }   /* renggang 2,8% dari tong 4 — sama seperti video */

/* (2) GERAKAN PATAH-PATAH — penyebab & perbaikan */
.tong {
    opacity: 0;
    animation: none;
    transform: translate3d(var(--from), 0, 0);
    will-change: transform;
    backface-visibility: hidden;
}

/* TONG 1: meluncur → melambat → didorong → NABRAK → mental */
.about-us-tongs__stage.is-playing .tong--1 {
    animation: tongSlamLeft 7s both;
    animation-delay: 0s;
}

@keyframes tongSlamLeft {
    0% {
        transform: translate3d(var(--from), 0, 0);
        opacity: 0;
        animation-timing-function: cubic-bezier(.17, .67, .30, .97);
    }
    5%   { opacity: 1; }                       /* HANYA opacity — transform tidak diputus */
    36% {
        transform: translate3d(var(--slow), 0, 0);
        animation-timing-function: cubic-bezier(.45, .02, .62, .65);   /* didorong */
    }
    52% {
        transform: translate3d(var(--hit), 0, 0);                      /* NABRAK tepi kiri */
        animation-timing-function: cubic-bezier(.18, .72, .30, 1);     /* langsung mental */
    }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* TONG 2-5: meluncur, melambat, menempel (tanpa mental balik) */
.about-us-tongs__stage.is-playing .tong--2,
.about-us-tongs__stage.is-playing .tong--3,
.about-us-tongs__stage.is-playing .tong--4,
.about-us-tongs__stage.is-playing .tong--5 {
    animation: tongGlideIn 4.4s both;
}
/* PENTING: shorthand `animation` di atas me-reset animation-delay ke 0, */
.about-us-tongs__stage.is-playing .tong--2 { animation-delay: 1.60s; }
.about-us-tongs__stage.is-playing .tong--3 { animation-delay: 2.00s; }
.about-us-tongs__stage.is-playing .tong--4 { animation-delay: 2.40s; }
.about-us-tongs__stage.is-playing .tong--5 { animation-delay: 2.80s; }

@keyframes tongGlideIn {
    0% {
        transform: translate3d(var(--from), 0, 0);
        opacity: 0;
        animation-timing-function: cubic-bezier(.16, .66, .28, 1);
    }
    5%   { opacity: 1; }                       /* HANYA opacity */
    82% {
        transform: translate3d(var(--bump), 0, 0);                     /* menyenggol */
        animation-timing-function: cubic-bezier(.32, .62, .38, 1);
    }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

.tong--5 { --from: 260%; --bump: -16%; }

@media (max-width: 900px) {
    .tong--5 { left: 70%; bottom: 28%; --from: 130%; --bump: -14%; }
}

@media (prefers-reduced-motion: reduce) {
    .tong,
    .about-us-tongs__stage.is-playing .tong {
        opacity: 1; animation: none; transform: none; will-change: auto;
    }
}

.sk-wrap .sk-slider__controls {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;              /* ← inilah yang menyejajarkan */
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-top: 24px;
    padding: 0 2.5%;                  /* 36px pada desain 1440 */
    box-sizing: border-box;
}

/* Dots: isi ruang tengah, jarak atas dipindah ke baris kontrol */
.sk-wrap .sk-slider__controls .sk-slider__dots {
    flex: 1 1 auto;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Panah: tidak lagi absolute — ikut baris kontrol */
.sk-wrap .sk-slider__controls .sk-slider__arrow {
    position: static;
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 0;
    color: #ffffff;
    opacity: .9;
}
.sk-wrap .sk-slider__controls .sk-slider__arrow:hover { opacity: 1; }
.sk-wrap .sk-slider__controls .sk-slider__arrow .ui-chevron { width: auto; height: 26px; }

@media (max-width: 768px) {
    .sk-wrap .sk-slider__controls { padding: 0 4%; margin-top: 18px; }
    .sk-wrap .sk-slider__controls .sk-slider__arrow .ui-chevron { height: 20px; }
}

/* Menyamakan proporsi desktop 1440 dengan Figma */

/* (1) PADDING TEPI: 60px → 90px */
.page-home       { --edge: max(60px, calc((100% - 1260px) / 2)); }
.page-technology { --edge: max(60px, calc((100% - 1260px) / 2)); }

.page-home .machine-col img,
.page-home .machine-col video {
    max-height: min(521px, 56svh);
    max-width: 100%;
    object-fit: contain;
}

/* MODE PRESISI FIGMA (desktop >= 1025px) */

:root {
    /* Lebar acuan: berhenti tumbuh di 1440 supaya section tidak */
    --figw: min(100vw, 1440px);
}

/* (1) NAVBAR — 60px → 88px, gutter 60px → 32px */
.navbar { height: 88px; padding: 0 32px; }
.page-home .navbar,
.page-technology .navbar { padding-left: 32px; padding-right: 32px; }

@media (max-width: 900px) {
    .navbar { height: 64px; padding: 0 20px; }
    .navbar-menu { top: 64px !important; }
}

/* (2) JARAK ATAS HALAMAN — semua +28px mengikuti navbar */
.products-page  { padding-top: 148px; }   /* 120 + 28 */
.product-detail { padding-top: 132px; }   /* 104 + 28 */
.career-page    { padding-top: 146px; }   /* 118 + 28 */
.contact-page   { padding-top: 168px; }   /* 140 + 28 */
.sk-wrap .sk-hero__header { padding-top: 158px; }  /* 130 + 28 */

@media (max-width: 900px) {
    .products-page  { padding-top: 100px; }
    .product-detail { padding-top: 108px; }
    .career-page    { padding-top: 100px; }
    .contact-page   { padding-top: 108px; }
    .sk-wrap .sk-hero__header { padding-top: 124px; }
}

/* (3) TINGGI SECTION — dikunci ke angka Figma */
@media (min-width: 1025px) {
    .page-home .section {
        min-height: 0;
        height: auto;
        scroll-snap-align: none;
    }

    .page-home #section1 { height: calc(var(--figw) * 986 / 1440); }
    .page-home #section2 { height: calc(var(--figw) * 896 / 1440); }
    .page-home #section3 { height: calc(var(--figw) * 898 / 1440); }
    .page-home #section4 { height: calc(var(--figw) * 896 / 1440); }
    .page-home #section5 { height: calc(var(--figw) * 896 / 1440); }
    .page-home #section6 { height: calc(var(--figw) * 967 / 1440); }
    .page-home #section7 { height: calc(var(--figw) * 897 / 1440); }
    .page-home #section8 { height: calc(var(--figw) * 351 / 1440); }
    .page-home #section9 { height: calc(var(--figw) * 873 / 1440); }

    .page-home .machine-col img,
    .page-home .machine-col video { max-height: calc(var(--figw) * 521 / 1440); }
    .page-home .product-cone img  { max-height: calc(var(--figw) * 687 / 1440); }
}

/* RESPONSIF LINTAS LAYAR (mengoreksi REV 59) */

@media (min-width: 1025px) {
    .page-home .section,
    .page-home #section1, .page-home #section2, .page-home #section3,
    .page-home #section4, .page-home #section5, .page-home #section6,
    .page-home #section7, .page-home #section8, .page-home #section9 {
        height: auto;
        min-height: 100svh;
    }

    .page-home #section6 { min-height: min(100svh, 967px); }
    .page-home #section8 { min-height: 0; height: auto; padding: 4.4svh 0; }
    .page-home #section9 { min-height: min(100svh, 873px); }
}

@media (min-width: 1025px) {

    .page-home .machine-col img,
    .page-home .machine-col video { max-height: min(521px, 52.9svh); }

    .page-home .product-cone img { max-height: min(687px, 69.7svh); }

    .page-home .section2-inner,
    .page-home .product-inner,
    .page-home .product-inner--3col {
        padding-top: min(111px, 11.3svh);
        padding-bottom: min(106px, 10.8svh);
    }

    .page-home .hero-content { padding-bottom: min(90px, 9.1svh); }
}

@media (min-width: 1025px) and (max-height: 760px) {
    .page-home .hero-title,
    .page-home .spec-title,
    .page-home .product-title { font-size: clamp(26px, 4.6svh, 40px); line-height: 1.14; }
    .page-home .hero-desc,
    .page-home .spec-desc,
    .page-home .product-desc { font-size: 12px; line-height: 1.9; }
    .page-home .spec-table td,
    .page-home .product-extra-specs td { padding: min(14px, 1.6svh) 0; }
    .page-home .bottom-number,
    .page-home .cap-number { font-size: clamp(24px, 4svh, 38px); }
    .page-home .section2-grid { gap: min(60px, 4vw); }
}

/* (4) Navbar ikut mengecil di layar pendek */
@media (max-height: 760px) {
    .navbar { height: 68px; }
    .navbar-menu { top: 68px !important; }
    .products-page  { padding-top: 128px; }
    .product-detail { padding-top: 112px; }
    .career-page    { padding-top: 126px; }
    .contact-page   { padding-top: 148px; }
    .sk-wrap .sk-hero__header { padding-top: 138px; }
}

/* Perbaikan navbar, tablet, mobile, menu & carousel */

@media (min-width: 901px) {
    .navbar { position: fixed; display: flex; align-items: center; }
    .navbar-menu {
        position: absolute;
        left: 50%;
        top: 50%;                     /* 45% → 50%, benar-benar di tengah */
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        height: auto;
        width: auto;
        align-items: center;
    }
}

@media (min-width: 901px) and (max-height: 760px) {
    .navbar-menu { top: 50% !important; }
}
@media (max-width: 900px) {
    .navbar-menu { top: var(--nav-h, 64px) !important; }
}

/* (B) TABLET (768–1024) — dirapikan mengikuti desktop */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-home, .page-technology { --edge: 48px; }

    /* Teks di atas gambar (hero, drawing, kapasitas, winding icon) */
    .page-home .hero-content {
        max-width: 62%;
        padding-left: var(--edge);
        padding-right: var(--edge);
    }
    .page-home .hero-desc { max-width: 100%; }

    /* Cone produk: dibatasi tinggi DAN lebar kolomnya */
    .page-home .product-cone { min-width: 0; overflow: hidden; }
    .page-home .product-cone img {
        max-height: min(430px, 44svh);
        max-width: 100%;
        width: auto;
        object-fit: contain;
        margin-inline: auto;
    }

    /* Gambar mesin Winding ikut proporsi, tidak melebihi kolom */
    .page-home .machine-col img,
    .page-home .machine-col video {
        max-height: min(400px, 42svh);
        max-width: 100%;
    }

    /* Statistik kapasitas: 4 kolom rapi, tidak berdesakan */
    .page-home .cap-stats { gap: 24px; }
    .page-home .cap-stat  { min-width: 0; }

    /* Silver Kris & halaman lain ikut gutter yang sama */
    .sk-wrap .container,
    .career-page .container,
    .products-page .container { padding-left: 48px; padding-right: 48px; }
}

/* (C) MOBILE — batas kanan terlalu mepet di section 1 & 3 */
@media (max-width: 767px) {
    .page-home { --edge: 24px; }
    .page-home .hero-content {
        padding-left: 24px;
        padding-right: 24px;
        max-width: 100%;
        box-sizing: border-box;
    }
    .page-home .hero-title { padding-right: 8px; }
    .page-home .hero-desc  { padding-right: 14px; }   /* jarak kanan ± 38px */
    .page-home .spec-desc,
    .page-home .product-desc { padding-right: 6px; }
}

/* (D) MENU HAMBURGER MOBILE — teks rata kanan */
@media (max-width: 900px) {
    .navbar-menu {
        align-items: flex-end;
        text-align: right;
    }
    .navbar-menu li {
        width: 100%;
        text-align: right;
        display: flex;
        justify-content: flex-end;
    }
    .navbar-menu li a {
        display: inline-block;
        width: auto;
        text-align: right;
        padding-right: 24px;
    }
    .navbar-menu .lang-switcher {
        justify-content: flex-end;
        padding-right: 24px;
    }
}

/* (E) CAROUSEL BERITA — dukungan geser mouse */
.page-home .news-track {
    cursor: grab;
    will-change: transform;
    touch-action: pan-y;
}
.page-home .news-track.is-dragging { cursor: grabbing; }
.page-home .news-track img { -webkit-user-drag: none; user-select: none; }

/* TABLET HOME (768–1024) ditata ulang */
@media (min-width: 768px) and (max-width: 1024px) {

    /* (1) HERO section 1 & 3 → POJOK KIRI BAWAH seperti desktop */
    .page-home #section1,
    .page-home #section3 {
        display: flex;
        align-items: flex-end;        /* ke bawah */
        justify-content: flex-start;  /* ke kiri */
    }
    .page-home #section1 .hero-content,
    .page-home #section3 .hero-content {
        margin-right: auto;
        margin-top: auto;
        text-align: left;
        padding-bottom: 90px;
    }

    /* Section 7 tetap teks di ATAS (content-top) */
    .page-home #section7 { align-items: flex-start; }
    .page-home .hero-content.content-top {
        margin-top: 0;
        margin-bottom: auto;
        padding-top: 120px;
        padding-bottom: 0;
    }

    /* (2) hero-content: padding-left DIHAPUS sesuai permintaan */
    .page-home .hero-content {
        max-width: 62%;
        /* padding-left: var(--edge) DIHILANGKAN sesuai permintaan. */
        padding-left: 0;
        padding-right: var(--edge);
    }

    /* (3) SECTION 2 — gambar mesin DI ATAS judul WINDING, */
    .page-home .section2-inner {
        display: block;
        padding: 88px var(--edge) 72px var(--edge);
        overflow: visible;
    }
    .page-home .section2-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "desc"
            "table"
            "bottom";
        gap: 28px;
        align-items: start;
        max-width: 720px;             /* lebih luas dari mobile */
        margin-inline: auto;
    }
    .page-home .specs-col   { display: contents; }
    .page-home .machine-col { grid-area: image; margin-inline: auto; }
    .page-home .spec-title  { grid-area: title; margin-bottom: 0; }
    .page-home .spec-desc   { grid-area: desc;  margin-bottom: 0; max-width: 100%; }
    .page-home .spec-table  { grid-area: table; width: 100%; }
    .page-home .bottom-stats {
        grid-area: bottom;
        display: flex;
        flex-direction: row;
        gap: 56px;
        margin-top: 0;
    }
    .page-home .machine-col img,
    .page-home .machine-col video {
        max-height: min(300px, 30svh);
        max-width: 100%;
        width: auto;
    }

    /* (4) SECTION 4 — produk bertumpuk seperti mobile, lebih lega */
    .page-home .product-inner,
    .page-home .product-inner--3col {
        display: flex;
        flex-direction: column;
        grid-template-areas: none;
        grid-template-columns: none;
        gap: 28px;
        padding: 88px var(--edge) 72px var(--edge);
        overflow: visible;
        max-width: 720px;
        margin-inline: auto;
        box-sizing: content-box;
    }
    .page-home .product-cone {
        order: -1;                    /* cone di paling atas */
        grid-area: auto;
        width: 100%;
        overflow: hidden;
    }
    .page-home .product-cone img {
        max-height: min(320px, 32svh);
        max-width: 100%;
        width: auto;
        margin-inline: auto;
        display: block;
    }
    .page-home .product-inner--3col .product-left {
        grid-area: auto;
        max-width: 100%;
        order: 0;
    }
    .page-home .product-stats {
        grid-area: auto;
        order: 1;
        display: grid;
        grid-template-columns: 1fr 1fr auto;   /* 2 stat + swatch sebaris */
        align-items: start;
        gap: 24px 32px;
    }
    .page-home .product-stat { grid-column: auto; grid-row: auto; }
    .page-home .product-swatch {
        grid-column: 3;
        grid-row: 1 / span 2;
        width: 110px;
        height: 110px;
        margin: 0;
        align-self: center;
    }
    .page-home .product-extra-specs { margin-top: 8px; width: 100%; }

    /* Section tidak lagi dipaksa 1 layar penuh di tablet — */
    .page-home #section2,
    .page-home #section4 { min-height: 100svh; height: auto; }
}

/* iPad Pro 1024x1366: hamburger + perbaikan gambar */

/* (1) NAVBAR JADI HAMBURGER SAMPAI 1024px */
@media (min-width: 901px) and (max-width: 1024px) {
    .navbar { display: flex; align-items: center; justify-content: space-between; }
    .hamburger { display: flex; order: 2; }
    .lang-switcher { order: 1; }

    .navbar-menu {
        display: none;
        position: fixed;
        top: var(--nav-h, 88px) !important;
        left: 0;
        width: 100%;
        transform: none;
        background: #ffffff;
        flex-direction: column;
        align-items: flex-end;        /* rata kanan, sama seperti mobile */
        text-align: right;
        padding: 8px 0 20px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
        z-index: 999;
        gap: 0;
    }
    .navbar-menu.open { display: flex !important; }
    .navbar.on-image .navbar-menu {
        background-color: rgba(15, 15, 15, .78);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .navbar-menu li {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        border-bottom: 1px solid #f0f0f0;
    }
    .navbar.on-image .navbar-menu li { border-bottom: 1px solid rgba(255,255,255,.18); }
    .navbar-menu li a {
        display: block;
        padding: 14px 28px;
        font-size: 13px;
        text-align: right;
        width: auto;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img {
        height: auto;
        max-height: 320px;
        max-width: 100%;
        width: auto;
        margin-inline: auto;
        display: block;
        object-fit: contain;
    }

    /* Gambar mesin Winding disamakan perlakuannya */
    #section2 .machine-col img,
    #section2 .machine-col video,
    .page-home .machine-col img,
    .page-home .machine-col video {
        height: auto;
        max-height: 300px;
        max-width: 100%;
        width: auto;
        margin-inline: auto;
        display: block;
    }

    /* (3) Lebar blok: hitung termasuk padding supaya tidak meluber. */
    .page-home .section2-grid {
        box-sizing: border-box;
        max-width: min(720px, 100%);
    }
    .page-home .product-inner,
    .page-home .product-inner--3col {
        box-sizing: border-box;
        max-width: min(816px, 100%);
        width: 100%;
    }

    /* (4) padding-top: 120px pada content-top DIHILANGKAN */
    .page-home .hero-content.content-top {
        margin-top: 0;
        margin-bottom: auto;

        padding-top: 0;
        padding-bottom: 0;
    }
}

/* iPad Pro: EN|ID di kanan + layout samakan iPad Air */

/* (1) EN | ID menempel ke hamburger */
@media (max-width: 1024px) {
    .navbar .lang-switcher {
        order: 1;
        margin-left: auto;
        margin-right: 18px;
    }
    .navbar .hamburger { order: 2; margin-left: 0; }
}

/* (2) LAYOUT iPad Pro DISAMAKAN DENGAN iPad Air */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-home .section2-grid,
    .page-home .product-inner,
    .page-home .product-inner--3col {
        max-width: 100%;
        width: 100%;
        margin-inline: 0;
        box-sizing: border-box;
    }
}

/* iPad Pro (901–1024): SECTION 4 kembali 3 kolom */
@media (min-width: 901px) and (max-width: 1024px) {

    .page-home .product-inner,
    .page-home .product-inner--3col {
        display: grid;
        grid-template-columns: 1fr 1fr 0.62fr;   /* kiri | cone | statistik */
        grid-template-areas: "left cone stats";
        gap: 28px;
        align-items: center;
        align-content: center;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding: 80px var(--edge) 72px var(--edge);
        box-sizing: border-box;
        overflow: visible;
    }

    .page-home .product-inner--3col .product-left {
        grid-area: left;
        order: 0;
        max-width: 100%;
    }
    .page-home .product-cone {
        grid-area: cone;
        order: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: visible;
    }
    .page-home .product-stats {
        grid-area: stats;
        order: 0;
        display: flex;
        flex-direction: column;      /* kembali menumpuk ke bawah seperti desktop */
        align-items: flex-start;
        gap: 18px;
    }
    .page-home .product-stat { grid-column: auto; grid-row: auto; }
    .page-home .product-swatch {
        grid-column: auto;
        grid-row: auto;
        width: 104px;
        height: 104px;
        margin: 14px 0 0;
        align-self: flex-start;
    }
    .page-home .product-extra-specs { margin-top: 24px; }

    /* Cone: proporsional terhadap desktop (687px pada 1440) */
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img {
        height: auto;
        max-height: min(489px, 40svh);
        max-width: 100%;
        width: auto;
        margin-inline: auto;
        display: block;
        object-fit: contain;
    }
}

/* Revisi halaman About Us */

/* (6) BUG PITA ABU-ABU SAAT SCROLL  ← diperbaiki lebih dulu */
.reveal-img__inner {
    top: -22%;
    height: 144%;
}
.about-us-hero__bg.reveal-img .reveal-img__inner,
.tour-hero__bg.reveal-img .reveal-img__inner,
.news-hero__bg.reveal-img .reveal-img__inner,
.news-detail-hero__bg.reveal-img .reveal-img__inner { top: -22%; height: 144%; }

/* (2) Kutipan besar — Cormorant Garamond SemiBold 45/47, ls 1px */
.about-us-notes__quote {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: 45px;
    line-height: 47px;
    letter-spacing: 1px;
    max-width: 900px;
    margin: 0 0 56px;
}

/* (3) Director's Notes & kutipan samping */
.about-us-notes__label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 29px;
    letter-spacing: 0;
    margin-bottom: 10px;
}
.about-us-notes__sidequote {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: 29px;
    line-height: 34px;
    letter-spacing: 1px;
    text-align: justify;
    text-justify: inter-word;
    margin: 0;
}

/* Kutipan samping SEJAJAR dengan paragraf pertama, bukan dengan */
@media (min-width: 901px) {
    .about-us-notes__sidequote { margin-top: 39px; }
}

/* (4) Dasar kedua foto disejajarkan */
@media (min-width: 901px) {
    .about-us-notes__grid { align-items: stretch; }
    .about-us-notes__photo { aspect-ratio: 3 / 4; height: auto; }
    .about-us-notes__side {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .about-us-notes__side .about-us-notes__photo {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 220px;
        margin-top: var(--about-us-gap);
    }
}

/* (5) Mobile / iPad Mini / iPad Air: kutipan samping DI BAWAH */
@media (max-width: 900px) {
    .about-us-notes__grid {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
    .about-us-notes__side {
        display: contents;
    }
    .about-us-notes__photo:first-child { order: 1; }
    .about-us-notes__text              { order: 2; }
    .about-us-notes__sidequote         { order: 3; margin-top: 0; }
    .about-us-notes__side .about-us-notes__photo { order: 4; margin-top: 0; }
    .about-us-notes__quote { font-size: 30px; line-height: 34px; }
    .about-us-notes__sidequote { font-size: 24px; line-height: 29px; }
    .about-us-notes__label { font-size: 16px; line-height: 26px; }
}

/* (1) TONG — baris kedua 6·7·8 (kiri) dan 9·10 (kanan) */
.about-us-tongs__stage { height: 620px; }

.tong--6  { left: 11%; bottom: 2%;  z-index: 5; }
.tong--7  { left: 18%; bottom: 9%;  z-index: 4; }
.tong--8  { left: 26%; bottom: 3%;  z-index: 5; }
.tong--9  { left: 55%; bottom: 1%;  z-index: 5; }
.tong--10 { left: 68%; bottom: 7%;  z-index: 4; }

.tong--1 { bottom: 40%; }
.tong--2 { bottom: 52%; }
.tong--3 { bottom: 41%; }
.tong--4 { bottom: 39%; }
.tong--5 { bottom: 47%; }

/* Baris kedua ikut animasi meluncur-masuk, menyusul baris pertama */
.tong--6  { --from: 660%; --bump: -20%; }
.tong--7  { --from: 600%; --bump: -18%; }
.tong--8  { --from: 540%; --bump: -18%; }
.tong--9  { --from: 340%; --bump: -20%; }
.tong--10 { --from: 280%; --bump: -16%; }

.about-us-tongs__stage.is-playing .tong--6,
.about-us-tongs__stage.is-playing .tong--7,
.about-us-tongs__stage.is-playing .tong--8,
.about-us-tongs__stage.is-playing .tong--9,
.about-us-tongs__stage.is-playing .tong--10 {
    animation: tongGlideIn 4.4s both;
}
.about-us-tongs__stage.is-playing .tong--6  { animation-delay: 1.90s; }
.about-us-tongs__stage.is-playing .tong--7  { animation-delay: 2.20s; }
.about-us-tongs__stage.is-playing .tong--8  { animation-delay: 2.50s; }
.about-us-tongs__stage.is-playing .tong--9  { animation-delay: 2.80s; }
.about-us-tongs__stage.is-playing .tong--10 { animation-delay: 3.10s; }

@media (max-width: 900px) {
    .about-us-tongs__stage { height: 420px; }
    .tong--6  { left: 5%;  bottom: 2%; --from: 340%; --bump: -18%; }
    .tong--7  { left: 16%; bottom: 8%; --from: 300%; --bump: -16%; }
    .tong--8  { left: 27%; bottom: 3%; --from: 260%; --bump: -16%; }
    .tong--9  { left: 55%; bottom: 1%; --from: 180%; --bump: -18%; }
    .tong--10 { left: 66%; bottom: 6%; --from: 140%; --bump: -14%; }
    .tong--1 { bottom: 44%; } .tong--2 { bottom: 55%; } .tong--3 { bottom: 45%; }
    .tong--4 { bottom: 43%; } .tong--5 { bottom: 50%; }
}

/* Perbaikan foto Director's Notes (mengoreksi REV 66) */
@media (min-width: 901px) {

    /* Lebar ditentukan kolom, tinggi mengikuti rasio — bukan kebalikannya */
    /* aspect-ratio DILEPAS supaya lebar tidak lagi dihitung dari tinggi. */
    .about-us-notes__grid > .about-us-notes__photo {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: auto;
    }
    .about-us-notes__grid > .about-us-notes__photo::before {
        content: "";
        display: block;
        padding-top: 139%;
    }

    /* Kolom kanan diregangkan setinggi baris; fotonya mengisi sisa */
    .about-us-notes__grid { align-items: stretch; }
    .about-us-notes__side {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }
    .about-us-notes__side .about-us-notes__photo {
        aspect-ratio: auto;
        width: 100%;
        flex: 1 1 auto;
        min-height: 200px;
        margin-top: var(--about-us-gap);
    }
}

/* About Us: garis tong, lebar container, foto kolom 3 */

/* (2) max-width 1200px pada .about-us-notes DIHILANGKAN */
.about-us-notes.container { max-width: none; }

/* (3) max-width 900px pada kutipan besar DIHILANGKAN */
.about-us-notes__quote { max-width: none; }

/* (1) GARIS TONG — tidak ada tong di ATAS garis, di semua device */
.tong-line { top: 14%; }
@media (max-width: 900px) { .tong-line { top: 12%; } }

/* (4) FOTO KOLOM 3 kurang tinggi */
@media (min-width: 901px) {
    .about-us-notes__side .about-us-notes__photo {
        min-height: 300px;
        margin-top: 28px;
    }
}

@media (max-width: 900px) {
    .about-us-notes__grid .about-us-notes__photo,
    .about-us-notes__side .about-us-notes__photo {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 220px;
        flex: 0 0 auto;
        margin-top: 0;
        position: relative;
        overflow: hidden;
    }
    .about-us-notes__grid > .about-us-notes__photo::before { content: none; }
    .about-us-notes__grid .about-us-notes__photo .reveal-img__inner,
    .about-us-notes__side .about-us-notes__photo .reveal-img__inner {
        position: absolute;
        top: -22%;
        height: 144%;
        width: 100%;
    }
    .about-us-notes__grid .about-us-notes__photo img { width: 100%; height: 100%; object-fit: cover; }
}

/* About Us disamakan dengan Figma */

/* (A) GUTTER 66px → 90px */
/* Konten maksimal 1260px (sama dengan Figma pada 1440), TAPI gutter */
.about-us-notes.container,
.about-us-features.container,
.about-us-gallery.container {
    --gut: clamp(24px, 6.25vw, 90px);
    padding-left: var(--gut);
    padding-right: var(--gut);
    /* Tanpa batas kedua ini, pada viewport < 1420px total lebar */
    max-width: min(1260px, calc(100% - 2 * var(--gut)));
    box-sizing: content-box;
    margin-inline: auto;
}

/* (B) KUTIPAN BESAR — batas lebar dikembalikan */
.about-us-notes__quote { max-width: 730px; }

/* (C) PROPORSI FOTO PERSIS FIGMA */
@media (min-width: 901px) {
    /* Rasio Figma dipasang sebagai tinggi MINIMUM lewat spacer, */
    .about-us-notes__grid > .about-us-notes__photo {
        align-self: stretch;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }
    .about-us-notes__grid > .about-us-notes__photo::before {
        content: "";
        display: block;
        padding-top: 140%;
    }

    .about-us-notes__side { justify-content: flex-start; }
    .about-us-notes__side .about-us-notes__photo {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        aspect-ratio: 445 / 298;
        min-height: 0;
        margin-top: auto;          /* menempel ke dasar kolom */
    }
}

/* (D) GENTONG — ukuran & posisi mengikuti Figma */
.about-us-tongs__stage { height: 660px; }

.tong--1, .tong--2, .tong--3, .tong--4, .tong--5  { width: 202px; }
.tong--6, .tong--7, .tong--8, .tong--9, .tong--10 { width: 166px; }

.tong--1 { left: 11.0%; bottom: 38%; z-index: 3; }
.tong--2 { left: 20.5%; bottom: 46%; z-index: 1; }
.tong--3 { left: 19.8%; bottom: 39%; z-index: 3; }
.tong--4 { left: 62.5%; bottom: 37%; z-index: 3; }
.tong--5 { left: 76.0%; bottom: 44%; z-index: 1; }

.tong--6  { left: 11.0%; bottom: 6%;  z-index: 6; }
.tong--7  { left: 17.5%; bottom: 12%; z-index: 4; }
.tong--8  { left: 25.0%; bottom: 5%;  z-index: 6; }
.tong--9  { left: 54.5%; bottom: 4%;  z-index: 6; }
.tong--10 { left: 70.0%; bottom: 10%; z-index: 4; }

.tong-line { top: 10%; }

@media (max-width: 900px) {
    .about-us-tongs__stage { height: 440px; }
    .tong--1, .tong--2, .tong--3, .tong--4, .tong--5  { width: clamp(64px, 21vw, 110px); }
    .tong--6, .tong--7, .tong--8, .tong--9, .tong--10 { width: clamp(52px, 17vw, 90px); }
    .tong-line { top: 9%; }
}

/* Posisi & animasi tong dikoreksi */

.tong--1 { left: 11.5%; }
.tong--2 { left: 21.1%; }
.tong--3 { left: 29.0%; }   /* <-- diperbaiki dari 19,8% */
.tong--4 { left: 62.1%; }
.tong--5 { left: 76.6%; }

.tong--6  { left: 11.5%; }
.tong--7  { left: 19.3%; }
.tong--8  { left: 25.9%; }
.tong--9  { left: 54.9%; }
.tong--10 { left: 69.4%; }

/* GARIS HORIZON — kembali MELINTAS di badan tong baris 1, */
.tong-line { top: 27.5%; }
@media (max-width: 900px) { .tong-line { top: 26%; } }

/* VARIABEL ANIMASI dihitung ulang untuk lebar tong yang baru. */
.tong--1 { --from: 760%; --slow:  95%; --hit: -82%; }   /* rest 11,5% → nabrak di 0% */
.tong--2 { --from: 680%; --bump: -18%; }
.tong--3 { --from: 620%; --bump: -16%; }
.tong--4 { --from: 380%; --bump: -18%; }
.tong--5 { --from: 285%; --bump: -14%; }

.tong--6  { --from: 872%; --slow: 115%; --hit: -100%; }  /* rest 11,5% → nabrak di 0% */
.tong--7  { --from: 800%; --bump: -18%; }
.tong--8  { --from: 743%; --bump: -16%; }
.tong--9  { --from: 495%; --bump: -18%; }
.tong--10 { --from: 360%; --bump: -14%; }

/* Tong terdepan tiap baris IKUT MENABRAK tepi kiri seperti di video; */
.about-us-tongs__stage.is-playing .tong--6 {
    animation: tongSlamLeft 7s both;
    animation-delay: 1.90s;
}

@media (max-width: 900px) {
    .tong--1 { --from: 420%; --slow: 80%; --hit: -45%; }
    .tong--2 { --from: 360%; } .tong--3 { --from: 320%; }
    .tong--4 { --from: 210%; } .tong--5 { --from: 160%; }
    .tong--6 { --from: 480%; --slow: 95%; --hit: -55%; }
    .tong--7 { --from: 420%; } .tong--8 { --from: 380%; }
    .tong--9 { --from: 250%; } .tong--10 { --from: 190%; }
}

/* Tong: ukuran seragam, baris 2 tertutup footer */

/* (A) SEMUA TONG BERUKURAN SAMA */
.tong--1, .tong--2, .tong--3, .tong--4, .tong--5,
.tong--6, .tong--7, .tong--8, .tong--9, .tong--10 { width: 166px; }

.about-us-tongs {
    overflow: visible;
    overflow-x: clip;
    position: relative;
    z-index: 0;
}
.about-us-tongs__stage {
    overflow: visible;
    overflow-x: clip;
    height: 610px;
    margin-bottom: 0;
}
.site-footer { position: relative; z-index: 5; }

/* (C) POSISI — dihitung dari gambar acuan */
.tong--1 { left: 10.9%; bottom:  35.7%; z-index: 3; }
.tong--2 { left: 20.5%; bottom:  52.6%; z-index: 1; }   /* terangkat, di belakang */
.tong--3 { left: 29.7%; bottom:  40.5%; z-index: 3; }
.tong--4 { left: 62.8%; bottom:  40.5%; z-index: 3; }
.tong--5 { left: 75.9%; bottom:  50.2%; z-index: 1; }   /* terangkat, di belakang */

.tong--6  { left: 10.0%; bottom: -15.7%; z-index: 6; }
.tong--7  { left: 19.9%; bottom:  -7.9%; z-index: 4; }
.tong--8  { left: 26.3%; bottom: -23.1%; z-index: 6; }
.tong--9  { left: 57.1%; bottom:  -7.9%; z-index: 6; }  /* lebih ATAS dari tong 10 */
.tong--10 { left: 69.9%; bottom: -15.7%; z-index: 4; }  /* lebih BAWAH dari tong 9 */

/* Garis melintas badan tong baris 1, sesuai acuan */
.tong-line { top: 35.7%; }

/* (D) VARIABEL ANIMASI dihitung ulang untuk lebar 166px */
.tong--1 { --from: 872%; --slow: 115%; --hit: -95%; }
.tong--2 { --from: 790%; --bump: -18%; }
.tong--3 { --from: 709%; --bump: -16%; }
.tong--4 { --from: 423%; --bump: -18%; }
.tong--5 { --from: 309%; --bump: -14%; }

.tong--6  { --from: 880%; --slow: 115%; --hit: -87%; }
.tong--7  { --from: 795%; --bump: -18%; }
.tong--8  { --from: 739%; --bump: -16%; }
.tong--9  { --from: 472%; --bump: -18%; }
.tong--10 { --from: 361%; --bump: -14%; }

@media (max-width: 900px) {
    .about-us-tongs__stage { height: 420px; }
    .tong--1, .tong--2, .tong--3, .tong--4, .tong--5,
    .tong--6, .tong--7, .tong--8, .tong--9, .tong--10 { width: clamp(56px, 18vw, 96px); }
    .tong-line { top: 34%; }
    .tong--1 { bottom: 34%; } .tong--2 { bottom: 50%; } .tong--3 { bottom: 39%; }
    .tong--4 { bottom: 39%; } .tong--5 { bottom: 48%; }
    /* Tong mobile lebih pendek relatif terhadap panggung, jadi */
    .tong--6  { bottom: -10%; } .tong--7 { bottom: -5%; } .tong--8 { bottom: -14%; }
    .tong--9  { bottom:  -5%; } .tong--10 { bottom: -10%; }
    .tong--1 { --from: 460%; --slow: 95%; --hit: -50%; }
    .tong--2 { --from: 410%; } .tong--3 { --from: 370%; }
    .tong--4 { --from: 230%; } .tong--5 { --from: 175%; }
    .tong--6 { --from: 470%; --slow: 95%; --hit: -46%; }
    .tong--7 { --from: 420%; } .tong--8 { --from: 385%; }
    .tong--9 { --from: 250%; } .tong--10 { --from: 195%; }
}

/* Waktu animasi tong disinkronkan */

.about-us-tongs__stage.is-playing .tong--2,
.about-us-tongs__stage.is-playing .tong--3,
.about-us-tongs__stage.is-playing .tong--4,
.about-us-tongs__stage.is-playing .tong--5,
.about-us-tongs__stage.is-playing .tong--7,
.about-us-tongs__stage.is-playing .tong--8,
.about-us-tongs__stage.is-playing .tong--9,
.about-us-tongs__stage.is-playing .tong--10 {
    animation: tongGlideIn 4s both;
}

/* Baris 1 */
.about-us-tongs__stage.is-playing .tong--1 { animation: tongSlamLeft 7s both; animation-delay: 0.00s; }
.about-us-tongs__stage.is-playing .tong--2 { animation-delay: 0.36s; }   /* pendorong tong 1 */
.about-us-tongs__stage.is-playing .tong--3 { animation-delay: 0.90s; }
.about-us-tongs__stage.is-playing .tong--4 { animation-delay: 1.50s; }
.about-us-tongs__stage.is-playing .tong--5 { animation-delay: 2.00s; }

/* Baris 2: pola sama, digeser +1,60s */
.about-us-tongs__stage.is-playing .tong--6  { animation: tongSlamLeft 7s both; animation-delay: 1.60s; }
.about-us-tongs__stage.is-playing .tong--7  { animation-delay: 1.96s; }  /* pendorong tong 6 */
.about-us-tongs__stage.is-playing .tong--8  { animation-delay: 2.50s; }
.about-us-tongs__stage.is-playing .tong--9  { animation-delay: 3.10s; }
.about-us-tongs__stage.is-playing .tong--10 { animation-delay: 3.60s; }

/* Perbaikan lintas halaman */

/* (1) TEKNOLOGI di iPad Pro: tidak lagi satu section = satu layar */
@media (min-width: 901px) and (max-width: 1024px) {
    .page-technology .section,
    .page-technology .tech-section {
        min-height: 0;
        height: auto;
        scroll-snap-align: none;
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .page-technology .page-wrapper { scroll-snap-type: none; }
}

/* (2) KARIR: footer tidak sampai dasar layar di iPad Pro */
.page-career .page-content {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.page-career .site-footer { margin-top: auto; }

/* (3) BERITA: pita abu-abu di kartu (semua device) */
.news-list .news-card__thumb,
.news-card__thumb.reveal-img { overflow: hidden; position: relative; }
.news-list .news-card__thumb .reveal-img__inner,
.news-card__thumb .reveal-img__inner {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    top: -22%;
    height: 144%;
}
.news-list .news-card__thumb img,
.news-card__thumb .reveal-img__inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* (4) BERITA di iPad Mini & Air: isi kartu PINDAH KE BAWAH gambar */
@media (min-width: 768px) and (max-width: 900px) {
    .news-list .news-card {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-areas:
            "date thumb"
            "body body";
        gap: 20px 24px;
        align-items: start;
    }
    .news-list .news-card__date  { grid-area: date; }
    .news-list .news-card__thumb { grid-area: thumb; width: 100%; height: 320px; }
    .news-list .news-card__body  {
        grid-area: body;
        min-height: 0;
        max-width: 100%;
        width: 100%;
    }
    .news-list .news-card__title a,
    .news-list .news-card__excerpt { max-width: 100%; }
    .news-list .news-card__meta { margin-top: 20px !important; max-width: 100%; }
}

/* (5) PRODUK di iPad Mini & Air: .pd-swiper mengisi satu layar */
@media (min-width: 768px) and (max-width: 900px) {
    .product-detail { padding-top: 88px; }
    .pd-swiper {
        min-height: calc(100svh - 88px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .product-detail__media img { max-height: 42svh; }
}

/* (6) TONG 8: angkanya jangan tertutup footer */
.tong--8 { bottom: -14%; }
@media (max-width: 900px) { .tong--8 { bottom: -10%; } }

/* Animasi tong DISALIN dari video */

@keyframes tongSlamVideo {
    0% {
        transform: translate3d(var(--from), 0, 0); opacity: 0;
        animation-timing-function: cubic-bezier(.17, .67, .30, .97);
    }
    5%  { opacity: 1; }                       /* hanya opacity — transform tidak diputus */
    27% {                                     /* hampir berhenti */
        transform: translate3d(var(--slow), 0, 0);
        animation-timing-function: linear;
    }
    29% {                                     /* mulai didorong tong di belakangnya */
        transform: translate3d(calc(var(--slow) * .96), 0, 0);
        animation-timing-function: cubic-bezier(.40, .05, .70, .60);
    }
    44% {                                     /* NABRAK tepi kiri */
        transform: translate3d(var(--hit), 0, 0);
        animation-timing-function: cubic-bezier(.16, .70, .28, 1);
    }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }   /* mental → diam */
}

/* BARIS 1 */
.about-us-tongs__stage.is-playing .tong--1 { animation: tongSlamVideo 7.0s both; animation-delay: 0.00s; }
.about-us-tongs__stage.is-playing .tong--2 { animation: tongGlideIn  4.0s both; animation-delay: 0.96s; }
.about-us-tongs__stage.is-playing .tong--3 { animation: tongGlideIn  2.8s both; animation-delay: 1.86s; }
.about-us-tongs__stage.is-playing .tong--4 { animation: tongGlideIn  2.4s both; animation-delay: 2.58s; }
.about-us-tongs__stage.is-playing .tong--5 { animation: tongGlideIn  2.1s both; animation-delay: 2.88s; }

/* BARIS 2: pola identik, digeser +2,0s */
.about-us-tongs__stage.is-playing .tong--6  { animation: tongSlamVideo 7.0s both; animation-delay: 2.00s; }
.about-us-tongs__stage.is-playing .tong--7  { animation: tongGlideIn  4.0s both; animation-delay: 2.96s; }
.about-us-tongs__stage.is-playing .tong--8  { animation: tongGlideIn  2.8s both; animation-delay: 3.86s; }
.about-us-tongs__stage.is-playing .tong--9  { animation: tongGlideIn  2.4s both; animation-delay: 4.58s; }
.about-us-tongs__stage.is-playing .tong--10 { animation: tongGlideIn  2.1s both; animation-delay: 4.88s; }

/* Perbaikan lanjutan */

/* (1) TONG 4-5 & 9-10 saling menabrak saat memantul */
.tong--5  { --bump: -7%; }
.tong--10 { --bump: -6%; }

/* (2) HOME section 4 di iPad Pro disamakan dengan halaman Produk */
@media (min-width: 901px) and (max-width: 1024px) {
    .page-home .product-inner,
    .page-home .product-inner--3col {
        align-items: center;
        align-content: center;
        padding-top: 0;
        padding-bottom: 0;
        gap: 24px;
    }
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img {
        max-height: min(420px, 38svh);
    }
    .page-home .product-title { font-size: 32px; line-height: 38px; }
    .page-home .product-stats { gap: 16px; }
}

/* (3) GRID PRODUK: 3 kolom di iPad Mini, Air, dan Pro */
@media (min-width: 768px) and (max-width: 1024px) {
    .products-grid,
    .products-page .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px;
    }
}

/* (4) & (6) TEKNOLOGI di iPad: 1 section = 1 layar, footer di dasar */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-technology .section,
    .page-technology .tech-section {
        min-height: 100svh;
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }
    .page-technology .page-content {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
    }
    .page-technology .site-footer {
        margin-top: auto;
        min-height: 0;
    }
}

/* (5) KARTU BERITA iPad Mini & Air: badan SEJAJAR dengan gambar */
@media (min-width: 768px) and (max-width: 900px) {
    .news-list .news-card {
        grid-template-areas:
            "date thumb"
            "gap  body";
        grid-template-columns: 88px minmax(0, 1fr);
    }
    .news-list .news-card__body { grid-area: body; }
}

/* Perbaikan lanjutan */

/* (1) TONG 4-5 & 9-10 HARUS SALING MENEMPEL saat memantul */
.tong--5  { --bump: -32%; }
.tong--10 { --bump: -30%; }

/* (2) HOME section 4 @ iPad Pro — cone sebesar halaman Produk */
@media (min-width: 901px) and (max-width: 1024px) {
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img {
        max-height: min(560px, 50svh);
    }
    .page-home .product-inner--3col { grid-template-columns: 0.9fr 1.2fr 0.8fr; }
}

/* (3) GRID PRODUK & PRODUK TERKAIT: 3 kolom di iPad Air & Pro */
@media (min-width: 768px) and (max-width: 1024px) {
    .products-grid,
    .products-page .products-grid,
    .product-detail__related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px;
    }
}

/* (4) KONTAK @ iPad Mini, Air, Pro: bagian kontak = 1 layar, */
@media (min-width: 768px) and (max-width: 1024px) {
    .contact-page {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding-top: 112px;
        padding-bottom: 40px;
    }
    .page-contact .contact-map,
    .contact-page + .contact-map { margin-top: 0; }
}

/* Perbaikan lanjutan */

@media (min-width: 901px) and (max-width: 1024px) {
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img {
        max-height: min(560px, 52svh) !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
    }
    .page-home .product-inner--3col {
        display: grid !important;
        grid-template-columns: 0.85fr 1.3fr 0.85fr !important;
        grid-template-areas: "left cone stats" !important;
        align-items: center !important;
        gap: 20px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .page-home #section4 { justify-content: center; }
}

/* (2) PRODUK TERKAIT @ iPad Mini, Air, Pro */
@media (min-width: 768px) and (max-width: 1024px) {
    .product-detail__related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .product-detail__related-grid > *:nth-child(n + 4) { display: none !important; }
    .product-detail__related-grid > * { grid-column: span 1 !important; }

    .products-grid,
    .products-page .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .products-grid > * { grid-column: span 1 !important; }
}

/* (3) KONTAK @ iPad — bagian kontak = 1 layar, peta di bawahnya */
@media (min-width: 768px) and (max-width: 1024px) {
    .contact-page { padding-top: 0; }
    .contact-page > .container {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding-top: 112px;
        padding-bottom: 48px;
    }
    .contact-page .contact-map { margin-top: 0; }
}

/* (1) HOME section 4 @ iPad Pro — blok penutup */
@media (min-width: 901px) and (max-width: 1024px) {
    #section4 .product-cone,
    #section4 .product-slide .product-cone,
    #section4 .product-slide.active .product-cone {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img {
        max-height: min(560px, 52svh) !important;
        min-height: 380px !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
}

/* (2) KONTAK @ iPad Mini, Air, Pro */
@media (min-width: 768px) and (max-width: 1024px) {
    .contact-page {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }
    .contact-page > .container {
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 104px;
        padding-bottom: 24px;
        box-sizing: border-box;
    }
    .contact-page .contact-map {
        flex: 0 0 auto;
        height: clamp(200px, 28svh, 340px);
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0;
    }
    .contact-page .contact-map iframe,
    .contact-page .contact-map > * {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }
    .page-contact .site-footer { margin-top: 0; }
}

@media (min-width: 901px) and (max-width: 1024px) {
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img {
        max-height: 50svh !important;
        min-height: 0 !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
    }
    /* Kolom disamakan dengan halaman Produk: teks lebih sempit, */
    .page-home .product-inner--3col {
        grid-template-columns: 0.8fr 1.45fr 0.8fr !important;
    }
    .page-home .product-desc { font-size: 12px; line-height: 24px; }
}

/* (2) KONTAK @ iPad Mini (dan layar bertumpuk lainnya): */
@media (max-width: 900px) {
    .contact-page .contact-grid {
        display: flex;
        flex-direction: column;
    }
    .contact-page .contact-info      { order: 1; margin-bottom: 28px; }
    .contact-page .contact-form-wrap { order: 2; }
}

/* Cone Home section 4 = ukuran halaman Produk */
@media (min-width: 901px) and (max-width: 1024px) {
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img,
    .page-home #section4 .product-cone img,
    .page-home .product-slide.active .product-cone img {
        max-height: min(50svh, 64vw) !important;   /* 1024x1366 → 655px */
        min-height: 0 !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
}

@media (min-width: 901px) and (max-width: 1024px) {
    #section4 .product-cone img,
    #section4 .product-slide .product-cone img,
    #section4 .product-slide.active .product-cone img,
    .page-home #section4 .product-cone img,
    .page-home .product-slide.active .product-cone img {
        height: min(50svh, 64vw) !important;       /* ← MEMBESARKAN */
        max-height: min(50svh, 64vw) !important;   /* ← menjaga batas */
        min-height: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
}

/* (revisi) — Dots & SEE ALL di BAWAH cone */
@media (min-width: 901px) and (max-width: 1024px) {
    .page-home #section4 {
        display: grid;
        grid-template-columns: 1fr;
        /* auto auto (bukan 1fr auto) supaya baris kontrol MENEMPEL di */
        grid-template-rows: auto auto;
        align-content: center;
    }
    .page-home #section4 .product-slide {
        grid-row: 1;
        grid-column: 1;
    }
    .page-home #section4 .carousel-dots,
    .page-home #section4 .product-seeall-bar {
        position: static !important;
        grid-row: 2;
        grid-column: 1;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-top: 48px;          /* jarak dari cone */
        margin-bottom: 8px;
    }
    .page-home #section4 .carousel-dots {
        justify-self: center;
        width: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .page-home #section4 .product-seeall-bar {
        justify-self: end;
        width: auto;
        padding-right: var(--edge);
        display: flex;
        align-items: center;
        height: 8px;               /* titik tengah sejajar dots */
    }
}

.page-home .hero-content {
    margin-left: var(--edge);
    padding-left: 0;

    box-sizing: border-box;
}
@media (max-width: 767px) {
    .page-home .hero-title { padding-right: 8px; }
    .page-home .hero-desc  { padding-right: 14px; }
}

/* (3) news-body padding @ iPad Mini — 150px di kanan terlalu besar */
@media (min-width: 768px) and (max-width: 900px) {
    .page-home .news-body { padding: 20px 24px 18px 22px; }
}

/* (5) iPad Pro 13" (1032x1376) ikut mode iPad Pro: */
@media (min-width: 1025px) and (max-width: 1040px) {
    .navbar { display: flex; align-items: center; justify-content: space-between; }
    .hamburger { display: flex; order: 2; }
    .navbar .lang-switcher { order: 1; margin-left: auto; margin-right: 18px; }
    .navbar-menu {
        display: none; position: fixed; top: var(--nav-h, 88px) !important;
        left: 0; width: 100%; transform: none; background: #fff;
        flex-direction: column; align-items: flex-end; text-align: right;
        padding: 8px 0 20px; box-shadow: 0 6px 16px rgba(0,0,0,.10); z-index: 999; gap: 0;
    }
    .navbar-menu.open { display: flex !important; }
    .navbar-menu li { width: 100%; display: flex; justify-content: flex-end; border-bottom: 1px solid #f0f0f0; }
    .navbar-menu li a { display: block; padding: 14px 28px; font-size: 13px; text-align: right; }

    #section4 .product-cone img,
    #section4 .product-slide.active .product-cone img {
        height: min(50svh, 64vw) !important;
        max-height: min(50svh, 64vw) !important;
        width: auto !important; max-width: 100% !important;
    }
    .page-home #section4 { display: grid; grid-template-rows: auto auto; align-content: center; }
    .page-home #section4 .product-slide { grid-row: 1; grid-column: 1; }
    .page-home #section4 .carousel-dots,
    .page-home #section4 .product-seeall-bar {
        position: static !important; grid-row: 2; grid-column: 1;
        bottom: auto !important; transform: none !important; margin-top: 48px;
    }
    .page-home #section4 .carousel-dots { justify-self: center; }
    .page-home #section4 .product-seeall-bar { justify-self: end; padding-right: var(--edge); height: 8px; display: flex; align-items: center; }
}

/* (6) About Us hero @ iPad Mini: gutter samakan dengan container */
@media (min-width: 768px) and (max-width: 1040px) {
    .about-us-hero__content {
        padding-left: clamp(24px, 6.25vw, 90px);
        padding-right: clamp(24px, 6.25vw, 90px);
        box-sizing: border-box;
    }
}

/* (8) iPad (768–1040): tiap section Home = 1 layar */
@media (min-width: 768px) and (max-width: 1040px) {
    .page-home .section { min-height: 100svh; height: auto; }
    .page-home .section6, .page-home .section8 { min-height: 0; }
}

/* (9) Angka & label statistik Teknologi rata kanan */
.tech-number,
.tech-stat-label { text-align: right; }

/* (10) iPad Mini: chips kategori sejajar dengan tombol Filters */
@media (min-width: 768px) and (max-width: 900px) {
    .page-career .career-toolbar,
    .career-toolbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
    }
    .career-chips { flex: 1 1 auto; min-width: 0; }
    .career-filters { flex: 0 0 auto; margin-left: auto; align-self: center; }
}

/* (11) Kontak: perilaku scroll disamakan dengan halaman lain (About Us) */
.page-contact .page-wrapper { scroll-snap-type: none; scroll-behavior: auto; }
.page-contact .contact-page { scroll-snap-align: none; }
@media (min-width: 768px) and (max-width: 1040px) {
    .contact-page { min-height: 0; display: block; }
    .contact-page > .container {
        min-height: 0;
        display: block;
        padding-top: 120px;
        padding-bottom: 56px;
    }
    .contact-page .contact-map { height: auto; }
}

/* Silver Kris: 1 section = 1 layar */
.sk-wrap .sk-hero,
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery {
    min-height: 100svh;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}
.page-silver-kris .page-content {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.page-silver-kris .site-footer { margin-top: auto; }

/* Hero punya header + visual, jadi isinya dibiarkan mengalir */
.sk-wrap .sk-hero { justify-content: flex-start; }

/* iPad Mini & Air ikut 1 layar — diuji tidak ada isi yang terpotong: */
@media (min-width: 768px) and (max-width: 900px) {
    .sk-wrap .sk-hero__visual { max-height: 40svh; }
    .sk-wrap .sk-vision__grid { gap: 24px; }
    .sk-wrap .sk-hero__header { padding-bottom: 24px; }
}

/* Hanya PONSEL yang dibiarkan mengalir — kontennya terlalu tinggi */
@media (max-width: 767px) {
    .sk-wrap .sk-hero,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        min-height: 0;
        overflow: visible;
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* Revisi klien */

@media (max-width: 767px) {
    .page-technology .page-wrapper,
    .page-silver-kris .page-wrapper {
        height: 100svh;
        height: 100dvh;
    }
}

/* (1a) TECHNOLOGY — iPad Pro 13 masuk mode "1 section = 1 layar" */
@media (min-width: 768px) and (max-width: 1040px) {
    .page-technology .page-wrapper {
        scroll-snap-type: y mandatory;
        scroll-padding-top: 0;
    }
    .page-technology .section,
    .page-technology .tech-section {
        min-height: 100svh;
        height: 100svh;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .page-technology .page-content {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
    }
    .page-technology .site-footer {
        margin-top: auto;
        min-height: 0;
        scroll-snap-align: start;
    }

    /* Kartu & chevron proporsional pada layar 1032x1376 */
    .page-technology .pos-bottom .tech-panel { bottom: 132px; }
    .page-technology .pos-top    .tech-panel { top: 132px; }
    .page-technology .tech-chevron { bottom: 40px; }
}

/* (1b) PONSEL — chevron & kartu dijamin satu viewport */
@media (max-width: 767px) {
    .page-technology .page-wrapper {
        scroll-snap-type: y mandatory;
        scroll-padding-top: 0;
    }
    .page-technology .tech-section {
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Urutan dari bawah: safe-area → chevron → kartu */
    .page-technology .tech-chevron {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .page-technology .tech-chevron .ui-chevron,
    .page-technology .tech-chevron .sd-arrow { height: 22px; }

    .page-technology .pos-bottom .tech-panel {
        bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }
    .page-technology .pos-top .tech-panel {
        top: calc(var(--nav-h, 64px) + 20px);
    }

    /* Kartu tidak boleh melebihi ruang yang tersisa */
    .page-technology .tech-glass,
    .page-technology .tech-glass.has-stats {
        max-height: calc(100svh - 150px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .page-technology .tech-glass::-webkit-scrollbar { width: 0; height: 0; }
}

/* (2) TECHNOLOGY — .tech-glass SERAGAM + statistik dirapatkan */

/* Tinggi per-section (REV 26) dibatalkan; tinggi seragam dipakai */
.page-technology { --tech-glass-w: 527px; --tech-glass-h: 400px; }

.page-technology .tech-s1 .tech-glass,
.page-technology .tech-s2 .tech-glass,
.page-technology .tech-s3 .tech-glass,
.page-technology .tech-s4 .tech-glass,
.page-technology .tech-s5 .tech-glass,
.page-technology .tech-s6 .tech-glass,
.page-technology .tech-glass,
.page-technology .tech-glass.has-stats {
    width: var(--tech-glass-w);
    max-width: var(--tech-glass-w);
    min-height: var(--tech-glass-h);
    box-sizing: border-box;
}

/* Angka & label: rapat, tanpa celah dari line-height berlebih. */
.page-technology .tech-glass-stats {
    gap: 18px;                     /* jarak antar-statistik */
    justify-content: center;
}
.page-technology .tech-stat { display: block; }
.page-technology .tech-number {
    font-size: 32px;
    line-height: 1;                /* 65px → 1 */
    margin: 0;
    padding: 0;
    display: block;
}
.page-technology .tech-number .flip-char { line-height: 1; vertical-align: top; }
.page-technology .tech-stat-label {
    font-size: 12px;
    line-height: 1.25;             /* 27px → 1.25 */
    margin: 2px 0 0;               /* rapat ke angka */
    padding: 0;
    display: block;
}

@media (min-width: 768px) and (max-width: 1040px) {
    .page-technology { --tech-glass-w: 500px; --tech-glass-h: 380px; }
    .page-technology .tech-number { font-size: 30px; }
}
@media (max-width: 767px) {
    .page-technology { --tech-glass-w: 100%; --tech-glass-h: 0px; }
    .page-technology .tech-glass-stats { gap: 22px; }
    .page-technology .tech-number { font-size: 26px; }
    .page-technology .tech-stat-label { font-size: 11px; }
}

/* (3a) SILVER KRIS — SCROLL PER-SECTION (1 section = 1 viewport) */
.page-silver-kris .page-wrapper {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
}
@media (pointer: coarse) {
    .page-silver-kris .page-wrapper { scroll-snap-type: y mandatory; }
}

.sk-wrap .sk-hero          { scroll-snap-align: start; }
.sk-wrap .sk-hero__visual  { scroll-snap-align: end; }   /* gambar tampil utuh */
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery       { scroll-snap-align: start; scroll-snap-stop: always; }
.page-silver-kris .site-footer { scroll-snap-align: start; }

/* Hero: header + visual dibiarkan mengalir (lebih tinggi dari 1 layar), */
.sk-wrap .sk-hero {
    min-height: 0;
    justify-content: flex-start;
    overflow: visible;
}
.sk-wrap .sk-hero__visual {
    aspect-ratio: auto;
    height: min(78svh, 56.1vw);    /* 808/1440 = 56.1vw */
    max-height: none;
    min-height: 0;
}

/* (3b) SILVER KRIS — .sk-slider__stage MENEMPEL KE BAWAH */
.sk-wrap .sk-slider {
    justify-content: flex-end;
    padding-bottom: clamp(18px, 3.2svh, 44px);
}
.sk-wrap .sk-slider__stage { margin-top: auto; }
.sk-wrap .sk-slider__controls { margin-top: clamp(12px, 2.2svh, 24px); }

/* (3c) SILVER KRIS — RESPONSIF */

/* DESKTOP (>= 1041px, acuan 1440x900) */
@media (min-width: 1041px) {
    .sk-vision  { padding: clamp(64px, 9svh, 120px) 0; }
    .sk-gallery { padding: clamp(64px, 9svh, 110px) 0; }
    .sk-wrap .sk-vision__media {
        aspect-ratio: auto;
        height: min(58svh, 40.7vw);
    }
    .sk-wrap .sk-gallery__item {
        aspect-ratio: auto;
        height: min(66svh, 50.5vw);
    }
    .sk-wrap .sk-hero__header { padding-bottom: clamp(28px, 4svh, 56px); }
}

/* iPAD PRO 13 (993–1040px) */
@media (min-width: 993px) and (max-width: 1040px) {
    .sk-wrap .container { width: 90%; }
    .sk-wrap .sk-hero__header {
        grid-template-columns: 1fr 40%;
        column-gap: 4%;
        padding: calc(var(--nav-h, 88px) + 44px) 0 32px;
    }
    .sk-wrap .sk-hero__title { font-size: 34px; line-height: 1.18; }
    .sk-wrap .sk-hero__intro { font-size: 12px; line-height: 24px; }
    .sk-wrap .sk-hero__visual { height: min(62svh, 62vw); }

    /* Kartu slider: 2 penuh + potongan ke-3 (seperti desain) */
    .sk-wrap .sk-pcard {
        flex: 0 0 42%; width: 42%;
        min-height: 0; padding: 22px 26px;
    }
    .sk-wrap .sk-pcard__num   { font-size: 18px; line-height: 22px; margin: 0 0 4px; }
    .sk-wrap .sk-pcard__title { font-size: 24px; line-height: 28px; margin: 0 0 10px 14px; }
    .sk-wrap .sk-pcard__desc  { font-size: 12px; line-height: 22px; letter-spacing: .6px; margin: 0 0 0 14px; }

    .sk-vision { padding: clamp(48px, 6svh, 80px) 0; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr 1fr; column-gap: 34px; row-gap: 28px; }
    .sk-wrap .sk-vision__media { grid-column: 1 / -1; aspect-ratio: auto; height: min(34svh, 320px); }
    .sk-gallery { padding: clamp(48px, 6svh, 80px) 0; }
    .sk-wrap .sk-gallery__item { aspect-ratio: auto; height: min(48svh, 56vw); }
}

/* iPAD MINI / AIR (768–992px) */
@media (min-width: 768px) and (max-width: 992px) {
    .sk-wrap .sk-hero__header {
        grid-template-columns: 1fr;
        row-gap: 20px;
        padding: calc(var(--nav-h, 88px) + 36px) 0 26px;
    }
    .sk-wrap .sk-hero__title { font-size: 30px; line-height: 1.2; }
    .sk-wrap .sk-hero__intro { font-size: 12px; line-height: 23px; }

    .sk-wrap .sk-hero__visual { height: min(54svh, 66vw); max-height: none; }
    .sk-wrap .sk-hero__stats { grid-template-columns: repeat(4, 1fr); gap: 10px; bottom: 9%; width: 92%; }
    .sk-wrap .sk-stat__value { font-size: 24px; line-height: 1.06; }
    .sk-wrap .sk-stat__label { font-size: 11px; line-height: 1.45; }

    .sk-vision { padding: clamp(44px, 6svh, 72px) 0; }
    .sk-wrap .sk-vision__brand { margin-bottom: 28px; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 24px; }
    .sk-wrap .sk-vision__title--gap { margin-top: 26px; }
    .sk-wrap .sk-vision__media { grid-column: 1 / -1; aspect-ratio: auto; height: min(30svh, 260px); }

    .sk-wrap .sk-pcard { flex: 0 0 56%; width: 56%; min-height: 0; padding: 20px 24px; }
    .sk-wrap .sk-pcard__num   { font-size: 17px; line-height: 21px; margin: 0 0 4px; }
    .sk-wrap .sk-pcard__title { font-size: 22px; line-height: 26px; margin: 0 0 9px 13px; }
    .sk-wrap .sk-pcard__desc  { font-size: 12px; line-height: 21px; letter-spacing: .6px; margin: 0 0 0 13px; }

    .sk-gallery { padding: clamp(44px, 6svh, 72px) 0; }
    .sk-wrap .sk-gallery__grid { grid-template-columns: repeat(2, 48.5%); }
    .sk-wrap .sk-gallery__item { aspect-ratio: auto; height: min(52svh, 62vw); }
}

/* PONSEL (<= 767px) — iPhone 16/17 Pro Max, Android */
@media (max-width: 767px) {
    .sk-wrap .container { width: 88%; }

    .sk-wrap .sk-hero__header {
        grid-template-columns: 1fr;
        row-gap: 16px;
        padding: calc(var(--nav-h, 64px) + 28px) 0 22px;
    }
    .sk-wrap .sk-hero__title { font-size: clamp(24px, 7vw, 32px); line-height: 1.24; }
    .sk-wrap .sk-hero__intro { font-size: 12px; line-height: 23px; }

    .sk-wrap .sk-hero__visual {
        height: min(56svh, 118vw);
        min-height: 0; max-height: none;
    }
    .sk-wrap .sk-hero__stats {
        position: absolute;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 14px;
        bottom: 12%;
        width: 88%;
    }
    .sk-wrap .sk-stat__value { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.08; }
    .sk-wrap .sk-stat__label { font-size: 11px; line-height: 1.45; }
    .sk-wrap .sk-hero__scroll { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

    .sk-vision { padding: 52px 0; }
    .sk-wrap .sk-vision__brand { margin-bottom: 24px; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr; row-gap: 26px; }
    .sk-wrap .sk-vision__title { font-size: 17px; line-height: 26px; }
    .sk-wrap .sk-vision__body p { font-size: 12px; line-height: 23px; letter-spacing: .8px; }
    .sk-wrap .sk-vision__media { aspect-ratio: auto; height: min(40svh, 78vw); }

    .sk-wrap .sk-slider {
        aspect-ratio: auto;
        min-height: 78svh;
        padding: 56px 0 calc(22px + env(safe-area-inset-bottom, 0px));
        justify-content: flex-end;
    }
    .sk-wrap .sk-slider__stage { padding-left: 6%; }
    .sk-wrap .sk-pcard { flex: 0 0 84%; width: 84%; min-height: 0; padding: 18px 20px; }
    .sk-wrap .sk-pcard__num   { font-size: 16px; line-height: 20px; margin: 0 0 4px; }
    .sk-wrap .sk-pcard__title { font-size: 21px; line-height: 24px; margin: 0 0 8px 11px; }
    .sk-wrap .sk-pcard__desc  { font-size: 12px; line-height: 21px; letter-spacing: .5px; margin: 0 0 0 11px; }
    .sk-wrap .sk-slider__controls { padding: 0 6%; }

    .sk-gallery { padding: 52px 0; }
    .sk-wrap .sk-gallery__grid { grid-template-columns: 1fr; row-gap: 16px; }
    .sk-wrap .sk-gallery__item { aspect-ratio: 4 / 5; height: auto; }
}

/* Landscape ponsel: jangan paksa tinggi svh besar */
@media (max-width: 940px) and (orientation: landscape) {
    .sk-wrap .sk-hero__visual { height: min(88svh, 48vw); }
    .sk-wrap .sk-slider { min-height: 100svh; }
    .page-technology .tech-glass,
    .page-technology .tech-glass.has-stats {
        max-height: calc(100svh - 120px);
    }
}

/* Hormati preferensi kurangi-gerak: auto-scroll dimatikan lewat JS */
@media (prefers-reduced-motion: reduce) {
    .page-silver-kris .page-wrapper { scroll-snap-type: none; }
}

/* SINKRONISASI DENGAN FIGMA */

@media (min-width: 1200px) {
    .navbar-menu { gap: 73px; }
}
@media (min-width: 1041px) and (max-width: 1199px) {
    .navbar-menu { gap: 56px; }
}

/* B. FOOTER — Figma: tinggi 408px, gutter 92px, logo 128px */
.site-footer { min-height: 408px; }

.footer-main {
    padding: 80px 92px 0;
    gap: 60px;
}
.footer-logo img { width: 128px; }

.footer-nav { gap: 120px; margin-right: 88px; }
.footer-nav-col { gap: 29px; }          /* jarak baris 47px (14 + 29) */
.footer-nav-col li a { font-size: 14px; line-height: 18px; letter-spacing: .6px; }

.footer-bottom { padding: 0 92px 38px; }

@media (min-width: 768px) and (max-width: 1040px) {
    .site-footer  { min-height: 320px; }
    .footer-main  { padding: 56px 48px 0; }
    .footer-logo img { width: 104px; }
    .footer-nav   { gap: 64px; margin-right: 0; }
    .footer-nav-col { gap: 22px; }
    .footer-bottom { padding: 0 48px 32px; }
}
@media (max-width: 767px) {
    .site-footer  { min-height: 0; }
    .footer-main  { padding: 40px 24px 0; gap: 28px; flex-direction: column; }
    .footer-logo img { width: 84px; }
    .footer-nav   { gap: 32px; margin-right: 0; flex-wrap: wrap; }
    .footer-nav-col { gap: 16px; }
    .footer-nav-col li a { font-size: 13px; }
    .footer-bottom { padding: 24px 24px calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* C. TECHNOLOGY — grid 1320 (gutter 60px), bukan 1260 (gutter 90px) */
.page-technology { --edge: max(60px, calc((100% - 1320px) / 2)); }

.page-technology .pos-bottom .tech-panel { bottom: 50px; }
.page-technology .pos-top    .tech-panel { top: 132px; }

.page-technology .tech-chevron { bottom: 24px; }

@media (min-width: 1041px) {
    .page-technology .tech-glass-stats { flex: 0 0 132px; padding-left: 30px; }
    .page-technology .tech-glass { gap: 30px; }
}

/* CATATAN: di Figma tinggi kartu berbeda-beda tiap section */

/* D. SILVER KRIS — kembalikan proporsi Figma di DESKTOP */
@media (min-width: 1041px) {

    /* batalkan pemaksaan 1 layar dari REV 85 */
    .sk-wrap .sk-hero,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        min-height: 0;
        height: auto;
        display: block;
        overflow: visible;
    }

    /* D1. HERO HEADER (Figma: teks 146→296, gambar mulai 337) */
    .sk-wrap .sk-hero__header {
        grid-template-columns: 1fr 38.07%;
        column-gap: 4%;
        padding: 110px 0 42px;
    }
    .sk-wrap .sk-hero__title { font-size: 40px; line-height: 47px; }
    .sk-wrap .sk-hero__intro { font-size: 12px; line-height: 25px; }

    /* D2. HERO VISUAL 1440 x 808 */
    .sk-wrap .sk-hero__visual {
        aspect-ratio: 1440 / 808;
        height: auto;
        max-height: none;
        min-height: 0;
    }

    /* D3. STATISTIK: rata kiri–kanan penuh (Figma space-between) */
    .sk-wrap .sk-hero__stats {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
        width: 87.92%;
        max-width: 1266px;
        bottom: 11%;
    }
    .sk-wrap .sk-stat { flex: 0 0 auto; }
    .sk-wrap .sk-stat__value { font-size: 40px; line-height: 1.08; margin-bottom: 4px; }
    .sk-wrap .sk-stat__label { font-size: 12px; line-height: 20px; }
    .sk-wrap .sk-hero__scroll { bottom: 16px; }

    .sk-vision { padding: 116px 0 118px; }
    .sk-wrap .sk-vision__brand { margin-bottom: 45px; }
    .sk-wrap .sk-vision__brand img { width: auto; height: 40px; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 30.73% 27.96% 32.15%; row-gap: 40px; }
    .sk-wrap .sk-vision__media {
        aspect-ratio: 407 / 587;
        height: auto;

        margin-top: -85px;
    }

    .sk-slider {
        aspect-ratio: 1440 / 808;
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 0 32px;
        overflow: hidden;
    }
    .sk-wrap .sk-slider__stage { padding-left: 0; margin-top: auto; }
    .sk-wrap .sk-slider__track { gap: 1.18%; }        /* 17px @1440 */
    .sk-wrap .sk-pcard { flex: 0 0 35.83%; width: 35.83%; }  /* 516px @1440 */
    .sk-wrap .sk-slider__controls { margin-top: 26px; padding: 0 26px; }

    /* D6. GALERI (Figma: 601x728, jarak 115px atas & bawah) */
    .sk-gallery { padding: 115px 0; }
    .sk-wrap .sk-gallery__item { aspect-ratio: 601 / 728; height: auto; }
    .sk-wrap .sk-gallery__grid { grid-template-columns: repeat(2, 47.47%); row-gap: 32px; }
}

/* Snap tetap aktif: tiap section Figma (808/823/808/728) lebih */
.page-silver-kris .page-wrapper { scroll-snap-type: y proximity; }
.sk-wrap .sk-hero          { scroll-snap-align: start; }
.sk-wrap .sk-hero__visual  { scroll-snap-align: end; }
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery       { scroll-snap-align: start; }

/* E. SILVER KRIS — iPAD PRO 13 (993–1040px) */
@media (min-width: 993px) and (max-width: 1040px) {
    .sk-wrap .sk-hero,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        min-height: 100svh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }
    .sk-wrap .sk-hero { justify-content: flex-start; }

    .sk-wrap .sk-hero__header {
        grid-template-columns: 1fr 40%;
        column-gap: 4%;
        padding: calc(var(--nav-h, 88px) + 52px) 0 40px;
    }
    .sk-wrap .sk-hero__title { font-size: 34px; line-height: 40px; }
    .sk-wrap .sk-hero__visual {
        aspect-ratio: auto;
        height: min(58svh, 56.1vw + 120px);
        min-height: 0; max-height: none;
    }
    .sk-wrap .sk-hero__stats {
        display: flex; justify-content: space-between; align-items: flex-end;
        gap: 16px; width: 90%; bottom: 10%;
    }
    .sk-wrap .sk-stat { flex: 0 0 auto; }
    .sk-wrap .sk-stat__value { font-size: 30px; line-height: 1.08; }
    .sk-wrap .sk-stat__label { font-size: 11px; line-height: 18px; }

    .sk-vision { padding: clamp(56px, 7svh, 96px) 0; }
    .sk-wrap .sk-vision__brand img { width: auto; height: 34px; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr 1fr; column-gap: 34px; row-gap: 28px; }
    .sk-wrap .sk-vision__media {
        grid-column: 1 / -1; margin-top: 0;
        aspect-ratio: auto; height: min(32svh, 320px);
    }

    .sk-slider { aspect-ratio: auto; justify-content: flex-end; padding: 0 0 32px; }
    .sk-wrap .sk-slider__stage { padding-left: 0; margin-top: auto; }
    .sk-wrap .sk-slider__track { gap: 1.18%; }
    .sk-wrap .sk-pcard { flex: 0 0 42%; width: 42%; min-height: 0; padding: 22px 26px; }
    .sk-wrap .sk-pcard__num   { font-size: 18px; line-height: 22px; margin: 0 0 4px; }
    .sk-wrap .sk-pcard__title { font-size: 24px; line-height: 28px; margin: 0 0 10px 14px; }
    .sk-wrap .sk-pcard__desc  { font-size: 12px; line-height: 22px; letter-spacing: .6px; margin: 0 0 0 14px; }
    .sk-wrap .sk-slider__controls { margin-top: 22px; padding: 0 22px; }

    .sk-gallery { padding: clamp(56px, 7svh, 96px) 0; }
    .sk-wrap .sk-gallery__item { aspect-ratio: auto; height: min(50svh, 58vw); }
}

/* F. SILVER KRIS — iPAD MINI / AIR (768–992px) */
@media (min-width: 768px) and (max-width: 992px) {
    .sk-wrap .sk-hero,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        min-height: 100svh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }
    .sk-wrap .sk-hero { justify-content: flex-start; }

    .sk-wrap .sk-hero__header {
        grid-template-columns: 1fr;
        row-gap: 20px;
        padding: calc(var(--nav-h, 88px) + 40px) 0 28px;
    }
    .sk-wrap .sk-hero__title { font-size: 30px; line-height: 36px; }
    .sk-wrap .sk-hero__visual {
        aspect-ratio: auto;
        height: min(50svh, 70vw);
        min-height: 0; max-height: none;
    }
    .sk-wrap .sk-hero__stats {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: 10px; width: 92%; bottom: 9%;
    }
    .sk-wrap .sk-stat__value { font-size: 24px; line-height: 1.08; }
    .sk-wrap .sk-stat__label { font-size: 11px; line-height: 16px; }

    .sk-vision { padding: clamp(44px, 6svh, 72px) 0; }
    .sk-wrap .sk-vision__brand { margin-bottom: 26px; }
    .sk-wrap .sk-vision__brand img { width: auto; height: 30px; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 24px; }
    .sk-wrap .sk-vision__media {
        grid-column: 1 / -1; margin-top: 0;
        aspect-ratio: auto; height: min(28svh, 250px);
    }

    .sk-slider { aspect-ratio: auto; justify-content: flex-end; padding: 0 0 28px; }
    .sk-wrap .sk-slider__stage { padding-left: 0; margin-top: auto; }
    .sk-wrap .sk-slider__track { gap: 1.18%; }
    .sk-wrap .sk-pcard { flex: 0 0 56%; width: 56%; min-height: 0; padding: 20px 24px; }
    .sk-wrap .sk-pcard__num   { font-size: 17px; line-height: 21px; margin: 0 0 4px; }
    .sk-wrap .sk-pcard__title { font-size: 22px; line-height: 26px; margin: 0 0 9px 13px; }
    .sk-wrap .sk-pcard__desc  { font-size: 12px; line-height: 21px; letter-spacing: .6px; margin: 0 0 0 13px; }
    .sk-wrap .sk-slider__controls { margin-top: 20px; padding: 0 20px; }

    .sk-gallery { padding: clamp(44px, 6svh, 72px) 0; }
    .sk-wrap .sk-gallery__grid { grid-template-columns: repeat(2, 48.5%); row-gap: 20px; }
    .sk-wrap .sk-gallery__item { aspect-ratio: auto; height: min(50svh, 62vw); }
}

/* G. SILVER KRIS — PONSEL (<=767px) iPhone 16/17 Pro Max, Android */
@media (max-width: 767px) {
    .page-silver-kris .page-wrapper { scroll-snap-type: none; }
    .sk-wrap .sk-hero,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        min-height: 0; height: auto; display: block; overflow: visible;
    }

    .sk-wrap .container { width: 88%; }

    .sk-wrap .sk-hero__header {
        display: grid; grid-template-columns: 1fr; row-gap: 16px;
        padding: calc(var(--nav-h, 64px) + 28px) 0 22px;
    }
    .sk-wrap .sk-hero__title { font-size: clamp(24px, 7vw, 32px); line-height: 1.24; }
    .sk-wrap .sk-hero__intro { font-size: 12px; line-height: 23px; }

    .sk-wrap .sk-hero__visual {
        aspect-ratio: auto;
        height: min(58svh, 120vw);
        min-height: 320px; max-height: none;
    }
    .sk-wrap .sk-hero__stats {
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: 10px 14px; width: 88%; bottom: 12%;
    }
    .sk-wrap .sk-stat__value { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.1; }
    .sk-wrap .sk-stat__label { font-size: 11px; line-height: 16px; }
    .sk-wrap .sk-hero__scroll { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

    .sk-vision { padding: 52px 0; }
    .sk-wrap .sk-vision__brand { margin-bottom: 22px; }
    .sk-wrap .sk-vision__brand img { width: auto; height: 28px; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr; row-gap: 26px; }
    .sk-wrap .sk-vision__media {
        margin-top: 0; aspect-ratio: auto; height: min(40svh, 80vw);
    }

    .sk-slider {
        aspect-ratio: auto; min-height: 0;
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 56px 0 calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .sk-wrap .sk-slider__stage { padding-left: 6%; margin-top: 0; }
    .sk-wrap .sk-slider__track { gap: 3%; }
    .sk-wrap .sk-pcard { flex: 0 0 84%; width: 84%; min-height: 0; padding: 18px 20px; }
    .sk-wrap .sk-pcard__num   { font-size: 16px; line-height: 20px; margin: 0 0 4px; }
    .sk-wrap .sk-pcard__title { font-size: 21px; line-height: 24px; margin: 0 0 8px 11px; }
    .sk-wrap .sk-pcard__desc  { font-size: 12px; line-height: 21px; letter-spacing: .5px; margin: 0 0 0 11px; }
    .sk-wrap .sk-slider__controls { margin-top: 18px; padding: 0 6%; }

    .sk-gallery { padding: 52px 0; }
    .sk-wrap .sk-gallery__grid { grid-template-columns: 1fr; row-gap: 16px; }
    .sk-wrap .sk-gallery__item { aspect-ratio: 601 / 728; height: auto; }
}

/* H. TECHNOLOGY — RESPONSIF (dipertahankan dari REV 86, */
@media (min-width: 768px) and (max-width: 1040px) {
    .page-technology .pos-bottom .tech-panel { bottom: 96px; }
    .page-technology .pos-top    .tech-panel { top: calc(var(--nav-h, 88px) + 40px); }
    .page-technology .tech-chevron { bottom: 36px; }
}
@media (max-width: 767px) {
    .page-technology .pos-bottom .tech-panel {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
    .page-technology .tech-chevron {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* Landscape ponsel */
@media (max-width: 940px) and (orientation: landscape) {
    .sk-wrap .sk-hero__visual { height: min(90svh, 50vw); }
    .page-technology .tech-glass,
    .page-technology .tech-glass.has-stats { max-height: calc(100svh - 120px); }
}

/* Perbaikan atas laporan tangkapan layar 17:08 */

/* (1) matikan CSS snap di Silver Kris */
.page-silver-kris .page-wrapper { scroll-snap-type: none !important; }
.sk-wrap .sk-hero,
.sk-wrap .sk-hero__visual,
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery,
.page-silver-kris .site-footer { scroll-snap-align: none; }

@media (pointer: coarse) {
    .page-silver-kris .page-wrapper { scroll-snap-type: none !important; }
}

/* (2) tinggi kartu Technology = tinggi teks */
.page-technology { --tech-glass-h: auto; }

.page-technology .tech-s1 .tech-glass,
.page-technology .tech-s2 .tech-glass,
.page-technology .tech-s3 .tech-glass,
.page-technology .tech-s4 .tech-glass,
.page-technology .tech-s5 .tech-glass,
.page-technology .tech-s6 .tech-glass,
.page-technology .tech-glass,
.page-technology .tech-glass.has-stats {
    min-height: 0;
    height: auto;
    align-items: stretch;
}

@media (min-width: 1041px) {
    .page-technology .tech-glass,
    .page-technology .tech-glass.has-stats { width: 527px; max-width: 527px; }
}
@media (min-width: 768px) and (max-width: 1040px) {
    .page-technology .tech-glass,
    .page-technology .tech-glass.has-stats { width: 500px; max-width: 500px; }
}
@media (max-width: 767px) {
    .page-technology .tech-glass,
    .page-technology .tech-glass.has-stats {
        width: 100%; max-width: 100%;
        max-height: calc(100svh - 150px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
}

/* (1) Navbar desktop tabrakan  (2) Silver Kris: 1 section */

@media (min-width: 1041px) {
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }
    .navbar-brand,
    .lang-switcher { flex: 0 0 auto; }

    .navbar-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: clamp(24px, 3.6vw, 62px);   /* melebar pelan, tak pernah menabrak */
        margin: 0 16px;
    }
    .navbar-menu li { flex: 0 0 auto; }
    .navbar-menu li a { white-space: nowrap; }
}

/* (2) SILVER KRIS — 1 SECTION = 1 VIEWPORT */
.sk-wrap .sk-hero,
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery {
    min-height: 100svh;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* Hero = header (teks) + gambar yang mengisi sisa layar */
.sk-wrap .sk-hero { justify-content: flex-start; }
.sk-wrap .sk-hero__header { flex: 0 0 auto; }
.sk-wrap .sk-hero__visual {
    flex: 1 1 auto;
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
}

/* Slider: kartu tetap menempel dasar layar */
.sk-wrap .sk-slider { justify-content: flex-end; }
.sk-wrap .sk-slider__stage { margin-top: auto; }

/* Vision: isi dipusatkan, gambar samping dibatasi tinggi layar */
.sk-wrap .sk-vision__media {
    aspect-ratio: auto;
    height: auto;
    max-height: calc(100svh - 300px);
}
.sk-wrap .sk-vision__media img { height: 100%; object-fit: cover; }

/* Galeri: dua gambar muat dalam satu layar */
.sk-wrap .sk-gallery__item {
    aspect-ratio: auto;
    height: min(calc(100svh - 240px), 68vw);
}

@media (min-width: 1041px) {
    .sk-vision  { padding: clamp(56px, 8svh, 116px) 0; }
    .sk-gallery { padding: clamp(56px, 8svh, 115px) 0; }
    .sk-wrap .sk-hero__header { padding: calc(var(--nav-h, 88px) + 48px) 0 clamp(24px, 4svh, 42px); }
    .sk-wrap .sk-vision__media { margin-top: 0; }
}

/* Ponsel: section boleh lebih tinggi dari layar bila isinya panjang, */
@media (max-width: 767px) {
    .sk-wrap .sk-vision,
    .sk-wrap .sk-gallery {
        min-height: 100svh;
        height: auto;
        overflow: visible;
        justify-content: center;
    }
    .sk-wrap .sk-vision__media { max-height: min(38svh, 78vw); }
    .sk-wrap .sk-gallery__item { height: auto; aspect-ratio: 601 / 728; }
    .sk-wrap .sk-gallery__grid { grid-template-columns: 1fr; row-gap: 14px; }
}

/* (1) Navbar dikembalikan ke pola lama (di-center pada */

@media (min-width: 1041px) {
    .navbar {
        display: block;
        position: relative;
    }
    .navbar-menu {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        flex: 0 0 auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 50px;
        margin: 0;
        max-width: calc(100% - 520px);   /* sisakan ruang logo & EN|ID */
    }
    .navbar-menu li { flex: 0 0 auto; }
    .navbar-menu li a { white-space: nowrap; }
}

/* (2) SILVER KRIS — proporsi Figma + scroll kaku 1 viewport */

/* Hero: header mengalir, GAMBAR tepat 1 viewport */
.sk-wrap .sk-hero {
    min-height: 0;
    height: auto;
    display: block;
    overflow: visible;
}
.sk-wrap .sk-hero__visual {
    position: relative;
    aspect-ratio: auto;
    height: 100svh;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

/* Section lain: TEPAT 1 viewport */
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.sk-wrap .sk-slider { justify-content: flex-end; }
.sk-wrap .sk-slider__stage { margin-top: auto; }

/* VISION: gambar samping rasio Figma 407:587 */
.sk-vision { padding: clamp(40px, 7svh, 116px) 0; }
.sk-wrap .sk-vision__grid {
    grid-template-columns: 30.73% 27.96% auto;
    align-items: start;
}
.sk-wrap .sk-vision__media {
    aspect-ratio: 407 / 587;
    height: min(62svh, 587px);
    width: auto;
    max-height: none;
    margin-top: 0;
    justify-self: end;
}
.sk-wrap .sk-vision__media img { width: 100%; height: 100%; object-fit: cover; }

/* GALERI: dua bingkai rasio Figma 601:728 */
.sk-gallery { padding: clamp(40px, 7svh, 115px) 0; }
.sk-wrap .sk-gallery__grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    column-gap: 0;
}
.sk-wrap .sk-gallery__item {
    aspect-ratio: 601 / 728;
    height: min(74svh, 728px);
    width: auto;
    max-width: 47.47%;
}

/* SLIDER: kartu 516x252 @1440, mentok kiri (Figma) */
.sk-wrap .sk-slider__stage { padding-left: 0; }
.sk-wrap .sk-slider__track { gap: 1.18%; }
.sk-wrap .sk-pcard { flex: 0 0 35.83%; width: 35.83%; }
.sk-wrap .sk-slider__controls { margin-top: clamp(14px, 2.6svh, 26px); padding: 0 26px; }
.sk-slider { padding: 0 0 clamp(18px, 3.4svh, 32px); }

/* iPad (768–1040) */
@media (min-width: 768px) and (max-width: 1040px) {
    .sk-wrap .sk-hero__header { padding: calc(var(--nav-h, 88px) + 40px) 0 28px; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 24px; }
    .sk-wrap .sk-vision__media {
        grid-column: 1 / -1; justify-self: start;
        height: min(34svh, 320px);
    }
    .sk-wrap .sk-pcard { flex: 0 0 48%; width: 48%; }
    .sk-wrap .sk-gallery__item { height: min(56svh, 520px); max-width: 48.5%; }
}

/* Ponsel (<=767) : tetap 1 viewport per section */
@media (max-width: 767px) {
    .sk-wrap .sk-vision,
    .sk-wrap .sk-gallery { max-height: none; height: auto; min-height: 100svh; overflow: visible; }
    .sk-wrap .sk-hero__visual { height: 100svh; }
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr; row-gap: 22px; }
    .sk-wrap .sk-vision__media {
        grid-column: 1; justify-self: start;
        height: min(34svh, 70vw); width: auto;
    }
    .sk-wrap .sk-gallery__grid { grid-template-columns: 1fr; justify-content: center; row-gap: 14px; }
    .sk-wrap .sk-gallery__item { height: min(40svh, 96vw); max-width: 100%; }
    .sk-wrap .sk-pcard { flex: 0 0 84%; width: 84%; }
    .sk-wrap .sk-slider__track { gap: 3%; }
    .sk-wrap .sk-slider__stage { padding-left: 6%; }
}

/* (1) NAVBAR — kembali ke aslinya */
.navbar {
    position: fixed !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.navbar-brand   { flex: 0 0 auto; order: 0; }
.lang-switcher  { flex: 0 0 auto; order: 2; }

@media (min-width: 1041px) {
    .navbar-menu {
        position: absolute !important;
        left: 50% !important;
        top: 45% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 50px;
        margin: 0;
        max-width: none;
        width: auto;
    }
    .navbar-menu li   { flex: 0 0 auto; }
    .navbar-menu li a { white-space: nowrap; }
}

/* (2) SILVER KRIS — scroll ala halaman Technology */
.page-silver-kris .page-wrapper {
    scroll-snap-type: y mandatory !important;
    scroll-padding-top: 0;
    scroll-behavior: auto;
}

.sk-wrap .sk-hero {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.sk-wrap .sk-hero__visual,
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}
.page-silver-kris .site-footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Ponsel: section vision isinya lebih tinggi dari layar — */
@media (max-width: 767px) {
    .sk-wrap .sk-vision {
        height: auto;
        max-height: none;
        min-height: 100svh;
        overflow: visible;
    }
}

/* (1) NAVBAR — jarak menu sesuai Figma */
@media (min-width: 1400px) {
    .navbar-menu { gap: 73px; }
}
@media (min-width: 1041px) and (max-width: 1399px) {
    .navbar-menu { gap: 50px; }
}

@media (min-width: 1041px) {
    .navbar-brand img { width: 115px; height: auto; }
}

/* (2) SILVER KRIS — lebar gambar dihitung dari tingginya */

.sk-wrap .sk-vision__grid {
    grid-template-columns: 30.73% 27.96% 32.15%;
    align-items: start;
}
.sk-wrap .sk-vision__media {
    --sk-vh: min(62svh, 587px);
    aspect-ratio: auto;
    height: var(--sk-vh);
    width: calc(var(--sk-vh) * 407 / 587);
    max-width: 100%;
    max-height: none;
    margin-top: 0;
    justify-self: end;
}
.sk-wrap .sk-vision__media img { width: 100%; height: 100%; object-fit: cover; }

.sk-wrap .sk-gallery__grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
}
.sk-wrap .sk-gallery__item {
    --sk-gh: min(74svh, 728px);
    aspect-ratio: auto;
    flex: 0 0 auto;
    height: var(--sk-gh);
    width: calc(var(--sk-gh) * 601 / 728);
    max-width: 47.47%;
}
.sk-wrap .sk-gallery__item img,
.sk-wrap .sk-gallery__item .reveal-img,
.sk-wrap .sk-gallery__item .reveal-img__inner { width: 100%; height: 100%; }
.sk-wrap .sk-gallery__item img { object-fit: cover; }

@media (min-width: 768px) and (max-width: 1040px) {
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 24px; }
    .sk-wrap .sk-vision__media {
        --sk-vh: min(34svh, 320px);
        grid-column: 1 / -1; justify-self: start;
    }
    .sk-wrap .sk-gallery__item { --sk-gh: min(56svh, 520px); max-width: 48.5%; }
}

@media (max-width: 767px) {
    .sk-wrap .sk-vision__grid { grid-template-columns: 1fr; row-gap: 22px; }
    .sk-wrap .sk-vision__media {
        --sk-vh: min(34svh, 70vw);
        grid-column: 1; justify-self: start;
    }
    .sk-wrap .sk-gallery__grid { flex-direction: column; align-items: center; gap: 14px; }
    .sk-wrap .sk-gallery__item { --sk-gh: min(46svh, 110vw); max-width: 100%; }
}

/* (3) BERITA — hilangkan garis bawah pada tautan isi artikel */
.article-body a,
.article-body a:hover,
.article-body a:visited,
.article-body a:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0;
}
.article-body a:hover { color: #3aabab; }

/* (1) Kembalikan geometri wadah parallax */
.sk-wrap .sk-gallery__item .reveal-img,
.sk-wrap .sk-vision__media .reveal-img,
.sk-wrap .sk-hero__visual .reveal-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.sk-wrap .sk-gallery__item .reveal-img__inner,
.sk-wrap .sk-vision__media .reveal-img__inner,
.sk-wrap .sk-hero__visual .reveal-img__inner {
    position: absolute;
    left: 0;
    top: -22%;
    width: 100%;
    height: 144%;            /* ruang gerak parallax — JANGAN 100% */
}
.sk-wrap .sk-gallery__item .reveal-img__inner img,
.sk-wrap .sk-vision__media .reveal-img__inner img,
.sk-wrap .sk-hero__visual .reveal-img__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bingkai harus jadi acuan posisi absolut anaknya */
.sk-wrap .sk-gallery__item,
.sk-wrap .sk-vision__media,
.sk-wrap .sk-hero__visual {
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* (2) Perpindahan section LANGSUNG, bukan meluncur */
.page-silver-kris .page-wrapper {
    scroll-behavior: auto !important;   /* tanpa animasi smooth */
    scroll-snap-type: y mandatory !important;
    overscroll-behavior-y: contain;
}
.sk-wrap .sk-hero,
.sk-wrap .sk-hero__visual,
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery,
.page-silver-kris .site-footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* (3) Kategori di sidebar berita — tanpa garis bawah & kotak */
.news-side__cat,
.news-side__cat:hover,
.news-side__cat:focus,
.news-side__cat:active,
.news-side__cat:visited {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0;
}
.news-side__cat:focus { outline: none; }
.news-side__cat:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.news-side__cat:hover { color: #3aabab; }

/* SILVER KRIS: BERHENTI MEMAKSA 1 SECTION = 1 LAYAR */

/* cabut semua pemaksaan tinggi & snap */
.page-silver-kris .page-wrapper {
    scroll-snap-type: none !important;
    scroll-behavior: smooth;
}
.sk-wrap .sk-hero,
.sk-wrap .sk-hero__visual,
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery,
.page-silver-kris .site-footer {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

.sk-wrap .sk-hero,
.sk-wrap .sk-vision,
.sk-wrap .sk-gallery {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

/* DESKTOP (>=1041px) — proporsi Figma */
@media (min-width: 1041px) {

    /* Hero: header 337px + gambar 1440x808 */
    .sk-wrap .sk-hero__header {
        display: grid;
        grid-template-columns: 1fr 38.07%;
        column-gap: 4%;
        padding: 110px 0 42px;
    }
    .sk-wrap .sk-hero__title { font-size: 40px; line-height: 47px; }
    .sk-wrap .sk-hero__intro { font-size: 12px; line-height: 25px; }
    .sk-wrap .sk-hero__visual {
        position: relative;
        aspect-ratio: 1440 / 808;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    /* Vision: gambar 407x587, section 823px */
    .sk-vision { padding: 116px 0 118px; }
    .sk-wrap .sk-vision__brand { margin-bottom: 45px; }
    .sk-wrap .sk-vision__brand img { width: auto; height: 40px; }
    .sk-wrap .sk-vision__grid {
        display: grid;
        grid-template-columns: 30.73% 27.96% 32.15%;
        justify-content: space-between;
        align-items: start;
        row-gap: 40px;
    }
    .sk-wrap .sk-vision__media {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 407 / 587;
        max-width: none;
        max-height: none;
        margin-top: -85px;
        justify-self: end;
        overflow: hidden;
    }

    /* Slider: 1440x808, kartu 516x252 mentok kiri */
    .sk-slider {
        aspect-ratio: 1440 / 808;
        height: auto;
        min-height: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 0 32px;
        overflow: hidden;
    }
    .sk-wrap .sk-slider__stage { padding-left: 0; margin-top: auto; }
    .sk-wrap .sk-slider__track { gap: 1.18%; }
    .sk-wrap .sk-pcard { flex: 0 0 35.83%; width: 35.83%; }
    .sk-wrap .sk-slider__controls { margin-top: 26px; padding: 0 26px; }

    /* Galeri: dua bingkai 601x728 */
    .sk-gallery { padding: 115px 0; }
    .sk-wrap .sk-gallery__grid {
        display: grid;
        grid-template-columns: repeat(2, 47.47%);
        justify-content: space-between;
        align-items: start;
        gap: 0;
    }
    .sk-wrap .sk-gallery__item {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 601 / 728;
        max-width: none;
        overflow: hidden;
    }
}

/* iPAD PRO 13 & iPAD MINI (768–1040px) */
@media (min-width: 768px) and (max-width: 1040px) {
    .sk-wrap .sk-hero__header {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 18px;
        padding: calc(var(--nav-h, 88px) + 44px) 0 30px;
    }
    .sk-wrap .sk-hero__title { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2; }
    .sk-wrap .sk-hero__intro { font-size: 12px; line-height: 24px; }
    .sk-wrap .sk-hero__visual {
        position: relative;
        aspect-ratio: 4 / 3;
        height: auto; min-height: 0; max-height: none;
        overflow: hidden;
    }
    .sk-wrap .sk-hero__stats {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: 10px; width: 92%; bottom: 9%;
    }
    .sk-wrap .sk-stat__value { font-size: clamp(22px, 3vw, 30px); line-height: 1.08; }
    .sk-wrap .sk-stat__label { font-size: 11px; line-height: 16px; }

    .sk-vision { padding: 72px 0; }
    .sk-wrap .sk-vision__brand { margin-bottom: 28px; }
    .sk-wrap .sk-vision__brand img { width: auto; height: 32px; }
    .sk-wrap .sk-vision__grid {
        display: grid; grid-template-columns: 1fr 1fr;
        column-gap: 32px; row-gap: 26px; align-items: start;
    }
    .sk-wrap .sk-vision__media {
        position: relative;
        grid-column: 1 / -1;
        width: 100%; height: auto;
        aspect-ratio: 16 / 9;
        margin-top: 0; justify-self: stretch;
        max-width: none; max-height: none;
        overflow: hidden;
    }

    .sk-slider {
        aspect-ratio: 3 / 4;
        height: auto; min-height: 0; max-height: none;
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 0 0 28px; overflow: hidden;
    }
    .sk-wrap .sk-slider__stage { padding-left: 0; margin-top: auto; }
    .sk-wrap .sk-slider__track { gap: 1.5%; }
    .sk-wrap .sk-pcard { flex: 0 0 46%; width: 46%; min-height: 0; padding: 22px 26px; }
    .sk-wrap .sk-pcard__num   { font-size: 18px; line-height: 22px; margin: 0 0 4px; }
    .sk-wrap .sk-pcard__title { font-size: 24px; line-height: 28px; margin: 0 0 10px 14px; }
    .sk-wrap .sk-pcard__desc  { font-size: 12px; line-height: 22px; letter-spacing: .6px; margin: 0 0 0 14px; }
    .sk-wrap .sk-slider__controls { margin-top: 20px; padding: 0 22px; }

    .sk-gallery { padding: 72px 0; }
    .sk-wrap .sk-gallery__grid {
        display: grid; grid-template-columns: repeat(2, 48.5%);
        justify-content: space-between; gap: 0;
    }
    .sk-wrap .sk-gallery__item {
        position: relative;
        width: 100%; height: auto;
        aspect-ratio: 601 / 728;
        max-width: none; overflow: hidden;
    }
}

/* PONSEL (<=767px) */
@media (max-width: 767px) {
    .sk-wrap .container { width: 88%; }

    .sk-wrap .sk-hero__header {
        display: grid; grid-template-columns: 1fr; row-gap: 14px;
        padding: calc(var(--nav-h, 64px) + 26px) 0 20px;
    }
    .sk-wrap .sk-hero__title { font-size: clamp(24px, 7vw, 32px); line-height: 1.24; }
    .sk-wrap .sk-hero__intro { font-size: 12px; line-height: 23px; }
    .sk-wrap .sk-hero__visual {
        position: relative;
        aspect-ratio: 3 / 4;
        height: auto; min-height: 0; max-height: none;
        overflow: hidden;
    }
    .sk-wrap .sk-hero__stats {
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: 10px 14px; width: 88%; bottom: 11%;
    }
    .sk-wrap .sk-stat__value { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.1; }
    .sk-wrap .sk-stat__label { font-size: 11px; line-height: 16px; }
    .sk-wrap .sk-hero__scroll { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

    .sk-vision { padding: 52px 0; }
    .sk-wrap .sk-vision__brand { margin-bottom: 22px; }
    .sk-wrap .sk-vision__brand img { width: auto; height: 28px; }
    .sk-wrap .sk-vision__grid { display: grid; grid-template-columns: 1fr; row-gap: 24px; }
    .sk-wrap .sk-vision__media {
        position: relative;
        grid-column: 1; width: 100%; height: auto;
        aspect-ratio: 4 / 3;
        margin-top: 0; justify-self: stretch;
        max-width: none; max-height: none; overflow: hidden;
    }

    .sk-slider {
        aspect-ratio: 9 / 16;
        height: auto; min-height: 0; max-height: none;
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 0 0 calc(22px + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }
    .sk-wrap .sk-slider__stage { padding-left: 6%; margin-top: auto; }
    .sk-wrap .sk-slider__track { gap: 3%; }
    .sk-wrap .sk-pcard { flex: 0 0 84%; width: 84%; min-height: 0; padding: 18px 20px; }
    .sk-wrap .sk-pcard__num   { font-size: 16px; line-height: 20px; margin: 0 0 4px; }
    .sk-wrap .sk-pcard__title { font-size: 21px; line-height: 24px; margin: 0 0 8px 11px; }
    .sk-wrap .sk-pcard__desc  { font-size: 12px; line-height: 21px; letter-spacing: .5px; margin: 0 0 0 11px; }
    .sk-wrap .sk-slider__controls { margin-top: 16px; padding: 0 6%; }

    .sk-gallery { padding: 52px 0; }
    .sk-wrap .sk-gallery__grid { display: grid; grid-template-columns: 1fr; row-gap: 14px; }
    .sk-wrap .sk-gallery__item {
        position: relative;
        width: 100%; height: auto;
        aspect-ratio: 601 / 728;
        max-width: none; overflow: hidden;
    }
}

/* Feedback tambahan (Home, About Us, Product, */

.page-home .cap-stats,
.cap-stats {
    justify-content: center;
    align-items: flex-end;
    gap: clamp(48px, 7vw, 104px);
}
.page-home .cap-stat,
.cap-stat {
    flex: 0 0 auto;
    min-width: 0;
    text-align: left;
}
@media (max-width: 900px) {
    .page-home .cap-stats, .cap-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 32px;
    }
    .page-home .cap-stat, .cap-stat { text-align: center; }
}

/* (2) ABOUT US — hanya tong 1–5 */
.tong--6,
.tong--7,
.tong--8,
.tong--9,
.tong--10 { display: none !important; }

.about-us-tongs__stage { height: 440px; }

.tong--1 { bottom: 22%; }
.tong--2 { bottom: 30%; }
.tong--3 { bottom: 21%; }
.tong--4 { bottom: 22%; }
.tong--5 { bottom: 30%; }

@media (max-width: 900px) {
    .about-us-tongs__stage { height: 300px; }
    .tong--1 { bottom: 20%; }
    .tong--2 { bottom: 28%; }
    .tong--3 { bottom: 19%; }
    .tong--4 { bottom: 20%; }
    .tong--5 { bottom: 28%; }
}

/* (2b) Tong 4 & 5: berhenti di titik senggolan, tidak mundur */
@keyframes tongGlideInHold {
    0%   { transform: translateX(var(--from)); opacity: 0;
           animation-timing-function: cubic-bezier(.14,.60,.28,.98); }
    6%   { transform: translateX(calc(var(--from) * .74)); opacity: 1;
           animation-timing-function: cubic-bezier(.14,.60,.28,.98); }
    100% { transform: translateX(var(--bump)); opacity: 1; }   /* DIAM di sini */
}
.about-us-tongs__stage.is-playing .tong--4 {
    animation: tongGlideInHold 2.4s cubic-bezier(.24,.70,.32,1) both;
    animation-delay: 2.58s;
}
.about-us-tongs__stage.is-playing .tong--5 {
    animation: tongGlideInHold 2.1s cubic-bezier(.24,.70,.32,1) both;
    animation-delay: 2.88s;
}

/* (3) PRODUCT — pop-up tidak full screen, lebih ke tengah & rapat */
.product-modal { padding: 24px; align-items: center; justify-content: center; }
.product-modal__panel {
    width: min(880px, 88vw);
    max-height: 88vh;
    height: auto;
    margin: 0 auto;
    padding: 32px 36px;
    overflow: visible;
}
.product-modal__grid { gap: 14px 28px; }
a.product-modal__media img { max-height: 46vh; }
.product-modal__swatch img { width: 124px; max-width: 124px; }
.product-modal__footer { margin-top: 14px; padding-top: 12px; }

@media (min-width: 901px) and (max-width: 1240px) {
    .product-modal__panel { width: min(780px, 90vw); padding: 28px 30px; }
}
@media (max-width: 900px) {
    .product-modal { padding: 16px; }
    .product-modal__panel {
        width: min(520px, 92vw);
        max-height: 90vh;
        overflow-y: auto;
        padding: 26px 20px;
    }
}

/* (4) TECHNOLOGY — jarak kartu ke KIRI dan ke BAWAH disamakan */
@media (min-width: 1041px) {
    .page-technology .pos-bottom .tech-panel { bottom: 60px; }
    .page-technology .tech-chevron { bottom: 18px; }
}

/* (5) CAREER — judul lowongan condong ke ATAS, bukan di tengah */
.career-item__row { align-items: start; }
.career-item__title,
.career-item__loc,
.career-item__level { align-self: start; }
.career-item__loc,
.career-item__level { padding-top: 6px; }
.career-item__chev { align-self: start; margin-top: 4px; }

/* (6) SILVER KRIS — gambar hero + statistik muat 1 viewport */
@media (min-width: 1041px) {
    .sk-wrap .sk-hero__visual {
        max-height: 100svh;
        overflow: hidden;
    }
    .sk-wrap .sk-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
}

/* Silver Kris: perpindahan section dibuat KAKU */
.page-silver-kris .page-wrapper {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior-y: contain;
}

/* Silver Kris: 1 layar penuh HANYA di desktop */

@media (min-width: 1041px) {

    /* Gambar hero mengisi penuh 1 layar (1440x900 → 900px, */
    .sk-wrap .sk-hero__visual {
        min-height: 100svh;
        height: auto;
        max-height: none;
        position: relative;
        overflow: hidden;
    }
    .sk-wrap .sk-hero__visual .reveal-img { position: absolute; inset: 0; overflow: hidden; }
    .sk-wrap .sk-hero__visual img { width: 100%; height: 100%; object-fit: cover; }

    /* Kanvas putih (vision) mengisi penuh 1 layar. */
    .sk-wrap .sk-vision {
        min-height: 100svh;
        height: auto;
        max-height: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: visible;
    }
    .sk-wrap .sk-vision > .container {
        margin-block: auto;
        width: 87.92%;
        max-width: 1266px;
    }
}

/* iPad Mini, iPad Pro 13, ponsel: biarkan mengalir apa adanya */
@media (max-width: 1040px) {
    .sk-wrap .sk-hero__visual,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .sk-wrap .sk-vision { display: block; }
    .sk-wrap .sk-vision > .container { margin-block: 0; }
}

/* dua perbaikan desktop + penegasan mode tablet/ponsel */

@media (min-width: 1041px) {
    .sk-wrap .sk-hero__visual {
        min-height: 100svh;
        max-height: 100svh;          /* kunci: jangan melebihi 1 layar */
        height: 100svh;
        position: relative;
        overflow: hidden;
    }
    .sk-wrap .sk-hero__visual .reveal-img { position: absolute; inset: 0; overflow: hidden; }
    .sk-wrap .sk-hero__visual img { width: 100%; height: 100%; object-fit: cover; }

    /* statistik dijaga tetap di dalam layar */
    .sk-wrap .sk-hero__stats  { bottom: 11%; }
    .sk-wrap .sk-hero__scroll { bottom: 16px; }
}

/* iPad Mini / iPad Pro 13 / ponsel: scroll biasa */
@media (max-width: 1040px) {
    .page-silver-kris .page-wrapper {
        scroll-snap-type: none !important;
        scroll-behavior: smooth;
        overscroll-behavior-y: auto;
    }
    .sk-wrap .sk-hero,
    .sk-wrap .sk-hero__visual,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: visible;
        scroll-snap-align: none;
    }
    .sk-wrap .sk-vision { display: block; }
    .sk-wrap .sk-vision > .container { margin-block: 0; }

    /* gambar hero tetap proporsional, tidak dipaksa setinggi layar */
    .sk-wrap .sk-hero__visual { position: relative; overflow: hidden; }
}

/* kunci semua bingkai gambar, semua breakpoint */
.sk-wrap .sk-hero__visual,
.sk-wrap .sk-vision__media,
.sk-wrap .sk-gallery__item,
.sk-wrap .sk-slider {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.sk-wrap .sk-hero__visual  > .reveal-img,
.sk-wrap .sk-vision__media > .reveal-img,
.sk-wrap .sk-gallery__item > .reveal-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* section tidak boleh tumpang-tindih */
.sk-wrap { position: relative; }
.sk-wrap .sk-hero,
.sk-wrap .sk-vision,
.sk-wrap .sk-slider,
.sk-wrap .sk-gallery {
    position: relative;
    z-index: 0;
}

/* tablet & ponsel: aliran normal, tanpa offset negatif */
@media (max-width: 1040px) {
    .sk-wrap .sk-vision__media { margin-top: 0 !important; }
    .sk-wrap .sk-hero,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        min-height: 0;
        height: auto;
        max-height: none;
        display: block;
    }
    .sk-wrap .sk-slider {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .sk-wrap .sk-vision > .container { margin-block: 0; }
}

@media (max-width: 1040px) {
    .page-silver-kris .page-wrapper {
        scroll-behavior: smooth !important;
        overscroll-behavior-y: auto !important;
        scroll-snap-type: none !important;
    }
}

@media (min-width: 1041px) {
    .page-silver-kris .page-wrapper {
        scroll-behavior: auto !important;
    }
}

/* penanda versi + scroll tablet/ponsel */
:root { --sk-rev: 106; }

/* Lenis menggerakkan scrollTop tiap frame. `overscroll-behavior: */
@media (max-width: 1040px) {
    .page-silver-kris .page-wrapper {
        scroll-behavior: auto !important;      /* Lenis butuh ini `auto` */
        overscroll-behavior-y: auto !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: touch;
    }
    .sk-wrap .sk-hero,
    .sk-wrap .sk-hero__visual,
    .sk-wrap .sk-vision,
    .sk-wrap .sk-slider,
    .sk-wrap .sk-gallery {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }
}

/* feedback terakhir */

/* (1) CAREER — judul rapat ke garis atas */
.career-item__row {
    align-items: start;
    padding: 5px 2px 36px;
}
.career-item__title { padding-top: 0; }
.career-item__loc,
.career-item__level { padding-top: 4px; }
.career-item__chev  { margin-top: 2px; }

@media (max-width: 900px) {
    .career-item__row { padding: 14px 2px 28px; }
}

/* (3) HOME — .cap-stats: rata kiri–kanan dalam grid 1266px */
.cap-stats {
    position: absolute;
    bottom: 64px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 87.92%;
    max-width: 1266px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}
.cap-stat {
    flex: 0 0 auto;
    min-width: 0;
    text-align: left;
}

@media (max-width: 900px) {
    .cap-stats {
        width: 88%;
        bottom: 48px;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 18px 24px;
    }
    .cap-stat { flex: 0 0 calc(50% - 12px); text-align: left; }
}

.page-home .cap-stats,
.cap-stats {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;              /* JANGAN translateX(-50%) di sini */
    width: 87.92%;
    max-width: 1266px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

/* Angka & label dipusatkan SATU SAMA LAIN di dalam tiap statistik. */
.page-home .cap-stat,
.cap-stat {
    flex: 0 0 auto;
    min-width: 0;
    text-align: center;
}
.cap-stat .cap-number,
.cap-stat .cap-label { display: block; text-align: center; }

.cap-stats.reveal        { transform: none !important; }
.cap-stats.reveal.visible { transform: none !important; }

@media (max-width: 900px) {
    .page-home .cap-stats,
    .cap-stats {
        width: 88%;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 18px 24px;
    }
    .page-home .cap-stat,
    .cap-stat { flex: 0 0 calc(50% - 12px); text-align: center; }
}


/* ===== TABEL DI ISI ARTIKEL ===== */
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    overflow-x: auto;
    display: block;
}
.article-body table th,
.article-body table td {
    border: 1px solid #d9dee3;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}
.article-body table th {
    background: #f4f6f8;
    font-weight: 700;
}
.article-body table tr:nth-child(even) td {
    background: #fafbfc;
}
@media (max-width: 640px) {
    .article-body table th,
    .article-body table td { padding: 8px 10px; }
}

/* ================================================================
   REV 107 — HOME MOBILE = FIGMA (≤ 767px)
   Ukuran font, padding, dan margin diambil langsung dari frame
   Figma 390px (diukur piksel per piksel), termasuk menu hamburger
   layar penuh. Blok ini SENGAJA paling akhir agar menimpa revisi lama.

   Acuan gutter Figma:
     • section teks di atas gambar (1,3,5,7) : 18px
     • section 2 (WINDING, latar putih)      : 33px
     • section 4 statistik 18px, judul/desc  : 34px
     • statistik kapasitas                   : 47px
     • footer                                : 18px
   ================================================================ */

/* Elemen baru di navbar, sabuk sertifikasi 2 baris & panah section 7
   HANYA dipakai di mobile — disembunyikan di layar besar. */
.navbar-menu__chev,
.navbar-menu__foot,
.cert-belt-wrapper--mobile,
.news-seemore { display: none; }

@media (min-width: 768px) {
    .page-home #section7 .hero-scroll { display: none; }
}

@media (max-width: 767px) {

    /* ------------------------------------------------------------
       0. DASAR — matikan snap & tinggi 1 layar, halaman mengalir
       ------------------------------------------------------------ */
    .page-home .page-wrapper {
        scroll-snap-type: none !important;
        scroll-padding-top: 0 !important;
    }
    .page-home .section {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .page-home .page-content {
        padding-top: var(--nav-h, 60px);
        /* Urutan Figma versi ponsel: ... berita → SERTIFIKASI → WINDING ICON → CTA */
        display: flex;
        flex-direction: column;
    }
    .page-home .page-content > * { flex: 0 0 auto; }
    .page-home #section1 { order: 1; }
    .page-home #section2 { order: 2; }
    .page-home #section3 { order: 3; }
    .page-home #section4 { order: 4; }
    .page-home #section5 { order: 5; }
    .page-home #section6 { order: 6; }
    .page-home #section8 { order: 7; }
    .page-home #section7 { order: 8; }
    .page-home #section9 { order: 9; }
    .page-home .site-footer { order: 10; }

    /* ------------------------------------------------------------
       1. NAVBAR — hamburger KIRI, logo KANAN, selalu putih
       ------------------------------------------------------------ */
    .navbar {
        height: 60px !important;
        padding: 0 18px !important;
        background-color: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background-image: none !important;
        box-shadow: none !important;
        gap: 12px;
    }
    .navbar .hamburger {
        display: flex !important;
        order: 0 !important;
        margin: 0 !important;
        padding: 6px 2px !important;
        gap: 4px !important;
    }
    .navbar .hamburger span { width: 17px !important; height: 2px !important; background: #333 !important; }
    .navbar .navbar-brand img { height: 22px !important; width: auto !important; }
    .navbar .navbar-brand {
        order: 1 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    .navbar .lang-switcher { display: none !important; }   /* pindah ke dalam menu */

    /* Navbar TIDAK ikut gelap saat di atas gambar (sesuai Figma) */
    .navbar.on-image { background-color: #ffffff !important; }
    .navbar.on-image .hamburger span { background: #333 !important; }
    .navbar .logo-default { display: block !important; }
    .navbar .logo-white,
    .navbar.on-image .logo-white { display: none !important; }
    .navbar.on-image .logo-default { display: block !important; }

    /* ------------------------------------------------------------
       2. MENU HAMBURGER — layar penuh
       ------------------------------------------------------------ */
    .navbar-menu,
    .navbar-menu--portaled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 104px 32px 0 !important;
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        gap: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 100000 !important;
    }
    .navbar-menu.menu-on-image,
    .navbar-menu--portaled.menu-on-image {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
    .navbar-menu--portaled.menu-on-image a,
    .navbar-menu.menu-on-image a { color: #3d3d3d !important; }

    .navbar-menu li {
        width: 100% !important;
        display: block !important;
        border: 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .navbar-menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 17px 24px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 1.6px !important;
        line-height: 20px !important;
        text-transform: uppercase;
        text-align: left !important;
        color: #3d3d3d !important;
    }
    .navbar-menu li a .navbar-menu__chev {
        display: flex !important;
        align-items: center;
        flex: 0 0 auto;
        width: 12px;
        height: 12px;
        color: #9a9a9a;
    }
    .navbar-menu li a .navbar-menu__chev .ui-chevron { width: 12px; height: 8px; }

    .navbar-menu .navbar-menu__foot {
        margin-top: auto !important;
        padding: 40px 24px calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        display: block !important;
        border: 0 !important;
    }
    .navbar-menu .navbar-menu__lang {
        display: flex !important;
        gap: 22px;
        margin-bottom: 26px;
    }
    .navbar-menu .navbar-menu__lang a {
        display: inline-block !important;
        width: auto !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: 1.6px !important;
        color: #6f6f6f !important;
    }
    .navbar-menu .navbar-menu__lang a.active { color: #222 !important; font-weight: 600 !important; }
    .navbar-menu .navbar-menu__copy {
        font-size: 11px;
        letter-spacing: 1.2px;
        color: #3d3d3d;
        margin: 0;
    }

    body.menu-open { overflow: hidden; }
    body.menu-open .navbar {
        z-index: 100001 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.menu-open .navbar-brand { opacity: 0 !important; visibility: hidden !important; }
    body.menu-open .hamburger {
        position: fixed !important;
        top: 32px !important;
        left: 18px !important;
        z-index: 100001 !important;
        padding: 0 !important;
    }

    /* ------------------------------------------------------------
       3. SECTION 1 — HERO   (Figma: tinggi 329, gutter 18)
       ------------------------------------------------------------ */
    /* margin-left var(--edge) dari revisi lama dimatikan supaya
       gutter benar-benar 18px seperti Figma */
    .page-home .hero-content,
    .page-home .hero-content.content-top {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .page-home #section1 {
        min-height: 329px !important;
        height: auto !important;
        display: flex;
        align-items: flex-end;
    }
    .page-home #section1 .hero-content {
        padding: 0 18px 22px !important;
        max-width: 100% !important;
    }
    .page-home #section1 .hero-title {
        font-size: 20px !important;
        font-weight: 500 !important;
        letter-spacing: .1px !important;
        line-height: 28px !important;
        text-transform: none !important;
        margin-bottom: 5px !important;
    }
    .page-home #section1 .hero-desc {
        font-size: 11px !important;
        line-height: 18px !important;
        letter-spacing: .4px;
        max-width: 336px !important;
        padding-right: 0 !important;
    }
    .page-home #section1 .hero-scroll { display: none !important; }

    /* ------------------------------------------------------------
       4. SECTION 2 — WINDING   (Figma: gutter 33, judul 20/26,
          teks 11/20, baris tabel 48, angka 21)
       ------------------------------------------------------------ */
    .page-home #section2,
    .page-home #section4 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }
    .page-home #section2 { background: #fff; }
    /* Slide aktif ikut alur supaya tinggi section mengikuti isi */
    .page-home .section2-slide.active,
    .page-home .product-slide.active {
        position: relative !important;
        inset: auto !important;
        display: block !important;
    }
    .page-home .section2-slide:not(.active),
    .page-home .product-slide:not(.active) { display: none !important; }
    .page-home #section2 .carousel-dots,
    .page-home #section4 .carousel-dots {
        position: static !important;
        transform: none !important;
        align-self: center !important;
        margin: 2px 0 14px !important;
    }
    .page-home .product-seeall-bar {
        position: static !important;
        align-self: flex-end !important;
        margin: -6px 19px 16px 0 !important;
    }
    .page-home .product-seeall { font-size: 11px !important; }

    .page-home .section2-inner {
        padding: 20px 33px 30px !important;
        height: auto !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }
    .page-home .section2-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        gap: 0 !important;
        align-items: stretch !important;
        max-width: 100% !important;
    }
    .page-home .specs-col { display: contents !important; }
    .page-home .machine-col {
        order: 0 !important;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .page-home .machine-col img,
    .page-home .machine-col video {
        max-height: 175px !important;
        max-width: 78% !important;
        width: auto !important;
        object-fit: contain;
        margin-inline: auto;
    }
    .page-home .spec-title {
        order: 1 !important;
        font-size: 19px !important;
        font-weight: 600 !important;
        letter-spacing: .1px !important;
        line-height: 26px !important;
        color: #111 !important;
        margin: 24px 0 6px !important;
    }
    .page-home .spec-desc {
        order: 2 !important;
        font-size: 11px !important;
        line-height: 20px !important;
        text-align: justify !important;
        color: #555 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-right: 0 !important;
    }
    .page-home .spec-table {
        order: 3 !important;
        width: 100% !important;
        margin: 34px 0 0 !important;
        table-layout: fixed !important;
    }
    .page-home .spec-table tr { border-bottom: 1px solid #e0e0e0 !important; }
    .page-home .spec-table td:first-child { width: 64% !important; }
    .page-home .spec-table td {
        padding: 14px 10px !important;
        font-size: 11.5px !important;
        line-height: 18px !important;
        letter-spacing: .2px !important;
        color: #333 !important;
    }
    .page-home .spec-table td:last-child {
        text-align: right !important;
        color: #333 !important;
        white-space: nowrap !important;
    }
    .page-home .bottom-stats {
        order: 4 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 12px !important;
        margin: 24px 0 0 !important;
        padding: 0 10px !important;
    }
    .page-home .bottom-stat { text-align: left !important; }
    .page-home .bottom-stat .bottom-number {
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
        letter-spacing: 0 !important;
        color: #111 !important;
    }
    .page-home .bottom-stat .bottom-label {
        font-size: 11px !important;
        line-height: 15px !important;
        letter-spacing: .2px !important;
        color: #555 !important;
        margin-top: 4px !important;
    }

    /* ------------------------------------------------------------
       5. SECTION 3 & 7 — BAND GAMBAR (DRAWING / WINDING ICON)
          Figma: tinggi 325/320, gutter 18, judul 20/26, teks 11/18
       ------------------------------------------------------------ */
    .page-home #section3,
    .page-home #section7 {
        min-height: 325px !important;
        height: auto !important;
        display: flex;
    }
    .page-home #section3 .hero-content {
        margin-top: auto !important;
        padding: 0 18px 46px !important;
        max-width: 100% !important;
    }
    /* Teks WINDING ICON dipaku ke POJOK KIRI ATAS (elemen ini
       position:absolute dari revisi lama, jadi top/left yang dipakai) */
    .page-home #section7 .hero-content.content-top {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 18px 18px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .page-home #section3 .hero-title,
    .page-home #section7 .hero-title,
    .page-home #section5 .hero-title {
        font-size: 19px !important;
        font-weight: 600 !important;
        letter-spacing: .1px !important;
        line-height: 26px !important;
        margin-bottom: 4px !important;
    }
    .page-home #section3 .hero-desc,
    .page-home #section7 .hero-desc,
    .page-home #section5 .hero-desc {
        font-size: 11px !important;
        line-height: 18px !important;
        letter-spacing: .4px;
        padding-right: 0 !important;
    }
    /* Lebar kolom teks sesuai Figma */
    .page-home #section3 .hero-desc { max-width: 293px !important; }
    .page-home #section7 .hero-desc { max-width: 293px !important; }

    /* Deskripsi dipotong 3 baris + tombol SEE MORE (ditambah lewat JS) */
    .page-home .image-section .hero-desc.is-clamped {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .page-home .image-section.desc-expanded .hero-desc.is-clamped {
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    .page-home .hero-seemore {
        display: inline-block;
        margin-top: 6px;
        padding: 0;
        background: none;
        border: 0;
        font-family: inherit;
        font-size: 11px;
        letter-spacing: 1px;
        color: #ffffff;
        cursor: pointer;
    }

    /* Panah bawah — Figma lebar 16px, 22px dari dasar band */
    .page-home .hero-scroll {
        bottom: 17px !important;
        animation: none !important;
    }
    .page-home .hero-scroll,
    .page-home .hero-scroll .ui-chevron { width: 17px !important; height: 17px !important; }
    .page-home .hero-scroll .scroll-arrow-svg { width: 17px !important; height: 17px !important; }

    /* ------------------------------------------------------------
       6. SECTION 4 — PRODUK
          Figma: statistik gutter 18 (kolom 86px), swatch 67x62 di
          kanan (margin 19), judul/desc gutter 34, judul 20/24
       ------------------------------------------------------------ */
    .page-home .product-inner,
    .page-home .product-inner--3col {
        display: grid !important;
        grid-template-columns: 86px 1fr 67px !important;
        grid-auto-rows: min-content;
        align-items: start !important;
        gap: 0 8px !important;
        padding: 46px 19px 30px !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .page-home .product-stats { display: contents !important; }
    .page-home .product-stat {
        grid-column: 1 !important;
        justify-self: start;
        margin-bottom: 21px;
    }
    .page-home .product-stat:nth-of-type(1) { grid-row: 1 !important; }
    .page-home .product-stat:nth-of-type(2) { grid-row: 2 !important; }
    .page-home .product-stat:nth-of-type(3) { grid-row: 3 !important; }
    .page-home .product-stat__value {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
        color: #111 !important;
    }
    .page-home .product-stat__label {
        font-size: 11px !important;
        line-height: 13px !important;
        letter-spacing: .2px !important;
        color: #555 !important;
        margin-top: 2px !important;
    }
    .page-home .product-cone {
        grid-column: 2 !important;
        grid-row: 1 / span 3 !important;
        order: 0 !important;
        display: flex !important;
        align-items: flex-start;
        justify-content: center;
        overflow: visible !important;
        min-width: 0;
    }
    .page-home .product-cone img {
        max-height: 210px !important;
        max-width: 100% !important;
        width: auto !important;
        object-fit: contain;
        margin-inline: auto;
    }
    .page-home .product-swatch {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 67px !important;
        height: 62px !important;
        margin: 0 !important;
        align-self: start !important;
        justify-self: end !important;
    }
    .page-home .product-swatch img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover;
        margin: 0 !important;
    }
    .page-home .product-inner--3col .product-left,
    .page-home .product-inner .product-left {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        max-width: 100% !important;
        margin-top: 46px;
        padding: 0 15px !important;      /* 19 + 15 = gutter 34 sesuai Figma */
    }
    .page-home .product-title {
        font-size: 19px !important;
        font-weight: 600 !important;
        letter-spacing: .1px !important;
        line-height: 24px !important;
        color: #111 !important;
        margin: 0 0 8px !important;
        text-align: left !important;
    }
    .page-home .product-desc {
        font-size: 11px !important;
        line-height: 20px !important;
        text-align: justify !important;
        color: #555 !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    .page-home .product-extra-specs {
        width: 100% !important;
        margin-top: 22px !important;
        border-collapse: collapse;
        table-layout: fixed !important;
    }
    .page-home .product-extra-specs tr { border-bottom: 1px solid #e0e0e0 !important; }
    .page-home .product-extra-specs td:first-child { width: 58% !important; }
    .page-home .product-extra-specs td {
        padding: 14px 10px !important;
        font-size: 11.5px !important;
        line-height: 18px !important;
        letter-spacing: .2px !important;
        color: #333 !important;
    }
    .page-home .product-extra-specs td:last-child {
        text-align: right !important;
        white-space: nowrap !important;
    }
    .page-home #section4 .carousel-dots { bottom: auto !important; }

    /* ------------------------------------------------------------
       7. SECTION 5 — KAPASITAS KAMI
          Figma: tinggi 320, judul 20 (gutter 18), desc lebar 225,
          statistik gutter 47, jarak baris 51
       ------------------------------------------------------------ */
    .page-home #section5 {
        min-height: 320px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 31px !important;
        position: relative;
    }
    .page-home .cap-content {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 25px 18px 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .page-home .cap-content .hero-desc { max-width: 248px !important; }
    .page-home .cap-stats,
    .page-home #section5 .cap-stats {
        position: static !important;
        margin: auto 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: auto auto !important;
        justify-content: space-between !important;
        gap: 14px 16px !important;
        padding: 18px 47px 0 !important;
        transform: none !important;
    }
    .page-home .cap-stat {
        flex: 0 0 auto !important;
        min-width: 0;
        text-align: left !important;
    }
    .page-home .cap-stat .cap-number,
    .page-home .cap-stat .cap-label { text-align: left !important; }
    .page-home .cap-number {
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
        letter-spacing: 0 !important;
    }
    .page-home .cap-label {
        font-size: 11px !important;
        line-height: 15px !important;
        letter-spacing: .2px !important;
        margin-top: 0 !important;
    }

    /* ------------------------------------------------------------
       8. SECTION 6 — BERITA + NEWSLETTER
          Figma: kartu 172x174 jarak 5, judul 12/13, newsletter 11/14
       ------------------------------------------------------------ */
    .page-home #section6 {
        padding: 18px 0 20px !important;
        background: #fff;
    }
    .page-home .news-area { padding: 0 !important; }
    .page-home .news-track-container {
        padding: 0 !important;
        overflow: hidden;
    }
    .page-home .news-track { gap: 5px !important; }
    .page-home .news-card { flex: 0 0 172px !important; max-width: 172px; }

    .page-home .news-img-placeholder {
        aspect-ratio: 172 / 174 !important;
        border-radius: 0 !important;
        background: #d9d9d9 !important;
        overflow: hidden;
    }
    /* Gambar mengisi PENUH kartu (tanpa blok abu-abu) */
    .page-home .news-img-placeholder img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Gradasi tipis supaya judul tetap terbaca di atas gambar */
    .page-home .news-img-placeholder::after {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(to top,
            rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,0) 72%) !important;
    }
    .page-home .news-body {
        position: absolute !important;
        left: 0; right: 0; bottom: 0;
        top: auto !important;
        z-index: 2 !important;
        background: transparent !important;
        padding: 0 12px 12px !important;
        gap: 4px !important;
        justify-content: flex-end !important;
    }
    .page-home .news-title {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 13.5px !important;
        letter-spacing: 0 !important;
        color: #ffffff !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Cuplikan diganti "See more..." */
    .page-home .news-excerpt { display: none !important; }
    .page-home .news-seemore {
        display: block !important;
        font-size: 11px !important;
        line-height: 16px !important;
        letter-spacing: .4px !important;
        color: rgba(255,255,255,.88) !important;
    }

    .page-home .news-dots-wrapper {
        padding: 14px 14px 0 !important;
        gap: 10px !important;
    }
    .page-home .news-arrow,
    .page-home .news-arrow .ui-chevron {
        width: 13px !important;
        height: 17px !important;
        color: #bdbdbd !important;
    }

    .page-home .newsletter-area {
        padding: 8px 24px 0 !important;
        gap: 13px !important;
        align-items: center !important;
    }
    .page-home .newsletter-text {
        text-align: center !important;
        font-size: 11px !important;
        line-height: 14px !important;
        letter-spacing: .8px !important;
        color: #333 !important;
        max-width: 320px !important;
    }
    .page-home .newsletter-form {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    .page-home .newsletter-input {
        flex: 0 1 165px !important;
        width: 165px !important;
        padding: 0 16px !important;
        font-size: 11px !important;
        line-height: 28px !important;
        letter-spacing: .8px !important;
        background: #f1f1f1 !important;
        border: 1px solid #f1f1f1 !important;
        border-radius: 720px !important;
    }
    .page-home .newsletter-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 18px !important;
        font-size: 11px !important;
        line-height: 28px !important;
        letter-spacing: .6px !important;
        background: #555555 !important;
        border-color: #555555 !important;
        border-radius: 720px !important;
    }

    /* ------------------------------------------------------------
       9. SECTION 8 — CERTIFICATIONS (2 baris, judul 14px)
       ------------------------------------------------------------ */
    .page-home #section8 {
        padding: 26px 0 34px !important;
        display: block !important;
    }
    .page-home .s8-certs {
        padding: 0 !important;
        display: block !important;
        height: auto !important;
    }
    .page-home .s8-cert-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: .6px !important;
        text-align: center;
        margin: 0 !important;
    }
    .page-home .cert-belt-wrapper--mobile { margin: 27px 0 0 !important; padding: 0 !important; }
    .page-home .cert-belt-wrapper--desktop { display: none !important; }
    .page-home .cert-belt-wrapper--mobile  { display: block !important; }
    .page-home .cert-belt-wrapper--mobile .cert-belt-track {
        align-items: center;
        animation-duration: 26s;
    }
    .page-home .cert-belt-wrapper--mobile .cert-belt-track + .cert-belt-track {
        margin-top: 27px;
        animation-duration: 32s;
    }
    .page-home .cert-belt-wrapper--mobile .cert-logo-item {
        margin: 0 19px !important;
        height: 28px;
    }
    .page-home .cert-belt-wrapper--mobile .cert-logo-item img {
        max-height: 28px !important;
        filter: grayscale(100%) opacity(.62);
    }

    /* ------------------------------------------------------------
       10. SECTION 9 — FACTORY EXPERIENCE (Figma: tinggi 313)
       ------------------------------------------------------------ */
    .page-home #section9 {
        min-height: 313px !important;
        height: auto !important;
    }
    .page-home .s8-cta-content {
        max-width: 100% !important;
        padding: 0 32px !important;
        text-align: center;
    }
    .page-home .s8-line1 {
        font-size: 19px !important;
        line-height: 26px !important;
        letter-spacing: .3px !important;
    }
    .page-home .s8-line2 {
        font-size: 24px !important;
        line-height: 32px !important;
        margin-bottom: 14px !important;
    }
    .page-home .s8-desc {
        font-size: 11px !important;
        line-height: 19px !important;
        letter-spacing: .4px !important;
    }
    .page-home .s8-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 57px !important;
        height: 17px !important;
        min-width: 0 !important;
        margin-top: 20px !important;
        padding: 0 !important;
        font-size: 8px !important;
        line-height: 17px !important;
        letter-spacing: .6px !important;
        border-radius: 720px !important;
    }

    /* ------------------------------------------------------------
       11. FOOTER — Figma: logo 30px (x18), kolom 130 & 289,
           jarak baris 25, tautan 12px, copyright 10px
       ------------------------------------------------------------ */
    .site-footer {
        min-height: 0 !important;
        background: #ebeaea !important;
    }
    .site-footer .footer-nav-col li a { color: #2f2f2f !important; }
    .site-footer .footer-nav-col li a:hover { color: #3aabab !important; }
    .site-footer .footer-bottom p { color: #3d3d3d !important; }
    .site-footer .footer-main {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 35px 18px 0 !important;
        gap: 0 !important;
    }
    .site-footer .footer-brand {
        flex: 0 0 112px !important;      /* logo 30px + jarak ke kolom 1 (x=130) */
        max-width: none !important;
        margin: 0 !important;
    }
    .site-footer .footer-logo img { width: 30px !important; height: auto !important; }
    .site-footer .footer-nav {
        display: grid !important;
        grid-template-rows: repeat(5, auto) !important;
        grid-auto-flow: column !important;
        column-gap: 73px !important;     /* kolom 2 mulai x≈289 */
        row-gap: 13px !important;        /* 12 + 13 = jarak baris 25 */
        margin: 14px 0 0 !important;
        flex-wrap: nowrap !important;
    }
    .site-footer .footer-nav-col { display: contents !important; }
    .site-footer .footer-nav-col li {
        line-height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .site-footer .footer-nav-col li a {
        display: inline-block !important;
        font-size: 12px !important;
        line-height: 12px !important;
        letter-spacing: .2px !important;
    }
    .site-footer .footer-bottom {
        padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .site-footer .footer-bottom p {
        text-align: left !important;
        font-size: 10px !important;
        letter-spacing: 1px !important;
    }
}


/* ================================================================
   REV 108 — ABOUT US MOBILE = FIGMA (≤ 767px)
   Ukuran diambil dari frame Figma 390px (diukur piksel per piksel).

   Acuan gutter:
     • hero, foto, galeri : 18px
     • teks (label, paragraf, judul fitur) : 33px
   ================================================================ */

@media (max-width: 767px) {

    /* ------------------------------------------------------------
       1. HERO — tinggi 322px, teks menempel ke bawah
       ------------------------------------------------------------ */
    .page-about-us .about-us-hero {
        min-height: 322px !important;
        height: 322px !important;
        align-items: flex-end !important;
    }
    .page-about-us .about-us-hero__content {
        padding: 0 18px 20px !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .page-about-us .about-us-hero__title {
        font-size: 21px !important;
        font-weight: 500 !important;
        line-height: 22px !important;
        letter-spacing: 0 !important;
        max-width: 200px !important;
        margin: 0 0 15px !important;
        color: #111111 !important;
    }
    .page-about-us .about-us-hero__people {
        display: grid !important;
        grid-template-columns: 136px auto !important;   /* kolom 2 mulai x=154 */
        gap: 0 !important;
        margin: 0 !important;
    }
    .page-about-us .about-us-hero__person { gap: 0 !important; }
    .page-about-us .about-us-hero__role {
        font-size: 11px !important;
        line-height: 21px !important;
        letter-spacing: .2px !important;
        color: #3a3a3a !important;
        text-transform: none !important;
    }
    .page-about-us .about-us-hero__name {
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: 400 !important;
        letter-spacing: .2px !important;
        color: #111111 !important;
    }

    /* ------------------------------------------------------------
       2. DIRECTOR'S NOTES
       Urutan Figma: foto → label → paragraf → kutipan (tengah)
       ------------------------------------------------------------ */
    /* .container di halaman ini memakai content-box + margin negatif
       dari revisi lama → dinormalkan supaya gutter benar-benar 18px */
    .page-about-us .about-us-notes.container,
    .page-about-us .about-us-features.container,
    .page-about-us .about-us-gallery.container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Satu grid untuk seluruh section: baris 1 = foto (kiri) + kutipan
       (kanan), baris 2 = Director's Notes, baris 3 = kutipan kecil. */
    .page-about-us .about-us-notes,
    .page-about-us .about-us-notes.container {
        display: grid !important;
        grid-template-columns: 135px 1fr !important;
        column-gap: 22px !important;
        row-gap: 0 !important;
        align-items: start !important;
        padding: 33px 18px 0 !important;
    }
    .page-about-us .about-us-notes__grid { display: contents !important; }

    /* Kutipan besar: di kanan foto */
    .page-about-us .about-us-notes__quote {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        max-width: 100% !important;
        font-size: 20px !important;
        line-height: 25px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        color: #111111 !important;
    }

    .page-about-us .about-us-notes__grid > .about-us-notes__photo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 135px !important;
        height: 151px !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    .page-about-us .about-us-notes__grid > .about-us-notes__photo::before { content: none !important; }

    .page-about-us .about-us-notes__text {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin-top: 30px !important;
        padding: 0 15px !important;          /* 18 + 15 = gutter 33 */
    }
    .page-about-us .about-us-notes__label {
        font-size: 14px !important;
        line-height: 18px !important;
        font-weight: 700 !important;
        letter-spacing: .3px !important;
        margin: 0 0 10px !important;
        color: #111111 !important;
    }
    .page-about-us .about-us-notes__text p {
        font-size: 11px !important;
        line-height: 20px !important;
        letter-spacing: .2px !important;
        text-align: justify !important;
        color: #555 !important;
        margin: 0 0 14px !important;
    }
    .page-about-us .about-us-notes__text p:last-child { margin-bottom: 0 !important; }

    /* Kutipan kecil: rata tengah, di bawah paragraf */
    .page-about-us .about-us-notes__side {
        display: contents !important;
    }
    .page-about-us .about-us-notes__sidequote {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        margin: 96px auto 0 !important;
        max-width: 302px !important;
        font-size: 20px !important;
        line-height: 25px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        color: #111111 !important;
    }
    /* Foto kedua tidak ada di Figma versi ponsel */
    .page-about-us .about-us-notes__side .about-us-notes__photo { display: none !important; }

    /* ------------------------------------------------------------
       3. FITUR — ikon di TENGAH, judul & teks rata kiri (x=33)
       ------------------------------------------------------------ */
    .page-about-us .about-us-features,
    .page-about-us .about-us-features.container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        padding: 0 18px !important;
    }
    .page-about-us .about-us-features__col {
        display: contents !important;
        gap: 0 !important;
    }
    .page-about-us .about-us-feature {
        padding: 0 15px !important;          /* 18 + 15 = gutter 33 */
        margin-top: 90px !important;
    }
    /* fitur pertama: jarak dari kutipan */
    .page-about-us .about-us-features__col:nth-of-type(2) .about-us-feature:first-child {
        margin-top: 59px !important;
    }
    .page-about-us .about-us-feature__icon {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 auto 40px !important;
    }
    .page-about-us .about-us-feature__icon img,
    .page-about-us .about-us-feature__icon svg {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
    .page-about-us .about-us-feature h3 {
        font-size: 14px !important;
        line-height: 18px !important;
        font-weight: 700 !important;
        letter-spacing: .3px !important;
        margin: 0 0 10px !important;
        color: #111111 !important;
        text-align: left !important;
    }
    .page-about-us .about-us-feature p {
        font-size: 11px !important;
        line-height: 20px !important;
        letter-spacing: .2px !important;
        text-align: justify !important;
        color: #555 !important;
    }

    /* ------------------------------------------------------------
       4. GALERI — 354 x 290, gutter 18
       ------------------------------------------------------------ */
    .page-about-us .about-us-gallery,
    .page-about-us .about-us-gallery.container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 58px 18px 0 !important;
        margin-top: 0 !important;
        margin-bottom: 50px !important;
    }
    .page-about-us .about-us-gallery__item {
        aspect-ratio: 354 / 290 !important;
        height: auto !important;
        width: 100% !important;
    }

    /* ------------------------------------------------------------
       5. TONG
       ------------------------------------------------------------ */
    .page-about-us .about-us-tongs__stage {
        height: 98px !important;
        margin-bottom: 26px !important;
    }
    .page-about-us .tong-line { top: 41% !important; }
    .page-about-us .tong { width: 57px !important; }
    .page-about-us .tong--1 { left: 12% !important; bottom: 0 !important; }
    .page-about-us .tong--2 { left: 23% !important; bottom: 14% !important; }
    .page-about-us .tong--3 { left: 31% !important; bottom: 0 !important; }
    .page-about-us .tong--4 { left: 66% !important; bottom: 0 !important; }
    .page-about-us .tong--5 { left: 81% !important; bottom: 14% !important; }
}


/* ================================================================
   REV 109 — PRODUK MOBILE = FIGMA (≤ 767px)
   Mencakup: halaman detail produk, grid "SEE ALL", dan popup produk.
   Semua ukuran diukur dari frame Figma 390px.

   Acuan:
     • statistik gutter 18-19, judul/deskripsi gutter 33-34
     • swatch 67 x 62 menempel kanan
     • kartu produk 2 kolom: 170 x 171, gutter 17, jarak 14
   ================================================================ */

@media (max-width: 767px) {

    /* ------------------------------------------------------------
       1. DETAIL PRODUK — statistik kiri | cone tengah | swatch kanan
       ------------------------------------------------------------ */
    .product-detail { padding-top: 80px !important; }
    /* .container di halaman ini memakai content-box + margin negatif dari
       revisi lama → dinormalkan agar gutter benar-benar sesuai Figma */
    .product-detail .container,
    .products-page .container,
    .all-products .container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .product-detail .container { padding: 0 17px !important; }

    .product-detail__grid {
        display: grid !important;
        grid-template-columns: 86px 1fr 67px !important;
        grid-auto-rows: min-content !important;
        gap: 0 8px !important;
        align-items: start !important;
        min-height: 0 !important;
    }
    .product-detail__side { display: contents !important; }

    .product-detail__specs {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 21px !important;
        align-items: flex-start !important;
        text-align: left !important;
        width: auto !important;
    }
    .product-detail__spec-value {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        color: #111 !important;
    }
    .product-detail__spec-label {
        font-size: 11px !important;
        line-height: 13px !important;
        letter-spacing: .2px !important;
        color: #555 !important;
        margin-top: 2px !important;
    }

    .product-detail__media {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    .product-detail__media img {
        max-height: 250px !important;
        max-width: 100% !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    .product-detail__swatch {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 67px !important;
        height: 62px !important;
        margin: 0 !important;
        align-self: start !important;
        justify-self: end !important;
    }
    .product-detail__swatch img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        margin: 0 !important;
    }

    .product-detail__info {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        order: 0 !important;
        margin-top: 46px !important;
        padding: 0 17px !important;        /* 17 + 17 = gutter 34 */
        align-self: start !important;
    }
    .product-detail__title {
        font-size: 19px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        letter-spacing: .1px !important;
        margin: 0 0 8px !important;
        color: #111 !important;
    }
    .product-detail__desc {
        font-size: 11px !important;
        line-height: 20px !important;
        letter-spacing: .2px !important;
        text-align: justify !important;
        color: #555 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Baris pager: angka di tengah, SEE ALL menempel kanan */
    .pd-swiper { position: static !important; }
    .pd-controls {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        grid-template-columns: none !important;
        margin: 44px 0 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    .pd-pager {
        grid-column: auto !important;
        justify-self: auto !important;
        gap: 10px !important;
    }
    .pd-pager__num {
        font-size: 12px !important;
        line-height: 18px !important;
        min-width: 22px !important;
        padding: 0 !important;
    }
    .pd-pager__arrow {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
    .pd-pager__arrow .ui-chevron { height: 11px !important; width: auto !important; }
    .pd-seeall {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        grid-column: auto !important;
        justify-self: auto !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
        padding: 0 !important;
    }
    .pd-seeall .ui-chevron { height: 9px !important; width: auto !important; }

    /* ------------------------------------------------------------
       2. KARTU PRODUK — 2 kolom (detail & halaman produk)
       ------------------------------------------------------------ */
    .product-detail__related { margin-top: 33px !important; padding-bottom: 0 !important; }
    .product-detail__related-grid,
    .products-grid,
    .products-page .products-grid,
    .all-products .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        row-gap: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
        /* batalkan trik full-bleed (position:relative + left) dari revisi lama */
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .product-detail__related-grid > *,
    .products-grid > * {
        grid-column: span 1 !important;
        margin: 0 !important;
        display: block !important;
    }
    .product-detail__related-grid > *:nth-child(n + 5) { display: none !important; }

    .product-card { position: relative !important; }
    .product-detail__related .product-card__media,
    .products-grid .product-card__media,
    .product-card__media {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    .product-card__badge {
        top: 10px !important;
        left: 10px !important;
        font-size: 10px !important;
        line-height: 18px !important;
        padding: 0 9px !important;
    }
    .product-card__ne {
        top: 9px !important;
        right: 11px !important;
        font-size: 10px !important;
        line-height: 18px !important;
    }
    .product-detail__related .product-card__caption,
    .product-card__caption { padding: 8px 9px 7px !important; }
    .product-detail__related .product-card__name,
    .product-card__name {
        font-size: 15px !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
        text-transform: none !important;   /* Figma: "Misty M81", bukan kapital semua */
    }

    /* ------------------------------------------------------------
       3. HALAMAN PRODUK / SEE ALL
       ------------------------------------------------------------ */
    .products-page { padding-top: 100px !important; }
    .products-page .container,
    .all-products .container { padding: 0 17px !important; }
    .products-page__title {
        font-size: 20px !important;
        line-height: 26px !important;
        font-weight: 600 !important;
        letter-spacing: .3px !important;
        margin: 0 0 52px !important;
    }
    .all-products { padding: 18px 0 40px !important; }
    .all-products .products-page__title { margin-bottom: 30px !important; }

    /* ------------------------------------------------------------
       4. POPUP PRODUK
       ------------------------------------------------------------ */
    .product-modal {
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Figma: lapisan latar terang, panel diberi bayangan */
    .product-modal__overlay {
        background: rgba(255, 255, 255, .78) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        backdrop-filter: blur(2px) !important;
    }
    .product-modal__panel {
        width: 314px !important;
        max-width: calc(100vw - 72px) !important;
        height: auto !important;
        max-height: 88vh !important;
        margin: 0 auto !important;
        padding: 26px !important;
        border-radius: 2px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .18) !important;
    }
    .product-modal__close {
        top: 20px !important;
        left: 20px !important;
        width: 26px !important;
        height: 26px !important;
        font-size: 24px !important;
        line-height: 26px !important;
    }
    .product-modal__grid {
        display: grid !important;
        grid-template-columns: 90px 1fr 67px !important;
        grid-template-areas: none !important;
        grid-template-rows: none !important;
        gap: 0 !important;
        row-gap: 0 !important;
        align-items: start !important;
        height: auto !important;
        padding-top: 3px !important;
    }
    .product-modal__specs {
        position: static !important;
        grid-area: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 21px !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin-top: 72px !important;
        order: 0 !important;
        width: auto !important;
    }
    .product-modal__spec-value {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        color: #111 !important;
    }
    .product-modal__spec-label {
        font-size: 11px !important;
        line-height: 13px !important;
        letter-spacing: .2px !important;
        color: #555 !important;
        margin-top: 2px !important;
    }
    a.product-modal__media,
    .product-modal__media {
        grid-area: auto !important;
        grid-column: 2 / -1 !important;
        grid-row: 1 !important;
        order: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: 0 !important;
        height: auto !important;
    }
    a.product-modal__media img,
    .product-modal__media img {
        max-height: 260px !important;
        max-width: 100% !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }
    .product-modal__info {
        display: contents !important;
    }
    .product-modal__title {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        align-self: end !important;
        font-size: 19px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        letter-spacing: .1px !important;
        margin: 40px 0 0 !important;
        color: #111 !important;
    }
    .product-modal__swatch {
        grid-area: auto !important;
        grid-column: 3 !important;
        grid-row: 2 !important;
        width: 67px !important;
        height: 62px !important;
        margin: 40px 0 0 !important;
        align-self: start !important;
        justify-self: end !important;
        order: 0 !important;
    }
    .product-modal__swatch img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        margin: 0 !important;
    }
    .product-modal__desc {
        grid-column: 1 / -1 !important;
        font-size: 12px !important;
        line-height: 23px !important;
        letter-spacing: .2px !important;
        text-align: justify !important;
        color: #555 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 15px 0 0 !important;
    }
    .product-modal__footer {
        grid-column: 1 / -1 !important;
        margin-top: 18px !important;
        padding-top: 14px !important;
    }
    .product-modal__detail-link {
        font-size: 11px !important;
        letter-spacing: 1px !important;
    }
}


/* ================================================================
   REV 110 — TECHNOLOGY MOBILE = FIGMA (≤ 767px)
   Figma: tiap proses = gambar 440px DI ATAS, lalu blok HITAM berisi
   judul + deskripsi + garis + statistik + panah. Bukan kartu kaca
   yang menimpa gambar seperti versi desktop.

   Acuan Figma (frame 390px):
     • gambar            : tinggi 440
     • blok hitam        : #000, gutter 34, padding atas 24
     • judul             : 21px, jarak ke deskripsi 15
     • deskripsi         : 12px / 18px, lebar 322
     • garis             : 137 x 1, #808080, 23px di bawah deskripsi
     • statistik         : nilai 21px, label 11px, kolom 113px
     • panah             : 18px, 60px di bawah label, 23px dari dasar
   ================================================================ */

@media (max-width: 767px) {

    /* ------------------------------------------------------------
       1. SECTION — mengalir ke bawah, bukan 1 layar penuh
       ------------------------------------------------------------ */
    .page-technology .page-wrapper {
        scroll-snap-type: none !important;
        scroll-padding-top: 0 !important;
    }
    .page-technology .page-content { padding-top: 0 !important; }
    .page-technology .section,
    .page-technology .tech-section {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
        background: #000000 !important;
    }

    /* ------------------------------------------------------------
       2. GAMBAR — blok 440px di atas, tanpa overlay
       ------------------------------------------------------------ */
    .page-technology .tech-media {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 440px !important;
        flex: 0 0 440px !important;
        overflow: hidden !important;
        order: 0 !important;
    }
    .page-technology .tech-overlay { display: none !important; }

    /* ------------------------------------------------------------
       3. BLOK HITAM — judul, deskripsi, garis, statistik
       ------------------------------------------------------------ */
    .page-technology .tech-panel,
    .page-technology .pos-bottom .tech-panel,
    .page-technology .pos-top .tech-panel {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: block !important;
        padding: 20px 34px 0 !important;
        box-sizing: border-box !important;
        order: 1 !important;
        z-index: auto !important;
    }

    .page-technology .tech-glass,
    .page-technology .tech-glass.has-stats {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        gap: 0 !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .page-technology .tech-glass-text {
        max-width: 100% !important;
        flex: none !important;
    }
    .page-technology .tech-title {
        font-size: 21px !important;
        line-height: 28px !important;
        font-weight: 500 !important;
        letter-spacing: .1px !important;
        color: #efefef !important;
        margin: 0 0 2px !important;
    }
    .page-technology .tech-desc {
        font-size: 12px !important;
        line-height: 18px !important;
        letter-spacing: .2px !important;
        color: #ffffff !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Garis pemisah sebelum statistik (hanya bila ada statistik) */
    .page-technology .tech-glass.has-stats .tech-glass-text::after {
        content: "";
        display: block;
        width: 137px;
        height: 1px;
        background: #808080;
        margin: 22px 0 0;
    }

    .page-technology .tech-glass-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        flex: none !important;
        padding: 0 !important;
        margin: 15px 0 0 !important;
        width: 100% !important;
        border: 0 !important;        /* garis bawaan desktop dimatikan */
    }
    .page-technology .tech-stat {
        display: block !important;
        flex: 0 0 113px !important;
        text-align: left !important;
    }
    .page-technology .tech-number,
    .page-technology .tech-stat .tech-number {
        font-size: 21px !important;
        line-height: 26px !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .page-technology .tech-stat-label,
    .page-technology .tech-stat .tech-stat-label {
        font-size: 11px !important;
        line-height: 16px !important;
        letter-spacing: .2px !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ------------------------------------------------------------
       4. PANAH — ikut alur, di dalam blok hitam
       ------------------------------------------------------------ */
    .page-technology .tech-chevron {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        order: 2 !important;
        align-self: center !important;
        margin: 54px 0 23px !important;
        animation: none !important;
        color: #ffffff !important;
    }
    .page-technology .tech-chevron .ui-chevron,
    .page-technology .tech-chevron .sd-arrow,
    .page-technology .tech-chevron svg {
        width: 18px !important;
        height: 18px !important;
    }
    /* Section terakhir tidak punya panah → beri jarak bawah sendiri */
    .page-technology .tech-section:last-of-type .tech-panel { padding-bottom: 40px !important; }
}


/* ================================================================
   REV 111 — SILVER KRIS MOBILE = FIGMA (≤ 767px)
   Urutan Figma: gambar hero (+ statistik) → judul "Excitement
   Through Collaboration" → paragraf → foto produk → SILVER KRIS
   → Our Vision / Our Product / Sales & Distribution → slider →
   galeri → footer.

   Proporsi gambar mengikuti Figma (bukan 1 layar penuh); scroll
   ditangani REV 113 (parallax).
   ================================================================ */

@media (max-width: 767px) {

    /* ------------------------------------------------------------
       1. HERO — gambar DULU, teks menyusul
       ------------------------------------------------------------ */
    .page-silver-kris .sk-hero {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 60px 0 0 !important;      /* ruang untuk navbar tetap */
    }
    /* Figma: gambar hero 390 x 440 */
    .page-silver-kris .sk-hero__visual {
        order: 0 !important;
        height: 440px !important;
        min-height: 440px !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        width: 100% !important;
    }
    .page-silver-kris .sk-hero__header {
        order: 1 !important;
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 33px 34px 0 !important;
        box-sizing: border-box !important;
    }
    .page-silver-kris .sk-hero__title {
        font-size: 21px !important;
        line-height: 22px !important;
        font-weight: 500 !important;
        letter-spacing: .1px !important;
        text-transform: none !important;
        text-align: left !important;
        color: #111111 !important;
        max-width: 260px !important;
        margin: 0 0 30px !important;
    }
    /* Figma: kedua baris judul berwarna gelap (tanpa aksen tosca) */
    .page-silver-kris .sk-hero__accent { color: inherit !important; }
    .page-silver-kris .sk-hero__intro {
        font-size: 12px !important;
        line-height: 18px !important;
        letter-spacing: .2px !important;
        text-align: justify !important;
        color: #555555 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Statistik di atas gambar — 2 kolom (x 47 & 273) */
    .page-silver-kris .sk-hero__stats {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 36px !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 226px auto !important;
        gap: 16px 0 !important;
        padding: 0 47px 0 47px !important;
        box-sizing: border-box !important;
    }
    .page-silver-kris .sk-stat__value {
        font-size: 21px !important;
        line-height: 26px !important;
        letter-spacing: 0 !important;
    }
    .page-silver-kris .sk-stat__label {
        font-size: 11px !important;
        line-height: 16px !important;
        letter-spacing: .2px !important;
        margin-top: 0 !important;
    }
    /* Figma: tanpa panah di gambar hero */
    .page-silver-kris .sk-hero__scroll { display: none !important; }

    /* ------------------------------------------------------------
       3. VISION — foto produk di ATAS logo, teks 1 kolom
       ------------------------------------------------------------ */
    .page-silver-kris .sk-vision {
        padding: 38px 0 0 !important;
    }
    .page-silver-kris .sk-vision .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 34px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .page-silver-kris .sk-vision__grid {
        display: contents !important;
    }
    .page-silver-kris .sk-vision__media {
        order: 0 !important;
        width: 259px !important;
        max-width: 100% !important;
        height: 215px !important;
        aspect-ratio: auto !important;
        margin: 0 auto 41px !important;
    }
    .page-silver-kris .sk-vision__brand {
        order: 1 !important;
        margin: 0 0 52px !important;
    }
    .page-silver-kris .sk-vision__brand img { width: 116px !important; height: auto !important; }
    .page-silver-kris .sk-vision__col:nth-of-type(1) { order: 2 !important; }
    .page-silver-kris .sk-vision__col:nth-of-type(2) { order: 3 !important; }
    .page-silver-kris .sk-vision__col { width: 100% !important; }
    .page-silver-kris .sk-vision__title {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
        letter-spacing: .3px !important;
        margin: 0 0 12px !important;
    }
    .page-silver-kris .sk-vision__title--gap { margin-top: 43px !important; }
    .page-silver-kris .sk-vision__col:nth-of-type(2) .sk-vision__title { margin-top: 43px !important; }
    .page-silver-kris .sk-vision__body p {
        font-size: 12px !important;
        line-height: 25px !important;
        letter-spacing: .2px !important;
        text-align: justify !important;
        margin: 0 !important;
    }

    /* ------------------------------------------------------------
       4. SLIDER — tinggi mengikuti isi (Figma), kartu 256px
       ------------------------------------------------------------ */
    .page-silver-kris .sk-slider {
        margin-top: 44px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        padding: 44px 0 28px !important;
    }
    .page-silver-kris .sk-slider__stage {
        padding: 0 0 0 19px !important;
    }
    .page-silver-kris .sk-slider__track { gap: 9px !important; }
    .page-silver-kris .sk-pcard {
        flex: 0 0 256px !important;
        width: 256px !important;
        min-height: 265px !important;
        padding: 24px 20px !important;
    }
    .page-silver-kris .sk-pcard__num {
        font-size: 21px !important;
        line-height: 26px !important;
        margin: 0 0 4px !important;
    }
    .page-silver-kris .sk-pcard__title {
        font-size: 21px !important;
        line-height: 26px !important;
        margin: 0 0 56px 29px !important;
    }
    .page-silver-kris .sk-pcard__desc {
        font-size: 11px !important;
        line-height: 15px !important;
        letter-spacing: .2px !important;
        text-align: justify !important;
        margin: 0 !important;
    }
    .page-silver-kris .sk-slider__controls {
        margin-top: 28px !important;
        padding: 0 11px !important;
    }
    .page-silver-kris .sk-slider__arrow .ui-chevron { height: 14px !important; width: auto !important; }

    /* ------------------------------------------------------------
       5. GALERI — proporsi Figma (601 / 728), bertumpuk
       ------------------------------------------------------------ */
    .page-silver-kris .sk-gallery { padding: 0 !important; }
    .page-silver-kris .sk-gallery .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .page-silver-kris .sk-gallery__grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        row-gap: 0 !important;
    }
    .page-silver-kris .sk-gallery__item {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 601 / 728 !important;
        margin: 0 !important;
    }
}


/* ================================================================
   REV 113 — SCROLL PARALLAX (HOME, TECHNOLOGY, SILVER KRIS)
   Scroll per-section (snap) DIBATALKAN. Halaman kembali mengalir
   normal seperti semula, dengan gambar bergerak lebih lambat dari
   konten (parallax).

   Mekanisme: wadah gambar memotong (overflow hidden), gambarnya
   dibuat lebih tinggi lalu digeser oleh script parallax di
   layouts/app.blade.php melalui variabel --px-shift.
   Tanpa JS (atau prefers-reduced-motion), --px-shift = 0 →
   tampilan persis seperti tanpa parallax.
   ================================================================ */

/* ----------------------------------------------------------------
   1. SNAP DIMATIKAN — semua halaman terkait, semua ukuran layar
   ---------------------------------------------------------------- */
.page-home .page-wrapper,
.page-technology .page-wrapper,
.page-silver-kris .page-wrapper {
    scroll-snap-type: none !important;
    scroll-padding-top: 0 !important;
    overscroll-behavior-y: auto;
}
.page-home .page-content > .section,
.page-home .page-content > .site-footer,
.page-technology .tech-section,
.page-technology .site-footer,
.page-silver-kris .sk-hero,
.page-silver-kris .sk-hero__visual,
.page-silver-kris .sk-hero__header,
.page-silver-kris .sk-vision,
.page-silver-kris .sk-slider,
.page-silver-kris .sk-gallery,
.page-silver-kris .sk-gallery__item,
.page-silver-kris .site-footer {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* ----------------------------------------------------------------
   2. PARALLAX — wadah memotong, gambar digeser
   Dipasang script: .px-media (wadah) + .px-layer (gambar)
   ---------------------------------------------------------------- */
/* Hanya di mobile — tampilan desktop sama sekali tidak tersentuh
   (script boleh tetap jalan; tanpa transform di bawah ini tidak ada
   efek apa pun di layar besar). */
@media (max-width: 767px) {

    .px-media { overflow: hidden !important; }

    /* Gambar diperbesar sedikit (--px-scale) supaya ada cadangan di atas
       dan di bawah, lalu digeser (--px-shift). Geseran maksimum dijaga
       JS = 8% tinggi wadah, jadi cadangan 9% per sisi selalu cukup dan
       tepi gambar tidak pernah bocor — apa pun cara tinggi wadah dihitung. */
    .px-layer {
        --px-shift: 0px;
        --px-scale: 1.18;
        transform: translate3d(0, var(--px-shift), 0) scale(var(--px-scale));
        transform-origin: 50% 50%;
        will-change: transform;
        backface-visibility: hidden;
    }

    /* Saat reduce-motion: persis seperti tanpa parallax. */
    @media (prefers-reduced-motion: reduce) {
        .px-layer { transform: none !important; }
    }
}

/* ----------------------------------------------------------------
   3. MOBILE — kembalikan tinggi section ke alur normal
   ---------------------------------------------------------------- */
@media (max-width: 767px) {

    /* HOME — section mengikuti tinggi isinya lagi */
    .page-home #section6,
    .page-home #section8 {
        height: auto !important;
        min-height: 0 !important;
    }
    .page-home #section8 { padding: 26px 0 34px !important; }   /* nilai REV 107 */

    /* TECHNOLOGY — gambar kembali 440px seperti Figma */
    .page-technology .page-content { padding-top: 0 !important; }
    .page-technology .tech-section {
        height: auto !important;
        min-height: 0 !important;
    }
    .page-technology .tech-media {
        flex: 0 0 440px !important;
        height: 440px !important;
        min-height: 440px !important;
    }

    /* SILVER KRIS — section teks mengalir normal */
    .page-silver-kris .sk-hero__header,
    .page-silver-kris .sk-vision {
        min-height: 0 !important;
    }
    .page-silver-kris .sk-vision { padding-bottom: 0 !important; }
}


/* ================================================================
   REV 114 — CONTACT MOBILE = FIGMA (≤ 767px)

   Acuan frame Figma 390px:
     • gutter halaman   : 18
     • judul            : y 107, tinggi huruf kapital 16
     • info             : 2 kolom — label x 18, nilai x 171
     • heading form     : y 332
     • "*Wajib diisi"   : y 376, x 26
     • kolom isian      : x 26..363 (nama depan/belakang 164 + jarak 10)
     • tinggi isian     : 17, radius 5, latar #f7f7f7
     • textarea         : 107
     • tombol KIRIM     : 49 x 15, pill, garis luar
     • footer           : logo 30x28 (+35), baris nav tiap 25, kolom x 130 & 288
   ================================================================ */

@media (max-width: 767px) {

    /* ------------------------------------------------------------
       1. KERANGKA HALAMAN — gutter 18
       ------------------------------------------------------------ */
    .page-contact .contact-page { padding-top: 0 !important; }
    .page-contact .contact-page > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 18px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* ------------------------------------------------------------
       2. JUDUL
       ------------------------------------------------------------ */
    .page-contact .contact-title {
        font-size: 20px !important;
        line-height: 26px !important;
        font-weight: 700 !important;
        letter-spacing: -.5px !important;
        color: #111111 !important;
        margin: 0 !important;
        padding: 101px 0 0 !important;
    }

    /* ------------------------------------------------------------
       3. INFO — 2 kolom (label | nilai)
       ------------------------------------------------------------ */
    .page-contact .contact-grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .page-contact .contact-info { margin: 0 !important; padding: 0 !important; }

    .page-contact .contact-info__row {
        display: grid !important;
        grid-template-columns: 153px 1fr !important;
        align-items: start !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .page-contact .contact-info__row:first-child { margin-top: 42px !important; }
    .page-contact .contact-info__row + .contact-info__row { margin-top: 17px !important; }

    .page-contact .contact-info__label {
        font-size: 11px !important;
        line-height: 19px !important;
        font-weight: 700 !important;
        letter-spacing: .2px !important;
        color: #111111 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-transform: none !important;
    }
    .page-contact .contact-info__value {
        margin: 0 !important;
        padding: 0 !important;
    }
    .page-contact .contact-info__value p {
        font-size: 11px !important;
        line-height: 19px !important;
        letter-spacing: .6px !important;
        color: #414042 !important;
        margin: 0 0 5px !important;
    }
    .page-contact .contact-info__value p:last-child { margin-bottom: 0 !important; }
    /* Figma: alamat mengalir mengikuti lebar kolom, bukan dipatahkan
       di titik desktop — baris paksa dimatikan di mobile. */
    .page-contact .contact-info__value br { display: none !important; }
    /* Figma: tautan sewarna teks biasa, tanpa aksen tosca */
    .page-contact .contact-info__value a {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* ------------------------------------------------------------
       4. HEADING FORM
       ------------------------------------------------------------ */
    .page-contact .contact-form-wrap { margin: 0 !important; padding: 0 !important; }
    .page-contact .contact-form__heading {
        font-size: 13.5px !important;
        line-height: 22px !important;
        font-weight: 600 !important;
        letter-spacing: .1px !important;
        color: #111111 !important;
        margin: 0 !important;
        padding: 23px 0 0 !important;
    }

    /* "*Wajib diisi" — sejajar dengan kolom isian (x 26) */
    .page-contact .contact-required {
        font-size: 11px !important;
        line-height: 15px !important;
        letter-spacing: .1px !important;
        color: #414042 !important;
        margin: 22px 0 0 8px !important;
        padding: 0 !important;
    }
    .page-contact .contact-required span {
        color: #c0392b !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ------------------------------------------------------------
       5. ISIAN FORM
       ------------------------------------------------------------ */
    .page-contact .contact-form { margin: 0 8px !important; padding: 0 !important; }

    .page-contact .contact-form__grid {
        display: grid !important;
        grid-template-columns: 164px 164px !important;
        column-gap: 10px !important;
        row-gap: 10px !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
        width: 338px !important;
    }
    .page-contact .contact-field { margin: 0 !important; padding: 0 !important; }
    .page-contact .contact-field--half { grid-column: span 1 !important; }
    .page-contact .contact-field--full { grid-column: 1 / -1 !important; }

    .page-contact .contact-input {
        display: block !important;      /* hilangkan sisa ruang baris inline */
        vertical-align: top !important;
        width: 100% !important;
        height: 17px !important;
        min-height: 17px !important;
        box-sizing: border-box !important;
        background: #f7f7f7 !important;
        border: 0 !important;
        border-radius: 5px !important;
        padding: 0 8px !important;
        font-size: 8px !important;
        line-height: 17px !important;
        letter-spacing: 1.3px !important;
        color: #111111 !important;
        margin: 0 !important;
    }
    .page-contact .contact-input::placeholder {
        color: #48474a !important;
        font-size: 8px !important;
        letter-spacing: 1.3px !important;
        opacity: 1 !important;
    }
    .page-contact .contact-textarea {
        height: 107px !important;
        min-height: 107px !important;
        padding: 8px !important;
        line-height: 16px !important;
        resize: none !important;
    }
    .page-contact .contact-msg-field { position: relative !important; }
    .page-contact .contact-msg-hint {
        position: absolute !important;
        top: 7px !important;
        left: 8px !important;
        font-size: 8px !important;
        line-height: 15px !important;
        letter-spacing: 1.3px !important;
        color: #48474a !important;
        pointer-events: none !important;
    }
    .page-contact .contact-msg-hint span {
        color: #c0392b !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ------------------------------------------------------------
       6. TOMBOL KIRIM — 49 x 15, pill
       ------------------------------------------------------------ */
    .page-contact .contact-form__actions { margin: 3px 0 0 !important; padding: 0 !important; }
    .page-contact .contact-submit {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 49px !important;
        height: 15px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 1px solid #111111 !important;
        border-radius: 720px !important;
        background: transparent !important;
        font-size: 7px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        letter-spacing: .6px !important;
        text-transform: uppercase !important;
        color: #111111 !important;
    }

    /* ------------------------------------------------------------
       7. PETA — tetap ditampilkan (di frame Figma embed-nya kosong)
       ------------------------------------------------------------ */
    .page-contact .contact-map {
        margin: 36px 0 0 !important;
        height: 190px !important;
    }

    /* ------------------------------------------------------------
       8. FOOTER — rapatkan sesuai Figma
       ------------------------------------------------------------ */
    .page-contact .site-footer { padding-bottom: 0 !important; }
    .page-contact .footer-main { padding-top: 31px !important; }
    .page-contact .footer-nav { padding-top: 3px !important; }
    .page-contact .footer-nav-col li + li { margin-top: 0 !important; }
    .page-contact .footer-nav-col li { line-height: 0 !important; }
    .page-contact .footer-nav-col a {
        display: inline-block !important;
        line-height: 25px !important;
        font-size: 12px !important;
    }
}


/* ================================================================
   REV 115 — CAREER MOBILE = FIGMA (≤ 767px)

   Acuan frame Figma 390px:
     • gutter halaman   : 18
     • judul            : 20px / baris 20, tinggi kapital 14, y 108
     • FILTERS          : sebaris dengan baris kedua judul, kanan
     • chip             : tinggi 27, teks 10px/400, padding 23,
                          chip aktif 100px (teks membungkus 2 baris)
     • baris lowongan   : 3 kolom 163 / 83 / 74 (jarak 17),
                          masing-masing bergaris atas 1px,
                          chevron di kiri (x18), judul mulai x40,
                          lokasi x197, jenjang x297, jarak baris 80
     • deskripsi        : judul blok 10px x39, butir teks x53
                          (titik x44), jarak baris 15
     • tombol DAFTAR    : 56 x 15, pill, x45
     • form lamaran     : isian x26..363 tinggi 17, nama depan /
                          belakang 164 + jarak 10, textarea 107
     • panel filter     : 2 kolom (x18 & x203), jarak baris 38
   ================================================================ */

@media (max-width: 767px) {

    /* ------------------------------------------------------------
       1. GUTTER HALAMAN — 24 menjadi 18
       ------------------------------------------------------------ */
    .page-career .career-head,
    .page-career .career-filterbar,
    .page-career .career-list {
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    /* ------------------------------------------------------------
       2. JUDUL + TOMBOL FILTERS
       ------------------------------------------------------------ */
    .page-career .career-head { padding-top: 0 !important; padding-bottom: 0 !important; }
    .page-career .career-title {
        font-size: 20px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
        letter-spacing: -.2px !important;
        margin: 0 !important;
        padding: 4px 0 0 !important;
    }

    .page-career .career-filterbar { position: relative !important; }
    .page-career .career-filters {
        position: absolute !important;
        right: 18px !important;
        top: -54px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .page-career .career-filters__btn {
        font-size: 9px !important;
        letter-spacing: .4px !important;
        gap: 5px !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        width: auto !important;
    }
    .page-career .career-filters__icon { width: 11px !important; height: 9px !important; }

    /* ------------------------------------------------------------
       3. CHIP JENIS PEKERJAAN
       ------------------------------------------------------------ */
    .page-career .career-filterbar { margin: 40px 0 41px !important; }
    /* Deretan chip digulir mendatar bila lebih lebar dari layar */
    .page-career .career-chips {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 1px !important;
    }
    .page-career .career-chips::-webkit-scrollbar { display: none !important; }
    .page-career .career-filterbar { max-width: 100% !important; }
    .page-career .career-chip {
        font-size: 9.5px !important;
        font-weight: 400 !important;
        letter-spacing: -.5px !important;
        line-height: 13px !important;
        min-height: 27px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 23px !important;
        flex: 0 0 auto !important;
        min-width: 58px !important;
        text-align: center !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    .page-career .career-chip.is-active {
        flex: 0 0 100px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        display: flex !important;
    }

    /* ------------------------------------------------------------
       4. BARIS LOWONGAN — 3 kolom bergaris atas, chevron kiri
       ------------------------------------------------------------ */
    .page-career .career-item__row {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 163px 83px 1fr !important;
        column-gap: 17px !important;
        row-gap: 0 !important;
        align-items: start !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    /* Garis atas terpisah untuk tiap kolom (seperti Figma) */
    .page-career .career-item__title,
    .page-career .career-item__loc,
    .page-career .career-item__level {
        border-top: 1px solid #d9d9d9 !important;
        padding-top: 9px !important;
        padding-bottom: 40px !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .page-career .career-item__title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding-left: 22px !important;
        padding-right: 0 !important;
        font-size: 11px !important;
        line-height: 14px !important;
        font-weight: 700 !important;
        letter-spacing: .3px !important;
        color: #111111 !important;
        text-transform: uppercase !important;
    }
    .page-career .career-item__loc {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        font-size: 8px !important;
        line-height: 14px !important;
        letter-spacing: .4px !important;
        color: #414042 !important;
        text-transform: uppercase !important;
    }
    .page-career .career-item__level {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: block !important;
        font-size: 9px !important;
        line-height: 14px !important;
        letter-spacing: .2px !important;
        color: #8b8a8c !important;
        text-transform: none !important;
    }
    /* Chevron menempel di kiri kolom pertama */
    /* Baris yang terbuka: ruang bawah lebih rapat sebelum deskripsi */
    .page-career .career-item.is-open .career-item__title,
    .page-career .career-item.is-open .career-item__loc,
    .page-career .career-item.is-open .career-item__level {
        padding-bottom: 9px !important;
    }

    .page-career .career-item__chev {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: absolute !important;
        left: 0 !important;
        top: 9px !important;
        width: 10px !important;
        height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        color: #d9d9d9 !important;
    }
    .page-career .career-item__chev .ui-chevron {
        width: 7px !important;
        height: 11px !important;
        transition: transform .25s ease !important;
    }
    /* Terbuka: panah menghadap ke bawah (diputar pada pembungkus,
       agar tidak bertabrakan dengan rotasi bawaan desktop) */
    .page-career .career-item.is-open .career-item__chev {
        transform: rotate(90deg) !important;
    }
    .page-career .career-item.is-open .career-item__chev .ui-chevron {
        transform: none !important;
    }

    /* ------------------------------------------------------------
       5. ISI LOWONGAN — deskripsi & kualifikasi
       ------------------------------------------------------------ */
    .page-career .career-item__detail-content { padding: 0 !important; }
    .page-career .career-item__detail-inner { padding-bottom: 0 !important; }
    .page-career .career-block__title {
        font-size: 8px !important;
        line-height: 14px !important;
        font-weight: 700 !important;
        letter-spacing: .6px !important;
        color: #111111 !important;
        margin: 0 0 9px 14px !important;
    }
    .page-career .career-info .career-block__title + .career-block__list { margin-bottom: 0 !important; }
    .page-career .career-info .career-block__list + .career-block__title { margin-top: 36px !important; }

    .page-career .career-block__list {
        margin: 0 !important;
        padding: 0 0 0 24px !important;
        list-style: none !important;
    }
    .page-career .career-block__list li {
        position: relative !important;
        font-size: 9px !important;
        line-height: 15px !important;
        letter-spacing: .55px !important;
        color: #414042 !important;
        text-align: justify !important;
        margin: 0 !important;
        padding: 0 23px 0 9px !important;
    }
    .page-career .career-block__list li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        color: #414042;
        font-size: 9px;
        line-height: 15px;
    }

    /* ------------------------------------------------------------
       6. TOMBOL DAFTAR
       ------------------------------------------------------------ */
    .page-career .career-apply { padding: 0 0 35px 0 !important; }
    .page-career .career-apply__btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        height: 15px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 9px 0 0 27px !important;
        padding: 0 !important;
        border: 1px solid #111111 !important;
        border-radius: 720px !important;
        background: transparent !important;
        font-size: 7px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        letter-spacing: .6px !important;
        color: #111111 !important;
    }

    /* ------------------------------------------------------------
       7. FORM LAMARAN
       ------------------------------------------------------------ */
    .page-career .career-apply.is-open { padding-bottom: 27px !important; }
    /* Saat form tampil, tombol DAFTAR disembunyikan */
    .page-career .career-apply.is-open .career-apply__btn { display: none !important; }
    .page-career .career-form { margin: 0 !important; padding: 0 0 0 8px !important; }
    .page-career .career-form .career-block__title { margin: -16px 0 0 13px !important; }
    .page-career .career-form__req {
        font-size: 10px !important;
        line-height: 14px !important;
        letter-spacing: .1px !important;
        color: #c0392b !important;
        margin: 3px 0 0 14px !important;
    }
    .page-career .career-form__row {
        display: grid !important;
        grid-template-columns: 164px 164px !important;
        column-gap: 10px !important;
        margin: 15px 0 0 !important;
    }
    .page-career .career-form__field { margin: 0 0 9px !important; padding: 0 !important; }
    .page-career .career-input {
        display: block !important;
        width: 100% !important;
        height: 17px !important;
        min-height: 17px !important;
        box-sizing: border-box !important;
        background: #f7f7f7 !important;
        border: 0 !important;
        border-radius: 5px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        font-size: 8px !important;
        line-height: 17px !important;
        letter-spacing: 1.3px !important;
        color: #111111 !important;
    }
    .page-career .career-input::placeholder {
        color: #48474a !important;
        font-size: 8px !important;
        letter-spacing: 1.3px !important;
        opacity: 1 !important;
    }
    .page-career .career-textarea {
        height: 107px !important;
        min-height: 107px !important;
        padding: 7px 8px !important;
        line-height: 15px !important;
        resize: none !important;
    }
    /* Baris lampiran CV: label kiri, keterangan merah kanan */
    .page-career .career-filelabel {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 17px !important;
        background: #f7f7f7 !important;
        border-radius: 5px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .page-career .career-filelabel__text {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 8px !important;
        letter-spacing: 1.3px !important;
        color: #48474a !important;
    }
    .page-career .career-filelabel__text svg { width: 8px !important; height: 8px !important; }
    .page-career .career-filelabel__hint {
        font-size: 8px !important;
        letter-spacing: .4px !important;
        font-weight: 700 !important;
        color: #e8544f !important;
    }

    .page-career .career-form__note {
        font-size: 8px !important;
        line-height: 13px !important;
        letter-spacing: .3px !important;
        text-align: justify !important;
        color: #414042 !important;
        margin: 12px 0 0 !important;
    }
    .page-career .career-form__note a { color: inherit !important; }

    .page-career .career-form__submit {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 49px !important;
        height: 15px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
        border: 1px solid #111111 !important;
        border-radius: 720px !important;
        background: transparent !important;
        font-size: 7px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        letter-spacing: .6px !important;
        color: #111111 !important;
    }

    /* ------------------------------------------------------------
       8. PANEL FILTER
       ------------------------------------------------------------ */
    .page-career .career-filterpanel {
        padding: 2px 18px 40px !important;
        gap: 38px 0 !important;
    }
    .page-career .career-filtercol__title {
        font-size: 10px !important;
        line-height: 14px !important;
        font-weight: 700 !important;
        letter-spacing: .6px !important;
        color: #111111 !important;
        margin: 0 0 28px !important;
    }
    .page-career .career-filterlist {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        column-gap: 20px !important;
    }
    .page-career .career-filterlist li {
        margin: 0 0 24px !important;
        padding: 0 !important;
    }
    .page-career .career-filterlist a {
        display: block !important;
        padding: 0 !important;
        font-size: 9px !important;
        line-height: 14px !important;
        letter-spacing: .5px !important;
        color: #414042 !important;
        text-transform: uppercase !important;
    }
}


/* ================================================================
   REV 116 — TOMBOL WHATSAPP MENGAMBANG + TOMBOL BAGIKAN

   1. .wa-float  : pojok kanan bawah, semua halaman
   2. .share     : deret ikon Facebook / WhatsApp / Threads / X
                   • ≥768px : label + keempat ikon selalu tampil
                   • <768px : satu tombol BAGIKAN, ikon muncul saat
                              diklik, menutup lagi lewat ikon silang
   ================================================================ */

/* ----------------------------------------------------------------
   1. TOMBOL WHATSAPP MENGAMBANG
   ---------------------------------------------------------------- */
.wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9000;                 /* di bawah menu layar penuh (100001) */
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.wa-float:hover,
.wa-float:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
    color: #ffffff;
}
.wa-float__icon { width: 30px; height: 30px; display: block; }

/* Menu layar penuh terbuka → tombol disembunyikan agar tidak menimpa */
body.menu-open .wa-float {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .wa-float { right: 16px; bottom: 16px; width: 46px; height: 46px; }
    .wa-float__icon { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
    .wa-float:hover { transform: none; }
}

/* ----------------------------------------------------------------
   2. TOMBOL BAGIKAN
   ---------------------------------------------------------------- */
.share {
    display: flex;
    align-items: center;
    gap: 0;                        /* jarak diberikan saat terbuka saja */
}
.share.is-open .share__toggle { margin-right: 12px; }

.share__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #414042;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    line-height: 1;
    cursor: pointer;
}
.share__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
.share__toggle-icon svg { width: 16px; height: 16px; display: block; }
/* Spesifisitas disamakan dengan aturan svg di atas, kalau tidak ikon
   silang ikut tampil saat tertutup. */
.share__toggle-icon .share__ico-close { display: none; }

/* Tertutup = ikon saja. Terbuka = ikon silang + label + ikon sosial. */
.share__toggle-label { display: none; }
.share.is-open .share__toggle-label { display: inline; }
.share.is-open .share__toggle-icon .share__ico-share { display: none; }
.share.is-open .share__toggle-icon .share__ico-close { display: block; }

.share__list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition: max-width .32s ease, opacity .24s ease, transform .32s ease;
}
.share.is-open .share__list {
    max-width: 260px;
    opacity: 1;
    transform: none;
}
.share__item { margin: 0; padding: 0; }

.share__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition: transform .18s ease, opacity .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.share__link svg { width: 16px; height: 16px; display: block; }
.share__link:hover,
.share__link:focus-visible { transform: translateY(-2px); color: #ffffff; }

.share__link--fb      { background: #1877f2; }
.share__link--wa      { background: #25d366; }
.share__link--threads { background: #000000; }
.share__link--x       { background: #000000; }

@media (prefers-reduced-motion: reduce) {
    .share__link { transition: none; }
    .share__link:hover { transform: none; }
}

/* Jarak blok bagikan di halaman artikel */
.news-article__share { margin: 18px 0 0; }

/* ----------------------------------------------------------------
   MOBILE — satu tombol, ikon keluar saat diklik
   ---------------------------------------------------------------- */
@media (max-width: 767px) {

    .share.is-open .share__toggle { margin-right: 9px; }

    .share__toggle {
        height: 30px;
        padding: 0 13px;
        border: 1px solid #d9d9d9;
        border-radius: 720px;
        background: #ffffff;
        font-size: 10px;
        letter-spacing: 1px;
        flex: 0 0 auto;
        transition: border-color .2s ease;
    }
    .share__toggle:hover { border-color: #b5b5b5; }

    .share__list { gap: 8px; }

    .share__link { width: 30px; height: 30px; }
    .share__link svg { width: 15px; height: 15px; }

    @media (prefers-reduced-motion: reduce) {
        .share__list { transition: none; }
    }
}


/* ================================================================
   REV 117 — TOMBOL BAGIKAN MENEMPEL DI KIRI BAWAH LAYAR

   Sebelumnya blok bagikan ikut mengalir di dalam artikel. Sekarang
   menempel di pojok kiri bawah (berpasangan dengan tombol WhatsApp
   di kanan bawah), dan menghilang begitu footer mulai terlihat
   supaya tidak pernah menimpanya.
   ================================================================ */

.share-dock {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 8999;                 /* tepat di bawah tombol WhatsApp */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Ukuran & jarak dasar disamakan dengan tombol WhatsApp di kanan
       bawah, supaya keduanya sejajar dan sama besar saat tertutup. */
    height: 54px;
    min-width: 54px;
    padding: 0 8px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid #ebeaea;
    border-radius: 720px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* Footer mulai terlihat → dock disembunyikan */
.share-dock.is-hidden,
body.menu-open .share-dock {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
}

/* Dock sudah jadi wadahnya, jadi tombol di dalamnya tanpa bingkai lagi */
.share-dock .share__toggle {
    border: 0 !important;
    background: none !important;
    height: auto !important;
    width: auto !important;
    padding: 0 6px !important;
}

/* Blok lama di dalam artikel sudah tidak dipakai */
.news-article__share { display: none; }

@media (max-width: 767px) {
    .share-dock {
        left: 16px;
        bottom: 16px;
        height: 46px;
        min-width: 46px;
        padding: 0 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .share-dock { transition: none; }
    .share-dock.is-hidden { transform: none; }
}


/* ================================================================
   REV 118 — FOOTER TERPOTONG DI HP (copyright tidak terlihat)

   Penyebab: .page-wrapper (wadah scroll seluruh halaman) setinggi
   100vh. Di Chrome/Safari HP, 100vh = tinggi layar SAAT address bar
   tersembunyi. Karena yang di-scroll adalah .page-wrapper (bukan
   halaman), address bar tidak pernah tersembunyi — jadi ±56px
   terbawah wadah selalu berada di luar layar, termasuk baris
   copyright di footer.

   Perbaikan: tinggi wadah = tinggi layar yang benar-benar terlihat.
   • 100%   → mengikuti html/body (height:100%), didukung semua browser
   • 100dvh → tinggi layar dinamis, untuk browser yang mendukung
   Selektor body[class] supaya menang atas aturan per halaman
   (.page-technology .page-wrapper, dst.) yang masih 100vh.
   ================================================================ */
body[class] .page-wrapper {
    height: 100%;
    height: 100dvh;
}