/* ===== Mobil arayüz: giriş, kayıt, profil seçimi, planlar, ödeme, profilim, canlı TV, yönetim, 404 =====
   Tüm kurallar yalnızca dar ekranda (veya dokunmatik + orta genişlik) geçerlidir; masaüstü etkilenmez. */
@media (max-width: 768px) {
  html, body { overflow-x: clip; -webkit-text-size-adjust: 100%; }
  input, select, textarea { font-size: 16px !important; } /* iOS odaklanınca yakınlaştırmasın */
  button, a, .nav-link, .tab-btn { -webkit-tap-highlight-color: transparent; }
  #aw-toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 28px); }

  /* ---------- Giriş / Kayıt ---------- */
  .auth-bg { align-items: flex-start; padding: calc(env(safe-area-inset-top, 0px) + 28px) 0 calc(24px + env(safe-area-inset-bottom, 0px));
    background-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 62%), radial-gradient(120% 60% at 50% 0%, rgba(229,9,20,.38), rgba(0,0,0,0) 70%); }
  .auth-bg::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0; }
  .auth-card { background: transparent; max-width: 440px; padding: 56px 22px 24px; margin: 0 auto; min-height: calc(100svh - 52px); display: flex; flex-direction: column; }
  .auth-card h2 { font-size: 1.9rem; margin-bottom: 22px; }
  .field { margin-bottom: 14px; }
  .field input, .field select { height: 52px; padding: 0 16px; border-radius: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }
  .field input:focus { background: rgba(255,255,255,.14); border-color: #fff; }
  .btn-main { min-height: 52px; border-radius: 8px; font-size: 1.02rem; margin-top: 6px; }
  .auth-card { position: relative; }
  .auth-card::before { content: 'DAFMIX'; position: absolute; left: 22px; top: 8px; font-weight: 800; font-size: 1.3rem; letter-spacing: 3px; color: #E50914; text-shadow: 0 0 14px rgba(229,9,20,.5); }
  .auth-alt { margin-top: auto; padding-top: 28px; text-align: center; font-size: .95rem; }
  .form-error { min-height: 1.2em; }

  /* ---------- Profil seçimi ---------- */
  .profiles-page { justify-content: flex-start; padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px 40px; }
  .profile-title { font-size: 1.9rem; margin: 0 0 26px; text-align: center; }
  .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; width: 100%; max-width: 360px; justify-items: center; }
  .profile-card { width: 100%; max-width: 150px; }
  .profile-card:hover, .profile-card:focus-visible { transform: none; }
  .profile-card:active { transform: scale(.96); }
  .profile-avatar { width: 100% !important; height: auto !important; aspect-ratio: 1; }
  .manage-btn { margin-top: 36px; min-height: 48px; font-size: .95rem; padding: 0 26px; border-radius: 6px; }
  .modal-card { width: calc(100vw - 24px); max-width: 460px; max-height: calc(100dvh - 40px); overflow-y: auto; }

  /* ---------- Planlar / Ödeme ---------- */
  .checkout-grid { gap: 14px; }

  /* ---------- 404 ---------- */
  .nf, .not-found { padding: 24px; text-align: center; }

  /* ---------- Ortak üst çubuk (profilim + canlı TV) ---------- */
  .mp-bar, .live-page #navbar, body > header#navbar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* ===== Profilim ===== */
@media (max-width: 768px) {
  body:has(.profile-container) { padding-top: calc(env(safe-area-inset-top, 0px) + 100px); }
  body:has(.profile-container) header { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 8px; }
  body:has(.profile-container) .logo { font-size: 19px; grid-column: 1; grid-row: 1; letter-spacing: 1.5px; }
  body:has(.profile-container) .topbar-profile { grid-column: 2; grid-row: 1; gap: 10px; }
  body:has(.profile-container) #top-name { display: none; }
  body:has(.profile-container) .main-nav { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 8px !important; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; width: auto !important; order: 0 !important; }
  body:has(.profile-container) .main-nav::-webkit-scrollbar { display: none; }
  body:has(.profile-container) .nav-link { flex: none; white-space: nowrap; font-size: .86rem; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.09); min-height: 36px; display: inline-flex; align-items: center; box-sizing: border-box; line-height: 1.1; }
  body:has(.profile-container) .nav-link.active { background: #fff; color: #000 !important; font-weight: 700; }

  .profile-container { margin: 14px auto 0; padding: 0 14px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .profile-header { padding: 22px 16px; gap: 18px; flex-direction: column; align-items: stretch; border-radius: 16px; }
  .user-info { min-width: 0; flex-direction: column; text-align: center; gap: 14px; }
  .big-avatar { width: 104px; height: 104px; }
  .profile-details { max-width: none; align-items: center; }
  .profile-name { font-size: 1.9rem; }
  .profile-role { justify-content: center; flex-wrap: wrap; }
  .header-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .header-actions > * { justify-content: center; min-height: 46px; padding: 0 12px; }
  .header-actions .danger { grid-column: 1 / -1; }
  .action-btn:hover { transform: none; }
  .dashboard-grid { gap: 14px; margin-bottom: 26px; }
  .dash-card { padding: 16px; border-radius: 14px; }
  .radar-container { height: 240px; }
  .stats-mini-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  .mini-stat { padding: 12px 8px; }
  .heatmap-wrapper { padding: 14px 10px; }
  .tabs-header { margin: 0 -14px 18px; padding: 0 14px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs-header::-webkit-scrollbar { display: none; }
  .tabs { flex-wrap: nowrap; gap: 6px; }
  .tab-btn { font-size: .98rem; padding: 14px 10px; flex: none; }
  .list-header { margin-bottom: 16px; }
  .list-title { font-size: 1.35rem; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-img { height: auto; aspect-ratio: 2/3; }
  .content-card:hover { transform: none; }
  .remove-btn { opacity: 1; width: 32px; height: 32px; }
  .badge-row-card { flex-wrap: wrap; }
  .pagination-controls { gap: 12px; margin: 24px 0; }
  #share-card-canvas { transform: scale(min(1, calc((100vw - 28px) / 400px))); transform-origin: center; }
}

/* ===== Canlı TV ===== */
@media (max-width: 768px) {
  .live-page #navbar { padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; height: auto; min-height: 56px; gap: 10px !important; }
  .live-page .logo span span { display: none; } /* yalnızca logo simgesi */
  .live-page .main-nav { gap: 8px !important; scrollbar-width: none; }
  .live-page .main-nav::-webkit-scrollbar { display: none; }
  .live-page .nav-link { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.09); min-height: 36px; display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; line-height: 1.1; box-sizing: border-box; }
  .live-page .nav-link.active { background: #fff; color: #000 !important; font-weight: 700; }
  .live-page .nav-link.active i { color: #E50914 !important; }
  .live-page .user-profile > .fa-caret-down { display: none; }
  .live-page .avatar { width: 32px; height: 32px; border-radius: 6px; }
  .live-page .user-menu-pop { position: fixed; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 56px); min-width: 230px; max-width: calc(100vw - 20px); }
  .live-page .user-menu-pop a { padding: 13px 16px; font-size: 1rem; }
  .live-layout { padding-top: calc(env(safe-area-inset-top, 0px) + 56px) !important; }
  .stage-wrap { top: calc(env(safe-area-inset-top, 0px) + 56px) !important; }
  .live-side { margin: 12px 12px 0 !important; }
  .live-side .channel-item { min-height: 58px; }
  .live-cats { padding-left: 2px; }
  .live-cat { min-height: 38px; display: inline-flex; align-items: center; }
  .ch-fav { padding: 12px; }
}

/* ===== Yönetim paneli ===== */
@media (max-width: 900px) {
  .adm { display: block; }
  .adm-nav { position: sticky; top: 0; z-index: 60; height: auto; display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 6px; border-right: 0; border-bottom: 1px solid #222; background: rgba(10,10,10,.96); backdrop-filter: blur(10px); overflow: visible; }
  .adm-nav .logo { grid-column: 1; grid-row: 1; padding: 0; font-size: 18px; }
  .adm-foot { grid-column: 2; grid-row: 1; margin: 0; flex-direction: row; gap: 2px; }
  .adm-foot a { padding: 8px 10px; font-size: .82rem; white-space: nowrap; }
  .adm-nav nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -12px; padding: 2px 12px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .adm-nav nav::-webkit-scrollbar { display: none; }
  .adm-nav nav button { flex: none; white-space: nowrap; padding: 0 14px; min-height: 38px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: .86rem; gap: 8px; }
  .adm-nav nav button.active { background: #fff; color: #000; box-shadow: none; font-weight: 700; }
  .adm-main { padding: 18px 14px calc(70px + env(safe-area-inset-bottom, 0px)); }
  .adm-main h1 { font-size: 1.4rem; }
  .adm-main .sub { margin-bottom: 16px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px 12px; } .stat b { font-size: 1.5rem; }
  .panel { padding: 14px; overflow-x: auto; }
  .toolbar { gap: 8px; } .toolbar .grow { min-width: 100%; }
  .toolbar .btn, .toolbar .sel { min-height: 42px; }
  .btn { min-height: 40px; } .btn.sm { min-height: 34px; }
  .in, .sel, .ta { min-height: 44px; }
  .mode-card > div[style*="flex"] { padding: 0 14px 4px; }
  .mode-card > .hint { padding: 0 14px 12px; }
  .mode-card .in { min-width: 0 !important; width: 100%; flex: 1 1 100% !important; }
  .mode-card .btn { width: 100%; justify-content: center; }
  table.t { font-size: .85rem; } table.t th, table.t td { padding: 8px 8px; }
  .src-row { grid-template-columns: 1fr; }
  .src-row input:nth-child(2) { grid-column: auto; order: 0; }
  .season > summary { padding: 12px; } .season-body { padding: 10px 12px; }
  .modal-card.wide { max-width: calc(100vw - 20px); }
}