/* Custom styles to override or extend Tailwind, and for responsiveness */
html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

body {
    font-family: 'Inter', sans-serif; /* Menggunakan font Inter untuk kesan modern */
    background: linear-gradient(to bottom right, #e6ffe6, #f0fdf0); /* Background gradasi hijau lembut */
    color: #333;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Mengubah center menjadi flex-start agar konten tidak selalu di tengah vertikal */
    min-height: 100vh;
    padding: 15px; /* Padding body sedikit dikurangi */
    box-sizing: border-box;
    font-size: 14px; /* FONT SIZE BODY DIKECILKAN KE 14px (1rem = 14px) */
    -webkit-font-smoothing: antialiased; /* Smoother font rendering on WebKit */
    -moz-osx-font-smoothing: grayscale; /* Smoother font rendering on Firefox for macOS */
}

/* Custom Scrollbar Styling (WebKit browsers only - Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For Firefox */
/* scrollbar-width: thin; */
/* scrollbar-color: #888 #f1f1f1; */

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1600px;
    background-color: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

@media (min-width: 992px) {
    .container {
        flex-direction: row;
        min-height: 75vh;
    }
}

.sidebar-left {
    width: 100%;
    padding: 1.2rem 0.8rem;
    background: linear-gradient(180deg, #218838 0%, #1a6f2c 100%);
    color: #f8f9fa;
    border-bottom-left-radius: 1.2rem;
    border-top-left-radius: 1.2rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 992px) {
    .sidebar-left {
        width: 200px;
        flex-shrink: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 1.2rem;
        border-top-left-radius: 1.2rem;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

/* Konten utama */
.main-content {
    flex-grow: 1;
    overflow-y: auto;
    height: 100vh;
}

.sidebar-left h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    text-align: center;
}

.sidebar-left ul {
    list-style: none;
    padding: 0;
}

.sidebar-left ul li {
    margin-bottom: 0.6rem;
}

.sidebar-left ul li a {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.9rem;
    color: #e6ffe6;
    text-decoration: none;
    border-radius: 0.7rem;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    font-size: 0.75rem;
}

.sidebar-left ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-in-out;
    z-index: 0;
}

.sidebar-left ul li a:hover::before {
    left: 0;
}

.sidebar-left ul li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    transform: translateX(0);
}

.sidebar-left ul li a i {
    margin-right: 0.6rem;
    font-size: 1rem;
    z-index: 1;
}

/* Submenu styles */
.submenu {
    display: none;
    list-style: none;
    padding-left: 1rem;
    margin-top: 0.3rem;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.submenu.active {
    display: block;
}

.submenu li a {
    padding: 0.4rem 0.7rem;
    font-size: 0.7rem;
    color: #c8e6c9;
    border-radius: 0.5rem;
}

.submenu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateX(0);
}

.main-content {
    flex-grow: 1;
    padding: 1.5rem;
    background-color: #fff;
    border-bottom-right-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
}

@media (max-width: 991px) {
    .main-content {
        border-top-right-radius: 0;
        border-bottom-left-radius: 1.2rem;
    }
}

.main-content h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #218838;
    margin-bottom: 0.9rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #e0ffe0;
    text-align: center;
}

.main-product-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #218838;
    margin-top: 0.9rem;
    margin-bottom: 0.6rem;
}

.product-description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 0.9rem;
}

.update-info {
    font-size: 0.7rem;
    color: #7f8c8d;
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e9f9e9;
    line-height: 1.4;
    display: flex;
    justify-content: flex-start;
    gap: 0.8rem;
    align-items: center;
}

.update-info p {
    margin: 0;
    white-space: nowrap;
}

---
### Desain Tabs yang Minimalis dan Menarik

```css
/* ==================== OPTIMIZED TABS STYLING ==================== */
.tab-container {
    border: 1px solid #d4ecd4;
    border-radius: 0.6rem;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    background-color: #f8fdf8;
    border-bottom: 1px solid #d4ecd4;
    padding: 0.15rem;
    gap: 0.15rem;
    justify-content: flex-start; /* Changed from center to left-align */
}

.tab-button {
    flex-grow: 1;
    min-width: 80px; /* Increased minimum width */
    white-space: nowrap;
    padding: 0.6rem 0.8rem; /* Increased padding for better touch target */
    background-color: #f0f7f0;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem; /* Slightly larger font */
    font-weight: 600;
    color: #2a5932; /* Darker green for better contrast */
    border-radius: 0.3rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tab-button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px; /* Thicker underline */
    background-color: #218838;
    transition: all 0.2s ease;
    z-index: 0;
}

.tab-button.active {
    color: #fff; /* White text for active tab */
    background-color: #218838; /* Solid green background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tab-button.active::before {
    width: 100%; /* Full width underline for active */
    background-color: #1a6f2c;
}

.tab-button:hover:not(.active) {
    background-color: #e0f0e0; /* Lighter hover state */
    color: #218838;
}

.tab-button:hover::before {
    width: 60%;
}

.tab-content {
    display: none;
    padding: 1.2rem; /* Slightly more padding */
    line-height: 1.5;
    color: #444;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-content.active {
    display: block;
}

.tab-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem; /* Slightly larger */
    font-weight: 600;
    color: #28a745;
    margin-bottom: 0.8rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e0ffe0;
}

/* Nested tab styles - Improved contrast */
.nested-tab .tabs {
    background-color: #f5f9f5;
    border-top: 1px solid #e8e8e8;
    padding: 0.1rem;
    gap: 0.1rem;
}

.nested-tab .tab-button {
    font-size: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.25rem;
    color: #3a6b3a; /* Darker text */
    background-color: #e8f3e8; /* Light background */
}

.nested-tab .tab-button.active {
    background-color: #28a745; /* Brighter green */
    color: #fff;
}

.nested-tab .tab-button:hover:not(.active) {
    background-color: #d4e8d4;
    color: #218838;
}

.nested-tab .tab-content {
    padding: 1rem;
    animation: fadeIn 0.25s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tabs {
        gap: 0.1rem;
        padding: 0.1rem;
    }
    
    .tab-button {
        font-size: 0.75rem;
        padding: 0.5rem 0.6rem;
        min-width: 70px;
    }
    
    .tab-content {
        padding: 1rem;
    }
    
    .nested-tab .tab-button {
        font-size: 0.7rem;
        padding: 0.4rem 0.5rem;
    }
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .tabs {
        gap: 0.1rem;
        padding: 0.1rem;
    }
    
    .tab-button {
        font-size: 0.65rem;
        padding: 0.3rem 0.5rem;
    }
    
    .tab-content {
        padding: 0.8rem;
    }
    
    .nested-tab .tab-button {
        font-size: 0.6rem;
        padding: 0.25rem 0.4rem;
    }
}

.tab-content p {
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
}

.tab-content ul {
    list-style: disc;
    padding-left: 18px;
    margin-bottom: 0.7rem;
}

.tab-content ul li {
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

---
### Efek Hover pada Tabel dan Perapian Tabel
/* ==================== EXTRA COMPACT TABLES ==================== */

.tab-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1.2rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #c0c0c0; /* Garis luar tabel sedikit lebih jelas */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
}/* ==================== EXTRA COMPACT TABLES ==================== */

.tab-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    /* REVISI: Mengurangi margin atas dan bawah tabel */
    margin: 0.5rem 0; /* Dari 1.2rem 0 menjadi 0.5rem 0 */
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #c0c0c0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* REVISI: Mengurangi ukuran font tabel utama */
    font-size: 0.8rem; /* Dari 0.9rem menjadi 0.8rem */
    line-height: 1.4; /* Sedikit mengurangi line-height agar lebih rapat */
    color: #333;
}

.tab-content th,
.tab-content td {
    /* REVISI: Mengurangi padding di dalam sel (th dan td) */
    padding: 0.5rem 0.8rem; /* Dari 0.75rem 1.2rem menjadi 0.5rem 0.8rem */
    border: 1px solid #d0d0d0;
    text-align: left;
}

.tab-content th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-color: #3f51b5;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Hover effect for table rows */
.tab-content tbody tr:hover {
    background-color: #e8eaf6;
    cursor: pointer;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

/* Zebra striping for better readability */
.tab-content tbody tr:nth-child(even) {
    background-color: #f7f8fc;
}

/* Even more compact for nested tabs */
.nested-tab .tab-content table {
    /* REVISI: Mengurangi ukuran font tabel di dalam nested tabs */
    font-size: 0.65rem; /* Dari 0.7rem menjadi 0.65rem */
    /* REVISI: Mengurangi margin atas dan bawah untuk tabel bersarang */
    margin: 0.5rem 0; /* Dari 0.8rem 0 menjadi 0.5rem 0 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nested-tab .tab-content th,
.nested-tab .tab-content td {
    /* REVISI: Mengurangi padding di dalam sel tabel bersarang */
    padding: 0.4rem 0.6rem; /* Dari 0.5rem 0.8rem menjadi 0.4rem 0.6rem */
}

.ont-stb-check {
    text-align: center;
}

.pos-low-market, .pos-reguler {
    text-align: left;
}

.coverage-table td:first-child {
    text-align: left;
}

.tab-content table tbody tr td:last-child {
    white-space: normal;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* REVISI: Mengurangi margin atas pada table-responsive */
    margin-top: 0.4rem; /* Dari 0.6rem menjadi 0.4rem */
}

.image-gallery img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease-in-out;
}

.image-gallery img:hover {
    transform: scale(1.01);
}

.coverage-table-container {
    margin-top: 1rem;
}

.coverage-table {
    border: 1px solid #a0a0a0;
}

.coverage-table th {
    background-color: #218838;
    color: #fff;
}

.coverage-table td {
    font-size: 0.7rem;
    padding: 0.5rem 0.8rem;
}

.coverage-description {
    font-size: 0.8rem;
    margin-bottom: 0.7rem;
}

.iframe-container {
    position: relative;
    width: 100%;
    height: 600px;
    max-width: 100%;
    margin: 1.5rem 0;
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 0.8rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ========================================================= */
/* --- NEW STYLES FOR PANDUAN_DEVICE-ONT-TAB ONLY --- */
/* ========================================================= */
#panduan_device-ont-tab .tutorial-wrapper {
    font-family: 'Poppins', sans-serif;
    background-color: #f8fbfd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 12px 18px;
    margin-bottom: 10px;
    color: #333;
    transition: all 0.2s ease;
    line-height: 1.4;
    font-size: 0.9em;
}

#panduan_device-ont-tab .tutorial-main-title {
    font-size: 1.6em;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    position: relative;
}

#panduan_device-ont-tab .tutorial-main-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background-color: #007bff;
    border-radius: 2px;
}

#panduan_device-ont-tab .tutorial-container h1 {
    font-size: 2em;
    color: #007bff;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
    transition: color 0.3s ease;
}

#panduan_device-ont-tab .tutorial-container h1:hover {
    color: #0056b3;
}

#panduan_device-ont-tab .step-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    padding: 10px;
}

#panduan_device-ont-tab .step-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#panduan_device-ont-tab .step-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background-color: #f0f8ff;
    border-bottom: 1px solid #d0e0f0;
}

#panduan_device-ont-tab .step-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 12px;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

#panduan_device-ont-tab .step-number:hover {
    background-color: #0056b3;
}

#panduan_device-ont-tab .step-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #2c3e50;
}

#panduan_device-ont-tab .step-content {
    padding: 8px 10px;
    line-height: 1.6;
}

#panduan_device-ont-tab .step-content p {
    margin-top: 0;
    margin-bottom: 8px;
}

#panduan_device-ont-tab .step-content strong {
    color: #007bff;
}

#panduan_device-ont-tab .credentials {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    padding: 4px 8px;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    color: #495057;
    margin-top: 5px;
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-break: break-all;
}

#panduan_device-ont-tab .menu-path {
    background-color: #f0f2f5;
    border: 1px solid #dcdfe4;
    padding: 8px 12px;
    border-radius: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #34495e;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    transition: background-color 0.3s ease;
}

#panduan_device-ont-tab .menu-path:hover {
    background-color: #e9efff;
}

#panduan_device-ont-tab .menu-path i {
    margin: 0 6px;
    color: #007bff;
}

#panduan_device-ont-tab .wifi-band-title {
    font-weight: bold;
    color: #2c3e50;
    margin-top: 12px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

#panduan_device-ont-tab .wifi-type {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 8px;
    color: #fff;
}

#panduan_device-ont-tab .wifi-2g {
    background-color: #28a745;
}

#panduan_device-ont-tab .wifi-5g {
    background-color: #ffc107;
    color: #333;
}

#panduan_device-ont-tab .step-content ul {
    list-style-type: disc;
    margin: 0;
    padding-left: 20px;
    margin-bottom: 8px;
}

#panduan_device-ont-tab .step-content ul li {
    margin-bottom: 3px;
}

#panduan_device-ont-tab .note-box {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-left: 5px solid #ffc107;
    border-radius: 5px;
    padding: 6px 8px;
    margin-top: 15px;
    color: #856404;
    display: flex;
    align-items: flex-start;
    font-size: 0.8em;
    transition: box-shadow 0.3s ease;
}

#panduan_device-ont-tab .note-box:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#panduan_device-ont-tab .note-box i {
    margin-right: 8px;
    font-size: 1.1em;
    color: #ffc107;
    flex-shrink: 0;
}

#panduan_device-ont-tab .note-box strong {
    color: #856404;
}

#panduan_device-ont-tab .help-text {
    font-size: 0.85em;
    color: #6c757d;
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #e0e0e0;
}

/* Responsive adjustments for smaller screens (scoped to #panduan_device-ont-tab) */
@media (max-width: 768px) {
    #panduan_device-ont-tab .tutorial-wrapper {
        padding: 15px;
    }
    #panduan_device-ont-tab .tutorial-main-title {
        font-size: 1.4em;
        margin-bottom: 15px;
        padding-bottom: 8px;
    }
    #panduan_device-ont-tab .tutorial-container h1 {
        font-size: 1.4em;
        margin-bottom: 15px;
    }
    #panduan_device-ont-tab .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.9em;
        margin-right: 8px;
    }
    #panduan_device-ont-tab .step-title {
        font-size: 1em;
    }
    #panduan_device-ont-tab .step-content {
        padding: 10px;
    }
    #panduan_device-ont-tab .credentials,
    #panduan_device-ont-tab .menu-path {
        padding: 6px 8px;
        font-size: 0.85em;
        margin-top: 4px;
        margin-bottom: 6px;
    }
    #panduan_device-ont-tab .wifi-type {
        font-size: 0.65em;
        padding: 1px 5px;
    }
    #panduan_device-ont-tab .note-box {
        padding: 8px;
        font-size: 0.85em;
    }
    #panduan_device-ont-tab .note-box i {
        font-size: 0.9em;
    }
    #panduan_device-ont-tab .help-text {
        font-size: 0.8em;
        margin-top: 15px;
        padding-top: 8px;
    }
}
@media (max-width: 480px) {
    #panduan_device-ont-tab .tutorial-wrapper {
        padding: 10px;
    }
    #panduan_device-ont-tab .tutorial-main-title {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    #panduan_device-ont-tab .tutorial-container h1 {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    #panduan_device-ont-tab .step-number {
        width: 25px;
        height: 25px;
        font-size: 0.8em;
    }
    #panduan_device-ont-tab .step-title {
        font-size: 0.9em;
    }
    #panduan_device-ont-tab .step-content {
        padding: 10px;
    }
    #panduan_device-ont-tab .credentials,
    #panduan_device-ont-tab .menu-path {
        padding: 5px 6px;
        font-size: 0.8em;
        margin-top: 3px;
        margin-bottom: 5px;
    }
    #panduan_device-ont-tab .note-box {
        padding: 6px;
        font-size: 0.8em;
    }
    #panduan_device-ont-tab .help-text {
        font-size: 0.75em;
    }
}
/* ========================================================= */
/* --- NEW STYLES FOR PANDUAN SETTING CONTENT (SCOPED) --- */
/* ========================================================= */
#panduan_device-ont-tab .config-section {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 25px;
    margin-bottom: 30px;
    transition: box-shadow 0.3s ease;
}

#panduan_device-ont-tab .config-section:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

#panduan_device-ont-tab .section-title {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
    position: relative;
}

#panduan_device-ont-tab .section-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background-color: #3498db;
    border-radius: 2px;
}

#panduan_device-ont-tab .step {
    margin-bottom: 15px; /* Mengurangi jarak bawah antar step */
    padding-bottom: 10px; /* Mengurangi padding bawah */
    border-bottom: 1px dashed #ddd;
    display: flex;
    align-items: flex-start;
}

#panduan_device-ont-tab .step:last-child {
    border-bottom: none;
}

#panduan_device-ont-tab .step-number {
    background-color: #3498db;
    color: white;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-right: 15px;
    font-weight: bold;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

#panduan_device-ont-tab .step-number:hover {
    background-color: #2980b9;
}

#panduan_device-ont-tab .step-content {
    flex-grow: 1;
}

#panduan_device-ont-tab .step-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #2c3e50;
    margin-bottom: 8px;
}

#panduan_device-ont-tab .highlight-box {
    background-color: #f8f9fa;
    border-left: 4px solid #3498db;
    padding: 12px 15px;
    margin: 12px 0;
    border-radius: 0 4px 4px 0;
    transition: box-shadow 0.3s ease;
}

#panduan_device-ont-tab .highlight-box:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#panduan_device-ont-tab .menu-path.setting-guide {
    font-weight: bold;
    color: #e74c3c;
}


/*ZTE Setting*/

.zte-guide-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
}

.zte-config-block {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.config-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.config-header i {
    margin-right: 10px;
    font-size: 20px;
}

.config-header h3 {
    margin: 0;
    font-size: 18px;
}

.config-badge {
    margin-left: auto;
    background: #e3f2fd;
    color: #1976d2;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.zte-5g .config-header {
    background: #f5f9ff;
}

.zte-5g .config-badge {
    background: #d1e7ff;
}

.zte-standard .config-header {
    background: #fff8f5;
}

.zte-standard .config-badge {
    background: #ffddd3;
    color: #e74c3c;
}

.config-steps {
    padding: 15px;
}

.step {
    display: flex;
    /* REVISI: Mengurangi jarak antar setiap langkah */
    margin-bottom: 10px; /* Anda bisa coba 5px atau 0px untuk lebih rapat lagi */
}

.step:last-child {
    /* Menghilangkan margin bawah pada langkah terakhir */
    margin-bottom: 0;
}

.step-number {
    width: 30px;
    height: 30px;
    background: #3498db;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content {
    flex-grow: 1;
}

.step-content h4 {
    /* REVISI: Mengurangi margin bawah judul di dalam konten langkah */
    margin: 0 0 5px 0; /* Sebelumnya 8px */
    font-size: 16px;
}

.code {
    background: #f5f7fa;
    padding: 8px 12px;
    border-radius: 5px;
    font-family: monospace;
    margin: 8px 0;
    border-left: 3px solid #3498db;
}

.credentials {
   background: #2c3e50;
    color: white;
    padding: 6px 10px;  /* Diperkecil dari 10px 12px */
    border-radius: 6px;
    margin: 6px 0;      /* Diperkecil dari 8px 0 */
    font-family: monospace;
    font-size: 15px;    /* Diperkecil dari 14px */
    display: inline-block;
}

.credentials span {
    font-weight: 600;
    color: #2c3e50;
    display: inline-block; /* Pertahankan ini agar span bisa diatur lebarnya jika diperlukan, meskipun tidak lagi 80px */
    /* REVISI UTAMA: Hapus atau ubah width tetap ini */
    /* width: 80px; <-- HAPUS BARIS INI */
    /* Atau, jika Anda hanya ingin sedikit ruang tambahan untuk label, gunakan: */
    min-width: fit-content; /* Ini akan membuat lebar minimal sesuai kontennya */
    margin-right: 5px; /* Tambahkan sedikit jarak antara label dan nilai */
}

.menu-path {
    background: #f0f7ff;
    padding: 8px 12px;
    border-radius: 5px;
    margin: 10px 0;
    color: #2980b9;
    font-weight: 500;
}

.ssid-option {
    margin: 15px 0;
}

.freq-band {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.note {
    background: #fff8e1;
    padding: 8px 12px;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 14px;
    color: #e67e22;
}

.note i {
    margin-right: 5px;
}

@media (max-width: 768px) {
    .zte-guide-container {
        grid-template-columns: 1fr;
    }
}
/*Huawe setting ONT*/

#ont_huawei-tab {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

#ont_huawei-tab h1 {
    color: #a00000; /* Merah gelap untuk judul utama */
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8em;
}
#ont_huawei-tab .step {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #fff5f5; /* Latar belakang langkah yang sangat terang, sedikit kemerahan */
    border-left: 5px solid #e60000; /* Border kiri merah terang */
    border-radius: 5px;
    display: flex;
    align-items: flex-start;
}
#ont_huawei-tab .step-number {
    background-color: #e60000; /* Angka langkah merah terang */
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 15px;
    font-size: 1.1em;
}
#ont_huawei-tab .step-content {
    flex-grow: 1;
}
#ont_huawei-tab .step-content h2 {
    color: #b30000; /* Warna merah sedikit lebih gelap untuk sub-judul langkah */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
}
/* .step-image tidak diperlukan lagi */

#ont_huawei-tab .code-snippet {
    background-color: #ffebeb; /* Latar belakang kode snippet merah sangat muda */
    color: #660000; /* Warna teks kode yang lebih gelap */
    padding: 10px 15px;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    display: inline-block;
    margin-top: 8px;
    border: 1px solid #ffcccc; /* Border merah muda */
}
#ont_huawei-tab .credentials-box {
    background: #fdf5f5; /* Latar belakang kredensial yang sangat terang, sedikit kemerahan */
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    display: inline-block;
    border: 1px solid #f2dcdc; /* Border merah muda */
}
#ont_huawei-tab .credentials-box span {
    font-weight: 600;
    color: #800000; /* Warna teks kredensial merah gelap */
    display: inline-block;
    margin-right: 5px;
}
#ont_huawei-tab .credentials-box .credential-line {
    display: block;
    margin-bottom: 5px;
}
#ont_huawei-tab .credentials-box .credential-line:last-child {
    margin-bottom: 0;
}
#ont_huawei-tab ul {
    list-style: none;
    padding: 0;
}
#ont_huawei-tab ul li {
    margin-bottom: 8px;
}
#ont_huawei-tab .note {
    background: #fff8e1; /* Warna note ini sudah kuning/oranye, biarkan saja agar kontras */
    padding: 10px 15px;
    border-left: 4px solid #f39c12; /* Border note kuning/oranye */
    border-radius: 5px;
    margin-top: 20px;
    font-size: 0.9em;
    color: #e67e22;
}
#ont_huawei-tab .note strong {
    color: #d35400;
}

/* =============== START: OXYGEN CHANNEL LIST STYLES (COMPACT, MODERN, CURVIER OUTER BOX, WIDER INNER BOX - ORANGE THEME) =============== */

/* Variabel CSS untuk kemudahan pengelolaan warna */
:root {
    --oxygen-orange: #ff6600; /* Oranye utama Oxygen */
    --oxygen-dark-orange: #e65c00; /* Oranye yang lebih gelap untuk gradasi internal */
    --oxygen-gradient-light: #ff7f00; /* Oranye lebih terang untuk awal gradasi background */
    --oxygen-gradient-dark: #cc4d00;   /* Oranye yang lebih dalam untuk akhir gradasi background */
    --text-dark: #333;
    --text-light: #666;
}

/* Container Pembungkus untuk Seluruh Bagian Channel List */
.oxygen-channel-section-wrapper {
    min-height: auto;
    padding: 25px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--oxygen-gradient-light) 0%, var(--oxygen-gradient-dark) 100%); /* PENTING: Gradasi oranye yang lebih serasi */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 20px; /* Lengkungan pada kotak luar */
    margin: 15px;
}

/* Background circles/shapes */
.oxygen-channel-bg-shape {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    opacity: 0.5;
    z-index: 0;
}

.oxygen-channel-bg-shape.oxygen-channel-top-left {
    width: 140px; height: 140px; top: -70px; left: -70px;
    background-color: rgba(255, 255, 255, 0.12);
}
.oxygen-channel-bg-shape.oxygen-channel-top-right {
    width: 90px; height: 90px; top: 15px; right: 15px;
    background-color: rgba(255, 255, 255, 0.18);
}
.oxygen-channel-bg-shape.oxygen-channel-bottom-left {
    width: 230px; height: 230px; bottom: -115px; left: -115px;
    background-color: rgba(255, 255, 255, 0.08);
}
.oxygen-channel-bg-shape.oxygen-channel-bottom-right {
    width: 170px; height: 170px; bottom: 40px; right: 40px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Small circular decorations on the corners of the main background */
.oxygen-channel-corner-deco {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 1;
}
.oxygen-channel-corner-deco.oxygen-channel-tl { top: 10px; left: 10px; background-color: #ffc266; }
.oxygen-channel-corner-deco.oxygen-channel-tr { top: 10px; right: 10px; background-color: #ff9933; }
.oxygen-channel-corner-deco.oxygen-channel-bl { bottom: 10px; left: 10px; background-color: #ffbb66; }
.oxygen-channel-corner-deco.oxygen-channel-br { bottom: 10px; right: 10px; background-color: #ff8533; }

/* Main white container for the channel list */
.oxygen-channel-container {
    width: 100%;
    max-width: 800px;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* Header Section */
.oxygen-channel-header {
    background: linear-gradient(to right, var(--oxygen-orange), var(--oxygen-dark-orange)); /* Gradasi ORANYE KE ORANYE GELAP */
    color: #fff;
    padding: 18px 15px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.oxygen-channel-logo-container {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 6px;
}

/* Ukuran Font Tetap Sama Sesuai Permintaan */
.oxygen-channel-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2em;
    color: #fff;
    letter-spacing: -0.8px;
    line-height: 1;
}

.oxygen-channel-logo-dot {
    color: #ffd7a0; /* Warna dot disesuaikan agar tetap dalam tema oranye */
    font-size: 0.55em;
    vertical-align: sub;
    margin-left: 1px;
}

.oxygen-channel-logo-id {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75em;
    color: #fff;
    vertical-align: middle;
    margin-left: 1px;
    letter-spacing: 0.5px;
}

.oxygen-channel-header h1 {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    font-size: 1.7em;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.oxygen-channel-header p {
    margin: 4px 0 0;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
}

/* Content Section - Channel List */
.oxygen-channel-content {
    padding: 15px 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.oxygen-channel-category {
    /* ... */
}

.oxygen-channel-category h3 {
    color: var(--oxygen-orange);
    font-size: 1.05em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--oxygen-orange);
    padding-bottom: 3px;
    display: inline-block;
    line-height: 1.2;
}

.oxygen-channel-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.oxygen-channel-category ul li {
    margin-bottom: 3px;
    font-size: 0.8em;
    color: var(--text-dark);
    line-height: 1.2;
}

/* Specific styling for HD tag */
.oxygen-channel-hd-tag {
    background-color: var(--oxygen-orange);
    color: #fff;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.55em;
    font-weight: bold;
    vertical-align: middle;
    margin-left: 3px;
}

/* Footer Section */
.oxygen-channel-footer {
    text-align: center;
    padding: 10px;
    background-color: #f5f5f5;
    font-size: 0.7em;
    color: var(--text-light);
    border-top: 1px solid #eee;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.oxygen-channel-footer p {
    margin: 2px 0;
}

.oxygen-channel-footer a {
    color: var(--oxygen-orange);
    text-decoration: none;
    font-weight: 600;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .oxygen-channel-section-wrapper {
        padding: 20px;
        border-radius: 15px;
    }
    .oxygen-channel-container {
        max-width: 600px;
        border-radius: 12px;
    }
    .oxygen-channel-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 12px 20px;
    }
    .oxygen-channel-header {
        padding: 15px 12px 8px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    .oxygen-channel-footer {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
}

@media (max-width: 480px) {
    .oxygen-channel-section-wrapper {
        padding: 15px;
        margin: 10px;
        border-radius: 10px;
    }
    .oxygen-channel-container {
        border-radius: 8px;
        max-width: 100%;
    }
    .oxygen-channel-content {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 15px;
    }
    .oxygen-channel-header {
        padding: 12px 10px 6px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .oxygen-channel-footer {
        padding: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .oxygen-channel-bg-shape,
    .oxygen-channel-corner-deco {
        display: none;
    }
}
/* =============== END: OXYGEN CHANNEL LIST STYLES (COMPACT, MODERN, CURVIER OUTER BOX, WIDER INNER BOX - ORANGE THEME) =============== */


/* =============== START: XTREAM CHANNEL LIST STYLES (COMPACT, MODERN, CURVIER OUTER BOX, WIDER INNER BOX) =============== */

/* Variabel CSS untuk kemudahan pengelolaan warna */
:root {
    --xtream-primary: #007bff; /* Warna biru utama Xstream */
    --xtream-secondary: #0056b3; /* Warna biru gelap untuk gradasi */
    --text-dark: #333;
    --text-light: #666;
    --bg-gradient-start: #007bff; /* Gradasi biru awal untuk wrapper */
    --bg-gradient-end: #0056b3;   /* Gradasi biru akhir untuk wrapper */
}

/* Container Pembungkus untuk Seluruh Bagian Channel List */
.xtream-channel-section-wrapper {
    min-height: auto;
    padding: 25px; /* Padding agar konten tidak menempel sudut lengkung */
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 20px; /* Lengkungan pada kotak luar */
    margin: 15px; /* Memberi sedikit jarak dari tepi layar jika ada */
}

/* Background circles/shapes */
.xtream-channel-bg-shape {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    opacity: 0.5;
    z-index: 0;
}

.xtream-channel-bg-shape.xtream-channel-top-left {
    width: 140px; height: 140px; top: -70px; left: -70px;
    background-color: rgba(255, 255, 255, 0.12);
}
.xtream-channel-bg-shape.xtream-channel-top-right {
    width: 90px; height: 90px; top: 15px; right: 15px;
    background-color: rgba(255, 255, 255, 0.18);
}
.xtream-channel-bg-shape.xtream-channel-bottom-left {
    width: 230px; height: 230px; bottom: -115px; left: -115px;
    background-color: rgba(255, 255, 255, 0.08);
}
.xtream-channel-bg-shape.xtream-channel-bottom-right {
    width: 170px; height: 170px; bottom: 40px; right: 40px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Small circular decorations on the corners of the main background */
.xtream-channel-corner-deco {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 1;
}
.xtream-channel-corner-deco.xtream-channel-tl { top: 10px; left: 10px; background-color: #aaddff; }
.xtream-channel-corner-deco.xtream-channel-tr { top: 10px; right: 10px; background-color: #bbddff; }
.xtream-channel-corner-deco.xtream-channel-bl { bottom: 10px; left: 10px; background-color: #ccddff; }
.xtream-channel-corner-deco.xtream-channel-br { bottom: 10px; right: 10px; background-color: #eeddff; }

/* Main white container for the channel list */
.xtream-channel-container {
    width: 100%;
    max-width: 800px; /* DILEBARKAN MENJADI 800px */
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: 15px; /* Lengkungan kotak dalam */
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* Header Section */
.xtream-channel-header {
    background: linear-gradient(to right, var(--xtream-primary), var(--xtream-secondary)); /* Gradasi BIRU KE BIRU GELAP */
    color: #fff;
    padding: 18px 15px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.xtream-channel-logo-container {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 6px;
}

/* Ukuran Font Tetap Sama Sesuai Permintaan */
.xtream-channel-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2em;
    color: #fff;
    letter-spacing: -0.8px;
    line-height: 1;
}

.xtream-channel-logo-dot {
    color: var(--xtream-primary); /* Warna dot sesuai biru Xstream */
    font-size: 0.55em;
    vertical-align: sub;
    margin-left: 1px;
}

.xtream-channel-logo-id {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75em;
    color: #fff;
    vertical-align: middle;
    margin-left: 1px;
    letter-spacing: 0.5px;
}

.xtream-channel-header h1 {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    font-size: 1.7em;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.xtream-channel-header p {
    margin: 4px 0 0;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
}

/* Content Section - Channel List */
.xtream-channel-content {
    padding: 15px 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.xtream-channel-category {
    /* ... */
}

.xtream-channel-category h3 {
    color: var(--xtream-primary); /* Warna kategori sesuai biru Xstream */
    font-size: 1.05em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--xtream-primary);
    padding-bottom: 3px;
    display: inline-block;
    line-height: 1.2;
}

.xtream-channel-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xtream-channel-category ul li {
    margin-bottom: 3px;
    font-size: 0.8em;
    color: var(--text-dark);
    line-height: 1.2;
}

/* Specific styling for HD tag */
.xtream-channel-hd-tag {
    background-color: var(--xtream-primary); /* Warna tag HD sesuai biru Xstream */
    color: #fff;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.55em;
    font-weight: bold;
    vertical-align: middle;
    margin-left: 3px;
}

/* Footer Section */
.xtream-channel-footer {
    text-align: center;
    padding: 10px;
    background-color: #f5f5f5;
    font-size: 0.7em;
    color: var(--text-light);
    border-top: 1px solid #eee;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.xtream-channel-footer p {
    margin: 2px 0;
}

.xtream-channel-footer a {
    color: var(--xtream-primary); /* Warna link sesuai biru Xstream */
    text-decoration: none;
    font-weight: 600;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .xtream-channel-section-wrapper {
        padding: 20px;
        border-radius: 15px;
    }
    .xtream-channel-container {
        max-width: 600px;
        border-radius: 12px;
    }
    .xtream-channel-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 12px 20px;
    }
    .xtream-channel-header {
        padding: 15px 12px 8px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    .xtream-channel-footer {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
}

@media (max-width: 480px) {
    .xtream-channel-section-wrapper {
        padding: 15px;
        margin: 10px;
        border-radius: 10px;
    }
    .xtream-channel-container {
        border-radius: 8px;
        max-width: 100%;
    }
    .xtream-channel-content {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 15px;
    }
    .xtream-channel-header {
        padding: 12px 10px 6px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .xtream-channel-footer {
        padding: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .xtream-channel-bg-shape,
    .xtream-channel-corner-deco {
        display: none;
    }
}
/* =============== END: XTREAM CHANNEL LIST STYLES (COMPACT, MODERN, CURVIER OUTER BOX, WIDER INNER BOX) =============== */

/* Base styles for the Vidio Package section */
.vidio-paket-container {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f2f5;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    color: #333;
    box-sizing: border-box;
}

/* Grid container for all package cards */
.vidio-paket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 15px;
    max-width: 1200px;
    width: 100%;
}

/* Individual Package Card Styles */
.vidio-paket-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    padding-bottom: 15px;
    text-align: center;
}

.vidio-paket-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Header for each package */
.vidio-paket-header {
    background: linear-gradient(135deg, #FF6F00, #FFD54F);
    color: #fff;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.vidio-paket-header.platinum {
    background: linear-gradient(135deg, #6200EE, #BB86FC);
}
.vidio-paket-header.avod {
    background: linear-gradient(135deg, #0288D1, #4FC3F7);
}

/* Content Section */
.vidio-paket-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.vidio-paket-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
}

.vidio-paket-description {
    font-size: 0.82em;
    color: #555;
    line-height: 1.4;
    margin-bottom: 12px;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Feature List Styles */
.vidio-paket-features {
    width: 100%;
    margin: 10px 0;
    text-align: left;
    padding: 0 15px;
}

.vidio-paket-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: 0.85em;
    line-height: 1.4;
}

.vidio-paket-feature-icon {
    color: #4CAF50;
    margin-right: 8px;
    flex-shrink: 0;
    margin-top: 3px;
}

/* STB Feature Labels */
.vidio-paket-feature-stb,
.vidio-paket-feature-no-stb {
    background-color: #e0f7fa;
    color: #00796b;
    padding: 9px 18px;
    border-radius: 20px;
    font-size: 1.05em;
    font-weight: 700;
    margin-bottom: 12px;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}
.vidio-paket-feature-no-stb {
    background-color: #ffe0b2;
    color: #e65100;
}

.vidio-paket-price {
    font-size: 1.5em;
    font-weight: 700;
    color: #00796b;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 5px;
}
.vidio-paket-price.recurring {
    font-size: 1em;
    color: #555;
    line-height: 1.3;
}
.vidio-paket-price.recurring span {
    display: block;
    font-size: 0.7em;
    color: #888;
    margin-top: 2px;
}

/* Specific styles for special conditions */
.vidio-paket-keterangan {
    font-size: 0.78em;
    color: #777;
    margin-top: 10px;
    padding: 0 10px;
    text-align: center;
    line-height: 1.3;
}

.vidio-paket-detail {
    font-size: 0.78em;
    color: #2c2c2c; /* lebih gelap dari #777 */
    background-color: #f4f4f4;
    margin-top: 10px;
    padding: 12px 14px;
    text-align: left;
    line-height: 1.5;
    border-left: 4px solid #1abc9c;
    border-radius: 8px;
}

.vidio-paket-syarat {
    font-size: 0.78em;
    color: #2c2c2c; /* lebih gelap dari #777 */
    background-color: #f9f9f9;
    margin-top: 10px;
    padding: 12px 14px;
    text-align: left;
    line-height: 1.5;
    border-left: 4px solid #e67e22;
    border-radius: 8px;
}


/* Call to Action Button */
.vidio-paket-cta {
    background: linear-gradient(135deg, #FF6F00, #FFA000);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.vidio-paket-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.vidio-paket-cta.platinum {
    background: linear-gradient(135deg, #6200EE, #7C4DFF);
}
.vidio-paket-cta.avod {
    background: linear-gradient(135deg, #0288D1, #00BCD4);
}

/* AVOD Package - Blue Theme */
.avod-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
}
.avod-header::after {
    background: #2980b9;
}
.vidio-paket-cta.avod-cta {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}
.vidio-paket-card.avod .vidio-paket-feature-icon {
    color: #3498db;
}

/* Platinum Package - Purple Theme */
.platinum-header {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.platinum-header::after {
    background: #8e44ad;
}
.vidio-paket-cta.platinum-cta {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
}
.vidio-paket-card.platinum .vidio-paket-feature-icon {
    color: #9b59b6;
}

/* Diamond Package - Gold Theme */
.diamond-header {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}
.diamond-header::after {
    background: #e67e22;
}
.vidio-paket-cta.diamond-cta {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
}
.vidio-paket-card.diamond .vidio-paket-feature-icon {
    color: #f39c12;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    .vidio-paket-grid {
        grid-template-columns: 1fr;
    }
    .vidio-paket-container {
        padding: 10px;
    }
    .vidio-paket-card {
        padding-bottom: 10px;
    }
}

/* Additional styles for the Vidio packages */
.package-card {
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}
.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Rocket icon for speed options */
.speed-options .speed {
    display: flex;
    align-items: center;
    justify-content: center;
}
.speed-options .fa-rocket {
    color: #FF6B00;
    margin-right: 8px;
    font-size: 0.9em;
}


/* ========================================================================== */
/* ==== GLOBAL STYLES & VARIABLES (SMTOXYGEN SCOPED) ======================== */
/* ========================================================================== */

/* Define CSS Variables for Easy Theming and Consistency */
/* These variables are intentionally prefixed to avoid potential conflicts
   if used in a larger application outside #smtoxygen-app. */
:root {
    --oxygen-primary-blue: #0056b3; /* Deeper, more sophisticated blue */
    --oxygen-secondary-orange: #ff6600; /* Vibrant orange, slightly refined */
    --oxygen-accent-green: #28a745; /* Modern, clear green */
    
    --oxygen-text-dark: #2c3e50; /* Charcoal for main headings */
    --oxygen-text-medium: #34495e; /* Darker grey for primary text */
    --oxygen-text-light: #7f8c8d; /* Muted grey for secondary text */
    
    --oxygen-bg-light: #f4f6f9; /* Off-white for section backgrounds */
    --oxygen-bg-card: #ffffff; /* Pure white for cards */
    --oxygen-border-color: #e0e6ed; /* Soft border color */
    
    --oxygen-shadow-light: rgba(0, 0, 0, 0.08); /* Lighter, more subtle shadow */
    --oxygen-shadow-medium: rgba(0, 0, 0, 0.15); /* More pronounced shadow for hover/depth */
    --oxygen-border-radius-large: 16px; /* For main containers and cards */
    --oxygen-border-radius-small: 8px; /* For smaller elements like buttons, badges */
    
    --oxygen-transition-duration: 0.4s; /* Smoother animation duration */
    --oxygen-transition-ease: cubic-bezier(0.25, 0.8, 0.25, 1); /* Elegant easing function */
}

/* Scoping all styles to the #smtoxygen-app container */
#smtoxygen-app {
    font-family: 'Poppins', sans-serif; /* Pindahkan font-family ke sini */
    line-height: 1.6; /* Pindahkan line-height ke sini */
    color: var(--oxygen-text-medium); /* Pindahkan warna teks utama ke sini */
    -webkit-font-smoothing: antialiased; /* Better font rendering */
    -moz-osx-font-smoothing: grayscale; /* Better font rendering */
    position: relative; /* For z-indexing if needed */
    overflow: hidden; /* Prevent content overflow */
}

/* Reset default browser styles for elements inside SMTOxygen scope */
#smtoxygen-app * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Apply transition to all elements for smoother general changes */
    transition: background-color var(--oxygen-transition-duration), 
                color var(--oxygen-transition-duration), 
                transform var(--oxygen-transition-duration), 
                box-shadow var(--oxygen-transition-duration);
}

/* Hapus gaya 'body' dari sini, biarkan CSS utama website yang mengaturnya */
/* body {
    background-color: var(--bg-light);
    padding: 20px;
} */


/* ========================================================================== */
/* ==== MAIN CONTAINER STYLES (SMTOXYGEN SCOPED) ============================ */
/* ========================================================================== */

#smtoxygen-app .oxygen-container {
    max-width: 1080px; /* Slightly wider container for more space */
    margin: 40px auto; /* More vertical margin */
    background: var(--oxygen-bg-card);
    border-radius: var(--oxygen-border-radius-large);
    box-shadow: 0 10px 40px var(--oxygen-shadow-light); /* Deeper initial shadow */
    overflow: hidden;
    padding: 40px; /* Increased padding */
    transition: all var(--oxygen-transition-duration) var(--oxygen-transition-ease);
}

#smtoxygen-app .oxygen-container:hover {
    box-shadow: 0 15px 50px var(--oxygen-shadow-medium); /* More pronounced on hover */
}

/* ========================================================================== */
/* ==== HEADER SECTION STYLES (SMTOXYGEN SCOPED) ============================ */
/* ========================================================================== */

#smtoxygen-app .area-tag {
    display: inline-block;
    background: var(--oxygen-secondary-orange);
    color: var(--oxygen-bg-card); /* Use white variable */
    padding: 10px 25px; /* More generous padding */
    border-radius: 25px; /* More rounded pill shape */
    font-weight: 600;
    font-size: 0.95rem; /* Slightly larger */
    letter-spacing: 0.5px; /* Subtle letter spacing */
    text-align: center;
    margin-bottom: 30px; /* More space below */
    display: block; /* Ensures block behavior */
    width: fit-content;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.2); /* Soft shadow for tag */
    transition: transform var(--oxygen-transition-duration) var(--oxygen-transition-ease);
}

#smtoxygen-app .area-tag:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
}

#smtoxygen-app .smtoxygen-header {
    text-align: center;
    margin-bottom: 50px; /* More space below header */
}

#smtoxygen-app .main-title {
    font-size: 2.8rem; /* Larger, more impactful */
    font-weight: 700;
    margin-bottom: 15px; /* More space below title */
    color: var(--oxygen-text-dark); /* Darker for better contrast */
    line-height: 1.2;
    letter-spacing: -0.5px; /* Tighter letter spacing for larger titles */
    /* Removed !important as scoping should prevent conflicts */
}

#smtoxygen-app .highlight-orange {
    color: var(--oxygen-secondary-orange);
}

#smtoxygen-app .highlight-green {
    color: var(--oxygen-accent-green);
}

#smtoxygen-app .subtitle {
    font-size: 1.1rem; /* Slightly larger */
    color: var(--oxygen-text-light);
    max-width: 700px; /* Wider subtitle */
    margin: 0 auto;
    line-height: 1.8; /* More comfortable line spacing */
}

/* ========================================================================== */
/* ==== PACKAGE SECTION STYLES (SMTOXYGEN SCOPED) =========================== */
/* ========================================================================== */

#smtoxygen-app .package-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Slightly larger min-width */
    gap: 30px; /* More gap between packages */
    margin-bottom: 40px; /* More space below section */
}

#smtoxygen-app .package-group {
    background: var(--oxygen-bg-card);
    border-radius: var(--oxygen-border-radius-large);
    box-shadow: 0 5px 20px var(--oxygen-shadow-light); /* Softer initial shadow */
    overflow: hidden;
    border: 1px solid var(--oxygen-border-color);
    transition: transform var(--oxygen-transition-duration) var(--oxygen-transition-ease), 
                box-shadow var(--oxygen-transition-duration) var(--oxygen-transition-ease);
}

#smtoxygen-app .package-group:hover {
    transform: translateY(-10px); /* More pronounced lift on hover */
    box-shadow: 0 12px 30px var(--oxygen-shadow-medium); /* Deeper shadow on hover */
}

#smtoxygen-app .package-header {
    padding: 20px; /* More padding */
    text-align: center;
    color: var(--oxygen-bg-card); /* Use white variable */
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    background-size: cover; /* Ensure gradient covers header */
    background-position: center;
}

/* Subtle overlay for gradient headers */
#smtoxygen-app .package-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.0)); /* Subtle dark overlay */
    z-index: 1;
    pointer-events: none; /* Do not interfere with clicks */
}

#smtoxygen-app .package-header > * {
    position: relative;
    z-index: 2;
}

#smtoxygen-app .green-bg {
    background: linear-gradient(135deg, var(--oxygen-accent-green), #37cf6f); /* Refined green gradient */
}

#smtoxygen-app .orange-bg {
    background: linear-gradient(135deg, var(--oxygen-secondary-orange), #ff9933); /* Refined orange gradient */
}

#smtoxygen-app .package-type {
    font-size: 1.6rem; /* Larger and more prominent */
    font-weight: 700;
    margin-bottom: 8px; /* More space below */
}

#smtoxygen-app .package-period {
    font-size: 0.9rem; /* Slightly larger */
    font-weight: 500;
    opacity: 0.9;
}

#smtoxygen-app .included-note {
    font-size: 0.8rem; /* Slightly larger */
    color: rgba(255,255,255,0.8); /* Better contrast */
    margin-top: 8px; /* More space above */
    font-weight: 400;
}

#smtoxygen-app .package-grid {
    padding: 25px; /* More padding */
}

#smtoxygen-app .package-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0; /* More padding */
    border-bottom: 1px solid var(--oxygen-border-color); /* Solid, softer border */
    transition: background-color 0.3s ease;
}

#smtoxygen-app .package-item:hover {
    background-color: var(--oxygen-bg-light); /* Light background on hover */
}

#smtoxygen-app .package-item:last-child {
    border-bottom: none;
}

#smtoxygen-app .speed-box {
    display: flex;
    align-items: center; /* Center vertically for better alignment */
    padding: 10px 18px; /* More padding */
    border-radius: var(--oxygen-border-radius-small);
    color: var(--oxygen-bg-card);
    font-size: 1.1rem; /* Slightly larger */
    font-weight: 600;
    min-width: 130px; /* Wider for better presentation */
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow for speed badge */
    background: var(--oxygen-primary-blue); /* Default speed box color */
}

/* Specific speed box colors if needed (based on package header color) */
#smtoxygen-app .package-group .package-item .speed-box {
    background: var(--oxygen-primary-blue); /* Default */
}
#smtoxygen-app .package-group.stream .package-item .speed-box {
    background: var(--oxygen-primary-blue); /* Blue for 'stream' */
}
#smtoxygen-app .package-group.extreme .package-item .speed-box {
    background: var(--oxygen-secondary-orange); /* Orange for 'extreme' */
}
#smtoxygen-app .package-group.broadband .package-item .speed-box {
    background: var(--oxygen-accent-green); /* Green for 'broadband' */
}


#smtoxygen-app .speed-value {
    font-size: 1.8rem; /* Larger speed value */
    font-weight: 700;
    margin-right: 6px;
    letter-spacing: -0.5px;
}

#smtoxygen-app .speed-unit {
    font-size: 1rem; /* Larger unit */
    font-weight: 500;
}

#smtoxygen-app .price-box {
    text-align: right;
}

#smtoxygen-app .price-value {
    font-size: 1.5rem; /* Larger price value */
    font-weight: 700;
    color: var(--oxygen-text-dark); /* Darker for better contrast */
    display: flex;
    align-items: baseline;
    justify-content: flex-end; /* Align right */
}

#smtoxygen-app .price-value .currency {
    font-size: 0.7em; /* Size for Rp */
    margin-right: 2px;
    vertical-align: super; /* Elevate Rp slightly */
}

#smtoxygen-app .price-period {
    font-size: 0.85rem; /* Slightly larger */
    color: var(--oxygen-text-light);
    display: block;
    margin-top: 3px;
}

/* ========================================================================== */
/* ==== BOTTOM INFO & FOOTER STYLES (SMTOXYGEN SCOPED) ====================== */
/* ========================================================================== */

#smtoxygen-app .bottom-info {
    margin-top: 50px; /* More space from packages */
    text-align: center;
}

#smtoxygen-app .price-disclaimer {
    background: var(--oxygen-bg-light); /* Lighter background */
    border-radius: var(--oxygen-border-radius-large);
    padding: 25px; /* More padding */
    margin-bottom: 25px; /* More margin */
    border: 1px solid var(--oxygen-border-color);
    text-align: left; /* Align text left */
}

#smtoxygen-app .price-disclaimer p {
    color: var(--oxygen-text-medium);
    font-size: 0.95rem;
    line-height: 1.7;
}

#smtoxygen-app .features-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 30px; /* More spacious */
    font-size: 1rem; /* Slightly larger */
    margin-bottom: 25px;
}

#smtoxygen-app .feature-item {
    display: flex;
    align-items: center;
    color: var(--oxygen-text-medium);
    font-weight: 500; /* Medium weight for features */
}

#smtoxygen-app .check-icon {
    color: var(--oxygen-accent-green);
    margin-right: 10px; /* More space for icon */
    font-size: 1.2rem; /* Larger icon */
    transform: scale(1.1); /* Slightly emphasize icon */
}

#smtoxygen-app .fixed-price-banner {
    background: linear-gradient(90deg, var(--oxygen-primary-blue), #006ddb); /* Gradient for banner */
    color: var(--oxygen-bg-card);
    padding: 15px 30px; /* More padding */
    border-radius: var(--oxygen-border-radius-small);
    margin-bottom: 25px; /* More margin */
    font-size: 1.1rem; /* Larger font */
    font-weight: 600;
    display: inline-block;
    letter-spacing: 0.8px; /* More letter spacing */
    box-shadow: 0 6px 15px rgba(0, 86, 179, 0.3); /* Deeper shadow */
    transition: all var(--oxygen-transition-duration) var(--oxygen-transition-ease);
}

#smtoxygen-app .fixed-price-banner:hover {
    transform: translateY(-3px) scale(1.01); /* Lift and slight scale */
    box-shadow: 0 8px 20px rgba(0, 86, 179, 0.4);
}

#smtoxygen-app .fup-info {
    margin-bottom: 25px;
}

#smtoxygen-app .fup-badge {
    display: inline-block;
    background: linear-gradient(90deg, var(--oxygen-accent-green), #37cf6f); /* Gradient for badge */
    color: var(--oxygen-bg-card);
    padding: 10px 25px; /* More padding */
    border-radius: 25px; /* More rounded pill shape */
    font-weight: 700;
    font-size: 1rem; /* Slightly larger */
    text-transform: uppercase;
    letter-spacing: 1.2px; /* More letter spacing */
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); /* Deeper shadow */
    transition: transform var(--oxygen-transition-duration) var(--oxygen-transition-ease);
}

#smtoxygen-app .fup-badge:hover {
    transform: translateY(-3px); /* Subtle lift */
}

#smtoxygen-app .footer-note {
    text-align: center;
    color: var(--oxygen-text-light);
    font-size: 0.9rem; /* Slightly larger */
    margin-top: 30px; /* More margin */
    padding-top: 20px; /* More padding */
    border-top: 1px solid var(--oxygen-border-color); /* Softer border */
}

/* ========================================================================== */
/* ==== MEDIA QUERIES (RESPONSIVE DESIGN - SMTOXYGEN SCOPED) ================ */
/* ========================================================================== */

@media (max-width: 992px) { /* Adjust breakpoint for larger tablets */
    #smtoxygen-app .oxygen-container {
        padding: 30px;
        margin: 30px auto;
    }
    #smtoxygen-app .main-title {
        font-size: 2.4rem;
    }
    #smtoxygen-app .subtitle {
        font-size: 1rem;
    }
    #smtoxygen-app .package-section {
        gap: 25px;
    }
    #smtoxygen-app .package-group {
        min-width: 300px; /* Adjust min-width if needed */
    }
    #smtoxygen-app .package-header {
        padding: 18px;
    }
    #smtoxygen-app .package-type {
        font-size: 1.5rem;
    }
    #smtoxygen-app .package-grid {
        padding: 20px;
    }
    #smtoxygen-app .package-item {
        padding: 16px 0;
    }
    #smtoxygen-app .speed-value {
        font-size: 1.6rem;
    }
    #smtoxygen-app .price-value {
        font-size: 1.4rem;
    }
}


@media (max-width: 768px) {
    #smtoxygen-app .oxygen-container {
        padding: 25px;
        margin: 25px auto;
        border-radius: var(--oxygen-border-radius-large); /* Ensure consistency */
    }
    
    #smtoxygen-app .main-title {
        font-size: 2rem;
        margin-bottom: 12px;
    }
    
    #smtoxygen-app .subtitle {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    #smtoxygen-app .area-tag {
        font-size: 0.85rem;
        padding: 8px 18px;
        margin-bottom: 25px;
    }

    #smtoxygen-app .smtoxygen-header {
        margin-bottom: 40px;
    }

    #smtoxygen-app .package-section {
        grid-template-columns: 1fr; /* Stack packages vertically */
        gap: 20px;
        margin-bottom: 30px;
    }
    
    #smtoxygen-app .package-group {
        border-radius: var(--oxygen-border-radius-large);
    }
    
    #smtoxygen-app .package-header {
        padding: 15px;
    }
    #smtoxygen-app .package-type {
        font-size: 1.4rem;
        margin-bottom: 5px;
    }
    #smtoxygen-app .package-period {
        font-size: 0.8rem;
    }
    #smtoxygen-app .included-note {
        font-size: 0.7rem;
        margin-top: 5px;
    }

    #smtoxygen-app .package-grid {
        padding: 18px;
    }

    #smtoxygen-app .package-item {
        flex-direction: column; /* Stack speed and price vertically */
        align-items: flex-start; /* Align to the left */
        padding: 15px 0;
    }

    #smtoxygen-app .speed-box {
        margin-bottom: 10px; /* Space between speed and price */
        min-width: 100%; /* Take full width */
        justify-content: flex-start; /* Align text left */
        padding: 10px 15px;
        font-size: 1rem;
    }
    #smtoxygen-app .speed-value {
        font-size: 1.5rem;
    }

    #smtoxygen-app .price-box {
        text-align: left; /* Align price to the left */
        width: 100%; /* Take full width */
    }
    #smtoxygen-app .price-value {
        font-size: 1.3rem;
        justify-content: flex-start; /* Align Rp to the left */
    }
    #smtoxygen-app .price-period {
        font-size: 0.8rem;
    }
    
    #smtoxygen-app .bottom-info {
        margin-top: 40px;
    }
    #smtoxygen-app .price-disclaimer {
        padding: 20px;
        margin-bottom: 20px;
    }
    #smtoxygen-app .price-disclaimer p {
        font-size: 0.9rem;
    }

    #smtoxygen-app .features-list {
        flex-direction: column; /* Stack features vertically */
        align-items: flex-start; /* Align to the left */
        gap: 12px;
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    #smtoxygen-app .check-icon {
        font-size: 1.1rem;
        margin-right: 8px;
    }

    #smtoxygen-app .fixed-price-banner {
        padding: 12px 25px;
        font-size: 1rem;
        margin-bottom: 20px;
    }
    #smtoxygen-app .fup-badge {
        padding: 8px 20px;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    #smtoxygen-app .footer-note {
        font-size: 0.8rem;
        margin-top: 25px;
        padding-top: 15px;
    }
}

@media (max-width: 480px) {
    #smtoxygen-app .oxygen-container {
        padding: 20px;
        margin: 20px auto;
    }
    #smtoxygen-app .main-title {
        font-size: 1.6rem;
    }
    #smtoxygen-app .subtitle {
        font-size: 0.85rem;
    }
    #smtoxygen-app .area-tag {
        font-size: 0.8rem;
        padding: 6px 15px;
        margin-bottom: 20px;
    }
    #smtoxygen-app .smtoxygen-header {
        margin-bottom: 30px;
    }
    #smtoxygen-app .package-grid {
        padding: 15px;
    }
    #smtoxygen-app .package-item {
        padding: 12px 0;
    }
    #smtoxygen-app .speed-value {
        font-size: 1.3rem;
    }
    #smtoxygen-app .speed-unit {
        font-size: 0.85rem;
    }
    #smtoxygen-app .price-value {
        font-size: 1.1rem;
    }
    #smtoxygen-app .price-period {
        font-size: 0.75rem;
    }
    #smtoxygen-app .bottom-info {
        margin-top: 30px;
    }
    #smtoxygen-app .price-disclaimer {
        padding: 15px;
    }
    #smtoxygen-app .features-list {
        font-size: 0.85rem;
        gap: 8px;
    }
    #smtoxygen-app .fixed-price-banner {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
    #smtoxygen-app .fup-badge {
        font-size: 0.8rem;
        padding: 6px 15px;
    }
    #smtoxygen-app .footer-note {
        font-size: 0.75rem;
    }
}

/* ========================================================================== */
/* ==== ANIMATIONS ========================================================== */
/* ========================================================================== */

@keyframes fadeInScaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInFromTop {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromBottom {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Applying some initial animations (you'll need to add `animation-delay`
   to individual elements in your HTML or via JavaScript for staggered effects) */
#smtoxygen-app .oxygen-container {
    animation: fadeInScaleUp 0.8s var(--oxygen-transition-ease) forwards;
}
#smtoxygen-app .area-tag {
    animation: slideInFromTop 0.6s var(--oxygen-transition-ease) forwards;
}
#smtoxygen-app .smtoxygen-header .main-title {
    animation: slideInFromTop 0.8s var(--oxygen-transition-ease) forwards 0.2s;
}
#smtoxygen-app .smtoxygen-header .subtitle {
    animation: slideInFromBottom 0.8s var(--oxygen-transition-ease) forwards 0.4s;
}
/* You can apply similar animations to .package-group, .package-item, etc.
   with staggered delays to create a dynamic entrance. */
/* suite-cervino.css - Modern, Elegant, Smooth Styles */

/* CSS Variables for Easy Theming */
:root {
    --cervino-primary-blue: #0A6BEF; /* A vibrant, modern blue */
    --cervino-secondary-blue: #2E81FD; /* Lighter blue for gradients */
    --cervino-green: #0ED797; /* Fresh green for Stream Plus */
    --cervino-green-light: #3DEDAE; /* Lighter green for gradients */
    --cervino-text-dark: #2F3645; /* Dark grey for main text */
    --cervino-text-medium: #5C677D; /* Medium grey for descriptions */
    --cervino-text-light: #7E8C9F; /* Light grey for subtle text */
    --cervino-bg-light: #F9FAFC; /* Very light background */
    --cervino-bg-card: #FFFFFF; /* White for card backgrounds */
    --cervino-border-color: #E6EBF2; /* Soft border color */
    --cervino-shadow-light: rgba(0, 0, 0, 0.06); /* Lighter shadow */
    --cervino-shadow-medium: rgba(0, 0, 0, 0.12); /* Medium shadow for hover */
    --cervino-border-radius: 16px; /* More rounded corners */
    --cervino-transition-speed: 0.35s ease-out; /* Smoother transitions */
    --cervino-font-family: 'Poppins', sans-serif; /* Modern font */
}

/* ===== SUITE CERVINO STYLES ===== */
#suite-cervino {
    font-family: var(--cervino-font-family);
    padding: 3rem; /* Increased padding */
    background: var(--cervino-bg-light);
    border-radius: var(--cervino-border-radius);
    box-shadow: 0 8px 30px var(--cervino-shadow-light); /* More pronounced shadow */
    position: relative; /* For animations or overlays */
    overflow: hidden; /* Ensures shadows/animations stay within bounds */
    transform: translateZ(0); /* Improve rendering performance for animations */
}

#suite-cervino h3 {
    color: var(--cervino-primary-blue);
    font-size: 2.8rem; /* Larger, more impactful */
    font-weight: 700;
    margin-bottom: 0.8rem;
    text-align: center;
    animation: fadeInSlideDown 0.8s forwards; /* Animation for header */
    opacity: 0;
    transform: translateY(-20px);
}

#suite-cervino .product-description {
    color: var(--cervino-text-medium);
    margin-bottom: 3rem; /* More spacing */
    font-size: 1.15rem; /* Slightly larger */
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInSlideUp 0.8s forwards 0.2s; /* Animation for description */
    opacity: 0;
    transform: translateY(20px);
}

/* Package Groups */
#suite-cervino .packages-section {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Increased gap */
    margin-bottom: 3rem;
    justify-content: center; /* Center packages when wrapping */
}

#suite-cervino .package-group {
    flex: 1;
    min-width: 320px; /* Slightly larger minimum width */
    max-width: 450px; /* Max width for better control on larger screens */
    background: var(--cervino-bg-card);
    border-radius: var(--cervino-border-radius);
    overflow: hidden;
    box-shadow: 0 8px 20px var(--cervino-shadow-light); /* Softer initial shadow */
    border: 1px solid var(--cervino-border-color);
    transition: transform var(--cervino-transition-speed), box-shadow var(--cervino-transition-speed); /* Smooth transitions */
    position: relative;
    z-index: 1;
    animation: zoomIn 0.6s forwards; /* Entrance animation */
    opacity: 0;
    transform: scale(0.95);
}

#suite-cervino .package-group:hover {
    transform: translateY(-10px) scale(1.02); /* Lift and slightly grow on hover */
    box-shadow: 0 15px 40px var(--cervino-shadow-medium); /* More prominent shadow on hover */
    z-index: 2; /* Bring hovered card to front */
}

#suite-cervino .package-group:nth-child(1) { animation-delay: 0.4s; }
#suite-cervino .package-group:nth-child(2) { animation-delay: 0.6s; }

/* Package Header */
#suite-cervino .package-title-bar {
    padding: 1.5rem 2rem; /* More padding */
    color: white;
    font-weight: 600;
    background: linear-gradient(135deg, var(--cervino-primary-blue), var(--cervino-secondary-blue));
    border-bottom: 2px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
}

#suite-cervino .package-group.stream-plus .package-title-bar {
    background: linear-gradient(135deg, var(--cervino-green), var(--cervino-green-light));
}

#suite-cervino .package-name {
    font-size: 1.6rem; /* Larger font */
    font-weight: 700;
    letter-spacing: -0.5px;
}

#suite-cervino .internet-only,
#suite-cervino .internet-tv {
    font-size: 0.95rem;
    opacity: 0.95;
    display: block;
    margin-top: 0.5rem;
    line-height: 1.3;
}

/* Package Table */
#suite-cervino .package-table {
    width: 100%;
    border-collapse: collapse;
}

#suite-cervino .table-row {
    display: flex;
    transition: background-color var(--cervino-transition-speed); /* Smooth hover for rows */
}

#suite-cervino .table-row:last-of-type .table-cell {
    border-bottom: none; /* No border on last row */
}

#suite-cervino .table-row:not(.table-header):hover {
    background-color: #F0F4F8; /* Light highlight on row hover */
}

#suite-cervino .table-cell {
    padding: 1.2rem 1.5rem; /* More padding */
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cervino-border-color); /* Solid, softer border */
}

#suite-cervino .table-header .table-cell {
    background: var(--cervino-bg-light);
    font-weight: 600;
    color: var(--cervino-text-dark);
    border-bottom: 1px solid var(--cervino-border-color);
}

#suite-cervino .speed-cell {
    justify-content: flex-start;
    padding-left: 2rem; /* Align better with name */
}

#suite-cervino .price-cell {
    flex-direction: column;
    align-items: flex-end; /* Align price to the right */
    gap: 0.4rem;
    padding-right: 2rem; /* Align better with name */
}

#suite-cervino .speed-value {
    font-size: 1.6rem; /* Larger speed value */
    font-weight: 700;
    color: var(--cervino-primary-blue);
    display: flex;
    align-items: center;
}

#suite-cervino .speed-value::before {
    content: '🚀'; /* Rocket icon for speed */
    margin-right: 8px;
    font-size: 1.1em;
    transform: rotate(45deg); /* Slight rotation */
    display: inline-block;
}


#suite-cervino .package-group.stream-plus .speed-value {
    color: var(--cervino-green);
}

#suite-cervino .unit {
    font-size: 1rem;
    color: var(--cervino-text-medium);
    margin-left: 0.3rem;
    font-weight: 500;
}

#suite-cervino .price-monthly {
    font-size: 1.4rem; /* Larger price */
    font-weight: 700;
    color: var(--cervino-text-dark);
    display: flex; /* For currency symbol alignment */
    align-items: baseline;
}

#suite-cervino .price-monthly .currency {
    font-size: 0.8em; /* Size of 'Rp' */
    margin-right: 3px;
    opacity: 0.9;
}

#suite-cervino .price-annual {
    font-size: 0.95rem;
    color: var(--cervino-text-light);
    opacity: 0.9;
}

#suite-cervino .sup {
    font-size: 0.7em;
    vertical-align: super;
}

/* Info Box */
#suite-cervino .info-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* Increased gap */
    background: var(--cervino-bg-light);
    padding: 2rem; /* More padding */
    border-radius: var(--cervino-border-radius);
    margin-top: 3rem; /* More margin from packages */
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.03); /* Subtle inner shadow */
    justify-content: center; /* Center items */
}

#suite-cervino .info-item {
    flex: 1;
    min-width: 240px; /* Slightly larger min-width */
    max-width: 320px; /* Control max width */
    text-align: center;
    padding: 2rem 1.5rem; /* More vertical padding */
    background: var(--cervino-bg-card);
    border-radius: var(--cervino-border-radius);
    box-shadow: 0 4px 15px var(--cervino-shadow-light);
    transition: transform var(--cervino-transition-speed), box-shadow var(--cervino-transition-speed);
}

#suite-cervino .info-item:hover {
    transform: translateY(-5px); /* Lift slightly on hover */
    box-shadow: 0 8px 25px var(--cervino-shadow-medium);
}

#suite-cervino .icon-large {
    font-size: 2.5rem; /* Larger icon */
    color: var(--cervino-primary-blue);
    margin-bottom: 1rem;
}

#suite-cervino .info-item h4 {
    font-size: 1.25rem; /* Larger heading */
    color: var(--cervino-text-dark);
    margin-bottom: 0.6rem;
    font-weight: 600;
}

#suite-cervino .info-item p {
    font-size: 0.95rem;
    color: var(--cervino-text-medium);
    line-height: 1.6;
}

/* --- Animations --- */
@keyframes fadeInSlideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}


/* Responsive Adjustments */
@media (max-width: 1024px) {
    #suite-cervino .packages-section {
        flex-direction: column; /* Stack packages vertically */
        align-items: center; /* Center them */
    }
    #suite-cervino .package-group {
        min-width: 80%; /* Take more width on medium screens */
        max-width: 500px; /* Limit max width */
    }
}

@media (max-width: 768px) {
    #suite-cervino {
        padding: 2rem 1.5rem;
    }
    #suite-cervino h3 {
        font-size: 2.2rem;
    }
    #suite-cervino .product-description {
        font-size: 1em;
        margin-bottom: 2rem;
    }
    #suite-cervino .package-title-bar {
        padding: 1.2rem 1.5rem;
    }
    #suite-cervino .package-name {
        font-size: 1.4rem;
    }
    #suite-cervino .table-cell {
        padding: 1rem 1rem;
    }
    #suite-cervino .speed-cell {
        padding-left: 1rem;
    }
    #suite-cervino .price-cell {
        padding-right: 1rem;
        align-items: flex-end;
    }
    #suite-cervino .speed-value {
        font-size: 1.3rem;
    }
    #suite-cervino .price-monthly {
        font-size: 1.1rem;
    }
    #suite-cervino .price-annual {
        font-size: 0.85rem;
    }
    #suite-cervino .info-box {
        padding: 1.5rem;
        gap: 1rem;
    }
    #suite-cervino .info-item {
        min-width: 100%; /* Stack info items on small screens */
        padding: 1.5rem;
    }
    #suite-cervino .icon-large {
        font-size: 2rem;
    }
    #suite-cervino .info-item h4 {
        font-size: 1.1rem;
    }
    #suite-cervino .info-item p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    #suite-cervino {
        padding: 1.5rem;
    }
    #suite-cervino h3 {
        font-size: 1.8rem;
    }
    #suite-cervino .package-group {
        min-width: 100%;
    }
    #suite-cervino .speed-value {
        font-size: 1.2rem;
    }
    #suite-cervino .price-monthly {
        font-size: 1rem;
    }
}
/* ========================================================================== */
/* suite-capitol.css */

/* Define CSS Variables for Suite Capitol Theme */
:root {
    --capitol-primary-color: #0d47a1; /* Deep Blue for corporate/luxury feel */
    --capitol-secondary-color: #1a73e8; /* Lighter Blue */
    --capitol-accent-color: #ffb300; /* Gold/Amber for highlights */
    --capitol-text-dark: #212529;
    --capitol-text-light: #495057;
    --capitol-bg-light: #f8f9fa;
    --capitol-bg-dark: #e0e7eb;
    --capitol-border-color: #ced4da;
    --capitol-shadow-light: rgba(0, 0, 0, 0.08);
    --capitol-shadow-medium: rgba(0, 0, 0, 0.15);
    --capitol-border-radius: 10px;
    --capitol-transition-speed: 0.4s ease-in-out;
}

/* Base styles for the Suite Capitol Tab Content */
#suite-capitol {
    font-family: 'Poppins', sans-serif; /* Ensure Poppins is linked in your main HTML */
    padding: 30px 20px;
    color: var(--capitol-text-dark);
    line-height: 1.6;
    background-color: var(--capitol-bg-light);
    border-radius: var(--capitol-border-radius);
    box-shadow: 0 5px 20px var(--capitol-shadow-light);
    overflow: hidden; /* For potential background elements */
    position: relative;
    z-index: 1; /* Ensure content is above any background patterns */
}

#suite-capitol h3 {
    color: var(--capitol-primary-color);
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
    animation: fadeInDownCapitol 0.8s forwards;
    opacity: 0;
}

#suite-capitol .product-description {
    color: var(--capitol-text-light);
    font-size: 1.1em;
    max-width: 700px;
    margin: 0 auto 40px auto;
    text-align: center;
    animation: fadeInUpCapitol 0.8s forwards 0.2s;
    opacity: 0;
}

/* Package Section Styling */
#suite-capitol .package-section {
    background: linear-gradient(135deg, var(--capitol-primary-color), var(--capitol-secondary-color));
    border-radius: var(--capitol-border-radius);
    padding: 40px;
    margin-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px var(--capitol-shadow-medium);
    transition: transform var(--capitol-transition-speed);
}

#suite-capitol .package-section:hover {
    transform: translateY(-5px);
}

#suite-capitol .package-info {
    flex: 1;
    min-width: 280px;
    padding-right: 30px;
    color: #fff;
    text-align: left;
    position: relative;
    z-index: 2;
}

#suite-capitol .package-title {
    font-size: 3.5em;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 5px;
    letter-spacing: -1px;
    animation: slideInLeftCapitol 1s forwards;
    opacity: 0;
}

#suite-capitol .package-subtitle {
    font-size: 1.2em;
    opacity: 0.9;
    animation: slideInLeftCapitol 1s forwards 0.2s;
    opacity: 0;
}

#suite-capitol .package-branding {
    font-size: 0.9em;
    opacity: 0.8;
    margin-top: 10px;
    font-style: italic;
}

/* Speed Options Styling */
#suite-capitol .speed-options {
    flex: 2;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}

#suite-capitol .speed-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--capitol-border-radius);
    padding: 15px 25px;
    backdrop-filter: blur(5px);
    transition: background-color var(--capitol-transition-speed), transform var(--capitol-transition-speed);
    animation: fadeInRightCapitol 1s forwards;
    opacity: 0;
}

#suite-capitol .speed-item:nth-child(1) { animation-delay: 0.4s; }
#suite-capitol .speed-item:nth-child(2) { animation-delay: 0.6s; }
#suite-capitol .speed-item:nth-child(3) { animation-delay: 0.8s; }

#suite-capitol .speed-item:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateX(5px);
}

#suite-capitol .speed-item .speed {
    font-size: 1.6em;
    font-weight: 600;
    color: var(--capitol-accent-color);
    display: flex;
    align-items: center;
}

#suite-capitol .speed-item .speed::before {
    content: '⚡'; /* Lightning bolt icon */
    margin-right: 8px;
    font-size: 1em;
    filter: drop-shadow(0 0 5px rgba(255, 180, 0, 0.7));
}

#suite-capitol .speed-item .price {
    font-size: 1.8em;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: baseline;
}

#suite-capitol .speed-item .price .rp {
    font-size: 0.6em;
    margin-right: 3px;
    opacity: 0.9;
}

#suite-capitol .speed-item .price .sub-digits {
    font-size: 0.7em;
    vertical-align: super;
    opacity: 0.8;
}

#suite-capitol .speed-item .price .per-month {
    font-size: 0.5em;
    font-weight: normal;
    margin-left: 5px;
    color: rgba(255, 255, 255, 0.7);
}

/* Character/Mascot Overlay */
#suite-capitol .character-overlay {
    position: absolute;
    bottom: -50px;
    right: 20px;
    width: 250px;
    height: 250px;
    background-image: url('https://i.imgur.com/4zF7b8s.png'); /* Replace with your actual character image URL */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 0;
    opacity: 0.7;
    filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.3));
    animation: floatCapitol 4s ease-in-out infinite;
}

/* Why Oxygen.id Section */
#suite-capitol .why-oxygen-section {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}

#suite-capitol .why-oxygen-section h2 {
    color: var(--capitol-primary-color);
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 40px;
    animation: fadeInCapitol 1s forwards;
    opacity: 0;
    animation-delay: 1s;
}

/* Features Grid */
#suite-capitol .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

#suite-capitol .feature-item {
    background-color: #fff;
    padding: 30px;
    border-radius: var(--capitol-border-radius);
    text-align: center;
    box-shadow: 0 8px 20px var(--capitol-shadow-light);
    transition: transform var(--capitol-transition-speed), box-shadow var(--capitol-transition-speed);
    border: 1px solid var(--capitol-border-color);
    overflow: hidden;
    position: relative;
    animation: fadeInUpCapitol 0.8s forwards;
    opacity: 0;
}

#suite-capitol .feature-item:nth-child(1) { animation-delay: 1.2s; }
#suite-capitol .feature-item:nth-child(2) { animation-delay: 1.4s; }
#suite-capitol .feature-item:nth-child(3) { animation-delay: 1.6s; }
#suite-capitol .feature-item:nth-child(4) { animation-delay: 1.8s; }

#suite-capitol .feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px var(--capitol-shadow-medium);
}

#suite-capitol .feature-item h3 {
    color: var(--capitol-primary-color);
    font-size: 1.3em;
    margin-bottom: 15px;
    font-weight: 600;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#suite-capitol .feature-item p {
    font-size: 0.9em;
    color: var(--capitol-text-light);
    line-height: 1.7;
}

#suite-capitol .feature-item .image-wrapper {
    margin-top: 20px;
    border-radius: var(--capitol-border-radius);
    overflow: hidden;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--capitol-bg-dark);
}

#suite-capitol .feature-item .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--capitol-transition-speed);
}

#suite-capitol .feature-item:hover .image-wrapper img {
    transform: scale(1.05);
}

/* Capitol Specific Branding Background */
#suite-capitol .capitol-branding {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://i.imgur.com/your_capitol_pattern.png'); /* Replace with a subtle capitol pattern/texture */
    background-size: cover;
    opacity: 0.03; /* Very subtle */
    z-index: 0;
    border-radius: var(--capitol-border-radius);
    pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    #suite-capitol .package-section {
        flex-direction: column;
        padding: 30px;
    }
    #suite-capitol .package-info {
        padding-right: 0;
        margin-bottom: 30px;
        text-align: center;
    }
    #suite-capitol .package-title {
        font-size: 3em;
    }
    #suite-capitol .package-subtitle {
        font-size: 1.1em;
    }
    #suite-capitol .speed-options {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        padding-top: 20px;
        width: 100%;
    }
    #suite-capitol .character-overlay {
        position: static;
        transform: none;
        margin: 20px auto 0;
        width: 200px;
        height: 200px;
        order: -1;
    }
    #suite-capitol .why-oxygen-section h2 {
        font-size: 2em;
    }
    #suite-capitol .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    #suite-capitol h3 {
        font-size: 2em;
    }
    #suite-capitol .product-description {
        font-size: 1em;
    }
    #suite-capitol .package-title {
        font-size: 2.6em;
    }
    #suite-capitol .speed-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    #suite-capitol .speed-item .speed {
        margin-bottom: 5px;
    }
    #suite-capitol .speed-item .price {
        width: 100%;
        justify-content: flex-end;
    }
    #suite-capitol .feature-item h3 {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    #suite-capitol {
        padding: 20px 15px;
    }
    #suite-capitol h3 {
        font-size: 1.8em;
    }
    #suite-capitol .package-section {
        padding: 25px 15px;
    }
    #suite-capitol .package-title {
        font-size: 2.2em;
    }
    #suite-capitol .why-oxygen-section h2 {
        font-size: 1.6em;
    }
    #suite-capitol .feature-item {
        padding: 20px;
    }
}

/* Keyframe Animations (scoped to #suite-capitol) */
@keyframes fadeInDownCapitol {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUpCapitol {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeftCapitol {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRightCapitol {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInCapitol {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes floatCapitol {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}


/* suite-ayoma.css - Modern, Elegant, Smooth Styles for Ayoma Product Suite */

/* CSS Variables for Easy Theming */
:root {
    --ayoma-primary-green: #38c172; /* Oxygen's core green */
    --ayoma-secondary-green: #2ecc71; /* Lighter shade of green for gradients */
    --ayoma-orange: #ff6600; /* For highlighting "Speed up to" */
    
    --ayoma-text-dark: #2c3e50; /* Charcoal for main headings */
    --ayoma-text-medium: #34495e; /* Darker grey for primary text */
    --ayoma-text-light: #7f8c8d; /* Muted grey for secondary text */
    --ayoma-text-description: #5c677d; /* Slightly darker than light for feature descriptions */
    
    --ayoma-bg-light: #f8fafc; /* Very light background for sections */
    --ayoma-bg-card: #ffffff; /* Pure white for cards */
    --ayoma-border-color: #e0e6ed; /* Soft border color */
    
    --ayoma-shadow-light: rgba(0, 0, 0, 0.08); /* Lighter, subtle shadow */
    --ayoma-shadow-medium: rgba(0, 0, 0, 0.15); /* More pronounced shadow for hover/depth */
    --ayoma-border-radius-large: 20px; /* More rounded corners for main sections */
    --ayoma-border-radius-medium: 12px; /* For inner cards/boxes */
    --ayoma-border-radius-pill: 30px; /* For pill-shaped elements */
    
    --ayoma-transition-duration: 0.4s; /* Smoother animation duration */
    --ayoma-transition-ease: cubic-bezier(0.25, 0.8, 0.25, 1); /* Elegant easing function */
    --ayoma-font-family: 'Poppins', sans-serif; /* Modern font */
}

/* Scoping all styles to the #suite-ayoma container */
#suite-ayoma {
    font-family: var(--ayoma-font-family);
    line-height: 1.6;
    color: var(--ayoma-text-medium);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden; /* Important for contained shadows/animations */
    padding: 30px; /* Base padding for the whole product section */
    background: var(--ayoma-bg-light); /* Light background for the whole section */
    border-radius: var(--ayoma-border-radius-large);
    box-shadow: 0 10px 40px var(--ayoma-shadow-light); /* Overall soft shadow */
}

/* Reset default browser styles for elements inside Ayoma Product scope */
#suite-ayoma * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color var(--ayoma-transition-duration), 
                color var(--ayoma-transition-duration), 
                transform var(--ayoma-transition-duration), 
                box-shadow var(--ayoma-transition-duration),
                border-color var(--ayoma-transition-duration);
}

/* --- Main Heading & Description --- */
#suite-ayoma .section-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
    animation: fadeInSlideDown 0.8s var(--ayoma-transition-ease) forwards;
    opacity: 0;
    transform: translateY(-20px);
}

#suite-ayoma .section-title {
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--ayoma-text-dark);
    margin-bottom: 15px;
    line-height: 1.2;
}

#suite-ayoma .section-description {
    font-size: 1.15rem;
    color: var(--ayoma-text-light);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

/* --- Product Card Section --- */
#suite-ayoma .product-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-bottom: 60px;
}

#suite-ayoma .product-card {
    background: var(--ayoma-bg-card);
    border-radius: var(--ayoma-border-radius-large);
    box-shadow: 0 8px 30px var(--ayoma-shadow-light);
    overflow: hidden;
    flex: 1;
    min-width: 320px;
    max-width: 650px; /* Allow wider card for single/multiple speeds */
    display: flex;
    flex-direction: column;
    transition: transform var(--ayoma-transition-duration) var(--ayoma-transition-ease), 
                box-shadow var(--ayoma-transition-duration) var(--ayoma-transition-ease);
    position: relative;
    z-index: 1; /* Ensure card content is above any background effects */
    animation: fadeInScaleUp 0.8s var(--ayoma-transition-ease) forwards 0.4s;
    opacity: 0;
    transform: scale(0.95);
}

#suite-ayoma .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 45px var(--ayoma-shadow-medium);
}

/* Card Header - "Paket Stream" */
#suite-ayoma .card-header {
    background: linear-gradient(135deg, var(--ayoma-primary-green), var(--ayoma-secondary-green));
    color: var(--ayoma-bg-card);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

#suite-ayoma .card-header::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: rotate(45deg);
    pointer-events: none;
}

#suite-ayoma .package-title-left {
    text-align: left;
    position: relative;
    z-index: 2;
}

#suite-ayoma .package-title {
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#suite-ayoma .suitable-text {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-top: 5px;
}

/* Speed and Price Display */
#suite-ayoma .speed-price-display {
    display: flex;
    flex-direction: column; /* Stacks speed options */
    gap: 15px; /* Space between speed options */
    padding: 25px 30px;
    background: var(--ayoma-bg-card);
    border-bottom-left-radius: var(--ayoma-border-radius-large);
    border-bottom-right-radius: var(--ayoma-border-radius-large);
}

#suite-ayoma .speed-option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--ayoma-border-color);
    transition: background-color 0.3s ease;
}

#suite-ayoma .speed-option-item:last-child {
    border-bottom: none;
}

#suite-ayoma .speed-option-item:hover {
    background-color: var(--ayoma-bg-light);
}

#suite-ayoma .speed-up-to {
    font-size: 0.9rem;
    color: var(--ayoma-text-light);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

#suite-ayoma .speed-up-to .icon {
    font-size: 1.1em;
    margin-right: 5px;
    color: var(--ayoma-orange);
}

#suite-ayoma .speed-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ayoma-text-dark);
    display: flex;
    align-items: baseline;
    line-height: 1;
}

#suite-ayoma .speed-unit {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ayoma-text-medium);
    margin-left: 5px;
}

#suite-ayoma .price-main {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ayoma-primary-green);
    display: flex;
    align-items: baseline;
}

#suite-ayoma .price-main .currency {
    font-size: 0.7em;
    vertical-align: super;
    margin-right: 2px;
    font-weight: normal; /* Make Rp less bold */
}

#suite-ayoma .price-decimal {
    font-size: 0.8em;
    vertical-align: super;
    font-weight: normal;
    color: var(--ayoma-text-light);
}

#suite-ayoma .price-period {
    font-size: 0.8rem;
    color: var(--ayoma-text-light);
    margin-left: 5px;
    font-weight: normal;
}

/* --- Character / Mascot --- */
#suite-ayoma .mascot-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 180px; /* Adjust size as needed */
    height: 180px;
    object-fit: contain;
    transform: translateX(20px) translateY(20px); /* Slightly off-center for dynamic look */
    pointer-events: none; /* Do not block clicks */
    z-index: 0; /* Keep it in the background */
    filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.2));
    animation: floatMascot 4s ease-in-out infinite;
}

/* --- Why Oxygen.id Section --- */
#suite-ayoma .why-oxygen-section {
    text-align: center;
    margin-bottom: 50px;
}

#suite-ayoma .why-oxygen-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ayoma-text-dark);
    margin-bottom: 40px;
    animation: fadeInSlideUp 0.8s var(--ayoma-transition-ease) forwards 0.6s;
    opacity: 0;
    transform: translateY(20px);
}

#suite-ayoma .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

#suite-ayoma .feature-item {
    background: var(--ayoma-bg-card);
    border-radius: var(--ayoma-border-radius-medium);
    box-shadow: 0 5px 20px var(--ayoma-shadow-light);
    padding: 30px;
    text-align: left; /* Align text left as per image */
    transition: transform var(--ayoma-transition-duration) var(--ayoma-transition-ease), 
                box-shadow var(--ayoma-transition-duration) var(--ayoma-transition-ease);
    border: 1px solid var(--ayoma-border-color);
    animation: fadeInScaleUp 0.8s var(--ayoma-transition-ease) forwards;
    opacity: 0;
    transform: scale(0.95);
}

/* Staggered animation delays for feature items */
#suite-ayoma .feature-item:nth-child(1) { animation-delay: 0.8s; }
#suite-ayoma .feature-item:nth-child(2) { animation-delay: 1.0s; }
#suite-ayoma .feature-item:nth-child(3) { animation-delay: 1.2s; }
#suite-ayoma .feature-item:nth-child(4) { animation-delay: 1.4s; }


#suite-ayoma .feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px var(--ayoma-shadow-medium);
}

#suite-ayoma .feature-item h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ayoma-primary-green);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

#suite-ayoma .feature-item h3::before { /* Placeholder for icon if you want to add */
    content: ''; /* Or '⭐', '⚡', etc. */
    margin-right: 10px;
    font-size: 1.2em;
    color: var(--ayoma-orange); /* Or another accent color */
}

#suite-ayoma .feature-item p {
    font-size: 0.95rem;
    color: var(--ayoma-text-description);
    line-height: 1.7;
    margin-bottom: 15px; /* Space before image */
}

#suite-ayoma .feature-image-wrapper {
    width: 100%;
    height: 180px; /* Fixed height for consistency */
    border-radius: var(--ayoma-border-radius-medium);
    overflow: hidden;
    margin-top: 15px; /* Space between text and image */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#suite-ayoma .feature-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    transition: transform var(--ayoma-transition-duration) var(--ayoma-transition-ease);
}

#suite-ayoma .feature-item:hover .feature-image-wrapper img {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    #suite-ayoma {
        padding: 25px;
    }
    #suite-ayoma .section-title {
        font-size: 2.4rem;
    }
    #suite-ayoma .section-description {
        font-size: 1.05rem;
    }
    #suite-ayoma .product-card {
        max-width: 500px;
    }
    #suite-ayoma .card-header {
        padding: 25px;
    }
    #suite-ayoma .package-title {
        font-size: 2.2rem;
    }
    #suite-ayoma .speed-price-display {
        padding: 20px 25px;
    }
    #suite-ayoma .speed-value {
        font-size: 2rem;
    }
    #suite-ayoma .price-main {
        font-size: 1.8rem;
    }
    #suite-ayoma .mascot-image {
        width: 150px;
        height: 150px;
        transform: translateX(10px) translateY(10px);
    }
    #suite-ayoma .why-oxygen-section h2 {
        font-size: 2rem;
    }
    #suite-ayoma .feature-item {
        padding: 25px;
    }
    #suite-ayoma .feature-item h3 {
        font-size: 1.25rem;
    }
    #suite-ayoma .feature-item p {
        font-size: 0.9rem;
    }
    #suite-ayoma .feature-image-wrapper {
        height: 160px;
    }
}

@media (max-width: 768px) {
    #suite-ayoma {
        padding: 20px;
    }
    #suite-ayoma .section-header {
        margin-bottom: 40px;
    }
    #suite-ayoma .section-title {
        font-size: 2rem;
    }
    #suite-ayoma .section-description {
        font-size: 0.95rem;
    }
    #suite-ayoma .product-card-container {
        flex-direction: column; /* Stack cards on smaller screens */
        align-items: center;
    }
    #suite-ayoma .product-card {
        min-width: 90%; /* Take more width on smaller screens */
        max-width: 450px; /* Limit max width for readability */
    }
    #suite-ayoma .card-header {
        padding: 20px;
        flex-direction: column; /* Stack title and mascot if needed */
        align-items: flex-start;
    }
    #suite-ayoma .package-title {
        font-size: 2rem;
    }
    #suite-ayoma .suitable-text {
        font-size: 0.85rem;
    }
    #suite-ayoma .mascot-image {
        position: relative; /* Bring mascot into normal flow if stacked */
        transform: none;
        margin-top: 15px;
        align-self: center; /* Center if stacked */
    }
    #suite-ayoma .speed-price-display {
        padding: 15px 20px;
    }
    #suite-ayoma .speed-option-item {
        flex-direction: column; /* Stack speed and price vertically */
        align-items: flex-start;
        padding: 12px 0;
    }
    #suite-ayoma .speed-up-to {
        margin-bottom: 8px;
    }
    #suite-ayoma .speed-value {
        font-size: 1.8rem;
    }
    #suite-ayoma .speed-unit {
        font-size: 1.05rem;
    }
    #suite-ayoma .price-main {
        font-size: 1.6rem;
    }
    #suite-ayoma .price-period {
        font-size: 0.75rem;
    }
    #suite-ayoma .why-oxygen-section h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    #suite-ayoma .features-grid {
        grid-template-columns: 1fr; /* Stack features vertically */
        gap: 20px;
    }
    #suite-ayoma .feature-item {
        padding: 20px;
        text-align: left;
    }
    #suite-ayoma .feature-item h3 {
        font-size: 1.15rem;
    }
    #suite-ayoma .feature-item p {
        font-size: 0.85rem;
    }
    #suite-ayoma .feature-image-wrapper {
        height: 140px;
    }
}

@media (max-width: 480px) {
    #suite-ayoma {
        padding: 15px;
    }
    #suite-ayoma .section-title {
        font-size: 1.8rem;
    }
    #suite-ayoma .section-description {
        font-size: 0.9rem;
    }
    #suite-ayoma .product-card {
        min-width: 100%;
        border-radius: var(--ayoma-border-radius-medium);
    }
    #suite-ayoma .card-header {
        padding: 15px;
    }
    #suite-ayoma .package-title {
        font-size: 1.8rem;
    }
    #suite-ayoma .speed-value {
        font-size: 1.6rem;
    }
    #suite-ayoma .price-main {
        font-size: 1.4rem;
    }
    #suite-ayoma .why-oxygen-section h2 {
        font-size: 1.6rem;
    }
    #suite-ayoma .feature-item h3 {
        font-size: 1.05rem;
    }
    #suite-ayoma .feature-item p {
        font-size: 0.8rem;
    }
}

/* ========================================================================== */
/* ==== ANIMATIONS ========================================================== */
/* ========================================================================== */

@keyframes fadeInSlideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScaleUp {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes floatMascot {
    0% { transform: translateY(0px) translateX(20px); }
    50% { transform: translateY(-10px) translateX(20px) rotate(2deg); }
    100% { transform: translateY(0px) translateX(20px); }
}


/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Base Styles for the entire product-details section */
#product-panduan_device-details {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f2f5; /* Light background for the overall section */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    max-width: 900px; /* Limit width for better readability */
    margin: 30px auto; /* Center the container */
    overflow: hidden; /* Clear floats */
}

/* Update Info Section */
#product-panduan_device-details .update-info {
    text-align: right;
    font-size: 0.85em;
    color: #6c757d;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e0e0e0;
}

/* Main Tab Container */
#product-panduan_device-details .tab-container {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Ensures rounded corners apply to content */
}

/* Main Tabs - Buttons */
#product-panduan_device-details .tabs {
    display: flex;
    justify-content: space-around; /* Distribute buttons evenly */
    background-color: #e9ecef; /* Lighter grey for tab bar */
    border-bottom: 1px solid #dee2e6;
    padding: 0;
    list-style: none; /* Remove default list styling */
    margin: 0;
}

#product-panduan_device-details .tabs .tab-button {
    flex: 1; /* Make buttons take equal width */
    padding: 15px 20px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.05em;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease; /* Smooth transition for hover and active states */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
}

#product-panduan_device-details .tabs .tab-button:hover {
    background-color: #dee2e6;
    color: #007bff; /* Primary blue on hover */
}

#product-panduan_device-details .tabs .tab-button.active {
    background-color: #007bff; /* Primary blue for active tab */
    color: #ffffff;
    border-bottom: 3px solid #0056b3; /* Darker blue underline */
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3); /* Subtle shadow for active tab */
}

#product-panduan_device-details .tabs .tab-button.active i {
    color: #ffffff; /* White icon for active tab */
}

/* Tab Content */
#product-panduan_device-details .tab-content {
    padding: 25px;
    background-color: #ffffff;
    border-top: none; /* Remove top border as it's handled by tab bar */
    animation: fadeIn 0.5s ease-in-out; /* Fade-in effect for content */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#product-panduan_device-details .tab-content h3 {
    color: #34495e; /* Darker heading color */
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e0e0e0;
    text-align: center;
    font-weight: 600;
    font-size: 1.5em; /* Slightly larger for main content headings */
}

#product-panduan_device-details .tab-content p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 10px;
}

/* Nested Tabs (e.g., ONT brands) */
#product-panduan_device-details .nested-tab .tabs {
    background-color: #f8fbfd; /* Lighter background for nested tab bar */
    border-bottom: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 0;
    justify-content: flex-start; /* Align nested buttons to start */
    box-shadow: inset 0 -1px 5px rgba(0,0,0,0.03); /* Subtle inner shadow */
}

#product-panduan_device-details .nested-tab .tabs .tab-button {
    flex: unset; /* Don't force equal width for nested buttons */
    padding: 10px 18px;
    font-size: 0.95em;
    font-weight: 500;
    color: #555;
    border-radius: 6px;
    margin: 5px; /* Add some margin between nested buttons */
}

#product-panduan_device-details .nested-tab .tabs .tab-button:hover {
    background-color: #e0f2f7; /* Light blue on hover for nested */
    color: #007bff;
}

#product-panduan_device-details .nested-tab .tabs .tab-button.active {
    background-color: #3498db; /* A slightly different blue for nested active */
    color: #ffffff;
    border-bottom: none; /* No underline for nested active */
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4); /* Shadow for nested active */
}

#product-panduan_device-details .nested-tab .tabs .tab-button.active i {
    color: #ffffff;
}

/* Nested Tab Content */
#product-panduan_device-details .nested-tab .tab-content {
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fdfefe; /* Very light background for nested content */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.02); /* Gentle inner shadow */
}

#product-panduan_device-details .nested-tab .tab-content p {
    margin-bottom: 8px;
    color: #444;
}

#product-panduan_device-details .nested-tab .tab-content strong {
    color: #007bff; /* Highlight important text */
}

#product-panduan_device-details .nested-tab .tab-content ol {
    list-style-type: decimal; /* Ensure decimal list style */
    padding-left: 25px; /* Indent ordered lists */
    margin-top: 10px;
    margin-bottom: 15px;
}

#product-panduan_device-details .nested-tab .tab-content ol li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: #333;
}

/* Specific styling for each main tab content - if needed */
/* Example: */
#panduan_device-ont-tab {
    /* Styles specific to ONT tab content, if any additional needed */
}

#panduan_device-stb-tab {
    /* Styles specific to STB tab content, e.g., different background */
    /* background-color: #f9f9f9; */
}

#panduan_device-iptv-tab {
    /* Styles specific to IPTV tab content */
    /* border-left: 5px solid #28a745; */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #product-panduan_device-details {
        padding: 20px;
        margin: 20px auto;
    }
    #product-panduan_device-details .tabs {
        flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
    }
    #product-panduan_device-details .tabs .tab-button {
        flex: 1 1 auto; /* Allow buttons to grow/shrink */
        font-size: 0.9em;
        padding: 12px 15px;
    }
    #product-panduan_device-details .nested-tab .tabs .tab-button {
        font-size: 0.85em;
        padding: 8px 12px;
        margin: 3px;
    }
    #product-panduan_device-details .tab-content {
        padding: 18px;
    }
    #product-panduan_device-details .tab-content h3 {
        font-size: 1.3em;
    }
    #product-panduan_device-details .nested-tab .tab-content {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    #product-panduan_device-details {
        padding: 15px;
        margin: 15px auto;
    }
    #product-panduan_device-details .tabs .tab-button {
        font-size: 0.8em;
        padding: 10px 10px;
    }
    #product-panduan_device-details .tab-content h3 {
        font-size: 1.1em;
    }
    #product-panduan_device-details .nested-tab .tabs .tab-button {
        font-size: 0.75em;
        padding: 6px 10px;
    }
    #product-panduan_device-details .tab-content,
    #product-panduan_device-details .nested-tab .tab-content {
        padding: 12px;
    }
}

/* --- New CSS for Sub-Tab Content Styling (Inside .tab-content) --- */

/* Guide Introduction/Overview */
.guide-intro {
    background-color: #e6f7ff; /* Light blue background */
    border: 1px solid #91d5ff; /* Slightly darker blue border */
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1); /* Subtle shadow */
    transition: all 0.3s ease;
}

.guide-intro:hover {
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15);
}

.guide-subtitle {
    font-size: 1.8em; /* Larger, more prominent subtitle */
    font-weight: 700;
    color: #0056b3; /* Darker blue */
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 8px;
}

.guide-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #007bff;
    border-radius: 2px;
}

.guide-intro p {
    font-size: 1.05em;
    color: #333;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Step Card Styling */
.step-guide-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 20px; /* Space between step cards */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); /* More pronounced shadow */
    overflow: hidden;
    transition: all 0.3s ease; /* Smooth hover effect */
}

.step-guide-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px); /* Slight lift on hover */
}

/* Step Header */
.step-guide-card .step-header {
    display: flex;
    align-items: center;
    padding: 18px 25px; /* More padding for header */
    background: linear-gradient(to right, #f0f8ff, #e9f5ff); /* Gradient background */
    border-bottom: 1px solid #d0e0f0;
}

/* Step Number Circle */
.step-guide-card .step-number-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Larger circle */
    height: 40px;
    border-radius: 50%;
    background-color: #007bff; /* Primary blue */
    color: #fff;
    font-weight: bold;
    font-size: 1.2em; /* Larger icon/number */
    margin-right: 15px; /* More space to title */
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4); /* Shadow for circle */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.step-guide-card .step-number-circle:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.step-guide-card .step-number-circle i {
    font-size: 0.8em; /* Adjust icon size within circle */
}

/* Step Title */
.step-guide-card .step-title {
    font-size: 1.3em; /* More prominent title */
    font-weight: 600;
    color: #2c3e50;
    margin: 0; /* Remove default margin */
}

/* Step Content Body */
.step-guide-card .step-content-body {
    padding: 20px 25px;
    line-height: 1.7; /* Improved line height for readability */
    color: #444;
}

.step-guide-card .step-content-body p {
    margin-bottom: 12px;
}

.step-guide-card .step-content-body p:last-child {
    margin-bottom: 0;
}

.step-guide-card .step-content-body ul,
.step-guide-card .step-content-body ol {
    list-style-position: inside; /* List markers inside content flow */
    padding-left: 0; /* No default padding, handled by text indent */
    margin: 15px 0;
}

.step-guide-card .step-content-body ul li,
.step-guide-card .step-content-body ol li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: #333;
    position: relative; /* For custom list styles */
    padding-left: 25px; /* Space for custom bullet/number */
}

/* Custom list bullet for UL (if not using Tailwind's list-disc) */
.step-guide-card .step-content-body ul li::before {
    content: "\2022"; /* Unicode for bullet */
    color: #007bff;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

/* For OL, if Tailwind's list-decimal isn't enough, customize counter */
/* This requires removing Tailwind's list-decimal class */
/*
.step-guide-card .step-content-body ol {
    counter-reset: step-counter;
}
.step-guide-card .step-content-body ol li::before {
    counter-increment: step-counter;
    content: counter(step-counter) ".";
    color: #007bff;
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
    position: absolute;
    left: 0;
}
*/


/* Special Content Blocks */
.highlight-code {
    background-color: #f0f2f5; /* Light background for code/IPs */
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 3px 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* Monospace font for code */
    color: #c20000; /* Dark red for emphasis */
    font-size: 0.9em;
    white-space: nowrap; /* Keep on one line if possible */
    display: inline-block; /* Allow padding */
    vertical-align: middle; /* Align with text */
}

.credentials-guide {
    background-color: #e9f5ff; /* Light blue for credentials */
    border: 1px solid #b3d9ff;
    border-left: 5px solid #007bff; /* Strong left border */
    border-radius: 8px;
    padding: 12px 15px;
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Space between username/password */
    font-size: 0.95em;
    color: #333;
    align-items: center;
}

.credentials-guide strong {
    color: #0056b3; /* Darker blue for actual values */
    font-weight: 600;
}

.menu-path-guide {
    background-color: #f0f8f0; /* Light green for menu paths */
    border: 1px solid #d4edda;
    border-radius: 5px;
    padding: 4px 10px;
    font-weight: 600;
    color: #28a745; /* Green for emphasis */
    display: inline-flex; /* For icon alignment */
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    cursor: help; /* Indicate it's a path */
}

.menu-path-guide:hover {
    background-color: #e6fae6;
    box-shadow: 0 1px 5px rgba(40, 167, 69, 0.2);
}

.menu-path-guide i {
    font-size: 0.8em;
    color: #218838;
}

.note-info {
    background-color: #fffde7; /* Light yellow for info notes */
    border: 1px solid #ffe0b2;
    border-left: 5px solid #ff9800; /* Orange left border */
    border-radius: 5px;
    padding: 10px 15px;
    margin: 15px 0;
    font-size: 0.9em;
    color: #6a4f00;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 1px 5px rgba(255, 152, 0, 0.1);
}

.note-info i {
    color: #ff9800;
    font-size: 1.1em;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.warning-alert {
    background-color: #ffe6e6; /* Light red for warnings */
    border: 1px solid #ffcccc;
    border-left: 5px solid #e74c3c; /* Red left border */
    border-radius: 5px;
    padding: 10px 15px;
    margin: 15px 0;
    font-size: 0.9em;
    color: #a70000;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 1px 5px rgba(231, 76, 60, 0.1);
}

.warning-alert i {
    color: #e74c3c;
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Save Button */
.save-button {
    background-color: #28a745; /* Green button */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}

.save-button:hover {
    background-color: #218838; /* Darker green on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4);
}

.save-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2);
}

/* Guide Footer */
.guide-footer {
    text-align: center;
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px dashed #e0e0e0;
}

/* Responsive Adjustments for Sub-Tab Content */
@media (max-width: 768px) {
    .guide-intro {
        padding: 15px 20px;
        margin-bottom: 20px;
    }
    .guide-subtitle {
        font-size: 1.5em;
    }
    .guide-intro p {
        font-size: 1em;
    }
    .step-guide-card {
        margin-bottom: 15px;
    }
    .step-guide-card .step-header {
        padding: 15px 20px;
    }
    .step-guide-card .step-number-circle {
        width: 35px;
        height: 35px;
        font-size: 1.1em;
        margin-right: 12px;
    }
    .step-guide-card .step-title {
        font-size: 1.1em;
    }
    .step-guide-card .step-content-body {
        padding: 15px 20px;
    }
    .credentials-guide,
    .note-info,
    .warning-alert {
        padding: 10px 12px;
        font-size: 0.85em;
    }
    .save-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .guide-intro {
        padding: 12px 15px;
        margin-bottom: 15px;
    }
    .guide-subtitle {
        font-size: 1.2em;
    }
    .guide-intro p {
        font-size: 0.9em;
    }
    .step-guide-card {
        margin-bottom: 12px;
    }
    .step-guide-card .step-header {
        padding: 12px 15px;
    }
    .step-guide-card .step-number-circle {
        width: 30px;
        height: 30px;
        font-size: 1em;
        margin-right: 10px;
    }
    .step-guide-card .step-title {
        font-size: 1em;
    }
    .step-guide-card .step-content-body {
        padding: 12px 15px;
    }
    .credentials-guide,
    .note-info,
    .warning-alert {
        padding: 8px 10px;
        font-size: 0.8em;
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start;
        gap: 5px;
    }
    .save-button {
        padding: 8px 15px;
        font-size: 0.85em;
    }
}

 /* TP-Link Setting Stylesheet */
.tplink-setting {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
}

.tplink-header {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: white;
    padding: 30px 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tplink-header h1 {
    margin: 0;
    font-size: 2.2em;
}

.tplink-intro {
    font-size: 1.1em;
    opacity: 0.9;
    margin-top: 10px;
}

.tplink-step {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-left: 5px solid #4CAF50;
}

.tplink-step-header {
    margin-bottom: 15px;
}

.tplink-step-number {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    font-weight: bold;
}

.tplink-step h2 {
    display: inline;
    color: #1B5E20;
    font-size: 1.3em;
}

.tplink-step-content {
    padding-left: 40px;
}

.tplink-note {
    background-color: #F1F8E9;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    border-left: 4px solid #8BC34A;
}

.tplink-note-title {
    font-weight: bold;
    color: #2E7D32;
    margin-bottom: 8px;
}

.tplink-footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    color: #666;
    font-size: 0.9em;
}

.tplink-important {
    color: #D32F2F;
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 600px) {
    .tplink-setting {
        padding: 15px;
    }
    
    .tplink-header {
        padding: 20px 15px;
    }
    
    .tplink-header h1 {
        font-size: 1.8em;
    }
    
    .tplink-step {
        padding: 15px;
    }
    
    .tplink-step-content {
        padding-left: 20px;
    }
}

/*tabel harga stream

/* --- Variables for easy theme changes --- */
:root {
  /* Primary brand colors */
  --imagestream-primary: #007bff; /* Biru cerah, bisa untuk judul utama atau highlight */
  --imagestream-secondary: #00bcd4; /* Biru tosca, untuk aksen atau elemen sekunder */
  --imagestream-accent-green: #4CAF50; /* Hijau cerah untuk sukses/positif */
  --imagestream-accent-orange: #FF9800; /* Oranye untuk penekanan/peringatan */

  /* Text colors */
  --imagestream-text-dark: #333333; /* Teks gelap utama */
  --imagestream-text-medium: #555555; /* Teks sedang, untuk body copy */
  --imagestream-text-light: #757575; /* Teks ringan, untuk footer atau detail */
  --imagestream-text-white: #ffffff; /* Teks putih untuk kontras dengan background gelap */

  /* Background colors */
  --imagestream-bg-light: #f4f7f6; /* Latar belakang sangat terang */
  --imagestream-bg-gradient-start: #e0f2f7; /* Gradien awal yang lembut */
  --imagestream-bg-gradient-end: #cce9f5; /* Gradien akhir yang lebih dalam */
  --imagestream-card-bg: #ffffff; /* Latar belakang kartu */

  /* Border and shadow */
  --imagestream-border-color: #e0e0e0; /* Warna border halus */
  --imagestream-shadow-light: rgba(0, 0, 0, 0.04); /* Shadow sangat ringan */
  --imagestream-shadow-medium: rgba(0, 0, 0, 0.1); /* Shadow sedang */
  --imagestream-shadow-strong: rgba(0, 0, 0, 0.18); /* Shadow kuat */

  /* Spacing */
  --imagestream-spacing-sm: 10px;
  --imagestream-spacing-md: 20px;
  --imagestream-spacing-lg: 30px;
}

/* Pastikan Anda mengimpor font Inter dari Google Fonts di HTML Anda, contoh: */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> */

/* --- Base Body Styles for smoother font rendering and a clean background --- */
body {
  font-family: 'Inter', sans-serif; /* Menggunakan Inter, font modern yang bersih */
  line-height: 1.6;
  color: var(--imagestream-text-medium); /* Warna teks default yang lembut */
  background: linear-gradient(135deg, var(--imagestream-bg-gradient-start) 0%, var(--imagestream-bg-gradient-end) 100%);
  min-height: 100vh; /* Memastikan gradien mengisi seluruh viewport */
  margin: 0;
  display: flex; /* Menggunakan Flexbox untuk centering */
  justify-content: center; /* Pusatkan horizontal */
  align-items: center; /* Pusatkan vertikal */
  overflow-x: hidden; /* Mencegah scroll horizontal yang tidak diinginkan */
  padding: var(--imagestream-spacing-md); /* Memberi sedikit padding di sekeliling */
  box-sizing: border-box; /* Memastikan padding tidak menambah lebar elemen */
}

/* --- Main Container: .imagestream --- */
.imagestream {
  max-width: 1000px;
  width: 90%; /* Responsive width */
  margin: var(--imagestream-spacing-lg) auto; /* Increased margin for breathing room */
  padding: var(--imagestream-spacing-lg); /* Increased padding */
  background: var(--imagestream-card-bg);
  border-radius: 25px; /* Softer rounded corners */
  box-shadow: 0 15px 45px var(--imagestream-shadow-medium); /* More prominent, soft shadow */
  animation: fadeInScale 0.9s ease-out forwards; /* New animation */
  position: relative; /* For potential pseudo-elements */
  overflow: hidden; /* Clean up any overflow from inner elements */
  border: 1px solid var(--imagestream-border-color); /* Subtle border */
}

/* --- Headings --- */
.imagestream h1,
.imagestream h2 {
  text-align: center;
  margin-bottom: var(--imagestream-spacing-md); /* Increased spacing */
  font-weight: 700;
  color: var(--imagestream-text-dark);
}

.imagestream h1 {
  font-size: 38px; /* Larger, more impactful */
  color: var(--imagestream-primary); /* Using primary color */
  letter-spacing: -0.5px; /* Slightly tighter for modern feel */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05); /* Subtle text shadow */
}

.imagestream h2 {
  font-size: 20px; /* Slightly larger */
  color: var(--imagestream-text-light); /* Softer secondary color */
  max-width: 700px; /* Constrain width for readability */
  margin-left: auto;
  margin-right: auto;
}

/* --- Plan Header --- */
.imagestream .plan-header {
  background: var(--imagestream-primary);
  color: var(--imagestream-text-white);
  padding: 18px 25px; /* More padding */
  border-radius: 18px 18px 0 0; /* Match parent container radius */
  font-size: 24px; /* Larger */
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  z-index: 1; /* Ensure it's above potential pseudo-elements */
}

.imagestream .plan-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
  z-index: -1;
}

.imagestream .plan-header.orange {
  background: var(--imagestream-accent-orange); /* Using accent color */
}

/* --- Plan Group (Flex Container) --- */
.imagestream .plan-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px; /* Increased gap */
  padding: var(--imagestream-spacing-lg) 0; /* More vertical padding */
}

/* --- Individual Plan Cards --- */
.imagestream .plan {
  background: var(--imagestream-card-bg);
  border: 1px solid var(--imagestream-border-color);
  border-radius: 18px; /* Softer radius */
  width: 250px; /* Slightly wider */
  min-width: 220px; /* Ensure minimum size */
  padding: 25px; /* More padding */
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition curve */
  box-shadow: 0 6px 20px var(--imagestream-shadow-light); /* Softer initial shadow */
  position: relative;
  overflow: hidden; /* Hide any overflow */
  display: flex; /* Flexbox for internal alignment */
  flex-direction: column;
  justify-content: space-between; /* Distribute content */
}

.imagestream .plan:hover {
  transform: translateY(-10px) rotateZ(0.5deg); /* More dynamic hover effect */
  box-shadow: 0 20px 40px var(--imagestream-shadow-medium); /* More pronounced shadow on hover */
  border-color: var(--imagestream-primary); /* Highlight border on hover */
}

/* --- Speed Text --- */
.imagestream .speed {
  font-size: 28px; /* Larger and more prominent */
  font-weight: 700;
  color: var(--imagestream-accent-orange); /* Vibrant speed color */
  margin-bottom: 15px; /* More spacing */
  position: relative;
  display: inline-block; /* To allow pseudo-elements for effects */
}

.imagestream .speed::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--imagestream-primary);
  margin: 8px auto 0;
  border-radius: 5px;
  transform: scaleX(0);
  transition: transform 0.3s ease-out;
}

.imagestream .plan:hover .speed::after {
  transform: scaleX(1); /* Line animates on hover */
}

/* --- Price Text --- */
.imagestream .price {
  font-size: 18px; /* Slightly larger */
  line-height: 1.6;
  color: var(--imagestream-text-dark);
  margin-bottom: var(--imagestream-spacing-md); /* Added spacing */
}

/* --- Highlight Section --- */
.imagestream .highlight {
  background: var(--imagestream-accent-orange); /* Using accent color for primary highlight */
  color: var(--imagestream-text-white); /* White text for contrast */
  padding: 16px 20px; /* More padding */
  border-radius: 15px; /* Softer corners */
  margin: var(--imagestream-spacing-lg) auto; /* Increased margin */
  font-weight: 600;
  text-align: center;
  max-width: 800px;
  box-shadow: 0 5px 20px var(--imagestream-shadow-light);
  transform: scale(0.98); /* Slightly scale down for "pop-out" effect */
  transition: all 0.3s ease-in-out;
  animation: slideInUp 0.7s ease-out forwards; /* New animation */
}

.imagestream .highlight:hover {
  transform: scale(1.01); /* Subtle hover scale */
  box-shadow: 0 8px 25px var(--imagestream-shadow-medium);
}

.imagestream .highlight.green {
  background: var(--imagestream-accent-green); /* Green for success */
}

/* --- Footer --- */
.imagestream .footer {
  margin-top: var(--imagestream-spacing-lg); /* More spacing */
  text-align: center;
  font-weight: 500; /* Slightly lighter font weight */
  color: var(--imagestream-text-light); /* Softer color */
  font-size: 15px; /* Slightly larger */
  letter-spacing: 0.2px;
}

/* --- Keyframe Animations --- */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  body {
    padding: var(--imagestream-spacing-sm);
  }
  .imagestream {
    padding: var(--imagestream-spacing-md); /* Adjust padding for smaller screens */
    margin: var(--imagestream-spacing-md) auto;
    border-radius: 20px;
  }

  .imagestream h1 {
    font-size: 30px; /* Smaller font for mobile */
  }

  .imagestream h2 {
    font-size: 17px;
  }

  .imagestream .plan-group {
    flex-direction: column;
    align-items: center;
    gap: var(--imagestream-spacing-md); /* Slightly less gap */
    padding: var(--imagestream-spacing-md) 0;
  }

  .imagestream .plan {
    width: 85%; /* Make plans wider on mobile */
    max-width: 300px; /* Limit max width for readability */
    padding: var(--imagestream-spacing-md);
  }

  .imagestream .plan-header {
    font-size: 20px;
    padding: 15px 20px;
  }

  .imagestream .speed {
    font-size: 24px;
  }

  .imagestream .highlight {
    padding: 12px 15px;
    margin: var(--imagestream-spacing-md) auto;
    font-size: 15px;
  }

  .imagestream .footer {
    font-size: 13px;
    margin-top: 25px;
  }
}

/* Additional smaller breakpoint for very small devices */
@media (max-width: 480px) {
  .imagestream {
    padding: 15px;
    margin: 15px auto;
  }

  .imagestream h1 {
    font-size: 26px;
  }

  .imagestream h2 {
    font-size: 15px;
  }

  .imagestream .plan {
    width: 95%;
  }
}

/*stream update*/

/* Styling khusus untuk id="stream-plus-update" */
#stream-plus-update {
    /* Properti untuk tampilan 'melebar' dan 'modern smooth' */
    background: white; /* Latar belakang putih bersih */
    border-radius: 15px; /* Sudut lebih membulat untuk tampilan modern */
    box-shadow: 0 10px 35px rgba(0,0,0,0.12); /* Bayangan yang lebih dalam dan halus untuk efek mengangkat */
    padding: 40px; /* Padding yang lebih besar untuk ruang bernapas */
    margin: 30px auto; /* Margin atas/bawah dan tengah otomatis */
    width: 90%; /* Lebar responsif, mengisi 90% dari parent */
    max-width: 1000px; /* Batasi lebar maksimum agar tidak terlalu lebar di layar besar */
    overflow: hidden; /* Pastikan konten tidak meluber */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font modern */
    color: #333; /* Warna teks utama */
    line-height: 1.7; /* Jarak baris yang nyaman untuk dibaca */
    transition: all 0.3s ease-in-out; /* Transisi halus untuk efek hover atau perubahan lainnya */
}

/* Opsional: Efek hover untuk interaktivitas tambahan */
#stream-plus-update:hover {
    transform: translateY(-5px); /* Sedikit mengangkat saat di-hover */
    box-shadow: 0 15px 45px rgba(0,0,0,0.18); /* Bayangan sedikit lebih kuat saat di-hover */
}

/* Jika Anda ingin elemen ini memiliki header di dalamnya, seperti '.pricing-header' */
#stream-plus-update .section-header { /* Ubah ini sesuai kelas yang Anda gunakan di dalam elemen */
    background: linear-gradient(135deg, #007bff, #0056b3); /* Contoh gradient biru (bisa diganti hijau atau warna lain) */
    color: white;
    padding: 25px 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

#stream-plus-update .section-header h2 { /* Contoh styling untuk judul di dalam header */
    margin: 0;
    font-size: 2em;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Jika ada daftar atau informasi penting di dalamnya */
#stream-plus-update ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#stream-plus-update ul li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}

#stream-plus-update ul li::before {
    content: '✓'; /* Contoh ikon checklist */
    position: absolute;
    left: 0;
    color: #28a745; /* Warna hijau untuk checklist */
    font-weight: bold;
}


/* Responsive Design untuk #stream-plus-update */
@media (max-width: 768px) {
    #stream-plus-update {
        padding: 25px;
        margin: 20px auto;
        border-radius: 12px;
    }
    #stream-plus-update .section-header {
        padding: 20px 20px;
        margin-bottom: 25px;
    }
    #stream-plus-update .section-header h2 {
        font-size: 1.6em;
    }
}

@media (max-width: 480px) {
    #stream-plus-update {
        padding: 15px;
        margin: 15px auto;
        border-radius: 10px;
        width: 95%; /* Lebih lebar di mobile */
    }
    #stream-plus-update .section-header {
        padding: 15px 15px;
        margin-bottom: 15px;
    }
    #stream-plus-update .section-header h2 {
        font-size: 1.3em;
    }
    #stream-plus-update ul li {
        font-size: 0.9em;
        padding-left: 20px;
    }
}

/* Coverage Package Table Styles */

/* --- Global Styles & Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary-green: #2ecc71;
    --secondary-orange: #f39c12;
    --accent-red: #e74c3c;
    --promo-yellow: #f1c40f;
    --text-dark: #34495e;
    --text-medium: #555;
    --text-light: #7f8c8d;
    --bg-light: #ecf0f1;
    --border-light: #dfe6e9;
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --transition-speed: 0.3s ease-in-out;
}

body {
    margin: 0;
    padding: 20px;
    background-color: var(--bg-light);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    box-sizing: border-box;
}

#coverage-package {
    width: 100%;
    max-width: 460px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--shadow-medium);
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    animation: fadeInScale 0.8s ease-out forwards;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#coverage-package .header {
    text-align: center;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}

#coverage-package .header h1 {
    font-size: 2.5em;
    color: var(--primary-green);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    animation: slideInTop 0.6s ease-out forwards;
}

#coverage-package .header h2 {
    font-size: 1.3em;
    color: var(--secondary-orange);
    margin: 6px 0 0;
    font-weight: 600;
    animation: slideInBottom 0.6s ease-out forwards 0.2s;
}

@keyframes slideInTop {
    from { transform: translateY(-40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInBottom {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#coverage-package .tagline {
    text-align: center;
    font-size: 1em;
    color: var(--text-medium);
    margin-bottom: 20px;
    font-weight: 500;
    animation: fadeIn 0.8s ease-out forwards 0.4s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#coverage-package .package-section {
    margin-bottom: 18px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 8px var(--shadow-light);
    background-color: #fcfcfc;
}

#coverage-package .package-section h3 {
    background: linear-gradient(to right, var(--primary-green), #38d37a);
    color: #fff;
    padding: 10px 15px;
    font-size: 1.1em;
    text-align: center;
    font-weight: 600;
}

#coverage-package .package-list {
    display: flex;
    flex-direction: column;
}

#coverage-package .package-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-light);
    background-color: #fff;
    transition: var(--transition-speed);
}

#coverage-package .package-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px var(--shadow-light);
    background-color: #fefefe;
}

#coverage-package .package-item:nth-child(even) {
    background-color: #f9f9f9;
}

#coverage-package .speed {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

#coverage-package .speed .label {
    background-color: var(--secondary-orange);
    color: #fff;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
}

#coverage-package .speed .value {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--text-dark);
}

#coverage-package .speed .unit {
    font-size: 0.95em;
    color: var(--text-light);
}

#coverage-package .price {
    text-align: right;
    font-size: 1.6em;
    font-weight: 700;
    color: var(--accent-red);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

#coverage-package .price .currency {
    font-size: 0.7em;
    color: var(--text-dark);
    margin-right: -2px;
}

#coverage-package .price .period {
    font-size: 0.5em;
    color: var(--text-light);
}

#coverage-package .footer-notes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 15px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85em;
    color: var(--text-medium);
    gap: 10px;
}

#coverage-package .footer-notes .note {
    min-width: 120px;
    max-width: 160px;
    text-align: center;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}

#coverage-package .footer-notes .note i {
    font-size: 1.1em;
    color: var(--primary-green);
    margin-bottom: 4px;
}

#coverage-package .footer-notes .note.price-included {
    background-color: var(--accent-red);
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1em;
    transform: rotate(-3deg);
    transition: transform var(--transition-speed);
}

#coverage-package .footer-notes .note.price-included:hover {
    transform: rotate(0deg) scale(1.05);
}

#coverage-package .bottom-promo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    gap: 15px;
}

#coverage-package .promo-text,
#coverage-package .promo-box {
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    transition: var(--transition-speed);
}

#coverage-package .promo-text {
    background: linear-gradient(to right, var(--promo-yellow), #fcd349);
    color: var(--text-dark);
    flex-grow: 1;
    box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
}

#coverage-package .promo-text:hover {
    transform: translateY(-5px);
}

#coverage-package .promo-box {
    background: linear-gradient(to right, var(--accent-red), #c0392b);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

#coverage-package .promo-box:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    #coverage-package {
        padding: 15px;
    }

    #coverage-package .header h1 {
        font-size: 2em;
    }

    #coverage-package .header h2 {
        font-size: 1.1em;
    }

    #coverage-package .tagline {
        font-size: 0.9em;
    }

    #coverage-package .package-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #coverage-package .price {
        font-size: 1.4em;
        width: 100%;
        justify-content: flex-end;
    }

    #coverage-package .footer-notes .note {
        width: 46%;
    }

    #coverage-package .bottom-promo {
        flex-direction: column;
        gap: 10px;
    }

    #coverage-package .promo-text,
    #coverage-package .promo-box {
        width: 100%;
    }
}

@media (max-width: 480px) {
    #coverage-package {
        padding: 10px;
    }

    #coverage-package .header h1 {
        font-size: 1.6em;
    }

    #coverage-package .header h2 {
        font-size: 0.95em;
    }

    #coverage-package .tagline {
        font-size: 0.85em;
    }

    #coverage-package .speed .value {
        font-size: 1.2em;
    }

    #coverage-package .price {
        font-size: 1.2em;
    }

    #coverage-package .footer-notes .note {
        width: 100%;
    }
}




 /* ==== Visionplus ========================================================== */

        .visionplus {
            max-width: 400px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .visionplus-header {
            background: linear-gradient(to right, #ff8c00, #ff4500); /* Orange gradient */
            color: white;
            padding: 20px;
            text-align: center;
        }

        .visionplus-header-img { /* Renamed from .visionplus-header img */
            max-width: 150px;
            margin-bottom: 10px;
        }

        .visionplus-header-title { /* Renamed from .visionplus-header h1 */
            margin: 0;
            font-size: 24px;
        }

        .visionplus-section-title { /* Renamed from .section-title */
            padding: 15px 20px;
            font-size: 16px;
            color: #333;
            border-bottom: 1px solid #eee;
        }

        .visionplus-ala-carte-list { /* Renamed from .ala-carte-list */
            padding: 0 20px 20px;
        }

        .visionplus-service-item { /* Renamed from .service-item */
            display: flex;
            align-items: center;
            background-color: #1a1a1a; /* Dark background for service items */
            color: white;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            position: relative;
        }

        .visionplus-service-item-logo { /* Renamed from .service-item .logo */
            flex-shrink: 0;
            margin-right: 15px;
        }

        .visionplus-service-item-logo-img { /* Renamed from .service-item .logo img */
            width: 80px; /* Adjust as needed */
            height: auto;
            display: block;
        }

        .visionplus-service-item-details { /* Renamed from .service-item .details */
            flex-grow: 1;
        }

        .visionplus-service-item-details-h3 { /* Renamed from .service-item .details h3 */
            margin: 0 0 5px 0;
            font-size: 16px;
            color: #00ccff; /* Light blue for Vision+ text */
        }

        .visionplus-service-item-details-p { /* Renamed from .service-item .details p */
            margin: 0;
            font-size: 14px;
            color: #ccc;
        }

        .visionplus-service-item-price { /* Renamed from .service-item .price */
            background-color: #ff6600; /* Orange background for price */
            color: white;
            padding: 8px 12px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 15px;
            flex-shrink: 0;
            margin-left: 10px;
        }

        .visionplus-service-item-arrow { /* Renamed from .service-item .arrow */
            color: #ccc;
            font-size: 20px;
            margin-left: 10px;
        }


/* Transvision Tab Compact Style */

#transvision-tab1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 900px;
    margin: 15px auto;
    padding: 20px;
    background-color: #ffffff;
    color: #333333;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    line-height: 1.5;
}

#transvision-tab1 h1, 
#transvision-tab1 h2, 
#transvision-tab1 h3 {
    color: #1a73e8;
    margin-top: 20px;
    margin-bottom: 12px;
    font-weight: 600;
}

#transvision-tab1 h3 {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
    font-size: 1.2em;
}

#transvision-tab1 p {
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #444444;
}

#transvision-tab1 ul {
    padding-left: 20px;
    list-style-type: none;
    margin-bottom: 20px;
}

#transvision-tab1 li {
    margin-bottom: 8px;
    padding-left: 18px;
    position: relative;
    font-size: 0.9em;
    color: #444444;
}

#transvision-tab1 li:before {
    content: "•";
    color: #1a73e8;
    position: absolute;
    left: 0;
    font-size: 1.1em;
    top: -1px;
}

#transvision-tab1 .highlight {
    color: #1a73e8;
    font-weight: 600;
    font-size: 0.95em;
}

#transvision-tab1 .box-feature {
    background-color: #f8f9fa;
    border-left: 2px solid #1a73e8;
    padding: 12px 15px;
    margin: 18px 0;
    border-radius: 0 4px 4px 0;
    font-size: 0.9em;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #transvision-tab1 {
        padding: 15px;
        margin: 10px;
    }
    
    #transvision-tab1 h3 {
        font-size: 1.1em;
    }
    
    #transvision-tab1 p,
    #transvision-tab1 li {
        font-size: 0.85em;
    }
}


/* Product Giveaway Details Specific Styles */
.product-giveaway-details {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.product-giveaway-details h1 {
    color: #4CAF50;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.product-giveaway-details h2 {
    color: #555;
    margin-top: 20px;
}

.product-giveaway-details h3 {
    color: #777;
    margin-top: 15px;
}

.product-giveaway-details ul, 
.product-giveaway-details ol {
    padding-left: 20px;
}

.product-giveaway-details li {
    margin-bottom: 10px;
}

.product-giveaway-details .note {
    font-style: italic;
    color: #888;
    margin-top: 20px;
    border-left: 3px solid #4CAF50;
    padding-left: 10px;
}

/* Section-specific styles */
.product-giveaway-details .summary-section {
    /* Add specific styles for summary section */
}

.product-giveaway-details .journey-section {
    /* Add specific styles for journey section */
}

.product-giveaway-details .syarat-ketentuan-section {
    /* Add specific styles for terms section */
}

.product-giveaway-details .mekanisme-section {
    /* Add specific styles for mechanism section */
}

.product-giveaway-details .mekanisme-section a {
    color: #4CAF50;
    text-decoration: none;
}

.product-giveaway-details .mekanisme-section a:hover {
    text-decoration: underline;
}

/* Product Giveaway Q & A Tabel */


   .giveaway-container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .giveaway-header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 20px;
            text-align: center;
            font-size: 1.5em;
        }
        
        .qna-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .qna-table th {
            background-color: #f2f2f2;
            padding: 12px 15px;
            text-align: left;
            border-bottom: 2px solid #ddd;
        }
        
        .qna-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #ddd;
            vertical-align: top;
        }
        
        .qna-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .qna-table tr:hover {
            background-color: #f1f1f1;
        }
        
        .category-cell {
            font-weight: bold;
            color: #2E7D32;
            width: 15%;
        }
        
        .question-cell {
            width: 30%;
        }
        
        .answer-cell {
            width: 55%;
        }
        
        .highlight {
            background-color: #E8F5E9;
            font-style: italic;
        }
        
        @media screen and (max-width: 768px) {
            .qna-table {
                display: block;
            }
            
            .qna-table thead, 
            .qna-table tbody, 
            .qna-table th, 
            .qna-table td, 
            .qna-table tr {
                display: block;
            }
            
            .qna-table th {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }
            
            .qna-table tr {
                margin-bottom: 15px;
                border: 1px solid #ddd;
            }
            
            .qna-table td {
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 40%;
                width: 100%;
            }
            
            .qna-table td:before {
                position: absolute;
                top: 12px;
                left: 15px;
                width: 35%;
                padding-right: 10px;
                white-space: nowrap;
                font-weight: bold;
            }
            
            .qna-table td.category-cell:before {
                content: "Kategori";
            }
            
            .qna-table td.question-cell:before {
                content: "Pertanyaan";
            }
            
            .qna-table td.answer-cell:before {
                content: "Jawaban";
            }
            
            .category-cell, .question-cell, .answer-cell {
                width: 100%;
            }
        }