/* ===== Tema Değişkenleri ===== */
:root {
  --bg: #0f172a;
  --panel: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --brand: #22c55e;
  --brand-2: #16a34a;
  --border: #1f2937;

  --shadow: 0 8px 24px rgba(0,0,0,.25);

  /* Toast renkleri */
  --toast-bg: #0b1220;
  --toast-text: #e5e7eb;
  --toast-success: #16a34a;
  --toast-error: #ef4444;
  --toast-info: #22c55e;
}

html[data-theme="light"] {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #0b1220;
  --muted: #5b6575;
  --brand: #16a34a;
  --brand-2: #128a3e;
  --border: #e6e8ef;

  --shadow: 0 6px 18px rgba(0,0,0,.08);

  --toast-bg: #ffffff;
  --toast-text: #0b1220;
  --toast-success: #168a3e;
  --toast-error: #d12f2f;
  --toast-info: #128a3e;
}

/* ===== Genel ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.15);
}

.container { width: min(100%, 960px); margin: 0 auto; padding: 16px; }

header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}

h1 { font-size: 22px; margin: 0; }

.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-link { color: var(--muted); text-decoration: none; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; }
.nav-link:hover { color: var(--text); border-color: #37415150; }
.nav-link.active { color: var(--text); border-color: var(--brand); }

.theme-toggle {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

main { padding-block: 24px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
}

button {
  background: var(--brand);
  color: #0a0a0a;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.05); }
button.secondary { background: #334155; color: #e5e7eb; }
html[data-theme="light"] button.secondary { background: #e9eef6; color: #0b1220; }
button.secondary:hover { filter: brightness(1.08); }
button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
button.ghost:hover { border-color: #37415150; }
button.primary { background: var(--brand); color: #062d16; }
button[disabled] { opacity: 0.6; cursor: not-allowed; }

.footer { color: var(--muted); text-align: center; border-top: 1px solid var(--border); background: #0b1220; }
html[data-theme="light"] .footer { background: #eef2f9; }

.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ===== Ana sayfa grid ===== */
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 900px){ .tool-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .tool-grid { grid-template-columns: 1fr; } }
.tool-card {
  display: grid; gap: 6px; padding: 14px;
  border: 1px solid var(--border); border-radius: 12px; background: #0b1220; text-decoration: none;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
}
html[data-theme="light"] .tool-card { background: #f9fbff; }
.tool-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow); }
.tool-card.disabled { opacity: .6; pointer-events: none; }
.tool-emoji { font-size: 28px; }
.tool-title { font-weight: 700; }
.tool-desc { color: var(--muted); font-size: 14px; }

/* ===== Ortak zamanlayıcı ===== */
.timer-display {
  font-size: clamp(40px, 10vw, 84px);
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
  padding: 16px 0;
  background: radial-gradient(1200px 300px at 50% -10%, rgba(34,197,94,0.10), transparent);
  border-radius: 12px;
  user-select: none;
}

.controls { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
@media (max-width: 560px){ .controls { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ===== Pomodoro ===== */
.pomodoro { display: grid; gap: 16px; }
.mode-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-btn { background: #1f2937; color: #e5e7eb; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.mode-btn.active { border-color: var(--brand); background: #102018; color: #e7ffe7; }
html[data-theme="light"] .mode-btn { background: #edf2f7; color: #0b1220; }
html[data-theme="light"] .mode-btn.active { background: #e9ffef; }

/* ===== Exam ===== */
.exam { display: grid; gap: 16px; }
.sections summary { cursor: pointer; color: var(--text); font-weight: 600; margin-bottom: 8px; }
.section-form { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.section-form input { background: #0b1220; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
html[data-theme="light"] .section-form input { background: #f9fbff; }
.section-actions { display: flex; gap: 8px; margin-top: 8px; }
.section-list { border: 1px dashed var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 8px; }
.section-item { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.section-name { font-weight: 600; color: var(--text); }
.section-actions-mini { display: flex; gap: 6px; }
.small-btn { padding: 6px 8px; font-size: 12px; }
.badge { display: inline-block; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; margin-left: 6px; background: #0b1220; font-size: 12px; }
html[data-theme="light"] .badge { background: #f1f5fb; }

/* ===== Kahve/Mutfak ===== */
.kitchen { display: grid; gap: 16px; }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
@media (max-width: 720px){ .preset-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.preset { background:#0b1220; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px; cursor:pointer; text-align:left; }
html[data-theme="light"] .preset { background:#f9fbff; }
.preset:hover { border-color:#37415150; }

/* ===== Analytics ===== */
.analytics { display: grid; gap: 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { border: 1px solid var(--border); padding: 10px; text-align: left; }
.table th { background: #0b1220; color: var(--text); }
html[data-theme="light"] .table th { background: #eef2f9; color: #0b1220; }

/* ===== Çoklu Geri Sayım ===== */
.multi { display: grid; gap: 16px; }
.mt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 960px){ .mt-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .mt-grid { grid-template-columns: 1fr; } }
.mt-card {
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: grid; gap: 8px;
  box-shadow: var(--shadow);
}
html[data-theme="light"] .mt-card { background: #f9fbff; }
.mt-title { font-weight: 700; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mt-time { font-size: clamp(24px, 5vw, 40px); font-weight: 800; text-align: center; user-select: none; }
.mt-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.mt-del { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.mt-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; }
.mt-form input { background: #0b1220; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
html[data-theme="light"] .mt-form input { background: #fff; }
.mt-bulk { display:flex; gap:8px; flex-wrap: wrap; }

/* ===== Form ortak ===== */
.settings summary { cursor: pointer; color: var(--text); font-weight: 600; margin-bottom: 8px; }
.settings-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.settings-grid label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.settings-grid input, .settings-grid select {
  background: #0b1220; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px;
}
html[data-theme="light"] .settings-grid input, html[data-theme="light"] .settings-grid select { background: #f9fbff; color: #0b1220; }
.settings-grid button { grid-column: span 1; }
@media (max-width: 720px){ .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Modal ===== */
.hidden { display: none !important; }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: grid; place-items: center; z-index: 50;
  animation: fadeIn .12s ease-out;
}
.modal {
  width: min(94vw, 640px);
  max-height: 86vh;
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.modal-header, .modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); border-bottom: none; }
.modal-body { padding: 12px 16px; }
kbd {
  background: #0b1220; color: var(--text);
  border: 1px solid var(--border); border-bottom-width: 3px;
  border-radius: 6px; padding: 2px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ===== Toasts ===== */
.toasts {
  position: fixed; right: 16px; bottom: 16px;
  display: grid; gap: 8px; z-index: 60;
}
.toast {
  background: var(--toast-bg);
  color: var(--toast-text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--toast-info);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  max-width: min(360px, 90vw);
  animation: fadeIn .12s ease-out;
}
.toast.success { border-left-color: var(--toast-success); }
.toast.error { border-left-color: var(--toast-error); }
.toast .title { font-weight: 700; margin-right: 8px; }
.toast .msg { font-size: 14px; }
.toast button {
  margin-left: 10px; padding: 6px 8px; font-size: 12px;
  background: transparent; color: var(--text); border: 1px solid var(--border);
}

/* =========================================================
   Aşağıdaki ekler: A11y + SEO + Performans (küçük dokunuşlar)
   ========================================================= */

/* Tarayıcıya tema ipucu (scrollbar/formlar) */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* Ekran okuyucuya görünür ama görsel olarak gizli içerikler için */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Klavye ile odaklandığında görünen "içeriğe atla" bağlantısı */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 16px; top: 16px; width: auto; height: auto;
  padding: 10px 14px; border-radius: 10px;
  background: var(--brand); color: #062d16;
  z-index: 100;
}

/* Medya varsayılanları (CLS azaltmaya yardımcı) */
img, svg, video, canvas { max-width: 100%; height: auto; }
img { display: block; }

/* Hareketi azalt tercih eden kullanıcılar */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Yazdırma için sade tema */
@media print {
  header, nav, .footer, .theme-toggle, .modal-backdrop, .toasts { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #999; }
}

/* (İsteğe bağlı) İçerik görünürlüğü — büyük bölümler geç yüklenirken performans için.
   Desteklenmiyorsa etkisizdir. Değer projene göre ayarlanabilir. */
@supports (content-visibility: auto) {
  .card { content-visibility: auto; contain-intrinsic-size: 300px; }
}
/* ===== Mobile header/nav fix (sağlam sürüm) ===== */
@media (max-width: 720px) {
  #site-header {
    display: grid;
    grid-template-areas:
      "brand actions"
      "nav   nav";
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
  }
  #site-header > h1 { grid-area: brand; margin: 0; }
  #site-header > .header-actions { grid-area: actions; justify-self: end; }
  #site-header > .nav { grid-area: nav; margin-top: 2px; }

  /* Yatay kaydırmalı chip menü */
  .nav {
    display: flex;
    flex-wrap: nowrap;      /* tek satır */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 6px;
  }
  .nav::-webkit-scrollbar { display: none; }

  /* Mobilde kompakt linkler */
  .nav-link {
    display: inline-flex; align-items: center; /* satır içi hizalama */
    flex: 0 0 auto;                             /* küçülme yok */
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 10px;
  }
}