/* =======================================================
   CSS KHUSUS DESKRIPSI PRODUK (deskripsi.css)
   VERSI SUPER RESPONSIF
   ======================================================= */

/* 1. Pengaman Global: Mencegah elemen keluar dari batas layar (overflow) */
.product-section, .product-section * {
    box-sizing: border-box;
}

/* 2. Pembungkus Utama (Card Style) */
.product-section {
    background-color: #ffffff;
    width: 100%;             /* KUNCI: Memaksa mengambil lebar penuh dari ruang yang tersedia */
    max-width: 1200px;       /* KUNCI: Batas maksimal di layar PC yang lebar */
    margin: 0 auto 20px auto; /* Otomatis ke tengah layar */
    padding: 25px 30px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 3. Gaya Judul "Deskripsi Produk" */
.section-heading {
    background-color: #fafafa; 
    padding: 14px 20px;
    font-size: 17px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 20px 0;
    text-transform: capitalize;
    border-radius: 4px;
    border-left: 4px solid #ee4d2d; /* Aksen merah */
}

/* 4. Gaya Teks Konten (Teks Database) */
.desc-content {
    font-size: 14px;
    color: #333333;
    line-height: 1.8; 
    padding: 0 5px;

    /* Kunci agar teks 'Enter' dari database rapi */
    white-space: pre-wrap; 
    
    /* KUNCI RESPONSIF TEKS: Memaksa kata atau link panjang turun ke bawah (tidak tembus layar) */
    word-wrap: break-word; 
    overflow-wrap: break-word;
}

/* =======================================================
   5. RESPONSIVE DESIGN (Media Queries)
   ======================================================= */

/* Untuk Layar Tablet / Layar Menengah (di bawah 992px) */
@media (max-width: 992px) {
    .product-section {
        width: 96%; /* Sisakan jarak 2% di kiri & kanan layar */
        padding: 20px;
    }
}

/* Untuk Layar Handphone (di bawah 576px) */
@media (max-width: 576px) {
    .product-section {
        width: 100%; /* Lebar penuh tanpa celah di HP */
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 0; /* Dibuat kotak flat tanpa lengkungan (Ala desain Shopee/Tokped di HP) */
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        box-shadow: none; /* Hilangkan bayangan di HP agar lebih ringan */
    }

    .section-heading {
        font-size: 15px;
        padding: 10px 15px;
        margin-bottom: 15px;
    }

    .desc-content {
        font-size: 13px; /* Ukuran font dikecilkan sedikit untuk layar HP */
        line-height: 1.6;
        padding: 0; /* Menghapus padding teks agar ruang HP termanfaatkan maksimal */
    }
}