/* ============================================================
   RedoNetwork UI — Yardımcılar, responsive kurallar, giriş ekranı
   Kırılımlar: 1280 / 1024 / 768 / 430
   ============================================================ */

/* ---- Yardımcılar ---- */
.flex { display: flex; gap: 10px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); }
.w-full { width: 100%; }
.ta-right { text-align: right; }
.nowrap { white-space: nowrap; }
.divider { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }
.meta { font-size: var(--fs-tiny); color: var(--muted); }
.sec { margin-top: var(--sp-6); }

/* ---- Responsive ---- */
@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-hero { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(300px, 86vw);
    transform: translateX(-104%);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: calc(var(--z-sticky) + 6);
    height: 100dvh;
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow-3); }
  .mobile-shellbar { display: flex; }
  .main { padding: var(--sp-4); }
  .topbar { flex-wrap: wrap; min-height: 0; }
  .search-trigger { min-width: 0; flex: 1; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .form-grid, .form-grid.three { grid-template-columns: 1fr; }
  .topbar .userbox { display: none; }
  .top-actions { width: 100%; }
  .panel-title { flex-direction: column; gap: 8px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-metrics { gap: var(--sp-4); }
  .drawer { width: 100vw; border-left: 0; }
  .toolbar > * { flex: 1 1 auto; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .ann-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 430px) {
  .main { padding: var(--sp-3); }
  .card { padding: var(--sp-4); }
  .hero-panel { padding: var(--sp-5); }
  .btn { min-height: var(--touch-target); }
}

/* ============================================================
   Giriş ekranı — RedoNetwork markası, creator ağı arka planı
   ============================================================ */
.login-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: #0C0F13;
  background-image:
    radial-gradient(900px 460px at 82% -10%, rgba(231,255,114,.13), transparent 60%),
    radial-gradient(760px 520px at -8% 112%, rgba(139,124,255,.14), transparent 58%);
  color: #EDEFE7;
  position: relative;
  overflow: hidden;
}
.login-net { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.login-card {
  position: relative; z-index: 1;
  width: min(400px, 100%);
  background: rgba(20, 24, 30, .86);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow-3);
  animation: rn-pop var(--dur-slow) var(--ease-out);
}
.login-card .brand-logo { height: 44px; margin-bottom: var(--sp-3); }
.login-card h1 { font-size: 1.15rem; color: #F4F7EA; margin-bottom: 4px; }
.login-card .muted { color: rgba(233,237,226,.55); font-size: var(--fs-small); margin-bottom: var(--sp-5); }
.login-card label { color: rgba(233,237,226,.78); }
.login-card input {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  color: #F4F7EA;
  height: 46px;
}
.login-card input:focus { border-color: var(--rn-volt); box-shadow: 0 0 0 3px rgba(231,255,114,.14); }
.login-card input::placeholder { color: rgba(233,237,226,.35); }
.login-card .btn.accent { height: 46px; font-size: var(--fs-body); }
.login-card .alert.error { background: rgba(227,91,106,.14); border-color: rgba(227,91,106,.4); color: #F5A7B1; }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 46px; }
.pass-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: none; border: 0; color: rgba(233,237,226,.5);
  border-radius: var(--radius-xs);
}
.pass-toggle:hover { color: var(--rn-volt); }
.pass-toggle svg { width: 17px; height: 17px; }
.caps-warn { display: none; font-size: var(--fs-tiny); color: var(--rn-amber); margin-top: 4px; }
.caps-warn.show { display: block; }
.login-foot { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-tiny); color: rgba(233,237,226,.35); }

/* ---- Açılış / skeleton yükleme ---- */
.boot-veil {
  position: fixed; inset: 0; z-index: 99;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
.boot-veil.done { opacity: 0; visibility: hidden; }
.boot-veil img { height: 40px; animation: rn-rise var(--dur-slow) var(--ease-out); }
.boot-veil .boot-bar { width: 120px; height: 3px; margin-top: 18px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.boot-veil .boot-bar i { display: block; width: 40%; height: 100%; background: var(--rn-volt-strong); border-radius: inherit; animation: rn-boot 1s var(--ease) infinite; }
@keyframes rn-boot { 0% { transform: translateX(-110%);} 100% { transform: translateX(320%);} }

@media print {
  .sidebar, .mobile-shellbar, .topbar .top-actions, .footer-note, .no-print, .toast-wrap { display: none !important; }
  .main { padding: 0; max-width: none; }
  body { background: #fff; }
  .card { box-shadow: none; }
}