/* ==========================================================================
   FOTO BOOKING V2 — FNS (FRAME NO SEKAI) style.css
   Satu file CSS untuk situs utama (gelap) + portal klien (terang, scope
   body.fb2-portal). Pure CSS, mobile-first, breakpoints konsisten:
   640px / 768px / 1024px (+1280px khusus layout 3-kolom portal).

   Token menyatukan drift antar mockup materi (kuning #FACC15..#FFEE00 →
   #FFE600; Teko/Oswald → Anton). Keyframes berprefix fb2-.
   ==========================================================================

   DAFTAR SEKSI
   1.  Tokens (dark + scope portal)
   2.  Reset & base
   3.  Utilities
   4.  Loading screen
   5.  Header + drawer mobile + dock
   6.  Tombol & badge umum
   7.  Hero (home)
   8.  What I Frame grid
   9.  Schedule cards (Where I Shoot Next)
   10. Pricing (Sunday Photo Session) + info bar
   11. Book steps + reserve bar
   12. Portal banner
   13. Next frame banner
   14. Footer situs utama
   15. Works (hero, filter, grid, counter, spotlight, CTA)
   16. Services (FAQ strip; komponen lain reuse)
   17. About
   18. Portal — topnav & footer
   19. Portal — poster & layout
   20. Portal — login
   21. Portal — commission list (tabs, kartu, sidebar, empty, sticky bar)
   22. Portal — detail session (sidebar, galeri, meta)
   23. Lightbox
   24. Toast
   25. Reveal system (entrance animation)
   26. CKEditor content
   27. Load more (works grid + commission list portal)
   28. prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* Font Latin dekoratif utk teks JP — glyph kana/kanji jatuh ke Noto Serif JP
   (Ming/Mincho style); angka & huruf Latin dlm string JP memakai font ini */
@font-face {
    font-family: 'Ming Imperial';
    src: url("../fonts/MingImperial.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Warna inti situs utama (dark industrial) */
    --fb2-yellow: #FFE600;
    --fb2-yellow-hover: #E5CF00;
    --fb2-red: #FF2A55;
    --fb2-bg: #080808;
    --fb2-bg-alt: #000000;          /* seksi selang-seling */
    --fb2-card: #121212;
    --fb2-card-deep: #0C0C0C;
    --fb2-card-works: #121216;      /* nuansa works */
    --fb2-border: #262626;
    --fb2-border-soft: #1B1B1B;
    --fb2-border-works: #24242D;
    --fb2-text: #FFFFFF;
    --fb2-muted: #9E9E9E;
    --fb2-muted-deep: #6E6E6E;
    --fb2-slot-bg: #0E0E0E;

    /* Warna tag works */
    --fb2-tag-cyan: #22D3EE;
    --fb2-tag-red: #EF4444;
    --fb2-tag-purple: #A855F7;
    --fb2-tag-amber: #F59E0B;

    /* Tipografi */
    --fb2-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --fb2-font-body: 'Times New Roman', 'Liberation Serif', 'Noto Serif JP', serif;
    --fb2-font-jp: 'Ming Imperial', 'Noto Serif JP', serif;
    --fb2-font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;

    /* Layout */
    --fb2-container: 77.5rem;       /* 1240px — konsisten di semua halaman */
    --fb2-header-h: 4rem;

    /* Motion */
    --fb2-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --fb2-dur: 0.25s;
}

/* Scope portal klien — sub-brand TERANG (mockup client-portal-*) */
body.fb2-portal {
    --fb2-yellow: #FCE300;
    --fb2-yellow-hover: #ECD600;
    --fb2-bg: #F3F4F6;
    --fb2-card: #FFFFFF;
    --fb2-border: #E5E7EB;
    --fb2-text: #222222;
    --fb2-muted: #71717A;
    --fb2-font-body: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif;

    /* Status pill portal */
    --fb2-st-progress-bg: #FEEB99;  --fb2-st-progress-tx: #7A6100;
    --fb2-st-editing-bg: #D2E7FF;   --fb2-st-editing-tx: #1D5DB8;
    --fb2-st-ready-bg: #D1FAE5;     --fb2-st-ready-tx: #059669;
    --fb2-st-done-bg: #BFF3D4;      --fb2-st-done-tx: #0E7A42;
    --fb2-st-cancel-bg: #E5E7EB;    --fb2-st-cancel-tx: #4B5563;

    --fb2-mint: #D1FAE5;
    --fb2-mint-text: #065F46;
    --fb2-script: 'Caveat', cursive;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html,
body {
    overflow-x: clip;               /* tidak ada scroll horizontal, per permintaan */
}

body {
    font-family: var(--fb2-font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--fb2-text);
    background: var(--fb2-bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

dl,
dt,
dd {
    margin: 0;
}

::selection {
    background: var(--fb2-yellow);
    color: #000;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--fb2-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--fb2-yellow);
}

/* Setiap band lebar penuh mengclip dekorasi — lebar tidak melebihi layar */
.section,
.hero,
.works-hero,
.works-filter,
.works-list,
.spotlight,
.works-cta,
.portal-banner,
.next-frame,
.site-footer,
.ptopnav,
.playout,
.pdetail,
.plogin,
.psticky {
    overflow: hidden;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
}


/* ==========================================================================
   3. UTILITIES
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--fb2-container);
    margin-inline: auto;
    padding-inline: 1rem;
}

.section {
    padding-block: 4.5rem;
    border-bottom: 1px solid var(--fb2-border-soft);
    background: var(--fb2-bg);
}

.section--black {
    background: var(--fb2-bg-alt);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}


/* ==========================================================================
   4. LOADING SCREEN
   ========================================================================== */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background: var(--fb2-bg);
    transition: opacity 0.4s var(--fb2-ease), visibility 0.4s;
}

.loader.is-done {
    opacity: 0;
    visibility: hidden;
}

.loader__rings {
    position: relative;
    width: 54px;
    height: 54px;
}

.loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}

.loader__ring--outer {
    border-top-color: var(--fb2-yellow);
    border-bottom-color: var(--fb2-yellow);
    animation: fb2-spin 1s linear infinite;
}

.loader__ring--inner {
    inset: 8px;
    border-left-color: var(--fb2-yellow);
    border-right-color: var(--fb2-yellow);
    animation: fb2-spin 0.7s linear infinite reverse;
}

.loader__caption {
    font-family: var(--fb2-font-display);
    font-size: 0.875rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--fb2-muted);
}

.loader__caption span {
    font-family: var(--fb2-font-jp);
    letter-spacing: 0.2em;
}

@keyframes fb2-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   5. HEADER + DRAWER + DOCK
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 10, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #1C1C1C;
    transition: box-shadow var(--fb2-dur) var(--fb2-ease);
}

.site-header.is-scrolled {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.site-header__inner {
    height: var(--fb2-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.brand__mark {
    font-family: var(--fb2-font-display);
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: #000;
    background: var(--fb2-yellow);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.brand__stamp {
    display: inline-flex;
    flex-direction: column;
    border-left: 1px solid #33383f;
    padding-left: 0.5rem;
    font-family: var(--fb2-font-mono);
    line-height: 1.25;
}

.brand__stamp .brand__jp {
    font-family: var(--fb2-font-jp);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #D4D4D8;
}

.brand__stamp .brand__en {
    font-size: 8px;
    letter-spacing: 0.2em;
    color: #71717A;
}

.main-nav {
    display: none;
    align-items: stretch;
    align-self: stretch;
    gap: 2.5rem;
}

.main-nav__link {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #A1A1AA;
    border-bottom: 3px solid transparent;
    transition: color var(--fb2-dur) var(--fb2-ease);
}

.main-nav__link:hover {
    color: #fff;
}

.main-nav__link.is-active {
    color: var(--fb2-yellow);
    border-bottom-color: var(--fb2-yellow);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.ig-link {
    display: none;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #D4D4D4;
    transition: color var(--fb2-dur) var(--fb2-ease);
}

.ig-link:hover {
    color: #fff;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #fff;
}

.menu-toggle__bar {
    transition: transform 0.25s var(--fb2-ease), opacity 0.2s;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar--top {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar--mid {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar--bottom {
    transform: translateY(-6px) rotate(-45deg);
}

/* Drawer mobile */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 49;
    background: #0A0A0A;
    border-bottom: 1px solid #1F1F1F;
    padding: 1rem 1.25rem 1.5rem;
    display: none;
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu__link {
    display: block;
    padding: 0.8rem 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E5E5E5;
    border-bottom: 1px solid #1A1A1A;
    animation: fb2-rise 0.3s var(--fb2-ease) both;
}

.mobile-menu__link:nth-child(2) { animation-delay: 0.04s; }
.mobile-menu__link:nth-child(3) { animation-delay: 0.08s; }
.mobile-menu__link:nth-child(4) { animation-delay: 0.12s; }
.mobile-menu__link:nth-child(5) { animation-delay: 0.16s; }

.mobile-menu__link.is-active,
.mobile-menu__link:hover {
    color: var(--fb2-yellow);
}

.mobile-menu .btn-portal {
    margin-top: 1rem;
}

@keyframes fb2-rise {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Dock navigasi bawah (mobile) */
.dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 48;
    display: flex;
    background: rgba(8, 8, 8, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid #1F1F1F;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

.dock__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.375rem 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fb2-muted);
}

.dock__link.is-active {
    color: var(--fb2-yellow);
}

/* Layar sempit (≤389px): brand + CTA portal + hamburger tidak muat —
   hamburger terpotong di tepi kanan. CTA portal disembunyikan dari header
   (tetap tersedia di drawer mobile & dock bawah). */
@media (max-width: 389.98px) {
    .site-header .header-actions .btn-portal {
        display: none;
    }
}


/* ==========================================================================
   6. TOMBOL & BADGE UMUM
   ========================================================================== */
.btn-yellow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--fb2-yellow);
    color: #000;
    padding: 0.75rem 2rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: background var(--fb2-dur) var(--fb2-ease), transform var(--fb2-dur) var(--fb2-ease);
}

.btn-yellow:hover {
    background: var(--fb2-yellow-hover);
}

.btn-yellow--lg {
    padding: 1rem 2rem;
    font-size: 0.875rem;
    box-shadow: 0 0 25px rgba(255, 230, 0, 0.35);
}

.btn-yellow--lg:hover {
    transform: scale(1.04);
}

.btn-portal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--fb2-yellow);
    color: #000;
    padding: 0.625rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background var(--fb2-dur) var(--fb2-ease), transform var(--fb2-dur) var(--fb2-ease);
}

.btn-portal:hover {
    background: var(--fb2-yellow-hover);
}

.btn-portal--block {
    display: flex;
    justify-content: center;
}

.btn-white {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #000;
    padding: 0.625rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background var(--fb2-dur) var(--fb2-ease), color var(--fb2-dur) var(--fb2-ease);
}

.btn-white:hover {
    background: var(--fb2-yellow);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border: 1px solid #3F3F46;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: border-color var(--fb2-dur) var(--fb2-ease);
}

.btn-ghost:hover {
    border-color: #fff;
}

/* Kepala seksi standar */
.section-head {
    margin-bottom: 2.5rem;
}

.section-head__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(2.25rem, 5vw, 3.375rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.5rem;
}

.section-head__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
}

.section-head__accent {
    font-family: var(--fb2-font-display);
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.section-head__jp {
    font-family: var(--fb2-font-jp);
    font-size: 1rem;
    font-weight: 700;
    color: #D4D4D4;
}

.section-head__desc {
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--fb2-muted);
    max-width: 32rem;
    margin-top: 0.25rem;
}

.section-head--center {
    text-align: center;
}

.section-head--center .section-head__desc {
    margin-inline: auto;
}

.section-head__rule {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fb2-muted);
    margin-top: 0.75rem;
}

.section-head__rule span:first-child,
.section-head__rule span:last-child {
    display: inline-block;
    width: 3rem;
    height: 1px;
    background: rgba(255, 230, 0, 0.6);
}


/* ==========================================================================
   7. HERO (HOME)
   ========================================================================== */
.hero {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    background: #000;
}

.hero__media,
.hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__media img {
    object-fit: cover;
    object-position: 65% 25%;
    opacity: 0.55;
    filter: contrast(1.25);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 580px;
    padding-block: 3.5rem 4rem;
}

.hero__concept {
    align-self: flex-end;
    text-align: right;
    margin-bottom: 2rem;
}

.hero__concept-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: #D4D4D4;
    margin-bottom: 0.25rem;
}

.hero__concept-en {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.15;
    color: #fff;
}

.hero__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(3rem, 9vw, 5.5rem);
    line-height: 1.05; /* Anton: tinta glyph > em-box — 0.9 membuat baris saling menumpuk */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.hero__caption {
    font-family: var(--fb2-font-jp);
    font-size: 0.9375rem;
    letter-spacing: 0.3em;
    color: #D4D4D4;
    padding-top: 0.75rem;
}


/* ==========================================================================
   8. WHAT I FRAME — baris flex 25/25/50 + 50/25/25 (header di atas grid)
   ========================================================================== */
.frame-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

/* Header jadi blok pertama di atas grid */
.frame-head {
    margin-bottom: 1rem;
}

.frame-head__rule {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    margin: 1.25rem 0 0;
}

/* Baris kartu — kolom di mobile, 1:1:2 / 2:1:1 di tablet ke atas */
.frame-row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.frame-card {
    background: #111;
    border: 1px solid #222;
    overflow: hidden;
    transition: transform 0.2s var(--fb2-ease);
}

.frame-card:hover {
    transform: translateY(-4px);
}

/* Rasio per tipe kartu: portrait 3:4 (25%) / landscape 3:2 (50%).
   Dengan lebar 1:2, tinggi media kedua tipe sama → tepi baris rata. */
.frame-card--portrait .frame-card__media {
    aspect-ratio: 3 / 4;
}

.frame-card--wide .frame-card__media {
    aspect-ratio: 3 / 2;
}

.frame-card__media {
    overflow: hidden;
}

.frame-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--fb2-ease);
}

.frame-card:hover .frame-card__media img {
    transform: scale(1.05);
}

/* Caption 2 baris: nama terang + detail redup */
.frame-card__caption {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem;
    background: #000;
    font-family: var(--fb2-font-mono);
}

.frame-card__name {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: #EDEDED;
}

.frame-card__meta {
    font-size: 0.625rem;
    color: var(--fb2-muted);
}

.frame-cta {
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   9. SCHEDULE CARDS
   ========================================================================== */
.schedule-list {
    max-width: 64rem;
    margin-inline: auto;
    display: grid;
    gap: 1rem;
}

.schedule-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #2A2A2A;
    background: var(--fb2-card-deep);
}

.schedule-card__date {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    background: #fff;
    color: #000;
    padding: 1rem;
    border-bottom: 1px solid #333;
    font-family: var(--fb2-font-display);
}

.schedule-card__day {
    font-size: clamp(2.25rem, 6vw, 3rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
}

.schedule-card__month {
    font-size: 1.125rem;
    letter-spacing: 0.06em;
}

.schedule-card__year {
    font-family: var(--fb2-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: #262626;
}

.schedule-banner {
    min-height: 120px;
    border-bottom: 1px solid #222;
}

.schedule-banner--image {
    height: 100%;
}

.schedule-banner--image img {
    width: 100%;
    height: 100%;
    min-height: 120px;
    object-fit: cover;
    filter: brightness(0.9);
}

.schedule-banner--comifu,
.schedule-banner--orenji {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 1.25rem;
    text-align: center;
}

.schedule-banner--comifu {
    background: #24170D;
}

.schedule-banner--orenji {
    background: linear-gradient(to right, #1E3A8A, #1E1B4B);
}

.schedule-banner__name {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--fb2-yellow);
}

.schedule-banner--orenji .schedule-banner__name {
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.schedule-banner__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    color: #E5E5E5;
}

.schedule-banner--orenji .schedule-banner__jp {
    color: #BFDBFE;
}

.schedule-banner__meta {
    font-family: var(--fb2-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    color: #D4D4D4;
    margin-top: 2px;
}

.schedule-card__slots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    background: var(--fb2-slot-bg);
}

.slot-col__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fb2-muted);
    margin-bottom: 0.5rem;
}

.slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid #1C1C1C;
    font-family: var(--fb2-font-mono);
    font-size: 0.75rem;
    color: #D4D4D4;
}

.slot-col > .slot-row:last-child {
    border-bottom: 0;
}

.slot-badge {
    background: var(--fb2-yellow);
    color: #000;
    font-family: var(--fb2-font-body);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 6px;
}


/* ==========================================================================
   10. PRICING + INFO BAR
   ========================================================================== */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.price-card {
    position: relative;
    border: 1px solid var(--fb2-border);
    background: #000;
    overflow: hidden;
}

.price-card__media {
    position: relative;
    height: 20rem;
}

.price-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.price-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000 4%, rgba(0, 0, 0, 0.3) 45%, transparent);
}

.price-card__body {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
}

.price-card__title {
    font-family: var(--fb2-font-display);
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: pre-line;
}

.price-card__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    color: #D4D4D4;
    margin-bottom: 0.5rem;
}

.price-card__price {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.875rem, 4vw, 2.375rem);
    letter-spacing: -0.01em;
    color: var(--fb2-yellow);
}

.price-card__features {
    border-top: 1px solid var(--fb2-border);
    background: var(--fb2-card-deep);
    padding: 1rem 1.25rem;
}

.price-card__features li {
    position: relative;
    padding: 0.3rem 0 0.3rem 1.1rem;
    font-size: 0.75rem;
    color: var(--fb2-muted);
}

.price-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    background: var(--fb2-yellow);
}

.info-bar {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid #2A2A2A;
    background: #0F0F0F;
}

.info-bar__label {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-bar__label h4 {
    font-family: var(--fb2-font-display);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.15;
    color: #fff;
}

.info-bar__label p {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: var(--fb2-muted);
}

.info-bar__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid #222;
}

.info-bar__item svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: #D4D4D4;
}

.info-bar__value {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.info-bar__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: var(--fb2-muted);
}


/* -------------------------------------------------------------------------
   Varian HOME — judul kiri + kartu portrait + info-bar putih
   (scope .pricing-section--home; halaman services tetap pakai gaya dasar)
   ------------------------------------------------------------------------- */
.pricing-section--home {
    position: relative;
    padding-top: 1.5rem;
}

/* Garis kuning di tepi atas seksi — selebar container */
.pricing-section--home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: var(--fb2-container);
    margin-inline: auto;
    height: 2px;
    background: var(--fb2-yellow);
    pointer-events: none;
}

.pricing-section--home .pricing-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.pricing-section--home .pricing-head {
    margin-bottom: 0;
}

.pricing-section--home .pricing-head .section-head__title {
    font-size: clamp(2.5rem, 5.6vw, 4.5rem);
    line-height: 1.065;
    margin-bottom: 2.5rem;
}

.pricing-section--home .pricing-head .section-head__jp {
    font-size: 1rem;
    font-weight: 400;
    color: #A2A2A2;
}

.pricing-section--home .pricing-head .section-head__desc {
    font-size: 1rem;
    margin-top: 0.55rem;
}

.pricing-section--home .pricing-grid {
    margin-bottom: 0;
}

.pricing-section--home .price-card {
    border: 0;
}

.pricing-section--home .price-card__media {
    height: auto;
    aspect-ratio: 2 / 3;
}

.pricing-section--home .price-card__body {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
}

.pricing-section--home .price-card__title {
    font-size: 0.875rem;
    font-weight: 700;
}

.pricing-section--home .price-card__jp {
    color: #B8B8B8;
    margin-bottom: 0;
}

.pricing-section--home .price-card__price {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    color: #FFDA55;
}

.pricing-section--home .info-bar__label h4 {
    font-family: var(--fb2-font-body);
    font-weight: 700;
}

.pricing-section--home .info-bar__item svg {
    color: #fff;
}

.pricing-section--home .info-bar {
    border: 2px solid rgba(255, 255, 255, 0.85);
}

/* Warna border item (atas di mobile, kiri di ≥768px) — property-specific
   agar tidak menimpa lebar border dari aturan dasar/media */
.pricing-section--home .info-bar__item {
    border-top-color: rgba(255, 255, 255, 0.85);
    border-left-color: rgba(255, 255, 255, 0.85);
}

/* Mobile (<768px): kartu harga jadi carousel horizontal — seksi tetap ringkas,
   rasio portrait 2:3 dipertahankan (kartu berikutnya terlihat = petunjuk swipe) */
@media (max-width: 767.98px) {
    .pricing-section--home .pricing-head .section-head__title {
        margin-bottom: 1.25rem;
    }

    .pricing-section--home .pricing-grid {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-inline: -1rem;          /* flush ke tepi viewport */
        padding-inline: 1rem 0.25rem;
    }

    .pricing-section--home .pricing-grid::-webkit-scrollbar {
        display: none;
    }

    .pricing-section--home .pricing-grid::after {
        content: "";
        flex: 0 0 0.75rem;             /* ruang snap setelah kartu terakhir */
    }

    .pricing-section--home .price-card {
        flex: 0 0 min(72%, 300px);
        scroll-snap-align: start;
    }
}


/* ==========================================================================
   11. BOOK STEPS + RESERVE BAR
   ========================================================================== */

/* Bingkai seksi: garis terang atas + bawah selebar container (desain 2026-09-30) */
.book-section {
    position: relative;
    padding-block: 2.5rem;
    border-bottom: 0;
}

.book-section::before,
.book-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    max-width: var(--fb2-container);
    margin-inline: auto;
    height: 2px;
    background: rgba(255, 255, 255, 0.82);
    pointer-events: none;
}

.book-section::before {
    top: 0;
}

.book-section::after {
    bottom: 0;
}

.book-grid {
    display: grid;
    /* minmax(0,1fr): tanpa ini min-content carousel .step-grid (mobile)
       memaksa track melebar → reserve-bar terpotong melebihi layar */
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
}

.book-callout {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.book-callout__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(2.5rem, 5.5vw, 4.375rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--fb2-yellow);
}

.book-callout__jp {
    font-family: var(--fb2-font-jp);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-top: 1rem;
}

.book-callout__desc {
    font-size: 0.875rem;
    font-weight: 300;
    color: #fff;
    margin-top: 0.875rem;
    max-width: 15rem;
}

.book-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    /* grid item: izinkan menyusut di bawah min-content anak (carousel
       step-grid mobile) — pola sama dengan .bf-main */
    min-width: 0;
}

.step-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.step-card {
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: #000;
    padding: 1.625rem 1.25rem 1.25rem;
    min-height: 11.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.step-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step-card__num {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.75rem, 3.8vw, 3rem);
    line-height: 1;
    color: var(--fb2-yellow);
}

.step-card__arrow {
    color: var(--fb2-yellow);
    font-size: clamp(1.75rem, 3.8vw, 3rem);
    line-height: 1;
}

.step-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

.step-card__icon--lg {
    width: 3.25rem;
    height: 3.25rem;
}

.step-card__title {
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.3;
    color: #fff;
    white-space: pre-line;
}

.step-card__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: var(--fb2-muted);
    margin-top: 2px;
}

.step-card__desc {
    font-size: 0.6875rem;
    color: #9E9E9E;
    line-height: 1.4;
    margin-top: 0.25rem;
}

/* Kartu OR: teks di atas, ikon besar di bawah */
.step-card--or .step-card__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
}

.step-card--or .step-card__icon {
    order: 2;
    margin: 0.75rem 0 0;
}

.step-card--or .step-card__title {
    order: 1;
}

.reserve-links {
    display: grid;
    gap: 0.75rem;
}

.reserve-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--fb2-yellow);
    color: #000;
    padding: 1.375rem 1.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: background var(--fb2-dur) var(--fb2-ease);
}

.reserve-bar:hover {
    background: var(--fb2-yellow-hover);
}

.reserve-bar--alt {
    background: transparent;
    color: #fff;
    border: 1px solid #3F3F46;
    box-shadow: none;
}

.reserve-bar--alt:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Label: ikon kiri + kolom teks (EN di atas, JP di bawah) */
.reserve-bar__label {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1rem;
}

.reserve-bar__label svg {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
}

.reserve-bar__text {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--fb2-font-display);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reserve-bar:not(.reserve-bar--alt) .reserve-bar__text {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

.reserve-bar__jp {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--fb2-font-jp);
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0.2rem 0 0;
}

/* Panah panjang (batang + kepala) via mask — warna ikut currentColor */
.reserve-bar__arrow {
    font-size: 0;
    width: clamp(4rem, 14vw, 13.75rem);
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16'%3E%3Cpath d='M0 8h203m0 0-11-7m11 7-11 7' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16'%3E%3Cpath d='M0 8h203m0 0-11-7m11 7-11 7' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
    flex-shrink: 0;
    transition: transform var(--fb2-dur) var(--fb2-ease);
}

.reserve-bar:hover .reserve-bar__arrow {
    transform: translateX(6px);
}

/* Mobile/tablet (<1024px): kartu step jadi carousel horizontal snap */
@media (max-width: 1023.98px) {
    .step-grid {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-inline: -1rem;
        padding-inline: 1rem 0.25rem;
    }

    .step-grid::-webkit-scrollbar {
        display: none;
    }

    .step-grid::after {
        content: "";
        flex: 0 0 0.75rem;
    }

    .step-card {
        flex: 0 0 min(72%, 300px);
        scroll-snap-align: start;
        min-height: 15rem;
    }
}


/* ==========================================================================
   12. PORTAL BANNER (HOME)
   ========================================================================== */
.portal-banner {
    position: relative;
    background: #0D0D0D;
    border-bottom: 1px solid var(--fb2-border-soft);
    padding-block: 4rem;
    min-height: min(80vh, 680px);
    display: flex;
    align-items: center;
    overflow: clip;
}

.portal-banner__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    align-items: center;
}

.portal-banner__content {
    position: relative;
    z-index: 1;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portal-banner__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: #fff;
}

.portal-banner__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #D4D4D4;
    margin: 0.25rem 0 1rem;
}

.portal-banner__desc {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--fb2-muted);
    max-width: 28rem;
    margin-bottom: 1.5rem;
}

.portal-banner__media {
    /* Lebar foto = lebar kotak konten container (kiri sejajar judul, kanan di tepi konten); tinggi penuh seksi */
    --portal-inset: max(1rem, calc(50% - var(--fb2-container) / 2 + 1rem));
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--portal-inset);
    right: var(--portal-inset);
    z-index: 0;
}

.portal-banner__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    filter: contrast(1.05);
}

.portal-banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 100% at 68% 40%, rgba(13, 13, 13, 0) 38%, rgba(13, 13, 13, 0.5) 100%),
        linear-gradient(to right, rgba(13, 13, 13, 0.94) 0%, rgba(13, 13, 13, 0.55) 40%, rgba(13, 13, 13, 0.1) 72%),
        linear-gradient(to top, rgba(13, 13, 13, 0.7) 0%, rgba(13, 13, 13, 0) 40%);
}


/* ==========================================================================
   13. NEXT FRAME BANNER
   ========================================================================== */
.next-frame {
    position: relative;
    background: #000;
    border-bottom: 1px solid var(--fb2-border-soft);
    padding-block: 4rem;
    min-height: min(80vh, 680px);
    display: flex;
    align-items: center;
}

.next-frame__bg,
.next-frame__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.next-frame__bg {
    z-index: 0;
}

.next-frame__bg img {
    object-fit: cover;
    object-position: 50% 35%;
    filter: contrast(1.05);
}

.next-frame__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 100% at 68% 38%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(to right, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 34%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 42%);
}

.next-frame__inner {
    position: relative;
    z-index: 1;
}

.next-frame__row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
}

.next-frame__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.next-frame__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #D4D4D4;
    margin-top: 0.5rem;
}

.next-frame__divider {
    width: 4rem;
    height: 1px;
    background: #6B7280;
    margin-bottom: 2rem;
}

.next-frame__foot {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--fb2-muted);
}

.next-frame__motto {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.875rem;
    color: #D4D4D4;
}

.next-frame__motto-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: var(--fb2-muted);
}

.next-frame__base {
    text-align: right;
}

.next-frame__city {
    font-family: var(--fb2-font-display);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
}

.next-frame__tag {
    font-family: var(--fb2-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--fb2-muted);
    margin-top: 2px;
}


/* ==========================================================================
   14. FOOTER SITUS UTAMA
   ========================================================================== */
.site-footer {
    background: #09090B;
    color: #71717A;
    padding-block: 3rem;
    font-size: 0.75rem;
    /* ruang untuk dock mobile */
    padding-bottom: calc(3rem + 4.5rem);
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #1F1F26;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-brand__mark {
    font-family: var(--fb2-font-display);
    font-size: 1.875rem;
    letter-spacing: 0.06em;
    color: #fff;
}

.footer-brand__id {
    border-left: 1px solid #27272A;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-brand__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    font-weight: 700;
    color: #D4D4D4;
}

.footer-brand__tag {
    font-family: var(--fb2-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: #71717A;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--fb2-font-mono);
    color: #A1A1AA;
}

.footer-links a {
    transition: color var(--fb2-dur) var(--fb2-ease);
}

.footer-links a:hover {
    color: var(--fb2-yellow);
}

.footer-links__sep {
    color: #3F3F46;
}

.to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: #16161D;
    border: 1px solid #27272A;
    color: #fff;
    transition: background var(--fb2-dur) var(--fb2-ease), color var(--fb2-dur) var(--fb2-ease);
}

.to-top:hover {
    background: var(--fb2-yellow);
    color: #000;
}

.footer-bottom {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    color: #52525B;
    text-align: center;
}

.footer-bottom__base {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


/* ==========================================================================
   15. WORKS
   ========================================================================== */
.works-hero {
    position: relative;
    border-bottom: 1px solid #222228;
    background: linear-gradient(to bottom, #111115, #0C0C0E 55%, #09090B);
    overflow: hidden;
}

/* Foto latar hero works (setting works_hero_image): full-bleed di bawah
   overlay gelap + grid tech, konten tetap kontras. */
.works-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.works-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.45;
    filter: grayscale(0.35) contrast(1.2);
}

.works-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(17, 17, 21, 0.35), rgba(9, 9, 11, 0.85));
}

.works-hero__tech,
.spotlight__tech {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(252, 238, 10, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(252, 238, 10, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 30% 0%, #000 30%, transparent 75%);
}

.works-hero .container {
    position: relative;
    z-index: 1;
    padding-block: 4rem;
}

.works-hero__kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.works-hero__dash {
    display: inline-block;
    width: 2rem;
    height: 2px;
    background: var(--fb2-yellow);
    flex-shrink: 0;
}

.works-hero__kicker-text {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
}

.works-hero__kicker-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    color: #71717A;
}

.works-hero__dot {
    color: #52525B;
    font-size: 0.75rem;
}

.works-hero__main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.works-hero__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(3.5rem, 10vw, 8rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}

.works-hero__title .is-accent {
    color: var(--fb2-yellow);
}

.works-hero__lead {
    margin-top: 1rem;
    max-width: 42rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #A1A1AA;
}

.works-hero__stats {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    background: #15151A;
    border: 1px solid #272732;
    padding: 0.75rem;
    align-self: flex-start;
    flex-wrap: wrap;
}

.wstat {
    padding: 0.5rem 1rem;
    text-align: left;
}

.wstat + .wstat {
    border-left: 1px solid #27272A;
}

.wstat__value {
    display: block;
    font-family: var(--fb2-font-display);
    font-size: 1.875rem;
    line-height: 1;
    color: #fff;
}

.wstat--accent .wstat__value {
    color: var(--fb2-yellow);
}

.wstat--small .wstat__value {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding-top: 0.5rem;
}

.wstat__label {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #A1A1AA;
    margin-top: 0.25rem;
}

/* Filter sticky */
.works-filter {
    position: sticky;
    top: var(--fb2-header-h);
    z-index: 40;
    background: rgba(12, 12, 15, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #222228;
    padding-block: 0.875rem;
}

.works-filter__inner {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.filter-tabs {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: #17171D;
    border: 1px solid #272732;
    color: #D4D4D4;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--fb2-dur) var(--fb2-ease), color var(--fb2-dur) var(--fb2-ease);
}

.filter-tab:hover {
    background: #202028;
    color: #fff;
}

.filter-tab.is-active {
    background: var(--fb2-yellow);
    border-color: var(--fb2-yellow);
    color: #000;
}

.filter-tab__count {
    margin-left: 0.25rem;
    opacity: 0.7;
}

.works-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
}

.event-select select {
    appearance: none;
    background: #15151A;
    border: 1px solid #2E2E3A;
    color: #D4D4D4;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239E9E9E' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
}

.event-select select:focus,
.search-box input:focus {
    outline: 1px solid var(--fb2-yellow);
    outline-offset: 0;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 15rem;
}

.search-box svg {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    transform: translateY(-50%);
    color: #71717A;
    pointer-events: none;
}

.search-box input {
    width: 100%;
    background: #15151A;
    border: 1px solid #2E2E3A;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
}

.search-box input::placeholder {
    color: #71717A;
}

/* Grid works */
.works-list {
    padding-block: 3rem;
}

.works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    content-visibility: auto;
    contain-intrinsic-size: auto 1600px;
}

.work-card {
    display: flex;
    flex-direction: column;
    background: var(--fb2-card-works);
    border: 1px solid var(--fb2-border-works);
    transition: border-color 0.3s var(--fb2-ease);
}

.work-card:hover {
    border-color: var(--fb2-yellow);
}

.work-card.is-hidden {
    display: none;
}

.work-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #000;
}

.work-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.95);
    transition: transform 0.5s var(--fb2-ease), filter 0.5s var(--fb2-ease);
}

.work-card:hover .work-card__media img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.work-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0D0D10 5%, transparent 50%, rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.work-card__badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.work-card__event {
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid #3F3F46;
    color: #fff;
    font-family: var(--fb2-font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
}

.work-card__tag {
    font-family: var(--fb2-font-mono);
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
}

.work-card__tag--yellow { background: var(--fb2-yellow); color: #000; }
.work-card__tag--cyan   { background: var(--fb2-tag-cyan); color: #000; }
.work-card__tag--red    { background: var(--fb2-tag-red); color: #fff; }
.work-card__tag--purple { background: var(--fb2-tag-purple); color: #fff; }
.work-card__tag--amber  { background: var(--fb2-tag-amber); color: #000; }

.work-card__count {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid #27272A;
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    color: #D4D4D4;
    padding: 0.25rem 0.5rem;
}

.work-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    background: var(--fb2-card-works);
}

.work-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    color: #71717A;
    margin-bottom: 0.25rem;
}

.work-card__meta strong {
    color: #E4E4E7;
    font-weight: 600;
}

.work-card__title {
    font-family: var(--fb2-font-display);
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: 0.03em;
    color: #fff;
    transition: color 0.25s var(--fb2-ease);
}

.work-card:hover .work-card__title {
    color: var(--fb2-yellow);
}

.work-card__desc {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    color: #A1A1AA;
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.work-card__foot {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(63, 63, 72, 0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    color: #71717A;
}

.work-card__view {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: transform var(--fb2-dur) var(--fb2-ease);
}

.work-card:hover .work-card__view {
    transform: translateX(3px);
}

.works-counter {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid #222228;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    color: #71717A;
}

.works-counter__note {
    color: var(--fb2-yellow);
    letter-spacing: 0.1em;
}

/* Spotlight */
.spotlight {
    position: relative;
    border-block: 1px solid #222228;
    background: #0F0F13;
    padding-block: 4rem;
}

.spotlight .container {
    position: relative;
    z-index: 1;
}

.spotlight__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.spotlight__kicker {
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
}

.spotlight__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.75rem, 4vw, 3rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    margin-top: 0.25rem;
}

.spotlight__pulse {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.spotlight__pulse span:first-child {
    width: 0.75rem;
    height: 0.75rem;
    background: var(--fb2-yellow);
    animation: fb2-pulse 1.6s ease-in-out infinite;
}

.spotlight__pulse span:last-child {
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    color: #71717A;
}

@keyframes fb2-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.spotlight__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    background: #15151B;
    border: 1px solid #272733;
    padding: 1.5rem;
}

.spotlight__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid #27272A;
}

.spotlight__frame img {
    width: 100%;
    height: 17rem;
    object-fit: cover;
    object-position: 50% 15%;
    filter: contrast(1.1);
}

.spotlight__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #000 10%, rgba(0, 0, 0, 0.6) 60%, transparent);
    padding: 1.25rem;
}

.spotlight__palette {
    display: block;
    font-family: var(--fb2-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
}

.spotlight__caption p {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0.25rem;
}

.spotlight__data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.spotlight__data-label {
    display: block;
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #71717A;
}

.spotlight__exif {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.spotlight__exif div {
    background: #0D0D10;
    border: 1px solid #27272A;
    padding: 0.75rem;
}

.spotlight__exif span {
    display: block;
    font-family: var(--fb2-font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    color: #71717A;
}

.spotlight__exif strong {
    display: block;
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    color: #fff;
    margin-top: 2px;
}

.spotlight__note {
    margin-top: 1.25rem;
}

.spotlight__note p {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    line-height: 1.8;
    color: #D4D4D4;
    margin-top: 0.5rem;
}

.spotlight__foot {
    padding-top: 1rem;
    border-top: 1px solid #27272A;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.spotlight__foot > span {
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    color: var(--fb2-yellow);
}

/* CTA works/about */
.works-cta {
    position: relative;
    background: #000;
    border-bottom: 1px solid #222228;
    padding-block: 5rem;
}

.works-cta__glow {
    position: absolute;
    right: -5rem;
    bottom: -5rem;
    width: 20rem;
    height: 20rem;
    background: rgba(255, 230, 0, 0.1);
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.works-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
}

.works-cta__kicker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.works-cta__kicker span:first-child {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--fb2-yellow);
}

.works-cta__kicker span:last-child {
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
}

.works-cta__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}

.works-cta__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.875rem;
    color: #A1A1AA;
    margin-top: 0.5rem;
}

.works-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}


/* ==========================================================================
   16. SERVICES — FAQ strip (komponen lain reuse seksi 9-11)
   ========================================================================== */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.faq-item {
    border: 1px solid #2A2A2A;
    background: var(--fb2-card-deep);
    padding: 1.5rem;
}

.faq-item h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.faq-item h3::before {
    content: "Q. ";
    color: var(--fb2-yellow);
}

.faq-item p {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--fb2-muted);
}


/* ==========================================================================
   16b. SERVICES — BOOKING (halaman /services, ikut materi/booking.html)
   Stepper box 4 sel DI DALAM konten (lebar 100% kolom), sidebar kiri
   permanen, hero foto kanan. Font tetap font situs (DM Serif Display /
   Times / Ming Imperial) — hanya ukuran + warna yang mengikuti referensi.
   ========================================================================== */

/* ---- Hero banner (foto di kanan, tipografi di kiri) ---- */
.bf-hero {
    position: relative;
    background: #0d0f12;
    border-bottom: 1px solid #23272e;
    overflow: hidden;
}

.bf-hero__inner {
    position: relative;
    max-width: 1720px;
    margin-inline: auto;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 1.25rem;
}

.bf-hero__photo {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bf-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0.7;
    filter: contrast(1.25);
}

.bf-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, #0d0f12 5%, rgba(13, 15, 18, 0.6) 55%, transparent),
        linear-gradient(to top, #0d0f12, transparent 60%);
}

.bf-hero__txt {
    position: relative;
    z-index: 1;
    max-width: 42rem;
}

.bf-hero__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(3.25rem, 9vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--fb2-yellow);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.bf-hero__jp {
    font-family: var(--fb2-font-jp);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fff;
    margin-top: 1rem;
}

.bf-hero__desc {
    font-size: 0.8125rem;
    color: #A1A1AA;
    margin-top: 0.5rem;
    max-width: 24rem;
}

.bf-hero__quote {
    display: none;
}

/* ---- Shell: sidebar kiri + konten kanan ---- */
.bf-shell {
    max-width: 1720px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.bf-main {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.bf-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---- Sidebar kiri ---- */
.bf-side {
    width: 100%;
    background: #0c0d10;
    border-bottom: 1px solid #22262d;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.bf-side__thumb {
    position: relative;
    width: 100%;
    height: 11rem;
    overflow: hidden;
    border: 1px solid #27272a;
}

.bf-side__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    filter: grayscale(1) contrast(1.25);
}

.bf-side__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0c0d10, transparent 65%);
}

.bf-side__wm {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.bf-side__wm-fns {
    font-family: var(--fb2-font-display);
    font-size: 1.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.bf-side__wm-booking {
    font-family: var(--fb2-font-display);
    font-size: 1.25rem;
    letter-spacing: 0.22em;
    color: #a1a1aa;
}

.bf-side__wm-code {
    font-family: var(--fb2-font-mono);
    font-size: 0.5625rem;
    color: #71717a;
    margin-top: 3px;
}

.bf-side__steps {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bf-side__step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem;
    opacity: 0.6;
    transition: opacity var(--fb2-dur) var(--fb2-ease);
}

.bf-side__step.is-active {
    opacity: 1;
    background: rgba(255, 230, 0, 0.1);
    border-left: 4px solid var(--fb2-yellow);
}

.bf-side__num {
    font-family: var(--fb2-font-display);
    font-size: 1.125rem;
    line-height: 1.2;
    color: #71717a;
    padding: 0 6px;
    flex-shrink: 0;
}

.bf-side__step.is-active .bf-side__num {
    background: var(--fb2-yellow);
    color: #000;
    font-size: 0.75rem;
    padding: 2px 6px;
}

.bf-side__en {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4d4d8;
    line-height: 1.3;
}

.bf-side__step.is-active .bf-side__en {
    color: var(--fb2-yellow);
}

.bf-side__stepjp {
    display: block;
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: #71717a;
    margin-top: 2px;
}

.bf-side__bottom {
    padding-top: 1.5rem;
    border-top: 1px solid #1d2127;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bf-side__photo {
    position: relative;
    width: 100%;
    height: 8rem;
    overflow: hidden;
    border: 1px solid #27272a;
}

.bf-side__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(1);
    transition: filter 0.5s var(--fb2-ease);
}

.bf-side__photo:hover img {
    filter: none;
}

.bf-side__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0.3) 45%, transparent);
}

.bf-side__quote {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 1;
    font-family: var(--fb2-font-display);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--fb2-yellow);
    transform: rotate(-4deg);
}

.bf-side__meta {
    font-family: var(--fb2-font-mono);
    font-size: 0.5625rem;
    color: #71717a;
}

.bf-side__sys {
    color: #a1a1aa;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.bf-side__tags {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin-top: 2px;
}

.bf-side__barcode {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-top: 0.5rem;
    opacity: 0.7;
}

.bf-side__barcode span {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #888;
}

.bf-side__barcode span:nth-child(3),
.bf-side__barcode span:nth-child(6),
.bf-side__barcode span:nth-child(9),
.bf-side__barcode span:nth-child(12),
.bf-side__barcode span:nth-child(17) { width: 2px; }

.bf-side__barcode span:nth-child(2),
.bf-side__barcode span:nth-child(7),
.bf-side__barcode span:nth-child(11),
.bf-side__barcode span:nth-child(18) { width: 8px; }

.bf-side__barcode span:nth-child(5),
.bf-side__barcode span:nth-child(10),
.bf-side__barcode span:nth-child(16) { width: 12px; }

.bf-side__barcode span:nth-child(14) { width: 6px; }

/* ---- Stepper box 4 sel (di dalam konten, lebar 100%) ---- */
.bf-stepper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #111317;
    border: 1px solid #242830;
    margin-bottom: 2rem;
}

.bf-stepper__cell {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    color: #a1a1aa;
    border-right: 1px solid #242830;
    border-bottom: 1px solid #242830;
}

.bf-stepper__cell:nth-child(2n) {
    border-right: 0;
}

.bf-stepper__cell:nth-child(n+3) {
    border-bottom: 0;
}

.bf-stepper__cell.is-active {
    background: var(--fb2-yellow);
    color: #000;
}

.bf-stepper__num {
    font-family: var(--fb2-font-display);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    color: #52525b;
    flex-shrink: 0;
}

.bf-stepper__cell.is-active .bf-stepper__num {
    color: #000;
}

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

.bf-stepper__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #d4d4d8;
    line-height: 1.2;
}

.bf-stepper__cell.is-active .bf-stepper__label {
    color: #000;
}

.bf-stepper__dash {
    display: none;
    width: 1.5rem;
    height: 2px;
    background: #52525b;
    flex-shrink: 0;
}

.bf-stepper__cell.is-active .bf-stepper__dash {
    background: #000;
}

.bf-stepper__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    font-weight: 500;
    color: #71717a;
    margin-top: 2px;
}

.bf-stepper__cell.is-active .bf-stepper__jp {
    color: rgba(0, 0, 0, 0.8);
}

/* ---- Kepala seksi (banner step — foto latar penuh header,
   FNS + reticle di atasnya; tanpa border/sudut potong) ---- */
.bf-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem 1.5rem;
    background: #0d0d0d;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

/* Foto naik satu level — background seluruh header (zona txt + banner) */
.bf-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--fb2-img);
    background-size: cover;
    background-position: top center;
}

.bf-head__txt {
    position: relative;
    z-index: 2;
}

.bf-head__tag {
    font-family: 'Anton', var(--fb2-font-display);
    font-size: 1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
}

.bf-head__title {
    font-family: 'Anton', var(--fb2-font-display);
    font-size: clamp(2.75rem, 6vw, 6.5rem);
    line-height: 0.98;
    text-transform: uppercase;
    color: #fff;
    margin-top: 0.75rem;
}

.bf-head__jp {
    font-family: var(--fb2-font-jp);
    font-size: 1.125rem;
    font-weight: 700;
    color: #d4d4d8;
    margin-top: 0.75rem;
}

.bf-head__desc {
    font-family: var(--fb2-font-jp);
    font-size: 1.125rem;
    color: #a1a1aa;
    margin-top: 1rem;
}

.bf-head__desc span {
    color: #71717a;
    font-size: 0.875rem;
}

/* Zona kanan: transparan — foto latar dari .bf-head terlihat menembus;
   FNS + reticle di atasnya */
.bf-head__banner {
    position: relative;
    width: 100%;
    height: 11rem;
    overflow: hidden;
    z-index: 1;
}

.bf-head__banner-txt {
    position: absolute;
    right: 6%;
    top: 5%;
    z-index: 2;
    max-width: 5.75rem;
    text-align: left;
}

.bf-head__banner-fns {
    font-family: 'Anton', var(--fb2-font-display);
    font-size: clamp(2.75rem, 4.5vw, 5.25rem);
    line-height: 1;
    letter-spacing: 0.03em;
    color: #000;
}

.bf-head__banner-tag {
    font-family: var(--fb2-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000;
    margin-top: 0.375rem;
    line-height: 2;
}

/* ---- Kepala seksi form (badge kuning + EN + JP) ---- */
.bf-sec {
    margin-bottom: 2.5rem;
}

.bf-sec__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.bf-sec__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--fb2-yellow);
    color: #000;
    font-family: var(--fb2-font-display);
    font-size: 1.0625rem;
    flex-shrink: 0;
}

.bf-sec__en {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.bf-sec__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    font-weight: 500;
    color: #a1a1aa;
}

/* ---- Kartu event ---- */
.bf-event-grid {
    display: grid;
    /* minmax(0,1fr): nama event nowrap-ellipsis tidak boleh melebarkan
       track di layar sempit */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.bf-event {
    position: relative;
    display: block;
    background: #14161a;
    border: 2px solid #262a33;
    padding: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s var(--fb2-ease);
}

.bf-event:hover {
    border-color: #71717a;
}

.bf-event.is-selected {
    border-color: var(--fb2-yellow);
}

.bf-event__check {
    display: none;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--fb2-yellow);
    color: #000;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.bf-event.is-selected .bf-event__check {
    display: inline-flex;
}

.bf-event__media {
    position: relative;
    height: 7rem;
    overflow: hidden;
    background: #18181b;
}

.bf-event__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--fb2-ease);
}

.bf-event:hover .bf-event__media img {
    transform: scale(1.05);
}

.bf-event__shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
}

.bf-event__typo {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: #1b1e24;
}

.bf-event__typo-name {
    font-family: var(--fb2-font-display);
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #fff;
}

.bf-event__typo-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: #71717a;
}

.bf-event__other-icon {
    width: 2rem;
    height: 2rem;
    color: #71717a;
    transition: color 0.2s var(--fb2-ease);
}

.bf-event:hover .bf-event__other-icon,
.bf-event.is-selected .bf-event__other-icon {
    color: var(--fb2-yellow);
}

.bf-event__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.bf-event__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.bf-event__date {
    text-align: center;
    line-height: 1.05;
    border-right: 1px solid #3f3f46;
    padding-right: 0.75rem;
    font-family: var(--fb2-font-display);
    flex-shrink: 0;
}

.bf-event__day {
    display: block;
    font-size: 1.5rem;
    color: #fff;
}

.bf-event__month {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a1a1aa;
}

.bf-event__year {
    display: block;
    font-family: var(--fb2-font-mono);
    font-size: 0.5rem;
    color: #71717a;
}

.bf-event__name {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s var(--fb2-ease);
}

.bf-event:hover .bf-event__name {
    color: var(--fb2-yellow);
}

.bf-event__city {
    font-size: 0.75rem;
    color: #a1a1aa;
}

.bf-event__radio {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid #71717a;
    flex-shrink: 0;
    position: relative;
}

.bf-event.is-selected .bf-event__radio {
    border: 2px solid var(--fb2-yellow);
}

.bf-event.is-selected .bf-event__radio::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--fb2-yellow);
    transform: translate(-50%, -50%);
}

/* Kartu OTHER EVENT — media jadi blok ikon */
.bf-event--other .bf-event__media {
    background: #1b1e24;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Kartu layanan (foto latar penuh) ---- */
.bf-service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.bf-service {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 21rem;
    background: #14161a;
    border: 2px solid #262a33;
    padding: 1.25rem;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s var(--fb2-ease);
}

.bf-service:hover {
    border-color: #71717a;
}

.bf-service.is-selected {
    border-color: var(--fb2-yellow);
}

.bf-service__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.25;
    transition: opacity 0.3s var(--fb2-ease);
}

.bf-service:hover .bf-service__bg,
.bf-service.is-selected .bf-service__bg {
    opacity: 0.4;
}

.bf-service__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: contrast(1.25);
}

.bf-service__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0e1014, rgba(14, 16, 20, 0.7) 50%, rgba(14, 16, 20, 0.4));
}

.bf-service__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bf-service__icon {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid #3f3f46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fb2-yellow);
    flex-shrink: 0;
}

.bf-service__icon--moon,
.bf-service__icon--duo {
    color: #d4d4d8;
}

.bf-service__check {
    display: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--fb2-yellow);
    color: #000;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.bf-service.is-selected .bf-service__check {
    display: inline-flex;
}

.bf-service__radio {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid #71717a;
}

.bf-service.is-selected .bf-service__radio {
    display: none;
}

.bf-service__info {
    position: relative;
    z-index: 1;
    margin-top: 5rem;
}

.bf-service__name {
    font-family: var(--fb2-font-display);
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
}

.bf-service__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    font-weight: 700;
    color: #d4d4d8;
    margin-top: 0.25rem;
}

.bf-service__foot {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(63, 63, 70, 0.6);
}

.bf-service__desc {
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
}

.bf-service__desc-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: #a1a1aa;
    margin-top: 0.25rem;
}

/* ---- Navigasi bawah ---- */
.bf-nav {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid #20242b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.bf-nav__back {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #3f3f46;
    background: #121417;
    color: #e4e4e7;
    padding: 0.75rem 1.75rem;
    transition: border-color var(--fb2-dur) var(--fb2-ease), background var(--fb2-dur) var(--fb2-ease);
}

.bf-nav__back:hover {
    border-color: #71717a;
    background: #1a1d22;
}

.bf-nav__back:active {
    transform: scale(0.95);
}

.bf-nav__back-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bf-nav__back-en {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bf-nav__back-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: #a1a1aa;
}

.bf-nav__next {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--fb2-yellow);
    color: #000;
    padding: 0.875rem 2.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    transition: background var(--fb2-dur) var(--fb2-ease), transform var(--fb2-dur) var(--fb2-ease);
}

.bf-nav__next:hover {
    background: #f6d900;
}

.bf-nav__next:active {
    transform: scale(0.95);
}

.bf-nav__next.is-disabled {
    opacity: 0.55;
}

.bf-nav__next-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.bf-nav__next-en {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bf-nav__next-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.8);
}

.bf-nav__next svg {
    transition: transform 0.2s var(--fb2-ease);
}

.bf-nav__next:hover svg {
    transform: translateX(4px);
}

/* ---- Responsive seksi ini ---- */
@media (min-width: 640px) {
    .bf-event-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-sec__en {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .bf-stepper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bf-stepper__cell:nth-child(2n) {
        border-right: 1px solid #242830;
    }

    .bf-stepper__cell:last-child {
        border-right: 0;
    }

    .bf-stepper__dash {
        display: inline-block;
        /* Sel stepper sempit (768px): dash dekoratif boleh menyusut habis
           agar tidak menonjol melewati tepi sel/layar */
        flex-shrink: 1;
        min-width: 0;
    }

    .bf-service-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bf-hero__photo {
        width: 60%;
    }

    .bf-hero__inner {
        padding: 3rem 2rem;
    }
}

@media (min-width: 1024px) {
    .bf-hero__inner {
        min-height: 440px;
        padding: 3rem 3rem;
    }

    .bf-hero__photo {
        width: 50%;
    }

    .bf-hero__quote {
        display: block;
        position: absolute;
        right: 2rem;
        top: 3rem;
        z-index: 1;
        max-width: 20rem;
        text-align: right;
    }

    .bf-hero__quote h3 {
        font-family: var(--fb2-font-display);
        font-size: 1.25rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #e4e4e7;
        line-height: 1.25;
    }

    .bf-hero__quote p {
        font-family: var(--fb2-font-jp);
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        color: #a1a1aa;
        margin-top: 0.375rem;
    }

    .bf-shell {
        flex-direction: row;
    }

    .bf-side {
        width: 260px;
        flex-shrink: 0;
        border-bottom: 0;
        border-right: 1px solid #22262d;
        justify-content: space-between;
        padding: 1.5rem;
    }

    .bf-main {
        padding: 2.5rem;
    }

    /* Banner step: tinggi mengikuti rasio gambar komposit (1828/576)
       agar cover pas tanpa crop; konten teks dipadatkan supaya muat */
    .bf-head {
        flex-direction: row;
        align-items: stretch;
        padding: 0;
        aspect-ratio: 1828 / 576;
    }

    .bf-head::before {
        background-position: right center;
    }

    .bf-head__txt {
        flex: 1;
        max-width: 44%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1.25rem 2rem;
    }

    .bf-head__title {
        font-size: clamp(2.75rem, 4.25vw, 4.75rem);
    }

    .bf-head__desc {
        margin-top: 0.75rem;
    }

    .bf-head__banner {
        width: 55%;
        height: auto;
        flex-shrink: 0;
    }
}

@media (min-width: 1280px) {
    .bf-side {
        width: 280px;
    }

    .bf-event-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}



/* ==========================================================================
   17. ABOUT
   ========================================================================== */
.about-intro__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

.about-intro__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    margin: 0.75rem 0 1rem;
}

.about-intro__title .is-accent {
    color: var(--fb2-yellow);
}

.about-intro__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.8125rem;
    line-height: 1.9;
    color: #D4D4D4;
    margin-bottom: 1rem;
}

.about-intro__lead {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--fb2-muted);
    margin-bottom: 0.75rem;
}

.about-intro__media {
    border: 1px solid var(--fb2-border);
    overflow: hidden;
}

.about-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--fb2-border-soft);
    border: 1px solid var(--fb2-border-soft);
}

.stat-item {
    background: var(--fb2-bg-alt);
    padding: 2rem 1.5rem;
}

.stat-item__value {
    display: block;
    font-family: var(--fb2-font-display);
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1;
    color: var(--fb2-yellow);
}

.stat-item__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    margin-top: 0.5rem;
}

.stat-item__jp {
    display: block;
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: var(--fb2-muted);
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.vm-block {
    border: 1px solid var(--fb2-border);
    background: var(--fb2-card);
    padding: 2rem;
    position: relative;
}

.vm-block__num {
    font-family: var(--fb2-font-display);
    font-size: 2.25rem;
    color: rgba(255, 230, 0, 0.25);
    position: absolute;
    top: 1rem;
    right: 1.25rem;
}

.vm-block__title {
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--fb2-yellow);
    margin-bottom: 0.75rem;
}

.vm-block p {
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--fb2-muted);
    max-width: 30rem;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.team-card {
    border: 1px solid var(--fb2-border);
    background: var(--fb2-card);
    overflow: hidden;
}

.team-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.team-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.4) contrast(1.05);
    transition: filter 0.4s var(--fb2-ease);
}

.team-card:hover .team-card__media img {
    filter: grayscale(0) contrast(1.05);
}

.team-card__body {
    padding: 1.25rem;
}

.team-card__name {
    font-family: var(--fb2-font-display);
    font-size: 1.375rem;
    letter-spacing: 0.05em;
    color: #fff;
}

.team-card__role {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
    margin: 0.25rem 0 0.5rem;
}

.team-card__role span {
    font-family: var(--fb2-font-jp);
    color: var(--fb2-muted);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.team-card__bio {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--fb2-muted);
}


/* ==========================================================================
   18. PORTAL — TOPNAV & FOOTER
   ========================================================================== */
.ptopnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #111111;
    color: #fff;
    border-bottom: 1px solid #222;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.ptopnav__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4rem;
}

.ptopnav__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.ptopnav__mark {
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.04em;
}

.ptopnav__id {
    display: flex;
    flex-direction: column;
    padding-left: 0.75rem;
    border-left: 1px solid #3F3F46;
    line-height: 1.4;
}

.ptopnav__id span:first-child {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    font-weight: 500;
    color: #D4D4D4;
    letter-spacing: 0.25em;
}

.ptopnav__id span:last-child {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9CA3AF;
}

.ptopnav__nav {
    display: none;
    align-items: center;
    gap: 2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4D4D4;
}

.ptopnav__nav a {
    transition: color 0.15s var(--fb2-ease);
}

.ptopnav__nav a:hover {
    color: #fff;
}

.ptopnav__active {
    position: relative;
    color: var(--fb2-yellow);
    font-weight: 700;
    padding-block: 1.3rem;
}

.ptopnav__active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--fb2-yellow);
}

.ptopnav__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ptopnav__ig {
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #E5E5E5;
    padding-right: 0.5rem;
}

.ptopnav__ig:hover {
    color: #fff;
}

.ptopnav__logout {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    border: 1px solid #3F3F46;
    color: #D4D4D4;
    padding: 0.4rem 0.75rem;
    transition: color var(--fb2-dur), border-color var(--fb2-dur);
}

.ptopnav__logout:hover {
    color: #fff;
    border-color: #fff;
}

.ptopnav__splatter {
    position: absolute;
    right: -2.5rem;
    top: 0;
    bottom: 0;
    width: 9rem;
    display: none;
    pointer-events: none;
    opacity: 0.9;
}

.pfooter {
    margin-top: auto;
    background: #111111;
    color: #fff;
    border-top: 1px solid #2A2A2A;
    padding: 1rem 1.5rem;
    /* ruang sticky bar mobile */
    margin-bottom: 3.25rem;
}

.pfooter__inner {
    max-width: 115rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pfooter__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pfooter__mark {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.04em;
}

.pfooter__id {
    display: flex;
    flex-direction: column;
    padding-left: 0.5rem;
    border-left: 1px solid #3F3F46;
    line-height: 1.4;
}

.pfooter__id span:first-child {
    font-family: var(--fb2-font-jp);
    font-size: 0.5625rem;
    color: #D4D4D4;
}

.pfooter__id span:last-child {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9CA3AF;
}

.pfooter__tagline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9CA3AF;
}

.pfooter__tagline span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    text-transform: none;
    color: #D4D4D4;
}

.pfooter__dash {
    width: 1rem;
    height: 2px;
    background: var(--fb2-yellow);
}


/* ==========================================================================
   19. PORTAL — LAYOUT & POSTER
   ========================================================================== */
.site-main--portal {
    width: 100%;
}

.playout {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 115rem;
    margin-inline: auto;
    flex: 1 0 auto;
}

.pposter {
    display: none;
}

.playout__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.25rem;
}


/* ==========================================================================
   20. PORTAL — LOGIN
   ========================================================================== */
.plogin {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.plogin__card {
    width: 100%;
    max-width: 26rem;
    background: var(--fb2-card);
    border: 1px solid var(--fb2-border);
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
    padding: 2.5rem 2rem;
}

.plogin__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.plogin__mark {
    font-family: var(--fb2-font-display);
    font-size: 1.875rem;
    color: #111;
}

.plogin__stamp {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid #D4D4D4;
    padding: 2px 8px;
    line-height: 1.35;
}

.plogin__stamp span:first-child {
    font-family: var(--fb2-font-jp);
    font-size: 8px;
    letter-spacing: 0.3em;
    color: #52525B;
}

.plogin__stamp span:last-child {
    font-size: 8px;
    letter-spacing: 0.12em;
    color: #71717A;
}

.plogin__title {
    font-family: var(--fb2-font-display);
    font-size: 1.875rem;
    letter-spacing: 0.04em;
    text-align: center;
    color: #111;
}

.plogin__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    text-align: center;
    color: var(--fb2-muted);
    margin: 2px 0 0.75rem;
}

.plogin__desc {
    font-size: 0.75rem;
    line-height: 1.7;
    text-align: center;
    color: #52525B;
    margin-bottom: 1.75rem;
}

.plogin__form {
    display: grid;
    gap: 1.125rem;
}

.pfield__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #52525B;
    margin-bottom: 0.375rem;
}

.pfield input {
    width: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    background: #F9FAFB;
    color: #111;
    font: inherit;
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
}

.pfield input:focus {
    outline: none;
    border-color: #111;
    background: #fff;
    box-shadow: 0 0 0 1px #111;
}

.plogin__recaptcha {
    display: flex;
    justify-content: center;
}

.plogin__hint {
    font-size: 0.6875rem;
    text-align: center;
    color: #9CA3AF;
    margin-top: 1.25rem;
}

/* Tombol portal */
.pbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background var(--fb2-dur) var(--fb2-ease), transform 0.15s var(--fb2-ease);
}

.pbtn:active {
    transform: scale(0.97);
}

.pbtn--yellow {
    background: var(--fb2-yellow);
    color: #111;
}

.pbtn--yellow:hover {
    background: var(--fb2-yellow-hover);
}

.pbtn--dark {
    background: #121212;
    color: #fff;
}

.pbtn--dark:hover {
    background: #333;
}

/* Varian outline — link download HD eksternal (portal detail) */
.pbtn--outline {
    background: transparent;
    color: #111;
    border: 1px solid #111;
}

.pbtn--outline:hover {
    background: #111;
    color: var(--fb2-yellow);
}

.pbtn--block {
    width: 100%;
}

.pbtn__en {
    display: block;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.pbtn__jp {
    display: block;
    font-family: var(--fb2-font-jp);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.75;
}


/* ==========================================================================
   21. PORTAL — COMMISSION LIST
   ========================================================================== */
.plist__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.plist__kicker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #9CA3AF;
    margin-bottom: 2px;
}

.plist__kicker span {
    width: 3px;
    height: 0.75rem;
    background: var(--fb2-yellow);
}

.plist__titlerow,
.plist__title {
    display: flex;
    align-items: center;
}

.plist__title {
    gap: 0.75rem;
    font-family: var(--fb2-font-display);
    font-size: clamp(1.75rem, 4vw, 2.375rem);
    letter-spacing: 0.04em;
    color: #111;
}

.plist__title::before {
    content: "";
    width: 4px;
    height: 1.75rem;
    background: var(--fb2-yellow);
    flex-shrink: 0;
}

.plist__sub {
    font-family: var(--fb2-font-jp);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #52525B;
}

.plist__sub span {
    letter-spacing: 0.1em;
}

.plist__desc {
    font-size: 0.75rem;
    color: #52525B;
    margin-top: 0.25rem;
}

.plist__search {
    position: relative;
    width: 100%;
}

.plist__search svg {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: #9CA3AF;
    pointer-events: none;
}

.plist__search input {
    width: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 0.75rem;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.plist__search input:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 1px #111;
}

.pfilters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

.pfilters__tabs {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

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

.ptab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-bottom: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9CA3AF;
    white-space: nowrap;
    transition: color var(--fb2-dur) var(--fb2-ease);
}

.ptab:hover {
    color: #404040;
}

.ptab.is-active {
    color: #111;
    font-weight: 800;
}

.ptab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2.5px;
    background: var(--fb2-yellow);
}

.ptab__count {
    background: #E5E7EB;
    color: #52525B;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 7px;
}

.ptab.is-active .ptab__count {
    background: #111;
    color: #fff;
}

.psort select {
    appearance: none;
    border: 1px solid #E5E7EB;
    border-radius: 0.375rem;
    background: #fff;
    color: #404040;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.plist__items {
    display: grid;
    gap: 0.875rem;
}

.plist__empty-filter {
    text-align: center;
    font-size: 0.75rem;
    color: #9CA3AF;
    padding: 2rem 0;
}

/* Kartu commission */
.pcard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid #F3F4F6;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 0.875rem 1.25rem;
    transition: box-shadow 0.2s var(--fb2-ease);
}

.pcard:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.pcard.is-hidden {
    display: none;
}

.pcard__date {
    width: 3rem;
    text-align: center;
    flex-shrink: 0;
    line-height: 1.1;
}

.pcard__date span {
    display: block;
}

.pcard__date span:first-child {
    font-family: var(--fb2-font-display);
    font-size: 1.5rem;
    color: #111;
}

.pcard__date span:nth-child(2) {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #222;
}

.pcard__date span:last-child {
    font-size: 0.5625rem;
    color: #9CA3AF;
}

.pcard__thumb {
    width: 4rem;
    height: 3rem;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #F3F4F6;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcard__thumb-fallback {
    font-family: var(--fb2-font-display);
    font-size: 1.125rem;
    color: #9CA3AF;
}

.pcard__event {
    flex: 1;
    min-width: 8rem;
}

.pcard__event h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #171717;
    line-height: 1.25;
}

.pcard__event p {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #71717A;
    margin-top: 1px;
}

.pcard__event svg {
    width: 0.75rem;
    height: 0.75rem;
    color: #9CA3AF;
    flex-shrink: 0;
}

.pcard__client {
    flex: 1;
    min-width: 8rem;
}

.pcard__client h4 {
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #171717;
}

.pcard__client p {
    font-size: 0.75rem;
    color: #71717A;
}

.pcard__client p[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: #9CA3AF;
}

.pcard__status {
    width: 7rem;
    text-align: center;
    flex-shrink: 0;
}

.pcard__status > span[lang="ja"] {
    display: block;
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: #9CA3AF;
    margin-top: 1px;
}

.pstatus {
    display: inline-block;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.pstatus--progress { background: var(--fb2-st-progress-bg); color: var(--fb2-st-progress-tx); }
.pstatus--editing  { background: var(--fb2-st-editing-bg);  color: var(--fb2-st-editing-tx); }
.pstatus--ready    { background: var(--fb2-st-ready-bg);    color: var(--fb2-st-ready-tx); }
.pstatus--done     { background: var(--fb2-st-done-bg);     color: var(--fb2-st-done-tx); }
.pstatus--cancel   { background: var(--fb2-st-cancel-bg);   color: var(--fb2-st-cancel-tx); }

.pcard__photos {
    width: 4.5rem;
    text-align: center;
    flex-shrink: 0;
}

.pcard__photos span {
    display: block;
}

.pcard__photos span:first-child {
    font-size: 0.875rem;
    font-weight: 700;
    color: #404040;
}

.pcard__photos span:last-child {
    font-size: 0.625rem;
    color: #9CA3AF;
}

.pcard__actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.pcard__spacer {
    display: inline-block;
    width: 7rem;
}

/* Sidebar kanan */
.pside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pside__card,
.pside__next {
    background: #fff;
    border: 1px solid #F3F4F6;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pside__card {
    padding: 1.25rem;
}

.pside__next {
    padding: 1rem;
}

.pside__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pside__head > span:first-child {
    width: 3px;
    height: 1.25rem;
    background: var(--fb2-yellow);
    flex-shrink: 0;
}

.pside__head h2 {
    font-family: var(--fb2-font-display);
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    color: #171717;
    line-height: 1;
}

.pside__head span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: #9CA3AF;
}

.pside__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #F3F4F6;
}

/* Pembatas hairline pola 2×2 (kolom kanan + baris bawah), seperti
   tabel statistik pada mockup */
.pside__grid > div {
    padding: 0.875rem 0.125rem 0.125rem;
}

.pside__grid > div:nth-child(even) {
    border-left: 1px solid #F3F4F6;
    padding-left: 0.875rem;
}

.pside__grid > div:nth-child(n+3) {
    border-top: 1px solid #F3F4F6;
}

.pside__value {
    display: block;
    font-family: var(--fb2-font-display);
    font-size: 1.875rem;
    line-height: 1;
    color: #171717;
}

.pside__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #404040;
    margin-top: 0.25rem;
}

.pside__jp {
    display: block;
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: #9CA3AF;
}

.pside__event {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pside__event img {
    width: 100%;
    height: 11rem;
    object-fit: cover;
}

.pside__event-date {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    background: #fff;
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    padding: 0.375rem 0.5rem;
    text-align: center;
    line-height: 1.1;
    width: 2.75rem;
}

.pside__event-date span {
    display: block;
}

.pside__event-date span:first-child {
    font-family: var(--fb2-font-display);
    font-size: 1.0625rem;
    color: #171717;
}

.pside__event-date span:nth-child(2) {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #404040;
}

.pside__event-date span:last-child {
    font-size: 0.5rem;
    color: #9CA3AF;
}

.pside__event-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, #000 20%, rgba(0, 0, 0, 0.8) 60%, transparent);
    padding: 1rem 0.875rem 0.875rem;
    color: #fff;
}

.pside__event-info h3 {
    font-family: var(--fb2-font-display);
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
}

.pside__event-info p {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #D1D5DB;
    margin-top: 2px;
}

.pside__event-info svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--fb2-yellow);
}

.pside__next .pbtn {
    margin-top: 1rem;
    width: 100%;
}

/* Empty state */
.pempty {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.pempty__script {
    font-family: var(--fb2-script);
    font-size: 1.75rem;
    color: #047857;
    line-height: 1.1;
}

.pempty__desc {
    font-size: 0.8125rem;
    color: #065F46;
}

.pempty__desc-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: #059669;
}

.pempty .pbtn {
    margin-top: 0.75rem;
}

/* Sticky bottom bar (mobile) */
.psticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 48;
    display: flex;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.psticky a {
    flex: 1;
    text-align: center;
    padding: 0.875rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #404040;
}

.psticky a + a {
    border-left: 1px solid #E5E7EB;
}


/* ==========================================================================
   22. PORTAL — DETAIL SESSION
   ========================================================================== */
.pdetail {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%;
}

/* Sidebar kiri (gelap) */
.pdside {
    display: none;
}

/* Galeri */
.pgallery {
    flex: 1;
    min-width: 0;
    background: #F6F6F4;
    padding: 1.5rem;
}

/* Back link mobile/tablet — sidebar kiri tersembunyi <1024px */
.pgallery__back {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #52525B;
    margin-bottom: 1rem;
    transition: color var(--fb2-dur) var(--fb2-ease);
}

.pgallery__back:hover {
    color: #171717;
}

.pgallery__back svg {
    width: 1rem;
    height: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.pgallery__back-en {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #27272A;
}

.pgallery__back-jp {
    display: block;
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: #A1A1AA;
}

.pgallery__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid #E8E8E4;
    padding-bottom: 1.25rem;
}

/* Anchor target tidak tertutup nav sticky */
#gallery,
#info,
#actions {
    scroll-margin-top: 5.5rem;
}

/* Feedback klik nav sidebar (PHOTOS / SESSION DETAILS): seksi target
   berkedip kuning. Outline offset negatif → digambar di dalam elemen,
   tidak terpotong overflow:hidden induk. Murni CSS via :target. */
#gallery:target,
#info:target {
    outline: 3px solid transparent;
    outline-offset: -3px;
    animation: pdTargetFlash 1.4s ease-out;
}

@keyframes pdTargetFlash {
    0%   { outline-color: rgba(255, 230, 0, 0.9); }
    100% { outline-color: rgba(255, 230, 0, 0); }
}

.pgallery__titlerow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pgallery__bar {
    width: 5px;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--fb2-yellow);
    flex-shrink: 0;
}

.pgallery__titlerow h1 {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    letter-spacing: 0.02em;
    color: #171717;
}

.pgallery__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #404040;
    padding-top: 0.25rem;
}

.pgallery__desc {
    font-size: 0.75rem;
    color: #71717A;
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

.pgallery__count {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    align-self: flex-start;
    border-right: 2px solid var(--fb2-yellow);
    padding-right: 0.75rem;
}

.pgallery__count > span:first-child {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #9CA3AF;
}

.pgallery__count-value {
    font-family: var(--fb2-font-display);
    font-size: 1.875rem;
    line-height: 1;
    color: #171717;
}

.pgallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 1.25rem;
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
}

/* Tile foto — potret 4:5 seragam seperti referensi (tanpa shadow) */
.pgallery__item {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #EBEBE7;
}

.pgallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--fb2-ease);
}

.pgallery__item:hover img {
    transform: scale(1.05);
}

.pgallery__view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity var(--fb2-dur) var(--fb2-ease);
}

.pgallery__item:hover .pgallery__view {
    opacity: 1;
}

.pgallery__download {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity var(--fb2-dur) var(--fb2-ease), background var(--fb2-dur);
}

.pgallery__item:hover .pgallery__download {
    opacity: 1;
}

.pgallery__download:hover {
    background: var(--fb2-yellow);
}

.pgallery__download svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Kontrol tile terlihat saat fokus keyboard, bukan hanya hover */
.pgallery__view:focus-visible,
.pgallery__download:focus-visible {
    opacity: 1;
    outline: 2px solid var(--fb2-yellow);
    outline-offset: 2px;
}

/* State editing */
.pgallery__editing {
    margin-top: 1.5rem;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #065F46;
}

.pgallery__editing-icon {
    color: #059669;
    margin-bottom: 0.5rem;
}

.pgallery__editing-script {
    font-family: var(--fb2-script);
    font-size: 1.75rem;
    color: #047857;
}

.pgallery__editing p {
    font-size: 0.8125rem;
    max-width: 28rem;
}

.pgallery__editing-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: #059669;
}

/* Panel meta & aksi */
.pmeta {
    background: #fff;
    border-top: 1px solid #E5E7EB;
    padding: 1.5rem;
}

.pmeta__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #171717;
}

.pmeta__title::before {
    content: "";
    width: 4px;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--fb2-yellow);
}

.pmeta__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: #9CA3AF;
    padding-left: 0.75rem;
    margin: 2px 0 1.25rem;
}

.pmeta__list {
    display: grid;
    gap: 1rem;
}

.pmeta__list dt {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9CA3AF;
}

.pmeta__list dt svg {
    width: 1rem;
    height: 1rem;
    color: #9CA3AF;
    flex-shrink: 0;
}

.pmeta__list dd {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #171717;
    margin-top: 2px;
    padding-left: 1.625rem;
}

.pmeta__list dd span {
    display: block;
    font-weight: 500;
    font-size: 0.6875rem;
    color: #71717A;
}

.pmeta__list dd[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-weight: 400;
    font-size: 0.6875rem;
    color: #9CA3AF;
}

.pmeta__status {
    padding-left: 0;
}

.pmeta__actions {
    margin-top: 2rem;
    display: grid;
    gap: 0.625rem;
}

.pmeta__actions .pmeta__title {
    margin-bottom: 0.5rem;
}

.pmeta__actions .pbtn {
    padding-block: 0.75rem;
}

/* Link share publik yang ditampilkan (bisa disalin manual) */
.pmeta__shareurl {
    margin-top: 0.25rem;
    font-size: 0.625rem;
    color: #9CA3AF;
    word-break: break-all;
}

.pmeta__shareurl span {
    display: block;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.pmeta__shareurl code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    color: #52525B;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    display: block;
}

.pmeta__foot {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid #F3F4F6;
    text-align: center;
    font-size: 0.625rem;
    color: #9CA3AF;
}

/* ==========================================================================
   22b. HALAMAN SHARE PUBLIK (/share/{token}) — tanpa login
   ========================================================================== */

/* Brand header publik — band gelap tipis di atas halaman */
.pshare-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #16171A;
    border-bottom: 1px solid #2A2A2A;
    padding: 0.875rem 1.5rem;
}

.pshare-top__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #fff;
}

.pshare-top__mark {
    font-weight: 800;
    font-size: 1.375rem;
    letter-spacing: -0.03em;
}

.pshare-top__id {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.pshare-top__id span {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9CA3AF;
}

.pshare-top__id span[lang="ja"] {
    color: #D4D4D4;
}

.pshare-top__badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.35;
    text-align: right;
}

.pshare-top__badge span:first-child {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--fb2-yellow);
}

.pshare-top__badge span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-size: 0.5625rem;
    color: #9CA3AF;
}

.pshare {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 3.5rem;
}

/* Kartu identitas sesi — grid: tanggal | event | klien | status */
.pshare__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.pshare__date {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    border-bottom: 1px solid #F3F4F6;
    padding-bottom: 0.625rem;
}

.pshare__day {
    font-family: var(--fb2-font-display);
    font-size: 2rem;
    line-height: 1;
    color: #171717;
}

.pshare__my {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pshare__my span:first-child {
    font-family: var(--fb2-font-display);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
}

.pshare__my span:last-child {
    font-size: 0.625rem;
    font-weight: 600;
    color: #71717A;
}

.pshare__event h1 {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    letter-spacing: 0.02em;
    color: #171717;
}

.pshare__event p {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #71717A;
    margin-top: 0.25rem;
}

.pshare__event p svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.pshare__nick {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #171717;
}

.pshare__char {
    font-size: 0.75rem;
    color: #52525B;
    margin-top: 1px;
}

.pshare__char-jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: #9CA3AF;
}

.pshare__side {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pshare__count {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #71717A;
}

.pshare__count span {
    font-family: var(--fb2-font-display);
    font-size: 1.25rem;
    letter-spacing: 0;
    color: #171717;
}

.pshare__grid {
    padding-top: 0;
}

.pshare__foot {
    margin-top: 2rem;
    border-top: 1px solid #E5E7EB;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pshare__foot p {
    font-size: 0.75rem;
    color: #71717A;
    max-width: 34rem;
}

/* State link mati */
.pshare__notfound {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.pshare__notfound-script {
    font-family: var(--fb2-script);
    font-size: 1.75rem;
    color: #A1A1AA;
}

.pshare__notfound h1 {
    font-family: var(--fb2-font-display);
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    color: #171717;
}

.pshare__notfound p {
    font-size: 0.8125rem;
    color: #71717A;
    max-width: 30rem;
}

.pshare__notfound .pbtn {
    margin-top: 0.75rem;
}


/* ==========================================================================
   23. LIGHTBOX
   ========================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--fb2-ease), visibility 0.25s;
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.lightbox__img {
    max-width: min(92vw, 1100px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fb2-yellow);
    color: #000;
    border-radius: 0.375rem;
    transition: background var(--fb2-dur) var(--fb2-ease);
}

.lightbox__close:hover {
    background: #fff;
}


/* ==========================================================================
   24. TOAST
   ========================================================================== */
.toast-stack {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(92vw, 26rem);
    pointer-events: none;
}

/* jangan tertutup dock/sticky bar mobile */
.toast {
    background: #171717;
    color: #F5F5F5;
    border: 1px solid #2E2E2E;
    border-left: 3px solid var(--fb2-yellow);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    animation: fb2-toast-in 0.3s var(--fb2-ease);
}

.toast--ok {
    border-left-color: #10B981;
}

.toast.is-out {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s, transform 0.35s;
}

@keyframes fb2-toast-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   25. REVEAL SYSTEM (entrance animation via IntersectionObserver)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--fb2-ease), transform 0.6s var(--fb2-ease);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Tanpa JS / IO tidak didukung: langsung tampil */
.no-js .reveal {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   26. CKEDITOR CONTENT (konten editable_html dari admin)
   ========================================================================== */
.ckeditor-content {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--fb2-muted);
}

.ckeditor-content strong {
    color: var(--fb2-text);
}

.ckeditor-content a {
    color: var(--fb2-yellow);
    text-decoration: underline;
}

.ckeditor-content ul,
.ckeditor-content ol {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.ckeditor-content ul {
    list-style: disc;
}

.ckeditor-content ol {
    list-style: decimal;
}

.ckeditor-content blockquote {
    border-left: 3px solid var(--fb2-yellow);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
}


/* ==========================================================================
   27. BOOKING — SHELL, HERO BANNER & STEPPER
   ========================================================================== */
.bk-hero {
    background: linear-gradient(to bottom, #111115, #08080A 70%);
    border-bottom: 1px solid var(--fb2-border-soft);
    padding-block: 3.5rem;
    overflow: hidden;
}

.bk-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.bk-hero__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(2.75rem, 7vw, 5rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--fb2-yellow);
}

.bk-hero__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.875rem;
    letter-spacing: 0.3em;
    color: #D4D4D4;
    margin-top: 0.5rem;
}

.bk-hero__desc {
    font-size: 0.8125rem;
    color: var(--fb2-muted);
    margin-top: 0.25rem;
}

.bk-hero__concept {
    font-family: var(--fb2-font-display);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71717A;
    text-align: right;
}

/* Stepper horizontal 4 sel — minmax(0,1fr) agar tiap sel tepat 25%
   (1fr polos bisa melar mengikuti min-content label) */
.bk-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--fb2-card-deep);
    border-bottom: 1px solid var(--fb2-border-soft);
    position: sticky;
    top: var(--fb2-header-h);
    z-index: 40;
    overflow: hidden;
}

.bk-stepper__cell {
    padding: 0.625rem 0.75rem;
    background: #111111;
    border-left: 1px solid #222222;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    transition: background 0.25s var(--fb2-ease);
}

.bk-stepper__cell:first-child {
    border-left: 0;
}

.bk-stepper__cell.is-active {
    background: var(--fb2-yellow);
}

.bk-stepper__cell.is-done {
    background: #171717;
}

.bk-stepper__num {
    font-family: var(--fb2-font-display);
    font-size: 1.25rem;
    line-height: 1;
    color: #52525B;
}

.bk-stepper__cell.is-active .bk-stepper__num {
    color: #000;
}

.bk-stepper__cell.is-done .bk-stepper__num {
    color: var(--fb2-yellow);
}

.bk-stepper__label {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71717A;
    line-height: 1.2;
}

.bk-stepper__cell.is-active .bk-stepper__label {
    color: #000;
}

.bk-stepper__jp {
    display: none;
    font-family: var(--fb2-font-jp);
    font-size: 0.5rem;
    color: inherit;
    opacity: 0.7;
}

/* Hold bar */
.bk-holdbar {
    position: fixed;
    top: var(--fb2-header-h);
    left: 0;
    right: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: #17170F;
    border-bottom: 2px solid var(--fb2-yellow);
    padding: 0.5rem 1rem;
    transform: translateY(-150%);
    transition: transform 0.3s var(--fb2-ease);
}

.bk-holdbar.is-active {
    transform: none;
}

.bk-holdbar__clock {
    color: var(--fb2-yellow);
    display: inline-flex;
}

.bk-holdbar__label {
    flex: 1;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #E4E4E7;
}

.bk-holdbar__time {
    font-family: var(--fb2-font-mono);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--fb2-yellow);
}

/* Wrapper + layout */
.bk-wrap {
    padding-block: 2rem 4rem;
}

.bk-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Sidebar mini (≥1024) */
.bk-side {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    border-right: 1px solid var(--fb2-border-soft);
    padding-right: 1.5rem;
}

.bk-side__brand {
    font-family: var(--fb2-font-display);
    font-size: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.bk-side__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    color: var(--fb2-muted);
    margin-top: 0.25rem;
}

.bk-side__steps {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bk-side__step {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #52525B;
    padding: 0.375rem 0.5rem;
    opacity: 0.55;
}

.bk-side__step.is-active {
    background: var(--fb2-yellow);
    color: #000;
    opacity: 1;
}

.bk-side__step.is-done {
    color: var(--fb2-yellow);
    opacity: 0.85;
}

.bk-side__num {
    font-family: var(--fb2-font-display);
    font-size: 0.875rem;
}

.bk-side__sign {
    margin-top: auto;
}

.bk-side__script {
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--fb2-yellow);
    transform: rotate(-3deg);
    margin-bottom: 1rem;
}

.bk-side__foot {
    border-top: 1px solid var(--fb2-border-soft);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--fb2-font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    color: #52525B;
}

/* Wizard step */
.wizard-step {
    display: none;
    /* Reset default <fieldset>: UA border 2px groove (garis terang/putih)
       tidak ada di mockup materi — form harus tanpa bingkai. */
    border: 0;
    /* UA fieldset min-width:min-content membuat kartu melebihi kolom di
       layar sempit (320px) — paksa boleh menyusut */
    min-width: 0;
}

.wizard-step.is-active {
    display: block;
}

.bk-main {
    min-width: 0;
}

.bk-step__head {
    background: #0D0D0D;
    border: 1px solid #222222;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1.5rem;
}

.bk-step__tag {
    font-family: var(--fb2-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
    width: 100%;
}

.bk-step__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: #fff;
}

.bk-step__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fb2-muted);
}

.bk-step__desc {
    width: 100%;
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: #71717A;
}

/* Seksi dalam step */
.bk-sec {
    margin-bottom: 2rem;
}

.bk-sec__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1rem;
}

.bk-sec__title span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--fb2-muted);
}

.bk-sec__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--fb2-yellow);
    color: #000;
    font-family: var(--fb2-font-display);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Alert */
.bk-alert {
    border: 1px solid #3F2A2A;
    background: #1D1212;
    color: #FCA5A5;
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
}

.bk-alert ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}


/* ==========================================================================
   28. BOOKING — SELECT CARDS & FORM CONTROLS
   ========================================================================== */
.select-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid #232323;
    background: var(--fb2-card);
    padding: 1rem;
    cursor: pointer;
    transition: border-color 0.2s var(--fb2-ease), transform 0.2s var(--fb2-ease);
}

.select-card:hover {
    border-color: #71717A;
}

.select-card.is-selected {
    border-color: var(--fb2-yellow);
    box-shadow: 0 8px 24px rgba(255, 230, 0, 0.06);
}

.select-card__check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--fb2-yellow);
    color: #000;
    display: none;
    align-items: center;
    justify-content: center;
}

.select-card.is-selected .select-card__check {
    display: inline-flex;
}

/* Kartu event */
.bk-event-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.bk-event__date {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.bk-event__day {
    font-family: var(--fb2-font-display);
    font-size: 1.875rem;
    line-height: 1;
    color: var(--fb2-yellow);
}

.bk-event__my {
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    color: var(--fb2-muted);
}

.bk-event__my em {
    font-style: normal;
    opacity: 0.7;
}

.bk-event__name {
    font-family: var(--fb2-font-display);
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: #fff;
}

.bk-event__city {
    font-family: var(--fb2-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.15em;
    color: var(--fb2-muted);
}

.bk-event--other {
    border-style: dashed;
    border-color: #262626;
    background: #161616;
    justify-content: center;
    min-height: 7rem;
    text-align: center;
}

.bk-event--other .bk-event__name {
    color: #D4D4D4;
}

.bk-event--other .bk-event__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #71717A;
    margin-inline: auto;
}

.bk-other-fields {
    margin-bottom: 1.25rem;
}

/* Kartu layanan */
.bk-service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.bk-service__title {
    font-family: var(--fb2-font-display);
    font-size: 1.25rem;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: pre-line;
    color: #fff;
}

.select-card.is-selected .bk-service__title {
    color: var(--fb2-yellow);
}

.bk-service__jp {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: var(--fb2-muted);
}

.bk-service__desc {
    font-size: 0.6875rem;
    line-height: 1.5;
    color: #71717A;
    margin-top: 0.375rem;
}

/* Field form */
.bk-field {
    display: block;
    margin-bottom: 0;
}

.bk-field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.25rem;
}

.bk-field__label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A1A1AA;
    margin-bottom: 0.375rem;
}

.bk-field__label span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #52525B;
}

.bk-field__input {
    width: 100%;
    background: #17171B;
    border: 1px solid #2E2E38;
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.625rem 0.75rem;
    transition: border-color var(--fb2-dur) var(--fb2-ease);
}

.bk-field__input:focus {
    outline: none;
    border-color: var(--fb2-yellow);
}

.bk-field__input::placeholder {
    color: #52525B;
}

textarea.bk-field__input {
    resize: vertical;
}

.bk-field__error {
    font-size: 0.6875rem;
    color: #F87171;
    margin-top: 0.25rem;
}

.bk-field__hint {
    font-size: 0.625rem;
    color: #71717A;
    margin-top: 0.25rem;
}

/* Orang kedua */
.bk-person2 {
    margin-top: 1.25rem;
    border: 1px dashed #2E2E38;
    padding: 1rem;
}

.bk-person2__title {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fb2-yellow);
    margin-bottom: 0.75rem;
}

.bk-person2__title span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-weight: 400;
    color: var(--fb2-muted);
}

/* Catatan + upload */
.bk-notes {
    margin-top: 1.25rem;
    position: relative;
}

.bk-notes__counter {
    position: absolute;
    right: 0.25rem;
    top: 1.75rem;
    font-family: var(--fb2-font-mono);
    font-size: 0.625rem;
    color: #52525B;
    background: #17171B;
    padding: 0 0.375rem;
}

.bk-upload {
    margin-top: 1rem;
}

.bk-upload__btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    border: 1px dashed #3F3F46;
    background: #121216;
    color: #A1A1AA;
    padding: 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: border-color var(--fb2-dur) var(--fb2-ease), color var(--fb2-dur);
}

.bk-upload__btn:hover {
    border-color: var(--fb2-yellow);
    color: #fff;
}

.bk-upload__btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.bk-upload__btn span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-weight: 400;
    color: #52525B;
}

.bk-upload__preview {
    margin-top: 0.75rem;
    max-height: 10rem;
    border: 1px solid var(--fb2-border);
    object-fit: contain;
}


/* ==========================================================================
   29. BOOKING — SLOT PICKER
   ========================================================================== */
.bk-selected-service {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    background: #0A0B0E;
    border: 1px solid #222222;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

.bk-selected-service__tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--fb2-yellow);
}

.bk-selected-service__tag::before {
    content: "";
    width: 3px;
    height: 0.75rem;
    background: var(--fb2-yellow);
}

.bk-selected-service__tag span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-weight: 400;
    color: var(--fb2-muted);
}

.bk-selected-service__body {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex: 1;
}

.bk-selected-service__body strong {
    font-family: var(--fb2-font-display);
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: #fff;
}

.bk-selected-service__body span {
    font-family: var(--fb2-font-jp);
    font-size: 0.6875rem;
    color: var(--fb2-muted);
}

.bk-change-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #A1A1AA;
    border: 1px solid #3F3F46;
    padding: 0.375rem 0.625rem;
    transition: color var(--fb2-dur), border-color var(--fb2-dur);
}

.bk-change-btn:hover {
    color: var(--fb2-yellow);
    border-color: var(--fb2-yellow);
}

.bk-change-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Panel event lain */
.bk-other-slot {
    background: #0F1115;
    border: 1px dashed #3F3F46;
    padding: 2rem 1.5rem;
    text-align: center;
}

.bk-other-slot__title {
    font-family: var(--fb2-font-display);
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    color: var(--fb2-yellow);
    margin-bottom: 0.5rem;
}

.bk-other-slot__desc {
    font-size: 0.8125rem;
    color: var(--fb2-muted);
    max-width: 30rem;
    margin-inline: auto;
}

/* Kolom slot */
.bk-slots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.bk-slot-col {
    border: 1px solid #262830;
    background: #0E0F14;
}

.bk-slot-col__head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #222222;
    background: #131318;
    overflow: hidden;
}

.bk-slot-col__head svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--fb2-yellow);
    margin-bottom: 0.25rem;
}

.bk-slot-col__head--night svg {
    color: #93C5FD;
}

.bk-slot-col__head h4 {
    font-family: var(--fb2-font-display);
    font-size: 1.375rem;
    letter-spacing: 0.06em;
    color: #fff;
}

.bk-slot-col__head p {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    color: var(--fb2-muted);
}

.bk-slot-col__range {
    font-family: var(--fb2-font-mono);
    font-size: 0.6875rem;
    color: var(--fb2-yellow);
    margin-top: 0.375rem;
}

.bk-slot-col__range--night {
    color: #93C5FD;
}

.bk-slot-col__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

.bk-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    background: #0F1115;
    border: 1px solid #23252A;
    padding: 0.75rem;
    text-align: left;
    transition: border-color var(--fb2-dur) var(--fb2-ease);
}

.bk-slot:hover:not(.is-booked) {
    border-color: #71717A;
}

.bk-slot__label {
    font-family: var(--fb2-font-mono);
    font-size: 0.8125rem;
    color: #E4E4E7;
}

.bk-slot__status {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--fb2-yellow);
}

.bk-slot__status span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    letter-spacing: 0.02em;
}

.bk-slot.is-selected {
    border: 2px solid var(--fb2-yellow);
    background: #16180F;
    padding: calc(0.75rem - 1px); /* kompensasi border 2px */
}

.bk-slot.is-selected .bk-slot__check {
    display: inline-flex;
}

.bk-slot__check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--fb2-yellow);
    color: #000;
    flex-shrink: 0;
}

.bk-slot.is-booked {
    opacity: 0.5;
    cursor: not-allowed;
}

.bk-slot.is-booked .bk-slot__status {
    color: #71717A;
}

.bk-slot.is-booked .bk-slot__label {
    text-decoration: line-through;
    color: #71717A;
}

/* Slot terpilih */
.bk-slot-picked {
    margin-top: 1rem;
    background: #14161A;
    border-left: 2px solid var(--fb2-yellow);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.bk-slot-picked__label {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--fb2-muted);
}

.bk-slot-picked strong {
    font-family: var(--fb2-font-display);
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--fb2-yellow);
}


/* ==========================================================================
   30. BOOKING — PAYMENT & REVIEW
   ========================================================================== */
.bk-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

.bk-summary__rows {
    flex: 1;
    min-width: 14rem;
}

.bk-summary__rows > div,
.bk-participant dl > div,
.bk-pay__details dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #1E1E1E;
}

.bk-summary__rows dt,
.bk-participant dt,
.bk-pay__details dt {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #71717A;
}

.bk-summary__rows dt span[lang="ja"],
.bk-pay__details dt span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-weight: 400;
    color: #52525B;
    margin-left: 0.25rem;
}

.bk-summary__rows dd,
.bk-participant dd,
.bk-pay__details dd {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #E4E4E7;
    text-align: right;
}

.bk-summary__rows dd.is-yellow,
.bk-pay__total.is-yellow {
    font-family: var(--fb2-font-display);
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--fb2-yellow);
}

.bk-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--fb2-yellow);
    border: 1px solid rgba(255, 230, 0, 0.35);
    padding: 0.5rem 0.75rem;
    min-height: 3.5rem;
    transition: background var(--fb2-dur) var(--fb2-ease);
}

.bk-edit-btn:hover {
    background: rgba(255, 230, 0, 0.08);
}

.bk-edit-btn svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* Peserta */
.bk-participants {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.bk-participant {
    background: #0E0F14;
    border: 1px solid #222222;
    padding: 1rem;
}

.bk-participant h4 {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--fb2-yellow);
    margin-bottom: 0.5rem;
}

.bk-participant h4::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--fb2-yellow);
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Pembayaran */
.bk-pay {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.bk-pay__total {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.bk-pay__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bk-pay-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid #2E2E38;
    background: #121216;
    color: #A1A1AA;
    padding: 0.75rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--fb2-dur) var(--fb2-ease);
}

.bk-pay-tab:hover {
    border-color: #71717A;
}

.bk-pay-tab.is-selected {
    border-color: var(--fb2-yellow);
    background: rgba(255, 230, 0, 0.06);
    color: #fff;
}

.bk-pay-tab span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-weight: 400;
    font-size: 0.5625rem;
    color: #71717A;
}

.bk-pay-tab__dot {
    position: absolute;
    top: 0.4375rem;
    right: 0.4375rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    border: 1px solid #52525B;
}

.bk-pay-tab.is-selected .bk-pay-tab__dot {
    border-color: var(--fb2-yellow);
    background: var(--fb2-yellow);
}

/* Kartu detail metode (putih, sesuai mockup) — hanya satu kartu
   (metode tab aktif) yang tampil kapan pun */
.bk-pay-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
    max-width: 22rem;
}

.bk-pay-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: #FFFFFF;
    color: #18181B;
    padding: 0.875rem;
}

/* display:flex di atas meng-override [hidden] bawaan browser */
.bk-pay-card[hidden] {
    display: none;
}

.bk-pay-card__brand {
    font-size: 0.9375rem;
    font-weight: 800;
    font-style: italic;
    color: #1E40AF;
}

.bk-pay-card__brand--ewallet {
    color: #2563EB;
}

.bk-pay-card__number {
    font-family: var(--fb2-font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.bk-pay-card__holder {
    font-size: 0.6875rem;
    color: #52525B;
}

.bk-pay-card__copy {
    align-self: flex-start;
    margin-top: 0.375rem;
    background: #18181B;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.25rem 0.625rem;
    transition: background var(--fb2-dur);
}

.bk-pay-card__copy:hover {
    background: #52525B;
}

.bk-pay-card--qris {
    align-items: center;
    text-align: center;
}

/* Thumbnail QRIS — klik untuk popup zoom (agar mudah di-scan) */
.bk-pay-card__qrbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0;
    background: none;
    padding: 0;
    cursor: zoom-in;
}

.bk-pay-card--qris img {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    background: #F4F4F5;
    padding: 0.25rem;
    margin-block: 0.375rem;
    transition: transform var(--fb2-dur) var(--fb2-ease);
}

.bk-pay-card__qrbtn:hover img,
.bk-pay-card__qrbtn:focus-visible img {
    transform: scale(1.04);
}

.bk-pay-card__qrhint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #71717A;
}

/* Popup zoom QRIS (lightbox) */
.bk-qris-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.bk-qris-modal[hidden] {
    display: none;
}

.bk-qris-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 11, 0.86);
}

.bk-qris-modal__box {
    position: relative;
    margin: 0;
    background: #FFFFFF;
    padding: 1.375rem;
    text-align: center;
    width: min(90vw, 24rem);
    animation: fb2-qris-in var(--fb2-dur) var(--fb2-ease);
}

.bk-qris-modal__box img {
    display: block;
    width: 100%;
    height: auto;
}

.bk-qris-modal__box figcaption {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #52525B;
}

.bk-qris-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #18181B;
    color: #fff;
    cursor: pointer;
    transition: background var(--fb2-dur);
}

.bk-qris-modal__close:hover {
    background: #52525B;
}

@keyframes fb2-qris-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.bk-pay__note {
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: #71717A;
}

.bk-recaptcha {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   31. BOOKING — NAV & SUCCESS
   ========================================================================== */
.bk-nav {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
    background: var(--fb2-bg);
    border-top: 1px solid var(--fb2-border-soft);
    padding-block: 1rem;
    padding-inline: 0.5rem;
    margin-inline: -0.5rem;
}

.bk-nav__prev,
.bk-nav__next,
.bk-nav__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    font-family: var(--fb2-font-display);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background var(--fb2-dur) var(--fb2-ease);
}

.bk-nav__prev {
    border: 1px solid #333333;
    color: #A1A1AA;
    flex-shrink: 0;
}

.bk-nav__prev:hover {
    color: #fff;
    border-color: #71717A;
}

.bk-nav__prev span[lang="ja"],
.bk-nav__next span[lang="ja"],
.bk-nav__submit span[lang="ja"] {
    font-family: var(--fb2-font-jp);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

.bk-nav__next,
.bk-nav__submit {
    flex: 1;
    background: var(--fb2-yellow);
    color: #000;
}

.bk-nav__next:hover,
.bk-nav__submit:hover {
    background: var(--fb2-yellow-hover);
}

.bk-nav__submit {
    box-shadow: 0 10px 30px rgba(255, 230, 0, 0.2);
}

.bk-nav__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #000;
    color: var(--fb2-yellow);
}

/* Halaman sukses */
.bk-success__card {
    max-width: 36rem;
    margin-inline: auto;
    background: var(--fb2-card);
    border: 1px solid var(--fb2-border);
    padding: 2.5rem 2rem;
    text-align: center;
}

.bk-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--fb2-yellow);
    color: #000;
    margin-bottom: 1.25rem;
}

.bk-success__kicker {
    font-family: var(--fb2-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--fb2-muted);
}

.bk-success__title {
    font-family: var(--fb2-font-display);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    text-transform: uppercase;
    color: #fff;
    margin: 0.25rem 0 0.75rem;
}

.bk-success__code {
    display: inline-block;
    font-family: var(--fb2-font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--fb2-yellow);
    background: #000;
    border: 1px dashed var(--fb2-border);
    padding: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
}

.bk-success__rows {
    text-align: left;
    margin-bottom: 1.5rem;
}

.bk-success__rows > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #1E1E1E;
}

.bk-success__rows dt {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #71717A;
}

.bk-success__rows dd {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #E4E4E7;
    text-align: right;
}

.bk-success__note {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--fb2-muted);
    margin-bottom: 1.5rem;
}

.bk-success__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Wizard memilik sticky bar sendiri — dock disembunyikan */
.page-booking .dock {
    display: none !important;
}




/* ==========================================================================
   16c. BOOKING — PENYELARASAN DESIGN booking.html (halaman /booking)
   Struktur (hero/sidebar/stepper box/kepala step) memakai .bf-* seksi 16b;
   seksi ini hanya menyelaraskan palet komponen form internal .bk-* agar
   satu bahasa desain dengan /services. Override diletakkan SETELAH seksi
   27-31 agar menang cascade.
   ========================================================================== */

/* Stepper wizard — state langkah selesai (navigasi mundur) */
.bf-stepper__cell.is-done .bf-stepper__num {
    color: var(--fb2-yellow);
}

.bf-stepper__cell.is-done .bf-stepper__label {
    color: #fff;
}

/* Kartu pilihan (event / layanan) */
.select-card {
    border: 2px solid #262a33;
    background: #14161a;
    padding: 0.875rem;
}

.select-card:hover {
    border-color: #71717a;
}

.select-card.is-selected {
    border-color: var(--fb2-yellow);
    box-shadow: 0 10px 30px rgba(255, 230, 0, 0.08);
}

.bk-event--other {
    border-style: dashed;
    border-color: #3a3f47;
    background: #14161a;
}

/* Kepala seksi form */
.bk-sec__title {
    font-size: 0.9375rem;
}

/* Field input */
.bk-field__input {
    background: #0e1014;
    border: 1px solid #262a33;
}

/* Banner layanan terpilih + panel slot */
.bk-selected-service {
    background: #111317;
    border: 1px solid #242830;
}

.bk-other-slot {
    background: #111317;
    border: 1px dashed #3f3f46;
}

.bk-slot-col {
    border: 1px solid #242830;
    background: #0e1014;
}

.bk-slot-col__head {
    border-bottom: 1px solid #242830;
    background: #13151a;
}

.bk-slot {
    background: #14161a;
    border: 1px solid #262a33;
}

.bk-slot.is-selected {
    background: rgba(255, 230, 0, 0.06);
}

.bk-slot-picked {
    background: #14161a;
    border-left: 2px solid var(--fb2-yellow);
}

/* Ringkasan & peserta */
.bk-participant {
    background: #111317;
    border: 1px solid #242830;
}

.bk-summary__rows > div,
.bk-participant dl > div,
.bk-pay__details dl > div {
    border-bottom: 1px solid #20242b;
}

/* Metode pembayaran */
.bk-pay-tab {
    border: 2px solid #2e323a;
    background: #14161a;
}

.bk-pay-tab.is-selected {
    border-color: var(--fb2-yellow);
    background: rgba(255, 230, 0, 0.06);
}

/* Nav bawah — gaya bf-nav (inline, bukan sticky) */
.bk-nav {
    position: static;
    background: none;
    border-top: 1px solid #20242b;
    margin-top: 3.5rem;
    margin-inline: 0;
    padding: 2rem 0 0;
    justify-content: space-between;
}

.bk-nav__prev {
    background: #121417;
    border: 1px solid #3f3f46;
    color: #e4e4e7;
    padding: 0.875rem 1.75rem;
    font-size: 0.8125rem;
}

.bk-nav__prev:hover {
    background: #1a1d22;
    color: #fff;
}

.bk-nav__next,
.bk-nav__submit {
    flex: none;
    background: var(--fb2-yellow);
    color: #000;
    padding: 0.875rem 2.5rem;
    font-size: 0.8125rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.bk-nav__next:hover,
.bk-nav__submit:hover {
    background: #f6d900;
}



/* ==========================================================================
   32. (disediakan untuk seksi booking berikutnya)
   ========================================================================== */


/* ==========================================================================
   33. RESPONSIVE — breakpoints konsisten 640 / 768 / 1024 (+1280 portal)
   ========================================================================== */

/* ---- ≥640px ---- */
@media (min-width: 640px) {
    /* WHAT I FRAME — baris kartu horizontal: 25/25/50 dan 50/25/25 */
    .frame-row {
        flex-direction: row;
        gap: 1.5rem;
    }

    .frame-row .frame-card {
        flex: 1 1 0;
        min-width: 0;
    }

    .frame-row .frame-card--wide {
        flex: 2 1 0;
    }

    .frame-head {
        margin-bottom: 0.5rem;
    }

    .schedule-card__slots {
        grid-template-columns: 1fr 1fr;
    }

    .step-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .faq-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .vm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pgallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .works-tools {
        justify-content: flex-end;
    }

    /* Booking */
    .bk-event-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bk-field-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bk-participants {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- ≥768px ---- */
@media (min-width: 768px) {
    .container {
        padding-inline: 1.5rem;
    }

    .portal-banner__media {
        --portal-inset: max(1.5rem, calc(50% - var(--fb2-container) / 2 + 1.5rem));
    }

    .section {
        padding-block: 5rem;
    }

    /* Header: nav tampil, hamburger & dock sembunyi */
    .main-nav {
        display: flex;
    }

    /* Brand desktop: FNS putih polos (kotak kuning hanya mobile) */
    .brand__mark {
        font-size: 1.875rem;
        color: #fff;
        background: none;
        width: auto;
        height: auto;
    }

    .menu-toggle,
    .dock {
        display: none;
    }

    .site-footer {
        padding-bottom: 3rem; /* dock hilang */
    }

    .hero__inner {
        min-height: 580px;
    }

    .schedule-card {
        flex-direction: row;
    }

    .schedule-card__date {
        flex-direction: column;
        gap: 0;
        width: 7rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-bottom: 0;
        border-right: 1px solid #333;
    }

    .schedule-card__month {
        margin-top: 2px;
    }

    .schedule-card__year {
        margin-top: 2px;
    }

    .schedule-banner {
        width: 41.6667%;
        flex-shrink: 0;
        border-bottom: 0;
        border-right: 1px solid #222;
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .info-bar {
        grid-template-columns: repeat(4, 1fr);
    }

    .info-bar__item {
        border-top: 0;
        border-left: 1px solid #222;
    }

    .info-bar__item:first-of-type {
        border-left: 0;
    }

    .step-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .portal-banner__grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .portal-banner__content {
        grid-column: span 7;
        padding: 3rem;
    }

    .next-frame__row {
        flex-direction: row;
        align-items: center;
    }

    .next-frame__foot {
        flex-direction: row;
        align-items: flex-end;
    }

    .footer-top {
        flex-direction: row;
        align-items: center;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .works-hero .container {
        padding-block: 4rem;
    }

    .works-hero__main {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .works-filter__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .works-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .spotlight__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .spotlight__pulse {
        display: flex;
    }

    .spotlight__foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .works-cta__inner {
        flex-direction: row;
        align-items: center;
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .faq-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Portal */
    .ptopnav__nav {
        display: flex;
    }

    .ptopnav__splatter {
        display: block;
    }

    .pfooter {
        margin-bottom: 0;
    }

    .psticky {
        display: none;
    }

    .pfooter__inner {
        flex-direction: row;
    }

    .plist__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .plist__search {
        width: 20rem;
    }

    .pcard__spacer {
        display: none;
    }

    /* Booking */
    .bk-stepper__jp {
        display: inline;
    }

    .bk-event-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .bk-service-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bk-slots {
        grid-template-columns: 1fr 1fr;
    }

    .bk-pay {
        grid-template-columns: 5fr 7fr;
    }

    .bk-hero__inner {
        flex-direction: row;
        align-items: flex-end;
    }

    /* Detail portal: header galeri jadi satu baris (judul kiri, jumlah kanan) */
    .pgallery__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    /* Panel info sesi ditumpuk di bawah galeri (<1280px) — baris info
       2 kolom supaya tidak renggang; kembali 1 kolom saat jadi rail kanan */
    .pmeta__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 2rem;
    }

    /* Share: kartu sesi jadi satu baris (tanggal | event | klien | status) */
    .pshare__head {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 1.5rem;
    }

    .pshare__date {
        border-bottom: 0;
        border-right: 1px solid #F3F4F6;
        padding-bottom: 0;
        padding-right: 1.25rem;
    }

    .pshare__side {
        border-left: 1px solid #F3F4F6;
        padding-left: 1.25rem;
        flex-direction: column;
        align-items: flex-end;
    }
}

/* ---- ≥1024px ---- */
@media (min-width: 1024px) {
    .ig-link {
        display: inline-flex;
    }

    .hero,
    .hero__inner {
        min-height: 620px;
        height: 620px;
    }

    /* WHAT I FRAME — proporsi flex (1:1:2 / 2:1:1) sudah aktif dari ≥640px */

    /* SUNDAY PHOTO SESSION (home): judul kiri + kartu kanan (46/54 terukur) */
    .pricing-section--home .pricing-layout {
        grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
        gap: 1.5625rem;
        align-items: start;
    }

    .pricing-section--home .pricing-head {
        margin-top: 0;
    }

    .pricing-section--home .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.9375rem;
    }

    /* BOOK YOUR SESSION: kolom kiri (callout) + kanan (5 kartu + bar) */
    .book-grid {
        grid-template-columns: minmax(0, 27fr) minmax(0, 73fr);
        gap: 0.5rem;
    }

    .step-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.1875rem;
    }

    .about-intro__grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .about-intro__text {
        grid-column: span 7;
    }

    .about-intro__media {
        grid-column: span 5;
    }

    .works-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .spotlight__grid {
        grid-template-columns: repeat(12, 1fr);
        padding: 2rem;
    }

    .spotlight__frame {
        grid-column: span 7;
    }

    .spotlight__frame img {
        height: 27.5rem;
    }

    .spotlight__data {
        grid-column: span 5;
    }

    .works-hero .container {
        padding-block: 4rem;
    }

    /* Portal: poster kiri tampil, layout 2 kolom */
    .pposter {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 20rem;
        flex-shrink: 0;
        border-right: 1px solid #D9D9D9;
        /* Foto carnival washed-out (referensi) — kuat di atas, memudar ke
           bawah supaya blok slogan tetap di atas dasar nyaris putih.
           Sumber gambar bisa diganti dari setting tema (portal_poster_image)
           via CSS var --fb2-poster-img dari view. */
        background-color: #F4F4F1;
        background-image:
            linear-gradient(to bottom,
                rgba(244, 244, 241, 0.38) 0%,
                rgba(244, 244, 241, 0.55) 42%,
                rgba(244, 244, 241, 0.92) 76%,
                #F4F4F1 100%),
            var(--fb2-poster-img, url("../images/portal-banner.jpg"));
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        padding: 1.75rem;
        position: relative;
        user-select: none;
    }

    .pposter__grunge {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(#000000 0.75px, transparent 0.75px);
        background-size: 16px 16px;
        opacity: 0.04;
        pointer-events: none;
    }

    .pposter__watermark {
        position: absolute;
        right: -3rem;
        top: 2.5rem;
        width: 20rem;
        height: 24rem;
        opacity: 0.08;
        pointer-events: none;
    }

    .pposter__top,
    .pposter__sign {
        position: relative;
        z-index: 1;
    }

    .pposter__back {
        font-size: 0.625rem;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        font-weight: 600;
        color: #52525B;
        margin-bottom: 1.5rem;
    }

    .pposter__title {
        font-family: var(--fb2-font-display);
        font-size: 3.5rem;
        line-height: 0.9;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
    }

    .pposter__title span {
        display: block;
        color: #151515;
    }

    .pposter__title .is-yellow {
        color: var(--fb2-yellow);
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    }

    .pposter__jp {
        font-family: var(--fb2-font-jp);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.3em;
        color: #333;
        margin-bottom: 0.5rem;
    }

    .pposter__bar {
        display: block;
        width: 2.5rem;
        height: 3px;
        background: var(--fb2-yellow);
        margin-bottom: 1.5rem;
    }

    .pposter__bar--sm {
        width: 2rem;
        height: 2px;
        margin-bottom: 0.5rem;
    }

    .pposter__desc {
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.7;
        color: #333;
        margin-bottom: 0.75rem;
    }

    .pposter__desc-jp {
        font-family: var(--fb2-font-jp);
        font-size: 0.6875rem;
        line-height: 1.7;
        color: #666;
    }

    .pposter__sign {
        margin-top: 3rem;
        padding-top: 2rem;
    }

    .pposter__script {
        font-family: var(--fb2-script);
        font-size: 1.875rem;
        line-height: 1.15;
        font-weight: 700;
        color: #E5B500;
        transform: rotate(-6deg);
        transform-origin: bottom left;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
        margin-bottom: 1rem;
    }

    .pposter__credit {
        font-size: 0.625rem;
        letter-spacing: 0.25em;
        font-weight: 700;
        text-transform: uppercase;
        color: #444;
    }

    .playout {
        flex-direction: row;
    }

    .playout__main {
        padding: 1.5rem 2rem;
    }

    /* Rail kanan turun menjadi 2 kartu berdampingan di bawah list —
       layout 3 kolom penuh hanya saat ruang benar-benar cukup (≥1440px)
       supaya lebar portal tidak pernah melebihi layar. */
    .pside {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    /* Booking: sidebar mini tampil di desktop */
    .bk-layout {
        grid-template-columns: 15rem 1fr;
    }

    .bk-side {
        display: flex;
    }
}

/* ==========================================================================
   33c. PORTAL DETAIL ≥1024px — SIDEBAR KIRI TAMPIL
   Layout grid ber-areas: sidebar | galeri; panel info masih di bawah
   galeri (naik jadi rail kanan di ≥1280px). Sidebar full-height seperti
   referensi Client Portal View Photos.
   ========================================================================== */
@media (min-width: 1024px) {
    .pdetail {
        display: grid;
        grid-template-columns: 17.5rem minmax(0, 1fr);
        grid-template-areas:
            "side gallery"
            "side meta";
        align-items: stretch;
    }

    .pdside {
        grid-area: side;
    }

    .pgallery {
        grid-area: gallery;
        padding: 2rem;
    }

    .pgallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pmeta {
        grid-area: meta;
    }

    /* Back link mobile disembunyikan (ada di sidebar) */
    .pgallery__back {
        display: none;
    }

    /* --- Sidebar kiri (gelap) --- */
    .pdside {
        display: flex;
        flex-direction: column;
        background: #16171A;
        color: #fff;
        border-right: 1px solid #2A2A2A;
    }

    .pdside__back {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1.25rem;
        color: #D4D4D4;
        transition: color var(--fb2-dur) var(--fb2-ease);
    }

    .pdside__back:hover {
        color: #fff;
    }

    .pdside__back svg {
        width: 1rem;
        height: 1rem;
        margin-top: 2px;
        flex-shrink: 0;
        transition: transform var(--fb2-dur) var(--fb2-ease);
    }

    .pdside__back:hover svg {
        transform: translateX(-3px);
    }

    .pdside__back-en {
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #E5E5E5;
    }

    .pdside__back-jp {
        display: block;
        font-family: var(--fb2-font-jp);
        font-size: 0.625rem;
        color: #9CA3AF;
    }

    /* Kartu sesi putih di atas sidebar gelap */
    .pdside__card {
        background: #fff;
        color: #171717;
        border-radius: 0.375rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        padding: 1.125rem;
        margin: 0 1.25rem;
        display: grid;
        gap: 0.75rem;
    }

    .pdside__date {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        border-bottom: 1px solid #F3F4F6;
        padding-bottom: 0.625rem;
    }

    .pdside__day {
        font-family: var(--fb2-font-display);
        font-size: 2rem;
        line-height: 1;
        color: #171717;
    }

    .pdside__my {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .pdside__my span:first-child {
        font-family: var(--fb2-font-display);
        font-size: 0.875rem;
        letter-spacing: 0.06em;
    }

    .pdside__my span:last-child {
        font-size: 0.625rem;
        font-weight: 600;
        color: #71717A;
    }

    .pdside__event h4 {
        font-size: 0.875rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        color: #171717;
    }

    .pdside__event p {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.6875rem;
        color: #71717A;
        margin-top: 2px;
    }

    /* Fix ikon pin: tanpa ukuran eksplisit SVG melebar memenuhi baris */
    .pdside__event p svg {
        width: 0.75rem;
        height: 0.75rem;
        flex-shrink: 0;
    }

    .pdside__client {
        border-top: 1px solid #F3F4F6;
        padding-top: 0.625rem;
    }

    .pdside__nick {
        font-size: 0.8125rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        color: #171717;
    }

    .pdside__char {
        font-size: 0.75rem;
        color: #52525B;
        margin-top: 1px;
    }

    .pdside__char-jp {
        font-family: var(--fb2-font-jp);
        font-size: 0.6875rem;
        color: #9CA3AF;
    }

    .pdside__status {
        margin-top: -0.125rem;
    }

    .pdside__nav {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1.25rem;
    }

    .pdside__navbtn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        text-align: left;
        border-radius: 0.375rem;
        background: #212328;
        color: #fff;
        padding: 0.75rem 0.875rem;
        transition: background var(--fb2-dur) var(--fb2-ease);
    }

    .pdside__navbtn:hover {
        background: #282B31;
    }

    .pdside__navbtn--active {
        background: var(--fb2-yellow);
        color: #0A0A0A;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .pdside__navbtn svg {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
        color: #9CA3AF;
    }

    .pdside__navbtn--active svg {
        color: #0A0A0A;
    }

    .pdside__navbtn-en {
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
    }

    .pdside__navbtn-jp {
        display: block;
        font-family: var(--fb2-font-jp);
        font-size: 0.625rem;
        opacity: 0.75;
    }

    .pdside__sign {
        margin-top: auto;
        padding: 1.5rem;
    }

    .pdside__script {
        font-family: var(--fb2-script);
        font-size: 1.875rem;
        line-height: 1.05;
        color: var(--fb2-yellow);
        transform: rotate(-6deg);
        margin-bottom: 1rem;
    }

    .pdside__brandrow {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid #2A2A2A;
    }

    .pdside__brandrow > span:first-child {
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: -0.03em;
    }

    .pdside__brandrow > div {
        display: flex;
        flex-direction: column;
        line-height: 1.4;
    }

    .pdside__brandrow span {
        font-size: 0.5625rem;
        text-transform: uppercase;
        color: #9CA3AF;
    }

    .pdside__brandrow span[lang="ja"] {
        color: #D4D4D4;
    }
}

/* ---- ≥1280px: rail kanan portal (satu-satunya breakpoint ekstra, terdokumentasi) ---- */
@media (min-width: 1280px) {
    .plist__search {
        width: 20rem;
    }

    /* Detail: panel info naik jadi rail kanan — 3 kolom penuh
       (sidebar 17.5rem | galeri | rail 18.75rem) seperti referensi */
    .pdetail {
        grid-template-columns: 17.5rem minmax(0, 1fr) 18.75rem;
        grid-template-areas: "side gallery meta";
    }

    .pmeta {
        border-top: 0;
        border-left: 1px solid #E5E7EB;
    }

    .pmeta__list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}


/* ==========================================================================
   33a. PORTAL ≥1440px — 3 KOLOM PENUH (POSTER | LIST | RAIL)
   ========================================================================== */
@media (min-width: 1440px) {
    .playout__main {
        flex-direction: row;
    }

    /* Kunci: tanpa min-width 0 flex item menolak menyusut di bawah
       lebar konten kartunya → mendorong rail keluar layar. */
    .plist {
        min-width: 0;
    }

    .pside {
        display: flex;
        flex-direction: column;
        width: 18rem;
        flex-shrink: 0;
    }

    /* Kartu commission lebih ringkas — di layout 3 kolom list hanya
       sekitar 45% lebar layar. Satu baris penuh hanya di sini, di mana
       lebarnya terjamin cukup; di bawah ini kartu boleh wrap. */
    .pcard {
        flex-wrap: nowrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .pcard__event,
    .pcard__client {
        min-width: 5rem;
    }

    .pcard__actions .pbtn {
        padding: 0.5rem 0.75rem;
    }
}


/* ==========================================================================
   27. LOAD MORE — render awal terbatas utk daftar panjang (works + portal).
   Kartu di luar batch tampak disembunyikan; interaksi filter otomatis
   men-expand semua (lihat app.js initLoadMore).
   ========================================================================== */

[data-lm-item].is-collapsed {
    display: none;
}

.load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin: 28px 0 6px;
    padding: 18px 20px;
    background: var(--fb2-card);
    border: 1px solid var(--fb2-border);
    color: var(--fb2-text);
    font-family: var(--fb2-font-body);
    cursor: pointer;
    transition: border-color var(--fb2-dur) var(--fb2-ease),
                background var(--fb2-dur) var(--fb2-ease);
}

.load-more:hover,
.load-more:focus-visible {
    border-color: var(--fb2-yellow);
    outline: none;
}

.load-more__en {
    font-family: var(--fb2-font-display);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
}

.load-more__meta {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--fb2-muted);
    text-transform: uppercase;
}

.load-more__count {
    color: var(--fb2-yellow);
    font-weight: 700;
}

/* Konteks portal terang: kartu berjajar vertikal — tombol lebih ringkas */
.plist .load-more {
    margin: 18px 0 4px;
    padding: 14px 20px;
    border-radius: 12px;
}


/* ==========================================================================
   33b. PREFERS-REDUCED-MOTION — matikan semua animasi
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}