/* ===== Teknisiku CCTV — Custom Styles ===== */
:root{
  --brand-teal-dark:#0f5c66;
  --brand-teal:#158a96;
  --brand-teal-light:#1fb3c2;
  --brand-blue:#1560d6;
  --brand-green:#22b14c;
  --brand-navy:#0b2540;
  --brand-ink:#16222b;
  --brand-muted:#5c6b73;
  --brand-bg-soft:#f4f9fa;
  --radius-lg:18px;
  --radius-md:12px;
  --shadow-soft:0 10px 30px rgba(15,92,102,.12);
}

body{
  font-family:'Plus Jakarta Sans', 'Poppins', system-ui, -apple-system, sans-serif;
  color:var(--brand-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.fw-black{ font-weight:800; letter-spacing:-.02em; }

.section-pad{ padding-block:clamp(3rem,6vw,5.5rem); }
.section-title{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:.5rem; }
.section-subtitle{ color:var(--brand-muted); max-width:640px; margin-inline:auto; }
.bg-soft{ background:var(--brand-bg-soft); }
.text-brand{ color:var(--brand-teal); }
.text-navy{ color:var(--brand-navy); }

/* Navbar */
.navbar-brand img{ height:38px; }
.navbar-teknisiku{ backdrop-filter:blur(8px); background:rgba(11,37,64,.97); }
.navbar-teknisiku .nav-link{ color:#e8f3f4; font-weight:600; padding-inline:.9rem; }
.navbar-teknisiku .nav-link:hover,
.navbar-teknisiku .nav-link.active{ color:var(--brand-teal-light); }

/* Toggle menu (hamburger) mobile - dibuat putih agar terlihat di navbar gelap */
.navbar-teknisiku .navbar-toggler{
  border-color:rgba(255,255,255,.55);
}
.navbar-teknisiku .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-teknisiku .navbar-toggler:focus{
  box-shadow:0 0 0 .15rem rgba(255,255,255,.35);
}
.btn-wa{
  background:var(--brand-green); color:#fff; font-weight:700; border-radius:999px;
  padding:.55rem 1.4rem; border:none; white-space:nowrap;
}
.btn-wa:hover{ background:#1c9440; color:#fff; }
.btn-brand-outline{
  border:2px solid #fff; color:#fff; font-weight:700; border-radius:999px; padding:.5rem 1.3rem;
}
.btn-brand-outline:hover{ background:#fff; color:var(--brand-navy); }

/* Hero */
.hero{
  background:linear-gradient(120deg,var(--brand-teal-dark),var(--brand-teal) 60%,#1c9aa6);
  color:#fff; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 55%);
}
.hero .badge-pill{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:.35rem .9rem; font-size:.8rem; font-weight:600; margin:.2rem;
}
.hero-img-wrap{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.hero-img-wrap img{ width:100%; height:auto; display:block; }

/* Service cards */
.service-card{
  border:1px solid #e7eef0; border-radius:var(--radius-md); padding:1.6rem;
  height:100%; transition:transform .2s ease, box-shadow .2s ease; background:#fff;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.service-icon{
  width:56px; height:56px; border-radius:14px; background:var(--brand-bg-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.service-icon img{ width:30px; height:30px; object-fit:contain; }

/* Brand strip */
.brand-strip img{ height:34px; width:auto; object-fit:contain; filter:grayscale(15%); opacity:.9; }

/* Price cards */
.price-card{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid #e7eef0;
  background:#fff; box-shadow:var(--shadow-soft); height:100%;
}
.price-card img{ width:100%; height:auto; display:block; }
.price-card .price-body{ padding:1.1rem 1.2rem 1.4rem; }
.price-tag{ font-size:1.6rem; font-weight:800; color:var(--brand-teal-dark); }
.badge-promo{ background:var(--brand-green); color:#fff; font-weight:700; border-radius:999px; }

/* Feature split section */
.feature-split{ border-radius:var(--radius-lg); overflow:hidden; }
.feature-split img{ width:100%; height:100%; object-fit:cover; }

/* Stats */
.stat-item img{ width:48px; height:48px; object-fit:contain; margin-bottom:.6rem; }
.stat-number{ font-size:1.9rem; font-weight:800; color:var(--brand-teal-dark); }

/* FAQ accordion */
.accordion-button:not(.collapsed){
  background:var(--brand-teal-dark); color:#fff;
}
.accordion-button:focus{ box-shadow:none; }
.accordion-button::after{ filter:none; }
.accordion-button:not(.collapsed)::after{ filter:invert(1); }

/* Client logos */
.client-logo{ height:46px; width:auto; object-fit:contain; opacity:.85; }

/* Footer */
footer.site-footer{ background:var(--brand-navy); color:#c9d6de; }
footer.site-footer a{ color:#c9d6de; text-decoration:none; }
footer.site-footer a:hover{ color:#fff; }
footer.site-footer h6{ color:#fff; font-weight:700; margin-bottom:1rem; }

/* Sticky WA button (mobile) */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:1050;
  width:56px; height:56px; border-radius:50%; background:var(--brand-green);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(34,177,76,.4);
  color:#fff; font-size:1.5rem;
}
.wa-float:hover{ color:#fff; }

/* Page hero (inner pages) */
.page-hero{
  background:linear-gradient(120deg,var(--brand-navy),var(--brand-teal-dark));
  color:#fff; padding-block:3.5rem;
}
.breadcrumb-custom a{ color:#bfe9ec; }
.breadcrumb-custom .active{ color:#fff; }

.card-icon-sm{
  width:44px;height:44px;border-radius:10px;background:var(--brand-bg-soft);
  display:flex;align-items:center;justify-content:center;
}