@font-face{font-family:Inter;src:url('./inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--primary:#2563eb;--primary-light:#eff6ff;--canvas:#fafafa;--surface:#fff;--text:#18181b;--muted:#71717a;--border:#e4e4e7;--sidebar:14rem;--radius:12px;--shadow:0 1px 2px #0000000d;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--text);font:14px/1.6 Inter,ui-sans-serif,system-ui,sans-serif}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}:focus-visible{outline:2px solid var(--primary);outline-offset:3px}h1{font-size:30px;letter-spacing:-.025em;line-height:1.2;margin:0 0 12px;font-weight:700;overflow-wrap:anywhere}h2{font-size:18px;margin:28px 0 12px}p{margin:0 0 14px;line-height:1.7}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.muted{color:var(--muted)}.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:white;padding:12px;border:2px solid var(--primary)}.skip-link:focus{top:10px}
.topbar{position:sticky;top:0;z-index:30;height:64px;display:flex;align-items:center;gap:16px;background:white;border-bottom:1px solid var(--border);box-shadow:var(--shadow);padding:0 24px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-size:19px;font-weight:700;white-space:nowrap}.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--primary);color:white;border-radius:9px;font-size:19px}.topbar-label{color:var(--muted);font-size:13px}.account{margin-left:auto;display:flex;gap:12px;align-items:center;min-width:0}.account-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar{border-radius:50%;width:32px;height:32px;display:grid;place-items:center;background:#e0e7ff;color:#3730a3;font-weight:600}.account form{margin:0}.icon-button{display:inline-grid;place-items:center;padding:8px;background:none;border:0;border-radius:8px;color:#71717a;cursor:pointer;margin:0;min-height:40px;min-width:40px}.icon-button:hover{background:#f4f4f5}.logout{background:white;color:#52525b;border:1px solid var(--border);margin:0;padding:7px 12px;font-size:13px;min-height:36px}.logout:hover{background:#f4f4f5}
.sidebar{position:fixed;left:0;top:64px;bottom:0;width:var(--sidebar);padding:24px 16px;background:var(--canvas);display:flex;flex-direction:column;overflow:auto;z-index:25}.nav-heading{font-size:12px;font-weight:600;color:var(--muted);margin:8px 12px 10px}.site-label{margin-top:28px;overflow-wrap:anywhere}.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;color:#52525b;border-radius:8px;font-weight:500;margin:4px 0;line-height:1.4}.nav-link:hover{background:#f4f4f5;text-decoration:none}.nav-link[aria-current=page]{background:var(--primary-light);color:var(--primary);font-weight:600}.sidebar-footer{margin-top:auto;padding:32px 12px 0;display:flex;flex-direction:column;font-size:12px;color:var(--muted)}.sidebar-footer strong{color:#52525b}.sidebar-close{display:none}.main-content{margin-left:var(--sidebar);padding:32px;max-width:1600px;min-width:0}.sidebar-collapsed .sidebar{display:none}.sidebar-collapsed .main-content{margin-left:0}.sidebar-backdrop{position:fixed;inset:64px 0 0;background:#09090b80;border:0;border-radius:0;z-index:35;margin:0;width:100%;height:calc(100% - 64px)}[hidden]{display:none!important}
.panel,.fields,.content-form{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin:24px 0}.fields{max-width:820px}.content-form{max-width:1040px}label{display:block;font-weight:500;margin:24px 0 6px}label:first-child{margin-top:0}input,select,textarea{display:block;width:100%;border:1px solid #d4d4d8;border-radius:8px;background:white;color:var(--text);padding:9px 12px;box-shadow:var(--shadow);font-weight:400;margin-top:4px;min-height:40px;line-height:1.6}textarea{resize:vertical;line-height:1.7}input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:0}button,.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:var(--primary);color:white;border:0;border-radius:8px;font-weight:600;padding:10px 16px;margin-top:16px;cursor:pointer;min-height:40px}.button:hover,button:hover{background:#1d4ed8;text-decoration:none}.icon-button:hover{background:#f4f4f5}.icon-button,.sidebar-backdrop{color:var(--muted)}.icon-button{background:transparent;margin:0;padding:8px}.sidebar-backdrop:hover{background:#09090b80}.logout{background:white;color:#52525b;margin:0}.danger{background:#dc2626}.danger:hover{background:#b91c1c}.form-actions{display:flex;gap:18px;align-items:center;margin-top:24px}.form-actions button,.form-actions a{margin:0}.alert{padding:16px;background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;color:#b91c1c;margin-bottom:24px}.alert ul{margin:8px 0 0;padding-left:20px}.notice{padding:16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;color:#166534}.page-heading{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:24px}.page-heading p{margin:0}.page-heading .button{margin:0;white-space:nowrap}.page-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.back-button{background:white;color:#3f3f46;border:1px solid #d4d4d8;box-shadow:var(--shadow);margin:0 0 16px}.back-button:hover{background:#f4f4f5;color:var(--text)}.back-button svg{width:18px;height:18px}.page-actions .back-button{margin:0}.slug-note{margin:8px 0 0;font-size:13px;color:var(--muted)}.row-manage-wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.row-manage-wrap:last-child{border-bottom:0}.row-manage-wrap .file-name{font-weight:600;overflow-wrap:anywhere;flex:1;min-width:180px}.row-manage-wrap form{margin:0}.row-manage-wrap .danger{margin:0;padding:6px 12px;min-height:34px;font-size:13px}pre.path{background:#f4f4f5;border:1px solid var(--border);border-radius:8px;padding:10px 12px;overflow:auto;white-space:pre-wrap;word-break:break-all;font-size:13px;margin:8px 0}.panel h2{font-size:16px;margin:0 0 8px}.manage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:24px 0}.manage-card{display:flex;flex-direction:column;gap:14px;background:white;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:22px;color:var(--text);text-decoration:none}.manage-card:hover{border-color:var(--primary);text-decoration:none}.manage-card .card-icon{width:46px;height:46px;border-radius:11px;background:var(--primary-light);color:var(--primary);display:grid;place-items:center}.manage-card svg{width:24px;height:24px}.card-text{display:flex;flex-direction:column;gap:4px}.card-text strong{font-size:16px}.card-text small{color:var(--muted);line-height:1.45;overflow-wrap:anywhere}td .row-manage{display:inline-block;margin:0;padding:8px 14px;min-height:36px;font-size:13px;white-space:nowrap}
.table-wrap{overflow:auto;background:white;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);margin:24px 0}table{border-collapse:collapse;width:100%;text-align:left}th{font-size:13px;background:#fafafa;font-weight:600;white-space:nowrap}td,th{padding:16px 20px;border-bottom:1px solid var(--border)}td{overflow-wrap:break-word}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafafa}td:last-child a{display:inline-block;margin:4px 12px 4px 0;font-weight:600}td:last-child{min-width:165px}.badge{display:inline-flex;padding:3px 9px;border:1px solid #d4d4d8;border-radius:6px;font-size:12px;font-weight:500;color:#52525b;background:#fafafa}.badge-active{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}.pagination svg{max-width:20px}.pagination nav{display:flex;flex-wrap:wrap;gap:12px}.pagination a{display:inline-block;padding:6px}.empty{padding:48px 24px;text-align:center;color:var(--muted)}.help{padding:16px 20px;background:#f4f4f5;border-radius:8px;color:#52525b;font-size:13px;margin-top:24px}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:48px 24px}.auth-card{background:white;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);width:100%;max-width:512px;padding:48px}.auth-brand{display:flex;justify-content:center;margin-bottom:24px}.auth-card h1{font-size:24px;text-align:center;line-height:1.35}.auth-card .intro{text-align:center;color:var(--muted);margin:12px 0 32px}.auth-card .fields{margin:0;padding:0;box-shadow:none;border:0}.auth-card label{margin-top:24px}.auth-card button{width:100%;margin-top:28px}.auth-note{font-size:12px;line-height:1.6;text-align:center;color:var(--muted);margin:28px 0 0}.required{color:#dc2626}.auth-card .brand-mark{border-radius:50%}
@media(max-width:1023px){.sidebar{display:none;background:white;z-index:40;width:260px}.main-content{margin-left:0;padding:24px}.menu-open .sidebar{display:flex}.sidebar-close{display:grid;align-self:flex-end}.topbar-label{display:none}.topbar{padding:0 16px;gap:8px}.menu-open{overflow:hidden}.account-name{max-width:120px}}
@media(max-width:600px){.main-content{padding:24px 16px}h1{font-size:25px}.account-name{display:none}.avatar{display:none}.brand{font-size:17px}.account{gap:6px}.page-heading{align-items:flex-start;flex-direction:column;gap:12px}.panel,.fields,.content-form{padding:20px 16px}.auth-shell{padding:24px 16px}.auth-card{padding:32px 24px}.auth-card h1{font-size:23px}.table-wrap{margin-top:20px}td,th{padding:14px 16px}table{min-width:520px}.form-actions{flex-wrap:wrap}.help{padding:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Pengaturan User */
.user-actions{display:flex;gap:6px;align-items:center}.user-modal{width:min(100% - 32px,560px);border:0;border-radius:14px;padding:0;box-shadow:0 24px 70px #0004}.user-modal::backdrop{background:#18181b80}.user-modal form{padding:24px}.user-modal .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.user-modal h2{margin:0}.user-modal label{margin-top:20px}.user-modal .form-actions{margin-top:24px}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.page-actions{align-items:center}
.page-actions .button,.page-actions .back-button{box-sizing:border-box;height:40px;min-height:40px;padding:0 18px;margin:0;line-height:1;border-radius:8px;white-space:nowrap}
.tabs{display:flex;gap:10px;border-bottom:1px solid var(--border);margin:24px 0 26px}
.tab-btn{background:none;border:none;padding:12px 20px;font-size:15px;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;line-height:1.2}
.tab-btn.active{color:#2563eb;border-bottom-color:#2563eb;background:#eff6ff;border-radius:9px 9px 0 0}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:0 0 16px}
.tab-btn.sub{font-size:13px;padding:8px 12px}
.subpanel{padding-top:6px}
.empty{padding:34px;text-align:center;color:#9ca3af;border:1px dashed var(--border);border-radius:10px;background:#fafafa}
/* Dashboard responsive, menu CRUD, dan pustaka media */
.content-form label{margin-top:30px}.content-form label+input,.content-form label+select,.content-form label+textarea{margin-top:9px}.content-form .muted{margin-top:10px}.manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.manage-card{min-width:0}.media-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin:24px 0}.media-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}.media-thumb{display:block;background:#f4f4f5;aspect-ratio:4/3}.media-thumb img{display:block;width:100%;height:100%;object-fit:cover}.media-card-info{padding:12px 14px 6px;overflow:hidden}.media-card-info strong,.media-card-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-card-info small{color:var(--muted);font-size:12px;margin-top:2px}.media-card-actions{padding:8px 10px 10px;display:flex;gap:6px;align-items:center}.media-card-actions form{margin:0}.media-card-actions .icon-button{min-width:36px;min-height:36px}.media-delete,.menu-delete{color:#fff!important;background:#dc2626!important}.media-delete:hover,.menu-delete:hover{background:#b91c1c!important}.media-edit-preview{display:block;max-width:min(100%,640px);max-height:460px;object-fit:contain;background:#f4f4f5;border:1px solid var(--border);border-radius:12px;padding:8px;margin:18px 0}.site-asset-thumbnail{display:block;width:160px;height:80px;object-fit:contain;object-position:left center;border:1px solid var(--border);border-radius:10px;background:#fafafa;padding:6px;margin:10px 0}.site-icon-thumbnail{width:80px;height:80px}.menu-toolbar{display:flex;justify-content:flex-start;margin:0 0 12px}.menu-crud{border:1px solid var(--border);color:#52525b;background:#fff}.menu-crud:hover{background:#f4f4f5}.site-menu-list{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}.site-menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}.site-menu-row:last-child{border-bottom:0}.site-menu-row strong,.site-menu-row small{display:block;overflow-wrap:break-word}.site-menu-row small{color:var(--muted);font-size:12px;margin-top:2px}.menu-row-actions{display:flex;gap:6px;flex-shrink:0}.menu-row-actions button{margin:0}.menu-modal{width:min(100% - 32px,520px);border:0;border-radius:14px;padding:0;box-shadow:0 20px 60px #0005}.menu-modal::backdrop{background:#09090b80}.menu-modal form{padding:20px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0}.modal-head .icon-button{margin:0}.secondary{background:#fff;color:#3f3f46;border:1px solid var(--border)}.secondary:hover{background:#f4f4f5}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){.manage-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.manage-card{padding:14px}.manage-card .card-icon{width:32px;height:32px}.manage-card .card-text strong{font-size:14px}.manage-card .card-text small{font-size:12px}.manage-list{max-height:150px}.media-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.media-card-info{padding:10px 10px 4px}.media-card-actions{padding:6px 7px 8px}.site-menu-row{padding:11px}.content-form label{margin-top:28px}}
/* Radio "Tampilkan pada" di modal banner */
.banner-device-group{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px}.banner-device-group .radio-inline{display:inline-flex;align-items:center;gap:7px;margin:0;font-weight:500;cursor:pointer}.banner-device-group input[type=radio]{margin:0;width:auto;accent-color:#2563eb}
/* Tombol masuk dengan Google + pemisah di halaman login */
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:#9ca3af;font-size:13px}.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#3f3f46;font-weight:600;text-decoration:none}.google-btn:hover{background:#f4f4f5}
/* Pagination dashboard */
.msm-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin:26px 0 8px}.msm-pager-info{margin:0;color:#52525b;font-size:14px}.msm-pager-info strong{color:#18181b}.msm-pager-list{display:flex;list-style:none;margin:0;padding:0}.msm-pager-list li{margin:0}.msm-pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--border);background:#fff;color:#3f3f46;text-decoration:none;font-size:15px;margin-left:-1px}.msm-pager-list li:first-child .msm-pager-btn{border-radius:8px 0 0 8px;margin-left:0}.msm-pager-list li:last-child .msm-pager-btn{border-radius:0 8px 8px 0}a.msm-pager-btn:hover{background:#f4f4f5}.msm-pager-btn.is-active{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:600;position:relative;z-index:1}.msm-pager-btn.is-disabled{color:#c4c4c8;cursor:default}.msm-pager-btn.is-gap{color:#9ca3af;cursor:default}@media(max-width:600px){.msm-pager{gap:10px}.msm-pager-info{width:100%;text-align:center}.msm-pager-btn{min-width:38px;height:38px;padding:0 8px;font-size:14px}}
/* Grid kolom untuk form pengaturan */
.field-grid{display:grid;gap:0 22px}.field-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.field-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.field-grid .field{min-width:0}.field-grid .field label{display:block}@media(max-width:900px){.field-grid.cols-3,.field-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.field-grid.cols-2,.field-grid.cols-3,.field-grid.cols-4{grid-template-columns:1fr}}
/* Pencarian user, avatar, badge login, tombol preview website */
.user-search{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}.user-search input[type=search]{flex:1 1 280px;max-width:420px;margin:0}.user-search button,.user-search .button{margin:0}.user-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:8px}.badge-google{background:#e8f0fe;color:#1a56db;border-color:#c6dafc}.badge-warn{background:#fef3c7;color:#92400e;border-color:#fde68a}.preview-actions{display:flex;gap:8px;flex-wrap:wrap}.preview-actions .button{margin:0}
/* Modal user 2 kolom + daftar centang situs (mengalir kiri ke kanan) */
.user-modal.wide{width:min(100% - 32px,860px)}.user-modal.wide .field-grid{gap:0 24px}.user-modal.wide .field label{margin-top:18px}.user-modal.wide .field:first-child label,.user-modal.wide .field:nth-child(2) label{margin-top:8px}.user-modal .muted{margin-top:6px;font-size:12px}.radio-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px}.site-checks{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-top:9px}.check-inline{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:500;cursor:pointer}.check-inline input[type=checkbox]{margin:0;width:auto;accent-color:#2563eb}@media(max-width:760px){.user-modal.wide .field-grid.cols-2{grid-template-columns:1fr}.site-checks{grid-template-columns:1fr}}
/* Radio & checkbox: jangan ikut aturan block/width:100% milik input umum */
input[type=radio],input[type=checkbox]{display:inline-block;width:auto;min-width:0;margin:0;padding:0;box-shadow:none;border-radius:0;vertical-align:middle;accent-color:#2563eb;flex:0 0 auto}.radio-inline,.check-inline{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:500;cursor:pointer}.user-modal.wide .field label{margin-top:14px}.user-modal.wide .field>p.muted:last-child{margin-bottom:2px}.user-modal.wide .site-checks{gap:10px 18px}

/* Thumbnail pada daftar artikel — supaya terlihat mana yang belum punya gambar unggulan. */
.col-thumb{width:76px}
.art-thumb{display:block;width:60px;height:45px;object-fit:cover;border-radius:4px;background:#f1f5f9}
.art-thumb-none{display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:18px;border:1px dashed #cbd5e1;background:transparent}

/* Kolom aksi tabel diletakkan paling kiri (2026-09-12) — lebar menyesuaikan isi, tidak melar. */
.col-act{width:1%;white-space:nowrap}
.col-act .menu-row-actions,.col-act .user-actions,.col-act .preview-actions{flex-wrap:nowrap}

/* Baris CRUD di tab Pengaturan Web: aksi paling kiri, konten menempel setelahnya
   (bukan melayang ke kanan seperti .site-menu-row default yang space-between). */
.site-menu-row.act-left{justify-content:flex-start}

/* Tombol garis (outline) — dipakai di daftar Website: Lihat Draft (biru), Lihat Website (hijau). */
.button.outline-blue{background:transparent;color:#2563eb;border:1.5px solid #2563eb}
.button.outline-blue:hover{background:#eff6ff}
.button.outline-green{background:transparent;color:#16a34a;border:1.5px solid #16a34a}
.button.outline-green:hover{background:#f0fdf4}

/* Bikin wrapper toggle (#custom-appearance) transparan bagi grid induknya, supaya
   field di dalamnya ikut tersusun dalam grid 3 kolom yang sama saat ditampilkan. */
.contents{display:contents}

/* Slug menu mengikuti Halaman terpilih -> field dikunci, beri penanda visual. */
#menu-slug[readonly]{background:#f4f4f5;color:var(--muted);cursor:not-allowed}

/* List Menu (Pengaturan Web > Menu > List Menu): judul kategori lebih besar & rata kiri. */
.menu-list-title{font-size:18px;text-align:left}

/* Tabel Users: kolom Aktif dibatasi lebar (badge "Menunggu persetujuan" pecah 2
   baris), kolom Login selalu 1 baris (badge Google+Password tak boleh bertumpuk). */
.col-active .badge-warn{display:inline-block;max-width:104px;white-space:normal;text-align:center;line-height:1.3}
.col-login{white-space:nowrap}
.col-login .badge{margin-right:4px}

/* Submenu (dropdown hover) di daftar Menu tab: baris anak digeser ke kanan
   supaya kelihatan menaungi menu induk di atasnya. */
.site-menu-row-sub{padding-left:32px}

/* Drag-and-drop urutan menu (tab Menu): baris terangkat + genggaman saat digeser. */
.site-menu-row[draggable=true]{cursor:grab}
.site-menu-row.dragging{opacity:.4}
.drag-handle{display:flex;align-items:center;color:var(--muted);cursor:grab;flex-shrink:0}
.drag-handle svg{width:16px;height:16px}

/* Modal konfirmasi simpan (Berhasil/Peringatan/Gagal): lebih kecil dari modal CRUD biasa,
   garis warna di atas menandai jenisnya, tombol Tutup di tengah bawah. */
.menu-modal.modal-sm{width:min(100% - 32px,360px);padding:24px 20px 20px;text-align:center;border-top:5px solid #94a3b8}
.modal-sm .modal-head{justify-content:center;margin-bottom:10px}
.modal-sm .modal-head h2{font-size:19px}
.modal-sm p,.modal-sm ul{text-align:left}
.modal-sm ul{margin:8px 0 0;padding-left:20px}
.modal-sm.modal-success{border-top-color:#1e7e34}
.modal-sm.modal-success .modal-head h2{color:#1e7e34}
.modal-sm.modal-warning{border-top-color:#b45309}
.modal-sm.modal-warning .modal-head h2{color:#b45309}
.modal-sm.modal-danger{border-top-color:#c62828}
.modal-sm.modal-danger .modal-head h2{color:#c62828}
.modal-actions-center{display:flex;justify-content:center;margin-top:18px}

/* Form artikel: "Pilih dari pustaka" garis biru saja (bukan solid) supaya beda dari tombol utama
   Simpan; "Hapus artikel permanen" garis merah saja, bukan blok merah penuh. */
#feat-lib-btn{background:#fff;color:#2563eb;border:1px solid #2563eb}
#feat-lib-btn:hover{background:#eff6ff}
#article-delete-btn{background:#fff;color:#dc2626;border:1px solid #dc2626}
#article-delete-btn:hover{background:#fef2f2}

/* <select> render bawaan browser mengabaikan line-height, jadi tingginya beda tipis dari
   <input> teks meski CSS-nya sama (42px vs 40px). Samakan lewat height eksplisit (bukan
   min-height) — checkbox/radio/file dikecualikan, itu sudah punya ukuran wajar sendiri. */
select,input:not([type=checkbox]):not([type=radio]):not([type=file]){height:42px}

/* Checklist "Tampilkan juga di situs" (form artikel): sebaris horizontal (bukan grid 2 kolom
   seperti .site-checks di tempat lain, mis. modal user — jangan ganggu itu, modifier saja). */
.site-checks-horizontal{display:flex;flex-wrap:wrap;gap:8px 24px}

/* .content-form label{margin-top:30px} (2 selector: class+element) ngalahin .check-inline{margin:0}
   (1 class) — checkbox jadi turun 30px tiap baris di checklist "Tampilkan juga di situs", bikin
   jarak antar barisnya kelihatan renggang banget. Menangkan lewat spesifisitas yang lebih tinggi. */
.content-form label.check-inline{margin:0}

/* Tabel Website: tombol Edit & Manage jadi ikon saja bergaris (bukan solid) — Edit oranye,
   Manage biru (.outline-blue sudah ada, dipakai ulang). Draft/Website tetap teks pendek. */
.outline-orange{background:transparent;color:#f97316;border:1.5px solid #f97316}
.outline-orange:hover{background:#fff7ed}
/* Tombol hapus website — ikon saja, merah, di kanan tombol Edit. */
.outline-red{background:transparent;color:#dc2626;border:1.5px solid #dc2626}
.outline-red:hover{background:#fef2f2}
.row-manage.icon-only{padding:8px;min-width:36px;display:inline-grid;place-items:center}
.row-manage.icon-only svg{width:18px;height:18px}

/* .row-manage{display:inline-block} (dari aturan lama) mengalahkan .button{display:inline-flex},
   jadi ikon+teks (Draft/Website) baris normal (align ke baseline teks) bukan ke tengah — kelihatan
   nggak sejajar. Menangkan lagi jadi flex + kecilkan ikon supaya proporsional dengan teksnya. */
.row-manage{display:inline-flex;align-items:center;gap:6px}
.row-manage:not(.icon-only) svg{width:16px;height:16px}

/* Gambar unggulan (form artikel): preview + tombol unggah/pilih dari pustaka, dan modal
   "Pilih dari pustaka" itu sendiri — tidak ada gaya sama sekali sebelumnya (murni HTML
   polos), diminta jadi pop-up sungguhan yang bisa diklik & menampilkan thumbnail. */
.feat{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:#fff;margin-top:6px}
.feat-preview{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.feat-preview img{width:160px;height:110px;object-fit:cover;border-radius:8px;background:var(--canvas);flex:0 0 auto}
.feat-act{display:flex;flex-direction:column;gap:8px}
.feat-act a,.feat-del{margin:0;padding:6px 12px;font-size:13px;min-height:32px}
.feat-del{background:transparent;color:#dc2626;border:1px solid #fca5a5;cursor:pointer;border-radius:8px}
.feat-del:hover{background:#fef2f2}
.feat-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.feat-pick{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 14px;margin:0;cursor:pointer;font-weight:500;min-height:40px}
.feat-pick:hover{background:#f4f4f5}
.feat-pick input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.fm-upico{width:18px;height:18px}
.feat-status{color:var(--muted);font-size:13px}

.modal{position:fixed;inset:0;z-index:1000;background:#09090b80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:14px;box-shadow:0 20px 60px #0005;width:min(100%,760px);max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex:0 0 auto}
.modal-head strong{flex:0 0 auto;overflow-wrap:anywhere}
.modal-head input[type=search]{flex:1 1 auto;margin:0}
.modal-x{background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:4px 10px;margin:0;min-height:auto;border-radius:8px}
.modal-x:hover{background:#f4f4f5;color:var(--text)}
.modal-body{padding:16px 20px;overflow-y:auto}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.pick-item{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:10px;padding:8px;background:#fff;cursor:pointer;text-align:left;margin:0}
.pick-item:hover{border-color:var(--primary)}
.pick-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--canvas)}
.pick-item span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Tab berlebih: satu baris, geser kiri-kanan (mobile & layar sempit) */
.tabs,.sa-tabs{flex-wrap:nowrap!important;overflow-x:auto;max-width:100%;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.tabs>*,.sa-tabs>*{flex:none;white-space:nowrap;scroll-snap-align:start}
@media(max-width:700px){.sa-tabs{justify-content:flex-start!important;width:100%!important}}
/* Loader tombol simpan (admin/layout.blade.php) */
.is-loading{pointer-events:none;opacity:.8;cursor:progress}.is-loading::before{content:'';display:inline-block;width:1em;height:1em;margin-right:.45em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btn-spin .7s linear infinite;flex:none}@keyframes btn-spin{to{transform:rotate(360deg)}}
/* Modal admin: ukuran dibatasi layar (HP), header & footer tetap (statis) — hanya isi yang digulir.
   Pola: dialog > form|.sa-modal (wadah gulir) > .modal-head|.sa-modal-head … .form-actions|.sa-dialog-actions */
body dialog.menu-modal,body dialog.user-modal,body .shop-admin dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);margin:auto;padding:0}
body dialog.menu-modal:not(.modal-sm)[open],body dialog.user-modal[open],body .shop-admin dialog[open]{display:flex;flex-direction:column;overflow:hidden}
body dialog.menu-modal:not(.modal-sm)>form,body dialog.user-modal>form,body .shop-admin dialog>form,body .shop-admin dialog>.sa-modal{--mp:20px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 var(--mp) var(--mp);margin:0;border:0;border-radius:0}
body .shop-admin dialog>form,body .shop-admin dialog>.sa-modal{--mp:24px}
body dialog .modal-head,body dialog .sa-modal-head{position:sticky;top:0;z-index:3;background:#fff;margin:0 calc(-1 * var(--mp,20px)) 16px;padding:16px var(--mp,20px);border-bottom:1px solid var(--border,#e5e7eb)}
body dialog .form-actions,body dialog .sa-dialog-actions{position:sticky;bottom:0;z-index:3;background:#fff;margin:20px calc(-1 * var(--mp,20px)) calc(-1 * var(--mp,20px));padding:14px var(--mp,20px);border-top:1px solid var(--border,#e5e7eb)}
body dialog.modal-sm{max-height:calc(100dvh - 16px);overflow:auto}
@media(max-width:640px){
body dialog.menu-modal,body dialog.user-modal,body .shop-admin dialog{width:calc(100vw - 16px)!important;border-radius:12px}
body dialog.menu-modal:not(.modal-sm)>form,body dialog.user-modal>form,body .shop-admin dialog>form,body .shop-admin dialog>.sa-modal{--mp:14px}
body dialog .modal-head h2,body dialog .sa-modal-head h3{font-size:16px}
body dialog .form-actions,body dialog .sa-dialog-actions{gap:10px}
body dialog .form-actions>*,body dialog .sa-dialog-actions>*{flex:1 1 auto;justify-content:center}
body dialog input,body dialog select,body dialog textarea{max-width:100%}
body dialog .field-grid,body dialog .sa-grid2,body dialog .sa-grid4,body dialog .site-checks{grid-template-columns:minmax(0,1fr)!important}
body dialog .sa-span2,body dialog .sa-span4{grid-column:auto!important}
body dialog table{display:block;overflow-x:auto}
}
/* Isi modal tidak boleh lebih lebar dari modal (flex/grid item default min-width:auto melebar ke lebar konten) */
body dialog.menu-modal>form,body dialog.user-modal>form,body .shop-admin dialog>form,body .shop-admin dialog>.sa-modal{min-width:0;width:100%;overflow-x:hidden}
body dialog.menu-modal *,body dialog.user-modal *,body .shop-admin dialog *{min-width:0;max-width:100%}
body dialog input:not([type=checkbox]):not([type=radio]),body dialog select,body dialog textarea{width:100%;box-sizing:border-box}
body dialog .modal-head,body dialog .sa-modal-head{max-width:none}
body dialog .form-actions,body dialog .sa-dialog-actions{max-width:none}
@media(max-width:640px){
/* Toolbar Safari iOS mengambang menutupi bawah layar (dvh ikut menghitung area di belakangnya):
   modal ditaruh di atas dan tingginya menyisakan ruang toolbar agar footer (Simpan) selalu terlihat */
body dialog.menu-modal,body dialog.user-modal,body .shop-admin dialog{margin:12px auto auto;max-height:calc(100svh - 120px);max-height:calc(100dvh - 120px - env(safe-area-inset-bottom))}
body dialog.menu-modal *,body dialog.user-modal *,body .shop-admin dialog *{overflow-wrap:anywhere}
body dialog.user-modal label{margin-top:12px}
}
@media(max-width:640px){
/* Halaman tak boleh lebih lebar dari layar (tabel dll. menggulir di wadahnya sendiri) — kalau melebar, viewport iOS ikut lebar dan modal tergeser */
html,body{overflow-x:clip;max-width:100%}
/* Modal direntangkan 8px dari tepi kiri-kanan layar (tidak bergantung vw) */
body dialog.menu-modal,body dialog.user-modal,body .shop-admin dialog{position:fixed;left:0;right:0;width:auto!important;max-width:none;margin:12px 8px auto;box-sizing:border-box}
}
/* Footer modal benar-benar di dasar: tanpa padding bawah di wadah gulir (sticky diukur dari tepi konten) */
body dialog.menu-modal:not(.modal-sm)>form,body dialog.user-modal>form,body .shop-admin dialog>form,body .shop-admin dialog>.sa-modal{padding-bottom:0}
body dialog .form-actions,body dialog .sa-dialog-actions{margin-bottom:0}
body dialog form:not(:has(> .form-actions, > .sa-dialog-actions))::after,body dialog .sa-modal:not(:has(> .sa-dialog-actions))::after{content:'';display:block;height:var(--mp,20px)}
@media(max-width:640px){
/* iOS Safari auto-zoom saat input < 16px disentuh -> halaman membesar & modal terpotong kanan. 16px mencegahnya. */
input,select,textarea{font-size:16px!important}
}
/* Ikon emoji (pengganti SVG) */
.ico-emoji{display:inline-grid;place-items:center;font-size:18px;line-height:1;width:1.25em;height:1.25em;flex:none;font-style:normal}
.ico-text{font-size:20px;color:#52525b}
.card-icon .ico-emoji{font-size:22px}
.fm-ico.ico-emoji{font-size:34px;width:auto;height:auto}
.nav-link .ico-emoji{font-size:17px}
.back-button .ico-emoji,.button .ico-emoji{font-size:15px}
/* Breadcrumb di atas judul (semua halaman admin) + tombol di bawah judul rata kiri */
.panel-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:#6b7280;margin:0 0 6px}.panel-crumbs a{color:#6b7280}.panel-crumbs [aria-current]{color:#374151;font-weight:500}
.page-heading{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px}
.page-heading>p,.page-heading .page-actions{margin:0}
.sa-head{flex-direction:column;align-items:flex-start!important;gap:.75rem}
.back-button{margin:0}
/* Tombol aksi baris (tabel/daftar/kartu): tanpa warna latar & bingkai — hanya emoji/teks, sorotan tipis saat hover */
.menu-crud,.menu-delete,.media-delete,.menu-row-actions .icon-button,.media-card-actions .icon-button,.user-actions .icon-button,.preview-actions .icon-button,td .row-manage,.col-act .button,.col-act .sa-btn,.sa-row-actions .sa-btn,.sa-act-btn{background:transparent!important;border:1.5px solid var(--primary)!important;border-radius:8px!important;box-shadow:none!important;color:inherit!important;filter:none!important}
.menu-crud:hover,.menu-delete:hover,.media-delete:hover,.menu-row-actions .icon-button:hover,.media-card-actions .icon-button:hover,.user-actions .icon-button:hover,.preview-actions .icon-button:hover,td .row-manage:hover,.col-act .button:hover,.col-act .sa-btn:hover,.sa-row-actions .sa-btn:hover,.sa-act-btn:hover{background:rgb(0 0 0 / 6%)!important;text-decoration:none}
td .row-manage,.col-act .button,.col-act .sa-btn,.sa-row-actions .sa-btn{font-weight:500;padding-left:8px!important;padding-right:8px!important}
/* Garis tombol aksi: warna utama; hapus = merah; tombol outline bawaan (Kelola/Lihat Website dll.) tetap warna & teks aslinya */
.menu-delete,.media-delete{border-color:#dc2626!important}
td .row-manage.outline-blue{border-color:#2563eb!important;color:#2563eb!important}
td .row-manage.outline-green{border-color:#16a34a!important;color:#16a34a!important}
td .row-manage.outline-orange{border-color:#ea580c!important;color:#ea580c!important}
/* Warna garis tombol aksi sesuai fungsi */
:root{--act-edit:#374151;--act-del:#dc2626;--act-view:#2563eb;--act-stock:#7c3aed;--act-open:#16a34a;--act-manage:#4f46e5}
.act-edit.act-edit.act-edit{border-color:var(--act-edit)!important;color:var(--act-edit)!important}
.act-del.act-del.act-del{border-color:var(--act-del)!important;color:var(--act-del)!important}
.act-view.act-view.act-view{border-color:var(--act-view)!important;color:var(--act-view)!important}
.act-stock.act-stock.act-stock{border-color:var(--act-stock)!important;color:var(--act-stock)!important}
.act-open.act-open.act-open{border-color:var(--act-open)!important;color:var(--act-open)!important}
.act-manage.act-manage.act-manage{border-color:var(--act-manage)!important;color:var(--act-manage)!important}
/* Semua tombol Kembali: tanpa latar, garis saja */
.button.back-button,a.button[data-panel-back],.sa-btn[data-panel-back]{background:transparent!important;border:1.5px solid #374151!important;color:#374151!important;box-shadow:none!important;filter:none!important}
.button.back-button:hover,a.button[data-panel-back]:hover,.sa-btn[data-panel-back]:hover{background:rgb(0 0 0 / 5%)!important;text-decoration:none}
/* Format kolom isian ala iPaymu (lampiran Om): label tebal, border tipis membulat, placeholder abu, cincin fokus warna utama, teks bantuan abu */
label{font-weight:600;color:#1f2937}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]):not([type=range]),select,textarea{border:1.5px solid #e2e8f0;border-radius:10px;min-height:46px;padding:11px 14px;box-shadow:none;background:#fff;transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px}
input::placeholder,textarea::placeholder{color:#94a3b8}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background:#f8fafc;color:#64748b}
.slug-note,.field .muted,.field>p.muted,.help-text{font-size:13px;color:#64748b;margin-top:6px}
input[type=checkbox],input[type=radio]{accent-color:var(--primary);width:18px;height:18px}
/* Tooltip fungsi tombol aksi (hover/fokus): teks dari class fungsi, atau data-tip bila ada */
.act-edit,.act-del,.act-view,.act-stock,.act-open,.act-manage,[data-tip]{position:relative}
.act-edit::after{content:"Edit"}.act-del::after{content:"Hapus"}.act-view::after{content:"Lihat"}.act-stock::after{content:"Varian & stok"}.act-open::after{content:"Lihat website live"}.act-manage::after{content:"Kelola"}
[data-tip]::after{content:attr(data-tip)}
.act-edit::after,.act-del::after,.act-view::after,.act-stock::after,.act-open::after,.act-manage::after,[data-tip]::after{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:#111827;color:#fff;font-size:12px;font-weight:500;line-height:1.2;padding:5px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:20;text-transform:none;letter-spacing:0}
.act-edit:hover::after,.act-del:hover::after,.act-view:hover::after,.act-stock:hover::after,.act-open:hover::after,.act-manage:hover::after,[data-tip]:hover::after,
.act-edit:focus-visible::after,.act-del:focus-visible::after,.act-view:focus-visible::after,.act-stock:focus-visible::after,.act-open:focus-visible::after,.act-manage:focus-visible::after,[data-tip]:focus-visible::after{opacity:1}


/* ===== Ikon Heroicons + tombol ala Filament (myexpo.id/admin) — App\Support\Icon / @icon ===== */
.i{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em;stroke-width:1.5}
.ico-emoji .i,.nav-emoji .i{width:20px;height:20px;vertical-align:middle}
.nav-link .i{color:#a1a1aa}.nav-link:hover .i{color:#71717a}.nav-link[aria-current=page] .i{color:var(--primary)}
.nav-emoji{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
.sa-stat span .i{width:20px;height:20px;color:#a1a1aa;margin-right:.25rem}
.card-icon .i{width:24px;height:24px}
/* Tombol: tinggi 36px, teks 14px tebal, sudut 8px, bayangan tipis */
button,.button,.sa-btn{font-size:.875rem;font-weight:600;gap:6px;border-radius:8px;box-shadow:0 1px 2px rgb(0 0 0 / 5%)}
.button .i,.sa-btn .i,button .i{width:20px;height:20px}
.page-actions .button,.page-actions .back-button{height:36px;min-height:36px;padding:0 12px}
/* Tombol sekunder (Kembali, Lihat website, Sinkron, outline): putih + garis abu tipis */
.button.back-button,a.button[data-panel-back],.sa-btn[data-panel-back],.button.secondary,.sa-btn:not(.sa-btn-primary):not(.sa-btn-warn):not(.sa-act-btn){background:#fff!important;color:#18181b!important;border:0!important;box-shadow:0 1px 2px rgb(0 0 0 / 5%),inset 0 0 0 1px rgb(9 9 11 / 10%)!important}
.button.back-button:hover,a.button[data-panel-back]:hover,.sa-btn[data-panel-back]:hover,.button.secondary:hover,.sa-btn:not(.sa-btn-primary):not(.sa-btn-warn):not(.sa-act-btn):hover{background:#fafafa!important}
/* Tombol aksi tabel: ikon tanpa bingkai, berwarna per aksi, latar tipis saat hover (Filament icon button) */
.menu-crud,.menu-delete,.media-delete,.menu-row-actions .icon-button,.media-card-actions .icon-button,.user-actions .icon-button,.preview-actions .icon-button,td .row-manage,.col-act .button,.col-act .sa-btn,.sa-row-actions .sa-btn,.sa-act-btn{border:0!important;box-shadow:none!important;min-width:36px;min-height:36px;padding:6px!important;border-radius:8px!important}
.act-edit.act-edit.act-edit,.act-del.act-del.act-del,.act-view.act-view.act-view{border:0!important}
.menu-crud:hover,.menu-delete:hover,.media-delete:hover,.menu-row-actions .icon-button:hover,.media-card-actions .icon-button:hover,.user-actions .icon-button:hover,.preview-actions .icon-button:hover,td .row-manage:hover,.col-act .button:hover,.col-act .sa-btn:hover,.sa-row-actions .sa-btn:hover,.sa-act-btn:hover{background:rgb(9 9 11 / 5%)!important}
.act-edit .i{color:var(--primary)}.act-del .i{color:var(--act-del)}.act-view .i{color:var(--act-view)}.act-stock .i{color:var(--act-stock)}.act-open .i{color:var(--act-open)}
.act-edit.act-edit.act-edit{color:var(--primary)!important}

/* Sidebar /admin: grup buka-tutup (details.nav-group), terbuka bila berisi menu aktif */
.nav-group summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.nav-group summary::-webkit-details-marker{display:none}.nav-group summary::after{content:'⌃';font-size:12px;transform:rotate(180deg);transition:transform .15s}.nav-group[open] summary::after{transform:none}
.art-thumb.site-icon{width:45px;height:45px;object-fit:contain;background:repeating-conic-gradient(#e5e7eb 0 25%,#fff 0 50%) 0 0/10px 10px}.art-thumb-none.site-icon{background:transparent}
.site-spark{display:inline-flex;gap:6px;align-items:center;white-space:nowrap;color:inherit}