*{
  margin: 0; /* atur jarak luar jadi nol */
  padding: 0; /* atur jarak dalam jadi nol */
  box-sizing: border-box; /* supaya padding dihitung dalam lebar/tinggi */
}

html{
  scroll-behavior: smooth; /* halaman akan gulir halus saat klik link */
}

body{
  background-color: #fefefe; /* background putih */
  font-family: Bahnschrift; /* pake font bahnschrift */
}

/* --- HEADER --- */
.layout-header{
  display: flex; /* susun isi header secara baris */
  justify-content: space-between; /* jarak antar item di header */
  align-items: center; /* rata tengah secara vertikal */
  background-color: #e3f6f5; /* biru pastel */
  position: sticky; /* header nempel saat di scroll */
  top: 0; /* posisi nempel di atas */
  padding: 10px 20px; /* ruang dalam header */
  z-index: 999; /* biar header tetap di atas elemen lain */
  border-bottom: 2px solid #bae8e8; /* garis bawah lembut */
}

.halamanlogo{
  display: flex; /* susun logo dan teks sejajar */
  align-items: center; /* rata tengah vertikal */
  font-family: Bahnschrift; /* set font logo */
}

.halamanlogo img{
  width: 90px; /* lebar gambar logo */
  height: 90px; /* tinggi gambar logo */
  margin-right: 10px; /* jarak kanan gambar */
}

nav ul{
  display: flex; /* susun menu secara horizontal */
  list-style: none; /* hilangkan bullet list */
  gap: 15px; /* jarak antar item menu */
  font-size: 16px; /* ukuran teks menu */
  font-family: Bahnschrift; /* font untuk menu */
}

nav ul li a{
  text-decoration: none; /* hilangkan garis bawah link */
  color: #272343; /* warna teks link */
}

nav ul li a:hover{
  color: #ffb5c2; /* warna saat kursor di atas link */
}

/* --- ANIMASI GAMBAR (OPTIONAL) --- */
.animasi-gambar{
  width: 100%; /* lebar 100% dari container */
  height: 650px; /* tinggi tetap untuk area gambar */
  animation: slide 15s infinite; /* jalankan animasi slide terus */
}

@keyframes slide{
  0%{ background-image: url("gambar1.jpg"); } /* frame awal gambar 1 */
  25%{ background-image: url("gambar2.jpg"); } /* frame 25% gambar 2 */
  75%{ background-image: url("gambar3.jpg"); } /* frame 75% gambar 3 */
  100%{ background-image: url("gambar4.jpg"); } /* frame akhir gambar 4 */
}

/* --- LAYOUT HALAMAN PER SECTION --- */
.halamansatu{
  width: 100%; /* lebar section isi layar */
  height: 680px; /* tinggi section */
  background-color: #ffffff; /* putih */
  display: flex; /* susun isi section secara baris */
  align-items: center; /* rata tengah secara vertikal */
  padding: 20px; /* ruang dalam section */
  border-bottom: 2px solid #e3f6f5; /* garis bawah biru pastel */
}

.halamansatu .page1{
  width: 50%; /* kolom kiri 50% lebar */
  height: 100%; /* tinggi penuh section */
  display: flex; /* pakai flex */
  align-items: center; /* rata tengah vertikal */
  justify-content: center; /* rata tengah horizontal */
}

.halamansatu .page1 .gambar{
  width: 400px; /* lebar gambar di kolom kiri */
  height: auto; /* tinggi otomatis untuk proporsional */
}

.halamansatu .page2{
  width: 50%; /* kolom kanan 50% lebar */
  height: 100%; /* tinggi penuh section */
  display: flex; /* pakai flex */
  align-items: center; /* rata tengah vertikal */
}

.halamansatu .page2 .kolom{
  width: 500px; /* lebar konten teks di kolom kanan */
  margin-left: 40px; /* jarak kiri dari gambar */
}

.halamansatu .page2 .teks{
  font-size: 23px; /* ukuran teks utama */
  font-family: Bahnschrift; /* pakai font bahnschrift */
  color: #272343; /* warna teks gelap lembut */
}

/* ===========================================================
   STYLE FORM PEMBELIAN OBAT (HALAMAN 4)
=========================================================== */

#pendaftaran {
  width: 100%; /* full lebar untuk section pendaftaran */
  background-color: #fdf6f6; /* pink putih pastel */
  padding: 40px 0; /* ruang atas bawah */
}

.halaman-admin{
  width: 380px; /* lebar card form */
  padding: 20px; /* ruang dalam card */
  background-color: #ffffff; /* latar putih card */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* bayangan lembut */
  border-radius: 12px; /* sudut membulat */
  margin-top: 20px; /* jarak atas card */
  border: 2px solid #bae8e8; /* border biru pastel */
}

.halaman-admin h2{
  margin-top: 0; /* hilangkan jarak atas */
  margin-bottom: 14px; /* jarak bawah judul */
  font-size: 20px; /* ukuran judul */
  text-align: center; /* teks rata tengah */
  font-weight: bold; /* teks tebal */
  color: #272343; /* warna teks judul */
}

.halaman-admin label{
  display: block; /* tampilkan label di baris sendiri */
  margin-top: 12px; /* jarak atas label */
  font-size: 14px; /* ukuran teks label */
  font-weight: 600; /* ketebalan label */
  color: #272343; /* warna label */
}

.halaman-admin input{
  width: 100%; /* input selebar card */
  padding: 9px 10px; /* ruang dalam input */
  margin-top: 6px; /* jarak atas input */
  border: 1px solid #d0d7de; /* border abu muda */
  border-radius: 6px; /* sudut input bulat */
  font-size: 14px; /* ukuran teks input */
  background: #ffffff; /* latar input putih */
}

.halaman-admin select{
  width: 100%; /* select selebar card */
  padding: 9px 10px; /* ruang dalam select */
  margin-top: 6px; /* jarak atas select */
  border: 1px solid #d0d7de; /* border abu muda */
  border-radius: 6px; /* sudut select bulat */
  font-size: 14px; /* ukuran teks select */
  background: #ffffff; /* latar select putih */
}

.buttons{
  display: flex; /* susun tombol sejajar */
  gap: 10px; /* jarak antar tombol */
  margin-top: 15px; /* jarak atas tombol */
}

.buttons button{
  flex: 1; /* tombol lebarnya sama */
  padding: 10px; /* ruang dalam tombol */
  border: none; /* hapus border default */
  border-radius: 8px; /* sudut tombol membulat */
  background: #a8e6cf; /* hijau pastel */
  color: #272343; /* warna teks tombol */
  cursor: pointer; /* kursor tangan saat hover */
  font-weight: 600; /* teks tombol agak tebal */
  font-size: 14px; /* ukuran teks tombol */
  transition: 0.2s ease; /* efek transisi halus */
}

.buttons button:hover{
  opacity: 0.85; /* sedikit memudar saat hover */
}

.buttons button#btnCetak{
  background: #ffd3b6; /* peach pastel */
  color: #272343; /* warna teks */
}

/* ===== FOOTER SOSMED ===== */
.footer-gad{
  width: 100%; /* lebar full */
  padding: 25px 0; /* jarak atas bawah */
  background: #e3f6f5; /* biru pastel */
  border-top: 2px solid #bae8e8; /* garis soft */
  text-align: center; /* teks rata tengah */
  margin-top: 40px; /* jarak dari section atas */
}

.footer-container{
  width: 100%; /* full */
}

.footer-title{
  font-family: Bahnschrift; /* font seragam */
  font-size: 16px; /* ukuran sedang */
  color: #272343; /* warna teks */
  margin-bottom: 10px; /* jarak bawah */
}

.footer-sosmed{
  display: flex; /* biar icon sejajar */
  justify-content: center; /* tengah */
  gap: 15px; /* jarak antar icon */
  margin-bottom: 15px; /* jarak bawah */
}

.icon-sosmed{
  width: 35px; /* ukuran icon */
  height: 35px; /* tinggi icon */
  transition: 0.2s; /* animasi hover */
}

.icon-sosmed:hover{
  transform: scale(1.1); /* sedikit membesar saat hover */
  opacity: 0.85; /* efek */
}

.footer-nama{
  font-size: 17px; /* text agak besar */
  font-family: Bahnschrift SemiBold; /* tebal */
  color: #272343;
  margin-bottom: 5px;
}

.footer-identitas{
  font-size: 14px; /* lebih kecil */
  font-family: Bahnschrift;
  color: #555; /* warna abu soft */
}


/* BOX STRUK */
.struk-box{
  margin-top: 18px; /* jarak atas box struk */
  background: #e3f6f5; /* biru pastel */
  padding: 12px; /* ruang dalam box */
  border-radius: 8px; /* sudut box membulat */
  border: 1px solid #bae8e8; /* garis tipis biru */
  white-space: pre-wrap; /* jaga format teks struk */
  font-size: 14px; /* ukuran teks struk */
  color: #272343; /* warna teks struk */
}