/* ==========================================================================
   DersTeders - Çalışma Ortamı Araçları (Study Tools)
   Odak modu, Pomodoro, çalışma planı, yapılacaklar, yer imleri, okuma
   araçları ve çalışma istatistikleri için ortak stiller.
   Marka paleti ve mevcut tema değişkenleriyle uyumludur.
   ========================================================================== */

:root {
  --st-accent: var(--accent, #0F6B7C);
  --st-accent-dark: var(--accent-dark, #0A3D4A);
  --st-accent-light: var(--accent-light, #12879C);
  --st-gold: var(--gold, #C5923E);
  --st-ink: var(--ink, var(--text-primary, #12333D));
  --st-muted: var(--muted, var(--text-muted, #7A949D));
  --st-surface: var(--surface, var(--bg-card, #FFFFFF));
  --st-bg: var(--bg, #FBF9F4);
  --st-border: var(--border, #E9E2D3);
  --st-radius: 16px;
  --st-shadow: 0 18px 45px rgba(10, 61, 74, .22);
  --st-z: 1500;
}

[data-theme="dark"] {
  --st-shadow: 0 18px 45px rgba(0, 0, 0, .55);
}

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

/* ============================ Yüzen Buton (FAB) ============================ */
.st-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--st-z);
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--st-accent), var(--st-accent-dark));
  color: #fff; font-size: 1.35rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(10, 61, 74, .38); transition: transform .2s ease, box-shadow .2s ease;
}
.st-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px rgba(10, 61, 74, .46); }
.st-fab:active { transform: scale(.96); }
.st-fab .st-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--st-gold); color: #fff; font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--st-surface);
}
/* Pomodoro çalışırken FAB nabız atsın */
.st-fab.st-running { animation: st-pulse 2s infinite; }
@keyframes st-pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(10, 61, 74, .38); }
  50% { box-shadow: 0 0 0 12px rgba(18, 135, 156, .16); }
}

/* ============================ Arka Plan / Drawer ============================ */
.st-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--st-z) + 1); background: rgba(10, 30, 36, .45);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.st-backdrop.open { opacity: 1; pointer-events: auto; }

.st-drawer {
  position: fixed; top: 0; right: 0; z-index: calc(var(--st-z) + 2);
  width: min(400px, 100vw); height: 100%; display: flex; flex-direction: column;
  background: var(--st-surface); color: var(--st-ink);
  box-shadow: var(--st-shadow); transform: translateX(105%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1); border-left: 1px solid var(--st-border);
}
.st-drawer.open { transform: translateX(0); }

.st-drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid var(--st-border); background: linear-gradient(135deg, var(--st-accent-dark), var(--st-accent));
  color: #fff;
}
.st-drawer-head h2 { font-size: 1rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.st-drawer-head .st-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.st-drawer-head .st-close:hover { background: rgba(255, 255, 255, .24); }

/* Sekmeler */
.st-tabs {
  display: flex; gap: 4px; padding: 10px 12px; overflow-x: auto; border-bottom: 1px solid var(--st-border);
  scrollbar-width: thin;
}
.st-tab {
  flex: 0 0 auto; padding: 8px 12px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--st-muted); font-size: .78rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.st-tab:hover { color: var(--st-accent); background: rgba(15, 107, 124, .08); }
.st-tab.active { color: #fff; background: var(--st-accent); }

.st-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 28px; }
.st-pane { display: none; animation: st-fade .25s ease; }
.st-pane.active { display: block; }
@keyframes st-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================ Genel Bileşenler ============================ */
.st-card {
  background: var(--st-bg); border: 1px solid var(--st-border); border-radius: 14px;
  padding: 14px; margin-bottom: 14px;
}
.st-card h3 { font-size: .88rem; font-weight: 800; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.st-card h3 i { color: var(--st-accent); }
.st-muted { color: var(--st-muted); font-size: .8rem; }
.st-row { display: flex; gap: 8px; align-items: center; }
.st-row.wrap { flex-wrap: wrap; }
.st-grow { flex: 1; min-width: 0; }

.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--st-border); cursor: pointer;
  background: var(--st-surface); color: var(--st-ink); font-size: .8rem; font-weight: 700;
  transition: all .18s ease;
}
.st-btn:hover { border-color: var(--st-accent); color: var(--st-accent); }
.st-btn.primary { background: linear-gradient(135deg, var(--st-accent), var(--st-accent-dark)); color: #fff; border-color: transparent; }
.st-btn.primary:hover { color: #fff; filter: brightness(1.06); }
.st-btn.ghost { background: transparent; }
.st-btn.danger { color: #D94844; border-color: rgba(217, 72, 68, .35); }
.st-btn.sm { padding: 6px 10px; font-size: .74rem; }
.st-btn.block { width: 100%; }
.st-btn:disabled { opacity: .55; cursor: not-allowed; }

.st-input, .st-select, .st-textarea {
  width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--st-border);
  background: var(--st-surface); color: var(--st-ink); font-size: .82rem; font-family: inherit;
}
.st-input:focus, .st-select:focus, .st-textarea:focus { outline: 2px solid rgba(15, 107, 124, .35); border-color: var(--st-accent); }
.st-field { margin-bottom: 10px; }
.st-field label { display: block; font-size: .74rem; font-weight: 700; color: var(--st-muted); margin-bottom: 4px; }
.st-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.st-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; background: rgba(15, 107, 124, .1); color: var(--st-accent);
}
.st-pill.gold { background: rgba(197, 146, 62, .14); color: var(--st-gold); }
.st-empty { text-align: center; color: var(--st-muted); font-size: .82rem; padding: 18px 8px; }
.st-empty i { display: block; font-size: 1.6rem; margin-bottom: 8px; opacity: .5; }

/* ============================ Pomodoro ============================ */
.st-pomo {
  text-align: center; background: linear-gradient(160deg, var(--st-accent-dark), var(--st-accent));
  border-radius: 18px; padding: 20px 16px; color: #fff; margin-bottom: 14px;
}
.st-pomo-phase { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 700; }
.st-pomo-time { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.st-pomo-round { font-size: .76rem; opacity: .8; margin-bottom: 14px; }
.st-pomo-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.st-pomo-actions .st-btn { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .28); }
.st-pomo-actions .st-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.st-pomo-actions .st-btn.primary { background: #fff; color: var(--st-accent-dark); border-color: transparent; }
.st-pomo-actions .st-btn.primary:hover { color: var(--st-accent-dark); }

.st-pomo-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; margin-top: 14px; }
.st-pomo-bar span { display: block; height: 100%; background: var(--st-gold); width: 0; transition: width .5s linear; }

.st-pomo-mini {
  position: fixed; left: 20px; bottom: 20px; z-index: var(--st-z);
  display: none; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px;
  background: var(--st-surface); border: 1px solid var(--st-border); box-shadow: var(--st-shadow);
  color: var(--st-ink); cursor: pointer; font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.st-pomo-mini.show { display: flex; }
.st-pomo-mini i { color: var(--st-accent); }
.st-pomo-mini .st-mini-phase { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--st-muted); }

/* ============================ Liste Öğeleri ============================ */
.st-list { display: flex; flex-direction: column; gap: 8px; }
.st-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--st-surface); border: 1px solid var(--st-border); transition: border-color .18s ease;
}
.st-item:hover { border-color: var(--st-accent); }
.st-item.done { opacity: .62; }
.st-item.done .st-item-title { text-decoration: line-through; }
.st-item-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--st-border);
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .7rem; margin-top: 1px;
}
.st-item.done .st-item-check { background: var(--st-accent); border-color: var(--st-accent); }
.st-item-body { flex: 1; min-width: 0; }
.st-item-title { font-size: .84rem; font-weight: 650; word-break: break-word; }
.st-item-meta { font-size: .72rem; color: var(--st-muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-item-remove { border: none; background: transparent; color: var(--st-muted); cursor: pointer; padding: 2px 4px; font-size: .85rem; }
.st-item-remove:hover { color: #D94844; }

.st-prio { display: inline-flex; align-items: center; gap: 4px; }
.st-prio-dot { width: 8px; height: 8px; border-radius: 50%; }
.st-prio.low .st-prio-dot { background: #7A949D; }
.st-prio.normal .st-prio-dot { background: var(--st-accent); }
.st-prio.high .st-prio-dot { background: #E8783F; }
.st-prio.urgent .st-prio-dot { background: #D94844; }
.st-overdue { color: #D94844; font-weight: 700; }

/* Plan gün grupları */
.st-day-group { margin-bottom: 12px; }
.st-day-head {
  display: flex; align-items: center; justify-content: space-between; font-size: .76rem; font-weight: 800;
  color: var(--st-accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.st-day-head.today { color: var(--st-gold); }
.st-day-head .st-day-min { font-size: .68rem; color: var(--st-muted); font-weight: 700; }

/* ============================ İstatistikler ============================ */
.st-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.st-stat-grid.three { grid-template-columns: repeat(3, 1fr); }
.st-stat {
  background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 13px; padding: 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.st-stat .st-stat-val { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.st-stat .st-stat-lbl { font-size: .68rem; color: var(--st-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

.st-chart { display: flex; align-items: flex-end; gap: 5px; height: 120px; padding-top: 8px; }
.st-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.st-chart-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.st-chart-bar {
  width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--st-accent-light), var(--st-accent));
  transition: height .5s ease;
}
.st-chart-bar.today { background: linear-gradient(180deg, var(--st-gold), #E8A33D); }
.st-chart-lbl { font-size: .62rem; color: var(--st-muted); font-weight: 700; white-space: nowrap; }
.st-chart-val { font-size: .62rem; color: var(--st-accent); font-weight: 800; }

.st-hbars { display: flex; flex-direction: column; gap: 9px; }
.st-hbar-row { display: grid; grid-template-columns: 84px 1fr 46px; align-items: center; gap: 8px; font-size: .74rem; }
.st-hbar-track { height: 9px; border-radius: 999px; background: rgba(122, 148, 157, .18); overflow: hidden; }
.st-hbar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--st-accent), var(--st-accent-light)); }
.st-hbar-val { text-align: right; font-weight: 800; color: var(--st-accent); font-size: .72rem; }

.st-goal { margin-top: 6px; }
.st-goal-row { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 700; margin-bottom: 4px; }

/* ============================ Odak Modu / Okuma Modu ============================ */
body.st-focus .site-header,
body.st-focus .header,
body.st-focus .sidebar,
body.st-focus .sidebar-overlay,
body.st-focus .hero,
body.st-focus footer,
body.st-focus .footer,
body.st-focus .ads,
body.st-focus .ad-slot,
body.st-focus ins.adsbygoogle,
body.st-focus [id^="google_ads"],
body.st-focus [class*="-ad-"],
body.st-focus .crosslink-section,
body.st-focus .dn-panel,
body.st-focus .recommend,
body.st-focus .sim-grid {
  display: none !important;
}
body.st-focus { padding-top: 52px; }
body.st-focus .page-wrapper { display: block; }
body.st-focus .content-area,
body.st-focus main { max-width: 900px; margin: 0 auto; }
body.st-focus .wrap { max-width: 960px; }

body.st-reading .site-header,
body.st-reading .header,
body.st-reading .sidebar,
body.st-reading .sidebar-overlay,
body.st-reading .hero,
body.st-reading footer,
body.st-reading .footer,
body.st-reading .ads,
body.st-reading .ad-slot,
body.st-reading ins.adsbygoogle,
body.st-reading [id^="google_ads"],
body.st-reading .crosslink-section,
body.st-reading .page-wrapper > .sidebar {
  display: none !important;
}
body.st-reading { padding-top: 52px; background: var(--st-bg); }
body.st-reading .page-wrapper { display: block; }
body.st-reading .content-area,
body.st-reading main,
body.st-reading #topicContent,
body.st-reading .topic-content {
  max-width: 760px !important; margin: 0 auto !important; padding: 8px 20px 60px !important;
}
body.st-reading .topic-content p,
body.st-reading #topicContent p,
body.st-reading .topic-body p,
body.st-reading .topic-text p { line-height: 1.85; font-size: 1.06rem; }
body.st-reading .topic-content h2,
body.st-reading .topic-content h3 { margin-top: 1.6em; }

/* Üst araç çubuğu (odak + okuma) */
.st-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: calc(var(--st-z) + 3);
  display: none; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--st-surface); border-bottom: 1px solid var(--st-border); box-shadow: 0 4px 16px rgba(10, 61, 74, .08);
}
.st-topbar.show { display: flex; }
.st-topbar .st-tb-title { font-weight: 800; font-size: .86rem; display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-topbar .st-tb-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-topbar .st-tb-timer { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--st-accent); display: flex; align-items: center; gap: 7px; }
.st-topbar .st-tb-actions { display: flex; gap: 6px; }
.st-topbar .st-tb-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--st-border); background: var(--st-surface);
  color: var(--st-ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.st-topbar .st-tb-btn:hover { border-color: var(--st-accent); color: var(--st-accent); }

/* Yazı boyutu ölçekleme (içerik) */
.st-content-target { zoom: var(--st-zoom, 1); }

/* Metin arama vurguları */
.st-search-bar {
  position: fixed; top: 12px; right: 20px; z-index: calc(var(--st-z) + 4); display: none;
  align-items: center; gap: 6px; padding: 7px 8px; border-radius: 12px;
  background: var(--st-surface); border: 1px solid var(--st-border); box-shadow: var(--st-shadow);
}
.st-search-bar.show { display: flex; }
.st-search-bar input { width: 190px; border: none; background: transparent; color: var(--st-ink); font-size: .82rem; outline: none; }
.st-search-bar .st-search-count { font-size: .7rem; color: var(--st-muted); font-weight: 700; min-width: 44px; text-align: center; }
.st-search-bar .st-search-btn { border: none; background: transparent; color: var(--st-muted); cursor: pointer; padding: 4px 6px; }
.st-search-bar .st-search-btn:hover { color: var(--st-accent); }
mark.st-hit { background: rgba(245, 197, 66, .55); color: inherit; border-radius: 3px; padding: 0 1px; }
mark.st-hit.st-hit-active { background: var(--st-gold); color: #fff; }

/* ============================ Panel İçi Bölümler ============================ */
.st-panel-block .st-card { background: var(--st-surface); }
.st-panel-block .st-item { background: var(--st-bg); }
.st-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.st-panel-head h2 { font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 9px; margin: 0; }
.st-panel-head h2 i { color: var(--st-accent); }
.st-panel-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }

/* ============================ Bildirim (Toast) ============================ */
.st-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px);
  z-index: calc(var(--st-z) + 10); max-width: min(90vw, 420px);
  padding: 12px 20px; border-radius: 12px; font-size: .85rem; font-weight: 650;
  background: var(--st-accent-dark); color: #fff; box-shadow: 0 14px 34px rgba(10, 61, 74, .4);
  opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s ease;
}
.st-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================ Responsive ============================ */
@media (max-width: 900px) {
  .st-panel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .st-drawer { width: 100%; }
  .st-pomo-time { font-size: 2.5rem; }
  .st-stat-grid.three { grid-template-columns: repeat(2, 1fr); }
  .st-search-bar input { width: 130px; }
  .st-fab { right: 14px; bottom: 14px; }
  .st-pomo-mini { left: 14px; bottom: 14px; }
  .st-hbar-row { grid-template-columns: 70px 1fr 40px; }
}

/* Yazdırma sırasında araçları gizle */
@media print {
  .st-fab, .st-drawer, .st-backdrop, .st-topbar, .st-pomo-mini, .st-search-bar { display: none !important; }
}