/* =========================================================================
   hareket.css — HAREKET katmanı (en son yüklenir). Rehber: TASARIM.md "Hareket".
   İlke: hareket BİLGİ verir ya da YÖN gösterir; süs yok. Yalnız transform · opacity · clip-path.
   Süre/eğri tokenları app.css'te (--sure-1..4, --egri-cikis/giris/vurgu). Hareketi azalt (sistem ya da
   Görünüm → Hareket: Azaltılmış) açıkken app.css'teki genel kural tüm süreleri sıfırlar; JS yardımcıları hiç başlamaz.
   ========================================================================= */

/* ------------------------------------------------------------------ TAKSİMETRE (js/ui/taksimetre.js) */
.tk-ic { display: inline; }
.tk-r { position: relative; display: inline-block; line-height: 1; clip-path: inset(0); }
.tk-ref { visibility: hidden; }                                    /* genişliği ve taban çizgisini verir */
.tk-s {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; will-change: transform;
  transition: transform var(--sure-4) var(--egri-cikis);           /* lira basamakları: 360 ms */
}
.tk-s > i { display: block; height: 1em; line-height: 1; font-style: normal; }
.tk-kurus .tk-s { transition-duration: 120ms; }                    /* kuruşlar daha hızlı */
.tk-kurus .tk-r, .tk-kurus .tk-n { color: var(--metin-3); }        /* ve soluk */
.tk-duz .tk-sembol { font-size: 1em; vertical-align: baseline; margin: 0; color: inherit; font-weight: inherit; }
.tk-n { display: inline-block; }

/* sayiKaydir: yalnız değişen kısım yuvarlanır */
.sk-kap { display: inline-grid; clip-path: inset(0); white-space: pre; }
.sk-kap > span { grid-area: 1 / 1; display: block; }

/* ------------------------------------------------------------------ BASMA / ÜZERİNE GELME */
@media (hover: hover) {
  .satir-ok { transition: transform var(--sure-2) var(--egri-cikis), color var(--sure-2) linear; }
  a.satir:hover .satir-ok, button.satir:hover .satir-ok, .ld-satir:hover .satir-ok { transform: translateX(3px); color: var(--metin); }
}
.alt .alt-kaydet, .yan-kaydet button { transition: transform var(--sure-1) var(--egri-cikis), filter var(--sure-1) linear; }
.alt .alt-kaydet:active, .yan-kaydet button:active { transform: scale(.96); filter: brightness(.92); }

/* ------------------------------------------------------------------ KOMUT PALETİ: .98 → 1 ölçek + 160 ms solma, arka plan bulanık */
@keyframes paletGir { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.palet-perde { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .palet-perde { background: rgba(14, 16, 19, .66); }                /* bulanıklık yoksa daha koyu */
}

/* ------------------------------------------------------------------ KATMANLAR */
.sheet.vt, .tam-sayfa.vt { animation: none; }                       /* View Transition açılışı kendi hareketini verir */
@keyframes hayir { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.hata-kutu.sars { animation: hayir var(--sure-3) cubic-bezier(.36, .07, .19, .97) 1; }          /* yalnız form gönderim hatasında */

/* Kaydet düğmesinden büyüyen katman (masaüstü) */
@supports (view-transition-name: x) {
  html.gecis-kaydet::view-transition-group(kaydet-katman) { animation-duration: var(--sure-3); animation-timing-function: var(--egri-cikis); }
  html.gecis-kaydet::view-transition-old(kaydet-katman) { animation: kaydet-sol 90ms linear both; mix-blend-mode: normal; height: 100%; width: 100%; object-fit: fill; }
  html.gecis-kaydet::view-transition-new(kaydet-katman) { animation: kaydet-gel var(--sure-3) linear both; mix-blend-mode: normal; height: 100%; width: 100%; object-fit: fill; }
  html.gecis-kaydet::view-transition-old(root), html.gecis-kaydet::view-transition-new(root) { animation-duration: var(--sure-3); mix-blend-mode: normal; }
  html.gecis-kaydet::view-transition-old(root) { animation: none; }
  html.gecis-kaydet::view-transition-new(root) { animation: kaydet-gel var(--sure-3) var(--egri-cikis) both; }
  /* Liste → detay: satırın başlığı detay başlığına uçar (aynı anda tek ad: detay-baslik) */
  html.gecis-paylasim::view-transition-group(detay-baslik) { animation-duration: var(--sure-3); animation-timing-function: var(--egri-cikis); }
  html.gecis-paylasim::view-transition-old(detay-baslik), html.gecis-paylasim::view-transition-new(detay-baslik) {
    mix-blend-mode: normal; height: 100%; width: 100%; object-fit: contain; object-position: left center;
  }
  html.gecis-paylasim::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
  html.gecis-paylasim::view-transition-new(root) { animation: kaydet-gel var(--sure-2) linear both; mix-blend-mode: normal; }
}
@keyframes kaydet-sol { to { opacity: 0; } }
@keyframes kaydet-gel { from { opacity: 0; } }

/* Eylem kutuları kademeli belirirken ilk karede görünmesin diye JS kademeli() kullanır (fill: backwards) */

/* ------------------------------------------------------------------ MAKBUZ TOAST'I (kayıt gönderildi) */
.toast.makbuz { gap: .75rem; padding: .75rem 1rem .75rem .875rem; }
.toast.makbuz .mk-ikon { flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; }
.toast.makbuz .mk-ikon svg { width: 1.5rem; height: 1.5rem; stroke-width: 2.4; }
.toast.makbuz .mk-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; line-height: 1.3; }
.toast.makbuz .mk-bas { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.makbuz .mk-alt { font-size: var(--t-etiket); font-weight: 400; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.makbuz.cihazda { background: var(--metin); color: var(--yuzey); }
.toast.makbuz.cikiyor { opacity: 0; transform: translateX(110%); transition: opacity var(--sure-3) var(--egri-giris), transform var(--sure-3) var(--egri-giris); }
@media (min-width: 1024px) { .toast.makbuz { max-width: 100%; } }

/* ------------------------------------------------------------------ DURUM GEÇİŞLERİ */
/* Boş durum ikonunun çizgisi ilk görünüşte BİR kez çizilir (pathLength=1: bosDurum ikona yazar) */
.bos-ikon svg :is(path, circle, line, polyline, rect, ellipse) { animation: bos-ciz var(--sure-4) var(--egri-cikis) backwards; }
@keyframes bos-ciz { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

/* Bugün: ilk açılışta öğeler kademeli belirir (JS); iskelet → içerik yalnız opacity ile (kayma yok) */

/* ------------------------------------------------------------------ PUANTAJ */
.pu-satir { position: relative; }
.vurgu-kat { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: var(--yesil-b); mix-blend-mode: multiply; }   /* multiply: yazı örtünün altında okunur kalır */
:root[data-tema="koyu"] .vurgu-kat { mix-blend-mode: screen; }
.vurgu-kat.kirmizi { background: var(--kirmizi-b); }
.vurgu-kat.mavi { background: var(--mavi-b); }
.pu-ilerleme { display: block; height: 2px; margin: 0 .125rem .625rem; background: var(--cizgi); overflow: hidden; border-radius: 1px; }
.pu-ilerleme > i { display: block; height: 100%; width: 100%; background: var(--yesil); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--sure-3) var(--egri-cikis); }
.pu-grup-baslik + .pu-ilerleme { margin-top: -.375rem; }
.pu-grup-baslik [data-grup-sayi] { display: inline-block; }
.pu-sec svg path { stroke-linecap: round; }

/* Görev bitti: başlığın üstü soldan sağa çizilir, sonra satır katlanır */
.ustu-cizili { position: relative; color: var(--metin-3); transition: color var(--sure-2) linear; }
.ustu-cizgi {
  position: absolute; inset: 0; pointer-events: none; color: transparent; overflow: hidden;
  text-decoration: line-through; text-decoration-color: var(--metin-2); text-decoration-thickness: 1.5px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}

/* ------------------------------------------------------------------ ÜST ÇUBUK: büyük başlık daralması + kenar çizgisi (telefon) */
.santiye-btn .sb-yigin { display: none; }
@media (max-width: 1023px) {
  .ust { border-bottom-color: transparent; }
  .ust::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--kenar); background: var(--cizgi); opacity: 0; pointer-events: none; }
  .ust.kaydi::after { opacity: 1; transition: opacity var(--sure-2) linear; }                    /* IntersectionObserver yedeği */
  .ust.santiyeli .santiye-btn .sb-ic { position: relative; display: block; flex: 1; min-width: 0; height: 2.5rem; }
  .ust.santiyeli .santiye-btn .sb-buyuk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; }
  .ust.santiyeli .santiye-btn .sb-yigin {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0;
    opacity: 0; transform: translateY(6px); pointer-events: none;
  }
  .sb-baslik { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-govde); font-weight: 600; line-height: 1.25; color: var(--metin); }
  .sb-ad { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-meta); font-weight: 400; line-height: 1.25; color: var(--metin-3); }
  /* Yedek (scroll() zaman çizelgesi yoksa): sınıfla geçiş */
  .ust.kucuk-baslik .sb-buyuk { opacity: 0; transition: opacity var(--sure-2) linear; }
  .ust.santiyeli .sb-buyuk { transition: opacity var(--sure-2) linear; }
  .ust.kucuk-baslik .sb-yigin { opacity: 1; transform: none; }
  .ust.santiyeli .sb-yigin { transition: opacity var(--sure-2) linear, transform var(--sure-2) var(--egri-cikis); }
}
/* Tercih: scroll() zaman çizelgesi (Chrome 115+): kaydırma ilerlemesiyle birebir bağlı, JS yok */
@supports (animation-timeline: scroll()) {
  @media (max-width: 1023px) {
    .ust::after { animation: ust-cizgi linear both; animation-timeline: scroll(root block); animation-range: 0px 24px; transition: none; }
    html[data-sayfa-baslik] .ust.santiyeli .sb-buyuk { animation: sb-sol linear both; animation-timeline: scroll(root block); animation-range: 24px 56px; transition: none; }
    html[data-sayfa-baslik] .ust.santiyeli .sb-yigin { animation: sb-gel linear both; animation-timeline: scroll(root block); animation-range: 24px 56px; transition: none; }
    html[data-sayfa-baslik] .ust.kucuk-baslik .sb-buyuk { opacity: initial; }
  }
}
@keyframes ust-cizgi { to { opacity: 1; } }
@keyframes sb-sol { to { opacity: 0; } }
@keyframes sb-gel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Sayfa başlığı yoksa (Bugün gibi) yığın hiç görünmez */
html:not([data-sayfa-baslik]) .santiye-btn .sb-yigin { display: none !important; }

/* ------------------------------------------------------------------ GÖRÜNÜM: hareket tercihi önizlemesi */
.hareket-onizleme { display: block; position: relative; width: 100%; height: 2.25rem; border-radius: .4rem; border: 1px solid var(--cizgi); background: var(--yuzey-2); overflow: hidden; }
.hareket-onizleme::before, .hareket-onizleme::after { content: ""; position: absolute; top: 50%; height: .5rem; margin-top: -.25rem; border-radius: 2px; background: var(--metin); }
.hareket-onizleme.tam::before { left: 14%; width: 28%; opacity: .25; }
.hareket-onizleme.tam::after { left: 34%; width: 28%; opacity: .6; transform: translateX(32%); }
.hareket-onizleme.az::before { display: none; }
.hareket-onizleme.az::after { left: 36%; width: 28%; }
.secenek-ipucu { grid-column: 1 / -1; margin: 0; font-size: var(--t-etiket); color: var(--metin-3); }

/* ------------------------------------------------------------------ GİRİŞ */
.giris-ust .logo-isaret { transform-origin: 50% 100%; }