/* Takip — telefon arayüzü.
   Mobil öncelikli. Renkler mobil önizlemedeki paletle aynı:
   seri hue'su renk körlüğü ve kontrast doğrulayıcısından geçirildi. */

:root {
  color-scheme: light;
  --plane:      #EDF0F3;
  --card:       #FFFFFF;
  --card-2:     #F4F6F8;
  --ink:        #111820;
  --ink-2:      #56636F;
  --ink-3:      #8A95A1;
  --line:       #D6DCE3;
  --line-soft:  #E6EAEF;

  --series:     #00897B;
  --series-dim: #B9DFDA;
  --series-ink: #00695F;

  --good:       #0ca30c;
  --warning:    #fab219;
  --critical:   #d03b3b;
  --critical-bg:#FBE9E9;
  --good-bg:    #E4F4E4;
  --warning-bg: #FCF2DC;
  --warn-ink:   #8a6008;

  --grid:       #E9EDF1;
  --shadow:     0 1px 2px rgba(17,24,32,.07), 0 6px 20px rgba(17,24,32,.06);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --tabh: 58px;
  --tab-bosluk: 14px;                 /* çubuğun ekran kenarlarına uzaklığı */

  /* Cam çubuk. Yarı saydam zemin + arka planı bulanıklaştırma + üstte ince
     ışık çizgisi: cam etkisini veren üçlü bu. Renkler paletten türetiliyor
     ki iki temada da tutarlı kalsın. */
  --cam:        color-mix(in srgb, var(--card) 58%, transparent);
  --cam-cizgi:  rgba(255, 255, 255, .72);
  --cam-isik:   rgba(255, 255, 255, .60);
  --cam-golge:  0 10px 30px rgba(17, 24, 32, .16), 0 2px 8px rgba(17, 24, 32, .08);
  --cam-hap:    color-mix(in srgb, var(--series) 20%, transparent);
}

/* Koyu palet. Medya sorgusu yerine <html data-theme="dark"> ile açılıyor:
   "otomatik" kipinde bu bayrağı JS, telefonun temasını dinleyerek koyuyor
   (app.js::applyTheme). Böylece palet tek yerde duruyor — medya sorgusu da
   kalsaydı aynı 20 satırı iki kez sürdürmek gerekirdi. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:      #0B0F14;
  --card:       #19212A;
  --card-2:     #202A34;
  --ink:        #E6EBF1;
  --ink-2:      #99A6B4;
  --ink-3:      #6C7885;
  --line:       #2B3641;
  --line-soft:  #232E38;
  --series:     #2FA894;
  --series-dim: #1E3B39;
  --series-ink: #6FD0BE;
  --critical-bg:#331B1B;
  --good-bg:    #152E15;
  --warning-bg: #33290F;
  --warn-ink:   #f0c159;
  --cam:        color-mix(in srgb, var(--card) 55%, transparent);
  --cam-cizgi:  rgba(255, 255, 255, .10);
  --cam-isik:   rgba(255, 255, 255, .09);
  --cam-golge:  0 12px 34px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
  --cam-hap:    color-mix(in srgb, var(--series) 30%, transparent);
  --grid:       #232D37;
  --shadow:     0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--plane);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

.hidden { display: none !important; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }

/* ------------------------------------------------------------- giriş */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}
.login-inner { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }

.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.logo {
  width: 60px; height: 60px; border-radius: 17px;
  background: var(--series); color: #fff;
  display: grid; place-items: center;
  font-size: 29px; font-weight: 700;
}
.brand-name { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.brand-sub { font-size: 13.5px; color: var(--ink-3); }

.stack { display: flex; flex-direction: column; gap: 11px; }
.lbl { font-size: 13px; color: var(--ink-2); font-weight: 550; }

.input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px 15px;
  font-size: 16px;           /* 16px altı iOS'ta sayfayı yakınlaştırıyor */
}
.input::placeholder { color: var(--ink-3); }
.code-input {
  text-align: center;
  font-size: 27px;
  letter-spacing: .38em;
  font-variant-numeric: tabular-nums;
  padding: 14px 10px;
}

.btn {
  background: var(--series);
  color: #fff;
  border-radius: 11px;
  padding: 14px;
  font-size: 16px;
  font-weight: 620;
  text-align: center;
}
.btn:active { filter: brightness(.92); }
.btn[disabled] { opacity: .55; }
.btn.ghost { background: transparent; color: var(--series-ink); border: 1px solid var(--line); }
/* Yıkıcı eylem birincil eylem gibi görünmemeli: dolu yeşil düğme
   "yap bunu" der. Silme, arayan bulsun diye durur. */
.btn.danger {
  background: transparent; color: var(--critical);
  border: 1px solid color-mix(in srgb, var(--critical) 40%, transparent);
  font-weight: 550;
}

.hint { font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 0; line-height: 1.45; }
.error {
  background: var(--critical-bg); color: var(--critical);
  border-radius: 10px; padding: 11px 13px;
  font-size: 14px; margin: 0;
}

/* --------------------------------------------------------- uygulama */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Hane adı üst çubuktan menüye taşındı: dönem seçici günde onlarca kez
   kullanılıyor, hane adı hiç. Sık kullanılan sola, büyük hedefe. */
.topbar { justify-content: space-between; }
/* margin-left:auto şart: alt ekranlarda dönem düğmesi gizleniyor ve
   space-between tek çocuğu sola alıyor. */
.topbar-r { display: flex; gap: 8px; margin-left: auto; }
.donem { font-size: 14px; padding: 8px 13px; display: flex; align-items: center; gap: 6px; }
.donem .ok { color: var(--ink-3); font-size: 11px; }
.period {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 12px;
  font-size: 13px; font-weight: 570; color: var(--ink);
  white-space: nowrap;
}

.view {
  flex: 1;
  padding: 14px 16px
           calc(var(--tabh) + var(--tab-bosluk) + 22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}

/* ------------------------------------------------------------ tablar */

/* Yüzen cam çubuk. Ekranın altına yapışmıyor; kenarlardan ve alttan
   --tab-bosluk kadar açıkta duruyor, arkasındaki içerik bulanık geçiyor. */
.tabs {
  position: fixed; z-index: 30;
  left: var(--tab-bosluk); right: var(--tab-bosluk);
  bottom: calc(var(--tab-bosluk) + env(safe-area-inset-bottom));
  max-width: 520px; margin-inline: auto;   /* geniş ekranda gereksiz uzamasın */

  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 26px;
  background: var(--cam);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--cam-cizgi);
  box-shadow: var(--cam-golge), inset 0 1px 0 var(--cam-isik);
  overflow: hidden;
}

/* Bulanıklık desteklenmiyorsa (eski WebView) saydamlık okunaksız kalır;
   o durumda düz zemine düşüyoruz. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabs { background: var(--card); }
}

/* Seçili sekmenin altındaki kayan hap. Genişliği tam bir sütun (%25),
   bu yüzden translateX(%100) tam bir sütun kaydırıyor; sıra numarasını
   app.js::setTabIndicator doğrudan `transform` olarak yazıyor.
   Kayma animasyonunu buradaki transition yapıyor. */
.tab-glow {
  position: absolute; top: 0; bottom: 0; left: 0; width: 25%;
  transform: translateX(0);
  transition: transform .44s cubic-bezier(.34, 1.32, .48, 1);
  pointer-events: none;
}
.tab-glow::after {
  content: ""; position: absolute; inset: 7px 8px;
  border-radius: 999px;
  background: var(--cam-hap);
  box-shadow: inset 0 1px 0 var(--cam-isik);
}

.tab {
  position: relative; z-index: 1;                /* hapın üstünde kalsın */
  height: var(--tabh);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--ink-3);
  transition: color .25s ease, transform .18s ease;
}
.tab .ti {
  font-size: 19px; line-height: 1;
  transition: transform .34s cubic-bezier(.34, 1.32, .48, 1);
}
.tab .tl { font-size: 10.5px; font-weight: 560; }
.tab.is-on { color: var(--series-ink); }
.tab.is-on .ti { transform: scale(1.09); }
.tab:active { transform: scale(.93); }

@media (prefers-reduced-motion: reduce) {
  .tab-glow, .tab, .tab .ti { transition: none; }
}

/* -------------------------------------------------------------- kart */
.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 15px 16px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 11px;
}
.card-title {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--mono);
}

.hero { font-size: 33px; font-weight: 660; letter-spacing: -.028em; line-height: 1.04; }
.delta { font-size: 13px; color: var(--ink-2); display: flex; gap: 7px; flex-wrap: wrap; }
.delta .up { color: var(--critical); font-weight: 620; }
.delta .dn { color: var(--good); font-weight: 620; }

.quad { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.mini {
  background: var(--card-2); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.mini .k { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); letter-spacing: .05em; }
.mini .v { font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums; }
.mini .v.neg { color: var(--critical); }

/* ================================================== DURUM EKRANI KATMANLARI

   Ekranın dört katmanı GÖRSEL OLARAK ayrışmak zorunda. Hepsini aynı
   `.card` çerçevesine koymak, hiyerarşi kurmamakla aynı şey — 11 kart
   üst üste dizildiğinde göz hiçbirini seçemiyordu.

     kahraman  → dolu zemin, en büyük punto      (bakılan tek rakam)
     bakiye    → ince satır, çerçevesiz          (ikincil, farklı cinsten)
     uyarı     → renkli kenar                    (yalnızca sorun varken)
     katlı     → başlık + ayraç, kart yok        (arandığında bulunur)
   ------------------------------------------------------------------- */

/* -------------------------------------------------------- kahraman */
.kahraman {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 16px 17px 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.kahraman-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kahraman-etiket {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--mono);
}
/* Gider ARTIŞI kötü: yukarı ok kırmızı. Renk yönü veriyi değil
   kullanıcının çıkarını izliyor. */
.trend {
  font-size: 12.5px; font-weight: 640; font-variant-numeric: tabular-nums;
  border-radius: 999px; padding: 3px 9px; flex: none;
}
.trend.up { color: var(--critical); background: var(--critical-bg); }
.trend.dn { color: var(--good);     background: var(--good-bg); }

.kahraman-tutar {
  font-size: 40px; font-weight: 680; letter-spacing: -.032em; line-height: 1.02;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 0;
}
.kahraman-kiyas { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kahraman-kiyas.sessiz { color: var(--ink-3); }

/* Dört küçük rakam kahramanın İÇİNDE: ayrı kart olsalardı ikinci bir
   "bak buraya" noktası açar ve tek büyük rakamın anlamını dağıtırlardı. */
/* auto-fit KULLANMA: 375 px'de üç sütun üretip dördüncü rakamı yalnız
   bırakıyor ve yanında iki boş hücre kalıyordu. Dört rakamın telefonda
   doğru düzeni 2x2; sütun sayısı sabit olmak zorunda. */
.kahraman-izgara {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; margin-top: 12px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px; overflow: hidden;
}
.kahraman-izgara .ist {
  background: var(--card-2); padding: 9px 10px;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; min-width: 0;
}
.kahraman-izgara .ist .k {
  font-size: 10px; color: var(--ink-3); font-family: var(--mono);
  letter-spacing: .04em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.kahraman-izgara .ist .v {
  font-size: 14.5px; font-weight: 620; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kahraman-izgara .ist .v.neg { color: var(--critical); }
.kahraman-izgara .ist.tiklanir { cursor: pointer; }
.kahraman-izgara .ist.tiklanir:active { background: var(--card); }
@media (min-width: 520px) {
  .kahraman-izgara { grid-template-columns: repeat(4, 1fr); }
}

.kahraman-dip {
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-2);
}
.kahraman-dip b { font-weight: 620; font-variant-numeric: tabular-nums; }
.kahraman-dip span { color: var(--ink-3); }

/* ---------------------------------------------------- elindeki para */
/* Kart değil satır: bu bir STOK rakamı, kahraman bir AKIŞ rakamı.
   Aynı çerçeveye koymak ikisini aynı cinsten gösterirdi. */
/* Zemin `--card-2` iken açık temada #F4F6F8, sayfa zemini #EDF0F3 —
   aradaki fark göz için yok denecek kadar azdı, satır soluk duruyordu.
   Marka renginden türetilmiş hafif bir tonla ayrıldı: hem belirgin hem
   anlamlı (bu satır PARANIN kendisi). Renk `--series`'ten türediği için
   ilerideki palet değişikliğinde kendiliğinden uyum sağlar. */
.bakiye {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 4px 10px;
  background: color-mix(in srgb, var(--series) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--series) 26%, transparent);
  border-radius: 13px; padding: 11px 13px;
  text-align: left; cursor: pointer; width: 100%;
}
.bakiye:active { background: color-mix(in srgb, var(--series) 17%, var(--card)); }
.bakiye-ad { font-size: 13.5px; color: var(--ink-2); }
.bakiye-tutar { font-size: 17px; font-weight: 640; font-variant-numeric: tabular-nums; }
.bakiye-tutar.neg { color: var(--critical); }
.bakiye-ok { color: var(--ink-3); font-size: 17px; }
.bakiye-alt {
  grid-column: 1 / -1;
  font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --------------------------------------------------- uyarı şeridi */
/* Yalnızca gerçekten bir şey varsa çiziliyor (JS tarafında). Her açılışta
   duran bir uyarı kutusu, gerçekten uyarı olduğu günü de görünmez yapar. */
.uyarilar { display: flex; flex-direction: column; gap: 8px; }
.uyari {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--series);
  border-radius: 12px; padding: 11px 10px 11px 12px;
}
.uyari.kritik {
  border-left-color: var(--critical);
  background: color-mix(in srgb, var(--critical-bg) 55%, var(--card));
}
.uyari-ikon { font-size: 15px; line-height: 1.35; flex: none; }
.uyari-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uyari-metin b { font-size: 13.5px; font-weight: 620; }
.uyari-metin span { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* ------------------------------------------------- katlanır bölümler */
/* Kart çerçevesi YOK: bunlar keşif için, bakılan şey için değil. Çerçeve
   verseydik yine kahramanla aynı ağırlıkta görünürlerdi. */
.katlilar {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-soft);
}
.katli { border-bottom: 1px solid var(--line-soft); }
.katli-bas {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 14px 2px; text-align: left; cursor: pointer;
}
.katli-bas:active { opacity: .6; }
.katli-ok {
  color: var(--ink-3); font-size: 16px; flex: none;
  transition: transform .2s ease-in;
  display: inline-block; width: 12px; text-align: center;
}
.katli.acik .katli-ok { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
/* Ok da pencerelerle aynı süre/eğride dönüyor. */
.katli.acik .katli-ok { transform: rotate(90deg); }
.katli-ad { font-size: 14.5px; font-weight: 600; flex: none; }
/* Özet SOLDA, başlığın yanında. Sağa yaslıyken sabit asistan düğmesinin
   tam altına düşüyordu ve "limit yok" gibi kısa özetler okunamıyordu —
   düğme sağ altta duruyor, oraya konan her şey er geç örtülür. */
.katli-ozet {
  font-size: 12px; color: var(--ink-3);
  flex: 1; min-width: 0; padding-right: 56px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kapalıyken içerik DOM'da duruyor, yalnızca yüksekliği sıfır: açılışta
   boş kutu görünmesin ve yeniden istek atmak gerekmesin.

   `display:none` GEÇİŞ ALMIYOR — bölüm anında açılıp kapanıyordu, yani
   uygulamanın geri kalanında düzelttiğimiz "direkt kapanma" hatasının
   aynısı. Süre ve eğri açılır pencerelerle AYNI (.22s cubic-bezier ile
   açılır, .2s ease-in ile kapanır), ama mekanizma `animation` değil
   `transition`: bu bölüm DOM'dan silinmiyor, dolayısıyla JS zamanlayıcısı
   ve onunla senkron tutulması gereken bir sabit yok. Sabit yoksa
   kayabileceği bir yer de yok.

   Yükseklik `grid-template-rows: 0fr -> 1fr` ile geçiyor; `max-height`
   tahmini bir tavan ister ve içerik ondan uzunsa kırpar. Bu yüzden
   `.katli-ic` bir ızgara ve TEK çocuğu var — birden çok çocuk olsaydı
   her biri ayrı satıra düşer, hile bozulurdu. */
.katli-ic {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;                /* kapalıyken sekme sırasına girmesin */
  transition: grid-template-rows .2s ease-in,
              opacity .2s ease-in,
              visibility 0s linear .2s;
}
.katli.acik .katli-ic {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .22s cubic-bezier(.22, 1, .36, 1),
              opacity .22s cubic-bezier(.22, 1, .36, 1),
              visibility 0s;
}
/* Dolgu da GEÇİŞE dahil, sabit değil. Sabit bırakınca `overflow:hidden`
   içeriği kırpıyor ama dolgu yerinde kalıyordu: ızgara satırı 0fr olsa
   bile gövde 18 px yüksekliğinde duruyordu (2 üst + 16 alt). Dört
   bölümde 72 px'lik ölü şerit — ölçüldü, tahmin değil. */
.katli-govde {
  overflow: hidden; min-height: 0;
  display: flex; flex-direction: column; gap: 11px;
  padding: 0 2px;
  transform: translateY(6px);
  transition: transform .2s ease-in, padding .2s ease-in;
}
.katli.acik .katli-govde {
  padding: 2px 2px 16px;
  transform: none;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              padding .22s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .katli-ok, .compose, .katli-ic, .katli-govde,
  .katli.acik .katli-ok, .katli.acik .katli-ic, .katli.acik .katli-govde {
    transition: none;
  }
}

/* ------------------------------------------------------------ barlar */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar { display: flex; flex-direction: column; gap: 5px; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
.bar-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-vl { color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; font-size: 13px; }
.bar-tr { height: 7px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.bar-fl { height: 100%; background: var(--series); border-radius: 4px; }
.acode {
  font-family: var(--mono); font-size: 10.5px;
  background: var(--series-dim); color: var(--series-ink);
  border-radius: 4px; padding: 0 5px; margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ meter */
.meter { display: flex; flex-direction: column; gap: 5px; }
.meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; align-items: center; }
.meter-tr { height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.meter-fl { height: 100%; border-radius: 4px; background: var(--series); }
.meter-fl.over { background: var(--critical); }
.meter-sub { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 620; padding: 2px 8px; border-radius: 999px;
  background: var(--critical-bg); color: var(--critical); white-space: nowrap;
}

/* ------------------------------------------------------------- liste */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 11px; align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: left; width: 100%;
}
.row:last-child { border-bottom: none; }
.row .em { font-size: 19px; line-height: 1; }
.row .nm { min-width: 0; }
.row .nm .t { font-size: 14.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .nm .s { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .amt { font-variant-numeric: tabular-nums; font-weight: 620; font-size: 14.5px; flex: none; }
.row .amt.inc { color: var(--good); }
/* Aktarma ne gider ne gelir: renksiz ve soluk dursun ki gözde
   harcama listesinin parçası gibi ağırlık yapmasın. */
.amt.akt { color: var(--ink-3); font-weight: 500; }
.row:active { background: var(--card-2); }

/* ------------------------------------------------------------ uyarı */
.alert {
  border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 12px 13px; background: var(--card);
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: var(--shadow);
}
.badge {
  align-self: flex-start; font-family: var(--mono);
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px;
}
.b-crit { background: var(--critical-bg); color: var(--critical); }
.b-warn { background: var(--warning-bg); color: var(--warn-ink); }
.b-info { background: var(--series-dim); color: var(--series-ink); }
.alert .t { font-size: 14px; font-weight: 600; }
.alert .d { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- ekle */
/* Yazma kutusu tek bir yüzey: yazı alanı, okuma satırı ve eylemler aynı
   çerçevenin içinde. Eskiden dört ayrı element alt alta yığılıydı ve
   dördü dört ayrı şey gibi duruyordu — ekranın en çok kullanılan yeri
   en dağınık yeriydi. Örnek çipleri de buradan kaldırıldı; yardım
   sayfasında duruyorlar. */
.compose {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: border-color .16s ease;
}
.compose:focus-within { border-color: var(--series); }
.compose textarea {
  width: 100%; min-height: 66px; resize: none;
  background: transparent; border: 0;
  padding: 14px 14px 4px;
  font-size: 17px; line-height: 1.45;
  color: inherit;
}
.compose textarea:focus { outline: none; }
.compose .okuma { padding: 0 14px; }
.compose-eylem { display: flex; align-items: stretch; gap: 8px; padding: 10px; }
.compose-eylem .btn { flex: 1; padding: 13px; }
/* Fiş ikincil yol: asıl eylem elle kayıt. Kaydet'in yanında ama onunla
   aynı ağırlıkta değil. */
.fis-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 11px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.fis-sec:active { background: var(--card-2); }

/* Mükerrer fiş uyarısı. Kayıt AÇILDI, engellemedik — aynı markete aynı gün
   iki kez gidilebilir. Sarı zemin "dur" değil "bak" diyor; silme düğmesi
   `.btn.danger`, yani yıkıcı eylem birincil düğme gibi görünmüyor. */
.fis-ikiz {
  margin-top: 10px; padding: 10px 11px;
  border-radius: 11px;
  background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
}
.fis-ikiz p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--warn-ink); }
.fis-ikiz .btn { margin-top: 9px; padding: 9px 12px; font-size: 13.5px; }
.examples { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px;
  font-size: 13px; color: var(--ink-2);
}
.chip:active { background: var(--card-2); }

.saved {
  border: 1px solid color-mix(in srgb, var(--series) 35%, transparent);
  background: var(--card); border-radius: 13px; padding: 14px 15px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--shadow);
}
.saved .amt { font-size: 25px; font-weight: 650; letter-spacing: -.02em; }
.saved .meta { font-size: 13px; color: var(--ink-2); }
.saved-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sbtn {
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 13px; font-size: 13.5px; font-weight: 550;
  background: var(--card-2); color: var(--ink);
}
.sbtn.danger { color: var(--critical); }
/* Yazım düzeltme sorusu. Kayıt eylemlerinden (Kategori/Sil) ayrı dursun
   diye kendi zemini var — yoksa dört buton tek grup gibi okunuyor. */
.fixq {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 12px; flex-wrap: wrap;
  background: var(--card-2); border-radius: 11px; padding: 11px 12px;
  font-size: 13.5px; color: var(--ink-2);
}
.fixq b { color: var(--ink); }
.fixq-btns { display: flex; gap: 8px; flex-shrink: 0; }
.fixq .sbtn { background: var(--card); padding: 7px 12px; }
.fixq .sbtn.ghost { background: transparent; color: var(--ink-3); }

/* Alt ekranın geri düğmesi. Sekme çubuğu yerinde duruyor; bu yalnızca
   bir katman geri alır. */
.geri {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 0 10px;
  color: var(--ink-2); font-size: 14.5px; font-weight: 550;
}
.geri:active { color: var(--ink); }

/* Yazma kutusunun altındaki tutar okuması. Kullanıcının metnini
   DEĞİŞTİRMİYORUZ — ne okuduğumuzu gösteriyoruz. Serbest metinde noktayı
   kendimiz koysak "5 ağustos 2026" -> "2.026" olurdu. */
.okuma {
  min-height: 18px; font-size: 13.5px; font-weight: 600;
  color: var(--series-ink); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- asistan */
.menu-bas { padding: 4px 12px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.menu-hane { font-size: 17px; font-weight: 650; }
.menu-alt { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }

/* Ekranda duran balon. Sekme çubuğunun üstünde, sağ altta.
   Geniş ekranda çubuk 520px'e kadar ortalanıyor; balon da onun sağ ucuna
   yapışsın diye right değeri viewport'la birlikte kayıyor. */
.fab {
  position: fixed; z-index: 40;
  right: max(var(--tab-bosluk), calc(50vw - 260px));
  bottom: calc(var(--tabh) + var(--tab-bosluk) * 2 + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 23px; line-height: 1;
  background: var(--cam);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--cam-cizgi);
  box-shadow: var(--cam-golge), inset 0 1px 0 var(--cam-isik);
  transition: transform .18s ease, opacity .18s ease;
}
.fab:active { transform: scale(.92); }

/* Pencere açıkken arkadaki sayfa kaymasın. `overflow: hidden` tek başına
   iOS Safari'de dokunmatik kaydırmayı durdurmuyor — gövde sabitleniyor,
   kaydırma konumunu app.js::govdeKilitle saklayıp geri veriyor. `top`
   değerini de o yazıyor; buraya yazarsak sayfa başa sıçrar. */
body.pencere-kilit {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

/* ---------------------------------------- ortak pencere animasyonu ---
   Uygulamadaki BÜTÜN açılır pencereler (asistan, alt sayfa, bildirim,
   komut paleti) bu dört kare dizisini paylaşır. Tek yerde durmasının
   sebebi kural: hiçbir pencere ekrandan bir anda silinmez, kapanış
   açılışın aynadaki hâlidir.

   `forwards` şart — animasyon bitince son kare korunmazsa pencere
   gizlenmeden önce bir anlığına geri belirir.

   Süreler app.js'teki KAPANIS_MS sabitleriyle AYNI olmak zorunda:
   kısa tutarsan pencere animasyon ortasında kayboluyor, uzun tutarsan
   bitmiş animasyonun üstünde donuk duruyor. */
@keyframes pencere-gir {
  from { transform: translateY(14px) scale(.98); opacity: 0 }
  to   { transform: none; opacity: 1 }
}
@keyframes pencere-cik {
  from { transform: none; opacity: 1 }
  to   { transform: translateY(14px) scale(.98); opacity: 0 }
}
@keyframes fon-gir { from { opacity: 0 } to { opacity: 1 } }
@keyframes fon-cik { from { opacity: 1 } to { opacity: 0 } }

.pop-panel,
.sheet-panel        { animation: pencere-gir .22s cubic-bezier(.22, 1, .36, 1); }
.pop-bg,
.sheet-bg           { animation: fon-gir .2s ease-out; }

.pop.kapaniyor   .pop-panel,
.sheet.kapaniyor .sheet-panel { animation: pencere-cik .2s ease-in forwards; }
.pop.kapaniyor   .pop-bg,
.sheet.kapaniyor .sheet-bg    { animation: fon-cik .2s ease-in forwards; }

@media (prefers-reduced-motion: reduce) {
  .pop-bg, .pop-panel, .sheet-bg, .sheet-panel,
  .pop.kapaniyor   .pop-bg,   .pop.kapaniyor   .pop-panel,
  .sheet.kapaniyor .sheet-bg, .sheet.kapaniyor .sheet-panel { animation: none }
}

/* Açılan pencere. Alttan yükselir ama dibe yapışmaz: sekme çubuğunun
   üstünde durur, kenarları yuvarlak — çubukla aynı dil. */
.pop { position: fixed; inset: 0; z-index: 65; }
.pop-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,.42);
}
.pop-panel {
  position: absolute;
  left: var(--tab-bosluk); right: var(--tab-bosluk);
  bottom: calc(var(--tabh) + var(--tab-bosluk) * 2 + env(safe-area-inset-bottom));
  top: max(52px, 12dvh);
  max-width: 560px; margin-inline: auto;
  display: flex; flex-direction: column;
  background: var(--plane); border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--cam-golge);
}
.pop-tut {
  width: 38px; height: 4px; border-radius: 3px; margin: 8px auto 0;
  background: var(--line);
}
.pop-bas {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.pop-ad { font-weight: 620; font-size: 15px; }

/* Sohbet penceredeki tek kayan alan. min-height:0 olmadan flex çocuğu
   içeriğiyle büyüyüp yazma kutusunu pencerenin dışına itiyor. */
.sohbet {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
}
.sohbet-satir { display: flex; }
.sohbet-satir.ben { justify-content: flex-end; }

/* Mesaj girişleri. Sınıflar YALNIZCA o mesajın ilk çiziminde basılıyor
   (app.js::girisSinifi); yoksa her yeni mesajda bütün geçmiş yeniden
   canlanırdı.

   İki ayrı giriş, çünkü iki ayrı olay:
     yeni    — aşağıdan yükselir: "yeni bir şey geldi"
     degisti — yerinde belirir: yazıyor göstergesi cevaba dönüştü, bu
               yeni bir satır değil aynı satırın yeni hâli */
@keyframes satir-gir {
  from { transform: translateY(8px); opacity: 0 }
  to   { transform: none;            opacity: 1 }
}
@keyframes satir-degis {
  from { transform: scale(.97); opacity: 0 }
  to   { transform: none;       opacity: 1 }
}
.sohbet-satir.yeni    { animation: satir-gir   .24s cubic-bezier(.22, 1, .36, 1); }
.sohbet-satir.degisti { animation: satir-degis .18s ease-out; }

/* Çipler soldan sağa sırayla beliriyor; --s her çipin sıra numarası.
   `backwards` şart: gecikme boyunca çip görünmez kalmalı, yoksa hepsi
   birden belirip sonra tek tek zıplıyor. */
@keyframes cip-gir {
  from { transform: translateY(5px); opacity: 0 }
  to   { transform: none;            opacity: 1 }
}
.oneriler.yeni .oneri,
.oneriler.degisti .oneri,
.ornekler.yeni .chip,
.ornekler.degisti .chip {
  animation: cip-gir .22s ease-out backwards;
  animation-delay: calc(var(--s, 0) * 45ms + 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .sohbet-satir.yeni, .sohbet-satir.degisti,
  .oneriler .oneri, .ornekler .chip { animation: none }
}
/* Cevap balonu ve üstündeki "… olarak anladım" satırı tek yığın.
   Genişlik sınırı yığına taşındı: balonda kalsaydı uzun bir anladım satırı
   balonu sohbet satırının dışına iterdi. */
.balon-yigin {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 84%; min-width: 0;
}
.sohbet-satir.ben .balon-yigin { align-items: flex-end; }
.balon-yigin .balon { max-width: 100%; }

/* Soruyu tamamladığımızda ne anladığımızı söyleyen satır. Cevabın kendisi
   gibi değil, ona bir DİPNOT gibi duruyor — kullanıcı yanlış anladığımızı
   buradan görüp düzeltebilsin. */
.balon-anladim {
  display: flex; align-items: baseline; gap: 5px;
  padding: 0 4px; font-size: 11.5px; line-height: 1.4;
  color: var(--ink-3);
}
.balon-anladim::before { content: "↳"; opacity: .65; }

.balon {
  max-width: 84%; padding: 10px 13px; border-radius: 15px;
  font-size: 14.5px; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--card); border: 1px solid var(--line-soft);
}
.sohbet-satir.ben .balon {
  background: var(--series); color: #fff; border-color: transparent;
  border-bottom-right-radius: 5px;
}
.sohbet-satir.o .balon { border-bottom-left-radius: 5px; }
/* Plan kapısına takılan cevap. Kırmızı değil: bu bir hata değil, kapalı
   bir kapı. */
.balon.kilit { border-color: var(--series); background: var(--card-2); }

/* "Yazıyor" göstergesi. Cevap hazırlanırken duran boş bir "…" yerine üç
   nokta sırayla yükseliyor: karşıda bir şeyin çalıştığı belli oluyor.
   Balonun kendisi cevabın geleceği yerde duruyor, yani metin belirince
   ekran zıplamıyor. */
.balon.yaziyor {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 14px 15px; width: fit-content;
}
.balon.yaziyor i {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
  animation: nokta 1.25s ease-in-out infinite;
}
.balon.yaziyor i:nth-child(2) { animation-delay: .16s; }
.balon.yaziyor i:nth-child(3) { animation-delay: .32s; }
@keyframes nokta {
  0%, 60%, 100% { transform: translateY(0);    opacity: .35 }
  30%           { transform: translateY(-4px); opacity: 1   }
}
@media (prefers-reduced-motion: reduce) {
  .balon.yaziyor i { animation: none; opacity: .55 }
}

/* Karşılama balonunun altındaki örnek sorular. Eskiden ayrı bir "boş
   ekran" bloğuydu; artık sohbetin ilk repliğine iliştirilmiş duruyor.

   TEK SATIR, yana kaydırmalı. Altı uzun cümle sarınca üç satır oluyor ve
   pencerenin yarısını yiyordu. Negatif kenar boşluğu `.sohbet`in yatay
   dolgusunu iptal ediyor: satır panelin kenarına kadar uzanıyor, sağda
   yarım görünen çip devamı olduğunu söylüyor. Kaydırma çubuğu gizli —
   telefonda zaten görünmüyor, geniş ekranda gürültü yapıyordu. */
.ornekler {
  display: flex; gap: 7px;
  margin-inline: -14px;              /* .sohbet padding-inline: 14px */
  padding: 4px 14px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;    /* yatay kaydırma sayfayı sürüklemesin */
}
.ornekler::-webkit-scrollbar { display: none; }
.ornekler .chip {
  flex: 0 0 auto;                    /* daralmasın, alt satıra inmesin */
  white-space: nowrap;
  scroll-snap-align: start;
}

/* "Bunu mu demek istediniz?" seçenekleri. Cevabın altında, dokunulacak
   şeyler olarak duruyor — kullanıcı yazmadan seçebilsin. */
.oneriler { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 2px 4px; }
.oneri {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 550; color: var(--series-ink);
}
/* Basınca hafif küçülme: dokunuşun kaydedildiğini anında söyler.
   Renk değişimi tek başına parmağın altında görünmüyor. */
.oneri, .ornekler .chip { transition: transform .12s ease, background .12s ease; }
.oneri:active, .ornekler .chip:active { transform: scale(.96); }
.oneri:active { background: var(--card-2); }
.oneri.hicbiri { color: var(--ink-3); font-weight: 500; border-style: dashed; }

/* "/" yazınca çıkan komut paleti. Yazma alanının hemen üstünde durur ki
   parmak zaten oradayken listeye ulaşsın. */
/* Komut paleti de bir açılır pencere: aynı kareler, sadece daha kısa —
   yazarken açılıp kapandığı için uzun animasyon gecikme gibi duruyor. */
.komut-palet {
  margin: 0 14px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); max-height: 40dvh; overflow-y: auto;
  animation: pencere-gir .16s cubic-bezier(.22, 1, .36, 1);
}
.komut-palet.kapaniyor { animation: pencere-cik .14s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .komut-palet, .komut-palet.kapaniyor { animation: none }
}
.komut {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 11px 13px; text-align: left; background: none;
  border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.komut:last-child { border-bottom: none; }
.komut:active { background: var(--card-2); }
.komut-ad { font-family: var(--mono); font-size: 13px; color: var(--series-ink); }
.komut-ac { color: var(--ink-3); font-size: 12.5px; }

/* Yazma alanı pencerenin sabit tabanı — sticky değil: pencere zaten
   yükseklik veriyor, kayan tek alan sohbetin kendisi.

   Sohbet uygulamalarının düzeni: hap biçimli dar bir alan + yanında
   yuvarlak gönder düğmesi. Eskiden köşeli kutu ve "Sor" yazılı geniş bir
   düğme vardı, ikisi de dikeyde yer yiyordu. */
.sohbet-yaz {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--plane);
}
.sohbet-yaz input {
  flex: 1; min-width: 0;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 21px;
  padding: 9px 15px;
  /* 16px ALTINA İNME: iOS odaklanınca sayfayı yakınlaştırıyor ve
     kullanıcı elle geri çıkarmak zorunda kalıyor. Alanı daraltmak
     gerekiyorsa yazıdan değil dolgudan kısılır. */
  font-size: 16px; line-height: 1.35;
}
.sohbet-yaz input::placeholder { color: var(--ink-3); }

.sohbet-gonder {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--series); color: #fff;
  transition: transform .12s ease, opacity .12s ease;
}
.sohbet-gonder svg { width: 18px; height: 18px; display: block; }
.sohbet-gonder:active { transform: scale(.9); }
/* Cevap beklenirken sönük ve tıklanamaz (app.js::girdiDurumu). */
.sohbet-gonder[disabled] { opacity: .4; }

/* Dokunulabilir özet kutucuğu: sağdaki "›" işareti dışında sıradan
   kutucuktan ayrılmıyor, çünkü aynı ızgarada duruyorlar. */
.mini.tiklanir { cursor: pointer; text-align: left; }
.card.tiklanir { display: block; width: 100%; text-align: left; cursor: pointer; }
.card.tiklanir:active { background: var(--card-2); }
.mini.tiklanir:active { background: var(--card-2); }
.hero.inc { color: var(--series-ink); }

/* ------------------------------------------------------------ hesaplar */
.hesaplar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.hesap {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 13px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow);
}
.hesap-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hesap-ad { font-size: 15.5px; font-weight: 600; }
.hesap-tutar { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hesap-alt { font-size: 12.5px; color: var(--ink-3); }
.hesap .saved-actions { gap: 6px; }
.hesap .sbtn { padding: 7px 10px; font-size: 12.5px; }
.aralik-form select {
  background: var(--card-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 13px; font-size: 16px; width: 100%;
}

/* ------------------------------------------------------------- borçlar */
/* Borç kırmızı değil: "borcum var" bir hata değil, bir durum. Yön okuyla
   ayrılıyor, renkle değil — kullanıcıyı suçlamayan bir liste. */
.borclar { display: flex; flex-direction: column; gap: 10px; }
.borc {
  background: var(--card); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ink-3);
  border-radius: 13px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow);
}
.borc.alacak { border-left-color: var(--series); }
.borc-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.borc-kisi { font-size: 15.5px; font-weight: 600; }
.borc-tutar { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.borc-alt { font-size: 12.5px; color: var(--ink-3); }
.borc .saved-actions { gap: 6px; }
.borc .sbtn { padding: 7px 10px; font-size: 12.5px; }

/* --------------------------------------------------------- aylık çubuk */
/* Çubuk yüksekliği yüzdeyle veriliyor, o yüzden alanın SABİT yüksekliği
   olmak zorunda. Dokunma hedefi çubuk değil sütunun tamamı — telefonda
   3 piksellik bir çubuğa isabet ettirmek işkence olur. */
.mplot {
  position: relative; display: flex; align-items: flex-end;
  gap: 4px; height: 104px;
}
.mbar {
  flex: 1; height: 100%; display: flex; align-items: flex-end;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.mbar-fl {
  width: 100%; border-radius: 4px 4px 0 0;
  background: var(--series-dim); transition: background .15s;
}
.mbar.sel .mbar-fl { background: var(--series); }
.mbar:active .mbar-fl { background: var(--series); }
.mavg {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--line); pointer-events: none;
}
.mlabels { display: flex; gap: 4px; margin-top: 7px; }
.mlabel {
  flex: 1; min-width: 0; text-align: center;
  font-size: 10.5px; color: var(--ink-3); line-height: 1.25;
}
.mlabel.sel { color: var(--ink); font-weight: 600; }
.mlabel i { display: block; font-style: normal; font-size: 9px; opacity: .7; }
.mfoot {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-size: 12.5px; color: var(--ink-3);
}
.mhint { opacity: .75; }

/* ------------------------------------------------------------ diğer */
.listcard { background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.litem {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line-soft); font-size: 14.5px;
}
.litem:last-child { border-bottom: none; }
.litem .v { color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.litem:active { background: var(--card-2); }
.litem.danger { color: var(--critical); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--series-dim); color: var(--series-ink);
}
.pill.lock { background: var(--card-2); color: var(--ink-3); }

.empty { text-align: center; color: var(--ink-3); font-size: 14px; padding: 34px 20px; line-height: 1.6; }
.skeleton { height: 92px; border-radius: 14px; background: var(--card-2); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none } }

/* ------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabh) + var(--tab-bosluk) + 18px + env(safe-area-inset-bottom));
  /* EN ÜST KATMAN. 60'tı ve asistan penceresinin (65) ALTINDA kalıyordu:
     sohbetten çıkan her bildirim — mikrofon hatası, istek hatası —
     panelin arkasında çiziliyor ve kullanıcı hiçbir şey görmüyordu.
     Bildirim, "az önce şu oldu" demenin tek yolu; bir şeyin arkasında
     kalırsa hiç yazılmamış sayılır. Alt sayfa 70, pencere 65 — 90 ikisini
     de aşıyor. */
  z-index: 90; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--plane);
  border-radius: 11px; padding: 11px 16px;
  font-size: 13.5px; box-shadow: var(--shadow);
  text-align: center;
  animation: toast-gir .18s ease-out;
}
.toast.kapaniyor { animation: toast-cik .18s ease-in forwards; }

/* Bir pencere açıkken bildirim YUKARI çıkıyor. Alttaki yerinde kalsaydı
   asistanın yazma satırını ve alt sayfanın birincil düğmesini örterdi —
   yani tam da kullanıcının o an dokunacağı yeri. `pencere-kilit` gövde
   sınıfı zaten "bir pencere açık" demek, ikinci bir bayrak gerekmiyor. */
body.pencere-kilit .toast {
  top: calc(env(safe-area-inset-top) + 14px);
  bottom: auto;
}

/* Bildirim ortak kareleri KULLANAMIYOR: ortalanması `translateX(-50%)`
   ile, yani transform zaten dolu. `pencere-gir` onu ezip kutuyu sağa
   kaydırırdı. Hareket aynı, sadece ortalama korunuyor. */
@keyframes toast-gir {
  from { transform: translateX(-50%) translateY(10px) scale(.98); opacity: 0 }
  to   { transform: translateX(-50%);                             opacity: 1 }
}
@keyframes toast-cik {
  from { transform: translateX(-50%);                             opacity: 1 }
  to   { transform: translateX(-50%) translateY(10px) scale(.98); opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.kapaniyor { animation: none }
}

/* ------------------------------------------------------------- sheet */
.sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
/* Giriş/çıkış animasyonu "ortak pencere animasyonu" bloğunda; asistan
   penceresiyle aynı kareleri kullanıyor. Buraya ikinci bir tanım yazma. */
.sheet-panel {
  position: relative; width: 100%; max-height: 78dvh;
  background: var(--card); border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft);
  font-weight: 620; font-size: 15.5px;
}
.x { font-size: 17px; color: var(--ink-3); padding: 4px 8px; }
.sheet-body { overflow-y: auto; padding: 8px 12px 18px; display: flex; flex-direction: column; gap: 2px; }
.pick {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 12px; border-radius: 11px;
  font-size: 15px; text-align: left; width: 100%;
}
.pick:active { background: var(--card-2); }
.pick .pe { font-size: 19px; }
.pick .pc { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.note { font-size: 12px; color: var(--ink-3); padding: 10px 14px 0; line-height: 1.5; }
.sheet-ayrac {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 12px 6px;
}
.aralik-form { display: flex; flex-direction: column; gap: 12px; padding: 6px 2px 2px; }
/* `.alan` artık ALT SAYFAYA bağlı değil. Kural eskiden yalnızca
   `.aralik-form` içinde geçerliydi; hata raporu ekranı onu bir kartın
   içinde ilk kez kullanınca etiket `display:block` ile yazının yanına
   düştü. Kalıbı yerinden bağımsız yapmak, ikinci kez aynı tuzağa
   düşmemenin en ucuz yolu. */
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan span { font-size: 12.5px; color: var(--ink-2); }
.aralik-form .hint:empty { display: none; }

/* Çok satırlı metin alanı — `.input` ile aynı dil. Tarayıcının kendi
   `textarea` görünümü (gri çerçeve, köşesiz) formun geri kalanıyla hiç
   uyuşmuyordu. */
.alan textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 13px;
  font-size: 16px;           /* 16px altı iOS'ta sayfayı yakınlaştırıyor */
  resize: vertical;
  min-height: 92px;
}
.alan textarea::placeholder { color: var(--ink-3); }
.alan textarea:focus { outline: none; border-color: var(--series); }

/* --------------------------------------------------------------- takvim */
/* Kendi ay ızgaramız. Eskiden `input type="date"` vardı: yerli seçici
   tanıdık geliyordu ama alt sayfanın içinden açılınca kendi katmanını
   açıyor ve o katman ekrandan taşıyordu — biçimine de karışamıyoruz.
   Bu ızgara alt sayfanın İÇİNDE duruyor, yani taşacak ikinci katman yok. */
.takvim { user-select: none; -webkit-user-select: none; }

.takvim-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 12px;
}
.takvim-ad { font-weight: 620; font-size: 15.5px; }
.takvim-ok {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px; line-height: 1; color: var(--ink-2);
  background: var(--card-2);
  transition: transform .12s ease, opacity .14s ease;
}
.takvim-ok:not(:disabled):active { transform: scale(.88); }
.takvim-ok:disabled { opacity: .28; }

.takvim-gunler {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; padding-bottom: 6px;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); text-align: center;
}

/* Izgara HER AY 6 satır. Değişken satır sayısı alt sayfayı her geçişte
   büyütüp küçültüyordu; sabit yükseklik hem zıplamayı hem kayma
   animasyonunun ortasında boy değişmesini engelliyor. */
.takvim-izgara {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.tg {
  aspect-ratio: 1; min-width: 0;
  display: grid; place-items: center;
  font-size: 14px; border-radius: 11px;
  color: var(--ink); background: transparent;
  transition: transform .12s ease, background .16s ease, color .16s ease;
}
.tg.bos { visibility: hidden; }
.tg:disabled { color: var(--ink-3); opacity: .3; }
.tg:not(:disabled):active { transform: scale(.86); }
.tg.bugun { font-weight: 700; color: var(--series-ink); }
/* Aradaki günler soluk, uçlar dolu. Izgarada boşluk olduğu için kesintisiz
   bir çubuk zaten kurulamıyor; yumuşak çipler daha temiz duruyor. */
.tg.arada { background: var(--series-dim); }
.tg.uc, .tg.secili {
  background: var(--series); color: #fff; font-weight: 640;
}

/* Ay değişince ızgara geldiği yönden kayarak giriyor. */
@keyframes takvim-sol {
  from { transform: translateX(16px); opacity: 0 } to { transform: none; opacity: 1 }
}
@keyframes takvim-sag {
  from { transform: translateX(-16px); opacity: 0 } to { transform: none; opacity: 1 }
}
.takvim-izgara.kay-sol { animation: takvim-sol .19s cubic-bezier(.22, 1, .36, 1); }
.takvim-izgara.kay-sag { animation: takvim-sag .19s cubic-bezier(.22, 1, .36, 1); }

.takvim-ozet {
  margin: 0; padding: 0 2px 2px;
  font-size: 13px; color: var(--ink-2); min-height: 18px;
}
.takvim-ozet.tam { color: var(--ink); font-weight: 560; }

/* Takvim uzun. 667 px'lik bir telefonda ızgara + özet + iki düğme alt
   sayfanın 78dvh'sine sığmıyor ve "Uygula" görünürün ALTINDA kalıyordu:
   kullanıcı aralığı seçiyor, onaylayacak düğmeyi göremiyor.

   Çözüm ekranı büyütmek değil — hangi telefonda yeteceğini kestiremeyiz.
   Eylem satırı gövdenin dibine yapışıyor: takvim altından kayıyor, düğme
   yerinde duruyor. Negatif alt kenar boşluğu `.sheet-body`'nin 18 px'lik
   alt dolgusunu yutuyor, yoksa altında içerik görünen bir şerit kalırdı. */
.takvim-eylem {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 0 18px; margin-bottom: -18px;
  background: var(--card);
}

@media (prefers-reduced-motion: reduce) {
  .takvim-izgara.kay-sol, .takvim-izgara.kay-sag { animation: none }
  .tg, .takvim-ok { transition: none }
}

/* Sesli soru düğmesi. Gönder düğmesiyle aynı boyda ama sönük duruyor:
   ikisi eşit ağırlıkta görünürse hangisinin asıl eylem olduğu kayboluyor. */
.sohbet-mikrofon {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-3); background: transparent;
  transition: transform .12s ease, color .16s ease, background .16s ease;
}
.sohbet-mikrofon svg { width: 20px; height: 20px; }
.sohbet-mikrofon:active { transform: scale(.9); }
/* Dinlerken nabız: kullanıcı mikrofonun AÇIK olduğunu görmeden konuşmuyor,
   ve açık kaldığını fark etmemek daha kötü. */
.sohbet-mikrofon.dinliyor {
  color: #fff; background: var(--series);
  animation: mikrofon-nabiz 1.4s ease-in-out infinite;
}
@keyframes mikrofon-nabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgb(0 137 123 / .45) }
  70%      { box-shadow: 0 0 0 9px rgb(0 137 123 / 0) }
}
@media (prefers-reduced-motion: reduce) {
  .sohbet-mikrofon, .sohbet-mikrofon.dinliyor { animation: none; transition: none }
}


/* Geçmiş sınırı uyarısı — özetin en üstünde, dönem seçicinin hemen altı. */
.card.kirpma {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-color: var(--series);
}
.kirpma-metin { flex: 1; min-width: 180px; font-size: 13.5px; line-height: 1.5; }
.card.kirpma .btn { width: auto; padding: 9px 16px; font-size: 13.5px; }

/* ---------------------------------------------------------------- plan */
.plan-kart {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 15px; margin-bottom: 12px;
}
/* Mevcut kademe vurgulu: kullanıcı üç kartın hangisinde olduğunu
   okumadan görebilmeli. */
.plan-kart.simdiki { border-color: var(--series); }
.plan-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.plan-ad { font-weight: 640; font-size: 16px; }
.plan-fiyat {
  font-size: 22px; font-weight: 680; margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
/* Fiyat henüz belirlenmedi ("XX ₺ / ay"): kesin bir rakam gibi
   durmasın diye soluk. */
.plan-fiyat.belirsiz { color: var(--ink-3); font-weight: 600; }
.plan-ozet { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.plan-liste { display: flex; flex-direction: column; gap: 1px; }
.plan-satir {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 13.5px;
  border-top: 1px solid var(--line-soft);
}
.plan-satir .v { color: var(--ink-2); font-weight: 560; white-space: nowrap; }
.plan-satir.yok { color: var(--ink-3); }
.plan-satir.yok .v { color: var(--ink-3); }

/* ------------------------------------------------------- tema seçici */
.segment {
  display: flex; gap: 6px; padding: 6px;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 14px; box-shadow: var(--shadow);
}
.segment button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 6px; border-radius: 10px; font-size: 13px; font-weight: 560;
  color: var(--ink-2); background: transparent;
}
.segment button .se { font-size: 17px; line-height: 1; }
.segment button:active { background: var(--card-2); }
.segment button.is-on { background: var(--series-dim); color: var(--series-ink); }

/* ---------------------------------------------------------------- yardım */
/* Sheet gövdesi normalde düğme listesi taşıyor; yardım metni tek yer olarak
   okunabilir tipografi istiyor. */
.yardim h4 {
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 640;
  color: var(--ink-1);
}
.yardim h4:first-child { margin-top: 2px; }
.yardim p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.yardim b { color: var(--ink-1); font-weight: 600; }
.yardim .note {
  font-size: 13px;
  color: var(--ink-3);
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.yardim .examples { margin: 6px 0 10px; }
.yardim .chip { cursor: default; }