/*
  Gaya BERSAMA situs axelent.id (beranda, kontak). Yang khas satu halaman
  tinggal di <style> halaman itu. Dipisah 10 Okt 2026 saat halaman kedua
  (kontak) lahir: menyalin token & header ke dua tempat = dua sumber yang
  pasti menyimpang.

  PALET AXELENT (brand guide Juli 2026): Ink #272626, Navy #12283F,
  Oranye #E5662F, Kertas #F6F1EE.

  KONTRAS DIUKUR, bukan dikira:
      oranye di atas kertas  2,99:1  → GAGAL AA, jadi ia tak pernah jadi teks
                                       di permukaan terang
      navy di atas kertas   13,4:1  → ini yang memegang eyebrow & tautan
      --fg-2 #4a5058         7,3:1
      --fg-3 #565d66         5,9:1
  Di permukaan GELAP hubungannya terbalik: oranye 5,3:1 di atas #0b1622, jadi
  di sanalah ia boleh jadi teks aksen. Teks redup di gelap #9aa6b4 = 7,4:1.
  Tombol utama di gelap = kertas di atas navy, BUKAN putih di atas oranye
  (3,2:1, gagal untuk label 15px).
*/
:root{
  --brand:#12283F; --sand:#8fa0b3; --sand-ink:#12283F; --accent:#E5662F;
  --bg:#F6F1EE; --surface:#ffffff; --surface-2:#ece8e5;
  --line:#dcd8d6; --line-2:#b2b5ba;
  --fg:#272626; --fg-2:#4a5058; --fg-3:#565d66;
  /* Permukaan gelap: hero, AI, penutup, panel kontak. Di KEDUA tema. */
  --night:#0b1622; --night-2:#101e2d; --night-3:#16273a; --night-line:rgba(255,255,255,.09);
  --on-night:#F6F1EE; --on-night-2:#b7c0cb; --on-night-3:#9aa6b4;
  --ok:#3ecf8e; --ok-ink:#7fe0b4;
  --sans:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --grid:rgba(18,40,63,.055); --grid-major:rgba(18,40,63,.09);
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-lg:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -20px rgba(2,8,16,.55), 0 18px 36px -18px rgba(2,8,16,.5);
  --shadow-card:0 1px 2px rgba(18,40,63,.05), 0 12px 32px -14px rgba(18,40,63,.18);
}
:root[data-theme="dark"]{
  --bg:#0d1926; --surface:#13202f; --surface-2:#1b2a3b;
  --line:#26364a; --line-2:#35485f;
  --fg:#F6F1EE; --fg-2:#b7c0cb; --fg-3:#9aa6b4;
  --sand:#5d7086; --sand-ink:#E5662F; --brand:#F6F1EE;
  --grid:rgba(255,255,255,.035); --grid-major:rgba(255,255,255,.06);
  --night:#070f18; --night-2:#0b1622; --night-3:#122133;
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 16px 36px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font:400 16.5px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
/* Glow & dekorasi sengaja melewati tepi; dipotong di sini supaya HP tak bisa
   digeser ke samping. */
main{overflow-x:clip}
img{max-width:100%; display:block}
figure{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 28px}
@media(max-width:600px){ .wrap{padding:0 20px} }
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.035em; text-wrap:balance}
p{text-wrap:pretty}
.eyebrow{font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sand-ink); margin:0 0 18px; display:flex; align-items:center; gap:10px}
/* Dimiringkan mengikuti condong marknya. */
.eyebrow::before{content:""; width:20px; height:2px; background:var(--accent); flex:none; transform:skewX(-24deg)}
.dark .eyebrow{color:var(--accent)}
.ico{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ── permukaan gelap ─────────────────────────────────────────────── */
.dark{background:var(--night); color:var(--on-night); position:relative; isolation:isolate}
.dark p{color:var(--on-night-2)}
/* Grid gambar teknis, memudar ke tepi: tekstur, bukan tokoh. */
.blueprint::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:32px 32px,32px 32px,160px 160px,160px 160px;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 75% 60% at 50% 30%, #000 30%, transparent 75%);
}
.sheet{
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size:32px 32px,32px 32px,160px 160px,160px 160px;
  background-position:-1px -1px;
}
/* Butiran halus: yang membuat gelap terasa "dicetak", bukan layar rata. */
.grain::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{position:absolute; z-index:-1; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.55}
@keyframes drift{to{transform:translate3d(60px,40px,0) scale(1.08)}}

/* ── header ─────────────────────────────────────────────────────── */
header.site{position:fixed; inset:0 0 auto 0; z-index:50; transition:background .35s var(--ease), border-color .35s, color .35s; border-bottom:1px solid transparent; color:var(--fg)}
header.site.solid{background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-bottom-color:var(--line)}
header.site.over-dark{color:var(--on-night)}
header.site.over-dark.solid{background:color-mix(in srgb, var(--night) 72%, transparent); border-bottom-color:var(--night-line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:72px; gap:18px}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.mark svg{height:26px; width:auto; display:block} /* mark aslinya 419x374, jangan dipaksa bujur sangkar */
.mark .pk{fill:var(--brand)} .mark .st{fill:var(--accent)}
header.site.over-dark .mark .pk{fill:var(--on-night)}
.mark b{font:600 18px/1 var(--sans); letter-spacing:-.03em}
.nav{display:flex; align-items:center; gap:26px}
.nav a:not(.btn){font-size:14px; text-decoration:none; opacity:.72; transition:opacity .2s}
.nav a:not(.btn):hover{opacity:1}
.tools{display:flex; gap:6px}
/* Warna, bukan opacity: opacity .6 di header terang jatuh di bawah 4,5:1
   (Lighthouse, halaman privasi, 10 Okt 2026). --fg-2 = 7,3:1. */
.chip{cursor:pointer; background:transparent; border:1px solid var(--line-2); color:var(--fg-2); border-radius:999px; padding:6px 10px; font:500 11px/1 var(--mono); letter-spacing:.06em; transition:color .2s, border-color .2s}
.chip:hover{color:var(--fg); border-color:var(--fg-3)}
header.site.over-dark .chip{color:var(--on-night-2); border-color:rgba(255,255,255,.28)}
header.site.over-dark .chip:hover{color:var(--on-night); border-color:rgba(255,255,255,.5)}
@media(max-width:960px){ .nav a:not(.btn){display:none} }
@media(max-width:520px){ .nav .btn{display:none} }

/* ── tombol ─────────────────────────────────────────────────────── */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; white-space:nowrap; background:var(--brand); color:var(--bg); border-radius:999px; padding:12px 20px; font:500 14.5px/1.2 var(--sans); letter-spacing:-.01em; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, opacity .2s; border:1px solid transparent; cursor:pointer}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -10px color-mix(in srgb, var(--brand) 60%, transparent)}
.btn .ico{width:16px; height:16px; transition:transform .25s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--fg-3); box-shadow:none}
.dark .btn, header.site.over-dark .btn{background:var(--on-night); color:var(--night)}
.dark .btn:hover, header.site.over-dark .btn:hover{box-shadow:0 0 0 6px rgba(229,102,47,.16), 0 14px 30px -12px rgba(229,102,47,.55)}
.dark .btn-ghost{background:rgba(255,255,255,.04); color:var(--on-night); border-color:rgba(255,255,255,.18)}
.dark .btn-ghost:hover{border-color:rgba(255,255,255,.4); box-shadow:none}

/* ── seksi & kartu ──────────────────────────────────────────────── */
section{padding:120px 0; position:relative}
/* Tautan #ai/#pricing mendarat dengan judul di bawah header tetap, bukan tertutup. */
[id]{scroll-margin-top:84px}
@media(max-width:700px){ section{padding:84px 0} }
.head{max-width:680px; margin-bottom:56px}
.head.c{margin-inline:auto; text-align:center} .head.c .eyebrow{justify-content:center}
.head h2{margin-bottom:18px; font-size:clamp(30px,4vw,50px); line-height:1.06}
/* :not(.eyebrow): tanpa ini label kecil di atas judul ikut jadi 18px (10 Okt 2026). */
.head p:not(.eyebrow){margin:0; color:var(--fg-2); font-size:18px; line-height:1.6}
.dark .head p:not(.eyebrow){color:var(--on-night-2)}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; font:500 11px/1.2 var(--sans); background:rgba(62,207,142,.12); color:var(--ok-ink); white-space:nowrap}
.badge.o{background:rgba(229,102,47,.15); color:#f4a27c}
.card{position:relative; border-radius:16px; padding:22px; border:1px solid var(--line); background:var(--surface); transition:transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease); overflow:hidden}
.card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(229,102,47,.08), transparent 45%)}
[data-glow] .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--line-2)}
[data-glow] .card:hover::before{opacity:1}
.dark .card{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08)}
.dark [data-glow] .card:hover, .dark[data-glow] .card:hover{border-color:rgba(255,255,255,.18); box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.dark .card::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(229,102,47,.14), transparent 45%)}
.cap{margin-top:22px; text-align:center; font:500 11px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3)}
.cap .fig{color:var(--sand-ink); margin-right:8px}

/* ── kaki ───────────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--line); padding:34px 0 40px; font-size:13.5px; color:var(--fg-3)}
.titleblock{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:0 0 22px}
@media(max-width:700px){ .titleblock{grid-template-columns:1fr 1fr} }
.titleblock div{padding:12px 16px; border-right:1px solid var(--line); background:var(--surface)}
.titleblock div:last-child{border-right:none}
.titleblock dt{font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin:0 0 6px}
.titleblock dd{margin:0; font:500 13px/1.3 var(--mono); color:var(--fg-2)}
.foot{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between}
.foot nav{display:flex; flex-wrap:wrap; gap:6px 20px}
.foot nav a{text-decoration:none}
.foot nav a:hover{text-decoration:underline; text-underline-offset:3px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
footer.site a{color:var(--fg-3)} footer.site a:hover{color:var(--fg-2)}
footer.site .by{font:500 12px/1.5 var(--mono); letter-spacing:.04em}

/* ── gerak masuk ────────────────────────────────────────────────── */
/* Hanya saat JS hidup (kelas `js` dipasang di <head>): tanpa JS, atau
   kalau JS gagal dimuat, semua konten tetap terlihat. */
.js .rv{opacity:0; transform:translateY(22px); filter:blur(6px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1; transform:none; filter:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .js .rv{opacity:1 !important; transform:none !important; filter:none !important; animation:none !important}
}