/* =====================================================================
   ARTKRILIK — Skeleton System (satu sumber gaya untuk SELURUH halaman)
   Warna: soft blush pink + kilau putih-pink. Sapuan kiri→kanan 1,6 dtk.
   Skeleton hanya tampil selama data/gambar BENAR-BENAR belum siap
   (lihat skeleton.js). Tidak mengubah desain asli — hanya lapisan loading.
   ===================================================================== */
:root{
  --sk-base:#F6DFE8;               /* soft blush pink */
  --sk-hi:#FFF7FA;                 /* kilau putih-pink */
  --sk-grad:linear-gradient(100deg,var(--sk-base) 30%,var(--sk-hi) 50%,var(--sk-base) 70%);
  --sk-r:14px;                     /* radius standar */
  --sk-dur:1.6s;                   /* satu siklus kilau */
  --sk-fade:.25s;                  /* skeleton keluar / konten masuk */
}
@keyframes sk-sweep{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes sk-in{from{opacity:0}to{opacity:1}}
@keyframes sk-out{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes sk-giveup{to{opacity:0;visibility:hidden}}

/* 1) Blok skeleton (garis, kotak, lingkaran) */
.sk{display:block;background:var(--sk-grad);background-size:250% 100%;border-radius:var(--sk-r);animation:sk-sweep var(--sk-dur) ease-in-out infinite}
.sk-line{height:.72em;border-radius:999px;margin:.3em 0}
.sk-pill{border-radius:999px}
.sk-circle{border-radius:50%}

/* 2) Wadah media: lapisan skeleton DI ATAS gambar sampai gambar selesai dimuat.
      Saat siap: lapisan memudar (fade-out) sehingga gambar terlihat muncul lembut. */
.sk-js .sk-media{position:relative}
.sk-js .sk-media::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:var(--sk-grad);background-size:250% 100%;
  animation:sk-sweep var(--sk-dur) ease-in-out infinite,sk-giveup .3s ease 12s forwards}  /* pengaman bila skrip gagal */
.sk-js .sk-media.sk-ready::after{animation:sk-out var(--sk-fade) ease forwards}
.sk-js .sk-media.sk-instant::after{content:none}                                          /* gambar dari cache: tanpa skeleton */

/* 3) Gambar kecil yang berdiri sendiri (mis. logo navbar) */
.sk-js img.sk-self:not(.sk-done){background:var(--sk-grad)!important;background-size:250% 100%!important;animation:sk-sweep var(--sk-dur) ease-in-out infinite}

/* 4) Konten asli masuk dengan lembut setelah skeleton dilepas */
.sk-in{animation:sk-in var(--sk-fade) ease both}

/* 5) Error state — skeleton TIDAK dipakai untuk error */
.sk-error{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:28px 20px;border-radius:18px;background:#fff;border:1.5px dashed #F3C6DD;color:#6A6B82;font-size:14px;line-height:1.6;width:100%;box-sizing:border-box}
.sk-error p{margin:0}
.sk-error b{color:#182E4E}
.sk-retry{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:10px 22px;font:inherit;font-weight:700;font-size:13.5px;color:#fff;cursor:pointer;background:linear-gradient(120deg,#C64884,#A6486F);box-shadow:0 6px 18px rgba(166,72,111,.3)}

/* ---------- Beranda: headline PNG, poster showcase ---------- */
.sk-js .hero-title.sk-media:not(.sk-ready) .hero-title-img{aspect-ratio:3264/986}   /* pesan ruang = rasio kotak judul final (dulu 13/4 -> geser ~4px saat gambar tampil = CLS) */
.sk-js .hero-title.sk-media::after{border-radius:18px}

/* ---------- Katalog: kartu skeleton (memakai kelas kartu asli → ukuran identik) ---------- */
.skc{pointer-events:none;box-shadow:none!important}
.skc .card-img{border-radius:0}
.skc .card-name{display:block!important}
.skc .card-name .sk-line:first-child{margin-top:0}
.sk-js #modalImgContent.sk-media:not(.sk-ready){aspect-ratio:4/5}             /* ruang foto detail produk */
.m-cal-cell.sk{max-width:44px;justify-self:center;width:100%;aspect-ratio:1}

/* ---------- Testimoni: kartu skeleton ---------- */
.tsk{pointer-events:none}
.tsk .ts-ph{display:block}
/* pastikan elemen skeleton selalu berwarna blush pink walau class asli punya background sendiri */
.tsk .sk,.skc .sk,.jdsk .sk,.tpl-sk-card .sk{background:var(--sk-grad);background-size:250% 100%}

/* ---------- Mobile (halaman ber-viewport 1200) ---------- */
@media (max-width:1240px){
  #katalog .sk-error,.ts-main .sk-error{font-size:28px;padding:56px 40px;gap:22px;border-radius:28px;border-width:2.5px}
  #katalog .sk-retry,.ts-main .sk-retry{font-size:28px;padding:20px 44px}
  .m-cal-cell.sk{max-width:118px}
}
@media (min-width:1241px){ .tsk:nth-child(4){display:none} }

/* PENGAMAN: animasi skeleton (kilau, fade-out, pengaman 12 dtk) TIDAK BOLEH dibekukan oleh aturan lain
   (mis. "bekukan semua animasi saat modal terbuka"). Bila dibekukan, fade-out berhenti di frame pertama
   dan skeleton tampil permanen. Spesifisitas di bawah mengalahkan aturan pembeku generik. */
.sk-js .sk,.sk-js .sk-media::after,.sk-js img.sk-self,.sk-js .skp,.sk-js .skp-in{animation-play-state:running!important}

/* Pengguna yang memilih kurangi animasi: tanpa kilau, tetap blush pink */
@media (prefers-reduced-motion:reduce){
  .sk,.sk-js img.sk-self:not(.sk-done){animation:none;background:var(--sk-base)!important}
  .sk-js .sk-media::after{animation:sk-giveup .3s ease 12s forwards;background:var(--sk-base)}
  .sk-js .sk-media.sk-ready::after{animation:none;opacity:0;visibility:hidden}
  .sk-in{animation:none}
}

/* ---------- Katalog: selama produk belum tiba, pesan "kosong" & angka 0 tidak boleh tampil ---------- */
#katalog.sk-loading .design-empty{display:none!important}
#katalog.sk-loading #customCount,#katalog.sk-loading #catCountBadge{display:inline-block;min-width:1.4em;color:transparent!important;background:var(--sk-grad)!important;background-size:250% 100%!important;border-radius:6px;animation:sk-sweep var(--sk-dur) ease-in-out infinite}

/* ---------- Testimoni: tanpa tanda kutip dekoratif pada skeleton ---------- */
.tsk .ts-quote::before{content:none}
.jdsk{pointer-events:none}

/* =====================================================================
   SKELETON LAYAR PENUH (#skPage) — kerangka kasar halaman saat pertama dibuka.
   Menutupi layar sejak piksel pertama; memudar saat halaman benar-benar siap.
   ===================================================================== */
.skp{display:none}
.sk-js .skp{display:block;position:fixed;inset:0;z-index:5000;overflow:hidden;background:#FBFAFC;
  animation:sk-giveup .3s ease 6s forwards}                         /* pengaman bila skeleton.js gagal */
.skp-index{background:linear-gradient(180deg,#FCEEF4 0,#FBF3F7 38%,#FBFAFC 62%)}
.skp-in{animation:sk-in .2s ease .08s both}                          /* bentuk muncul lembut, tanpa kedip */
html.skp-done .skp{animation:sk-out var(--sk-fade) ease forwards;pointer-events:none}
.skp .sk-line{margin:.34em 0}
.skp-wrap{max-width:1200px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.skp-row{display:flex;align-items:center;gap:10px}
.skp-grow{flex:1 1 auto}
/* navbar */
.skp-nav{height:70px;background:rgba(255,255,255,.72);border-bottom:1px solid #F1E9F1}
.skp-nav .skp-wrap{height:100%}
.skp-logo{width:34px;height:34px;flex:0 0 auto}
.skp-brand{width:120px;height:18px;border-radius:8px}
.skp-navpill{width:230px;height:34px}
.skp-navpill.beranda{width:112px;height:38px}
/* --- Beranda --- */
.skp-hero{display:flex;justify-content:space-between;align-items:center;padding-top:44px;min-height:470px}
.skp-hero-l{width:560px}
.skp-h1{height:46px;width:74%}
.skp-h2{height:46px;width:100%;margin-top:12px}
.skp-h3{height:58px;width:56%;margin-top:12px;border-radius:30px}
.skp-feats{display:flex;gap:22px;margin-top:44px}
.skp-feat{display:flex;align-items:center;gap:10px;flex:1}
.skp-fic{width:42px;height:42px;flex:0 0 auto}
.skp-fl{flex:1;font-size:12px}
.skp-ctas{display:flex;gap:14px;margin-top:20px}
.skp-btn{height:52px;flex:1;border-radius:16px}
.skp-hint{width:62%;font-size:12px;margin-top:14px!important}
.skp-hero-r{width:380px;display:flex;flex-direction:column;align-items:center}
.skp-poster{width:300px;height:375px;border-radius:30px;position:relative;z-index:1}
.skp-pedestal{width:384px;height:64px;border-radius:50%;margin-top:-18px}
.skp-strip{display:flex;gap:10px;padding:16px 18px;background:#fff;border:1px solid #F1E9F1;border-radius:20px;margin-top:30px}
.skp-step{flex:1;display:flex;align-items:center;gap:10px}
.skp-sic{width:36px;height:36px;flex:0 0 auto}
.skp-sl{flex:1;font-size:13px}
.skp-band{height:44px;margin-top:40px;background:#F3E4EC}
.skp-faq{text-align:center;padding-top:60px}
.skp-center{margin-left:auto!important;margin-right:auto!important}
.skp-flabel{width:64px;font-size:11px}
.skp-ftitle{width:520px;height:40px;margin-top:12px}
.skp-fdesc{width:420px;font-size:14px;margin-top:14px!important}
.skp-fdesc2{width:300px;font-size:14px}
.skp-fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;text-align:left}
.skp-fcard{background:#fff;border:1px solid #F1E9F1;border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.skp-fic2{width:36px;height:36px}
.skp-fnum{width:26px;height:20px;border-radius:6px}
.skp-fdiv{width:28px;height:3px;border-radius:2px}
.skp-frows{grid-template-columns:1fr!important;gap:12px}
.skp-frow{display:flex;gap:10px}
.skp-fnbox{flex:0 0 64px;height:64px;border-radius:18px}
.skp-fbar{flex:1;display:flex;align-items:center;gap:14px;height:64px;box-sizing:border-box;padding:0 16px 0 13px;background:#fff;border:1px solid #F1E9F1;border-radius:20px;font-size:15px}
.skp-fql{flex:1;max-width:60%}
.skp-fch{width:28px;height:28px;margin-left:auto}
/* --- Katalog --- */
.skp-khead{padding-top:95px}
.skp-klabel{width:120px;font-size:11px}
.skp-ktitle{width:360px;height:44px;margin-top:10px}
.skp-tabs{display:flex;gap:12px;margin-top:26px}
.skp-tab{flex:1;height:42px;border-radius:14px}
.skp-kband{max-width:1120px;margin:0 auto;background:#EFF4FF;border-radius:0 0 20px 20px;padding:26px 18px 30px;box-sizing:border-box}
.skp-kbadge{width:210px;height:36px}
.skp-kdtitle{width:240px;height:26px;margin-top:16px}
.skp-kdesc{width:70%;font-size:13.5px;margin-top:12px!important}
.skp-kdesc2{width:46%;font-size:13.5px}
.skp-kflabel{width:90px;font-size:10px;margin-top:22px!important}
.skp-chips{display:flex;gap:8px;margin-top:10px}
.skp-chip{width:110px;height:34px}
.skp-kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.skp-kcard{background:#fff;border:1px solid #F1E9F1;border-radius:16px;overflow:hidden}
.skp-kimg{display:block;aspect-ratio:1;border-radius:0}
.skp-kbody{padding:12px 13px 14px;font-size:14px}
/* --- Testimoni --- */
.skp-thead{padding-top:120px;text-align:center}
.skp-tlabel{width:100px;font-size:11px}
.skp-ttitle{width:600px;height:50px;margin-top:12px}
.skp-tsub{width:520px;font-size:15px;margin-top:16px!important}
.skp-tsub2{width:360px;font-size:15px}
.skp-tsum{display:flex;gap:16px;justify-content:center;margin-top:26px}
.skp-tpill{width:230px;height:44px}
.skp-tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.skp-tcard{background:#fff;border:1px solid #F1E9F1;border-radius:20px;overflow:hidden}
.skp-tph{display:block;aspect-ratio:4/5;border-radius:0}
.skp-tbody{padding:18px 20px 20px;font-size:14.5px}
.skp-trow{display:flex;gap:10px;align-items:center;margin-top:10px}
.skp-tav{width:38px;height:38px;flex:0 0 auto}
/* ===== MOBILE (viewport 1200) — mengikuti komposisi HP yang sudah disetel ===== */
@media (max-width:1240px){
  .skp-nav{height:106px}
  .skp-row{gap:14px}
  .skp-logo{width:50px;height:50px}
  .skp-brand{width:180px;height:28px;border-radius:10px}
  .skp-navpill{width:330px;height:46px}
  .skp-navpill.beranda{width:206px;height:74px}
  .skp-hero{padding-top:70px;min-height:640px;align-items:flex-start}
  .skp-hero-l{width:660px}
  .skp-h1,.skp-h2{height:58px}
  .skp-h3{height:76px;border-radius:40px}
  .skp-feats{width:620px;gap:12px;margin-top:60px}
  .skp-fic{width:62px;height:62px}
  .skp-fl{font-size:21px}
  .skp-ctas{width:620px;margin-top:22px}
  .skp-btn{height:72px;border-radius:18px}
  .skp-hint{width:520px;font-size:16px}
  .skp-hero-r{padding-top:10px}
  .skp-poster{width:360px;height:450px;transform:translateX(-20px)}
  .skp-pedestal{width:461px;height:84px;margin-top:-24px;transform:translateX(-20px)}
  .skp-strip{margin-top:64px;padding:26px 24px;gap:14px;border-radius:26px}
  .skp-sic{width:46px;height:46px}
  .skp-sl{font-size:18px}
  .skp-band{height:70px;margin-top:60px}
  .skp-faq{padding-top:90px}
  .skp-flabel{width:96px;font-size:22px}
  .skp-ftitle{width:1000px;max-width:100%;height:64px;margin-top:16px}
  .skp-fdesc{width:900px;max-width:100%;font-size:30px}
  .skp-fdesc2{width:600px;font-size:30px}
  .skp-fgrid{grid-template-columns:repeat(2,1fr);gap:28px;margin-top:50px}
  .skp-fcard{padding:30px 28px;gap:16px;border-radius:26px;font-size:30px}
  .skp-fic2{width:72px;height:72px}
  .skp-fnum{width:50px;height:38px;border-radius:10px}
  .skp-fdiv{width:58px;height:6px}
  .skp-frows{gap:18px!important;margin-top:54px}
  .skp-frow{gap:16px}
  .skp-fnbox{flex-basis:112px;height:116px;border-radius:28px}
  .skp-fbar{height:116px;gap:22px;padding:0 26px 0 22px;border-radius:30px;font-size:30px}
  .skp-fch{width:50px;height:50px}
  .skp-khead{padding-top:140px}
  .skp-klabel{width:200px;font-size:22px}
  .skp-ktitle{width:650px;height:90px;margin-top:14px}
  .skp-tabs{gap:18px;margin-top:34px}
  .skp-tab{height:84px;border-radius:20px}
  .skp-kband{max-width:none;border-radius:0;padding:40px 24px 34px}
  .skp-kbadge{width:420px;height:64px}
  .skp-kdtitle{width:420px;height:54px;margin-top:22px}
  .skp-kdesc,.skp-kdesc2{font-size:28px}
  .skp-kflabel{width:170px;font-size:22px}
  .skp-chips{gap:14px;margin-top:16px}
  .skp-chip{width:200px;height:64px}
  .skp-kgrid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
  .skp-kcard{border-radius:22px}
  .skp-kbody{padding:22px 20px 24px;font-size:30px}
  .skp-thead{padding-top:160px}
  .skp-tlabel{width:180px;font-size:22px}
  .skp-ttitle{width:1000px;max-width:100%;height:80px;margin-top:16px}
  .skp-tsub{width:900px;max-width:100%;font-size:30px}
  .skp-tsub2{width:600px;font-size:30px}
  .skp-tsum{gap:32px;margin-top:42px}
  .skp-tpill{width:380px;height:82px}
  .skp-tgrid{grid-template-columns:repeat(2,1fr);gap:28px;margin-top:60px}
  .skp-tcard{border-radius:30px}
  .skp-tbody{padding:28px 30px 32px;font-size:28px}
  .skp-trow{gap:18px;margin-top:16px}
  .skp-tav{width:72px;height:72px}
}

/* ---- Penyetelan posisi berdasarkan pengukuran tata letak asli ---- */
.skp-in{position:relative}
.skp-nav{position:absolute;top:0;left:0;right:0;z-index:1}      /* navbar asli melayang di atas konten */
@media (max-width:1240px){
  .skp-hero{padding-top:160px;min-height:0;align-items:flex-start}
  .skp-h1,.skp-h2{height:56px}
  .skp-h2,.skp-h3{margin-top:10px}
  .skp-h3{height:71px}
  .skp-feats{margin-top:45px}   /* 53 -> 45: jarak judul -> benefit 46px (halaman asli) */
  .skp-ctas{margin-top:24px}    /* 16 -> 24: ruang lompat tombol Lihat Katalog */
  .skp-btn{height:71px}
  .skp-hint{margin-top:23px!important}
  .skp-hero-r{padding-top:0;margin-top:-26px}
  .skp-strip{margin-top:98px;padding:15px 24px}
  .skp-band{height:84px;margin-top:24px}
  .skp-faq{padding-top:70px}
}
@media (min-width:1241px){
  .skp-hero{padding-top:113px;min-height:0;align-items:flex-start}
  .skp-h1,.skp-h2{height:47px}
  .skp-h2,.skp-h3{margin-top:9px}
  .skp-h3{height:60px}
  .skp-feats{margin-top:46px}   /* 54 -> 46: jarak judul -> benefit 46px (halaman asli) */
  .skp-ctas{margin-top:24px}    /* 16 -> 24: ruang lompat tombol Lihat Katalog */
  .skp-btn{height:55px}
  .skp-hint{margin-top:20px!important}
  .skp-hero-r{margin-top:-25px}
  .skp-strip{margin-top:62px;padding:15px 18px}
  .skp-band{height:62px;margin-top:24px}
  .skp-faq{padding-top:71px}
  .skp-ftitle{height:52px}
  .skp-fgrid{margin-top:54px}
}
.skp-kscroll{width:280px;margin-left:auto!important}
@media (max-width:1240px){
  /* katalog HP — posisi hasil ukur (tinggi tombol dikoreksi ke nilai CSS asli) */
  .skp-khead{padding-top:142px}
  .skp-ktitle{height:80px;margin-top:26px}
  .skp-tabs{margin-top:48px}
  .skp-tab{height:88px}
  .skp-kband{padding-top:57px}
  .skp-kbadge{width:470px;height:68px}
  .skp-kdtitle{height:58px;margin-top:22px}
  .skp-kdesc{margin-top:20px!important}
  .skp-kdesc2{margin-top:26px!important}
  .skp-kflabel{margin-top:56px!important}
  .skp-chips{margin-top:19px}
  .skp-chip{height:67px}
  .skp-kscroll{font-size:22px;margin-top:24px!important}
  .skp-kflabel2{margin-top:53px!important}
  .skp-chips2{margin-top:18px}
  .skp-kgrid{margin-top:67px}
  /* testimoni HP — meniru halaman SETELAH data tiba (ringkasan rating ikut tampil) */
  .skp-ttitle{height:82px;margin-top:22px}
  .skp-tsub{margin-top:37px!important}
  .skp-tsub2{margin-top:29px!important}
  .skp-tsum{margin-top:57px}
  .skp-tgrid{margin-top:60px}
}
@media (min-width:1241px){
  /* katalog desktop */
  .skp-khead{padding-top:80px}
  .skp-ktitle{height:44px;margin-top:18px}
  .skp-tabs{margin-top:45px}
  .skp-tab{height:42px}
  .skp-kband{max-width:1152px;padding-top:43px}
  .skp-kbadge{width:215px;height:37px}
  .skp-kdtitle{height:26px;margin-top:14px}
  .skp-kdesc{margin-top:13px!important}
  .skp-kdesc2{display:none}
  .skp-kflabel{margin-top:44px!important}
  .skp-chips{margin-top:12px}
  .skp-chip{height:32px}
  .skp-kscroll{width:140px;font-size:10px;margin-top:18px!important}
  .skp-kflabel2{margin-top:42px!important}
  .skp-chips2{margin-top:12px}
  .skp-kgrid{margin-top:20px}
  /* testimoni desktop */
  .skp-ttitle{height:56px;margin-top:16px}
  .skp-tsub{margin-top:25px!important}
  .skp-tsub2{margin-top:15px!important}
  .skp-tsum{margin-top:33px}
  .skp-tgrid{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){ .skp-in{animation:none} html.skp-done .skp{animation:none;display:none} }