/* Peak & Ghost — tarih aralığı seçici (tarih.js). Renkler yalnız tema değişkenlerinden: dört palet + koyu görünüm kendiliğinden.
   Pencere document.body'ye eklenir (.sayfa > * çocukları giriş animasyonu yüzünden ayrı yığın bağlamıdır), perde 40, pencere 41. */

.trh-dugme { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 11px; border: 1px solid transparent; border-radius: 10px;
  background: var(--yuzey2); color: var(--metin); font: 550 13.5px var(--sans); cursor: pointer; white-space: nowrap; transition: background .2s var(--yay, ease); }
.trh-dugme:hover { background: var(--cizgi); }
.trh-dugme[aria-expanded="true"] { background: var(--vurgu-acik); border-color: color-mix(in srgb, var(--vurgu) 35%, transparent); }
.trh-ikon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; color: var(--soluk); flex: none; }
.trh-ok { color: var(--soluk); font-size: 11px; }

.trh-perde { position: fixed; inset: 0; z-index: 40; background: transparent; }
.trh-pop { position: fixed; z-index: 41; top: 0; left: 0; width: max-content; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--yuzey); color: var(--metin); border: 1px solid var(--cizgi); border-radius: calc(var(--r) + 4px);
  box-shadow: 0 24px 64px color-mix(in srgb, #000 22%, transparent), var(--golge); animation: trh-gel .22s var(--yay, ease) both; }
@keyframes trh-gel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.trh-bas { display: none; }
.trh-govde { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.trh-hazir { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--cizgi); }
.trh-hazir button { text-align: left; font: 500 13.5px var(--sans); color: var(--metin2); background: none; border: 0; border-radius: 8px; padding: 8px 10px; min-height: 34px; cursor: pointer; }
.trh-hazir button:hover { background: var(--yuzey2); color: var(--metin); }
.trh-hazir button[aria-pressed="true"] { background: var(--vurgu-acik); color: var(--vurgu); font-weight: 600; }
.trh-sag { padding: 14px 16px 10px; min-width: 0; }

.trh-girdi { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.trh-girdi label { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trh-girdi small { color: var(--soluk); font-size: 11.5px; font-weight: 550; }
.trh-girdi input { font: 500 14px var(--sans); color: var(--metin); background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: 8px; padding: 7px 10px; min-height: 36px; width: 100%; font-variant-numeric: tabular-nums; }
.trh-girdi > span { color: var(--soluk); padding-bottom: 9px; }

.trh-takvim { position: relative; }
.trh-aylar { display: grid; grid-auto-flow: column; grid-auto-columns: 252px; gap: 24px; }
.trh-ay-ad { font: 650 14px var(--font-baslik); text-align: center; height: 32px; line-height: 32px; }
.trh-gez { position: absolute; top: 0; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--metin2); font-size: 20px; line-height: 1; cursor: pointer; }
.trh-gez:hover:not([disabled]) { background: var(--yuzey2); }
.trh-gez[disabled] { opacity: .3; cursor: default; }
.trh-gez.onceki { left: 0; }
.trh-gez.sonraki { right: 0; }
.trh-izgara { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; }
.trh-gun-ad { font-size: 11px; color: var(--soluk); text-align: center; height: 26px; line-height: 26px; font-weight: 550; }
.trh-gun { position: relative; height: 36px; border: 0; background: none; color: var(--metin); font: 500 13px var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 0; padding: 0; }
.trh-gun:hover:not([aria-disabled="true"]) { background: var(--yuzey2); border-radius: 8px; }
.trh-gun.ici, .trh-gun.onizle { background: var(--vurgu-acik); border-radius: 0; }
.trh-gun.bas, .trh-gun.son { background: var(--vurgu); color: var(--vurgu-ust); font-weight: 650; border-radius: 8px; }
.trh-gun.bas:not(.son) { border-radius: 8px 0 0 8px; }
.trh-gun.son:not(.bas) { border-radius: 0 8px 8px 0; }
.trh-gun.bugun::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.trh-gun.kiyas { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--orta) 75%, transparent); }
.trh-gun.kismi:not(.bas):not(.son) { background-image: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--orta) 22%, transparent) 3px 5px); }
.trh-gun.yok, .trh-gun.gelecek { color: color-mix(in srgb, var(--soluk) 55%, transparent); cursor: not-allowed; }
.trh-gun.yok { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--soluk) 45%, transparent); }
.trh-gun:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; border-radius: 8px; z-index: 1; }

.trh-kiyas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cizgi); }
.trh-kiyas > small { color: var(--soluk); font-size: 12px; font-weight: 550; }
.trh-kiyas-sec { display: inline-grid; grid-auto-flow: column; background: var(--yuzey2); border-radius: 10px; padding: 2px; }
.trh-kiyas-sec button { font: 550 12.5px var(--sans); color: var(--metin2); background: none; border: 0; border-radius: 8px; padding: 6px 11px; min-height: 30px; cursor: pointer; }
.trh-kiyas-sec button[aria-checked="true"] { background: var(--yuzey); color: var(--metin); box-shadow: 0 1px 3px color-mix(in srgb, var(--metin) 18%, transparent); }
.trh-kiyas-metin { color: var(--soluk); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.trh-lejant { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font-size: 11.5px; color: var(--soluk); }
.trh-lejant span { display: inline-flex; align-items: center; gap: 5px; }
.trh-lejant i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.trh-lejant .l-ici { background: var(--vurgu-acik); }
.trh-lejant .l-kiyas { height: 2px; border-radius: 0; background: var(--orta); }
.trh-lejant .l-kismi { background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--orta) 45%, transparent) 3px 5px); border: 1px solid var(--cizgi); }
.trh-lejant .l-yok { height: 1px; border-radius: 0; background: var(--soluk); }

.trh-alt { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--cizgi); background: color-mix(in srgb, var(--yuzey2) 45%, var(--yuzey)); }
.trh-ozet { flex: 1; font-size: 13px; color: var(--metin2); font-variant-numeric: tabular-nums; }
.trh-x { width: 44px; height: 44px; border: 0; background: none; color: var(--soluk); font-size: 18px; border-radius: 10px; cursor: pointer; }

/* Telefon: tam genişlik alt tabaka, tek ay, 44 px dokunma hedefleri */
@media (max-width: 640px) {
  .trh-perde { background: color-mix(in srgb, var(--metin) 22%, transparent); }
  .trh-pop.tabaka { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom); animation-name: trh-yuksel; }
  @keyframes trh-yuksel { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .trh-bas { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0 16px; font: 650 16px var(--font-baslik); }
  .trh-govde { grid-template-columns: 1fr; }
  .trh-hazir { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--cizgi); padding: 8px 12px 10px; gap: 6px; scrollbar-width: none; }
  .trh-hazir button { flex: none; min-height: 44px; padding: 0 14px; background: var(--yuzey2); border-radius: 999px; }
  .trh-sag { padding: 12px 16px 8px; }
  .trh-girdi input { min-height: 44px; font-size: 16px; }
  .trh-aylar { grid-auto-columns: 1fr; }
  .trh-izgara { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .trh-gun { height: 44px; font-size: 15px; }
  .trh-gez { width: 44px; height: 44px; top: -6px; }
  .trh-ay-ad { height: 32px; }
  .trh-kiyas-sec button { min-height: 44px; padding: 0 12px; }
  .trh-alt { position: sticky; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .trh-alt .dug { min-height: 44px; }
  .trh-dugme { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .trh-pop { animation: none; } }

/* ---------- seçiciye bağlı sayfa parçaları (app.js) ---------- */
/* Bugün › Satışlar: seçici özel aralıktaysa segmentte seçili sekme yok */
.segment.bos .segment-kaydirak { opacity: 0; }
/* Δ% rozeti: artış/azalış iyi mi kötü mü (maliyette ters), yansızda renksiz */
.fark.dlt { color: var(--metin2); font-variant-numeric: tabular-nums; }
.fark.dlt.iyi { color: var(--iyi); }
.fark.dlt.kotu { color: var(--kotu); }

/* Kanal takibi: hızlı pencere çipleri + aralık özeti + kıyas sütunları */
.kt-ozet { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: -8px 0 20px; }
.kt-hizli { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.kt-hizli button { font: 550 12.5px var(--sans); color: var(--metin2); background: var(--yuzey2); border: 1px solid transparent; border-radius: 999px; padding: 5px 12px; min-height: 32px; cursor: pointer; }
.kt-hizli button:hover { background: var(--cizgi); color: var(--metin); }
.kt-hizli button[aria-pressed="true"] { background: var(--vurgu-acik); color: var(--vurgu); border-color: color-mix(in srgb, var(--vurgu) 30%, transparent); }
.kt-aralik { margin: 0; }
table.takip th small { font-weight: 500; font-size: 11px; }
table.takip.kiyasli td.kiyas-deger { color: var(--metin2); }
table.takip td.dlt-hucre { width: 1%; }

/* Kanallar kartı: seçili dönem şeridi */
.kanal-aralik { margin: 0 0 28px; }
.kanal-aralik:empty { display: none; }
.kanal-aralik .donem-ust { margin-bottom: 12px; }
.kanal-aralik .donem-ust h2 { font-size: 18px; }
.kanal-aralik .kpiler { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.kanal-aralik-not { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--yuzey2); border-radius: var(--r); padding: 12px 16px; font-size: 13.5px; color: var(--metin2); }
.olcum-not { margin: 0 0 10px; }

@media (max-width: 980px) {
  .kanal-aralik .kpiler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  table.takip .kiyas-deger { display: none; }
  .kt-hizli button { min-height: 44px; padding: 0 14px; }
}
/* Kanal takibi başlığı: son çekim + çek düğmeleri + tarih seçici tek grup, sağ üstte; sarınca birlikte sarar */
.kt-arac { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 640px) { .kt-arac { justify-content: flex-start; margin-left: 0; } .kt-arac .dug { width: auto; } }