/* ==========================================================
   STYLE.CSS — Tampilan halaman profil
   ----------------------------------------------------------
   Struktur file ini (urut dari atas ke bawah):
   1. Variabel warna (mode terang/gelap)
   2. Reset dasar & layout utama (.page, .wrapper)
   3. Avatar
   4. Nama (greeting)
   5. Kartu server Discord
   6. Social links (ikon GitHub, Discord, dst.)
   7. Animasi (float, pulse)

   Untuk ganti warna dasar situs, cukup ubah variabel di :root
   dan html.dark di bawah ini.
   ========================================================== */

/* ==========================================================
   SKELETON LOADING
   Placeholder yang berkedip pelan, ditampilkan SEMENTARA data
   Discord (avatar/nama/server) masih di-fetch, supaya halaman
   tidak terasa kosong/delay saat pertama dibuka.
   ========================================================== */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

.skeleton {
  animation: skeletonPulse 1.4s ease-in-out infinite;
  background: rgba(255, 255, 255, 0.08);
}
html:not(.dark) .skeleton {
  background: rgba(0, 0, 0, 0.08);
}

.skeleton-avatar {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
}

.skeleton-name {
  display: inline-block;
  width: 140px;
  max-width: 40vw;
  height: 1em;
  border-radius: 6px;
  vertical-align: middle;
}

.skeleton-card {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: 46px;
  border-radius: 13px;
}

/* Konten asli fade-in halus begitu data selesai dimuat,
   supaya transisinya tidak "kedip"/mendadak */
.fade-in {
  animation: fadeIn 0.25s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================
   VARIABEL WARNA
   Ganti nilai di bawah ini untuk mengubah tampilan warna situs.
   ========================================================== */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --font-size-base: 18px;
  --muted-text: rgba(0, 0, 0, 0.5);
}

html.dark {
  --background: #000000;
  --foreground: #ffffff;
  --muted-text: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --foreground: #ffffff;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
  min-height: 100vh;
}

::selection {
  background-color: #b3d4fc;
  color: #000;
}
html.dark ::selection {
  background-color: #444;
  color: #fff;
}

/* ==========================================================
   LAYOUT UTAMA
   ========================================================== */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.wrapper {
  width: 100%;
  max-width: 28rem; /* setara max-w-md */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================
   AVATAR
   Ukuran diatur oleh script.js (lihat CONFIG di bagian atas file).
   ========================================================== */
.avatar-holder {
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.avatar {
  position: relative;
  width: 100%;
  height: 100%;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

/* ==========================================================
   NAMA (GREETING)
   Diisi otomatis oleh script.js dari display name akun Discord.
   ========================================================== */
.greeting {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-align: center;
}

.greeting .highlight {
  color: #ffffff;
  font-weight: 800;
}

@media (min-width: 640px) {
  .greeting { font-size: 3.75rem; }
}

/* ==========================================================
   KARTU SERVER DISCORD
   ========================================================== */
.server-card-wrap {
  margin-bottom: 32px;
  min-height: 28px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Di layar kecil (mobile), beri margin samping lebih besar
   supaya kartu tidak melebar penuh dan terlihat kepanjangan */
/* Kartu server dibatasi lebarnya secara tetap (bukan ikut lebar
   penuh wrapper), supaya tidak pernah terlihat kepanjangan baik
   di mobile maupun desktop */
@media (min-width: 640px) {
  .server-card-wrap { margin-bottom: 36px; }
}

.server-card-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
}

html:not(.dark) .server-card-link {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}

.server-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ec4899, #f472b6);
}
.server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.server-icon-fallback {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.server-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.server-name {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.server-meta {
  font-size: 0.85rem;
  color: var(--muted-text);
}

.server-join-btn {
  flex-shrink: 0;
  padding: 9px 20px;
  border-radius: 10px;
  background: #ec4899;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.server-join-btn:hover {
  background: #db2777;
  transform: scale(1.03);
}

/* Ditampilkan kalau fetch data server Discord gagal
   (mis. invite kedaluwarsa atau ID salah) */
.server-card-error {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px dashed rgba(237, 66, 69, 0.4);
  background: rgba(237, 66, 69, 0.08);
  color: var(--muted-text);
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5;
}

/* ==========================================================
   SOCIAL LINKS
   ========================================================== */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

@media (min-width: 640px) {
  .social-links { gap: 26px; }
}

.icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  transition: transform 0.3s ease;
}
.icon-link:hover {
  transform: scale(1.1);
}

.icon-inner {
  display: inline-flex;
  transition: opacity 0.3s ease;
}
.icon-link:hover .icon-inner {
  opacity: 0.75;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  margin-bottom: 10px;
  padding: 4px 8px;
  background: rgba(23, 23, 23, 0.9);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.icon-link:hover .tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==========================================================
   ANIMASI DEKORASI AVATAR DISCORD
   ========================================================== */
@keyframes pulseAnimation {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes floatAnimation {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(0.5deg); }
}
.pulse-animation { animation: pulseAnimation 10s infinite ease-in-out; }
.float-animation { animation: floatAnimation 8s infinite ease-in-out; }