body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; }
.nav { display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid #eee; align-items:center; }
.nav .spacer { flex:1; }
.container { max-width: 1000px; margin: 24px auto; padding: 0 16px; }
.btn { display:inline-block; padding:8px 14px; border:1px solid #333; border-radius:8px; text-decoration:none; }
.cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin: 20px 0; }
.card { border:1px solid #eee; border-radius:12px; padding:14px; }
.messages { max-width:1000px; margin:12px auto; padding:0 16px; }
.msg { padding:8px 12px; border-radius:8px; margin:6px 0; }
.msg.success { background: #1a1b1e; border:1px solid #806002; }
.msg.error { background: #100f0f; border:1px solid #806002; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { border:1px solid #eee; padding:8px; text-align:left; }



.chat { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.bubble { max-width: 70%; padding:10px 12px; border-radius:14px; position:relative; }
.bubble .meta { font-size:12px; opacity:.7; margin-bottom:4px; display:flex; gap:8px; }
.bubble.user { background:#e8f5ff; align-self:flex-start; }
.bubble.agent { background:#f5f5ff; align-self:flex-end; }
.bubble.system { background:#f3f3f3; align-self:center; }
.bubble.hl { outline:2px solid #ff7a00; box-shadow:0 0 0 3px rgba(255,122,0,.2) inset; }

/* ── Top summary + filter bar (compact, clean) ─────────────────────────── */
.summary-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(140px,1fr));
  gap:12px;
  margin:12px 0 14px;
}
.summary-cards .card{
  background:#fff;                     /* koyu temanız varsa #111827 gibi ayarlayabilirsiniz */
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:12px 14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.summary-cards .label{font-size:12px;color:#6b7280;margin-bottom:4px;}
.summary-cards .value{font-size:20px;font-weight:700;}

.filter-bar{
  display:grid;
  grid-template-columns:repeat(6,minmax(140px,1fr));
  gap:12px;
  align-items:end;
  margin:6px 0 16px;
}
.filter-bar .field{display:flex;flex-direction:column;gap:6px;}
.filter-bar label{font-size:12px;color:#6b7280;}
.filter-bar input[type="date"],
.filter-bar input[type="search"],
.filter-bar select{
  height:36px;
  border:1px solid #d1d5db;
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
}
.filter-bar .actions{display:flex;gap:8px;}

@media (max-width: 1200px){
  .filter-bar{grid-template-columns:repeat(3,minmax(160px,1fr));}
}
@media (max-width: 640px){
  .summary-cards{grid-template-columns:1fr;}
  .filter-bar{grid-template-columns:1fr 1fr;}
}

/* ── Result header: stats + filters (compact & clean) ───────────────────── */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --border:#e5e7eb;
  --muted:#6b7280;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --primary:#4f46e5;
}

/* başlık + aksiyonlar */
.result-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:6px 0 10px;
}
.result-top h2{ margin:0; font-size:20px; font-weight:700; }
.result-actions{ display:flex; gap:8px; }

/* özet kartları */
.stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(160px,1fr));
  gap:12px;
  margin:8px 0 14px;
}
.stat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:var(--shadow);
}
.stat-label{ font-size:12px; color:var(--muted); margin-bottom:4px; }
.stat-value{ font-size:22px; font-weight:700; }

/* filtre barı */
.filters-compact{
  display:grid;
  grid-template-columns:repeat(6,minmax(160px,1fr));
  gap:12px; align-items:end;
  margin-bottom:16px;
}
.filters-compact .field{ display:flex; flex-direction:column; gap:6px; }
.filters-compact label{ font-size:12px; color:var(--muted); }
.filters-compact input[type="date"],
.filters-compact input[type="search"],
.filters-compact select{
  height:38px; padding:6px 10px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--bg);
}
.filters-compact .actions{ display:flex; gap:8px; }

/* basit buton stilleri (mevcudu varsa dokunmaz; yoksa hoş görünür) */
.btn{ height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--border); background:#fff; }
.btn--primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.btn:hover{ filter:brightness(.98); }

/* responsive */
@media (max-width:1100px){
  .filters-compact{ grid-template-columns:repeat(3,minmax(160px,1fr)); }
}
@media (max-width:640px){
  .stats{ grid-template-columns:1fr; }
  .filters-compact{ grid-template-columns:1fr 1fr; }
}

.chip{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  font-size:12px;
  line-height:18px;
}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:12px;line-height:18px}
.chip--neutral{background:#eef2ff;color:#3730a3}

/* —— Temel renkler / ölçüler —— */
:root{
  --bg:#f8fafc;
  --card:#fff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --primary:#6d28d9;              /* mor ton */
  --primary-contrast:#fff;
  --ring:rgba(109,40,217,.15);
}

/* Arkaplan, tipografi */
body{background:var(--bg); color:var(--text);}

/* Küçük gri yazılar */
.small-muted{color:var(--muted); font-size:.86rem}

/* —— Üst başlık ve aksiyonlar —— */
.result-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.result-actions{display:flex; gap:8px}

/* —— Butonlar —— */
.btn{
  height:36px; padding:0 12px;
  border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--text); cursor:pointer; transition:.15s;
}
.btn:hover{background:#f8fafc}
.btn--primary{background:var(--primary); border-color:var(--primary); color:var(--primary-contrast)}
.btn--primary:hover{filter:brightness(.96)}
.btn--ghost{background:transparent}

/* —— Özet kartları —— */
.stats{
  display:grid; grid-template-columns:repeat(3,minmax(160px,1fr));
  gap:12px; margin:10px 0 14px;
}
.stat{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.stat-label{color:var(--muted); font-size:.8rem}
.stat-value{font-weight:600; font-size:1.1rem; margin-top:4px}

/* —— Filtre barı —— */
.filters-compact{
  display:grid; grid-template-columns:repeat(6,minmax(140px,1fr));
  gap:10px; align-items:end; margin:12px 0 16px;
}
.filters-compact .field{
  display:flex; flex-direction:column; gap:6px;
  background:var(--card); border:1px solid var(--border);
  padding:10px 12px; border-radius:10px;
}
.filters-compact label{font-size:.78rem; color:var(--muted)}
.filters-compact select,
.filters-compact input[type="date"],
.filters-compact input[type="search"]{
  height:36px; padding:0 10px; border:1px solid var(--border);
  border-radius:8px; background:#fff; outline:none;
}
.filters-compact select:focus,
.filters-compact input:focus{
  border-color:var(--primary); box-shadow:0 0 0 .2rem var(--ring);
}
.filters-compact .actions{display:flex; gap:8px; align-self:stretch}

/* Responsive kırılımlar */
@media (max-width:1100px){ .filters-compact{grid-template-columns:repeat(3,minmax(180px,1fr))} }
@media (max-width:680px){ .filters-compact{grid-template-columns:1fr 1fr} .stats{grid-template-columns:1fr} }

/* —— Tablo —— */
.table-wrap{
  border:1px solid var(--border); border-radius:12px;
  background:var(--card); overflow:hidden;
}
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:.93rem}
.table thead th{
  position:sticky; top:0; z-index:1; background:#f3f4f6;
  color:#374151; text-align:left; padding:10px 12px; border-bottom:1px solid var(--border);
}
.table tbody td{
  padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;
}
.table tbody tr:nth-child(even){background:#fbfbfb}
.table tbody tr:hover{background:#f9fafb}

/* ID kolonunu monospaced gösterelim */
.table td:nth-child(1){font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Kanıt kolonu sarma/taşma yönetimi */
.table td:nth-child(7) div{
  max-width:560px; white-space:normal; overflow-wrap:anywhere;
}

/* —— Rozetler / etiketler —— */
.badge{
  display:inline-flex; align-items:center; height:24px;
  border-radius:999px; padding:0 10px; font-size:.78rem;
  border:1px solid var(--border); background:#fff; color:#111827;
}
.badge--rule{background:#eef2ff; border-color:#e0e7ff; color:#3730a3}
.badge--vio{background:#fee2e2; border-color:#fecaca; color:#991b1b}
.badge--ctl{background:#dcfce7; border-color:#bbf7d0; color:#065f46}

.chip{display:inline-block; padding:2px 8px; border-radius:999px;
      background:#f1f5f9; color:#334155; font-size:.75rem}
.chip--neutral{background:#eef2ff; color:#3730a3}

/* ---- Sonuç tablosu: uzun metinleri kırp ---- */
.table td.col-evidence {
  max-width: 520px;           /* sayfana uygun artır/azalt */
  vertical-align: top;
  padding-right: 8px;
}

.text-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;      /* kaç satır gösterilecek? 3–8 arası deneyebilirsin */
  overflow: hidden;
  word-break: break-word;
  line-height: 1.3;           /* satır yüksekliği -> clamp ile uyumlu */
}

/* tek satırlık kısaltma ihtiyacı olursa */
.ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------ Chat sayfası sağ panel ------ */
@media (min-width: 1450px){
  :root { --chatAsideW: 380px; --chatAsideGap: 24px; }

  /* mevcut içerik genişliğini değiştirmiyoruz; panel ekranın sağ boşluğuna park edilir */
  .chat-aside {
    position: fixed;
    right: 24px;
    top: 110px;                  /* üst navbar yüksekliğine göre ayarla */
    width: var(--chatAsideW);
    max-height: calc(100vh - 140px);
    overflow: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
  }
}

@media (max-width: 1449.98px){
  .chat-aside {
    position: static;
    width: auto;
    margin: 16px 0;
  }
}

.chat-aside h4{
  margin: 0 0 10px;
  font-size: .98rem;
  font-weight: 700;
  color: #111827;
}

.chat-meta{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.chat-meta .meta-card{
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.meta-row{
  display:flex; gap:8px; justify-content:space-between;
  font-size: .92rem;
}
.meta-row .k{ color:#6b7280 }
.meta-row .v{ color:#111827; font-weight:500; text-align:right; }

.copyline{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}
.copy-btn{
  height:28px; padding:0 10px; border-radius:8px;
  border:1px solid #e5e7eb; background:#fff; cursor:pointer;
}
.copy-btn:hover{ background:#f8fafc }
.badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge--vio{ background:#fee2e2; border-color:#fecaca; color:#991b1b }
.badge--ctl{ background:#dcfce7; border-color:#bbf7d0; color:#065f46 }

/* ---------- Chat sayfası düzeni ---------- */
.chat-page{
  max-width: 1280px;
  margin: 4px auto 24px;
  padding: 0 16px;
  display:grid;
  grid-template-columns: minmax(0,1fr) 360px; /* chat + panel */
  gap:16px;                                    /* “yakın” boşluk */
  align-items:start;
}
.chat-main{min-width:0;} /* overflow kırpmaları için */

.chat-stream{display:flex;flex-direction:column;gap:8px}

/* Sağ sabit panel */
.chat-aside{position:sticky; top:86px; height:fit-content;}
.panel{
  background:#fff;
  border:1px solid var(--border, #e5e7eb);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:12px 12px 10px;
}
.panel-title{
  font-weight:700; font-size:1rem; margin:2px 0 10px; color:#111827;
}
.panel-subtitle{
  font-weight:600; font-size:.95rem; margin:12px 0 8px; color:#374151;
}
.kv{
  display:grid; grid-template-columns:120px 1fr;
  gap:6px 10px; font-size:.92rem; margin:4px 0 6px;
}
.kv .k{color:#6b7280}
.kv .v code{background:#f3f4f6;border:1px solid #e5e7eb;padding:1px 6px;border-radius:6px}
.empty-note{font-size:.9rem; color:#6b7280}

/* Kural listesi */
.rule-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.rule-item{display:flex; align-items:center; gap:8px; font-size:.92rem}
.rule-kind{padding:2px 8px; border-radius:999px; font-size:.75rem; border:1px solid #e5e7eb}
.rule-kind.violation{background:#fee2e2; border-color:#fecaca; color:#991b1b}
.rule-kind.control{background:#dcfce7; border-color:#bbf7d0; color:#065f46}
.rule-label{color:#475569}

/* mini buton */
.btn--xs{height:26px; padding:0 8px; font-size:.8rem}

/* Dar ekranlarda panel alta geçsin */
@media (max-width: 1100px){
  .chat-page{grid-template-columns:1fr}
  .chat-aside{position:static}
}

/* --- Chat sayfası: genişlikleri büyüt --- */
.chat-page{
  /* önce 1280'di → genişlettik */
  max-width: 1440px;
  /* önce 1fr 360px idi → paneli de biraz büyüttük */
  grid-template-columns: minmax(0,1fr) 420px;
  gap: 14px; /* biraz daha kompakt boşluk */
}

/* Sticky panel aynı kalır; sadece grid sütunu ile büyür */
.chat-aside{ position: sticky; top: 86px; height: fit-content; }

/* Balonları genişlet (önce max-width:70% idi) */
.bubble{ max-width: 78%; }

/* Küçük ekranlarda balonlar taşmasın */
@media (max-width: 1100px){
  .chat-page{ grid-template-columns: 1fr; }
  .chat-aside{ position: static; }
  .bubble{ max-width: 92%; }
}

/* Panelde kolonları azıcık genişlet ki değerler rahat sığsın */
.kv{ grid-template-columns: 130px 1fr; }

/* ---- CHAT SAYFASI DÜZENİ (genişlet + yanı sabitle) ------------------- */

/* Chat sayfası açıldığında container'ı büyüt (destekleyen tarayıcılarda) */
body .container:has(.chat-page) { max-width: 1480px; }

/* :has() desteklemeyenler için opsiyonel yedek sınıf */
.chat-wide { max-width: 1480px !important; margin: 0 auto; }

/* Ana düzen */
.chat-page{
  display: block;                 /* grid zorunlu değil, aside'ı fixed yapacağız */
  position: relative;
}

/* Chat ana sütunu: aside üstünü kaplamasın diye sağdan boşluk bırak */
:root{ --chatAsideW: 420px; --chatAsideGap: 20px; }

@media (min-width: 1400px){
  .chat-main{
    padding-right: calc(var(--chatAsideW) + var(--chatAsideGap));
  }
  /* Sağ panel tabloyu SIKISTIRMASIN: sabit sağa park et */
  .chat-aside{
    position: fixed;
    right: 24px;
    top: 96px;                    /* üst bar yüksekliğine göre ayarla */
    width: var(--chatAsideW);
    max-height: calc(100vh - 120px);
    overflow: auto;
    z-index: 2;
  }
}

/* Daha dar ekranlarda klasik akış */
@media (max-width: 1399.98px){
  .chat-aside{ position: static; width: auto; max-height: none; }
  .chat-main{ padding-right: 0; }
}

/* Mesaj balonlarını ferahlat */
.bubble{ max-width: 92%; }        /* önce 70/78 idi → genişlettik */
@media (max-width: 1100px){
  .bubble{ max-width: 96%; }
}

/* Sağ panel kartı biraz geniş görünsün */
.chat-aside .card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:12px 14px; box-shadow:0 1px 2px rgba(16,24,40,.04);
}

/* ——— Mini charts row ——— */
.mini-charts{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap:12px;
  margin: 6px 0 12px;
}
.mini-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.mini-card h4{
  margin:0 0 6px;
  font-size:.9rem;
  color:#334155;
  font-weight:600;
}
.mini-card canvas{
  width:100% !important;
  height:120px !important;   /* minik ve sakin */
}

@media (max-width: 900px){
  .mini-charts{ grid-template-columns: 1fr; }
}

/* ==== Modern admin surfaces & layout ==== */
:root{
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #4f46e5;
  --primary-600:#4f46e5;
  --primary-700:#4338ca;
  --danger:#ef4444;
  --radius: 14px;
  --shadow-sm: 0 6px 18px rgba(15,23,42,.06);
  --border: 1px solid rgba(2,6,23,.08);
}

.surface{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm); border:var(--border); }

.toolbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.toolbar .title h1{ font-size:1.35rem; margin:0 0 4px 0; color:var(--text); }
.toolbar .subtitle{ margin:0; color:var(--muted); font-size:.95rem; }
.toolbar .actions{ display:flex; gap:8px; }

.section{ margin-top:18px; }
.section-title{ font-size:1.05rem; margin:0 0 10px 0; color:var(--text); }

.grid-compact{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.grid-compact .form-item{ display:flex; flex-direction:column; }
.grid-compact .align-end{ align-self:end; }
.form-label{ font-size:.85rem; color:var(--muted); margin-bottom:6px; }

.details-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:14px 0; }
.detail{ background:var(--surface-2); border-radius:12px; padding:12px; border:var(--border); }
.detail-label{ font-size:.78rem; color:var(--muted); margin-bottom:6px; }
.detail-value{ font-weight:600; color:var(--text); }

.profile-grid{ display:grid; grid-template-columns:96px 1fr; gap:16px; }
.avatar{ display:flex; align-items:center; justify-content:center; }
.avatar-circle{
  width:80px; height:80px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary-600),var(--primary-700));
  color:#fff; font-weight:700; font-size:1.4rem; box-shadow:var(--shadow-sm);
}

.table.clean{ border-collapse:separate; border-spacing:0; width:100%; }
.table.clean thead th{
  text-align:left; font-weight:600; color:var(--muted);
  border-bottom:var(--border); padding:10px 12px; background:var(--surface-2);
}
.table.clean tbody td{ padding:12px; border-bottom:var(--border); vertical-align:middle; }
.table.clean tbody tr:hover{ background:rgba(79,70,229,.04); }

.code-chip{
  display:inline-block; padding:6px 10px; border-radius:10px;
  background:var(--surface-2); border:var(--border); font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; background:var(--surface-2); border:var(--border);
  color:var(--muted); font-weight:600; font-size:.82rem;
}
.chip-success{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.18); color:#059669; }

.muted{ color:var(--muted); }
.text-right{ text-align:right; }
.nowrap{ white-space:nowrap; }
.inline{ display:inline; }

.btn{ border-radius:10px; padding:8px 12px; font-weight:600; }
.btn-outline{ background:#fff; border:1px solid rgba(2,6,23,.12); }
.btn-ghost{ background:transparent; border:1px solid rgba(2,6,23,.12); }
.btn-danger{ border-color: rgba(239,68,68,.25); color:#b91c1c; }
.btn:hover{ box-shadow:0 3px 10px rgba(15,23,42,.08); }

.link{ color:var(--primary); text-decoration:none; }
.link:hover{ text-decoration:underline; }

.note{
  padding:12px 14px; border-radius:12px; background:var(--surface-2); border:var(--border);
  color:var(--muted); margin-bottom:8px;
}

/* mobile */
@media (max-width: 900px){
  .grid-compact{ grid-template-columns:1fr; }
  .details-grid{ grid-template-columns:1fr 1fr; }
  .profile-grid{ grid-template-columns:1fr; }
  .text-right{ text-align:left; }
}
/* ==== KPI row (Admin Panel) ==== */
.kpis{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 kutu yan yana */
  gap: 12px;
  margin: 16px 0 4px;
}
.kpi{
  background: var(--surface-2);
  border: var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  min-height: 64px;
}
.kpi-label{
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}
.kpi-value{
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

/* Tablet: 2 sütun; Mobil: 1 sütun */
@media (max-width: 1024px){
  .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .kpis{ grid-template-columns: 1fr; }
}

/* KPI (zaten eklediysek tekrar etmeyelim) */

/* Create form */
.license-create{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:6px;
}
.pill-group{ display:flex; gap:8px; flex-wrap:wrap; }
.pill input{ display:none; }
.pill span{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(2,6,23,.12); background:#fff; cursor:pointer; font-weight:600;
}
.pill input:checked + span{ background:rgba(79,70,229,.10); border-color:rgba(79,70,229,.35); color:#3730a3; }
.num-field label{ display:block; font-size:.85rem; color:var(--muted); margin:0 0 6px 2px; }
.num-field input{ min-width:140px; }

/* Key hücresi geniş ve tek satır */
.w-key{ width: 360px; }              /* tablo başlığında genişlik */
.key-cell{ display:flex; align-items:center; gap:8px; }
.nowrap{ white-space:nowrap; }
.code-chip{ white-space:nowrap; font-size:.95rem; padding:6px 10px; }

/* Kopyala butonu */
.copy-btn{
  border:1px solid rgba(2,6,23,.12);
  background:#fff; padding:6px 10px; border-radius:10px; font-weight:600; cursor:pointer;
}
.copy-btn.copied{ border-color: rgba(16,185,129,.35); color:#059669; background:rgba(16,185,129,.08); }

/* Tablo taşmasın, hücreler tek satır kalsın (masaüstünde) */
.table-responsive{ overflow-x: auto; }          /* mobilde emniyet */
@media (min-width: 1100px){
  .table-responsive{ overflow: visible; }       /* masaüstünde kart içinde dursun */
  .table.clean th, .table.clean td{
    white-space: nowrap;                        /* alta kırma yok */
    vertical-align: middle;
  }
}

/* Kolon genişliklerini iyileştir */
.w-key{ width: 420px; }                         /* Key için daha geniş alan */
.w-date{ width: 160px; }                        /* tarih/saat kolonları */
.w-compact{ width: 120px; }                     /* kısa kolonlar: Durum, Geçerlilik vb. */

/* Key hücresi düzeni */
.key-cell{ display:flex; align-items:center; gap:10px; }
.code-chip{ white-space:nowrap; }

/* Küçük ekranlarda yatay kaydırma serbest, görünüm sıkışmasın */
@media (max-width: 1099px){
  .table.clean th, .table.clean td{ white-space: nowrap; }
}

/* Kartı ekran genişliğine göre büyüt ve ortala */
.surface-fit{
  /* Kart genişliği: ekran - 64px (kenarlarda nefes) ve 1600px'i geçmesin */
  width: min(calc(100vw - 64px), 1600px);
  margin-left: auto;
  margin-right: auto;
}

/* Tablo kart dışına taşmasın; masaüstünde kırma yok, mobilde yatay scroll */
.table-responsive{ overflow-x: auto; }
.table.clean{ width: 100%; table-layout: auto; }

@media (min-width: 992px){
  .table.clean th, .table.clean td{
    white-space: nowrap;          /* metin alta kırılmasın */
    vertical-align: middle;
  }
}

/* Key sütununu geniş tut */
.w-key{ width: 420px; max-width: 520px; }
.key-cell{ display:flex; align-items:center; gap:10px; }
.code-chip{ white-space: nowrap; }

/* Tarih/saat kolonları makul genişlikte */
.w-date{ width: 180px; }
.w-compact{ width: 120px; }

/* Çok dar ekranlarda kırmadan scroll */
@media (max-width: 991px){
  .table.clean th, .table.clean td{ white-space: nowrap; }
}

/* Kartı genişlet ve ortala: ekranın neredeyse tamamını kullanır, max genişlik sınırı ile */
.surface-wide{
  width: min(calc(100vw - 32px), 1800px);
  margin-left: auto;
  margin-right: auto;
}

/* Tablo: condensed görünüm (küçük font, küçük padding) */
.table-condensed{ font-size: .92rem; }
.table-condensed thead th{
  padding: 8px 10px;
}
.table-condensed tbody td{
  padding: 8px 10px;
}

/* Kırılmayı önle (satır yüksekliği uzamasın) */
@media (min-width: 900px){
  .table.clean th, .table.clean td{ white-space: nowrap; vertical-align: middle; }
}

/* Sütun genişlikleri optimize */
.w-key{ width: 360px; max-width: 380px; }
.w-date{ width: 160px; }
.w-compact{ width: 110px; }

/* Key hücresi & butonlar daha kompakt */
.key-cell{ display: flex; align-items: center; gap: 8px; }
.code-chip{ white-space: nowrap; font-size: .9rem; padding: 4px 8px; }
.copy-btn{ padding: 4px 8px; font-size: .85rem; }

/* Küçük ekranlarda kaçınılmazsa yatay kaydırma (masaüstünde çoğunlukla gerek kalmayacak) */
.table-responsive{ overflow-x: auto; }

/* Kart geniş, ortalı, ama taşma yok */
.surface-wide{
  width: min(calc(100vw - 32px), 1600px);
  margin: 0 auto;
}

/* Kaydırmasız, sığan tablo: kompakt ölçüler + gerektiğinde şık kırma */
.table-no-scroll{ font-size:.92rem; table-layout:auto; width:100%; }
.table-no-scroll thead th{ padding:8px 10px; }
.table-no-scroll tbody td{ padding:8px 10px; vertical-align:middle; }

/* Varsayılanı tek satır tut, yalnızca belirlediğimiz hücreler kırabilsin */
.table-no-scroll th,
.table-no-scroll td{ white-space:nowrap; }

/* Yalnızca uzun içerikli alanlarda kırma aktif */
.cell-wrap{ white-space:normal !important; overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }

/* Key hücresi: buton yer bulamazsa alt satıra iner */
.key-cell{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.key-cell .code-chip{ display:inline-block; font-size:.9rem; padding:4px 8px; }
.copy-btn{ padding:4px 8px; font-size:.85rem; }

/* Kolonları sıkılaştır (fazla yer kaplamasınlar) */
.col-compact{ width:1%; }     /* Durum, Geçerlilik, Kalan, Aksiyonlar gibi kısa kolonlar */
.col-date{ width:10%; }       /* Tarih kolonları: makul genişlik */

/* Ortalanan, geniş sayfa sarmalayıcı */
.page-center{
  /* 1100px ile 1600px arasında, ekranın %92’si kadar; tam ortalı */
  width: clamp(1100px, 92vw, 1600px);
  margin-left: auto;
  margin-right: auto;
}

/* Kart, sarmalayıcı içinde tam genişlikte */
.surface-wide{ width: 100%; }

/* Kaydırmasız, sığdıran tablo */
.table-no-scroll{ font-size:.92rem; table-layout:auto; width:100%; }
.table-no-scroll thead th{ padding:8px 10px; }
.table-no-scroll tbody td{ padding:8px 10px; vertical-align:middle; }

/* Varsayılan tek satır; yalnız uzun alanlarda kırılmaya izin ver */
.table-no-scroll th, .table-no-scroll td{ white-space: nowrap; }
.cell-wrap{ white-space: normal !important; overflow-wrap:anywhere; word-break:break-word; }

/* Kompakt kolonlar */
.col-compact{ width: 1%; }
.col-date{ width: 10%; }

/* Key hücresi kompakt */
.key-cell{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.code-chip{ font-size:.9rem; padding:4px 8px; white-space:nowrap; }
.copy-btn{ padding:4px 8px; font-size:.85rem; }

/* ==== NAVBAR ==== */
:root{
  --nav-h: 64px;
  --nav-bg: rgba(255,255,255,.85);
  --nav-border: rgba(2,6,23,.08);
}

/* bar sabit (sticky) ve şık cam efekti */
.site-nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(8px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}
.site-nav.with-shadow{ box-shadow: 0 8px 28px rgba(15,23,42,.06); }

.nav-inner{ height: var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* ==== Brand: PROGNIFTY (Gold & Black) ==== */
/* Brand container: logo + yazı yan yana */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  height: var(--nav-h);
}

/* Logo boyutu (yüksekliği navbar’la dengeli) */
.brand-logo{
  height:28px; width:auto; object-fit:contain;
  /* hafif derinlik */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* PROGNIFTY yazısı – Gold & Black temalı metalik geçiş */
:root{
  --gold-1:#7a5c00;
  --gold-2:#c9a227;
  --gold-3:#ffe27a;
  --gold-4:#b68b00;
  --onyx:#0e0e0f;
}

.brand-text{
  font-weight:900;
  letter-spacing:.5px;
  font-size:1.25rem;
  line-height:1;

  background-image: linear-gradient(
    105deg,
    #171717 0%,
    var(--gold-1) 8%,
    var(--gold-2) 26%,
    var(--gold-3) 50%,
    var(--gold-2) 68%,
    var(--gold-4) 86%,
    #111111 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  -webkit-text-stroke:0.6px var(--onyx);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.10));
  position:relative;
}

.brand-text::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,transparent 0,var(--gold-2) 30%,var(--gold-3) 50%,var(--gold-2) 70%,transparent 100%);
  opacity:.35;
}

.brand:hover .brand-text{
  background-image: linear-gradient(
    105deg,
    #0f0f0f 0%,
    var(--gold-1) 10%,
    #dfb73a 28%,
    #fff3a0 50%,
    #dfb73a 70%,
    var(--gold-4) 90%,
    #0f0f0f 100%
  );
  -webkit-text-stroke:0.6px #000;
}

/* WebKit clip desteklemeyen tarayıcılar için fallback */
@supports not (-webkit-background-clip: text){
  .brand-text{ color: var(--gold-2); }
}

/* Menü vurgularını altın paletle uyumla (opsiyonel) */
.links a:hover{ background: rgba(201,162,39,.12); color:#111; }
.links a.is-active{
  background: rgba(201,162,39,.14);
  border:1px solid rgba(201,162,39,.45);
  color:#111;
}

/* linkler */
.links{ display:flex; align-items:center; gap:6px; }
.links a{
  text-decoration:none; color: var(--muted);
  padding: .45rem .70rem; border-radius: 10px; font-weight:600;
}
.links a:hover{ color: var(--text); background: var(--surface-2); }
.links a.is-active{
  color: var(--text);
  background: rgba(79,70,229,.08);
  border: 1px solid rgba(79,70,229,.25);
}

/* sağ taraf */
.auth{ display:flex; align-items:center; gap:8px; }
.hello{ color: var(--muted); }
.btn-ghost{
  border:1px solid rgba(2,6,23,.12); padding:.45rem .7rem; border-radius:10px; font-weight:600; text-decoration:none;
}
.btn-ghost:hover{ box-shadow: 0 3px 10px rgba(15,23,42,.08); }

/* sayfa genişliği (ortalanmış) */
.page-edge{ width: min(calc(100vw - 48px), 1680px); margin: 0 auto; }

/* mobil menü */
.nav-toggle{ display:none; border:0; background:transparent; width:40px; height:40px; border-radius:10px; cursor:pointer; }
.nav-toggle span{ display:block; height:2px; margin:7px 6px; background:#0f172a; border-radius:2px; }
@media (max-width: 900px){
  .links{ display:none; }
  .auth .hello{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .site-nav.open .links{
    position:absolute; left:0; right:0; top: var(--nav-h);
    display:flex; flex-direction:column; gap:6px; padding:10px 12px;
    background:#fff; border-bottom:1px solid var(--nav-border);
  }
}

.notif-bell{ position:relative; text-decoration:none; margin-right:4px; font-size:1.05rem; }
.notif-bell .badge{
  position:absolute; top:-6px; right:-10px; background:#dc2626; color:#fff;
  font-weight:700; font-size:.7rem; border-radius:999px; padding:2px 6px;
}
.chat{ display:flex; flex-direction:column; gap:12px; margin:8px 0 12px; }
.msg-row{ display:flex; }
.msg-row.user{ justify-content:flex-end; }
.bubble{ max-width: min(720px, 80%); padding:10px 12px; border-radius:12px; background:var(--surface-2); border:var(--border); }
.msg-row.user .bubble{ background:#eef2ff; }
.bubble .meta{ font-size:.8rem; color:var(--muted); margin-top:6px; }
.reply-form textarea{ width:100%; }
.reply-actions{ display:flex; align-items:center; gap:8px; margin-top:6px; }

/* Sohbet ek önizlemeleri */
.files{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
.file-thumb{ display:inline-block; }
.attach-img{
  display:block; max-width:240px; max-height:180px;
  border-radius:10px; border: var(--border);
  box-shadow: var(--shadow-sm);
}
.attach-video{
  width:260px; max-width:100%;
  border-radius:10px; border: var(--border);
  box-shadow: var(--shadow-sm);
}
/* Lightbox / Modal */
.lb{
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); z-index: 1000; padding: 24px;
}
.lb.open{ display: flex; }
.lb-content{ max-width: 90vw; max-height: 85vh; display:flex; align-items:center; justify-content:center; }
.lb-close, .lb-prev, .lb-next{
  position: absolute; top: 16px; background: rgba(255,255,255,.15); border: none; color: #fff;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer; font-size: 22px;
  display:flex; align-items:center; justify-content:center; backdrop-filter: blur(2px);
}
.lb-prev, .lb-next{ top: 50%; transform: translateY(-50%); }
.lb-close{ right: 16px; }
.lb-prev{ left: 16px; } .lb-next{ right: 16px; }

.preview{ padding:0; border:none; background:transparent; cursor: zoom-in; }
.preview .attach-img, .preview .attach-video{ pointer-events: none; }

.files{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
.attach-img{ display:block; max-width:240px; max-height:180px; border-radius:10px; border:var(--border); box-shadow:var(--shadow-sm); }
.attach-video{ width:260px; max-width:100%; border-radius:10px; border:var(--border); box-shadow:var(--shadow-sm); }

.lb{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.82); z-index:1000; padding:24px; }
.lb.open{ display:flex; }
.lb-content{ max-width:90vw; max-height:85vh; display:flex; align-items:center; justify-content:center; }
.lb-close,.lb-prev,.lb-next{ position:absolute; top:16px; background:rgba(255,255,255,.15); border:none; color:#fff; width:40px; height:40px; border-radius:999px; cursor:pointer; font-size:22px; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.lb-prev,.lb-next{ top:50%; transform:translateY(-50%); }
.lb-close{ right:16px; } .lb-prev{ left:16px; } .lb-next{ right:16px; }
.preview{ padding:0; border:none; background:transparent; cursor:zoom-in; }
.preview .attach-img,.preview .attach-video{ pointer-events:none; }

.notif-list{ list-style:none; padding-left:0; margin-top:12px; }
.notif-item{ padding:8px 0; border-bottom:1px solid rgba(2,6,23,.06); }
.notif-item:last-child{ border-bottom:none; }

.bubble .author{
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 4px;
  color: #111; /* koyu tema varsa var(--text) kullan */
  opacity: .9;
}

/* Chat composer */
.chat-composer .composer{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid rgba(2,6,23,.12);
  border-radius:14px; padding:8px 10px; box-shadow: var(--shadow-sm);
}
.chat-composer .btn-icon{
  border:none; background:#f4f6f8; width:36px; height:36px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:18px; line-height:1;
}
.chat-composer .btn-icon[disabled]{ opacity:.45; cursor:not-allowed; }
.chat-composer .btn-icon.hidden{ display:none; }

.chat-composer textarea.composer-input,
.chat-composer .composer textarea{
  flex:1; resize:vertical; min-height:44px; max-height:200px;
  border:none; outline:none; font-size:0.95rem; line-height:1.35;
  background:transparent; padding:6px 4px;
}
.chat-composer .btn.send{
  margin-left:auto; height:36px; padding:0 14px; border-radius:10px;
}

/* Önizlemeler */
.chat-composer .previews{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;
}
.chat-composer .tile{
  position:relative; width:96px; height:72px; border:1px solid rgba(2,6,23,.12);
  border-radius:10px; overflow:hidden; background:#fafafa;
  display:flex; align-items:center; justify-content:center;
}
.chat-composer .tile-thumb{
  max-width:100%; max-height:100%; display:block; object-fit:cover;
}
.chat-composer .tile-remove{
  position:absolute; top:4px; right:4px; width:20px; height:20px; border:none;
  border-radius:50%; background:rgba(0,0,0,.6); color:#fff; line-height:20px;
  font-weight:700; cursor:pointer;
}

/* Küçük ekranlar */
@media (max-width: 640px){
  .chat-composer .btn.send{ display:none; } /* Enter ile gönder yeterli */
}

/* Composer düzeni */
.chat-composer .composer{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid rgba(2,6,23,.12);
  border-radius:14px; padding:8px 10px; box-shadow: var(--shadow-sm);
}
.chat-composer .composer textarea{
  flex:1; resize:vertical; min-height:44px; max-height:200px;
  border:none; outline:none; font-size:.95rem; background:transparent;
}
.chat-composer .composer-actions{ display:flex; gap:8px; align-items:center; }
.chat-composer .btn-icon{
  border:none; background:#f4f6f8; width:36px; height:36px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:18px; line-height:1;
}
.chat-composer .btn-icon[disabled]{ opacity:.45; cursor:not-allowed; }
.chat-composer .btn.send{ height:36px; padding:0 14px; border-radius:10px; }

/* Önizleme kutuları */
.chat-composer .previews{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.chat-composer .tile{
  position:relative; width:96px; height:72px; border:1px solid rgba(2,6,23,.12);
  border-radius:10px; overflow:hidden; background:#fafafa;
  display:flex; align-items:center; justify-content:center;
}
.chat-composer .tile-thumb{ max-width:100%; max-height:100%; object-fit:cover; }
.chat-composer .tile-remove{
  position:absolute; top:4px; right:4px; width:20px; height:20px; border:none;
  border-radius:50%; background:rgba(0,0,0,.6); color:#fff; line-height:20px;
  font-weight:700; cursor:pointer;
}

/* Görünmeyen dosya inputları (tıklanabilir ama görünmez) */
.visually-hidden-file{
  position:absolute !important; left:-9999px !important; width:1px !important;
  height:1px !important; opacity:0 !important; pointer-events:none !important;
}

/* Bilgi (mavi) */
.chip-info{
  color:#1d4ed8;
  border:1px solid rgba(59,130,246,.35);
  background:rgba(59,130,246,.12);
}

/* Uyarı (sarı) */
.chip-warn{
  color:#b45309;
  border:1px solid rgba(245,158,11,.35);
  background:rgba(245,158,11,.12);
}

/* Tehlike (kırmızı) */
.chip-danger{
  color:#b91c1c;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.12);
}

.inline-dropdown { display:inline-block; position:relative; }
.inline-dropdown > summary { list-style:none; cursor:pointer; }
.inline-dropdown[open] .pause-form{
  box-shadow: var(--shadow-md);
  border: var(--border);
  background:#fff; padding:10px; border-radius:10px;
  position:absolute; right:0; z-index:10; min-width:240px;
}
.inline-dropdown .radio{ display:block; margin:4px 0; }
.inline-dropdown .input{ width:100%; }

/* --- Support: Talep Oluştur --- */
.support-create .create-card { padding: 18px; }
.support-create .create-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.support-create h2 { margin:0; font-size:22px; }

.support-create .form-grid { display:grid; gap:14px; }
.support-create .field-label { display:block; font-weight:600; margin-bottom:6px; }
.support-create .ui-input,
.support-create .field select,
.support-create .field textarea {
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; min-height:42px;
}
.support-create .field textarea { min-height:120px; resize:vertical; }

.support-create .attach-bar { display:flex; align-items:center; gap:10px; }
.support-create .icon-btn {
  width:42px; height:42px; border:1px solid #1a1b1e; border-radius:999px; background: #806002; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; transition:box-shadow .15s, transform .02s;
}
.support-create .icon-btn:hover { box-shadow:0 2px 10px rgba(0,0,0,.06); }
.support-create .icon-btn:active { transform:scale(.98); }

.support-create .hint { color:#6b7280; font-size:12px; }

.support-create .file-list { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.support-create .file-chip {
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background: #806002;
}
.support-create .file-chip .name { max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-create .file-chip .remove {
  border:0; background: #880404; width:22px; height:22px; border-radius:50%; line-height:20px; cursor:pointer;
  border:1px solid #6c1a1a;
}
.support-create .file-chip .remove:hover { background: #6a2121; border-color: #880404; }

.support-create .actions { display:flex; justify-content:flex-end; margin-top:8px; }

.support-create .err { color:#b91c1c; font-size:12px; margin-top:4px; }

/* --- Uygulamalar sayfası --- */
.apps .apps-head {
  padding: 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.apps-title { margin:0; font-size:22px; }
.apps-sub { margin:4px 0 0; color:#6b7280; font-size:13px; }

.apps-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px; margin-top:12px;
}
@media (max-width: 1100px){ .apps-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 700px){  .apps-grid{ grid-template-columns: 1fr;} }

.app-card { padding: 0; overflow:hidden; display:flex; flex-direction:column; }
.app-media{
  background-size: cover;
  background-position: center;
  background-color:#f3f4f6;
  width:100%;
  aspect-ratio: 3 / 1;   /* <- sabit oran */
  height:auto;           /* tarayıcı oranla hesaplar */
}
.app-body { padding:14px; display:flex; flex-direction:column; gap:8px; }
.app-headline { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.app-title { margin:0; font-size:18px; }
.app-ver {
  font-size:12px; font-weight:600; color:#111827; background:#eef2ff; border-radius:999px; padding:2px 8px;
}
.app-desc { margin:0; color:#4b5563; font-size:14px; min-height:40px; }

.app-tags { display:flex; flex-wrap:wrap; gap:6px; }
.app-tags .tag {
  font-size:12px; background:#f3f4f6; border:1px solid #e5e7eb; padding:4px 8px; border-radius:999px;
}

.app-actions { padding:12px 14px; display:flex; justify-content:flex-end; border-top:1px solid #f1f5f9; }

/* --- Apps: kare kapak, sabit 512x512 kartlar --- */
:root { --app-tile: 512px; }  /* burayı 384, 640 vb. yapabilirsiniz */

.apps-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--app-tile), var(--app-tile)));
  gap:14px;
  justify-content:center;        /* satırdaki artan boşluğu ortala */
}

.app-card{
  width: var(--app-tile);
  padding:0;                     /* kapak tam otursun */
  overflow:hidden;
  display:flex; flex-direction:column;
  border-radius:12px;
}

.app-media{
  width:100%;
  height: var(--app-tile);       /* tam 512px */
  background-size: cover;        /* taşma/kırpma olmadan kare görseller tam sığar */
  background-position: center;
  background-color:#f3f4f6;
  border-bottom:1px solid #f1f5f9;
}

.app-body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.app-actions{ padding:12px 14px; display:flex; justify-content:flex-end; border-top:1px solid #f1f5f9; }

/* Küçük ekran – kart genişliği ekranı aşarsa responsive davran */
@media (max-width: 560px){
  .apps-grid{ grid-template-columns: 1fr; }
  .app-card{ width: 100%; }
  .app-media{ height:auto; aspect-ratio:1/1; }  /* mobilde de kare kalsın */
}
/* Kartın tamamı tıklanabilir olsun */
.app-card{ position:relative; cursor:pointer; overflow:hidden; }
.app-card .stretched-link{
  position:absolute; inset:0; z-index:20; /* tüm alanı kapla */
}

/* Kapak alanı üzerinde hover efekti */
.app-media{ position:relative; transition: transform .25s ease; will-change: transform; }
.app-card:hover .app-media{ transform: scale(1.03); }

.app-media::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 80% 90%, rgba(0,0,0,.06), rgba(0,0,0,0));
  opacity:0; transition: opacity .25s ease;
}
.app-card:hover .app-media::after{ opacity:1; }

/* Köşede küçük bir “Git →” çipi (buton değil, sadece görsel ipucu) */
.app-hover{
  position:absolute; right:10px; bottom:10px; z-index:5;
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:#ffffff; border:1px solid #e5e7eb; color:#111827;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  opacity:0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
  pointer-events:none; /* tıklamayı engellemez */
}
.app-card:hover .app-hover{ opacity:1; transform: translateY(0); }

/* İsteğe bağlı: hover'da karta hafif gölge/kaldrma */
.app-card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.06); transform: translateY(-1px); transition: box-shadow .2s, transform .2s; }

/* --- Analyzer: App Home / Son Analizler --- */
.app-home .head-row{
  padding:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.app-home h2{ margin:0; font-size:22px; }
.app-home .actions{ display:flex; gap:10px; }

.jobs-card{ padding:0; }
.jobs-card .row-head{ padding:12px 16px; border-bottom:1px solid #f1f5f9; }
.jobs-card h3{ margin:0; font-size:16px; }

.table-wrap{ overflow:auto; }
.jobs-table{ width:100%; border-collapse:separate; border-spacing:0; }
.jobs-table thead th{
  text-align:left; font-size:12px; letter-spacing:.02em; color:#6b7280;
  padding:10px 12px; border-bottom:1px solid #eef2f7;
}
.jobs-table tbody td{
  padding:12px; border-bottom:1px solid #f3f4f6; vertical-align:middle;
}

/* Dosya hücresi: ad + küçük chipler */
.file-cell .fname{
  font-weight:600; max-width:52ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-cell .chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pill{
  display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#f9fafb;
}
.pill-red{ color:#b91c1c; background:#fee2e2; border-color:#fecaca; }
.pill-green{ color:#166534; background:#dcfce7; border-color:#bbf7d0; }

/* Durum rozetleri */
.st{ display:inline-block; font-size:12px; padding:4px 8px; border-radius:8px; background:#f3f4f6; color:#111827; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#fef3c7; color:#92400e; }
.st-err{ background:#fee2e2; color:#b91c1c; }

/* Mobil uyum */
@media (max-width: 720px){
  .jobs-table thead{ display:none; }
  .jobs-table tbody tr{ display:grid; grid-template-columns: 1fr; gap:6px; padding:10px 12px; }
  .jobs-table tbody td{ border-bottom:0; padding:4px 0; }
  .jobs-table tbody td:last-child{ padding-top:6px; }
  .jobs-card .row-head{ padding:14px; }
}

/* Filtre çubuğu + sayfalama */
.filters-bar{
  display:flex; align-items:center; gap:8px;
}
.filters-bar .ui-input{
  padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; min-height:38px;
}

.pagination{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-top:1px solid #f1f5f9;
}
.pagination .page{
  font-size:14px; border:1px solid #e5e7eb; padding:6px 10px; border-radius:8px; background:#fff;
}
.pagination .page.disabled{ opacity:.5; pointer-events:none; }
.pagination .page.muted{ border:0; background:transparent; }

.sep{ border:0; border-top:1px solid #f1f5f9; margin:10px 0; }
.btn-danger{ color:#b91c1c; border-color:#fecaca; }
.btn-danger:hover{ background:#fee2e2; }
.note{ padding:8px 10px; border-radius:8px; font-size:13px; border:1px solid #e5e7eb; }
.note-green{ background:#dcfce7; border-color:#bbf7d0; color:#166534; }


/* === AUTH (Giriş & Kayıt) — Hafif tema, ortalı kart ===================== */
/* Varsayılan değişkenler (site değişkenlerin varsa onları kullanır) */
:root{
  --auth-border: var(--border, #e5e7eb);
  --auth-card:   var(--card,   #fff);
  --auth-text:   var(--text,   #0f172a);
  --auth-muted:  var(--muted,  #667085);
  --auth-primary:var(--primary,#4f46e5);
}

/* Sayfayı ortala, arkaplana çok hafif bir dokunuş ver */
.auth-page{
  width:100%;
  min-height: calc(100vh - 96px);
  display:grid;
  place-items:center;
  padding:24px 16px;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(14,165,233,.05), transparent 40%),
    radial-gradient(900px 300px at 110% 10%, rgba(99,102,241,.06), transparent 40%);
}

/* Kart */
.auth-card{
  width:100%;
  max-width:560px;
  background: var(--auth-card);
  border:1px solid var(--auth-border);
  border-radius:18px;
  padding:26px 22px;
  box-shadow:0 12px 50px rgba(2,6,23,.08);
  margin-inline:auto;
}

/* Başlık & altbaşlık */
.auth-title{
  font-size:28px;
  font-weight:800;
  margin:0 0 6px;
  text-align:center;
  letter-spacing:.2px;
  color:var(--auth-text);
}
.auth-sub{
  margin:0 0 16px;
  text-align:center;
  color:var(--auth-muted);
}

/* Alanlar */
.form-row{ margin:12px 0 16px; }
.form-row label{ display:block; font-weight:600; margin-bottom:6px; color:var(--auth-text); }

.grid.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Input */
.input{
  width:100%;
  height:46px;
  padding:10px 12px;
  border:1px solid var(--auth-border);
  border-radius:12px;
  background:#fff;
  outline:none;
}
.input:focus{
  border-color:var(--auth-primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--auth-primary) 18%, transparent);
}

/* Input + buton grubu (şifre göster/gizle) */
.input-group{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.btn-icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--auth-border);
  background:#f8fafc;
  border-radius:12px;
  cursor:pointer;
}

/* Yardımcı satırlar */
.helper-row{ display:flex; justify-content:flex-end; margin-top:6px; }
.swap-link{ text-align:center; margin-top:14px; color:var(--auth-muted); }

/* Checkbox/Remember me */
.checkbox{ width:16px; height:16px; vertical-align:middle; margin-right:8px; }

/* Parola gücü göstergesi */
.pw-meter{ height:8px; background:#eceff3; border-radius:999px; margin-top:8px; overflow:hidden; }
.pw-meter .bar{ height:100%; width:0; transition:width .2s ease; }
.pw-meter .bar.lvl0{ background:#d1d5db; }
.pw-meter .bar.lvl1{ background:#ef4444; }
.pw-meter .bar.lvl2{ background:#f59e0b; }
.pw-meter .bar.lvl3{ background:#10b981; }
.pw-meter .bar.lvl4{ background:#0ea5e9; }
.pw-hint{ font-size:12px; margin-top:6px; color:var(--auth-muted); }

/* Segment kontrol (Normal / Gizli) */
.seg{ display:flex; gap:8px; justify-content:center; margin:8px 0 12px; }
.seg-btn{
  border:1px solid var(--auth-border);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  color:var(--auth-text);
}
.seg-btn.is-active{
  background:var(--auth-primary);
  border-color:var(--auth-primary);
  color:#fff;
}

/* Gizleme yardımcıları (JS ile görünürlük değiştiriyoruz) */
.hidden-only{ display:none; }
.normal-only{ display:block; }

/* Butonlar uyumlu görünsün */
.btn-primary,
.btn.btn-primary{ background:var(--auth-primary); color:#fff; border:1px solid var(--auth-primary); }
.btn-primary:hover,
.btn.btn-primary:hover{ filter:brightness(.96); }

/* Kayıt & Giriş formu altındaki bağlantılar */
.auth-links{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* Mobil uyum */
@media (max-width:520px){
  .grid.two{ grid-template-columns:1fr; }
  .auth-card{ padding:22px 18px; }
}

.note-badge{
  position:absolute;
  top:6px; right:8px;
  display:inline-block;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:9px;
  font-size:12px; line-height:18px;
  text-align:center;
  background:#f59e0b; /* amber */
  color:#fff;
  cursor:help;   /* tooltip ipucu */
}
.bubble{ position:relative; }

.page-wrap{max-width:1100px;margin:0 auto}
.page-title{margin:6px 0 14px}
.grid-2{display:grid;grid-template-columns:1.1fr 1.4fr;gap:18px}
@media (max-width: 960px){.grid-2{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--border,#e7e7ea);border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(20,20,20,.04)}
.section-title{font-weight:700;font-size:15px}
.sep{border:0;border-top:1px solid #eee;margin:14px 0}

.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field .label{font-weight:600;font-size:13px}
.help{color:#777;font-size:12px}

.filebox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filebox input[type="file"]{display:none}
.filebox .fake{display:inline-flex;align-items:center;gap:8px;border:1px dashed #cfd2d7;border-radius:10px;padding:10px 12px;background:#fafbfc;font-weight:600;cursor:pointer}
.filebox .name{font-size:12px;color:#555}

.rules-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.toolbar-actions{display:flex;gap:8px}
.submit-row{margin-top:16px}

 /* Django’nun CheckboxSelectMultiple çıktısını grid gibi göster */
#id_enabled_rules{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
@media (max-width:720px){#id_enabled_rules{grid-template-columns:1fr}}
#id_enabled_rules li{background:#fafbfc;border:1px solid #eee;border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:flex-start}
#id_enabled_rules input[type="checkbox"]{margin-top:2px}

/* Layout */
.page-wrap{max-width:1100px;margin:0 auto}
.page-title{margin:6px 0 14px}
.grid-2{display:grid;grid-template-columns:1.05fr 1.4fr;gap:18px}
@media (max-width: 960px){.grid-2{grid-template-columns:1fr}}

/* Cards */
.card{background:#fff;border:1px solid var(--border,#e8eaef);border-radius:14px;padding:18px}
.card--elev{box-shadow:0 6px 18px rgba(20,20,40,.06)}
.section-title{font-weight:700;font-size:15px}
.sep{border:0;border-top:1px solid #eee;margin:14px 0}

/* Fields */
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field .label{font-weight:600;font-size:13px}
.help{color:#777;font-size:12px}

/* Dropzone */
.dropzone{position:relative;border:1.5px dashed #cfd6e4;border-radius:12px;padding:18px;text-align:center;cursor:pointer;background:#fafbfe}
.dropzone .dz-input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone .dz-icon{font-size:26px}
.dropzone .dz-text{margin-top:6px}
.dropzone .dz-sub{margin-top:4px;color:#666;font-size:12px}
.dropzone .link{text-decoration:underline}
.dropzone.is-drag{background:#f1f5ff;border-color:#88a4ff}

/* Rules toolbar */
.rules-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.toolbar-actions{display:flex;gap:8px;align-items:center}
.muted{color:#667085;font-size:12px}

/* Django CheckboxSelectMultiple çıktısını zenginleştir */
#id_enabled_rules{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
@media (max-width:720px){#id_enabled_rules{grid-template-columns:1fr}}
#id_enabled_rules li{position:relative;border:1px solid #e7e9f0;border-radius:10px;padding:10px 12px;background:#fbfcff;display:flex;align-items:flex-start;gap:8px;transition:box-shadow .15s,border-color .15s}
#id_enabled_rules li:hover{box-shadow:0 6px 14px rgba(20,20,40,.05);border-color:#d8def0}
#id_enabled_rules input[type="checkbox"]{margin-top:2px}

/* Checked görünüm (input + label) */
#id_enabled_rules input[type="checkbox"]:checked + label{
  font-weight:600; position:relative; padding-left:22px;
}
#id_enabled_rules input[type="checkbox"]:checked + label::before{
  content:"✓"; position:absolute; left:0; top:0; color:#2563eb; font-weight:800;
}

/* Sticky form actions */
.form-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:10px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 25%);}

/* Buttons (opsiyonel yükseltme) */
.btn--primary{background:#2563eb;color:#fff;border-color:#2563eb}
.btn--primary:hover{filter:brightness(.95)}
.btn--sm{padding:6px 10px;font-size:12px;border-radius:10px}

/* Small utilities */
.link{color:#2563eb;cursor:pointer}


/* Layout */
.upload-page { max-width: 1120px; margin: 0 auto; }
.page-head { margin: 8px 0 16px; }
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px){
  .upload-grid { grid-template-columns: 1fr; }
}

/* Cards */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; margin-bottom: 12px;
}
.section-title .muted { font-weight: 500; color: #6b7280; font-size: 12px; }
.section-title .spacer { flex: 1; }
.section-title .dot { color:#9ca3af; }

/* Dropzone */
.dropzone {
  position: relative;
  display: grid; place-items: center;
  border: 1.5px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  transition: .15s ease;
}
.dropzone.drag { border-color:#2563eb; background:#f0f6ff; }
.dz-icon { font-size: 28px; margin-bottom: 8px; }
.dz-text { font-weight: 600; }
.dz-text .link { color:#2563eb; text-decoration: underline; cursor: pointer; }
.dz-sub { color:#6b7280; font-size: 12px; margin-top: 6px; }

/* Gerçek file input'u tamamen gizle */
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Thresholds */
.thresholds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.thresholds .span-2 { grid-column: 1 / -1; }
.field .label { display:block; font-weight:600; margin-bottom:6px; }
.field input[type="number"] {
  width: 100%;
  height: 36px;
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 6px 10px; outline: none;
}
.field input[type="number"]:focus { border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.field .hint { color:#6b7280; font-size:12px; margin-top:6px; }
.help { color:#6b7280; font-size:12px; margin-top:8px; }

/* Kurallar listesi (Django'nun <ul id="id_enabled_rules"> çıktısı) */
.rules #id_enabled_rules {
  list-style:none; margin:0; padding:0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
}
@media (max-width: 640px){
  .rules #id_enabled_rules { grid-template-columns: 1fr; }
}
.rules #id_enabled_rules li { margin:0; padding:0; }
.rules #id_enabled_rules li label {
  display:flex; align-items:flex-start; gap:10px;
  border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; transition:.12s ease; background:#fff;
}
.rules #id_enabled_rules li label:hover { border-color:#cbd5e1; background:#fafafa; }
.rules #id_enabled_rules input[type="checkbox"]{
  width:18px; height:18px; margin-top:2px; accent-color:#2563eb;
}

/* Buttons/links */
.btn { background:#e5e7eb; border:none; border-radius:8px; padding:10px 14px; cursor:pointer; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { filter:brightness(0.95); }
.link-btn { background:transparent; border:none; color:#2563eb; cursor:pointer; padding:0; }
.actions { margin-top: 16px; text-align: left; }

/* Kurallar tek kartta – grid ve satır tasarımı */
.rules-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
}
@media (max-width: 820px){ .rules-grid{ grid-template-columns: 1fr; } }

.rule-item{
  display:flex; align-items:center; gap:10px;
  border:1px solid #e5e7eb; background:#fff;
  border-radius:10px; padding:10px 12px;
  transition:.12s ease;
}
.rule-item:hover{ border-color:#cbd5e1; background:#fafafa; }

.rule-item input[type="checkbox"]{
  width:18px; height:18px; accent-color:#2563eb;
}

.rule-text{ flex:1; cursor:pointer; }

/* Eşik alanı (kurallar yanındaki küçük alanlar) */
.rule-param{
  display:flex; align-items:center; gap:8px; margin-left:12px;
}
.rule-param .param-label{ color:#6b7280; font-size:12px; white-space:nowrap; }
.rule-param input[type="number"]{
  width:96px; height:34px; padding:6px 10px;
  border:1px solid #e5e7eb; border-radius:8px; outline:none;
}
.rule-param input[type="number"]:focus{
  border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.is-disabled{ opacity:.55; }

/* ufak çapaklar */
.section-title .muted{ font-size:12px; color:#6b7280; font-weight:500; }
.link-btn{ background:transparent; border:0; color:#2563eb; cursor:pointer; padding:0; }
.dot{ color:#9ca3af; }

/* Sayfa iskeleti: üstte ufak dosya, altta geniş kurallar */
.upload-stack{ max-width: 1060px; margin: 0 auto; display:flex; flex-direction:column; gap:18px; }

/* Dosya kutusu: küçük dikdörtgen, solda */
.file-card .drop-sm{
  width: 420px; height: 160px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border: 2px dashed #d1d5db; border-radius: 12px; background:#fafafa;
  cursor:pointer; transition: .15s ease;
}
.file-card .drop-sm.drag{ border-color:#2563eb; background:#f0f7ff; }
.file-card .dz-icon{ font-size:28px; margin-bottom:6px; }
.file-card .dz-text{ font-weight:600; }
.file-card .dz-sub{ color:#6b7280; font-size:12px; margin-top:6px; }

/* Kurallar: tam genişlik kart ve 3 sütun grid */
.rules-card .rules-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px;
}
@media (max-width: 980px){ .rules-card .rules-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .rules-card .rules-grid{ grid-template-columns: 1fr; } }

.rule-item{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px;
}
.rule-item:hover{ border-color:#cbd5e1; background:#fbfbfb; }

.rule-item input[type="checkbox"]{ width:18px; height:18px; accent-color:#2563eb; }
.rule-text{ flex:1; cursor:pointer; }

/* K3/K5/K7 yanındaki küçük parametre inputları */
.rule-param{ display:flex; align-items:center; gap:8px; margin-left:8px; }
.rule-param .param-label{ font-size:12px; color:#6b7280; white-space:nowrap; }
.rule-param input[type="number"]{
  width:96px; height:34px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; outline:none;
}
.rule-param input[type="number"]:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.is-disabled{ opacity:.55; }

.actions{ margin-top:14px; display:flex; justify-content:flex-start; }
.section-title .muted{ font-size:12px; color:#6b7280; margin-left:8px; }
.link-btn{ background:transparent; border:0; color:#2563eb; cursor:pointer; padding:0 2px; }
.dot{ color:#9ca3af; margin:0 6px; }

/* Genel iskelet */
.upload-stack{ max-width: 1024px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }

/* Dosya kutusu ufak */
.file-card .drop-sm{
  width: 420px; height: 160px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  border:2px dashed #d1d5db; border-radius:12px; background:#fafafa; cursor:pointer; transition:.15s;
}
.file-card .drop-sm.drag{ border-color:#2563eb; background:#f0f7ff; }
.file-card .dz-icon{ font-size:28px; margin-bottom:6px; }
.file-card .dz-text{ font-weight:600; }
.file-card .dz-sub{ color:#6b7280; font-size:12px; margin-top:6px; }

/* Kurallar: tek sütun, alt alta */
.rules-card .rules-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rule-row{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px;
}
.rule-row:hover{ border-color:#cbd5e1; background:#fbfbfb; }

.rule-check{ display:flex; align-items:center; gap:10px; flex:1; }
.rule-check input[type="checkbox"]{ width:18px; height:18px; accent-color:#2563eb; }
.rule-text{ cursor:pointer; }

/* Parametre kutucukları */
.rule-param{ display:flex; align-items:center; gap:8px; }
.rule-param .param-label{ font-size:12px; color:#6b7280; white-space:nowrap; }
.rule-param input[type="number"]{
  width:110px; height:34px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; outline:none;
}
.rule-param input[type="number"]:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.is-disabled{ opacity:.55; }

.actions{ margin-top:14px; }
.section-title .muted{ font-size:12px; color:#6b7280; margin-left:8px; }
.link-btn{ background:transparent; border:0; color:#2563eb; cursor:pointer; padding:0 2px; }
.dot{ color:#9ca3af; margin:0 6px; }

/* Erişilebilirlik için */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

@media (min-width: 1400px){
  .chat-main{ padding-right: calc(var(--chatAsideW,420px) + 20px); }
  .chat-aside{ position: fixed; right:24px; top:96px; width:var(--chatAsideW,420px); max-height:calc(100vh - 120px); overflow:auto; }
}

/* Pagination */
.pagination-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin:8px 0 12px;
  gap:8px;
}
.pagination-left{text-align:left}
.pagination-center{text-align:center}
.pagination-right{text-align:right}
.pagination-left .btn,
.pagination-right .btn{margin:0}
.btn.btn--disabled{opacity:.45;pointer-events:none}
.page-indicator{font-weight:600;padding:0 6px}

/* ======= Prognifty Home Styles ======= */
:root{
  --pg-radius: 1.25rem;
  --pg-shadow-sm: 0 6px 20px rgba(0,0,0,.08);
  --pg-shadow-md: 0 10px 30px rgba(0,0,0,.12);
  --pg-hero-h: min(92vh, 820px);
}

/* Basit reveal animasyonu */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}
.reveal.show{
  opacity: 1;
  transform: none;
}

/* HERO */
.pg-hero{
  position: relative;
  min-height: var(--pg-hero-h);
  overflow: hidden;
  padding: 120px 0 100px;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.12), rgba(0,0,0,0));
}
.pg-hero .container{ position: relative; z-index: 2; }
.pg-hero-bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  filter: brightness(.65) saturate(1.1);
  transform: scale(1.04);
}
.pg-hero-gradient{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(10,13,22,.55), rgba(10,13,22,.75) 35%, rgba(10,13,22,.95) 90%);
  z-index:1;
}

/* GENEL SEKSİYON */
.pg-section{ padding: 80px 0; }
.pg-section-alt{ background: #f7f9fc; }

/* Kartlar */
.pg-card{
  background: #fff;
  border-radius: var(--pg-radius);
  padding: 26px 22px;
  box-shadow: var(--pg-shadow-sm);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pg-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--pg-shadow-md);
}
.pg-card-icon{
  width: 56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #e8efff, #f6f9ff);
  margin-bottom: 14px;
}
.pg-card-icon img{ width:28px; height:28px; object-fit:contain; }
.pg-card h5{ margin-bottom: 8px; }
.pg-card p{ color:#6b7280; margin-bottom: 14px; }
.pg-link{
  text-decoration: none; font-weight: 600;
}
.pg-link:hover{ text-decoration: underline; }

/* Görsel alanı */
.pg-visual img{ border-radius: var(--pg-radius); }

/* CTA */
.pg-cta{
  position: relative; overflow: hidden;
  padding: 90px 0;
  background: #0b1020;
}
.pg-cta .container{ position: relative; z-index: 2; }
.pg-cta-bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  filter: brightness(.5) saturate(1.05);
  transform: scale(1.05);
}
.pg-cta-gradient{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,13,22,.55), rgba(10,13,22,.85) 65%, rgba(10,13,22,.95));
  z-index:1;
}

/* Liste */
.pg-list{ padding-left: 1.1rem; }
.pg-list li{ margin-bottom: .35rem; }

/* Footer */
.pg-footer{
  background: #0b1020;
  color: #c9d1e8;
  padding: 50px 0 60px;
}
.pg-footer h6{ color: #fff; margin-bottom: 14px; }
.pg-footlink{
  color: #c9d1e8; text-decoration: none;
}
.pg-footlink:hover{ text-decoration: underline; }

/* Responsive küçük dokunuşlar */
@media (max-width: 991px){
  .pg-hero{ padding: 90px 0 80px; }
}

/* ===== NAVBAR — Black & Gold Theme ===== */
:root{
  --nx-nav-bg:#0b0e12;          /* navbar ana zemin */
  --nx-nav-bg2:#121725;         /* degrade ikinci ton */
  --nx-gold:#f5cf62;            /* altın */
  --nx-gold-2:#ffd97a;          /* altın açık */
  --nx-ink:#eef1f6;             /* açık metin */
  --nx-mute:#a7adbb;            /* yardımcı metin */
  --nx-line:rgba(255,255,255,.08);
}

/* Ana bar */
.nx-nav{
  background:
    radial-gradient(900px 380px at 100% -40%, rgba(245,207,98,.12), transparent 60%),
    linear-gradient(180deg, var(--nx-nav-bg), var(--nx-nav-bg2));
  border-bottom: 1px solid var(--nx-line);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  position: sticky; top: 0; z-index: 1030;   /* üstte sabit */
}

/* İç boşluklar — bootstrap nav yapısına uyumlu */
.nx-nav .navbar-brand,
.nx-nav .navbar-nav .nav-link,
.nx-nav .navbar-text,
.nx-nav .btn{ color: var(--nx-ink); }

.nx-nav .navbar-brand{
  font-weight: 800; letter-spacing: .4px;
  color: var(--nx-ink);
}

/* Linkler */
.nx-nav .nav-link{
  color: var(--nx-mute);
  padding: .65rem .9rem;
  transition: color .15s ease, transform .15s ease;
}
.nx-nav .nav-link:hover{
  color: var(--nx-ink);
  transform: translateY(-1px);
}

/* Aktif link (route’a göre .active ekliyse) */
.nx-nav .nav-link.active{
  color: var(--nx-ink);
  position: relative;
}
.nx-nav .nav-link.active::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:.35rem;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--nx-gold), var(--nx-gold-2));
}

/* Butonlar (Profil / Çıkış vs.) */
.nx-nav .btn{
  border-radius: 10px;
  padding: .45rem .75rem;
  border: 1px solid var(--nx-line);
  background: transparent;
  color: var(--nx-ink);
}
.nx-nav .btn:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}

/* Altın aksanlı birincil buton istersen */
.nx-nav .btn-gold{
  border: none;
  color: #0b0b0b;
  background: linear-gradient(135deg, var(--nx-gold), var(--nx-gold-2));
  box-shadow: 0 8px 22px rgba(245,207,98,.25);
}
.nx-nav .btn-gold:hover{ filter: brightness(1.05); }

/* Bildirim çanı gibi ikonlar */
.nx-nav .nav-icon{
  width: 20px; height: 20px; display:inline-block;
  filter: drop-shadow(0 2px 6px rgba(245,207,98,.25));
  color: var(--nx-gold);
}

/* Logo (eğer img kullanıyorsan) */
.nx-nav .navbar-brand img{
  height: 28px; width:auto;
  filter: drop-shadow(0 4px 18px rgba(245,207,98,.18));
}

/* Küçük ekranlar */
@media (max-width: 576px){
  .nx-nav .nav-link{ padding: .5rem .7rem; }
}


/* =======================================================================
   BLACK & GOLD — SABİT KOYU TEMA OVERRIDE
   Not: Yalnızca RENK değiştirir; yerleşim/ölçüler korunur.
   Bu blok en sonda olduğu için önceki açık renkleri bastırır.
   ======================================================================= */

/* ---- Palet ---- */
:root{
  /* Ana zeminler */
  --bg:#0b0f14;
  --card:#11161d;
  --surface:#11161d;
  --surface-2:#0f141a;

  /* Metinler */
  --text:#e6e7eb;
  --muted:#9aa4b2;

  /* Sınırlar & gölgeler */
  --border-color:rgba(255,255,255,.08);
  --border:1px solid var(--border-color);
  --shadow-sm:0 6px 18px rgba(0,0,0,.25);

  /* Marka — Gold */
  --gold-1:#7a5c00;
  --gold-2:#c9a227;
  --gold-3:#ffe27a;
  --gold-4:#b68b00;

  /* Birincil renk */
  --primary:var(--gold-2);
  --primary-600:var(--gold-2);
  --primary-700:var(--gold-4);
  --primary-contrast:#0b0f14;
  --ring:color-mix(in oklab, var(--primary) 28%, transparent);

  /* Navbar cam */
  --nav-bg:rgba(8,10,12,.72);
  --nav-border:rgba(255,255,255,.08);
}

/* Genel zemin & metin */
*{ color-scheme: dark; }
html,body{ background:var(--bg) !important; color:var(--text) !important; }

/* Kart/Panel/Surface zeminleri tekilleştir */
.card,.panel,.surface,.jobs-card,.mini-card,.app-card,
.auth-card,.note,.detail,.table-wrap,.surface-fit,.surface-wide,
.app-body,.apps .apps-head,.apps .app-actions,.jobs-card .row-head,
.chat-aside,.chat-composer .composer,
.copy-btn,.code-chip,.pill,.badge,.chip{
  background:var(--card) !important;
  border:var(--border) !important;
  color:var(--text) !important;
  box-shadow:var(--shadow-sm);
}

/* Nav */
.site-nav{ background:var(--nav-bg) !important; border-bottom:1px solid var(--nav-border) !important; }
.nav-toggle span{ background:#e5e7eb !important; }
.links a{ color:var(--muted) !important; }
.links a:hover{ background:rgba(201,162,39,.10) !important; color:#fff !important; }
.links a.is-active{
  background:rgba(201,162,39,.14) !important;
  border:1px solid rgba(201,162,39,.45) !important;
  color:#fff !important;
}
.hello{ color:var(--muted) !important; }

/* Metin tonları */
.muted,.small-muted,.panel-title,.apps-sub,.note,.kpi-label,.kv .k{ color:var(--muted) !important; }
.brand-text{ filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) !important; }

/* Butonlar */
.btn,.btn-outline,.btn-ghost,.btn-icon,.copy-btn{
  background:linear-gradient(180deg, #171c23, #11161d) !important;
  border:1px solid var(--border-color) !important;
  color:#e9eaee !important;
  transition: transform .02s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover,.btn-outline:hover,.btn-ghost:hover,.btn-icon:hover,.copy-btn:hover{
  filter:brightness(1.08);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.btn--primary,.btn-primary,.btn.btn-primary{
  background: linear-gradient(180deg, color-mix(in lab, var(--primary) 96%, white 4%), var(--gold-4)) !important;
  border-color: color-mix(in lab, var(--primary) 75%, black 25%) !important;
  color: var(--primary-contrast) !important;
}
.btn--primary:hover,.btn-primary:hover,.btn.btn-primary:hover{ filter:brightness(1.05); }

.btn-danger{
  background:linear-gradient(180deg,#3b0b0b,#2a0909) !important;
  border-color:rgba(239,68,68,.4) !important;
  color:#ffb4b4 !important;
}
.btn-danger:hover{ background:#3f1010 !important; }

/* Form öğeleri */
input,select,textarea,.ui-input,
.filters-compact .field,
.filter-bar input[type="date"], .filter-bar input[type="search"], .filter-bar select,
.support-create .field select, .support-create .field textarea{
  background:#0d1218 !important;
  color:var(--text) !important;
  border:1px solid var(--border-color) !important;
}
input::placeholder,textarea::placeholder{ color:color-mix(in srgb, var(--muted) 80%, white 10%) !important; }
input:focus,select:focus,textarea:focus,
.filters-compact select:focus,.filters-compact input:focus{
  border-color: color-mix(in oklab, var(--primary) 70%, white 0%) !important;
  box-shadow:0 0 0 .2rem var(--ring) !important;
  outline:none !important;
}

/* Chip/Rozer/Etiketler */
.badge{ background:#151b22 !important; border-color:var(--border-color) !important; color:#e5e7eb !important; }
.badge--rule{ background:rgba(201,162,39,.14) !important; border-color:rgba(201,162,39,.35) !important; color:#ffd97a !important; }
.badge--vio{ background:rgba(239,68,68,.16) !important; border-color:rgba(239,68,68,.35) !important; color:#ffb4b4 !important; }
.badge--ctl{ background:rgba(16,185,129,.14) !important; border-color:rgba(16,185,129,.35) !important; color:#86efac !important; }

.chip,.pill{ background:#151b22 !important; border-color:var(--border-color) !important; color:#cbd5e1 !important; }
.chip-success{ background:rgba(16,185,129,.18) !important; border-color:rgba(16,185,129,.35) !important; color:#86efac !important; }
.chip-info{ background:rgba(59,130,246,.16) !important; border-color:rgba(59,130,246,.35) !important; color:#93c5fd !important; }
.chip-warn{ background:rgba(245,158,11,.16) !important; border-color:rgba(245,158,11,.35) !important; color:#facc15 !important; }
.chip-danger{ background:rgba(239,68,68,.16) !important; border-color:rgba(239,68,68,.35) !important; color:#ffb4b4 !important; }

/* Tablolar */
.table-wrap,.table-responsive{ background:var(--card) !important; border:var(--border) !important; }
.table{ color:var(--text) !important; }
.table thead th{
  background:#0f141a !important;
  color:#d7dde6 !important;
  border-bottom:1px solid var(--border-color) !important;
}
.table tbody td{ border-bottom:1px solid var(--border-color) !important; }
.table tbody tr:nth-child(even){ background:rgba(255,255,255,.02) !important; }
.table tbody tr:hover{ background:rgba(201,162,39,.08) !important; }

/* KPI & özet kutuları */
.kpi,.stat,.summary-cards .card{ background:var(--card) !important; border:var(--border) !important; }
.stat-label,.summary-cards .label{ color:var(--muted) !important; }
.stat-value,.summary-cards .value{ color:#f3f4f6 !important; }

/* Chat balonları */
.bubble{ background:#141a22 !important; border:1px solid var(--border-color) !important; color:var(--text) !important; }
.msg-row.user .bubble,.bubble.user{
  background:rgba(201,162,39,.12) !important;
  border-color:rgba(201,162,39,.40) !important;
}
.bubble.agent{ background:#161d27 !important; }
.bubble.system{ background:#10161c !important; }
.bubble .meta{ color:var(--muted) !important; }
.bubble.hl{ outline:2px solid var(--gold-3) !important; box-shadow:0 0 0 3px rgba(201,162,39,.18) inset !important; }
.bubble .author{ color:#f3f4f6 !important; }

/* Composer & ekler */
.chat-composer .btn-icon{ background:#171c23 !important; border:1px solid var(--border-color) !important; color:#e5e7eb !important; }
.chat-composer .tile{ background:#0f141a !important; border:1px solid var(--border-color) !important; }
.attach-img,.attach-video{ border:1px solid var(--border-color) !important; }

/* Bildirim çanı rozetleri */
.notif-bell .badge{ background:#b91c1c !important; }

/* Uygulamalar / kartlar */
.app-media{ background-color:#0f141a !important; }
.app-ver{ background:rgba(201,162,39,.15) !important; color:#ffe27a !important; border:1px solid rgba(201,162,39,.35) !important; }
.app-tags .tag{ background:#151b22 !important; border:1px solid var(--border-color) !important; color:#cbd5e1 !important; }
.app-hover{ background:#0f141a !important; border:1px solid var(--border-color) !important; color:#e5e7eb !important; }

/* Auth sayfaları */
.auth-page{ background:
    radial-gradient(1200px 400px at 10% -10%, rgba(201,162,39,.05), transparent 40%),
    radial-gradient(900px 300px at 110% 10%, rgba(201,162,39,.06), transparent 40%)
  !important; }
.auth-card{ background:var(--card) !important; border:var(--border) !important; }
.auth-title{ color:#f3f4f6 !important; }
.auth-sub{ color:var(--muted) !important; }
.seg-btn{ background:#151b22 !important; border:1px solid var(--border-color) !important; color:#e5e7eb !important; }
.seg-btn.is-active{ background:var(--primary) !important; border-color:color-mix(in lab, var(--primary) 80%, black 20%) !important; color:var(--primary-contrast) !important; }

/* Filtre çubukları */
.filters-compact .field{ background:#0d1218 !important; border:1px solid var(--border-color) !important; }
.filters-bar .ui-input{ background:#0d1218 !important; border:1px solid var(--border-color) !important; color:var(--text) !important; }

/* Sayfa kenarlıkları ve ayırıcılar */
.sep{ border-top:1px solid var(--border-color) !important; }
hr{ border-color:var(--border-color) !important; }

/* Linkler */
a, .link{ color:var(--primary) !important; }
a:hover, .link:hover{ color:#ffd34d !important; }

/* Uyarı notları */
.note-green{ background:rgba(16,185,129,.12) !important; border-color:rgba(16,185,129,.35) !important; color:#86efac !important; }
.note{ background:#0f141a !important; border:1px solid var(--border-color) !important; color:#cbd5e1 !important; }

/* Paginasyon */
.pagination .page{ background:#151b22 !important; border:1px solid var(--border-color) !important; color:#e5e7eb !important; }
.pagination .page.muted{ background:transparent !important; border:0 !important; color:var(--muted) !important; }
.pagination .page:hover{ filter:brightness(1.08); }

/* Tooltip benzeri badge (note-badge) */
.note-badge{ background: var(--primary) !important; color: var(--primary-contrast) !important; }

/* Lightbox kontrolleri (zaten koyu) küçük iyileştirme */
.lb{ background: rgba(0,0,0,.86) !important; }
.lb-close,.lb-prev,.lb-next{ background: rgba(255,255,255,.10) !important; }

/* Küçük iyileştirmeler */
.table.clean tbody tr:hover{ background:rgba(201,162,39,.06) !important; }
.table.clean thead th{ background:#0f141a !important; }
.kv .v code{ background:#0f141a !important; border:1px solid var(--border-color) !important; color:#e5e7eb !important; }
.inline-dropdown[open] .pause-form{ background:#0f141a !important; border:1px solid var(--border-color) !important; box-shadow:var(--shadow-sm) !important; }

/* Son: aşırı beyaz sabitleri yakala ve koyu karşılıkla bastır */
:where(
  .btn,.btn-outline,.btn-ghost,.badge,.chip,.pill,
  .auth-card,.panel,.card,.surface,.mini-card,.jobs-card,.note,
  .table thead th,.table tbody tr,.table tbody td,
  .app-card,.app-body,.apps .apps-head,.apps .app-actions,
  .chat-composer .composer,.copy-btn,.code-chip
){ background-color: unset; }


/* =========================
   Yeni Analiz (upload) sayfası — Black & Gold renkleri
   Bu blok inline <style> içindeki açık renkleri bastırmak için !important kullanır.
   ========================= */
.page-wrap{ background: transparent !important; }
.page-title{ color: var(--text) !important; }

.card{
  background: var(--card) !important;
  border: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.card-title{ color:#f3f4f6 !important; }
.muted,.help,.dz-sub,.param-label{ color: var(--muted) !important; }
.link-btn{ color: var(--primary) !important; }
.link-btn:hover{ text-decoration: underline !important; }

/* Dosya alanı */
.upload-card .dropzone{
  border: 1px dashed var(--border-color) !important;
  background: #0f141a !important;
  color: var(--text) !important;
}
.upload-card .dropzone.drag{ background:#131923 !important; }
.dz-icon{ color:#e5e7eb !important; }
.dz-text .link{ color: var(--primary) !important; }

/* Kurallar listesi */
.rules-list{ gap: 10px !important; }
.rule-row{
  background: var(--surface) !important;
  border: var(--border) !important;
}
.rule-check .rule-text{ color: var(--text) !important; }

.rule-param input{
  background:#0d1218 !important;
  color:var(--text) !important;
  border:1px solid var(--border-color) !important;
}
.rule-param input:focus{
  border-color: color-mix(in oklab, var(--primary) 70%, white 0%) !important;
  box-shadow: 0 0 0 .2rem var(--ring) !important;
  outline: none !important;
}

.is-disabled{ opacity:.55 !important; }

.actions .btn.btn-primary{
  background: linear-gradient(180deg, color-mix(in lab, var(--primary) 96%, white 4%), var(--gold-4)) !important;
  border-color: color-mix(in lab, var(--primary) 75%, black 25%) !important;
  color: var(--primary-contrast) !important;
}
.actions .btn.btn-primary:hover{ filter:brightness(1.05) !important; }

/* Süreç kartlarındaki ince çizgiyi kaldır */
.nx-step::before{
  display: none !important;
}

/* ========== Okunabilirlik artışı: "muted" metinler ========== */
/* Varsayılan “muted” rengini biraz aç */
:root{
  --muted: #bfc6d3; /* önceki tondan ~+12% daha açık */
}

/* Kritik yerlerde (kart içi açıklamalar vb.) daha da netleştir */
.nx-note,
.nx-panel p,
.card .muted,
.app-card .muted,
.small-muted {
  color: #c8cfdb;                /* sabit, daha aydınlık gri */
}

/* Tarayıcı destekliyorsa, metni dinamik karıştırıp kontrastı artır */
@supports (color: color-mix(in srgb, white, black)) {
  .nx-note,
  .nx-panel p,
  .card .muted,
  .app-card .muted,
  .small-muted {
    color: color-mix(in srgb, var(--text) 55%, var(--muted) 45%);
  }
}

/* Mikro tipografi: satır yüksekliğini artırıp okunurluğu yükselt */
.nx-note,
.nx-panel p,
.card .muted,
.app-card .muted {
  line-height: 1.6;
}

/* === CTA: İletişime Geç butonunu netleştir === */
.nx-cta .nx-btn,
.nx-cta .nx-btn:link,
.nx-cta .nx-btn:visited{
  opacity: 1 !important;                 /* olası global opaklık ezmesi */
  color: #0b0f14 !important;              /* koyu metin: altın zeminde yüksek kontrast */
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.28); /* okunurluğu arttıran hafif parlama */
  background: linear-gradient(135deg, #ffe08a, #c9a227) !important; /* canlı altın */
  border: 1px solid color-mix(in oklab, #c9a227 75%, black 25%) !important;
  box-shadow:
    0 10px 30px rgba(201,162,39,.25),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 6px 16px rgba(0,0,0,.28) !important;
}

.nx-cta .nx-btn:hover{
  filter: none !important;
  transform: translateY(-1px);
  background: linear-gradient(135deg, #ffe797, #d7b43a) !important;
}

.nx-cta .nx-btn:active{
  transform: translateY(0);
  box-shadow:
    0 6px 16px rgba(201,162,39,.2),
    0 0 0 1px rgba(0,0,0,.25) inset !important;
}

/* klavye odak görünürlüğü */
.nx-cta .nx-btn:focus-visible{
  outline: 3px solid color-mix(in oklab, #c9a227 45%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(201,162,39,.22);
}

/* --- Sosyal butonlar: Koyu glass + altın kontur --- */
.nx-social-btns{
  display:flex; justify-content:center; gap:18px; margin-top:22px;
}

.nx-btn.social{
  width:58px; height:58px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  /* koyu cam yüzey */
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(201,162,39,.28);                /* altın kontur (yarı saydam) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.nx-btn.social:hover{
  transform: translateY(-2px);
  filter: none;
  border-color: rgba(201,162,39,.55);                   /* kontur altını güçlendir */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 .18rem color-mix(in oklab, #c9a227 28%, transparent); /* altın halka */
}

.nx-btn.social:active{ transform: translateY(0); }

.nx-btn.social img{
  width:26px; height:26px; display:block;
  /* ikon altınsa bırak; çok parlaksa mikro yumuşatma: */
  filter: saturate(0.92) brightness(0.98);
  opacity: .95;
}

/* daha yumuşak köşe isteyenler için (opsiyonel) */
/* .nx-btn.social{ border-radius:12px; } */

/* dar ekranda biraz küçült */
@media (max-width:560px){
  .nx-btn.social{ width:52px; height:52px; }
  .nx-btn.social img{ width:24px; height:24px; }
}

/* === Şifre alanlarında "göz" butonunu input'un içine sabitle === */

/* 1) Input sarmalayıcılarını referans noktası yap */
.auth-card .field,
.form-row,
.ui-input-wrap,
.password-field { position: relative; }

/* 2) Göz butonunu içe, sağa ve dikey ortalı yerleştir */
.pw-toggle,
.pass-toggle,
.toggle-eye,
.eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #151b22;                 /* koyu cam */
  border: 1px solid var(--border-color);
  color: #e6e7eb;
  cursor: pointer;
  z-index: 2;                           /* unuttum linki vb. üstüne çıkmasın */
}

/* 3) Input metni butonla çakışmasın diye sağ padding ver */
input[type="password"],
input[data-type="password"],
input.password,
.auth-card input[name="password"],
.auth-card input[name="password2"] {
  padding-right: 56px !important;
}

/* 4) Odak/hover durumu */
.pw-toggle:hover,
.pass-toggle:hover,
.toggle-eye:hover,
.eye-btn:hover {
  border-color: rgba(201,162,39,.45);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary) 22%, transparent);
}

/* 5) "Şifremi unuttum?" linki aynı satırda taşarsa aşağı kaydır */
.forgot-link, .auth-card .help a[href*="reset"] {
  display: inline-block;
  margin-top: 6px;
}

/* Pasif kart görünümü */
.app-card.is-disabled{
  cursor: default;
  opacity: .92;
  filter: grayscale(.05);
}
.app-card.is-disabled:hover{
  transform:none;               /* hover’da zıplamasın */
  box-shadow:none;
  border-color:var(--nx-line,rgba(255,255,255,.08));
}

/* Tıklanmayı tamamen kapatmak için; eğer yanlışlıkla anchor kalırsa */
.app-card.is-disabled .stretched-link{ pointer-events:none; }

/* “Yakında” rozeti (köşede küçük badge) */
.app-badge-soon{
  position:absolute; top:10px; left:10px;
  font-size:12px; line-height:1;
  padding:6px 10px; border-radius:999px;
  background:rgba(245,207,98,.12); color:#ead688;
  border:1px solid rgba(245,207,98,.25);
  backdrop-filter: blur(2px);
}

/* Hover overlay: “Yakında…” yazsın */
.app-card.is-disabled .app-media{ position:relative; }
.app-card.is-disabled .app-media::after{
  content:"Yakında…";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
  color:#ead688; font-weight:700; letter-spacing:.4px;
  opacity:0; transition:opacity .18s ease;
}
.app-card.is-disabled:hover .app-media::after{ opacity:1; }

/* Mevcut .app-hover elemanını bu kartta buton gibi göstermeyelim */
.app-card.is-disabled .app-hover{
  opacity:0; pointer-events:none;
}

/* === Progress Overlay === */
.pg-lock { overflow: hidden; }

.pg-overlay{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  z-index: 9999;
  padding: 1.25rem;
}

.pg-card{
  width: min(560px, 92vw);
  background: var(--surface, #111318);
  color: var(--text, #e8e8e8);
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.06);
}

.pg-header{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px; align-items: center;
  margin-bottom: 14px;
}
.pg-title{ font-size: 1.05rem; margin: 0 0 2px 0; letter-spacing: .2px; }
.pg-sub{ margin: 0; opacity: .75; font-size: .9rem; }

.pg-spinner{
  width: 28px; height: 28px; border-radius: 999px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--primary, #6ea8fe);
  animation: pg-spin .8s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg) } }

.pg-bar-wrap{
  width: 100%; height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.pg-bar{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primary, #6ea8fe), #9dc1ff);
  transition: width .25s ease;
  position: relative;
  /* diagonal stripes */
  --stripe: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent);
  background-image: var(--stripe), linear-gradient(90deg, var(--primary, #6ea8fe), #9dc1ff);
  background-size: 28px 28px, 100% 100%;
  animation: pg-stripes 1.1s linear infinite;
}
@keyframes pg-stripes { to { background-position: 28px 0, 0 0; } }

.pg-hint{ margin-top: 10px; opacity: .75; text-align: center; }

/* Butonlar kilitliyken görünüm */
button[disabled], .btn[disabled]{ opacity: .6 !important; pointer-events: none !important; }

/* Kart iç boşluğu ve taşma kontrolü */
.ty-board{position:relative; padding:12px}

/* Kelime alanı: 2 satır tam dolsun (grid) */
.ty-words{
  border:1px dashed rgba(255,255,255,.15);
  border-radius:12px; padding:14px;
  background:rgba(0,0,0,.15);
  overflow:hidden;
}
.ty-words.is-hidden{display:none}

/* Satır başına kolon sayısı JS’den CSS değişkeni ile gelir */
#board{ --cols: 12; }
.ty-line{
  display:grid;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  gap:10px; align-items:center; line-height:1.9;
}
.ty-word{display:block; text-align:center; white-space:nowrap; border-radius:6px; padding:0 2px}
.ty-word.current{background:rgba(255,255,255,.06)}
.ty-word .ok{color:#7ddc88}
.ty-word .bad{color:#f87171; text-decoration:underline}

/* Giriş alanı taşmasın, geri sayım burada görünsün */
.ty-input-wrap{position:relative; margin-top:12px}
.ty-input{
  width:100%; max-width:100%;
  box-sizing:border-box;
  height:44px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--surface-2,#101218); color:#e7e7e7;
  padding:8px 12px; font-size:1.05rem;
}
.ty-input:disabled{opacity:.65}

/* Geri sayım: input’un içinde */
.ty-countdown{
  position:absolute; inset:0;
  display:none; place-items:center;
  font-size:3rem; font-weight:800;
  color:#fff; pointer-events:none;
  background:transparent; z-index:2;
}
.ty-countdown.show{display:grid}


.ty-input-wrap{margin-top:12px}
.ty-input{
  width:100%; max-width:100%;
  box-sizing:border-box;
  height:44px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--surface-2,#101218); color:#e7e7e7;
  padding:8px 12px; font-size:1.05rem;
}
.ty-input:disabled{opacity:.65}

/* geri sayım çubuğu (inputun altında, bağımsız) */
.ty-countbar{
  margin-top:10px;
  min-height:44px;
  border:1px dashed rgba(255,255,255,.15);
  border-radius:10px;
  display:none;
  align-items:center; justify-content:center;
  font-weight:800; font-size:2.6rem; letter-spacing:.5px;
  color:#fff; background:rgba(0,0,0,.12);
}
.ty-countbar.show{display:flex}

/* ==== Licensing Admin – dark scoped overrides (only inside .surface-fullbleed) ==== */
.surface-fullbleed{
  --surface:   #0e1117;
  --surface-2: #101218;
  --text:      #e7e7e7;
  --muted:     #9aa4b2;
  --primary:   #f59e0b;              /* amber */
  --border:    1px solid rgba(255,255,255,.10);
  --shadow-sm: none;
}

/* kart ve başlıklar */
.surface-fullbleed,
.surface-fullbleed .card,
.surface-fullbleed .section-title,
.surface-fullbleed .toolbar .title h1{ color:var(--text); }
.surface-fullbleed.surface,
.surface-fullbleed .surface{ background:var(--surface); border:var(--border); }
.surface-fullbleed .kpis .kpi{ background:var(--surface-2); border:var(--border); color:var(--text); }

/* tablolar */
.surface-fullbleed .table.clean thead th{
  background:var(--surface-2); border-bottom:var(--border); color:var(--muted);
}
.surface-fullbleed .table.clean tbody td{ border-bottom:var(--border); color:var(--text); }
.surface-fullbleed .table.clean tbody tr:hover{ background:rgba(255,255,255,.04); }

/* küçük rozetler/çipler */
.surface-fullbleed .chip,
.surface-fullbleed .badge,
.surface-fullbleed .code-chip{
  background:var(--surface-2); border:var(--border); color:var(--text);
}

/* butonlar */
.surface-fullbleed .btn{ background:transparent; color:var(--text); border:var(--border); }
.surface-fullbleed .btn:hover{ box-shadow:none; background:rgba(255,255,255,.06); }
.surface-fullbleed .btn-outline{ background:transparent; }
.surface-fullbleed .btn-danger{ border-color:rgba(239,68,68,.35); color:#fca5a5; }
.surface-fullbleed .copy-btn{ background:transparent; color:var(--text); border:var(--border); }

/* form kontrolleri (yedek) – HTML içindeki .control ile uyumlu */
.surface-fullbleed input[type="text"],
.surface-fullbleed input[type="number"],
.surface-fullbleed select,
.surface-fullbleed textarea{
  background:#101218; color:#e7e7e7; border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}

/* ===== Licensing Admin (scoped) ===== */
#lic-admin{
  --adm-bg: #0b0f16;
  --adm-bg2:#101418;
  --adm-text:#e7e7e7;
  --adm-muted:#9aa3af;
  --adm-br: 1px solid rgba(255,255,255,.12);
}

/* kart & başlıklar */
#lic-admin{ background:var(--adm-bg) !important; border:var(--adm-br) !important; }
#lic-admin .toolbar .title h1{ color:var(--adm-text) !important; }
#lic-admin .toolbar .subtitle{ color:var(--adm-muted) !important; }

/* KPI kutuları */
#lic-admin .kpi{ background:var(--adm-bg2) !important; border:var(--adm-br) !important; }
#lic-admin .kpi-label{ color:var(--adm-muted) !important; }
#lic-admin .kpi-value{ color:var(--adm-text) !important; }

/* Form kontrolleri */
#lic-admin .control,
#lic-admin select,
#lic-admin input[type="text"],
#lic-admin input[type="number"]{
  height:40px !important; padding:8px 10px !important; width:100% !important;
  background:var(--adm-bg2) !important; color:var(--adm-text) !important; border:var(--adm-br) !important;
  border-radius:10px !important;
}
#lic-admin .form-label{ color:var(--adm-muted) !important; font-weight:600 !important; margin-bottom:6px !important; }

/* >>> Yeni Lisans Oluştur: tek satır grid  (app | site | gün | buton) */
#lic-admin .license-create .nl-grid{
  display:grid !important;
  grid-template-columns: 220px 1fr 220px 120px !important;
  gap:12px !important;
  align-items:end !important;
  margin-bottom:6px !important;
}
#lic-admin .nl-grid > *{min-width:0 !important;}
#lic-admin .nl-cell{ display:flex !important; flex-direction:column !important; }
#lic-admin .nl-actions{ display:flex !important; justify-content:flex-end !important; align-items:flex-end !important; }

/* Hızlı gün pilleri */
#lic-admin .pill-group{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; margin-top:8px !important; }
#lic-admin .pill-btn{
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.06) !important;
  color:var(--adm-text) !important; border-radius:8px !important; padding:6px 10px !important; cursor:pointer !important;
}
#lic-admin .pill-btn.is-active{
  background:rgba(245,158,11,.18) !important; border-color:#f59e0b !important; color:#ffe9b3 !important;
}

/* Tablo tonları */
#lic-admin .table.clean thead th{
  background:var(--adm-bg2) !important; color:var(--adm-muted) !important; border-bottom:var(--adm-br) !important;
}
#lic-admin .table.clean tbody td{ border-bottom:var(--adm-br) !important; color:var(--adm-text) !important; }
#lic-admin .code-chip{ background:var(--adm-bg2) !important; border:var(--adm-br) !important; color:var(--adm-text) !important; }
#lic-admin .copy-btn{ background:var(--adm-bg2) !important; border:var(--adm-br) !important; color:var(--adm-text) !important; }

/* Mobilde alt alta */
@media (max-width: 1000px){
  #lic-admin .license-create .nl-grid{ grid-template-columns:1fr !important; }
  #lic-admin .nl-actions{ justify-content:flex-start !important; }
}

/* --- Admin: Yeni Lisans satırı son rötuşlar --- */
#lic-admin .license-create .nl-grid{
  /* Sabit yerine esnek kolonlar: küçük ekranda da taşmadan hizalansın */
  grid-template-columns: minmax(180px, 220px) minmax(280px, 1fr) minmax(140px, 220px) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

/* Form öğeleri satırda düzgün davransın */
#lic-admin .nl-grid > * { min-width: 0; }
#lic-admin .nl-grid input,
#lic-admin .nl-grid select { width: 100%; height: 38px; line-height: 38px; }

/* Site Adı ile Geçerlilik inputlarının birleşik görünmesini engelle */
#lic-admin .license-create .nl-grid .nl-site input{
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
#lic-admin .license-create .nl-grid .nl-valid input{
  border-left: 1px solid var(--border, #2a2f36);
}

/* Küçük ekran uyumu: butonu alta al, taşmayı engelle */
@media (max-width: 1100px){
  #lic-admin .license-create .nl-grid{
    grid-template-columns: 1fr 1fr !important;
  }
  /* aksiyon kolonunu tüm satıra yay */
  #lic-admin .license-create .nl-actions{
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* --- Admin: Yeni Lisans Oluştur satırını tek satır grid yap --- */

/* 1) En yakın kapsayıcıyı ne olursa olsun grid'e çevir */
#lic-admin .license-create,
#lic-admin .license-create .nl-grid,
#lic-admin .license-create .form-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 220px) minmax(280px, 1fr) minmax(160px, 240px) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

/* 2) Grid çocukları taşmasın */
#lic-admin .license-create * { box-sizing: border-box; }
#lic-admin .license-create input,
#lic-admin .license-create select { width: 100%; height: 38px; line-height: 38px; }

/* 3) Mobil kırılım: 2 kolon + buton altta tam genişlik */
@media (max-width: 1100px){
  #lic-admin .license-create,
  #lic-admin .license-create .nl-grid,
  #lic-admin .license-create .form-row {
    grid-template-columns: 1fr 1fr !important;
  }
  #lic-admin .license-create .nl-actions,
  #lic-admin .license-create > .nl-actions,
  #lic-admin .license-create .form-row > .nl-actions {
    grid-column: 1 / -1 !important;
    justify-self: start;
  }
}

/* Sınıflar yoksa sıraya göre yerleştir */
#lic-admin .license-create > div:nth-child(1),
#lic-admin .license-create .nl-grid > div:nth-child(1),
#lic-admin .license-create .form-row > div:nth-child(1) { grid-column: 1; }

#lic-admin .license-create > div:nth-child(2),
#lic-admin .license-create .nl-grid > div:nth-child(2),
#lic-admin .license-create .form-row > div:nth-child(2) { grid-column: 2; }

#lic-admin .license-create > div:nth-child(3),
#lic-admin .license-create .nl-grid > div:nth-child(3),
#lic-admin .license-create .form-row > div:nth-child(3) { grid-column: 3; }

#lic-admin .license-create > div:nth-child(4),
#lic-admin .license-create .nl-grid > div:nth-child(4),
#lic-admin .license-create .form-row > div:nth-child(4) { grid-column: 4; }

/* Not/metin bloğu (ör. “Sadece Prognaliz için zorunlu.”) orta şeride yayılsın */
#lic-admin .license-create > div:nth-child(5),
#lic-admin .license-create .nl-grid > div:nth-child(5),
#lic-admin .license-create .form-row > div:nth-child(5) {
  grid-column: 2 / span 2;
  align-self: center;
  margin-top: 2px;
}

#lic-admin .nl-app    { grid-column: 1; }
#lic-admin .nl-site   { grid-column: 2; }
#lic-admin .nl-valid  { grid-column: 3; }
#lic-admin .nl-actions{ grid-column: 4; }
#lic-admin .nl-note   { grid-column: 2 / span 2; }

/* Site Adı ve Geçerlilik yan yana geldiğinde sınırlar birleşik görünmesin */
#lic-admin .nl-site input{ border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
#lic-admin .nl-valid input{ border-left: 1px solid var(--border, #2a2f36); }

.toolbar .actions{
  display:flex;
  gap:8px;
  margin-left:auto;
  justify-content:flex-end;

}
#lic-admin .license-create .actions{
  margin-left:0 !important;
  justify-content:initial !important;
}

/* --- Admin: Yeni Lisans Oluştur satırı --- */
#lic-admin .license-create,
#lic-admin .license-create .nl-grid,
#lic-admin .license-create .form-row{
  display:grid !important;
  grid-template-columns: minmax(180px,220px) minmax(280px,1fr) minmax(160px,240px) auto !important;
  gap:12px !important;
  align-items:end !important;
}

#lic-admin .license-create *{ box-sizing:border-box; }
#lic-admin .license-create input,
#lic-admin .license-create select{ width:100%; height:38px; line-height:38px; }

/* Not satırı orta şeride yayılsın */
#lic-admin .license-create .nl-note{ grid-column:2 / span 2; }

/* Mobil kırılım */
@media (max-width:1100px){
  #lic-admin .license-create,
  #lic-admin .license-create .nl-grid,
  #lic-admin .license-create .form-row{
    grid-template-columns: 1fr 1fr !important;
  }
  #lic-admin .license-create .nl-actions{
    grid-column:1 / -1 !important;
    justify-self:start;
  }
}

/* --- Admin: Yeni Lisans Oluştur — düzeni düzelt --- */
/* Flex'i kapat, düzeni .nl-grid yönetsin */
#lic-admin .license-create{
  display: block !important;
}

/* Asıl düzen: 4 sütun grid */
#lic-admin .license-create .nl-grid{
  display: grid !important;
  grid-template-columns: minmax(180px,220px) minmax(280px,1fr) minmax(160px,220px) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

/* Aksiyon butonu 4. kolonda dursun */
#lic-admin .license-create .nl-actions{
  grid-column: 4;
  justify-self: start;
}

/* Form yardımcı metni, ortadaki iki kolona yayılsın (opsiyonel) */
#lic-admin #siteWrap .form-help{
  margin-top: 6px;
}
#lic-admin .license-create .nl-note{
  grid-column: 2 / span 2;
  align-self: center;
}

/* Küçük ekran uyumu: 2 kolon + buton altta */
@media (max-width: 1100px){
  #lic-admin .license-create .nl-grid{
    grid-template-columns: 1fr 1fr !important;
  }
  #lic-admin .license-create .nl-actions{
    grid-column: 1 / -1 !important;
  }
}

/* Güvenlik: form içindeki .actions global kuraldan etkilenmesin */
#lic-admin .license-create .actions{
  margin-left: 0 !important;
  justify-content: initial !important;
}

/* Form kontrolleri düzgün yayılsın */
#lic-admin .license-create .nl-grid *{ box-sizing: border-box; }
#lic-admin .license-create .nl-grid input,
#lic-admin .license-create .nl-grid select{
  width: 100%;
  height: 38px;
  line-height: 38px;
}

/* --- Admin: Yeni Lisans Oluştur (pro düzen) --- */
#lic-admin .license-create .nl-grid{
  display:grid !important;
  grid-template-columns: 210px 1fr 260px 140px !important; /* Uygulama | Site | Geçerlilik | Buton */
  grid-template-areas:
    "app   site    valid   action"
    ".     note    note    action";
  gap: 14px 14px !important;
  align-items: end !important;
}

/* Alanların yerleri */
#lic-admin .nl-app   { grid-area: app; }
#lic-admin .nl-site  { grid-area: site; }
#lic-admin .nl-valid { grid-area: valid; }
#lic-admin .nl-actions { grid-area: action; justify-self: start; }
#lic-admin .nl-note  { grid-area: note; align-self: center; }

/* Etiket + kontrol hizası */
#lic-admin .nl-app label,
#lic-admin .nl-site label,
#lic-admin .nl-valid label{
  display:block; margin-bottom:6px; font-size:.92rem; opacity:.85;
}

/* Kontrollerin yüksekliği/kenarları */
#lic-admin .nl-grid input,
#lic-admin .nl-grid select,
#lic-admin .nl-grid .btn{
  height: 40px; line-height: 40px; border-radius: 10px;
}

/* Geçerlilik presetleri: kompakt buton grubu */
#lic-admin .valid-presets{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
}
#lic-admin .valid-presets .btn{
  height: 34px; line-height: 34px; padding: 0 12px; border-radius: 10px;
}

/* Yardım notu tek satır, taşarsa üç nokta */
#lic-admin .nl-note{
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:2px;
}

/* Global .actions kaçağı varsa etkisizleştir */
#lic-admin .license-create .actions{ margin-left:0 !important; justify-content:initial !important; }

/* Küçük ekran (≤1100px): 2 kolon + buton altta tam genişlik */
@media (max-width:1100px){
  #lic-admin .license-create .nl-grid{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "app   valid"
      "site  site"
      "note  note"
      "action action";
  }
  #lic-admin .nl-actions{ justify-self: stretch; }
  #lic-admin .nl-actions .btn{ width:100%; }
}

/* Uygulama kartları aralığı */
.apps-grid {
  gap: 44px;           /* çoğu durumda yeterli boşluk */
  grid-gap: 44px;      /* eski tarayıcılar için */
}

/* Masaüstünde biraz daha ferah */
@media (min-width: 1200px) {
  .apps-grid { gap: 44px; grid-gap: 44px; }
}

/* Eski projelerde flex kullanılıyorsa da çalışsın */
.apps-grid {
  display: grid; /* grid ise bu kalır; flex ise aşağıdaki gap yine işler */
}