.references-page{padding:90px 0 120px}.references-page .ny-breadcrumbs{margin-bottom:55px}.references-hero{display:grid;grid-template-columns:1fr auto;gap:70px;align-items:end}.references-hero h1{margin:18px 0 24px;font-size:clamp(52px,7vw,88px);line-height:.96;letter-spacing:-5px}.references-hero h1 em{color:var(--cyan);font-style:normal}.references-hero p{max-width:690px;color:#91a0b9;font-size:15px;line-height:1.8}.references-count{display:flex;align-items:center;gap:18px;padding:24px 28px;border:1px solid #263956;border-radius:16px;background:linear-gradient(145deg,#0b1529,#080d19)}.references-count strong{color:var(--cyan);font-size:44px;line-height:1}.references-count span{color:#8190a9;font-size:9px;line-height:1.5;letter-spacing:1px;text-transform:uppercase}.references-toolbar{display:flex;justify-content:space-between;align-items:center;margin:65px 0 24px;padding-bottom:18px;border-bottom:1px solid var(--line);color:#697995;font-size:9px;letter-spacing:1.2px}.references-toolbar div{display:flex;align-items:center;gap:9px;color:#b9c6d9}.references-toolbar i,.reference-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#23f19c;box-shadow:0 0 12px #23f19c}.references-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.reference-card{position:relative;display:flex;flex-direction:column;min-height:330px;padding:24px;border:1px solid #23334f;border-radius:17px;background:radial-gradient(circle at 88% 4%,#12e7ff12,transparent 34%),linear-gradient(150deg,#0d1629,#070d19);overflow:hidden;transition:.28s}.reference-card:hover{transform:translateY(-6px);border-color:#12e7ff88;box-shadow:0 22px 45px #0007}.reference-logo{display:flex;align-items:center;height:66px;margin-bottom:24px}.reference-logo img{width:auto;max-width:150px;height:62px;object-fit:contain;object-position:left center}.reference-logo span{display:grid;place-items:center;width:54px;height:54px;border:1px solid #2c5f81;border-radius:13px;color:var(--cyan);background:#0a1d31;font-size:25px;font-weight:900}.reference-logo i{width:3px;margin-left:4px;border-radius:4px;background:linear-gradient(var(--cyan),#2476ff)}.reference-logo i:nth-of-type(1){height:16px;margin-left:12px}.reference-logo i:nth-of-type(2){height:31px}.reference-logo i:nth-of-type(3){height:21px}.reference-status{position:absolute;top:25px;right:22px;display:flex;align-items:center;gap:7px;color:#687a94;font-size:7px;letter-spacing:1px}.reference-status i{width:5px;height:5px}.reference-card h2{margin:0 0 6px;color:#f1f6ff;font-size:21px;line-height:1.25;letter-spacing:-.4px}.reference-username{margin:0;color:#63728c;font:9px/1.5 monospace}.reference-location{margin:15px 0 0;color:#8290a8;font-size:10px;line-height:1.55}.reference-actions{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:25px}.reference-listen{display:flex;justify-content:space-between;align-items:center;flex:1;padding:11px 12px;border:1px solid #28425f;border-radius:9px;color:#c9d7eb;font-size:9px;font-weight:900;transition:.2s}.reference-listen span{color:var(--cyan);font-size:8px}.reference-listen:hover{color:#06111b;background:var(--cyan);border-color:var(--cyan)}.reference-listen:hover span{color:#06111b}.reference-site{display:grid;place-items:center;width:38px;height:38px;border:1px solid #28425f;border-radius:9px;color:var(--cyan)}.references-pagination{display:flex;justify-content:center;gap:7px;margin-top:45px}.references-pagination .page-numbers{display:grid;place-items:center;min-width:38px;height:38px;padding:0 12px;border:1px solid #263750;border-radius:9px;color:#8fa0ba;font-size:10px}.references-pagination .current,.references-pagination .page-numbers:hover{color:#06111c;background:var(--cyan);border-color:var(--cyan)}
@media(max-width:1050px){.references-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.references-hero{grid-template-columns:1fr}.references-count{justify-self:start}.references-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.references-page{padding-top:60px}.references-hero h1{font-size:49px;letter-spacing:-3px}.references-toolbar{align-items:flex-start;gap:10px;flex-direction:column}.references-grid{grid-template-columns:1fr}.reference-card{min-height:310px}.references-count{padding:18px 22px}}
.reference-actions{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7px}.reference-listen,.reference-preview{display:flex;justify-content:space-between;align-items:center;min-width:0;padding:11px 10px;border:1px solid #28425f;border-radius:9px;color:#c9d7eb;background:transparent;font-size:8px;font-weight:900;line-height:1;cursor:pointer;transition:.2s}.reference-listen span,.reference-preview span{color:var(--cyan);font-size:8px}.reference-listen:hover,.reference-preview:hover,.reference-preview.is-playing{color:#06111b;background:var(--cyan);border-color:var(--cyan)}.reference-listen:hover span,.reference-preview:hover span,.reference-preview.is-playing span{color:#06111b}.reference-preview.is-playing span{animation:referencePulse .8s infinite alternate}.reference-site{grid-column:1/-1;width:100%;height:34px}.reference-modal[hidden]{display:none}.reference-modal{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;padding:22px;background:#020611d9;backdrop-filter:blur(10px)}.reference-modal-panel{position:relative;width:min(500px,100%);padding:38px;border:1px solid #2a4967;border-radius:20px;background:radial-gradient(circle at 85% 0,#12e7ff1c,transparent 35%),#091223;box-shadow:0 35px 90px #000b}.reference-modal-close{position:absolute;top:14px;right:15px;display:grid;place-items:center;width:34px;height:34px;border:1px solid #2b3e5a;border-radius:50%;color:#91a1ba;background:#0a1425;font-size:20px;cursor:pointer}.reference-modal-icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:25px;border:1px solid #2f7594;border-radius:50%;color:var(--cyan);background:#0a2032;font-size:22px;box-shadow:0 0 25px #12e7ff18}.reference-modal-panel h2{margin:14px 0 10px;color:#f3f7ff;font-size:29px;line-height:1.15}.reference-modal-panel p{color:#91a0b8;font-size:14px;line-height:1.7}.reference-modal-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}.reference-modal-site,.reference-modal-dismiss{padding:12px 15px;border:1px solid #2b465f;border-radius:9px;font-size:9px;font-weight:900;cursor:pointer}.reference-modal-site{color:#06111b;background:var(--cyan);border-color:var(--cyan)}.reference-modal-dismiss{color:#b7c5d8;background:transparent}.reference-modal-note{display:block;margin-top:14px;color:#65758d;font-size:9px}.reference-modal-open{overflow:hidden}@keyframes referencePulse{to{opacity:.35}}
@media(max-width:520px){.reference-modal-panel{padding:30px 24px}.reference-modal-panel h2{font-size:25px}}
.reference-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}.reference-filters a{--genre:var(--cyan);padding:9px 12px;border:1px solid #293953;border-radius:99px;color:#8493aa;background:#09101e;font-size:8px;font-weight:800;letter-spacing:.65px;transition:.2s}.reference-filters a:hover,.reference-filters a.is-active{color:#07101c;background:var(--genre);border-color:var(--genre);box-shadow:0 0 20px color-mix(in srgb,var(--genre) 24%,transparent);transform:translateY(-2px)}.reference-card{--genre:#12e7ff;background:radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--genre) 11%,transparent),transparent 34%),linear-gradient(150deg,#0d1629,#070d19)}.reference-card:hover{border-color:color-mix(in srgb,var(--genre) 70%,#263750);box-shadow:0 22px 45px #0007,0 0 25px color-mix(in srgb,var(--genre) 10%,transparent)}.reference-genre{align-self:flex-start;margin:0 0 12px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--genre) 35%,#263750);border-radius:99px;color:var(--genre);background:color-mix(in srgb,var(--genre) 8%,transparent);font-size:7px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}.reference-card .reference-logo span{color:var(--genre);border-color:color-mix(in srgb,var(--genre) 45%,#23405c);background:color-mix(in srgb,var(--genre) 8%,#0a1728)}.reference-card .reference-logo i{background:linear-gradient(var(--genre),#2476ff)}.reference-card .reference-listen span,.reference-card .reference-preview span,.reference-card .reference-site{color:var(--genre)}.reference-card .reference-listen:hover,.reference-card .reference-preview:hover,.reference-card .reference-preview.is-playing{background:var(--genre);border-color:var(--genre)}.genre-karisik,.genre-filter-karisik{--genre:#12e7ff}.genre-pop,.genre-filter-pop{--genre:#ff4fa3}.genre-slow,.genre-filter-slow{--genre:#a879ff}.genre-arabesk,.genre-filter-arabesk{--genre:#ffb43b}.genre-tasavvuf,.genre-filter-tasavvuf{--genre:#42d69b}.genre-haber-spor,.genre-filter-haber-spor{--genre:#ff5f57}.genre-yabanci,.genre-filter-yabanci{--genre:#4f8cff}.genre-tsm,.genre-filter-tsm{--genre:#e98a9f}.genre-thm-ozgun,.genre-filter-thm-ozgun{--genre:#f28c45}.genre-rap-hiphop,.genre-filter-rap-hiphop{--genre:#a9e84a}.genre-yoresel,.genre-filter-yoresel{--genre:#31c9bd}.genre-nostalji,.genre-filter-nostalji{--genre:#c58bff}
@media(max-width:520px){.reference-filters{gap:6px}.reference-filters a{padding:8px 10px;font-size:7px}}
.reference-embed{display:flex;justify-content:space-between;align-items:center;min-width:0;padding:11px 10px;border:1px solid color-mix(in srgb,var(--genre) 36%,#28425f);border-radius:9px;color:#c9d7eb;background:color-mix(in srgb,var(--genre) 6%,transparent);font-size:8px;font-weight:900;line-height:1;cursor:pointer;transition:.2s}.reference-embed span{color:var(--genre);font:800 9px/1 monospace}.reference-embed:hover{color:#06111b;background:var(--genre);border-color:var(--genre)}.reference-embed:hover span{color:#06111b}.reference-card:not(:has(.reference-site)) .reference-embed{grid-column:1/-1}.reference-player-modal[hidden]{display:none}.reference-player-modal{position:fixed;z-index:100001;inset:0;display:grid;place-items:center;padding:22px;background:#020611e8;backdrop-filter:blur(12px)}.reference-player-panel{position:relative;width:min(900px,100%);max-height:calc(100vh - 44px);padding:36px;border:1px solid #294662;border-radius:22px;background:radial-gradient(circle at 90% 0,#12e7ff17,transparent 36%),#08111f;box-shadow:0 40px 110px #000d;overflow:auto}.reference-player-close{position:absolute;top:15px;right:16px;display:grid;place-items:center;width:36px;height:36px;border:1px solid #2b3e5a;border-radius:50%;color:#9babc2;background:#0a1425;font-size:21px;cursor:pointer}.reference-player-panel h2{margin:14px 0 8px;color:#f4f8ff;font-size:31px;letter-spacing:-.7px}.reference-player-panel>p{margin:0 0 22px;color:#8999b2;font-size:13px;line-height:1.65}.reference-player-preview{padding:8px;border:1px solid #1e3852;border-radius:24px;background:#030712}.reference-player-preview iframe{display:block;width:100%;height:250px;border:0;border-radius:18px;background:transparent}.reference-player-panel label{display:block;margin:23px 0 8px;color:#d5e1f2;font-size:9px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}.reference-player-code-row{display:grid;grid-template-columns:1fr auto;gap:8px}.reference-player-code-row textarea{min-height:82px;padding:13px;border:1px solid #263b56;border-radius:10px;color:#91ddea;background:#050b16;font:9px/1.55 monospace;resize:none}.reference-player-copy{align-self:stretch;padding:0 18px;border:0;border-radius:10px;color:#04101a;background:var(--cyan);font-size:9px;font-weight:900;cursor:pointer}.reference-player-copy.is-copied{background:#2ce9a5}.reference-player-panel>small{display:block;margin-top:10px;color:#5f7089;font-size:8px}@media(max-width:600px){.reference-player-modal{padding:10px}.reference-player-panel{padding:29px 18px 22px}.reference-player-panel h2{padding-right:30px;font-size:24px}.reference-player-preview{padding:4px}.reference-player-preview iframe{height:250px}.reference-player-code-row{grid-template-columns:1fr}.reference-player-copy{min-height:42px}.reference-player-code-row textarea{min-height:105px}}