/* ==========================================================
   Tiny Tales Wear — tema
   Ubah warna di :root untuk mengganti nuansa keseluruhan.
   ========================================================== */
:root {
  --tt-bg: #f3f2ee;          /* latar krem-abu lembut */
  --tt-blue: #1f2fd1;        /* biru royal untuk judul & tombol */
  --tt-blue-hover: #1726ad;
  --tt-text: #2b2b2b;
  --tt-lime: #d6e64a;
}

:root.theme-light body,
:root.theme-auto body,
:root.theme-dark body {
  background-color: var(--tt-bg);
  color: var(--tt-text);
  position: relative;
  overflow-x: hidden;
}

/* Dekorasi latar */
.tt-wordmark {
  position: fixed;
  top: 50%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.tt-wordmark {
  left: -3rem;
  width: 20rem;
  max-width: 50vw;
  opacity: 0.28;
  transform: translateY(-50%) rotate(-8deg);
}

.container { position: relative; z-index: 1; }

.tt-logo {
  width: 200px;
  height: auto;
  margin-bottom: 1rem;
}

.tt-ig {
  color: var(--tt-blue) !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.tt-ig:hover { text-decoration: underline; }

.tt-title {
  color: var(--tt-blue);
  font-weight: 800;
  font-size: 2.75rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}

.container p.tt-tagline {
  letter-spacing: 0.14em;
  font-size: 0.62rem;
  color: var(--tt-text);
  margin-bottom: 2rem !important;
}

/* Tombol pill biru, teks di kiri, ikon di kanan */
.button.tt-button {
  background-color: var(--tt-blue);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-weight: 400;
  font-size: 0.95rem;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 6px 16px rgba(31, 47, 209, 0.25);
}
.button.tt-button:hover,
.button.tt-button:focus-visible {
  background-color: var(--tt-blue-hover);
  color: #ffffff;
}
.button.tt-button .tt-icon-right {
  margin-left: 0.6rem;
  margin-right: 0;
}

footer {
  margin-top: 5rem !important;
}
.container footer p {
  font-size: 0.7rem;
  line-height: 1.5;
  opacity: 0.55;
  text-align: center;
  margin: 0 0 0.35rem 0;
}

/* Layar menengah (tablet / jendela sempit): dekorasi jangan menabrak konten */
@media (max-width: 60rem) {
  .tt-wordmark { width: 14rem; opacity: 0.18; left: -4rem; }
}

@media (max-width: 34.375rem) {
  .tt-title { font-size: 2rem; }
  .tt-logo { width: 150px; }
  .tt-wordmark { width: 13rem; opacity: 0.2; top: auto; bottom: -2rem; transform: rotate(-8deg); }
}