/* ==========================================================================
   Amanah Media - lembar gaya utama
   Palet: tinta (navy tua) + teal (utama) + emas (aksen)
   ========================================================================== */

:root{
	--tinta:#0b1220;
	--tinta-2:#16233b;
	--tinta-3:#22314f;
	--utama:#0f9b8e;
	--utama-tua:#0a7a70;
	--utama-muda:#e6f6f4;
	--emas:#f0b429;
	--emas-muda:#fdf3da;
	--kertas:#ffffff;
	--kertas-2:#f6f9fb;
	--kertas-3:#eef4f8;
	--teks:#152238;
	--teks-lembut:#5b6b81;
	--garis:#dfe8ef;
	--radius:18px;
	--radius-kecil:12px;
	--bayang:0 10px 30px rgba(11,18,32,.08);
	--bayang-besar:0 24px 60px rgba(11,18,32,.16);
	--lebar:1120px;
	--font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
	margin:0;
	font-family:var(--font);
	color:var(--teks);
	background:var(--kertas);
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}

a{color:var(--utama-tua); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{line-height:1.25; color:var(--tinta); margin:0 0 12px}
h1{font-size:clamp(2rem,4.4vw,3.2rem); letter-spacing:-.5px}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.3px}
h3{font-size:1.1rem}

p{margin:0 0 12px}

:focus-visible{outline:3px solid var(--utama); outline-offset:2px; border-radius:6px}

.lewati{
	position:absolute; left:-9999px; top:0; background:var(--tinta); color:#fff;
	padding:10px 16px; border-radius:0 0 10px 0; z-index:200
}
.lewati:focus{left:0}

.wadah{width:100%; max-width:var(--lebar); margin:0 auto; padding:0 20px}
.wadah-sempit{max-width:820px}

.teks-lembut{color:var(--teks-lembut)}
.teks-samar{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------------------------------------------------------------- tombol */
.tombol{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:13px 22px; border-radius:999px; border:1px solid transparent;
	font-weight:600; font-size:.95rem; cursor:pointer; text-align:center;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.tombol:hover{text-decoration:none; transform:translateY(-1px)}
.tombol-utama{background:var(--utama); color:#fff; box-shadow:0 8px 20px rgba(15,155,142,.3)}
.tombol-utama:hover{background:var(--utama-tua); color:#fff}
.tombol-garis{background:transparent; color:var(--tinta); border-color:var(--garis)}
.tombol-garis:hover{border-color:var(--utama); color:var(--utama-tua); background:#fff}
.tombol-kecil{padding:9px 16px; font-size:.87rem}
.tombol-lebar{width:100%}

/* ---------------------------------------------------------------- kepala */
.kepala{
	position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
	backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease
}
.kepala.melayang{border-color:var(--garis); box-shadow:0 6px 20px rgba(11,18,32,.06)}
.kepala-dalam{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:74px}

.merek{display:flex; align-items:center; gap:12px; color:inherit}
.merek:hover{text-decoration:none}
.merek-teks{display:flex; flex-direction:column; line-height:1.2}
.merek-teks strong{font-size:1.05rem; color:var(--tinta)}
.merek-teks small{font-size:.72rem; color:var(--teks-lembut); letter-spacing:.4px; text-transform:uppercase}

.menu{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.menu a{padding:9px 13px; border-radius:999px; color:var(--teks); font-size:.92rem; font-weight:500}
.menu a:hover{background:var(--kertas-3); text-decoration:none}
.menu a.tombol{margin-left:6px}

.menu-tombol{
	display:none; align-items:center; gap:8px; background:#fff; border:1px solid var(--garis);
	border-radius:10px; padding:9px 12px; cursor:pointer; color:var(--tinta); font:inherit
}
.menu-garis{display:block; width:18px; height:2px; background:var(--tinta); box-shadow:0 6px 0 var(--tinta), 0 -6px 0 var(--tinta)}

/* ---------------------------------------------------------------- hero */
.hero{padding:56px 0 0; background:linear-gradient(180deg,var(--kertas-2) 0%, #fff 70%)}
.hero-dalam{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:46px; align-items:center}
.hero-teks,.hero-gambar{min-width:0}

.label-mini{
	display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--garis);
	color:var(--teks-lembut); font-size:.8rem; font-weight:600; padding:7px 14px; border-radius:999px; margin-bottom:18px
}
.titik-hidup{width:8px; height:8px; border-radius:50%; background:var(--utama); box-shadow:0 0 0 4px rgba(15,155,142,.16)}
.sorot{background:linear-gradient(180deg,transparent 62%, var(--emas-muda) 62%); padding:0 4px}
.hero-ringkas{font-size:1.06rem; color:var(--teks-lembut); max-width:56ch}
.hero-aksi{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 18px}
.hero-poin{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--teks-lembut); font-size:.9rem}
.hero-poin li{display:flex; align-items:center; gap:8px}
.hero-poin li::before{content:""; width:16px; height:16px; border-radius:50%; background:var(--utama-muda); border:1px solid rgba(15,155,142,.35); flex:0 0 auto}

.hero-gambar{position:relative}
.jendela{background:#fff; border:1px solid var(--garis); border-radius:16px; box-shadow:var(--bayang-besar); overflow:hidden}
.jendela-bar{display:flex; align-items:center; gap:6px; padding:11px 14px; background:var(--kertas-3); border-bottom:1px solid var(--garis)}
.jendela-bar span{width:10px; height:10px; border-radius:50%; background:#cfd9e3}
.jendela-bar span:first-child{background:#f2a3a3}
.jendela-bar span:nth-child(2){background:#f6d488}
.jendela-bar span:nth-child(3){background:#a6dfc0}
.jendela-bar em{margin-left:10px; font-style:normal; font-size:.76rem; color:var(--teks-lembut)}
.jendela-isi{padding:20px}
.mock-baris{height:12px; border-radius:6px; background:var(--kertas-3); margin-bottom:10px}
.mock-judul{height:20px; width:58%; background:#dbe6ef}
.mock-lebar{width:92%}
.mock-sedang{width:72%}
.mock-kartu-baris{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px}
.mock-kartu{background:var(--kertas-2); border:1px solid var(--garis); border-radius:12px; padding:14px}
.mock-ikon{display:block; width:26px; height:26px; border-radius:8px; background:var(--utama-muda); border:1px solid rgba(15,155,142,.3); margin-bottom:10px}
.mock-kartu i{display:block; height:9px; border-radius:5px; background:#dbe6ef; margin-bottom:7px}
.mock-kartu i.pendek{width:60%}

.kartu-melayang{
	position:absolute; background:#fff; border:1px solid var(--garis); border-radius:14px;
	padding:12px 16px; box-shadow:var(--bayang); display:flex; flex-direction:column
}
.kartu-melayang strong{color:var(--utama-tua); font-size:1.15rem}
.kartu-melayang span{font-size:.75rem; color:var(--teks-lembut)}
.kartu-melayang-1{left:-16px; bottom:38px}
.kartu-melayang-2{right:-12px; top:34px}

.pita-angka{
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; background:#fff; border:1px solid var(--garis);
	border-radius:var(--radius); padding:22px; margin-top:44px; box-shadow:var(--bayang); text-align:center
}
.pita-angka strong{display:block; font-size:1.6rem; color:var(--tinta)}
.pita-angka span{font-size:.82rem; color:var(--teks-lembut)}

/* ---------------------------------------------------------------- bagian */
.bagian{padding:74px 0}
.bagian-lembut{background:var(--kertas-2)}
.bagian-gelap{background:linear-gradient(160deg,var(--tinta) 0%, var(--tinta-2) 100%); color:#dfe8f2}
.bagian-gelap h2,.bagian-gelap h3{color:#fff}
.bagian-gelap .teks-lembut{color:#a9b8cc}

.kepala-bagian{max-width:720px; margin-bottom:34px}
.kepala-terang{max-width:640px}
.label-bagian{
	margin:0 0 10px; font-size:.78rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--utama)
}
.bagian-gelap .label-bagian{color:var(--emas)}

.grid-tiga{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.grid-empat{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}

/* ---------------------------------------------------------------- kartu layanan */
.kartu-layanan{
	position:relative; background:#fff; border:1px solid var(--garis); border-radius:var(--radius);
	padding:26px; box-shadow:var(--bayang); display:flex; flex-direction:column
}
.kartu-layanan h3{margin-bottom:8px}
.kartu-layanan p{color:var(--teks-lembut); font-size:.94rem}
.kartu-layanan ul{list-style:none; margin:6px 0 20px; padding:0; font-size:.9rem; color:var(--teks)}
.kartu-layanan ul li{position:relative; padding-left:22px; margin-bottom:7px}
.kartu-layanan ul li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--utama)}
.kartu-layanan .ikon{
	display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
	border-radius:14px; background:var(--utama-muda); color:var(--utama-tua); margin-bottom:16px
}
.tautan-layanan{margin-top:auto; font-weight:600; font-size:.92rem}
.tautan-layanan::after{content:" \2192"}
.kartu-menonjol{border-color:rgba(15,155,142,.45); box-shadow:0 18px 44px rgba(15,155,142,.16)}
.label-paling-banyak{
	position:absolute; top:-12px; right:18px; background:var(--emas); color:#3d2c05;
	font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:999px
}

/* ---------------------------------------------------------------- langkah */
.langkah{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; counter-reset:langkah}
.langkah-kartu{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:22px}
.langkah-kartu::before{
	counter-increment:langkah; content:counter(langkah); display:inline-flex; align-items:center; justify-content:center;
	width:34px; height:34px; border-radius:50%; background:var(--emas); color:#3d2c05; font-weight:700; margin-bottom:12px
}
.langkah-kartu p{font-size:.9rem; color:#c3d0e0; margin:0}

/* ---------------------------------------------------------------- poin */
.kartu-poin{background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:22px; box-shadow:var(--bayang)}
.kartu-poin h3{margin-bottom:6px}
.kartu-poin p{font-size:.9rem; color:var(--teks-lembut); margin:0}
.ikon-kecil{
	display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px;
	background:var(--emas-muda); color:#8a6300; font-size:1.05rem; margin-bottom:14px
}

/* ---------------------------------------------------------------- paket */
.kartu-paket{
	position:relative; background:#fff; border:1px solid var(--garis); border-radius:var(--radius);
	padding:28px; box-shadow:var(--bayang); display:flex; flex-direction:column
}
.kartu-paket h3{font-size:1.3rem}
.paket-cocok{font-size:.86rem; color:var(--teks-lembut); min-height:44px}
.kartu-paket ul{list-style:none; margin:8px 0 22px; padding:0; font-size:.92rem}
.kartu-paket ul li{position:relative; padding-left:24px; margin-bottom:9px}
.kartu-paket ul li::before{
	content:"\2713"; position:absolute; left:0; top:0; color:var(--utama-tua); font-weight:700
}
.kartu-paket .tombol{margin-top:auto}

/* ---------------------------------------------------------------- faq */
.faq{display:grid; gap:12px}
.faq details{background:#fff; border:1px solid var(--garis); border-radius:var(--radius-kecil); padding:4px 20px; box-shadow:var(--bayang)}
.faq summary{cursor:pointer; font-weight:600; padding:16px 0; color:var(--tinta); list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.3rem; line-height:1; color:var(--utama)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 16px; color:var(--teks-lembut); font-size:.94rem}

/* ---------------------------------------------------------------- kontak */
.kontak-dalam{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.kontak-daftar{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:18px}
.kontak-daftar li{display:flex; gap:14px; align-items:flex-start; font-size:.94rem}
.kontak-daftar a{color:#fff}
.kontak-daftar strong{color:#fff}
.ikon-kontak{
	display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px;
	background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); flex:0 0 auto
}

.kartu-form{background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--bayang-besar); color:var(--teks)}
.kartu-form h3{margin-bottom:18px}
.baris-form{margin-bottom:14px; display:flex; flex-direction:column; gap:6px}
.baris-form label{font-size:.86rem; font-weight:600; color:var(--tinta-2)}
.baris-form input,.baris-form select,.baris-form textarea{
	width:100%; padding:12px 14px; border:1px solid var(--garis); border-radius:var(--radius-kecil);
	font:inherit; color:var(--teks); background:var(--kertas)
}
.baris-form input:focus,.baris-form select:focus,.baris-form textarea:focus{
	border-color:var(--utama); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(15,155,142,.15)
}
.baris-form .galat{border-color:#d9534f}
.catatan-form{font-size:.78rem; color:var(--teks-lembut); margin:12px 0 0}

/* ---------------------------------------------------------------- kaki */
.kaki{background:var(--tinta); color:#b9c6d8; padding:52px 0 0}
.kaki-dalam{display:grid; grid-template-columns:1.1fr 1.4fr; gap:36px; padding-bottom:34px}
.kaki-merek{display:flex; gap:14px; align-items:flex-start}
.kaki-merek strong{color:#fff; display:block; margin-bottom:6px}
.kaki-merek p{font-size:.88rem; margin:0; max-width:42ch}
.kaki-tautan{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.kaki-tautan strong{color:#fff; display:block; margin-bottom:10px; font-size:.92rem}
.kaki-tautan a{display:block; color:#b9c6d8; font-size:.88rem; padding:3px 0}
.kaki-tautan a:hover{color:#fff}
.kaki-bawah{
	display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
	border-top:1px solid rgba(255,255,255,.1); padding-top:18px; padding-bottom:22px; font-size:.82rem
}

/* ---------------------------------------------------------------- wa melayang */
.wa-melayang{
	position:fixed; right:22px; bottom:22px; z-index:120; width:56px; height:56px; border-radius:50%;
	background:#25d366; color:#fff; display:inline-flex; align-items:center; justify-content:center;
	box-shadow:0 12px 28px rgba(37,211,102,.42)
}
.wa-melayang:hover{text-decoration:none; transform:translateY(-2px); transition:transform .15s ease}

/* ---------------------------------------------------------------- tampil saat digulir */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.tampil{opacity:1; transform:none}

/* ---------------------------------------------------------------- responsif */
@media (max-width:980px){
	.hero-dalam{grid-template-columns:minmax(0,1fr); gap:34px}
	.hero-gambar{order:-1}
	.grid-empat{grid-template-columns:repeat(2,minmax(0,1fr))}
	.langkah{grid-template-columns:repeat(2,minmax(0,1fr))}
	.kontak-dalam{grid-template-columns:minmax(0,1fr)}
	.kaki-dalam{grid-template-columns:minmax(0,1fr)}
	.pita-angka{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px){
	.menu-tombol{display:inline-flex}
	.menu{
		position:absolute; left:16px; right:16px; top:74px; background:#fff; border:1px solid var(--garis);
		border-radius:var(--radius); box-shadow:var(--bayang-besar); padding:14px; flex-direction:column; align-items:stretch;
		display:none
	}
	.menu.terbuka{display:flex}
	.menu a{padding:12px 14px; border-radius:10px}
	.menu a.tombol{margin:6px 0 0}
	.grid-tiga{grid-template-columns:minmax(0,1fr)}
	.bagian{padding:58px 0}
	.kartu-melayang-1{left:6px; bottom:14px}
	.kartu-melayang-2{right:6px; top:12px}
}

@media (max-width:520px){
	.grid-empat{grid-template-columns:minmax(0,1fr)}
	.langkah{grid-template-columns:minmax(0,1fr)}
	.pita-angka{grid-template-columns:minmax(0,1fr)}
	.kaki-tautan{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
	.hero-aksi .tombol{width:100%}
}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*{transition:none !important; animation:none !important}
	.reveal{opacity:1; transform:none}
}