FileMgr

✏️ /home/mien4214/public_html/webcp-lama/app/Views/home/index.php

✕ Tutup

<?php

use App\Models\Menu_model;

$menu    = new Menu_model();
$profil  = $menu->profil();
$layanan = $menu->layanan();
$tiktok_videos = $menu->getTiktokVideos();
?>
<?= $this->extend('layout/wrapper') ?>
<?= $this->section('style') ?>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&display=swap" rel="stylesheet">

body {
        font-family: 'Space Grotesk', sans-serif;
        color: var(--neo-dark);
        background-color: var(--neo-bg);
    }

h1, h2, h3, h4, h5, h6 {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--neo-dark);
    }
    /* --- KOMPONEN NEO-BRUTALISM UMUM --- */
    .neo-box {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        overflow: hidden;
        background: var(--neo-white);
        transition: transform 0.2s ease;
    }

.neo-btn {
        background: var(--neo-dark);
        color: var(--neo-bg);
        border: var(--border-thick);
        border-radius: 50px;
        padding: 10px 25px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
        box-shadow: 4px 4px 0px var(--neo-red);
    }
    .neo-btn:hover {
        background: var(--neo-red);
        color: var(--neo-bg);
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--neo-dark);
    }

/* --- HERO SECTION MERAH --- */
    #hero-neo {
        padding: 160px 0 80px 0; 
        background-color: var(--neo-red); 
        border-bottom: var(--border-thick);
    }

.hero-text-area {
        text-align: center;
        margin-bottom: 50px;
        position: relative;
    }

.hero-title {
        font-size: 4.5rem;
        line-height: 1.1;
        letter-spacing: -2px;
        margin-bottom: 20px;
        color: var(--neo-bg); 
    }

#hero-neo .neo-btn {
        background: var(--neo-bg);
        color: var(--neo-dark);
        box-shadow: 4px 4px 0px var(--neo-dark);
    }
    #hero-neo .neo-btn:hover {
        background: var(--neo-yellow);
        color: var(--neo-dark);
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--neo-dark);
    }

.badge-clients {
        position: absolute;
        left: 0;
        top: 0; 
        background: var(--neo-yellow); 
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        padding: 15px;
        text-align: left;
        width: 150px;
        transform: rotate(-3deg);
        box-shadow: 4px 4px 0px var(--neo-dark);
    }
    .badge-clients img {
        width: 30px;
        border-radius: 50%;
        border: 2px solid var(--neo-dark);
        margin-left: -10px;
    }
    .badge-clients img:first-child { margin-left: 0; }
    
    .hero-image-container {
        border: var(--border-thick);
        border-radius: var(--radius-large);
        overflow: hidden;
        position: relative;
        height: 500px;
        box-shadow: 8px 8px 0px var(--neo-dark); 
    }
    .hero-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .hero-float-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        background: var(--neo-dark);
        color: var(--neo-bg);
        border-radius: var(--radius-medium);
        border: var(--border-thick);
        padding: 20px;
        min-width: 180px;
    }
    .hero-float-menu ul {
        list-style: none;
        padding: 0; margin: 0;
    }
    .hero-float-menu li {
        border-bottom: 2px solid var(--neo-bg);
        padding: 10px 0;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
    }
    .hero-float-menu li:last-child { border-bottom: none; }

/* --- OUTLET CARDS --- */
    .outlet-section-title {
        text-align: center;
        margin-top: 60px;
        margin-bottom: 20px;
        font-size: 2rem;
        color: #e5deb3;
    }
    
    .outlet-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 20px;
        margin-bottom: 40px;
    }

.outlet-card {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        padding: 25px;
        height: 100%;
        box-shadow: 4px 4px 0px var(--neo-dark);
        display: flex;
        flex-direction: column;
        transition: transform 0.2s ease;
    }
    
    .outlet-card:hover {
        transform: translateY(-5px);
        box-shadow: 6px 6px 0px var(--neo-red);
    }

.outlet-card:nth-child(1) { background-color: var(--neo-yellow); }
    .outlet-card:nth-child(2) { background-color: var(--neo-pink); }
    .outlet-card:nth-child(3) { background-color: var(--neo-blue); }
    .outlet-card:nth-child(4) { background-color: var(--neo-white); }
    
    .outlet-card h4 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .outlet-card p {
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 20px;
        flex-grow: 1;
    }

.btn-maps-small {
        background: var(--neo-white);
        color: var(--neo-dark);
        border: 2px solid var(--neo-dark);
        border-radius: 50px;
        padding: 8px 15px;
        font-size: 0.85rem;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        box-shadow: 2px 2px 0px var(--neo-dark);
        transition: 0.2s;
        display: block;
    }
    .btn-maps-small:hover {
        background: var(--neo-dark);
        color: var(--neo-white);
        box-shadow: 4px 4px 0px var(--neo-red);
    }

/* --- MARQUEE BANNER --- */
    .neo-marquee {
        background: var(--neo-red); 
        border-top: var(--border-thick);
        border-bottom: var(--border-thick);
        padding: 15px 0;
        overflow: hidden;
        white-space: nowrap;
        font-weight: 700;
        font-size: 1.5rem;
        color: var(--neo-bg); 
        display: flex;
        align-items: center;
    }
    .marquee-content {
        display: inline-block;
        animation: scroll-left 20s linear infinite;
    }
    @keyframes scroll-left {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-50%); }
    }
    .marquee-item { margin: 0 30px; }

/* --- CENTERED CAROUSEL MENU --- */
    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        border-bottom: var(--border-thick);
        padding-bottom: 15px;
    }
    .menu-carousel-container {
        position: relative;
        display: flex;
        align-items: center;
        margin: 40px 0;
        margin-top: 0;
    }
    .menu-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth; 
        gap: 30px;
        padding: 50px calc(50% - 175px); 
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    .menu-carousel::-webkit-scrollbar { display: none; }

.menu-card-wrapper {
        flex: 0 0 350px; 
        scroll-snap-align: center;
        position: relative;
        cursor: pointer;
        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        opacity: 0.4; 
        transform: scale(0.85); 
    }
    .menu-card-wrapper.is-active {
        opacity: 1;
        transform: scale(1);
        z-index: 2;
    }
    
    .menu-card {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 5px 5px 0px var(--neo-dark); 
        transition: transform 0.2s ease;
    }
    .menu-card:hover {
        transform: translate(-3px, -3px);
        box-shadow: 8px 8px 0px var(--neo-red); 
    }

.menu-card-title {
        padding: 15px;
        font-size: 1.2rem;
        font-weight: 700;
        border-bottom: var(--border-thick);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .menu-card-img {
        padding: 15px;
        border-bottom: var(--border-thick);
        background: var(--neo-white);
    }
    .menu-card-img img {
        width: 100%;
        border-radius: 8px;
        border: 2px solid var(--neo-dark);
    }
    .menu-card-desc {
        padding: 15px;
        font-size: 0.85rem;
        font-weight: 600;
        flex-grow: 1;
        background-color: inherit; 
    }

/* Floating Badges Emoji */
    .floating-badge {
        position: absolute;
        border: var(--border-thick);
        padding: 6px 14px;
        border-radius: 50px;
        font-weight: 800;
        font-size: 0.85rem;
        text-transform: uppercase;
        box-shadow: 3px 3px 0px var(--neo-dark); 
        z-index: 10;
        white-space: nowrap;
        background: var(--neo-white); 
        color: var(--neo-dark);
        opacity: 0; 
        transform: scale(0.5);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        animation: float-wiggle 3s ease-in-out infinite;
    }
    .menu-card-wrapper.is-active .floating-badge {
        opacity: 1;
        transform: scale(1);
    }

.badge-spicy { background: var(--neo-red); color: var(--neo-white); top: -15px; right: -10px; --rot: 12deg; animation-delay: 0s; }
    .badge-sweet { background: var(--neo-yellow); color: var(--neo-dark); bottom: 80px; left: -20px; --rot: -15deg; animation-delay: 0.5s; }
    .badge-level { background: var(--neo-blue); color: var(--neo-dark); top: 40%; right: -25px; --rot: -8deg; animation-delay: 1s; }
    .badge-new { background: var(--neo-pink); color: var(--neo-dark); top: -20px; left: -10px; --rot: -10deg; animation-delay: 0.2s; }

@keyframes float-wiggle {
        0%, 100% { transform: translateY(0) rotate(var(--rot)); }
        50% { transform: translateY(-8px) rotate(calc(var(--rot) + 5deg)); } 
    }

/* Carousel Buttons */
    .carousel-btn {
        background: var(--neo-yellow);
        color: var(--neo-dark);
        border: var(--border-thick);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: bold;
        cursor: pointer;
        position: absolute;
        z-index: 100;
        box-shadow: 4px 4px 0px var(--neo-dark);
        transition: 0.2s;
    }
    .carousel-btn:hover {
        background: var(--neo-red);
        color: var(--neo-white);
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--neo-dark);
    }
    .carousel-btn.prev { left: 5%; }
    .carousel-btn.next { right: 5%; }

/* --- 1. PANDUAN ORDER --- */
    .guide-section { 
        padding: 60px 15px;
        max-width: 1100px;
        margin: 40px auto 0 auto; 
    }
    .guide-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 30px; 
    }
    .guide-box {
        background: var(--neo-white);
        border: var(--border-thick);
        border-radius: var(--radius-large);
        padding: 40px;
        box-shadow: 8px 8px 0px var(--neo-dark);
    }
    .guide-box.box-red { 
        background: var(--neo-red); 
        color: var(--neo-cream); 
    }
    .guide-box.box-red h3, .guide-box.box-red h4 { 
        color: var(--neo-cream); 
    }
    .guide-box h3 { 
        font-size: 1.8rem; 
        margin-bottom: 25px; 
        border-bottom: 3px solid currentColor; 
        padding-bottom: 15px; 
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .tag-group { 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
        margin-bottom: 30px; 
    }
    .tag-item {
        border: 2px solid var(--neo-dark);
        border-radius: 50px;
        padding: 10px 15px;
        font-weight: 800;
        font-size: 0.9rem;
        background: var(--neo-bg);
        color: var(--neo-dark);
        box-shadow: 2px 2px 0px var(--neo-dark);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }
    .tag-group .tag-item:last-child:nth-child(odd) {
        grid-column: span 2;
    }
    .lvl-1 { background: var(--neo-white); }
    .lvl-2 { background: var(--neo-blue); }
    .lvl-3 { background: var(--neo-pink); }
    .lvl-4 { background: var(--neo-yellow); }
    .lvl-5 { background: #FF9800; }
    .lvl-6 { background: #FF5722; color: white; }
    .lvl-7 { background: var(--neo-dark); color: white; }

/* --- 2. BANNER OJOL --- */
    .ojol-banner {
        background: var(--neo-yellow);
        border: var(--border-thick);
        border-radius: var(--radius-large);
        padding: 60px 40px;
        text-align: center;
        box-shadow: 10px 10px 0px var(--neo-red);
    }
    .ojol-banner h2 { font-size: 2.8rem; margin-bottom: 30px; line-height: 1.1; }
    .ojol-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
    
    .btn-ojol {
        border: var(--border-thick);
        border-radius: 50px;
        padding: 12px 35px;
        font-weight: 800;
        font-size: 1.2rem;
        text-decoration: none;
        color: var(--neo-dark);
        box-shadow: 5px 5px 0px var(--neo-dark);
        transition: 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .btn-ojol:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0px var(--neo-dark); color: var(--neo-dark); }
    .btn-gofood { background: #EE2737; color: white; }
    .btn-grab { background: #00B14F; color: white; }
    .btn-shopee { background: #EE4D2D; color: white; }

/* --- GOOGLE MAPS REVIEW CAROUSEL --- */
    .review-section {
        background: var(--neo-blue); 
        border-top: var(--border-thick);
        border-bottom: var(--border-thick);
        padding: 60px 0;
    }
    .review-header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        flex-wrap: wrap;
        gap: 15px;
    }
    .review-carousel-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .review-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 20px;
        padding: 20px 5px 30px 5px; 
        scrollbar-width: none; 
        -ms-overflow-style: none;
        width: 100%;
    }
    .review-carousel::-webkit-scrollbar { display: none; }
    .review-card-wrapper {
        flex: 0 0 350px; 
        scroll-snap-align: start; 
    }
    .review-card {
        background: var(--neo-white);
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        padding: 25px;
        box-shadow: 5px 5px 0px var(--neo-dark);
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: transform 0.2s;
        cursor: pointer;
    }
    .review-card:hover {
        transform: translateY(-5px);
        box-shadow: 8px 8px 0px var(--neo-red); 
    }
    .gmap-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--neo-white);
        border: 2px solid var(--neo-dark);
        border-radius: 50px;
        padding: 8px 20px;
        font-size: 0.9rem;
        font-weight: 700;
        box-shadow: 3px 3px 0px var(--neo-dark);
        text-decoration: none;
        color: var(--neo-dark);
        transition: 0.2s;
    }
    .gmap-badge:hover { background: var(--neo-yellow); color: var(--neo-dark); transform: translate(-2px, -2px); box-shadow: 5px 5px 0px var(--neo-red); }

/* --- 3. FAQ ACCORDION --- */
    .faq-section { max-width: 900px; margin: 40px auto; padding: 0 20px;}
    .faq-title { text-align: center; font-size: 2.5rem; margin-bottom: 40px; }
    .faq-item {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        margin-bottom: 15px;
        background: var(--neo-white);
        box-shadow: 4px 4px 0px var(--neo-dark);
        overflow: hidden;
    }
    .faq-question {
        padding: 20px 25px;
        font-weight: 800;
        font-size: 1.1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--neo-blue);
        margin: 0;
        transition: 0.3s;
    }
    .faq-item.active .faq-question { background: var(--neo-pink); border-bottom: var(--border-thick); }
    .faq-answer {
        padding: 0 25px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease;
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1.6;
    }
    .faq-item.active .faq-answer { padding: 25px; max-height: 300px; }

/* --- TIKTOK CAROUSEL --- */
    .tiktok-carousel-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 20px;
    }
    .tiktok-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 25px;
        padding: 20px 5px 30px 5px; 
        scrollbar-width: none; 
        -ms-overflow-style: none;
        width: 100%;
    }
    .tiktok-carousel::-webkit-scrollbar { display: none; }
    .tiktok-card-wrapper {
        flex: 0 0 340px; 
        scroll-snap-align: center; 
    }
    .tiktok-carousel-container .carousel-btn.prev { left: -15px; }
    .tiktok-carousel-container .carousel-btn.next { right: -15px; }

.tiktok-embed-container {
        background: var(--neo-white);
        border: 2px solid var(--neo-dark);
        border-radius: 8px;
        height: 580px;
        overflow-y: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tiktok-embed-container::-webkit-scrollbar {
        display: none;
    }

/* --- SECTION PROMO & BERITA (CAROUSEL) --- */
    .promo-section-wrapper { 
        background: var(--neo-blue); 
        border-top: var(--border-thick);
        border-bottom: var(--border-thick);
        padding: 80px 0; 
        margin-top: 60px;
    }
    .berita-section-wrapper { 
        background: var(--neo-pink); 
        border-bottom: var(--border-thick);
        padding: 80px 0; 
    }
    .news-title { 
        text-align: center; 
        font-size: 2.5rem; 
        margin-bottom: 40px; 
        color: var(--neo-dark);
    }

/* Struktur Carousel Promo & Berita */
    .news-carousel-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .news-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 30px;
        padding: 20px 5px 30px 5px; 
        scrollbar-width: none; 
        -ms-overflow-style: none;
        width: 100%;
    }
    .news-carousel::-webkit-scrollbar { display: none; }
    .news-card-wrapper {
        flex: 0 0 350px; /* Lebar card */
        scroll-snap-align: start; 
        height: auto;
    }

.news-card {
        background: var(--neo-white);
        border: var(--border-thick);
        border-radius: var(--radius-large);
        overflow: hidden;
        box-shadow: 6px 6px 0px var(--neo-dark);
        transition: transform 0.2s;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .news-card:hover { 
        transform: translateY(-5px); 
        box-shadow: 8px 8px 0px var(--neo-red); 
    }
    .news-img { 
        width: 100%; 
        height: 220px; 
        object-fit: cover; 
        border-bottom: var(--border-thick); 
    }
    .news-content { 
        padding: 25px; 
        flex-grow: 1; 
        display: flex; 
        flex-direction: column; 
    }
    .news-date { 
        font-size: 0.8rem; 
        font-weight: 800; 
        background: var(--neo-yellow); 
        padding: 5px 12px; 
        border: 2px solid var(--neo-dark); 
        border-radius: 50px; 
        display: inline-block; 
        margin-bottom: 15px; 
        align-self: flex-start;
        box-shadow: 2px 2px 0px var(--neo-dark);
    }
    .news-card h4 { 
        font-size: 1.3rem; 
        margin-bottom: 12px; 
        line-height: 1.4; 
    }
    .news-card p { 
        font-size: 0.95rem; 
        margin-bottom: 25px; 
        flex-grow: 1; 
        display: -webkit-box; 
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical; 
        overflow: hidden; 
        font-weight: 500;
    }

.news-carousel-container .carousel-btn.prev { left: -20px; }
    .news-carousel-container .carousel-btn.next { right: -20px; }

/* --- MEDIA QUERIES --- */
    @media only screen and (max-width: 991px) {
        .outlet-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } 
        .carousel-btn.prev { left: 1%; }
        .carousel-btn.next { right: 1%; }
        #hero-neo { padding: 100px 0 80px 0; }
    }
    @media only screen and (max-width: 768px) {
        .outlet-section-title { font-size: 1.5rem; }
        .outlet-card { padding: 15px; }
        .outlet-card h4 { font-size: 0.9rem; margin-bottom: 5px; }
        .outlet-card p { font-size: 0.7rem; line-height: 1.3; margin-bottom: 15px; }
        .btn-maps-small { padding: 6px 10px; font-size: 0.75rem; }
        .menu-carousel { padding: 50px calc(50% - 140px); }
        .menu-card-wrapper { flex: 0 0 280px; }
        .review-card-wrapper { flex: 0 0 85%; } 
        .carousel-btn, .review-carousel-container .carousel-btn { display: none; }
        .guide-grid { grid-template-columns: 1fr; }
        .ojol-banner h2 { font-size: 2rem; }
        .btn-ojol { width: 100%; justify-content: center; }
        .guide-box { padding: 30px 20px; }
        .guide-box h3 { font-size: 1.4rem; }
        .tag-item { font-size: 0.8rem; padding: 8px 5px; }
        
        .tiktok-card-wrapper { flex: 0 0 90%; } 
        .tiktok-carousel-container .carousel-btn { display: none; }
        
        .news-card-wrapper { flex: 0 0 85%; }
        .news-carousel-container .carousel-btn { display: none; }
        
        .news-title { font-size: 2rem; }
        .promo-section-wrapper, .berita-section-wrapper { padding: 50px 0; margin-top: 40px; }
    }
    
    /* --- MODAL BERITA --- */
    .neo-modal .modal-content {
        border: var(--border-thick);
        border-radius: var(--radius-large);
        box-shadow: 8px 8px 0px var(--neo-dark);
        background-color: var(--neo-bg);
    }
    .neo-modal .modal-header {
        border-bottom: var(--border-thick);
        border-top-left-radius: calc(var(--radius-large) - 3px);
        border-top-right-radius: calc(var(--radius-large) - 3px);
        padding: 20px 25px;
    }
    .neo-modal .modal-title {
        font-weight: 800;
        font-size: 1.5rem;
        color: var(--neo-dark);
        margin: 0;
    }
    .neo-modal .btn-close-neo {
        background: var(--neo-red);
        border: 2px solid var(--neo-dark);
        border-radius: 50%;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--neo-white);
        font-weight: bold;
        font-size: 1.2rem;
        cursor: pointer;
        box-shadow: 2px 2px 0px var(--neo-dark);
        transition: 0.2s;
    }
    .neo-modal .btn-close-neo:hover {
        background: var(--neo-dark);
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0px var(--neo-red);
    }
    .neo-modal .modal-body {
        padding: 30px;
        color: var(--neo-dark);
    }
    .modal-date-badge {
        background: var(--neo-white);
        border: 2px solid var(--neo-dark);
        padding: 8px 15px;
        border-radius: 50px;
        font-weight: 800;
        font-size: 0.85rem;
        display: inline-block;
        margin-bottom: 20px;
        box-shadow: 3px 3px 0px var(--neo-dark);
    }
    .modal-ringkasan {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--neo-red);
        border-left: 4px solid var(--neo-red);
        padding-left: 15px;
    }
    .modal-isi {
        font-size: 1rem;
        line-height: 1.6;
        font-weight: 500;
    }
    .modal-isi p {
        margin-bottom: 15px;
    }
    .modal-img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        margin-bottom: 25px;
        box-shadow: 5px 5px 0px var(--neo-dark);
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('content') ?>

<section id="hero-neo" style="padding-bottom: 0;">
    <div class="container" data-aos="fade-up">
        <div class="hero-text-area">
            <div class="badge-clients d-none d-lg-block">
                <div style="margin-bottom: 10px;">
                    <img src="https://i.pravatar.cc/100?img=1" alt="user">
                    <img src="https://i.pravatar.cc/100?img=2" alt="user">
                    <img src="https://i.pravatar.cc/100?img=3" alt="user">
                </div>
                <div style="font-weight: 700; font-size: 0.9rem; line-height: 1.2;">100k+ Happy<br>Clients</div>
            </div>

<h1 class="hero-title">LAPER YAAA ??<br><br>MIE NYINYIR AJA! 🍜<br></h1>
            <a href="<?= base_url('client') ?>" class="neo-btn mt-3">Order Now ➔</a>
        </div>

<div class="hero-image-container">
            <img src="<?= base_url('assets/upload/image/slider1.jpg') ?>" alt="Mie Nyinyir Main">
            
            <div class="hero-float-menu d-none d-md-block">
                <ul>
                    <li>Mie Nyinyir<span>🍜</span></li>
                    <li>Dimsum <span>🥟</span></li>
                    <li>Mie Julid <span>🌶️</span></li>
                    <li>Beverage <span>🍹</span></li>
                </ul>
            </div>
        </div>
        
        <h2 class="outlet-section-title">📍 TEMUKAN OUTLET KAMI</h2>
        
        <div class="outlet-grid">
            <?php if (!empty($toko)) : ?>
                <?php foreach ($toko as $row) : 
                    $nama_toko   = esc($row['nm_toko']);
                    $alamat_toko = esc($row['almt_toko']);
                    $link_gmap   = esc($row['gmap']);
                    
                    $nomor_wa = esc($row['nowa']);
                    if(substr($nomor_wa, 0, 1) == '0') {
                        $nomor_wa = '62' . substr($nomor_wa, 1);
                    }
                ?>
                <div class="outlet-card">
                    <h4><i class="bi bi-geo-alt-fill"></i> <?= strtoupper($nama_toko); ?></h4>
                    <p><?= $alamat_toko; ?></p>
                    
                    <div class="d-flex gap-2 mt-auto">
                        <a href="<?= $link_gmap; ?>" target="_blank" class="btn-maps-small flex-fill">Maps ↗</a>
                        <a href="https://wa.me/<?= $nomor_wa; ?>" target="_blank" class="btn-maps-small flex-fill" style="background-color: #25D366; color: white; border-color: #25D366;">
                            <i class="bi bi-whatsapp"></i> WA
                        </a>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else : ?>
                <p style="grid-column: 1 / -1; text-align:center; color:white;">Belum ada outlet aktif saat ini.</p>
            <?php endif; ?>
        </div>
    </div>
</section>

<div class="neo-marquee mt-5">
    <div class="marquee-content">
        <span class="marquee-item">🍜 MIE PEDAS KEKINIAN</span><span class="marquee-item">✦</span>
        <span class="marquee-item">🥟 100% HIGIENIS</span><span class="marquee-item">✦</span>
        <span class="marquee-item">🌶️ TANPA PENGAWET</span><span class="marquee-item">✦</span>
        <span class="marquee-item">🔥 SPICY LEVEL EXTREME</span><span class="marquee-item">✦</span>
        <span class="marquee-item">🍜 MIE PEDAS KEKINIAN</span><span class="marquee-item">✦</span>
        <span class="marquee-item">🥟 100% HIGIENIS</span><span class="marquee-item">✦</span>
        <span class="marquee-item">🌶️ TANPA PENGAWET</span><span class="marquee-item">✦</span>
        <span class="marquee-item">🔥 SPICY LEVEL EXTREME</span><span class="marquee-item">✦</span>
    </div>
</div>

<section class="container mt-5" style="margin-top: 0 !important; padding-bottom: 0 !important; padding-top: 2rem;">
        <div class="menu-header">
            <h2 class="mb-0">MIE NYINYIR MENU</h2>
            <div>
                <a href="<?= base_url('makanan/allproduk') ?>" class="neo-btn" style="padding: 5px 15px; font-size: 0.9rem;">View All ➔</a>
            </div>
        </div>

<div class="d-flex flex-wrap gap-2 mb-2" id="kategori-tabs">
            <span class="badge border border-dark text-dark px-3 py-2 rounded-pill tab-btn active-tab" data-filter="all" style="background:var(--neo-yellow); cursor:pointer;">SEMUA MENU</span>
            <?php if(!empty($kategori_menu)): ?>
                <?php foreach($kategori_menu as $kat): ?>
                    <span class="badge border border-dark text-dark px-3 py-2 rounded-pill tab-btn" data-filter="<?= $kat['kdjenis'] ?>" style="background:var(--neo-white); cursor:pointer; transition: 0.2s;">
                        <?= strtoupper($kat['keterangan']) ?>
                    </span>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </section>

<div class="menu-carousel" id="menuCarousel">
            <?php if(!empty($semua_menu)): ?>
                <?php foreach($semua_menu as $menu): ?>
                <div class="menu-card-wrapper menu-item" data-category="<?= $menu['kdjenis'] ?>" onclick="centerCard(this)">
                    <div class="floating-badge badge-spicy">🌶️ Order!</div>
                    <div class="menu-card" style="background-color: var(--neo-white);">
                        <div class="menu-card-title"><?= strtoupper($menu['nama_menu']) ?> <span>↗</span></div>
                        <div class="menu-card-img">
                            <?php $foto = !empty($menu['gambar']) ? $menu['gambar'] : 'default.webp'; ?>
                           <img src="http://mienyinyir.com/pos/gambar/<?= $foto ?>" alt="<?= $menu['nama_menu'] ?>" style=" object-fit: cover;">
                        </div>
                        <div class="menu-card-desc" style="display: flex; flex-direction: column; justify-content: flex-end;">
                            <span style="font-size: 0.85rem; color: #666; margin-bottom: 5px;"><?= $menu['jenis'] ?></span>
                            <span style="font-size: 1.2rem; font-weight: 800; color: var(--neo-red);">
                                Rp <?= number_format($menu['harga'], 0, ',', '.') ?>
                            </span>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <p style="text-align: center; width: 100%;">Belum ada menu tersedia.</p>
            <?php endif; ?>
        </div>
        <button class="carousel-btn next" onclick="scrollCarousel(1)">→</button>
    </div>

<section class="guide-section" data-aos="fade-up" style="padding-top: 0;">
        <div class="guide-grid">
            <div class="guide-box">
                <h3>🍜 VARIAN MIE & MENU</h3>
                <div class="tag-group">
                    <div class="tag-item" style="background:var(--neo-yellow);">Mie Nyinyir (Manis)</div>
                    <div class="tag-item" style="background:var(--neo-pink);">Mie Julit (Gurih)</div>
                    <div class="tag-item" style="background:var(--neo-blue);">Aneka Dimsum</div>
                    <div class="tag-item" style="background:var(--neo-white);">Beverages / Minuman</div>
                </div>

<h4 class="mt-4 mb-3" style="font-weight:800; display:flex; align-items:center; gap:8px;">
                    🥓 PILIHAN TOPPING
                </h4>
                <div class="tag-group" style="margin-bottom: 0;">
                    <div class="tag-item">Ayam Tabur</div>
                    <div class="tag-item">Jamur</div>
                    <div class="tag-item">Teriyaki</div>
                    <div class="tag-item">Keju Lumer</div>
                </div>
            </div>

<div class="guide-box box-red">
                <h3>🔥 LEVEL PEDAS</h3>
                <p style="font-weight: 600; margin-bottom: 25px; line-height: 1.5;">
                    Berani coba sampai level puncak? Pilih level pedas sesuai nyalimu!
                </p>
                <div class="tag-group" style="margin-bottom: 0;">
                    <div class="tag-item lvl-1">👶 MANJA (0 Cabe)</div>
                    <div class="tag-item lvl-2">😎 PEMULA</div>
                    <div class="tag-item lvl-3">😏 SINIS</div>
                    <div class="tag-item lvl-4">🗣️ FRONTAL</div>
                    <div class="tag-item lvl-5">😠 NYINYIR</div>
                    <div class="tag-item lvl-6">🤬 SADIS</div>
                    <div class="tag-item lvl-7">☠️ HATERS (Max)</div>
                </div>
            </div>
        </div>
    </section>

<section class="container" data-aos="zoom-in" style="padding-top: 0;">
        <div class="ojol-banner">
            <h2>MAGER KELUAR? 🛵<br>PESAN VIA OJOL SEKARANG!</h2>
            <div class="ojol-buttons">
                <a href="#" class="btn-ojol btn-grab"><i class="bi bi-bag-check-fill"></i> GrabFood</a>
                <a href="#" class="btn-ojol btn-gofood"><i class="bi bi-bicycle"></i> GoFood</a>
                <a href="#" class="btn-ojol btn-shopee"><i class="bi bi-shop"></i> ShopeeFood</a>
            </div>
        </div>
    </section>

<section class="review-section">
        <div class="container" data-aos="fade-up">
            <div class="review-header-top justify-content-center flex-column text-center mb-4">
                <h2 class="mb-3">🌟 APA KATA MEREKA?</h2>
                <div class="d-flex flex-wrap gap-2 justify-content-center" id="review-tabs">
                    <?php if (!empty($toko)) : ?>
                        <?php $i = 0; foreach ($toko as $row) : ?>
                            <span class="badge border border-dark text-dark px-4 py-2 rounded-pill rev-tab-btn <?= $i == 0 ? 'active-rev-tab' : '' ?>" 
                                  data-target="rev-<?= $i ?>" 
                                  style="background: <?= $i == 0 ? 'var(--neo-yellow)' : 'var(--neo-white)' ?>; cursor:pointer; font-size: 1rem; transition: 0.2s; box-shadow: 2px 2px 0px var(--neo-dark);">
                                <i class="bi bi-geo-alt-fill"></i> <?= strtoupper(esc($row['nm_toko'])) ?>
                            </span>
                        <?php $i++; endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>

<div class="review-content-container neo-box" style="padding: 20px;">
                <?php if (!empty($toko)) : ?>
                    <?php $j = 0; foreach ($toko as $row) : ?>
                        <div id="rev-<?= $j ?>" class="rev-content-item" style="display: <?= $j == 0 ? 'block' : 'none' ?>;">
                            <div class="text-center mb-4">
                                <a href="<?= esc($row['gmap']) ?>" target="_blank" class="gmap-badge">
                                    <i class="bi bi-google" style="color:#EA4335;"></i> Lihat <?= esc($row['nm_toko']) ?> di Google Maps ↗
                                </a>
                            </div>
                            <?php if (!empty($row['review'])) : ?>
                                <?= $row['review'] ?>
                            <?php else : ?>
                                <p class="text-center text-muted mt-4" style="font-weight: 600;">
                                    <em>Review cabang <?= esc($row['nm_toko']) ?> sedang disiapkan.</em>
                                </p>
                            <?php endif; ?>
                        </div>
                    <?php $j++; endforeach; ?>
                <?php else: ?>
                    <p class="text-center w-100 fw-bold">Belum ada data toko aktif.</p>
                <?php endif; ?>
            </div>
        </div>
    </section>
    
    <section class="container" data-aos="fade-up">
        <div class="review-header-top justify-content-center flex-column text-center mb-4 mt-5">
            <h2 class="mb-3">📱 VIRAL DI TIKTOK</h2>
            <p class="fw-bold" style="font-size: 1.1rem;">Tonton keseruan dan pedasnya Mie Nyinyir! 🔥</p>
        </div>
        
        <div class="tiktok-carousel-container">
            <button class="carousel-btn prev" onclick="scrollTiktok(-1)">←</button>
            <div class="tiktok-carousel" id="tiktokCarousel">
                <?php if (!empty($tiktok_videos)) : ?>
                    <?php 
                    $colors = ['var(--neo-pink)', 'var(--neo-yellow)', 'var(--neo-white)', 'var(--neo-red)'];
                    $color_index = 0;
                    ?>
                    <?php foreach ($tiktok_videos as $tk) : ?>
                        <?php 
                            $bg_color = $colors[$color_index % count($colors)]; 
                            $color_index++; 
                        ?>
                        <div class="tiktok-card-wrapper">
                            <div class="neo-box" style="background: <?= $bg_color ?>; padding: 15px; box-shadow: 6px 6px 0px var(--neo-dark);">
                                <div class="tiktok-embed-container">
                                    <?= $tk['embed_code'] ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else : ?>
                    <div class="w-100 text-center py-5">
                        <p class="fw-bold">Belum ada video TikTok saat ini.</p>
                    </div>
                <?php endif; ?>
            </div>
            <button class="carousel-btn next" onclick="scrollTiktok(1)">→</button>
            <script async src="https://www.tiktok.com/embed.js"></script>
        </div>
    </section>
    
    <section class="faq-section" data-aos="fade-up">
        <h2 class="faq-title">❓ YANG SERING DITANYAKAN</h2>
        
        <div class="faq-item">
            <div class="faq-question" onclick="toggleFaq(this)">
                Apakah Mie Nyinyir 100% Halal? <span class="faq-icon">+</span>
            </div>
            <div class="faq-answer">
                Tentu saja! Semua bahan baku mulai dari mie, bumbu, ayam tabur, hingga aneka dimsum kami dijamin 100% Halal dan tersertifikasi. Aman dikonsumsi siapa saja.
            </div>
        </div>

<div class="faq-item">
            <div class="faq-question" onclick="toggleFaq(this)">
                Apa bedanya Mie Nyinyir dan Mie Julit? <span class="faq-icon">+</span>
            </div>
            <div class="faq-answer">
                <b>Mie Nyinyir</b> memiliki dominasi rasa pedas manis karena menggunakan racikan kecap rahasia, sedangkan <b>Mie Julit</b> tidak menggunakan kecap sehingga menonjolkan rasa pedas gurih yang nendang banget!
            </div>
        </div>

<div class="faq-item">
            <div class="faq-question" onclick="toggleFaq(this)">
                Bisa bayar pakai QRIS di Outlet? <span class="faq-icon">+</span>
            </div>
            <div class="faq-answer">
                Sangat bisa! Kami menerima pembayaran via QRIS, Debit, maupun Tunai (Cash). Bebas ribet buat kamu yang suka cashless.
            </div>
        </div>

<div class="faq-item">
            <div class="faq-question" onclick="toggleFaq(this)">
                Bagaimana cara gabung Kemitraan (Franchise)? <span class="faq-icon">+</span>
            </div>
            <div class="faq-answer">
                Gampang banget! Kamu bisa klik menu <b>Kemitraan</b> di bagian atas website ini, atau langsung hubungi nomor WhatsApp admin kemitraan kami untuk proposal lengkapnya.
            </div>
        </div>
    </section>

<section class="promo-section-wrapper">
        <div class="container" data-aos="fade-up">
            <h2 class="news-title" style="color: var(--neo-white); text-shadow: 2px 2px 0px var(--neo-dark);">🔥 PROMO TERBARU</h2>
            
            <div class="news-carousel-container">
                <button class="carousel-btn prev" onclick="scrollPromo(-1)">←</button>
                
                <div class="news-carousel" id="promoCarousel">
                    <?php if (!empty($promo_aktif)) : ?>
                        <?php foreach ($promo_aktif as $p) : ?>
                            <div class="news-card-wrapper">
                                <div class="news-card">
                                    <?php 
                                        $gambar_promo = !empty($p['gambar']) ? $p['gambar'] : 'default.jpg';
                                        $tanggal_selesai = !empty($p['tanggal_selesai']) ? date('d M Y', strtotime($p['tanggal_selesai'])) : date('d M Y');
                                        $judul = !empty($p['judul_berita']) ? $p['judul_berita'] : 'Promo Menarik';
                                        $isi_singkat = !empty($p['isi_berita']) ? strip_tags($p['isi_berita']) : 'Cek detail promo ini...';
                                    ?>
                                    <img src="<?= base_url('assets/upload/image/' . esc($gambar_promo)) ?>" alt="<?= esc($judul) ?>" class="news-img" onerror="this.src='https://via.placeholder.com/400x200?text=No+Image'">
                                    <div class="news-content">
                                        <span class="news-date">Hingga <?= esc($tanggal_selesai) ?></span>
                                        <h4><?= esc($judul) ?></h4>
                                        <p><?= $isi_singkat ?></p>
                                        
                                        <button type="button" class="btn-maps-small mt-auto" style="width: fit-content; background: var(--neo-yellow);" data-bs-toggle="modal" data-bs-target="#modalPromo<?= $p['id_berita'] ?>">
                                            Klaim Promo ➔
                                        </button>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else : ?>
                        <div class="w-100 text-center">
                            <div class="neo-box p-4" style="background: var(--neo-white); display:inline-block;">
                                <p class="fw-bold mb-0">Yahhh, belum ada promo aktif saat ini. Pantau terus ya!</p>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

<section class="berita-section-wrapper">
        <div class="container" data-aos="fade-up">
            <h2 class="news-title">📰 BERITA & UPDATE</h2>
            
            <div class="news-carousel-container">
                <button class="carousel-btn prev" onclick="scrollBerita(-1)">←</button>

<div class="news-carousel" id="beritaCarousel">
                    <?php if (!empty($berita_aktif)) : ?>
                        <?php foreach ($berita_aktif as $b) : ?>
                            <div class="news-card-wrapper">
                                <div class="news-card">
                                    <?php 
                                        $gambar_berita = !empty($b['gambar']) ? $b['gambar'] : 'default.jpg';
                                        $tanggal_post = !empty($b['tanggal_post']) ? date('d F Y', strtotime($b['tanggal_post'])) : date('d F Y');
                                        $judul = !empty($b['judul_berita']) ? $b['judul_berita'] : 'Judul Berita';
                                        $isi_singkat = !empty($b['isi_berita']) ? strip_tags($b['isi_berita']) : 'Deskripsi singkat berita...';
                                    ?>
                                    <img src="<?= base_url('assets/upload/image/' . esc($gambar_berita)) ?>" alt="<?= esc($judul) ?>" class="news-img" onerror="this.src='https://via.placeholder.com/400x200?text=No+Image'">
                                    <div class="news-content">
                                        <span class="news-date" style="background: var(--neo-white);"><?= esc($tanggal_post) ?></span>
                                        <h4><?= esc($judul) ?></h4>
                                        <p><?= $isi_singkat ?></p>
                                        
                                        <button type="button" class="btn-maps-small mt-auto" style="width: fit-content;" data-bs-toggle="modal" data-bs-target="#modalBerita<?= $b['id_berita'] ?>">
                                            Baca Selengkapnya ➔
                                        </button>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else : ?>
                        <div class="w-100 text-center">
                            <div class="neo-box p-4" style="background: var(--neo-yellow); display:inline-block;">
                                <p class="fw-bold mb-0">Belum ada berita terbaru saat ini.</p>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
                
                <button class="carousel-btn next" onclick="scrollBerita(1)">→</button>
            </div>
            
        </div>
    </section>

<?php if (!empty($promo_aktif)) : ?>
        <?php foreach ($promo_aktif as $p) : ?>
            <div class="modal fade neo-modal" id="modalPromo<?= $p['id_berita'] ?>" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header" style="background-color: var(--neo-yellow);">
                            <h5 class="modal-title"><?= esc($p['judul_berita']) ?></h5>
                            <button type="button" class="btn-close-neo" data-bs-dismiss="modal">X</button>
                        </div>
                        <div class="modal-body">
                            <img src="<?= base_url('assets/upload/image/' . (!empty($p['gambar']) ? $p['gambar'] : 'default.jpg')) ?>" class="modal-img" onerror="this.src='https://via.placeholder.com/800x400?text=No+Image'">
                            <div class="modal-date-badge">📅 Diposting pada: <?= date('d F Y', strtotime($p['tanggal_post'])) ?></div>
                            
                            <?php if(!empty($p['ringkasan'])): ?>
                                <div class="modal-ringkasan">"<?= esc($p['ringkasan']) ?>"</div>
                            <?php endif; ?>
                            
                            <div class="modal-isi">
                                <?= $p['isi'] ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>

<?php if (!empty($berita_aktif)) : ?>
        <?php foreach ($berita_aktif as $b) : ?>
            <div class="modal fade neo-modal" id="modalBerita<?= $b['id_berita'] ?>" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header" style="background-color: var(--neo-blue);">
                            <h5 class="modal-title"><?= esc($b['judul_berita']) ?></h5>
                            <button type="button" class="btn-close-neo" data-bs-dismiss="modal">X</button>
                        </div>
                        <div class="modal-body">
                            <img src="<?= base_url('assets/upload/image/' . (!empty($b['gambar']) ? $b['gambar'] : 'default.jpg')) ?>" class="modal-img" onerror="this.src='https://via.placeholder.com/800x400?text=No+Image'">
                            <div class="modal-date-badge">📅 Diposting pada: <?= date('d F Y', strtotime($b['tanggal_post'])) ?></div>
                            
                            <?php if(!empty($b['ringkasan'])): ?>
                                <div class="modal-ringkasan">"<?= esc($b['ringkasan']) ?>"</div>
                            <?php endif; ?>
                            
                            <div class="modal-isi">
                                <?= $b['isi'] ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>

</main>

function scrollCarousel(direction) {
        const carousel = document.getElementById('menuCarousel');
        const activeCard = carousel.querySelector('.menu-card-wrapper.is-active');
        const cardWidth = activeCard ? activeCard.offsetWidth + 30 : 380; 
        carousel.scrollBy({ left: direction * cardWidth, behavior: 'smooth' });
    }

// FUNGSI SCROLL PROMO BARU
    function scrollPromo(direction) {
        const carousel = document.getElementById('promoCarousel');
        if(carousel) {
            const cardWidth = carousel.querySelector('.news-card-wrapper').offsetWidth + 30; 
            carousel.scrollBy({ left: direction * cardWidth, behavior: 'smooth' });
        }
    }

// FUNGSI SCROLL BERITA BARU
    function scrollBerita(direction) {
        const carousel = document.getElementById('beritaCarousel');
        if(carousel) {
            const cardWidth = carousel.querySelector('.news-card-wrapper').offsetWidth + 30; 
            carousel.scrollBy({ left: direction * cardWidth, behavior: 'smooth' });
        }
    }
    
    // FUNGSI FAQ ACCORDION
    function toggleFaq(element) {
        const parent = element.parentElement;
        const icon = element.querySelector('.faq-icon');
        
        if (parent.classList.contains('active')) {
            parent.classList.remove('active');
            icon.textContent = '+';
        } else {
            const allFaqs = document.querySelectorAll('.faq-item');
            allFaqs.forEach(faq => {
                faq.classList.remove('active');
                faq.querySelector('.faq-icon').textContent = '+';
            });
            parent.classList.add('active');
            icon.textContent = '-';
        }
    }
</script>

tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                tabButtons.forEach(btn => {
                    btn.style.background = 'var(--neo-white)';
                    btn.classList.remove('active-tab');
                });

this.style.background = 'var(--neo-yellow)';
                this.classList.add('active-tab');

const filterValue = this.getAttribute('data-filter');

menuItems.forEach(item => {
                    if (filterValue === 'all') {
                        item.style.display = '';
                    } else {
                        if (item.getAttribute('data-category') === filterValue) {
                            item.style.display = ''; 
                        } else {
                            item.style.display = 'none'; 
                        }
                    }
                });
                
                const carousel = document.getElementById('menuCarousel');
                if(carousel) { carousel.scrollLeft = 0; }
            });
        });
    });
</script>

revTabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                revTabBtns.forEach(b => {
                    b.style.background = 'var(--neo-white)';
                    b.classList.remove('active-rev-tab');
                });
                this.style.background = 'var(--neo-yellow)';
                this.classList.add('active-rev-tab');

revContents.forEach(content => { content.style.display = 'none'; });

const targetId = this.getAttribute('data-target');
                const targetContent = document.getElementById(targetId);
                if(targetContent) { targetContent.style.display = 'block'; }
            });
        });
    });
</script>
<?= $this->endSection() ?>

Batal

⬅ Views 4 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
🐘 berita.php	php	2.7 KB	09/10/23 14:23	0644	✏️ ⬇
🐘 client.php	php	1.3 KB	20/11/21 14:46	0644	✏️ ⬇
🐘 index.php	php	56.2 KB	27/02/26 11:53	0644	✏️ ⬇
📄 sitemap.xml	xml	4.3 KB	27/02/23 07:24	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission