/* ARUNIKA — fitur sinematik: hero, kabut, cuaca, awan, ambient, favorit, summit */
.h1-sub{display:block;font:italic 300 clamp(1rem,2.4vw,1.9rem)/1.3 var(--serif);letter-spacing:.18em;text-transform:uppercase;margin-top:1.1rem;color:#E8D9B0}
.fog{position:absolute;inset:auto -20% 0;height:55%;pointer-events:none;z-index:1;opacity:.5;
  background:radial-gradient(60% 60% at 30% 70%,rgba(255,255,255,.28),transparent 70%),radial-gradient(50% 50% at 75% 60%,rgba(255,255,255,.2),transparent 70%);filter:blur(18px);animation:fogdrift 38s linear infinite alternate}
.fog-b{height:40%;opacity:.35;animation-duration:55s;animation-direction:alternate-reverse}
@keyframes fogdrift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.hero-copy,.hero-edition,.hero-geo,.compass-hero{z-index:3}

/* panel gelap sinematik */
.weather,.ambient,.mylist{background:#14161A;color:#EDEAE4;padding:clamp(4rem,10vw,8rem) var(--pad)}
.weather .search select{background:transparent;color:inherit;border:0;border-bottom:1px solid rgba(255,255,255,.4);padding:.5rem 1.5rem .5rem 0;font:inherit}
.weather .search select option{color:#111}
.wx{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2.5rem}
.wx .v{font:300 clamp(2rem,5vw,3.6rem)/1 var(--serif)}
.wx .k{display:block;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#D7C49E;margin-bottom:.6rem}
.wx-meta{grid-column:1/-1;color:#9a9a9a;font-size:.88rem;margin:0}
.wx-state{grid-column:1/-1;margin:0;color:#c9c4b8}
.clouds{position:relative;min-height:90svh;overflow:hidden;display:grid;place-items:center;text-align:center;color:#fff;background:#14161A}
.clouds-bg{position:absolute;inset:0}.clouds-bg img{width:100%;height:100%;object-fit:cover;transition:filter 2.4s ease,transform 18s ease-out}
.clouds-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,16,.7),rgba(10,12,16,.15) 60%,rgba(10,12,16,.45))}
.clouds[data-mood=sunrise] .clouds-bg img{filter:saturate(1.1) brightness(1.02) sepia(.2)}
.clouds[data-mood=sunset] .clouds-bg img{filter:saturate(1.35) brightness(.78) sepia(.55) hue-rotate(-18deg)}
.clouds.in-view .clouds-bg img{transform:scale(1.08)}
.clouds-copy{position:relative;z-index:2;max-width:46ch;padding:0 var(--pad)}
.clouds-copy .tabs{justify-content:center;margin-top:1.6rem}.clouds-copy .tabs button{color:rgba(255,255,255,.7)}
.clouds-copy .tabs button.on,.clouds-copy .tabs button:hover{color:#fff;border-color:#fff}
.amb{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:rgba(255,255,255,.12)}
.amb-i{background:#14161A;padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;min-height:150px}
.amb-i h3{font-size:1.25rem}.amb-i small{color:#9a9a9a}
.amb-i.on{background:rgba(215,196,158,.1);box-shadow:inset 0 0 0 1px rgba(215,196,158,.45)}
.amb-i button,.fav-btn,.amb-i a{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:inherit;padding:.5rem 1.1rem;border-radius:999px;text-decoration:none;font-size:.92rem;backdrop-filter:blur(10px)}
.amb-i button:hover,.amb-i a:hover{background:rgba(255,255,255,.18)}
.amb-i input[type=range]{width:100%;accent-color:#D7C49E}
.amb-msg{min-height:1.6em;margin:1.5rem 0 0;color:#D7C49E}
.fav-btn{position:absolute;top:.7rem;right:.7rem;z-index:2;width:40px;height:40px;padding:0;display:grid;place-items:center;color:#fff;background:rgba(20,22,26,.45)}
.fav-btn[aria-pressed=true]{color:#D7C49E;border-color:#D7C49E}
.m .fig{position:relative}
.fav-list{display:flex;flex-wrap:wrap;gap:.8rem 1rem;margin-top:2rem}
.fav-list .empty-s{color:#9a9a9a;margin:0}
.fav-chip{display:inline-flex;gap:.8rem;align-items:center;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.4rem .5rem .4rem 1.1rem}
.fav-chip button{background:none;border:0;color:inherit}.fav-chip .x{opacity:.7}
#summit{position:fixed;inset:0;z-index:200;background:#0b0d10;overflow:hidden;color:#fff;opacity:0;transition:opacity 1s}
#summit.open{opacity:1}
.sm-img{position:absolute;inset:0;transform:scale(1);transition:transform 14s cubic-bezier(.2,.6,.2,1)}
.sm-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.45)}
#summit.open .sm-img{transform:scale(1.35) translateY(4%)}
#summit.open .sm-img img{animation:dawn 12s forwards}
@keyframes dawn{to{filter:brightness(1) sepia(.15)}}
.sm-sun{position:absolute;left:50%;top:42%;width:60vmin;height:60vmin;translate:-50% -50%;background:radial-gradient(circle,rgba(255,214,140,.7),transparent 65%);opacity:0;transition:opacity 8s 3s}
#summit.open .sm-sun{opacity:1}
.sm-title{position:absolute;left:0;right:0;top:46%;text-align:center;font-size:clamp(2.6rem,11vw,9rem);letter-spacing:.3em;margin-right:-.3em;opacity:0;transition:opacity 3s 6s}
#summit.open .sm-title{opacity:1}
.sm-bar{position:absolute;left:0;right:0;bottom:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;z-index:3}
@media(max-width:720px){.wx{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.fog,.sm-img,#summit.open .sm-img img{animation:none;transition:none}.sm-title,.sm-sun{transition:none}}

#miniPlayer{position:fixed;left:50%;bottom:1rem;translate:-50% 0;z-index:60;width:min(94vw,360px);color:#fff;background:rgba(24,26,30,.55);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.25);border-radius:26px;box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3);overflow:hidden}
.mp-bar{display:flex;align-items:center;gap:.3rem;padding:.55rem .7rem .55rem 1.1rem}
.mp-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}.mp-info b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-info small{color:#cfcfcf}
.mp-bar button,#mpMute{background:none;border:0;color:inherit;width:38px;height:38px;border-radius:50%;font-size:1rem}.mp-bar button:hover{background:rgba(255,255,255,.15)}
#mpMute{width:auto;padding:0 .7rem;font-size:.85rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;height:30px}
#mpPlay.load{animation:mpl 1s infinite}@keyframes mpl{50%{opacity:.4}}
.mp-more{max-height:0;overflow:hidden;padding:0 1rem;transition:max-height .4s,padding .4s}
#miniPlayer.open .mp-more{max-height:460px;padding:0 1rem 1rem}
#mpFrame,#mpFrame iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:14px}
.mp-more input[type=range]{width:100%;accent-color:#D7C49E}.mp-row{display:flex;gap:.8rem;align-items:center;font-size:.85rem}.mp-row input{flex:1}
#mpMsg{margin:.4rem 0 0;font-size:.85rem;color:#D7C49E}#mpMsg a{color:#fff}
#toTop{bottom:5.5rem}

#mpArt{width:40px;height:40px;border-radius:10px;object-fit:cover;margin-right:.6rem}
.mp-eq{display:none;gap:2px;align-items:flex-end;height:16px;margin-right:.4rem}.mp-eq i{width:3px;height:30%;background:#D7C49E;animation:eq 1s ease-in-out infinite}.mp-eq i:nth-child(2){animation-delay:.2s}.mp-eq i:nth-child(3){animation-delay:.4s}
#miniPlayer.playing .mp-eq{display:flex}@keyframes eq{50%{height:100%}}
@media(min-width:721px){#miniPlayer{left:auto;right:1.5rem;translate:none}#toTop{bottom:1.5rem;right:auto;left:1.5rem}}
@media(max-width:720px){#miniPlayer{bottom:.6rem}}
@media(prefers-reduced-motion:reduce){.mp-eq i{animation:none;height:60%}}

/* Perbaikan mobile: kapsul navbar tidak boleh melebarkan kolom grid header (tombol tema sempat keluar layar) */
@media (max-width:720px){
  #top,#top.scrolled{grid-template-columns:minmax(0,1fr) auto}
  #top #nav{min-width:0;max-width:100%}
}

/* Tombol "Enter Experience" (elemen button) harus mengikuti gaya .btn.line, bukan latar putih bawaan browser */
button.btn.line{background:transparent;border:1px solid rgba(255,255,255,.7);color:inherit}
button.btn.line:hover{background:rgba(255,255,255,.14)}

/* Mountain Weather v2 */
.wx{display:block;position:relative;overflow:hidden;isolation:isolate;padding:2rem 0}
.wx-ctl{display:flex;gap:1.4rem;align-items:flex-end}.wx-ctl .more-link{color:#D7C49E}.wx-ctl .more-link:disabled{opacity:.5;cursor:wait}
.wx-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.6rem;margin-bottom:2rem}.wx-now .v{font:300 clamp(3.4rem,10vw,6.5rem)/1 var(--serif)}.wx-cond{font:italic 300 1.6rem var(--serif);color:#E8D9B0}
.wx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2rem}.wx .v.s{font:300 1.7rem/1.1 var(--serif)}.wx small{display:block;color:#9a9a9a}
.wx-hours{display:flex;gap:1px;list-style:none;padding:0;margin:2.2rem 0 0;background:rgba(255,255,255,.12);overflow-x:auto}.wx-hours li{flex:1 0 110px;background:#14161A;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem}.wx-hours b{font-weight:500;color:#D7C49E}.wx-hours span{font:300 1.5rem var(--serif)}
.wx-meta{color:#9a9a9a;font-size:.86rem;margin:1rem 0 0}.wx-note{margin-top:1.4rem}
.wx::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none}
.wx[data-sky=cloud]::before,.wx[data-sky=fog]::before{background:radial-gradient(50% 60% at 20% 30%,rgba(255,255,255,.1),transparent 70%),radial-gradient(40% 50% at 80% 50%,rgba(255,255,255,.08),transparent 70%);animation:fogdrift 40s linear infinite alternate}
.wx[data-sky=clear]::before{background:radial-gradient(40% 50% at 85% 0%,rgba(255,214,140,.22),transparent 70%)}
.wx[data-sky=rain]::before,.wx[data-sky=storm]::before{background:repeating-linear-gradient(100deg,rgba(255,255,255,.12) 0 1px,transparent 1px 22px);background-size:120px 120px;animation:rainfall .8s linear infinite}
.wx[data-sky=storm]::before{animation-duration:.55s;background-color:rgba(60,70,100,.12)}
@keyframes rainfall{to{background-position:-30px 120px}}
@media(max-width:720px){.wx-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.wx::before{animation:none!important}}

/* Ambient tabs */
.amb-tabs{margin:0 0 1.6rem;color:#9a9a9a}.amb-tabs button{color:#9a9a9a}.amb-tabs button.on,.amb-tabs button:hover{color:#fff;border-color:#fff}
.amb-i[hidden]{display:none}

/* Mini-player: compact -> expanded, gerak pegas ala macOS (transform/opacity/blur, tanpa lompatan layout) */
#miniPlayer{transform-origin:100% 100%;width:min(94vw,320px);border-radius:26px;transition:width .6s cubic-bezier(.32,1.2,.4,1),border-radius .6s cubic-bezier(.32,1.2,.4,1),box-shadow .4s;will-change:width}
#miniPlayer::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(140,195,255,.1))}
#miniPlayer.open{width:min(94vw,380px);border-radius:30px;box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
#mpArt{transition:width .6s cubic-bezier(.32,1.2,.4,1),height .6s cubic-bezier(.32,1.2,.4,1),border-radius .6s}
#miniPlayer.open #mpArt{width:52px;height:52px;border-radius:14px}
#mpExp{transition:transform .5s cubic-bezier(.32,1.2,.4,1)}#miniPlayer.open #mpExp{transform:rotate(180deg)}
.mp-more{max-height:0;padding:0 1rem;overflow:hidden;transition:max-height .6s cubic-bezier(.32,1.1,.4,1),padding .5s cubic-bezier(.32,1.1,.4,1)}
#miniPlayer.open .mp-more{max-height:520px;padding:0 1rem 1.1rem}
.mp-inner>*{opacity:0;transform:translateY(12px) scale(.97);filter:blur(6px);transition:opacity .22s ease,transform .22s ease,filter .22s ease}
#miniPlayer.open .mp-inner>*{opacity:1;transform:none;filter:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.32,1.2,.4,1),filter .45s;transition-delay:calc(var(--i,0)*60ms + 90ms)}
.mp-inner>:nth-child(1){--i:0}.mp-inner>:nth-child(2){--i:1}.mp-inner>:nth-child(3){--i:2}.mp-inner>:nth-child(4){--i:3}.mp-inner>:nth-child(5){--i:4}
#mpFrame,#mpFrame iframe{width:100%;height:200px;min-height:200px;aspect-ratio:auto;border-radius:16px;background:#000}
.mp-ctl{display:flex;justify-content:center;gap:1.2rem;margin:.4rem 0}.mp-ctl button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:inherit;width:44px;height:44px;border-radius:50%}.mp-ctl button:hover{background:rgba(255,255,255,.2)}
@media(prefers-reduced-motion:reduce){#miniPlayer,#mpArt,#mpExp,.mp-more,.mp-inner>*{transition:none!important}.mp-inner>*{filter:none;transform:none}}

/* Cuaca: kartu kaca, ikon, prakiraan harian */
.wx{padding:2rem;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 18px 50px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25)}
.wx-ico{font-style:normal;margin-right:.3rem}
.wx-hours{scroll-snap-type:x proximity}.wx-hours li{scroll-snap-align:start;background:transparent}.wx-hours{background:none;gap:.6rem}.wx-hours li{border:1px solid rgba(255,255,255,.14);border-radius:16px}
.wx-days{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem}.wx-days li{padding:.8rem 1rem;border-radius:16px;background:rgba(255,255,255,.05);display:flex;flex-direction:column}.wx-days b{font-weight:500;color:#D7C49E}.wx-days span{font:300 1.25rem var(--serif)}
.wx[data-sky=clear]{background-image:linear-gradient(135deg,rgba(255,200,120,.14),rgba(255,255,255,.02))}.wx[data-sky=rain],.wx[data-sky=storm]{background-image:linear-gradient(135deg,rgba(80,110,160,.22),rgba(255,255,255,.02))}
@media(max-width:720px){.wx{padding:1.2rem;border-radius:22px}}

#mpLyr{display:inline-block;margin-top:.5rem;font-size:.88rem;color:#D7C49E;text-decoration:underline;text-underline-offset:3px}