@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2")}

/* Seluruh ukuran memakai rem. 1rem = 10px pada lebar desain (490px),
   lalu mengecil proporsional di layar yang lebih sempit. */
html{font-size:clamp(6.2px,2.04vw,10px)}

:root{
  --orange:#EF8218;
  --ink:#2b2b2b;
  --extra:0rem; /* tambahan ruang atas/bawah di tampilan mobile */
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
ul{list-style:none}
button{font:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}

body{
  min-height:100vh;min-height:100dvh;
  display:flex;justify-content:center;align-items:flex-start;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(135deg,#FCD52B 0%,#FFB03B 36%,#FF7F4A 72%,#FF5757 100%);
  background-size:150% 150%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  animation:bgdrift 20s ease-in-out infinite alternate;
}

/* ---------- Kartu ---------- */
.card{
  position:relative;
  width:100%;max-width:48rem;
  min-height:calc(100vh - 5.2rem);min-height:calc(100dvh - 5.2rem);
  margin:2.6rem 0;
  padding:calc(5.7rem + var(--extra)) 0 calc(1.65rem + var(--extra));
  border-radius:6.4rem;
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(160deg,#FFEAB1 0%,#FFD9B4 46%,#FFC3B8 100%);
  overflow:hidden;
  animation:cardin .9s var(--ease) backwards;
}

/* ---------- Profil ---------- */
.profile{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}

.logo{
  position:relative;width:9.9rem;height:9.9rem;border-radius:50%;
  animation:logoin 1s cubic-bezier(.34,1.56,.64,1) .25s backwards, floaty 6s ease-in-out 1.6s infinite;
}
.logo img{width:100%;height:100%;border-radius:50%}
.logo::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:.2rem solid rgba(239,130,24,.5);
  animation:ring 3.2s ease-out 1.6s infinite;pointer-events:none;
}

h1{
  margin-top:1.2rem;
  font-size:2.5rem;line-height:2.6rem;font-weight:700;letter-spacing:-.005em;
  color:var(--orange);
}
.profile p{
  margin-top:1.4rem;
  font-size:1.5rem;line-height:1.9rem;font-weight:400;color:#2f2f2f;
}

/* ---------- Tautan ---------- */
.links{
  width:85%;margin-top:3rem;
  display:flex;flex-direction:column;gap:3.05rem;
}
.link{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  height:6.4rem;padding-left:1.6rem;
  border-radius:999px;background:#fff;
  font-size:2rem;font-weight:700;color:var(--orange);white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.link__icon{
  position:absolute;left:1.8rem;top:50%;
  width:4.5rem;height:4.5rem;margin-top:-2.25rem;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.link::after{ /* kilau saat disentuh */
  content:"";position:absolute;top:0;bottom:0;left:-55%;width:35%;
  background:linear-gradient(100deg,transparent,rgba(255,196,120,.5),transparent);
  transform:skewX(-20deg);transition:left .8s var(--ease);pointer-events:none;
}
.link--lead{animation:rise .8s var(--ease) backwards, glow 3.8s ease-in-out 2.4s infinite}

@media (hover:hover){
  .link:hover{transform:translateY(-.3rem) scale(1.015);box-shadow:0 1rem 2.4rem -.8rem rgba(214,90,20,.35)}
  .link:hover::after{left:130%}
  .link:hover .link__icon{transform:rotate(-9deg) scale(1.1)}
  .social:hover{transform:translateY(-.4rem) rotate(-6deg);box-shadow:0 .8rem 1.6rem -.6rem rgba(214,90,20,.4)}
  .share-btn:hover{transform:rotate(14deg) scale(1.12)}
}
.link:active{transform:scale(.97);transition-duration:.12s}
.social:active{transform:scale(.92);transition-duration:.12s}
.share-btn:active{transform:scale(.88)}
.link:focus-visible,.social:focus-visible,.share-btn:focus-visible{outline:.3rem solid #fff;outline-offset:.3rem;box-shadow:0 0 0 .5rem var(--orange)}

/* ---------- Sosial ---------- */
.socials{
  margin-top:3.05rem;display:flex;justify-content:center;gap:1.55rem;
}
.social{
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  width:4.1rem;height:4.1rem;border-radius:1rem;background:#fff;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.social img{width:2.4rem;height:2.4rem}

/* ---------- Footer ---------- */
.footer{
  margin-top:auto;padding-top:2.4rem;
  text-align:center;font-size:1.3rem;line-height:2rem;color:#2f2f2f;
}
.footer strong{font-weight:700;color:#1c1c1c}

/* ---------- Tombol bagikan ---------- */
.share-btn{
  position:absolute;z-index:2;
  top:calc(2.15rem + var(--extra));right:2.75rem;
  width:4.4rem;height:4.4rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  animation:logoin .8s cubic-bezier(.34,1.56,.64,1) .9s backwards;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.share-btn img{width:2.5rem;height:2.5rem}

/* ---------- Ripple ---------- */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(239,130,24,.22);transform:scale(0);
  animation:ripple .6s ease-out forwards;
}

/* ---------- Muncul bertahap ---------- */
.reveal{animation:rise .8s var(--ease) backwards;animation-delay:calc(var(--i)*85ms + 420ms)}
.link--lead{animation-delay:calc(var(--i)*85ms + 420ms),2.4s}

/* ---------- Sheet bagikan (px agar tetap terbaca di layar kecil) ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet__backdrop{
  position:absolute;inset:0;background:rgba(40,18,0,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease;
}
.sheet__panel{
  position:relative;width:min(440px,100%);
  padding:10px 22px calc(24px + env(safe-area-inset-bottom));
  background:#fff;border-radius:26px 26px 0 0;
  transform:translateY(100%);
  transition:transform .42s var(--ease);
  box-shadow:0 -12px 40px rgba(60,20,0,.18);
}
.sheet.is-open .sheet__backdrop{opacity:1}
.sheet.is-open .sheet__panel{transform:none}
.sheet__grip{display:block;width:40px;height:4px;margin:0 auto 14px;border-radius:4px;background:#eadccd}
.sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sheet__head h2{font-size:16px;font-weight:700;color:#2b2b2b}
.sheet__close{width:32px;height:32px;border-radius:50%;font-size:22px;line-height:1;color:#7a6a5c;background:#f6efe8;transition:background .2s}
.sheet__close:hover{background:#f0e2d3}
.sheet__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px}
.opt{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:400;color:#3a3a3a}
.opt__tile{
  width:58px;height:58px;border-radius:18px;background:#FFF1E0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s;
}
.opt__tile img{width:28px;height:28px}
.opt:hover .opt__tile{transform:translateY(-3px);background:#FFE3C4}
.opt:active .opt__tile{transform:scale(.92)}
.opt:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:12px}
.sheet__url{display:flex;gap:8px;margin-top:22px;padding:6px 6px 6px 14px;border-radius:14px;background:#f8f3ee;align-items:center}
.sheet__url input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:12px;color:#6b5d51;outline:none;text-overflow:ellipsis}
.sheet__url button{padding:9px 16px;border-radius:10px;background:var(--orange);color:#fff;font-size:12px;font-weight:700;transition:filter .2s,transform .15s}
.sheet__url button:hover{filter:brightness(1.07)}
.sheet__url button:active{transform:scale(.95)}

.toast{
  position:fixed;left:50%;bottom:28px;z-index:60;max-width:calc(100% - 40px);
  padding:11px 18px;border-radius:999px;background:#2b2b2b;color:#fff;
  font-size:13px;font-weight:400;text-align:center;
  opacity:0;transform:translate(-50%,16px);pointer-events:none;
  transition:opacity .25s ease,transform .35s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsif ---------- */
@media (min-width:491px){
  .sheet{align-items:center}
  .sheet__panel{border-radius:26px;padding-bottom:24px;transform:translateY(24px) scale(.96);opacity:0;transition:transform .42s var(--ease),opacity .3s ease}
  .sheet.is-open .sheet__panel{opacity:1}
}
@media (max-width:490px){
  :root{--extra:2.8rem}
  body{background:linear-gradient(160deg,#FFEAB1 0%,#FFD9B4 46%,#FFC3B8 100%)}
  .card{max-width:none;margin:0;border-radius:0;min-height:100vh;min-height:100dvh}
}

/* ---------- Keyframes ---------- */
@keyframes bgdrift{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes cardin{from{opacity:0;transform:translateY(26px) scale(.96)}}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97);filter:blur(5px)}}
@keyframes logoin{from{opacity:0;transform:scale(.3) rotate(-120deg)}60%{transform:scale(1.08) rotate(6deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5rem)}}
@keyframes ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.5);opacity:0}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(239,130,24,0)}50%{box-shadow:0 0 0 .7rem rgba(239,130,24,.16)}}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}