/* ====== GLOBAL RESET ====== */
*{box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial}

/* Tema değişkenleri theme.css'den geliyor, burada sadece eski uyumluluk için alias'lar */
:root{
  --bg: var(--bg-primary);
  --surface: var(--bg-secondary);
  --stroke: var(--border-primary);
  --text: var(--text-primary);
  --muted: var(--text-muted);

  --primary: var(--primary);
  --primary-600: var(--primary-hover);
  --primary-700: var(--primary-active);

  --chip-bg: var(--chip-bg);
  --chip-br: var(--chip-border);

  --radius: var(--radius-md);
  --shadow: var(--shadow-lg);
}

body{margin:0;background:var(--bg-primary);color:var(--text-primary)}

/* ====== CONTAINER ====== */
.container{
  max-width:980px; margin:24px auto; padding:16px;
  background:var(--surface); border-radius:16px; box-shadow:var(--shadow);
}
.container.small{max-width:420px}
.container.wide{max-width:1200px}  /* admin için */

/* ====== BRAND ====== */
.logo-wrap{display:flex;justify-content:center;align-items:center;margin:6px 0 14px}
.logo-wrap img{max-height:80px;width:auto}
.logo-wrap.small img{max-height:60px}

/* ====== HEADINGS ====== */
h1,h2{margin:8px 0 16px}
.page-title{font-size:26px;font-weight:900;margin:18px 0;text-align:center}
.section-title{font-size:18px;font-weight:800;margin:10px 0 8px 6px;color:var(--text)}

/* ====== GRID HELPERS ====== */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid .col-2{grid-column:span 2}

/* ====== FORMS ====== */
label{display:block;font-size:14px;margin-bottom:4px;color:var(--text-muted);font-weight:700}
input,select{width:100%;padding:10px 12px;border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-primary)}
input::placeholder{color:var(--text-muted)}

/* ====== BUTTONS ====== */
button,.button{
  display:inline-block;padding:10px 14px;border:none;border-radius:var(--radius-md);cursor:pointer;
  text-decoration:none;font-weight:700;transition:.18s;line-height:1;background:var(--primary);color:var(--text-inverse)
}
.button:hover,button:hover{filter:brightness(.96)}
.button.ghost{background:var(--bg-secondary);color:var(--primary);border:1px solid var(--primary)}
.button.ghost:hover{background:var(--primary);color:var(--text-inverse)}
.button.primary{background:var(--primary);color:var(--text-inverse)}
.button.primary:hover{background:var(--primary-hover)}
.button.neutral{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary)}
.button.neutral:hover{background:var(--bg-hover)}

/* ====== FEEDBACK ====== */
.alert{padding:10px;border:1px solid var(--danger);background:var(--danger-light);color:var(--danger-dark);border-radius:var(--radius-md);margin-bottom:10px}
.success{padding:10px;border:1px solid var(--success);background:var(--success-light);color:var(--success-dark);border-radius:var(--radius-md);margin-bottom:10px}

/* ====== TABLE ====== */
table{width:100%;border-collapse:collapse;margin-top:12px;background:var(--bg-secondary);color:var(--text-primary)}
th,td{padding:10px;border-bottom:1px solid var(--border-primary);text-align:left;font-size:14px;color:var(--text-primary)}
thead th{background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);letter-spacing:.02em;color:var(--text-primary)}
.note-cell{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tbody tr:hover{background:var(--bg-hover)}
tbody tr:nth-child(even){background:var(--bg-tertiary)}

/* Mobil tablo kırılımı (ortak) */
@media (max-width:860px){
  table,thead,tbody,th,td,tr{display:block}
  thead{display:none}
  tbody tr{margin:10px 0;border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden;background:var(--bg-secondary)}
  tbody td{border:none;padding:8px 12px}
  tbody td::before{content:attr(data-label);display:block;font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:2px}
}

/* ====== LIST META ====== */
.header{display:flex;justify-content:space-between;align-items:center}
.meta{margin:6px 0;color:var(--text-muted)}

/* ====== FILTER CHIPS (ortak) ====== */
.segmented{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{
  border:1px solid var(--chip-border); background:var(--chip-bg); color:var(--chip-text);
  border-radius:var(--radius-full); padding:8px 12px; cursor:pointer;
  font-size:14px; line-height:1; transition:.15s;
}
.chip:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.chip.ghost{background:var(--bg-tertiary);border-color:var(--border-primary);color:var(--text-primary)}

/* ====== FILTER ROW (eski kullanım) ====== */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:10px}

/* ====== MODERN FILTER GRID (admin & kullanılacak genel) ====== */
.card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--text-primary)}
.filters.card{padding:18px}
.filter-grid{display:grid;gap:12px;grid-template-columns:repeat(12,1fr);align-items:end}
.filter-grid .field{grid-column:span 3;min-width:180px}
.filter-grid .search{grid-column:span 4}
.filter-grid .actions{grid-column:span 2;display:flex;gap:10px;justify-content:flex-end}

/* Küçük ekran uyumu */
@media(max-width:980px){
  .filter-grid{grid-template-columns:1fr}
  .filter-grid .field,.filter-grid .search,.filter-grid .actions{grid-column:1/-1}
  .filter-grid .actions{justify-content:flex-start}
}

/* ====== ADMIN TOPBAR (genel kullanıma uygun) ====== */
.topbar{
  position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(8px);
  background:var(--backdrop-bg);border-bottom:1px solid var(--border-primary)
}
.topbar-inner{
  max-width:1200px;margin:0 auto;padding:8px 16px;
  display:flex;align-items:center;gap:12px;justify-content:space-between
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:40px}

/* Dar ekranda topbar yığılma */
@media (max-width:980px){
  .topbar-inner{flex-direction:column;align-items:stretch;gap:10px}
  .top-actions{display:flex;flex-wrap:wrap;gap:8px}
  .top-actions a{margin-left:0}
}

/* ====== STAT CHIPS (ziyaretçi dağılımı) ====== */
.stat-card{padding:12px;margin-bottom:16px}
.stat-grid{display:grid; gap:8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))}
.stat-chip{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-full);padding:6px 12px;
  box-shadow:var(--shadow-sm);font-size:13px;height:36px;color:var(--text-primary)
}
.stat-chip .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}
.stat-chip .cnt{background:var(--chip-bg);border:1px solid var(--chip-border);border-radius:var(--radius-full);padding:2px 10px;font-weight:700;color:var(--chip-text)}

/* ====== OLD UTILITIES (korundu) ====== */
.filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:10px}
.filter-row label{margin-bottom:0}
@media (max-width: 640px){
  .filter-row { gap:6px; }
  .segmented { gap:6px; }
  .chip { padding:7px 10px; font-size:13px; }
}
/* ===== Button System (light/dark + accessibility) ===== */
:root{
  --btn-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  --btn-radius: 12px;
  --btn-padding-y: .6rem;
  --btn-padding-x: 1rem;
  --btn-gap: .5rem;
  --btn-shadow: 0 10px 20px rgba(0,0,0,.06);

  /* Palette */
  --c-bg: #ffffff;
  --c-fg: #1f2937;           /* text */
  --c-muted: #6b7280;        /* secondary text */
  --c-border: #e5e7eb;

  --c-primary: #2563eb;      /* blue-600 */
  --c-primary-600: #1d4ed8;
  --c-primary-700: #1e40af;
  --c-success: #16a34a;
  --c-warning: #d97706;
  --c-danger:  #dc2626;

  --c-ghost: rgba(31,41,55,.06);
  --c-ghost-hover: rgba(31,41,55,.12);
  --focus-ring: 0 0 0 4px rgba(37,99,235,.25);
}

@media (prefers-color-scheme: dark){
  :root{
    --c-bg: #0b0f16;
    --c-fg: #e5e7eb;
    --c-muted: #9ca3af;
    --c-border: #1f2937;

    --c-ghost: rgba(229,231,235,.08);
    --c-ghost-hover: rgba(229,231,235,.16);
    --focus-ring: 0 0 0 4px rgba(59,130,246,.35);
    --btn-shadow: 0 8px 20px rgba(0,0,0,.35);
  }
}

.btn{
  --_bg: var(--c-bg);
  --_fg: var(--c-fg);
  --_bd: var(--c-border);
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--btn-gap); font:600 14px/1 var(--btn-font);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius); border:1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  box-shadow: var(--btn-shadow);
  cursor: pointer; user-select: none;
  transition: transform .08s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:where(:hover){ transform: translateY(-1px); }
.btn:where(:active){ transform: translateY(0); }
.btn:where(:focus-visible){ outline: none; box-shadow: var(--focus-ring); }

/* Variants */
.btn-primary{ --_bg: var(--c-primary); --_fg:#fff; --_bd: var(--c-primary); }
.btn-primary:hover{ background: var(--c-primary-600); border-color: var(--c-primary-600); }
.btn-primary:active{ background: var(--c-primary-700); border-color: var(--c-primary-700); }

.btn-secondary{ --_bg:#f3f4f6; --_fg:var(--c-fg); }
@media (prefers-color-scheme: dark){ .btn-secondary{ --_bg:#111827; } }
.btn-secondary:hover{ filter: brightness(0.98); }

.btn-ghost{ --_bg: var(--c-ghost); --_bd: transparent; }
.btn-ghost:hover{ background: var(--c-ghost-hover); }

.btn-outline{ --_bg: transparent; --_bd: currentColor; }
.btn-outline { color: var(--c-fg); }
.btn-outline:hover{ background: rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark){ .btn-outline:hover{ background: rgba(255,255,255,.06); } }

.btn-link{ --_bg: transparent; --_bd: transparent; color: var(--c-primary); box-shadow:none; padding:0; }
.btn-link:hover{ text-decoration: underline; transform:none; }

.btn-success{ --_bg: var(--c-success); --_fg:#fff; --_bd: var(--c-success); }
.btn-warning{ --_bg: var(--c-warning); --_fg:#111827; --_bd: var(--c-warning); }
.btn-danger { --_bg: var(--c-danger);  --_fg:#fff; --_bd: var(--c-danger); }

/* Shapes & layout */
.btn-round{ border-radius: 999px; }
.btn-block{ display:flex; width:100%; }

/* Sizes */
.btn-sm{ font-size:12px; padding:.45rem .75rem; }
.btn-lg{ font-size:16px; padding:.8rem 1.25rem; }

/* Icon button */
.btn-icon{ padding:.55rem; width:38px; height:38px; aspect-ratio:1/1; }
.btn-icon.btn-lg{ width:46px; height:46px; }
.btn > .icon{ display:inline-grid; place-items:center; font-size:1.1em; line-height:0; }

/* Loading state */
.btn[aria-busy="true"]{
  pointer-events:none; opacity:.8; position:relative;
}
.btn[aria-busy="true"]::after{
  content:""; width:1em; height:1em; border-radius:50%;
  border:2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite; margin-left: .25rem;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Disabled */
.btn:disabled, .btn[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed; transform:none;
}

/* High-contrast focus for keyboard users */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
}