/* CraftKita landing — "Siang cerah di dunia Minecraft" */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --grass:#5CAB3B; --grass-dark:#4a8f2f;
  --dirt:#8B5A2B; --dirt-dark:#6e4620;
  --sky1:#87CEEB; --sky2:#c9ecf9;
  --stone:#9c9c9c; --stone-dark:#7a7a7a;
  --gold:#FFC94D; --gold-dark:#e8ab1f;
  --diamond:#4FD1E0;
  --text:#3d2f1f;
}

html{scroll-behavior:smooth}
body{
  font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif;
  color:var(--text);
  background:var(--sky2);
  overflow-x:hidden;
}

/* ===== LANGIT & AWAN ===== */
.sky{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 70%,#e8f7ee 100%);
}
.sun{
  position:absolute;top:48px;right:48px;width:64px;height:64px;
  background:#FFE66D;box-shadow:0 0 0 8px rgba(255,230,109,.35);
  image-rendering:pixelated;
}
.cloud{
  position:absolute;background:#fff;opacity:.92;
  width:96px;height:28px;animation:drift 60s linear infinite;
}
.cloud::before{content:'';position:absolute;left:16px;top:-14px;width:40px;height:14px;background:#fff}
.cloud::after{content:'';position:absolute;left:44px;top:-22px;width:32px;height:22px;background:#fff}
.c1{top:12%}.c2{top:24%;animation-duration:85s;animation-delay:-30s;transform:scale(.7)}
.c3{top:6%;animation-duration:110s;animation-delay:-60s;transform:scale(1.3)}
@keyframes drift{from{left:-140px}to{left:100vw}}

/* ===== HERO ===== */
.hero{
  text-align:center;padding:72px 20px 40px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.logo-block{
  width:64px;height:64px;image-rendering:pixelated;
  background:
    linear-gradient(180deg,var(--grass) 0 50%,var(--dirt) 50% 100%);
  box-shadow:
    inset -8px -8px 0 rgba(0,0,0,.15),
    inset 8px 8px 0 rgba(255,255,255,.22);
  animation:pop .5s cubic-bezier(.2,1.6,.4,1);
}
.title{
  font-size:clamp(2.4rem,9vw,4rem);letter-spacing:2px;
  color:#fff;
  text-shadow:
    3px 3px 0 var(--grass-dark),
    6px 6px 0 rgba(0,0,0,.18);
  animation:pop .5s .1s cubic-bezier(.2,1.6,.4,1) backwards;
}
.title span{color:var(--gold);text-shadow:3px 3px 0 var(--gold-dark),6px 6px 0 rgba(0,0,0,.18)}
.tagline{
  font-size:clamp(1rem,4vw,1.25rem);max-width:34em;line-height:1.55;
  background:rgba(255,255,255,.85);padding:14px 20px;border-radius:10px;
  box-shadow:0 4px 0 rgba(0,0,0,.08);
  animation:pop .5s .2s cubic-bezier(.2,1.6,.4,1) backwards;
}

/* ===== TOMBOL GAYA MINECRAFT ===== */
.btn-mc{
  display:inline-block;text-decoration:none;text-align:center;
  font-weight:bold;font-size:clamp(1.05rem,4.5vw,1.3rem);letter-spacing:1px;
  color:#fff;cursor:pointer;user-select:none;
  background:linear-gradient(180deg,#8a8a8a,var(--stone) 45%,var(--stone-dark));
  border:4px solid #2b2b2b;border-radius:4px;
  padding:18px 44px;min-height:56px;line-height:1.2;
  text-shadow:2px 2px 0 rgba(0,0,0,.5);
  box-shadow:inset -4px -6px 0 rgba(0,0,0,.3),inset 4px 4px 0 rgba(255,255,255,.35),0 6px 0 #222;
  transition:transform .08s;
}
.btn-mc:hover{filter:brightness(1.08)}
.btn-mc:active{transform:translateY(4px);box-shadow:inset -4px -6px 0 rgba(0,0,0,.3),inset 4px 4px 0 rgba(255,255,255,.35),0 2px 0 #222}
.btn-download{
  background:linear-gradient(180deg,#ffd977,var(--gold) 45%,var(--gold-dark));
  animation:pulse 2.2s ease-in-out .5s infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.dl-note{font-size:.9rem;opacity:.75}

/* ===== SEKSI UMUM ===== */
section{padding:48px 20px;max-width:900px;margin:0 auto}
.sec-title{
  text-align:center;font-size:clamp(1.5rem,6vw,2rem);margin-bottom:28px;
  color:var(--grass-dark);text-shadow:2px 2px 0 rgba(255,255,255,.6);
}

/* ===== FITUR ===== */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fffdf5;border-radius:12px;padding:24px 20px;
  box-shadow:0 5px 0 rgba(0,0,0,.1);
  border-bottom:5px solid var(--grass);
  animation:pop .5s cubic-bezier(.2,1.6,.4,1) backwards;
}
.card:nth-child(1){animation-delay:.15s}.card:nth-child(2){animation-delay:.25s}
.card:nth-child(3){animation-delay:.35s}.card:nth-child(4){animation-delay:.45s}
.card h3{margin:12px 0 8px;font-size:1.1rem}
.card p{line-height:1.55;font-size:.95rem}
/* ikon pixel css */
.card-icon{width:36px;height:36px;position:relative;image-rendering:pixelated}
.heart{background:#E2574C;clip-path:polygon(12% 30%,30% 12%,50% 30%,70% 12%,88% 30%,88% 55%,50% 92%,12% 55%)}
.gem{background:var(--diamond);clip-path:polygon(50% 4%,92% 36%,50% 96%,8% 36%)}
.bolt{background:var(--gold);clip-path:polygon(55% 2%,20% 55%,45% 55%,40% 98%,80% 42%,55% 42%)}
.grass{background:var(--grass);clip-path:polygon(4% 96%,4% 45%,20% 45%,20% 28%,40% 28%,40% 12%,60% 12%,60% 28%,80% 28%,80% 45%,96% 45%,96% 96%)}

/* ===== CARA JOIN ===== */
.howto{background:rgba(255,255,255,.85);border-radius:16px}
.steps{list-style:none;display:flex;flex-direction:column;gap:20px;counter-reset:st}
.steps li{display:flex;gap:14px;align-items:flex-start;line-height:1.55}
.step-num{
  flex:0 0 44px;height:44px;display:grid;place-items:center;
  background:var(--grass);color:#fff;font-weight:bold;font-size:1.2rem;
  border-radius:8px;box-shadow:0 4px 0 var(--grass-dark);
}
.steps code{
  background:#f0ebe0;padding:2px 7px;border-radius:5px;
  font-family:'Courier New',monospace;font-size:.9em;color:var(--dirt-dark);
}

/* ===== CTA BAWAH ===== */
.cta-bottom{text-align:center;display:flex;flex-direction:column;gap:20px}
.cta-bottom h2{font-size:clamp(1.4rem,6vw,1.9rem)}

/* ===== TANAH ===== */
.ground{position:relative;margin-top:40px}
.grass-strip{height:28px;background:var(--grass);box-shadow:inset 0 -6px 0 rgba(0,0,0,.12)}
.dirt{
  height:72px;background:var(--dirt);
  background-image:
    radial-gradient(circle at 12px 18px,var(--dirt-dark) 5px,transparent 6px),
    radial-gradient(circle at 52px 44px,var(--dirt-dark) 6px,transparent 7px),
    radial-gradient(circle at 84px 12px,var(--dirt-dark) 4px,transparent 5px);
  background-size:110px 64px;
}

/* ===== FOOTER ===== */
footer{
  background:var(--dirt-dark);color:#f5e9d5;text-align:center;
  padding:26px 20px 34px;font-size:.9rem;line-height:1.7;
}
footer .muted{opacity:.6;font-size:.78rem}

/* ===== CONFETTI ===== */
.confetti{
  position:absolute;width:10px;height:10px;z-index:99;pointer-events:none;
  animation:fall 1.1s ease-in forwards;
}
@keyframes fall{
  to{transform:translate(var(--dx),var(--dy)) rotate(360deg);opacity:0}
}

@keyframes pop{from{transform:scale(.6) translateY(16px);opacity:0}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important}
}

/* ===== FAQ ===== */
.faq{display:flex;flex-direction:column;gap:10px;max-width:640px;margin:0 auto}
.faq details{
  background:#fffdf5;border-radius:10px;padding:0;
  box-shadow:0 4px 0 rgba(0,0,0,.08);overflow:hidden;
  border-left:5px solid var(--grass);
}
.faq summary{
  cursor:pointer;font-weight:bold;padding:14px 16px;list-style:none;
  position:relative;padding-right:40px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--grass-dark);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 16px 14px;line-height:1.6;font-size:.95rem}