/* radyoloop.com (#535/#537) — Suat'ın onaylı taslağının kaynağı (radyo-loop-site-kaynak: r.css, d.html, m.html) birebir:
   renk, boşluk, yerleşim. Telefon ölçüleri m.html'den (719 px ve altı). Bu sürümde olmayan bölümlerin
   (İstek Hattı, Sohbet, yayın akışı, son çalanlar) stilleri alınmadı. Hareket azaltma ayarında efekt yok. */
* { box-sizing: border-box; }
:root { --bg: #0d0b1a; --pan: #16132a; --pan2: #1e1a38; --ln: #2c2750; --mor: #a66bff; --cam: #32d4ff; --pem: #ff6fb5;
  --yz: #e9effd; --sol: #9a96b8; --sari: #ffd23f; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--yz); font-family: "DejaVu Sans", Arial, sans-serif; font-size: 15px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img.px { image-rendering: pixelated; }
.w { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* Üst menü */
.ust { position: sticky; top: 0; z-index: 20; background: var(--bg); }
nav.menu-cubugu { display: flex; align-items: center; gap: 26px; padding: 16px 0; border-bottom: 2px solid var(--ln); }
nav.menu-cubugu .ust-logo img { height: 38px; width: auto; display: block; }
nav.menu-cubugu a, nav.menu-cubugu .yakinda { color: var(--sol); font-size: 14px; font-weight: 700; }
nav.menu-cubugu a.on { color: var(--yz); }
nav.menu-cubugu .yakinda small { color: var(--mor); font-size: 12px; font-weight: 800; letter-spacing: 1px; margin-left: 4px; }
nav .sp { flex: 1; }
.menu { display: contents; }
.menu-dugme { display: none; background: none; border: 0; color: var(--yz); font-size: 22px; padding: 0 4px; cursor: pointer; min-height: 44px; min-width: 44px; }
/* Kaydırınca büyük logo küçülür, küçük logo menüye oturur */
.ust-logo { transition: opacity .25s, transform .25s; }
body:not(.kucuk-logo) .ust-logo { opacity: 0; transform: scale(.6); }
.btn { background: var(--mor); color: #140f26 !important; font-weight: 800; padding: 9px 16px; font-size: 13px; box-shadow: 4px 4px 0 #5a35a0; }

/* Karşılama */
.hero { display: grid; grid-template-columns: 330px 1fr; gap: 44px; align-items: center; padding: 44px 0 36px; }
.buyuk-logo { position: relative; width: 330px; aspect-ratio: 112 / 86; transform-origin: 50% 0; will-change: transform; }
.buyuk-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Katmanlı derinlik (çalmıyorken): arkadaki iki renkli kopya yavaşça kayar */
.buyuk-logo .katman-3 { filter: brightness(0) saturate(100%) invert(62%) sepia(55%) saturate(2000%) hue-rotate(290deg); opacity: .5; transform: translate(7px, 7px); }
.buyuk-logo .katman-2 { filter: brightness(0) saturate(100%) invert(72%) sepia(60%) saturate(1500%) hue-rotate(160deg); opacity: .5; transform: translate(3px, 3px); }
.buyuk-logo.derinlik .katman-3 { animation: derin3 4.5s ease-in-out infinite; }
.buyuk-logo.derinlik .katman-2 { animation: derin2 4.5s ease-in-out infinite; }
@keyframes derin3 { 0%, 100% { transform: translate(7px, 7px); } 50% { transform: translate(-6px, 9px); } }
@keyframes derin2 { 0%, 100% { transform: translate(3px, 3px); } 50% { transform: translate(-3px, 5px); } }
.buyuk-logo .katman-1 { transform: scale(var(--nabiz, 1)); transition: transform .08s linear; }
.live { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: var(--pem); }
.live i { width: 10px; height: 10px; background: var(--pem); display: inline-block; }
h1 { font-size: 40px; line-height: 1.1; margin: 12px 0 6px; font-weight: 800; overflow-wrap: anywhere; }
.art { font-size: 19px; color: var(--cam); font-weight: 700; overflow-wrap: anywhere; }
.play { display: flex; align-items: center; gap: 20px; margin-top: 26px; }
.play b { font-size: 18px; }
.pb { width: 86px; height: 86px; background: var(--cam); box-shadow: 6px 6px 0 #14779a; display: flex; align-items: center;
  justify-content: center; border: 0; padding: 0; cursor: pointer; flex: none; }
.pb::after { content: ""; border-left: 30px solid #06202b; border-top: 19px solid transparent; border-bottom: 19px solid transparent; margin-left: 8px; }
.pb.s { width: 46px; height: 46px; box-shadow: 3px 3px 0 #14779a; }
.pb.s::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
.pb.caliyor::after { width: 26px; height: 34px; border: 0; margin: 0; background: linear-gradient(90deg, #06202b 0 35%, transparent 35% 65%, #06202b 65%); }
.pb.s.caliyor::after { width: 14px; height: 18px; }
.pb:disabled { opacity: .45; cursor: not-allowed; }
.pb:focus-visible, nav a:focus-visible, .menu-dugme:focus-visible { outline: 3px solid var(--sari); outline-offset: 3px; }
.sub { color: var(--sol); font-size: 13.5px; }
.eq { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 26px; }
.eq b { width: 12px; display: block; height: var(--h); transition: height .08s linear; }
.eq b:nth-child(3n+1) { background: #a66bff; } .eq b:nth-child(3n+2) { background: #32d4ff; } .eq b:nth-child(3n) { background: #ff6fb5; }
.eq.calar-acik b { height: calc(var(--y, .3) * 54px); }

/* Bölümler */
.sec { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; color: var(--mor); margin: 0 0 14px; display: flex; justify-content: space-between; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tek { grid-template-columns: 1fr; }
.p { background: var(--pan); border: 2px solid var(--ln); padding: 22px; }
.row { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ln); }
.row.f { border-top: 0; }
.row .n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.row .n b { display: block; font-size: 15px; }
.row .n span { color: var(--sol); font-size: 13px; }
.cv { width: 40px; height: 40px; flex: none; background: linear-gradient(135deg, #a66bff 50%, #32d4ff 50%); background-size: cover; background-position: center; }
.tag { font-size: 11px; font-weight: 800; padding: 3px 8px; background: var(--pan2); color: var(--cam); flex: none; }
.tarih { width: 58px; text-align: center; background: var(--pan2); padding: 6px 0; flex: none; }
.tarih b { font-size: 19px; color: var(--cam); }
.tarih .sub { font-size: 11px; }
.game { background: linear-gradient(135deg, #231a4a, #16132a); border: 2px solid var(--mor); padding: 26px; }
.game h2 { font-size: 27px; margin: 8px 0; }
.game img { height: 60px; width: auto; display: block; }
.btn2 { display: inline-block; background: var(--pem); color: #2a0d1c; font-weight: 800; padding: 12px 22px; box-shadow: 4px 4px 0 #a03a6c; margin-top: 14px; }
.btn2.arena { background: #ffd23f; color: #111; box-shadow: 4px 4px 0 #c79c0c; margin-left: 10px; }
.btn2 small { font-weight: 700; opacity: .8; }
/* Tasarımcı S-3: basılamayan "yakında" düğmeleri soluk ve kapalı görünür */
.btn2.kapali { background: var(--pan2); color: var(--sol); box-shadow: none; border: 2px dashed var(--ln); cursor: not-allowed; }
.set { height: 120px; display: flex; align-items: flex-end; padding: 10px; font-size: 11px; font-weight: 800; letter-spacing: 1px;
  background-size: cover; background-position: center; }
.g3 .p:nth-child(3n+1) .set { background-image: linear-gradient(135deg, #a66bff55, #32d4ff22); }
.g3 .p:nth-child(3n+2) .set { background-image: linear-gradient(135deg, #32d4ff55, #ff6fb522); }
.g3 .p:nth-child(3n) .set { background-image: linear-gradient(135deg, #ff6fb555, #a66bff22); }
.set img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set:has(img) { padding: 0; }
.g3 .p { padding: 0; }            /* d.html: set kartı kenarsız; kapak üstte */
.set-govde { padding: 16px; }
.set-govde b { overflow-wrap: anywhere; }
.set-alt { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.sponsorlar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sponsorlar img { max-height: 56px; width: auto; display: block; }
section { margin-top: 40px; }
footer { margin-top: 48px; border-top: 2px solid var(--ln); padding: 22px 0 110px; color: var(--sol); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; }

/* Alttaki sabit çalar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #090716; border-top: 2px solid var(--mor);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
.bar .w { display: flex; align-items: center; gap: 16px; }
.bar .ad { flex: 1; min-width: 0; }
.bar .ad b, .bar .ad .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .yakinda-rozet { color: var(--sol); }
.vol { width: 140px; accent-color: var(--cam); }

/* Telefon (m.html) */
@media (max-width: 719px) {
  .w { padding: 0 16px; }
  nav.menu-cubugu { padding: 12px 0; position: relative; }
  nav.menu-cubugu .ust-logo img { height: 30px; }
  .menu-dugme { display: block; margin-left: auto; }
  .menu { display: none; }
  .menu.acik { display: flex; flex-direction: column; gap: 4px; position: absolute; left: -16px; right: -16px; top: 100%;
    background: var(--bg); border-bottom: 2px solid var(--ln); padding: 8px 16px 16px; }
  .menu.acik a, .menu.acik .yakinda { padding: 10px 0; font-size: 15px; min-height: 44px; display: flex; align-items: center; }
  .menu.acik .btn { text-align: center; margin-top: 6px; }
  .menu .sp { display: none; }
  h1 { font-size: 27px; }
  .hero { display: block; text-align: center; padding: 22px 0 18px; }
  .buyuk-logo { width: 190px; margin: 0 auto; }
  .hero-yazi { margin-top: 14px; }
  .art { font-size: 16px; }
  .play { justify-content: center; text-align: left; margin-top: 18px; }
  .play .pb:not(.s) { width: 72px; height: 72px; }
  .play b { font-size: 15px; }
  .eq { justify-content: center; height: 40px; margin-top: 18px; }
  .eq b { max-height: 100%; }
  .eq b:nth-child(n+21) { display: none; }
  .eq.calar-acik b { height: calc(var(--y, .3) * 40px); }
  section { margin-top: 22px; }
  .g2, .g3 { grid-template-columns: 1fr; gap: 16px; }
  .game { padding: 18px; }
  .game h2 { font-size: 21px; }
  .game img { height: 44px; }
  .btn2.arena { margin-left: 0; }
  .p { padding: 16px; }
  footer { display: block; padding-bottom: 96px; }
  footer a { display: inline-block; margin-top: 6px; }
  .bar .ad b { font-size: 14px; }
  .bar .ad .sub { font-size: 12px; }
  .bar .ses-alani { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .buyuk-logo, .buyuk-logo img, .ust-logo, .eq b { animation: none !important; transition: none !important; }
  .buyuk-logo, .buyuk-logo .katman-1 { transform: none !important; }
}

/* Ekolayzer: taslaktaki çubuk boyları (d.html) */
.eq b:nth-child(1) { --h: 38px; }
.eq b:nth-child(2) { --h: 46px; }
.eq b:nth-child(3) { --h: 22px; }
.eq b:nth-child(4) { --h: 26px; }
.eq b:nth-child(5) { --h: 18px; }
.eq b:nth-child(6) { --h: 30px; }
.eq b:nth-child(7) { --h: 22px; }
.eq b:nth-child(8) { --h: 22px; }
.eq b:nth-child(9) { --h: 14px; }
.eq b:nth-child(10) { --h: 26px; }
.eq b:nth-child(11) { --h: 46px; }
.eq b:nth-child(12) { --h: 14px; }
.eq b:nth-child(13) { --h: 38px; }
.eq b:nth-child(14) { --h: 54px; }
.eq b:nth-child(15) { --h: 46px; }
.eq b:nth-child(16) { --h: 30px; }
.eq b:nth-child(17) { --h: 22px; }
.eq b:nth-child(18) { --h: 46px; }
.eq b:nth-child(19) { --h: 38px; }
.eq b:nth-child(20) { --h: 14px; }
.eq b:nth-child(21) { --h: 46px; }
.eq b:nth-child(22) { --h: 46px; }
.eq b:nth-child(23) { --h: 38px; }
.eq b:nth-child(24) { --h: 30px; }
.eq b:nth-child(25) { --h: 46px; }
.eq b:nth-child(26) { --h: 46px; }
.eq b:nth-child(27) { --h: 54px; }
.eq b:nth-child(28) { --h: 22px; }
.eq b:nth-child(29) { --h: 54px; }
.eq b:nth-child(30) { --h: 26px; }
.eq b:nth-child(31) { --h: 38px; }
.eq b:nth-child(32) { --h: 30px; }
.eq b:nth-child(33) { --h: 38px; }
.eq b:nth-child(34) { --h: 18px; }