/* =========================FONT========================= */
 @font-face{
     font-family:"ABTIFranklin";
     src:url("assets/Fonts/OPTIFranklinGothic-Medium.otf") format("opentype");
     font-weight:500;
     font-style:normal;
     font-display:swap;
}
 @font-face{
     font-family:"Inter";
     src:url("assets/Fonts/Inter-regular.woff") format("woff");
     font-weight:400;
     font-style:normal;
     font-display:swap;
}
 @font-face{
     font-family:"Inter";
     src:url("assets/Fonts/Inter-SemiBold.woff") format("woff");
     font-weight:600;
     font-style:normal;
     font-display:swap;
}
 @font-face{
     font-family:"Inter";
     src:url("assets/Fonts/Inter-SemiBold.woff") format("woff");
     font-weight:600;
     font-style:normal;
     font-display:swap;
}
 @font-face{
     font-family:"Inter";
     src: url("assets/Fonts/Inter-ExtraBold.woff2") format("woff2"), url("assets/Fonts/Inter-ExtraBold.woff") format("woff");
     font-weight:800;
     font-style:normal;
     font-display:swap;
}
 @font-face{
     font-family:"Inter";
     src: url("assets/Fonts/Inter-Black.woff2") format("woff2"), url("assets/Fonts/Inter-Black.woff") format("woff");
     font-weight:900;
     font-style:normal;
     font-display:swap;
}
/* =========================THEME========================= */
 :root{
     --main:#d5291e;
     --sec:#1054ae;
     --white:#fefefe;
     --ink:#1b1917;
     --nav-h:72px;
     --radius:16px;
     --radius2:14px;
     --shadow: 0 18px 45px rgba(16, 84, 174, .08), 0 8px 18px rgba(27,25,23,.06);
     --shadow2: 0 14px 40px rgba(27,25,23,.12);
     --line: rgba(27,25,23,.10);
     --soft: rgba(27,25,23,.06);
     --ease: cubic-bezier(.2,.9,.2,1);
     --underline-h:2px;
     --underline-gap:10px;
}
 *{
     box-sizing:border-box;
}
 html{
     scroll-behavior:smooth;
}
 body{
     margin:0;
     font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     background:var(--white);
     color:var(--ink);
}
 body.lock{
     overflow:hidden;
     height:100%;
}
/*=========================NAVBAR WRAP=========================*/
 .navWrap{
     position:sticky;
     top:0;
     z-index:1000;
     background:rgba(254,254,254,.78);
     backdrop-filter: blur(14px);
     border-bottom:1px solid var(--soft);
}
 .nav{
     height:var(--nav-h);
     max-width:1200px;
     margin:0 auto;
     padding:0 18px;
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:18px;
}
 .brand{
     text-decoration:none;
     font-family:"ABTIFranklin","Inter",system-ui,sans-serif;
     font-weight:800;
     letter-spacing:.2px;
     color:var(--main);
     font-size:18px;
     display:flex;
     align-items:center;
     gap:10px;
}
 .brand:focus-visible{
     outline:2px solid rgba(16,84,174,.35);
     outline-offset:4px;
     border-radius:10px;
}
 .menu{
     list-style:none;
     display:flex;
     align-items:center;
     gap:6px;
     padding:0;
     margin:0;
}
 .item{
     position:relative;
}
 .link, .ddBtn{
     font:inherit;
     background:transparent;
     border:0;
     cursor:pointer;
     padding:10px 12px;
     border-radius:12px;
     color:rgba(27,25,23,.86);
     text-decoration:none;
     display:flex;
     align-items:center;
     gap:8px;
     transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
 .link:hover, .ddBtn:hover{
     background:rgba(16,84,174,.06);
     color:rgba(27,25,23,.95);
}
 .link:active, .ddBtn:active{
     transform:translateY(1px);
}
 .link:focus-visible, .ddBtn:focus-visible{
     outline:2px solid rgba(16,84,174,.35);
     outline-offset:3px;
}
 .link, .ddBtn{
     position:relative;
}
 .link::after, .ddBtn::after{
     content:"";
     position:absolute;
     left:12px;
     right:12px;
     bottom: calc(-1 * var(--underline-gap));
     height: var(--underline-h);
     background: var(--main);
     border-radius: 99px;
     transform: scaleX(0);
     transform-origin:left;
     transition: transform .18s var(--ease);
     opacity:.95;
     pointer-events:none;
}
 .link.is-active::after, .ddBtn.is-active::after{
     transform: scaleX(0);
}
 @media (hover:hover){
     .navWrap:hover .link:hover::after, .navWrap:hover .ddBtn:hover::after{
         transform: scaleX(1);
    }
}
 .navWrap:focus-within .link:focus-visible::after, .navWrap:focus-within .ddBtn:focus-visible::after{
     transform: scaleX(1);
}
 .caret{
     width:0;
     height:0;
     border-left:5px solid transparent;
     border-right:5px solid transparent;
     border-top:6px solid rgba(27,25,23,.55);
     transition: transform .22s var(--ease), border-top-color .22s var(--ease);
     margin-top:2px;
}
 .dd.open .caret{
     transform: rotate(180deg);
     border-top-color: rgba(27,25,23,.72);
}
 .ddPanel{
     position:absolute;
     top:calc(100% + 10px);
     left:0;
     min-width: 220px;
     max-width: 340px;
     padding: 8px;
     border-radius: var(--radius2);
     background:rgba(254,254,254,.92);
     backdrop-filter: blur(14px);
     border:1px solid var(--line);
     box-shadow:var(--shadow);
     text-align:left;
     opacity:0;
     visibility:hidden;
     transform: translateY(-8px) scale(.985);
     transform-origin: top left;
     transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
     z-index: 999;
}
 .ddPanel::before{
     content:"";
     position:absolute;
     top:-7px;
     left: 20px;
     width: 12px;
     height: 12px;
     background: rgba(254,254,254,.92);
     border-left:1px solid var(--line);
     border-top:1px solid var(--line);
     transform: rotate(45deg);
     backdrop-filter: blur(14px);
}
 .ddLink{
     display:flex;
     align-items:center;
     gap:10px;
     padding:9px 10px;
     border-radius:12px;
     text-decoration:none;
     color:rgba(27,25,23,.86);
     line-height: 1.2;
     transition: background .16s var(--ease), transform .16s var(--ease);
     white-space: nowrap;
}
 .ddLink:hover{
     background:rgba(213,41,30,.06);
     transform: translateX(2px);
}
 .ddLink:focus-visible{
     outline:2px solid rgba(213,41,30,.28);
     outline-offset:2px;
}
 .dd.open .ddPanel{
     opacity:1;
     visibility:visible;
     transform: translateY(0) scale(1);
}
 .ddGrid{
     min-width: 360px;
     max-width: 420px;
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:6px;
}
 .burger{
     width:44px;
     height:44px;
     border:1px solid rgba(27,25,23,.12);
     background:rgba(254,254,254,.85);
     border-radius:14px;
     display:none;
     align-items:center;
     justify-content:center;
     cursor:pointer;
     box-shadow: 0 10px 25px rgba(27,25,23,.06);
     transition: transform .18s var(--ease), background .18s var(--ease);
}
 .burger:hover{
     background:rgba(16,84,174,.06);
}
 .burger:active{
     transform: translateY(1px);
}
 .burger:focus-visible{
     outline:2px solid rgba(16,84,174,.35);
     outline-offset:3px;
}
 .burgerLines{
     position:relative;
     width:20px;
     height:2px;
     background:rgba(27,25,23,.78);
     border-radius:2px;
     transition: transform .22s var(--ease), background .22s var(--ease);
}
 .burgerLines::before, .burgerLines::after{
     content:"";
     position:absolute;
     left:0;
     width:20px;
     height:2px;
     background:rgba(27,25,23,.78);
     border-radius:2px;
     transition: transform .22s var(--ease), top .22s var(--ease), opacity .22s var(--ease);
}
 .burgerLines::before{
     top:-6px;
}
 .burgerLines::after{
     top:6px;
}
 .burger.isOpen .burgerLines{
     background:transparent;
}
 .burger.isOpen .burgerLines::before{
     top:0;
     transform:rotate(45deg);
}
 .burger.isOpen .burgerLines::after{
     top:0;
     transform:rotate(-45deg);
}
 .mOverlay{
     position:fixed;
     inset:0;
     z-index:1100;
     display:none;
}
 .mOverlay.show{
     display:block;
}
 .mBackdrop{
     position:absolute;
     inset:0;
     background:rgba(27,25,23,.48);
     backdrop-filter: blur(2px);
     opacity:0;
     transition: opacity .22s var(--ease);
}
 .mOverlay.show .mBackdrop{
     opacity:1;
}
 .mDrawer{
     position:absolute;
     top:12px;
     right:12px;
     width:min(420px, calc(100% - 24px));
     height:calc(100% - 24px);
     background:rgba(254,254,254,.96);
     backdrop-filter: blur(16px);
     border:1px solid var(--line);
     border-radius:22px;
     box-shadow:var(--shadow2);
     display:flex;
     flex-direction:column;
     overflow:hidden;
     transform: translateY(-8px) scale(.985);
     opacity:0;
     transition: transform .22s var(--ease), opacity .22s var(--ease);
}
 .mOverlay.show .mDrawer{
     transform: translateY(0) scale(1);
     opacity:1;
}
 .mTop{
     padding:16px 16px 12px;
     display:flex;
     align-items:center;
     justify-content:space-between;
     border-bottom:1px solid rgba(27,25,23,.08);
}
 .mBrand{
     font-weight:900;
     color:var(--main);
     letter-spacing:.2px;
}
 .mClose{
     width:42px;
     height:42px;
     border-radius:14px;
     border:1px solid rgba(27,25,23,.12);
     background:rgba(254,254,254,.9);
     cursor:pointer;
     transition: transform .18s var(--ease), background .18s var(--ease);
}
 .mClose:hover{
     background:rgba(213,41,30,.06);
}
 .mClose:active{
     transform: translateY(1px);
}
 .mBody{
     padding:10px 10px 14px;
     overflow:auto;
     -webkit-overflow-scrolling:touch;
}
 .mLink, .mDD{
     width:100%;
     font: inherit;
     display:flex;
     align-items:center;
     justify-content:space-between;
     padding:12px 12px;
     border-radius:14px;
     text-decoration:none;
     color:rgba(27,25,23,.88);
     background: transparent;
     border: 0;
     cursor: pointer;
     transition: background .16s var(--ease), transform .16s var(--ease);
}
 .mLink:hover, .mDD:hover{
     background:rgba(16,84,174,.06);
     transform: translateX(2px);
}
 .mLink:focus-visible, .mDD:focus-visible{
     outline:2px solid rgba(16,84,174,.35);
     outline-offset:3px;
}
 .mGroup{
     margin: 8px 0;
     border: 0;
     background: transparent;
     border-radius: 0;
     overflow: visible;
}
 .mDD .caret{
     border-left:5px solid transparent;
     border-right:5px solid transparent;
     border-top:6px solid rgba(27,25,23,.58);
     transform: rotate(0deg);
     transition: transform .22s var(--ease), border-top-color .22s var(--ease);
}
 .mGroup.open .mDD .caret{
     transform: rotate(180deg);
     border-top-color: rgba(27,25,23,.72);
}
 .mPanel{
     display:grid;
     gap:6px;
     max-height:0;
     overflow:hidden;
     padding:0;
     margin:0;
     border-left:2px solid transparent;
     opacity:0;
     pointer-events:none;
     transition: max-height .25s var(--ease), opacity .18s var(--ease), padding .18s var(--ease), margin .18s var(--ease), border-left-color .18s var(--ease);
}
 .mGroup.open .mPanel{
     max-height: 680px;
     opacity:1;
     pointer-events:auto;
     padding: 2px 0 8px 0;
     margin: 0 6px 0 18px;
     border-left-color: rgba(27,25,23,.08);
}
 .mSublink{
     display:flex;
     padding:10px 12px;
     border-radius:14px;
     text-decoration:none;
     color:rgba(27,25,23,.86);
     background: transparent;
     border: 0;
     transition: transform .16s var(--ease), background .16s var(--ease);
}
 .mSublink:hover{
     transform: translateX(2px);
     background: rgba(213,41,30,.05);
}
 .mPanel.mGrid{
     grid-template-columns:1fr 1fr;
}
 .mPanel.mGrid .mSublink{
     padding:10px 10px;
}
 @media (max-width: 980px){
     .menu{
         display:none;
    }
     .burger{
         display:inline-flex;
    }
}
/* ========================= PAGE STYLING ========================= */
 .page{
     padding: 5px 18px 0px;
     max-width:1200px;
     margin:0 auto;
}
 .sec{
     min-height: 62vh;
     border:1px solid rgba(27,25,23,.06);
     border-radius:22px;
     padding:26px;
     margin:18px 0;
     background:linear-gradient(180deg, rgba(16,84,174,.03), rgba(213,41,30,.02));
}
 .sec h2{
     margin:0;
     font-size:28px;
     letter-spacing:.2px;
}
 .link, .ddBtn{
     font-size:16px;
}
 .ddLink{
     font-size:16px;
}
 .mSublink{
     font-size:15px;
     font-weight:500;
     color: rgba(27,25,23,.72);
}
/* =========================HERO========================= */
 .hero{
     padding: 52px 18px 34px;
}
 .heroWrap{
     max-width:1200px;
     margin:0 auto;
     display:grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 28px;
     align-items:center;
}
 .heroTitle{
     margin:0 0 12px;
     line-height: 1,2;
     letter-spacing:.2px;
}
 .heroKicker{
     display:block;
     font-weight:900;
     font-size: clamp(44px, 7.2vw, 60px);
     color: var(--main);
     letter-spacing:-0.02em;
}
 .heroBig{
     display:block;
     font-weight:900;
     font-size: clamp(44px, 7.2vw, 60px);
     color: var(--main);
     letter-spacing:-0.03em;
}
 .heroDesc{
     margin: 0 0 26px;
     font-size: clamp(16px, 1.6vw, 18px);
     line-height:1.55;
     color: rgba(27,25,23,.78);
}
 .heroEm{
     color: var(--main);
     font-weight:800;
}
 .heroBtn{
     display:inline-flex;
     align-items:center;
     gap:10px;
     height:45px;
     padding: 0 14px 0 16px;
     border-radius: 10px;
     background: var(--main);
     color: var(--white);
     text-decoration:none;
     font-weight:500;
     font-size:14px;
     line-height:1;
     box-shadow: 0 10px 22px rgba(213,41,30,.18);
     transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
 .heroBtn:hover{
     transform: translateY(-1px);
     box-shadow: 0 14px 30px rgba(213,41,30,.22);
}
 .heroBtn:active{
     transform: translateY(0);
}
 .heroBtnIcon{
     width:22px;
     height:22px;
     display:inline-grid;
     place-items:center;
     font-size:14px;
     line-height:1;
}
 .heroBtn:hover .heroBtnIcon{
     transform: translateX(2px);
}
 .heroMedia{
     display:flex;
     justify-content:flex-end;
}
 .heroimg{
     width: min(520px, 100%);
     border-radius: 26px;
     overflow:hidden;
     background: #fff;
}
 .heroimg img{
     width:100%;
     height:100%;
     display:block;
     object-fit:cover;
     aspect-ratio: 4 / 3;
     background: #fff;
}
/* =========================HERO — MOBILE ========================= */
 @media (max-width: 980px){
     .hero{
         padding: 36px 18px 22px;
    }
     .heroWrap{
         grid-template-columns: 1fr;
         gap: 18px;
    }
     .heroMedia{
         order: -1;
    }
     .heroText{
         order: 0;
    }
     .heroMedia{
         justify-content:flex-start;
    }
     .heroimg{
         width: 100%;
         border-radius: 24px;
         display:block;
         overflow:hidden;
    }
     .heroimg img{
         width:100%;
         height:auto;
         display:block;
         aspect-ratio: 16 / 10;
         object-fit: cover;
    }
     .heroKicker, .heroBig{
         font-size: clamp(28px, 8vw, 40px);
    }
     .heroDesc{
         font-size: clamp(12px, 3.8vw, 16px);
         line-height: 1.55;
    }
}
/* =========================YOUTUBE STRIP========================= */
 .ytStrip{
     padding: 26px 0 8px;
}
 .ytHead{
     max-width:1200px;
     margin:0 auto 10px;
     padding:0 18px;
}
 .ytTitle{
     margin:0;
     font-size: 18px;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: rgba(27,25,23,.9);
     font-weight: 900;
}
 .ytMarquee{
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     cursor: grab;
     user-select: none;
     touch-action: pan-x;
}
 .ytMarquee::-webkit-scrollbar{
     display:none;
}
 .ytMarquee:active{
     cursor: grabbing;
}
 .ytTrack{
     display:flex;
     gap:8px;
     width:max-content;
     align-items:stretch;
     animation: ytScroll 40s linear infinite;
     will-change: transform;
}
 @media (hover:hover){
     .ytMarquee:hover .ytTrack{
         animation-play-state: paused;
    }
}
 .ytCard{
     position: relative;
     width: 240px;
     overflow: hidden;
     background: rgba(16,84,174,.04);
     text-decoration:none;
     color: inherit;
     display:flex;
     flex-direction:column;
}
 .ytThumb{
     position:relative;
     aspect-ratio: 16 / 9;
     overflow:hidden;
     background: rgba(27,25,23,.06);
}
 .ytThumb img{
     width:100%;
     height:100%;
     display:block;
     object-fit: cover;
     object-position: 50%;
}
 .ytCap{
     padding: 10px 12px 12px;
     font-size: 12px;
     color: rgba(27,25,23,.78);
     line-height: 1.35;
     min-height: 38px;
}
 @keyframes ytScroll{
     from{
         transform: translateX(0);
    }
     to{
         transform: translateX(-50%);
    }
}
 @media (max-width: 980px){
     .ytCard{
         width: 160px;
    }
     .ytTitle{
         font-size: 16px;
    }
}
/* ===================== BIG NEWS (TRANSFORM SLIDER) ===================== */
 .bigNewsSectionBg{
     background: #f6f7f9;
     margin: 50px 0;
     Border-radius: 20px;
}
 .bigNews{
     max-width:1200px;
     margin:0 auto;
     padding:30px 18px 12px;
}
 .bigNewsViewport{
     position:relative;
     overflow:hidden;
     background:rgba(27,25,23,.04);
     user-select:none;
     touch-action:pan-y;
     cursor:grab;
}
 .bigNewsViewport.isDown{
     cursor:grabbing;
}
 .bigNewsTrack{
     display:flex;
     will-change:transform;
}
 .bigNewsSlide{
     flex:0 0 100%;
     height:clamp(260px,36vw,420px);
     position:relative;
     text-decoration:none;
     color:inherit;
}
 .bigNewsSlide img{
     width:100%;
     height:100%;
     object-fit:cover;
     display:block;
     pointer-events:none;
}
 .bigNewsOverlay{
     position:absolute;
     inset:0;
     background:linear-gradient(to right,rgba(0,0,0,.55),rgba(0,0,0,.16),transparent);
}
 .bigNewsContent{
     position:absolute;
     left:22px;
     bottom:22px;
     max-width:520px;
     color:#fff;
}
 .bigNewsKicker{
     font-size:12px;
     font-weight:700;
     letter-spacing:.08em;
     text-transform:uppercase;
     margin-bottom:-10px;
}
 .bigNewsH{
     font-size:clamp(18px,2.2vw,28px);
     font-weight:900;
     line-height:1.12;
     margin-bottom:4px;
}
 .bigNewsP{
     font-size:12px;
     opacity:.9;
     margin-bottom:10px;
}
 .bigNewsCTALink{
     display:inline-block;
     padding:8px 12px;
     border-radius:10px;
     border:1px solid rgba(255,255,255,.24);
     background:rgba(255,255,255,.14);
     font-size:12px;
     font-weight:700;
     text-decoration:none;
     color:#fff;
}
 .bigNewsDots{
     display:flex;
     justify-content:center;
     gap:8px;
     margin-top:10px;
}
 .bigDot{
     width:30px;
     height:3px;
     border-radius:99px;
     background:rgba(27,25,23,.18);
     overflow:hidden;
}
 .bigDot i{
     display:block;
     height:100%;
     width:0%;
     background:rgba(213, 42, 30, 1);
}
 .bigNewsOverlay{
     pointer-events: none;
}
 .bigNewsSlide{
     position: relative;
     z-index: 2;
     pointer-events: auto;
}
 .bigNewsSectionBg::before{
     pointer-events: none;
}
/* ===================== ACT STRIP ===================== */
 .actStrip{
     max-width:1040px;
     margin:0 auto;
     padding:8px 18px 40px;
}
 .actHead{
     display:flex;
     justify-content:space-between;
     align-items:center;
}
 .actTitle{
     font-size:16px;
     letter-spacing:.08em;
     text-transform:uppercase;
     font-weight:900;
     color: rgba(213, 42, 30, 1);
}
 .actHead{
     display:flex;
     justify-content:space-between;
     align-items:center;
}
 .actWrap{
     position: relative;
}
 .actStrip{
     --actThumbRatio: 16 / 9;
}
 .actStrip{
     --actThumbH: 210px;
}
 .actThumb{
     aspect-ratio: var(--actThumbRatio);
     background: rgba(27,25,23,.06);
     overflow: hidden;
}
 .actThumb img{
     width:100%;
     height:100%;
     object-fit: cover;
     display:block;
}
 .actArrow{
     position:absolute;
     top: calc(50% - 52px);
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     border: none;
     background: rgba(213, 41, 30, 0.5);
     cursor:pointer;
     font-size: 28px;
     line-height: 1;
     z-index: 10;
     color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .actArrow.left{
     left: -26px;
}
 .actArrow.right{
     right: -20px;
}
 .actArrow:disabled{
     opacity:.35;
     cursor:not-allowed;
}
 .actViewport{
     overflow:hidden;
     scrollbar-width:none;
     touch-action:pan-x;
     scroll-snap-type:x mandatory;
     cursor:grab;
     padding: 0 1px;
}
 .actViewport::-webkit-scrollbar{
     display:none;
}
 .actViewport.isDown{
     cursor:grabbing;
}
 .actTrack{
     display:flex;
     gap:18px;
     width:100%;
}
 .actCard{
     width:auto;
     overflow:hidden;
     background:#ffffff;
     scroll-snap-align:start;
     text-decoration:none;
     color:inherit;
     flex : 0 0 calc((100% - (18px * 3)) / 4);
}
 .actThumb{
     aspect-ratio:16/9;
}
 .actThumb img{
     width:100%;
     height:100%;
     object-fit:cover;
}
 .actBody{
     padding:10px 12px;
}
 .actDate{
     font-size:11px;
     opacity:.55;
}
 .actH{
     font-size:13px;
     font-weight:800;
     color:rgba(0, 0, 0, 0.60);
}
 @media (max-width: 768px){
     .bigNewsContent{
         left: 14px !important;
         bottom: 14px !important;
         max-width: 86% !important;
    }
     .bigNewsKicker{
         font-size: 8px !important;
         letter-spacing: .1em !important;
         margin-bottom: 2px !important;
    }
     .bigNewsH{
         font-size: 12px !important;
         line-height: 1.2 !important;
         margin-bottom: 4px !important;
         display: -webkit-box !important;
         -webkit-line-clamp: 3 !important;
         -webkit-box-orient: vertical !important;
         overflow: hidden !important;
    }
     .bigNewsP{
         font-size: 8px !important;
         line-height: 1.35 !important;
         margin-bottom: 6px !important;
         opacity: .9 !important;
         display: -webkit-box !important;
         -webkit-line-clamp: 2 !important;
         -webkit-box-orient: vertical !important;
         overflow: hidden !important;
    }
     .bigNewsCTALink{
         font-size: 8px;
         padding: 6px 10px;
         border-radius: 8px;
    }
     .actStrip{
         padding: 8px 12px 32px !important;
    }
     .actTrack{
         gap: 10px !important;
         align-items: flex-start !important;
         gap: var(--gap) 
    }
     .actCard{
         flex: 0 0 calc((100% - (10px * 2)) / 3) !important;
         height: auto !important;
         min-height: 0 !important;
         align-self: flex-start !important;
         display: flex !important;
         flex-direction: column !important;
    }
     .actThumb{
         aspect-ratio: unset !important;
         overflow: hidden !important;
         height: auto;
         flex: 0 0 auto !important;
    }
     .actThumb img{
         width: 100% !important;
         height: 100% !important;
         object-fit: cover !important;
         display: block !important;
    }
     .actBody{
         padding: 6px 8px !important;
         height: auto !important;
         min-height: 50px;
         !important;
         flex: 0 0 auto !important;
    }
     .actTitle{
         font-size: 14px !important;
         line-height: 1.2 !important;
         display: -webkit-box !important;
         -webkit-line-clamp: 2 !important;
         -webkit-box-orient: vertical !important;
         overflow: hidden !important;
    }
     .actDate{
         font-size: 5px !important;
    }
     .actH{
         font-size: 8px !important;
         line-height: 1.2 !important;
    }
     .actArrow{
         padding: 0 !important;
         margin: 0 !important;
         box-sizing: border-box !important;
         width: 30px !important;
         height: 30px !important;
         min-width: 30px !important;
         min-height: 30px !important;
         font-size: 10px !important;
         line-height: 1 !important;
         top:50%;
         transform: translateY(-50%) !important;
         transform: translateY(-50%) !important;
    }
     .actArrow.left{
         left: -8px !important;
    }
     .actArrow.right{
         right: -8px !important;
    }
}
/* ===================== COUNTER ===================== */
 .stats{
     --accent: #d5291e;
     --surface: #fefefe;
     --text: #1b1917;
     --muted: rgba(27,25,23,.62);
     --stroke: rgba(27,25,23,.08);
     --shadow: 0 8px 20px rgba(27,25,23,.08), 0 1px 3px rgba(27,25,23,.06);
     padding: 40px 16px;
     background: rgba(27,25,23,.03);
     border-radius: 20px;
}
 .statsWrap{
     max-width: 1100px;
     margin: 0 auto;
}
 .statsGrid{
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 14px;
     row-gap: 14px;
     margin-top: 18px;
     max-height: 192px;
     overflow: hidden;
     transition: max-height .45s cubic-bezier(.22,.61,.36,1);
     -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
     mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
 .statsGrid.is-expanded{
     max-height: 999px;
     -webkit-mask-image: none;
     mask-image: none;
}
 .statsGridLabel{
     grid-column: 1 / -1;
     margin-bottom: -4px;
     padding-left: 2px;
     padding-bottom: 22px;
     font-size: 16px;
     font-weight: 900;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: #d5291e;
}
 .statCard{
     height: 128px;
     position: relative;
     background: var(--surface);
     border: 1px solid var(--stroke);
     border-radius: 18px;
     padding: 22px 16px 16px;
     text-align: center;
     box-shadow: 0 6px 14px rgba(27,25,23,.06), 0 1px 2px rgba(27,25,23,.05);
     display:flex;
     flex-direction:column;
     justify-content:center;
}
 .statBadge{
     position:absolute;
     top: -12px;
     left: 50%;
     transform: translateX(-50%);
     width: 34px;
     height: 34px;
     border-radius: 999px;
     background: var(--surface);
     border: 1px solid rgba(27,25,23,.10);
     display:grid;
     place-items:center;
     box-shadow: 0 12px 24px rgba(27,25,23,.10), 0 2px 6px rgba(27,25,23,.06);
}
 .statSvg{
     width:16px;
     height:16px;
}
 .statSvg svg{
     width:16px;
     height:16px;
     fill: none;
     stroke: var(--accent);
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
}
 .statValue{
     font-weight: 800;
     font-size: 30px;
     letter-spacing: -0.03em;
     color: var(--text);
     line-height: 1.05;
     margin-top: 6px;
}
 .statLabel{
     margin-top: 6px;
     font-size: 12px;
     letter-spacing: .08em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--muted);
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
     max-width: 92%;
     margin-left:auto;
     margin-right:auto;
}
 .statsToggle{
     margin-top: 16px;
     display:flex;
     justify-content:center;
}
 .statsToggle button{
     appearance:none;
     -webkit-appearance:none;
     padding: 10px 18px;
     border-radius: 8px;
     background: var(--main);
     border: 1px solid rgba(27,25,23,.12);
     color: #fefefe;
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .02em;
     box-shadow: 0 14px 30px rgba(27,25,23,.10);
     cursor:pointer;
     user-select:none;
     transition: transform .18s ease, box-shadow .18s ease;
}
 .statsToggle button:hover{
     transform: translateY(-1px);
     box-shadow: 0 18px 38px rgba(27,25,23,.12);
}
 .statsToggle button:active{
     transform: translateY(0);
     box-shadow: 0 12px 26px rgba(27,25,23,.10);
}
 .statsToggle button:focus{
     outline:none;
}
 .statsToggle button:focus-visible{
     outline: 2px solid rgba(213,41,30,.28);
     outline-offset: 3px;
}
 @media (max-width: 980px){
     .statsGrid{
         grid-template-columns: repeat(2, minmax(0,1fr));
         max-height: 192px;
    }
}
 @media (max-width: 520px){
     .statsGrid{
         grid-template-columns: repeat(2, minmax(0,1fr));
         max-height: 170px;
         gap: 10px;
    }
     .statCard{
         height: 116px;
         padding: 18px 12px 14px;
    }
     .statValue{
         font-size: 22px;
    }
     .statLabel{
         font-size: 11px;
         letter-spacing: .06em;
    }
}
/* ===================== SPONSOR ===================== */
 .sponsor-section{
     position: relative;
     padding: clamp(48px, 6vw, 80px) 16px;
     background: #d5291e;
     overflow: hidden;
     color: #fff;
     text-align: center;
     margin-top: 56px;
     border-radius: 20px;
}
 .sponsor-section::before{
     content:"";
     position:absolute;
     inset:-120px;
     background: radial-gradient(closest-side at 20% 25%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%), radial-gradient(closest-side at 80% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%), radial-gradient(closest-side at 50% 85%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
     filter: blur(30px);
     opacity: .85;
     pointer-events: none;
}
 .sponsor-headline{
     position: relative;
     margin: 0 auto 8px;
     font-weight: 800;
     letter-spacing: -0.02em;
     font-size: clamp(28px, 3.4vw, 44px);
     line-height: 1.05;
}
 .sponsor-subheadline{
     position: relative;
     margin: 0 auto 26px;
     max-width: 900px;
     font-size: clamp(14px, 1.2vw, 18px);
     opacity: .92;
}
 .sponsor-swiper{
     position: relative;
     z-index: 1;
     padding: 8px 4px;
}
 .sponsor-swiper-top{
     margin-bottom: 14px;
}
 .swiper-wrapper{
     align-items: center;
}
 .swiper-slide{
     width: 240px;
}
 .sponsor-card{
     width: 240px;
     height: 88px;
     border-radius: 18px;
     background: #fff;
     box-shadow: 0 18px 40px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.8);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
}
 .sponsor-card img{
     width: 78%;
     height: 78%;
     object-fit: contain;
}
 .swiper-pagination{
     display:none !important;
}
 @media (max-width: 520px){
     .swiper-slide{
         width: 190px;
    }
     .sponsor-card{
         width: 160px;
         height: 76px;
         border-radius: 16px;
    }
     .logo-card{
         width: 20px;
         height: 20px;
    }
}
 .sponsor-swiper .swiper-wrapper{
     align-items: center;
}
 .sponsor-swiper .swiper-slide{
     width: auto !important;
     flex-shrink: 0 !important;
     display: flex !important;
}
 .sponsor-card{
     width: 112px;
     height: 112px;
     border-radius: 10px;
     background: #fff;
     box-shadow: 0 14px 28px rgba(0,0,0,.14);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
}
 .sponsor-card img{
     width: auto !important;
     height: auto !important;
     max-width: 64% !important;
     max-height: 64% !important;
     object-fit: contain;
     display: block;
}
 .sponsor-swiper{
     padding: 10px 0;
     transform: translateZ(0);
}
 .sponsor-swiper {
     cursor: grab;
}
 .sponsor-swiper:active {
     cursor: grabbing;
}
 .marquee{
     position: relative;
     overflow: hidden;
     padding: 10px 0;
     user-select: none;
     touch-action: pan-y;
     cursor: grab;
}
 .marquee:active{
     cursor: grabbing;
}
 .marquee-track{
     display: flex;
     gap: 18px;
     width: max-content;
     will-change: transform;
     --offset: 0px;
}
 .logo-card{
     width: 112px;
     height: 112px;
     border-radius: 22px;
     background: #fff;
     box-shadow: 0 14px 28px rgba(0,0,0,.14);
     display: flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
     overflow: hidden;
}
 .logo-card img{
     max-width: 64%;
     max-height: 64%;
     width: auto;
     height: auto;
     object-fit: contain;
     display: block;
}
 @keyframes marqueeLeft {
     0% {
         transform: translate3d(var(--offset),0,0);
    }
     100% {
         transform: translate3d(calc(var(--offset) - 50%),0,0);
    }
}
 @keyframes marqueeRight {
     0% {
         transform: translate3d(calc(var(--offset) - 50%),0,0);
    }
     100% {
         transform: translate3d(var(--offset),0,0);
    }
}
 .marquee-left .marquee-track{
     animation: marqueeLeft 22s linear infinite;
}
 .marquee-right .marquee-track{
     animation: marqueeRight 26s linear infinite;
}
 .marquee.is-paused .marquee-track{
     animation-play-state: paused !important;
}
 .sponsor-section{
     padding: clamp(40px, 5vw, 72px) 16px;
     border-radius: 18px;
     margin-top: 48px;
}
 .sponsor-headline{
     font-size: clamp(22px, 4.2vw, 40px);
     line-height: 1.08;
     margin: 0 auto 10px;
     padding: 0 8px;
}
 .sponsor-subheadline{
     font-size: clamp(13px, 2.6vw, 18px);
     line-height: 1.55;
     margin: 0 auto 22px;
     max-width: 760px;
     padding: 0 10px;
}
 .marquee{
     padding: 10px 0;
}
 .marquee-track{
     gap: 14px;
}
 .logo-card{
     width: 112px;
     height: 112px;
     border-radius: 20px;
}
 .logo-card img{
     max-width: 66%;
     max-height: 66%;
}
 @media (max-width: 1024px){
     .sponsor-section{
         padding: 52px 16px;
         border-radius: 18px;
         margin-top: 44px;
    }
     .sponsor-headline{
         font-size: clamp(22px, 4vw, 34px);
    }
     .sponsor-subheadline{
         max-width: 680px;
         margin-bottom: 20px;
    }
     .marquee-track{
         gap: 14px;
    }
     .logo-card{
         width: 104px;
         height: 104px;
         border-radius: 18px;
    }
     .logo-card img{
         max-width: 66%;
         max-height: 66%;
    }
     .marquee-left .marquee-track{
         animation-duration: 20s;
    }
     .marquee-right .marquee-track{
         animation-duration: 24s;
    }
}
 @media (max-width: 768px){
     .sponsor-section{
         padding: 46px 14px;
         border-radius: 16px;
         margin-top: 40px;
    }
     .sponsor-headline{
         font-size: 26px;
    }
     .sponsor-subheadline{
         font-size: 14px;
         line-height: 1.6;
         margin-bottom: 18px;
    }
     .marquee{
         padding: 8px 0;
    }
     .marquee-track{
         gap: 12px;
    }
     .logo-card{
         width: 92px;
         height: 92px;
         border-radius: 16px;
         box-shadow: 0 12px 22px rgba(0,0,0,.14);
    }
     .logo-card img{
         max-width: 68%;
         max-height: 68%;
    }
     .marquee-left .marquee-track{
         animation-duration: 18s;
    }
     .marquee-right .marquee-track{
         animation-duration: 22s;
    }
}
 @media (max-width: 520px){
     .sponsor-section{
         padding: 40px 12px;
         border-radius: 14px;
         margin-top: 34px;
    }
     .sponsor-headline{
         font-size: 22px;
         letter-spacing: -0.01em;
         margin-bottom: 8px;
    }
     .sponsor-subheadline{
         font-size: 13px;
         line-height: 1.55;
         margin-bottom: 16px;
         opacity: .95;
    }
     .marquee{
         padding: 6px 0;
    }
     .marquee-track{
         gap: 10px;
    }
     .logo-card{
         width: 76px;
         height: 76px;
         border-radius: 14px;
         box-shadow: 0 10px 18px rgba(0,0,0,.14);
    }
     .logo-card img{
         max-width: 72%;
         max-height: 72%;
    }
     .marquee-left .marquee-track{
         animation-duration: 16s;
    }
     .marquee-right .marquee-track{
         animation-duration: 19s;
    }
}
 @media (max-width: 360px){
     .sponsor-headline{
         font-size: 20px;
    }
     .sponsor-subheadline{
         font-size: 12.5px;
    }
     .logo-card{
         width: 68px;
         height: 68px;
         border-radius: 12px;
    }
     .logo-card img{
         max-width: 74%;
         max-height: 74%;
    }
     .marquee-track{
         gap: 8px;
    }
}
/* ================= HERO TENTANG KAMI ================= */
 .heroTK {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     overflow: hidden;
     color: #fff;
}
 .heroTK__bg {
     position: absolute;
     inset: 0;
     background-image: url("/assets/img/evsection.avif");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     transform: scale(1.05);
}
 .heroTK__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient( to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.55) );
}
 .heroTK__content {
     position: relative;
     z-index: 2;
     max-width: 960px;
     padding: 0 24px;
     margin-left: clamp(24px, 6vw, 96px);
}
 .heroTK__kicker {
     font-size: 0.875rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     opacity: 0.9;
     margin-bottom: 16px;
}
 .heroTK__title {
     font-size: clamp(2.2rem, 4vw, 3.5rem);
     line-height: 1.15;
     font-weight: 700;
     margin-bottom: 20px;
}
 .heroTK__sub {
     max-width: 640px;
     font-size: 1.05rem;
     line-height: 1.7;
     opacity: 0.95;
     margin-bottom: 32px;
}
 .heroTK__cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 52px;
     padding: 0 32px;
     background: #d5291e;
     color: #fff;
     font-weight: 600;
     text-decoration: none;
     border-radius: 999px;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 .heroTK__cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
 @media (max-width: 768px) {
     .heroTK {
         min-height: 90vh;
    }
     .heroTK__content {
         margin-left: 0;
         text-align: left;
    }
}
/* ===================== ABOUT ===================== */
 .reveal{
     opacity: 0;
     transform: translateY(18px);
     transition: opacity .6s ease, transform .6s ease;
}
 .reveal.is-in{
     opacity:1;
     transform: translateY(0);
}
 .aboutShell{
     padding: 72px 16px;
     background: rgba(27,25,23,.03);
     border-radius: 20px;
     margin-top: 50px;
}
 .aboutXWrap{
     padding: 0;
     max-width: 1120px;
     margin: 0 auto;
}
 .aboutXHead h2{
     font-size: 30px;
     margin:0 0 8px;
}
 .aboutXHead p{
     margin:0;
     opacity:.75;
     line-height:1.6;
     max-width: 720px;
}
 .aboutXGrid{
     margin-top: 28px;
     display: grid;
     grid-template-columns: 360px 1fr;
     gap: 18px;
     align-items: start;
}
 .aboutXNav{
     display:flex;
     flex-direction:column;
     gap:12px;
}
 .aboutXCard{
     display:flex;
     align-items:center;
     gap:12px;
     width:100%;
     padding:14px 14px;
     border-radius: 16px;
     border:1px solid rgba(0,0,0,.08);
     background:#fff;
     cursor:pointer;
     transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
 .aboutXCard:hover{
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
 .aboutXCard.is-active{
     border-color: rgba(220,38,38,.5);
     box-shadow: 0 10px 30px rgba(220,38,38,.12);
}
 .aboutXCard .tag{
     width:28px;
     height:28px;
     border-radius:999px;
     display:grid;
     place-items:center;
     background: rgba(220,38,38,.12);
     color: rgb(220,38,38);
     font-weight:800;
}
 .aboutXCard .title{
     font-weight:900;
}
 .aboutXCard .desc{
     font-size: 13px;
     opacity:.75;
     margin-top:2px;
}
 .aboutXCard .arrow{
     margin-left:auto;
     opacity:.6;
}
 .aboutXPanel{
     border-radius: 18px;
     overflow:hidden;
     border:1px solid rgba(0,0,0,.08);
     background:#fff;
}
 .aboutXBanner{
     position:relative;
     height: 220px;
     background: url("assets/img/evsection.avif") center/cover no-repeat;
}
 .aboutXBanner .overlay{
     position:absolute;
     inset:0;
     background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.05));
}
 .aboutXBanner .bannerText{
     position:absolute;
     left:18px;
     bottom:16px;
     color:#fff;
}
 .aboutXBanner .kicker{
     font-size: 12px;
     letter-spacing:.18em;
     opacity:.85;
}
 .aboutXBanner h3{
     margin:6px 0 0;
     font-size: 26px;
}
 .aboutXContent{
     padding: 18px;
     line-height:1.7;
}
 .aboutXContent.is-fading{
     opacity: 0;
     transform: translateY(10px);
}
 .aboutXContent{
     transition: opacity .35s ease, transform .35s ease;
}
 .miniTimeline{
     margin-top: 14px;
     display:grid;
     gap:10px;
}
 .tItem{
     display:flex;
     gap:10px;
     align-items:flex-start;
}
 .tItem .dot{
     width:10px;
     height:10px;
     border-radius:999px;
     margin-top:6px;
     background: rgb(220,38,38);
}
 .aboutAccWrap{
     display:none;
     padding: 0;
     max-width: 1120px;
     margin: 0 auto;
}
 .aboutAccHead h2{
     margin:0 0 8px;
     font-size: 36px;
}
 .aboutAccHead p{
     margin:0;
     opacity:.75;
     line-height:1.6;
     max-width: 760px;
}
 .aboutAccList{
     margin-top: 18px;
     display:grid;
     gap:14px;
}
 .accItem{
     border-radius: 18px;
     border: 1px solid rgba(0,0,0,.08);
     background:#fff;
     overflow:hidden;
     box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
 .accBtn{
     width:100%;
     display:grid;
     grid-template-columns: 56px 1fr 44px;
     align-items:center;
     padding: 14px;
     background:#fff;
     border:0;
     cursor:pointer;
}
 .accBtn .num{
     width:40px;
     height:40px;
     border-radius:999px;
     display:grid;
     place-items:center;
     font-weight: 900;
     color: rgb(220,38,38);
     background: rgba(220,38,38,.10);
}
 .accBtn .t{
     font-weight: 900;
     font-size: 16px;
}
 .accBtn .d{
     display:block;
     font-size: 13px;
     opacity:.72;
     margin-top:2px;
}
 .accBtn .ic{
     position: relative;
     width:34px;
     height:34px;
     border-radius:12px;
     background: rgba(0,0,0,.06);
}
 .accBtn .ic{
     width:34px;
     height:34px;
     border-radius:12px;
     background: rgba(0,0,0,.06);
     display:grid;
     place-items:center;
}
 .accBtn .icSvg{
     width:18px;
     height:18px;
     display:block;
}
 .accBtn .icSvg path{
     stroke:#111;
     stroke-width:2;
     stroke-linecap:round;
     fill:none;
     transition: opacity .2s ease;
}
 .accItem.is-open .accBtn .icSvg .v{
     opacity: 0;
}
 .accPanel{
     max-height: 0;
     overflow:hidden;
     transition: max-height .35s ease;
     background:#fff;
}
 .accBanner{
     height: 140px;
     background: center/cover no-repeat;
     position: relative;
}
 .accBanner .overlay{
     position:absolute;
     inset:0;
     background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05));
}
 .accBody{
     padding: 14px;
     line-height:1.7;
     color:#111;
}
 .pillGrid{
     display:flex;
     flex-wrap:wrap;
     gap:10px;
     margin-top:10px;
}
 .pill{
     padding: 9px 12px;
     border-radius: 999px;
     font-weight: 800;
     background: rgba(220,38,38,.10);
     color: rgb(220,38,38);
}
 @media (min-width: 981px){
     .aboutXCard{
         text-align: left;
    }
}
 @media (max-width: 980px){
     .aboutXWrap{
         display:none;
    }
     .aboutAccWrap{
         display:block;
    }
}
 .abti-members {
     padding: 40px 0;
     background: #f6f7f9;
     color: #111827;
     border-radius: 20px;
     margin-Top: 50px;
}
 .abti-container {
     width: min(1100px, calc(100% - 32px));
     margin: 0 auto;
}
 .sr-only {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
     margin: -1px !important;
     overflow: hidden !important;
     clip: rect(0, 0, 0, 0) !important;
     white-space: nowrap !important;
     border: 0 !important;
}
 .abti-header {
     display: flex;
     gap: 16px;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 16px;
}
 .abti-title {
     margin: 0;
     font-size: 20px;
     font-weight: 650;
     letter-spacing: -0.01em;
}
 .abti-subtitle {
     margin: 6px 0 0;
     font-size: 13px;
     color: #6b7280;
}
 .abti-muted {
     color: #6b7280;
     font-size: 13px;
}
 .abti-toolbar {
     display: flex;
     gap: 10px;
     align-items: center;
}
 .abti-search input, 
 .abti-dd {
     position: relative;
}
 .abti-dd-btn {
     height: 38px;
     padding: 0 12px;
     border: 1px solid #e5e7eb;
     background: #ffffff;
     border-radius: 10px;
     outline: none;
     font-size: 14px;
     color: #111827;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
}
 .abti-dd-btn:focus {
     border-color: #c7d2fe;
     box-shadow: 0 0 0 4px rgba(213, 41, 30, 0.18);
}
 .abti-dd-caret {
     font-size: 12px;
     opacity: 0.8;
}
 .abti-dd-menu {
     position: absolute;
     right: 0;
     top: calc(100% + 8px);
     width: 220px;
     background: #ffffff;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     box-shadow: 0 14px 40px rgba(17, 24, 39, 0.12);
     padding: 6px;
     display: none;
     z-index: 10;
}
 .abti-dd.is-open .abti-dd-menu {
     display: block;
}
 .abti-dd-item {
     width: 100%;
     text-align: left;
     border: 1px solid transparent;
     background: transparent;
     padding: 10px 10px;
     border-radius: 10px;
     font-size: 13px;
     color: #111827;
     cursor: pointer;
}
 .abti-dd-item:hover {
     background: #f3f4f6;
}
 .abti-dd-item.is-active {
     background: #d5291e;
     border-color: #d5291e;
     color: #ffffff;
}
 .abti-searchbox {
     height: 38px;
     width: min(420px, 52vw);
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 0 10px;
     background: #ffffff;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
}
 .abti-searchbox:focus-within {
     border-color: #c7d2fe;
     box-shadow: 0 0 0 4px rgba(213, 41, 30, 0.18);
}
 .abti-search-ico {
     width: 20px;
     height: 20px;
     display: grid;
     place-items: center;
     color: #d5291e;
     flex: 0 0 20px;
}
 .abti-ico {
     width: 16px;
     height: 16px;
     display: block;
}
 .abti-ico circle, .abti-ico path {
     stroke: currentColor;
     stroke-width: 2;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
}
 .abti-search-input {
     border: 0;
     outline: none;
     width: 100%;
     font-size: 14px;
     color: #111827;
     background: transparent;
}
 .abti-search-input::-webkit-search-cancel-button, .abti-search-input::-webkit-search-decoration, .abti-search-input::-webkit-search-results-button, .abti-search-input::-webkit-search-results-decoration {
     -webkit-appearance: none;
     appearance: none;
     display: none;
}
 .abti-search-input::-ms-clear, .abti-search-input::-ms-reveal {
     display: none;
     width: 0;
     height: 0;
}
 .abti-search-input::placeholder {
     color: #9ca3af;
}
 .abti-search-clear {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     border: 1px solid transparent;
     background: transparent;
     color: #6b7280;
     cursor: pointer;
     display: none;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     line-height: 1;
}
 .abti-search-clear:hover {
     background: #f3f4f6;
     color: #111827;
}
 .abti-search-clear.is-visible {
     display: inline-flex;
}
 @media (max-width: 720px) {
     .abti-searchbox {
         width: 100%;
    }
}
 .abti-search input:focus, .abti-select select:focus {
     border-color: #c7d2fe;
     box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}
 .abti-panel {
     background: #ffffff;
     border: 1px solid #e5e7eb;
     border-radius: 14px;
     box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
     overflow: hidden;
}
 .abti-list {
     padding: 14px;
}
 .abti-list-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 6px 4px 12px;
     border-bottom: 1px solid #f1f5f9;
}
 .abti-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 28px;
     height: 22px;
     padding: 0 8px;
     border-radius: 999px;
     background: rgba(213, 41, 30, 0.08);
     border: 1px solid rgba(213, 41, 30, 0.3);
     font-size: 12px;
     font-weight: 600;
     color: #d5291e;
}
 .abti-hint {
     display: none;
}
 .abti-rows {
     padding: 10px 0;
     display: grid;
     gap: 8px;
}
 .abti-row {
     display: grid;
     grid-template-columns: 44px 1fr auto;
     gap: 12px;
     align-items: center;
     padding: 12px 12px;
     border: 1px solid #eef2f7;
     background: #ffffff;
     border-radius: 12px;
     transition: background 140ms ease, border-color 140ms ease;
}
 .abti-row:hover {
     background: #fafafa;
     border-color: #e5e7eb;
}
 .abti-logo {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
     background: #f9fafb;
     display: grid;
     place-items: center;
     overflow: hidden;
}
 .abti-logo img {
     width: 85%;
     height: 85%;
     object-fit: cover;
}
 .abti-main {
     min-width: 0;
}
 .abti-name {
     margin: 0;
     font-size: 14px;
     font-weight: 650;
     color: #111827;
     line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .abti-meta {
     margin: 4px 0 0;
     font-size: 13px;
     color: #6b7280;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .abti-actions {
     display: flex;
     gap: 8px;
     align-items: center;
}
 .abti-btn {
     height: 36px;
     padding: 0 12px;
     border-radius: 10px;
     border: 1px solid #d5291e;
     background: #d5291e;
     color: #ffffff;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
}
 .abti-btn:disabled {
     opacity: 0.55;
     cursor: not-allowed;
}
 .abti-btn-ghost {
     background: transparent;
     color: #111827;
     border: 1px solid #e5e7eb;
}
 .abti-btn-ghost:hover, .abti-btn-ghost:focus-visible {
     background: #b81f16;
     border-color: #b81f16;
     color: #ffffff;
}
 .abti-pagination {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     border-top: 1px solid #f1f5f9;
     padding: 12px 4px 4px;
     margin-top: 8px;
}
 .abti-pageinfo {
     font-size: 13px;
     color: #6b7280;
}
 .abti-drawer {
     position: fixed;
     inset: 0;
     pointer-events: none;
     opacity: 0;
     transition: opacity 160ms ease;
     z-index: 1200;
}
 .abti-drawer.is-open {
     pointer-events: auto;
     opacity: 1;
}
 .abti-drawer-backdrop {
     position: absolute;
     inset: 0;
     background: rgba(17, 24, 39, 0.44);
}
 .abti-drawer-panel {
     position: absolute;
     top: 0;
     right: 0;
     width: min(460px, 92vw);
     height: 100%;
     background: #ffffff;
     border-left: 1px solid #e5e7eb;
     box-shadow: -12px 0 30px rgba(17, 24, 39, 0.12);
     display: flex;
     flex-direction: column;
     transform: translateX(14px);
     transition: transform 160ms ease;
     border-radius: 18px 0 0 18px;
}
 .abti-drawer.is-open .abti-drawer-panel {
     transform: translateX(0);
}
 .abti-drawer-head {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 12px;
     padding: 16px;
     border-bottom: 1px solid #f1f5f9;
}
 .abti-drawer-title {
     margin: 0;
     font-size: 16px;
     font-weight: 700;
}
 .abti-drawer-subtitle {
     margin: 6px 0 0;
     font-size: 13px;
     color: #6b7280;
}
 .abti-iconbtn {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     border: 1px solid #e5e7eb;
     background: #ffffff;
     cursor: pointer;
     font-size: 16px;
     line-height: 1;
}
 .abti-iconbtn:hover {
     background: #f3f4f6;
}
 .abti-drawer-body {
     padding: 16px;
     overflow: auto;
     display: grid;
     gap: 12px;
}
 .abti-detail-card {
     border: 1px solid #eef2f7;
     border-radius: 12px;
     padding: 12px;
     background: #ffffff;
}
 .abti-kv {
     display: grid;
     grid-template-columns: 120px 1fr;
     gap: 10px 12px;
     align-items: start;
}
 .abti-k {
     font-size: 12px;
     color: #6b7280;
     margin: 0;
}
 .abti-v {
     font-size: 13px;
     color: #111827;
     margin: 0;
     word-break: break-word;
}
 .abti-link {
     color: #d5291e;
     text-decoration: underline;
     text-underline-offset: 2px;
}
 .abti-link:hover {
     text-decoration-thickness: 2px;
}
 .abti-reveal {
     display: inline-flex;
     align-items: center;
     gap: 8px;
}
 .abti-chip {
     height: 26px;
     padding: 0 10px;
     border-radius: 999px;
     border: 1px solid #e5e7eb;
     background: #f9fafb;
     font-size: 12px;
     font-weight: 600;
     color: #111827;
     cursor: pointer;
}
 .abti-drawer-foot {
     display: flex;
     gap: 10px;
     padding: 16px;
     border-top: 1px solid #f1f5f9;
}
 @media (max-width: 720px) {
     .abti-header {
         flex-direction: column;
         align-items: stretch;
         gap: 12px;
    }
     .abti-toolbar {
         width: 100%;
         flex-wrap: wrap;
         gap: 10px;
         justify-content: space-between;
         overflow: visible;
    }
     .abti-searchbox {
         width: 100%;
         flex: 1 1 100%;
    }
     .abti-panel {
         overflow: visible;
    }
     .abti-dd {
         width: 100%;
         position: relative;
    }
     .abti-dd-btn {
         width: 100%;
         height: 36px;
         padding: 0 10px;
         gap: 8px;
         font-size: 12px;
         border-radius: 10px;
         justify-content: space-between;
    }
     .abti-dd-caret {
         font-size: 10px;
         opacity: 0.85;
    }
     .abti-dd-menu {
         left: 0;
         right: 0;
         width: auto;
         max-width: none;
    }
     .abti-row {
         grid-template-columns: 44px 1fr auto;
         grid-template-areas: "logo main actions";
         align-items: center;
    }
     .abti-logo {
         grid-area: logo;
    }
     .abti-main {
         grid-area: main;
         min-width: 0;
    }
     .abti-actions {
         grid-area: actions;
         justify-content: flex-end;
         margin-top: 0;
    }
     .abti-btn, .abti-btn-ghost {
         height: 34px;
         padding: 0 10px;
         border-radius: 10px;
         font-size: 12px;
    }
     .abti-pagination {
         gap: 8px;
         align-items: center;
    }
     .abti-pageinfo {
         font-size: 12px;
    }
     .abti-drawer-panel {
         width: min(420px, 92vw);
    }
     .abti-kv {
         grid-template-columns: 100px 1fr;
    }
}
/* ===================== PROGRAM KERJA ===================== */
 :root{
     --pk-text: #0b1220;
     --pk-muted: rgba(11,18,32,.68);
     --pk-line: rgba(11,18,32,.12);
     --pk-white: #fff;
     --pk-accent: #d5291e;
     --pk-accent-dark: #b91f16;
     --pk-accent-soft: rgba(213,41,30,.18);
     --pk-shadow: 0 18px 50px rgba(0,0,0,.25);
     --pk-radius: 22px;
}
 .pk-section{
     background:#f6f7f9;
     padding-bottom: 28px;
     border-radius: 28px;
     margin: 28px auto;
}
 .pk-bg{
     background: transparent;
     border-radius: 28px;
     width: min(1100px, calc(100% - 32px));
     overflow: hidden;
     margin: 0 auto;
}
 .pk-bg .pk-hero{
     position: relative;
     width: 100%;
     border-radius: 28px 28px 0 0;
     overflow: hidden;
     min-height: 280px;
     display: grid;
     align-items: end;
     background: linear-gradient(135deg,rgba(213,41,30,.55),rgba(213,41,30,.12)), url("https://images.unsplash.com/photo-1521412644187-c49fa049e84d?auto=format&fit=crop&w=1800&q=70");
     background-size: cover;
     background-position: center;
     margin-top: 25px;
}
 .pk-hero__overlay{
     position:absolute;
     inset:0;
     background: linear-gradient(90deg, rgba(8,12,22,.82) 0%, rgba(8,12,22,.60) 55%, rgba(8,12,22,.28) 100%);
}
 .pk-hero__content{
     position: relative;
     width: 100%;
     height: 100%;
     color: #fff;
}
 .pk-hero__default, .pk-hero__detail{
     position: absolute;
     left: 0;
     bottom: 0;
     padding: 28px 44px;
     width: 100%;
     max-width: 820px;
     transition: opacity .35s ease, transform .35s ease, filter .35s ease;
     will-change: transform, opacity;
}
 .pk-hero__detail{
     opacity: 0;
     transform: translateY(10px);
     filter: blur(2px);
     pointer-events: none;
}
 .pk-hero.is-detail .pk-hero__default{
     opacity: 0;
     transform: translateY(-10px);
     filter: blur(2px);
     pointer-events: none;
}
 .pk-hero.is-detail .pk-hero__detail{
     opacity: 1;
     transform: translateY(0);
     filter: blur(0);
     pointer-events: auto;
}
 .pk-eyebrow{
     letter-spacing: .18em;
     font-weight: 800;
     font-size: 12px;
     opacity: .92;
     margin: 0 0 10px;
     text-transform: uppercase;
}
 .pk-title{
     font-size: clamp(28px, 3.2vw, 46px);
     margin: 0 0 12px;
     line-height: 1.08;
}
 .pk-subtitle{
     margin: 0 0 20px;
     color: rgba(255,255,255,.80);
     font-size: 15.5px;
     line-height: 1.6;
}
 .pk-hero__desc{
     max-width: 64ch;
}
 .pk-hero__actions{
     display:flex;
     gap: 12px;
     flex-wrap: wrap;
}
 .pk-btn{
     appearance: none;
     border: 1px solid transparent;
     border-radius: 14px;
     padding: 10px 14px;
     font-weight: 800;
     font-size: 14px;
     cursor: pointer;
     text-decoration: none;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap: 8px;
}
 .pk-btn--primary{
     background: var(--pk-accent);
     color: #fff;
     box-shadow: 0 12px 28px rgba(255,59,48,.22);
}
 .pk-btn--primary:hover{
     filter: brightness(1.03);
}
 .pk-btn--ghost{
     background: #fff;
     border-color: rgba(11,18,32,.14);
     color: #0b1220;
}
 .pk-btn--ghost:hover{
     background: rgba(11,18,32,.03);
}
 .pk-hero .pk-btn--ghost{
     background: rgba(255,255,255,.10);
     border-color: rgba(255,255,255,.22);
     color: #fff;
}
 .pk-hero .pk-btn--ghost:hover{
     background: rgba(255,255,255,.16);
}
 .pk-btn[disabled]{
     opacity: .55;
     cursor: not-allowed;
}
 .pk-container{
     width: 100%;
     margin: 0;
}
 .pk-header{
     display:flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 16px;
     margin: 22px 0 14px;
}
 .pk-h3{
     margin: 0;
     font-size: 18px;
     color: var(--pk-text);
}
 .pk-muted{
     color: var(--pk-muted);
     margin: 6px 0 0;
}
 .pk-tools{
     display:flex;
     gap: 10px;
}
 .pk-search{
     display:flex;
     align-items:center;
     gap: 8px;
     padding: 10px 12px;
     border-radius: 14px;
     border: 1px solid rgba(11,18,32,.12);
     background: #fff;
     min-width: min(380px, 72vw);
}
 .pk-search__icon{
     opacity: .55;
     color: var(--pk-text);
}
 .pk-search input{
     border: none;
     outline: none;
     width: 100%;
     font-size: 14px;
     color: var(--pk-text);
}
 .pk-grid{
     display:grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
}
 .pk-card{
     position: relative;
     border-radius: var(--pk-radius);
     overflow: hidden;
     border: 1px solid rgba(11,18,32,.10);
     box-shadow: 0 10px 28px rgba(11,18,32,.06);
     background: #0b1220;
     cursor: pointer;
}
 .pk-thumb{
     aspect-ratio: 16 / 9;
     position: relative;
     overflow: hidden;
}
 .pk-thumb img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.02);
     transition: transform .4s ease;
}
 .pk-card::after{
     content:"";
     position:absolute;
     inset:0;
     background: linear-gradient( 0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.08) 100% ), linear-gradient( 90deg, rgba(213,41,30,.28), rgba(213,41,30,.08) );
     pointer-events:none;
}
 .pk-card:hover .pk-thumb img{
     transform: scale(1.06);
}
 .pk-overlay{
     position:absolute;
     inset:0;
     padding: 18px 18px;
     display:flex;
     flex-direction: column;
     justify-content: flex-end;
     gap: 12px;
     z-index: 2;
     color: #fff;
}
 .pk-overlay__title{
     margin: 0;
     font-size: 18px;
     line-height: 1.08;
     letter-spacing: .2px;
     font-weight: 900;
     max-width: 22ch;
}
 .pk-overlay__line{
     height: 2px;
     width: 100%;
     background: rgba(255,255,255,.65);
     border-radius: 999px;
     opacity: .9;
}
 .pk-overlay__footer{
     display:flex;
     align-items:center;
     justify-content: space-between;
     gap: 10px;
     font-size: 12px;
}
 .pk-overlay__read{
     font-weight: 800;
     letter-spacing: .02em;
     opacity: .9;
}
 .pk-overlay__chip{
     background: rgba(255,255,255,.14);
     border: 1px solid rgba(255,255,255,.20);
     padding: 6px 12px;
     border-radius: 14px;
     font-weight: 900;
     min-width: 80px;
     text-align:center;
}
 .pk-card.is-active .pk-overlay__chip{
     background: rgba(255,255,255,.92);
     color: var(--pk-accent);
     border-color: rgba(255,255,255,.85);
}
 .pk-pagination{
     display:flex;
     justify-content: center;
     align-items: center;
     gap: 14px;
     margin: 18px 0 0;
}
 .pk-pagination .pk-btn{
     padding: 10px 18px;
     border-radius: 999px;
     font-weight: 900;
}
 .pk-pagination .pk-pageinfo{
     padding: 10px 14px;
     border-radius: 999px;
     border: 1px solid rgba(11,18,32,.10);
     background: rgba(11,18,32,.02);
}
 .pk-pageinfo{
     color: rgba(11,18,32,.70);
     font-weight: 600;
     font-size:12px;
}
 @media (max-width: 980px){
     .pk-bg{
         width: min(1100px, calc(100% - 28px));
         border-radius: 24px;
    }
     .pk-bg .pk-hero{
         margin-top: 18px;
         min-height: 320px;
         border-radius: 24px 24px 0 0;
    }
     .pk-hero__default, .pk-hero__detail{
         padding: 26px 26px;
         max-width: 860px;
    }
     .pk-header{
         gap: 12px;
    }
     .pk-search{
         min-width: min(420px, 100%);
    }
     .pk-grid{
         grid-template-columns: repeat(2, 1fr);
         gap: 14px;
    }
     .pk-overlay{
         padding: 16px 16px;
         gap: 12px;
    }
     .pk-overlay__title{
         font-size: 16px;
         max-width: 26ch;
    }
     .pk-overlay__chip{
         min-width: 92px;
         padding: 8px 12px;
         font-size: 12px;
         border-radius: 14px;
    }
}
 @media (max-width: 768px){
     .pk-section{
         margin: 18px auto;
         border-radius: 24px;
         padding-bottom: 22px;
    }
     .pk-bg{
         width: calc(100% - 24px);
         border-radius: 22px;
    }
     .pk-bg .pk-hero{
         min-height: 360px;
    }
     .pk-hero__overlay{
         background: linear-gradient( 90deg, rgba(8,12,22,.86) 0%, rgba(8,12,22,.62) 58%, rgba(8,12,22,.32) 100% );
    }
     .pk-hero__default, .pk-hero__detail{
         padding: 22px 18px;
         max-width: 100%;
    }
     .pk-title{
         font-size: clamp(26px, 6vw, 34px);
         line-height: 1.12;
    }
     .pk-subtitle{
         font-size: 14px;
         line-height: 1.65;
         max-width: 60ch;
    }
     .pk-hero__actions{
         gap: 10px;
    }
     .pk-hero .pk-btn{
         padding: 7px 10px;
         font-size: 10px;
         border-radius: 8px;
    }
     .pk-container{
         width: 100%;
    }
     .pk-header{
         flex-direction: column;
         align-items: stretch;
         margin: 18px 0 12px;
    }
     .pk-tools{
         width: 100%;
    }
     .pk-search{
         width: 100%;
         min-width: 100%;
         padding: 12px 12px;
         border-radius: 14px;
    }
     .pk-grid{
         gap: 12px;
    }
}
 @media (max-width: 640px){
     .pk-section{
         margin: 14px auto;
         border-radius: 22px;
    }
     .pk-pagination{
         display:flex;
         align-items:center;
         justify-content:center;
         gap:10px;
         flex-wrap:nowrap;
    }
     .pk-pagination .pk-btn{
         width: auto !important;
         flex: 0 0 auto !important;
         display: inline-flex !important;
         height: 34px;
         padding: 8px 12px;
         border-radius: 999px;
         white-space: nowrap;
    }
     .pk-pagination .pk-pageinfo{
         width: auto !important;
         flex: 0 0 auto !important;
         white-space: nowrap;
         padding: 6px 10px;
         font-size: 11px;
         border-radius: 999px;
         font-weight: 400;
    }
     .pk-bg{
         width: calc(100% - 20px);
         border-radius: 20px;
    }
     .pk-bg .pk-hero{
         margin-top: 14px;
         min-height: 380px;
         border-radius: 20px 20px 0 0;
    }
     .pk-hero__default, .pk-hero__detail{
         padding: 20px 16px;
    }
     .pk-eyebrow{
         font-size: 11px;
         margin-bottom: 10px;
    }
     .pk-title{
         font-size: 28px;
         margin-bottom: 12px;
    }
     .pk-subtitle{
         font-size: 14px;
         line-height: 1.7;
         margin-bottom: 18px;
    }
     .pk-hero__actions{
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 10px;
    }
     .pk-btn{
         width: 100%;
         height: 35px;
         padding: 0 12px;
         border-radius: 12px;
         font-size: 10px;
    }
     .pk-container{
         width: 100%;
    }
     .pk-grid{
         grid-template-columns: 1fr;
         gap: 12px;
    }
     .pk-card{
         border-radius: 18px;
    }
     .pk-overlay{
         padding: 14px 12px;
         gap: 10px;
    }
     .pk-overlay__title{
         font-size: 13px;
         line-height: 1.15;
         max-width: 100%;
    }
     .pk-overlay__footer{
         font-size: 11px;
    }
     .pk-overlay__read{
         font-size: 11px;
    }
     .pk-overlay__chip{
         min-width: 78px;
         padding: 7px 10px;
         font-size: 11px;
         border-radius: 12px;
    }
     .pk-pagination{
         gap: 10px;
         margin-top: 14px;
    }
     .pk-pagination .pk-btn{
         padding: 10px 14px;
         height: auto;
    }
     .pk-pagination .pk-pageinfo{
         padding: 10px 12px;
    }
}
 @media (max-width: 420px){
     .pk-bg{
         width: calc(100% - 16px);
    }
     .pk-bg .pk-hero{
         min-height: 400px;
    }
     .pk-title{
         font-size: 26px;
    }
     .pk-subtitle{
         font-size: 13.5px;
    }
     .pk-hero__actions{
         grid-template-columns: 1fr;
    }
     .pk-grid{
         gap: 10px;
    }
     .pk-overlay{
         padding: 12px 10px;
    }
     .pk-overlay__title{
         font-size: 12.5px;
    }
     .pk-overlay__chip{
         min-width: 72px;
         font-size: 10.5px;
         padding: 6px 9px;
    }
}
/* ===== WEST JAVA CORNER ===== */
 .enterprise-news-video{
     position: relative;
     overflow: hidden;
     padding: 64px 0;
     border-radius: 20px;
     margin-bottom: 50px;
     background: url("assets/img/evsection.avif") center / cover no-repeat;
     color: #1b1917;
}
 .enterprise-news-video::before{
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     z-index:0;
     background: linear-gradient( 180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.82) 100% );
}
 .enterprise-news-video > *{
     position:relative;
     z-index:1;
}
 .env-container {
     width: min(1120px, calc(100% - 48px));
     margin-inline: auto;
}
 .env-grid {
     display: grid;
     grid-template-columns: 1.15fr 0.85fr;
     gap: 20px;
     align-items: stretch;
}
 .env-card {
     background: rgba(255,255,255,0.84);
     border: 1px solid rgba(27,25,23,0.10);
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 10px 28px rgba(213,41,30,0.10), 0 4px 12px rgba(27,25,23,0.06);
     display: flex;
     flex-direction: column;
     min-height: 520px;
}
 .env-card__header {
     padding: 20px 20px 10px;
}
 .env-title {
     font-size: 20px;
     line-height: 1.2;
     margin: 0 0 6px;
     letter-spacing: 0.2px;
     color: #A72823;
}
 .env-subtitle {
     margin: 0;
     color: rgba(27,25,23,0.72);
     font-size: 13.5px;
     line-height: 1.55;
}
 .env-card__footer {
     padding: 14px 20px 18px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     margin-top: auto;
}
 .env-link {
     color: #A72823;
     text-decoration: none;
     font-size: 13px;
}
 .env-link:hover {
     color: #8F1D1B;
     text-decoration: underline;
}
 .env-news__list {
     padding: 8px 20px 18px;
     display: grid;
     gap: 12px;
}
 .env-newsitem {
     border-radius: 14px;
     padding: 14px 14px 12px;
     background: rgba(255,255,255,0.66);
     border: 1px solid rgba(27,25,23,0.10);
}
 .env-newsitem__meta {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
     color: rgba(27,25,23,0.64);
     font-size: 12px;
}
 .env-dot {
     width: 4px;
     height: 4px;
     border-radius: 999px;
     background: #1b1917;
     display: inline-block;
}
 .env-newsitem__title {
     margin: 0 0 6px;
     font-size: 15px;
     line-height: 1.35;
     color: #1b1917;
}
 .env-newsitem__desc {
     margin: 0 0 12px;
     font-size: 13px;
     line-height: 1.55;
     color: rgba(27,25,23,0.78);
}
 .env-newsitem__actions {
     display: flex;
     gap: 10px;
     align-items: center;
}
 .env-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 34px;
     padding: 0 12px;
     border-radius: 999px;
     font-size: 12.5px;
     text-decoration: none;
     user-select: none;
     border: 1px solid transparent;
     transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
     will-change: transform;
}
 .env-btn:active {
     transform: translateY(1px);
}
 .env-btn--ghost {
     background: rgba(213,41,30,0.08);
     color: #A72823;
     border-color: rgba(213,41,30,0.28);
}
 .env-btn--ghost:hover {
     background: rgba(213,41,30,0.12);
     border-color: rgba(213,41,30,0.45);
}
 .env-video__frame {
     padding: 10px 20px 18px;
     flex: 1;
     display: flex;
}
 .env-reels {
     width: 100%;
     height: 100%;
     border-radius: 14px;
     overflow-y: auto;
     overflow-x: hidden;
     scroll-snap-type: y mandatory;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     background: rgba(255, 255, 255, 0.03);
     outline: none;
     scrollbar-width: none;
     -ms-overflow-style: none;
}
 .env-reels::-webkit-scrollbar {
     width: 0;
     height: 0;
}
 .env-reel {
     height: 100%;
     width: 100%;
     scroll-snap-align: start;
     scroll-snap-stop: always;
     position: relative;
     overflow: hidden;
}
 .env-reel__iframe {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 140%;
     height: 110%;
     transform: translate(-50%, -50%);
     border: 0;
     display: block;
     background: rgba(255, 255, 255, 0.03);
}
 .env-reel__meta {
     position: absolute;
     left: 12px;
     right: 12px;
     bottom: 12px;
     display: flex;
     gap: 10px;
     align-items: center;
     justify-content: space-between;
     pointer-events: none;
}
 .env-reel__pill {
     pointer-events: none;
     font-size: 12px;
     padding: 8px 10px;
     border-radius: 999px;
     color: rgba(232, 238, 252, 0.92);
     background: rgba(0, 0, 0, 0.35);
     border: 1px solid rgba(255, 255, 255, 0.14);
}
 @media (max-width: 980px) {
     .env-video__frame {
         min-height: 340px;
    }
}
 .env-video__footer {
     display: flex;
     justify-content: flex-start;
}
 @media (max-width: 980px) {
     .env-grid {
         grid-template-columns: 1fr;
    }
     .env-card {
         min-height: unset;
    }
     .env-video__frame {
         min-height: 340px;
    }
}
 @media (max-width: 768px) {
     .env-grid {
         grid-template-columns: 1fr;
         gap: 16px;
    }
     .env-card {
         min-height: unset;
    }
     .env-card.env-video {
         min-height: 82vh;
    }
     .env-video__frame {
         padding: 10px 14px 14px;
         flex: 1;
         min-height: 0;
         display: flex;
    }
     .env-reels {
         width: 100%;
         aspect-ratio: 9 / 16;
         height: auto;
         max-height: 72vh;
         border-radius: 14px;
         overflow-y: auto;
         overflow-x: hidden;
         scroll-snap-type: y mandatory;
         scroll-behavior: smooth;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
         -ms-overflow-style: none;
    }
     .env-reels::-webkit-scrollbar {
         width: 0;
         height: 0;
    }
     .env-reel {
         height: 100%;
         width: 100%;
         position: relative;
         scroll-snap-align: start;
         scroll-snap-stop: always;
         overflow: hidden;
        /* crop */
    }
     .env-reel__iframe {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 145%;
         height: 115%;
         transform: translate(-50%, -48%);
         border: 0;
         display: block;
         background: rgba(255, 255, 255, 0.03);
    }
     .env-reel__meta {
         left: 10px;
         right: 10px;
         bottom: 10px;
    }
     .env-reel__pill {
         font-size: 11px;
         padding: 7px 9px;
    }
     .env-card__footer {
         padding: 12px 14px 14px;
    }
     .env-video__footer {
         justify-content: flex-start;
    }
}
 @media (max-width: 380px) {
     .env-card.env-video {
         min-height: 86vh;
    }
     .env-reels {
         max-height: 74vh;
    }
     .env-reel__iframe {
         width: 152%;
         height: 118%;
         transform: translate(-50%, -47%);
    }
}
 @media (max-width: 768px) {
     .env-newsitem {
         display: none;
    }
     .env-newsitem.is-active {
         display: block;
    }
     .env-news__footer{
         display:flex;
         align-items:center;
         justify-content:space-between;
         gap:12px;
    }
     .env-news__pager{
         display:inline-flex;
         gap:8px;
         align-items:center;
         flex:0 0 auto;
    }
     .env-pagerbtn{
         height:32px;
         padding:0 10px;
         border-radius:8px;
         border:1px solid rgba(27,25,23,0.16);
         background: rgba(255,255,255,0.55);
         color: #1b1917;
         font-size:12px;
         letter-spacing:.2px;
         cursor:pointer;
         transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
         user-select:none;
         white-space:nowrap;
    }
     .env-pagerbtn:hover{
         background: rgba(27,25,23,0.06);
         border-color: rgba(27,25,23,0.24);
    }
     .env-pagerbtn:active{
         transform: translateY(1px);
    }
}
/* ========================================= BERITA LAINNYA ========================================= */
 .moreNews{
     padding: 56px 0;
}
 .moreNews__container{
     width: min(1120px, calc(100% - 32px));
     margin: 0 auto;
}
 .moreNews__head{
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 18px;
}
 .moreNews__title{
     margin: 0;
     font-size: clamp(20px, 2.2vw, 28px);
     letter-spacing: -0.02em;
}
 .moreNews__sub{
     margin: 0;
     color: rgba(0,0,0,.62);
     font-size: 14px;
}
 .moreNewsGrid{
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 18px;
     margin-top: 10px;
}
 @media (max-width: 980px){
     .moreNewsGrid{
         grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
 @media (max-width: 640px){
     .moreNewsGrid{
         grid-template-columns: 1fr;
    }
}
 .moreNewsCard{
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     border: 1px solid rgba(0,0,0,.10);
     box-shadow: 0 14px 40px rgba(0,0,0,.10);
     background: #111;
     min-height: 240px;
     transform: translateZ(0);
}
 .moreNewsCard__media{
     position: absolute;
     inset: 0;
}
 .moreNewsCard__media img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transform: scale(1.03);
}
 .moreNewsCard__overlay{
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.28) 35%, rgba(0,0,0,.76) 100%);
}
 .moreNewsCard__meta{
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 6px;
}
 .moreNewsCard__date{
     font-size: 12px;
     opacity: .92;
     margin-bottom: 6px;
}
 .moreNewsCard__source{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 18px;
     padding: 0 8px;
     border-radius: 999px;
     border: 1px solid rgba(255,255,255,.75);
     background: transparent;
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .14em;
     text-transform: uppercase;
     margin: 0;
     line-height: 1;
     color: #fff;
     text-decoration: none;
}
 .moreNewsCard__source:visited{
     color: #fff;
}
 .moreNewsCard__source:hover{
     background: rgba(255,255,255,.14);
     color: #fff;
}
 .moreNewsCard__source:focus-visible{
     outline: 2px solid rgba(255,255,255,.85);
     outline-offset: 2px;
}
 .moreNewsCard__titleLink{
     color: #fff;
     text-decoration: none;
     display: inline-block;
     text-shadow: 0 8px 18px rgba(0,0,0,.45);
}
 .moreNewsCard__titleLink:hover{
     text-decoration: underline;
     text-underline-offset: 3px;
}
 .moreNewsCard__content{
     position: absolute;
     inset: auto 0 0 0;
     z-index: 2;
     padding: 14px 14px 16px;
     color: #fff;
}
 .moreNewsCard__title{
     margin-bottom: 6px;
     font-size: 16px;
     line-height: 1.25;
     letter-spacing: -0.01em;
     text-shadow: 0 8px 18px rgba(0,0,0,.45);
}
 .moreNewsPager{
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin-top: 22px;
     flex-wrap: wrap;
}
 .moreNewsPager__btn{
     height: 40px;
     padding: 0 14px;
     border-radius: 12px;
     border: 1px solid rgba(0,0,0,.12);
     background: #fff;
     box-shadow: 0 8px 20px rgba(0,0,0,.06);
     cursor: pointer;
     font-weight: 700;
}
 .moreNewsPager__btn[disabled]{
     opacity: .5;
     cursor: not-allowed;
}
 .moreNewsPager__nums{
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
}
 .moreNewsPager__num{
     width: 44px;
     height: 44px;
     border-radius: 12px;
     border: 1px solid rgba(0,0,0,.12);
     background: #fff;
     box-shadow: 0 8px 20px rgba(0,0,0,.06);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-weight: 800;
}
 .moreNewsPager__num.is-active{
     background: #d11f1f;
     color: #fff;
     border-color: rgba(0,0,0,.0);
     box-shadow: 0 12px 30px rgba(209,31,31,.25);
}
 @media (max-width: 1100px){
     .moreNews__container{
         width: min(980px, calc(100% - 28px));
    }
     .moreNewsGrid{
         gap: 16px;
    }
     .moreNewsCard{
         min-height: 230px;
    }
}
 @media (max-width: 980px){
     .moreNews{
         padding: 48px 0;
    }
     .moreNews__head{
         align-items: flex-start;
         flex-direction: column;
         gap: 8px;
    }
     .moreNewsGrid{
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 16px;
    }
     .moreNewsCard{
         min-height: 220px;
         border-radius: 14px;
    }
     .moreNewsCard__content{
         padding: 12px 12px 14px;
    }
     .moreNewsCard__title{
         font-size: 15px;
    }
}
 @media (max-width: 820px){
     .moreNewsGrid{
         gap: 14px;
    }
     .moreNewsCard{
         min-height: 210px;
    }
}
 @media (max-width: 640px){
     .moreNews{
         padding: 42px 0;
    }
     .moreNews__container{
         width: min(1120px, calc(100% - 20px));
    }
     .moreNewsGrid{
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px;
    }
     .moreNewsCard{
         min-height: 260px;
         border-radius: 14px;
    }
     .moreNewsCard__content{
         padding: 12px 12px 14px;
    }
     .moreNewsCard__meta{
         gap: 8px;
         margin-bottom: 6px;
    }
     .moreNewsCard__date{
         font-size: 12px;
    }
     .moreNewsCard__source{
         height: 18px;
         padding: 0 8px;
         font-size: 8px;
         letter-spacing: .12em;
    }
     .moreNewsCard__titleLink{
         font-size: 10px;
         line-height: 1.28;
    }
}
 @media (max-width: 420px){
     .moreNewsCard{
         min-height: 240px;
    }
     .moreNewsCard__content{
         padding: 10px 10px 12px;
    }
     .moreNewsCard__title{
         font-size: 14px;
    }
     .moreNewsPager__btn{
         height: 38px;
         padding: 0 12px;
         border-radius: 12px;
    }
     .moreNewsPager__num{
         width: 40px;
         height: 40px;
         border-radius: 12px;
    }
}
/* =========================HEADER EVENT========================= */
 :root{
     --abti-black: #0f172a;
     --abti-red: #d5291e;
     ;
     --abti-muted: #475569;
     --abti-bg: #ffffff;
}
 .page-header{
     background: var(--abti-bg);
     padding: clamp(44px, 6vw, 88px) 0;
}
 .page-header__inner{
     width: min(1120px, calc(100% - 40px));
     margin: 0 auto;
     text-align: center;
     opacity: 0;
     transform: translateY(12px);
     animation: abtiFadeUp .7s ease forwards;
}
 .page-header__title{
     margin: 0;
     font-weight: 950;
     letter-spacing: -0.02em;
     line-height: 1.02;
     font-size: clamp(40px, 5.2vw, 84px);
}
 .page-header__title-black{
     display: block;
     color: var(--abti-black);
}
 .page-header__title-red{
     display: block;
     color: var(--abti-red);
}
 .page-header__subtitle{
     margin: clamp(14px, 2vw, 18px) auto 0;
     max-width: 72ch;
     color: var(--abti-muted);
     line-height: 1.65;
     font-weight: 500;
     font-size: clamp(14px, 1.35vw, 18px);
}
 @media (max-width: 640px){
     .page-header__title{
         letter-spacing: -0.01em;
         line-height: 1.06;
         font-size: clamp(32px, 10vw, 44px);
    }
     .page-header__subtitle{
         max-width: 46ch;
         font-size: 14px;
         line-height: 1.7;
    }
}
 @keyframes abtiFadeUp{
     to{
         opacity: 1;
         transform: translateY(0);
    }
}
 @media (prefers-reduced-motion: reduce){
     .page-header__inner{
         animation: none;
         opacity: 1;
         transform: none;
    }
}
/* =========================EVENT========================= */
 :root{
     --bg: #f5f7fb;
     --card: #ffffff;
     --text: #0f172a;
     --muted: #64748b;
     --line: #e6eaf2;
     --blue: #1d4ed8;
     --blueSoft: #e8efff;
     --shadow: 0 20px 60px rgba(15, 23, 42, .12);
     --shadow2: 0 12px 30px rgba(15, 23, 42, .10);
     --radius: 18px;
     --radiusSm: 14px;
}
 .events{
     background: var(--bg);
     padding: 42px 0 60px;
}
 .events__container{
     width: min(1120px, calc(100% - 40px));
     margin: 0 auto;
     display: grid;
     gap: 18px;
}
 .events__tools{
     background: rgba(255,255,255,.78);
     border: 1px solid rgba(230,234,242,.95);
     border-radius: var(--radius);
     box-shadow: var(--shadow2);
     padding: 14px;
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 14px;
     align-items: center;
}
 @media (max-width: 820px){
     .events__tools{
         grid-template-columns: 1fr;
    }
}
 .events__search{
     position: relative;
     display:flex;
     align-items:center;
}
 .events__searchIcon{
     width: 18px;
     height: 18px;
     position: absolute;
     left: 14px;
     display:inline-block;
}
 .events__searchIcon::before{
     content:"";
     position:absolute;
     inset: 0;
     width: 12px;
     height: 12px;
     border: 2px solid #94a3b8;
     border-radius: 999px;
     top: 0;
     left: 0;
}
 .events__searchIcon::after{
     content:"";
     position:absolute;
     width: 8px;
     height: 2px;
     background: #94a3b8;
     right: -2px;
     bottom: -1px;
     transform: rotate(45deg);
     border-radius: 999px;
}
 .events__searchInput{
     width: 100%;
     border: 1px solid rgba(230,234,242,.95);
     border-radius: var(--radiusSm);
     padding: 12px 14px 12px 42px;
     font-size: 14px;
     color: var(--text);
     outline: none;
     background: #fff;
     box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
 .events__searchInput:focus{
     border-color: rgba(29,78,216,.35);
     box-shadow: 0 10px 26px rgba(29,78,216,.10);
}
 .events__filters{
     display:flex;
     gap: 10px;
     justify-content: flex-end;
     flex-wrap: wrap;
}
 @media (max-width: 820px){
     .events__filters{
         justify-content: flex-start;
    }
}
 .chip{
     border: 1px solid rgba(230,234,242,.95);
     background: #fff;
     color: #334155;
     padding: 10px 14px;
     border-radius: 999px;
     font-size: 13px;
     font-weight: 800;
     cursor:pointer;
     transition: transform .12s ease, background .12s ease, border-color .12s ease;
     box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
 .chip:hover{
     transform: translateY(-1px);
     border-color: rgba(29,78,216,.22);
     background: rgba(232,239,255,.55);
}
 .chip.is-active{
     background: rgba(213,41,30,.12);
     border-color: rgba(213,41,30,.28);
     color: #d5291e;
}
 .events__grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
}
 @media (max-width: 980px){
     .events__grid{
         grid-template-columns: repeat(2, 1fr);
    }
}
 @media (max-width: 640px){
     .events__grid{
         grid-template-columns: 1fr;
    }
}
 .event-card{
     background: var(--card);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow);
     border: 1px solid rgba(230,234,242,.95);
     display: flex;
     flex-direction: column;
     will-change: transform, opacity;
}
 .event-card__media{
     height: 170px;
     background: #e9edf7;
     overflow: hidden;
}
 .event-card__img{
     width: 100%;
     height: auto;
     object-fit: cover;
     display: block;
     transform: scale(1.01);
}
 .event-card__body{
     padding: 18px 18px 20px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     height: 100%;
     flex: 1;
}
 .event-card__head{
     display: grid;
     grid-template-columns: 58px 1fr;
     gap: 14px;
     align-items: center;
}
 .event-card__logoWrap{
     width: 58px;
     height: 58px;
     border-radius: 16px;
     background: #f3f6ff;
     border: 1px solid rgba(230,234,242,.95);
     display: grid;
     place-items: center;
     box-shadow: 0 12px 28px rgba(15,23,42,.08);
     overflow: hidden;
}
 .event-card__logo{
     width: 44px;
     height: 44px;
     border-radius: 999px;
     object-fit: cover;
     display: block;
}
 .event-card__title{
     margin: 2px 0 0;
     font-size: 22px;
     line-height: 1.2;
     letter-spacing: .1px;
     color: var(--text);
     font-weight: 900;
}
 .event-card__metaRow{
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 2px 2px;
}
 .event-card__badges{
     margin-top: 0;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
}
 .pill{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 7px 14px;
     border-radius: 999px;
     font-weight: 900;
     font-size: 12px;
     border: 1px solid rgba(213,41,30,.28);
     background: rgba(213,41,30,.12);
     color: #d5291e;
}
 .event-card__loc{
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--muted);
     font-size: 18px;
     padding: 2px 2px;
}
 .event-card__locText{
     font-weight: 600;
     font-size: 14px;
}
 .icon{
     width: 18px;
     height: 18px;
     display: inline-block;
     position: relative;
     flex: 0 0 auto;
}
 .icon--pin::before{
     content:"";
     position:absolute;
     left: 50%;
     top: 2px;
     width: 12px;
     height: 12px;
     border: 2px solid #64748b;
     border-radius: 999px;
     transform: translateX(-50%);
     box-sizing: border-box;
}
 .icon--pin::after{
     content:"";
     position:absolute;
     left: 50%;
     top: 12px;
     width: 0;
     height: 0;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-top: 9px solid #64748b;
     transform: translateX(-50%);
}
 .btn-primary{
     margin-top: 2px;
     width: 100%;
     border: none;
     border-radius: 14px;
     padding: 14px 16px;
     background: #d5291e;
     color: #fff;
     font-weight: 900;
     font-size: 16px;
     cursor: pointer;
     box-shadow: 0 18px 44px rgba(213,41,30,.28);
     transition: transform .12s ease, filter .12s ease;
}
 .btn-primary:hover{
     transform: translateY(-1px);
     filter: brightness(1.02);
}
 .btn-primary:active{
     transform: translateY(0px);
}
 .events__empty{
     grid-column: 1 / -1;
     background: rgba(255,255,255,.78);
     border: 1px solid rgba(230,234,242,.95);
     border-radius: var(--radius);
     padding: 22px;
     box-shadow: var(--shadow2);
     text-align: center;
     color: var(--muted);
     font-weight: 700;
}
 .events__pager{
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     gap: 12px;
}
 .pager-btn{
     border: 1px solid rgba(230,234,242,.95);
     background: #fff;
     border-radius: 14px;
     padding: 12px 14px;
     font-weight: 900;
     font-size: 13px;
     cursor: pointer;
     box-shadow: 0 8px 22px rgba(15,23,42,.06);
     transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
     display:flex;
     align-items:center;
     justify-content:center;
     gap: 8px;
}
 .pager-btn:hover{
     transform: translateY(-1px);
     border-color: rgba(29,78,216,.22);
     background: rgba(232,239,255,.55);
}
 .pager-btn:disabled{
     opacity: .55;
     cursor: not-allowed;
     transform: none;
}
 .pager-info{
     text-align: center;
     color: #334155;
     font-weight: 900;
     font-size: 13px;
     padding: 12px 14px;
     border-radius: 14px;
     border: 1px solid rgba(230,234,242,.95);
     background: rgba(255,255,255,.78);
     box-shadow: 0 8px 22px rgba(15,23,42,.06);
     min-width: 160px;
}
 .modal{
     position: fixed;
     inset: 0;
     display: none;
     z-index: 9999;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 24px 14px;
     overflow: auto;
}
 .modal.is-open{
     display: flex;
}
 .modal__panel{
     position: relative;
     width: min(860px, 100%);
     margin: 0;
     background: #fff;
     border-radius: 18px;
     box-shadow: 0 30px 80px rgba(15,23,42,.22);
     overflow: hidden;
     border: 1px solid rgba(230,234,242,.95);
     max-height: calc(100vh - 48px);
     display: flex;
     flex-direction: column;
}
 .modal__close{
     position: absolute;
     right: 14px;
     top: 14px;
     width: 34px;
     height: 34px;
     border-radius: 8px;
     border: 2px solid rgba(213, 41, 30, .45);
     background: #fff;
     color: #d5291e;
     font-size: 22px;
     line-height: 1;
     cursor: pointer;
     display: grid;
     place-items: center;
}
 .modal__close:hover{
     background: rgba(213, 41, 30, .10);
}
 .modal__header{
     padding: 22px 56px 16px 22px;
     display: grid;
     grid-template-columns: 78px 1fr;
     gap: 16px;
     align-items: start;
}
 .modal__header > div:last-child{
     padding-right: 48px;
}
 .modal__logoWrap{
     width: 78px;
     height: 78px;
     border-radius: 16px;
     background: rgba(213, 41, 30, .08);
     border: 1px solid rgba(213, 41, 30, .20);
     box-shadow: 0 12px 28px rgba(15,23,42,.08);
     display: grid;
     place-items: center;
     overflow: hidden;
}
 .modal__logo{
     width: 58px;
     height: 58px;
     border-radius: 999px;
     object-fit: cover;
     display: block;
}
 .modal__title{
     margin: 0;
     font-size: 28px;
     line-height: 1.08;
     font-weight: 950;
     letter-spacing: .2px;
     color: var(--text);
     word-break: break-word;
}
 .modal__badges{
     margin-top: 10px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
}
 .modal__divider{
     height: 1px;
     background: var(--line);
     margin: 0 22px;
}
 .modal__body{
     padding: 14px 18px 10px;
     overflow: hidden;
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 14px;
}
 .detail-row{
     display: grid;
     grid-template-columns: 44px 1fr;
     gap: 10px;
     align-items: center;
     padding: 10px 0;
}
 .detail-ico{
     width: 40px;
     height: 40px;
     border-radius: 999px;
     display: grid;
     place-items: center;
}
 .mini{
     width: 22px;
     height: 22px;
     position: relative;
     display: block;
}
 .mini--pin::before{
     content:"";
     position:absolute;
     left: 50%;
     top: 3px;
     width: 10px;
     height: 10px;
     border: 2px solid var(--blue);
     border-radius: 999px;
     transform: translateX(-50%);
     box-sizing: border-box;
}
 .mini--pin::after{
     content:"";
     position:absolute;
     left: 50%;
     top: 12px;
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 8px solid var(--blue);
     transform: translateX(-50%);
}
 .mini--user::before{
     content:"";
     position:absolute;
     left: 50%;
     top: 2px;
     width: 8px;
     height: 8px;
     border: 2px solid var(--blue);
     border-radius: 999px;
     transform: translateX(-50%);
     box-sizing: border-box;
}
 .mini--user::after{
     content:"";
     position:absolute;
     left: 50%;
     top: 12px;
     width: 14px;
     height: 8px;
     border: 2px solid var(--blue);
     border-top: none;
     border-radius: 0 0 12px 12px;
     transform: translateX(-50%);
     box-sizing: border-box;
}
 .mini--coach::before{
     content:"";
     position:absolute;
     left: 3px;
     top: 8px;
     width: 12px;
     height: 10px;
     border: 2px solid var(--blue);
     border-radius: 6px;
     box-sizing: border-box;
}
 .mini--coach::after{
     content:"";
     position:absolute;
     left: 14px;
     top: 10px;
     width: 7px;
     height: 6px;
     border: 2px solid var(--blue);
     border-left: none;
     border-radius: 0 6px 6px 0;
     box-sizing: border-box;
}
 .mini--bag::before{
     content:"";
     position:absolute;
     left: 3px;
     top: 8px;
     width: 16px;
     height: 12px;
     border: 2px solid var(--blue);
     border-radius: 4px;
     box-sizing: border-box;
}
 .mini--bag::after{
     content:"";
     position:absolute;
     left: 7px;
     top: 5px;
     width: 8px;
     height: 6px;
     border: 2px solid var(--blue);
     border-bottom: none;
     border-radius: 6px 6px 0 0;
     box-sizing: border-box;
}
 .mini--eye::before{
     content:"";
     position:absolute;
     left: 50%;
     top: 8px;
     width: 18px;
     height: 10px;
     border: 2px solid var(--blue);
     border-radius: 999px;
     transform: translateX(-50%);
     box-sizing: border-box;
}
 .mini--eye::after{
     content:"";
     position:absolute;
     left: 50%;
     top: 10px;
     width: 6px;
     height: 6px;
     background: var(--blue);
     border-radius: 999px;
     transform: translateX(-50%);
}
 .mini--globe::before{
     content:"";
     position:absolute;
     inset: 2px;
     border: 2px solid var(--blue);
     border-radius: 999px;
     box-sizing: border-box;
}
 .mini--globe::after{
     content:"";
     position:absolute;
     left: 50%;
     top: 2px;
     width: 0;
     height: 18px;
     border-left: 2px solid var(--blue);
     transform: translateX(-50%);
}
 .detail-ico .ico{
     width: 20px;
     height: 20px;
     display: block;
}
 .detail-ico .ico *{
     fill: none;
     stroke: currentColor;
     stroke-width: 1.6;
     stroke-linecap: butt;
     stroke-linejoin: miter;
     stroke-miterlimit: 8;
}
 .detail-text{
     display: flex;
     flex-direction: column;
     gap: 6px;
}
 .detail-label{
     font-weight: 900;
     color: #475569;
     font-size: 14px;
}
 .detail-value{
     font-size: 14px;
     color: #0f172a;
     font-weight: 600;
}
 .modal__footer{
     padding: 14px 22px 20px;
     border-top: 1px solid var(--line);
     display: flex;
     justify-content: flex-start;
     gap: 10px;
}
 .btn-ghost{
     background: #ffffff;
     color: #d5291e;
    ;
     border: 1px solid rgba(213, 41, 30, .25);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 14px;
     border-radius: 12px;
     font-weight: 900;
     font-size: 14px;
}
 .btn-ghost:hover{
     background: rgba(213, 41, 30, .10);
}
 @media (max-width: 980px){
     .events{
         padding: 36px 0 54px;
    }
     .events__container{
         width: min(1120px, calc(100% - 32px));
         gap: 16px;
    }
     .events__grid{
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
    }
     .event-card__media{
         height: 160px;
    }
     .event-card__body{
         padding: 16px 16px 18px;
         gap: 12px;
    }
     .event-card__head{
         grid-template-columns: 54px 1fr;
         gap: 12px;
    }
     .event-card__logoWrap{
         width: 54px;
         height: 54px;
         border-radius: 14px;
    }
     .event-card__logo{
         width: 42px;
         height: 42px;
    }
     .event-card__title{
         font-size: 20px;
         letter-spacing: .08px;
    }
     .event-card__loc{
         font-size: 16px;
    }
     .event-card__locText{
         font-size: 13.5px;
    }
     .pill{
         padding: 6px 12px;
         font-size: 11.5px;
    }
     .btn-primary{
         padding: 13px 14px;
         font-size: 15px;
         border-radius: 13px;
    }
     .pager-info{
         min-width: 150px;
    }
     .modal__panel{
         width: min(820px, calc(100% - 28px));
         margin: 4vh auto;
    }
     .modal__title{
         font-size: 22px;
    }
}
 @media (max-width: 820px){
     .events{
         padding: 34px 0 52px;
    }
     .events__container{
         width: min(1120px, calc(100% - 28px));
         gap: 14px;
    }
     .events__tools{
         padding: 12px;
         gap: 12px;
    }
     .events__filters{
         gap: 8px;
    }
     .chip{
         padding: 9px 12px;
         font-size: 12.5px;
         font-weight: 800;
         box-shadow: 0 6px 18px rgba(15,23,42,.06);
    }
     .events__searchInput{
         padding: 11px 12px 11px 40px;
         font-size: 13.5px;
    }
     .events__searchIcon{
         left: 12px;
    }
     .events__grid{
         gap: 14px;
    }
     .modal__header{
         padding: 22px 56px 16px 22px;
         grid-template-columns: 72px 1fr;
         gap: 14px;
    }
     .modal__logoWrap{
         width: 72px;
         height: 72px;
    }
     .modal__logo{
         width: 54px;
         height: 54px;
    }
     .modal__divider{
         margin: 0 20px;
    }
     .modal__footer{
         padding: 14px 20px 18px;
    }
}
 @media (max-width: 640px){
     .events{
         padding: 30px 0 46px;
    }
     .events__container{
         width: min(1120px, calc(100% - 22px));
         gap: 12px;
    }
     .events__grid{
         grid-template-columns: 1fr;
         gap: 12px;
    }
     .events__tools{
         border-radius: 16px;
         padding: 12px;
    }
     .events__searchInput{
         border-radius: 13px;
         box-shadow: 0 6px 16px rgba(15,23,42,.06);
    }
     .chip{
         padding: 9px 12px;
         border-radius: 999px;
         font-size: 12px;
    }
     .event-card{
         border-radius: 16px;
         box-shadow: 0 16px 48px rgba(15, 23, 42, .10);
    }
     .event-card__media{
         height: 150px;
    }
     .event-card__body{
         padding: 15px 15px 16px;
         gap: 12px;
    }
     .event-card__head{
         grid-template-columns: 52px 1fr;
         gap: 12px;
    }
     .event-card__logoWrap{
         width: 52px;
         height: 52px;
         border-radius: 14px;
         box-shadow: 0 10px 22px rgba(15,23,42,.08);
    }
     .event-card__logo{
         width: 40px;
         height: 40px;
    }
     .event-card__title{
         font-size: 18px;
         line-height: 1.22;
    }
     .event-card__metaRow{
         gap: 10px;
    }
     .event-card__badges{
         gap: 8px;
    }
     .pill{
         padding: 6px 12px;
         font-size: 11px;
    }
     .event-card__loc{
         gap: 8px;
         font-size: 15px;
    }
     .event-card__locText{
         font-size: 13px;
    }
     .btn-primary{
         padding: 13px 14px;
         font-size: 15px;
         border-radius: 13px;
         box-shadow: 0 14px 36px rgba(213,41,30,.24);
    }
     .events__pager{
         grid-template-columns: auto 1fr auto;
         gap: 10px;
         align-items: center;
    }
     .pager-info{
         order: 0;
         min-width: 0;
         width: 100%;
         padding: 11px 12px;
         font-size: 12.5px;
    }
     .pager-btn{
         padding: 11px 12px;
         font-size: 12.5px;
         white-space: nowrap;
    }
     .modal__panel{
         width: min(860px, calc(100% - 18px));
         margin: 10px auto;
         max-height: 92vh;
         border-radius: 16px;
    }
     .modal__close{
         right: 12px;
         top: 12px;
         width: 32px;
         height: 32px;
         border-radius: 8px;
         font-size: 20px;
    }
     .modal__header{
         padding: 18px 16px 12px;
         grid-template-columns: 64px 1fr;
         gap: 12px;
    }
     .modal__logoWrap{
         width: 64px;
         height: 64px;
         border-radius: 14px;
    }
     .modal__logo{
         width: 48px;
         height: 48px;
    }
     .modal__title{
         font-size: 22px;
         line-height: 1.1;
    }
     .modal__badges{
         margin-top: 8px;
         gap: 8px;
    }
     .modal__divider{
         margin: 0 16px;
    }
     .modal__body{
         padding: 12px 14px 10px;
         grid-template-columns: 1fr;
         column-gap: 12px;
         overflow: auto;
         max-height: calc(92vh - 210px);
    }
     .detail-row{
         grid-template-columns: 40px 1fr;
         gap: 10px;
         padding: 10px 0;
    }
     .detail-ico{
         width: 38px;
         height: 38px;
    }
     .detail-label{
         font-size: 13.5px;
    }
     .detail-value{
         font-size: 13.5px;
    }
     .modal__footer{
         padding: 12px 16px 16px;
         gap: 10px;
    }
     .btn-ghost{
         padding: 11px 12px;
         font-size: 13.5px;
         border-radius: 12px;
    }
}
 @media (max-width: 420px){
     .events__container{
         width: min(1120px, calc(100% - 18px));
    }
     .events__tools{
         padding: 11px;
    }
     .events__filters{
         gap: 7px;
    }
     .chip{
         padding: 8px 11px;
         font-size: 11.8px;
    }
     .events__searchInput{
         padding: 10.5px 12px 10.5px 40px;
         font-size: 13px;
    }
     .event-card__media{
         height: 140px;
    }
     .event-card__title{
         font-size: 17px;
    }
     .pill{
         padding: 6px 11px;
         font-size: 10.8px;
    }
     .btn-primary{
         padding: 12.5px 14px;
         font-size: 14.5px;
    }
     .modal__title{
         font-size: 22px;
    }
}
 @media (prefers-reduced-motion: reduce){
     .chip, .pager-btn, .btn-primary{
         transition: none !important;
    }
     .chip:hover, .pager-btn:hover, .btn-primary:hover{
         transform: none !important;
         filter: none !important;
    }
}
 .anim-in{
     opacity: 0;
     transform: translateY(10px);
     animation: riseIn .6s ease forwards;
}
 .events__grid.is-ready .event-card{
     opacity: 0;
     transform: translateY(14px);
     animation: cardIn .55s ease forwards;
}
 @keyframes riseIn{
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 @keyframes cardIn{
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 @media (prefers-reduced-motion: reduce){
     .anim-in, .events__grid.is-ready .event-card{
         animation: none !important;
         opacity: 1 !important;
         transform: none !important;
    }
}
/* =========================RESOURCES========================= */
 .rds{
     padding:96px 8%;
     background:linear-gradient(180deg,#f7f8fb,#fff);
     color:#111;
}
 .rds__head h2{
     margin:0;
     font-size:34px;
     letter-spacing:-.02em 
}
 .rds__head p{
     margin:8px 0 0;
     color:#5a5a5a;
     font-size:15px 
}
 .rds__ov{
     margin-top:42px;
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:22px;
}
 .rds__card{
     background:#fff;
     border:1px solid rgba(0,0,0,.06);
     border-radius:18px;
     padding:22px;
     box-shadow:0 22px 55px rgba(0,0,0,.06);
     opacity:0;
     transform:translateY(16px);
     transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1);
     position:relative;
     overflow:hidden;
}
 .rds__card::before{
     content:"";
     position:absolute;
     left:0;
     top:0;
     bottom:0;
     width:4px;
     background:#e60023;
}
 .rds__top{
     display:flex;
     justify-content:space-between;
     align-items:center;
     gap:12px 
}
 .rds__title{
     font-size:14px;
     font-weight:800;
     color:#222 
}
 .rds__chip{
     font-size:12px;
     font-weight:800;
     padding:6px 10px;
     border-radius:999px;
     background:rgba(230,0,35,.10);
     color:#b1001a;
}
 .rds__value{
     margin-top:14px;
     font-size:44px;
     font-weight:900;
     letter-spacing:-.02em 
}
 .rds__meta{
     margin-top:6px;
     font-size:13px;
     color:#666 
}
 .rds__card.is-in{
     opacity:1;
     transform:translateY(0) 
}
 .rds__panel{
     margin-top:24px;
     background:#fff;
     border:1px solid rgba(0,0,0,.06);
     border-radius:20px;
     box-shadow:0 35px 95px rgba(0,0,0,.08);
     padding:26px;
     opacity:0;
     transform:translateY(16px);
     transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1);
}
 .rds__panel.is-in{
     opacity:1;
     transform:translateY(0) 
}
 .rds__panelHead{
     display:flex;
     justify-content:space-between;
     align-items:flex-start;
     gap:16px 
}
 .rds__panelHead h3{
     margin:0;
     font-size:18px 
}
 .rds__panelHead p{
     margin:8px 0 0;
     color:#666;
     font-size:13px;
     max-width:650px 
}
 .rds__hint{
     display:flex;
     align-items:center;
     gap:10px;
     padding:10px 12px;
     border-radius:999px;
     background:#f6f7fb;
     color:#666;
     font-size:12px;
     font-weight:700;
}
 .rds__dot{
     width:8px;
     height:8px;
     border-radius:99px;
     background:#17a34a;
     box-shadow:0 0 0 6px rgba(23,163,74,.10) 
}
 .rdsTabs{
     margin-top:18px;
     display:flex;
     gap:10px;
     flex-wrap:wrap 
}
 .rdsTab{
     border:1px solid rgba(0,0,0,.08);
     background:#fff;
     padding:10px 12px;
     border-radius:12px;
     font-size:11px;
     font-weight:800;
     color:#222;
     cursor:pointer;
     transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
 .rdsTab:hover{
     transform:translateY(-1px);
     border-color:rgba(230,0,35,.30) 
}
 .rdsTab.is-active{
     background:#111;
     color:#fff;
     border-color:#111 
}
 .rdsStage{
     margin-top:14px;
     background:#fbfbfd;
     border:1px solid rgba(0,0,0,.06);
     border-radius:16px;
     padding:14px;
}
 .rdsPane{
     opacity:0;
     transform:translateY(10px);
     transition:opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
 .rdsPane.is-active{
     opacity:1;
     transform:translateY(0) 
}
 .rdsPane__top{
     display:flex;
     justify-content:space-between;
     align-items:flex-end;
     gap:12px;
     padding:8px 6px 12px 
}
 .rdsPane__title{
     font-weight:900 
}
 .rdsPane__meta{
     font-size:12px;
     color:#666 
}
 .rdsTableWrap{
     overflow:auto;
     border-radius:14px;
     background:#fff;
     border:1px solid rgba(0,0,0,.06);
}
 .rdsTable{
     width:100%;
     border-collapse:separate;
     border-spacing:0;
     table-layout: fixed;
     min-width:680px;
}
 .rdsTable thead th{
     position:sticky;
     top:0;
     z-index:1;
     background:#f6f7fb;
     text-align:left;
     padding:14px 12px;
     font-size:12px;
     letter-spacing:.04em;
     text-transform:uppercase;
     border-bottom:1px solid rgba(0,0,0,.08);
     vertical-align:middle;
}
 .rdsTable tbody td{
     padding:14px 12px;
     border-bottom:1px solid rgba(0,0,0,.06);
     font-size:14px;
     color:#222;
     vertical-align:middle;
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap;
}
 .rdsTable thead th:nth-child(1), .rdsTable tbody td:nth-child(1){
     width:48%;
}
 .rdsTable thead th:nth-child(2), .rdsTable tbody td:nth-child(2){
     width:18%;
     text-align:center;
     font-variant-numeric: tabular-nums;
}
 .rdsTable thead th:nth-child(3), .rdsTable tbody td:nth-child(3){
     width:34%;
}
 .rdsTable tbody td:nth-child(3) .rdsBadge{
     max-width:100%;
}
 .rdsTable tbody td:nth-child(2){
     font-weight:800;
}
 .rdsTable tbody tr:hover{
     background:#fafafa 
}
 .rdsBadge{
     display:inline-flex;
     align-items:center;
     padding:6px 10px;
     border-radius:999px;
     font-size:12px;
     font-weight:900;
}
 .rdsBadge.ok{
     background:rgba(23,163,74,.12);
     color:#0b7a43 
}
 .rdsBadge.warn{
     background:rgba(234,179,8,.16);
     color:#8a6500 
}
/* ========================================= MOBILE TABLE POPUP ========================================= */
 .rdsOpenMobile{
     display:none;
}
 .rdsModal{
     border:none;
     padding:0;
     background:transparent;
}
 .rdsModal::backdrop{
     background: rgba(0,0,0,.55);
}
 .rdsModal__sheet{
     width: min(780px, calc(100% - 18px));
     background:#fff;
     border-radius:18px;
     border:1px solid rgba(0,0,0,.08);
     box-shadow: 0 30px 90px rgba(0,0,0,.25);
     overflow:hidden;
}
 .rdsModal__head{
     display:flex;
     align-items:flex-start;
     justify-content:space-between;
     gap:12px;
     padding:12px 14px;
     border-bottom:1px solid rgba(0,0,0,.08);
}
 .rdsModal__title{
     font-weight:900;
     color:#111;
     line-height:1.15;
}
 .rdsModal__sub{
     margin-top:4px;
     font-size:12px;
     color:#6b7280;
     font-weight:700;
}
 .rdsModal__close{
     border:1px solid rgba(0,0,0,.10);
     background:#111;
     color:#fff;
     border-radius:12px;
     height:36px;
     padding:0 12px;
     font-weight:900;
     cursor:pointer;
     white-space:nowrap;
}
 .rdsModal__body{
     padding: 12px 12px 14px;
     max-height: 72vh;
     overflow:auto;
     -webkit-overflow-scrolling:touch;
}
 @media (max-width:560px){
     .rds{
         padding:64px 6%;
    }
     .rds__head{
         display:flex;
         flex-direction:column;
         gap:10px;
    }
     .rds__head h2{
         font-size:26px;
         line-height:1.1;
    }
     .rds__head p{
         font-size:14px;
         line-height:1.45;
    }
     .rds__ov{
         grid-template-columns:repeat(2, minmax(0, 1fr));
         gap:14px;
         margin-top:22px;
    }
     .rds__card::before{
         display:none;
    }
     .rds__card{
         padding:16px;
         border-radius:18px;
         box-shadow:0 18px 44px rgba(0,0,0,.07);
         min-height:168px;
         display:grid;
         grid-template-rows:auto 1fr auto;
         align-content:stretch;
    }
     .rds__top{
         align-items:flex-start;
         gap:10px;
    }
     .rds__title{
         font-size:13px;
         line-height:1.2;
         max-width:14ch;
         display:-webkit-box;
         -webkit-line-clamp:2;
         -webkit-box-orient:vertical;
         overflow:hidden;
    }
     .rds__chip{
         font-size:12px;
         padding:6px 10px;
         white-space:nowrap;
         flex:0 0 auto;
    }
     .rds__value{
         margin-top:12px;
         font-weight:900;
         letter-spacing:-.03em;
         line-height:1;
         font-size:clamp(32px, 7.2vw, 44px);
         font-variant-numeric: tabular-nums;
    }
     .rds__meta{
         margin-top:8px;
         font-size:12px;
         line-height:1.35;
         display:-webkit-box;
         -webkit-line-clamp:2;
         -webkit-box-orient:vertical;
         overflow:hidden;
    }
     .rds__card:nth-child(1){
         background:#fff;
         color:#111 
    }
     .rds__card:nth-child(2){
         background:#e60023;
         color:#fff;
         border-color:transparent 
    }
     .rds__card:nth-child(3){
         background:#e60023;
         color:#fff;
         border-color:transparent 
    }
     .rds__card:nth-child(4){
         background:#fff;
         color:#111 
    }
     .rds__card:nth-child(2) .rds__title, .rds__card:nth-child(3) .rds__title{
         color:#fff;
         opacity:.95;
    }
     .rds__card:nth-child(2) .rds__meta, .rds__card:nth-child(3) .rds__meta{
         color:rgba(255,255,255,.88);
    }
     .rds__card:nth-child(2) .rds__chip, .rds__card:nth-child(3) .rds__chip{
         background:rgba(255,255,255,.18);
         color:#fff;
         border-color:rgba(255,255,255,.22);
    }
     .rds__panel{
         margin-top:16px;
         padding:16px;
         border-radius:18px;
    }
     .rds__panelHead{
         flex-direction:column;
         align-items:stretch;
         gap:12px;
    }
     .rds__panelHead h3{
         font-size:16px;
         line-height:1.2;
    }
     .rds__panelHead p{
         font-size:12px;
         line-height:1.5;
    }
     .rds__hint{
         width:fit-content;
         max-width:100%;
         padding:10px 12px;
         border-radius:999px;
         display:inline-flex;
         align-items:center;
         gap:10px;
         flex-wrap:nowrap;
    }
     .rds__dot{
         flex:0 0 auto;
         width:10px;
         height:10px;
         min-width:10px;
         min-height:10px;
         aspect-ratio:1 / 1;
         border-radius:999px;
         box-shadow:0 0 0 6px rgba(23,163,74,.10);
    }
     .rdsTabs{
         margin-top:14px;
         display:grid;
         grid-template-columns:repeat(2, minmax(0, 1fr));
         gap:10px;
    }
     .rdsTab{
         width:100%;
         padding:12px 12px;
         border-radius:14px;
         display:flex;
         align-items:center;
         justify-content:center;
         font-size:13px;
         line-height:1.15;
         text-align:center;
         min-height:44px;
         white-space:normal;
         display:-webkit-box;
         -webkit-line-clamp:2;
         -webkit-box-orient:vertical;
         overflow:hidden;
    }
     .rdsTab:hover{
         transform:none;
    }
     .rdsTab.is-active{
         background:#111;
         color:#fff;
         border-color:#111;
    }
     .rdsStage{
         margin-top:12px;
         padding:12px;
         border-radius:14px;
    }
     .rdsPane__top{
         padding:6px 4px 10px;
         align-items:flex-start;
         gap:12px;
    }
     .rdsPane__title{
         font-size:14px;
         line-height:1.2;
    }
     .rdsPane__meta{
         font-size:12px;
    }
     .rdsOpenMobile{
         display:inline-flex;
         align-items:center;
         justify-content:center;
         gap:8px;
         height:38px;
         padding:0 12px;
         border-radius:12px;
         border:1px solid rgba(0,0,0,.10);
         background:#111;
         color:#fff;
         font-weight:900;
         font-size:12px;
         cursor:pointer;
         white-space:nowrap;
         flex:0 0 auto;
    }
     .rdsPane .rdsTableWrap{
         display:none;
    }
     .rdsModal__sheet{
         width: calc(100% - 18px);
         margin: auto auto 10px;
         border-radius:18px;
    }
     .rdsModal__body{
         overflow-y:auto;
         overflow-x:hidden;
         -webkit-overflow-scrolling:touch;
    }
     .rdsModal__body .rdsTableWrap{
         display:block;
         overflow-x:hidden;
         overflow-y:visible;
    }
     .rdsModal__body .rdsTable{
         width:100%;
         min-width:0;
         table-layout:fixed;
         border-collapse:separate;
         border-spacing:0;
    }
     .rdsModal__body .rdsTable thead th{
         padding:10px 8px;
         font-size:10px;
         letter-spacing:.04em;
         white-space:nowrap;
    }
     .rdsModal__body .rdsTable tbody td{
         padding:10px 8px;
         font-size:12px;
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis;
         vertical-align:middle;
    }
     .rdsModal__body .rdsTable--3 thead th:nth-child(1), .rdsModal__body .rdsTable--3 tbody td:nth-child(1){
         width:56%;
         text-align:left;
    }
     .rdsModal__body .rdsTable--3 thead th:nth-child(2), .rdsModal__body .rdsTable--3 tbody td:nth-child(2){
         width:16%;
         text-align:center;
         font-variant-numeric: tabular-nums;
         font-weight:900;
    }
     .rdsModal__body .rdsTable--3 thead th:nth-child(3), .rdsModal__body .rdsTable--3 tbody td:nth-child(3){
         width:28%;
         text-align:right;
    }
     .rdsModal__body .rdsBadge{
         max-width:100%;
         padding:6px 8px;
         font-size:10px;
         font-weight:900;
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis;
    }
}
/* =========================KLUB========================= */
 .hero{
     padding: 52px 18px 34px;
}
 .heroWrap{
     max-width:1200px;
     margin:0 auto;
     display:grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 28px;
     align-items:center;
}
 .heroTitle{
     margin:0 0 12px;
     line-height: 1.2;
     letter-spacing:.2px;
}
 .heroKicker, .heroBig{
     display:block;
     font-weight:900;
     font-size: clamp(44px, 7.2vw, 60px);
     color: var(--main);
     letter-spacing:-0.03em;
}
 .heroDesc{
     margin: 0 0 26px;
     font-size: clamp(16px, 1.6vw, 18px);
     line-height:1.55;
     color: rgba(27,25,23,.78);
}
 .heroEm{
     color: var(--main);
     font-weight:800;
}
 .heroBtn{
     display:inline-flex;
     align-items:center;
     gap:10px;
     height:45px;
     padding: 0 14px 0 16px;
     border-radius: 10px;
     background: var(--main);
     color: var(--white);
     text-decoration:none;
     font-weight:500;
     font-size:14px;
     line-height:1;
     box-shadow: 0 10px 22px rgba(213,41,30,.18);
     transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
 .heroBtn:hover{
     transform: translateY(-1px);
     box-shadow: 0 14px 30px rgba(213,41,30,.22);
}
 .heroBtn:active{
     transform: translateY(0);
}
 .heroBtnIcon{
     width:22px;
     height:22px;
     display:inline-grid;
     place-items:center;
     font-size:14px;
     line-height:1;
}
 .heroBtn:hover .heroBtnIcon{
     transform: translateX(2px);
}
 .heroMedia{
     display:flex;
     justify-content:flex-end;
}
 .heroimg{
     width: min(520px, 100%);
     border-radius: 26px;
     overflow:hidden;
     position: relative;
     background: linear-gradient(135deg, rgba(16,84,174,.06), rgba(213,41,30,.06));
}
 .heroimg img{
     width:100%;
     height:auto;
     display:block;
     object-fit:cover;
     aspect-ratio: 4 / 3;
}
/* ========================= PROFILE SECTION ========================= */
 .profile{
     background: radial-gradient(900px 480px at 12% 0%, rgba(16,84,174,.12), transparent 55%), radial-gradient(900px 520px at 88% 10%, rgba(213,41,30,.10), transparent 55%), var(--white);
     color: var(--ink);
     padding:10px 0;
     border-radius: 20px;
}
 .profile__container{
     max-width: var(--container);
     margin: 0 auto;
     padding: 0 20px;
}
 .card{
     margin-top: 22px;
     border: 1px solid var(--line);
     border-radius: var(--radius-xl);
     background: var(--white);
     box-shadow: var(--shadow);
     overflow: hidden;
}
 .card__head{
     padding: 20px 22px;
     display:flex;
     align-items:flex-start;
     justify-content: space-between;
     gap: 14px;
}
 .card__head--clubs{
     align-items: flex-end;
     gap: 18px;
}
 .card__title{
     margin: 0 0 6px;
     font-size: 18px;
     letter-spacing: .01em;
     color: var(--main);
}
 .card__desc{
     margin: 0;
     color: var(--muted);
     font-size: 14px;
     line-height: 1.6;
}
 .pill{
     border: 1px solid rgba(213,41,30,.28);
     background: rgba(213,41,30,.06);
     color: var(--main);
     padding: 8px 12px;
     border-radius: 999px;
     font-size: 12px;
     letter-spacing: .12em;
     text-transform: uppercase;
     white-space: nowrap;
}
 .pill--sec{
     border-color: rgba(213,41,30,.28);
     background: rgba(213,41,30,.06);
     color: var(--main);
}
 #profile .hero{
     padding: 0;
     border-top: 1px solid var(--line);
     position: relative;
     background: #0f1117;
     color: var(--white);
}
 #profile .hero__viewport{
     overflow: hidden;
     position: relative;
}
 #profile .hero__track{
     display:flex;
     transform: translate3d(-100%,0,0);
     transition: transform 520ms cubic-bezier(.2,.8,.2,1);
     will-change: transform;
}
 #profile .hero__slide{
     flex: 0 0 100%;
     min-width: 100%;
     position: relative;
     overflow: hidden;
     background: #0f1117;
     height: clamp(260px, 42vw, 520px);
}
 #profile .hero__img{
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit: contain;
     object-position: 50% 50%;
     z-index: 0;
     display:block;
     user-select:none;
     pointer-events:none;
}
 #profile .hero__slide::after{
     content:"";
     position:absolute;
     inset:0;
     z-index: 1;
     background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.12));
}
 #profile .hero__content{
     position:absolute;
     inset: 0;
     display:grid;
     align-items:end;
     z-index: 2;
}
 #profile .hero__text{
     padding: 22px 20px 44px;
     max-width: 60ch;
}
 #profile .hero__kicker{
     margin: 0 0 10px;
     font-size: 12px;
     letter-spacing: .14em;
     text-transform: uppercase;
     opacity: .90;
}
 #profile .hero__title{
     margin: 0 0 10px;
     font-size: clamp(18px, 2.6vw, 30px);
     line-height: 1.12;
}
 #profile .hero__desc{
     margin: 0;
     font-size: 14px;
     line-height: 1.65;
     opacity: .86;
}
 #profile .hero__ui{
     position:absolute;
     left: 0;
     right: 0;
     bottom: 10px;
     z-index: 3;
     display:flex;
     justify-content:center;
}
 #profile .hero__dots{
     display:flex;
     gap: 8px;
     padding: 8px 10px;
     border-radius: 999px;
     border: 1px solid rgba(255,255,255,.14);
     background: rgba(0,0,0,.22);
     backdrop-filter: blur(10px);
}
 #profile .hero__dot{
     width: 26px;
     height: 4px;
     border-radius: 99px;
     border: 1px solid rgba(255,255,255,.14);
     background: rgba(15,17,23,.45);
     backdrop-filter: blur(10px);
     cursor: pointer;
     transition: transform 160ms ease, background 160ms ease;
}
 #profile .hero__dot[aria-current="true"]{
     background: rgba(213, 41, 30, 0.85);
     border-color: rgba(213, 41, 30, 0.95);
     transform: scaleX(1.06);
}
 @media (max-width: 720px){
     #profile .hero__slide{
         height: 340px;
    }
     #profile .hero__text{
         padding: 18px 16px 26px;
    }
     #profile .hero__desc{
         font-size: 13px;
    }
}
 .clubsTools{
     display:flex;
     gap: 10px;
     align-items:center;
     flex-wrap: wrap;
}
 .search input{
     height: 40px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: var(--white);
     color: var(--ink);
     padding: 0 14px;
     outline: none;
     width: min(280px, 60vw);
}
 .search input::placeholder{
     color: rgba(27,25,23,.45);
}
 .cselect{
     position: relative;
}
 .cselect__btn{
     height: 40px;
     min-width: 220px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: var(--white);
     color: var(--ink);
     padding: 0 14px;
     display:flex;
     align-items:center;
     justify-content: space-between;
     gap: 10px;
     cursor: pointer;
}
 .cselect__label{
     font-size: 14px;
     color: var(--ink);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 220px;
}
 .cselect__chev{
     color: rgba(27,25,23,.60);
}
 .cselect__panel{
     position:absolute;
     right: 0;
     top: calc(100% + 8px);
     width: min(360px, 80vw);
     border-radius: 14px;
     border: 1px solid var(--line);
     background: var(--white);
     box-shadow: 0 18px 38px rgba(0,0,0,.12);
     padding: 8px;
     display:none;
     z-index: 50;
}
 .cselect.is-open .cselect__panel{
     display:block;
}
 .cselect__opt{
     width: 100%;
     text-align:left;
     border: 1px solid transparent;
     background: transparent;
     padding: 10px 10px;
     border-radius: 10px;
     cursor: pointer;
     color: var(--ink);
     font-size: 14px;
     display:flex;
     justify-content: space-between;
     gap: 10px;
}
 .cselect__opt:hover{
     background: var(--soft);
     border-color: rgba(27,25,23,.08);
}
 .cselect__opt[aria-selected="true"]{
     background: rgba(213, 41, 30, 0.12);
     border-color: #d5291e;
}
 .cselect__count{
     color: rgba(27,25,23,.50);
     font-size: 12px;
}
 .clubsGrid{
     padding: 18px 22px 22px;
     border-top: 1px solid var(--line);
     display:grid;
     grid-template-columns: repeat(4, minmax(0,1fr));
     gap: 12px;
}
 .club{
     border: 1px solid var(--line);
     background: var(--white);
     border-radius: var(--radius-lg);
     padding: 14px;
     display:grid;
     grid-template-columns: 44px 1fr;
     gap: 12px;
     align-items:center;
     cursor: pointer;
     transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
 .club:hover{
     transform: translateY(-2px);
     box-shadow: 0 14px 24px rgba(0,0,0,.08);
     background: #fff;
}
 .club__logo{
     width: 44px;
     height: 44px;
     border-radius: 12px;
     border: 1px solid rgba(27,25,23,.10);
     background: #fff;
     object-fit: contain;
}
 .club__name{
     margin: 0;
     font-size: 14px;
     line-height: 1.2;
     letter-spacing: .01em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .club__city{
     margin: 6px 0 0;
     color: var(--muted);
     font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 @media (max-width: 1024px){
     .clubsGrid{
         grid-template-columns: repeat(3, minmax(0,1fr));
    }
}
 @media (max-width: 720px){
     .card__head--clubs{
         flex-direction: column;
         align-items:flex-start;
    }
     .cselect__btn{
         min-width: 0;
         width: 100%;
    }
     .search input{
         width: 100%;
    }
     .clubsGrid{
         grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
 @media (max-width: 440px){
     .clubsGrid{
         grid-template-columns: 1fr;
    }
}
 .drawer{
     position: fixed;
     inset: 0;
     z-index: 1200;
     display:none;
}
 .drawer.is-open{
     display:block;
}
 .drawer__backdrop{
     position:absolute;
     inset: 0;
     background: rgba(27,25,23,.48);
     backdrop-filter: blur(3px);
}
 .drawer__panel{
     position:absolute;
     top: 0;
     right: 0;
     height: 100%;
     width: min(520px, 92vw);
     background: var(--white);
     border-left: 1px solid var(--line);
     box-shadow: -18px 0 46px rgba(0,0,0,.18);
     transform: translateX(10px);
     animation: drawerIn 220ms ease forwards;
     border-radius: 20px 0 0 20px;
}
 @keyframes drawerIn{
     to{
         transform: translateX(0);
    }
}
 .drawer__head{
     padding: 18px 18px 14px;
     border-bottom: 1px solid var(--line);
     display:flex;
     justify-content: space-between;
     align-items:flex-start;
     gap: 12px;
}
 .drawer__title{
     display:flex;
     gap: 12px;
     align-items:center;
     min-width: 0;
}
 .drawer__logo{
     width: 54px;
     height: 54px;
     border-radius: 14px;
     border: 1px solid rgba(27,25,23,.10);
     background: #fff;
     object-fit: contain;
}
 .drawer__name{
     margin: 0;
     font-size: 16px;
     line-height: 1.2;
     color: var(--ink);
}
 .drawer__city{
     margin: 6px 0 0;
     color: var(--muted);
     font-size: 13px;
}
 .drawer__close{
     width: 40px;
     height: 40px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: var(--white);
     cursor: pointer;
     color: var(--ink);
}
 .drawer__body{
     padding: 16px 18px 22px;
     overflow:auto;
     height: calc(100% - 74px);
}
 .details{
     margin: 0;
     display:grid;
     gap: 12px;
}
 .details__row{
     border: 1px solid rgba(27,25,23,.10);
     background: rgba(27,25,23,.02);
     border-radius: var(--radius-md);
     padding: 12px;
     display:grid;
     grid-template-columns: 160px 1fr;
     gap: 12px;
}
 .details dt{
     font-size: 12px;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: rgba(27,25,23,.65);
}
 .details dd{
     margin: 0;
     color: var(--ink);
     font-size: 14px;
     word-break: break-word;
}
 .details a{
     color: var(--sec);
     text-decoration: underline;
     text-underline-offset: 3px;
}
 .pager{
     display:flex;
     align-items:center;
     justify-content:center;
     gap: 10px;
     padding: 16px 22px 22px;
     border-top: 1px solid var(--line);
}
 .pager__btn{
     width: 40px;
     height: 40px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: var(--white);
     color: var(--ink);
     cursor: pointer;
     display:grid;
     place-items:center;
     transition: transform 160ms ease, background 160ms ease;
}
 .pager__btn:hover{
     background: rgba(27,25,23,.03);
     transform: translateY(-1px);
}
 .pager__btn:disabled{
     opacity: .45;
     cursor: not-allowed;
     transform: none;
}
 .pager__nums{
     display:flex;
     align-items:center;
     gap: 6px;
     flex-wrap: wrap;
     justify-content:center;
}
 .pager__num{
     min-width: 40px;
     height: 40px;
     padding: 0 10px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: var(--white);
     color: var(--ink);
     cursor: pointer;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     font-size: 14px;
     transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
 .pager__num:hover{
     background: rgba(27,25,23,.03);
     transform: translateY(-1px);
}
 .pager__num.is-active{
     border-color: #d5291e;
     background: rgba(213, 41, 30, 0.12);
     color: #d5291e;
     font-weight: 700;
}
 .pager__sep{
     width: 40px;
     height: 40px;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     color: rgba(27,25,23,.45);
     user-select:none;
}
 .card--clubs{
     overflow: visible;
}
 .cselect__panel{
     z-index: 9999;
     max-height: 320px;
     overflow: auto;
}
 @media (prefers-reduced-motion: reduce){
     #profile .hero__track{
         transition:none;
    }
     .club{
         transition:none;
    }
     .drawer__panel{
         animation:none;
    }
}
 @media (max-width: 720px){
     .clubsTools{
         width: 100%;
    }
     .search{
         width: 100%;
    }
     .search input{
         width: 100%;
         min-width: 0;
    }
     .cselect{
         width: 100%;
    }
     .cselect__btn{
         width: 100%;
         min-width: 0;
    }
     .cselect__panel{
         left: 0;
         right: 0;
         width: 100%;
         max-height: 320px;
         overflow: auto;
         z-index: 9999;
    }
     #profile .hero__text{
         padding: 22px 20px 48px;
         max-width: 60ch;
    }
}
/* ===== GALLERY ===== */
 .ihf-section{
     padding: 40px 0;
     background: #fff;
     color: #111827;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
 .ihf-section [data-gallery]{
     margin-top: 40px;
}
 .ihf-shell{
     width: min(1120px, calc(100% - 32px));
     margin: 0 auto;
}
 .ihf-head{
     margin-bottom: 18px;
}
 .ihf-title{
     font-size: 24px;
     letter-spacing: .2px;
     margin: 0 0 6px;
}
 .ihf-subtitle{
     margin: 0;
     color: rgba(213,41,30,.75);
     font-size: 14px;
}
 .ihf-cardbar{
     display: grid;
     grid-template-columns: 40px 1fr 40px;
     gap: 10px;
     align-items: center;
     margin-top: 14px;
}
 .ihf-navbtn{
     height: 40px;
     width: 40px;
     border: 1px solid #e5e7eb;
     background: #fff;
     border-radius: 12px;
     cursor: pointer;
     transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
     box-shadow: 0 6px 18px rgba(17,24,39,.06);
     font-size: 20px;
     line-height: 1;
}
 .ihf-navbtn:hover{
     transform: translateY(-1px);
     border-color: #d1d5db;
     box-shadow: 0 10px 24px rgba(213,41,30,.18);
}
 .ihf-navbtn:active{
     transform: translateY(0);
}
 .ihf-cardtrack{
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 260px;
     grid-auto-columns: calc((100% - (14px * 3)) / 4);
     gap: 14px;
     overflow: auto hidden;
     scroll-behavior: smooth;
     padding: 6px 4px;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
}
 .ihf-cardtrack::-webkit-scrollbar{
     display:none;
}
 .ihf-card{
     scroll-snap-align: start;
     border: 1px solid #e5e7eb;
     border-radius: 16px;
     overflow: hidden;
     background: #fff;
     cursor: pointer;
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
     outline: none;
}
 .ihf-card:hover, .ihf-card:focus{
     transform: translateY(-2px);
     border-color: rgba(213,41,30,.55);
}
 .ihf-card.is-active{
     border-color: #d5291e;
}
 .ihf-cardimg{
     aspect-ratio: 16 / 10;
     background: #f3f4f6;
}
 .ihf-cardimg img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     display:block;
     transform: scale(1.01);
}
 .ihf-cardmeta{
     padding: 12px 12px 14px;
}
 .ihf-cardtitle{
     font-size: 14px;
     font-weight: 650;
     margin: 0 0 4px;
     color: #111827;
}
 .ihf-cardsub{
     font-size: 12px;
     color: #6b7280;
}
/* ===== GALLERY ===== */
 .ihfGalleryIHF{
     --ihf-strip: #d5291e;
     --ihf-strip-dark: #b91c14;
     --ihf-border: rgba(0,0,0,.10);
     --ihf-text-muted: rgba(0,0,0,.58);
     background:#fff;
     border: 1px solid var(--ihf-border);
     border-radius: 0;
     overflow:hidden;
}
 .ihfGalleryIHF[hidden]{
     display:none !important;
}
 .ihfGalleryIHF__head{
     display:flex;
     justify-content:space-between;
     align-items:flex-start;
     gap:16px;
     padding: 18px 18px 0;
}
 .ihfGalleryIHF__title{
     margin:0;
     font-size: clamp(20px, 2.6vw, 32px);
     font-weight: 800;
     letter-spacing: .02em;
     text-transform: uppercase;
}
 .ihfGalleryIHF__meta{
     display:flex;
     align-items:center;
     gap:10px;
     margin-top: 8px;
     color: var(--ihf-text-muted);
     font-size: 14px;
}
 .ihfGalleryIHF__pill{
     padding: 6px 10px;
     border: 1px solid rgba(0,0,0,.10);
     background: rgba(0,0,0,.03);
     border-radius: 999px;
     font-size: 13px;
}
 .ihfGalleryIHF__dot{
     opacity:.8;
}
 .ihfGalleryIHF__ghost{
     border: 1px solid rgba(213,41,30,.55);
     background: rgba(213,41,30,.08);
     color: #d5291e;
     border-radius: 999px;
     padding: 10px 14px;
     cursor:pointer;
     user-select:none;
}
 .ihfGalleryIHF__ghost:hover{
     background: rgba(213,41,30,.14);
     border-color: rgba(213,41,30,.75);
}
 .ihfGalleryIHF__divider{
     margin: 16px 18px 18px;
     height:1px;
     background: rgba(0,0,0,.10);
}
 .ihfGalleryIHF__viewer{
     background:#fff;
}
 .ihfGalleryIHF__main{
     padding: 0 18px 14px;
}
 .ihfGalleryIHF__frame{
     margin:0;
     background:#fff;
     display:flex;
     align-items:center;
     justify-content:center;
     min-height: min(60vh, 620px);
     position:relative;
}
 .ihfGalleryIHF__img{
     max-width: 100%;
     max-height: min(200vh, 620px);
     object-fit: contain;
     display:block;
     opacity: 0;
     transition: opacity .18s ease;
}
 .ihfGalleryIHF__img.is-ready{
     opacity: 1;
}
 .ihfGalleryIHF__load{
     position:absolute;
     inset:0;
     display:flex;
     align-items:center;
     justify-content:center;
     color: rgba(0,0,0,.58);
     background: rgba(255,255,255,.60);
     opacity:0;
     pointer-events:none;
     transition: opacity .15s ease;
}
 .ihfGalleryIHF__load.is-on{
     opacity:1;
}
 .ihfGalleryIHF__thumbbar{
     position:relative;
     display:grid;
     grid-template-columns: 30px 1fr 30px;
     align-items:stretch;
     background: var(--ihf-strip);
     height: 120px;
}
 .ihfGalleryIHF__panel{
     border:0;
     background: rgba(255,255,255,.0);
     cursor:pointer;
     display:flex;
     align-items:center;
     justify-content:center;
     user-select:none;
     -webkit-tap-highlight-color: transparent;
     transition: background .15s ease, filter .15s ease;
}
 .ihfGalleryIHF__panel:hover{
     background: rgba(0,0,0,.06);
}
 .ihfGalleryIHF__panel:active{
     background: rgba(0,0,0,.10);
}
 .ihfGalleryIHF__panel--prev{
     box-shadow: inset -1px 0 0 rgba(255,255,255,.10);
}
 .ihfGalleryIHF__panel--next{
     box-shadow: inset 1px 0 0 rgba(255,255,255,.10);
}
 .ihfGalleryIHF__arrow{
     color:#fff;
     font-size: 44px;
     line-height:1;
     opacity:.95;
}
 .ihfGalleryIHF__thumbtrack{
     height: 120px;
     display:flex;
     align-items:center;
     gap: 0;
     padding: 0;
     overflow:hidden;
     scroll-behavior:smooth;
     scrollbar-width:none;
     margin: 0;
}
 .ihfGalleryIHF__thumbtrack::-webkit-scrollbar{
     display:none;
}
 .ihfGalleryIHF__thumbtrack::before, .ihfGalleryIHF__thumbtrack::after{
     content: none;
}
 .ihfGalleryIHF .ihf-thumb{
     width:25%;
     border: 0;
     background: transparent;
     padding: 0;
     height: 100%;
     cursor:pointer;
     position:relative;
     overflow:hidden;
     outline:none;
     flex: 0 0 25%;
     min-width: 25%;
     flex-shrink: 0;
}
 .ihfGalleryIHF .ihf-thumb img{
     width:100%;
     height:100%;
     object-fit: cover;
     display:block;
     transform: scale(1.02);
     transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
 .ihfGalleryIHF .ihf-thumb::after{
     content:"";
     position:absolute;
     inset:0;
     background: rgba(0,0,0,.32);
     transition: opacity .18s ease, background .18s ease;
     opacity: 1;
}
 .ihfGalleryIHF .ihf-thumb:hover img{
     transform: scale(1.06);
}
 .ihfGalleryIHF .ihf-thumb:hover::after{
     background: rgba(0,0,0,.22);
}
 .ihfGalleryIHF .ihf-thumb.is-active::after{
     background: rgba(213,41,30,.55);
}
 .ihfGalleryIHF .ihf-thumb.is-active{
     box-shadow: 0 0 0 3px rgba(213,41,30,.95) inset, 0 0 0 1px rgba(255,255,255,.35) inset;
}
/* ================================ RESPONSIVE: CARD + THUMB ================================ */
 @media (max-width: 1024px){
     .ihf-cardtrack{
         grid-auto-columns: calc((100% - (14px * 1)) / 2);
    }
}
 @media (max-width: 720px){
     .ihf-cardtrack{
         grid-auto-columns: 100%;
    }
     .ihfGalleryIHF__thumbbar{
         grid-template-columns: 30px 1fr 30px;
         height: 96px;
    }
     .ihfGalleryIHF__thumbtrack{
         height: 96px;
         padding: 0;
         gap: 0;
    }
     .ihfGalleryIHF .ihf-thumb{
         height: 96px;
         width: 50%;
         flex: 0 0 50%;
         min-width: 50%;
    }
     .ihfGalleryIHF__arrow{
         font-size: 34px;
    }
     .ihfGalleryIHF__frame{
         min-height: auto;
         padding: 8px 0;
         align-items: flex-start;
    }
     .ihfGalleryIHF__img{
         max-height: 42vh;
    }
     .ihfGalleryIHF__main{
         padding: 0 0px 10px;
    }
     .ihfGalleryIHF__head{
         padding: 14px 14px 0;
         gap: 10px;
    }
     .ihfGalleryIHF__title{
         font-size: 18px;
         line-height: 1.15;
         letter-spacing: .01em;
    }
     .ihfGalleryIHF__meta{
         margin-top: 6px;
         font-size: 13px;
    }
     .ihfGalleryIHF__ghost{
         padding: 8px 12px;
         font-size: 13px;
    }
     .ihfGalleryIHF__divider{
         margin: 12px 14px 14px;
    }
}
/* ========================= ARCHIVES (LIGHT modern) ========================= */
 :root {
     --accent: #d5291e;
     --bg: #ffffff;
     --text: #121826;
     --muted: #5b667a;
     --card: #ffffff;
     --border: rgba(16, 24, 40, 0.12);
     --shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
     --shadow-soft: 0 8px 20px rgba(16, 24, 40, 0.06);
     --radius-lg: 18px;
     --radius-md: 14px;
     --radius-sm: 12px;
}
 .abti-archives {
     padding: clamp(44px, 6vw, 84px) 16px;
     background: var(--bg);
     color: var(--text);
     font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
     overflow: hidden;
}
 .archives-shell {
     max-width: 980px;
     margin: 0 auto;
     position: relative;
}
 .archives-shell::before {
     content: "";
     position: absolute;
     inset: -180px -120px auto -120px;
     height: 340px;
     background: radial-gradient( circle at 35% 30%, rgba(213, 41, 30, 0.10), rgba(213, 41, 30, 0.00) 60% );
     pointer-events: none;
     transform: translateY(-30px);
     opacity: 0;
}
 .archives-header {
     margin-bottom: 20px;
}
 .archives-eyebrow {
     margin: 0 0 10px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     font-size: 12px;
     color: var(--muted);
}
 .archives-title {
     margin: 0 0 10px;
     font-size: clamp(30px, 3.6vw, 44px);
     line-height: 1.08;
     letter-spacing: -0.03em;
     position: relative;
     display: inline-block;
}
 .archives-title::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -8px;
     width: 56%;
     height: 4px;
     background: var(--accent);
     border-radius: 999px;
     opacity: 0.95;
     transform: scaleX(0);
     transform-origin: left;
}
 .archives-subtitle {
     margin: 0;
     max-width: 74ch;
     color: var(--muted);
     font-size: 14px;
     line-height: 1.75;
}
 .archives-accordion {
     margin-top: 22px;
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow);
     position: relative;
     opacity: 0;
     transform: translateY(18px);
}
 .archives-accordion::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient( 120deg, rgba(213, 41, 30, 0.00) 0%, rgba(213, 41, 30, 0.08) 35%, rgba(213, 41, 30, 0.00) 70% );
     transform: translateX(-120%);
     pointer-events: none;
}
 .acc-item + .acc-item {
     border-top: 1px solid var(--border);
}
 .acc-item {
     opacity: 0;
     transform: translateY(10px);
}
 .acc-trigger {
     width: 100%;
     display: grid;
     grid-template-columns: 1fr auto auto;
     align-items: center;
     gap: 12px;
     padding: 18px 16px;
     background: transparent;
     color: inherit;
     border: 0;
     cursor: pointer;
     text-align: left;
}
 .acc-trigger:hover {
     background: rgba(213, 41, 30, 0.035);
}
 .acc-trigger:focus-visible {
     outline: 3px solid rgba(213, 41, 30, 0.25);
     outline-offset: -2px;
}
 .acc-title {
     font-size: 15px;
     font-weight: 700;
     letter-spacing: -0.01em;
}
 .acc-meta {
     font-size: 12px;
     color: var(--muted);
}
 .acc-icon {
     width: 14px;
     height: 14px;
     position: relative;
     opacity: 0.95;
}
 .acc-icon::before, .acc-icon::after {
     content: "";
     position: absolute;
     inset: 0;
     margin: auto;
     background: var(--accent);
     border-radius: 1px;
}
 .acc-icon::before {
     width: 14px;
     height: 2px;
}
 .acc-icon::after {
     width: 2px;
     height: 14px;
     transition: transform 180ms ease;
}
 .acc-trigger[aria-expanded="true"] .acc-icon::after {
     transform: scaleY(0);
}
 .acc-panel {
     padding: 0 16px 16px;
}
 .doc-list {
     list-style: none;
     margin: 10px 0 0;
     padding: 0;
     display: grid;
     gap: 10px;
}
 .doc-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 14px 14px;
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     background: #ffffff;
     box-shadow: var(--shadow-soft);
}
 .doc-main {
     display: flex;
     align-items: center;
     min-width: 0;
}
 .doc-name {
     font-size: 14px;
     font-weight: 400;
     letter-spacing: -0.01em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: min(72ch, 62vw);
     color: #374151;
     ;
}
 .doc-download {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 14px;
     border-radius: 12px;
     border: 1px solid rgba(213, 41, 30, 0.22);
     background: rgba(213, 41, 30, 0.08);
     color: var(--accent);
     text-decoration: none;
     font-size: 13px;
     font-weight: 750;
     letter-spacing: -0.01em;
     white-space: nowrap;
     transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
 .doc-download:hover {
     background: rgba(213, 41, 30, 0.12);
     border-color: rgba(213, 41, 30, 0.35);
     transform: translateY(-1px);
}
 .doc-download:active {
     transform: translateY(0);
}
 .archives-footer {
     margin-top: 16px;
}
 .archives-note {
     margin: 0;
     color: var(--muted);
     font-size: 12px;
     line-height: 1.65;
}
 .archives-note code {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     background: rgba(213, 41, 30, 0.08);
     color: var(--accent);
     padding: 2px 6px;
     border-radius: 8px;
}
/* ========================= Page Load Animation (activate via body.is-ready) ========================= */
 .abti-archives .archives-header {
     opacity: 0;
     transform: translateY(18px);
}
 body.is-ready .abti-archives .archives-shell::before {
     opacity: 1;
     transition: opacity 700ms ease;
}
 body.is-ready .abti-archives .archives-header {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 1, 0.2, 1);
}
 body.is-ready .abti-archives .archives-title::after {
     transform: scaleX(1);
     transition: transform 700ms ease 140ms;
}
 body.is-ready .abti-archives .archives-accordion {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 700ms ease 160ms, transform 700ms cubic-bezier(0.2, 1, 0.2, 1) 160ms;
}
 body.is-ready .abti-archives .archives-accordion::before {
     animation: sheenMove 1050ms ease 320ms 1 both;
}
 @keyframes sheenMove {
     0% {
         transform: translateX(-120%);
    }
     100% {
         transform: translateX(120%);
    }
}
 body.is-ready .abti-archives .acc-item {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 1, 0.2, 1);
}
 body.is-ready .abti-archives .acc-item:nth-child(1) {
     transition-delay: 260ms;
}
 body.is-ready .abti-archives .acc-item:nth-child(2) {
     transition-delay: 340ms;
}
 body.is-ready .abti-archives .acc-item:nth-child(3) {
     transition-delay: 420ms;
}
 body.is-ready .abti-archives .acc-item:nth-child(4) {
     transition-delay: 500ms;
}
 body.is-ready .abti-archives .acc-item:nth-child(5) {
     transition-delay: 580ms;
}
 @media (max-width: 640px) {
     .acc-trigger {
         grid-template-columns: 1fr auto;
         grid-template-areas: "title icon" "meta icon";
         row-gap: 6px;
    }
     .acc-title {
         grid-area: title;
    }
     .acc-meta {
         grid-area: meta;
    }
     .acc-icon {
         justify-self: end;
    }
     .doc-item {
         flex-direction: column;
         align-items: stretch;
    }
     .doc-download {
         width: 100%;
    }
     .doc-name {
         max-width: 100%;
         white-space: normal;
    }
}
 @media (prefers-reduced-motion: reduce) {
     .abti-archives .archives-header, .abti-archives .archives-accordion, .abti-archives .acc-item {
         opacity: 1 !important;
         transform: none !important;
         transition: none !important;
    }
     .abti-archives .archives-title::after {
         transform: scaleX(1) !important;
         transition: none !important;
    }
     .abti-archives .archives-accordion::before {
         animation: none !important;
    }
}
/* ========================= FOOTER – FEDERATION STYLE ========================= */
 .siteFooterFed{
     background:#fff;
     border-top:1px solid rgba(0,0,0,.08);
     margin-top:5px;
     color:#1b1917;
}
 .sffWrap{
     max-width:1240px;
     margin:0 auto;
     padding:48px 18px 0;
}
 .sffTop{
     display:flex;
     justify-content:space-between;
     align-items:flex-start;
     gap:48px;
     padding-bottom:36px;
}
 .sffBrand{
     display:flex;
     align-items:center;
     gap:16px;
     max-width:380px;
}
 .sffLogoWrap{
     width:56px;
     height:56px;
     display:flex;
     align-items:center;
     justify-content:center;
}
 .sffLogo{
     width:52px;
     height:52px;
     object-fit:contain;
}
 .sffBrandText h3{
     margin:0;
     font-size:18px;
     font-weight:800;
}
 .sffBrandText p{
     margin:4px 0 0;
     font-size:14px;
     line-height:1.45;
     color:rgba(27,25,23,.65);
}
 .sffNav{
     display:grid;
     grid-template-columns:repeat(3, minmax(180px,1fr));
     gap:40px;
}
 .sffCol{
     display:flex;
     flex-direction:column;
     gap:8px;
     font-size:14px;
}
 .sffTitle{
     font-weight:700;
     margin-bottom:6px;
}
 .sffCol a{
     text-decoration:none;
     color:rgba(27,25,23,.7);
}
 .sffCol a:hover{
     color:var(--main);
     text-decoration:underline;
}
 .sffCol span{
     color:rgba(27,25,23,.6);
}
 .sffBottom{
     border-top:1px solid rgba(0,0,0,.06);
     padding:16px 0 20px;
     text-align:center;
     font-size:13px;
     color:rgba(27,25,23,.55);
}
 @media(max-width:900px){
     .sffTop{
         flex-direction:column;
         gap:36px;
    }
     .sffNav{
         grid-template-columns:1fr 1fr;
    }
}
 @media(max-width:520px){
     .sffNav{
         grid-template-columns:1fr;
    }
}
 @media (max-width: 980px){
     .heroWrap{
         grid-template-columns: 1fr;
         gap: 18px;
    }
     .heroMedia{
         order: -1;
    }
     .heroText{
         order: 0;
    }
     .heroMedia{
         justify-content:flex-start;
    }
     .heroimg{
         width: 100%;
    }
     .heroKicker, .heroBig{
         font-size: clamp(20px, 8vw, 40px);
    }
}