:root{
  --brand:#e11d2e;
  --brand-dark:#b50f23;
  --accent:#111827;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a;background:#ffffff;scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.badge{display:inline-block;padding:.35rem .6rem;border-radius:999px;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;font-size:.8rem;font-weight:800}
.section{padding:72px 0}
.section.white{background:#ffffff}
.section.alt{background:#f8fafc}
.section.tint{background:#fff5f5}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid #e5e7eb}
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:#334155;font-weight:700;padding:12px;border-radius:10px}
.nav a:hover{background:#fee2e2;color:#991b1b}
.logo{display:flex;align-items:center;gap:.8rem}
.logo img{width:40px;height:40px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;min-height:66vh}
.hero h1{font-size:clamp(32px,3.2vw,48px);line-height:1.1;margin:.2rem 0 .8rem;color:#0f172a}
.hero p{color:#334155;margin:0 0 1rem}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px}
.hero-box{border-radius:22px;padding:24px}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 960px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
}
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--brand);color:#fff;padding:.9rem 1.2rem;border-radius:14px;font-weight:800;border:0;cursor:pointer;box-shadow:0 8px 24px rgba(225,29,46,.25);transition:.2s}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn-outline{background:#ffffff;border:2px solid var(--brand);color:var(--brand)}
.btn-green{background:#16a34a}
.features .card p{color:#475569;font-size:.95rem}
.partners a{display:flex;align-items:center;justify-content:center}
.partners img{width:240px;height:96px;object-fit:contain;background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.faq details{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px}
.faq summary{cursor:pointer;font-weight:800;color:#0f172a}
.kontak .card{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.map-embed{position:relative;overflow:hidden;border-radius:14px;min-height:260px}
.footer{border-top:1px solid #e5e7eb;padding:24px 0;color:#475569;font-size:.95rem}
/* Mobile nav */
.mobile-nav-toggle{display:none}
.mobile-menu{display:none}
@media (max-width: 640px){
  .nav{display:none}
  .mobile-nav-toggle{display:flex;gap:10px;align-items:center}
  .mobile-menu{display:none;position:absolute;top:64px;left:0;right:0;background:#ffffff;border-bottom:1px solid #e5e7eb;padding:10px 20px}
  .mobile-menu a{display:block;padding:12px 10px;color:#0f172a}
  .mobile-sub{border-top:1px dashed #e5e7eb;margin-top:6px;padding-top:6px}
  .mobile-sub span{display:block;font-weight:800;color:#991b1b;margin:6px 0 2px}
}
/* Dropdown */
.dropdown{position:relative}
.dropdown > a::after{content:' ▾';font-size:.9em}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;min-width:260px;box-shadow:0 12px 24px rgba(0,0,0,.06);padding:8px;z-index:100}
.dropdown-menu a{display:block;color:#0f172a;padding:10px;border-radius:10px}
.dropdown-menu a:hover{background:#fee2e2;color:#991b1b}
.dropdown:hover .dropdown-menu{display:block}
/* Inputs */
input,select{width:100%;background:#fff;border:1px solid #e5e7eb;color:#0f172a;border-radius:12px;padding:12px 14px;outline:none}
label{font-weight:800;font-size:.9rem;color:#0f172a}
.form-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.success{border-left:4px solid #22c55e;padding:12px 14px;background:#ecfdf5;border-radius:12px;color:#065f46}
.warning{border-left:4px solid #f59e0b;padding:12px 14px;background:#fffbeb;border-radius:12px;color:#92400e}
/* Why icons */
.why-ico{width:44px;height:44px;border-radius:12px;background:#fee2e2;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.why h3{margin:.2rem 0}
.why p{color:#475569}
/* FAB */
.sticky-actions{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:60}
.fab{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e5e7eb;color:#991b1b;box-shadow:0 10px 20px rgba(0,0,0,.08);cursor:pointer}
.fab:hover{transform:translateY(-2px)}
.fab.whatsapp{background:#22c55e;color:#fff;border-color:#22c55e}
.fab.top{display:none}
@media (max-width:640px){.fab.top{display:flex}}
/* Slider */
.slider{position:relative;overflow:hidden;border-radius:18px;padding:0}
.slider .slides{display:flex;transition:transform .5s ease}
.slider .slides img{flex:0 0 100%;width:100%;height:auto;object-fit:cover}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.12);cursor:pointer}
.slide-btn.prev{left:10px}
.slide-btn.next{right:10px}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.dots button{width:8px;height:8px;border-radius:50%;border:0;background:#e5e7eb;cursor:pointer}
.dots button.active{background:#e11d2e}

/* Partners: tetap 3 kolom di mobile */
.partners.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width: 640px){
  .partners.grid-3{grid-template-columns:repeat(3,1fr)}
  .partners img{width:100%;height:auto}
}
/* Center icons & headings in 'Kenapa' */
.why{text-align:center}
.why .why-ico{margin:0 auto 10px}
/* Full width map section */
.map-full{position:relative;width:100vw;height:420px;margin-left:calc(50% - 50vw);}
.map-full iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Mobile menu panel */
.mobile-menu{display:none;position:fixed;right:16px;top:70px;left:auto;width:88vw;max-width:360px;max-height:70vh;overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);z-index:60;padding:10px 16px}
.mobile-menu.show{display:block !important}
.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:50}
.mobile-backdrop.show{display:block}

/* Slider height adjustments */
.slider{min-height:520px}
.slider .slides{min-height:520px}
.slider .slides img{height:520px;object-fit:cover}
@media (max-width: 640px){
  .slider{min-height:380px}
  .slider .slides{min-height:380px}
  .slider .slides img{height:380px}
}

/* === Interactive polish (0.3s transitions + hover effects) === */
:root{ --brand:#e11d2e; --brand-dark:#b91c1c; }
#kenapa .card.why,
#layanan .card,
#layanan .card.why{
  transition: transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
#kenapa .card.why:hover,
#layanan .card:hover,
#layanan .card.why:hover{
  transform: translateY(-4px) scale(1.03);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 16px 40px rgba(225,29,72,.3);
  border-color: var(--brand-dark);
}
#kenapa .card.why:hover *,
#layanan .card:hover *,
#layanan .card.why:hover *{ color:#fff !important; }

#partner .partners img{
  transition: transform .3s ease, filter .3s ease;
  will-change: transform;
}
#partner .partners a:hover img,
#partner .partners img:hover{
  animation: kre-shake .3s linear infinite;
  filter: saturate(1.05) contrast(1.05);
}
@keyframes kre-shake{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  25%{ transform: translate(1px,-1px) rotate(-1deg); }
  50%{ transform: translate(-1px,1px) rotate(1deg); }
  75%{ transform: translate(1px,1px) rotate(0deg); }
}

#faq summary{
  transition: background-color .3s ease, color .3s ease, transform .1s ease;
  border-radius: 10px;
}
#faq summary:hover{
  background: var(--brand);
  color:#fff;
  animation: kre-shake .3s linear;
}

/* Map iframe click-through so section handles the click */
#maps iframe{ pointer-events: none; }

/* ===== Preloader (KRE) ===== */
.preload-overlay{position:fixed;inset:0;z-index:99999;background:var(--brand);display:flex;align-items:center;justify-content:center;transition:opacity .4s ease .1s,visibility 0s linear .5s}
.preload-overlay.done{opacity:0;visibility:hidden}
.preload-words{display:flex;gap:clamp(12px,2vw,28px);font-weight:900;color:#fff;font-size:clamp(42px,8vw,96px);line-height:1.05;letter-spacing:.02em;user-select:none}
.preload-words .pw{position:relative;display:inline-block;padding:0 .06em;will-change:transform,opacity}
@keyframes curtainFly{0%{transform:translateY(0) rotate(0);opacity:1;filter:blur(0)}60%{transform:translateY(-80%) rotate(-2deg);opacity:.75}100%{transform:translateY(-120%) rotate(-3deg);opacity:0;filter:blur(2px)}}
.preload-words .pw.fly{animation:curtainFly .7s ease forwards;transform-origin:50% 0%}
body.preload-lock{overflow:hidden}
@media (max-width:480px){
  .preload-words{ font-size: clamp(40px, 12vw, 84px); gap: clamp(8px, 4vw, 20px); letter-spacing:.01em }
}