@font-face {
  font-family: "Andale Mono";
  src: url("assets/fonts/AndaleMono.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* MIRAH STUDIOS — UBAH NILAI UTAMA DI SINI / Dreamweaver */
:root {
  --font-family: "Andale Mono", monospace;
  --brand-lime: #a2cd3a;
  --page-background: #fcfdf9;
  --orb-size: 1.3; /* Ukuran bidang gradasi: 1 = awal, 1.3 = +30%. */
  --text-color: #20251c;
  --selected-text: #3f5b0c;
  --logo-size: 50px;
  --header-gap: 26px;
  --title-size: 19px;
  --title-spacing: .32em;
  --panel-width: 288px;
  --panel-height: 72px;
  --panel-gap: 18px;
  --panel-radius: 20px;
  --panel-font-size: 21px;
  --panel-letter-spacing: .14em;
  --glass-blur: 16px;
  --footer-font-size: 11px;
  --footer-bottom-space: 24px;
  /* RUANGCERITA: nilai khusus halaman layanan. */
  --section-logo-size: var(--logo-size);
  --section-title-size: 19px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; color-scheme: light; scrollbar-gutter: stable; }
body { margin: 0; min-width: 280px; background: var(--page-background); color: var(--text-color); font-family: var(--font-family); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
input, textarea, select, code, pre { font-family: var(--font-family); }
button:focus-visible, a:focus-visible { outline: 2px solid #45621c; outline-offset: 6px; }

/* Radial gradients are soft already. Only position/scale/opacity animate. */
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; isolation: isolate; contain: strict; }
.ambient::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 53%, #a1ffce26 0%, transparent 70%); }
.orb { position: absolute; width: min(100vw, 760px); height: min(110vh, 800px); border-radius: 50%; will-change: transform, opacity; transform: scale(var(--orb-size)); }
.orb-one { --orb-size: 1.5; /* Hijau #A2CD3A: +50%. */ left: calc(50% - min(50vw, 380px)); top: calc(48% - min(55vh, 400px)); background: radial-gradient(ellipse, #a2cd3aa8 0%, #a2cd3a69 30%, #a2cd3a00 70%); }
.orb-two { left: calc(40% - min(50vw, 380px)); top: calc(63% - min(55vh, 400px)); background: radial-gradient(ellipse, #a1ffceb3 0%, #a1ffce59 35%, #a1ffce00 71%); }
.orb-three { left: calc(62% - min(50vw, 380px)); top: calc(44% - min(55vh, 400px)); background: radial-gradient(ellipse, #faffd1b3 0%, #faffd159 35%, #faffd100 67%); }

.portfolio-shell { width: min(100%, 500px); min-height: 100vh; min-height: 100svh; margin-inline: auto; padding: clamp(32px, 6svh, 58px) 36px max(var(--footer-bottom-space), env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto minmax(310px, 1fr) auto; }
.brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--header-gap); }
.brand-logo { display: block; width: var(--logo-size); height: var(--logo-size); flex: 0 0 auto; border-radius: 22%; object-fit: contain; }
.brand h1 { font-size: var(--title-size); letter-spacing: var(--title-spacing); font-weight: 400; line-height: 1.3; margin: 0 -.32em 0 0; }
.portfolio-menu { display: grid; gap: var(--panel-gap); width: min(100%, var(--panel-width)); align-self: center; justify-self: center; margin-top: 34px; }
.portfolio-footer { padding-top: 40px; text-align: center; color: #4c5544cc; font: var(--footer-font-size)/1.6 var(--font-family); letter-spacing: .025em; }
.footer-heart { color: #648619; }

/* The four columns: glass, not solid grey. */
.glass-panel { position: relative; min-height: var(--panel-height); width: 100%; padding: 16px 18px; border-radius: var(--panel-radius); border: 1px solid #ffffffb3; background: linear-gradient(125deg, #ffffff70, #ffffff26 72%, #ffffff45); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.12); backdrop-filter: blur(var(--glass-blur)) saturate(1.12); box-shadow: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #ffffff38, 0 10px 30px #455d0e06; font-size: var(--panel-font-size); letter-spacing: var(--panel-letter-spacing); font-weight: 400; line-height: 1.25; cursor: pointer; overflow: hidden; transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease, color .22s ease; }
.glass-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(165deg, #ffffff70, #ffffff00 42%); pointer-events: none; }
.glass-panel > span { position: relative; z-index: 1; }
.glass-panel[href] { color: inherit; display: grid; place-items: center; text-align: center; text-decoration: none; }
.glass-panel.is-selected { color: var(--selected-text); background-color: #ffffff42; }
.glass-panel:active { transform: translateY(1px) scale(.99); }
@media (hover: hover) { .glass-panel:hover { transform: translateY(-3px); background-color: #ffffff36; box-shadow: inset 0 1px 0 #fff, 0 15px 35px #4561130d; } }

.motion-toggle { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffffa6; border-radius: 50%; background: #ffffff7a; color: #55613e; cursor: pointer; }
.motion-toggle:disabled { cursor: default; opacity: .5; }
.noscript-note { font: 13px/1.5 var(--font-family); text-align: center; }

/* Header halaman utama: judul kecil dan dekat dengan logo. */
.portfolio-shell > .brand { gap: 12px; }
.portfolio-shell > .brand h1 { font-size: 16px; }

/* A small selection of existing projects, opened by each category. */
.category-dialog { width: min(420px, calc(100vw - 40px)); max-height: 82vh; max-height: 82svh; padding: 25px; border: 1px solid #ffffffe6; border-radius: 24px; background: #fcfff3e8; color: var(--text-color); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 90px #23310d1a; }
.category-dialog::backdrop { background: #1d290c24; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #6b7758; font-size: 11px; letter-spacing: .1em; }
.close-dialog { display: grid; place-items: center; border: 0; padding: 7px; background: transparent; border-radius: 50%; cursor: pointer; }
.category-dialog h2 { font-weight: 400; font-size: clamp(21px, 6vw, 26px); letter-spacing: .05em; margin: 28px 0 12px; }
.category-dialog > p { font: 14px/1.7 var(--font-family); margin: 0; color: #59624c; }
.project-links { display: grid; gap: 10px; margin-top: 26px; }
.project-link { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 16px; color: #293a16; background: #ffffff94; border: 1px solid #ffffffd9; border-radius: 13px; text-decoration: none; font-size: 13px; line-height: 1.5; }
.project-link:hover { background: #fff; }
.project-link::after { content: "↗"; font-family: var(--font-family); font-size: 18px; }
.project-empty { margin: 0; color: #77816a; font: 13px/1.7 var(--font-family); }
html[data-dialog="open"] { overflow: hidden; }

@media (max-width: 480px) {
  :root { --logo-size: 50px; --header-gap: 25px; --title-size: 19px; --panel-width: min(70vw, 270px); --panel-height: 64px; --panel-gap: 16px; --panel-radius: 18px; --panel-font-size: 19px; --glass-blur: 12px; }
  .portfolio-shell { padding-inline: 26px; grid-template-rows: auto minmax(300px, 1fr) auto; }
  .portfolio-menu { margin-top: 28px; }
  /* Bidang warna mengikuti layar HP agar geraknya tetap terlihat. */
  .orb { width: min(118vw, 480px); height: min(80svh, 620px); }
  .orb-one { left: -16vw; top: 12svh; }
  .orb-two { left: 12vw; top: 40svh; }
  .orb-three { left: -4vw; top: 65svh; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-panel { background: #ffffffd9; } }
@media (prefers-reduced-motion: reduce) { .glass-panel { transition: none; } .glass-panel:hover, .glass-panel:active { transform: none; } .orb { will-change: auto; } }
@media (prefers-reduced-transparency: reduce) { .glass-panel, .category-dialog { background: #fffffff5; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.motion-toggle {
  display: none;
}

/* HALAMAN RUANGCERITA — struktur di ruangcerita.html, isi panel di app.js. */
.section-shell { position: relative; width: min(100%, 520px); min-height: 100vh; min-height: 100svh; margin-inline: auto; padding: 44px 32px max(var(--footer-bottom-space), env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto minmax(230px, 1fr) auto; }
.back-link { position: absolute; top: 15px; left: 24px; color: #63704f; font: 11px/1.5 var(--font-family); text-decoration: none; padding: 6px 0; }
.back-link:hover { color: #344d12; }
.section-brand { text-align: center; }
.section-brand .brand-logo { width: var(--section-logo-size); height: var(--section-logo-size); margin-inline: auto; }
.section-brand h1 { margin: 26px 0 13px; font-size: var(--section-title-size); font-weight: 400; line-height: 1.4; letter-spacing: .28em; padding-left: .28em; }
.section-brand p { margin: 0; font: 12px/1.7 var(--font-family); color: #58634b; letter-spacing: .025em; }
.section-menu { margin-top: 20px; }
.glass-panel .long-label { font-size: min(1em, 4.8vw); white-space: nowrap; }
.category-page .category-dialog { width: min(390px, calc(100vw - 32px)); padding: 22px; border-radius: 24px; background: linear-gradient(135deg, #ffffffdb, #f7fce4b0 55%, #b7d95c99); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.category-page .dialog-topline { font-size: 10px; letter-spacing: .025em; color: #35432a; }
.category-page .close-dialog { width: 32px; height: 32px; flex: 0 0 auto; background: #a2cd3a; color: #fff; }
.category-page .category-dialog h2 { margin: 21px 0 9px; font-size: 20px; letter-spacing: .035em; }
.category-page .category-dialog > p { font-size: 12px; line-height: 1.75; color: #46523b; }
.category-page .project-links { margin-top: 26px; gap: 10px; }
.category-page .project-link { min-height: 50px; padding: 13px 14px; font-size: 13px; letter-spacing: .07em; background: #ffffff99; border-color: #ffffffb3; }
.category-page .project-link::after { color: #86b226; }
@media (max-width: 480px) {
  .section-shell { padding-inline: 26px; }
}
@media (prefers-reduced-transparency: reduce) { .category-page .category-dialog { background: #fcfff3; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Slot contoh menunggu materi; tidak membuka tautan kosong. */
.project-link.project-pending {font-family:var(--font-family);text-align:left;cursor:default;color:#64714f;opacity:.75;}
.project-link.project-pending::after {content:"Segera hadir";font-size:10px;letter-spacing:0;}

/* RUANGIMAJI — ubah lebar form, jarak dan tinggi kolom di sini. */
.idea-shell {grid-template-rows:auto 1fr auto;}
.idea-content {width:100%;max-width:390px;justify-self:center;margin-top:32px;min-width:0;}
.idea-intro {margin:0 0 26px;color:#58634b;font-size:12px;line-height:1.85;}
.idea-form {display:grid;gap:18px;}
.idea-field {display:grid;gap:8px;min-width:0;}
.idea-field label {font-size:12px;line-height:1.5;letter-spacing:.04em;}
.idea-field input,.idea-field textarea {display:block;width:100%;min-width:0;padding:13px 14px;border:1px solid #ffffffd9;border-radius:14px;background:#ffffffa8;color:var(--text-color);box-shadow:inset 0 1px 0 #fff;font:16px/1.5 var(--font-family);}
.idea-field textarea {min-height:150px;resize:vertical;}
.idea-field input::placeholder,.idea-field textarea::placeholder {color:#77816a;opacity:1;font-size:12px;}
.idea-field input:focus-visible,.idea-field textarea:focus-visible {outline:2px solid #648619;outline-offset:3px;background:#ffffffe6;}
.idea-field small {font-size:10px;line-height:1.6;color:#63704f;}
.idea-submit {width:min(100%,var(--panel-width));justify-self:center;margin-top:4px;}
.idea-preview-note,.idea-status {margin:0;font-size:10px;line-height:1.7;text-align:center;color:#63704f;overflow-wrap:anywhere;}
.idea-status {font-size:12px;color:#3f5b0c;}
.idea-status:empty {display:none;}
@media(prefers-reduced-transparency:reduce) {.idea-field input,.idea-field textarea {background:#fff;}}

/* Produk rencana: tombol tetap membuka penjelasan; demo belum tersedia. */
.glass-panel.is-upcoming { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.glass-panel.is-upcoming .long-label, .glass-panel.certificate-menu .long-label, .glass-panel.motion-menu .long-label, .glass-panel.registration-menu .long-label { font-size: clamp(12px, 3.8vw, 17px); letter-spacing: .08em; white-space: nowrap; }
.glass-panel.is-upcoming > small { position: relative; z-index: 1; font-size: 9px; line-height: 1.3; letter-spacing: .04em; color: #63704f; }

/* Label layanan RuangInovasi yang lebih panjang tetap muat pada tombol standar. */
.glass-panel.innovation-menu .long-label { font-size: clamp(12px, 3.7vw, 16px); letter-spacing: .06em; white-space: nowrap; }

/* Tombol menu halaman Ruang: seragam, termasuk nama layanan panjang.
   Halaman depan memakai ukuran sebelumnya. Ubah 16px ini untuk semuanya. */
.category-page .section-menu .glass-panel,.category-page .idea-submit{font-size:16px;letter-spacing:.04em}
.category-page .section-menu .glass-panel > span,.category-page .section-menu .glass-panel .long-label{font-size:inherit;letter-spacing:inherit;white-space:normal;text-align:center;overflow-wrap:normal}