/* ==================================================================
   Tasarım sistemi — Apple / iOS dili
   ------------------------------------------------------------------
   Font: sistem fontu üzerinden SF Pro. Apple cihazlarda gerçek SF Pro
   gelir; webfont indirmeye gerek yok, ki salondaki kötü 4G'de bu
   ayrıca kazanç. Diğer platformlarda yerel sistem fontuna düşer.

   Renkler: iOS sistem renkleri (systemBlue, systemGroupedBackground…).
   Karanlık mod zorunlu: yerel uygulama gibi hissettirmesinin şartı,
   kullanıcının cihaz temasına uyması.

   Ölçü: dokunma hedefleri 44px'in altına inmez (Apple HIG).
   ================================================================== */

:root {
  color-scheme: light dark;

  /* --- Sistem renkleri (açık) --- */
  --blue:        #007AFF;
  --blue-deep:   #0051D5;
  --green:       #34C759;
  --red:         #FF3B30;
  --orange:      #FF9500;
  --purple:      #AF52DE;
  --pink:        #FF2D55;

  /* --- Zeminler --- */
  --bg:          #F2F2F7;   /* systemGroupedBackground */
  --bg-raised:   #FFFFFF;   /* secondarySystemGroupedBackground */
  --bg-sunken:   #EFEFF4;
  --bg-bar:      rgba(249, 249, 249, .82);   /* saydam çubuk */

  /* --- Dolgular --- */
  --fill-1: rgba(120, 120, 128, .20);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(118, 118, 128, .12);
  --fill-4: rgba(116, 116, 128, .08);

  /* --- Yazı --- */
  --label:   #000000;
  /* Apple'ın secondaryLabel'ı .60; cam zemin üzerinde 3.2:1 veriyor ve
     WCAG AA'nın küçük metin için istediği 4.5'i geçmiyor. Apple bunu
     sistemdeki "Kontrastı Artır" ayarıyla telafi ediyor, webde o yok.
     .75 hesapla bulundu: AA'yı geçiyor, hâlâ ikincil duruyor.
     (Karanlık modda .60 zaten 5.2:1 veriyor, orada değişmedi.) */
  --label-2: rgba(60, 60, 67, .75);
  --label-3: rgba(60, 60, 67, .42);
  --label-4: rgba(60, 60, 67, .18);

  --separator: rgba(60, 60, 67, .29);
  --sep-solid: #C6C6C8;

  /* Seçili segment. Açıkta beyaz, karanlıkta açık gri: karanlıkta
     --bg-raised kullanılırsa hap raydan koyu kalıp kayboluyor. */
  --seg-on: #FFFFFF;

  /* --- Cam (Liquid Glass) ---
     Camı inandırıcı yapan üç şey: arkasını gerçekten bulanıklaştırması,
     rengi doyurması (saturate), ve kenarında ışığı yakalayan ince bir
     parlama olması. Üçü de olmadan sadece "yarı saydam kutu" olur. */
  --glass-bg:   rgba(255, 255, 255, .58);
  --glass-rim:  rgba(255, 255, 255, .75);
  --glass-edge: rgba(255, 255, 255, .30);
  --glass-blur: blur(40px) saturate(190%);

  /* --- Biçim --- */
  --r-card:  16px;
  --r-big:   22px;
  --r-glass: 26px;
  --r-pill:  980px;
  --tap:     44px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .12);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue:      #0A84FF;
    --blue-deep: #409CFF;
    --green:     #30D158;
    --red:       #FF453A;
    --orange:    #FF9F0A;
    --purple:    #BF5AF2;
    --pink:      #FF375F;

    --bg:        #000000;
    --bg-raised: #1C1C1E;
    --bg-sunken: #0A0A0B;
    --bg-bar:    rgba(30, 30, 32, .78);

    --fill-1: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(118, 118, 128, .24);
    --fill-4: rgba(116, 116, 128, .18);

    --label:   #FFFFFF;
    --label-2: rgba(235, 235, 245, .60);
    --label-3: rgba(235, 235, 245, .30);
    --label-4: rgba(235, 235, 245, .18);

    --separator: rgba(84, 84, 88, .65);
    --sep-solid: #38383A;

    --seg-on: #636366;

    --glass-bg:   rgba(28, 28, 30, .52);
    --glass-rim:  rgba(255, 255, 255, .16);
    --glass-edge: rgba(255, 255, 255, .08);

    --shadow-1: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, .6);
  }
}

/* ---------------- Temel ---------------- */

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

/* [hidden] her zaman kazanmalı. Tarayıcının varsayılan [hidden]{display:none}
   kuralı, bileşene verdiğimiz herhangi bir display (flex/grid) tarafından
   eziliyor ve gizli sanılan öğeler ekranda kalıyor. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 17px;              /* iOS body */
  line-height: 1.294;           /* 22/17 */
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

img, video { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--blue); text-decoration: none; }

/* ---------------- Tipografi (iOS ölçeği) ---------------- */

.t-large   { font-size: 34px; line-height: 1.206; font-weight: 700; letter-spacing: .37px; }
.t-title1  { font-size: 28px; line-height: 1.214; font-weight: 700; letter-spacing: .36px; }
.t-title2  { font-size: 22px; line-height: 1.273; font-weight: 700; letter-spacing: .35px; }
.t-title3  { font-size: 20px; line-height: 1.25;  font-weight: 600; letter-spacing: .38px; }
.t-head    { font-size: 17px; line-height: 1.294; font-weight: 600; letter-spacing: -.41px; }
.t-body    { font-size: 17px; line-height: 1.294; letter-spacing: -.41px; }
.t-callout { font-size: 16px; line-height: 1.313; letter-spacing: -.32px; }
.t-sub     { font-size: 15px; line-height: 1.333; letter-spacing: -.24px; }
.t-foot    { font-size: 13px; line-height: 1.385; letter-spacing: -.08px; }
.t-cap     { font-size: 12px; line-height: 1.333; }
.t-cap2    { font-size: 11px; line-height: 1.182; letter-spacing: .07px; }

.dim  { color: var(--label-2); }
.dim3 { color: var(--label-3); }

/* ---------------- Cam yüzey (Liquid Glass) ---------------- */

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-glass);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),          /* üst kenarın ışık yakalaması */
    inset 0 0 0 .5px var(--glass-edge),      /* camın ince kenarı */
    0 10px 34px rgba(0, 0, 0, .13),
    0 2px 6px rgba(0, 0, 0, .05);
}

/* backdrop-filter yoksa cam okunmaz olur; opak zemine düş. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--bg-raised); }
}

/* ---------------- Butonlar ---------------- */

/* iOS 26 kapsül-öncelikli: butonlar varsayılan olarak hap biçiminde. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap);
  padding: 12px 20px;
  font-size: 17px; font-weight: 600; letter-spacing: -.41px;
  border-radius: var(--r-pill);
  transition: transform .12s ease, opacity .15s ease, background .15s ease;
  user-select: none;
}
.btn--lg { min-height: 54px; padding: 16px 26px; font-size: 17px; }
.btn:active { transform: scale(.97); opacity: .85; }
.btn svg { width: 19px; height: 19px; flex: none; }

.btn--filled { background: var(--blue); color: #fff; }
.btn--filled:hover { background: var(--blue-deep); }

.btn--tinted { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.btn--tinted:hover { background: color-mix(in srgb, var(--blue) 22%, transparent); }

.btn--gray { background: var(--fill-3); color: var(--label); }
.btn--gray:hover { background: var(--fill-2); }

.btn--plain { color: var(--blue); padding: 12px 8px; }

.btn--danger { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.btn--danger:hover { background: color-mix(in srgb, var(--red) 22%, transparent); }

.btn--full { width: 100%; }
.btn--pill { border-radius: var(--r-pill); }

/* ---------------- Gruplanmış liste (iOS ayarlar dili) ---------------- */

.group {
  background: var(--bg-raised);
  border-radius: var(--r-card);
  overflow: hidden;
}
.group + .group { margin-top: 22px; }

.group__hd {
  padding: 0 16px 7px;
  font-size: 13px; letter-spacing: -.08px;
  color: var(--label-2);
  text-transform: uppercase;
}
.group__ft {
  padding: 7px 16px 0;
  font-size: 13px; line-height: 1.385; letter-spacing: -.08px;
  color: var(--label-2);
}

/* Ayırıcı içerikle hizalı başlar — iOS'ta böyle. */
.row {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap);
  padding: 11px 16px;
  position: relative;
}
.row + .row::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0;
  height: .5px; background: var(--separator);
}
.row--tap { cursor: pointer; -webkit-touch-callout: none; }
.row--tap:active { background: var(--fill-4); }

/* ---------------- Metin alanı ---------------- */

.tf {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 0;
  font-size: 17px; letter-spacing: -.41px;
  background: none; border: 0;
  color: var(--label);
}
.tf::placeholder { color: var(--label-3); }
.tf:focus { outline: none; }

.tf--boxed {
  padding: 11px 14px;
  background: var(--fill-4);
  border-radius: var(--r-card);
}
.tf--boxed:focus { background: var(--fill-3); }

/* ---------------- Segmentli kontrol ---------------- */

/* Cam kapsül içinde kayan hap — iOS 26 segmentli kontrolü. */
.seg {
  display: inline-flex;
  padding: 4px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-pill);
  gap: 3px;
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 0 0 .5px var(--glass-edge),
    0 4px 16px rgba(0, 0, 0, .10);
}
.seg__i {
  flex: 1;
  min-height: 36px;
  padding: 8px 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; letter-spacing: -.15px;
  color: var(--label);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .2s ease, transform .12s ease;
}
.seg__i:active { transform: scale(.96); }
.seg__i.is-on {
  background: var(--seg-on);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .seg { background: var(--fill-3); }
}

/* ---------------- Rozet ---------------- */

.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  font-size: 12px; font-weight: 500; font-style: normal;  /* <em> ile kullanılıyor */
  letter-spacing: -.08px;
  border-radius: var(--r-pill);
  background: var(--fill-3);
  color: var(--label-2);
  white-space: nowrap;
}
.badge--warn  { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.badge--green { background: color-mix(in srgb, var(--green) 18%, transparent);  color: var(--green); }
.badge--red   { background: color-mix(in srgb, var(--red) 18%, transparent);    color: var(--red); }
.badge--blue  { background: color-mix(in srgb, var(--blue) 16%, transparent);   color: var(--blue); }

/* ---------------- İlerleme ---------------- */

.prog {
  height: 4px;
  background: var(--fill-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.prog__fill {
  height: 100%; width: 0;
  background: var(--blue);
  border-radius: var(--r-pill);
  transition: width .3s ease;
}
.is-done .prog__fill { background: var(--green); }
.is-error .prog__fill { background: var(--red); }

/* ---------------- Alt sayfa (sheet) ---------------- */

.sheet-bg {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(2px);
  animation: fadein .2s ease;
}
.sheet-bg[hidden] { display: none; }

.sheet {
  position: fixed; z-index: 91;
  left: 0; right: 0; bottom: 0;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: var(--r-big) var(--r-big) 0 0;
  box-shadow: var(--shadow-3);
  animation: sheetup .3s cubic-bezier(.32, .72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet[hidden] { display: none; }

/* Tutamak: iOS'ta sayfanın sürüklenebilir olduğunu anlatan işaret. */
.sheet__grab {
  width: 36px; height: 5px;
  margin: 6px auto 0;
  background: var(--label-4);
  border-radius: var(--r-pill);
  flex: none;
}
.sheet__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  flex: none;
}
.sheet__body { overflow-y: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }

@media (min-width: 640px) {
  /* Geniş ekranda alt sayfa yerine ortada kart — macOS/iPadOS davranışı. */
  .sheet {
    left: 50%; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 3rem));
    border-radius: var(--r-big);
    animation: popin .25s cubic-bezier(.32, .72, 0, 1);
  }
  .sheet__grab { display: none; }
}

@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheetup { from { transform: translateY(100%) } to { transform: none } }
@keyframes popin {
  from { transform: translate(-50%, -50%) scale(.94); opacity: 0 }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1 }
}

/* ---------------- Fotoğraf görüntüleyici ---------------- */

.viewer {
  position: fixed; inset: 0; z-index: 100;
  background: #000;
  display: grid; grid-template-rows: auto 1fr auto;
  animation: fadein .2s ease;
}
.viewer[hidden] { display: none; }

.viewer__top, .viewer__bot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
}
.viewer__top { padding-top: max(12px, env(safe-area-inset-top)); }
.viewer__bot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.viewer__stage { display: grid; place-items: center; min-height: 0; padding: 8px; }
.viewer__stage img, .viewer__stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer__meta { font-size: 13px; color: rgba(255, 255, 255, .65); min-width: 0; }
.viewer__meta b { display: block; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Görüntüleyici sistem temasından bağımsız olarak hep siyah; bu yüzden
   mavi de hep karanlık mod tonu olmalı. Değişkeni kullanmak, açık temada
   siyah üstünde koyu mavi (#0051D5) verip okunmaz hale getiriyordu. */
.viewer__btn { color: #0A84FF; font-size: 17px; font-weight: 600; padding: 8px; }
.viewer__nav { color: #fff; font-size: 22px; padding: 8px 12px; opacity: .8; }
.viewer__nav:disabled { opacity: .25; }

/* ---------------- Yardımcılar ---------------- */

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.spin {
  width: 18px; height: 18px; flex: none;
  border: 2px solid var(--fill-1);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}