:root {
 --ink: #102018;
 --muted: #5f7167;
 --line: #dcecdf;
 --panel: #f2faf5;
 --panel-strong: #e5f6eb;
 --brand: #0f7a3b;
 --brand-dark: #07542a;
 --brand-soft: #eaf8ef;
 --white: #ffffff;
 --success: #16a34a;
 --success-dark: #0f8f3d;
 --gold: #f6b400;
 --shadow: 0 24px 70px rgba(15, 122, 59, 0.13);
 --shadow-strong: 0 30px 90px rgba(7, 84, 42, 0.22);
 --radius: 20px;
 --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
 scroll-behavior: smooth;
 scroll-padding-top: 92px;
 text-rendering: optimizeLegibility;
}

body {
 margin: 0;
 font-family: Inter, Arial, sans-serif;
 color: var(--ink);
 background: linear-gradient(180deg, #ffffff 0%, #f7fcf8 45%, #ffffff 100%);
 line-height: 1.6;
 -webkit-font-smoothing: antialiased;
}

img {
 display: block;
 max-width: 100%;
 height: auto;
}

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

.nav-inner,
.section-inner,
.footer-inner {
 width: min(1120px, calc(100% - 36px));
 margin: 0 auto;
}

.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 color: var(--ink);
 background: rgba(255, 255, 255, 0.92);
 border-bottom: 1px solid rgba(220, 236, 223, 0.9);
 box-shadow: 0 12px 32px rgba(15, 122, 59, 0.06);
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
 animation: navDrop 0.72s var(--ease-out) both;
 transition: background 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), border-color 0.24s var(--ease-out), transform 0.24s var(--ease-out);
 will-change: background, box-shadow, transform;
}

.site-header.is-scrolled {
 background: rgba(255, 255, 255, 0.82);
 border-bottom-color: rgba(15, 122, 59, 0.14);
 box-shadow: 0 18px 42px rgba(15, 122, 59, 0.13);
}

.nav-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 min-height: 76px;
}

.brand {
 display: flex;
 align-items: center;
 gap: 12px;
 font-weight: 850;
 letter-spacing: -0.02em;
 white-space: nowrap;
 color: var(--brand-dark);
}

.brand::before {
 content: "";
 width: 42px;
 height: 42px;
 border-radius: 14px;
 background:
  radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.9) 0 11%, transparent 12%),
  linear-gradient(135deg, var(--brand), var(--brand-dark));
 box-shadow: 0 14px 34px rgba(15, 122, 59, 0.26);
 transform: translate3d(0, 0, 0);
 animation: iconFloat 5.5s var(--ease-soft) infinite;
}

.brand small {
 display: block;
 margin-top: -3px;
 color: var(--muted);
 font-size: 12px;
 font-weight: 650;
 letter-spacing: 0;
}

.nav-links {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
 color: #1e382b;
 font-size: 15px;
 font-weight: 750;
}

.nav-links a {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 38px;
 padding: 8px 12px;
 border-radius: 999px;
 transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
 transform: translate3d(0, 0, 0);
 will-change: transform;
}

.nav-links a:hover {
 color: var(--brand-dark);
 background: rgba(15, 122, 59, 0.09);
 box-shadow: inset 0 0 0 1px rgba(15, 122, 59, 0.12);
 transform: translate3d(0, -1px, 0);
}

.button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 46px;
 padding: 12px 18px;
 border: 1px solid transparent;
 border-radius: 12px;
 font-weight: 850;
 text-align: center;
 transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
 transform: translate3d(0, 0, 0);
 will-change: transform;
}

.button:hover { transform: translate3d(0, -2px, 0); }

.button-primary {
 color: var(--white);
 background: var(--brand);
 box-shadow: 0 14px 30px rgba(15, 122, 59, 0.28);
}

.button-primary:hover { background: var(--brand-dark); }

.button-secondary {
 color: var(--brand-dark);
 background: var(--white);
 border-color: rgba(15, 122, 59, 0.18);
 box-shadow: 0 14px 30px rgba(15, 122, 59, 0.09);
}

.button-light {
 color: var(--white);
 background: rgba(255, 255, 255, 0.14);
 border-color: rgba(255, 255, 255, 0.32);
}

.button-light:hover { background: rgba(255, 255, 255, 0.24); }

.whatsapp-now {
 color: var(--white);
 background: linear-gradient(135deg, var(--success), var(--success-dark));
 box-shadow: 0 16px 34px rgba(22, 163, 74, 0.32);
}

.whatsapp-now:hover { background: linear-gradient(135deg, var(--success-dark), var(--brand-dark)); }

.hero {
 position: relative;
 min-height: 650px;
 overflow: hidden;
 color: var(--white);
 background:
  radial-gradient(circle at 16% 20%, rgba(34, 197, 94, 0.28), transparent 28%),
  linear-gradient(90deg, rgba(5, 84, 42, 0.96), rgba(15, 122, 59, 0.78) 52%, rgba(16, 185, 129, 0.28)),
  url("../../Galeri/Service-Freestanding_19.jpeg") center/cover;
}

.hero::after {
 content: "";
 position: absolute;
 inset: auto -8% -32% 45%;
 height: 420px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.12);
 filter: blur(14px);
 transform: rotate(-8deg);
 animation: softDrift 12s var(--ease-soft) infinite alternate;
 pointer-events: none;
 will-change: transform;
}

.hero-inner {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: minmax(0, 650px) minmax(280px, 1fr);
 gap: 36px;
 align-items: center;
 padding: 96px 0 66px;
}

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 18px;
 color: inherit;
 font-weight: 850;
 text-transform: uppercase;
 font-size: 13px;
 letter-spacing: 0.055em;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
 max-width: 780px;
 margin-bottom: 18px;
 font-size: clamp(40px, 6vw, 72px);
 line-height: 0.98;
 letter-spacing: -0.04em;
}

.hero-text {
 max-width: 690px;
 margin-bottom: 30px;
 color: #edfdf2;
 font-size: 19px;
}

.hero-actions,
.contact-actions,
.diskon-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.hero-actions { margin-bottom: 34px; }

.quick-proof {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}

.proof-item {
 min-height: 92px;
 padding: 16px;
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 16px;
 background: rgba(255, 255, 255, 0.12);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 transition: transform 0.24s var(--ease-out), background 0.24s var(--ease-out);
 will-change: transform;
}

.proof-item:hover {
 transform: translate3d(0, -4px, 0);
 background: rgba(255, 255, 255, 0.17);
}

.proof-item strong {
 display: block;
 margin-bottom: 3px;
 font-size: 18px;
}

.proof-item span {
 color: #dff8e6;
 font-size: 13px;
}

.hero-panel {
 align-self: end;
 padding: 24px;
 color: var(--ink);
 background: rgba(255, 255, 255, 0.94);
 border: 1px solid rgba(255, 255, 255, 0.7);
 border-radius: var(--radius);
 box-shadow: var(--shadow-strong);
 animation: panelFloat 6s var(--ease-soft) infinite;
 will-change: transform;
}

.hero-panel h2 {
 margin-bottom: 14px;
 color: var(--brand-dark);
 font-size: 24px;
}

.check-list {
 margin: 0;
 padding: 0;
 list-style: none;
}

.check-list li {
 position: relative;
 padding-left: 26px;
 margin-bottom: 12px;
 color: #314338;
}

.check-list li::before {
 content: "✓";
 position: absolute;
 left: 0;
 top: 0;
 color: var(--success-dark);
 font-weight: 900;
}

section { padding: 78px 0; }

.section-title {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 28px;
 margin-bottom: 34px;
}

.section-title h2 {
 max-width: 700px;
 margin-bottom: 0;
 color: var(--brand-dark);
 font-size: clamp(30px, 4vw, 46px);
 line-height: 1.08;
 letter-spacing: -0.03em;
}

.section-title p {
 max-width: 480px;
 margin-bottom: 0;
 color: var(--muted);
}

.features {
 padding: 34px 0;
 background: linear-gradient(180deg, var(--panel), #ffffff);
}

.feature-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
}

.feature,
.service-card,
.testimoni-card,
.diskon-card,
.contact-box {
 transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), border-color 0.24s var(--ease-out);
 transform: translate3d(0, 0, 0);
 will-change: transform;
}

.feature:hover,
.service-card:hover,
.testimoni-card:hover,
.diskon-card:hover {
 transform: translate3d(0, -5px, 0);
 box-shadow: 0 24px 58px rgba(15, 122, 59, 0.16);
 border-color: rgba(15, 122, 59, 0.22);
}

.feature {
 min-height: 144px;
 padding: 20px;
 border: 1px solid var(--line);
 border-radius: 18px;
 background: var(--white);
}

.feature-icon {
 display: grid;
 place-items: center;
 width: 42px;
 height: 42px;
 margin-bottom: 16px;
 color: var(--white);
 background: linear-gradient(135deg, var(--brand), var(--brand-dark));
 border-radius: 12px;
 font-size: 14px;
 font-weight: 850;
 box-shadow: 0 14px 26px rgba(15, 122, 59, 0.22);
}

.feature h3 { margin-bottom: 6px; font-size: 18px; }
.feature p { margin-bottom: 0; color: var(--muted); font-size: 14px; }

.services-section { background: #ffffff; }

.services-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 24px;
}

.service-card {
 overflow: hidden;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--white);
 box-shadow: 0 16px 40px rgba(15, 122, 59, 0.09);
}

.service-card img {
 width: 100%;
 aspect-ratio: 16 / 10;
 object-fit: cover;
 background: #eef8f0;
 transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
 will-change: transform;
}

.service-card:hover img {
 transform: scale(1.035);
 filter: saturate(1.05) brightness(1.03);
}

.service-card div { padding: 24px; }
.service-card h3 { margin-bottom: 10px; color: var(--brand-dark); font-size: 24px; }
.service-card p { margin-bottom: 18px; color: var(--muted); }

.diskon-section {
 overflow: hidden;
 color: var(--white);
 background:
  radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.22), transparent 34%),
  linear-gradient(135deg, rgba(7, 84, 42, 0.96), rgba(15, 122, 59, 0.86)),
  url("../../Galeri/Service-Freestanding_8.jpeg") center/cover;
}

.diskon-card {
 display: grid;
 grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
 gap: 28px;
 align-items: stretch;
 padding: clamp(24px, 4vw, 42px);
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 28px;
 background: rgba(255, 255, 255, 0.11);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 box-shadow: 0 28px 80px rgba(7, 84, 42, 0.25);
}

.diskon-copy {
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.diskon-card h2 {
 max-width: 760px;
 margin-bottom: 16px;
 color: #ffffff;
 font-size: clamp(34px, 5vw, 58px);
 line-height: 1.02;
 letter-spacing: -0.04em;
}

.diskon-card p {
 max-width: 700px;
 margin-bottom: 26px;
 color: #ecfff2;
 font-size: 18px;
}

.diskon-panel {
 display: flex;
 flex-direction: column;
 justify-content: center;
 min-height: 270px;
 padding: 28px;
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 24px;
 background: rgba(255, 255, 255, 0.14);
}

.diskon-number {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: max-content;
 min-width: 136px;
 min-height: 86px;
 padding: 10px 18px;
 margin-bottom: 18px;
 color: var(--brand-dark);
 background: #ffffff;
 border-radius: 18px;
 font-size: 48px;
 font-weight: 900;
 line-height: 1;
 letter-spacing: -0.06em;
 box-shadow: 0 18px 40px rgba(7, 84, 42, 0.2);
}

.diskon-panel strong {
 display: block;
 margin-bottom: 14px;
 font-size: 24px;
 line-height: 1.15;
}

.diskon-panel ul {
 display: grid;
 gap: 10px;
 margin: 0 0 18px;
 padding: 0;
 list-style: none;
}

.diskon-panel li {
 position: relative;
 padding: 10px 12px 10px 36px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.14);
 font-weight: 750;
}

.diskon-panel li::before {
 content: "✓";
 position: absolute;
 left: 14px;
 top: 9px;
 color: #ffffff;
 font-weight: 900;
}

.diskon-panel small { color: #defae6; }

.gallery {
 color: var(--white);
 background:
  radial-gradient(circle at 15% 0%, rgba(34, 197, 94, 0.16), transparent 30%),
  linear-gradient(180deg, #07351d, #052414);
}

.gallery .section-title h2 { color: #ffffff; }
.gallery .section-title p { color: #d7f2df; }
.gallery-carousel { position: relative; }

.gallery-viewport {
 overflow: hidden;
 border-radius: 20px;
 box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.gallery-track {
 display: flex;
 transition: transform 0.55s var(--ease-out);
 will-change: transform;
}

.gallery-slide {
 flex: 0 0 100%;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(2, minmax(0, 1fr));
 gap: 14px;
}

.gallery-item {
 display: block;
 width: 100%;
 padding: 0;
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, 0.14);
 border-radius: 16px;
 background: rgba(255, 255, 255, 0.08);
 cursor: zoom-in;
 transform: translate3d(0, 0, 0);
}

.gallery-item img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 transition: transform 0.55s var(--ease-out), filter 0.55s var(--ease-out);
 will-change: transform;
}

.gallery-item:hover img {
 transform: scale(1.055);
 filter: brightness(1.08) saturate(1.06);
}

.carousel-control {
 position: absolute;
 top: 50%;
 z-index: 3;
 display: grid;
 place-items: center;
 width: 44px;
 height: 44px;
 border: 1px solid rgba(255, 255, 255, 0.22);
 border-radius: 50%;
 color: var(--white);
 background: rgba(7, 84, 42, 0.78);
 cursor: pointer;
 transform: translate3d(0, -50%, 0);
 transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
 font-size: 32px;
 line-height: 1;
 will-change: transform;
}

.carousel-control:hover {
 background: rgba(22, 163, 74, 0.95);
 transform: translate3d(0, -50%, 0) scale(1.05);
 box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

.carousel-prev { left: -22px; }
.carousel-next { right: -22px; }

.testimoni-section {
 background: linear-gradient(180deg, #f2faf5 0%, #ffffff 100%);
}

.testimoni-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 18px;
}

.testimoni-card {
 display: flex;
 flex-direction: column;
 min-width: 0;
 overflow: hidden;
 border: 1px solid var(--line);
 border-radius: 20px;
 background: var(--white);
 box-shadow: 0 14px 34px rgba(15, 122, 59, 0.08);
}

.testimoni-card img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 background: #eef8f0;
 transition: transform 0.55s var(--ease-out);
 will-change: transform;
}

.testimoni-card:hover img { transform: scale(1.035); }

.testimoni-content {
 display: flex;
 flex: 1;
 flex-direction: column;
 padding: 16px;
}

.stars {
 margin-bottom: 10px;
 color: var(--gold);
 letter-spacing: 1px;
 font-size: 15px;
 line-height: 1;
 white-space: nowrap;
}

.testimoni-content p {
 flex: 1;
 margin-bottom: 14px;
 color: #314338;
 font-size: 14px;
 line-height: 1.55;
}

.testimoni-content strong {
 display: block;
 font-size: 15px;
 line-height: 1.2;
}

.testimoni-content span {
 margin-top: 3px;
 color: var(--muted);
 font-size: 13px;
}

.contact {
 background: linear-gradient(135deg, #f2faf5, #ffffff);
}

.contact-box {
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 gap: 28px;
 align-items: stretch;
 overflow: hidden;
 border: 1px solid var(--line);
 border-radius: 24px;
 background: var(--white);
 box-shadow: var(--shadow);
}

.contact-copy { padding: 34px; }
.contact-copy .eyebrow { color: var(--brand); }

.contact-copy h2 {
 margin-bottom: 10px;
 color: var(--brand-dark);
 font-size: clamp(30px, 4vw, 46px);
 line-height: 1.08;
}

.contact-copy p { color: var(--muted); }
.contact-actions { margin-top: 24px; }

.contact-diskon {
 display: grid;
 align-content: center;
 padding: 34px;
 color: var(--white);
 background:
  linear-gradient(rgba(7, 84, 42, 0.88), rgba(7, 84, 42, 0.94)),
  url("../../Galeri/Service-Freestanding_21.jpeg") center/cover;
}

.contact-diskon strong {
 display: block;
 max-width: 390px;
 margin-bottom: 8px;
 font-size: 30px;
 line-height: 1.12;
}

.contact-diskon span { color: #e4faea; }

.site-footer {
 padding: 24px 0;
 color: #e3fae9;
 background: linear-gradient(135deg, #052414, #07351d);
 font-size: 14px;
}

.footer-inner {
 display: flex;
 justify-content: space-between;
 gap: 18px;
}

.footer-inner a { font-weight: 750; }

.floating-contact {
 position: fixed;
 bottom: 20px;
 z-index: 60;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: var(--white);
 border: 2px solid #ffffff;
 box-shadow: 0 16px 32px rgba(7, 84, 42, 0.24);
 transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
 transform: translate3d(0, 0, 0);
 will-change: transform;
}

.floating-contact:hover { transform: translate3d(0, -2px, 0); }

.floating-contact svg {
 width: 26px;
 height: 26px;
 fill: currentColor;
}

.floating-contact span {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 white-space: nowrap;
}

.float-call {
 left: 20px;
 width: 54px;
 height: 54px;
 border-radius: 50%;
 background: var(--brand-dark);
}

.float-call:hover { background: var(--brand); }

.float-wa {
 right: 20px;
 width: auto;
 min-width: 0;
 min-height: 0;
 height: 50px;
 padding: 0 20px;
 border-radius: 12px;
 background: linear-gradient(135deg, #25d366, #16a34a);
 color: #ffffff;
 font-size: 15px;
 font-weight: 850;
 letter-spacing: 0.01em;
 box-shadow: 0 18px 38px rgba(22, 163, 74, 0.38);
}

.float-wa:hover {
 background: linear-gradient(135deg, #16a34a, #0f8f3d);
 box-shadow: 0 20px 42px rgba(15, 143, 61, 0.44);
}

.lightbox {
 position: fixed;
 inset: 0;
 z-index: 100;
 display: none;
 align-items: center;
 justify-content: center;
 padding: 24px;
 background: rgba(5, 36, 20, 0.9);
}

.lightbox.is-open { display: flex; }

.lightbox img {
 max-width: min(100%, 1100px);
 max-height: 88vh;
 object-fit: contain;
 border-radius: 16px;
 box-shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
 animation: lightboxIn 0.26s var(--ease-out) both;
}

.lightbox-close {
 position: absolute;
 top: 20px;
 right: 22px;
 width: 44px;
 height: 44px;
 border: 1px solid rgba(255, 255, 255, 0.28);
 border-radius: 50%;
 color: var(--white);
 background: rgba(255, 255, 255, 0.12);
 cursor: pointer;
 font-size: 30px;
 line-height: 1;
 transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out);
}

.lightbox-close:hover {
 transform: rotate(90deg) scale(1.04);
 background: rgba(255, 255, 255, 0.2);
}

.reveal {
 opacity: 1;
 transform: none;
}

.js .reveal {
 opacity: 0;
 transform: translate3d(0, 28px, 0);
 transition: opacity 0.82s var(--ease-out), transform 0.82s var(--ease-out);
 will-change: opacity, transform;
}

.js .reveal.is-visible {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

.feature:nth-child(2),
.service-card:nth-child(2),
.testimoni-card:nth-child(2) { transition-delay: 0.04s; }
.feature:nth-child(3),
.testimoni-card:nth-child(3) { transition-delay: 0.08s; }
.feature:nth-child(4),
.testimoni-card:nth-child(4) { transition-delay: 0.12s; }

@keyframes navDrop {
 from { opacity: 0; transform: translate3d(0, -16px, 0); }
 to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes iconFloat {
 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
 50% { transform: translate3d(0, -3px, 0) rotate(2deg); }
}

@keyframes panelFloat {
 0%, 100% { transform: translate3d(0, 0, 0); }
 50% { transform: translate3d(0, -7px, 0); }
}

@keyframes softDrift {
 from { transform: translate3d(0, 0, 0) rotate(-8deg); }
 to { transform: translate3d(-28px, -18px, 0) rotate(-5deg); }
}

@keyframes lightboxIn {
 from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.98); }
 to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after {
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
 }
 .reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1180px) {
 .testimoni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
 .nav-inner,
 .section-title,
 .footer-inner {
  align-items: flex-start;
  flex-direction: column;
 }

 .nav-inner {
  gap: 14px;
  padding: 14px 0;
 }

 .nav-links {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
 }

 .nav-links::-webkit-scrollbar { display: none; }
 .hero-inner,
 .contact-box,
 .diskon-card { grid-template-columns: 1fr; }
 .quick-proof,
 .feature-grid { grid-template-columns: repeat(2, 1fr); }
 .services-grid { grid-template-columns: 1fr; }
 .gallery-slide {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
 }
 .carousel-prev { left: 10px; }
 .carousel-next { right: 10px; }
}

@media (max-width: 720px) {
 .testimoni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
 html { scroll-padding-top: 120px; }
 .nav-inner {
  min-height: auto;
  padding: 14px 0;
 }
 .brand { white-space: normal; }
 .brand::before {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex: 0 0 auto;
 }
 .nav-links a { min-height: 36px; padding: 7px 11px; font-size: 14px; }
 .hero { min-height: auto; }
 .hero-inner { padding: 58px 0 42px; }
 .hero-actions,
 .contact-actions,
 .diskon-actions { flex-direction: column; }
 .button { width: 100%; }
 .quick-proof,
 .feature-grid,
 .testimoni-grid { grid-template-columns: 1fr; }
 .gallery-slide {
  grid-template-columns: 1fr;
  grid-template-rows: none;
 }
 section { padding: 56px 0; }
 .diskon-card,
 .diskon-panel,
 .contact-copy,
 .contact-diskon { padding: 24px; }
 .diskon-number {
  min-width: 118px;
  min-height: 74px;
  font-size: 40px;
 }
 .float-call {
  left: 14px;
  width: 50px;
  height: 50px;
 }
 .float-wa {
  right: 14px;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
 }
}