/* ═══════════════════════════════════════════════════════
   forum-skeleton.css
   Forum sayfası için skeleton / shimmer yükleme ekranı
   ═══════════════════════════════════════════════════════ */

/* ── Shimmer animasyonu ── */
@keyframes gm-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── Ortak skeleton blok ── */
.gm-skel {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--gray-100) 25%,
    var(--gray-50)  50%,
    var(--gray-100) 75%
  );
  background-size: 400% 100%;
  animation: gm-shimmer 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
html.dark .gm-skel {
  background: linear-gradient(
    90deg,
    #1A2236 25%,
    #131828 50%,
    #1A2236 75%
  );
  background-size: 400% 100%;
}

/* ── Skeleton overlay: gerçek içerik yüklenince kaybolur ── */
.gm-skeleton-layer {
  display: block;
}
.gm-skeleton-layer.is-hidden {
  display: none !important;
}

/* ══════════════════════════════════════════════════
   TOPNAV skeleton
   ══════════════════════════════════════════════════ */
.skel-topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 58px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  z-index: 300;
}
html.dark .skel-topnav {
  background: rgba(12,15,26,0.96);
  border-bottom-color: #1A2236;
}
.skel-topnav-logo {
  width: 160px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
}
.skel-topnav-search {
  flex: 1;
  max-width: 320px;
  height: 34px;
  border-radius: 100px;
}
.skel-topnav-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.skel-topnav-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.skel-topnav-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

/* ══════════════════════════════════════════════════
   LEFT SIDEBAR skeleton
   ══════════════════════════════════════════════════ */
.skel-left-sidebar {
  padding: 1.5rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Profil mini kartı */
.skel-profile-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.skel-profile-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.skel-profile-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.skel-profile-name  { height: 12px; width: 70%; }
.skel-profile-role  { height: 10px; width: 50%; }

/* Nav ögeler */
.skel-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.skel-nav-item {
  height: 40px;
  border-radius: 12px;
}
.skel-nav-item:nth-child(4) { opacity: 0.85; }
.skel-nav-item:nth-child(5) { opacity: 0.7;  }
.skel-nav-item:nth-child(6) { opacity: 0.55; }
.skel-nav-item:nth-child(7) { opacity: 0.4;  }
.skel-nav-item:nth-child(8) { opacity: 0.25; }

.skel-sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
}
.skel-hamburger {
  height: 40px;
  border-radius: 12px;
  width: 80%;
}

/* ══════════════════════════════════════════════════
   FORUM MAIN skeleton
   ══════════════════════════════════════════════════ */
.skel-forum-main {
  padding: 1.5rem 1.25rem;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Topbar: başlık + buton */
.skel-forum-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.skel-forum-h1  { height: 32px; width: 240px; border-radius: 8px; }
.skel-new-thread-btn { height: 36px; width: 140px; border-radius: 10px; }

/* Kategori pilleri */
.skel-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.skel-cat-pill {
  height: 32px;
  border-radius: 100px;
}
.skel-cat-pill:nth-child(1) { width: 72px;  }
.skel-cat-pill:nth-child(2) { width: 64px;  }
.skel-cat-pill:nth-child(3) { width: 110px; }
.skel-cat-pill:nth-child(4) { width: 82px;  }
.skel-cat-pill:nth-child(5) { width: 120px; }
.skel-cat-pill:nth-child(6) { width: 100px; }
.skel-cat-pill:nth-child(7) { width: 115px; }

/* Sort bar */
.skel-sort-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
  align-items: center;
}
.skel-sort-label { height: 14px; width: 50px; border-radius: 4px; }
.skel-sort-btn   { height: 30px; border-radius: 8px; }
.skel-sort-btn:nth-child(2) { width: 88px;  }
.skel-sort-btn:nth-child(3) { width: 68px;  }
.skel-sort-btn:nth-child(4) { width: 100px; }
.skel-sort-btn:nth-child(5) { width: 112px; }
.skel-sort-btn:nth-child(6) { width: 145px; }

/* ── Thread card skeleton ── */
.skel-thread-card {
  display: flex;
  gap: 12px;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
.skel-thread-card:last-child { border-bottom: none; }

/* Sol: oy kolonu */
.skel-vote-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 36px;
  flex-shrink: 0;
  padding-top: 2px;
}
.skel-vote-btn  { width: 28px; height: 28px; border-radius: 8px; }
.skel-vote-num  { width: 20px; height: 14px; border-radius: 4px; }

/* Orta: içerik */
.skel-thread-content { flex: 1; min-width: 0; }

/* Başlık satırı: badge + başlık */
.skel-thread-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.55rem;
}
.skel-thread-badge { height: 20px; width: 70px; border-radius: 100px; }
.skel-thread-pin   { height: 18px; width: 18px; border-radius: 4px; }

.skel-thread-title {
  height: 20px;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.skel-thread-title--full  { width: 85%; }
.skel-thread-title--short { width: 60%; }

/* Preview satırları */
.skel-thread-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0.7rem;
}
.skel-preview-line {
  height: 13px;
  border-radius: 4px;
}
.skel-preview-line:nth-child(1) { width: 100%; }
.skel-preview-line:nth-child(2) { width: 80%;  }

/* Footer: yazar + istatistikler */
.skel-thread-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.skel-author-av   { width: 20px; height: 20px; border-radius: 50%; }
.skel-author-name { height: 12px; width: 90px; border-radius: 4px; }
.skel-thread-stat { height: 12px; border-radius: 4px; }
.skel-thread-stat:nth-child(3) { width: 48px; }
.skel-thread-stat:nth-child(4) { width: 60px; }
.skel-thread-stat:nth-child(5) { width: 40px; }

/* Sağ: küçük resim placeholder */
.skel-thread-aside {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
}
.skel-thumb {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.skel-thread-last {
  height: 11px;
  width: 80px;
  border-radius: 4px;
}

/* ── Animasyon gecikmesi: kartlara kademeli shimmer ── */
.skel-thread-card:nth-child(1) .gm-skel { animation-delay: 0s;    }
.skel-thread-card:nth-child(2) .gm-skel { animation-delay: 0.08s; }
.skel-thread-card:nth-child(3) .gm-skel { animation-delay: 0.16s; }
.skel-thread-card:nth-child(4) .gm-skel { animation-delay: 0.24s; }
.skel-thread-card:nth-child(5) .gm-skel { animation-delay: 0.32s; }
.skel-thread-card:nth-child(6) .gm-skel { animation-delay: 0.40s; }

/* ══════════════════════════════════════════════════
   RIGHT SIDEBAR skeleton
   ══════════════════════════════════════════════════ */
.skel-right-sidebar {
  padding: 1.5rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Widget ortak */
.skel-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.skel-widget-title {
  height: 12px;
  width: 100px;
  border-radius: 4px;
  margin-bottom: 0.85rem;
}

/* İstatistikler widget */
.skel-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--gray-50);
  gap: 1rem;
}
.skel-stat-row:last-child { border-bottom: none; }
.skel-stat-label { height: 13px; width: 90px; border-radius: 4px; }
.skel-stat-value { height: 13px; width: 40px; border-radius: 4px; }

/* Kategoriler widget */
.skel-cat-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--gray-50);
}
.skel-cat-item:last-child { border-bottom: none; }
.skel-cat-dot   { width: 10px; height: 10px; border-radius: 50%; }
.skel-cat-name  { height: 13px; border-radius: 4px; flex: 1; }
.skel-cat-count { height: 11px; width: 28px; border-radius: 4px; }

.skel-cat-item:nth-child(1) .skel-cat-name { width: 55%; }
.skel-cat-item:nth-child(2) .skel-cat-name { width: 75%; }
.skel-cat-item:nth-child(3) .skel-cat-name { width: 45%; }
.skel-cat-item:nth-child(4) .skel-cat-name { width: 65%; }
.skel-cat-item:nth-child(5) .skel-cat-name { width: 70%; }
.skel-cat-item:nth-child(6) .skel-cat-name { width: 50%; }

/* Hot threads widget */
.skel-hot-thread {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--gray-50);
}
.skel-hot-thread:last-child { border-bottom: none; }
.skel-hot-rank   { width: 16px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.skel-hot-content { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.skel-hot-title  { height: 13px; border-radius: 4px; }
.skel-hot-meta   { height: 10px; width: 65%; border-radius: 4px; }

.skel-hot-thread:nth-child(1) .skel-hot-title { width: 90%; }
.skel-hot-thread:nth-child(2) .skel-hot-title { width: 75%; }
.skel-hot-thread:nth-child(3) .skel-hot-title { width: 85%; }
.skel-hot-thread:nth-child(4) .skel-hot-title { width: 68%; }

/* Destek widget (gradient) */
.skel-support-widget {
  background: linear-gradient(135deg,var(--blue-600),#4338CA);
  border: none !important;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skel-support-line {
  border-radius: 6px;
  background: rgba(255,255,255,0.25) !important;
  animation: gm-shimmer 1.6s ease-in-out infinite !important;
  background-size: 400% 100% !important;
}
.skel-support-line:nth-child(1) { height: 12px; width: 70%; }
.skel-support-line:nth-child(2) { height: 13px; width: 55%; }
.skel-support-line:nth-child(3) { height: 10px; width: 100%; }
.skel-support-line:nth-child(4) { height: 10px; width: 88%; }
.skel-support-btn {
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.3) !important;
  animation: gm-shimmer 1.6s ease-in-out infinite !important;
  background-size: 400% 100% !important;
}

/* ══════════════════════════════════════════════════
   Mobil uyum
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .skel-left-sidebar,
  .skel-right-sidebar { display: none; }

  .skel-topnav { padding: 0 0.75rem; gap: 0.5rem; }
  .skel-topnav-logo { width: 120px; }
  .skel-topnav-search { max-width: none; }

  .skel-forum-main { border: none; }

  .skel-cats { gap: 6px; }

  .skel-thread-aside { display: none; }

  .skel-sort-bar { overflow-x: auto; }
}

/* ══════════════════════════════════════════════════
   Fade-out geçişi (içerik yüklenince)
   ══════════════════════════════════════════════════ */
.gm-skeleton-layer {
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}
.gm-skeleton-layer.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}