@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800&display=swap');

:root{--blue:#7ed0e5;--blue2:#4fa8c2;--sky:#dff7fa;--yellow:#ffd66b;--butter:#fff1bd;--peach:#ffc3a6;--peach2:#ffe4d7;--cream:#fffaf0;--brown:#765039;--brown2:#543421;--muted:#806653;--green:#79b98d;--white:#fff;--shadow:0 18px 45px rgba(82,75,55,.12);--line:rgba(118,80,57,.14)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:"DM Sans",sans-serif;color:var(--brown2);background:#fffaf0;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.container{width:min(1120px,90%);margin:auto}.section{position:relative;padding:100px 0}.section-label{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--butter);color:#9a6928;font-size:9px;font-weight:800;letter-spacing:1.5px}.section-heading{max-width:760px;margin-bottom:48px}.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}.section-heading h2{font-family:"Playfair Display",serif;font-size:clamp(40px,6vw,70px);line-height:.98;margin:17px 0;color:var(--brown2)}.section-heading h2 em{color:#d39a4e;font-weight:600}.section-heading p{color:var(--muted);font-size:13px;line-height:1.8}

/* NAV */
.navbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1120px,92%);z-index:999;background:rgba(255,250,240,.84);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:0 12px 35px rgba(65,95,100,.14)}.nav-container{min-height:68px;padding:0 23px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{display:flex;align-items:center;gap:7px;font-family:"Playfair Display",serif;font-size:15px;font-weight:800;color:var(--brown2)}.logo-symbol{color:#efad45;font-size:19px}.logo b{color:var(--blue2)}nav{display:flex;gap:21px}nav a{font-size:10px;font-weight:800;color:var(--brown);position:relative;white-space:nowrap}nav a:after{content:"";position:absolute;left:50%;bottom:-7px;width:0;height:3px;border-radius:9px;background:var(--yellow);transform:translateX(-50%);transition:.25s}nav a:hover:after{width:70%}.menu-toggle{display:none;border:0;background:none;color:var(--brown);font-size:24px;cursor:pointer}

/* HERO */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:140px 20px 100px;background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.95),transparent 26%),radial-gradient(circle at 10% 65%,rgba(255,214,107,.35),transparent 23%),radial-gradient(circle at 90% 62%,rgba(255,195,166,.4),transparent 25%),linear-gradient(180deg,#72c6df 0%,#a7dfeb 48%,#e5f4e8 76%,#fff0cb 100%)}.hero:before{content:"";position:absolute;width:800px;height:180px;left:50%;bottom:-75px;transform:translateX(-50%);background:rgba(255,255,255,.5);border-radius:50%;filter:blur(8px)}.hero:after{content:"✦  ✿  ☁  ✿  ✦";position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.62);font-size:20px;letter-spacing:13px;white-space:nowrap}.hero-content{position:relative;z-index:5;max-width:900px}.eyebrow{display:inline-flex;padding:9px 17px;border-radius:999px;background:rgba(255,250,240,.75);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 25px rgba(75,65,48,.1);font-size:9px;font-weight:800;letter-spacing:1.6px;color:var(--brown)}.hero h1{margin-top:22px;font-family:"Playfair Display",serif;font-size:clamp(55px,10vw,125px);line-height:.84;letter-spacing:-4px;color:var(--brown);text-shadow:3px 4px 0 rgba(255,226,145,.85)}.hero h1 span{display:block;margin-top:13px;font-family:"DM Sans",sans-serif;font-size:clamp(23px,4vw,43px);line-height:1.05;letter-spacing:1px;text-shadow:none}.hero-subtitle{margin-top:25px;color:var(--brown);font-size:11px;font-weight:800;letter-spacing:3px}.hero-description{max-width:590px;margin:15px auto 28px;color:#715743;font-size:13px;line-height:1.8}.hero-buttons{display:flex;justify-content:center;gap:11px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:999px;font-size:10px;font-weight:800;transition:.25s;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#ffd46a,#f1a848);color:#60421f;border:2px solid rgba(255,255,255,.7);box-shadow:0 9px 24px rgba(237,171,69,.3)}.btn-outline{background:rgba(255,255,255,.55);color:var(--brown);border:1.5px solid rgba(118,80,57,.25)}.btn:hover{transform:translateY(-4px)}.floating-mascot{position:absolute;z-index:6;width:190px;object-fit:contain;filter:drop-shadow(0 18px 15px rgba(75,55,35,.2));animation:float 4.5s ease-in-out infinite}.mascot-left{left:1.5%;bottom:8%}.mascot-right{right:1.5%;top:20%;animation-delay:-2.2s}@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}

/* INTRO */

/* INTRO */
.intro {
    background: linear-gradient(180deg, #fff8e9, #fffdf7);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 30px;
    align-items: center;
}

/* Menggeser judul About the Festival ke kiri */
.intro-grid > div:last-child {
    transform: translateX(-35px);
}

.intro h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(42px, 6vw, 70px);
    line-height: .95;
}

.intro h2 em {
    color: #d59c4e;
}

.intro-text p {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted);
    margin-bottom: 16px;
}

/* Responsive Mobile */
@media (max-width: 700px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .intro-grid > div:last-child {
        transform: none;
    }
}


/* TIMELINE */
.timeline-section{background:radial-gradient(circle at 10% 15%,rgba(255,255,255,.85),transparent 23%),radial-gradient(circle at 90% 80%,rgba(255,207,107,.25),transparent 24%),linear-gradient(180deg,#c8edf4,#eaf7ee)}.timeline{max-width:930px;margin:auto;position:relative}.timeline:before{content:"";position:absolute;left:135px;top:0;bottom:0;width:4px;border-radius:10px;background:linear-gradient(#ffd36a,#82cde0,#ffd36a)}.timeline-item{display:grid;grid-template-columns:105px 60px 1fr;gap:15px;margin-bottom:32px}.timeline-date{text-align:right;padding-top:13px}.timeline-date strong{display:block;font-family:"Playfair Display",serif;font-size:25px;color:var(--brown)}.timeline-date span{font-size:8px;letter-spacing:1px;color:#a0836c}.timeline-dot{width:19px;height:19px;margin-top:17px;border:4px solid #eaf7ee;border-radius:50%;background:linear-gradient(135deg,#ffd66b,#efa94d);box-shadow:0 0 0 5px rgba(255,202,108,.18);z-index:2}.timeline-card{position:relative;padding:24px;background:rgba(255,250,240,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:21px;box-shadow:var(--shadow);transition:.25s}.timeline-card:hover{transform:translateY(-5px)}.timeline-tag{font-size:8px;font-weight:800;letter-spacing:1.5px;color:#d0913e}.timeline-card h3{font-family:"Playfair Display",serif;font-size:26px;margin:7px 0;color:var(--brown2)}.timeline-card>p{font-size:11px;line-height:1.75;color:var(--muted)}.timeline-item.important .timeline-card{border:2px solid rgba(255,198,89,.7);background:linear-gradient(145deg,#fff9df,#fff1d9)}.important-badge{display:inline-flex;margin-top:13px;padding:7px 10px;border-radius:999px;background:#ffe6a2;color:#936222;font-size:8px;font-weight:800;letter-spacing:1px}.highlight-box{display:grid;grid-template-columns:42px 1fr;gap:11px;margin-top:17px;padding:15px;border-radius:17px;background:linear-gradient(135deg,#fff0c6,#ffe1d5);border:1px solid rgba(255,255,255,.9)}.highlight-icon{font-size:23px}.highlight-box small{display:block;font-size:8px;color:#9b713d;font-weight:800;letter-spacing:1px}.highlight-box b{font-family:"Playfair Display",serif;font-size:18px;color:var(--brown2)}.highlight-box p{font-size:10px;color:var(--muted);line-height:1.6;margin-top:4px}.detail-button,.dc-detail-btn{display:inline-flex;margin-top:10px;padding:8px 11px;border-radius:999px;background:#fffaf0;color:#b57935;font-size:8px;font-weight:800;border:1px solid #ecd3a5}.dress-code{display:flex;gap:11px;align-items:flex-start;margin-top:17px;padding-top:15px;border-top:1px dashed #ddc79d}.dress-code>span{font-size:20px}.dress-code-content{flex:1}.dress-code-content small{display:block;color:#9b7b62;font-size:8px;font-weight:800;letter-spacing:1px}.dress-code-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.dress-code-row b{font-size:10px;color:var(--brown)}.holiday .timeline-tag{color:#5da7a8}

/* INFO */
.info-section{background:linear-gradient(180deg,#fff5d8,#ffe9d9)}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.info-card{padding:24px;border-radius:22px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);transition:.25s}.info-card:hover{transform:translateY(-6px) rotate(-.4deg)}.info-card:nth-child(2){background:rgba(223,247,250,.8)}.info-card:nth-child(3){background:rgba(255,231,218,.8)}.info-card:nth-child(4){background:rgba(255,244,203,.85)}.info-icon{font-size:28px}.info-card h3{font-family:"Playfair Display",serif;font-size:22px;margin:15px 0 8px}.info-card p{font-size:10px;color:var(--muted);line-height:1.7}.info-card a{display:inline-flex;margin-top:15px;color:#c18435;font-size:9px;font-weight:800}

/* CHECKLIST */
.checklist{background:linear-gradient(180deg,#dff7fa,#fff8e6)}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.check-card{padding:28px;border-radius:24px;background:rgba(255,250,240,.8);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}.check-card h3{font-family:"Playfair Display",serif;font-size:27px;margin-bottom:15px}.check-item{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed #e1cfaa}.check-item:last-child{border-bottom:0}.check-item input{appearance:none;width:20px;height:20px;border:2px solid #e2b45b;border-radius:7px;background:white;cursor:pointer;flex:0 0 auto}.check-item input:checked{background:#efb253;box-shadow:inset 0 0 0 4px white}.check-item label{font-size:11px;color:var(--muted);cursor:pointer}.optional{display:inline-flex;margin-left:5px;padding:2px 6px;border-radius:999px;background:#e4f4e9;color:#5e9770;font-size:7px;font-weight:800}

/* GROUPS */
.groups{background:linear-gradient(180deg,#dff7fa,#fff8e6)}.group-search{margin-bottom:22px}.group-search input{width:100%;padding:15px 20px;border:2px solid rgba(255,255,255,.85);border-radius:999px;background:rgba(255,255,255,.7);outline:none;color:var(--brown);box-shadow:0 8px 25px rgba(78,113,120,.08)}.group-search input:focus{border-color:#e9ba61}.groups-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.group-card{overflow:hidden;background:rgba(255,250,240,.86);border:1px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:var(--shadow);transition:.25s}.group-card:hover{transform:translateY(-6px)}.group-number{padding:10px 15px;background:var(--butter);color:#b27430;font-size:9px;font-weight:800;letter-spacing:2px}.group-content{padding:22px}.group-label{font-size:8px;color:#5ca8bc;font-weight:800;letter-spacing:1.5px}.group-content h3{font-family:"Playfair Display",serif;font-size:27px;margin:7px 0 18px}.member-title{display:flex;align-items:center;gap:7px;margin-bottom:10px;color:#c18435}.member-title small{font-size:8px;font-weight:800;letter-spacing:1px}.member-list{padding-left:18px;color:var(--muted);font-size:10px;line-height:1.75;min-height:128px}.mentor{display:flex;gap:10px;align-items:center;margin:17px 0;padding-top:15px;border-top:1px dashed #decaa5}.mentor>span{font-size:20px}.mentor small{display:block;font-size:7px;letter-spacing:1px;color:#9a806c}.mentor b{display:block;font-size:10px;color:var(--brown)}.group-actions{display:flex;gap:7px;flex-wrap:wrap}.whatsapp-btn,.pin-btn{display:inline-flex;padding:10px 13px;border-radius:999px;font-size:8px;font-weight:800;transition:.25s}.whatsapp-btn{background:#76b98b;color:white}.pin-btn{background:#fff1bd;color:#9a682a;border:1px solid #ecd09a}.whatsapp-btn:hover,.pin-btn:hover{transform:translateY(-2px)}.group-empty{display:none;padding:25px;text-align:center;color:var(--muted);font-size:11px;background:rgba(255,255,255,.5);border-radius:20px}

/* DOWNLOAD */
.downloads{background:linear-gradient(180deg,#fff8e8,#e0f6f8)}.download-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.download-card{position:relative;padding:27px;display:flex;gap:17px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.95);border-radius:22px;box-shadow:var(--shadow);transition:.25s}.download-card:hover{transform:translateY(-5px)}.download-card.national{background:linear-gradient(145deg,#e3f7fa,#fff9e7)}.download-card.regional{background:linear-gradient(145deg,#fff0dc,#e6f7f7)}.download-icon{font-size:31px}.download-card span{font-size:8px;color:#5ca5b8;letter-spacing:1.5px;font-weight:800}.download-card h3{font-family:"Playfair Display",serif;font-size:21px;margin:5px 0 7px}.download-card p{font-size:10px;line-height:1.7;color:var(--muted)}.caption-box{margin-top:13px;padding:12px;border-radius:13px;background:rgba(255,255,255,.65);border:1px solid rgba(118,80,57,.1);font-size:9px;line-height:1.7;color:#6f5948;white-space:pre-line;max-height:180px;overflow:auto}.download-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.download-btn,.copy-btn{display:inline-flex;padding:9px 12px;border-radius:999px;font-size:8px;font-weight:800;cursor:pointer}.download-btn{background:#fffaf0;color:#b87932;border:1px solid #e9c989}.copy-btn{border:0;background:#72b5c6;color:white}.missing{margin-top:12px;padding:10px;border-radius:12px;background:#fff1e4;color:#a06c4a;font-size:8px}.asset-note{font-size:9px!important;margin-top:9px!important;color:#a0826b!important}

/* TALENT */
.talent-section{background:linear-gradient(180deg,#dff7fa,#fff0cf)}.talent-board{position:relative;overflow:hidden;padding:70px 35px;text-align:center;background:radial-gradient(circle at 20% 30%,rgba(255,214,107,.5),transparent 22%),radial-gradient(circle at 80% 70%,rgba(255,183,156,.5),transparent 22%),linear-gradient(135deg,#72bfd7,#9edbe4);border:2px solid rgba(255,255,255,.7);border-radius:30px;box-shadow:0 25px 55px rgba(77,121,130,.2)}.talent-board:before{content:"✦  ✿  ✦  ✿  ✦";position:absolute;top:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.65);letter-spacing:12px}.talent-board h2{margin:18px 0;font-family:"Playfair Display",serif;font-size:clamp(42px,7vw,72px);line-height:.95;color:white;text-shadow:2px 3px 0 rgba(96,72,51,.15)}.talent-board h2 em{color:#fff0b5}.talent-board>p{max-width:560px;margin:0 auto 25px;color:rgba(255,255,255,.92);font-size:12px;line-height:1.8}.talent-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:28px}.talent-tags span{padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);color:white;font-size:9px}.btn-light{background:#fff8df;color:var(--brown);border:0}

/* MODAL */
.modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(65,73,68,.55);backdrop-filter:blur(8px)}.modal.show{display:flex}.modal-content{position:relative;width:min(560px,100%);max-height:90vh;overflow-y:auto;padding:34px;background:linear-gradient(145deg,#fffaf0,#fff0d0);border:2px solid rgba(255,255,255,.9);border-radius:25px;box-shadow:0 25px 70px rgba(64,55,40,.3)}.modal-content h2{font-family:"Playfair Display",serif;font-size:39px}.modal-description{margin:7px 0 24px;color:var(--muted);font-size:11px}.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;color:var(--brown);font-size:27px;cursor:pointer}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:6px;font-size:9px;font-weight:800;color:var(--brown)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:1px solid #ead3a7;border-radius:12px;background:rgba(255,255,255,.85);outline:none;color:var(--brown);font-size:11px}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#eab45b;box-shadow:0 0 0 3px rgba(234,180,91,.12)}.submit-btn{width:100%;padding:14px;border:0;border-radius:999px;background:linear-gradient(135deg,#ffca60,#f0a74b);color:#62411f;font-size:10px;font-weight:800;cursor:pointer}.form-help{font-size:8px;color:#9b816c;margin-top:6px}

/* DETAIL PAGES */
.page-shell{min-height:100vh;background:linear-gradient(180deg,#dff7fa 0%,#fff8e8 45%,#ffe7d7 100%)}.page-top{padding:145px 0 45px;text-align:center}.page-top h1{font-family:"Playfair Display",serif;font-size:clamp(45px,7vw,85px);line-height:.94;margin:17px 0;color:var(--brown2)}.page-top h1 em{color:#d39a4e}.page-top p{max-width:680px;margin:auto;color:var(--muted);font-size:12px;line-height:1.8}.back-button{display:inline-flex;margin-top:24px;padding:11px 17px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(118,80,57,.18);font-size:9px;font-weight:800;color:var(--brown)}.detail-content{padding:15px 0 90px}.detail-intro{padding:28px;border-radius:22px;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);margin-bottom:18px}.detail-intro h2{font-family:"Playfair Display",serif;font-size:28px;margin-bottom:7px}.detail-intro p{color:var(--muted);font-size:11px;line-height:1.8}.detail-list{display:grid;gap:14px}.detail-item{display:grid;grid-template-columns:65px 1fr;gap:20px;padding:25px;background:rgba(255,250,240,.8);border:1px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:var(--shadow)}.detail-number{font-family:"Playfair Display",serif;font-size:25px;color:#d1984d}.detail-item h3{font-family:"Playfair Display",serif;font-size:22px;margin-bottom:7px}.detail-item p,.detail-item li{font-size:10px;line-height:1.8;color:var(--muted)}.detail-item ul,.detail-item ol{padding-left:18px}.detail-item li{margin:5px 0}.notice{margin-top:18px;padding:18px 20px;border-radius:17px;background:#fff1c8;border:1px solid #f0d38f;color:#80613e;font-size:10px;line-height:1.7}.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.subcard{padding:22px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9)}.subcard h3{font-family:"Playfair Display",serif;font-size:20px;margin-bottom:9px}.subcard li,.subcard p{font-size:10px;line-height:1.8;color:var(--muted);margin:4px 0}.subcard ul{padding-left:17px}.date-switcher{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px}.date-switcher button{border:1px solid rgba(118,80,57,.18);background:rgba(255,255,255,.7);color:var(--brown);padding:10px 13px;border-radius:999px;font-size:8px;font-weight:800;cursor:pointer}.date-switcher button.active{background:var(--brown2);color:white}.dc-panel{display:none}.dc-panel.active{display:block}.dc-header{padding:25px;border-radius:22px;background:linear-gradient(135deg,#6ebbd2,#96d9df);color:white;margin-bottom:14px}.dc-header small{font-size:8px;letter-spacing:1.5px;font-weight:800}.dc-header h2{font-family:"Playfair Display",serif;font-size:32px;margin:6px 0}.dc-header p{font-size:10px;line-height:1.7;color:rgba(255,255,255,.9)}.dc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dc-card{padding:23px;border-radius:20px;background:rgba(255,250,240,.8);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}.dc-card.full{grid-column:1/-1}.dc-card h3{font-family:"Playfair Display",serif;font-size:21px;margin:5px 0 12px}.dc-card small{font-size:8px;letter-spacing:1.2px;color:#b17835;font-weight:800}.dc-card li{font-size:10px;line-height:1.8;color:var(--muted);margin:5px 0}.dc-card ul{padding-left:18px}.dc-notice{padding:14px;border-radius:14px;background:#fff1c8;color:#80613e;font-size:9px;line-height:1.7}

/* FOOTER */
footer{padding:42px 0;background:linear-gradient(135deg,#75bfd2,#5da8bd);color:white;border-top:4px solid #ffd56c}.footer-content{display:flex;justify-content:space-between;align-items:center}.footer-logo{color:white}.footer-logo b{color:#fff0a8}.footer-content p{margin-top:5px;color:rgba(255,255,255,.82);font-size:9px}.footer-right{display:flex;gap:18px;font-size:9px;color:rgba(255,255,255,.8)}

/* PIN PREVIEW */
.pin-modal .modal-content{text-align:center}.pin-preview{width:180px;height:180px;margin:15px auto;border-radius:32px;background:linear-gradient(145deg,#fff1bd,#ffe0d1);border:8px solid white;box-shadow:var(--shadow);display:grid;place-items:center}.pin-preview span{font-family:"Playfair Display",serif;font-size:76px;color:var(--brown2);line-height:1}.pin-preview small{position:absolute;margin-top:130px;font-size:8px;font-weight:800;letter-spacing:2px;color:#a46f38}

@media(max-width:950px){nav{gap:13px}.floating-mascot{width:145px}.info-grid{grid-template-columns:repeat(2,1fr)}.groups-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.section{padding:75px 0}.navbar{top:9px}.nav-container{min-height:60px;padding:0 17px}.menu-toggle{display:block}nav{position:absolute;top:67px;left:0;width:100%;padding:18px;display:none;flex-direction:column;gap:15px;background:rgba(255,250,240,.98);border-radius:20px;box-shadow:0 15px 35px rgba(70,70,50,.15)}nav.active{display:flex}nav a{font-size:10px}.hero{padding:120px 18px 75px}.hero h1{font-size:58px;letter-spacing:-2px}.hero h1 span{font-size:22px}.hero-buttons{flex-direction:column;width:235px;margin:auto}.floating-mascot{width:94px}.mascot-left{left:-18px;bottom:7%}.mascot-right{right:-18px;top:18%}.intro-grid,.check-grid,.download-grid,.subgrid,.dc-cards{grid-template-columns:1fr}.timeline:before{left:8px}.timeline-item{grid-template-columns:25px 1fr;gap:13px}.timeline-date{grid-column:2;text-align:left;padding:0}.timeline-dot{grid-column:1;grid-row:1 / span 2;margin-top:26px}.timeline-card{grid-column:2;padding:20px}.dress-code-row{align-items:flex-start}.info-grid,.groups-grid{grid-template-columns:1fr}.detail-item{grid-template-columns:43px 1fr;gap:12px;padding:20px}.dc-card.full{grid-column:auto}.talent-board{padding:60px 20px;border-radius:22px}.footer-content{flex-direction:column;align-items:flex-start;gap:20px}.page-top{padding-top:120px}.page-top h1{font-size:48px}.caption-box{max-height:220px}}

.download-btn.disabled{opacity:.6;cursor:not-allowed;border-style:dashed}

/* ===== SIMPLE INFO PAGES ===== */
.page-shell{max-width:1000px;margin:0 auto;padding:140px 24px 70px}
.page-hero{text-align:center;margin-bottom:28px}
.page-hero .eyebrow{letter-spacing:.14em;font-weight:800;font-size:.78rem;opacity:.75}
.page-hero h1{font-size:clamp(42px,7vw,76px);margin:8px 0 12px}
.page-hero p{max-width:680px;margin:auto;line-height:1.7;opacity:.82}
.content-card{background:rgba(255,255,255,.72);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.07);border-radius:28px;padding:32px;box-shadow:0 16px 50px rgba(0,0,0,.07)}
.content-card h2{margin-top:0}
.clean-list{padding-left:1.2rem;line-height:1.9}
.clean-list li{margin:7px 0}
.notice{margin:24px 0;padding:18px 20px;border-radius:18px;background:rgba(255,214,112,.25);line-height:1.65}
.content-card .download-btn{margin-top:6px;display:inline-flex}
@media(max-width:700px){
  .page-shell{padding:120px 16px 45px}
  .content-card{padding:23px 19px;border-radius:22px}
  .page-hero h1{font-size:44px}
  .content-card .download-btn{width:100%;justify-content:center;text-align:center}
}

/* Twibbon PDF cards */
.media-card .media-content p { line-height: 1.7; }
.media-card .btn { margin-top: 8px; display: inline-block; }

/* =========================================================
   FINAL POLISH — GROUPS & INNER PAGES
   ========================================================= */

/* Group section: cleaner, more editorial, less "Arunika" branding */
.groups .section-heading { margin-bottom: 34px; }
.group-search { max-width: 620px; margin: 0 auto 30px; }
.group-search input {
  height: 54px;
  padding: 0 22px;
  border: 1px solid rgba(121,80,57,.14);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 30px rgba(81,77,57,.08);
  font-size: 12px;
}
.group-search input::placeholder { color: #a99584; }

.groups-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
.group-card {
  min-height: 0;
  border: 1px solid rgba(121,80,57,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 35px rgba(81,77,57,.09);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.group-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(81,77,57,.13);
  border-color: rgba(77,168,196,.25);
}
.group-number {
  padding: 13px 20px;
  background: linear-gradient(90deg, #eefbfd, #fff9e8);
  border-bottom: 1px solid rgba(121,80,57,.08);
  color: #6b8790;
  font-size: 9px;
  letter-spacing: 1.7px;
}
.group-content { padding: 24px; }
.group-content > span.group-label {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f5eee5;
  color: #8b6c55;
  font-size: 8px;
  letter-spacing: 1.3px;
}
.group-content h3 {
  margin: 13px 0 18px;
  font-family: "Playfair Display", serif;
  font-size: 31px;
  line-height: 1;
  color: var(--brown-dark);
}
.member-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.member-title > span { color: #e4ad50; font-size: 14px; }
.member-title small { color: #9b8979; font-size: 8px; letter-spacing: 1.2px; font-weight: 700; }
.member-list {
  margin: 0 0 20px;
  padding-left: 22px;
  color: #6f5b4c;
  font-size: 11px;
  line-height: 1.75;
}
.member-list li { padding-left: 4px; }
.mentor {
  margin: 0 0 18px;
  padding: 13px 14px;
  border-radius: 14px;
  background: #f8fbf9;
  border: 1px solid rgba(143,200,160,.20);
}
.mentor > span { color: #79ae8b; font-size: 15px; }
.mentor b { font-size: 11px; }
.group-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.group-actions .whatsapp-btn,
.group-actions .pin-btn {
  min-height: 40px;
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 9px;
  font-weight: 700;
}
.whatsapp-btn {
  background: #79b98c;
  box-shadow: 0 7px 16px rgba(121,185,140,.18);
}
.pin-btn {
  border: 1px solid rgba(121,80,57,.14);
  background: #fff8e9;
  color: #9a6e32;
  cursor: pointer;
}
.pin-btn:hover, .whatsapp-btn:hover { transform: translateY(-2px); }

/* Inner-page header / home button */
.page-top {
  padding: 150px 0 70px !important;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.85), transparent 25%),
    radial-gradient(circle at 88% 15%, rgba(255,215,120,.28), transparent 24%),
    linear-gradient(145deg, #dff7fa 0%, #fff9e8 100%) !important;
  border-bottom: 1px solid rgba(121,80,57,.08);
}
.page-top .container { max-width: 900px; }
.page-top h1 {
  margin: 16px 0 14px;
  font-family: "Playfair Display", serif;
  font-size: clamp(45px, 7vw, 78px);
  line-height: .98;
  letter-spacing: -2px;
}
.page-top h1 em { color: #d79a4b; font-style: normal; }
.page-top p { max-width: 650px; font-size: 13px; line-height: 1.85; color: #806653; }
.back-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 11px 17px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(121,80,57,.14);
  color: #72543f;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(81,77,57,.08);
  transition: .25s ease;
}
.back-button:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 12px 28px rgba(81,77,57,.12);
}

/* Make inner page navbar logo/home feel consistent */
body:has(.page-top) .navbar { box-shadow: 0 10px 30px rgba(81,77,57,.10); }

@media (max-width: 700px) {
  .groups-grid { grid-template-columns: 1fr; gap: 14px; }
  .group-content { padding: 20px; }
  .group-content h3 { font-size: 27px; }
  .group-actions > * { flex: 1 1 145px; justify-content: center; text-align: center; }
  .page-top { padding: 125px 0 55px !important; }
  .page-top h1 { font-size: clamp(40px, 13vw, 58px); letter-spacing: -1.5px; }
  .page-top p { font-size: 11px; }
  .back-button { width: 100%; justify-content: center; }
}


/* FINAL — SOCIAL MEDIA KIT & DIRECT PIN DOWNLOADS */
.media-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.media-guide-card{background:rgba(255,255,255,.92);border:1px solid rgba(118,80,57,.12);border-radius:24px;padding:24px;box-shadow:0 12px 35px rgba(67,45,30,.07);transition:transform .2s ease,box-shadow .2s ease}
.media-guide-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(67,45,30,.11)}
.media-guide-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}.media-guide-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#fff3d7;font-size:25px;flex:none}.media-guide-top span:not(.media-guide-icon){font-size:11px;letter-spacing:.12em;font-weight:800;opacity:.62}.media-guide-top h3{margin:3px 0 0;font-size:22px}.media-guide-card>p{line-height:1.65;opacity:.78;margin:0 0 18px}.media-actions{display:flex;flex-wrap:wrap;gap:10px}.media-actions a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.media-guide-card .download-btn,.media-guide-card .copy-btn{border:0;cursor:pointer;border-radius:12px;padding:11px 14px;font-weight:800;font-size:13px}.media-guide-card .download-btn{background:#765039;color:#fff}.media-guide-card .copy-btn{background:#f3e7cf;color:#765039}.pin-guide{grid-column:1/-1}.pin-download-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.pin-download-grid a{display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(118,80,57,.16);border-radius:12px;padding:12px 8px;color:#765039;background:#fffaf1;font-weight:800;font-size:13px;transition:.2s}.pin-download-grid a:hover{background:#765039;color:#fff;transform:translateY(-2px)}
@media(max-width:800px){.media-guide-grid{grid-template-columns:1fr}.pin-guide{grid-column:auto}.pin-download-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-guide-card{padding:20px}.media-guide-top h3{font-size:20px}}
@media(max-width:420px){.pin-download-grid{grid-template-columns:1fr 1fr}.media-actions{flex-direction:column}.media-actions a{width:100%}}

/* =========================================================
   THEME BARU: MERAH MARUN • PUTIH • HITAM
   Ditambahkan sebagai override agar layout dan fungsi lama
   tetap dipertahankan.
   ========================================================= */

:root {
  --blue: #800020;
  --blue2: #650019;
  --sky: #f5e8ec;
  --yellow: #800020;
  --butter: #f3e5e9;
  --peach: #ead0d7;
  --peach2: #f7eef1;
  --cream: #ffffff;
  --brown: #800020;
  --brown2: #171717;
  --muted: #555555;
  --green: #800020;
  --white: #ffffff;
  --shadow: 0 18px 45px rgba(23, 23, 23, .10);
  --line: rgba(128, 0, 32, .16);
}

body {
  color: #171717;
  background: #ffffff;
}

/* Navigasi */
.navbar {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(128, 0, 32, .18);
  box-shadow: 0 12px 35px rgba(23, 23, 23, .12);
}
.logo, .logo b, nav a, .menu-toggle { color: #800020; }
.logo-symbol { color: #171717; }
nav a:after { background: #800020; }

/* Hero utama */
.hero {
  background:
    radial-gradient(circle at 50% 28%, rgba(153, 151, 151, 0.98), transparent 27%),
    radial-gradient(circle at 10% 65%, rgba(128,0,32,.13), transparent 25%),
    radial-gradient(circle at 90% 62%, rgba(23,23,23,.10), transparent 25%),
    linear-gradient(180deg, #410010 0%, #5a0017 42%, #f5e8ec 76%, #ffffff 100%);
}
.hero h1 { color: #ffffff; text-shadow: 3px 4px 0 rgba(23,23,23,.22); }
.hero h1 span, .hero-subtitle { color: #ffffff; }
.hero-description { color: #171717; }
.eyebrow {
  color: #800020;
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.9);
}
.btn-primary {
  background: #800020;
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 9px 24px rgba(128,0,32,.22);
}
.btn-outline {
  background: rgba(255,255,255,.88);
  color: #800020;
  border-color: rgba(128,0,32,.3);
}

/* Judul dan label section */
.section-label {
  background: #f3e5e9;
  color: #800020;
}
.section-heading h2, .intro h2 { color: #171717; }
.section-heading h2 em, .intro h2 em { color: #800020; }
.section-heading p, .intro-text p { color: #555555; }

/* Latar setiap bagian */
.intro,
.downloads,
.page-shell {
  background: #ffffff;
}
.timeline-section,
.groups,
.checklist,
.talent-section,
.info-section {
  background: linear-gradient(180deg, #ffffff 0%, #f7eef1 100%);
}

/* Timeline dan kartu informasi */
.timeline:before { background: linear-gradient(#800020, #171717, #800020); }
.timeline-date strong { color: #800020; }
.timeline-date span { color: #555555; }
.timeline-dot {
  border-color: #ffffff;
  background: #800020;
  box-shadow: 0 0 0 5px rgba(128,0,32,.12);
}
.timeline-card,
.info-card,
.check-card,
.group-card,
.download-card,
.dc-card,
.detail-item,
.detail-intro,
.subcard {
  background: #ffffff;
  border-color: rgba(128,0,32,.14);
}
.timeline-tag, .info-card a, .download-card span,
.group-label, .member-title, .detail-number,
.dc-card small {
  color: #800020;
}
.timeline-card h3, .info-card h3, .check-card h3,
.group-content h3, .download-card h3, .detail-item h3,
.detail-intro h2, .subcard h3, .dc-card h3 {
  color: #171717;
}
.timeline-card > p, .info-card p, .check-item label,
.download-card p, .detail-item p, .detail-item li,
.detail-intro p, .subcard p, .subcard li, .member-list {
  color: #555555;
}
.timeline-item.important .timeline-card {
  border-color: rgba(128,0,32,.45);
  background: linear-gradient(145deg, #ffffff, #f5e8ec);
}
.important-badge, .highlight-box {
  background: #f3e5e9;
  color: #800020;
}
.highlight-box b, .highlight-box p,
.highlight-box small { color: #800020; }
.detail-button, .dc-detail-btn {
  background: #800020;
  color: #ffffff;
  border-color: #800020;
}
.dress-code { border-color: rgba(128,0,32,.25); }

/* Kartu informasi dan checklist */
.info-card:nth-child(n) { background: #ffffff; }
.check-item { border-color: rgba(128,0,32,.18); }
.check-item input { border-color: #800020; }
.check-item input:checked { background: #800020; }
.optional {
  background: #f3e5e9;
  color: #800020;
}

/* Pencarian dan kartu kelompok */
.group-search input {
  border-color: rgba(128,0,32,.22);
  background: #ffffff;
  color: #171717;
}
.group-search input:focus { border-color: #800020; }
.group-search input::placeholder { color: #777777; }
.group-number {
  background: #800020;
  color: #ffffff;
  border-color: rgba(255,255,255,.2);
}
.group-content > span.group-label {
  background: #f3e5e9;
  color: #800020;
}
.mentor {
  background: #f7eef1;
  border-color: rgba(128,0,32,.16);
}
.mentor > span, .mentor b { color: #800020; }
.mentor small { color: #555555; }
.whatsapp-btn {
  background: #800020;
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(128,0,32,.16);
}
.pin-btn {
  background: #ffffff;
  color: #800020;
  border-color: rgba(128,0,32,.25);
}
.group-empty { color: #555555; }

/* Download dan media kit */
.download-card.national,
.download-card.regional {
  background: linear-gradient(145deg, #ffffff, #f5e8ec);
}
.caption-box {
  background: #f7eef1;
  border-color: rgba(128,0,32,.14);
  color: #333333;
}
.download-btn, .media-guide-card .download-btn {
  background: #800020;
  color: #ffffff;
  border-color: #800020;
}
.copy-btn, .media-guide-card .copy-btn {
  background: #171717;
  color: #ffffff;
}
.missing {
  background: #f3e5e9;
  color: #800020;
}
.asset-note { color: #555555 !important; }
.media-guide-card {
  background: #ffffff;
  border-color: rgba(128,0,32,.15);
}
.media-guide-icon {
  background: #f3e5e9;
  color: #800020;
}
.pin-download-grid a {
  color: #800020;
  background: #ffffff;
  border-color: rgba(128,0,32,.2);
}
.pin-download-grid a:hover {
  background: #800020;
  color: #ffffff;
}

/* Panel bakat */
.talent-board {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.16), transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(23,23,23,.18), transparent 22%),
    linear-gradient(135deg, #800020, #171717);
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 25px 55px rgba(23,23,23,.18);
}
.talent-board h2 { color: #ffffff; }
.talent-board h2 em { color: #f3e5e9; }
.talent-board > p { color: rgba(255,255,255,.9); }
.talent-tags span {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  color: #ffffff;
}
.btn-light {
  background: #ffffff;
  color: #800020;
}

/* Modal dan formulir */
.modal { background: rgba(23,23,23,.68); }
.modal-content {
  background: #ffffff;
  border-color: rgba(128,0,32,.22);
}
.modal-content h2 { color: #171717; }
.modal-description, .form-help { color: #555555; }
.modal-close, .form-group label { color: #800020; }
.form-group input, .form-group select, .form-group textarea {
  border-color: rgba(128,0,32,.22);
  background: #ffffff;
  color: #171717;
}
.form-group input:focus, .form-group select:focus,
.form-group textarea:focus {
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128,0,32,.10);
}
.submit-btn {
  background: #800020;
  color: #ffffff;
}

/* Halaman detail dan halaman dalam */
.page-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f7eef1 100%);
}
.page-top {
  background:
    radial-gradient(circle at 15% 30%, rgba(128,0,32,.08), transparent 25%),
    radial-gradient(circle at 88% 15%, rgba(23,23,23,.06), transparent 24%),
    linear-gradient(145deg, #ffffff 0%, #f3e5e9 100%) !important;
  border-color: rgba(128,0,32,.12);
}
.page-top h1 { color: #171717; }
.page-top h1 em { color: #800020; }
.page-top p { color: #555555; }
.back-button {
  background: #ffffff;
  border-color: rgba(128,0,32,.2);
  color: #800020;
}
.back-button:hover { background: #f3e5e9; }
.content-card {
  background: #ffffff;
  border-color: rgba(128,0,32,.14);
}
.clean-list { color: #333333; }
.notice, .dc-notice {
  background: #f3e5e9;
  border-color: rgba(128,0,32,.18);
  color: #650019;
}
.date-switcher button {
  background: #ffffff;
  border-color: rgba(128,0,32,.2);
  color: #800020;
}
.date-switcher button.active {
  background: #800020;
  color: #ffffff;
}
.dc-header {
  background: linear-gradient(135deg, #800020, #171717);
  color: #ffffff;
}

/* Footer */
footer {
  background: linear-gradient(135deg, #800020, #171717);
  color: #ffffff;
  border-top-color: #ffffff;
}
.footer-logo, .footer-logo b,
.footer-content p, .footer-right { color: #ffffff; }

/* Preview PIN */
.pin-preview {
  background: linear-gradient(145deg, #f3e5e9, #ffffff);
  border-color: #ffffff;
}
.pin-preview span { color: #800020; }
.pin-preview small { color: #555555; }

/* Navigasi mobile */
@media(max-width:700px) {
  nav {
    background: rgba(255,255,255,.98);
    box-shadow: 0 15px 35px rgba(23,23,23,.14);
  }
}
/* BACK TO TOP BUTTON */
.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 20px;

    background: #7D4059;
    color: #FFFFFF;

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

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;

    cursor: pointer;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(15px);
    transition: all 0.3s ease;

    box-shadow: 0 5px 18px rgba(75, 30, 48, 0.25);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.back-icon {
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
}

.back-to-top:hover {
    background: #633247;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(75, 30, 48, 0.35);
}

@media (max-width: 768px) {
    .back-to-top {
        right: 18px;
        bottom: 18px;
        padding: 11px 17px;
        font-size: 12px;
    }
}
.intro-text h2 {
    margin-left: 80px;
}

/* INTRO SECTION */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 75px;
    row-gap: 30px;
}

/* Responsive */
@media (max-width: 768px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

/* LINK PETA LOKASI */
.location-map-link {
    display: inline-block;
    margin-top: 8px;
    color: #800020;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.location-map-link:hover {
    color: #171717;
    transform: translateX(5px);
    text-decoration: underline;
}
/* INFORMASI WAKTU & TEMPAT */
.location-info {
    width: 100%;
    min-width: 0;
}

/* LINK PETA */
.location-map-link {
    display: inline-block;
    margin-top: 8px;
    margin-bottom: 12px;
    color: #800020;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.location-map-link:hover {
    color: #171717;
    transform: translateX(4px);
}

/* GAMBAR PREVIEW PETA */
.location-map-preview {
    width: 100%;
    max-width: 300px;
    height: 170px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(128, 0, 32, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.location-map-preview a {
    display: block;
    width: 100%;
    height: 100%;
}

.location-map-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.location-map-preview:hover img {
    transform: scale(1.04);
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .location-map-preview {
        max-width: 100%;
        height: 180px;
    }
}
/* TOPENG TRANSPARAN PADA HALAMAN UTAMA */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1600px, 200vw);
    height: auto;
    opacity: 0.18;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

/* Konten utama tetap berada di depan */
.hero-content {
    position: relative;
    z-index: 3;
}

/* Tampilan Mobile */
@media (max-width: 768px) {
    .hero-mask {
        width: 200vw;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.12;
    }
}
/* ===== SIDEBAR & COUNTDOWN — Cirebon Mask Festival ===== */

:root{
  --cmf-ink:#2a1712;
  --cmf-ink-soft:#3b231b;
  --cmf-gold:#fbf7f7;
  --cmf-cream:#f6ead3;
  --cmf-red:#9e2b25;
}

/* Tombol buka sidebar: melayang di pojok kiri atas */
.sidebar-toggle{
  position:fixed;top:16px;left:16px;z-index:999;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;
  border:2px solid var(--cmf-gold);border-radius:12px;
  background:rgba(42,23,18,.9);color:var(--cmf-gold);
  font-size:24px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.sidebar-toggle:hover{background:var(--cmf-ink);color:#fff;}
.sidebar-toggle:focus-visible,.sidebar-close:focus-visible,.sidebar a:focus-visible{
  outline:2px solid var(--cmf-gold);outline-offset:3px;
}

/* Sidebar */
.sidebar{
  position:fixed;top:0;left:0;z-index:1001;
  width:min(280px,82vw);height:100%;
  background:var(--cmf-ink);color:var(--cmf-cream);
  border-right:3px solid var(--cmf-gold);
  padding:24px 18px;display:flex;flex-direction:column;gap:6px;
  transform:translateX(-105%);transition:transform .3s ease;
  overflow-y:auto;
}
body.sidebar-open .sidebar{transform:translateX(0);}
.sidebar-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:16px;margin-bottom:10px;
  border-bottom:1px solid rgba(217,164,65,.35);
}
.sidebar-title{font-weight:700;font-size:17px;color:var(--cmf-gold);}
.sidebar-close{
  width:36px;height:36px;border:none;border-radius:8px;
  background:var(--cmf-ink-soft);color:var(--cmf-cream);
  font-size:22px;line-height:1;cursor:pointer;
}
.sidebar a{
  display:block;padding:12px 14px;border-radius:8px;
  color:var(--cmf-cream);text-decoration:none;font-size:15px;
  border-left:3px solid transparent;
}
.sidebar a:hover,.sidebar a.active{
  background:var(--cmf-ink-soft);border-left-color:var(--cmf-gold);color:#fff;
}
.sidebar-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .3s ease;
}
body.sidebar-open .sidebar-overlay{opacity:1;visibility:visible;}
body.sidebar-open{overflow:hidden;}

/* Countdown: bar panjang di beranda */
.hero-content .countdown{
  width:100%;max-width:960px;box-sizing:border-box;
  margin:36px auto 0;padding:18px 24px;border-radius:16px;
  background:rgba(42,23,18,.88);color:var(--cmf-cream);
  border:2px solid var(--cmf-gold);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  text-align:left;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.countdown-info{display:flex;align-items:center;gap:16px;min-width:0;}
.countdown-h{
  flex-shrink:0;padding:8px 16px;border-radius:999px;
  background:var(--cmf-red);color:#fff;font-weight:700;font-size:18px;white-space:nowrap;
}
.hero-content .countdown h3{margin:0 0 2px;font-size:17px;line-height:1.3;color:var(--cmf-gold);}
.hero-content .countdown p{margin:0;font-size:13px;opacity:.85;color:var(--cmf-cream);}
.countdown-grid{display:flex;gap:10px;flex-shrink:0;}
.countdown-box{
  min-width:68px;padding:8px 6px;border-radius:10px;text-align:center;
  background:var(--cmf-ink-soft);border:1px solid rgba(217,164,65,.3);
}
.countdown-box strong{
  display:block;font-size:28px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums;
}
.countdown-box span{font-size:12px;color:var(--cmf-gold);}
@media (max-width:768px){
  .hero-content .countdown{flex-direction:column;align-items:stretch;gap:14px;padding:16px;}
  .countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .countdown-box{min-width:0;}
  .countdown-box strong{font-size:24px;}
}
@media (prefers-reduced-motion:reduce){
  .sidebar,.sidebar-overlay{transition:none;}
}
/* ===== LOGO SPONSOR: TENGAH ATAS, SEJAJAR TOMBOL SIDEBAR ===== */
.hero-logo {
  position: absolute;
  top: 16px;                      /* sama dengan top tombol sidebar */
  left: 50%;
  transform: translateX(-50%);    /* posisi tepat di tengah, di atas "CMF 2026" */
  height: 48px;                   /* sama dengan tinggi tombol sidebar */
  width: auto;
  max-width: calc(100% - 160px);  /* supaya tidak menabrak tombol sidebar */
  margin: 0;
  object-fit: contain;
  z-index: 6;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25));
}

@media (max-width: 768px) {
  .hero-logo {
    top: 20px;
    height: 40px;                 /* tetap segaris tengah dengan tombol sidebar */
  }
}

/* ===== COUNTDOWN: LEBAR TETAP, DIPANJANGKAN KE BAWAH ===== */
.hero-content .countdown {
  min-height: 200px;          /* atur angka ini untuk tinggi kotak */
  padding: 36px 32px;
}

/* Kotak angka ikut lebih tinggi */
.countdown-box {
  min-width: 80px;
  padding: 18px 8px;
}

.countdown-box strong {
  font-size: 36px;
}

.countdown-box span {
  font-size: 13px;
}

/* Kurangi ruang kosong di bawah hero supaya kotak mendekati batas background */
.hero {
  padding-bottom: 50px;
}

@media (max-width: 768px) {
  .hero-content .countdown {
    min-height: 0;
    padding: 24px 18px;
  }

  .countdown-box {
    padding: 14px 6px;
  }

  .countdown-box strong {
    font-size: 28px;
  }
}
/* ===== ISI TEKS INTRO: RATA KANAN-KIRI (JUSTIFY) ===== */
.intro-text p {
  text-align: justify;
  text-justify: inter-word;
}
/* ===== WAKTU & TEMPAT: JARAK ANTARBARIS DIRAPATKAN ===== */
.intro-text.location-info p {
  margin-bottom: 4px;       /* sebelumnya 16px */
  line-height: 1.6;         /* sebelumnya 1.9 */
}

.intro-text.location-info .location-map-link {
  margin-top: 14px;         /* jarak dari teks ke link peta */
  margin-bottom: 10px;      /* jarak dari link ke gambar peta */
}
/* ===== BAR PUTIH KECIL, PAS DENGAN LOGO ===== */
.hero-topbar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);        /* posisi tepat di tengah */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 22px;                  /* tinggi total 80px = sejajar tombol sidebar */
  background: #ffffff;
  border-radius: 0 0 18px 18px;       /* sudut bawah membulat, seperti tab */
  border: 2px solid #800020;
  border-top: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  z-index: 6;
}

/* Logo sedikit diperbesar */
.hero-topbar .hero-logo {
  position: static;
  transform: none;
  display: block;
  height: 68px;                       /* sebelumnya 60px */
  width: auto;
  max-width: calc(100vw - 180px);     /* supaya tidak menabrak tombol sidebar */
  object-fit: contain;
  filter: none;
}

@media (max-width: 768px) {
  .hero-topbar {
    padding: 12px 16px;
  }

  .hero-topbar .hero-logo {
    height: 56px;
    max-width: calc(100vw - 140px);
  }
}
/* ===== BAR LOGO TRANSPARAN (EFEK KACA) ===== */
.hero-topbar {
  background: rgba(255, 255, 255, 0.53);        /* putih transparan */
  backdrop-filter: blur(10px);                  /* efek kaca buram */
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, .45); /* bingkai putih tipis */
  border-top: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
/* ===== LOGO DI BAR DIPERBESAR ===== */
.hero-topbar {
  padding: 4px 26px;              /* ruang atas-bawah dikecilkan, kiri-kanan sedikit dilebarkan */
}

.hero-topbar .hero-logo {
  height: 90px;                   /* sebelumnya 68px — ubah angka ini sesuai selera */
}

@media (max-width: 768px) {
  .hero-topbar {
    padding: 6px 16px;
  }

  .hero-topbar .hero-logo {
    height: 100px;                 /* ukuran logo di HP */
  }
}
/* ===== HANYA LOGO YANG DIPERBESAR, BAR TETAP ===== */
.hero-topbar .hero-logo {
  transform: scale(1.3);          /* 1.3 = 130% dari ukuran semula */
  transform-origin: center;
}

@media (max-width: 768px) {
  .hero-topbar .hero-logo {
    transform: scale(1.2);        /* sedikit lebih kecil untuk HP */
  }
}
/* ===== BAR LOGO: LEBIH LEBAR, LEBIH PENDEK ===== */
.hero-topbar {
  padding: 4px 80px;              /* atas-bawah 4px (pendek), kiri-kanan 80px (lebar) */
  border-radius: 0 0 22px 22px;
}

.hero-topbar .hero-logo {
  height: 60px;                   /* tinggi logo dikurangi supaya bar lebih pendek */
  transform: scale(1.3);          /* logo tetap terlihat besar */
}

/* Tombol sidebar disesuaikan agar tetap sejajar dengan bar */
.sidebar-toggle {
  top: 10px;
}

@media (max-width: 768px) {
  .hero-topbar {
    padding: 0px 25px;            /* di HP tidak terlalu lebar agar tidak menabrak tombol menu */
  }

  .hero-topbar .hero-logo {
    height: 100px;
    transform: scale(1.2);
  }

  .sidebar-toggle {
    top: 5px;
  }
}
/* ===== BAR LOGO DIBERI JARAK DARI ATAS ===== */
.hero-topbar {
  top: 12px;                                     /* jarak dari tepi atas layar */
  border-radius: 22px;                           /* semua sudut membulat */
  border-top: 1.5px solid rgba(255, 255, 255, .45); /* bingkai atas dimunculkan lagi */
}

/* Tombol sidebar disesuaikan agar tetap sejajar dengan bar */
.sidebar-toggle {
  top: 22px;
}

@media (max-width: 768px) {
  .hero-topbar {
    top: 10px;
  }

  .sidebar-toggle {
    top: 15px;
  }
}
/* ===== LOGO DIPERBESAR (BAR TETAP) ===== */
.hero-topbar .hero-logo {
  transform: scale(3.0);        /* sebelumnya 1.3 */
}

@media (max-width: 768px) {
  .hero-topbar .hero-logo {
    transform: scale(3.0);      /* sebelumnya 1.2, untuk tampilan HP */
  }
}
/* ===== MEGA MENDUNG: DIPERBESAR + TAMBAHAN 2 ===== */
.floating-mascot {
  width: 400px;                 /* sebelumnya 190px */
}

/* Posisi 2 mega mendung tambahan */
.mascot-left-top {
  left: 0.05%;
  top: 16%;
  animation-delay: -1.2s;       /* gerakan melayang tidak serempak */
}

.mascot-right-bottom {
  right: 0.1%;
  bottom: 10%;
  animation-delay: -3.4s;
}

@media (max-width: 950px) {
  .floating-mascot {
    width: 180px;
  }
}

@media (max-width: 700px) {
  .floating-mascot {
    width: 110px;
  }

  .mascot-left-top {
    left: -18px;
    top: 12%;
  }

  .mascot-right-bottom {
    right: -18px;
    bottom: 6%;
  }
}
/* ===== ISI KARTU EXPLORE THE FESTIVAL: RATA KANAN-KIRI ===== */
.info-card p {
  text-align: justify;
  text-justify: inter-word;
}
/* ===== EXPLORE THE FESTIVAL: 2 KOLOM + FOTO ===== */
.info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.info-card {
  padding: 0;                    /* foto menempel penuh ke tepi kotak */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Foto di bagian atas kotak */
.info-card-img {
  display: block;
  width: 100%;
  height: 240px;                 /* tinggi foto, ubah sesuai selera */
  object-fit: cover;             /* foto dipotong rapi, tidak gepeng */
  background: #f3e5e9;           /* warna sementara jika foto belum ada */
}

/* Isi teks di bawah foto */
.info-card-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.info-card-body h3 {
  margin: 0 0 10px;
  font-size: 26px;
}

.info-card-body p {
  font-size: 12px;               /* sedikit lebih besar karena kotak lebih lebar */
  line-height: 1.8;
}

.info-card-body a {
  margin-top: auto;              /* link selalu di bagian bawah kotak */
  padding-top: 16px;
  font-size: 10px;
}

/* HP: 1 kolom */
@media (max-width: 700px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .info-card-img {
    height: 200px;
  }

  .info-card-body {
    padding: 20px;
  }

  .info-card-body h3 {
    font-size: 22px;
  }
}
/* ===== SLIDER FOTO DI KOTAK EXPLORE THE FESTIVAL ===== */
.info-slider {
  position: relative;
}

.info-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;     /* foto berhenti pas satu per satu */
  scroll-behavior: smooth;
  scrollbar-width: none;             /* sembunyikan scrollbar (Firefox) */
}

.info-slides::-webkit-scrollbar {
  display: none;                     /* sembunyikan scrollbar (Chrome/Edge) */
}

.info-slides img {
  flex: 0 0 100%;
  width: 100%;
  height: 240px;                     /* tinggi foto */
  object-fit: cover;
  scroll-snap-align: start;
  background: #f3e5e9;
  display: block;
}

/* Tombol panah kiri-kanan */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: #800020;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  opacity: 0;                        /* muncul saat kotak disorot mouse */
  transition: opacity .25s ease, background .25s ease;
  z-index: 2;
}

.slide-btn.prev { left: 12px; }
.slide-btn.next { right: 12px; }

.info-slider:hover .slide-btn { opacity: 1; }
.slide-btn:hover { background: #ffffff; }

/* Di HP (layar sentuh) tombol selalu terlihat */
@media (hover: none) {
  .slide-btn { opacity: 1; }
}

/* Titik penanda foto */
.slide-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}

.slide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.slide-dot.active {
  width: 22px;                       /* titik aktif memanjang */
  background: #ffffff;
}

/* Kotak dengan 1 foto: tanpa tombol & titik */
.info-slider.single .slide-btn,
.info-slider.single .slide-dots {
  display: none;
}

@media (max-width: 700px) {
  .info-slides img { height: 200px; }
}
/* ===== SLIDER: PENDUKUNG ANIMASI HALUS ===== */
.info-slides {
  scroll-behavior: auto;            /* animasi diatur oleh script, bukan browser */
}

.info-slides.is-animating {
  scroll-snap-type: none;           /* snap dimatikan sementara agar gerakan tidak tersendat */
}

/* Titik penanda berubah lebih lembut */
.slide-dot {
  transition: width .5s ease, background .5s ease;
}
/* =========================================================
   RUNDOWN ACARA (dc.html) — GARIS WAKTU ELEGAN
   ========================================================= */

/* ---------- Pilihan hari: kapsul tab ---------- */
.date-switcher {
  width: fit-content;
  margin: 0 auto 36px;
  padding: 6px;
  gap: 4px;
  background: #ffffff;
  border: 1px solid rgba(128, 0, 32, .14);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(80, 0, 20, .08);
}

.date-switcher button {
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #6b4a52;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: background .3s ease, color .3s ease;
}

.date-switcher button:hover {
  color: #800020;
}

.date-switcher button.active {
  background: #800020;
  color: #ffffff;
}

.date-switcher button:focus-visible {
  outline: 2px solid #800020;
  outline-offset: 2px;
}

/* ---------- Header hari ---------- */
.dc-panel .dc-header {
  max-width: 860px;
  margin: 0 auto 40px;
  padding: 38px 44px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .10), transparent 35%),
    #5a0017;
  box-shadow: 0 24px 50px rgba(90, 0, 23, .22);
}

.dc-panel .dc-header small {
  font-size: 11px;
  letter-spacing: .8px;
  opacity: .8;
}

.dc-panel .dc-header h2 {
  margin: 10px 0 8px;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.05;
}

.dc-panel .dc-header p {
  font-size: 13px;
  max-width: 520px;
}

/* Pergantian hari terasa halus */
.dc-panel.active {
  animation: rundownFade .45s ease both;
}

@keyframes rundownFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Garis waktu ---------- */
.rundown {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 6px;
}

/* Garis vertikal */
.rundown::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 140px;
  width: 2px;
  background: linear-gradient(rgba(128, 0, 32, .05), rgba(128, 0, 32, .28) 10%, rgba(128, 0, 32, .28) 90%, rgba(128, 0, 32, .05));
}

.rundown-item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  align-items: start;
  padding: 10px 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.rundown-item:hover {
  transform: none;
}

/* Titik penanda di garis */
.rundown-item::before {
  content: "";
  position: absolute;
  left: 134px;
  top: 30px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #800020;
  box-sizing: border-box;
  z-index: 1;
}

.rundown-item.highlight::before {
  background: #800020;
  box-shadow: 0 0 0 5px rgba(128, 0, 32, .14);
}

/* Jam di sisi kiri */
.rundown-time {
  padding-top: 16px;
  text-align: right;
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: #800020;
  font-variant-numeric: lining-nums;
}

.rundown-time small {
  display: block;
  margin-top: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #8a7a7e;
}

/* Panel isi acara */
.rundown-item > div:last-child {
  padding: 20px 26px 22px;
  background: #ffffff;
  border: 1px solid rgba(128, 0, 32, .10);
  border-radius: 18px;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.rundown-item:hover > div:last-child {
  border-color: rgba(128, 0, 32, .28);
  box-shadow: 0 14px 32px rgba(80, 0, 20, .08);
}

.rundown-item h3 {
  margin: 0 0 6px;
  font-family: "Playfair Display", serif;
  font-size: 22px;
  line-height: 1.2;
  color: #171717;
}

.rundown-item p {
  margin: 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.75;
  color: #5b5054;
}

.rundown-place {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f7eef1;
  color: #800020;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Acara utama: panel marun penuh ---------- */
.rundown-item.highlight > div:last-child {
  background: #800020;
  border-color: #800020;
  box-shadow: 0 18px 40px rgba(128, 0, 32, .22);
}

.rundown-item.highlight h3 {
  color: #ffffff;
}

.rundown-item.highlight p {
  color: rgba(255, 255, 255, .82);
}

.rundown-item.highlight .rundown-place {
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
}

/* ---------- Tampilan HP ---------- */
@media (max-width: 700px) {
  .date-switcher {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .date-switcher button {
    padding: 11px 10px;
    font-size: 11px;
  }

  .dc-panel .dc-header {
    padding: 28px 24px;
    border-radius: 20px;
  }

  .rundown::before {
    left: 6px;
  }

  .rundown-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 0 10px 30px;
  }

  .rundown-item::before {
    left: 0;
    top: 14px;
  }

  .rundown-time {
    padding-top: 0;
    text-align: left;
    font-size: 24px;
  }

  .rundown-time small {
    display: inline;
    margin-left: 8px;
  }

  .rundown-item > div:last-child {
    padding: 18px 20px;
  }

  .rundown-item h3 {
    font-size: 19px;
  }
}
/* ===== SOCIAL MEDIA: IKON INSTAGRAM & TIKTOK ===== */
.social-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-icon {
  width: 44px;                 /* ukuran ikon */
  height: 44px;
  object-fit: contain;         /* logo tidak gepeng */
  flex-shrink: 0;
}

.social-handle {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #800020;
}

.social-desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: #555555;
}

.social-btn {
  display: inline-flex;
  margin-top: 18px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #800020;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  transition: background .25s ease;
}

.social-btn:hover {
  background: #5a0017;
}

@media (max-width: 700px) {
  .social-icon {
    width: 38px;
    height: 38px;
  }
}
/* ===== SUPPORTED BY, SPONSOR & MEDIA PARTNER ===== */
.partner-board {
  padding: 60px 35px 70px;
}

.partner-group {
  margin-top: 42px;
}

/* Judul kelompok dengan garis di kiri-kanan */
.partner-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.partner-title::before,
.partner-title::after {
  content: "";
  flex: 1;
  max-width: 130px;
  height: 1px;
  background: rgba(255, 255, 255, .35);
}

/* Susunan logo */
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Kotak putih tiap logo */
.partner-logo {
  width: 160px;
  height: 90px;
  padding: 14px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}

.partner-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25);
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;     /* logo tidak gepeng */
}

/* Supported By: logo lebih besar */
.partner-logos.lg .partner-logo {
  width: 200px;
  height: 115px;
}

/* Media Partner: logo lebih kecil */
.partner-logos.sm .partner-logo {
  width: 125px;
  height: 72px;
  padding: 10px;
}

/* Tampilan HP */
@media (max-width: 700px) {
  .partner-board {
    padding: 50px 18px 55px;
  }

  .partner-logos {
    gap: 10px;
  }

  .partner-logo,
  .partner-logos.lg .partner-logo {
    width: calc(50% - 5px);      /* 2 logo per baris */
    height: 85px;
  }

  .partner-logos.sm .partner-logo {
    width: calc(33.33% - 7px);   /* 3 logo per baris */
    height: 62px;
    padding: 8px;
  }

  .partner-title::before,
  .partner-title::after {
    max-width: 50px;
  }
}
/* ===== LOGO PARTNER: UKURAN SEDANG & RAPI ===== */
.partner-logos,
.partner-logos.lg,
.partner-logos.sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto;
}

.partner-logo,
.partner-logos.lg .partner-logo,
.partner-logos.sm .partner-logo {
  width: auto;
  height: 100px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* logo tidak bisa keluar kotak */
}

.partner-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* logo utuh, tidak gepeng */
}

.partner-logo.is-missing {
  display: none;
}

@media (max-width: 700px) {
  .partner-logos,
  .partner-logos.lg,
  .partner-logos.sm {
    grid-template-columns: repeat(3, 1fr);   /* 3 logo per baris di HP */
    gap: 8px;
  }

  .partner-logo,
  .partner-logos.lg .partner-logo,
  .partner-logos.sm .partner-logo {
    width: auto;
    height: 72px;
    padding: 8px;
  }
}
/* Latar solid menjaga logo gelap tetap terbaca di bagian partner yang marun. */
.partner-logo,
.partner-logos.lg .partner-logo,
.partner-logos.sm .partner-logo {
  background: var(--partner-logo-surface, #ffffff);
  box-shadow: 0 4px 12px rgba(35, 0, 10, .12);
  border: 1px solid #e7d6dc;
}

/* Logo dengan tulisan putih memerlukan bidang gelap agar detailnya tetap utuh. */
.partner-logo.partner-logo--dark {
  --partner-logo-surface: #35101e;
  border-color: rgba(255, 255, 255, .3);
}

.partner-logo.partner-logo--hexadesain {
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.partner-logo--hexadesain img {
  height: calc(100% - 18px);
  min-height: 0;
}

.partner-brand-name {
  flex-shrink: 0;
  color: #20212a;
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: .02em;
}

.partner-logo:hover {
  background: var(--partner-logo-surface, #ffffff);
  box-shadow: 0 10px 22px rgba(35, 0, 10, .2);
}
/* ===== TOPBAR: LOGO + 2 FOTO BERJEJER ===== */
.hero-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;                          /* jarak antar gambar */
  max-width: calc(100vw - 150px);     /* tidak menabrak tombol menu */
}

.hero-topbar > img {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  height: 70px;                       /* tinggi semua gambar, atur sesuai selera */
  width: auto;
  max-width: none;
  object-fit: contain;
  transform: none;                    /* matikan scale lama agar tidak saling tumpuk */
}

@media (max-width: 768px) {
  .hero-topbar {
    gap: 10px;
    padding: 6px 14px;
  }

  .hero-topbar > img {
    height: 44px;
  }
}
/* ===== TOPBAR: JARAK LEBIH LEGA + LOGO KANAN DIKECILKAN ===== */
.hero-topbar {
  gap: 55px;                          /* jarak antar logo, makin besar makin renggang */
  padding: 8px 40px;
}

/* Logo kanan dikecilkan */
.hero-topbar > img:last-child {
  height: 50px;                       /* sebelumnya 70px, atur sesuai selera */
}

@media (max-width: 768px) {
  .hero-topbar {
    gap: 16px;
    padding: 6px 14px;
  }

  .hero-topbar > img:last-child {
    height: 32px;
  }
}
/* ===== KARTU UNDANGAN DI SOCIAL MEDIA KIT ===== */
.undangan-guide{
  grid-column:1/-1;
  background:linear-gradient(135deg,#800020,#2b000b) !important;
  border-color:#800020 !important;
  color:#fff;
}
.undangan-guide .media-guide-icon{background:rgba(255,255,255,.15)}
.undangan-guide .media-guide-top span:not(.media-guide-icon){color:#fff;opacity:.75}
.undangan-guide h3{color:#fff}
.undangan-guide > p{color:rgba(255,255,255,.88);opacity:1}
.undangan-guide .download-btn{background:#fff !important;color:#800020 !important}
.undangan-guide .copy-btn{background:rgba(255,255,255,.15) !important;color:#fff !important;border:1px solid rgba(255,255,255,.35)}
@media(max-width:800px){.undangan-guide{grid-column:auto}}
/* ===== LINE UP ARTIS (1 KOTAK SLIDER) ===== */
.lineup-box {
  max-width: 520px;
  margin: 40px auto 0;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #f0dde2;
  box-shadow: 0 14px 40px rgba(122, 0, 32, 0.12);
}

.lineup-stage {
  position: relative;
  aspect-ratio: 1080 / 1350;
  background: #f6e9ec;
  overflow: hidden;
}
.lineup-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(100%);          /* posisi awal di luar kotak (kanan) */
  transition: transform .9s cubic-bezier(.65, 0, .35, 1);  /* gerak halus */
  will-change: transform;
}
.lineup-slides img.is-missing { visibility: hidden; }

.lineup-day,
.lineup-count {
  position: absolute;
  top: 16px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 999px;
}
.lineup-day { left: 16px; background: #7a0020; color: #fff; }
.lineup-count { right: 16px; background: rgba(255,255,255,.9); color: #7a0020; }

.lineup-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #7a0020;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: background .2s, color .2s;
}
.lineup-btn:hover { background: #7a0020; color: #fff; }
.lineup-btn.prev { left: 16px; }
.lineup-btn.next { right: 16px; }

.lineup-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255,255,255,.4);
  z-index: 2;
}
.lineup-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #7a0020;
}

.lineup-info {
  padding: 26px 28px 10px;
  text-align: center;
  min-height: 170px;
  transition: opacity .4s ease, transform .4s ease;
}
.lineup-info.is-changing { opacity: 0; transform: translateY(8px); }
.lineup-info h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  margin: 0 0 10px;
  color: #1a1a1a;
}
.lineup-perform {
  display: inline-block;
  background: #f6e3e8;
  color: #7a0020;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 999px;
  margin: 0 0 12px;
}
.lineup-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin: 0 auto;
  max-width: 560px;
}

.lineup-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px 26px;
}
.lineup-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #ecd3da;
  cursor: pointer;
  transition: width .3s, background .3s;
}
.lineup-dots button.active { width: 22px; background: #7a0020; }

@media (max-width: 600px) {
  .lineup-stage { aspect-ratio: 4 / 5; }
  .lineup-btn { width: 36px; height: 36px; font-size: 22px; }
  .lineup-info h3 { font-size: 1.4rem; }
}
/* ===== LABEL KECIL DI ATAS JUDUL INTRO ===== */
.intro .section-label {
  margin-bottom: 18px;
}

/* About & Waktu: label + judul digeser bersama supaya sejajar */
.intro-heading {
  padding-left: 80px;
}
.intro-heading h2,
.intro-heading .section-label {
  margin-left: 0;
}

@media (max-width: 768px) {
  .intro-heading {
    padding-left: 0;
  }
}
@media (max-width: 600px) {
  .lineup-stage { aspect-ratio: 4 / 5; }
  .lineup-btn { width: 36px; height: 36px; font-size: 22px; }
  .lineup-info h3 { font-size: 1.4rem; }
}
/* ===== TOPENG MELAYANG DI BAGIAN INTRO ===== */
.intro {
  position: relative;
  overflow: hidden;              /* topeng tidak membuat layar bisa digeser ke samping */
}

.intro .container {
  position: relative;
  z-index: 2;                    /* tulisan selalu di depan topeng */
}

.intro-mask {
  position: absolute;
  z-index: 1;
  width: 190px;                  /* ukuran topeng, atur sesuai selera */
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 16px 18px rgba(80, 0, 20, .22));
  animation: maskFloat 6s ease-in-out infinite;
}

.intro-mask.small { width: 140px; }

/* Posisi */
.mask-left   { left: 2%; }
.mask-right  { right: 2%; }
.mask-top    { top: 8%; }
.mask-bottom { bottom: 8%; }

/* Gerakan melayang + sedikit bergoyang */
@keyframes maskFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-20px) rotate(6deg); }
}

/* Supaya tiap topeng tidak bergerak serempak */
.intro:nth-of-type(2) .intro-mask { animation-delay: -1.5s; }
.intro:nth-of-type(3) .intro-mask { animation-delay: -3s; }
.intro:nth-of-type(4) .intro-mask { animation-delay: -4.5s; }
.intro-mask.small               { animation-duration: 7.5s; }

/* Layar laptop kecil: topeng diperkecil & dibuat samar agar tidak menutupi teks */
@media (max-width: 1350px) {
  .intro-mask { width: 130px; opacity: .35; }
  .intro-mask.small { width: 100px; }
}

/* HP: topeng kecil di pojok, samar */
@media (max-width: 768px) {
  .intro-mask { width: 90px; opacity: .25; }
  .intro-mask.small { display: none; }
  .mask-left  { left: -20px; }
  .mask-right { right: -20px; }
}

/* Pengguna yang mematikan animasi di perangkatnya */
@media (prefers-reduced-motion: reduce) {
  .intro-mask { animation: none; }
}/* ===== KOLOM INTRO DIKEMBALIKAN RAPI ===== */
.intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.intro-grid > * {
  min-width: 0;                   /* kolom teks tidak terjepit */
}

/* ===== JUDUL + TOPENG SEJAJAR ===== */
.intro-title {
  display: flex;
  align-items: center;            /* topeng sejajar tengah dengan judul */
  gap: 24px;
}

.intro-title-text {
  flex: 1;
  min-width: 0;
}

.intro-title .section-label {
  margin-bottom: 18px;
}

.intro-mask {
  flex-shrink: 0;
  width: 150px;                   /* ukuran topeng */
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 16px rgba(80, 0, 20, .22));
  animation: maskFloat 6s ease-in-out infinite;
}

/* Gerakan melayang + sedikit bergoyang */
@keyframes maskFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-16px) rotate(6deg); }
}

/* Tiap topeng bergerak tidak serempak */
.intro:nth-of-type(3) .intro-mask { animation-delay: -1.5s; }
.intro:nth-of-type(4) .intro-mask { animation-delay: -3s; }
.intro:nth-of-type(5) .intro-mask { animation-delay: -4.5s; }

/* Laptop kecil */
@media (max-width: 1100px) {
  .intro-mask { width: 110px; }
}

/* HP: kolom ditumpuk, topeng lebih kecil */
@media (max-width: 768px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
  .intro-title {
    gap: 14px;
  }
  .intro-mask {
    width: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-mask { animation: none; }
}
/* ===== TOPENG BESAR TRANSPARAN SEBAGAI BACKGROUND ===== */
.intro {
  position: relative;
  overflow: hidden;                 /* topeng besar tidak keluar dari section */
}

.intro .container {
  position: relative;
  z-index: 2;                       /* tulisan selalu di depan topeng */
}

.intro-bg-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(560px, 80vw);          /* ukuran topeng, makin besar makin dominan */
  height: auto;
  opacity: .10;                     /* tingkat transparan: .05 samar – .20 lebih jelas */
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
  animation: bgMaskFloat 8s ease-in-out infinite;
}

/* Gerak pelan: naik-turun + sedikit berputar, tetap di tengah */
@keyframes bgMaskFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50%      { transform: translate(-50%, calc(-50% - 18px)) rotate(4deg); }
}

/* Tiap topeng bergerak tidak serempak */
.intro:nth-of-type(3) .intro-bg-mask { animation-delay: -2s; }
.intro:nth-of-type(4) .intro-bg-mask { animation-delay: -4s; }
.intro:nth-of-type(5) .intro-bg-mask { animation-delay: -6s; }

/* HP: topeng tetap besar tapi lebih samar agar teks mudah dibaca */
@media (max-width: 768px) {
  .intro-bg-mask {
    width: 95vw;
    opacity: .07;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-bg-mask { animation: none; }
}
/* =========================================================
   FINAL — BAGIAN INTRO (Welcome, About, Vision, Time & Place)
   Tempel di PALING BAWAH style.css.
   Sebelumnya, hapus blok CSS intro tambahan yang lama
   (label intro, .intro-heading, topeng melayang, judul + topeng sejajar,
   topeng background) supaya tidak dobel.
   ========================================================= */

/* ---------- Section & kolom ---------- */
.intro {
  position: relative;
  overflow: hidden;                 /* topeng besar tidak keluar dari section */
}

.intro .container {
  position: relative;
  z-index: 2;                       /* tulisan selalu di depan topeng */
}

.intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.intro-grid > * {
  min-width: 0;                     /* kolom paragraf tidak terjepit */
}

/* ---------- Label kecil di atas judul ---------- */
.intro .section-label {
  margin-bottom: 18px;
}

/* Judul About & Time: label + judul digeser bersama supaya sejajar */
.intro-heading {
  padding-left: 80px;               /* atur angka ini untuk menggeser keduanya */
}

.intro-heading h2,
.intro-heading .section-label {
  margin-left: 0;
}

/* ---------- Topeng besar transparan di tengah ---------- */
.intro-bg-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(560px, 80vw);          /* ukuran topeng */
  height: auto;
  opacity: .10;                     /* .05 samar – .20 lebih jelas */
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
  animation: bgMaskFloat 8s ease-in-out infinite;
}

/* Gerak pelan: naik-turun + sedikit berputar, tetap di tengah */
@keyframes bgMaskFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50%      { transform: translate(-50%, calc(-50% - 18px)) rotate(4deg); }
}

/* Tiap topeng bergerak tidak serempak */
.intro:nth-of-type(3) .intro-bg-mask { animation-delay: -2s; }
.intro:nth-of-type(4) .intro-bg-mask { animation-delay: -4s; }
.intro:nth-of-type(5) .intro-bg-mask { animation-delay: -6s; }

/* Sisa topeng kecil dari percobaan sebelumnya disembunyikan */
.intro-mask { display: none; }

/* ---------- HP ---------- */
@media (max-width: 768px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }

  .intro-heading {
    padding-left: 0;
  }

  .intro-grid > div:last-child {
    transform: none;
  }

  .intro-bg-mask {
    width: 95vw;
    opacity: .07;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-bg-mask { animation: none; }
}
/* =========================================================
   FINAL — BAGIAN INTRO (Welcome, About, Vision, Time & Place)
   Tempel di PALING BAWAH style.css, MENGGANTIKAN blok
   "FINAL — BAGIAN INTRO" versi sebelumnya.
   ========================================================= */

/* ---------- Kolom intro (kiri & kanan) ---------- */
.intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 75px;                 /* JARAK antara kolom kiri dan kolom kanan */
}

.intro-grid > * {
  min-width: 0;                     /* kolom paragraf tidak terjepit */
}

/* ---------- Label kecil di ATAS judul ---------- */
.intro-title {
  display: block;
}

.intro .section-label {
  display: inline-flex;
  margin-bottom: 18px;              /* JARAK antara label dan judul */
}

.intro-title h2 {
  margin-top: 0;
}

/* Judul About & Time: label + judul digeser bersama */
.intro-heading {
  padding-left: 80px;               /* GESER judul About & Time ke kanan */
}

.intro-heading h2,
.intro-heading .section-label {
  margin-left: 0;
}

/* ---------- Kotak foto + paragraf ---------- */
.intro-with-mask {
  display: flex;
  align-items: center;
  gap: 28px;                        /* JARAK antara kotak foto dan paragraf */
}

.intro-copy {
  flex: 1;
  min-width: 0;
}

.mask-box {
  flex: 0 0 200px;                  /* LEBAR kotak foto */
  aspect-ratio: 3 / 4;              /* bentuk kotak (lebar : tinggi) */
  display: grid;
  place-items: center;
  padding: 18px;                    /* jarak foto ke tepi kotak */
  border-radius: 24px;
  background: linear-gradient(160deg, #f7eef1, #ffffff);
  border: 1px solid rgba(128, 0, 32, .15);
  box-shadow: 0 16px 36px rgba(80, 0, 20, .10);
  overflow: hidden;
}

.mask-float {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* topeng utuh, tidak terpotong */
  border-radius: 14px;
  filter: drop-shadow(0 12px 14px rgba(80, 0, 20, .22));
  animation: maskFloat 5s ease-in-out infinite;   /* 5s = kecepatan melayang */
}

/* Animasi melayang: naik-turun + sedikit bergoyang */
@keyframes maskFloat {
  0%, 100% { transform: translateY(6px) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}

/* Tiap topeng bergerak tidak serempak */
.intro:nth-of-type(3) .mask-float { animation-delay: -1.2s; }
.intro:nth-of-type(4) .mask-float { animation-delay: -2.4s; }
.intro:nth-of-type(5) .mask-float { animation-delay: -3.6s; }

/* Sisa kode topeng versi lama disembunyikan */
.intro-mask,
.intro-bg-mask { display: none; }

/* ---------- Laptop kecil ---------- */
@media (max-width: 1100px) {
  .intro-grid {
    column-gap: 40px;               /* jarak kolom di laptop kecil */
  }

  .mask-box {
    flex-basis: 160px;              /* kotak foto lebih kecil */
  }

  .intro-with-mask {
    gap: 20px;                      /* jarak foto–paragraf di laptop kecil */
  }
}

/* ---------- HP: kotak foto di atas/bawah paragraf ---------- */
@media (max-width: 768px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }

  .intro-heading {
    padding-left: 0;
  }

  .intro-grid > div:last-child {
    transform: none;
  }

  .intro-with-mask {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;                      /* jarak foto–paragraf di HP */
  }

  .mask-box {
    flex-basis: auto;
    width: 180px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mask-float { animation: none; }
}
section[id] { scroll-margin-top: 20px; }
/* =========================================================
   ANIMASI MUNCUL SAAT SCROLL
   Tempel di PALING BAWAH style.css
   ========================================================= */

/* Keadaan awal: tersembunyi, sedikit di bawah */
.reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition:
    opacity 1s cubic-bezier(.22, 1, .36, 1),
    transform 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;       /* gerakan lebih mulus, tidak patah-patah */
  backface-visibility: hidden;
}

/* Variasi: muncul sambil membesar (kotak topeng & lineup) */
.reveal.reveal-zoom {
  transform: translate3d(0, 32px, 0) scale(.92);
}

/* Keadaan akhir: terlihat penuh */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Pengguna yang mematikan animasi di perangkatnya */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   TEMA MAROON + MEGA MENDUNG TRANSPARAN
   Berlaku untuk semua bagian SETELAH tampilan awal (hero).
   Tampilan awal (hero) tidak diubah sama sekali.
   ========================================================= */

:root {
  --tm-maroon: #6a0019;            /* warna latar maroon */
  --tm-gold: #f3d19c;              /* warna aksen (judul miring, label, garis) */
  --tm-text: rgba(255, 255, 255, .85);
  --tm-cloud-opacity: .12;         /* tingkat transparan mega mendung (.05 – .25) */
  --tm-cloud-size: clamp(180px, 26vw, 380px);
}

/* ---------- Latar maroon untuk semua section (hero tidak memakai .section) ---------- */
.section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--tm-maroon) !important;
}

/* Isi section selalu di depan hiasan */
.section > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Hiasan mega mendung transparan ---------- */
.section::before,
.section::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: var(--tm-cloud-size);
  aspect-ratio: 2 / 1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: var(--tm-cloud-opacity);
  pointer-events: none;
}

/* Section ganjil: kiri atas & kanan bawah */
.section::before {
  background-image: url("assets/batikawal.png");
  top: 6%;
  left: -4%;
}
.section::after {
  background-image: url("assets/batikawal1.png");
  bottom: 6%;
  right: -4%;
}

/* Section genap: posisi dibalik supaya tidak monoton */
.section:nth-of-type(even)::before {
  top: auto;
  bottom: 8%;
  left: -3%;
  background-image: url("assets/batikawal1.png");
}
.section:nth-of-type(even)::after {
  bottom: auto;
  top: 8%;
  right: -3%;
  background-image: url("assets/batikawal.png");
}

/* ---------- Warna teks disesuaikan dengan latar maroon ---------- */
.section .section-heading h2,
.section.intro h2 {
  color: #ffffff !important;
}
.section .section-heading h2 em,
.section.intro h2 em {
  color: var(--tm-gold) !important;
}
.section .section-heading p,
.section.intro .intro-text p {
  color: var(--tm-text) !important;
}

/* Label kecil (01 — INFORMATION, dll.) */
.section .section-label {
  background: rgba(255, 255, 255, .12);
  color: var(--tm-gold);
  border: 1px solid rgba(243, 209, 156, .35);
}

/* Bagian intro */
.section .mask-name { color: var(--tm-gold); }
.section .mask-box { border-color: rgba(255, 255, 255, .25); }
.section .location-map-link { color: var(--tm-gold); }
.section .location-map-link:hover { color: #ffffff; }
.section .location-map-preview { border-color: rgba(255, 255, 255, .3); }

/* Timeline */
.section .timeline:before {
  background: linear-gradient(var(--tm-gold), #ffffff, var(--tm-gold));
}
.section .timeline-date strong { color: #ffffff; }
.section .timeline-date span { color: rgba(255, 255, 255, .7); }
.section .timeline-dot {
  background: var(--tm-gold);
  border-color: var(--tm-maroon);
  box-shadow: 0 0 0 5px rgba(243, 209, 156, .2);
}

/* Kartu undangan & papan partner diberi garis agar tidak menyatu dengan latar */
.section .undangan-guide,
.section .partner-board {
  border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .28);
}

/* Bayangan kartu putih sedikit dipertegas */
.section .info-card,
.section .timeline-card,
.section .check-card,
.section .lineup-box {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

/* ---------- HP: mega mendung lebih kecil ---------- */
@media (max-width: 768px) {
  :root {
    --tm-cloud-size: 170px;
    --tm-cloud-opacity: .10;
  }
}

/* ===== TAMPILAN HP = TAMPILAN LAPTOP ===== */

/* Cegah HP (terutama Android/iPhone) memperbesar teks sendiri */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* HP posisi tegak: tinggi hero dikunci seperti di laptop.
   Tanpa ini, hero jadi sangat tinggi dan banyak ruang kosong. */
@media (orientation: portrait) {
  .hero {
    min-height: 900px;
  }
}
/* =========================================================
   RESPONSIVE — Cirebon Mask Festival 2026
   Pasang PALING TERAKHIR di <head>, setelah tema-maroon.css:
   <link rel="stylesheet" href="responsive.css">

   Tampilan laptop/desktop (> 1024px) TIDAK diubah.
   Yang diatur: tablet (≤ 1024px), HP (≤ 768px), HP kecil (≤ 400px).
   ========================================================= */

/* Batalkan aturan lama "hero 900px" di HP tegak (bikin ruang kosong) */
@media (orientation: portrait) {
  .hero { min-height: 100svh; }
}

/* Gambar tidak pernah lebih lebar dari layar */
img { max-width: 100%; }

/* ---------- Teks kontak di hero (pakai HTML baru) ---------- */
.hero-description {
  max-width: 620px;
  margin: 18px auto 28px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .88);
}
.hero-contact { white-space: nowrap; }
.hero-contact-sep { margin: 0 8px; opacity: .6; }


/* =========================================================
   TABLET (≤ 1024px)
   ========================================================= */
@media (max-width: 1024px) {

  .hero { min-height: 100svh; }

  /* Intro jadi 1 kolom: judul di atas, isi di bawah */
  .intro-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .intro-grid > .intro-heading {
    order: -1;                 /* judul About & Time selalu di atas */
    padding-left: 0;
  }
  .intro-grid > div:last-child { transform: none; }

  /* Mega mendung hero dikecilkan supaya tidak menutupi judul */
  .floating-mascot { width: 180px; }
}


/* =========================================================
   HP (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {

  .container { width: min(100% - 36px, 1120px); }
  .section { padding: 64px 0; }

  /* ---------- Tombol menu & bar logo ---------- */
  .sidebar-toggle {
    top: 14px;
    left: 12px;
    width: 42px;
    height: 42px;
    font-size: 21px;
  }

  .hero .hero-topbar {
    top: 10px;
    gap: 12px;
    padding: 6px 14px;
    border-radius: 16px;
    max-width: calc(100vw - 132px);   /* tidak menabrak tombol menu */
  }
  .hero .hero-topbar > img,
  .hero .hero-topbar .hero-logo {
    height: 38px;
    width: auto;
    max-width: none;
    transform: none;                  /* matikan scale(3) khusus di HP */
  }
  .hero .hero-topbar .hero-logo { height: 46px; }   /* logo tengah sedikit lebih besar */

  /* ---------- Hero ---------- */
  .hero {
    padding: 96px 18px 48px;
    min-height: 100svh;
  }
  .hero-content { width: 100%; }

  .eyebrow { font-size: 11px; padding: 8px 16px; }

  .hero h1 {
    margin-top: 18px;
    font-size: clamp(38px, 11vw, 58px);
    line-height: .95;
    letter-spacing: -1px;
  }

  .hero-subtitle {
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: 1.5px;
    line-height: 1.6;
  }

  .hero-description { font-size: 13px; line-height: 1.7; margin: 14px auto 24px; }
  .hero-contact { display: block; }        /* email, IG, telp: satu per baris */
  .hero-contact-sep { display: none; }

  .hero-buttons { width: 100%; max-width: 280px; }
  .btn {
    min-height: 46px;                      /* mudah disentuh jari */
    font-size: 13px;
    padding: 12px 20px;
  }

  /* Mega mendung: kecil, di pojok, agak transparan */
  .floating-mascot { width: 92px; opacity: .85; }
  .mascot-left        { left: -22px;  bottom: 4%; }
  .mascot-right       { right: -22px; top: 15%; }
  .mascot-left-top    { left: -22px;  top: 12%; }
  .mascot-right-bottom{ right: -22px; bottom: 4%; }

  /* ---------- Countdown ---------- */
  .hero-content .countdown {
    margin-top: 28px;
    padding: 18px 14px;
    gap: 14px;
    border-radius: 14px;
  }
  .countdown-info { gap: 12px; }
  .countdown-h { font-size: 15px; padding: 6px 12px; }
  .hero-content .countdown h3 { font-size: 15px; }
  .hero-content .countdown p { font-size: 12px; }
  .countdown-box { padding: 12px 4px; }
  .countdown-box strong { font-size: 26px; }
  .countdown-box span { font-size: 11px; }

  /* ---------- Judul & label section ---------- */
  .section-label { font-size: 10px; letter-spacing: 1.2px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2,
  .intro h2 { font-size: clamp(34px, 10vw, 46px); line-height: 1; }
  .section-heading p { font-size: 14px; }

  /* ---------- Intro (Welcome, About, Vision, Time) ---------- */
  .intro-with-mask {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  .mask-figure { order: -1; width: 160px; margin: 0 auto; }   /* topeng selalu di atas teks */
  .intro-text p {
    font-size: 14px;
    line-height: 1.8;
    text-align: left;            /* justify di layar sempit bikin celah aneh */
  }
  .intro-text.location-info p { font-size: 16px; font-weight: 600; }
  .location-map-preview { max-width: 100%; height: 190px; }

  /* ---------- Explore the Festival ---------- */
  .info-grid { grid-template-columns: 1fr; gap: 18px; }
  .info-slides img { height: 210px; }
  .info-card-body { padding: 20px; }
  .info-card-body h3 { font-size: 21px; }
  .info-card-body p { font-size: 13.5px; text-align: left; }

  /* ---------- Series of Events ---------- */
  .timeline-card h3 { font-size: 22px; }
  .timeline-tag,
  .important-badge,
  .dress-code-content small { font-size: 10px; }
  .dress-code-row b { font-size: 13px; }
  .dc-detail-btn { font-size: 11px; padding: 9px 14px; }

  /* ---------- Lineup ---------- */
  .lineup-box { margin-top: 24px; border-radius: 22px; }

  /* ---------- Invitation & Social ---------- */
  .media-guide-card > p,
  .social-desc { font-size: 14px; }
  .media-guide-card .download-btn,
  .social-btn { min-height: 44px; font-size: 13px; }
  .check-grid { grid-template-columns: 1fr; gap: 16px; }
  .check-card { padding: 22px; }

  /* ---------- Partner ---------- */
  .partner-board { padding: 48px 16px 52px; border-radius: 22px; }
  .partner-title { font-size: 11px; letter-spacing: 2px; }

  /* ---------- Footer ---------- */
  .site-footer { padding-top: 36px; }
  .site-footer-bottom p { line-height: 1.7; }

  /* ---------- Back to top: jadi tombol bulat kecil ---------- */
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
  }
  .back-to-top span:not(.back-icon) { display: none; }
}

.seriesofevent-detail-btn {
  display: inline-flex;
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #800020;
  color: #ffffff;
  border: 1px solid #800020;
  font-size: 11px;
  font-weight: 800;
}
.seriesofevent-detail-btn:hover { background: #5a0017; }

/* ===== ANIMASI MUNCUL SAAT SCROLL (sama seperti index) ===== */
.reveal {
  opacity: 0 !important;
  transform: translate3d(0, 60px, 0) !important;
  transition:
    opacity 1.1s cubic-bezier(.22, 1, .36, 1),
    transform 1.1s cubic-bezier(.22, 1, .36, 1) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
/* Variasi: muncul sambil membesar (header hari) */
.reveal.reveal-zoom {
  transform: translate3d(0, 40px, 0) scale(.92) !important;
}
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}