/* ============================================================
   Cadaz Media — gaya situs.

   Ditulis mandiri, tanpa Tailwind CDN maupun Font Awesome.
   Versi lama memuat cdn.tailwindcss.com (build JIT di browser,
   memang tidak ditujukan untuk produksi) sehingga halaman perlu
   disembunyikan dulu dengan hack anti-FOUC plus layar "Memuat…".
   Semua itu tidak diperlukan lagi: CSS ini satu berkas, ikonnya
   SVG inline, dan halaman langsung tampil utuh.

   Palet diambil dari logo Cadaz iNET supaya situs, halaman
   isolir, dan portal billing terlihat sebagai satu perusahaan.
   ============================================================ */

:root{
  --orange:#FF6600;
  --orange-dark:#E25400;
  --navy:#25485E;
  --navy-deep:#16303F;
  --cyan:#00AFEF;

  --bg:#FFFFFF;
  --bg-alt:#F4F7FA;
  --text:#16242F;
  --muted:#5D7183;
  --line:rgba(37,72,94,.12);
  --card:#FFFFFF;
  --shadow-sm:0 1px 3px rgba(22,48,63,.08);
  --shadow:0 12px 32px rgba(22,48,63,.10);
  --shadow-lg:0 24px 60px rgba(22,48,63,.16);

  --wrap:1140px;
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* Penahan luber horizontal.
   Di layar sempit, satu elemen saja yang lebih lebar dari layar sudah
   membuat SELURUH halaman bisa digeser ke samping dan terlihat tidak pas.
   overflow-x:clip dipakai, bukan hidden: hidden akan mengubah <html>
   menjadi wadah gulir sendiri dan mematikan position:sticky pada navigasi. */
html,body{max-width:100%;overflow-x:clip}

body{
  margin:0;
  /* Kata yang sangat panjang (URL, email, nama berkas) dipenggal daripada
     mendorong lebar halaman. */
  overflow-wrap:break-word;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* Ukuran dasar untuk semua ikon SVG inline.
   Ikon di situs ini digambar tanpa atribut width/height, ukurannya diatur
   lewat selector pembungkus (.btn svg, .ico svg, dst). Kalau ada SATU
   pembungkus yang terlewat, SVG jatuh ke ukuran bawaan browser -- sekitar
   300x150px -- dan menimpa seluruh layar. Itu sudah terjadi dua kali
   (tombol WhatsApp di nav, panah di kartu perangkat). Baris ini memastikan
   kesalahan serupa hanya berakibat ikon sedikit salah ukuran, bukan
   halaman rusak. Selector yang lebih spesifik tetap menang. */
svg{width:18px;height:18px;flex:0 0 auto}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
section{padding:72px 0}
@media (max-width:640px){section{padding:52px 0}}
.alt{background:var(--bg-alt)}

h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(28px,5.2vw,50px)}
h2{font-size:clamp(23px,3.6vw,34px)}
h3{font-size:18px;letter-spacing:-.01em}
p{margin:0}

.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin-bottom:10px;
}
.lead{color:var(--muted);font-size:16.5px;max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.head{margin-bottom:40px}
.head h2 span{color:var(--orange)}

/* ---------------------------------------------------------- nav */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;
  letter-spacing:-.02em;text-decoration:none;color:var(--navy)}
.brand .dot{width:10px;height:10px;border-radius:50%;
  background:linear-gradient(145deg,var(--orange),var(--orange-dark));flex:0 0 10px}
.brand em{font-style:normal;color:var(--orange)}

.menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--navy);
  padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
.menu a:hover{color:var(--orange);border-bottom-color:var(--orange)}
.nav-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;
  background:linear-gradient(145deg,var(--orange),var(--orange-dark));color:#fff;
  font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 6px 16px rgba(255,102,0,.26)}
.nav-cta:hover{transform:translateY(-1px)}
/* Ikon di dalam tombol ini terlewat saat menulis aturan .btn svg (tombol
   ini tidak memakai class .btn). SVG tanpa width/height eksplisit jatuh ke
   ukuran bawaan browser (~300x150px) -- itu yang membuat ikon WhatsApp
   tampil raksasa menimpa layar saat menu mobile dibuka. */
.nav-cta svg{width:17px;height:17px;flex:0 0 17px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;cursor:pointer;color:var(--navy)}
.burger svg{width:20px;height:20px;display:block}

@media (max-width:900px){
  .menu,.nav-cta{display:none}
  .burger{display:block}

  /* Menu mobile memakai aliran normal, bukan position:absolute.
     Versi sebelumnya menumpuk menu dan tombol WhatsApp di atas satu sama
     lain karena tinggi panel harus ditebak dengan calc(). Sekarang nav
     tinggal memanjang sendiri mengikuti isinya. */
  .nav.open .nav-in{flex-wrap:wrap;height:auto;padding-bottom:14px}
  .nav.open .menu{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    width:100%;order:3;margin-top:4px
  }
  .nav.open .menu a{padding:13px 2px;border-bottom:1px solid var(--line)}
  .nav.open .menu li:last-child a{border-bottom:0}
  .nav.open .nav-cta{
    display:inline-flex;width:100%;order:4;margin-top:10px;justify-content:center
  }
}

/* ---------------------------------------------------------- hero */
.hero{
  position:relative;color:#fff;padding:0;
  background:var(--navy-deep);
  overflow:hidden;
}
.hero .bgwrap{position:absolute;inset:-6% 0;will-change:transform}
.hero img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.34;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,48,63,.72) 0%,rgba(22,48,63,.90) 100%);
}
/* padding-top/bottom saja, JANGAN shorthand: elemen ini juga memakai
   class .wrap yang memberi padding:0 20px. Shorthand padding di sini akan
   menimpanya jadi 0, dan teks hero menempel di tepi layar. */
.hero-in{position:relative;z-index:1;padding-top:96px;padding-bottom:88px;max-width:760px}
@media (max-width:640px){.hero-in{padding-top:64px;padding-bottom:56px}}
.hero .eyebrow{color:#FFB37A}
.hero h1{color:#fff}
.hero h1 span{color:var(--orange)}
.hero p{color:#C9D8E3;margin-top:16px;font-size:17px;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:11px;font-size:15px;font-weight:700;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn svg{width:17px;height:17px;flex:0 0 17px}
.btn-primary{background:linear-gradient(145deg,var(--orange),var(--orange-dark));color:#fff;
  box-shadow:0 10px 24px rgba(255,102,0,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,102,0,.38)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-alt)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.28)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-block{width:100%}

/* ------------------------------------------------------- angka */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:44px}
.stats div{background:#fff;padding:20px 16px;text-align:center}
.stats b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.stats span{font-size:12.5px;color:var(--muted)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------------------------------------------------------- kartu */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g3,.g2{grid-template-columns:minmax(0,1fr)}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:14.5px}

.ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(255,102,0,.10);color:var(--orange)}
.ico svg{width:23px;height:23px}
.ico.cy{background:rgba(0,175,239,.12);color:var(--cyan)}
.ico.nv{background:rgba(37,72,94,.10);color:var(--navy)}

.ticks{list-style:none;margin:16px 0 0;padding:0}
.ticks li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;
  color:var(--text);padding:5px 0}
.ticks svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;color:var(--orange)}

/* Tidak dibatasi ke .card: tautan ini juga dipakai di kartu perangkat
   (.gear), dan sebelumnya panahnya tidak pernah kebagian ukuran. */
.more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-size:14px;font-weight:700;color:var(--orange);text-decoration:none}
.more svg{width:15px;height:15px;flex:0 0 15px;transition:transform .15s}
.more:hover svg{transform:translateX(3px)}
.gear .aksi .more{margin-top:0}

/* -------------------------------------------------- perangkat */
.gear{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.gear:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gear .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt)}
.gear .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gear:hover .ph img{transform:scale(1.04)}
.gear .bd{padding:20px}
.gear h3{margin-bottom:7px}
.gear p{color:var(--muted);font-size:14px;margin-bottom:14px}
/* Dinamai .aksi, bukan .foot. Nama .foot sudah dipakai footer situs
   (background navy + padding 52px), dan kartu perangkat ikut mewarisinya
   -- muncul sebagai blok gelap besar di dalam kartu. */
.gear .aksi{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;
  background:rgba(0,175,239,.12);color:#0A7EA8}

/* ------------------------------------------------------- kontak */
.cbox{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.cbox:last-child{border-bottom:0}
.cbox .ic{width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(37,72,94,.08);color:var(--navy)}
.cbox .ic svg{width:19px;height:19px}
.cbox h4{font-size:14.5px;margin-bottom:2px}
.cbox p,.cbox a{color:var(--muted);font-size:14.5px;text-decoration:none;margin:0}
.cbox a:hover{color:var(--orange)}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm)}

/* halaman kontak: kartu tautan besar */
.links{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.link{
  display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:13px;
  border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--text);
  box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s;
}
.link:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(255,102,0,.4)}
.link .ic{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;color:#fff}
.link .ic svg{width:21px;height:21px}
.link .tx{min-width:0}
.link .tx b{display:block;font-size:15px;font-weight:700}
.link .tx span{display:block;font-size:13px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link .go{margin-left:auto;color:var(--muted);flex:0 0 auto}
.link .go svg{width:17px;height:17px}
.ic-wa{background:#25D366}
.ic-tel{background:var(--navy)}
.ic-mail{background:var(--cyan)}
.ic-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.ic-fb{background:#1877F2}
.ic-yt{background:#FF0000}
.ic-tt{background:#111}
.ic-map{background:var(--orange)}

.notice{display:flex;gap:11px;padding:14px 16px;border-radius:13px;
  background:rgba(255,102,0,.08);border:1px solid rgba(255,102,0,.25);
  font-size:14px;line-height:1.55}
.notice svg{width:19px;height:19px;flex:0 0 19px;color:var(--orange);margin-top:2px}

/* ------------------------------------------------------- footer */
.foot{background:var(--navy-deep);color:#C9D8E3;padding:52px 0 0}
.foot a{color:#C9D8E3;text-decoration:none}
.foot a:hover{color:var(--orange)}
.foot h4{color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.foot-grid{display:grid;grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr);gap:34px}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:26px}}
.foot .brand{color:#fff;margin-bottom:12px}
.foot p{font-size:14.5px;color:#A9BECD;max-width:46ch}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:5px 0;font-size:14.5px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);transition:.15s}
.social a:hover{background:var(--orange);color:#fff}
.social svg{width:18px;height:18px}
.foot-bar{margin-top:40px;border-top:1px solid rgba(255,255,255,.10);padding:18px 0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px;color:#8FA6B6}

/* ======================================================== animasi */

/* Muncul saat digulir. Jarak geser sengaja kecil (18px) dan durasinya
   pendek: animasi yang terlalu besar membuat halaman terasa lamban,
   bukan hidup. Jeda antar kartu diatur JavaScript lewat --d. */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.on{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
}

/* Pembuka hero: berjalan sekali saat halaman dimuat, bukan saat digulir,
   karena bagian ini sudah terlihat sejak awal. */
@keyframes masuk{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-in > *{opacity:0;animation:masuk .85s cubic-bezier(.22,1,.36,1) forwards}
.hero-in > *:nth-child(1){animation-delay:.10s}
.hero-in > *:nth-child(2){animation-delay:.22s}
.hero-in > *:nth-child(3){animation-delay:.34s}
.hero-in > *:nth-child(4){animation-delay:.46s}

/* Foto hero perlahan membesar sedikit — memberi kesan gambar bergerak
   tanpa perlu video. */
@keyframes zoom{from{transform:scale(1.10)}to{transform:scale(1)}}
.hero img.bg{animation:zoom 14s ease-out forwards}

/* Garis tipis menyapu di bawah navigasi saat halaman digulir, dan
   bayangan muncul supaya nav terlihat mengambang di atas konten. */
.nav{transition:box-shadow .25s ease,background .25s ease}
.nav.scrolled{box-shadow:0 6px 24px rgba(22,48,63,.10)}

/* Angka pada bagian cakupan dihitung naik oleh JavaScript. Lebar dikunci
   dengan tabular-nums supaya angkanya tidak goyang saat berubah. */
.stats b{font-variant-numeric:tabular-nums}

/* Sentuhan pada kartu: ikon ikut bereaksi, bukan hanya kartunya. */
.card .ico,.link .ic{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.card:hover .ico,.link:hover .ic{transform:scale(1.08) rotate(-4deg)}

/* Tombol utama berdenyut pelan sekali saat pertama terlihat, sebagai
   penunjuk halus ke arah tindakan yang kami harapkan. */
@keyframes denyut{
  0%,100%{box-shadow:0 10px 24px rgba(255,102,0,.30)}
  50%{box-shadow:0 10px 30px rgba(255,102,0,.52)}
}
.btn-primary.pulse{animation:denyut 2.6s ease-in-out 1.2s 2}

/* ---- animasi masuk halaman kontak ----
   Berbeda dari halaman depan yang memakai .reveal (dipicu saat digulir),
   halaman kontak memakai animasi CSS murni yang berjalan saat dimuat.

   Alasannya sengaja: halaman ini tujuannya satu, orang menemukan nomor
   secepat mungkin. Memicu lewat scroll berarti kartu kontak menunggu
   digulir dulu, dan kalau JavaScript gagal, nomornya tidak pernah muncul
   sama sekali. Animasi CSS tidak bergantung pada JavaScript.

   Jeda dibatasi 9 langkah x 45ms = maksimal 0,4 detik, jadi tidak ada
   kartu yang menunggu lama. Geseran dibuat kecil (14px). */
@keyframes naik{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.kontak-masuk > *,
.kontak-masuk .link{animation:naik .5s cubic-bezier(.22,1,.36,1) both}

.kontak-masuk > *:nth-child(1){animation-delay:.02s}
.kontak-masuk > *:nth-child(2){animation-delay:.08s}
.kontak-masuk > *:nth-child(3){animation-delay:.14s}
.kontak-masuk > *:nth-child(4){animation-delay:.20s}
.kontak-masuk > *:nth-child(5){animation-delay:.26s}
.kontak-masuk > *:nth-child(n+6){animation-delay:.32s}

/* Kartu di dalam .links diberi jeda sendiri supaya muncul berurutan,
   bukan serentak satu blok. */
.kontak-masuk .links .link:nth-child(1){animation-delay:.16s}
.kontak-masuk .links .link:nth-child(2){animation-delay:.205s}
.kontak-masuk .links .link:nth-child(3){animation-delay:.25s}
.kontak-masuk .links .link:nth-child(4){animation-delay:.295s}
.kontak-masuk .links .link:nth-child(5){animation-delay:.34s}
.kontak-masuk .links .link:nth-child(6){animation-delay:.385s}
.kontak-masuk .links .link:nth-child(7){animation-delay:.43s}
.kontak-masuk .links .link:nth-child(8){animation-delay:.475s}
.kontak-masuk .links .link:nth-child(n+9){animation-delay:.52s}

/* Blok .links sendiri tidak perlu ikut beranimasi -- yang beranimasi
   kartunya. Tanpa ini keduanya bertumpuk dan hasilnya terasa lambat. */
.kontak-masuk > .links{animation:none}

/* Semua animasi mati bagi yang menyetel prefers-reduced-motion. Elemen
   harus tetap TERLIHAT, bukan ikut hilang bersama animasinya. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  /* "Kurangi gerak" berarti kurangi GERAK, bukan mematikan semua umpan
     balik visual. Versi sebelumnya membunuh seluruh transition dan
     animation, sehingga pengguna dengan setelan ini tidak melihat apa pun
     -- konten langsung muncul serentak.

     Sekarang hanya perpindahan posisi yang dinetralkan: geser, zoom,
     parallax, dan efek angkat saat disentuh. Yang tersisa pudar-masuk,
     yang tidak menggeser apa pun di layar dan aman bagi pemicu vertigo. */
  *{transform:none!important}
  .btn-primary.pulse{animation:none!important}
  .hero .bgwrap{will-change:auto}
}

/* ---------------------------------------------------------- lain */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:#fff;padding:10px 14px;border-radius:8px}