@charset "utf-8";
:root {
  --light-green: #8BC34A;   /* Aybimaş marka renkleri = Aybimaş İK (aybimas.dev) ile aynı: açık #8BC34A + koyu #1B5E20 (16.10 kullanıcı:
                               "renklerden çok şaştık, Aybimaş renklerinden"). Açık yeşil üstündeki büyük yazılar beyaz. */
  --dark-green: #1B5E20;
  --red: #e03636;
  --dark: #303237;
  --kapak: min(calc(100vh - 176px), 45vw, 800px);  /* geniş ekran: başlık 56 + alt bilgi 30 + kayan yazı 36 + sahne boşluğu 40 + pay 14 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  min-height: 100%;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  background: linear-gradient(160deg, #15501a 0%, #1B5E20 50%, #226b27 100%);
  background-attachment: fixed;
  color: #222;
  display: flex; flex-direction: column;
  height: 100vh; overflow-x: hidden;
}
body:has(.kayan-seri:not(.hidden)) { padding-bottom: 36px; }

.hidden { display: none !important; }

/* Süs katmanları kapalı (yapraklar, dikey yazılar) */
.sayfa-dekor, .shop-modal .yaprak-sahne { display: none !important; }

/* ===== Üst çubuk ===== */
.site-header { background: var(--light-green); box-shadow: 0 1px 4px rgba(0,0,0,.25); flex: 0 0 auto; position: relative; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 20px; }
.logo { font-size: 0; line-height: 0; }
.logo img { height: 44px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.partner-logos { display: flex; align-items: center; margin-right: auto; min-width: 0; }
.partner-logo { height: 34px; width: auto; max-width: 160px; object-fit: contain; display: block; }
/* Başlıkta "Aybimaş / Radyo": logo yazısı + Aybimaş sitesinin başlık yazı tipi Sora (assets/fonts, aybimas.dev ile aynı) */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("assets/fonts/sora-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("assets/fonts/sora-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; }
.marka-yazi { display: flex; align-items: center; gap: 8px; line-height: 1; }
.marka-aybimas { display: block; height: 36px; width: auto; margin-top: -4px; }
.marka-radyo { font-family: "Sora", "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .3em; color: #fff; line-height: 1;
  background: var(--dark-green); padding: 5px 8px 5px calc(8px + .3em); margin-top: 4px; border-radius: 999px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.head-clock { text-align: right; line-height: 1.25; min-width: 0; }
.shop-name-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; height: 28px; padding: 0 10px; border: 1px solid rgba(23,72,35,.45); border-radius: 6px; background: rgba(255,255,255,.5); font: inherit; cursor: pointer; }
.shop-name-btn:hover, .shop-name-btn:focus-visible { border-color: var(--dark-green); background: #fff; }
.ok-asagi { flex: 0 0 auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--dark-green); }
.shop-name { font-size: 14px; font-weight: 700; color: var(--dark-green); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.clock-date { font-size: 12px; color: #2f4a1c; text-transform: capitalize; }
.clock-time { font-size: 24px; font-weight: 700; color: var(--dark-green); font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.menu-btn {
  position: relative; height: 34px; padding: 0 14px;
  background: var(--dark-green); color: #fff; border: 0; border-radius: 6px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.menu-btn:hover { background: #0d3d1b; }
.menu-btn.has-msg, .menu-btn.bildirimli { background: #ffd54a; color: #5a3d00; }

/* ===== Sahne: tam ekran "Şimdi Çalıyor" — kutusuz; geniş ekranda iPad yatay gibi (solda dev kapak, sağda işlevler) =====
   15.10 kullanıcı: "küçücük; bir kare içinde olmasına gerek yok, içindeki işlevler olsun yeter", "şarkının adı sığmıyor, serbest bırak".
   Boyutlar ekranın hem genişliğine hem yüksekliğine göre büyür (vw/vh): 1280x800, 1366x768, 1440x700, 1920x1080'de kaydırma yok. */
.stage { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: center; padding: 20px clamp(20px, 3vw, 48px); }
.sutun { width: 100%; display: flex; justify-content: center; }
.on-air { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4.5vw, 80px); color: #fff; width: 100%; }
.sag { flex: 0 1 clamp(560px, 42vw, 860px); min-width: 300px; display: flex; flex-direction: column; gap: clamp(10px, 2.1vh, 22px); }

.hap-sira { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.on-air-badge { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(12px, 1.6vh, 15px); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; background: rgba(255,255,255,.12); padding: 4px 12px; border-radius: 999px; }
.reklam-flag { background: #ffd54a; color: #5a3d00; font-size: clamp(12px, 1.6vh, 15px); font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #2fd45a; animation: pulse 1.4s infinite; }
.dot.off { background: #8a9a8e; animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Aybimaş renklerinde dev plak (görsel dosyası yok, CSS ile çizilir). Çalarken yalnız .plak-don döner; üstteki parlama
   (::after) sabit kalır, gerçek pikaptaki gibi. will-change: dönüş ekran kartında yapılır, zayıf bilgisayarı yormaz. */
/* overflow: hidden şart (16.10): dönen .plak-don kare kutu, 45°'de köşeleri plağın %20 dışına taşar → sayfa 20-30 px uzayıp kısalır,
   Windows'ta kaydırma çubuğu saniyede birkaç kez açılıp kapanır ve ekran titrer. */
.vinyl { position: relative; flex: 0 0 auto; width: var(--kapak); height: var(--kapak); border-radius: 50%; overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); }
.vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.10) 12%, transparent 18% 50%, rgba(255,255,255,.07) 62%, transparent 68%); }
.plak-don { position: absolute; inset: 0; border-radius: 50%; will-change: transform;
  background:
    radial-gradient(circle, transparent 0 46.5%, rgba(139,195,74,.55) 47%, rgba(139,195,74,.55) 47.6%, transparent 48.2%),
    radial-gradient(circle, transparent 0 78%, rgba(139,195,74,.35) 78.4%, transparent 79%),
    repeating-radial-gradient(circle, #121212 0 2px, #1d1d1d 2px 3px, #0e0e0e 3px 4px);
  box-shadow: inset 0 0 0 calc(var(--kapak) * .018) #0a0a0a; }
.vinyl.spin .plak-don { animation: plakDon 3.6s linear infinite; }
@keyframes plakDon { to { transform: rotate(360deg); } }
.plak-etiket { position: absolute; inset: 31%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26%;
  background: radial-gradient(circle at 50% 40%, #8BC34A 0%, #5f9e3a 48%, #1B5E20 100%); box-shadow: 0 0 0 calc(var(--kapak) * .006) rgba(0,0,0,.5), inset 0 0 18px rgba(0,0,0,.25); }
.plak-etiket img { width: 64%; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.plak-etiket span { font-family: "Sora", "Segoe UI", Arial, sans-serif; font-weight: 800; font-size: calc(var(--kapak) * .036); letter-spacing: .28em; color: #fff; padding-left: .28em; }
.plak-etiket::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; transform: translate(-50%, -50%); border-radius: 50%; background: #0b2e15; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.plak-etiket span, .plak-etiket img { position: relative; }   /* delik ortada, yazılar üstünde ve altında */

/* Ad serbest: satır atlar (en çok 4 satır; gerçek şarkı adlarında kesilmez), sanatçı en çok 2 satır */
.on-air-info { min-width: 0; }
.on-air-info strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere;
  font-size: clamp(26px, min(3.4vw, 5.6vh), 58px); font-weight: 800; line-height: 1.12; letter-spacing: -.5px; }
.sanatci { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
  margin-top: 6px; font-size: clamp(18px, min(2vw, 3.2vh), 32px); line-height: 1.25; color: rgba(255,255,255,.72); }
.sanatci:empty { display: none; }

.ilerleme { display: flex; align-items: center; gap: 14px; }
.ilerleme-sure { flex: 0 0 auto; min-width: 46px; font-size: clamp(13px, 1.9vh, 17px); color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.ilerleme-kalan { text-align: right; }
.ilerleme-cubuk { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.ilerleme-dolu { width: 0; height: 100%; border-radius: 999px; background: var(--light-green); }

/* Kontroller: ortada dev oynat/durdur, yanlarda geri/ileri */
.player-controls { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 48px); }
.pbtn { width: clamp(52px, 8.5vh, 76px); height: clamp(52px, 8.5vh, 76px); border-radius: 50%; border: 0; background: transparent; color: #fff;
  font-size: clamp(24px, 4.4vh, 38px); cursor: pointer; transition: background .15s; display: flex; align-items: center; justify-content: center; padding: 0; }
.pbtn:hover { background: rgba(255,255,255,.14); }
.pbtn.big { width: clamp(76px, 13vh, 118px); height: clamp(76px, 13vh, 118px); font-size: clamp(32px, 6vh, 54px); background: var(--light-green); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.pbtn.big:hover { background: #97cb5b; }

/* Ses: solda simge, ortada geniş kaydırıcı, sağda değer */
.player-volume { display: flex; align-items: center; gap: 14px; }
.player-volume input { flex: 1 1 auto; min-width: 0; height: 22px; accent-color: var(--light-green); }
.player-volume span { flex: 0 0 auto; width: 36px; font-size: clamp(13px, 1.9vh, 17px); text-align: right; opacity: .8; font-variant-numeric: tabular-nums; }
.ses-btn { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ses-btn:hover { background: rgba(255,255,255,.14); }
#muteBtn img { width: 26px; height: 26px; object-fit: contain; display: block; }
#muteBtn.muted img { filter: grayscale(1) brightness(.55); }

.next-line { font-size: clamp(14px, 2vh, 18px); color: rgba(255,255,255,.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-line { font-size: clamp(13px, 1.8vh, 16px); color: rgba(255,255,255,.65); }
.info-line:empty { display: none; }
.gizli-durum { display: none !important; }

/* Büyük, belirgin anons düğmesi (koyu zeminde açık yeşil) */
.anons-buyuk {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; height: clamp(64px, 11vh, 96px); padding: 0 24px; border: 0; border-radius: 18px;
  background: var(--light-green); color: #fff; font: inherit; font-size: clamp(22px, min(2.4vw, 4.2vh), 36px); font-weight: 800; letter-spacing: .6px;
  box-shadow: 0 8px 22px rgba(0,0,0,.4); cursor: pointer; transition: background .15s, transform .08s;
}
.anons-buyuk:hover { background: #97cb5b; }
.anons-buyuk:active { transform: translateY(1px) scale(.99); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.anons-buyuk svg { flex: 0 0 auto; width: 1.4em; height: 1.4em; }
.anons-buyuk.hidden { display: none; }

/* Dar ekran (tablet dikey / telefon): kapak üstte, işlevler altında ortalı */
@media (max-width: 900px) {
  :root { --kapak: min(56vh, calc(100vw - 80px), 520px); }   /* telefon (≤700) aşağıda ayrıca */
  .on-air { flex-direction: column; gap: 22px; }
  .sag { flex: 0 0 auto; width: 100%; max-width: 560px; min-width: 0; text-align: center; }
  .hap-sira { justify-content: center; }
}

/* Galeri kalktı (15.10): öğeler script.js için DOM'da, görünmez */
.gallery { display: none !important; }

/* ===== Alt bilgi ===== */
.site-footer { flex: 0 0 auto; text-align: center; padding: 6px 12px 8px; font-size: 12px; color: rgba(255,255,255,.65); }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .sep { margin: 0 6px; opacity: .5; }

/* ===== Kayan duyuru şeridi ===== */
.kayan-seri {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--light-green); color: #fff;
  border-top: 2px solid var(--dark-green);
  overflow: hidden; white-space: nowrap;
  height: 36px; line-height: 34px;
}
.kayan-seri.hidden { display: none; }
.kayan-ic { display: inline-block; font-size: 18px; font-weight: 700; letter-spacing: .3px; will-change: transform; animation: kayanBant var(--kayan-sure, 40s) linear infinite; }
.kayan-ic.kopya { display: inline-block; }
.kayan-bosluk { display: inline-block; }
@keyframes kayanBant { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ===== Pencereler ===== */
.shop-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,40,20,.88); overflow: hidden; }
.shop-modal.hidden { display: none; }
.shop-card { background: #fff; border-radius: 10px; padding: 20px; max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.shop-card h2 { color: var(--dark-green); margin: 0 0 10px; font-size: 20px; }
.shop-card input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid #c5d3b0; border-radius: 6px; font-size: 14px; }
.shop-card input:focus, .sk-form textarea:focus { outline: none; border-color: var(--dark-green); }
.btn-yes { background: var(--dark-green); color: #fff; border: 0; border-radius: 6px; height: 34px; padding: 0 22px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-yes:hover { background: #0d3d1b; }
.ipucu { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; opacity: .6; }
.btn { height: 34px; border: 0; border-radius: 6px; padding: 0 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn.primary { background: var(--light-green); color: #fff; }
.btn.light { background: rgba(255,255,255,.15); color: #fff; }

/* Şikayet penceresi */
.shop-card.wide { max-width: 520px; display: flex; flex-direction: column; max-height: 86vh; }
.sk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sk-head h2 { margin: 0; }
.sk-close { background: none; border: 0; font-size: 28px; line-height: 1; color: #888; cursor: pointer; padding: 0 4px; }
.sk-close:hover { color: #b02a2a; }
.sk-desc { font-size: 13px; color: #666; margin-bottom: 12px; }
.sk-thread { flex: 1 1 auto; overflow-y: auto; background: #f4f6ef; border-radius: 8px; padding: 12px; margin-bottom: 12px; min-height: 120px; }
.sk-empty { color: #888; font-size: 13px; text-align: center; margin: 20px 0; }
.sk-msg { max-width: 85%; margin-bottom: 10px; }
.sk-msg:last-child { margin-bottom: 0; }
.sk-msg .sk-yazar { font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.sk-msg .sk-metin { background: #fff; padding: 9px 11px; border-radius: 8px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.sk-msg .sk-zaman { font-size: 10px; color: #999; margin-top: 3px; }
.sk-msg.yonetim { margin-left: auto; }
.sk-msg.yonetim .sk-yazar { text-align: right; color: var(--dark-green); }
.sk-msg.yonetim .sk-metin { background: var(--dark-green); color: #fff; }
.sk-msg.yonetim .sk-zaman { text-align: right; }
.sk-msg.magaza .sk-yazar { color: #a06a00; }
.sk-form { display: flex; flex-direction: column; gap: 8px; }
.sk-form textarea { width: 100%; padding: 11px; border: 2px solid var(--light-green); border-radius: 6px; font-size: 15px; font-family: inherit; resize: vertical; }
.sk-form textarea:focus { outline: none; border-color: var(--dark-green); }
.sk-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sk-actions .btn-yes { width: auto; padding: 11px 26px; margin: 0; }
.sk-status { font-size: 13px; color: #666; }
.sk-status.ok { color: var(--dark-green); font-weight: 700; }
.sk-status.bad { color: #b02a2a; }

/* Mesaj rozeti: Şikayet butonunun köşesindeki KÜÇÜK kırmızı nokta */
.menu-btn { position: relative; }
.sk-rozet {
  position: absolute; top: -5px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: #d32f2f; color: #fff; border: 2px solid #fff; border-radius: 999px;
  font-size: 10px; font-weight: 800; line-height: 13px; text-align: center;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  animation: skRozetAtis 1.4s ease-in-out infinite;
}
.sk-rozet.bos { display: none; }
.sk-rozet-sakin { animation: none; opacity: .75; }
.menu-btn.bildirimli { background: #ffd54a; color: #5a3d00; }
@keyframes skRozetAtis { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-3px,-2px); } }
@media (max-width: 560px) {
  .menu-btn { padding: 8px 11px; font-size: 13px; }
}


/* Bölge / mağaza seçimi */
.secim-kart { max-width: 400px; max-height: 90vh; overflow-y: auto; }
.secim-baslik-sira { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.secim-baslik-sira h2 { margin: 0; flex: 1; }
.secim-geri { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid #c5d3b0; background: #f4f7ee; color: var(--dark-green); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.secim-geri:hover { background: #e8efdb; }
.secim-geri.hidden { display: none; }
.bolge-liste { display: flex; flex-direction: column; gap: 6px; }
.bolge-btn { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #dfe3d6; border-radius: 8px; padding: 8px 12px; cursor: pointer; text-align: left; width: 100%; transition: border-color .12s, background .12s; }
.bolge-btn:hover { border-color: var(--dark-green); background: #f2f8ec; }
.bolge-btn .bayrak { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background: var(--light-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.bolge-btn .ad { font-size: 14px; font-weight: 700; color: var(--dark-green); }
.bolge-btn .sayi { font-size: 12px; color: #777; }
.bolge-btn .ok { margin-left: auto; font-size: 18px; color: #b9c2ac; }
.magaza-liste { display: flex; flex-direction: column; gap: 4px; }
.magaza-liste.bos { padding: 12px; text-align: center; color: #777; font-size: 13px; }
.magaza-btn { background: #fff; border: 1px solid #dfe3d6; border-radius: 6px; padding: 8px 12px; cursor: pointer; text-align: left; font-size: 14px; font-weight: 600; color: #2c2c2c; width: 100%; }
.magaza-btn:hover { border-color: var(--dark-green); background: #f2f8ec; color: var(--dark-green); }
.magaza-btn.merkez-btn { background: var(--dark-green); color: #fff; border-color: var(--dark-green); }
.magaza-btn.merkez-btn:hover { background: #0d3d1b; }
.secim-kart { position: relative; }
.secim-kapat { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border: 0; background: none; font-size: 24px; line-height: 1; color: #888; cursor: pointer; padding: 0; }
.secim-kapat:hover { color: #b02a2a; }
.secim-kapat.hidden { display: none; }
.sifre-giris { text-align: center; letter-spacing: 6px; font-size: 18px; }
.sifre-hata { min-height: 18px; margin: 6px 0 8px; font-size: 13px; font-weight: 700; color: #b02a2a; text-align: center; }
.sifre-gonder { width: 100%; }
.sifre-gonder:disabled { opacity: .6; cursor: default; }

/* ===== Küçük ekranlar ===== */
@media (max-width: 900px) {
  body { height: auto; min-height: 100vh; }
  .partner-logos { display: none; }
  .head-clock { margin-left: auto; }
  .clock-time { font-size: 20px; }
  .header-inner { gap: 10px; padding: 0 12px; }
}

/* Telefon (<=700) */
@media (max-width: 700px) {
  :root { --kapak: min(calc(100vw - 40px), 420px); }   /* telefon: kapak ekran genişliğinde, dikey kaydırma serbest */

  /* Üst çubuk iki satır: 1) logo + (Tanzim) + saat  2) mağaza seçme + şikayet */
  .header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 8px 12px; min-height: 0; }
  .logo { grid-column: 1; grid-row: 1; }
  .logo img { height: 40px; }
  .partner-logos { display: flex; grid-column: 2; grid-row: 1; margin: 0; justify-content: flex-start; }
  .partner-logo { height: 28px; max-width: 100%; }
  .marka-yazi { gap: 7px; }
  .marka-aybimas { height: 22px; }
  .marka-radyo { font-size: 11px; padding: 5px 7px 5px calc(7px + .3em); }
  .clock-time { grid-column: 3; grid-row: 1; font-size: 22px; letter-spacing: .5px; justify-self: end; }
  .head-clock { grid-column: 1 / 3; grid-row: 2; margin: 0; text-align: left; }
  .clock-date { display: none; }
  .shop-name-btn { width: 100%; max-width: none; height: 40px; justify-content: space-between; padding: 0 12px; }
  .shop-name { max-width: none; flex: 1 1 auto; min-width: 0; text-align: left; font-size: 15px; }
  .site-menu { grid-column: 3; grid-row: 2; }
  .menu-btn { height: 40px; padding: 0 12px; font-size: 13px; white-space: nowrap; }

  /* Sahne */
  .stage { padding: 14px 20px; align-items: flex-start; }

  /* Kayan şerit ve alt bilgi */
  .kayan-seri { height: 32px; line-height: 30px; }
  .kayan-ic { font-size: 15px; }
  body:has(.kayan-seri:not(.hidden)) { padding-bottom: 32px; }
  .site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; padding: 8px 12px; }
  .site-footer .sep { display: none; }
  .site-footer a { padding: 4px 0; }

  /* Pencereler */
  .shop-modal { padding: 10px; }
  .shop-card { padding: 16px; }
  .shop-card h2 { font-size: 18px; }
  .shop-card input { height: 44px; font-size: 16px; }
  .btn-yes { height: 44px; }
  .secim-kart { max-height: 92vh; max-height: 92dvh; }
  .magaza-liste { max-height: 70vh; max-height: 60dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
  .bolge-liste { max-height: 70vh; max-height: 66dvh; overflow-y: auto; }
  .magaza-btn { min-height: 44px; }
  .bolge-btn { min-height: 48px; }
  .secim-geri { height: 40px; }
  .secim-kapat { width: 40px; height: 40px; top: 4px; right: 4px; }
  .sifre-giris { font-size: 20px; height: 48px; }
  .shop-card.wide { max-height: 92vh; max-height: 92dvh; }
  .sk-close { width: 40px; height: 40px; font-size: 30px; }
  .sk-form textarea { font-size: 16px; }
  .sk-actions .btn-yes { padding: 0 22px; }
}

/* Dar telefon (<=420): Tanzim logosu gizlenir */
@media (max-width: 420px) {
  .partner-logos { display: none; }
  .head-clock { grid-column: 1 / 3; }
}

/* Radyo aynı tarayıcıda başka sekmede açıldı: eski sekme durur (script.js > TEK SEKME) */
.sekme-kapandi { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .65); }
.sekme-kutu { display: flex; flex-direction: column; gap: 8px; max-width: 360px; padding: 18px 20px; border-radius: 8px; background: #fff; color: #303237; font-size: 14px; text-align: center; }
.sekme-kutu b { font-size: 15px; }
.sekme-kutu button { margin-top: 6px; padding: 8px 14px; border: 0; border-radius: 5px; background: #1A602D; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }


/* Duyuru penceresi: galeri (slayt) afişi kadar geniş, uzaktan okunacak büyüklükte; kapatmanın tek yolu "Tamam" */
.not-pencere { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .65); }
.not-kutu { display: flex; flex-direction: column; width: min(1200px, 100%); min-height: min(60vh, 560px); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 14px; background: #fff; color: #303237; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.not-ust { display: flex; align-items: center; gap: 18px; padding: 20px 32px; background: #1A602D; color: #fff; }
.not-ikon { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.not-ikon svg { width: 32px; height: 32px; }
.not-ust small { display: block; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: .75; }
.not-ust b { display: block; font-size: clamp(24px, 3vw, 38px); line-height: 1.2; }
.not-metin { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 28px 40px; overflow-y: auto; font-size: clamp(22px, 3.4vw, 46px); font-weight: 600; line-height: 1.35; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.not-metin > span { margin: auto 0; }   /* kısa metin ortada; uzun metin baştan kaydırılabilir (16.10) */
.not-saat { margin: 0; padding: 0 32px 16px; color: #7d8a6e; font-size: 18px; text-align: center; }
.not-kutu button { margin: 0 32px 28px; padding: 18px 20px; border: 0; border-radius: 10px; background: #1A602D; color: #fff; font-size: 26px; font-weight: 700; cursor: pointer; }
.not-kutu button:hover { background: #154d24; }
/* Ezan penceresi duyurunun altında kalır (ezanda duyuru gelirse o okunur) */
.ezan-pencere { z-index: 8990; }
/* Ezanda Ayasofya (16.10): bütün pencere fotoğraf, yazılar yalnız beyaz — üstte küçük satır, altta ezan adı + sayaç.
   Kullanıcı: "15 renk var ekranda" (yeşil şerit + ay simgesi + beyaz bant kaldırıldı). Foto boyutu/yeri kullanıcı onaylı. */
.ezan-pencere .ezan-gorsel { position: relative; height: min(calc(100vh - 40px), 760px); justify-content: space-between; padding: 22px 36px 30px;
  color: #fff; background: #000 url("assets/ayasofya.jpg") center 38% / cover no-repeat; }
.ezan-gorsel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .78) 100%); }
.ezan-ust, .ezan-alt { position: relative; margin: 0; }
.ezan-ust { font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.ezan-metin { margin: 0; font-size: clamp(30px, 4vw, 56px); font-weight: 700; line-height: 1.15; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.ezan-kalan { margin: 10px 0 0; font-size: clamp(16px, 1.6vw, 22px); text-align: center; opacity: .85; }
@media (max-width: 700px) {
  .not-kutu { min-height: 0; }
  .not-ust { padding: 14px 18px; gap: 12px; }
  .not-ikon { width: 44px; height: 44px; flex-basis: 44px; }
  .not-metin { padding: 20px; }
  .not-saat { font-size: 14px; }
  .not-kutu button { margin: 0 18px 18px; padding: 14px; font-size: 20px; }
}

/* Uygulamayı yükle düğmesi yalnız bilgisayarda (mağaza PC); telefonda üst çubuğa sığmaz */
@media (max-width: 700px) { #yukleBtn { display: none !important; } }

/* ===== Sesli anons ===== */
.site-menu { display: flex; align-items: center; gap: 8px; }
.shop-modal.anons-modal { background: rgba(8,40,20,.45); }
.anons-kart { width: 100%; max-width: 460px; padding: 18px 20px; background: #fff; border: 1px solid #c5d3b0; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.2); font-size: 15px; }
.anons-kart h2 { margin: 0 0 12px; font-size: 18px; color: var(--dark-green); }
.anons-sekmeler { display: flex; gap: 6px; margin-bottom: 14px; }
.anons-sekmeler button { flex: 1 1 0; padding: 7px 6px; border: 1px solid #c5d3b0; border-radius: 6px; background: #fff; font: inherit; font-size: 14px; color: #5b6b4a; cursor: pointer; }
.anons-sekmeler button.secili { background: var(--dark-green); border-color: var(--dark-green); color: #fff; font-weight: 700; }
/* Talimat: yalnız ne yazılacağı. Kutu: yazılan kısım + kendiliğinden eklenen kısım (ek) aynı satırda, cümle gibi okunur */
.anons-talimat { margin-bottom: 6px; font-size: 15px; font-weight: 700; color: #303237; }
.anons-giris-satir { display: flex; align-items: center; gap: 0; cursor: text; padding: 0 12px; border: 2px solid #c5d3b0; border-radius: 8px; background: #fff; }
.anons-giris-satir:focus-within { border-color: var(--dark-green); }
.anons-giris-satir.hidden { display: none; }
.anons-giris-satir input { flex: 0 0 auto; field-sizing: content; min-width: 5ch; max-width: 100%; padding: 11px 0; border: 0; outline: none; background: none; font: inherit; font-size: 18px; font-weight: 700; color: #303237; }
/* 16.10: ek uzadı (" plakalı araç sahibi, …") → kutu daralmaz, ek alt satıra kayar. Boşlukla başlayan ek (plaka) metin
   boşluğu yerine sol pay alır (bosluklu): satır kayınca iki satır aynı hizada başlar. Virgülle başlayan ek bitişik kalır. */
.anons-ek { flex: 0 1 auto; min-width: 0; padding: 6px 0; font-size: 16px; font-weight: 600; color: var(--dark-green); }
.anons-ek.bosluklu { margin-left: .3em; }
.anons-kart textarea { display: block; width: 100%; padding: 10px 12px; border: 2px solid #c5d3b0; border-radius: 8px; font: inherit; font-size: 16px; resize: none; }
.anons-kart textarea:focus { outline: none; border-color: var(--dark-green); }
.anons-onizleme { display: none; }   /* önizleme satırı kalktı: ek kutunun içinde görünüyor */
.anons-hata { min-height: 18px; margin-top: 6px; font-size: 13px; color: #b3261e; }
.anons-dugmeler { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 8px; }
.anons-vazgec { background: none; border: 0; font: inherit; font-size: 15px; color: #5b6b4a; cursor: pointer; }
.anons-vazgec:hover { color: var(--dark-green); }
.anons-dugmeler .btn-yes { height: 40px; padding: 0 28px; font-size: 16px; font-weight: 700; }
.anons-dugmeler .btn-yes:disabled { opacity: .6; cursor: default; }
@media (max-width: 420px) { .anons-ek { font-size: 14px; } .anons-giris-satir input { font-size: 16px; } }
/* "Anons yapılıyor" penceresi: duyuru ve ezan pencerelerinin de üstünde */
.anons-pencere { z-index: 9100; }
.anons-pencere .not-kutu { min-height: min(50vh, 460px); }
.anons-pencere .not-saat { padding-bottom: 32px; font-size: 22px; font-weight: 600; color: #1A602D; }

/* Açılış ekranı: sayfa açılınca müzik başlayana kadar "Yükleniyor" (16.10 kullanıcı: "Duraklatıldı" görünmesin, beklesin, sonra direkt çalsın).
   Seçim penceresinin (200) altında, duyuru/ezan/anons pencerelerinin altında. */
.acilis { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 4vh, 36px);
  padding: 16px; background: linear-gradient(160deg, #15501a 0%, #1B5E20 50%, #226b27 100%); color: #fff; text-align: center; }
.acilis .acilis-plak { --kapak: min(40vh, 70vw, 320px); }
.acilis b { font-family: "Sora", "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: clamp(18px, 3vh, 28px); letter-spacing: .04em; }
.acilis.dokun { cursor: pointer; }
.acilis.dokun b { animation: pulse 1.4s infinite; }