/* Tuffero: halaman landing sesuai FigCraft "01 Landing" (D-019, D-034, D-035).
   custom.css template tetap dimuat untuk preloader, magic cursor, dan image-anime. */

:root{
	--primary-color: #2B1B14;
	--secondary-color: #C6A15B1A;
	--text-color: #6D4C3D;
	--accent-color: #C6A15B;
	--bg-color: #F6F0E5;
	--divider-color: #2B1B141A;
	--dark-divider-color: #FFFFFF1A;
	--error-color: #BA1A1A;
	--default-font: "Be Vietnam Pro", sans-serif;
	--accent-font: "EB Garamond", serif;

	--tf-ink: #2B1B14;
	--tf-brown: #6D4C3D;
	--tf-gold: #C6A15B;
	--tf-ivory: #F6F0E5;
	--tf-line: #E3D5C0;
	--tf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--tf-sans: "Be Vietnam Pro", sans-serif;
	--tf-serif: "EB Garamond", serif;
}

/* custom.css memberi body margin 15px; desain full-bleed */
body:has(.tf){ margin: 0; width: 100%; }

.tf{ background: var(--tf-ivory); color: var(--tf-brown); font-family: var(--tf-sans); }
.tf h1, .tf h2, .tf h3, .tf p, .tf ul, .tf figure, .tf blockquote{ margin: 0; padding: 0; }
.tf ul{ list-style: none; }
.tf p{ line-height: inherit; }
.tf-card-video-text h2, .tf-how-card h3, .tf-step h3{ color: inherit; }
.tf a{ color: inherit; text-decoration: none; }
.tf img{ display: block; max-width: 100%; }
.tf em{ font-style: italic; }
.tf a:focus-visible, .tf button:focus-visible, .tf input:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; }

.tf-icon{ display: inline-block; flex: none; vertical-align: middle; }
/* Ikon bergaris tebal: file *-bold.webp (garis sudah dilebarkan, transparan) dipakai sebagai mask, warna mengikuti currentColor. */
.tf-icon-shopping_bag, .tf-icon-person, .tf-icon-search, .tf-icon-cart, .tf-icon-nastar, .tf-icon-pineapple, .tf-icon-redeem, .tf-icon-celebration, .tf-icon-macaron, .tf-icon-mknindo, .tf-icon-pia, .tf-icon-semua{ background-color: currentColor; -webkit-mask: var(--tf-mask) center / contain no-repeat; mask: var(--tf-mask) center / contain no-repeat; }
.tf-icon-shopping_bag{ --tf-mask: url(/images/Logo/icon/shopbag-bold.webp); }
.tf-icon-person{ --tf-mask: url(/images/Logo/icon/user-bold.webp); }
.tf-icon-search{ --tf-mask: url(/images/Logo/icon/search-bold.webp); }
.tf-icon-cart{ --tf-mask: url(/images/Logo/icon/cart-bold.webp); }
/* Ilustrasi 3in1 (nastar, macaron, pia) berisi detail, jadi diperbesar di kotak 48px agar terbaca; sudah solid, tidak perlu versi -bold. */
.tf-icon-nastar{ --tf-mask: url(/images/Logo/icon/3in1.webp); transform: scale(1.35); }
/* Ilustrasi "bahan pilihan" (pilihan.webp) paling rinci; skala 1.4 menjaga muat di kotak/bulatan 40-48px untuk ukuran 18-24px. */
.tf-icon-pineapple{ --tf-mask: url(/images/Logo/icon/pilihan.webp); transform: scale(1.4); }
/* Ilustrasi hampers (hampers.webp): skala sama dengan pilihan.webp agar seragam di kotak/bulatan 40-48px. */
.tf-icon-redeem{ --tf-mask: url(/images/Logo/icon/hampers.webp); transform: scale(1.4); }
/* Ilustrasi momen istimewa (momen.webp), skala sama dengan ilustrasi lain. */
.tf-icon-celebration{ --tf-mask: url(/images/Logo/icon/momen.webp); transform: scale(1.4); }
/* Ilustrasi makanan khas Indonesia (mknindo.webp) untuk bagian "kenapa Tuffero". */
.tf-icon-mknindo{ --tf-mask: url(/images/Logo/icon/mknindo.webp); transform: scale(1.4); }
/* Macaron (macaron.webp) berbentuk lebar (978x596), jadi skala 1.3; di statistik hero ikon sudah 36px, cukup 1.1 agar tidak menabrak angka. */
.tf-icon-macaron{ --tf-mask: url(/images/Logo/icon/macaron.webp); transform: scale(1.3); }
.tf-stats .tf-icon-macaron{ transform: scale(1.1); }
/* Pia (pia.webp) berbentuk lebar (1057x795), skala 1.3 seperti macaron. */
.tf-icon-pia{ --tf-mask: url(/images/Logo/icon/pia.webp); transform: scale(1.3); }
/* Semua produk (semua.webp) berbentuk lebar (1536x1024), skala 1.2 di statistik hero. */
.tf-icon-semua{ --tf-mask: url(/images/Logo/icon/semua.webp); transform: scale(1.2); }
/* Tombol akun dan cari di header: gerak halus saat hover (mouse) dan tekan (sentuh) */
.tf-action .tf-icon-person, .tf-action .tf-icon-search, .tf-action .tf-icon-shopping_bag, .tf-action .tf-count{ transition: transform 200ms var(--tf-ease-out); }
.tf-action:active .tf-icon-person, .tf-action:active .tf-icon-search, .tf-action:active .tf-icon-shopping_bag{ transform: scale(0.88); transition-duration: 90ms; }
.tf-action:active .tf-count{ transform: scale(0.9); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine){
	.tf-action:hover .tf-icon-person{ transform: translateY(-2px); }
	.tf-action:hover .tf-icon-search{ transform: rotate(-12deg) scale(1.08); }
	.tf-action:hover .tf-icon-shopping_bag{ transform: translateY(-2px) rotate(-6deg) scale(1.06); }
	.tf-action:hover .tf-count{ transform: scale(1.15); }
	.tf-action:hover:active .tf-icon-person, .tf-action:hover:active .tf-icon-search, .tf-action:hover:active .tf-icon-shopping_bag{ transform: scale(0.88); }
	.tf-action:hover:active .tf-count{ transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce){ .tf-action .tf-icon-person, .tf-action .tf-icon-search, .tf-action .tf-icon-shopping_bag, .tf-action .tf-count{ transition: none; transform: none !important; } }
.tf-wrap{ width: min(1216px, 100% - 48px); margin-inline: auto; }
.tf-filters{ position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.tf-line{ border-top: 1px solid var(--tf-line); }


/* Tipografi */
.tf-h1{ font: 400 60px/60px var(--tf-serif); letter-spacing: -1.5px; color: var(--tf-ivory); }
/* Garis bawah digambar sebagai latar, bukan text-decoration: SplitText memecah huruf menjadi kotak inline-block sehingga text-decoration
   hanya muncul di spasi. Garis menyapu dari kiri setelah judul tampil. */
.tf-h1 em{ color: var(--tf-gold); text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: tfUnderline 700ms 500ms var(--tf-ease-out) both; }
@keyframes tfUnderline{ from{ background-size: 0 1px; } to{ background-size: 100% 1px; } }
.tf-h2{ font: 400 48px/48px var(--tf-serif); color: var(--tf-ink); }
.tf-h2 em{ color: var(--tf-brown); }
.tf-h2-spaced{ margin-top: 26px !important; }
.tf-h2-tight{ margin-top: 10px !important; }
.tf-h3{ font: 400 36px/40px var(--tf-serif); color: var(--tf-ivory); margin-top: 18px !important; }
.tf-h3 em{ color: var(--tf-gold); }
.tf-eyebrow{ font: 600 12px/16px var(--tf-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--tf-brown); padding-left: 15px !important; }
.tf-eyebrow-gold{ color: var(--tf-gold); font-weight: 500; }
.tf-head{ text-align: center; }
.tf-head .tf-eyebrow{ padding-left: 31px !important; }
.tf-lead{ font-size: 16px; line-height: 24px !important; color: var(--tf-brown); }
.tf-small-lead{ font-size: 14px; line-height: 20px !important; color: var(--tf-brown); }

/* Tombol: sapuan template dipertahankan, waktu dirapikan */
.tf-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20.5px; border: 0; border-radius: 4px; background: var(--tf-gold); color: var(--tf-ink) !important; font: 600 14px/20px var(--tf-sans); overflow: hidden; z-index: 0; cursor: pointer; transition: color 200ms ease, transform 160ms var(--tf-ease-out); }
.tf-btn::after{ content: ""; position: absolute; inset: 0; background: var(--tf-ink); transform: translateY(101%); transition: transform 240ms var(--tf-ease-out); z-index: -1; }
.tf-btn:active, .tf-cart:active, .tf-plus:active, .tf-arrow:active{ transform: scale(0.97); }
.tf-btn-light::after{ background: var(--tf-ivory); }
.tf-btn-medium{ font-weight: 500; }
.tf-btn-light{ padding: 0 25.5px; }
.tf-btn-small{ height: 36px; padding: 0 20.5px; font-size: 12px; line-height: 16px; }
.tf-btn-block{ display: flex; width: 100%; }
/* Tombol dengan ikon kereta/keranjang (navbar dan hero): saat hover, fokus keyboard, atau ditekan, label meluncur keluar,
   ikon berjalan ke tengah dan bergoyang. --cart-shift = jarak ikon ke tengah tombol, diatur per bahasa karena lebar label berbeda. */
.tf-btn-shop{ width: 128px; padding: 0; --cart-shift: 1.9em; }
html[lang="en"] .tf-btn-shop{ --cart-shift: 2.5em; }
.tf-btn-hero{ padding: 0 24px; --cart-shift: 4.5em; }
html[lang="en"] .tf-btn-hero{ --cart-shift: 2.7em; }
.tf-fly-btn{ gap: 0.3em; font-size: 14px; }
.tf-fly-btn::after{ display: none; }
.tf-fly-btn .tf-fly .tf-icon-cart{ display: block; width: 1.3em; height: 1.3em; transform-origin: 50% 80%; transition: transform 300ms ease-in-out; }
.tf-fly-btn .tf-btn-label{ display: block; transition: transform 300ms ease-in-out; }
@keyframes tfCart{ from{ transform: translateY(0.05em) rotate(-7deg); } to{ transform: translateY(-0.1em) rotate(2deg); } }
.tf-fly-btn:active .tf-fly-in, .tf-fly-btn:focus-visible .tf-fly-in{ animation: tfCart 420ms ease-in-out infinite alternate; }
.tf-fly-btn:active .tf-fly .tf-icon-cart, .tf-fly-btn:focus-visible .tf-fly .tf-icon-cart{ transform: translateX(var(--cart-shift)) scale(1.15); }
.tf-fly-btn:active .tf-btn-label, .tf-fly-btn:focus-visible .tf-btn-label{ transform: translateX(11em); }
@media (hover: hover) and (pointer: fine){
	.tf-btn.tf-fly-btn:hover{ color: var(--tf-ink) !important; }
	.tf-fly-btn:hover .tf-fly-in{ animation: tfCart 420ms ease-in-out infinite alternate; }
	.tf-fly-btn:hover .tf-fly .tf-icon-cart{ transform: translateX(var(--cart-shift)) scale(1.15); }
	.tf-fly-btn:hover .tf-btn-label{ transform: translateX(11em); }
}

.tf-more{ display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--tf-sans); }
.tf-more .tf-icon{ transition: transform 200ms var(--tf-ease-out); }

/* Kartu, foto, dan hover hanya di perangkat yang mendukung hover */
@media (hover: hover) and (pointer: fine){
	.tf-btn:hover{ color: var(--tf-ivory) !important; }
	.tf-btn:hover::after{ transform: translateY(0); }
	.tf-btn-light:hover{ color: var(--tf-ink) !important; }
	.tf-more:hover .tf-icon, .tf-btn:hover .tf-icon, .tf-pill:hover .tf-icon{ transform: translate(2px, -2px); }
	.tf-nav a:hover{ color: var(--tf-gold); }
	.tf-nav a:hover::after{ transform: scaleX(1); background: var(--tf-gold); }
	.tf-toplinks a:hover, .tf-footer a:hover{ color: var(--tf-gold); }
	.tf-action:hover{ background: #F6F0E51A; }
	.tf-cart:hover, .tf-plus:hover{ background: var(--tf-gold); color: var(--tf-ink); border-color: var(--tf-gold); }
	.tf .gallery-slider .tf-arrow:hover{ background: var(--tf-brown); color: #fff; }
	.tf-feature:hover, .tf-product:hover, .tf-offer:hover{ box-shadow: 0 8px 24px #2B1B1414; }
	.tf-product:hover img, .tf-step:hover img{ transform: scale(1.03); }
}

/* Header */
/* display: contents melepas pembungkus header agar bar utama menempel (sticky) terhadap seluruh halaman, bukan hanya terhadap header. */
.tf-header{ display: contents; }
.tf-topbar{ background: var(--tf-ink); }
html:has(.tf){ scroll-padding-top: 88px; }
.tf-bar{ display: flex; align-items: center; justify-content: space-between; width: min(1184px, 100% - 48px); margin-inline: auto; }
.tf-topbar{ border-bottom: 1px solid #F6F0E524; }
.tf-topbar .tf-bar{ height: 35px; }
.tf-promo{ display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px !important; color: #F6F0E5CC; }
.tf-promo-dot{ width: 6px; height: 6px; border-radius: 3px; background: var(--tf-gold); }
.tf-toplinks{ display: flex; align-items: center; gap: 24px; font-size: 13px; line-height: 20px; color: #F6F0E5CC; }
.tf-toplinks a{ transition: color 150ms ease; }
.tf-toplinks a.is-active{ color: var(--tf-gold); font-weight: 600; }
.tf-mainbar{ position: sticky; top: 0; z-index: 100; background: var(--tf-ink); transition: box-shadow 200ms ease; }
.tf-mainbar.is-stuck{ box-shadow: 0 8px 24px #2B1B1459; }
.tf-mainbar .tf-bar{ height: 80px; }
.tf-logo img{ width: 135px; height: 45px; object-fit: contain; }
.tf-nav ul{ display: flex; gap: 4px; }
.tf-nav a{ position: relative; display: block; padding: 11px 14px 16px; font: 600 14px/17px var(--tf-sans); letter-spacing: 0.28px; color: #F6F0E5CC; border-radius: 8px; transition: color 150ms ease; }
.tf-nav a::after{ content: ""; position: absolute; left: 50%; top: 32px; width: 16px; height: 2px; margin-left: -8px; border-radius: 1px; background: transparent; transform: scaleX(0); transition: transform 200ms var(--tf-ease-out); }
.tf-nav a.is-active{ color: var(--tf-gold); }
.tf-nav a.is-active::after{ background: var(--tf-gold); transform: scaleX(1); }
/* Menu halaman aktif bukan tautan lagi (tanpa href): tidak bisa ditekan dan tanpa efek hover. */
.tf-nav a.is-active, .tf-mobile li a.is-active{ cursor: default; pointer-events: none; }
.tf-actions{ display: flex; align-items: center; gap: 12px; }
.tf-action{ position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--tf-ivory) !important; transition: background 150ms ease; }
button.tf-action{ border: 0; background: transparent; padding: 0; cursor: pointer; }
.tf-account{ position: relative; }
.tf-account-menu{ position: absolute; top: calc(100% + 8px); right: 0; z-index: 110; width: 288px; border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; box-shadow: 0 10px 25px -5px #2B1B1414, 0 8px 10px -6px #2B1B140F; overflow: hidden; transform-origin: top right; animation: tf-account-in 150ms var(--tf-ease-out); }
/* Kepala menu akun: cokelat dengan avatar inisial emas. */
.tf-account-head{ padding: 16px; background: linear-gradient(100deg, var(--tf-ink) 0%, #3A2519 100%); }
.tf .tf-account-head > p{ margin: 0; font: 600 11px/16px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-gold); }
.tf-account-who{ display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.tf-account-avatar{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tf-gold); box-shadow: 0 0 0 3px #C6A15B33; font: 500 16px/1 var(--tf-serif); color: var(--tf-ink); }
.tf .tf-account-menu .tf-account-id{ min-width: 0; margin: 0; padding: 0; border: 0; }
.tf-account-menu .tf-account-id strong, .tf-account-menu .tf-account-id span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-account-menu .tf-account-id strong{ font-size: 14px; color: var(--tf-ivory); }
.tf-account-menu .tf-account-id span{ font-size: 12px; line-height: 18px; color: #F6F0E5B3; }
/* Baris menu: ikon dalam kotak, label, panah. Hover memunculkan garis emas di kiri. */
.tf-account-group{ padding: 6px 0; }
.tf-account-group + .tf-account-group{ border-top: 1px solid var(--tf-line); }
.tf-account-item{ position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 16px; border: 0; background: transparent; font: 500 14px/20px var(--tf-sans); color: var(--tf-ink) !important; text-align: left; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.tf-account-item::before{ content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--tf-gold); opacity: 0; transform: scaleY(0.6); transition: opacity 150ms ease, transform 200ms var(--tf-ease-out); }
.tf-account-ico{ flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #C6A15B1F; color: var(--tf-ink); transition: background-color 150ms ease, color 150ms ease; }
.tf-account-ico .tf-acct-svg{ width: 18px; height: 18px; }
.tf-account-item > .tf-acct-svg{ width: 16px; height: 16px; margin-left: auto; color: #6D4C3D80; transition: transform 200ms var(--tf-ease-out), color 150ms ease; }
.tf-account-item:active{ background: #C6A15B26; }
.tf-account-item:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: -2px; }
.tf-account-item.is-danger .tf-account-ico{ background: #FFDAD6; color: #BA1A1A; }
.tf-account-item.is-danger::before{ background: #BA1A1A; }
.tf-account-item:focus-visible{ background: var(--tf-ivory); }
.tf-account-item:focus-visible::before{ opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine){
	.tf-account-item:hover{ background: var(--tf-ivory); }
	.tf-account-item:hover::before{ opacity: 1; transform: none; }
	.tf-account-item:hover .tf-account-ico{ background: #C6A15B40; }
	.tf-account-item:hover > .tf-acct-svg{ color: var(--tf-ink); transform: translateX(2px); }
	.tf-account-item.is-danger:hover{ background: #FFDAD659; color: #93000A !important; }
	.tf-account-item.is-danger:hover .tf-account-ico{ background: #FFC9C3; }
	.tf-account-item.is-danger:hover > .tf-acct-svg{ color: #93000A; }
}
@media (prefers-reduced-motion: reduce){
	.tf-account-item::before{ transform: none; }
	.tf-account-item:hover > .tf-acct-svg{ transform: none; }
}
@keyframes tf-account-in{ from{ opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce){ .tf-account-menu{ animation: none; } }
.tf .tf-account-id{ display: grid; gap: 2px; margin: 0; padding: 8px 12px 12px; font-size: 14px; line-height: 20px; color: var(--tf-ink); overflow-wrap: anywhere; }
.tf-account-id strong{ font-weight: 600; }
.tf-account-id span{ font-size: 13px; color: var(--tf-brown); }
.tf-mobile .tf-account-id strong{ color: var(--tf-ivory); }
.tf-mobile .tf-account-id span{ color: #F6F0E5B3; }
.tf .tf-account-error{ margin: 8px 0 0; padding: 0 16px; font-size: 13px; line-height: 20px; color: #B3261E; }
.tf-action.is-on{ background: #F6F0E51F; color: var(--tf-gold) !important; }

/* Panel pencarian: turun dari bawah bar utama (kaca gelap, blur, garis emas tipis). Tertutup = tak bisa difokus (inert). */
.tf-search{ position: absolute; top: 100%; left: 0; right: 0; background: #2B1B14F2; border-top: 1px solid #C6A15B40; box-shadow: 0 24px 48px -12px #2B1B1480; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 200ms var(--tf-ease-out), transform 240ms var(--tf-ease-out), visibility 0s linear 240ms; }
@supports (backdrop-filter: blur(1px)){ .tf-search{ background: #2B1B14D9; backdrop-filter: blur(16px) saturate(1.4); } }
.tf-search.is-open{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tf-search-inner{ width: min(760px, 100% - 48px); margin-inline: auto; padding: 24px 0 22px; }
.tf-search-form{ display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border: 1px solid #F6F0E52E; border-radius: 999px; background: #F6F0E514; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.tf-search-form:focus-within{ border-color: var(--tf-gold); background: #F6F0E51F; box-shadow: 0 0 0 4px #C6A15B26; }
.tf-search-field{ flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; color: #F6F0E599; cursor: text; }
.tf-search-field input{ flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: var(--tf-ivory); font: 500 16px/24px var(--tf-sans); }
.tf-search-field input::placeholder{ color: #F6F0E58C; }
.tf-search-field input::-webkit-search-cancel-button{ -webkit-appearance: none; }
.tf-search-form:focus-within .tf-search-field{ color: var(--tf-gold); }
.tf-search-go{ flex: none; height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--tf-gold); color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); cursor: pointer; transition: background 160ms ease, transform 160ms var(--tf-ease-out); }
.tf-search-go:active{ transform: scale(0.97); }
.tf-search-close{ flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #F6F0E5B3; cursor: pointer; transition: background 150ms ease, color 150ms ease; }
.tf-search-hints{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px !important; padding-left: 18px !important; }
.tf-search-hints span{ margin-right: 4px; font: 600 12px/16px var(--tf-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--tf-gold); }
.tf-search-hints a{ display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid #F6F0E52E; border-radius: 999px; color: #F6F0E5D9; font: 500 13px/20px var(--tf-sans); transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.tf-search.is-open .tf-search-hints a{ animation: tfHintIn 320ms var(--tf-ease-out) both; }
.tf-search.is-open .tf-search-hints a:nth-of-type(2){ animation-delay: 40ms; }
.tf-search.is-open .tf-search-hints a:nth-of-type(3){ animation-delay: 80ms; }
.tf-search.is-open .tf-search-hints a:nth-of-type(4){ animation-delay: 120ms; }
.tf-search.is-open .tf-search-hints a:nth-of-type(5){ animation-delay: 160ms; }
@keyframes tfHintIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine){
	.tf-search-go:hover{ background: var(--tf-ivory); }
	.tf-search-close:hover{ background: #F6F0E51F; color: var(--tf-ivory); }
	.tf-search-hints a:hover{ background: var(--tf-gold); border-color: var(--tf-gold); color: var(--tf-ink); }
}
@media (prefers-reduced-motion: reduce){
	.tf-search, .tf-search.is-open{ transition: opacity 120ms linear; transform: none; }
	.tf-search.is-open .tf-search-hints a{ animation: none; }
}
.tf-count{ position: absolute; top: 3px; left: 25px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #BA1A1A; color: #FFFFFF; font: 600 11px/13px var(--tf-sans); }

/* Hero */
.tf-hero{ padding: 56px 0 96px; }
/* Hanya kotak hero yang keluar 64 px ke kiri dan kanan dari kolom 1216 px; kartu di bawahnya tetap selebar kolom */
/* Hanya kotak hero yang keluar 32 px ke kiri dan kanan dari kolom 1216 px; kartu di bawahnya tetap selebar kolom */
.tf-hero-box{ position: relative; margin-inline: max(-32px, calc((100% - 100vw + 48px) / 2)); height: 595px; border-radius: 12px; background: var(--tf-ink); overflow: hidden; box-shadow: 0 25px 50px -12px #2B1B1440; }
.tf-hero-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
/* Video lokal menutupi kotak hero (object-fit: cover); dua video bertumpuk dan bergantian dengan fade pendek */
.tf-hero-video{ position: absolute; inset: 0; isolation: isolate; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.tf-hero-video.is-playing{ opacity: 1; }
.tf-hero-video video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1); }
.tf-hero-video video.is-on{ opacity: 0.3; }
/* Foto hanya cadangan: hilang saat video sudah diputar */
.tf-hero-photo{ transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.tf-hero-box:has(.tf-hero-video.is-playing) .tf-hero-photo{ opacity: 0; }
.tf-hero-shade{ position: absolute; inset: 0; background: linear-gradient(to top, #2B1B14 0%, #2B1B1499 50%, #2B1B1400 100%); }
.tf-hero-content{ position: relative; padding: 88px 64px 0; text-align: center; }
/* Bahasa Indonesia: baris miring "setiap hari dengan cinta" bertabrakan dengan turunan huruf baris di atasnya pada line-height 60px.
   Jarak antarbaris dilebarkan dan blok digeser naik agar baris ketiga tetap di tempat; paragraf hanya turun 10 px. */
html[lang="id"] .tf-h1{ line-height: 70px; }
html[lang="id"] .tf-hero-content{ padding-top: 68px; }
.tf-hero-text{ width: min(576px, 100%); margin: 24px auto 0 !important; font-size: 16px; line-height: 24px !important; color: var(--tf-ivory); }
.tf-hero-actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
/* Tautan TikTok: tombol gaya coretan tangan. Filter SVG (#handDrawnNoise*, ada di Home.vue) membuat tepi bergetar; saat hover, stabilo
   menyapu teks dengan warna TikTok (cyan #25F4EE), saat ditekan berganti merah muda TikTok (#FE2C55). */
.tf-tiktok{ --tt-cyan: #25F4EE; --tt-pink: #FE2C55; position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0.7em 1.2em 0.7em 3em; border: 0; border-radius: 2rem; background: transparent; color: var(--tf-ivory) !important; font: 700 1rem/1.4 "Courier New", Courier, monospace; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; user-select: none; filter: url(#handDrawnNoise); box-shadow: rgba(246, 240, 229, 0.35) 4px 4px 0 1px; transition: rotate 0.3s ease-in-out, box-shadow 0.3s ease-in-out; animation: tfIdle 1s infinite ease-in-out; top: -8px; left: 16px;}
.tf-tiktok > span{ position: relative; z-index: 1; }
.tf-hero-box.is-away .tf-tiktok{ animation-play-state: paused; }
.tf-tiktok-hl{ position: absolute; inset: 0; width: 100%; height: 100%; fill: color-mix(in srgb, var(--tt-cyan) 50%, transparent); stroke: color-mix(in srgb, var(--tt-cyan) 50%, transparent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; pointer-events: none; transition: stroke-dashoffset 0.5s ease-in-out; }
.tf-tiktok-cosm{ position: absolute; left: 0.9em; top: 50%; width: 1.7em; height: 1.7em; translate: 0 -50%; fill: rgba(246, 240, 229, 0.5); transition: fill 0.3s ease-out, rotate 0.3s ease-out; }
@keyframes tfIdle{ 0%{ filter: url(#handDrawnNoise); } 50%{ rotate: 2.5deg; filter: url(#handDrawnNoise2); } 100%{ filter: url(#handDrawnNoise); } }
@keyframes tfHover{
	0%{ rotate: 0deg; filter: url(#handDrawnNoise); translate: 0 0; }
	25%{ rotate: -1deg; filter: url(#handDrawnNoise2); translate: 0 -2px; }
	50%{ rotate: 0deg; filter: url(#handDrawnNoise); translate: 0 2px; }
	75%{ rotate: -1deg; filter: url(#handDrawnNoise2); translate: 0 -2px; }
	100%{ rotate: 0deg; filter: url(#handDrawnNoise); translate: 0 0; }
}
@keyframes tfActive{
	0%{ filter: url(#handDrawnNoiset); translate: 0 -1px; }
	25%{ rotate: -3deg; }
	50%{ filter: url(#handDrawnNoiset2); translate: 0 1px; }
	66%{ rotate: 1.5deg; }
	100%{ filter: url(#handDrawnNoiset); translate: 0 -1px; }
}
@keyframes tfHighlight{ 0%{ stroke-dashoffset: 0; } 25%{ stroke-dashoffset: 1000; } 50%{ stroke-dashoffset: 1000; } 100%{ stroke-dashoffset: 0; } }
@keyframes tfCol{ 0%{ stroke: color-mix(in srgb, var(--tt-cyan) 50%, transparent); } 100%{ stroke: color-mix(in srgb, var(--tt-pink) 60%, transparent); } }
.tf-tiktok:focus-visible{ outline: 2px solid var(--tt-cyan); outline-offset: 4px; rotate: -2.5deg; animation: tfHover 2.5s infinite ease-in-out; }
.tf-tiktok:focus-visible .tf-tiktok-hl{ stroke-dashoffset: 0; }
.tf-tiktok:focus-visible .tf-tiktok-cosm{ fill: var(--tt-cyan); rotate: -15deg; }
.tf-tiktok:active{ rotate: -2.5deg; box-shadow: inset rgba(246, 240, 229, 0.55) 4px 4px 0 1px; animation: tfActive 1s infinite ease-in-out; }
.tf-tiktok:active .tf-tiktok-hl{ stroke-dashoffset: 1000; stroke: color-mix(in srgb, var(--tt-pink) 60%, transparent); animation: tfHighlight 5s infinite, tfCol 0.5s forwards; }
.tf-tiktok:active .tf-tiktok-cosm{ fill: var(--tt-pink); rotate: -135deg; animation: none; }
@media (hover: hover) and (pointer: fine){
	.tf-tiktok:hover{ rotate: -2.5deg; animation: tfHover 2.5s infinite ease-in-out; }
	.tf-tiktok:hover .tf-tiktok-hl{ stroke-dashoffset: 0; }
	.tf-tiktok:hover .tf-tiktok-cosm{ fill: var(--tt-cyan); rotate: -15deg; }
	.tf-tiktok:active:hover{ animation: tfActive 1s infinite ease-in-out; }
	.tf-tiktok:active:hover .tf-tiktok-hl{ stroke-dashoffset: 1000; }
	.tf-tiktok:active:hover .tf-tiktok-cosm{ fill: var(--tt-pink); rotate: -135deg; }
}
/* Gerak terus-menerus dimatikan total (bukan dipercepat) bagi pengguna yang meminta gerak dikurangi */
@media (prefers-reduced-motion: reduce){
	.tf-tiktok, .tf-tiktok:hover, .tf-tiktok:active, .tf-tiktok:focus-visible{ animation: none !important; filter: none; rotate: none; }
	.tf-tiktok:active .tf-tiktok-hl{ animation: none !important; stroke-dashoffset: 0; }
	.tf-fly-in{ animation: none !important; }
}
.tf-hero-list{ display: flex; flex-wrap: wrap; justify-content: center; gap: 37px; margin-top: 32px !important; padding-top: 40px !important; border-top: 1px solid var(--tf-line); }
.tf-hero-list li{ display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--tf-ivory); }
.tf-hero-list li::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C6A15B33; }
.tf-hero-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.tf-hero-cards > article{ position: relative; height: 244px; border: 1px solid var(--tf-line); border-radius: 8px; overflow: hidden; }
.tf-card-video{ background: #fff; }
.tf-card-video > img{ width: 100%; height: 100%; object-fit: cover; }
.tf-card-video-shade{ position: absolute; inset: 0; background: linear-gradient(to top, #2B1B14CC 0%, #2B1B144D 50%, #2B1B1400 100%); }
.tf-pill{ position: absolute; top: 17px; right: 17px; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; border: 1px solid var(--tf-line); border-radius: 999px; background: #fff; color: var(--tf-ink) !important; font-size: 12px; line-height: 16px; z-index: 2; }
.tf-pill .tf-icon{ transition: transform 200ms var(--tf-ease-out); }
.tf-card-video-text{ position: absolute; left: 17px; bottom: 16px; color: var(--tf-ivory); }
.tf-card-video-text p{ font: 600 12px/16px var(--tf-sans); letter-spacing: 1.2px; text-transform: uppercase; }
.tf-card-video-text h2{ font: 700 18px/28px var(--tf-sans); }
/* Kartu ulasan Google (tema Backeri: foto latar, kutipan, kotak kaca "Google Rating"). Dua ulasan bergantian tiap 6 detik. */
.tf-card-rate{ background: var(--tf-ink); color: var(--tf-ivory); }
.tf-card-rate-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tf-card-rate .tf-card-video-shade{ background: linear-gradient(to bottom, #2B1B14B3 0%, #2B1B1480 55%, #2B1B1459 100%); }
.tf-card-rate-quotes{ position: absolute; top: 16px; left: 20px; right: 20px; display: grid; }
.tf-card-rate-quote{ grid-area: 1 / 1; margin: 0; color: var(--tf-ivory); text-shadow: 0 1px 8px #2B1B1480; opacity: 0; animation: tfRev 18s infinite; animation-delay: calc(var(--i) * 6s); }
.tf-card-rate-quote blockquote{ margin: 0; font: 600 13px/18px var(--tf-sans); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.tf-card-rate-quote figcaption{ margin-top: 4px; font: 500 12px/16px var(--tf-sans); color: var(--tf-gold); }
@keyframes tfRev{ 0%{ opacity: 0; transform: translateY(6px); } 3%, 30%{ opacity: 1; transform: none; } 33.3%, 100%{ opacity: 0; } }
.tf-rate-box{ position: absolute; right: 16px; bottom: 16px; width: 214px; padding: 12px 14px; border: 1px solid #F6F0E52E; border-radius: 10px; background: #F6F0E524; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.tf-rate-head{ display: flex; align-items: center; gap: 10px; }
.tf-rate-head img{ flex: none; width: 32px; height: 32px; }
.tf-rate-head p{ font: 500 14px/18px var(--tf-sans); color: var(--tf-ivory); }
.tf-rate-stars{ display: flex; align-items: center; gap: 6px; margin-top: 2px !important; }
.tf-rate-stars strong{ font-weight: 700; }
.tf-stars{ display: flex; gap: 1px; color: var(--tf-gold); }
.tf-rate-foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.tf-rate-count{ font: 600 12px/16px var(--tf-sans); color: var(--tf-ivory); }
@media (prefers-reduced-motion: reduce){
	.tf-card-rate-quote{ animation: none; }
	.tf-card-rate-quote:first-child{ opacity: 1; }
}
.tf-faces{ display: flex; }
.tf-faces span{ display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; background: var(--tf-gold); color: var(--tf-ink); font: 700 11px/15px var(--tf-sans); box-shadow: 0 0 0 2px #C6A15B66; }
.tf-faces .is-dark{ background: var(--tf-ink); color: var(--tf-ivory); }
.tf-card-hours{ display: flex; flex-direction: column; padding: 24px; background: #fff; color: var(--tf-brown); }
.tf-card-hours-head{ display: flex; align-items: center; justify-content: space-between; color: var(--tf-brown); }
.tf-card-hours h2{ font: 700 18px/28px var(--tf-sans); color: var(--tf-ink); }
.tf-card-hours ul{ margin-top: 16px !important; }
.tf-card-hours li{ display: flex; justify-content: space-between; height: 27px; margin-bottom: 8px; font-size: 14px; line-height: 20px; border-bottom: 1px solid var(--tf-line); }
.tf-card-hours li span:first-child{ font-weight: 500; }
.tf-card-hours li:last-child{ height: 20px; border: 0; }
.tf-card-hours strong{ font-weight: 600; }
.tf-card-hours .tf-btn{ margin-top: auto; }

/* About */
.tf-about{ padding: 102px 0 95px; }
.tf-about-top{ display: grid; grid-template-columns: 584px 584px; justify-content: space-between; }
.tf-about-copy .tf-lead{ margin-top: 24px !important; }
.tf-checks{ display: flex; flex-wrap: wrap; gap: 12px 103px; margin-top: 32px !important; }
.tf-checks li{ display: flex; align-items: center; gap: 8px; font: 500 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-checks span{ display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #C6A15B1F; color: var(--tf-brown); }
.tf-about-copy .tf-btn{ margin-top: 40px; }
.tf-about-images{ position: relative; display: grid; grid-template-columns: 284px 284px; gap: 16px; align-items: start; padding-top: 49px; }
/* Garis tipis agar foto berlatar putih tidak menyatu dengan latar ivory halaman */
.tf-about-images figure{ height: 355px; border: 2px solid color-mix(in srgb, var(--tf-gold) 45%, var(--tf-line)); border-radius: 8px; overflow: hidden; }
.tf-about-images figure + figure{ margin-top: 32px; }
.tf-about-images img{ width: 100%; height: 100%; object-fit: cover; }
.tf-years{ position: absolute; left: 236px; top: 186px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 112px; border: 4px solid var(--tf-line); border-radius: 50%; background: var(--tf-ink); color: var(--tf-ivory); box-shadow: 0 25px 50px -12px #2B1B1440; text-align: center; z-index: 2; }
.tf-years strong{ font: 600 24px/24px var(--tf-serif); }
.tf-years > span:lang(id), :lang(id) .tf-years > span{ font-size: 10px; letter-spacing: 0.2px; }
.tf-years > span{ margin-top: 3px; font: 600 11px/13.5px var(--tf-sans); letter-spacing: 0.45px; text-transform: uppercase; }
.tf-about-list{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px !important; padding-top: 49px !important; border-top: 1px solid var(--tf-line); }
.tf-about-list li{ display: flex; gap: 16px; }
.tf-square{ display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; color: var(--tf-brown); }
.tf-about-list h3, .tf-why-list h3{ font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); }
.tf-about-list p{ max-width: 318px; margin-top: 4px !important; font-size: 12px; line-height: 16px !important; }

/* Services */
.tf-services{ padding: 102px 0 96px; }
.tf-services-head{ display: flex; justify-content: space-between; align-items: flex-end; }
.tf-services-head > p{ width: 448px; }
.tf-service-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.tf-service{ display: flex; flex-direction: column; height: 288px; padding: 34px 28px 28px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; color: var(--tf-brown); transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.tf-service-num{ font-size: 12px; line-height: 16px; }
.tf-service h3{ margin-top: 10px !important; font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); transition: color 200ms ease; }
.tf-service p{ margin-top: 12px !important; font-size: 12px; line-height: 16px !important; }
.tf-service .tf-more{ margin-top: auto; }
.tf-service.is-active{ background: var(--tf-ink); border-color: var(--tf-ink); color: var(--tf-gold); }
.tf-service.is-active h3{ color: var(--tf-ivory); }
/* Banner pesan online: kartu putih (surface) berborder color-border, radius 8px (rounded-lg), badge status pill, tombol panah color-primary radius 4px. Warna sukses dari token status DS 2.3. */
.tf-free{ display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin: 32px auto 0; padding: 8px 10px 8px 10px; border: 1px solid var(--tf-line); border-radius: 9999px; background: #fff; color: var(--tf-ink); transition: box-shadow 200ms ease, border-color 200ms ease, transform 160ms var(--tf-ease-out); }
.tf-free:active{ transform: scale(0.99); }
.tf-free:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
/* Badge "Online" bergaya neon-outline (Uiverse adamgiebl), warna hijau sukses DS agar kontras di latar putih. Glow tipis statis; hanya kilau (::after) yang bergerak pelan lewat transform, jadi ringan. */
.tf-free-tag{ --green: #2E6B3E; position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 12px; overflow: hidden; border: 1.5px solid var(--green); border-radius: 13px; background: var(--green); color: #fff; font: 600 11px/14px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 4px 1px rgba(46, 107, 62, 0.18); }
.tf-free-tag::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tf-free-tag::after{ content: ""; position: absolute; top: 0; left: -2.5em; width: 2.5em; height: 100%; background: linear-gradient(to right, transparent 1%, rgba(255, 255, 255, 0.22) 40%, rgba(255, 255, 255, 0.22) 60%, transparent 100%); transform: translateX(0); animation: tfTagShine 5s ease-in-out infinite; pointer-events: none; }
@keyframes tfTagShine{ 0%{ transform: translateX(0); } 55%, 100%{ transform: translateX(600%); } }
@media (prefers-reduced-motion: reduce){ .tf-free-tag::after{ animation: none; } }
.tf-free-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.tf-free-body strong{ font: 500 19px/24px var(--tf-serif); color: var(--tf-ink); }
.tf-free-body small{ font: 400 12px/16px var(--tf-sans); color: var(--tf-brown); }
.tf-free-go{ display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--tf-ink); color: var(--tf-ivory); transition: background-color 150ms ease, color 150ms ease; }
.tf-free-go .tf-icon{ transition: transform 200ms var(--tf-ease-out); }
@media (hover: hover) and (pointer: fine){
	.tf-free:hover{ box-shadow: 0 8px 24px -4px rgba(43, 27, 20, 0.06); border-color: var(--tf-gold); }
	.tf-free:hover .tf-free-go{ background: var(--tf-gold); color: var(--tf-ink); }
	.tf-free:hover .tf-free-go .tf-icon{ transform: translate(2px, -2px); }
}
.tf-free:active .tf-free-go .tf-icon{ transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce){ .tf-free, .tf-free-go, .tf-free-go .tf-icon{ transition: none; } .tf-free:active{ transform: none; } }
.tf-trail a{ font-weight: 600; text-decoration: underline !important; text-underline-offset: 2px; }

/* Why */
.tf-why{ padding: 96px 0; }
.tf-why-grid{ display: grid; grid-template-columns: 584px 584px; justify-content: space-between; align-items: center; }
.tf-why-copy{ padding-top: 4px; }
.tf-why-copy .tf-small-lead{ margin-top: 24px !important; }
.tf-why-list{ margin-top: 36px !important; }
.tf-why-list li{ display: flex; gap: 16px; }
.tf-why-list li + li{ margin-top: 20px; }
.tf-round{ display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tf-ivory); color: var(--tf-brown); }
.tf-why-list p{ margin-top: 2px !important; font-size: 12px; line-height: 16px !important; }
.tf-why-images{ display: grid; grid-template-columns: 284px 284px; gap: 16px; }
.tf-why-images figure{ height: 379px; border-radius: 8px; overflow: hidden; }
.tf-why-images img{ width: 100%; height: 100%; object-fit: cover; }
.tf-help{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 66px; padding: 8px 12px; margin-top: 16px; border-radius: 8px; background: var(--tf-ink); color: var(--tf-ivory) !important; font-size: 12px; line-height: 18px; }
.tf-why-col-b{ padding-top: 24px; }
.tf-trusted{ min-height: 102px; padding-bottom: 14px !important; margin-bottom: 16px; padding: 18px 17px 0; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; }
.tf-trusted .tf-stars{ color: var(--tf-brown); gap: 2px; }
.tf-trusted p{ margin-top: 2px !important; font: 700 12px/16px var(--tf-sans); color: var(--tf-ink); }
.tf-dots{ display: flex; margin-top: 8px; }
.tf-dots span{ display: grid; place-items: center; width: 24px; height: 24px; margin-right: -4px; border-radius: 50%; background: #C6A15B33; box-shadow: 0 0 0 1px #C6A15B66; color: var(--tf-ivory); font: 700 11px/14px var(--tf-sans); }
.tf-dots .is-dark{ background: var(--tf-ink); }

/* Features */
.tf-features{ padding: 96px 0 95px; }
.tf-features-grid{ display: grid; grid-template-columns: 493px 699px; justify-content: space-between; }
.tf-features-card{ display: flex; flex-direction: column; align-items: flex-start; min-height: 433px; padding: 46px 40px 40px; border-radius: 8px; background: var(--tf-ink); color: var(--tf-ivory); }
.tf-features-card .tf-small-lead{ margin-top: 16px !important; color: var(--tf-ivory); }
.tf-features-card .tf-btn{ margin-top: auto; }
.tf-feature-list{ display: grid; grid-template-columns: repeat(2, 342px); justify-content: space-between; gap: 16px 15px; }
.tf-feature{ min-height: 209px; padding: 24px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; text-align: center; transition: box-shadow 200ms ease; }
.tf-round-lg{ width: 48px; height: 48px; margin: 0 auto; }
.tf-feature h3{ margin-top: 16px !important; font: 700 18px/28px var(--tf-sans); color: var(--tf-ink); }
.tf-feature p{ margin-top: 8px !important; font-size: 12px; line-height: 19.5px !important; }

/* Products */
.tf-products{ padding: 102px 0 97px; }
.tf-product-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.tf-product{ display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; text-align: center; transition: box-shadow 200ms ease; }
.tf-product figure{ position: relative; width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--tf-ivory); overflow: hidden; }
.tf-product img{ width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--tf-ease-out); }
.tf-tag{ position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--tf-ink); color: var(--tf-ivory); font: 700 11px/14px var(--tf-sans); z-index: 2; }
.tf-product-num{ margin-top: 18px; font-size: 12px; line-height: 16px; }
.tf-product h3{ margin-top: 4px !important; font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); }
.tf-rate{ display: flex; align-items: center; gap: 4px; margin-top: 3px !important; font-size: 11px; line-height: 16.5px !important; }
.tf-rate strong{ margin-left: 2px; font-weight: 700; }
.tf-rate span{ margin: 0 2px; }
.tf-price{ margin-top: 4px !important; font: 700 12px/16px var(--tf-sans); }
.tf-cart{ display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 30px; margin-top: 13px; border: 1px solid var(--tf-line); border-radius: 4px; background: var(--tf-ivory); font: 600 12px/16px var(--tf-sans); transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-trail{ margin-top: 39px !important; font-size: 12px; line-height: 16px !important; text-align: center; }
.tf-trail a{ margin-left: 2px; }

/* How */
.tf-how{ padding: 102px 0 96px; background: var(--tf-ink); }
.tf-how .tf-h2{ color: var(--tf-ivory); }
.tf-how .tf-h2 em{ color: var(--tf-gold); }
.tf-head-how .tf-eyebrow{ padding-left: 31px !important; }
.tf-how-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; margin-top: 56px; }
.tf-how-card{ min-height: 254px; padding: 24px; border: 1px solid var(--tf-line); border-radius: 8px; background: #F6F0E50D; color: var(--tf-ivory); }
.tf-how-card h3{ font: 700 18px/28px var(--tf-sans); }
.tf-how-card p{ margin-top: 8px !important; font-size: 12px; line-height: 16px !important; }
.tf-how-card ul{ margin-top: 16px !important; font-size: 12px; line-height: 16px; color: var(--tf-gold); }
.tf-how-card li + li{ margin-top: 4px; }
.tf-how-card .tf-btn{ height: 32px; margin-top: 24px; }
.tf-step{ height: 220px; border: 1px solid var(--tf-line); border-radius: 8px; overflow: hidden; }
.tf-step img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--tf-ease-out); }
.tf-step div{ position: absolute; inset: 0; padding: 24px; background: #2B1B1499; color: var(--tf-ivory); z-index: 1; }
.tf-step span{ display: block; font: 700 12px/16px var(--tf-sans); color: var(--tf-gold); }
.tf-step h3{ font: 700 16px/24px var(--tf-sans); }
.tf-step p{ margin-top: 4px !important; font-size: 12px; line-height: 16px !important; }

/* Offers */
.tf-offers{ padding: 102px 0 96px; }
.tf-offer-grid{ display: grid; grid-template-columns: repeat(3, 384px); justify-content: space-between; align-items: center; margin-top: 64px; }
.tf-offer-col{ display: flex; flex-direction: column; gap: 32px; }
.tf-offer-col.is-right{ order: 3; }
.tf-offer{ display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; transition: box-shadow 200ms ease; }
.tf-offer figure{ flex: none; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; }
.tf-offer img{ width: 100%; height: 100%; object-fit: cover; }
.tf-offer-body{ flex: 1; min-width: 0; }
.tf-offer h3{ font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); }
.tf-offer p{ max-width: 225px; font-size: 12px; line-height: 16px !important; }
.tf-offer-body div{ display: flex; align-items: center; gap: 6px; margin-top: 4.5px; }
.tf-offer strong{ font: 700 12px/16px var(--tf-sans); }
.tf-badge{ display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 2px 8px 2px 6px; white-space: nowrap; border-radius: 999px; background: var(--tf-ivory); font: 500 10px/15px var(--tf-sans); }
.tf-plus{ margin-left: -6px; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tf-ivory); font: 700 14px/20px var(--tf-sans); transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-best{ order: 2; display: flex; flex-direction: column; align-items: center; height: 460px; padding-top: 32px; border: 2px dashed var(--tf-line); border-radius: 8px; text-align: center; }
.tf-best h3{ font: 400 30px/36px var(--tf-serif); color: var(--tf-ink); }
.tf-best p{ margin-top: 4px !important; font-size: 12px; line-height: 16px !important; }
.tf-best .tf-more{ margin-top: 12px; }
.tf-best figure{ width: 208px; height: 208px; margin-top: 43px; border-radius: 50%; overflow: hidden; }
.tf-best img{ width: 100%; height: 100%; object-fit: cover; }
.tf-best > span{ margin-top: 40px; font: 600 11px/16.5px var(--tf-sans); letter-spacing: 1.1px; text-transform: uppercase; }

/* Gallery */
.tf-gallery{ padding: 102px 0 96px; }
.tf-head-gallery{ margin-bottom: 48px; }
.tf-slider{ position: relative; }
.tf-slider .swiper{ overflow: hidden; }
.tf-slider figure{ height: 389px; border-radius: 8px; overflow: hidden; }
.tf-slider img{ width: 100%; height: 100%; object-fit: cover; }
.tf .gallery-slider .tf-arrow{ position: absolute; top: 195px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; transform: none; border: 1px solid var(--tf-brown); border-radius: 50%; background: #fff; color: var(--tf-brown); font: 700 12px/16px var(--tf-sans); cursor: pointer; z-index: 3; transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--tf-ease-out); }
/* Carousel tim (Tentang Kami): slide aktif terang dan penuh, sisanya redup dan sedikit mengecil; transisi ease-out, hanya transform/opacity. */
.tf-team{ position: relative; margin-top: 48px; }
.tf-team .swiper{ overflow: hidden; padding: 4px 0; }
.tf-team .swiper-slide{ opacity: 0.55; transform: scale(0.97); transition: opacity 400ms var(--tf-ease-out), transform 400ms var(--tf-ease-out); }
.tf-team .swiper-slide-active, .tf-team .swiper-slide-next{ opacity: 1; transform: none; }
.tf-team figure{ aspect-ratio: 3 / 2; margin: 0; border: 1px solid color-mix(in srgb, var(--tf-gold) 45%, var(--tf-line)); border-radius: 8px; overflow: hidden; background: var(--tf-line); box-shadow: 0 16px 32px -16px #2B1B1440; }
.tf-team img{ width: 100%; height: 100%; object-fit: cover; user-select: none; }
.tf-team-bar{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.tf-team-count{ margin-right: auto; font: 500 13px/16px var(--tf-sans); letter-spacing: 0.1em; color: var(--tf-brown); font-variant-numeric: tabular-nums; }
.tf-team-count b{ font: 400 24px/24px var(--tf-serif); letter-spacing: 0; color: var(--tf-ink); }
.tf-team-btn{ display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--tf-brown); border-radius: 50%; background: #fff; color: var(--tf-brown); font: 700 14px/16px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-team-btn:active{ transform: scale(0.95); }
.tf-team-btn:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; }
.tf-team-toggle .is-play, .tf-team.is-paused .tf-team-toggle .is-pause{ display: none; }
.tf-team.is-paused .tf-team-toggle .is-play{ display: block; }
@media (hover: hover) and (pointer: fine){
	.tf-team-btn:hover{ background: var(--tf-brown); color: #fff; }
}
@media (max-width: 767px){
	.tf-team .swiper-slide-next{ opacity: 0.55; transform: scale(0.97); }
	.tf-team-bar{ margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce){
	.tf-team .swiper-slide, .tf-team-btn{ transition: none; }
}
.tf .tf-arrow::before, .tf .tf-arrow::after{ content: none !important; }
.tf .gallery-slider .tf-arrow.is-prev{ left: -12px; right: auto; }
.tf .gallery-slider .tf-arrow.is-next{ right: -12px; left: auto; }
.tf .gallery-slider .tf-arrow:active{ transform: scale(0.97); }

/* Testimonials */
.tf-testimonials{ padding: 96px 0; background: var(--tf-ink); color: var(--tf-ivory); }
.tf-testimonials-copy{ padding-top: 6px; }
.tf-testimonials-grid{ display: grid; grid-template-columns: 620px 540px; justify-content: space-between; align-items: center; }
.tf-testimonials .tf-h2{ color: var(--tf-ivory); }
.tf-testimonials .tf-h2 em{ color: var(--tf-gold); }
.tf-testimonials blockquote{ margin-top: 32px !important; padding-left: 25px !important; border-left: 1px solid var(--tf-gold); }
.tf-testimonials blockquote p{ font-size: 16px; font-style: italic; line-height: 24px !important; }
.tf-testimonials footer{ display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.tf-testimonials footer img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #C6A15B66; }
.tf-testimonials footer strong{ display: block; font: 700 14px/17.5px var(--tf-sans); }
.tf-testimonials footer span{ display: block; font-size: 12px; line-height: 16px; color: var(--tf-line); }
.tf-stats{ display: grid; grid-template-columns: repeat(3, 238px); margin-top: 32px !important; padding-top: 24px !important; border-top: 1px solid var(--tf-line); }
.tf-stats div{ display: flex; align-items: center; gap: 8px; color: var(--tf-gold); }
.tf-stats strong{ font: 400 30px/36px var(--tf-serif); }
.tf-stats li:nth-child(1) .tf-icon{ margin: 0 -6px; }
.tf-stats li:nth-child(2) .tf-icon{ margin: 0 -3px 0 -2px; }
.tf-stats li:nth-child(3) .tf-icon{ margin: 0 3px; }
.tf-stats li > span{ display: block; margin-top: 3px; font-size: 11px; line-height: 16.5px; color: var(--tf-line); }
/* Foto testimoni landscape (1390x1024): bingkai mengikuti rasio foto agar tidak terpotong */
.tf-host{ aspect-ratio: 1390 / 1024; border: 1px solid var(--tf-line); border-radius: 8px; overflow: hidden; box-shadow: 0 25px 50px -12px #2B1B1440; }
.tf-host > img{ width: 100%; height: 100%; object-fit: cover; }
.tf-host-card{ position: absolute; left: 23px; right: 23px; bottom: 23px; height: 74px; padding-top: 16px; border: 1px solid var(--tf-line); border-radius: 8px; background: var(--tf-ink); text-align: center; z-index: 2; }
.tf-host-card p{ font: 500 12px/16px var(--tf-sans); }
.tf-host-card a{ display: block; margin-top: 4px; font: 700 14px/20px var(--tf-sans); color: var(--tf-gold) !important; }

/* Blog */
.tf-blog{ padding: 102px 0 96px; }
.tf-blog-text{ width: min(448px, 100%); margin: 16px auto 0 !important; font-size: 12px; line-height: 16px !important; }

/* Trust */
.tf-trust{ padding: 32px 0; }
.tf-trust ul{ margin-inline: auto !important; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; }
.tf-trust li{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.tf-trust li > div{ min-width: 0; }
.tf-trust li > span{ display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tf-ink); color: var(--tf-ivory); }
.tf-trust h3{ font: 700 12px/16px var(--tf-sans); letter-spacing: 0.3px; text-transform: uppercase; color: var(--tf-ink); }
.tf-trust p{ margin-top: 2px !important; font-size: 11px; line-height: 16.5px !important; }

/* Footer */

/* Masuk saat scroll: mesin WOW template; gerak pendek dan lambat agar lembut */
@keyframes tfRise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
.tf .wow.fadeInUp.animated{ animation-name: tfRise !important; animation-duration: 900ms !important; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; }

/* Gelombang pembuka footer: hanya transform dan opacity yang dianimasikan (jalan di compositor), tanpa filter blur.
   Cahaya emas adalah gradien statis di belakang gelombang; gelombang belakang dan depan bergeser pelan berlawanan arah. */
.tf-footer-wave{ position: relative; height: 150px; overflow: hidden; background: var(--tf-ivory); contain: paint; }
.tf-glow{ position: absolute; inset: 0; background:
	radial-gradient(38% 80% at 50% 100%, #C6A15B80 0%, #C6A15B00 100%),
	radial-gradient(30% 70% at 14% 100%, #D9A27A59 0%, #D9A27A00 100%),
	radial-gradient(30% 70% at 86% 100%, #D9A27A59 0%, #D9A27A00 100%); animation: tfGlow 7s ease-in-out infinite alternate; }
.tf-wave{ position: absolute; left: 0; bottom: -1px; width: 200%; height: 100%; will-change: transform; }
.tf-wave-b{ fill: #5A3E30; opacity: 0.55; animation: tfWave 46s linear infinite reverse; }
.tf-wave-a{ fill: var(--tf-ink); animation: tfWave 30s linear infinite; }
.tf-wave-edge{ fill: none; stroke: var(--tf-gold); stroke-width: 2; opacity: 0.6; }
.tf-footer-wave.is-paused .tf-wave, .tf-footer-wave.is-paused .tf-glow{ animation-play-state: paused; }
@keyframes tfWave{ from{ transform: translate3d(0, 0, 0); } to{ transform: translate3d(-50%, 0, 0); } }
@keyframes tfGlow{ from{ opacity: 0.55; } to{ opacity: 1; } }
@media (max-width: 767px){ .tf-footer-wave{ height: 90px; } }

/* Footer: tata letak editorial minimal (merek di kiri, empat kolom tautan di kanan, logo besar di dasar) */
.tf-footer{ padding: 0; background: var(--tf-ink); color: var(--tf-ivory); font-size: 14px; line-height: 22px; overflow: hidden; }
.tf-footer-grid{ padding-top: 48px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.tf-footer-brand{ display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding-bottom: 40px; }
.tf-footer-brand img{ display: block; width: 120px; height: 40px; object-fit: contain; object-position: left; }
.tf-footer-brand p{ max-width: 300px; margin-top: 16px !important; color: #A59B91; }
.tf-footer-fine p{ margin-top: 0 !important; max-width: none; font-size: 12px; line-height: 18px; color: #A59B91; }
.tf-footer-fine div{ display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12px; line-height: 18px; }
.tf-footer-cols{ display: grid; grid-template-columns: 0.9fr 0.8fr 1.7fr 0.8fr; gap: 32px; }
.tf-footer-col h3{ font: 400 12px/18px var(--tf-sans); color: #A59B91; }
.tf-footer-col ul{ margin-top: 16px !important; }
.tf-footer-col li + li{ margin-top: 10px; }
.tf-footer-col a{ transition: color 150ms ease; }
.tf-footer-col li > a svg{ flex: none; width: 18px; height: 18px; }
.tf-footer-col li > a:has(svg){ display: inline-flex; align-items: center; gap: 10px; }
.tf-footer-address{ max-width: 260px; }
.tf-footer-mark{ display: block; width: 100%; height: auto; margin-top: 64px; user-select: none; pointer-events: none; }
@media (max-width: 991px){
	.tf-footer-grid{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.tf-footer-brand{ padding-bottom: 0; gap: 32px; }
	.tf-footer-brand .tf-footer-fine{ order: 2; }
	.tf-footer-main{ order: 1; }
	.tf-footer-brand{ display: contents; }
	.tf-footer-brand > div:first-child{ order: 0; }
	.tf-footer-fine{ order: 3; padding-bottom: 24px; }
	.tf-footer-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
	.tf-footer-mark{ margin-top: 40px; }
}

/* Loader perpindahan halaman: hanya opacity dan transform yang dianimasikan. Saat tersembunyi animasinya dijeda agar tidak memakai CPU. */
.tf-page-loader{ position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: var(--tf-ink); color: var(--tf-gold); opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
html.tf-page-nav .tf-page-loader{ opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
.tf-page-loader-word{ display: flex; overflow: hidden; }
.tf-page-loader span{ display: block; transform: translateY(64px); animation: tfHideAndSeek 1s cubic-bezier(0.86, 0, 0.07, 1) infinite alternate paused; }
html.tf-page-nav .tf-page-loader span{ animation-play-state: running; }
.tf-page-loader span:nth-child(2){ animation-delay: 70ms; }
.tf-page-loader span:nth-child(3){ animation-delay: 140ms; }
.tf-page-loader span:nth-child(4){ animation-delay: 210ms; }
.tf-page-loader span:nth-child(5){ animation-delay: 280ms; }
.tf-page-loader span:nth-child(6){ animation-delay: 350ms; }
.tf-page-loader span:nth-child(7){ animation-delay: 420ms; }
.tf-page-loader svg{ display: block; width: auto; height: 40px; }
.tf-page-loader-i{ margin-inline: 5px; }
@keyframes tfHideAndSeek{ from{ transform: translateY(64px); } to{ transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
	.tf-page-loader span{ animation: none !important; transform: none; }
}

/* Menu mobile: hamburger, keranjang, dan panel penuh. Hanya transform dan opacity yang dianimasikan pada panel. */
.tf-mobile-actions, .tf-mobile{ display: none; }
.tf-burger{ display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.tf-burger svg{ width: 32px; height: 32px; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.tf-burger-line{ fill: none; stroke: var(--tf-ivory); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.tf-burger-ends{ stroke-dasharray: 12 63; }
.tf-burger.is-open svg{ transform: rotate(-45deg); }
.tf-burger.is-open .tf-burger-ends{ stroke-dasharray: 20 300; stroke-dashoffset: -32.42; }
/* Kunci gulir hanya di html. Bila body ikut overflow: hidden, body menjadi penampung gulir sendiri sehingga bar utama (sticky) lepas dan menghilang dari layar saat menu dibuka setelah halaman digulir. */
html.tf-menu-open{ overflow: hidden; }
@media (max-width: 991px){
	.tf-mobile-actions{ display: flex; align-items: center; gap: 4px; margin-right: -6px; }
	.tf-mobile{ position: fixed; inset: 72px 0 0; display: flex; flex-direction: column; gap: 20px; padding: 20px 20px 24px; border-top: 1px solid #F6F0E524; background: var(--tf-ink); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 160ms ease, transform 160ms var(--tf-ease-out), visibility 0s linear 160ms; }
	.tf-mobile.is-open{ opacity: 1; visibility: visible; transform: none; transition: opacity 240ms ease, transform 240ms var(--tf-ease-out), visibility 0s; }
	.tf-mobile .tf-search-form{ flex: none; padding-left: 16px; }
	.tf-mobile .tf-search-go{ padding: 0 18px; }
	.tf-mobile ul{ margin: 0 !important; padding: 0 !important; list-style: none; }
	.tf-mobile li{ border-bottom: 1px solid #F6F0E51F; opacity: 0; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms var(--tf-ease-out); }
	.tf-mobile.is-open li{ opacity: 1; transform: none; transition-duration: 240ms; transition-delay: calc(30ms * var(--i, 0)); }
	.tf-mobile li:nth-child(2){ --i: 1; }
	.tf-mobile li:nth-child(3){ --i: 2; }
	.tf-mobile li:nth-child(4){ --i: 3; }
	.tf-mobile li:nth-child(5){ --i: 4; }
	.tf-mobile li:nth-child(6){ --i: 5; }
	.tf-mobile li:nth-child(7){ --i: 6; }
	.tf-mobile li a{ display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: #F6F0E5E6; font: 600 17px/24px var(--tf-sans); letter-spacing: 0.28px; transition: color 150ms ease; }
	.tf-mobile li .tf-icon{ color: #F6F0E566; }
	.tf-mobile li a.is-active{ color: var(--tf-gold); }
	.tf-mobile li a.is-active .tf-icon{ color: var(--tf-gold); }
	.tf-mobile-login{ flex: none; gap: 10px; height: 48px; }
	.tf-mobile-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 4px; color: #F6F0E5CC; font-size: 14px; line-height: 20px; }
	.tf-mobile-foot > a{ display: inline-flex; align-items: center; min-height: 44px; }
	.tf-mobile-lang{ display: flex; gap: 4px; margin-left: auto; padding: 3px; border: 1px solid #F6F0E52E; border-radius: 999px; }
	.tf-mobile-lang button{ min-width: 44px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #F6F0E5CC; font: 600 13px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
	.tf-mobile-lang [aria-pressed="true"]{ background: var(--tf-gold); color: var(--tf-ink); }
}
@media (prefers-reduced-motion: reduce){
	.tf-burger svg, .tf-burger-line{ transition: none; }
}

/* Halaman Tentang Kami dan Layanan: token, tombol, dan gerak sama dengan landing */
.tf-page-hero{ padding-top: 40px; }
.tf-page-hero-box{ position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 64px; border-radius: 12px; background: var(--tf-ink); overflow: hidden; isolation: isolate; box-shadow: 0 25px 50px -12px #2B1B1440; text-align: center; }
.tf-page-hero-box > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; z-index: -2; }
.tf-page-hero-shade{ position: absolute; inset: 0; background: linear-gradient(to top, #2B1B14 0%, #2B1B1499 55%, #2B1B1433 100%); z-index: -1; }
.tf-page-hero-content{ max-width: 760px; }
.tf .tf-page-hero .tf-eyebrow, .tf .tf-visit-card .tf-eyebrow{ padding-left: 0 !important; }
.tf-page-hero .tf-eyebrow{ margin-top: 24px; }
.tf-page-hero .tf-h1{ margin-top: 12px; }
.tf p.tf-page-hero-text{ max-width: 560px; margin: 20px auto 0; font-size: 16px; line-height: 24px; color: var(--tf-ivory); }
.tf-crumbs ol{ display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; color: #F6F0E5CC; }
.tf-crumbs li + li::before{ content: "/"; margin-right: 8px; opacity: 0.6; }
.tf-crumbs a{ transition: color 150ms ease; }
.tf-crumbs [aria-current]{ color: var(--tf-ivory); }
.tf-page-section{ padding-top: 96px; }
.tf main > section:last-child{ padding-bottom: 96px; }

.tf-page-stats{ display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 96px !important; padding: 40px 0 !important; border-radius: 12px; background: var(--tf-ink); text-align: center; }
.tf-page-stats li + li{ border-left: 1px solid #E3D5C033; }
.tf-page-stats strong{ display: block; font: 400 48px/52px var(--tf-serif); color: var(--tf-gold); }
.tf-page-stats li > span{ display: block; margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--tf-line); }

.tf-value-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.tf-value-grid .tf-feature p{ font-size: 14px; line-height: 22px !important; }

.tf-page-band{ margin-top: 96px; padding: 96px 0; background: var(--tf-ink); }
.tf-page-band .tf-h2{ color: var(--tf-ivory); }
.tf-page-band .tf-h2 em{ color: var(--tf-gold); }
.tf-range-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.tf-range{ position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; isolation: isolate; }
.tf-range img{ width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--tf-ease-out); }
.tf-range div{ position: absolute; inset: auto 0 0; padding: 64px 20px 20px; background: linear-gradient(to top, #2B1B14F2 0%, #2B1B14B3 55%, #2B1B1400 100%); }
.tf-range h3{ font: 400 24px/28px var(--tf-serif); color: var(--tf-ivory); }
.tf-range p{ margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--tf-line); }

.tf-visit{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tf-pinmap{ position: relative; min-height: 480px; border-radius: 12px; overflow: hidden; background: var(--tf-line); }
.tf-pinmap iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tf-pinmap-shield{ position: absolute; inset: 0; touch-action: pan-y; }
.tf-pinmap-route{ position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 4px; background: var(--tf-gold); color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); box-shadow: 0 4px 14px #2B1B1440; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-pinmap-route svg{ width: 16px; height: 16px; }
.tf-pinmap-route:active{ transform: scale(0.97); }
@media (hover: hover) and (pointer: fine){ .tf-pinmap-route:hover{ background: #D8B978; } }
.tf-pinmap-zoom{ position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px #2B1B1440; }
.tf-pinmap-zoom button{ width: 40px; height: 40px; border: 0; background: transparent; color: var(--tf-ink); font: 500 22px/1 var(--tf-sans); cursor: pointer; transition: background-color 150ms ease; }
.tf-pinmap-zoom button + button{ border-top: 1px solid var(--tf-line); }
.tf-pinmap-zoom button:active:not(:disabled){ background: var(--tf-ivory); }
.tf-pinmap-zoom button:disabled{ color: #A59B91; cursor: not-allowed; }
.tf-visit-card{ display: flex; flex-direction: column; align-items: flex-start; padding: 48px; border-radius: 12px; background: var(--tf-ink); }
.tf-visit-card h2{ margin-top: 12px; font: 400 40px/44px var(--tf-serif); color: var(--tf-ivory); }
.tf-visit-card h2 em{ color: var(--tf-gold); }
.tf-visit-card dl{ width: 100%; margin: 24px 0 32px; }
.tf-visit-card dl > div{ padding: 16px 0; border-bottom: 1px solid #E3D5C033; }
.tf-visit-card dt{ font-size: 12px; font-weight: 400; line-height: 18px; color: #A59B91; }
.tf-visit-card dd{ margin: 2px 0 0; font-size: 14px; line-height: 22px; color: var(--tf-ivory); }
.tf-visit-card dd span{ display: block; }
.tf-visit-card .tf-btn{ margin-top: auto; }

.tf-svc-list{ display: grid; gap: 96px; }
.tf-svc{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; scroll-margin-top: 104px; }
.tf-svc:nth-child(even) > :first-child{ order: 2; }
.tf-svc figure{ aspect-ratio: 5 / 4; border-radius: 12px; overflow: hidden; }
.tf-svc figure img{ width: 100%; height: 100%; object-fit: cover; }
/* Foto Pia: potong dari bawah agar logo halal di sudut tidak terpotong separuh */
#oleh-oleh figure img{ object-position: top; }
.tf-svc .tf-svc-duo{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: auto; overflow: visible; }
.tf-svc-duo img{ aspect-ratio: 1; height: auto !important; border-radius: 12px; }
.tf-svc-panel{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 5 / 4; border-radius: 12px; background: radial-gradient(90% 90% at 50% 100%, #5A3E30 0%, #2B1B14 70%); font: 400 44px/52px var(--tf-serif); color: var(--tf-ivory); }
.tf-svc-panel i{ color: var(--tf-gold); }
.tf-svc-num{ display: block; font-size: 14px; line-height: 20px; color: var(--tf-brown); }
.tf-svc-copy .tf-h2{ margin-top: 8px; }
.tf-svc-copy .tf-lead{ margin-top: 16px; }
.tf-svc-copy ul{ margin-top: 24px; }
.tf-svc-copy li{ display: flex; align-items: flex-start; gap: 10px; font: 500 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-svc-copy li + li{ margin-top: 12px; }
.tf-svc-copy li span{ display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #C6A15B1F; color: var(--tf-brown); }
.tf-svc-copy .tf-btn{ margin-top: 32px; }

.tf-step-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: none; }
.tf-step-grid li{ padding: 32px; border: 1px solid #E3D5C033; border-radius: 8px; background: #F6F0E50A; }
.tf-step-grid span{ display: block; font: 400 32px/36px var(--tf-serif); color: var(--tf-gold); }
.tf-step-grid h3{ margin-top: 12px; font: 600 18px/28px var(--tf-sans); color: var(--tf-ivory); }
.tf-step-grid p{ margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--tf-line); }

.tf-faq-list{ max-width: 760px; margin: 48px auto 0; border-top: 1px solid var(--tf-line); }
.tf-faq-list details{ border-bottom: 1px solid var(--tf-line); }
.tf-faq-list summary{ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; font: 600 16px/24px var(--tf-sans); color: var(--tf-ink); list-style: none; cursor: pointer; }
.tf-faq-list summary::-webkit-details-marker{ display: none; }
.tf-faq-list summary:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-faq-list summary svg{ flex: none; color: var(--tf-brown); transition: transform 200ms var(--tf-ease-out); }
.tf-faq-list details[open] summary svg{ transform: rotate(180deg); }
.tf .tf-faq-list p{ padding-bottom: 20px; font-size: 14px; line-height: 22px; }
.tf .tf-legal-note{ margin-top: 12px; font-size: 14px; line-height: 22px; }

.tf-page-cta{ display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px 56px; border-radius: 12px; background: radial-gradient(120% 160% at 0% 0%, #4A3022 0%, #2B1B14 62%); }
.tf-page-cta h2{ font: 400 40px/46px var(--tf-serif); letter-spacing: -0.5px; color: var(--tf-ivory); }
.tf-page-cta h2 em{ color: var(--tf-gold); }
.tf-page-cta > div{ display: flex; flex: none; flex-wrap: wrap; gap: 12px; }
.tf-page-cta-link{ display: inline-flex; align-items: center; height: 44px; padding: 0 20.5px; border-radius: 4px; box-shadow: inset 0 0 0 1px #E3D5C066; color: var(--tf-ivory) !important; font: 600 14px/20px var(--tf-sans); transition: background-color 150ms ease, box-shadow 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-page-cta-link:active{ transform: scale(0.97); }

@media (hover: hover) and (pointer: fine){
	.tf-crumbs a:hover{ color: var(--tf-gold); }
	.tf-range:hover img{ transform: scale(1.03); }
	.tf-page-cta-link:hover{ background: #F6F0E51A; box-shadow: inset 0 0 0 1px var(--tf-gold); }
}
@media (max-width: 1279px){
	.tf-svc{ gap: 40px; }
	.tf-svc-panel{ font-size: 36px; line-height: 44px; }
}
@media (max-width: 991px){
	.tf-svc, .tf-visit{ grid-template-columns: minmax(0, 1fr); }
	.tf-svc:nth-child(even) > :first-child{ order: 0; }
	.tf-range-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-value-grid, .tf-step-grid{ grid-template-columns: minmax(0, 1fr); }
	.tf-pinmap{ min-height: 0; aspect-ratio: 5 / 4; }
	.tf-page-cta{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px){
	.tf-page-hero{ padding-top: 20px; }
	.tf-page-hero-box{ min-height: 360px; padding: 40px 20px; }
	.tf-page-section{ padding-top: 64px; }
	.tf main > section:last-child{ padding-bottom: 64px; }
	.tf-page-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; margin-top: 64px !important; padding: 28px 0 !important; }
	.tf-page-stats li:nth-child(odd){ border-left: 0; }
	.tf-page-stats strong{ font-size: 36px; line-height: 40px; }
	.tf-page-band{ margin-top: 64px; padding: 64px 0; }
	.tf-svc-list{ gap: 64px; }
	.tf-visit-card{ padding: 28px 24px; }
	.tf-visit-card h2, .tf-page-cta h2{ font-size: 30px; line-height: 36px; }
	.tf-page-cta{ padding: 28px 24px; }
	.tf-range-grid{ gap: 12px; }
	.tf-range div{ padding: 48px 12px 12px; }
	.tf-range h3{ font-size: 20px; line-height: 24px; }
}

/* Halaman Produk (acuan FigCraft 03 Katalog). Tanpa animasi masuk per kartu saat filter: filter dipakai berulang, hanya pudar singkat. */
.tf-cat-hero{ padding-top: 56px; text-align: center; }
.tf-cat-pill{ display: inline-block; padding: 5px 14px !important; border: 1px solid var(--tf-brown); border-radius: 999px; font: 600 12px/16px var(--tf-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--tf-brown); }
.tf-cat-title{ margin-top: 16px !important; font-size: 56px; line-height: 60px; }
.tf-cat-lead{ max-width: 620px; margin: 16px auto 0 !important; }
.tf-cat-tabs{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--tf-line); }
.tf-cat-tabs button, .tf-cat-sort button, .tf-cat-chips button{ border: 1px solid var(--tf-line); border-radius: 4px; background: #fff; color: var(--tf-brown); font: 600 13px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-cat-tabs button{ min-height: 44px; padding: 0 20px; }
.tf-cat-tabs button:active, .tf-cat-sort button:active, .tf-cat-chips button:active, .tf-cat-toggle:active, .tf-cat-pages button:active{ transform: scale(0.97); }
.tf-cat-tabs [aria-pressed="true"], .tf-cat-sort [aria-pressed="true"], .tf-cat-chips [aria-pressed="true"]{ background: var(--tf-gold); border-color: var(--tf-gold); color: var(--tf-ink); }
.tf-cat-hero button:focus-visible, .tf-cat-bar button:focus-visible, .tf-cat-body button:focus-visible{ outline-color: var(--tf-ink); }

.tf-cat-find{ display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 720px; margin: 0 auto; }
/* Pencarian dan keranjang menempel tepat di bawah navbar (80 px, 72 px di bawah 992 px). Latar gading menutupi isi yang lewat di bawahnya. */
.tf-cat-sticky{ position: sticky; top: 80px; z-index: 50; margin-top: 24px; padding-block: 12px; border-bottom: 1px solid var(--tf-line); background: var(--tf-ivory); }
.tf-cat-search{ flex: 1; min-width: 0; display: flex; align-items: stretch; height: 52px; padding: 3px; border: 1px solid var(--tf-brown); border-radius: 6px; background: #fff; }
.tf-cat-search:focus-within{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-cat-search label{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--tf-brown); }
.tf-cat-search input{ flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--tf-ink); font: 400 15px/24px var(--tf-sans); }
.tf-cat-search input::placeholder{ color: var(--tf-brown); opacity: 0.75; }
.tf-cat-search button{ flex: none; display: grid; place-items: center; width: 56px; border: 0; border-radius: 4px; background: var(--tf-gold); color: var(--tf-ink); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-cat-search button:active, .tf-cat-cart:active{ transform: scale(0.97); }
.tf-cat-cart{ position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 60px; border: 0; border-radius: 50%; background: transparent; color: var(--tf-ink); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-cat-cart-count{ position: absolute; top: 4px; right: 2px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #BA1A1A; color: #FFFFFF; font: 700 11px/13px var(--tf-sans); }
.tf-cat-cart:focus-visible, .tf-cat-search button:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
	.tf-cat-search button:hover{ background: #D8B978; }
	.tf-cat-cart:hover{ background: #C6A15B26; }
}
.tf-cat-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.tf-cat-toggle{ display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--tf-gold); color: var(--tf-ink); font: 600 13px/20px var(--tf-sans); cursor: pointer; transition: transform 160ms var(--tf-ease-out); }
.tf-cat-toggle span{ display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--tf-ink); color: var(--tf-ivory); font-size: 11px; }
.tf-cat-sort{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tf-cat-sort > span{ font: 600 12px/16px var(--tf-sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--tf-brown); }
.tf-cat-sort button{ min-height: 36px; padding: 0 12px; font-size: 12px; }
.tf .tf-cat-count{ margin-left: auto; font-size: 13px; line-height: 20px; color: var(--tf-brown); }

.tf-cat-body{ display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; padding-bottom: 96px; scroll-margin-top: 181px; }
/* top = navbar 80 + pencarian menempel 85 + jarak 16; panel tinggi bisa digulir sendiri. */
.tf-cat-side{ position: sticky; top: 181px; max-height: calc(100vh - 197px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 20px; border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; }
.tf-cat-side-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--tf-line); }
.tf-cat-side h2{ display: flex; align-items: center; gap: 10px; font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); }
.tf-cat-side-ico{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #C6A15B26; color: var(--tf-ink); }
/* Reset: kapsul kecil; ikon berputar sedikit saat hover sebagai umpan balik. */
.tf-cat-reset{ display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--tf-line); border-radius: 999px; background: #fff; color: var(--tf-brown); font: 600 12px/16px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-cat-reset svg{ transition: transform 240ms var(--tf-ease-out); }
.tf-cat-reset:active{ transform: scale(0.97); }
.tf-cat-query button{ border: 0; background: none; padding: 4px; color: var(--tf-brown); cursor: pointer; }
.tf .tf-cat-query{ margin-top: 12px; padding: 8px 8px 8px 12px; border-radius: 8px; background: var(--tf-ivory); font-size: 13px; line-height: 20px; color: var(--tf-ink); }
.tf-cat-query button{ font: 500 16px/16px var(--tf-sans); }
.tf-cat-side fieldset{ margin: 0; padding: 20px 0 0; border: 0; min-width: 0; }
.tf-cat-side legend{ float: left; width: 100%; margin-bottom: 8px; font: 600 11px/16px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-brown); }
/* Opsi sebagai baris: radio bulat custom, baris terpilih diberi latar emas tipis, jumlah produk dalam kapsul. */
.tf-cat-side label{ clear: both; display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 -10px; padding: 0 10px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--tf-brown); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.tf-cat-side input{ flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--tf-brown); border-radius: 50%; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; }
.tf-cat-side input:checked{ border-color: var(--tf-ink); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px var(--tf-ink); }
.tf-cat-side input:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-cat-side label.is-on{ background: #C6A15B1F; color: var(--tf-ink); font-weight: 600; }
.tf-cat-side label span{ flex: 1; min-width: 0; }
.tf-cat-side label i{ flex: none; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--tf-ivory); font: 600 11px/18px var(--tf-sans); font-style: normal; text-align: center; color: var(--tf-brown); font-variant-numeric: tabular-nums; transition: background-color 150ms ease, color 150ms ease; }
.tf-cat-side label.is-on i{ background: var(--tf-ink); color: var(--tf-ivory); }
@media (hover: hover) and (pointer: fine){
	.tf-cat-side label:not(.is-on):hover{ background: var(--tf-ivory); color: var(--tf-ink); }
	.tf-cat-side label:not(.is-on):hover i{ background: #fff; }
	.tf-cat-side label:hover input:not(:checked){ border-color: var(--tf-ink); }
	.tf-cat-reset:hover{ border-color: var(--tf-brown); background: var(--tf-ivory); color: var(--tf-ink); }
	.tf-cat-reset:hover svg{ transform: rotate(-60deg); }
}
/* Panel filter di tablet/ponsel muncul saat tombol Filter ditekan. */
@keyframes tfCatSideIn{ from{ opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce){
	.tf-cat-reset:hover svg{ transform: none; }
	@keyframes tfCatSideIn{ from{ opacity: 0; } }
}
.tf-cat-chips{ clear: both; display: flex; flex-wrap: wrap; gap: 6px; }
.tf-cat-chips button{ min-height: 32px; padding: 0 10px; font-size: 12px; }

.tf-cat-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tf-cat-card{ display: flex; flex-direction: column; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; overflow: hidden; transition: opacity 200ms ease, box-shadow 200ms ease; }
@starting-style{ .tf-cat-card{ opacity: 0; } }
.tf-cat-card figure{ position: relative; aspect-ratio: 1; background: var(--tf-ivory); overflow: hidden; }
.tf-cat-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--tf-ease-out); }
.tf-cat-card figure span{ position: absolute; left: 10px; top: 10px; padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--tf-ink); font: 600 11px/18px var(--tf-sans); }
.tf-cat-card-body{ display: flex; flex: 1; flex-direction: column; padding: 16px; }
.tf-cat-card h3{ font: 500 20px/26px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-cat-card-body > p{ margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--tf-brown); }
.tf-cat-price{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: auto; padding-top: 12px; }
.tf-cat-price strong{ font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); }
.tf-cat-price s{ font-size: 12px; line-height: 16px; color: var(--tf-brown); }
.tf-cat-card .tf-btn{ margin-top: 12px; height: 40px; }

.tf-cat-empty{ padding: 64px 24px; border: 1px dashed var(--tf-line); border-radius: 8px; text-align: center; }
.tf-cat-empty h2{ font: 400 28px/34px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-cat-empty p{ margin: 8px 0 20px; font-size: 14px; line-height: 22px; }

.tf-cat-pages{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tf-line); }
.tf .tf-cat-pages p{ font-size: 13px; line-height: 20px; }
.tf-cat-pages div{ display: flex; gap: 6px; }
.tf-cat-pages button{ min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--tf-line); border-radius: 4px; background: #fff; color: var(--tf-ink); font: 600 13px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-cat-pages [aria-current]{ background: var(--tf-ink); border-color: var(--tf-ink); color: var(--tf-ivory); }
.tf-cat-pages button:disabled{ opacity: 0.45; cursor: default; }

/* Tombol kembali ke atas (gaya Uiverse vinodjangid07): lingkaran ink dengan cincin emas tipis; saat hover/fokus melebar jadi kapsul emas berlabel. */
.tf-top{ position: fixed; right: 20px; bottom: 24px; z-index: 150; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: var(--tf-ink); color: var(--tf-ivory); cursor: pointer; box-shadow: 0 0 0 4px #C6A15B40; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 200ms var(--tf-ease-out), transform 200ms var(--tf-ease-out), visibility 0s linear 200ms, width 300ms var(--tf-ease-out), background-color 200ms ease, color 200ms ease; }
.tf-top.is-on{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tf-top:active{ transform: scale(0.94); }
.tf-top:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 4px; }
.tf-top-icon{ width: 12px; height: 16px; fill: currentColor; transition: transform 300ms var(--tf-ease-out), opacity 200ms ease; }
.tf-top-label{ position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px/16px var(--tf-sans); white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform 300ms var(--tf-ease-out), opacity 200ms ease; }
.tf-top:focus-visible{ width: 150px; background: var(--tf-gold); color: var(--tf-ink); }
.tf-top:focus-visible .tf-top-icon{ transform: translateY(-200%); opacity: 0; }
.tf-top:focus-visible .tf-top-label{ opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine){
	.tf-top:hover{ width: 150px; background: var(--tf-gold); color: var(--tf-ink); }
	.tf-top:hover .tf-top-icon{ transform: translateY(-200%); opacity: 0; }
	.tf-top:hover .tf-top-label{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){ .tf-top, .tf-top-icon, .tf-top-label{ transition: none; } }
@media (max-width: 767px){
	.tf-top{ right: 16px; bottom: 16px; }
	/* halaman produk punya bar beli menempel di bawah (tinggi sekitar 72px): naikkan tombol agar tidak tertutup */
	.tf:has(.tf-pd-sticky) .tf-top{ bottom: 88px; }
}

@media (hover: hover) and (pointer: fine){
	.tf-cat-tabs button:not([aria-pressed="true"]):hover, .tf-cat-sort button:not([aria-pressed="true"]):hover, .tf-cat-chips button:not([aria-pressed="true"]):hover{ border-color: var(--tf-gold); color: var(--tf-ink); }
	.tf-cat-pages button:not([aria-current]):not(:disabled):hover{ background: var(--tf-ivory); }
	.tf-cat-card:hover{ box-shadow: 0 8px 24px #2B1B1414; }
	.tf-cat-card:hover img{ transform: scale(1.03); }
}
@media (max-width: 1100px){
	.tf-cat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px){
	.tf-cat-body{ grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
	.tf-cat-toggle{ display: inline-flex; }
	.tf-cat-side{ position: static; display: none; max-height: none; overflow: visible; }
	.tf-cat-sticky{ top: 72px; }
	.tf-cat-body{ scroll-margin-top: 160px; }
	.tf-cat-side.is-open{ display: block; animation: tfCatSideIn 200ms var(--tf-ease-out); }
	/* Tablet: opsi dua kolom agar panel tidak terlalu panjang. */
	.tf-cat-side fieldset > label{ float: left; width: calc(50% - 4px); margin: 0 8px 0 0; clear: none; }
	.tf-cat-side fieldset > label:nth-of-type(2n){ margin-right: 0; }
	.tf-cat-side fieldset::after{ content: ""; display: block; clear: both; }
	.tf-cat-title{ font-size: 40px; line-height: 44px; }
}
@media (max-width: 767px){
	.tf-cat-hero{ padding-top: 32px; }
	.tf-cat-title{ font-size: 32px; line-height: 36px; }
	.tf-cat-tabs{ flex-wrap: nowrap; justify-content: flex-start; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
	.tf-cat-tabs button{ flex: none; }
	.tf-cat-grid{ gap: 12px; }
	.tf-cat-card-body{ padding: 12px; }
	.tf-cat-card h3{ font-size: 20px; line-height: 24px; }
	.tf .tf-cat-count{ margin-left: 0; width: 100%; }
	/* Ponsel: kembali satu kolom. */
	.tf-cat-side fieldset > label, .tf-cat-side fieldset > label:nth-of-type(2n){ float: none; width: auto; margin: 0 -10px; }
	.tf-cat-side{ padding: 16px; }
}

/* Halaman Galeri */
.tf-gal-section{ padding-top: 56px; }
/* Tab kategori Galeri: hanya ikon, nama muncul sebagai tooltip (tetap elemen button untuk keyboard dan pembaca layar). */
.tf-gal-section .tf-cat-tabs{ margin-top: 0; gap: 20px 28px; }
.tf-gal-section .tf-cat-tabs .tf-tab{ position: relative; display: grid; place-items: center; min-width: 64px; min-height: 64px; padding: 6px 8px 14px; border: 0; border-radius: 8px; background: none; opacity: 0.5; transition: opacity 200ms ease, transform 160ms var(--tf-ease-out); }
.tf-gal-section .tf-cat-tabs .tf-tab[aria-pressed="true"]{ background: none; opacity: 1; }
.tf-gal-section .tf-cat-tabs .tf-tab[aria-pressed="true"]::before{ content: ""; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 3px; margin-left: -10px; border-radius: 2px; background: var(--tf-gold); }
.tf-tab img{ display: block; height: 54px; width: auto; mix-blend-mode: multiply; transition: transform 200ms var(--tf-ease-out); } /* multiply: latar putih ikon menyatu dengan latar krem */
.tf-tab::after{ content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 5; padding: 4px 10px; border-radius: 6px; background: var(--tf-ink); color: var(--tf-ivory); font: 500 12px/16px var(--tf-sans); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 150ms ease, transform 150ms var(--tf-ease-out); }
.tf-tab:focus-visible::after{ opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine){
	.tf-gal-section .tf-cat-tabs .tf-tab:hover{ opacity: 1; }
	.tf-tab:hover img{ transform: translateY(-2px) scale(1.06); }
	.tf-tab:hover::after{ opacity: 1; transform: translate(-50%, 0); }
}
@media (hover: none){ .tf-tab:focus::after{ opacity: 1; transform: translate(-50%, 0); } }
/* Ayunan pelan kiri-kanan: properti translate (terpisah dari transform) di compositor, tiap ikon bergeser 6 px dengan jeda berbeda.
   Berhenti saat kursor atau fokus ada di barisnya agar tooltip dan klik stabil. */
@keyframes tfSway{ from{ translate: -6px 0; } to{ translate: 6px 0; } }
.tf-gal-section .tf-cat-tabs .tf-tab{ animation: tfSway 5s ease-in-out infinite alternate; will-change: translate; }
.tf-gal-section .tf-cat-tabs .tf-tab:nth-child(2){ animation-delay: -1s; }
.tf-gal-section .tf-cat-tabs .tf-tab:nth-child(3){ animation-delay: -2s; }
.tf-gal-section .tf-cat-tabs .tf-tab:nth-child(4){ animation-delay: -3s; }
.tf-gal-section .tf-cat-tabs .tf-tab:nth-child(5){ animation-delay: -4s; }
.tf-gal-section .tf-cat-tabs:hover .tf-tab, .tf-gal-section .tf-cat-tabs:focus-within .tf-tab{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .tf-tab::after{ transition: none; } }
@media (max-width: 767px){ .tf-gal-section .tf-cat-tabs .tf-tab{ animation: none; will-change: auto; } }
@media (prefers-reduced-motion: reduce){ .tf-gal-section .tf-cat-tabs .tf-tab{ animation: none; will-change: auto; } }
@media (max-width: 767px){ .tf-gal-section .tf-cat-tabs{ gap: 16px 20px; padding-top: 28px; } }
.tf-gal-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; margin-top: 32px; }
.tf-gal-item{ position: relative; display: block; aspect-ratio: 1; border-radius: 8px; background: var(--tf-line); overflow: hidden; transition: opacity 200ms ease; }
@starting-style{ .tf-gal-item{ opacity: 0; } }
.tf-gal-item.is-big{ grid-column: span 2; grid-row: span 2; }
.tf-gal-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--tf-ease-out); }
.tf-gal-item span{ position: absolute; inset: auto 0 0; padding: 40px 14px 12px; background: linear-gradient(to top, #2B1B14D9 0%, #2B1B1400 100%); color: var(--tf-ivory); font: 500 13px/18px var(--tf-sans); opacity: 0; transform: translateY(4px); transition: opacity 200ms ease, transform 200ms var(--tf-ease-out); }
.tf-gal-item:focus-visible span{ opacity: 1; transform: none; }
.tf-gal-item:focus-visible{ outline-color: var(--tf-ink); }
@media (hover: none){ .tf-gal-item span{ opacity: 1; transform: none; } }
/* "Di Balik Layar": video potret 9:16 dari dashboard (thumbnail unggahan Marketing). Desktop 4 kolom; HP digeser mendatar dengan snap. */
.tf-gal-reels{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.tf-reel{ position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 12px; background: #4A3022; overflow: hidden; }
.tf-reel img{ width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--tf-ease-out); }
.tf-reel b{ position: absolute; left: 12px; top: 12px; padding: 2px 10px; border-radius: 999px; background: #2B1B14B3; color: var(--tf-ivory); font: 600 11px/18px var(--tf-sans); }
.tf-reel i{ position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--tf-gold); color: var(--tf-ink); transition: transform 200ms var(--tf-ease-out); }
.tf-reel:active i{ transform: scale(0.95); }
.tf-reel span{ position: absolute; inset: auto 0 0; padding: 56px 16px 16px; background: linear-gradient(to top, #2B1B14E6 0%, #2B1B1400 100%); color: var(--tf-ivory); font: 500 14px/20px var(--tf-sans); }
@media (hover: hover) and (pointer: fine){ .tf-reel:hover img{ transform: scale(1.04); } .tf-reel:hover i{ transform: scale(1.06); } }
.tf-reel:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 3px; }
/* Dialog pemutar video (D-059): bingkai potret 9:16 setinggi layar dikurangi ruang tombol; iframe hanya ada saat terbuka. */
.tf-reel-dialog{ width: min(92vw, calc((100dvh - 112px) * 9 / 16)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--tf-ivory); overflow: visible; }
.tf-reel-dialog::backdrop{ background: #2B1B14E6; }
.tf-reel-dialog[open]{ animation: tfReelIn 220ms var(--tf-ease-out); }
@keyframes tfReelIn{ from{ opacity: 0; transform: scale(0.97); } }
.tf-reel-box{ position: relative; padding-top: 48px; }
.tf-reel-frame{ position: relative; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; overflow: hidden; }
.tf-reel-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tf-reel-close{ position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #F6F0E566; border-radius: 50%; background: transparent; color: var(--tf-ivory); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.tf-reel-close:active{ transform: scale(0.95); }
.tf-reel-close:focus-visible, .tf-reel-open:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 3px; }
.tf-reel-open{ display: block; margin-top: 12px; text-align: center; font: 500 13px/20px var(--tf-sans); color: var(--tf-ivory); text-decoration: underline; text-underline-offset: 3px; }
html:has(.tf-reel-dialog[open]){ overflow: hidden; }
@media (hover: hover) and (pointer: fine){ .tf-reel-close:hover{ background: var(--tf-gold); border-color: var(--tf-gold); color: var(--tf-ink); } .tf-reel-open:hover{ color: var(--tf-gold); } }
@media (prefers-reduced-motion: reduce){ .tf-reel-dialog[open]{ animation: none; } }
@media (max-width: 991px){ .tf-gal-reels{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px){
	.tf-gal-reels{ display: flex; gap: 12px; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.tf-reel{ flex: 0 0 62%; scroll-snap-align: start; }
}

/* Halaman Kontak */
.tf-contact-grid{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.tf-contact-cards{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tf-contact-card{ display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; }
.tf-contact-card h2{ margin-top: 16px; font: 700 18px/28px var(--tf-sans); color: var(--tf-ink); }
.tf .tf-contact-card p{ margin: 4px 0 16px; font-size: 14px; line-height: 22px; color: var(--tf-brown); }
.tf-contact-card .tf-more, .tf-contact-actions{ margin-top: auto; }
.tf-contact-card .tf-more{ min-height: 24px; color: var(--tf-ink); font-size: 13px; }
.tf-contact-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tf-contact-value{ font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); }
.tf-contact-copy{ min-height: 32px; padding: 0 12px; border: 1px solid var(--tf-line); border-radius: 4px; background: #fff; color: var(--tf-brown); font: 500 12px/16px var(--tf-sans); cursor: pointer; transition: border-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-contact-copy:active{ transform: scale(0.97); }
.tf-hours{ display: flex; flex-direction: column; padding: 32px; border-radius: 12px; background: var(--tf-ink); color: var(--tf-line); }
.tf-hours-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.tf-hours h2{ font: 400 28px/34px var(--tf-serif); color: var(--tf-ivory); }
.tf-hours-status{ padding: 3px 10px; border-radius: 999px; background: #F6F0E51A; color: var(--tf-line); font: 600 12px/18px var(--tf-sans); }
.tf-hours-status.is-open{ background: #DCEFE0; color: #2E6B3E; }
.tf-hours ul{ margin-top: 20px !important; }
.tf-hours li{ display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #E3D5C033; font-size: 14px; line-height: 22px; }
.tf-hours li.is-today{ color: var(--tf-gold); font-weight: 600; }
.tf .tf-hours > p{ margin-top: auto; padding-top: 16px; font-size: 12px; line-height: 18px; color: #A59B91; }
.tf-contact-map{ margin-top: 24px; }
.tf-contact-map > div{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; padding: 32px 24px; border: 1px dashed var(--tf-line); border-radius: 12px; text-align: center; }
.tf-contact-map h2{ margin-top: 16px; font: 400 28px/34px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-contact-map p{ margin: 4px 0 20px; font-size: 14px; line-height: 22px; }
.tf-contact-map iframe{ display: block; width: 100%; height: 420px; border: 0; border-radius: 12px; background: var(--tf-line); }
.tf-contact-help{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tf-contact-help a{ display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; color: var(--tf-ink); transition: box-shadow 200ms ease; }
.tf-contact-help a > span:nth-child(2){ flex: 1; min-width: 0; }
.tf-contact-help strong{ display: block; font: 700 16px/24px var(--tf-sans); }
.tf-contact-help em{ display: block; font-style: normal; font-size: 13px; line-height: 20px; color: var(--tf-brown); }
.tf-contact-help .tf-icon{ transition: transform 200ms var(--tf-ease-out); }
.tf-contact-help .tf-round .tf-icon{ transition: none; }

@media (hover: hover) and (pointer: fine){
	.tf-gal-item:hover img{ transform: scale(1.03); }
	.tf-gal-item:hover span{ opacity: 1; transform: none; }
	.tf-contact-copy:hover{ border-color: var(--tf-gold); }
	.tf-contact-help a:hover{ box-shadow: 0 8px 24px #2B1B1414; }
	.tf-contact-help a:hover > .tf-icon{ transform: translate(2px, -2px); }
}
@media (max-width: 991px){
	.tf-gal-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tf-contact-grid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px){
	.tf-gal-section{ padding-top: 32px; }
	.tf-gal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.tf-gal-item span{ padding: 28px 10px 8px; font-size: 12px; line-height: 16px; }
	.tf-contact-cards, .tf-contact-help{ grid-template-columns: minmax(0, 1fr); }
	.tf-hours{ padding: 24px; }
	.tf-contact-map iframe{ height: 320px; }
}

/* Masuk dan verifikasi OTP (FigCraft 07, 08) */
.tf-auth{ display: grid; grid-template-columns: 560px 440px; column-gap: 124px; align-items: center; width: min(1184px, 100% - 48px); min-height: calc(100vh - 36px); padding: 48px 0 56px; }
.tf-auth-photo{ position: relative; height: 680px; border-radius: 12px; background: var(--tf-ink); overflow: hidden; isolation: isolate; }
.tf-auth-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.tf-auth-photo > div{ position: absolute; inset: auto 0 0; padding: 120px 40px 40px; background: linear-gradient(to top, #2B1B14 0%, #2B1B14D9 55%, #2B1B1400 100%); color: var(--tf-line); }
.tf .tf-auth-photo .tf-eyebrow, .tf .tf-auth-panel .tf-eyebrow{ padding-left: 0 !important; }
.tf .tf-auth-photo-title{ margin-top: 10px; font: 400 32px/41px var(--tf-serif); color: var(--tf-ivory); }
.tf-auth-photo ul{ margin-top: 14px !important; }
.tf-auth-photo li{ display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 23px; }
.tf-auth-photo li + li{ margin-top: 14px; }
.tf-auth-photo .tf-icon{ color: var(--tf-gold); }

.tf-auth-panel{ transition: opacity 200ms ease, transform 200ms var(--tf-ease-out); }
@starting-style{ .tf-auth-panel{ opacity: 0; transform: translateY(6px); } }
.tf-auth-panel h1{ margin-top: 10px; font: 400 40px/48px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-auth-lead{ margin-top: 10px; font-size: 15px; line-height: 23px; color: var(--tf-brown); }
.tf-auth-tabs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 22px; padding: 4px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; }
.tf-auth-tabs button{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--tf-brown); font: 600 14px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.tf-auth-tabs [aria-pressed="true"]{ background: var(--tf-ink); color: var(--tf-ivory); }
.tf-auth-field{ margin-top: 22px; }
.tf-auth-field label{ display: block; margin: 0 0 6px; font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-auth-input{ display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--tf-brown); border-radius: 4px; background: #fff; color: var(--tf-brown); }
.tf-auth-input:focus-within{ outline: 2px solid var(--tf-ink); outline-offset: 1px; }
.tf-auth-input span{ padding-right: 10px; border-right: 1px solid var(--tf-line); font: 500 15px/23px var(--tf-sans); }
.tf .tf-auth-input input{ flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tf-ink); font: 400 16px/24px var(--tf-sans); }
.tf-auth-input input::placeholder{ color: var(--tf-brown); opacity: 0.8; }
.tf-auth-show{ display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--tf-brown); cursor: pointer; transition: color 150ms ease; }
.tf-auth-show:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf .tf-auth-field > p:empty{ display: none; }
.tf .tf-auth-field > p{ margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--tf-brown); }
.tf-auth-field.is-error .tf-auth-input{ border-color: #BA1A1A; }
.tf .tf-auth-field.is-error > p{ color: #BA1A1A; font-weight: 500; }
.tf-auth-panel form .tf-btn{ margin-top: 20px; }
.tf-btn:disabled{ opacity: 0.55; cursor: default; }
.tf-btn:disabled::after{ display: none; }
.tf-btn:disabled:hover{ color: var(--tf-ink) !important; }
.tf .tf-auth-notice{ margin-top: 12px; padding: 10px 14px; border-radius: 4px; background: #C6A15B1F; color: var(--tf-ink); font-size: 14px; line-height: 20px; }
.tf-auth-or{ display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 13px; line-height: 20px; color: var(--tf-brown); }
.tf-auth-or::before, .tf-auth-or::after{ content: ""; flex: 1; height: 1px; background: var(--tf-line); }
.tf-auth-google{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; margin-top: 20px; border: 1px solid var(--tf-ink); border-radius: 4px; background: #fff; color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-auth-google:active{ transform: scale(0.98); }
.tf .tf-auth-link{ display: block; width: fit-content; min-height: 24px; margin: 20px auto 0; color: var(--tf-ink); font: 600 14px/24px var(--tf-sans); text-decoration: underline; text-underline-offset: 3px; }
.tf .tf-auth-terms{ margin-top: 20px; font-size: 13px; line-height: 22px; color: var(--tf-brown); }
.tf .tf-auth-terms a{ color: var(--tf-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Tombol "Kembali ke Beranda" di kanan atas formulir masuk. Rumbai emas menggantung di tepi dan bergoyang pelan saat hover atau fokus.
   Hanya transform yang dianimasikan, tanpa drop-shadow atau animasi latar; hover hanya di perangkat yang mendukungnya. */
.tf-auth-top{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-bottom: 16px; }
.tf-auth-top.is-split{ justify-content: space-between; }
.tf-auth-top .tf-auth-back{ margin-bottom: 0; }
.tf-home-btn{ position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 36px; border: 1px solid var(--tf-brown); border-radius: 4px; background: transparent; color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); cursor: pointer; transition: background-color 200ms ease, transform 160ms var(--tf-ease-out); }
.tf-home-btn:active{ transform: scale(0.97); }
.tf-home-arrow{ display: inline-block; transition: transform 200ms var(--tf-ease-out); }
.tf-vine{ position: absolute; top: 0; display: block; color: var(--tf-gold); pointer-events: none; transition: transform 700ms var(--tf-ease-out); }
.tf-vine svg{ display: block; width: 100%; height: auto; fill: currentColor; }
.tf-vine-1{ right: 0; width: 16px; transform-origin: 0 0; transform: rotate(10deg); }
.tf-vine-2{ left: 16px; width: 8px; color: var(--tf-brown); opacity: 0.7; transform-origin: 50% 0; transform: rotate(10deg); }
.tf-vine-3{ left: 0; width: 12px; transform-origin: 50% 0; transform: rotate(-5deg); }
@keyframes tfSway1{ 0%, 100%{ transform: rotate(10deg); } 50%{ transform: rotate(-5deg); } }
@keyframes tfSway2{ 0%, 100%{ transform: rotate(0deg); } 50%{ transform: rotate(15deg); } }
@keyframes tfSway3{ 0%, 100%{ transform: rotate(0deg); } 50%{ transform: rotate(-5deg); } }
.tf-home-btn:focus-visible .tf-home-arrow{ transform: translateX(-3px); }
.tf-home-btn:focus-visible .tf-vine-1{ animation: tfSway1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite; }
.tf-home-btn:focus-visible .tf-vine-2{ transform: rotate(0deg); animation: tfSway2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite; }
.tf-home-btn:focus-visible .tf-vine-3{ transform: rotate(0deg); animation: tfSway3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite; }
@media (hover: hover) and (pointer: fine){
	.tf-home-btn:hover{ background: #C6A15B26; }
	.tf-home-btn:hover .tf-home-arrow{ transform: translateX(-3px); }
	.tf-home-btn:hover .tf-vine-1{ animation: tfSway1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite; }
	.tf-home-btn:hover .tf-vine-2{ transform: rotate(0deg); animation: tfSway2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite; }
	.tf-home-btn:hover .tf-vine-3{ transform: rotate(0deg); animation: tfSway3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite; }
}
.tf-auth-back{ display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 12px; padding: 0; border: 0; background: none; color: var(--tf-brown); font: 600 14px/20px var(--tf-sans); cursor: pointer; }
.tf .tf-auth-demo{ margin-top: 12px; padding: 8px 12px; border: 1px dashed var(--tf-brown); border-radius: 4px; color: var(--tf-ink); font-size: 13px; line-height: 20px; }
.tf-otp{ position: relative; display: grid; grid-template-columns: repeat(6, 52px); gap: 12px; width: fit-content; margin-top: 22px; }
.tf .tf-otp input{ position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; opacity: 0; cursor: text; z-index: 1; }
.tf-otp span{ display: grid; place-items: center; height: 60px; border: 1px solid var(--tf-brown); border-radius: 6px; background: #fff; font: 600 24px/30px var(--tf-sans); color: var(--tf-ink); transition: border-color 150ms ease; }
.tf-otp:focus-within span.is-next{ outline: 2px solid var(--tf-ink); outline-offset: 1px; }
.tf-otp.is-error span{ border-color: #BA1A1A; }
.tf-otp.is-locked span{ border-color: var(--tf-line); background: transparent; }
.tf-otp-status{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 24px; margin-top: 18px; }
.tf .tf-otp-status p{ display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--tf-brown); font-variant-numeric: tabular-nums; }
.tf .tf-otp-status .is-error{ color: #BA1A1A; font-weight: 500; }
.tf .tf-otp-status .is-strong{ color: var(--tf-ink); font-weight: 500; }
.tf-auth-resend{ min-height: 24px; padding: 0; border: 0; background: none; color: var(--tf-ink); font: 600 13px/20px var(--tf-sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tf-auth-tabs button:focus-visible, .tf-auth-google:focus-visible, .tf-auth-back:focus-visible, .tf-auth-resend:focus-visible, .tf-auth-panel .tf-btn:focus-visible, .tf .tf-auth-panel a:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine){
	.tf-auth-tabs button:not([aria-pressed="true"]):hover{ color: var(--tf-ink); }
	.tf-auth-google:hover{ background: var(--tf-ivory); }
	.tf-auth-back:hover{ color: var(--tf-ink); }
}
@media (max-width: 1199px){
	.tf-auth{ grid-template-columns: minmax(0, 1fr) 440px; column-gap: 56px; }
}
@media (max-width: 991px){
	.tf-auth{ grid-template-columns: minmax(0, 440px); justify-content: center; align-items: start; min-height: 0; padding: 32px 0 56px; }
	.tf-auth-photo{ display: none; }
}
@media (max-width: 767px){
	.tf-auth{ width: calc(100% - 40px); padding-top: 28px; }
	.tf-auth-panel h1{ font-size: 32px; line-height: 38px; }
	.tf-otp{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; }
	.tf-otp span{ height: 56px; }
}

/* Responsif: desain FigCraft hanya 1440 px; lebar lain mengikuti susunan yang sama */
@media (max-width: 1279px){
	.tf-about-top, .tf-why-grid, .tf-testimonials-grid{ grid-template-columns: 1fr; gap: 48px; }
	.tf-host{ width: 100%; max-width: 640px; margin-inline: auto; }
	.tf-about-images, .tf-why-images{ grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
	.tf-years{ left: calc(50% - 56px); top: 120px; }
	.tf-features-grid{ grid-template-columns: 1fr; gap: 24px; }
	.tf-feature-list{ grid-template-columns: repeat(2, 1fr); }
	.tf-offer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.tf-best{ order: -1; grid-column: 1 / -1; }
	.tf-offer-col.is-right{ order: 3; }
	.tf-stats{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px){
	.tf-topbar{ display: none; }
	.tf-nav, .tf-actions, .tf-search{ display: none; }
	.tf-mainbar .tf-bar{ height: 72px; }
	.tf-h1{ font-size: 44px; line-height: 46px; letter-spacing: -1px; }
	html[lang="id"] .tf-h1{ line-height: 54px; }
	.tf-h2{ font-size: 38px; line-height: 40px; }
	.tf-br{ display: none; }
	.tf-hero-box{ height: auto; padding-bottom: 40px; }
	.tf-hero-content{ padding: 64px 24px 0; }
	.tf-hero-cards, .tf-product-grid, .tf-service-grid, .tf-how-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-hero-cards > article:last-child{ grid-column: 1 / -1; }
	.tf-service{ height: auto; min-height: 220px; }
	.tf-services-head{ flex-direction: column; align-items: flex-start; gap: 16px; }
	.tf-services-head > p{ width: auto; }
	.tf-about-list{ grid-template-columns: 1fr; gap: 16px; }
	.tf-trust ul{ grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
	.tf .gallery-slider .tf-arrow.is-prev{ left: 8px; }
	.tf .gallery-slider .tf-arrow.is-next{ right: 8px; }
	.tf-about, .tf-services, .tf-why, .tf-features, .tf-products, .tf-how, .tf-offers, .tf-gallery, .tf-testimonials, .tf-blog{ padding-block: 72px; }
	.tf-hero{ padding: 24px 0 72px; }
}
@media (max-width: 767px){
	.tf-wrap{ width: calc(100% - 40px); }
	.tf-hero-box{ margin-inline: 0; }
	/* Tombol TikTok: geser sedikit ke bawah dan kiri; top/left tidak bentrok dengan rotate dan animasi hover */
	.tf-tiktok{ top: 10px; left: -5px; }
	.tf-h1{ font-size: 36px; line-height: 40px; }
	html[lang="id"] .tf-h1{ line-height: 46px; }
	.tf-h2{ font-size: 32px; line-height: 36px; }
	.tf-h3{ font-size: 30px; line-height: 34px; }
	.tf-hero-cards, .tf-service-grid, .tf-how-grid, .tf-offer-grid, .tf-feature-list, .tf-trust ul{ grid-template-columns: minmax(0, 1fr); }
	.tf-product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.tf-product{ padding: 12px; }
	.tf-rate{ flex-wrap: wrap; justify-content: center; }
	.tf-checks{ flex-direction: column; gap: 12px; }
	.tf-about-images figure{ height: 240px; }
	.tf-why-images figure{ height: 260px; }
	.tf-years{ width: 96px; height: 96px; top: 72px; left: calc(50% - 48px); }
	.tf-features-card{ height: auto; gap: 16px; }
	.tf-free{ gap: 10px; padding: 8px 8px 8px 12px; }
	.tf-free-tag{ height: 24px; padding: 0 10px; border-radius: 12px; font-size: 10px; }
	.tf-free-body strong{ font-size: 16px; line-height: 20px; }
	.tf-free-body small{ font-size: 11px; line-height: 15px; }
	.tf-free-go{ width: 32px; height: 32px; }
	.tf-hero-list{ gap: 12px 24px; padding-top: 24px !important; }
	.tf-slider figure{ height: 300px; }
	.tf .gallery-slider .tf-arrow{ top: 130px; }
	.tf-stats{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.tf-rate-box{ left: 16px; width: auto; }
}

/* Hormati pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce){
	.tf-vine{ animation: none !important; transition: none; }
	.tf-home-arrow{ transition: none; }
	.tf-wave, .tf-glow{ animation: none !important; }
	.wow{ animation: none !important; visibility: visible !important; }
	*, *::before, *::after{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Detail produk: susunan seperti halaman produk marketplace (galeri dan pembelian, kartu toko, spesifikasi dan ulasan dengan panel pilihan toko, lalu baris produk), dengan gaya Tuffero */
.tf-cat-link{ display: block; }
.tf-cat-card h3 a{ color: inherit; }
.tf-pd{ padding-top: 32px; padding-bottom: 24px; }
.tf-pd-crumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.tf-pd-crumbs li + li::before{ content: "›"; margin-right: 8px; color: var(--tf-brown); }
.tf-pd-crumbs a{ color: var(--tf-brown); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
.tf-pd-crumbs [aria-current]{ color: var(--tf-ink); font-weight: 500; }
.tf-pd-grid{ display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 24px; padding: 24px; border: 1px solid var(--tf-line); border-radius: 16px; background: #fff; }
.tf-pd-main{ aspect-ratio: 1; margin: 0; border-radius: 12px; background: var(--tf-ivory); overflow: hidden; }
.tf-pd-main img{ display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 180ms var(--tf-ease-out); }
@starting-style{ .tf-pd-main img{ opacity: 0; } }
.tf-pd-thumbs{ display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 5); gap: 8px; margin: 12px 0 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.tf-pd-thumbs li{ scroll-snap-align: start; }
.tf-pd-thumbs button{ display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--tf-ivory); overflow: hidden; cursor: pointer; opacity: 0.7; transition: opacity 150ms ease, border-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-pd-thumbs button[aria-current="true"]{ border-color: var(--tf-ink); opacity: 1; }
.tf-pd-thumbs button:active{ transform: scale(0.97); }
.tf-pd-thumbs img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-pd-share{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: 14px; line-height: 20px; }
.tf-pd-share > span{ color: var(--tf-brown); }
.tf-pd-share a, .tf-pd-share button{ display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--tf-line); border-radius: 999px; background: #fff; color: var(--tf-ink); font: 500 13px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-pd-share a:active, .tf-pd-share button:active{ transform: scale(0.97); }
.tf-pd-share a:focus-visible, .tf-pd-share button:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-pd-badge{ display: inline-block; padding: 3px 12px; border-radius: 999px; background: #C6A15B33; color: var(--tf-ink); font: 600 12px/16px var(--tf-sans); letter-spacing: 0.4px; }
.tf-pd-title{ margin: 12px 0 0 !important; font: 400 38px/44px var(--tf-serif); letter-spacing: -0.5px; color: var(--tf-ink); }
.tf-pd-rating{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--tf-brown); }
.tf-pd-rating strong{ color: var(--tf-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tf-pd-rating small{ font-size: 12px; opacity: 0.85; }
.tf-stars-bar{ position: relative; display: inline-flex; line-height: 0; }
.tf-stars-bar i, .tf-stars-bar b{ display: inline-flex; gap: 2px; font-style: normal; }
.tf-stars-bar i{ color: var(--tf-line); }
.tf-stars-bar b{ position: absolute; left: 0; top: 0; width: var(--pct); overflow: hidden; color: var(--tf-gold); }
.tf-stars-bar svg{ flex: none; }
.tf-pd-pricebox{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 20px; padding: 18px 24px; border-radius: 12px; background: linear-gradient(135deg, #C6A15B2E, #C6A15B12); font-variant-numeric: tabular-nums; }
.tf-pd-pricebox strong{ font: 500 40px/46px var(--tf-serif); color: var(--tf-ink); }
.tf-pd-pricebox s{ font-size: 16px; line-height: 24px; color: var(--tf-brown); }
.tf-pd-pricebox em{ align-self: center; padding: 2px 8px; border-radius: 4px; background: var(--tf-ink); color: var(--tf-ivory); font: 600 12px/16px var(--tf-sans); font-style: normal; }
.tf .tf-pd-note{ margin: 8px 0 0; font-size: 13px; line-height: 20px; }
.tf-pd-rows{ margin-top: 16px; }
.tf-pd-row{ display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--tf-line); }
.tf-pd-row:first-child{ border-top: 1px solid var(--tf-line); }
.tf-pd-row > span, .tf-pd-row > label{ font: 500 14px/20px var(--tf-sans); color: var(--tf-brown); }
.tf-pd-ship{ display: flex; gap: 12px; color: var(--tf-brown); }
.tf-pd-ship svg{ flex: none; margin-top: 1px; }
.tf-pd-ship b{ display: block; font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-pd-ship small{ display: block; margin-top: 2px; font-size: 13px; line-height: 20px; }
.tf-pd-opts{ display: flex; flex-wrap: wrap; gap: 8px; }
.tf-pd-opt{ position: relative; cursor: pointer; }
.tf-pd-opt input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tf-pd-opt span{ display: grid; place-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--tf-brown); border-radius: 4px; background: #fff; color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-pd-opt input:checked + span{ background: var(--tf-ink); border-color: var(--tf-ink); color: var(--tf-ivory); }
.tf-pd-opt input:focus-visible + span{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-pd-opt:active span{ transform: scale(0.97); }
.tf-pd-stepper{ display: inline-flex; align-items: stretch; justify-self: start; height: 44px; border: 1px solid var(--tf-brown); border-radius: 4px; background: #fff; overflow: hidden; }
.tf-pd-stepper button{ display: grid; place-items: center; width: 44px; border: 0; background: transparent; color: var(--tf-ink); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-pd-stepper button:active:not(:disabled){ transform: scale(0.92); }
.tf-pd-stepper button:disabled{ opacity: 0.35; cursor: not-allowed; }
.tf-pd-stepper input{ width: 56px; border: 0; border-inline: 1px solid var(--tf-line); background: transparent; color: var(--tf-ink); text-align: center; font: 600 16px/24px var(--tf-sans); font-variant-numeric: tabular-nums; }
.tf-pd-stepper input:focus-visible, .tf-pd-stepper button:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: -2px; }
.tf-pd-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tf-pd-cta .tf-btn, .tf-pd-add{ height: 52px; min-width: 200px; padding: 0 28px; font-size: 15px; }
.tf-pd-add{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--tf-ink); border-radius: 4px; background: #C6A15B1F; color: var(--tf-ink); font: 600 15px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-pd-add:active{ transform: scale(0.97); }
.tf-pd-add:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }


.tf-pd-cols{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 24px; }
.tf-pd-card, .tf-pd-picks{ padding: 24px; border: 1px solid var(--tf-line); border-radius: 16px; background: #fff; }
.tf-pd-card + .tf-pd-card{ margin-top: 24px; }
.tf-pd-card h2, .tf-pd-picks h2{ font: 500 24px/30px var(--tf-serif); color: var(--tf-ink); }
.tf-pd-specs{ margin: 16px 0 0; }
.tf-pd-specs div{ display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px 0; }
.tf-pd-specs div + div{ border-top: 1px solid var(--tf-line); }
.tf-pd-specs dt{ font-size: 14px; line-height: 22px; color: var(--tf-brown); }
.tf-pd-specs dd{ margin: 0; font: 500 14px/22px var(--tf-sans); color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-pd-specs dd a{ text-decoration: underline; text-underline-offset: 3px; }
.tf .tf-pd-text{ margin-top: 12px; font-size: 15px; line-height: 26px; }
.tf-pd-score{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; padding: 18px 24px; border-radius: 12px; background: #C6A15B1A; }
.tf-pd-score-num{ display: flex; align-items: baseline; gap: 6px; }
.tf-pd-score-num strong{ font: 500 44px/48px var(--tf-serif); color: var(--tf-ink); }
.tf-pd-score-num span{ font-size: 14px; color: var(--tf-brown); }
.tf .tf-pd-score p{ margin: 6px 0 0; font-size: 13px; line-height: 20px; }
.tf .tf-pd-source{ margin: 12px 0 0; font-size: 13px; line-height: 20px; }
.tf-pd-reviews{ margin: 8px 0 16px; padding: 0; list-style: none; }
.tf-pd-reviews li{ display: flex; gap: 14px; padding: 16px 0; }
.tf-pd-reviews li + li{ border-top: 1px solid var(--tf-line); }
.tf-pd-avatar{ display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tf-ink); color: var(--tf-ivory); font: 600 15px/20px var(--tf-sans); }
.tf-pd-reviews strong{ font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf .tf-pd-reviews p{ margin: 4px 0 0; font-size: 14px; line-height: 22px; }
.tf-pd-picks ul{ margin: 8px 0 0; padding: 0; list-style: none; }
.tf-pd-picks li + li{ border-top: 1px solid var(--tf-line); }
.tf-pd-picks a{ display: flex; gap: 12px; padding: 12px 0; }
.tf-pd-picks img{ flex: none; width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--tf-ivory); }
.tf-pd-picks a span{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf-pd-picks b{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-pd-picks strong{ font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); font-variant-numeric: tabular-nums; }

.tf-pd-also{ margin-top: 40px; }
.tf-pd-also{ padding-bottom: 72px; }
.tf-pd-also h2{ font: 400 30px/36px var(--tf-serif); color: var(--tf-ink); }
.tf-pc-grid{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.tf-pc{ display: flex; flex-direction: column; height: 100%; border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; overflow: hidden; transition: box-shadow 200ms var(--tf-ease-out), transform 200ms var(--tf-ease-out); }
.tf-pc figure{ aspect-ratio: 1; margin: 0; background: var(--tf-ivory); overflow: hidden; }
.tf-pc img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-pc h3{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; margin: 12px 12px 0; font: 500 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-pc-price{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 8px 12px 0; font-variant-numeric: tabular-nums; }
.tf-pc-price strong{ font: 700 15px/22px var(--tf-sans); color: var(--tf-ink); }
.tf-pc-price s{ font-size: 12px; line-height: 16px; color: var(--tf-brown); }
.tf .tf-pc-meta{ margin: 4px 12px 12px; font-size: 12px; line-height: 18px; }
.tf-pc:focus-visible, .tf-pd-picks a:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-pd-missing{ padding: 96px 0; text-align: center; }
.tf .tf-pd-missing p{ margin: 12px 0 24px; }
.tf-pd-sticky{ display: none; }
@media (hover: hover) and (pointer: fine){
	.tf-pd-crumbs a:hover{ text-decoration-color: currentColor; }
	.tf-pd-thumbs button:hover{ opacity: 1; }
	.tf-pd-share a:hover, .tf-pd-share button:hover{ background: var(--tf-ivory); border-color: var(--tf-brown); }
	.tf-pd-opt:hover input:not(:checked) + span{ background: var(--tf-ivory); }
	.tf-pd-stepper button:hover:not(:disabled){ background: var(--tf-ivory); }
	.tf-pd-add:hover{ background: var(--tf-ink); color: var(--tf-ivory); }
	.tf-pc:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px #2B1B141F; }
	.tf-pd-picks a:hover b{ text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 1279px){
	.tf-pd-grid{ grid-template-columns: 420px minmax(0, 1fr); gap: 32px; }
	.tf-pc-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px){
	.tf-pd-grid{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.tf-pd-cols{ grid-template-columns: minmax(0, 1fr); }
	.tf-pc-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px){
	.tf-pd{ padding-top: 20px; }
	.tf-pd-grid{ padding: 16px; border-radius: 12px; }
	.tf-pd-title{ font-size: 30px; line-height: 36px; }
	.tf-pd-pricebox{ padding: 14px 16px; }
	.tf-pd-pricebox strong{ font-size: 32px; line-height: 38px; }
	.tf-pd-row{ grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
	.tf-pd-cta{ flex-direction: column; }
	.tf-pd-cta .tf-btn, .tf-pd-add{ width: 100%; }
	.tf-pd-card, .tf-pd-picks{ padding: 18px 16px; border-radius: 12px; }
	.tf-pd-specs div{ grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
	.tf-pd-score{ padding: 14px 16px; }
	.tf-pc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.tf-pd-also h2{ font-size: 26px; line-height: 32px; }
	.tf-pd-sticky{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tf-line); background: #fffffff2; box-shadow: 0 -8px 24px #2B1B1414; transform: translateY(100%); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1); }
	.tf-pd-sticky.is-on{ transform: none; }
	.tf-pd-sticky div{ display: flex; flex-direction: column; }
	.tf-pd-sticky span{ font-size: 12px; line-height: 16px; }
	.tf-pd-sticky strong{ font: 500 22px/28px var(--tf-serif); color: var(--tf-ink); font-variant-numeric: tabular-nums; }
	.tf-pd-sticky .tf-btn{ flex: none; height: 48px; }
	.tf:has(.tf-pd-sticky) .tf-footer{ padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce){
	.tf-pd-main img, .tf-pd-sticky, .tf-pc{ transition: none; }
}

/* Detail produk: penyempurnaan tampilan (kartu lebih lembut, kedalaman, detail kecil); susunan tidak berubah */
.tf-pd-grid, .tf-pd-card, .tf-pd-picks{ border-color: #E3D5C0B3; border-radius: 20px; box-shadow: 0 1px 2px #2B1B1408, 0 12px 32px -10px #2B1B1417; }
.tf-pd-grid{ padding: 28px; gap: 56px; }
.tf-pd-main{ border-radius: 16px; box-shadow: inset 0 0 0 1px #2B1B140F; }
.tf-pd-main img{ transition: opacity 180ms var(--tf-ease-out), transform 600ms var(--tf-ease-out); }
.tf-pd-thumbs{ scrollbar-width: none; gap: 10px; grid-auto-columns: calc((100% - 40px) / 5); }
.tf-pd-thumbs::-webkit-scrollbar{ display: none; }
.tf-pd-thumbs button{ border-radius: 12px; }
.tf-pd-share a, .tf-pd-share button{ background: var(--tf-ivory); border-color: transparent; }
.tf-pd-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; background: #C6A15B2E; }
.tf-pd-badge::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tf-gold); }
.tf-pd-title{ font-size: 40px; line-height: 46px; letter-spacing: -0.8px; text-wrap: balance; }
.tf-pd-rating{ margin-top: 14px; }
.tf-pd-rating strong{ text-decoration: none; padding: 1px 8px; border-radius: 6px; background: var(--tf-ink); color: var(--tf-ivory); font-size: 13px; }
.tf-pd-pricebox{ margin-top: 22px; padding: 20px 26px; border: 1px solid #C6A15B4D; border-radius: 16px; background: linear-gradient(135deg, #C6A15B33, #C6A15B0F 70%); }
.tf-pd-pricebox strong{ font-size: 44px; line-height: 50px; letter-spacing: -0.5px; }
.tf-pd-pricebox em{ padding: 3px 10px; border-radius: 999px; }
.tf-pd-row{ padding: 18px 0; border-color: #E3D5C0B3; }
.tf-pd-row > span, .tf-pd-row > label{ font-weight: 600; letter-spacing: 0.2px; }
.tf-pd-ship svg{ box-sizing: content-box; padding: 8px; margin-top: 0; border-radius: 50%; background: var(--tf-ivory); color: var(--tf-ink); }
.tf-pd-ship{ align-items: center; }
.tf-pd-stepper, .tf-pd-opt span{ border-radius: 10px; }
.tf-pd-stepper{ box-shadow: 0 1px 2px #2B1B1410; }
.tf-pd-cta{ gap: 14px; }
.tf-pd-cta > *{ flex: 1 1 0; max-width: 250px; border-radius: 12px; }
.tf-pd-cta .tf-btn{ box-shadow: 0 10px 22px -8px #C6A15BB3; }
.tf-pd-add{ background: #fff; }

.tf-pd-cols{ gap: 28px; }
.tf-pd-card + .tf-pd-card{ margin-top: 28px; }
.tf-pd-card h2, .tf-pd-picks h2{ position: relative; padding-bottom: 14px; }
.tf-pd-card h2::after, .tf-pd-picks h2::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--tf-gold); }
.tf-pd-specs{ margin-top: 12px; }
.tf-pd-specs div{ padding: 14px 4px; border-color: #E3D5C0B3; }
.tf-pd-specs dt{ font-weight: 500; }
.tf-pd-score{ border: 1px solid #C6A15B40; border-radius: 16px; background: linear-gradient(135deg, #C6A15B2B, #C6A15B0D 70%); }
.tf-pd-reviews{ margin-top: 12px; }
.tf-pd-reviews li{ padding: 16px 18px; border-radius: 14px; background: var(--tf-ivory); }
.tf-pd-reviews li + li{ margin-top: 10px; border-top: 0; }
.tf-pd-avatar{ background: linear-gradient(135deg, #5A3E30, var(--tf-ink)); }
.tf-pd-picks{ position: sticky; top: 104px; }
.tf-pd-picks li + li{ border-top-color: #E3D5C0B3; }
.tf-pd-picks a{ margin: 0 -10px; padding: 12px 10px; border-radius: 14px; transition: background-color 150ms ease; }
.tf-pd-picks img{ width: 76px; height: 76px; border-radius: 12px; }
.tf-pd-also h2::after{ content: ""; display: block; width: 40px; height: 3px; margin-top: 12px; border-radius: 2px; background: var(--tf-gold); }
.tf-pc{ border-color: #E3D5C0B3; border-radius: 16px; box-shadow: 0 1px 2px #2B1B1408; }
.tf-pc img{ transition: transform 500ms var(--tf-ease-out); }
.tf-pc h3{ margin-top: 14px; }
.tf-pc-price strong{ font-size: 16px; }
.tf-pd-sticky{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (hover: hover) and (pointer: fine){
	.tf-pd-main:hover img{ transform: scale(1.04); }
	.tf-pc:hover img{ transform: scale(1.05); }
	.tf-pd-picks a:hover{ background: var(--tf-ivory); }
	.tf-pd-reviews li{ transition: box-shadow 200ms var(--tf-ease-out); }
	.tf-pd-reviews li:hover{ box-shadow: 0 6px 18px -8px #2B1B1426; }
	.tf-pd-cta .tf-btn:hover{ box-shadow: 0 12px 26px -8px #C6A15BCC; }
}
@media (max-width: 1279px){
	.tf-pd-grid{ gap: 36px; }
}
@media (max-width: 991px){
	.tf-pd-picks{ position: static; }
}
@media (max-width: 767px){
	.tf-pd-grid, .tf-pd-card, .tf-pd-picks{ border-radius: 16px; }
	.tf-pd-grid{ padding: 16px; gap: 24px; }
	.tf-pd-title{ font-size: 32px; line-height: 38px; }
	.tf-pd-pricebox{ padding: 16px 18px; }
	.tf-pd-pricebox strong{ font-size: 34px; line-height: 40px; }
	.tf-pd-cta > *{ flex: none; max-width: none; }
}
@media (prefers-reduced-motion: reduce){
	.tf-pd-main img, .tf-pc img, .tf-pd-picks a, .tf-pd-reviews li{ transition: none; }
	.tf-pd-main:hover img, .tf-pc:hover img{ transform: none; }
}

/* Detail produk: jarak galeri lebih lega (foto, thumbnail, bagikan) */
.tf-pd-thumbs{ margin-top: 20px; gap: 12px; grid-auto-columns: calc((100% - 48px) / 5); padding: 2px 2px 6px; }
.tf-pd-share{ margin-top: 24px; padding-top: 20px; border-top: 1px solid #E3D5C0B3; }

/* `.tf ul` (0,1,1) mengalahkan kelas tunggal; tiga daftar ini butuh jarak sendiri */
.tf .tf-pd-thumbs{ margin: 20px 0 0; padding: 2px 2px 6px; }
.tf .tf-pd-reviews{ margin: 12px 0 16px; }
.tf .tf-pc-grid{ margin: 24px 0 0; }

/* Kartu produk (Mungkin Anda Juga Suka): `.tf p` mengalahkan kelas tunggal, jadi harga tidak punya inset; rapikan jarak dan baris info */
.tf-pc h3{ margin: 16px 16px 0; font-size: 15px; line-height: 22px; min-height: 44px; }
.tf .tf-pc-price{ margin: 10px 16px 0; }
.tf .tf-pc-meta{ display: flex; flex-direction: column; gap: 2px; margin: 8px 16px 16px; padding-top: 10px; border-top: 1px solid #E3D5C080; font-size: 12px; line-height: 18px; }
.tf-pc-meta span{ display: block; }
.tf .tf-pc-price{ gap: 2px 6px; }
.tf-pc-price strong{ font-size: 15px; }

/* Ikon keranjang di pencarian produk (gambar shopbag.webp). Hover hanya di mouse; sentuh memakai :active + lencana memantul saat jumlah berubah. */
.tf-bag{ display: block; width: 40px; height: 40px; object-fit: contain; transition: transform 200ms var(--tf-ease-out); }
.tf-cat-cart:active .tf-bag{ transform: scale(0.88); transition-duration: 90ms; }
.tf-cat-cart:active{ background: #C6A15B38; }
.tf-cat-cart-count{ animation: tfBadgePop 320ms var(--tf-ease-out); }
@keyframes tfBadgePop{ 0%{ transform: scale(0.4); opacity: 0; } 60%{ transform: scale(1.2); opacity: 1; } 100%{ transform: scale(1); } }
@media (hover: hover) and (pointer: fine){
	.tf-cat-cart:hover .tf-bag{ transform: translateY(-3px) rotate(-6deg) scale(1.06); }
	.tf-cat-cart:hover:active .tf-bag{ transform: scale(0.88); }
}
@media (max-width: 1023px){
	.tf-cat-cart{ width: 52px; height: 52px; -webkit-tap-highlight-color: transparent; }
	.tf-bag{ width: 34px; height: 34px; }
	.tf-cat-cart-count{ top: 2px; right: 0; }
}
@media (prefers-reduced-motion: reduce){
	.tf-bag, .tf-cat-cart{ transition: none; }
	.tf-cat-cart:hover .tf-bag{ transform: none; }
	.tf-cat-cart-count{ animation: none; }
}
@media (prefers-reduced-motion: reduce){ .tf-bag path{ transition: none; } }

/* ---------- Keranjang, checkout, status pesanan ---------- */
.tf-shop{ padding-block: 48px 96px; }
.tf-shop-title{ font: 400 40px/48px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-shop-lead{ margin-top: 8px; color: var(--tf-brown); }
.tf-shop-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 24px; margin-top: 32px; }
.tf-shop-stack{ display: grid; gap: 24px; min-width: 0; }
.tf-shop-card{ padding: 24px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; }
.tf-shop-card h2{ font: 500 24px/32px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-shop-note{ margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--tf-brown); }
.tf .tf-shop-issue{ margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #BA1A1A; }
.tf-shop-link{ padding: 0; border: 0; background: transparent; color: var(--tf-ink); font: 600 14px/24px var(--tf-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tf-shop-link:disabled{ opacity: 0.55; cursor: default; }
.tf-shop-fields{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.tf-shop-fields .tf-auth-field{ margin-top: 16px; min-width: 0; }
.tf-shop-fields .is-wide{ grid-column: 1 / -1; }
.tf-shop-rates{ display: grid; gap: 8px; margin-top: 16px; }
.tf-shop-rates label{ display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border: 1px solid var(--tf-brown); border-radius: 4px; font: 500 15px/22px var(--tf-sans); color: var(--tf-ink); cursor: pointer; }
.tf-shop-rates label.is-on{ outline: 2px solid var(--tf-ink); outline-offset: -1px; background: #C6A15B1F; }
.tf-shop-rates input{ flex: none; accent-color: var(--tf-ink); }
.tf-shop-rates strong{ margin-left: auto; font-weight: 600; white-space: nowrap; }
.tf-shop-summary{ position: sticky; top: 104px; }
.tf .tf-shop-lines{ display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.tf-shop-lines li{ display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; color: var(--tf-brown); }
.tf-shop-lines span:last-child{ flex: none; color: var(--tf-ink); }
.tf-shop-summary dl{ display: grid; gap: 8px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--tf-line); }
.tf-shop-summary dl div{ display: flex; justify-content: space-between; gap: 16px; }
.tf-shop-summary dt{ font-weight: 400; color: var(--tf-brown); }
.tf-shop-summary dd{ margin: 0; font-weight: 600; color: var(--tf-ink); }
.tf-shop-summary .is-total{ padding-top: 8px; font-size: 18px; }
.tf-shop-summary .tf-btn{ margin-top: 16px; }
.tf .tf-order-steps{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.tf-order-steps li{ display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; text-align: center; color: var(--tf-brown); }
.tf-order-steps span{ display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--tf-brown); border-radius: 50%; background: #fff; font-weight: 600; }
.tf-order-steps .is-done span{ border-color: var(--tf-ink); background: var(--tf-ink); color: var(--tf-ivory); }
.tf-order-steps .is-now{ font-weight: 600; color: var(--tf-ink); }
.tf-order-steps .is-now span{ border-color: var(--tf-gold); background: var(--tf-gold); color: var(--tf-ink); }
.tf .tf-order-clock{ margin-top: 16px; font-size: 16px; color: var(--tf-ink); }
.tf-order-clock strong{ font-variant-numeric: tabular-nums; }
.tf-order-address{ display: grid; gap: 2px; margin: 8px 0 0; font-style: normal; font-size: 15px; line-height: 23px; color: var(--tf-ink); }
.tf-lookup .tf-shop-card{ width: min(520px, 100%); margin-inline: auto; }
.tf .tf-account-section{ margin-top: 32px; }
.tf-account-cta{ margin-top: 16px; }
.tf .tf-account-orders{ padding: 0 24px; list-style: none; }
.tf-account-orders li + li{ border-top: 1px solid var(--tf-line); }
.tf-account-orders a{ display: flex; justify-content: space-between; gap: 16px; padding-block: 16px; color: var(--tf-ink) !important; }
.tf-account-orders span{ display: grid; gap: 2px; min-width: 0; }
.tf-account-orders span:last-child{ flex: none; text-align: right; }
.tf-account-orders strong{ font-weight: 600; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.tf-account-orders em{ font-style: normal; font-size: 13px; line-height: 20px; color: var(--tf-brown); }
.tf-account-orders a:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-account-pages{ display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; font-size: 14px; }
.tf-account-check{ display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; font: 500 14px/20px var(--tf-sans); color: var(--tf-ink); cursor: pointer; }
.tf-account-check input{ flex: none; width: 18px; height: 18px; accent-color: var(--tf-ink); }
.tf-account-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 16px; }
.tf .tf-account-addresses{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.tf-account-addresses li p{ font-size: 14px; line-height: 22px; color: var(--tf-brown); overflow-wrap: anywhere; }
.tf-account-addresses li h2{ margin-bottom: 8px; }
.tf-account-badge{ display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #C6A15B33; font: 600 12px/18px var(--tf-sans); color: var(--tf-ink); vertical-align: middle; }
.tf .tf-auth-input select{ flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 400 15px/23px var(--tf-sans); color: var(--tf-ink); }
@media (max-width: 991px){ .tf .tf-account-addresses{ grid-template-columns: minmax(0, 1fr); } }
.tf-lookup .tf-shop-title{ margin-top: 8px; font-size: 32px; line-height: 40px; }
.tf-lookup form .tf-btn{ margin-top: 20px; }
.tf-shop-link:focus-visible, .tf-shop-rates label:has(:focus-visible){ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
@media (max-width: 991px){
	.tf-shop-grid{ grid-template-columns: minmax(0, 1fr); }
	.tf-shop-summary{ position: static; }
}
@media (max-width: 575px){
	.tf-shop{ padding-block: 32px 64px; }
	.tf-shop-title{ font-size: 32px; line-height: 40px; }
	.tf-shop-card{ padding: 20px; }
	.tf-shop-fields{ grid-template-columns: minmax(0, 1fr); }
	.tf-order-steps li{ font-size: 11px; line-height: 14px; }
}
.tf-order-reason{ width: 100%; padding: 10px 14px; border: 1px solid var(--tf-brown); border-radius: 4px; background: #fff; color: var(--tf-ink); font: 400 16px/24px var(--tf-sans); }
.tf-order-reason:focus{ outline: 2px solid var(--tf-ink); outline-offset: 1px; }
.tf-order-channel{ display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0; padding: 0; border: 0; font-size: 15px; color: var(--tf-ink); }
.tf-order-channel legend{ width: 100%; margin-bottom: 6px; padding: 0; font: 600 14px/20px var(--tf-sans); }
.tf-order-channel input{ accent-color: var(--tf-ink); }
.tf-order-contact{ margin-top: 12px; }
.tf .tf-pd-stock{ margin: 0; padding-top: 12px; font: 600 13px/18px var(--tf-sans); color: var(--tf-brown); }
.tf .tf-pd-stock.is-out{ color: #9B2C2C; }
.tf-sr{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tf-voucher{ margin-top: 16px; }
.tf-voucher-pick{ display: block; width: 100%; min-height: 44px; padding: 10px 16px; border: 1px dashed var(--tf-brown); border-radius: 4px; background: transparent; color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); text-align: left; cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--tf-ease-out); }
.tf-voucher-pick:hover{ background: #C6A15B1F; }
.tf-voucher-pick:active{ transform: scale(0.98); }
.tf-voucher-applied{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 1px solid var(--tf-gold); border-radius: 4px; background: #C6A15B1F; color: var(--tf-ink); font-size: 14px; line-height: 20px; }
.tf-voucher-applied small{ display: block; color: var(--tf-brown); }
.tf-voucher-dialog{ width: min(92vw, 480px); max-height: min(86dvh, 640px); padding: 0; border: 0; border-radius: 8px; background: var(--tf-ivory); color: var(--tf-brown); overflow: hidden; }
.tf-voucher-dialog::backdrop{ background: #2B1B14B3; }
/* Masuk dan keluar dialog diatur .tf-co-dialog (transisi, bisa diinterupsi). */
.tf-voucher-sheet{ display: flex; flex-direction: column; gap: 12px; max-height: min(86dvh, 640px); padding: 20px; overflow-y: auto; }
.tf-voucher-sheet header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tf-voucher-sheet h2{ margin: 0; font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf-voucher-close{ width: 44px; height: 44px; border: 0; background: transparent; color: var(--tf-ink); font-size: 28px; line-height: 1; cursor: pointer; }
.tf-voucher-form{ display: flex; gap: 8px; }
.tf-voucher-form input{ flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--tf-brown); border-radius: 4px; background: #fff; color: var(--tf-ink); font: 500 15px/22px var(--tf-sans); text-transform: uppercase; }
.tf-voucher-form input:focus{ outline: 2px solid var(--tf-ink); outline-offset: 1px; }
.tf .tf-voucher-list{ display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tf-voucher-list li{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--tf-gold); border-left-width: 4px; border-radius: 4px; background: #fff; }
.tf-voucher-list li.is-off{ border-color: var(--tf-line); background: #F6F0E5; opacity: 0.75; }
.tf-voucher-list li > div{ display: grid; gap: 2px; min-width: 0; }
.tf-voucher-list strong{ font: 600 16px/22px var(--tf-sans); color: var(--tf-ink); }
.tf-voucher-list span{ font-size: 13px; line-height: 18px; color: var(--tf-ink); }
.tf-voucher-list small{ font-size: 12px; line-height: 16px; color: var(--tf-brown); }
.tf-voucher-list small.tf-voucher-need{ color: #9B2C2C; }
.tf-voucher-list .tf-btn{ flex: none; height: 36px; padding: 0 16px; }
.tf-voucher-list .tf-btn:disabled{ opacity: 0.5; cursor: not-allowed; }
html:has(.tf-voucher-dialog[open]){ overflow: hidden; }
.tf-off{ display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 4px; background: #9B2C2C; color: #fff; font: 700 11px/18px var(--tf-sans); font-style: normal; vertical-align: middle; }
.tf-price s{ font-size: 12px; font-weight: 400; color: var(--tf-brown); }
.tf-shop-summary dl .tf-saving dt, .tf-shop-summary dl .tf-saving dd{ color: #9B2C2C; font-weight: 500; }
.tf .tf-voucher-page{ max-width: 720px; margin-top: 24px; }
.tf-voucher-tabs{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tf-voucher-tabs button{ min-height: 40px; padding: 0 16px; border: 1px solid var(--tf-brown); border-radius: 999px; background: transparent; color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--tf-ease-out); }
.tf-voucher-tabs button:active{ transform: scale(0.97); }
.tf-voucher-tabs button.is-on{ background: var(--tf-ink); border-color: var(--tf-ink); color: var(--tf-ivory); }
.tf-voucher-mine{ margin-top: 24px; }
/* Halaman Promo: kepala cokelat (pola akun), kartu kampanye dengan lencana di atas gambar, detail dengan hitung mundur. */
.tf .tf-promo-eyebrow{ margin: 0; font: 600 12px/16px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-gold); }
.tf-promo-hero .tf-acct-title{ margin-top: 2px; }
.tf .tf-campaign-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.tf-campaign-list a{ display: flex; flex-direction: column; height: 100%; border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; color: var(--tf-ink) !important; overflow: hidden; transition: border-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--tf-ease-out); }
.tf-campaign-list a:active{ transform: scale(0.99); }
.tf-campaign-list a:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-campaign-media{ position: relative; display: block; aspect-ratio: 3 / 1; background: var(--tf-ink); overflow: hidden; }
.tf-campaign-media img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--tf-ease-out); }
.tf-campaign-blank{ display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(120% 160% at 100% 0%, #C6A15B40 0%, transparent 60%), var(--tf-ink); color: var(--tf-gold); }
.tf-campaign-blank .tf-acct-svg{ width: 40px; height: 40px; opacity: 0.85; }
.tf-campaign-badges{ display: flex; flex-wrap: wrap; gap: 6px; }
.tf-campaign-media .tf-campaign-badges{ position: absolute; top: 12px; left: 12px; right: 12px; }
.tf-campaign-badges em{ display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 600 12px/18px var(--tf-sans); font-style: normal; }
.tf-campaign-flash{ background: #BA1A1A; color: #fff; }
.tf-campaign-flash .tf-acct-svg{ width: 13px; height: 13px; fill: currentColor; stroke: none; }
.tf-campaign-state{ background: #F6F0E5F2; color: var(--tf-ink); }
.tf-campaign-state::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tf-brown); }
.tf-campaign-state.is-live::before{ background: #2E6B3E; box-shadow: 0 0 0 3px #2E6B3E33; }
.tf-promo-card-body{ display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 20px 8px; }
.tf-promo-card-body strong{ font: 600 22px/28px var(--tf-serif); color: var(--tf-ink); overflow-wrap: anywhere; }
.tf-promo-card-body small, .tf .tf-promo-dates{ display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 20px; color: var(--tf-brown); }
.tf-promo-card-body small .tf-acct-svg, .tf-promo-dates .tf-acct-svg{ width: 16px; height: 16px; }
.tf-promo-card-body .tf-acct-more{ margin-top: auto; padding-top: 4px; }

.tf-promo-back{ display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 12px/16px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-brown) !important; }
.tf-promo-back .tf-acct-svg{ width: 16px; height: 16px; transition: transform 200ms var(--tf-ease-out); }
.tf-promo-back:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-promo-head{ border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; overflow: hidden; }
.tf-promo-banner{ display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.tf-promo-head-body{ padding: 24px 28px 28px; }
.tf-promo-title{ margin: 12px 0 0; font: 400 40px/48px var(--tf-serif); letter-spacing: -0.01em; color: var(--tf-ink); overflow-wrap: anywhere; }
.tf .tf-promo-desc{ max-width: 720px; margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--tf-brown); }
.tf-promo-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--tf-line); }
.tf .tf-countdown{ display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--tf-ink); font: 600 14px/20px var(--tf-sans); color: var(--tf-ivory); font-variant-numeric: tabular-nums; }
.tf-countdown .tf-acct-svg{ width: 18px; height: 18px; color: var(--tf-gold); }
.tf .tf-promo-h2{ margin: 40px 0 16px; font: 500 28px/36px var(--tf-serif); color: var(--tf-ink); }

@media (hover: hover) and (pointer: fine){
	.tf-campaign-list a:hover{ border-color: #C6A15B99; box-shadow: 0 8px 24px -4px rgba(43, 27, 20, 0.08); }
	.tf-campaign-list a:hover .tf-campaign-media img{ transform: scale(1.03); }
	.tf-campaign-list a:hover .tf-acct-more{ text-decoration-color: currentColor; }
	.tf-campaign-list a:hover .tf-acct-more .tf-acct-svg{ transform: translateX(3px); }
	.tf-promo-back:hover{ color: var(--tf-ink) !important; }
	.tf-promo-back:hover .tf-acct-svg{ transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce){
	.tf-campaign-list a:hover .tf-campaign-media img, .tf-campaign-list a:hover .tf-acct-more .tf-acct-svg, .tf-promo-back:hover .tf-acct-svg{ transform: none; }
}
@media (max-width: 991px){
	.tf .tf-campaign-list{ gap: 16px; }
	.tf-promo-title{ font-size: 34px; line-height: 42px; }
}
@media (max-width: 575px){
	.tf .tf-campaign-list{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.tf-promo-card-body{ padding: 14px 16px 6px; }
	.tf-promo-card-body strong{ font-size: 20px; line-height: 26px; }
	.tf-promo-head-body{ padding: 18px 18px 20px; }
	.tf-promo-title{ font-size: 28px; line-height: 34px; }
	.tf .tf-promo-desc{ font-size: 15px; line-height: 24px; }
	.tf .tf-countdown{ width: 100%; justify-content: center; }
	.tf .tf-promo-h2{ margin-top: 32px; font-size: 24px; line-height: 32px; }
}

/* Halaman keranjang (FigCraft "03d Keranjang" dan "03m Keranjang · Mobile"): susunan ala marketplace, gaya Tuffero.
   Checkbox hanya untuk hapus sekaligus; total dan checkout tetap seluruh keranjang. */
.tf-cartp{ --cartp-cols: 44px minmax(0, 1fr) 150px 150px 140px 104px; }
.tf-cartp-crumbs{ margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--tf-brown); }
.tf-cartp-crumbs a{ text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
.tf-cartp-crumbs [aria-current]{ color: var(--tf-ink); font-weight: 500; }
.tf-cartp-title{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.tf-cartp-count{ padding: 2px 10px; border-radius: 999px; background: #C6A15B33; font: 600 13px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-cartp-body{ display: grid; gap: 16px; margin-top: 28px; }
.tf-cartp-head, .tf-cartp-row{ display: grid; grid-template-columns: var(--cartp-cols); align-items: center; }
.tf-cartp-head{ padding: 6px 24px 6px 11px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; font: 500 13px/18px var(--tf-sans); color: var(--tf-brown); }
.tf-cartp-head span:nth-child(n+3){ text-align: center; }
.tf-cartp-group{ border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; overflow: hidden; }
.tf-cartp-group-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 60px; padding: 8px 24px 8px 11px; border-bottom: 1px solid var(--tf-line); color: var(--tf-ink); }
.tf-cartp-group.is-gone .tf-cartp-group-head{ justify-content: space-between; padding-left: 24px; }
.tf .tf-cartp-group-head h2{ font: 600 16px/24px var(--tf-sans); color: var(--tf-ink); }
.tf-cartp-group.is-gone h2{ color: var(--tf-brown); }
.tf-cartp-tag{ padding: 2px 10px; border-radius: 4px; background: #C6A15B26; font: 500 12px/18px var(--tf-sans); color: var(--tf-brown); }
.tf .tf-cartp-list{ margin: 0; padding: 0; list-style: none; }
.tf-cartp-row{ padding: 20px 24px 20px 11px; }
.tf-cartp-row + .tf-cartp-row{ border-top: 1px solid var(--tf-line); }
.tf-cartp-row.has-issue{ background: #FFDAD61F; }
.tf-cartp-check{ display: grid; place-items: center; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.tf-cartp-check input{ width: 18px; height: 18px; margin: 0; accent-color: var(--tf-ink); cursor: pointer; }
.tf-cartp-check input:disabled{ cursor: default; }
.tf-cartp-check.is-labelled{ display: inline-flex; gap: 10px; width: auto; padding-inline: 13px 4px; font: 500 14px/20px var(--tf-sans); color: var(--tf-ink); white-space: nowrap; }
.tf-cartp-product{ display: flex; gap: 16px; min-width: 0; }
.tf-cartp-photo{ position: relative; flex: none; width: 80px; height: 80px; border-radius: 8px; background: var(--tf-ivory); overflow: hidden; }
.tf-cartp-photo img{ width: 100%; height: 100%; object-fit: cover; }
.tf-cartp-info{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.tf .tf-cartp-info h3{ font: 600 15px/22px var(--tf-sans); color: var(--tf-ink); overflow-wrap: anywhere; }
.tf .tf-cartp-variant{ padding: 2px 8px; border: 1px solid var(--tf-line); border-radius: 4px; background: var(--tf-ivory); font-size: 12px; line-height: 18px; color: var(--tf-brown); }
.tf .tf-cartp-info .tf-off{ margin: 0; }
.tf .tf-cartp-info .tf-shop-issue{ margin-top: 0; font-size: 13px; line-height: 18px; }
.tf-cartp-price{ display: flex; flex-direction: column; align-items: center; font-size: 15px; line-height: 22px; color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-cartp-price s{ font-size: 12px; line-height: 18px; color: var(--tf-brown); }
.tf-cartp-qty{ display: flex; justify-content: center; color: var(--tf-brown); }
.tf-cartp-qty .tf-pd-stepper{ height: 36px; border-color: var(--tf-brown); border-radius: 8px; }
.tf-cartp-qty .tf-pd-stepper button{ width: 36px; }
.tf-cartp-qty .tf-pd-stepper span{ display: grid; place-items: center; min-width: 40px; border-inline: 1px solid var(--tf-brown); font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-cartp-line{ font: 600 15px/22px var(--tf-sans); color: var(--tf-ink); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-cartp-act{ display: flex; justify-content: center; }
.tf-cartp-remove{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--tf-brown); font: 500 14px/20px var(--tf-sans); cursor: pointer; transition: color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-cartp-remove:active:not(:disabled){ transform: scale(0.97); }
.tf-cartp-remove:disabled{ opacity: 0.45; cursor: default; }
.tf-cartp-remove.is-danger{ color: #9B2C2C; }
.tf .tf-cartp-ship{ display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--tf-line); background: var(--tf-ivory); font-size: 13px; line-height: 20px; color: var(--tf-brown); }
.tf-cartp-ship svg{ flex: none; }
.tf-cartp-group.is-gone .tf-cartp-photo img{ opacity: 0.45; filter: grayscale(1); }
.tf-cartp-group.is-gone .tf-cartp-info h3, .tf-cartp-group.is-gone .tf-cartp-price, .tf-cartp-group.is-gone .tf-cartp-line{ color: var(--tf-brown); }
.tf-cartp-group.is-gone .tf-cartp-check{ cursor: default; }
.tf-cartp-soldout{ position: absolute; left: 50%; top: 50%; padding: 2px 10px; border-radius: 999px; background: #2B1B14B3; color: var(--tf-ivory); font: 600 12px/18px var(--tf-sans); transform: translate(-50%, -50%); }
/* Bar checkout menempel di bawah layar; maskot chat dan tombol Kembali ke Atas dinaikkan agar tidak menutupinya. */
.tf-cartp-bar{ position: sticky; bottom: 0; z-index: 30; margin-top: 8px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; box-shadow: 0 -8px 24px #2B1B1414; }
.tf:has(.tf-cartp-bar){ --cs-bottom: 160px; }
.tf:has(.tf-cartp-bar) .tf-top{ bottom: 160px; }
.tf-cartp-voucher{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 52px; padding: 8px 24px; border-bottom: 1px solid var(--tf-line); color: var(--tf-ink); }
.tf-cartp-voucher svg:first-child{ color: var(--tf-gold); }
.tf-cartp-voucher strong{ font: 600 14px/20px var(--tf-sans); }
.tf-cartp-voucher span{ margin-left: 16px; font-size: 13px; line-height: 20px; color: var(--tf-brown); transition: color 150ms ease; }
.tf-cartp-bar-main{ display: flex; align-items: center; gap: 16px; padding: 16px 24px 16px 0; }
.tf-cartp-bulk{ display: flex; align-items: center; gap: 8px; }
.tf-cartp-total{ margin-left: auto; text-align: right; }
.tf .tf-cartp-total p{ font-size: 14px; line-height: 20px; color: var(--tf-ink); }
.tf-cartp-total strong{ font: 500 28px/34px var(--tf-serif); color: var(--tf-ink); font-variant-numeric: tabular-nums; vertical-align: -3px; }
.tf .tf-cartp-total .tf-cartp-saving{ font-size: 13px; line-height: 18px; color: #9B2C2C; }
.tf-cartp-saving b{ font-weight: 600; font-variant-numeric: tabular-nums; }
.tf-cartp-cta{ flex: none; min-width: 200px; height: 48px; font-size: 15px; }
.tf .tf-cartp-msg{ margin: 0; padding: 0 24px 14px; text-align: right; }
.tf-cartp-more{ justify-self: center; }
@media (hover: hover) and (pointer: fine){
	.tf-cartp-crumbs a:hover{ text-decoration-color: currentColor; }
	.tf-cartp-remove:hover:not(:disabled){ color: var(--tf-ink); }
	.tf-cartp-remove.is-danger:hover:not(:disabled){ color: #BA1A1A; }
	.tf-cartp-voucher:hover span{ color: var(--tf-ink); }
}
.tf-cartp-check:has(:focus-visible), .tf-cartp-voucher:focus-visible, .tf-cartp-remove:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: -2px; border-radius: 4px; }
.tf-cartp-check input:focus-visible{ outline: 0; }
@media (max-width: 991px){
	.tf-cartp{ --cartp-cols: 44px minmax(0, 1fr) 120px 130px 110px 80px; }
}
@media (max-width: 767px){
	.tf-cartp-head{ display: none; }
	/* Foto dan teks produk jadi sel grid sendiri: nama memakai lebar penuh, harga di bawahnya, lalu Hapus dan jumlah sebaris. */
	.tf-cartp-row{ grid-template-columns: 32px 76px minmax(0, 1fr) auto; grid-template-areas: "chk photo info info" "chk photo price price" ". . act qty"; gap: 6px 12px; padding: 14px 16px 14px 4px; }
	.tf-cartp-row > .tf-cartp-check{ grid-area: chk; align-self: center; width: 32px; }
	.tf-cartp-product{ display: contents; }
	.tf-cartp-photo{ grid-area: photo; align-self: start; width: 76px; height: 76px; }
	.tf-cartp-info{ grid-area: info; gap: 4px; }
	.tf .tf-cartp-info h3{ font-size: 14px; line-height: 20px; }
	.tf-cartp-act{ grid-area: act; justify-content: flex-start; }
	.tf-cartp-remove{ min-height: 36px; padding: 0; font-size: 13px; }
	.tf-cartp-price{ grid-area: price; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 6px; font-weight: 600; }
	.tf-cartp-qty{ grid-area: qty; }
	.tf-cartp-line, .tf-cartp-group.is-gone .tf-cartp-qty{ display: none; }
	.tf-cartp-group-head{ padding: 8px 16px 8px 4px; }
	.tf-cartp-group.is-gone .tf-cartp-group-head{ padding-left: 16px; }
	.tf-cartp-tag{ display: none; }
	.tf .tf-cartp-ship{ padding: 12px 16px; font-size: 12px; line-height: 18px; }
	.tf-cartp-bar{ margin-inline: calc(50% - 50vw); border-inline: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
	.tf:has(.tf-cartp-bar){ --cs-bottom: 132px; }
	.tf:has(.tf-cartp-bar) .tf-top{ bottom: 132px; }
	.tf-cartp-voucher{ min-height: 44px; padding: 6px 16px; }
	.tf-cartp-voucher span{ margin-left: auto; font-size: 12px; }
	.tf-cartp-bar-main{ gap: 10px; padding: 0; }
	.tf-cartp-check.is-labelled{ padding-left: 16px; font-size: 13px; }
	/* Layar sempit: total dan checkout selalu terlihat; hapus banyak lewat tombol tempat sampah per produk. */
	.tf-cartp-bulk .tf-cartp-remove{ display: none; }
	.tf-cartp-total > p:first-child > span{ display: none; }
	.tf-cartp-total strong{ font-size: 20px; line-height: 26px; }
	.tf .tf-cartp-total .tf-cartp-saving{ font-size: 11px; line-height: 14px; white-space: nowrap; }
	.tf-cartp-cta{ min-width: 0; height: 56px; padding: 0 18px; border-radius: 0; font-size: 14px; }
	.tf .tf-cartp-msg{ padding: 0 16px 10px; text-align: left; }
}
@media (prefers-reduced-motion: reduce){ .tf-cartp-remove, .tf-cartp-crumbs a, .tf-cartp-voucher span{ transition: none; } }

/* Checkout: dropdown wilayah dengan pencarian, peta titik rumah, kartu kurir. */
.tf .tf-field-hint{ margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--tf-brown); opacity: 0.85; }
.tf-combo{ position: relative; }
.tf-combo .tf-auth-input{ padding-right: 6px; }
.tf-combo .tf-auth-input input::placeholder{ color: var(--tf-ink); opacity: 0.55; }
.tf-combo-toggle{ display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--tf-brown); cursor: pointer; transition: transform 200ms var(--tf-ease-out); }
.tf-combo:has([aria-expanded="true"]) .tf-combo-toggle{ transform: rotate(180deg); }
.tf .tf-combo-list{ position: absolute; z-index: 30; left: 0; right: 0; top: 74px; max-height: 280px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px #2B1B1420, 0 2px 6px #2B1B1410; }
.tf-combo-list li{ display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 8px; font: 500 15px/21px var(--tf-sans); color: var(--tf-ink); cursor: pointer; }
.tf-combo-list li small{ font-size: 12px; line-height: 16px; font-weight: 400; color: var(--tf-brown); }
.tf-combo-list li small:empty{ display: none; }
.tf-combo-list li.is-active{ background: var(--tf-ivory); }
.tf-combo-list li[aria-selected="true"]{ box-shadow: inset 3px 0 0 var(--tf-gold); }
.tf .tf-combo-list .tf-combo-note{ cursor: default; color: var(--tf-brown); font-weight: 400; }

.tf-map{ margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--tf-line); }
.tf .tf-map-title{ font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-map-canvas{ height: 300px; margin-top: 12px; border: 1px solid var(--tf-line); border-radius: 12px; overflow: hidden; background: var(--tf-ivory); z-index: 0; }
.tf-map-pin{ background: none; border: 0; }
.tf-map-pin span{ position: absolute; left: 4px; top: 0; width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; background: var(--tf-ink); transform: rotate(-45deg); box-shadow: 0 4px 10px #2B1B1459; }
.tf-map-pin span::after{ content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--tf-gold); }
.tf-map-address{ display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--tf-ivory); color: var(--tf-ink); }
.tf-map-address svg{ flex: none; margin-top: 2px; color: var(--tf-gold); }
.tf-map-address small{ display: block; font: 600 12px/16px var(--tf-sans); color: var(--tf-brown); text-transform: uppercase; letter-spacing: 0.04em; }
.tf .tf-map-address p{ margin-top: 2px; font-size: 14px; line-height: 21px; color: var(--tf-ink); }
.tf .tf-map-credit{ display: block; margin-top: 8px; font-size: 12px; color: var(--tf-brown); opacity: 0.75; }

.tf-shop-rates{ gap: 12px; }
.tf-shop-rates label.tf-rate{ position: relative; gap: 14px; min-height: 76px; padding: 14px 18px 14px 14px; border: 1px solid var(--tf-line); border-radius: 14px; background: #fff; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.tf-shop-rates label.tf-rate:has(:checked){ outline: 0; border-color: var(--tf-ink); background: #FFFCF6; box-shadow: 0 0 0 1px var(--tf-ink), 0 8px 20px #2B1B1414; }
@media (hover: hover){ .tf-shop-rates label.tf-rate:hover{ border-color: var(--tf-brown); } }
.tf-rate-logo{ display: grid; place-items: center; flex: none; width: 72px; height: 48px; padding: 4px; border: 1px solid var(--tf-line); border-radius: 10px; background: #fff; overflow: hidden; }
.tf-rate-logo img{ width: 100%; height: 100%; object-fit: contain; }
.tf-rate-logo b{ font: 700 16px/1 var(--tf-sans); color: var(--tf-brown); }
.tf-rate-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf-rate-name{ font: 600 15px/21px var(--tf-sans); color: var(--tf-ink); }
.tf-rate-info small{ display: inline-flex; align-items: center; gap: 5px; font: 400 13px/18px var(--tf-sans); color: var(--tf-brown); }
.tf-shop-rates .tf-rate-fee{ margin-left: auto; font: 700 16px/22px var(--tf-sans); color: var(--tf-ink); }
.tf-rate-check{ display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--tf-line); border-radius: 50%; color: transparent; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.tf-rate:has(:checked) .tf-rate-check{ border-color: var(--tf-ink); background: var(--tf-ink); color: #fff; }
.tf-shop-rates label.tf-rate:has(:focus-visible){ outline: 2px solid var(--tf-gold); outline-offset: 2px; }
@media (max-width: 600px){
	.tf-shop-rates label.tf-rate{ display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "logo info check" "logo fee check"; gap: 2px 12px; padding: 12px; }
	.tf-rate-logo{ grid-area: logo; width: 56px; height: 40px; }
	.tf-rate-info{ grid-area: info; }
	.tf-shop-rates .tf-rate-fee{ grid-area: fee; margin-left: 0; }
	.tf-rate-check{ grid-area: check; }
	.tf-map-canvas{ height: 260px; }
}
@media (prefers-reduced-motion: reduce){ .tf-combo-toggle, .tf-shop-rates label.tf-rate, .tf-rate-check{ transition: none; } }

/* Checkout: alamat disimpan dulu sebelum ongkir dicek (D-075). */
.tf-address-confirm{ display: grid; justify-items: start; gap: 4px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--tf-line); }
.tf-address-saved{ display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--tf-gold); border-radius: 12px; background: #FFFCF6; }
.tf-address-saved > svg{ flex: none; margin-top: 2px; color: var(--tf-gold); }
.tf-address-saved > div{ flex: 1; min-width: 0; }
.tf-address-saved small{ display: block; font: 600 12px/16px var(--tf-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tf-brown); }
.tf .tf-address-saved p{ margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--tf-ink); overflow-wrap: anywhere; }
.tf-address-saved .tf-shop-link{ flex: none; }
.tf-shop-fields[hidden]{ display: none; }

/* ==========================================================================
   Checkout dan halaman pesanan sesuai FigCraft "04 Checkout", "04b Modal Pengiriman", "11 Pembayaran", "11b", "11c",
   "05 Status Pesanan", "06 Pesanan Selesai". Header dan footer tetap milik layout toko. Pembayaran lewat Snap (D-075),
   jadi data yang tidak ada di sistem (koin, biaya layanan, add-on, radar kurir) tidak ditampilkan.
   Gerak: transform/opacity saja, --tf-ease-out, di bawah 300ms, versi lembut untuk prefers-reduced-motion.
   ========================================================================== */
.tf-co{ --co-r: 8px; padding-bottom: 96px; }
.tf-co-wrap{ padding-top: 40px; }
/* Header toko menempel di atas: target gulir tidak tertutup header. */
.tf-co [id]{ scroll-margin-top: 120px; }
.tf-co-grid{ display: grid; grid-template-columns: minmax(0, 681fr) minmax(320px, 479fr); align-items: start; gap: 24px; max-width: 1184px; margin-inline: auto; }
.tf-co-main{ display: grid; gap: 24px; min-width: 0; }
.tf-co-card{ padding: 24px; border: 1px solid var(--tf-line); border-radius: var(--co-r); background: #fff; }
.tf-co-head{ display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--tf-line); }
.tf-co-head-icon{ display: grid; place-items: center; flex: none; color: var(--tf-ink); }
.tf .tf-co-head h2{ flex: 1; min-width: 0; font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf-co-head-link{ flex: none; min-height: 32px; padding: 0; border: 0; background: none; font: 600 11px/13px var(--tf-sans); letter-spacing: 0.08em; color: var(--tf-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tf-co-pill{ flex: none; padding: 2px 10px; border-radius: 9999px; background: #C6A15B33; font: 600 11px/13px var(--tf-sans); letter-spacing: 0.08em; color: var(--tf-brown); }
.tf .tf-co-hint{ font-size: 14px; line-height: 21px; color: var(--tf-brown); }
.tf .tf-co-sub{ margin-top: 28px; font: 600 18px/26px var(--tf-serif); color: var(--tf-ink); }
.tf-co-edit[hidden]{ display: none; }
.tf-co-state{ display: grid; justify-items: center; gap: 16px; width: min(600px, 100%); margin: 24px auto 0; padding: 40px; border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; text-align: center; color: var(--tf-brown); }
.tf .tf-co-state h2{ font: 500 28px/36px var(--tf-serif); color: var(--tf-ink); }

/* Langkah pemesanan: pita di bawah header */
.tf-flow{ border-block: 1px solid var(--tf-line); background: var(--tf-ivory); }
.tf .tf-flow ol{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1020px, 100% - 32px); margin: 0 auto; padding: 13px 0 12px; list-style: none; }
.tf-flow li{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.tf-flow li + li::before{ content: ""; position: absolute; z-index: 0; top: 13px; right: calc(50% + 14px); width: calc(100% - 28px); height: 2px; background: var(--tf-line); transition: background-color 240ms ease; }
.tf-flow li.is-done + li::before{ background: var(--tf-ink); }
.tf-flow-dot{ position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--tf-line); border-radius: 8px; background: var(--tf-ivory); font: 600 11px/1 var(--tf-sans); color: var(--tf-brown); transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.tf-flow-dot svg{ display: none; }
.tf-flow-label{ font: 500 11px/13px var(--tf-sans); letter-spacing: 0.08em; color: var(--tf-brown); }
.tf-flow .is-done .tf-flow-dot{ border-color: var(--tf-ink); background: var(--tf-ink); color: var(--tf-ivory); }
.tf-flow .is-done .tf-flow-dot b{ display: none; }
.tf-flow .is-done .tf-flow-dot svg{ display: block; }
.tf-flow .is-now .tf-flow-dot{ border-color: var(--tf-ink); background: var(--tf-ink); color: var(--tf-gold); box-shadow: 0 0 0 4px #C6A15B66; }
.tf-flow .is-now .tf-flow-label{ font-weight: 700; letter-spacing: 0; color: var(--tf-ink); }
.tf .tf-flow.is-inline ol{ display: flex; justify-content: center; align-items: center; gap: 8px; width: min(1184px, 100% - 32px); padding: 16px 0; }
.tf-flow.is-inline li{ flex-direction: row; gap: 8px; text-align: left; }
.tf-flow.is-inline li + li::before{ position: static; flex: none; width: 73px; height: 2px; margin-right: 8px; }
.tf-flow.is-inline .tf-flow-label{ font: 600 14px/20px var(--tf-sans); letter-spacing: 0; color: var(--tf-ink); white-space: nowrap; }
.tf-flow.is-inline li:not(.is-done):not(.is-now) .tf-flow-label{ font-weight: 400; color: var(--tf-brown); }
.tf-flow.is-inline .is-now .tf-flow-label{ font-weight: 700; }

/* 04: data pengiriman yang sudah dikonfirmasi */
.tf-co-confirmed{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tf-co-tile{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 15px; border: 1px solid var(--tf-line); border-radius: var(--co-r); background: var(--tf-ivory); text-align: left; color: var(--tf-brown); }
.tf-co-tile-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; margin-bottom: 4px; }
.tf-co-tile-meta{ display: inline-flex; align-items: center; gap: 6px; font: 500 11px/13px var(--tf-sans); letter-spacing: 0.08em; color: var(--tf-brown); }
.tf .tf-co-tile-name{ font: 600 15px/23px var(--tf-sans); color: var(--tf-ink); overflow-wrap: anywhere; }
.tf .tf-co-tile-text{ display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--tf-brown); overflow-wrap: anywhere; }
.tf-co-tile-text.is-issue{ color: #BA1A1A; }
.tf-co-tile-link{ display: inline-flex; align-items: center; gap: 2px; font: 600 12px/16px var(--tf-sans); color: var(--tf-brown); }
.tf-co-tile-link svg{ transform: rotate(-90deg); }
.tf-co-tile-fee{ margin-top: auto; padding-top: 8px; font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-co-courier{ width: 100%; font: inherit; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--tf-ease-out); }
.tf-co-courier:not(.is-set){ border-style: dashed; border-color: var(--tf-gold); background: #fff; }
.tf-co-courier.is-error{ border-color: #BA1A1A; }
.tf-co-courier:active{ transform: scale(0.98); }
.tf-co-courier:focus-visible, .tf-co-head-link:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; }

/* 04: metode pembayaran (satu pilihan: Snap) */
.tf-co-method{ display: flex; align-items: flex-start; gap: 14px; padding: 18px 16px; border: 2px solid var(--tf-ink); border-radius: var(--co-r); background: #fff; }
.tf-co-radio{ flex: none; width: 16px; height: 16px; margin-top: 4px; border: 1px solid var(--tf-brown); border-radius: 50%; background: #fff; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.tf-co-radio.is-on, input:checked + .tf-co-radio{ border-color: var(--tf-ink); background: var(--tf-ink); box-shadow: inset 0 0 0 3px #fff; }
.tf-co-method-body{ flex: 1; min-width: 0; }
.tf .tf-co-method-name{ font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-co-method-text{ margin-top: 2px; font-size: 13px; line-height: 19.5px; color: var(--tf-brown); }
.tf-co-method-note{ display: inline-grid; gap: 2px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--tf-line); border-radius: var(--co-r); background: #fff; }
.tf-co-method-note small{ font: 600 11px/13px var(--tf-sans); letter-spacing: 0.08em; color: var(--tf-brown); }
.tf-co-method-note strong{ font: 700 16px/24px var(--tf-sans); letter-spacing: 0.05em; color: var(--tf-ink); }
.tf-co-chip{ flex: none; padding: 4px 10px; border: 1px solid var(--tf-line); border-radius: 9999px; background: var(--tf-ivory); font: 700 12px/16px var(--tf-sans); letter-spacing: 0.05em; color: var(--tf-ink); }
.tf .tf-co-secure{ display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--tf-line); font-size: 12px; line-height: 16px; color: var(--tf-brown); }
.tf-co-secure svg{ flex: none; color: var(--tf-ink); }

/* 04, 05, 06: daftar item */
.tf .tf-co-items{ margin: 0; padding: 0; list-style: none; }
.tf-co-items li{ display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-block: 16px; }
.tf-co-items li + li{ border-top: 1px solid var(--tf-line); }
.tf-co-items li:first-child{ padding-top: 4px; }
.tf-co-photo{ display: block; width: 64px; height: 64px; border-radius: 4px; background: var(--tf-ivory); overflow: hidden; }
.tf-co-photo img{ width: 100%; height: 100%; object-fit: cover; }
.tf-co-item-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tf-co-item-name{ font: 600 20px/27.5px var(--tf-serif); color: var(--tf-ink); overflow-wrap: anywhere; }
.tf-co-item-variant{ font-size: 13px; line-height: 19.5px; color: var(--tf-brown); }
.tf-co-item-qty{ margin-top: 4px; font: 500 11px/13px var(--tf-sans); letter-spacing: 0.08em; color: var(--tf-brown); }
.tf-co-item-price{ display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.tf-co-item-price strong{ font: 700 14px/17px var(--tf-sans); letter-spacing: 0.02em; color: var(--tf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-co-item-price small{ font-size: 12px; line-height: 16px; color: var(--tf-brown); white-space: nowrap; }
.tf-co-items.is-compact li{ grid-template-columns: 56px minmax(0, 1fr) auto; }
.tf-co-items.is-compact .tf-co-photo{ width: 56px; height: 56px; }
.tf-co-items.is-compact .tf-co-item-name{ font-size: 18px; line-height: 24px; }

/* 04: ringkasan tagihan */
.tf-co-side{ position: sticky; top: 104px; display: grid; gap: 16px; }
.tf-co-bill{ position: relative; overflow: hidden; }
.tf-co-bill::before{ content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tf-gold); }
.tf-co-head.is-plain{ padding-bottom: 12px; }
.tf .tf-co-rows{ display: grid; gap: 10px; margin: 0; }
.tf-co-rows div{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; line-height: 20px; }
.tf-co-rows dt{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 400; color: var(--tf-brown); }
.tf-co-rows dd{ margin: 0; font-weight: 500; color: var(--tf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-co-rows .is-minus dd{ font-weight: 600; color: var(--tf-brown); }
/* Hemat dari diskon produk: hanya keterangan, subtotal sudah memakai harga diskon. */
.tf-co-rows .is-note dt, .tf-co-rows .is-note dd{ font-size: 13px; color: #9B2C2C; }
.tf-co-inline{ padding: 0; border: 0; background: none; font: 500 12px/16px var(--tf-sans); color: var(--tf-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tf-co-voucher{ display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 16px; padding: 10px 14px; border: 1px dashed var(--tf-gold); border-radius: 4px; background: transparent; font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); text-align: left; cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--tf-ease-out); }
.tf-co-voucher svg{ flex: none; color: var(--tf-gold); }
.tf-co-voucher:active{ transform: scale(0.98); }
.tf-co-total{ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--tf-line); }
.tf-co-total span{ font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf-co-total strong{ font: 400 40px/48px var(--tf-serif); letter-spacing: -1px; color: var(--tf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-co-submit{ height: auto; min-height: 66px; margin-top: 24px; padding: 12px 20px; gap: 12px; letter-spacing: 0.025em; line-height: 17px; text-align: center; }
.tf-co-submit svg:last-child{ transition: transform 200ms var(--tf-ease-out); }
.tf-co-links{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; }
.tf-co-back{ display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; font: 400 12px/16px var(--tf-sans); color: var(--tf-brown) !important; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color 150ms ease, color 150ms ease; }
.tf .tf-co-note{ margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--tf-brown); }
.tf-co-help{ display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--tf-line); border-radius: var(--co-r); background: var(--tf-ivory); }
.tf-co-help-icon{ display: grid; place-items: center; flex: none; color: var(--tf-ink); }
.tf-co-help div{ display: grid; flex: 1; min-width: 0; }
.tf-co-help strong{ font: 600 12px/16px var(--tf-sans); color: var(--tf-ink); }
.tf-co-help small{ font-size: 11px; line-height: 16.5px; color: var(--tf-brown); }
.tf-co-help-link{ flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border: 1px solid var(--tf-line); border-radius: 4px; background: #fff; font: 600 11px/13px var(--tf-sans); letter-spacing: 0.08em; color: var(--tf-ink) !important; transition: border-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-co-help-link:active{ transform: scale(0.97); }

/* 04b: dialog pengiriman, juga dipakai dialog voucher. Masuk dan keluar dengan transisi supaya bisa diinterupsi. */
.tf-co-dialog{ opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 200ms var(--tf-ease-out), transform 200ms var(--tf-ease-out), overlay 200ms var(--tf-ease-out) allow-discrete, display 200ms var(--tf-ease-out) allow-discrete; }
.tf-co-dialog[open]{ opacity: 1; transform: none; }
@starting-style{ .tf-co-dialog[open]{ opacity: 0; transform: translateY(8px) scale(0.98); } }
.tf-co-dialog::backdrop{ background: #2B1B1400; transition: background-color 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
.tf-co-dialog[open]::backdrop{ background: #2B1B14B3; }
@starting-style{ .tf-co-dialog[open]::backdrop{ background: #2B1B1400; } }
.tf-co-ship-dialog{ width: min(92vw, 672px); max-height: min(88dvh, 828px); padding: 0; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; color: var(--tf-brown); box-shadow: 0 25px 50px -12px #2B1B1440; overflow: hidden; }
html:has(.tf-co-dialog[open]){ overflow: hidden; }
.tf-co-dialog-sheet{ display: flex; flex-direction: column; max-height: min(88dvh, 828px); }
.tf-co-dialog-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--tf-line); background: var(--tf-ivory); }
.tf .tf-co-dialog-head h2{ display: flex; align-items: center; gap: 8px; font: 600 18px/28px var(--tf-sans); color: var(--tf-ink); }
.tf .tf-co-dialog-head p{ margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--tf-brown); }
.tf-co-dialog-close{ display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -6px -6px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--tf-ink); cursor: pointer; transition: background-color 150ms ease; }
.tf-co-dialog-body{ flex: 1; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.tf-co-options{ display: grid; gap: 12px; }
.tf-co-option{ display: grid; grid-template-columns: 16px 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 16px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--tf-ease-out); }
.tf-co-option .tf-co-radio{ margin-top: 0; }
.tf-co-option:has(:checked){ border-color: var(--tf-ink); box-shadow: 0 0 0 1px var(--tf-ink); }
.tf-co-option:has(:focus-visible){ outline: 2px solid var(--tf-gold); outline-offset: 2px; }
.tf-co-option:active{ transform: scale(0.99); }
.tf-co-option-logo{ display: flex; align-items: center; justify-content: center; width: 64px; height: 44px; padding: 4px; border: 1px solid var(--tf-line); border-radius: 6px; background: #fff; overflow: hidden; }
.tf-co-option-logo img{ display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tf-co-option-logo b{ font: 700 14px/1 var(--tf-sans); color: var(--tf-brown); }
.tf-co-option-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf-co-option-name{ font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); }
.tf-co-option-info small{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--tf-brown); }
.tf-co-option-fee{ font: 700 16px/24px var(--tf-sans); color: var(--tf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-co-dialog-foot{ display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--tf-line); background: var(--tf-ivory); }
.tf-co-ghost{ display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid var(--tf-brown); border-radius: 4px; background: #fff; font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-co-ghost:active{ transform: scale(0.97); }

/* 11, 11b, 11c, 05, 06: halaman pesanan */
.tf-od-intro{ max-width: 900px; }
.tf .tf-od-eyebrow{ font: 600 11px/13px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-brown); }
.tf .tf-od-title{ margin-top: 10px; font: 400 40px/48px var(--tf-serif); letter-spacing: -1px; color: var(--tf-ink); }
.tf .tf-od-lead{ margin-top: 10px; font-size: 15px; line-height: 23px; color: var(--tf-brown); }
.tf-od-cols{ display: grid; grid-template-columns: minmax(0, 820fr) minmax(300px, 428fr); align-items: start; gap: 32px; margin-top: 32px; }
.tf-od-cols.is-even{ grid-template-columns: minmax(0, 681fr) minmax(300px, 479fr); gap: 24px; margin-top: 24px; }
.tf-od-progress, .tf-od-done{ max-width: 1184px; margin-inline: auto; }
.tf-od-left{ display: grid; gap: 24px; min-width: 0; }
.tf-od-card{ padding: 28px; border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; }
.tf .tf-od-h2{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-od-h2.is-ruled{ margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tf-line); }
.tf .tf-od-strong{ font: 600 14px/20px var(--tf-sans); letter-spacing: 0.02em; color: var(--tf-ink); }
.tf .tf-od-muted{ font-size: 13px; line-height: 19.5px; color: var(--tf-brown); }
.tf .tf-od-muted.is-lg{ font-size: 15px; line-height: 23px; }
.tf-od-muted strong{ color: var(--tf-ink); }
.tf address.tf-od-muted{ display: grid; margin: 4px 0 0; font-style: normal; }
.tf .tf-od-label{ margin-bottom: 6px; font: 600 11px/13px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-brown); }
.tf-od-deadline{ display: flex; align-items: center; gap: 12px; padding: 20px; }
.tf-od-deadline-icon{ display: grid; place-items: center; flex: none; color: var(--tf-brown); }
.tf-od-deadline > div{ flex: 1; min-width: 0; display: grid; gap: 2px; }
.tf-od-clock{ flex: none; font: 500 28px/36px var(--tf-serif); color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-od-bill-row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.tf .tf-od-bill-big{ font: 400 40px/48px var(--tf-serif); letter-spacing: -1px; color: var(--tf-ink); }
.tf-od-bill hr{ margin: 18px 0 0; border: 0; border-top: 1px solid var(--tf-line); opacity: 1; }
.tf-od-amount{ font: 500 28px/36px var(--tf-serif); color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-od-paynow{ min-width: 180px; }
.tf .tf-od-how{ display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.tf-od-how li{ display: flex; align-items: flex-start; gap: 14px; }
.tf-od-how li > span{ display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 12px; background: var(--tf-ink); font: 600 11px/1 var(--tf-sans); color: var(--tf-ivory); }
.tf .tf-od-how p{ font-size: 15px; line-height: 23px; color: var(--tf-ink); }
.tf-od-actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.tf-od-actions.is-start{ justify-content: flex-start; }
.tf-od-wide{ min-width: 220px; }
.tf-od-ghost{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; height: 44px; padding: 0 24px; border: 0; border-radius: 4px; background: transparent; font: 600 14px/17px var(--tf-sans); letter-spacing: 0.02em; color: var(--tf-ink) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-od-ghost.is-block{ width: 100%; border: 1px solid var(--tf-ink); text-decoration: none; }
.tf-od-ghost:active, .tf-od-link:active{ transform: scale(0.97); }
.tf-od-link{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; font: 600 14px/20px var(--tf-sans); color: var(--tf-ink) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: transform 160ms var(--tf-ease-out); }
.tf-od-summary{ position: sticky; top: 104px; display: grid; gap: 14px; }
.tf .tf-od-rows{ display: grid; gap: 14px; margin: 0; }
.tf-od-rows div{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; line-height: 23px; }
.tf-od-rows dt{ font-weight: 400; color: var(--tf-brown); }
.tf-od-rows dd{ margin: 0; color: var(--tf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf .tf-od-rows.is-boxed{ padding-top: 14px; border-top: 1px solid var(--tf-line); }
.tf-od-sum-total{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--tf-line); }
.tf-od-sum-total span{ font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf-od-sum-total strong{ font: 500 28px/36px var(--tf-serif); color: var(--tf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-od-verified{ display: flex; gap: 12px; padding: 16px; border-radius: 8px; background: #DCEFE0; }
.tf-od-verified svg{ flex: none; color: #2E6B3E; }
.tf-od-verified strong{ font: 600 14px/17px var(--tf-sans); letter-spacing: 0.02em; color: var(--tf-ink); }
.tf .tf-od-verified p{ margin-top: 4px; font-size: 13px; line-height: 19.5px; color: var(--tf-brown); }
.tf-od-stack{ display: grid; justify-items: center; gap: 12px; margin-top: 6px; }
.tf-od-stack > .tf-btn, .tf-od-stack > .is-block{ justify-self: stretch; }
.tf-od-paid{ margin-left: auto; padding: 2px 10px; border-radius: 9999px; background: #DCEFE0; font: 600 11px/16px var(--tf-sans); letter-spacing: 0.06em; color: #2E6B3E; }
.tf-od-pill{ margin-left: auto; padding: 2px 10px; border-radius: 9999px; background: #C6A15B33; font: 600 11px/16px var(--tf-sans); letter-spacing: 0.06em; color: var(--tf-brown); }

/* 11b, 11c, dan status tertutup: kartu tengah */
.tf-od-status{ display: grid; justify-items: center; gap: 18px; width: min(600px, 100%); margin: 56px auto 0; padding: 40px; border: 1px solid var(--tf-line); border-radius: 12px; background: #fff; text-align: center; }
.tf-od-status-icon{ display: grid; place-items: center; width: 64px; height: 64px; border-radius: 32px; background: #FFDAD6; color: #BA1A1A; }
.tf .tf-od-status h1{ font: 500 28px/36px var(--tf-serif); color: var(--tf-ink); }
.tf .tf-od-status > p{ max-width: 520px; font-size: 15px; line-height: 23px; color: var(--tf-brown); }

/* 05: kartu status dan tahapan */
.tf-od-hero-top{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.tf-od-hero-top > div:first-child{ flex: 1; min-width: min(100%, 420px); }
.tf-od-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border: 1px solid #2E6B3E; border-radius: 9999px; background: #2E6B3E; font: 600 12px/16px var(--tf-sans); letter-spacing: 0.04em; color: #FFFFFF; }
.tf-od-badge i{ width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF40; }
.tf-od-badge.is-gold{ border-color: #C6A15B66; background: #C6A15B33; color: var(--tf-ink); font-size: 13px; }
.tf-od-ref{ display: grid; gap: 6px; padding: 12px 16px; border: 1px solid var(--tf-line); border-radius: 8px; background: var(--tf-ivory); text-align: right; }
.tf .tf-od-ref p{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--tf-brown); }
.tf-od-ref strong{ font: 700 16px/22px var(--tf-sans); letter-spacing: 0.05em; color: var(--tf-ink); }
.tf-od-ref small{ font: 600 11px/14px var(--tf-sans); letter-spacing: 0.04em; color: var(--tf-brown); }
.tf .tf-od-stages{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--tf-line); list-style: none; }
.tf-od-stages li{ display: grid; align-content: start; gap: 4px; min-width: 0; color: var(--tf-brown); }
.tf-od-stage-icon{ display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border: 1px solid var(--tf-line); border-radius: 8px; background: var(--tf-ivory); color: var(--tf-brown); }
.tf-od-stages .is-done .tf-od-stage-icon{ border-color: var(--tf-ink); background: var(--tf-ink); color: var(--tf-gold); }
.tf-od-stages .is-now .tf-od-stage-icon{ border-color: var(--tf-ink); background: var(--tf-ink); color: var(--tf-gold); box-shadow: 0 0 0 4px #C6A15B66; }
.tf-od-stages .is-issue .tf-od-stage-icon{ border-color: #9A3A28; background: #9A3A28; color: #fff; box-shadow: 0 0 0 4px #9A3A2833; }
.tf-od-stages small{ font: 600 11px/14px var(--tf-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.tf-od-stages strong{ font: 600 20px/26px var(--tf-serif); color: var(--tf-ink); }
.tf-od-stages li > span:last-child{ font-size: 13px; line-height: 19.5px; }
.tf-od-stages li:not(.is-done):not(.is-now) strong{ color: var(--tf-brown); }
.tf-od-ship{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.tf-od-tag{ display: inline-block; padding: 2px 8px; border: 1px solid var(--tf-line); border-radius: 4px; background: var(--tf-ivory); font: 600 13px/20px var(--tf-sans); color: var(--tf-ink); }

/* 06: kartu terima kasih */
.tf-od-thanks{ display: grid; justify-items: center; padding: 40px 32px 36px; text-align: center; }
.tf .tf-od-thanks .tf-od-title{ margin-top: 20px; font-size: 48px; line-height: 56px; }
.tf-od-thanks .tf-od-lead{ max-width: 520px; font-size: 16px; line-height: 24px; }
.tf-od-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.tf-od-chips span{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--tf-line); border-radius: 6px; background: var(--tf-ivory); font-size: 13px; line-height: 18px; color: var(--tf-brown); }
.tf-od-chips strong{ font-weight: 700; color: var(--tf-ink); }
.tf-od-address{ display: flex; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid var(--tf-line); border-radius: 8px; background: var(--tf-ivory); color: var(--tf-ink); }
.tf-od-address > svg{ flex: none; margin-top: 2px; }
.tf .tf-od-address p{ font-size: 14px; line-height: 20px; color: var(--tf-ink); }

/* Gerak: konten muncul setelah data dimuat (mencegah lompatan), bertingkat 50-60ms. */
@keyframes tfCoRise{ from{ opacity: 0; transform: translateY(8px); } }
.tf-co-grid > *, .tf-od-enter > *, .tf-od-cols > *, .tf-od-left > *{ animation: tfCoRise 280ms var(--tf-ease-out) both; }
.tf-co-grid > :nth-child(2), .tf-od-enter > :nth-child(2), .tf-od-cols > :nth-child(2){ animation-delay: 60ms; }
.tf-od-left > :nth-child(2){ animation-delay: 50ms; }
.tf-od-left > :nth-child(3){ animation-delay: 100ms; }
.tf-od-left > :nth-child(n+4){ animation-delay: 150ms; }
.tf-co-confirmed{ animation: tfCoRise 240ms var(--tf-ease-out) both; }
.tf-od-status > *{ animation: tfCoRise 280ms var(--tf-ease-out) both; }
.tf-od-status > :nth-child(2){ animation-delay: 40ms; }
.tf-od-status > :nth-child(n+3){ animation-delay: 80ms; }
@media (hover: hover) and (pointer: fine){
	.tf-co-courier:hover{ border-color: var(--tf-brown); box-shadow: 0 6px 16px #2B1B1414; }
	.tf-co-voucher:hover{ background: #C6A15B1F; }
	.tf-co-back:hover{ color: var(--tf-ink) !important; text-decoration-color: currentColor; }
	.tf-co-submit:hover svg:last-child{ transform: translateX(3px); }
	.tf-co-help-link:hover{ border-color: var(--tf-brown); }
	.tf-co-dialog-close:hover, .tf-co-ghost:hover{ background: var(--tf-ivory); }
	.tf-co-option:hover:not(:has(:checked)){ border-color: var(--tf-brown); }
	.tf-od-ghost:not(.is-block):hover{ background: #C6A15B1F; }
	.tf-od-ghost.is-block:hover{ background: var(--tf-ivory); }
}
.tf-co-back:focus-visible, .tf-co-inline:focus-visible, .tf-co-voucher:focus-visible, .tf-co-help-link:focus-visible, .tf-co-dialog-close:focus-visible, .tf-co-ghost:focus-visible, .tf-od-ghost:focus-visible, .tf-od-link:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
	@keyframes tfCoRise{ from{ opacity: 0; } }
	.tf-co-dialog, .tf-co-dialog[open]{ transform: none; }
	@starting-style{ .tf-co-dialog[open]{ transform: none; } }
	.tf-co-courier, .tf-co-option, .tf-co-voucher, .tf-co-ghost, .tf-od-ghost, .tf-od-link, .tf-co-help-link, .tf-co-submit svg:last-child{ transition-property: background-color, border-color, box-shadow, color; }
	.tf-co-courier:active, .tf-co-option:active, .tf-co-voucher:active, .tf-co-ghost:active, .tf-od-ghost:active, .tf-od-link:active, .tf-co-help-link:active{ transform: none; }
}

/* Responsif: desain FigCraft hanya desktop; kolom ditumpuk di tablet, rapat di ponsel. */
@media (max-width: 1100px){
	.tf-co-grid, .tf-od-cols, .tf-od-cols.is-even{ grid-template-columns: minmax(0, 1fr); }
	.tf-co-side, .tf-od-summary{ position: static; }
}
@media (max-width: 767px){
	.tf-co{ padding-bottom: 64px; }
	.tf-co-wrap{ padding-top: 24px; }
	.tf-co-card, .tf-od-card{ padding: 18px; }
	.tf-co-confirmed, .tf-od-ship{ grid-template-columns: minmax(0, 1fr); }
	.tf .tf-od-stages{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
	.tf .tf-od-title{ font-size: 32px; line-height: 40px; }
	.tf .tf-od-thanks .tf-od-title{ font-size: 36px; line-height: 44px; }
	.tf-co-total strong{ font-size: 32px; line-height: 40px; }
	.tf .tf-od-bill-big{ font-size: 32px; line-height: 40px; }
	.tf-od-paynow, .tf-od-wide, .tf-od-ghost{ width: 100%; min-width: 0; }
	.tf-od-status{ margin-top: 32px; padding: 32px 20px; }
	.tf-od-deadline{ flex-wrap: wrap; }
	.tf-od-clock{ width: 100%; padding-left: 32px; }
	.tf-co-items li, .tf-co-items.is-compact li{ grid-template-columns: 56px minmax(0, 1fr); }
	.tf-co-photo{ width: 56px; height: 56px; }
	.tf-co-item-price{ grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; }
	.tf-co-item-name{ font-size: 18px; line-height: 24px; }
	.tf-co-option{ grid-template-columns: 16px 56px minmax(0, 1fr); gap: 10px 12px; padding: 14px 12px; }
	.tf-co-option-logo{ width: 56px; height: 40px; }
	.tf-co-option-fee{ grid-column: 3; }
	.tf-co-dialog-foot{ flex-direction: column-reverse; }
	.tf-co-dialog-foot > *{ width: 100%; }
	.tf-flow-label{ display: none; }
	.tf-flow .is-now .tf-flow-label{ display: block; }
	.tf-flow.is-inline li + li::before{ width: 24px; margin-right: 4px; }
}

/* Kartu produk: stepper + hapus bila barang sudah di keranjang */
.tf-card-cart{ margin-top: 12px; }
.tf-cat-card .tf-card-cart .tf-btn{ margin-top: 0; }
.tf-card-cart [hidden]{ display: none !important; }
.tf-card-qty{ display: flex; align-items: center; gap: 10px; }
.tf-card-qty .tf-pd-stepper{ flex: 1; height: 40px; border-color: var(--tf-brown); border-radius: 8px; }
.tf-card-qty .tf-pd-stepper button{ width: 40px; }
.tf-card-qty .tf-pd-stepper span{ display: grid; flex: 1; place-items: center; border-inline: 1px solid var(--tf-brown); font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-card-remove{ display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--tf-brown); border-radius: 8px; background: #fff; color: #9B2C2C; cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-card-remove:hover:not(:disabled){ background: #FDF2F2; border-color: #9B2C2C; }
.tf-card-remove:active:not(:disabled){ transform: scale(0.92); }
.tf-card-remove:disabled{ opacity: 0.4; cursor: not-allowed; }
.tf-card-remove:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }

/* Toast toko: kanan atas, bertumpuk, satu per aksi (resources/js/store/toast.js). Warna semantik diselaraskan dengan palet Tuffero. */
.tf-toaster{ position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.tf-toast{ --toast-accent: #4F7A3A; --toast-surface: #F4F8EE; --toast-line: #BFD5AE; position: relative; display: grid; grid-template-columns: 40px 1fr 28px; align-items: center; gap: 14px; overflow: hidden; padding: 14px 14px 17px 16px; border: 1px solid var(--toast-line); border-radius: 12px; background: var(--toast-surface); color: var(--tf-ink); box-shadow: 0 12px 32px -12px #2B1B1440, 0 2px 6px #2B1B1414; pointer-events: auto; opacity: 1; transform: none; transform-origin: top right; transition: opacity 240ms ease, transform 240ms var(--tf-ease-out); }
@starting-style{ .tf-toast{ opacity: 0; transform: translateX(16px) scale(0.97); } }
.tf-toast.is-leaving{ opacity: 0; transform: translateX(16px) scale(0.97); pointer-events: none; transition-duration: 180ms; }
.tf-toast.is-error{ --toast-accent: #A63A2B; --toast-surface: #FCF1EE; --toast-line: #EBC1B7; }
.tf-toast.is-info{ --toast-accent: #8A6A2E; --toast-surface: #FBF6EA; --toast-line: #E2CF9F; }
/* Garis diagonal di pojok kanan atas, seperti acuan desain. */
.tf-toast::before{ content: ''; position: absolute; top: 0; right: 0; width: 180px; height: 100%; background: linear-gradient(-62deg, transparent 0 22%, color-mix(in srgb, var(--toast-accent) 14%, transparent) 22% 31%, transparent 31% 38%, color-mix(in srgb, var(--toast-accent) 9%, transparent) 38% 46%, transparent 46%); pointer-events: none; }
.tf-toast [hidden]{ display: none !important; }
.tf-toast-icon{ position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--toast-accent); color: #fff; }
.tf-toast-body{ position: relative; min-width: 0; }
.tf .tf-toast-body strong{ display: block; font: 700 15px/22px var(--tf-sans); color: var(--toast-accent); }
.tf .tf-toast-body p{ margin: 0; font: 400 14px/20px var(--tf-sans); color: var(--tf-ink); overflow-wrap: anywhere; }
.tf-toast-close{ position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: var(--toast-accent); color: #fff; cursor: pointer; transition: transform 140ms var(--tf-ease-out), opacity 150ms ease; }
.tf-toast-close::after{ content: ''; position: absolute; inset: -8px; }
.tf-toast-close:active{ transform: scale(0.9); }
.tf-toast-close:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){ .tf-toast-close:hover{ opacity: 0.85; } }
/* Bilah timer: menyusut dari penuh ke kosong selama toast tampil; berhenti saat kursor di atas toast. */
.tf-toast-timer{ position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--toast-accent); transform-origin: left center; animation: tf-toast-timer var(--toast-ms, 2000ms) linear forwards; }
.tf-toast.is-paused .tf-toast-timer{ animation-play-state: paused; }
@keyframes tf-toast-timer{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } }
@media (max-width: 599px){
	.tf-toaster{ top: calc(12px + env(safe-area-inset-top)); right: 12px; width: calc(100vw - 24px); }
	.tf-toast{ grid-template-columns: 36px 1fr 28px; gap: 12px; padding: 12px 12px 15px; }
	.tf-toast-icon{ width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce){ @starting-style{ .tf-toast{ transform: none; } } .tf-toast.is-leaving{ transform: none; } }

/* Tombol Hapus per produk di keranjang: tempat sampah merah, lebih tua saat ditekan; tutup terbuka dan sampah jatuh masuk (diadaptasi dari Uiverse.io, vinodjangid07). */
.tf-bin{ position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; overflow: hidden; border: 2px solid #F3C4C4; border-radius: 50%; background: #E03131; color: #FFFFFF; cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--tf-ease-out); }
.tf-bin-top{ position: relative; z-index: 2; width: 14px; transform-origin: right; transition: transform 300ms var(--tf-ease-out); }
.tf-bin-bottom{ position: relative; z-index: 2; width: 12px; }
.tf-bin-garbage{ position: absolute; z-index: 1; width: 11px; opacity: 0; }
.tf-bin:active:not(:disabled), .tf-bin.is-throwing{ background: #9B1C1C; }
.tf-bin:active:not(:disabled){ transform: scale(0.92); }
.tf-bin:active:not(:disabled) .tf-bin-top, .tf-bin.is-throwing .tf-bin-top{ transform: rotate(45deg); }
.tf-bin.is-throwing .tf-bin-garbage{ animation: tfBinThrow 400ms linear; }
.tf-bin:disabled{ cursor: default; }
.tf-bin:disabled:not(.is-throwing){ opacity: 0.45; }
.tf-bin:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
	.tf-bin:hover:not(:disabled) .tf-bin-top{ transform: rotate(45deg); }
}
@keyframes tfBinThrow{
	from{ transform: translate(-400%, -700%); opacity: 0; }
	to{ transform: translate(0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
	.tf-bin, .tf-bin-top{ transition: none; }
	.tf-bin.is-throwing .tf-bin-garbage{ animation: none; }
}

/* Keranjang kosong: ilustrasi tas emas: masuk (halo, tas jatuh memantul, partikel muncul bergantian) lalu melayang pelan berulang. Hanya transform dan opacity, jadi jalan di compositor; semua gerak dimatikan untuk prefers-reduced-motion. */
.tf-cartp-empty{ display: flex; flex-direction: column; align-items: center; margin-top: 28px; padding: 48px 24px 56px; border: 1px solid var(--tf-line); border-radius: 8px; background: #FFFFFF; text-align: center; }
.tf-ec-art{ width: 220px; height: auto; margin-bottom: 20px; overflow: visible; }
.tf-ec-halo, .tf-ec-bag, .tf-ec-deco{ transform-box: fill-box; transform-origin: center; }
.tf-ec-halo{ animation: tfEcHalo 560ms var(--tf-ease-out) both, tfEcPulse 4.2s ease-in-out 700ms infinite; }
.tf-ec-bag{ animation: tfEcBag 720ms var(--tf-ease-out) 80ms both, tfEcFloat 3.4s ease-in-out 900ms infinite; }
.tf-ec-d1{ animation: tfEcPop 480ms var(--tf-ease-out) 260ms both, tfEcDriftA 3.6s ease-in-out 800ms infinite; }
.tf-ec-d2{ animation: tfEcPop 480ms var(--tf-ease-out) 340ms both, tfEcDriftB 4.2s ease-in-out 900ms infinite; }
.tf-ec-d3{ animation: tfEcPop 480ms var(--tf-ease-out) 420ms both, tfEcDriftC 3.8s ease-in-out 1000ms infinite; }
.tf-ec-d4{ animation: tfEcPop 480ms var(--tf-ease-out) 500ms both, tfEcTwinkle 2.6s ease-in-out 1100ms infinite; }
@keyframes tfEcHalo{ from{ opacity: 0; transform: scale(0.8); } }
@keyframes tfEcPulse{ 50%{ transform: scale(1.035); } }
@keyframes tfEcBag{ 0%{ opacity: 0; transform: translateY(-34px) rotate(-8deg); } 55%{ opacity: 1; transform: translateY(5px) rotate(3deg); } 80%{ transform: translateY(-2px) rotate(-1deg); } 100%{ opacity: 1; transform: none; } }
@keyframes tfEcFloat{ 50%{ transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes tfEcPop{ from{ opacity: 0; transform: scale(0.4); } }
@keyframes tfEcDriftA{ 50%{ transform: translate(4px, -7px); } }
@keyframes tfEcDriftB{ 50%{ transform: translate(-5px, -6px); } }
@keyframes tfEcDriftC{ 50%{ transform: translate(6px, 5px) rotate(12deg); } }
@keyframes tfEcTwinkle{ 50%{ transform: scale(1.18) rotate(14deg); opacity: 0.7; } }
.tf-cartp-empty h2{ font: 400 28px/34px var(--tf-serif); color: var(--tf-ink); text-wrap: balance; }
.tf .tf-cartp-empty p{ max-width: 34ch; margin: 8px 0 24px; font-size: 15px; line-height: 24px; color: var(--tf-brown); }
.tf-cartp-empty .tf-btn{ min-width: 200px; }
.tf-cartp-empty .tf-btn:active{ transform: scale(0.97); }
.tf-cartp-empty h2, .tf .tf-cartp-empty p, .tf-cartp-empty .tf-btn{ animation: tfEcRise 360ms var(--tf-ease-out) both; }
.tf-cartp-empty h2{ animation-delay: 60ms; }
.tf .tf-cartp-empty p{ animation-delay: 100ms; }
.tf-cartp-empty .tf-btn{ animation-delay: 140ms; }
@keyframes tfEcRise{ from{ opacity: 0; transform: translateY(6px); } }
@media (max-width: 767px){
	.tf-cartp-empty{ padding: 36px 20px 40px; }
	.tf-ec-art{ width: 184px; }
	.tf-cartp-empty h2{ font-size: 24px; line-height: 30px; }
	.tf-cartp-empty .tf-btn{ align-self: stretch; }
}
@media (prefers-reduced-motion: reduce){
	.tf-ec-halo, .tf-ec-bag, .tf-ec-deco, .tf-cartp-empty h2, .tf .tf-cartp-empty p, .tf-cartp-empty .tf-btn{ animation: none; }
}

/* Kotak voucher di keranjang: tautan (kosong) atau tombol pembuka modal pilihan voucher (maksimal 2, D-078). */
button.tf-cartp-voucher{ width: 100%; border: 0; border-bottom: 1px solid var(--tf-line); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.tf .tf-cartp-voucher-count{ padding: 0 10px; border-radius: 999px; background: var(--tf-gold); color: var(--tf-ink); font: 700 12px/20px var(--tf-sans); font-style: normal; }
.tf-cartp-voucher .tf-cartp-voucher-count + span{ margin-left: 0; }
@media (max-width: 599px){ .tf-cartp-voucher{ flex-wrap: wrap; gap: 6px 10px; } }

/* Modal pilih voucher (keranjang dan checkout): kartu ringkas berkotak centang, tombol terapkan menempel di bawah. */
.tf-vpick{ width: min(94vw, 460px); }
.tf-vpick-sheet{ display: flex; flex-direction: column; max-height: min(86dvh, 640px); gap: 0; }
.tf-vpick-sheet > header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 8px 8px 20px; }
.tf-vpick-sheet h2{ margin: 0; font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf-vpick-body{ display: grid; flex: 1; align-content: start; gap: 10px; padding: 0 20px 12px; overflow-y: auto; overscroll-behavior: contain; }
.tf .tf-vpick-hint{ margin: 0; font-size: 12px; line-height: 18px; color: var(--tf-brown); }
.tf-vpick-hint strong{ color: var(--tf-ink); }
.tf-vpick-code{ display: flex; gap: 8px; }
.tf-vpick-code input{ flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--tf-brown); border-radius: 6px; background: #fff; color: var(--tf-ink); font: 500 14px/20px var(--tf-sans); text-transform: uppercase; }
.tf-vpick-code input:focus{ outline: 2px solid var(--tf-ink); outline-offset: 1px; }
.tf-vpick-code .tf-btn{ height: 40px; padding: 0 16px; }
.tf .tf-vpick-list{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tf-vpick-list li label{ display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.tf-vpick-list li.is-on label{ border-color: var(--tf-gold); background: #C6A15B1A; }
.tf-vpick-list li.is-off label, .tf-vpick-list li.is-nostack label, .tf-vpick-list li.is-full label{ background: #F6F0E5; cursor: not-allowed; }
.tf-vpick-list li.is-off .tf-vpick-text strong, .tf-vpick-list li.is-nostack .tf-vpick-text strong, .tf-vpick-list li.is-full .tf-vpick-text strong{ opacity: 0.6; }
.tf-vpick-list input{ width: 18px; height: 18px; margin: 0; accent-color: var(--tf-ink); cursor: inherit; }
.tf-vpick-list input:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-vpick-text{ display: grid; gap: 1px; min-width: 0; }
.tf-vpick-text strong{ font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-vpick-text small{ font-size: 12px; line-height: 16px; color: var(--tf-brown); }
.tf-vpick-text em{ font: 600 12px/16px var(--tf-sans); font-style: normal; }
.tf-vpick-text em.is-ok{ color: #4F7A3A; }
.tf-vpick-text em.is-warn{ color: #9B2C2C; }
.tf-vpick-tag{ padding: 0 8px; border-radius: 999px; background: #4F7A3A1F; color: #3F6630; font: 600 11px/18px var(--tf-sans); white-space: nowrap; }
.tf-vpick-tag[hidden]{ display: none; }
.tf-vpick-sheet > footer{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--tf-line); background: var(--tf-ivory); }
.tf-vpick-sheet > footer .tf-btn{ height: 40px; padding: 0 20px; }
@media (hover: hover) and (pointer: fine){ .tf-vpick-list li:not(.is-off):not(.is-nostack):not(.is-full) label:hover{ border-color: var(--tf-gold); } }
@media (max-width: 599px){
	.tf-vpick{ width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; }
	.tf-vpick-sheet{ max-height: 86dvh; }
	.tf-vpick-sheet > header{ padding-left: 16px; }
	.tf-vpick-body{ padding: 0 16px 12px; }
	.tf-vpick-sheet > footer{ padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* Loader titik bergelombang (.tf-dots): penanda standar transisi AJAX di toko. Ukuran lewat --dots-size, warna lewat --dots-color (default tinta). Hanya transform, jadi ringan. */
.tf-dots{ --dots-size: 50px; --dots-speed: 0.6s; --dots-color: var(--tf-ink); display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; width: var(--dots-size); height: calc(var(--dots-size) * 0.17); padding-top: calc(var(--dots-size) * 0.34); }
.tf-dots i{ flex-shrink: 0; width: calc(var(--dots-size) * 0.17); height: calc(var(--dots-size) * 0.17); border-radius: 50%; background: var(--dots-color); will-change: transform; animation: tfDotsJump var(--dots-speed) ease-in-out infinite; }
.tf-dots i:nth-child(1){ animation-delay: calc(var(--dots-speed) * -0.45); }
.tf-dots i:nth-child(2){ animation-delay: calc(var(--dots-speed) * -0.3); }
.tf-dots i:nth-child(3){ animation-delay: calc(var(--dots-speed) * -0.15); }
@keyframes tfDotsJump{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-200%); } }
@media (prefers-reduced-motion: reduce){ .tf-dots i{ animation: none; } }

/* Selimut loading satu halaman selain navbar (.tf-mainbar, z-index 100) untuk transisi AJAX: warna pekat, bukan tembus pandang. Tambahkan kelas is-busy untuk menampilkan; isinya boleh modal atau dot-wave. */
.tf-busy{ --dots-color: var(--tf-gold); position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 96px 20px 24px; background: var(--tf-ink); color: var(--tf-ivory); font: 500 14px/20px var(--tf-sans); opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; transition: opacity 160ms var(--tf-ease-out), visibility 0s linear 160ms; }
.tf-busy.is-busy{ opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* Modal konfirmasi alamat di dalam selimut: kartu putih naik tipis saat selimut tampil. */
.tf-confirm{ width: min(100%, 460px); padding: 28px; border-radius: 12px; background: #FFFFFF; color: var(--tf-ink); box-shadow: 0 24px 60px -16px #00000066; opacity: 0; transform: translateY(10px) scale(0.97); transition: opacity 200ms var(--tf-ease-out), transform 220ms var(--tf-ease-out); }
.tf-busy.is-busy .tf-confirm{ opacity: 1; transform: none; transition-delay: 60ms; }
.tf-confirm h2{ margin: 0; font: 400 26px/32px var(--tf-serif); color: var(--tf-ink); text-wrap: balance; }
.tf-confirm .tf-confirm-lead{ margin: 6px 0 16px; font-size: 14px; line-height: 22px; color: var(--tf-brown); }
.tf-confirm-card{ display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--tf-line); border-radius: 8px; background: var(--tf-ivory); }
.tf-confirm .tf-confirm-card p{ margin: 0; font-size: 14px; line-height: 22px; color: var(--tf-brown); overflow-wrap: anywhere; }
.tf-confirm .tf-confirm-card .tf-confirm-name{ font-weight: 600; color: var(--tf-ink); }
.tf-confirm-status{ display: flex; align-items: center; min-height: 44px; margin-top: 12px; font: 500 13px/20px var(--tf-sans); color: var(--tf-brown); }
.tf-confirm-wait, .tf-confirm-ok, .tf-confirm-bad{ display: inline-flex; align-items: center; gap: 8px; }
.tf-confirm-wait .tf-dots{ --dots-size: 34px; --dots-color: var(--tf-ink); }
.tf-confirm-ok{ color: #2E6B3E; }
.tf-confirm-bad{ color: #BA1A1A; }
.tf-confirm-actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.tf-confirm-edit{ min-height: 44px; padding: 0 14px; border: 1px solid var(--tf-brown); border-radius: 4px; background: transparent; color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-confirm-edit:active, .tf-confirm .tf-btn:active:not(:disabled){ transform: scale(0.97); }
.tf-confirm-edit:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-confirm .tf-btn:disabled{ opacity: 0.6; cursor: default; }
@media (hover: hover) and (pointer: fine){ .tf-confirm-edit:hover{ background: #C6A15B26; } }
@media (max-width: 575px){ .tf-confirm{ padding: 22px 18px; } .tf-confirm-actions{ flex-direction: column-reverse; align-items: stretch; } .tf-confirm-actions > *{ width: 100%; } }
@media (prefers-reduced-motion: reduce){ .tf-busy, .tf-confirm{ transition: none; } .tf-confirm{ transform: none; } }

/* Panel pembayaran Midtrans yang ditanam di kartu tagihan (snap.embed). */
/* Snap memberi iframe `width/height: inherit`, jadi wadahnya harus punya ukuran eksplisit; tanpa itu iframe menyusut ke 320px. Isi panel menggulir sendiri. */
.tf-od-embed{ width: 100%; height: 640px; margin-top: 16px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; overflow: hidden; }
.tf-od-embed iframe{ display: block; width: 100% !important; height: 100% !important; min-width: 0 !important; border: 0; }
@media (max-width: 575px){ .tf-od-embed{ height: 600px; } }

/* Pembatalan pesanan di halaman pembayaran: tombol outline sejajar "Saya sudah membayar" + modal. */
.tf-od-outline{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; height: 44px; padding: 0 24px; border: 1px solid var(--tf-ink); border-radius: 4px; background: transparent; color: var(--tf-ink); font: 600 14px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-od-outline:active{ transform: scale(0.97); }
.tf-od-outline:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){ .tf-od-outline:hover{ background: #C6A15B1F; } }
.tf-cmodal{ width: min(94vw, 480px); max-height: 90dvh; padding: 0; border: 0; border-radius: 12px; background: var(--tf-ivory); color: var(--tf-brown); overflow: hidden; box-shadow: 0 24px 60px #2B1B144D; }
.tf-cmodal::backdrop{ background: #2B1B14B3; }
.tf-cmodal[open]{ animation: tf-cmodal-in 220ms var(--tf-ease-out); }
@keyframes tf-cmodal-in{ from{ opacity: 0; transform: translateY(8px) scale(0.97); } to{ opacity: 1; transform: none; } }
html:has(.tf-cmodal[open]){ overflow: hidden; }
.tf-cmodal-sheet{ display: flex; flex-direction: column; max-height: 90dvh; }
.tf-cmodal-sheet > header{ display: grid; grid-template-columns: 44px 1fr 44px; align-items: start; gap: 12px; padding: 20px 8px 4px 20px; }
.tf-cmodal-icon{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #9B2C2C1A; color: #9B2C2C; }
.tf-cmodal-sheet h2{ margin: 0; font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf-cmodal-sheet header p{ margin: 4px 0 0; font-size: 13px; line-height: 20px; }
.tf-cmodal-body{ display: grid; gap: 16px; padding: 12px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.tf-cmodal-count{ display: block; margin-top: 4px; text-align: right; font-size: 12px; color: var(--tf-brown); }
.tf-cmodal-channel{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.tf-cmodal-channel legend{ grid-column: 1 / -1; margin-bottom: 2px; padding: 0; font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-cmodal-channel label{ position: relative; cursor: pointer; }
.tf-cmodal-channel input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tf-cmodal-channel span{ display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; font: 600 14px/20px var(--tf-sans); color: var(--tf-ink); transition: border-color 150ms ease, background-color 150ms ease; }
.tf-cmodal-channel input:checked + span{ border-color: var(--tf-gold); background: #C6A15B1A; box-shadow: inset 0 0 0 1px var(--tf-gold); }
.tf-cmodal-channel input:focus-visible + span{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-cmodal-sheet > footer{ display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--tf-line); background: #fff; }
.tf-cmodal-sheet > footer .tf-od-outline, .tf-cmodal-sheet > footer .tf-btn{ min-width: 0; padding: 0 20px; }
@media (max-width: 599px){
	.tf-cmodal{ width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; }
	.tf-cmodal[open]{ animation-name: tf-cmodal-up; }
	.tf-cmodal-sheet > header{ padding-left: 16px; }
	.tf-cmodal-body{ padding: 12px 16px 16px; }
	.tf-cmodal-sheet > footer{ padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
	.tf-cmodal-sheet > footer > *{ flex: 1; }
	.tf-od-actions .tf-od-outline{ width: 100%; min-width: 0; }
}
@keyframes tf-cmodal-up{ from{ transform: translateY(100%); } to{ transform: none; } }
@media (prefers-reduced-motion: reduce){ .tf-cmodal[open]{ animation: none; } }

/* Tombol "Ajukan Pembatalan": lingkaran emas dengan panah yang melebar penuh saat hover/fokus (Uiverse.io, cssbuttons-io), warna emas dan tinta seperti tombol checkout. */
.tf-learn{ --learn-ease: cubic-bezier(0.77, 0, 0.175, 1); position: relative; display: inline-block; width: 16.5rem; max-width: 100%; height: 3rem; padding: 0; border: 0; background: transparent; cursor: pointer; font: 700 13px/1.6 var(--tf-sans); vertical-align: middle; transition: transform 160ms var(--tf-ease-out); }
.tf-learn-circle{ position: relative; display: block; width: 3rem; height: 3rem; border-radius: 1.625rem; background: var(--tf-gold); transition: width 300ms var(--learn-ease), background-color 200ms ease; }
.tf-learn-arrow{ position: absolute; top: 0; bottom: 0; left: 0.625rem; margin: auto; width: 1.125rem; height: 0.125rem; background: none; transition: transform 300ms var(--learn-ease), background-color 300ms var(--learn-ease); }
.tf-learn-arrow::before{ content: ""; position: absolute; top: -0.29rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid var(--tf-ink); border-right: 0.125rem solid var(--tf-ink); transform: rotate(45deg); }
.tf-learn-text{ position: absolute; inset: 0 0 0 3rem; margin: 0; padding: 0.75rem 0 0.75rem 1rem; color: var(--tf-ink); text-align: left; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; white-space: nowrap; pointer-events: none; }
.tf-learn:active{ transform: scale(0.97); }
.tf-learn:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 4px; border-radius: 1.625rem; }
.tf-learn:focus-visible .tf-learn-circle{ width: 100%; background: #D8B978; }
.tf-learn:focus-visible .tf-learn-arrow{ background: var(--tf-ink); transform: translate(1rem, 0); }
@media (hover: hover) and (pointer: fine){
	.tf-learn:hover .tf-learn-circle{ width: 100%; background: #D8B978; }
	.tf-learn:hover .tf-learn-arrow{ background: var(--tf-ink); transform: translate(1rem, 0); }
}
@media (max-width: 575px){ .tf-learn{ width: 100%; max-width: 16.5rem; } }
@media (prefers-reduced-motion: reduce){ .tf-learn, .tf-learn-circle, .tf-learn-arrow{ transition: none; } }

/* Kartu Lacak Paket di halaman status pesanan (FigCraft 05, disesuaikan untuk J&T dan SiCepat). Animasi hanya transform/opacity; dimatikan untuk prefers-reduced-motion. */
.tf-od-track{ display: grid; gap: 20px; }
.tf-od-track p{ margin: 0; }
.tf-od-track-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tf-od-track-head .tf-od-h2{ margin: 0; }
.tf-od-track-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid #C6A15B66; border-radius: 999px; background: #C6A15B26; color: var(--tf-ink); font: 600 12px/16px var(--tf-sans); }
.tf-od-track-chip i{ width: 7px; height: 7px; border-radius: 50%; background: var(--tf-gold); }
.tf-od-track-chip.is-shipped, .tf-od-track-chip.is-completed{ border-color: #2E6B3E66; background: #DCEFE0; color: #2E6B3E; }
.tf-od-track-chip.is-shipped i, .tf-od-track-chip.is-completed i{ background: #2E6B3E; }
.tf-od-track-chip.is-issue{ border-color: #9A3A2866; background: #F8E1DC; color: #9A3A28; }
.tf-od-track-chip.is-issue i{ background: #9A3A28; }
.tf-od-route.is-issue .tf-od-route-fill{ background: #9A3A28; }
.tf-od-route.is-issue .tf-od-route-truck > span{ animation: none; }

.tf-od-route{ --route: 0; display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, 96px); align-items: start; gap: 14px; padding: 22px 20px 18px; border: 1px solid var(--tf-line); border-radius: 8px; background: var(--tf-ivory); }
.tf-od-route-pin{ display: grid; justify-items: center; gap: 8px; text-align: center; }
.tf-od-route-pin small{ max-width: 100%; font: 600 12px/16px var(--tf-sans); color: var(--tf-brown); overflow-wrap: anywhere; }
.tf-od-route-dot{ position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--tf-ink); border-radius: 50%; background: #fff; color: var(--tf-ink); }
.tf-od-route-pin.is-from .tf-od-route-dot{ background: var(--tf-ink); }
.tf-od-route-pin.is-from .tf-od-route-dot::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tf-gold); }
.tf-od-route-pin.is-from .tf-od-route-dot::after{ content: ""; position: absolute; inset: -2px; border: 2px solid var(--tf-gold); border-radius: 50%; opacity: 0; }
.tf-od-route.is-paid .is-from .tf-od-route-dot::after, .tf-od-route.is-processing .is-from .tf-od-route-dot::after{ animation: tfRoutePulse 1.8s var(--tf-ease-out) infinite; }
.tf-od-route-pin.is-to .tf-od-route-dot svg:last-child{ display: none; }
.tf-od-route.is-completed .is-to .tf-od-route-dot{ border-color: #2E6B3E; background: #2E6B3E; color: #fff; }
.tf-od-route.is-completed .is-to .tf-od-route-dot svg:first-child{ display: none; }
.tf-od-route.is-completed .is-to .tf-od-route-dot svg:last-child{ display: block; }
.tf-od-route-line{ position: relative; height: 4px; margin-top: 14px; border-radius: 2px; background: var(--tf-line); }
.tf-od-route-fill{ position: absolute; inset: 0; border-radius: inherit; background: var(--tf-gold); transform: scaleX(var(--route)); transform-origin: left; transition: transform 700ms var(--tf-ease-out); }
.tf-od-route-truck{ position: absolute; top: 50%; left: calc(var(--route) * 100%); display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--tf-ink); color: var(--tf-gold); box-shadow: 0 4px 10px -2px #2B1B1459; transition: left 700ms var(--tf-ease-out), opacity 200ms ease; }
.tf-od-route.is-shipped .tf-od-route-truck > span{ display: grid; animation: tfRouteBob 1.6s ease-in-out infinite; }
.tf-od-route.is-completed .tf-od-route-truck{ opacity: 0; }
@starting-style{ .tf-od-route-fill{ transform: scaleX(0); } .tf-od-route-truck{ left: 0; } }
@keyframes tfRoutePulse{ 0%{ opacity: 0.7; transform: scale(1); } 100%{ opacity: 0; transform: scale(1.7); } }
@keyframes tfRouteBob{ 50%{ transform: translateY(-2px); } }

.tf-od-track-msg{ display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid #2E6B3E; border-radius: 8px; background: #fff; }
.tf-od-track-msg-icon{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--tf-ivory); color: var(--tf-brown); }
.tf-od-track-msg p{ font: 500 14px/20px var(--tf-sans); color: var(--tf-ink); }
.tf-od-track-msg small{ font: 600 12px/16px var(--tf-sans); color: var(--tf-brown); white-space: nowrap; }
.tf-od-track-courier{ display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--tf-line); }
.tf-od-waybill-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tf-od-waybill-row strong{ font: 700 16px/24px var(--tf-sans); letter-spacing: 0.05em; color: var(--tf-ink); overflow-wrap: anywhere; }
.tf-od-events{ display: grid; margin: 0; padding: 0; list-style: none; }
.tf-od-events li{ position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 16px; color: var(--tf-brown); }
.tf-od-events li:last-child{ padding-bottom: 0; }
.tf-od-events li:not(:last-child)::after{ content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--tf-line); }
.tf-od-events li.is-done:not(.is-now):not(:last-child)::after{ background: var(--tf-ink); }
.tf-od-event-dot{ width: 20px; height: 20px; border: 2px solid var(--tf-line); border-radius: 50%; background: #fff; }
.tf-od-events .is-done .tf-od-event-dot{ border-color: var(--tf-ink); background: var(--tf-ink); }
.tf-od-events .is-now .tf-od-event-dot{ border-color: var(--tf-gold); background: var(--tf-ink); box-shadow: 0 0 0 4px #C6A15B40; }
.tf-od-events strong{ font: 600 14px/20px var(--tf-sans); }
.tf-od-events .is-done strong{ color: var(--tf-ink); }
.tf-od-events small{ font: 500 12px/16px var(--tf-sans); text-align: right; }
.tf-od-track-share{ display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--tf-line); }
.tf-od-track-share p{ font-size: 13px; line-height: 20px; color: var(--tf-brown); }
.tf-od-track-share-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.tf-od-mini{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--tf-brown); border-radius: 4px; background: transparent; color: var(--tf-ink); font: 600 13px/18px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-od-mini.is-wa{ border-color: #2E6B3E; background: #DCEFE0; color: #2E6B3E; }
.tf-od-mini:active{ transform: scale(0.97); }
.tf-od-mini:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){ .tf-od-mini:hover{ background: #C6A15B26; } .tf-od-mini.is-wa:hover{ background: #CBE6D1; } }
@media (max-width: 575px){
	.tf-od-route{ grid-template-columns: minmax(0, 72px) minmax(0, 1fr) minmax(0, 72px); gap: 10px; padding: 18px 12px 14px; }
	.tf-od-track-msg{ grid-template-columns: 32px minmax(0, 1fr); }
	.tf-od-track-msg small{ grid-column: 2; }
	.tf-od-track-courier{ grid-template-columns: 56px minmax(0, 1fr); }
	.tf-od-waybill{ grid-column: 1 / -1; }
	.tf-od-track-share-actions > *{ flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce){ .tf-od-route-fill, .tf-od-route-truck, .tf-od-mini{ transition: none; } .tf-od-route-pin.is-from .tf-od-route-dot::after, .tf-od-route.is-shipped .tf-od-route-truck > span{ animation: none; } }

/* Riwayat per hub/kota dari kurir (gaya Shopee): kejadian terbaru di atas, lebih tebal dan bertanda emas. Catatan kurir bisa panjang, jadi baris rata atas. */
.tf-od-hub li{ align-items: start; }
.tf-od-hub .tf-od-event-dot{ margin-top: 2px; }
.tf-od-hub strong{ font-weight: 500; overflow-wrap: anywhere; }
.tf-od-hub .is-now strong{ font-weight: 700; color: var(--tf-ink); }
.tf-od-hub small{ white-space: nowrap; padding-top: 2px; }
.tf-od-hub .tf-od-event-dot{ width: 14px; height: 14px; margin-left: 3px; }
.tf-od-hub .is-now .tf-od-event-dot{ margin-left: 0; width: 20px; height: 20px; margin-top: 0; }
.tf-od-hub li:not(:last-child)::after{ left: 9px; top: 22px; }
@media (max-width: 575px){ .tf-od-hub li{ grid-template-columns: 20px minmax(0, 1fr); } .tf-od-hub small{ grid-column: 2; padding-top: 0; } }

/* Halaman Akun Saya (/akun): kepala cokelat dengan avatar inisial, tiga ringkasan (pesanan, alamat, voucher), lalu pengaturan profil dan kata sandi.
   Animasi hanya transform dan opacity; hover hanya di perangkat yang mendukungnya. */
.tf-acct-hero{ position: relative; display: flex; align-items: center; gap: 24px; padding: 32px; border-radius: 12px; background: radial-gradient(120% 160% at 100% 0%, #C6A15B33 0%, transparent 55%), var(--tf-ink); overflow: hidden; }
.tf-acct-hero::after{ content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border: 1px solid #C6A15B33; border-radius: 50%; pointer-events: none; }
.tf-acct-avatar{ flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--tf-gold); box-shadow: 0 0 0 4px #C6A15B33; font: 500 28px/1 var(--tf-serif); color: var(--tf-ink); letter-spacing: 0.02em; }
.tf-acct-avatar:empty::before{ content: ""; width: 30px; height: 30px; background-color: currentColor; -webkit-mask: url(/images/Logo/icon/user-bold.webp) center / contain no-repeat; mask: url(/images/Logo/icon/user-bold.webp) center / contain no-repeat; }
.tf-acct-hero-text{ min-width: 0; }
.tf .tf-acct-hero .tf-eyebrow{ padding-left: 0 !important; }
.tf-acct-title{ margin: 4px 0 0; font: 400 40px/48px var(--tf-serif); letter-spacing: -0.01em; color: var(--tf-ivory); overflow-wrap: anywhere; }
.tf .tf-acct-lead{ margin-top: 6px; font-size: 15px; line-height: 23px; color: #F6F0E5CC; }

.tf-acct-skel{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.tf-acct-skel div{ height: 168px; border-radius: 8px; background: linear-gradient(90deg, #E3D5C066 0%, #E3D5C0B3 50%, #E3D5C066 100%) 0 0 / 200% 100%; animation: tfAcctShimmer 1.2s linear infinite; }
@keyframes tfAcctShimmer{ to{ background-position: -200% 0; } }

.tf-acct-tiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.tf-acct-tile{ display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; transition: border-color 200ms ease, box-shadow 200ms ease; }
.tf-acct-tile-head{ display: flex; align-items: center; gap: 12px; }
.tf .tf-acct-tile-head h2{ margin: 0; font: 600 20px/28px var(--tf-serif); color: var(--tf-ink); }
.tf-acct-ico{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #C6A15B26; color: var(--tf-ink); }
.tf-acct-svg{ flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tf .tf-acct-text, .tf .tf-acct-empty{ margin-top: 16px; font-size: 14px; line-height: 22px; color: var(--tf-brown); overflow-wrap: anywhere; }
.tf-acct-order{ display: grid; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: 6px; background: var(--tf-ivory); color: var(--tf-ink) !important; transition: background-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-acct-order:active{ transform: scale(0.98); }
.tf-acct-order:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; }
.tf-acct-order-top, .tf-acct-order-meta{ display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.tf-acct-order-top strong{ font-weight: 600; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.tf-acct-order-meta{ font-size: 13px; line-height: 20px; color: var(--tf-brown); }
.tf-acct-order-meta strong{ font-size: 15px; font-weight: 600; color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-acct-pill{ display: inline-block; padding: 2px 10px; border-radius: 999px; background: #C6A15B33; font: 600 12px/18px var(--tf-sans); color: var(--tf-ink); white-space: nowrap; }
.tf-acct-more{ display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin-top: auto; padding-top: 12px; font: 600 14px/20px var(--tf-sans); color: var(--tf-ink) !important; text-decoration: underline; text-decoration-color: #2B1B1440; text-underline-offset: 4px; transition: text-decoration-color 150ms ease; }
.tf-acct-more svg{ width: 16px; height: 16px; transition: transform 200ms var(--tf-ease-out); }
.tf-acct-more:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 2px; border-radius: 2px; }

.tf .tf-acct-section-title{ margin: 48px 0 0; font: 500 28px/36px var(--tf-serif); color: var(--tf-ink); }
.tf-acct-settings{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; margin-top: 16px; }
.tf-acct-card form .tf-btn{ margin-top: 20px; }
.tf-acct-card .tf-acct-tile-head + form .tf-auth-field:first-child{ margin-top: 20px; }
.tf-acct-facts{ display: grid; gap: 4px; margin: 24px 0 0; padding: 4px 16px; border-radius: 6px; background: var(--tf-ivory); }
.tf-acct-facts div{ padding-block: 12px; }
.tf-acct-facts div + div{ border-top: 1px solid var(--tf-line); }
.tf-acct-facts dt{ font: 600 12px/16px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-brown); }
.tf-acct-facts dd{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--tf-ink); }
.tf-acct-value{ min-width: 0; overflow-wrap: anywhere; }
.tf-acct-state{ display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 999px; background: #FFDAD6; font: 600 12px/20px var(--tf-sans); color: #93000A; }
.tf-acct-state.is-ok{ background: #DCEFE0; color: #2E6B3E; }

/* Masuk sekali saat data siap, berurutan 50 ms. */
.tf-acct-tile, .tf-acct-card, .tf-acct-section-title{ animation: tfAcctIn 360ms var(--tf-ease-out) both; }
.tf-acct-tile:nth-child(2){ animation-delay: 50ms; }
.tf-acct-tile:nth-child(3){ animation-delay: 100ms; }
.tf-acct-section-title{ animation-delay: 120ms; }
.tf-acct-card{ animation-delay: 150ms; }
.tf-acct-card + .tf-acct-card{ animation-delay: 200ms; }
@keyframes tfAcctIn{ from{ opacity: 0; transform: translateY(8px); } }

@media (hover: hover) and (pointer: fine){
	.tf-acct-tile:hover{ border-color: #C6A15B99; box-shadow: 0 8px 24px -4px rgba(43, 27, 20, 0.06); }
	.tf-acct-order:hover{ background: #C6A15B26; }
	.tf-acct-more:hover{ text-decoration-color: currentColor; }
	.tf-acct-more:hover svg{ transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce){
	.tf-acct-tile, .tf-acct-card, .tf-acct-section-title{ animation-name: tfAcctFade; }
	.tf-acct-skel div{ animation: none; }
	.tf-acct-more:hover svg{ transform: none; }
}
@keyframes tfAcctFade{ from{ opacity: 0; } }

/* Tablet: ringkasan tetap tiga kolom bila muat, pengaturan bertumpuk. */
@media (max-width: 991px){
	.tf-acct-tiles, .tf-acct-skel{ gap: 16px; }
	.tf-acct-tile{ padding: 20px; }
	.tf-acct-settings{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 860px){
	.tf-acct-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-acct-tile:first-child{ grid-column: 1 / -1; }
	.tf-acct-skel{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-acct-skel div:first-of-type{ grid-column: 1 / -1; }
}
/* Ponsel: semua satu kolom, kepala lebih ringkas. */
@media (max-width: 575px){
	.tf-acct-hero{ gap: 16px; padding: 24px 20px; }
	.tf-acct-hero::after{ width: 160px; height: 160px; right: -50px; bottom: -70px; }
	.tf-acct-avatar{ width: 56px; height: 56px; font-size: 22px; box-shadow: 0 0 0 3px #C6A15B33; }
	.tf-acct-avatar:empty::before{ width: 24px; height: 24px; }
	.tf-acct-title{ font-size: 28px; line-height: 34px; }
	.tf .tf-acct-lead{ font-size: 14px; line-height: 21px; }
	.tf-acct-tiles, .tf-acct-skel{ grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
	.tf-acct-skel div{ height: 120px; }
	.tf-acct-skel div:nth-of-type(n+3){ display: none; }
	.tf .tf-acct-section-title{ margin-top: 36px; font-size: 24px; line-height: 32px; }
	.tf-acct-settings{ gap: 12px; margin-top: 12px; }
	.tf-acct-facts{ padding-inline: 14px; }
}
@media (max-width: 340px){
	.tf-acct-hero{ flex-direction: column; align-items: flex-start; }
}

/* Subhalaman akun (pesanan, alamat, voucher): kepala ringkas, navigasi akun, daftar, dan keadaan kosong. */
.tf-acct-hero.is-compact{ gap: 20px; padding: 24px 28px; }
.tf-acct-hero-ico{ flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #C6A15B26; box-shadow: inset 0 0 0 1px #C6A15B59; color: var(--tf-gold); }
.tf-acct-hero-ico .tf-acct-svg{ width: 26px; height: 26px; }
.tf-acct-hero.is-compact .tf-acct-title{ margin-top: 0; font-size: 34px; line-height: 42px; }
.tf-acct-back{ display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 600 12px/16px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tf-gold) !important; }
.tf-acct-back .tf-acct-svg{ width: 16px; height: 16px; transition: transform 200ms var(--tf-ease-out); }
.tf-acct-back:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; border-radius: 2px; }


.tf-acct-skel.is-list{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tf-acct-skel.is-list div{ height: 76px; }
.tf .tf-acct .tf-account-section{ margin-top: 24px; }
.tf-acct .tf-voucher-tabs{ margin-top: 24px; }

.tf-acct-emptybox{ display: grid; justify-items: center; padding: 48px 24px; text-align: center; }
.tf-acct-emptybox h2{ margin-top: 16px; }
.tf .tf-acct-emptybox .tf-shop-note{ max-width: 420px; }
.tf-acct-ico.is-lg{ width: 64px; height: 64px; }
.tf-acct-ico.is-lg .tf-acct-svg{ width: 28px; height: 28px; }

.tf .tf-acct .tf-account-orders{ padding: 8px 16px; }
.tf-acct .tf-account-orders a{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-inline: -8px; padding: 16px 8px; border-radius: 6px; transition: background-color 150ms ease; }
.tf-acct .tf-account-orders li + li{ border-top: 1px solid var(--tf-line); }
.tf-acct .tf-account-orders span:last-child{ justify-items: end; gap: 6px; }
.tf-acct .tf-account-orders em.tf-acct-pill{ font-size: 12px; line-height: 18px; color: var(--tf-ink); }
.tf-acct .tf-account-pages{ margin-top: 16px; }

.tf-acct .tf-account-addresses{ margin-top: 24px; }
.tf-acct .tf-account-addresses li{ transition: border-color 200ms ease, box-shadow 200ms ease; }
.tf-acct .tf-account-addresses li h2.tf-acct-tile-head{ flex-wrap: wrap; margin-bottom: 12px; }
.tf-acct .tf-account-addresses .tf-account-badge{ margin-left: 0; }

@media (hover: hover) and (pointer: fine){
	.tf-acct-back:hover .tf-acct-svg{ transform: translateX(-3px); }
	.tf-acct .tf-account-orders a:hover{ background: var(--tf-ivory); }
	.tf-acct .tf-account-addresses li:hover{ border-color: #C6A15B99; box-shadow: 0 8px 24px -4px rgba(43, 27, 20, 0.06); }
}
@media (prefers-reduced-motion: reduce){
	.tf-acct-back:hover .tf-acct-svg{ transform: none; }
}
@media (max-width: 575px){
	.tf-acct-hero.is-compact{ gap: 14px; padding: 20px; }
	.tf-acct-hero-ico{ width: 44px; height: 44px; }
	.tf-acct-hero-ico .tf-acct-svg{ width: 22px; height: 22px; }
	.tf-acct-hero.is-compact .tf-acct-title{ font-size: 26px; line-height: 32px; }
	.tf .tf-acct .tf-account-orders{ padding: 4px 12px; }
	.tf-acct .tf-account-orders a{ grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
	.tf-acct .tf-account-orders .tf-acct-ico{ display: none; }
	.tf-acct .tf-account-orders strong{ white-space: nowrap; }
	.tf-acct-emptybox{ padding: 36px 20px; }
}

/* Hero untuk pelanggan yang sudah masuk: sapaan dengan avatar inisial, kartu pesanan aktif, dan pintasan akun.
   Kaca tipis di atas foto gelap; hover hanya di perangkat yang mendukungnya. */
html .tf-hero-content.is-welcome{ padding-top: 44px; }
.tf-hero-hello{ display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 18px !important; padding: 4px 16px 4px 4px; border: 1px solid #F6F0E52E; border-radius: 999px; background: #F6F0E512; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 13px/20px var(--tf-sans); letter-spacing: 0.02em; color: var(--tf-ivory); }
.tf-hero-avatar{ display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tf-gold); font: 500 13px/1 var(--tf-serif); letter-spacing: 0.02em; color: var(--tf-ink); }
.tf-hero-content.is-welcome .tf-h1 em{ overflow-wrap: anywhere; }
.tf-hero-order{ display: flex; align-items: center; gap: 14px; width: min(540px, 100%); margin: 24px auto 0; padding: 10px 16px 10px 10px; border: 1px solid #F6F0E52E; border-radius: 12px; background: #F6F0E512; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--tf-ivory) !important; text-align: left; transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-hero-order:active{ transform: scale(0.98); }
.tf-hero-order:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; }
.tf-hero-order-ico{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #C6A15B33; color: var(--tf-gold); }
.tf-hero-order-main{ display: grid; min-width: 0; }
.tf-hero-order-main small{ font: 600 11px/16px var(--tf-sans); letter-spacing: 0.08em; text-transform: uppercase; color: #F6F0E5B3; }
.tf-hero-order-main strong{ font: 600 15px/22px var(--tf-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-hero-order-pill{ flex: none; padding: 2px 10px; border-radius: 999px; background: #C6A15B33; font: 600 12px/18px var(--tf-sans); color: var(--tf-gold); white-space: nowrap; }
.tf-hero-order-go{ display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 600 13px/20px var(--tf-sans); white-space: nowrap; }
.tf-hero-order-go .tf-acct-svg{ width: 16px; height: 16px; transition: transform 200ms var(--tf-ease-out); }
.tf .tf-hero-list.is-links{ gap: 12px; margin-top: 24px !important; padding-top: 24px !important; }
.tf-hero-list.is-links li::before{ display: none; }
.tf-hero-list.is-links a{ display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid #F6F0E533; border-radius: 999px; font: 600 13px/20px var(--tf-sans); color: var(--tf-ivory) !important; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--tf-ease-out); }
.tf-hero-list.is-links a .tf-acct-svg{ width: 16px; height: 16px; color: var(--tf-gold); }
.tf-hero-list.is-links a:active{ transform: scale(0.97); }
.tf-hero-list.is-links a:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
	.tf-hero-order:hover{ background: #F6F0E51F; border-color: #C6A15B80; }
	.tf-hero-order:hover .tf-hero-order-go .tf-acct-svg{ transform: translateX(3px); }
	.tf-hero-list.is-links a:hover{ background: #F6F0E51A; border-color: var(--tf-gold); }
}
@media (prefers-reduced-motion: reduce){
	.tf-hero-order:hover .tf-hero-order-go .tf-acct-svg{ transform: none; }
}
@media (max-width: 991px){
	html .tf-hero-content.is-welcome{ padding-top: 48px; }
}
/* Ponsel: kartu pesanan dua baris; teks "Lihat detail" disembunyikan, panah tetap. */
@media (max-width: 575px){
	.tf-hero-order{ flex-wrap: wrap; gap: 8px 12px; padding: 12px; }
	.tf-hero-order-main{ flex: 1; }
	.tf-hero-order-go span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.tf-hero-order-pill{ order: 3; margin-left: 52px; }
	.tf-hero-order-go{ order: 2; }
	.tf .tf-hero-list.is-links{ gap: 8px; }
	.tf-hero-list.is-links a{ padding: 0 12px; font-size: 12px; }
}

/* Navbar bawah smartphone (di bawah 768px): kapsul 4 tab + tombol bulat emas. Menu cepat tumbuh dari kapsul lewat clip-path,
   jadi yang dianimasikan hanya clip-path, transform, opacity, dan filter. Tablet dan desktop tidak berubah. */
.tf-bnav, .tf-bnav-scrim{ display: none; }
@media (max-width: 767px){
	/* Burger dan keranjang di header pindah ke navbar bawah. */
	.tf-mobile-actions, .tf-mobile{ display: none; }

	.tf-bnav{ --bn-h: 64px; --bn-ease: cubic-bezier(0.32, 0.72, 0, 1); position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 140; display: flex; align-items: flex-end; gap: 10px; transition: transform 280ms var(--bn-ease), opacity 200ms ease, visibility 0s; }
	/* drop-shadow mengikuti bentuk hasil clip-path, jadi garis tipis tetap terlihat di atas footer yang sama gelapnya. */
	.tf-bnav-box{ position: relative; flex: 1; min-width: 0; height: var(--bn-h); filter: drop-shadow(0 0 0.5px #F6F0E573) drop-shadow(0 10px 20px #2B1B1440); }
	.tf-bnav-panel{ position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 16px; padding: 14px 12px 12px; background: var(--tf-ink); color: var(--tf-ivory); outline: none; clip-path: inset(calc(100% - var(--bn-h)) 0 0 0 round 32px); transition: clip-path 260ms var(--bn-ease); }
	.tf-bnav.is-open .tf-bnav-panel{ clip-path: inset(0 0 0 0 round 24px); transition-duration: 380ms; }
	.tf-bnav-panel > *{ opacity: 0; filter: blur(4px); transform: translateY(8px); transition: opacity 120ms ease, filter 120ms ease, transform 120ms ease; }
	.tf-bnav.is-open .tf-bnav-panel > *{ opacity: 1; filter: none; transform: none; transition-duration: 280ms; transition-timing-function: var(--tf-ease-out); transition-delay: calc(80ms + 40ms * var(--i, 0)); }
	.tf-bnav-panel > :nth-child(2){ --i: 1; }
	.tf-bnav-panel > :nth-child(3){ --i: 2; }

	.tf .tf-bnav-tabs{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; gap: 2px; height: var(--bn-h); padding: 6px; transition: opacity 220ms ease, filter 220ms ease, transform 260ms var(--tf-ease-out); }
	.tf .tf-bnav.is-open .tf-bnav-tabs{ opacity: 0; filter: blur(6px); transform: scale(0.96); pointer-events: none; transition-duration: 140ms; }
	.tf .tf-bnav-tab{ position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; border-radius: 26px; color: #F6F0E5B3; font: 600 12px/16px var(--tf-sans); letter-spacing: 0.1px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: flex-grow 320ms var(--bn-ease), transform 160ms var(--tf-ease-out), color 150ms ease, background-color 150ms ease; }
	.tf .tf-bnav-ico{ position: relative; display: grid; flex: none; place-items: center; width: 22px; height: 22px; }
	.tf-bnav-tab:active{ transform: scale(0.94); }
	.tf .tf-bnav-tab[aria-current]{ background: #F6F0E51A; color: var(--tf-gold); }
	/* Tab aktif melebar (2,4 : 1) dan menampilkan ikon + nama berdampingan; tab lain mengecil jadi ikon saja.
	   Nama tetap ada di DOM (max-width 0) sehingga pembaca layar masih membacanya. */
	.tf .tf-bnav-tab[aria-current]{ flex-grow: 2.4; }
	.tf .tf-bnav-label{ flex: none; max-width: 0; margin-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: max-width 320ms var(--bn-ease), margin-left 320ms var(--bn-ease), opacity 160ms ease; }
	.tf .tf-bnav-tab[aria-current] .tf-bnav-label{ max-width: 88px; margin-left: 6px; opacity: 1; transition-delay: 0s, 0s, 90ms; }
	.tf-bnav-count{ position: absolute; top: -7px; left: 12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tf-gold); color: var(--tf-ink); font: 700 10px/18px var(--tf-sans); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--tf-ink); }

	.tf-bnav-fab{ flex: none; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; padding: 0; border: 0; border-radius: 50%; background: var(--tf-gold); color: var(--tf-ink); cursor: pointer; box-shadow: 0 10px 20px #2B1B1440, 0 0 0 1px #2B1B141F; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 160ms var(--tf-ease-out); }
	.tf-bnav-fab:active{ transform: scale(0.94); }
	.tf-bnav-fab svg{ transition: transform 300ms var(--bn-ease); }
	.tf-bnav.is-open .tf-bnav-fab svg{ transform: rotate(45deg); }
	.tf-bnav-fab:focus-visible{ outline: 2px solid var(--tf-ink); outline-offset: 3px; }
	.tf-bnav-box a:focus-visible, .tf-bnav-box button:focus-visible{ outline: 2px solid var(--tf-gold); outline-offset: 2px; }

	.tf .tf-bnav-search{ display: flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 4px 0 14px; border: 1px solid #F6F0E52E; border-radius: 22px; background: #F6F0E50F; }
	.tf-bnav-search > svg{ flex: none; color: #F6F0E599; }
	/* 16px agar Safari iOS tidak memperbesar halaman saat kolom difokus. */
	.tf .tf-bnav-search input{ flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--tf-ivory); font: 400 16px/20px var(--tf-sans); outline: none; }
	.tf-bnav-search input::placeholder{ color: #F6F0E580; }
	.tf .tf-bnav-search:focus-within{ border-color: var(--tf-gold); }
	.tf-bnav-search button{ flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--tf-gold); color: var(--tf-ink); cursor: pointer; transition: transform 160ms var(--tf-ease-out); }
	.tf-bnav-search button:active{ transform: scale(0.92); }

	.tf .tf-bnav-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; list-style: none; }
	.tf .tf-bnav-tile{ display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: #F6F0E5D9; font: 500 11px/14px var(--tf-sans); text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
	.tf-bnav-tile > span{ display: grid; place-items: center; width: min(48px, 100%); aspect-ratio: 1; border-radius: 16px; background: #F6F0E514; color: var(--tf-ivory); transition: transform 160ms var(--tf-ease-out), background-color 150ms ease; }
	.tf-bnav-tile:active > span{ transform: scale(0.92); background: #F6F0E524; }
	.tf .tf-bnav-tile[aria-current]{ color: var(--tf-gold); }
	.tf-bnav-tile[aria-current] > span{ background: #C6A15B33; color: var(--tf-gold); }

	.tf-bnav-foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid #F6F0E51F; }
	.tf-bnav-lang{ display: flex; gap: 4px; padding: 3px; border: 1px solid #F6F0E52E; border-radius: 999px; }
	.tf-bnav-lang button{ min-width: 44px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #F6F0E5CC; font: 600 13px/20px var(--tf-sans); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
	.tf-bnav-lang [aria-pressed="true"]{ background: var(--tf-gold); color: var(--tf-ink); }
	.tf-bnav-out{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: #F6F0E5CC; font: 600 13px/20px var(--tf-sans); cursor: pointer; }

	.tf-bnav-scrim{ position: fixed; inset: 0; z-index: 139; display: block; background: #2B1B1466; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms; }
	.tf-bnav-scrim.is-on{ opacity: 1; visibility: visible; transition-delay: 0s; }

	/* Turun saat bar beli produk muncul atau saat keyboard terbuka untuk kolom di halaman. */
	.tf:has(.tf-pd-sticky.is-on) .tf-bnav, body:has(input:focus, textarea:focus, select:focus) .tf-bnav:not(.is-open){ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(calc(100% + 16px + env(safe-area-inset-bottom))); transition: transform 220ms var(--tf-ease-out), opacity 160ms ease, visibility 0s linear 220ms; }
	.tf:has(.tf-bnav.is-open) .tf-top, .tf:has(.tf-bnav.is-open) .cs-launcher{ visibility: hidden; }
	/* Ruang di bawah footer agar isi terakhirnya tidak tertutup navbar. */
	.tf:has(.tf-bnav) .tf-footer{ padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce){
	.tf-bnav, .tf-bnav-panel, .tf .tf-bnav-tabs, .tf-bnav-fab svg, .tf .tf-bnav-tab, .tf .tf-bnav-label, .tf-bnav-fab, .tf-bnav-tile > span{ transition-property: opacity, visibility; }
	.tf-bnav-panel > *, .tf .tf-bnav.is-open .tf-bnav-tabs{ filter: none; transform: none; }
}

/* HP sangat sempit (<= 359px): tombol bulat dan jarak diperkecil agar tab yang tidak aktif tetap selebar 44px (batas sentuh). */
@media (max-width: 359px){
	.tf-bnav{ left: 12px; right: 12px; gap: 8px; }
	.tf-bnav-fab{ width: 52px; height: 52px; }
	.tf .tf-bnav-tabs{ padding: 4px; }
	.tf .tf-bnav-tab{ font-size: 11px; }
	.tf .tf-bnav-tab[aria-current]{ flex-grow: 2; }
}

/* Ulasan produk di halaman pesanan selesai */
.tf-od-rate-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 20px; }
.tf-od-rate-list li { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--tf-line); }
.tf-od-rate-list li:first-child { border-top: 0; padding-top: 0; }
.tf-od-rate-stars { display: inline-flex; gap: 2px; color: var(--tf-line); }
.tf-od-rate-stars svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tf-od-rate-stars .is-on, .tf-od-rate-stars button.is-on { color: var(--tf-gold); }
.tf-od-rate-stars .is-on svg, .tf-od-rate-stars button.is-on svg { fill: currentColor; }
.tf-od-rate-stars i { display: inline-flex; font-style: normal; }
.tf-od-rate-stars button { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--tf-line); cursor: pointer; transition: transform 160ms var(--tf-ease-out), color 160ms var(--tf-ease-out); }
.tf-od-rate-stars button:active { transform: scale(0.9); }
.tf-od-rate-stars button:focus-visible { outline: 2px solid var(--tf-ink); outline-offset: 2px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .tf-od-rate-stars button:hover { color: var(--tf-gold); } }
.tf-od-rate textarea { width: 100%; margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--tf-line); border-radius: 14px; font: inherit; resize: vertical; background: #fff; }
.tf-od-rate textarea:focus-visible { outline: 2px solid var(--tf-ink); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .tf-od-rate-stars button { transition: none; } }