@charset "UTF-8";
@import url("style.css"); /* style.css ikut termuat otomatis, tidak perlu ubah index.html */
/* PUTRA UTAMA GROUP - THEMES (token, latar ambient, base)
   CSS biasa (tanpa @tailwind/@apply) karena Tailwind dimuat lewat CDN.
   Palet warna tetap: emas #d97706 / amber #fbbf24, gelap #0f0f11. */

:root{
  --gold-300:#fcd34d; --gold-400:#fbbf24; --gold-500:#f59e0b; --gold-600:#d97706; --gold-700:#b45309;
  --gold-grad:linear-gradient(135deg,#f59e0b 0%,#d97706 55%,#b45309 100%);
  --gold-text:linear-gradient(100deg,#b45309 0%,#d97706 40%,#f59e0b 60%,#d97706 100%);
  --ink:#0f172a; --muted:#64748b;
  /* Kaca (light) */
  --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.86);
  --line:rgba(217,119,6,.20); --line-soft:rgba(15,23,42,.08);
  --hi:inset 0 1px 0 rgba(255,255,255,.95);
  --blur:blur(18px) saturate(165%); --blur-lg:blur(28px) saturate(180%);
  --sh-1:0 1px 2px rgba(15,23,42,.05),0 10px 28px -12px rgba(15,23,42,.14);
  --sh-2:0 2px 4px rgba(15,23,42,.05),0 22px 48px -18px rgba(180,83,9,.28);
  --glow:0 0 0 1px rgba(217,119,6,.35),0 14px 40px -10px rgba(217,119,6,.45);
  --amb-a:rgba(245,158,11,.16); --amb-b:rgba(217,119,6,.09); --amb-c:rgba(251,191,36,.12);
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-inset:.75rem;
}
.dark{
  --ink:#f8fafc; --muted:#94a3b8;
  --glass:rgba(24,24,28,.52); --glass-strong:rgba(16,16,19,.86);
  --line:rgba(251,191,36,.18); --line-soft:rgba(255,255,255,.07);
  --hi:inset 0 1px 0 rgba(255,255,255,.07);
  --gold-grad:linear-gradient(135deg,#fcd34d 0%,#fbbf24 50%,#f59e0b 100%);
  --gold-text:linear-gradient(100deg,#f59e0b 0%,#fbbf24 40%,#fde68a 60%,#fbbf24 100%);
  --sh-1:0 1px 2px rgba(0,0,0,.5),0 14px 34px -14px rgba(0,0,0,.75);
  --sh-2:0 2px 4px rgba(0,0,0,.5),0 26px 56px -20px rgba(0,0,0,.9),0 0 40px -18px rgba(251,191,36,.35);
  --glow:0 0 0 1px rgba(251,191,36,.45),0 14px 44px -10px rgba(251,191,36,.38);
  --amb-a:rgba(245,158,11,.14); --amb-b:rgba(217,119,6,.10); --amb-c:rgba(251,191,36,.07);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:6.5rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color-scheme:light}
html.dark{color-scheme:dark}
body{isolation:isolate;transition:background-color .4s var(--ease-io),color .4s var(--ease-io)}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;letter-spacing:-.02em}
::selection{background:var(--gold-500);color:#1a1204}
*:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:.5rem}

/* Latar ambient: bahan yang "dibaca" oleh efek blur kaca */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(60rem 38rem at 88% -8%,var(--amb-a),transparent 62%),
   radial-gradient(46rem 40rem at -8% 42%,var(--amb-b),transparent 62%),
   radial-gradient(40rem 30rem at 72% 108%,var(--amb-c),transparent 62%)}
body::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:32rem;height:32rem;left:8%;top:18%;border-radius:50%;
  background:radial-gradient(circle,var(--amb-a),transparent 68%);filter:blur(30px);opacity:.8;
  animation:drift 46s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{to{transform:translate3d(55vw,34vh,0) scale(1.15)}}

/* Section transparan agar kaca terlihat; pemisah emas tipis */
html body #tentang,html body #harga,html body #keuntungan-all-in,html body #kebijakan,html body #kontak{background:transparent;border-color:var(--line)}
html body #harga,html body #kebijakan{background:linear-gradient(180deg,rgba(217,119,6,.05),transparent 70%)}
html body #beranda{background:transparent}

/* Scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--gold-600) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-500),var(--gold-700));border-radius:9999px;border:2px solid transparent;background-clip:padding-box}

/* Form: tanggal/jam, select, angka */
select{-webkit-appearance:none;appearance:none}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;filter:invert(1) brightness(.9);transition:opacity .3s}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Akordeon */
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details[open] summary~*{animation:acc .45s var(--ease) both;transform-origin:top}
@keyframes acc{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Carousel armada */
#carousel-mobil{width:100%;min-width:0;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:.5rem .25rem 1.5rem}
#carousel-mobil>*{flex:0 0 290px;min-width:0}
#carousel-mobil img{display:block;width:100%;height:190px;object-fit:cover}
@media(max-width:640px){#carousel-mobil>*{flex-basis:82%}}

@media print{body::before,body::after{display:none}body{background:#fff!important;color:#000!important}header,footer,#contactDropdown,iframe{display:none!important}}