:root{color-scheme:light;--bg:#fbf9f4;--latar:#eee9de;--teks:#231f1c;--redup:#6b6359;--garis:#ddd5c4;--aksen:#ae2a22;--link:#ae2a22;--bahaya:#b42318;--serif:"Source Serif 4","Iowan Old Style",Charter,Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-theme=terang]{color-scheme:light;--bg:#fff;--latar:#f1f1ef;--teks:#1c1b1a;--redup:#66625d;--garis:#e3e1dd;--aksen:#b3261e;--link:#b3261e;--bahaya:#b42318}
:root[data-theme=gelap]{color-scheme:dark;--bg:#1c1917;--latar:#12100f;--teks:#ece6dc;--redup:#a79f94;--garis:#34302b;--aksen:#d9473b;--link:#ef7a6e;--bahaya:#f28b82}
*{box-sizing:border-box;margin:0}
body{font-family:var(--sans);background:var(--latar,var(--bg));color:var(--teks);line-height:1.5;padding-bottom:72px;-webkit-tap-highlight-color:transparent}
a,button{touch-action:manipulation}
main{max-width:600px;margin:0 auto;background:var(--bg);min-height:calc(100vh - 72px);min-height:calc(100dvh - 72px)}
a{color:inherit;text-decoration:none}
.header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--teks);border-bottom:1px solid var(--garis);padding:4px 16px;min-height:52px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.kosong{padding:32px 16px;text-align:center;color:var(--redup)}
.pad{padding:16px}
.post{padding:14px 16px;border-bottom:1px solid var(--garis);content-visibility:auto;contain-intrinsic-size:auto 96px}
.post .nama{font-weight:600}
.post .waktu,.post .user{color:var(--redup);font-size:14px}
.post .isi{margin-top:4px;white-space:pre-wrap;word-break:break-word}
.post .aksi{display:flex;gap:24px;margin-top:10px;color:var(--redup);font-size:14px}
.post .aksi button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
.post .aksi .sudah{color:var(--bahaya)}
textarea,input[type=text],input[type=email],input[type=password]{width:100%;padding:12px;background:transparent;color:var(--teks);border:1px solid var(--garis);border-radius:8px;font:inherit}
textarea{min-height:100px;resize:none}
.baris{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.hitung{font-size:13px;color:var(--redup)}
.hitung.habis{color:var(--bahaya)}
.btn{background:var(--aksen);color:#fff;border:0;border-radius:999px;padding:8px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.5}
.btn.garis{background:transparent;color:var(--teks);border:1px solid var(--garis)}
.form{display:grid;gap:12px;padding:16px}
.galat{color:var(--bahaya);font-size:14px}
.nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:var(--bg);border-top:1px solid var(--garis);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.nav a{color:var(--redup);font-size:12px;text-align:center}
.nav a.aktif{color:var(--link,var(--aksen));font-weight:600}
.nav svg{display:block;margin:0 auto 2px;width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.fab{position:fixed;right:16px;bottom:84px;width:52px;height:52px;border-radius:50%;background:var(--aksen);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center}
.profil-atas{padding:16px;border-bottom:1px solid var(--garis)}
.profil-atas h2{font-size:20px}
.profil-atas .bio{margin:8px 0}
.profil-atas .stat{color:var(--redup);font-size:14px;margin-bottom:12px}
.profil-atas .tombol{display:flex;gap:8px}
.item{display:block;padding:14px 16px;border-bottom:1px solid var(--garis)}
.chat{display:flex;flex-direction:column;padding:8px 0 130px}
.bubble{max-width:80%;padding:8px 12px;border-radius:16px;margin:4px 12px;white-space:pre-wrap;word-break:break-word}
.bubble.saya{background:var(--aksen);color:#fff;margin-left:auto}
.bubble.lawan{background:var(--garis)}
.kirim{position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--garis);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.kirim>div{max-width:600px;margin:0 auto}
.kirim textarea{min-height:44px;height:44px}

/* ===== Tampilan lebih hidup ===== */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;flex:none;background:var(--garis)}
.post{display:flex;gap:12px}
.post .badan{min-width:0;flex:1}
.post .ava{flex:none}
.post:active{background:color-mix(in srgb,var(--garis) 35%,transparent)}
.kosong{padding:56px 24px}
.kosong-ikon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:color-mix(in srgb,var(--aksen) 12%,transparent);color:var(--aksen);display:flex;align-items:center;justify-content:center}
.kosong-ikon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kosong h3{color:var(--teks);font-size:17px;margin-bottom:4px}
.kosong p{margin-bottom:16px;font-size:14px}
.kosong .btn{display:inline-block}
.skel .avatar{background:var(--garis);animation:kedip 1.2s ease-in-out infinite}
.garis-skel{height:12px;border-radius:6px;background:var(--garis);margin:8px 0;animation:kedip 1.2s ease-in-out infinite}
@keyframes kedip{0%,100%{opacity:1}50%{opacity:.45}}
.redup{color:var(--redup);font-style:italic}
.profil-atas .baris-profil{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.item.dgn-avatar{display:flex;gap:12px;align-items:center}
.item .sub{color:var(--redup);font-size:14px}
::placeholder{color:var(--redup);opacity:.8}
textarea:focus,input:focus{outline:2px solid color-mix(in srgb,var(--aksen) 45%,transparent);border-color:var(--aksen)}
@media (prefers-reduced-motion:reduce){.skel .avatar,.garis-skel{animation:none}}

/* ===== Logo ===== */
.merek{display:inline-flex;align-items:center;gap:8px;letter-spacing:.2px}
.merek img{border-radius:6px}
.logo-login{padding:28px 24px 4px;text-align:center}
.logo-login img{width:100%;max-width:340px;height:auto;border-radius:14px}

.header-logo{justify-content:flex-start;padding:6px 16px}
.logo-wrap{display:block;border-radius:8px}
.logo-wrap img{height:46px;width:auto;display:block;mix-blend-mode:multiply}
:root[data-theme=gelap] .logo-wrap{background:#f4efe6;padding:2px 8px}
:root[data-theme=terang] .logo-wrap img,:root[data-theme=gelap] .logo-wrap img{mix-blend-mode:normal}

/* ===== Pemilih tema ===== */
.tema-pilih{padding:16px;border-bottom:1px solid var(--garis)}
.tema-pilih h3{font-size:14px;color:var(--redup);font-weight:600;margin-bottom:10px}
.tema-opsi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tema-opsi button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;background:transparent;color:var(--teks);border:1px solid var(--garis);border-radius:12px;font:inherit;font-size:13px;cursor:pointer}
.tema-opsi button[aria-pressed=true]{border-color:var(--aksen);outline:2px solid color-mix(in srgb,var(--aksen) 35%,transparent);font-weight:600}
.tema-opsi i{width:28px;height:28px;border-radius:50%;border:1px solid #8884}
.tema-opsi i.k{background:linear-gradient(135deg,#fbf9f4 60%,#ae2a22 60%)}
.tema-opsi i.t{background:linear-gradient(135deg,#fff 60%,#b3261e 60%)}
.tema-opsi i.g{background:linear-gradient(135deg,#12100f 60%,#ef7a6e 60%)}

.centang{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.centang input{margin-top:4px;flex:none}
label{font-size:14px;color:var(--redup)}
.centang{color:var(--teks)}
.akun-aksi{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.akun-aksi a{font-size:14px;text-decoration:underline}
.profil-atas .tombol{flex-wrap:wrap}

/* ===== Perbaikan v3: area sentuh, fokus, muat lebih banyak ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.header h1{font-size:inherit;font-weight:inherit;line-height:inherit}
.header a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0 -4px}
.post .aksi{gap:4px;margin:2px 0 -8px -8px}
.post .aksi button,.post .aksi a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.kosong .btn{display:inline-flex}
.nav a{display:block;min-height:44px;padding:2px 10px}
.nav-tulis{display:none}
.nav a.nav-tulis{display:none}
.fab{box-shadow:0 2px 8px rgba(0,0,0,.28)}
body[data-tab=beranda] main{padding-bottom:88px}
:focus-visible{outline:2px solid var(--link,var(--aksen));outline-offset:2px}
textarea:focus-visible,input:focus-visible{outline-offset:0}
.lagi{display:block;width:100%;min-height:52px;background:none;border:0;border-bottom:1px solid var(--garis);color:var(--link,var(--aksen));font:inherit;font-weight:600;cursor:pointer}
.lagi:disabled{opacity:.6;cursor:default}
#orang:empty{display:none}
.post .ava{align-self:flex-start;padding:2px;margin:-2px -2px 0}
.post .badan>a:first-child{display:block;padding:5px 0 3px}
.akun-aksi a{display:inline-flex;align-items:center;min-height:44px}

/* ===== Tampilan desktop & tablet ===== */
@media (hover:hover){
  .post:hover{background:color-mix(in srgb,var(--garis) 28%,transparent)}
  .post .aksi button:hover,.post .aksi a:hover{color:var(--link,var(--aksen))}
  .btn:hover{filter:brightness(1.08)}
  .btn.garis:hover{background:color-mix(in srgb,var(--garis) 45%,transparent);filter:none}
  .lagi:hover,.item:hover{background:color-mix(in srgb,var(--garis) 28%,transparent)}
}
@media (min-width:768px){
  body{padding-bottom:0}
  main{border-left:1px solid var(--garis);border-right:1px solid var(--garis);min-height:100vh;padding-bottom:24px}
  body[data-tab=beranda] main{padding-bottom:24px}
  .header{padding-left:20px;padding-right:20px}
  .post{padding:16px 20px}
  .pad,.form,.profil-atas,.tema-pilih{padding-left:20px;padding-right:20px}
  .fab{display:none}
  /* menu samping: hanya ikon pada tablet */
  .nav{top:0;bottom:auto;left:calc(50% - 380px);right:auto;width:68px;height:100vh;flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;background:transparent;border:0;padding:16px 0}
  .nav a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;min-height:0;padding:0;border-radius:50%;font-size:0}
  .nav svg{margin:0;width:26px;height:26px}
  .nav a:hover{background:color-mix(in srgb,var(--garis) 60%,transparent)}
  .nav a.aktif{background:color-mix(in srgb,var(--link,var(--aksen)) 12%,transparent)}
  .nav a.nav-tulis{display:flex;background:var(--aksen);color:#fff;margin-top:10px}
  .nav a.nav-tulis:hover{background:var(--aksen);filter:brightness(1.1)}
  .kirim{left:50%;right:auto;width:min(600px,100%);transform:translateX(-50%);border-left:1px solid var(--garis);border-right:1px solid var(--garis)}
  /* halaman tanpa menu (masuk, aturan, selamat, admin): tampil sebagai kartu di tengah */
  body:not([data-tab]) main{min-height:0;margin:40px auto;border:1px solid var(--garis);border-radius:12px;overflow:clip}
}
@media (min-width:1100px){
  .nav{left:calc(50% - 544px);width:228px;align-items:stretch;padding:16px 8px}
  .nav a{width:auto;height:auto;min-height:52px;justify-content:flex-start;gap:16px;padding:0 18px;border-radius:999px;font-size:18px;font-weight:500}
  .nav a.aktif{font-weight:700}
  .nav a.nav-tulis{justify-content:center;font-weight:700}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
[hidden]{display:none!important}


/* ===== Redesain v4: Kertas & Benang ===== */
/* Benang merah: jahitan putus-putus di bawah header, penanda menu aktif, dan garis balasan */
.header{border-bottom:0;background-image:linear-gradient(90deg,var(--aksen) 0 6px,transparent 6px 12px);background-size:12px 1px;background-repeat:repeat-x;background-position:0 100%;box-shadow:0 1px 0 var(--garis)}
.header{background-color:color-mix(in srgb,var(--bg) 88%,transparent)}
.header h1{font-family:var(--serif);font-size:20px;font-weight:650;letter-spacing:-.01em}
.header-logo{background-image:none;box-shadow:0 1px 0 var(--garis)}
main{box-shadow:0 0 0 1px var(--garis)}

/* Kartu posting */
.post{padding:18px 16px;gap:14px;border-bottom:1px solid var(--garis)}
.post .nama{font-weight:650;font-size:15px}
.post .user{font-size:13.5px}
.post .isi{font-family:var(--serif);font-size:17.5px;line-height:1.55;margin-top:6px;color:var(--teks);letter-spacing:.005em}
.post .badan>a:first-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding:2px 0}
.post .aksi{align-items:center;gap:2px;margin:6px 0 -10px -10px;font-size:13.5px}
.post .aksi button,.post .aksi a{border-radius:999px;gap:6px;color:var(--redup)}
.post .aksi svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.post .aksi .btn-suka.sudah{color:var(--aksen)}
.post .aksi .btn-suka.sudah svg{fill:currentColor}
.post .aksi .sisi{margin-left:auto;display:flex;gap:0}
.post .aksi .sisi button{min-width:40px;opacity:.8}
.post .aksi .btn-hapus:hover{color:var(--bahaya)}
.post .aksi .btn-suka:active svg{transform:scale(1.18);transition:transform .12s}
/* Balasan di halaman detail: benang vertikal menghubungkan avatar */
#balasan .post{position:relative}
#balasan .post::before{content:"";position:absolute;left:35px;top:0;height:18px;border-left:2px solid color-mix(in srgb,var(--aksen) 45%,transparent)}
.avatar{box-shadow:0 0 0 2px var(--bg),0 0 0 3px color-mix(in srgb,var(--aksen) 30%,transparent)}

/* Penulisan */
textarea,input[type=text],input[type=email],input[type=password]{border-radius:12px;background:color-mix(in srgb,var(--bg) 60%,var(--latar))}
.form textarea#isi{font-family:var(--serif);font-size:18px;line-height:1.55;min-height:160px}
.btn{background:var(--aksen);box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
.btn.garis{box-shadow:none}
.hitung{font-variant-numeric:tabular-nums}

/* Profil & daftar */
.profil-atas{padding:22px 16px 18px}
.profil-atas h2{font-family:var(--serif);font-size:24px;letter-spacing:-.01em}
.profil-atas .bio{font-family:var(--serif);font-size:16.5px;line-height:1.55}
.item{padding:14px 16px}
.item.dgn-avatar .sub{font-size:13.5px}
.bubble{border-radius:18px}
.bubble.saya{border-bottom-right-radius:6px}
.bubble.lawan{background:color-mix(in srgb,var(--garis) 70%,var(--bg));border-bottom-left-radius:6px}

/* Menu bawah (HP): penanda aktif berupa titik benang */
.nav{background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav a{position:relative}
.nav a.aktif::after{content:"";position:absolute;left:50%;top:-10px;width:22px;height:3px;margin-left:-11px;border-radius:0 0 3px 3px;background:var(--aksen)}
.fab{width:56px;height:56px;box-shadow:0 6px 18px color-mix(in srgb,var(--aksen) 40%,transparent)}

/* Panel kanan (desktop lebar) */
.panel{display:none}

@media (min-width:768px){
  .nav a.aktif::after{display:none}
  .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .post{padding:20px 24px}
  .header{padding-left:24px;padding-right:24px}
  .pad,.form,.profil-atas,.tema-pilih{padding-left:24px;padding-right:24px}
  .post .aksi{margin-left:-10px}
  #balasan .post::before{left:43px}
}
@media (min-width:1100px){
  .nav a{font-family:var(--sans);font-size:17px}
  .nav a.aktif{background:color-mix(in srgb,var(--aksen) 11%,transparent);color:var(--link)}
  .nav a.aktif::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aksen);position:absolute;left:6px}
  .nav a{position:relative}
  .nav a.nav-tulis{box-shadow:0 4px 14px color-mix(in srgb,var(--aksen) 35%,transparent)}
}
@media (min-width:1280px){
  .panel{display:block;position:fixed;top:0;left:calc(50% + 324px);width:296px;padding:20px 0}
  .panel section{border:1px solid var(--garis);border-radius:16px;background:var(--bg);padding:18px;margin-bottom:14px}
  .panel h2{font-family:var(--serif);font-size:18px;font-weight:650;margin-bottom:6px}
  .panel p{font-size:14px;color:var(--redup);line-height:1.55}
  .panel .batas{display:flex;align-items:baseline;gap:8px;margin:10px 0 2px}
  .panel .batas b{font-family:var(--serif);font-size:34px;line-height:1;color:var(--aksen);font-variant-numeric:tabular-nums}
  .panel .batas span{font-size:13.5px;color:var(--redup)}
  .panel ul{list-style:none;padding:0;display:grid;gap:2px;margin:8px -8px -8px}
  .panel li a{display:flex;align-items:center;min-height:40px;padding:0 8px;border-radius:8px;font-size:14.5px}
  .panel li a:hover{background:color-mix(in srgb,var(--garis) 45%,transparent)}
}

/* Saran ramah dari filter konten (js/filter.js) */
.saran{font-size:14px;line-height:1.45;padding:8px 12px;border-radius:8px;border:1px solid var(--garis);background:var(--latar);color:var(--teks)}
.saran[hidden]{display:none}
.saran.peringatan{border-color:#c98a12;background:rgba(201,138,18,.12)}
.saran.blokir{border-color:var(--bahaya);background:rgba(180,35,24,.10);color:var(--bahaya)}

/* ===== Notifikasi ===== */
.lencana{position:absolute;top:0;left:50%;margin-left:5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--aksen);color:#fff;font:700 11px/18px var(--sans);text-align:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none;animation:lencana-muncul .25s ease-out}
.lencana[hidden]{display:none}
@keyframes lencana-muncul{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (min-width:768px){.lencana{top:8px;margin-left:6px}}
@media (min-width:1100px){.lencana{left:34px;margin-left:0;top:7px}}
.btn.kecil{min-height:36px;padding:4px 14px;font-size:13px}
.header .btn.kecil{margin:0}

.notif-baris{border-bottom:1px solid var(--garis)}
.notif{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;min-height:64px}
.notif.baru{background:color-mix(in srgb,var(--aksen) 7%,transparent)}
.notif-ava{position:relative;flex:none;display:inline-flex}
.notif-jenis{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:var(--bg);color:var(--aksen);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--garis)}
.notif-jenis svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.notif-jenis.j-suka svg{fill:currentColor}
.notif-isi{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.notif-teks{font-size:15px;line-height:1.4;word-break:break-word}
.notif.baru .notif-teks{font-weight:600}
.notif-cuplikan{color:var(--redup);font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.notif-waktu{color:var(--redup);font-size:13px}
.notif-titik{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--aksen)}
@media (hover:hover){.notif:hover{background:color-mix(in srgb,var(--garis) 28%,transparent)}.notif.baru:hover{background:color-mix(in srgb,var(--aksen) 11%,transparent)}}
.notif:focus-visible,.pill-baru:focus-visible,.panel-notif a:focus-visible{outline:2px solid var(--aksen);outline-offset:-2px}
.pill-baru{display:block;width:100%;min-height:44px;background:color-mix(in srgb,var(--aksen) 10%,transparent);color:var(--link,var(--aksen));border:0;border-bottom:1px solid var(--garis);font:inherit;font-weight:600;font-size:14px;cursor:pointer}

.panel-notif{list-style:none;padding:0;margin:0 0 8px}
.panel-notif li{border-bottom:1px solid var(--garis)}
.panel-notif li:last-child{border-bottom:0}
.panel-notif a{display:flex;gap:10px;align-items:center;padding:9px 0;font-size:13.5px;line-height:1.35;color:var(--teks)}
.panel-notif a.baru b{color:var(--link,var(--aksen))}
.panel-notif .titik{flex:none;width:8px;height:8px;border-radius:50%;background:var(--aksen);margin-left:auto}
.panel-notif .sepi{color:var(--redup);font-size:13.5px;padding:4px 0}
.panel .lihat-semua{font-size:14px;font-weight:600;color:var(--link,var(--aksen))}
@media (prefers-reduced-motion:reduce){.lencana{animation:none}}
.panel .lihat-semua{display:inline-block;margin-top:4px}

/* ===== Tab feed Beranda: Publik | Mengikuti ===== */
.header-tab{flex-wrap:wrap;align-content:flex-start;padding-bottom:0}
.tab-feed{display:flex;flex:0 0 100%;margin:4px -16px 0}
.tab-feed button{flex:1;min-height:44px;background:none;border:0;border-bottom:2px solid transparent;color:var(--redup);font:inherit;font-weight:600;cursor:pointer}
.tab-feed button[aria-selected=true]{color:var(--teks);border-bottom-color:var(--aksen)}
.tab-feed button:focus-visible{outline:2px solid var(--aksen);outline-offset:-4px;border-radius:6px}
@media (min-width:768px){.tab-feed{margin-left:-24px;margin-right:-24px}}

/* ===== Saran @username & tautan mention ===== */
.sebut-wrap{position:relative}
.sebut-list{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:30;list-style:none;padding:4px;background:var(--bg);border:1px solid var(--garis);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.sebut-list li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;min-height:48px}
.sebut-list li.aktif{background:color-mix(in srgb,var(--aksen) 10%,transparent)}
.sebut-teks{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sebut-teks b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sebut-teks span{font-size:13px;color:var(--redup)}
.post .isi{cursor:pointer}
.post .isi a.sebut{color:var(--link,var(--aksen));font-weight:600}
.post .isi a.sebut:hover{text-decoration:underline}

/* Profil: desain ulang (kartu, aksi, lembar bawah, pengaturan) */
#atas{border-bottom:1px dashed var(--garis)}
#atas .profil-atas{padding:24px 16px 22px;border-bottom:0}
.kartu-kepala{display:flex;gap:16px;align-items:center}
.profil-nama{min-width:0}
#atas .profil-atas h2{font-size:26px;line-height:1.15;overflow-wrap:anywhere}
.profil-user{color:var(--redup);margin-top:2px;overflow-wrap:anywhere}
.profil-gabung{display:flex;align-items:center;gap:6px;color:var(--redup);font-size:14px;margin-top:6px}
.profil-gabung svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#atas .profil-atas .bio{margin:16px 0 0}
#atas .profil-atas .stat{display:flex;gap:28px;margin:18px 0 0;color:var(--teks)}
.stat>div{display:flex;align-items:baseline;gap:6px}
.stat b{font-family:var(--serif);font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}
.stat span{color:var(--redup);font-size:14px}
#atas .profil-atas .tombol{display:flex;gap:8px;margin-top:18px;align-items:center;flex-wrap:nowrap}
.tombol .btn.utama{flex:1}
.ikon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--garis);color:var(--teks);cursor:pointer;flex:none}
.ikon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ikon-btn circle[r="1.2"]{fill:currentColor}
.header .ikon-btn{border:0;margin-right:-8px}
.menu-lain{position:relative}
.menu-isi{position:absolute;right:0;top:calc(100% + 6px);z-index:6;min-width:200px;padding:4px;background:var(--bg);border:1px solid var(--garis);border-radius:12px;box-shadow:0 8px 24px color-mix(in srgb,var(--teks) 14%,transparent)}
.menu-isi[hidden]{display:none}
.menu-isi button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 12px;background:none;border:0;border-radius:8px;font:inherit;color:var(--teks);cursor:pointer;text-align:left}
.menu-isi button.bahaya{color:var(--bahaya)}
.bagian-judul{padding:16px 16px 4px}
.bagian-judul[hidden]{display:none}
.bagian-judul h2{font-family:var(--serif);font-size:17px;font-weight:650;color:var(--redup)}
.lembar{border:0;padding:0;background:var(--bg);color:var(--teks);width:100%;max-width:560px;margin:auto auto 0;border-radius:20px 20px 0 0;max-height:90dvh;overflow:auto}
.lembar::backdrop{background:rgb(0 0 0/.45)}
.lembar[open]{animation:naik .22s ease-out}
@keyframes naik{from{transform:translateY(24px);opacity:0}}
.lembar-kepala{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 20px;border-bottom:1px dashed var(--garis)}
.lembar-kepala .ikon-btn{border:0}
.lembar-kepala h2{font-family:var(--serif);font-size:20px}
.lembar .tema-pilih{padding-left:20px;padding-right:20px}
.lembar .tema-pilih:last-child{border-bottom:0}
.lembar .form{padding:16px 20px 24px}
.lembar .tombol{display:flex;gap:8px}
.pratinjau{display:flex;gap:12px;align-items:center;padding:16px 20px 0}
.pr-nama{font-family:var(--serif);font-size:18px;font-weight:650;overflow-wrap:anywhere}
@media (min-width:768px){#atas .profil-atas{padding:28px 24px 24px}.bagian-judul{padding-left:24px;padding-right:24px}.lembar{margin:auto;border-radius:20px}}
@media (prefers-reduced-motion:reduce){.lembar[open]{animation:none}}