/* ============================================================
   Muhabbetci — Mobil uyum katmanı (mobil.css)
   Bu dosya tüm bileşenleri küçük ekranlara uyarlar.
   style.css, call.css, effects.css, livecam.css, radio.css,
   ranks.css, rooms.css, newroom.css, ban.css dosyalarını
   tamamlar; aynı sınıfları daha küçük ekranlarda geçersiz kılar.
   ============================================================ */

/* ============================================================
   ORTAK DOKUNMATİK TABAN
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; }

button, a, .chip, .fx-tile, .fx-chip, .room-item, .user-item,
.speaker-item, .liveCamChip, .pm-act, .mini-btn, .rank-btn,
.ban-btn, .q-btn, .nr-btn, .radioBar-btn, .camViewBtn, .pmtoast-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* dokunmatikte küçük düğmeleri büyüt */
@media (hover: none) {
  .icon-btn { min-width: 40px; min-height: 40px; }
  .icon-btn.tiny { min-width: 32px; min-height: 32px; }
  .mini-btn { min-width: 32px; min-height: 32px; }
  .radioBar-btn { min-width: 36px; min-height: 36px; }
  .q-btn, .rank-btn, .ban-btn { min-height: 30px; }
  .chip, .fx-chip { min-height: 28px; }
  .fx-tile { min-height: 74px; }
}

/* ============================================================
   1120px — küçük masaüstü / yatay tablet
   ============================================================ */
@media (max-width: 1120px) {
  .layout { grid-template-columns: 200px minmax(0,1fr) 226px; }
  .room-sign { font-size: 10px; padding: 2px 8px; }
}

/* ============================================================
   980px — tablet: sol panel çekmeceye döner
   ============================================================ */
@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0,1fr) 220px; }

  .menu-btn { display: grid; }
  .rooms-panel {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: min(262px, 82vw);
    z-index: 80;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2,.8,.3,1);
    box-shadow: var(--shadow-lg);
  }
  .rooms-panel.open { transform: translateX(0); }

  /* radyo şeridi ve oda imzası daralır */
  .radioBar { margin: 0 10px; padding: 8px 11px; gap: 9px; }
  .radioBar-title { font-size: 12.5px; }
  .radioBar-vol { width: 64px; }
  .radioEq { display: none; }

  /* panel genişlikleri */
  .admin-panel { width: min(340px, 88vw); }
  .rank-modal-card { width: min(320px, calc(100vw - 28px)); }
}

/* ============================================================
   760px — büyük telefon / küçük tablet
   ============================================================ */
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0,1fr); }

  /* sağ panel çekmeceye döner */
  .users-panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(280px, 86vw);
    z-index: 80;
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.2,.8,.3,1);
    box-shadow: var(--shadow-lg);
  }
  .users-panel.open { transform: translateX(0); }

  /* iki çekmece aynı anda açılmasın */
  .rooms-panel.open ~ .users-panel.open { transform: translateX(100%); }

  .fab { display: grid; }
  .mobile-drawer-head { display: flex; }
  .mobile-drawer-head.hidden { display: none; }

  /* iOS yakınlaştırmasını önle */
  .field input, .field select,
  .chat-form input,
  .fx-search input,
  #nrName, #nrSub {
    font-size: 16px;
  }

  /* özel sohbet tam ekran */
  .pm-panel {
    width: 100%; height: 100%;
    border-radius: 0;
    top: 0; left: 0;
    transform: none;
  }
  .pm-panel.open { transform: none; }
  .pm-main { flex-direction: column; }
  .pm-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-left: none;
    border-top: 1px solid var(--line);
    padding: 10px 12px;
    gap: 8px;
  }
  .pm-act { flex: 0 0 auto; min-width: 92px; padding: 10px 8px; }
  .pm-act-txt { font-size: 11px; }
  .pm-actions::-webkit-scrollbar { height: 0; }

  /* efekt paneli tam ekran */
  .fx-panel {
    width: 100%; height: 100%;
    border-radius: 0;
    top: 0; left: 0;
    transform: none;
  }
  .fx-panel.open { transform: none; }
  .fx-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }

  /* DJ paneli tam ekran */
  .radioDjPanel {
    width: 100%; height: 100%;
    border-radius: 0;
    top: 0; left: 0;
    transform: none;
  }
  .radioDjPanel.open { transform: none; }

  /* kamera penceresi */
  .camView { width: calc(100% - 24px); }
  .camView.mini { width: 200px; right: 12px; bottom: 12px; }

  /* işlem menüsü */
  .modmenu { width: min(300px, calc(100vw - 24px)); }

  /* radyo çubuğu sarar */
  .radioBar { flex-wrap: wrap; row-gap: 7px; }
  .radioBar-vol { width: 100%; order: 9; }

  /* yeni oda paneli */
  .nr-panel { width: min(420px, calc(100vw - 24px)); }

  /* rütbe ve üye listeleri */
  .rank-row, .q-item { padding: 8px; }
  .rank-btn, .q-btn { font-size: 10.5px; padding: 5px 9px; }

  /* bildirimler */
  .pmtoast { width: min(400px, calc(100vw - 34px)); }
}

/* ============================================================
   560px — telefon
   ============================================================ */
@media (max-width: 560px) {
  /* üst bar */
  .topbar { padding: 8px 10px; gap: 7px; }
  .brand-mark.small { width: 28px; height: 28px; font-size: 11px; }
  .room-info h2 { font-size: 14px; }
  .online { font-size: 10.5px; }
  .icon-btn { width: 36px; height: 36px; border-radius: 9px; }
  .icon-btn .ico { font-size: 15px; }
  .topCamBtn { padding: 7px 10px; }
  .topCam-txt { display: none; }
  .liveCamStrip { max-width: 32vw; }

  /* kontrol çubuğu — yalnızca simgeler */
  .controls { gap: 6px; padding: 9px 10px; }
  .ctrl { padding: 10px 12px; min-height: 40px; }
  .ctrl span:not(.ico) { display: none; }
  .ctrl-radio .ctrl-stack,
  .ctrl-djreg .ctrl-stack { display: none; }
  .ctrl-radio .ico,
  .ctrl-djreg .ico { font-size: 17px; }

  /* sohbet */
  .chat-scroll { padding: 12px; }
  .msg { gap: 7px; }
  .msg .avatar-xs { width: 24px; height: 24px; font-size: 10px; }
  .msg-text { font-size: 13px; }
  .msg-author { font-size: 12px; }
  .chat-form { padding: 8px 10px 10px; gap: 6px; }
  .send-btn { width: 40px; height: 40px; }

  /* giriş ekranı */
  .login-card { padding: 24px 18px 18px; max-width: 100%; }
  .brand .brand-mark { width: 48px; height: 48px; font-size: 18px; }
  .brand h1 { font-size: 21px; }
  .brand-sub { font-size: 12.5px; }
  .auth-row { grid-template-columns: 1fr; gap: 7px; }
  .legal { font-size: 11px; }

  /* bildirimler */
  .toast { font-size: 12.5px; padding: 9px 13px; }
  .pmtoast { padding: 16px 15px 20px; }
  .pmtoast-title { font-size: 15px; }
  .pmtoast-avatar { width: 42px; height: 42px; font-size: 16px; }
  .pmtoast-actions { gap: 7px; }
  .pmtoast-btn { padding: 9px 12px; font-size: 12.5px; }

  /* rozetler küçülür */
  .priv-badge { font-size: 8.5px; padding: 1px 6px 1px 5px; margin-left: 4px; }
  .priv-star { font-size: 8.5px; }
  .role-tag { font-size: 8.5px; padding: 2px 5px; }
  .room-sign { display: none; }

  /* efekt ızgarası */
  .fx-emoji { font-size: 22px; }
  .fx-name { font-size: 9px; }
  .fx-chip-n { display: none; }
  .fx-foot { gap: 8px; padding: 10px 12px; }
  .fx-send-btn { padding: 10px 15px; }

  /* radyo */
  .radioBar-title { font-size: 12px; }
  .radioBar-sub { font-size: 10px; }
  .radioBar-disc { width: 30px; height: 30px; font-size: 15px; }
  .radioBar-time { font-size: 10.5px; }
  .djControls { gap: 6px; }
  .djBtn { min-width: 74px; font-size: 11px; padding: 9px 7px; }
  .djNow { margin: 12px 12px 10px; padding: 11px 12px; gap: 10px; }
  .djNow-disc { width: 42px; height: 42px; font-size: 20px; }
  .djNow-track { font-size: 14px; }

  /* yönetici paneli */
  .admin-panel { width: 100%; }
  .admin-sec { padding: 12px; }
  .ban-item { padding: 8px; gap: 7px; }
  .ban-btn { padding: 4px 8px; font-size: 10px; }

  /* kamera penceresi tam ekran */
  .camView {
    width: 100%; height: 100%;
    border-radius: 0;
    top: 0; left: 0;
    transform: none;
  }
  .camView.open { transform: none; }
  .camView.mini { width: 172px; height: auto; right: 10px; bottom: 10px; border-radius: var(--r-sm); }

  /* yeni oda paneli */
  .nr-panel { width: 100%; max-height: 90%; }
  .nr-icon { height: 38px; font-size: 17px; }
}

/* ============================================================
   400px — küçük telefon
   ============================================================ */
@media (max-width: 400px) {
  .liveCamStrip { display: none; }
  .icon-btn { width: 34px; height: 34px; }
  .ctrl { padding: 9px 10px; }
  .msg-text { font-size: 12.5px; }
  .fx-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
  .fx-emoji { font-size: 20px; }
  .pm-act { min-width: 80px; }
}

/* ============================================================
   YATAY TELEFON
   ============================================================ */
@media (max-height: 560px) and (orientation: landscape) {
  .controls { padding: 6px 12px; }
  .ctrl span:not(.ico) { display: none; }
  .ctrl-radio .ctrl-stack,
  .ctrl-djreg .ctrl-stack { display: none; }
  .chat-scroll { padding: 10px 14px; }
  .room-chat { min-height: 120px; }
  .fx-panel, .pm-panel, .radioDjPanel { height: calc(100% - 12px); }
  .camViewStage { max-height: 190px; }
  .pmtoast { padding: 13px 14px 17px; }
  .pmtoast-rings { display: none; }
}

/* ============================================================
   ÇENTİKLİ EKRANLAR — güvenli alan
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  .controls { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .chat-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .fx-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pm-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .nr-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast-wrap { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .fab { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .fab-users { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .login-screen { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); }
}

/* ============================================================
   HAREKET AZALTMA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .rooms-panel, .users-panel, .pm-panel, .fx-panel, .radioDjPanel { transition: none !important; }
}

/* ============================================================
   KOYU TEMA / YÜKSEK KONTRAST
   ============================================================ */
@media (prefers-contrast: more) {
  :root { --line: #3a4459; --txt-dim: #a8b4c6; --txt-mute: #8492a6; }
}