/* Uygulamanın ortak stili. index.html'de satır içiydi; sayfanın stil
   politikası (style-src 'self') satır içi <style>'a izin vermediği için
   ayrı dosyada. Bileşenlerin style={{…}} değerleri DOM üzerinden atandığı
   için bu politikadan etkilenmiyor. */

html, body { margin: 0; padding: 0; min-height: 100%; background: #F4F3F1; }
body {
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
#kok { min-height: 100vh; }
@supports (height: 100dvh) { #kok { min-height: 100dvh; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.ios-btn { border: none; background: none; font-family: inherit; cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ios-btn:disabled { cursor: default; }
.ios-in { width: 100%; font-family: inherit; font-size: 17px; color: #111111;
  background: none; border: none; padding: 11px 0; outline: none; min-width: 0; }
.ios-in::placeholder { color: rgba(17,17,17,0.26); }
.ios-in::-webkit-search-cancel-button { display: none; }
.ios-in, textarea { caret-color: #111111; }
.noscb::-webkit-scrollbar { height: 0; width: 0; }

/* ---- odak ----
   Metin alanları imleç konduğu anda :focus-visible ile eşleşiyor (şartname
   böyle: yazı kutuları fare/dokunmatikte de eşleşir). Kutunun kendi üstüne
   çizilen kalın çerçeve bu yüzden her dokunuşta çıkıyor ve kartın içinde
   kırpılmış siyah bir dikdörtgen gibi duruyordu.

   Onun yerine odak, alanı SARAN kabın işi: kap yumuşak bir halka ve hafif
   bir zemin alıyor. Klavyeyle gezenler yine net bir gösterge görüyor. */
.ios-in:focus, .ios-in:focus-visible, textarea:focus, select:focus { outline: none; }

/* Kenar rengine dokunulmuyor: bu kutuların kenarı satır içi stille veriliyor,
   satır içi stil her seçiciyi yener — halka tek başına ve her yerde çalışır. */
.odak { transition: box-shadow .3s cubic-bezier(.22,.9,.25,1), background .3s ease; }
.odak:focus-within { box-shadow: 0 0 0 4px rgba(17,17,17,.085); }

.odak-satir { transition: background .28s cubic-bezier(.22,.9,.25,1); }
.odak-satir:focus-within { background: rgba(17,17,17,.035); }

/* Düğmeler yalnızca klavyeyle gezildiğinde eşleşir; halka kendi köşe
   yarıçapını izlesin diye border-radius zorlanmıyor. */
.ios-btn:focus-visible, [role="button"]:focus-visible, select:focus-visible {
  outline: 2px solid rgba(17,17,17,.34); outline-offset: 3px; }

/* apple benzeri basma geri bildirimi
   Küçülme oranı 0.93'ten 0.96'ya çekildi: küçük yuvarlak düğmelerde hoştu ama
   tam genişlikteki düğmelerde sayfa zıplıyor gibi duruyordu. */
.tap { transition: transform .22s cubic-bezier(.2,.9,.25,1), opacity .18s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease, color .2s ease; }
.tap:active { transform: scale(.96); opacity: .84; }
.ios-row { transition: background .2s ease, transform .22s cubic-bezier(.2,.9,.25,1); }
.ios-row:active { background: #EFEEEA; transform: scale(.988); }

@keyframes iosspin { to { transform: rotate(360deg) } }
.spin { animation: iosspin .9s linear infinite; }

@keyframes satirGir { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.satir-gir { animation: satirGir .42s cubic-bezier(.22,.9,.25,1) both; }

@keyframes iosup { from { transform: translateY(100%) } to { transform: translateY(0) } }
.sheet-in { animation: iosup .42s cubic-bezier(.24,.9,.2,1); }
.sheet-boy { height: 94vh; }
@supports (height: 100dvh) { .sheet-boy { height: 94dvh; } }

@keyframes ekleGir { from { opacity: 0; transform: translateY(26px) scale(.96) } to { opacity: 1; transform: none } }
.ekle-gir { animation: ekleGir .34s cubic-bezier(.2,.9,.25,1) both; }

/* Yeni eklenen etiket/referans rozeti yerine otursun: listeye bir şeyin
   eklendiği görülsün diye, dikkat dağıtmadan. */
@keyframes rozetGir { from { opacity: 0; transform: scale(.82) } to { opacity: 1; transform: none } }
.rozet-gir { animation: rozetGir .26s cubic-bezier(.2,1.25,.4,1) both; }

/* Açılıp kapanan bölümler (ayarlardaki alt paneller, iş kalemi listesi) */
@keyframes yumusakAc { from { opacity: 0; transform: translateY(-7px) } to { opacity: 1; transform: none } }
.yumusak-ac { animation: yumusakAc .26s cubic-bezier(.22,.9,.25,1) both; }
@keyframes fonGir { from { opacity: 0 } to { opacity: 1 } }
.ort-sar { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end;
  justify-content: center; padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
  background: rgba(17,17,17,.26); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fonGir .25s ease both; }
.ort-kutu { width: 100%; max-width: 520px; }

/* Alt uyarı: form hataları sayfanın dibinde kalıyordu, uzun formda
   kaydırmadan görülmüyordu. Artık ekranın altında duruyor. */
@keyframes altGir { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.alt-uyari { position: fixed; left: 12px; right: 12px; z-index: 80;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; pointer-events: none; }
.alt-uyari > * { pointer-events: auto; width: 100%; max-width: 520px;
  box-shadow: 0 14px 40px rgba(17,17,17,.20), 0 3px 10px rgba(17,17,17,.10);
  animation: altGir .28s cubic-bezier(.2,.9,.25,1) both; }

.okuma-pil { position: fixed; left: 50%; transform: translateX(-50%); z-index: 45;
  bottom: calc(78px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px; font-size: 14.5px; color: #111111;
  background: rgba(255,255,255,0.74);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 10px 28px rgba(17,17,17,.14), inset 0 1px 0 rgba(255,255,255,.9);
  animation: satirGir .3s cubic-bezier(.22,.9,.25,1) both; }

/* dip ada */
.ada-sar { position: fixed; left: 0; right: 0; z-index: 40; display: flex; justify-content: center;
  bottom: calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.ada { pointer-events: auto; display: flex; align-items: center; gap: 13px; padding: 5px 16px;
  border-radius: 999px; background: rgba(255,255,255,0.60);
  backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 14px 40px rgba(17,17,17,.15), 0 3px 10px rgba(17,17,17,.07),
              inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(17,17,17,.04);
  animation: satirGir .5s cubic-bezier(.22,.9,.25,1) both; }
.ada-oge { width: 44px; height: 44px; border-radius: 999px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: transparent; }
/* Baret zeminsiz duruyor: düğmenin kendi arka planı yok, adanın camı
   üstünde yalnızca baret görünüyor. Koyu kartlı sürüm adaya yapıştırılmış
   ayrı bir kutu gibi duruyordu. */
.ada-arti { width: 62px; height: 46px; border: none; cursor: pointer;
  margin: 0 2px; background: none; display: flex; align-items: center;
  justify-content: center; position: relative; padding: 0; overflow: visible;
  filter: drop-shadow(0 4px 9px rgba(17,17,17,.24)); }
.ada-arti img { height: 100%; width: auto; display: block; }

select { -webkit-appearance: none; appearance: none; }
textarea { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  .sheet-in, .spin, .satir-gir, .ekle-gir, .ada, .ort-sar,
  .rozet-gir, .yumusak-ac, .okuma-pil, .alt-uyari > * { animation: none !important; }
  .tap, .ios-row, .odak, .odak-satir { transition: none !important; }
  .tap:active, .ios-row:active { transform: none !important; }
}

#acilis { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 16px;
  align-items: center; justify-content: center; background: #F4F3F1; z-index: 999;
  text-align: center; padding: 26px; color: rgba(17,17,17,.5); }
#acilis .hlk { width: 20px; height: 20px; border-radius: 999px; border: 2px solid rgba(17,17,17,.14);
  border-top-color: rgba(17,17,17,.45); animation: iosspin .9s linear infinite; }
#acilis p { margin: 0; font-size: 14px; line-height: 1.45; max-width: 300px; }
/* Sürüm numarası: "elimdeki hangi sürüm" sorusunun cevabı uygulama
   açılmadan da görünsün. Değeri derleme sırasında surumler.js'ten
   damgalanıyor. */
#surum { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom));
  font-size: 12px; color: rgba(17,17,17,.30); letter-spacing: .2px; }