* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', Arial, sans-serif;
}

/* ------------------- STYLE UNTUK INDEX.HTML ------------------- */
body {
    background-color: #DFF5EC;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.container {
    text-align: center;
    width: 100%;
    max-width: 400px;
}

/* Foto Profil */
.profile-img {
    width: 120px;
    height: 120px;
    background-image: url("images/profil.jpg"); 
    background-size: cover; 
    background-position: center; 
    background-color: #333;
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Teks Index */
h1 {
    font-size: 2rem;
    color: #444444;
    margin-bottom: 8px;
    font-weight: 600;
}

p {
    font-size: 0.9rem;
    color: #2D2D2D;
    margin-bottom: 20px;
    font-weight: 400;
}

/* Tombol Index */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 40px;
}

.btn {
    padding: 15px 20px;
    border-radius: 30px;
    text-decoration: none;
    color: #444444;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-align: center;
    position: relative;
    transition: transform 0.2s ease;
    z-index: 2;
    overflow: hidden;
}

/* Efek Glossy pada Tombol */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
    z-index: 1;
    pointer-events: none;
}

.btn::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 28px;
    z-index: 0;
    pointer-events: none;
}

/* Posisi & Warna Tombol Zig Zag */
.btn-blue {
    background-color: #86ADD6;
    box-shadow: 0 4px 0 #1a79d9;
    align-self: flex-start;
    width: 85%;
}

.btn-yellow {
    background-color: #FFF59D;
    box-shadow: 0 4px 0 #fbc02d;
    align-self: flex-end;
    width: 80%;
}

.btn-pink {
    background-color: #F7A9C4;
    box-shadow: 0 4px 0 #e91e63;
    align-self: flex-start;
    width: 85%;
}

.btn-cyan {
    background-color: #8BE6EE;
    box-shadow: 0 4px 0 #26c6da;
    align-self: flex-end;
    width: 80%;
}

.btn-purple {
    background-color: #D39ADF;
    box-shadow: 0 4px 0 #9c27b0;
    align-self: flex-start;
    width: 90%;
}

/* Efek Hover & Active Index */
.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn:active {
    transform: translateY(2px);
    box-shadow: none;
    filter: brightness(0.95);
}

/* Footer Index */
footer {
    font-size: 0.9rem;
    color: #444444;
    font-weight: 400;
}


/* ------------------- STYLE UNTUK MYBLOG.HTML ------------------- */
/* Reset tampilan body khusus untuk blog */
body.blog-page {
    display: block; /* Hapus flex yang digunakan di index */
    min-height: auto; /* Sesuaikan tinggi */
    padding: 0; /* Hapus padding yang tidak perlu */
background-color: #DFF5EC;
}

/* Navigasi Blog */
.blog-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #DFF5EC; 
    border-bottom: 2px solid #86ADD6;
}

.back-btn {
    text-decoration: none;
    color: #1a79d9;
    font-weight: 600;
    font-size: 0.9rem;
}

.blog-nav h2 {
    color: #444444;
    margin: 0;
}

/* Container Blog */
.blog-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px 40px;
    
}

/* Header Blog */
.blog-header {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background-color: rgba(134, 173, 214, 0.2);
    border-radius: 15px;
}

.blog-header h1 {
    color: #1a79d9;
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.blog-header p {
    color: #444444;
    font-size: 1rem;
    margin-bottom: 0;
}

/* Kartu Artikel */
.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.post-card {
    background-color: rgba(134, 173, 214, 0.15);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #86ADD6;
}


.post-content h3 {
    color: #444444;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.post-date {
    color: #1a79d9;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 10px;
}

.post-excerpt {
    color: #555555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more {
    text-decoration: none;
    color: #1a79d9;
    font-weight: 600;
    font-size: 0.9rem;
}

.read-more:hover {
    color: #0f5aa7;
}

/* Footer Blog */
.blog-footer {
    text-align: center;
    margin-top: 40px;
    color: #444444;
    font-size: 0.9rem;
}
/* Tambahkan di bagian STYLE UNTUK MYBLOG.HTML */
@media screen and (min-width: 768px) {
    .blog-nav {
        margin-top: 20px; /* Tambah jarak atas di desktop */
        border-radius: 0 0 15px 15px; /* Tambah lengkungan bawah agar lebih menarik */
    }
}

/* ------------------- STYLE UNTUK AFFILIATE.HTML ------------------- */
/* Reset tampilan body khusus untuk daftar link */
body.affiliate-page {
    display: block;
    min-height: auto;
    padding: 0;
    background-color: #DFF5EC; /* Sama dengan index */
}

/* Navigasi */
.affiliate-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #DFF5EC;
    border-bottom: 2px solid #FBC02D;
}

/* Container Utama */
.affiliate-container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 0 20px 40px;
    background-color: rgba(255, 245, 157, 0.2);
    
}

/* Header Halaman */
.affiliate-header {
    text-align: center;
    margin: 20px 0;
    padding: 20px 20px;
    background-color: rgba(255, 245, 157, 0.1);
    border-radius: 15px;
}

.affiliate-header h1 {
    color: #6FA4D4; /* Warna bayangan tombol My Shop */
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.affiliate-header h2 {
    color: #444444;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Daftar Link */
.affiliate-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
    margin-top: 0;
}

/* Tombol menggunakan kelas yang sama dengan index (warna-warni) */
.affiliate-links .btn {
    align-self: center; /* Tombol rata tengah */
    width: 90%; /* Lebar konsisten */
}

/* Footer */
.affiliate-footer {
    text-align: center;
    color: #444444;
    font-size: 0.9rem;
}

/* Penyesuaian untuk Desktop */
@media screen and (min-width: 768px) {
    .affiliate-nav {
        margin-top: 20px;
        border-radius: 0 0 15px 15px;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ------------------- STYLE UNTUK GALLERY.HTML ------------------- */
/* Reset tampilan body khusus untuk galeri */
body.gallery-page {
    display: block;
    min-height: auto;
    padding: 0;
    background-color: #DFF5EC; /* Sama dengan halaman utama */
}

/* Navigasi */
.gallery-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: DFF5EC;
    border-bottom: 2px solid #F7A9C4;
}

/* Container Utama */
.gallery-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 20px 40px;
    
    border-radius: 10px;
}

/* Header Halaman */
.gallery-header {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background-color: rgba(247, 169, 196, 0.1);
    border-radius: 15px;
}

.gallery-header h1 {
    color: #e91e63; /* Warna bayangan tombol My Gallery */
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.gallery-header h2 {
    color: #444444;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Grup Foto */
.photo-group {
    margin-bottom: 35px;
    padding: 15px;
    background-color: rgba(247, 169, 196, 0.2);
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0,0.5);

    /* Grup 1: Liburan ke Pantai */
.photo-group:nth-child(1) {
    background-color: rgba(247, 169, 196, 0.15);
}

/* Grup 2: Acara Keluarga */
.photo-group:nth-child(2) {
    background-color: rgba(247, 169, 196, 0.25);
}

/* Grup 3: Kegiatan Hobi */
.photo-group:nth-child(3) {
    background-color: rgba(247, 169, 196, 0.2);
}

    
}

.moment-name {
    color: #e91e63;
    font-size: 1.2rem;
    margin-bottom: 5px;
    text-align: center;
}

.moment-desc {
    color: #444444;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Kontainer Swipe Foto */
.swipe-container {
    width: 100%;
    overflow-x: auto; /* Biar bisa digeser ke kanan-kiri */
    scroll-behavior: smooth; /* Geserannya halus */
    padding-bottom: 10px;
}

.swipe-wrapper {
    display: flex; /* Foto berjajar secara horizontal */
    gap: 15px;
    padding: 0 5px;
}

/* Item Foto */
.photo-item {
    flex: 0 0 auto; /* Foto tidak mengecil/membesar */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Ukuran Foto Landscape & Portrait */
.photo-item.landscape {
    width: 90%; /* Lebar lebih panjang untuk landscape */
    max-width: 450px;
}

.photo-item.portrait {
    width: 60%; /* Lebar lebih sempit untuk portrait */
    max-width: 300px;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Foto tidak terdistorsi */
}

/* Catatan Geser */
.swipe-note {
    color: #666666;
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;
}

/* Footer */
.gallery-footer {
    text-align: center;
    color: #444444;
    font-size: 0.9rem;
}

/* Penyesuaian untuk Desktop */
@media screen and (min-width: 768px) {
    .gallery-nav {
        margin-top: 20px;
        border-radius: 0 0 15px 15px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .photo-item.landscape {
        width: 80%;
    }

    .photo-item.portrait {
        width: 50%;
    }
}

/* ------------------- STYLE UNTUK PORTFOLIO.HTML ------------------- */
/* Reset tampilan body khusus untuk portfolio */
body.portfolio-page {
    display: block;
    min-height: auto;
    padding: 0;
    background-color: #DFF5EC; /* Sama dengan bg index */
}

/* Navigasi */
.portfolio-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #DFF5EC; /* Sama dengan bg index */
    border-bottom: 2px solid #8BE6EE; /* Warna sesuai tombol My Portfolio */
}

/* Container Utama */
.portfolio-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* Header Halaman (H1 & H2) */
.portfolio-header {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background-color: rgba(139, 230, 238, 0.25); /* Warna cyan sesuai tombol My Portfolio */
    border-radius: 15px;
}

.portfolio-header h1 {
    color: #26c6da; /* Warna bayangan tombol My Portfolio */
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.portfolio-header h2 {
    color: #444444;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Grup Proyek */
.project-group {
    margin-bottom: 35px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Warna berbeda per grup proyek */
.project-group:nth-child(1) {
    background-color: rgba(139, 230, 238, 0.15);
}

.project-group:nth-child(2) {
    background-color: rgba(139, 230, 238, 0.25);
}

.project-group:nth-child(3) {
    background-color: rgba(139, 230, 238, 0.2);
}

.project-name {
    color: #26c6da;
    font-size: 1.2rem;
    margin-bottom: 5px;
    text-align: center;
}

.project-desc {
    color: #444444;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Kontainer Swipe Proyek */
.swipe-container {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.swipe-wrapper {
    display: flex;
    gap: 15px;
    padding: 0 5px;
}

/* Item Proyek */
.project-item {
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.project-item.landscape {
    width: 90%;
    max-width: 450px;
}

.project-item.portrait {
    width: 60%;
    max-width: 300px;
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Catatan Geser */
.swipe-note {
    color: #666666;
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;
}

/* Footer */
.portfolio-footer {
    text-align: center;
    color: #444444;
    font-size: 0.9rem;
}

/* Penyesuaian untuk Desktop */
@media screen and (min-width: 768px) {
    .portfolio-nav {
        margin-top: 20px;
        border-radius: 0 0 15px 15px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .project-item.landscape {
        width: 80%;
    }

    .project-item.portrait {
        width: 50%;
    }
}

/* ------------------- STYLE UNTUK CONTACTME.HTML ------------------- */
/* Reset tampilan body khusus untuk contact */
body.contact-page {
    display: block;
    min-height: auto;
    padding: 0;
    background-color: #DFF5EC; /* Sama dengan bg index */
}

/* Navigasi */
.contact-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #DFF5EC; /* Sama dengan bg index */
    border-bottom: 2px solid #D39ADF; /* Warna sesuai tombol Contact Me */
}

/* Container Utama */
.contact-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* Header Halaman (H1 & H2) */
.contact-header {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background-color: rgba(211, 154, 223, 0.25); /* Warna ungu sesuai tombol Contact Me */
    border-radius: 15px;
}

.contact-header h1 {
    color: #9c27b0; /* Warna bayangan tombol Contact Me */
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.contact-header h2 {
    color: #444444;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Daftar Tombol (Model sama persis dengan index) */
.contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 40px;
}

.contact-buttons .btn {
    padding: 15px 20px;
    border-radius: 30px;
    text-decoration: none;
    color: #444444;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-align: center;
    position: relative;
    transition: transform 0.2s ease;
    z-index: 2;
    overflow: hidden;
}

/* Efek Glossy & Warna Tombol Sama dengan Index */
.contact-buttons .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
    z-index: 1;
    pointer-events: none;
}

.contact-buttons .btn::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 28px;
    z-index: 0;
    pointer-events: none;
}

.contact-buttons .btn-blue {
    background-color: #86ADD6;
    box-shadow: 0 4px 0 #1a79d9;
    align-self: flex-start;
    width: 85%;
}

.contact-buttons .btn-yellow {
    background-color: #FFF59D;
    box-shadow: 0 4px 0 #fbc02d;
    align-self: flex-end;
    width: 80%;
}

.contact-buttons .btn-pink {
    background-color: #F7A9C4;
    box-shadow: 0 4px 0 #e91e63;
    align-self: flex-start;
    width: 85%;
}

.contact-buttons .btn-cyan {
    background-color: #8BE6EE;
    box-shadow: 0 4px 0 #26c6da;
    align-self: flex-end;
    width: 80%;
}

.contact-buttons .btn-purple {
    background-color: #D39ADF;
    box-shadow: 0 4px 0 #9c27b0;
    align-self: flex-start;
    width: 90%;
}

/* Efek Hover & Active Sama dengan Index */
.contact-buttons .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.contact-buttons .btn:active {
    transform: translateY(2px);
    box-shadow: none;
    filter: brightness(0.95);
}

/* Footer */
.contact-footer {
    text-align: center;
    color: #444444;
    font-size: 0.9rem;
}

/* Penyesuaian untuk Desktop */
@media screen and (min-width: 768px) {
    .contact-nav {
        margin-top: 20px;
        border-radius: 0 0 15px 15px;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ------------------- STYLE UNTUK TAS.HTML ------------------- */
/* Reset tampilan body khusus untuk produk */
body.produk-page {
    display: block;
    min-height: auto;
    padding: 0;
    background-color: #DFF5EC; /* Warna utama halaman */
}

/* Navigasi */
.produk-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #DFF5EC; /* Sama dengan bg utama */
    border-bottom: 2px solid #86ADD6; /* Warna biru muda tema */
}

/* Container Utama */
.produk-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* Header Halaman (H1 & H2) */
.produk-header {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background-color: #E0F2F7; /* Warna biru muda tema: #E0F2F7 */
    border-radius: 15px;
}

.produk-header h1 {
    color: #0288D1; /* Warna biru tua tema: #0288D1 */
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.produk-header h2 {
    color: #424242; /* Warna abu tua: #424242 */
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Grup Kategori Produk */
.produk-group {
    margin-bottom: 35px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Judul & Deskripsi Kategori */
.kategori-name {
    color: #01579B; /* Warna biru gelap tema: #01579B */
    font-size: 1.2rem;
    margin-bottom: 5px;
    text-align: center;
}

.kategori-desc {
    color: #424242; /* Warna abu tua: #424242 */
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Kontainer Swipe Produk */
.swipe-container {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.swipe-wrapper {
    display: flex;
    gap: 20px;
    padding: 0 5px;
}

/* Card Produk */
.produk-card {
    flex: 0 0 auto;
    width: 280px; /* Lebar tetap card produk */
    background-color: #FFFFFF; /* Warna putih: #FFFFFF */
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.produk-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.produk-card h4 {
    color: #212121; /* Warna hitam tua: #212121 */
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.produk-card p {
    color: #616161; /* Warna abu sedang: #616161 */
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Tombol Beli Bersusun */
.beli-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-beli {
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.btn-beli.shopee {
    background-color: #FF4757; /* Warna Shopee: #FF4757 */
    color: #FFFFFF;
}

.btn-beli.tiktok {
    background-color: #000000; /* Warna TikTok: #000000 */
    color: #FFFFFF;
}

.btn-beli:hover {
    opacity: 0.9;
}

/* Catatan Geser */
.swipe-note {
    color: #616161; /* Warna abu sedang: #616161 */
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;
}

/* Footer */
.produk-footer {
    text-align: center;
    color: #424242; /* Warna abu tua: #424242 */
    font-size: 0.9rem;
}

/* Penyesuaian untuk Desktop */
@media screen and (min-width: 768px) {
    .produk-nav {
        margin-top: 20px;
        border-radius: 0 0 15px 15px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .produk-card {
        width: 300px;
    }
}

/* ------------------- STYLE UNTUK KAOS.HTML ------------------- */
/* Reset tampilan body khusus untuk produk */
body.kaos-page {
    display: block;
    min-height: auto;
    padding: 0;
    background-color: #DFF5EC; /* Warna utama halaman */
}

/* Navigasi */
.kaos-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #DFF5EC; /* Sama dengan bg utama */
    border-bottom: 2px solid #86ADD6; /* Warna biru muda tema */
}

/* Container Utama */
.kaos-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* Header Halaman (H1 & H2) */
.kaos-header {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background-color: #fffacd; /* Warna biru muda tema: #E0F2F7 */
    border-radius: 15px;
}

.kaos-header h1 {
    color: #0288D1; /* Warna biru tua tema: #0288D1 */
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.kaos-header h2 {
    color: #424242; /* Warna abu tua: #424242 */
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Grup Kategori Produk */
.kaos-group {
    margin-bottom: 35px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Judul & Deskripsi Kategori */
.kategori-name {
    color: #01579B; /* Warna biru gelap tema: #01579B */
    font-size: 1.2rem;
    margin-bottom: 5px;
    text-align: center;
}

.kategori-desc {
    color: #424242; /* Warna abu tua: #424242 */
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Kontainer Swipe Produk */
.swipe-container {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.swipe-wrapper {
    display: flex;
    gap: 20px;
    padding: 0 5px;
}

/* Card Produk */
.kaos-card {
    flex: 0 0 auto;
    width: 280px; /* Lebar tetap card produk */
    background-color: #FFFFFF; /* Warna putih: #FFFFFF */
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.kaos-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.kaos-card h4 {
    color: #212121; /* Warna hitam tua: #212121 */
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.kaos-card p {
    color: #616161; /* Warna abu sedang: #616161 */
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Tombol Beli Bersusun */
.beli-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-beli {
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.btn-beli.shopee {
    background-color: #FF4757; /* Warna Shopee: #FF4757 */
    color: #FFFFFF;
}

.btn-beli.tiktok {
    background-color: #000000; /* Warna TikTok: #000000 */
    color: #FFFFFF;
}

.btn-beli:hover {
    opacity: 0.9;
}

/* Catatan Geser */
.swipe-note {
    color: #616161; /* Warna abu sedang: #616161 */
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;
}

/* Footer */
.kaos-footer {
    text-align: center;
    color: #424242; /* Warna abu tua: #424242 */
    font-size: 0.9rem;
}

/* Penyesuaian untuk Desktop */
@media screen and (min-width: 768px) {
    .kaos-nav {
        margin-top: 20px;
        border-radius: 0 0 15px 15px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .kaos-card {
        width: 300px;
    }
}