/* ==================== Tema Değişkenleri ==================== */
:root{
  --bg:#fafafa; --card:#fff; --ink:#1b1b1f; --muted:#6b7280;
  --border:#e5e7eb; --ring:#111; --pill:#111; --pill-ink:#fff;
}
[data-theme="dark"]{
  --bg:#0b0c0f; --card:#121318; --ink:#e9eaee; --muted:#9aa0a6;
  --border:#23242a; --ring:#5b86ff; --pill:#2b2f3a; --pill-ink:#e9eaee;
}

/* ==================== Temel Yapı ==================== */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
header, footer{ padding:12px 16px; }
header .wrap, footer .wrap{ max-width:1100px; margin:0 auto; }
header h1{ margin:.2rem 0 .1rem; font-weight:600; }
header p{ margin:0; color:var(--muted); }

/* Main container now constrained */
main{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  gap:14px;
  padding:16px;
}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.muted{ color:var(--muted); }
h2{ margin:0 0 .6rem; font-size:1.02rem; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ==================== Top Bar & Arama ==================== */
.topbar{
  position:sticky; top:0; z-index:20;
  padding:8px 0 0; margin:-4px 0 8px;
  background:linear-gradient(var(--bg), transparent 60%);
  backdrop-filter:saturate(1.2) blur(1px);
}
.topbar .bar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:8px; box-shadow:0 1px 6px rgba(0,0,0,.04);
}

/* Arama kutuları */
.search{ 
  flex:1 1 0;
  display:flex; gap:8px; align-items:center;
}
.combo{ 
  flex:1 1 0;
  display:inline-flex; align-items:center; gap:4px;
}
.combo input{
  flex:1 1 0;
  min-width:0;
  width:100%;
  padding:.5rem .7rem;
  border:1px solid var(--border); border-radius:10px;
  background:transparent; color:var(--ink);
  outline:none;
  font-size:.95rem;
}
.combo input:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--ring) 18%, transparent);
}
.combo input::placeholder{
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}

/* Yerel oku devre dışı bırak */
input[list]::-webkit-calendar-picker-indicator,
input[list]::-webkit-list-button{ opacity:0; pointer-events:none; }

/* Açma butonları */
#itemOpen, #compareOpen{ flex:0 0 auto; width:36px; padding:.45rem 0; }

/* Select uyumu */
select{ appearance:none; background-image:none !important; }
select::-ms-expand{ display:none; }

/* ==================== Grafik Alanı ==================== */
#chart{ display:block;  min-height:280px; max-height:60vh; width:100%; }

/* ==================== LLM Kartları ==================== */
.llm-block{ white-space:pre-wrap; margin:0; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:8px; margin:8px 0 4px; }
.pill{
  background:color-mix(in oklab, var(--card), #000 8%);
  border:1px solid color-mix(in oklab, var(--border), #000 10%);
  border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:4px;
}
.pill span{ font-size:12px; color:var(--muted); }
.pill b{ font-size:16px; font-variant-numeric: tabular-nums; }
.bullets{ margin:6px 0 0 18px; }

.meta-table{ width:100%; border-collapse: collapse; margin-top:8px; }
.meta-table th, .meta-table td{ padding:6px 8px; border-bottom:1px solid color-mix(in oklab, var(--border), #000 10%); }
.meta-table th{ text-align:left; font-weight:600; }

/* ==================== Butonlar ==================== */
button{
  padding:.55rem .85rem; border:1px solid var(--ring);
  background:var(--pill); color:var(--pill-ink);
  border-radius:10px; font-weight:600; cursor:pointer;
}
button:disabled{ opacity:.6; cursor:not-allowed; }

/* ==================== Yardımcılar ==================== */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

table{ width:100%; border-collapse: collapse; }
th, td{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }

/* Alerts */
.alert{padding:.6rem .8rem; border-radius:10px; margin-bottom:8px; font-weight:600;}
.alert-warn{background:#fff4ce; border:1px solid #ffe08a; color:#5c4500;}
.alert-error{background:#ffe0e0; border:1px solid #ffb3b3; color:#7a0000;}

/* Toolbar */
.toolbar{display:flex;gap:8px;align-items:center}
.toolbar-btn{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--ink);
  font-weight:600;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  line-height:1;
  user-select:none;
}
.toolbar-btn.active{ background:var(--ink); color:var(--card); border-color:var(--ink); }
.toolbar-sep{width:6px;display:inline-block}

/* Özet tablo */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:right}
.table th:first-child,.table td:first-child{text-align:left}
#tableControls{display:flex;gap:8px;align-items:center;margin-bottom:8px}
#tableControls button{
  padding:6px 10px;border:1px solid var(--border);
  border-radius:8px;background:var(--card);cursor:pointer;color:var(--ink);
}
#tableControls select{
  padding:4px 6px;border:1px solid var(--border);
  border-radius:8px;background:transparent;color:var(--ink);
}

/* Küçük ekran iyileştirmeleri */
@media (max-width: 768px){
  main{ padding:12px; }
  .topbar .bar{ padding:6px; }
  .combo input{ font-size:.92rem; padding:.5rem .65rem; }
  .toolbar-btn{ padding:5px 9px; }
  #chart{ display:block;  min-height:240px; }
}

/* Çok geniş ekranlarda metin rahat okunsun */
@media (min-width: 1600px){
  body { font-size: 16.5px; }
}
/* === Custom chart width variable & centering === */
:root{ --chart-max-width: 720px; }
#chart{ max-width: var(--chart-max-width); margin: 0 auto; }

/* Make summary table scrollable on small screens and sticky header */
.card:has(#table){ overflow-x: auto; }
.table thead th{ position: sticky; top: 0; background: var(--card); z-index: 1; }

.query-input{ flex:1 1 420px; min-width:280px; padding:.6rem .8rem; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--ink);}
/* ===== On-chart Summary (above chart) ===== */
.onchart-summary{
  margin: 8px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 14px;
}
.onchart-summary .hdr{ margin-bottom: 6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.onchart-summary .hdr .tag{ font-size:12px; padding:2px 6px; border:1px solid var(--line); border-radius:999px; }
.onchart-summary .grid4{ display:grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap:8px; }
.onchart-summary .k{ color: var(--muted, #666); font-size: 12px; }
.onchart-summary .v{ font-weight:600; }
.onchart-summary .u{ font-weight:400; font-size:12px; opacity:0.8; }
.onchart-summary .foot{ margin-top: 4px; }

/* ===== On-chart LLM summary controls ===== */
.onchart-controls{ margin: 6px 0; display:flex; justify-content:flex-end; }
.onchart-controls .chk{ font-size: 14px; user-select:none; display:flex; align-items:center; gap:6px; }

.onchart-llm{
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 14px;
  white-space: pre-wrap;
}
.onchart-llm.hidden{ display:none; }
.onchart-llm .muted{ opacity: 0.7; font-size: 12px; }