/* ============================================================
   DESIGN GALLERY — gaya deck.gallery
   Navbar kaca melayang, grid kartu, halaman detail + 3 tampilan
   ============================================================ */

/* ---------------- font: Fonetika (file lokal di folder fonts/) ---------------- */

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-ExtraLightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fonetika";
  src: url("fonts/Fonetika-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #2b2b2b;
  --ink-2: rgba(43, 43, 43, .78);
  --ink-3: rgba(43, 43, 43, .5);
  --line: rgba(43, 43, 43, .08);
  --line-strong: rgba(43, 43, 43, .16);
  --soft: rgba(43, 43, 43, .06);
  --bg-soft: #f1f1f1;
  --card: #f1f1f1;
  --tile-glass: rgba(43, 43, 43, .5);
  --glass-bg: rgba(255, 255, 255, .8);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 2px rgba(0, 0, 0, .02),
    0 0 6px rgba(0, 0, 0, .03),
    0 6px 30px rgba(0, 0, 0, .07),
    0 0 0 1px rgba(0, 0, 0, .02);
  --tile-shadow: 0 1px 5px rgba(43, 43, 43, .08), 0 0 1px rgba(43, 43, 43, .4);
  --on-ink: #ffffff;                       /* teks di atas latar --ink */
  --ink-hover: #111111;
  --surface: #ffffff;                      /* popup, input */
  --hover: rgba(43, 43, 43, .04);
  --hover-strong: rgba(43, 43, 43, .1);
  --search-bg: rgba(239, 239, 239, .81);
  --search-hover: rgba(232, 232, 232, .9);
  --panel-bg: rgba(58, 58, 58, .82);
  --canvas-bg: #f7f7f7;
  --canvas-dot: rgba(43, 43, 43, .16);
  --backdrop: rgba(17, 17, 17, .38);
  --popup-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 24px 60px rgba(17, 17, 17, .18);
  --card-shadow: 0 14px 34px rgba(17, 17, 17, .16);
  --card-shadow-lift: 0 26px 60px rgba(17, 17, 17, .28);
  --search-ink: var(--ink-3);
  --tile-drop: rgba(0, 0, 0, .15);
  --tile-drop-hover: rgba(0, 0, 0, .2);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: 24px;
  --nav-h: 64px;
}

/* ---------------- tema: dark ----------------
   Aktif lewat <html data-theme="dark"> di index.html.
   Hapus atribut itu untuk kembali ke tema terang. */

:root[data-theme="dark"] {
  /* warna mengikuti deck.gallery mode gelap */
  color-scheme: dark;
  --bg: #0f0f0f;
  --ink: #ececec;
  --ink-2: rgba(236, 236, 236, .65);
  --ink-3: rgba(236, 236, 236, .45);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .18);
  --soft: rgba(255, 255, 255, .06);
  --bg-soft: #1b1b1b;
  --card: #1b1b1b;
  --tile-glass: rgba(20, 20, 20, .55);
  --glass-bg: rgba(38, 38, 38, .8);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 2px rgba(0, 0, 0, .02),
    0 0 6px rgba(0, 0, 0, .03),
    0 6px 30px rgba(0, 0, 0, .07);
  --tile-shadow: 0 1px 5px rgba(0, 0, 0, .4), 0 0 1px rgba(255, 255, 255, .08);
  --on-ink: #0f0f0f;
  --ink-hover: #ffffff;
  --surface: #1b1b1b;
  --hover: rgba(255, 255, 255, .04);
  --hover-strong: rgba(255, 255, 255, .1);
  --search-bg: rgba(31, 31, 31, .81);
  --search-hover: rgba(40, 40, 40, .88);
  --search-ink: rgba(236, 236, 236, .6);
  --panel-bg: rgba(38, 38, 38, .92);
  --canvas-bg: #141414;
  --canvas-dot: rgba(255, 255, 255, .1);
  --backdrop: rgba(0, 0, 0, .6);
  --popup-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .6);
  --card-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  --card-shadow-lift: 0 26px 60px rgba(0, 0, 0, .7);
  --tile-drop: rgba(0, 0, 0, .45);
  --tile-drop-hover: rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Fonetika", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* tombol & tab memakai Fonetika Medium */
button, .linkbtn { font-weight: 500; }
.searchtrigger, .sfrow, .meta__row dd button { font-weight: 400; }

/* ---------------- navbar ---------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--gutter);
  pointer-events: none;           /* area kosong di antara pill tidak menghalangi klik */
}

.navbar > * { pointer-events: auto; }

.navbar__start { display: flex; align-items: center; gap: 8px; flex: none; }
.navbar__search { position: relative; flex: 1 1 280px; min-width: 150px; max-width: 360px; margin-left: auto; }
.navbar__end { display: flex; align-items: center; gap: 8px; flex: none; }

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--glass-shadow);
  border: 0;
  border-radius: 999px;
}

.brandpill {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  transition: transform .3s var(--ease);
}

.brandpill__logo { height: 14px; width: auto; display: block; }     /* logo = huruf kapital setinggi gambar; ±35% tinggi kapsul */
/* logo teks putih untuk tema gelap, teks gelap untuk tema terang */
.brandpill__logo--ondark { display: none; }
:root[data-theme="dark"] .brandpill__logo--ondark { display: block; }
:root[data-theme="dark"] .brandpill__logo--onlight { display: none; }

/* hover logo: pill putih, logo versi hitam */
.brandpill { transition: background .2s var(--ease), transform .3s var(--ease); }
:root[data-theme="dark"] .brandpill:hover { background: #ffffff; }
:root[data-theme="dark"] .brandpill:hover .brandpill__logo--ondark { display: none; }
:root[data-theme="dark"] .brandpill:hover .brandpill__logo--onlight { display: block; }
.brandpill:active { transform: scale(.97); }

.tabs { height: 40px; display: flex; align-items: center; padding: 4px; gap: 0; }

/* dropdown kategori — hanya dipakai di HP (lihat @media max-width 480px) */
.catdrop { position: relative; display: none; }
.catdrop__btn {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.catdrop__btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.catdrop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.catdrop__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 200px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 18px;
  background: var(--panel-bg);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  animation: fadein .2s var(--ease);
}
.catdrop__menu[hidden] { display: none; }
.catdrop__item {
  height: 38px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.catdrop__item:hover, .catdrop__item.is-current { background: rgba(255, 255, 255, .08); }
.catdrop__item svg { width: 15px; height: 15px; flex: none; }

.tab {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease);
}

.tab:hover { background: var(--hover); }

/* tab aktif = stiker berwarna, warnanya sama dengan chip kategori di hero
   (urutan kategori: hijau mint · ungu muda · oranye · biru muda) */
/* semua tab (aktif maupun tidak) berhuruf kapital; kapital terbaca lebih besar → sedikit dikecilkan */
.tab, .catdrop__btn, .catdrop__item { font-size: 12.5px; text-transform: uppercase; }
.tab, .catdrop__btn { --chip: #b9f6e3; --tilt: -1.2deg; }
.tab:nth-child(4n + 2), .catdrop__btn[data-ci="1"] { --chip: #e9b8fa; --tilt: 1deg; }
.tab:nth-child(4n + 3), .catdrop__btn[data-ci="2"] { --chip: #f7b267; --tilt: -1deg; }
.tab:nth-child(4n + 4), .catdrop__btn[data-ci="3"] { --chip: #a9c2f6; --tilt: 1.2deg; }
/* tab yang terpilih ditempel sedikit miring (tipis saja) supaya tidak kaku */
.tab.is-current { rotate: var(--tilt); }

.tab.is-current, .tab.is-current:hover, .catdrop__btn[data-ci] {
  background-color: var(--chip);
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 72%);
  /* bayangan stiker dibuat tipis: navbar melayang di atas gambar saat digulir, bayangan tebal jadi kotor */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .05),
    inset 0 -1.5px 0 rgba(0, 0, 0, .10),
    1px 1.5px 0 rgba(0, 0, 0, .35),
    2px 3px 5px rgba(0, 0, 0, .28);
  color: #0c0c0c;
  font-weight: 800;              /* extra bold: hanya tab yang aktif */
}
/* versi dropdown (HP): efek kaca dimatikan supaya warnanya pekat */
.catdrop__btn[data-ci] { backdrop-filter: none; -webkit-backdrop-filter: none; }


.searchtrigger {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--search-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  color: var(--ink);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease), box-shadow .3s var(--ease);
}

.searchtrigger:hover { background: var(--search-hover); }
.searchtrigger[aria-expanded="true"] { background: var(--glass-bg); box-shadow: var(--glass-shadow); }
.searchtrigger__icon { width: 15px; height: 15px; flex: none; color: var(--search-ink); }
.searchtrigger__label { flex: 1; min-width: 0; color: var(--search-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.searchtrigger.has-value .searchtrigger__label { color: var(--ink); }

.searchtrigger__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  margin-right: -8px;
  padding: 0 7px 0 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 12px;
}

.searchtrigger__chip[hidden] { display: none; }
.searchtrigger__chip svg { width: 11px; height: 11px; opacity: .7; }

.askbtn {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 12px;
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
  transition: transform .3s var(--ease);
}

.askbtn svg { width: 15px; height: 15px; }
.askbtn:active { transform: scale(.96); }
.askbtn.is-active { background: var(--ink); color: var(--on-ink); }

.glass:focus-visible, .tab:focus-visible, .searchtrigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------------- unlock: melayang kecil di kanan bawah ---------------- */

/* dok melayang setinggi 0: menempel 20px dari bawah layar, dan karena
   sticky ia otomatis berhenti di ujung konten — tepat di atas footer */
.floatdock {
  position: sticky;
  bottom: 20px;
  z-index: 45;
  height: 0;
}

.unlockfab {
  position: absolute;
  right: 20px;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .2s var(--ease), transform .3s var(--ease);
}

.unlockfab__icon, .unlockfab__icon svg { width: 14px; height: 14px; display: block; }
.unlockfab:hover { background: var(--surface); }
.unlockfab:active { transform: scale(.97); }
.unlockfab.is-open { background: var(--ink); color: var(--on-ink); }
.unlockfab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* tema gelap: tombol unlock putih solid */
:root[data-theme="dark"] .unlockfab { background: #ffffff; color: #0f0f0f; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .unlockfab:hover { background: #e9e9e9; }
:root[data-theme="dark"] .unlockfab.is-open { background: var(--glass-bg); color: var(--ink); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: var(--glass-shadow); }

/* ---------------- panel search & filter ---------------- */

.sfpanel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 50;
  width: min(480px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  max-height: min(520px, calc(100dvh - 110px));
  border-radius: 24px;
  background: var(--panel-bg);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  color: #ffffff;
  overflow: hidden;
  animation: sfin .24s var(--ease);
}

.sfpanel[hidden] { display: none; }

@keyframes sfin {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateX(-50%); }
}

.sfpanel__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 12px;
}

.sfpanel__bar > svg { width: 17px; height: 17px; flex: none; color: rgba(255, 255, 255, .55); }

.sfpanel__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  outline: none;
}

.sfpanel__input::placeholder { color: rgba(255, 255, 255, .5); }

.sfpanel__clear {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  cursor: pointer;
}

.sfpanel__clear svg { width: 11px; height: 11px; }
.sfpanel__clear[hidden] { display: none; }

.sfpanel__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 10px 0;
}

.sfpanel__rail { display: grid; align-content: start; gap: 2px; padding-top: 6px; }

.sfrail {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.sfrail svg { width: 16px; height: 16px; flex: none; }
.sfrail:hover { color: #ffffff; }
.sfrail.is-current { background: rgba(255, 255, 255, .1); color: #ffffff; }

.sfrail__dot {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  color: #2b2b2b;
  font-size: 11px;
  font-weight: 600;
}

.sfpanel__content { overflow-y: auto; padding: 6px 6px 12px 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }

.sfgroup__head { padding: 10px 0 6px; font-size: 13px; color: rgba(255, 255, 255, .5); }

.sfrow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px 0 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.sfrow__check {
  width: 18px; height: 18px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  transition: background .15s ease, box-shadow .15s ease;
}

.sfrow__check svg { width: 12px; height: 12px; opacity: 0; color: #2b2b2b; }
.sfrow.is-on .sfrow__check { background: #ffffff; box-shadow: none; }
.sfrow.is-on .sfrow__check svg { opacity: 1; }
.sfrow:hover .sfrow__check { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.sfrow.is-on:hover .sfrow__check { box-shadow: none; }

.sfrow__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfrow__count { font-size: 12px; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.sfrow.is-empty { opacity: .4; }

.sfpanel__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 14px 20px;
}

.sfpanel__reset {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

.sfpanel__reset:hover { color: #ffffff; }
.sfpanel__count { flex: 1; font-size: 13px; color: rgba(255, 255, 255, .5); }

.sfpanel__done {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease;
}

.sfpanel__done:hover { background: rgba(255, 255, 255, .22); }

/* ---------------- popup Show Related Design ----------------
   Tampilan sama dengan panel search & filter */

.promptmodal.promptmodal--top { place-items: start center; padding-top: 72px; }
.promptmodal--top .promptmodal__backdrop { background: rgba(0, 0, 0, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* popup unlock: tepat di tengah layar, latar belakang digelapkan lebih pekat */
.promptmodal--center .promptmodal__backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* popup Show Related Project menempel di bawah tombolnya (pojok kanan atas) */
.promptmodal.promptmodal--anchor {
  place-items: start end;
  padding: calc(var(--nav-h) + 4px) var(--gutter) 24px;
}

.promptmodal--anchor .promptmodal__backdrop { background: rgba(0, 0, 0, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }

.promptmodal--anchor .aipanel { animation: aiin .22s var(--ease); transform-origin: top right; }

@media (max-width: 480px) {
  .promptmodal.promptmodal--anchor { padding: calc(var(--nav-h) + 4px) 12px 12px; }
}

.aipanel {
  position: relative;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--panel-bg);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  color: #ffffff;
  overflow: hidden;
  animation: aiin .24s var(--ease);
}

@keyframes aiin {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.aipanel__bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px 12px;
}

.aipanel__icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: rgba(255, 255, 255, .55); }

.aipanel__input {
  flex: 1;
  min-width: 0;
  height: 21px;
  max-height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  line-height: 21px;
  resize: none;
  outline: none;
}

.aipanel__input::placeholder { color: rgba(255, 255, 255, .5); }
.aipanel__bar .sfpanel__clear { flex: none; }

.aipanel__body { padding: 4px 20px 8px; }
.aipanel__body .sfgroup__head { padding-top: 6px; }

.aipanel__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }

.aichip {
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
  font-size: 13.5px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.aichip:hover { background: rgba(255, 255, 255, .15); color: #ffffff; }

.aipanel .sfpanel__foot { border-top: 0; }

.aipanel--sm { width: min(440px, 100%); }

.aipanel__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  color: #ffffff;
}

.aipanel__text {
  margin: 0;
  padding-top: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}

.aipanel__note {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: #ff8a80;
}

/* pesan error menggantikan keterangan di bawah */
.aipanel__note:not([hidden]) + .sfpanel__count { display: none; }

.aipanel__note[hidden] { display: none; }

/* popup password: judul, deskripsi, input, tombol — rata tengah */
.lockpanel { align-items: center; padding: 30px 24px 24px; text-align: center; }

.lockpanel__close { position: absolute; top: 14px; right: 14px; }

.lockpanel__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
}

.lockpanel__icon svg { width: 20px; height: 20px; }

.lockpanel__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

.lockpanel__desc {
  max-width: 32ch;
  margin: 8px 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}

.lockpanel__form { width: 100%; display: grid; gap: 10px; }

/* tombol yang berdiri sendiri (popup link kedaluwarsa) */
.lockpanel > .lockpanel__btn { margin-top: 4px; }

.lockpanel__input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  outline: none;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}

.lockpanel__input::placeholder { color: rgba(255, 255, 255, .45); }
.lockpanel__input:focus { background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

.lockpanel__note { flex: none; text-align: center; }

.lockpanel__btn {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #0f0f0f;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s var(--ease), transform .3s var(--ease);
}

.lockpanel__btn:hover { background: #e9e9e9; }
.lockpanel__btn:active { transform: scale(.98); }

/* input password satu baris */
input.aipanel__input { height: 21px; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .promptmodal.promptmodal--top { padding: 60px 12px 12px; }
  .aipanel .sfpanel__count { display: none; }
  .aipanel .sfpanel__done { margin-left: auto; }
}

/* ---------------- hero: meja kerja (lihat hero.js) ---------------- */

.hero { position: relative; height: 280vh; height: 280svh; }
.hero__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* panel yang di akhir scroll mengecil jadi kartu */
.hero__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
  background: #1a110b;
}
/* vinyet tipis supaya tepi layar meredup */
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(0, 0, 0, .5));
}

/* tirai hitam di akhir scroll: bagian bawah meja memudar ke warna halaman, lalu seluruh meja
   meredup selagi hero naik keluar layar (--dark, --from, dan opacity diatur hero.js) */
.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgb(15 15 15 / var(--dark, 0)) var(--from, 70%), #0f0f0f 96%);
}

/* "meja": ukurannya tetap, di-scale menutup layar oleh hero.js */
.desk { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; will-change: transform; }

/* latar: foto meja kayu dengan bayangan daun */
.desk__plate { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; }

/* cutting mat gelap bertitik */
.desk__mat {
  position: absolute;
  overflow: hidden;
  border-radius: 26px;
  background-color: #262627;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .15) 1.3px, transparent 1.9px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .09) inset,
    0 0 0 1px rgba(0, 0, 0, .5),
    5px 7px 6px rgba(0, 0, 0, .5),
    22px 30px 46px rgba(0, 0, 0, .5);
}
/* bayangan daun dari latar diteruskan ke atas mat */
.desk__matlight { position: absolute; inset: 0; background-repeat: no-repeat; mix-blend-mode: multiply; }

/* ---- objek di meja: foto + dua lapis bayangan (lihat shade() di hero.js) ---- */

.ob { position: absolute; left: 0; top: 0; translate: -50% -50%; will-change: transform; }
.ob[hidden] { display: none; }
.ob svg { display: block; width: 100%; height: 100%; }
.ob__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.ob__shadow { position: absolute; max-width: none; pointer-events: none; user-select: none; will-change: transform, opacity; }

.ob-cursor { z-index: 6; width: 42px; height: 42px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.ob-cursor span {
  position: absolute;
  left: 30px;
  top: 34px;
  padding: 5px 10px;
  border-radius: 4px 12px 12px 12px;
  background: #F2E400;
  color: #111111;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* ---- isi hero di atas mat ---- */

.hero__content {
  position: absolute;
  display: grid;
  justify-items: center;
  text-align: center;
  will-change: transform, opacity;
}

.stk { position: relative; display: block; width: 266px; height: 266px; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stk__art {
  position: absolute;
  inset: 0;
  rotate: -4deg;
  /* bayangan tebal: tepi stiker terasa punya ketebalan + bayangan jatuh ke kanan bawah */
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .5)) drop-shadow(7px 9px 5px rgba(0, 0, 0, .55)) drop-shadow(20px 26px 22px rgba(0, 0, 0, .6));
  transition: rotate .5s cubic-bezier(.34, 1.56, .64, 1), scale .5s cubic-bezier(.34, 1.56, .64, 1), translate .5s cubic-bezier(.34, 1.56, .64, 1);
}
/* stiker "terangkat" saat disentuh kursor */
.stk.is-live .stk__art { rotate: 3deg; scale: 1.07; translate: 0 -6px; }
.stk__img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; user-select: none; -webkit-user-drag: none; }
.stk__img.is-on { opacity: 1; }
.stk.is-pop .stk__img.is-on { animation: stkpop .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes stkpop { 0% { scale: .84; rotate: -7deg; } 100% { scale: 1; rotate: 0deg; } }

.stk__chip {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: #F2E400;
  color: #111111;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translate(-50%, 14px) rotate(0deg) scale(.5);
  transition: opacity .2s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.stk.is-live .stk__chip { opacity: 1; transform: translate(-50%, 0) rotate(-8deg) scale(1); }
/* posisi chip per ilustrasi: tidak menutupi stik PS/logo Barça, mangkok, rambut/tongkat */
/* stiker hero yang baru: posisi chip berbeda-beda, tidak ada yang menutupi wajah
   award → kiri-bawah (di lengan, piala tetap terlihat) · seo → kanan-bawah · roi → di bahu kanan, dekat kerah */
.stk[data-look="award"] .stk__chip { left: -16%; bottom: 9%; transform: translate(0, 14px) scale(.5); }
.stk[data-look="award"].is-live .stk__chip { transform: translate(0, 0) rotate(-7deg) scale(1); }
.stk[data-look="seo"] .stk__chip { left: 26%; bottom: 0%; transform: translate(0, 14px) scale(.5); }
.stk[data-look="seo"].is-live .stk__chip { transform: translate(0, 0) rotate(6deg) scale(1); }
.stk[data-look="roi"] .stk__chip { left: 53%; top: 46%; bottom: auto; transform: translate(0, 14px) scale(.5); }
.stk[data-look="roi"].is-live .stk__chip { transform: translate(0, 0) rotate(-6deg) scale(1); }
.stk[data-look="culers"] .stk__chip { left: 1%; bottom: 37%; transform: translate(0, 14px) scale(.5); }
.stk[data-look="culers"].is-live .stk__chip { transform: translate(0, 0) rotate(-8deg) scale(1); }
.stk[data-look="mieayam"] .stk__chip { left: 70%; bottom: 26%; padding: 9px 14px; white-space: pre; text-align: center; line-height: 1.14; border-radius: 18px; transform: translate(0, 14px) scale(.5); }
.stk[data-look="mieayam"].is-live .stk__chip { transform: translate(0, 0) rotate(8deg) scale(1); }
.stk[data-look="potter"] .stk__chip { left: 63%; top: 10%; bottom: auto; transform: translate(0, 14px) scale(.5); }
.stk[data-look="potter"].is-live .stk__chip { transform: translate(0, 0) rotate(8deg) scale(1); }

/* ukuran & jarak mengikuti mockup: stiker → "Design gallery of" → NAMA → deskripsi (blok di tengah mat) */
.hero__title { margin: 34px 0 0; font-size: 55px; font-weight: 800; line-height: 1; letter-spacing: -0.005em; text-transform: uppercase; color: #ffffff; text-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
/* "DESIGN GALLERY BY": stiker pil putih yang miring, menumpang di atas nama */
.hero__title span {
  position: relative;
  z-index: 1;
  display: block;
  width: max-content;
  margin: 0 auto -7px;           /* negatif: chip menumpang di atas huruf nama */
  padding: 3.5px 13px;
  border-radius: 999px;
  /* stiker putih: kilau kertas tipis + tepi potongan, tanpa garis luar */
  background: linear-gradient(115deg, #ffffff 28%, #f0f0f0 50%, #ffffff 72%);
  /* bayangan berlapis seperti stiker ilustrasi (arah cahaya sama): tepi tebal, lalu bayangan jatuh */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .05),
    inset 0 -1.5px 0 rgba(0, 0, 0, .10),
    1.5px 2px 0 rgba(0, 0, 0, .5),
    3px 4.5px 3px rgba(0, 0, 0, .5),
    8px 11px 12px rgba(0, 0, 0, .5);
  color: #0c0c0c;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  rotate: -4deg;
}

.hero__desc { margin: 7px 0 0; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
/* lokasi + jam: kecil, rata kanan di pojok kanan atas mat */
.hero__meta { position: absolute; translate: -100% 0; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 1; color: var(--ink-3); white-space: nowrap; will-change: opacity; }
.hero__clock { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- adegan kedua: kartu project di atas mat ---- */

.hero__work { position: absolute; padding-top: 78px; text-align: center; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.hero__work[hidden] { display: none; }
.hero__worktitle { margin: 0; font-size: 50px; font-weight: 800; line-height: 1; letter-spacing: -0.005em; text-transform: uppercase; color: #ffffff; text-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
/* chip kategori warna-warni di bawah judul */
.hero__worksub { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 0; }
/* tiap chip = stiker, gayanya sama dengan label "DESIGN GALLERY BY": kilau kertas, tepi tebal,
   bayangan berlapis (arah cahaya sama), dan ditempel sedikit miring bergantian */
.hero__worksub span {
  padding: 3.5px 12px;
  border-radius: 999px;
  background-color: #b9f6e3;
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .05),
    inset 0 -1.5px 0 rgba(0, 0, 0, .10),
    1.5px 2px 0 rgba(0, 0, 0, .5),
    3px 4.5px 3px rgba(0, 0, 0, .5),
    8px 11px 12px rgba(0, 0, 0, .5);
  color: #0c0c0c;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: -2deg;
}
.hero__worksub span:nth-child(4n + 2) { background-color: #e9b8fa; rotate: 1.5deg; }
.hero__worksub span:nth-child(4n + 3) { background-color: #f7b267; rotate: -1.5deg; }
.hero__worksub span:nth-child(4n + 4) { background-color: #a9c2f6; rotate: 2deg; }

.wcard {
  z-index: 4;
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  overflow: hidden;
  border-radius: 12px;
  background: #222;
  box-shadow: 0 24px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1);
  opacity: 0;
  will-change: transform, opacity;
}
.wcard img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* portrait (HP): tipografi lebih besar karena mejanya di-scale lebih kecil */
.desk[data-mode="port"] .stk { width: 330px; height: 330px; }
.desk[data-mode="port"] .stk__chip { font-size: 21px; padding: 10px 19px; }
.desk[data-mode="port"] .stk[data-look="mieayam"] .stk__chip { padding: 12px 18px; border-radius: 26px; }
.desk[data-mode="port"] .hero__title { font-size: 58px; margin-top: 44px; }
.desk[data-mode="port"] .hero__title span {
  font-size: 20px; padding: 4px 16px; margin-bottom: -6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), inset 0 -2px 0 rgba(0, 0, 0, .10), 2px 2.5px 0 rgba(0, 0, 0, .5), 4px 6px 4px rgba(0, 0, 0, .5), 10px 14px 15px rgba(0, 0, 0, .5);
}
.desk[data-mode="port"] .hero__desc { font-size: 24px; margin-top: 12px; max-width: 18em; }
.desk[data-mode="port"] .hero__meta { font-size: 20px; gap: 12px; }
.desk[data-mode="port"] .hero__meta .livedot { width: 11px; height: 11px; }
.desk[data-mode="port"] .hero__work { padding-top: 84px; }
.desk[data-mode="port"] .hero__worktitle { font-size: 64px; }
.desk[data-mode="port"] .hero__worksub { gap: 10px; margin-top: 22px; padding: 0 40px; }
.desk[data-mode="port"] .hero__worksub span {
  font-size: 20px; padding: 5px 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), inset 0 -2px 0 rgba(0, 0, 0, .10), 2px 2.5px 0 rgba(0, 0, 0, .5), 4px 6px 4px rgba(0, 0, 0, .5), 10px 14px 15px rgba(0, 0, 0, .5);
}

/* petunjuk scroll */
.hero__hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: rgba(38, 38, 38, .72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
/* hover: tombol jadi putih & terangkat, roda mouse bergerak lebih cepat */
@media (hover: hover) {
  .hero__hint:hover {
    background: #ffffff;
    color: #0c0c0c;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    transform: translateY(-3px);
  }
  .hero__hint:hover .hero__wheel { animation-duration: .8s; }
}
/* hover: cincin hitam pekat yang masuk ke dalam, sama seperti tombol berlatar putih lainnya */
.hero__hint::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: inset .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .hero__hint:hover::after { inset: 2px; border-color: #000000; }
}
.hero__hint:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.hero__hint:active { transform: translateY(0) scale(.96); transition-duration: .08s; }
/* ikon mouse; rodanya bergerak turun = ajakan scroll */
.hero__hint svg { width: 12px; height: 18px; flex: none; }
.hero__wheel { animation: herohint 1.6s ease-in-out infinite; }
@keyframes herohint { 0% { transform: translateY(-1px); opacity: 1; } 70%, 100% { transform: translateY(5px); opacity: 0; } }

.is-detail .hero { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; height: 100svh; }
  .hero__wheel, .stk.is-pop .stk__img.is-on { animation: none; }
  .wcard, .hero__work { display: none; }
}

/* ---------------- halaman ---------------- */

.page { padding: 0 var(--gutter) 64px; }

.pageview { animation: fadein .35s var(--ease); }
.pageview--home { padding-top: 12px; }

/* baris ringkasan saat mencari / memfilter / tanya AI */
.resultbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 22px;
}

.resultbar__count { font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.resultbar__topic { font-size: 22px; line-height: 1.2; color: var(--ink-3); letter-spacing: -0.01em; }

.pillbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: background .2s var(--ease);
}

.pillbtn:hover { background: var(--hover-strong); }
.pillbtn svg { width: 14px; height: 14px; }
.resultbar .pillbtn { align-self: center; }

.empty {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 15px;
}

/* ---------------- grid kartu ----------------
   Gaya kartu mengikuti yuvalhaker.com: gambar bersudut bulat,
   judul + teks di bawahnya, hover membesar dengan pantulan. */

.tilegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}

.tilegrid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }

.tile {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--ink);
  transform-origin: center;
  filter: drop-shadow(0 .8rem 1.8rem var(--tile-drop));
  transition:
    transform .4s cubic-bezier(.1, 2.56, .64, 1),
    filter .4s cubic-bezier(.1, 2.56, .64, 1);
  animation: tilein .5s var(--ease) both;
}

/* animasi masuk memakai `translate`, jadi tidak bentrok dengan transform hover */
@keyframes tilein { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

.tile__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--card);
}

/* hover kartu: cincin hitam pekat masuk ke dalam gambar, sama seperti hover tab */
.tile__media::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: inset .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) { .tile:hover .tile__media::after { inset: 4px; border-color: #000000; } }

.tile .mock { color: inherit; }

/* lapisan foto yang berganti saat kartu di-hover */
.tile__flip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}

.tile__flip.is-on { opacity: 1; }

.tile__caption { display: block; padding-top: 10px; }

.tile__title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.tile__title svg { width: 12px; height: 12px; flex: none; opacity: .6; }

.tile__text {
  display: block;
  margin-top: 1px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .tile:hover {
    z-index: 2;
    transform: scale(1.035);
    filter: drop-shadow(0 1.4rem 1.8rem var(--tile-drop-hover));
  }
  .tile:active {
    transform: scale(1);
    filter: drop-shadow(0 1rem 1.8rem var(--tile-drop));
  }
}

.tile:focus-visible { outline: none; }
.tile:focus-visible .tile__media { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------------- detail project ---------------- */

/* halaman detail: navbar, tombol unlock, dan footer disembunyikan —
   navigasinya cukup tombol Back + pilihan tampilan */
.is-detail .navbar,
.is-detail .unlockfab { display: none; }

.detailbar {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding-top: 12px;
  padding-bottom: 12px;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}

/* menepi saat menggulung ke bawah */
.detailbar.is-away {
  transform: translateY(calc(-100% - 12px));
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .detailbar { transition: none; }
}

.backbtn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 13px;
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
}

.backbtn svg { width: 15px; height: 15px; }

/* tombol tutup/buka panel info — saat tertutup, galeri memakai lebar penuh */
.infotoggle {
  width: 38px;
  height: 38px;
  margin-left: auto;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .2s var(--ease), background-color .3s var(--ease);
}

.infotoggle svg { width: 16px; height: 16px; }
.infotoggle:hover { color: var(--ink); }
.infotoggle[aria-pressed="true"] { color: var(--ink); }

/* Back & tombol panel info: hover jadi putih dengan cincin hitam di dalam, sama seperti logo di navbar */
.backbtn, .infotoggle { position: relative; transition: background-color .3s cubic-bezier(0, 0, .2, 1), color .3s cubic-bezier(0, 0, .2, 1); }
.backbtn::after, .infotoggle::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: inset .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .backbtn:hover, .infotoggle:hover { background: #ffffff; color: #0f0f0f; }
  .backbtn:hover::after, .infotoggle:hover::after { inset: 2px; border-color: #000000; }
}

.is-info-hidden .detail { grid-template-columns: minmax(0, 1fr); }
.is-info-hidden .detail__info { display: none; }

.detail {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);   /* 75% : 25% */
  gap: 64px;
  align-items: start;
}

.detail__media { min-width: 0; }

.viewbar {
  display: inline-flex;
  gap: 0;
  height: 38px;
  padding: 4px;
}

.viewbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.viewbtn svg { width: 14px; height: 14px; }
.viewbtn:hover { color: var(--ink); }
.viewbtn.is-active { background: var(--soft); color: var(--ink); }
/* halaman detail: tombol tampilan yang aktif = stiker berwarna, sedikit miring (seperti tab di home);
   tiap tombol punya warna & arah miring sendiri: List hijau mint ↺, Column pink ↻, Board biru ↺ */
.viewbar .viewbtn { --chip: #b9f6e3; --tilt: -1.5deg; font-size: 12.5px; text-transform: uppercase; }   /* kapital, seperti tab di home */
.viewbar .viewbtn[data-view="column"] { --chip: #e9b8fa; --tilt: 1.5deg; }
.viewbar .viewbtn[data-view="brutal"] { --chip: #a9c2f6; --tilt: -1.2deg; }
.viewbar .viewbtn.is-active {
  background-color: var(--chip);
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 72%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), inset 0 -1.5px 0 rgba(0, 0, 0, .10), 1px 1.5px 0 rgba(0, 0, 0, .35), 2px 3px 5px rgba(0, 0, 0, .28);
  color: #0c0c0c;
  font-weight: 800;
  rotate: var(--tilt);
  --ring-color: #000000;
}

.shots { display: grid; gap: 10px; }
.shots--column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.shotcol { display: grid; gap: 10px; min-width: 0; }

.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--tile-shadow);
}

.shot__cap {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--tile-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
}

.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.shots--brutal { display: block; }

.shots--brutal .bcanvas {
  height: calc(100dvh - 62px - 24px);
  min-height: 460px;
  background:
    radial-gradient(circle, var(--canvas-dot) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--canvas-bg);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* panel info kanan */
/* info ikut menggulung, lalu BERHENTI tepat sebelum menyentuh indikator
   scroll di kanan bawah (sticky yang mengunci dari sisi bawah) */
.detail__info { align-self: stretch; padding-top: 2px; min-width: 0; }

/* isinya menempel saat menggulung, lalu berhenti sendiri di ujung galeri
   (pembungkusnya setinggi galeri). Tingginya dibatasi supaya tidak pernah
   menyentuh indikator scroll di kanan bawah. */
.detail__infoinner {
  position: sticky;
  top: 74px;
  max-height: calc(100dvh - 74px - 250px);
  overflow-y: auto;
  scrollbar-width: none;
}

.detail__infoinner::-webkit-scrollbar { display: none; }

.detail__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.detail__desc {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.detail__desc.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Show more": tautan teks bergaris bawah + chevron (bukan tombol) */
.detail__more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.detail__more span {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .25s var(--ease);
}
.detail__more:hover span { text-decoration-color: currentColor; }
.detail__more svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.detail__more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* label di kolom kiri, isinya persis di sampingnya — rapat dan mudah dipindai.
   Garis tipis memisahkannya dari judul & overview di atasnya. */
.meta {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.meta__row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.meta__row dt { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.meta__row dd { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.meta__row dd button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* garis bawah hanya saat hover */
.meta__row dd button:hover { text-decoration: underline; text-decoration-color: var(--ink-3); }

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }

.tag {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 5px;          /* bukan pill — biar tidak terlihat seperti tombol */
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 11px;
  color: var(--ink-3);
}

.linkbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }

.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 12px;
  transition: background .2s var(--ease), transform .3s var(--ease);
}

.linkbtn svg { width: 12px; height: 12px; }
.linkbtn:hover { background: var(--hover-strong); }
.linkbtn:active { transform: scale(.97); }
.linkbtn--primary { background: var(--ink); color: var(--on-ink); }
.linkbtn--primary:hover { background: var(--ink-hover); }

.infonote { margin: 20px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* HP: tombol link tampil biasa di bawah tags; begitu info project sudah tergulung habis, salinannya
   melayang di dasar layar — selebar layar, satu baris dua kolom (diatur dockLinks di app.js) */
.linkbtns--float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 22px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 55%, transparent);
  opacity: 0;
  translate: 0 100%;
  pointer-events: none;
  transition: opacity .25s var(--ease), translate .35s var(--ease);
}
.linkbtns--float.is-shown { opacity: 1; translate: none; pointer-events: auto; }
.linkbtns--float .linkbtn { justify-content: center; height: 38px; padding: 0 10px; font-size: 13.5px; white-space: nowrap; }
.linkbtns--float .linkbtn svg { width: 14px; height: 14px; flex: none; }
/* tombol kedua: abu-abu pekat (bukan tembus pandang), supaya tetap rapi di atas gambar berlatar putih */
.linkbtns--float .linkbtn:not(.linkbtn--primary) { background: #2b2b2b; }

/* project lain: lembaran bersudut bulat yang naik menutupi showcase (lihat drawSheet di app.js) */
.detail { position: relative; }
/* showcase berhenti saat ujung bawahnya menyentuh dasar layar (--pin diisi app.js) … */
.detail.is-pinned { position: sticky; top: var(--pin, 0px); }
/* … dan meredup selagi lembaran naik */
.detail::after {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--gutter));
  z-index: 3;
  pointer-events: none;
  background: var(--bg);
  opacity: var(--veil, 0);
}

.related {
  position: relative;
  z-index: 19;
  margin: 0 calc(-1 * var(--gutter));
  padding: 64px var(--gutter) 24px;
  border-radius: 40px 40px 0 0;
  background: var(--bg);
  box-shadow: 0 -1px 0 var(--line), 0 -36px 90px rgba(0, 0, 0, .5);
}

.related__title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* tiap kata punya "topeng": hurufnya naik dari bawah garis */
.related__title .rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.related__title .rw > i { display: inline-block; font-style: normal; will-change: translate; }
.related__title .rw--dim { color: var(--ink-3); }

/* kartu di lembaran digerakkan scroll (bukan animasi masuk biasa) */
.related .tile { animation: none; }

/* showcase pendek / tanpa animasi: lembaran diam di bawahnya dengan jarak biasa */
.related:not(.is-sheet) { margin-top: 64px; box-shadow: 0 -1px 0 var(--line); }

/* ---------------- footer ---------------- */

.sitefoot {
  margin-top: 20px;               /* jarak tombol unlock ke garis footer saat berhenti */
  padding: 72px var(--gutter) 28px;
  border-top: 1px solid var(--line);
}

.sitefoot__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}

.sitefoot__lead {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sitefoot__lead span { color: var(--ink-3); }

.sitefoot__col { display: grid; align-content: start; gap: 6px; min-width: 0; }
.sitefoot__contact { justify-items: end; text-align: right; }

.sitefoot__label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sitefoot__link {
  width: fit-content;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
  /* garis bawah tipis yang tumbuh saat hover */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease), color .2s var(--ease);
}

.sitefoot__link--big,
.sitefoot__text--big { font-size: clamp(15px, 1.2vw, 17px); letter-spacing: -0.005em; }
.sitefoot__link:hover { background-size: 100% 1px; }
.sitefoot__contact .sitefoot__link { background-position: 100% 100%; }

/* wordmark besar (putih polos); di tengahnya stiker ilustrasi dengan bayangan hitam di belakangnya */
.sitefoot__mark {
  position: relative;
  margin: 72px calc(var(--gutter) * -1) 28px;
  padding: 36px var(--gutter);
  isolation: isolate;
}

/* ruang di atas tulisan untuk kepala stiker (stiker lebih tinggi dari hurufnya) */
.sitefoot__word { position: relative; display: block; margin-top: 6%; }
.sitefoot__logo { display: block; width: 100%; height: auto; }
/* hover di tulisan: bundaran warna-warni mengikuti kursor — huruf di dalam bundaran itu berwarna
   (warna yang sama dengan tab: tosca · oranye · pink · biru). --mx/--my diisi app.js. */
@property --hue-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sitefoot__hue {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  --spot: clamp(64px, 10vw, 160px);
  background: conic-gradient(from var(--hue-turn) at var(--mx, 50%) var(--my, 50%), #b9f6e3, #f7b267, #e9b8fa, #a9c2f6, #b9f6e3);
  -webkit-mask-image: url("logo-word.svg"), radial-gradient(circle var(--spot) at var(--mx, 50%) var(--my, 50%), #000 0 86%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: url("logo-word.svg"), radial-gradient(circle var(--spot) at var(--mx, 50%) var(--my, 50%), #000 0 86%, transparent 100%);
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: intersect;
  transition: opacity .25s var(--ease);
  animation: hueturn 6s linear infinite;
}
.sitefoot__hue.is-on { opacity: 1; }
@keyframes hueturn { to { --hue-turn: 360deg; } }
@media (prefers-reduced-motion: reduce) { .sitefoot__hue { animation: none; } }

/* stiker: tegak (tidak miring), berdiri di tempat kotak logo — di antara "GRADIAN" dan "GALLERY" */
.stk--foot { position: absolute; left: 51.3%; bottom: -15%; width: 17.2%; height: auto; aspect-ratio: 1; translate: -50% 0; }
/* garis luar hitam tipis (mengikuti bentuk potongannya) + bayangan berlapis seperti label "DESIGN GALLERY BY":
   tepi tegas tipis lalu bayangan jatuh yang lembut, arah cahaya sama */
.stk--foot .stk__art {
  rotate: 0deg;
  --ol: 1.6px;
  filter:
    drop-shadow(var(--ol) 0 0 #0c0c0c) drop-shadow(calc(var(--ol) * -1) 0 0 #0c0c0c)
    drop-shadow(0 var(--ol) 0 #0c0c0c) drop-shadow(0 calc(var(--ol) * -1) 0 #0c0c0c)
    drop-shadow(2px 3px 0 rgba(0, 0, 0, .5)) drop-shadow(5px 7px 5px rgba(0, 0, 0, .5)) drop-shadow(12px 16px 16px rgba(0, 0, 0, .5));
}
.stk--foot.is-live .stk__art { rotate: 0deg; scale: 1.06; translate: 0 -3%; }


.sitefoot__bottom {
  display: flex;
  justify-content: space-between;     /* copyright kiri, sosial media kanan */
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  text-align: left;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}

.sitefoot__social { display: flex; align-items: center; gap: 4px; }
.socialbtn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  position: relative;
  color: var(--ink-2);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.socialbtn svg { width: 17px; height: 17px; }
/* hover: jadi tombol bulat putih dengan cincin hitam yang masuk ke dalam, seperti tombol putih lainnya */
.socialbtn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: inset .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1);
}
.socialbtn:hover { color: #0c0c0c; background: #ffffff; }
@media (hover: hover) { .socialbtn:hover::after { inset: 2px; border-color: #000000; } }

/* jam WIB di kolom "Based" — angkanya rapat supaya tidak goyang tiap detik */
.sitefoot__clock { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* titik hijau berdenyut: tanda jamnya hidup */
/* titik hijau "online" yang berdenyut */
.livedot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .5);
  animation: livepulse 2s ease-out infinite;
}

@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}



@media (max-width: 900px) {
  .sitefoot { margin-top: 12px; padding-top: 48px; }
  .sitefoot__top { flex-direction: column; align-items: flex-start; gap: 36px; }
  .sitefoot__contact { justify-items: start; text-align: left; }
  .sitefoot__contact .sitefoot__link { background-position: 0 100%; }
  .sitefoot__mark { margin: 48px calc(var(--gutter) * -1) 20px; padding: 24px var(--gutter); }
  /* layar kecil: stiker sedikit lebih besar terhadap tulisan, chip dikecilkan mengikuti ukurannya */
  .stk--foot { width: 22%; bottom: -18%; }
  .stk--foot .stk__art {
    --ol: 1px;
    filter:
      drop-shadow(var(--ol) 0 0 #0c0c0c) drop-shadow(calc(var(--ol) * -1) 0 0 #0c0c0c)
      drop-shadow(0 var(--ol) 0 #0c0c0c) drop-shadow(0 calc(var(--ol) * -1) 0 #0c0c0c)
      drop-shadow(1px 1.5px 0 rgba(0, 0, 0, .5)) drop-shadow(2px 3px 2px rgba(0, 0, 0, .5)) drop-shadow(5px 7px 7px rgba(0, 0, 0, .5));
  }
  .stk--foot .stk__chip { font-size: 9.5px; padding: 4px 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
  .stk--foot[data-look="mieayam"] .stk__chip { padding: 5px 8px; border-radius: 10px; }
  .sitefoot__word { margin-top: 9%; }
  .sitefoot__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sitefoot__social { margin-left: -8px; }
}

/* ---------------- responsif ---------------- */

@media (max-width: 1240px) {
  .tab { padding: 0 10px; font-size: 13px; }
}

@media (max-width: 1100px) {
  .tilegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tilegrid--four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail { grid-template-columns: minmax(0, 2.4fr) minmax(210px, 1fr); gap: 40px; }
}

@media (max-width: 1060px) {
  .searchtrigger__label { display: none; }
  .navbar__search { flex: 0 0 40px; min-width: 0; }
  .searchtrigger { width: 40px; padding: 0; justify-content: center; }
  .searchtrigger__chip { position: absolute; top: -4px; right: -6px; height: 18px; margin: 0; padding: 0 6px; font-size: 10.5px; }
  .searchtrigger__chip svg { display: none; }
  .sfpanel { left: auto; right: -80px; transform: none; animation: none; }
}

@media (max-width: 1000px) {
  :root { --nav-h: 110px; }
  .navbar { flex-wrap: wrap; gap: 8px; padding: 10px var(--gutter); }
  .navbar__start { display: contents; }
  .brandpill { order: 1; }
  .navbar__search { order: 2; flex: 1 1 0; max-width: none; }
  .searchtrigger__label { display: block; }
  .searchtrigger { width: 100%; padding: 0 14px; justify-content: flex-start; }
  .searchtrigger__chip { position: static; height: 24px; margin-right: -8px; }
  .sfpanel { left: 0; right: auto; }
  .navbar__end { order: 3; margin-left: 0; }
  .tabs { order: 4; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  /* baris tab selebar layar: terisi penuh, tapi lebar tiap tab sebanding dengan panjang teksnya
     (--len = jumlah huruf, diisi app.js) — "SaaS Landing Page" lebih lebar, "Shopify" lebih pendek */
  .tabs .tab { flex: var(--len, 1) 1 auto; min-width: max-content; justify-content: center; padding: 0 8px; }
}

@media (max-width: 900px) {
  :root { --gutter: 16px; }

  .tilegrid, .tilegrid--four { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .detail__info { position: static; order: -1; padding-top: 4px; }
  .detailbar { top: 8px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 20px; }
  .detail__infoinner { position: static; }
  .shots, .shotcol { gap: 8px; }
  .shots--brutal .bcanvas { height: 70vh; min-height: 360px; }
  .related { padding-top: 48px; border-radius: 28px 28px 0 0; }
  .resultbar__count, .resultbar__topic { font-size: 18px; }

  .minimap { display: none; }
}

@media (max-width: 480px) {
  :root { --nav-h: 64px; }
  /* satu baris: logo · dropdown kategori · search · related */
  .navbar { flex-wrap: nowrap; gap: 6px; }
  .brandpill { flex: none; padding: 0 10px; }
  .tabs { display: none; }
  /* dropdown mengisi sisa ruang sampai tombol search */
  .catdrop { display: block; order: 1; flex: 1 1 auto; min-width: 0; }
  .catdrop__btn { width: 100%; justify-content: space-between; gap: 4px; padding: 0 10px 0 12px; font-size: 12px; }
  .catdrop__btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .catdrop__btn svg { flex: none; }
  .navbar__search, .navbar__end { flex: none; }
  .brandpill__logo { height: 10.5px; }     /* dikecilkan supaya dropdown kategori dapat ruang */
  .searchtrigger__label { display: none; }
  .navbar__search { flex: 0 0 40px; }
  .searchtrigger { width: 40px; justify-content: center; padding: 0; }
  .searchtrigger__chip { position: absolute; top: -4px; right: -6px; height: 18px; margin: 0; padding: 0 6px; font-size: 10.5px; }
  .searchtrigger__chip svg { display: none; }
  .askbtn span { display: none; }
  .askbtn { width: 40px; padding: 0; justify-content: center; }
  .sfpanel { position: fixed; top: 60px; left: 16px; right: 16px; width: auto; transform: none; animation: none; }
  .sfpanel__body { grid-template-columns: minmax(0, 1fr); }
  .sfpanel__rail { display: flex; overflow-x: auto; padding-top: 0; }
  .sfrail { flex: none; }
  .unlockfab { right: 12px; }
  .floatdock { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .pageview, .sfpanel, .livedot { animation: none; transition: none; }
  .tile:hover, .tile:active { transform: none; }
}

/* ---------------- kanvas board (pan, zoom, drag) ---------------- */

.bcanvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: none;
  border: 0;
}

.bcanvas.is-grabbing { cursor: grabbing; }

.bstage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.bcard {
  position: absolute;
  display: block;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--card-shadow);
  cursor: grab;
  transition: filter .3s ease, box-shadow .2s ease;
}

.bcard.is-dragging {
  cursor: grabbing;
  box-shadow: var(--card-shadow-lift);
}

.bcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.bcard:hover { filter: brightness(1.04) contrast(1.03); z-index: 999 !important; }
.bcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* kontrol zoom */
.bctrl {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.bctrl button {
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.bctrl button:hover { color: var(--ink); background: var(--hover-strong); }

/* ---------------- chip ---------------- */

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 9px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.chip:hover { color: var(--ink); border-color: var(--line-strong); background: var(--hover); }

/* ---------------- popup ---------------- */

.is-locked { overflow: hidden; }

.promptmodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
}

.promptmodal[hidden] { display: none; }

.promptmodal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadein .18s ease;
}

.promptcard {
  position: relative;
  width: min(560px, 100%);
  padding: 26px 26px 22px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--popup-shadow);
  animation: pop .22s cubic-bezier(.2,.8,.3,1);
}

@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.promptcard__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.promptcard__close svg { width: 14px; height: 14px; }
.promptcard__close:hover { color: var(--ink); background: var(--hover); }

.promptcard__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.promptcard__sub {
  margin: 6px 0 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 42ch;
}

.promptform {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .2s ease;
}

.promptform:focus-within { border-color: var(--ink); }

.promptform__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
  outline: none;
  padding: 4px 0;
}

.promptform__input::placeholder { color: var(--ink-3); }

.promptform__send {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
  cursor: pointer;
  transition: background .2s ease;
}

.promptform__send svg { width: 15px; height: 15px; }
.promptform__send:hover { background: var(--ink-hover); }

.promptchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.promptcard--sm { width: min(400px, 100%); }

.lockform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

.lockform__input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  transition: border-color .2s ease;
}

.lockform__input:focus { border-color: var(--ink); }

.btnsolid {
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}

.btnsolid:hover { background: var(--ink-hover); }

.lockform__note {
  margin: 10px 0 0;
  font-size: 11px;
  color: #b91c1c;
}

.lockform__note[hidden] { display: none; }

/* ---------------- minimap ---------------- */

.minimap {
  position: absolute;
  will-change: transform;
  transition: opacity .25s var(--ease);
  right: 20px;
  bottom: 46px;
  z-index: 18;
  padding: 5px;
  border-radius: 4px;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.minimap[hidden] { display: none; }

.minimap__cols { position: relative; display: flex; align-items: flex-start; }

.minimap__track {
  display: flex;
  flex-direction: column;
  width: 30px;
}

/* tampilan Column: dua kolom mungil, sama seperti gambarnya */
.minimap--cols .minimap__track { width: 22px; }

.minimap__item {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease;
}

.minimap__item:hover { opacity: 1; }
.minimap__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.minimap__view {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 5px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  pointer-events: none;
  transition: transform .12s linear, height .12s linear;
}

/* ---------------- mock preview ---------------- */

.mock { position: absolute; inset: 0; padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.m-bar { display: flex; align-items: center; gap: 6px; }
.m-line { border-radius: 3px; background: currentColor; opacity: .22; height: 5px; }
.m-line.sm { height: 4px; opacity: .16; }
.m-title { border-radius: 4px; background: currentColor; opacity: .82; height: 11px; }
.m-block { border-radius: 8px; background: currentColor; opacity: .14; flex: 1; }
.m-solid { border-radius: 7px; }
.m-chip { height: 11px; border-radius: 999px; background: currentColor; opacity: .2; }
.m-row { display: flex; gap: 7px; }
.m-col { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.m-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; }
.m-center { align-items: center; text-align: center; }
.m-grid { display: grid; gap: 7px; flex: 1; }
.m-grid.g2 { grid-template-columns: 1fr 1fr; }
.m-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.m-cellsolid { border-radius: 7px; }
.m-glyph { flex: 1; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 36px; letter-spacing: -0.05em; }
.m-sidebar { width: 32%; border-radius: 7px; display: flex; flex-direction: column; gap: 6px; padding: 8px; }

/* foto asli di dalam mock preview */
.m-imgbox { position: relative; overflow: hidden; }
.m-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mock > .m-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.m-scrim { position: absolute; inset: 0; }
.mock > *:not(.m-bg) { position: relative; z-index: 1; }
.m-glyph__text { position: relative; z-index: 1; text-shadow: 0 2px 14px rgba(0,0,0,.55); }

/* ---------- popup share link kedaluwarsa ---------- */
.expiredcard { text-align: center; padding-top: 30px; }

.expiredcard__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink);
}

.expiredcard__icon svg { width: 20px; height: 20px; }
.expiredcard .promptcard__sub { margin-left: auto; margin-right: auto; margin-bottom: 20px; }
.expiredcard__btn { width: 100%; }

/* ---------------- hover: cincin tipis yang masuk ke dalam (persis overseen.agency) ----------------
   ::after mulai 1px di luar tepi dengan garis transparan; saat hover ia bergeser
   2px ke dalam sambil garisnya muncul. Klik = tombol sedikit mengecil. */

.tab,
.askbtn,
.brandpill,
.unlockfab,
.viewbtn,
.pillbtn,
.linkbtn,
.sfpanel__done,
.lockpanel__btn {
  --ring-inset: 2px;
  --ring-color: color-mix(in srgb, currentColor 38%, transparent);
  transition:
    background-color .3s cubic-bezier(0, 0, .2, 1),
    color .3s cubic-bezier(0, 0, .2, 1),
    scale .3s cubic-bezier(0, 0, .2, 1),
    opacity .3s cubic-bezier(0, 0, .2, 1);
}

.tab, .askbtn, .brandpill, .viewbtn, .pillbtn, .linkbtn, .sfpanel__done, .lockpanel__btn { position: relative; }

.tab::after,
.askbtn::after,
.brandpill::after,
.unlockfab::after,
.viewbtn::after,
.pillbtn::after,
.linkbtn::after,
.sfpanel__done::after,
.lockpanel__btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition:
    inset .3s cubic-bezier(.4, 0, .2, 1),
    border-color .3s cubic-bezier(.4, 0, .2, 1);
}

@media (hover: hover) {
  .tab:hover::after,
  .askbtn:hover::after,
  .brandpill:hover::after,
    .unlockfab:hover::after,
  .viewbtn:hover::after,
  .pillbtn:hover::after,
  .linkbtn:hover::after,
  .sfpanel__done:hover::after,
  .lockpanel__btn:hover::after {
    inset: var(--ring-inset);
    border-color: var(--ring-color);
  }
}

.tab:active,
.askbtn:active,
.brandpill:active,
.unlockfab:active,
.viewbtn:active,
.pillbtn:active,
.linkbtn:active,
.sfpanel__done:active,
.lockpanel__btn:active { scale: .98; transform: none; }

/* tab yang tidak aktif (navbar & pilihan tampilan di halaman detail):
   tanpa cincin, cukup latarnya sedikit berubah */
@media (hover: hover) {
  .tabs .tab:not(.is-current):hover::after,
  .viewbar .viewbtn:not(.is-active):hover::after { inset: -1px; border-color: transparent; }

  .tabs .tab:not(.is-current):hover,
  .viewbar .viewbtn:not(.is-active):hover { background-color: rgba(255, 255, 255, .05); color: var(--ink); }

  :root:not([data-theme="dark"]) .tabs .tab:not(.is-current):hover,
  :root:not([data-theme="dark"]) .viewbar .viewbtn:not(.is-active):hover { background-color: var(--hover); }
}

/* tombol berlatar terang (putih / stiker berwarna): cincin hitam solid */
:root[data-theme="dark"] .brandpill:hover,
:root[data-theme="dark"] .unlockfab,
.tab.is-current,
.lockpanel__btn { --ring-color: #000000; }

:root[data-theme="dark"] .brandpill:hover { color: #0f0f0f; }

/* ---------------- lightbox gambar ---------------- */

.slidemodal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
}

.slidemodal[hidden] { display: none; }

.slidemodal__wash {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadein .2s var(--ease);
}

.slidemodal__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 88px 24px 84px;
  animation: slidein .25s var(--ease);
}

@keyframes slidein {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: none; }
}

.slidemodal__figure {
  margin: 0;
  max-width: 100%;
  max-height: calc(100dvh - 172px);
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

/* gambar tampil utuh dengan rasio aslinya (tidak dipotong, tidak diperbesar) */
.slidemodal__figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 172px);
  display: block;
}

/* halaman web yang panjang: selebar aslinya, digulir di dalam bingkai (kelas dipasang showSlide) */
.slidemodal__figure.is-scroll {
  width: min(100%, 1100px, var(--natw, 1100px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.slidemodal__figure.is-scroll img { width: 100%; max-height: none; }

.glassbtn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s var(--ease), scale .25s var(--ease), opacity .25s var(--ease);
}

.glassbtn svg { width: 19px; height: 19px; }
.glassbtn:hover { background: rgba(58, 58, 58, .9); }
.glassbtn:active { scale: .96; }
.glassbtn:disabled { opacity: .35; cursor: default; }
.glassbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.slidemodal__close { position: absolute; top: 24px; left: 24px; }
.slidemodal__nav { position: absolute; top: 24px; right: 24px; display: flex; gap: 10px; }

.slidemodal__foot {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 48px);
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--glass-shadow);
  font-size: 13.5px;
}

.slidemodal__label { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slidemodal__count { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* gambar di List & Column bisa diklik untuk dilihat besar;
   di Board kursornya tetap tangan, karena isinya digeser-geser */
.shot { cursor: zoom-in; }

@media (max-width: 700px) {
  .slidemodal__stage { padding: 76px 12px 76px; }
  .slidemodal__close { top: 16px; left: 16px; }
  .slidemodal__nav { top: 16px; right: 16px; gap: 8px; }
  .glassbtn { width: 40px; height: 40px; }
  .slidemodal__foot { bottom: 16px; height: 36px; font-size: 12.5px; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}