*{box-sizing:border-box;margin:0}
:root{--bg:#121212;--card:#1f1f1f;--txt:#f5f5f7;--mut:#98989d;--line:rgba(255,255,255,.12);--red:#fa2d48;--red2:#ff5d74;--tint:#271e0f}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--txt);font:400 1rem/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,Arial,sans-serif;padding-bottom:120px}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:3px solid var(--red2);outline-offset:2px}
svg{display:block}

/* header */
.nav{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:1.5rem;padding:.75rem 2rem;background:rgba(30,30,32,.72);backdrop-filter:saturate(180%) blur(24px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.1rem;letter-spacing:-.01em}.lg{width:30px;height:30px;object-fit:contain;display:block}
.nav nav{display:flex;gap:1.4rem;margin:0 auto;font-size:.92rem;color:#c7c7cc}.nav nav a{transition:color .2s}.nav nav a:hover{color:#fff}
.srch{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.12);border-radius:8px;padding:.35rem .7rem;color:var(--mut)}
#q{background:none;border:0;color:#fff;font:inherit;font-size:.9rem;width:140px}#q:focus{outline:none}

/* hero banner */
.hero{position:relative;height:clamp(360px,64vh,580px);display:flex;align-items:flex-end}
.himg{position:absolute;inset:0;background:url(../images/Cover.jpg) center 40%/cover}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 30%),linear-gradient(transparent 35%,var(--tint))}
.hn{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:0 2rem 1.6rem}
h1{font-size:clamp(3rem,9vw,6rem);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.sub{color:#d1d1d6;margin-top:.3rem}

.body{background:linear-gradient(var(--tint),var(--bg) 360px)}
.wrap{max-width:1200px;margin:0 auto;padding:0 2rem 3rem}
.acts{display:flex;gap:.7rem;padding:1.3rem 0 .2rem}
.pb,.sb{display:flex;align-items:center;gap:.5rem;border-radius:999px;padding:.65rem 1.8rem;font-weight:600;min-width:130px;justify-content:center;transition:transform .15s,background .2s}
.pb{background:var(--red);color:#fff}.pb:hover{background:#ff4560;transform:scale(1.05)}
.sb{background:rgba(255,255,255,.14);color:var(--red2)}.sb:hover{background:rgba(255,255,255,.22);transform:scale(1.05)}
.shelf{margin-top:2.4rem}
h2{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;margin-bottom:1rem}
h3{font-size:1rem;font-weight:600;margin:1rem 0 .5rem}
.track{display:flex;gap:1.1rem;overflow-x:auto;padding:.4rem .2rem 1rem;scroll-snap-type:x proximity;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}

/* Up Next (cover art) */
.wide{position:relative;display:flex;align-items:center;gap:1.4rem;width:min(100%,640px);padding:1.1rem;border-radius:18px;overflow:hidden;text-align:left;background:var(--card);transition:transform .25s,box-shadow .25s}
.wide:hover{transform:scale(1.015);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.wbg{position:absolute;inset:-30px;background:url(../images/cover-thumb.jpg) center/cover;filter:blur(28px) brightness(.45);transform:scale(1.1)}
.wide>img{position:relative;z-index:1;width:170px;height:170px;border-radius:14px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.55);transition:transform .3s}
.wide:hover>img{transform:scale(1.04) rotate(-1deg)}
.wt{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column}.wt small{color:#d1d1d6;font-size:.8rem}.wt b{font-size:1.6rem}.wt em{font-style:normal;color:#d1d1d6}
.wide i{position:relative;z-index:1;flex:none;width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:1.5rem;transition:transform .2s}.wide:hover i{transform:scale(1.12)}

/* songs list */
#list{list-style:none;padding:0}
.t{display:grid;grid-template-columns:32px 1fr 130px 50px;gap:1rem;align-items:center;padding:.5rem 1rem;border-radius:6px;cursor:pointer;color:var(--mut);transition:background .2s}
.t:hover{background:rgba(255,255,255,.1)}
.no{text-align:center}.t:hover .no{font-size:0}.t:hover .no::before{content:"\25B6";font-size:.85rem;color:#fff}
.tn{display:flex;align-items:center;gap:1rem;min-width:0}.tn img{width:44px;height:44px;border-radius:6px;object-fit:cover;transition:transform .25s}.t:hover .tn img{transform:scale(1.08)}
.tn b{display:block;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tn small{font-size:.85rem}
.t.on .tn b,.t.on .no{color:var(--red2)}.t.on .no{font-size:0}.t.on .no::before{content:"\266B";font-size:1rem;color:var(--red2)}
.ico{display:flex;gap:.35rem;opacity:0;transition:opacity .2s}.t:hover .ico{opacity:1}.ico img{width:22px;height:22px;border-radius:5px;display:block;transition:transform .15s}.ico a:hover img{transform:scale(1.2)}
.dur{text-align:right;font-size:.9rem}
.see{color:var(--mut);font-weight:700;font-size:.9rem;padding:.9rem 1rem;transition:color .2s}.see:hover{color:#fff}.see[hidden]{display:none}

/* playlist cards */
.card{flex:0 0 170px;padding:.9rem;border-radius:10px;text-align:left;scroll-snap-align:start;transition:background .25s,transform .25s}
.card:hover{background:#2a2a2a;transform:translateY(-4px)}
.card .ci{display:block;overflow:hidden;border-radius:8px;margin-bottom:.7rem;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .35s}.card:hover img{transform:scale(1.07)}
.card b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card small{color:var(--mut)}

.ph{flex:0 0 320px;height:180px;border-radius:14px;overflow:hidden;scroll-snap-align:start;transition:transform .25s,box-shadow .25s}.ph:hover{box-shadow:0 12px 28px rgba(0,0,0,.55)}.ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.ph:hover img{transform:scale(1.06)}

/* about */
.about{display:flex;gap:1.6rem;align-items:center;background:var(--card);border-radius:18px;padding:1.2rem}
.about>img{width:300px;height:200px;object-fit:cover;border-radius:14px;flex:none}
.about p{color:#c7c7cc;max-width:38rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{display:flex;align-items:center;gap:.4rem;background:#2a2a2c;border-radius:999px;padding:.25rem .8rem .25rem .3rem;font-size:.85rem;transition:transform .2s,background .2s}
.chips a:hover{background:#3a3a3c;transform:translateY(-2px) scale(1.04)}.chips img{width:22px;height:22px;border-radius:6px}

#cForm{display:grid;gap:.8rem;max-width:520px;margin-bottom:1.2rem}
#cForm input:not(.hp),#cForm textarea{background:var(--card);border:1px solid var(--line);border-radius:12px;color:#fff;padding:.8rem 1rem;font:inherit}
#cForm input:focus,#cForm textarea:focus{border-color:var(--red2);outline:none}
.hp{position:absolute;left:-9999px}
.send{justify-self:start;background:var(--red);color:#fff;font-weight:600;border-radius:999px;padding:.7rem 2rem;transition:transform .2s,background .2s}.send:hover{background:#ff4560;transform:scale(1.05)}
#cStatus{min-height:1.5em;color:var(--mut)}#cStatus.err{color:#ff8a8a}
footer{margin:3.5rem 0 0;color:var(--mut);font-size:.85rem;text-align:center}footer p{margin-top:.3rem}footer a:hover{color:#fff;text-decoration:underline}

/* floating player */
.player{position:fixed;left:50%;translate:-50% 0;bottom:16px;z-index:40;width:min(94vw,780px);display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;background:rgba(44,44,46,.8);backdrop-filter:saturate(180%) blur(30px);border:1px solid var(--line);border-radius:20px;box-shadow:0 14px 50px rgba(0,0,0,.6)}
.player[hidden]{display:none}.player>img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.pn{flex:1;min-width:0;display:flex;flex-direction:column}.pn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pn small{color:var(--mut);font-size:.8rem}
.bar{height:4px;border-radius:4px;background:rgba(255,255,255,.2);margin-top:.4rem}.bar i{display:block;height:100%;width:0;background:var(--red);border-radius:4px}
.pc{display:flex;align-items:center;gap:.5rem;font-size:1.3rem}.pc button{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;transition:background .2s,transform .15s}.pc button:hover{background:rgba(255,255,255,.18)}
.pc .pp{background:var(--red);color:#fff}.pc .pp:hover{background:#ff4560;transform:scale(1.08)}
.lks{display:none;gap:.3rem;flex-wrap:wrap;max-width:300px;justify-content:flex-end}.lks.show{display:flex}
.lks a{display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.12);border-radius:999px;padding:.2rem .6rem .2rem .25rem;font-size:.75rem;transition:background .2s}.lks a:hover{background:rgba(255,255,255,.25)}.lks img{width:18px;height:18px;border-radius:4px}
#lb{border:0;background:transparent;max-width:96vw;padding:0;overflow:visible}#lb::backdrop{background:rgba(0,0,0,.92)}
#lb img{max-width:96vw;max-height:88vh;border-radius:14px;display:block;margin:auto}
#lb .x{position:fixed;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;background:#fff;color:#000;font-size:1.6rem}

@media(max-width:820px){
 .nav{padding:.6rem 1rem;gap:.8rem}.nav nav a:nth-child(2),.nav nav a:nth-child(4){display:none}.nav nav{gap:1rem;margin:0 auto 0 0}.srch{display:none}
 .hero{height:340px}.hn{padding:0 1rem 1.2rem}.wrap{padding:0 1rem 2rem}
 .t{grid-template-columns:24px 1fr 46px}.t .ico{display:none}
 .acts .pb,.acts .sb{flex:1;min-width:0}
 .wide>img{width:110px;height:110px}.wbg{inset:-20px}.wt b{font-size:1.25rem}
 .about{flex-direction:column;align-items:stretch}.about>img{width:100%;height:190px}
 .player{flex-wrap:wrap;bottom:10px}.lks.show{max-width:none;width:100%;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* playlist click scrolls to a visible heading */
.shelf{scroll-margin-top:84px}
.lsub{color:var(--mut);margin:-.6rem 0 1rem}.lsub:empty{display:none}
/* contact: form + picture */
.cgrid{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:2rem;align-items:stretch}
.cleft{min-width:0}.cleft #cForm{margin-bottom:1.2rem}
.cimg{width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.45)}
/* player close button */
.pclose{position:absolute;top:-12px;right:-8px;width:28px;height:28px;border-radius:50%;background:#2c2c2e;border:1px solid var(--line);color:#fff;font-size:1.2rem;line-height:1;display:grid;place-items:center;transition:background .2s,transform .15s}
.pclose:hover{background:var(--red);transform:scale(1.1)}
@media(max-width:820px){.cgrid{grid-template-columns:1fr}.cimg{height:260px;min-height:0}.pclose{top:-10px;right:-4px}}

/* round image buttons: Play and Shuffle (symbols only) */
.acts{gap:1.2rem;align-items:center;padding-top:1.6rem}
.acts .pb,.acts .sb{width:88px;height:88px;min-width:0;flex:none;padding:0;border-radius:50%;background:none;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s}
.acts .pb:hover,.acts .sb:hover{background:none;transform:scale(1.1);box-shadow:0 10px 24px rgba(0,0,0,.55)}
.acts .pb img,.acts .sb img{width:100%;height:100%;display:block}

/* About: square cover so the artist name and album title show in full */
.about>img.acover{width:280px;height:280px;aspect-ratio:1/1;object-fit:cover;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.5);flex:none}
/* player: streaming icons always visible */
.lks a{padding:.2rem}.lks img{width:22px;height:22px}
@media(max-width:820px){.about>img.acover{width:min(100%,340px);height:auto;margin:0 auto}}
@media(max-width:820px){.acts .pb,.acts .sb{width:72px;height:72px}}

/* About Yesu Yeni (blurred cover background, like Up Next) */
.abt{position:relative;overflow:hidden;border-radius:18px;padding:2.2rem;background:var(--card);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.abt-in{position:relative;z-index:1;max-width:62rem}
.abt-in p{font-size:1.1rem;line-height:1.75;color:#f2f2f7;margin-bottom:1rem}.abt-in p:last-child{margin-bottom:0}
.abt-in strong{color:#fff;letter-spacing:.03em}
@media(max-width:820px){.abt{padding:1.3rem}.abt-in p{font-size:1rem}}

/* About Yesu Yeni: darker, calmer background so the text is easy to read */
.abt .wbg{filter:blur(36px) brightness(.3) saturate(1.15);transform:scale(1.15)}
.abt::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 100% 0%,rgba(233,180,76,.2),transparent 50%),linear-gradient(135deg,rgba(16,11,4,.86),rgba(20,14,6,.7) 55%,rgba(39,30,15,.82))}
.abt-in{border-left:3px solid var(--red);padding-left:1.4rem}
.abt-in p{color:#fff;font-weight:500;line-height:1.8;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.abt-in strong{color:#ffd9a0}
@media(max-width:820px){.abt-in{padding-left:1rem}}