/* 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 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; } /* Pilih-serial (halaman transfer): tombol yang membuka daftar checkbox serial in_stock di gudang asal; bisa dicari dan dipilih banyak. */ .pilih-serial { position: relative; display: inline-block; min-width: 230px; } .pilih-serial-tombol { width: 100%; text-align: left; cursor: pointer; color: var(--text-dim); } .pilih-serial-tombol.terisi { color: var(--text); } .pilih-serial-daftar { position: absolute; z-index: 70; left: 0; right: 0; top: 100%; margin-top: 2px; display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(15, 23, 42, .16); padding: .45rem; } .pilih-serial-daftar[hidden] { display: none; } .pilih-serial-aksi { display: flex; gap: .35rem; margin: .4rem 0; } .pilih-serial-opsi { display: block; max-height: 240px; overflow: auto; } .pilih-serial-opsi label { display: flex; gap: .45rem; align-items: center; padding: .22rem .3rem; font-size: .85rem; cursor: pointer; border-radius: 4px; } .pilih-serial-opsi label:hover { background: var(--bg-hover); } .pilih-serial-opsi .kosong { display: block; padding: .35rem; color: var(--text-mute); font-size: .85rem; } /* Pembatalan order: formulir alasan dilipat di balik tombol; kartu dan pemberitahuan pembatalan berwarna peringatan. */ .batal-order summary { list-style: none; display: inline-flex; } .batal-order summary::-webkit-details-marker { display: none; } .batal-order .batal-form { margin-top: .6rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); max-width: 520px; } .btn-danger { background: #b42318; border-color: #b42318; color: #fff; } .btn-danger:hover { background: #912018; } .card-batal { border-left: 4px solid #b42318; } .notice-batal { border-left-color: #b42318; background: #fff5f4; } /* Daftar serial di detail penerimaan: dilipat, dibuka per baris. */ .serial-daftar summary { cursor: pointer; color: var(--primary, #1d4ed8); text-decoration: underline dotted; } .serial-daftar .serial-isi { margin-top: .35rem; max-width: 420px; line-height: 1.9; } /* Dropdown yang bisa dicari (dipasang app.js pada aslinya tetap ada - tak terlihat, tapi tetap dikirim formulir dan tetap divalidasi. */ .cari-pilih { position: relative; display: inline-block; min-width: 200px; max-width: 100%; vertical-align: middle; } .field > .cari-pilih, .grid-2 > .cari-pilih, td > .cari-pilih { display: block; width: 100%; } .cari-pilih-asli { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; } .cari-pilih-teks { width: 100%; padding-right: 1.9rem; cursor: text; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; } .cari-pilih-daftar { position: absolute; z-index: 70; left: 0; right: 0; top: 100%; margin-top: 2px; min-width: 240px; max-height: 300px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(15, 23, 42, .16); text-align: left; } .cari-pilih-opsi { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .45rem .65rem; font: inherit; font-size: .85rem; color: var(--text); cursor: pointer; white-space: normal; } .cari-pilih-opsi:hover, .cari-pilih-opsi.aktif { background: var(--bg-hover); } .cari-pilih-opsi.terpilih { font-weight: 600; } .cari-pilih-opsi.redup { color: var(--text-mute); } .cari-pilih-kosong { padding: .45rem .65rem; color: var(--text-mute); font-size: .85rem; } /* 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; } /* Pertukaran hanya bila gambar kedua sudah termuat (.siap dari app.js); sebelum itu gambar utama tetap tampil - bukan kotak kosong. */ .product-card:hover .card-shot.has-hover.siap .shot-main, .card-shot.has-hover.siap:focus-visible .shot-main { opacity: 0; } .product-card:hover .card-shot.has-hover.siap .shot-hover, .card-shot.has-hover.siap:focus-visible .shot-hover { opacity: 1; } .product-card:hover .card-shot img { transform: scale(1.03); } /* Layar sentuh: sorotan (:hover) tidak dipakai untuk menukar gambar - pertukaran hanya lewat kelas .lihat-kedua yang dipasang app.js saat kartu ditekan-tahan. Callout iOS dan seleksi teks dimatikan agar tekan-tahan tidak memunculkan menu peramban. */ @media (hover: none), (pointer: coarse) { .product-card:hover .card-shot.has-hover.siap .shot-main { opacity: 1; } .product-card:hover .card-shot.has-hover.siap .shot-hover { opacity: 0; } .card-shot.has-hover.siap.lihat-kedua .shot-main { opacity: 0 !important; } /* display:block ikut dipaksa: aturan layar sempit di bawah menyembunyikan gambar kedua (display:none) untuk menghemat ruang, dan itulah yang membuat kartu tampak kosong saat ditahan. */ .card-shot.has-hover.siap.lihat-kedua .shot-hover { opacity: 1 !important; display: block !important; } .product-card:hover .card-shot img { transform: none; } .card-shot, .card-shot img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .card-shot { -webkit-tap-highlight-color: transparent; } } /* Perangkat tanpa penunjuk - layar sentuh - tidak punya keadaan sorot. Gambar keduanya disembunyikan saja daripada menumpuk permanen. */ @media (hover: none), (pointer: coarse) { .card-shot.has-hover .shot-hover { display: none; } /* Perangkat sentuh tidak menyeret produk ke keranjang - orang mengetuk tombolnya dan barangnya masuk sendiri. Kotak "lepas di sini" hanya memakan ruang dan menjanjikan gerakan yang tidak ada. Sasaran lepasnya sendiri tetap seluruh dock, jadi tidak ada yang rusak. */ .cart-dock .dock-zone { 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; } /* Cap "Stok kosong" pada kartu produk yang seluruh variannya habis (2026-08-28). Menutupi gambar dengan lapisan gelap + teks tengah; gambar diredupkan/abu. pointer-events:none supaya klik tetap tembus ke tautan gambar. */ .card-shot .sold-out-wm { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; background: rgba(17, 17, 17, .45); color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; } .card-shot.is-soldout img { filter: grayscale(.55); opacity: .82; } /* Baris hasil pencarian serial di halaman order (2026-08-28) */ .sn-res-row:hover, .sn-res-row:focus { background: var(--k-soft, #f3f4f6); } .sn-res-row + .sn-res-row { border-top: 1px solid var(--k-line); } .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; } /* Tabel Varian & Ketersediaan memakai table.data yang di etalase berukuran .85rem (≈12px) — lebih kecil dari Deskripsi/Spesifikasi (14px), jadi terlihat tak seragam sehalaman. Samakan ke ukuran halaman (2026-09-01): isi 1rem, header & sub-teks dinaikkan, angka tetap monospace (dinaikkan tipis agar sebesar teks, seperti bagian lain). */ .shop .variant-table { font-size: 1rem; } .shop .variant-table thead th { font-size: .8rem; } .shop .variant-table td .sub { font-size: .85rem; } .shop .variant-table td.num { font-size: 1.05em; } .shop .kv { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: .1rem 1rem; } /* Label & nilai spesifikasi disamakan ukurannya (2026-09-01): sebelumnya label .8rem sedangkan nilai 1rem → tampak tak seragam. Kini keduanya 1rem (sama dengan deskripsi produk), hierarki dibedakan lewat WARNA, bukan ukuran. */ .shop .kv dt { color: var(--k-faint); font-size: 1rem; padding: .4rem 0; line-height: 1.5; } .shop .kv dd { margin: 0; font-size: 1rem; padding: .4rem 0; line-height: 1.5; 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 */ /* Batas layar sempit 880px (dulu 1000px): laptop dengan skala tampilan 125-150% (lebar CSS 900-1100px) tetap memakai menu samping berlipat, bukan menu mendatar ala ponsel. */ @media (max-width: 880px) { .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-group.tutup > .nav-item { display: block; } .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; } /* Paragraf deskripsi produk. Dilebarkan terbatas dan diberi jarak baris longgar - teks pabrikan datang sebagai satu blok panjang tanpa pemenggalan, dan selebar panel penuh jadi melelahkan dibaca. */ .product-desc { max-width: 72ch; margin: 0; padding-left: 1.1rem; line-height: 1.7; color: var(--text); } .product-desc li { margin-bottom: .4rem; } .product-desc li::marker { color: var(--kodak-yellow); } /* ============================================================ ponsel Ditulis paling akhir supaya menang atas aturan-aturan di atas hanya lewat urutan, tanpa !important. Diperiksa dengan tangkapan layar 390px: yang paling rusak adalah halaman produk, yang memaksa dua kolom di layar selebar telapak tangan. */ @media (max-width: 720px) { /* Header: logo di baris pertama, menu jadi satu strip yang bisa digeser. Sebelumnya menu membungkus jadi dua-tiga baris dan menghabiskan sepertiga layar sebelum isi halaman terlihat. */ .shop-header .wrap { flex-wrap: wrap; gap: .3rem .6rem; padding-top: .6rem; padding-bottom: 0; } .shop-nav { flex-basis: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .shop-nav::-webkit-scrollbar { display: none; } .shop-nav a { white-space: nowrap; flex-shrink: 0; padding: .55rem .55rem; } .shop-nav a:first-child { padding-left: 0; } .shop-main { padding: 1rem .9rem 5.5rem; } .section-head h2 { font-size: 1.05rem; } /* Halaman produk: gambar dan teks bertumpuk, bukan berdampingan. Dua kolom di 390px menyisakan sekitar 120px untuk teks - judul dan kotak peringatan pecah satu kata per baris. Foto jadi strip geser mendatar supaya semua terlihat tanpa memakan tinggi layar. */ .product-hero { grid-template-columns: 1fr; gap: 1rem; } .product-shots { max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; } .product-shots::-webkit-scrollbar { display: none; } .product-shots img { width: 210px; height: 210px; flex-shrink: 0; } .product-intro h1 { font-size: 1.45rem; } /* Tabel varian: kolom sekunder (SKU, kapasitas, interface, kecepatan, daya tahan) disembunyikan - semuanya sudah ada di Spesifikasi Teknis di bawahnya. Yang tersisa varian, harga, stok, dan tombol beli: yang dibutuhkan untuk memutuskan. Pegangan seret ikut hilang; layar sentuh tidak bisa tarik-lepas. */ .variant-table .sec, .variant-table .grip-cell { display: none; } .variant-table td form { flex-wrap: wrap; justify-content: flex-start; } /* Pasangan label-nilai bertumpuk. Kolom label 160-240px menyisakan ruang nilai yang terlalu sempit untuk kalimat utuh - di Keuntungan Akun B2B, satu kalimat pendek pecah jadi enam baris. */ .shop .kv { grid-template-columns: 1fr; gap: 0; } .shop .kv dt { margin-top: .7rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .shop .kv dt:first-child { margin-top: 0; } .shop .kv dd { padding-bottom: .5rem; border-bottom: 1px solid var(--k-line); } .shop .kv dd:last-child { border-bottom: 0; padding-bottom: 0; } /* Kategori di beranda: dua kolom. Kartunya hanya teks pendek, dan satu kolom membuat sembilan kategori memakan dua layar penuh. */ .cat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; } .cat-grid .product-card { padding: .8rem; } .cat-grid .brand-line { font-size: .6rem; word-break: break-all; } /* Dock keranjang melayang di dasar layar dan menutupi baris hak cipta di footer. */ .shop-foot { padding-bottom: 5.5rem; } } /* --------------------------------------------------- pengatur jumlah [-] [angka] [+]. Panah kecil bawaan tidak muncul di ponsel dan terlalu kecil untuk jari di desktop; diganti dua tombol yang cukup besar untuk disentuh. Warna memakai variabel global supaya komponennya juga benar bila dipakai di luar .shop. */ .qty-form { display: inline-flex; align-items: center; gap: .3rem; justify-content: flex-end; } .qty-step { display: inline-flex; align-items: stretch; vertical-align: middle; border: 1px solid #C9C9C9; border-radius: var(--radius-sm); background: #fff; overflow: hidden; } .qty-step button { width: 34px; min-height: 34px; padding: 0; border: 0; background: var(--bg-hover); color: var(--text); font: inherit; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; user-select: none; } .qty-step button:hover { background: var(--kodak-yellow); } .qty-step button:active { background: var(--kodak-yellow-2); } .qty-step .input { width: 3.4em; min-width: 0; padding: .42rem .2rem; border: 0; border-left: 1px solid #E3E3E3; border-right: 1px solid #E3E3E3; border-radius: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield; } .qty-step .input::-webkit-outer-spin-button, .qty-step .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-step .input:focus { outline: none; box-shadow: none; background: #FFFBEA; } /* Di layar sentuh tombolnya dibesarkan ke ukuran sasaran jari. */ @media (max-width: 720px) { .qty-step button { width: 42px; min-height: 42px; } .qty-step .input { font-size: 1rem; } } /* Tombol minus yang berubah jadi ikon hapus pada jumlah 1. */ .qty-step button.is-remove { color: var(--bad); } .qty-step button.is-remove:hover { background: #FDE8E8; } .qty-step button svg { display: block; margin: 0 auto; } /* ------------------------------------------------------- konfirmasi Dialog kecil untuk tindakan yang tidak bisa dibatalkan: satu kalimat di tengah, dua tombol berdampingan di bawahnya, jawaban yang berbahaya berwarna merah. Dipakai bawaan; yang perlu digayakan hanya kotak dan lapisan gelapnya. */ dialog.konfirmasi { border: 0; border-radius: 12px; padding: 0; width: calc(100vw - 3rem); max-width: 320px; background: #fff; color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.3); } dialog.konfirmasi::backdrop { background: rgba(0,0,0,.5); } dialog.konfirmasi:focus { outline: none; } .konfirmasi-body { padding: 1.5rem 1.2rem 1.3rem; text-align: center; } .konfirmasi-body h3 { margin: 0 0 .45rem; font-size: 1.05rem; font-weight: 800; } .konfirmasi-body p { margin: 0; color: var(--text); font-size: .95rem; line-height: 1.5; } .konfirmasi-aksi { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); } dialog.konfirmasi .konfirmasi-aksi .btn { min-height: 48px; margin: 0; border: 0; border-radius: 0; background: #fff; color: var(--text); justify-content: center; text-align: center; font-size: .9rem; font-weight: 600; letter-spacing: .02em; text-transform: none; } dialog.konfirmasi .konfirmasi-aksi .btn + .btn { border-left: 1px solid var(--line); } dialog.konfirmasi .konfirmasi-aksi .btn:hover { background: var(--bg-hover); color: var(--text); } /* Jawaban destruktif merah. Ditulis dengan pemilih dialog supaya menang atas .shop .btn yang menyeragamkan semua tombol. */ dialog.konfirmasi .konfirmasi-aksi .btn-danger { color: var(--kodak-red); } dialog.konfirmasi .konfirmasi-aksi .btn-danger:hover { background: #FDE8E8; color: var(--kodak-red); } /* Zoom gambar produk (halaman detail shop & B2B): panel pembesar yang mengambang di samping kursor, berisi berkas asli - bukan thumbnail. Hanya untuk perangkat berkursor; di layar sentuh panel disembunyikan (di sana sudah ada gestur tekan-lama untuk gambar kedua). */ .product-shots img[data-zoom] { cursor: zoom-in; } .zoom-pane { position: fixed; z-index: 80; width: 340px; height: 340px; border: 1px solid #d8d8d8; border-radius: 10px; background: #fff no-repeat; box-shadow: 0 8px 24px rgba(0,0,0,.18); pointer-events: none; } @media (hover: none) { .zoom-pane { display: none !important; } } /* Kepala grup daftar serial (dikelompokkan per SKU). */ tr.grup-sku td { background: #f3f4f6; border-top: 2px solid #e2e2e2; padding: 7px 10px; font-size: 12.5px; }