/* ============================================================
 * components.css — primitifler: buton, input, kart, avatar,
 * toast, chip, tablo, toggle, dropdown, empty, lightbox, jv…
 * (modal/sheet iskeletleri 2026-07-20'de css/popup.css'e taşındı)
 *
 * Dil: koyu glassmorphism — yarı saydam cam yüzeyler
 * (backdrop blur + ince ışık kenarı), iri köşeler, beyaz
 * kontrast pill birincil aksiyon, gradient yalnız vurgu.
 * İkonlar Font Awesome <i> öğeleridir (SVG yok).
 * ============================================================ */

/* ── Logo — gradient squircle + spark (Unicode ✦) ─────────── */
.logo-mark {
  position: relative;
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-grad);
  color: var(--on-accent);
}
.logo-mark::before {
  content: "\2726";
  font-size: 16px; line-height: 1; font-weight: 400;
}
.logo-mark--lg { width: 76px; height: 76px; border-radius: 24px; }
.logo-mark--lg::before { font-size: 36px; }

/* ── Butonlar ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-full);
  font-weight: 600; font-size: 14px; line-height: 1.2;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  transition: background var(--tr-fast), border-color var(--tr-fast),
              transform var(--tr-fast), opacity var(--tr-fast);
  user-select: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Birincil = kontrast pill (koyu temada beyaz, açıkta siyah) */
.btn--primary {
  background: var(--contrast-bg); color: var(--contrast-text);
  border-color: transparent; font-weight: 700;
  box-shadow: var(--shadow-1);
}
.btn--primary:hover { background: var(--contrast-bg); filter: brightness(.94); border-color: transparent; }

/* Tehlike = KOYU kırmızı taban, hover canlı kırmızı; border yok.
   (2026-07-10: renkler yer değiştirdi — açık kırmızı taban "bok gibi"
   bulundu, koyusu beğenildi; hover artık açığa döner.) */
.btn--danger { background: var(--danger-strong); color: var(--on-accent); border: 0; }
.btn--danger:hover { background: var(--danger); color: var(--on-accent); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

/* Küçük boy = accent-soft dolgu, çizgisiz (kullanıcı 2026-07-22).
   Artık RENK taşıyor: varyantlardan SONRA geldiği için btn--ghost /
   --primary ile birleşince zemini bu blok kazanır. */
.btn--sm {
  padding: 7px 13px; font-size: 12.5px;
  border: 0; background: var(--accent-soft);
}
.btn--block { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--circle-md); height: var(--circle-md); border-radius: var(--r-full); flex: 0 0 auto;
  color: var(--text-2); transition: background var(--tr-fast), color var(--tr-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn i { font-size: 16px; }

/* ── Form elemanları ──────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%; padding: 10px 14px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
/* Odak = TEK ince accent border — halka/glow yok ("çift border"
   şikâyeti, kullanıcı kararı 2026-07-05; tüm inputlarda geçerli) */
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: none;
}
.input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) {
  border-color: var(--border-strong);
}
.textarea { resize: vertical; min-height: 84px; }
/* Auto-grow varyantı — kaydırma çubuğu YOK, boyutlandırma tutamacı YOK;
   yükseklik JS ile içeriğe göre büyür (profil "Hakkında", 2026-07-06) */
.textarea--auto { resize: none; overflow: hidden; min-height: 0; }
/* Select oku — SVG'siz, iki eğik gradientten çizili şerit */
.select { appearance: none; padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field { margin-bottom: 14px; }
.field > label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.field .hint { margin-top: 5px; font-size: 12px; color: var(--text-3); }
.form-row { display: flex; gap: 12px; }
.form-row > .field { flex: 1; min-width: 0; }

/* Switch (çerez toggles) */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .sl {
  position: absolute; inset: 0; border-radius: var(--r-full);
  background: var(--surface-3);
  transition: background var(--tr-fast);
}
.switch .sl::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  border-radius: 50%; background: var(--text-3); transition: transform var(--tr-fast), background var(--tr-fast);
}
.switch input:checked + .sl { background: var(--accent); }
.switch input:checked + .sl::before { transform: translateX(18px); background: #fff; }
.switch input:disabled + .sl { opacity: .55; }

/* ── Daire onay kutusu (checkbox yerine) — boş 2px halka;
   işaretlenince FA circle-check. İşaretlenmesi gerekenler
   .pulse-attn ile dalga dalga dikkat çeker (kullanıcı kararı
   2026-07-05: tüm checkbox'lar artık check-circle). ───────── */
.ccheck-input { position: absolute; opacity: 0; pointer-events: none; }
.ccheck {
  position: relative; flex: 0 0 auto;
  width: var(--circle-xs); height: var(--circle-xs); border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--tr-fast);
}
.ccheck i {
  display: none; font-size: 22px; line-height: 1;
  color: var(--accent);
}
.ccheck-input:checked + .ccheck { border-color: transparent; }
.ccheck-input:checked + .ccheck i { display: block; }
.ccheck-input:focus-visible + .ccheck { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Nabız hâli ACCENT okunur (kullanıcı 2026-07-20): halka zaten
   sistem geneli accent; beyaz 2px çember de nabız sırasında accent'e
   döner ki "beyaz pulse" gibi görünmesin. İşaret gelince animasyonla
   birlikte aşağıda söner. */
.ccheck.pulse-attn { border-color: rgba(var(--accent-rgb), .8); }
/* işaretlenince nabız durur */
.ccheck-input:checked + .ccheck.pulse-attn,
.ccheck-input:checked + .ccheck.pulse-attn::before,
.ccheck-input:checked + .ccheck.pulse-attn::after { animation: none; }
.ccheck-input:checked + .ccheck.pulse-attn::before,
.ccheck-input:checked + .ccheck.pulse-attn::after { display: none; }

/* ── Radar nabzı — dikkat çekmesi gereken aksiyonlar (Yükle
   butonu, onay bekleyen ccheck'ler, aktifleşen ileri oku…).
   Dalga transform-scale değil SABİT px'lik box-shadow halkası:
   eleman boyutundan bağımsız, overflow:hidden kaplarda (wiz)
   kesilme payı küçük ve öngörülebilir. ─────────────────────── */
/* z-index: dalga komşu div'lerin ALTINA girmesin; yayılım serbest —
   kesen overflow kabı kalmadı (sihirbaz display-geçişli adımlara taşındı) */
.pulse-attn { position: relative; z-index: 2; animation: pulse-attn 1.6s ease-in-out infinite; }
.pulse-attn::before,
.pulse-attn::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  animation: pulse-ripple 1.8s cubic-bezier(.2, .6, .4, 1) infinite;
}
.pulse-attn::after { animation-delay: .9s; }
@keyframes pulse-attn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* SİSTEMDE TEK PULSE budur — dikkat nabzı isteyen öğe kendi kopyasını
   yazmaz, .pulse-attn sınıfını alır. Halka VURGU AİLESİNDEN
   (kullanıcı 2026-07-20: beyaz karar tersine döndü — "+ dairesi,
   Yükle, sözleşme ccheck'leri, ileri oku hepsi accent"; ayarı
   --pulse-ring tek satırından oyna). DİKKAT: halka box-shadow'dur —
   ATASINDA overflow'lu kap varsa 20px yayılım payı bırak
   (conv-list/wiz-step tampon deseni, chats.css/wallet.css). */
:root { --pulse-ring: rgba(var(--accent-rgb), .55); }
@keyframes pulse-ripple {
  0% { box-shadow: 0 0 0 0 var(--pulse-ring); }
  100% { box-shadow: 0 0 0 20px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-attn, .pulse-attn::before, .pulse-attn::after { animation: none; }
  .pulse-attn::before, .pulse-attn::after { display: none; }
}

/* Toggle grubu (tema) — aktif = kontrast pill */
.toggle-group {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--surface-2); border-radius: var(--r-full);
}
.toggle-group .tg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 600;
  color: var(--text-2); transition: background var(--tr-fast), color var(--tr-fast);
}
.toggle-group .tg-btn.active {
  background: var(--accent-grad); color: var(--on-accent);
}
.toggle-group .tg-btn i { font-size: 13px; }
/* Blok varyant — satırı tam kaplar, butonlar eşit pay (profil > tema;
   kullanıcı kararı 2026-07-05: solda boşluk kalmasın) */
.toggle-group--block { display: flex; width: 100%; }
.toggle-group--block .tg-btn { flex: 1; justify-content: center; }

/* ── Seçenek pill'leri — native <select> yerine (kullanıcı kararı
   2026-07-05: "saf html açılır listesi hiçbir yerde olmasın").
   Sarabilen chip dizisi; aktif = mor gradient (glow'suz). ────── */
.opt-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-pill {
  padding: 8px 15px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-weight: 600;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.opt-pill:hover { background: var(--surface-3); color: var(--text); }
.opt-pill.active { background: var(--accent-grad); color: var(--on-accent); }

/* ── Seçici butonu — input görünümlü tıklanır alan (ülke/dil gibi
   popup'la seçilen alanlar; native select değil) ─────────────── */
.select-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 10px 14px; text-align: left;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 14px; transition: border-color var(--tr-fast), background var(--tr-fast);
}
.select-btn:hover { border-color: var(--border-strong); }
.select-btn .sb-caret { margin-left: auto; color: var(--text-3); }
.select-btn .sb-caret i { font-size: 11px; }

/* ── Kart primitifi ÖLDÜ (2026-07-19, ALTIN KURAL K1/K4):
   .card / .card--hero / .card-title yığını çözüldü — her sekme kartı
   kendi kimlik bloğundan boyanır (balance-card, stmt-card,
   profile-card…); ortak reçete tokens.css'te (--card-r/--card-pad). ── */

/* ── Avatar — TAM daire (kullanıcı kararı 2026-07-05) ─────── */
.avatar {
  position: relative;
  width: var(--circle-lg); height: var(--circle-lg); border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface-3); color: var(--text-2);
  font-weight: 700; font-size: 16px; user-select: none;
}
/* Foto çemberi MUTLAK doldurur — grid/intrinsic boyut oyunlarına
   kapalı, her koşulda tam ortalı kırpım (şikâyet 2026-07-06) */
.avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  border-radius: inherit;
}
.avatar--sm { width: var(--circle-md); height: var(--circle-md); font-size: 13px; }
.avatar--lg { width: 84px; height: 84px; font-size: 30px; }

/* ── Chip / badge / pill ──────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  transition: background var(--tr-fast), color var(--tr-fast);
}
button.chip:hover { background: var(--surface-3); color: var(--text); }
/* Aktif chip = mor gradient pill (referanstaki oda seçici) */
.chip.active {
  background: var(--accent-grad); color: var(--on-accent);
}
.chip i { font-size: 11px; }
.badge {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border-radius: var(--r-full); font-size: 11px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}
.badge--muted { background: var(--surface-2); color: var(--text-2); }

/* ── Modal / Sheet iskeletleri 2026-07-20'de ÖLDÜ ─────────────
   Popup mimari birleşmesi: .modal-bd/.modal/.sheet-bd/.sheet/
   .surface-hero blokları TEK popup iskeletine (css/popup.css,
   .pp/.pp-panel/.pp-body) taşındı; kurulum core/popup.js. Popup
   zemini (panel-bg + --bgg-img deseni) artık iskeletin TEK KARARI —
   ayrı .surface-hero sınıfı gerekmez. Boyut/duruş farkları her
   popup'ın kendi dosyasındaki .pp[data-pp="ad"] var bloklarında. ── */

.picker-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding-right: 8px; margin-right: -6px;
  scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent;
}
.picker-list::-webkit-scrollbar { width: 4px; }
.picker-list::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
.picker-list::-webkit-scrollbar-track { background: transparent; }
/* Seçici satırları — liste tipografisi "küçük" bulundu (2026-07-05):
   daha iri font + ferah satır + iri bayrak */
.picker-list .dd-item {
  font-size: 15px; padding: 12px; gap: 12px;
  border-radius: var(--r-md);
}
/* iri bayrağın reçetesi artık .pf-flag'te (profile.css, 2026-07-19) */

/* ── JSON görüntüleyici (core/json-view.js) ───────────────────
   Özel çizici yoksa genel ağaç: mono tipografi, <details> ile
   katlanır; renkler tema değişkenlerinden (tek aile). */
/* sheet boyutu: doğum haritası gövdesi (2 sütun + tablolar) masaüstünde
   GENİŞ ister; mobilde standart sheet kalır */
@media (min-width: 720px) {
  .pp[data-pp="json"] { --pp-w: min(960px, 94vw); --pp-max-h: 88svh; }
}
.jv-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 4px 0 10px; }
.jv-title i { color: var(--accent); }
.jv-tree {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  overflow-x: auto; padding-bottom: 6px;
}
.jv-row { word-break: break-word; }
.jv-kids { padding-left: 16px; margin-left: 5px; border-left: 1px solid var(--border); }
.jv-node > summary { cursor: pointer; list-style: none; user-select: none; }
.jv-node > summary::-webkit-details-marker { display: none; }
.jv-node > summary::before {
  content: '▸'; display: inline-block; width: 14px;
  color: var(--text-3); transition: transform var(--tr-fast);
}
.jv-node[open] > summary::before { transform: rotate(90deg); }
.jv-key { color: var(--text-2); font-weight: 600; }
.jv-str { color: var(--accent); }
.jv-num { color: var(--text); font-weight: 600; }
.jv-bool { color: var(--ok); font-weight: 600; }
.jv-null { color: var(--text-4); font-style: italic; }
.jv-badge {
  font-size: 10.5px; color: var(--text-4);
  background: var(--surface-2); border-radius: var(--r-full); padding: 1px 8px;
}
.jv-dim { color: var(--text-4); }

/* ── Toast ────────────────────────────────────────────────── */
.toast-root {
  position: absolute; z-index: var(--z-toast);
  bottom: calc(20px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: min(92vw, 480px);
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--r-full);
  background: var(--panel-bg); border: 1px solid var(--border);
  color: var(--text); font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-2), var(--glass-edge); pointer-events: auto;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  animation: pop-in var(--tr-med); max-width: 100%;
}
.toast--ok { border-color: rgba(var(--ok-rgb), .45); }
.toast--err { border-color: rgba(var(--danger-rgb), .5); }
.toast .toast-action {
  color: var(--accent); font-weight: 700; white-space: nowrap;
}
.toast.out { opacity: 0; transform: translateY(8px); transition: all var(--tr-med); }

/* ── Dropdown panel ───────────────────────────────────────── */
.dd { position: relative; }
.dd-panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-2), var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  max-height: 260px; overflow-y: auto; animation: pop-in var(--tr-fast);
}
.dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; text-align: left; font-size: 13.5px;
}
.dd-item:hover { background: var(--surface-2); }

/* ── Boş durum ────────────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 44px 20px; text-align: center; color: var(--text-3);
}
.empty i { opacity: .5; }
.empty p { font-size: 13.5px; }

/* ── Lightbox — ortak medya görüntüleyici (core/lightbox.js) ──
   Popup motorunda layer; zemin tek-karar reçetesine BİLİNÇLİ istisna:
   medya nötr siyah ister — panel şeffaf/kutusuz, karartma %88 siyah.
   Panel tam ekranı kaplar (medya dışına tıkla = kapat, kapatma tuşu
   ekran köşesinde). */
.pp[data-pp="lightbox"] {
  --pp-pad: 0;
  --pp-backdrop: rgba(0, 0, 0, .88);
  --pp-blur: none;
}
.pp[data-pp="lightbox"] .pp-panel {
  max-width: none; width: 100%; height: 100%; max-height: none;
  background: none; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: grid; place-items: center;
  animation: none;
}
.lb-media { max-width: 94vw; max-height: 88svh; }
img.lb-media { border-radius: var(--r-md); object-fit: contain; }
.lb-close {
  position: absolute; top: 16px; right: 16px;
  width: var(--circle-md); height: var(--circle-md); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.lb-close i { font-size: 16px; }

/* ── Skeleton ─────────────────────────────────────────────── */
.skeleton {
  border-radius: var(--r-md); background: var(--surface-2);
  position: relative; overflow: hidden;
}
/* Kart yükleme iskeletleri (profil hero / cüzdan bakiye kartı) */
.skeleton--hero { height: 90px; }
.skeleton--card { height: 120px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--surface-3), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── Canlı durum etiketi (core/live-status.js) ─────────────────
   Conv-list rozetinin nabzı (.conv-live — chats.css); chat içi
   gösterge ayrı: chat.css .live-ind (başlık silindi 2026-07-12). */
.live-label { animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .live-label { animation: none; } }

/* ── TEK YÖN ZAMAN ÇİZELGESİ (core/timeline.js — ORTAK) ─────────
   ORTAK GÖRSELLEŞTİRME (2026-07-23): solda dar sütunda dev göreli
   süre + altında tarih (sağa hizalı), omurga, sağda çıplak dizgi.
   Timeline üzerinde tarih/gün başlığı YAZILMAZ — yalnız ŞİMDİ kavşağı.
   İki çağıran: sohbet nsp popup'ı (ajanda + harita takvimi) ve astro
   sekmesi (harita takvimi). Eskiden bu blok chat.css'te .nsp-* idi ve
   astro sekmesi "kutu kutu" ayrı çiziyordu; components'e taşınıp .tl-*
   yapıldı ki iki yüzey TEK çelikten çizsin (drift bitti).

   Geometri TEK kaynak: --tl-dot = noktanın .tl-ev içindeki yeri
   (130 sütun + 23 nefes), omurga = sol padding + o. --tl-padx
   FALLBACK'lidir (24px): çizelge yatay payı olan bir kabın İÇİNDE
   çizilince çağıran onu 0'a çekebilir → gövde ikinci kez daralmaz. */
.tl-tl {
  --tl-dot: 153px;
  position: relative; padding: 22px var(--tl-padx, 24px) 10px;
}
.tl-tl::before {                     /* omurga */
  content: ''; position: absolute;
  left: calc(var(--tl-padx, 24px) + var(--tl-dot)); top: 30px; bottom: 18px;
  width: 2px; transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .45), var(--border));
}
.tl-now { position: relative; margin: 0 0 18px; }
/* çizgiyi kibarca keser: panel tonu + üstüne yüzeyin kendi perdesi
   (--tl-veil; kartın içindeyken kart camı da hesaba katılsın diye —
   şeffaf zemin çizgiyi gizleyemez) */
.tl-now span {
  display: inline-block; padding: 2px 14px;
  margin-left: var(--tl-dot); transform: translateX(-50%);
  background-color: var(--panel-bg);
  background-image: linear-gradient(var(--tl-veil, transparent), var(--tl-veil, transparent));
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--accent-pop);
}
.tl-ev {
  position: relative;
  display: grid; grid-template-columns: 130px 1fr; column-gap: 46px;
  padding: 0 0 22px;
  animation: tl-in .45s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes tl-in { from { opacity: 0; transform: translateY(10px); } }
.tl-ev::before {                     /* olay noktası — omurgaya oturur
   (koordinat .tl-ev'e göre: omurga sol padding'i de sayar) */
  content: ''; position: absolute; left: var(--tl-dot); top: 7px;
  width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .6);
}
/* zaman durumu: geçmiş SÖNÜK AMA OKUNUR; nokta grileşir */
.tl-ev.is-past { opacity: .58; }
.tl-ev.is-past::before { background: var(--surface-3); box-shadow: none; }
/* SÜRÜYOR — yalnız harita takviminde (ajandada olay tek andır):
   dönem açık olduğu sürece nokta halkalanır */
.tl-ev.is-live::before {
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22),
              0 0 10px rgba(var(--accent-rgb), .7);
}
.tl-rel, .tl-evbody { grid-row: 1; min-width: 0; }
.tl-rel { grid-column: 1; text-align: right; }
.tl-rel b {
  display: block; font-size: 20px; font-weight: 800;
  letter-spacing: -.4px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tl-rel i {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .7px; color: var(--text-3); text-transform: uppercase;
}
/* sıradaki olayda süre TÜM parçalarıyla accent ("34 gün" + "SONRA");
   süren dönem varsa vurgu ONDADIR — aynı anda iki accent olmaz */
.tl-rel.is-next b, .tl-rel.is-next i,
.tl-rel.is-live b, .tl-rel.is-live i { color: var(--accent-bright); }
.tl-date {                           /* tarihin TEK yeri: sürenin altı */
  display: block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--text-3);              /* büyükharfsiz — tek satır sığar */
}
/* sağ yaka: saat satırı ile dev süre AYNI taban çizgisinde */
.tl-evbody { grid-column: 2; padding-top: 3px; }
.tl-when {
  font-size: 11.5px; font-weight: 800; letter-spacing: .4px;
  font-variant-numeric: tabular-nums; color: var(--accent-bright);
}
.tl-ev.is-past .tl-when { color: var(--text-2); }
.tl-tt { margin-top: 3px; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.tl-note { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-meta { margin-top: 6px; font-size: 10.5px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .tl-ev { animation: none; } }