/* Animasi bersama untuk semua halaman Kure SMM. Mati otomatis kalau perangkat minta "kurangi gerakan". */

@view-transition { navigation: auto; }   /* pindah halaman jadi cross-fade halus (Chrome/Edge) */

@keyframes kFadeUp   { from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes kSlideDown{ from{ opacity:0; transform:translateY(-16px); } to{ opacity:1; transform:none; } }
@keyframes kPop      { from{ opacity:0; transform:scale(.92) translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes kFade     { from{ opacity:0; } to{ opacity:1; } }
@keyframes kFloat    { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-10px) rotate(.6deg); } }
@keyframes kRing     { 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.55); opacity:0; } }
@keyframes kSheen    { 0%{ background-position:-120% 0; } 100%{ background-position:220% 0; } }

/* Navbar masuk dari atas */
.navbar, .nav-in{ animation:kSlideDown .5s cubic-bezier(.2,.8,.2,1) both; }

/* Kartu & elemen yang muncul saat di-scroll (kelas .reveal ditambah anim.js; tanpa JS semuanya tetap terlihat) */
.anim .reveal{ opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s); }
.anim .reveal.in{ opacity:1; transform:none; }
.anim .reveal.in.lift{ transition:opacity .6s ease, transform .22s ease, box-shadow .22s ease; transition-delay:0s; }

/* Kartu terangkat saat di-hover */
.lift:hover{ transform:translateY(-4px) !important; box-shadow:7px 8px 0 var(--border) !important; }

/* Tombol: naik saat hover, menekan saat diklik */
.btn, .submit, .nav-login, .cs-fab, .icon-btn, .burger{
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease; }
.btn:hover, .submit:not(:disabled):hover, .nav-login:hover, .cs-fab:hover{
  transform:translate(-1px,-2px); box-shadow:5px 6px 0 var(--border); }
.btn:active, .submit:not(:disabled):active, .nav-login:active, .cs-fab:active{
  transform:translate(2px,3px); box-shadow:1px 1px 0 var(--border); }
.icon-btn:hover{ transform:scale(1.15) rotate(-6deg); }
.icon-btn:active{ transform:scale(.92); }
.menu a{ transition:background-color .15s ease, transform .15s ease; }
.menu a:hover{ transform:translateY(-1px); }
input{ transition:border-color .15s ease, box-shadow .15s ease; }
input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Hero */
.hero-art{ animation:kFloat 6s ease-in-out infinite; }
.hero-art .row{ animation:kFadeUp .55s cubic-bezier(.2,.8,.2,1) both; }
.hero-art .row:nth-child(1){ animation-delay:.25s; } .hero-art .row:nth-child(2){ animation-delay:.4s; }
.hero-art .row:nth-child(3){ animation-delay:.55s; } .hero-art .row:nth-child(4){ animation-delay:.7s; }
.hero h1 em{ background-image:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  background-size:60% 100%; background-repeat:no-repeat; background-color:var(--accent); animation:kSheen 3.6s ease-in-out infinite; }

/* Badge status */
.tag.on{ animation:kPop .4s both .3s; }

/* FAQ terbuka */
details[open] > p{ animation:kFadeUp .28s ease both; }
summary{ transition:color .15s ease; } summary:hover{ color:var(--accent); }

/* Modal */
.modal-bg.show{ animation:kFade .2s ease both; }
.modal-bg.show .modal{ animation:kPop .3s cubic-bezier(.2,1.2,.3,1) both; }

/* Hasil / pesan */
.result.ok, .result.err{ animation:kPop .28s ease both; }

/* Riwayat order */
.order-row{ animation:kFadeUp .4s ease both; }
.order-row:nth-child(2){ animation-delay:.05s; } .order-row:nth-child(3){ animation-delay:.1s; }
.order-row:nth-child(4){ animation-delay:.15s; } .order-row:nth-child(5){ animation-delay:.2s; } .order-row:nth-child(n+6){ animation-delay:.25s; }

/* Tombol Customer Service: muncul memantul + cincin berdenyut */
.cs-fab{ animation:kPop .5s cubic-bezier(.2,1.3,.3,1) backwards 1s; }
.cs-fab::after{ content:''; position:absolute; inset:-3px; border-radius:50%; border:2.5px solid var(--accent); pointer-events:none; animation:kRing 2.6s ease-out infinite 2s; }

/* ================= Lapisan tambahan: halus & mewah ================= */
@keyframes kRise   { from{ transform:translateY(108%); } to{ transform:none; } }
@keyframes kBlur   { from{ opacity:0; filter:blur(8px); transform:translateY(14px); } to{ opacity:1; filter:none; transform:none; } }
@keyframes kDrift1 { 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(6vw,4vh,0) scale(1.12); } }
@keyframes kDrift2 { 0%,100%{ transform:translate3d(0,0,0) scale(1.05); } 50%{ transform:translate3d(-7vw,-5vh,0) scale(.95); } }
@keyframes kUnfold { from{ opacity:0; transform:perspective(900px) rotateX(-14deg) translateY(-12px) scale(.96); transform-origin:top center; } to{ opacity:1; transform:none; } }
@keyframes kBubbleL{ from{ opacity:0; transform:translateX(-14px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes kBubbleR{ from{ opacity:0; transform:translateX(14px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes kRowIn  { from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
@keyframes kPulseDot{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }

/* Latar: dua cahaya lembut yang bergerak pelan (dipasang oleh anim.js) */
.anim body{ background:transparent; }
.k-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.k-bg i{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; }
.k-bg i:nth-child(1){ width:46vmax; height:46vmax; left:-14vmax; top:-12vmax; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%); animation:kDrift1 22s ease-in-out infinite; }
.k-bg i:nth-child(2){ width:40vmax; height:40vmax; right:-14vmax; top:38vh; background:radial-gradient(circle, color-mix(in srgb, var(--pink, #ff5c7a) 30%, transparent), transparent 68%); animation:kDrift2 28s ease-in-out infinite; }
@media (prefers-color-scheme: dark){ .k-bg i{ opacity:.32; } }

/* Garis progres scroll di paling atas */
.k-progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:100; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent), #ffb347, var(--accent)); background-size:200% 100%; animation:kSheen 4s linear infinite; pointer-events:none; }

/* Judul hero: kata naik satu per satu */
.anim .kw{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.anim .kw > span{ display:inline-block; transform:translateY(108%); animation:kRise .85s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--w) * 70ms + 120ms); }

/* Judul section: fokus dari blur */
.anim h2.title.reveal{ filter:blur(8px); }
.anim h2.title.reveal.in{ filter:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; }

/* Kilau tombol saat hover */
.btn, .submit{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after, .submit::after{ content:''; position:absolute; top:0; bottom:0; left:-70%; width:50%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-20deg); transition:left .6s ease; }
.btn:hover::after, .submit:not(:disabled):hover::after{ left:130%; }

/* Sorotan mengikuti kursor pada kartu (perangkat dengan mouse saja) */
@media (hover:hover) and (pointer:fine){
  .card, .step, .stat{ position:relative; }
  .card::before, .step::before, .stat::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s ease;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
  .card:hover::before, .step:hover::before, .stat:hover::before{ opacity:1; }
}
.step, .stat{ transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.step:hover{ transform:translateY(-4px); box-shadow:7px 8px 0 var(--border); }
.step .num{ transition:transform .35s cubic-bezier(.2,1.4,.3,1); }
.step:hover .num{ transform:scale(1.15) rotate(-8deg); }
.anim .steps .step.reveal.in .num{ animation:kPop .5s cubic-bezier(.2,1.4,.3,1) both .25s; }

/* Kartu hero: miring halus mengikuti kursor (diisi anim.js lewat --rx --ry) */
.hero-art .phone{ transition:transform .25s ease-out; transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }

/* Tabel harga */
table.pl tbody tr{ animation:kRowIn .45s cubic-bezier(.2,.8,.2,1) both; transition:background-color .18s ease; }
table.pl tbody tr:nth-child(1){ animation-delay:.02s; } table.pl tbody tr:nth-child(2){ animation-delay:.07s; }
table.pl tbody tr:nth-child(3){ animation-delay:.12s; } table.pl tbody tr:nth-child(4){ animation-delay:.17s; }
table.pl tbody tr:nth-child(5){ animation-delay:.22s; } table.pl tbody tr:nth-child(6){ animation-delay:.27s; }
table.pl tbody tr:nth-child(n+7){ animation-delay:.32s; }
table.pl tbody tr:hover{ background:color-mix(in srgb, var(--accent) 9%, transparent); }
table.pl tbody tr td:first-child{ box-shadow:inset 0 0 0 var(--accent); transition:box-shadow .18s ease; }
table.pl tbody tr:hover td:first-child{ box-shadow:inset 4px 0 0 var(--accent); }
.chip{ transition:transform .15s ease, background-color .15s ease, color .15s ease; }
.chip:hover{ transform:translateY(-2px); }
.chip:active{ transform:scale(.95); }

/* Modal: latar buram, struk terlipat terbuka, bubble chat masuk dari sisi */
.modal-bg.show{ -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
#receiptModal.show .modal{ animation:kUnfold .55s cubic-bezier(.2,.9,.3,1) both; }
.rcpt dl > *{ animation:kFadeUp .4s ease both; }
.rcpt dl > *:nth-child(-n+2){ animation-delay:.25s; } .rcpt dl > *:nth-child(n+3):nth-child(-n+4){ animation-delay:.3s; }
.rcpt dl > *:nth-child(n+5):nth-child(-n+6){ animation-delay:.35s; } .rcpt dl > *:nth-child(n+7):nth-child(-n+8){ animation-delay:.4s; }
.rcpt dl > *:nth-child(n+9){ animation-delay:.45s; }
.rcpt .rc-total{ animation:kBlur .5s ease both .5s; }
.bub.adm{ animation:kBubbleL .3s cubic-bezier(.2,.9,.3,1) both; }
.bub.me{ animation:kBubbleR .3s cubic-bezier(.2,.9,.3,1) both; }
.cs-fab .dot{ animation:kPulseDot 1.2s ease-in-out infinite; }

/* Sidebar / kartu halaman order muncul berurutan */
body > .card:nth-of-type(1){ animation-delay:.05s; }
@media (prefers-reduced-motion: reduce){
  .k-bg, .k-progress{ display:none !important; }
  .anim .kw > span{ transform:none; }
  .anim h2.title.reveal{ filter:none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .anim .reveal{ opacity:1; transform:none; }
}