/* ─────────────────────────────────────────────────────────
   Jubir Warga — Global Styles
   Reset + base + animasi + utility classes.
   Diekstrak dari <style> block di index.html.
   ───────────────────────────────────────────────────────── */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--jw-cream);
  color: var(--jw-ink);
  font-family: var(--jw-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--jw-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--jw-line);
  border-radius: 4px;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Card hover ───────────────────────────────────────────── */
.card-lift {
  transition:
    transform var(--jw-dur-base) var(--jw-ease),
    box-shadow var(--jw-dur-base) var(--jw-ease);
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--jw-shadow-lg);
}

/* ── Wordle tiles & keyboard ─────────────────────────────── */
.wtile {
  width: 54px;
  height: 54px;
  border: 2px solid var(--jw-line);
  border-radius: var(--jw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--jw-font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  transition: border-color .1s, transform .1s;
  user-select: none;
}
@media (max-width: 420px) {
  .wtile { width: 44px; height: 44px; font-size: 20px; }
}

.wkey {
  height: 48px;
  min-width: 30px;
  padding: 0 6px;
  border-radius: var(--jw-radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--jw-font-ui);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .1s, transform .08s;
  user-select: none;
}
.wkey:hover  { filter: brightness(.88); }
.wkey:active { transform: scale(.93); }

@keyframes flip-in  { 0% { transform: rotateX(0); }   50% { transform: rotateX(90deg); } }
@keyframes flip-out { 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes tile-pop { 0% { transform: scale(1); } 50% { transform: scale(1.13); } 100% { transform: scale(1); } }
@keyframes row-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.flip-tile { animation: flip-in .25s ease forwards, flip-out .25s ease .25s forwards; }
.tile-pop  { animation: tile-pop .12s ease; }
.row-shake { animation: row-shake .4s ease; }

/* ── Sticky note tilt (anotasi tangan) ───────────────────── */
.sticky-a { transform: rotate(-1.2deg); }
.sticky-b { transform: rotate(1.0deg); }

/* ── Squiggly underline (anotasi koreksi) ────────────────── */
.squiggly {
  text-decoration: underline wavy var(--jw-coral);
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}

/* ── Badge shimmer (level pin) ───────────────────────────── */
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.badge-glow { animation: shimmer 2.4s ease-in-out infinite; }

/* ── Button base (ripple-friendly) ───────────────────────── */
.btn-base {
  position: relative;
  overflow: hidden;
  transition: transform .1s, filter .1s;
}
.btn-base:active { transform: scale(.97); }

/* ── Form input baseline ─────────────────────────────────── */
input[type=range] { accent-color: var(--jw-coral); }

input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=tel],
input[type=url],
textarea,
select {
  font-family: var(--jw-font-ui);
}

/* ── Line clamp ───────────────────────────────────────────── */
.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Loading skeleton (untuk Minggu 2) ───────────────────── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.skeleton {
  background: var(--jw-line);
  border-radius: var(--jw-radius-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* ── Focus ring (accessibility) ──────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--jw-coral);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Mobile touch-target minimum (44x44 per Apple HIG) ───── */
@media (pointer: coarse) {
  button,
  a[role="button"],
  .wkey {
    min-height: 44px;
  }
}

/* ── Print (basic) ────────────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .no-print { display: none !important; }
}