/* =====================================================
   KARYA BAJA MANDIRI — style.css (red-black elegant)
   ===================================================== */

/* ---------- Base variables ---------- */
:root{
  --bg: #f7f7f7;
  --text: #222222;
  --muted: #6b6b6b;
  --card: #fff;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.12);
  --transition: all .35s ease;
  --accent-red: #8b0000;
  --accent-red-bright: #ff4b4b;
  --btn-text: #fff;
  --hero-text: #fff;
  --max-width: 1200px;
  --glass: rgba(255,255,255,0.06);
}

/* Dark mode variables toggled by .dark-mode */
body.dark-mode{
  --bg:#101010;
  --text:#f3f3f3;
  --card:#1b1b1b;
  --muted:#bfbfbf;
  --accent-red:#b33b3b;
  --accent-red-bright:#ff6b6b;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0;scroll-behavior:smooth;}
html,body{height:100%;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:70px;
}

/* Container */
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px;}

/* Accessibility helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(90deg,var(--accent-red) 0%, #3b0000 100%);
  color:var(--hero-text);
  box-shadow: var(--shadow-soft);
  padding:12px 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:72px;height:auto;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,0.25);object-fit:cover;}
.brand-text h1{font-family:"Cinzel Decorative",cursive;font-size:1.25rem;margin:0;color:#fff;letter-spacing:0.6px;}
.brand-text p{font-size:.85rem;margin:2px 0 0;color:rgba(255,255,255,0.9);}

/* top-cta */
.top-cta a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;text-decoration:none;color:#fff;font-weight:600;backdrop-filter:blur(4px);}
.top-cta a.phone{background:rgba(255,255,255,0.06);}
.top-cta a.wa{background:rgba(0,0,0,0.12)}

/* ---------- Theme toggle ---------- */
.theme-toggle{position:fixed;right:14px;top:14px;z-index:110;border:none;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.08);color:#fff;font-size:16px;cursor:pointer;backdrop-filter:blur(6px);}

/* ---------- HERO (Merah kehitaman) ---------- */
.hero{
  padding:48px 0;
  color:var(--hero-text);
  border-bottom: 3px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(139,0,0,0.95) 0%, rgba(27,0,0,0.8) 60%, #000000 100%);
}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;max-width:var(--max-width);margin:0 auto;padding:40px 20px;}
@media (max-width:980px){ .hero-inner{grid-template-columns:1fr; text-align:center;} .hero-visual{order:-1;margin-bottom:18px;} }

.hero h2{font-family:"Cinzel Decorative",cursive;font-size:2.4rem;margin:0 0 12px;color:var(--hero-text);text-shadow:0 6px 20px rgba(0,0,0,0.6);}
.hero p{max-width:680px;margin:0 0 20px;color:rgba(255,255,255,0.92);font-size:1.05rem;}
.hero-visual img{width:100%;height:300px;object-fit:cover;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.5);filter:brightness(.94) contrast(1.02);}

/* Hero CTA buttons */
.hero-cta{display:flex;gap:12px;align-items:center;justify-content:center;}
.btn-primary, .btn-outline{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;cursor:pointer;transition:var(--transition);
}
.btn-primary{background:linear-gradient(90deg,var(--accent-red-bright),var(--accent-red));color:var(--btn-text);box-shadow:0 10px 30px rgba(139,0,0,0.2);}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(139,0,0,0.28);}
.btn-outline{background:transparent;color:var(--hero-text);border:1px solid rgba(255,255,255,0.12);}

/* ---------- Sections ---------- */
.section{padding:48px 0;}
.section h2{font-family:"Cinzel Decorative",cursive;font-size:1.85rem;margin-bottom:14px;color:var(--text);text-align:center;}
.section p{max-width:900px;margin:0 auto 18px;color:var(--muted);text-align:center;}

/* ---------- WHY GRID ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;list-style:none;padding:0;}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr; } }
.why-card{background:var(--card);border-radius:12px;padding:20px;box-shadow:var(--shadow-soft);text-align:center;}
.why-card .icon{width:56px;height:56px;border-radius:12px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--accent-red),#3b0000);color:#fff;font-size:20px;}
.why-card h3{margin:6px 0 8px;color:var(--text);}
.why-card p{color:var(--muted);font-size:.95rem;}

/* ---------- SERVICES ---------- */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px;}
@media (max-width:1100px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .services-grid{grid-template-columns:1fr;} }

.service-card{background:var(--card);border-radius:12px;padding:18px;box-shadow:var(--shadow-soft);transition:var(--transition);text-align:center;}
.service-card:hover{transform:translateY(-8px);box-shadow:0 18px 50px rgba(0,0,0,0.12);}
.svc-icon{width:64px;height:64px;border-radius:12px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--accent-red-bright),var(--accent-red));color:#fff;font-size:22px;}
.service-card h3{margin:0 0 8px;color:var(--text);}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;}
@media (max-width:980px){ .pricing-grid{grid-template-columns:1fr;} }

.price-card{background:var(--card);border-radius:12px;padding:22px;box-shadow:var(--shadow-soft);position:relative;overflow:visible;text-align:center;border:1px solid rgba(0,0,0,0.04);}
.price-card.popular{border:2px solid var(--accent-red);transform:scale(1.02);}
.price-card .ribbon{position:absolute;top:-10px;right:12px;background:var(--accent-red-bright);color:#fff;padding:8px 12px;border-radius:10px;font-weight:700;font-size:.85rem;}
.price-card h3{margin:0 0 10px;color:var(--text);}
.price-card .price{font-size:1.25rem;font-weight:800;color:var(--accent-red);}
.price-card ul{list-style:none;padding:0;margin:14px 0 18px;}
.price-card ul li{padding:8px 0;border-top:1px solid rgba(0,0,0,0.04);color:var(--muted);}

/* card cta */
.card-cta{display:inline-block;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,var(--accent-red),#3b0000);color:#fff;text-decoration:none;font-weight:700;}

/* ---------- GALLERY ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px;}
@media (max-width:1100px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .gallery-grid{grid-template-columns:1fr;} }

.gallery-grid figure{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .35s ease;}
.gallery-grid figure:hover{transform:translateY(-8px) scale(1.02);}
.gallery-grid img{width:100%;height:200px;object-fit:cover;display:block;}
.gallery-grid figcaption{padding:12px;font-weight:600;text-align:center;color:var(--text);}

/* lightbox */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:250;}
.lb-inner{max-width:90%;max-height:90%;}
.lb-inner img{max-width:100%;max-height:80vh;border-radius:8px;display:block;}
.lb-close{position:absolute;right:20px;top:20px;background:transparent;border:0;color:#fff;font-size:34px;cursor:pointer;}

/* ---------- FORM ---------- */
.form-wrap{padding-bottom:60px;}
.form-section{max-width:760px;margin:0 auto;background:var(--card);padding:28px;border-radius:12px;box-shadow:var(--shadow-soft);}
.form-section h2{margin-bottom:6px;color:var(--text);}
.form-section p{color:var(--muted);margin-bottom:14px;}
#orderForm{display:grid;gap:12px;}
#orderForm input,#orderForm textarea{padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:transparent;font-size:1rem;color:var(--text);}
#orderForm input:focus,#orderForm textarea:focus{outline:none;box-shadow:0 8px 30px rgba(139,0,0,0.08);border-color:var(--accent-red);}
.btn-primary.full-width{width:100%;text-align:center;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:12px;border-radius:10px;border:none;}

/* ---------- FOOTER ---------- */
.footer{position:relative;background:linear-gradient(to top,#b30000 0%,#0d0d0d 100%);color:#fff;padding-top:120px;margin-top:40px;overflow:visible;}
.footer-waves{position:absolute;top:0;left:0;width:100%;height:120px;pointer-events:none;transform:translateY(-48px);z-index:2;}
.footer-content{position:relative;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:40px 20px;}
@media (max-width:900px){ .footer-content{grid-template-columns:1fr;text-align:center;} }
.footer-section h3{font-size:1.1rem;margin-bottom:10px;border-bottom:2px solid rgba(255,255,255,0.08);padding-bottom:8px;}
.footer-section p,.footer-section a,.footer-section li{color:rgba(255,255,255,0.92);font-size:.95rem;line-height:1.6;}
.footer-bottom{text-align:center;padding:18px 0 36px;color:rgba(255,255,255,0.8);border-top:1px solid rgba(255,255,255,0.04);}

/* ---------- Floating Buttons ---------- */
.floating-buttons{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:12px;z-index:120;}
.float-btn{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-size:20px;box-shadow:var(--shadow-soft);transition:var(--transition);}
.phone-btn{background:#007bff;}
.wa-btn{background:#25D366;}
.float-btn:hover{transform:translateY(-6px);}

/* ---------- Small screens ---------- */
@media (max-width:600px){
  .header-inner{flex-direction:column;gap:8px;text-align:center;}
  .top-cta{display:flex;gap:8px;justify-content:center;}
  .hero-inner{padding:24px 12px;}
  .hero-visual img{height:200px;}
}

/* ---------- Animations & accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
  .hero-visual img{transform:none;}
}

/* small polish */
a{color:inherit}

/* SETTING OMBAK */
.footer-waves {
    position: relative;
    width: 100%;
    height: 80px; /* Sesuaikan dengan tinggi SVG */
    overflow: hidden;
}

.footer-waves svg {
    position: absolute;
    bottom: 0;
    width: 200%; /* Lebar memadai untuk animasi */
    height: 100%;
    transform: translateY(10px); /* Menggeser ke atas */
    animation: moveWaves 10s linear infinite;
}

@keyframes moveWaves {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-20%); /* Memindahkan gelombang ke kiri */
    }
}