/* ==========================================================
   PREMIUM LAYER - Anugerah Solusindo
   Taruh SETELAH main.css. Tidak mengubah file lama.
   Palet: midnight navy + biru brand + champagne gold (aksen tipis)
   ========================================================== */

:root {
  --midnight: #070b16;
  --midnight-2: #0b1326;
  --navy-3: #16264a;
  --gold: #d6b676;
  --gold-light: #ecd9ae;
  --gold-line: rgba(214, 182, 118, 0.45);
  --glass: rgba(255, 255, 255, 0.06);
  --glass-line: rgba(255, 255, 255, 0.14);
}

html { scroll-behavior: smooth; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--midnight); }
body::-webkit-scrollbar-thumb { background: var(--navy-3); border-radius: 10px; }

/* ---------- HEADER ---------- */
header.sticky-header {
  background: rgba(7, 11, 22, 0.78);
  box-shadow: 0 1px 0 var(--gold-line), 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.header-wa { animation: none; box-shadow: 0 8px 20px -6px rgba(37, 211, 102, 0.5); }

/* ---------- HERO ---------- */
body .home-slider--wrapper__inner:before,
body .intro-page:before {
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(60, 136, 231, 0.38), transparent 62%),
    radial-gradient(700px 420px at 8% 95%, rgba(214, 182, 118, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(5, 8, 18, 0.80), rgba(5, 8, 18, 0.94));
}
.home-slider--wrapper__inner:after,
.intro-page:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}
body .home-slider--wrapper__inner .container h3 {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.24em;
  margin-bottom: 36px;
}
body .home-slider--wrapper__inner .container h1 {
  font-size: 68px;
  font-weight: 800;
  letter-spacing: -0.04em;
  max-width: 920px;
  margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 10px 50px rgba(0, 0, 0, 0.45);
}
body .home-slider--wrapper__inner .container p {
  font-size: 17px;
  line-height: 1.75;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.78);
}
body .home-slider--wrapper__inner .container .dot-dash { margin: 28px 0 32px; }

.hero-chips li {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 0.05em;
}

body .home-slider--nav div {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: #fff;
  font-size: 26px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body .home-slider--nav div:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}

/* ---------- BUTTONS ---------- */
body .button,
body .button.small {
  background: linear-gradient(180deg, #4b95f3 0%, #2f6fd6 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 16px 32px -10px rgba(47, 111, 214, 0.75);
  letter-spacing: 0.04em;
}
body .button:after { display: none; }
body .button:hover,
body .button.small:hover {
  background: linear-gradient(180deg, #5aa1f8 0%, #3677e0 100%);
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 22px 40px -12px rgba(47, 111, 214, 0.9);
}
body .button.button-w {
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
body .button.button-w:hover {
  background: #fff;
  color: var(--midnight);
}

/* ---------- ORNAMEN GARIS EMAS ---------- */
body .dot-dash { color: var(--gold); }
body .dot-dash:before,
body .dot-dash.dark:before {
  background: linear-gradient(90deg, transparent, var(--gold));
}
body .dot-dash:after,
body .dot-dash.dark:after {
  background: linear-gradient(270deg, transparent, var(--gold));
}

/* ---------- SECTION HEADING ---------- */
body .case-study h2,
body .our-history h2,
body .partners h2,
body .get-started h2 {
  letter-spacing: -0.03em;
}
body .our-history .col-md-7 h2:before {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-line);
  padding: 7px 16px;
}

/* ---------- 4 KEUNGGULAN ---------- */
.four-elements { background: linear-gradient(180deg, #ffffff, #f7f9fd); }
body .four-elements .col-md-3 .four-elements--image,
body .four-elements .col-md-4 .four-elements--image {
  background: #ffffff;
  border: 1px solid var(--gold-line);
  box-shadow: 0 18px 36px -14px rgba(11, 19, 38, 0.25);
}
body .four-elements .col-md-3:hover .four-elements--image,
body .four-elements .col-md-4:hover .four-elements--image {
  background: linear-gradient(135deg, var(--midnight-2), var(--navy-3));
  border-color: var(--gold);
}
body .four-elements .col-md-3:hover i,
body .four-elements .col-md-4:hover i { color: var(--gold); }

/* ---------- TENTANG (device mock) ---------- */
.device-mock .laptop {
  background: linear-gradient(180deg, #1b2236, #0b1326);
  box-shadow: 0 40px 80px -20px rgba(11, 19, 38, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.device-mock .phone { border-color: #0b1326; background: #0b1326; }

/* ---------- PROYEK UNGGULAN ---------- */
body .case-study { background: linear-gradient(180deg, #f5f8fd, #eef3fb); }
body .case-study--left {
  border: 1px solid rgba(15, 35, 75, 0.06);
  box-shadow: 0 30px 70px -30px rgba(15, 35, 75, 0.35);
}
body .case-study--right__imageslider img { filter: saturate(1.05) contrast(1.03); }
body .case-study--left__textslider__image {
  background: linear-gradient(135deg, var(--midnight-2), var(--navy-3));
  color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-line), 0 18px 34px -10px rgba(11, 19, 38, 0.5);
}
.case-study--left__dots ul li button { background: #dde5f2; }
.case-study--left__dots ul li.slick-active button { background: var(--gold); }

/* ---------- STATISTIK ---------- */
body .statistics:before {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(214, 182, 118, 0.14), transparent 70%),
    linear-gradient(120deg, rgba(5, 8, 18, 0.93), rgba(11, 25, 52, 0.88));
}
body .statistics--item__image {
  border: 1px solid var(--gold-line);
  color: var(--gold);
  background: var(--glass);
}
body .statistics--item h3 { color: var(--gold-light); }

/* ---------- TEKNOLOGI (jadi section gelap) ---------- */
body .partners {
  background:
    radial-gradient(700px 360px at 85% 0%, rgba(60, 136, 231, 0.22), transparent 65%),
    linear-gradient(180deg, var(--midnight-2), var(--midnight));
}
body .partners h2 { color: #ffffff; }
body .partners p { color: rgba(255, 255, 255, 0.65); }
body .partners--item__image {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body .partners--item__image span { color: rgba(255, 255, 255, 0.88); }
body .partners--item:hover .partners--item__image {
  background: linear-gradient(135deg, rgba(60, 136, 231, 0.9), rgba(31, 95, 209, 0.9));
  border-color: var(--gold);
  box-shadow: 0 20px 40px -16px rgba(60, 136, 231, 0.7);
}

/* ---------- CTA PENUTUP ---------- */
body .get-started:before {
  background:
    radial-gradient(700px 360px at 50% 100%, rgba(214, 182, 118, 0.2), transparent 70%),
    linear-gradient(120deg, rgba(5, 8, 18, 0.94), rgba(15, 48, 110, 0.82));
}
body .get-started .button { margin: 0; }

/* ---------- FOOTER ---------- */
footer {
  background: var(--midnight);
  box-shadow: 0 1px 0 var(--gold-line) inset;
}
footer ul li a:hover { color: var(--gold); }

/* ---------- MOBILE ---------- */
@media screen and (max-width: 991px) {
  body .home-slider--wrapper__inner .container h1 { font-size: 46px; width: 100%; }
}
@media screen and (max-width: 575px) {
  body .home-slider--wrapper__inner .container h1 { font-size: 34px; }
  body .home-slider--wrapper__inner .container p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}