/* ========================================================================= PORTAL PUBLIK SILAYAN -- LANDING PAGE (mobile-first) ------------------------------------------------------------------------- Nilai DASAR untuk HP; @media (min-width) menaikkan untuk tablet/desktop. Warna dari silayan.css (dimuat lebih dulu). Kinerja animasi: hanya transform & opacity (komposit GPU, tanpa reflow), dipicu IntersectionObserver di site.js -- tidak ada kerja per-scroll. will-change tidak dipasang permanen karena memboroskan memori di HP. ========================================================================= */ :root{ --durasi-masuk:550ms; --jarak-masuk:18px; --tunda-tahap:70ms; --lengkung:cubic-bezier(.22,.61,.36,1); --tinggi-atas:68px; /* Tinggi SELURUH kepala halaman (bilah kontak + navbar). Default = tinggi navbar; dinaikkan oleh html[data-topbar] di bawah. Dipakai untuk benda yang diukur dari puncak halaman (kartu penyambutan, tab cari). Gulir jangkar JUSTRU memakai --tinggi-atas: bilah kontak tidak menempel, jadi saat jangkar dituju ia sudah tergulir keluar. */ --tinggi-kepala:var(--tinggi-atas); } @media (min-width:768px){ :root{ --durasi-masuk:750ms; --jarak-masuk:26px; --tunda-tahap:90ms; --tinggi-atas:76px; } } /* Bilah kontak tingginya 38px (lihat .topbar-isi). Penandanya atribut data, bukan kelas: skrip di menulis ulang className menjadi "js" sejak awal, sehingga kelas apa pun dari server langsung hilang. */ html[data-topbar]{ --tinggi-kepala:calc(var(--tinggi-atas) + 38px); } /* Pendaratan jangkar memakai tinggi NAVBAR, bukan --tinggi-kepala: bilah kontak tidak ikut menempel, jadi saat jangkar dituju ia sudah tergulir keluar. Dengan --tinggi-kepala setiap lompatan berhenti 48-50px terlalu tinggi dan pita itu diisi latar bagian sebelumnya (terukur: menu Legal memperlihatkan latar Tim Advokat). Bagian ber-id lalu mendarat 4px ke dalam tepinya sendiri -- menutup selisih 2px tinggi navbar di HP. */ html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--tinggi-atas) + 12px); } section.bagian[id]{ scroll-margin-top:-16px; } body{ font-size:15px; line-height:1.7; overflow-x:hidden; } @media (min-width:768px){ body{ font-size:16px; } } h1,h2,h3{ font-weight:800; letter-spacing:-.01em; color:var(--sl-teks); } a{ color:var(--sl-primer); } a:hover{ color:var(--sl-primer-gelap); } :focus-visible{ outline:3px solid var(--sl-aksen); outline-offset:2px; border-radius:6px; } img{ max-width:100%; } .lewati-ke-isi{ position:absolute; left:-9999px; } .lewati-ke-isi:focus{ left:16px; top:16px; z-index:2000; background:#fff; padding:8px 14px; border-radius:10px; } .sorot{ color:var(--sl-primer); } /* ========================================================================= ANIMASI MASUK ========================================================================= */ /* Scroll-reveal: tersembunyi HANYA bila JS berjalan (kelas .js di ), sehingga tanpa JS seluruh konten tetap terlihat. */ .js [data-muncul]{ opacity:0; transform:translate3d(0,var(--jarak-masuk),0); transition:opacity var(--durasi-masuk) var(--lengkung), transform var(--durasi-masuk) var(--lengkung); transition-delay:calc(var(--urutan, 0) * var(--tunda-tahap)); } .js [data-muncul].tampak{ opacity:1; transform:none; } /* Hero: masuk saat halaman dimuat, bertahap per elemen. */ @keyframes sl-masuk{ from{ opacity:0; transform:translate3d(0,var(--jarak-masuk),0); } to { opacity:1; transform:none; } } .js .hero-masuk{ opacity:0; animation:sl-masuk var(--durasi-masuk) var(--lengkung) forwards; animation-delay:calc(var(--tunda, 0) * 110ms + 80ms); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .js [data-muncul], .js .hero-masuk{ opacity:1; transform:none; transition:none; animation:none; } } /* ========================================================================= TOPBAR ========================================================================= */ .topbar{ /* Nada tema, bukan merah tetap: bilah atas adalah bidang aksen terbesar di halaman, jadi dialah yang paling terlihat bila tidak ikut berganti. */ background:var(--sl-grad-awal); color:var(--sl-primer-cerah); font-size:.78rem; } .topbar-isi{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; padding-top:4px; padding-bottom:4px; } .topbar-kontak{ display:flex; align-items:center; gap:16px; min-width:0; } .topbar-kontak a, .topbar-kontak span{ color:#fff; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; } .topbar-kontak i{ color:var(--sl-primer-cerah-2); } .topbar-kontak a:hover{ color:var(--sl-primer-cerah); } .topbar-sosial{ display:flex; gap:4px; flex:0 0 auto; } .topbar-sosial a{ width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:background .2s ease; } .topbar-sosial a:hover{ background:rgba(255,255,255,.14); color:#fff; } /* HP: ikon saja (telepon + email), supaya baris kiri muat berdampingan dengan tiga ikon sosial di kanan. Teks tampil mulai tablet; jam mulai desktop. Pilih .topbar-kontak .topbar-teks (2 kelas) agar mengalahkan aturan .topbar-kontak span (1 kelas + 1 elemen) yang menetapkan display. */ .topbar-kontak .topbar-teks{ display:none; } .topbar-jam{ display:none !important; } @media (min-width:768px){ .topbar-kontak .topbar-teks{ display:inline; } } /* Jam disembunyikan di layar kecil, KECUALI bila dialah satu-satunya isi bilah atas (telepon & email kosong) -- lihat $jamSelalu di public.php. Kalimatnya panjang dan boleh membungkus: white-space:nowrap warisan .topbar-kontak span membuat bilah atas meluber keluar layar di 320px. */ .topbar-kontak .topbar-jam-selalu{ display:inline-flex !important; white-space:normal; } @media (min-width:992px){ .topbar-jam{ display:inline-flex !important; } .topbar{ font-size:.82rem; } } /* ========================================================================= NAVBAR ========================================================================= */ .situs-atas{ position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.94); transition:box-shadow .25s ease; } /* Blur kaca hanya di layar lebar: di HP kelas bawah backdrop-filter pada elemen sticky adalah sumber utama patah-patah saat menggulir. */ @media (min-width:992px){ .situs-atas{ background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } } .situs-atas.bergulir{ box-shadow:0 8px 24px -16px rgba(var(--sl-bayang-lg-rgb),.35); } .situs-atas .navbar{ padding:10px 16px; min-height:var(--tinggi-atas); } .situs-merek{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; } .situs-merek img{ width:40px; height:40px; object-fit:contain; border-radius:12px; flex:0 0 auto; } .situs-merek span{ display:flex; flex-direction:column; line-height:1.15; min-width:0; } .situs-merek b{ color:var(--sl-teks); font-size:1rem; } .situs-merek small{ color:var(--sl-teks-lembut); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tombol-menu{ border:1px solid var(--sl-garis); border-radius:12px; width:44px; height:44px; font-size:1.4rem; color:var(--sl-teks); display:inline-flex; align-items:center; justify-content:center; } /* margin-left:auto menyerap ruang space-between navbar, jadi tombol cari menempel di kiri ikon menu, bukan melayang di tengah. */ .tombol-cari-nav{ margin-left:auto; margin-right:8px; background:transparent; font-size:1.15rem; } .navbar .nav-link{ font-weight:700; color:var(--sl-teks); padding:10px 14px !important; border-radius:10px; } .navbar .nav-link:hover, .navbar .nav-link.active{ color:var(--sl-primer); background:var(--sl-primer-lembut); } /* Menu offcanvas (HP & tablet) */ .offcanvas-lg .offcanvas-body{ display:flex; flex-direction:column; gap:14px; } .offcanvas-lg .navbar-nav .nav-link{ min-height:48px; display:flex; align-items:center; } .offcanvas-lg .aksi-akun{ display:flex; gap:8px; } .offcanvas-lg .aksi-akun .btn-sl{ flex:1; } @media (min-width:992px){ .situs-merek img{ width:44px; height:44px; } .situs-merek b{ font-size:1.05rem; } /* Menu rata kanan: wadah offcanvas mengisi sisa lebar navbar. */ .offcanvas-lg .offcanvas-body{ flex-direction:row; align-items:center; justify-content:flex-end; gap:6px; } .offcanvas-lg .navbar-nav{ margin-right:12px; } .offcanvas-lg .aksi-akun .btn-sl{ flex:0 0 auto; } } /* ========================================================================= HERO ========================================================================= */ .hero{ padding:28px 0 36px; position:relative; } .hero-lencana{ display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--sl-primer); font-weight:700; font-size:.78rem; padding:6px 12px; border-radius:999px; box-shadow:var(--sl-bayang-sm); margin-bottom:14px; } .hero h1{ font-size:clamp(1.85rem,8vw,3.3rem); line-height:1.12; margin-bottom:12px; } /* Judul bergantian: keluar ke atas, masuk dari bawah. Hanya transform & opacity supaya halus di HP. */ .judul-putar{ display:grid; } .judul-item{ grid-area:1 / 1; opacity:0; transform:translate3d(0,.35em,0); transition:opacity .6s var(--lengkung), transform .6s var(--lengkung); pointer-events:none; } .judul-item.aktif{ opacity:1; transform:none; pointer-events:auto; } .judul-item.keluar{ opacity:0; transform:translate3d(0,-.35em,0); } @media (prefers-reduced-motion: reduce){ .judul-item{ transition:none; } } .hero-sub{ font-size:.98rem; color:var(--sl-teks-lembut); max-width:560px; margin-bottom:20px; } .hero-aksi{ display:flex; gap:10px; flex-wrap:wrap; } /* Di HP tombol melebar penuh: dua tombol berdampingan di lebar 375px menyisakan ~166px, dan label seperti "Ajukan Layanan" pecah dua baris. */ .hero-aksi .btn-sl{ flex:1 1 100%; } @media (min-width:576px){ .hero-aksi .btn-sl{ flex:0 0 auto; } } @media (min-width:992px){ .hero{ padding:clamp(56px,7vw,96px) 0 clamp(48px,5vw,72px); } .hero-lencana{ font-size:.82rem; padding:7px 14px; margin-bottom:18px; } .hero-sub{ font-size:1.08rem; margin-bottom:26px; } } /* -- Slider hero ---------------------------------------------------------- Slide panel berada di alur normal dan MENENTUKAN tinggi bingkai; slide advokat ditumpuk absolut di atasnya dengan tinggi 100%. Hasilnya gambar selalu setinggi panel, dan tata letak tidak pernah melompat saat slide berganti atau saat admin belum mengunggah gambar apa pun. */ .hero-slider{ position:relative; } .slider-bingkai{ position:relative; } .slide{ transition:opacity .9s var(--lengkung), visibility .9s; opacity:0; visibility:hidden; } .slide.aktif{ opacity:1; visibility:visible; } .slide-panel{ position:relative; } /* Kartu profil advokat: kotak hitam, ubin potret menjorok keluar dari tepi kirinya, jalur status tembus pandang di tepi kanannya. Ukuran diatur lewat --potret (lebar ubin); --jorok diturunkan darinya. Warna lewat --ubin-*. */ .slide-advokat{ --potret:118px; /* Ubin menjorok 30% lebarnya keluar dari kotak hitam (70% di dalam). Diturunkan dari --potret, bukan ditulis sendiri, supaya perbandingannya tetap 30:70 di breakpoint mana pun. Sempat 50%; terlalu banyak ubin yang melayang di luar kotak. */ --jorok:calc(var(--potret) * .3); /* Jalur status tembus pandang di tepi kanan kotak hitam (seperti .tim-nama pada kartu tim). */ --bar:42px; --status-huruf:.76rem; /* Nada A (advokat ganjil): merah terang, gradasi radial tiga titik yang sama seperti sebelumnya, hanya lebih cerah. Nada B (.nada-b, advokat genap) oranye -- berselang-seling persis seperti kartu tim. Ubin, jalur status, dan cincin tombol pertama semuanya membaca peubah ini, jadi ketiganya selalu berganti bersama. */ --ubin-terang:#FF6B57; --ubin-tengah:#E53935; --ubin-gelap:#B3261E; --ubin-rgb:229,57,53; position:absolute; inset:0; margin:0; /* Slide ini TIDAK punya latar sendiri: yang terlihat hanya kotak hitam dan ubin potret. overflow dibiarkan terlihat supaya bayangan tipis di bawah ubin tidak terpotong -- dan ubinnya tetap berada di dalam kotak slide karena kotak hitam sudah digeser sejauh --jorok. */ background:none; box-shadow:none; overflow:visible; display:flex; align-items:center; padding:0; } .slide-advokat.nada-b{ --ubin-terang:#FFB74D; --ubin-tengah:#FF9800; --ubin-gelap:#F57C00; --ubin-rgb:255,152,0; } /* Tanpa status: jalurnya tidak dirender, jadi ruangnya ikut dilepas. Dua kelas, sehingga menang atas --bar yang diatur ulang di tiap breakpoint. */ .slide-advokat.tanpa-status{ --bar:0px; } /* Kotak advokat, hitam. TIDAK boleh overflow:hidden -- potret sengaja menjorok keluar dari tepi kirinya. */ .slide-kartu{ position:relative; flex:1 1 auto; min-width:0; align-self:stretch; margin-left:var(--jorok); background:#161616; border-radius:20px; display:flex; align-items:center; /* Sisi kanan dikosongkan selebar jalur status + jarak baca. */ padding:12px calc(var(--bar) + 12px) 12px 0; box-shadow:0 20px 38px -24px rgba(15,23,42,.6); } /* Jalur status: tembus pandang, bertulisan tegak, menempel di tepi kanan kotak hitam. Di atas latar hitam, bayangan gelap seperti .tim-nama tidak akan terlihat, jadi yang dipakai nada ubin itu sendiri dengan alfa rendah: jalur ini ikut merah atau oranye bersama ubinnya. */ /* Jalurnya sendiri TIDAK diputar -- hanya teks di dalamnya. Memutar jalur (seperti .tim-nama) ikut membalik border-radius-nya: lengkungan kanan-atas dan kanan-bawah pindah ke sisi kiri, sehingga sudut kanan jalur menjadi siku dan mencuat keluar dari lengkungan kotak hitam. */ .slide-status{ position:absolute; top:0; right:0; bottom:0; width:var(--bar); display:flex; align-items:center; justify-content:center; border-radius:0 20px 20px 0; /* = lengkungan kanan .slide-kartu */ background:linear-gradient(180deg, rgba(var(--ubin-rgb),.40) 0%, rgba(var(--ubin-rgb),.10) 100%); overflow:hidden; padding:16px 0; pointer-events:none; } .slide-status span{ writing-mode:vertical-rl; transform:rotate(180deg); max-height:100%; color:#fff; font-size:var(--status-huruf,.74rem); font-weight:800; letter-spacing:.1em; text-transform:uppercase; line-height:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .slide-potret{ position:absolute; top:50%; left:calc(-1 * var(--jorok)); transform:translateY(-50%); width:var(--potret); aspect-ratio:3/4; border-radius:16px; overflow:hidden; /* Sorot bundar di belakang potret. Nadanya dari peubah --ubin-* pada .slide-advokat: merah untuk advokat ganjil, oranye untuk yang genap. */ background:radial-gradient(circle at 50% 40%, var(--ubin-terang) 0%, var(--ubin-tengah) 44%, var(--ubin-gelap) 100%); /* Bayangan tipis JATUH KE BAWAH saja: separuh ubin melayang di luar kotak hitam, jadi yang perlu terbaca adalah ia berdiri di depan, bukan cincin gelap mengelilinginya. */ box-shadow:0 12px 20px -12px rgba(15,23,42,.45); } .slide-potret img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 12%; /* PNG hasil hapus latar sering membawa pola kotak-kotak "transparan palsu" yang tercetak jadi piksel nyata di bagian bawah. Pudaran ini menutupnya ke sorot ubin, bukan membiarkannya tampil sebagai kotak-kotak. */ -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 97%); mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 97%); } .slide-isi{ flex:1 1 auto; min-width:0; /* Lebar potret dikurangi bagian yang menjorok keluar kotak, ditambah jarak baca. Dihitung dari peubah yang sama, jadi tidak mungkin melenceng saat ukurannya ditukar di breakpoint lain. */ margin-left:calc(var(--potret) - var(--jorok) + 14px); display:flex; flex-direction:column; color:#fff; } .slide-nama{ font-size:.98rem; font-weight:800; line-height:1.22; letter-spacing:-.01em; color:#fff; } .slide-desk{ margin:8px 0 0; font-size:.76rem; line-height:1.5; color:#9a9a9a; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .slide-sosial{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .slide-bulat{ width:32px; height:32px; border-radius:999px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:#2b2b2b; color:#fff; font-size:.88rem; text-decoration:none; transition:background .2s ease, transform .2s var(--lengkung); } @media (hover:hover){ .slide-bulat:hover{ background:#3a3a3a; color:#fff; transform:translateY(-2px); } } /* Cincin bergradasi pada tombol pertama, seperti acuan. border-color tidak bisa menerima linear-gradient, jadi cincinnya digambar sebagai latar border-box di belakang isian padding-box yang gelap. */ .slide-bulat-sorot{ border:2px solid transparent; background: linear-gradient(#242424,#242424) padding-box, linear-gradient(135deg,var(--ubin-terang),var(--ubin-gelap)) border-box; } @media (hover:hover){ .slide-bulat-sorot:hover{ background: linear-gradient(#333,#333) padding-box, linear-gradient(135deg,var(--ubin-terang),var(--ubin-tengah)) border-box; } } .slider-titik{ display:flex; justify-content:center; gap:4px; margin-top:12px; } .slider-titik button{ width:28px; height:28px; border:none; background:transparent; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .slider-titik button::before{ content:''; width:8px; height:8px; border-radius:999px; background:var(--sl-primer-cerah); transition:width .3s var(--lengkung), background .3s ease; } .slider-titik button[aria-current="true"]::before{ width:22px; background:var(--sl-primer); } .hero-panel{ background:rgba(255,255,255,.86); border-radius:var(--slf-radius-lg); padding:14px; /* Sama seperti .slide-advokat: bayang neumorphism putih di kiri-atas diganti bayang gelap ke bawah, tanpa kabut putih di top dan kiri. */ box-shadow:0 16px 34px -20px rgba(var(--sl-bayang-lg-rgb),.5), 0 3px 10px -6px rgba(15,23,42,.16); display:grid; gap:10px; } .hero-butir{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--slf-radius-md); padding:9px 11px; font-weight:700; font-size:.88rem; box-shadow:var(--sl-bayang-sm); text-decoration:none; color:var(--sl-teks); transition:transform .2s var(--lengkung), box-shadow .2s ease; } @media (hover:hover){ .hero-butir:hover{ color:var(--sl-primer); transform:translateX(3px); box-shadow:var(--sl-bayang); } } .hero-panel-kaki{ margin:2px 0 0; text-align:center; font-size:.8rem; color:var(--sl-teks-lembut); } /* Di HP kotaknya terlalu sempit untuk potret di samping teks: ubin naik ke ATAS kotak hitam, 30% menggantung keluar dari tepi atasnya (sama seperti 30% ke kiri di layar lebar), dan teksnya turun ke bawahnya. Perkenalan dilepas supaya nama dan tombol kontak muat tanpa kartu perlu digulir. Ubin berasio 3:4, jadi tingginya = lebar x 4/3: bagian di luar = 30% x 4/3 = lebar x 0,4 -> padding atas slide bagian di dalam = 70% x 4/3 = lebar x 14/15 -> jarak atas teks */ @media (max-width:575.98px){ .slide-advokat{ --potret:110px; --bar:38px; --status-huruf:.66rem; padding-top:calc(var(--potret) * .4); } /* Kotak di HP lebih pendek: jarak antarhuruf dirapatkan supaya status sepanjang "Advokat Pendamping Klinik Hukum" muat utuh, tidak terpotong. */ .slide-status{ padding:10px 0; } .slide-status span{ letter-spacing:.04em; } .slide-kartu{ margin-left:0; flex-direction:column; justify-content:center; align-items:center; text-align:center; /* Kiri disamakan dengan jalur status di kanan supaya teks yang rata tengah benar-benar berada di tengah kotak. */ padding:0 calc(var(--bar) + 10px) 14px; } .slide-potret{ left:50%; top:0; transform:translate(-50%,-30%); } .slide-isi{ margin-left:0; margin-top:calc(var(--potret) * 14 / 15 + 12px); align-items:center; width:100%; } .slide-desk{ display:none; } /* Enam tombol tidak muat satu baris di kotak selebar ini. Lebarnya dikunci tepat tiga tombol (3 x 32px + 2 x 8px) supaya pembungkusannya jadi 3 + 3 yang rapi, bukan 5 + 1 yang terlihat seperti sisa. */ .slide-sosial{ max-width:112px; justify-content:center; } } @media (min-width:576px){ .slide-advokat{ --potret:150px; } .slide-nama{ font-size:1.06rem; } } @media (min-width:992px){ .hero-panel{ padding:22px; gap:12px; } .hero-butir{ padding:10px 12px; font-size:.92rem; } .slide-advokat{ --potret:190px; --bar:54px; --status-huruf:.88rem; } .slide-kartu{ border-radius:22px; padding:18px calc(var(--bar) + 16px) 18px 0; } .slide-status{ border-radius:0 22px 22px 0; } .slide-potret{ border-radius:18px; } .slide-isi{ margin-left:calc(var(--potret) - var(--jorok) + 20px); } .slide-nama{ font-size:1.22rem; } .slide-desk{ margin-top:10px; font-size:.8rem; } .slide-sosial{ margin-top:16px; } .slide-bulat{ width:34px; height:34px; font-size:.94rem; } } /* Kotak hitam dipanjangkan ke KIRI, melewati tepi kolomnya, memakai ruang kosong di sebelah kanan teks hero. Hanya mulai 1200px: di bawah itu kolom teks masih rapat dan kartunya akan menabraknya. Yang digeser cuma slide advokat -- slide panel layanan tetap di dalam kolomnya. SATU angka mengatur dua hal: seberapa jauh kartunya menjorok ke kiri, DAN seberapa besar ruang yang dikosongkan di kanan teks hero. Keduanya harus selalu cocok -- judul hero yang panjang pernah tercetak tepat di bawah ubin potret karena geseran kartu ditulis sendiri tanpa ada yang menyisakan tempatnya. */ .hero{ --slide-geser:0px; } .slide-advokat{ left:calc(-1 * var(--slide-geser)); } @media (min-width:992px){ .hero .hero-teks{ padding-right:calc(var(--slide-geser) + 32px); } } /* 992-1199px adalah ruang tersempit: kolomnya sudah terbagi dua tetapi kartunya belum boleh digeser keluar. Ubin dikecilkan di sini saja supaya nama dan perkenalan tidak tercetak tiga-empat kata per baris. */ @media (min-width:992px) and (max-width:1199.98px){ .slide-advokat{ --potret:126px; --bar:46px; --status-huruf:.78rem; } } @media (min-width:1200px){ .hero{ --slide-geser:70px; } } @media (min-width:1400px){ .hero{ --slide-geser:110px; } } /* ========================================================================= ANGKA CAPAIAN (kartu ringkas: 2 per baris di HP) ========================================================================= */ .bagian-angka{ padding:4px 0 28px; } .kartu-angka-publik{ background:#fff; border-radius:var(--slf-radius-md); padding:14px; height:100%; box-shadow:var(--sl-bayang); display:flex; flex-direction:column; gap:4px; } .kartu-angka-publik b{ font-size:1.45rem; line-height:1.1; color:var(--sl-primer); margin-top:6px; font-variant-numeric:tabular-nums; } .kartu-angka-publik small{ font-size:.76rem; color:var(--sl-teks-lembut); line-height:1.35; } @media (min-width:768px){ .bagian-angka{ padding:8px 0 40px; } .kartu-angka-publik{ padding:20px; border-radius:var(--slf-radius-lg); } .kartu-angka-publik b{ font-size:2rem; } .kartu-angka-publik small{ font-size:.86rem; } } /* ========================================================================= BAGIAN UMUM ========================================================================= */ .bagian{ padding:40px 0; } .bagian-putih{ background:rgba(255,255,255,.7); } .bagian-kepala{ text-align:center; max-width:640px; margin:0 auto 22px; } .bagian-label{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sl-primer); margin-bottom:6px; } .bagian-kepala h1, .bagian-kepala h2{ font-size:clamp(1.4rem,6vw,2.1rem); margin-bottom:6px; } .bagian-kepala p{ color:var(--sl-teks-lembut); margin:0; font-size:.94rem; } @media (min-width:992px){ .bagian{ padding:clamp(56px,6vw,84px) 0; } .bagian-kepala{ margin-bottom:34px; } .bagian-kepala p{ font-size:1rem; } } /* Kartu layanan: deskripsi berupa kalimat utuh, jadi 1 kolom penuh di HP dengan ikon di kiri (padat & tetap terbaca), lalu tegak di layar lebar. */ /* Seluruh kartu adalah tautan ke halaman layanannya, jadi target sentuhnya sebesar kartu -- bukan hanya tulisan "Selengkapnya". */ .kartu-layanan{ background:#fff; border-radius:var(--slf-radius-md); padding:16px; height:100%; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--sl-bayang); transition:transform .3s var(--lengkung), box-shadow .3s ease; text-decoration:none; color:var(--sl-teks); } .kartu-layanan:hover{ color:var(--sl-teks); } .kartu-tautan{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:.84rem; font-weight:700; color:var(--sl-primer); } .kartu-tautan i{ transition:transform .3s var(--lengkung); } @media (hover:hover){ .kartu-layanan:hover .kartu-tautan i{ transform:translateX(4px); } } .kartu-layanan .ios-icon{ flex:0 0 auto; } .kartu-layanan h3{ font-size:1rem; margin:2px 0 4px; } .kartu-layanan p{ margin:0; color:var(--sl-teks-lembut); font-size:.86rem; line-height:1.55; } @media (min-width:768px){ .kartu-layanan{ flex-direction:column; gap:0; padding:24px 22px; border-radius:var(--slf-radius-lg); } .kartu-layanan h3{ font-size:1.06rem; margin:16px 0 8px; } .kartu-layanan p{ font-size:.93rem; } } @media (hover:hover){ .kartu-layanan:hover{ transform:translateY(-4px); box-shadow:var(--sl-bayang-lg); } } /* Alur: kartu ringkas, 2 per baris di HP */ .daftar-alur{ list-style:none; padding:0; margin-bottom:0; } .kartu-alur{ position:relative; height:100%; background:#fff; border-radius:var(--slf-radius-md); padding:14px; box-shadow:var(--sl-bayang); } /* Ikon langkah: ubin merah DATAR -- tanpa gradasi, tanpa kilau ::after, tanpa bayangan glow. Warnanya --sl-primer, jadi tetap ikut pilihan tema warna. */ .kartu-alur .ios-icon{ background:var(--sl-primer); box-shadow:none; } .kartu-alur .ios-icon::after{ display:none; } /* Nomor langkah kecil di pojok kanan atas, teks bergradasi merah. Warna isi dipasang lebih dulu sebagai cadangan: tanpa dukungan background-clip:text, color:transparent membuat angkanya hilang sama sekali. */ .alur-nomor{ position:absolute; top:10px; right:12px; font-size:1rem; font-weight:800; line-height:1; color:var(--sl-primer); } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .alur-nomor{ background:linear-gradient(135deg,var(--sl-grad-awal) 0%,var(--sl-primer) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } } .kartu-alur h3{ font-size:.95rem; margin:10px 0 3px; } .kartu-alur p{ margin:0; font-size:.8rem; color:var(--sl-teks-lembut); line-height:1.45; } @media (min-width:768px){ .kartu-alur{ padding:22px; border-radius:var(--slf-radius-lg); } .alur-nomor{ font-size:1.2rem; top:14px; right:16px; } .kartu-alur h3{ font-size:1.05rem; margin-top:14px; } .kartu-alur p{ font-size:.9rem; } } .tentang-teks{ color:var(--sl-teks-lembut); } .tentang-poin{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .tentang-poin li{ display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:var(--slf-radius-md); padding:12px 14px; box-shadow:var(--sl-bayang-sm); font-weight:600; font-size:.92rem; } .tentang-poin i{ color:var(--sl-primer); margin-top:3px; } /* SDGs: ubin ringkas, 2 per baris di HP */ .sdgs-baris{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } @media (min-width:576px){ .sdgs-baris{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:992px){ .sdgs-baris{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; } } .sdg-ubin{ background:var(--sdg); color:#fff; border-radius:var(--slf-radius-md); padding:12px; min-height:96px; display:flex; flex-direction:column; gap:6px; } .sdg-ubin b{ font-size:1.5rem; line-height:1; } .sdg-ubin span{ font-size:.76rem; font-weight:700; line-height:1.3; } /* Ajakan */ .kartu-ajakan{ position:relative; overflow:hidden; background:var(--sl-gradasi); color:#fff; border-radius:var(--slf-radius-lg); padding:24px 20px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--sl-bayang-lg); } .kartu-ajakan h2{ color:#fff; font-size:clamp(1.25rem,5vw,1.8rem); margin-bottom:6px; } .kartu-ajakan p{ margin:0; opacity:.92; } .btn-sl-putih{ background:#fff; color:var(--sl-primer); } .btn-sl-putih:hover{ background:var(--sl-primer-lembut); color:var(--sl-primer-gelap); } /* Pasangan tombol kedua di atas bidang gradasi. .btn-sl-garis biasa bergaris merah, jadi di atas latar merah garisnya hilang; yang ini bergaris putih. */ .btn-sl-garis-putih{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7); } .btn-sl-garis-putih:hover{ background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1.5px #fff; } @media (min-width:768px){ .kartu-ajakan{ flex-direction:row; justify-content:space-between; align-items:center; padding:40px; } .kartu-ajakan::after{ content:''; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.1); pointer-events:none; } } /* Kartu kontak dipakai dalam versi rata tengah. Tanpa align-items:center, butir flex hanya selebar isinya sehingga text-center tidak terlihat berpengaruh dan judulnya tetap menempel ke kiri. */ .kartu-layanan.text-center{ align-items:center; } /* Nomor telepon dan alamat surel di halaman kontak tampil sebagai data, bukan tautan bergaris bawah. Sifat klik-nya sudah jelas dari ubin ikon dan kursor; garis bawah membuat deretan kartu terlihat ramai. */ .kontak-nilai a{ color:var(--sl-primer); font-weight:700; text-decoration:none; overflow-wrap:anywhere; } .kontak-nilai a:hover, .kontak-nilai a:focus-visible{ color:var(--sl-primer-gelap); text-decoration:none; } .peta{ border-radius:var(--slf-radius-lg); overflow:hidden; box-shadow:var(--sl-bayang); } .peta iframe{ width:100%; height:300px; border:0; display:block; } @media (min-width:768px){ .peta iframe{ height:360px; } } /* ========================================================================= TIM ADVOKAT ------------------------------------------------------------------------- Kartu potret bergradasi dua nada berselang-seling, nama ditulis tegak di tepi kanan, tombol jabatan di bawah kartu, dan kartu genap diturunkan sedikit sehingga deretnya berirama. Jalurnya digeser dengan overflow-x + scroll-snap bawaan peramban, jadi sapuan jari di HP bekerja tanpa JavaScript; panah hanya menambah cara lain. ========================================================================= */ /* Wadah: sudut besar, gradasi merah muda pucat ke putih krem hangat, dengan tekstur garis tipis tone-on-tone. Nilai dari deskripsi-tim-advokat.md. */ .bagian-tim{ border-radius:28px; /* Garis miring tipis sebagai tekstur, bukan gambar: tidak menambah unduhan. */ background: repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1px, transparent 1px 26px), linear-gradient(135deg, #FBEAEA 0%, #FDF0F0 42%, #FFF9F2 100%); box-shadow:0 18px 44px -26px rgba(142,38,32,.35); /* Panah sengaja menyembul separuh keluar tepi wadah (efek mengambang), jadi wadahnya TIDAK boleh memotong luapan. */ overflow:visible; } /* Jumlah kartu yang terlihat sekaligus. Pecahan disengaja: sisa kartu yang terintip memberi tahu bahwa deretnya masih bisa digeser. */ .tim-jalur{ --tampak:2.15; --sela:12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .tim-geser{ order:1; flex:1 1 100%; display:flex; gap:var(--sela); list-style:none; margin:0; padding:6px 0 10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; } .tim-geser::-webkit-scrollbar{ display:none; } .tim-geser:focus-visible{ outline:3px solid var(--sl-aksen); outline-offset:4px; border-radius:12px; } .tim-item{ flex:0 0 calc((100% - (var(--tampak) - 1) * var(--sela)) / var(--tampak)); scroll-snap-align:start; display:flex; flex-direction:column; align-items:stretch; /* Nada A (kartu ganjil): merah. Nilai dari deskripsi-tim-advokat.md. */ --tim-atas:#C0392B; --tim-bawah:#8E2620; --tim-tombol:#C0392B; } /* Nada B (kartu genap): oranye, berselang-seling. Kartu genap juga diturunkan sehingga deretnya berirama naik-turun (zigzag), bukan rata satu garis. */ .tim-item:nth-child(even){ --tim-atas:#FF9800; --tim-bawah:#F57C00; --tim-tombol:#F57C00; margin-top:26px; } .tim-kartu{ position:relative; display:block; overflow:hidden; /* Rasio 3:5 sesuai deskripsi-tim-advokat.md. */ aspect-ratio:3 / 5; border-radius:22px; /* Gradasi tegak dua warna, terang di atas ke gelap di bawah. Potret advokat berlatar tembus pandang berdiri di atasnya, jadi kartunya sendiri tidak perlu bidang terang di tengah. (Bagian atas tembus pandang sempat dicoba dan ditolak: kartu kehilangan bentuknya dan nama putih di bar tegak tidak terbaca di atas latar pucat.) */ background:linear-gradient(180deg, var(--tim-atas) 0%, var(--tim-bawah) 100%); box-shadow:var(--sl-bayang); text-decoration:none; transition:transform .3s var(--lengkung), box-shadow .3s ease; } @media (hover:hover){ .tim-kartu:hover{ transform:translateY(-5px); box-shadow:var(--sl-bayang-lg); } } /* Foto memenuhi tinggi kartu dan berdiri di dasarnya, seperti potret berdiri. Dasarnya dipudarkan ke warna kartu: selain menyatu lebih rapi dengan tombol jabatan, ini menutup pola kotak-kotak "transparan palsu" yang kerap tercetak di bagian bawah PNG hasil hapus latar. */ .tim-kartu img{ /* Digeser separuh lebar bar nama supaya potretnya tetap di tengah bidang yang tersisa, tidak tertutup bar di tepi kanan. */ position:absolute; bottom:0; left:calc(50% - (var(--tim-bar,32px) / 2)); transform:translateX(-50%); height:94%; width:auto; max-width:none; object-fit:contain; object-position:bottom; /* Tuntas pudar pada 82% tinggi foto: pola kotak-kotak pada PNG bermasalah umumnya mulai sekitar 85%, jadi sudah hilang sebelum sempat terlihat. Pada PNG yang benar-benar transparan, ini terbaca sebagai potret yang menyatu ke dasar kartu. */ -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 82%); mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 82%); } .tim-inisial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(2rem,7vw,3.4rem); font-weight:800; color:rgba(255,255,255,.72); letter-spacing:.04em; } /* Bar gradien di tepi kanan berisi nama, dibaca dari bawah ke atas (writing-mode tegak + rotate 180deg). Nama panjang dipotong elipsis, bukan terpenggal di tengah huruf. */ .tim-nama{ position:absolute; top:0; right:0; bottom:0; width:var(--tim-bar,32px); display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg); background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.06) 100%); color:#fff; font-weight:800; line-height:1; font-size:clamp(.9rem,3.2vw,1.3rem); letter-spacing:.02em; pointer-events:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* Tombol jabatan BERJARAK dari kartu, bukan menumpuk di atasnya: alur dokumen biasa dengan margin-top positif, sesuai deskripsi-tim-advokat.md. Lebarnya lebih kecil dari kartu dan rata tengah, dengan bayangan tipis supaya terbaca mengambang terpisah. */ .tim-jabatan{ display:block; margin:14px auto 0; width:86%; padding:7px 12px; background:var(--tim-tombol); color:#fff; border-radius:999px; box-shadow:0 6px 14px -6px rgba(0,0,0,.35); font-size:.74rem; font-weight:700; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Panah: di bawah jalur dan di tengah saat layar sempit, agar tidak menutupi kartu dan tetap berada dalam jangkauan ibu jari. */ .tim-panah{ width:46px; height:46px; flex:0 0 auto; border:none; border-radius:50%; cursor:pointer; /* Coral/peach, sengaja berbeda dari merah & oranye kartu supaya panahnya tetap menonjol sebagai kendali, bukan bagian dari deret kartu. */ background:linear-gradient(135deg,#FF8A65,#FFAB91); color:#fff; font-size:1.05rem; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(191,74,38,.55); transition:transform .2s var(--lengkung), opacity .2s ease; } .tim-panah:hover{ transform:scale(1.07); } .tim-panah:disabled{ opacity:.35; cursor:default; transform:none; } /* Semua kartu sudah muat: panah disembunyikan, bukan sekadar dimatikan. */ .tim-jalur.tim-tanpa-panah .tim-panah{ display:none; } .tim-panah-kiri{ order:2; margin-left:auto; } .tim-panah-kanan{ order:3; margin-right:auto; } .tim-kaki{ margin-top:14px; } .tim-judul{ font-size:clamp(2.1rem,9vw,4.2rem); line-height:1.04; margin:0; letter-spacing:-.02em; background:linear-gradient(90deg,#C0392B 0%,#F57C00 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .tim-teks{ margin:0; font-style:italic; color:#6B6B6B; font-size:.92rem; max-width:500px; } @media (min-width:576px){ .tim-jalur{ --tampak:2.6; --sela:14px; } } @media (min-width:768px){ .tim-jalur{ --tampak:3.2; --sela:16px; } .tim-item{ --tim-bar:40px; } .tim-item:nth-child(even){ margin-top:38px; } .tim-jabatan{ font-size:.82rem; padding:9px 16px; } .tim-teks{ font-size:1rem; } } @media (min-width:992px){ /* Layar lebar: panah kembali ke sisi kiri dan kanan jalur. */ .tim-jalur{ --tampak:4; display:block; position:relative; padding:0 58px; } .tim-geser{ padding:8px 0 12px; } .tim-panah{ position:absolute; top:42%; transform:translateY(-50%); } .tim-panah:hover{ transform:translateY(-50%) scale(1.07); } .tim-panah-kiri{ left:0; margin:0; } .tim-panah-kanan{ right:0; margin:0; } .tim-kartu{ border-radius:26px; } .tim-kaki{ margin-top:26px; } } @media (prefers-reduced-motion: reduce){ .tim-kartu,.tim-panah{ transition:none; } .tim-geser{ scroll-behavior:auto; } } /* ========================================================================= MITRA KERJA SAMA -- jalur logo berjalan ------------------------------------------------------------------------- Dua deret identik digeser -50%: begitu salinan pertama habis, salinan kedua sudah persis di posisi awal, sehingga putarannya tidak terlihat menyambung. Durasi mengikuti jumlah logo (--jumlah) supaya kecepatannya tetap sama entah mitranya 3 atau 30. ========================================================================= */ .bagian-mitra{ overflow:hidden; } .mitra-jalur{ position:relative; /* Tepi kiri-kanan memudar supaya logo tidak terpotong mendadak. */ -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); } .mitra-lajur{ display:flex; width:max-content; animation:mitra-jalan calc(var(--jumlah, 6) * 3.2s) linear infinite; } .mitra-jalur:hover .mitra-lajur, .mitra-jalur:focus-within .mitra-lajur{ animation-play-state:paused; } @keyframes mitra-jalan{ to{ transform:translate3d(-50%,0,0); } } /* Logo sedikit: diam, di tengah, tanpa tepi pudar yang akan memotongnya. */ .mitra-jalur.mitra-diam{ -webkit-mask-image:none; mask-image:none; } .mitra-jalur.mitra-diam .mitra-lajur{ animation:none; width:100%; justify-content:center; } .mitra-jalur.mitra-diam .mitra-deret{ flex-wrap:wrap; justify-content:center; } .mitra-deret{ display:flex; align-items:center; gap:12px; list-style:none; margin:0; padding:0 6px; } .mitra-deret li{ flex:0 0 auto; } .mitra-deret a, .mitra-deret span{ display:flex; align-items:center; justify-content:center; width:132px; height:76px; padding:12px; background:#fff; border-radius:var(--slf-radius-md); box-shadow:var(--sl-bayang-sm); } .mitra-deret img{ max-width:100%; max-height:100%; object-fit:contain; /* Logo mitra datang dengan warna yang berbeda-beda. Abu-abu saat diam menyatukan deretnya; warna aslinya kembali saat disentuh atau difokus. */ filter:grayscale(1); opacity:.7; transition:filter .3s ease, opacity .3s ease; } .mitra-deret a:hover img, .mitra-deret a:focus-visible img{ filter:none; opacity:1; } @media (min-width:768px){ .mitra-deret{ gap:16px; padding:0 8px; } .mitra-deret a, .mitra-deret span{ width:168px; height:92px; padding:16px; } } @media (prefers-reduced-motion: reduce){ .mitra-lajur{ animation:none; } /* Tanpa animasi, deret kedua hanya pengulangan: sembunyikan dan biarkan deret pertama dapat digeser sendiri oleh pengguna. */ .mitra-deret[aria-hidden="true"]{ display:none; } .mitra-jalur{ overflow-x:auto; -webkit-overflow-scrolling:touch; } } /* ========================================================================= TOMBOL AJUKAN KMITRAAN + MODAL BIDANG ------------------------------------------------------------------------- Badge merah tepat di bawah jalur logo. Di desktop modal terbuka saat kursor melayang di atasnya; di HP modal terbuka saat disentuh, lalu tombol di dalam modal yang berpindah halaman. Karena itu keduanya tidak boleh bergantung pada :hover semata. ========================================================================= */ .mitra-ajukan{ display:flex; justify-content:center; margin-top:24px; } /* z-index sengaja TIDAK dinaikkan di atas tirai (1072): tombol harus tetap di tempatnya dan ikut tertutup saat modal terbuka. Penutupan karena kursor menjauh dilacak lewat koordinat di site.js, bukan lewat pointerleave pada tombol, jadi tombol tidak perlu berada di atas tirai agar alurnya bekerja. */ .mitra-tombol{ position:relative; z-index:1; overflow:hidden; display:inline-flex; align-items:center; gap:9px; padding:12px 24px; min-height:46px; border:none; border-radius:999px; background:linear-gradient(135deg,var(--sl-grad-awal) 0%,var(--sl-primer) 58%,var(--sl-aksen) 100%); color:#fff; font-weight:800; font-size:.95rem; box-shadow:0 14px 26px -14px rgba(var(--sl-bayang-lg-rgb),.75); cursor:pointer; transition:transform .25s var(--lengkung), box-shadow .25s ease; } /* Sapuan cahaya melintas dari kiri ke kanan: penanda hal ini bisa diklik, dipakai sebagai "efek keren" tanpa menambah warna di luar palet. */ .mitra-tombol::after{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); transition:left .6s var(--lengkung); } .mitra-tombol:hover, .mitra-tombol:focus-visible{ transform:translateY(-3px); box-shadow:0 20px 32px -16px rgba(var(--sl-bayang-lg-rgb),.85); } .mitra-tombol:hover::after, .mitra-tombol:focus-visible::after{ left:130%; } .mitra-tombol:active{ transform:translateY(-1px) scale(.985); } /* -- Tirai --------------------------------------------------------------- */ /* Menangkap klik (pointer-events tetap aktif) supaya klik "menutup" tidak jatuh ke tautan mitra di belakangnya. Karena tirai menutupi seluruh layar, kursor otomatis meninggalkan tombol begitu modal terbuka -- karena itu penutupan karena hover tidak memakai pointerleave, melainkan pelacakan koordinat kursor di site.js. */ .kemitraan-tirai{ position:fixed; inset:0; z-index:1072; background:rgba(15,23,42,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease; } .kemitraan-tirai.tampil{ opacity:1; } /* display:flex di bawah MENANG atas display:none bawaan atribut hidden, jadi aturan ini wajib ada (perangkap yang sama dengan panel melayang). */ .kemitraan-tirai[hidden]{ display:none; } /* -- Kartu modal --------------------------------------------------------- */ /* Kiri-atas dihitung site.js sesuai letak tombol, supaya kartunya muncul persis di atas tombol: jarak kursor ke kartu pendek, jadi hover tidak terputus di tengah jalan. Nilai awal di bawah hanya cadangan. */ .kemitraan-modal{ position:fixed; z-index:1074; left:50%; top:50%; width:min(680px, calc(100vw - 28px)); /* TIDAK PERNAH menampilkan batang gulir di tepi kanan. Isinya dibuat pasti muat: daftar jadi dua kolom sejak 560px, dan pada layar pendek padding serta ukuran hurufnya dipangkas (aturan @media di bawah). overflow-y:auto tetap dipertahankan sebagai jaring pengaman untuk hal yang tidak bisa diukur dari CSS (ukuran huruf sistem yang sangat besar, terjemahan yang jauh lebih panjang), tetapi batangnya disembunyikan sehingga tepi modal selalu bersih. */ max-height:calc(100dvh - 24px); overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; background:#fff; border-radius:24px; box-shadow:0 34px 70px -32px rgba(15,23,42,.6); opacity:0; transform:translateY(16px) scale(.95); transition:opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1); } .kemitraan-modal::-webkit-scrollbar{ display:none; width:0; height:0; } .kemitraan-modal.tampil{ opacity:1; transform:none; } .kemitraan-modal[hidden]{ display:none; } .kemitraan-kepala{ display:flex; align-items:flex-start; gap:12px; padding:20px 18px 6px; } .kemitraan-kepala-teks{ flex:1 1 auto; min-width:0; } .kemitraan-kepala h3{ font-size:1.08rem; margin:2px 0 4px; } .kemitraan-kepala p{ margin:0; font-size:.83rem; color:var(--sl-teks-lembut); line-height:1.5; } .kemitraan-tutup{ width:38px; height:38px; flex:0 0 auto; border:none; border-radius:11px; background:var(--sl-latar); color:var(--sl-teks-lembut); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease, transform .2s var(--lengkung); } .kemitraan-tutup:hover{ background:var(--sl-primer-lembut); color:var(--sl-primer); transform:rotate(90deg); } .kemitraan-daftar{ list-style:none; margin:0; padding:12px 18px 4px; display:grid; gap:8px; } /* Enam bidang dalam satu kolom melampaui tinggi layar dan memaksa modal digulir. Dua kolom memangkasnya jadi tiga baris sehingga seluruh daftar, kepala, dan tombolnya muat sekaligus. */ @media (min-width:560px){ .kemitraan-daftar{ grid-template-columns:1fr 1fr; gap:10px; } } /* Layar pendek (HP melintang, jendela desktop yang dikecilkan, tablet terbagi). Semua yang bisa dipangkas dipangkas supaya isinya tetap muat tanpa digulir; kalimat pengantar dilepas paling akhir karena daftar bidang dan tombolnya yang benar-benar dibutuhkan. */ @media (max-height:700px){ .kemitraan-kepala{ padding:14px 16px 2px; } .kemitraan-kepala h3{ font-size:1rem; } .kemitraan-daftar{ padding:10px 16px 2px; gap:7px; } .kemitraan-daftar li{ padding:8px 11px; font-size:.85rem; border-radius:12px; } .kemitraan-ikon{ width:26px; height:26px; font-size:.82rem; } .kemitraan-kaki{ padding:12px 16px 14px; margin-top:6px; } } @media (max-height:560px){ .kemitraan-kepala p{ display:none; } .kemitraan-daftar li{ padding:6px 10px; font-size:.8rem; } } .kemitraan-daftar li{ display:flex; align-items:center; gap:11px; background:var(--sl-latar); border:1px solid var(--sl-garis); border-radius:14px; padding:11px 13px; font-size:.9rem; font-weight:700; /* Masuk bertahap, satu per satu, mengikuti --i dari view. */ opacity:0; transform:translateY(12px); } .kemitraan-modal.tampil .kemitraan-daftar li{ animation:bidang-masuk .5s var(--lengkung) forwards; animation-delay:calc(var(--i, 0) * 70ms + 140ms); } @keyframes bidang-masuk{ to{ opacity:1; transform:none; } } .kemitraan-ikon{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--sl-primer-lembut); color:var(--sl-primer-gelap); font-size:.92rem; } .kemitraan-kaki{ display:flex; flex-wrap:wrap; gap:10px; padding:16px 18px 20px; margin-top:10px; border-top:1px solid var(--sl-garis); } .kemitraan-kaki .btn-sl{ flex:1 1 auto; justify-content:center; } /* Ponsel: kartu menjadi lembaran bawah layar, sesuai jangkauan ibu jari. site.js tidak menulis left/top pada lebar ini, jadi aturan di bawah yang berlaku. */ /* 575.98, bukan 576: site.js memakai max-width:575.98px untuk memutus apakah lembaran ini layar ponsel; nilai berbeda membuat keputusan JS dan tampilan CSS berbeda tepat di lebar 576px. */ @media (max-width:575.98px){ .kemitraan-modal{ left:0; top:auto; bottom:0; width:100%; max-height:86dvh; border-radius:24px 24px 0 0; transform:translateY(28px); } .kemitraan-modal.tampil{ transform:none; } .kemitraan-kaki{ padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce){ .mitra-tombol::after{ display:none; } .kemitraan-tirai, .kemitraan-modal, .kemitraan-tutup{ transition:none; } .kemitraan-modal.tampil .kemitraan-daftar li{ animation:none; opacity:1; transform:none; } } /* ========================================================================= HALAMAN SATU LAYANAN ========================================================================= */ .layanan-pembuka{ padding:20px 0 32px; } .remah{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem; margin-bottom:18px; color:var(--sl-teks-lembut); } .remah a{ color:var(--sl-teks-lembut); text-decoration:none; } .remah a:hover{ color:var(--sl-primer); } .remah i{ font-size:.7rem; opacity:.6; } .remah [aria-current]{ color:var(--sl-primer); font-weight:700; } .layanan-pembuka h1{ font-size:clamp(1.6rem,6.5vw,2.6rem); line-height:1.15; margin:14px 0 10px; } .layanan-gambar{ margin:0; border-radius:var(--slf-radius-lg); overflow:hidden; box-shadow:var(--sl-neu-timbul); background:#fff; } .layanan-gambar img{ display:block; width:100%; height:auto; } .lencana-besar{ display:inline-flex; align-items:center; min-height:46px; padding:0 18px; border-radius:var(--slf-radius-md); font-size:.84rem; } .isi-kaya{ font-size:.95rem; color:var(--sl-teks-lembut); overflow-wrap:anywhere; /* Tabel admin yang lebih lebar dari kolom digulir di tempatnya: tanpa ini lebarnya dipotong body{overflow-x:hidden} tanpa bekas, pembaca hanya melihat kolom terpotong. */ overflow-x:auto; } .isi-kaya h2{ font-size:1.2rem; margin:24px 0 10px; color:var(--sl-teks); } .isi-kaya h3{ font-size:1.05rem; margin:20px 0 8px; color:var(--sl-teks); } .isi-kaya p{ margin:0 0 14px; } .isi-kaya ul, .isi-kaya ol{ margin:0 0 14px; padding-left:22px; } .isi-kaya li{ margin-bottom:6px; } .isi-kaya blockquote{ margin:0 0 14px; padding:12px 16px; background:var(--sl-primer-lembut); border-left:3px solid var(--sl-primer); border-radius:0 var(--slf-radius-md) var(--slf-radius-md) 0; } .isi-kaya table{ width:100%; border-collapse:collapse; margin-bottom:14px; font-size:.88rem; } .isi-kaya th, .isi-kaya td{ border:1px solid var(--sl-garis); padding:8px 10px; text-align:left; } .isi-kaya th{ background:var(--sl-latar); } /* Garis penutup penjelasan dengan tombol bagikan WhatsApp di ujung kanannya. */ .layanan-bagikan{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding-bottom:10px; border-bottom:2px solid var(--sl-garis); font-size:.84rem; font-weight:700; color:var(--sl-teks-lembut); } .bagikan-wa{ flex:0 0 auto; width:44px; height:44px; border-radius:999px; /* 44px: target sentuh */ display:inline-flex; align-items:center; justify-content:center; background:#25D366; color:#fff; font-size:1.25rem; text-decoration:none; box-shadow:0 8px 18px -10px rgba(37,211,102,.9); transition:transform .2s var(--lengkung), background .2s ease; } .bagikan-wa:hover, .bagikan-wa:focus-visible{ background:#1ebe5b; color:#fff; transform:translateY(-2px); } /* Di HP tepi kontainer hanya 12px, sedangkan tab advokat (.adv-pemicu, 46px) menempel tetap di tepi kanan setinggi tengah layar: tombol yang rata kanan tertutup sepertiganya setiap kali melintas. Padding menggeser tombolnya keluar dari jalur tab; garis bawahnya tetap selebar kolom. */ @media (max-width:767.98px){ .layanan-bagikan{ padding-right:40px; } } /* Kisi layanan lain di bawah penjelasan: dua kolom di HP, tiga mulai 992px (kartunya ringkas: gambar + judul + dua baris ringkasan). */ .layanan-lain{ margin-top:26px; } .layanan-lain-judul{ position:relative; font-size:1.05rem; margin:0 0 16px; padding-bottom:10px; } .layanan-lain-judul::after{ content:''; position:absolute; left:0; bottom:0; width:48px; height:3px; border-radius:3px; background:var(--sl-primer); } .kartu-lain{ display:flex; flex-direction:column; height:100%; overflow:hidden; background:#fff; border-radius:var(--slf-radius-md); box-shadow:var(--sl-bayang-sm); text-decoration:none; color:var(--sl-teks); transition:transform .25s var(--lengkung), box-shadow .25s ease; } .kartu-lain-gbr{ position:relative; aspect-ratio:16/10; overflow:hidden; display:flex; align-items:center; justify-content:center; /* Pengganti gambar saat admin belum mengunggah: nada pucat + ikon layanan. */ background:linear-gradient(135deg,var(--sl-latar-1),var(--sl-latar-2)); } .kartu-lain-gbr img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--lengkung); } .kartu-lain-segera{ position:absolute; top:8px; left:8px; z-index:1; font-size:.64rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.92); color:var(--sl-teks-lembut); border-radius:999px; padding:3px 8px; } .kartu-lain-isi{ padding:10px 12px 12px; } .kartu-lain-isi h3{ font-size:.9rem; line-height:1.3; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .kartu-lain-isi p{ font-size:.78rem; line-height:1.45; margin:0; color:var(--sl-teks-lembut); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } @media (hover:hover){ .kartu-lain:hover{ transform:translateY(-3px); box-shadow:var(--sl-bayang); } .kartu-lain:hover h3{ color:var(--sl-primer); } .kartu-lain:hover .kartu-lain-gbr img{ transform:scale(1.05); } } @media (max-width:575.98px){ .kartu-lain-gbr .ios-icon-lg{ transform:scale(.8); } .kartu-lain-isi{ padding:8px 10px 10px; } } .kartu-sisi{ background:#fff; border-radius:var(--slf-radius-lg); padding:20px; box-shadow:var(--sl-bayang); } .kartu-sisi h2{ font-size:1rem; margin:0 0 14px; display:flex; align-items:center; gap:10px; } .alur-ringkas{ list-style:none; margin:0; padding:0; counter-reset:langkah; } .alur-ringkas li{ position:relative; counter-increment:langkah; padding:0 0 16px 38px; display:flex; flex-direction:column; gap:2px; } .alur-ringkas li::before{ content:counter(langkah); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--sl-primer); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; } /* Garis penghubung antar langkah, kecuali setelah langkah terakhir. */ .alur-ringkas li:not(:last-child)::after{ content:''; position:absolute; left:12.5px; top:28px; bottom:4px; width:2px; background:var(--sl-garis); } .alur-ringkas b{ font-size:.92rem; } .alur-ringkas span{ font-size:.84rem; color:var(--sl-teks-lembut); } /* ========================================================================= MENU LAYANAN DI NAVBAR ========================================================================= */ .menu-layanan{ border:none; border-radius:var(--slf-radius-md); box-shadow:var(--sl-bayang-lg); padding:8px; min-width:290px; } .menu-layanan .dropdown-item{ display:flex; align-items:center; gap:11px; border-radius:10px; padding:8px 10px; min-height:48px; font-weight:600; font-size:.9rem; white-space:normal; } .menu-layanan .dropdown-item:hover, .menu-layanan .dropdown-item:focus{ background:var(--sl-primer-lembut); color:var(--sl-primer-gelap); } /* Di HP menu ini berada di dalam offcanvas: tampilkan mendatar penuh tanpa melayang, supaya tidak terpotong tepi laci. */ @media (max-width:991.98px){ .menu-layanan{ box-shadow:none; background:var(--sl-latar); min-width:0; width:100%; } } /* ========================================================================= FOOTER ========================================================================= */ .situs-kaki{ background:#1f2937; color:#d1d5db; padding:40px 0 20px; font-size:.9rem; } .situs-kaki .situs-merek b{ color:#fff; } .situs-kaki .situs-merek small{ color:#9ca3af; } .situs-kaki h3{ color:#fff; font-size:1rem; margin-bottom:12px; } .situs-kaki ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; } /* Tautan footer putih saat diam, merah saat disentuh. Merah yang dipakai di sini #f87171, bukan --sl-primer: merah pekat di atas latar #1f2937 hanya mencapai rasio ~2,5:1, di bawah ambang keterbacaan 4,5:1. */ .situs-kaki a{ color:#fff; text-decoration:none; transition:color .2s ease; } .situs-kaki a:hover, .situs-kaki a:focus-visible{ color:#f87171; } /* :visited disamakan dengan keadaan diam supaya tautan yang sudah dibuka tidak berubah jadi ungu bawaan peramban. */ .situs-kaki a:visited{ color:#fff; } .situs-kaki a:visited:hover{ color:#f87171; } /* Target sentuh tautan layanan di footer tetap nyaman di HP. */ .situs-kaki ul li a{ display:inline-flex; align-items:center; min-height:32px; } .kaki-kontak li{ display:flex; gap:10px; overflow-wrap:anywhere; } .kaki-kontak i{ color:#f87171; margin-top:3px; } .kaki-sosial{ display:flex; gap:8px; } .kaki-sosial a{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; color:#fff; } .kaki-sosial a:hover{ background:var(--sl-primer); color:#fff; } /* Hak cipta di kiri, pengembang di ujung kanan (space-between). Di layar sempit keduanya membungkus ke baris sendiri, bukan saling menindih. */ .kaki-bawah{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 16px; border-top:1px solid rgba(255,255,255,.1); margin-top:28px; padding-top:16px; font-size:.82rem; color:#9ca3af; } @media (min-width:992px){ .situs-kaki{ padding:56px 0 24px; } } /* ========================================================================= ALAT MELAYANG -- sudut kanan bawah ------------------------------------------------------------------------- Satu kolom berisi pengaturan tema, tanya jawab, dan gulir cepat. Panel yang terbuka dipasang absolute terhadap kolomnya, bukan terhadap layar: dengan begitu tingginya mengikuti isi tombol di atasnya, dan menambah atau mengurangi satu tombol tidak perlu menghitung ulang jarak dari bawah. env(safe-area-inset-*) wajib: di iPhone dengan bilah gestur, sudut bawah memang tidak bisa dipakai untuk menyentuh. Tanpa itu tombol paling bawah tertutup bilah dan sulit ditekan. ========================================================================= */ :root{ --alat-sisi:16px; --alat-bawah:calc(16px + env(safe-area-inset-bottom, 0px)); --alat-besar:50px; --alat-celah:10px; } @media (min-width:768px){ :root{ --alat-sisi:22px; --alat-besar:54px; } } .alat-melayang{ position:fixed; right:calc(var(--alat-sisi) + env(safe-area-inset-right, 0px)); bottom:var(--alat-bawah); z-index:1050; display:flex; flex-direction:column; align-items:flex-end; gap:var(--alat-celah); } .alat-tombol{ width:var(--alat-besar); height:var(--alat-besar); border:1px solid rgba(255,255,255,.6); border-radius:50%; background:#fff; color:var(--sl-primer); font-size:1.22rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; box-shadow:var(--sl-bayang); transition:transform .2s var(--lengkung), background .2s ease, color .2s ease, box-shadow .2s ease; } .alat-tombol:hover{ transform:translateY(-2px) scale(1.04); box-shadow:var(--sl-bayang-lg); } .alat-tombol:active{ transform:scale(.96); } /* Tombol tanya jawab adalah ajakan utama di kolom ini, jadi dialah yang diisi warna aksen; dua lainnya tetap putih. */ .alat-tombol-utama{ background:var(--sl-primer); color:#fff; border-color:transparent; } .alat-tombol-utama:hover{ background:var(--sl-primer-gelap); color:#fff; } /* Tombol gulir cepat baru berarti setelah halaman digulir. Saat tersembunyi ia MELEPAS ruangnya (tinggi 0 dan celahnya dibatalkan lewat margin negatif), sehingga tombol tema dan tanya jawab turun mengisi sudut; saat muncul kembali, keduanya naik ke tempat semula. Karena kolomnya berjangkar ke bawah, perpindahan ini terjadi sendiri tanpa menghitung koordinat apa pun. Tinggi dianimasikan, bukan display:none, supaya perpindahannya mulus dan bukan lompatan. */ #tombolAtas{ opacity:0; visibility:hidden; transform:translate3d(0,10px,0); height:0; margin-top:calc(-1 * var(--alat-celah)); overflow:hidden; transition:opacity .25s ease, transform .25s var(--lengkung), visibility .25s, height .25s var(--lengkung), margin-top .25s var(--lengkung); } #tombolAtas.tampil{ opacity:1; visibility:visible; transform:none; height:var(--alat-besar); margin-top:0; } /* Kedua panel di bawah memakai display:flex, dan aturan display dari lembar gaya penulis SELALU mengalahkan display:none bawaan peramban untuk atribut hidden. Tanpa baris ini, menutup panel hanya mengubah atributnya sementara panelnya tetap terlihat utuh. */ .tema-panel[hidden], .asisten-panel[hidden]{ display:none; } /* -- Pengaturan tema ------------------------------------------------------ */ .tema-panel{ position:absolute; right:0; bottom:calc(100% + 12px); background:#fff; border-radius:var(--slf-radius-md); padding:12px 14px 14px; box-shadow:var(--sl-bayang-lg); border:1px solid var(--sl-garis); } .tema-judul{ margin:0 0 9px; font-size:.78rem; font-weight:800; color:var(--sl-teks-lembut); text-transform:uppercase; letter-spacing:.04em; } .tema-pilihan{ display:flex; gap:8px; } .tema-pilihan-butir{ cursor:pointer; display:block; line-height:0; } .tema-pilihan-butir input{ position:absolute; opacity:0; width:0; height:0; } .tema-lingkar{ display:block; width:34px; height:34px; border-radius:50%; background:var(--warna); border:2px solid #fff; box-shadow:0 0 0 1px rgba(15,23,42,.14); transition:transform .18s var(--lengkung), box-shadow .18s ease; } .tema-pilihan-butir:hover .tema-lingkar{ transform:scale(1.08); } /* Terpilih ditandai dua kali: cincin warna aksen dan tanda centang. Warna saja tidak cukup - pengunjung yang tidak dapat membedakan warna tetap harus tahu tema mana yang sedang berlaku. */ .tema-pilihan-butir input:checked + .tema-lingkar{ box-shadow:0 0 0 3px var(--sl-latar-2), 0 0 0 5px var(--sl-primer); transform:scale(1.04); } .tema-pilihan-butir input:focus-visible + .tema-lingkar{ outline:3px solid var(--sl-aksen); outline-offset:3px; } .tema-pilihan-butir input:checked + .tema-lingkar::after{ content:'\2713'; display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; font-size:1rem; font-weight:800; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.4); } /* -- Tanya jawab layanan -------------------------------------------------- */ /* Di HP panelnya berupa lembaran penuh lebar yang menempel di dasar layar, bukan melayang di atas tumpukan tombol. Alasannya tinggi: melayang di atas tumpukan menyisakan kira-kira sepertiga layar untuk percakapan, dan pada layar pendek (ponsel mendatar) sisa itu habis sama sekali sehingga panelnya keluar dari atas layar. Sebagai lembaran, tingginya hanya dibatasi layar. Diperbesar ke jendela melayang di layar >=576px, tempat ruangnya cukup. */ .asisten-panel{ position:fixed; left:0; right:0; bottom:0; width:100%; max-height:min(86dvh, calc(100vh - 90px)); max-height:min(86dvh, calc(100dvh - 90px)); display:flex; flex-direction:column; background:#fff; border:1px solid var(--sl-garis); border-bottom:none; border-radius:var(--slf-radius-lg) var(--slf-radius-lg) 0 0; box-shadow:var(--sl-bayang-lg); padding-bottom:env(safe-area-inset-bottom, 0px); overflow:hidden; transform-origin:bottom center; } @media (min-width:576px){ /* Jendela melayang: dipasang absolute terhadap kolom tombolnya, jadi tingginya mengikuti isi tumpukan di atasnya. Sisanya dikurangi lagi untuk tumpukan tombol (3 x 54px + 2 celah), jarak bawah, dan celah atas -- itulah asal angka 232px. Tanpa pengurangan itu, panelnya tumbuh ke atas sampai keluar layar pada jendela setinggi 700px. */ .asisten-panel{ position:absolute; left:auto; right:0; bottom:calc(100% + 12px); width:min(378px, calc(100vw - 2 * var(--alat-sisi))); max-height:min(560px, calc(100dvh - 232px)); border:1px solid var(--sl-garis); border-radius:var(--slf-radius-lg); padding-bottom:0; transform-origin:bottom right; } } .asisten-kepala{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--sl-garis); background:var(--sl-permukaan-2); } .asisten-kepala-teks{ display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1 1 auto; } .asisten-kepala-teks b{ font-size:.92rem; } .asisten-kepala-teks small{ font-size:.74rem; color:var(--sl-teks-lembut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .asisten-tutup{ width:34px; height:34px; flex:0 0 auto; border:none; border-radius:10px; background:transparent; color:var(--sl-teks-lembut); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .asisten-tutup:hover{ background:#fff; color:var(--sl-teks); } .asisten-isi{ overflow-y:auto; padding:12px; display:grid; gap:10px; align-content:start; } .asisten-balon{ max-width:88%; padding:10px 13px; border-radius:16px; font-size:.86rem; line-height:1.55; } /* pre-wrap supaya baris baru dari jawaban tetap terbaca - jawaban yang berupa daftar bernomor harus tetap tampak sebagai daftar, bukan satu paragraf panjang yang menempel. */ .asisten-balon p{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; } .asisten-balon p + p{ margin-top:8px; } .asisten-balon-asisten{ justify-self:start; background:var(--sl-latar); border:1px solid var(--sl-garis); border-bottom-left-radius:6px; color:var(--sl-teks); } .asisten-balon-saya{ justify-self:end; background:var(--sl-primer); color:#fff; border-bottom-right-radius:6px; } /* Balon tunggu: titik-titik bergerak, ditemani kalimat kerja yang menyebut nama asisten (bukan "sedang memproses"). */ .asisten-balon-tunggu{ display:flex; align-items:center; gap:9px; font-style:normal; } .asisten-titik{ display:inline-flex; gap:3px; flex:0 0 auto; } .asisten-titik i{ width:6px; height:6px; border-radius:50%; background:var(--sl-primer); opacity:.35; animation:sl-asisten-titik 1.1s infinite ease-in-out; } .asisten-titik i:nth-child(2){ animation-delay:.16s; } .asisten-titik i:nth-child(3){ animation-delay:.32s; } @keyframes sl-asisten-titik{ 50%{ opacity:1; transform:translateY(-3px); } } .asisten-saran{ display:flex; flex-wrap:wrap; gap:7px; } .asisten-saran button{ border:1px solid var(--sl-garis); background:#fff; color:var(--sl-primer); border-radius:999px; padding:7px 12px; font-size:.78rem; font-weight:700; cursor:pointer; text-align:left; max-width:100%; transition:background .2s ease, border-color .2s ease; } .asisten-saran button:hover{ background:var(--sl-primer-lembut); border-color:var(--sl-primer); } .asisten-form{ border-top:1px solid var(--sl-garis); padding:10px 12px 12px; background:#fff; } .asisten-form .form-control{ border:1.5px solid var(--sl-garis); border-radius:12px; resize:none; font-family:inherit; } .asisten-form .form-control:focus{ border-color:var(--sl-primer); box-shadow:0 0 0 4px rgba(var(--sl-bayang-rgb),.1); } .asisten-form-bawah{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; } .asisten-catatan{ font-size:.7rem; color:var(--sl-teks-lembut); line-height:1.35; } .asisten-form-bawah .btn-sl{ padding:9px 16px; min-height:42px; font-size:.86rem; flex:0 0 auto; } /* -- Panel advokat -------------------------------------------------------- */ /* Tombol pemicu menempel di tepi kanan setinggi tengah layar: satu-satunya bidang yang masih kosong setelah tumpukan alat melayang mengisi sudut kanan bawah dan navbar mengisi atas. Sudut kiri bawah sengaja dibiarkan kosong. */ .adv-pemicu{ position:fixed; right:calc(0px + env(safe-area-inset-right, 0px)); top:50%; z-index:1040; transform:translateY(-50%); width:46px; padding:15px 0; border:none; border-radius:14px 0 0 14px; background:var(--sl-primer); color:#fff; font-size:1.24rem; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:-7px 7px 20px -10px rgba(var(--sl-bayang-lg-rgb),.55); transition:transform .2s var(--lengkung), background .2s ease, opacity .2s ease; } /* Saat lacinya terbuka tombolnya disembunyikan: lacinya menutup tepi kiri, dan tombol yang masih menempel di kanan hanya mengundang ditekan dua kali. */ .adv-pemicu:hover{ transform:translateY(-50%) translateX(-4px); background:var(--sl-primer-gelap); } .adv-pemicu[aria-expanded="true"]{ opacity:0; visibility:hidden; pointer-events:none; } /* Selagi kartu penyambutan tampil, tombol ini disembunyikan pada layar sempit. Keduanya menghuni jalur yang sama: kartu berpusat dengan lebar 100vw - 28px, sedangkan tombolnya menempel 46px di tepi kanan. Di bawah 522px tepi kanan kartu pasti melewati tepi kiri tombol, dan karena tombol ber-z-index lebih tinggi, sudut kartunya tertimpa keping merah -- terukur 32x64px pada layar 390px. Kartu itu sendiri yang lalu tampak rusak, bukan tombolnya. Di atas 540px keduanya tidak bertemu, jadi tombolnya tetap ada. Sama polanya dengan tombol yang menyembunyikan diri saat lacinya terbuka; atributnya dipasang site.js hanya ketika kartunya benar-benar muncul. */ @media (max-width:540px){ html[data-sambutan="tampil"] .adv-pemicu{ opacity:0; visibility:hidden; pointer-events:none; } } .adv-tirai{ position:fixed; inset:0; z-index:1065; background:rgba(15,23,42,.45); opacity:0; transition:opacity .3s ease; } .adv-tirai.tampil{ opacity:1; } .adv-laci{ position:fixed; top:0; bottom:0; left:0; z-index:1070; width:min(364px, 88vw); background:#fff; box-shadow:var(--sl-bayang-lg); display:flex; flex-direction:column; /* Tersembunyi dengan digeser keluar tepi KIRI, bukan display:none: hanya transform yang dianimasikan, jadi tidak ada reflow dan gerakannya mulus di HP kelas bawah. */ transform:translateX(-100%); transition:transform .34s var(--lengkung), visibility .34s; visibility:hidden; } .adv-laci.buka{ transform:translateX(0); visibility:visible; } .adv-kepala{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 16px 12px; border-bottom:1px solid var(--sl-garis); background:var(--sl-permukaan-2); } .adv-kepala h2{ font-size:1.1rem; margin:2px 0 0; } .adv-tutup{ width:38px; height:38px; flex:0 0 auto; border:none; border-radius:11px; background:#fff; color:var(--sl-teks-lembut); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--sl-bayang-sm); } .adv-tutup:hover{ color:var(--sl-primer); } .adv-pengantar{ margin:0; padding:12px 16px 0; font-size:.84rem; color:var(--sl-teks-lembut); font-style:italic; } .adv-daftar{ list-style:none; margin:0; padding:12px 16px; display:grid; gap:10px; overflow-y:auto; flex:1 1 auto; } .adv-butir{ display:flex; gap:12px; align-items:flex-start; background:var(--sl-latar); border:1px solid var(--sl-garis); border-radius:var(--slf-radius-md); padding:11px; } .adv-foto{ width:60px; height:60px; flex:0 0 auto; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--sl-gradasi); color:#fff; } .adv-foto img{ width:100%; height:100%; object-fit:cover; object-position:top center; } .adv-inisial{ font-size:1.2rem; font-weight:800; } .adv-teks{ display:flex; flex-direction:column; gap:2px; min-width:0; } .adv-teks b{ font-size:.92rem; } .adv-jabatan{ font-size:.78rem; font-weight:700; color:var(--sl-primer); } .adv-keahlian{ font-size:.78rem; color:var(--sl-teks-lembut); } .adv-kontak{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .adv-kontak a{ display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; text-decoration:none; padding:5px 10px; border-radius:999px; background:#fff; color:var(--sl-primer); border:1px solid var(--sl-garis); min-height:30px; } .adv-kontak a:hover{ border-color:var(--sl-primer); background:var(--sl-primer-lembut); } .adv-kaki{ border-top:1px solid var(--sl-garis); padding:13px 16px; /* Lacinya setinggi layar, jadi baris kontak terakhirnya jatuh tepat di dasar layar -- di iPhone dengan bilah gestur, tepat di bawahnya. */ padding-bottom:calc(13px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:7px; background:var(--sl-permukaan-2); } .adv-kaki > span{ font-size:.78rem; color:var(--sl-teks-lembut); } .adv-kaki a{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:700; text-decoration:none; } /* -- Kartu penyambutan beranda -------------------------------------------- */ /* Latar gelap di belakang kartu. Tanpa ini kartunya berdiri di atas halaman yang sama terangnya: mata pembaca masih tertarik ke hero dan ke tumpukan tombol, dan kartunya terbaca sebagai keping yang menempel, bukan sebagai hal yang sedang dibuka. `1055` berada DI ATAS seluruh isi halaman (navbar 1030, tombol advokat 1040, tumpukan alat melayang 1050), dan kartunya sendiri `1060` -- jadi yang gelap hanya latar, kartunya tetap terang penuh. Klik pada tirai menutup kartu, sama seperti tombol X. */ .sambutan-tirai{ position:fixed; inset:0; z-index:1055; background:rgba(15,23,42,.55); opacity:0; transition:opacity .4s ease; } .sambutan-tirai.tampil{ opacity:1; } .sambutan{ position:fixed; left:0; right:0; margin-inline:auto; /* Di ATAS navbar (kepala halaman ber-`z-index` 1030). Pada versi lama kartunya 1020, jadi kepala halaman menimpa tepi atas kartu begitu pembaca menggulir -- kartunya terbaca patah, bukan menyapa. Memakai --tinggi-kepala (navbar + bilah kontak bila tampil): dengan --tinggi-atas saja kartu menindih ~24px dasar navbar. */ top:calc(var(--tinggi-kepala) + 14px); z-index:1060; width:min(430px, calc(100vw - 28px)); /* Tanpa gulir di dalam: `overflow:hidden` dipakai sebagai penjaga terakhir bila isinya ternyata lebih panjang dari layar, dan isinya sendiri dijaga pendek oleh media query tinggi di bawah (ikon dilepas, daftar dipangkas, deskripsi dibatasi tiga baris). Ruang tumpukan tombol melayang TIDAK lagi disisakan: kartu berpusat sedangkan tumpukan menempel di tepi kanan, jadi jalurnya hanya bertemu pada layar sempit -- dan di situ tumpukannya memang sudah disembunyikan oleh aturan selebar 540px. */ max-height:calc(100vh - var(--tinggi-kepala) - 28px); max-height:calc(100dvh - var(--tinggi-kepala) - 28px); overflow:hidden; background:#fff; border:1px solid var(--sl-garis); border-radius:var(--slf-radius-lg); box-shadow:var(--sl-bayang-lg); padding:16px 16px 14px; /* Meluncur dari tepi KIRI layar ke tengah. `50% - 50vw` menggeser kartu persis sampai tepi kiri viewport (di ponsel, yang hampir selebar layar, gesekannya jadi kecil dan wajar), lalu kembali ke tempatnya. */ opacity:0; transform:translate3d(calc(50% - 50vw),0,0); transition:opacity .4s ease, transform .5s var(--lengkung); } .sambutan.tampil{ opacity:1; transform:none; } .sambutan-ikon{ margin-bottom:9px; } .sambutan-judul{ font-size:1.06rem; margin:0 0 5px; padding-right:30px; } /* Dibatasi tiga baris: `site_deskripsi` diisi admin dan bisa setengah paragraf, sedangkan kartu ini dilarang menggulir. Baris keempat dan seterusnya dipotong dengan elipsis, bukan membuat kartu kehilangan tombol "Lihat Layanan" di bawahnya. */ .sambutan-teks{ margin:0 0 11px; font-size:.86rem; color:var(--sl-teks-lembut); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .sambutan-tutup{ position:absolute; top:10px; right:10px; width:34px; height:34px; border:none; border-radius:10px; background:var(--sl-permukaan-2); color:var(--sl-teks-lembut); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .sambutan-tutup:hover{ background:var(--sl-latar-2); color:var(--sl-teks); } .sambutan-layanan{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:6px; } .sambutan-layanan a{ display:flex; align-items:center; gap:9px; font-size:.84rem; font-weight:700; text-decoration:none; color:var(--sl-teks); padding:6px 8px; border-radius:11px; background:var(--sl-latar); } .sambutan-layanan a:hover{ background:var(--sl-primer-lembut); color:var(--sl-primer-gelap); } .sambutan-aksi{ display:flex; flex-wrap:wrap; gap:8px; } .sambutan-aksi .btn-sl{ padding:9px 16px; min-height:44px; font-size:.86rem; flex:1 1 auto; } /* -- Kartu penyambutan di layar pendek ------------------------------------ */ /* Kartu dilarang menggulir, jadi pada layar pendek isinya dipadatkan sampai tetap muat: ikon hiasan dilepas, dan daftar layanan cukup dua butir -- daftar lengkapnya persis ada di bagian #layanan yang justru menjadi tujuan tombol "Lihat Layanan". Ambangnya tinggi, bukan lebar: masalah ini muncul di ponsel 640px DAN di ponsel mendatar yang layarnya lebar tapi hanya setinggi 390px. */ @media (max-height:700px){ .sambutan{ padding:12px 14px; } .sambutan-ikon{ display:none; } .sambutan-judul{ margin-bottom:4px; } .sambutan-teks{ margin-bottom:9px; } .sambutan-layanan li:nth-child(n+3){ display:none; } } /* Pendek DAN sempit sekaligus (mis. 390x390): jalur kartu kini benar-benar bertemu jalur tombol melayang, sedangkan kartunya sudah memakai seluruh tinggi layar. Tombolnya menyingkir sampai kartu ditutup -- kartu hanya sekali seumur peramban, dan tombolnya kembali begitu kartunya hilang. Panel yang sedang terbuka TIDAK ikut disembunyikan: ia tetap terbuka di balik tirai dan langsung terbaca utuh begitu kartu ditutup. */ @media (max-height:560px) and (max-width:599.98px){ html[data-sambutan="tampil"] .alat-melayang .alat-tombol, /* Tombol gulir cepat ditulis dengan #id di aturannya sendiri (#tombolAtas.tampil), dan satu #id mengalahkan seluruh rangkaian kelas di atas berapa pun panjangnya. Tanpa baris ini, tombol itu tetap tercetak di atas kartu pada layar 320x480. */ html[data-sambutan="tampil"] .alat-melayang #tombolAtas{ opacity:0; visibility:hidden; pointer-events:none; } } /* ========================================================================= HORMATI PREFERENSI GERAK Transisi di atas hanya menambah kehalusan; tanpa animasi pun semua alat tetap terbuka dan tertutup dengan benar karena JS mengubah kelas yang sama, bukan menunggu animasi selesai. ========================================================================= */ @media (prefers-reduced-motion: reduce){ .alat-tombol, .alat-tombol:hover, .alat-tombol:active{ transition:none; transform:none; } #tombolAtas{ transition:none; } .tema-lingkar{ transition:none; } .tema-pilihan-butir:hover .tema-lingkar{ transform:none; } .adv-laci{ transition:none; } .adv-tirai{ transition:none; } .adv-pemicu, .adv-pemicu:hover{ transition:none; transform:translateY(-50%); } .sambutan{ transition:none; } .sambutan-tirai{ transition:none; } .asisten-titik i{ animation:none; opacity:.7; } } /* ========================================================================= MAJALAH -- Siaran Pers & Case Story ------------------------------------------------------------------------- Satu blok aturan untuk dua halaman. Keduanya membaca tabel `artikel` dan memakai kartu yang sama; hanya susunan bagiannya yang berbeda (Siaran Pers pakai sorotan + daftar bernomor, Case Story pakai kisi kolom majalah). Prefiks .mjl- supaya tidak menyenggol .kartu-layanan di beranda. ========================================================================= */ /* Label kategori memakai warna tombol utama, sesuai aturan lencana proyek. */ .mjl-label{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--sl-primer); border-radius:999px; padding:4px 11px; line-height:1.4; } .mjl-label-lembut{ color:var(--sl-primer); background:var(--sl-primer-lembut); } /* Kepala halaman rata kiri, bukan tengah seperti .bagian-kepala: halaman ini sebuah daftar bacaan, dan judul rata kiri sejajar dengan kolom di bawahnya. */ .mjl-kepala{ margin-bottom:20px; } .mjl-kepala h1{ font-size:clamp(1.55rem,7vw,2.6rem); margin:6px 0; letter-spacing:-.02em; } .mjl-kepala p{ color:var(--sl-teks-lembut); font-size:.94rem; margin:0; max-width:58ch; } /* Palang bagian: judul di kiri, garis mengisi sisa lebar. */ .mjl-palang{ display:flex; align-items:center; gap:14px; margin:0 0 18px; } .mjl-palang h2{ font-size:clamp(1.15rem,5vw,1.6rem); margin:0; white-space:nowrap; } .mjl-palang::after{ content:''; flex:1 1 auto; height:2px; background:var(--sl-garis); } /* Pengganti sampul saat admin belum mengunggah gambar: huruf awal judul di atas gradasi tema, bukan kotak abu kosong yang terlihat seperti gambar gagal. */ .mjl-ubin{ display:flex; align-items:center; justify-content:center; /* Nada pucat, BUKAN gradasi merah pekat: satu halaman bisa memuat sepuluh kartu sekaligus, dan sepuluh bidang merah penuh membuat halamannya terbaca sebagai satu blok warna, bukan sebagai daftar bacaan. */ background:linear-gradient(135deg,var(--sl-latar-1) 0%,var(--sl-latar-2) 100%); color:rgba(var(--sl-bayang-rgb),.26); font-weight:800; font-size:2rem; letter-spacing:-.02em; } /* ----------------------------------------------- SOROTAN (kartu pembuka) */ .mjl-sorot{ position:relative; display:block; overflow:hidden; text-decoration:none; border-radius:var(--slf-radius-lg); box-shadow:var(--sl-bayang); aspect-ratio:4/5; color:#fff; } .mjl-sorot img, .mjl-sorot .mjl-ubin{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--lengkung); } .mjl-sorot .mjl-ubin{ font-size:4rem; } /* Tirai gelap di bawah supaya teks putih tetap terbaca di atas foto apa pun. */ .mjl-sorot::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(17,10,10,.9) 0%, rgba(17,10,10,.58) 40%, rgba(17,10,10,.04) 76%); } .mjl-sorot:hover img{ transform:scale(1.04); } .mjl-sorot-isi{ position:absolute; inset:auto 0 0 0; z-index:1; padding:18px 18px 20px; } .mjl-sorot-isi h2{ font-size:clamp(1.3rem,6vw,2.2rem); line-height:1.18; margin:10px 0 8px; color:#fff; letter-spacing:-.02em; } .mjl-sorot-isi p{ color:rgba(255,255,255,.82); font-size:.9rem; margin:0 0 12px; max-width:56ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .mjl-sorot .mjl-lanjut{ color:#fff; } @media (min-width:576px){ .mjl-sorot{ aspect-ratio:16/10; } .mjl-sorot-isi{ padding:26px; } } @media (min-width:992px){ .mjl-sorot{ aspect-ratio:16/7; } .mjl-sorot-isi{ padding:34px 38px 36px; max-width:72%; } } .mjl-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--sl-teks-lembut); } .mjl-sorot-isi .mjl-meta{ color:rgba(255,255,255,.74); } .mjl-meta i{ font-size:.72rem; } .mjl-lanjut{ display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:800; color:var(--sl-primer); } .mjl-lanjut i{ transition:transform .25s var(--lengkung); } .mjl-sorot:hover .mjl-lanjut i, .mjl-kartu:hover .mjl-lanjut i{ transform:translateX(4px); } /* -------------------------------------- DAFTAR BERNOMOR (lima teratas) */ /* Di bawah 992px daftarnya digeser jempol (scroll-snap, tanpa batang gulir); di 992px ke atas kelimanya berdiri sejajar dalam satu baris grid. */ .mjl-urut{ display:flex; gap:14px; margin:0; padding:0 0 4px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .mjl-urut::-webkit-scrollbar{ display:none; width:0; height:0; } .mjl-urut-item{ flex:0 0 68%; scroll-snap-align:start; } @media (min-width:576px){ .mjl-urut-item{ flex-basis:44%; } } @media (min-width:768px){ .mjl-urut-item{ flex-basis:31%; } } @media (min-width:992px){ .mjl-urut{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; overflow:visible; } .mjl-urut-item{ flex-basis:auto; } } .mjl-urut-tautan{ display:block; text-decoration:none; color:inherit; } .mjl-urut-gbr{ position:relative; overflow:hidden; aspect-ratio:4/3; border-radius:var(--slf-radius-md); box-shadow:var(--sl-bayang-sm); } .mjl-urut-gbr img, .mjl-urut-gbr .mjl-ubin{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--lengkung); } .mjl-urut-tautan:hover .mjl-urut-gbr img{ transform:scale(1.06); } .mjl-urut-bawah{ display:flex; align-items:flex-start; gap:10px; margin-top:10px; } /* Angka besar bergaris tepi. Warna isi dipakai lebih dulu sebagai cadangan: tanpa dukungan -webkit-text-stroke, `color:transparent` membuat angkanya hilang sama sekali. */ .mjl-urut-no{ flex:0 0 auto; font-size:1.9rem; font-weight:800; line-height:.95; color:var(--sl-primer); } @supports (-webkit-text-stroke: 1.5px red){ .mjl-urut-no{ color:transparent; -webkit-text-stroke:1.5px var(--sl-primer); } } .mjl-urut-judul{ margin:0; font-size:.92rem; font-weight:700; line-height:1.32; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .mjl-urut-tautan:hover .mjl-urut-judul{ color:var(--sl-primer); } /* ------------------------------------------- KISI KOLOM GAYA MAJALAH */ /* Judul dan ringkasan di atas, gambar di bawah -- susunan inilah yang membuat kolomnya terbaca seperti halaman majalah, bukan deretan kartu foto. */ .mjl-kisi{ display:grid; gap:22px; } @media (min-width:576px){ .mjl-kisi{ grid-template-columns:1fr 1fr; column-gap:26px; } } @media (min-width:992px){ .mjl-kisi{ grid-template-columns:repeat(3,1fr); column-gap:30px; } } /* align-items:flex-start supaya lencana kategori selebar teksnya sendiri. Tanpa ini, flex-column meregangkan lencana selebar kolom dan pil kecilnya berubah jadi palang penuh. */ .mjl-kartu{ display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; color:inherit; } .mjl-kartu > .mjl-kartu-gbr, .mjl-kartu > .mjl-kartu-kaki{ align-self:stretch; } .mjl-kartu h3{ font-size:1.05rem; line-height:1.3; margin:10px 0 8px; letter-spacing:-.01em; } .mjl-kartu p{ color:var(--sl-teks-lembut); font-size:.88rem; margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .mjl-kartu-gbr{ overflow:hidden; aspect-ratio:16/10; margin-top:auto; border-radius:var(--slf-radius-md); box-shadow:var(--sl-bayang-sm); } .mjl-kartu-gbr img, .mjl-kartu-gbr .mjl-ubin{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--lengkung); } .mjl-kartu-kaki{ margin-top:12px; } .mjl-kartu:hover h3{ color:var(--sl-primer); } .mjl-kartu:hover .mjl-kartu-gbr img{ transform:scale(1.05); } /* Garis pemisah antar kolom. Dilepas pada kartu pertama SETIAP baris, jadi tidak ada garis menggantung di tepi kiri kisi -- jumlah kolomnya berubah per breakpoint, karena itu pola nth-child-nya juga ikut berubah. */ @media (min-width:576px){ .mjl-kisi > .mjl-kartu{ padding-left:26px; border-left:1px solid rgba(17,10,10,.09); } .mjl-kisi > .mjl-kartu:nth-child(2n+1){ padding-left:0; border-left:0; } } @media (min-width:992px){ .mjl-kisi > .mjl-kartu:nth-child(2n+1){ padding-left:30px; border-left:1px solid rgba(17,10,10,.09); } .mjl-kisi > .mjl-kartu:nth-child(3n+1){ padding-left:0; border-left:0; } } /* ------------------------------------------------------- AJAKAN (band) */ .mjl-cta{ border-radius:var(--slf-radius-lg); background:var(--sl-gradasi); color:#fff; padding:24px 20px; text-align:center; box-shadow:var(--sl-bayang-lg); } .mjl-cta h2{ color:#fff; font-size:clamp(1.15rem,5vw,1.7rem); margin:0 0 8px; } .mjl-cta p{ color:rgba(255,255,255,.86); margin:0 auto 16px; max-width:52ch; font-size:.92rem; } .mjl-cta-aksi{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } @media (min-width:768px){ .mjl-cta{ padding:34px 30px; } } /* Kumpulan kategori yang benar-benar terpakai. */ .mjl-tag{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; } .mjl-tag span{ font-size:.76rem; font-weight:700; color:var(--sl-primer); background:#fff; border:1px solid var(--sl-garis); border-radius:999px; padding:5px 12px; } /* --------------------------------------------- HALAMAN RINCIAN ARTIKEL */ .mjl-artikel{ max-width:740px; margin-inline:auto; } .mjl-artikel-gbr{ overflow:hidden; aspect-ratio:16/9; margin:0 0 22px; border-radius:var(--slf-radius-lg); box-shadow:var(--sl-bayang); } .mjl-artikel-gbr img, .mjl-artikel-gbr .mjl-ubin{ display:block; width:100%; height:100%; object-fit:cover; font-size:3rem; } .mjl-artikel h1{ font-size:clamp(1.5rem,6.5vw,2.4rem); line-height:1.2; margin:10px 0 10px; letter-spacing:-.02em; } .mjl-artikel-ringkas{ font-size:1.02rem; line-height:1.65; color:var(--sl-teks-lembut); padding:14px 0 16px; margin:0 0 18px; border-bottom:1px solid var(--sl-garis); } /* overflow-x seperti .isi-kaya: artikel boleh memuat tabel lebar dari admin. */ .mjl-isi{ font-size:1rem; line-height:1.8; color:var(--sl-teks); overflow-wrap:anywhere; overflow-x:auto; } .mjl-isi > :first-child{ margin-top:0; } .mjl-isi p{ margin:0 0 16px; } .mjl-isi h2, .mjl-isi h3{ margin:26px 0 10px; font-size:1.18rem; } .mjl-isi ul, .mjl-isi ol{ margin:0 0 16px; padding-left:22px; } .mjl-isi li{ margin-bottom:6px; } .mjl-isi table{ width:100%; border-collapse:collapse; margin-bottom:16px; font-size:.9rem; } .mjl-isi th, .mjl-isi td{ border:1px solid var(--sl-garis); padding:8px 10px; text-align:left; } .mjl-isi th{ background:var(--sl-latar); } .mjl-isi pre{ overflow-x:auto; padding:12px 14px; background:var(--sl-latar); border-radius:var(--slf-radius-md); font-size:.86rem; } .mjl-isi img{ max-width:100%; height:auto; border-radius:var(--slf-radius-md); } .mjl-isi blockquote{ margin:20px 0; padding:14px 18px; font-style:italic; border-left:3px solid var(--sl-primer); background:var(--sl-primer-lembut); border-radius:0 var(--slf-radius-md) var(--slf-radius-md) 0; } /* Catatan privasi Case Story. Bukan hiasan: pembaca perlu tahu bahwa cerita yang dibacanya sudah dibersihkan dari identitas pihak mana pun. */ .mjl-catatan{ display:flex; align-items:flex-start; gap:10px; margin:24px 0 0; padding:12px 14px; background:var(--sl-primer-lembut); border:1px solid var(--sl-garis); border-radius:var(--slf-radius-md); font-size:.84rem; line-height:1.55; color:var(--sl-teks-lembut); } .mjl-catatan i{ color:var(--sl-primer); flex:0 0 auto; margin-top:2px; } /* ========================================================================= LEGALITAS -- kartu nama advokat (setelah Tim Advokat) ------------------------------------------------------------------------- Satu kartu per advokat, dibaca dari tabel `tim`, mengikuti kartu nama acuan: .legal-atas -- gelap: foto bulat + nama lembaga (kiri), nama advokat, garis merah, jabatan (kanan) .legal-bawah -- putih: tiga kolom dipisah garis merah tegak -- kontak, nomor izin, alamat kantor resmi ::after -- pita merah di dasar dengan satu garis putih di dalamnya SATU kartu per layar di semua ukuran: dua kartu berdampingan memaksa nomor PERADI yang panjang terpecah. Geser sendiri: site.js (siapkanLegal). ========================================================================= */ .legal-jalur{ position:relative; } /* Padding bawah sengaja lega: overflow-x:auto MEMOTONG bayangan kartu tepat di batas padding, dan dengan padding sempit bayangan itu tercetak sebagai pita terang bertepi keras di bawah kartu. */ .legal-geser{ list-style:none; margin:0 0 -14px; padding:6px 2px 32px; display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .legal-geser::-webkit-scrollbar{ display:none; width:0; height:0; } .legal-geser:focus-visible{ outline:2px solid var(--sl-primer); outline-offset:4px; border-radius:18px; } .legal-item{ flex:0 0 100%; scroll-snap-align:center; display:flex; justify-content:center; } .legal-kartu{ --legal-merah:#E3242B; --legal-gelap:#202526; position:relative; width:100%; max-width:920px; display:flex; flex-direction:column; overflow:hidden; /* Radius disamakan dengan .tim-kartu di bagian atasnya: 22px, lalu 26px mulai 992px -- dua bagian bertetangga dengan sudut berbeda terbaca seperti dua sistem desain. */ background:#fff; border-radius:22px; box-shadow:0 14px 24px -16px rgba(15,23,42,.55); /* Ruang untuk pita dasar. */ padding-bottom:30px; } /* Pita dasar: merah - garis putih tipis - merah lebih tebal, seperti acuan. */ .legal-kartu::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:30px; background:linear-gradient(180deg, var(--legal-merah) 0, var(--legal-merah) 8px, #fff 8px, #fff 11px, #C81E24 11px, #C81E24 100%); } /* ---- Bagian atas (gelap) ---- */ .legal-atas{ background:var(--legal-gelap); color:#fff; display:flex; flex-direction:column; gap:18px; padding:22px 20px 24px; } .legal-lembaga{ display:flex; align-items:center; gap:14px; min-width:0; } .legal-foto{ flex:0 0 auto; width:68px; height:68px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; /* Foto advokat umumnya potret berlatar transparan: sorot merah di belakangnya. */ background:radial-gradient(circle at 50% 38%, #FF6B57 0%, var(--legal-merah) 48%, #B3261E 100%); } .legal-foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; } .legal-inisial{ color:#fff; font-weight:800; font-size:1.4rem; letter-spacing:.02em; } .legal-lembaga-teks{ display:flex; flex-direction:column; min-width:0; line-height:1.1; } .legal-lembaga-teks b{ font-size:1.45rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; overflow-wrap:anywhere; } .legal-lembaga-teks span{ margin-top:4px; font-size:.95rem; color:var(--legal-merah); font-weight:600; } .legal-orang{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; } .legal-nama-advokat{ margin:0; color:#fff; font-size:1.35rem; font-weight:600; line-height:1.15; letter-spacing:.05em; text-transform:uppercase; overflow-wrap:anywhere; } .legal-garis{ display:block; width:100%; height:3px; margin:10px 0 8px; background:var(--legal-merah); } .legal-jabatan{ font-size:.9rem; font-weight:600; color:var(--legal-merah); letter-spacing:.06em; text-transform:uppercase; } /* ---- Bagian bawah (putih, tiga kolom) ---- */ .legal-bawah{ display:grid; grid-template-columns:1fr; padding:6px 20px 14px; color:#1f2937; } .legal-kolom{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; } /* Di HP kolom tersusun ke bawah, dipisah garis merah MENDATAR. */ .legal-kolom + .legal-kolom{ border-top:2px solid var(--legal-merah); } .legal-ikon{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--legal-merah); color:#fff; font-size:1.1rem; } .legal-kolom-isi{ display:flex; flex-direction:column; gap:3px; min-width:0; font-size:.92rem; line-height:1.4; } .legal-kolom-isi a{ color:#1f2937; text-decoration:none; overflow-wrap:anywhere; } .legal-kolom-isi a:hover{ color:var(--legal-merah); } .legal-kolom-isi small{ font-size:.74rem; color:#6b7280; font-weight:600; } .legal-kolom-label{ text-transform:uppercase; letter-spacing:.08em; color:var(--legal-merah) !important; } .legal-izin{ font-weight:600; letter-spacing:.01em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; } /* Isian yang belum diisi admin: tetap tampil, tetapi redup dan miring, supaya tidak pernah terbaca sebagai nomor atau alamat sungguhan. */ .legal-izin-kosong{ color:#9ca3af; font-style:italic; } .legal-arah{ margin-top:2px; font-size:.8rem; font-weight:700; color:var(--legal-merah) !important; } /* Mulai 768px: tata letak kartu nama sepenuhnya -- atas dua sisi, bawah tiga kolom rata tengah dengan garis merah TEGAK di antaranya. */ @media (min-width:768px){ .legal-kartu{ padding-bottom:36px; } .legal-kartu::after{ height:36px; background:linear-gradient(180deg, var(--legal-merah) 0, var(--legal-merah) 10px, #fff 10px, #fff 13px, #C81E24 13px, #C81E24 100%); } .legal-atas{ flex-direction:row; align-items:center; justify-content:space-between; gap:28px; padding:34px 40px 38px; } .legal-foto{ width:84px; height:84px; } .legal-lembaga{ gap:18px; } .legal-lembaga-teks b{ font-size:1.9rem; } .legal-lembaga-teks span{ font-size:1.05rem; } .legal-orang{ align-items:flex-end; text-align:right; flex:0 1 46%; } .legal-nama-advokat{ font-size:1.7rem; } .legal-garis{ margin:12px 0 10px; } .legal-jabatan{ font-size:1rem; } /* Kolom tengah lebih lebar, seperti acuan: nomor PERADI yang panjang (mis. "No. 07-04085/PERADI-PUPA/VIII/23") harus muat SATU baris. */ .legal-bawah{ grid-template-columns:1fr 1.35fr 1fr; padding:22px 16px 24px; } .legal-kolom{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding:6px 18px; } .legal-kolom + .legal-kolom{ border-top:0; border-left:2px solid var(--legal-merah); } .legal-kolom-isi{ align-items:center; } .legal-ikon{ width:50px; height:50px; font-size:1.3rem; } .legal-kolom-isi{ font-size:.98rem; } } @media (min-width:992px){ .legal-kartu{ border-radius:26px; } } /* Titik penanda kartu aktif. */ .legal-titik{ display:flex; justify-content:center; gap:4px; margin-top:8px; } .legal-titik button{ width:28px; height:28px; border:none; background:transparent; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .legal-titik button::before{ content:''; width:8px; height:8px; border-radius:999px; background:var(--sl-primer-cerah); transition:width .3s var(--lengkung), background .3s ease; } .legal-titik button[aria-current="true"]::before{ width:22px; background:var(--sl-primer); } /* Legal Disclaimer: satu pernyataan untuk seluruh bagian, di bawah kartu. */ .legal-disclaimer{ display:flex; gap:14px; align-items:flex-start; max-width:920px; margin:18px auto 0; padding:16px 18px; background:#fff; border-left:4px solid var(--sl-primer); border-radius:var(--slf-radius-md); box-shadow:var(--sl-bayang-sm); } .legal-disclaimer > i{ color:var(--sl-primer); font-size:1.4rem; line-height:1; margin-top:2px; } .legal-disclaimer b{ display:block; font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; } .legal-disclaimer p{ margin:0; font-size:.86rem; line-height:1.6; color:var(--sl-teks-lembut); } @media (prefers-reduced-motion: reduce){ .legal-geser{ scroll-behavior:auto; } } /* ========================================================================= DOKUMEN PUBLIK (/dokumen) + TAB CARI DI TEPI KIRI BERANDA ========================================================================= */ /* Rak dokumen: judul merah + catatan miring di kiri, kotak cari berbentuk pil di kanan; tiap kelompok = judul bergaris merah + panel abu berisi sampul dan tombol pil bernama berkas. */ .dok-halaman{ --dok-panel:#f2f2f2; --dok-cari:#d9d9d9; --dok-cari-tombol:#8ecdf0; } .dok-kepala{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin-bottom:18px; } .dok-judul h1{ margin:0; color:var(--sl-primer); font-size:clamp(1.3rem, 1.05rem + 1vw, 1.65rem); font-weight:800; letter-spacing:-.01em; } .dok-catatan{ margin:2px 0 0; font-size:.66rem; font-weight:700; font-style:italic; color:var(--sl-teks); } .dok-cari{ position:relative; flex:0 1 364px; display:flex; align-items:center; margin:0; } .dok-cari input{ width:100%; height:36px; padding:0 48px 0 18px; border:0; border-radius:999px; outline:0; background:var(--dok-cari); color:var(--sl-teks); font:inherit; font-size:.82rem; transition:box-shadow .2s ease; } .dok-cari input::placeholder{ color:#3a3a3a; opacity:1; } .dok-cari input:focus{ box-shadow:0 0 0 3px rgba(var(--sl-bayang-rgb),.18); } .dok-cari input::-webkit-search-cancel-button{ margin-right:4px; } .dok-cari button{ position:absolute; right:-2px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--dok-cari-tombol); color:#fff; font-size:1.15rem; cursor:pointer; transition:transform .2s var(--lengkung), filter .2s ease; } .dok-cari button:hover, .dok-cari button:focus-visible{ transform:translateY(-50%) scale(1.07); filter:brightness(.94); } .dok-kelompok{ margin-top:14px; } .dok-kelompok + .dok-kelompok{ margin-top:26px; } .dok-kelompok-judul{ margin:0 0 0 2px; font-size:.98rem; font-weight:700; color:var(--sl-teks); } .dok-kelompok-judul::after{ content:''; display:block; width:162px; max-width:60%; height:3px; margin-top:5px; background:var(--sl-primer); border-radius:2px; } .dok-rak{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 14px; padding:14px 14px 18px; background:var(--dok-panel); } @media (min-width:576px){ .dok-rak{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } @media (min-width:768px){ .dok-rak{ grid-template-columns:repeat(4, minmax(0, 1fr)); padding:12px 24px 18px; } } @media (min-width:992px){ .dok-rak{ grid-template-columns:repeat(5, minmax(0, 1fr)); gap:18px 26px; } } .dok-item{ display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0; } .dok-sampul{ position:relative; display:block; width:clamp(78px, 58%, 104px); aspect-ratio:3 / 4; box-shadow:3px 4px 8px rgba(0,0,0,.28); background:#fff; transition:transform .25s var(--lengkung), box-shadow .25s ease; } a.dok-sampul:hover{ transform:translateY(-4px); box-shadow:4px 9px 14px rgba(0,0,0,.26); } .dok-sampul img{ display:block; width:100%; height:100%; object-fit:cover; } /* Sampul tiruan saat admin belum mengunggah gambar: kulit buku bernada kelompok, judul dipangkas lima baris, garis punggung di kiri. */ .dok-sampul-tiruan{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:9px 7px 7px 11px; overflow:hidden; color:#fff; background:linear-gradient(160deg, var(--st-1) 0%, var(--st-2) 100%); } .dok-sampul-tiruan::before{ content:''; position:absolute; left:4px; top:0; bottom:0; width:2px; background:rgba(255,255,255,.35); } .dok-sampul-tiruan b{ font-size:.56rem; line-height:1.25; font-weight:800; text-transform:uppercase; letter-spacing:.02em; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; } .dok-sampul-tiruan small{ font-size:.48rem; font-weight:700; opacity:.85; } .dok-sampul-tiruan.nada-a{ --st-1:#b3261e; --st-2:#6e1410; } .dok-sampul-tiruan.nada-b{ --st-1:#2e7d32; --st-2:#174a1a; } .dok-sampul-tiruan.nada-c{ --st-1:#1565c0; --st-2:#0b3a73; } .dok-sampul-tiruan.nada-d{ --st-1:#ef6c00; --st-2:#9a3f00; } .dok-sampul-tiruan:not(.nada-a):not(.nada-b):not(.nada-c):not(.nada-d){ --st-1:#455a64; --st-2:#1f2a30; } .dok-lencana{ position:absolute; top:6px; right:-6px; padding:2px 7px; border-radius:999px; background:#f5b301; color:#3b2a00; font-size:.56rem; font-weight:800; box-shadow:0 2px 5px rgba(0,0,0,.25); } .dok-pil{ display:inline-flex; align-items:center; justify-content:center; gap:5px; width:100%; max-width:138px; min-height:28px; padding:0 12px; border-radius:999px; background:var(--sl-primer); color:#fff; font-size:.7rem; font-weight:700; text-decoration:none; transition:background .2s ease, transform .2s var(--lengkung); } .dok-pil span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } a.dok-pil:hover, a.dok-pil:focus-visible{ background:var(--sl-primer-gelap); color:#fff; transform:translateY(-2px); } .dok-pil-mati{ background:#b9b9b9; cursor:default; } .dok-kosong{ margin-top:24px; } .dok-kelompok[hidden], .dok-item[hidden], .dok-kosong[hidden]{ display:none; } @media (max-width:575.98px){ .dok-cari{ flex-basis:100%; } .dok-pil{ min-height:34px; } } /* -- Tab cari: cermin tombol advokat, menempel di tepi KIRI --------------- */ /* Tembus pandang supaya judul hero di belakangnya tetap terbaca (di HP tab ini berdiri tepat di atas teks hero); pekat hanya saat disentuh/disorot. Selama halaman digulir ia bergeser keluar tepi kiri, dan kembali setelah guliran berhenti -- site.js memasang html[data-gulir] untuk itu. */ .cari-pemicu{ position:fixed; left:env(safe-area-inset-left, 0px); top:calc(var(--tinggi-kepala) + 64px); z-index:1040; width:42px; padding:13px 0; border:1px solid rgba(255,255,255,.35); border-left:0; border-radius:0 14px 14px 0; background:color-mix(in srgb, var(--sl-primer) 42%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:1.1rem; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .3s var(--lengkung), background .2s ease, opacity .3s ease; } @supports not (background:color-mix(in srgb, red 50%, transparent)){ .cari-pemicu{ background:rgba(192,57,43,.45); } } .cari-pemicu:hover, .cari-pemicu:focus-visible{ background:var(--sl-primer); transform:translateX(3px); } html[data-gulir] .cari-pemicu{ transform:translateX(-110%); opacity:0; pointer-events:none; } .cari-pemicu[aria-expanded="true"]{ opacity:0; visibility:hidden; pointer-events:none; } /* Di bawah 992px tab ini tidak dipakai sama sekali: pemicunya pindah ke navbar (.tombol-cari-nav, sebelum ikon menu), supaya tidak ada keping melayang di atas judul hero. */ @media (max-width:991.98px){ .cari-pemicu{ display:none; } } .cari-tirai{ position:fixed; inset:0; z-index:1065; background:rgba(15,23,42,.45); opacity:0; transition:opacity .3s ease; } .cari-tirai.tampil{ opacity:1; } .cari-tirai[hidden]{ display:none; } .cari-laci{ position:fixed; top:0; bottom:0; left:0; z-index:1070; width:min(400px, 92vw); background:#fff; box-shadow:var(--sl-bayang-lg); display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .34s var(--lengkung), visibility .34s; visibility:hidden; } .cari-laci.buka{ transform:translateX(0); visibility:visible; } .cari-kepala{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 16px 12px; background:var(--sl-permukaan-2); } .cari-kepala h2{ font-size:1.1rem; margin:2px 0 0; } .cari-form{ padding:12px 16px; background:var(--sl-permukaan-2); border-bottom:1px solid var(--sl-garis); } .cari-form .dok-cari{ min-height:48px; } .cari-isi{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:12px 10px; } .cari-status{ margin:4px 6px 10px; font-size:.84rem; color:var(--sl-teks-lembut); } .cari-hasil{ list-style:none; margin:0; padding:0; } .cari-butir{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:14px; color:var(--sl-teks); text-decoration:none; transition:background .2s ease; } a.cari-butir:hover, a.cari-butir:focus-visible{ background:var(--sl-permukaan-2); color:var(--sl-teks); } .cari-butir.belum{ opacity:.7; } .cari-butir .dok-nomor{ flex:0 0 32px; width:32px; height:32px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.82rem; background:rgba(var(--sl-bayang-rgb),.08); color:var(--sl-primer); } .cari-butir > i{ color:var(--sl-primer); flex:0 0 auto; } .cari-teks{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .cari-teks b{ font-size:.9rem; font-weight:600; line-height:1.4; } .cari-teks small{ font-size:.76rem; color:var(--sl-teks-lembut); } .cari-semua{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; margin:0; border-top:1px solid var(--sl-garis); color:var(--sl-primer); font-weight:700; text-decoration:none; padding-bottom:env(safe-area-inset-bottom, 0px); } .cari-semua:hover{ background:var(--sl-permukaan-2); color:var(--sl-primer-gelap); } @media (prefers-reduced-motion: reduce){ .cari-laci, .cari-tirai, .cari-pemicu, .dok-buka{ transition:none; } } /* Jarak navbar ke judul serapat rujukan desain rak dokumen. */ .bagian.dok-halaman{ padding-top:22px; } /* ========================================================================= TANYA BANTUAN HUKUM: modal obrolan ========================================================================= */ .tanya-tirai{ position:fixed; inset:0; z-index:1072; background:rgba(15,23,42,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .22s ease; } .tanya-tirai.tampil{ opacity:1; } .tanya-tirai[hidden], .tanya-modal[hidden]{ display:none; } /* HP: lembaran bawah (zona jempol). Desktop: kartu di tengah. */ .tanya-modal{ position:fixed; z-index:1075; left:0; right:0; bottom:0; display:flex; justify-content:center; padding:0 0 env(safe-area-inset-bottom, 0px); pointer-events:none; } .tanya-kartu{ pointer-events:auto; width:100%; max-height:min(88dvh, 720px); display:flex; flex-direction:column; background:#fff; border:1px solid #e6e8f0; border-radius:26px 26px 0 0; box-shadow:0 -12px 40px -16px rgba(15,23,42,.35); transform:translateY(24px); opacity:0; transition:transform .26s var(--lengkung), opacity .22s ease; } .tanya-modal.tampil .tanya-kartu{ transform:none; opacity:1; } @media (min-width:576px){ .tanya-modal{ top:0; align-items:center; padding:24px; } .tanya-kartu{ max-width:640px; border-radius:32px; box-shadow:0 30px 70px -30px rgba(15,23,42,.45); } } /* Percakapan: tersembunyi sampai ada isi, supaya keadaan awal serapat rancangan. */ .tanya-isi{ display:none; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 20px 6px; gap:10px; flex-direction:column; } .tanya-modal.berisi .tanya-isi{ display:flex; } .tanya-isi .asisten-saran{ margin-top:2px; } .tanya-isi .asisten-saran[hidden]{ display:none; } .tanya-form{ padding:18px 20px 12px; } .tanya-form[hidden]{ display:none; } .tanya-kotak{ display:flex; align-items:flex-start; gap:12px; } .tanya-kotak textarea{ flex:1; min-width:0; resize:none; border:0; outline:0; background:transparent; font:inherit; font-size:1.15rem; line-height:1.45; color:var(--sl-teks); padding:8px 2px; max-height:132px; } .tanya-kotak textarea::placeholder{ color:#4b5563; opacity:.85; } .tanya-tutup{ flex:0 0 auto; width:44px; height:44px; border:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#4b5563; color:#fff; font-size:1rem; cursor:pointer; transition:transform .2s var(--lengkung), background .2s ease; } .tanya-tutup:hover, .tanya-tutup:focus-visible{ background:#374151; transform:rotate(90deg); } .tanya-alat{ display:flex; align-items:center; gap:14px; margin-top:18px; } .tanya-ikon{ width:44px; height:44px; border:0; border-radius:12px; background:transparent; display:inline-flex; align-items:center; justify-content:center; color:#374151; font-size:1.45rem; cursor:pointer; transition:background .2s ease, transform .2s var(--lengkung); } .tanya-ikon-merah{ color:var(--sl-primer); font-size:1.7rem; } .tanya-ikon:hover, .tanya-ikon:focus-visible{ background:var(--sl-permukaan-2); } .tanya-ikon[aria-expanded="true"]{ background:rgba(var(--sl-bayang-rgb),.1); color:var(--sl-primer); } .tanya-sisa{ margin-left:auto; font-size:.78rem; color:var(--sl-teks-lembut); white-space:nowrap; } .tanya-sisa b{ color:var(--sl-teks); } .tanya-sisa.menipis b{ color:var(--sl-primer); } .tanya-sisa[hidden] + .tanya-kirim{ margin-left:auto; } .tanya-kirim{ width:52px; height:52px; border:0; border-radius:50%; background:transparent; display:inline-flex; align-items:center; justify-content:center; color:var(--sl-primer); font-size:1.9rem; cursor:pointer; transition:transform .2s var(--lengkung), color .2s ease; } .tanya-kirim:hover, .tanya-kirim:focus-visible{ transform:translate(2px,-2px); color:var(--sl-primer-gelap); } .tanya-kirim:disabled{ opacity:.45; cursor:progress; transform:none; } .tanya-catatan{ margin:10px 2px 0; font-size:.72rem; color:var(--sl-teks-lembut); } .tanya-habis{ padding:18px 20px 20px; border-top:1px solid var(--sl-garis); text-align:center; } .tanya-habis[hidden]{ display:none; } .tanya-habis p{ margin:0 0 14px; font-size:.92rem; color:var(--sl-teks); } .tanya-habis-aksi{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .tanya-habis-aksi .btn-sl{ min-height:44px; } @media (max-width:575.98px){ .tanya-form{ padding:14px 16px 10px; } /* Dua baris: placeholder "Tanyakan dengan ..." tidak muat satu baris di 360-390px, dan satu baris memotongnya di tengah huruf. */ .tanya-kotak textarea{ font-size:1rem; min-height:3em; } .tanya-alat{ gap:8px; margin-top:12px; } .tanya-isi{ padding:16px 16px 4px; } } @media (prefers-reduced-motion: reduce){ .tanya-kartu, .tanya-tirai, .tanya-tutup, .tanya-kirim{ transition:none; } }