/* ============================================================================
   Pos Noktası Web Uygulaması — KABUK katmanı
   ----------------------------------------------------------------------------
   🔴 SINIR (bozmayın):
     • design-system.css  = PAYLAŞILAN tasarım sistemi (token'lar + card/btn/field/
       table/badge/alert/m-list …). Yönetim paneliyle TEK KAYNAK, buradan Link'lenir.
     • pospoint.css       = YALNIZ bu uygulamanın kabuğu (üst bar, içerik kolonu,
       alt sekme çubuğu, FAB). Panelde karşılığı yoktur, oraya sızdırılmaz.
   Paylaşılan bir bileşen gerekiyorsa design-system.css'e yazılır; oraya yazılan her
   şey panelin 26 sayfasını da etkiler → regresyon şarttır.

   Tasarım kararı (kullanıcı 2026-07-20): MOBİL ÖNCELİKLİ.
     telefon    → tek kolon, dokunma hedefleri büyük, altta sekme çubuğu (Faz A)
     masaüstü   → max-width 960px ORTALANMIŞ kolon + üstte yatay sekme (sidebar DEĞİL)
   ============================================================================ */

/* ── Kabuk iskeleti ──────────────────────────────────────────────────────── */
.pp-shell {
  min-height: 100dvh;            /* 100vh DEĞİL: mobil tarayıcı adres çubuğu 100vh'yi taşırır */
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── Üst bar ─────────────────────────────────────────────────────────────── */
.pp-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));   /* çentikli ekranlarda başlık çentiğin altında kalsın */
  box-shadow: var(--shadow-xs);
}
.pp-topbar__home { display: block; flex: none; line-height: 0; }
.pp-topbar__logo { height: 26px; display: block; }
.pp-topbar__title {
  font-size: var(--text-md);
  font-weight: 700;
  flex: 1;
  min-width: 0;                   /* uzun başlık taşırmasın, kırpılsın */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Çıkış — üst barın koyu zemininde okunur, ama birincil eylem gibi durmayan hayalet buton.
   flex:none + white-space:nowrap: dar telefonda başlık kırpılır, buton KIRPILMAZ. */
.pp-topbar__logout { flex: none; margin: 0; }
.pp-topbar__btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
}
.pp-topbar__btn:hover { background: rgba(255,255,255,.12); }
.pp-topbar__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Ortam rozeti — üst barda ve giriş ekranında AYNI görünsün diye tek sınıf
   (eski .pp-topbar__badge yerine; iki yerde iki kopya tutulmuyor). Prod'da hiç çizilmez. */
.pp-badge-env {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F59E0B;
  color: #3A2A00;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  flex: none;
}

/* ── Zil (okunmamış bildirim rozeti) ─────────────────────────────────────── */
.pp-topbar__bell {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;      /* dokunma hedefi — @media(pointer:coarse) altında da yeterli */
  color: #fff;
  border-radius: var(--r);
}
.pp-topbar__bell svg { width: 21px; height: 21px; display: block; }
.pp-topbar__bell:hover { background: rgba(255,255,255,.12); }
.pp-topbar__bell:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pp-topbar__bell-count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* ── Gezinme: TEK bileşen, iki görünüm ───────────────────────────────────── */
/* Masaüstü (varsayılan): üst barın altında akışta duran yatay sekme çubuğu.
   Telefon (≤767px): ekranın altına sabitlenmiş sekme çubuğu. Tasarım kararı 2026-07-20. */
.pp-nav {
  display: flex;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.pp-nav__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 8px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.pp-nav__item--active { color: var(--primary); border-bottom-color: var(--accent); }
.pp-nav__item:hover { color: var(--primary); }
.pp-nav__icon { display: inline-flex; }
.pp-nav__icon svg { width: 18px; height: 18px; display: block; }

@media (min-width: 768px) {
  /* Masaüstünde sekmeler de içerik kolonuyla aynı genişlikte ortalanır. */
  .pp-nav { max-width: 960px; margin: 0 auto; width: 100%; border-radius: 0 0 var(--r) var(--r); }
  .pp-nav__item { flex: 0 0 auto; padding: 12px 22px; }
}

@media (max-width: 767px) {
  .pp-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    border-bottom: 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(var(--primary-rgb), .07);
    padding-bottom: env(safe-area-inset-bottom);   /* iPhone home indicator'ın altında kalmasın */
  }
  .pp-nav__item { flex-direction: column; gap: 3px; padding: 8px 4px 6px; font-size: var(--text-xs); }
  .pp-nav__item--active { border-bottom-color: transparent; }
  .pp-nav__icon svg { width: 22px; height: 22px; }
  /* İçerik sabit çubuğun ALTINDA kalmasın — son kart erişilemez olurdu. */
  .pp-shell .pp-main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* Bildirim de çubuğun üstünde dursun. */
  .pp-toast-wrap { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ── Filtre çipleri (durum süzgeci) ──────────────────────────────────────── */
/* design-system'deki .chip'ten AYRI: orada dekoratif bir ::before noktası var ve seçili/seçilmemiş
   durumu yok. Paylaşılan dosyaya dokunmak panelin 26 sayfasını etkilerdi (M20 R-10) → kabukta duruyor. */
.pp-chips {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;               /* dar telefonda çipler kaydırılabilir, KIRPILMAZ */
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.pp-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.pp-chip:hover { border-color: var(--primary-3); color: var(--primary); }
.pp-chip--active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pp-chip__n { font-weight: 800; opacity: .85; }

/* ── Fiş görseli (R-02) ──────────────────────────────────────────────────── */
.pp-receipt {
  display: block;
  margin: 0 auto;
  /* width:100% BİLEREK YOK: küçük görseli gererek bulanıklaştırıyordu (ölçüldü). Gerçek fiş
     fotoğrafı zaten karttan geniştir ve max-width ile sığar; küçük görsel kendi boyutunda kalır. */
  max-width: 100%;
  height: auto;                   /* oran korunur; uzun fiş dikey uzar, taşmaz */
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-2);
}
/* Form önizlemesi: seçilen fişin DOĞRULANMASI için yeterli, sayfayı ele geçirmeyecek boyda.
   (Gönderim öncesi 2000px'lik görseli tam boy çizmek formu metrelerce uzatıyordu — ölçüldü.) */
.pp-receipt--thumb { max-height: 240px; width: auto; object-fit: contain; }

/* ── İçerik kolonu ───────────────────────────────────────────────────────── */
.pp-main {
  flex: 1;
  width: 100%;
  max-width: 960px;               /* masaüstünde ortalanmış kolon */
  margin: 0 auto;
  padding: var(--s-5) var(--s-4);
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  /* 🔴 MOBİL EMNİYET SÜBABI: bölünemez uzun dizeler (IBAN, referans no, istek kimliği, e-posta)
     telefonda sayfayı YATAY TAŞIRIR ve taşan içerik ekran dışında kalır — ölçüldü: /Error sayfasındaki
     60 karakterlik istek kimliği 430px'te üst bardaki ortam rozetini ekran dışına itiyordu.
     `break-word` yalnız BAŞKA türlü sığmayan sözcüğü böler; normal metnin sarması değişmez. */
  overflow-wrap: break-word;
}

/* ── Bağlantı olarak çizilen bileşenler ──────────────────────────────────── */
/* design-system.css'te GENEL bir `a` kuralı YOKTUR (bileşen bileşen stil verir). Bu uygulamada
   liste satırı, çip, sekme ve hızlı eylem kartı birer <a>; kendi kuralları olmadan tarayıcının
   varsayılanı devreye giriyor ve HER SATIR ALTI ÇİZİLİ + mavi çıkıyordu (ekran görüntüsüyle görüldü).
   🔴 Kural `.pp-shell`/`.pp-auth` altına kapatıldı: paylaşılan dosyaya dokunmadan, panel etkilenmeden. */
.pp-shell a.m-list__item,
.pp-shell a.pp-chip,
.pp-shell a.pp-nav__item,
.pp-shell a.card--hover { text-decoration: none; }

.pp-shell a.m-list__item { color: inherit; }
.pp-shell a.m-list__item:hover { background: var(--bg-2); }
.pp-shell a.card--hover:hover { border-color: var(--primary-3); }

/* Metin bağlantıları (ör. "Tümünü gör →") altı çizili DEĞİL, ama odakta görünür kalmalı. */
.pp-shell .pp-main a:focus-visible,
.pp-auth a:focus-visible { outline: 2px solid var(--primary-3); outline-offset: 2px; }

/* ── Menü satırları (Faz D: profil + rapor hub) ──────────────────────────── */
/* Menü için AYRI bir bileşen üretilmedi: satır yapısı listelerdekinin aynısı (.m-list). Tek eksik,
   paylaşılan dosyada olmayan iki ayrıntı — ikon boyutu ve sağdaki chevron. İkisi de kabukta duruyor. */
.pp-shell .m-list__item-icon svg { width: 20px; height: 20px; display: block; }
.pp-chev {
  flex: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

/* ── Profil avatarı ──────────────────────────────────────────────────────── */
.pp-avatar {
  width: 72px; height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 900;
}

/* ── Anahtar (bildirim tercihleri) ───────────────────────────────────────── */
/* design-system'deki .switch bir GÖRSELDİR (span). Burada gerçek bir <button>'a giydiriliyor ki
   JS olmadan da çalışsın (form gönderir) ve klavyeyle odaklanılabilsin. Tarayıcının varsayılan
   buton kenarlığı/dolgusu anahtarı bozacağı için sıfırlanır — paylaşılan dosyaya dokunulmadan. */
.pp-shell button.switch {
  appearance: none;
  border: 0;
  padding: 0;
  flex: none;
}
.pp-shell button.switch:focus-visible { outline: 2px solid var(--primary-3); outline-offset: 2px; }

/* ── Günlük hacim çubuk grafiği (saf CSS — JS/kütüphane YOK) ─────────────── */
/* 🔴 Sarmalayıcı YATAY KAYDIRILIR: 3 aylık dönemde 60+ sütun olur; sabit genişliğe sığdırmaya
   çalışmak çubukları saç teline çevirir, taşırmak ise telefonda içeriği ekran dışında bırakır
   (M20 R-10 kırpılma kuralı). Kaydırma alanı klavyeyle de gezilebilir (sayfa tabindex verir). */
.pp-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  -webkit-overflow-scrolling: touch;
}
.pp-bars:focus-visible { outline: 2px solid var(--primary-3); outline-offset: 2px; }
.pp-bars__item {
  flex: none;
  width: 46px;                    /* her sütun aynı genişlikte → çubuk aralığı tüm günlerde eşit */
  text-align: center;
}
.pp-bars__val {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;        /* büyük tutar sütunu genişletmesin, kırpılsın (tam değer title'da) */
}
/* Sabit yükseklik: çubuklar ORTAK bir tabandan yükselir. Yükseklik satır içi px'tir ve
   SummaryModel.ChartHeight (140) ile aynı olmak zorundadır. */
.pp-bars__col {
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 4px 0 6px;
}
.pp-bars__bar {
  width: 26px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.pp-bars__lbl { font-size: 10.5px; color: var(--muted); }

/* ── Çıkış onayı (JS'siz açılır blok) ────────────────────────────────────── */
/* <details>/<summary> ile: onay diyaloğu için script gerekmez, JS kapalıyken de çalışır.
   Varsayılan üçgen işareti kaldırılır — özet zaten bir butondur. */
.pp-confirm summary { list-style: none; cursor: pointer; }
.pp-confirm summary::-webkit-details-marker { display: none; }
.pp-confirm__body {
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--danger);
  border-radius: var(--r);
  background: var(--danger-bg);
  font-size: var(--text-sm);
}

/* ── Boş durum ───────────────────────────────────────────────────────────── */
/* Boş listeyi hiç çizmemek "sistem bozuk" izlenimi verir — boşluk açıkça söylenir. */
.pp-empty {
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ── Bildirim (toast) ────────────────────────────────────────────────────── */
/* 🔑 JS YOK: sönümleme CSS animasyonudur → JS kapalı tarayıcıda da mesaj görünür ve
   ileride eklenecek CSP için satır içi script borcu birikmez (M20 kapsam dışı notu).
   ⚠️ Faz B'de alt sekme çubuğu geldiğinde `bottom` değeri onun üstüne alınacak. */
/* 🔴 SARMALAYICI ŞART: iki bildirim (başarı + hata) aynı anda çıkabilir. İkisini de tek tek
   `position:fixed; bottom:16px` yapmak onları ÜST ÜSTE bindiriyordu — ölçüldü, alttaki hiç
   görünmüyordu. Konum bir kez sarmalayıcıda kurulur, mesajlar içinde ALT ALTA dizilir. */
.pp-toast-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  pointer-events: none;           /* altındaki içerik tıklanabilir kalsın */
}
.pp-toast {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  overflow-wrap: break-word;      /* uzun referans/IBAN içeren mesaj telefonu taşırmasın */
}
.pp-toast--ok {
  background: var(--success);
  color: #fff;
  /* BAŞARI mesajı 6 sn sonra solar (okundu sayılır, ekranı kapatmaz). */
  animation: pp-toast-out .4s ease 6s forwards;
}
.pp-toast--err {
  background: var(--danger);
  color: #fff;
  /* 🔴 HATA mesajı SOLMAZ — kullanıcı bir işlemin neden başarısız olduğunu kaçırmamalı. */
}
@keyframes pp-toast-out {
  to { opacity: 0; visibility: hidden; }
}
/* Hareketi azalt tercihi: solma anında olur, kayıp bilgi yok (mesaj zaten geçici). */
@media (prefers-reduced-motion: reduce) {
  .pp-toast--ok { animation-duration: .01s; }
}

/* ── Alt bilgi ───────────────────────────────────────────────────────────── */
.pp-footer {
  padding: var(--s-4) var(--s-4);
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
}
.pp-footer b { color: var(--text-2); }

/* ── Giriş/şifre ekranları (kimlik kabuğu) ───────────────────────────────── */
.pp-auth {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.pp-auth__col { width: 100%; max-width: 400px; }
.pp-auth__head { text-align: center; margin-bottom: 24px; }
.pp-auth__head img { height: 44px; }

/* ── Dar telefon (≤480px): tipografi ve iç boşluk ölçeklenir ─────────────── */
@media (max-width: 480px) {
  .pp-main { padding: var(--s-4) 12px; }
  .pp-topbar { padding-left: 12px; padding-right: 12px; }
  .pp-topbar__logo { height: 22px; }
}

/* ── Dokunmatik dokunma hedefleri: artık PAYLAŞILAN dosyada ──────────────── */
/* 🔁 M20 Faz E: buradaki `@media (pointer: coarse)` bloğu design-system.css'e TAŞINDI ve orada
   `.btn`/`.input`/`.select`/`.textarea`/`.pagination__btn`/`.check` için genel kural oldu — yani
   yönetim paneli de kapsandı. Kopyayı burada tutmak, ileride eşiğin bir dosyada değişip diğerinde
   kalması demekti. Bu uygulamaya ÖZEL bir dokunma kuralı gerekirse buraya yazılır. */