/* =========================================================================
   Panel admin CMS Kabupaten Buton — sistem rupa "2026".

   Seluruh halaman panel memakai berkas ini, sehingga perubahan di sini
   berlaku untuk portal dan kesepuluh tenant sekaligus.

   Susunan berkas:
     1. Token rupa       — semua warna, radius, dan bayangan didefinisikan
                           sekali di :root; mode gelap cukup menukar nilai
                           token, tidak perlu mengulang daftar pemilih.
     2. Kerangka         — shell, sidebar, pita atas, isi halaman.
     3. Komponen         — kartu, tabel, lencana, formulir, keadaan kosong.
     4. Bagian khusus    — editor kaya (Quill), pemilih token, riwayat revisi.
     5. Pemilih ikon     — kisi ikon berkelompok dengan pencarian.
     6. Media sosial     — kartu kanal, peringatan format, pratinjau footer.
     7. Aksesibilitas    — cincin fokus, dukungan prefers-reduced-motion.

   Arah rupa: lapang, resmi, dan modern. Bayangan berlapis yang lembut
   (bukan satu bayangan tebal), radius besar, huruf data angka tabular,
   pita atas buram kaca, serta gerak yang selalu menghormati permintaan
   pengurangan gerak.
   ========================================================================= */

/* --- 1. Token rupa ------------------------------------------------------- */
:root{
  color-scheme:light;

  /* Permukaan & tinta */
  --bg:#eef2f7;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#f1f5f9;
  --border:#e6ebf2;
  --border-strong:#d7dfea;
  --ink:#0f172a;
  --ink-2:#475569;
  --ink-3:#8a99ad;

  /* Aksen */
  --brand:#1d4ed8;
  --brand-600:#1e40af;
  --brand-050:#eff6ff;
  --focus:0 0 0 .2rem rgba(37,99,235,.20);
  --accent:#f5b301;
  --accent-ink:#3b2f00;

  /* Sisi kiri */
  --sidebar:#0b1a3a;
  --sidebar-2:#0e2450;
  --sidebar-hover:rgba(255,255,255,.07);
  --sidebar-active:#1d4ed8;
  --sidebar-ink:#c3d3ec;
  --sidebar-ink-dim:#8fabd9;

  /* Radius */
  --r-xs:.4rem;
  --r-sm:.55rem;
  --r-md:.75rem;
  --r-lg:1rem;
  --r-xl:1.35rem;

  /* Bayangan berlapis — tiap tingkat memakai dua lapis agar tepinya lembut */
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  --sh-md:0 2px 4px rgba(15,23,42,.04),0 12px 28px -18px rgba(15,23,42,.35);
  --sh-lg:0 4px 10px rgba(15,23,42,.04),0 24px 48px -24px rgba(15,23,40,.40);
}

[data-bs-theme="dark"]{
  color-scheme:dark;

  --bg:#070d19;
  --surface:#0e1626;
  --surface-2:#121c30;
  --surface-3:#18233c;
  --border:#1f2b42;
  --border-strong:#2c3a55;
  --ink:#e7eefc;
  --ink-2:#a7b7d1;
  --ink-3:#7185a4;

  --brand:#3b82f6;
  --brand-600:#2563eb;
  --brand-050:#12203a;
  --focus:0 0 0 .2rem rgba(96,165,250,.28);
  --accent:#fbbf24;

  --sidebar:#091428;
  --sidebar-2:#0b1a34;
  --sidebar-hover:rgba(255,255,255,.07);
  --sidebar-active:#2563eb;
  --sidebar-ink:#b9c9e4;
  --sidebar-ink-dim:#8ba0c8;

  --sh-xs:0 1px 2px rgba(0,0,0,.40);
  --sh-sm:0 1px 2px rgba(0,0,0,.40);
  --sh-md:0 2px 6px rgba(0,0,0,.35),0 14px 30px -20px rgba(0,0,0,.80);
  --sh-lg:0 6px 16px rgba(0,0,0,.40),0 26px 52px -26px rgba(0,0,0,.90);
}

/* --- 2. Kerangka --------------------------------------------------------- */
body.admin-page{
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:.92rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.admin-shell{display:flex;min-height:100vh}

/* Sidebar */
.admin-sidebar{
  width:250px;
  background:linear-gradient(180deg,var(--sidebar-2) 0%,var(--sidebar) 100%);
  color:var(--sidebar-ink);
  display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:1040;
  border-right:1px solid rgba(255,255,255,.05)
}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:.95rem;line-height:1.2}
.sidebar-nav{flex:1;overflow-y:auto;padding:.75rem .6rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}

.sidebar-group{
  text-transform:uppercase;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;color:var(--sidebar-ink-dim);
  margin:1.15rem .7rem .45rem
}
.sidebar-nav a{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .7rem;border-radius:var(--r-md);
  color:var(--sidebar-ink);text-decoration:none;font-weight:500;
  margin-bottom:.15rem;
  transition:background .16s ease,color .16s ease,transform .16s ease
}
.sidebar-nav a i{width:18px;text-align:center;font-size:.92rem;transition:color .16s ease}
.sidebar-nav a:hover{background:var(--sidebar-hover);color:#fff}
.sidebar-nav a:focus-visible{outline:2px solid #93c5fd;outline-offset:-2px}
/* Item aktif: gradasi biru lembut dengan pita aksen emas di tepi kiri,
   menandai posisi tanpa memakai blok biru pekat yang menarik perhatian
   berlebihan pada daftar panjang. */
.sidebar-nav a.active{
  background:linear-gradient(90deg,rgba(37,99,235,.42),rgba(37,99,235,.16));
  color:#fff;font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent)
}
.sidebar-nav a.active i{color:#fcd34d}
.sidebar-footer{padding:.9rem 1.1rem;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-footer a{color:var(--sidebar-ink-dim);text-decoration:none;font-size:.85rem;transition:color .16s ease}
.sidebar-footer a:hover{color:#fff}

/* Main */
.admin-main{flex:1;margin-left:250px;display:flex;flex-direction:column;min-width:0}
/* Pita atas buram kaca: latar tembus pandang ringan + blur, sehingga isi
   halaman yang tergulir sedikit terlihat di baliknya. Nilai padat diberikan
   lebih dulu sebagai cadangan bagi peramban tanpa dukungan color-mix. */
.admin-topbar{
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  padding:.7rem 1.5rem;
  display:flex;align-items:center;gap:1rem;
  position:sticky;top:0;z-index:1030
}
.admin-topbar .btn-outline-secondary{
  border-color:var(--border-strong);color:var(--ink-2);background:var(--surface)
}
.admin-topbar .btn-outline-secondary:hover{
  background:var(--surface-3);color:var(--ink);border-color:var(--border-strong)
}
/* Tautan akun pada pita atas membawa kelas .text-dark dari markup, dan
   kelas utilitas Bootstrap itu memakai !important. Tanpa !important di
   sini, aturan warna di bawah kalah telak dan nama pengguna tetap gelap
   ketika mode gelap aktif -- tak terlihat sama sekali. */
.admin-topbar .dropdown-toggle{color:var(--ink)!important}
.admin-topbar .dropdown-toggle:hover{color:var(--brand)!important}
.admin-topbar select.form-select{
  border-color:var(--border-strong);background-color:var(--surface);color:var(--ink);font-size:.85rem
}
.admin-content{padding:1.75rem}

/* --- Kartu --------------------------------------------------------------- */
.card{border:0;background:var(--surface);box-shadow:var(--sh-sm);border-radius:var(--r-lg)}
.card-header{background:var(--surface);border-bottom:1px solid var(--border);font-weight:700;border-radius:var(--r-lg) var(--r-lg) 0 0!important}
.card-footer{background:var(--surface-2);border-top:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* Kartu statistik: pita gradasi tipis di puncak sebagai penanda visual. */
.stat-card{position:relative;border:0;border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;background:var(--surface);transition:transform .18s ease,box-shadow .18s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.stat-card .stat-icon{width:52px;height:52px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.stat-card .stat-value{font-size:1.65rem;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat-card .stat-label{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}

/* --- Judul halaman & alat ------------------------------------------------ */
.page-title{font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:.2rem}
.page-subtitle{color:var(--ink-2);font-size:.9rem;margin-bottom:1.25rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:1rem}

/* --- Tombol -------------------------------------------------------------- */
.admin-page .btn{border-radius:var(--r-sm);font-weight:600}
.btn-primary{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  border-color:#1d4ed8;
  box-shadow:0 1px 2px rgba(29,78,216,.28)
}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(180deg,#1d4ed8,#1e40af);border-color:#1e40af}
.btn-primary:focus-visible{box-shadow:var(--focus)}
.btn-outline-secondary{border-color:var(--border-strong);color:var(--ink-2)}
.btn-outline-secondary:hover{background:var(--surface-3);color:var(--ink);border-color:var(--border-strong)}

/* --- Tabel --------------------------------------------------------------- */
.table thead th{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);background:var(--surface-2);
  border-bottom:1px solid var(--border);padding:.8rem .95rem
}
/* nowrap dibatasi pada tabel berbingkai .table-responsive saja. Dua tabel
   (deploy & riwayat pembaruan) memakai table-sm tanpa pembungkus, sehingga
   nowrap di sana akan meluber ke tepi kartu. */
.table-responsive .table thead th{white-space:nowrap}
.table tbody td{padding:.8rem .95rem;border-color:var(--border);color:var(--ink);vertical-align:middle}
.table-hover tbody tr:hover{background:var(--surface-2)}
.table{--bs-table-striped-bg:var(--surface-2)}

.avatar-sm{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-3);color:var(--ink-2)}

/* --- Lencana status: latar lembut, tepi tipis, teks pekat ---------------- */
.badge-active{background:#dcfce7;color:#166534;box-shadow:inset 0 0 0 1px rgba(22,101,52,.14)}
.badge-draft{background:#e5e7eb;color:#374151;box-shadow:inset 0 0 0 1px rgba(55,65,81,.14)}
.badge-scheduled{background:#dbeafe;color:#1e40af;box-shadow:inset 0 0 0 1px rgba(30,64,175,.14)}
.badge-inactive{background:#fee2e2;color:#991b1b;box-shadow:inset 0 0 0 1px rgba(153,27,27,.14)}

/* --- Tombol ikon & gambar kecil ------------------------------------------ */
.icon-btn{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface);color:var(--ink-2);text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease
}
.icon-btn:hover{background:var(--brand-050);color:var(--brand);border-color:#bfdbfe;transform:translateY(-1px)}
.icon-btn.danger:hover{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.icon-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}

.thumb{width:56px;height:40px;object-fit:cover;border-radius:var(--r-xs);background:var(--surface-3)}

/* --- Formulir ------------------------------------------------------------ */
.form-label{font-weight:600;font-size:.85rem;color:var(--ink-2)}
.form-control,.form-select{
  border-radius:var(--r-md);font-size:.92rem;
  border-color:var(--border-strong);background-color:var(--surface);color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease
}
.form-control:focus,.form-select:focus{border-color:#93c5fd;box-shadow:0 0 0 .18rem rgba(59,130,246,.15)}
.form-control::placeholder{color:var(--ink-3)}
.required-star{color:#dc2626}
.form-text{color:var(--ink-3)}

/* --- Laci menu pada layar kecil -------------------------------------------
   Pada lebar ini sidebar tidak lagi menjadi kolom tetap, melainkan laci yang
   keluar dari tepi kiri. Empat perubahan dibanding susunan lama membuatnya
   terasa seperti laci sungguhan, bukan panel yang melayang:
     1. lebar mengikuti layar (maksimal 320px) sehingga isi halaman tidak
        menyempit menjadi sisa beberapa piksel di kanan,
     2. tepi kanan membulat dan bayangan dalam menandai laci berada di atas,
     3. gerak memakai kurva percepatan-perlambatan, bukan linear,
     4. kabut latar (sidebar-backdrop) meredupkan halaman di belakangnya. */
@media (max-width: 991.98px){
  .admin-sidebar{
    width:min(84vw,320px);
    transform:translateX(-100%);
    border-radius:0 var(--r-xl) var(--r-xl) 0;
    box-shadow:none;
    transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease
  }
  .admin-sidebar.show{
    transform:translateX(0);
    box-shadow:0 28px 64px -16px rgba(2,6,23,.7)
  }
  .admin-main{margin-left:0}
  .admin-content{padding:1.1rem}

  /* Tombol menu pita atas ikut diperbesar: ini gerbang masuk laci, dan
     ukuran bawaan btn-sm (±31px) berada di bawah ambang sentuh 44px.
     Dipilih #sidebarToggle agar hanya tombol ini yang membesar, bukan
     seluruh tombol btn-sm di pita atas. */
  #sidebarToggle{
    min-width:44px;min-height:44px;
    border-radius:var(--r-md);
    display:inline-flex;align-items:center;justify-content:center
  }

  /* Tombol tutup memerlukan ruang agar tidak menimpa nama situs.
     Dipakai gabungan dua kelas, bukan .sidebar-brand semata: kartu identitas
     di bawah file ini menetapkan padding lewat singkatan, sehingga aturan
     satu kelas akan kalah telak olehnya. */
  .sidebar-brand.site-card{padding-right:3rem}
}

/* Tombol tutup laci.
   Kotak terlihat sengaja tetap kecil (32px) agar tidak menutupi nama situs,
   tetapi area sentuhnya diperluas lewat pseudo-element sampai 44px sesuai
   ambang WCAG 2.5.5. Pseudo-element dipilih daripada membesar kotaknya
   langsung, karena tombol ini berdampingan langsung dengan teks identitas
   situs pada laci yang sempit. */
.sidebar-close{
  position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border:.1rem solid rgba(255,255,255,.14);border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);color:#e2e8f0;cursor:pointer;
  transition:background .15s ease,color .15s ease
}
.sidebar-close::after{content:"";position:absolute;inset:-6px}
.sidebar-close:hover{background:rgba(255,255,255,.18);color:#fff}
.sidebar-close:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}

/* Kabut latar di balik laci.
   Berada di atas pita atas (z-index 1030) tetapi di bawah laci (1040), sehingga
   hanya isi halaman yang ikut meredup. `visibility` dipakai selain `opacity`
   agar elemen yang tersembunyi tidak menangkap klik maupun fokus keyboard.
   Pada layar lebar kabut tidak pernah dipakai dan disingkirkan sama sekali. */
.sidebar-backdrop{
  position:fixed;inset:0;z-index:1035;
  background:rgba(2,6,23,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease
}
.sidebar-backdrop.show{opacity:1;visibility:visible}
@media (min-width:992px){.sidebar-backdrop{display:none!important}}

/* Gulir latar dikunci selagi laci terbuka, dengan padding pengganti agar
   tata letak tidak meloncat ketika bilah gulir hilang. */
body.admin-page.sidebar-open{overflow:hidden}

/* --- Sub-bagian menu terbuka tertutup secara bertahap ---
   Sebelumnya memakai display:none/blok sehingga muncul seketika tanpa gerak.
   max-height menyediakan tinggi yang cukup untuk isi terpanjang (Konten memuat
   enam butir), sedangkan visibility mencegah tautan di dalamnya tercapai
   keyboard selagi tertutup -- display:none tidak lagi dipakai karena tidak
   dapat dianimasikan, tetapi peran pelindungnya digantikan visibility. */
.sidebar-sub-items{
  display:block;max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .3s cubic-bezier(.4,0,.2,1),visibility .3s
}
.sidebar-sub.open>.sidebar-sub-items{max-height:640px;visibility:visible}

/* Sentuhan pada layar kecil: target sentuh idealnya 44px (WCAG 2.5.5).
   Tautan menu lama hanya setinggi ±35px sehingga mudah meleset ketika
   dijari. Tinggi ditambah lewat padding vertikal, bukan tinggi tetap,
   supaya teks yang panjang tetap dapat tumbuh dan sub-bagian ikut
   membesar tanpa aturan tambahan. */
@media (max-width: 991.98px){
  .sidebar-nav{padding-bottom:calc(.9rem + env(safe-area-inset-bottom,0px))}
  .sidebar-nav a{padding:.85rem .7rem}
  /* Anak sub-bagian sengaja dipadatkan pada desktop (aturan dasar di bawah
     file memakai padding .5rem). Di sini dikembalikan ke tinggi sentuh
     44px. Spesifisitas harus lebih tinggi daripada aturan dasar
     .sidebar-nav .sidebar-sub-items a, yang bobotnya sama (0,2,1) tetapi
     muncul belakangan dan akan menyingkirkan perbaikan ini. */
  .admin-sidebar .sidebar-nav .sidebar-sub-items a{padding:.85rem .7rem}
  /* Gabungan dua kelas, bukan .sidebar-sub-head semata: aturan satu kelas di
     bagian "Sub-bagian menu Konten" bawah file ini muncul belakangan dan akan
     menyingkirkan padding sentuh ini. */
  .sidebar-nav .sidebar-sub-head{padding:1rem .7rem .55rem}
  .sidebar-footer a{display:inline-block;padding:.4rem 0}
}

/* =========================================================================
   Bagian khusus panel
   ========================================================================= */

/* --- Kartu identitas situs aktif di kepala sidebar (butir 1) --- */
.site-card{display:block;padding:.85rem .95rem}
.site-card-row{display:flex;align-items:center;gap:.55rem;min-width:0}
.site-card-name{font-weight:700;font-size:.9rem;line-height:1.25;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-card-domain{display:block;font-size:.73rem;color:var(--sidebar-ink-dim);text-decoration:none;word-break:break-all;margin-top:.25rem;transition:color .16s ease}
.site-card-domain:hover{color:#fff}
.site-card-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.site-card-tags span{font-size:.64rem;background:rgba(255,255,255,.1);color:var(--sidebar-ink);padding:.1rem .5rem;border-radius:999px;letter-spacing:.03em}
.site-card-open{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.78rem;font-weight:600;color:#fcd34d;text-decoration:none}
.site-card-open:hover{color:#fde68a}

/* --- Sub-bagian menu Konten (butir 6-7) --- */
.sidebar-sub{margin-bottom:.35rem}

/* Kepala sub-bagian dirender sebagai <button>, dan peramban TIDAK mewarisi
   font-family pada elemen tombol secara bawaan. Tanpa font-family:inherit
   di sini, judul kelompok jatuh ke font sistem (Arial) sementara tautan di
   sekitarnya memakai Segoe UI. Dua huruf berbeda dalam satu daftar adalah
   hal pertama yang membuat susunan ini terasa belum dirapikan. */
.sidebar-sub-head{
  display:flex;align-items:center;gap:.7rem;width:100%;
  font-family:inherit;
  background:none;border:0;color:var(--sidebar-ink-dim);
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  padding:.6rem .7rem;border-radius:var(--r-md);margin-bottom:.15rem;
  cursor:pointer;transition:background .16s ease,color .16s ease
}
/* Ruang label dipatok flex, bukan space-between, supaya cincin chevron tetap
   menempel di tepi kanan walau nama kelompok memanjang. */
.sidebar-sub-head>span{flex:1;min-width:0;text-align:left}
.sidebar-sub-head:hover{background:var(--sidebar-hover);color:#fff}
.sidebar-sub-head:focus-visible{outline:2px solid #93c5fd;outline-offset:-2px}

/* Chevron dibungkus cincin bundar kecil agar terbaca sebagai tombol alih,
   bukan sekadar tanda baca yang menempel pada teks. */
.sidebar-sub-head i{
  flex:0 0 auto;width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.65rem;border-radius:50%;background:rgba(255,255,255,.08);
  transition:transform .22s cubic-bezier(.4,0,.2,1),background .16s ease,color .16s ease
}
.sidebar-sub-head:hover i{background:rgba(255,255,255,.16)}
.sidebar-sub.open>.sidebar-sub-head i{transform:rotate(180deg)}

/* Kelompok yang memuat halaman aktif ditandai pada kepalanya sendiri. Atribut
   data-active="1" sudah dibubuhi tampilan PHP sejak awal, hanya belum pernah
   distyling. Tanpa tanda ini, pengguna tidak dapat melihat di mana posisinya
   ketika sub-bagian sedang tertutup. */
.sidebar-sub[data-active="1"]>.sidebar-sub-head{color:#e2e8f0}
.sidebar-sub[data-active="1"]>.sidebar-sub-head i{background:rgba(252,211,77,.18);color:#fcd34d}

/* Isi sub-bagian diberi tenggok kiri, sehingga batas kelompok terlihat dan
   anak tidak lagi disangka tautan tingkat atas. */
.sidebar-nav .sidebar-sub-items{
  position:relative;
  margin:.15rem 0 .3rem;
  padding:.2rem .2rem .2rem .95rem
}
.sidebar-nav .sidebar-sub-items::before{
  content:"";position:absolute;left:.42rem;top:.25rem;bottom:.25rem;width:2px;
  border-radius:999px;background:rgba(255,255,255,.10);
  transition:background .16s ease
}
.sidebar-sub.open>.sidebar-sub-items::before{background:rgba(255,255,255,.18)}

/* Anak ditahan lebih ringkas daripada tautan tingkat atas: sudut lebih
   kecil dan huruf sedikit mengecil, supaya tingkat kedua terlihat rendah di
   tangga hierarki. Pemilih memakai dua kelas karena .sidebar-nav a pada
   bagian kerangka mempunyai bobot sama; tanpa kelas kedua, aturan ini bisa
   kalah hanya karena urutan berkas. */
.sidebar-nav .sidebar-sub-items a{
  padding:.5rem .7rem;font-size:.85rem;color:var(--sidebar-ink);
  border-radius:var(--r-sm)
}
.sidebar-nav .sidebar-sub-items a i{font-size:.8rem}
.sidebar-nav .sidebar-sub-items a:hover{background:var(--sidebar-hover);color:#fff}
.sidebar-nav .sidebar-sub-items a.active{
  background:linear-gradient(90deg,rgba(37,99,235,.42),rgba(37,99,235,.14));
  color:#fff;font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent)
}
.sidebar-nav .sidebar-sub-items a.active i{color:#fcd34d}

/* Cara buka-tutup isi sub-bagian tidak lagi memakai display:none/blok di
   sini, karena aturan itu berada seterusnya setelah aturan beranimasi pada
   bagian laci menu di atas dan akan membatalkannya. Kini hanya ada satu
   aturan: max-height + visibility. */
.sidebar-nav a .side-badge{
  margin-left:auto;background:var(--accent);color:var(--accent-ink);
  font-size:.65rem;font-weight:800;padding:.05rem .42rem;border-radius:999px;
  min-width:18px;text-align:center;line-height:1.35
}

/* --- Penataan ulang menu website (geser-muat) ---------------------------- */
.menu-hint{font-size:.75rem;color:var(--ink-3);font-weight:600}
.menu-foot{font-size:.78rem}

.menu-tree{display:flex;flex-direction:column;gap:.5rem}
.menu-node{display:block}

/* Baris item. Seluruh lebar menjadi sasaran seret, tetapi hanya pegangan
   bergaris di kiri yang benar-benar memulai seretan, sehingga gulir halaman
   dan sorotan teks tidak ikut tertarik. */
.menu-row{
  display:flex;align-items:center;gap:.7rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:.5rem .6rem;
  transition:box-shadow .16s ease,border-color .16s ease
}
.menu-row:hover{border-color:var(--border-strong);box-shadow:var(--sh-sm)}

/* Anak diturunkan ke nada lebih rendah dan digeser masuk lewat rel kiri,
   sehingga hierarki terbaca sekilas tanpa perlu tanda panah. */
.menu-children{
  display:flex;flex-direction:column;gap:.5rem;
  margin:.5rem 0 0 1.9rem;padding-left:.9rem;
  border-left:2px solid var(--border);
  transition:border-color .16s ease
}
/* Wadah anak selalu ikut dicetak walau kosong, agar tetap menjadi sasaran
   seretan. Karena itu :empty tidak dapat dipakai -- wadah itu selalu memuat
   node teks spasi -- melainkan penanda kelas is-kosong yang dibubuhi
   tampilan dan dilepas kembali oleh pengendali saat anak pertama masuk. */
.menu-children.is-kosong{display:none}
.menu-node:hover>.menu-children{border-left-color:var(--border-strong)}
.menu-row.is-child{background:var(--surface-2);padding:.42rem .6rem}

.menu-drag{
  flex:0 0 auto;width:24px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--ink-3);
  border-radius:var(--r-xs);cursor:grab;
  /* Menyerahkan gerak penunjuk ke pengendali, bukan ke gulir halaman. */
  touch-action:none;
  transition:color .15s ease,background .15s ease
}
.menu-drag:hover{color:var(--ink);background:var(--surface-3)}
.menu-drag:focus-visible{outline:2px solid #60a5fa;outline-offset:1px}
.menu-drag:active{cursor:grabbing}
.menu-drag[disabled]{opacity:.35;cursor:not-allowed}

.menu-ico{
  flex:0 0 auto;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--surface-3);
  color:var(--ink-2);font-size:.82rem
}
.menu-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.menu-label{font-weight:600;color:var(--ink);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-url{font-size:.74rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-meta{flex:0 0 auto;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.menu-chip{
  display:inline-flex;align-items:center;
  font-size:.68rem;font-weight:600;color:var(--ink-2);
  background:var(--surface-3);border-radius:999px;padding:.15rem .5rem
}
.menu-act{flex:0 0 auto;display:flex;align-items:center;gap:.3rem}
.menu-act .icon-btn{width:30px;height:30px}

/* --- Keadaan seret --- */
/* Simpul sumber tetap menempati ruangnya supaya daftar tidak meloncat,
   hanya diredupkan dan bergaris putus-putus. */
.menu-node.is-source>.menu-row{opacity:.35;border-style:dashed}

/* Bayangan yang mengikuti penunjuk. */
.menu-ghost{
  position:fixed;z-index:1090;pointer-events:none;margin:0!important;
  background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 18px 40px -14px rgba(2,6,23,.45);
  transform-origin:top left
}
.menu-ghost .menu-act,
.menu-ghost .menu-drag{opacity:0}

/* Garis penanda tempat mendarat, lengkap dengan keterangan singkat agar
   pengguna tahu apakah hasilnya jadi sub-item, sebelum, atau sesudah. */
.menu-indicator{
  position:relative;height:2px;border-radius:999px;
  background:var(--brand);margin:.15rem 0;pointer-events:none
}
.menu-indicator::after{
  content:attr(data-pesan);
  position:absolute;left:0;top:-1.55rem;
  font-size:.68rem;font-weight:700;letter-spacing:.02em;
  color:#fff;background:var(--brand);
  padding:.1rem .45rem;border-radius:999px;white-space:nowrap
}

/* Selagi menunggu server, daftar diredupkan dan disentuhkan agar tidak
   tampak mengabaikan seretan yang baru dilepas. */
.menu-tree.is-busy{opacity:.55;pointer-events:none}
body.menu-dragging{-webkit-user-select:none;user-select:none}

@media (max-width: 575.98px){
  .menu-url{display:none}
  .menu-row{flex-wrap:wrap}
  .menu-meta{width:100%;justify-content:flex-start;margin-top:.35rem}
}

/* --- Breadcrumb (butir 18) --- */
.crumbbar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.82rem;margin-bottom:.9rem;color:var(--ink-3)}
.crumbbar a{color:var(--brand);text-decoration:none}
.crumbbar a:hover{text-decoration:underline;color:var(--brand-600)}
.crumbbar .crumb-current{color:var(--ink);font-weight:600}
.crumbbar .crumb-sep{color:var(--ink-3);font-size:.55rem}

/* --- Pita konteks lingkup superadmin (butir 2) --- */
.scope-strip{
  background:#fef9c3;color:#713f12;
  border:1px solid #fde68a;border-left:4px solid var(--accent);
  border-radius:var(--r-md);padding:.6rem .9rem;font-size:.85rem;margin-bottom:.9rem
}

/* --- Toast seragam (butir 17) --- */
#flashToasts .toast{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-lg);border:0}
.toast-body{display:flex;align-items:center;gap:.3rem;font-weight:600;font-size:.9rem}
.toast-success{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff}
.toast-error{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff}
.toast-warning{background:linear-gradient(180deg,#f59e0b,#d97706);color:#fff}

/* --- Empty state terpandu (butir 10) --- */
.empty-state{text-align:center;padding:3rem 1.5rem}
.empty-icon{
  width:72px;height:72px;margin:0 auto 1.1rem;border-radius:var(--r-xl);
  background:linear-gradient(145deg,var(--brand-050),var(--surface-3));
  color:var(--brand);display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;box-shadow:inset 0 0 0 1px rgba(37,99,235,.12)
}
.empty-text{font-weight:700;color:var(--ink);font-size:1.02rem;max-width:520px;margin-left:auto;margin-right:auto}
.empty-hint{color:var(--ink-2);font-size:.87rem;max-width:520px;margin-left:auto;margin-right:auto}

/* --- Tombol simpan menempel (butir 12) ---
   Memakai latar buram agar isi halaman yang lewat di belakangnya tidak
   mengganggu keterbacaan label tombol. Nilai padat diberikan lebih dulu
   sebagai cadangan bila color-mix tidak didukung. */
.form-actions{
  position:sticky;bottom:0;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  padding:.85rem 0 1rem;margin-top:1.5rem;z-index:1020;
  box-shadow:0 -8px 24px -16px rgba(15,23,42,.25)
}

/* --- Pratinjau slug langsung (butir 13) --- */
.slug-live{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.4rem}
.slug-live[hidden]{display:none}
.slug-preview{background:var(--surface-3);color:var(--brand);padding:.1rem .45rem;border-radius:var(--r-xs);word-break:break-all;font-size:.8rem}
.slug-status{font-weight:600;font-size:.78rem}
.slug-status.ok{color:#16a34a}
.slug-status.warn{color:#b45309}

/* --- Pemilih Media Library (butir 15) --- */
.media-pick-row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.media-pick-info{display:inline-flex;align-items:center;gap:.5rem}
.media-pick-info[hidden]{display:none}
.media-pick-info .thumb{width:44px;height:32px}
#mediaPickerGrid .media-cell{
  cursor:pointer;border:2px solid transparent;border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface-3);padding:0;display:block;width:100%;text-align:center;
  transition:border-color .15s ease,transform .15s ease
}
#mediaPickerGrid .media-cell:hover{border-color:var(--brand);transform:translateY(-1px)}
#mediaPickerGrid .media-cell img{width:100%;height:84px;object-fit:cover;display:block}
#mediaPickerGrid .media-cell span{display:block;font-size:.66rem;color:var(--ink-2);padding:.25rem .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Checklist kelengkapan situs (butir 3) --- */
.check-percent{font-size:1.8rem;font-weight:800;color:#16a34a;line-height:1;font-variant-numeric:tabular-nums}
.check-item{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px dashed var(--border)}
.check-item:last-child{border-bottom:0}
.check-item .check-icon{width:22px;text-align:center;color:var(--ink-3);font-size:.95rem}
.check-item.ok .check-icon{color:#16a34a}
.check-label{font-weight:600;font-size:.88rem;color:var(--ink)}
.check-hint{line-height:1.35;color:var(--ink-2)}

/* --- Grafik kunjungan 14 hari (butir 4) --- */
.visit-chart{display:flex;align-items:flex-end;gap:.3rem;height:170px}
.vc-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.vc-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.vc-bar{
  width:70%;max-width:26px;
  background:linear-gradient(180deg,#60a5fa,#1d4ed8);
  border-radius:4px 4px 0 0;min-height:2px;transition:height .3s ease
}
.vc-label{font-size:.55rem;color:var(--ink-3);margin-top:.35rem;white-space:nowrap}

/* --- Mode kartu di layar kecil (butir 20) --- */
@media (max-width: 767.98px){
  .admin-content table.table thead{display:none}
  .admin-content table.table,
  .admin-content table.table tbody,
  .admin-content table.table tr,
  .admin-content table.table td{display:block;width:auto}
  .admin-content table.table tr{
    border:1px solid var(--border);border-radius:var(--r-md);
    background:var(--surface);margin:0 0 .7rem;padding:.4rem .2rem;
    box-shadow:var(--sh-xs)
  }
  .admin-content table.table td{
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
    border:0;padding:.35rem .8rem;text-align:right;font-size:.87rem
  }
  .admin-content table.table td::before{
    content:attr(data-label);font-size:.68rem;text-transform:uppercase;
    letter-spacing:.05em;color:var(--ink-3);font-weight:700;text-align:left;flex:0 0 auto
  }
  .admin-content table.table td.text-end{justify-content:space-between}
  .visit-chart{gap:.15rem;height:130px}
  .vc-label{font-size:.45rem}
}

/* --- Penyesuaian mode gelap ---
   Sebagian besar warna sudah mengikuti token, sehingga blok ini hanya
   menangani hal yang tidak dapat dinyatakan lewat token: warna pasti pada
   lencana, gradien batang grafik, serta komponen pihak ketiga. */
[data-bs-theme="dark"] .admin-topbar .dropdown-toggle{color:var(--ink)!important}
[data-bs-theme="dark"] .admin-topbar .dropdown-toggle:hover{color:#93c5fd!important}
[data-bs-theme="dark"] .admin-topbar .btn-outline-secondary{background:var(--surface-2);border-color:var(--border-strong);color:var(--ink-2)}
[data-bs-theme="dark"] .admin-topbar .btn-outline-secondary:hover{background:var(--surface-3);color:var(--ink)}
[data-bs-theme="dark"] .table thead th{background:var(--surface-2)}
[data-bs-theme="dark"] .badge-active{background:#14532d;color:#86efac;box-shadow:inset 0 0 0 1px rgba(134,239,172,.16)}
[data-bs-theme="dark"] .badge-draft{background:#334155;color:#cbd5e1;box-shadow:inset 0 0 0 1px rgba(203,213,225,.16)}
[data-bs-theme="dark"] .badge-scheduled{background:#1e3a8a;color:#93c5fd;box-shadow:inset 0 0 0 1px rgba(147,197,253,.16)}
[data-bs-theme="dark"] .badge-inactive{background:#7f1d1d;color:#fca5a5;box-shadow:inset 0 0 0 1px rgba(252,165,165,.16)}
[data-bs-theme="dark"] .scope-strip{background:#3a2f06;color:#fcd34d;border-color:#715c0a;border-left-color:var(--accent)}
[data-bs-theme="dark"] .slug-status.ok{color:#4ade80}
[data-bs-theme="dark"] .slug-status.warn{color:#fbbf24}
[data-bs-theme="dark"] .check-item.ok .check-icon{color:#4ade80}
[data-bs-theme="dark"] .check-percent{color:#4ade80}
[data-bs-theme="dark"] .vc-bar{background:linear-gradient(180deg,#93c5fd,#2563eb)}
/* Ikon kartu statistik dibubuhi warna lewat gaya inline di tampilan, dan gaya
   inline mengalahkan aturan biasa. Pada mode gelap ubin biru muda itu menjadi
   perekat mata, sehingga dinetralkan memakai !important. */
[data-bs-theme="dark"] .stat-card .stat-icon{background:var(--surface-3)!important;color:#93c5fd!important}
[data-bs-theme="dark"] .form-text{color:var(--ink-3)}
[data-bs-theme="dark"] .progress{background:var(--surface-3)}
[data-bs-theme="dark"] .dropdown-menu{background:var(--surface);border-color:var(--border)}
[data-bs-theme="dark"] .dropdown-item{color:var(--ink)}
[data-bs-theme="dark"] .dropdown-item:hover{background:var(--surface-3);color:var(--ink)}
[data-bs-theme="dark"] .dropdown-item-text{color:var(--ink-3)!important}
[data-bs-theme="dark"] .list-group-item{background:var(--surface);color:var(--ink);border-color:var(--border)}
[data-bs-theme="dark"] .alert-danger{background:#3f1212;border-color:#7f1d1d;color:#fecaca}
[data-bs-theme="dark"] #mediaPickerGrid .media-cell{background:var(--surface-3)}
[data-bs-theme="dark"] #mediaPickerGrid .media-cell span{color:var(--ink-2)}
[data-bs-theme="dark"] #mediaPickerGrid .media-cell:hover{border-color:#60a5fa}
[data-bs-theme="dark"] .sidebar-footer a{color:var(--sidebar-ink-dim)}
[data-bs-theme="dark"] .btn-outline-secondary{border-color:var(--border-strong);color:var(--ink-2)}
[data-bs-theme="dark"] .btn-outline-secondary:hover{background:var(--surface-3);color:var(--ink)}
[data-bs-theme="dark"] .toast{border:1px solid var(--border)}
@media (max-width: 767.98px){
  [data-bs-theme="dark"] .admin-content table.table tr{background:var(--surface);border-color:var(--border)}
  [data-bs-theme="dark"] .admin-content table.table td::before{color:var(--ink-3)}
}

/* ---- Editor teks kaya (Quill) untuk field bertipe "editor" ---- */
.rich-editor{border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.rich-editor .ql-toolbar.ql-snow{border:0;border-bottom:1px solid var(--border);background:var(--surface-2);padding:.4rem .6rem}
.rich-editor .ql-container.ql-snow{border:0;font:inherit}
.rich-editor .ql-editor{min-height:320px;padding:.9rem 1rem;font-size:.95rem;line-height:1.75}
.rich-editor .ql-editor.ql-blank::before{font-style:normal;color:var(--ink-3);left:1rem;right:1rem}
.rich-editor .ql-editor p,.rich-editor .ql-editor ul,.rich-editor .ql-editor ol{margin-bottom:.7rem}
.rich-editor .ql-editor img{max-width:100%;height:auto;border-radius:var(--r-xs);margin:.35rem 0}
.rich-editor .ql-editor blockquote{border-left:4px solid #0b3d91;padding-left:.75rem;color:var(--ink-2)}
.rich-editor .ql-editor pre.ql-syntax{background:#0f172a;color:#e2e8f0;padding:.6rem .8rem;border-radius:var(--r-xs);font-size:.85rem}
.rich-editor.is-invalid,.rich-editor.rich-editor-invalid{border-color:#dc3545}

/* Tombol "Sisipkan dari Media" pada toolbar. */
.rich-editor .ql-toolbar button.ql-media svg{display:none}
.rich-editor .ql-toolbar button.ql-media i{display:block;font-size:.85rem;line-height:1.25}

/* Tooltip tautan bawaan Quill. */
.ql-tooltip.ql-editing{z-index:1060}

/* Mode gelap: samakan dengan palet panel. */
[data-bs-theme="dark"] .rich-editor{background:var(--surface);border-color:var(--border-strong)}
[data-bs-theme="dark"] .rich-editor .ql-toolbar.ql-snow{background:var(--surface-2);border-bottom-color:var(--border-strong)}
[data-bs-theme="dark"] .rich-editor .ql-snow .ql-stroke{stroke:#cbd5e1}
[data-bs-theme="dark"] .rich-editor .ql-snow .ql-fill,
[data-bs-theme="dark"] .rich-editor .ql-snow .ql-stroke.ql-fill,
[data-bs-theme="dark"] .rich-editor .ql-snow .ql-stroke.ql-thin{fill:#cbd5e1}
[data-bs-theme="dark"] .rich-editor .ql-snow button:hover .ql-stroke{stroke:#93c5fd}
[data-bs-theme="dark"] .rich-editor .ql-snow .ql-active .ql-stroke{stroke:#93c5fd}
[data-bs-theme="dark"] .rich-editor .ql-snow .ql-picker{color:#cbd5e1}
[data-bs-theme="dark"] .rich-editor .ql-snow .ql-picker-label{color:#cbd5e1}
[data-bs-theme="dark"] .rich-editor .ql-snow .ql-picker-options{background:var(--surface-2);border-color:var(--border-strong)}
[data-bs-theme="dark"] .rich-editor .ql-editor{color:var(--ink)}
[data-bs-theme="dark"] .rich-editor .ql-editor.ql-blank::before{color:var(--ink-3)}
[data-bs-theme="dark"] .rich-editor .ql-editor blockquote{color:var(--ink-2);border-left-color:#93c5fd}
[data-bs-theme="dark"] .rich-editor .ql-editor a{color:#93c5fd}
[data-bs-theme="dark"] .ql-snow .ql-tooltip{background:var(--surface-2);border-color:var(--border-strong);color:var(--ink-2);box-shadow:none}
[data-bs-theme="dark"] .ql-snow .ql-tooltip input[type=text],
[data-bs-theme="dark"] .ql-snow .ql-tooltip input.ql-edit-area input{background:var(--surface);border-color:var(--border-strong);color:var(--ink)}
[data-bs-theme="dark"] .rich-editor .ql-snow button.ql-media i{color:#cbd5e1}

/* ---- Riwayat revisi halaman (butir 5) ---- */
.revision-changes{list-style:none;padding:0;max-width:46rem}
.revision-changes li{padding:.15rem 0;border-bottom:1px dashed var(--border)}
.revision-changes li:last-child{border-bottom:0}
[data-bs-theme="dark"] .revision-changes .text-muted{color:var(--ink-3)!important}

/* ---- Pemilih token komponen dinamis (butir 8) ---- */
.cms-token-picker{
  position:absolute;z-index:1080;width:22rem;max-width:calc(100vw - 1rem);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:.85rem .9rem;font-family:inherit
}
.cms-token-picker[hidden]{display:none}
.cms-token-picker__judul{margin:0 0 .6rem;font-size:.9rem;font-weight:700;color:var(--ink)}
.cms-token-picker__daftar{display:grid;gap:.4rem}
.cms-token-picker__baris{display:grid;grid-template-columns:1fr auto auto;gap:.45rem;align-items:center;padding:.4rem .45rem;border-radius:var(--r-sm);margin:0;transition:background .15s ease}
.cms-token-picker__baris:hover{background:var(--surface-2)}
.cms-token-picker__teks{min-width:0}
.cms-token-picker__teks b{display:block;font-size:.85rem;color:var(--ink);font-weight:600}
.cms-token-picker__teks small{display:block;font-size:.72rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cms-token-picker__arg{
  width:8.5rem;min-width:0;padding:.3rem .5rem;
  border:1px solid var(--border-strong);border-radius:var(--r-xs);
  font-size:.8rem;background:var(--surface);color:var(--ink)
}
.cms-token-picker__sisip{
  border:0;border-radius:var(--r-xs);background:var(--brand-600);color:#fff;
  padding:.35rem .7rem;font-size:.78rem;font-weight:600;cursor:pointer;
  transition:background .15s ease
}
.cms-token-picker__sisip:hover{background:var(--brand)}
[data-bs-theme="dark"] .cms-token-picker__sisip{background:#93c5fd;color:#0f172a}
[data-bs-theme="dark"] .cms-token-picker__sisip:hover{background:#bfdbfe}
[data-bs-theme="dark"] .rich-editor .ql-snow button.ql-token i{color:#cbd5e1}

/* --- 5. Pemilih ikon ----------------------------------------------------- */
/* Kotak pratinjau di kiri input menampilkan ikon yang sedang terpilih,
   sehingga kelas Font Awesome tidak perlu dibayangkan sendiri. */
.icon-picker-preview{
  min-width:2.75rem;justify-content:center;
  background:var(--surface-3);border-color:var(--border-strong);color:var(--brand-600)
}
.icon-picker-preview i{font-size:1.05rem}

/* Menu kisi ikon: lebar nyaman, tinggi terbatas, dan badan yang dapat
   digulir agar tidak memanjang melebihi layar. */
.icon-picker-menu{
  padding:.6rem;width:min(26rem,92vw);
  border-color:var(--border);box-shadow:var(--sh-lg)
}
.icon-picker-search{margin-bottom:.5rem}
.icon-picker-scroll{max-height:19rem;overflow:auto;overscroll-behavior:contain}

.icon-group+.icon-group{margin-top:.6rem}
.icon-group-title{
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin:.15rem 0 .35rem
}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.5rem,1fr));gap:.3rem}
.icon-cell{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);
  color:var(--ink-2);font-size:1rem;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease,transform .12s ease
}
.icon-cell:hover{
  background:var(--brand-050);border-color:var(--brand);color:var(--brand-600);
  transform:translateY(-1px)
}
.icon-cell:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
.icon-cell.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

/* Atribut hidden tidak cukup untuk menyembunyikan sel/kisi saat pencarian:
   display:flex di atas mengalahkan gaya bawaan peramban untuk [hidden]. */
.icon-cell[hidden],.icon-group[hidden]{display:none}

/* --- 6. Media sosial (panel) --------------------------------------------- */
/* Kartu per kanal: ikon berwarna merek, judul + status, tombol uji. Garis tepi
   dan titik status menandai kanal yang sudah terisi supaya keadaan seluruh
   kanal terbaca sekali pandang. */
.sos-card{
  height:100%;padding:.85rem .9rem;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}
.sos-card:focus-within{border-color:var(--brand);background:var(--surface);box-shadow:var(--focus)}
.sos-card.is-terisi{border-color:var(--brand)}

.sos-card__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.sos-card__icon{
  flex:0 0 auto;width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border-radius:var(--r-sm);color:#fff;font-size:1.05rem;box-shadow:var(--sh-xs)
}
.sos-card__label{display:block;font-weight:700;color:var(--ink);line-height:1.2;cursor:pointer}
.sos-card__status{display:block;font-size:.72rem;color:var(--ink-3);letter-spacing:.02em}
.sos-card.is-terisi .sos-card__status{color:var(--brand-600);font-weight:600}
.sos-card.is-terisi .sos-card__status::before{content:"●";margin-right:.3rem;font-size:.62em;vertical-align:.1em}
.sos-card__uji{flex:0 0 auto;padding:.18rem .45rem;font-size:.8rem}

/* Peringatan format nomor WhatsApp: kuning lembut pada mode terang, versi
   redup pada mode gelap agar tetap terbaca tanpa menyilaukan. */
.sos-card__pakai{
  margin-top:.5rem;padding:.4rem .55rem;font-size:.78rem;
  background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r-xs);color:#92400e
}
[data-bs-theme="dark"] .sos-card__pakai{background:#2b2210;border-color:#5c4a0c;color:#fcd34d}

/* Pratinjau bentuk ikon pada footer situs. */
.sos-preview{display:flex;flex-wrap:wrap;gap:.5rem}
.sos-preview__item{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .7rem;font-size:.85rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:999px;color:var(--ink-2)
}
.sos-preview__item i{color:var(--brand)}
.sos-preview__item[hidden],.sos-card__pakai[hidden]{display:none}
.sos-preview__kosong{font-size:.85rem;color:var(--ink-3)}

/* --- 7. Aksesibilitas ---------------------------------------------------- */
/* Cincin fokus terlihat untuk seluruh unsur yang dapat dijangkau keyboard.
   Dipakai :focus-visible supaya hanya muncul saat navigasi papan ketik,
   bukan ketika diklik dengan tetikus. */
.admin-page a:focus-visible,
.admin-page button:focus-visible,
.admin-page [role="button"]:focus-visible{
  outline:2px solid #60a5fa;outline-offset:2px;border-radius:var(--r-xs)
}

/* Pengguna dapat meminta pengurangan gerak pada tingkat sistem operasi.
   Semua peralihan diringkas menjadi instan; keadaan tetap berubah, hanya
   animasinya yang dihapus, sehingga fungsi tidak berkurang sama sekali. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
}