/* ==========================================================================
   iOS GÖRÜNÜMÜ — yalnızca uygulama içinde

   app.css bir masaüstü yönetim panelinin tasarım sistemi. Bu dosya onu
   uygulamanın içinde bir iOS uygulamasına çeviriyor. "Mobil uyarlama" değil:
   renk, tipografi, yüzey ve bileşen dili baştan Apple'ın sisteminden alınıyor.

   ÜÇ TEMEL KARAR

   1. RENK MARKADAN GELMEZ
      Panelde vurgu rengi şirketin kurumsal rengi (Seç Atlı'da amber). Bir iOS
      uygulamasında arayüz tonu sistemin mavisidir; düğme, bağlantı, seçili
      sekme onunla çizilir. Kurumsal renk arayüz tonu olunca uygulama "markalı
      web paneli" gibi görünüyordu. Palet artık tamamen Apple'ın sistem
      renkleri. (app.js `applyAccent` uygulamada hiç çalışmıyor.)

   2. YÜZEY GÖLGEYLE DEĞİL ZEMİNLE AYRILIR
      Web'de kart gölgeyle zeminden ayrılır. iOS'ta gruplanmış liste zemini
      gri (koyu temada saf siyah), adalar düz beyaz/koyu gri — gölge yok,
      çerçeve yok. Bütün `box-shadow` değerleri burada sıfırlanıyor.

   3. TİPOGRAFİ ÖLÇEĞİ APPLE'IN
      17px gövde, 34px büyük başlık, 13px dipnot ve her birinin kendi harf
      aralığı. Harf aralıkları uydurma değil: SF Pro'nun her punto için optik
      aralığı farklı, değerler ondan geliyor. Rakamlar tabular — liste
      kayarken haneler oynamasın.

   Bölümler: 1 Palet · 2 Tipografi · 3 Temel · 4 Navigasyon · 5 Sekme çubuğu
             6 Gruplanmış liste · 7 Kart ve özet · 8 Form · 9 Denetimler
             10 Sheet · 11 Action sheet · 12 Rozet · 13 Tablo · 14 Devinim
   ========================================================================== */

/* ================================================================ 1 PALET
   Yön: sessiz nötr + tek vurgu.

   Stok iOS paleti çalışıyordu ama "sistem varsayılanı" gibi duruyordu: ağır
   ayırıcılar (%29 opaklık), her yerde mavi, doygun rozetler. Burada üç şey
   değişti:

     · AYIRICILAR İNCELDİ. %29 yerine %8. Ekranı çizgiler değil boşluk
       bölüyor; modern arayüzlerin en belirgin ortak yanı bu.
     · VURGU SEYRELDİ. Mavi yalnızca üç yerde: birincil eylem, seçili sekme
       ve çubuktaki eylemler. Geri kalan her şey nötr. Renk azaldıkça
       hiyerarşi güçleniyor.
     · NÖTRLER GERÇEKTEN NÖTR. iOS'un grileri hafif mavimsi; buradakiler saf
       gri, böylece tek renk (mavi) daha temiz okunuyor.
   ========================================================================== */
:root[data-native] {
  color-scheme: light;

  /* Tek vurgu. Stok #007AFF değil: biraz daha derin ve doygun, "sistem
     varsayılanı" izlenimi bırakmıyor, beyaz üstünde kontrastı daha yüksek. */
  --accent: #0B5CFF;
  --accent-ink: #FFFFFF;
  --accent-text: #0B5CFF;
  --accent-wash: rgba(11, 92, 255, .08);
  --accent-edge: rgba(11, 92, 255, .18);

  --bg: #F4F4F6;          /* sayfa */
  --panel: #FFFFFF;       /* ada */
  --panel-2: #F4F4F6;
  --bg-soft: #ECECEF;

  --raise:   rgba(0, 0, 0, .045);
  --raise-2: rgba(0, 0, 0, .075);

  /* Saç teli: iOS'un yarısından da ince. Ayırıcı görünmesin, sezilsin. */
  --line:   rgba(0, 0, 0, .08);
  --line-2: rgba(0, 0, 0, .14);

  --text:   #0A0A0B;
  --text-2: #6B6B70;
  --text-3: #A1A1A6;

  /* Anlam renkleri soluk dolgu + koyu yazı olarak kullanılıyor; doygun
     dolgular arayüzü "uyarı panosu" gibi gösteriyordu. */
  --ok:     #16A34A;  --ok-ink:     #15803D;
  --danger: #E11D48;  --danger-ink: #BE123C;
  --warn:   #D97706;  --warn-ink:   #B45309;
  --info:   #0B5CFF;  --info-ink:   #0B5CFF;

  --r-sm: 8px;
  --r:    14px;    /* ada — iOS'tan biraz daha yumuşak */
  --r-lg: 12px;    /* düğme */
  --r-xl: 18px;    /* sheet */

  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 -8px 40px rgba(0, 0, 0, .14);

  --ios-nav: 44px;
  --ios-tab: 49px;
  --ios-kenar: 16px;
  --ios-satir: 46px;
  --ios-nav-h: 96px;
  --ust: env(safe-area-inset-top, 0px);
  --alt: env(safe-area-inset-bottom, 0px);

  --hair: .5px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --blur: saturate(180%) blur(20px);
}

:root[data-native][data-theme="dark"] {
  color-scheme: dark;

  --accent: #4D8DFF;
  --accent-text: #4D8DFF;
  --accent-wash: rgba(77, 141, 255, .14);
  --accent-edge: rgba(77, 141, 255, .26);

  /* Koyu temada zemin saf siyah, ada ondan bir tık açık. Aradaki fark
     çizgiyle değil ışıkla veriliyor. */
  --bg: #000000;
  --panel: #141416;
  --panel-2: #1D1D20;
  --bg-soft: #1D1D20;

  --raise:   rgba(255, 255, 255, .07);
  --raise-2: rgba(255, 255, 255, .12);

  --line:   rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .15);

  --text:   #FAFAFA;
  --text-2: #9A9AA0;
  --text-3: #6B6B70;

  --ok:     #4ADE80;  --ok-ink:     #4ADE80;
  --danger: #FB7185;  --danger-ink: #FB7185;
  --warn:   #FBBF24;  --warn-ink:   #FBBF24;
  --info:   #4D8DFF;  --info-ink:   #4D8DFF;

  --shadow-3: 0 -8px 40px rgba(0, 0, 0, .6);
}

/* =========================================================== 2 TİPOGRAFİ
   Ölçek iOS'tan bir tık sıkı: gövde 16px, harf aralığı daha dar. Amaç aynı
   ekrana daha çok bilgi sığdırmak değil — daha sıkı aralık metni "kurulu"
   gösteriyor, gevşek aralık ise büyütülmüş web sayfası hissi veriyordu. */
:root[data-native] body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.375;
  letter-spacing: -.011em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root[data-native] .num,
:root[data-native] .kpi-value,
:root[data-native] .ios-row-deger,
:root[data-native] .detail-cell .v,
:root[data-native] .mono { font-variant-numeric: tabular-nums; }

:root[data-native] .mono {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  letter-spacing: -.01em;
}

/* Başlıklar dul satır bırakmasın. */
:root[data-native] h1, :root[data-native] h2,
:root[data-native] h3, :root[data-native] h4,
:root[data-native] .ios-nav-large { text-wrap: balance; }
:root[data-native] p { text-wrap: pretty; }

:root[data-native] h1 { font-size: 26px; font-weight: 700; letter-spacing: -.028em; }
:root[data-native] h2 { font-size: 20px; font-weight: 650; letter-spacing: -.024em; }
:root[data-native] h3,
:root[data-native] h4 { font-size: 16px; font-weight: 620; letter-spacing: -.016em; }
:root[data-native] .tiny { font-size: 13px; letter-spacing: -.004em; }
:root[data-native] .dim,
:root[data-native] .muted { color: var(--text-2); }

/* ================================================ 2b ERİŞİM VE DOKUNMA
   Web Interface Guidelines denetiminde çıkan eksikler. Hepsi tek yerde
   toplandı ki bileşen eklerken gözden kaçmasın. */

/* Çift dokunuşla yakınlaştırma gecikmesi (300ms) kalksın. */
:root[data-native] button,
:root[data-native] a,
:root[data-native] label,
:root[data-native] input,
:root[data-native] select,
:root[data-native] .ios-row { touch-action: manipulation; }

/* `outline: none` tek başına bırakılmıyor: klavye/erişim teknolojisiyle
   gezen kullanıcı odağın nerede olduğunu görmeli. `:focus-visible` seçildi
   ki parmakla dokununca halka çıkmasın. */
:root[data-native] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:root[data-native] .ios-row:focus-visible,
:root[data-native] .field:focus-within { outline-offset: -2px; }

/* ================================================================ 3 TEMEL */
:root[data-native] {
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
:root[data-native] input,
:root[data-native] textarea,
:root[data-native] .ios-secilir { -webkit-user-select: text; user-select: text; }

:root[data-native] body { overscroll-behavior-y: none; }

:root[data-native] .shell,
:root[data-native] .main { display: block; }

:root[data-native] .page {
  padding: calc(var(--ios-nav-h) + 8px) 0 calc(var(--alt) + var(--ios-tab) + 28px);
  max-width: none;
}

:root[data-native] .card,
:root[data-native] .kpi,
:root[data-native] .module-card,
:root[data-native] .seg { box-shadow: none; }

/* =========================================================== 4 NAVİGASYON */
:root[data-native] .ios-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding-top: var(--ust);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  /* Ayırıcı yalnızca sayfa kaydırılınca belirir — iOS aynen böyle. */
  box-shadow: 0 var(--hair) 0 0 transparent;
  transition: box-shadow .2s var(--ease);
}
:root[data-native] .ios-nav[data-kucuk] { box-shadow: 0 var(--hair) 0 0 var(--line); }

.ios-nav-bar {
  height: var(--ios-nav);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 6px;
}

/* Küçük başlık (Headline) — yalnızca kaydırıldığında. */
.ios-nav-title {
  grid-column: 2;
  font-size: 16px; font-weight: 620; letter-spacing: -.016em;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 58vw;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.ios-nav[data-kucuk] .ios-nav-title { opacity: 1; transform: none; }

/* Büyük başlık (Large Title 34/41 bold). */
.ios-nav-large {
  padding: 4px var(--ios-kenar) 12px;
  font-size: 32px; font-weight: 700; letter-spacing: -.032em; line-height: 1.16;
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: left bottom;
  transition: opacity .18s var(--ease), transform .22s var(--ease),
              height .22s var(--ease), padding .22s var(--ease);
}
.ios-nav-large > span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Açıklama satırı Footnote; büyük başlığın harf aralığını devralmasın. */
.ios-nav-large .ios-nav-desc {
  margin-top: 3px;
  font-size: 13.5px; font-weight: 400; line-height: 1.4;
  letter-spacing: -.002em; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ios-nav[data-kucuk] .ios-nav-large {
  opacity: 0; transform: scale(.82) translateY(-6px);
  height: 0; padding-top: 0; padding-bottom: 0;
  pointer-events: none; overflow: hidden;
}

/* Geri düğmesi — chevron + "Geri", sistem mavisi. */
.ios-back {
  grid-column: 1; justify-self: start;
  display: none; align-items: center; gap: 3px;
  height: 44px; padding: 0 10px 0 6px;
  color: var(--accent); font-size: 17px; letter-spacing: -.408px;
}
.ios-back svg { stroke-width: 2.4; }
.ios-nav[data-geri] .ios-back { display: flex; }
.ios-back:active { opacity: .35; }

.ios-nav-actions {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center;
}
/* Çubuktaki eylem bir kutu değil, düz mavi ikondur.
   `:root[data-native]` öneki şart: 9. bölümdeki genel düğme kuralı da aynı
   önekle yazıldığı için, o olmadan burası özgüllükte geride kalıyor ve
   "+" dolu mavi bir kutu olarak çıkıyordu. */
:root[data-native] .ios-nav-actions .btn,
:root[data-native] .ios-nav-actions .icon-btn {
  height: 44px; min-width: 40px; padding: 0 6px;
  background: none; border: 0; box-shadow: none;
  color: var(--accent); font-size: 17px; font-weight: 400;
}
:root[data-native] .ios-nav-actions .btn.primary { background: none; color: var(--accent); }
/* İkonu olan düğmenin yazısı gizlenir: `font-size: 0` çıplak metin
   düğümlerini de kapatır (CSS'te onları başka türlü hedeflemek mümkün değil),
   ikon etkilenmez. İkonsuz düğmeler (örn. "Bitti") yazılı kalır. */
:root[data-native] .ios-nav-actions .btn:has(svg) { font-size: 0; gap: 0; }
:root[data-native] .ios-nav-actions svg { width: 22px; height: 22px; stroke-width: 2; }
:root[data-native] .ios-nav-actions .btn:active,
:root[data-native] .ios-nav-actions .icon-btn:active { opacity: .35; }

/* ========================================================= 5 SEKME ÇUBUĞU */
.ios-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; padding-bottom: var(--alt);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 calc(-1 * var(--hair)) 0 0 var(--line);
}
.ios-tab {
  flex: 1; height: var(--ios-tab);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-2);
  font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0;
  transition: color .1s;
}
.ios-tab svg { width: 24px; height: 24px; stroke-width: 1.6; }
.ios-tab.active { color: var(--accent); }
.ios-tab.active svg { stroke-width: 2.2; }
.ios-tab:active { opacity: .45; }

/* ==================================================== 6 GRUPLANMIŞ LİSTE */
.ios-groups { display: flex; flex-direction: column; gap: 30px; }

/* Grup başlığı: küçük, büyük harf, ikincil renk — iOS Ayarlar'daki gibi. */
/* Büyük harf başlık iOS'un eski dili; küçük ve yarı kalın olanı daha sakin
   ve modern okunuyor. */
.ios-group-head {
  padding: 0 calc(var(--ios-kenar) + 2px) 8px;
  font-size: 13px; font-weight: 550; letter-spacing: -.004em; color: var(--text-2);
}

.ios-list {
  margin: 0 var(--ios-kenar);
  background: var(--panel);
  border-radius: var(--r);
  overflow: hidden;
}

.ios-row {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--ios-satir); padding: 12px var(--ios-kenar) 12px 16px;
  position: relative;
  color: var(--text); font-size: 16px; letter-spacing: -.014em;
}
/* Ayırıcı içeriden başlar; solda ikon varsa onun hizasından. */
.ios-row + .ios-row::before,
.ios-row + .ios-tablo-ac::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 0;
  border-top: var(--hair) solid var(--line);
}
.ios-row.ios-ikonlu + .ios-row.ios-ikonlu::before { left: 57px; }
/* Sevkiyat: faturası kesilen yeşil, reddedilen kırmızı — masaüstü tablosuyla
   aynı (app.css). :active'ten önce: basınca geri bildirim yine görünsün. */
.ios-row[data-invoiced="1"] { background: var(--ok-bg); }
.ios-row[data-invoiced="1"] :is(.ios-row-main b, .ios-row-main small, .ios-row-deger) {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-2);
}
.ios-row[data-status="rejected"] { background: var(--danger-bg); }
.ios-row:active { background: var(--raise); }

.ios-row-ico {
  width: 20px; flex: none; display: grid; place-items: center; color: var(--text-2);
}
/* Renkli fayans — iOS Ayarlar satırlarının solundaki kare. 29pt, 7px köşe,
   içindeki glif beyaz ve ince. */
.ios-fayans {
  width: 29px; height: 29px; flex: none; border-radius: 7px;
  display: grid; place-items: center; color: #FFF;
}
.ios-fayans svg { width: 17px; height: 17px; stroke-width: 2; }
.ios-row-main { flex: 1; min-width: 0; }
.ios-row-main b {
  display: block; font-weight: 500; font-size: 16px; letter-spacing: -.014em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Alt satır Footnote; başlıktan belirgin biçimde geride durmalı. */
.ios-row-main small {
  display: block; margin-top: 2px;
  font-size: 13px; letter-spacing: -.002em; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ios-row-deger {
  flex: none; color: var(--text); font-size: 15px; font-weight: 500;
  letter-spacing: -.012em;
}
/* Chevron: iOS'ta ince, küçük ve soluk. */
.ios-row > svg:last-child {
  width: 14px; height: 14px; flex: none;
  color: var(--text-3); stroke-width: 2.6;
}

.ios-group-foot {
  padding: 7px var(--ios-kenar) 0;
  font-size: 13px; letter-spacing: -.078px; color: var(--text-2); line-height: 1.38;
}

/* ======================================================= 7 KART VE ÖZET
   Panelin KPI kartları web kartıydı: ikon sağ üstte, gölge, geniş dolgu.
   iOS'ta özet sayı bir ada içinde durur; ikon yoktur, sayı büyüktür, etiket
   küçük ve ikincildir. */
:root[data-native] .card {
  margin: 0 var(--ios-kenar); border-radius: var(--r); background: var(--panel);
}
/* Liste kendi adasını çiziyor; onu saran kart ikinci bir yüzey katıyordu. */
:root[data-native] .card:has(> .ios-list),
:root[data-native] .card:has(> .card-body.flush > .ios-list) {
  margin: 0; background: none; border-radius: 0;
}
:root[data-native] .card:has(> .ios-list) > .ios-list { margin: 0 var(--ios-kenar); }
:root[data-native] .card-body { padding: 14px 16px; }
:root[data-native] .card-body.flush { padding: 0; }

:root[data-native] .grid { margin: 0 var(--ios-kenar); gap: 10px; }
:root[data-native] .grid.g-4,
:root[data-native] .grid.g-3,
:root[data-native] .grid.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-native] .grid.g-32,
:root[data-native] .grid.g-23 { grid-template-columns: minmax(0, 1fr); }

/* ÖZET ŞERİDİ
   Dört KPI kartı iki sıra hâlinde ekranın ilk perdesini yiyordu: kullanıcı
   listeye ancak bir ekran kaydırdıktan sonra varıyordu. Native uygulamalar
   önce veriyi gösterir. Kartlar yatay kayan tek sıra fayansa dönüştü —
   dikeyde üçte iki yer kazanıldı, sayıların hiçbiri kaybolmadı. */
:root[data-native] .grid:has(> .kpi) {
  display: flex; flex-wrap: nowrap; gap: 8px;
  margin: 0; padding: 0 var(--ios-kenar) 2px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
:root[data-native] .grid:has(> .kpi)::-webkit-scrollbar { display: none; }
/* Şerit sağ kenara yapışmasın. */
:root[data-native] .grid:has(> .kpi)::after { content: ''; flex: 0 0 1px; }

:root[data-native] .kpi {
  padding: 12px 14px 13px; border-radius: var(--r); background: var(--panel);
}
:root[data-native] .grid:has(> .kpi) > .kpi {
  flex: 0 0 auto; min-width: 138px; max-width: 200px;
  scroll-snap-align: start;
}
:root[data-native] .grid:has(> .kpi) .kpi-value { font-size: 23px; margin-top: 4px; }
:root[data-native] .grid:has(> .kpi) .kpi-value small { font-size: 13px; }
:root[data-native] .grid:has(> .kpi) .kpi-foot { margin-top: 4px; font-size: 11.5px; }
:root[data-native] .grid:has(> .kpi) .kpi-foot span:last-child { display: none; }
:root[data-native] .kpi-ico { display: none; }   /* web kartına ait işaret */
:root[data-native] .kpi-label {
  font-size: 13px; font-weight: 500; letter-spacing: -.002em; color: var(--text-2);
}
:root[data-native] .kpi-value {
  margin-top: 5px;
  font-size: 27px; font-weight: 650; letter-spacing: -.032em; line-height: 1.1;
}
:root[data-native] .kpi-value small {
  margin-left: 3px;
  font-size: 14px; font-weight: 450; letter-spacing: -.008em; color: var(--text-3);
}
:root[data-native] .kpi-foot {
  margin-top: 5px; gap: 4px;
  font-size: 12px; letter-spacing: 0; color: var(--text-3);
}
:root[data-native] .kpi-foot .delta { font-weight: 500; }
:root[data-native] .kpi-foot svg { width: 12px; height: 12px; }

/* ================================================================= 8 FORM
   Form da gruplanmış liste: solda etiket, sağda değer, alan çerçevesi yok. */
:root[data-native] .form-grid { display: block; margin: 0; }

:root[data-native] .field {
  /* app.css'te alan dikey: etiket üstte, kutu altta. iOS'ta satır yatay —
     yönü açıkça geri almazsak etiketle değer alt alta kalıyor. */
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  min-height: var(--ios-satir); padding: 8px 16px;
  position: relative; background: var(--panel);
  margin: 0 var(--ios-kenar);
}
:root[data-native] .field + .field::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 0;
  border-top: var(--hair) solid var(--line);
}

/* Ada köşeleri: bir grubun ilk ve son alanı yuvarlanır. Gruplar `.form-sep`
   ile ayrıldığı için sınırlar kardeş seçicilerle bulunuyor. */
:root[data-native] .form-grid > .field:first-child,
:root[data-native] .form-sep + .field { border-radius: var(--r) var(--r) 0 0; }
:root[data-native] .form-grid > .field:last-child,
:root[data-native] .field:has(+ .form-sep) { border-radius: 0 0 var(--r) var(--r); }
:root[data-native] .form-grid > .field:only-child,
:root[data-native] .form-sep + .field:has(+ .form-sep) { border-radius: var(--r); }

/* Çok satırlı alanlar yatay satıra sığmaz: etiket üstte kalır. */
:root[data-native] .field:has(textarea) { flex-direction: column; align-items: stretch; gap: 2px; }
:root[data-native] .field:has(textarea) > label { width: auto; max-width: none; }
:root[data-native] .field > label {
  flex: none; width: 40%; max-width: 148px; margin: 0;
  font-size: 17px; font-weight: 400; letter-spacing: -.408px;
  color: var(--text); text-transform: none;
}
:root[data-native] .field .input,
:root[data-native] .field .select,
:root[data-native] .field textarea {
  flex: 1; min-width: 0;
  height: 32px; padding: 0; border: 0; background: none; box-shadow: none;
  font-size: 17px; letter-spacing: -.408px; text-align: right; color: var(--text);
}
:root[data-native] .field .input::placeholder { color: var(--text-3); }
:root[data-native] .field textarea {
  height: auto; min-height: 78px; text-align: left; padding: 7px 0;
}
:root[data-native] .field .input:focus,
:root[data-native] .field .select:focus { box-shadow: none; outline: none; }
/* İpucu, alanın altında kendi satırında durur. Mutlak konumlandırıldığında
   satırın alt kenarına yapışıp bir sonraki alanın ayırıcısının üstüne
   biniyordu — "kutular kaymış" görünümünün sebebi buydu. */
:root[data-native] .field { flex-wrap: wrap; }
:root[data-native] .field .hint {
  position: static; order: 3; flex: 1 0 100%;
  margin-top: 3px; text-align: left;
  font-size: 12px; line-height: 1.34; color: var(--text-3);
}

/* Birim ekli alanlar (kg, ₺/kg) tek bir alan gibi davranmalı. */
:root[data-native] .field .input-wrap {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  height: 32px; padding: 0; border: 0; background: none; box-shadow: none;
}
:root[data-native] .field .input-wrap .input { text-align: right; }
:root[data-native] .field .input-wrap .suffix { flex: none; color: var(--text-2); font-size: 15px; }
:root[data-native] .form-sep {
  padding: 26px calc(var(--ios-kenar) * 2) 7px; background: var(--bg); border: 0;
  font-size: 13px; letter-spacing: -.078px; text-transform: uppercase; color: var(--text-2);
}
/* Masaüstünde başlığın yanında ekranı kesen bir çizgi var; iOS'ta grup
   başlığı yalnızca yazıdır, çizgiyi ayırıcılar zaten veriyor. */
:root[data-native] .form-sep::after { display: none; }
:root[data-native] .form-sep span {
  font-size: 13px; font-weight: 400; letter-spacing: -.078px; color: var(--text-2);
}

/* Yeniden boyutlandırma tutamacı masaüstü işaretidir; dokunmatikte yeri yok. */
:root[data-native] textarea { resize: none; }

/* =========================================================== 9 DENETİMLER */
:root[data-native] .btn {
  height: 46px; padding: 0 18px; border: 0; border-radius: var(--r-lg);
  background: var(--raise); color: var(--text);
  font-size: 16px; font-weight: 550; letter-spacing: -.012em; box-shadow: none;
  transition: opacity .12s var(--ease), background-color .12s var(--ease);
}
:root[data-native] .btn.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
:root[data-native] .btn.danger { background: var(--danger); color: #FFF; font-weight: 600; }
:root[data-native] .btn.sm { height: 36px; font-size: 15px; letter-spacing: -.23px; }
:root[data-native] .btn:active { opacity: .72; }

:root[data-native] .icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 99px;
  background: none; color: var(--accent); box-shadow: none;
}
:root[data-native] .icon-btn:active { opacity: .35; }

/* Segment denetimi — gri yatak, beyaz seçili blok. */
:root[data-native] .seg {
  display: flex; margin: 0 var(--ios-kenar) 14px; padding: 2px; gap: 0;
  background: var(--raise); border-radius: 9px;
}
:root[data-native] .seg button {
  flex: 1; height: 30px; border: 0; border-radius: 7px; background: none;
  font-size: 13px; font-weight: 500; letter-spacing: -.078px; color: var(--text);
  white-space: nowrap;
}
:root[data-native] .seg button.on,
:root[data-native] .seg button.active {
  background: var(--panel); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
}

/* Filtreler
   Masaüstünde tek satır olan filtre çubuğu telefonda dört sıraya yayılıp
   ekranın yarısını yiyordu. Üç kata ayrıldı: arama tam genişlik, dönem
   seçici tam genişlik, kalanlar içerikleri kadar geniş hap düğmeler. */
:root[data-native] .filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 0 var(--ios-kenar) 12px; margin: 0;
  /* Masaüstünde beyaz bir şerit; gruplanmış gri sayfada kesik bir blok gibi
     duruyordu. Denetimler zeminin üstünde yüzsün. */
  background: none; border: 0; box-shadow: none;
}
:root[data-native] .filters .search,
:root[data-native] .filters > .seg { flex: 1 0 100%; max-width: none; margin: 0; }
:root[data-native] .filters .select,
:root[data-native] .filters .input {
  flex: 0 1 auto; width: auto; min-width: 0; max-width: none;
  height: 34px; padding: 0 12px; border: 0; border-radius: 99px;
  background: var(--raise); color: var(--text);
  font-size: 15px; letter-spacing: -.23px;
}
/* Arama alanı tam satır. Sınıf hem `.input` hem `.search` olduğu için iki
   kural aynı özgüllükte çakışıyordu; birleşik seçici tartışmayı bitiriyor. */
:root[data-native] .filters .input.search,
:root[data-native] .filters .search .input {
  flex: 1 0 100%; width: auto; max-width: none; height: 36px;
}
:root[data-native] .filters .sep { display: none; }

/* Filtre çubuğundaki düğmeler (Tümü / Dış alım / Harman) iOS'ta hap biçiminde
   süzgeç düğmesidir — büyük dolu düğme değil. */
:root[data-native] .filters .btn {
  flex: 0 1 auto; height: 32px; padding: 0 13px; border-radius: 99px;
  background: var(--raise); color: var(--text);
  font-size: 15px; font-weight: 400; letter-spacing: -.23px;
}
:root[data-native] .filters .btn.primary { background: var(--accent); color: #FFF; font-weight: 590; }
:root[data-native] .filters .btn svg { width: 15px; height: 15px; }

/* Katlanmış filtreler — bkz. ios-shell.js `filtreleriKatla`. */
:root[data-native] .filters[data-katli] > :not(.search):not(.seg):not(.btn):not(.ios-filtre-ac) {
  display: none;
}
:root[data-native] .filters[data-katli][data-acik] > * { display: revert; }
:root[data-native] .filters[data-katli][data-acik] > .sep { display: none; }

.ios-filtre-ac {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 13px; border: 0; border-radius: 99px;
  background: var(--raise); color: var(--accent);
  font-size: 15px; letter-spacing: -.23px;
}
.ios-filtre-ac:active { opacity: .6; }
:root[data-native] .filters[data-acik] .ios-filtre-ac {
  background: var(--accent); color: #FFF;
}
/* Anahtar (Analizi eksik) katlanınca da okunur kalsın. */
:root[data-native] .filters .switch { flex: none; }
:root[data-native] .filters label.switch { display: inline-flex; align-items: center; gap: 8px; }

/* Anahtar (switch) — iOS'un kendi ölçüsü. */
:root[data-native] .switch { width: 51px; height: 31px; border-radius: 99px; }
:root[data-native] .switch::after { width: 27px; height: 27px; }
:root[data-native] .switch.on { background: var(--ok); }

:root[data-native] .empty { padding: 44px 24px; }
:root[data-native] .empty h4 { font-size: 17px; font-weight: 600; }
:root[data-native] .empty p { font-size: 15px; letter-spacing: -.23px; color: var(--text-2); }

/* Sayfa başlığı gövdede tekrar etmez — o iş navigasyon çubuğunun. */
:root[data-native] .page-head { padding: 0 0 4px; }
:root[data-native] .page-title,
:root[data-native] .page-desc { display: none; }
:root[data-native] .page-actions { margin: 0; width: 100%; }
:root[data-native] .search-trigger,
:root[data-native] .menu-btn { display: none; }

/* ====================================================== 10 TAM EKRAN MODAL
   Kayıt açmak/düzenlemek ekranı kaplar. Alttan yarım açılan panelde form
   doldurulmuyor: klavye açılınca geriye üç satır kalıyordu.

   Çubuk düzeni iOS'un kendi modal düzeni: solda İptal, ortada başlık, sağda
   birincil eylem. Üçü de aynı hizada, hepsi parmağın üst bölgesinde.
   ========================================================================== */
:root[data-native] .scrim { background: rgba(0, 0, 0, .3); }

:root[data-native] .drawer {
  inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  border-radius: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  animation: ios-modal .4s var(--ease-ios);
}
@keyframes ios-modal { from { transform: translateY(100%); } to { transform: none; } }

/* Tam ekranda tutamaç yok — sürüklenecek bir sheet değil. */
:root[data-native] .drawer::before { content: none; }

:root[data-native] .drawer-head {
  flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: calc(var(--ust) + 6px) 12px 10px;
  background: var(--panel);
  box-shadow: 0 var(--hair) 0 0 var(--line);
}
:root[data-native] .drawer-head .grow { grid-column: 2; text-align: center; min-width: 0; }
:root[data-native] .drawer-head h2 {
  font-size: 16px; font-weight: 620; letter-spacing: -.016em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[data-native] .drawer-head p {
  margin-top: 1px; font-size: 12.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

:root[data-native] .drawer-iptal {
  grid-column: 1; justify-self: start;
  height: 44px; padding: 0 6px; border: 0; background: none;
  color: var(--accent); font-size: 16px; letter-spacing: -.012em;
}
:root[data-native] .drawer-iptal:active { opacity: .4; }

:root[data-native] .drawer-eylem { grid-column: 3; justify-self: end; }
/* Çubuktaki birincil eylem dolu düğme değil, kalın mavi yazıdır. */
:root[data-native] .drawer-eylem .btn.primary {
  height: 44px; padding: 0 6px; border-radius: 0;
  background: none; color: var(--accent);
  font-size: 16px; font-weight: 640; letter-spacing: -.012em;
}
:root[data-native] .drawer-eylem .btn.primary:active { opacity: .4; }
:root[data-native] .drawer-eylem .btn svg { display: none; }
:root[data-native] .drawer-eylem .btn:disabled { opacity: .35; }

:root[data-native] .drawer-body {
  flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 0 28px;
}

/* Geriye kalan ikincil eylemler (Sil, Kaydet ve yeni) ince bir şeritte. */
:root[data-native] .drawer-foot {
  flex: none;
  padding: 10px 16px calc(10px + var(--alt));
  background: var(--panel);
  box-shadow: 0 calc(-1 * var(--hair)) 0 0 var(--line);
}
:root[data-native] .drawer-foot .row { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-native] .drawer-foot .row > .grow { display: none; }
:root[data-native] .drawer-foot .btn { flex: 1 1 auto; height: 44px; font-size: 15px; }

/* Detay şeridi — sheet içindeki kayıt özeti.
   Masaüstünde üç sütunlu ızgara; telefonda değerler ikiye bölünüp okunmaz
   oluyordu. Aynı veri iOS'un iki sütunlu satırına dönüşüyor. */
:root[data-native] .detail-strip {
  display: block; margin: 0 var(--ios-kenar) 20px;
  background: var(--panel); border-radius: var(--r); overflow: hidden;
}
:root[data-native] .detail-cell {
  display: flex; align-items: baseline; gap: 14px;
  min-height: var(--ios-satir); padding: 11px 16px;
  position: relative; border: 0;
}
:root[data-native] .detail-cell + .detail-cell::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 0;
  border-top: var(--hair) solid var(--line);
}
:root[data-native] .detail-cell label {
  flex: none; margin: 0; text-transform: none;
  font-size: 17px; font-weight: 400; letter-spacing: -.408px; color: var(--text);
}
:root[data-native] .detail-cell .v {
  flex: 1; text-align: right; overflow-wrap: anywhere;
  font-size: 17px; letter-spacing: -.408px; color: var(--text-2);
}

/* Onay kutusu — iOS uyarısı: ortada, dar, düğmeler alt kenarda bölünmüş. */
:root[data-native] .modal {
  width: 270px; max-width: calc(100vw - 64px);
  border-radius: var(--r-xl); padding: 19px 16px 0;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  text-align: center; box-shadow: none;
}
:root[data-native] .modal h3 { font-size: 17px; font-weight: 600; }
:root[data-native] .modal p {
  margin-top: 3px; font-size: 13px; letter-spacing: -.078px; color: var(--text);
}
:root[data-native] .modal .acts {
  display: flex; margin: 16px -16px 0; padding: 0;
  border-top: var(--hair) solid var(--line);
}
:root[data-native] .modal .acts .btn {
  flex: 1; height: 44px; border-radius: 0; background: none;
  color: var(--accent); font-size: 17px; font-weight: 400;
}
:root[data-native] .modal .acts .btn + .btn {
  border-left: var(--hair) solid var(--line); font-weight: 600;
}
:root[data-native] .modal .acts .btn.danger { background: none; color: var(--danger); }

/* ======================================================= 11 ACTION SHEET */
:root[data-native] .menu {
  position: fixed !important;
  inset: auto 8px calc(8px + var(--alt)) 8px !important;
  width: auto !important; min-width: 0 !important; max-width: none !important;
  background: none; box-shadow: none; padding: 0; border: 0;
  animation: ios-sheet .38s var(--ease-ios);
}
:root[data-native] .menu-ada {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: 14px; overflow: hidden;
}
:root[data-native] .menu-ada + .menu-ada { margin-top: 8px; }
:root[data-native] .menu button {
  width: 100%; height: 57px; padding: 0 16px; border: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--accent);
  font-size: 20px; font-weight: 400; letter-spacing: -.45px;
}
:root[data-native] .menu button + button { border-top: var(--hair) solid var(--line); }
:root[data-native] .menu button:active { background: var(--raise); }
:root[data-native] .menu button.danger { color: var(--danger); }
:root[data-native] .menu button.iptal { font-weight: 600; }
:root[data-native] .menu .head {
  padding: 14px 16px; text-align: center;
  font-size: 13px; letter-spacing: -.078px; color: var(--text-2);
  border-bottom: var(--hair) solid var(--line);
}
:root[data-native] .menu button svg { display: none; }

/* ============================================================== 12 ROZET
   iOS'ta durum rozeti renkli kutu değil, soluk dolgulu küçük bir haptır. */
:root[data-native] .badge {
  height: 20px; padding: 0 8px; border-radius: 99px; border: 0;
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 590; letter-spacing: -.02px;
}
:root[data-native] .badge.plain { background: var(--raise); color: var(--text-2); }
:root[data-native] .plate {
  height: 22px; border-radius: 5px; font-size: 12px; font-weight: 600;
}

/* =============================================================== 13 TABLO
   Liste özet verir; tam tablo tam ekran açılır. */
.ios-tablo-ac {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: var(--ios-satir); position: relative;
  background: none; border: 0;
  color: var(--accent); font-size: 17px; letter-spacing: -.408px;
}
.ios-tablo-ac:active { background: var(--raise); }
.ios-tablo-ac svg { width: 16px; height: 16px; }

.ios-tablo-tam {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg); display: flex; flex-direction: column;
  animation: ios-sheet .38s var(--ease-ios);
}
.ios-tablo-tam .ios-tablo-bar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(var(--ust) + 10px) 12px 10px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 var(--hair) 0 0 var(--line);
}
.ios-tablo-tam .ios-tablo-bar h3 { flex: 1; font-size: 17px; font-weight: 600; }
:root[data-native] .ios-tablo-tam .ios-tablo-bar .btn {
  height: 36px; padding: 0 8px; background: none; color: var(--accent); font-weight: 600;
}
.ios-tablo-tam .table-wrap {
  flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: var(--alt);
}

/* ============================================================ 14 DEVİNİM */
:root[data-native] .view-enter { animation: ios-itme .32s var(--ease-ios); }
@keyframes ios-itme {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}

:root[data-native] .toasts {
  left: 12px; right: 12px; bottom: calc(var(--alt) + var(--ios-tab) + 12px);
}
:root[data-native] .toast { border-radius: var(--r-lg); box-shadow: var(--shadow-3); }

@media (prefers-reduced-motion: reduce) {
  :root[data-native] .view-enter,
  :root[data-native] .drawer,
  :root[data-native] .menu,
  :root[data-native] .ios-tablo-tam { animation: none; }
}

/* ============================================================== 15 GİRİŞ
   Uygulamanın ilk ekranı; tasarımın tamamı buradan yargılanıyor.

   Masaüstündeki hâli ortada duran bir kart ve her şey ortalı. Telefonda bu
   iki sorun çıkarıyor: kabuk içinde ikinci kabuk oluyor, ve ortalı metin
   uzun Türkçe cümlelerde satır başlarını dağıtıyor. Burada düzen tek bir
   sol eksene oturuyor — marka, başlık, etiketler, yardım metni hepsi aynı
   hizadan başlıyor. Modern arayüzlerin ortak yanı bu tek eksen.

   Dikey ritim: marka üstte, başlık ve form ortada, yardım metni en altta.
   Aradaki boşluk `margin-top: auto` ile dağıtılıyor; sabit boşluk küçük
   ekranda taşıyor, büyük ekranda göbekte boşluk bırakıyordu.
   ========================================================================== */

/* Zemin: alt kenarda açık renk bir şerit kalıyordu — kök öğe boyanmıyordu. */
:root[data-native] { background: var(--bg); }

:root[data-native] .auth {
  display: block; min-height: 100dvh; padding: 0; background: var(--bg);
}
:root[data-native] .auth-box {
  box-sizing: border-box;
  /* app.css burada 360px'lik ortalı bir kutu kuruyor; telefonda tam genişlik. */
  width: 100%; max-width: 460px; margin: 0 auto;
  min-height: 100dvh;
  padding: calc(var(--ust) + 28px) 20px calc(var(--alt) + 24px);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  text-align: left;
}

/* --- marka: küçük, sessiz, solda --- */
:root[data-native] .auth-brand {
  /* app.css markayı dikey ve ortalı diziyor; burada tek satır, solda. */
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; margin: 0; text-align: left;
}
:root[data-native] .auth-brand .brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
:root[data-native] .auth-brand .brand-mark svg { width: 19px; height: 19px; }
:root[data-native] .brand-name { font-size: 14px; font-weight: 600; letter-spacing: -.012em; }
:root[data-native] .brand-sub { font-size: 12.5px; color: var(--text-2); }

/* --- başlık + form: dikeyde ortaya yakın --- */
/* Dikeyde tek boşluk: içerik üstte toplanıyor, yardım metni en alta
   itiliyor. İki ayrı `auto` boşluk kullanıldığında ekran ortada da altta da
   boşluk bırakıp dağınık duruyordu. */
:root[data-native] .auth-card {
  margin-top: 44px; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  text-align: left;
}
:root[data-native] .auth-card h1 {
  font-size: 34px; font-weight: 700; letter-spacing: -.034em; line-height: 1.1;
  text-align: left;
}
:root[data-native] .auth-card > p {
  margin-top: 8px; font-size: 15.5px; line-height: 1.4;
  color: var(--text-2); letter-spacing: -.008em; text-align: left;
}

:root[data-native] .auth-card form { margin-top: 30px; }

/* İki alan tek ada; etiket küçük ve üstte, değer altında büyük. */
:root[data-native] .auth-card .field {
  flex-direction: column; align-items: stretch; gap: 3px;
  margin: 0; padding: 11px 16px 12px; min-height: 0;
  background: var(--panel);
}
:root[data-native] .auth-card .field:first-of-type { border-radius: var(--r) var(--r) 0 0; }
:root[data-native] .auth-card .field + .field { border-radius: 0 0 var(--r) var(--r); }
:root[data-native] .auth-card .field + .field::before { left: 16px; }
:root[data-native] .auth-card .field > label {
  width: auto; max-width: none;
  font-size: 12px; font-weight: 550; letter-spacing: .002em; color: var(--text-2);
}
:root[data-native] .auth-card .field .input {
  width: 100%; height: 24px; text-align: left; padding: 0;
  font-size: 17px; letter-spacing: -.014em;   /* 17px: iOS odakta yakınlaştırmaz */
}

:root[data-native] .auth-card .btn.block {
  width: 100%; margin-top: 18px; height: 52px;
  font-size: 17px; font-weight: 620; border-radius: var(--r-lg);
}
/* Face ID ikincil yol; kutu değil düz yazı. */
:root[data-native] .auth-card .btn.ghost {
  margin-top: 8px; height: 46px;
  background: none; color: var(--accent); font-weight: 550;
}

:root[data-native] .auth-alert:not(:empty) {
  margin-top: 18px; padding: 12px 14px; border-radius: var(--r-lg); border: 0;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger-ink); font-size: 14px; line-height: 1.4;
}

/* --- yardım metni: en altta --- */
:root[data-native] .auth-foot {
  margin: auto 0 0; padding-top: 32px; text-align: left;
  font-size: 13px; line-height: 1.45; color: var(--text-3);
}