/* =========================================================================
PORTAL PUBLIK BK FAI UM PONTIANAK
-------------------------------------------------------------------------
Arsitektur tata letak mengikuti rujukan desain MediLab (Bootstrap 5):
topbar > navbar + tombol ajakan > hero (judul besar + panel "mengapa" +
tiga kartu kaca) > tentang > angka capaian > layanan > departemen bertab >
profil konselor > janji temu > tanya jawab > testimoni > galeri > kontak.
Yang dikustomisasi dari rujukan: palet biru diganti gradasi ungu khas
psikologi, ikon datar diganti ubin ikon gaya iOS (ios-icon.css), dan
ditambah dua bagian milik layanan ini: infografis pengguna & ruang tanya.
Seluruh warna diambil dari variabel yang disuntik layout dari tabel
settings, sehingga admin dapat mengubah tema tanpa menyentuh berkas ini.
========================================================================= */
/* -- Token ---------------------------------------------------------------- */
:root{
--bk-primer:#20b806;
--bk-sekunder:#157F04;
--bk-aksen:#F59E0B;
--bk-grad-awal:#0A5A02;
--bk-grad-akhir:#3FD617;
--bk-teks:#123019;
--bk-font:'Nunito Sans','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
/* Huruf khusus judul. Dilayani sendiri dari assets/fonts, sama seperti
huruf teks isi. */
--bk-font-judul:'Plus Jakarta Sans','Nunito Sans',system-ui,sans-serif;
--bk-teks-lembut:#5B6B5F;
--bk-garis:rgba(32,184,6,.14);
--bk-permukaan:#ffffff;
--bk-permukaan-2:#F4FBF2;
/* Hijau yang tetap terbaca.
#20b806 sangat terang: teks putih di atasnya hanya 2,6:1, jauh di bawah
ambang 4,5:1. Satu tingkat lebih dalam sudah mencapai 4,6:1 sementara
mata masih membacanya sebagai hijau yang sama.
Dipakai untuk DUA hal sekaligus:
- bidang hijau yang memuat tulisan putih (tombol, label, lencana)
- tulisan hijau di atas latar putih (tautan, angka, judul tersorot)
#20b806 sendiri tetap dipakai apa adanya untuk garis, sorotan, ubin
ikon, dan warna grafik - tempat yang tidak ditimpa huruf. */
--bk-hijau-baca:#178805;
/* SATU hijau untuk seluruh halaman, tanpa gradasi.
Gradasi hanya hidup di satu tempat: bidang pembuka. Di luar itu setiap
bidang hijau memakai warna merek polos, supaya halaman terbaca tenang
dan tidak berkilau di tiap bagian.
Nama --bk-gradasi dan --bk-gradasi-segar sengaja dipertahankan meski
isinya kini warna tunggal: puluhan aturan di berkas ini memanggilnya,
dan mengganti isinya di satu tempat jauh lebih aman daripada menyunting
satu per satu. */
--bk-gradasi:var(--bk-primer);
--bk-gradasi-segar:var(--bk-primer);
--bk-gradasi-lembut:#F6FCF3;
/* Satu-satunya gradasi yang tersisa di halaman depan. */
--bk-gradasi-hero:linear-gradient(135deg,#07793C 0%,#0FA33F 45%,var(--bk-primer) 100%);
--bk-bayang-sm:0 2px 10px rgba(10,90,2,.06);
--bk-bayang:0 10px 30px -12px rgba(10,90,2,.18);
--bk-bayang-lg:0 24px 60px -20px rgba(10,90,2,.28);
--bk-radius:18px;
--bk-radius-lg:24px;
/* Spasi bagian: renggang di layar besar, padat di ponsel. */
--bk-spasi-bagian:96px;
}
*{ box-sizing:border-box; }
/* scroll-padding menyesuaikan navbar lengket yang sudah diramping, supaya
judul bagian tidak tertutup saat menu diklik. */
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
font-family:var(--bk-font);
color:var(--bk-teks);
background:#fff;
font-size:16px; /* dasar 16px - jangan diturunkan */
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden; /* tidak boleh ada gulir mendatar */
}
/* Judul memakai huruf tersendiri; teks isi tetap Nunito Sans. Perbedaan
bentuk antara keduanya yang membuat halaman terasa tertata, bukan sekadar
perbedaan ukuran. */
h1,h2,h3,h4,h5,h6{
font-family:var(--bk-font-judul);
font-weight:800; line-height:1.25; color:var(--bk-teks);
letter-spacing:-.018em;
}
/* Tautan memakai hijau polos tanpa gradasi. Nadanya sedikit lebih tua dari
hijau merek semata-mata agar terbaca di atas putih. */
a{ color:var(--bk-hijau-baca); text-decoration:none; transition:color .2s ease; }
a:hover{ color:#0F6B03; }
img{ max-width:100%; height:auto; }
/* Cincin fokus tidak pernah dihapus - hanya diganti yang lebih terbaca. */
:focus-visible{
outline:3px solid var(--bk-aksen);
outline-offset:3px;
border-radius:6px;
}
.lewati-ke-isi{
position:absolute; left:-9999px; top:0; z-index:2000;
background:var(--bk-primer); color:#fff; padding:12px 22px;
border-radius:0 0 12px 0; font-weight:600;
}
.lewati-ke-isi:focus{ left:0; color:#fff; }
/* -- Bilah atas ----------------------------------------------------------- */
/* Dibuat ramping: bilah ini hanya penunjang, tidak boleh memakan tinggi
layar pertama yang seharusnya milik pesan utama. */
.topbar{
background:var(--bk-gradasi);
color:rgba(255,255,255,.92);
font-size:.78rem;
line-height:1.4;
padding:4px 0;
}
.topbar a{ color:rgba(255,255,255,.92); }
.topbar a:hover{ color:#fff; }
.topbar-kontak{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.topbar-kontak i{ margin-right:5px; opacity:.85; }
.topbar-sosial{ display:flex; gap:4px; }
.topbar-sosial a{
width:24px; height:24px; border-radius:7px; font-size:.78rem;
display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.14);
transition:background .2s ease, transform .2s ease;
}
.topbar-sosial a:hover{ background:rgba(255,255,255,.28); transform:translateY(-2px); }
/* -- Navigasi ------------------------------------------------------------- */
.navbar-utama{
position:sticky; top:0; z-index:1030;
background:rgba(255,255,255,.92);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--bk-garis);
transition:box-shadow .25s ease, padding .25s ease;
}
.navbar-utama.menggulir{ box-shadow:var(--bk-bayang); }
/* Saat menggulir navbar menyusut sedikit lagi - efek lengket tetap terasa
tanpa mengorbankan tinggi layar. */
.navbar-utama.menggulir .navbar{ padding-top:4px; padding-bottom:4px; }
.navbar-utama.menggulir .navbar-brand img{ height:28px; }
.navbar-utama .navbar{
padding-top:7px; padding-bottom:7px;
transition:padding .25s ease;
}
.navbar-brand{ display:flex; align-items:center; gap:10px; }
/* Logo diberi ubin bergradasi yang SAMA PERSIS dengan tombol "Buat Janji Temu"
(--bk-gradasi + bayangan berwarna primer), sehingga terlihat timbul dan
kedua elemen di ujung navbar terbaca sebagai satu keluarga visual. */
.navbar-brand .merek-ubin{
display:inline-flex; align-items:center; justify-content:center;
flex:0 0 auto;
width:46px; height:46px;
border-radius:14px;
background:var(--bk-primer);
box-shadow:0 8px 20px -10px rgba(32,184,6,.9);
transition:width .25s ease, height .25s ease, box-shadow .2s ease, transform .2s ease;
position:relative; overflow:hidden;
}
/* Kilau tipis di bagian atas - penegas kesan timbul, seperti ubin ikon iOS. */
.navbar-brand .merek-ubin::after{
content:''; position:absolute; inset:1px 1px auto 1px; height:44%;
border-radius:13px 13px 50% 50%/13px 13px 20px 20px;
background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));
pointer-events:none;
}
.navbar-brand:hover .merek-ubin{
transform:translateY(-1px);
box-shadow:0 14px 28px -10px var(--bk-primer);
}
.navbar-brand img{
height:32px; width:auto; object-fit:contain;
position:relative; z-index:2;
transition:height .25s ease;
}
.navbar-utama.menggulir .navbar-brand .merek-ubin{ width:40px; height:40px; border-radius:12px; }
.navbar-brand span{ display:flex; flex-direction:column; line-height:1.12; }
/* Nama situs memakai gradasi ungu yang sama dengan tema. Warna solid ditulis
lebih dulu sebagai jalan mundur: bila peramban tidak mendukung
background-clip:text, teks tetap terbaca, bukan menjadi transparan. */
/* Nama situs memakai hijau polos. Gradasi pada huruf selalu punya ujung yang
lebih terang, dan pada nama sekecil ini ujung itu ikut hilang di atas putih. */
.navbar-brand b{
font-size:1rem; font-weight:800;
letter-spacing:-.02em;
color:var(--bk-hijau-baca);
}
:root[data-kontras="tinggi"] .navbar-brand b{ color:#FFD500; }
:root[data-kontras="gelap"] .navbar-brand b{ color:#7BE33F; }
.navbar-brand small{ font-size:.67rem; color:var(--bk-teks-lembut); font-weight:500; }
.navbar-nav .nav-link{
font-weight:600; font-size:.9rem; color:var(--bk-teks);
padding:8px 12px; border-radius:10px; position:relative;
min-height:40px;
display:flex; align-items:center;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color:var(--bk-primer); }
.navbar-nav .nav-link.active::after{
content:''; position:absolute; left:14px; right:14px; bottom:4px;
height:3px; border-radius:3px; background:var(--bk-gradasi);
}
.dropdown-menu{
border:none; border-radius:16px; padding:10px;
box-shadow:var(--bk-bayang-lg); margin-top:10px;
}
.dropdown-item{
border-radius:10px; padding:10px 14px; font-weight:500; font-size:.92rem;
display:flex; align-items:center; gap:10px; min-height:44px;
}
.dropdown-item:hover{ background:var(--bk-permukaan-2); color:var(--bk-primer); }
.dropdown-item i{ color:var(--bk-sekunder); }
/* Tombol ajakan di navigasi: hijau polos, seragam dengan tombol utama. */
.btn-janji{
display:inline-flex; align-items:center; justify-content:center;
background:var(--bk-primer); color:#fff !important;
padding:9px 22px; border-radius:999px;
font-weight:700; font-size:.86rem; white-space:nowrap;
min-height:40px;
box-shadow:none;
transition:transform .2s ease, background .2s ease;
}
.btn-janji:hover{
background:#1CA006;
transform:translateY(-2px);
}
.navbar-toggler{
border:none; font-size:1.7rem; color:var(--bk-primer);
padding:6px 10px; min-height:44px; min-width:44px;
}
.navbar-toggler:focus{ box-shadow:none; }
/* -- Tombol umum ---------------------------------------------------------- */
.btn-bk{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
padding:13px 30px; border-radius:999px; border:none;
font-weight:700; font-size:.95rem; min-height:48px;
cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* Tombol utama: hijau merek POLOS, tanpa gradasi dan tanpa bayangan.
Bayangan hijau tua di kaki tombol mengotori warna hijaunya — pada bidang
sekecil tombol, warnanya terbaca menjadi kusam. Umpan balik saat disorot
cukup dari naiknya tombol dan warna yang sedikit lebih dalam. */
.btn-bk-utama{
background:var(--bk-primer);
color:#fff;
box-shadow:none;
}
.btn-bk-utama:hover{
background:#1CA006;
color:#fff;
transform:translateY(-2px);
box-shadow:none;
}
.btn-bk-terang{ background:#fff; color:var(--bk-hijau-baca); box-shadow:var(--bk-bayang); }
.btn-bk-terang:hover{ color:#0F6B03; transform:translateY(-2px); }
.btn-bk-garis{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.btn-bk-garis:hover{ background:rgba(255,255,255,.14); color:#fff; }
.btn-bk-garis-ungu{ background:transparent; color:var(--bk-hijau-baca); border:2px solid var(--bk-garis); }
.btn-bk-garis-ungu:hover{
background:var(--bk-permukaan-2);
border-color:var(--bk-primer);
color:#0F6B03;
}
.btn-bk:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
/* -- Kerangka bagian ------------------------------------------------------ */
.bagian{ padding:var(--bk-spasi-bagian) 0; position:relative; isolation:isolate; }
/* Setengah tembus supaya blob latar (style_background.css) tetap terlihat di
sela-sela bagian; wadah opak akan menutupinya sepenuhnya. */
.bagian-lembut{ background:rgba(250,248,255,.72); backdrop-filter:blur(2px); }
.bagian-gradasi{ background:rgba(247,245,255,.76); }
.judul-bagian{ text-align:center; max-width:720px; margin:0 auto 54px; }
/* Label bagian: bidang hijau polos dengan huruf putih. */
.judul-bagian .label{
display:inline-block; padding:7px 18px; border-radius:999px;
background:var(--bk-primer); color:#fff;
font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
margin-bottom:16px;
}
.judul-bagian h2{
font-size:clamp(1.75rem,3.6vw,2.6rem);
margin-bottom:14px; letter-spacing:-.02em;
}
/* Kata yang disorot pada judul: hijau polos, bukan gradasi — gradasi pada
huruf selalu punya ujung terang yang tidak terbaca. */
.judul-bagian h2 span{ color:var(--bk-hijau-baca); }
.judul-bagian p{ color:var(--bk-teks-lembut); font-size:1.03rem; margin:0; }
.judul-bagian.kiri{ text-align:left; margin-left:0; }
/* =========================================================================
HERO - mengikuti rujukan: judul besar kapital, kalimat pendukung, lalu
panel "mengapa" berwarna di kiri dan tiga kartu kaca di kanan.
========================================================================= */
/* Jarak atas sengaja dipangkas hampir separuh dari sebelumnya. Pita kosong
selebar 120px di bawah navigasi tidak membawa pesan apa pun, sementara ia
mendorong judul dan sosok konselor turun dari layar pertama - bagian yang
justru paling menentukan apakah pengunjung bertahan. */
.hero{
position:relative;
padding:clamp(36px,5vw,76px) 0 0;
background:var(--bk-gradasi-hero);
color:#fff;
overflow:hidden;
}
.hero-latar{
position:absolute; inset:0;
background-size:cover; background-position:center;
opacity:.26;
}
/* Lapisan penjaga kontras di atas foto pembuka. Emerald di sisi kiri tempat
tulisan berada, memudar ke hijau merek di sisi kanan tempat kartu berputar. */
.hero::after{
content:''; position:absolute; inset:0;
background:linear-gradient(105deg,
rgba(7,121,60,.94) 0%,
rgba(15,163,63,.86) 45%,
rgba(32,184,6,.62) 100%);
}
/* Di ponsel tulisan berada di tengah, jadi peredupnya diratakan. */
@media (max-width:767.98px){
.hero::after{
background:linear-gradient(160deg,
rgba(7,121,60,.93) 0%,
rgba(15,163,63,.88) 60%,
rgba(32,184,6,.78) 100%);
}
}
.hero > .container{ position:relative; z-index:2; }
/* Rata kiri di layar lebar; di ponsel dirata-tengah (lihat media query). */
.hero-teks{ max-width:760px; }
.hero-label{
display:inline-flex; align-items:center; gap:9px;
padding:8px 18px; border-radius:999px;
background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
font-size:.82rem; font-weight:600; margin-bottom:22px;
}
/* Judul pembuka.
Huruf kapital seluruhnya sengaja DITINGGALKAN: kalimat seperti "Ruang Aman
untuk Tumbuh dan Pulih" adalah ajakan yang menenangkan, dan tulisan kapital
penuh terbaca seperti orang berteriak. Huruf kapital di awal kata saja juga
membuat bentuk kata lebih mudah dikenali sekilas.
Jarak antarhuruf dirapatkan sedikit karena pada ukuran sebesar ini Plus
Jakarta Sans terasa renggang bila dibiarkan apa adanya. */
.hero h1{
font-family:var(--bk-font-judul);
font-size:clamp(2.15rem,5.8vw,4.15rem);
font-weight:800; color:#fff;
letter-spacing:-.035em;
line-height:1.08;
margin-bottom:20px;
text-wrap:balance;
text-shadow:0 2px 24px rgba(6,50,20,.28);
}
/* Kata terakhir disorot dengan hijau muda supaya mata punya titik berhenti. */
/* Dua kata terakhir judul cukup ditandai lewat warna. Garis bawah sempat
dicoba, tetapi pada judul setebal ini justru terbaca seperti tautan. */
.hero h1 .sorot{
color:#B9F27E;
display:inline-block;
position:relative;
text-decoration:none;
}
.hero-sub{
font-size:clamp(1rem,1.7vw,1.22rem);
color:rgba(255,255,255,.9);
max-width:640px; margin-bottom:32px;
}
.hero-aksi{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }
/* -- Panggung pembuka: sosok konselor & kartu layanan bergantian ------------ */
/* Keduanya TIDAK PERNAH tampil bersamaan. Satu deret slide, satu kendali:
sosok memegang slide pertama, kartu layanan mengisi sisanya.
Tinggi panggung ditentukan oleh KARTU yang tetap mengalir, bukan oleh angka
yang dikarang. Sosok menumpang di kotak yang sama secara absolut. Dua akibat
yang memang dikejar: kartu tidak kehilangan ukuran aslinya, dan tinggi kolom
tidak bergoyang setiap giliran berganti — itu yang membuat sisi kanan tetap
sejajar dengan judul di sebelah kiri.
Sosok tidak diberi bayangan apa pun; alasannya ditulis di aturan gambarnya
di bawah, bersama pelarutan kakinya. */
.hero-panggung{ position:relative; }
/* --sosok-naik: seberapa jauh sosok menembus ke atas panggung.
Sosok yang persis muat di dalam kotaknya terbaca seperti foto yang
ditempel. Begitu kepalanya melewati batas atas, kotak berhenti terbaca
sebagai bingkai dan sosoknya terbaca berdiri di depan — ini yang membuat
bagian pembuka punya kedalaman.
Ditulis sebagai custom property supaya tinggi tembusnya bisa disetel di
satu tempat, termasuk saat dipendekkan di layar sempit. */
.hero-panggung-isi{
position:relative;
min-height:330px;
/* Julangan dibatasi 68px. Lebih tinggi dari itu kepala sosok merangsek ke
bilah navigasi - menjulang memang membuat sosok terbaca berdiri di
depan, tetapi begitu menyentuh navigasi, yang terbaca justru sesak.
Ukuran yang hilang karena pembatasan ini diganti dari pelebaran ke
kanan, yang tidak punya tetangga untuk ditabrak. */
--sosok-naik:clamp(32px,4.5vw,68px);
--sosok-lebar:12%;
}
.panggung-slide{
opacity:0; visibility:hidden;
transform:translateX(38px);
transition:opacity .55s ease,
transform .55s cubic-bezier(.22,.8,.3,1),
visibility .55s;
}
.panggung-slide.aktif{ opacity:1; visibility:visible; transform:none; }
/* Slide yang baru lewat menyingkir ke kiri, bukan ikut masuk dari kanan. */
.panggung-slide.keluar{ transform:translateX(-38px); }
.hero-panggung-isi > .hero-putar{ z-index:1; }
/* Kotak sosok sengaja dibuat lebih besar daripada panggungnya: menjulang ke
atas sejauh --sosok-naik dan melebar ke kanan sejauh --sosok-lebar.
Pelebarannya HANYA ke kanan, tidak ke kiri. Sisi kiri berbatasan dengan
kalimat pengantar; sosok yang melebar ke sana akan menutupinya.
Ukuran gambar ikut naik dengan sendirinya. object-fit:contain memilih sisi
yang paling menyempitkan, dan sebelum ini sisi itu adalah tinggi panggung -
begitu kotaknya ditinggikan dan dilebarkan, gambar tumbuh sekitar sepertiga
tanpa satu pun angka ukuran gambar disentuh. */
.hero-panggung-isi > .hero-sosok{
position:absolute;
top:calc(var(--sosok-naik) * -1);
right:calc(var(--sosok-lebar) * -1);
bottom:0; left:0;
margin:0; z-index:2;
}
/* Kaki gambar dilarutkan sampai hilang, bukan dipotong rata.
Dikerjakan dengan mask-image, BUKAN dengan melapiskan gradasi warna latar di
atasnya. Lapisan warna harus menebak warna bidang di belakangnya, dan tebakan
itu langsung meleset begitu admin mengganti warna merek atau pengunjung
menyalakan mode gelap - kaki sosok akan tampak sebagai pita warna yang salah.
Mask bekerja pada alpha gambarnya sendiri, jadi benar di atas latar apa pun.
Tanpa bayangan sama sekali. Bayangan dan pelarutan kaki saling melawan:
mask menghapus bidang gambarnya, drop-shadow menggambar ulang siluetnya
dalam warna gelap - kakinya hilang tetapi bayangannya tertinggal sebagai
noda mengambang tanpa sumber. Sosok yang melebur ke latar tidak perlu
bayangan; justru ketiadaannya yang membuat leburnya bersih. */
.hero-sosok img{
display:block; width:100%; height:100%;
object-fit:contain; object-position:bottom center;
filter:none;
-webkit-mask-image:linear-gradient(180deg,
#000 62%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.18) 93%, transparent 100%);
mask-image:linear-gradient(180deg,
#000 62%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.18) 93%, transparent 100%);
}
/* Kartu kecil yang menumpang di foto: satu angka yang layak dibanggakan. */
.hero-sosok-capaian{
position:absolute; right:0; top:14%; z-index:3;
display:flex; align-items:center; gap:11px;
background:#fff; border-radius:16px; padding:11px 16px;
box-shadow:0 20px 42px -18px rgba(4,32,2,.55);
max-width:230px;
}
.hero-sosok-teks{ display:flex; flex-direction:column; line-height:1.2; }
.hero-sosok-teks b{
font-family:var(--bk-font-judul);
font-size:1.3rem; font-weight:800; color:var(--bk-teks);
}
.hero-sosok-teks small{ font-size:.75rem; color:var(--bk-teks-lembut); }
:root[data-kontras="tinggi"] .hero-sosok-capaian{
background:#000 !important; border:2px solid #fff; box-shadow:none;
}
:root[data-kontras="tinggi"] .hero-sosok-teks b{ color:#FFD500; }
:root[data-kontras="tinggi"] .hero-sosok-teks small{ color:#fff; }
:root[data-kontras="gelap"] .hero-sosok-capaian{ background:#17291B; }
:root[data-kontras="gelap"] .hero-sosok-teks b{ color:#F0FAF1; }
:root[data-kontras="gelap"] .hero-sosok-teks small{ color:#9DB3A2; }
/* -- Kartu berputar di sisi kanan pembuka ---------------------------------- */
/* Mengisi ruang kosong di samping judul: informasi layanan tampil bergantian,
masuk dari sisi kanan. Isi & jeda diatur admin (menu Banner + Pengaturan). */
.hero-putar{
position:relative;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border-radius:var(--bk-radius-lg);
padding:30px 28px 24px;
min-height:330px;
display:flex; flex-direction:column;
overflow:hidden;
}
.hero-putar-label{
display:inline-flex; align-items:center; gap:8px;
font-size:.72rem; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:rgba(255,255,255,.72);
margin-bottom:18px;
}
/* Panggung: tiap kartu ditumpuk, hanya yang aktif terlihat. */
.hero-putar-panggung{ position:relative; flex:1; min-height:190px; }
.hero-putar-item{
position:absolute; inset:0;
display:flex; flex-direction:column;
opacity:0; visibility:hidden;
transform:translateX(38px);
transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1), visibility .6s;
pointer-events:none;
}
.hero-putar-item.aktif{
opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
/* Kartu yang baru saja lewat keluar ke kiri, bukan ikut masuk dari kanan. */
.hero-putar-item.keluar{ transform:translateX(-38px); }
.hero-putar-item h3{
color:#fff; font-size:1.16rem; margin:16px 0 10px; line-height:1.35;
}
.hero-putar-item p{
color:rgba(255,255,255,.85); font-size:.93rem; margin:0 0 18px; flex:1;
}
.hero-putar-item .tautan{
display:inline-flex; align-items:center; gap:8px;
color:#fff; font-weight:700; font-size:.88rem;
align-self:flex-start; min-height:40px;
}
.hero-putar-item .tautan i{ transition:transform .2s ease; }
.hero-putar-item .tautan:hover{ color:#fff; }
.hero-putar-item .tautan:hover i{ transform:translateX(4px); }
/* Kendali: titik + bilah waktu.
Letaknya di bawah panggung, bukan di dalam kartu — sebab giliran sosok
konselor juga perlu bisa dilewati, dijeda, dan ditunjuk. Kendali yang ikut
menghilang bersama kartunya akan membuat slide sosok terasa buntu. */
.hero-putar-kendali{
display:flex; align-items:center; gap:14px;
margin-top:20px; padding-top:16px;
border-top:1px solid rgba(255,255,255,.16);
}
.hero-putar-titik{ display:flex; gap:7px; }
.hero-putar-titik button{
width:9px; height:9px; padding:0; border:none; cursor:pointer;
border-radius:999px; background:rgba(255,255,255,.35);
transition:width .3s ease, background .3s ease;
}
.hero-putar-titik button.aktif{ width:26px; background:#fff; }
/* Target sentuh tetap 44px lewat area tak terlihat di sekeliling titik. */
.hero-putar-titik button::before{
content:''; position:absolute; width:32px; height:44px;
transform:translate(-11px,-17px);
}
.hero-putar-titik{ position:relative; }
.hero-putar-titik button{ position:relative; }
.hero-putar-waktu{
flex:1; height:3px; border-radius:999px;
background:rgba(255,255,255,.2); overflow:hidden;
}
.hero-putar-waktu span{
display:block; height:100%; width:0;
background:rgba(255,255,255,.85); border-radius:999px;
}
.hero-putar-jeda{
background:rgba(255,255,255,.16); border:none; color:#fff;
width:32px; height:32px; border-radius:10px; cursor:pointer;
font-size:.82rem; flex:0 0 auto;
}
.hero-putar-jeda:hover{ background:rgba(255,255,255,.28); }
:root[data-gerak="diam"] .hero-putar-item,
:root[data-gerak="diam"] .panggung-slide{ transition:none; transform:none; }
:root[data-gerak="diam"] .hero-putar-waktu{ display:none; }
@media (prefers-reduced-motion: reduce){
.hero-putar-item,
.panggung-slide{ transition:none; transform:none; }
}
:root[data-kontras="tinggi"] .hero-putar{ background:#000 !important; border:2px solid #fff; }
/* Baris panel + kartu kaca */
.hero-bawah{ margin-top:10px; }
.panel-kenapa{
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-radius:var(--bk-radius-lg) var(--bk-radius-lg) 0 0;
padding:40px 36px;
height:100%;
}
.panel-kenapa h2{
color:#fff; font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:18px;
}
.panel-kenapa p{ color:rgba(255,255,255,.88); margin-bottom:26px; }
.kartu-kaca{
background:rgba(255,255,255,.93);
border-radius:var(--bk-radius-lg) var(--bk-radius-lg) 0 0;
padding:34px 26px;
height:100%;
text-align:center;
box-shadow:var(--bk-bayang-lg);
transition:transform .25s ease;
}
.kartu-kaca:hover{ transform:translateY(-6px); }
.kartu-kaca h3{ font-size:1.08rem; margin:20px 0 12px; }
.kartu-kaca p{ color:var(--bk-teks-lembut); font-size:.93rem; margin:0; }
/* =========================================================================
PENGHIJAUAN KOMPONEN BERSAMA
-------------------------------------------------------------------------
ios-icon.css dan ios-alert-modal.css dipakai bersama panel admin, yang
tetap berpalet ungu. Karena itu warnanya TIDAK diubah di berkas aslinya,
melainkan ditimpa di sini dan dibatasi ke `body.situs` — penanda yang hanya
dipasang layout front-end. Panel tidak terpengaruh sama sekali.
========================================================================= */
/* Ubin ikon: tiga slot yang dipakai sebagai warna merek dijadikan hijau.
Slot lain (toska, biru, jingga, merah, merah-muda, abu) sengaja dibiarkan
supaya deretan kartu tetap punya variasi dan tidak terbaca sebagai satu
blok hijau. */
/* Di halaman depan ubin tidak bergradasi: slot awal dan akhir diisi warna yang
sama, jadi bidangnya rata. Bentuk, bayangan, dan kilau ubin tetap utuh —
itu yang membuatnya terbaca sebagai ubin iOS, bukan gradasinya. */
.situs .ios-icon.ungu { --ii-1:var(--bk-primer); --ii-2:var(--bk-primer); }
.situs .ios-icon.nila { --ii-1:var(--bk-primer); --ii-2:var(--bk-primer); }
.situs .ios-icon.lavender { --ii-1:var(--bk-primer); --ii-2:var(--bk-primer); }
.situs .ios-icon.hijau { --ii-1:var(--bk-primer); --ii-2:var(--bk-primer); }
/* Slot lain tetap punya warnanya sendiri supaya deretan kartu tidak terbaca
sebagai satu blok hijau, tetapi sama-sama dibuat rata tanpa gradasi. */
.situs .ios-icon.merah-muda{ --ii-2:var(--ii-1); }
.situs .ios-icon.biru { --ii-2:var(--ii-1); }
.situs .ios-icon.toska { --ii-2:var(--ii-1); }
.situs .ios-icon.jingga { --ii-2:var(--ii-1); }
.situs .ios-icon.merah { --ii-2:var(--ii-1); }
.situs .ios-icon.abu { --ii-2:var(--ii-1); }
/* Varian lembut: ubin pucat dengan glyph hijau tua - dipakai pada daftar
panjang agar halaman tidak dipenuhi blok warna pekat. */
.situs .ios-icon--lembut.ungu,
.situs .ios-icon--lembut.nila,
.situs .ios-icon--lembut.lavender,
.situs .ios-icon--lembut.hijau{ color:#0F6B03; }
/* Dialog & toast bersama */
.situs .ios-dialog-ok{ background:#0F6B03; }
.situs .ios-dialog-ok.bahaya{ background:#C62828; }
.situs .ios-dialog-batal{ background:#E8F4E4; color:#5B6B5F; }
.situs .ios-dialog-batal:hover{ background:#D9EDD4; }
.situs .ios-dialog h3{ color:#123019; }
.situs .ios-dialog p{ color:#5B6B5F; }
.situs .ios-dialog-ikon.question{ background:rgba(32,184,6,.12); color:#157F04; }
.situs .ios-toast{ border-left-color:#20b806; color:#123019; }
.situs .ios-dialog-latar{ background:rgba(18,48,25,.42); }
/* =========================================================================
TRANSISI & ANIMASI LANDING PAGE
-------------------------------------------------------------------------
Tiga lapis gerakan, semuanya tunduk pada pengaturan "hentikan animasi":
1. Transisi antar halaman - isi memudar masuk saat dibuka, memudar
keluar saat menu ditekan.
2. Gulir ke bagian - berayun dengan kompensasi navbar lengket.
3. Animasi masuk bagian - ditangani AOS, ditambah aksen di bawah ini.
Durasi mikro-interaksi dijaga 150-300ms; animasi masuk 600-800ms.
========================================================================= */
/* -- 1. Transisi antar halaman -------------------------------------------- */
body{
opacity:0;
animation:bkMasukHalaman .5s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes bkMasukHalaman{
from{ opacity:0; transform:translateY(8px); }
to { opacity:1; transform:none; }
}
body.bk-pergi{
opacity:0;
transform:translateY(-6px);
transition:opacity .26s ease, transform .26s ease;
animation:none;
}
/* Tirai gradasi tipis yang menyapu saat berpindah halaman. */
.tirai-transisi{
position:fixed; inset:0; z-index:1100;
background:var(--bk-gradasi);
transform:scaleY(0); transform-origin:bottom;
pointer-events:none; opacity:0;
transition:transform .34s cubic-bezier(.65,0,.35,1), opacity .34s ease;
}
body.bk-pergi .tirai-transisi{ transform:scaleY(1); transform-origin:bottom; opacity:.92; }
/* -- 2. Aksen animasi masuk ------------------------------------------------ */
/* Kata tersorot pada judul kini berwarna polos, jadi animasi geser gradasinya
dilepas: tidak ada lagi bidang yang bisa digeser. */
/* Kartu naik sedikit saat baru tampil - dijalankan AOS lewat kelasnya. */
[data-aos]{ will-change:transform, opacity; }
[data-aos].aos-animate{ will-change:auto; }
/* Ubin ikon berdenyut halus sekali saat bagiannya masuk layar. */
.aos-animate > .ios-icon,
.aos-animate .kartu-layanan > .ios-icon{
animation:bkIkonMuncul .55s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes bkIkonMuncul{
from{ transform:scale(.72) rotate(-6deg); opacity:0; }
to { transform:none; opacity:1; }
}
/* Garis bawah tautan navigasi tumbuh dari tengah, bukan muncul mendadak. */
.navbar-nav .nav-link::after{
transform:scaleX(0); transform-origin:center;
transition:transform .25s cubic-bezier(.2,.9,.3,1);
}
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:hover::after{ transform:scaleX(1); }
.navbar-nav .nav-link:hover::after{
content:''; position:absolute; left:14px; right:14px; bottom:4px;
height:3px; border-radius:3px; background:var(--bk-gradasi); opacity:.5;
}
/* =========================================================================
ANIMASI KONTEN: FOTO, KARTU, DAN BAGIAN
-------------------------------------------------------------------------
Rasa yang dikejar: lembut, cepat, tidak kaku. Tiga aturan yang dipegang:
- Mikro-interaksi 180-260ms, pelambatan di ujung (bukan linear).
- Hanya transform dan opacity yang dianimasikan — keduanya ditangani
kartu grafis, sehingga tidak memaksa tata letak dihitung ulang.
- Setiap gerakan mati saat pengguna memilih "hentikan animasi".
========================================================================= */
/* -- Foto: membesar perlahan di dalam bingkainya --------------------------- */
.konselor-foto,
.artikel-gambar,
.item-galeri,
.tentang-gambar{
overflow:hidden;
position:relative;
}
.konselor-foto img,
.artikel-gambar img,
.item-galeri img,
.tentang-gambar img{
transition:transform .55s cubic-bezier(.22,.8,.3,1), filter .35s ease;
will-change:transform;
}
.kartu-konselor:hover .konselor-foto img,
.kartu-artikel:hover .artikel-gambar img,
.item-galeri:hover img,
.tentang-gambar:hover img{
transform:scale(1.06);
}
/* Kilau hijau tipis menyapu foto saat disorot */
.konselor-foto::after,
.artikel-gambar::after{
content:'';
position:absolute; inset:0;
background:linear-gradient(140deg,
rgba(32,184,6,0) 40%,
rgba(32,184,6,.16) 55%,
rgba(32,184,6,0) 70%);
transform:translateX(-120%);
transition:transform .7s cubic-bezier(.22,.8,.3,1);
pointer-events:none; z-index:1;
}
.kartu-konselor:hover .konselor-foto::after,
.kartu-artikel:hover .artikel-gambar::after{ transform:translateX(120%); }
/* -- Kartu: terangkat dengan bayangan berwarna merek ----------------------- */
.kartu-layanan,
.kartu-konselor,
.kartu-artikel,
.kartu-capaian,
.kartu-sdg,
.kartu-tiket{
transition:transform .26s cubic-bezier(.22,.8,.3,1),
box-shadow .26s ease,
border-color .26s ease;
will-change:transform;
}
.kartu-layanan:hover,
.kartu-konselor:hover,
.kartu-artikel:hover,
.kartu-capaian:hover,
.kartu-sdg:hover,
.kartu-tiket:hover{
box-shadow:0 22px 44px -22px rgba(10,90,2,.45);
}
/* Garis hijau tumbuh di sisi atas kartu layanan saat disorot */
.kartu-layanan{ position:relative; overflow:hidden; }
.kartu-layanan::before{
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:var(--bk-gradasi);
transform:scaleX(0); transform-origin:left;
transition:transform .35s cubic-bezier(.22,.8,.3,1);
}
.kartu-layanan:hover::before{ transform:scaleX(1); }
/* -- Tombol: kilau melintas sekali saat disorot ---------------------------- */
.btn-bk-utama{ position:relative; overflow:hidden; }
.btn-bk-utama::after{
content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));
transform:skewX(-18deg);
transition:left .6s cubic-bezier(.22,.8,.3,1);
pointer-events:none;
}
.btn-bk-utama:hover::after{ left:120%; }
/* -- Ubin ikon: sedikit berputar saat kartunya disorot --------------------- */
.kartu-layanan:hover > .ios-icon,
.kartu-kaca:hover > .ios-icon,
.kartu-kontak:hover > .ios-icon{
transform:translateY(-3px) rotate(-4deg) scale(1.06);
}
/* -- Bagian: muncul bertahap, tidak serempak ------------------------------- */
/* Jeda kecil antar kartu dalam satu baris membuat bagian terasa "mengalir"
alih-alih muncul sekaligus seperti gambar yang di-paste. */
[data-aos][data-aos-delay]{ transition-delay:inherit; }
/* Judul bagian: garis kecil tumbuh di bawah label */
.judul-bagian .label{ position:relative; }
.judul-bagian .label::after{
content:''; position:absolute; left:50%; bottom:-7px;
width:0; height:2px; border-radius:2px; background:var(--bk-gradasi);
transform:translateX(-50%);
transition:width .5s cubic-bezier(.22,.8,.3,1) .15s;
}
.judul-bagian.aos-animate .label::after,
.aos-animate > .judul-bagian .label::after{ width:38px; }
/* =========================================================================
LAPISAN GERAK YANG DIADOPSI DARI RUJUKAN
-------------------------------------------------------------------------
Rujukan gaya gerak: tema korporat hijau yang Anda tunjukkan. Yang diambil
adalah rasanya, bukan tumpukan pustaka jQuery-nya (WOW.js, Owl, Stellar,
scrollToFixed). Empat kebiasaan yang membuatnya terasa lembut:
1. Foto membesar lambat sekali - sekitar satu detik, bukan seperempat.
Mata membacanya sebagai "hidup", bukan sebagai "meloncat".
2. Selubung dan tirai tidak meluncur, melainkan mengembang dari titik
kecil ke ukuran penuh (scale 0 -> 1) selama 0,4 detik.
3. Ikon membesar berani saat disorot (1,2x sampai 1,4x), bukan malu-malu.
4. Tombol penting berdenyut dengan cincin yang melebar lalu memudar.
Semua tetap hanya menganimasikan transform dan opacity, dan semuanya mati
saat pengguna memilih "hentikan animasi".
========================================================================= */
/* 1. Foto: pembesaran panjang dan datar, mendekati rasa 1200ms milik rujukan.
Aturan galeri ditulis di blok galerinya sendiri supaya tidak saling
menimpa dengan aturan yang berada lebih jauh di bawah berkas ini. */
.konselor-foto img,
.artikel-gambar img,
.tentang-gambar img{
transition:transform .95s cubic-bezier(.19,.62,.24,1), filter .4s ease;
}
.kartu-konselor:hover .konselor-foto img,
.kartu-artikel:hover .artikel-gambar img,
.tentang-gambar:hover img{
transform:scale(1.09);
}
/* 2. Ubin ikon membesar lebih berani saat kartunya disorot */
.kartu-layanan:hover > .ios-icon,
.kartu-kaca:hover > .ios-icon,
.kartu-kontak:hover > .ios-icon{
transform:translateY(-4px) rotate(-4deg) scale(1.18);
transition:transform .3s cubic-bezier(.22,.8,.3,1);
}
.kartu-sdg:hover > .ios-icon,
.kartu-capaian:hover > .ios-icon{
transform:scale(1.14);
transition:transform .3s cubic-bezier(.22,.8,.3,1);
}
/* 3. Denyut cincin pada tombol bantuan - versi hijau dari denyut rujukan */
@keyframes bkDenyutCincin{
0% { box-shadow:0 0 0 0 rgba(37,211,102,.55); }
70% { box-shadow:0 0 0 16px rgba(37,211,102,0); }
100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
.tombol-wa{ animation:bkDenyutCincin 2.4s ease-out infinite; }
.tombol-wa:hover{ animation-play-state:paused; }
/* 4. Kurva pemunculan saat menggulir: berhenti melandai panjang di ujung,
sehingga bagian terasa "mendarat" alih-alih berhenti mendadak. */
[data-aos]{ transition-timing-function:cubic-bezier(.19,.62,.24,1); }
:root[data-gerak="diam"] .tombol-wa{ animation:none; }
@media (prefers-reduced-motion: reduce){
.tombol-wa{ animation:none; }
}
/* -- 3. Hormati pengaturan pengguna ---------------------------------------- */
:root[data-gerak="diam"] body{ opacity:1; animation:none; transform:none; }
:root[data-gerak="diam"] body.bk-pergi{ opacity:1; transform:none; transition:none; }
:root[data-gerak="diam"] .tirai-transisi{ display:none; }
:root[data-gerak="diam"] .aos-animate > .ios-icon,
:root[data-gerak="diam"] .aos-animate .kartu-layanan > .ios-icon{ animation:none; }
:root[data-gerak="diam"] html{ scroll-behavior:auto; }
@media (prefers-reduced-motion: reduce){
body{ opacity:1; animation:none; }
.tirai-transisi{ display:none; }
.aos-animate > .ios-icon{ animation:none; }
html{ scroll-behavior:auto; }
}
/* -- Kepala halaman dalam -------------------------------------------------- */
.kepala-halaman{
background:var(--bk-gradasi); color:#fff;
padding:clamp(44px,6vw,76px) 0;
position:relative; overflow:hidden;
}
.kepala-halaman::after{
content:''; position:absolute; right:-80px; top:-80px;
width:300px; height:300px; border-radius:50%;
background:rgba(255,255,255,.08); pointer-events:none;
}
.kepala-halaman > .container{ position:relative; z-index:2; }
.kepala-halaman h1{
color:#fff; font-size:clamp(1.6rem,3.6vw,2.6rem);
margin:12px 0 10px; letter-spacing:-.02em;
}
.kepala-halaman p{ color:rgba(255,255,255,.85); margin:0; max-width:680px; }
.remah{
list-style:none; display:flex; flex-wrap:wrap; align-items:center;
gap:8px; padding:0; margin:0; font-size:.86rem;
}
.remah li{ display:flex; align-items:center; gap:8px; }
.remah li + li::before{ content:'\F285'; font-family:'bootstrap-icons'; opacity:.5; font-size:.75rem; }
.remah a{ color:rgba(255,255,255,.82); }
.remah a:hover{ color:#fff; }
.remah span{ color:#fff; font-weight:600; }
/* -- Isi artikel & halaman statis ------------------------------------------ */
.isi-teks{ font-size:1.02rem; line-height:1.85; color:var(--bk-teks); }
.isi-teks h2,.isi-teks h3,.isi-teks h4{ margin:32px 0 14px; }
.isi-teks h2{ font-size:1.5rem; } .isi-teks h3{ font-size:1.22rem; } .isi-teks h4{ font-size:1.06rem; }
.isi-teks p{ margin-bottom:18px; }
.isi-teks ul,.isi-teks ol{ margin:0 0 20px; padding-left:24px; }
.isi-teks li{ margin-bottom:9px; }
.isi-teks img{ border-radius:16px; margin:20px 0; box-shadow:var(--bk-bayang); }
.isi-teks blockquote{
border-left:4px solid var(--bk-sekunder);
background:var(--bk-permukaan-2);
padding:18px 22px; margin:22px 0; border-radius:0 14px 14px 0;
font-style:italic; color:var(--bk-teks-lembut);
}
.isi-teks a{ text-decoration:underline; }
/* -- Panel samping --------------------------------------------------------- */
.kartu-samping{
background:#fff; border-radius:var(--bk-radius); padding:24px;
border:1px solid var(--bk-garis); box-shadow:var(--bk-bayang-sm);
margin-bottom:22px;
}
.kartu-samping h3{
font-size:1rem; margin-bottom:16px; padding-bottom:14px;
border-bottom:1px solid var(--bk-garis);
display:flex; align-items:center; gap:11px;
}
/* -- Halaman kosong -------------------------------------------------------- */
.kosong-pesan{
text-align:center; padding:56px 24px;
background:#fff; border-radius:var(--bk-radius);
border:1px dashed var(--bk-garis);
}
.kosong-pesan h3{ font-size:1.1rem; margin:18px 0 8px; }
.kosong-pesan p{ color:var(--bk-teks-lembut); margin:0 auto 20px; max-width:420px; }
/* -- Paginasi -------------------------------------------------------------- */
.paginasi{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; list-style:none; padding:0; margin:44px 0 0; }
.paginasi a,.paginasi span{
display:inline-flex; align-items:center; justify-content:center;
min-width:44px; min-height:44px; padding:0 14px;
border-radius:12px; border:1px solid var(--bk-garis);
background:#fff; font-weight:700; font-size:.9rem; color:var(--bk-teks);
}
.paginasi a:hover{ border-color:var(--bk-primer); color:var(--bk-primer); }
.paginasi .aktif{ background:var(--bk-gradasi); color:#fff; border-color:transparent; }
.paginasi .mati{ opacity:.45; pointer-events:none; }
/* -- Tentang -------------------------------------------------------------- */
.tentang-gambar{
border-radius:var(--bk-radius-lg); overflow:hidden;
box-shadow:var(--bk-bayang-lg); position:relative;
}
.tentang-gambar img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.tentang-gambar.kosong{
background:var(--bk-gradasi);
min-height:340px; display:flex; align-items:center; justify-content:center;
}
.tentang-poin{ list-style:none; padding:0; margin:26px 0 0; }
.tentang-poin li{
display:flex; align-items:flex-start; gap:14px;
padding:11px 0; font-weight:600;
}
.tentang-poin li i{ color:#16A34A; font-size:1.25rem; margin-top:2px; }
/* -- Angka capaian -------------------------------------------------------- */
.kartu-capaian{
background:#fff; border-radius:var(--bk-radius);
padding:30px 22px; text-align:center; height:100%;
box-shadow:var(--bk-bayang); border:1px solid var(--bk-garis);
transition:transform .25s ease, box-shadow .25s ease;
}
.kartu-capaian:hover{ transform:translateY(-5px); box-shadow:var(--bk-bayang-lg); }
/* Angka capaian: hijau polos. Angka sebesar ini justru lebih tegas tanpa
gradasi, dan ujung gradasi yang terang membuatnya sulit dibaca. */
.kartu-capaian .angka{
font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; line-height:1.1;
color:var(--bk-hijau-baca);
margin:16px 0 4px;
}
.kartu-capaian .label{ color:var(--bk-teks-lembut); font-size:.9rem; font-weight:600; margin:0; }
/* -- Layanan -------------------------------------------------------------- */
.kartu-layanan{
background:#fff; border-radius:var(--bk-radius);
padding:32px 26px; height:100%;
border:1px solid var(--bk-garis);
box-shadow:var(--bk-bayang-sm);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
display:flex; flex-direction:column;
}
.kartu-layanan:hover{
transform:translateY(-6px);
box-shadow:var(--bk-bayang-lg);
border-color:transparent;
}
.kartu-layanan h3{ font-size:1.1rem; margin:20px 0 10px; }
.kartu-layanan p{ color:var(--bk-teks-lembut); font-size:.93rem; flex:1; margin-bottom:16px; }
.kartu-layanan .tautan{
font-weight:700; font-size:.88rem; display:inline-flex; align-items:center; gap:7px;
}
.kartu-layanan .tautan i{ transition:transform .2s ease; }
.kartu-layanan:hover .tautan i{ transform:translateX(4px); }
.lencana-disabilitas{
display:inline-flex; align-items:center; gap:6px;
background:rgba(245,158,11,.14); color:#BE185D;
padding:5px 12px; border-radius:999px;
font-size:.74rem; font-weight:700; margin-bottom:12px; align-self:flex-start;
}
/* -- Infografis ----------------------------------------------------------- */
/* Tinggi SENGAJA tidak dipaksa 100% di kelas dasar. Bila dipaksa, dua kartu
yang ditumpuk dalam satu kolom masing-masing meminta setinggi kolomnya,
sehingga gabungannya dua kali tinggi kolom dan meluber keluar bagian -
menabrak konten bagian berikutnya. Kartu yang memang perlu setinggi
kolomnya cukup diberi utilitas .h-100 di tempat pemakaiannya.
min-width:0 mencegah isi lebar (tabel/kanvas) memaksa kolom melar. */
.kartu-grafik{
background:#fff; border-radius:var(--bk-radius);
padding:26px;
min-width:0;
border:1px solid var(--bk-garis); box-shadow:var(--bk-bayang-sm);
}
.kartu-grafik h3{
font-size:1rem; margin:0 0 4px;
display:flex; align-items:center; gap:12px;
}
.kartu-grafik .ket{ color:var(--bk-teks-lembut); font-size:.84rem; margin:0 0 18px; }
.bingkai-grafik{ position:relative; height:280px; }
.bingkai-grafik.pendek{ height:230px; }
.kartu-sorot{
background:var(--bk-gradasi); color:#fff;
border-radius:var(--bk-radius); padding:28px; height:100%;
}
.kartu-sorot .angka{ font-size:2.6rem; font-weight:800; line-height:1; margin:14px 0 6px; }
.kartu-sorot p{ color:rgba(255,255,255,.85); margin:0; font-size:.92rem; }
.baris-mutu{ display:flex; flex-direction:column; gap:18px; margin-top:6px; }
.batang-mutu .atas{ display:flex; justify-content:space-between; font-size:.88rem; font-weight:600; margin-bottom:7px; }
.batang-mutu .alur{ height:9px; border-radius:999px; background:rgba(32,184,6,.12); overflow:hidden; }
.batang-mutu .isi{ height:100%; border-radius:999px; background:var(--bk-gradasi); transition:width 1s ease; }
/* -- Departemen bertab (kategori persoalan) -------------------------------- */
.tab-kategori{ display:flex; flex-direction:column; gap:10px; }
.tab-kategori button{
display:flex; align-items:center; gap:14px; width:100%;
background:#fff; border:1px solid var(--bk-garis);
border-radius:14px; padding:14px 18px; text-align:left;
font-weight:700; font-size:.95rem; color:var(--bk-teks);
min-height:56px; cursor:pointer;
transition:background .2s ease, color .2s ease, transform .2s ease;
}
.tab-kategori button:hover{ transform:translateX(4px); }
.tab-kategori button.aktif{
background:var(--bk-gradasi); color:#fff; border-color:transparent;
box-shadow:0 12px 26px -12px var(--bk-primer);
}
.tab-kategori button.aktif .ios-icon{ box-shadow:none; }
.isi-kategori{
background:#fff; border:1px solid var(--bk-garis);
border-radius:var(--bk-radius); padding:30px;
height:100%;
display:flex; flex-direction:column;
}
.isi-kategori h3{ font-size:1.3rem; margin-bottom:6px; }
.isi-kategori p{ color:var(--bk-teks-lembut); }
/* Kepala panel: ikon, judul, dan angka nyata bidang tersebut */
.kategori-kepala{
display:flex; align-items:flex-start; gap:16px;
padding-bottom:20px; margin-bottom:20px;
border-bottom:1px solid var(--bk-garis);
}
.kategori-kepala > div{ flex:1; min-width:0; }
.kategori-angka{
flex:0 0 auto; text-align:center; line-height:1.15;
background:var(--bk-permukaan-2); border-radius:14px; padding:10px 16px;
}
.kategori-angka strong{
display:block; font-size:1.5rem; font-weight:800;
color:var(--bk-hijau-baca);
}
.kategori-angka small{ font-size:.7rem; color:var(--bk-teks-lembut); }
.kategori-sub{
font-size:.82rem; font-weight:800; text-transform:uppercase;
letter-spacing:.1em; color:var(--bk-teks-lembut);
display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.kategori-sub i{ color:var(--bk-primer); font-size:1rem; }
/* Daftar keluhan: dibuat menyerupai kutipan agar pembaca mengenali dirinya */
.daftar-keluhan{ list-style:none; padding:0; margin:0 0 12px; }
.daftar-keluhan li{
position:relative; padding:9px 14px 9px 30px; margin-bottom:7px;
background:var(--bk-permukaan-2); border-radius:0 11px 11px 0;
border-left:3px solid var(--bk-sekunder);
font-size:.9rem; font-style:italic; color:var(--bk-teks);
}
.daftar-keluhan li::before{
content:'\201C'; position:absolute; left:10px; top:6px;
font-size:1.3rem; color:var(--bk-sekunder); font-style:normal; line-height:1;
}
.kategori-catatan{ font-size:.83rem; color:var(--bk-teks-lembut); margin:0; }
.daftar-manfaat{ list-style:none; padding:0; margin:0 0 16px; }
.daftar-manfaat li{
display:flex; align-items:flex-start; gap:10px;
padding:7px 0; font-size:.91rem;
}
.daftar-manfaat i{ color:#16A34A; font-size:1.05rem; margin-top:2px; flex:0 0 auto; }
.kategori-jaminan{ display:flex; flex-wrap:wrap; gap:8px; }
.kategori-jaminan span{
display:inline-flex; align-items:center; gap:6px;
background:rgba(22,163,74,.1); color:#15803D;
padding:5px 12px; border-radius:999px;
font-size:.75rem; font-weight:700;
}
/* Deret wajah konselor */
.kategori-konselor{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
margin-top:auto; padding-top:20px;
border-top:1px solid var(--bk-garis);
}
.kategori-konselor-label{
font-size:.75rem; font-weight:800; text-transform:uppercase;
letter-spacing:.1em; color:var(--bk-teks-lembut);
}
.kategori-wajah{ display:flex; }
.kategori-wajah a{
width:40px; height:40px; border-radius:50%; overflow:hidden;
border:2px solid #fff; margin-left:-10px;
box-shadow:var(--bk-bayang-sm); transition:transform .2s ease;
display:inline-flex; align-items:center; justify-content:center;
}
.kategori-wajah a:first-child{ margin-left:0; }
.kategori-wajah a:hover{ transform:translateY(-3px); z-index:2; }
.kategori-wajah img{ width:100%; height:100%; object-fit:cover; }
.inisial-bulat{
width:100%; height:100%;
background:var(--bk-gradasi); color:#fff;
display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:.95rem;
}
.kategori-tautan{ margin-left:auto; font-size:.85rem; font-weight:700; white-space:nowrap; }
.kategori-aksi{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
@media (max-width:575.98px){
.isi-kategori{ padding:22px 18px; }
.kategori-kepala{ gap:12px; }
.kategori-angka{ padding:8px 12px; }
.kategori-angka strong{ font-size:1.2rem; }
.kategori-tautan{ margin-left:0; width:100%; }
.kategori-aksi .btn-bk{ width:100%; }
}
:root[data-kontras="gelap"] .daftar-keluhan li,
:root[data-kontras="gelap"] .kategori-angka{ background:#1E3524; }
:root[data-kontras="tinggi"] .daftar-keluhan li,
:root[data-kontras="tinggi"] .kategori-angka{ background:#000 !important; border:1px solid #fff; }
:root[data-kontras="tinggi"] .kategori-angka strong{ -webkit-text-fill-color:#FFD500; color:#FFD500 !important; }
/* -- Konselor ------------------------------------------------------------- */
/* Susunannya berlapis, bukan kotak bertumpuk: foto memenuhi bingkai, deret
kontak menyelinap dari tepi kiri satu per satu, lalu papan nama putih
menumpang di bagian bawah foto. Papan nama sengaja melayang supaya nama
dan jabatan tetap terbaca meski fotonya ramai. */
.kartu-konselor{
position:relative; background:transparent;
border:none; box-shadow:none;
height:100%; display:flex; flex-direction:column;
transition:transform .3s cubic-bezier(.22,.8,.3,1);
}
.kartu-konselor:hover{ transform:translateY(-7px); box-shadow:none; }
/* Dua hijau sebagai warna dominan, dengan pusat yang lebih terang seperti ada
cahaya jatuh dari depan. Lapisan terangnya radial dan ditumpuk DI ATAS
gradasi warnanya, jadi keduanya bisa disetel sendiri-sendiri.
Titik pusatnya sengaja di 50% 30%, bukan tepat di tengah. Huruf inisial
berdiri di tengah kotak; kalau puncak terangnya ditaruh di sana, huruf putih
itu jatuh tepat di bagian paling pucat dan hampir hilang. Digeser ke atas,
cahayanya tetap terbaca sebagai sorotan tanpa memakan hurufnya.
Latar ini hanya tampak saat fotonya belum diunggah. Justru itu alasannya
perlu rapi: yang belum punya foto adalah yang paling sering dilihat sebagai
kotak kosong. */
.konselor-foto{
position:relative; aspect-ratio:3/4; overflow:hidden;
border-radius:20px;
background:
/* 1. Sudut digelapkan. Inilah yang paling menentukan: latar studio
selalu meluruh ke arah tepi, dan tanpa peluruhan itu cahaya di
tengah terbaca sebagai noda, bukan sebagai sorotan. */
radial-gradient(118% 92% at 50% 40%,
rgba(6,48,20,0) 44%,
rgba(6,48,20,.26) 76%,
rgba(6,48,20,.5) 100%),
/* 2. Sorotan utama. Elips, bukan lingkaran, dan pusatnya di atas
tengah - kira-kira di belakang kepala kalau ini foto orang. */
radial-gradient(68% 46% at 50% 26%,
rgba(255,255,255,.44) 0%,
rgba(255,255,255,.17) 45%,
rgba(255,255,255,0) 72%),
/* 3. Sorotan kedua yang digeser ke kanan atas. Bagian inilah yang
membuat sebarannya TIDAK MERATA. Satu sorotan saja, sekuat apa
pun, akan selalu terbaca simetris dan buatan; dua sorotan dengan
pusat dan ukuran berbeda saling menumpuk dan menghasilkan bentuk
yang tidak beraturan, seperti kain latar yang disinari lampu. */
radial-gradient(44% 34% at 64% 20%,
rgba(255,255,255,.2) 0%,
rgba(255,255,255,0) 68%),
/* 4. Warna dasarnya. */
linear-gradient(135deg, #198754 0%, #1fcf0a 100%);
display:flex; align-items:center; justify-content:center;
box-shadow:0 16px 36px -22px rgba(9,58,4,.55);
}
.konselor-foto img{ width:100%; height:100%; object-fit:cover; }
.konselor-foto .inisial{
font-size:3.2rem; font-weight:800; color:#fff;
/* Huruf ini berdiri di bidang yang sengaja dibuat terang, jadi
keterbacaannya TIDAK bisa bersandar pada kontras latarnya. Bayangan
rangkap yang menanggungnya: satu rapat untuk menegaskan bentuk huruf,
satu lebar untuk memisahkannya dari sorotan di belakangnya. */
text-shadow:
0 1px 0 rgba(6,48,20,.5),
0 3px 16px rgba(6,48,20,.65);
}
/* Kaki foto digelapkan sedikit supaya papan nama putih punya pijakan. */
.konselor-foto::before{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg,rgba(9,58,4,0) 52%,rgba(9,58,4,.42) 100%);
}
/* Deret kontak: kolom di tepi kiri, masuk beruntun saat kartu disorot. */
.konselor-sosial{
position:absolute; left:14px; top:16px; right:auto; bottom:auto;
display:flex; flex-direction:column; gap:9px; padding:0;
background:none; z-index:3;
}
.konselor-sosial a{
width:38px; height:38px; border-radius:12px;
display:inline-flex; align-items:center; justify-content:center;
background:#fff; color:#123019; font-size:1rem;
box-shadow:0 8px 18px -10px rgba(9,58,4,.6);
opacity:0; transform:translateX(-150%);
transition:opacity .3s ease,
transform .42s cubic-bezier(.22,.8,.3,1),
background .22s ease, color .22s ease;
}
.konselor-sosial a:nth-child(1){ transition-delay:.04s; }
.konselor-sosial a:nth-child(2){ transition-delay:.12s; }
.konselor-sosial a:nth-child(3){ transition-delay:.2s; }
.konselor-sosial a:nth-child(4){ transition-delay:.28s; }
.kartu-konselor:hover .konselor-sosial a,
.kartu-konselor:focus-within .konselor-sosial a{ opacity:1; transform:translateX(0); }
.konselor-sosial a:hover,
.konselor-sosial a:focus-visible{ background:var(--bk-primer); color:#fff; }
/* Papan nama: menumpang naik ke atas foto, tepinya masuk ke dalam. */
.konselor-isi{
position:relative; z-index:4;
margin:-64px 16px 0; padding:18px 16px 16px;
background:#fff; border-radius:16px;
box-shadow:0 18px 38px -22px rgba(9,58,4,.5);
text-align:center; flex:1; display:flex; flex-direction:column;
transition:box-shadow .3s ease, transform .3s cubic-bezier(.22,.8,.3,1);
}
.kartu-konselor:hover .konselor-isi{
transform:translateY(-4px);
box-shadow:0 26px 48px -24px rgba(10,90,2,.5);
}
.konselor-isi h3{ font-size:1.05rem; margin-bottom:4px; }
.konselor-isi .jabatan{ color:var(--bk-hijau-baca); font-weight:600; font-size:.86rem; margin-bottom:10px; }
.konselor-isi .spesialis{ color:var(--bk-teks-lembut); font-size:.85rem; flex:1; }
/* Layar sentuh tidak mengenal penyorotan, jadi deret kontak ditampilkan
sejak awal. Kalau tidak, tautannya mustahil dijangkau. */
@media (hover:none){
.konselor-sosial a{ opacity:1; transform:none; transition-delay:0s; }
}
.lencana-prodi{
display:inline-block; padding:4px 12px; border-radius:999px;
font-size:.72rem; font-weight:700; color:#fff; margin-bottom:10px;
}
.lencana-isyarat{
display:inline-flex; align-items:center; gap:5px;
background:rgba(13,148,136,.12); color:#0F766E;
padding:4px 11px; border-radius:999px; font-size:.72rem; font-weight:700;
margin-top:10px;
}
/* -- Sambutan Dekan -------------------------------------------------------- */
/* Dua kolom: potret di kiri, kutipan dan sambutan di kanan. Kutipan pendek
sengaja dipisahkan dari isi sambutan dan dibuat besar - pengunjung jarang
membaca sambutan pimpinan sampai habis, jadi satu kalimat paling berkesan
perlu berdiri sendiri di depan. */
/* Bingkai foto memakai neumorphism, dan itu menuntut satu syarat yang sering
dilewatkan: permukaan bingkai HARUS sewarna permukaan di belakangnya.
Neumorphism bukan "kartu dengan bayangan lembut" melainkan ilusi satu bidang
yang ditekan dan ditonjolkan. Begitu bingkainya beda warna dari induknya,
ilusi itu runtuh dan yang tersisa hanya kotak abu-abu berbayang.
Karena itu .kartu-dekan ikut memakai permukaan yang sama dan melepas garis
tepinya - garis tepi memotong gradien bayangan yang justru jadi sumber
kesan timbulnya. */
.kartu-dekan{
--neu-permukaan:#EDF1F7;
--neu-gelap:rgba(158,174,198,.55);
--neu-terang:rgba(255,255,255,.95);
position:relative;
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:36px; align-items:start;
background:var(--neu-permukaan); border:none;
border-radius:var(--bk-radius-lg); padding:30px;
box-shadow:
14px 14px 32px var(--neu-gelap),
-14px -14px 32px var(--neu-terang);
}
/* Bingkai menonjol, fotonya duduk masuk ke dalamnya. */
.dekan-potret{
position:relative; aspect-ratio:4/5;
border-radius:26px; padding:13px;
background:var(--neu-permukaan);
box-shadow:
9px 9px 20px var(--neu-gelap),
-9px -9px 20px var(--neu-terang);
display:flex; align-items:center; justify-content:center;
}
.dekan-potret img{
width:100%; height:100%; object-fit:cover;
border-radius:16px;
}
/* Cekungan tempat foto duduk. Dipasang lewat pseudo-element, bukan
box-shadow:inset pada : bayangan dalam pada elemen tergantikan
(replaced element) tidak dirender seragam antarperamban. */
.dekan-potret::after{
content:''; position:absolute; inset:13px;
border-radius:16px; pointer-events:none;
box-shadow:
inset 4px 4px 9px rgba(158,174,198,.5),
inset -3px -3px 8px rgba(255,255,255,.6);
}
.dekan-inisial{
font-family:var(--bk-font-judul);
font-size:3.8rem; font-weight:800;
color:var(--bk-hijau-baca);
letter-spacing:.02em;
}
/* Papan nama menumpang di kaki potret, sejalan dengan kartu konselor. */
/* Deret kanal media sosial, menumpang di kaki foto.
z-index perlu: ::after bingkai dibuat setelah papan ini dalam urutan lukis,
jadi tanpa ini cekungannya menimpa tepi papan. */
/* Kacanya diberi rona GELAP, bukan terang.
Kaca terang hanya terbaca di atas bagian foto yang gelap - begitu ia
menumpang di kemeja putih atau latar terang, ikon gelapnya lenyap. Foto yang
diunggah admin tidak bisa ditebak, jadi pilihannya harus benar di atas
keduanya. Rona gelap + ikon putih adalah pasangan yang bertahan di atas
gambar apa pun: di bagian gelap ia menyatu, di bagian terang ronanya yang
menahan kontras.
Tetap kaca, bukan kotak buram - kadar 42% masih meneruskan bentuk foto di
belakangnya, dan blur-nya yang membuat batas papan terbaca lembut. */
.dekan-plat{
position:absolute; left:50%; bottom:24px; z-index:2;
transform:translateX(-50%);
border-radius:999px; padding:7px 9px;
display:flex; align-items:center; gap:5px;
background:rgba(12,26,17,.42);
backdrop-filter:blur(14px) saturate(135%);
-webkit-backdrop-filter:blur(14px) saturate(135%);
border:1px solid rgba(255,255,255,.28);
box-shadow:0 10px 28px -14px rgba(8,20,12,.6);
}
.dekan-plat a{
width:44px; height:44px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
color:#fff; font-size:1.14rem;
/* Halo gelap tipis: penjaga terakhir kalau titik terang foto kebetulan
jatuh persis di belakang satu ikon. */
text-shadow:0 1px 4px rgba(0,0,0,.55);
transition:background .2s ease, color .2s ease, transform .2s ease;
}
.dekan-plat a:hover,
.dekan-plat a:focus-visible{
background:var(--bk-primer); color:#fff;
text-shadow:none; transform:translateY(-2px);
}
.dekan-kutipan{
position:relative; margin:0 0 22px; padding-left:50px;
}
.dekan-kutipan i{
position:absolute; left:0; top:-10px;
font-size:2.7rem; line-height:1;
color:var(--bk-primer); opacity:.5;
}
.dekan-kutipan p{
margin:0; font-family:var(--bk-font-judul);
font-size:clamp(1.08rem,1.9vw,1.38rem); font-weight:700;
line-height:1.45; color:var(--bk-teks); text-wrap:balance;
}
.dekan-sambutan p{
margin:0 0 14px; font-size:.97rem; line-height:1.8;
color:var(--bk-teks-lembut);
}
.dekan-sambutan p:last-child{ margin-bottom:0; }
/* Cap resmi di sudut kanan atas kartu. */
.dekan-cap{
position:absolute; top:26px; right:28px; z-index:3;
height:64px; width:auto; object-fit:contain;
opacity:.92; pointer-events:none;
}
/* Kaki sambutan: nama penanda tangan di kiri, tiga layanan di kanan,
dipisah satu garis tegak. */
.dekan-kaki{
margin-top:26px; padding-top:20px;
border-top:1px solid rgba(158,174,198,.45);
display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.dekan-tanda{
display:flex; flex-direction:column; line-height:1.3;
flex:1 1 200px; min-width:0;
}
.dekan-tanda b{ font-size:1rem; color:var(--bk-teks); }
.dekan-tanda small{ font-size:.82rem; font-weight:600; color:var(--bk-hijau-baca); }
.dekan-layanan{
list-style:none; margin:0; padding:0 0 0 24px;
border-left:1px solid rgba(158,174,198,.45);
display:flex; gap:10px; flex-wrap:wrap;
}
.dekan-layanan a{
display:flex; align-items:center; gap:9px;
padding:8px 14px 8px 8px; border-radius:14px;
background:var(--neu-permukaan); color:var(--bk-teks);
font-size:.82rem; font-weight:700; line-height:1.25;
max-width:190px; min-height:44px;
/* Keadaan diam: CEKUNG ke dalam permukaan, seperti ceruk yang dipahat.
Saat disorot ia naik menjadi timbul - arah geraknya keluar menyambut
kursor, bukan tenggelam menjauh. */
box-shadow:
inset 4px 4px 9px var(--neu-gelap),
inset -3px -3px 8px var(--neu-terang);
transition:transform .22s cubic-bezier(.22,.8,.3,1), box-shadow .22s ease;
}
.dekan-layanan a:hover,
.dekan-layanan a:focus-visible{
color:var(--bk-teks); transform:translateY(-2px);
box-shadow:
5px 5px 12px var(--neu-gelap),
-4px -4px 10px var(--neu-terang);
}
.dekan-layanan a > span:last-child{
overflow:hidden; display:-webkit-box;
-webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* Neumorphism hidup dari bayangan berkontras rendah - persis yang sedang
ditolak pengguna saat memilih kontras tinggi atau mode gelap. Di dua mode
itu bingkainya kembali menjadi kotak bergaris tegas. */
:root[data-kontras="tinggi"] .kartu-dekan,
:root[data-kontras="tinggi"] .dekan-plat,
:root[data-kontras="tinggi"] .dekan-potret{
background:#000 !important; border:2px solid #fff !important; box-shadow:none !important;
}
:root[data-kontras="tinggi"] .dekan-potret::after,
:root[data-kontras="gelap"] .dekan-potret::after,
:root[data-kontras="sepia"] .dekan-potret::after{ display:none; }
:root[data-kontras="tinggi"] .dekan-inisial{ color:#FFD500; }
:root[data-kontras="gelap"] .kartu-dekan,
:root[data-kontras="gelap"] .dekan-potret,
:root[data-kontras="gelap"] .dekan-plat{ box-shadow:none; }
:root[data-kontras="sepia"] .kartu-dekan,
:root[data-kontras="sepia"] .dekan-potret,
:root[data-kontras="sepia"] .dekan-plat{ box-shadow:none; }
:root[data-kontras="tinggi"] .dekan-plat a,
:root[data-kontras="tinggi"] .dekan-kutipan p,
:root[data-kontras="tinggi"] .dekan-sambutan p,
:root[data-kontras="tinggi"] .dekan-tanda b,
:root[data-kontras="tinggi"] .dekan-tanda small{ color:#fff !important; }
:root[data-kontras="tinggi"] .dekan-kutipan i{ color:#FFD500; opacity:1; }
:root[data-kontras="gelap"] .kartu-dekan,
:root[data-kontras="gelap"] .dekan-plat{ background:#17291B; border-color:rgba(21,127,4,.2); }
:root[data-kontras="gelap"] .dekan-plat a,
:root[data-kontras="gelap"] .dekan-kutipan p,
:root[data-kontras="gelap"] .dekan-tanda b{ color:#F0FAF1; }
:root[data-kontras="gelap"] .dekan-sambutan p{ color:#9DB3A2; }
:root[data-kontras="sepia"] .kartu-dekan,
:root[data-kontras="sepia"] .dekan-plat{ background:#FBF6EC; border-color:#D9C9AE; }
/* Papan sosial pada ketiga mode bantu: kaca dilepas.
backdrop-filter membuat warna papan bergantung pada foto di belakangnya,
dan ketiga mode ini justru ada untuk menghilangkan ketidakpastian semacam
itu. Di sepia papannya terang, jadi ikonnya WAJIB dibalik menjadi gelap -
ikon putih bawaan akan hilang sama sekali di atasnya. */
:root[data-kontras="tinggi"] .dekan-plat,
:root[data-kontras="gelap"] .dekan-plat,
:root[data-kontras="sepia"] .dekan-plat{
backdrop-filter:none; -webkit-backdrop-filter:none;
}
:root[data-kontras="sepia"] .dekan-plat a{ color:#4A3F30; text-shadow:none; }
:root[data-kontras="tinggi"] .dekan-plat a,
:root[data-kontras="gelap"] .dekan-plat a{ text-shadow:none; }
/* -- Ruang tanya konselor -------------------------------------------------- */
.ruang-tanya{
background:#fff; border-radius:var(--bk-radius-lg);
box-shadow:var(--bk-bayang-lg); overflow:hidden;
border:1px solid var(--bk-garis);
}
.tanya-kepala{
background:var(--bk-gradasi); color:#fff;
padding:22px 26px; display:flex; align-items:center; gap:16px;
}
.tanya-kepala h3{ color:#fff; font-size:1.05rem; margin:0; }
.tanya-kepala p{ margin:0; font-size:.84rem; color:rgba(255,255,255,.85); }
.tanya-kepala .status{
margin-left:auto; display:inline-flex; align-items:center; gap:7px;
font-size:.8rem; background:rgba(255,255,255,.16);
padding:6px 13px; border-radius:999px;
}
.titik-aktif{
width:8px; height:8px; border-radius:50%; background:#4ADE80;
box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:denyut 2s infinite;
}
@keyframes denyut{
0%{ box-shadow:0 0 0 0 rgba(74,222,128,.7); }
70%{ box-shadow:0 0 0 9px rgba(74,222,128,0); }
100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}
.tanya-langkah{
display:flex; gap:8px; padding:18px 26px 0; flex-wrap:wrap;
}
.tanya-langkah .langkah{
display:flex; align-items:center; gap:9px;
font-size:.82rem; font-weight:700; color:var(--bk-teks-lembut);
padding:7px 14px; border-radius:999px; background:var(--bk-permukaan-2);
}
.tanya-langkah .langkah.aktif{ background:rgba(32,184,6,.12); color:var(--bk-primer); }
.tanya-langkah .langkah.selesai{ background:rgba(22,163,74,.12); color:#15803D; }
.tanya-langkah .nomor{
width:22px; height:22px; border-radius:50%; background:currentColor;
color:#fff; display:inline-flex; align-items:center; justify-content:center;
font-size:.72rem;
}
.tanya-langkah .langkah.aktif .nomor{ color:#fff; }
.tanya-percakapan{
padding:22px 26px; max-height:440px; overflow-y:auto;
background:var(--bk-permukaan-2);
display:flex; flex-direction:column; gap:16px;
scroll-behavior:smooth;
}
/* GELEMBUNG MENYESUAIKAN PANJANG PESANNYA
---------------------------------------------------------------------------
Sebelumnya gelembung selalu selebar 88% ruang percakapan, berapa pun isinya.
Sapaan tiga kata seperti "Selamat malam bapak ibu" mendapat kotak selebar
paragraf - terbaca seperti kotak kosong yang kebetulan ada tulisannya.
width:fit-content membuat lebarnya mengikuti isi, dan max-width menjaga
pesan panjang tetap punya batas. Dua-duanya perlu: yang satu tanpa yang
lain menghasilkan gelembung yang selalu melar atau selalu sempit.
min-width menjaga sisi sebaliknya - satu kata seperti "Baik" tidak boleh
menyusut menjadi sliver setipis tombol. */
.gelembung{
display:flex; gap:12px;
width:fit-content;
max-width:min(88%, 560px);
}
.gelembung .isi{
background:#fff; border-radius:16px 16px 16px 5px;
padding:11px 15px 9px; box-shadow:var(--bk-bayang-sm);
font-size:.94rem; line-height:1.55;
white-space:pre-wrap; word-break:break-word;
min-width:88px;
}
/* Nama dan waktu dirapatkan. Keduanya keterangan, bukan isi - pada pesan
pendek merekalah yang membuat gelembung terlihat tinggi tanpa alasan. */
.gelembung .nama{
font-size:.74rem; font-weight:700; color:var(--bk-hijau-baca);
margin-bottom:2px; line-height:1.3;
}
.gelembung .waktu{
font-size:.68rem; color:var(--bk-teks-lembut);
margin-top:3px; line-height:1.3;
}
.gelembung.pengguna{ margin-left:auto; flex-direction:row-reverse; }
.gelembung.pengguna .isi{
background:var(--bk-gradasi); color:#fff;
border-radius:16px 16px 5px 16px;
}
.gelembung.pengguna .nama,
.gelembung.pengguna .waktu{ color:rgba(255,255,255,.85); text-align:right; }
.gelembung.mendesak .isi{
background:#FEF2F2; border:2px solid #FCA5A5; color:#991B1B;
border-radius:16px;
}
.mengetik{ display:flex; gap:5px; padding:6px 2px; }
.mengetik span{
width:8px; height:8px; border-radius:50%; background:var(--bk-sekunder);
animation:melompat 1.3s infinite;
}
.mengetik span:nth-child(2){ animation-delay:.18s; }
.mengetik span:nth-child(3){ animation-delay:.36s; }
@keyframes melompat{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-6px); opacity:1; } }
.tanya-form{ padding:22px 26px; border-top:1px solid var(--bk-garis); }
.tanya-catatan{
background:var(--bk-permukaan-2); border-left:4px solid var(--bk-sekunder);
padding:13px 17px; border-radius:0 12px 12px 0;
font-size:.84rem; color:var(--bk-teks-lembut); margin-top:16px;
}
/* =========================================================================
SKRINING MANDIRI
========================================================================= */
/* Bilah kemajuan yang menempel di bawah navbar selama mengisi. */
.kemajuan-skrining{
position:sticky; top:82px; z-index:20;
background:rgba(255,255,255,.94);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border:1px solid var(--bk-garis); border-radius:14px;
padding:13px 18px; margin-bottom:20px;
box-shadow:var(--bk-bayang-sm);
}
.kemajuan-teks{
display:flex; justify-content:space-between; align-items:center;
gap:12px; font-size:.86rem; margin-bottom:9px; flex-wrap:wrap;
}
.kemajuan-alur{ height:8px; border-radius:999px; background:rgba(32,184,6,.12); overflow:hidden; }
.kemajuan-isi{
height:100%; width:0; border-radius:999px;
background:var(--bk-gradasi); transition:width .3s ease;
}
/* Satu pernyataan.
display:flow-root menampung legend yang di-float di bawah, sehingga tinggi
kartu tetap menghitung teks pertanyaannya. */
.butir-skrining{
background:#fff; border:1px solid var(--bk-garis);
border-radius:var(--bk-radius); padding:22px;
margin-bottom:14px; min-width:0;
display:flow-root;
transition:border-color .2s ease, box-shadow .2s ease;
}
.butir-skrining.terjawab{ border-color:rgba(22,163,74,.35); }
.butir-skrining.belum-diisi{
border-color:#DC2626;
box-shadow:0 0 0 4px rgba(220,38,38,.08);
}
/*