/* ==========================================================================
   BEF Acco — Bileşen kütüphanesi

   Her bileşen tek bir kök sınıfla başlar (.btn, .card, .table…) ve
   değişkeleri o kökün ardına eklenir (.btn--primary, .card--flush).
   Ham renk/ölçü değeri yazılmaz; tümü tokens.css'ten okunur.
   ========================================================================== */

/* ==========================================================================
   BUTON
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: var(--transition-colors), box-shadow var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0.5px);
  background: var(--bg-active);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--border-focus);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Birincil eylem — sayfada yalnızca bir tane olmalı */
.btn--primary {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--primary:active {
  background: var(--accent-active);
}

/* Yıkıcı eylem */
.btn--danger {
  color: var(--gray-0);
  background: var(--danger-solid);
  border-color: var(--danger-solid);
}

.btn--danger:hover {
  background: var(--danger);
  border-color: var(--danger);
}

.btn--danger:focus-visible {
  box-shadow: var(--ring-danger);
}

/* Kenarlıksız — araç çubukları, tablo satır eylemleri */
.btn--ghost {
  background: transparent;
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--bg-hover);
  border-color: transparent;
}

/* Kenarlıksız ama yıkıcı — silme gibi eylemler için; dolu kırmızı düğme
   kadar bağırmadan niyeti belli eder. */
.btn--danger-text {
  color: var(--danger);
  background: transparent;
  border-color: transparent;
}

.btn--danger-text:hover {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: transparent;
}

.btn--danger-text:focus-visible { box-shadow: var(--ring-danger); }

.btn--subtle {
  color: var(--text-secondary);
  background: var(--bg-sunken);
  border-color: transparent;
}

.btn--subtle:hover {
  color: var(--text);
  background: var(--bg-active);
  border-color: transparent;
}

/* Boyutlar */
.btn--sm {
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  gap: var(--space-1);
}

.btn--lg {
  height: var(--control-height-lg);
  padding: 0 var(--space-5);
  font-size: var(--text-md);
}

/* Yalnızca ikon */
.btn--icon {
  width: var(--control-height);
  padding: 0;
}

.btn--icon.btn--sm { width: var(--control-height-sm); }
.btn--icon.btn--lg { width: var(--control-height-lg); }

.btn--block { width: 100%; }

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--sm svg { width: 14px; height: 14px; }

/* Yükleniyor durumu */
.btn--loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

.btn--loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 600ms linear infinite;
  color: var(--accent-fg);
}

.btn:not(.btn--primary):not(.btn--danger).btn--loading::after {
  color: var(--text);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Bitişik buton grubu */
.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
  margin-left: -1px;
}

.btn-group .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  margin-left: 0;
}

.btn-group .btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.btn-group .btn:hover,
.btn-group .btn:focus-visible {
  z-index: var(--z-base);
}

/* ==========================================================================
   FORM
   ========================================================================== */
/*
 * Alan yerleşimi.
 *
 * Iki sütun: solda etiket, sağda hata mesajı. Kontrol ve ipucu satırı boydan
 * boya kullanır. Hata mesajı etiketin YANINDA duruyor çünkü altına konduğunda
 * açılıp kapandıkça alanı büyütüyor ve aşağıdaki her şeyi kaydırıyordu.
 * Etiket satırı zaten var ve mesaj (12px) etiketten (13px) kısa olduğu için
 * satır yüksekliği değişmiyor — hiç kayma olmuyor.
 *
 * Izgara kullanılabiliyor çünkü kontroller esnek sütunu da kapsıyor; CSS Grid
 * böyle öğeleri `auto` sütunun genişliğini hesaplarken saymaz, yani girdiler
 * etiket sütununu şişirmez.
 */
.field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);

  /* Satırda yanındaki alan daha uzunsa (ör. adres kutusu) bu alan da onun
     boyuna gerilir. Izgarada fazla yükseklik `auto` satırlara dağıtılır ve
     etiket ile girdi aşağı kayardı; satırlar yukarı yaslanıyor. */
  align-content: start;
}

.field > * { grid-column: 1 / -1; }

.field > .label {
  grid-column: 1;
  grid-row: 1;
}

.field > .field-error {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.label--required::after {
  content: "*";
  color: var(--danger-solid);
  font-weight: var(--weight-normal);
}

/* Duruma göre görünen zorunluluk işareti. `label--required` sabit bir yıldız
   içindir; bu, seçime bağlı olarak (ör. gelir henüz tahsil edilmemişse vade
   zorunlu) belirip kaybolur. */
.label__star {
  color: var(--danger-solid);
  font-weight: var(--weight-normal);
}

.input,
.select,
.textarea {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors), box-shadow var(--duration-fast) var(--ease);
  appearance: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-subtle);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ring);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  color: var(--text-muted);
  background-color: var(--bg-sunken);
  cursor: not-allowed;
}

.input[readonly] {
  background-color: var(--bg-sunken);
}

.textarea {
  height: auto;
  min-height: 88px;
  padding: var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}

/* Açılır liste oku */
.select {
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  cursor: pointer;
}

/* ==========================================================================
   SEÇİM KUTUSU (combo)

   Yerli `<select>` üstüne kurulan aşamalı iyileştirme.

   NEDEN: yerli seçicinin AÇILAN LİSTESİ işletim sisteminin, bizim değil —
   biçimlenemiyor, arama yok, uzun listede gezinmek zor. Kutunun kendisi
   zaten `.select` ile bizimdi; eksik olan liste tarafıydı.

   NASIL: `<select>` DOM'da kalır ve formu o gönderir; görünmez ama
   odaklanabilir (gizlemek yerine saydam), böylece `label[for]`, `required`,
   sihirbaz doğrulaması ve `focusInvalid` olduğu gibi çalışır. Üstünde bir
   düğme durur; liste `<body>` altında SABİT konumla çizilir — kart ve modal
   `overflow: hidden` taşıdığı için başka türlü kırpılırdı (bu oturumda
   ipucu balonunda birebir yaşandı).

   JavaScript kapalıysa hiçbir şey olmaz: yerli seçici görünür ve çalışır.
   ========================================================================== */
.combo {
  position: relative;
}

/* Yerli seçici: görünmez ama DOM'da, odaklanabilir ve YER KAPLIYOR.
 *
 * `display: none` olsaydı `label[for]` tıklaması ve odak yönlendirmesi
 * çalışmazdı. Konumu da mutlak DEĞİL — ve asıl mesele bu: bir seçim
 * kutusunun genişliğini en uzun seçeneğine göre ayarlamayı tarayıcı zaten
 * yapıyor. Yerli öğe akıştan çıkarılınca bu ölçü kayboluyordu ve kutu
 * yalnızca SEÇİLİ seçenek kadar genişti; başka bir seçenek seçilince
 * kutunun boyu değişiyor, uzun seçenekler de kesiliyordu.
 *
 * Şimdi düzeni yerli öğe kuruyor, görünen düğme onun üstüne biniyor. Ölçüyü
 * JavaScript'te hesaplamaya gerek yok — hesaplasaydık yazı tipi yüklenmeden
 * önceki ölçüm yanlış çıkardı. */
.combo__native {
  opacity: 0;
  pointer-events: none;
}

/* Görünen denetim. `.select` sınıfını da taşır: kutu biçimi, ok çizimi ve
   hata/odak durumları oradan gelir, ikinci kez tarif edilmez. */
.combo__button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  text-align: left;
}

.combo__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Boş seçim (ör. "Seçin…") ipucu metni gibi soluk durur — yerli seçicideki
   `placeholder` hissi. */
.combo__button[data-empty] .combo__value {
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Açılan liste — <body> altında, sabit konumlu
   -------------------------------------------------------------------------- */
.combo-pop {
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  max-height: 300px;
  padding: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.combo-pop__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-1);
}

.combo-pop__search svg {
  color: var(--text-muted);
}

.combo-pop__search input {
  flex: 1;
  min-width: 0;
  height: 24px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--text);
}

.combo-pop__list {
  flex: 1;
  overflow-y: auto;
}

.combo-group {
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.combo-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  text-align: left;
  color: var(--text);
  border-radius: var(--radius-xs);
  cursor: pointer;
}

/* TEK vurgu. Fare bir satıra gelince klavye seçimi de oraya taşınıyor
   (assets/js/app.js), yani "üzerinde olunan" ile "Enter'la açılacak olan"
   hep aynı satır. Ayrı bir `:hover` zemini olsaydı iki satır birden
   gölgelenir ve hangisinin seçileceği belirsiz kalırdı — gri-100 ile
   gri-150 arasındaki fark zaten göz kararı ayırt edilemiyordu.

   SEÇİLİ olan satır zemin değil, tik işareti ve kalın yazıyla belli olur;
   iki ayrı şey iki ayrı işaretle anlatılıyor. */
.combo-opt.is-active { background: var(--bg-active); }

.combo-opt__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Seçili olan işaretlenir; işaret yeri her satırda ayrılır ki seçim
   değişince metin yana kaymasın. */
.combo-opt__tick {
  width: 15px;
  flex-shrink: 0;
  color: var(--text);
  opacity: 0;
}

.combo-opt[aria-selected="true"] .combo-opt__tick { opacity: 1; }
.combo-opt[aria-selected="true"] .combo-opt__label { font-weight: var(--weight-medium); }

.combo-opt[data-disabled] {
  color: var(--text-subtle);
  cursor: not-allowed;
}

.combo-pop__empty {
  padding: var(--space-4) var(--space-2);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Para girişi — rakamlar hizalı, sağa yaslı */
.input--amount {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-medium);
}

.input--sm { height: var(--control-height-sm); font-size: var(--text-sm); }
.input--lg { height: var(--control-height-lg); font-size: var(--text-md); }

/* ---- Tarayıcının kendi çizdiği parçalar --------------------------------
   Tarih, sayı ve arama alanları native bir düğme/ikon taşır. Bunlar bizim
   ikon setimizden değil ve tarayıcıdan tarayıcıya değişir; sonuç, aynı
   formda iki farklı görsel dil olur. Aşağıda hepsi temayla eşleniyor. */

/* Tarih: native takvim glifi saydamlaştırılır, kendi ikonumuz altına çizilir.
   Glif silinmez — silinirse tıklayıp takvimi açma alışkanlığı bozulur.

   `position: relative`, saydam glifi yerinden oynatabilmek için: Chrome onu
   İÇERİK kutusunun sağına koyuyor, yani 32px'lik sağ yastıklamanın SOLUNA.
   Bizim ikonumuz ise sağdan 12px'te. İkisi hiç örtüşmüyordu: görünen ikona
   tıklayınca hiçbir şey olmuyor, tıklanabilir alan ise boşlukta duruyordu. */
.input[type="date"],
.input[type="month"],
.input[type="time"] {
  position: relative;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

/* Tıklama alanı, çizdiğimiz ikonun tam üstüne sabitlenir ve alanın boyunca
   uzatılır — hedef büyür, ikon artık gerçekten düğme gibi çalışır.
   Genişlik ikon kadar tutuluyor: alanın tamamını kaplasaydı "aa" gibi bir
   parçaya tıklayıp elle yazmak imkânsız olurdu. */
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="month"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--space-3);
  width: 16px;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* Sayı: artırma/azaltma okları kaldırılır. Bu alanların hepsi (KDV oranı,
   ihbar süresi, hatırlatma günü) elle yazılıyor; oklar hem temaya uymuyor
   hem de yanlışlıkla tekerlekle değiştirilmeye açık. */
.input[type="number"] {
  -moz-appearance: textfield;
}

.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Arama: Chrome'un ✕ düğmesi. Zaten yanında "Temizle" bağlantısı var. */
.input[type="search"]::-webkit-search-cancel-button,
.input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

/* ---- Dosya seçimi -------------------------------------------------------
   Dosya girdisi tek native bileşen ki hiçbir biçimlendirmeyi kabul etmez:
   kendi "Dosya Seç" düğmesini çizer, yüksekliğimizi ve yazı tipimizi yok
   sayar. Girdi gizlenip yerine kendi düğmemiz konuyor; tıklama etiketle
   iletildiği için ek JavaScript gerekmez, yalnızca seçilen dosyanın adını
   yazmak için küçük bir betik var. */
.file-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.file-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.file-field__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

.file-field:hover .file-field__button {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.file-field input[type="file"]:focus-visible + .file-field__button {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--border-focus);
}

.file-field__button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.file-field__name {
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-field__name.is-chosen {
  color: var(--text);
}

/* Hata durumu.

   `background-color`, kısayol olan `background` DEĞİL: tarih alanının takvim
   ikonu ile seçim kutusunun oku `background-image` ile çiziliyor. Kısayol
   yazmak arka planın bütün parçalarını sıfırlar, yani hata veren bir tarih
   alanı ikonunu kaybediyordu. Aynı hata devre dışı ve salt okunur
   durumlarda da vardı. */
.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--danger-border);
  background-color: var(--danger-bg);
}

.field--error .input:focus,
.field--error .select:focus,
.field--error .textarea:focus {
  border-color: var(--danger-solid);
  box-shadow: var(--ring-danger);
}

.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--danger);
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

/* Ön/son ek ile birlikte giriş (₺, %, .com) */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input {
  border-radius: 0;
}

.input-group > :first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group > :last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group > :only-child {
  border-radius: var(--radius-sm);
}

.input-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.input-group .input + .input-addon,
.input-group .input-addon + .input {
  margin-left: -1px;
}

.input-group .input:focus {
  z-index: var(--z-base);
}

/* Gruptaki seçici (tutar + para birimi) İÇERİĞİ kadar geniş ve DARALMAZ.
 *
 * `.select { width: 100% }` yüzde genişlik; tarayıcı yüzde genişlikli form
 * öğesini "sıkıştırılabilir" sayıyor ve en küçük genişliğini SIFIR alıyor.
 * Yanındaki tutar alanı bütün yeri isteyince para birimi "T.." hâline
 * eziliyordu. Önceden seçicilere satır içi `max-width:96px` yazılmıştı:
 * genişliği üstten sınırlıyordu ama daralmayı durdurmuyordu.
 *
 * Combo'da düzeni yerli seçici kuruyor (bkz. `.combo__native`), görünen
 * düğme onun üstüne biniyor — o yüzden genişlik YERLİ seçiciye veriliyor. */
.input-group > .select,
.input-group > .combo {
  flex: 0 0 auto;
}

.input-group > .select,
.input-group > .combo > .combo__native {
  width: auto;
}

/* Grupta seçici de ek (%) gibi BİRLEŞİK durur: ortak kenar tek çizgi, iç
   köşeler düz. Öncesinde seçicinin sol köşeleri yuvarlaktı ve iki kenarlık
   yan yana çift çizgi çiziyordu — aynı formdaki "%" grubu ise tek kutu
   gibiydi. Görünen kutu combo'da DÜĞME, o yüzden köşe ona veriliyor. */
.input-group > .input + .select,
.input-group > .input + .combo {
  margin-left: -1px;
}

.input-group > .select:last-child,
.input-group > .combo:last-child > .combo__button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Odaktaki parça komşusunun kenarının ÜSTÜNDE durur (girişteki kuralın eşi) */
.input-group > .combo:focus-within {
  z-index: var(--z-base);
}

/* Onay kutusu ve radyo */
/* Onay kutusu ve seçenek düğmesi
   Tarayıcının kendi çizimi kullanılmıyor: işaretsiz kutunun kenarlığı ve
   köşe yarıçapı tarayıcıya göre değişiyor ve yanındaki .input ile
   uyuşmuyordu. Kutu burada sıfırdan çiziliyor — aynı kenarlık, aynı
   6px köşe, aynı odak halkası. */
/* BLOK düzeyinde, içeriği kadar geniş.
 *
 * `inline-flex` iken kart gövdesinde alanların arasına düşen onay kutusu
 * satır içi bir kutuydu: üstteki alan satırının alt boşluğu ile kendi üst
 * boşluğu (kart gövdesi ritmi) birleşmiyor, TOPLANIYORDU — 40px; altında da
 * satır yüksekliği payı kalıyordu — 24px. Alanlar arası ritim 20px. Fatura
 * formunda "Ortak payına konu" bir öncekine uzak, bir sonrakine yakın
 * duruyordu; 15 yerde aynı durum vardı.
 *
 * Esnek ve ızgara kapsayıcılarda etiket zaten blok sayılıyordu; orada değişen
 * tek şey tıklanabilir alanın satır boyu değil metin kadar olması. */
.checkbox,
.radio {
  display: flex;
  width: fit-content;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.checkbox input,
.radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex-shrink: 0;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition-colors), box-shadow var(--duration-fast) var(--ease);
}

.radio input {
  border-radius: var(--radius-full);
}

.checkbox:hover input,
.radio:hover input {
  border-color: var(--accent);
}

.checkbox input:checked,
.radio input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Tik ve nokta, girdinin KENDİ arka planına çizilir.
   `::after` ile çizmek daha kısa olurdu ama sözde öğelerin <input> gibi
   yerine geçen (replaced) öğelerde çalışması garanti değil; arka plan
   görüntüsü her tarayıcıda çalışır. */
.checkbox input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

.radio input:checked {
  background-image: radial-gradient(circle at center, var(--accent-fg) 0 3px, transparent 3px);
}

.checkbox input:focus-visible,
.radio input:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--border-focus);
}

.checkbox input:disabled,
.radio input:disabled {
  background-color: var(--bg-sunken);
  border-color: var(--border);
  cursor: not-allowed;
}

.checkbox input:disabled:checked,
.radio input:disabled:checked {
  background-color: var(--text-subtle);
  border-color: var(--text-subtle);
}

.checkbox:has(input:disabled),
.radio:has(input:disabled) {
  cursor: not-allowed;
  color: var(--text-muted);
}

.checkbox span,
.radio span {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* Anahtar (toggle) */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background-color var(--duration) var(--ease);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--gray-0);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration) var(--ease-out);
}

.switch input:checked + .switch-track {
  background: var(--accent);
}

.switch input:checked + .switch-track::after {
  transform: translateX(16px);
}

.switch input:focus-visible + .switch-track {
  box-shadow: var(--ring);
}

/* Yan yana alanlar
 *
 * Izgara değil esnek kutu: satırdaki alanların bir kısmı koşullu basılıyor
 * (ör. personel yoksa "Birincil temsilci" hiç çıkmıyor). Izgarada sütun sayısı
 * sabit olduğu için eksik alan yerine boşluk kalıyordu; esnek kutuda kalanlar
 * satırı bölüşür, tek kalan alan tüm satırı alır.
 */
/* Dikey ritim satırın kendisinde: tek başına duran `.field` ile aynı ölçü,
   böylece satırlı ve satırsız alanlar aynı aralıkla dizilir. Sarınca (dar
   ekranda tek sütun) alt alta düşen alanlar da aynı boşluğu alır. */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-4);   /* dikey ritim | sütun aralığı */
  margin-bottom: var(--space-5);
}

/* Satırdaki alanın dikey boşluğu SATIRA aittir; alan kendi alt boşluğunu da
   taşısaydı satırın altında iki kat boşluk olurdu. Bu kural yokken
   görünümlerde 76 kez elle `style="margin-bottom:0"` yazılmış, 82 kez de
   yazılmamıştı — form satırlarının yarısı ötekinden 20px daha uzundu. */
.field-row > .field {
  margin-bottom: 0;
}

/* Kabın son öğesi altına boşluk bırakmaz: kart ve modal yastığı zaten var.
   Elle sıfırlamanın ikinci gerekçesi buydu. */
.field:last-child,
.field-row:last-child {
  margin-bottom: 0;
}

.field-row > * {
  flex: 1 1 200px;
  min-width: 0;               /* uzun seçenek metni satırı taşırmasın */
}

.field-row--2 > * { flex-basis: calc(50% - var(--space-4) / 2); }
.field-row--3 > * { flex-basis: calc(33.333% - var(--space-4) * 2 / 3); }

/* Alan satırı, EKRANIN değil KENDİ genişliğinin dar olduğu yerde de alt alta
   geçmeli.
   Aşağıdaki ekran sorgusu yalnızca telefonu yakalıyor; oysa satır masaüstünde
   de dar bir yere düşebiliyor: güvenlik sayfasının 320px'lik yan sütununda
   rotasyon formu iki sütuna bölünüyor, "Onaylamak için parolanız" etiketi iki
   satıra kırılıyor ve düğme sıkışıyordu. Ekran 1900px olduğu için ekran
   sorgusu hiç devreye girmiyordu — tanım listesinde birebir aynı hata vardı.

   Kapsayıcı yalnızca İÇİNDE alan satırı olan kart gövdelerine veriliyor:
   `container-type` sabit konumlu torunlara kapsayıcı blok olur ve gereksiz
   yere her karta vermek risk olurdu. Açılır liste, ipucu balonu ve modal
   perdesi zaten <body> altında çiziliyor, etkilenmiyorlar. */
.card__body:has(.field-row) {
  container-type: inline-size;
}

@container (max-width: 380px) {
  .field-row > * { flex-basis: 100%; }
}

@media (max-width: 640px) {
  .field-row > * { flex-basis: 100%; }
}

/* Fatura başlığı önizlemesi (Ayarlar → Firma)
 *
 * PDF'in sol üst köşesini taklit eder: firma adı koyu ve büyük, altındaki
 * satırlar küçük ve gri — InvoiceDocument'teki ölçülerin ekran karşılığı. */
.invoice-head {
  padding: var(--space-4);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.invoice-head__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--text);
  word-break: break-word;
}

.invoice-head__lines {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  word-break: break-word;
}

/* Hiçbir alan doldurulmamışsa kutu boş bir çerçeve olarak kalmasın */
.invoice-head__lines:empty::before {
  content: 'adres, vergi ve iletişim bilgileri buraya gelir';
  color: var(--text-subtle);
}

/* ==========================================================================
   KART
   ========================================================================== */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.011em;
}

.card__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.card__body {
  padding: var(--space-5);
}

/* Kart gövdesindeki bloklar arası dikey ritim TEK yerden gelir.
 *
 * Öncesinde 75 kart gövdesi bunu çocuklarına elle yazıyordu ve ortaya yedi
 * farklı ölçü çıkmıştı: 0, 4, 8, 12, 16, 20, 24px. On dört yerde de hiç
 * boşluk yoktu — açıklama metni doğrudan grafiğe ya da listeye yapışıyordu.
 * Dokuz gövde ise aynı işi `flex flex-col gap-*` ile, üç ayrı değerle
 * çözüyordu. Aynı sorunun on ayrı cevabı.
 *
 * İki bilinçli istisna, ikisi de seçicide:
 *   1. Kendi `gap`ini tanımlayan gövdeler — bunlar liste kartı, ritimleri
 *      daha sıkı olmalı ve `margin` eklemek `gap`in ÜSTÜNE binerdi.
 *   2. Çocuğa bilerek yazılmış `mb-*`/`mt-*` — etiket+değer gibi sıkı
 *      ikililer (mb-1) ve bölüm ayıran geniş aralıklar (mt-6).
 */
.card__body:not([class*="gap-"]) > *:not([class*="mb-"]) + *:not([class*="mt-"]) {
  margin-top: var(--space-5);
}

.card__body--flush { padding: 0; }

.card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-sunken);
  border-top: 1px solid var(--border-subtle);
}

/* Tıklanabilir kart */
.card--link {
  display: block;
  color: inherit;
  transition: var(--transition-colors), box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.card--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transform: translateY(-1px);
}

/* ==========================================================================
   AÇILIR BÖLÜM
   Uzun formlarda isteğe bağlı alanları katlar. <details> üzerine kurulu,
   yani JavaScript çalışmasa da açılıp kapanır ve klavyeyle gezilebilir.
   ========================================================================== */
.section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.section + .section,
.card + .section,
.section + .card {
  margin-top: var(--space-3);
}

.section__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  list-style: none;               /* Firefox'un üçgeni */
  cursor: pointer;
  user-select: none;
  transition: var(--transition-colors);
}

.section__head::-webkit-details-marker { display: none; }  /* Safari'nin üçgeni */

.section__head:hover { background: var(--bg-hover); }

.section__head:focus-visible {
  outline: none;
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.section__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.011em;
}

/* Kapalıyken bölümün içinde ne olduğunu söyler. */
.section__meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: opacity var(--duration-fast) var(--ease);
}

/* Açıkken alanların kendisi görünüyor, özet gereksiz. */
.section[open] > .section__head > .section__meta { opacity: 0; }

.section__caret {
  flex-shrink: 0;
  color: var(--text-subtle);
  transition: transform var(--duration) var(--ease);
}

.section[open] > .section__head > .section__caret { transform: rotate(180deg); }

.section[open] > .section__head { border-bottom: 1px solid var(--border-subtle); }

.section__body {
  padding: var(--space-5);
  animation: section-in var(--duration) var(--ease-out);
}

@keyframes section-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* İçinde hatalı alan olan bölüm kapatılmış olsa bile göze çarpsın. */
.section--error { border-color: var(--danger-border); }

.section--error > .section__head > .section__meta { color: var(--danger); }

/* ==========================================================================
   BÖLÜMLÜ SEÇİM
   Az sayıda birbirini dışlayan seçenek için radio yığınına göre daha derli
   toplu. Altında gerçek radio girdileri var; form gönderimi aynı çalışır.
   ========================================================================== */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.segmented__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented__option span {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors), box-shadow var(--duration-fast) var(--ease);
}

.segmented__option:hover span { color: var(--text); }

.segmented__option input:checked + span {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

.segmented__option input:focus-visible + span { box-shadow: var(--ring); }

/* ==========================================================================
   FORM EYLEM ÇUBUĞU
   Sayfa sonuna kadar kaydırmadan kaydedebilmek için yapışkan.
   ========================================================================== */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4) 0 var(--space-5);
  background: linear-gradient(to bottom, transparent, var(--bg) var(--space-4));
}

/* ==========================================================================
   SİHİRBAZ
   Ekleme akışlarını adımlara böler. Adımlar sunucuda üretilir ve doğru adım
   ilk boyamada görünür; JavaScript yalnızca aralarında gezinmeyi ve son
   adımdaki özeti üretmeyi yapar.
   ========================================================================== */
.wizard__steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

/* Her adım bir düğme: tıklanarak o adıma gidilir */
.wizard__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-colors);
}

/* Adımları birleştiren çizgi, numara dairesinin ortasından geçer */
.wizard__step::before,
.wizard__step::after {
  content: "";
  position: absolute;
  top: 13px;
  height: 2px;
  background: var(--border);
  transition: var(--transition-colors);
}

.wizard__step::before { right: 50%; left: 0; }
.wizard__step::after  { left: 50%; right: 0; }

.wizard__step:first-child::before,
.wizard__step:last-child::after { display: none; }

.wizard__step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: var(--transition-colors);
}

.wizard__step-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* Tamamlanan adım: dolu daire, tik, arkasındaki çizgi de dolu */
.wizard__step.is-done { color: var(--text); }

.wizard__step.is-done .wizard__step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.wizard__step.is-done::before,
.wizard__step.is-done::after,
.wizard__step.is-current::before { background: var(--accent); }

/* Şu anki adım: içi boş ama kenarlığı vurgulu */
.wizard__step.is-current { color: var(--text); }

.wizard__step.is-current .wizard__step-num {
  border-color: var(--accent);
  color: var(--text);
}

.wizard__step:not(:disabled):hover { color: var(--text); }
.wizard__step:disabled { cursor: default; }

.wizard__step:focus-visible { outline: none; }
.wizard__step:focus-visible .wizard__step-num { box-shadow: var(--ring); }

/* İçinde hatalı alan olan adım */
.wizard__step.is-invalid .wizard__step-num {
  border-color: var(--danger);
  color: var(--danger);
}

.wizard__step.is-invalid { color: var(--danger); }

/* Adım panelleri — yalnızca biri görünür */
.wizard__panel { display: none; }
.wizard__panel.is-current { display: block; }

.wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.wizard__nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Dar ekranda etiketler sığmaz; numaralar yeter */
@media (max-width: 640px) {
  .wizard__step-label { display: none; }
}

/* JavaScript yoksa sihirbaz gezinemez: bütün adımlar açılır, form uzun ama
   çalışır kalır. */
.no-js .wizard__panel { display: block; }
.no-js .wizard__steps,
.no-js [data-wizard-back],
.no-js [data-wizard-next] { display: none; }
.no-js [data-wizard-submit] { display: inline-flex !important; }

/* ==========================================================================
   ÖZET LİSTESİ
   Sihirbazın son adımında girilenlerin gözden geçirildiği yer.
   ========================================================================== */
.review__group {
  margin-top: var(--space-5);
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.review__group:first-child { margin-top: 0; }

.review__row {
  display: grid;
  grid-template-columns: minmax(120px, 210px) 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}

.review__row:last-child { border-bottom: 0; }

.review__label { color: var(--text-muted); }

.review__value {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
  white-space: pre-line;          /* adres alanındaki satır sonları korunsun */
}

.review__value.is-empty {
  font-weight: var(--weight-normal);
  color: var(--text-subtle);
}

@media (max-width: 640px) {
  .review__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ==========================================================================
   İSTATİSTİK KARTI (KPI)
   ========================================================================== */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.stat__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.stat__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: var(--weight-medium);
}

.stat__delta--up   { color: var(--success); }
.stat__delta--down { color: var(--danger); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

/* Kart içindeki üçlü sayı şeridi — sayfa üstündeki büyük kutular gibi 220px
   alt sınıra ihtiyacı yok, üçü de kısa. Öncesinde satır içi `style` ile
   yazılıyordu; satır içi biçim her stylesheet kuralını yendiği için
   telefonda tek sütuna inen kuralı da sessizce eziyordu. Sınıf olduğu için
   layout.css'teki daraltma kuralı (components.css'ten SONRA yüklenir)
   yeniden devrede. */
.stat-grid--compact {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* ==========================================================================
   TABLO
   ========================================================================== */
/* Yalnızca yatay kaydırma; yuvarlatma YOK.
 *
 * Kaplar 36 yerde kullanılıyor ve hepsi bir kartın içinde. Kart zaten
 * `border-radius` + `overflow: hidden` taşıyor, yani köşeleri o yuvarlatıyor.
 * Kabın kendi yuvarlaklığı üstteki kart başlığının altında, sayfanın
 * ortasında duran bir başlık şeridini köşelendiriyordu — dışarıdan bakınca
 * tablo başlığı sebepsiz yere yuvarlak görünüyordu.
 *
 * `overflow-x: auto` dikeyde de `auto` hesaplanmasına yol açar (CSS overflow
 * modülü); tablo başlığının 1px'lik taşması bile alanı fareyle kaydırılabilir
 * yapardı — bu yüzden başlıkta negatif kenar boşluğu kullanılmıyor. */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  font-size: var(--text-sm);
}

.table thead th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}

.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr {
  transition: background-color var(--duration-fast) var(--ease);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

/* Tıklanabilir satırın imleci, DAVRANIŞIN KENDİSİNE bağlı.
 *
 * Önce elle yazılan bir sınıfa (`.table--clickable`) bağlıydı ve sınıfla
 * `data-href` sessizce ayrışabiliyordu: demirbaş tablosunda satırlar
 * tıklanabilirdi ama sınıf yanlış yazıldığı için imleç ok kalıyordu —
 * tıklanabildiği hiçbir yerden anlaşılmıyordu. Satırı tıklanabilir yapan şey
 * `data-href`; imleç de ondan geliyor, ikinci bir işarete gerek yok. */
.table tbody tr[data-href] {
  cursor: pointer;
}

/* Para sütunu.
 *
 * `width: 1%` "içeriği kadar dar" demek — tablo düzeninde alışılmış deyim,
 * `.col-narrow` ve `.col-actions` da bunu kullanıyor. Eksik olduğu için
 * artan genişlik tutar sütununa da dağılıyordu ve az sütunlu kart
 * tablolarında ortadaki hücre ortada asılı kalıyordu: "asd … bugün …
 * 23,00 ₺" satırında aralar hesapsız açılıyordu.
 *
 * Dar sütunlar gerçekten daralınca artan yer kendiliğinden BİRİNCİL sütuna
 * gidiyor — hangi sütunun büyüyeceğini ayrıca işaretlemeye gerek kalmıyor. */
.table .col-amount,
.table th.col-amount {
  width: 1%;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.table .col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.table .col-narrow { width: 1%; white-space: nowrap; }

/* Satır eylemleri yalnızca satır üzerine gelince belirginleşir */
.row-actions {
  display: inline-flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
}

tr:hover .row-actions,
tr:focus-within .row-actions {
  opacity: 1;
}

/* Toplam satırı */
.table tfoot td {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  background: var(--bg-sunken);
  border-top: 2px solid var(--border);
}

/* ==========================================================================
   ROZET / ETİKET
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  /* Satır içi kullanımda emniyet ağı: `inline-flex` kutusunun taban çizgisi
     iç metnininkidir, yani dolgu+kenarlık kadar AŞAĞIDA hizalanır ve rozet
     yanındaki metne göre düşük durur. Kesin ortalama için metin ve rozet
     esnek bir satıra alınır (`flex items-center gap-2`); bu kural onun
     unutulduğu yerlerde farkı görünmez seviyeye indiriyor. */
  vertical-align: middle;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
}

.badge--success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.badge--warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.badge--danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-border); }
.badge--info    { color: var(--info);    background: var(--info-bg);    border-color: var(--info-border); }

.badge--solid {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}

/* Durum noktası */
.dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* ==========================================================================
   AVATAR
   ========================================================================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gray-0);
  background: var(--gray-500);
  border-radius: var(--radius-full);
  user-select: none;
  overflow: hidden;
}

.avatar--sm { width: 24px; height: 24px; font-size: var(--text-2xs); }
.avatar--lg { width: 40px; height: 40px; font-size: var(--text-base); }
.avatar--xl { width: 56px; height: 56px; font-size: var(--text-lg); }

.avatar--square { border-radius: var(--radius-sm); }

/* Üst üste binen avatar grubu */
.avatar-stack {
  display: inline-flex;
}

.avatar-stack .avatar {
  margin-left: -8px;
  border: 2px solid var(--bg-elevated);
}

.avatar-stack .avatar:first-child {
  margin-left: 0;
}

/* ==========================================================================
   BİLDİRİM KUTUSU
   ========================================================================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.alert svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.alert__title {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.alert--success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.alert--warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.alert--danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-border); }
.alert--info    { color: var(--info);    background: var(--info-bg);    border-color: var(--info-border); }

/* ==========================================================================
   BOŞ DURUM
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--text-subtle);
  background: var(--bg-sunken);
  border-radius: var(--radius-full);
}

.empty__icon svg { width: 22px; height: 22px; }

.empty__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.empty__text {
  max-width: 380px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   AÇILIR MENÜ
   ========================================================================== */
.dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-dropdown);

  /* Menü içeriği kadar genişler.
   *
   * `min-width` tek başına yetmiyordu: mutlak konumlu bir öğenin
   * "shrink-to-fit" genişliği kapsayıcı bloğunun genişliğiyle sınırlı ve
   * buradaki kapsayıcı `.dropdown`, yani yalnızca "…" düğmesi kadar dar.
   * Menü bu yüzden 200px'te takılıp kalıyor, "Gönderildi olarak işaretle"
   * gibi etiketler iki satıra düşüyordu. `max-content` sınırı kaldırır.
   *
   * Üst sınır dar ekran için: menü pencereden taşmasın. */
  width: max-content;
  min-width: 200px;
  max-width: calc(100vw - var(--space-6) * 2);
  padding: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease-out);
}

.dropdown__menu--left {
  right: auto;
  left: 0;
  transform-origin: top left;
}

.dropdown.is-open .dropdown__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text);
  text-align: left;
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-fast) var(--ease);
}

.dropdown__item:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

.dropdown__item svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.dropdown__item--danger { color: var(--danger); }
.dropdown__item--danger svg { color: var(--danger); }
.dropdown__item--danger:hover { background: var(--danger-bg); }

.dropdown__divider {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--border-subtle);
}

/* Menünün tepesinde kimlik satırı: ad üstte, e-posta altında.
   `.dropdown__label`ın büyük harfli, soluk biçimi bölüm başlığı içindir;
   burada okunacak bir isim var. */
.dropdown__head {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--text);
}

.dropdown__head span {
  display: block;
  margin-top: 2px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown__label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   KİPLİ PENCERE (MODAL)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgb(9 9 11 / 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;

  /* Kapanış geçişi burada, açılış `.is-open` içinde: pencere kapanırken
     beklemek can sıkar, açılırken yumuşaklık iyi hissettirir. */
  transition: opacity var(--duration-fast) var(--ease);
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--duration) var(--ease);
}

.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-8));
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(8px) scale(0.98);
  transition: transform var(--duration-fast) var(--ease);

  /* Kenara dayanan çocuklar (yapışkan kaydet çubuğu gibi) kendi arka planıyla
     köşeleri boyayıp keskinleştirmesin. */
  overflow: hidden;
}

.modal-backdrop.is-open .modal {
  transform: translateY(0) scale(1);
  transition: transform var(--duration) var(--ease-out);
}

.modal--lg { max-width: 720px; }
.modal--sm { max-width: 380px; }

/* Ekleme/düzenleme formları için: sayfa gibi geniş ama pencere gibi odaklı.
   Ölçü form sayfalarıyla aynı tokendan geliyor — ikisi de "bir form ne kadar
   geniş olmalı" sorusunun cevabı, aynı sayı iki yerde yazılı durmasın. */
.modal--xl { max-width: var(--form-max); }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.modal__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Form modalı: başlık sabit kalır, gövde kayar. İçerik sayfa şablonundan
   geldiği için sayfaya ait kabuk burada gizlenir — başlığı modal kendisi
   basar, kırıntı yolunun ise pencerede işi yok. */
.modal--form .modal__body {
  flex: 1;
  min-height: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.modal--form .breadcrumb,
.modal--form .page-header { display: none; }

/* Sayfa genişliği sınırları modalda geçersiz; pencere zaten sınırlı */
.modal--form .form-page,
.modal--form form[style] {
  max-width: none !important;
  padding: 0 !important;
}

/* Kaydet çubuğu, kayan gövdenin dibine yapışır */
.modal--form .form-actions {
  position: sticky;
  bottom: calc(var(--space-5) * -1);
  margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
}

/* Modal içinde kart kabuğu gereksiz — pencerenin kendisi zaten kart.
   Adım paneli kartın KENDİSİ (ayrı sarmalayıcı yok), o yüzden kurallar
   doğrudan karta yazılıyor. */
.modal--form .card {
  background: none;
  border: 0;
  border-radius: 0;
}

/* Bölüm başlığı KENDİ İÇERİĞİNE ait olmalı.
 *
 * Ölçüm şuydu: başlığın ÜSTÜNDE 16px (`mb-4`), ALTINDA 36px (başlık dolgusu
 * 16 + gövde dolgusu 20). Yani başlık, adlandırdığı şeyden çok bir önceki
 * bölüme yakın duruyordu — yakınlık tersti ve bölümler birbirine karışıyordu.
 *
 * Artık: bölümler arası 24px, başlıkla içeriği arası 12px. Kart kabuğu bu
 * pencerede zaten sökülü (arka plan, kenarlık, köşe); bölümü ayıran şey
 * kutu değil boşluk, o yüzden boşluğun doğru tarafta olması tek ayrım. */
.modal--form .card {
  margin-bottom: 0;   /* işaretlemedeki `mb-4` burada geçersiz */
}

/* Sihirbazda aynı anda tek panel görünür; gizli kardeş yüzünden ilk adımla
   sonrakiler farklı boşluk almasın diye paneller bunun dışında. */
.modal--form .card + .card:not(.wizard__panel) {
  margin-top: var(--space-6);
}

.modal--form .card__header {
  padding: 0 0 var(--space-3);

  /* Kart kabuğu burada söküldüğü hâlde (arka plan, kenarlık, köşe) başlığı
     ayıran çizgi kalıyordu: artık var olmayan bir kutunun ayracı. Bölümler
     boşlukla ve başlık ağırlığıyla ayrılıyor. */
  border-bottom: 0;
}

/* Yatay boşluk pencereden geliyor; dikey boşluğun tamamı başlıkta. */
.modal--form .card__body {
  padding: 0;
}

/* Sihirbaz modalında SADE bölüm başlığı aynı şeyi üçüncü kez söylüyor:
   pencerenin başlığı "Yeni gelir", adım çubuğu "Gelir", kartın başlığı
   "Gelir bilgisi" — ikinci adımda ikisi birebir aynı ("Tarihler").
   Adım çubuğu bir üstte durduğu için sade başlık fazlalık.

   `:only-child` şartı önemli: bazı başlıklar yanlarında açıklama taşıyor
   ("Boş bırakılırsa ajansın kendi varlığı sayılır" gibi) ve o metin
   başka hiçbir yerde yok. Zengin başlıkta işaret `.card__title`ın tek
   çocuk OLMAMASI — orada başlık olduğu gibi kalıyor.

   Kural ayrıca `.wizard__panel`e bağlı: düzenleme modunda sihirbaz yok,
   bütün bölümler alt alta görünür ve orada başlıklar ayırt edici. */
.modal--form .wizard__panel > .card__header:has(> .card__title:only-child) {
  display: none;
}

/* Not: gövdenin üst dolgusunu sıfırlayan iki kural burada dururdu (başlık
   gizlendiğinde ve panelde hiç başlık olmadığında). Gövde dolgusu artık her
   durumda 0 olduğu için ikisi de gereksiz kaldı; dikey boşluğun tek kaynağı
   başlığın alt dolgusu. */

/* Yükleniyor durumu — içerik gelene kadar pencere zıplamasın */
/* Simge ile yazı birlikte ortalanır. Grid kullanılmıyor: iki örtük satır
   yüksekliği paylaşıp gerilir, simge üst yarının yazı alt yarının ortasında
   kalırdı. */
.modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 280px;
  color: var(--text-muted);
  font-size: var(--text-sm);

  /* Yükleme kısa sürerse hiç görünmez; kutu yerini tutar, içerik gecikirse
     JavaScript `is-visible` ekler. */
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.modal__loading.is-visible { opacity: 1; }

.modal__loading::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 600ms linear infinite;
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.014em;
}

.modal__body {
  padding: 0 var(--space-5) var(--space-5);
  overflow-y: auto;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* ==========================================================================
   BİLDİRİM BALONU (TOAST)
   ========================================================================== */
.toast-region {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 300px;
  max-width: 420px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in var(--duration-slow) var(--ease-out);
}

.toast.is-leaving {
  animation: toast-out var(--duration) var(--ease) forwards;
}

/* İkon ve kapatma düğmesi metnin İLK SATIRININ ortasına hizalanır.
   `align-items: flex-start` çok satırlı bildirimde ikonu ilk satırda tutmak
   için gerekli, ama tek satırlık bildirimde ikisini de tepeye yapıştırıyordu:
   kapatma düğmesi metinden yukarıda duruyordu. Telafi satır yüksekliğinden
   hesaplanıyor, göz kararı bir piksel değil. */
.toast__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: calc((var(--text-sm) * var(--leading-snug) - 16px) / 2);
}

.toast--success .toast__icon { color: var(--success-solid); }
.toast--warning .toast__icon { color: var(--warning-solid); }
.toast--error   .toast__icon { color: var(--danger-solid); }
.toast--info    .toast__icon { color: var(--info-solid); }

.toast__body { flex: 1; line-height: var(--leading-snug); }

.toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: calc(var(--text-sm) * var(--leading-snug));
  color: var(--text-subtle);
  transition: color var(--duration-fast) var(--ease);
}

.toast__close:hover { color: var(--text); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(16px) scale(0.96); }
}

/* ==========================================================================
   SEKMELER
   ========================================================================== */
/* `overflow-x: auto` masum görünüyor ama bir yan etkisi var: CSS'e göre
   overflow'un bir ekseni "visible" değilse DİĞERİ de otomatik olarak
   "auto"ya döner. Yani bu kap dikeyde de kaydırılabilir hâle geliyor ve
   içeride 1px'lik bir taşma bile yeterli oluyor — sekmeler ekrana rahatça
   sığarken bile alan fareyle kaydırılıyordu.

   Taşmanın kaynağı alt çizgiydi: kapta `border-bottom` olduğunda, etkin
   sekmenin 2px'lik çizgisi onu örtebilmek için `margin-bottom: -1px` ile
   aşağı sarkmak zorundaydı ve o 1px kabın dışına taşıyordu.

   Çözüm: alt çizgi artık kenarlık değil, kabın kendi arka planı. Sekme
   ondan sonra boyandığı için etkin sekmenin çizgisi onu yine örtüyor,
   görüntü birebir aynı — ama dikeyde taşan hiçbir şey kalmıyor. */
.tabs {
  display: flex;
  gap: var(--space-1);
  background: linear-gradient(var(--border), var(--border)) 0 100% / 100% 1px no-repeat;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: var(--transition-colors);
}

/* Odak halkası kutunun 4px dışına taşıyor; kaydırılabilir kapta taşan şey
   kırpılır ve halkanın alt/üst kenarı kesilirdi. İçeriye çizilen halka hem
   kırpılmıyor hem de sekmeyi aynı belirginlikte gösteriyor. */
.tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
  border-radius: var(--radius-xs);
}

.tab:hover {
  color: var(--text);
  text-decoration: none;
}

.tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Uyarı niteliğindeki sekme — "Acil" gibi. Rengi taşıması, sekme
   olduğunu gizlemesin: hover ve etkin durumu diğerleriyle aynı işliyor. */
.tab--danger { color: var(--danger); }

.tab--danger:hover { color: var(--danger); }

.tab--danger.is-active {
  color: var(--danger);
  border-bottom-color: var(--danger);
}

.tab__count {
  padding: 1px var(--space-1);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  background: var(--bg-sunken);
  border-radius: var(--radius-xs);
}

.tab.is-active .tab__count {
  color: var(--text);
  background: var(--bg-active);
}

/* ==========================================================================
   SAYFALAMA
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.pagination__info {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ==========================================================================
   İSKELET (YÜKLENİYOR)
   ========================================================================== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-100) 25%,
    var(--gray-150) 37%,
    var(--gray-100) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radius-xs);
  animation: skeleton 1.4s ease infinite;
}

@keyframes skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ==========================================================================
   İLERLEME ÇUBUĞU — bütçe doluluk, hedef takibi
   ========================================================================== */
.progress {
  height: 6px;
  overflow: hidden;
  background: var(--bg-sunken);
  border-radius: var(--radius-full);
}

.progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

.progress__bar--success { background: var(--success-solid); }
.progress__bar--warning { background: var(--warning-solid); }
.progress__bar--danger  { background: var(--danger-solid); }

/* ==========================================================================
   İPUCU BALONU
   ========================================================================== */
.tooltip {
  position: relative;
}

/*
 * İpucu, gizliyken `display: none` ile tamamen kaldırılır.
 *
 * `opacity: 0` yetmiyordu: mutlak konumlu bir kutu görünmez olsa da düzende
 * durur ve kaydırılabilir bir atanın KAYDIRMA ALANINA dahil olur. Tablolar
 * `overflow-x: auto` bir kabın içinde olduğu için, en sağdaki satır eylemine
 * bağlı uzun bir ipucu (ör. "Tahsil edildi olarak işaretle") tablonun sağ
 * kenarını aşıyor ve her listede sebepsiz bir yatay kaydırma çubuğu çıkıyordu.
 *
 * Giriş yumuşaması `transition` yerine `animation` ile: `display` değişimi
 * geçişi tetiklemez, ama yeni görünür olan öğede animasyon çalışır.
 */
.tooltip::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: var(--z-tooltip);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-normal);
  color: var(--text-inverse);
  white-space: nowrap;
  background: var(--bg-inverse);
  border-radius: var(--radius-xs);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Üst çubuktaki ipuçları AŞAĞI açılır. İpucu varsayılan olarak öğenin
   ÜSTÜNDE beliriyor; üst çubuk pencerenin en tepesinde olduğu için oradaki
   balon ekranın dışında kalıp yalnızca alt kenarı görünüyordu — zilin üstünde
   kırpılmış siyah bir şerit gibi duruyordu. */
.tooltip--below::after {
  top: calc(100% + 6px);
  bottom: auto;
}

/* Sağ kenara yaslanan öğelerde balon ortalanmaz: ortalanınca genişliğinin
   yarısı pencerenin dışına taşıyor. Sağ kenarları hizalanıyor. */
.tooltip--end::after {
  left: auto;
  right: 0;
  transform: none;
}

@keyframes tooltip-in-end {
  from { opacity: 0; transform: translateY(-2px); }
}

.tooltip--end:hover::after,
.tooltip--end:focus-visible::after {
  animation-name: tooltip-in-end;
}

@keyframes tooltip-in-below {
  from { opacity: 0; transform: translateX(-50%) translateY(-2px); }
}

.tooltip--below:hover::after,
.tooltip--below:focus-visible::after {
  animation-name: tooltip-in-below;
}

.tooltip:hover::after,
.tooltip:focus-visible::after {
  display: block;
  animation: tooltip-in var(--duration-fast) var(--ease);
}

/* JS çalışıyorsa balonu `initTooltips` çiziyor: <body>'ye sabit konumla
   koyduğu için hiçbir kapsayıcı onu kırpamıyor. CSS balonu yalnızca
   JavaScript kapalıyken devrede — silinmedi, gizlendi. */
.js-tooltip .tooltip::after {
  content: none;
}

/* Kırpılmayan balon. Görünümü CSS'tekiyle aynı; farkı <body>'de durması. */
.tooltip-bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-tooltip);
  display: none;
  max-width: min(320px, calc(100vw - 16px));
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
  color: var(--text-inverse);
  background: var(--bg-inverse);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

.tooltip-bubble.is-open {
  display: block;
  animation: tooltip-in var(--duration-fast) var(--ease);
}

@keyframes tooltip-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(2px);
  }
}

/* ==========================================================================
   AYIRICI BAŞLIK
   ========================================================================== */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.section-title h2 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   TANIM LİSTESİ — detay sayfalarında alan/değer çiftleri
   ========================================================================== */
/* Ölçüler özel değişkenlerde durur: varyantlar ve daraltma kuralları aynı
   dört kaldıraca basar, her biri kendi `grid-template-columns`ını yazmaz.
   Görünümlerde satır içi `style` ile sütun sayısı ezildiğinde yalnızca o
   özellik değişiyor, boşluklar daraltma kuralından kalıyordu — kur kartında
   sütun aralığı 0'a düşüp değer etikete yapışmış, `dt`nin üst boşluğu da
   değeri satırın üstüne kaldırmıştı. */
.definitions {
  --def-cols: minmax(120px, 180px) 1fr;
  --def-row-gap: var(--space-3);
  --def-col-gap: var(--space-4);
  --def-dt-space: 0;                       /* tek sütunda çiftleri ayırır */

  display: grid;
  grid-template-columns: var(--def-cols);
  gap: var(--def-row-gap) var(--def-col-gap);
  font-size: var(--text-sm);
}

.definitions dt {
  margin-top: var(--def-dt-space);
  color: var(--text-muted);
}

.definitions dt:first-child {
  margin-top: 0;
}

.definitions dd {
  color: var(--text);
  word-break: break-word;
}

/* Etiket üstte, değer altta — değer uzunsa (IBAN, adres, e-posta) iki sütun
   dar kartta okunmaz hâle geliyor. Öncesinde her `dd`ye elle `mb-3`
   yazılıyordu; üç listenin ikisinde yazılmış, birinde unutulmuştu. */
.definitions--stacked {
  --def-cols: 1fr;
  --def-row-gap: var(--space-1);
  --def-col-gap: 0;
  --def-dt-space: var(--space-3);
}

/* Kısa etiket + kısa değer aynı satırda: para birimi kodu ve kuru gibi.
   İkisi de birkaç karakter olduğu için dar yerde bölünmesi gerekmez —
   aşağıdaki daraltma kuralları bu varyantı dışarıda bırakır. */
.definitions--inline {
  --def-cols: auto 1fr;
  --def-row-gap: var(--space-2);
}

/* Tanım listesi, EKRANIN değil KENDİ genişliğinin dar olduğu yerde de
   alt alta geçmeli.

   Aşağıdaki ekran sorgusu yalnızca telefonu yakalıyordu. Oysa liste,
   masaüstünde de dar bir yere düşebiliyor: `.split`in sağ sütunu 320px
   sabit, kart yastığı düşünce 280px kalıyor, ilk sütun 120px'ini alınca
   değere 144px kalıyor ve "domain/hosting" harf harf kırılıyordu.
   Ekran genişliği 1900px olduğu için ekran sorgusu hiç devreye girmiyordu.

   Kapsayıcı sorgusu bunu çözüyor: ölçüt listenin gerçekte aldığı genişlik.
   Kapsayıcı yalnızca içinde tanım listesi OLAN kart gövdelerine veriliyor
   (`:has`), çünkü `container-type` boyut sınırlaması getiriyor ve bütün
   kartlara uygulamak gereksiz risk olurdu. */
.card__body:has(> .definitions) {
  container-type: inline-size;
}

/* Dar kapsayıcıda tek sütuna in — `.definitions--stacked` ile aynı ölçüler.
   Üç yerde de aynı dört değer yazılı; css_test.js birbirinden kaymalarını
   engelliyor. */
@container (max-width: 380px) {
  .definitions:not(.definitions--inline) {
    --def-cols: 1fr;
    --def-row-gap: var(--space-1);
    --def-col-gap: 0;
    --def-dt-space: var(--space-3);
  }
}

/* Kapsayıcısı olmayan liste için (`.card__body`nin doğrudan çocuğu değilse)
   ekran sorgusu yedekte kalıyor. Bu kuralın ilk gerekçesi fatura toplam
   kutusuydu; o artık `.totals` — tanım listesi değil. */
@media (max-width: 560px) {
  .definitions:not(.definitions--inline) {
    --def-cols: 1fr;
    --def-row-gap: var(--space-1);
    --def-col-gap: 0;
    --def-dt-space: var(--space-3);
  }
}

/* ==========================================================================
   Tutar dökümü — ara toplam, indirim, KDV, genel toplam
   ========================================================================== */

/* Etiket solda, tutar SAĞDA: bütün tutarlar tek bir sağa yaslı sütunda.
 *
 * Öncesinde üç yerde (fatura formu, fatura detayı, paylaşım sayfası) tanım
 * listesi + elle yazılmış bir "Genel toplam" satırıydı. Tanım listesinde
 * değer etiket sütununun HEMEN YANINDA başlıyor, genel toplam en sağda
 * duruyordu: geniş modalda ara toplam ile genel toplam arasında 600px
 * vardı, tutarlar iki ayrı hizada okunuyordu. Satırın ayracı da her yerde
 * satır içi `style` ile yazılmıştı.
 *
 * Blok sağa yaslı ve dar: tutarlar kalem tablosunun "Tutar" sütununun
 * altında durur, etiketle tutar arasında göz gezdirilecek bir boşluk kalmaz.
 *
 * Her satır bir `div` (dt + dd) — HTML `dl` içinde gruplamaya izin veriyor.
 * İlk sürüm ızgaraydı ve genel toplamın üst çizgisi etiket ile tutar
 * hücrelerine AYRI AYRI çiziliyordu: taban çizgisi hizası büyük puntolu
 * tutar hücresini yukarı itti, çizgi iki parça ve iki farklı yükseklikte
 * kaldı. Çizgi artık satırın kendisinde, tek parça; taban çizgisi hizası
 * satırın içinde. */
.totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 320px;
  margin-left: auto;
  font-size: var(--text-sm);
}

.totals > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.totals dt {
  color: var(--text-muted);
}

/* Tutarın RENGİ burada verilmiyor: indirim, tahsilat, "ödendi" gibi
   anlamlar `text-expense` / `text-income` / `text-success` ile geliyor. */
.totals dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Genel toplam: ayraç satırın üstünde, tek parça. */
.totals .totals__grand {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-weight: var(--weight-semibold);
}

.totals .totals__grand dd {
  font-size: var(--text-lg);
}

/* Vurgulu satır (ör. "Kalan"): çizgisiz, kalın. */
.totals .totals__strong {
  font-weight: var(--weight-semibold);
}

/* Vurgulu satırın ETİKETİ soluk değil. Tutara renk verilmiyor: anlam
   taşıyor, burada ezilirse "Kalan 0,00 ₺"nin yeşili kaybolurdu. */
.totals .totals__grand dt,
.totals .totals__strong dt {
  color: var(--text);
}

/* Tablonun altındaki döküm, tutarlarını tablonun "Tutar" sütunuyla AYNI
   dikey çizgide bitirir. Tablo hücresi 16px içeriden yazıyor (`.table td`
   yatay yastığı); döküm kartın içerik kenarına kadar gidince paylaşım
   sayfasında 16px, fatura detayında 4px sağa taşıyordu.
   - Tablonun hemen ardından: dökümün kendisi hücre kadar içeri çekilir.
   - Kenara dayalı tablonun altındaki gövdede: gövdenin sağ yastığı hücre
     yastığına eşitlenir. */
.table-wrap + .totals {
  padding-right: var(--space-4);
}

.table-wrap + .card__body:has(> .totals) {
  padding-right: var(--space-4);
}

/* ==========================================================================
   Sütun grafiği — raporlarda aylık gelir/gider seyri
   Saf CSS: harici grafik kütüphanesi yok, sayfa boyutu artmıyor.
   ========================================================================== */

.chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  min-height: 200px;
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.chart__col {
  flex: 1 1 0;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 150px;
}

.chart__bar {
  flex: 1 1 0;
  max-width: 16px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: opacity var(--duration-fast) var(--ease);
}

.chart__bar:hover { opacity: 0.75; }

.chart__bar--income  { background: var(--income); }
.chart__bar--expense { background: var(--expense); }

.chart__label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.chart__value {
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   Bildirim zili rozeti
   ========================================================================== */

.bell { position: relative; }

.bell__badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: #fff;
  background: var(--danger);
  border: 2px solid var(--bg);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ⌘K arama paleti
   ========================================================================== */

.palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 100);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh var(--space-4) var(--space-4);
}

.palette[hidden] { display: none; }

.palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(9 9 11 / 0.35);
  backdrop-filter: blur(2px);
}

.palette__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.palette__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.palette__search svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.palette__search input {
  flex: 1;
  height: 32px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--text-md);
  color: var(--text);
}

.palette__search input::placeholder { color: var(--text-subtle); }
.palette__search input::-webkit-search-cancel-button { display: none; }

.palette__results {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

/* Boş, sonuçsuz ve hatalı durum — üçü de aynı iskelet: ikon, tek satır
   durum, altında ne yapılacağını söyleyen açıklama. */
.palette__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.palette__empty svg {
  color: var(--text-subtle);
}

.palette__empty p {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.palette__empty span {
  max-width: 34ch;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-subtle);
}

.palette__group {
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* İlk grubun başlığı listenin tepesinde fazladan boşluk açıyordu */
.palette__group:first-child {
  padding-top: var(--space-1);
}

.palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

/* Fare ile gezinme ile klavye seçimi ayrı okunmalı: Enter'ın hangi satırı
   açacağı belirsiz kalmasın. Seçili satır kenarlıkla değil dolguyla
   işaretlenir — çerçeveli gri kutu form alanı gibi görünüyordu. */
.palette__item:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

.palette__item.is-active {
  background: var(--bg-active);
  text-decoration: none;
}

.palette__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--text-subtle);
}

.palette__item:hover .palette__icon,
.palette__item.is-active .palette__icon {
  color: var(--text);
}

.palette__title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette__sub {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Seçili satırda "Enter açar" ipucu; alt bilgideki genel açıklamayı
   satırın kendisine indirir. */
.palette__enter {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  opacity: 0;
}

.palette__item.is-active .palette__enter {
  opacity: 1;
}

.palette__footer {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* Üst çubuktaki kısayol ipucuyla aynı gerekçe: bunlar ipucu, denetim değil.
   Genel `kbd` tuş kapağı biçimi bu şeritte yanındaki metinden baskındı. */
.palette__footer kbd {
  min-width: 0;
  margin-right: 3px;
  padding: 1px 5px;
  font-size: 10px;
  color: var(--text-subtle);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   NOT PANOSU
   Kartlar sütunlara akar (masonry): CSS `columns` ile, ızgarada eşit yükseklik
   zorlaması olmadan. Kartın sütun ortasında bölünmemesi için `break-inside`.
   ========================================================================== */
/* Sayfa başlığı yerine iki eylem: arama ve güvenlik. Başlık kaldırıldı —
   "Notlar" zaten üst çubukta ve kenar çubuğunda yazıyor. */
/* Kutu ve eylemleri taşıyan şerit. Genişlik ve ortalama burada; kutunun
   kendisi şeridi dolduruyor. */
.note-bar {
  position: relative;
  max-width: 600px;
  margin: 0 auto var(--space-8);
}

/* İkonlar kutunun hemen sağında. Mutlak konum, kutunun ortalanmışlığı
   bozulmasın diye: akışa girseydi kutuyu sola kaydırırdı. */
.note-tools {
  position: absolute;
  top: 4px;
  left: calc(100% + var(--space-3));
  display: flex;
  gap: var(--space-1);
  transition: opacity var(--duration) var(--ease);
}

/* Ekleme kutusu açıkken kaybolur: o an tek iş not yazmak, yanda duran arama
   düğmesi dikkat dağıtıyor. Kutunun katlanmasıyla aynı hızda sönüyor ve
   sekme sırasından da çıkıyor. */
.note-tools.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease), visibility 0s var(--duration-fast);
}

/* Dar ekranda sağda yer kalmıyor: kutunun üstüne geçsinler. */
@media (max-width: 900px) {
  .note-tools {
    position: static;
    justify-content: flex-end;
    margin-bottom: var(--space-2);
  }
}

/* Kutuyla aynı malzeme: zemin, çerçeve ve hafif gölge. Çıplak bir ikon
   tıklanabilir olduğunu anlatmıyordu. */
.note-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-colors), box-shadow var(--duration) var(--ease);
}

.note-tool:hover {
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.note-tool.is-on {
  color: var(--bg-elevated);
  background: var(--text);
  border-color: var(--text);
}

.note-tool:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Arama hiçbir notu tutmadığında */
.notes-empty {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-subtle);
  text-align: center;
}

/* Hızlı ekleme — Keep'te olduğu gibi dar ve ortada. Tam genişlikte bir kartın
   içinde tek satırlık bir alan durunca sağında devasa bir boşluk kalıyordu. */
.note-compose {
  /* Genişlik ve ortalama `.note-bar` üzerinde */
  background: var(--note-bg, var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-colors), box-shadow var(--duration) var(--ease);
}

/* Odak göstergesi diğer girdilerle aynı; içteki input çerçevesiz olduğu için
   halkayı kutunun kendisi taşıyor. */
.note-compose:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--ring);
}

.note-compose__row { display: flex; }

/* Açılıp kapanma yumuşak olsun. Yükseklik önceden bilinmediği için ızgara
   satırı 0fr ↔ 1fr arasında geçiyor: `max-height` tahmini gerekmez, içerik ne
   kadarsa o kadar açılır. Zamanlama panelin geri kalanıyla aynı yönde —
   açılırken yumuşak, kapanırken hızlı. */
.note-compose__fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration) var(--ease-out);
}

.note-compose__fold > * {
  min-height: 0;
  overflow: hidden;
}

.note-compose__fold.is-folded {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-fast) var(--ease);
}

/* Kapalı bölüme sekmeyle girilmesin. Gizleme, kapanma bitince devreye girer;
   açılırken taban kuralda geçiş tanımlı olmadığı için anında görünür olur. */
.note-compose__fold.is-folded > * {
  visibility: hidden;
  transition: visibility 0s var(--duration-fast);
}


/* Kutunun kendisi zaten çerçeve — içteki girdi kendi çerçevesini çizmemeli */
.note-compose__row .input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--space-4);
  font-size: var(--text-md);
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
}

.note-compose__row .input:hover,
.note-compose__row .input:focus {
  border: 0;
  box-shadow: none;
}

.note-compose__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.notes {
  /* Sütun SAYISI sabitlenmiyor. `columns: 4 240px` kartı geniş ekranda 330px'e
     kadar geriyordu; Keep'te kart genişliği sabit kalır, ekran genişledikçe
     sütun eklenir. İki kısa not koca bloklar hâlinde durmasın. */
  columns: 240px;
  column-gap: var(--space-4);
}

/* Yerleşim öğesi sarmalayıcı: kartın konumu (`--tx`/`--ty`) buna uygulanıyor,
   kart bir <button> olduğu için kendi üzerinde taşınmıyor. */
.note-wrap {
  position: relative;
  margin-bottom: var(--space-4);
  break-inside: avoid;
  transition: transform var(--duration) var(--ease);
}

.note-wrap:hover { transform: translateY(-1px); }

/* Sürüklenen kart soluklaşır; bırakılacak yer geri kalanların kaymasından
   zaten anlaşılıyor, ayrıca bir yer tutucu çizmeye gerek yok. */
.note-wrap.is-dragging { opacity: 0.35; }

/* --------------------------------------------------------------------------
   ÖLÇÜLMÜŞ YERLEŞİM
   CSS `columns` sütunları DENGELER: kartlar sütun sütun dolar, sıra
   değişince hepsi yeniden dağılır ve sürüklerken kartın nereye gideceği
   tahmin edilemez olur — bazı noktalar hiç hedeflenemez. JavaScript burada
   Keep'in yaptığını yapıyor: her kartı sırayla O AN EN KISA sütuna koyuyor.
   Böylece ilk kartlar üst satıra yayılır ve bırakılan yer ile gidilen yer
   tutar. JavaScript yoksa alttaki `columns` akışı yürürlükte kalır.
   -------------------------------------------------------------------------- */
.notes.is-measured {
  position: relative;
  columns: auto;
}

.notes.is-measured .note-wrap {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  /* Konum özel değişkende: kaldırma etkisi transform'u ezmesin diye
     ikisi tek bildirimde birleşiyor. */
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease);
}

.notes.is-measured .note-wrap:hover {
  transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 1px));
}

/* Sürüklenirken yerine oturma animasyonu olmasın; kart imleci takip etmeli */
.notes.is-measured .note-wrap.is-dragging { transition: opacity var(--duration) var(--ease); }

/* İLK yerleşimde geçiş yok: yoksa sayfa her açıldığında bütün kartlar sol
   üstten uçarak yerine giderdi. Sonraki yerleşimlerde (sürükleme, pencere
   boyutu) geçiş yeniden devrede. */
.notes.is-settling .note-wrap { transition: none; }

.note {
  display: block;
  width: 100%;
  /* Tek kelimelik bir not ince bir şerit gibi durmasın */
  min-height: 72px;
  padding: var(--space-4);
  text-align: left;
  background: var(--note-bg, var(--bg-elevated));
  border: 1px solid var(--note-border, var(--border));
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-colors), box-shadow var(--duration) var(--ease);
}

.note-wrap:hover .note { box-shadow: var(--shadow-sm); }

.note:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.note__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.011em;
  overflow-wrap: anywhere;
}

.note__body {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* `white-space: pre-wrap` KALDIRILDI. Gövde düz metinken satır sonlarını o
   koruyordu; artık işaretleme saklanıyor ve satır sonu `<br>` ile geliyor.
   İkisi bir aradayken her satır sonu İKİ KEZ uygulanıyor, kart iki katı
   aralıklı görünüyordu. */

/* Gizli not: gövde bulanık başlar. Parola saklanacağı için ekrana bakan biri
   kazara okumasın; karta tıklayınca (ya da klavyeyle odaklanınca) açılır. */
.note--secret .note__body {
  filter: blur(5px);
  user-select: none;
  transition: filter var(--duration) var(--ease);
}

.note--secret:hover .note__body,
.note--secret:focus-within .note__body,
.note--secret.is-revealed .note__body {
  filter: none;
  user-select: text;
}

.note__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Düzenleme penceresi — notun kendisi, form değil.
   `.modal` arka planını `--note-bg` ile eziyoruz; pencere hangi nottaysa o
   rengi alır. Alt çubuğun kendi arka planı yok, tek renk kalır.
   -------------------------------------------------------------------------- */
.modal--note {
  max-width: 640px;
  background: var(--note-bg, var(--bg-elevated));
}

.note-sheet { padding: var(--space-5) var(--space-5) var(--space-4); }

.note-sheet__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Etiketli, çerçeveli girdiler yerine notun kâğıdı: saydam ve çizgisiz. */
.note-sheet__title,
.note-sheet__body {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.note-sheet__title:hover,
.note-sheet__body:hover,
.note-sheet__title:focus,
.note-sheet__body:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}

.note-sheet__title {
  height: auto;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.011em;
}

.note-sheet__body {
  margin-top: var(--space-3);
  /* Yükseklik JavaScript ile içeriğe göre ayarlanıyor; tavana dayanınca
     kaydırma burada başlar, pencerenin tamamı değil. */
  min-height: 140px;
  max-height: 52vh;
  overflow-y: auto;
  font-size: var(--text-sm);
  line-height: 1.65;
  resize: none;
}

/* Ekleme kutusu düzenleme penceresiyle aynı yüzeyi kullanır, ama boş başlar:
   140px'lik taban burada koca bir boşluk demek olurdu. */
.note-sheet--compose { padding: var(--space-4) var(--space-4) var(--space-2); }
.note-sheet--compose .note-sheet__body { min-height: 0; margin-top: var(--space-2); }

/* Alt bar — Keep'teki gibi notun parçası, ayrı bir çubuk değil: kendi arka
   planı ve üst çizgisi yok, yüzey tek renk kalıyor. */
.note-sheet__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.note-sheet__close { margin-left: auto; }

/* Metin alanı `contenteditable`; boşken yer tutucu göstermek için */
.note-sheet__body:empty::before {
  content: attr(data-placeholder);
  color: var(--text-subtle);
  pointer-events: none;
}

/* Biçimlendirilmiş gövde — düzenleyicide ve kartta aynı görünsün */
.note-sheet__body h1,
.note__body h1 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.note-sheet__body h2,
.note__body h2 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
}

.note-sheet__body h1:first-child,
.note-sheet__body h2:first-child,
.note__body h1:first-child,
.note__body h2:first-child { margin-top: 0; }

/* Biçim çubuğu — "A" düğmesiyle açılır, barın hemen üstünde bir satır.

   Açılıp kapanması canlandırılıyor. Önce `hidden` (yani `display: none`)
   ile açılıp kapanıyordu; geçiş uygulanamıyordu, o yüzden `is-folded`e
   geçildi.

   Yükseklik doğrudan canlandırılıyor. Panonun katlanır kutusundaki
   `0fr ↔ 1fr` ızgara tekniğine gerek yok: o teknik yüksekliğin ÖNCEDEN
   BİLİNMEDİĞİ durumlar için. Bu çubuk tek satır ve yüksekliği düğme boyu +
   dolgudan türetiliyor; ikisi de aşağıdaki `--format-row` ile tek yerden
   geliyor, yani sayı tahmin değil. */
.note-format {
  --format-row: 30px;

  height: calc(var(--format-row) + var(--space-1) * 2);
  overflow: hidden;
  transition: height var(--duration) var(--ease-out);
}

.note-format__row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
}

.note-format.is-folded {
  height: 0;
  transition: height var(--duration-fast) var(--ease);
}

/* Kapalıyken sekme sırasından da çıksın; gizleme kapanma bitince */
.note-format.is-folded .note-format__row {
  visibility: hidden;
  transition: visibility 0s var(--duration-fast);
}

.note-format__btn {
  min-width: var(--format-row);
  height: var(--format-row);
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

.note-format__btn:hover { color: var(--text); background: rgb(9 9 11 / 0.06); }

/* Seçimin biçimi düğmeye yansır: imleç kalın metindeyken B basılı görünür */
.note-format__btn.is-on { color: var(--text); background: rgb(9 9 11 / 0.12); }

.note-format__btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.note-format__sep {
  width: 1px;
  height: 18px;
  margin: 0 var(--space-1);
  background: var(--border);
}



/* Bar düğmesi. Bulanıklık bir onay kutusu; görünen yüz `__face`, kutunun
   kendisi ekran okuyucu için gizli. `:checked + .note-act__face` ile basılı
   hâl kuruluyor — kardeş seçici, `:has()` gerekmiyor. */
.note-act {
  display: flex;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.note-act__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: var(--transition-colors);
}

.note-act:hover .note-act__face { color: var(--text); background: rgb(9 9 11 / 0.06); }

.note-act input:checked + .note-act__face,
.note-act.is-open .note-act__face {
  color: var(--text);
  background: rgb(9 9 11 / 0.10);
}

.note-act input:focus-visible + .note-act__face,
.note-act:focus-visible .note-act__face {
  outline: none;
  box-shadow: var(--ring);
}

/* Bardan yukarı açılan kutucuklar. Yukarı açılıyorlar: bar pencerenin en
   altında, aşağıda yer yok. */
/* Açılır kutucuklar da `display: none` yerine sönerek gidiyor: aynı sayfada
   iki farklı açılma davranışı olmasın. */
.note-pop {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
  position: absolute;
  bottom: calc(100% - var(--space-1));
  left: var(--space-3);
  z-index: 1;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.note-pop.is-folded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              visibility 0s var(--duration-fast);
}

.note-pop--menu {
  flex-direction: column;
  gap: 0;
  min-width: 190px;
  padding: var(--space-1);
}

.note-pop__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

.note-pop__item:hover { background: var(--bg-hover); }
.note-pop__item--danger { color: var(--danger); }

.note-pop__item:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Renkler — açık temada okunabilirliği bozmayacak kadar soluk */
.note--yellow { --note-bg: #FEF9C3; --note-border: #FDE68A; }
.note--green  { --note-bg: #DCFCE7; --note-border: #BBF7D0; }
.note--blue   { --note-bg: #DBEAFE; --note-border: #BFDBFE; }
.note--purple { --note-bg: #EDE9FE; --note-border: #DDD6FE; }
.note--pink   { --note-bg: #FCE7F3; --note-border: #FBCFE8; }
.note--gray   { --note-bg: #F4F4F5; --note-border: #E4E4E7; }

/* Renk seçici */
.color-swatches {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.color-swatch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.color-swatch span {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid var(--swatch-border, var(--border-strong));
  border-radius: var(--radius-full);
  background: var(--swatch-bg, var(--bg-elevated));
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease);
}

/* Seçili renk İÇERİDE bir tikle işaretleniyor. Önce dışarı 4px'lik bir halka
   çiziliyordu: kart 24px'ten 32px'e çıkıp komşularını itiyor, sıradan bir
   seçim abartılı duruyordu. Tik hem yer kaplamıyor hem de renk körü biri için
   de okunuyor — ayrım yalnızca renge bırakılmış olmuyor. */
.color-swatch input:checked + span::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 8px;
  width: 5px;
  height: 9px;
  border: solid var(--text);
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg);
}

.color-swatch input:focus-visible + span { box-shadow: var(--ring); }

.color-swatch--yellow { --swatch-bg: #FEF9C3; --swatch-border: #FDE68A; }
.color-swatch--green  { --swatch-bg: #DCFCE7; --swatch-border: #BBF7D0; }
.color-swatch--blue   { --swatch-bg: #DBEAFE; --swatch-border: #BFDBFE; }
.color-swatch--purple { --swatch-bg: #EDE9FE; --swatch-border: #DDD6FE; }
.color-swatch--pink   { --swatch-bg: #FCE7F3; --swatch-border: #FBCFE8; }
.color-swatch--gray   { --swatch-bg: #F4F4F5; --swatch-border: #E4E4E7; }

@media (max-width: 640px) {
  .notes { columns: 1; }
}

/* ==========================================================================
   SATIR İÇİ DÜZENLEME
   Hücre normalde metin gibi durur; tıklanınca yerinde girdiye dönüşür.
   Düzenlenebilir olduğu, ancak üzerine gelince belli olur — tablo sakin kalsın.
   ========================================================================== */
[data-edit] {
  position: relative;
  cursor: text;
  /* Girdiyle aynı yarıçap: hücre tıklanınca alana dönüşüyor, şekli
     değişmesin */
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}

/* Yalnızca zemin tonu. Önceden bir de `inset` çerçeve vardı; tabloda satır
   satır gezerken kutu kutu çerçeveler çıkıp kayboluyor, sakin durması
   gereken listeyi huzursuz ediyordu. Ton tek başına "buraya tıklanabilir"
   demeye yetiyor. */
[data-edit]:hover {
  background-color: var(--bg-hover);
}

[data-edit]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Düzenleme sırasında hücrenin içine yerleşen girdi */
/* Formlardaki alanın satır içine sığan küçük boyu. Değerler aynı
   değişkenlerden geliyor ki tabloda ayrı bir görsel dil doğmasın; tek fark
   yükseklik ve yastık — satır şişmesin diye. */
.editable__input {
  width: 100%;
  min-width: 90px;
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  font: inherit;
  color: var(--text);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  box-shadow: var(--ring);
  appearance: none;
}

.editable__input:focus { outline: none; }

/* `appearance: none` native oku ve takvim glifini siliyor; yerine hiçbir şey
   konmadığı için seçim kutusu açılır olduğunu, tarih alanı da tarih
   olduğunu belli etmiyordu. Çizimler `.select` ve `.input[type="date"]` ile
   aynı — yalnızca küçük boya göre daha dar yerleşiyorlar. */
select.editable__input,
input[type="date"].editable__input {
  padding-right: var(--space-6);
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
}

select.editable__input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

input[type="date"].editable__input {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

/* Tıklama alanı çizilen ikonun üstünde — büyük alandaki kuralın aynısı */
input[type="date"].editable__input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--space-2);
  width: 14px;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* Kaydediliyor / kaydedildi / hata.
   Bunlar da `.editable` yerine `[data-edit]`e bağlı: birleşik seçici
   `.editable.is-saving`, hücrede `editable` sınıfı hiç oluşmadığı için
   hiçbir zaman eşleşmiyordu — kaydetme geri bildirimi de görünmüyordu. */
[data-edit].is-saving { opacity: 0.55; }

[data-edit].is-saved {
  animation: editable-saved 900ms var(--ease);
}

@keyframes editable-saved {
  0%   { background: var(--success-bg); }
  100% { background: transparent; }
}

[data-edit].is-error {
  background: var(--danger-bg);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}

.editable__error {
  display: block;
  margin-top: 2px;
  font-size: var(--text-2xs);
  color: var(--danger);
}