/*
   Plak kartı (snippets/vinyl-stage.liquid · assets/vinyl.js).
   Sahne 5:4; kapak solda kare, plak arkasında %30'u görünür. Üzerine gelince (ya da çalarken)
   kapak sola kayar, plak dışarı çıkıp döner. Plak tamamen CSS: renk --vc-color, etiket kapak
   görseli (--vc-label), oluklar radyal desen, parlama dönmeyen ayrı katmanda (ışık sabit kalır).
*/
/* kart zemini ve çerçevesi yok: kapak ve plak sayfa zemininde durur */
.nk .card--vinyl,.nk .card--vinyl .card-img-wrap{overflow:visible}
.nk .card--vinyl .card-img-wrap{padding:0;border:none;border-radius:0;background:none;box-shadow:none}
/* yatay kaydırmalı raylar (overflow-x) dikeyde de keser: gölgelere yer aç, kaymayı negatif payla geri al */
.nccar__track:has(.card--vinyl),.grid--carousel:has(.card--vinyl){padding:28px 16px 44px;margin:-28px -16px -44px;scroll-padding-inline:16px}
.nk .vc{position:relative;aspect-ratio:5/4;width:100%;isolation:isolate}

/* ---------- plak ---------- */
.nk .vc-disc{position:absolute;z-index:1;left:26%;top:12.5%;width:60%;aspect-ratio:1;border-radius:50%;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.25);
  transition:transform .8s cubic-bezier(.2,.75,.15,1)}
.nk .vc-disc__spin{position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.055) 0 1px,rgba(0,0,0,.09) 1px 2.5px),
    radial-gradient(circle at 50% 50%,transparent 0 31%,rgba(0,0,0,.25) 31.5% 33%,transparent 33.5% 95%,rgba(255,255,255,.12) 96%,transparent 98%),
    var(--vc-color,#151515);
  animation:vc-spin var(--vc-rev,1.8s) linear infinite;animation-play-state:paused}
/* gerçek plak görseli (eski projeden, renk başına): oluk ve parlaklık görselde; etiket boşluğu %35,8 → kapak altta */
.nk .vc--tex .vc-disc__spin{background:var(--vc-tex) center/100% no-repeat}
.nk .vc--tex .vc-disc{box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.nk .vc--tex .vc-disc::after{opacity:.55}
/* etiket: kapak görseli küçük daire; ortada mil deliği */
.nk .vc-disc__spin::before{content:"";position:absolute;inset:32%;border-radius:50%;
  background:var(--vc-label,none) center/cover no-repeat,#e9e4da;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.nk .vc-disc__spin::after{content:"";position:absolute;left:50%;top:50%;width:4%;height:4%;margin:-2% 0 0 -2%;border-radius:50%;
  background:#f6f3ec;box-shadow:inset 0 1px 1px rgba(0,0,0,.45)}
/* sabit ışık yansıması */
.nk .vc-disc::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.2) 12%,transparent 18% 50%,rgba(255,255,255,.14) 62%,transparent 68%);
  -webkit-mask:radial-gradient(circle,transparent 0 33.5%,#000 34%);mask:radial-gradient(circle,transparent 0 33.5%,#000 34%)}
@keyframes vc-spin{to{transform:rotate(360deg)}}

/* ---------- kapak ---------- */
.nk .vc-sleeve{position:absolute;z-index:2;left:4%;top:10%;width:64%;aspect-ratio:1;border-radius:4px;overflow:hidden;background:#efece6;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 2px 2px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.08),0 16px 16px rgba(0,0,0,.08),0 32px 32px -8px rgba(0,0,0,.12);
  transition:transform .8s cubic-bezier(.2,.75,.15,1),box-shadow .8s}
.nk .vc-sleeve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 2. görsel (kapak mockup'ı): kapak şeffaf tuvalin ortasında %57,8 — ortadan büyütüp kadraja al */
.nk .vc--mock .vc-sleeve img{transform:scale(1.73)}
.nk .vc--mock .vc-disc__spin::before{background-size:173%}
/* karton kenarı + hafif parlaklık */
.nk .vc-sleeve::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 38%,transparent 70%,rgba(0,0,0,.06));box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.nk .vc-sleeve__title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12%;text-align:center;font-weight:600;font-size:14px;line-height:1.3;color:var(--ink)}

/* ---------- açılış: üzerine gelince ya da çalarken ---------- */
.nk .vc.is-playing .vc-sleeve{transform:translateX(-6%) rotate(-1deg);
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.08),0 16px 16px rgba(0,0,0,.08),-2px 18px 40px 6px rgba(0,0,0,.16)}
.nk .vc.is-playing .vc-disc{transform:translateX(16.5%)}
.nk .vc.is-playing .vc-disc__spin{animation-play-state:running}
@media (hover:hover){
  .nk .card--vinyl:hover .vc-sleeve,.nk .card--vinyl:focus-visible .vc-sleeve{transform:translateX(-6%) rotate(-1deg);
    box-shadow:0 1px 1px rgba(0,0,0,.08),0 4px 4px rgba(0,0,0,.08),0 16px 16px rgba(0,0,0,.08),-2px 18px 40px 6px rgba(0,0,0,.16)}
  .nk .card--vinyl:hover .vc-disc,.nk .card--vinyl:focus-visible .vc-disc{transform:translateX(16.5%)}
  .nk .card--vinyl:hover .vc-disc__spin{animation-play-state:running}
}

/* ---------- Dinle / Çalıyor ---------- */
.nk .vc-play{position:absolute;z-index:3;left:calc(4% + 10px);bottom:calc(10% + 10px);display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px 6px 9px;border:0;border-radius:999px;cursor:pointer;font:500 12px/1 inherit;letter-spacing:.02em;color:#fff;
  background:rgba(17,17,17,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s,transform .8s cubic-bezier(.2,.75,.15,1)}
.nk .vc-play:hover{background:rgba(17,17,17,.85)}
.nk .vc-play:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nk .vc.is-playing .vc-play{transform:translateX(-6%)}
@media (hover:hover){.nk .card--vinyl:hover .vc-play{transform:translateX(-6%)}}
.nk .vc-play__icon{display:inline-flex}
.nk .vc-play__on,.nk .vc-play__eq,.nk .vc-play__tap{display:none}
/* tarayıcı sesi engelledi: plak döner, düğme "Sesi aç" der ve hafifçe nabız atar */
.nk .vc.is-blocked .vc-play__idle{display:none}
.nk .vc.is-blocked .vc-play__tap{display:inline}
.nk .vc.is-blocked .vc-play{animation:vc-pulse 1.4s ease-in-out infinite}
@keyframes vc-pulse{0%,100%{box-shadow:0 0 0 0 rgba(17,17,17,.35)}50%{box-shadow:0 0 0 6px rgba(17,17,17,0)}}
.nk .vc.is-audible .vc-play__idle,.nk .vc.is-audible .vc-play__icon{display:none}
.nk .vc.is-audible .vc-play__on{display:inline}
.nk .vc.is-audible .vc-play__eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.nk .vc-play__eq i{width:2px;height:100%;background:currentColor;border-radius:1px;transform-origin:bottom;animation:vc-eq .9s ease-in-out infinite}
.nk .vc-play__eq i:nth-child(2){animation-delay:-.3s}
.nk .vc-play__eq i:nth-child(3){animation-delay:-.6s}
.nk .vc-play__eq i:nth-child(4){animation-delay:-.15s}
@keyframes vc-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ---------- devir ---------- */
.nk .vc-rpm{position:absolute;z-index:3;right:5%;top:4%;font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink,#111);opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s}
.nk .vc.is-playing .vc-rpm{opacity:.55;transform:none}
@media (hover:hover){.nk .card--vinyl:hover .vc-rpm{opacity:.55;transform:none}}

/* hızlı sepete ekle: plak kartında kapağın altını kapatmasın, alt şeritte ince dursun */
.nk .card--vinyl .card-quick{left:auto;right:12px;bottom:12px;z-index:4}
.nk .card--vinyl .card-quick .btn{width:auto;padding:9px 14px;font-size:12px}

@media (prefers-reduced-motion:reduce){
  .nk .vc-disc__spin,.nk .vc-play__eq i,.nk .vc.is-blocked .vc-play{animation:none}
  .nk .vc-disc,.nk .vc-sleeve,.nk .vc-play{transition-duration:.01s}
}

/* ---------- şarkı listesi (snippets/tracklist · ürün sayfası, "Sepete ekle" üstü) ---------- */
.tl{position:relative;margin:4px 0 22px;border:1px solid var(--line,#e6e2da);border-radius:14px;background:#fff;overflow:hidden}
.tl input.tl__toggle{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;opacity:0!important;pointer-events:none;-webkit-appearance:none;appearance:none}
.tl__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line,#e6e2da);background:linear-gradient(#faf8f4,#fff)}
.tl__eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--ink,#111)}
.tl__count{font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--muted,#8a857c)}
.tl__body{padding:6px 18px 12px}
.tl__side + .tl__side{margin-top:6px;border-top:1px dashed var(--line,#e6e2da);padding-top:4px}
.tl__side-name{display:inline-block;margin:10px 0 2px;padding:4px 8px;border-radius:999px;background:#f3efe7;font:600 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#111)}
.tl__list{list-style:none;margin:0;padding:0}
.tl__row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dotted #e9e5dd;font-size:14px;line-height:1.35}
.tl__row:last-child{border-bottom:0}
.tl__num{font:500 11px/1 var(--mono,ui-monospace,monospace);color:var(--muted,#8a857c);letter-spacing:.04em}
.tl__title{color:var(--ink,#111);font-weight:500}
.tl__artist{color:var(--muted,#8a857c);font-size:13px;text-align:right;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl--long .tl__body{max-height:330px;overflow:hidden;-webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent);transition:max-height .4s}
.tl__toggle:checked ~ .tl__body{max-height:2400px;-webkit-mask:none;mask:none}
.tl__more{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-top:1px solid var(--line,#e6e2da);font-size:13px;font-weight:600;color:var(--ink,#111);cursor:pointer;user-select:none}
.tl__more:hover{background:#faf8f4}
.tl__more-close{display:none}
.tl__toggle:checked ~ .tl__more .tl__more-open{display:none}
.tl__toggle:checked ~ .tl__more .tl__more-close{display:inline}
.tl__toggle:checked ~ .tl__more svg{transform:rotate(180deg)}
.tl__toggle:focus-visible ~ .tl__more{outline:2px solid var(--ink,#111);outline-offset:-2px}

/* ---------- ürün sayfası plak sahnesi (galeri yerine) ---------- */
.nk .pdp-vinyl{position:relative}
.nk .pdp-vinyl .vc{aspect-ratio:5/4}
.nk .pdp-vinyl .vc-play{font-size:14px;padding:9px 16px 9px 13px;gap:9px;left:calc(4% + 16px);bottom:calc(10% + 16px)}
.nk .pdp-vinyl .vc-play__icon svg{width:12px;height:14px}
.nk .pdp-vinyl .vc-play__eq{height:14px}
.nk .pdp-vinyl .vc-rpm{font-size:11px}
.nk .pdp-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.nk .pdp-thumbs .gallery-cell{width:72px;height:72px;padding:0;border:1px solid var(--line,#e6e2da);border-radius:10px;overflow:hidden;background:#faf8f4;cursor:zoom-in;grid-column:auto;grid-row:auto;aspect-ratio:auto}
.nk .pdp-thumbs .gallery-cell img{width:100%;height:100%;object-fit:cover}
.nk .pdp-thumbs .gallery-zoom{display:none}

/* plak ürün sayfası
   ≥1280: üç kolon — sahne + oynatıcı | başlık, fiyat, sepete ekle | şarkı listesi (sahne ve liste kaydırırken görünür kalır)
   1025–1279: iki kolon — sahne solda, sağda önce sepet sonra liste; <1025: tek kolon (sahne, sepet, liste) */
.nk .pdp--record .pdp-media{max-width:620px;width:100%;margin-inline:auto}
.nk .pdp--record .pdp-thumbs .gallery-cell{width:60px;height:60px}
@media (min-width:1025px){
  .nk .pdp--record{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);padding-left:var(--side)}
  .nk .pdp--record .pdp-media{position:sticky;top:96px}
  .nk .pdp--record.has-tracks{grid-template-areas:"media info" "media tracks";grid-template-rows:auto 1fr;row-gap:28px}
  .nk .pdp--record.has-tracks .pdp-media{grid-area:media}
  .nk .pdp--record.has-tracks .pdp-info{grid-area:info}
  .nk .pdp--record.has-tracks .pdp-tracks{grid-area:tracks;padding-left:8px}
}
@media (min-width:1280px){
  .nk .pdp--record.has-tracks{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) minmax(0,.86fr);grid-template-areas:"media info tracks";grid-template-rows:auto;gap:clamp(32px,3vw,52px)}
  .nk .pdp--record.has-tracks .pdp-tracks{position:sticky;top:96px;padding-left:0}
  .nk .pdp--record.has-tracks .pdp-tracks .tl{margin:0}
  .nk .pdp--record.has-tracks .pdp-info .add-row-price{display:none}
}

/* ---------- önizleme oynatıcısı (snippets/vinyl-player) ---------- */
.nk .vp{--p:0;--vp-ink:var(--ink,#15171c);--vp-acc:var(--c-sale,#d9622b);position:relative;display:flex;align-items:center;gap:16px;margin:6px 0 0;padding:14px 18px 14px 14px;
  border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 40px -30px rgba(0,0,0,.45);transition:border-color .3s,box-shadow .3s}
.nk .vp.is-audible{border-color:rgba(0,0,0,.14);box-shadow:0 22px 44px -28px rgba(0,0,0,.5)}
.nk .vp__btn{position:relative;flex:none;display:grid;place-items:center;width:58px;height:58px;padding:0;border:0;border-radius:50%;
  background:var(--vp-ink);color:#fff;cursor:pointer;transition:transform .2s,background .2s}
.nk .vp__btn:hover{transform:scale(1.05)}
.nk .vp__btn:focus-visible{outline:2px solid var(--vp-acc);outline-offset:3px}
.nk .vp__ico{grid-area:1/1;transition:opacity .2s,transform .2s}
.nk .vp__ico--play{margin-left:3px}
.nk .vp__ico--pause{opacity:0;transform:scale(.6)}
.nk .vp.is-audible .vp__ico--play{opacity:0;transform:scale(.6)}
.nk .vp.is-audible .vp__ico--pause{opacity:1;transform:none}
.nk .vp__ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);transform:rotate(-90deg);pointer-events:none}
.nk .vp__ring circle{fill:none;stroke:var(--vp-acc);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p) * 100);opacity:0;transition:stroke-dashoffset .3s linear,opacity .3s}
.nk .vp.is-audible .vp__ring circle{opacity:1}
/* engellendi: tarayıcı sesi açmak için bir tıklama bekliyor */
.nk .vp.is-blocked .vp__btn{background:var(--vp-acc);animation:vp-nudge 1.4s ease-in-out infinite}
@keyframes vp-nudge{50%{box-shadow:0 0 0 8px rgba(217,98,43,0)}0%{box-shadow:0 0 0 0 rgba(217,98,43,.45)}}
.nk .vp__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.nk .vp__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.nk .vp__title{display:flex;flex-direction:column;gap:3px;min-width:0}
.nk .vp__s{display:none;font-weight:600;font-size:15px;color:var(--vp-ink)}
.nk .vp__s--idle{display:block}
.nk .vp.is-audible .vp__s--idle,.nk .vp.is-blocked .vp__s--idle{display:none}
.nk .vp.is-audible .vp__s--on,.nk .vp.is-blocked .vp__s--blocked{display:block}
.nk .vp.is-blocked .vp__s--blocked{color:var(--vp-acc)}
.nk .vp__title small{font-size:12.5px;color:var(--muted,#6f6a62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nk .vp__time{flex:none;font:500 11.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;color:var(--muted,#6f6a62);font-variant-numeric:tabular-nums}
.nk .vp__sep{margin:0 4px;opacity:.5}
.nk .vp__wave{position:relative;height:30px;cursor:pointer}
.nk .vp__bars{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:2px}
.nk .vp__bars i{flex:1;max-width:4px;height:calc(var(--h) * 1px);border-radius:2px;background:rgba(0,0,0,.14);transform-origin:center}
.nk .vp__bars--fill{clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0);transition:clip-path .3s linear}
.nk .vp__bars--fill i{background:var(--vp-ink)}
.nk .vp__wave:hover .vp__bars:not(.vp__bars--fill) i{background:rgba(0,0,0,.24)}
.nk .vp.is-audible .vp__bars--fill i{animation:vp-beat .8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -53ms)}
@keyframes vp-beat{from{transform:scaleY(.72)}to{transform:scaleY(1)}}
/* oynatıcı varken sahnedeki küçük "Dinle" etiketi gereksiz */
.nk .pdp-media:has(.vp) .pdp-vinyl .vc-play{display:none}
@media (prefers-reduced-motion:reduce){.nk .vp.is-audible .vp__bars--fill i,.nk .vp.is-blocked .vp__btn{animation:none}}
@media (max-width:640px){
  .nk .vp{gap:13px;padding:12px 14px 12px 12px}
  .nk .vp__btn{width:50px;height:50px}
}