@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* 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; }
}