/* =====================================================================
   AIRPORT LIFE — The Aviation Simulator · Home
   ===================================================================== */
/* font disimpan lokal di /fonts — upload folder fonts juga ke server */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/inter-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/big-shoulders-display-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/big-shoulders-display-latin-900-normal.woff2) format('woff2')}

:root{
  --ink:#f4f1ea;
  --ink-dim:rgba(244,241,234,.66);
  --navy:#0b1424;
  --gold:#ffd34d;
  --gold-2:#ffb23f;
  --sunset:#ff8a3d;
  --go:#3ef08a;
  --soon:#ffb23f;
  --panel:rgba(9,14,26,.66);
  --panel-line:rgba(255,211,77,.22);
  --flap-bg:#151a23;
  --flap-ink:#ffd84a;

  --f-display:'Big Shoulders Display',system-ui,sans-serif;
  --f-flap:'Barlow Condensed',system-ui,sans-serif;
  --f-head:'Inter','Segoe UI',system-ui,sans-serif;
  --f-body:var(--f-head);
  --f-serif:Georgia,'Times New Roman',serif;
  --f-sans:var(--f-head);

  --pad-x:clamp(16px,3.2vw,64px);
  --row-h:clamp(26px,4.3vh,50px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--navy);color:var(--ink);font-family:var(--f-body);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
kbd{font-family:var(--f-flap)}
::selection{background:var(--gold);color:var(--navy)}

/* =====================================================================
   SCENE — foto selalu menutup layar, efek ditempel di koordinat foto
   ===================================================================== */
.scene{
  position:fixed;left:50%;top:50%;z-index:0;
  width:max(100vw, calc(100vh * 1.7768));
  height:max(100vh, calc(100vw / 1.7768));
  transform:translate(-50%,-50%);
  animation:kenburns 38s ease-in-out infinite alternate;transform-origin:55% 45%;
  }
.scene-img{
  position:absolute;inset:0;
  background:url(img/bg-nefia-plane.webp) center/cover no-repeat;
}
@keyframes kenburns{from{scale:1}to{scale:1.06}}
body.is-loading .scene-img{filter:brightness(0) saturate(0)}
.scene-img{transition:filter 2.2s ease}

/* matahari berdenyut + lens flare */
.fx-sun{
  position:absolute;left:6%;top:53%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,226,150,.85) 0 2.5%,rgba(255,170,70,.35) 9%,rgba(255,120,40,.12) 26%,transparent 60%);
  mix-blend-mode:screen;animation:sun 6s ease-in-out infinite;pointer-events:none;
}
.fx-sun::after{
  content:"";position:absolute;left:50%;top:50%;width:240%;height:3px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(255,214,140,.55) 45%,rgba(255,250,230,.9) 50%,rgba(255,214,140,.55) 55%,transparent);
  filter:blur(1.5px);opacity:.65;
}
@keyframes sun{50%{opacity:.75;transform:translate(-50%,-50%) scale(1.08)}}

/* kilau cahaya menyapu kaca terminal */
.fx-glass{
  position:absolute;left:28%;top:47%;width:72%;height:26%;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mix-blend-mode:screen;
}
.fx-glass::before{
  content:"";position:absolute;top:-20%;bottom:-20%;width:16%;left:-20%;
  background:linear-gradient(100deg,transparent,rgba(255,236,190,.5),transparent);
  transform:skewX(-18deg);animation:sweep 7s ease-in-out infinite;
}
@keyframes sweep{0%,35%{left:-20%}75%,100%{left:110%}}

/* kilau kaca menyapu logo emas NEFIA (mengikuti bentuk logo) */
.fx-logo{
  position:absolute;left:30.5%;top:37.83%;width:9.09%;height:9.14%;overflow:hidden;pointer-events:none;
  clip-path:polygon(3.3% 94.2%,93.4% 2.3%,98.7% 11.6%,80.3% 48.8%,75.7% 51.2%,59.9% 80.2%,1.3% 97.7%);
  mix-blend-mode:screen;
}
.fx-logo::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:28%;
  background:linear-gradient(100deg,transparent,rgba(255,250,225,.95) 50%,transparent);
  transform:skewX(-25deg);animation:logoSweep 5s ease-in-out 1.5s infinite;
}
@keyframes logoSweep{0%,55%{left:-40%}85%,100%{left:120%}}

/* lampu suar merah di puncak tower */
.fx-beacon{
  position:absolute;left:93%;top:10.2%;width:.5%;aspect-ratio:1;border-radius:50%;
  background:#ff3a3a;box-shadow:0 0 10px 4px rgba(255,50,50,.8),0 0 40px 14px rgba(255,40,40,.35);
  transform:translate(-50%,-50%);animation:beacon 1.8s steps(1) infinite;
}
@keyframes beacon{0%{opacity:1}12%{opacity:.08}100%{opacity:.08}}

/* lampu tiang apron */
.fx-lamp{
  position:absolute;left:var(--x);top:var(--y);width:calc(5% * var(--s,1));aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,250,225,.95) 0 6%,rgba(255,220,150,.35) 22%,transparent 62%);
  animation:twinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--s,1) * -2s);
}
@keyframes twinkle{50%{opacity:.6;transform:translate(-50%,-50%) scale(.9)}}

/* kilau di apron basah */
.fx-reflect{
  position:absolute;left:0;right:0;top:74%;bottom:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 3.5%,rgba(255,220,160,.07) 4.5%,transparent 6%);
  animation:shimmer 9s linear infinite;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 30%);mask:linear-gradient(to bottom,transparent,#000 30%);
}
@keyframes shimmer{to{background-position:240px 0}}

/* pesawat lewat di langit */
.flyby{
  position:fixed;z-index:1;left:100%;top:22vh;width:clamp(46px,4.2vw,84px);color:#1c2540;
  opacity:0;animation:fly 30s linear 3s infinite;pointer-events:none;
}
.flyby svg{display:block;width:100%;filter:drop-shadow(0 0 2px rgba(255,200,140,.4))}
.flyby .trail{
  position:absolute;left:86%;top:42%;width:28vw;height:2px;transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,236,210,.25) 40%,transparent);
  filter:blur(.6px);border-radius:2px;
}
@keyframes fly{
  0%{opacity:0;transform:translate(0,0) rotate(7deg) scale(.7)}
  3%{opacity:.95}
  52%{opacity:.9}
  60%{opacity:0;transform:translate(-125vw,-18vh) rotate(6deg) scale(.5)}
  100%{opacity:0;transform:translate(-125vw,-18vh) rotate(6deg) scale(.5)}
}

/* gradasi agar teks terbaca */
.shade{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,12,28,.62) 0%,rgba(7,12,28,.25) 30%,transparent 48%),
    linear-gradient(180deg,rgba(7,12,28,.55) 0%,transparent 16%,transparent 78%,rgba(7,12,28,.78) 100%);
}
.grain{
  position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(5) infinite;
}
@keyframes grain{20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-1%,3%)}80%{transform:translate(3%,1%)}}

/* =====================================================================
   UI LAYOUT — satu layar penuh
   ===================================================================== */
.ui{
  position:fixed;inset:0;z-index:10;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  padding-top:env(safe-area-inset-top);
}
.ui>*{min-width:0}

/* ---------- top bar ---------- */
.top{display:flex;justify-content:space-between;align-items:center;padding:clamp(12px,2.4vh,26px) var(--pad-x) 0}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:clamp(30px,2.4vw,40px);height:auto;filter:drop-shadow(0 0 12px rgba(255,211,77,.5))}
.brand b{display:block;font:900 clamp(16px,1.3vw,22px)/1 var(--f-head);letter-spacing:.18em}
.brand small{display:block;font:700 10px/1 var(--f-head);letter-spacing:.38em;color:var(--gold);margin-top:4px}
.top-right{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px)}
.sound{
  /* kiri bawah, tepat di atas footer (di area pesawat yang kosong) */
  position:fixed;z-index:20;left:var(--pad-x);bottom:calc(clamp(32px,4.6vh,44px) + 30px);
  display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(9,14,26,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:600 12px var(--f-flap);letter-spacing:.24em;transition:border-color .3s,background .3s;
}
.sound:hover{border-color:var(--gold)}
/* berdenyut halus saat musik menunggu klik pertama */
.sound.nudge{animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(255,211,77,0)}50%{box-shadow:0 0 0 6px rgba(255,211,77,.22);border-color:var(--gold)}}
.sound .bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.sound .bars i{width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .3s}
.sound[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.sound[aria-pressed="true"] .bars i{animation:eq .9s ease-in-out infinite}
.sound[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.3s}
.sound[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.6s}
.sound[aria-pressed="true"] .bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}


/* ---------- jam di top bar ---------- */
.clock{display:flex;align-items:center;gap:8px;font:600 12px var(--f-flap);letter-spacing:.24em;color:var(--ink-dim)}
.clock i{width:7px;height:7px;border-radius:50%;background:var(--go);box-shadow:0 0 10px var(--go);animation:statBlink 1.6s steps(1) infinite}
@keyframes statBlink{50%{opacity:.3}}

/* =====================================================================
   STAGE
   - Hero di kiri atas (langit)
   - Strip simulator ramping di bawah (apron)
   - Tengah & kanan dibiarkan lapang → terminal NEFIA tetap megah
   ===================================================================== */
.stage{
  min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  padding:clamp(10px,2.6vh,34px) var(--pad-x) clamp(8px,1.4vh,14px);
}

/* ---------- hero: kicker + judul (dipertahankan) ---------- */
.hero{flex:none;max-width:min(48vw,900px)}
.kicker{display:flex;align-items:center;gap:12px;font:600 clamp(12px,.95vw,16px) var(--f-head);letter-spacing:.36em;color:var(--gold)}
.kicker span{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--gold);border-radius:50%;font-size:12px;letter-spacing:0}
.title{margin-top:clamp(6px,1.2vh,14px);font-family:var(--f-head);font-weight:900;line-height:.95;letter-spacing:-.005em;
  text-transform:uppercase;white-space:nowrap;font-size:clamp(44px,min(6vw,10.5vh),140px)}
.title>span{display:inline-block;position:relative}
.title .w1{margin-right:.22em;color:transparent;filter:drop-shadow(0 6px 30px rgba(0,0,0,.35));
  background:linear-gradient(100deg,#fff 42%,#fff3cf 50%,#fff 58%);background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;animation:shineTitle 6s ease-in-out 2s infinite}
.title .w1 .ch{color:transparent;background:inherit;-webkit-background-clip:text;background-clip:text}
@keyframes shineTitle{0%,60%{background-position:100% 0}100%{background-position:0 0}}
.title .w2{
  color:transparent;-webkit-text-stroke:2px var(--gold);
  background:linear-gradient(100deg,var(--gold) 0%,var(--sunset) 50%,var(--gold) 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;animation:fillLife 5s ease-in-out infinite;
}
@keyframes fillLife{0%,100%{background-position:100% 0}45%,55%{background-position:0 0}}
.title .w2 .ch{color:inherit;-webkit-text-stroke:inherit;background:inherit;-webkit-background-clip:text;background-clip:text}
/* huruf naik satu per satu (diisi js) */
.title .ch{display:inline-block;transform:translateY(105%);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.title .ch.in{transform:none;opacity:1}


/* tagline + kutipan */
.tagline{display:flex;align-items:center;gap:16px;margin-top:clamp(8px,1.6vh,18px);
  font:italic 400 clamp(22px,min(2.3vw,4.2vh),44px)/1 var(--f-serif);color:#ffe6a6;letter-spacing:.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.quote{position:relative;margin-top:clamp(12px,2.2vh,26px);max-width:min(27vw,500px);padding-left:22px;
  font:400 clamp(13px,min(.95vw,1.9vh),16px)/1.75 var(--f-head);color:rgba(244,241,234,.86);
  border-left:1px solid rgba(255,211,77,.45);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.quote::before{content:"\201C";position:absolute;left:-7px;top:-.5em;font:700 2.4em/1 var(--f-serif);color:var(--gold)}

/* reveal intro */
.hero .kicker,.hero .tagline,.hero .quote{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
body.ready .hero .kicker{opacity:1;transform:none;transition-delay:.1s}
body.ready .hero .tagline{opacity:1;transform:none;transition-delay:.85s}
body.ready .hero .quote{opacity:1;transform:none;transition-delay:1.1s}
.tagline .rule{flex:none;width:clamp(36px,4vw,70px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.tagline .rule{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) 1s}
body.ready .tagline .rule{transform:none}

/* =====================================================================
   KOLEKSI SIMULATOR — kartu melebar yang rapi
   - Teks kiri (nomor, kategori, nama) punya lebar & posisi TETAP,
     jadi tidak bergeser / pindah baris saat kartu melebar.
   - Detail (deskripsi + tombol) hanya fade-in di ruang tambahan kanan,
     setelah kartu selesai melebar.
   ===================================================================== */
/* strip mulai setelah pesawat (kiri bawah foto) supaya pesawat tidak tertutup */
.collection{flex:none;margin-left:clamp(0px,24vw,560px);opacity:0;transition:opacity 1.2s ease .6s}
body.ready .collection{opacity:1}
.col-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(8px,1.2vh,12px)}
.ch-label{font:600 11px var(--f-head);letter-spacing:.4em;color:var(--gold)}
.ch-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,211,77,.5),rgba(255,255,255,.08))}
.ch-count{font:italic 400 17px var(--f-serif);color:var(--ink-dim);white-space:nowrap}
.ch-count b{font-weight:700;color:var(--ink);font-size:21px}
.ch-nav{display:flex;gap:6px}
.ch-nav button{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(9,14,26,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .3s,color .3s}
.ch-nav button:hover{border-color:var(--gold);color:var(--gold)}
.ch-nav svg{width:15px}

.cards{
  --g:clamp(8px,.7vw,12px);--grow:2.9;
  container-type:inline-size;
  display:flex;gap:var(--g);height:clamp(126px,19vh,232px);
}
.card{
  /* lebar satu kartu kecil, dihitung dari lebar strip */
  --u:calc((100cqw - 5 * var(--g)) / (5 + var(--grow)));
  position:relative;flex:1 1 0;min-width:0;border-radius:14px;overflow:hidden;isolation:isolate;outline:none;
  border:1px solid rgba(255,255,255,.16);background:#0a0f1c;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  transition:flex-grow .6s cubic-bezier(.45,.05,.25,1),border-color .4s ease;
}
.card.is-active{flex-grow:var(--grow);border-color:rgba(255,211,77,.65)}
/* muncul satu per satu saat halaman pertama tampil */
.card{opacity:0}
body.ready .card{animation:cardIn .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.75s + var(--d,0) * .11s)}
@keyframes cardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.card:not(.is-active):hover{border-color:rgba(255,255,255,.4)}
.card:focus-visible{border-color:var(--gold)}

/* foto: hanya crossfade, tanpa zoom */
.card-media{position:absolute;inset:0;z-index:-2}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  filter:saturate(.8) brightness(.58);transition:opacity 1s ease,filter .3s ease}
.card-media img.on{opacity:1}
.card.is-active .card-media img{filter:saturate(1.05) brightness(.82)}
.card.is-soon .card-media img{filter:grayscale(.75) brightness(.48)}
.card.is-soon.is-active .card-media img{filter:grayscale(.35) brightness(.68)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,10,22,.6) 0%,transparent 32%,rgba(6,10,22,.3) 52%,rgba(6,10,22,.92) 100%)}
.card.is-active::before{background:
  linear-gradient(180deg,rgba(6,10,22,.6) 0%,transparent 32%,rgba(6,10,22,.3) 52%,rgba(6,10,22,.92) 100%),
  linear-gradient(90deg,transparent 30%,rgba(6,10,22,.55) 100%)}

.card-top{position:absolute;left:12px;right:10px;top:10px;display:flex;justify-content:flex-end;align-items:center;gap:6px}
.num{font:italic 400 clamp(18px,1.35vw,24px)/1 var(--f-serif);color:var(--gold)}
.pill{display:flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;background:rgba(6,10,22,.6);white-space:nowrap;
  border:1px solid rgba(62,240,138,.3);font:600 9.5px var(--f-head);letter-spacing:.2em;text-transform:uppercase;color:#c9f7dc}
.pill i{width:5px;height:5px;border-radius:50%;background:var(--go);box-shadow:0 0 6px var(--go)}
.card.is-soon .pill{color:#ffe1b0;border-color:rgba(255,178,63,.35)}
.card.is-soon .pill i{background:var(--soon);box-shadow:0 0 6px var(--soon)}
/* di kartu kecil pill cukup titik saja; teksnya muncul halus di kartu aktif */
.pill .t{display:inline-block;max-width:0;overflow:hidden;opacity:0;transition:max-width .25s ease,opacity .15s ease}
.card.is-active .pill .t{max-width:90px;opacity:1;transition:max-width .3s ease .1s,opacity .25s ease .15s}
.card:not(.is-active) .pill{gap:0;padding:4px}

.card-text{position:absolute;left:12px;bottom:12px;width:calc(var(--u) - 22px);display:flex;flex-direction:column}
.role{font:600 9px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,230,166,.82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name{margin-top:4px;font:700 clamp(14px,min(1.15vw,2.3vh),22px)/1.12 var(--f-serif);color:#fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 10px rgba(0,0,0,.5)}

.card-foot{position:absolute;left:calc(var(--u) + 2px);right:12px;bottom:12px;top:40px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:clamp(6px,1vh,10px);
  opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}
.card.is-active .card-foot{opacity:1;visibility:visible;transition:opacity .25s ease .2s,visibility 0s linear 0s}
.desc{max-width:420px;font:400 clamp(11.5px,.82vw,14px)/1.4 var(--f-head);color:rgba(244,241,234,.9);text-wrap:balance}
.cta{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 15px;border-radius:99px;white-space:nowrap;
  background:var(--gold);color:var(--navy);font:700 10.5px var(--f-head);letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 8px 22px -8px rgba(255,190,60,.8);transition:background .3s}
.cta svg{width:14px}
.card.is-active:hover .cta{background:#ffe27e}
.card.is-soon .cta{background:rgba(255,255,255,.1);color:#ffe1b0;box-shadow:none;border:1px solid rgba(255,178,63,.35)}

.progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);opacity:0;transition:opacity .4s}
.card.is-active .progress{opacity:1}
.progress i{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(255,178,63,.15),var(--gold) 70%,#fff4cc);box-shadow:0 0 8px rgba(255,190,70,.75)}
.progress i.run{animation:prog var(--dur,3s) linear forwards}
/* kursor di atas kartu → garis (dan rotasi) berhenti sejenak */
.collection:hover .progress i.run{animation-play-state:paused}
@keyframes prog{from{width:0}to{width:100%}}
/* nyala di ujung garis (seperti lens flare) */
.progress i::before,.progress i::after{content:"";position:absolute;top:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .3s}
.progress i.run::before,.progress i.run::after{opacity:1}
.progress i::after{right:-28px;width:56px;height:20px;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,#fff 0%,#fff 8%,rgba(255,240,190,.95) 20%,rgba(255,190,70,.65) 42%,transparent 72%)}
.progress i::before{right:-90px;width:180px;height:3px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,236,190,.9) 50%,transparent);filter:blur(.4px)}
.go{display:none}

/* =====================================================================
   BOTTOM — lampu landasan + pengumuman
   ===================================================================== */
.bottom{padding-bottom:env(safe-area-inset-bottom)}
.runway{display:flex;justify-content:space-between;padding:0 var(--pad-x);height:10px;align-items:center}
.runway i{width:5px;height:5px;border-radius:50%;background:#ffe9a8;opacity:.15;animation:chase 2.4s linear infinite;animation-delay:calc(var(--k) * -0.05s * -1)}
.runway i:nth-child(6n){background:#ff5b5b}
@keyframes chase{0%{opacity:1;box-shadow:0 0 10px 3px rgba(255,220,140,.9)}18%{opacity:.15;box-shadow:none}100%{opacity:.15}}
.ticker{display:flex;align-items:center;height:clamp(32px,4.6vh,44px);margin-top:6px;background:rgba(7,12,26,.72);border-top:1px solid rgba(255,211,77,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tk-label{flex:none;display:flex;align-items:center;gap:8px;height:100%;padding:0 18px 0 var(--pad-x);background:var(--gold);color:var(--navy);
  font:700 12px var(--f-flap);letter-spacing:.28em;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.tk-label i{width:7px;height:7px;border-radius:50%;background:var(--navy);animation:statBlink 1s steps(1) infinite}
.tk-mask{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tk-track{display:flex;width:max-content;animation:ticker 60s linear infinite}
.tk-track span{display:flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;font:500 clamp(12px,.9vw,15px) var(--f-flap);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.tk-track span::after{content:"✈";color:var(--gold)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* =====================================================================
   SAMBUTAN — tombol "Mulai Perjalanan" (klik pertama = musik menyala)
   ===================================================================== */
.welcome{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;text-align:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(7,12,28,.62),rgba(7,12,28,.82));
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  transition:opacity .9s ease,backdrop-filter .9s ease,-webkit-backdrop-filter .9s ease}
.welcome[hidden]{display:none}
.welcome.leaving{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);pointer-events:none}
.wl-inner{display:flex;flex-direction:column;align-items:center;animation:wlIn 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes wlIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.wl-kicker{display:flex;align-items:center;gap:14px;font:600 clamp(10px,.8vw,12px) var(--f-head);letter-spacing:.45em;color:var(--gold)}
.wl-kicker span{width:clamp(24px,4vw,56px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.wl-kicker span:last-child{transform:scaleX(-1)}
.wl-title{margin-top:16px;font:800 clamp(22px,4.6vw,66px)/1.08 var(--f-head);white-space:nowrap;letter-spacing:-.01em;color:#fff}
.wl-title em{font:italic 400 1.05em var(--f-serif);color:#ffe6a6}
.wl-sub{display:flex;align-items:center;gap:10px;margin-top:14px;font:400 clamp(13px,1vw,16px) var(--f-head);color:var(--ink-dim)}
.wl-sub svg{width:20px;color:var(--gold)}

.wl-btn{position:relative;display:inline-flex;align-items:center;gap:18px;margin-top:clamp(26px,4.5vh,44px);
  padding:9px 34px 9px 9px;border-radius:999px;color:var(--navy);font:800 clamp(13px,1vw,16px) var(--f-head);letter-spacing:.22em;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) -150% 0/250% 100% no-repeat,
             linear-gradient(135deg,#ffe58a,#ffc247 55%,#ff9f3d);
  box-shadow:0 14px 40px -10px rgba(255,180,60,.75),inset 0 1px 0 rgba(255,255,255,.6);
  animation:wlShine 3.2s ease-in-out 1.2s infinite;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
@keyframes wlShine{0%,55%{background-position:-150% 0,0 0}100%{background-position:250% 0,0 0}}
.wl-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 50px -10px rgba(255,170,60,.95),inset 0 1px 0 rgba(255,255,255,.6)}
.wl-btn:active{transform:translateY(0) scale(.98)}
.wl-btn:focus-visible{outline:2px solid #fff;outline-offset:6px}
.wl-ring{position:absolute;inset:-7px;border-radius:999px;border:1.5px solid rgba(255,211,77,.7);pointer-events:none;animation:wlPing 2.6s ease-out infinite}
.wl-ring.r2{animation-delay:1.3s}
@keyframes wlPing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.5)}}
.wl-ico{display:grid;place-items:center;width:clamp(42px,3.4vw,52px);aspect-ratio:1;border-radius:50%;background:var(--navy);color:var(--gold);overflow:hidden}
.wl-ico svg{width:52%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wl-btn:hover .wl-ico svg{transform:translate(3px,-3px) rotate(-8deg)}
.wl-btn.go .wl-ico svg{transform:translate(60px,-40px) rotate(-15deg);transition-duration:.6s}
.wl-skip{margin-top:20px;font:400 13px var(--f-head);color:var(--ink-dim);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.25);transition:color .3s}
.wl-skip:hover{color:var(--ink)}
@media (max-width:560px){.wl-kicker{letter-spacing:.25em;font-size:10px}.wl-kicker span{display:none}}

/* =====================================================================
   BOARDING PASS
   ===================================================================== */
.pass-wrap{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;pointer-events:none;visibility:hidden}
.pass-wrap::before{content:"";position:absolute;inset:0;background:rgba(5,9,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
.pass-wrap.on{visibility:visible;pointer-events:auto}
.pass-wrap.on::before{opacity:1}
.pass{
  position:relative;display:grid;grid-template-columns:1fr auto;width:min(640px,100%);color:#1a1f2b;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
  transform:translateY(60px) rotate(-6deg) scale(.85);opacity:0;transition:transform .7s cubic-bezier(.2,1.4,.3,1),opacity .4s;
}
.pass-wrap.on .pass{transform:rotate(-1.5deg);opacity:1}
.pass-main,.pass-stub{background:#fbf7ee;position:relative}
.pass-main{padding:22px 26px;border-radius:16px 0 0 16px;
  -webkit-mask:radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat}
.pass-stub{width:clamp(110px,22vw,150px);padding:22px 18px;border-radius:0 16px 16px 0;border-left:2px dashed #c9c2b2;display:flex;flex-direction:column;align-items:center;text-align:center;
  -webkit-mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat;
  transition:transform .8s cubic-bezier(.5,0,.3,1),opacity .8s}
.pass.torn .pass-stub{transform:translate(70px,50px) rotate(18deg);opacity:0}
.pm-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #e3dccb}
.pm-brand{display:flex;align-items:center;gap:8px;font:800 18px var(--f-display);letter-spacing:.2em;color:#0b1424}
.pm-brand svg{width:22px;color:var(--gold-2)}
.pm-type{font:700 12px var(--f-flap);letter-spacing:.3em;color:#8a826f}
.pm-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:16px 0}
.pm-route small,.pm-grid small,.pass-stub small{display:block;font:600 10px var(--f-flap);letter-spacing:.24em;color:#8a826f}
.pm-route b{display:block;font:900 clamp(34px,6vw,50px)/1 var(--f-display);color:#0b1424;letter-spacing:.02em}
.pm-route span{font-size:12px;color:#5b5648}
.pm-to{text-align:right}
.pm-plane{width:44px;color:var(--gold-2)}
.pm-plane svg{width:100%}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px}
.pm-grid b{font:700 18px var(--f-flap);letter-spacing:.06em;color:#0b1424}
.pass-stub b{font:900 44px/1 var(--f-display);color:#0b1424;margin:4px 0 14px}
.barcode{flex:1;width:100%;min-height:90px;background:repeating-linear-gradient(90deg,#0b1424 0 2px,transparent 2px 4px)}
.stub-code{margin-top:10px}
.stamp{
  position:absolute;right:20px;bottom:18px;padding:6px 14px;border:3px solid #1aa860;border-radius:8px;color:#1aa860;
  font:800 24px var(--f-display);letter-spacing:.14em;transform:rotate(-14deg) scale(2.4);opacity:0;mix-blend-mode:multiply;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;
}
.stamp.soon{border-color:#d9822b;color:#d9822b}
.stamp.on{transform:rotate(-14deg) scale(1);opacity:.9}
.pass-flash{position:absolute;inset:0;background:#fff7e0;opacity:0;pointer-events:none;transition:opacity .45s}
.pass-wrap.go .pass{transform:translateY(-30px) rotate(0) scale(1.05);transition:transform .5s ease}
.pass-wrap.go .pass-flash{opacity:1}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* layar 4:3 / 3:2 — geser foto sedikit agar tulisan NEFIA tidak tertutup teks */
/* layar sempit: strip kembali selebar layar agar kartu tidak terlalu kecil */
@media (max-width:1200px) and (min-width:861px){
  .collection{margin-left:0}
  .sound{bottom:calc(clamp(32px,4.6vh,44px) + clamp(126px,19vh,232px) + 84px)}
}
@media (max-aspect-ratio:3/2) and (min-width:861px){
  .scene{left:calc(50% + 6vw)}
  .quote{max-width:min(24vw,420px)}
}
@media (max-width:860px){
  body{overflow:auto}
  .sound{bottom:calc(16px + env(safe-area-inset-bottom));padding:9px 14px;box-shadow:0 8px 24px -8px rgba(0,0,0,.6);background:rgba(9,14,26,.7)}
  .ui{position:relative;min-height:100svh}
  .stage{gap:28px}
  .hero{max-width:none}
  .title{font-size:clamp(40px,12vw,90px)}
  .quote{max-width:none}
  .ch-nav{display:none}
  .collection{margin-left:0}
  .ch-count{display:none}
  /* HP: grid 2 kolom, kartu tetap (tidak melebar) */
  .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;height:auto;container-type:normal}
  .card,.card.is-active{height:clamp(150px,40vw,230px);border-color:rgba(255,255,255,.16)}
  .card .card-media img,.card.is-active .card-media img{filter:saturate(.95) brightness(.72)}
  .card.is-soon .card-media img,.card.is-soon.is-active .card-media img{filter:grayscale(.6) brightness(.55)}
  .card.is-active::before{background:linear-gradient(180deg,rgba(6,10,22,.45) 0%,transparent 35%,rgba(6,10,22,.9) 100%)}
  .card-top{left:auto;right:10px;top:10px}
  .card:not(.is-active) .pill,.pill{gap:6px;padding:4px 11px}
  .pill,.pill .t{max-width:none;opacity:1;font:500 12px var(--f-head);letter-spacing:.02em;text-transform:none}
  .card-text{left:12px;right:52px;bottom:12px;top:auto;width:auto}
  .role{font:500 10px var(--f-head);letter-spacing:.1em;white-space:normal}
  .name{font:500 clamp(13.5px,3.5vw,17px)/1.25 var(--f-head);letter-spacing:0;-webkit-line-clamp:3}
  .card-foot,.card.is-active .card-foot,.progress{display:none}
  .go{display:grid;place-items:center;position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(6,10,22,.25)}
  .go svg{width:16px}
  .card:active .go{background:var(--gold);border-color:var(--gold);color:var(--navy)}
  .card.is-soon .go{opacity:.45}
}
@media (max-width:560px){
  .clock{display:none}
  .pm-grid{grid-template-columns:repeat(2,1fr)}
  .pass{grid-template-columns:1fr}
  .pass-main{border-radius:16px;-webkit-mask:none;mask:none}
  .pass-stub{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .flyby{display:none}
}