/* CSS khusus product-detail.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
.pd-page { --pd-blue:var(--ugs-accent); --pd-blue-d:var(--ugs-accent-dark); --pd-cyan:var(--ugs-accent-2); --pd-ink:var(--ugs-fg); --pd-muted:var(--ugs-fg-2); --pd-line:var(--ugs-hairline); --pd-bg:var(--ugs-page); --pd-card:var(--ugs-card); --pd-soft:var(--ugs-card-2); --pd-rich:#334155; --pd-track:#edf1f7; --pd-zero:#9aabc3; --pd-btn-line:var(--ugs-hairline-strong); --pd-th-bg:#f5f8fd; --pd-th-ink:#1a3a6e; --pd-row-hover:#fafcff; --pd-stage:radial-gradient(ellipse 58% 68% at 50% 40%, #ffffff 0%, #ffffff 40%, #eef2f8 72%, #e3e9f2 100%); --pd-grid:rgba(26,58,110,.05); --pd-ghost:rgba(26,58,110,.09); --pd-ok-bg:#f0fdf4; --pd-ok-ink:#15803d; --pd-ok-line:#bbf7d0; --pd-pdf-bg:#fee2e2; --pd-pdf-ink:#dc2626; --pd-mono:'IBM Plex Mono', ui-monospace, Consolas, monospace; background:var(--pd-bg); }
/* mode gelap */
:root[data-ugs-theme="dark"] .pd-page { --pd-rich:#c7c7cc; --pd-track:rgba(255,255,255,.08); --pd-zero:rgba(255,255,255,.3); --pd-th-bg:rgba(255,255,255,.05); --pd-th-ink:var(--ugs-fg); --pd-row-hover:rgba(255,255,255,.03); --pd-stage:radial-gradient(ellipse 60% 70% at 50% 45%, #1c2029 0%, #12151b 55%, #0b0d12 100%); --pd-grid:rgba(255,255,255,.035); --pd-ghost:rgba(255,255,255,.08); --pd-ok-bg:rgba(34,197,94,.12); --pd-ok-ink:#4ade80; --pd-ok-line:rgba(74,222,128,.3); --pd-pdf-bg:rgba(239,68,68,.15); --pd-pdf-ink:#f87171; }
.pd-wrap { max-width:1240px; margin:0 auto; padding:0 2rem; }
.pd-eyebrow { display:block; font-family:var(--pd-mono); font-size:.68rem; letter-spacing:1.8px; text-transform:uppercase; color:var(--pd-blue); }
.pd-section-title { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:var(--ugs-fs-h2); line-height:.98; color:var(--pd-ink); margin:.5rem 0 1rem; }
.pd-section-title.is-small { font-size:1.6rem; margin:0 0 1rem; }
.pd-section-title em { font-style:normal; color:var(--pd-blue); }
.pd-card { background:var(--pd-card); border:1px solid var(--pd-line); border-radius:20px; }

/* breadcrumb tepat di bawah navbar */
.pd-stage-crumb { position:relative; z-index:4; padding-top:calc(var(--ugs-nav-h) + 1.4rem); }
.pd-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; list-style:none; margin:0; padding:0; font-size:.8rem; color:var(--pd-muted); }
.pd-crumb li + li::before { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:.5rem; margin-right:.55rem; opacity:.5; }
.pd-crumb a { color:inherit; text-decoration:none; } .pd-crumb a:hover { color:var(--ugs-accent); }
.pd-crumb [aria-current] { color:var(--pd-ink); font-weight:600; }

/* panggung */
.pd-stage { position:relative; overflow:hidden; background:var(--pd-stage); }
.pd-stage::before { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--pd-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pd-grid) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.pd-ghost { position:absolute; left:50%; top:40%; transform:translate(-50%, -50%); font-family:var(--font-display); font-weight:900; line-height:1; color:transparent; -webkit-text-stroke:2px var(--pd-ghost); white-space:nowrap; pointer-events:none; user-select:none; text-transform:uppercase; }
.pd-ghost.is-xl { font-size:clamp(8rem, 24vw, 21rem); } .pd-ghost.is-lg { font-size:clamp(6rem, 15vw, 13rem); } .pd-ghost.is-md { font-size:clamp(4rem, 9vw, 8rem); }
.pd-stage-grid { position:relative; display:grid; grid-template-columns:1fr minmax(0, 500px) 1fr; align-items:center; gap:1rem; min-height:540px; padding-top:1.5rem; }
.pd-stage-grid.is-solo { grid-template-columns:minmax(0, 560px); justify-content:center; }
.pd-stage-photo { position:relative; z-index:2; grid-column:2; display:grid; place-items:center; }
.pd-stage-grid.is-solo .pd-stage-photo { grid-column:1; }
.pd-stage-photo img { width:100%; max-height:500px; object-fit:contain; cursor:zoom-in; animation:pdFloat 6s ease-in-out infinite; }
.pd-stage-photo::after { content:''; position:absolute; left:18%; right:18%; bottom:0; height:26px; border-radius:50%; background:radial-gradient(ellipse, rgba(11,24,40,.2), transparent 70%); z-index:-1; }
@keyframes pdFloat { 50% { transform:translateY(-10px); } }
.pd-photo-tools { position:absolute; right:0; bottom:0; }
.pd-photo-tools button { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--pd-card); border:1px solid var(--pd-btn-line); color:var(--pd-ink); cursor:pointer; }

.pd-callouts { position:relative; z-index:3; display:flex; flex-direction:column; gap:2.4rem; }
.pd-callouts.is-left { grid-column:1; grid-row:1; } .pd-callouts.is-right { grid-column:3; grid-row:1; align-items:flex-end; text-align:right; }
.pd-callout { position:relative; max-width:240px; }
.pd-callout small { display:block; font-family:var(--pd-mono); font-size:.66rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--pd-muted); margin-bottom:.25rem; }
.pd-callout strong { display:block; font-family:var(--font-display); font-size:clamp(2rem, 3.4vw, 2.8rem); font-weight:800; line-height:1; color:var(--pd-ink); }
.pd-callout::after { content:''; position:absolute; top:1.7rem; width:72px; height:1.5px; background:linear-gradient(90deg, var(--pd-blue), transparent); }
.pd-callout::before { content:''; position:absolute; top:calc(1.7rem - 4px); width:9px; height:9px; border-radius:50%; background:var(--pd-blue); box-shadow:0 0 0 5px rgba(var(--ugs-accent-rgb),.18); }
.is-left .pd-callout::after { left:calc(100% + 14px); } .is-left .pd-callout::before { left:calc(100% + 86px); }
.is-right .pd-callout::after { right:calc(100% + 14px); transform:scaleX(-1); } .is-right .pd-callout::before { right:calc(100% + 86px); }

.pd-stage-title { position:relative; z-index:3; text-align:center; padding-top:1rem; padding-bottom:3.25rem; }
.pd-chips { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-bottom:.9rem; }
.pd-chips span { font-size:.72rem; font-weight:600; padding:.3rem .75rem; border-radius:100px; background:var(--pd-card); border:1px solid var(--pd-btn-line); color:var(--pd-ink); }
.pd-chips .is-ok { color:var(--pd-ok-ink); background:var(--pd-ok-bg); border-color:var(--pd-ok-line); }
.pd-title { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:var(--ugs-fs-h1); line-height:.95; letter-spacing:.5px; color:var(--pd-ink); margin:0; overflow-wrap:anywhere; }
.pd-tagline { max-width:620px; margin:.8rem auto 0; color:var(--pd-muted); font-size:1rem; line-height:1.65; }
.pd-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem; margin-top:1.5rem; }

/* bento di bawah panggung */
.pd-bento-section { padding:3rem 0 1rem; }
.pd-bento { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:1rem; align-items:stretch; }
.pd-tile { position:relative; overflow:hidden; background:var(--pd-card); border:1px solid var(--pd-line); border-radius:22px; padding:1.7rem; }
.pd-tile-title { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.7rem, 2.6vw, 2.2rem); line-height:1; color:var(--pd-ink); margin:.45rem 0 1.1rem; }
.pd-tile-title em { font-style:normal; color:var(--pd-blue); }
.pd-t-desc { grid-column:span 8; }
.pd-t-ask { grid-column:span 4; display:flex; flex-direction:column; justify-content:space-between; gap:1.25rem; background:linear-gradient(160deg, #23272f, #111318); border-color:var(--pd-line); color:#fff; }
.pd-t-ask.is-wide { grid-column:span 12; flex-direction:row; align-items:flex-end; }
.pd-t-ask.is-wide .pd-ask-actions { min-width:260px; }
.pd-t-ask .pd-eyebrow { color:var(--ugs-accent-soft); }
.pd-t-ask h3 { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.85rem; line-height:1; margin:.45rem 0 .45rem; color:#fff; }
.pd-t-ask p { color:rgba(255,255,255,.66); font-size:.88rem; line-height:1.6; margin:0; }
.pd-t-ask ul { list-style:none; padding:0; margin:1rem 0 0; font-size:.82rem; color:rgba(255,255,255,.8); }
.pd-t-ask li { margin:.42rem 0; } .pd-t-ask li i { color:#4ade80; margin-right:.45rem; }
.pd-ask-actions { display:flex; flex-direction:column; gap:.55rem; }
.pd-t-joints { grid-column:span 8; }
.pd-t-downloads { grid-column:span 4; display:flex; flex-direction:column; gap:.75rem; padding:1rem; background:transparent; border:0; }
.pd-t-downloads.is-wide { grid-column:span 12; flex-direction:row; flex-wrap:wrap; padding:0; }
.pd-t-downloads.is-wide .pd-dl { flex:1 1 280px; }
.pd-t-spec { grid-column:span 12; }

.pd-rich { color:var(--pd-rich); font-size:.95rem; line-height:1.75; }
/* CSS template memberi warna abu-abu ke semua <p>; ikuti warna kontainer */
.pd-rich p, .pd-rich li { color:inherit; }
.pd-rich p { margin:0 0 .9rem; } .pd-rich ul, .pd-rich ol { margin:0 0 .9rem; padding-left:1.15rem; } .pd-rich li { margin:.45rem 0; }
.pd-rich strong, .pd-rich b { color:var(--pd-ink); }
.pd-rich img { max-width:100%; height:auto; border-radius:12px; }
/* poin deskripsi tampil sebagai kartu kecil bercentang */
.pd-rich.is-points ul { list-style:none; padding:0; display:grid; gap:.65rem; margin-top:1.2rem; }
.pd-rich.is-points li { position:relative; margin:0; padding:.9rem 1rem .9rem 2.9rem; border:1px solid var(--pd-line); border-radius:14px; background:var(--pd-soft); }
.pd-rich.is-points li::before { content:'\f00c'; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; left:1rem; top:.95rem; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.6rem; background:var(--ugs-accent-tint); color:var(--pd-blue); }

.pd-joints-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.pd-joints-legend { display:flex; flex-wrap:wrap; gap:1.1rem; font-size:.74rem; color:var(--pd-muted); padding-top:.4rem; }
.pd-joints-legend i { display:inline-block; vertical-align:middle; margin-right:.4rem; border-radius:6px; }
.pd-joints-legend .is-range { width:22px; height:6px; background:linear-gradient(90deg, var(--pd-blue), var(--pd-cyan)); }
.pd-joints-legend .is-speed { width:22px; height:4px; background:var(--pd-ink); }
.pd-joint { display:grid; grid-template-columns:96px minmax(0, 1fr) 92px; gap:1.1rem; align-items:center; padding:.5rem 0; }
.pd-joint b { font-family:var(--pd-mono); font-size:.82rem; color:var(--pd-ink); }
.pd-joint b small { display:block; font-size:.62rem; font-weight:400; color:var(--pd-muted); }
.pd-ruler { position:relative; height:28px; }
.pd-ruler-track { position:absolute; left:0; right:0; top:13px; height:4px; border-radius:4px; background:repeating-linear-gradient(90deg, var(--pd-line) 0 1px, transparent 1px 12.5%) var(--pd-track); }
.pd-ruler-zero { position:absolute; left:50%; top:6px; bottom:6px; width:1.5px; background:var(--pd-zero); }
.pd-ruler-range { position:absolute; top:11px; height:8px; border-radius:8px; background:linear-gradient(90deg, var(--pd-blue), var(--pd-cyan)); box-shadow:0 0 0 3px rgba(var(--ugs-accent-rgb),.12); animation:pdGrow .9s cubic-bezier(.2,.8,.2,1) both; }
.pd-ruler-label { position:absolute; top:-4px; transform:translateX(-50%); font-family:var(--pd-mono); font-size:.6rem; color:var(--pd-muted); white-space:nowrap; }
.pd-speed { font-family:var(--pd-mono); font-size:.78rem; text-align:right; color:var(--pd-ink); }
.pd-speed i { display:block; height:4px; margin-top:.3rem; border-radius:4px; background:var(--pd-track); overflow:hidden; }
.pd-speed em { display:block; height:100%; border-radius:4px; background:var(--pd-ink); }
@keyframes pdGrow { from { transform:scaleX(0); opacity:0; } }

.pd-spec-body { position:relative; overflow-x:auto; }
.pd-spec-body.is-collapsed { max-height:520px; overflow:hidden; }
.pd-spec-body.is-collapsed::after { content:''; position:absolute; left:0; right:0; bottom:0; height:110px; background:linear-gradient(transparent, var(--pd-card)); }
.pd-spec-content table { width:100% !important; border-collapse:collapse; font-size:.86rem; }
.pd-spec-content td, .pd-spec-content th { padding:.62rem .9rem; border:0; border-bottom:1px solid var(--pd-line); text-align:left; vertical-align:top; }
.pd-spec-content tr:first-child td, .pd-spec-content th { background:var(--pd-th-bg); color:var(--pd-th-ink); font-weight:700; font-size:.78rem; }
.pd-spec-content td:first-child { color:var(--pd-muted); }
.pd-spec-content tr:hover td { background:var(--pd-row-hover); }
.pd-spec-toggle { display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; margin-top:.75rem; padding:.7rem; border:1px dashed var(--pd-btn-line); border-radius:12px; background:var(--pd-card); color:var(--pd-blue); font-weight:700; font-size:.85rem; cursor:pointer; }
.pd-spec-toggle .is-less, .pd-spec-toggle.is-open .is-more { display:none; }
.pd-spec-toggle.is-open .is-less { display:inline; }

.pd-dl { display:flex; align-items:center; gap:1rem; padding:1.15rem 1.3rem; background:var(--pd-card); border:1px solid var(--pd-line); border-radius:18px; color:var(--pd-ink); text-decoration:none; transition:transform .2s, box-shadow .2s; }
.pd-dl:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(15,35,80,.1); color:var(--pd-ink); }
.pd-dl > span:nth-child(2) { flex:1; min-width:0; } .pd-dl strong { display:block; } .pd-dl small { display:block; font-size:.78rem; color:var(--pd-muted); margin-top:.15rem; }
.pd-dl-icon { width:48px; height:48px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; background:var(--pd-pdf-bg); color:var(--pd-pdf-ink); font-size:1.2rem; }
.pd-dl.is-soft .pd-dl-icon { background:var(--ugs-accent-tint); color:var(--pd-blue); }

/* tombol */
.pd-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.85rem 1.4rem; border-radius:100px; border:1.5px solid transparent; font-size:.88rem; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .2s, background .2s, border-color .2s; }
.pd-btn:hover { transform:translateY(-2px); }
.pd-btn-primary { background:var(--pd-blue); color:#fff; box-shadow:0 10px 28px rgba(var(--ugs-accent-rgb),.35); }
.pd-btn-primary:hover { background:var(--pd-blue-d); color:#fff; }
.pd-btn-glass { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#fff; }
.pd-btn-glass:hover { border-color:#fff; color:#fff; }
.pd-btn-ghost { background:var(--pd-card); border-color:var(--pd-btn-line); color:var(--pd-ink); }
.pd-btn-ghost:hover { border-color:var(--pd-blue); color:var(--pd-blue); }

/* produk terkait */
.pd-related { padding:3.5rem 0 5rem; }
.pd-related-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.25rem; }
.pd-see-all { color:var(--pd-blue); font-weight:700; font-size:.88rem; text-decoration:none; white-space:nowrap; }
.pd-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, calc((100% - 3rem) / 4)); gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.pd-rcard { scroll-snap-align:start; display:flex; flex-direction:column; background:var(--pd-card); border:1px solid var(--pd-line); border-radius:20px; overflow:hidden; text-decoration:none; color:var(--pd-ink); transition:transform .25s, box-shadow .25s; }
.pd-rcard:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(15,35,80,.1); color:var(--pd-ink); }
.pd-rcard-img { aspect-ratio:4/3.4; display:grid; place-items:center; padding:1.2rem; background:radial-gradient(circle at 50% 60%, #fff, #eef2f8); }
.pd-rcard-img img { max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.pd-rcard-body { display:flex; justify-content:space-between; align-items:flex-end; gap:.5rem; padding:1rem 1.2rem 1.2rem; }
.pd-rcard-body strong { display:block; font-size:.98rem; } .pd-rcard-body small { color:var(--pd-muted); font-size:.76rem; }
.pd-pill { flex-shrink:0; font-family:var(--pd-mono); font-size:.66rem; padding:.25rem .55rem; border-radius:6px; background:var(--ugs-accent-tint); color:var(--pd-blue); white-space:nowrap; }

/* foto layar penuh */
.pd-zoom-modal { position:fixed; inset:0; z-index:2000; display:none; place-items:center; padding:2rem; background:rgba(8,14,26,.92); }
.pd-zoom-modal.is-open { display:grid; }
.pd-zoom-modal img { max-width:92vw; max-height:88vh; object-fit:contain; background:#fff; border-radius:16px; padding:1.5rem; }
.pd-zoom-close { position:absolute; top:1.25rem; right:1.25rem; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem; cursor:pointer; }

.pd-sticky-bar { display:none; }

/* sub-bar produk (gaya halaman produk apple.com), hanya desktop */
#pdOverview, #pdSpecs, #pdRelated { scroll-margin-top:calc(var(--ugs-nav-h) + 64px); }
.pd-subnav { position:fixed; top:var(--ugs-nav-h); left:0; right:0; z-index:1045; background:var(--ugs-glass); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--pd-line); transform:translateY(-110%); opacity:0; visibility:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s, visibility .35s; }
.pd-subnav.is-visible { transform:none; opacity:1; visibility:visible; }
.pd-subnav-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:52px; }
.pd-subnav-name { font-size:1.15rem; font-weight:600; letter-spacing:-.015em; color:var(--pd-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-subnav-links { display:flex; align-items:center; gap:1.4rem; flex-shrink:0; }
.pd-subnav-links a { font-size:12.5px; color:var(--pd-muted); text-decoration:none; transition:color .2s; }
.pd-subnav-links a:hover, .pd-subnav-links a.is-here { color:var(--pd-ink); }
.pd-subnav-cta { padding:5px 14px; border:0; border-radius:999px; background:var(--ugs-accent); color:#fff; font-size:12px; font-weight:500; cursor:pointer; transition:background .2s; }
.pd-subnav-cta:hover { background:var(--ugs-accent-deep); }

@media (max-width: 991px) {
    .pd-wrap { padding:0 1.1rem; }
    .pd-stage-crumb { padding-top:calc(var(--ugs-nav-h) + 1rem); } .pd-subnav { display:none; }
    .pd-stage-grid, .pd-stage-grid.is-solo { grid-template-columns:1fr 1fr; min-height:0; padding-top:1.5rem; gap:1.2rem .9rem; }
    .pd-stage-photo { grid-column:1 / -1 !important; grid-row:1; }
    .pd-stage-photo img { max-height:340px; }
    .pd-callouts.is-left, .pd-callouts.is-right { grid-row:2; grid-column:auto; align-items:flex-start; text-align:left; gap:1.1rem; }
    .pd-callout::after, .pd-callout::before { display:none; }
    .pd-ghost { top:22%; }
    .pd-stage-title { padding-top:2.25rem; padding-bottom:2.5rem; }
    .pd-actions .pd-btn-primary { display:none; }
    .pd-bento { grid-template-columns:1fr; }
    .pd-bento > .pd-tile { grid-column:auto !important; }
    .pd-t-ask.is-wide { flex-direction:column; align-items:stretch; }
    .pd-t-downloads { padding:0; }
    .pd-t-downloads.is-wide { flex-direction:column; }
    /* di desktop kartu berjajar dengan lebar dasar 280px; saat bertumpuk angka itu jadi tinggi → kartu memanjang kosong */
    .pd-t-downloads.is-wide .pd-dl { flex:0 0 auto; }
    .pd-joint { grid-template-columns:52px minmax(0, 1fr) 62px; gap:.65rem; }
    .pd-tile { padding:1.2rem; }
    .pd-t-downloads { padding:0; }
    .pd-rail { grid-auto-columns:72%; }
    .pd-related-head { flex-direction:column; align-items:flex-start; }
    .pd-sticky-bar { display:flex; gap:.5rem; position:fixed; left:0; right:0; bottom:0; z-index:1040; padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom)); background:var(--pd-card); backdrop-filter:blur(8px); border-top:1px solid var(--pd-line); box-shadow:0 -10px 30px rgba(15,35,80,.1); }
    .pd-sticky-bar .pd-btn-primary { flex:1; padding:.8rem .5rem; }
    .pd-sticky-bar .pd-btn-ghost { padding:.8rem 1rem; }
    .pd-page { padding-bottom:72px; }
    /* tombol ngambang layout (keranjang, ke atas) naik di atas bar aksi */
    .floating-buttons { bottom:86px !important; }
}
@media (prefers-reduced-motion: reduce) { .pd-ruler-range, .pd-stage-photo img { animation:none; } .pd-btn:hover, .pd-rcard:hover, .pd-dl:hover { transform:none; } }