/* ═══════════════════════════════════════════════════════════════════════════
   CENTRAL V — RESPONSIVE SEPARATION LAYER v1
   ─────────────────────────────────────────────────────────────────────────
   En SON yüklenir (style → sayfa inline → premium → dm → v2 → responsive).
   Amaç: mobil ve desktop deneyimlerini bilinçli breakpointlerle ayırmak.

   Breakpoint sözleşmesi (site geneli):
     Mobile  : 0–767px
     Tablet  : 768–1023px
     Desktop : 1024px+
     Wide    : 1440px+
   Navbar hamburger eşiği 1100px'dir (nav-links sığmadığı için) — bu bilinçli
   bir istisnadır; 768–1100 arası "dar desktop" nav mobil davranır.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Gerçek navbar yüksekliği: 18px*2 padding + 40px içerik + 1px border */
  --cv-nav-h: 78px;
}

/* ─── GLOBAL GÜVENLİK KURALLARI (tüm breakpointler) ─────────────────────────
   Uzun kullanıcı adı / e-posta / URL / mesaj taşmalarına karşı. */
.pc-title, .pv-title, .notif-title, .notif-msg, .dd-name, .mob-uname,
.bleet-text, .comment-text, .msg-username, .dm-row-name, .nav-username,
.f3-name, .char-name, .nt-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Yatay scroll kilitlenmesin: tablo sarmalayıcıları her zaman kaydırılabilir */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dropdown'lar viewport dışına taşmasın */
.notif-dropdown, .user-dropdown { max-width: calc(100vw - 20px); }

/* ─── WIDE DESKTOP ≥1440 ──────────────────────────────────────────────────
   İçerik ortada minicik kalmasın; kontrollü genişlik artışı. */
@media (min-width: 1440px) {
  .page-wrap { max-width: 1280px; }
}

/* ─── TABLET 768–1023 ───────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-wrap { padding: 38px 26px; }
}

/* ─── DAR NAVBAR BANDI ≤1100 (hamburger aktif) ──────────────────────────── */
@media (max-width: 1100px) {
  /* Mobil nav: dinamik viewport yüksekliği + güvenli alanlar */
  .mobile-nav {
    height: 100vh;
    height: 100dvh;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }
  .mob-links a {
    min-height: 46px;
    display: flex;
    align-items: center;
  }
  .mob-close {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ─── MOBILE ≤767 ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Bildirim paneli: sağa çapalı dar dropdown yerine navbar altında
     tam genişlik sabit panel — taşma ve kırpılma biter. */
  .notif-dropdown {
    position: fixed !important;
    top: calc(var(--cv-nav-h) + 8px);
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    z-index: 1100;
  }
  .notif-dropdown .notif-list { max-height: min(58vh, 420px); }

  /* Kullanıcı menüsü: ekran kenarından taşmasın */
  .user-dropdown { right: -6px; }

  /* Dokunma hedefleri ≥44px */
  .notif-btn { width: 44px; height: 44px; }
  .mobile-menu-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Navbar sıkışması: tek satır kalsın, taşmasın */
  .navbar { gap: 12px; padding-left: 14px !important; padding-right: 14px !important; }
  .nav-buttons { gap: 8px; }
  .nav-username { max-width: 84px; }
}

/* Çok dar ekran ≤400: logo metni küçülür, avatar + ikonlar kalır */
@media (max-width: 400px) {
  .logo { font-size: 1rem; gap: 7px; letter-spacing: .3px; }
  .logo img { height: 32px !important; }
  .nav-username { display: none; }
  .user-btn { padding: 7px 10px; }
  .discord-link { display: none; }
}

/* ─── KISA VIEWPORT (yatay telefon) ─────────────────────────────────────── */
@media (max-height: 540px) and (max-width: 1023px) {
  .mobile-nav { padding-top: 52px !important; }
}

/* ─── REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .notif-dropdown, .user-dropdown, .nav-more-menu { animation: none !important; }
}