/* ===========================================================================
   radyocanlar.com — on yuz stili
   ---------------------------------------------------------------------------
   Tek dosya, tek istek. Derleme adimi ve CSS cercevesi yok: bu boyutta bir
   site icin ikisi de bakim yuku.

   RENK KARARI: agirlik kirmizi, vurgu yesil, zemin sicak koyu. Koyu tema
   BILINCLI bir secim — radyo sitesi aksam ve gece de aciliyor, ayrica
   oynatici ve "canli" isareti koyu zeminde daha okunur cikiyor. Metin
   renkleri WCAG AA orani gozetilerek secildi.

   BOLUMLER
     1. Degiskenler            7. Bolumler ve kartlar
     2. Temel                  8. Formlar
     3. Duzen                  9. Tablolar
     4. Ust bar ve menu       10. Alt bilgi
     5. Oynatici              11. Yardimcilar
     6. Alt menu ve cekmece   12. Ekran genislikleri
   ======================================================================== */

/* --- 1. Degiskenler ----------------------------------------------------- */

:root {
  color-scheme: dark;

  --zemin:        #14100f;
  --zemin-2:      #1c1614;
  --zemin-3:      #251d1b;
  --zemin-4:      #302623;
  --cizgi:        #3a2d2a;
  --cizgi-2:      #4e3c37;

  --metin:        #f6efec;
  --metin-2:      #c5b5af;
  --metin-3:      #9a8a84;

  --kirmizi:      #d42a2a;
  --kirmizi-2:    #ef4444;
  --kirmizi-koyu: #8f1d1d;
  --kirmizi-sis:  rgba(212, 42, 42, .14);

  --yesil:        #1f9d63;
  --yesil-2:      #2ec27e;
  --yesil-sis:    rgba(46, 194, 126, .14);

  --altin:        #e0a93a;

  --ust-h:        66px;
  --menu-h:       46px;
  --alt-h:        62px;
  --player-h:     66px;

  --yuvarlak:     14px;
  --yuvarlak-s:   10px;
  --golge:        0 10px 30px rgba(0, 0, 0, .45);
  --golge-s:      0 3px 10px rgba(0, 0, 0, .3);

  --gecis:        .18s ease;

  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

/* --- 2. Temel ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 16px/1.65 var(--yazi);
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--kirmizi-2); }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); }
h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }

:focus-visible {
  outline: 3px solid var(--yesil-2);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--kirmizi); color: #fff; }

/* --- 3. Duzen ----------------------------------------------------------- */

.kap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 16px; }

.sayfa-kap { padding-top: 1.5rem; padding-bottom: 2.5rem; }

.sayfa-ust { margin-bottom: 1.5rem; }
.sayfa-ust h1 { display: flex; align-items: center; gap: .6rem; }
.sayfa-ust h1 svg { color: var(--kirmizi-2); flex: 0 0 auto; }
.sayfa-ust p { color: var(--metin-2); margin: 0; }
.sayfa-ust .dugme { margin-top: 1rem; }

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--kirmizi); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--yuvarlak-s) 0; font-weight: 600;
}
.atla:focus { left: 0; }

/* --- 4. Ust bar ve menu ------------------------------------------------- */

/* DIKKAT: burada backdrop-filter / transform / will-change KULLANILMAZ.
   Bunlardan biri eklenirse .player'in mobilde position:fixed ile alt seride
   inmesi bozulur — sabit oge bu ogeye gore konumlanmaya baslar. */
.ust {
  position: sticky; top: 0; z-index: 60;
  background: var(--zemin-2);
  border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
  height: var(--ust-h);
  display: flex; align-items: center; gap: 1rem;
}

.marka { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; }
.marka:hover { color: inherit; }
.marka-logo { max-height: 46px; width: auto; }
.marka-isaret { display: flex; flex: 0 0 auto; }
.marka-yazi { display: flex; flex-direction: column; line-height: 1.15; }
.marka-yazi strong { font-size: 1.15rem; letter-spacing: -.02em; }
.marka-yazi small { color: var(--metin-3); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }

.cekmece-dugme {
  display: none;
  margin-left: auto;
  background: var(--zemin-3); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-s);
  width: 44px; height: 44px; align-items: center; justify-content: center;
  cursor: pointer;
}

.ana-menu { border-top: 1px solid var(--cizgi); background: var(--zemin); }
.ana-menu-ic {
  height: var(--menu-h);
  display: flex; align-items: center; gap: .15rem;
  overflow-x: auto; scrollbar-width: none;
}
.ana-menu-ic::-webkit-scrollbar { display: none; }

.ana-menu-oge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border-radius: 999px;
  color: var(--metin-2); font-size: .92rem; font-weight: 600;
  white-space: nowrap; transition: background var(--gecis), color var(--gecis);
}
.ana-menu-oge svg { color: var(--metin-3); }
.ana-menu-oge:hover { background: var(--zemin-3); color: var(--metin); }
.ana-menu-oge:hover svg { color: var(--kirmizi-2); }
.ana-menu-oge.etkin { background: var(--kirmizi); color: #fff; }
.ana-menu-oge.etkin svg { color: #fff; }

.ust-ara { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.ust-ara input {
  width: 200px; background: var(--zemin-3); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 999px;
  padding: .4rem .85rem; font: inherit; font-size: .88rem;
}
.ust-ara input::placeholder { color: var(--metin-3); }
.ust-ara input:focus { border-color: var(--kirmizi); outline: none; }
.ust-ara button {
  background: var(--zemin-3); color: var(--metin-2); cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: 999px;
  width: 36px; height: 34px; display: grid; place-items: center;
}
.ust-ara button:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }

/* --- 5. Oynatici -------------------------------------------------------- */

.player {
  margin-left: auto;
  display: flex; align-items: center; gap: .8rem;
  background: var(--zemin-3);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  padding: .35rem .5rem .35rem .35rem;
  min-width: 0;
  max-width: 460px; flex: 1 1 320px;
}

.player-gomulu { padding: 0; overflow: hidden; background: transparent; border: 0; }
.player-cerceve { width: 100%; height: 56px; border: 0; display: block; }

.player-yok {
  display: flex; align-items: center; gap: .5rem;
  color: var(--altin); font-size: .85rem; padding: .3rem .7rem;
}

.player-dugme {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--kirmizi); color: #fff;
  display: grid; place-items: center;
  transition: background var(--gecis), transform var(--gecis);
}
.player-dugme:hover { background: var(--kirmizi-2); }
.player-dugme:active { transform: scale(.94); }
.player-dugme svg { grid-area: 1 / 1; }

/* Oynat / duraklat ikonu: durumu tek yerde, gövde sınıfıyla değiştiriyoruz —
   her düğmede ayrı JS yazmak yerine CSS seçici işi yapıyor. */
.player-ikon-duraklat, .dugme-yazi-duraklat { display: none; }
body.caliyor .player-ikon-oynat,
body.caliyor .dugme-yazi-oynat { display: none; }
body.caliyor .player-ikon-duraklat,
body.caliyor .dugme-yazi-duraklat { display: inline-flex; }

.player-yukleniyor {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #fff;
  opacity: 0; pointer-events: none;
}
body.yukleniyor .player-yukleniyor { opacity: 1; animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

.player-bilgi { min-width: 0; flex: 1 1 auto; }
.player-ust { display: flex; align-items: center; gap: .5rem; }
.player-program {
  font-size: .78rem; color: var(--metin-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-parca {
  font-size: .9rem; font-weight: 600; color: var(--metin);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.canli {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--kirmizi-sis); color: var(--kirmizi-2);
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 999px; padding: .1rem .5rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .09em;
}
.canli.minik { font-size: .6rem; padding: .05rem .4rem; }
.canli-nokta {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--yesil-2); box-shadow: 0 0 0 0 rgba(46, 194, 126, .7);
  animation: nabiz 2s infinite;
}
@keyframes nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(46, 194, 126, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(46, 194, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 194, 126, 0); }
}

.player-sag { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.player-ses { display: flex; align-items: center; gap: .3rem; }
.player-ses-dugme {
  background: transparent; border: 0; color: var(--metin-2); cursor: pointer;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
}
.player-ses-dugme:hover { background: var(--zemin-4); color: var(--metin); }
.player-ses-dugme svg { grid-area: 1 / 1; }
.ses-kapali { display: none; }
body.sessiz .ses-acik { display: none; }
body.sessiz .ses-kapali { display: inline-flex; }

.player-kaydirak {
  -webkit-appearance: none; appearance: none;
  width: 74px; height: 4px; border-radius: 999px; background: var(--cizgi-2);
  cursor: pointer;
}
.player-kaydirak::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%; background: var(--kirmizi-2);
  border: 2px solid var(--zemin-2);
}
.player-kaydirak::-moz-range-thumb {
  width: 13px; height: 13px; border: 2px solid var(--zemin-2);
  border-radius: 50%; background: var(--kirmizi-2);
}

.player-pencere {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--metin-2);
}
.player-pencere:hover { background: var(--zemin-4); color: var(--metin); }

/* --- 6. Alt menu ve cekmece -------------------------------------------- */

.alt-menu {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: calc(var(--alt-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--zemin-2);
  border-top: 1px solid var(--cizgi);
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}

.alt-oge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--metin-3); font: inherit; font-size: .66rem; font-weight: 600;
  padding: .3rem 0; height: 100%; justify-content: center;
}
.alt-oge.etkin, .alt-oge:hover { color: var(--kirmizi-2); }
.alt-oge.etkin svg { color: var(--kirmizi-2); }

.alt-dinle {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: 0; cursor: pointer; color: var(--metin);
  font: inherit; font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  padding: 0; height: 100%; justify-content: center;
}
.alt-dinle-ikon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--kirmizi); color: #fff;
  display: grid; place-items: center;
  margin-top: -22px;
  box-shadow: 0 6px 18px rgba(212, 42, 42, .45);
  border: 3px solid var(--zemin-2);
  transition: background var(--gecis), transform var(--gecis);
}
.alt-dinle-ikon svg { grid-area: 1 / 1; }
.alt-dinle:active .alt-dinle-ikon { transform: scale(.94); }
body.caliyor .alt-dinle-ikon { background: var(--yesil); box-shadow: 0 6px 18px rgba(31, 157, 99, .45); }

.cekmece-perde {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .6);
}

.cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(330px, 86vw);
  background: var(--zemin-2); border-left: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0 2rem;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.cekmece[data-acik] { transform: translateX(0); }

.cekmece-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; background: var(--zemin-2); z-index: 1;
}
.cekmece-kapat {
  background: var(--zemin-3); border: 1px solid var(--cizgi); color: var(--metin);
  width: 38px; height: 38px; border-radius: var(--yuvarlak-s);
  display: grid; place-items: center; cursor: pointer;
}

.cekmece-menu { display: flex; flex-direction: column; padding: .6rem; }
.cekmece-menu a {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border-radius: var(--yuvarlak-s);
  color: var(--metin-2); font-weight: 600;
}
.cekmece-menu a svg { color: var(--metin-3); flex: 0 0 auto; }
.cekmece-menu a:hover { background: var(--zemin-3); color: var(--metin); }
.cekmece-menu a.etkin { background: var(--kirmizi-sis); color: var(--kirmizi-2); }
.cekmece-menu a.etkin svg { color: var(--kirmizi-2); }
.cekmece-menu.ince a { padding: .5rem .8rem; font-weight: 500; font-size: .92rem; }

.cekmece-bolum { padding: .5rem .6rem; border-top: 1px solid var(--cizgi); margin-top: .5rem; }
.cekmece-bolum h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--metin-3); padding: .5rem .8rem 0; margin: 0;
}
.cekmece-iletisim { display: flex; flex-direction: column; padding: .3rem .6rem; }
.cekmece-iletisim a {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem;
  border-radius: var(--yuvarlak-s); color: var(--metin-2); font-weight: 600;
}
.cekmece-iletisim a:hover { background: var(--zemin-3); color: var(--metin); }

.sosyal-sira { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem .8rem; }
.sosyal-sira a {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--zemin-3); border: 1px solid var(--cizgi);
  display: grid; place-items: center; color: var(--metin-2);
  transition: background var(--gecis), color var(--gecis);
}
.sosyal-sira a:hover { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.sosyal-sira.buyuk a { width: 44px; height: 44px; }

.wa-dugme {
  position: fixed; right: 16px; z-index: 55;
  bottom: calc(var(--alt-h) + var(--player-h) + 16px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--yesil); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(31, 157, 99, .4);
}
.wa-dugme:hover { background: var(--yesil-2); color: #fff; }

/* --- 7. Bolumler ve kartlar -------------------------------------------- */

.hero {
  background:
    radial-gradient(1000px 420px at 12% -10%, rgba(212, 42, 42, .28), transparent 62%),
    radial-gradient(760px 380px at 88% 8%, rgba(31, 157, 99, .17), transparent 60%),
    var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}
.hero-ic {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem;
  padding: 2.5rem 16px 2.75rem;
}
/* Izgara ogesinin varsayilani min-width:auto'dur: icindeki nowrap metin
   kolonu min-content genisligine kilitler ve sayfa yatay tasar. Telefonda
   olculdu (390 viewport, 448 scrollWidth). min-width:0 ellipsis'in
   calismasini saglar. */
.hero-sol, .hero-sag { min-width: 0; }
.hero-canli { margin-bottom: .9rem; }
.hero-baslik { margin-bottom: .75rem; }
.hero-baslik span {
  display: block; font-size: .5em; font-weight: 600;
  color: var(--kirmizi-2); letter-spacing: .12em; text-transform: uppercase;
  margin-top: .3rem;
}
.hero-metin { color: var(--metin-2); max-width: 46ch; }
.hero-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }

.hero-durum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .9rem; margin: 0;
  border-top: 1px solid var(--cizgi); padding-top: 1.1rem;
}
.hero-durum > div { min-width: 0; }
.hero-durum dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--metin-3); margin-bottom: .2rem;
}
.hero-durum dd {
  margin: 0; font-weight: 700; font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .62rem 1.15rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
  text-align: center;
}
.dugme-buyuk { padding: .8rem 1.5rem; font-size: 1rem; }
.dugme-birincil { background: var(--kirmizi); color: #fff; }
.dugme-birincil:hover { background: var(--kirmizi-2); color: #fff; }
.dugme-ikincil { background: var(--zemin-3); color: var(--metin); border-color: var(--cizgi-2); }
.dugme-ikincil:hover { background: var(--zemin-4); color: var(--metin); border-color: var(--kirmizi); }
.dugme-yesil { background: var(--yesil); color: #fff; }
.dugme-yesil:hover { background: var(--yesil-2); color: #fff; }
.dugme-sade { background: transparent; color: var(--metin-2); border-color: var(--cizgi); }
.dugme-sade:hover { color: var(--metin); border-color: var(--cizgi-2); }
body.caliyor .dugme-birincil[data-oynat] { background: var(--yesil); }
body.caliyor .dugme-birincil[data-oynat]:hover { background: var(--yesil-2); }

.panel {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden;
}
.panel + .panel { margin-top: 1.25rem; }
.panel-ust {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--cizgi);
  background: linear-gradient(180deg, var(--zemin-3), var(--zemin-2));
}
.panel-ust h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; }
.panel-ust h2 svg { color: var(--kirmizi-2); }
.panel-tumu { font-size: .82rem; color: var(--metin-2); display: inline-flex; align-items: center; gap: .2rem; }
.panel-tumu:hover { color: var(--kirmizi-2); }
.panel-not { font-size: .8rem; color: var(--metin-3); }

.ana-izgara {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem; padding-top: 2rem; padding-bottom: 2.5rem;
}
.ana-izgara > * { min-width: 0; }
.bolum-genis { grid-column: 1 / -1; }

.bolum-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .9rem; flex-wrap: wrap;
}
.bolum-ust h2 { display: flex; align-items: center; gap: .5rem; margin: 0; }
.bolum-ust h2 svg { color: var(--kirmizi-2); }
.bolum-tumu { font-size: .85rem; color: var(--metin-2); display: inline-flex; align-items: center; gap: .25rem; }
.bolum-tumu:hover { color: var(--kirmizi-2); }
.alt-baslik { margin: 2rem 0 1rem; }

.kusak-liste { display: flex; flex-direction: column; }
.kusak {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--cizgi);
  color: var(--metin);
}
.kusak:last-child { border-bottom: 0; }
.kusak:hover { background: var(--zemin-3); color: var(--metin); }
.kusak-simdi { background: var(--kirmizi-sis); box-shadow: inset 3px 0 0 var(--kirmizi); }
.kusak-simdi:hover { background: rgba(212, 42, 42, .2); }

.kusak-saat {
  flex: 0 0 52px; display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.kusak-saat strong { font-size: .98rem; }
.kusak-saat small { color: var(--metin-3); font-size: .74rem; }
.kusak-kapak { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--yuvarlak-s); object-fit: cover; }
.kusak-govde { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .12rem; }
.kusak-ad { font-weight: 700; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.kusak-sunucu { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--metin-3); }
.kusak-ozet {
  font-size: .82rem; color: var(--metin-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kusak-ok { color: var(--metin-3); flex: 0 0 auto; }
.kusak-liste.ince .kusak { padding: .55rem .9rem; }

.turku-liste { display: flex; flex-direction: column; }
.turku-satir {
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem 1.05rem; border-bottom: 1px solid var(--cizgi);
}
.turku-satir:last-child { border-bottom: 0; }
.turku-satir:hover { background: var(--zemin-3); }
.turku-sira {
  flex: 0 0 26px; text-align: center; font-weight: 800; font-size: .95rem;
  color: var(--kirmizi-2); font-variant-numeric: tabular-nums;
}
.turku-nota { flex: 0 0 26px; display: grid; place-items: center; color: var(--metin-3); }
.turku-baglanti { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.turku-baglanti strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turku-baglanti small { color: var(--metin-3); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turku-istek {
  display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto;
  font-size: .78rem; color: var(--metin-3); font-variant-numeric: tabular-nums;
}
.turku-iste {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
  background: var(--zemin-3); border: 1px solid var(--cizgi);
  border-radius: 999px; padding: .28rem .7rem; font-size: .78rem; font-weight: 700;
  color: var(--metin-2);
}
.turku-iste:hover { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.turku-liste.ince .turku-satir { padding: .5rem .9rem; }
.turku-liste.ince .turku-iste span { display: none; }

.calan-liste { list-style: none; margin: 0; padding: 0; }
.calan-liste li {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 1.05rem; border-bottom: 1px solid var(--cizgi);
}
.calan-liste li:last-child { border-bottom: 0; }
.calan-saat {
  flex: 0 0 44px; color: var(--kirmizi-2); font-weight: 700;
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
.calan-govde { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.calan-govde small { color: var(--metin-3); font-size: .8rem; }
.calan-tarih { color: var(--metin-3); font-size: .78rem; flex: 0 0 auto; }
.calan-liste.panel { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); }

.istek-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.istek-kart {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.istek-kart header { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.istek-kart header small { color: var(--metin-3); font-size: .8rem; }
.istek-turku { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 650; }
.istek-turku svg { color: var(--kirmizi-2); flex: 0 0 auto; }
.istek-turku small { color: var(--metin-3); font-weight: 400; }
.istek-kart blockquote {
  margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--yesil);
  background: var(--zemin-3); border-radius: 0 var(--yuvarlak-s) var(--yuvarlak-s) 0;
  color: var(--metin-2); font-size: .9rem;
}
.istek-kart footer {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .3rem;
}
.istek-kart footer time { color: var(--metin-3); font-size: .78rem; margin-left: auto; }

.etiket {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--zemin-3); border: 1px solid var(--cizgi);
  border-radius: 999px; padding: .12rem .55rem;
  font-size: .72rem; font-weight: 700; color: var(--metin-2);
}
.etiket-kirmizi { background: var(--kirmizi-sis); border-color: rgba(239, 68, 68, .3); color: var(--kirmizi-2); }
.etiket-yesil { background: var(--yesil-sis); border-color: rgba(46, 194, 126, .3); color: var(--yesil-2); }

.haber-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.haber-kart {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden;
  transition: border-color var(--gecis), transform var(--gecis);
}
.haber-kart:hover { border-color: var(--kirmizi); transform: translateY(-2px); }
.haber-kart a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.haber-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.haber-kapak-yok {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  background: var(--zemin-3); color: var(--cizgi-2);
}
.haber-govde { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1 1 auto; }
.haber-govde h2, .haber-govde h3 { margin: 0; font-size: 1.02rem; }
.haber-govde p { margin: 0; color: var(--metin-3); font-size: .88rem; }
.haber-govde time { color: var(--metin-3); font-size: .78rem; margin-top: auto; }

.program-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.program-kart {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden; padding-bottom: .9rem;
  display: flex; flex-direction: column; gap: .3rem;
  transition: border-color var(--gecis), transform var(--gecis);
}
.program-kart:hover { border-color: var(--kirmizi); transform: translateY(-2px); color: inherit; }
.program-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: .5rem; }
.program-kapak-yok {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--kirmizi-koyu), var(--zemin-3));
  color: rgba(255, 255, 255, .5); margin-bottom: .5rem;
}
.program-kart strong { padding: 0 1rem; font-size: 1.02rem; }
.program-kart small { padding: 0 1rem; color: var(--metin-3); font-size: .8rem; display: flex; align-items: center; gap: .3rem; }
.program-kart p { padding: 0 1rem; margin: .2rem 0 0; color: var(--metin-3); font-size: .86rem; }

.program-liste { display: flex; flex-direction: column; }
.program-satir {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .75rem 1.05rem; border-bottom: 1px solid var(--cizgi);
}
.program-satir:last-child { border-bottom: 0; }
.program-satir:hover { background: var(--zemin-3); color: inherit; }
.program-satir small { color: var(--metin-3); font-size: .82rem; }

.sanatci-serit {
  display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x proximity;
}
.sanatci-oge {
  flex: 0 0 auto; width: 104px; text-align: center; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.sanatci-oge img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cizgi); }
.sanatci-oge:hover img { border-color: var(--kirmizi); }
.sanatci-oge strong { font-size: .86rem; line-height: 1.25; }
.sanatci-oge small { color: var(--metin-3); font-size: .74rem; }

.sanatci-bas {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--kirmizi-koyu), var(--zemin-4));
  color: #fff; font-size: 2rem; font-weight: 800;
  border: 2px solid var(--cizgi);
}
.sanatci-bas.buyuk { width: 110px; height: 110px; font-size: 2.6rem; }
.sanatci-bas.dev { width: 200px; height: 200px; font-size: 4.5rem; }

.kisi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem; }
.kisi-buyuk {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 1.25rem 1rem; text-align: center;
  transition: border-color var(--gecis), transform var(--gecis);
}
.kisi-buyuk:hover { border-color: var(--kirmizi); transform: translateY(-2px); color: inherit; }
.kisi-buyuk img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cizgi); }
.kisi-buyuk small { color: var(--metin-3); font-size: .8rem; }

.kisi-kart { display: flex; align-items: center; gap: .8rem; padding: 1rem; }
.kisi-kart:hover { background: var(--zemin-3); color: inherit; }
.kisi-kart img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.kisi-kart .sanatci-bas { width: 64px; height: 64px; font-size: 1.5rem; }
.kisi-kart span { display: flex; flex-direction: column; }
.kisi-kart small { color: var(--metin-3); font-size: .82rem; }

/* Detay sayfalari */
.detay-ust { padding: 1.5rem 0 1.75rem; display: flex; gap: 1.75rem; align-items: flex-start; }
.detay-ust-kapakli { flex-wrap: wrap; }
.detay-kapak {
  flex: 0 0 auto; width: 210px; height: 210px; object-fit: cover;
  border-radius: var(--yuvarlak); border: 1px solid var(--cizgi);
}
.detay-kapak.yuvarlak { border-radius: 50%; width: 200px; height: 200px; }
.detay-ust-govde { flex: 1 1 320px; min-width: 0; }
.detay-ust-govde h1 { margin: .5rem 0 .6rem; }
.detay-ozet { color: var(--metin-2); margin-bottom: 1rem; }
.detay-eylem { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.detay-izgara { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.75rem; }
.detay-ana { min-width: 0; }
.detay-yan { min-width: 0; }

.metin-blok { margin-bottom: 1.75rem; }
.metin-blok h2 { margin-bottom: .75rem; }
.metin-blok p { color: var(--metin-2); }

.soz {
  padding: 1.1rem 1.2rem; color: var(--metin);
  font-size: 1.02rem; line-height: 2;
  white-space: normal;
}

.kunye { margin: 0; padding: .9rem 1.1rem; display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem; }
.kunye dt { color: var(--metin-3); font-size: .82rem; }
.kunye dd { margin: 0; font-weight: 600; font-size: .92rem; }

.saat-liste { list-style: none; margin: 0; padding: 0; }
.saat-liste li {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.1rem; border-bottom: 1px solid var(--cizgi);
}
.saat-liste li:last-child { border-bottom: 0; }
.saat-gun { flex: 1 1 auto; font-weight: 600; }
.saat-aralik { color: var(--metin-2); font-variant-numeric: tabular-nums; }

.yt-yer-tutucu {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 2rem 1rem; color: var(--metin-2); font-weight: 700;
  background: var(--zemin-3);
}
.yt-yer-tutucu:hover { background: var(--zemin-4); color: var(--kirmizi-2); }

.yazi { max-width: 46rem; margin: 0 auto; }
.yazi header { margin-bottom: 1.25rem; }
.yazi-ust-bilgi { color: var(--metin-3); font-size: .86rem; margin: 0; }
.yazi-kapak { width: 100%; border-radius: var(--yuvarlak); margin-bottom: 1.5rem; }
.yazi-ozet { font-size: 1.1rem; color: var(--metin); font-weight: 500; }
.yazi-alt { border-top: 1px solid var(--cizgi); padding-top: 1rem; color: var(--metin-3); }

.orta-kutu {
  max-width: 36rem; margin: 3rem auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.orta-kutu svg { color: var(--kirmizi-2); }
.orta-kutu p { color: var(--metin-2); }
.orta-kutu .detay-eylem { justify-content: center; margin-top: .75rem; }

.bos { color: var(--metin-3); padding: 1.25rem 1.1rem; margin: 0; }
.bos.minik { padding: .3rem; font-size: .8rem; }
.bos a { color: var(--kirmizi-2); text-decoration: underline; }

.kirilma { margin: 1.25rem 0 0; }
.kirilma ol {
  list-style: none; margin: 0; padding: 0 16px;
  display: flex; flex-wrap: wrap; gap: .4rem;
  max-width: 1220px; margin: 0 auto; font-size: .84rem; color: var(--metin-3);
}
.kirilma li + li::before { content: "/"; margin-right: .4rem; color: var(--cizgi-2); }
.kirilma a { color: var(--metin-2); }
.kirilma a:hover { color: var(--kirmizi-2); }

.sayfalama { display: flex; justify-content: center; gap: .3rem; margin: 1.75rem 0 0; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  min-width: 40px; height: 40px; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-s); font-weight: 600; color: var(--metin-2);
}
.sayfalama a:hover { background: var(--zemin-3); color: var(--metin); border-color: var(--cizgi-2); }
.sayfalama .etkin { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.sayfalama .bosluk { background: transparent; border: 0; }

.gun-sekmeleri {
  display: flex; gap: .35rem; margin-bottom: 1.25rem;
  overflow-x: auto; padding-bottom: .35rem; scrollbar-width: thin;
}
.gun-sekme {
  position: relative; flex: 0 0 auto;
  padding: .55rem 1rem; border-radius: 999px;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  font-weight: 700; font-size: .9rem; color: var(--metin-2); white-space: nowrap;
}
.gun-sekme:hover { background: var(--zemin-3); color: var(--metin); }
.gun-sekme.etkin { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.gun-kisa { display: none; }
.gun-bugun-nokta {
  position: absolute; top: 6px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--yesil-2);
}

.yore-serit { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.yore-etiket {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .8rem; border-radius: 999px;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  font-size: .85rem; font-weight: 600; color: var(--metin-2);
}
.yore-etiket small { color: var(--metin-3); font-size: .74rem; }
.yore-etiket:hover { background: var(--zemin-3); color: var(--metin); border-color: var(--cizgi-2); }
.yore-etiket.etkin { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.yore-etiket.etkin small { color: rgba(255, 255, 255, .8); }

.istek-duzen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.75rem; }
.istek-duzen > * { min-width: 0; }
.istek-yan .panel + .panel { margin-top: 1.25rem; }
.mini-istek-liste { list-style: none; margin: 0; padding: .5rem 0; }
.mini-istek-liste li {
  padding: .5rem 1.1rem; border-bottom: 1px solid var(--cizgi);
  display: flex; flex-direction: column;
}
.mini-istek-liste li:last-child { border-bottom: 0; }
.mini-istek-liste small { color: var(--metin-3); font-size: .78rem; }
.hat-dugmeler { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; }

.iletisim-liste { display: flex; flex-direction: column; padding: .5rem; }
.iletisim-liste a, .iletisim-liste > span {
  display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem;
  border-radius: var(--yuvarlak-s); color: var(--metin-2); font-weight: 600;
}
.iletisim-liste a:hover { background: var(--zemin-3); color: var(--metin); }
.iletisim-liste svg { color: var(--kirmizi-2); flex: 0 0 auto; }

/* --- 8. Formlar --------------------------------------------------------- */

.panel-form { padding: 1.25rem; }
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.alan-sira { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; }
.alan { display: flex; flex-direction: column; gap: .35rem; }
.alan-genis { flex: 1 1 260px; }
.alan label { font-size: .88rem; font-weight: 650; color: var(--metin-2); }
.zorunlu { color: var(--kirmizi-2); }
.alan small, .alan-not { color: var(--metin-3); font-size: .8rem; }

.alan input, .alan select, .alan textarea, .suzgec input {
  width: 100%; background: var(--zemin-3); color: var(--metin);
  border: 1px solid var(--cizgi-2); border-radius: var(--yuvarlak-s);
  padding: .68rem .85rem; font: inherit; font-size: .95rem;
  transition: border-color var(--gecis), background var(--gecis);
}
.alan textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--metin-3); }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  border-color: var(--kirmizi); background: var(--zemin-4); outline: none;
}
.alan select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--metin-3) 50%),
                    linear-gradient(135deg, var(--metin-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.alan-ikonlu { position: relative; display: flex; align-items: center; }
.alan-ikonlu svg { position: absolute; left: .75rem; color: var(--metin-3); pointer-events: none; }
.alan-ikonlu input { padding-left: 2.4rem; }

.suzgec { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1.25rem; }
.suzgec .alan { flex: 1 1 260px; }

.form-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.form-alt small { color: var(--metin-3); font-size: .82rem; flex: 1 1 200px; }
.form-alt small a { color: var(--kirmizi-2); text-decoration: underline; }

/* Bal kupu: gorsel olarak yok ama display:none DEGIL — bazi botlar
   display:none alanlari atliyor; bu bicim onlari da yakaliyor. */
.bal-kupu {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.alan-kod .kod-sira { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kod-resim {
  border-radius: var(--yuvarlak-s); border: 1px solid var(--cizgi-2);
  background: var(--zemin-3); flex: 0 0 auto;
}
.kod-yenile {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--zemin-3); color: var(--metin-2); cursor: pointer;
  border: 1px solid var(--cizgi-2); border-radius: var(--yuvarlak-s);
  padding: .5rem .75rem; font: inherit; font-size: .82rem; font-weight: 600;
}
.kod-yenile:hover { background: var(--zemin-4); color: var(--metin); }
.alan-kod input {
  width: 7rem; flex: 0 0 auto; text-align: center;
  letter-spacing: .35em; font-weight: 700; font-size: 1.1rem; text-transform: uppercase;
}

.uyari-blok {
  background: var(--kirmizi-sis); border: 1px solid rgba(239, 68, 68, .4);
  border-radius: var(--yuvarlak-s); padding: .9rem 1rem; margin-bottom: 1.1rem;
}
.uyari-blok strong { display: flex; align-items: center; gap: .45rem; color: var(--kirmizi-2); }
.uyari-blok ul { margin: .5rem 0 0; padding-left: 1.4rem; color: var(--metin-2); font-size: .9rem; }

.bildirim-alan { padding-top: 1rem; }
.bildirim {
  display: flex; align-items: flex-start; gap: .6rem;
  border-radius: var(--yuvarlak-s); padding: .85rem 1rem; margin-bottom: .6rem;
  background: var(--yesil-sis); border: 1px solid rgba(46, 194, 126, .35);
  color: var(--metin);
}
.bildirim svg { color: var(--yesil-2); flex: 0 0 auto; margin-top: 2px; }
.bildirim-uyari { background: var(--kirmizi-sis); border-color: rgba(239, 68, 68, .35); }
.bildirim-uyari svg { color: var(--kirmizi-2); }

.oneri-liste {
  list-style: none; margin: .3rem 0 0; padding: .3rem;
  background: var(--zemin-3); border: 1px solid var(--cizgi-2);
  border-radius: var(--yuvarlak-s); max-height: 240px; overflow-y: auto;
}
.oneri-liste li { padding: 0; }
.oneri-liste button {
  width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--metin); font: inherit; cursor: pointer;
  padding: .5rem .7rem; border-radius: 6px;
  display: flex; flex-direction: column;
}
.oneri-liste button small { color: var(--metin-3); font-size: .78rem; }
.oneri-liste button:hover, .oneri-liste button[aria-selected="true"] { background: var(--kirmizi); color: #fff; }
.oneri-liste button:hover small, .oneri-liste button[aria-selected="true"] small { color: rgba(255, 255, 255, .85); }

/* --- 9. Tablolar -------------------------------------------------------- */

.hafta-tablo-kap { margin-top: 2rem; }
.hafta-kaydir {
  overflow-x: auto;
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  background: var(--zemin-2);
}
.hafta-tablo { width: 100%; border-collapse: collapse; min-width: 900px; }
.hafta-tablo th {
  padding: .7rem .6rem; text-align: left; font-size: .82rem;
  color: var(--metin-2); border-bottom: 1px solid var(--cizgi);
  background: var(--zemin-3); position: sticky; top: 0;
}
.hafta-tablo th.bugun { color: var(--kirmizi-2); }
.hafta-tablo td { padding: .5rem; vertical-align: top; border-left: 1px solid var(--cizgi); }
.hafta-tablo td:first-child { border-left: 0; }
.hafta-tablo td.bugun { background: rgba(212, 42, 42, .06); }

.hafta-kusak {
  display: flex; flex-direction: column; gap: 0;
  padding: .4rem .55rem; border-radius: 8px; margin-bottom: .3rem;
  background: var(--zemin-3); border: 1px solid transparent;
}
.hafta-kusak:hover { border-color: var(--kirmizi); color: inherit; }
.hafta-kusak.kusak-simdi { background: var(--kirmizi-sis); border-color: var(--kirmizi); box-shadow: none; }
.hafta-saat { font-size: .74rem; color: var(--kirmizi-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.hafta-ad { font-size: .82rem; font-weight: 600; }

/* --- 10. Alt bilgi ------------------------------------------------------ */

.sponsor-serit { border-top: 1px solid var(--cizgi); background: var(--zemin-2); }
.sponsor-ic {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem; padding: 1.25rem 16px;
}
.sponsor {
  display: flex; align-items: center; opacity: .65;
  color: var(--metin-2); font-weight: 600; font-size: .9rem;
  transition: opacity var(--gecis);
}
.sponsor:hover { opacity: 1; color: var(--metin); }
.sponsor img { max-height: 40px; width: auto; object-fit: contain; }

.alt { background: var(--zemin-2); border-top: 1px solid var(--cizgi); margin-top: 2rem; }
/* IZGARA DEGIL FLEX: "1.4fr repeat(auto-fit, ...)" GECERSIZ bir tanimdi —
   Grid sartnamesi otomatik tekrari (auto-fit/auto-fill) esnek (fr) ya da
   icsel boyutlu baska bir track ile birlestirmeye izin vermiyor. Tarayici
   bildirimin TAMAMINI atiyor, geriye tek sutunlu bir izgara kaliyordu ve
   alt bilgi bolumleri yan yana degil alt alta diziliyordu (olculdu:
   grid-template-columns hesaplanan deger "1188px", bes bolumun besi de
   ayni left degerinde).

   Flex burada izgaradan daha uygun: bolum sayisi degisken (Kurumsal bolumu
   yalniz menude sayfa varsa ciziliyor) ve flex-wrap sayiyi bilmeden dogru
   sariyor. */
.alt-ic {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 1.75rem 2rem; padding: 2.25rem 16px 1.75rem;
}
.alt-bolum { flex: 1 1 150px; min-width: 0; }
.alt-tanitim { flex: 1 1 280px; max-width: 420px; }
.alt-bolum h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--metin-3); margin-bottom: .75rem;
}
.alt-bolum nav { display: flex; flex-direction: column; gap: .45rem; }
.alt-bolum nav a, .alt-adres { color: var(--metin-2); font-size: .9rem; }
.alt-bolum nav a:hover { color: var(--kirmizi-2); }
.alt-adres { color: var(--metin-3); }
.alt-marka { font-size: 1.2rem; display: block; margin-bottom: .5rem; }
.alt-tanitim p { color: var(--metin-3); font-size: .9rem; max-width: 36ch; }
.alt-tanitim .sosyal-sira { padding: 0; margin-bottom: .75rem; }
.alt-uygulama { display: flex; flex-direction: column; gap: .4rem; }
.alt-uygulama a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--metin-2); font-size: .86rem; font-weight: 600;
}
.alt-uygulama a:hover { color: var(--yesil-2); }

.alt-son {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
  padding: 1rem 16px 1.5rem; border-top: 1px solid var(--cizgi);
  color: var(--metin-3); font-size: .84rem;
}
.alt-imza a { color: var(--metin-3); }
.alt-imza a:hover { color: var(--kirmizi-2); }

/* --- Ayri dinleme penceresi -------------------------------------------- */

.dinle-govde {
  padding: 0; min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(212, 42, 42, .3), transparent 65%),
    var(--zemin);
}
.dinle-kutu {
  text-align: center; padding: 2rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  max-width: 340px;
}
.dinle-marka strong { font-size: 1.3rem; }
.dinle-program { color: var(--metin-2); font-weight: 700; margin: 0; font-size: .9rem; }
.dinle-parca { margin: 0; font-size: 1.05rem; font-weight: 700; }
.dinle-dugme {
  position: relative; width: 86px; height: 86px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--kirmizi); color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(212, 42, 42, .4);
}
.dinle-dugme svg { grid-area: 1 / 1; }
body.caliyor .dinle-dugme { background: var(--yesil); box-shadow: 0 10px 30px rgba(31, 157, 99, .4); }
.dinle-ses { display: flex; align-items: center; gap: .5rem; }
.dinle-cerceve { width: 300px; height: 150px; border: 0; border-radius: var(--yuvarlak); }
.dinle-not { color: var(--metin-3); font-size: .82rem; margin: 0; }
.dinle-baglantilar { display: flex; gap: 1rem; font-size: .85rem; }
.dinle-baglantilar a { color: var(--metin-2); text-decoration: underline; }

/* --- 11. Yardimcilar --------------------------------------------------- */

.gizli-gorsel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* Sayfa gecisinde govde kisa sure soluyor; yerini kaybetmemek icin
   yuksekligi korunuyor (layout shift olmasin). */
main[data-gecis] { opacity: .45; transition: opacity .12s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- 12. Ekran genislikleri ------------------------------------------- */

/* Tablet ve alti: iki kolonlu bolumler tek kolona iner. */
@media (max-width: 1040px) {
  .hero-ic { grid-template-columns: 1fr; }
  .ana-izgara { grid-template-columns: 1fr; }
  .detay-izgara { grid-template-columns: 1fr; }
  .istek-duzen { grid-template-columns: 1fr; }
  .player { max-width: none; }
}

/* Mobil: ust menu cekmeceye, oynatici alt seride, alt menu gorunur. */
@media (max-width: 899px) {
  /* Alt dolgu YALNIZ burada: sabit alt menu ve oynatici seridi yalniz
     mobilde ciziliyor. Masaustunde de vermek, alt bilginin altinda
     ~130px'lik olu siyah bir bant birakiyordu. */
  body {
    padding-bottom: calc(var(--alt-h) + var(--player-h) + env(safe-area-inset-bottom, 0px));
  }

  .ana-menu { display: none; }
  .cekmece-dugme { display: inline-flex; }
  .alt-menu { display: grid; }

  /* Oynatici alt menunun HEMEN ustune sabitlenir. .ust uzerinde
     transform/backdrop-filter olmadigi icin bu konumlandirma calisir. */
  .player {
    position: fixed; z-index: 65;
    left: 0; right: 0;
    bottom: calc(var(--alt-h) + env(safe-area-inset-bottom, 0px));
    height: var(--player-h);
    /* flex kisayolunu sifirliyoruz: sabit konumda flex-basis islemez ama
       Chrome tasan belgede sabit ogeyi de genisletiyor. width/max-width
       ikilisi oynaticiyi her durumda ekran genisliginde tutuyor. */
    flex: 0 0 auto;
    width: 100%; max-width: 100vw; min-width: 0;
    margin: 0; border-radius: 0;
    border: 0; border-top: 1px solid var(--cizgi);
    background: var(--zemin-3);
    padding: .5rem .75rem;
    gap: .7rem;
  }
  .player-sag { display: none; }
  .player-gomulu { padding: 0; background: var(--zemin-3); }
  .player-cerceve { height: var(--player-h); }

  .ust-ic { gap: .6rem; }
  .marka-yazi strong { font-size: 1.05rem; }
  .marka-yazi small { display: none; }

  .detay-ust { flex-direction: column; gap: 1.25rem; }
  .detay-kapak, .detay-kapak.yuvarlak { width: 150px; height: 150px; }
  .sanatci-bas.dev { width: 140px; height: 140px; font-size: 3rem; }

  .gun-uzun { display: none; }
  .gun-kisa { display: inline; }
  .gun-sekmeleri { gap: .3rem; }
  .gun-sekme { padding: .5rem .8rem; }

  .hafta-tablo-kap { display: none; }

  .alt-ic { gap: 1.5rem; }
  .alt-tanitim { flex: 1 1 100%; max-width: none; }
  .alt-bolum { flex: 1 1 130px; }
}

@media (max-width: 560px) {
  .kap { padding: 0 14px; }
  .hero-ic { padding: 1.75rem 14px 2rem; }
  .hero-dugmeler .dugme { flex: 1 1 100%; }
  .istek-izgara, .haber-izgara, .program-izgara { grid-template-columns: 1fr; }
  .kisi-izgara { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .panel-form { padding: 1rem; }
  .alan-kod input { width: 100%; }
  .turku-satir { gap: .6rem; padding: .6rem .8rem; }
  .turku-iste span { display: none; }
  .calan-tarih { display: none; }
  .sayfa-ust h1 svg { display: none; }
}