/* AYS SERVICE FITNESS — GARANG EDITION: dark industrial, merah menyala */
:root{--bg:#07090d;--bg2:#0d131c;--card:#111927;--ink:#0c1118;--muted:#5d6b7d;--line:#e4e9f1;--navy:#0a2a5c;--red:#e62a2e;--red2:#ff2e2e;--orange:#ff6a00;--yellow:#ffb800;--radius:18px;--shadow:0 18px 50px rgba(0,0,0,.35);--max:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#eef2f8;background:#080b10;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}.container{max-width:var(--max);margin:0 auto;padding:0 20px}
::selection{background:var(--red);color:#fff}
.skip{position:absolute;left:-999px;background:#fff;color:#000;padding:10px 16px;z-index:200}.skip:focus{left:10px;top:10px}
/* ticker garang */
.topbar{background:#000;color:#ffd7d7;font-size:13px;border-bottom:2px solid var(--red);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.topbar .container{display:flex;gap:14px;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:800;background:linear-gradient(135deg,var(--red),var(--orange));padding:6px 16px;border-radius:999px;font-size:12.5px}
/* header garang */
.header{position:sticky;top:0;z-index:100;background:rgba(5,7,11,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.header::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--red) 0%,var(--orange) 40%,transparent 100%)}
.navwrap{display:flex;align-items:center;gap:14px;padding:10px 20px;max-width:var(--max);margin:0 auto;position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:185px;height:52px;object-fit:contain;object-position:left;background:#fff;border-radius:10px;box-shadow:0 0 0 2px rgba(230,42,46,.6),0 8px 24px rgba(230,42,46,.35)}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{font-size:13px;font-weight:800;text-decoration:none;padding:9px 10px;border-radius:8px;color:#dbe4f2;text-transform:uppercase;letter-spacing:.03em}
.nav a:hover{background:rgba(230,42,46,.15);color:#fff;box-shadow:inset 0 -2px 0 var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:15px 28px;font-weight:800;text-decoration:none;border:0;cursor:pointer;transition:.18s;font-size:15.5px;text-transform:uppercase;letter-spacing:.04em;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn-primary{background:linear-gradient(135deg,#ff2e2e,#ff6a00);color:#fff;box-shadow:0 10px 34px rgba(255,46,46,.45),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 44px rgba(255,46,46,.6)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--red2);background:rgba(230,42,46,.12)}
.btn-dark{background:#fff;color:#0a0f18}.btn-sm{padding:10px 18px;font-size:13px}
.hamburger{display:none;margin-left:auto;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;border:0;border-radius:10px;padding:11px 14px;font-size:18px}
/* HERO garang: foto asli full-bleed + overlay */
.hero{position:relative;color:#fff;overflow:hidden;background:#05070b}
.hero-bg{position:absolute;inset:0;background:url("../../image/images/WhatsApp%20Image%202026-10-11%20at%2022.39.10.jpeg") center/cover no-repeat;filter:saturate(1.25) contrast(1.08)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,5,9,.96) 20%,rgba(3,5,9,.75) 48%,rgba(120,10,12,.45) 100%),linear-gradient(0deg,rgba(3,5,9,.95),transparent 45%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:72px 20px 56px;max-width:var(--max);margin:0 auto}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;background:rgba(255,46,46,.14);border:1px solid rgba(255,46,46,.55);color:#ffb3b3;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.hero-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:#ff2e2e;box-shadow:0 0 12px #ff2e2e;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.35}}
.badge{display:inline-flex;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:8px 14px;border-radius:10px;font-size:13px;font-weight:700;margin-top:14px}
.hero h1{font-size:clamp(34px,5vw,62px);line-height:1.02;margin:18px 0;letter-spacing:-.02em;font-weight:800;text-transform:uppercase}
.hero h1 span{background:linear-gradient(90deg,#ff5a5a,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:#cbd7ea;font-size:17px;max-width:640px}
.usp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.usp div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 14px;font-size:14px;font-weight:700}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:#aebdd4;font-size:13.5px;font-weight:600}
.hero-card{background:#fff;color:var(--ink);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.hero-card .photo{background:linear-gradient(135deg,#0a2a5c,#1c448f 45%,#e62a2e 140%);padding:26px;color:#fff}
.hero-card .photo img{background:#fff;border-radius:14px;padding:8px}
.hero-card .body{padding:22px}.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.kv div{background:#f3f6fb;border-radius:12px;padding:10px 12px;font-size:13.5px}
section{padding:64px 0}.sec-head{max-width:780px;margin:0 auto 30px;text-align:center}
.eyebrow{color:var(--red);font-weight:800;letter-spacing:.14em;font-size:12.5px;text-transform:uppercase}
.sec-head h2{font-size:clamp(26px,3.2vw,38px);line-height:1.2;margin:10px 0}.sec-head p{color:var(--muted)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 8px 28px rgba(15,25,40,.06);transition:.22s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{margin:12px 0 8px;font-size:20px}.card ul{margin:12px 0;padding-left:18px;color:#334154;font-size:14.5px}.card ul li{margin:6px 0}
.icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,var(--navy),#1a4aa0);color:#fff}
.icon.red{background:linear-gradient(135deg,var(--red),var(--orange))}
.pop{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px}
.svc-img{height:168px;border-radius:14px;background:linear-gradient(135deg,#0a2a5c,#24407a 55%,#e62a2e 160%);display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.svc-img span{font-size:62px}
.svc-img::after{content:"AYS SERVICE FITNESS";position:absolute;bottom:10px;right:12px;font-size:11px;letter-spacing:.12em;opacity:.7;font-weight:800}
.why{background:var(--bg2);color:#e9eef6}.why .sec-head p{color:#aebdd4}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px}.why-item b{color:#fff}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal figure{margin:0;background:#111927;color:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.gal .ph{height:170px;display:grid;place-items:center;font-size:54px;background:linear-gradient(135deg,#1a2740,#0a2a5c 50%,#b81f23)}
.gal figcaption{padding:14px 16px;font-size:14px;color:#d3deef}
.area{background:linear-gradient(180deg,#fff,#eef3fa);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.chips span{background:#111927;color:#fff;padding:10px 18px;border-radius:999px;font-weight:800;font-size:14.5px}
.faq{max-width:860px;margin:0 auto}.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:6px 18px}
.faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq details p{color:#3a4a60}
/* GARANG 1: base gelap + hero foto */
body{background:#07090d;color:#eef2f8;overflow-x:hidden}
.topbar{background:#000;border-bottom:2px solid #e62a2e;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.topbar a{background:linear-gradient(135deg,#ff2e2e,#ff6a00);padding:6px 16px;border-radius:999px;font-size:12.5px;font-weight:800}
.header{background:rgba(5,7,11,.94);border-bottom:1px solid rgba(255,255,255,.08)}
.header::after{content:"";display:block;height:3px;background:linear-gradient(90deg,#e62a2e,#ff6a00,transparent)}
.brand img{box-shadow:0 0 0 2px rgba(230,42,46,.6),0 8px 24px rgba(230,42,46,.35)}
.nav{background:#0a0e15}
.nav a{color:#dbe4f2;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.nav a:hover{background:rgba(230,42,46,.16);color:#fff;box-shadow:inset 0 -2px 0 #e62a2e}
.btn{border-radius:12px;text-transform:uppercase;letter-spacing:.04em;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn-primary{background:linear-gradient(135deg,#ff2e2e,#ff6a00);box-shadow:0 10px 34px rgba(255,46,46,.45)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4)}
.hamburger{background:linear-gradient(135deg,#e62a2e,#ff6a00)}
.hero{position:relative;background:#05070b}
.hero-bg{position:absolute;inset:0;background:url("../../image/images/WhatsApp%20Image%202026-10-11%20at%2022.39.10.jpeg") center/cover no-repeat;filter:saturate(1.3) contrast(1.1)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,5,9,.96) 20%,rgba(3,5,9,.7) 50%,rgba(120,10,12,.5) 100%),linear-gradient(0deg,rgba(3,5,9,.95),transparent 45%)}
.hero-grid{position:relative;padding-top:72px;padding-bottom:56px}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;background:rgba(255,46,46,.14);border:1px solid rgba(255,46,46,.55);color:#ffb3b3;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.hero-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:#ff2e2e;box-shadow:0 0 12px #ff2e2e;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.hero h1{text-transform:uppercase}
.hero h1 span{filter:drop-shadow(0 4px 22px rgba(255,46,46,.45))}
.usp div{border-left:4px solid #ff2e2e;border-radius:12px;font-size:13.5px;font-weight:800;text-transform:uppercase}
.trust{color:#ffcfcf;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.cta{background:linear-gradient(135deg,#0a2a5c,#101c36 55%,#c41e22);color:#fff;border-radius:26px;padding:52px 36px;text-align:center}
.cta h2{font-size:clamp(26px,3.4vw,40px);margin:0 0 12px}
footer{background:#0a0f18;color:#b9c6db;padding:48px 0 22px}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:22px}
footer a{color:#d6e1f3;text-decoration:none}footer a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.reveal{opacity:1;transform:none}}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.grid3,.why-grid,.steps,.gal{grid-template-columns:repeat(2,1fr)}.fgrid{grid-template-columns:1fr 1fr}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:10px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.hamburger{display:block}.usp{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
@media(max-width:600px){.grid3,.why-grid,.steps,.gal,.fgrid{grid-template-columns:1fr}section{padding:46px 0}.brand img{width:150px}.cta{padding:36px 20px}}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
/* GARANG 2: foto + kartu + galeri */
.hero-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-photos figure{margin:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 24px 60px rgba(0,0,0,.55);min-height:240px;background:#000}
.hero-photos figure:first-child{grid-column:1/-1;min-height:290px}
.hero-photos img{width:100%;height:100%;min-height:inherit;max-height:320px;object-fit:cover;filter:saturate(1.25) contrast(1.07)}
.hero-photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:linear-gradient(transparent,rgba(0,0,0,.88))}
.hero-photos figcaption b{color:#ff6a5e}
#layanan,#faq{background:#0a0e15}
#layanan .sec-head h2,#faq .sec-head h2{color:#fff}
.sec-head p{color:#9fb0c8}
.eyebrow{display:inline-block;background:rgba(255,46,46,.1);border:1px solid rgba(255,46,46,.4);color:#ff5a5a;padding:7px 16px;border-radius:999px;margin-bottom:12px;font-size:12.5px;letter-spacing:.18em}
.sec-head h2{text-transform:uppercase}
.marquee{background:linear-gradient(90deg,#c11111,#ff2e2e 50%,#c11111);color:#fff;overflow:hidden;white-space:nowrap;border-top:3px solid #000;border-bottom:3px solid #000;padding:12px 0;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:14px}
h1,h2,h3,.nav a,.btn,.marquee,.pop{font-family:Oswald,"Plus Jakarta Sans",Arial,sans-serif}
.marquee span{display:inline-block;padding:0 18px;animation:run 22s linear infinite;white-space:nowrap}
.card h3,.card p,.card ul,.card a{margin-left:24px;margin-right:24px}
.card h3{margin-top:18px}.card a{margin-bottom:24px}
@keyframes run{to{transform:translateX(-50%)}}
.card{background:#101722;border:1px solid rgba(255,255,255,.1);color:#dbe4f2;overflow:hidden;padding:0}
.card .pad{padding:24px}
.card h3{color:#fff;text-transform:uppercase}
.card ul{color:#aebdd4}
.svc-img{height:220px;position:relative;overflow:hidden;background:#000;border-radius:0}
.svc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.25) contrast(1.07)}
.svc-img::after{content:"DOKUMENTASI ASLI AYS";position:absolute;bottom:10px;right:12px;font-size:10.5px;letter-spacing:.14em;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.25)}
.why{background:#0d131c;color:#e9eef6}
.step{background:#101722;border:1px solid rgba(255,255,255,.1);color:#dbe4f2}
.step p{color:#9fb0c8}
.step i{background:linear-gradient(135deg,#ff2e2e,#ff6a00)}
.gal figure{background:#101722;border:1px solid rgba(255,255,255,.1)}
.gal .ph{padding:0;height:210px;overflow:hidden}
.gal .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(1.25) contrast(1.07)}
.gal figcaption{color:#d3deef}
.area{background:#0a0e15;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);color:#dbe4f2}
.area .box{background:#101722;border:1px solid rgba(255,255,255,.1);color:#dbe4f2}
.area .box p{color:#9fb0c8}
.faq details{background:#101722;border:1px solid rgba(255,255,255,.12)}
.faq summary{color:#fff}
.faq details p{color:#9fb0c8}
.cta{background:linear-gradient(135deg,#5c0a0c,#101c36 55%,#0a0f18);border:1px solid rgba(255,46,46,.4)}
@media(max-width:980px){.hero-photos figure{min-height:200px}.hero-photos figure:first-child{min-height:240px}}
.wa{position:fixed;right:18px;bottom:18px;z-index:120;background:#22c55e;color:#fff;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:30px;text-decoration:none;box-shadow:0 14px 34px rgba(34,197,94,.45)}
.reveal{opacity:0;transform:translateY(18px);transition:.6s}.reveal.in{opacity:1;transform:none}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.step i{font-style:normal;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#111927;color:#fff;font-weight:800}