/* Global Reset and Variables */
:root {
  --gold: #0F5AC2;
  --brown: #0A0A0A;
  --bg: #FAFAFA;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 📱 Body Styling (Mobile-First Focus) */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); 
  color: var(--brown); 
  line-height: 1.4;
  min-height: 100vh;
  text-align: center;
  
  /* Aturan Mobile-First: padding untuk perangkat kecil */
  padding: 16px; 
  padding-top: 40px; 
}

/* General Link Styling */
a {
  text-decoration: none;
}

/* Styling untuk Registered Trademark (®) */
.reg {
  vertical-align: super; 
  font-size: 0.5em; 
  margin-left: 2px;
}

/* 📱 Container (Mobile-First Focus) */
.container {
  /* Aturan Mobile-First: lebar penuh di HP */
  max-width: 100%; 
  width: 100%; 
  margin: 0 auto;
  text-align: center;
}

/* Profile Section */
.profile {
  margin-bottom: 30px;
}

/* Logo/Profile Image */
.logo, .profile-img {
  width: 150px; /* Menggunakan ukuran mobile 84px */
  height: 100%;
  object-fit: cover;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}

.name {
  font-size: 18px; /* Menggunakan ukuran font mobile 18px */
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brown); 
}

.bio {
  font-size: 13px; /* Menggunakan ukuran font mobile 13px */
  color: #6b4b36; 
  max-width: 280px;
  margin: 0 auto 16px auto;
}

/* Headings */
h1 {
  font-size: 1.4rem;
  margin: 8px 0 4px;
}

h2 {
  font-size: 1.0rem;
  margin: 8px 0 4px;
}

/* Paragraphs */
p {
  margin: 0;
  font-size: 0.9rem; 
  color:  var(--brown); 
}

/* Social Icons in Profile */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.social-icons a {
  width: 32px; /* Menggunakan ukuran mobile 32px */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 25%;
  text-decoration: none;
  color: var(--brown); 
}

.social-icons i {
  font-size: 18px; /* Menggunakan ukuran font mobile 14px */
}

/* Links Section */
.links {
  margin-bottom: 30px;
}

/* Link item (Mobile-First Focus) */
.links a, .link {
  display: block;
  background: white; 
  border: 1px solid #E5E5E5;
  padding: 14px 18px; /* Menggunakan padding mobile 14px 18px */
  margin: 10px 0; 
  border-radius: 12px;
  text-decoration: none;
  color: var(--brown);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all .2s ease;
  font-size: 14px; /* Menggunakan ukuran font mobile 14px */
}

.links a:hover {
  background: var(--gold);
  color: white;
  transform: translateY(-2px);
}

.link i {
  margin-right: 12px;
  width: 18px;
  font-size: 16px;
  color: var(--brown); 
}

/* WA/Highlighted Link */
.wa {
  background: var(--gold);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(242, 183, 5, 0.3); 
}

/* Footer */
footer, .footer {
  margin-top: 24px;
  font-size: 0.8rem;
  color: #967a60;
}

.footer p {
  font-size: 12px;
  color: var(--brown); 
}

.footer a {
  text-decoration: none;
  color: inherit;
}


/* Desktop/Tablet Optimization (Applying wider-screen styles only if needed) */
@media (min-width: 429px) {
  body {
	/* Mengembalikan centering vertikal untuk layar yang lebih besar */
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20px; /* Reset padding-top */
  }
  
  .container {
	max-width: 400px; /* Batasi lebar container di layar besar */
  }

  .logo, .profile-img {
	width: 150px;; 
	height: 100%;
  }
  
  .name {
	font-size: 20px; 
  }
  
  .bio {
	font-size: 14px;
  }
  
  .social-icons a {
	width: 36px;
	height: 36px;
  }
  
  .links a, .link {
	padding: 16px 20px; 
	font-size: 15px;
  }
}

/* Dark mode support (kept intact) */
@media (prefers-color-scheme: dark) {
  body {
	background: #000;
	color: #f5f5f5;
  }
  
  .name { color: #f5f5f5; }
  .bio { color: #a8a8a8; }
  
  .social-icons a {
	background: #121212;
	border-color: #363636;
	color: #f5f5f5;
  }
  
  .links a, .link {
	background: #121212;
	border-color: #363636;
	color: #f5f5f5;
  }
  
  .link i { color: #f5f5f5; }
  
  .footer { border-color: #363636; }
  .footer p { color: #a8a8a8; }
}