/* AxDesign: the design studio. Desktop: rail + panel | canvas | properties. Phone: canvas with a bottom bar and sheets. */
.ax-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ax-kartu { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; cursor: pointer; }
.ax-kartu:hover { border-color: var(--accent); }
.ax-kartu .ax-thumb { aspect-ratio: 4 / 3; background: #e6f0f8 repeating-linear-gradient(45deg, transparent 0 12px, rgb(11 42 58 / .03) 12px 24px); display: grid; place-items: center; overflow: hidden; }
.ax-kartu .ax-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ax-kartu .ax-isi { padding: 10px 12px; } .ax-kartu b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ax-kartu .ket { display: block; }
.ax-ukuran { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ax-ukuran button { font: inherit; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.ax-ukuran button:hover { border-color: var(--accent); } .ax-ukuran b { display: block; } .ax-ukuran span { color: var(--soft); font-size: .82rem; }

/* editor shell */
.ax-editor { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: 52px 1fr; grid-template-columns: minmax(0, 1fr); background: #e9eef3; color: var(--ink); font-size: 14px; }
.ax-atas { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--navy); color: #fff; min-width: 0; }
.ax-atas #ax-keluar { white-space: nowrap; }
.ax-hp-saja { display: none; }
.ax-tbtn.kotor::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ffd166; flex: none; }
.ax-atas a { color: #fff; text-decoration: none; font-weight: 600; } .ax-atas .ax-nama { background: rgb(255 255 255 / .12); border: 0; color: #fff; font: inherit; font-weight: 700; padding: 6px 10px; border-radius: 8px; min-width: 120px; max-width: 32vw; }
.ax-atas .ax-nama:focus { outline: 2px solid #8fd0ff; }
.ax-atas .ket { color: #b8d1e3; } .ax-atas .tengah { flex: 1; display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: nowrap; }
.ax-tbtn { background: transparent; border: 0; color: #fff; font: inherit; font-weight: 600; padding: 7px 10px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ax-tbtn:hover { background: rgb(255 255 255 / .12); } .ax-tbtn:disabled { opacity: .4; cursor: default; } .ax-tbtn.utama { background: var(--accent); } .ax-tbtn.utama:hover { background: #1273cc; }
.ax-tbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ax-badan { display: grid; grid-template-columns: 64px 320px minmax(0, 1fr) 300px; min-height: 0; min-width: 0; position: relative; }
.ax-rail { background: #0f3550; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; overflow-y: auto; }
.ax-rail button { background: transparent; border: 0; color: #cfe3f1; font: inherit; font-size: .68rem; font-weight: 600; padding: 9px 2px; border-radius: 10px; cursor: pointer; display: grid; justify-items: center; gap: 4px; }
.ax-rail button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-rail button.on, .ax-rail button:hover { background: rgb(255 255 255 / .14); color: #fff; }
.ax-panel { background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; padding: 14px; display: grid; gap: 12px; align-content: start; }
.ax-panel h3 { font-size: 1.05rem; } .ax-panel .ket { font-size: .82rem; }
.ax-panel input[type=search], .ax-panel input[type=text], .ax-panel input[type=number], .ax-panel textarea, .ax-panel select { font: inherit; width: 100%; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 9px; background: #f7fafc; color: var(--ink); }
.ax-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.ax-kisi button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: #f7fafc; display: grid; place-items: center; cursor: pointer; padding: 6px; }
.ax-kisi button:hover { border-color: var(--accent); background: #eef5fb; } .ax-kisi button svg { width: 100%; height: 100%; }
.ax-kisi.foto { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } .ax-kisi.foto button { aspect-ratio: 4 / 3; padding: 0; overflow: hidden; } .ax-kisi.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-kisi.templat { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .ax-kisi.templat button { aspect-ratio: auto; padding: 0; display: grid; grid-template-rows: 1fr auto; text-align: left; } .ax-kisi.templat img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; } .ax-kisi.templat span { padding: 6px 8px; font-size: .78rem; font-weight: 600; }
.ax-teks-preset button { font: inherit; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f7fafc; cursor: pointer; margin-bottom: 8px; color: var(--ink); }
.ax-teks-preset button:hover { border-color: var(--accent); }
.ax-kanvas-wadah { position: relative; overflow: auto; display: flex; padding: 0; min-width: 0; min-height: 0; background: #e9eef3; overscroll-behavior: contain; }
.ax-kanvas-wadah.tangan { cursor: grab; } .ax-kanvas-wadah.tangan:active { cursor: grabbing; }
.ax-halaman { box-shadow: 0 14px 40px -14px rgb(11 42 58 / .45), 0 0 0 1px rgb(11 42 58 / .08); background: #fff; margin: 28px; flex: none; }   /* the editor sets the real margins: centred while the page fits, anchored under the fingers while zooming */
.ax-apung { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; z-index: 75; }
.ax-apung > * { pointer-events: auto; }
.ax-hp-zoom { display: none; background: rgb(11 42 58 / .82); color: #fff; border: 0; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: .8rem; font-weight: 700; }
.ax-props { background: var(--surface); border-left: 1px solid var(--line); overflow-y: auto; padding: 14px; display: grid; gap: 12px; align-content: start; }
.ax-props h3 { font-size: 1rem; display: flex; justify-content: space-between; align-items: center; }
.ax-props .bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ax-props .bar3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ax-props .bar4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ax-props label { display: grid; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--soft); }
.ax-props input, .ax-props select { font: inherit; width: 100%; padding: 7px 9px; border: 1.5px solid var(--line); border-radius: 8px; background: #f7fafc; color: var(--ink); min-width: 0; }
.ax-props input[type=color] { padding: 2px; height: 36px; cursor: pointer; } .ax-props input[type=range] { padding: 0; }
.ax-props .ikonbtn { font: inherit; padding: 7px 6px; border: 1px solid var(--line); border-radius: 8px; background: #f7fafc; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.ax-props .ikonbtn.on { background: var(--accent); color: #fff; border-color: var(--accent); } .ax-props .ikonbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ax-props .lapisan { display: grid; gap: 4px; } .ax-props .lapisan button { font: inherit; text-align: left; display: flex; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; color: var(--ink); }
.ax-props .lapisan button.on { border-color: var(--accent); background: #eef5fb; } .ax-props .lapisan button span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ax-props .lapisan small { color: var(--soft); }
.ax-swatch { display: flex; gap: 6px; flex-wrap: wrap; } .ax-swatch button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgb(11 42 58 / .15); cursor: pointer; }
.ax-halamanbar { display: flex; gap: 6px; align-items: center; }
.ax-hp-bawah, .ax-hp-props-btn, .ax-tutup-lembar { display: none; }
.ax-lebih .tengah { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ax-lebih .ax-tbtn { color: var(--ink); background: #eef3f7; }
.ax-lebih .ax-tbtn.on { background: var(--accent); color: #fff; }
.ax-lebih .ket { color: var(--soft); }
.ax-lebih .ax-halamanbar { width: 100%; flex-wrap: wrap; }
.ax-lebih h4 { font-size: .8rem; color: var(--soft); width: 100%; margin-top: 4px; }
.ax-bantuan { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgb(11 42 58 / .8); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: .78rem; pointer-events: none; }
dialog.ax-dialog { border: 0; border-radius: 14px; padding: 0; width: min(92vw, 520px); } dialog.ax-dialog::backdrop { background: rgb(0 48 72 / .55); } .ax-dialog .dialog-isi { padding: 20px; display: grid; gap: 12px; }
.ax-dialog label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; } .ax-dialog select, .ax-dialog input { font: inherit; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 9px; }
@media (max-width: 1100px) { .ax-badan { grid-template-columns: 64px 280px minmax(0, 1fr) 260px; } }
@media (max-width: 860px) {
  .ax-editor { grid-template-rows: 48px 1fr 58px; }
  .ax-atas { padding: 0 8px; gap: 4px; }
  .ax-atas .lbl, .ax-atas #ax-status, .ax-atas > .tengah { display: none; }
  .ax-atas .ax-nama { flex: 1; min-width: 0; max-width: none; padding: 6px 8px; }
  .ax-atas .ax-tbtn { padding: 7px 7px; }
  .ax-hp-saja { display: inline-flex; }
  .ax-hp-zoom { display: inline-flex; }
  .ax-kanvas-wadah { scrollbar-width: none; }
  .ax-kanvas-wadah::-webkit-scrollbar { display: none; }
  .ax-badan { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .ax-rail { display: none; }
  .ax-hp-bawah { display: flex; gap: 2px; overflow-x: auto; background: #0f3550; padding: 4px 6px; }
  .ax-hp-bawah button { flex: 0 0 auto; min-width: 64px; background: transparent; border: 0; color: #cfe3f1; font: inherit; font-size: .66rem; font-weight: 600; padding: 6px 4px; border-radius: 10px; display: grid; justify-items: center; gap: 2px; }
  .ax-hp-bawah button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ax-hp-bawah button.on { background: rgb(255 255 255 / .14); color: #fff; }
  .ax-panel, .ax-props { position: fixed; left: 0; right: 0; bottom: 58px; max-height: 62vh; border-radius: 16px 16px 0 0; border: 0; box-shadow: 0 -10px 30px rgb(11 42 58 / .25); transform: translateY(110%); transition: transform .25s; z-index: 80; }
  /* a closed sheet is moved below the bottom bar and takes no pointer events; a short panel's own height is not enough of an offset */
  .ax-panel:not(.buka), .ax-props:not(.buka) { transform: translateY(calc(100% + 70px)); pointer-events: none; visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .ax-panel.buka, .ax-props.buka { transform: none; }
  .ax-tutup-lembar { display: block; position: sticky; top: -14px; margin: -14px -14px 0; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line); text-align: right; z-index: 1; }
  .ax-tutup-lembar button { font: inherit; border: 0; background: #e6f0f8; border-radius: 999px; padding: 4px 12px; font-weight: 600; cursor: pointer; }
  .ax-hp-props-btn { display: inline-flex; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 700; box-shadow: var(--shadow); }
}
.ax-swatch button.besar { width: 40px; height: 40px; }