/* ==============================================
   CATATAN PENTING UNTUK GANTI WARNA & UKURAN
   ==============================================
   1. BACKGROUND HALAMAN
   - Warna background: ubah nilai di `background-color` pada body
   - Jika mau pakai gambar background: ganti jadi `background-image: url('nama-file-gambar.jpg');`
     dan tambahkan `background-size: cover;` agar pas dengan layar

   2. BINGKAI FOTO PROFIL
   - Warna border foto: ubah nilai `border-color` pada `.profile-img`
   - Ukuran border foto: ubah nilai `border-width`
   - Bentuk foto (sudut melengkung): ubah nilai `border-radius` (nilai 50% buat lingkaran)

   3. KOTAK LINK
   - Warna background kotak: ubah nilai `background-color` pada `.link-card`
   - Warna border kotak: ubah nilai `border-color` pada `.link-card`
   - Ukuran border kotak: ubah nilai `border-width`
   - Bentuk sudut kotak: ubah nilai `border-radius`
   - Warna teks di kotak: ubah nilai `color` pada `.link-card`
   - Warna saat di-klik/hover: ubah nilai `background-color` dan `border-color` pada `.link-card:hover`

   4. UKURAN FONT
   - Ukuran nama profil: ubah nilai `font-size` pada `.profile-name`
   - Ukuran deskripsi profil: ubah nilai `font-size` pada `.profile-desc`
   - Ukuran teks di kotak link: ubah nilai `font-size` pada `.link-card`
   - Ukuran teks footer: ubah nilai `font-size` pada `.footer p`

   5. UKURAN KOTAK LINK
   - Lebar kotak: ubah nilai `width` pada `.link-card` (bisa pakai % atau px)
   - Tinggi kotak: ubah nilai `padding` (nilai atas/bawah menentukan tinggi)
   ============================================== */


/* Reset Default Style */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* BACKGROUND HALAMAN */
body {
    background-color: #ffe6f2; /* Warna pink muda (ganti sesuai keinginan) */
    /* Jika mau pakai gambar background:
    background-image: url('bg-cute.jpg');
    background-size: cover;
    background-position: center;
    */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* Container Utama */
.container {
    width: 100%;
    max-width: 400px; /* Lebar maksimal halaman agar tidak terlalu lebar di layar besar */
    text-align: center;
}

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

/* FOTO PROFIL */
.profile-img {
    width: 150px; /* Ukuran lebar foto */
    height: 150px; /* Ukuran tinggi foto */
    border: 4px solid #ff99cc; /* Warna border foto (pink lebih tua) */
    border-radius: 50%; /* Buat foto jadi lingkaran */
    object-fit: cover;
    margin-bottom: 15px;
}

/* NAMA PROFIL */
.profile-name {
    font-size: 24px; /* Ukuran font nama */
    color: #333;
    margin-bottom: 5px;
}

/* DESKRIPSI PROFIL */
.profile-desc {
    font-size: 16px; /* Ukuran font deskripsi */
    color: #666;
}

/* Link Section */
.links {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antar kotak link */
    padding: 0 20px;
}

/* KOTAK LINK */
.link-card {
    width: 100%; /* Lebar kotak link (100% dari container) */
    padding: 15px 20px; /* Tinggi kotak ditentukan oleh padding atas/bawah */
    background-color: #fff; /* Warna background kotak */
    border: 2px solid #ff99cc; /* Warna border kotak */
    border-radius: 25px; /* Sudut melengkung */
    color: #ff66b3; /* Warna teks link */
    font-size: 18px; /* Ukuran font teks link */
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara ikon dan teks */
    transition: all 0.3s ease; /* Efek transisi saat hover */
}

/* Efek saat mengarahkan kursor ke kotak link */
.link-card:hover {
    background-color: #ff99cc; /* Warna background saat hover */
    border-color: #ff66b3; /* Warna border saat hover */
    color: #fff; /* Warna teks saat hover */
}

/* Footer */
.footer {
    margin-top: 30px;
}

.footer p {
    font-size: 14px; /* Ukuran font footer */
    color: #999;
}
/* ==============================================
   CATATAN UNTUK BLOG PAGE
   ==============================================
   1. TOMBOL KEMBALI KE HOME
   - Warna background: ubah `background-color` pada `.back-btn`
   - Warna border: ubah `border-color` pada `.back-btn`
   - Ukuran font: ubah `font-size` pada `.back-btn`
   - Efek hover: ubah nilai di `.back-btn:hover`

   2. JUDUL & SUB JUDUL BLOG
   - Ukuran font judul: ubah `font-size` pada `.blog-title`
   - Warna judul: ubah `color` pada `.blog-title`
   - Ukuran font sub judul: ubah `font-size` pada `.blog-subtitle`
   - Warna sub judul: ubah `color` pada `.blog-subtitle`

   3. KONTEN BLOG
   - Ukuran font heading konten: ubah `font-size` pada `.content-heading`
   - Warna heading konten: ubah `color` pada `.content-heading`
   - Ukuran font teks konten: ubah `font-size` pada `.content-text`
   - Warna teks konten: ubah `color` pada `.content-text`
   - Warna ikon di list: ubah `color` pada `.content-list i`
   ============================================== */


/* Container Khusus Blog */
.blog-container {
    padding: 20px 25px;
}

/* Tombol Kembali ke Home */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: #fff; /* Warna background tombol */
    border: 2px solid #ff99cc; /* Warna border tombol */
    border-radius: 20px; /* Sudut melengkung */
    color: #ff66b3; /* Warna teks tombol */
    font-size: 16px; /* Ukuran font tombol */
    text-decoration: none;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.back-btn:hover {
    background-color: #ff99cc; /* Warna background saat hover */
    border-color: #ff66b3; /* Warna border saat hover */
    color: #fff; /* Warna teks saat hover */
}

/* Header Blog */
.blog-header {
    margin-bottom: 30px;
}

.blog-title {
    font-size: 28px; /* Ukuran font judul blog */
    color: #ff66b3; /* Warna judul blog */
    margin-bottom: 8px;
}

.blog-subtitle {
    font-size: 18px; /* Ukuran font sub judul */
    color: #666; /* Warna sub judul */
}

/* Konten Blog */
.blog-content {
    text-align: left;
    background-color: rgba(255, 255, 255, 0.8); /* Background konten (transparan putih) */
    padding: 25px;
    border-radius: 20px; /* Sudut melengkung konten */
    border: 1px solid #ffccdd; /* Border konten */
    margin-bottom: 30px;
}

.content-heading {
    font-size: 20px; /* Ukuran font heading konten */
    color: #ff66b3; /* Warna heading konten */
    margin-top: 20px;
    margin-bottom: 10px;
}

.content-heading:first-child {
    margin-top: 0;
}

.content-text {
    font-size: 16px; /* Ukuran font teks konten */
    color: #333; /* Warna teks konten */
    line-height: 1.6;
    margin-bottom: 15px;
}

.content-list {
    font-size: 16px; /* Ukuran font list */
    color: #333; /* Warna teks list */
    padding-left: 25px;
    margin-bottom: 15px;
}

.content-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.content-list i {
    color: #ff99cc; /* Warna ikon di list */
}

/* ==============================================
   CATATAN UNTUK HALAMAN AFFILIATE
   ==============================================
   1. JUDUL & SUB JUDUL
   - Ukuran font judul: ubah `font-size` pada `.affiliate-title`
   - Warna judul: ubah `color` pada `.affiliate-title`
   - Ukuran font sub judul: ubah `font-size` pada `.affiliate-subtitle`
   - Warna sub judul: ubah `color` pada `.affiliate-subtitle`

   2. TOMBOL NAVIGASI
   - Menggunakan gaya yang sama dengan halaman blog, jadi settingnya sama seperti `.back-btn`

   3. KOTAK LINK
   - Menggunakan gaya yang sama dengan link tree utama, jadi settingnya sama seperti `.link-card`
   ============================================== */


/* Container Khusus Halaman Affiliate */
.affiliate-container {
    padding: 20px 25px;
}

/* Header Halaman Affiliate */
.affiliate-header {
    margin-bottom: 30px;
    text-align: center;
}

.affiliate-title {
    font-size: 26px; /* Ukuran font judul halaman */
    color: #ff66b3; /* Warna judul */
    margin-bottom: 8px;
}

.affiliate-subtitle {
    font-size: 16px; /* Ukuran font sub judul */
    color: #666; /* Warna sub judul */
}