/* ══════════════════════════════════════════════════════════════════════════
   AJAN AGI · ekip-ag.js'in stili  (23 Eyl 2026, DESIGN.md)

   Renk yalniz tema degiskenlerinden; bes temada ayni kurallar. Gecisler
   yalniz --t1/--t2/--t3 ve --cik/--kay ile, yalniz renk, saydamlik ve
   transform oynar (plan/test-tasarim-kapisi.js). Gradyan, parilti, cam,
   italik yok. Olay renkleri [data-renk] ile tek yerden baglanir.

   --ag-zemin: etiketlerin ve noktalarin arkasindaki "kesik" rengi. Ag
   sayfa zemininde duruyorsa --z1 (varsayilan); bir kartin icine konursa
   ekip.js .ag{--ag-zemin:var(--cam)} yazar.
   ══════════════════════════════════════════════════════════════════════════ */
.ag{--ag-zemin:var(--z1);position:relative;color:var(--mt);font-family:var(--yzt)}
.ag [data-renk="vurgu"]{--ag-r:var(--vurgu)}
.ag [data-renk="basari"]{--ag-r:var(--basari)}
.ag [data-renk="dikkat"]{--ag-r:var(--dikkat)}
.ag [data-renk="mt"]{--ag-r:var(--mt)}

/* ── Ust satir: Canli | Son 24 saat, oynatici, ozet ─────────────────────── */
.ag-bas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-height:40px;margin:0 0 2px}
.ag-seg{display:inline-flex;flex-shrink:0;padding:3px;border-radius:999px;background:var(--cam);box-shadow:var(--glg)}
.ag-seg button{border:0;background:transparent;font:600 var(--y2)/1 var(--yzt);letter-spacing:-.005em;color:var(--or);
  padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background-color var(--t2) var(--cik),color var(--t2) var(--cik)}
.ag-seg button[aria-pressed="true"]{background:color-mix(in srgb,var(--mt) 9%,var(--cam));color:var(--mt)}
@media (hover:hover){ .ag-seg button[aria-pressed="false"]:hover{color:var(--mt)} }
.ag-oyn{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0}
.ag-oyn[hidden]{display:none}
.ag-oyn-dgm{flex-shrink:0;width:34px;height:34px;border:0;border-radius:999px;background:var(--cam);box-shadow:var(--glg);
  color:var(--mt);display:grid;place-items:center;cursor:pointer;
  transition:transform var(--t1) var(--cik),background-color var(--t1) var(--cik)}
.ag-oyn-dgm svg{display:block;fill:currentColor}
.ag-oyn-dgm:active{transform:scale(.94)}
.ag-kaydir{flex:1;min-width:80px;margin:0;accent-color:var(--vurgu);cursor:pointer}
.ag-oyn-saat{flex-shrink:0;min-width:40px;text-align:right;font:500 var(--y2)/1 var(--yzt);font-variant-numeric:tabular-nums;color:var(--sn)}
.ag-ozet{margin-left:auto;font-size:var(--y2);color:var(--sn);white-space:nowrap}
.ag-ozet[hidden]{display:none}

/* ── Sahne ──────────────────────────────────────────────────────────────── */
.ag-sahne{position:relative}
.ag-svg{display:block;width:100%;font-family:var(--yzt);-webkit-user-select:none;user-select:none;touch-action:manipulation}

/* Kenar: kil payi cizgi, kalinligi olay sayisiyla (--ag-w, 1 ila 3 px). */
.ag-k{fill:none;stroke:var(--cizgi);stroke-width:var(--ag-w,1px);stroke-linecap:round;
  transition:stroke var(--t3) var(--cik)}
.ag-k.uzeri{stroke:color-mix(in srgb,var(--mt) 30%,transparent)}
.ag-k.secili{stroke:color-mix(in srgb,var(--vurgu) 72%,transparent);stroke-width:calc(var(--ag-w,1px) + 1px)}
.ag-k.yanik{stroke:color-mix(in srgb,var(--ag-r) 58%,transparent)}
.ag-kv{fill:none;stroke:transparent;stroke-width:14px;pointer-events:stroke;cursor:pointer}
.ag-iz{fill:none;stroke:var(--ag-r);stroke-linecap:round;pointer-events:none}
.ag-nokta{fill:var(--ag-r);stroke:var(--ag-zemin);stroke-width:1.5px;pointer-events:none}
.ag-darbe{fill:none;stroke:var(--ag-r);stroke-width:1.5px;pointer-events:none}

/* Dugum: yuzey dolgusu, kil payi cerceve, altinda ad. */
.ag-d{cursor:pointer;outline:none}
.ag-d-daire{fill:var(--cam)}
.ag-d-cerceve{fill:none;stroke:var(--cizgi);stroke-width:1px;transition:stroke var(--t1) var(--cik)}
@media (hover:hover){ .ag-d:hover .ag-d-cerceve{stroke:color-mix(in srgb,var(--mt) 32%,transparent)} }
.ag-d.uc .ag-d-cerceve{stroke:color-mix(in srgb,var(--vurgu) 70%,transparent)}
.ag-d:focus-visible .ag-d-cerceve{stroke:var(--vurgu);stroke-width:2px}
.ag-d-harf{font-weight:600;fill:var(--or);letter-spacing:-.01em;pointer-events:none}
.ag-d--orkestra .ag-d-harf{fill:var(--mt)}
.ag-d-ikon{fill:none;stroke:var(--or);pointer-events:none}
.ag-d-ikon *{stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ag-d-ad{font-size:12px;font-weight:500;letter-spacing:-.005em;fill:var(--mt);pointer-events:none;
  paint-order:stroke;stroke:var(--ag-zemin);stroke-width:4px;stroke-linejoin:round;transition:opacity var(--t1) var(--cik)}
/* Sigmayan ad gizlenir (ekip-ag.js etiketYerlesim); uzerine gelince, odakta
   ve cizelgede satiri isaretliyken gorunur. */
.ag-d-ad.gizli{opacity:0}
.ag-d:hover .ag-d-ad.gizli,.ag-d:focus-visible .ag-d-ad.gizli,.ag-d.uc .ag-d-ad.gizli{opacity:1}
.ag-d--orkestra .ag-d-ad{font-size:13px;font-weight:600}
.ag-d--takvim .ag-d-ad,.ag-d--arastirma .ag-d-ad{font-size:11px;fill:var(--sn)}
.ag-d--gecici .ag-d-cerceve{stroke:var(--sn2);stroke-dasharray:2.5 3}
.ag-d--gecici .ag-d-harf,.ag-d--gecici .ag-d-ad{fill:var(--sn)}
.ag-d--gecici .ag-d-ad{font-size:11px}
/* Egitilmis ajan: kucuk vurgu noktasi. Durum: turuncu bekliyor, kirmizi hata. */
.ag-d-ozel{display:none;fill:var(--vurgu);stroke:var(--ag-zemin);stroke-width:2px}
.ag-d.ozel .ag-d-ozel{display:inline}
.ag-d-durum{display:none;stroke:var(--ag-zemin);stroke-width:2px}
.ag-d.bekliyor .ag-d-durum{display:inline;fill:var(--dikkat)}
.ag-d.hata .ag-d-durum{display:inline;fill:var(--uyari)}
/* Calisiyor: vurgu halkasi sakin nefes alir (--dongu). Ekran disinda durur. */
.ag-d-nefes{fill:none;stroke:var(--vurgu);stroke-width:1.5px;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.ag-d.calisiyor .ag-d-nefes{animation:ag-nefes var(--dongu) var(--kay) infinite}
.ag.durgun .ag-d-nefes{animation-play-state:paused}
.ag-d.yeni{animation:ag-belir var(--t3) var(--cik) both}
@keyframes ag-nefes{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.85;transform:scale(1.07)}}
@keyframes ag-belir{from{opacity:0}}

/* Ozet etiketi: kenarin ortasinda belirir, 2,5 sn sonra kaybolur. */
.ag-cipler{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ag-cip{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;max-width:calc(100% - 12px);
  padding:5px 11px 5px 9px;border-radius:999px;background:var(--cam);border:1px solid var(--cizgi);box-shadow:var(--glg);
  font:500 var(--y2)/1.25 var(--yzt);letter-spacing:-.005em;color:var(--mt);white-space:nowrap;
  opacity:0;transform:translate(-50%,-50%) translateY(3px);
  transition:opacity var(--t3) var(--cik),transform var(--t3) var(--cik)}
.ag-cip.gor{opacity:1;transform:translate(-50%,-50%)}
.ag-cip-nokta{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ag-r)}
.ag-cip-yazi{overflow:hidden;text-overflow:ellipsis}

.ag-not{margin:4px 0 0;text-align:center;font-size:var(--y3);line-height:1.45;color:var(--sn)}
.ag-not[hidden]{display:none}

/* ── Zaman cizelgesi: en yeni ustte, en fazla 30 satir ─────────────────── */
.ag-cizelge{position:relative;margin-top:14px;background:var(--cam);border-radius:16px;box-shadow:var(--glg);
  max-height:344px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ag-cizelge[hidden]{display:none}
.ag-li{position:relative}
.ag-li+.ag-li::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--cizgi)}
.ag-sat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;align-items:start;min-height:44px;
  padding:11px 16px;cursor:pointer;outline:none;transition:background-color var(--t1) var(--cik)}
@media (hover:hover){ .ag-sat:hover{background:color-mix(in srgb,var(--mt) 4%,transparent)} }
.ag-sat:focus-visible{box-shadow:inset 0 0 0 2px var(--vurgu);border-radius:12px}
.ag-sat.secili{background:color-mix(in srgb,var(--mt) 9%,transparent)}
.ag-sat.secili .ag-sat-saat,.ag-sat.secili .ag-sat-tur,.ag-sat.secili .ag-sat-proje{color:var(--or)}
.ag-sat.yeni{animation:ag-satir var(--t3) var(--cik) both}
@keyframes ag-satir{from{opacity:0;transform:translateY(-4px)}}
.ag-sat-saat{padding-top:1px;font:500 var(--y2)/1.35 var(--yzt);font-variant-numeric:tabular-nums;color:var(--sn)}
.ag-sat-ic{display:flex;flex-direction:column;gap:3px;min-width:0}
.ag-sat-ust{display:flex;align-items:center;gap:7px;min-width:0}
.ag-sat-nokta{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ag-r)}
.ag-sat-yol{font:600 var(--y3)/1.3 var(--yzt);letter-spacing:-.01em;color:var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-sat-tur{flex-shrink:0;font-size:var(--y1);color:var(--sn);white-space:nowrap}
.ag-sat-ozet{font-size:var(--y3);line-height:1.35;color:var(--or);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-sat-proje{max-width:120px;padding-top:2px;font-size:var(--y1);line-height:1.3;color:var(--sn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-cizelge-bos{padding:14px 16px;font-size:var(--y3);color:var(--sn)}

@media (max-width:560px){
  .ag-sat{column-gap:10px;padding:10px 14px}
  .ag-sat-proje{max-width:84px}
}

/* Hareketi azalt: nokta ve nabiz zaten cizilmiyor (ekip-ag.js); nefes durur,
   etiket ve satir aninda gelir. Renk gecisleri kalir, hareket degil. */
@media (prefers-reduced-motion:reduce){
  .ag-d.calisiyor .ag-d-nefes{animation:none;opacity:.8}
  .ag-d.yeni,.ag-sat.yeni{animation:none}
  .ag-cip{transition:none;transform:translate(-50%,-50%)}
  .ag-oyn-dgm{transition:none}
}