/* StoreSell - stylesheet tunggal, tanpa build step dan tanpa CDN.
   Halaman tetap tampil utuh walau server tidak punya akses internet. */

:root {
  /* Seluruh tampilan dirancang terang. Tanpa pernyataan ini peramban
     menebak sendiri dari setelan sistem, dan kontrol bawaannya -
     daftar <select>, penanggalan, bilah gulir - bisa digambar dengan
     skema gelap di atas halaman terang. */
  color-scheme: light;

  /* Palet Kodak. Kuning dan merah adalah warna merek induk; sisanya
     netral abu-abu supaya keduanya tetap menonjol. Angka merek diambil
     dari nilai Kodak yang terdokumentasi luas - cocokkan dengan pedoman
     merek resmi sebelum dipakai ke publik. */
  --kodak-yellow:  #FFB81C;
  --kodak-yellow-2:#FFD200;
  --kodak-red:     #ED1C24;
  --kodak-black:   #131313;

  --bg:        #F4F4F4;
  --bg-soft:   #FFFFFF;
  --bg-panel:  #FFFFFF;
  --bg-hover:  #F0F0F0;
  --line:      #DCDCDC;
  --line-soft: #EBEBEB;

  --text:      #131313;
  --text-dim:  #5A5A5A;
  --text-mute: #767676;

  --brand:     #131313;
  --brand-dim: #000000;
  --ok:        #1E7A34;
  --warn:      #9A6206;
  --bad:       #C4161C;
  --info:      #1B5FA8;

  /* Kodak nyaris tidak pernah membulatkan sudut - kemasan film, bingkai
     "K", dan kartu di situsnya semuanya siku. */
  --radius: 3px;
  --radius-sm: 2px;
  --shadow: 0 2px 10px rgba(0,0,0,.10);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;

  /* Perforasi film 35 mm: dipakai sebagai pembatas dan aksen. */
  --sprocket: repeating-linear-gradient(90deg,
      var(--kodak-black) 0 10px, transparent 10px 20px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .5rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; color: var(--text);
}
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .75rem; }

.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.dim  { color: var(--text-dim); }
.mute { color: var(--text-mute); font-size: .85em; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }

/* ---------------------------------------------------------- app shell */

.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text small { color: var(--text-mute); font-size: .72rem; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand), #7b3fe4);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .5px;
}
.brand-mark.lg { width: 56px; height: 56px; font-size: 1.2rem; }

.nav { flex: 1; padding: .6rem 0; }
.nav-group { margin: .35rem 0 .1rem; }
.nav-title {
  display: block;
  padding: .55rem 1.1rem .25rem;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.nav-item {
  display: block;
  padding: .42rem 1.1rem;
  color: var(--text-dim);
  font-size: .875rem;
  border-left: 2px solid transparent;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav-item.active {
  background: var(--bg-hover);
  color: var(--text);
  border-left-color: var(--brand);
  font-weight: 500;
}
.nav-item .ico { display: inline-block; width: 1.1em; opacity: .7; }

.sidebar-foot {
  padding: .7rem 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--text-mute);
  font-size: .72rem;
}

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.4rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 { margin: 0; font-size: 1.05rem; }
.topbar-right { display: flex; align-items: center; gap: .6rem; }
.clock { color: var(--text-mute); font-size: .78rem; font-family: var(--mono); }

.crumbs { font-size: .75rem; color: var(--text-mute); margin-top: .1rem; }
.crumbs .sep { margin: 0 .35rem; opacity: .5; }
.crumbs a { color: var(--text-dim); }

.user-chip { display: flex; align-items: center; gap: .5rem; }
.avatar {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-hover);
  border: 1px solid var(--line);
  font-size: .72rem; font-weight: 600;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.user-meta strong { font-size: .82rem; font-weight: 600; }
.user-meta small { font-size: .68rem; color: var(--text-mute); }

.content { flex: 1; padding: 1.3rem 1.4rem 2.5rem; min-width: 0; }

.foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--text-mute);
  font-size: .74rem;
}

/* ------------------------------------------------------------- panels */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 { margin: 0; font-size: .95rem; }
.panel-head .sub { color: var(--text-mute); font-size: .76rem; }
.panel-body { padding: 1rem; }
.panel-body.tight { padding: 0; }

/* -------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .9rem;
  margin-bottom: 1.1rem;
}
.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.card .label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-mute);
  margin-bottom: .35rem;
}
.card .value {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.card .value.sm { font-size: 1.15rem; }
.card .hint { font-size: .74rem; color: var(--text-mute); margin-top: .2rem; display: block; }
.card.ok   .value { color: var(--ok); }
.card.warn .value { color: var(--warn); }
.card.bad  .value { color: var(--bad); }

/* ------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
table.data th, table.data td {
  padding: .55rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.data thead th {
  background: var(--bg-soft);
  color: var(--text-dim);
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.data tbody tr:hover { background: var(--bg-hover); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data td.num, table.data th.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
table.data td .sub { display: block; font-size: .74rem; color: var(--text-mute); }

/* ------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg-hover);
  color: var(--text-dim);
  border: 1px solid var(--line);
}
.badge-ok   { background: rgba(63,185,80,.14);  color: var(--ok);   border-color: rgba(63,185,80,.3); }
.badge-wait { background: rgba(210,153,34,.14); color: var(--warn); border-color: rgba(210,153,34,.3); }
.badge-bad  { background: rgba(248,81,73,.14);  color: var(--bad);  border-color: rgba(248,81,73,.3); }
.badge-info { background: rgba(88,166,255,.14); color: var(--info); border-color: rgba(88,166,255,.3); }

.tag {
  display: inline-block;
  padding: .05rem .4rem;
  border-radius: var(--radius-sm);
  font-size: .7rem;
  font-family: var(--mono);
  background: var(--bg-hover);
  color: var(--text-dim);
  border: 1px solid var(--line);
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-hover);
  color: var(--text);
  font-size: .84rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #2b3745; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-dim); border-color: var(--brand-dim); color: #fff; }
.btn-primary:hover { background: var(--brand); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-sm { padding: .28rem .6rem; font-size: .78rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------- forms */

.input, .select, .textarea {
  width: 100%;
  padding: .45rem .65rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: .85rem;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(47,129,247,.18);
}

/* Daftar pilihan <select> digambar peramban sebagai lapisan tersendiri,
   di luar aliran halaman, jadi ia tidak mewarisi latar dari .select.
   Kalau warnanya tidak ditulis di sini, di sebagian peramban daftarnya
   muncul tanpa latar sama sekali - pilihannya bertumpuk dengan isi
   halaman di belakangnya dan hampir tidak terbaca.
   Ditulis pada elemen select/option langsung, bukan lewat kelas, supaya
   semua dropdown ikut terkena termasuk yang tidak memakai .select. */
select {
  background-color: #fff;
}
select option,
select optgroup {
  background-color: #fff;
  color: var(--text);
}
select option:checked,
select option:hover {
  background-color: var(--bg-hover);
  color: var(--text);
}
select option:disabled {
  color: var(--text-mute);
}
.textarea { min-height: 5rem; resize: vertical; }

/* Tombol lihat kata sandi. Pembungkusnya dipasang JavaScript; tanpa
   JavaScript kolomnya tetap kolom sandi biasa dan tidak ada yang hilang.
   Ruang kanan kolom dilapangkan supaya sandi panjang tidak tersembunyi
   di balik tombolnya. */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 3.6rem; }
.pw-toggle {
  position: absolute;
  top: 50%; right: .3rem;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: .2rem .45rem;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.pw-toggle:hover { color: var(--text); background: var(--bg-hover); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.field { margin-bottom: .85rem; }
.field label {
  display: block;
  margin-bottom: .28rem;
  font-size: .8rem;
  color: var(--text-dim);
  font-weight: 500;
}
.field .help { font-size: .74rem; color: var(--text-mute); margin-top: .22rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-soft);
}
.toolbar .input, .toolbar .select { width: auto; min-width: 150px; flex: 0 1 200px; }
.toolbar .grow { flex: 1 1 240px; }
.toolbar .spacer { flex: 1; }

/* ------------------------------------------------------------- flash */

.flashes { margin-bottom: 1rem; }
.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  margin-bottom: .5rem;
  font-size: .87rem;
}
.flash-success { border-color: rgba(63,185,80,.4);  background: rgba(63,185,80,.1); }
.flash-error   { border-color: rgba(248,81,73,.4);  background: rgba(248,81,73,.1); }
.flash-warning { border-color: rgba(210,153,34,.4); background: rgba(210,153,34,.1); }
.flash-info    { border-color: rgba(88,166,255,.4); background: rgba(88,166,255,.1); }
.flash-close {
  background: none; border: none; color: inherit;
  font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: .6;
}
.flash-close:hover { opacity: 1; }

/* --------------------------------------------------------- pagination */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem;
}
.pager-info { color: var(--text-mute); }
.pager-links { display: flex; gap: .25rem; }
.pager-links a, .pager-links span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 28px;
  padding: 0 .4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: .8rem;
}
.pager-links a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.pager-links .current { background: var(--brand-dim); border-color: var(--brand-dim); color: #fff; }
.pager-links .disabled { opacity: .35; }

.progress {
  height: 7px; border-radius: 999px; background: var(--bg-hover);
  overflow: hidden; margin-bottom: .2rem;
}
.progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), #7b3fe4);
}

.perm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .3rem; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--line); padding: .6rem; border-radius: var(--radius-sm);
}
.perm { display: flex; gap: .5rem; align-items: flex-start; font-size: .78rem; }
.perm code { font-size: .74rem; }
.perm small { display: block; color: var(--text-mute); font-size: .7rem; }
.inline { display: inline-block; }

/* -------------------------------------------------------------- empty */

.empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-mute); }
.empty-mark { display: block; font-size: 2rem; opacity: .35; margin-bottom: .4rem; }

/* --------------------------------------------------------------- misc */

.notice {
  padding: .7rem .9rem;
  border-left: 3px solid var(--info);
  background: rgba(88,166,255,.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .84rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.notice.warn { border-left-color: var(--warn); background: rgba(210,153,34,.07); }
.notice.bad  { border-left-color: var(--bad);  background: rgba(248,81,73,.07); }
.notice strong { color: var(--text); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .86rem; }
.kv dt { color: var(--text-mute); }
.kv dd { margin: 0; }

.bar {
  height: 5px;
  border-radius: 3px;
  background: var(--bg-hover);
  overflow: hidden;
  min-width: 60px;
}
.bar > span { display: block; height: 100%; background: var(--ok); }
.bar.low > span  { background: var(--warn); }
.bar.zero > span { background: var(--bad); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; }

/* --------------------------------------------------------- auth pages */

.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 880px;
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.auth-side {
  padding: 2.2rem;
  background: linear-gradient(160deg, #16202c, #101821);
  border-right: 1px solid var(--line);
}
.auth-logo { display: block; width: 200px; height: auto; border-radius: var(--radius); }
.auth-side h1 { margin: 1rem 0 .4rem; font-size: 1.5rem; }
.auth-side p { color: var(--text-dim); font-size: .88rem; }
.auth-points { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.auth-points li {
  padding: .3rem 0 .3rem 1.2rem;
  position: relative;
  color: var(--text-dim);
  font-size: .84rem;
}
.auth-points li::before { content: "▸"; position: absolute; left: 0; color: var(--brand); }
.auth-panel { padding: 2.2rem; }
.auth-foot { margin-top: 1.5rem; color: var(--text-mute); font-size: .74rem; text-align: center; }

.bare-body { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.bare-shell { max-width: 520px; text-align: center; }
.bare-shell h1 { font-size: 3.5rem; margin-bottom: .3rem; font-family: var(--mono); }
.bare-shell .code { color: var(--text-mute); font-family: var(--mono); font-size: .8rem; }

/* -------------------------------------------------------------- shop */
/* Storefront mengikuti bahasa visual induk: latar putih, teks hitam
   tebal, kuning sebagai satu-satunya aksen besar, merah hanya untuk
   peringatan. Sudut nyaris siku dan motif perforasi film 35 mm dipakai
   sebagai pembatas. */

.shop {
  --k-yellow: #FFB81C;
  --k-yellow-2: #FFD200;
  --k-red: #ED1C24;
  --k-black: #131313;
  --k-ink: #131313;
  --k-dim: #5A5A5A;
  --k-faint: #767676;
  --k-line: #DCDCDC;
  --k-soft: #F4F4F4;

  background: #fff;
  color: var(--k-ink);
  min-height: 100vh;
}
.shop a { color: var(--k-ink); text-decoration: none; }
.shop a:hover { color: #000; text-decoration: underline; }
.shop .dim  { color: var(--k-dim); }
.shop .mute { color: var(--k-faint); }
.shop h1, .shop h2, .shop h3 { color: var(--k-ink); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.2rem; }

/* Perforasi film: dipakai di bawah header dan sebagai pembatas hero. */
.sprocket {
  height: 10px;
  background: repeating-linear-gradient(90deg,
      var(--k-black) 0 12px, transparent 12px 24px);
  opacity: .9;
}

/* ------------------------------------------------------------ header */

.shop-header {
  position: sticky; top: 0; z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--k-line);
  box-shadow: inset 0 -4px 0 var(--k-yellow);
}
.shop-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .85rem; padding-bottom: .85rem;
}
.shop-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.1rem; color: var(--k-ink);
  letter-spacing: -.02em; text-transform: uppercase;
}
.shop-brand:hover { text-decoration: none; color: var(--k-ink); }

/* Logo berupa lockup lengkap di atas bidang kuning, jadi tidak diberi
   latar atau bingkai tambahan - cukup diberi tinggi tetap dan lebarnya
   mengikuti proporsi aslinya. */
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}
@media (max-width: 640px) {
  .brand-logo { height: 28px; }
}
.shop .brand-mark {
  background: var(--k-yellow);
  color: var(--k-black);
  border-radius: 0;
  font-weight: 900;
  box-shadow: none;
}

.shop-nav { display: flex; align-items: center; gap: .1rem; font-size: .8rem; }
.shop-nav a {
  color: var(--k-ink);
  padding: .5rem .7rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 3px solid transparent;
}
.shop-nav a:hover {
  text-decoration: none;
  border-bottom-color: var(--k-yellow);
}
.shop-nav a.here { border-bottom-color: var(--k-red); }

/* ------------------------------------------------------- portal B2B

   Etalase retail dan portal B2B memakai layout yang sama, jadi harus ada
   sesuatu yang membedakannya dalam sekali lihat - reseller yang sedang
   membuka dua tab tidak boleh sampai memesan per keping di tab yang
   salah. Pembedanya bukan warna baru: palet Kodak dipertahankan, yang
   dibalik hanya perannya. Di sini hitam jadi bidang dan kuning jadi
   tulisan, kebalikan dari retail. */

.portal-strip {
  background: var(--k-black);
  color: var(--k-yellow);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.portal-strip .wrap {
  display: flex; align-items: baseline; gap: .6rem;
  padding-top: .45rem; padding-bottom: .45rem;
  flex-wrap: wrap;
}
.portal-strip strong { font-weight: 800; }
.portal-strip span { color: #C9C9C9; letter-spacing: .04em; }

/* Strip ikut tergulir naik; yang tetap terlihat setelah itu adalah garis
   bawah header, karena itu garisnya juga dihitamkan supaya penandanya
   tidak hilang begitu pengunjung menggulir. */
.shop.b2b .shop-header { box-shadow: inset 0 -4px 0 var(--k-black); }

.brand-tag {
  align-self: center;
  background: var(--k-black);
  color: var(--k-yellow);
  font-size: .6rem; font-weight: 800;
  letter-spacing: .1em;
  padding: .15rem .35rem;
  margin-left: .1rem;
}

.shop .btn {
  background: #fff; border: 1px solid var(--k-black); color: var(--k-black);
  border-radius: 2px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: .76rem;
  transition: background .12s, color .12s;
}
.shop .btn:hover { color: #fff; text-decoration: none; }
.shop .btn-primary {
  background: var(--k-yellow); border-color: var(--k-yellow); color: var(--k-black);
}
.shop .btn-primary:hover { border-color: var(--k-black); }

.shop-main { padding: 1.6rem 1.2rem 7rem; }

/* -------------------------------------------------------------- hero */
/* Blok kuning pekat berteks hitam - bentuk paling dikenal dari merek
   induk, persis kemasan filmnya. */

.hero {
  position: relative;
  background: var(--k-yellow);
  color: var(--k-black);
  border-radius: 0;
  padding: 2.8rem 2.2rem 2.4rem;
  margin-bottom: 1.6rem;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: repeating-linear-gradient(90deg,
      var(--k-black) 0 12px, transparent 12px 24px);
}
.hero .eyebrow {
  display: inline-block;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 800; margin-bottom: .9rem;
  padding: .3rem .7rem; border-radius: 0;
  background: var(--k-black); color: var(--k-yellow);
}
.hero h1 {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.04; margin-bottom: .8rem; font-weight: 800;
  letter-spacing: -.03em; text-transform: uppercase;
}
.hero h1 .glow { color: var(--k-red); background: none; -webkit-text-fill-color: currentColor; }
.hero p { color: rgba(19,19,19,.82); max-width: 44rem; font-size: 1rem; }
.hero .hero-actions { margin-top: 1.5rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.hero .btn { background: transparent; border-color: var(--k-black); color: var(--k-black); }
.hero .btn:hover { color: var(--k-yellow); }
.hero .btn-primary { background: var(--k-black); border-color: var(--k-black); color: var(--k-yellow); }
.hero .btn-primary:hover { color: var(--k-yellow-2); }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 2.2rem;
  margin-top: 2rem; padding-top: 1.4rem;
  border-top: 2px solid rgba(19,19,19,.25);
}
.hero-stats strong {
  display: block; font-size: 1.6rem; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--k-black);
  letter-spacing: -.02em;
}
.hero-stats span { font-size: .68rem; color: rgba(19,19,19,.7); letter-spacing: .1em; font-weight: 700; }

/* ----------------------------------------------------------- sections */

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 2.2rem 0 1rem;
  border-bottom: 2px solid var(--k-black); padding-bottom: .55rem;
}
.section-head h2 {
  margin: 0; font-size: 1rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
.section-head a { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ------------------------------------------------------ kartu produk */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 1rem;
}
.product-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--k-line);
  border-radius: 0;
  padding: 1rem 1.05rem 1.05rem;
  display: flex; flex-direction: column; gap: .4rem;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.product-card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px;
  background: var(--k-yellow); opacity: 0; transition: opacity .14s;
}
/* Foto produk.
   Kotaknya persegi dan tingginya dipatok: foto katalog Kodak berukuran
   potret 841x1094, jadi tanpa batas tinggi satu kartu bisa menjulang
   dua kali lipat kartu di sebelahnya dan barisnya jadi bergerigi.
   object-fit: contain menjaga seluruh produk tetap terlihat utuh -
   memotong sisi kartu memori membuat kapasitasnya tidak terbaca.
   max-height dipasang sebagai jaring pengaman kalau aspect-ratio tidak
   didukung peramban lama: gambarnya tetap tidak akan meraksasa. */
.card-shot {
  display: block; position: relative;
  aspect-ratio: 1 / 1; max-height: 260px;
  background: #fff; border: 1px solid var(--k-line);
  margin-bottom: .5rem; overflow: hidden;
}
.card-shot img {
  width: 100%; height: 100%; max-height: 260px;
  object-fit: contain; display: block;
  transition: opacity .22s ease, transform .22s ease;
}
/* Pergantian gambar saat disorot.
   Gambar kedua ditumpuk di atas yang pertama dan disilangkan opasitasnya,
   bukan ditukar src-nya: menukar src membuat gambar berkedip putih pada
   sorotan pertama karena berkasnya baru diunduh saat itu juga. */
.card-shot.has-hover .shot-hover {
  position: absolute; inset: 0; opacity: 0;
}
.product-card:hover .card-shot.has-hover .shot-main,
.card-shot.has-hover:focus-visible .shot-main { opacity: 0; }
.product-card:hover .card-shot.has-hover .shot-hover,
.card-shot.has-hover:focus-visible .shot-hover { opacity: 1; }
.product-card:hover .card-shot img { transform: scale(1.03); }

/* Perangkat tanpa penunjuk - layar sentuh - tidak punya keadaan sorot.
   Gambar keduanya disembunyikan saja daripada menumpuk permanen. */
@media (hover: none) {
  .card-shot.has-hover .shot-hover { display: none; }
}
/* Menghormati preferensi sistem: pergantian tetap terjadi, tanpa animasi. */
@media (prefers-reduced-motion: reduce) {
  .card-shot img { transition: none; }
  .product-card:hover .card-shot img { transform: none; }
}
.product-card:hover {
  border-color: var(--k-black);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.product-card:hover::before { opacity: 1; }
.product-card .brand-line {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--k-faint); font-weight: 700;
}
.product-card h3 { font-size: .95rem; margin: 0; line-height: 1.32; font-weight: 700; }
.product-card h3 a { color: var(--k-ink); }
.product-card .desc { font-size: .8rem; color: var(--k-dim); flex: 1; line-height: 1.5; }
.product-card .meta { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.product-card .chip {
  font-size: .66rem; padding: .16rem .5rem; border-radius: 0;
  background: var(--k-soft); color: var(--k-dim);
  border: 1px solid var(--k-line);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.product-card .chip.serial {
  background: var(--k-yellow); color: var(--k-black); border-color: var(--k-yellow);
}

/* ------------------------------------------- varian yang bisa diseret */

.variant-rail {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--k-line);
}
.variant-form { display: contents; }
.variant-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .36rem .6rem .36rem .5rem;
  border-radius: 0;
  border: 1px solid var(--k-black);
  background: #fff; color: var(--k-ink);
  font: inherit; font-size: .74rem; font-weight: 600;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  transition: background .12s, color .12s;
}
.variant-chip:hover { background: var(--k-yellow); }
.variant-chip:active { cursor: grabbing; }
.variant-chip .cap { font-weight: 800; }
.variant-chip .price { font-variant-numeric: tabular-nums; font-weight: 700; }
.variant-chip .grip { color: var(--k-faint); font-size: .85rem; line-height: 1; letter-spacing: -2px; }
.variant-chip.out {
  border-color: var(--k-line); color: var(--k-faint);
  cursor: not-allowed; touch-action: auto; background: var(--k-soft);
}
.variant-chip.out:hover { background: var(--k-soft); }
.variant-chip .soldout {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .06rem .34rem; border-radius: 0;
  background: var(--k-red); color: #fff;
}
.variant-chip.dragging { opacity: .4; }

.drag-ghost {
  position: fixed; z-index: 200; pointer-events: none;
  padding: .45rem .75rem; border-radius: 0;
  background: var(--k-yellow); color: var(--k-black);
  border: 2px solid var(--k-black);
  font-size: .78rem; font-weight: 800;
  transform: translate(-50%, -140%);
  white-space: nowrap;
}

/* ------------------------------------------------------ dock keranjang */

.cart-dock {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 120;
  width: 320px; max-width: calc(100vw - 2.2rem);
  border-radius: 0;
  border: 2px solid var(--k-black);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  overflow: hidden;
  transition: box-shadow .16s, transform .16s;
}
.cart-dock.drag-over {
  box-shadow: 0 0 0 4px var(--k-yellow), 0 12px 34px rgba(0,0,0,.28);
  transform: scale(1.02);
}
.cart-dock.flash { animation: dockFlash .5s ease; }
@keyframes dockFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255,184,28,.85); }
  100% { box-shadow: 0 0 0 22px rgba(255,184,28,0); }
}

.dock-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem;
  cursor: pointer;
  background: var(--k-yellow);
  border-bottom: 2px solid var(--k-black);
}
.dock-head .ico {
  width: 30px; height: 30px; border-radius: 0;
  display: grid; place-items: center;
  background: var(--k-black); color: var(--k-yellow); font-size: .9rem;
}
.dock-head .label { flex: 1; line-height: 1.2; min-width: 0; }
.dock-head .label strong {
  display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
}
.dock-head .label span { font-size: .7rem; color: rgba(19,19,19,.7); }
.dock-head .sum { font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dock-head .caret { color: var(--k-black); font-size: .65rem; transition: transform .18s; }
.cart-dock.open .dock-head .caret { transform: rotate(180deg); }

.dock-body { display: none; max-height: 46vh; overflow-y: auto; padding: .3rem .5rem .5rem; }
.cart-dock.open .dock-body { display: block; }

.dock-line { display: flex; align-items: center; gap: .55rem; padding: .5rem .45rem; }
.dock-line + .dock-line { border-top: 1px solid var(--k-line); }
.dock-line .t { flex: 1; min-width: 0; line-height: 1.3; }
.dock-line .t b {
  display: block; font-size: .78rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock-line .t small { font-size: .68rem; color: var(--k-faint); }
.dock-line .amt { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock-line .drop-x {
  background: none; border: none; color: var(--k-faint);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: .1rem .25rem;
}
.dock-line .drop-x:hover { color: var(--k-red); }

.dock-foot { display: flex; gap: .5rem; padding: .55rem .6rem .7rem; }
.dock-foot .btn { flex: 1; justify-content: center; font-size: .72rem; padding: .5rem .5rem; }

.dock-hint { padding: .9rem .85rem 1rem; text-align: center; font-size: .74rem; color: var(--k-faint); line-height: 1.5; }
.dock-zone {
  margin: 0 .6rem .7rem;
  border: 2px dashed var(--k-black);
  border-radius: 0;
  padding: .8rem .6rem;
  text-align: center; font-size: .72rem; color: var(--k-dim);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  transition: background .14s, color .14s;
}
.cart-dock.drag-over .dock-zone { background: var(--k-yellow); color: var(--k-black); }

.cart-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 .3rem; margin-left: .3rem;
  border-radius: 0; background: var(--k-red); color: #fff;
  font-size: .66rem; font-weight: 800;
}

/* ------------------------------------------------------------- toast */

.toast-stack {
  position: fixed; left: 50%; bottom: 1.3rem; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: .45rem;
  align-items: center; pointer-events: none;
}
.toast {
  padding: .6rem 1rem; border-radius: 0;
  background: var(--k-black); color: #fff;
  border-left: 4px solid var(--k-yellow);
  font-size: .78rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  animation: toastIn .2s ease;
}
.toast.bad { border-left-color: var(--k-red); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------ panel & form shop */

.shop .panel {
  background: #fff; border: 1px solid var(--k-line); border-radius: 0;
  box-shadow: none;
}
.shop .panel-head { border-bottom: 2px solid var(--k-black); background: #fff; }
.shop table.data thead th { background: var(--k-black); color: #fff; border-bottom: none; }
.shop table.data th, .shop table.data td { border-bottom-color: var(--k-line); }
.shop table.data tbody tr:hover { background: #FFF8E6; }
.shop .input, .shop .select, .shop textarea {
  background: #fff; border: 1px solid #C9C9C9; color: var(--k-ink); border-radius: 2px;
}
.shop .input:focus, .shop .select:focus, .shop textarea:focus {
  border-color: var(--k-black); box-shadow: 0 0 0 3px rgba(255,184,28,.35); outline: none;
}
.shop .toolbar { background: var(--k-soft); border-bottom-color: var(--k-line); }
.shop .notice {
  color: var(--k-dim); background: #FFFBF0;
  border-left: 4px solid var(--k-yellow);
  border-top: 1px solid var(--k-line);
  border-right: 1px solid var(--k-line);
  border-bottom: 1px solid var(--k-line);
  border-radius: 0; padding: .8rem 1rem;
}
.shop .notice.warn { border-left-color: var(--warn); background: #FFF8E8; }
.shop .notice.bad  { border-left-color: var(--k-red); background: #FDF0F0; }
.shop .notice strong { color: var(--k-ink); }
.shop .pager { border-top: 1px solid var(--k-line); }
.shop .badge { border-radius: 0; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--k-soft);
  border: 1px solid var(--k-line);
  border-left: 4px solid var(--k-yellow);
  border-radius: 0;
  padding: .8rem .9rem; margin-bottom: 1.2rem;
}
.filter-bar .input, .filter-bar .select { width: auto; min-width: 130px; }
.stock-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .44rem .7rem; border-radius: 2px;
  border: 1px solid var(--k-black); background: #fff;
  font-size: .78rem; color: var(--k-ink); cursor: pointer; user-select: none;
  font-weight: 600;
}
.stock-toggle:hover { background: var(--k-yellow); }
.stock-toggle input { accent-color: var(--k-black); width: 15px; height: 15px; margin: 0; }

/* ---------------------------------------------------------- garansi */

.warranty-box {
  background: #fff; border: 1px solid var(--k-line);
  border-top: 5px solid var(--k-yellow);
  border-radius: 0;
  padding: 1.8rem; max-width: 620px; margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.warranty-result { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--k-line); }
.warranty-state {
  display: inline-block; padding: .32rem .85rem; border-radius: 0;
  font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}
.state-active      { background: #E7F4EA; color: var(--ok);      border: 1px solid #BFE0C7; }
.state-expired     { background: #FFF3D6; color: var(--warn);    border: 1px solid #F2D69B; }
.state-void        { background: #FCE8E9; color: var(--k-red);   border: 1px solid #F1C0C2; }
.state-belum_aktif { background: var(--k-soft); color: var(--k-dim); border: 1px solid var(--k-line); }

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

.shop-foot {
  background: var(--k-black); color: rgba(255,255,255,.8);
  border-top: 6px solid var(--k-yellow);
  padding: 2.4rem 0 1rem; margin-top: 3.5rem;
}
.shop-foot .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.shop-foot strong {
  color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem;
}
.shop-foot p { font-size: .82rem; color: rgba(255,255,255,.7); }
.shop-foot a { color: var(--k-yellow); }
.shop-foot a:hover { color: var(--k-yellow-2); }
.shop-foot .copyright {
  display: flex; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.18); margin-top: 1.4rem; padding-top: .9rem;
  font-size: .72rem; color: rgba(255,255,255,.5);
}

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

.product-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  align-items: start; margin-bottom: 1.4rem;
}
.product-shots { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 320px; }
.product-shots img {
  /* contain, bukan cover: foto produknya potret, dan memotongnya
     membuat label kapasitas di sisi kartu ikut terpotong. */
  width: 148px; height: 148px; object-fit: contain; padding: .35rem;
  border-radius: 0; border: 1px solid var(--k-line); background: #fff;
}
.product-intro h1 {
  font-size: clamp(1.4rem, 3vw, 2.1rem); margin: .3rem 0 .6rem;
  font-weight: 800; letter-spacing: -.02em;
}
.product-intro .brand-line {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--k-faint); font-weight: 700;
}
.product-intro .meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.product-intro .chip {
  font-size: .7rem; padding: .2rem .6rem; border-radius: 0;
  background: var(--k-soft); color: var(--k-dim); border: 1px solid var(--k-line);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.product-intro .chip.serial { background: var(--k-yellow); color: var(--k-black); border-color: var(--k-yellow); }
.product-intro .lead { color: var(--k-dim); max-width: 46rem; }

/* Harga varian: yang dibayar ditebalkan, harga sebelum promo dicoret di
   bawahnya supaya potongan terbaca tanpa perlu menghitung sendiri. */
.price-cell strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-cell .was {
  display: block; font-size: .78rem; color: var(--k-faint);
  text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.variant-table .drag-row { cursor: grab; touch-action: none; }
.variant-table .drag-row:hover { background: #FFF8E6; }
.variant-table .drag-row:active { cursor: grabbing; }
.variant-table .drag-row.dragging { opacity: .4; }
.variant-table .grip-cell { width: 26px; padding-right: 0; }
.variant-table .grip { color: var(--k-faint); letter-spacing: -2px; font-size: .9rem; }
.variant-table .drag-row:hover .grip { color: var(--k-black); }
.stock-ok { color: var(--ok); font-weight: 700; }

.shop .kv { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: .1rem 1rem; }
.shop .kv dt { color: var(--k-faint); font-size: .8rem; padding: .35rem 0; }
.shop .kv dd { margin: 0; padding: .35rem 0; border-bottom: 1px solid var(--k-line); }

.cart-total { font-size: 1.15rem; font-weight: 800; }

/* ------------------------- komponen bersama pada palet storefront */

.shop .field label { color: var(--k-ink); font-weight: 600; }
.shop .field .help { color: var(--k-faint); }
.shop .tag { background: var(--k-soft); color: var(--k-dim); border: 1px solid var(--k-line); border-radius: 0; }
.shop .flash { background: #fff; border: 1px solid var(--k-line); border-left: 4px solid var(--k-yellow); border-radius: 0; }
.shop .flash-success { border-left-color: var(--ok);     background: #F3FAF4; }
.shop .flash-error   { border-left-color: var(--k-red);  background: #FDF0F0; }
.shop .flash-warning { border-left-color: var(--warn);   background: #FFF8E8; }
.shop .flash-info    { border-left-color: var(--k-black);background: var(--k-soft); }
.shop .pager-info { color: var(--k-faint); }
.shop .pager-links a, .shop .pager-links span {
  border: 1px solid var(--k-line); color: var(--k-ink); border-radius: 0;
}
.shop .pager-links a:hover { background: var(--k-yellow); color: var(--k-black); }
.shop .pager-links .current {
  background: var(--k-black); border-color: var(--k-black); color: var(--k-yellow); font-weight: 700;
}
.shop .empty { color: var(--k-faint); }
.shop .badge-ok   { background: #E7F4EA; color: var(--ok);    border-color: #BFE0C7; }
.shop .badge-wait { background: #FFF3D6; color: var(--warn);  border-color: #F2D69B; }
.shop .badge-bad  { background: #FCE8E9; color: var(--k-red); border-color: #F1C0C2; }
.shop .badge-info { background: #E8F0F9; color: var(--info);  border-color: #C2D6EC; }
.shop .btn-block { border-radius: 2px; }
.shop .grid-2 { gap: 1rem; }

/* -------------------------------------------- halaman status pembayaran */

.pay-shell { max-width: 720px; margin: 0 auto; }
.pay-status { text-align: center; padding: 1.4rem 0 1.6rem; }
.pay-mark {
  display: inline-grid; place-items: center;
  width: 74px; height: 74px; border-radius: 0;
  font-size: 2rem; margin-bottom: 1rem;
  color: var(--k-black); background: var(--k-yellow);
  border: 2px solid var(--k-black);
}
.pay-status.done .pay-mark { background: var(--ok); color: #fff; border-color: var(--ok); }
.pay-status h1 { font-size: 1.5rem; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: -.01em; }

.pay-amount {
  text-align: center; padding: 1.6rem 1rem; margin-bottom: 1.2rem;
  border: 1px solid var(--k-line); border-top: 5px solid var(--k-yellow);
  background: #fff;
}
.pay-amount .label {
  display: block; font-size: .66rem; letter-spacing: .16em;
  color: var(--k-faint); font-weight: 700; margin-bottom: .5rem;
}
.pay-amount > strong {
  display: block; font-size: 2.1rem; font-weight: 800;
  color: var(--k-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.countdown {
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--k-line);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.countdown b { font-size: 1.15rem; font-weight: 800; color: var(--warn); font-variant-numeric: tabular-nums; }
.countdown.habis b { color: var(--k-red); }
.pay-mono { font-family: var(--mono); letter-spacing: .04em; }

/* ---------------------------------------------- tabel perbandingan */

.compare-table th { vertical-align: top; }
.compare-table td:first-child, .compare-table th:first-child {
  color: var(--k-faint); font-weight: 700;
  position: sticky; left: 0; background: #fff; z-index: 1;
}
.compare-table thead th:first-child { background: var(--k-black); }
.compare-table .row-price td { font-size: 1rem; }
.compare-table .row-price td strong { color: var(--k-ink); }
.compare-table .row-action td { padding-top: .9rem; padding-bottom: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .product-card, .variant-chip, .cart-dock { transition: none; }
  .toast { animation: none; }
}

/* ================================================================== */
/* Penyesuaian Kodak - back-office                                    */
/* ================================================================== */

/* Sidebar hitam dengan teks putih meniru bilah navigasi kodak.com;
   penanda aktif memakai kuning merek, bukan biru. */
.sidebar {
  background: var(--kodak-black);
  border-right: none;
}
.sidebar .brand { border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar .brand-text strong { color: #fff; }
.sidebar .brand-text small { color: rgba(255,255,255,.55); }
.nav-title { color: rgba(255,255,255,.45); }
.nav-item { color: rgba(255,255,255,.78); border-left-width: 3px; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active {
  background: rgba(255,184,28,.14);
  color: var(--kodak-yellow);
  border-left-color: var(--kodak-yellow);
  font-weight: 600;
}
.sidebar-foot { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); }

/* Lencana merek: bingkai "K" - kotak kuning bersudut siku dengan huruf
   hitam, mengikuti bentuk logo induk. */
.brand-mark {
  background: var(--kodak-yellow);
  color: var(--kodak-black);
  border-radius: 0;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: none;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  /* Garis kuning tipis di bawah topbar - tanda merek yang tenang. */
  box-shadow: inset 0 -3px 0 var(--kodak-yellow);
}
.topbar h1 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }

.panel { box-shadow: var(--shadow); }
.panel-head { background: #fff; border-bottom: 2px solid var(--kodak-black); }
.panel-head h2 {
  text-transform: uppercase; letter-spacing: .05em; font-size: .82rem;
}

table.data thead th {
  background: var(--kodak-black); color: #fff;
  border-bottom: none; letter-spacing: .06em;
}
table.data tbody tr:hover { background: #FFF8E6; }

.card { border-top: 3px solid var(--kodak-yellow); }
.card.ok   { border-top-color: var(--ok); }
.card.warn { border-top-color: var(--warn); }
.card.bad  { border-top-color: var(--bad); }

/* Tombol Kodak: utama kuning berteks hitam, sekunder garis hitam. */
.btn {
  background: #fff; border: 1px solid var(--kodak-black); color: var(--kodak-black);
  border-radius: var(--radius-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; font-size: .78rem;
}
.btn:hover { background: var(--kodak-black); color: #fff; }
.btn-primary {
  background: var(--kodak-yellow); border-color: var(--kodak-yellow);
  color: var(--kodak-black);
}
.btn-primary:hover { background: var(--kodak-yellow-2); border-color: var(--kodak-yellow-2); color: var(--kodak-black); }
.btn-danger {
  background: var(--kodak-red); border-color: var(--kodak-red); color: #fff;
}

.input, .select, .textarea {
  background: #fff; border: 1px solid #C9C9C9; color: var(--text);
  border-radius: var(--radius-sm);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--kodak-black);
  box-shadow: 0 0 0 3px rgba(255,184,28,.35);
  outline: none;
}

.badge { border-radius: var(--radius-sm); }
.badge-ok   { background: #E7F4EA; color: var(--ok);   border-color: #BFE0C7; }
.badge-wait { background: #FFF3D6; color: var(--warn); border-color: #F2D69B; }
.badge-bad  { background: #FCE8E9; color: var(--bad);  border-color: #F1C0C2; }
.badge-info { background: #E8F0F9; color: var(--info); border-color: #C2D6EC; }
.tag { background: var(--bg-hover); border-radius: var(--radius-sm); }

.pager-links .current {
  background: var(--kodak-yellow); border-color: var(--kodak-yellow);
  color: var(--kodak-black); font-weight: 700;
}
.notice { border-left: 4px solid var(--kodak-yellow); background: #FFFBF0; }
.notice.warn { border-left-color: var(--warn); background: #FFF8E8; }
.notice.bad  { border-left-color: var(--kodak-red); background: #FDF0F0; }
.progress span { background: var(--kodak-yellow); }
.flash { border-radius: var(--radius-sm); }

/* Halaman masuk: sisi kiri memakai blok kuning khas kemasan film. */
.auth-body { background: var(--bg); }
.auth-shell { border-radius: var(--radius); border: 1px solid var(--line); }
.auth-side {
  background: var(--kodak-yellow);
  border-right: none;
  color: var(--kodak-black);
}
.auth-side h1 { color: var(--kodak-black); }
.auth-side p, .auth-points li { color: rgba(19,19,19,.78); }
.auth-points li::before { color: var(--kodak-black); }
.auth-side .brand-mark { background: var(--kodak-black); color: var(--kodak-yellow); }

/* ================================================================== */
/* Lapisan instrumen - penegasan futuristik                           */
/*                                                                    */
/* Kodak adalah perusahaan optik, dan bahasa alat optik itu sendiri    */
/* sudah futuristik: bingkai bidik, tanda ukur, sudut terpangkas,      */
/* angka monospace. Itu yang dipakai di sini - bukan cahaya neon, yang */
/* justru akan bertabrakan dengan kuning merek.                       */
/* ================================================================== */

/* Sudut terpangkas: satu takik diagonal di kanan atas, seperti notch
   pada kaset film dan pelat instrumen. Dipakai hemat - hanya pada
   elemen utama - supaya tetap terasa disengaja. */
.chamfer,
.shop .hero,
.shop .product-card,
.shop .warranty-box,
.shop .pay-amount,
.cart-dock,
.card {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* ------------------------------------------------- kepala bagian HUD */
/* Nomor urut otomatis lewat counter CSS - tidak perlu menyentuh satu
   pun template. */

.shop-main { counter-reset: sect; }
.shop .section-head { position: relative; align-items: flex-end; }
.shop .section-head h2 { display: flex; align-items: baseline; gap: .6rem; }
.shop .section-head h2::before {
  counter-increment: sect;
  content: counter(sect, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--k-black);
  background: var(--k-yellow);
  padding: .12rem .34rem;
}
/* Tanda ukur di sepanjang garis bawah, seperti skala pada lensa. */
.shop .section-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px;
  background: repeating-linear-gradient(90deg,
      var(--k-black) 0 1px, transparent 1px 9px);
  opacity: .35;
  pointer-events: none;
}

/* ------------------------------------------------------- hero: sapuan */
/* Garis kuning yang melintas pelan - meniru sapuan pemindai, bukan
   kilau. Satu elemen, satu animasi. */

.shop .hero { position: relative; }
.shop .hero .scan {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.shop .hero .scan::before {
  content: ""; position: absolute; left: -30%; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg,
      transparent, rgba(255,255,255,.55), transparent);
  animation: heroScan 7s linear infinite;
}
@keyframes heroScan {
  0%   { transform: translateX(0); }
  100% { transform: translateX(460%); }
}
/* Kisi teknis tipis di dalam blok kuning - kesan lembar rancangan. */
.shop .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(19,19,19,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,19,19,.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.shop .hero > * { position: relative; z-index: 1; }

/* -------------------------------------------- kartu: kurung pembidik */
/* Empat siku muncul saat kursor mendekat, persis kotak fokus pada
   jendela bidik kamera. Ini pengganti "glow" - memberi tanda fokus
   tanpa cahaya palsu. */

.shop .product-card .finder {
  position: absolute; inset: 6px; pointer-events: none; opacity: 0;
  transition: opacity .16s;
}
.shop .product-card:hover .finder { opacity: 1; }
.shop .product-card .finder::before,
.shop .product-card .finder::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--k-black);
}
.shop .product-card .finder::before {
  top: 0; left: 0; border-right: none; border-bottom: none;
}
.shop .product-card .finder::after {
  bottom: 0; right: 0; border-left: none; border-top: none;
}

/* ------------------------------------------------ tipografi data */
/* Angka, SKU, dan kode memakai monospace dengan angka bertabulasi -
   kolom yang rata terbaca seperti panel bacaan, bukan paragraf. */

.shop .variant-chip .price,
.shop .cart-total,
.shop .pay-amount > strong,
.shop .countdown b,
.shop .hero-stats strong,
.compare-table .num,
.shop table.data td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.shop .product-card .brand-line,
.shop .variant-chip .cap {
  font-family: var(--mono);
  letter-spacing: .06em;
}

/* -------------------------------------------- tombol: isian menggeser */
/* Kuning masuk dari kiri saat disentuh, bukan sekadar berganti warna -
   gerakan kecil yang menandai arah aksi. */

.shop .btn { position: relative; overflow: hidden; z-index: 0; }
.shop .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--k-black);
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.shop .btn:hover::before { transform: scaleX(1); }
.shop .btn-primary::before { background: var(--k-black); }
.shop .btn-primary:hover { color: var(--k-yellow); border-color: var(--k-black); }

/* --------------------------------------------- dock: panel instrumen */

.cart-dock { border-width: 2px; }
.dock-head { position: relative; }
.dock-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(90deg,
      var(--k-black) 0 4px, transparent 4px 8px);
}
.dock-head .sum { font-family: var(--mono); }

/* Zona lepas berdenyut halus saat item melayang - satu-satunya animasi
   yang dipicu keadaan, bukan berjalan terus. */
.cart-dock.drag-over .dock-zone { animation: zonePulse .7s ease-in-out infinite; }
@keyframes zonePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(.985); }
}

/* ================================================================== */
/* Back-office: kartu metrik jadi modul bacaan hitam                  */
/* ================================================================== */

.card {
  background: var(--kodak-black);
  border: 1px solid var(--kodak-black);
  border-top: 3px solid var(--kodak-yellow);
  position: relative;
  overflow: hidden;
}
.card .label { color: rgba(255,255,255,.55); letter-spacing: .12em; }
.card .value {
  color: #fff; font-family: var(--mono);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.card .hint { color: rgba(255,255,255,.55); }
.card.ok   .value { color: #6FD48A; }
.card.warn .value { color: var(--kodak-yellow); }
.card.bad  .value { color: #FF8A8F; }
.card.ok   { border-top-color: #6FD48A; }
.card.warn { border-top-color: var(--kodak-yellow); }
.card.bad  { border-top-color: #FF8A8F; }
/* Skala ukur di tepi bawah modul. */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(90deg,
      rgba(255,255,255,.30) 0 1px, transparent 1px 8px);
}

/* Judul panel back-office ikut memakai nomor urut. */
.content { counter-reset: pan; }
.content .panel-head h2::before {
  counter-increment: pan;
  content: counter(pan, decimal-leading-zero);
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  color: var(--kodak-black); background: var(--kodak-yellow);
  padding: .1rem .3rem; margin-right: .5rem;
}

/* Tabel: angka monospace + garis kisi tipis, seperti lembar data. */
table.data td.num, table.data th.num { font-family: var(--mono); }
table.data thead th { position: relative; }
table.data thead th::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(90deg,
      var(--kodak-yellow) 0 3px, transparent 3px 7px);
}

/* Indikator status di topbar: kotak kecil, bukan lingkaran - bahasa
   panel instrumen. */
.clock { font-family: var(--mono); letter-spacing: .04em; }

/* Sidebar: penanda aktif mendapat takik segitiga di ujung kanan. */
.nav-item.active { position: relative; }
.nav-item.active::after {
  content: ""; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--bg);
}

/* ------------------------------------------------------------------ */
/* Hormati permintaan gerak minimal: seluruh animasi dimatikan, tetapi */
/* geometrinya tetap - kesan futuristik tidak bergantung pada gerak.   */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .shop .hero .scan::before { animation: none; display: none; }
  .cart-dock.drag-over .dock-zone { animation: none; }
  .shop .btn::before { transition: none; }
}

/* Layar sempit: takik dan kurung bidik dikecilkan supaya tidak memakan
   ruang teks. */
@media (max-width: 720px) {
  .chamfer, .shop .hero, .shop .product-card, .shop .warranty-box,
  .shop .pay-amount, .cart-dock, .card {
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  }
}

/* --------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { display: flex; flex-wrap: wrap; gap: .2rem; padding: .5rem; }
  .nav-group { display: contents; }
  .nav-title { display: none; }
  .nav-item { border-left: none; border-radius: var(--radius-sm); padding: .35rem .7rem; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}

@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .cards { grid-template-columns: 1fr 1fr; }
  .content { padding: 1rem; }
}

@media (max-width: 720px) {
  .shop-nav { gap: .15rem; font-size: .8rem; flex-wrap: wrap; justify-content: flex-end; }
  .shop-nav a { padding: .3rem .5rem; }
  .hero { padding: 1.8rem 1.3rem; border-radius: 18px; }
  .hero-stats { gap: 1.1rem; }
  .cart-dock { right: .6rem; left: .6rem; bottom: .6rem; width: auto; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Formulir ubah di dalam baris tabel.
   Tanpa pembungkus ini, tujuh kotak isian berjajar dalam satu baris
   memaksa tabel melebar jauh melewati layar dan seluruh halaman ikut
   bergeser ke samping. Dibungkus supaya membungkus ke bawah dalam lebar
   yang tetap - tinggi baris bertambah sedikit, lebarnya berhenti. */
.row-edit {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  max-width: 380px;
}
.row-edit .input, .row-edit .select { min-width: 0; }

/* Satuan pada harga kartu. Kecil dan menempel pada angkanya - pembeli
   grosir harus tahu 1,8 jt itu sekardus, bukan sekeping, sebelum
   menyeret kartunya ke keranjang. */
.variant-chip .price small {
  font-size: .72em;
  font-weight: 500;
  opacity: .75;
  margin-left: .1em;
}