:root { --ink:#211c11; --muted:#746e61; --paper:#f7f5ef; --surface:#fff; --line:#e5dfcf; --gold:#c9a227; --yellow:#f5c518; --green:#16382a; --danger:#a93131; --shadow:0 18px 48px rgba(33,28,17,.09); --sans:"Plus Jakarta Sans",sans-serif; --serif:"Fraunces",serif; }
* { box-sizing:border-box; }
/* Aturan display pada class di bawah (mis. .login-shell) mengalahkan [hidden] bawaan
   browser, sehingga elemen yang di-hide lewat property .hidden tetap tampil. */
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); }
button,input,textarea,select { font:inherit; }
button { border:0; border-radius:10px; padding:11px 16px; background:var(--green); color:white; cursor:pointer; font-weight:800; }
button:hover { filter:brightness(1.08); }
button.secondary { border:1px solid var(--line); background:white; color:var(--ink); }
button.danger { background:#fff0f0; color:var(--danger); }
a { color:inherit; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); }
.eyebrow { margin-bottom:8px; color:#8a6d10; font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.login-shell { display:grid; min-height:100vh; place-items:center; padding:24px; background:radial-gradient(circle at 75% 20%,rgba(245,197,24,.22),transparent 30%),var(--paper); }
.login-card { width:min(460px,100%); border:1px solid var(--line); border-radius:24px; padding:40px; background:white; box-shadow:var(--shadow); }
.login-card img { width:64px; margin-bottom:22px; }
.login-card h1 { font-size:2.2rem; }
.login-card > p:not(.eyebrow) { color:var(--muted); }
.login-card form { display:grid; gap:16px; margin:28px 0 18px; }
.login-card a { color:#80650d; font-size:.88rem; font-weight:700; }
.form-message { min-height:22px; color:var(--danger)!important; font-size:.85rem; }
.app-shell { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; display:flex; width:260px; flex-direction:column; padding:26px 20px; background:#182d23; color:white; }
.admin-brand { display:flex; align-items:center; gap:12px; margin-bottom:36px; text-decoration:none; }
.admin-brand img { width:46px; height:46px; border-radius:50%; padding:5px; background:white; }
.admin-brand strong,.admin-brand small { display:block; }
.admin-brand small { color:#d9c36b; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }
.sidebar nav { display:grid; gap:7px; }
.sidebar nav button { width:100%; background:transparent; color:#d7e0db; text-align:left; }
.sidebar nav button.active { background:rgba(245,197,24,.15); color:#ffe478; }
.sidebar-foot { display:grid; gap:10px; margin-top:auto; }
.sidebar-foot a,.sidebar-foot button { border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:10px 14px; background:transparent; color:white; text-align:left; text-decoration:none; font-size:.85rem; font-weight:700; }
.workspace { margin-left:260px; padding:30px clamp(24px,4vw,58px) 70px; }
.workspace-head { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:24px; }
.workspace-head h1 { margin:0; font-size:2rem; }
.head-actions { display:flex; align-items:center; gap:10px; }
.head-actions span { margin-right:6px; color:var(--muted); font-size:.78rem; }
.notice { margin-bottom:20px; border:1px solid #d6a73b; border-radius:12px; padding:14px 18px; background:#fff6d8; color:#6a510b; font-size:.88rem; }
.toast { position:fixed; z-index:20; right:28px; bottom:28px; border-radius:12px; padding:14px 18px; background:var(--green); color:white; box-shadow:var(--shadow); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.card { border:1px solid var(--line); border-radius:18px; padding:26px; background:white; box-shadow:0 6px 22px rgba(33,28,17,.04); }
.card + .card { margin-top:20px; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.card-head h2,.card-head h3 { margin-bottom:4px; }
.card-head p { margin:0; color:var(--muted); font-size:.86rem; }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.stat { border:1px solid var(--line); border-radius:15px; padding:22px; background:white; }
.stat strong { display:block; font-family:var(--serif); font-size:2rem; }
.stat span { color:var(--muted); font-size:.82rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label,.field > span { font-size:.78rem; font-weight:800; }
.field small { color:var(--muted); }
input,textarea,select { width:100%; border:1px solid #d9d3c4; border-radius:10px; padding:11px 12px; background:#fff; color:var(--ink); }
textarea { min-height:110px; resize:vertical; line-height:1.55; }
textarea.tall { min-height:230px; }
input:focus,textarea:focus,select:focus { outline:3px solid rgba(245,197,24,.25); border-color:var(--gold); }
.switch-field { display:flex; align-items:center; gap:10px; }
.switch-field input { width:18px; height:18px; }
.split-editor { display:grid; grid-template-columns:280px minmax(0,1fr); gap:20px; }
.item-list { display:grid; align-content:start; gap:8px; }
.item-list button { display:flex; width:100%; justify-content:space-between; background:white; color:var(--ink); border:1px solid var(--line); text-align:left; }
.item-list button.active { border-color:var(--gold); background:#fff9df; }
.item-list small { color:var(--muted); font-weight:500; }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; }
.json-help { border-radius:9px; padding:10px 12px; background:#f7f5ef; color:var(--muted); font-size:.78rem; }
.status-pill { display:inline-block; border-radius:999px; padding:4px 9px; background:#e8f4ed; color:#236441; font-size:.72rem; font-weight:800; }
.status-pill.draft { background:#f0eee7; color:#6d6659; }

.editor-row-photo { grid-template-columns: 1.1fr 1.3fr 1fr auto; }
.photo-field { display: grid; gap: 8px; justify-items: start; }
.photo-preview {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--line);
}
.photo-empty {
  display: flex; align-items: center; justify-content: center;
  background: #f0eee7; color: var(--muted); font-size: .65rem; text-align: center;
}
.photo-hint { color: var(--muted); font-size: .74rem; align-self: center; }
@media (max-width: 900px) { .editor-row-photo { grid-template-columns: 1fr; } }
@media (max-width:1000px) { .stat-grid { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:1fr 1fr; } .workspace-head { align-items:flex-start; flex-direction:column; } }
@media (max-width:760px) { .sidebar { position:static; width:auto; padding:18px; } .sidebar nav { grid-template-columns:repeat(3,1fr); } .sidebar-foot { display:none; } .workspace { margin:0; padding:24px 16px 60px; } .head-actions { width:100%; flex-wrap:wrap; } .head-actions span { width:100%; } .split-editor,.grid-2,.grid-3 { grid-template-columns:1fr; } .stat-grid { grid-template-columns:1fr 1fr; } }
.editor-row { display:grid; align-items:end; margin-bottom:12px; border:1px solid var(--line); border-radius:14px; padding:14px 16px; gap:14px; grid-template-columns:1.1fr 1.3fr .9fr auto; background:#fcfbf7; }
.editor-row-foot { display:flex; align-items:center; gap:12px; }
.editor-row-foot small { color:var(--muted); font-size:.74rem; max-width:150px; }
@media (max-width:900px) { .editor-row { grid-template-columns:1fr; } }