/*
Theme Name: SISI Law Office
Theme URI: https://sisilaw.co.id
Author: SISI Law Office
Description: Tema klasik untuk kantor hukum SISI Law Office. Rupa editorial: latar bone dominan, judul Cormorant Garamond, naskah Source Serif, aksen brass sebagai garis rambut. Navigasi berupa laci satu layar penuh. Seluruh keterangan kantor disunting lewat Tampilan lalu Sesuaikan, dan susunan halaman disunting lewat editor blok memakai pola bawaan tema.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sisi
Tags: business, portfolio, one-column, custom-logo, custom-menu, editor-style, block-patterns, translation-ready
*/
/* ==========================================================================
1. Peubah dan dasar
========================================================================== */
:root{
--navy:#00234B; --brass:#B48D3E; --bone:#FBF8F3; --bone-d:#F4F0E9;
--charcoal:#1C1C1C; --slate:#6E7885; --line:#DCD7CC;
--serif:"Cormorant Garamond",Georgia,serif;
--sans:"Inter",Arial,Helvetica,sans-serif;
--text:"Source Serif 4","Times New Roman",serif;
--max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--navy);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.narrow{max-width:760px;margin:0 auto;padding:0 40px}
.mid{max-width:960px;margin:0 auto;padding:0 40px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--navy);color:var(--bone);padding:12px 20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--bone-d);padding:1px 5px;border:1px solid var(--line)}
/* bilah admin tidak boleh menimpa header lengket */
.admin-bar header{top:32px}
@media screen and (max-width:782px){.admin-bar header{top:46px}}
/* ==========================================================================
2. Tipografi
========================================================================== */
.label{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
h1,h2{font-family:var(--serif);font-weight:300;line-height:1.08}
h1{font-size:clamp(42px,6vw,76px)}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.14}
h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2}
h4,h5,h6{font-family:var(--serif);font-weight:400;line-height:1.25}
h4{font-size:20px}h5{font-size:17px}h6{font-size:15px}
/* "hr.rule" berkekhususan lebih tinggi daripada ".rule--c", jadi aturan
penengah harus ikut memakai selektor elemen supaya tidak kalah. */
hr.rule,.rule,.wp-block-separator.rule{width:104px;height:1px;background:var(--brass);border:0;border-top:0;margin:24px 0;opacity:1}
hr.rule--c,.rule--c,.wp-block-separator.rule--c{margin-left:auto;margin-right:auto}
.prose{font-family:var(--text);font-size:18px;line-height:1.8;color:var(--charcoal)}
.prose + .prose{margin-top:20px}
.lead{font-family:var(--text);font-size:19px;line-height:1.7;color:var(--charcoal)}
.btn,.wp-block-button__link{display:inline-block;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--navy);border-radius:0;color:var(--navy);background:transparent;transition:.18s;cursor:pointer}
.btn:hover,.wp-block-button__link:hover{background:var(--navy);color:var(--bone)}
.btn--ghost{border-color:var(--line);color:var(--slate)}
.btn--ghost:hover{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--rev{border-color:var(--bone);color:var(--bone)}
.btn--rev:hover{background:var(--bone);color:var(--navy)}
.cta{margin-top:48px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta--left{justify-content:flex-start}
/* ==========================================================================
3. Kepala halaman dan laci navigasi
========================================================================== */
header{border-bottom:1px solid var(--line);background:var(--bone);position:sticky;top:0;z-index:70;transition:background .3s,border-color .3s}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
.nav__logo img{height:30px;width:auto}
.nav__logo .logo--light{display:none}
.nav__logo .custom-logo{height:30px;width:auto}
.nav__right{display:flex;align-items:center;gap:20px}
.tel{font-size:11px;letter-spacing:.08em;color:var(--navy);border:1px solid var(--line);padding:10px 16px;white-space:nowrap;transition:.2s}
.tel:hover{border-color:var(--brass)}
.burger{display:flex;align-items:center;gap:12px;background:none;border:0;padding:10px 0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);transition:color .3s}
.burger__lines{display:block;width:22px}
.burger__lines i{display:block;height:1px;background:var(--navy);transition:transform .28s,background .3s}
.burger__lines i + i{margin-top:6px}
.burger:hover .burger__label{color:var(--brass)}
body.nav-open{overflow:hidden}
body.nav-open header{background:transparent;border-bottom-color:transparent}
body.nav-open .nav__logo .logo--dark,body.nav-open .nav__logo .custom-logo{display:none}
body.nav-open .nav__logo .logo--light{display:block}
body.nav-open .burger{color:var(--bone)}
body.nav-open .burger__lines i{background:var(--bone)}
body.nav-open .burger__lines i:first-child{transform:translateY(3.5px) rotate(45deg)}
body.nav-open .burger__lines i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
body.nav-open .tel{color:var(--bone);border-color:rgba(251,248,243,.32)}
body.nav-open .tel:hover{border-color:var(--brass)}
.drawer{position:fixed;inset:0;z-index:60;background:var(--navy);color:var(--bone);overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .32s ease,visibility .32s ease}
.drawer.open{visibility:visible;opacity:1}
.drawer__motif{position:absolute;right:-160px;bottom:-200px;width:520px;opacity:.07;pointer-events:none}
.drawer__inner{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:56px}
/* daftar menu datang dari Tampilan lalu Menu; angkanya dihitung oleh CSS */
.drawer__menu{list-style:none;counter-reset:butir}
.drawer__menu li{counter-increment:butir;border-top:1px solid rgba(255,255,255,.12)}
.drawer__menu li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.drawer__menu a{display:flex;align-items:baseline;gap:26px;padding:24px 0;font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.6vw,54px);line-height:1.1;transition:color .2s,padding-left .2s}
.drawer__menu a::before{content:counter(butir,decimal-leading-zero);font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--brass);flex:none;width:26px}
.drawer__menu a:hover{color:var(--brass);padding-left:14px}
.drawer__menu .current-menu-item > a,.drawer__menu .current_page_item > a{color:var(--brass)}
.drawer__menu .sub-menu{list-style:none;padding-left:52px}
.drawer__menu .sub-menu a{font-size:20px;padding:12px 0}
.drawer__menu .sub-menu a::before{content:none}
.drawer__menu li{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.drawer.open .drawer__menu li{opacity:1;transform:none}
.drawer.open .drawer__menu li:nth-child(1){transition-delay:.06s}
.drawer.open .drawer__menu li:nth-child(2){transition-delay:.12s}
.drawer.open .drawer__menu li:nth-child(3){transition-delay:.18s}
.drawer.open .drawer__menu li:nth-child(4){transition-delay:.24s}
.drawer.open .drawer__menu li:nth-child(5){transition-delay:.3s}
.drawer__foot{display:grid;grid-template-columns:repeat(3,auto);gap:48px;justify-content:start;margin-top:56px;font-size:13px;line-height:1.6;color:#B9C4D2}
.drawer__foot dt{font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.drawer__foot a:hover{color:var(--bone)}
@media(prefers-reduced-motion:reduce){
.drawer,.drawer__menu li,.burger__lines i,header{transition:none}
.drawer__menu li{transform:none}
}
/* ==========================================================================
4. Pembuka halaman
========================================================================== */
.hero{padding:120px 0 96px;text-align:center;position:relative;overflow:hidden}
.hero--full{min-height:calc(100vh - 81px);display:flex;flex-direction:column;justify-content:center;padding:96px 0}
.hero .lock{width:132px;margin:0 auto 48px}
.hero h1{max-width:16ch;margin:0 auto}
.hero .lead{max-width:60ch;margin:0 auto}
.motif{position:absolute;left:-190px;top:-90px;width:380px;opacity:.05;pointer-events:none;z-index:-1}
.page-hero{padding:88px 0 72px;text-align:center;position:relative;overflow:hidden}
.crumb{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:28px}
.crumb a:hover{color:var(--navy)}
.crumb b,.crumb .sekarang{font-weight:400;color:var(--brass)}
.page-hero h1{font-size:clamp(38px,5vw,64px);max-width:18ch;margin:0 auto}
.page-hero .lead{max-width:62ch;margin:0 auto}
.meta-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta-strip .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;padding-top:24px;padding-bottom:24px}
.meta-strip .wrap > *,.meta-strip span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-family:var(--sans);line-height:1.5;margin:0}
.meta-strip b,.meta-strip strong{font-weight:600;color:var(--brass)}
.meta-strip a:hover{color:var(--navy)}
section{padding:112px 0}
.sec-head{text-align:center;margin-bottom:72px}
.sec-head .label{display:block;margin-bottom:20px}
.sec-head .lead{max-width:62ch;margin:0 auto;font-size:17px}
/* ==========================================================================
5. Isi halaman dari editor blok
========================================================================== */
.entry-content > *{margin-bottom:28px}
.entry-content > *:last-child{margin-bottom:0}
.entry-content p{font-family:var(--text);font-size:18px;line-height:1.8;color:var(--charcoal)}
.entry-content h2{margin-top:56px}
.entry-content h3{margin-top:40px}
.entry-content ul,.entry-content ol{padding-left:22px;font-family:var(--text);font-size:18px;line-height:1.8;color:var(--charcoal)}
.entry-content li{margin-bottom:8px}
.entry-content a{border-bottom:1px solid var(--brass)}
.entry-content a:hover{color:var(--brass)}
.entry-content blockquote{border-left:1px solid var(--brass);padding-left:28px;font-family:var(--serif);font-size:26px;line-height:1.35;color:var(--navy)}
.entry-content figcaption,.wp-element-caption{font-size:12px;letter-spacing:.04em;color:var(--slate);margin-top:10px;text-align:left}
.entry-content img{border-radius:0}
.alignwide{max-width:var(--max);margin-left:auto;margin-right:auto}
.alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.alignleft{float:left;margin:0 32px 24px 0}
.alignright{float:right;margin:0 0 24px 32px}
.wp-block-buttons{display:flex;gap:16px;flex-wrap:wrap;list-style:none}
.wp-block-separator{border:0;height:1px;background:var(--line);max-width:none}
.wp-block-separator.is-style-dots{background:none}
/* naskah dua kolom */
.editorial{font-family:var(--text);font-size:18px;line-height:1.8;color:var(--charcoal);columns:2;column-gap:64px}
.editorial p{margin-bottom:20px;break-inside:avoid}
/* ==========================================================================
6. Kartu, daftar, dan tabel
========================================================================== */
/* Inti kisi. Aturan margin-block-start dimatikan karena WordPress menyisipkan
jarak antar blok dalam Grup, yang akan merusak jarak kisi di bawah ini. */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr);gap:64px}
.cards > *,.notes > *,.three > *,.card > *{margin-block-start:0!important;margin-bottom:0}
.card{position:relative;display:flex;flex-direction:column}
.card > * + *{margin-top:14px}
.card__n{font-family:var(--sans)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)!important;line-height:1.4}
.card__t{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.22;color:var(--navy);margin-top:12px}
.card__d{font-size:15px!important;line-height:1.65!important;color:var(--slate)!important;font-family:var(--sans)!important}
.card__go{font-size:11px!important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)!important;font-family:var(--sans)!important;margin-top:20px}
.card__go a{display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid var(--brass);padding-bottom:5px}
.card__go a:hover{color:var(--navy)}
.card__go a::after{content:"";width:15px;height:15px;flex:none;background:currentColor;transition:transform .18s;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.card__go a:hover::after{transform:translateX(4px)}
/* Tautan tak terlihat yang menutupi seluruh kartu, supaya kartu dapat ditekan
di mana saja tanpa membuat judulnya menjadi dua tautan bersarang. */
.card__link{position:absolute;inset:0;z-index:3}
.card__link:focus-visible{outline:1px solid var(--brass);outline-offset:6px}
.card--plain .card__go{border-bottom-color:var(--line);color:var(--slate)}
.card figure,.card .wp-block-image{margin:0 0 26px}
/* Ruang foto bertanda. Dipakai bila Gambar Unggulan belum diunggah, supaya
jelas terlihat bagian mana yang masih kosong beserta ukuran yang diminta. */
.slot{aspect-ratio:1/1;background:#EDE8DF;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;margin-bottom:26px}
.slot::before{content:"";position:absolute;inset:10px;border:1px dashed #C6BFB1}
.slot::after{content:"";position:absolute;inset:10px;opacity:.4;background:
linear-gradient(to bottom right,transparent calc(50% - .5px),#C6BFB1 50%,transparent calc(50% + .5px)),
linear-gradient(to bottom left,transparent calc(50% - .5px),#C6BFB1 50%,transparent calc(50% + .5px))}
.slot__t{position:relative;z-index:2;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8C8474;background:#EDE8DF;padding:6px 10px;max-width:92%}
.slot__d{position:relative;z-index:2;font-size:9px;letter-spacing:.1em;color:#A39A85;background:#EDE8DF;padding:0 10px 5px}
.slot--wide{aspect-ratio:16/10}
.card .slot{margin-bottom:26px!important}
/* Ruang potret partner, berlatar navy sesuai panduan merek. */
.pf{background:var(--navy);aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;position:relative;overflow:hidden;margin:0}
.pf::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(180,141,62,.45)}
.pf__t{position:relative;z-index:2;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,243,.62)}
.pf__d{position:relative;z-index:2;font-size:9px;letter-spacing:.1em;color:rgba(251,248,243,.4);margin-top:6px}
.card figure img{width:100%}
/* daftar bernomor */
.list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:80px 1fr 1.2fr;gap:40px;align-items:baseline;padding:40px 0;border-bottom:1px solid var(--line);transition:.2s}
.row:hover{background:rgba(180,141,62,.045)}
.row > *{margin-block-start:0!important;margin-bottom:0}
.row .n{font-family:var(--sans)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.14em;color:var(--brass)!important}
.row p{font-size:15px!important;color:var(--slate)!important;line-height:1.65!important;font-family:var(--sans)!important}
.row h3{margin:0}
/* partner */
.person{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:center;padding:64px 0;border-bottom:1px solid var(--line)}
.person:first-of-type{border-top:1px solid var(--line)}
.person > *{margin-block-start:0!important;margin-bottom:0}
.person figure,.person .wp-block-image{margin:0}
.p-role{font-family:var(--sans)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)!important;margin-bottom:16px}
.p-name{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.15;margin:0 0 20px}
.p-bio{font-family:var(--text)!important;font-size:17px!important;line-height:1.75!important;color:var(--charcoal)!important;max-width:56ch}
.p-tags{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;font-size:11px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)!important;font-family:var(--sans)!important}
.p-list{list-style:none;margin-top:28px;font-size:14px;color:var(--slate);max-width:56ch}
.p-list li{padding:12px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:132px 1fr;gap:16px}
.p-list b{font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.p-list a{border-bottom:1px solid var(--brass)}
.p-list a:hover{color:var(--brass)}
/* kutipan navy */
.quote{background:var(--navy);color:var(--bone);text-align:center;position:relative;overflow:hidden;padding:112px 0}
.quote blockquote,.quote .kutip{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.6vw,44px);line-height:1.25;max-width:22ch;margin:0 auto;border:0;padding:0;color:var(--bone)}
.quote cite,.quote .sumber{display:block;font-family:var(--sans);font-style:normal;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-top:36px}
.quote .side{font-size:15px;color:#C9D2DE;line-height:1.75;max-width:56ch;margin:40px auto 0;padding-top:32px;border-top:1px solid rgba(180,141,62,.5)}
.quote .motif{left:auto;right:-140px;top:-100px;opacity:.08;width:460px;z-index:0}
.quote .narrow,.quote .mid,.quote .wrap{position:relative;z-index:2}
/* tiga butir */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.three h3{margin:16px 0 14px}
.three p{font-size:15px!important;color:var(--slate)!important;font-family:var(--sans)!important;line-height:1.65!important}
/* catatan */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.note{border-top:1px solid var(--brass);padding-top:24px;position:relative;display:flex;flex-direction:column}
.note .m{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:600;margin-bottom:14px}
.note h3{font-size:20px;line-height:1.28}
.note h3 a:hover{color:var(--brass)}
.note p{font-size:15px;color:var(--slate);line-height:1.65;margin-top:14px}
.note .go{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--brass);padding-bottom:4px;align-self:flex-start}
.note img{margin-bottom:20px}
/* saring kategori catatan */
.filter{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}
.filter a{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);border-bottom:1px solid transparent;padding-bottom:6px;transition:.18s}
.filter a:hover{color:var(--navy)}
.filter a.aktif{color:var(--navy);border-bottom-color:var(--brass)}
/* tabel */
.tbl-scroll{overflow-x:auto}
table,table.tbl,.wp-block-table table{width:100%;border-collapse:collapse;text-align:left}
table th,.wp-block-table th{font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);padding:0 28px 16px 0;border-bottom:1px solid var(--line)}
table td,.wp-block-table td{font-size:15px;line-height:1.65;color:var(--charcoal);padding:24px 28px 24px 0;border-bottom:1px solid var(--line);vertical-align:top;border-left:0;border-right:0}
table td:first-child,.wp-block-table td:first-child{font-family:var(--serif);font-size:20px;color:var(--navy);white-space:nowrap}
.wp-block-table{overflow-x:auto}
/* daftar keterangan */
.dl{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:72px;text-align:left;border-top:1px solid rgba(255,255,255,.14);padding-top:40px}
.dl dt{font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.dl dd{font-size:15px;line-height:1.55}
.dl dd a:hover{color:var(--brass)}
.dl--bone{grid-template-columns:repeat(2,1fr);border-top-color:var(--line);margin-top:48px}
.dl--bone dd{color:var(--navy)}
/* ==========================================================================
7. Borang kontak
========================================================================== */
.form{display:grid;gap:24px;text-align:left}
.field label{display:block;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.field input,.field select,.field textarea{width:100%;background:var(--bone);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;font-family:var(--sans);font-weight:300;font-size:16px;color:var(--navy)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--brass)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:12px;color:var(--slate);margin-top:10px}
.field--jebakan{position:absolute;left:-9999px}
.pesan-borang{border-left:2px solid var(--brass);background:var(--bone-d);padding:20px 24px;font-size:15px;line-height:1.6;margin-bottom:32px}
.pesan-borang--gagal{border-left-color:#9B2C2C}
/* ==========================================================================
8. Pita kontak dan kaki halaman
========================================================================== */
.contact{background:var(--navy);color:var(--bone);text-align:center;padding:112px 0}
.contact h2{color:var(--bone)}
.contact .lead{color:#D6DDE6;max-width:52ch;margin:0 auto;font-size:17px;line-height:1.7}
footer{padding:72px 0 40px;text-align:center}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:56px;text-align:left;padding-bottom:48px;border-bottom:1px solid var(--line)}
.f-brand .f-lock{height:64px;width:auto;margin:0 0 20px}
.f-tag{font-size:13px;line-height:1.7;color:var(--slate);max-width:36ch}
.f-head{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.f-links{list-style:none;font-size:13px;color:var(--slate);margin:0}
.f-links li{padding:7px 0}
.f-links a:hover{color:var(--navy)}
.f-kontak{list-style:none;font-size:13px;line-height:1.7;color:var(--slate)}
.f-kontak li{padding:7px 0}
.f-kontak a:hover{color:var(--navy)}
.f-tanda{color:var(--brass);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-left:6px}
.f-jam{color:#8C8474}
.f-note{font-size:12px;line-height:1.7;color:var(--slate);max-width:72ch;margin:40px auto 0}
.f-bottom{font-size:12px;color:var(--slate);margin-top:20px}
/* --- tombol WhatsApp mengambang ----------------------------------------- */
.wa-apung{position:fixed;right:24px;bottom:24px;z-index:55;display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:var(--bone);border:1px solid var(--navy);padding:14px 20px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:.18s}
.wa-apung:hover{background:var(--brass);border-color:var(--brass);color:var(--bone)}
.wa-apung svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;flex:none}
body.nav-open .wa-apung{display:none}
/* --- ikon pada pembuka halaman bidang praktik --------------------------- */
.hero-ikon{display:flex;justify-content:center;margin-bottom:22px}
.hero-ikon svg{width:34px;height:34px;stroke:var(--brass);fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
/* --- profil satu partner ------------------------------------------------ */
.person--tunggal{border-top:0;border-bottom:0;padding-top:0;align-items:start}
.person--tunggal .p-list{margin-top:0}
.p-list li > span{display:block}
.p-name a:hover{color:var(--brass)}
/* ==========================================================================
9. Arsip dan pos tunggal
========================================================================== */
.entry-meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:600;margin-bottom:16px}
.single-entry{padding:0 0 96px}
.single-entry .entry-content{max-width:760px;margin:0 auto}
.single-thumb{margin:0 auto 56px;max-width:var(--max)}
.pager{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:72px;padding-top:32px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.pager a:hover{color:var(--navy)}
.nav-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:64px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.nav-links .page-numbers{padding:10px 16px;border:1px solid var(--line);color:var(--slate)}
.nav-links .page-numbers:hover,.nav-links .page-numbers.current{border-color:var(--navy);color:var(--navy)}
.kosong{text-align:center;padding:48px 0;font-size:15px;color:var(--slate)}
/* ==========================================================================
10. Layar sempit
========================================================================== */
@media(max-width:1180px){
.tel{display:none}
}
@media(max-width:1020px){
.cards,.cards--3{grid-template-columns:repeat(2,1fr);gap:40px}
}
@media(max-width:900px){
.wrap,.narrow,.mid{padding:0 24px}
section,.quote,.contact{padding:72px 0}
.hero{padding:72px 0 56px}
.hero--full{min-height:0;padding:72px 0 64px}
.page-hero{padding:56px 0 48px}
.sec-head{margin-bottom:48px}
.editorial{columns:1}
.three,.notes,.dl,.dl--bone{grid-template-columns:1fr;gap:40px}
.cards,.cards--3,.cards--2{grid-template-columns:1fr;gap:48px}
.row{grid-template-columns:1fr;gap:12px;padding:32px 0}
.person{grid-template-columns:1fr;gap:32px;padding:40px 0}
.person figure,.person .pf{max-width:260px}
.p-list li{grid-template-columns:1fr;gap:6px}
.f-grid{grid-template-columns:1fr;gap:40px}
.wa-apung{right:16px;bottom:16px;padding:14px}
.wa-apung span{display:none}
.drawer__inner{padding-top:104px;justify-content:flex-start}
.drawer__menu a{padding:20px 0;gap:18px}
.drawer__foot{grid-template-columns:1fr;gap:24px;margin-top:40px}
.motif{width:280px;left:-100px}
.quote .motif{right:-100px;left:auto}
.alignleft,.alignright{float:none;margin:0 0 24px}
}