/* Rehsis telefon uygulaması — iOS görünümü (kullanıcı, 2026-10-13: "iOS tarzına dönüştürelim, alt menüde yalnız simge").
   iOS sistem renkleri; yüzen buzlu cam alt menü (iOS 26 "Liquid Glass" esinli), büyük başlık kaydırınca küçülür, gruplu listeler.
   Değişken adları JS'te kullanılıyor: --vurgu, --yesil, --sari, --kirmizi, --soluk, --yazi … */
:root { color-scheme: dark;
  --zemin: #000000; --tel: #000000; --yuzey: #1c1c1e; --yuzey2: #2c2c2e; --cizgi: rgba(84,84,88,.6); --cizgi2: rgba(84,84,88,.9);
  --yazi: #ffffff; --yazi2: rgba(235,235,245,.85); --soluk: rgba(235,235,245,.6); --silik: rgba(235,235,245,.42); --pasif: rgba(235,235,245,.3);
  --vurgu: #0a84ff; --vurgu-ust: #ffffff; --yesil: #30d158; --yesil-ust: #ffffff; --sari: #ff9f0a; --kirmizi: #ff453a; --kirmizi-k: #ff453a;
  --cam: rgba(30,30,32,.72); --cam-cizgi: rgba(255,255,255,.12); --golge: rgba(0,0,0,.5); --girdi: #1c1c1e; --secim: #636366; }
:root[data-tema="gunduz"] { color-scheme: light;
  --zemin: #f2f2f7; --tel: #f2f2f7; --yuzey: #ffffff; --yuzey2: #f2f2f7; --cizgi: rgba(60,60,67,.18); --cizgi2: rgba(60,60,67,.29);
  --yazi: #000000; --yazi2: rgba(60,60,67,.85); --soluk: rgba(60,60,67,.6); --silik: rgba(60,60,67,.45); --pasif: rgba(60,60,67,.3);
  --vurgu: #007aff; --vurgu-ust: #ffffff; --yesil: #34c759; --yesil-ust: #ffffff; --sari: #ff9500; --kirmizi: #ff3b30; --kirmizi-k: #ff3b30;
  --cam: rgba(249,249,249,.72); --cam-cizgi: rgba(0,0,0,.08); --golge: rgba(0,0,0,.12); --girdi: #ffffff; --secim: #ffffff; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-user-select: none; user-select: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.uyg { min-height: 100vh; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; }

/* Üst şerit: başta saydam, kaydırınca buzlu cam + küçük başlık */
.ust { position: sticky; top: 0; z-index: 5; padding: env(safe-area-inset-top, 0px) 16px 0; transition: background .25s, border-color .25s; border-bottom: .5px solid transparent; }
.ust-ic { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ust-kucuk { font-size: 17px; font-weight: 600; opacity: 0; transition: opacity .2s; flex: 1; text-align: center; padding-left: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust.kucuk { background: var(--cam); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--cam-cizgi); }
.ust.kucuk .ust-kucuk { opacity: 1; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #5e5ce6, #bf5af2); color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0; cursor: pointer; text-transform: uppercase; }
.buyuk { padding: 2px 20px 10px; }
.buyuk .alt { font-size: 13px; font-weight: 600; color: var(--soluk); text-transform: uppercase; letter-spacing: .02em; }
.buyuk h1 { margin: 2px 0 0; font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: .01em; text-wrap: balance; }

.govde { flex: 1; padding: 6px 16px calc(110px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
.kart { background: var(--yuzey); border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; border: 1px solid transparent;
  transition: border-color .3s; }
.satir { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ikili { display: flex; gap: 10px; }
.etiket { font-size: 13px; color: var(--soluk); font-weight: 500; }
.kucukyazi { font-size: 13px; color: var(--silik); line-height: 1.45; padding: 0 6px; }

/* Düğmeler: dokununca hafifçe küçülür */
.btn { min-height: 46px; border-radius: 14px; border: 0; background: var(--yuzey2); color: var(--vurgu); font-weight: 600; cursor: pointer; flex: 1; padding: 0 16px;
  transition: transform .12s ease, background .2s, color .2s, opacity .2s; }
.btn:active { transform: scale(.96); opacity: .85; }
.btn.ana { background: var(--vurgu); color: var(--vurgu-ust); }
.btn.kucuk { min-height: 34px; flex: 0 0 auto; font-size: 15px; border-radius: 17px; padding: 0 14px; }
.btn.secili-y { background: var(--yesil); color: #fff; }
.btn.secili-k { background: var(--kirmizi); color: #fff; }
.btn.tehlike { color: var(--kirmizi); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

/* Gruplu liste (iOS ayarlar düzeni) */
.grup { background: var(--yuzey); border-radius: 22px; overflow: hidden; }
.grup .oge { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; position: relative; }
.grup .oge + .oge::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--cizgi); }
.grup-baslik { font-size: 13px; color: var(--soluk); text-transform: uppercase; letter-spacing: .02em; padding: 8px 18px 0; }

/* Kayan seçici (segmented control) */
.secici { display: flex; background: var(--yuzey2); border-radius: 12px; padding: 3px; gap: 2px; }
.secici button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--yazi); cursor: pointer; display: grid; place-items: center;
  transition: background .25s, box-shadow .25s, transform .12s; }
.secici button[aria-pressed="true"] { background: var(--secim); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.secici button:active { transform: scale(.95); }
.secici svg { width: 22px; height: 22px; }

/* Giriş */
.giris { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: calc(30px + env(safe-area-inset-top, 0px)) 22px 30px; }
.girdi-grup { background: var(--yuzey); border-radius: 16px; overflow: hidden; }
.girdi-grup input { display: block; width: 100%; height: 52px; border: 0; background: transparent; padding: 0 16px; font-size: 17px; outline: none; }
.girdi-grup input + input { border-top: .5px solid var(--cizgi); }
.alan { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--soluk); }
.alan input { height: 48px; border-radius: 12px; border: 0; background: var(--yuzey2); color: var(--yazi); padding: 0 14px; font-size: 17px; outline: none; }
.mesaj { border-radius: 14px; padding: 11px 14px; font-size: 15px; line-height: 1.4; }
.mesaj.hata { background: color-mix(in srgb, var(--kirmizi) 14%, transparent); color: var(--kirmizi); }
.mesaj.ok { background: color-mix(in srgb, var(--yesil) 14%, transparent); color: var(--yesil); }
.mesaj.bilgi { background: color-mix(in srgb, var(--sari) 14%, transparent); color: var(--sari); }
.logo { width: 76px; height: 76px; border-radius: 18px; background: linear-gradient(160deg, #0a84ff, #0040dd); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 38px; box-shadow: 0 10px 30px rgba(10,132,255,.35); }

/* Alt menü: yüzen buzlu cam şerit, yalnız simge */
.nav { position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; justify-content: center; pointer-events: none; }
.nav > div { pointer-events: auto; display: flex; gap: 4px; padding: 6px; border-radius: 32px; background: var(--cam); border: .5px solid var(--cam-cizgi);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 10px 30px var(--golge); }
.nav button { width: 64px; height: 48px; border: 0; border-radius: 24px; background: transparent; color: var(--soluk); cursor: pointer; display: grid; place-items: center;
  position: relative; transition: background .25s, color .25s, transform .12s; }
.nav button:active { transform: scale(.92); }
.nav button[aria-current="true"] { color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 16%, transparent); }
.nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-current="true"] svg { fill: currentColor; }
.nav button[aria-current="true"] svg .ic { stroke: var(--yuzey); }
.nav .nokta { position: absolute; top: 9px; right: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--kirmizi); border: 2px solid var(--yuzey); }
.yukleniyor { flex: 1; display: grid; place-items: center; color: var(--soluk); min-height: 60vh; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }