/* ==========================================================================
   about.css
   Style khusus halaman Tentang (about.html) — deskripsi aplikasi & info
   pembuat. Halaman statis murni (tanpa JS entry-point/data dari IndexedDB),
   jadi seluruh styling-nya ditaruh di sini, bukan digabung ke components.css
   yang isinya komponen dipakai ulang lintas halaman.
   ========================================================================== */

.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0 var(--space-xl);
}

.about-hero__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(var(--shadow-color), 0.12);
  /* -webkit-user-drag/user-select: cegah drag-ghost & selection highlight
     yang kadang muncul saat double-click cepat di gambar — logo ini
     punya shortcut tersembunyi (double-click -> reset PWA, lihat
     factory-reset.js), jadi double-click di sini memang disengaja dan
     harus terasa "bersih", bukan keganggu quirk drag/select browser. */
  -webkit-user-drag: none;
  user-select: none;
}

.about-hero__name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.about-hero__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 320px;
  line-height: var(--leading-snug);
}

.about-section {
  margin-bottom: var(--space-xl);
}

.about-section__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.about-section p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.about-section p:last-child { margin-bottom: 0; }

.about-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.about-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
}

.about-feature__icon {
  flex: 0 0 auto;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-accent);
  margin-top: 1px;
}

.about-feature__text {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.about-feature__text strong {
  font-weight: var(--weight-semibold);
}

.about-creator-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.about-creator-card__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-creator-card__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.about-creator-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.about-footer-note {
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--color-text-secondary);
  padding: var(--space-lg) 0 var(--space-md);
}