/* ============================================================
 * TMI Yearbook — style.css
 * Diekstrak dari index.html. Perubahan:
 *  - --muted digelapkan dari #777168 -> #665d52 agar memenuhi
 *    WCAG AA (rasio kontras ~5.7:1 di atas --paper #f5f1ea,
 *    sebelumnya hanya ~4.2:1).
 * ============================================================ */

    :root{
      --paper:#f5f1ea;--paper-2:#ebe5db;--ink:#171513;--muted:#665d52;
      --orange:#ff6420;--lime:#c6f04b;--blue:#7bb8ff;--line:rgba(23,21,19,.16);
      --radius:22px;--shadow:0 22px 60px rgba(23,21,19,.14);
    }
    *{box-sizing:border-box;margin:0;padding:0}
     html{scroll-behavior:smooth}
     main>section{scroll-margin-top:88px}
    body{background:var(--paper);color:var(--ink);font-family:"Space Grotesk",Arial,sans-serif;line-height:1.45;overflow-x:hidden}
    a{color:inherit;text-decoration:none}
    button{font:inherit;border:0;cursor:pointer}
    .mono{font-family:"DM Mono",monospace;letter-spacing:.03em}
    .wrap{max-width:1180px;margin:auto;padding:0 28px}
     body.pre-selection{overflow-x:hidden}
     body.non-school-target-selected .school-only-section{display:none}
     body.non-school-target-selected nav a[href="#digital"],
     body.non-school-target-selected nav a[href="#paket"],
     body.non-school-target-selected nav a[href="#proposal"]{display:none}
     .target-gate{min-height:100vh;background:
       radial-gradient(circle at 84% 18%,rgba(198,240,75,.14) 0 2px,transparent 2px 48px),
       radial-gradient(circle at 12% 82%,rgba(255,100,32,.16),transparent 25%),
       repeating-linear-gradient(118deg,transparent 0 86px,rgba(255,255,255,.035) 86px 87px,transparent 87px 174px),var(--ink);
       color:#fff;display:grid;place-items:center;padding:42px 28px;position:relative;overflow:hidden}
     .target-gate::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;right:-220px;top:-230px;background:var(--lime);opacity:.75;box-shadow:0 0 0 22px rgba(198,240,75,.11),0 0 0 48px rgba(255,100,32,.09),0 0 0 82px rgba(255,255,255,.035)}
     .target-gate::after{content:"TMI";position:absolute;left:-30px;bottom:-115px;font-size:300px;font-weight:700;letter-spacing:-.15em;color:rgba(255,255,255,.06);transform:rotate(-8deg)}
     .target-gate-inner{width:min(960px,100%);position:relative;z-index:1}
     .target-gate-kicker{font:11px "DM Mono";text-transform:uppercase;letter-spacing:.12em;color:var(--orange);margin-bottom:22px}
     .target-gate h1{font-size:clamp(45px,7vw,88px);line-height:.88;letter-spacing:-.08em;max-width:680px}
     .target-gate h1 em{font-style:normal;color:var(--orange)}
     .target-gate-copy{max-width:400px;color:#aaa49d;font-size:15px;margin-top:22px}
     .target-gate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}
      .target-gate-card{min-height:225px;border:1px solid #504943;border-radius:20px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:#211f1c;transition:transform .2s,background .2s,border-color .2s;position:relative;overflow:hidden}
     .target-gate-card:nth-child(2){background:#293039}
     .target-gate-card:nth-child(3){background:var(--orange);color:var(--ink);border-color:var(--orange)}
     .target-gate-card:hover{transform:translateY(-6px);border-color:var(--lime)}
     .target-gate-card:nth-child(3):hover{border-color:#fff}
     .target-gate-photo{position:absolute;inset:0;overflow:hidden;z-index:0}
     .target-gate-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
     .target-gate-photo-img.is-active{opacity:1}
     .target-gate-photo-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(190deg,rgba(23,21,19,.28) 0%,rgba(23,21,19,.88) 100%);pointer-events:none;opacity:0;transition:opacity .8s ease}
     .target-gate-card:nth-child(3) .target-gate-photo-overlay{background:linear-gradient(190deg,rgba(74,42,29,.25) 0%,rgba(74,42,29,.82) 100%)}
     .target-gate-card.has-photo .target-gate-photo-overlay{opacity:1}
     .target-gate-card.has-photo strong,.target-gate-card.has-photo small,.target-gate-card.has-photo .target-gate-number{color:#fff}
     .target-gate-card.has-photo small b{color:#fff}
     .target-gate-number{font:11px "DM Mono";color:var(--orange);position:relative;z-index:2}
     .target-gate-card:nth-child(3) .target-gate-number{color:var(--ink)}
     .target-gate-card strong{font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(22px,3vw,34px);line-height:.95;letter-spacing:-.02em}
     .target-gate-card strong span{font-size:.55em;vertical-align:top;color:var(--orange)}
     .target-gate-card:nth-child(3) strong span{color:var(--ink)}
      .target-gate-card small{font-size:12px;color:#aaa49d;line-height:1.25}
      .target-gate-card small b{font-weight:700;color:#fff}
     .target-gate-card:nth-child(3) small{color:#4a2a1d}
      .target-gate-card:nth-child(3) small b{color:#4a2a1d}
      .target-gate-card:nth-child(3).has-photo small,.target-gate-card:nth-child(3).has-photo small b{color:#fff}
      .target-gate-card:nth-child(3).has-photo strong span{color:#fff}
      .target-gate-icon{position:absolute;right:18px;top:50%;width:60px;height:60px;transform:translateY(-50%);perspective:180px;pointer-events:none;z-index:1}
      .target-gate-card>strong,.target-gate-card>small{position:relative;z-index:2;padding-right:72px}
      .target-gate-icon-school .icon-book-page{position:absolute;right:3px;top:11px;width:35px;height:42px;border:2px solid rgba(255,255,255,.68);border-radius:3px;background:linear-gradient(145deg,#f7f2e8,#bfc8d2);transform:rotate(8deg) skewY(-3deg);box-shadow:5px 6px 0 rgba(23,21,19,.24)}
      .target-gate-icon-school .icon-book-cover{position:absolute;left:7px;top:7px;width:36px;height:45px;border:2px solid #ff6420;border-radius:4px;background:linear-gradient(145deg,#ff9a63 0 56%,#d94d18 56%);transform:rotate(-10deg) skewY(-3deg);box-shadow:6px 7px 0 rgba(0,0,0,.3)}
      .target-gate-icon-school .icon-book-cover::after{content:"TMI";position:absolute;left:5px;top:15px;color:#171513;font:700 9px "Space Grotesk";letter-spacing:-.08em}
      .target-gate-icon-brand .icon-camera-body{position:absolute;left:8px;top:20px;width:46px;height:29px;border:2px solid #171513;border-radius:7px;background:linear-gradient(145deg,#ff9a63,#ff6420 62%,#c84612);transform:rotate(-7deg) skewY(-2deg);box-shadow:7px 7px 0 rgba(0,0,0,.3)}
      .target-gate-icon-brand .icon-camera-body::before{content:"";position:absolute;left:7px;top:-8px;width:17px;height:9px;border:2px solid #171513;border-bottom:0;border-radius:4px 4px 0 0;background:#ff9a63}
      .target-gate-icon-brand .icon-camera-lens{position:absolute;left:24px;top:25px;width:20px;height:20px;border:3px solid #f5f1ea;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 10%,#7bb8ff 11% 38%,#26364a 40% 100%);transform:rotate(-7deg);box-shadow:3px 4px 0 rgba(0,0,0,.28)}
      .target-gate-icon-brand .icon-camera-dot{position:absolute;left:15px;top:25px;width:5px;height:5px;border-radius:50%;background:#c6f04b}
      .target-gate-icon-institution .icon-building{position:absolute;left:11px;bottom:7px;width:37px;height:43px;border:2px solid #171513;background:linear-gradient(90deg,#171513 0 72%,#4b281e 72%);transform:skewY(-5deg) rotate(2deg);box-shadow:8px 6px 0 rgba(23,21,19,.26)}
      .target-gate-icon-institution .icon-building::before{content:"";position:absolute;left:-5px;top:-8px;width:43px;height:9px;background:#171513;border:2px solid #ff9a63;transform:skewX(-24deg)}
      .target-gate-icon-institution .icon-window{position:absolute;z-index:1;width:7px;height:8px;background:#c6f04b;box-shadow:13px 0 0 #7bb8ff,0 13px 0 #ff6420,13px 13px 0 #c6f04b}
      .target-gate-icon-institution .icon-window:nth-child(2){left:18px;top:17px}
      .target-gate-icon-institution .icon-window:nth-child(3){left:18px;top:30px}
     .target-gate.is-hidden{display:none}
      @media(max-width:700px){.target-gate{padding:32px 18px}.target-gate::before{width:440px;height:440px;right:-220px;top:-300px;opacity:.5}.target-gate-kicker,.target-gate h1,.target-gate-copy{position:relative;top:-34px}.target-gate h1{font-family:"Poppins","Space Grotesk",sans-serif;font-size:clamp(54px,11vw,72px);max-width:100%;line-height:.86;letter-spacing:-.08em;text-shadow:2px 3px 0 rgba(0,0,0,.28)}.target-gate h1 em{display:inline-block;transform:skewX(-5deg) rotate(-2deg);text-shadow:3px 3px 0 rgba(23,21,19,.72)}.target-gate-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:28px}.target-gate-card{min-height:116px;padding:14px}.target-gate-card:nth-child(3){grid-column:1/-1}.target-gate-card strong{font-size:22px}.target-gate-card small{font-size:10px}.target-gate-icon{right:14px;width:54px;height:54px}.target-gate-card>strong,.target-gate-card>small{padding-right:62px}}

    /* Navigation */
    header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform;isolation:isolate}
    header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(245,241,234,.87);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
    nav{max-width:1180px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-weight:700;font-size:14px;letter-spacing:-.03em}
     .brand-lockup{display:flex;align-items:center;gap:13px;width:460px;height:100px;position:relative;overflow:hidden;isolation:isolate;mix-blend-mode:multiply;flex:none;transform-origin:left center;animation:tmiLogoReveal .85s cubic-bezier(.2,.75,.2,1) both}
     .brand-lockup::after{content:"";position:absolute;z-index:2;inset:-35% -18%;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 49%,transparent 60%);transform:translateX(-125%) skewX(-16deg);animation:tmiLogoSweep 1.05s cubic-bezier(.2,.65,.2,1) .5s both}
     .brand-lockup b{font-size:48px;line-height:1;color:var(--orange);letter-spacing:-.1em;position:relative;z-index:1;animation:tmiLogoMarkIn .7s cubic-bezier(.2,.75,.2,1) .08s both}
     .brand-lockup span{font-family:"Poppins",sans-serif;font-size:25px;font-weight:800;line-height:1.2;letter-spacing:.02em;color:var(--ink);position:relative;z-index:1;animation:tmiLogoWordIn .7s cubic-bezier(.2,.75,.2,1) .2s both}
     .brand:hover .brand-lockup{animation:tmiLogoHover .45s cubic-bezier(.2,.75,.2,1) both}
     .brand:hover .brand-lockup b{animation:tmiLogoMarkHover .5s cubic-bezier(.2,.75,.2,1) both}
     .brand-accent-bar{width:120px;height:6px;display:flex;align-items:flex-end;overflow:hidden;margin-top:-10px;border:0;border-radius:1px;line-height:0;transform-origin:left center;animation:tmiAccentReveal .7s cubic-bezier(.2,.75,.2,1) .42s both}
     .brand-accent-bar span{display:block;flex:1;min-width:0;transform:scaleX(0);transform-origin:left center;animation:tmiAccentSegment .45s cubic-bezier(.2,.75,.2,1) both}
     .brand-accent-bar span+span{margin-left:-4px;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%)}
     .brand-accent-bar span:nth-child(1){height:100%;align-self:flex-end;background:var(--ink);animation-delay:.48s}
     .brand-accent-bar span:nth-child(2){height:72%;align-self:flex-end;background:var(--lime);animation-delay:.56s}
     .brand-accent-bar span:nth-child(3){height:90%;align-self:flex-end;background:var(--orange);animation-delay:.64s}
     .brand-accent-bar span:nth-child(4){height:62%;align-self:flex-end;background:#fff;animation-delay:.72s}
     .footer-brand .brand-lockup span{color:#fff}
    .brand-mark{width:31px;height:31px;border-radius:9px;background:#f5a900;overflow:hidden;display:grid;place-items:center;flex:none}
    .brand-mark img{width:100%;height:100%;object-fit:cover}
     .navlinks{display:flex;align-items:center;gap:32px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;font-size:18px;color:var(--muted);white-space:nowrap;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%)}
     .navlinks::-webkit-scrollbar{display:none}
     .navlinks a{flex:0 0 auto}
     .navlinks a:hover{color:var(--orange)}
      .navlinks a.is-gallery-active,.navlinks a.is-active{color:var(--orange);font-weight:700}
     .nav-more-toggle{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin:0;font:inherit;font-size:18px;color:var(--muted);cursor:pointer}
     .nav-more-toggle:hover{color:var(--orange)}
     .nav-more-toggle.is-active{color:var(--orange);font-weight:700}
     .nav-more-toggle svg{width:11px;height:11px;transition:transform .18s ease}
     .nav-more-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
     #navMoreMenu{position:fixed;z-index:60;min-width:168px;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(23,21,19,.14);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
     #navMoreMenu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
     #navMoreMenu a{padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink);white-space:nowrap}
     #navMoreMenu a:hover{background:#f5f1ea;color:var(--orange)}
     #navMoreMenu a.is-active{color:var(--orange);font-weight:700;background:#f5f1ea}
    .nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-size:15px;font-weight:700;padding:14px 22px}
    .nav-cta{background:var(--ink);color:#fff}
     .nav-cta.nav-chat{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
     .nav-cta.nav-chat:hover{background:var(--lime,#e8f26a)}
     header nav{display:flex;align-items:center;gap:14px}
     .nav-cta-group{display:flex;align-items:center;gap:10px;flex:0 0 auto}
     .nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;border:0;background:none;padding:0;cursor:pointer;flex:0 0 auto;transform:translateZ(0);-webkit-transform:translateZ(0)}
     .nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
     @media(max-width:860px){nav{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:10px;padding-left:18px;padding-right:18px}.brand{grid-column:1;grid-row:1}.nav-cta-group{grid-column:2;grid-row:1;gap:6px}.nav-cta{padding:10px 14px;font-size:12px}.navlinks{display:none}.brand-lockup{width:190px;height:44px}.brand-accent-bar{width:100px}.nav-hamburger{display:flex}.nav-cta.nav-chat{display:none}}
     body.mobile-nav-open .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
     body.mobile-nav-open .nav-hamburger span:nth-child(2){opacity:0}
     body.mobile-nav-open .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
     .mobile-nav-backdrop{position:fixed;inset:0;background:rgba(23,21,19,.45);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:59}
     .mobile-nav-panel{position:fixed;top:0;right:0;height:100%;height:100dvh;width:min(320px,84vw);background:#fdfaf5;z-index:60;display:flex;flex-direction:column;padding:20px 20px calc(20px + env(safe-area-inset-bottom));transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);box-shadow:-18px 0 40px rgba(23,21,19,.14)}
     body.mobile-nav-open{overflow:hidden}
     body.mobile-nav-open .mobile-nav-backdrop{opacity:1;visibility:visible}
     body.mobile-nav-open .mobile-nav-panel{transform:translateX(0)}
     .mobile-nav-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex:0 0 auto}
     .mobile-nav-panel-title{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
     .mobile-nav-close{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
     .mobile-nav-panel-links{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1 1 auto;min-height:0}
     .mobile-nav-panel-links a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink);font-weight:600}
     .mobile-nav-panel-links a.is-active{color:var(--orange)}
     .mobile-nav-panel-cta{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);flex:0 0 auto}
     .mobile-nav-panel-cta .nav-cta{width:100%}
     @media(min-width:861px){.mobile-nav-panel,.mobile-nav-backdrop,.nav-hamburger{display:none!important}}
     header .brand-lockup{width:250px;height:58px;gap:11px}
     header .brand-lockup b{font-size:34px}
     header .brand-lockup span{font-size:10px}
     @media(max-width:860px){header .brand-lockup{width:205px;height:50px}header .brand-lockup b{font-size:30px}header .brand-lockup span{font-size:9px}}
     .tmi-tab-component{animation-duration:.62s;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:both;animation-delay:var(--tab-delay,0ms);will-change:opacity,translate}
     .tmi-tab-from-right{animation-name:tmiTabFromRight}
     .tmi-tab-from-left{animation-name:tmiTabFromLeft}
     .tmi-tab-from-bottom{animation-name:tmiTabFromBottom}
     @keyframes tmiTabFromRight{from{opacity:0;translate:52px 0}to{opacity:1;translate:0 0}}
     @keyframes tmiTabFromLeft{from{opacity:0;translate:-52px 0}to{opacity:1;translate:0 0}}
     @keyframes tmiTabFromBottom{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
     @keyframes tmiLogoReveal{from{opacity:0;transform:translateX(-18px) scale(.94)}to{opacity:1;transform:translateX(0) scale(1)}}
     @keyframes tmiLogoMarkIn{from{opacity:0;transform:translateX(-24px) rotate(-9deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
     @keyframes tmiLogoWordIn{from{opacity:0;transform:translateX(16px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:translateX(0);clip-path:inset(0 0 0 0)}}
     @keyframes tmiLogoSweep{from{transform:translateX(-125%) skewX(-16deg)}to{transform:translateX(125%) skewX(-16deg)}}
     @keyframes tmiLogoHover{50%{transform:translateY(-2px) rotate(-1deg)}to{transform:translateY(0) rotate(0)}}
     @keyframes tmiLogoMarkHover{50%{transform:scale(1.08) rotate(-3deg)}to{transform:scale(1) rotate(0)}}
     @keyframes tmiAccentReveal{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:scaleX(1)}}
     @keyframes tmiAccentSegment{from{transform:scaleX(0)}to{transform:scaleX(1)}}
      .target-gate.home-motion::before{animation:tmiHomeOrb 1.1s cubic-bezier(.16,1,.3,1) both}
      .target-gate.home-motion::after{animation:tmiHomeStamp 1.05s cubic-bezier(.16,1,.3,1) .08s both}
      .target-gate.home-motion .target-gate-inner>.tmi-tab-component{animation-name:tmiHomeRise}
      .target-gate.home-motion .target-gate-kicker{animation:tmiHomeRise .75s cubic-bezier(.16,1,.3,1) both}
      .target-gate.home-motion h1{animation:tmiHomeRise .85s cubic-bezier(.16,1,.3,1) .08s both}
      .target-gate.home-motion .target-gate-copy{animation:tmiHomeRise .85s cubic-bezier(.16,1,.3,1) .16s both}
      .target-gate.home-motion .target-gate-card{animation-name:tmiHomeCard;animation-duration:.85s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-delay:calc(var(--tab-delay,0ms) + 90ms)}
      .target-gate.home-motion .target-gate-card:nth-child(1){animation-delay:.26s}
      .target-gate.home-motion .target-gate-card:nth-child(2){animation-delay:.35s}
      .target-gate.home-motion .target-gate-card:nth-child(3){animation-delay:.44s}
      @keyframes tmiHomeOrb{from{opacity:.15;transform:scale(.88) rotate(-6deg)}to{opacity:.75;transform:scale(1) rotate(0)}}
      @keyframes tmiHomeStamp{from{opacity:0;transform:translate(-16px,14px) rotate(-10deg) scale(.95)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
      @keyframes tmiHomeRise{from{opacity:0;transform:translateY(16px) scale(.99);filter:blur(2px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
      @keyframes tmiHomeCard{from{opacity:0;transform:translateY(14px) rotateX(3deg) scale(.98);filter:brightness(.94)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:brightness(1)}}
      @media(prefers-reduced-motion:reduce){.target-gate.home-motion::before,.target-gate.home-motion::after,.target-gate.home-motion .target-gate-inner>.tmi-tab-component,.target-gate.home-motion .target-gate-kicker,.target-gate.home-motion h1,.target-gate.home-motion .target-gate-copy,.target-gate.home-motion .target-gate-card{animation:none!important}}
     @media(prefers-reduced-motion:reduce){.tmi-tab-component,.brand-lockup,.brand-lockup::after,.brand-lockup b,.brand-lockup span,.brand:hover .brand-lockup,.brand:hover .brand-lockup b,.brand-accent-bar,.brand-accent-bar span{animation:none!important;clip-path:none!important;transform:none!important;opacity:1!important}}

    /* Hero — output-first */
    .hero{padding:72px 0 84px;position:relative;overflow:hidden;background:
      radial-gradient(circle at 8% 76%,rgba(255,100,32,.14),transparent 25%),
      radial-gradient(circle at 72% 18%,rgba(198,240,75,.12),transparent 23%),
      repeating-linear-gradient(135deg,transparent 0 92px,rgba(23,21,19,.035) 92px 93px,transparent 93px 184px),var(--paper)}
    .hero::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;right:-240px;top:-210px;background:var(--lime);opacity:.42;filter:blur(2px)}
    .hero::after{content:"TMI / VISUAL STORY";position:absolute;left:-22px;bottom:20px;font:700 clamp(54px,8vw,108px)/.8 "Space Grotesk";letter-spacing:-.14em;color:rgba(23,21,19,.055);transform:rotate(-9deg);pointer-events:none;z-index:0}
    .hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:62px;align-items:center;position:relative;z-index:1}
    .eyebrow,.section-kicker{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.12em;color:var(--orange)}
    .eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:22px}
    .eyebrow::before{content:"";width:28px;height:2px;background:var(--orange)}
    h1{font-size:clamp(47px,6.4vw,86px);line-height:.92;letter-spacing:-.075em;max-width:620px}
    h1 em{font-style:normal;color:var(--orange)}
    .hero-copy{max-width:430px;margin-top:25px;color:#5e5851;font-size:16px}
    .hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
    .button-primary{background:var(--orange);color:var(--ink)}
    .button-dark{background:var(--ink);color:#fff}
    .button-outline{border:1px solid var(--ink);background:transparent}
     .hero-target-chooser{margin-top:28px}
     .hero-target-label{font:10px "DM Mono";color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
     .hero-target-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
     .hero-target{min-height:92px;padding:11px 10px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.42);display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,background .2s,border-color .2s}
     .hero-target:hover{transform:translateY(-3px);background:#fff;border-color:var(--orange)}
     .hero-target-number{font:9px "DM Mono";color:var(--orange)}
     .hero-target strong{font-size:13px;line-height:1.02;letter-spacing:-.04em}
     .hero-target small{font-size:9px;line-height:1.15;color:var(--muted)}
    .hero-note{display:flex;align-items:center;gap:11px;margin-top:34px;color:var(--muted);font-size:11px}
    .avatars{display:flex}.avatar{width:25px;height:25px;border-radius:50%;border:2px solid var(--paper);margin-left:-6px;background:linear-gradient(145deg,#ff9a63,#43322a)}.avatar:first-child{margin-left:0;background:linear-gradient(145deg,#c6f04b,#45612b)}.avatar:nth-child(3){background:linear-gradient(145deg,#7bb8ff,#2e496a)}

    /* CSS artwork stands in for the digital deliverables */
    .digital-stage{min-height:470px;position:relative}
     .hero-parallax .yearbook,.hero-parallax .brand-tile,.hero-parallax .float-card{will-change:transform}
     @media(prefers-reduced-motion:reduce){.hero-parallax .yearbook,.hero-parallax .brand-tile,.hero-parallax .float-card{transform:none!important}}
    .yearbook{position:absolute;left:8%;top:16px;width:69%;height:420px;padding:20px;background:#1b1917;border:9px solid #302c28;border-radius:12px;box-shadow:var(--shadow);transform:rotate(-4deg);overflow:hidden}
    .cover-art{height:100%;border-radius:4px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:linear-gradient(135deg,#f76c2a 0%,#ff9f40 35%,#1f1d1a 35%,#1f1d1a 100%)}
    .cover-art::after{display:none}
    .cover-photo-cycle{position:absolute;inset:0;overflow:hidden;z-index:0;background:#1f1d1a;clip-path:polygon(65% 0%,100% 0%,100% 100%,0% 100%,0% 58%)}
    .cover-photo-cycle::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.5) 100%);pointer-events:none}
    .cover-photo-cycle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
    .cover-photo-cycle img.is-active{opacity:1}
    .cover-top{display:flex;justify-content:space-between;font-size:9px;color:#fff;font-weight:700;position:relative;z-index:1}
    .cover-title{color:#fff;position:relative;z-index:1;font-size:clamp(34px,5vw,63px);line-height:.82;letter-spacing:-.09em}
    .cover-bottom{position:relative;z-index:1;color:#fff;font-size:10px;display:flex;justify-content:space-between;align-items:end}
    .cover-bottom strong{font-size:16px}
    .float-card{position:absolute;z-index:2;background:rgba(255,255,255,.93);border:1px solid rgba(23,21,19,.12);box-shadow:0 14px 35px rgba(23,21,19,.15);border-radius:14px;padding:14px}
    .float-card small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px}
    .float-card b{font-size:17px;line-height:1}
    .float-one{right:0;top:55px}.float-two{right:4%;bottom:42px;background:var(--lime)}.float-three{left:0;bottom:22px;background:var(--ink);color:#fff}
    .float-three small{color:#afa9a1}
    .play{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;margin-top:9px;font-size:12px}
     .brand-tile{position:absolute;z-index:4;right:14%;top:-12px;width:148px;height:148px;border-radius:18px;overflow:hidden;transform:rotate(8deg);border:3px solid #fff;box-shadow:0 18px 36px rgba(23,21,19,.24)}
     .brand-tile-copy{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;background:var(--orange);color:var(--ink);text-align:center;transition:opacity .4s ease}
      .brand-tile-copy{position:relative}
      .brand-tile-copy.is-hidden{opacity:0}
      .brand-tile-copy::before{content:"";position:absolute;inset:13px;border:1px dashed rgba(23,21,19,.34);border-radius:10px;pointer-events:none}
      .brand-tile-copy b{font-size:38px;letter-spacing:-.12em;line-height:1;position:relative;z-index:1}
      .brand-tile-copy span{font:9px "DM Mono";line-height:1.15;letter-spacing:.06em;position:relative;z-index:1}
      .brand-tile-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;padding:10px;opacity:0;transition:opacity .4s ease}
      .brand-tile-logo.is-active{opacity:1}
      .brand-tile-logo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
    @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:30px}.digital-stage{min-height:400px}.yearbook{width:72%;height:370px}}
     @media(max-width:500px){.hero{padding-top:48px}.digital-stage{min-height:325px}.yearbook{height:300px;left:4%;width:76%;border-width:6px}.float-card{padding:10px}.float-card b{font-size:14px}.float-one{right:-2px}.float-two{right:0}.float-three{left:0;bottom:4px}.brand-tile{width:104px;height:104px;right:8%;top:-5px;border-width:3px}.brand-tile-copy::before{inset:9px;border-radius:7px}.brand-tile-copy b{font-size:27px}.brand-tile-copy span{font-size:7px}.hero-target-chooser{margin-top:23px}.hero-target-grid{gap:5px}.hero-target{min-height:83px;padding:9px 7px}.hero-target strong{font-size:11px}.hero-target small{font-size:8px}}

    /* Showcase */
    .section{padding:95px 0}
    .section-dark{background:var(--ink);color:#fff}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:32px}
    .section-head h2{font-size:clamp(38px,5.6vw,70px);line-height:.94;letter-spacing:-.07em;margin-top:10px;max-width:660px}
    .section-head h2 em,h2 em{font-style:normal;color:var(--orange)}
    .section-head p{max-width:300px;color:var(--muted);font-size:14px}
    .section-dark .section-head p{color:#a8a29b}
     #karya .section-head,#portfolio .gallery-head{flex-direction:row-reverse}
     #karya .section-head>p,#portfolio .gallery-head>p{text-align:left}
     #karya .section-head>div:first-child,#portfolio .gallery-head>div:first-child{transform:translateX(120px)}
     #karya .section-head>p,#portfolio .gallery-head>p{transform:translateY(-14px)}
     @media(max-width:700px){#karya .section-head,#portfolio .gallery-head{display:block}#karya .section-head>div:first-child,#portfolio .gallery-head>div:first-child,#karya .section-head>p,#portfolio .gallery-head>p{transform:none}#karya .section-head>p,#portfolio .gallery-head>p{margin-top:16px}}
    .showcase-grid{display:grid;grid-template-columns:1.25fr .85fr .85fr;gap:14px}
    .project{min-height:360px;border-radius:var(--radius);overflow:hidden;position:relative;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
    .project-main{background:linear-gradient(145deg,#e95a1b,#ffb340 48%,#c8ef4c 48%);color:var(--ink)}
    .project-blue{background:linear-gradient(145deg,#182b3c,#568fc7 58%,#8cc6ff 58%)}
    .project-lime{background:linear-gradient(145deg,#c6f04b,#eefba6 52%,#f26b2a 52%)}
    .project::before{content:"";position:absolute;inset:11px;border:1px solid rgba(255,255,255,.35);border-radius:16px;pointer-events:none}
    .project-tag{align-self:flex-start;position:relative;z-index:1;padding:7px 10px;border-radius:99px;background:rgba(255,255,255,.2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
    .project-main .project-tag,.project-lime .project-tag{background:rgba(23,21,19,.12)}
    .project-art{position:absolute;inset:68px 24px 76px;display:flex;align-items:center;justify-content:center}
    .poster{width:78%;height:86%;border:7px solid rgba(255,255,255,.8);border-radius:4px;box-shadow:12px 16px 0 rgba(23,21,19,.16);transform:rotate(-7deg);padding:12px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,rgba(23,21,19,.76),rgba(23,21,19,.16))}
    .poster .line{height:6px;width:55%;background:#fff;border-radius:5px}.poster .line:last-child{width:30%}
    .poster b{font-size:36px;color:#fff;letter-spacing:-.1em;line-height:.8}
    .screen{width:88%;height:72%;border-radius:10px;border:5px solid rgba(255,255,255,.82);background:linear-gradient(135deg,#ff7030 0 34%,#1a2832 34% 62%,#9fd2ff 62%);transform:rotate(7deg);box-shadow:-12px 15px 0 rgba(23,21,19,.2)}
    .screen::before{content:"▶";display:grid;place-items:center;height:100%;color:#fff;font-size:30px;opacity:.9}
    .project-info{position:relative;z-index:1}.project-info small{font-size:10px;opacity:.75}.project-info h3{font-size:22px;letter-spacing:-.05em;margin-top:3px}
    .showcase-note{margin-top:17px;font-size:11px;color:#918b83}
    @media(max-width:800px){.showcase-grid{grid-template-columns:1fr 1fr}.project-main{grid-column:span 2}.project{min-height:320px}}
    @media(max-width:520px){.showcase-grid{grid-template-columns:1fr}.project-main{grid-column:auto}.project{min-height:300px}}

    /* Gallery */
    .gallery-section{padding-top:20px}
    .gallery-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
    .gallery-head h2{font-size:clamp(32px,4.5vw,57px);line-height:.94;letter-spacing:-.07em;margin-top:10px}
    .gallery-head p{max-width:280px;color:#aaa49d;font-size:13px}
    .gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
    .gallery-item{grid-column:span 4;min-height:220px;border-radius:18px;overflow:hidden;position:relative;padding:15px;display:flex;flex-direction:column;justify-content:space-between;background:#282522}
    .gallery-item:nth-child(1),.gallery-item:nth-child(8){grid-column:span 6;min-height:260px}
    .gallery-visual{position:absolute;inset:0;overflow:hidden;transition:opacity .4s ease}
    .gallery-visual::before,.gallery-visual::after{content:"";position:absolute}
    .g-video .gallery-visual{background:linear-gradient(135deg,#ff6420 0 28%,#302720 28% 66%,#9bcf50 66%)}
    .g-video .gallery-visual::before{width:180px;height:180px;border-radius:50%;border:28px solid rgba(255,255,255,.72);right:15%;top:14%;box-shadow:0 0 0 22px rgba(23,21,19,.18)}
    .g-film .gallery-visual{background:linear-gradient(160deg,#16212c,#536e88 48%,#e56c38 48%)}
    .g-film .gallery-visual::before{width:72%;height:60%;border:4px solid rgba(255,255,255,.72);left:14%;top:18%;transform:rotate(-7deg)}
    .g-film .gallery-visual::after{content:"▶";color:#fff;font-size:26px;left:47%;top:38%;z-index:1}
    .g-highlight .gallery-visual{background:linear-gradient(145deg,#a8d64e,#f2d45a 44%,#ed6436 44% 70%,#263443 70%)}
    .g-highlight .gallery-visual::before{width:130%;height:10px;background:rgba(255,255,255,.65);transform:rotate(-18deg);top:41%;left:-10%;box-shadow:0 24px 0 rgba(255,255,255,.3)}
    .g-class .gallery-visual{background:linear-gradient(135deg,#7bb8ff,#334e71 55%,#ff9a63 55%)}
    .g-class .gallery-visual::before{width:74%;height:56%;background:rgba(255,255,255,.3);border:5px solid rgba(255,255,255,.78);left:13%;top:20%;transform:rotate(4deg)}
    .g-class .gallery-visual::after{width:88px;height:88px;border-radius:50%;background:#f7c58e;left:28%;top:27%;box-shadow:74px 8px 0 #9f6e5b,37px 67px 0 #d37d5a,-24px 74px 0 #6c8e9d}
    .g-circle .gallery-visual{background:radial-gradient(circle at 50% 46%,#ffad77 0 11%,transparent 12%),radial-gradient(circle at 30% 40%,#89c8ff 0 10%,transparent 11%),radial-gradient(circle at 72% 38%,#c6f04b 0 11%,transparent 12%),linear-gradient(140deg,#26323f,#7e5c56)}
    .g-circle .gallery-visual::before{width:88%;height:68%;border:2px solid rgba(255,255,255,.65);border-radius:50%;left:6%;top:15%}
    .g-personal .gallery-visual{background:linear-gradient(125deg,#ee9f71,#5e3940 55%,#1d242b 55%)}
    .g-personal .gallery-visual::before{width:140px;height:220px;border-radius:80px 80px 22px 22px;background:linear-gradient(#f6bf96 0 33%,#33252a 33%);left:38%;top:8%;transform:rotate(9deg);box-shadow:18px 15px 0 rgba(23,21,19,.2)}
    .g-drone .gallery-visual{background:linear-gradient(180deg,#8dc6f4 0 42%,#c6e777 42% 58%,#557749 58%)}
    .g-drone .gallery-visual::before{width:160px;height:160px;border:26px solid rgba(255,255,255,.7);border-radius:50%;right:15%;top:18%}
    .g-drone .gallery-visual::after{width:180%;height:50px;background:rgba(255,255,255,.35);left:-30%;bottom:22%;transform:rotate(-12deg)}
    .g-all .gallery-visual{background:linear-gradient(145deg,#ff6420,#eea23e 47%,#252a33 47%)}
    .g-all .gallery-visual::before{width:84%;height:64%;left:8%;top:17%;border:5px solid rgba(255,255,255,.7);background:linear-gradient(90deg,rgba(255,255,255,.2) 0 33%,transparent 33% 66%,rgba(255,255,255,.17) 66%)}
    .g-all .gallery-visual::after{width:22px;height:110px;background:#fff;left:39%;top:24%;border-radius:99px;box-shadow:45px 12px 0 #c6f04b,-40px 8px 0 #7bb8ff}
    .g-concept .gallery-visual{background:linear-gradient(135deg,#c6f04b 0 34%,#ff6420 34% 67%,#27231f 67%)}
    .g-concept .gallery-visual::before{width:110px;height:160px;left:31%;top:16%;border:3px solid #fff;transform:rotate(-12deg);box-shadow:70px 22px 0 -3px #ffdbbd,140px -4px 0 -3px #7bb8ff}
    .gallery-overlay{position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(16,14,12,.8));z-index:1}
    .gallery-type,.gallery-label{position:relative;z-index:2}
    .gallery-type{align-self:flex-start;font:10px "DM Mono";padding:7px 9px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28)}
    .gallery-label small{display:block;font:10px "DM Mono";color:#d0cbc5;margin-bottom:3px}.gallery-label h3{font-size:22px;letter-spacing:-.06em;color:#fff}
     .target-nav{display:flex;flex-direction:column;gap:11px;margin-top:25px;max-width:520px}
      .target-nav-item{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-size:15px;font-weight:600;transition:transform .18s ease,border-color .18s ease,background .18s ease}
      .target-nav-item:hover{transform:translateX(5px)}
      .target-nav-num{font:12px "DM Mono";opacity:.55;min-width:20px}
      .target-nav-label{flex:1}
      .target-nav-arrow{opacity:.7;font-size:16px;transition:transform .18s ease}
      .target-nav-item:hover .target-nav-arrow{transform:translate(2px,2px)}
      /* 01 / Sekolah & Angkatan — netral gelap, aksen lime */
      .cat-sekolah{background:#211f1c;border-color:#3a352f}
      .cat-sekolah:hover{border-color:var(--lime)}
      .cat-sekolah .target-nav-num{color:var(--lime);opacity:1}
      /* 02 / Brand & Komunitas — biru gelap, aksen biru */
      .cat-brand{background:#232a33;border-color:#37424f}
      .cat-brand:hover{border-color:var(--blue)}
      .cat-brand .target-nav-num{color:var(--blue);opacity:1}
      /* 03 / Institusi, Organisasi & Korporasi — netral gelap juga (oranye dipakai khusus tombol aksi, bukan label kategori), aksen coklat-oranye redup */
      .cat-institusi{background:#241d18;border-color:#4a3527}
      .cat-institusi:hover{border-color:var(--orange)}
      .cat-institusi .target-nav-num{color:var(--orange);opacity:1}
      @media(max-width:520px){.target-nav-item{padding:14px 16px;font-size:14px}}
      /* PC & tablet: box kategori jadi grid sejajar rapi (bukan numpuk sempit di kiri) */
      @media(min-width:701px){
        .target-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:none;gap:12px}
        .target-nav-item{height:100%}
      }
     .portfolio-targets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
      .portfolio-target{padding:20px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:#211f1c;scroll-margin-top:100px;position:relative;overflow:hidden}
     .target-head{display:block;margin-bottom:18px}
     .target-index{font:10px "DM Mono";color:var(--orange)}
     .target-head h3{font-size:clamp(28px,3.6vw,44px);line-height:.95;letter-spacing:-.07em;margin-top:7px}
     .target-head h3 em{font-style:normal;color:var(--orange)}
     .target-head p{max-width:345px;color:#aaa49d;font-size:13px;margin-top:12px}
     .target-head strong{color:#fff}
      .portfolio-target .target-head{padding-right:70px}
      .portfolio-target-icon{position:absolute;right:20px;top:20px;width:58px;height:58px;perspective:180px;pointer-events:none;z-index:1}
      .portfolio-icon-book::before{content:"";position:absolute;left:7px;top:8px;width:35px;height:43px;border:2px solid #ff6420;border-radius:4px;background:linear-gradient(145deg,#ff9a63 0 56%,#d94d18 56%);transform:rotate(-10deg) skewY(-3deg);box-shadow:6px 7px 0 rgba(0,0,0,.32)}
      .portfolio-icon-book::after{content:"TMI";position:absolute;left:16px;top:25px;color:#171513;font:700 9px "Space Grotesk";letter-spacing:-.08em}
      .portfolio-icon-camera::before{content:"";position:absolute;left:6px;top:20px;width:46px;height:29px;border:2px solid #171513;border-radius:7px;background:linear-gradient(145deg,#ff9a63,#ff6420 62%,#c84612);transform:rotate(-7deg) skewY(-2deg);box-shadow:7px 7px 0 rgba(0,0,0,.3)}
      .portfolio-icon-camera::after{content:"";position:absolute;left:20px;top:25px;width:20px;height:20px;border:3px solid #f5f1ea;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 10%,#7bb8ff 11% 38%,#26364a 40% 100%);transform:rotate(-7deg);box-shadow:3px 4px 0 rgba(0,0,0,.28)}
      .portfolio-icon-building::before{content:"";position:absolute;left:10px;bottom:7px;width:37px;height:43px;border:2px solid #171513;background:linear-gradient(90deg,#171513 0 72%,#4b281e 72%);transform:skewY(-5deg) rotate(2deg);box-shadow:8px 6px 0 rgba(23,21,19,.26)}
      .portfolio-icon-building::after{content:"";position:absolute;left:19px;top:18px;width:7px;height:8px;background:#c6f04b;box-shadow:13px 0 0 #7bb8ff,0 13px 0 #ff6420,13px 13px 0 #c6f04b}
     .portfolio-target .gallery-grid{grid-template-columns:1fr;gap:8px}
     .portfolio-target .gallery-item,.portfolio-target .gallery-item:nth-child(1),.portfolio-target .gallery-item:nth-child(8){grid-column:span 1;min-height:175px}
     .portfolio-targets-grid.single-target{grid-template-columns:1fr}
     .portfolio-targets-grid.single-target .portfolio-target .gallery-grid{grid-template-columns:repeat(3,1fr)}
     .portfolio-target.hidden{display:none}
    @media(max-width:800px){.gallery-item,.gallery-item:nth-child(1),.gallery-item:nth-child(8){grid-column:span 6;min-height:210px}}
     @media(max-width:900px){.portfolio-targets-grid{grid-template-columns:1fr 1fr}.portfolio-target:last-child{grid-column:span 2}}
     @media(max-width:700px){.portfolio-targets-grid{grid-template-columns:1fr}.portfolio-target:last-child{grid-column:auto}}
     @media(max-width:520px){.gallery-grid{grid-template-columns:1fr 1fr;gap:9px}.gallery-item,.gallery-item:nth-child(1),.gallery-item:nth-child(8){grid-column:span 1;min-height:185px;padding:11px}.gallery-item:nth-child(1){grid-column:span 2}.gallery-item:nth-child(1),.gallery-item:nth-child(8){min-height:230px}.gallery-label h3{font-size:17px}.gallery-head{display:block}.gallery-head p{margin-top:16px}.target-nav-item{font-size:13px;padding:13px 15px}.portfolio-targets-grid.single-target .portfolio-target .gallery-grid{grid-template-columns:1fr}}
      @media(max-width:700px){.portfolio-target{padding:14px;border-radius:14px}.portfolio-target .target-head{margin-bottom:13px;padding-right:62px}.portfolio-target .button{font-size:12px;padding:11px 15px;margin-bottom:16px!important}.portfolio-target .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.portfolio-target .gallery-item,.portfolio-target .gallery-item:nth-child(1),.portfolio-target .gallery-item:nth-child(8){grid-column:span 1;min-height:135px;padding:10px}.portfolio-target .gallery-label h3{font-size:15px}.portfolio-target .gallery-label small{font-size:8px}.portfolio-target .gallery-type{font-size:8px;padding:5px 7px}.portfolio-target-icon{right:13px;top:14px;width:50px;height:50px;transform:scale(.86)}}

      /* Selected output — thumbnail padat untuk banyak hasil karya */
      #karya .gallery-grid{grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:125px;gap:12px;align-items:stretch}
      #karya .gallery-item,#karya .gallery-item:nth-child(1),#karya .gallery-item:nth-child(8){grid-column:span 1;grid-row:span 1;min-height:0;height:100%;padding:12px}
      #karya .gallery-item:nth-child(5n+1),#karya .gallery-item:nth-child(5n+4){grid-column:span 2}
      @media(max-width:800px){#karya .gallery-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:115px}#karya .gallery-item:nth-child(5n+1),#karya .gallery-item:nth-child(5n+4){grid-column:span 1}#karya .gallery-item:nth-child(4n+1){grid-column:span 2}}
      @media(max-width:520px){#karya .gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:110px;gap:9px}#karya .gallery-item,#karya .gallery-item:nth-child(1),#karya .gallery-item:nth-child(8){grid-column:span 1;min-height:0;padding:11px}#karya .gallery-item:nth-child(1){grid-column:span 2}.gallery-label h3{font-size:17px}}

    /* Galeri Foto — gaya masonry ala Behance */
     .behance-grid{columns:4 260px;column-gap:14px;margin-top:24px;content-visibility:auto;contain-intrinsic-size:900px}
     .behance-tile{break-inside:avoid;margin:0 0 14px;border-radius:16px;overflow:hidden;position:relative;cursor:pointer;background:#211f1c;display:block;content-visibility:auto;contain-intrinsic-size:280px}
    .behance-tile img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1);backface-visibility:hidden}
    .behance-tile:hover img{transform:scale(1.06)}
    .behance-tile-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,21,19,0) 55%,rgba(23,21,19,.82) 100%);opacity:0;transition:opacity .3s ease;display:flex;align-items:flex-end;padding:14px}
    .behance-tile:hover .behance-tile-overlay{opacity:1}
    .behance-tile-cat{font:10px "DM Mono";text-transform:uppercase;letter-spacing:.08em;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:6px 10px;border-radius:99px}
    @media(max-width:800px){.behance-grid{columns:3 200px}}
    @media(max-width:520px){.behance-grid{columns:2 140px;column-gap:9px}.behance-tile{margin-bottom:9px;border-radius:11px}.behance-tile-cat{font-size:9px;padding:5px 8px}}

    /* Lightbox galeri foto */
     /* Scroll nav arrows (down + back-to-top) — transparent floating buttons, khusus PC & tablet */
    .scroll-nav-btn{
      position:fixed;right:22px;width:48px;height:48px;border-radius:50%;
      background:rgba(23,21,19,.16);backdrop-filter:blur(6px);
      border:1px solid rgba(255,255,255,.3);color:#fff;
      display:grid;place-items:center;cursor:pointer;z-index:340;
      opacity:0;visibility:hidden;
      transition:opacity .22s ease,background .18s ease,border-color .18s ease,visibility .22s;
    }
    .scroll-nav-btn svg{width:20px;height:20px;opacity:.85}
    .scroll-nav-btn:hover{background:rgba(255,100,32,.22);border-color:rgba(255,100,32,.6)}
    .scroll-nav-btn.is-visible{opacity:1;visibility:visible}
    #scrollDownBtn{bottom:28px}
    #scrollTopBtn{bottom:86px}
    body.admin-open .scroll-nav-btn{display:none}
    /* Mobile: sembunyikan sepenuhnya, hanya tampil di tablet & PC */
    @media (max-width:700px){
      .scroll-nav-btn{display:none!important}
    }

    .lightbox-backdrop{position:fixed;inset:0;background:rgba(10,9,8,.94);z-index:999;display:none;align-items:center;justify-content:center;padding:40px}
     .lightbox-backdrop.is-open{display:flex;animation:galleryLightboxIn .28s ease both}
     .lightbox-backdrop.is-closing{display:flex;animation:galleryLightboxOut .24s ease both}
     .lightbox-img-wrap{position:relative;max-width:min(1100px,92vw);max-height:88vh;transform-origin:center}
     .lightbox-img-wrap.is-opening{animation:galleryZoomIn .4s cubic-bezier(.2,.8,.2,1) both}
     .lightbox-img-wrap.is-slide-next{animation:gallerySlideNext .32s cubic-bezier(.2,.7,.2,1) both}
     .lightbox-img-wrap.is-slide-prev{animation:gallerySlidePrev .32s cubic-bezier(.2,.7,.2,1) both}
     .lightbox-img-wrap img{max-width:100%;max-height:88vh;display:block;border-radius:10px;margin:0 auto;box-shadow:0 22px 70px rgba(0,0,0,.34)}
    .lightbox-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center}
    .lightbox-close:hover{background:var(--orange);border-color:var(--orange)}
    .lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center}
    .lightbox-nav:hover{background:var(--orange);border-color:var(--orange)}
    .lightbox-prev{left:24px}.lightbox-next{right:24px}
     @keyframes galleryLightboxIn{from{opacity:0}to{opacity:1}}
     @keyframes galleryLightboxOut{from{opacity:1}to{opacity:0}}
     @keyframes galleryZoomIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
     @keyframes gallerySlideNext{from{opacity:.25;transform:translateX(45px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}
     @keyframes gallerySlidePrev{from{opacity:.25;transform:translateX(-45px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}
     @media(prefers-reduced-motion:reduce){.lightbox-backdrop,.lightbox-img-wrap,.gallery-behance-card,.gallery-behance-card>img{animation:none!important;transition:none!important}}
    @media(max-width:600px){.lightbox-nav{width:38px;height:38px;font-size:16px}.lightbox-prev{left:8px}.lightbox-next{right:8px}.lightbox-close{top:-42px}}
    .galeri-grup-grid-backdrop{position:fixed;inset:0;background:rgba(10,9,8,.94);z-index:998;display:none;align-items:flex-start;justify-content:center;gap:14px;padding:48px 20px 40px;overflow-y:auto}
    .galeri-grup-grid-backdrop.is-open{display:flex;animation:galleryLightboxIn .28s ease both}
    .galeri-grup-grid-panel{max-width:640px;width:100%;flex:0 1 640px;margin:0}
    .galeri-grup-grid-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;color:#fff}
    .galeri-grup-grid-head h3{font-size:19px;margin:0;letter-spacing:-.02em;font-weight:700;flex:1}
    .galeri-grup-grid-back{flex:none;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:12px;font-weight:700;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
    .galeri-grup-grid-back:hover{background:var(--orange);border-color:var(--orange)}
    .galeri-grup-grid-close{width:38px;height:38px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center}
    .galeri-grup-grid-close:hover{background:var(--orange);border-color:var(--orange)}
    .galeri-grup-category-grid{display:grid;grid-template-columns:repeat(var(--grup-cat-cols,3),1fr);gap:14px;margin-bottom:6px}
    .galeri-grup-category-card{overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:#211f1c;text-align:left;padding:0;cursor:pointer;display:block;width:100%;transition:border-color .15s ease,transform .15s ease}
    .galeri-grup-category-card:hover{border-color:var(--orange);transform:translateY(-2px)}
    .galeri-grup-category-card:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
    .galeri-grup-category-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:#171513;display:flex;align-items:center;justify-content:center}
    .galeri-grup-category-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .galeri-grup-category-placeholder{font-size:34px;opacity:.32}
    .galeri-grup-category-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 18px 18px}
    .galeri-grup-category-name{display:block;min-width:0;font-size:26px;font-weight:700;line-height:1.2;color:#fff}
    .galeri-grup-category-label{display:block;margin-bottom:8px;font:13px "DM Mono";text-transform:uppercase;letter-spacing:.08em;color:var(--orange)}
    .galeri-grup-category-preview{display:flex;flex:none;gap:8px}
    .galeri-grup-category-preview-item{display:block;width:64px;height:64px;padding:0;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.22);background:#171513;box-shadow:0 4px 10px rgba(0,0,0,.25);cursor:zoom-in;transition:transform .15s ease,border-color .15s ease}
    .galeri-grup-category-preview-item:hover,.galeri-grup-category-preview-item:focus-visible{border-color:var(--orange);transform:translateY(-2px);outline:none}
    .galeri-grup-category-preview-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
    .galeri-grup-grid-body{display:grid;grid-template-columns:repeat(auto-fill,130px);justify-content:start;gap:10px}
    .galeri-grup-grid-body img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;cursor:zoom-in;display:block;transition:transform .18s ease,opacity .18s ease}
    .galeri-grup-grid-body img:hover{transform:scale(1.03)}
    .galeri-grup-grid-meta{position:relative;isolation:isolate;overflow:hidden;margin-top:14px;padding:18px 22px;border:1px solid rgba(255,100,32,.4);border-radius:4px;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;text-align:left;background:radial-gradient(circle at 102% -25%,rgba(255,100,32,.5),transparent 46%),radial-gradient(circle at -4% 130%,rgba(198,240,75,.16),transparent 42%),linear-gradient(120deg,#130d09 0%,#1d1712 50%,#0b0c0a 100%)}
    .galeri-grup-grid-meta::before{content:"";position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;right:-95px;top:-105px;border:20px solid rgba(255,100,32,.12);box-shadow:0 0 0 14px rgba(198,240,75,.045),0 0 0 30px rgba(255,100,32,.04)}
    .galeri-grup-grid-meta::after{content:"";position:absolute;z-index:-1;width:220px;height:1px;left:0;bottom:12px;background:rgba(255,255,255,.08);transform:rotate(-4deg)}
    .galeri-grup-grid-meta.is-sekolah{border-color:rgba(255,100,32,.42)}
    .galeri-grup-grid-meta.is-brand{background:radial-gradient(circle at 102% -25%,rgba(255,100,32,.54),transparent 46%),radial-gradient(circle at -4% 130%,rgba(198,240,75,.14),transparent 42%),linear-gradient(120deg,#140d08,#1e1611 50%,#0b0c0a 100%);border-color:rgba(255,100,32,.44)}
    .galeri-grup-grid-meta.is-institusi{background:radial-gradient(circle at 102% -25%,rgba(255,100,32,.54),transparent 46%),radial-gradient(circle at -4% 130%,rgba(198,240,75,.14),transparent 42%),linear-gradient(120deg,#150f09,#201812 50%,#0b0c0a 100%);border-color:rgba(255,100,32,.44)}
    .galeri-grup-grid-meta.is-umum{border-color:rgba(255,100,32,.3)}
    .galeri-grup-meta-head{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex:none}
    .galeri-grup-meta-art{position:relative;width:42px;height:42px;border-radius:50%;background:var(--orange);box-shadow:0 8px 18px rgba(0,0,0,.28);flex:none}
    .is-sekolah .galeri-grup-meta-art,.is-brand .galeri-grup-meta-art,.is-institusi .galeri-grup-meta-art{background:var(--orange)}
    .galeri-grup-meta-art::before,.galeri-grup-meta-art::after{content:"";position:absolute}
    .meta-icon-book::before{left:12px;top:10px;width:15px;height:21px;border:2px solid #17232d;border-radius:2px;transform:rotate(-7deg);box-shadow:5px 3px 0 rgba(23,35,45,.25)}
    .meta-icon-book::after{left:16px;top:19px;width:9px;height:2px;background:#17232d;box-shadow:0 5px 0 #17232d}
    .meta-icon-camera::before{left:9px;top:14px;width:24px;height:15px;border:2px solid #1c2638;border-radius:4px}
    .meta-icon-camera::after{left:16px;top:17px;width:9px;height:9px;border:2px solid #1c2638;border-radius:50%;box-shadow:7px -5px 0 -3px #1c2638}
    .meta-icon-building::before{left:13px;top:8px;width:17px;height:25px;border:2px solid #30231d;background:linear-gradient(90deg,transparent 0 38%,#30231d 38% 48%,transparent 48% 70%,#30231d 70% 80%,transparent 80%)}
    .meta-icon-building::after{left:10px;top:6px;width:23px;height:6px;background:#30231d;transform:skewX(-25deg)}
    .meta-icon-frame::before{left:10px;top:9px;width:22px;height:22px;border:2px solid #171513;border-radius:3px}
    .meta-icon-frame::after{left:16px;top:22px;width:11px;height:2px;background:#171513;transform:rotate(-35deg)}
    .galeri-grup-meta-heading{display:flex;flex-direction:column;gap:3px}
    .galeri-grup-meta-copy{position:relative;z-index:1;flex:1 1 220px;min-width:200px}
    .galeri-grup-meta-eyebrow{display:block;font:9px "DM Mono";letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
    .galeri-grup-meta-heading h4{margin:0;font-size:clamp(16px,1.6vw,20px);line-height:1.05;letter-spacing:-.03em;color:#fff}
    .galeri-grup-meta-copy p{margin:0;color:rgba(255,255,255,.72);font-size:11px;max-width:460px}
    .galeri-grup-meta-count{display:block;margin-top:8px;font:9px "DM Mono";letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}
    .galeri-grup-meta-count b{color:var(--lime);font-weight:400;padding:0 5px}
    .galeri-grup-recommendations{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
    .galeri-grup-reco-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:12px;color:#fff}
    .galeri-grup-reco-kicker{display:block;margin-bottom:5px;font:9px "DM Mono";letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
    .is-brand .galeri-grup-reco-kicker,.is-institusi .galeri-grup-reco-kicker{color:var(--orange)}
    .galeri-grup-reco-head h4{font-size:19px;line-height:1;letter-spacing:-.045em}
    .galeri-grup-reco-label{flex:none;font:9px "DM Mono";letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.48);text-align:right}
    .galeri-grup-reco-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
    .galeri-grup-reco-card{position:relative;display:block;min-width:0;aspect-ratio:1.55/1;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:8px;overflow:hidden;background:#171513;color:#fff;text-align:left;cursor:pointer}
    .galeri-grup-reco-card img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease}
    .galeri-grup-reco-card:hover img{transform:scale(1.06)}
    .galeri-grup-reco-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,9,8,.86) 100%)}
    .galeri-grup-reco-card-label{position:absolute;left:10px;right:8px;bottom:9px;display:block;overflow:hidden;color:#fff;font-size:10px;font-weight:700;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
    .galeri-grup-reco-card-label b{float:right;color:var(--lime);font-size:13px}
    .is-brand .galeri-grup-reco-card-label b,.is-institusi .galeri-grup-reco-card-label b{color:var(--orange)}
    .galeri-grup-social{position:sticky;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;flex:0 0 auto;z-index:999}
    .galeri-grup-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;transition:background .15s,border-color .15s,opacity .15s}
    .galeri-grup-social a:hover{background:var(--orange);border-color:var(--orange)}
    .galeri-grup-social a.footer-social-empty{opacity:.35;cursor:default}
    .galeri-grup-social a.footer-social-empty:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
    @media(max-width:1120px){.galeri-grup-social{display:none}}
    @media(max-width:700px){.galeri-grup-reco-row{display:flex;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}.galeri-grup-reco-card{flex:0 0 min(230px,72vw);scroll-snap-align:start}}
    @media(max-width:560px){.galeri-grup-grid-body{gap:8px;grid-template-columns:repeat(auto-fill,100px)}.galeri-grup-category-grid{gap:8px;grid-template-columns:repeat(min(var(--grup-cat-cols,3),2),1fr)}.galeri-grup-grid-backdrop{padding:52px 12px 30px}.galeri-grup-category-foot{padding:12px 14px 14px;gap:8px}.galeri-grup-category-name{font-size:19px}.galeri-grup-category-preview-item{width:46px;height:46px;border-radius:8px}.galeri-grup-grid-meta{padding:16px 16px 18px;gap:10px 16px}.galeri-grup-meta-heading h4{font-size:17px}.galeri-grup-meta-copy p{font-size:10px}.galeri-grup-recommendations{margin-top:20px;padding-top:17px}.galeri-grup-reco-head{display:block}.galeri-grup-reco-label{display:block;margin-top:8px;text-align:left}.galeri-grup-reco-head h4{font-size:17px}}

     /* Dedicated gallery page — editorial portfolio layout inspired by Behance */
      body.gallery-page-open{background:var(--paper)}
     body.gallery-page-open main>section:not(#galleryPage){display:none}
      body.gallery-page-open header{border-bottom:1px solid var(--line)}
      body.gallery-page-open header::before{background:rgba(245,241,234,.94)}
      .gallery-page{display:none;position:relative;isolation:isolate;overflow:hidden;
        background:
          radial-gradient(circle at 94% 8%,rgba(198,240,75,.25) 0 9%,rgba(198,240,75,.1) 17%,transparent 31%),
          radial-gradient(circle at -6% 54%,rgba(255,100,32,.12) 0 7%,transparent 27%),
          linear-gradient(135deg,rgba(255,255,255,.28),transparent 42%),
          var(--paper);
        color:var(--ink);min-height:calc(100vh - 85px)}
     body.gallery-page-open .gallery-page{display:block}
      .gallery-page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.34;
        background:repeating-linear-gradient(115deg,transparent 0 52px,rgba(23,21,19,.045) 52px 53px,transparent 53px 104px)}
      .gallery-page .gallery-behance-cover,.gallery-page .gallery-behance-layout{position:relative;z-index:1}
      .gallery-page-theme-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
      .gallery-theme-orb{position:absolute;border-radius:50%;mix-blend-mode:multiply}
      .gallery-theme-orb-lime{width:510px;height:510px;right:-205px;top:235px;background:var(--lime);opacity:.48}
      .gallery-theme-orb-orange{width:300px;height:300px;left:-175px;top:610px;background:var(--orange);opacity:.2}
      .gallery-theme-ring{position:absolute;width:430px;height:430px;right:-155px;top:820px;border:38px solid rgba(255,100,32,.22);border-radius:50%;transform:rotate(-16deg)}
      .gallery-theme-grid{position:absolute;width:440px;height:260px;left:-90px;top:250px;opacity:.2;
        background:repeating-linear-gradient(90deg,rgba(23,21,19,.24) 0 1px,transparent 1px 28px),
        repeating-linear-gradient(0deg,rgba(23,21,19,.2) 0 1px,transparent 1px 28px);transform:skewY(-10deg)}
      .gallery-theme-chip{position:absolute;display:flex;flex-direction:column;gap:4px;padding:11px 14px;border:1px solid rgba(23,21,19,.14);
        border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 12px 25px rgba(23,21,19,.12);color:var(--ink);transform:rotate(5deg)}
      .gallery-theme-chip small{font:8px "DM Mono";text-transform:uppercase;letter-spacing:.08em;color:#8e877f}
      .gallery-theme-chip strong{font-size:15px;line-height:1;letter-spacing:-.04em}
      .gallery-theme-chip-reach{right:8%;top:520px}
      .gallery-theme-chip-output{right:13%;top:635px;background:var(--lime);transform:rotate(-4deg)}
      .gallery-theme-chip-output small{color:#53651f}
      .gallery-theme-chip-brand{left:7%;top:455px;background:var(--ink);color:#fff;transform:rotate(-7deg)}
      .gallery-theme-chip-brand small{color:#aaa49d}
      .gallery-theme-chip-brand strong{font-size:18px}
      .gallery-theme-stamp{position:absolute;right:27%;top:350px;width:76px;height:76px;border:2px solid rgba(255,100,32,.45);
        border-radius:50%;display:grid;place-items:center;color:var(--orange);font:9px "DM Mono";text-align:center;transform:rotate(13deg)}
      @media(max-width:800px){.gallery-theme-orb-lime{right:-280px}.gallery-theme-chip-reach{right:4%}.gallery-theme-chip-output{right:7%}.gallery-theme-chip-brand{left:3%}}
      @media(max-width:600px){.gallery-theme-orb-lime{width:340px;height:340px;right:-190px;top:205px}.gallery-theme-orb-orange{width:220px;height:220px;left:-145px;top:540px}.gallery-theme-ring{width:280px;height:280px;right:-150px;top:700px;border-width:24px}.gallery-theme-grid{left:-165px;top:245px}.gallery-theme-chip{transform:scale(.8)}.gallery-theme-chip-reach{right:-2%;top:475px}.gallery-theme-chip-output{right:4%;top:575px}.gallery-theme-chip-brand{left:-4%;top:430px}.gallery-theme-stamp{right:22%;top:315px;transform:scale(.75) rotate(13deg)}}
     .gallery-behance-cover{min-height:210px;background:
        linear-gradient(115deg,rgba(23,21,19,.9),rgba(23,21,19,.18) 48%,rgba(23,21,19,.82)),
        linear-gradient(145deg,var(--orange) 0 27%,#f1a24b 27% 43%,#25221f 43% 70%,var(--lime) 70%);
       color:#fff;position:relative;overflow:hidden}
     .gallery-behance-cover::before{content:"";position:absolute;width:720px;height:180px;left:-5%;top:18px;
       background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 3px,transparent 3px 31px);
       transform:skewY(-8deg);opacity:.7}
     .gallery-behance-cover::after{content:"TMI";position:absolute;right:-15px;bottom:-73px;
       color:rgba(255,255,255,.12);font-size:250px;font-weight:700;letter-spacing:-.16em;line-height:1}
     .gallery-cover-inner{max-width:1180px;margin:auto;padding:22px 28px 28px;position:relative;z-index:1;
       min-height:210px;display:flex;flex-direction:column;justify-content:space-between}
     .gallery-cover-top{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:11px;color:rgba(255,255,255,.8)}
     .gallery-cover-back{display:inline-flex;align-items:center;gap:7px;color:#fff;border:1px solid rgba(255,255,255,.3);
       border-radius:999px;padding:8px 12px;background:rgba(0,0,0,.18)}
     .gallery-cover-back:hover{background:var(--orange);border-color:var(--orange)}
     .gallery-cover-code{font:10px "DM Mono";letter-spacing:.1em;text-transform:uppercase}
     .gallery-cover-brand{align-self:flex-end;display:flex;align-items:center;gap:12px;margin-top:20px}
     .gallery-cover-brand b{font-size:34px;line-height:1;letter-spacing:-.13em;color:var(--orange)}
     .gallery-cover-brand span{font:10px "DM Mono";line-height:1.25;letter-spacing:.08em}
     .gallery-behance-layout{max-width:1180px;margin:auto;padding:30px 28px 90px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:42px}
      .gallery-profile{font-size:12px;color:#6d6862}
     .gallery-profile-avatar-wrap{position:relative;width:78px;height:78px;margin:0 auto 14px;transform:translateX(-8px)}
     .gallery-profile-avatar-wrap::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px dashed var(--ink);animation:tmiRingSpin 22s linear infinite}
     .gallery-profile-avatar-wrap::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px dashed var(--lime);animation:tmiRingSpinRev 30s linear infinite}
     .gallery-profile-avatar{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
        color:var(--ink);font-size:24px;font-weight:700;letter-spacing:-.12em;box-shadow:8px 8px 0 rgba(23,21,19,.12);animation:tmiAvatarColor 9s ease-in-out infinite}
     @keyframes tmiRingSpin{to{transform:rotate(360deg)}}
     @keyframes tmiRingSpinRev{to{transform:rotate(-360deg)}}
     @keyframes tmiAvatarColor{0%,100%{background:var(--orange)}33%{background:#ffb020}66%{background:#ff8659}}
     @keyframes tmiOrbPulse{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.14)}100%{transform:rotate(360deg) scale(1)}}
     @keyframes tmiOrbPulseRev{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(-180deg) scale(1.1)}100%{transform:rotate(-360deg) scale(1)}}
     @keyframes tmiOrbPulseCentered{0%{transform:translateY(-50%) rotate(0deg) scale(1)}50%{transform:translateY(-50%) rotate(-180deg) scale(1.1)}100%{transform:translateY(-50%) rotate(-360deg) scale(1)}}
     .hero::before,.target-gate::before,.cover-art::after,.gallery-theme-ring,.g-video .gallery-visual::before,.g-drone .gallery-visual::before,#digital::before,#klien::before,#tim::before{animation:tmiOrbPulse 3s ease-in-out infinite;transform-origin:center}
     .hero::after,#info::before,#karya::before,#karya::after,#portfolio::after,#paket::before{animation:tmiOrbPulseRev 3.3s ease-in-out infinite;transform-origin:center}
     .cta-visual-ring{animation:tmiOrbPulseCentered 3.2s ease-in-out infinite;transform-origin:center}
     @media(prefers-reduced-motion:reduce){.hero::before,.hero::after,.target-gate::before,.cover-art::after,.gallery-theme-ring,.g-video .gallery-visual::before,.g-drone .gallery-visual::before,#digital::before,#klien::before,#tim::before,.cta-visual-ring,#info::before,#karya::before,#karya::after,#portfolio::after,#paket::before{animation:none!important}}
     .gallery-profile h1{font-size:20px;line-height:1;letter-spacing:-.06em;margin:0 0 8px;max-width:none}
     .gallery-profile-location{font-size:11px;margin-bottom:18px;color:#89837b}
     .gallery-profile-actions{display:grid;gap:7px;margin-bottom:26px}
     .gallery-profile-actions button{width:100%;padding:9px;border-radius:5px;font-size:11px;font-weight:700}
     .gallery-follow{background:#1769ff;color:#fff}
     .gallery-message{background:#fff;border:1px solid #dedad4;color:#4d4944}
      .gallery-profile-meta{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:12px}
     .gallery-profile-meta div{display:flex;justify-content:space-between;gap:10px}
     .gallery-profile-meta span:first-child{font:9px "DM Mono";text-transform:uppercase;color:#aaa39a}
     .gallery-profile-meta strong{font-size:11px;color:#393531}
      .gallery-profile-about{border-top:1px solid var(--line);margin-top:19px;padding-top:16px;font-size:11px;line-height:1.5}
     .gallery-profile-about b{display:block;font:9px "DM Mono";text-transform:uppercase;color:#aaa39a;margin-bottom:7px}
     /* PC & Tablet: presisi center antara logo (avatar) dan nama, dengan jarak yang lebih lega */
     @media(min-width:701px){
       .gallery-profile-avatar-wrap{transform:none;margin:0 auto 24px}
       .gallery-profile h1{text-align:center}
       .gallery-profile-location{text-align:center}
     }
     .gallery-workspace{min-width:0}
      .gallery-workspace-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px}
     .gallery-workspace-heading h2{font-size:28px;line-height:1;letter-spacing:-.07em}
     .gallery-workspace-heading p{font-size:11px;color:#99928a;text-align:right}
     .gallery-title-fancy{font-family:"Poppins",sans-serif;font-weight:800;letter-spacing:-.03em;text-transform:none}
     .gallery-title-fancy .fancy-big{display:inline-block;font-size:1.22em;transform:rotate(-2deg);margin-right:.02em}
     .gallery-title-fancy .fancy-orange{color:var(--orange)}
     .gallery-title-fancy em{font-style:normal;position:relative;display:inline-block;padding:.06em .16em;color:var(--ink);font-size:1.28em;transform:rotate(-6deg);margin-left:.05em}
     .gallery-title-fancy em .fancy-word{display:inline-block}
     .gallery-title-fancy em .fancy-word:nth-child(2){transform:rotate(11deg) translateY(-.08em);margin-left:.1em}
     .gallery-title-fancy em::before{content:"";position:absolute;left:-4px;right:-4px;top:8%;bottom:8%;background:var(--lime);z-index:-1;transform:skew(-10deg,-2deg) rotate(-2deg);border-radius:2px}
     .gallery-title-fancy::after{content:"";display:block;width:38px;height:3px;background:var(--orange);margin-top:9px;border-radius:2px}
     @media(max-width:600px){.gallery-title-fancy em{font-size:1.15em}}
      .gallery-view-tabs{display:flex;gap:23px;border-bottom:1px solid var(--line);margin-bottom:17px}
     .gallery-view-tab{padding:14px 0 12px;background:none;color:#89827a;font-size:12px;position:relative}
     .gallery-view-tab.is-active{color:#191715;font-weight:700}
     .gallery-view-tab.is-active::after{content:"";height:2px;background:#191715;position:absolute;left:0;right:0;bottom:-1px}
     .gallery-page-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
      .gallery-page-filter{padding:7px 11px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.42);color:#777069;font-size:10px;transition:transform .2s,background .2s,border-color .2s,color .2s}
     .gallery-page-filter:hover,.gallery-page-filter.is-active{background:#191715;border-color:#191715;color:#fff}
      .gallery-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
     .gallery-behance-card{display:block;position:relative;overflow:hidden;border-radius:4px;
        background:rgba(255,255,255,.56);border:1px solid var(--line);box-shadow:0 10px 0 rgba(23,21,19,.06);cursor:pointer;
         transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .2s;
         content-visibility:auto;contain-intrinsic-size:330px}
      .gallery-behance-card::before{content:"";position:absolute;z-index:4;top:0;left:16px;width:38px;height:4px;background:var(--orange)}
      .gallery-behance-card:nth-child(3n+2)::before{background:var(--lime)}
      .gallery-behance-card:nth-child(3n)::before{background:#7bb8ff}
      .gallery-behance-card:nth-child(3n+1){border-radius:20px 7px 20px 7px;transform:rotate(-.65deg)}
      .gallery-behance-card:nth-child(3n+2){border-radius:7px 20px 7px 20px;transform:rotate(.55deg)}
      .gallery-behance-card:nth-child(3n){border-radius:12px 12px 24px 12px;transform:rotate(-.25deg)}
      .gallery-behance-card:hover{transform:translateY(-7px) rotate(0) scale(1.015);border-color:var(--orange);box-shadow:0 17px 0 rgba(23,21,19,.08),0 22px 34px rgba(23,21,19,.12);z-index:3}
       .gallery-behance-card>img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease}
      .gallery-behance-card:hover img{transform:scale(1.07);filter:saturate(1.08) contrast(1.02)}
      .gallery-behance-card-info{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 12px 12px;color:#fff;position:relative;overflow:hidden;
        background:linear-gradient(95deg,#211f1c 0%,#211f1c 18%,var(--orange) 58%,#5c7a2a 100%)}
     .gallery-behance-card-info strong{font-size:12px;line-height:1.2;letter-spacing:-.02em;color:inherit;position:relative;z-index:1}
     .gallery-behance-card-info span{font:9px "DM Mono";text-transform:uppercase;text-align:right;color:inherit;opacity:.85;position:relative;z-index:1}
       .gallery-video-art{aspect-ratio:1/1;position:relative;min-height:0;background:#211f1c;overflow:hidden}
      .gallery-video-art .gallery-visual{position:absolute;inset:0;transform:scale(1.18)}
      .gallery-video-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .35s ease}
      .gallery-video-card:hover .gallery-video-art img{transform:scale(1.045)}
      .gallery-video-art .gallery-overlay{z-index:2}
     .gallery-video-art .gallery-overlay{position:absolute;inset:0}
     .gallery-video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;
       border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font-size:17px;padding-left:3px;
       box-shadow:0 8px 24px rgba(0,0,0,.2)}
     .gallery-video-card:hover .gallery-video-play{background:var(--orange);color:#fff}
     .gallery-grup-placeholder{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:34px;opacity:.3;background:#f0ede8}
     .gallery-grup-card[aria-disabled="true"]{cursor:default}
     .gallery-page-empty{grid-column:1/-1;color:#9b948b;font-size:13px;padding:35px 0}
      .gallery-load-more-wrap{column-span:all;display:flex;justify-content:center;padding:10px 0 26px}
      .gallery-load-more{border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;padding:11px 18px;font:700 11px "Space Grotesk",sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
      .gallery-load-more:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)}
      .gallery-load-more:disabled{opacity:.55;cursor:wait;transform:none}
     @media(max-width:800px){.gallery-behance-layout{grid-template-columns:170px minmax(0,1fr);gap:25px}.gallery-page-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
        @media(max-width:700px){.gallery-cover-inner{padding:18px}.gallery-behance-cover,.gallery-cover-inner{min-height:175px}.gallery-behance-layout{display:block;padding:22px 18px 65px}.gallery-profile{display:grid;grid-template-columns:64px 1fr;column-gap:26px;align-items:center;margin-bottom:25px}.gallery-profile-avatar-wrap{width:64px;height:64px;grid-row:span 2;margin:0;transform:translateX(5px)}.gallery-profile-avatar-wrap::before{inset:-7px}.gallery-profile-avatar-wrap::after{inset:-13px}.gallery-profile h1{font-size:18px}.gallery-profile-location{margin:0}.gallery-profile-actions,.gallery-profile-meta,.gallery-profile-about{display:none}.gallery-workspace-heading{display:block}.gallery-workspace-heading h2{font-size:24px}.gallery-workspace-heading p{text-align:left;margin-top:8px}.gallery-page-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:9px}.gallery-video-play{width:38px;height:38px;font-size:14px}}

     /* Dark gallery override */
     body.gallery-page-open{background:var(--ink);color:#fff}
     body.gallery-page-open header{border-bottom-color:rgba(255,255,255,.14)}
     body.gallery-page-open header::before{background:rgba(23,21,19,.94)}
     body.gallery-page-open header .brand-lockup span{color:#fff}
     body.gallery-page-open .navlinks,body.gallery-page-open .nav-more-toggle{color:#aaa49d}
     body.gallery-page-open .navlinks a:hover,body.gallery-page-open .nav-more-toggle:hover{color:var(--orange)}
     body.gallery-page-open .nav-cta:not(.nav-chat){background:var(--orange)!important;color:var(--ink)}
     body.gallery-page-open .nav-cta.nav-chat{background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--ink)}
     body.gallery-page-open .nav-hamburger span{background:#fff}
     .gallery-page{background:
       radial-gradient(circle at 92% 8%,rgba(198,240,75,.22) 0 8%,transparent 28%),
       radial-gradient(circle at 4% 58%,rgba(255,100,32,.16) 0 7%,transparent 27%),
       radial-gradient(circle at 70% 72%,rgba(123,184,255,.08),transparent 28%),
       repeating-linear-gradient(115deg,transparent 0 52px,rgba(255,255,255,.04) 52px 53px,transparent 53px 104px),var(--ink);
       color:#fff}
     .gallery-page::before{opacity:.32;background:repeating-linear-gradient(115deg,transparent 0 52px,rgba(255,255,255,.05) 52px 53px,transparent 53px 104px)}
     .gallery-page .gallery-theme-orb{mix-blend-mode:screen}
     .gallery-page .gallery-theme-orb-lime{opacity:.28}
     .gallery-page .gallery-theme-orb-orange{opacity:.24}
     .gallery-page .gallery-theme-grid{opacity:.15;background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 1px,transparent 1px 28px),repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 1px,transparent 1px 28px)}
     .gallery-page .gallery-theme-chip-brand{background:var(--orange);color:var(--ink)}
     .gallery-page .gallery-theme-chip-brand small{color:rgba(23,21,19,.66)}
     .gallery-page .gallery-profile{color:#aaa49d}
     .gallery-page .gallery-profile-avatar-wrap::before{border-color:rgba(255,255,255,.65)}
     .gallery-page .gallery-profile h1{color:#fff}
     .gallery-page .gallery-profile-location{color:#8e8881}
     .gallery-page .gallery-message{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
     .gallery-page .gallery-profile-meta,.gallery-page .gallery-profile-about,.gallery-page .gallery-workspace-heading,.gallery-page .gallery-view-tabs{border-color:rgba(255,255,255,.15)}
     .gallery-page .gallery-profile-meta strong{color:#fff}
     .gallery-page .gallery-view-tab{color:#8e8881}
     .gallery-page .gallery-view-tab.is-active{color:#fff}
     .gallery-page .gallery-view-tab.is-active::after{background:var(--orange)}
     .gallery-page .gallery-page-filter{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#aaa49d}
     .gallery-page .gallery-page-filter:hover,.gallery-page .gallery-page-filter.is-active{background:var(--orange);border-color:var(--orange);color:var(--ink)}
     .gallery-page .gallery-page-filter[data-gallery-filter="sekolah"]{border-color:rgba(198,240,75,.4)}
     .gallery-page .gallery-page-filter[data-gallery-filter="sekolah"]:hover,.gallery-page .gallery-page-filter[data-gallery-filter="sekolah"].is-active{background:var(--lime);border-color:var(--lime);color:var(--ink)}
     .gallery-page .gallery-page-filter[data-gallery-filter="brand"]{border-color:rgba(123,184,255,.4)}
     .gallery-page .gallery-page-filter[data-gallery-filter="brand"]:hover,.gallery-page .gallery-page-filter[data-gallery-filter="brand"].is-active{background:var(--blue);border-color:var(--blue);color:var(--ink)}
     .gallery-page .gallery-page-filter[data-gallery-filter="institusi"]{border-color:rgba(255,100,32,.4)}
     .gallery-page .gallery-page-filter[data-gallery-filter="institusi"]:hover,.gallery-page .gallery-page-filter[data-gallery-filter="institusi"].is-active{background:var(--orange);border-color:var(--orange);color:var(--ink)}
     /* PC & Tablet: perbesar tab Work/Photos/Videos dan pill filter kategori */
     @media(min-width:701px){
       .gallery-view-tabs{gap:32px}
       .gallery-view-tab{padding:17px 0 15px;font-size:16px}
       .gallery-page-filters{gap:12px;margin-bottom:26px}
       .gallery-page-filter{padding:12px 20px;font-size:14px;font-weight:600}
     }
      body.gallery-page-open .brand-lockup{mix-blend-mode:normal}
      body.gallery-page-open header .brand-lockup b,body.gallery-page-open footer .brand-lockup b{color:var(--orange)}
      body.gallery-page-open header .brand-lockup span,body.gallery-page-open footer .brand-lockup span{color:#fff}
     .gallery-page .gallery-behance-card{background:#211f1c;border-color:rgba(255,255,255,.16);box-shadow:0 10px 0 rgba(0,0,0,.22)}
     .gallery-page .gallery-page-empty{color:#aaa49d}
      @media(max-width:700px){.gallery-page .gallery-page-filters{margin-left:26px;margin-right:8px;padding:0;gap:8px;border:0;border-radius:0;background:transparent}.gallery-page .gallery-page-filter{min-height:34px;padding:9px 13px;border-color:rgba(255,255,255,.28);background:rgba(23,21,19,.9);color:#f0ece5}.gallery-page .gallery-page-filter.is-active{background:var(--orange);border-color:var(--orange);color:var(--ink)}.gallery-page .gallery-theme-chip-brand{left:-18%;top:540px;opacity:.4}}

    /* Digital product preview */
    .product-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:58px;align-items:center}
    .product-preview{background:#1e1c1a;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transform:rotate(1.5deg)}
    .browser-bar{height:28px;display:flex;align-items:center;gap:5px;color:#928b84;font-size:10px}.dot{width:7px;height:7px;border-radius:50%;background:#e96635}.dot:nth-child(2){background:#c6f04b}.dot:nth-child(3){background:#7bb8ff}
    .browser-url{margin-left:auto;border:1px solid #3a3632;padding:4px 12px;border-radius:5px}
    .digital-page{background:#f8f5ee;min-height:280px;border-radius:9px;padding:22px;color:var(--ink);position:relative;overflow:hidden}
    /* Background foto (opsional): diisi otomatis oleh JS kalau ada foto landscape
       di galeri (foto potret dilewati). Selama belum ada foto landscape yang
       lolos, tampilan tetap krem polos seperti semula. */
    .digital-page-photo{position:absolute;inset:0;overflow:hidden;z-index:0}
    .digital-page-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
    .digital-page-photo-img.is-active{opacity:1}
    .digital-page-photo-overlay{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease;background:linear-gradient(100deg,rgba(248,245,238,.55) 0%,rgba(248,245,238,.42) 42%,rgba(248,245,238,.18) 72%,rgba(248,245,238,.04) 100%)}
    .digital-page.has-photo .digital-page-photo-overlay{opacity:1}
    .page-copy{position:relative;z-index:1}.page-copy small{font-size:9px;color:#b8430f;font-weight:700}.page-copy h3{font-size:31px;line-height:.9;letter-spacing:-.08em;margin:12px 0 15px}.page-copy p{font-size:10px;color:var(--muted);max-width:280px}
    .page-footer{position:absolute;bottom:15px;left:22px;font:9px "DM Mono";color:var(--muted);z-index:2}
    .product-copy h2{font-size:clamp(34px,4.4vw,57px);line-height:.92;letter-spacing:-.08em;margin:11px 0 20px}.product-copy>p{color:#605950;font-size:15px;max-width:400px}
    .feature-list{list-style:none;margin-top:25px;border-top:1px solid var(--line)}.feature-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between}.feature-list span{color:var(--orange);font-family:"DM Mono"}
    @media(max-width:800px){.product-grid{grid-template-columns:1fr;gap:45px}.product-preview{transform:none}.digital-page{min-height:300px}}
    @media(max-width:470px){.digital-page{min-height:260px}}

    /* Package pricing */
    .package-section{background:var(--ink);color:#fff}
    .package-section .section-head p{color:#aaa49d}
    .package-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    .package-card{min-height:278px;border:1px solid #413c37;border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:#211f1c;position:relative;overflow:hidden}
    .package-card::after{content:"";position:absolute;width:120px;height:120px;border:18px solid rgba(255,255,255,.06);border-radius:50%;right:-55px;top:62px}
    .package-card:nth-child(2){background:#293039}.package-card:nth-child(3){background:#3c352d;border-color:#ff6420}.package-card:nth-child(4){background:var(--orange);color:var(--ink);border-color:var(--orange)}
    .package-icon{position:absolute;right:22px;top:76px;width:52px;height:52px;z-index:1;transform:rotate(-7deg);filter:drop-shadow(6px 7px 0 rgba(0,0,0,.22))}
    .package-icon::before,.package-icon::after{content:"";position:absolute}
    .package-icon-basic::before{left:9px;top:8px;width:31px;height:31px;background:linear-gradient(145deg,#ff9a63 0 52%,#d64c18 52%);border:2px solid #171513;transform:skewY(-8deg) rotate(45deg);border-radius:4px}
    .package-icon-basic::after{left:23px;top:3px;width:17px;height:17px;border-top:2px solid #f7f2e8;border-right:2px solid #f7f2e8;transform:skewY(-8deg) rotate(45deg)}
    .package-icon-standard::before{left:7px;top:13px;width:37px;height:28px;border:2px solid #171513;border-radius:5px;background:linear-gradient(145deg,#7bb8ff,#35516f 64%,#253344 64%);transform:skewY(-8deg);box-shadow:0 -9px 0 -2px #9ed0ff,0 -9px 0 0 #171513}
    .package-icon-standard::after{left:17px;top:20px;width:16px;height:12px;border:2px solid rgba(255,255,255,.7);transform:skewY(-8deg)}
    .package-icon-creative::before{left:9px;top:7px;width:36px;height:36px;background:linear-gradient(135deg,#c6f04b 0 44%,#ff6420 44% 70%,#7bb8ff 70%);border:2px solid #171513;clip-path:polygon(50% 0,100% 23%,82% 100%,18% 100%,0 23%);transform:rotate(12deg);box-shadow:6px 7px 0 rgba(0,0,0,.2)}
    .package-icon-creative::after{left:22px;top:18px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;opacity:.8}
    .package-icon-premium::before{left:6px;top:16px;width:40px;height:27px;background:linear-gradient(145deg,#ffe8b8,#f08a31 58%,#c44a16 58%);border:2px solid #171513;border-radius:4px;transform:skewY(-7deg);box-shadow:6px 7px 0 rgba(0,0,0,.22)}
    .package-icon-premium::after{content:"✦";left:18px;top:2px;color:#171513;font-size:28px;line-height:1;transform:rotate(8deg)}
    .package-card:nth-child(4) .package-icon{filter:drop-shadow(5px 6px 0 rgba(23,21,19,.18))}
    .package-top{display:flex;justify-content:space-between;gap:8px;position:relative;z-index:1}.package-number{font:10px "DM Mono";color:var(--orange)}.package-card:nth-child(3) .package-number{color:#ffb088}.package-card:nth-child(4) .package-number{color:var(--ink)}
    .package-badge{font:9px "DM Mono";border:1px solid #514b45;border-radius:99px;padding:5px 7px;color:#bcb5ae}.package-card:nth-child(4) .package-badge{border-color:rgba(23,21,19,.3);color:var(--ink)}
    .package-card h3{font-size:21px;letter-spacing:-.06em;margin-top:32px;position:relative;z-index:1}.package-desc{font-size:12px;color:#aaa49d;margin-top:8px;max-width:180px;position:relative;z-index:1}.package-card:nth-child(4) .package-desc{color:#3a2015}
    .package-price{font-size:clamp(29px,3vw,42px);font-weight:700;letter-spacing:-.08em;margin-top:24px;position:relative;z-index:1}.package-price span{font-size:11px;letter-spacing:0;color:#aaa49d;font-weight:400}.package-card:nth-child(4) .package-price span{color:#3a2015}
     .package-category-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 22px}
     .package-category-tabs button{font-family:inherit;padding:10px 14px;border-radius:999px;border:1px solid #514b45;background:transparent;color:#bcb5ae;font-size:12px;font-weight:700;cursor:pointer}
     .package-category-tabs button:hover{border-color:var(--orange);color:#fff}
     .package-category-tabs button.is-active{background:var(--orange);border-color:var(--orange);color:var(--ink)}
     .package-empty{grid-column:1/-1;border:1px dashed #514b45;border-radius:18px;padding:38px 20px;color:#aaa49d;text-align:center;font-size:13px}
    .package-note{margin-top:18px;font:10px "DM Mono";color:#8f8982}
    @media(max-width:850px){.package-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:480px){.package-card{min-height:235px;padding:16px}.package-card h3{font-size:18px;margin-top:23px}.package-desc{font-size:11px}.package-price{font-size:31px}}

    /* Proposal content — visual language buku tahunan / digital book */
    .proposal-section{position:relative;isolation:isolate;overflow:hidden;background:
      radial-gradient(circle at 5% 27%,rgba(255,100,32,.34) 0 118px,transparent 119px),
      radial-gradient(circle at 94% 70%,rgba(198,240,75,.7) 0 185px,transparent 186px),
      repeating-linear-gradient(124deg,transparent 0 38px,rgba(23,21,19,.105) 38px 40px,transparent 40px 78px),
      linear-gradient(135deg,#e8e2d6 0%,#f5f1ea 43%,#dfe9b8 100%)}
    .proposal-section::before{content:"";position:absolute;z-index:-1;width:650px;height:465px;right:-235px;top:255px;border:3px solid rgba(255,100,32,.32);border-radius:48% 52% 44% 56%;background:
      linear-gradient(90deg,transparent 48.8%,rgba(255,100,32,.42) 48.8% 51.2%,transparent 51.2%),
      repeating-linear-gradient(0deg,transparent 0 17px,rgba(23,21,19,.13) 17px 19px,transparent 19px 34px),
      repeating-linear-gradient(90deg,transparent 0 30px,rgba(23,21,19,.08) 30px 32px,transparent 32px 60px),
      linear-gradient(135deg,rgba(198,240,75,.74),rgba(255,255,255,.24));
      box-shadow:0 0 0 18px rgba(198,240,75,.16),0 28px 70px rgba(23,21,19,.12);transform:rotate(-15deg);opacity:.94;pointer-events:none}
    .proposal-section::after{content:"BTS  /  VISUAL STORY";position:absolute;z-index:-1;left:-78px;bottom:180px;color:rgba(23,21,19,.18);font:700 clamp(45px,6vw,82px)/1 "Space Grotesk",Arial,sans-serif;letter-spacing:-.09em;transform:rotate(-90deg);pointer-events:none}
    .proposal-section>.wrap{position:relative;z-index:1}
    .proposal-top{display:grid;grid-template-columns:1.05fr .95fr;gap:35px;align-items:stretch;margin-bottom:28px}
    .proposal-top h2{font-size:clamp(34px,4.5vw,58px);line-height:.92;letter-spacing:-.08em;margin:10px 0 18px}
    .proposal-top p{max-width:480px;color:#625c54;font-size:14px}
    .proposal-link{display:inline-flex;margin-top:21px;padding:11px 15px;border-radius:99px;background:var(--ink);color:#fff;font-size:12px;font-weight:700}
     .proposal-quote{background-color:var(--orange);background-image:linear-gradient(165deg,#ff7a3d 0%,var(--orange) 100%);border-radius:20px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:230px;position:relative;overflow:hidden;box-shadow:0 12px 0 rgba(23,21,19,.1)}
     .proposal-quote::after{content:"“";position:absolute;right:5px;bottom:-54px;color:rgba(255,255,255,.24);font-size:210px;line-height:1}
     .proposal-quote::before{content:"";position:absolute;left:28px;top:62px;width:46px;height:4px;background:rgba(23,21,19,.3);transform:skewX(-20deg)}
    .proposal-quote b{font:11px "DM Mono";position:relative;z-index:1}.proposal-quote strong{font-size:clamp(24px,3vw,38px);line-height:.98;letter-spacing:-.07em;max-width:340px;position:relative;z-index:1}

    .proposal-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:25px}
     .proposal-fact{background:rgba(245,241,234,.86);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 10px 24px rgba(23,21,19,.05);position:relative;overflow:hidden}.proposal-fact b{display:block;color:var(--orange);font-size:29px;letter-spacing:-.08em;padding-right:38px}.proposal-fact span{display:block;color:var(--muted);font-size:11px;margin-top:4px}
     .proposal-fact-icon{position:absolute;right:15px;top:15px;width:30px;height:30px;color:var(--orange);opacity:.9}
     .proposal-fact .proposal-fact-icon{display:block;margin-top:0;color:var(--orange)}
     .proposal-icon-clock{border:2px solid currentColor;border-radius:50%;box-shadow:4px 4px 0 rgba(255,100,32,.15)}
     .proposal-icon-clock::before{content:"";position:absolute;left:13px;top:5px;width:2px;height:10px;background:currentColor;transform-origin:bottom;transform:rotate(12deg)}
     .proposal-icon-clock::after{content:"";position:absolute;left:13px;top:13px;width:8px;height:2px;background:currentColor;transform-origin:left;transform:rotate(25deg)}
     .proposal-icon-stages::before{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;background:#ff6420;box-shadow:15px 0 0 #c6f04b,0 15px 0 #7bb8ff,15px 15px 0 #171513;transform:rotate(-7deg);border:1px solid #171513}
     .proposal-icon-stages::after{content:"";position:absolute;inset:0;border:1px dashed rgba(23,21,19,.4);transform:rotate(7deg)}
     .proposal-icon-reach::before{content:"";position:absolute;left:5px;bottom:3px;width:5px;height:10px;background:#7bb8ff;box-shadow:8px -6px 0 #ff6420,16px -13px 0 #c6f04b;transform:skewY(-8deg)}
     .proposal-icon-reach::after{content:"";position:absolute;right:1px;top:2px;width:14px;height:14px;border:2px solid currentColor;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(8deg)}
     .proposal-icon-guarantee{background:linear-gradient(145deg,#ff9a63,#ff6420);clip-path:polygon(50% 0,92% 15%,84% 67%,50% 100%,16% 67%,8% 15%);filter:drop-shadow(4px 5px 0 rgba(255,100,32,.2))}
     .proposal-icon-guarantee::after{content:"✓";position:absolute;left:7px;top:4px;color:#171513;font:700 16px "Space Grotesk"}
    .proposal-details{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
    .proposal-panel{position:relative;overflow:hidden;background:rgba(245,241,234,.86);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 16px 35px rgba(23,21,19,.07)}.proposal-panel::before{content:"";position:absolute;inset:0;opacity:.48;pointer-events:none;background:linear-gradient(90deg,transparent 0 28px,rgba(255,100,32,.1) 28px 30px,transparent 30px),repeating-linear-gradient(0deg,transparent 0 31px,rgba(23,21,19,.07) 31px 33px)}.proposal-panel:first-child{background:radial-gradient(circle at 92% 13%,rgba(255,100,32,.3) 0 62px,transparent 64px),linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,100,32,.08) 58%,rgba(245,241,234,.9))}.proposal-panel:last-child{background:radial-gradient(circle at 91% 13%,rgba(198,240,75,.7) 0 64px,transparent 66px),conic-gradient(from 220deg at 91% 13%,rgba(255,100,32,.36) 0 18%,transparent 18% 100%),linear-gradient(135deg,rgba(255,255,255,.7),rgba(198,240,75,.12) 58%,rgba(245,241,234,.9))}.proposal-panel:first-child::after,.proposal-panel:last-child::after{position:absolute;right:20px;top:20px;font:9px "DM Mono";letter-spacing:.1em;color:rgba(23,21,19,.5);pointer-events:none}.proposal-panel:first-child::after{content:"PROCESS / 01—06"}.proposal-panel:last-child::after{content:"PAYMENT / BTS";color:rgba(255,100,32,.9)}.proposal-panel> *{position:relative;z-index:1}.proposal-panel h3{font-size:21px;letter-spacing:-.06em;margin:8px 0 17px}.proposal-list{list-style:none}.proposal-list li{display:grid;grid-template-columns:25px 1fr;gap:10px;border-top:1px solid var(--line);padding:12px 0;font-size:12px;color:#5d574f}.proposal-list li b{font:11px "DM Mono";color:var(--orange)}.proposal-panel:first-child .proposal-list{position:relative}.proposal-panel:first-child .proposal-list::before{content:"";position:absolute;z-index:-1;left:10px;top:20px;bottom:18px;width:2px;background:linear-gradient(var(--orange),rgba(255,100,32,.12))}.proposal-panel:first-child .proposal-list li b{padding:0 2px;background:rgba(245,241,234,.98)}.payment-list li{grid-template-columns:60px 1fr}.payment-list li b{font-size:12px}
    .faq-list{margin-top:12px;border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:13px 0}.faq-list summary{cursor:pointer;font-weight:700;font-size:13px;list-style:none;display:flex;justify-content:space-between;gap:15px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";font:16px "DM Mono";color:var(--orange)}.faq-list details[open] summary::after{content:"−"}.faq-list p{font-size:12px;color:var(--muted);padding:9px 22px 0 0;max-width:720px}
    @media(max-width:800px){.proposal-top,.proposal-details{grid-template-columns:1fr}.proposal-facts{grid-template-columns:repeat(2,1fr)}}
     @media(max-width:480px){.proposal-fact{padding:14px}.proposal-fact b{font-size:25px}.proposal-top h2{font-size:39px}}
     @media(max-width:700px){.proposal-quote{min-height:170px;padding:20px 22px;justify-content:flex-start;gap:24px;border-radius:17px;box-shadow:0 8px 0 rgba(23,21,19,.1)}.proposal-quote::before{left:22px;top:56px;width:38px;height:3px}.proposal-quote::after{right:2px;bottom:-48px;font-size:170px}.proposal-quote b{font-size:10px}.proposal-quote strong{font-size:28px;line-height:.94;max-width:340px}}

    /* Compact information */
    .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .info-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
    .info-card h3{font-size:20px;letter-spacing:-.05em;margin:12px 0 8px;padding-right:54px}.info-card p{font-size:13px;color:var(--muted)}.info-number{font:12px "DM Mono";color:var(--orange)}
    .info-card-icon{position:absolute;right:21px;top:21px;width:42px;height:42px;color:var(--orange);opacity:.9}
    .info-icon-book::before{content:"";position:absolute;left:8px;top:7px;width:25px;height:31px;border:2px solid currentColor;border-radius:3px;background:linear-gradient(145deg,rgba(255,154,99,.85),rgba(255,100,32,.28));transform:rotate(-8deg);box-shadow:5px 5px 0 rgba(255,100,32,.22)}
    .info-icon-book::after{content:"TMI";position:absolute;left:14px;top:18px;color:#171513;font:700 7px "Space Grotesk";letter-spacing:-.08em}
    .info-icon-video::before{content:"";position:absolute;left:3px;top:6px;width:35px;height:29px;border:2px solid currentColor;border-radius:7px;background:linear-gradient(145deg,#7bb8ff,rgba(123,184,255,.18));transform:skewY(-5deg);box-shadow:5px 5px 0 rgba(123,184,255,.18)}
    .info-icon-video::after{content:"";position:absolute;left:18px;top:15px;border-left:10px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
    .info-icon-crew::before{content:"";position:absolute;left:14px;top:3px;width:14px;height:14px;border-radius:50%;background:#ff6420;box-shadow:0 19px 0 5px #ff6420}
    .info-icon-crew::after{content:"";position:absolute;left:2px;top:14px;width:12px;height:12px;border-radius:50%;background:#7bb8ff;box-shadow:26px 0 0 #c6f04b}
    .info-icon-process{border:2px solid currentColor;border-radius:50%;transform:rotate(-18deg);box-shadow:5px 5px 0 rgba(255,100,32,.2)}
    .info-icon-process::before{content:"↻";position:absolute;left:6px;top:3px;font:700 27px/1 "Space Grotesk"}
    .info-icon-process::after{content:"";position:absolute;right:-3px;top:3px;width:8px;height:8px;background:#c6f04b;transform:rotate(45deg)}
    .clients-section{background:var(--paper-2)}
    .client-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:end;margin-bottom:30px}
    .client-intro h2{font-size:clamp(34px,4.5vw,58px);line-height:.92;letter-spacing:-.08em;margin-top:10px}
     .client-intro p{max-width:390px;color:#625c54;font-size:14px}
     .client-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
     .client-group{position:relative;background:rgba(255,255,255,.3);border:1px solid rgba(23,21,19,.13);border-radius:25px 10px 25px 10px;padding:22px;min-height:215px;box-shadow:0 14px 30px rgba(23,21,19,.05)}
     .client-group::before{content:"";position:absolute;top:-2px;left:23px;width:58px;height:4px;background:var(--orange);transform:skewX(-24deg)}
     .client-group:nth-child(2){transform:translateY(16px);border-radius:10px 25px 10px 25px}
     .client-group:nth-child(2)::before{background:var(--blue);left:auto;right:23px}
     .client-group:nth-child(3){transform:translateY(-7px)}
     .client-group:nth-child(3)::before{background:var(--lime)}
    .client-group h3{font-size:17px;letter-spacing:-.05em;margin:10px 0 17px}
    .client-group p{font-size:12px;color:var(--muted);margin-bottom:14px}
     .client-tags{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
     .client-tag{min-height:0;flex:0 1 auto;border:1px solid rgba(23,21,19,.13);border-radius:999px;padding:7px 11px 7px 7px;display:inline-flex;align-items:center;gap:7px;color:#5b554e;font-size:10px;line-height:1.15;background:rgba(255,255,255,.62);box-shadow:0 4px 10px rgba(23,21,19,.04)}
     .client-tag::before{content:attr(data-initials);width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font:8px "DM Mono";letter-spacing:-.04em}
     .client-tag:nth-child(3n+2)::before{background:var(--blue);color:var(--ink)}
     .client-tag:nth-child(3n)::before{background:var(--orange);color:var(--ink)}
     .client-tag:nth-child(4n+1){transform:rotate(-1.4deg)}
     .client-tag:nth-child(4n+2){transform:rotate(.9deg)}
     .client-tag:nth-child(5n){background:rgba(198,240,75,.22)}
     .client-tag:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
     .client-tag:first-child::before{background:var(--orange);color:var(--ink)}
     .client-tag.has-icon::before{content:none}
     .client-tag-icon{width:27px;height:27px;flex:0 0 27px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:#fff;box-shadow:inset 0 0 0 1px rgba(23,21,19,.08)}
     .client-tag-icon img{width:100%;height:100%;object-fit:cover;display:block}
    .client-proof{margin-top:14px;background:var(--ink);color:#fff;border-radius:18px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
    .client-proof strong{font-size:14px}.client-proof span{font:11px "DM Mono";color:#b8b1aa}
     @media(max-width:800px){.client-intro{grid-template-columns:1fr;gap:15px}.client-groups{grid-template-columns:1fr 1fr}.client-group:nth-child(2),.client-group:nth-child(3){transform:none}}
     @media(max-width:520px){.client-groups{grid-template-columns:1fr}.client-group{min-height:0}.client-tags{grid-template-columns:repeat(2,minmax(0,1fr))}}
      @media(max-width:700px){.client-intro{gap:12px;margin-bottom:20px}.client-intro h2{font-size:39px}.client-intro p{max-width:100%;font-size:13px;line-height:1.5}.client-groups{grid-template-columns:1fr;gap:10px}.client-group{padding:18px;min-height:0}.client-group h3{font-size:20px;margin:10px 0 14px}.client-group p{font-size:12px;margin-bottom:13px}.client-tags{gap:6px}}

    /* Team / crew */
    .team-section{background:#fff}
    .team-intro{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:29px}
    .team-intro h2{font-size:clamp(34px,4.5vw,58px);line-height:.92;letter-spacing:-.08em;margin-top:10px}
    .team-intro p{max-width:340px;color:var(--muted);font-size:13px}
    .team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
    .crew-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);min-width:0}
    .crew-photo{aspect-ratio:1/1.08;position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#c6f04b,#ff6420 56%,#292622 56%)}
    .crew-card:nth-child(2) .crew-photo{background:linear-gradient(145deg,#7bb8ff,#25394d 56%,#ff9c63 56%)}
    .crew-card:nth-child(3) .crew-photo{background:linear-gradient(145deg,#ff9a63,#e75c26 56%,#c6f04b 56%)}
    .crew-card:nth-child(4) .crew-photo{background:linear-gradient(145deg,#202a35,#7bb8ff 56%,#f1b88f 56%)}
    .crew-card:nth-child(5) .crew-photo{background:linear-gradient(145deg,#c6f04b,#f1d36b 56%,#2b2724 56%)}
    .crew-photo::after{content:"";position:absolute;width:72%;height:72%;border:1px solid rgba(255,255,255,.58);border-radius:50%;transform:rotate(-18deg)}
    .crew-initial{position:relative;z-index:1;width:102px;height:102px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.72);color:var(--ink);font-size:30px;font-weight:700;letter-spacing:-.08em;box-shadow:9px 11px 0 rgba(23,21,19,.16)}
    .crew-photo-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
    .crew-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
    .crew-body{padding:17px 16px 18px}
    .crew-role{font:10px "DM Mono";color:var(--orange);text-transform:uppercase;line-height:1.3}
    .crew-body h3{font-size:19px;letter-spacing:-.06em;margin:6px 0 10px}
    .crew-jobdesk{font-size:12px;color:#625c54;min-height:51px}
    .special-label{display:block;margin-top:15px;margin-bottom:7px;font:9px "DM Mono";color:var(--muted);text-transform:uppercase}
    .special-tags{display:flex;flex-wrap:wrap;gap:5px}.special-tag{font-size:10px;padding:5px 7px;border-radius:99px;background:var(--paper-2);color:#5a544d}
    .team-note{margin-top:15px;font:10px "DM Mono";color:var(--muted)}
    @media(max-width:1050px){.team-grid{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:650px){.team-intro{display:block}.team-intro p{margin-top:16px}.team-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:420px){.team-grid{grid-template-columns:1fr 1fr;gap:8px}.crew-body{padding:14px 12px}.crew-body h3{font-size:16px}.crew-jobdesk{font-size:11px}.crew-initial{width:78px;height:78px;font-size:23px}}
    .process{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
     .step{padding:20px 12px 22px;border-right:1px solid var(--line);min-height:176px}.step:last-child{border-right:0}.step b{font:12px "DM Mono";color:var(--orange)}.step h3{font-size:16px;letter-spacing:-.04em;margin:0 0 7px}.step p{font-size:11px;color:var(--muted)}
     .step-icon{width:52px;height:52px;margin:14px auto 12px;color:var(--orange);display:flex;align-items:center;justify-content:center}.step:nth-child(even) .step-icon{color:#6e9d27}.step-icon svg{width:100%;height:100%;display:block;overflow:visible}.step-icon svg *{vector-effect:non-scaling-stroke}
    @media(max-width:850px){.process{grid-template-columns:repeat(3,1fr)}.step:nth-child(3){border-right:0}.step:nth-child(-n+3){border-bottom:1px solid var(--line)}}
    @media(max-width:500px){.info-grid{grid-template-columns:1fr}.process{grid-template-columns:1fr 1fr}.step:nth-child(3){border-right:1px solid var(--line)}.step:nth-child(4){border-right:0}.step:nth-child(-n+4){border-bottom:1px solid var(--line)}}

     /* Latar per menu — satu bahasa visual, aksen menyesuaikan fungsi section */
     .hero,#digital,#proposal,#info,#klien,#tim,#proses{position:relative;overflow:hidden;isolation:isolate}
     .hero > .wrap,#digital > .wrap,#proposal > .wrap,#info > .wrap,#klien > .wrap,#tim > .wrap,#proses > .wrap{position:relative;z-index:1}
     .hero{background:
       radial-gradient(circle at 96% 10%,rgba(198,240,75,.34) 0 12%,transparent 31%),
       radial-gradient(circle at 4% 85%,rgba(255,100,32,.1),transparent 25%),var(--paper)}
     .hero::after{content:"";position:absolute;width:400px;height:400px;right:-205px;bottom:-230px;border:34px solid rgba(255,100,32,.22);border-radius:50%;transform:rotate(14deg);z-index:0}
     #digital{background:
       radial-gradient(circle at 91% 18%,rgba(198,240,75,.52) 0 13%,transparent 35%),
       radial-gradient(circle at 5% 88%,rgba(123,184,255,.22),transparent 30%),
       repeating-linear-gradient(135deg,transparent 0 58px,rgba(23,21,19,.045) 58px 59px,transparent 59px 116px),var(--paper)}
     #digital::before{content:"";position:absolute;width:430px;height:430px;right:-210px;top:210px;border:32px solid rgba(255,100,32,.2);border-radius:50%;z-index:0}
     #digital::after{content:"QR + VIDEO";position:absolute;right:-18px;bottom:70px;font:900 118px/1 "Space Grotesk";letter-spacing:-.12em;color:rgba(23,21,19,.055);transform:rotate(-12deg);z-index:0}
     #proposal{background:
       radial-gradient(circle at 93% 10%,rgba(255,100,32,.34) 0 12%,transparent 34%),
       radial-gradient(circle at 8% 82%,rgba(198,240,75,.3) 0 10%,transparent 29%),
       repeating-linear-gradient(115deg,transparent 0 42px,rgba(23,21,19,.055) 42px 43px,transparent 43px 84px),
       linear-gradient(115deg,rgba(255,255,255,.35),transparent 45%),var(--paper-2)}
     #proposal::before{content:"PROPOSAL";position:absolute;right:-40px;top:90px;font:900 122px/1 "Space Grotesk";letter-spacing:-.13em;color:rgba(23,21,19,.075);transform:rotate(-8deg);z-index:0}
     #proposal::after{content:"";position:absolute;width:350px;height:350px;left:-175px;bottom:-120px;background:var(--lime);opacity:.42;border-radius:28px;transform:rotate(22deg);box-shadow:110px -45px 0 rgba(255,100,32,.14);z-index:0}
     #info{background:
       radial-gradient(circle at 88% 86%,rgba(123,184,255,.18) 0 10%,transparent 30%),
       radial-gradient(circle at 5% 12%,rgba(198,240,75,.2),transparent 29%),
       radial-gradient(circle at 72% 42%,rgba(255,100,32,.1),transparent 27%),
       repeating-linear-gradient(118deg,transparent 0 72px,rgba(255,255,255,.035) 72px 73px,transparent 73px 146px),var(--ink);
       color:#fff}
     #info .section-head p{color:#a8a29b}
     #info .info-card{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.055);box-shadow:0 16px 35px rgba(0,0,0,.12)}
     #info .info-card h3{color:#fff}
     #info .info-card p{color:#aaa49d}
     #info::before{content:"";position:absolute;width:310px;height:310px;right:-145px;top:45px;border:29px solid rgba(198,240,75,.34);border-radius:50%;box-shadow:0 0 0 18px rgba(255,100,32,.07),0 0 0 46px rgba(255,255,255,.025);z-index:0}
     #info::after{content:"INFO / 06";position:absolute;left:-15px;bottom:-28px;font:900 92px/1 "Space Grotesk";letter-spacing:-.12em;color:rgba(255,255,255,.055);transform:rotate(-8deg);z-index:0}
     #klien{background:
       radial-gradient(circle at 3% 72%,rgba(255,100,32,.28) 0 10%,transparent 29%),
       radial-gradient(circle at 96% 14%,rgba(198,240,75,.32),transparent 29%),
       repeating-linear-gradient(135deg,transparent 0 70px,rgba(23,21,19,.045) 70px 71px,transparent 71px 142px),var(--paper-2)}
     #klien::before{content:"";position:absolute;width:250px;height:250px;left:-135px;top:100px;border:28px solid rgba(255,100,32,.28);border-radius:50%;z-index:0}
     #klien::after{content:"35+";position:absolute;right:2%;bottom:-45px;font:180px/1 "Space Grotesk";font-weight:700;letter-spacing:-.14em;color:rgba(23,21,19,.1);z-index:0}
     #tim{background:
       radial-gradient(circle at 91% 11%,rgba(198,240,75,.22) 0 11%,transparent 32%),
       radial-gradient(circle at 4% 88%,rgba(255,100,32,.2),transparent 29%),
       radial-gradient(circle at 56% 48%,rgba(123,184,255,.08),transparent 24%),
       repeating-linear-gradient(115deg,transparent 0 55px,rgba(255,255,255,.035) 55px 56px,transparent 56px 110px),var(--ink);
       color:#fff}
     #tim .team-intro p{color:#a8a29b}
     #tim .crew-card{border-color:rgba(255,255,255,.16);background:#211f1c;box-shadow:0 16px 35px rgba(0,0,0,.14)}
     #tim .crew-body h3{color:#fff}
     #tim .crew-jobdesk{color:#aaa49d}
     #tim .special-label{color:#8e8881}
     #tim .special-tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e5e0d9}
     #tim .team-note{color:#8e8881}
     #tim::before{content:"";position:absolute;width:350px;height:350px;left:-195px;top:100px;border:32px solid rgba(255,100,32,.25);border-radius:50%;box-shadow:0 0 0 18px rgba(198,240,75,.07),0 0 0 48px rgba(255,255,255,.025);z-index:0}
     #tim::after{content:"CREATIVE";position:absolute;right:-36px;bottom:-25px;font:900 110px/1 "Space Grotesk";letter-spacing:-.14em;color:rgba(255,255,255,.055);transform:rotate(-10deg);z-index:0}
     #proses{background:
       radial-gradient(circle at 90% 18%,rgba(198,240,75,.36) 0 10%,transparent 30%),
       radial-gradient(circle at 8% 80%,rgba(255,100,32,.25),transparent 28%),
       repeating-linear-gradient(90deg,transparent 0 78px,rgba(23,21,19,.04) 78px 79px,transparent 79px 156px),var(--paper)}
     #proses::before{content:"01—06";position:absolute;left:-10px;top:65px;font:900 120px/1 "Space Grotesk";letter-spacing:-.16em;color:rgba(23,21,19,.06);transform:rotate(-6deg);z-index:0}
     #proses::after{content:"";position:absolute;right:-70px;bottom:42px;width:360px;height:150px;border-top:3px solid rgba(255,100,32,.3);border-bottom:3px solid rgba(255,100,32,.3);transform:rotate(-14deg);z-index:0}
     .section-dark#karya,.section-dark#portfolio,.section-dark#galeri-foto,.package-section#paket{position:relative;overflow:hidden;isolation:isolate}
     #karya > .wrap,#portfolio > .wrap,#galeri-foto > .wrap,#paket > .wrap{position:relative;z-index:1}
     #karya{background:
       radial-gradient(circle at 94% 12%,rgba(198,240,75,.24) 0 10%,transparent 29%),
       radial-gradient(circle at 7% 84%,rgba(255,100,32,.18),transparent 26%),
       linear-gradient(135deg,rgba(255,100,32,.1),transparent 42%),
       repeating-linear-gradient(115deg,transparent 0 78px,rgba(255,255,255,.035) 78px 79px,transparent 79px 156px),var(--ink)}
     #karya::before{content:"";position:absolute;width:470px;height:470px;left:-280px;top:170px;border:25px solid rgba(198,240,75,.11);border-radius:50%;box-shadow:0 0 0 18px rgba(255,100,32,.06),0 0 0 54px rgba(255,255,255,.025);transform:rotate(-14deg);z-index:0;pointer-events:none}
     #karya::after{content:"";position:absolute;width:360px;height:360px;right:-190px;bottom:-230px;border:30px solid rgba(255,100,32,.24);border-radius:50%;z-index:0}
     #portfolio{background:
       radial-gradient(circle at 4% 14%,rgba(123,184,255,.16) 0 8%,transparent 26%),
       radial-gradient(circle at 78% 52%,rgba(198,240,75,.14) 0 3%,transparent 3.5% 10%,rgba(198,240,75,.09) 10.2% 10.7%,transparent 10.9% 18%,rgba(198,240,75,.07) 18.2% 18.7%,transparent 18.9% 31%),
       radial-gradient(circle at 95% 92%,rgba(255,100,32,.18),transparent 29%),
       repeating-linear-gradient(118deg,transparent 0 96px,rgba(255,255,255,.035) 96px 97px,transparent 97px 193px),var(--ink)}
     #portfolio::before{content:"";position:absolute;width:470px;height:180px;left:-130px;bottom:110px;border:2px solid rgba(198,240,75,.17);transform:rotate(-12deg);z-index:0}
     #portfolio::after{content:"";position:absolute;width:390px;height:390px;right:-190px;top:210px;border:27px solid rgba(255,100,32,.12);border-radius:50%;box-shadow:0 0 0 16px rgba(198,240,75,.055),0 0 0 48px rgba(255,255,255,.025);transform:rotate(-18deg);z-index:0;pointer-events:none}
     #galeri-foto{background:
       radial-gradient(circle at 92% 12%,rgba(198,240,75,.18) 0 9%,transparent 27%),
       radial-gradient(circle at 5% 85%,rgba(255,100,32,.15),transparent 27%),var(--ink)}
     #galeri-foto::after{content:"TMI";position:absolute;right:-40px;bottom:-105px;font:300px/1 "Space Grotesk";font-weight:700;letter-spacing:-.16em;color:rgba(255,255,255,.045);z-index:0}
     #paket{background:
       radial-gradient(circle at 96% 8%,rgba(198,240,75,.2) 0 10%,transparent 27%),
       linear-gradient(115deg,rgba(255,100,32,.1),transparent 45%),var(--ink)}
     #paket::before{content:"";position:absolute;width:260px;height:260px;left:-150px;top:90px;border:24px solid rgba(123,184,255,.18);border-radius:50%;z-index:0}

    /* Clients + CTA */
    .client-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.client{font-size:12px;padding:10px 14px;border:1px solid var(--line);border-radius:99px;color:#59534d;background:rgba(255,255,255,.27)}
    .cta{background:
      linear-gradient(135deg,rgba(23,21,19,.13) 0 30%,transparent 30% 58%,rgba(198,240,75,.18) 58% 100%),
      repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.09) 47px 48px),
      radial-gradient(circle at 88% 43%,rgba(198,240,75,.48) 0 92px,transparent 94px),
      var(--orange);padding:86px 0;color:#fff;position:relative;overflow:hidden}
    .cta::after{content:"TMI";position:absolute;right:-30px;bottom:-100px;font-size:300px;font-weight:700;letter-spacing:-.15em;color:rgba(255,255,255,.12)}
    .cta-inner{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:30px}.cta h2{font-size:clamp(38px,6vw,75px);line-height:.89;letter-spacing:-.08em;max-width:700px;margin-top:12px}.cta p{max-width:310px;font-size:14px;color:#ffe4d7}.cta .button{margin-top:24px;background:var(--ink);color:#fff}
    .cta-visual{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
    .cta-visual-ring{position:absolute;width:320px;height:320px;right:5%;top:50%;border:2px solid rgba(255,255,255,.28);border-radius:50%;transform:translateY(-50%) rotate(-18deg);box-shadow:0 0 0 18px rgba(23,21,19,.08),0 0 0 54px rgba(255,255,255,.1),0 0 0 86px rgba(23,21,19,.06)}
    .cta-visual-ring::before,.cta-visual-ring::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.25);transform-origin:center}
    .cta-visual-ring::before{width:2px;height:365px;transform:translate(-50%,-50%) rotate(45deg)}
    .cta-visual-ring::after{width:365px;height:2px;transform:translate(-50%,-50%) rotate(45deg)}
    .cta-visual-frame{position:absolute;width:245px;height:155px;right:13%;top:50%;border:2px solid rgba(23,21,19,.2);transform:translateY(-50%) rotate(-8deg);box-shadow:10px 10px 0 rgba(255,255,255,.11),20px 20px 0 rgba(23,21,19,.08)}
    .cta-visual-frame::before{content:"";position:absolute;inset:16px;border:1px dashed rgba(255,255,255,.34)}
    .cta-visual-frame::after{content:"TMI / VISUAL STORY";position:absolute;right:12px;bottom:10px;font:9px "DM Mono";letter-spacing:.1em;color:rgba(255,255,255,.62)}
    .cta-visual-mark{position:absolute;right:31%;top:25%;width:17px;height:17px;border:2px solid rgba(255,255,255,.66);transform:rotate(45deg)}
    .cta-visual-mark::after{content:"";position:absolute;width:7px;height:7px;right:-5px;bottom:-5px;background:var(--lime);border-radius:50%}
     @media(max-width:700px){.cta-inner{display:block}.cta-visual{opacity:.72}.cta-visual-ring{width:230px;height:230px;right:-34px}.cta-visual-frame{width:190px;height:120px;right:5%}.cta-visual-mark{right:25%;top:21%}}
     @media(max-width:500px){.brand-lockup{width:190px;height:44px}.brand-lockup span{font-size:8px}}
    footer{background:var(--ink);color:#aaa49d;padding:32px 0;font-size:12px}.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer-brand{color:#fff;font-weight:700;display:flex;align-items:center;gap:14px}.footer-links{display:flex;gap:20px;align-items:center}.footer-social{display:flex;gap:12px;align-items:center}.footer-social a{color:#aaa49d;display:flex;transition:opacity .15s}.footer-social a:hover{opacity:.75}.footer-social a.footer-social-empty{opacity:.35;cursor:default}.footer-social a.footer-social-empty:hover{opacity:.35}
    .footer-brand .brand-lockup{mix-blend-mode:normal;width:120px;height:40px;animation:none;flex:none}
    .footer-brand .brand-lockup::after{display:none}
    .footer-brand .brand-lockup b{color:var(--orange);font-size:26px}
    .footer-brand .brand-lockup span{font-size:11px}
    .footer-address{color:#8f8880;font-size:11.5px;font-weight:500;line-height:1.5}
    @media(max-width:700px){.footer-row{align-items:flex-start}.footer-brand{flex-wrap:wrap}}
    /* (print styles moved into printInvoice() as a standalone document) */

    /* ============================================================
       ADMIN — memakai desain & komponen yang sama persis dengan
       tampilan client (warna paper/ink/orange, font, pill button,
       kartu gallery-item/project). Tidak ada tema gelap terpisah.
       ============================================================ */
    .admin-shell{display:none;position:fixed;inset:0;background:var(--paper);color:var(--ink);z-index:9998;overflow-y:auto;font-family:inherit}
    .admin-topbar{position:sticky;top:0;z-index:5;background:rgba(245,241,234,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
    .admin-topbar-inner{max-width:1180px;margin:auto;padding:17px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
    .admin-eyebrow{font:9px "DM Mono";text-transform:uppercase;letter-spacing:.1em;color:var(--orange);margin-top:1px}
     .admin-nav{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;min-width:0;scrollbar-width:thin}
     .admin-content-subnav{margin:0 0 22px;padding-bottom:6px;border-bottom:1px solid var(--line)}
     .admin-nav button{flex:0 0 auto;font-family:inherit;padding:13px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
     .admin-topbar .admin-nav button{text-transform:uppercase;letter-spacing:.03em}
     #adminSettingsTabBtn{width:46px;height:46px;padding:0;display:inline-flex;align-items:center;justify-content:center}
     #adminSettingsTabBtn svg{width:18px;height:18px}
    .admin-nav button:hover{border-color:var(--orange);color:var(--orange)}
    .admin-nav button.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
     .admin-content-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:-4px 0 22px}
     .admin-content-tabs button{font-family:inherit;padding:13px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:14px;font-weight:700;cursor:pointer}
     .admin-content-tabs button:hover{border-color:var(--orange);color:var(--orange)}
     .admin-content-tabs button.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
     .admin-content-editor{max-width:none}
     #siteContentEditorPaketMount .admin-content-editor{max-width:none}
     .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;flex:none;transition:background .15s,border-color .15s,color .15s}
     .icon-btn svg{width:17px;height:17px}
     .icon-btn:hover{border-color:var(--orange);color:var(--orange)}
     .icon-btn-primary{background:var(--orange);border-color:var(--orange);color:#fff}
     .icon-btn-primary:hover{background:#e2540f;border-color:#e2540f;color:#fff}
     .admin-content-editor h3{font-size:20px;letter-spacing:-.04em;margin-bottom:5px}
     .admin-content-editor>p{font-size:12px;color:var(--muted);margin-bottom:22px}
     .admin-content-media{display:flex;flex-wrap:wrap;gap:8px;padding-top:17px;border-top:1px solid var(--line);margin-top:20px}
     .admin-content-media-label{width:100%;font:9px "DM Mono";text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:2px}
     .admin-package-category-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 18px}
     .admin-package-category-tabs button{font-family:inherit;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}
     .admin-package-category-tabs button:hover{border-color:var(--orange);color:var(--orange)}
     .admin-package-category-tabs button.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
     .admin-package-category-tabs .admin-package-add-tab{width:34px;height:34px;padding:0;font-size:19px;line-height:1;border-style:dashed}
     .admin-package-categories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
     .admin-package-category-block{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--paper);min-width:0}
     .admin-package-category-block-head{margin-bottom:12px}
     .admin-package-category-block-head h4{font-size:14px;letter-spacing:-.02em;color:var(--orange)}
     .admin-package-category-block .admin-package-list{gap:8px}
     .admin-package-category-block .admin-package-row{position:relative;grid-template-columns:1fr auto;gap:6px;padding:10px 34px 10px 10px}
     .admin-package-category-block .admin-package-row small{font-size:9px}
     .admin-package-category-block .admin-package-row input{grid-column:1/-1;padding-top:8px;padding-bottom:8px;font-size:12px}
     .admin-package-category-block .admin-package-row .site-package-name{font-weight:700}
     .admin-package-category-block .admin-package-row .site-package-price{max-width:120px}
     .admin-package-category-block .admin-package-remove{position:absolute;right:8px;top:8px;grid-column:auto;justify-self:auto;width:24px;height:24px;font-size:13px}
     .admin-package-category-block .admin-package-add{margin-top:6px;width:100%}
     @media(max-width:1050px){.admin-package-categories-grid{grid-template-columns:repeat(2,1fr)}}
     @media(max-width:700px){.admin-package-categories-grid{grid-template-columns:1fr}}
     .admin-package-list{display:grid;gap:10px;margin-top:8px}
     .admin-package-row{display:grid;grid-template-columns:1.1fr 1fr .65fr auto;gap:9px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--paper);align-items:center}
     .admin-package-row small{grid-column:1/-1;font:9px "DM Mono";text-transform:uppercase;color:var(--orange)}
     .admin-package-row input{min-width:0}
     .admin-package-remove{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;flex-shrink:0}
     .admin-package-remove:hover{border-color:#e0483e;color:#e0483e}
     .admin-package-add{margin-top:2px;width:100%}
     @media(max-width:700px){.admin-package-row{grid-template-columns:1fr 1fr auto}.admin-package-row input:nth-of-type(2){grid-column:1/-1}}
     .admin-bottom-actions{max-width:1180px;margin:0 auto;padding:0 28px 28px;display:flex;justify-content:flex-end;align-items:center;gap:10px}
    .admin-main{max-width:1180px;margin:auto;padding:34px 28px 90px}
    .admin-panel{display:none}
    .admin-panel.is-active{display:block}
    .admin-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:24px}
    .admin-head h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.04em;line-height:1}
    .admin-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
    .admin-order-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 20px;margin-bottom:12px}
    .admin-order-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}
    .admin-order-code{font:13px "DM Mono";color:var(--orange);font-weight:700}
    .admin-order-queue{color:var(--muted);font-weight:400;font-size:12px}
    .admin-order-name{font-size:14px;margin-top:5px;font-weight:600}
    .admin-order-name span{color:var(--muted);font-weight:400}
    .admin-order-desc{font-size:12px;color:var(--muted);margin-top:3px}
    .admin-order-price{font-size:14px;font-weight:700;text-align:right}
    .admin-order-dp{font-size:11px;color:var(--muted);text-align:right}
    .admin-order-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap;gap:10px}
    .admin-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700}
    .admin-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
    .admin-order-actions{display:flex;gap:8px;flex-wrap:wrap}
    .admin-btn-mini{font-family:inherit;font-size:11px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center}
    .admin-btn-mini.admin-btn-mini-primary-lg{font-size:14px;padding:12px 22px;background:var(--orange);border-color:var(--orange);color:#fff}
    .admin-btn-mini.admin-btn-mini-primary-lg:hover{background:var(--ink);border-color:var(--ink);color:var(--orange)}
    .admin-icon-btn{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
    .admin-icon-btn:hover{border-color:var(--orange);color:var(--orange)}
    .admin-icon-btn.admin-icon-btn-primary{width:40px;height:40px;background:var(--orange);border-color:var(--orange);color:#fff;font-size:20px;font-weight:700}
    .admin-icon-btn.admin-icon-btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--orange)}
    .admin-btn-mini:hover{border-color:var(--orange);color:var(--orange)}
    .admin-btn-mini:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
    .admin-btn-mini.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
    .admin-btn-confirm{font-family:inherit;font-size:11px;padding:8px 13px;border-radius:999px;border:none;background:var(--lime);color:var(--ink);cursor:pointer;font-weight:700}
    .admin-btn-confirm:disabled{opacity:.5;cursor:default}
    .admin-empty{color:var(--muted);font-size:13px;padding:18px 0}
    /* Task (aksesibilitas): .admin-empty didesain untuk panel admin
       berlatar terang. Di halaman publik dipakai juga di dalam section
       gelap (#portfolio, #paket) — override warnanya di sana supaya
       kontras cukup (sama seperti warna muted section gelap lainnya). */
    .section-dark .admin-empty,.package-section .admin-empty{color:#a8a29b}
    .admin-field{margin-bottom:14px}
    .admin-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:6px}
    .admin-input,.admin-select{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-size:13px}
    .admin-input:focus,.admin-select:focus{outline:2px solid var(--orange);outline-offset:1px}
    .admin-status-text{font-size:12px;color:var(--muted);margin-top:8px}
    .admin-filter-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
    .admin-filter-nav a{font-family:inherit;padding:9px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-size:12px;background:transparent;cursor:pointer;text-decoration:none;display:inline-flex}
    .admin-filter-nav a:hover{border-color:var(--orange);color:var(--orange)}
    .admin-filter-nav a.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
     .admin-filter-nav button{font-family:inherit;width:38px;height:38px;padding:0;border-radius:999px;border:1px dashed var(--line);color:var(--ink);font-size:20px;line-height:1;background:transparent;cursor:pointer}
     .admin-filter-nav button:hover{border-color:var(--orange);color:var(--orange)}
     .admin-gallery-upload-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
     .admin-gallery-upload-actions .button{padding:10px 13px;font-size:11px;white-space:nowrap}
    .admin-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
    .admin-photo-card{position:relative;aspect-ratio:1;overflow:hidden;border-radius:16px;background:var(--paper-2);border:1px solid var(--line)}
    .admin-photo-card img{width:100%;height:100%;object-fit:cover;display:block}
    .admin-photo-card.is-cover{border-color:var(--lime);box-shadow:0 0 0 2px rgba(198,240,75,.35)}
    .admin-photo-cover-badge{position:absolute;top:8px;left:8px;background:var(--lime);color:var(--ink);font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;z-index:2;pointer-events:none}
    .admin-photo-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,21,19,.78) 0%,transparent 48%);opacity:0;transition:opacity .15s;display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;padding:10px;flex-wrap:wrap}
    .admin-photo-card:hover .admin-photo-overlay{opacity:1}
    .admin-del-btn{font-family:inherit;padding:7px 14px;border-radius:999px;border:none;background:var(--orange);color:#fff;font-size:11px;font-weight:700;cursor:pointer}
    .admin-cover-btn{font-family:inherit;padding:7px 14px;border-radius:999px;border:none;background:#fff;color:var(--ink);font-size:11px;font-weight:700;cursor:pointer}
    .admin-cover-btn-active{background:var(--lime);color:var(--ink)}
    .admin-showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
    .admin-showcase-card{border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;padding:0;font-family:inherit;transition:transform .15s,border-color .15s;display:block;overflow:hidden}
    .admin-showcase-card:hover{transform:translateY(-3px);border-color:var(--orange)}
    .admin-showcase-open{cursor:pointer;display:block;background:none;border:0;padding:0;width:100%;text-align:left;font-family:inherit}
    .admin-showcase-thumb{position:relative;aspect-ratio:1/1!important;height:auto!important;min-height:0!important;padding:0!important;overflow:hidden;border-radius:14px 14px 0 0}
    .admin-showcase-thumb .gallery-visual{position:absolute;inset:0;transform:scale(1.35)}
     .admin-showcase-thumb .admin-media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
     .admin-showcase-thumb .gallery-overlay{z-index:2}
    .admin-showcase-badge{position:absolute;top:7px;right:7px;z-index:2;font:9px "DM Mono";background:rgba(23,21,19,.72);color:#fff;padding:3px 7px;border-radius:999px;letter-spacing:.03em}
    .admin-showcase-type{position:absolute;left:7px;bottom:7px;z-index:2;font:8px "DM Mono";text-transform:uppercase;letter-spacing:.05em;background:rgba(255,255,255,.85);color:var(--ink);padding:3px 7px;border-radius:999px}
    .admin-showcase-info{padding:8px 10px 10px}
    .admin-showcase-info h3{font-size:12.5px;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
    .admin-showcase-actions{padding:0 10px 10px;border-top:1px solid var(--line);margin-top:2px;padding-top:8px;display:flex;gap:6px}
    .admin-del-card-btn{flex:1;font-family:inherit;font-size:11px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:#c0392b;cursor:pointer;font-weight:700;transition:background .15s,border-color .15s}
    .admin-del-card-btn:hover{background:#c0392b;border-color:#c0392b;color:#fff}
    /* Task: pembatasan role — tombol hapus hanya untuk superadmin.
       Ditoggle via class .is-superadmin di <body> (lihat updateAdminSettingsTabVisibility di app.js) */
    body:not(.is-superadmin) .admin-del-btn,
    body:not(.is-superadmin) .admin-del-card-btn,
    body:not(.is-superadmin) .superadmin-only-action{display:none !important}
    .admin-addphoto-card-btn{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:16px;line-height:1;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-weight:700;transition:background .15s,border-color .15s,color .15s}
    .admin-addphoto-card-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff}
    .admin-showcase-add-tile{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--line);border-radius:14px;background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s,background .15s;min-height:0}
    .admin-showcase-add-tile:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,100,32,.05)}

    /* CREW — tab kelola foto/nama/deskripsi tim di panel superadmin */
    .admin-crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
    .admin-settings-grid{display:grid;grid-template-columns:480px 1fr;gap:22px;align-items:start}
    @media(max-width:900px){.admin-settings-grid{grid-template-columns:1fr}}
    .admin-crew-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
    .admin-crew-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
    .admin-crew-photo-preview{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;letter-spacing:-.06em;color:var(--muted);flex:none;text-align:center;padding:0 4px}
    .admin-crew-photo-row .admin-crew-photo-preview{font-size:13px}
    .admin-crew-photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
    .admin-crew-card[data-client-id] .admin-crew-photo-preview{background:#fff}
    .admin-crew-card[data-client-id] .admin-crew-photo-preview img{object-fit:contain;padding:6px;box-sizing:border-box}
    .admin-crew-upload-btn{font-family:inherit;font-size:11px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-weight:700;transition:background .15s,border-color .15s,color .15s}
    .admin-crew-upload-btn:hover{border-color:var(--orange);color:var(--orange)}
    .admin-crew-actions{display:flex;gap:8px;margin-top:4px}
    .admin-crew-actions .admin-del-card-btn{flex:none;padding:9px 15px}

    /* KLIEN — versi ringkas 1 baris per klien (ganti admin-crew-card yg boros tempat) */
    .admin-client-list{display:flex;flex-direction:column;gap:8px}
    .admin-client-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:9px 12px;box-shadow:var(--shadow)}
    .admin-client-logo{position:relative;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;letter-spacing:-.04em;color:var(--muted);cursor:pointer;transition:border-color .15s}
    .admin-client-logo:hover{border-color:var(--orange)}
    .admin-client-logo img{width:100%;height:100%;object-fit:cover;background:#fff}
    .admin-client-row .admin-input,.admin-client-row .admin-select{padding:8px 10px;font-size:12.5px}
    .admin-client-name{flex:2 1 200px;min-width:140px}
    .admin-client-select{flex:1 1 160px;min-width:140px}
    .admin-client-initials{flex:none;width:60px;text-align:center}
    .admin-client-row .admin-btn-mini,.admin-client-row .admin-del-card-btn{flex:none;padding:8px 12px;margin:0}
    .admin-client-logo-del{flex:none;font-family:inherit;font-size:10px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:transparent;color:#c0392b;cursor:pointer;font-weight:700;white-space:nowrap;transition:background .15s,border-color .15s}
    .admin-client-logo-del:hover{background:#c0392b;border-color:#c0392b;color:#fff}
    .admin-client-status{flex-basis:100%;margin:0}
    @media(max-width:640px){.admin-client-row{padding:9px}.admin-client-name{flex-basis:100%}}
    .admin-showcase-add-plus{font-size:30px;line-height:1;font-weight:400}
    .admin-galeri-grup-thumb{position:relative;aspect-ratio:1/1;border-radius:14px 14px 0 0;background-color:var(--paper-2);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;overflow:hidden}
    .admin-galeri-grup-placeholder{font-size:32px;opacity:.3}
    .admin-back-btn{margin-bottom:18px}
      .admin-detail-title-row{display:flex;align-items:center;gap:10px;margin:6px 0 8px}
      .admin-detail-title-row h2{margin:0!important}
      .admin-title-edit-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s,background .15s;flex:none}
      .admin-title-edit-btn:hover,.admin-title-edit-btn:focus-visible{color:var(--orange);border-color:var(--orange);background:rgba(255,100,32,.06);outline:none}
      .admin-title-edit-btn svg{width:15px;height:15px}
      .admin-title-editor{display:flex;align-items:flex-start;gap:8px;max-width:560px;margin:0 0 24px}
      .admin-title-editor .admin-input{flex:1;min-width:0}
      .admin-title-editor-actions{display:flex;gap:7px;flex:none}
      .admin-title-editor-actions .button{padding:11px 14px;font-size:12px}
      .admin-title-editor-status{font-size:12px;color:var(--muted);margin:6px 0 20px}
      @media(max-width:560px){.admin-title-editor{flex-wrap:wrap}.admin-title-editor .admin-input{flex-basis:100%}}
      .admin-gallery-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;max-width:1120px}
      .admin-gallery-detail-column{min-width:0}
      .admin-gallery-detail-column>.admin-card{max-width:none!important;margin-bottom:0!important}
      .admin-gallery-video-section{padding:0;background:transparent;border:0;box-shadow:none}
      .admin-gallery-detail-upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
      .admin-gallery-detail-upload .admin-status-text{margin:0}
      .admin-gallery-detail-column .admin-photo-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important}
      .admin-gallery-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:0 0 18px}
      .admin-gallery-category-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);text-align:left;transition:border-color .15s ease,transform .15s ease}
      .admin-gallery-category-card:hover{border-color:var(--orange);transform:translateY(-2px)}
      .admin-gallery-category-open{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;font:inherit;color:inherit}
      .admin-gallery-category-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);display:flex;align-items:center;justify-content:center}
      .admin-gallery-category-thumb img{width:100%;height:100%;object-fit:cover;display:block}
      .admin-gallery-category-placeholder{font-size:34px;opacity:.32}
      .admin-gallery-category-name{padding:10px 12px 12px;font-size:13px;font-weight:700;line-height:1.2}
      .admin-gallery-category-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}
      .admin-gallery-category-actions button{width:28px;height:28px;border-radius:9px;border:1px solid rgba(255,255,255,.35);background:rgba(20,20,20,.55);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;line-height:1;transition:background .15s ease,transform .15s ease}
      .admin-gallery-category-actions button:hover{background:var(--orange);transform:translateY(-1px)}
      .admin-gallery-category-actions .admin-gallery-category-del:hover{background:#d64545}
      .admin-gallery-category-label{display:block;margin-bottom:4px;font:9px "DM Mono";text-transform:uppercase;letter-spacing:.08em;color:var(--orange)}
      @media(max-width:760px){.admin-gallery-detail-grid{grid-template-columns:1fr}}
    .admin-video-current{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;margin-top:10px}
    .admin-video-current a{color:var(--ink);word-break:break-all}
     #adminGaleriGrupVideoList{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}
     .admin-video-preview-item{width:220px;max-width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:10px}
     .admin-video-preview-add{width:220px;max-width:100%;aspect-ratio:3/4;margin-top:10px;border:2px dashed var(--line);border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;font-size:34px;line-height:1;font-weight:300;transition:border-color .15s,color .15s,background .15s}
     .admin-video-preview-add:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,100,32,.06)}
    .admin-video-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
     .admin-video-preview-source{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
     .admin-video-preview-source span{text-transform:uppercase;letter-spacing:.06em;font:9px "DM Mono";color:var(--muted)}
     .admin-video-preview-source strong{color:var(--ink);font-size:11px}
    .admin-video-preview-badge{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:3px 8px;border-radius:20px;flex:none}
    .admin-video-preview-badge.is-ok{background:#e4f3df;color:#3d7a2c}
    .admin-video-preview-badge.is-warn{background:#fbe6d8;color:#b5540e}
    .admin-video-preview-frame-wrap{position:relative;width:100%;max-width:280px;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
    .admin-video-preview-frame-wrap.is-vertical{max-width:180px;aspect-ratio:9/16}
    .admin-video-preview-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
    .admin-video-preview-warn-text{font-size:12px;color:#b5540e;margin:0}
     .admin-video-thumb{display:block;position:relative;width:100%;aspect-ratio:1/1;border:0;border-radius:8px;overflow:hidden;background:#211f1c;cursor:pointer;padding:0}
     .admin-video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
     .admin-video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(23,21,19,.58))}
     .admin-video-thumb span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding-left:3px;background:#fff;color:var(--ink);font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
     .admin-video-thumb:hover span{background:var(--orange);color:#fff}
     .admin-photo-open{display:block;width:100%;height:100%;border:0;padding:0;background:none;cursor:zoom-in}
     .admin-photo-open:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
    .admin-login-overlay{position:fixed;inset:0;background:rgba(23,21,19,.72);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
    .admin-login-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;width:min(400px,100%);box-shadow:var(--shadow)}
    .admin-login-error{color:#c0392b;font-size:12px;margin:10px 0 0;display:none}
     .admin-invoice-overlay{position:fixed;inset:0;background:rgba(23,21,19,.58);z-index:10400;align-items:center;justify-content:center;padding:20px}
     .admin-invoice-modal{width:min(560px,100%);max-height:90vh;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
     .admin-invoice-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px}
     .admin-invoice-header h3{font-size:22px;letter-spacing:-.05em;margin-top:5px}
     .admin-invoice-close{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
     .admin-invoice-content{padding:18px 0}
     .admin-invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px}
     .admin-invoice-grid span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
     .admin-invoice-grid strong{font-size:13px}
     .admin-invoice-bank{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;font-size:13px}
     .admin-invoice-bank span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
     .admin-invoice-qr{display:block;max-width:180px;max-height:180px;margin:14px auto 0;border-radius:8px}
     .admin-invoice-footer{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px}
     @media(max-width:700px){.admin-topbar-inner{padding:14px 18px}.admin-main{padding:26px 18px 70px}.admin-bottom-actions{padding:0 18px 22px}.admin-nav button{font-size:10px;padding:8px 9px}}

    /* ============================================================
       ADMIN — DARK MODE
       Panel admin/superadmin memakai token warna sendiri (bukan
       --paper/--ink global) supaya background jadi gelap dengan
       aksen orange/lime yang sama seperti tampilan Gallery publik.
       Karena hampir semua komponen admin di atas sudah pakai
       var(--paper)/var(--ink)/var(--paper-2)/var(--muted)/var(--line),
       redefinisi token ini di scope .admin-shell otomatis mengubah
       sebagian besar komponen. Sisanya (yang pakai #fff / var(--ink)
       literal untuk kombinasi warna terbalik) dipatch manual di bawah
       supaya kontrasnya tetap terbaca.
       ============================================================ */
    .admin-shell{
      --paper:#171513;--paper-2:#211f1c;--ink:#f5f1ea;
      --muted:#a89f93;--line:rgba(245,241,234,.14);
      --shadow:0 22px 60px rgba(0,0,0,.5);
      position:fixed;
      background:
        radial-gradient(circle at 92% 8%,rgba(198,240,75,.2) 0 8%,transparent 28%),
        radial-gradient(circle at 4% 58%,rgba(255,100,32,.15) 0 7%,transparent 27%),
        radial-gradient(circle at 70% 72%,rgba(123,184,255,.07),transparent 28%),
        repeating-linear-gradient(115deg,transparent 0 52px,rgba(255,255,255,.04) 52px 53px,transparent 53px 104px),
        #171513;
    }
    /* Bulatan besar bergradasi lime, mengambang di kanan atas — meniru
       aksen bulatan besar di halaman Gallery publik */
    .admin-shell::before{
      content:"";position:absolute;z-index:0;pointer-events:none;
      width:560px;height:560px;border-radius:50%;right:-220px;top:-230px;
      background:var(--lime);opacity:.16;
      box-shadow:0 0 0 22px rgba(198,240,75,.05),0 0 0 48px rgba(255,100,32,.04),0 0 0 82px rgba(255,255,255,.02);
    }
    /* Watermark teks "TMI" raksasa di kiri bawah + bulatan outline tipis
       di kanan bawah, supaya area kosong ikut "bicara" */
    .admin-shell::after{
      content:"TMI";position:absolute;z-index:0;pointer-events:none;
      left:-30px;bottom:-115px;font-size:300px;font-weight:700;
      letter-spacing:-.15em;color:rgba(255,255,255,.045);
      transform:rotate(-8deg);font-family:"Space Grotesk",Arial,sans-serif;
    }
    .admin-shell .admin-topbar,.admin-shell .admin-main{position:relative;z-index:1}
    /* Logo header memakai mix-blend-mode:multiply (didesain untuk latar
       terang) — di panel admin yang gelap ini membuat logo & tulisan
       nyaris hilang. Matikan blend mode-nya di sini, sama seperti yang
       sudah dilakukan untuk body.gallery-page-open di halaman publik. */
    .admin-shell .brand-lockup{mix-blend-mode:normal}
    .admin-shell .brand-lockup span{color:var(--ink)}
    .admin-shell .brand-lockup b{color:var(--orange)}
    .admin-shell .admin-eyebrow{color:var(--orange)}
    /* Tombol outline (mis. "Kembalikan default") tidak set warna teks
       sendiri (hanya mewarisi) — pertegas supaya pasti kontras di gelap */
    .admin-shell .button-outline{color:var(--ink);border-color:rgba(245,241,234,.35)}
    .admin-shell .button-outline:hover{border-color:var(--orange);color:var(--orange)}
    .admin-shell .button-dark{background:#f5f1ea;color:#171513}
    /* garis vertikal tipis + bulatan outline oranye di kanan bawah viewport */
    .admin-shell .admin-main::before{
      content:"";position:fixed;z-index:-1;pointer-events:none;
      right:6%;bottom:-120px;width:260px;height:260px;border-radius:50%;
      border:1px solid rgba(255,100,32,.18);
    }
    .admin-shell .admin-main::after{
      content:"";position:fixed;z-index:-1;pointer-events:none;inset:0;
      background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 34px);
    }
    .admin-shell .admin-topbar{background:rgba(23,21,19,.92)}
    .admin-shell .admin-card,
    .admin-shell .admin-order-card,
    .admin-shell .admin-showcase-card,
    .admin-shell .admin-crew-card,
    .admin-shell .admin-gallery-category-card,
    .admin-shell .admin-input,
    .admin-shell .admin-select,
    .admin-shell .admin-content-tabs button,
    .admin-shell .admin-package-category-tabs button,
    .admin-shell .admin-package-remove,
    .admin-shell .admin-invoice-grid,
    .admin-shell .admin-invoice-bank{background:var(--paper-2)}
    .admin-shell .admin-content-tabs button,
    .admin-shell .admin-package-category-tabs button{color:var(--muted)}
    /* pill "aktif" sebelumnya pakai background:var(--ink) (asumsi ink gelap);
       di dark mode diganti aksen orange supaya tetap kontras */
    .admin-shell .admin-filter-nav a.is-active,
    .admin-shell .admin-content-tabs button.is-active,
    .admin-shell .admin-package-category-tabs button.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
    /* elemen dengan lingkaran/chip putih solid: paksa teks tetap gelap */
    .admin-shell .admin-btn-confirm,
    .admin-shell .admin-video-thumb span,
    .admin-shell .admin-showcase-type{color:#171513}
    .admin-shell .admin-invoice-qr{background:#fff;padding:8px}

    /* ============================================================
       UI DIALOG SYSTEM — konfirmasi/loading/sukses/gagal/peringatan
       yang selalu tampil di tengah layar (pengganti confirm/alert).
       ============================================================ */
    .ui-spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--paper-2);border-top-color:var(--orange);animation:ui-spin .8s linear infinite}
    @keyframes ui-spin{to{transform:rotate(360deg)}}
    .ui-icon-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .ui-icon-success{background:#e3f3d3;color:#5c8a1e}
    .ui-icon-error{background:#fbe3df;color:#c0392b}
    .ui-icon-warning{background:#fff3cf;color:#c78a00}
    .ui-icon-circle svg{width:28px;height:28px}
    .ui-dialog-btn{font-family:inherit;font-size:13px;font-weight:700;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
    .ui-dialog-btn:hover{border-color:var(--orange);color:var(--orange)}
    .ui-dialog-btn-primary{background:var(--orange);border-color:var(--orange);color:#fff}
    .ui-dialog-btn-primary:hover{background:#e2540f;border-color:#e2540f;color:#fff}
    .ui-dialog-btn-danger{background:#c0392b;border-color:#c0392b;color:#fff}
    .ui-dialog-btn-danger:hover{background:#a5301f;border-color:#a5301f;color:#fff}
    /* ============================================================
     * Tambahahan task 3 & 4 (post-extraction)
     * ============================================================ */

    /* Task 3: kelas loading state konsisten — dipakai di semua section
     * yang fetch data dinamis (galeri, showcase, dashboard admin). */
    .admin-loading {
      color: var(--muted);
      font-size: 13px;
      padding: 18px 0;
      display: flex;
      align-items: center;
      gap: 10px;
      grid-column: 1 / -1;
    }
    .admin-loading::before {
      content: "";
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--line);
      border-top-color: var(--orange);
      animation: tmiSpin 0.8s linear infinite;
    }
    @keyframes tmiSpin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .admin-loading::before { animation: none; }
    }

    /* Task 4: skip-link untuk pengguna screen reader — muncul saat fokus.
     * Tambahkan elemen <a class="skip-link" href="#main">Lewati ke konten</a>
     * di awal <body> untuk mengaktifkan. */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--ink);
      color: #fff;
      padding: 8px 16px;
      z-index: 100000;
      text-decoration: none;
      border-radius: 0 0 8px 0;
      font-size: 13px;
      transition: top 0.2s;
    }
    .skip-link:focus {
      top: 0;
      outline: 3px solid var(--orange);
      outline-offset: 1px;
    }

    /* Task 4: outline fokus yang lebih jelas saat navigasi via keyboard.
     * Hanya aktif saat user pakai keyboard (menggunakan :focus-visible). */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible {
      outline: 3px solid var(--orange);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Task 4: visually-hidden — teks yang hanya terbaca oleh screen reader. */
    .visually-hidden {
      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;
    }