/* WA Kumanda — sakin grafit zemin, tek vurgu rengi (zümrüt), ince kenarlıklar, sıkı yerleşim */
:root {
  --zemin: #0f1416; --yuzey: #161c1f; --alan: #1e2629; --alan2: #252f33; --cizgi: #263034;
  --yazi: #eef2f3; --ikinci: #b9c4c8; --soluk: #85949a;
  --vurgu: #1fae7a; --vurgu-acik: #5fd3a6; --vurgu-zemin: #12352a;
  --sari: #e8b65a; --sari-zemin: #3a2f17; --kirmizi: #e5636b; --kirmizi-zemin: #3a1d21;
  --r: 14px; --r-kucuk: 10px;
  --alt-menu: 62px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--yazi);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: max(8px, env(safe-area-inset-top)) 14px calc(var(--alt-menu) + 20px + env(safe-area-inset-bottom));
}
body.kilitli { overflow: hidden; }
.kap { max-width: 480px; margin: 0 auto; }
.gizli { display: none !important; }
.sayi { font-variant-numeric: tabular-nums; }
a { color: var(--vurgu-acik); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
svg.ik { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Formlar ---------- */
label, .etiket { display: block; font-size: 13px; color: var(--soluk); margin: 0 0 5px; }
input, textarea, select {
  width: 100%; background: var(--alan); color: var(--yazi); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk);
  padding: 11px 12px; font: inherit; margin: 0 0 12px; transition: border-color .15s;
}
input::placeholder, textarea::placeholder { color: #61707a; }
input:focus, textarea:focus, select:focus { border-color: var(--vurgu); outline: none; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
button {
  width: 100%; min-height: 44px; background: var(--vurgu); color: #fff; border: 0; border-radius: var(--r-kucuk);
  padding: 10px 14px; font: 600 15px system-ui, -apple-system, sans-serif; cursor: pointer; transition: background .15s, opacity .15s;
}
button:active { opacity: .85; }
button:disabled { opacity: .4; cursor: default; }
button.ikincil { background: var(--alan2); color: var(--yazi); }
button.sade { background: none; color: var(--vurgu-acik); min-height: 0; padding: 6px 4px; width: auto; font-weight: 600; font-size: 14px; }
button.tehlike { background: var(--kirmizi-zemin); color: var(--kirmizi); }
button.kucuk { width: auto; min-height: 34px; padding: 6px 12px; font-size: 14px; }
.satir { display: flex; gap: 8px; align-items: flex-start; }
.satir > * { flex: 1; min-width: 0; }
.satir > .dar { flex: none; width: auto; }
.ipucu { font-size: 13px; color: var(--soluk); margin: 0 0 10px; line-height: 1.45; }
.bilgi { font-size: 13px; color: var(--soluk); min-height: 18px; margin-top: 8px; }
.hata-yazi { color: var(--kirmizi); }
.basari-yazi { color: var(--vurgu-acik); }

/* ---------- Üst çubuk ---------- */
.ust { display: flex; align-items: center; gap: 10px; height: 48px; margin-bottom: 6px; }
.ust h1 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hesapHap { width: auto; max-width: 52%; min-height: 34px; display: flex; align-items: center; gap: 7px; background: var(--alan); color: var(--yazi); border: 1px solid var(--cizgi); border-radius: 17px; padding: 4px 10px 4px 11px; font-size: 14px; font-weight: 600; }
.hesapHap span.ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hesapHap svg.ik { width: 14px; height: 14px; color: var(--soluk); }
.nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--soluk); flex: none; }
.nokta.yesil { background: var(--vurgu); box-shadow: 0 0 0 3px rgba(31,174,122,.18); } .nokta.sari { background: var(--sari); } .nokta.kirmizi { background: var(--kirmizi); }

/* ---------- Uyarı şeridi ---------- */
.serit { display: flex; align-items: center; gap: 10px; background: var(--kirmizi-zemin); color: #ffd9dc; border-radius: var(--r-kucuk); padding: 8px 8px 8px 12px; margin-bottom: 12px; font-size: 14px; }
.serit span { flex: 1; }
.serit button { width: auto; min-height: 32px; padding: 5px 12px; font-size: 13px; }

/* ---------- Kart ve liste ---------- */
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.kart > :last-child { margin-bottom: 0; }
.kartBaslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.kartBaslik h2 { font-size: 15px; font-weight: 650; margin: 0; }
.bolumBaslik { font-size: 13px; color: var(--soluk); font-weight: 600; margin: 18px 4px 6px; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { border-top: 1px solid var(--cizgi); padding: 10px 0; }
.liste > li:first-child { border-top: 0; padding-top: 0; }
.liste > li:last-child { padding-bottom: 0; }
.bos { text-align: center; color: var(--soluk); font-size: 14px; padding: 18px 8px; }
.bos b { display: block; color: var(--yazi); font-size: 15px; margin-bottom: 4px; }
.bos button { margin-top: 12px; width: auto; }

/* Ayar satırları (dokunulunca panel açılır) */
.satirlar { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.satirlar > button, .satirlar > .satirSabit {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; background: none; color: var(--yazi);
  border-radius: 0; border-top: 1px solid var(--cizgi); padding: 10px 14px; text-align: left; font-weight: 500; font-size: 15px;
}
.satirlar > :first-child { border-top: 0; }
.satirlar .metin { flex: 1; min-width: 0; }
.satirlar .metin small { display: block; color: var(--soluk); font-size: 13px; font-weight: 400; }
.satirlar .deger { color: var(--soluk); font-size: 14px; }
.satirlar svg.ik { color: var(--soluk); }
.satirlar .ikonKutu { width: 32px; height: 32px; border-radius: 9px; background: var(--alan2); display: grid; place-items: center; color: var(--ikinci); }
.satirlar .ikonKutu svg.ik { color: inherit; width: 18px; height: 18px; }
.satirlar > button.tehlikeSatir { color: var(--kirmizi); }
.satirlar > button.tehlikeSatir .ikonKutu { background: var(--kirmizi-zemin); color: var(--kirmizi); }

/* ---------- Alt menü ---------- */
.altMenu { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(13,17,19,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--cizgi); padding: 4px 6px env(safe-area-inset-bottom); z-index: 20; }
.altMenu div { display: flex; max-width: 480px; margin: 0 auto; }
.altMenu button { background: none; color: var(--soluk); min-height: var(--alt-menu); padding: 6px 0 4px; font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; position: relative; }
.altMenu button svg.ik { width: 22px; height: 22px; }
.altMenu button[aria-current="page"] { color: var(--vurgu-acik); }
.altMenu button[aria-current="page"] svg.ik { stroke-width: 2.2; }
.rozetSayi { position: absolute; top: 4px; left: calc(50% + 6px); background: var(--sari); color: #231a05; border-radius: 9px; font-size: 10px; font-weight: 700; font-style: normal; padding: 0 5px; line-height: 16px; min-width: 16px; text-align: center; }

/* ---------- Bölünmüş seçim ---------- */
.secim { display: flex; background: var(--alan); border: 1px solid var(--cizgi); border-radius: 11px; padding: 3px; margin-bottom: 12px; }
.secim button { background: none; color: var(--soluk); min-height: 34px; padding: 5px 6px; font-size: 14px; border-radius: 8px; }
.secim button[aria-pressed="true"] { background: var(--alan2); color: var(--yazi); }

/* ---------- İlerleme ---------- */
.bitis { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bitis .etiket { margin: 0 0 2px; }
.bitis .buyuk { font-size: 46px; line-height: 1; font-weight: 750; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.bitis .sag { text-align: right; padding-bottom: 3px; }
.bitis .orta { font-size: 20px; line-height: 1.1; font-weight: 650; font-variant-numeric: tabular-nums; }
.bitisNot { font-size: 12px; color: var(--soluk); margin: 6px 0 12px; }
.bitti .buyuk { color: var(--vurgu-acik); }
.cubuk { height: 6px; border-radius: 3px; background: var(--alan2); overflow: hidden; display: flex; }
.cubuk i { display: block; height: 100%; transition: width .5s; }
.cubuk .y { background: var(--vurgu); } .cubuk .k { background: var(--kirmizi); } .cubuk .s { background: var(--sari); }
.ozetSayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px; }
.ozetSayilar div { text-align: left; }
.ozetSayilar b { display: block; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ozetSayilar span { font-size: 12px; color: var(--soluk); }
.limitler { font-size: 12px; color: var(--soluk); margin-top: 8px; }
.blok { border-top: 1px solid var(--cizgi); margin-top: 14px; padding-top: 12px; font-size: 14px; }
.blok .baslikSatir { display: flex; justify-content: space-between; gap: 8px; color: var(--ikinci); margin-bottom: 6px; }
.blok .baslikSatir b { color: var(--yazi); font-variant-numeric: tabular-nums; }
.blok .cubuk { margin-bottom: 7px; }
.blok .alt { color: var(--soluk); font-size: 13px; }
.blok .alt b { color: var(--yazi); font-weight: 600; font-variant-numeric: tabular-nums; }
.durumSatir { display: flex; align-items: center; gap: 12px; }
.durumSatir .metin { flex: 1; min-width: 0; white-space: pre-line; color: var(--ikinci); }
.durumSatir.uyari .metin { color: var(--kirmizi); }
.geriSayim { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dagilim div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 13px; color: var(--soluk); }
.dagilim div b { color: var(--ikinci); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontroller { display: flex; gap: 6px; margin-top: 14px; }
.kontroller button { font-size: 13px; padding: 6px 4px; min-height: 38px; background: var(--alan2); color: var(--yazi); }
.cipSatir { display: flex; flex-wrap: wrap; gap: 5px; }
.cipSatir span { background: var(--alan2); border-radius: 10px; padding: 2px 9px; font-size: 12px; color: var(--ikinci); }
details { margin-top: 12px; }
details > summary { cursor: pointer; color: var(--soluk); font-size: 13px; list-style: none; display: flex; align-items: center; gap: 6px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details[open] > summary::before { transform: rotate(45deg); }
details > :not(summary) { margin-top: 8px; }
.gecmis li { font-size: 13px; }
.gecmis .cubuk { height: 4px; margin-top: 6px; }

/* Mesaj listesi */
.mesajlar .ust2 { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--soluk); }
.mesajlar .ust2 > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesajlar .govde { margin-top: 2px; white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--ikinci); }
.mesajlar .zaman { font-size: 12px; color: var(--soluk); margin-top: 3px; }
.rozet { font-weight: 600; white-space: nowrap; }
.bekliyor, .gonderiliyor { color: var(--sari); } .gonderildi { color: var(--vurgu-acik); } .hata { color: var(--kirmizi); } .iptal { color: var(--soluk); }
.etiketcik { display: inline-block; background: var(--alan2); border-radius: 7px; padding: 0 6px; font-size: 11px; color: var(--soluk); margin-left: 5px; vertical-align: 1px; }

/* ---------- Sihirbaz (yeni gönderim) ---------- */
.adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 2px 0 16px; }
.adimlar button { background: none; padding: 0; min-height: 0; text-align: left; color: var(--soluk); font-size: 12px; font-weight: 600; border-radius: 0; }
.adimlar button::before { content: ''; display: block; height: 4px; border-radius: 2px; background: var(--alan2); margin-bottom: 6px; }
.adimlar button.tamam { color: var(--ikinci); }
.adimlar button.tamam::before { background: var(--vurgu); }
.adimlar button[aria-current="step"] { color: var(--yazi); }
.adimlar button[aria-current="step"]::before { background: var(--vurgu-acik); }
.adimBaslik { font-size: 17px; font-weight: 650; margin: 0 0 4px; }
.adimAlt { font-size: 13px; color: var(--soluk); margin: 0 0 14px; }
.sihirbazAlt { position: fixed; left: 0; right: 0; bottom: calc(var(--alt-menu) + 4px + env(safe-area-inset-bottom)); padding: 10px 14px; background: linear-gradient(to top, var(--zemin) 70%, rgba(15,20,22,0)); z-index: 15; }
.sihirbazAlt div { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.sihirbazAlt button.ikincil { flex: 0 0 34%; }
#sekme-gonder { padding-bottom: 70px; }

.ekleSatir { display: flex; gap: 8px; }
.ekleSatir input { margin: 0; }
.ekleSatir button { width: auto; flex: none; padding: 0 16px; }
.kaynakDugmeler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.kaynakDugmeler button { background: var(--alan); border: 1px solid var(--cizgi); color: var(--yazi); display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 66px; padding: 8px 4px; font-size: 13px; font-weight: 500; }
.kaynakDugmeler button svg.ik { color: var(--vurgu-acik); }
.alicilar { display: flex; flex-wrap: wrap; gap: 6px; }
.alicilar .ustSatir { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--soluk); margin-bottom: 2px; }
.kisi { display: inline-flex; align-items: center; background: var(--vurgu-zemin); color: #b9f0da; border-radius: 15px; padding: 3px 3px 3px 10px; font-size: 13px; max-width: 100%; }
.kisi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kisi button { width: 22px; min-height: 22px; height: 22px; background: none; color: #8fcfb5; padding: 0; margin-left: 2px; font-size: 15px; line-height: 1; border-radius: 50%; }
.dahaFazla { font-size: 13px; color: var(--soluk); align-self: center; }

.modSecenek { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.modSecenek button { background: var(--alan); border: 1px solid var(--cizgi); color: var(--yazi); text-align: left; padding: 10px 12px; min-height: 72px; font-weight: 600; display: block; }
.modSecenek button small { display: block; color: var(--soluk); font-weight: 400; font-size: 12px; margin-top: 2px; line-height: 1.35; }
.modSecenek button[aria-pressed="true"] { border-color: var(--vurgu); background: var(--vurgu-zemin); }
.ayarSatirlari { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 0 12px; margin-bottom: 12px; }
.ayarSatir { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--cizgi); padding: 8px 0; font-size: 14px; }
.ayarSatir:first-child { border-top: 0; }
.ayarSatir .ad { flex: 1; min-width: 0; color: var(--ikinci); }
.ayarSatir .ad small { display: block; color: var(--soluk); font-size: 12px; }
.ayarSatir .girdi { display: flex; align-items: center; gap: 5px; color: var(--soluk); font-size: 13px; }
.ayarSatir input { width: 56px; margin: 0; padding: 7px 4px; text-align: center; }
.ayarSatir input[type=time] { width: 92px; padding: 7px 4px; }
.anahtarDugme { position: relative; width: 44px; height: 26px; flex: none; }
.anahtarDugme input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.anahtarDugme span { position: absolute; inset: 0; background: var(--alan2); border-radius: 13px; transition: background .15s; }
.anahtarDugme span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #cfd8dc; transition: transform .15s; }
.anahtarDugme input:checked + span { background: var(--vurgu); }
.anahtarDugme input:checked + span::after { transform: translateX(18px); background: #fff; }
.anahtarDugme input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.hiz { display: flex; justify-content: space-between; font-size: 13px; color: var(--soluk); padding: 0 4px; margin-bottom: 8px; }
.hiz b { color: var(--yazi); font-variant-numeric: tabular-nums; }
.uyarilar { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.uyarilar li { padding: 8px 10px; border-radius: var(--r-kucuk); margin-bottom: 6px; line-height: 1.4; }
.uyarilar li.duzelt { background: var(--sari-zemin); color: #f6d89c; }
.uyarilar li.bilgi { background: var(--alan); color: var(--soluk); }

.ozetTablo { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 2px 14px; margin-bottom: 12px; }
.ozetTablo div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
.ozetTablo div:first-child { border-top: 0; }
.ozetTablo dt, .ozetTablo span:first-child { color: var(--soluk); flex: none; }
.ozetTablo b { font-weight: 600; text-align: right; }
.buyukOzet { text-align: center; margin: 4px 0 16px; }
.buyukOzet .rakam { font-size: 40px; font-weight: 750; letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.buyukOzet .alt { color: var(--soluk); font-size: 14px; }

/* Şablon / değişken */
.secimListe { list-style: none; margin: 0; padding: 0; }
.secimListe li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--cizgi); }
.secimListe li:first-child { border-top: 0; padding-top: 2px; }
.secimListe input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--vurgu); }
.secimListe label { margin: 0; color: inherit; font-size: 15px; flex: 1; min-width: 0; cursor: pointer; }
.secimListe b { display: block; font-weight: 600; }
.secimListe small { color: var(--soluk); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.onizleme { background: var(--alan); border-radius: var(--r-kucuk); padding: 10px 12px; font-size: 14px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.onizleme .baslik { font-size: 12px; color: var(--soluk); margin-bottom: 4px; white-space: normal; }
.eksik { color: var(--kirmizi); font-size: 13px; margin-top: 6px; white-space: normal; }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.cip { width: auto; min-height: 0; background: var(--alan2); color: var(--ikinci); padding: 4px 10px; font: 500 13px ui-monospace, Menlo, Consolas, monospace; border-radius: 12px; }
.cip.kisiCip { color: var(--vurgu-acik); }
.kayit { display: flex; gap: 10px; align-items: flex-start; width: 100%; background: none; color: var(--yazi); text-align: left; padding: 0; min-height: 0; font-weight: 400; border-radius: 0; }
.kayit .govde { flex: 1; min-width: 0; }
.kayit .govde b { display: block; font-weight: 600; font-size: 15px; }
.kayit .govde code { font: 600 14px ui-monospace, Menlo, Consolas, monospace; color: var(--vurgu-acik); }
.kayit .govde small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--soluk); font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.kayit svg.ik { color: var(--soluk); width: 16px; height: 16px; margin-top: 3px; }

/* Oturumlar */
.hesapSatir { display: flex; align-items: center; gap: 10px; width: 100%; background: none; color: var(--yazi); text-align: left; padding: 0; min-height: 0; font-weight: 400; border-radius: 0; }
.hesapSatir .govde { flex: 1; min-width: 0; }
.hesapSatir .govde b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hesapSatir .govde small { color: var(--soluk); font-size: 13px; }
.hesapSatir svg.ik { color: var(--soluk); width: 16px; height: 16px; }
.pcDurum { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soluk); margin: 0 4px 10px; }
.kod { font: 700 32px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 4px; text-align: center; background: var(--alan); border: 1px dashed var(--cizgi); border-radius: var(--r-kucuk); padding: 14px 4px; margin: 0 0 10px; user-select: all; }
ol.yol { font-size: 13px; margin: 10px 0 12px; padding-left: 18px; color: var(--soluk); line-height: 1.55; }
ol.yol b { color: var(--ikinci); font-weight: 600; }

/* ---------- Alttan açılan panel ---------- */
.perde { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; }
.perde.acik { opacity: 1; }
.panel { background: var(--yuzey); border: 1px solid var(--cizgi); border-bottom: 0; border-radius: 18px 18px 0 0; width: 100%; max-width: 520px; max-height: 92vh; display: flex; flex-direction: column; transform: translateY(24px); transition: transform .22s ease-out; padding-bottom: env(safe-area-inset-bottom); }
.perde.acik .panel { transform: none; }
.panelBas { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 16px; border-bottom: 1px solid var(--cizgi); }
.panelBas::before { content: ''; position: absolute; left: 50%; margin-left: -18px; margin-top: -16px; width: 36px; height: 4px; border-radius: 2px; background: var(--alan2); }
.panelBas h3 { flex: 1; margin: 0; font-size: 16px; font-weight: 650; }
.panelBas button { width: 36px; min-height: 36px; padding: 0; background: var(--alan2); color: var(--ikinci); border-radius: 50%; display: grid; place-items: center; }
.panelGovde { padding: 14px 16px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.panelGovde > :last-child { margin-bottom: 0; }
.panelAlt { padding: 10px 16px 14px; border-top: 1px solid var(--cizgi); display: flex; gap: 8px; }
.kisiler { list-style: none; margin: 0; padding: 0; }
.kisiler li { padding: 10px 2px; border-top: 1px solid var(--cizgi); cursor: pointer; display: flex; align-items: center; gap: 10px; }
.kisiler li:first-child { border-top: 0; }
.kisiler li .govde { flex: 1; min-width: 0; }
.kisiler li small { display: block; color: var(--soluk); font-size: 13px; }
.kisiler li .tik { width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid var(--soluk); flex: none; display: grid; place-items: center; }
.kisiler li[aria-selected="true"] .tik { background: var(--vurgu); border-color: var(--vurgu); }
.kisiler li[aria-selected="true"] .tik::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.qr { background: #fff; border-radius: 12px; padding: 10px; width: 184px; margin: 0 auto 12px; }
.qr svg { display: block; width: 100%; height: auto; }
.anahtar { font: 600 15px ui-monospace, Menlo, Consolas, monospace; background: var(--alan); border-radius: var(--r-kucuk); padding: 10px; text-align: center; word-break: break-all; margin-bottom: 8px; user-select: all; letter-spacing: .5px; }
.dugmeBag { display: block; text-align: center; background: var(--vurgu); color: #fff; border-radius: var(--r-kucuk); padding: 11px; text-decoration: none; font-weight: 600; margin-bottom: 10px; }
.kodGirdi { font: 700 26px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 8px; text-align: center; padding: 10px; }
.oturumSatir { display: flex; align-items: center; gap: 10px; }
.oturumSatir .govde { flex: 1; min-width: 0; }
.oturumSatir .govde small { display: block; color: var(--soluk); font-size: 13px; }
.oturumSatir .buCihaz { color: var(--vurgu-acik); font-size: 12px; font-weight: 600; }

/* ---------- Giriş sayfası ---------- */
.girisSayfa { min-height: calc(100vh - 40px); display: flex; align-items: center; justify-content: center; }
.girisSayfa .kart { width: 100%; max-width: 360px; padding: 22px 20px; }
.girisSayfa .marka { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.girisSayfa .logo { width: 38px; height: 38px; border-radius: 11px; background: var(--vurgu-zemin); color: var(--vurgu-acik); display: grid; place-items: center; }
.girisSayfa h1 { font-size: 19px; margin: 0; }
.girisSayfa .alt { color: var(--soluk); font-size: 13px; margin: 0; }
body.girisGovde { padding-bottom: 20px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }