/* Yazı tipleri: SIL Open Font License, sitede barındırılır */
/* Fraunces latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../../fonts/fraunces/fraunces-normal-300_800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../../fonts/fraunces/fraunces-normal-300_800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Transistör — 70'lerin ev radyosu.
   Açık mint gövde, sarı cam kadran, kırmızı ibre ve düğmeler, hoparlör ızgarası; istasyonlar hazır ayar tuşları. */
:root {
  --paper: #E4EFE8;
  --surface: #F3F8F4;
  --ink: #133A35;
  --ink-2: #4C6A64;
  --line: #C6D9CF;
  --link: #A8322A;
  --onair: #E03C31;
  --font: "Fraunces", Georgia, "Times New Roman", serif;
  --font-display: "Fraunces", Georgia, serif;
  --chrome: #F1F7F3;
  --chrome-2: #E2EEE7;
  --chrome-ink: #133A35;
  --hero-bg: var(--paper);
  --hero-lead: #3B5A54;
  --band-bg: #D4E7DC;
  --band-mix: 24%;
  --footer-bg: #D4E7DC;
  --footer-ink: #133A35;
  --dial-bg: linear-gradient(180deg, #FCF6DC 0%, #F3E5AC 100%);
  --dial-line: #CDBB78;
  --dial-tick: rgba(19, 58, 53, .6);
  --dial-tick-2: rgba(19, 58, 53, .28);
  --tuner-icon-filter: none;
  --accent: #E03C31;
  --accent-hover: #C8322A;
  --accent-ink: #FFF7F0;
  --needle: #E03C31;
  --player-bg: rgba(241, 247, 243, .96);
  --player-ink: #133A35;
  --player-line: #C6D9CF;
  --drawer-bg: #E4EFE8;
  --logo-ring: 3px;
}
body { line-height: 1.62; font-variation-settings: "SOFT" 50; }
h1, h2, h3, .brand__word, .rail__title, .side__title { font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -0.01em; font-weight: 700; }
.hero__title { font-weight: 700; font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -0.025em; line-height: .95; }
.brand__word { font-weight: 800; }

/* Üst bar: krom çıta */
.topbar { border-bottom: 0; background: linear-gradient(180deg, #F8FBF9, #E9F2EC); box-shadow: inset 0 -1px 0 #fff, 0 2px 0 #B9CBC0; }

/* Kahraman alanı: radyonun gövdesi ve hoparlör ızgarası */
.hero__in {
  position: relative;
  margin-block: 26px 36px;
  padding: 40px 40px 34px;
  border-radius: 36px;
  background: linear-gradient(180deg, #D7EADF, #C5DCCF);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -4px 0 rgba(19, 58, 53, .08), 0 26px 44px -30px rgba(19, 58, 53, .5);
}
.hero__in::before {
  content: "";
  position: absolute;
  top: 40px;
  right: 40px;
  width: min(32%, 330px);
  height: 150px;
  border-radius: 24px;
  background-color: #BBD3C6;
  background-image: radial-gradient(circle, rgba(19, 58, 53, .38) 2.4px, transparent 2.9px);
  background-size: 13px 13px;
  box-shadow: inset 0 3px 8px rgba(19, 58, 53, .2), 0 1px 0 rgba(255, 255, 255, .7);
}
.hero__copy { max-width: 62%; }

/* Kadran: arkadan aydınlatılmış cam */
.tuner__dial { border: 3px solid #B5C8BD; border-radius: 18px; box-shadow: inset 0 0 0 1px #FFF9DD, inset 0 10px 20px rgba(120, 95, 20, .14); }
.tuner__scale { color: rgba(19, 58, 53, .75); font-weight: 600; }
.tuner__band { color: var(--ink); opacity: .72; border-top-width: 5px; }
.tuner__band[aria-selected="true"], .tuner__band[aria-current="page"] { background: rgba(19, 58, 53, .07); }
.tuner__needle { width: 3px; box-shadow: none; }
.tuner__needle::before { left: -4.5px; }
.rail__more { color: var(--accent); }

/* Logolar: krom halkalı yuvarlak düğmeler */
.logo, .logo--initials { border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #B5C8BD; }
.tile .logo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #B5C8BD, 0 8px 14px -8px rgba(19, 58, 53, .6); }
.station-head__logo .logo { border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 0 0 7px #B5C8BD, 0 22px 40px -18px rgba(19, 58, 53, .55); }
.player__logo { border-radius: 50%; }

/* İstasyonlar: hazır ayar tuşları */
.stlist { column-gap: 16px; row-gap: 12px; }
.st { border-bottom: 0; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px #CFE0D6, 0 3px 0 #B8CDC1; }
.st:active { transform: translateY(2px); box-shadow: 0 0 0 1px #CFE0D6, 0 1px 0 #B8CDC1; }
.st__play { border: 0; background: var(--accent); color: #fff; box-shadow: 0 3px 0 #A92B22; }
.st__play:hover, .st__play[data-playing="true"] { background: var(--accent-hover); color: #fff; }
.st__rank { font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--accent); }
.st__genre { font-style: normal; }

.side__block, .genre-card { border-radius: 22px; box-shadow: 0 3px 0 #C3D6CB; }
.btn--play { box-shadow: 0 4px 0 #A92B22; }
.player__toggle { box-shadow: 0 4px 0 #A92B22, 0 12px 20px -12px rgba(224, 60, 49, .8); }

/* Alt bilgi: ızgara şeridi */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background-image: radial-gradient(circle, rgba(19, 58, 53, .3) 2px, transparent 2.5px); background-size: 12px 12px; background-position: 6px 4px; }

@media (max-width: 960px) {
  .hero__in::before { display: none; }
  .hero__copy { max-width: none; }
}
@media (max-width: 720px) {
  .hero__in { margin-block: 14px 22px; padding: 26px 18px 22px; border-radius: 26px; }
}