/* ============================================================
   STUDIO POWER POIN ANIMASI — halaman etalase (studio.html), pemutar pembeli (presentasi.html)
   dan editor admin (admin/studio.html). Memakai token tema situs (ikut mode gelap) dan responsif.
   ============================================================ */
[hidden] { display: none !important; }

/* ---------- kerangka halaman publik ---------- */
.sf-body { margin: 0; background: var(--bg-main, #F9FAFB); color: var(--text-body, #374151); min-height: 100vh; }
[data-theme="dark"] .sf-body { background: var(--bg-warm, #14161A); }
.sf-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: var(--bg-white, #fff); border-bottom: 1px solid var(--border, #E5E7EB); }
.sf-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-dark, #111827); font-weight: 800; min-width: 0; }
.sf-brand img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.sf-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--gold-pale, #FFF8E1); color: var(--gold-dark, #B8860B); white-space: nowrap; }
.sf-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sf-nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--text-body, #374151); }
.sf-nav a:hover { background: var(--gold-pale, #FFF8E1); color: var(--gold-dark, #B8860B); }
.sf-nav a.primary { background: var(--gold-main, #D99A00); color: #fff; }
.sf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

.sf-hero { padding: 56px 0 38px; text-align: center; background: linear-gradient(160deg, #FFFDF7 0%, #FFF4D6 100%); border-bottom: 1px solid var(--border, #E5E7EB); }
[data-theme="dark"] .sf-hero { background: linear-gradient(160deg, #1E2126 0%, #262016 100%); }
.sf-hero h1 { margin: 0 0 12px; font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.15; font-weight: 800; color: var(--text-dark, #111827); }
.sf-hero h1 em { font-style: normal; color: var(--gold-dark, #B8860B); }
.sf-hero p { margin: 0 auto 24px; max-width: 640px; font-size: 1.05rem; line-height: 1.65; color: var(--text-muted, #6B7280); }
.sf-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 24px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.sf-btn.primary { background: linear-gradient(180deg, var(--gold-medium, #E6A817), var(--gold-dark, #B8860B)); color: #fff; box-shadow: 0 6px 16px rgba(184,134,11,.28); }
.sf-btn.ghost { background: var(--bg-white, #fff); color: var(--text-dark, #111827); border-color: var(--border, #E5E7EB); }
.sf-btn.ghost:hover { border-color: var(--gold-main, #D99A00); }
.sf-btn[disabled] { opacity: .55; cursor: default; }
.sf-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px auto 0; max-width: 900px; text-align: left; }
.sf-feat div { background: var(--bg-white, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.sf-feat b { display: block; font-size: 15px; color: var(--text-dark, #111827); margin-bottom: 2px; }

.sf-sec { padding: 44px 0; }
.sf-sec h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--text-dark, #111827); }
.sf-sec .lead { margin: 0 0 24px; color: var(--text-muted, #6B7280); font-size: 15px; line-height: 1.6; max-width: 700px; }

.sf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sf-card { display: flex; flex-direction: column; background: var(--bg-white, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card, 0 2px 12px rgba(0,0,0,.07)); transition: transform .18s, box-shadow .18s; min-width: 0; }
.sf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12)); }
.sf-cover { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1E40AF, #0B1F4D); overflow: hidden; }
.sf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-cover .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; color: rgba(255,255,255,.8); }
.sf-badge { position: absolute; left: 12px; top: 12px; background: var(--gold-main, #D99A00); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
.sf-body-in { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.sf-card h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--text-dark, #111827); overflow-wrap: anywhere; }
.sf-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg-section, #F3F4F6); color: var(--text-body, #374151); }
.sf-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted, #6B7280); overflow-wrap: anywhere; }
.sf-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.sf-price b { font-size: 22px; font-weight: 800; color: var(--gold-dark, #B8860B); }
.sf-price span { font-size: 12.5px; color: var(--text-muted, #6B7280); }
.sf-actions { display: flex; gap: 8px; }
.sf-actions .sf-btn { flex: 1; min-height: 42px; padding: 9px 12px; font-size: 14px; }
.sf-empty { text-align: center; padding: 40px 20px; background: var(--bg-white, #fff); border: 1px dashed var(--border, #E5E7EB); border-radius: 20px; color: var(--text-muted, #6B7280); }
.sf-empty b { display: block; font-size: 18px; color: var(--text-dark, #111827); margin-bottom: 6px; }

/* ---------- formulir ide ---------- */
.sf-form { background: var(--bg-white, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-card, 0 2px 12px rgba(0,0,0,.07)); max-width: 760px; }
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-field { margin-bottom: 14px; min-width: 0; }
.sf-field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-dark, #111827); margin-bottom: 5px; }
.sf-field label small { font-weight: 500; color: var(--text-muted, #6B7280); }
.sf-input, .sf-select, .sf-textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--border, #E5E7EB); border-radius: 12px; background: var(--bg-white, #fff); color: var(--text-dark, #111827); font: inherit; font-size: 16px; }
.sf-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.sf-input:focus, .sf-select:focus, .sf-textarea:focus { outline: 2px solid var(--gold-main, #D99A00); outline-offset: 0; border-color: transparent; }
.sf-count { text-align: right; font-size: 12px; color: var(--text-muted, #6B7280); margin-top: 3px; }
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sf-msg { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.sf-msg.err { background: var(--error-bg, #FEF2F2); color: var(--error-text, #B91C1C); }
.sf-msg.ok { background: var(--success-bg, #ECFDF5); color: var(--success-text, #065F46); }
.sf-mine { margin-top: 28px; max-width: 760px; }
.sf-mine h3 { margin: 0 0 10px; font-size: 16px; color: var(--text-dark, #111827); }
.sf-idea { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-white, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 14px; margin-bottom: 8px; font-size: 14px; }
.sf-idea span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sf-stat { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: var(--bg-section, #F3F4F6); color: var(--text-body, #374151); }
.sf-stat.new { background: #FEF3C7; color: #92400E; } .sf-stat.working { background: #DBEAFE; color: #1E40AF; }
.sf-stat.done { background: #D1FAE5; color: #065F46; } .sf-stat.rejected { background: #FEE2E2; color: #991B1B; }
.sf-foot { padding: 28px 20px 40px; text-align: center; font-size: 13px; color: var(--text-muted, #6B7280); }

/* ---------- halaman pemutar pembeli ---------- */
.pp-main { max-width: 1180px; margin: 0 auto; padding: 18px max(14px, env(safe-area-inset-right)) 30px max(14px, env(safe-area-inset-left)); }
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.pp-head h1 { margin: 0; font-size: clamp(1.15rem, 3vw, 1.6rem); font-weight: 800; color: var(--text-dark, #111827); line-height: 1.25; overflow-wrap: anywhere; }
.pp-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted, #6B7280); }
.pp-state { max-width: 560px; margin: 40px auto; text-align: center; background: var(--bg-white, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 20px; padding: 34px 24px; box-shadow: var(--shadow-card, 0 2px 12px rgba(0,0,0,.07)); }
.pp-state .ico { font-size: 46px; margin-bottom: 8px; }
.pp-state b { display: block; font-size: 19px; color: var(--text-dark, #111827); margin-bottom: 8px; }
.pp-state p { margin: 0 0 18px; line-height: 1.6; color: var(--text-muted, #6B7280); }
.pp-tips { margin: 14px 2px 0; font-size: 13px; color: var(--text-muted, #6B7280); line-height: 1.6; }
.pp-tips kbd { background: var(--bg-section, #F3F4F6); border: 1px solid var(--border, #E5E7EB); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-family: inherit; }

/* ---------- editor admin ---------- */
.ed-wrap { --ed-gap: 16px; }
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--ed-gap); }
.ed-bar .grow { flex: 1; min-width: 180px; }
.ed-title-in { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-white); color: var(--text-dark); font: inherit; font-size: 18px; font-weight: 800; }
.ed-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); grid-template-areas: "idea main" "settings main" "slides main"; grid-template-rows: auto auto 1fr; gap: 0 var(--ed-gap); align-items: start; }
.ed-panel { background: var(--bg-white); border: 1px solid var(--border-light, #F3F4F6); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.05)); margin-bottom: var(--ed-gap); min-width: 0; }
.ed-panel > h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--text-dark); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-f { margin-bottom: 12px; min-width: 0; }
.ed-f > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.ed-in, .ed-sel, .ed-ta { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-white); color: var(--text-dark); font: inherit; font-size: 15px; }
.ed-ta { min-height: 84px; resize: vertical; line-height: 1.5; }
.ed-in:focus, .ed-sel:focus, .ed-ta:focus { outline: 2px solid var(--gold-main, #D99A00); outline-offset: 0; border-color: transparent; }
.ed-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.ed-sw button { width: 38px; height: 38px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--border); touch-action: manipulation; }
.ed-sw button.on { border-color: var(--text-dark); }
.ed-slides { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; padding: 2px; }
.ed-sl { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; text-align: left; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-white); cursor: pointer; font: inherit; color: var(--text-dark); touch-action: manipulation; }
.ed-sl.on { border-color: var(--gold-main, #D99A00); background: var(--gold-pale, #FFF8E1); }
[data-theme="dark"] .ed-sl.on { background: rgba(217,154,0,.16); }
.ed-sl .n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-section); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.ed-sl .t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-sl .k { flex: 0 0 auto; font-size: 17px; }
.ed-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ed-ib { appearance: none; border: 1px solid var(--border); background: var(--bg-white); color: var(--text-dark); border-radius: 10px; min-width: 40px; height: 40px; padding: 0 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; touch-action: manipulation; }
.ed-ib:hover:not(:disabled) { border-color: var(--gold-main, #D99A00); }
.ed-ib:disabled { opacity: .4; cursor: default; }
.ed-ib.danger { color: var(--error-text, #B91C1C); }
.ed-rows { display: flex; flex-direction: column; gap: 8px; }
.ed-row { display: flex; gap: 6px; align-items: center; }
.ed-row .ed-in { flex: 1; min-width: 0; }
.ed-row .ed-in.sm { flex: 0 0 38%; }
.ed-row .ed-in.xs { flex: 0 0 24%; }
.ed-img { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ed-img img { width: 120px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-section); }
.ed-prev { background: #0b1020; border-radius: 16px; padding: 10px; margin-bottom: var(--ed-gap); }
.ed-prev-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 4px 10px; color: #fff; font-size: 13px; }
.ed-prev-bar .grow { flex: 1; }
.ed-prev .ed-ib { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; height: 36px; }
.ed-note { background: var(--warning-bg, #FFFBEB); color: var(--warning-text, #92400E); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
.ed-note b { display: block; }
.ed-idea { background: var(--bg-section); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; max-height: 190px; overflow-y: auto; }
.ed-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ed-pill.draft { background: var(--bg-section); color: var(--text-muted); }
.ed-pill.pub { background: var(--success-bg, #ECFDF5); color: var(--success-text, #065F46); }
.ed-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ed-type { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-white); cursor: pointer; font: inherit; color: var(--text-dark); touch-action: manipulation; }
.ed-type:hover { border-color: var(--gold-main, #D99A00); background: var(--gold-pale, #FFF8E1); }
[data-theme="dark"] .ed-type:hover { background: rgba(217,154,0,.16); }
.ed-type .i { font-size: 24px; } .ed-type b { font-size: 13.5px; } .ed-type small { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.ed-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 4px; }

/* daftar karya & ide di admin */
.ed-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ed-tab { appearance: none; border: 1px solid var(--border); background: var(--bg-white); color: var(--text-dark); padding: 9px 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.ed-tab.on { background: var(--gold-dark, #B8860B); border-color: var(--gold-dark, #B8860B); color: #fff; }
.ed-tab .c { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #EF4444; color: #fff; font-size: 11px; }
.ed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ed-deck { display: flex; flex-direction: column; background: var(--bg-white); border: 1px solid var(--border-light, #F3F4F6); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.05)); }
.ed-deck .cv { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1E40AF, #0B1F4D); display: grid; place-items: center; font-size: 40px; color: rgba(255,255,255,.85); overflow: hidden; }
.ed-deck .cv img { width: 100%; height: 100%; object-fit: cover; }
.ed-deck .in { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ed-deck h4 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-dark); overflow-wrap: anywhere; line-height: 1.3; }
.ed-deck .m { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.ed-deck .act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.ed-idea-card { background: var(--bg-white); border: 1px solid var(--border-light, #F3F4F6); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.05)); }
.ed-idea-card h4 { margin: 0 0 4px; font-size: 15.5px; color: var(--text-dark); overflow-wrap: anywhere; }
.ed-idea-card .who { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; }
.ed-idea-card .desc { font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 10px; }
.ed-idea-card .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ed-empty { text-align: center; padding: 36px 16px; color: var(--text-muted); background: var(--bg-white); border: 1px dashed var(--border); border-radius: 16px; }

@media (max-width: 1024px) {
  .sf-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "slides" "main" "settings" "idea"; grid-template-rows: auto; }
  .ed-slides { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .ed-sl { flex: 0 0 168px; width: 168px; }
  .ed-types { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sf-grid { grid-template-columns: 1fr; }
  .sf-feat { grid-template-columns: 1fr; }
  .sf-row { grid-template-columns: 1fr; }
  .sf-hero { padding: 40px 0 28px; }
  .sf-form { padding: 18px 16px; }
  .sf-nav a:not(.primary) { display: none; }
  .sf-tag { display: none; }
  .ed-types { grid-template-columns: 1fr; }
  .ed-list { grid-template-columns: 1fr; }
  .ed-bar .ed-ib, .ed-bar .sf-btn { flex: 1 1 auto; }
  .ed-row { flex-wrap: wrap; }
  .ed-row .ed-in.sm, .ed-row .ed-in.xs { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .sf-card { transition: none; } .sf-card:hover { transform: none; } }

/* ---------- pemilih & perancang desain ---------- */
.ed-dsg-btn { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-white); color: var(--text-dark); font: inherit; cursor: pointer; touch-action: manipulation; }
.ed-dsg-btn:hover { border-color: var(--gold-main, #D99A00); }
.ed-dsg-btn .sw, .dz-sw { flex: 0 0 auto; width: 46px; height: 32px; border-radius: 8px; border: 1px solid rgba(0,0,0,.15); position: relative; overflow: hidden; }
.ed-dsg-btn .sw::after, .dz-sw::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--sw-a, #F59E0B); }
.ed-dsg-btn .tx { min-width: 0; display: flex; flex-direction: column; }
.ed-dsg-btn b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-dsg-btn small { font-size: 12px; color: var(--text-muted); }
.dz-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dz-left { position: sticky; top: 0; }
.dz-prev { border-radius: 12px; overflow: hidden; }
.dz-group { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 8px; }
.dz-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dz-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 8px; border: 2px solid var(--border); border-radius: 12px; background: var(--bg-white); color: var(--text-dark); font: inherit; cursor: pointer; touch-action: manipulation; min-width: 0; }
.dz-card:hover { border-color: var(--gold-main, #D99A00); }
.dz-card.on { border-color: var(--gold-dark, #B8860B); background: var(--gold-pale, #FFF8E1); }
[data-theme="dark"] .dz-card.on { background: rgba(217,154,0,.16); }
.dz-card .sw { height: 44px; border-radius: 8px; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,.12); display: flex; align-items: flex-end; padding: 5px 7px; box-sizing: border-box; }
.dz-card .sw i { font-style: normal; font-weight: 800; font-size: 15px; line-height: 1; }
.dz-card .sw::after { content: ''; position: absolute; right: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--sw-a, #F59E0B); }
.dz-card b { font-size: 13px; line-height: 1.2; } .dz-card small { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.dz-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.dz-color { width: 100%; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-white); cursor: pointer; }
.dz-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; background: var(--bg-white); }
.dz-row .nm { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .dz-grid { grid-template-columns: minmax(0, 1fr); }
  .dz-left { position: static; }
  .dz-form { grid-template-columns: 1fr; }
}

/* ---------- editor: elemen hiasan (anak sekolah, HP, buku, dll.) ---------- */
.ed-els { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.ed-els-h { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--text-dark); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-els-c { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--bg-section); color: var(--text-muted); }
.ed-els-l { margin: 14px 0 6px; font-size: 12.5px; font-weight: 800; color: var(--text-muted); }
.ed-packs, .ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-packs .ed-ib { height: 38px; font-size: 13px; }
.ed-chip { appearance: none; border: 1px solid var(--border); background: var(--bg-white); color: var(--text-dark); padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation; min-height: 36px; }
.ed-chip.on { background: var(--gold-dark, #B8860B); border-color: var(--gold-dark, #B8860B); color: #fff; }
.ed-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 10px; max-height: 300px; overflow-y: auto; padding: 2px; }
.ed-pi { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-white); color: var(--text-dark); cursor: pointer; font: inherit; touch-action: manipulation; min-width: 0; }
.ed-pi:hover { border-color: var(--gold-main, #D99A00); background: var(--gold-pale, #FFF8E1); }
[data-theme="dark"] .ed-pi:hover { background: rgba(217,154,0,.16); }
.ed-pi .g { font-size: 30px; line-height: 1.15; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.ed-pi small { font-size: 10.5px; line-height: 1.2; color: var(--text-muted); text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.ed-elist { display: flex; flex-direction: column; gap: 8px; }
.ed-els-empty { padding: 14px; border: 1px dashed var(--border); border-radius: 12px; font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.5; }
.ed-eli { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-white); overflow: hidden; }
.ed-eli.on { border-color: var(--gold-main, #D99A00); box-shadow: 0 0 0 2px rgba(217,154,0,.18); }
.ed-eli-top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.ed-eli-pick { appearance: none; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--text-dark); font: inherit; cursor: pointer; text-align: left; padding: 4px; min-height: 40px; touch-action: manipulation; }
.ed-eli-pick .g { font-size: 28px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.ed-eli-pick .n { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-eli-body { padding: 4px 12px 12px; border-top: 1px solid var(--border-light, #F3F4F6); }
.ed-sl2 { display: block; margin-top: 10px; }
.ed-sl2 .t { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
.ed-sl2 .t b { color: var(--text-dark); }
.ed-sl2 input[type="range"] { width: 100%; height: 28px; touch-action: manipulation; }
.ed-eli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 12px; }
.ed-eli-chk { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ed-chkl { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-dark); min-height: 36px; cursor: pointer; }
.ed-chkl input { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .ed-pal { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); max-height: 260px; }
  .ed-eli-grid { grid-template-columns: 1fr; }
  .ed-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .ed-chip { flex: 0 0 auto; }
}

.ed-bub { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
@media (max-width: 640px) { .ed-bub { grid-template-columns: 1fr; } }

/* ============================================================
   REVISI KETERBACAAN & FONT (etalase + halaman putar Power Poin / Games)
   - teks pada tombol/lencana emas kini gelap (sebelumnya putih di atas emas: kontras hanya 2,1-2,8:1)
   - label kecil di header memakai emas tua agar terbaca di latar krem
   - font modern: Plus Jakarta Sans (isi) + Sora (judul), sama dengan pemutar game & Power Poin
   ============================================================ */
.sf-body { font-family: 'Plus Jakarta Sans', 'DM Sans', 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; }
.pp-head h1, .pp-state b, .sf-hero h1, .sf-sec h2 { font-family: 'Sora', 'Plus Jakarta Sans', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; letter-spacing: -.01em; }
.sf-btn.primary, .sf-nav a.primary, .sf-badge, .sf-cover .sf-badge { color: #2B1A00; }
.sf-top .sf-tag { color: #7A5600; }
.sf-btn.primary { background: linear-gradient(180deg, #F5C84B, #E0A92A); }   /* ujung gelap gradasi lama (#A36F00) membuat teks gelap kurang terbaca */