:root{
  --bg:#0b1220;
  --panel:#121a2b;
  --panel-2:#0f1726;
  --card:#0f1726;
  --text:#e7ecf6;
  --muted:#9fb0d0;
  --primary:#2f6df6;
  --danger:#ef4444;
  --border:#24324c;
}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),#0e1626 60%,var(--bg));
  color:var(--text);
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 16px;
  background:rgba(10,16,30,.85); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800}
.brand .logo{color:var(--primary)}
.brand .divider{opacity:.45}
.actions{display:flex; flex-wrap:wrap; gap:8px}
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px;
  font-weight:700; text-decoration:none; cursor:pointer;
  border:1px solid var(--border); color:var(--text); background:transparent;
}
.btn:hover{ background:#131e33; border-color:#3a527a }
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary) }
.btn.primary:hover{ filter:brightness(.96) }
.btn.danger{ background:#3a0f12; color:#ffb4b4; border-color:#5a1a1f }
.btn.outline{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.outline:hover{
  background: #131e33;
  border-color: #3a527a;
}

/* ===== Container ===== */
.container{ max-width:980px; margin:22px auto; padding:0 16px }

/* ===== Cards ===== */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.page-head h1{ margin:0 0 6px; font-size:22px }
.page-head .lead{ margin:0; color:var(--muted) }

/* Alerts */
.alert{ margin-top:10px; padding:10px 12px; border-radius:12px; display:inline-block }
.alert-info{ background:#0e1f1d; color:#b7ffea; border:1px solid #1f3e39 }
.alert-warn{ background:#2b1b12; color:#ffd2a8; border:1px solid #5a3a1f }

/* ===== Form ===== */
.form-card .grid-4{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
@media (max-width:900px){ .form-card .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .form-card .grid-4{ grid-template-columns:1fr; } }

.form-group label{ display:block; margin:2px 0 6px; font-weight:800 }
input, textarea{
  width:100%; color:var(--text); background:#0f1726;
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:15px;
}
input:focus, textarea:focus{
  outline:none; border-color:#3a527a; box-shadow:0 0 0 3px rgba(47,109,246,.18);
}
textarea{ min-height:90px; resize:vertical }
.actions-row{ display:flex; justify-content:flex-end; margin-top:8px }

/* ===== Toolbar/Search ===== */
.toolbar .toolbar-row{ display:flex; gap:10px; align-items:center; }
.search{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:#0f1726; color:var(--text);
}

/* ===== Table ===== */
.table-wrap{ overflow:auto; border-radius:12px }
.data-table{ width:100%; border-collapse:collapse; font-size:14px }
.data-table th, .data-table td{
  border:1px solid var(--border); padding:10px; text-align:center;
}
.data-table th{ background:#121a2b; color:var(--muted); font-weight:700 }
.data-table tr:hover{ background:#0f172a }

/* Mobilde kart görünüm */
@media (max-width:600px){
  .data-table, .data-table thead, .data-table tbody, .data-table th, .data-table td, .data-table tr{ display:block }
  .data-table thead{ display:none }
  .data-table tr{
    margin:10px 0; padding:10px; border:1px solid var(--border);
    border-radius:12px; background:var(--card);
  }
  .data-table td{
    border:none; text-align:left; padding:6px 0;
  }
  .data-table td::before{
    content: attr(data-label) " ";
    display:inline-block; min-width:110px; color:var(--muted); font-weight:800; font-size:12px; margin-right:6px;
  }
}

/* ===== Pagination ===== */
.pagination{ display:flex; gap:8px; justify-content:center; margin:12px 0 2px }
.pagination button{
  background:#0f1726; color:#e7ecf6; border:1px solid var(--border);
  padding:6px 10px; border-radius:10px; cursor:pointer; min-width:36px;
}
.pagination button:hover{ border-color:#3a527a }
.pagination button.active,
.pagination button:disabled{
  background:var(--primary); border-color:var(--primary); color:#fff; cursor:default;
}

/* ===== Small screens: topbar buttons shrink & wrap ===== */
@media (max-width:420px){
  .topbar{ padding:10px 12px }
  .actions{ column-gap:6px; row-gap:6px }
  .btn{ font-size:12px; padding:8px 10px }
}
/* --- MOBİL TOPBAR DÜZENİ (≤480px) --- */
@media (max-width: 480px){
  .topbar{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
  }
  .brand{
    grid-column: 1 / -1;   /* marka üstte tam genişlik */
    order: -1;
  }
  .actions{
    grid-column: 1 / -1;   /* butonlar alt satıra */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ana Sayfa | Profil yan yana */
    gap: 10px;
  }
  .actions .btn{
    width: 100%;
    text-align: center;
    padding: 10px;
    white-space: nowrap;
  }
  .actions .btn.danger{
    grid-column: 1 / -1;   /* Çıkış tek satır tam genişlik */
  }
}
/* --- KOYU ARKA PLAN ZORLAMASI --- */
html{ background:#0b1220 !important; color-scheme: dark; }
body{
  background: linear-gradient(180deg,#0b1220,#0e1626 60%,#0b1220) !important;
  color: var(--text) !important;
  min-height: 100dvh;
}
.main-container,
.container{
  background: transparent !important;  /* olası beyaz zeminleri iptal */
}

/* iOS/Android’da pull-to-refresh boşluğu beyaz göstermesin */
body, html{ overscroll-behavior: none; }
/* --- Breadcrumb (ÖGG Portalı / Mesai) sıkılaştırma --- */
.topbar .brand{
  gap: 0;                 /* aradaki tüm gap'i kapat */
  line-height: 1;         /* dikey hizayı netleştir */
}
.topbar .brand span{ 
  display:inline-flex; 
  align-items:center; 
}
.topbar .brand .logo{ 
  margin-right: 4px;      /* logo ile slash arası */
}
.topbar .brand .divider{
  margin: 0 4px;          /* slash ile metin arası */
  color: #9fb0d0;         /* hafif soluk */
  opacity: .65;
  font-weight: 700;
}
/* --- Topbar butonlarını sıkılaştır + adaptif boyutlandır (Mesai) --- */
.topbar .actions{
  display: flex;
  flex-wrap: wrap;                    /* sığmazsa alt satıra */
  gap: clamp(4px, 0.8vw, 10px);       /* 4–10px arası dinamik aralık */
}

.topbar .actions .btn{
  padding: clamp(6px, 1.2vw, 10px)    /* dikey */
           clamp(10px, 2vw, 14px);    /* yatay */
  font-size: clamp(12px, 2.4vw, 14px);/* yazı küçülerek sığar */
  border-radius: 10px;
  white-space: nowrap;
}

/* Dar ekran: biraz daha kompakt */
@media (max-width: 560px){
  .topbar{ padding: 10px 12px; }
  .topbar .actions{ gap: 6px; }
  .topbar .actions .btn{
    padding: 8px 10px;
    font-size: 12.5px;
  }
}

/* En dar cihazlar (≤380px): 2x düzen, Çıkış tam genişlik */
@media (max-width: 380px){
  .topbar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .brand{ grid-column: 1 / -1; }
  .actions{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .actions .btn{ width: 100%; text-align:center; }
  .actions .btn.danger{ grid-column: 1 / -1; } /* Çıkış tam genişlik */
}