/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#111827;
    color:white;
}

/* ================= NAVBAR ================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 32px;

    background: rgba(17, 24, 39, 0.95);

    backdrop-filter: blur(10px);

    z-index: 1000;

    box-sizing: border-box;
}

/* LOGO */

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo span {
    font-size: 28px;
    font-weight: bold;
    color: #F97316;
}

.logo small {
    font-size: 8px;
    letter-spacing: 3px;
    color: white;
    margin-top: 5px;
}

/* MENU */

.nav-links {
    display: flex;
    align-items: center;

    list-style: none;

    gap: 25px;

    margin: 0;
    padding: 0;
}

.nav-links a {
    color: white;

    text-decoration: none;

    font-size: 15px;

    white-space: nowrap;

    transition: 0.3s;
}

.nav-links a:hover {
    color: #F97316;
}

/* LOGIN & REGISTER */

.nav-button {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.login-btn,
.register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;

    text-decoration: none;

    padding: 9px 16px;

    border-radius: 8px;

    transition: 0.3s;
}

.login-btn {
    color: white;

    border: 1px solid #555;
}

.login-btn:hover {
    background: #F97316;
    border-color: #F97316;
}

.register-btn {
    background: #F97316;

    color: white;
}

.register-btn:hover {
    background: #EA580C;
}

/* ================= HERO ================= */

.hero {
    display: flex;
    position:relative;
overflow:hidden;
    justify-content: space-between;
    align-items: center;

    min-height: calc(100vh - 90px);

    padding:120px 7% 90px;
    gap: 60px;
}

/* LEFT */

.hero-left {
    width: 52%;
}

.hero-left h1 {
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.05;
    margin-bottom: 25px;
}

.hero-left p {
    font-size: 17px;
    color: #9ca3af;
    margin-bottom: 35px;
    line-height: 1.7;
    max-width: 600px;
}

/* BUTTON */

.hero-button {
    display: flex;
    gap: 18px;
}

.join-btn,
.event-btn {
    padding: 14px 28px;
    border-radius: 9px;
    text-decoration: none;
    transition: 0.3s;
}

.join-btn {
    background: #F97316;
    color: white;
}

.join-btn:hover {
    background: #EA580C;
    transform: translateY(-3px);
}

.event-btn {
    border: 2px solid #F97316;
    color: white;
}

.event-btn:hover {
    background: #F97316;
    transform: translateY(-3px);
}

/* RIGHT */

.hero-right {
    width: 45%;
    display: flex;
    justify-content: flex-end;
}

.hero-right img {
    width: 100%;
    max-width: 500px;
    height: 500px;

    object-fit: cover;

    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ================= ABOUT ================= */

.about {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 100px 80px;
    gap: 60px;
    background: #1F2937;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
}

.about-image {
    width: 45%;
}

.about-image img {
    width: 100%;
    display: block;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.about-content {
    width: 55%;
}

.about-content h4 {
    color: #F97316;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.about-content h2 {
    font-size: 42px;
    margin-bottom: 20px;
    color: #ffffff;
    line-height: 1.15;
}

.about-content p {
    color: #d1d5db;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* Statistics */

.about-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.card{

    background:#111827;

    padding:25px;

    border-radius:15px;

    text-align:center;

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

    background:#F97316;

}

.card h3{

    font-size:32px;

    margin-bottom:10px;

}

.card span{

    font-size:18px;

}/* ================= SERVICES ================= */

.services{

    padding:100px 80px;

    background:#111827;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h4{

    color:#F97316;

    letter-spacing:2px;

    margin-bottom:15px;

}

.section-title h2{

    font-size:42px;

    margin-bottom:20px;

}

.section-title p{

    color:#d1d5db;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

/* Card */

.service-container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.service-card{

    background:#1F2937;

    padding:35px;

    border-radius:18px;

    text-align:center;

    transition:.4s;

    cursor:pointer;

}

.service-card:hover{

    transform:translateY(-10px);

    background:#F97316;

}

.icon{

    font-size:50px;

    margin-bottom:20px;

}

.service-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.service-card p{

    color:#d1d5db;

    line-height:1.7;

}

.service-card:hover p{

    color:white;

}/* ================= ACHIEVEMENT ================= */

.achievement{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    padding:100px 80px;

    background:#F97316;

}

.achievement-card{

    text-align:center;

    color:white;

}

.achievement-card h2{

    font-size:60px;

    margin-bottom:15px;

    font-weight:bold;

}

.achievement-card p{

    font-size:20px;

}/* ================= GALLERY ================= */

.gallery{

    padding:100px 80px;

    background:#111827;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.1);

}

.overlay{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    padding:20px;

    background:linear-gradient(transparent,rgba(0,0,0,.9));

    color:white;

    font-size:20px;

    opacity:0;

    transition:.4s;

}

.gallery-item:hover .overlay{

    opacity:1;

}/* ================= EVENTS ================= */

.events{

    padding:100px 80px;

    background:#1F2937;

}

.event-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.event-card{

    display:flex;

    gap:25px;

    padding:30px;

    background:#111827;

    border-radius:18px;

    transition:.4s;

}

.event-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 35px rgba(0,0,0,.4);

}

.event-date{

    min-width:80px;

    height:90px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:#F97316;

    border-radius:12px;

    color:white;

}

.event-date .day{

    font-size:28px;

    font-weight:bold;

}

.event-date .month{

    font-size:13px;

    margin-top:5px;

}

.event-info{

    flex:1;

}

.event-category{

    color:#F97316;

    font-size:12px;

    font-weight:bold;

    letter-spacing:1px;

}

.event-info h3{

    font-size:22px;

    margin:12px 0;

}

.event-info p{

    color:#d1d5db;

    line-height:1.6;

    margin-bottom:15px;

}

.event-time{

    color:#F97316;

    font-size:14px;

}/* ================= OUR TEAM ================= */

.team{

    padding:100px 80px;

    background:#111827;

}

.team-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.team-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:25px;

    background:#1F2937;

    border-radius:18px;

    transition:.4s;

}

.team-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.4);

}

/* Avatar */

.team-avatar{

    min-width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#F97316;

    color:white;

    font-size:22px;

    font-weight:bold;

}

/* Team Information */

.team-info h3{

    font-size:18px;

    margin-bottom:8px;

}

.team-position{

    color:#d1d5db;

    font-size:14px;

    line-height:1.5;

    margin-bottom:10px;

}

/* Status */

.status{

    font-size:13px;

    font-weight:bold;

}

.status.active{

    color:#22C55E;

}

.status.inactive{

    color:#9CA3AF;

}/* ================= TESTIMONIALS ================= */

.testimonials{

    padding:100px 80px;

    background:#1F2937;

}

.quote-container{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    max-width:1000px;

    margin:auto;

}

.quote-card{

    background:#111827;

    padding:40px;

    border-radius:20px;

    text-align:center;

    transition:.4s;

}

.quote-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.4);

}

.quote-icon{

    font-size:70px;

    color:#F97316;

    height:60px;

}

.quote-card p{

    font-size:20px;

    line-height:1.8;

    color:#d1d5db;

    margin:25px 0;

}

.quote-card h3{

    font-size:18px;

    margin-bottom:8px;

}

.quote-card span{

    color:#F97316;

    font-size:14px;

}/* ================= CONTACT ================= */

.contact{

    padding:100px 80px;

    background:#111827;

}

.contact-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    max-width:1200px;

    margin:auto;

    align-items:center;

}

.contact-text h4{

    color:#F97316;

    letter-spacing:2px;

    margin-bottom:20px;

}

.contact-text h2{

    font-size:48px;

    line-height:1.2;

    margin-bottom:25px;

}

.contact-text > p{

    color:#d1d5db;

    line-height:1.8;

    font-size:17px;

    margin-bottom:30px;

}

.contact-info p{

    color:#d1d5db;

    margin:15px 0;

}


/* FORM */

.contact-form{

    background:#1F2937;

    padding:35px;

    border-radius:20px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

}

.contact-form label{

    margin-bottom:8px;

    font-weight:bold;

}

.contact-form input,

.contact-form textarea{

    background:#111827;

    border:1px solid #374151;

    color:white;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;

    font-family:inherit;

    font-size:15px;

    outline:none;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:#F97316;

}

.contact-form textarea{

    resize:vertical;

}

.contact-form button{

    background:#F97316;

    color:white;

    border:none;

    padding:15px;

    border-radius:8px;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}

.contact-form button:hover{

    background:#EA580C;

/* ================= MODERN FOOTER ================= */

.footer {
    position: relative;
    background:
        linear-gradient(
            135deg,
            #0B1120 0%,
            #111827 50%,
            #0B1120 100%
        );

    padding: 90px 80px 25px;
    overflow: hidden;
}


/* ORANGE GLOW */

.footer::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    left: 50%;

    transform: translateX(-50%);

    background: #F97316;

    opacity: 0.08;

    filter: blur(100px);

    border-radius: 50%;
}


/* TOP ORANGE LINE */

.footer::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            #FACC15,
            #F97316,
            transparent
        );
}


/* CONTENT */

.footer-content {

    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns: 2fr 1fr 1.5fr;

    gap: 70px;

    max-width: 1200px;

    margin: auto;
}


/* BRAND */

.footer-brand h2 {

    color: #F97316;

    font-size: 32px;

    letter-spacing: 1px;

    margin-bottom: 20px;

    text-shadow:
        0 0 20px rgba(249, 115, 22, 0.25);
}

.footer-brand p {

    color: #9CA3AF;

    line-height: 1.8;

    max-width: 420px;
}


/* HEADINGS */

.footer h3 {

    color: #FFFFFF;

    font-size: 16px;

    letter-spacing: 1px;

    margin-bottom: 25px;

    position: relative;
}


/* ================= CONTACT CLEAN STYLE ================= */

.footer-contact h3 {
    margin-bottom: 8px;
}
.footer-contact p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #9CA3AF;
    line-height: 1.5;
}

.footer-contact a {
    color: #D1D5DB;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-contact a:hover {
    color: #F97316;
}

/* LINKS */

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 14px;
}

.footer-links a {

    color: #9CA3AF;

    text-decoration: none;

    transition: all 0.3s ease;
}

.footer-links a:hover {

    color: #F97316;

    transform: translateX(7px);
}


.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact p {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0;
    padding: 10px 0;

    color: #9CA3AF;
}

.footer-contact p:first-of-type {
    margin-top: 5px;
}

.footer-contact a {
    color: #D1D5DB;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-contact a:hover {
    color: #F97316;
}


/* BOTTOM */

.footer-bottom {

    position: relative;

    z-index: 1;

    border-top: 1px solid rgba(255,255,255,0.1);

    margin-top: 70px;

    padding-top: 25px;

    text-align: center;

    color: #6B7280;

    font-size: 14px;
}

}/* ================= LOGIN PAGE ================= */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#111827;

    padding:40px;

}

.login-container{

    width:100%;

    max-width:450px;

}

.login-logo{

    text-align:center;

    margin-bottom:30px;

}

.login-logo h1{

    color:#F97316;

    font-size:38px;

    letter-spacing:3px;

}

.login-logo p{

    color:#9CA3AF;

    margin-top:8px;

}

.login-box{

    background:#1F2937;

    padding:40px;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.4);

}

.login-box h2{

    text-align:center;

    font-size:30px;

    margin-bottom:10px;

}

.login-subtitle{

    text-align:center;

    color:#9CA3AF;

    margin-bottom:30px;

}

.login-box form{

    display:flex;

    flex-direction:column;

}

.login-box label{

    margin-bottom:8px;

    font-weight:bold;

}

.login-box input{

    background:#111827;

    border:1px solid #374151;

    color:white;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;

    outline:none;

    font-size:15px;

}

.login-box input:focus{

    border-color:#F97316;

}

.login-box button{

    width:100%;

    background:#F97316;

    color:white;

    border:none;

    padding:15px;

    border-radius:8px;

    font-size:16px;

    cursor:pointer;

    margin-top:10px;

}

.login-box button:hover{

    background:#EA580C;

}

.register-text{

    text-align:center;

    color:#9CA3AF;

    margin-top:25px;

}

.register-text a{

    color:#F97316;

    text-decoration:none;

    font-weight:bold;

}

.register-text a:hover{

    text-decoration:underline;

}

.back-home{

    display:block;

    text-align:center;

    margin-top:25px;

    color:#9CA3AF;

    text-decoration:none;

}

.back-home:hover{

    color:#F97316;

}/* ================= MEMBER DASHBOARD ================= */

.dashboard{

    display:flex;

    min-height:100vh;

    background:#111827;

}


/* SIDEBAR */

.sidebar{

    width:260px;

    min-height:100vh;

    background:#0B1120;

    padding:30px 20px;

    display:flex;

    flex-direction:column;

}

.dashboard-logo{

    padding:10px 15px 40px;

}

.dashboard-logo h2{

    color:#F97316;

    letter-spacing:2px;

}

.dashboard-logo span{

    color:#9CA3AF;

    font-size:13px;

}

.dashboard-nav{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:25px;

}

.dashboard-nav a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#9CA3AF;

    text-decoration:none;

    padding:13px 15px;

    border-radius:10px;

    transition:.3s;

}.dashboard-nav a{

    white-space:nowrap;

}
.dashboard-nav a:hover,

.dashboard-nav a.active{

    background:#F97316;

    color:white;

}

.logout{

    margin-top:auto;

    color:#9CA3AF;

    text-decoration:none;

    padding:15px;

}

.logout:hover{

    color:#F97316;

}


/* MAIN */

.dashboard-main{

    flex:1;

    padding:40px;

    overflow:hidden;

}

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}

.dashboard-header h1{

    font-size:32px;

    margin-bottom:10px;

}

.dashboard-header p{

    color:#9CA3AF;

}

.profile-mini{

    display:flex;

    align-items:center;

    gap:12px;

}

.profile-avatar,

.large-avatar{

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#F97316;

    color:white;

    font-weight:bold;

}

.profile-avatar{

    width:45px;

    height:45px;

}

.profile-mini span{

    color:#9CA3AF;

}


/* STATISTICS */

.dashboard-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:30px;

}

.dashboard-stat-card{

    background:#1F2937;

    padding:25px;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:18px;

}

.stat-icon{

    font-size:35px;

}

.dashboard-stat-card h3{

    font-size:28px;

}

.dashboard-stat-card p{

    color:#9CA3AF;

    font-size:14px;

}


/* GRID */

.dashboard-grid{

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:25px;

    margin-bottom:25px;

}

.dashboard-card{

    background:#1F2937;

    padding:30px;

    border-radius:18px;

}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.card-header h2{

    font-size:22px;

}

.card-header a{

    color:#F97316;

    text-decoration:none;

    font-size:14px;

}


/* EVENTS */

.dashboard-event{

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid #374151;

}

.dashboard-event:last-child{

    border-bottom:none;

}

.event-small-date{

    min-width:60px;

    height:60px;

    background:#F97316;

    border-radius:10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.event-small-date strong{

    font-size:20px;

}

.event-small-date span{

    font-size:10px;

}

.dashboard-event h3{

    font-size:16px;

    margin-bottom:5px;

}

.dashboard-event p{

    color:#9CA3AF;

    font-size:13px;

}


/* PROFILE */

.member-profile{

    text-align:center;

}

.large-avatar{

    width:100px;

    height:100px;

    font-size:32px;

    margin:0 auto 20px;

}

.member-profile h3{

    margin-bottom:8px;

}

.member-profile p{

    color:#9CA3AF;

    margin-bottom:15px;

}

.member-status{

    color:#22C55E;

    font-size:14px;

}


/* ACTIVITY */

.activity-card{

    margin-top:20px;

}

.activity-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid #374151;

}

.activity-item > span{

    font-size:28px;

}

.activity-item h3{

    font-size:16px;

    margin-bottom:5px;

}

.activity-item p{

    color:#9CA3AF;

    font-size:13px;

}

.activity-item small{

    margin-left:auto;

    color:#9CA3AF;

}/* ================= GALLERY PAGE ================= */

.gallery-page-header {

    text-align: center;

    padding: 150px 20px 70px;

}


.gallery-page-header h4 {

    color: #16A34A;

    letter-spacing: 3px;

    font-size: 14px;

}


.gallery-page-header h1 {

    font-size: 48px;

    margin: 15px 0;

}


.gallery-page-header p {

    max-width: 650px;

    margin: auto;

    color: #666;

    line-height: 1.7;

}


.gallery-page {

    padding: 40px 8% 100px;

}


.gallery-page-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

}


.gallery-page-item {

    position: relative;

    overflow: hidden;

    border-radius: 15px;

    height: 350px;

    cursor: pointer;

}


.gallery-page-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}


.gallery-page-item:hover img {

    transform: scale(1.1);

}


.gallery-page-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 30px 20px 20px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,0.85)
        );

    color: white;

}


.gallery-page-overlay h3 {

    margin: 0 0 5px;

    font-size: 20px;

}


.gallery-page-overlay p {

    margin: 0;

    font-size: 13px;

    opacity: 0.8;

}


@media (max-width: 900px) {

    .gallery-page-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 600px) {

    .gallery-page-grid {

        grid-template-columns:
            1fr;

    }


    .gallery-page-header h1 {


        font-size: 34px;
    
    }

}/* =====================================================
   SHAUTUNA PROFESSIONAL STATISTICS
   ===================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 30px;
}

.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;

    min-height: 135px;
    padding: 24px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;

    text-decoration: none;
    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* ORANGE ACCENT */

.stat-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: #F97316;
}

/* HOVER */

.stat-card:hover {
    transform: translateY(-5px);

    border-color: #F97316;

    box-shadow:
        0 12px 28px
        rgba(249, 115, 22, 0.14);
}

/* ICON */

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 58px;
    height: 58px;

    border-radius: 16px;

    background: #fff7ed;
    border: 1px solid #fed7aa;

    font-size: 25px;
}

/* CONTENT */

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-content h3 {
    margin: 0 0 5px;

    color: #64748b;

    font-size: 13px;
    font-weight: 600;
}

.stat-content strong {
    color: #0B1F3A;

    font-size: 32px;
    font-weight: 700;

    line-height: 1;
}

.stat-content span {
    margin-top: 7px;

    color: #94a3b8;

    font-size: 11px;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

}/* =====================================================
   SHAUTUNA PROFESSIONAL HOME DESIGN
   ===================================================== */

:root {
    --orange: #ff5a16;
    --orange-light: #ff7a2f;
    --dark: #070b10;
    --dark-card: #10161d;
    --text: #ffffff;
    --muted: #9ca3af;
}


/* ================= BODY ================= */

body {
    margin: 0;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(249, 115, 22, 0.12),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 50%,
            rgba(30, 64, 175, 0.12),
            transparent 35%
        ),

        #0d141c;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

/* ================= NAVBAR ================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 32px;

    background:
        rgba(7, 11, 16, 0.88);

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


/* LOGO */

.logo {
    display: flex;

    align-items: center;

    gap: 10px;
}


.logo-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(255, 90, 22, 0.15);

    color: var(--orange);

    font-size: 21px;
}


.logo strong {
    display: block;

    color: #ffffff;

    font-size: 17px;

    letter-spacing: 1px;
}


.logo span {
    display: block;

    margin-top: 2px;

    color: #a1a1aa;

    font-size: 8px;

    letter-spacing: 1.5px;
}


/* NAVIGATION */

.navbar nav {
    display: flex;

    align-items: center;

    gap: 30px;
}


.navbar nav a {
    color: #d1d5db;

    text-decoration: none;

    font-size: 12px;

    transition: 0.25s ease;
}


.navbar nav a:hover,
.navbar nav a.active {
    color: var(--orange);
}


/* NAV BUTTONS */

.nav-buttons {
    display: flex;

    gap: 10px;
}


.login-btn,
.join-btn {
    padding: 10px 18px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 12px;

    transition: 0.25s ease;
}


.login-btn {
    color: #ffffff;

    border: 1px solid
        rgba(255, 255, 255, 0.35);
}


.login-btn:hover {
    border-color: var(--orange);

    color: var(--orange);
}


.join-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5a16,
            #ff7a2f
        );

    font-weight: 600;
}


.join-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(255, 90, 22, 0.3);
}


/* ================= HERO ================= */

/* ================= SHAUTUNA PROFESSIONAL HOME ================= */

:root {
    --orange: #ff5a16;
    --orange-light: #ff7a2f;
    --dark: #070b10;
    --dark-card: #10161d;
}


/* ================= HERO ================= */

.hero {
    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;

    padding: 100px 7% 80px;

    box-sizing: border-box;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(7, 11, 16, 1) 0%,
            rgba(7, 11, 16, 0.92) 35%,
            rgba(7, 11, 16, 0.35) 100%
        ),
        url("images/hero.jpg");

    background-size: cover;

    background-position: center;
}


.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 11, 16, 0.25) 0%,
            rgba(7, 11, 16, 0.12) 45%,
            rgba(7, 11, 16, 0.05) 100%
        );
}


/* HERO CONTENT */

.hero-content {
    position: relative;

    z-index: 2;

    max-width: 600px;
}


/* HERO TITLE */

.hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(48px, 6vw, 76px);

    line-height: 0.95;

    font-weight: 800;

    letter-spacing: -2px;
}


.hero h1 span {
    display: block;

    margin-top: 10px;

    color: var(--orange);
}


/* HERO SUBTITLE */

.hero h2 {
    margin: 22px 0 15px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 500;
}


/* HERO DESCRIPTION */

.hero p {
    max-width: 470px;

    color: #a1a1aa;

    font-size: 14px;

    line-height: 1.7;
}


/* ================= HERO BUTTONS ================= */

.hero-buttons {
    display: flex;

    gap: 12px;

    margin-top: 28px;
}


.primary-btn,
/* ================= PREMIUM SECONDARY BUTTON ================= */

.secondary-btn {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 28px;

    border: 1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 8px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.04);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    backdrop-filter: blur(8px);

    transition: all 0.3s ease;
}


.secondary-btn:hover {
    color: #F97316;

    border-color: #F97316;

    background:
        rgba(249, 115, 22, 0.08);

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px
        rgba(249, 115, 22, 0.15);
}


/* ================= PREMIUM PRIMARY BUTTON ================= */

.primary-btn {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 28px;

    border-radius: 8px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #F97316,
        #EA580C
    );

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    overflow: hidden;

    box-shadow: 0 8px 20px
        rgba(249, 115, 22, 0.25);

    transition: all 0.3s ease;
}


/* CAHAYA BERGERAK */

.primary-btn::before {
    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 60%;

    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}


.primary-btn:hover::before {
    left: 130%;
}


.primary-btn:hover {
    transform: translateY(-4px);

    box-shadow: 0 14px 35px
        rgba(249, 115, 22, 0.45);
}


/* ================= STATISTICS ================= */

.home-stats {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

    max-width: 1100px;

    margin: -30px auto 0;

    padding: 0 24px;
}


.home-stat-card {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #141b23,
            #0d1218
        );

    border: 1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 10px;

    transition: 0.3s ease;
}


.home-stat-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(255, 90, 22, 0.5);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.35);
}


.home-stat-icon {
    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(255, 90, 22, 0.12);

    color: var(--orange);

    font-size: 22px;
}


.home-stat-card strong {
    display: block;

    color: var(--orange);

    font-size: 24px;
}


.home-stat-card span {
    display: block;

    margin-top: 4px;

    color: #9ca3af;

    font-size: 11px;
}


/* ================= HOME SECTIONS ================= */

.home-section {
    max-width: 1100px;

    margin: 100px auto;

    padding: 0 24px;

    text-align: center;
}


.section-label {
    color: var(--orange);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.home-section h2 {
    margin: 12px 0 18px;

    color: #ffffff;

    font-size: 36px;
}


.home-section p {
    max-width: 650px;

    margin: auto;

    color: #9ca3af;

    line-height: 1.8;
}


/* ================= FOOTER ================= */

footer {
    padding: 30px;

    text-align: center;

    color: #6b7280;

    background: #05080c;

    border-top: 1px solid
        rgba(255, 255, 255, 0.06);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {

    .navbar nav {
        display: none;
    }


    .home-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .hero {
        min-height: 620px;
    }

}


@media (max-width: 600px) {

    .navbar {
        padding: 0 16px;
    }


    .hero {
        padding: 110px 24px 80px;
    }


    .hero h1 {
        font-size: 48px;
    }


    .home-stats {
        grid-template-columns: 1fr;

        margin-top: 20px;
    }


    .hero-buttons {
        flex-direction: column;
    }


    .primary-btn,
    .secondary-btn {
        text-align: center;
    }

}/* ================= WHY SHAUTUNA ================= */

.why-section {
    max-width: 1100px;
    margin: 100px auto;
    padding: 0 24px;
    text-align: center;
}

.why-section .section-label {
    color: var(--orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.why-section h2 {
    margin: 12px 0 18px;
    color: #ffffff;
    font-size: 36px;
}

.section-description {
    max-width: 650px;
    margin: 0 auto 40px;
    color: #9ca3af;
    line-height: 1.8;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.why-card {
    padding: 30px 26px;
    text-align: left;

    background:
        linear-gradient(
            145deg,
            #141b23,
            #0d1218
        );

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;

    transition: 0.3s ease;
}

.why-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(255, 90, 22, 0.5);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.3);
}

.why-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 12px;

    background:
        rgba(255, 90, 22, 0.12);

    font-size: 25px;
}

.why-card h3 {
    margin: 0 0 10px;

    color: #ffffff;
    font-size: 18px;
}

.why-card p {
    margin: 0;

    color: #9ca3af;

    font-size: 13px;
    line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .why-grid {
        grid-template-columns: 1fr;
    }

}/* =====================================================
   SHAUTUNA PREMIUM HOMEPAGE EFFECTS
   ===================================================== */


/* ================= SMOOTH SCROLL ================= */

html {
    scroll-behavior: smooth;
}


/* ================= NAVBAR PREMIUM ================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    backdrop-filter: blur(18px);

    background:
        rgba(7, 11, 16, 0.82);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    transition: 0.3s ease;
}


/* NAV LINK EFFECT */

.navbar nav a {
    position: relative;
    transition: 0.3s ease;
}

.navbar nav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--orange);

    transform: translateX(-50%);

    transition: 0.3s ease;
}

.navbar nav a:hover::after,
.navbar nav a.active::after {
    width: 70%;
}


/* ================= HERO PREMIUM EFFECT ================= */

.hero {
    isolation: isolate;
}


/* DARK VIGNETTE */

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 75% 40%,
            transparent 0%,
            rgba(0, 0, 0, 0.25) 55%,
            rgba(0, 0, 0, 0.65) 100%
        );

    z-index: 1;
}


/* HERO CONTENT ANIMATION */

.hero-content {
    animation:
        heroContentIn 1s ease forwards;
}

@keyframes heroContentIn {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* HERO TITLE GLOW */

.hero h1 {
    text-shadow:
        0 0 35px
        rgba(255, 90, 22, 0.12);
}


/* ORANGE TITLE SHINE */

.hero h1 span {
    background: linear-gradient(
        90deg,
        var(--orange),
        #ffb07c,
        var(--orange)
    );

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: orangeShine 5s linear infinite;
}

@keyframes orangeShine {

    to {
        background-position: 200% center;
    }

}


/* ================= FLOATING STATS ================= */

.home-stats {
    animation:
        statsReveal 1s ease 0.3s both;
}

@keyframes statsReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.home-stat-card {
    position: relative;

    overflow: hidden;
}


/* MOVING LIGHT */

.home-stat-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent
        );

    transform: skewX(-20deg);

    transition: 0.7s ease;
}

.home-stat-card:hover::before {
    left: 130%;
}


/* ================= SECTION REVEAL ================= */

.home-section {
    animation:
        sectionReveal 0.8s ease both;
}

@keyframes sectionReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ================= BUTTON EFFECTS ================= */

.primary-btn,
.secondary-btn,
.login-btn,
.join-btn {
    position: relative;

    overflow: hidden;
}


.primary-btn::before,
.join-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: 0.6s ease;
}


.primary-btn:hover::before,
.join-btn:hover::before {
    left: 130%;
}


/* ================= GLOW DOTS ================= */

.hero::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: 8%;
    top: 20%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 90, 22, 0.08),
            transparent 70%
        );

    filter: blur(10px);

    animation:
        heroGlow 5s ease-in-out infinite alternate;

    pointer-events: none;

    z-index: 0;
}

@keyframes heroGlow {

    from {
        transform: scale(0.9);
        opacity: 0.5;
    }

    to {
        transform: scale(1.15);
        opacity: 1;
    }

}


/* ================= FOOTER HOVER ================= */

.footer a {
    transition: 0.25s ease;
}

.footer a:hover {
    color: var(--orange);
}


/* ================= REDUCE MOTION ================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}/* ================= SCROLL REVEAL ================= */

.scroll-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.scroll-reveal.show {
    opacity: 1;
    transform: translateY(0);
}


/* ================= STAGGER EFFECT ================= */

.home-stat-card:nth-child(1) {
    transition-delay: 0.1s;
}

.home-stat-card:nth-child(2) {
    transition-delay: 0.2s;
}

.home-stat-card:nth-child(3) {
    transition-delay: 0.3s;
}

.home-stat-card:nth-child(4) {
    transition-delay: 0.4s;
}


/* ================= IMAGE REVEAL ================= */

img.scroll-reveal {
    transform: scale(0.95);
}

img.scroll-reveal.show {
    transform: scale(1);
}/* =====================================================
   SERVICES SECTION
   ===================================================== */

.services-section {
    max-width: 1100px;

    margin: 110px auto;

    padding: 0 24px;
}


.services-header {
    text-align: center;

    margin-bottom: 45px;
}


.services-header h2 {
    margin: 12px 0 16px;

    color: #ffffff;

    font-size: 38px;
}


.services-header p {
    max-width: 600px;

    margin: auto;

    color: #9ca3af;

    line-height: 1.8;
}


.services-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


.service-card {
    padding: 28px 24px;

    background:
        linear-gradient(
            145deg,
            #141b23,
            #0d1218
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 14px;

    transition: 0.3s ease;
}


.service-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(255, 90, 22, 0.5);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.35);
}


.service-icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 12px;

    background:
        rgba(255, 90, 22, 0.12);

    font-size: 25px;
}


.service-card h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 17px;
}


.service-card p {
    margin: 0;

    color: #9ca3af;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   JOIN SECTION
   ===================================================== */

.join-section {
    position: relative;

    max-width: 1100px;

    margin: 120px auto;

    padding: 75px 40px;

    overflow: hidden;

    text-align: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #171f29,
            #0d1218
        );

    border:
        1px solid
        rgba(255, 90, 22, 0.25);
}


.join-section::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -120px;

    border-radius: 50%;

    background:
        rgba(255, 90, 22, 0.12);

    filter: blur(60px);
}


.join-content {
    position: relative;

    z-index: 2;
}


.join-section h2 {
    margin: 14px 0 18px;

    color: #ffffff;

    font-size: 42px;
}


.join-section h2 span {
    color: var(--orange);
}


.join-section p {
    max-width: 580px;

    margin: 0 auto 28px;

    color: #9ca3af;

    line-height: 1.8;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .services-grid {
        grid-template-columns: 1fr;
    }


    .join-section {
        margin: 80px 20px;

        padding: 55px 25px;
    }


    .join-section h2 {
        font-size: 32px;
    }

}/* =====================================================
   SHAUTUNA PREMIUM HOMEPAGE EFFECTS
   ===================================================== */


/* ================= SMOOTH SCROLL ================= */

html {
    scroll-behavior: smooth;
}


/* ================= NAVBAR PREMIUM ================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    backdrop-filter: blur(18px);

    background:
        rgba(7, 11, 16, 0.82);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    transition: 0.3s ease;
}


/* NAV LINK EFFECT */

.navbar nav a {
    position: relative;
    transition: 0.3s ease;
}

.navbar nav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--orange);

    transform: translateX(-50%);

    transition: 0.3s ease;
}

.navbar nav a:hover::after,
.navbar nav a.active::after {
    width: 70%;
}


/* ================= HERO PREMIUM EFFECT ================= */

.hero {
    isolation: isolate;
}


/* DARK VIGNETTE */

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 75% 40%,
            transparent 0%,
            rgba(0, 0, 0, 0.25) 55%,
            rgba(0, 0, 0, 0.65) 100%
        );

    z-index: 1;
}


/* HERO CONTENT ANIMATION */

.hero-content {
    animation:
        heroContentIn 1s ease forwards;
}

@keyframes heroContentIn {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* HERO TITLE GLOW */

.hero h1 {
    text-shadow:
        0 0 35px
        rgba(255, 90, 22, 0.12);
}


/* ORANGE TITLE SHINE */

.hero h1 span {
    display: block;

    margin-top: 10px;

    color: #F97316 !important;

    background: none !important;

    -webkit-text-fill-color: #F97316 !important;

    animation: none !important;
}

@keyframes orangeShine {

    to {
        background-position: 200% center;
    }

}


/* ================= FLOATING STATS ================= */

.home-stats {
    animation:
        statsReveal 1s ease 0.3s both;
}

@keyframes statsReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.home-stat-card {
    position: relative;

    overflow: hidden;
}


/* MOVING LIGHT */

.home-stat-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent
        );

    transform: skewX(-20deg);

    transition: 0.7s ease;
}

.home-stat-card:hover::before {
    left: 130%;
}


/* ================= SECTION REVEAL ================= */

.home-section {
    animation:
        sectionReveal 0.8s ease both;
}

@keyframes sectionReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ================= BUTTON EFFECTS ================= */

.primary-btn,
.secondary-btn,
.login-btn,
.join-btn {
    position: relative;

    overflow: hidden;
}


.primary-btn::before,
.join-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: 0.6s ease;
}


.primary-btn:hover::before,
.join-btn:hover::before {
    left: 130%;
}





/* ================= FOOTER HOVER ================= */

.footer a {
    transition: 0.25s ease;
}

.footer a:hover {
    color: var(--orange);
}


/* ================= REDUCE MOTION ================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}.logo {
    display: flex;

    flex-direction: column;

    line-height: 1;

    font-weight: 800;
}


.logo span {
    color: #ffffff;

    font-size: 17px;

    letter-spacing: 1px;
}


.logo small {
    margin-top: 3px;

    color: var(--orange);

    font-size: 7px;

    letter-spacing: 1.5px;

    font-weight: 600;
}/* ================= AUDIO WAVE EFFECT ================= */

.hero {
    position: relative;
    overflow: hidden;
}


/* GARIS GELOMBANG AUDIO */

.hero::after {
    animation: audioPulse 4s ease-in-out infinite;
    content: "";

    position: absolute;

    right: 5%;
    top: 50%;

    width: 420px;
    height: 180px;

    transform: translateY(-50%);

    opacity: 0.35;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 6px,
            rgba(249, 115, 22, 0.55) 7px,
            transparent 8px
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

    pointer-events: none;

    z-index: 1;
}/* ================= AUDIO WAVE ANIMATION ================= */

@keyframes audioPulse {

    0% {
        transform:
            translateY(-50%)
            scaleX(0.85);

        opacity: 0.2;
    }

    50% {
        transform:
            translateY(-50%)
            scaleX(1.05);

        opacity: 0.5;
    }

    100% {
        transform:
            translateY(-50%)
            scaleX(0.85);

        opacity: 0.2;
    }

}/* ================= SHAUTUNA AUDIO WAVE ================= */

.hero h1 {
    position: relative;
}


/* GARIS GELOMBANG DI BAWAH JUDUL */

.hero h1::after {

    content: "";

    display: block;

    width: 260px;

    height: 32px;

    margin-top: 14px;

    background: #F97316;

    clip-path: polygon(
        0% 50%,
        5% 45%,
        8% 55%,
        12% 30%,
        16% 70%,
        20% 10%,
        24% 90%,
        28% 35%,
        32% 65%,
        36% 45%,
        40% 55%,
        44% 15%,
        48% 85%,
        52% 40%,
        56% 60%,
        60% 20%,
        64% 80%,
        68% 45%,
        72% 55%,
        76% 30%,
        80% 70%,
        84% 45%,
        88% 55%,
        92% 35%,
        96% 65%,
        100% 50%
    );

    opacity: 0.85;

    filter:
        drop-shadow(
            0 0 8px
            rgba(249, 115, 22, 0.7)
        );

    animation:
        audioWave 2.5s ease-in-out infinite;
}


@keyframes audioWave {

    0% {
        transform: scaleX(0.85);

        opacity: 0.55;
    }

    50% {
        transform: scaleX(1.08);

        opacity: 1;
    }

    100% {
        transform: scaleX(0.85);

        opacity: 0.55;
    }

}/* ================= AUDIO EQUALIZER ================= */

.hero::before {

    content: "";

    position: absolute;

    right: 7%;

    bottom: 80px;

    width: 280px;

    height: 130px;

    opacity: 0.35;

    background:

        repeating-linear-gradient(
            90deg,

            transparent 0px,
            transparent 8px,

            #F97316 8px,
            #F97316 12px
        );

    mask-image:

        linear-gradient(
            to top,

            transparent 0%,

            black 15%,

            black 85%,

            transparent 100%
        );

    animation:

        equalizerMove 2s ease-in-out infinite alternate;

    pointer-events: none;

    z-index: 1;
}


@keyframes equalizerMove {

    0% {

        transform:
            scaleY(0.5);

        opacity: 0.2;
    }

    50% {

        transform:
            scaleY(1);

        opacity: 0.5;
    }

    100% {

        transform:
            scaleY(0.7);

        opacity: 0.3;
    }

}/* ================= AUDIO SCAN LIGHT ================= */

.hero {
    position: relative;
    overflow: hidden;
}


/* GARIS CAHAYA HORIZONTAL */

.hero::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(249, 115, 22, 0.08),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        audioScan 8s ease-in-out infinite;

    pointer-events: none;

    z-index: 1;
}


@keyframes audioScan {

    0% {
        left: -100%;
    }

    50% {
        left: 120%;
    }

    100% {
        left: 120%;
    }

}/* ================= HERO PARTICLE LIGHTS ================= */

.hero {
    background-image:

        radial-gradient(
            circle at 15% 25%,
            rgba(249, 115, 22, 0.18) 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 75% 30%,
            rgba(255, 255, 255, 0.15) 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 40% 70%,
            rgba(249, 115, 22, 0.12) 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 90% 75%,
            rgba(255, 255, 255, 0.12) 1px,
            transparent 2px
        ),

        url("images/hero(2).jpg");

    background-size:
        180px 180px,
        240px 240px,
        300px 300px,
        220px 220px,
        cover;

    background-position:
        center,
        center,
        center,
        center,
        center;
}/* ================= HERO LIGHT BEAM ================= */

.hero {
    background-image:
        linear-gradient(
            115deg,
            transparent 45%,
            rgba(249, 115, 22, 0.05) 55%,
            rgba(249, 115, 22, 0.12) 65%,
            transparent 78%
        ),

        linear-gradient(
            65deg,
            transparent 50%,
            rgba(255, 120, 50, 0.06) 60%,
            rgba(249, 115, 22, 0.10) 70%,
            transparent 85%
        ),

        url("images/hero(2).jpg");

    background-size:
        100% 100%,
        100% 100%,
        cover;

    background-position:
        center,
        center,
        center;
}/* ================= PREMIUM NAVIGATION ================= */

.navbar nav {
    display: flex;

    align-items: center;

    gap: 6px;
}


/* NAVIGATION BUTTON */

.navbar nav a {
    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 10px 14px;

    color: #a1a1aa;

    text-decoration: none;

    font-size: 13px;

    font-weight: 500;

    border-radius: 7px;

    transition: all 0.3s ease;
}


/* HOVER */

.navbar nav a:hover {
    color: #ffffff;

    background:
        rgba(249, 115, 22, 0.08);

    transform:
        translateY(-2px);
}


/* GARIS ORANGE DI BAWAH */

.navbar nav a::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: 3px;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background: #F97316;

    transform:
        translateX(-50%);

    transition:
        width 0.3s ease;
}


.navbar nav a:hover::after {
    width: 60%;
}


/* MENU AKTIF */

.navbar nav a.active {
    color: #ffffff;

    background:
        rgba(249, 115, 22, 0.12);
}


.navbar nav a.active::after {
    width: 60%;
}/* ================= HERO TO ABOUT SPACING ================= */

.about-section {

    position: relative;

    display: flex;

    flex-direction: row-reverse;

    align-items: center;

    gap: 70px;

    margin-top: 160px;

    padding: 80px 7%;

    border-top: 1px solid
        rgba(255, 255, 255, 0.06);

    box-sizing: border-box;

}


/* ================= SECTION TRANSITION ================= */

.about-section::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 50%;

    width: 180px;

    height: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(249, 115, 22, 0.5);

}


/* ================= ABOUT IMAGE ================= */

.about-image {

    flex: 1;

}


.about-image img {

    width: 100%;

    max-width: 500px;

    display: block;

    border-radius: 18px;

    object-fit: cover;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.45);

}


/* ================= ABOUT CONTENT ================= */

.about-content {
    flex: 1;
    text-align: right;
}

.about-stats {
    justify-content: end;
}


.about-content h4 {

    margin-bottom: 15px;

    color: var(--orange);

    font-size: 13px;

    letter-spacing: 2px;

}


.about-content h2 {

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 42px;

    line-height: 1.15;

}


.about-content p {

    color: #9ca3af;

    font-size: 15px;

    line-height: 1.8;

}


/* ================= ABOUT STATS ================= */

.about-stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    margin-top: 35px;

}


.about-stat {

    padding: 18px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    text-align: center;

}


.about-stat strong {

    display: block;

    color: var(--orange);

    font-size: 25px;

}


.about-stat span {

    display: block;

    margin-top: 6px;

    color: #9ca3af;

    font-size: 11px;

}


.about-stat:hover {

    transform: translateY(-5px);

    border-color:
        var(--orange);

    box-shadow:
        0 10px 25px
        rgba(249, 115, 22, 0.15);

    transition: 0.3s ease;

}


/* ================= ABOUT RESPONSIVE ================= */

@media (max-width: 900px) {

    .about-section {

        flex-direction: column;

        gap: 40px;

        padding:
            60px 24px;

    }


    .about-image img {

        max-width: 100%;

    }


    .about-content h2 {

        font-size: 34px;

    }


    .about-stats {

        grid-template-columns:
            repeat(2, 1fr);

    }

}.about-section {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center;
}.about-section {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}.about-image {
    order: 2;
}

.about-content {
    order: 1;
}/* ================= CONTACT SMALL UPGRADE ================= */

.contact-form {
    transition: 0.3s ease;
}

.contact-form:hover {
    box-shadow:
        0 15px 35px
        rgba(249, 115, 22, 0.12);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #F97316;
}/* ================= CONTACT BUTTON UPGRADE ================= */

.contact-form button {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.contact-form button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(249, 115, 22, 0.25);
}/* ================= CONTACT INFO UPGRADE ================= */

.contact-info p {
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.contact-info p:hover {
    transform: translateX(6px);
    color: #F97316;
}

.contact-info a {
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #F97316;
}/* ================= MODERN ABOUT SECTION ================= */

.about-section .about-content h4 {
    color: #F97316;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.about-section .about-content h2 {

    max-width: 600px;

    margin-bottom: 22px;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -1px;

}


.about-section .about-content > p {

    max-width: 620px;

    color: #9ca3af;

    font-size: 15px;

    line-height: 1.9;

}


/* ================= MODERN ABOUT STATS ================= */

.about-section .about-stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

    margin-top: 35px;

}


.about-section .about-stats .card {

    padding: 20px 14px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    text-align: center;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;

}


.about-section .about-stats .card:hover {

    transform: translateY(-6px);

    background:
        rgba(249, 115, 22, 0.06);

    border-color:
        rgba(249, 115, 22, 0.7);

}


.about-section .about-stats .card h3 {

    margin-bottom: 6px;

    color: #F97316;

    font-size: 28px;

    font-weight: 800;

}


.about-section .about-stats .card span {

    color: #9ca3af;

    font-size: 11px;

    line-height: 1.4;

}


/* ================= ABOUT IMAGE MODERN EFFECT ================= */

.about-section .about-image img {

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;

}


.about-section .about-image img:hover {

    transform: scale(1.025);

    box-shadow:
        0 25px 55px
        rgba(0, 0, 0, 0.45);

}


/* ================= ABOUT MOBILE ================= */

@media (max-width: 900px) {

    .about-section .about-stats {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 500px) {

    .about-section .about-stats {

        grid-template-columns:
            1fr 1fr;

    }

}/* ================= ABOUT TEXT REFINEMENT ================= */

.about-section .about-content {
    text-align: center;
}

.about-section .about-content h2 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.12;
}

.about-section .about-content > p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;

    line-height: 1.8;
}/* ================= MODERN SERVICES ================= */

.services {

    position: relative;

    padding: 110px 7%;

    background:
        linear-gradient(
            180deg,
            #111827,
            #0f172a
        );

}


/* SECTION TITLE */

.services .section-title {

    max-width: 680px;

    margin: 0 auto 55px;

    text-align: center;

}


.services .section-title h4 {

    margin-bottom: 14px;

    color: #F97316;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

}


.services .section-title h2 {

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 44px;

    line-height: 1.15;

}


.services .section-title p {

    color: #9ca3af;

    font-size: 15px;

    line-height: 1.8;

}


/* SERVICE GRID */

.service-container {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    max-width: 1200px;

    margin: auto;

}


/* SERVICE CARD */

.service-card {

    position: relative;

    min-height: 230px;

    padding: 30px 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 16px;

    box-sizing: border-box;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;

}


/* ORANGE ACCENT */

.service-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            transparent
        );

    opacity: 0;

    transition: opacity 0.3s ease;

}


.service-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(249, 115, 22, 0.6);

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.25);

}


.service-card:hover::before {

    opacity: 1;

}


/* ICON */

.service-card .icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    margin-bottom: 22px;

    background:
        rgba(249, 115, 22, 0.12);

    border:
        1px solid
        rgba(249, 115, 22, 0.2);

    border-radius: 14px;

    font-size: 25px;

}


/* TITLE */

.service-card h3 {

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 19px;

}


/* DESCRIPTION */

.service-card p {

    color: #9ca3af;

    font-size: 13px;

    line-height: 1.7;

}


/* ================= SERVICES RESPONSIVE ================= */

@media (max-width: 1000px) {

    .service-container {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 600px) {

    .services {

        padding:
            80px 24px;

    }


    .services .section-title h2 {

        font-size: 36px;

    }


    .service-container {

        grid-template-columns:
            1fr;

    }

}/* ================= MODERN ACHIEVEMENTS ================= */

.achievement {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    max-width: 1200px;

    margin: 0 auto;

    padding: 70px 7%;

    box-sizing: border-box;

}


.achievement-card {

    position: relative;

    padding: 28px 20px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.02)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;

}


.achievement-card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(249, 115, 22, 0.6);

    box-shadow:
        0 15px 35px
        rgba(249, 115, 22, 0.12);

}


.achievement-card h2 {

    margin-bottom: 8px;

    color: #F97316;

    font-size: 36px;

    font-weight: 800;

}


.achievement-card p {

    margin: 0;

    color: #9ca3af;

    font-size: 12px;

    letter-spacing: 0.5px;

}


/* ================= ACHIEVEMENT RESPONSIVE ================= */

@media (max-width: 900px) {

    .achievement {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 500px) {

    .achievement {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;

        padding:
            50px 24px;

    }


    .achievement-card {

        padding: 22px 12px;

    }


    .achievement-card h2 {

        font-size: 28px;

    }

}/* ================= ACHIEVEMENT BACKGROUND FIX ================= */

.achievement {
    background: transparent !important;
}

.achievement-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.02)
        ) !important;
}/* ================= MODERN GALLERY ================= */

.gallery {
    padding: 110px 7%;
    background:
        linear-gradient(
            180deg,
            #0f172a,
            #111827
        );
}


/* GALLERY TITLE */

.gallery .section-title {
    max-width: 680px;
    margin: 0 auto 55px;
    text-align: center;
}

.gallery .section-title h4 {
    margin-bottom: 14px;
    color: #F97316;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.gallery .section-title h2 {
    margin-bottom: 18px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.15;
}

.gallery .section-title p {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.8;
}


/* GALLERY GRID */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    max-width: 1200px;

    margin: auto;
}


/* GALLERY ITEM */

.gallery-item {
    position: relative;

    height: 260px;

    overflow: hidden;

    border-radius: 16px;

    background: #1f2937;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    cursor: pointer;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* IMAGE - TIDAK HILANG */

.gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


/* DARK OVERLAY */

.gallery-item::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.75),
            transparent 60%
        );

    opacity: 0.8;

    transition:
        opacity 0.35s ease;
}


/* IMAGE HOVER */

.gallery-item:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.35);
}

.gallery-item:hover img {
    transform: scale(1.08);

    filter: brightness(0.8);
}


/* OVERLAY TEXT */

.gallery-item .overlay {
    position: absolute;

    left: 20px;
    bottom: 18px;

    z-index: 2;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 0.3px;

    transition:
        transform 0.35s ease;
}

.gallery-item:hover .overlay {
    transform: translateY(-5px);
}


/* ORANGE ACCENT */

.gallery-item:hover::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    z-index: 3;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            transparent
        );
}


/* ================= GALLERY RESPONSIVE ================= */

@media (max-width: 900px) {

    .gallery-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .gallery {
        padding:
            80px 24px;
    }

    .gallery .section-title h2 {
        font-size: 36px;
    }

    .gallery-grid {
        grid-template-columns:
            1fr;
    }

    .gallery-item {
        height: 240px;
    }

}/* ================= MODERN GALLERY TITLE ================= */

.gallery .section-title {
    position: relative;
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}


/* SMALL LABEL */

.gallery .section-title h4 {
    display: inline-block;

    margin-bottom: 18px;
    padding: 7px 15px;

    color: #F97316;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;

    border: 1px solid
        rgba(249, 115, 22, 0.35);

    border-radius: 30px;

    background:
        rgba(249, 115, 22, 0.06);
}


/* MAIN TITLE */

.gallery .section-title h2 {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1px;
}


/* DESCRIPTION */

.gallery .section-title p {
    max-width: 620px;

    margin: 0 auto;

    color: #9ca3af;

    font-size: 15px;

    line-height: 1.8;
}


/* ORANGE UNDERLINE */

.gallery .section-title h2::after {
    content: "";

    display: block;

    width: 70px;

    height: 3px;

    margin: 22px auto 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            transparent
        );
}/* ================= MODERN UPCOMING EVENTS ================= */

.events {
    padding: 110px 7%;
    background:
        linear-gradient(
            180deg,
            #111827,
            #0f172a
        );
}


/* EVENT TITLE */

.events .section-title {
    max-width: 680px;
    margin: 0 auto 55px;
    text-align: center;
}

.events .section-title h4 {
    display: inline-block;

    margin-bottom: 16px;
    padding: 7px 15px;

    color: #F97316;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;

    border:
        1px solid
        rgba(249, 115, 22, 0.35);

    border-radius: 30px;

    background:
        rgba(249, 115, 22, 0.06);
}

.events .section-title h2 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.1;
}

.events .section-title p {
    max-width: 620px;

    margin: 0 auto;

    color: #9ca3af;

    font-size: 15px;

    line-height: 1.8;
}


/* EVENT CONTAINER */

.event-container {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    max-width: 1200px;

    margin: auto;
}


/* EVENT CARD */

.event-card {
    display: flex;

    gap: 22px;

    min-height: 210px;

    padding: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 16px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(249, 115, 22, 0.65);

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.3);
}


/* DATE */

.event-date {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 70px;
    height: 80px;

    background:
        rgba(249, 115, 22, 0.1);

    border:
        1px solid
        rgba(249, 115, 22, 0.35);

    border-radius: 12px;
}

.event-date .day {
    color: #F97316;

    font-size: 28px;

    font-weight: 800;
}

.event-date .month {
    margin-top: 4px;

    color: #9ca3af;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* EVENT INFO */

.event-info {
    flex: 1;
}

.event-category {
    display: inline-block;

    margin-bottom: 10px;

    color: #F97316;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.event-info h3 {
    margin-bottom: 10px;

    color: #ffffff;

    font-size: 19px;

    line-height: 1.3;
}

.event-info p {
    margin-bottom: 16px;

    color: #9ca3af;

    font-size: 13px;

    line-height: 1.6;
}

.event-time {
    color: #d1d5db;

    font-size: 11px;
}


/* ================= EVENT RESPONSIVE ================= */

@media (max-width: 1050px) {

    .event-container {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media (max-width: 650px) {

    .events {
        padding:
            80px 24px;
    }

    .event-container {
        grid-template-columns:
            1fr;
    }

    .event-card {
        padding: 22px;
    }

}/* ================= GALLERY / EVENTS DIVIDER ================= */

.events {
    position: relative;
}


/* MODERN SECTION DIVIDER */

.events::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 220px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            transparent
        );

    box-shadow:
        0 0 18px
        rgba(249, 115, 22, 0.55);

}/* ================= MODERN OUR TEAM ================= */

.team {
    position: relative;

    padding: 110px 7%;

    background:
        linear-gradient(
            180deg,
            #0f172a,
            #111827
        );
}


/* TEAM TITLE */

.team .section-title {
    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;
}

.team .section-title h4 {
    display: inline-block;

    margin-bottom: 16px;

    padding: 7px 15px;

    color: #F97316;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    border:
        1px solid
        rgba(249, 115, 22, 0.35);

    border-radius: 30px;

    background:
        rgba(249, 115, 22, 0.06);
}

.team .section-title h2 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.1;
}

.team .section-title p {
    max-width: 620px;

    margin: auto;

    color: #9ca3af;

    font-size: 15px;

    line-height: 1.8;
}


/* TEAM GRID */

.team-container {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    max-width: 1200px;

    margin: auto;
}


/* TEAM CARD */

.team-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    min-height: 135px;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 16px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.team-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(249, 115, 22, 0.65);

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.3);
}


/* ORANGE TOP ACCENT */

.team-card::before {
    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            transparent
        );

    opacity: 0;

    transition:
        opacity 0.3s ease;
}

.team-card:hover::before {
    opacity: 1;
}


/* AVATAR */

.team-avatar {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 68px;

    height: 68px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 1px;

    background:
        linear-gradient(
            135deg,
            #F97316,
            #ea580c
        );

    border-radius: 50%;

    box-shadow:
        0 8px 20px
        rgba(249, 115, 22, 0.25);
}


/* TEAM INFO */

.team-info {
    flex: 1;
}

.team-info h3 {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.3;
}

.team-position {
    margin-bottom: 10px;

    color: #9ca3af;

    font-size: 12px;

    line-height: 1.5;
}


/* STATUS */

.status {
    display: inline-flex;

    align-items: center;

    padding: 4px 9px;

    font-size: 10px;

    font-weight: 600;

    border-radius: 20px;
}

.status.active {
    color: #86efac;

    background:
        rgba(34, 197, 94, 0.12);
}

.status.inactive {
    color: #9ca3af;

    background:
        rgba(156, 163, 175, 0.12);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .team-container {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .team {
        padding:
            80px 24px;
    }

    .team-container {
        grid-template-columns:
            1fr;
    }

}/* ================= TEAM SECTION DIVIDER ================= */

.team {
    position: relative;
}


/* MODERN GLOWING DIVIDER */

.team::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 240px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(249, 115, 22, 0.8),
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(249, 115, 22, 0.45);

}


/* CENTER GLOW POINT */

.team::after {

    content: "";

    position: absolute;

    top: -4px;

    left: 50%;

    transform: translateX(-50%);

    width: 9px;

    height: 9px;

    background: #F97316;

    border-radius: 50%;

    box-shadow:
        0 0 15px
        rgba(249, 115, 22, 0.8);

}/* ================= MODERN CONTACT ================= */

.contact {
    position: relative;
    overflow: hidden;
    padding: 120px 7%;
    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(249, 115, 22, 0.08),
            transparent 35%
        );
}


/* MODERN DIVIDER */

.contact::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 240px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(249, 115, 22, 0.5);
}


/* CONTACT CONTENT */

.contact-content {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    max-width: 1200px;

    margin: auto;

    align-items: center;
}


/* LEFT SIDE */

.contact-text h4 {
    display: inline-block;

    margin-bottom: 18px;

    padding: 7px 15px;

    color: #F97316;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    border:
        1px solid
        rgba(249, 115, 22, 0.35);

    border-radius: 30px;

    background:
        rgba(249, 115, 22, 0.06);
}


.contact-text h2 {
    margin-bottom: 22px;

    color: #ffffff;

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.05;

    letter-spacing: -1.5px;
}


.contact-text > p {
    max-width: 520px;

    margin-bottom: 35px;

    color: #9ca3af;

    font-size: 15px;

    line-height: 1.8;
}


/* CONTACT INFO */

.contact-info {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.contact-info p {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    color: #d1d5db;

    font-size: 14px;
}

.contact-info a {
    color: #d1d5db;

    text-decoration: none;

    transition:
        color 0.3s ease;
}

.contact-info a:hover {
    color: #F97316;
}


/* FORM CARD */

.contact-form {
    padding: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.025)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.25);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.contact-form:hover {
    transform: translateY(-6px);

    border-color:
        rgba(249, 115, 22, 0.45);
}


/* FORM LABEL */

.contact-form label {
    display: block;

    margin-bottom: 8px;

    color: #d1d5db;

    font-size: 12px;

    font-weight: 600;
}


/* INPUT & TEXTAREA */

.contact-form input,
.contact-form textarea {
    width: 100%;

    margin-bottom: 20px;

    padding: 14px 16px;

    box-sizing: border-box;

    color: #ffffff;

    font-family: inherit;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 10px;

    outline: none;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #6b7280;
}

.contact-form input:focus,
.contact-form textarea:focus {
    background:
        rgba(255, 255, 255, 0.07);

    border-color:
        #F97316;

    box-shadow:
        0 0 0 3px
        rgba(249, 115, 22, 0.1);
}


/* SEND BUTTON */

.contact-form button {
    width: 100%;

    padding: 14px 20px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #F97316,
            #ea580c
        );

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-form button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(249, 115, 22, 0.3);
}


/* ================= CONTACT RESPONSIVE ================= */

@media (max-width: 800px) {

    .contact {
        padding:
            90px 24px;
    }

    .contact-content {
        grid-template-columns:
            1fr;

        gap: 50px;
    }

}.contact-text {
    text-align: center;
}

.contact-text > p {
    margin-left: auto;
    margin-right: auto;
}

.contact-info {
    align-items: center;
}/* ================= FULL CENTER CONTACT ================= */

.contact-content {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 45px;

    max-width: 900px;

    margin: 0 auto;
}


/* TEXT SECTION */

.contact-text {
    width: 100%;

    text-align: center;
}


/* TITLE */

.contact-text h4 {
    margin-left: auto;
    margin-right: auto;
}

.contact-text h2 {
    text-align: center;
}


/* DESCRIPTION */

.contact-text > p {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/* CONTACT INFORMATION */

.contact-info {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    width: 100%;

    text-align: center;
}

.contact-info p {
    justify-content: center;

    text-align: center;
}


/* FORM */

.contact-form {
    width: 100%;

    max-width: 650px;

    margin: 0 auto;
}/* ================= MODERN FOOTER ================= */

.footer {
    background: #0B1120;
    padding: 70px 80px 20px;
    border-top: 1px solid rgba(249, 115, 22, 0.15);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 60px;
    max-width: 1200px;
    margin: auto;
}

/* BRAND */

.footer-brand h2 {
    color: #F97316;
    font-size: 28px;
    margin-bottom: 20px;
}

.footer-brand p {
    color: #9CA3AF;
    line-height: 1.8;
    max-width: 400px;
}

/* HEADINGS */

.footer h3 {
    color: #FFFFFF;
    font-size: 16px;
    margin-bottom: 20px;
}

/* LINKS */

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: #9CA3AF;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #F97316;
    transform: translateX(5px);
}

/* CONTACT */

.footer-contact p {
    color: #9CA3AF;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* BOTTOM */

.footer-bottom {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    color: #6B7280;
    font-size: 13px;
}/* ================= FOOTER UPGRADE ================= */

.footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(249, 115, 22, 0.12),
            transparent 35%
        ),
        #0B1120;
}


/* DECORATIVE AUDIO WAVE */

.footer::before {
    content: "〰 〰 〰 〰 〰 〰 〰 〰 〰";

    position: absolute;

    right: 50px;
    top: 30px;

    color: #F97316;

    opacity: 0.15;

    font-size: 40px;

    letter-spacing: 8px;

    transform: rotate(-5deg);

    pointer-events: none;
}


/* ORANGE TOP LINE */

.footer::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #F97316,
        #FACC15,
        #F97316,
        transparent
    );
}


/* BRAND */

.footer-brand h2 {
    font-size: 34px !important;

    letter-spacing: 3px;

    text-shadow:
        0 0 20px rgba(249, 115, 22, 0.35);
}


/* LINKS */

.footer-links a,
.footer-contact a {
    transition: all 0.3s ease;
}

.footer-links a:hover {
    padding-left: 8px;
}


/* CONTACT LINKS */

.footer-contact a:hover {
    text-decoration: none !important;
    color: #FACC15 !important;
}


/* FOOTER BOTTOM */

.footer-bottom {
    position: relative;
}

.footer-bottom::before {
    content: "SHAUTUNA AUDIO PRODUCTION";

    display: block;

    color: rgba(249, 115, 22, 0.35);

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 12px;
}/* ================= FOOTER CONTACT FINAL ================= */

.footer-contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.footer-contact h3 {
    margin-bottom: 12px !important;
}

/* Each contact item */

.footer-contact p {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 0 !important;
    padding: 8px 0 !important;

    color: #9CA3AF !important;
}

.footer-contact p a {
    color: #D1D5DB !important;
    text-decoration: none !important;
}

.footer-contact p a:hover {
    color: #F97316 !important;
}/* ================= ABOUT PREMIUM EFFECT ================= */

.about-section {
    position: relative;
    overflow: hidden;
}


/* SUBTLE ORANGE GLOW */

.about-section::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -120px;
    top: 50%;

    transform: translateY(-50%);

    background: #F97316;

    opacity: 0.06;

    filter: blur(100px);

    border-radius: 50%;

    pointer-events: none;
}


/* CONTENT ABOVE EFFECT */

.about-section > * {
    position: relative;
    z-index: 1;
}


/* IMAGE HOVER */

.about-image img {
    transition: transform 0.5s ease,
                filter 0.5s ease;
}

.about-image img:hover {
    transform: scale(1.03);

    filter:
        drop-shadow(
            0 15px 35px
            rgba(249, 115, 22, 0.18)
        );
}/* ================= ABOUT PREMIUM EFFECT ================= */

.about-section {
    position: relative;
    isolation: isolate;
}


/* DECORATIVE AUDIO GRID */

.about-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -120px;
    top: 50%;

    transform: translateY(-50%);

    background:
        linear-gradient(
            rgba(249, 115, 22, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(249, 115, 22, 0.08) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    mask-image: radial-gradient(
        circle,
        black 20%,
        transparent 70%
    );

    opacity: 0.5;

    pointer-events: none;

    z-index: -1;
}


/* ORANGE LIGHT */

.about-section::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: 60px;
    top: 50%;

    transform: translateY(-50%);

    background: #F97316;

    opacity: 0.08;

    filter: blur(90px);

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


/* STATS HOVER */

.about-stats .card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.about-stats .card:hover {
    transform: translateY(-8px);

    border-color: #F97316;

    box-shadow:
        0 15px 35px
        rgba(249, 115, 22, 0.18);
}/* ================= FOOTER VISUAL UPGRADE ================= */

.footer {
    position: relative;
    overflow: hidden;
}


/* TECHNICAL GRID BACKGROUND */

.footer::after {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 30%,
            black 70%,
            transparent
        );

    pointer-events: none;
}


/* CONTENT ABOVE GRID */

.footer-content,
.footer-bottom {
    position: relative;
    z-index: 2;
}


/* BRAND */

.footer-brand h2 {
    position: relative;

    display: inline-block;

    font-size: 36px !important;

    letter-spacing: 5px;

    transition: 0.4s ease;
}

.footer-brand h2:hover {
    letter-spacing: 8px;

    text-shadow:
        0 0 10px rgba(249,115,22,0.4),
        0 0 30px rgba(249,115,22,0.25);
}


/* BRAND ACCENT */

.footer-brand h2::after {
    content: "";

    display: block;

    width: 45px;
    height: 3px;

    margin-top: 12px;

    background: #F97316;

    border-radius: 10px;

    transition: 0.4s ease;
}

.footer-brand h2:hover::after {
    width: 90px;
}


/* LINK HOVER */

.footer-links a {
    position: relative;

    width: fit-content;

    transition: all 0.3s ease;
}

.footer-links a::before {
    content: "›";

    position: absolute;

    left: -16px;

    opacity: 0;

    color: #F97316;

    transition: 0.3s ease;
}

.footer-links a:hover::before {
    opacity: 1;
}

.footer-links a:hover {
    color: #F97316;

    transform: translateX(6px);
}


/* CONTACT HOVER */

.footer-contact p {
    transition: 0.3s ease;
}

.footer-contact p:hover {
    transform: translateX(5px);
}

.footer-contact p:hover a {
    color: #F97316;
}


/* COPYRIGHT */

.footer-bottom p {
    opacity: 0.8;

    transition: 0.3s ease;
}

.footer-bottom p:hover {
    opacity: 1;

    color: #9CA3AF;
}/* ================= MODERN NAVBAR ================= */

nav ul {
    display: flex;
    align-items: center;
    gap: 8px;
}

nav ul li a {
    position: relative;

    display: block;

    padding: 10px 16px;

    color: #D1D5DB;

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    border-radius: 8px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}


/* HOVER */

nav ul li a:hover {
    color: #FFFFFF;

    background: rgba(249, 115, 22, 0.12);

    transform: translateY(-2px);
}


/* ORANGE ACTIVE LINE */

nav ul li a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 0;
    height: 2px;

    background: #F97316;

    border-radius: 10px;

    transform: translateX(-50%);

    transition: width 0.3s ease;
}

nav ul li a:hover::after {
    width: 22px;
}/* ================= HERO BUTTONS ================= */

.hero-button {
    display: flex;

    gap: 16px;

    margin-top: 32px;
}


/* BASE BUTTON */

.btn-primary,
.btn-secondary {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 24px;

    min-width: 155px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.8px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


/* ================= JOIN SHAUTUNA ================= */

.btn-primary {

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #F97316,
            #EA580C
        );

    box-shadow:
        0 8px 20px
        rgba(249, 115, 22, 0.25);
}

.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 14px 30px
        rgba(249, 115, 22, 0.4);
}


/* ================= EXPLORE EVENTS ================= */

.btn-secondary {

    color: #F97316;

    background:
        rgba(249, 115, 22, 0.04);

    border: 1px solid
        rgba(249, 115, 22, 0.7);

    box-shadow:
        inset 0 0 0 1px
        rgba(249, 115, 22, 0.05);
}

.btn-secondary:hover {

    color: #FFFFFF;

    background: #F97316;

    transform: translateY(-4px);

    box-shadow:
        0 14px 30px
        rgba(249, 115, 22, 0.3);
}


/* ================= LIGHT SWEEP EFFECT ================= */

.btn-primary::before,
.btn-secondary::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 60%;

    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,0.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.6s ease;

    pointer-events: none;
}

.btn-primary:hover::before,
.btn-secondary:hover::before {

    left: 130%;
}/* ================= GUEST PORTAL ================= */

.register-choice-btn {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 15px 20px;

    margin-top: 16px;

    text-align: center;

    text-decoration: none;

    color: #FFFFFF;

    background: linear-gradient(
        135deg,
        #F97316,
        #EA580C
    );

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.8px;

    transition: all 0.3s ease;

    box-shadow:
        0 8px 20px
        rgba(249, 115, 22, 0.18);
}


.register-choice-btn:hover {

    transform: translateY(-3px);

    background: linear-gradient(
        135deg,
        #FB923C,
        #F97316
    );

    box-shadow:
        0 14px 30px
        rgba(249, 115, 22, 0.35);
}/* ================= GUEST PORTAL ================= */

.guest-portal {

    position: relative;

    overflow: hidden;

}


/* BADGE */

.guest-badge {

    display: inline-block;

    padding: 6px 14px;

    margin-bottom: 18px;

    border: 1px solid rgba(249, 115, 22, 0.5);

    border-radius: 30px;

    color: #F97316;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* INTRO */

.guest-intro {

    margin: 20px 0 25px;

}

.guest-intro p {

    color: #9CA3AF;

    font-size: 14px;

    line-height: 1.7;

}


/* MENU */

.guest-menu {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* MENU ITEM */

.guest-menu-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px;

    border: 1px solid #374151;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.02);

    text-decoration: none;

    transition: all 0.3s ease;

}


/* ICON */

.guest-menu-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: rgba(249, 115, 22, 0.12);

    font-size: 20px;

}


/* TEXT */

.guest-menu-text {

    flex: 1;

}

.guest-menu-text h3 {

    margin: 0 0 4px;

    color: #FFFFFF;

    font-size: 13px;

    letter-spacing: 0.5px;

}

.guest-menu-text p {

    margin: 0;

    color: #9CA3AF;

    font-size: 12px;

}


/* ARROW */

.guest-menu-arrow {

    color: #F97316;

    font-size: 22px;

    transition: transform 0.3s ease;

}


/* HOVER */

.guest-menu-item:hover {

    transform: translateY(-3px);

    border-color: #F97316;

    background: rgba(249, 115, 22, 0.08);

    box-shadow:

        0 12px 30px

        rgba(249, 115, 22, 0.12);

}

.guest-menu-item:hover .guest-menu-arrow {

    transform: translateX(5px);

}/* ================= JOIN SHAUTUNA MODERN ================= */

.join-portal {
    position: relative;
    overflow: hidden;
}

.join-portal::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #F97316,
        #FB923C,
        #F97316
    );
}


/* OPTION */

.join-portal .register-option {

    padding: 20px;

    margin: 18px 0;

    border: 1px solid #374151;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.025);

    text-align: left;

    transition: all 0.3s ease;
}


/* HEADER */

.join-option-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 14px;
}


/* ICON */

.join-option-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: rgba(249, 115, 22, 0.12);

    font-size: 22px;
}


/* TITLE */

.join-option-header h3 {

    margin: 0 0 4px;

    color: #FFFFFF;

    font-size: 14px;

    letter-spacing: 0.6px;
}


.join-option-header span {

    color: #9CA3AF;

    font-size: 12px;
}


/* DESCRIPTION */

.join-portal .register-option p {

    color: #9CA3AF;

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 16px;
}


/* BUTTON */

.join-portal .register-choice-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    box-sizing: border-box;

    text-decoration: none;
}


/* ARROW */

.join-portal .register-choice-btn span {

    font-size: 20px;

    transition: transform 0.3s ease;
}


/* HOVER */

.join-portal .register-option:hover {

    transform: translateY(-4px);

    border-color: #F97316;

    background: rgba(249, 115, 22, 0.07);

    box-shadow:

        0 15px 35px

        rgba(249, 115, 22, 0.14);
}


.join-portal .register-choice-btn:hover span {

    transform: translateX(6px);
}/* ================= MEMBER REGISTRATION ================= */

.member-register-box {
    position: relative;
    overflow: hidden;
}

.member-register-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #F97316,
        #FB923C,
        #F97316
    );
}


/* BADGE */

.member-badge {

    display: inline-block;

    margin-bottom: 16px;

    padding: 6px 14px;

    border: 1px solid rgba(249, 115, 22, 0.45);

    border-radius: 30px;

    color: #F97316;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* FORM INPUT HOVER */

.member-register-box input {

    transition: all 0.3s ease;
}

.member-register-box input:focus {

    border-color: #F97316;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.12);

    outline: none;
}


/* BUTTON */

.member-register-box button {

    transition: all 0.3s ease;
}

.member-register-box button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(249, 115, 22, 0.25);
}/* ================= MODERN MEMBER REGISTER ================= */

.member-register-box {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(249, 115, 22, 0.12),
            rgba(17, 24, 39, 0.85)
        );

    border: 1px solid rgba(249, 115, 22, 0.25);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* ORANGE GLOW DI BELAKANG */

.member-register-box::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -100px;
    right: -80px;

    background: #F97316;

    opacity: 0.08;

    filter: blur(70px);

    border-radius: 50%;

    pointer-events: none;
}


/* GARIS ORANGE ATAS */

.member-register-box::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #F97316,
        #FB923C,
        transparent
    );

    opacity: 0.9;
}


/* HOVER POP-UP */

.member-register-box:hover {

    transform: translateY(-8px);

    border-color: rgba(249, 115, 22, 0.65);

    box-shadow:
        0 25px 70px rgba(249, 115, 22, 0.15),
        0 0 35px rgba(249, 115, 22, 0.08);
}


/* BADGE */

.member-badge {

    display: inline-block;

    padding: 7px 15px;

    margin-bottom: 18px;

    border: 1px solid rgba(249, 115, 22, 0.45);

    border-radius: 30px;

    color: #F97316;

    background: rgba(249, 115, 22, 0.08);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;
}


.member-register-box:hover .member-badge {

    background: rgba(249, 115, 22, 0.16);

    box-shadow:
        0 0 18px rgba(249, 115, 22, 0.2);
}


/* INPUT MODERN */

.member-register-box input {

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(156, 163, 175, 0.25);

    transition: all 0.3s ease;
}


.member-register-box input:hover {

    border-color: rgba(249, 115, 22, 0.45);

    background: rgba(249, 115, 22, 0.04);
}


.member-register-box input:focus {

    outline: none;

    border-color: #F97316;

    background: rgba(249, 115, 22, 0.06);

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.1),
        0 0 20px rgba(249, 115, 22, 0.08);
}


/* BUTTON */

.member-register-box button {

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;
}


.member-register-box button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(249, 115, 22, 0.3);
}


.member-register-box button:active {

    transform: scale(0.98);
}/* ================= MODERN LOGIN EFFECT ================= */

.modern-login-box {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(249, 115, 22, 0.25);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.modern-login-box:hover {
    transform: translateY(-8px);

    border-color: rgba(249, 115, 22, 0.7);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(249, 115, 22, 0.15);
}

/* ORANGE GLOW */

.modern-login-box::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    right: -80px;

    background: #F97316;

    opacity: 0.08;

    filter: blur(70px);

    border-radius: 50%;

    pointer-events: none;

    transition: all 0.5s ease;
}

.modern-login-box:hover::before {
    transform: scale(1.4);

    opacity: 0.15;
}

/* BADGE */

.login-badge {
    display: inline-block;

    padding: 7px 14px;

    margin-bottom: 18px;

    color: #F97316;

    background: rgba(249, 115, 22, 0.08);

    border: 1px solid rgba(249, 115, 22, 0.35);

    border-radius: 30px;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;
}

.modern-login-box:hover .login-badge {
    background: rgba(249, 115, 22, 0.16);

    border-color: #F97316;

    box-shadow:
        0 0 18px rgba(249, 115, 22, 0.2);
}

/* INPUT HOVER */

.modern-login-box input {
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.modern-login-box input:hover {
    border-color: rgba(249, 115, 22, 0.5);
}

.modern-login-box input:focus {
    border-color: #F97316;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.1);
}

/* BUTTON */

.modern-login-box button {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.modern-login-box button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(249, 115, 22, 0.3);
}/* ================= NAVBAR AUTH BUTTONS ================= */

.nav-button {

    display: flex;

    align-items: center;

    gap: 12px;

}


/* LOGIN BUTTON */

.login-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 20px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 10px;

    color: #FFFFFF;

    background: rgba(255, 255, 255, 0.04);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: all 0.3s ease;

}


.login-btn:hover {

    color: #F97316;

    border-color: #F97316;

    background: rgba(249, 115, 22, 0.08);

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(249, 115, 22, 0.12);

}


/* REGISTER BUTTON */

.register-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 22px;

    border-radius: 10px;

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #F97316,
            #EA580C
        );

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 20px
        rgba(249, 115, 22, 0.2);

    transition: all 0.3s ease;

}


.register-btn:hover {

    transform: translateY(-3px) scale(1.03);

    background:
        linear-gradient(
            135deg,
            #FB923C,
            #F97316
        );

    box-shadow:
        0 12px 28px
        rgba(249, 115, 22, 0.35);

}


.register-btn:active,
.login-btn:active {

    transform: scale(0.96);

}/* ================= MODERN MEMBER DASHBOARD ================= */

.dashboard {

    min-height: 100vh;

    display: flex;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(249, 115, 22, 0.08),
            transparent 35%
        ),
        #0B1120;

}


/* ================= SIDEBAR ================= */

.sidebar {

    width: 260px;

    min-height: 100vh;

    padding: 28px 20px;

    background:
        rgba(17, 24, 39, 0.82);

    border-right: 1px solid
        rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(20px);

}


.dashboard-logo {

    padding: 0 12px 35px;

    border-bottom: 1px solid
        rgba(255, 255, 255, 0.08);

    margin-bottom: 28px;

}


.dashboard-logo h2 {

    color: #F97316;

    font-size: 24px;

    letter-spacing: 2px;

}


.dashboard-logo p {

    color: #9CA3AF;

    font-size: 12px;

    margin-top: 5px;

}


/* ================= NAVIGATION ================= */

.dashboard-nav {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.dashboard-nav a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    color: #9CA3AF;

    text-decoration: none;

    border-radius: 12px;

    font-size: 14px;

    transition: all 0.3s ease;

}


.dashboard-nav a:hover {

    color: #FFFFFF;

    background:
        rgba(249, 115, 22, 0.08);

    transform: translateX(5px);

}


.dashboard-nav a.active {

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            rgba(249, 115, 22, 0.22),
            rgba(249, 115, 22, 0.06)
        );

    border: 1px solid
        rgba(249, 115, 22, 0.25);

    box-shadow:
        0 8px 25px
        rgba(249, 115, 22, 0.08);

}


.dashboard-nav a.active::before {

    content: "";

    position: absolute;

    left: -20px;

    width: 4px;

    height: 24px;

    background: #F97316;

    border-radius: 0 5px 5px 0;

}


/* ================= MAIN CONTENT ================= */

.dashboard-main {

    flex: 1;

    padding: 38px 45px;

}


/* ================= HEADER ================= */

.dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 38px;

}


.dashboard-header h1 {

    font-size: 32px;

    color: #FFFFFF;

}


.dashboard-header p {

    color: #9CA3AF;

    margin-top: 8px;

}


.dashboard-header span {

    color: #F97316;

}


/* ================= STAT CARDS ================= */

.dashboard-stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-bottom: 35px;

}


.stat-card {

    position: relative;

    overflow: hidden;

    padding: 24px;

    background:
        rgba(31, 41, 55, 0.65);

    border: 1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    backdrop-filter: blur(15px);

    transition: all 0.35s ease;

}


.stat-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(249, 115, 22, 0.45);

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.3),

        0 0 25px
        rgba(249, 115, 22, 0.08);

}


.stat-card h3 {

    color: #F97316;

    font-size: 30px;

    margin-bottom: 8px;

}


.stat-card p {

    color: #9CA3AF;

    font-size: 13px;

}


/* ================= DASHBOARD CARDS ================= */

.dashboard-card {

    background:
        rgba(31, 41, 55, 0.6);

    border: 1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    padding: 28px;

    backdrop-filter: blur(18px);

    transition: all 0.35s ease;

}


.dashboard-card:hover {

    border-color:
        rgba(249, 115, 22, 0.35);

    transform: translateY(-4px);

}


.dashboard-card h2 {

    font-size: 20px;

    margin-bottom: 20px;

}


.dashboard-card h3 {

    color: #F97316;

}


.dashboard-card p {

    color: #9CA3AF;

    line-height: 1.7;

}


/* ================= QUICK ACTIONS ================= */

.quick-actions {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;

}


.quick-action {

    padding: 20px;

    text-decoration: none;

    color: #FFFFFF;

    background:
        rgba(255, 255, 255, 0.04);

    border: 1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 15px;

    transition: all 0.3s ease;

}


.quick-action:hover {

    background:
        rgba(249, 115, 22, 0.1);

    border-color: #F97316;

    transform: translateY(-5px);

}


.quick-action span {

    display: block;

    color: #9CA3AF;

    font-size: 12px;

    margin-top: 7px;

}


/* ================= LOGOUT ================= */

.logout {

    display: block;

    margin-top: 30px;

    padding: 13px 16px;

    color: #F87171;

    text-decoration: none;

    border-radius: 12px;

    transition: all 0.3s ease;

}


.logout:hover {

    background:
        rgba(239, 68, 68, 0.1);

    transform: translateX(5px);

}


/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

    .dashboard-stats {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 700px) {

    .dashboard {

        flex-direction: column;

    }

    .sidebar {

        width: auto;

        min-height: auto;

    }

    .dashboard-main {

        padding: 25px 20px;

    }

    .dashboard-stats {

        grid-template-columns:
            1fr;

    }

    .quick-actions {

        grid-template-columns:
            1fr;

    }

}/* =====================================================
   SHAUTUNA PREMIUM MEMBER DASHBOARD
===================================================== */

.dashboard {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(249, 115, 22, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 35% 90%,
            rgba(249, 115, 22, 0.05),
            transparent 30%
        ),
        #080D18;
}


/* subtle grid background */

.dashboard::before {
    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: 0.035;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.5) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.5) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {
    position: relative;

    z-index: 2;

    width: 270px;

    padding: 30px 18px;

    background:
        linear-gradient(
            180deg,
            rgba(17, 24, 39, 0.95),
            rgba(10, 15, 26, 0.92)
        );

    border-right: 1px solid
        rgba(255,255,255,0.07);

    box-shadow:
        10px 0 40px
        rgba(0,0,0,0.18);
}


/* logo */

.dashboard-logo {
    position: relative;

    padding: 10px 15px 28px;

    margin-bottom: 25px;
}


.dashboard-logo::after {
    content: "";

    position: absolute;

    left: 15px;

    bottom: 0;

    width: 45px;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #F97316,
            transparent
        );
}


.dashboard-logo h2 {
    font-size: 25px;

    letter-spacing: 3px;

    background:
        linear-gradient(
            90deg,
            #FFFFFF,
            #F97316
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.dashboard-logo span {
    display: block;

    color: #6B7280;

    font-size: 11px;

    letter-spacing: 1px;

    margin-top: 7px;
}


/* =====================================================
   NAVIGATION
===================================================== */

.dashboard-nav a {
    position: relative;

    margin: 5px 0;

    padding: 15px 17px;

    border: 1px solid transparent;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border 0.3s ease,
        box-shadow 0.3s ease;
}


.dashboard-nav a:hover {
    transform: translateX(7px);

    background:
        rgba(249,115,22,0.07);

    border-color:
        rgba(249,115,22,0.15);
}


.dashboard-nav a.active {
    background:
        linear-gradient(
            100deg,
            rgba(249,115,22,0.18),
            rgba(249,115,22,0.035)
        );

    border-color:
        rgba(249,115,22,0.22);

    box-shadow:
        inset 4px 0 0 #F97316,
        0 8px 25px
        rgba(249,115,22,0.06);
}


/* =====================================================
   MAIN AREA
===================================================== */

.dashboard-main {
    position: relative;

    z-index: 1;

    padding: 42px 48px;
}


/* =====================================================
   HEADER
===================================================== */

.dashboard-header {
    padding: 25px 28px;

    margin-bottom: 28px;

    border: 1px solid
        rgba(255,255,255,0.07);

    border-radius: 22px;

    background:
        linear-gradient(
            120deg,
            rgba(31,41,55,0.72),
            rgba(17,24,39,0.42)
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.15);
}


.dashboard-header h1 {
    font-size: clamp(24px, 3vw, 36px);

    letter-spacing: -1px;
}


.dashboard-header h1 span {
    background:
        linear-gradient(
            90deg,
            #F97316,
            #FDBA74
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.dashboard-header p {
    font-size: 13px;

    color: #9CA3AF;
}


/* =====================================================
   STAT CARDS
===================================================== */

.dashboard-stats {
    gap: 16px;
}


.dashboard-stat-card {
    position: relative;

    overflow: hidden;

    min-height: 115px;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(31,41,55,0.78),
            rgba(17,24,39,0.62)
        );

    border: 1px solid
        rgba(255,255,255,0.075);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,0.16);
}


.dashboard-stat-card::before {
    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F97316,
            transparent
        );

    opacity: 0;

    transition: opacity 0.3s ease;
}


.dashboard-stat-card:hover::before {
    opacity: 1;
}


.dashboard-stat-card:hover {
    transform: translateY(-8px) scale(1.015);

    background:
        linear-gradient(
            145deg,
            rgba(45,55,72,0.85),
            rgba(17,24,39,0.68)
        );

    box-shadow:
        0 20px 45px
        rgba(0,0,0,0.28),

        0 0 30px
        rgba(249,115,22,0.08);
}


.stat-icon {
    background:
        linear-gradient(
            135deg,
            rgba(249,115,22,0.20),
            rgba(249,115,22,0.04)
        );

    border: 1px solid
        rgba(249,115,22,0.18);

    box-shadow:
        0 0 20px
        rgba(249,115,22,0.08);
}


/* =====================================================
   CONTENT CARDS
===================================================== */

.dashboard-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(31,41,55,0.76),
            rgba(17,24,39,0.58)
        );

    box-shadow:
        0 18px 45px
        rgba(0,0,0,0.15);
}


.dashboard-card::after {
    content: "";

    position: absolute;

    top: -100px;

    right: -100px;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background:
        rgba(249,115,22,0.035);

    filter: blur(25px);

    pointer-events: none;
}


.dashboard-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 25px 55px
        rgba(0,0,0,0.22),

        0 0 25px
        rgba(249,115,22,0.045);
}


/* =====================================================
   EVENT ROWS
===================================================== */

.dashboard-event {
    position: relative;

    padding: 18px 0;

    transition:
        padding-left 0.3s ease;
}


.dashboard-event:hover {
    padding-left: 8px;
}


.event-small-date {
    background:
        linear-gradient(
            145deg,
            rgba(249,115,22,0.18),
            rgba(249,115,22,0.04)
        );

    box-shadow:
        0 0 20px
        rgba(249,115,22,0.05);
}


.dashboard-event h3 {
    transition: color 0.3s ease;
}


.dashboard-event:hover h3 {
    color: #FB923C;
}


/* =====================================================
   PROFILE
===================================================== */

.large-avatar {
    position: relative;

    border: 3px solid
        rgba(249,115,22,0.28);

    box-shadow:
        0 0 0 8px
        rgba(249,115,22,0.035),

        0 0 40px
        rgba(249,115,22,0.22);
}


.large-avatar::after {
    content: "";

    position: absolute;

    right: 1px;

    bottom: 4px;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #22C55E;

    border: 3px solid #111827;
}


/* =====================================================
   ACTIVITY
===================================================== */

.activity-item {
    padding: 18px 8px;

    border-radius: 12px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.activity-item:hover {
    background:
        rgba(255,255,255,0.025);

    transform: translateX(5px);
}


.activity-item > span {
    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        rgba(249,115,22,0.08);

    border: 1px solid
        rgba(249,115,22,0.12);
}


/* =====================================================
   LOGOUT
===================================================== */

.logout {
    margin-top: 35px;

    border: 1px solid transparent;
}


.logout:hover {
    border-color:
        rgba(239,68,68,0.18);

    box-shadow:
        0 8px 20px
        rgba(239,68,68,0.05);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .sidebar {
        padding: 20px;
    }

    .dashboard-main {
        padding: 25px 18px;
    }

    .dashboard-header {
        padding: 20px;
    }

}.dashboard-stat-card::before {
    display: none;
}/* ================= PREMIUM STAT POPUP ================= */

.dashboard-stat-card {
    position: relative;
    overflow: hidden;

    cursor: pointer;

    transform: translateY(0);

    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* garis cahaya */

.dashboard-stat-card::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0%;
    height: 3px;

    background: linear-gradient(
        90deg,
        #F97316,
        #FDBA74,
        #F97316
    );

    transition: width 0.5s ease;
}


/* efek cahaya dalam card */

.dashboard-stat-card::after {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    top: -70px;
    right: -70px;

    border-radius: 50%;

    background:
        rgba(249, 115, 22, 0.10);

    filter: blur(25px);

    opacity: 0;

    transition:
        opacity 0.4s ease,
        transform 0.5s ease;
}


/* HOVER POP UP */

.dashboard-stat-card:hover {

    transform:
        translateY(-12px)
        scale(1.035);

    border-color:
        rgba(249, 115, 22, 0.55);

    box-shadow:

        0 25px 45px
        rgba(0, 0, 0, 0.35),

        0 0 35px
        rgba(249, 115, 22, 0.14);
}


.dashboard-stat-card:hover::before {
    width: 100%;
}


.dashboard-stat-card:hover::after {

    opacity: 1;

    transform: scale(1.8);
}


/* ICON POP-UP */

.dashboard-stat-card .stat-icon {

    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.4s ease;
}


.dashboard-stat-card:hover .stat-icon {

    transform:
        scale(1.18)
        rotate(-6deg);

    box-shadow:
        0 0 25px
        rgba(249, 115, 22, 0.30);
}


/* ANGKA MEMBESAR */

.dashboard-stat-card h3 {

    transition:
        transform 0.4s ease,
        color 0.4s ease;
}


.dashboard-stat-card:hover h3 {

    transform:
        scale(1.12);

    color: #FDBA74;
}


/* LABEL */

.dashboard-stat-card p {

    transition:
        color 0.3s ease;
}


.dashboard-stat-card:hover p {

    color: #FFFFFF;
}.profile-locked {
    color: #9CA3AF;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}/* =====================================================
   MODERN WELCOME HEADER
===================================================== */

.dashboard-header {

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* floating popup */

.dashboard-header:hover {

    transform:
        translateY(-6px);

    box-shadow:

        0 25px 60px
        rgba(0,0,0,0.3),

        0 0 35px
        rgba(249,115,22,0.08);
}


/* background glow */

.dashboard-header::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    top: -180px;

    left: 30%;

    border-radius: 50%;

    background:
        rgba(249,115,22,0.10);

    filter: blur(50px);

    pointer-events: none;

}


/* label */

.welcome-label {

    display: inline-block;

    margin-bottom: 10px;

    padding: 5px 10px;

    border-radius: 6px;

    color: #FB923C;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

    background:
        rgba(249,115,22,0.08);

    border:
        1px solid
        rgba(249,115,22,0.18);
}


/* profile card */

.profile-mini-card {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 280px;

    padding: 14px 18px;

    border-radius: 16px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid
        rgba(255,255,255,0.08);

    transition:

        transform 0.35s ease,

        background 0.35s ease,

        border-color 0.35s ease;
}


.profile-mini-card:hover {

    transform:
        translateY(-5px)
        scale(1.03);

    background:
        rgba(249,115,22,0.07);

    border-color:
        rgba(249,115,22,0.35);

    box-shadow:

        0 15px 35px
        rgba(0,0,0,0.25),

        0 0 25px
        rgba(249,115,22,0.08);
}


/* avatar */

.profile-mini-card .profile-avatar {

    flex-shrink: 0;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-weight: bold;

    color: white;

    background:
        linear-gradient(
            135deg,
            #F97316,
            #C2410C
        );

    box-shadow:

        0 0 0 5px
        rgba(249,115,22,0.08),

        0 0 25px
        rgba(249,115,22,0.25);

    transition:
        transform 0.4s ease;
}


.profile-mini-card:hover .profile-avatar {

    transform:
        scale(1.12)
        rotate(5deg);
}


/* profile text */

.profile-mini-info {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.profile-mini-info strong {

    color: #FFFFFF;

    font-size: 13px;
}


.profile-mini-info span {

    color: #9CA3AF;

    font-size: 11px;
}


.profile-mini-info small {

    color: #22C55E;

    font-size: 10px;

    font-weight: bold;
}


/* mobile */

@media (max-width: 700px) {

    .dashboard-header {

        flex-direction: column;

        align-items: flex-start;

    }

    .profile-mini-card {

        width: 100%;

        min-width: unset;

    }

}/* =====================================================
   PREMIUM SIDEBAR
===================================================== */

.sidebar {

    position: relative;

    display: flex;

    flex-direction: column;

    background:

        linear-gradient(
            180deg,
            #111827 0%,
            #0B1120 55%,
            #080D18 100%
        );

    box-shadow:

        15px 0 45px
        rgba(0,0,0,0.25);

}


/* ================= LOGO ================= */

.dashboard-logo {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 8px 10px 25px;

}


.logo-mark {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: white;

    font-size: 22px;

    font-weight: 900;

    background:

        linear-gradient(
            135deg,
            #F97316,
            #C2410C
        );

    box-shadow:

        0 0 0 5px
        rgba(249,115,22,0.07),

        0 0 25px
        rgba(249,115,22,0.25);

    transition:

        transform 0.4s ease,

        box-shadow 0.4s ease;

}


.dashboard-logo:hover .logo-mark {

    transform:

        rotate(-8deg)
        scale(1.1);

    box-shadow:

        0 0 0 7px
        rgba(249,115,22,0.08),

        0 0 35px
        rgba(249,115,22,0.4);

}


.logo-text h2 {

    margin: 0;

    font-size: 21px;

    letter-spacing: 3px;

    background:

        linear-gradient(
            90deg,
            #FFFFFF,
            #FDBA74
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.logo-text span {

    display: block;

    margin-top: 4px;

    color: #6B7280;

    font-size: 8px;

    letter-spacing: 1.7px;

}


/* ================= PORTAL BADGE ================= */

.member-portal-badge {

    display: flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    margin: 0 10px 22px;

    padding: 7px 11px;

    color: #FB923C;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 1.5px;

    border-radius: 8px;

    background:

        rgba(249,115,22,0.07);

    border:

        1px solid
        rgba(249,115,22,0.18);

}


.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #22C55E;

    box-shadow:

        0 0 8px
        #22C55E;

}


/* ================= NAVIGATION ================= */

.dashboard-nav {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.dashboard-nav a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 12px 13px;

    color: #9CA3AF;

    border-radius: 13px;

    border: 1px solid transparent;

    transition:

        transform 0.3s ease,

        color 0.3s ease,

        background 0.3s ease,

        border-color 0.3s ease,

        box-shadow 0.3s ease;

}


.dashboard-nav a:hover {

    color: #FFFFFF;

    transform: translateX(6px);

    background:

        rgba(255,255,255,0.035);

    border-color:

        rgba(255,255,255,0.07);

}


/* ACTIVE */

.dashboard-nav a.active {

    color: #FFFFFF;

    background:

        linear-gradient(
            100deg,
            rgba(249,115,22,0.18),
            rgba(249,115,22,0.035)
        );

    border-color:

        rgba(249,115,22,0.22);

    box-shadow:

        inset 3px 0 0 #F97316,

        0 8px 25px
        rgba(249,115,22,0.07);

}


/* ICON BOX */

.nav-icon {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    font-size: 16px;

    background:

        rgba(255,255,255,0.035);

    border:

        1px solid
        rgba(255,255,255,0.06);

    transition:

        transform 0.3s ease,

        background 0.3s ease;

}


.dashboard-nav a:hover .nav-icon {

    transform:

        scale(1.12)
        rotate(-4deg);

    background:

        rgba(249,115,22,0.12);

}


.dashboard-nav a.active .nav-icon {

    background:

        rgba(249,115,22,0.15);

    border-color:

        rgba(249,115,22,0.25);

}


/* ================= SIDEBAR FOOTER ================= */

.sidebar-footer {

    margin-top: auto;

}


.sidebar-divider {

    height: 1px;

    margin: 20px 5px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.1),
            transparent
        );

}


/* ================= LOGOUT ================= */

.sidebar .logout {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 12px 13px;

    color: #9CA3AF;

    border-radius: 13px;

    transition:

        transform 0.3s ease,

        color 0.3s ease,

        background 0.3s ease;

}


.sidebar .logout:hover {

    color: #FCA5A5;

    transform: translateX(6px);

    background:

        rgba(239,68,68,0.07);

}


.logout-arrow {

    margin-left: auto;

    opacity: 0;

    transform: translateX(-5px);

    transition:

        opacity 0.3s ease,

        transform 0.3s ease;

}


.logout:hover .logout-arrow {

    opacity: 1;

    transform: translateX(0);

}/* =====================================================
   MODERN GALLERY PAGE
===================================================== */

.gallery-page {

    min-height: 100vh;

    background:

        radial-gradient(
            circle at 80% 10%,
            rgba(249,115,22,0.08),
            transparent 30%
        ),

        #0B1120;

}


/* ================= HERO ================= */

.gallery-hero {

    position: relative;

    min-height: 420px;

    display: flex;

    align-items: center;

    padding: 80px 8%;

    overflow: hidden;

    background:

        linear-gradient(
            120deg,
            rgba(11,17,32,0.98),
            rgba(17,24,39,0.86)
        );

}


.gallery-hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -150px;

    top: -200px;

    border-radius: 50%;

    background:

        rgba(249,115,22,0.12);

    filter: blur(80px);

}


.gallery-hero-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

}


.gallery-label,
.section-label {

    color: #FB923C;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;

}


.gallery-hero h1 {

    margin: 18px 0;

    font-size: clamp(48px, 7vw, 90px);

    line-height: 0.95;

    color: #FFFFFF;

    letter-spacing: -3px;

}


.gallery-hero h1 span {

    display: block;

    color: #F97316;

}


.gallery-hero p {

    max-width: 520px;

    color: #9CA3AF;

    font-size: 17px;

    line-height: 1.7;

}


.gallery-back-btn {

    display: inline-block;

    margin-top: 28px;

    padding: 13px 20px;

    color: #FFFFFF;

    text-decoration: none;

    border-radius: 10px;

    background:

        rgba(249,115,22,0.12);

    border:

        1px solid
        rgba(249,115,22,0.3);

    transition:

        transform 0.3s ease,

        background 0.3s ease,

        box-shadow 0.3s ease;

}


.gallery-back-btn:hover {

    transform: translateY(-5px);

    background:

        #F97316;

    box-shadow:

        0 12px 30px
        rgba(249,115,22,0.25);

}


/* ================= MAIN ================= */

.gallery-main {

    max-width: 1400px;

    margin: auto;

    padding: 80px 6%;

}


.gallery-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 40px;

    margin-bottom: 45px;

}


.gallery-heading h2 {

    margin-top: 12px;

    color: #FFFFFF;

    font-size: 42px;

}


.gallery-heading h2 span {

    color: #F97316;

}


.gallery-heading p {

    max-width: 380px;

    color: #9CA3AF;

    line-height: 1.7;

}


/* ================= GRID ================= */

.modern-gallery-grid {

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    grid-auto-rows: 280px;

    gap: 18px;

}


.modern-gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    background: #111827;

    cursor: pointer;

    border:

        1px solid
        rgba(255,255,255,0.07);

    transition:

        transform 0.45s ease,

        box-shadow 0.45s ease,

        border-color 0.45s ease;

}


.modern-gallery-item.large {

    grid-column: span 2;

}


.modern-gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 0.7s ease,

        filter 0.7s ease;

}


.modern-gallery-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            transparent 25%,
            rgba(0,0,0,0.9)
        );

}


.modern-gallery-item:hover {

    transform:

        translateY(-10px)
        scale(1.015);

    border-color:

        rgba(249,115,22,0.45);

    box-shadow:

        0 25px 50px
        rgba(0,0,0,0.4),

        0 0 30px
        rgba(249,115,22,0.08);

}


.modern-gallery-item:hover img {

    transform: scale(1.1);

    filter: brightness(0.75);

}


/* ================= OVERLAY ================= */

.gallery-overlay {

    position: absolute;

    z-index: 2;

    left: 24px;

    right: 24px;

    bottom: 22px;

}


.gallery-overlay span {

    color: #FB923C;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;

}


.gallery-overlay h3 {

    margin: 7px 0;

    color: #FFFFFF;

    font-size: 22px;

}


.gallery-overlay p {

    margin: 0;

    color: #D1D5DB;

    font-size: 13px;

}


/* ================= FOOTER ================= */

.gallery-footer {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 25px 6%;

    color: #6B7280;

    font-size: 12px;

    border-top:

        1px solid
        rgba(255,255,255,0.06);

}


.gallery-footer span {

    color: #F97316;

}


/* ================= MOBILE ================= */

@media (max-width: 800px) {

    .gallery-heading {

        flex-direction: column;

        align-items: flex-start;

    }

    .modern-gallery-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 260px;

    }

    .modern-gallery-item.large {

        grid-column: span 1;

    }

    .gallery-footer {

        flex-direction: column;

    }

}/* =====================================================
   MEMBER GALLERY
===================================================== */

.member-gallery-page {

    min-height: 100vh;

    padding: 40px;

    background:

        radial-gradient(
            circle at 80% 0%,
            rgba(249,115,22,0.10),
            transparent 30%
        ),

        #0B1120;

}


/* HEADER */

.member-gallery-header {

    max-width: 1400px;

    margin: auto;

    padding: 45px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    border-radius: 24px;

    background:

        rgba(255,255,255,0.035);

    border:

        1px solid
        rgba(255,255,255,0.08);

    box-shadow:

        0 25px 60px
        rgba(0,0,0,0.25);

}


.gallery-badge {

    display: inline-block;

    margin-bottom: 15px;

    padding: 7px 12px;

    color: #FB923C;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

    border-radius: 8px;

    background:

        rgba(249,115,22,0.10);

    border:

        1px solid
        rgba(249,115,22,0.25);

}


.member-gallery-header h1 {

    margin: 0;

    color: white;

    font-size: 48px;

}


.member-gallery-header p {

    max-width: 550px;

    color: #9CA3AF;

    line-height: 1.7;

}


.gallery-dashboard-btn {

    padding: 13px 18px;

    color: white;

    text-decoration: none;

    border-radius: 10px;

    background:

        rgba(249,115,22,0.12);

    border:

        1px solid
        rgba(249,115,22,0.3);

    transition: 0.3s ease;

}


.gallery-dashboard-btn:hover {

    transform: translateY(-5px);

    background: #F97316;

}


/* MAIN */

.member-gallery-container {

    max-width: 1400px;

    margin: auto;

    padding: 70px 0;

}


.member-gallery-title {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 35px;

}


.member-gallery-title span {

    color: #FB923C;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 3px;

}


.member-gallery-title h2 {

    margin-top: 10px;

    color: white;

    font-size: 38px;

}


.member-gallery-title p {

    max-width: 400px;

    color: #9CA3AF;

    line-height: 1.7;

}


/* GRID */

.member-gallery-grid {

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    gap: 20px;

}


.member-gallery-card {

    position: relative;

    min-height: 300px;

    overflow: hidden;

    border-radius: 18px;

    background: #111827;

    border:

        1px solid
        rgba(255,255,255,0.07);

    transition:

        transform 0.4s ease,

        border-color 0.4s ease,

        box-shadow 0.4s ease;

}


.member-gallery-card:hover {

    transform:

        translateY(-8px);

    border-color:

        rgba(249,115,22,0.4);

    box-shadow:

        0 20px 45px
        rgba(0,0,0,0.35);

}


.member-gallery-card img {

    width: 100%;

    height: 100%;

    min-height: 300px;

    object-fit: cover;

    transition:

        transform 0.6s ease;

}


.member-gallery-card:hover img {

    transform: scale(1.08);

}


.member-gallery-info {

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    padding: 25px;

    background:

        linear-gradient(
            transparent,
            rgba(0,0,0,0.9)
        );

}


.member-gallery-info span {

    color: #FB923C;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;

}


.member-gallery-info h3 {

    margin-top: 8px;

    color: white;

    font-size: 20px;

}


/* MOBILE */

@media (max-width: 800px) {

    .member-gallery-page {

        padding: 20px;

    }

    .member-gallery-header {

        flex-direction: column;

        align-items: flex-start;

        padding: 30px;

    }

    .member-gallery-title {

        flex-direction: column;

        align-items: flex-start;

    }

    .member-gallery-grid {

        grid-template-columns: 1fr;

    }

}/* =====================================================
   MANAGE GALLERY PAGE
===================================================== */

.manage-gallery-page {

    min-height: 100vh;

    padding: 40px;

    background:

        radial-gradient(
            circle at 80% 0%,
            rgba(249,115,22,0.10),
            transparent 30%
        ),

        #0B1120;

}


/* HEADER */

.manage-gallery-header {

    max-width: 1200px;

    margin: auto;

    padding: 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    border-radius: 24px;

    background:

        rgba(255,255,255,0.035);

    border:

        1px solid
        rgba(255,255,255,0.08);

}


.admin-badge {

    display: inline-block;

    margin-bottom: 14px;

    padding: 7px 12px;

    color: #FB923C;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

    border-radius: 8px;

    background:

        rgba(249,115,22,0.10);

    border:

        1px solid
        rgba(249,115,22,0.25);

}


.manage-gallery-header h1 {

    margin: 0;

    color: white;

    font-size: 42px;

}


.manage-gallery-header p {

    color: #9CA3AF;

    line-height: 1.6;

}


.back-admin-btn {

    padding: 13px 18px;

    color: white;

    text-decoration: none;

    border-radius: 10px;

    background:

        rgba(249,115,22,0.12);

    border:

        1px solid
        rgba(249,115,22,0.3);

    transition: 0.3s ease;

}


.back-admin-btn:hover {

    transform: translateY(-5px);

    background: #F97316;

}


/* CONTAINER */

.manage-gallery-container {

    max-width: 1200px;

    margin: auto;

    padding: 50px 0;

}


/* UPLOAD CARD */

.upload-gallery-card {

    padding: 35px;

    border-radius: 22px;

    background:

        rgba(255,255,255,0.035);

    border:

        1px solid
        rgba(255,255,255,0.08);

}


.upload-card-header,
.managed-gallery-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

}


.section-label {

    color: #FB923C;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

}


.upload-card-header h2,
.managed-gallery-header h2 {

    margin-top: 8px;

    color: white;

}


.upload-status {

    color: #22C55E;

    font-size: 12px;

}


/* UPLOAD AREA */

.upload-area {

    padding: 35px;

    text-align: center;

    border-radius: 16px;

    border: 1px dashed rgba(249,115,22,0.35);

    background:

        rgba(249,115,22,0.04);

}


.upload-icon {

    font-size: 42px;

    margin-bottom: 12px;

}


.upload-area h3 {

    color: white;

}


.upload-area p {

    color: #9CA3AF;

}


.upload-area input {

    margin-top: 15px;

    color: #D1D5DB;

}


/* FORM */

.gallery-form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 25px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.form-group label {

    color: #D1D5DB;

    font-size: 13px;

    font-weight: bold;

}


.form-group input,
.form-group select {

    padding: 14px;

    color: white;

    outline: none;

    border: 1px solid #374151;

    border-radius: 10px;

    background: #111827;

}


.form-group input:focus,
.form-group select:focus {

    border-color: #F97316;

}


/* LOCATION */

.gallery-location {

    margin-top: 30px;

}


.gallery-location h3 {

    color: white;

}


.gallery-location p {

    color: #9CA3AF;

}


.location-options {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-top: 20px;

}


.location-option {

    display: flex;

    gap: 12px;

    padding: 18px;

    cursor: pointer;

    border-radius: 14px;

    background:

        rgba(255,255,255,0.035);

    border:

        1px solid
        rgba(255,255,255,0.08);

    transition: 0.3s ease;

}


.location-option:hover {

    transform: translateY(-5px);

    border-color: rgba(249,115,22,0.4);

}


.location-option input {

    accent-color: #F97316;

}


.location-option strong {

    display: block;

    color: white;

    margin-bottom: 6px;

}


.location-option span {

    display: block;

    color: #9CA3AF;

    font-size: 11px;

    line-height: 1.5;

}


/* BUTTON */

.add-photo-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: 100%;

    margin-top: 30px;

    padding: 16px;

    color: white;

    font-weight: bold;

    cursor: pointer;

    border: none;

    border-radius: 12px;

    background:

        linear-gradient(
            135deg,
            #F97316,
            #C2410C
        );

    transition: 0.3s ease;

}


.add-photo-btn:hover {

    transform: translateY(-4px);

    box-shadow:

        0 15px 35px
        rgba(249,115,22,0.25);

}


/* MANAGED PHOTOS */

.managed-gallery-section {

    margin-top: 50px;

}


.managed-gallery-header span:last-child {

    color: #9CA3AF;

    font-size: 13px;

}


.managed-gallery-grid {

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    gap: 20px;

}


.empty-gallery {

    grid-column: 1 / -1;

    padding: 60px;

    text-align: center;

    border-radius: 18px;

    border: 1px dashed rgba(255,255,255,0.12);

}


.empty-gallery div {

    font-size: 40px;

}


.empty-gallery h3 {

    color: white;

}


.empty-gallery p {

    color: #9CA3AF;

}


/* MOBILE */

@media (max-width: 800px) {

    .manage-gallery-page {

        padding: 20px;

    }

    .manage-gallery-header {

        flex-direction: column;

        align-items: flex-start;

    }

    .gallery-form-grid,
    .location-options,
    .managed-gallery-grid {

        grid-template-columns: 1fr;

    }

}/* ================= NEXT EVENT PAGE ================= */

.next-event-page {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(249, 115, 22, 0.13),
            transparent 30%
        ),
        #0B1120;

    color: white;

    padding: 50px;

}


/* HEADER */

.next-event-header {

    max-width: 1250px;

    margin: 0 auto 45px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

}


.event-badge {

    display: inline-block;

    color: #F97316;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 15px;

}


.next-event-header h1 {

    font-size: clamp(38px, 5vw, 64px);

    margin: 0;

    letter-spacing: -2px;

}


.next-event-header p {

    color: #9CA3AF;

    font-size: 17px;

    margin-top: 15px;

}


.back-dashboard-btn {

    padding: 14px 22px;

    border: 1px solid rgba(249, 115, 22, 0.4);

    border-radius: 12px;

    color: white;

    text-decoration: none;

    transition: .3s;

    white-space: nowrap;

}


.back-dashboard-btn:hover {

    background: #F97316;

    transform: translateY(-3px);

}


/* CONTAINER */

.next-event-container {

    max-width: 1250px;

    margin: auto;

}


/* FEATURED EVENT */

.featured-event {

    position: relative;

    overflow: hidden;

    min-height: 390px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 55px;

    border-radius: 28px;

    background:

        linear-gradient(

            135deg,

            rgba(249, 115, 22, .18),

            rgba(17, 24, 39, .9)

        );

    border: 1px solid rgba(249, 115, 22, .3);

    box-shadow:

        0 25px 70px rgba(0, 0, 0, .35),

        inset 0 1px 0 rgba(255, 255, 255, .06);

}


.featured-event::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -180px;

    top: -180px;

    border-radius: 50%;

    border: 1px solid rgba(249, 115, 22, .2);

    box-shadow:

        0 0 0 35px rgba(249, 115, 22, .04),

        0 0 0 70px rgba(249, 115, 22, .03);

}


.featured-event-content {

    position: relative;

    z-index: 2;

}


.event-status {

    color: #FB923C;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.featured-event h2 {

    font-size: clamp(34px, 5vw, 62px);

    max-width: 700px;

    margin: 18px 0 10px;

    line-height: 1;

}


.featured-description {

    color: #D1D5DB;

    font-size: 19px;

}


.event-details {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    margin: 35px 0;

}


.event-detail {

    display: flex;

    align-items: center;

    gap: 12px;

}


.event-detail > span {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background: rgba(249, 115, 22, .13);

    font-size: 19px;

}


.event-detail small {

    display: block;

    color: #9CA3AF;

    font-size: 10px;

    letter-spacing: 1px;

}


.event-detail strong {

    display: block;

    margin-top: 4px;

    font-size: 14px;

}


.event-action-btn {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 15px 22px;

    background: #F97316;

    color: white;

    text-decoration: none;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: .3s;

}


.event-action-btn:hover {

    background: #EA580C;

    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(249, 115, 22, .25);

}


.event-date-display {

    position: relative;

    z-index: 2;

    width: 210px;

    height: 210px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(17, 24, 39, .75);

    border: 1px solid rgba(249, 115, 22, .4);

    box-shadow:

        0 0 60px rgba(249, 115, 22, .15);

}


.event-date-display span {

    color: #FB923C;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 4px;

}


.event-date-display strong {

    font-size: 82px;

    line-height: .9;

}


.event-date-display small {

    color: #9CA3AF;

    margin-top: 8px;

}


/* EVENT LIST */

.event-list-section {

    margin-top: 65px;

}


.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 25px;

}


.section-heading > div > span {

    color: #F97316;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.section-heading h2 {

    margin-top: 8px;

    font-size: 30px;

}


.event-count {

    color: #9CA3AF;

    font-size: 12px;

}


.event-list {

    display: grid;

    gap: 15px;

}


.event-list-card {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 22px;

    border-radius: 18px;

    background: rgba(31, 41, 55, .65);

    border: 1px solid rgba(255, 255, 255, .06);

    transition: .3s;

}


.event-list-card:hover {

    transform: translateX(8px);

    border-color: rgba(249, 115, 22, .5);

    background: rgba(249, 115, 22, .08);

}


.event-list-date {

    width: 70px;

    min-width: 70px;

    height: 70px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #111827;

    border: 1px solid rgba(249, 115, 22, .25);

}


.event-list-date strong {

    color: #F97316;

    font-size: 25px;

}


.event-list-date span {

    color: #9CA3AF;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.event-list-info {

    flex: 1;

}


.event-list-info > span {

    color: #FB923C;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.event-list-info h3 {

    margin: 5px 0;

    font-size: 18px;

}


.event-list-info p {

    color: #9CA3AF;

    margin: 0;

}


.event-list-status {

    padding: 8px 12px;

    border-radius: 999px;

    color: #FB923C;

    background: rgba(249, 115, 22, .1);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* RESPONSIVE */

@media (max-width: 800px) {

    .next-event-page {

        padding: 25px;

    }


    .next-event-header {

        align-items: flex-start;

        flex-direction: column;

    }


    .featured-event {

        padding: 35px 25px;

        flex-direction: column;

        align-items: flex-start;

        gap: 40px;

    }


    .event-date-display {

        align-self: center;

    }


    .event-list-card {

        align-items: flex-start;

    }


    .event-list-status {

        display: none;

    }

}/* ================= EQUIPMENT PAGE ================= */

.equipment-page {

    min-height: 100vh;

    padding: 45px;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(249, 115, 22, .12),
            transparent 30%
        ),

        #0B1120;

    color: white;

}


.equipment-header {

    max-width: 1200px;

    margin: 0 auto 35px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

}


.equipment-label {

    color: #F97316;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.equipment-header h1 {

    margin: 10px 0 8px;

    font-size: 48px;

}


.equipment-header p {

    margin: 0;

    color: #9CA3AF;

}


.equipment-back-btn {

    padding: 13px 20px;

    color: white;

    text-decoration: none;

    border: 1px solid rgba(249, 115, 22, .4);

    border-radius: 10px;

    transition: .3s;

}


.equipment-back-btn:hover {

    background: #F97316;

    transform: translateY(-3px);

}


.equipment-container {

    max-width: 1200px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.equipment-item {

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 8px 20px 8px 10px;

    background:

        linear-gradient(

            90deg,

            #111827,

            #0D141E

        );

    border: 1px solid rgba(255, 255, 255, .05);

    border-radius: 9px;

    transition: .25s ease;

}


.equipment-item:hover {

    transform: translateX(6px);

    border-color: rgba(249, 115, 22, .5);

    box-shadow:

        0 8px 25px rgba(0, 0, 0, .25);

}


.equipment-image {

    width: 90px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 38px;

    flex-shrink: 0;

}


.equipment-info {

    width: 260px;

}


.equipment-info h3 {

    margin: 0 0 6px;

    font-size: 14px;

}


.equipment-info p {

    margin: 0;

    color: #9CA3AF;

    font-size: 11px;

}


.equipment-data {

    flex: 1;

    display: grid;

    grid-template-columns:

        1fr

        1fr

        1fr;

    gap: 25px;

}


.equipment-data span {

    display: block;

    margin-bottom: 5px;

    color: #6B7280;

    font-size: 8px;

    letter-spacing: 1px;

}


.equipment-data strong {

    font-size: 11px;

    color: #E5E7EB;

}


.equipment-data .ready {

    color: #86EFAC;

}


.equipment-data .in-use {

    color: #F97316;

}


@media (max-width: 800px) {

    .equipment-page {

        padding: 25px 15px;

    }


    .equipment-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

    }


    .equipment-header h1 {

        font-size: 38px;

    }


    .equipment-item {

        align-items: flex-start;

        flex-wrap: wrap;

        padding: 15px;

    }


    .equipment-info {

        width: auto;

        flex: 1;

    }


    .equipment-data {

        width: 100%;

        flex-basis: 100%;

        padding-left: 110px;

    }

}/* ================= PREMIUM EQUIPMENT ================= */

.equipment-page {

    min-height: 100vh;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(249, 115, 22, .08),
            transparent 25%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(249, 115, 22, .05),
            transparent 30%
        ),

        #080D16;

    color: white;

}


/* EQUIPMENT CARD */

.equipment-item {

    position: relative;

    min-height: 105px;

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 12px 25px 12px 12px;

    overflow: hidden;

    background:

        linear-gradient(
            110deg,
            rgba(22, 31, 44, .95),
            rgba(10, 15, 23, .98)
        );

    border: 1px solid rgba(255, 255, 255, .07);

    border-radius: 14px;

    transition: .35s ease;

}


.equipment-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 3px;

    height: 100%;

    background: #F97316;

    opacity: .6;

    transition: .35s ease;

}


.equipment-item:hover {

    transform: translateX(8px);

    border-color: rgba(249, 115, 22, .45);

    box-shadow:

        0 15px 45px rgba(0, 0, 0, .4),

        0 0 30px rgba(249, 115, 22, .08);

}


.equipment-item:hover::before {

    opacity: 1;

}


/* VISUAL */

.equipment-visual {

    position: relative;

    width: 130px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 10px;

    background:

        linear-gradient(
            135deg,
            #202B3A,
            #0C121B
        );

}


.equipment-visual::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 45%
        );

    pointer-events: none;

}


.equipment-visual img {

    position: relative;

    z-index: 2;

    max-width: 90%;

    max-height: 85%;

    object-fit: contain;

    filter:

        drop-shadow(
            0 10px 12px rgba(0,0,0,.7)
        );

    transition: .4s ease;

}


.equipment-item:hover
.equipment-visual img {

    transform: scale(1.08);

}


/* GLOW */

.equipment-glow {

    position: absolute;

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: rgba(249, 115, 22, .15);

    filter: blur(30px);

}


/* INFO */

.equipment-info {

    width: 260px;

}


.equipment-category {

    color: #F97316;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.equipment-info h3 {

    margin: 7px 0 5px;

    font-size: 16px;

    letter-spacing: -.3px;

}


.equipment-info p {

    margin: 0;

    color: #8D98A8;

    font-size: 11px;

}


/* DATA */

.equipment-data {

    flex: 1;

    display: grid;

    grid-template-columns:

        1fr

        1fr

        1fr;

    gap: 35px;

}


.equipment-data span {

    display: block;

    margin-bottom: 7px;

    color: #647083;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.equipment-data strong {

    color: #E7EBF0;

    font-size: 11px;

}


.equipment-status strong {

    display: flex;

    align-items: center;

    gap: 7px;

}


.equipment-status i {

    width: 6px;

    height: 6px;

    display: inline-block;

    border-radius: 50%;

    background: #4ADE80;

    box-shadow:

        0 0 10px #4ADE80;

}


.equipment-data .ready {

    color: #86EFAC;

}


.equipment-data .in-use {

    color: #FB923C;

}


.equipment-data .in-use i {

    background: #FB923C;

}


/* ARROW */

.equipment-arrow {

    width: 35px;

    height: 35px;

    display: grid;

    place-items: center;

    color: #6B7280;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;

    transition: .3s;

}


.equipment-item:hover
.equipment-arrow {

    color: white;

    background: #F97316;

    border-color: #F97316;

    transform: translateX(3px);

}/* ================= OFFICIAL PARTNERS ================= */

.partners-section{

    display:flex;

    justify-content:center;

    margin-top:-55px;

    margin-bottom:70px;

    position:relative;

    z-index:20;

}

.partners-card{

    background:#ffffff;

    padding:18px 40px;

    border-radius:22px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);

    transition:.35s;

}

.partners-card:hover{

    transform:translateY(-6px);

}

.partners-card img{

    display:block;

    width:720px;

    max-width:90vw;

    height:auto;

}/* ===== OFFICIAL PARTNERS ===== */

.partner-bar{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    padding:12px 25px;

    border-radius:18px;

    background:rgba(20,20,20,.55);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 10px 35px rgba(0,0,0,.45);

    z-index:10;

    text-align:center;

}

.partner-bar span{

    display:block;

    color:#f97316;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:10px;

}

.partner-bar img{

    width:430px;

    display:block;

}.partner-bar{

    position:absolute;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    background:#111827;

    border-radius:20px;

    padding:16px 28px;

    cursor:pointer;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

    transition:.3s;

    z-index:100;

}

.partner-bar:hover{

    transform:translateX(-50%) translateY(-5px);

}

.partner-bar span{

    display:block;

    text-align:center;

    color:#f97316;

    font-size:11px;

    letter-spacing:3px;

    margin-bottom:12px;

}

.partner-bar img{

    width:430px;

}

.partner-popup{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(10px);

    z-index:9999;

}

.partner-popup-content{

    width:820px;

    max-width:92%;

    margin:60px auto;

    background:#0f172a;

    border-radius:25px;

    padding:45px;

    text-align:center;

    position:relative;

}

.partner-popup-content img{

    width:100%;

    max-width:620px;

    margin:35px auto;

}

.popup-badge{

    background:#f97316;

    color:white;

    padding:8px 20px;

    border-radius:30px;

    font-size:12px;

    letter-spacing:2px;

}

.partner-info{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:30px;

    flex-wrap:wrap;

}

.partner-info div{

    background:#1e293b;

    padding:20px;

    border-radius:15px;

    min-width:180px;

}

.partner-info strong{

    display:block;

    color:#f97316;

    margin-bottom:8px;

}

.partner-info span{

    color:#d1d5db;

}

.popup-btn{

    margin-top:35px;

    background:#f97316;

    color:white;

    border:none;

    padding:14px 35px;

    border-radius:10px;

    cursor:pointer;

}

.close-popup{

    position:absolute;

    right:20px;

    top:20px;

    font-size:32px;

    cursor:pointer;

    color:white;

}/* =====================================================
   PREMIUM POPUP
===================================================== */

.partner-popup{

    display:none;

    position:fixed;

    inset:0;

    background:
        radial-gradient(circle at top,
        rgba(249,115,22,.18),
        rgba(0,0,0,.88));

    backdrop-filter:blur(14px);

    z-index:99999;

    animation:popupFade .35s ease;

}

.partner-popup-content{

    position:relative;

    width:860px;

    max-width:92%;

    margin:55px auto;

    padding:45px;

    border-radius:28px;

    overflow:hidden;

    background:
        linear-gradient(
        145deg,
        #081221,
        #111827,
        #172554);

    border:1px solid
        rgba(249,115,22,.25);

    box-shadow:
        0 30px 90px rgba(0,0,0,.65),
        0 0 50px rgba(249,115,22,.12);

    animation:popupScale .35s ease;

}

/* Glow */

.partner-popup-content::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-100px;

    width:280px;

    height:280px;

    border-radius:50%;

    background:
        rgba(249,115,22,.08);

    filter:blur(40px);

}

.partner-popup-content::after{

    content:"";

    position:absolute;

    bottom:-120px;

    left:-80px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
        rgba(59,130,246,.10);

    filter:blur(40px);

}

/* Badge */

.popup-badge{

    display:inline-block;

    padding:9px 22px;

    border-radius:40px;

    background:
        linear-gradient(
        90deg,
        #f97316,
        #fb923c);

    color:white;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    box-shadow:
        0 10px 30px rgba(249,115,22,.35);

}

/* Title */

.partner-popup-content h2{

    font-size:36px;

    margin:20px 0;

    color:white;

}

.partner-popup-content h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:14px auto;

    border-radius:20px;

    background:
        linear-gradient(
        90deg,
        #f97316,
        #facc15);

}

/* Logo */

.partner-popup-content img{

    width:100%;

    max-width:620px;

    margin:35px auto;

    display:block;

    transition:.35s;

    filter:
        drop-shadow(
        0 0 25px
        rgba(249,115,22,.28));

}

.partner-popup-content img:hover{

    transform:scale(1.04);

}

/* Partner Cards */

.partner-info{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

    margin-top:20px;

}

.partner-info div{

    background:
        rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    border:

        1px solid
        rgba(255,255,255,.06);

    padding:22px;

    border-radius:18px;

    width:190px;

    transition:.3s;

}

.partner-info div:hover{

    transform:translateY(-8px);

    border-color:#f97316;

    box-shadow:

        0 15px 35px
        rgba(249,115,22,.15);

}

.partner-info strong{

    display:block;

    color:#f97316;

    font-size:14px;

    margin-bottom:10px;

}

.partner-info span{

    color:#d1d5db;

    font-size:14px;

    line-height:1.6;

}

/* Button */

.popup-btn{

    margin-top:35px;

    padding:14px 38px;

    border:none;

    border-radius:12px;

    background:

        linear-gradient(
        90deg,
        #f97316,
        #fb923c);

    color:white;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:

        0 15px 35px
        rgba(249,115,22,.35);

}

.popup-btn:hover{

    transform:translateY(-4px);

}

/* Close */

.close-popup{

    position:absolute;

    top:18px;

    right:20px;

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#1e293b;

    color:white;

    font-size:26px;

    cursor:pointer;

    transition:.3s;

}

.close-popup:hover{

    background:#f97316;

    transform:rotate(90deg);

}

/* Animation */

@keyframes popupFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes popupScale{

    from{

        opacity:0;

        transform:
            translateY(30px)
            scale(.94);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}.partner-bar{
    background: rgba(255,255,255,.96) !important;

    border:1px solid rgba(0,0,0,.08);

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);
}.partner-bar span{
    color:#f97316 !important;
}/* ===== PREMIUM WHITE PARTNER BAR ===== */

.partner-bar{

    background:rgba(255,255,255,.97) !important;

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.75);

    box-shadow:
        0 18px 45px rgba(0,0,0,.15),
        0 0 30px rgba(249,115,22,.12);

    overflow:hidden;

}.partner-bar::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    transform:skewX(-25deg);

    transition:1s;

}.partner-bar:hover::before{

    left:170%;

}.partner-bar:hover{

    transform:
        translateX(-50%)
        translateY(-5px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.18),
        0 0 35px rgba(249,115,22,.22);

}.partner-bar img{

    filter:
        brightness(1.02)
        contrast(1.05);

}/* ================= MANAGE MEMBER FORM ================= */

.member-form-section{

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:25px;

    margin-bottom:25px;

}

.member-form-section h2{

    color:#fff;

    margin-bottom:20px;

}

#memberForm{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:15px;

}

#memberForm input,
#memberForm select{

    height:45px;

    border-radius:10px;

    border:none;

    padding:0 14px;

    background:#1f2937;

    color:white;

}

#memberPhoto{

    padding:10px;

}

#memberForm button{

    height:45px;

    border:none;

    border-radius:10px;

    background:#F97316;

    color:white;

    cursor:pointer;

    font-weight:bold;

}

#memberForm button:hover{

    opacity:.9;

}/* ================= MEMBER PHOTO ================= */

.member-table-photo{

    width:45px;

    height:45px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #F97316;

}.photo-preview{

    margin-top:15px;

}

.photo-preview img{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:50%;

    border:3px solid #F97316;

}/* ================= PROFILE AVATAR ================= */

.profile-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid #ff9d2d;

    background:#1c2333;

    display:flex;

    align-items:center;

    justify-content:center;

}

.profile-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ================= LARGE PROFILE ================= */

.large-avatar{

    width:130px;

    height:130px;

    border-radius:50%;

    overflow:hidden;

    border:5px solid #ff9d2d;

    margin:auto;

    background:#1c2333;

}

.large-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}.profile-avatar{

    width:60px;
    height:60px;
    border-radius:50%;
    overflow:hidden;

}

.profile-avatar img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.large-avatar{

    width:130px;
    height:130px;
    border-radius:50%;
    overflow:hidden;

}

.large-avatar img{

    width:100%;
    height:100%;
    object-fit:cover;

}.dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

}

.dashboard-card{

    background:#1F2937;

    border-radius:18px;

    padding:25px;

}

.large-avatar{

    width:120px;

    height:120px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

}

.large-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.member-profile{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:12px;

}.dashboard-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:25px;
}

.dashboard-left,
.dashboard-right{
display:flex;
flex-direction:column;
gap:25px;
}

.large-avatar{
width:120px;
height:120px;
border-radius:50%;
overflow:hidden;
margin:auto;
}

.large-avatar img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}/* ================= MOBILE ================= */

@media screen and (max-width:768px){

}.dashboard{

    grid-template-columns:1fr;

}

.sidebar{

    width:100%;

    position:relative;

}

.dashboard-main{

    margin:0;

    padding:20px;

}.dashboard-stats{

    grid-template-columns:repeat(2,1fr);

}.dashboard-grid{

    grid-template-columns:1fr;

}.dashboard-header{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.profile-mini-card{

    width:100%;

}.equipment-item{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.equipment-data{

    width:100%;

    justify-content:space-between;

}.gallery-grid{

    grid-template-columns:1fr;

}.table-container{

    overflow-x:auto;

}/* =====================================================
   ADMIN DASHBOARD FIX
   ===================================================== */

.dashboard {
    display: flex;
    min-height: 100vh;
    width: 100%;
}


/* ================= SIDEBAR ================= */

.dashboard .sidebar {
    width: 240px;
    min-width: 240px;
    height: 100vh;

    position: sticky;
    top: 0;

    display: flex;
    flex-direction: column;

    padding: 24px 16px;

    box-sizing: border-box;

    overflow-y: auto;
}


/* LOGO */

.dashboard .dashboard-logo {
    margin-bottom: 30px;
}


/* NAVIGATION */

.dashboard .dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}


/* NAV LINKS */

.dashboard .dashboard-nav a {
    display: flex;
    align-items: center;

    width: 100%;
    box-sizing: border-box;

    padding: 12px 14px;

    border-radius: 8px;

    text-decoration: none;
}


/* LOGOUT */

.dashboard .sidebar .logout {
    display: flex;
    align-items: center;

    width: 100%;
    box-sizing: border-box;

    margin-top: auto;

    padding: 12px 14px;
}


/* ================= MAIN ================= */

.dashboard .dashboard-main {
    flex: 1;

    min-width: 0;

    padding: 30px;

    box-sizing: border-box;

    overflow-x: hidden;
}


/* ================= HEADER ================= */

.dashboard .dashboard-header {
    width: 100%;
    box-sizing: border-box;
}


/* ================= STATISTICS ================= */

.dashboard .stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    width: 100%;

    margin-bottom: 24px;
}


.dashboard .stat-card {
    min-width: 0;

    box-sizing: border-box;
}


/* ================= WELCOME ================= */

.dashboard .welcome-panel {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 24px;
}


/* ================= QUICK ACTIONS ================= */

.dashboard .quick-actions-section {
    width: 100%;

    box-sizing: border-box;
}


.dashboard .action-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    width: 100%;
}


.dashboard .action-button {
    min-width: 0;

    box-sizing: border-box;
}


/* ================= TABLET ================= */

@media (max-width: 1000px) {

    .dashboard .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard .action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ================= MOBILE ================= */

@media (max-width: 700px) {

    .dashboard {
        flex-direction: column;
    }

    .dashboard .sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;

        position: relative;

        padding: 16px;
    }

    .dashboard .dashboard-nav {
        flex-direction: row;

        flex-wrap: wrap;
    }

    .dashboard .dashboard-nav a {
        width: auto;
    }

    .dashboard .sidebar .logout {
        margin-top: 15px;
        width: auto;
    }

    .dashboard .dashboard-main {
        width: 100%;

        padding: 20px 15px;
    }

    .dashboard .stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard .action-grid {
        grid-template-columns: 1fr;
    }

}/* ================= PUBLIC GALLERY FIX ================= */

.gallery-page-container,
.gallery-grid,
.gallery-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Gallery items menjadi grid */
.gallery-page-container,
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Foto */
.gallery-page-item img,
.gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* Card gallery */
.gallery-page-item,
.gallery-item {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {

    .gallery-page-container,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .gallery-page-container,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-page-item img,
    .gallery-item img {
        height: 200px;
    }

}#galleryPageContainer {
    width: min(1200px, 92%);
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#galleryPageContainer .gallery-page-item {
    width: 100%;
}

#galleryPageContainer .gallery-page-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

@media (max-width: 900px) {
    #galleryPageContainer {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    #galleryPageContainer {
        grid-template-columns: 1fr;
    }
}/* =========================================================
   ADMIN DASHBOARD - PREMIUM CLEAN OVERRIDE
   ========================================================= */

.dashboard-main {
    padding: 30px;
}

/* ================= HEADER ================= */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 30px;
    margin-bottom: 25px;

    background:
        radial-gradient(circle at 80% 20%, rgba(249,115,22,.12), transparent 35%),
        linear-gradient(135deg, #151f30, #111827);

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;

    box-shadow: 0 15px 40px rgba(0,0,0,.20);
}

.dashboard-label {
    display: block;
    margin-bottom: 7px;

    color: #F97316;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.dashboard-header h1 {
    margin: 0 0 8px;

    color: #F9FAFB;
    font-size: 30px;
    font-weight: 800;
}

.dashboard-header p {
    margin: 0;
    max-width: 650px;

    color: #9CA3AF;
    font-size: 14px;
}

/* SYSTEM ONLINE */

.dashboard-status {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 15px;

    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.18);
    border-radius: 30px;

    color: #86EFAC;
    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}

.dashboard-status .status-dot {
    width: 8px;
    height: 8px;

    background: #22C55E;
    border-radius: 50%;

    box-shadow: 0 0 10px rgba(34,197,94,.7);
}


/* ================= STATISTICS ================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;

    margin-bottom: 25px;
}

.stat-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 18px;

    min-height: 125px;
    padding: 22px;

    background: linear-gradient(
        145deg,
        #1B2637,
        #151E2D
    );

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 16px;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.stat-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: #F97316;
}

.stat-card:hover {
    transform: translateY(-4px);

    border-color: rgba(249,115,22,.35);

    box-shadow:
        0 15px 35px rgba(0,0,0,.25),
        0 0 25px rgba(249,115,22,.06);
}

.stat-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(249,115,22,.10);

    border: 1px solid rgba(249,115,22,.20);
    border-radius: 14px;

    font-size: 24px;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-content h3 {
    margin: 0 0 4px;

    color: #F3F4F6;
    font-size: 14px;
}

.stat-content strong {
    color: #F97316;
    font-size: 30px;
    line-height: 1;
}

.stat-content span {
    margin-top: 5px;

    color: #6B7280;
    font-size: 11px;
}


/* ================= WELCOME ================= */

.welcome-panel {
    position: relative;

    padding: 25px 28px;
    margin-bottom: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(249,115,22,.08),
            rgba(17,24,39,.8)
        );

    border: 1px solid rgba(249,115,22,.12);
    border-radius: 16px;

    overflow: hidden;
}

.welcome-panel::after {
    content: "";

    position: absolute;
    width: 180px;
    height: 180px;

    right: -70px;
    top: -80px;

    background: rgba(249,115,22,.08);

    border-radius: 50%;

    filter: blur(20px);
}

.welcome-panel h2 {
    position: relative;
    z-index: 1;

    margin: 0 0 7px;

    color: #F9FAFB;
    font-size: 20px;
}

.welcome-panel p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #9CA3AF;
    font-size: 13px;
}


/* ================= QUICK ACTIONS ================= */

.quick-actions-section {
    margin-top: 10px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 18px;
}

.section-heading > div > span {
    color: #F97316;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.section-heading h2 {
    margin: 5px 0 0;

    color: #F9FAFB;
    font-size: 23px;
}

.section-heading p {
    margin: 0;

    color: #6B7280;
    font-size: 12px;
}


/* ACTION GRID */

.action-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.action-button {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 145px;
    padding: 22px;

    background: #172131;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 15px;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.action-button::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: #F97316;

    opacity: .7;
}

.action-button:hover {
    transform: translateY(-4px);

    background: #1C293B;

    border-color: rgba(249,115,22,.30);
}

.action-button > span {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    background: rgba(249,115,22,.10);

    border: 1px solid rgba(249,115,22,.18);
    border-radius: 12px;

    font-size: 20px;
}

.action-button strong {
    color: #F3F4F6;
    font-size: 14px;
}

.action-button small {
    margin-top: 6px;

    color: #6B7280;
    font-size: 11px;
}


/* ================= SIDEBAR ================= */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #0E1726,
            #0A1220
        );

    border-right: 1px solid rgba(255,255,255,.05);
}

.dashboard-logo {
    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255,255,255,.06);
}

.dashboard-logo h2 {
    color: #F9FAFB;
    letter-spacing: 2px;
}

.dashboard-logo span {
    color: #6B7280;
    font-size: 9px;
    letter-spacing: 1px;
}


/* NAV */

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-top: 25px;
}

.dashboard-nav a {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 12px 14px;

    color: #9CA3AF;

    border: 1px solid transparent;
    border-radius: 10px;

    text-decoration: none;

    transition: .25s ease;
}

.dashboard-nav a:hover {
    color: #F9FAFB;

    background: rgba(249,115,22,.07);

    border-color: rgba(249,115,22,.12);
}

.dashboard-nav a.active {
    color: white;

    background:
        linear-gradient(
            90deg,
            rgba(249,115,22,.18),
            rgba(249,115,22,.04)
        );

    border-color: rgba(249,115,22,.20);

    box-shadow:
        inset 3px 0 #F97316;
}


/* LOGOUT */

.logout {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 20px;
}

.logout:hover {
    color: #F97316;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .action-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 700px) {

    .dashboard-main {
        padding: 18px;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .action-grid {
        grid-template-columns: 1fr;
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

}.action-grid {
        grid-template-columns: 1fr;
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

/* ===== ADMIN QUICK ACTIONS - CLEAN FIX ===== */

.quick-actions-section {
    width: 100%;
    margin-top: 30px;
}

.quick-actions-section .section-heading {
    margin-bottom: 18px;
}

.quick-actions-section .section-heading h2 {
    margin: 4px 0 0;
    font-size: 26px;
}

.quick-actions-section .section-heading > p {
    margin: 0;
    color: #9CA3AF;
    font-size: 12px;
}


/* GRID */

.quick-actions-section .action-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}


/* CARD */

.quick-actions-section .action-button {
    width: 100%;
    min-width: 0;
    min-height: 150px;

    box-sizing: border-box;

    padding: 20px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    background: #172033;

    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid #F97316;

    border-radius: 14px;

    text-decoration: none;

    overflow: hidden;
}


/* ICON */

.quick-actions-section .action-button > span {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 14px;

    border-radius: 10px;

    background: rgba(249,115,22,0.12);

    font-size: 20px;
}


/* TITLE */

.quick-actions-section .action-button strong {
    display: block;

    width: 100%;

    margin-bottom: 6px;

    font-size: 14px;
    line-height: 1.3;

    color: #ffffff;

    white-space: normal;
}


/* DESCRIPTION */

.quick-actions-section .action-button small {
    display: block;

    width: 100%;

    color: #9CA3AF;

    font-size: 11px;
    line-height: 1.4;

    white-space: normal;
}


/* HOVER */

.quick-actions-section .action-button:hover {
    transform: translateY(-3px);

    border-color: rgba(249,115,22,0.5);

    background: #1D293D;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 1100px) {

    .quick-actions-section .action-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .quick-actions-section .action-grid {
        grid-template-columns: 1fr;
    }

}/* ================= TEAM HERO LANDSCAPE ================= */

.team-hero {
    position: relative;
    width: 100%;
    height: 390px;

    margin-top: 30px;

    overflow: hidden;
    border-radius: 22px;

    background: #111827;

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 60px rgba(0,0,0,.30);

    grid-column: 1 / -1;
}


/* PHOTO */

.team-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 45%;

    display: block;
}


/* DARK GRADIENT */

.team-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,10,18,.92) 0%,
            rgba(5,10,18,.72) 38%,
            rgba(5,10,18,.25) 72%,
            rgba(5,10,18,.12) 100%
        );
}


/* CONTENT */

.team-hero-content {
    position: relative;

    z-index: 2;

    height: 100%;

    max-width: 700px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;
}


/* LABEL */

.team-hero-label {
    color: #F97316;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 15px;
}


/* TITLE */

.team-hero-content h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: 42px;

    line-height: 1.08;

    letter-spacing: -1px;

    font-weight: 800;
}


.team-hero-content h2 strong {
    color: #F97316;
}


/* DESCRIPTION */

.team-hero-content p {
    max-width: 560px;

    margin: 22px 0 0;

    color: #CBD5E1;

    font-size: 14px;

    line-height: 1.7;
}


/* ORANGE LINE */

.team-hero-line {
    width: 65px;

    height: 3px;

    margin-top: 25px;

    background: #F97316;

    border-radius: 20px;
}


/* FOOTER */

.team-hero-caption {
    margin-top: 13px;

    color: #94A3B8;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}


/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .team-hero {
        height: 420px;
    }

    .team-hero-content {
        padding: 30px;
    }

    .team-hero-content h2 {
        font-size: 30px;
    }

    .team-hero-content p {
        font-size: 12px;
    }

}/* =====================================================
   MANAGE EVENTS - PREMIUM ADMIN
===================================================== */

.event-page {
    background: #080b10;
    color: #f5f5f5;
}


/* MAIN CONTENT */

.event-page .main-content {
    margin-left: 250px;
    min-height: 100vh;
    padding: 40px 45px;
    box-sizing: border-box;
}


/* HEADER */

.event-page .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 35px;
}

.event-page .dashboard-header h1 {
    margin: 8px 0;

    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
}

.event-page .dashboard-header p {
    margin: 0;
    color: #9ca3af;
}


/* LABEL */

.event-page .event-label {
    color: #f97316;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* CREATE EVENT CARD */

.event-page .event-form-section {
    background: linear-gradient(
        145deg,
        #11161d,
        #0d1117
    );

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 18px;

    padding: 30px;

    margin-bottom: 35px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


.event-page .event-form-section h2 {
    margin-top: 0;
    margin-bottom: 25px;

    font-size: 22px;
}


/* FORM */

.event-page #eventForm {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.event-page #eventForm input,
.event-page #eventForm textarea,
.event-page #eventForm select {

    width: 100%;

    padding: 14px 16px;

    box-sizing: border-box;

    background: #080b10;

    border: 1px solid #252b33;

    border-radius: 10px;

    color: white;

    outline: none;

    transition: .25s;
}


.event-page #eventForm input:focus,
.event-page #eventForm textarea:focus,
.event-page #eventForm select:focus {

    border-color: #f97316;

    box-shadow:
        0 0 0 3px rgba(249,115,22,.10);
}


/* DESCRIPTION */

.event-page #eventForm textarea {

    grid-column: 1 / -1;

    min-height: 110px;

    resize: vertical;
}


/* BUTTON */

.event-page #eventForm button {

    grid-column: 1 / -1;

    padding: 15px;

    border: none;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #f97316,
        #ea580c
    );

    color: white;

    font-weight: 700;

    letter-spacing: .5px;

    cursor: pointer;

    transition: .25s;
}


.event-page #eventForm button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(249,115,22,.25);
}


/* UPCOMING EVENTS */

.event-page .event-table-section {

    background: #0d1117;

    border: 1px solid rgba(255,255,255,.06);

    border-radius: 18px;

    padding: 30px;

    overflow: hidden;
}


.event-page .event-table-section h2 {

    margin-top: 0;

    margin-bottom: 25px;

    font-size: 22px;
}


/* TABLE */

.event-page table {

    width: 100%;

    border-collapse: collapse;
}


.event-page th {

    text-align: left;

    padding: 15px;

    color: #9ca3af;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

    border-bottom: 1px solid #252b33;
}


.event-page td {

    padding: 17px 15px;

    border-bottom: 1px solid #1b2027;

    color: #e5e7eb;
}


.event-page tbody tr {

    transition: .2s;
}


.event-page tbody tr:hover {

    background: rgba(249,115,22,.04);
}


/* DELETE BUTTON */

.event-page td button {

    border: 1px solid #7f1d1d;

    background: rgba(127,29,29,.15);

    color: #fca5a5;

    padding: 8px 12px;

    border-radius: 7px;

    cursor: pointer;

    transition: .2s;
}


.event-page td button:hover {

    background: #7f1d1d;

    color: white;
}


/* MOBILE */

@media (max-width: 800px) {

    .event-page .main-content {

        margin-left: 0;

        padding: 25px 18px;
    }


    .event-page #eventForm {

        grid-template-columns: 1fr;
    }


    .event-page #eventForm textarea,
    .event-page #eventForm button {

        grid-column: auto;
    }

}/* =====================================================
   MANAGE EQUIPMENT — PREMIUM ADMIN
===================================================== */

.equipment-admin-page {
    background: #080b10;
    color: #f5f5f5;
}


/* MAIN */

.equipment-admin-page .main-content {
    margin-left: 250px;
    min-height: 100vh;

    padding: 40px 45px;

    box-sizing: border-box;
}


/* HEADER */

.equipment-admin-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 30px;
}


.equipment-admin-label {

    color: #f97316;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.equipment-admin-header h1 {

    margin: 8px 0;

    font-size: 36px;

    letter-spacing: -1px;
}


.equipment-admin-header p {

    margin: 0;

    color: #9ca3af;
}


/* ONLINE */

.equipment-online {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border-radius: 30px;

    background: rgba(22,163,74,.08);

    border: 1px solid rgba(22,163,74,.2);

    color: #86efac;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


.equipment-online span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow: 0 0 10px #22c55e;
}


/* =====================================================
   STATISTICS
===================================================== */

.equipment-admin-stats {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 30px;
}


.equipment-stat-card {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #11161d,
            #0c1016
        );

    border: 1px solid rgba(255,255,255,.06);

    border-radius: 15px;

    transition: .25s;
}


.equipment-stat-card:hover {

    transform: translateY(-3px);

    border-color:
        rgba(249,115,22,.3);
}


.equipment-stat-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        rgba(249,115,22,.10);

    font-size: 21px;
}


.equipment-stat-card span {

    display: block;

    color: #6b7280;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 5px;
}


.equipment-stat-card strong {

    font-size: 26px;

    color: white;
}


/* =====================================================
   FORM CARD
===================================================== */

.equipment-admin-page #equipmentForm {

    background:
        linear-gradient(
            145deg,
            #11161d,
            #0d1117
        );

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 18px;

    padding: 28px;

    margin-bottom: 30px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


.equipment-admin-page #equipmentForm input,
.equipment-admin-page #equipmentForm select {

    background: #080b10;

    color: white;

    border: 1px solid #252b33;

    border-radius: 9px;

    padding: 13px 15px;

    outline: none;

    transition: .25s;
}


.equipment-admin-page #equipmentForm input:focus,
.equipment-admin-page #equipmentForm select:focus {

    border-color: #f97316;

    box-shadow:
        0 0 0 3px rgba(249,115,22,.08);
}


.equipment-admin-page #equipmentForm button {

    background:
        linear-gradient(
            135deg,
            #f97316,
            #ea580c
        );

    color: white;

    border: none;

    border-radius: 9px;

    padding: 13px 20px;

    font-weight: 700;

    cursor: pointer;

    transition: .25s;
}


.equipment-admin-page #equipmentForm button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(249,115,22,.25);
}


/* =====================================================
   EQUIPMENT TABLE
===================================================== */

.equipment-admin-page .equipment-table-section {

    background: #0d1117;

    border: 1px solid rgba(255,255,255,.06);

    border-radius: 18px;

    padding: 28px;

    overflow: hidden;
}


.equipment-admin-page .equipment-table-section h2 {

    margin-top: 0;

    font-size: 21px;
}


.equipment-admin-page table {

    width: 100%;

    border-collapse: collapse;
}


.equipment-admin-page th {

    padding: 14px;

    text-align: left;

    color: #6b7280;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    border-bottom:
        1px solid #252b33;
}


.equipment-admin-page td {

    padding: 15px 14px;

    border-bottom:
        1px solid #1b2027;

    color: #e5e7eb;
}


.equipment-admin-page tbody tr {

    transition: .2s;
}


.equipment-admin-page tbody tr:hover {

    background:
        rgba(249,115,22,.035);
}


/* STATUS */

.equipment-admin-page td:nth-child(4) {

    font-weight: 600;
}


/* DELETE */

.equipment-admin-page td button {

    background:
        rgba(127,29,29,.15);

    border: 1px solid #7f1d1d;

    color: #fca5a5;

    padding: 7px 12px;

    border-radius: 7px;

    cursor: pointer;

    transition: .2s;
}


.equipment-admin-page td button:hover {

    background: #7f1d1d;

    color: white;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {

    .equipment-admin-page .main-content {

        margin-left: 0;

        padding: 25px 18px;
    }


    .equipment-admin-stats {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .equipment-admin-stats {

        grid-template-columns: 1fr;
    }


    .equipment-admin-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }

}/* =====================================================
   SHAUTUNA - MANAGE MEETINGS PREMIUM
===================================================== */

body:has(.event-form-section) {
    background: #070a0f;
}

/* MAIN AREA */
body:has(.event-form-section) .main-content {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(249,115,22,.06),
            transparent 35%
        );

    padding: 42px 45px;
}

/* HEADER */
body:has(.event-form-section) .dashboard-header {
    padding: 0 0 28px;
    margin-bottom: 30px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

body:has(.event-form-section) .dashboard-header h1 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

body:has(.event-form-section) .dashboard-header p {
    color: #8d96a3;
    font-size: 14px;
}

/* =====================================================
   CREATE MEETING
===================================================== */

body:has(.event-form-section) .event-form-section {

    position: relative;

    background:
        linear-gradient(
            145deg,
            #141920,
            #0d1117
        );

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 20px;

    padding: 30px;

    margin-bottom: 30px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.30);

    overflow: hidden;
}

/* orange glow */
body:has(.event-form-section) .event-form-section::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -80px;

    background: rgba(249,115,22,.08);

    filter: blur(40px);

    border-radius: 50%;

    pointer-events: none;
}

body:has(.event-form-section) .event-form-section h2 {

    position: relative;

    margin: 0 0 25px;

    font-size: 22px;

    color: #fff;
}

body:has(.event-form-section) .event-form-section h2::before {

    content: "CREW SCHEDULING";

    display: block;

    color: #f97316;

    font-size: 10px;

    letter-spacing: 2px;

    margin-bottom: 7px;
}

/* =====================================================
   FORM
===================================================== */

body:has(.event-form-section) #meetingForm {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 16px;
}

body:has(.event-form-section) #meetingForm input,
body:has(.event-form-section) #meetingForm textarea {

    width: 100%;

    box-sizing: border-box;

    background: #080b10;

    border: 1px solid #252c35;

    color: #fff;

    border-radius: 10px;

    padding: 14px 15px;

    font-family: inherit;

    outline: none;

    transition: .25s;
}

body:has(.event-form-section) #meetingForm input::placeholder,
body:has(.event-form-section) #meetingForm textarea::placeholder {

    color: #59616c;
}

body:has(.event-form-section) #meetingForm input:focus,
body:has(.event-form-section) #meetingForm textarea:focus {

    border-color: #f97316;

    box-shadow:
        0 0 0 3px rgba(249,115,22,.09);
}

body:has(.event-form-section) #meetingForm textarea {

    grid-column: 1 / -1;

    min-height: 110px;

    resize: vertical;
}

body:has(.event-form-section) #meetingForm button {

    grid-column: 1 / -1;

    padding: 14px 20px;

    border: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #f97316,
            #ea580c
        );

    color: #fff;

    font-weight: 700;

    cursor: pointer;

    transition: .25s;
}

body:has(.event-form-section) #meetingForm button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(249,115,22,.25);
}

/* =====================================================
   ALL MEETINGS
===================================================== */

body:has(.event-table-section) .event-table-section {

    background:
        linear-gradient(
            145deg,
            #11161d,
            #0c1016
        );

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 20px;

    padding: 28px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.22);

    overflow-x: auto;
}

body:has(.event-table-section) .event-table-section h2 {

    margin: 0 0 22px;

    font-size: 21px;
}

/* TABLE */

body:has(.event-table-section) table {

    width: 100%;

    border-collapse: collapse;

    min-width: 650px;
}

body:has(.event-table-section) thead {

    background: rgba(255,255,255,.025);
}

body:has(.event-table-section) th {

    padding: 14px 15px;

    text-align: left;

    color: #6f7884;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    border-bottom:
        1px solid #252b33;
}

body:has(.event-table-section) td {

    padding: 17px 15px;

    color: #e5e7eb;

    border-bottom:
        1px solid #1b2027;
}

body:has(.event-table-section) tbody tr {

    transition: .2s;
}

body:has(.event-table-section) tbody tr:hover {

    background:
        rgba(249,115,22,.035);
}

/* DELETE */

body:has(.event-table-section) td button {

    padding: 8px 13px;

    border-radius: 8px;

    background:
        rgba(239,68,68,.08);

    border:
        1px solid rgba(239,68,68,.30);

    color: #fca5a5;

    cursor: pointer;

    transition: .2s;
}

body:has(.event-table-section) td button:hover {

    background: #7f1d1d;

    color: white;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    body:has(.event-form-section) .main-content {

        margin-left: 0;

        padding: 25px 18px;
    }

    body:has(.event-form-section) #meetingForm {

        grid-template-columns: 1fr;
    }

    body:has(.event-form-section) #meetingForm textarea,
    body:has(.event-form-section) #meetingForm button {

        grid-column: auto;
    }
}/* =====================================================
   MOBILE NAVIGATION
===================================================== */

.mobile-menu-btn {
    display: none;
}

.mobile-menu {
    display: none;
}


/* =====================================================
   MOBILE ONLY
===================================================== */

@media (max-width: 900px) {

    /* NAVBAR */

    .navbar {
        height: 72px;
        padding: 0 18px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 3000;
    }


    /* LOGO */

    .navbar .logo span {
        font-size: 17px;
    }

    .navbar .logo small {
        font-size: 6px;
        letter-spacing: 1.5px;
    }


    /* HIDE DESKTOP NAVIGATION */

    .navbar .nav-links,
    .navbar .nav-button {
        display: none;
    }


    /* HAMBURGER */

    .mobile-menu-btn {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        padding: 0;

        background: transparent;

        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;

        color: #ffffff;

        font-size: 24px;
        line-height: 1;

        cursor: pointer;
    }


    /* MOBILE DROPDOWN */

    .mobile-menu {
        position: fixed;

        top: 82px;
        left: 12px;
        right: 12px;

        display: flex;

        flex-direction: column;

        padding: 12px;

        background: rgba(7,11,16,0.97);

        backdrop-filter: blur(20px);

        border: 1px solid rgba(255,255,255,0.08);

        border-radius: 14px;

        box-shadow:
            0 20px 50px rgba(0,0,0,0.45);

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;

        z-index: 2999;
    }


    /* OPEN MENU */

    .mobile-menu.active {
        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }


    /* LINKS */

    .mobile-menu a {
        display: block;

        width: 100%;

        box-sizing: border-box;

        padding: 13px 14px;

        color: #d1d5db;

        text-decoration: none;

        font-size: 14px;

        border-radius: 8px;

        transition: .2s ease;
    }


    .mobile-menu a:hover {
        color: #ffffff;

        background:
            rgba(249,115,22,0.12);
    }


    /* DIVIDER */

    .mobile-menu-divider {
        height: 1px;

        margin: 8px 10px;

        background:
            rgba(255,255,255,0.08);
    }


    /* REGISTER */

    .mobile-menu .mobile-register {
        margin-top: 4px;

        text-align: center;

        color: #ffffff;

        background: #F97316;
    }


    .mobile-menu .mobile-register:hover {
        background: #EA580C;
    }

}/* =====================================================
   MOBILE HAMBURGER — FINAL FIX
===================================================== */

@media (max-width: 900px) {

    .navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: 1px solid rgba(255,255,255,.15) !important;
        border-radius: 8px !important;

        color: #ffffff !important;
        font-size: 24px !important;
        line-height: 1 !important;

        cursor: pointer;
        flex-shrink: 0;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 4000 !important;
    }

}/* =====================================================
   MOBILE NAVIGATION — FINAL
===================================================== */

.mobile-menu-btn {
    display: none;
}

.mobile-menu {
    display: none;
}

@media (max-width: 900px) {

    /* NAVBAR */
    .navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* DESKTOP NAVIGATION HIDDEN */
    .navbar .nav-links,
    .navbar .nav-button {
        display: none !important;
    }

    /* HAMBURGER */
    .mobile-menu-btn {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;

        margin-left: auto !important;
        padding: 0 !important;

        background: transparent !important;

        border: 1px solid rgba(255,255,255,.15) !important;
        border-radius: 8px !important;

        color: #fff !important;
        font-size: 24px !important;
        line-height: 1 !important;

        cursor: pointer;

        flex-shrink: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        position: relative !important;
        z-index: 9999 !important;
    }

    /* MOBILE MENU */
    .mobile-menu {
        display: flex !important;
        flex-direction: column;

        position: fixed;

        top: 82px;
        left: 12px;
        right: 12px;

        padding: 12px;

        background: rgba(7,11,16,.97);

        backdrop-filter: blur(20px);

        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;

        box-shadow: 0 20px 50px rgba(0,0,0,.45);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;

        z-index: 9998;
    }

    /* OPEN */
    .mobile-menu.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* LINKS */
    .mobile-menu a {
        display: block;
        width: 100%;
        box-sizing: border-box;

        padding: 13px 14px;

        color: #d1d5db;
        text-decoration: none;

        font-size: 14px;
        border-radius: 8px;

        transition: .2s ease;
    }

    .mobile-menu a:hover {
        color: #fff;
        background: rgba(249,115,22,.12);
    }

    /* DIVIDER */
    .mobile-menu-divider {
        height: 1px;
        margin: 8px 10px;
        background: rgba(255,255,255,.08);
    }

    /* REGISTER */
    .mobile-menu .mobile-register {
        margin-top: 4px;

        text-align: center;

        color: #fff;
        background: #F97316;
    }

    .mobile-menu .mobile-register:hover {
        background: #EA580C;
    }
}/* =====================================================
   MOBILE HERO — REFINEMENT
===================================================== */

@media (max-width: 600px) {

    .hero {
        min-height: auto !important;
        padding: 120px 20px 70px !important;
        box-sizing: border-box;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }

    .hero h1 {
        font-size: clamp(36px, 10vw, 52px) !important;
        line-height: 1.05 !important;
        margin-bottom: 18px !important;
        word-break: normal;
    }

    .hero p {
        font-size: 14px !important;
        line-height: 1.7 !important;
        max-width: 100%;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin-top: 28px;
    }

    .hero-buttons a,
    .hero-buttons button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

}/* =====================================================
   MOBILE HERO — FINAL
===================================================== */

@media (max-width: 600px) {

    .hero {
        min-height: auto !important;
        height: auto !important;

        display: flex !important;
        flex-direction: column !important;

        padding: 115px 20px 60px !important;

        box-sizing: border-box;
        gap: 35px;
    }

    /* PARTNER BAR */

.partner-bar {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 13px 16px;
    gap: 12px;

    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;

    backdrop-filter: blur(10px);
}

.partner-bar span {
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.8px;

    color: #f3f4f6;

    white-space: nowrap;
}

.partner-bar img {
    width: 115px;
    max-width: 115px;
    height: auto;

    opacity: 1;
}

    /* LEFT */

    .hero-left {
        width: 100% !important;
        max-width: 100% !important;

        text-align: left;

        box-sizing: border-box;
    }

    .hero-left h1 {
        font-size: clamp(34px, 9vw, 48px) !important;
        line-height: 1.08 !important;

        margin: 0 0 18px !important;
    }

    .hero-left p {
        font-size: 14px !important;
        line-height: 1.7 !important;

        margin: 0;

        max-width: 100%;
    }

    /* BUTTONS */

    .hero-button {
        display: flex !important;
        flex-direction: column !important;

        width: 100%;

        gap: 12px;

        margin-top: 28px;
    }

    .hero-button a {
        width: 100%;
        box-sizing: border-box;

        text-align: center;
    }

    /* IMAGE */

    .hero-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-right img {
        width: 100% !important;
        height: auto !important;

        display: block;

        border-radius: 16px;
    }

}/* =====================================================
   MOBILE FOOTER — FINAL
===================================================== */

@media (max-width: 600px) {

    footer {
        padding: 50px 20px 0 !important;
        box-sizing: border-box;
    }

    /* FOOTER MAIN */

    .footer-container,
    .footer-content {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 35px;

        box-sizing: border-box;
    }

    /* FOOTER BRAND */

    .footer-brand {
        width: 100% !important;
        text-align: left;
    }

    .footer-brand h2 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .footer-brand p {
        font-size: 13px;
        line-height: 1.7;

        max-width: 100%;
    }

    /* QUICK LINKS */

    .footer-links {
        width: 100% !important;
    }

    .footer-links h3,
    .footer-contact h3 {
        font-size: 13px;

        letter-spacing: 1.5px;
        text-transform: uppercase;

        margin-bottom: 14px;
    }

    .footer-links a {
        display: block;

        padding: 6px 0;

        font-size: 13px;

        color: #9ca3af;

        text-decoration: none;
    }

    .footer-links a:hover {
        color: #ffffff;
    }

    /* CONTACT */

    .footer-contact {
        width: 100% !important;
    }

    .footer-contact p {
        margin: 10px 0;

        font-size: 13px;

        line-height: 1.6;

        color: #9ca3af;
    }

    .footer-contact a {
        color: #d1d5db;

        text-decoration: none;

        word-break: break-word;
    }

    .footer-contact a:hover {
        color: #ffffff;
    }

    /* COPYRIGHT */

    .footer-bottom {
        margin-top: 35px;

        padding: 18px 0;

        text-align: center;

        border-top: 1px solid rgba(255,255,255,.08);
    }

    .footer-bottom p {
        margin: 0;

        font-size: 11px;

        line-height: 1.6;

        color: #6b7280;
    }

}/* =====================================================
   MOBILE GLOBAL ALIGNMENT
===================================================== */

@media (max-width: 600px) {

    body {
        overflow-x: hidden;
    }

    .hero,
    section,
    footer {
        box-sizing: border-box;
    }

    .hero,
    .section,
    footer {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

}/* =====================================================
   MOBILE — PREVENT HORIZONTAL OVERFLOW
===================================================== */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    * {
        box-sizing: border-box;
    }

    img,
    video,
    iframe {
        max-width: 100%;
    }
}/* =====================================================
   OUR PHILOSOPHY — MOBILE
===================================================== */

@media (max-width: 600px) {

    .testimonials {
        width: 100% !important;
        max-width: 100% !important;

        padding: 60px 18px !important;

        box-sizing: border-box;
        overflow: hidden;
    }

    /* SECTION TITLE */

    .testimonials .section-title {
        width: 100% !important;
        max-width: 100% !important;

        text-align: center;

        box-sizing: border-box;
    }

    .testimonials .section-title h4 {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .testimonials .section-title h2 {
        font-size: 28px !important;
        line-height: 1.15 !important;

        margin: 10px 0 14px !important;
    }

    .testimonials .section-title p {
        font-size: 13px !important;
        line-height: 1.7 !important;

        max-width: 100% !important;
    }

    /* QUOTES */

    .quote-container {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 18px;

        box-sizing: border-box;
    }

    /* CARD */

    .quote-card {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box;

        padding: 24px 20px !important;

        overflow: hidden;
    }

    .quote-card p {
        font-size: 14px !important;
        line-height: 1.7 !important;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .quote-card h3 {
        font-size: 14px !important;
        line-height: 1.4 !important;

        overflow-wrap: break-word;
    }

    .quote-card span {
        display: block;

        font-size: 11px !important;
        line-height: 1.5 !important;

        overflow-wrap: break-word;
    }

}/* =====================================================
   ABOUT — MOBILE RESPONSIVE
===================================================== */

@media (max-width: 600px) {

    .about-section {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 30px !important;

        padding: 55px 18px !important;

        box-sizing: border-box;
        overflow: hidden;
    }

    /* IMAGE */

    .about-image {
        width: 100% !important;
        max-width: 100% !important;

        order: 1;

        box-sizing: border-box;
    }

    .about-image img {
        display: block;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        object-fit: cover;

        border-radius: 16px;
    }

    /* CONTENT */

    .about-content {
        width: 100% !important;
        max-width: 100% !important;

        order: 2;

        box-sizing: border-box;
    }

    .about-content h4 {
        font-size: 10px !important;

        letter-spacing: 2px;

        margin-bottom: 10px;
    }

    .about-content h2 {
        font-size: 28px !important;
        line-height: 1.15 !important;

        margin: 0 0 16px !important;
    }

    .about-content p {
        font-size: 13px !important;
        line-height: 1.75 !important;

        margin: 0;

        max-width: 100% !important;
    }

    /* STATS */

    .about-stats {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        margin-top: 25px;

        box-sizing: border-box;
    }

    .about-stats .card {
        width: 100% !important;
        min-width: 0 !important;

        padding: 18px 12px !important;

        box-sizing: border-box;

        text-align: center;
    }

    .about-stats .card h3 {
        font-size: 24px !important;

        margin-bottom: 5px;
    }

    .about-stats .card span {
        font-size: 10px !important;

        line-height: 1.4;

        display: block;
    }

}/* =====================================================
   PARTNER POPUP — PREMIUM WHITE
===================================================== */

.partner-popup-content {
    background: #ffffff !important;
    color: #111827 !important;

    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 24px !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.25),
        0 8px 30px rgba(0,0,0,.08) !important;

    padding: 36px !important;
}

/* CLOSE */

.close-popup {
    color: #64748b !important;
    background: rgba(15,23,42,.05);
    border-radius: 50%;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .2s ease;
}

.close-popup:hover {
    color: #111827 !important;
    background: rgba(15,23,42,.10);
}

/* BADGE */

.popup-badge {
    color: #64748b !important;

    font-size: 10px !important;
    font-weight: 700;

    letter-spacing: 2px;
}

/* TITLE */

.partner-popup-content h2 {
    color: #111827 !important;

    font-size: 30px !important;
    line-height: 1.15;

    margin: 10px 0 24px !important;
}

/* LOGO */

.partner-popup-content > img {
    display: block;

    width: 100%;
    max-width: 360px;

    height: auto;

    margin: 0 auto 28px;

    object-fit: contain;
}

/* INFORMATION */

.partner-info {
    border-top: 1px solid #e5e7eb;
}

.partner-info > div {
    padding: 15px 0;

    border-bottom: 1px solid #e5e7eb;
}

.partner-info strong {
    display: block;

    margin-bottom: 5px;

    color: #64748b !important;

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.partner-info span,
.partner-info a {
    color: #111827 !important;

    font-size: 14px;
    line-height: 1.5;

    text-decoration: none;
}

/* AFKAARUNA LINK */

.partner-info a {
    display: inline-block;

    transition:
        color .2s ease,
        transform .2s ease;
}

.partner-info a:hover {
    color: #F97316 !important;
    transform: translateX(2px);
}

/* CLOSE BUTTON */

.popup-btn {
    margin-top: 26px;

    width: 100%;

    padding: 12px 18px;

    border: 0;
    border-radius: 10px;

    background: #111827 !important;
    color: #ffffff !important;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: .2s ease;
}

.popup-btn:hover {
    background: #F97316 !important;
}@media (max-width: 600px) {

    .partner-popup-content {
        width: calc(100% - 36px) !important;
        max-width: 420px !important;

        max-height: 85vh;
        overflow-y: auto;

        padding: 28px 22px !important;

        box-sizing: border-box;
        border-radius: 20px !important;
    }

    .partner-popup-content h2 {
        font-size: 25px !important;
    }

    .partner-popup-content > img {
        max-width: 280px;
        margin-bottom: 22px;
    }

    .partner-info > div {
        padding: 13px 0;
    }

}/* =====================================================
   OFFICIAL PARTNERS — MOBILE PREMIUM FINAL
   MATCH DESKTOP VERSION
===================================================== */

@media (max-width: 600px) {

    .hero > .partner-bar {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box;

        margin: 0 !important;
        padding: 10px 18px !important;

        gap: 18px !important;

        /* WHITE PREMIUM CARD */
        background: #ffffff !important;

        border: 1px solid rgba(255,255,255,.95) !important;
        border-radius: 12px !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,.14),
            0 2px 8px rgba(0,0,0,.08) !important;

        opacity: 1 !important;
        visibility: visible !important;

        position: relative !important;
        z-index: 20 !important;

        cursor: pointer;

        transition:
            transform .2s ease,
            box-shadow .2s ease;
    }


    /* ================================================
       OFFICIAL PARTNERS TEXT
    ================================================ */

    .hero > .partner-bar span {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        color: #111827 !important;

        font-size: 10px !important;
        font-weight: 700 !important;

        letter-spacing: 1.6px !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* ================================================
       PARTNER LOGO
       dibuat lebih besar & jelas seperti desktop
    ================================================ */

    .hero > .partner-bar img {
        display: block !important;

        width: 145px !important;
        max-width: 145px !important;

        height: auto !important;

        min-height: 28px !important;

        object-fit: contain !important;

        opacity: 1 !important;
        visibility: visible !important;

        filter: none !important;

        flex-shrink: 0 !important;
    }


    /* ================================================
       TOUCH EFFECT
    ================================================ */

    .hero > .partner-bar:hover {
        box-shadow:
            0 12px 35px rgba(0,0,0,.16),
            0 3px 10px rgba(0,0,0,.08) !important;
    }

    .hero > .partner-bar:active {
        transform: scale(.98);
    }

}/* =====================================================
   SHAUTUNA MATERIAL — SIGNAL FLOW
   ===================================================== */

.material-signal-flow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 25px;

    flex-wrap: wrap;
}

.material-signal-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 160px;

    min-height: 125px;

    padding: 18px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 16px;

    background:
        rgba(255,255,255,0.035);

    text-align: center;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.material-signal-box:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--material-accent);

    background:
        rgba(255,255,255,0.055);
}

.material-signal-icon {

    margin-bottom: 10px;

    font-size: 25px;
}

.material-signal-box strong {

    margin-bottom: 5px;

    font-size: 14px;
}

.material-signal-box small {

    color:
        rgba(255,255,255,0.42);

    font-size: 11px;

    line-height: 1.4;
}

.material-signal-arrow {

    color:
        var(--material-accent);

    font-size: 22px;

    font-weight: 800;
}

@media (max-width: 600px) {

    .material-signal-flow {

        flex-direction: column;

        gap: 10px;
    }

    .material-signal-arrow {

        transform:
            rotate(90deg);
    }

    .material-signal-box {

        width: 100%;

        max-width: 280px;
    }

}/* =====================================================
   SHAUTUNA MATERIAL — CHANNEL STRIP
   ===================================================== */

.material-channel-strip {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 25px;
}


.material-channel-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 18px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 15px;

    background:
        rgba(255,255,255,0.025);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.material-channel-item:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,0.15);

    background:
        rgba(255,255,255,0.045);
}


.material-channel-icon {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.07);

    font-size: 20px;
}


.material-channel-item strong {

    display: block;

    margin-bottom: 5px;

    font-size: 14px;
}


.material-channel-item p {

    margin: 0;

    color:
        rgba(255,255,255,0.45);

    font-size: 12px;

    line-height: 1.6;
}


@media (max-width: 600px) {

    .material-channel-strip {

        grid-template-columns: 1fr;

    }

}/* =====================================================
   SHAUTUNA MATERIAL — GAIN CONTROL
   ===================================================== */

.material-gain-visual {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

    margin-top: 25px;
}


.material-gain-stage {

    padding: 20px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 16px;

    background:
        rgba(255,255,255,0.025);

    text-align: center;
}


.material-gain-label {

    display: block;

    margin-bottom: 15px;

    color:
        rgba(255,255,255,0.45);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.material-meter {

    position: relative;

    width: 100%;

    height: 12px;

    margin-bottom: 15px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.08);
}


.material-meter-bar {

    width: 72%;

    height: 100%;

    border-radius: inherit;

    background:
        var(--material-accent);

    box-shadow:
        0 0 12px
        var(--material-accent);
}


.material-meter-danger .material-meter-bar {

    width: 100%;
}


.material-gain-stage strong {

    display: block;

    margin-bottom: 5px;

    font-size: 14px;
}


.material-gain-stage small {

    display: block;

    color:
        rgba(255,255,255,0.42);

    font-size: 11px;

    line-height: 1.5;
}


.material-gain-tip {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 15px;

    padding: 16px 18px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.025);
}


.material-gain-tip > span {

    font-size: 20px;
}


.material-gain-tip p {

    margin: 0;

    color:
        rgba(255,255,255,0.55);

    font-size: 12px;

    line-height: 1.6;
}


@media (max-width: 600px) {

    .material-gain-visual {

        grid-template-columns: 1fr;

    }

}/* =====================================================
   INTRODUCTION TO SOUND SYSTEM
   SIGNAL PATH EXPLORER
   ===================================================== */

.material-interactive-section {
    overflow: hidden;
}

.material-signal-explorer {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.signal-explorer-node {
    appearance: none;
    min-height: 125px;
    padding: 18px 14px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

    color: #ffffff;
    cursor: pointer;
    text-align: center;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.signal-explorer-node:hover {
    transform: translateY(-4px);

    border-color:
        color-mix(
            in srgb,
            var(--material-accent) 45%,
            rgba(255,255,255,0.1)
        );
}

.signal-explorer-node.active {
    transform: translateY(-4px);

    border-color:
        var(--material-accent);

    background:
        color-mix(
            in srgb,
            var(--material-accent) 10%,
            rgba(255,255,255,0.025)
        );

    box-shadow:
        0 15px 35px
        color-mix(
            in srgb,
            var(--material-accent) 12%,
            transparent
        );
}

.signal-explorer-icon {
    display: block;
    margin-bottom: 10px;
    font-size: 28px;
}

.signal-explorer-node strong {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

.signal-explorer-node small {
    display: block;

    color:
        rgba(255,255,255,0.38);

    font-size: 10px;
    line-height: 1.5;
}

.signal-explorer-arrow {
    color: var(--material-accent);
    font-size: 22px;
    opacity: 0.75;
}

.signal-explorer-detail {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 20px;
    padding: 18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--material-accent) 18%,
            rgba(255,255,255,0.08)
        );

    border-radius: 15px;

    background:
        color-mix(
            in srgb,
            var(--material-accent) 6%,
            rgba(255,255,255,0.02)
        );

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.signal-explorer-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--material-accent) 12%,
            rgba(255,255,255,0.04)
        );

    font-size: 23px;
}

.signal-explorer-detail strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.signal-explorer-detail p {
    margin: 0;

    color:
        rgba(255,255,255,0.48);

    font-size: 12px;
    line-height: 1.7;
}


/* ================= MOBILE ================= */

@media (max-width: 800px) {

    .material-signal-explorer {
        grid-template-columns: 1fr;
    }

    .signal-explorer-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .signal-explorer-node {
        min-height: 100px;
    }

}/* =====================================================
   MICROPHONE BASICS
   POLAR PATTERN EXPLORER
   ===================================================== */

.material-mic-explorer-section {
    overflow: hidden;
}


/* ================= SELECTOR ================= */

.mic-pattern-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 24px;
}

.mic-pattern-btn {
    padding: 10px 14px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.035);

    color:
        rgba(255,255,255,0.55);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        0.25s ease;
}

.mic-pattern-btn:hover {

    color: #ffffff;

    border-color:
        color-mix(
            in srgb,
            var(--material-accent) 35%,
            rgba(255,255,255,0.1)
        );

}

.mic-pattern-btn.active {

    color: #ffffff;

    border-color:
        var(--material-accent);

    background:
        color-mix(
            in srgb,
            var(--material-accent) 10%,
            rgba(255,255,255,0.025)
        );

}


/* ================= VISUAL ================= */

.mic-pattern-visual {

    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        minmax(240px, 1fr);

    gap: 28px;

    align-items: center;

    margin-top: 25px;
}


/* ================= STAGE ================= */

.mic-pattern-stage {

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 330px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 20px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.035),
            transparent 65%
        );
}


/* ================= CIRCLE ================= */

.mic-pattern-circle {

    position: relative;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--material-accent) 30%,
            rgba(255,255,255,0.08)
        );

    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--material-accent) 12%,
                transparent
            ),
            transparent 68%
        );

    transition:
        0.45s ease;
}


/* ================= MIC ================= */

.mic-pattern-mic {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.07);

    border:
        1px solid
        rgba(255,255,255,0.12);

    font-size: 25px;

    z-index: 3;
}


/* ================= DIRECTION ================= */

.mic-pattern-front,
.mic-pattern-back {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    color:
        rgba(255,255,255,0.32);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.mic-pattern-front {
    top: 18px;
}

.mic-pattern-back {
    bottom: 18px;
}


/* ================= INFO ================= */

.mic-pattern-info {

    padding: 5px 0;
}

.mic-pattern-badge {

    display: inline-flex;

    padding: 6px 10px;

    border-radius: 999px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--material-accent) 25%,
            rgba(255,255,255,0.08)
        );

    background:
        color-mix(
            in srgb,
            var(--material-accent) 8%,
            transparent
        );

    color:
        var(--material-accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}

.mic-pattern-info h3 {

    margin:
        14px 0 8px;

    font-size: 22px;

    font-weight: 800;
}

.mic-pattern-info > p {

    margin: 0;

    color:
        rgba(255,255,255,0.5);

    font-size: 13px;

    line-height: 1.8;
}


/* ================= TIP ================= */

.mic-pattern-tip {

    display: flex;

    gap: 11px;

    margin-top: 20px;

    padding: 15px;

    border-left:
        3px solid
        var(--material-accent);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.025);
}

.mic-pattern-tip span {

    font-size: 18px;
}

.mic-pattern-tip p {

    margin: 0;

    color:
        rgba(255,255,255,0.46);

    font-size: 12px;

    line-height: 1.7;
}


/* ================= PATTERN VISUAL STATES ================= */

/* Cardioid */

.mic-pattern-circle.pattern-cardioid {

    clip-path:
        polygon(
            50% 0%,
            67% 7%,
            82% 18%,
            92% 34%,
            96% 52%,
            92% 68%,
            81% 82%,
            64% 92%,
            50% 96%,
            36% 92%,
            19% 82%,
            8% 68%,
            4% 52%,
            8% 34%,
            18% 18%,
            33% 7%
        );
}


/* Supercardioid */

.mic-pattern-circle.pattern-supercardioid {

    clip-path:
        polygon(
            50% 0%,
            68% 8%,
            83% 22%,
            91% 39%,
            94% 55%,
            89% 69%,
            77% 81%,
            63% 87%,
            50% 91%,
            37% 87%,
            23% 81%,
            11% 69%,
            6% 55%,
            9% 39%,
            17% 22%,
            32% 8%
        );
}


/* Omni */

.mic-pattern-circle.pattern-omni {

    clip-path:
        circle(47% at 50% 50%);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 800px) {

    .mic-pattern-visual {

        grid-template-columns: 1fr;

    }

    .mic-pattern-stage {

        min-height: 280px;

    }

    .mic-pattern-circle {

        width: 210px;
        height: 210px;

    }

}

@media (max-width: 500px) {

    .mic-pattern-selector {

        flex-direction: column;

    }

    .mic-pattern-btn {

        width: 100%;

    }

}/* =====================================================
   UNDERSTANDING MIXER
   INTERACTIVE MIXER
   ===================================================== */

.interactive-mixer {
    display: grid;

    grid-template-columns:
        180px
        1fr;

    gap: 28px;

    align-items: center;

    margin-top: 25px;
}


/* ================= CHANNEL ================= */

.mixer-channel {
    position: relative;

    min-height: 360px;

    padding: 20px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

    text-align: center;
}

.mixer-channel-label {

    margin-bottom: 14px;

    color:
        var(--material-accent);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* ================= METER ================= */

.mixer-meter {

    position: relative;

    width: 13px;

    height: 100px;

    margin: 0 auto 20px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.07);
}

.mixer-meter-fill {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 55%;

    border-radius: inherit;

    background:
        var(--material-accent);

    transition:
        height 0.15s ease;
}


/* ================= FADER ================= */

.mixer-fader-area {

    display: flex;

    justify-content: center;

    height: 180px;
}

.mixer-fader-track {

    position: relative;

    width: 8px;

    height: 180px;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.08);
}

.mixer-fader-fill {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 55%;

    border-radius: inherit;

    background:
        var(--material-accent);

    pointer-events: none;

    transition:
        height 0.1s linear;
}


/* Native range */

.mixer-fader {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 180px;

    height: 35px;

    transform:
        translate(-50%, -50%)
        rotate(-90deg);

    opacity: 0;

    cursor: grab;
}

.mixer-fader:active {
    cursor: grabbing;
}


/* ================= VALUE ================= */

.mixer-fader-value {

    margin-top: 15px;

    color:
        var(--material-accent);

    font-size: 14px;

    font-weight: 800;
}


/* ================= OUTPUT ================= */

.mixer-output {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 230px;

    padding: 30px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--material-accent) 20%,
            rgba(255,255,255,0.08)
        );

    border-radius: 20px;

    background:
        color-mix(
            in srgb,
            var(--material-accent) 6%,
            rgba(255,255,255,0.02)
        );

    text-align: center;

    transition:
        0.25s ease;
}

.mixer-output-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 18px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--material-accent) 12%,
            rgba(255,255,255,0.04)
        );

    font-size: 32px;

    transition:
        transform 0.2s ease;
}

.mixer-output strong {

    margin-bottom: 7px;

    font-size: 17px;
}

.mixer-output span {

    color:
        rgba(255,255,255,0.42);

    font-size: 12px;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 650px) {

    .interactive-mixer {

        grid-template-columns: 1fr;

    }

    .mixer-channel {

        min-height: 330px;

    }

}/* =====================================================
   BASIC GAIN
   INTERACTIVE GAIN STAGING
   ===================================================== */

.basic-gain-interactive {
    overflow: hidden;
}

.gain-stage-console {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 30px;
    align-items: center;
    margin-top: 28px;
}


/* ================= METER ================= */

.gain-meter-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 330px;
    padding: 22px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );
}

.gain-meter-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 250px;

    color:
        rgba(255,255,255,0.32);

    font-size: 9px;
    font-weight: 700;
}

.gain-meter-track {
    position: relative;

    width: 18px;
    height: 250px;

    overflow: hidden;

    border-radius: 999px;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.08)
        );
}

.gain-meter-fill {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 52%;

    border-radius: inherit;

    background:
        var(--material-accent);

    transition:
        height 0.12s ease;
}

.gain-meter-mark {
    position: absolute;

    left: -5px;

    width: 28px;
    height: 1px;

    background:
        rgba(255,255,255,0.28);

    pointer-events: none;
}

.mark-safe {
    bottom: 55%;
}

.mark-hot {
    bottom: 78%;
}

.mark-clip {
    bottom: 94%;
}

.gain-meter-label {
    min-width: 55px;

    color:
        var(--material-accent);

    font-size: 13px;
    font-weight: 800;
}


/* ================= CONTROL ================= */

.gain-control-panel {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.gain-knob {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 145px;
    height: 145px;

    margin-bottom: 24px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.12);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,0.09),
            rgba(255,255,255,0.025) 55%,
            rgba(0,0,0,0.4)
        );

    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.45),
        0 15px 35px rgba(0,0,0,0.25);
}

.gain-knob span {
    color:
        rgba(255,255,255,0.52);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.gain-knob-pointer {
    position: absolute;

    left: 50%;
    top: 10px;

    width: 3px;
    height: 30px;

    transform-origin:
        50% 62px;

    transform:
        translateX(-50%)
        rotate(-55deg);

    border-radius: 999px;

    background:
        var(--material-accent);

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--material-accent) 50%,
            transparent
        );
}


/* ================= SLIDER ================= */

#basicGainSlider {
    width: min(360px, 100%);

    accent-color:
        var(--material-accent);

    cursor: pointer;
}


/* ================= STATUS ================= */

.gain-control-status {
    width: 100%;
    max-width: 430px;

    margin-top: 25px;
}

.gain-status-badge {
    display: inline-flex;

    padding: 6px 10px;

    border-radius: 999px;

    border:
        1px solid
        rgba(255,255,255,0.1);

    color:
        var(--material-accent);

    background:
        rgba(255,255,255,0.035);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.gain-control-status h3 {
    margin:
        13px 0 7px;

    font-size: 20px;
}

.gain-control-status p {
    margin: 0;

    color:
        rgba(255,255,255,0.46);

    font-size: 12px;

    line-height: 1.7;
}


/* ================= TIP ================= */

.gain-engineer-tip {
    margin-top: 22px;
    padding: 15px 17px;

    border-left:
        3px solid
        var(--material-accent);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.025);

    color:
        rgba(255,255,255,0.5);

    font-size: 12px;

    line-height: 1.7;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 650px) {

    .gain-stage-console {
        grid-template-columns: 1fr;
    }

    .gain-meter-panel {
        min-height: 290px;
    }

}
/* =====================================================
   BASIC EQ
   INTERACTIVE FREQUENCY EXPLORER
   ===================================================== */

#basicEqInteractive {
    overflow: hidden;
}


/* ================= SELECTOR ================= */

.eq-range-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.eq-range-btn {
    padding: 10px 15px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.035);

    color:
        rgba(255,255,255,0.52);

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.eq-range-btn:hover {
    transform: translateY(-2px);
    color: #ffffff;
}

.eq-range-btn.active {
    color: #ffffff;

    border-color:
        var(--material-accent);

    background:
        color-mix(
            in srgb,
            var(--material-accent) 10%,
            rgba(255,255,255,0.025)
        );
}


/* ================= MAIN ================= */

.eq-explorer {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.3fr)
        minmax(220px, 1fr);

    gap: 28px;

    align-items: center;

    margin-top: 25px;
}


/* ================= GRAPH ================= */

.eq-graph {
    position: relative;

    height: 280px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.012)
        );
}


/* Grid */

.eq-grid-lines {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.055) 1px,
            transparent 1px
        );

    background-size:
        20% 25%;

    opacity: 0.5;
}


/* Zero line */

.eq-graph::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background:
        rgba(255,255,255,0.14);
}


/* Curve */

.eq-curve {
    position: absolute;

    left: 4%;
    right: 4%;

    top: 50%;

    height: 100px;

    transform:
        translateY(-50%);

    border-top:
        3px solid
        var(--material-accent);

    border-radius: 50%;

    transition:
        all 0.45s ease;

    filter:
        drop-shadow(
            0 0 8px
            color-mix(
                in srgb,
                var(--material-accent) 40%,
                transparent
            )
        );
}


/* Low curve */

#basicEqInteractive[data-eq-range="low"]
.eq-curve {

    top: 61%;

    transform:
        translateY(-50%)
        rotate(-1deg);

}


/* Mid curve */

#basicEqInteractive[data-eq-range="mid"]
.eq-curve {

    top: 41%;

    transform:
        translateY(-50%)
        rotate(1deg);

}


/* High curve */

#basicEqInteractive[data-eq-range="high"]
.eq-curve {

    top: 30%;

    transform:
        translateY(-50%)
        rotate(1deg);

}


/* Frequency labels */

.eq-frequency {
    position: absolute;

    bottom: 12px;

    color:
        rgba(255,255,255,0.3);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.low-label {
    left: 8%;
}

.mid-label {
    left: 47%;
}

.high-label {
    right: 8%;
}


/* ================= INFO ================= */

.eq-info {
    padding: 5px 0;
}

.eq-range-badge {

    display: inline-flex;

    padding: 6px 10px;

    border-radius: 999px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--material-accent) 25%,
            rgba(255,255,255,0.08)
        );

    background:
        color-mix(
            in srgb,
            var(--material-accent) 8%,
            transparent
        );

    color:
        var(--material-accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}

.eq-info h3 {
    margin:
        14px 0 7px;

    font-size: 22px;
}

.eq-range-value {
    margin-bottom: 12px;

    color:
        var(--material-accent);

    font-size: 12px;

    font-weight: 700;
}

.eq-info > p {
    margin: 0;

    color:
        rgba(255,255,255,0.48);

    font-size: 13px;

    line-height: 1.8;
}


/* ================= EXAMPLE ================= */

.eq-example {

    display: flex;

    gap: 10px;

    margin-top: 20px;

    padding: 14px;

    border-left:
        3px solid
        var(--material-accent);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.025);
}

.eq-example span {
    font-size: 18px;
}

.eq-example p {
    margin: 0;

    color:
        rgba(255,255,255,0.44);

    font-size: 12px;

    line-height: 1.7;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 800px) {

    .eq-explorer {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 500px) {

    .eq-range-selector {
        flex-direction: column;
    }

    .eq-range-btn {
        width: 100%;
    }

    .eq-graph {
        height: 230px;
    }

}/* =====================================================
   DIGITAL MIXER EQ
   PROFESSIONAL EQ GRAPH
   ===================================================== */

.digital-eq-section {
    overflow: hidden;
}

.digital-eq-console {
    margin-top: 26px;
}


/* =====================================================
   GRAPH
   ===================================================== */

.digital-eq-graph {
    position: relative;

    padding-left: 42px;
    padding-bottom: 35px;
}

.digital-eq-chart {
    position: relative;

    width: 100%;
    height: 360px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.012)
        );

    touch-action: none;
}


/* =====================================================
   DB SCALE
   ===================================================== */

.eq-db-labels {

    position: absolute;

    left: 0;
    top: 0;
    bottom: 35px;

    width: 34px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 2px 0;

    color:
        rgba(255,255,255,0.36);

    font-size: 9px;

    font-weight: 700;

    text-align: right;
}


/* =====================================================
   GRID
   ===================================================== */

.eq-horizontal-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            to bottom,
            transparent 19.8%,
            rgba(255,255,255,0.065) 20%,
            transparent 20.2%,
            transparent 39.8%,
            rgba(255,255,255,0.065) 40%,
            transparent 40.2%,
            transparent 59.8%,
            rgba(255,255,255,0.1) 60%,
            transparent 60.2%,
            transparent 79.8%,
            rgba(255,255,255,0.065) 80%,
            transparent 80.2%
        );
}

.eq-vertical-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            to right,
            rgba(255,255,255,0.055) 1px,
            transparent 1px
        );

    background-size: 10% 100%;
}


/* =====================================================
   ZERO LINE
   ===================================================== */

.eq-zero-line {

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background:
        rgba(255,255,255,0.20);

    pointer-events: none;
}


/* =====================================================
   SVG CURVE
   ===================================================== */

.eq-svg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 3;
}

.eq-svg path {

    fill: none;

    stroke:
        var(--material-accent);

    stroke-width: 5;

    vector-effect: non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 7px
            color-mix(
                in srgb,
                var(--material-accent) 45%,
                transparent
            )
        );
}


/* =====================================================
   EQ POINT
   ===================================================== */

.eq-point {

    position: absolute;

    width: 18px;
    height: 18px;

    padding: 0;

    transform:
        translate(-50%, -50%);

    border:
        2px solid
        #ffffff;

    border-radius: 50%;

    background:
        var(--material-accent);

    box-shadow:
        0 0 0 4px
        rgba(255,255,255,0.055),
        0 0 15px
        color-mix(
            in srgb,
            var(--material-accent) 50%,
            transparent
        );

    cursor: grab;

    z-index: 5;

    transition:
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.eq-point:hover {

    transform:
        translate(-50%, -50%)
        scale(1.2);

}

.eq-point:active {

    cursor: grabbing;

    transform:
        translate(-50%, -50%)
        scale(1.3);

}

.eq-point span {

    position: absolute;

    left: 50%;
    top: -24px;

    transform:
        translateX(-50%);

    color:
        rgba(255,255,255,0.5);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    pointer-events: none;
}


/* =====================================================
   TOOLTIP
   ===================================================== */

.eq-point-tooltip {

    position: absolute;

    z-index: 10;

    display: none;

    padding: 7px 10px;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius: 8px;

    background:
        rgba(8,8,8,0.94);

    color:
        #ffffff;

    font-size: 10px;

    font-weight: 700;

    white-space: nowrap;

    pointer-events: none;
}


/* =====================================================
   FREQUENCY SCALE
   ===================================================== */

.eq-frequency-scale {

    display: flex;

    justify-content: space-between;

    margin-top: 9px;

    color:
        rgba(255,255,255,0.34);

    font-size: 9px;

    font-weight: 700;
}


/* =====================================================
   BAND CARDS
   ===================================================== */

.digital-eq-controls {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 18px;
}

.eq-band-card {

    padding: 15px;

    border:
        1px solid
        rgba(255,255,255,0.075);

    border-radius: 13px;

    background:
        rgba(255,255,255,0.025);

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.eq-band-card.active {

    border-color:
        color-mix(
            in srgb,
            var(--material-accent) 35%,
            rgba(255,255,255,0.08)
        );

    background:
        color-mix(
            in srgb,
            var(--material-accent) 6%,
            rgba(255,255,255,0.025)
        );
}

.eq-band-header {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;
}

.eq-band-header strong {

    font-size: 11px;

    letter-spacing: 1px;
}

.eq-band-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--material-accent);

    box-shadow:
        0 0 8px
        var(--material-accent);
}

.eq-value {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;
}

.eq-value span {

    color:
        rgba(255,255,255,0.42);

    font-size: 11px;

    font-weight: 700;
}

.eq-value strong {

    color:
        var(--material-accent);

    font-size: 12px;
}

.eq-band-card small {

    display: block;

    color:
        rgba(255,255,255,0.34);

    font-size: 10px;

    line-height: 1.5;
}


/* =====================================================
   TIP
   ===================================================== */

.digital-eq-tip {

    margin-top: 17px;

    padding: 14px 16px;

    border-left:
        3px solid
        var(--material-accent);

    border-radius: 9px;

    background:
        rgba(255,255,255,0.025);

    color:
        rgba(255,255,255,0.46);

    font-size: 11px;

    line-height: 1.7;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 700px) {

    .digital-eq-chart {
        height: 290px;
    }

    .digital-eq-controls {
        grid-template-columns: 1fr;
    }

    .eq-frequency-scale {
        font-size: 8px;
    }

}

@media (max-width: 480px) {

    .digital-eq-graph {
        padding-left: 36px;
    }

    .digital-eq-chart {
        height: 250px;
    }

}/* =====================================================
   SHAUTUNA PRO MATERIAL
   ===================================================== */

.pro-material-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top right,
            rgba(93,169,255,0.07),
            transparent 35%
        ),
        #080808;

    color: #ffffff;
}

.pro-material-main {
    max-width: 1050px;
    margin: 0 auto;
    padding: 45px 30px 80px;
}


/* ================= HEADER ================= */

.pro-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 35px;

    color: rgba(255,255,255,0.45);

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: 0.2s ease;
}

.pro-back:hover {
    color: #ffffff;
}

.pro-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;

    color: #5da9ff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.pro-label::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #5da9ff;

    box-shadow:
        0 0 12px #5da9ff;
}

.pro-title {
    margin: 0;

    font-size:
        clamp(34px, 5vw, 54px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.7px;
}

.pro-subtitle {
    max-width: 720px;

    margin: 16px 0 0;

    color:
        rgba(255,255,255,0.48);

    font-size: 15px;

    line-height: 1.8;
}


/* ================= LANGUAGE ================= */

.pro-language {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.pro-language button {
    padding: 9px 14px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.03);

    color:
        rgba(255,255,255,0.5);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}

.pro-language button:hover {
    color: #ffffff;
}

.pro-language button.active {
    color: #ffffff;

    border-color: #5da9ff;

    background:
        rgba(93,169,255,0.08);
}


/* ================= CARD ================= */

.pro-card {
    margin-top: 20px;

    padding: 28px;

    border:
        1px solid
        rgba(255,255,255,0.075);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.22);
}

.pro-card h2 {
    margin: 0 0 13px;

    font-size: 20px;
    font-weight: 800;
}

.pro-card > p {
    margin: 0;

    color:
        rgba(255,255,255,0.52);

    font-size: 14px;
    line-height: 1.8;
}


/* ================= OBJECTIVES ================= */

.pro-objectives {
    display: grid;

    gap: 10px;

    margin-top: 18px;
}

.pro-objective {
    padding: 12px 14px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.02);

    color:
        rgba(255,255,255,0.52);

    font-size: 12px;
}

.pro-objective::before {
    content: "✓";

    margin-right: 9px;

    color: #5da9ff;

    font-weight: 800;
}


/* =====================================================
   INTERACTIVE SIGNAL CHAIN
   ===================================================== */

.pro-chain {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 10px;

    margin-top: 27px;
}

.pro-chain-node {
    min-height: 125px;

    padding: 18px 10px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.025);

    color: #ffffff;

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.pro-chain-node:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(93,169,255,0.4);
}

.pro-chain-node.active {
    border-color:
        #5da9ff;

    background:
        rgba(93,169,255,0.08);

    box-shadow:
        0 12px 28px
        rgba(93,169,255,0.08);

    transform:
        translateY(-3px);
}

.pro-chain-icon {
    display: block;

    margin-bottom: 9px;

    font-size: 25px;
}

.pro-chain-node strong {
    display: block;

    font-size: 12px;
}

.pro-chain-node small {
    display: block;

    margin-top: 5px;

    color:
        rgba(255,255,255,0.35);

    font-size: 9px;
}

.pro-chain-detail {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 18px;

    padding: 16px;

    border-left:
        3px solid #5da9ff;

    border-radius: 10px;

    background:
        rgba(93,169,255,0.05);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.pro-chain-detail-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    background:
        rgba(93,169,255,0.08);

    font-size: 23px;
}

.pro-chain-detail strong {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
}

.pro-chain-detail p {
    margin: 0;

    color:
        rgba(255,255,255,0.45);

    font-size: 12px;

    line-height: 1.7;
}


/* ================= TIP ================= */

.pro-tip {
    border-left:
        3px solid #5da9ff;
}


/* ================= COMPLETE ================= */

.pro-complete {
    text-align: center;
}

.pro-complete-text {
    margin-bottom: 15px !important;
}

.pro-complete-button {
    padding: 12px 20px;

    border: none;

    border-radius: 11px;

    background: #5da9ff;

    color: #080808;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.pro-complete-button:hover {
    transform:
        translateY(-2px);

    opacity: 0.9;
}


/* =====================================================
   PRO — RESPONSIVE
   ===================================================== */

@media (max-width: 800px) {

    .pro-chain {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}

@media (max-width: 600px) {

    .pro-material-main {
        padding:
            28px 16px 55px;
    }

    .pro-card {
        padding: 21px;
    }

    .pro-chain {
        grid-template-columns: 1fr;
    }

    .pro-language {
        flex-wrap: wrap;
    }

}/* =====================================================
   PRO #1 — GAIN STRUCTURE
   INTERACTIVE GAIN STAGING
   ===================================================== */

.pro-gain-section {
    overflow: hidden;
}

.pro-interactive-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.pro-interactive-label {
    display: inline-block;
    margin-bottom: 8px;

    color: #5da9ff;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.pro-interactive-header h2 {
    margin: 0 0 8px;
}

.pro-interactive-header p {
    max-width: 650px;
    margin: 0;
}

.pro-db-readout {
    flex-shrink: 0;

    min-width: 105px;
    padding: 12px 15px;

    border: 1px solid rgba(93,169,255,0.22);
    border-radius: 11px;

    background: rgba(93,169,255,0.06);

    color: #5da9ff;

    font-family: monospace;
    font-size: 15px;
    font-weight: 800;

    text-align: center;
}


/* =====================================================
   SIGNAL CHAIN
   ===================================================== */

.pro-gain-chain {
    display: grid;

    grid-template-columns:
        minmax(110px, 1fr)
        auto
        minmax(110px, 1fr)
        auto
        minmax(110px, 1fr)
        auto
        minmax(110px, 1fr)
        auto
        minmax(110px, 1fr);

    align-items: center;

    gap: 9px;

    margin-top: 10px;
}

.pro-gain-node {
    position: relative;

    min-height: 145px;

    padding: 17px 11px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

    color: #ffffff;

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.pro-gain-node:hover {
    transform: translateY(-3px);

    border-color:
        rgba(93,169,255,0.35);
}

.pro-gain-node.active {
    transform: translateY(-3px);

    border-color:
        #5da9ff;

    background:
        rgba(93,169,255,0.08);

    box-shadow:
        0 12px 30px
        rgba(93,169,255,0.08);
}

.pro-gain-node-icon {
    display: block;

    margin-bottom: 8px;

    font-size: 24px;
}

.pro-gain-node-name {
    display: block;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.pro-gain-node small {
    display: block;

    margin-top: 5px;

    color:
        rgba(255,255,255,0.35);

    font-size: 9px;
}

.pro-gain-level {
    display: inline-block;

    margin-top: 11px;
    padding: 5px 7px;

    border-radius: 7px;

    background:
        rgba(0,0,0,0.25);

    color:
        #5da9ff;

    font-family: monospace;

    font-size: 10px;
    font-weight: 800;
}

.pro-gain-arrow {
    color:
        rgba(93,169,255,0.65);

    font-size: 20px;

    text-align: center;
}


/* =====================================================
   METER
   ===================================================== */

.pro-gain-meter {
    display: grid;

    grid-template-columns: 30px 22px 1fr;

    align-items: center;

    gap: 12px;

    margin-top: 22px;

    padding: 18px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 15px;

    background:
        rgba(255,255,255,0.018);
}

.pro-gain-meter-scale {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 165px;

    color:
        rgba(255,255,255,0.3);

    font-family: monospace;

    font-size: 8px;

    text-align: right;
}

.pro-gain-meter-track {
    position: relative;

    width: 22px;
    height: 165px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.06);
}

.pro-gain-meter-fill {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 38%;

    border-radius: inherit;

    background:
        linear-gradient(
            to top,
            #5da9ff 0%,
            #5da9ff 68%,
            #ffd166 82%,
            #ff6262 100%
        );

    transition:
        height 0.1s ease;
}

.pro-gain-meter-state {
    padding-left: 10px;
}

.pro-gain-status-badge {
    display: inline-flex;

    padding: 6px 10px;

    border:
        1px solid
        rgba(93,169,255,0.22);

    border-radius: 999px;

    background:
        rgba(93,169,255,0.06);

    color:
        #5da9ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.pro-gain-status-badge.warning {
    color: #ffd166;
    border-color: rgba(255,209,102,0.25);
    background: rgba(255,209,102,0.06);
}

.pro-gain-status-badge.danger {
    color: #ff6262;
    border-color: rgba(255,98,98,0.25);
    background: rgba(255,98,98,0.06);
}

.pro-gain-meter-state h3 {
    margin: 11px 0 6px;

    font-size: 17px;
}

.pro-gain-meter-state p {
    margin: 0;

    max-width: 520px;

    color:
        rgba(255,255,255,0.42);

    font-size: 11px;

    line-height: 1.7;
}


/* =====================================================
   DETAIL PANEL
   ===================================================== */

.pro-gain-detail {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 15px;

    padding: 17px;

    border:
        1px solid
        rgba(93,169,255,0.14);

    border-left:
        3px solid
        #5da9ff;

    border-radius: 12px;

    background:
        rgba(93,169,255,0.035);
}

.pro-gain-detail-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 46px;
    height: 46px;

    border-radius: 12px;

    background:
        rgba(93,169,255,0.08);

    font-size: 22px;
}

.pro-gain-detail-label {
    display: block;

    margin-bottom: 4px;

    color:
        #5da9ff;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.pro-gain-detail h3 {
    margin: 0 0 5px;

    font-size: 14px;
}

.pro-gain-detail p {
    margin: 0;

    color:
        rgba(255,255,255,0.43);

    font-size: 11px;

    line-height: 1.7;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 900px) {

    .pro-gain-chain {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .pro-gain-arrow {
        display: none;
    }

}

@media (max-width: 650px) {

    .pro-interactive-header {
        flex-direction: column;
    }

    .pro-db-readout {
        width: 100%;
    }

    .pro-gain-chain {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pro-gain-meter {
        grid-template-columns: 30px 22px 1fr;
    }

}

@media (max-width: 430px) {

    .pro-gain-chain {
        grid-template-columns: 1fr;
    }

    .pro-gain-node {
        min-height: 115px;
    }

}/* =====================================================
   SHAUTUNA MATERIAL ROUTING
   HIDE SPECIAL SECTIONS BY MATERIAL
   ===================================================== */

.material-special-section {
    display: none;
}

.material-special-section.is-active {
    display: block;
}
/* =========================================================
   SHAUTUNA GLOBAL SCROLL ANIMATION
   ========================================================= */

.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.scroll-animate-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.service-card,
.achievement-card,
.gallery-item,
.event-card,
.team-card,
.quote-card,
.why-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.service-card:hover,
.achievement-card:hover,
.event-card:hover,
.team-card:hover,
.quote-card:hover,
.why-card:hover {
    transform: translateY(-6px);
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery-item {
    overflow: hidden;
}

.gallery-item img {
    transition: transform 0.7s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .scroll-animate {
        transform: translateY(30px);
    }

}
/* =========================================================
   SHAUTUNA — PREMIUM HERO POPUP
   ========================================================= */

.partner-popup {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background:
        rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 9999;
}

.partner-popup.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   POPUP CARD
   ========================================================= */

.partner-popup-content {
    position: relative;

    width: min(560px, 100%);

    padding: 42px 38px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 30, 30, 0.96),
            rgba(8, 8, 8, 0.96)
        );

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.7),

        0 0 60px
        rgba(255, 255, 255, 0.035);

    transform:
        translateY(30px)
        scale(0.94);

    transition:
        transform 0.45s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.partner-popup.active
.partner-popup-content {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   TOP GLOW
   ========================================================= */

.partner-popup-content::before {
    content: "";

    position: absolute;

    top: -80px;
    left: 50%;

    width: 220px;
    height: 160px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.10),
            transparent 70%
        );

    filter:
        blur(10px);

    pointer-events: none;
}


/* =========================================================
   CLOSE
   ========================================================= */

.close-popup {
    position: absolute;

    top: 16px;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);

    color:
        rgba(255,255,255,0.65);

    font-size: 23px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.close-popup:hover {

    transform:
        rotate(90deg);

    background:
        rgba(255,255,255,0.10);

    color: #ffffff;
}


/* =========================================================
   BADGE
   ========================================================= */

.popup-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 13px;

    color:
        rgba(255,255,255,0.42);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.popup-badge::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 12px
        rgba(255,255,255,0.7);
}


/* =========================================================
   TITLE
   ========================================================= */

.partner-popup-content h2 {

    margin: 0 0 25px;

    color: #ffffff;

    font-size:
        clamp(28px, 5vw, 42px);

    line-height: 1;

    letter-spacing: -1.5px;

    font-weight: 850;
}


/* =========================================================
   PARTNER IMAGE
   ========================================================= */

.partner-popup-content > img {

    width: 100%;

    max-width: 420px;

    height: auto;

    display: block;

    margin: 0 auto 28px;

    padding: 18px 22px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 18px;

    background:
        rgba(255,255,255,0.025);

    filter:
        drop-shadow(
            0 12px 30px
            rgba(0,0,0,0.35)
        );
}


/* =========================================================
   PARTNER INFO
   ========================================================= */

.partner-info {

    display: grid;

    gap: 10px;

    margin-top: 10px;
}

.partner-info > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.025);
}

.partner-info strong {

    color:
        rgba(255,255,255,0.38);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}

.partner-info span,
.partner-info a {

    color:
        rgba(255,255,255,0.82);

    font-size: 13px;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color 0.2s ease;
}

.partner-info a:hover {

    color: #ffffff;
}


/* =========================================================
   BUTTON
   ========================================================= */

.popup-btn {

    width: 100%;

    min-height: 48px;

    margin-top: 22px;

    border: 0;

    border-radius: 12px;

    background: #ffffff;

    color: #080808;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 0.8px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.popup-btn:hover {

    transform:
        translateY(-2px);

    opacity: 0.9;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .partner-popup {
        padding: 16px;
    }

    .partner-popup-content {

        padding: 34px 22px 24px;

        border-radius: 22px;
    }

    .partner-popup-content h2 {

        font-size: 30px;

    }

    .partner-popup-content > img {

        padding: 14px;

    }

}
/* =========================================================
   SHAUTUNA CINEMATIC HERO
   ========================================================= */

.sha-hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #050505;

    isolation: isolate;
}


/* =========================================================
   VIDEO
   ========================================================= */

.sha-hero-video {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: -3;
}

.sha-hero-video video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.sha-hero-overlay {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.88) 0%,
            rgba(0,0,0,0.62) 38%,
            rgba(0,0,0,0.28) 72%,
            rgba(0,0,0,0.18) 100%
        );

}

.sha-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 220px;

    z-index: -1;

    background:
        linear-gradient(
            to top,
            #080808,
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.sha-hero-content {
    position: relative;

    width: min(
        1150px,
        calc(100% - 12vw)
    );

    margin:
        70px auto 0;

    z-index: 2;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.sha-hero-eyebrow {
    margin-bottom: 18px;

    color:
        rgba(255,255,255,0.58);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(25px);

    animation:
        shaHeroUp 0.8s ease forwards;

    animation-delay: 0.15s;
}


/* =========================================================
   TITLE
   ========================================================= */

.sha-hero h1 {
    max-width: 920px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            48px,
            7vw,
            94px
        );

    line-height: 0.97;

    letter-spacing: -4px;

    font-weight: 850;

    opacity: 0;

    transform:
        translateY(35px);

    animation:
        shaHeroUp 0.9s ease forwards;

    animation-delay: 0.3s;
}

.sha-hero h1 span {
    color: #ffffff;
}

.sha-hero h1 br + * {
    color:
        rgba(255,255,255,0.48);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.sha-hero-content > p {
    max-width: 620px;

    margin: 26px 0 0;

    color:
        rgba(255,255,255,0.58);

    font-size: 15px;

    line-height: 1.8;

    opacity: 0;

    transform:
        translateY(25px);

    animation:
        shaHeroUp 0.8s ease forwards;

    animation-delay: 0.5s;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.sha-hero-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    opacity: 0;

    transform:
        translateY(25px);

    animation:
        shaHeroUp 0.8s ease forwards;

    animation-delay: 0.65s;
}


.sha-hero-primary,
.sha-hero-secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 49px;

    padding:
        0 21px;

    border-radius: 12px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.7px;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


.sha-hero-primary {
    gap: 10px;

    background: #ffffff;

    color: #080808;
}

.sha-hero-primary span {
    font-size: 17px;

    transition:
        transform 0.25s ease;
}

.sha-hero-primary:hover {
    transform:
        translateY(-3px);
}

.sha-hero-primary:hover span {
    transform:
        translateX(4px);
}


.sha-hero-secondary {
    border:
        1px solid
        rgba(255,255,255,0.20);

    background:
        rgba(255,255,255,0.05);

    color: #ffffff;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}

.sha-hero-secondary:hover {
    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,0.10);

}


/* =========================================================
   STATS
   ========================================================= */

.sha-hero-stats {
    display: flex;

    align-items: center;

    gap: 34px;

    margin-top: 39px;

    opacity: 0;

    transform:
        translateY(20px);

    animation:
        shaHeroUp 0.8s ease forwards;

    animation-delay: 0.82s;
}


.sha-hero-stats div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.sha-hero-stats strong {
    color: #ffffff;

    font-size: 20px;

    line-height: 1;
}


.sha-hero-stats span {
    color:
        rgba(255,255,255,0.38);

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   PARTNERS
   ========================================================= */

.sha-hero-partners {
    position: absolute;

    top: 115px;
    right: 6vw;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        9px 14px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 999px;

    background:
        rgba(0,0,0,0.34);

    color: #ffffff;

    cursor: pointer;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    z-index: 5;

    opacity: 0;

    animation:
        shaHeroDown 0.8s ease forwards;

    animation-delay: 0.25s;
}


.sha-hero-partners span {
    color:
        rgba(255,255,255,0.54);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.sha-hero-partners img {
    width: 100px;

    height: auto;

    display: block;
}


/* =========================================================
   SCROLL
   ========================================================= */

.sha-hero-scroll {
    position: absolute;

    left: 50%;
    bottom: 27px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    transform:
        translateX(-50%);

    color:
        rgba(255,255,255,0.40);

    text-decoration: none;

    z-index: 5;
}


.sha-hero-scroll span {
    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;
}


.sha-hero-scroll i {
    position: relative;

    display: block;

    width: 1px;

    height: 48px;

    overflow: hidden;

    background:
        rgba(255,255,255,0.18);
}


.sha-hero-scroll i::after {
    content: "";

    position: absolute;

    left: 0;
    top: -100%;

    width: 100%;
    height: 45%;

    background: #ffffff;

    animation:
        shaScrollLine 1.8s
        ease-in-out
        infinite;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes shaHeroUp {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes shaHeroDown {

    from {
        opacity: 0;

        transform:
            translateY(-20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes shaScrollLine {

    0% {
        top: -100%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 100%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .sha-hero-content {
        width:
            calc(100% - 40px);

        margin-top:
            60px;
    }

    .sha-hero-partners {
        top: 85px;
        right: 20px;
    }

    .sha-hero h1 {
        font-size:
            clamp(
                43px,
                10vw,
                70px
            );

        letter-spacing:
            -2.5px;
    }

}


@media (max-width: 600px) {

    .sha-hero {
        min-height: 92vh;
    }

    .sha-hero-partners {
        top: 74px;
        left: 20px;
        right: auto;
    }

    .sha-hero-partners img {
        width: 82px;
    }

    .sha-hero-content {
        margin-top: 80px;
    }

    .sha-hero-content > p {
        font-size: 13px;
    }

    .sha-hero-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .sha-hero-primary,
    .sha-hero-secondary {
        width: 100%;
    }

    .sha-hero-stats {
        gap: 22px;
        flex-wrap: wrap;
    }

    .sha-hero-scroll {
        display: none;
    }

}/* =========================================================
   OFFICIAL PARTNERS — LOGO ONLY
   ========================================================= */

.official-partners-section {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 42px 20px 48px;

    background: transparent;

    text-align: center;
}


/* LABEL */

.official-partners-label {
    margin-bottom: 18px;

    color: rgba(255, 255, 255, 0.45);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* AREA LOGO */

.official-partners-card {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    padding: 22px 30px;

    border: 1px solid #e7e7e7;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18);

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.official-partners-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.25);
}


/* LOGO */

.official-partners-card img {
    width: 300px;

    height: auto;

    display: block;
}


/* VIEW PARTNERSHIP */

.official-partners-action {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #555555;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
}


.official-partners-action strong {
    color: #111111;

    font-size: 18px;

    transition:
        transform 0.25s ease;
}


.official-partners-card:hover
.official-partners-action strong {
    transform:
        translateX(4px);
}


/* MOBILE */

@media (max-width: 600px) {

    .official-partners-section {
        padding:
            32px 16px 38px;
    }

    .official-partners-card {
        width: 100%;

        max-width: 380px;

        gap: 16px;

        padding: 18px 20px;
    }

    .official-partners-card img {
        width: 210px;
        max-width: 65%;
    }

}
/* =========================================================
   HERO SOUND BUTTON
   ========================================================= */

.sha-hero-sound {
    position: absolute;

    right: 28px;
    bottom: 28px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 8px;

    background: rgba(0, 0, 0, 0.72);

    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    z-index: 9999;

    opacity: 1;

    pointer-events: auto;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.sha-hero-sound:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.06);
}

.sha-hero-sound:active {
    transform: scale(0.94);
}


@media (max-width: 600px) {

    .sha-hero-sound {
        right: 18px;
        bottom: 18px;

        width: 44px;
        height: 44px;

        font-size: 20px;
    }

}
/* =========================================================
   HERO SOUND BUTTON — FORCE CLICKABLE
   ========================================================= */

.sha-hero-video {
    pointer-events: none;
}

.sha-hero-video video {
    pointer-events: none;
}

.sha-hero-overlay {
    pointer-events: none;
}

.sha-hero-sound {
    position: absolute;

    right: 28px;
    bottom: 28px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;

    background: rgba(0,0,0,0.75);

    color: #ffffff;

    font-size: 22px;

    cursor: pointer;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    z-index: 99999;
}

.sha-hero-sound:hover {
    background: rgba(0,0,0,0.95);
}

@media (max-width: 600px) {

    .sha-hero-sound {
        right: 18px;
        bottom: 18px;

        width: 44px;
        height: 44px;
    }

}
/* =========================================================
   HERO SOUND ICON
   ========================================================= */

.sha-hero-sound {
    position: absolute;

    right: 28px;
    bottom: 28px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;

    background: rgba(0, 0, 0, 0.75);

    cursor: pointer;

    z-index: 99999;

    pointer-events: auto;
}

.sha-hero-sound:hover {
    background: rgba(0, 0, 0, 0.92);
}

.hero-sound-icon {
    display: none;

    font-size: 22px;
    line-height: 1;
}

.hero-sound-icon.active {
    display: block;
}

@media (max-width: 600px) {

    .sha-hero-sound {
        right: 18px;
        bottom: 18px;

        width: 44px;
        height: 44px;
    }

    .hero-sound-icon {
        font-size: 20px;
    }

}
        /* =========================================================
           SHAUTUNA MATERIAL
           Isolated styles — prefix: material-
           ========================================================= */

        .material-page {
            min-height: 100vh;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.035), transparent 35%),
                #080808;
            color: #ffffff;
        }

        .material-page .dashboard {
            min-height: 100vh;
        }

        .material-page .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            height: 100vh;
            z-index: 100;
        }

        .material-page .dashboard-main {
            margin-left: 250px;
            min-height: 100vh;
            padding: 40px;
        }

        .material-page .material-nav-active {
            background: rgba(255, 255, 255, 0.08);
            border-left: 3px solid #ffffff;
        }

        /* ================= HEADER ================= */

        .material-header {
            margin-bottom: 38px;
        }

        .material-header-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;

            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;

            color: rgba(255, 255, 255, 0.48);
        }

        .material-header-label::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #62d98b;
            box-shadow: 0 0 12px rgba(98, 217, 139, 0.35);
        }

        .material-header h1 {
            margin: 0;
            font-size: clamp(32px, 4vw, 48px);
            line-height: 1.05;
            font-weight: 800;
            letter-spacing: -1.5px;
        }

        .material-header h1 span {
            color: rgba(255, 255, 255, 0.55);
        }

        .material-header p {
            max-width: 650px;
            margin: 15px 0 0;
            color: rgba(255, 255, 255, 0.55);
            font-size: 15px;
            line-height: 1.7;
        }

        /* ================= INTRO ================= */

        .material-intro-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;

            padding: 24px 26px;
            margin-bottom: 28px;

            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;

            background: rgba(255, 255, 255, 0.025);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
        }

        .material-intro-content h2 {
            margin: 0 0 7px;
            font-size: 18px;
        }

        .material-intro-content p {
            margin: 0;
            color: rgba(255, 255, 255, 0.48);
            font-size: 14px;
        }

        .material-intro-badge {
            flex-shrink: 0;

            padding: 9px 14px;
            border-radius: 999px;

            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.04);

            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        /* ================= SECTION ================= */

        .material-section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .material-section-title h2 {
            margin: 0;
            font-size: 20px;
        }

        .material-section-title span {
            color: rgba(255, 255, 255, 0.35);
            font-size: 12px;
        }

        /* ================= CATEGORY GRID ================= */

        .material-category-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .material-category-card {
            position: relative;
            overflow: hidden;

            min-height: 205px;
            padding: 25px;

            border: 1px solid rgba(255, 255, 255, 0.075);
            border-radius: 20px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.045),
                    rgba(255, 255, 255, 0.015)
                );

            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);

            text-decoration: none;
            color: #ffffff;

            transition:
                transform 0.25s ease,
                border-color 0.25s ease,
                background 0.25s ease,
                box-shadow 0.25s ease;
        }

        .material-category-card:hover {
            transform: translateY(-5px);

            border-color: rgba(255, 255, 255, 0.16);

            background:
                linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.065),
                    rgba(255, 255, 255, 0.02)
                );

            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
        }

        .material-category-card::after {
            content: "";
            position: absolute;

            width: 130px;
            height: 130px;

            right: -60px;
            bottom: -70px;

            border-radius: 50%;

            background: var(--material-accent);
            opacity: 0.045;

            filter: blur(5px);
            transition: opacity 0.25s ease;
        }

        .material-category-card:hover::after {
            opacity: 0.09;
        }

        /* ================= CARD ================= */

        .material-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 30px;
        }

        .material-icon {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 48px;
            height: 48px;

            border-radius: 14px;

            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.08);

            font-size: 22px;
        }

        .material-level {
            display: inline-flex;
            align-items: center;

            padding: 6px 10px;

            border-radius: 999px;

            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.07);

            color: var(--material-accent);

            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.1px;
        }

        .material-category-card h3 {
            margin: 0 0 7px;

            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.3px;
        }

        .material-category-card p {
            margin: 0;

            color: rgba(255, 255, 255, 0.47);

            font-size: 13px;
            line-height: 1.5;
        }

        .material-card-footer {
            position: absolute;
            left: 25px;
            right: 25px;
            bottom: 22px;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .material-count {
            color: rgba(255, 255, 255, 0.38);
            font-size: 12px;
            font-weight: 600;
        }

        .material-arrow {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 32px;
            height: 32px;

            border-radius: 10px;

            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.07);

            color: rgba(255, 255, 255, 0.7);

            transition:
                transform 0.25s ease,
                background 0.25s ease;
        }

        .material-category-card:hover .material-arrow {
            transform: translateX(4px);
            background: rgba(255, 255, 255, 0.08);
        }

        /* ================= ACCENTS ================= */

        .material-newbie {
            --material-accent: #62d98b;
        }

        .material-pro {
            --material-accent: #5da9ff;
        }

        .material-expert {
            --material-accent: #a875ff;
        }

        .material-operator {
            --material-accent: #f2c94c;
        }

        .material-troubleshooting {
            --material-accent: #ff6262;
        }

        .material-category-card.material-wide {
            grid-column: 1 / -1;
        }

        /* ================= RESPONSIVE ================= */

        @media (max-width: 900px) {

            .material-page .sidebar {
                position: relative;
                width: 100%;
                height: auto;
            }

            .material-page .dashboard-main {
                margin-left: 0;
                padding: 28px 20px 40px;
            }

            .material-category-grid {
                grid-template-columns: 1fr;
            }

            .material-category-card.material-wide {
                grid-column: auto;
            }
        }

        @media (max-width: 600px) {

            .material-page .dashboard-main {
                padding: 24px 16px 35px;
            }

            .material-header h1 {
                font-size: 34px;
            }

            .material-header p {
                font-size: 13px;
            }

            .material-intro-card {
                align-items: flex-start;
                flex-direction: column;
                padding: 20px;
            }

            .material-category-card {
                min-height: 195px;
                padding: 21px;
                border-radius: 17px;
            }

            .material-card-footer {
                left: 21px;
                right: 21px;
                bottom: 18px;
            }
        }    
        /* =========================================================
           SHAUTUNA MATERIAL
           Isolated styles — prefix: material-
           ========================================================= */

        .material-page {
            min-height: 100vh;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.035), transparent 35%),
                #080808;
            color: #ffffff;
        }

        .material-page .dashboard {
            min-height: 100vh;
        }

        .material-page .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            height: 100vh;
            z-index: 100;
        }

        .material-page .dashboard-main {
            margin-left: 250px;
            min-height: 100vh;
            padding: 40px;
        }

        .material-page .material-nav-active {
            background: rgba(255, 255, 255, 0.08);
            border-left: 3px solid #ffffff;
        }

        /* ================= HEADER ================= */

        .material-header {
            margin-bottom: 38px;
        }

        .material-header-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;

            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;

            color: rgba(255, 255, 255, 0.48);
        }

        .material-header-label::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #62d98b;
            box-shadow: 0 0 12px rgba(98, 217, 139, 0.35);
        }

        .material-header h1 {
            margin: 0;
            font-size: clamp(32px, 4vw, 48px);
            line-height: 1.05;
            font-weight: 800;
            letter-spacing: -1.5px;
        }

        .material-header h1 span {
            color: rgba(255, 255, 255, 0.55);
        }

        .material-header p {
            max-width: 650px;
            margin: 15px 0 0;
            color: rgba(255, 255, 255, 0.55);
            font-size: 15px;
            line-height: 1.7;
        }

        /* ================= INTRO ================= */

        .material-intro-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;

            padding: 24px 26px;
            margin-bottom: 28px;

            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;

            background: rgba(255, 255, 255, 0.025);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
        }

        .material-intro-content h2 {
            margin: 0 0 7px;
            font-size: 18px;
        }

        .material-intro-content p {
            margin: 0;
            color: rgba(255, 255, 255, 0.48);
            font-size: 14px;
        }

        .material-intro-badge {
            flex-shrink: 0;

            padding: 9px 14px;
            border-radius: 999px;

            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.04);

            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        /* ================= SECTION ================= */

        .material-section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .material-section-title h2 {
            margin: 0;
            font-size: 20px;
        }

        .material-section-title span {
            color: rgba(255, 255, 255, 0.35);
            font-size: 12px;
        }

        /* ================= CATEGORY GRID ================= */

        .material-category-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .material-category-card {
            position: relative;
            overflow: hidden;

            min-height: 205px;
            padding: 25px;

            border: 1px solid rgba(255, 255, 255, 0.075);
            border-radius: 20px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.045),
                    rgba(255, 255, 255, 0.015)
                );

            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);

            text-decoration: none;
            color: #ffffff;

            transition:
                transform 0.25s ease,
                border-color 0.25s ease,
                background 0.25s ease,
                box-shadow 0.25s ease;
        }

        .material-category-card:hover {
            transform: translateY(-5px);

            border-color: rgba(255, 255, 255, 0.16);

            background:
                linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.065),
                    rgba(255, 255, 255, 0.02)
                );

            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
        }

        .material-category-card::after {
            content: "";
            position: absolute;

            width: 130px;
            height: 130px;

            right: -60px;
            bottom: -70px;

            border-radius: 50%;

            background: var(--material-accent);
            opacity: 0.045;

            filter: blur(5px);
            transition: opacity 0.25s ease;
        }

        .material-category-card:hover::after {
            opacity: 0.09;
        }

        /* ================= CARD ================= */

        .material-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 30px;
        }

        .material-icon {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 48px;
            height: 48px;

            border-radius: 14px;

            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.08);

            font-size: 22px;
        }

        .material-level {
            display: inline-flex;
            align-items: center;

            padding: 6px 10px;

            border-radius: 999px;

            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.07);

            color: var(--material-accent);

            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.1px;
        }

        .material-category-card h3 {
            margin: 0 0 7px;

            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.3px;
        }

        .material-category-card p {
            margin: 0;

            color: rgba(255, 255, 255, 0.47);

            font-size: 13px;
            line-height: 1.5;
        }

        .material-card-footer {
            position: absolute;
            left: 25px;
            right: 25px;
            bottom: 22px;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .material-count {
            color: rgba(255, 255, 255, 0.38);
            font-size: 12px;
            font-weight: 600;
        }

        .material-arrow {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 32px;
            height: 32px;

            border-radius: 10px;

            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.07);

            color: rgba(255, 255, 255, 0.7);

            transition:
                transform 0.25s ease,
                background 0.25s ease;
        }

        .material-category-card:hover .material-arrow {
            transform: translateX(4px);
            background: rgba(255, 255, 255, 0.08);
        }

        /* ================= ACCENTS ================= */

        .material-newbie {
            --material-accent: #62d98b;
        }

        .material-pro {
            --material-accent: #5da9ff;
        }

        .material-expert {
            --material-accent: #a875ff;
        }

        .material-operator {
            --material-accent: #f2c94c;
        }

        .material-troubleshooting {
            --material-accent: #ff6262;
        }

        .material-category-card.material-wide {
            grid-column: 1 / -1;
        }

        /* ================= RESPONSIVE ================= */

        @media (max-width: 900px) {

            .material-page .sidebar {
                position: relative;
                width: 100%;
                height: auto;
            }

            .material-page .dashboard-main {
                margin-left: 0;
                padding: 28px 20px 40px;
            }

            .material-category-grid {
                grid-template-columns: 1fr;
            }

            .material-category-card.material-wide {
                grid-column: auto;
            }
        }

        @media (max-width: 600px) {

            .material-page .dashboard-main {
                padding: 24px 16px 35px;
            }

            .material-header h1 {
                font-size: 34px;
            }

            .material-header p {
                font-size: 13px;
            }

            .material-intro-card {
                align-items: flex-start;
                flex-direction: column;
                padding: 20px;
            }

            .material-category-card {
                min-height: 195px;
                padding: 21px;
                border-radius: 17px;
            }

            .material-card-footer {
                left: 21px;
                right: 21px;
                bottom: 18px;
            }
        }
/* =========================================================
   DIGITAL MIXER UI
   ========================================================= */

.digital-mixer {
    margin-top: 18px;
    border: 1px solid #2a313d;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            #0e1218,
            #090c11
        );
    overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.digital-mixer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #292f39;
}

.digital-mixer-header h2 {
    margin: 3px 0 0;
    font-size: 17px;
}

.mixer-status {
    display: flex;
    gap: 8px;
}

.mixer-status span {
    padding: 6px 9px;
    border: 1px solid #303845;
    border-radius: 999px;
    color: #8e99a8;
    font-size: 8px;
    letter-spacing: .1em;
}


/* =========================================================
   STEM LOADER
   ========================================================= */

.stem-loader {
    padding: 14px;
    border-bottom: 1px solid #292f39;
}

.stem-loader-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
}

.stem-loader-title strong {
    display: block;
    font-size: 11px;
    letter-spacing: .1em;
}

.stem-loader-title span {
    display: block;
    margin-top: 2px;
    color: #7f8a98;
    font-size: 8px;
}

.stem-loader-title button {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #353e4b;
    background: #141920;
    color: #9ea8b5;
    border-radius: 6px;
    font-size: 8px;
    cursor: pointer;
}

.stem-drop-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(120px, 1fr));
    gap: 7px;
}

.stem-drop {
    min-height: 62px;
    padding: 9px;
    border: 1px dashed #384352;
    border-radius: 8px;
    background: #10151c;
    cursor: pointer;
    transition: .15s;
}

.stem-drop:hover {
    border-color: var(--accent);
}

.stem-drop > span {
    display: block;
    color: #e9edf2;
    font-size: 9px;
    font-weight: 800;
}

.stem-drop small {
    display: block;
    margin-top: 4px;
    color: #718090;
    font-size: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stem-drop input {
    display: none;
}


/* =========================================================
   TRANSPORT
   ========================================================= */

.dsp-transport {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid #292f39;
}

.dsp-transport button {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #323b48;
    background: #151a21;
    color: #d9dee5;
    border-radius: 6px;
    font-size: 9px;
    cursor: pointer;
}

.dsp-transport button:hover {
    border-color: var(--accent);
}

.dsp-transport .dsp-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #090909;
    font-weight: 800;
}

.transport-time {
    margin-left: auto;
    color: #aeb7c3;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   CONSOLE
   ========================================================= */

.digital-console-wrapper {
    width: 100%;
    overflow-x: auto;
}

.digital-console {
    display: flex;
    min-width: max-content;
    min-height: 490px;
}

.digital-channels {
    display: flex;
    min-width: max-content;
}


/* =========================================================
   CHANNEL STRIP
   ========================================================= */

.digital-channel {
    width: 156px;
    padding: 11px 9px 14px;
    border-right: 1px solid #2b323d;
    background:
        linear-gradient(
            180deg,
            #151b23,
            #0c1015
        );
    flex-shrink: 0;
}

.digital-channel.active-channel {
    box-shadow:
        inset 0 2px 0 var(--channel-color, var(--accent));
}


/* CHANNEL HEAD */

.d-channel-head {
    margin-bottom: 8px;
}

.d-channel-name {
    color: #f2f4f7;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d-channel-number {
    margin-top: 2px;
    color: #727e8d;
    font-size: 8px;
    letter-spacing: .1em;
}


/* =========================================================
   INPUT
   ========================================================= */

.d-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 8px;
}

.d-input button {
    height: 23px;
    border: 1px solid #343e4c;
    background: #131920;
    color: #aeb7c3;
    border-radius: 5px;
    font-size: 7px;
}

.d-input button.active {
    color: var(--accent);
    border-color: var(--accent);
}


/* =========================================================
   METER
   ========================================================= */

.d-channel-meter {
    height: 96px;
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.d-meter {
    position: relative;
    width: 12px;
    height: 100%;
    border: 1px solid #2f3743;
    background:
        repeating-linear-gradient(
            to top,
            #0a0d11 0 4px,
            #202631 4px 5px
        );
    border-radius: 4px;
    overflow: hidden;
}

.d-meter i {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10%;
    background:
        linear-gradient(
            to top,
            #36d58a 0 65%,
            #f1cf4c 65% 82%,
            #ff765e 82%
        );
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.dsp-section-title {
    margin: 8px 0 5px;
    color: #697584;
    font-size: 7px;
    letter-spacing: .15em;
}


/* =========================================================
   EQ
   ========================================================= */

.d-eq {
    padding: 6px;
    border: 1px solid #282f39;
    background: #0e1319;
    border-radius: 6px;
}

.eq-row {
    display: grid;
    grid-template-columns:
        28px 1fr 28px;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.eq-row:last-child {
    margin-bottom: 0;
}

.eq-row span {
    color: #687483;
    font-size: 7px;
}

.eq-row output {
    color: #bcc4ce;
    font-size: 7px;
    text-align: right;
}

.eq-row input {
    width: 100%;
    accent-color: var(--accent);
}


/* =========================================================
   DYNAMICS
   ========================================================= */

.d-dynamics {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap: 4px;
}

.d-dynamics input {
    width: 100%;
    accent-color: var(--accent);
}

.dyn-box {
    padding: 6px;
    border: 1px solid #292f39;
    border-radius: 6px;
    background: #10151b;
}

.dyn-box strong {
    display: block;
    font-size: 7px;
    color: #9da7b4;
}

.dyn-box span {
    display: block;
    margin-top: 2px;
    color: #667281;
    font-size: 6px;
}


/* =========================================================
   PAN
   ========================================================= */

.d-pan {
    width: 100%;
    accent-color: #9ba6b4;
}


/* =========================================================
   FADER
   ========================================================= */

.d-fader-area {
    margin-top: 9px;
    text-align: center;
}

.d-fader-db {
    display: block;
    margin-bottom: 4px;
    color: #d3d8df;
    font-size: 9px;
    font-weight: 700;
}

.d-fader {
    writing-mode: vertical-lr;
    direction: rtl;
    height: 155px;
    width: 28px;
    accent-color: var(--accent);
}


/* =========================================================
   CHANNEL BUTTONS
   ========================================================= */

.d-channel-buttons {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap: 5px;
    margin-top: 7px;
}

.d-channel-buttons button {
    height: 27px;
    border: 1px solid #303946;
    background: #141a21;
    color: #9fa8b4;
    border-radius: 5px;
    font-size: 7px;
    cursor: pointer;
}

.d-channel-buttons button.active {
    color: #fff;
    border-color: #d84c4c;
    background: #632020;
}


/* =========================================================
   BUS RACK
   ========================================================= */

.bus-rack {
    width: 145px;
    padding: 44px 10px 15px;
    border-right: 1px solid #2b323d;
    background: #11161d;
    flex-shrink: 0;
}

.bus-title {
    margin-bottom: 9px;
    color: #7d8895;
    font-size: 8px;
    letter-spacing: .14em;
}

.bus-strip {
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #2b333e;
    border-radius: 7px;
    background: #0d1218;
}

.bus-strip strong {
    display: block;
    color: #dce1e7;
    font-size: 8px;
}

.bus-strip small {
    display: block;
    margin-top: 2px;
    color: #626f7e;
    font-size: 6px;
}

.bus-fader {
    width: 100%;
    margin-top: 6px;
    accent-color: var(--accent);
}


/* =========================================================
   MASTER
   ========================================================= */

.digital-master {
    width: 145px;
    padding: 44px 12px 15px;
    background:
        linear-gradient(
            180deg,
            #161c24,
            #0c1015
        );
    flex-shrink: 0;
}

.master-meter-pair {
    display: flex;
    justify-content: center;
    gap: 8px;
    height: 185px;
}

.master-meter-pair > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.master-meter-pair span {
    color: #697482;
    font-size: 7px;
}

.dsp-meter {
    width: 13px;
    height: 160px;
    border: 1px solid #2c3440;
    background:
        repeating-linear-gradient(
            to top,
            #0a0d11 0 4px,
            #202631 4px 5px
        );
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.dsp-meter i {
    display: block;
    width: 100%;
    height: 15%;
    background:
        linear-gradient(
            to top,
            #36d58a 0 65%,
            #f1cf4c 65% 82%,
            #ff765e 82%
        );
}

.master-fader-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    color: #737f8d;
    font-size: 8px;
}

.master-fader-label input {
    width: 100%;
    accent-color: var(--accent);
}

.master-fader-label strong {
    color: #d8dde4;
    font-size: 10px;
    text-align: center;
}

.master-mute {
    width: 100%;
    margin-top: 10px;
    height: 30px;
    border: 1px solid #5b2929;
    background: #251516;
    color: #d76767;
    border-radius: 6px;
    font-size: 8px;
}

.master-mute.active {
    background: #7a1f1f;
    border-color: #ef5e5e;
    color: #fff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

    .stem-drop-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .digital-mixer-header {
        align-items: flex-start;
        gap: 12px;
    }

}.stem-drop.loaded {
    border-style: solid;
    border-color: #315c48;
    background:
        linear-gradient(
            145deg,
            #111c18,
            #0e1512
        );
}

.stem-drop.loaded > span {
    color: #63e6a5;
}
/* =========================================================
   REAL STROBE LAMP ONLY
   Fixture/lens berkedip
   Beam TETAP menyala
   ========================================================= */

.stage-light-fixture.strobe-lamp-off .fixture-lens {
    opacity: 0.04 !important;

    box-shadow:
        0 0 2px var(--light-color) !important;
}

.stage-light-fixture.strobe-lamp-off .fixture-head {
    filter: brightness(0.45);
}

.stage-light-fixture.strobe-lamp-on .fixture-lens {
    opacity: 1 !important;

    filter: brightness(1.25);

    box-shadow:
        0 0 8px var(--light-color),
        0 0 18px var(--light-color),
        0 0 30px color-mix(
            in srgb,
            var(--light-color) 60%,
            transparent
        );
}

.stage-light-fixture.strobe-lamp-on .fixture-head {
    filter: brightness(1.15);
}
/* =========================================================
   SHAUTUNA AUDIO — VIDEO WALL QUALITY / 4K READY
   ========================================================= */

/* LED WALL CONTAINER */
.led-wall,
.videotron,
.video-wall,
.stage-led-wall {
  overflow: hidden !important;
  position: relative !important;
  background: #000 !important;
}

/* VIDEO DI DALAM VIDEOTRON */
.led-wall video,
.videotron video,
.video-wall video,
.stage-led-wall video,
#stage video,
.stage-scene video {
  width: 100% !important;
  height: 100% !important;

  /* JANGAN GEPENG */
  object-fit: contain !important;

  /* pertahankan aspect ratio asli */
  object-position: center center !important;

  /* hindari efek yang membuat video terlihat blur */
  filter: none !important;

  /* rendering video lebih bersih */
  image-rendering: auto !important;

  /* jangan dipaksa transform */
  transform: none !important;

  background: #000 !important;

  display: block !important;
}


/* =========================================================
   MODE CINEMATIC — VIDEO MEMENUHI LED WALL
   ========================================================= */

.led-wall video,
.videotron video,
.video-wall video,
.stage-led-wall video {
  min-width: 100%;
  min-height: 100%;
}


/* =========================================================
   FULLSCREEN STAGE
   ========================================================= */

:fullscreen .stage-scene,
:fullscreen #stage,
:fullscreen .stage-panel,
.stage-scene:fullscreen,
#stage:fullscreen,
.stage-panel:fullscreen {
  width: 100vw !important;
  height: 100vh !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 0 !important;
}


/* =========================================================
   FULLSCREEN VIDEOTRON
   ========================================================= */

:fullscreen .led-wall,
:fullscreen .videotron,
:fullscreen .video-wall,
:fullscreen .stage-led-wall {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  border-radius: 0 !important;
}


/* =========================================================
   HILANGKAN READOUT SAAT FULLSCREEN
   ========================================================= */

:fullscreen .stage-readouts {
  display: none !important;
}


/* =========================================================
   GPU ACCELERATION
   ========================================================= */

.led-wall video,
.videotron video,
.video-wall video,
.stage-led-wall video {
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* =========================================================
   HINDARI VIDEO TERPOTONG OLEH ELEMENT LAIN
   ========================================================= */

.led-wall,
.videotron,
.video-wall,
.stage-led-wall {
  isolation: isolate;
}

.led-wall video,
.videotron video,
.video-wall video,
.stage-led-wall video {
  z-index: 1;
}/* =========================================
   MOMENT POPUP
========================================= */

.moment-popup {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.75);

    opacity: 0;
    visibility: hidden;

    transition: 0.3s ease;

    z-index: 99999;
}

.moment-popup.active {
    opacity: 1;
    visibility: visible;
}


/* BACKGROUND CLICK */

.moment-popup-overlay {
    position: absolute;
    inset: 0;
}


/* POPUP BOX */

.moment-popup-box {
    position: relative;

    width: 100%;
    max-width: 600px;

    padding: 45px;

    background: #1F2937;

    border-radius: 20px;

    border: 1px solid rgba(249, 115, 22, 0.3);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.6);

    transform: translateY(20px);

    transition: 0.3s ease;

    z-index: 2;
}

.moment-popup.active .moment-popup-box {
    transform: translateY(0);
}


/* CLOSE */

.moment-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 50%;

    background: #111827;

    color: white;

    font-size: 25px;

    cursor: pointer;

    transition: 0.3s;
}

.moment-close:hover {
    background: #F97316;
}


/* LABEL */

.moment-label {
    color: #F97316;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 2px;

    display: block;

    margin-bottom: 15px;
}


/* TITLE */

#momentTitle {
    font-size: 32px;

    color: white;

    margin-bottom: 15px;
}


/* DESCRIPTION */

#momentDescription {
    color: #D1D5DB;

    line-height: 1.8;

    font-size: 16px;
}
.moment-youtube {
    margin-top: 24px;
    width: 100%;
}

.moment-youtube a:first-child {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
}

.moment-youtube img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.youtube-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
}

.youtube-overlay span {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    font-size: 26px;
    padding-left: 4px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.moment-youtube a:first-child:hover .youtube-overlay span {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

.youtube-watch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04)
    );
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.youtube-watch-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0.07)
    );
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}#momentDescription {
    white-space: pre-line;
    line-height: 1.8;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.78);
}/* =========================================
   MOMENT POPUP - PREMIUM
========================================= */

.moment-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.moment-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* BOX POPUP */

.moment-popup-box {
    position: relative;
    z-index: 2;

    width: min(720px, 100%);
    max-height: 90vh;

    overflow-y: auto;

    padding: 36px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.04)
        );

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transform: translateY(25px) scale(0.97);
    transition: transform 0.35s ease;
}

.moment-popup.active .moment-popup-box {
    transform: translateY(0) scale(1);
}


/* =========================================
   CLOSE BUTTON
========================================= */

.moment-close {
    position: absolute;
    top: 16px;
    right: 16px;

    z-index: 10;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;

    font-size: 27px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.moment-close:hover {
    transform: rotate(90deg) scale(1.08);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}

.moment-close:active {
    transform: scale(0.94);
}


/* =========================================
   TEXT
========================================= */

.moment-label {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    color: rgba(255, 255, 255, 0.55);
}

#momentTitle {
    margin: 0 50px 14px 0;

    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.15;

    color: #ffffff;
}

#momentDescription {
    margin: 0;

    white-space: pre-line;

    font-size: 15px;
    line-height: 1.8;

    color: rgba(255, 255, 255, 0.76);
}


/* =========================================
   YOUTUBE
========================================= */

.moment-youtube {
    width: 100%;
    margin-top: 26px;
}

.moment-youtube > a:first-child {
    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 16px;
}

.moment-youtube img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 16px;

    transition: transform 0.5s ease;
}

.moment-youtube > a:first-child:hover img {
    transform: scale(1.03);
}


/* PLAY BUTTON */

.youtube-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.18);
}

.youtube-overlay span {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    font-size: 26px;

    padding-left: 4px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition: all 0.3s ease;
}

.moment-youtube > a:first-child:hover .youtube-overlay span {
    transform: scale(1.08);

    background: rgba(255, 255, 255, 0.18);

    border-color: rgba(255, 255, 255, 0.5);
}


/* WATCH BUTTON */

.youtube-watch-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 14px;
    padding: 12px 20px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04)
    );

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.2px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition: all 0.3s ease;
}

.youtube-watch-button:hover {
    transform: translateY(-2px);

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0.07)
    );

    border-color: rgba(255, 255, 255, 0.32);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .moment-popup {
        align-items: flex-end;

        padding: 0;
    }

    .moment-popup-box {
        width: 100%;

        max-height: 92vh;

        padding: 28px 20px 24px;

        border-radius: 24px 24px 0 0;

        transform: translateY(100%);
    }

    .moment-popup.active .moment-popup-box {
        transform: translateY(0);
    }

    .moment-close {
        top: 12px;
        right: 12px;

        width: 38px;
        height: 38px;

        font-size: 24px;
    }

    .moment-label {
        font-size: 10px;
        letter-spacing: 1.6px;

        padding-right: 45px;
    }

    #momentTitle {
        margin-right: 45px;
        margin-bottom: 12px;

        font-size: 25px;
    }

    #momentDescription {
        font-size: 14px;
        line-height: 1.7;
    }

    .moment-youtube {
        margin-top: 20px;
    }

    .moment-youtube > a:first-child {
        border-radius: 13px;
    }

    .moment-youtube img {
        border-radius: 13px;
    }

    .youtube-overlay span {
        width: 54px;
        height: 54px;

        font-size: 22px;
    }

    .youtube-watch-button {
        width: 100%;

        box-sizing: border-box;

        padding: 13px 18px;

        font-size: 14px;
    }
}


/* =========================================
   SMALL PHONE
========================================= */

@media (max-width: 420px) {

    .moment-popup-box {
        padding: 24px 16px 20px;
    }

    #momentTitle {
        font-size: 22px;
    }

    #momentDescription {
        font-size: 13px;
        line-height: 1.65;
    }

    .moment-close {
        width: 36px;
        height: 36px;
    }
}/* =========================================
   PREMIUM GALLERY - 6 EVENT
========================================= */

.gallery-item {
    --moment-accent: rgba(255, 255, 255, 0.45);

    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    transform: translateY(0) scale(1);

    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;

    cursor: pointer;

    isolation: isolate;
}


/* =========================================
   GLOW HALUS
========================================= */

.gallery-item::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 20% 0%,
            var(--moment-accent),
            transparent 45%
        );

    opacity: 0;

    transition: opacity 0.45s ease;
}


/* =========================================
   SHINE / LIGHT SWEEP
========================================= */

.gallery-item::after {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    z-index: 3;

    width: 55%;
    height: 100%;

    pointer-events: none;

    transform: skewX(-18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.14),
            transparent
        );

    transition: left 0.7s ease;
}


/* =========================================
   IMAGE
========================================= */

.gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1);

    transition:
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.45s ease;
}


/* =========================================
   HOVER
========================================= */

.gallery-item:hover {
    transform: translateY(-8px) scale(1.015);

    border-color: var(--moment-accent);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.35),
        0 0 0 1px var(--moment-accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.gallery-item:hover::before {
    opacity: 0.85;
}

.gallery-item:hover::after {
    left: 150%;
}

.gallery-item:hover img {
    transform: scale(1.07);

    filter: brightness(0.82) saturate(1.08);
}


/* =========================================
   CONTENT DI DALAM CARD
========================================= */

.gallery-item h3,
.gallery-item h2,
.gallery-item p,
.gallery-item span {
    position: relative;
    z-index: 4;

    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

.gallery-item:hover h3,
.gallery-item:hover h2 {
    transform: translateY(-2px);
}


/* =========================================
   6 AKSEN EVENT
========================================= */

/* 01 - Weekly Majelis */
.gallery-item:nth-child(1) {
    --moment-accent: rgba(220, 195, 145, 0.55);
}

/* 02 - Selapanan */
.gallery-item:nth-child(2) {
    --moment-accent: rgba(180, 210, 220, 0.55);
}

/* 03 - National Flag Ceremony */
.gallery-item:nth-child(3) {
    --moment-accent: rgba(255, 255, 255, 0.55);
}

/* 04 - Ramadhan */
.gallery-item:nth-child(4) {
    --moment-accent: rgba(205, 185, 235, 0.55);
}

/* 05 - Khatmul Quran */
.gallery-item:nth-child(5) {
    --moment-accent: rgba(170, 210, 185, 0.55);
}

/* 06 - Afkaaruna */
.gallery-item:nth-child(6) {
    --moment-accent: rgba(220, 205, 175, 0.55);
}


/* =========================================
   KLIK FEEDBACK
========================================= */

.gallery-item:active {
    transform: translateY(-3px) scale(0.985);

    transition: transform 0.12s ease;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .gallery-item {
        border-radius: 15px;

        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    /* Jangan terlalu besar saat disentuh di HP */
    .gallery-item:hover {
        transform: translateY(-4px) scale(1.005);
    }

    .gallery-item:hover img {
        transform: scale(1.04);
    }

}


/* =========================================
   SMALL PHONE
========================================= */

@media (max-width: 420px) {

    .gallery-item {
        border-radius: 13px;
    }

    .gallery-item:hover {
        transform: translateY(-2px);
    }

}/* =========================================
   GALLERY CARD CONTENT - SYMMETRIC
========================================= */

.gallery-item {
    position: relative;
    overflow: hidden;
}


/* AREA TEKS DI BAGIAN BAWAH */

.gallery-item h2,
.gallery-item h3,
.gallery-item p,
.gallery-item span {
    position: relative;
    z-index: 5;
}


/* Judul event */

.gallery-item h2,
.gallery-item h3 {
    margin-top: auto;
    margin-bottom: 8px;

    line-height: 1.2;
}


/* Deskripsi / meta */

.gallery-item p {
    margin-top: 0;
    margin-bottom: 0;

    line-height: 1.45;
}


/* =========================================
   JIKA CARD MEMAKAI CONTENT WRAPPER
========================================= */

.gallery-item .gallery-content,
.gallery-item .card-content,
.gallery-item .gallery-info,
.gallery-item .gallery-overlay-content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 5;

    padding: 22px 20px 20px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 105px;

    box-sizing: border-box;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82),
            rgba(0, 0, 0, 0.42),
            transparent
        );
}


/* =========================================
   TITLE HEIGHT CONSISTENT
========================================= */

.gallery-item .gallery-content h2,
.gallery-item .gallery-content h3,
.gallery-item .card-content h2,
.gallery-item .card-content h3,
.gallery-item .gallery-info h2,
.gallery-item .gallery-info h3 {
    min-height: 2.4em;

    display: flex;
    align-items: flex-end;

    margin: 0 0 6px;
}


/* =========================================
   META / TAG / CATEGORY
========================================= */

.gallery-item span {
    line-height: 1.3;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .gallery-item .gallery-content,
    .gallery-item .card-content,
    .gallery-item .gallery-info,
    .gallery-item .gallery-overlay-content {
        min-height: 90px;

        padding: 17px 15px 15px;
    }

    .gallery-item .gallery-content h2,
    .gallery-item .gallery-content h3,
    .gallery-item .card-content h2,
    .gallery-item .card-content h3,
    .gallery-item .gallery-info h2,
    .gallery-item .gallery-info h3 {
        min-height: 2.3em;

        font-size: 16px;
    }

}


/* =========================================
   SMALL PHONE
========================================= */

@media (max-width: 420px) {

    .gallery-item .gallery-content,
    .gallery-item .card-content,
    .gallery-item .gallery-info,
    .gallery-item .gallery-overlay-content {
        padding: 14px 13px 13px;
        min-height: 82px;
    }

    .gallery-item .gallery-content h2,
    .gallery-item .gallery-content h3,
    .gallery-item .card-content h2,
    .gallery-item .card-content h3,
    .gallery-item .gallery-info h2,
    .gallery-item .gallery-info h3 {
        font-size: 14px;
    }

}
/* =========================================
   END YEAR CELEBRATION
   SPECIAL MEMORY MODE
========================================= */

.end-year-special {
    --memory-gold: #d8bd78;
    --memory-gold-soft: rgba(216, 189, 120, 0.45);
    --memory-white: rgba(255, 248, 226, 0.95);
}


/* =========================================
   OVERLAY KHUSUS
   tetap transparan supaya website belakang
   masih terlihat
========================================= */

.end-year-special .moment-popup-overlay {
    background: rgba(18, 14, 8, 0.16);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* =========================================
   MAIN BOX
========================================= */

.end-year-special .moment-popup-box {
    overflow-x: hidden;
    overflow-y: auto;

    border: 1px solid rgba(216, 189, 120, 0.38);

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(216, 189, 120, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 245, 210, 0.08),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            rgba(34, 29, 20, 0.94),
            rgba(18, 17, 15, 0.94)
        );

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.50),
        0 0 50px rgba(216, 189, 120, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    animation:
        endYearBoxIn 0.8s cubic-bezier(0.18, 0.88, 0.25, 1) both,
        endYearGlow 4s ease-in-out 0.8s infinite;
}

@keyframes endYearBoxIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.94);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes endYearGlow {
    0%,
    100% {
        box-shadow:
            0 35px 100px rgba(0, 0, 0, 0.50),
            0 0 45px rgba(216, 189, 120, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }

    50% {
        box-shadow:
            0 38px 105px rgba(0, 0, 0, 0.55),
            0 0 70px rgba(216, 189, 120, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
}


/* =========================================
   FLOATING LIGHT / PARTICLES
========================================= */

.end-year-special .moment-popup-box::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: 0;

    opacity: 0.55;

    background-image:
        radial-gradient(circle, rgba(255,255,255,0.32) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(216,189,120,0.34) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.20) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(216,189,120,0.22) 0 1px, transparent 2px);

    background-size:
        90px 90px,
        130px 130px,
        170px 170px,
        210px 210px;

    background-position:
        0 0,
        30px 40px,
        80px 20px,
        15px 90px;

    animation:
        endYearParticles 16s linear infinite;
}

@keyframes endYearParticles {
    from {
        background-position:
            0 0,
            30px 40px,
            80px 20px,
            15px 90px;
    }

    to {
        background-position:
            0 -180px,
            30px -140px,
            80px -220px,
            15px -160px;
    }
}


/* =========================================
   LIGHT SWEEP
========================================= */

.end-year-special .moment-popup-box::after {
    content: "";

    position: absolute;

    top: -20%;
    left: -70%;

    width: 45%;
    height: 140%;

    pointer-events: none;
    z-index: 1;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 248, 226, 0.11),
            rgba(216, 189, 120, 0.16),
            transparent
        );

    filter: blur(4px);

    animation:
        endYearSweep 6s ease-in-out 1s infinite;
}

@keyframes endYearSweep {
    0% {
        left: -70%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    45% {
        opacity: 0.8;
    }

    60%,
    100% {
        left: 140%;
        opacity: 0;
    }
}


/* =========================================
   KEEP CONTENT ABOVE EFFECTS
========================================= */

.end-year-special .moment-popup-box > * {
    position: relative;
    z-index: 5;
}


/* =========================================
   LABEL
========================================= */

.end-year-special .moment-label {
    color: var(--memory-gold);

    letter-spacing: 3px;

    text-shadow:
        0 0 15px rgba(216, 189, 120, 0.28);
}

.end-year-special .moment-label::after {
    content: "  •  A SPECIAL MEMORY";

    opacity: 0.55;

    letter-spacing: 1.5px;
}


/* =========================================
   TITLE
========================================= */

.end-year-special #momentTitle {
    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #fff8e2 24%,
            #d8bd78 48%,
            #ffffff 65%,
            #d8bd78 82%,
            #ffffff 100%
        );

    background-size: 220% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        endYearTitleShine 5s linear infinite;
}

@keyframes endYearTitleShine {
    to {
        background-position: 220% center;
    }
}


/* =========================================
   DESCRIPTION
========================================= */

.end-year-special #momentDescription {
    color: rgba(255, 248, 232, 0.78);

    text-shadow:
        0 1px 18px rgba(0, 0, 0, 0.30);
}


/* =========================================
   YOUTUBE IMAGE
========================================= */

.end-year-special .moment-youtube > a:first-child {
    border: 1px solid rgba(216, 189, 120, 0.30);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.40),
        0 0 30px rgba(216, 189, 120, 0.08);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.end-year-special .moment-youtube > a:first-child:hover {
    transform: translateY(-3px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.45),
        0 0 45px rgba(216, 189, 120, 0.16);
}


/* =========================================
   PLAY BUTTON
========================================= */

.end-year-special .youtube-overlay span {
    background:
        linear-gradient(
            145deg,
            rgba(255, 248, 226, 0.18),
            rgba(216, 189, 120, 0.10)
        );

    border-color:
        rgba(216, 189, 120, 0.50);

    color: #fff8e2;

    box-shadow:
        0 0 30px rgba(216, 189, 120, 0.18),
        0 10px 35px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.18);

    animation:
        endYearPlayPulse 3s ease-in-out infinite;
}

@keyframes endYearPlayPulse {
    0%,
    100% {
        box-shadow:
            0 0 25px rgba(216, 189, 120, 0.12),
            0 10px 35px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.18);
    }

    50% {
        box-shadow:
            0 0 45px rgba(216, 189, 120, 0.25),
            0 10px 35px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.20);
    }
}


/* =========================================
   WATCH BUTTON
========================================= */

.end-year-special .youtube-watch-button {
    color: #fff8e2;

    border-color:
        rgba(216, 189, 120, 0.30);

    background:
        linear-gradient(
            135deg,
            rgba(216, 189, 120, 0.15),
            rgba(255, 255, 255, 0.04)
        );

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(216, 189, 120, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

.end-year-special .youtube-watch-button:hover {
    border-color:
        rgba(216, 189, 120, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(216, 189, 120, 0.24),
            rgba(255, 255, 255, 0.07)
        );

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.34),
        0 0 35px rgba(216, 189, 120, 0.12);
}


/* =========================================
   CLOSE BUTTON
========================================= */

.end-year-special .moment-close {
    border-color:
        rgba(216, 189, 120, 0.28);

    background:
        rgba(216, 189, 120, 0.07);

    color: #fff8e2;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.28),
        0 0 18px rgba(216, 189, 120, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

.end-year-special .moment-close:hover {
    border-color:
        rgba(216, 189, 120, 0.55);

    background:
        rgba(216, 189, 120, 0.14);

    box-shadow:
        0 10px 28px rgba(0,0,0,0.32),
        0 0 28px rgba(216, 189, 120, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.14);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .end-year-special .moment-popup-box {
        border-radius: 24px 24px 0 0;

        animation:
            endYearMobileIn 0.75s cubic-bezier(0.18, 0.88, 0.25, 1)
            both;
    }

    @keyframes endYearMobileIn {
        from {
            opacity: 0;
            transform: translateY(100%);
            filter: blur(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    .end-year-special .moment-label::after {
        display: block;

        margin-top: 5px;

        font-size: 8px;
    }

    .end-year-special .moment-popup-box::after {
        animation-duration: 7s;
    }

}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .end-year-special .moment-popup-box,
    .end-year-special .moment-popup-box::before,
    .end-year-special .moment-popup-box::after,
    .end-year-special #momentTitle,
    .end-year-special .youtube-overlay span {
        animation: none !important;
    }

}
.end-year-special .moment-popup-box {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}