:root{ --card-radius:16px; }
.card{ border-radius:var(--card-radius); }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.page-title{ font-weight:700; letter-spacing:-0.2px; }
.meta{ color:#6c757d; font-size:.9rem; }
/* Header logo boyutları */
.site-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

/* Mobilde biraz küçült */
@media (max-width: 576px) {
    .site-logo {
        width: 38px;
        height: 38px;
    }
}

/* =========================
   Modern UI Tokens
========================= */
:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, .10);

  --primary: #0b5ed7;      /* kurumsal mavi */
  --primary-2: #0a4fb8;

  --radius: 16px;
  --shadow: 0 12px 30px rgba(2, 6, 23, .08);
  --shadow-sm: 0 6px 18px rgba(2, 6, 23, .07);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

html, body { height: 100%; }
body{
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(11,94,215,.12), transparent 55%),
              radial-gradient(900px 450px at 90% 0%, rgba(2,132,199,.10), transparent 50%),
              var(--bg);
  color: var(--text);
}

a{ text-decoration: none; }
a:hover{ text-decoration: none; }

.container{ max-width: 1140px; }

/* =========================
   Cards / Buttons
========================= */
.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.card.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.card.shadow{ box-shadow: var(--shadow) !important; }

.btn{
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 600;
}
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: 0;
}
.btn-outline-primary{
  border-color: rgba(11,94,215,.35);
}
.btn-outline-primary:hover{
  background: rgba(11,94,215,.08);
}

/* =========================
   Navbar polish
========================= */
.navbar{
  backdrop-filter: blur(10px);
}
.navbar.bg-white{
  background: rgba(255,255,255,.78) !important;
}
.navbar .nav-link{
  font-weight: 600;
  color: rgba(15,23,42,.85);
  padding: .55rem .75rem;
  border-radius: 999px;
}
.navbar .nav-link:hover{
  background: rgba(2,6,23,.05);
}
.navbar-brand span{
  letter-spacing: -.2px;
}

/* Logo class we used */
.site-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
@media (max-width:576px){
  .site-logo{ width: 36px; height: 36px; }
}

/* =========================
   Page headers / meta
========================= */
.page-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.page-title{ font-weight: 800; letter-spacing: -.3px; }
.meta{ color: var(--muted); font-size: .92rem; }

/* =========================
   Content typography
========================= */
main{ padding-top: 1.25rem; padding-bottom: 1.75rem; }
h1,h2,h3,h4{ letter-spacing: -.2px; }
.text-muted{ color: var(--muted) !important; }

/* =========================
   Tables (admin/panel)
========================= */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  color: rgba(15,23,42,.75);
  font-weight: 700;
  border-bottom-color: var(--line);
}
.table td, .table th{
  border-top-color: rgba(15,23,42,.06);
}

/* =========================
   Footer
========================= */
footer.bg-white{
  background: rgba(255,255,255,.78) !important;
}