/**
* Home page — galeri horizontal gaya commission.nyc.
*
* Spec: CLAUDE.md bagian 1. Halaman ini TIDAK scroll ke bawah — satu-satunya
* scroll yang jalan ada di dalam .tk-home-gallery (ke SAMPING). Warna kanvas
* (hitam/putih) TIDAK didefinisikan ulang di sini — halaman ini tidak dapat
* body class woocommerce-page, jadi otomatis pakai token --tk-bg/--tk-fg
* default dari style.css (hitam/putih), sudah disiapkan untuk ini sejak awal.
*
* Semua teks di sini duduk DI ATAS FOTO (bukan di atas kanvas halaman), jadi
* warnanya pakai token --tk-overlay-* — token yang memang disediakan untuk
* itu di style.css dan sengaja tidak ikut berubah kalau kanvas halaman
* berubah terang/gelap.
*/
html.tk-home,
body.tk-home {
overflow: hidden;
height: 100%;
margin: 0;
}
/* ---------- Logo melayang: SUDAH DIBUANG (7 Sep 2026) ----------
Dulu `.tk-home-logo` melayang besar di tepi kiri layar Home (permintaan
user 3 Sep). Sekarang logo ada di TENGAH NAVBAR di semua halaman
(permintaan user 7 Sep) — gayanya ada di bagian "Logo navbar" di bawah.
Blok lama sengaja tidak disisakan sebagai CSS mati. */
/* ---------- Top bar melayang ---------- */
.tk-home-topbar {
top: 0;
left: 0;
right: 0;
/* ⚠️ 96, bukan 21. Urutan lapisan yang HARUS dijaga di halaman ini:
pita dropdown Collections (95) < navbar (96) < overlay menu HP (97).
Navbar wajib di ATAS pita: pita itu `position: fixed` selebar layar
dan tingginya ikut jumlah koleksi — kalau lapisannya di bawah pita,
begitu ada kondisi apapun yang membuat pita mulai sedikit lebih atas
dari perhitungan (mis. tinggi header berubah, admin bar, zoom
browser), pita akan MENUTUPI menu navbar dan menu-nya seolah hilang.
Dilaporkan user 4 Sep 2026 ("malah ilang kalo di hover") — di
referensi commission.nyc menu navbar SELALU kelihatan waktu daftar
koleksinya terbuka, jadi lapisannya dikunci begini, bukan diandalkan
ke perhitungan posisi yang bisa meleset.
Angka 21 yang lama cuma untuk menang atas logo (20) — masih terjaga,
karena 96 juga di atas 20. */
z-index: 96;
display: flex;
align-items: center;
gap: 24px;
/* ⚠️ Atas-bawah DIREVISI TIGA KALI (9 Sep 2026): 24px → 12px ("masih
kegedean") → **20px, angka final saat ini**. Angka ini baru BERARTI
apa adanya karena ruang kosong bawaan berkas logo sudah dipotong di
`.tk-home-topbar__logo-img` (lihat catatan panjang di sana) — tanpa
pemotongan itu, padding berapa pun angkanya akan selalu terlihat
lebih besar dari yang tertulis.
⚠️ Kiri-kanan DISAMAKAN dengan jarak tepi HALAMAN (bukan angka bebas
20px seperti sebelumnya) — permintaan user: "padding kanan kiri
navbar sejajarin sama pagenya". Sumber kebenarannya SATU tempat:
`.grid-container.container` di style.css, yang jadi pembungkus semua
konten (breadcrumb, judul, grid produk) — **24px di desktop, 12px di
HP** (diperkecil dari 40px/16px, 10 Sep 2026 — lihat catatan di
style.css). Kalau jarak tepi halaman itu diubah, ubah juga di sini
supaya navbar tidak lagi sejajar. */
padding: 20px 24px;
/* SENGAJA TANPA transition — permintaan user 3 Sep 2026: "kalo di hover
ga langsung ke invert, bikin langsung invert aja". Warnanya harus
berbalik SAAT ITU JUGA begitu kursor masuk, bukan menyusul beberapa
milidetik kemudian. (Transisi konten seperti galeri/overlay tetap
kalem lewat --tk-duration — ini cuma pengecualian khusus untuk umpan
balik hover instan.) */
}
/* ---------- Dua varian navbar (satu markup) ----------
Permintaan user 4 Sep 2026: navbar yang sama berlaku di SEMUA halaman.
- `--overlay` (Home): melayang transparan di atas foto galeri.
- `--solid` (halaman lain): bar putih solid + logo hitam, MENEMPEL saat
halaman di-scroll. Sengaja `sticky` (ikut aliran halaman), bukan
`fixed`: halaman-halaman itu isinya panjang, dan bar `fixed` akan
menindih konten paling atas karena tidak menyisakan ruang untuk
dirinya sendiri. */
.tk-home-topbar--overlay {
position: fixed;
color: var(--tk-overlay-fg);
background: transparent;
}
.tk-home-topbar--solid {
position: sticky;
background: #ffffff;
color: #000000;
/* ⚠️ Warnanya DIHALUSKAN DUA KALI (9 Sep 2026, sesi yang sama):
rgba(0,0,0,0.12) (≈ #E0E0E0) → #EAEAEA → **#F2F2F2, angka final
saat ini**. Tiap kali diganti warna literal yang lebih terang,
bukan menurunkan opacity sebuah rgba — lebih mudah dibandingkan
"seberapa terang" antar revisi lewat angka hex langsung. */
border-bottom: 1px solid #f2f2f2;
}
/* ---------- Logo navbar (TENGAH, semua halaman) ----------
Permintaan user 7 Sep 2026. `flex: 0 0 auto` — zona kiri & kanan yang
sama-sama `flex: 1` yang mendorongnya ke titik tengah layar. */
.tk-home-topbar__logo {
display: block;
flex: 0 0 auto;
line-height: 0; /* Buang celah baris di bawah supaya benar-benar rata tengah dengan teks menu di sebelahnya. */
}
/* ⚠️ RUANG KOSONG BAWAAN BERKAS LOGO DIPOTONG DI SINI (9 Sep 2026).
Diukur langsung dari kedua berkas PNG (logo-black & logo-white, dua-duanya
1200×600 dan bounds-nya IDENTIK): tulisan "takkan" cuma menempati baris
156–425, jadi **26% tinggi berkas kosong di atas dan 29% di bawah** —
totalnya 55% ruang transparan yang ikut terhitung sebagai tinggi elemen.
Itulah kenapa navbar terasa jauh lebih tinggi daripada angka padding-nya:
padding 20px + ±12px transparan = ±32px jarak yang benar-benar terlihat,
dan user melaporkannya sebagai "padding atas bawah terlalu besar".
Perbaikannya BUKAN menambah/mengurangi padding sampai kelihatan pas
(angkanya akan jadi ganjil dan tidak ada yang tahu kenapa), tapi membuat
kotak elemennya SAMA DENGAN tulisannya: tinggi dipatok setinggi ink lalu
`object-fit: cover` memotong pita transparan atas & bawah. Setelah ini,
angka padding di `.tk-home-topbar` berarti apa adanya.
Angkanya: lebar 90px → tinggi alami 45px; ink 45% × 45 ≈ 20,3px. Dipakai
21px (sedikit lebih longgar supaya tidak ada risiko tulisannya terpotong
walau pembulatan browser berbeda), dengan titik potong di 48% — pusat ink
berada di 48,4% tinggi berkas, bukan persis di tengah.
⚠️ KALAU BERKAS LOGO DIGANTI: cek ulang ruang transparannya. Kalau logo
baru sudah rapat (tanpa pita kosong), CABUT `height`/`object-fit`/
`object-position` di sini dan kembalikan ke `height: auto` — kalau tidak,
logo baru itu justru akan terpotong. */
/* ⚠️ DIKECILKAN 10 Sep 2026 (revisi user: "logonya tolong dikecilin
sedikit") — dari 90×21 ke 78×18. `height` DIHITUNG ULANG mengikuti
rumus yang sama seperti komentar di atas (bukan angka bebas): lebar
78px → tinggi alami 39px (rasio 2:1) → ink 45%×39 ≈ 17,55px → dibulatkan
ke atas jadi 18px (margin aman yang sama seperti sebelumnya). Kalau
nanti dikecilkan/dibesarkan lagi, hitung ulang tingginya pakai rumus
ini juga — jangan cuma ubah lebar & biarkan tinggi apa adanya, nanti
framing crop-nya geser dari ink tulisannya. */
.tk-home-topbar__logo-img {
width: 78px; /* Logo 1200×600 (rasio 2:1). Cukup terbaca tanpa mendominasi baris menu 14px. */
height: 18px;
object-fit: cover;
object-position: center 48%;
display: block;
}
.tk-home-topbar__logo:hover {
text-decoration: none; /* Aturan a:hover global memberi underline — di logo (gambar) itu cuma jadi garis nyasar. */
opacity: 0.85;
}
/* ⚠️ DUA versi logo dicetak, CSS memilih yang tampil — lihat alasan
lengkapnya di functions.php. Ringkasnya: navbar Home transparan di atas
foto gelap butuh logo PUTIH, tapi begitu dropdown dibuka navbar itu
berubah jadi PUTIH dan logo putih akan lenyap (bug yang sama persis
sudah pernah terjadi pada tulisan "Collections", 4 Sep 2026).
Default = halaman non-Home (bar putih) → logo hitam. */
.tk-home-topbar__logo-img--light {
display: none;
}
.tk-home-topbar--overlay .tk-home-topbar__logo-img--light {
display: block;
}
.tk-home-topbar--overlay .tk-home-topbar__logo-img--dark {
display: none;
}
/* ...KECUALI saat pita dropdown membuat navbar Home jadi putih — di situ
logo harus balik hitam. Ditaruh SESUDAHNYA supaya menang atas aturan di
atas. Pemicunya sama persis dengan yang memutihkan latar navbar. */
.tk-home-topbar--overlay:has( .tk-collections-dropdown:hover ) .tk-home-topbar__logo-img--light,
body.tk-collections-open .tk-home-topbar--overlay .tk-home-topbar__logo-img--light,
body.tk-search-open .tk-home-topbar--overlay .tk-home-topbar__logo-img--light {
display: none;
}
.tk-home-topbar--overlay:has( .tk-collections-dropdown:hover ) .tk-home-topbar__logo-img--dark,
body.tk-collections-open .tk-home-topbar--overlay .tk-home-topbar__logo-img--dark,
body.tk-search-open .tk-home-topbar--overlay .tk-home-topbar__logo-img--dark {
display: block;
}
/* ---------- Inversi putih: HANYA saat ITEM menunya di-hover ----------
⚠️ Permintaan user 4 Sep 2026: "navbarnya jadi putih kalo misalkan di
hover aja menunya jangan areanya". Sebelumnya pemicunya
`.tk-home-topbar:hover` — seluruh area bar, termasuk ruang kosong
panjang di antara menu kiri dan Cart di kanan, jadi bar berkedip putih
cuma karena kursor lewat di strip paling atas layar.
Sekarang pakai `:has()`: bar berubah hanya kalau ada /