/**
 * VOID Web Panel v4 — paylaşılan arayüz katmanı.
 * Mevcut tema tokenlarını kullanır (yeni renk sabiti yok).
 * İçerik: duyuru bandı, auth chrome, bildirim paneli, skeleton, boş/hata durumu,
 *         onay penceresi, haber kartları, giriş animasyonları.
 */

/* ---------------- Motion ---------------- */
@keyframes v4-fade-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes v4-shimmer {
  from { background-position: -420px 0; }
  to { background-position: 420px 0; }
}
@keyframes v4-pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

[data-v4-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity calc(var(--void-motion-slow) * 2.4) ease,
    transform calc(var(--void-motion-slow) * 2.4) cubic-bezier(0.22, 1, 0.36, 1);
}
[data-v4-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-v4-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Ana sayfa haber grid ---------------- */
.home-news-section {
  margin: 0 14px 20px;
}
.home-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-news-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-deep-a), var(--panel-deep-b));
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease;
}
.home-news-card:hover {
  transform: translateY(var(--void-lift-btn));
  border-color: var(--void-primary-line);
}
.home-news-card img,
.home-news-card__ph {
  width: 96px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--void-primary) 12%, transparent);
}
.home-news-card strong {
  display: block;
  font-size: 0.95rem;
  margin: 2px 0 4px;
}
.home-news-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-news-card__cat {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--void-primary);
}
@media (max-width: 900px) {
  .home-news-grid { grid-template-columns: 1fr; }
}

/* ---------------- Duyuru bandı ---------------- */
.v4-annc-bar {
  position: relative;
  z-index: 40;
  display: grid;
  gap: 6px;
  padding: 8px clamp(12px, 4vw, 28px) 0;
}
.v4-annc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 0.9);
  background: linear-gradient(120deg, var(--panel-deep-a), var(--panel-deep-b));
  color: var(--text-soft);
  font-size: 0.92rem;
  animation: v4-fade-up 240ms ease both;
}
.v4-annc.is-closing { opacity: 0; transform: translateY(-6px); transition: all 180ms ease; }
.v4-annc__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--void-primary);
  box-shadow: 0 0 12px var(--void-primary-a35);
  flex: none;
}
.v4-annc--success .v4-annc__dot { background: var(--status-ok); box-shadow: none; }
.v4-annc--warning .v4-annc__dot { background: var(--status-warn); box-shadow: none; }
.v4-annc--critical { border-color: var(--danger-wash); }
.v4-annc--critical .v4-annc__dot { background: var(--status-danger); box-shadow: none; }
.v4-annc__title { color: var(--text); font-weight: 700; flex: none; }
.v4-annc__msg { flex: 1 1 auto; min-width: 0; color: var(--muted); }
.v4-annc__cta {
  flex: none;
  color: var(--void-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--void-primary-line);
}
.v4-annc__close {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.v4-annc__close:hover { color: var(--text); background: var(--overlay-white-06); }

@media (max-width: 720px) {
  .v4-annc { flex-wrap: wrap; }
  .v4-annc__msg { flex-basis: 100%; }
}

/* ---------------- Header auth chrome ---------------- */
.v4-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v4-auth__bell {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--void-surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: transform var(--void-motion) ease, border-color var(--void-motion) ease;
}
.v4-auth__bell:hover { transform: translateY(var(--void-lift-btn)); border-color: var(--void-primary-line); }
.v4-auth__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--status-danger);
  color: var(--pure-white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
}
.v4-auth__admin {
  padding: 8px 14px;
  border-radius: calc(var(--radius) * 0.8);
  border: 1px solid var(--void-secondary-line);
  background: var(--void-secondary-a14);
  color: var(--text);
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: none;
}
.v4-auth__admin:hover { background: var(--void-secondary-a20); }
.v4-auth__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--void-surface);
  text-decoration: none;
  color: var(--text);
}
.v4-auth__chip img,
.v4-auth__initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--void-grad);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 0.85rem;
}
.v4-auth__meta { display: grid; line-height: 1.15; }
.v4-auth__meta strong { font-size: 0.85rem; }
.v4-auth__meta small { font-size: 0.7rem; color: var(--muted); }
.v4-auth__profile { position: relative; }
.v4-auth__chip { cursor: pointer; appearance: none; font: inherit; }
.v4-auth__caret {
  margin-left: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  transition: transform 160ms ease;
}
.v4-auth__chip[aria-expanded='true'] .v4-auth__caret { transform: rotate(180deg); }
.v4-auth__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 186px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-deep-a), var(--panel-deep-b));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 2px;
  z-index: 80;
}
.v4-auth__menu[aria-hidden='true'] { display: none; }
.v4-auth__menu a,
.v4-auth__menu button {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  text-decoration: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.v4-auth__menu a:hover,
.v4-auth__menu button:hover {
  background: color-mix(in srgb, var(--void-primary) 12%, transparent);
  color: var(--text);
}
.v4-auth__menu [data-void-logout] { color: var(--status-danger); }
.v4-auth__logout {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: calc(var(--radius) * 0.8);
  padding: 8px 12px;
  font-size: 0.82rem;
  cursor: pointer;
}
.v4-auth__logout:hover { color: var(--status-danger); border-color: var(--danger-wash); }

@media (max-width: 900px) {
  .v4-auth__meta { display: none; }
  .v4-auth__logout { display: none; }
}

/* ---------------- Bildirim paneli ---------------- */
.v4-notify {
  position: fixed;
  top: 76px;
  right: clamp(10px, 3vw, 28px);
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, 70vh);
  overflow: hidden auto;
  z-index: 120;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-deep-a);
  backdrop-filter: blur(calc(10px * var(--void-blur-level)));
  box-shadow: 0 24px 60px var(--overlay-black-5);
  animation: v4-pop 160ms ease both;
}
.v4-notify[aria-hidden='true'] { display: none; }
.v4-notify__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.v4-notify__all {
  border: 0;
  background: transparent;
  color: var(--void-primary);
  font-size: 0.78rem;
  cursor: pointer;
}
.v4-notify__list { display: grid; }
.v4-notify__item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--surface-muted-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text-soft);
}
.v4-notify__item:hover { background: var(--overlay-white-04); }
.v4-notify__item.is-unread { background: var(--void-primary-a08); }
.v4-notify__icon { font-size: 1rem; }
.v4-notify__body { display: grid; gap: 2px; min-width: 0; }
.v4-notify__body strong { color: var(--text); font-size: 0.88rem; }
.v4-notify__body span { font-size: 0.82rem; color: var(--muted); }
.v4-notify__body small { font-size: 0.72rem; color: var(--text-faint); }
.v4-notify__empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 0.86rem; }

/* ---------------- Skeleton / boş / hata ---------------- */
.v4-skeleton { display: grid; gap: 12px; }
.v4-skeleton__line,
.v4-skeleton__card {
  border-radius: calc(var(--radius) * 0.8);
  background: linear-gradient(
    90deg,
    var(--overlay-white-04) 0%,
    var(--overlay-white-08) 40%,
    var(--overlay-white-04) 80%
  );
  background-size: 420px 100%;
  animation: v4-shimmer 1.3s linear infinite;
}
.v4-skeleton__line { height: 16px; }
.v4-skeleton__card { height: 180px; }

.v4-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 34px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--void-surface-strong);
  color: var(--muted);
}
.v4-empty h3 { color: var(--text); margin: 0; font-size: 1.05rem; }
.v4-empty p { margin: 0; font-size: 0.9rem; }
.v4-empty__mark { font-size: 1.6rem; opacity: 0.75; }
.v4-empty--error { border-color: var(--danger-wash); }

/* ---------------- Onay penceresi ---------------- */
.v4-confirm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--overlay-black-55);
  opacity: 0;
  transition: opacity 160ms ease;
}
.v4-confirm.is-on { opacity: 1; }
.v4-confirm__card {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-deep-a);
  animation: v4-pop 180ms ease both;
}
.v4-confirm__card h3 { margin: 0; color: var(--text); }
.v4-confirm__card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.v4-confirm__actions { display: flex; gap: 10px; justify-content: flex-end; }
.gradient-btn.is-danger { background: linear-gradient(120deg, var(--status-danger), var(--status-danger-hot)); }

/* ---------------- Haber kartları ---------------- */
.news-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.news-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.news-filter {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--void-motion) ease, border-color var(--void-motion) ease;
}
.news-filter:hover { color: var(--text); }
.news-filter.is-active { color: var(--on-accent); background: var(--void-grad); border-color: transparent; font-weight: 700; }
.news-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 9px 14px;
  border-radius: calc(var(--radius) * 0.8);
  border: 1px solid var(--line);
  background: var(--void-surface);
  color: var(--text);
}
.news-count { color: var(--muted); font-size: 0.85rem; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.news-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  transition: transform var(--void-motion-slow) ease, border-color var(--void-motion-slow) ease;
}
.news-card:hover { transform: translateY(var(--void-lift-card)); border-color: var(--void-primary-line); }
.news-card__link { display: grid; text-decoration: none; color: inherit; height: 100%; }
.news-card__cover { width: 100%; height: 168px; object-fit: cover; display: block; }
.news-card__cover--empty { background: var(--void-grad); opacity: 0.35; }
.news-card__body { display: grid; gap: 8px; padding: 16px 18px 18px; align-content: start; }
.news-card__cat {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--void-primary-a14);
  color: var(--void-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.news-card__body h3 { margin: 0; color: var(--text); font-size: 1.05rem; line-height: 1.3; }
.news-card__body p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.news-card__body footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-faint);
  font-size: 0.76rem;
  padding-top: 6px;
  border-top: 1px solid var(--surface-muted-line);
}

.news-detail { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.news-back { color: var(--muted); text-decoration: none; font-size: 0.86rem; justify-self: start; }
.news-back:hover { color: var(--void-primary); }
.news-detail__cover { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius); }
.news-detail__title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--text); line-height: 1.15; }
.news-detail__meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-faint); font-size: 0.82rem; }
.news-detail__tags { display: flex; gap: 8px; flex-wrap: wrap; color: var(--void-primary); font-size: 0.78rem; }
.news-detail__body { color: var(--text-soft); line-height: 1.75; font-size: 1rem; }
.news-detail__body h2 { color: var(--text); font-size: 1.3rem; margin: 22px 0 8px; }
.news-detail__body h3 { color: var(--text); font-size: 1.08rem; margin: 18px 0 6px; }
.news-detail__body ul { padding-left: 20px; display: grid; gap: 6px; }