:root {
  --bg: #0B0F17;
  --surface: #131A26;
  --surface2: #1A2232;
  --line: #243049;
  --gold: #D4A84B;
  --gold-ink: #1A1405;
  --text: #E8ECF4;
  --text2: #A3ADBF;
  --text3: #6E7891;
  --green: #5DCAA5;
  --amber: #EFB75A;
  --red: #F09595;
  --radius: 18px;
  color-scheme: dark;
}
/* Aydınlık tema: elle seçilmiş ya da "telefona göre" + sistem aydınlık */
:root[data-theme="light"] {
  --bg: #F3F5F9;
  --surface: #FFFFFF;
  --surface2: #ECEFF5;
  --line: #D9DFEA;
  --gold: #A9781A;
  --gold-ink: #FFFFFF;
  --text: #141A26;
  --text2: #4B5568;
  --text3: #7A8498;
  --green: #17865F;
  --amber: #A86A0C;
  --red: #C23B3B;
  --bar-muted: #D3DAE6;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
  --bg: #F3F5F9;
  --surface: #FFFFFF;
  --surface2: #ECEFF5;
  --line: #D9DFEA;
  --gold: #A9781A;
  --gold-ink: #FFFFFF;
  --text: #141A26;
  --text2: #4B5568;
  --text3: #7A8498;
  --green: #17865F;
  --amber: #A86A0C;
  --red: #C23B3B;
  --bar-muted: #D3DAE6;
  color-scheme: light;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
button, input, select { font: inherit; color: inherit; }
#app { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; }

.splash { display: grid; place-items: center; gap: 12px; padding-top: 30vh; color: var(--text2); }
.splash img { border-radius: 22px; }

/* ─── Üst bar ─── */
.top { display: flex; align-items: center; gap: 12px; padding: 4px 0 16px; }
.top img { width: 40px; height: 40px; border-radius: 12px; }
.top h1 { font-size: 20px; margin: 0; flex: 1; letter-spacing: .2px; }
.top h1 small { display: block; font-size: 12px; color: var(--text2); font-weight: 500; }
.icon-btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 12px;
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; font-size: 18px;
}

/* ─── Kartlar ─── */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px;
}
.card h2 { font-size: 15px; margin: 0 0 12px; color: var(--text2); font-weight: 600; letter-spacing: .3px; }
.card h2 .count {
  background: var(--gold); color: var(--gold-ink); border-radius: 10px; padding: 1px 8px;
  font-size: 12px; margin-left: 6px;
}
.muted { color: var(--text2); font-size: 14px; }
.tiny { color: var(--text3); font-size: 12px; }

/* ─── Çocuk seçici ─── */
.kids { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.kids::-webkit-scrollbar { display: none; }
.kid-chip {
  flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.kid-chip.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text3); flex: none; }
.dot.online { background: var(--green); }

/* ─── Durum ─── */
.status-head { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 52px; height: 52px; border-radius: 16px; background: var(--surface2);
  display: grid; place-items: center; font-size: 26px; flex: none;
}
.status-head .name { font-size: 19px; font-weight: 700; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 700; margin-top: 4px;
}
.pill.ok { color: var(--green); background: rgba(93,202,165,.13); }
.pill.warn { color: var(--amber); background: rgba(239,183,90,.13); }
.pill.bad { color: var(--red); background: rgba(240,149,149,.13); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.stat { background: var(--surface2); border-radius: 14px; padding: 10px; text-align: center; }
.stat b { display: block; font-size: 16px; white-space: nowrap; }
.stat span { font-size: 12px; color: var(--text2); }

/* ─── Butonlar ─── */
.btn {
  border: 1px solid var(--line); background: var(--surface2); border-radius: 14px;
  padding: 13px 14px; cursor: pointer; font-weight: 600; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn.red { color: var(--red); }
.btn.green { color: var(--green); }
.btn.ghost { background: transparent; }
.btn.small { width: auto; min-height: 38px; padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stack > * + * { margin-top: 10px; }

/* ─── İstek satırları ─── */
.req { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.req + .req { border-top: 1px solid var(--line); }
.req .body { flex: 1; min-width: 0; }
.req .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req .actions { display: flex; gap: 6px; }

/* ─── Kullanım ─── */
.app-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.app-row .label { flex: 1; min-width: 0; }
.app-row .label div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.bar { height: 6px; border-radius: 4px; background: var(--surface2); margin-top: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }
.app-row .min { font-size: 13px; color: var(--text2); min-width: 54px; text-align: right; }

/* ─── Kod ─── */
.code {
  font: 700 40px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 6px; text-align: center;
  background: var(--surface2); border-radius: 16px; padding: 22px 8px; margin: 12px 0 8px; color: var(--gold);
}
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .btn { flex: 1; }
.sheet .btn.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }

/* ─── Giriş ─── */
.auth { padding-top: 6vh; }
.auth .logo { display: block; margin: 0 auto 14px; width: 88px; height: 88px; border-radius: 24px; }
.auth h1 { text-align: center; font-size: 24px; margin: 0 0 4px; }
.auth p.lead { text-align: center; color: var(--text2); margin: 0 0 24px; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
.field input {
  width: 100%; border: 1px solid var(--line); background: var(--surface2); border-radius: 14px;
  padding: 13px 14px; outline: none; font-size: 16px;
}
.field input:focus { border-color: var(--gold); }
.or { display: flex; align-items: center; gap: 10px; color: var(--text3); font-size: 13px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.err { color: var(--red); font-size: 14px; min-height: 20px; margin: 4px 0 8px; }
.link { background: none; border: none; color: var(--gold); cursor: pointer; padding: 6px; font-size: 14px; }

/* ─── iOS ana ekran ipucu ─── */
.hint {
  border: 1px dashed var(--gold); background: rgba(212,168,75,.08); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start;
}
.hint b { color: var(--gold); }
.hint .x { margin-left: auto; background: none; border: none; color: var(--text2); font-size: 18px; cursor: pointer; }

/* ─── Ana ekran rehberi ─── */
.steps { display: grid; gap: 8px; margin: 14px 0; }
.step { display: flex; align-items: center; gap: 12px; background: var(--surface2); border-radius: 14px; padding: 12px; font-size: 14px; }
.step .num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--gold-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none;
}
.step .ic {
  width: 38px; height: 38px; border-radius: 10px; background: var(--surface); color: #4DA3FF;
  display: grid; place-items: center; flex: none; font-weight: 700; font-size: 18px;
}

/* ─── Sekmeler ─── */
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 14px; }
.tab {
  position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
  padding: 8px 2px; cursor: pointer; font-size: 11px; color: var(--text2); display: grid; gap: 2px; justify-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tab span { font-size: 18px; }
.tab.on { border-color: var(--gold); color: var(--text); background: var(--surface2); }
.tab-badge {
  position: absolute; top: 4px; right: 6px; background: var(--gold); color: var(--gold-ink);
  border-radius: 9px; font: 700 11px/1 sans-serif; padding: 3px 6px; font-style: normal;
}

/* ─── Anahtar / çip ─── */
.sw { position: relative; flex: none; width: 48px; height: 28px; display: inline-block; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 14px; background: var(--line); transition: .2s; }
.sw i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text2); transition: .2s;
}
.sw input:checked + i { background: var(--green); }
.sw input:checked + i::after { transform: translateX(20px); background: #fff; }
.sw input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
.chip {
  border: 1px solid var(--line); background: var(--surface2); border-radius: 999px; padding: 6px 10px;
  font-size: 13px; cursor: pointer; white-space: nowrap; flex: none; color: var(--text2);
}
.chip.on { border-color: var(--gold); color: var(--gold); }
.days .chip.on { background: var(--gold); color: var(--gold-ink); }
.days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { font-size: 11px; color: var(--green); background: rgba(93,202,165,.12); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.lim-row { gap: 8px; border-top: 1px solid var(--line); padding: 10px 0; }
.lim-row .off { color: var(--text3); text-decoration: line-through; }
.row-sw { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.search, .sel {
  width: 100%; border: 1px solid var(--line); background: var(--surface2); border-radius: 12px;
  padding: 11px 12px; font-size: 16px; outline: none; margin-bottom: 4px; color: var(--text);
}
.search:focus, .sel:focus { border-color: var(--gold); }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: " ▾"; color: var(--text3); }
details[open] summary::after { content: " ▴"; }
.map { width: 100%; height: 230px; border: 0; border-radius: 14px; background: var(--surface2); display: block; }
a.btn { text-decoration: none; color: var(--text); }

/* ─── Raporlar ─── */
:root { --bar-muted: #2E3850; }
.rep-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rep-head h2 { margin-bottom: 12px; }
.rep-sum { font-size: 13px; color: var(--text2); white-space: nowrap; }
.rep-sub { font-size: 13px; color: var(--text2); font-weight: 600; margin: 14px 0 4px; }
.chart { width: 100%; height: auto; display: block; }
.chart .bar-val { font-size: 10px; fill: var(--text2); font-weight: 600; }
.chart .bar-day { font-size: 10px; fill: var(--text3); }
.chart .bar-day.today { fill: var(--text); font-weight: 700; }
.story-row { border-top: 1px solid var(--line); padding: 10px 0; }
.story-row summary { display: flex; align-items: center; gap: 10px; }
.story-row summary::after { content: "▾"; color: var(--text3); margin-left: 4px; }
.story-row[open] summary::after { content: "▴"; }
.story-row .body { flex: 1; min-width: 0; }
.story-row .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score { font-size: 13px; white-space: nowrap; }
.score .ok { color: var(--green); } .score .no { color: var(--red); margin-left: 4px; }
.answers { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--text2); }
.answers li { margin-bottom: 6px; }
.answers span { display: block; }
.answers em { font-style: normal; color: var(--text); font-weight: 600; }

/* ─── Toast / sheet ─── */
#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--surface2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px;
  opacity: 0; pointer-events: none; transition: .25s; max-width: calc(100% - 32px); font-size: 14px; z-index: 30;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sheet-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end;
  justify-content: center; z-index: 20;
}
.sheet {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px 22px 0 0;
  width: 100%; max-width: 560px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; max-height: 88dvh; overflow-y: auto;
}
.sheet h3 { margin: 0 0 6px; font-size: 19px; }
.empty { text-align: center; padding: 30px 10px; color: var(--text2); }
.footer { text-align: center; color: var(--text3); font-size: 12px; margin-top: 24px; }

/* Gelişim (Bloom) */
.dev-hl { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.dev-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-themes .chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--surface2); color: var(--text2); border: 1px solid var(--line); }

:root[data-theme="light"] .card, :root[data-theme="light"] .icon-btn { box-shadow: 0 1px 2px rgba(20,26,38,.06); }
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] .card, :root[data-theme="auto"] .icon-btn { box-shadow: 0 1px 2px rgba(20,26,38,.06); }
}
.top .icon-btn + .icon-btn { margin-left: -4px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.seg button { border: 1px solid var(--line); background: var(--surface2); border-radius: 12px; padding: 10px 4px; font-size: 13px; cursor: pointer; }
.seg button.on { border-color: var(--gold); color: var(--gold); font-weight: 700; }

/* ── 2026-11: Android ile aynı 6 tema (bkz. app/src/main/res/values*/colors_parent.xml) ── */
:root { --blue: #85B7EB; --gold-dim: #2A2416; --green-bg: #12261F; --red-bg: #2A1618; --amber-bg: #2A2214; }
:root[data-theme="light"], :root[data-theme="auto-light"] { --blue: #2C6CB5; --gold-dim: #F5EAD2; --green-bg: #E7F5EF; --red-bg: #FCEEEE; --amber-bg: #FBF0DC; }
:root[data-theme="navy"] {
  --bg: #0A1628; --surface: #11223A; --surface2: #172C48; --line: #203553; --gold: #E3B65A; --gold-ink: #1A1405;
  --text: #EAF1FB; --text2: #A9BBD4; --text3: #7088A8; --green: #5FD3AE; --amber: #F2BE62; --red: #F29B9B;
  --blue: #8FC1F5; --bar-muted: #2B4468; --gold-dim: #2A2A22; --green-bg: #10293A; --red-bg: #2A1A26; --amber-bg: #2B2A26; color-scheme: dark;
}
:root[data-theme="sky"] {
  --bg: #F2F6FC; --surface: #FFFFFF; --surface2: #E9F0FA; --line: #D5E1F0; --gold: #1F6FD1; --gold-ink: #FFFFFF;
  --text: #0F1E33; --text2: #3E5272; --text3: #7286A3; --green: #14805A; --amber: #A0650A; --red: #C23B3B;
  --blue: #1B5FB3; --bar-muted: #BCCDE4; --gold-dim: #E3EEFC; --green-bg: #E6F5EF; --red-bg: #FCEEEE; --amber-bg: #FBF0DC; color-scheme: light;
}
:root[data-theme="forest"] {
  --bg: #0C1712; --surface: #13221B; --surface2: #1A2D24; --line: #22372D; --gold: #E0B457; --gold-ink: #1A1405;
  --text: #EAF5EF; --text2: #A6C2B4; --text3: #6F8F80; --green: #6FD6A8; --amber: #F2BE62; --red: #F29B9B;
  --blue: #8FC1F5; --bar-muted: #2D473A; --gold-dim: #262819; --green-bg: #10291F; --red-bg: #2A1A1A; --amber-bg: #2A2716; color-scheme: dark;
}
:root[data-theme="lavender"] {
  --bg: #F6F3FB; --surface: #FFFFFF; --surface2: #EFE9F8; --line: #E0D6F0; --gold: #7A4FD6; --gold-ink: #FFFFFF;
  --text: #1D1530; --text2: #4C4166; --text3: #857A9E; --green: #14805A; --amber: #A0650A; --red: #C23B3B;
  --blue: #2C6CB5; --bar-muted: #CBBCE3; --gold-dim: #EEE6FC; --green-bg: #E6F5EF; --red-bg: #FCEEEE; --amber-bg: #FBF0DC; color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] { --blue: #2C6CB5; --gold-dim: #F5EAD2; --green-bg: #E7F5EF; --red-bg: #FCEEEE; --amber-bg: #FBF0DC; }
}

/* Tema seçim ekranı */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px 8px 12px; text-align: left; cursor: pointer; position: relative; }
.theme-card.on { border: 3px solid var(--gold); padding: 6px 6px 10px; }
.theme-card .pv { border-radius: 12px; overflow: hidden; display: block; width: 100%; height: auto; }
.theme-card .nm { display: flex; align-items: center; gap: 8px; margin: 10px 6px 0; font-weight: 700; }
.theme-card .nm i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.theme-card .sb { margin: 1px 6px 0 28px; font-size: 12px; color: var(--text2); }
.theme-card .ok { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; }

/* Alt sayfa üst çubuğu */
.page-top { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 6px 0; }
.page-top h1 { font-size: 20px; margin: 0; flex: 1; }
.page-top h1 small { display: block; font-size: 12px; font-weight: 500; color: var(--text2); }
.page-top .icon-btn { font-size: 26px; line-height: 1; }

/* ── Ana sayfa (Android düzeni, 2026-11) ── */
.sec-title { font-size: 17px; margin: 18px 4px 8px; }
.qa3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.qa3:first-child { margin-top: 0; }
.btn.qa { font-size: 14px; padding: 12px 4px; min-height: 48px; }
.btn.red-o { border: 1.5px solid var(--red); color: var(--red); background: transparent; }
.btn.green-o { border: 1.5px solid var(--green); color: var(--green); background: transparent; }
.rep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rep-col { display: grid; gap: 10px; }
.card.rep-card { text-align: left; width: 100%; margin: 0; cursor: pointer; color: var(--text); font: inherit; }
.rc-h { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.rc-s { color: var(--text2); font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-empty { display: grid; place-items: center; color: var(--text3); font-size: 14px; min-height: 80px; }
.card.karne-card { text-align: left; width: 100%; cursor: pointer; color: var(--text); font: inherit; border: 1.5px solid var(--gold); margin-top: 10px; }
.card.karne-card.faded { border-color: var(--line); }
.card.karne-card.faded .kc-h > :not(.crown) { opacity: .45; }
.kc-h { display: flex; align-items: center; gap: 10px; }
.kc-av { width: 46px; height: 46px; object-fit: contain; }
.crown { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #FFF8E6;
  background: linear-gradient(135deg, #F7D774, #D9A62E 55%, #A8721A); box-shadow: 0 0 0 1.5px #FFE9A8 inset, 0 2px 6px rgba(0,0,0,.25); }
.kc-empty { margin-top: 10px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px; text-align: center; background: var(--bg); }
.kc-empty p { margin: 0 0 8px; color: var(--text2); font-size: 14px; }
.kc-empty b { color: var(--gold); font-size: 13px; }
.kc-prog { height: 6px; border-radius: 3px; background: var(--bar-muted); overflow: hidden; margin-bottom: 4px; }
.kc-prog i { display: block; height: 100%; background: var(--gold); }
/* Alt 3 ana düğme: ekrana sabit, hiçbir cihazda ekran dışında kalmaz */
.home-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg); z-index: 10; box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
.home-nav-space { height: calc(92px + env(safe-area-inset-bottom, 0px)); }
.btn.navb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 4px; font-weight: 700; line-height: 1.2; }
.btn.navb span { font-size: 22px; }
.pbanner, .sbanner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border-radius: 18px; padding: 14px 16px; margin: 12px 0 0; cursor: pointer; font: inherit; color: var(--text); }
.pbanner { background: var(--gold-dim); border: 1.5px solid var(--gold); }
.sbanner { background: var(--green-bg); border: 1px solid var(--green); margin: 0 0 12px; }
.pbanner .pstar { font-size: 26px; color: var(--gold); }
.sbanner .sic { font-size: 22px; }
.pb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pb span { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbanner .pb span { color: var(--gold); }
.pbtn { background: var(--gold); color: var(--gold-ink); border-radius: 14px; padding: 8px 14px; font-weight: 700; font-size: 14px; }
.pbtn.green { background: var(--green); color: #0B0F17; }
.card.add-child { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 40px 20px; border: 2px dashed var(--gold); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.add-child .ac-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: var(--gold); color: var(--gold-ink); }
.add-child b { font-size: 20px; }
.status-head .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text3); vertical-align: middle; }
.status-head .dot.online { background: var(--green); }

/* ── Gelişim Karnesi ── */
.card.hero { background: linear-gradient(135deg, var(--gold-dim), var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.hero-row { display: flex; align-items: center; gap: 16px; }
.hero-row .big { font-size: 22px; font-weight: 800; }
.donut { flex: 0 0 auto; }
.dn-c { font-size: 22px; font-weight: 800; fill: var(--text); }
.dn-s { font-size: 11px; fill: var(--text2); }
.up { color: var(--green); } .down { color: var(--red); }
.cmp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cmp { background: var(--surface); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; text-align: center; }
.cmp b { font-size: 17px; }
.cmp.card { margin: 0; }
details.hl { border-bottom: 1px solid var(--line); padding: 6px 0; }
details.hl:last-child { border: 0; }
details.hl summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
details.hl summary::-webkit-details-marker { display: none; }
details.hl summary b:nth-of-type(1) { flex: 1; }
details.hl[open] .chev { transform: rotate(180deg); }
details.hl p { margin: 6px 0 6px 50px; color: var(--text2); line-height: 1.5; font-size: 14px; }
.hl-ic, .lv-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; }
.chev { color: var(--text3); transition: transform .2s; }
.radar .rd-l { font-size: 11px; fill: var(--text2); }
.radar .rd-v { font-size: 12px; font-weight: 700; fill: var(--text); }
.legend { display: flex; gap: 14px; justify-content: center; font-size: 13px; color: var(--text2); margin: 4px 0 8px; flex-wrap: wrap; }
.legend.col { flex-direction: column; gap: 6px; align-items: flex-start; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.dash { height: 0; width: 18px; border-top: 2px dashed var(--text3); border-radius: 0; vertical-align: 3px; }
.lvl { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.lv-h { display: flex; gap: 8px; align-items: baseline; }
.lv-h b:first-child { flex: 1; }
.lvl .bar { height: 7px; border-radius: 4px; background: var(--surface2); margin-top: 5px; overflow: hidden; }
.lvl .bar i { display: block; height: 100%; border-radius: 4px; }
details.hl summary::after, details.story-row summary::after { content: none !important; }

/* ── Ayar listeleri (Android satırları) ── */
.grp { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); margin: 18px 4px 6px; }
.srow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: 14px; padding: 13px 14px; margin-bottom: 6px; color: var(--text); font: inherit; cursor: pointer; }
.srow .si { font-size: 20px; width: 28px; text-align: center; }
.srow .st { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.srow .st span { font-size: 13px; color: var(--text2); }
.srow.danger b { color: var(--red); }
.chev2 { color: var(--text3); font-size: 20px; }
.sbadge { background: var(--red); color: #fff; border-radius: 10px; padding: 1px 8px; font-style: normal; font-size: 12px; font-weight: 700; }
.card.acct { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.kv:last-child { border: 0; } .kv span { color: var(--text2); }
.feat { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.feat > span { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-dim); display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; color: var(--gold); }
.refcode { font-size: 30px; font-weight: 800; letter-spacing: 8px; color: var(--gold); background: var(--bg); border: 2px dashed var(--gold); border-radius: 14px; padding: 12px; margin: 14px 0; text-align: center; }
.codebox { text-align: center; margin: 14px 0 6px; line-height: 0; }
.codebox span { display: inline-grid; place-items: center; width: 52px; height: 52px; margin: 5px; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--text3); font: 700 24px ui-monospace, monospace; color: var(--text); line-height: 1; vertical-align: middle; }
.codebox span.on, .codebox span.fill { border-color: var(--gold); } .codebox span.on { border-width: 2.5px; }
.codebox span.bad { border-color: var(--red); color: var(--red); border-width: 2.5px; }
.cb-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.big-crown { width: 84px; height: 84px; font-size: 46px; margin: 0 auto; animation: pop .6s ease; }
.stars { font-size: 34px; animation: pop .8s ease; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0 } 70% { transform: scale(1.15) } 100% { transform: scale(1); opacity: 1 } }
.ticket .reply { background: var(--green-bg); border-radius: 12px; padding: 10px 12px; border: 1px solid var(--green); }
details.helpsec summary { cursor: pointer; }
.btn.locked { opacity: .55; }
textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px; font: inherit; resize: vertical; }

/* ── Çocuk ekleme / eşleştirme ── */
.wiz-prog { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.wiz-prog i { display: block; height: 100%; background: var(--gold); transition: width .3s; }
.int-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.int { text-align: left; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.int.on { border-color: var(--gold); background: var(--gold-dim); font-weight: 700; }
.step-lbl { font-size: 12px; letter-spacing: .1em; font-weight: 700; color: var(--gold); margin: 6px 0 2px; }
.qr-frame { width: 190px; height: 190px; margin: 12px auto; background: #fff; border: 2px solid var(--gold); border-radius: 14px; padding: 8px; }
.qr-frame svg { width: 100%; height: 100%; }
.btn.big { min-height: 58px; font-size: 16px; margin-top: 12px; }
.btn.green { background: #1D8A68; color: #fff; border: 0; }
.step-done { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--green-bg); border: 1px solid var(--green); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; color: var(--green); font: inherit; text-align: left; cursor: pointer; }
.step-done b { flex: 1; } .step-done .ck { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 800; }
.paircode { font: 800 40px ui-monospace, monospace; letter-spacing: 4px; margin: 6px 0; }
.paircode.dim { opacity: .35; }
.link-anim { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; position: relative; }
.link-anim .dev { width: 52px; height: 86px; border-radius: 12px; background: #1A2333; border: 3px solid #D4A84B; display: grid; place-items: center; font-size: 24px; }
.link-anim .dev.big { width: 76px; height: 100px; }
.link-anim .dots { display: flex; gap: 8px; }
.link-anim .dots i { width: 8px; height: 8px; border-radius: 50%; background: #D4A84B; animation: flow 1.2s infinite; }
.link-anim .dots i:nth-child(2) { animation-delay: .15s } .link-anim .dots i:nth-child(3) { animation-delay: .3s } .link-anim .dots i:nth-child(4) { animation-delay: .45s } .link-anim .dots i:nth-child(5) { animation-delay: .6s }
@keyframes flow { 0%, 100% { opacity: .25; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-4px) } }
.link-anim .tick { display: none; }
.link-anim.linked .dev { border-color: #5DCAA5; }
.link-anim.linked .dots { display: none; }
.link-anim.linked .tick { display: grid; width: 44px; height: 44px; border-radius: 50%; background: #5DCAA5; color: #0B0F17; place-items: center; font-weight: 900; font-size: 22px; animation: pop .5s; }
.card.status { text-align: center; font-weight: 700; }
.card.status.wait { background: var(--amber-bg); color: var(--amber); }
.card.status.ok { background: var(--green-bg); color: var(--green); }
.card.status.bad { background: var(--red-bg); color: var(--red); }
.hug { font-size: 72px; position: relative; display: inline-block; animation: pop .7s; }
.hearts { position: absolute; left: 50%; top: 0; }
.hearts i { position: absolute; font-style: normal; font-size: 22px; animation: rise 2s infinite; opacity: 0; }
.hearts i:nth-child(2) { left: -20px; animation-delay: .5s } .hearts i:nth-child(3) { left: 18px; animation-delay: 1s }
@keyframes rise { 0% { transform: translateY(0); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(-60px); opacity: 0 } }

/* ── Uygulama Ayarları ── */
.card.master.off { border: 1.5px solid var(--red); background: var(--red-bg); }
.card.master.on { border: 1.5px solid var(--green); }
.crown.sm { display: inline-grid; width: 20px; height: 20px; font-size: 12px; vertical-align: -3px; margin-left: 4px; }
.sl { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.sl input[type=range] { flex: 1; accent-color: var(--gold); }
.sl b { min-width: 86px; text-align: right; font-size: 14px; }
.savebar { position: sticky; bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.savebar .btn:disabled { opacity: .5; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip .x { background: none; border: 0; color: inherit; padding: 0 0 0 4px; cursor: pointer; }
.leaflet-container { border-radius: 14px; }

/* ── Mesajlar ── */
.chat { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; min-height: 50vh; }
.msg { max-width: 80%; padding: 8px 12px 6px; border-radius: 16px; background: var(--surface); align-self: flex-start; word-wrap: break-word; }
.msg.me { align-self: flex-end; background: var(--gold); color: var(--gold-ink); }
.msg .mname { display: block; font-size: 12px; font-weight: 700; color: var(--gold); }
.msg .mtime { display: block; font-size: 11px; opacity: .7; text-align: right; margin-top: 2px; }
.mimg { max-width: 100%; border-radius: 10px; display: block; }
.msg audio { max-width: 220px; }
.msep { align-self: center; font-size: 12px; color: var(--text3); margin: 8px 0; }
.composer { position: sticky; bottom: 0; display: flex; gap: 6px; align-items: center; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); background: var(--bg); }
.composer input#msgIn { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 10px 14px; color: var(--text); font: inherit; }
.composer input#msgIn { min-width: 0; }
.composer .btn.small { flex: 0 0 auto; padding: 9px 12px; width: auto; }
.composer .icon-btn { flex: 0 0 auto; }

/* ── Kayıt / aile kur / tanıtım ── */
.kvkk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text2); margin: 6px 0 10px; }
.kvkk a { color: var(--gold); }
.kvkk input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--gold); }
.shake { animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
.fam-ic { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: var(--gold-dim); display: grid; place-items: center; font-size: 36px; }
.codebox.small span { width: 42px; height: 46px; font-size: 20px; margin: 3px; }
.onb { position: fixed; inset: 0; z-index: 50; background: #FCF8F8; display: flex; flex-direction: column; }
.onb-v { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.onb-p { background: #FCF8F8; color: #1F2430; padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); text-align: center; }
.onb-p .kicker { color: #A9781A; font-weight: 800; letter-spacing: .1em; font-size: 13px; }
.onb-p h1 { margin: 6px 0; font-size: 26px; } .onb-p p { color: #4B5568; line-height: 1.5; }
.onb-p .feat { text-align: left; } .onb-p .feat > span { background: #F5EAD2; }
.onb-p .btn.ghost { color: #1F2430; border-color: #C6CEDB; }
.dots-n { display: flex; justify-content: center; gap: 6px; margin: 12px 0; } .dots-n i { width: 8px; height: 8px; border-radius: 4px; background: #D9DFEA; } .dots-n i.on { width: 22px; background: #A9781A; }
.onb-skip { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; background: #fff; border: 1px solid #ddd; border-radius: 18px; padding: 8px 16px; font-weight: 700; color: #1F2430; }

/* Ekran Zamanı Raporu (Android ScreenTimeReport) */
.big-num { font-size: 30px; font-weight: 800; margin: 2px 0; }
.tbars { display: flex; align-items: stretch; gap: 3px; height: 150px; }
.tbars .tb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; }
.tbars .tb i { display: block; width: 100%; max-width: 34px; background: var(--bar-muted); border-radius: 4px 4px 0 0; }
.tbars .tb.hi i { background: var(--gold); }
.tbars .tb span { font-size: 10px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.tbars .tb.hi span { color: var(--text); font-weight: 700; }
.tbars .tb.sel i { background: #3b82f6; }
.tbars .tb.sel span { color: var(--text); font-weight: 700; }
.ubar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ubar .bar { flex: 1; margin: 0; }
.ubar .tiny { white-space: nowrap; }
.bar i.g { background: var(--gold); }
.gold-t { color: var(--gold); font-weight: 700; }
.inf { font-size: 26px; color: var(--gold); min-width: 56px; text-align: center; }
.lim-row .chip[disabled] { opacity: .4; }

[hidden] { display: none !important; }
.kwlist .kwrow { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); }
.kwlist .kwrow span { flex: 1; font-size: 14px; }
.seg.four { grid-template-columns: repeat(4, 1fr); }
.rulecard { display: flex; align-items: center; gap: 6px; padding: 10px 4px 10px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); }
.rulecard .ri { font-size: 20px; margin-right: 6px; }
.rulecard .rb { flex: 1; min-width: 0; }
.radios { display: grid; gap: 6px; margin: 12px 0 4px; }
.radios .srow.on { border-color: var(--gold); }
.modetog .mt-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; }
.modetog .mt-l { background: none; border: 0; font-weight: 700; font-size: 15px; color: var(--muted); cursor: pointer; }
.modetog .mt-l.on { color: var(--gold); }
.master .si { font-size: 22px; margin-right: 8px; }
.lockbar { border-color: var(--gold); text-align: center; }
.lockbar .btn { margin-top: 8px; }
.reach-opts { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 4px; }
.reach-opts .row-sw { padding: 8px 0; }
.reach-opts.dim { opacity: .4; }
.tiny.warn { color: var(--red); }
.sheet p.muted { white-space: pre-line; }
.ngrp { margin-top: 12px; }
.ngrp .nrow { padding: 10px 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); }
.ngrp .nrow b { font-size: 13px; }
.evlist .evrow { display: flex; gap: 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.evlist .evrow:last-child { border-bottom: 0; }
.evlist .evi { font-size: 22px; }
.evlist .evrow b { font-size: 14px; }
.badge.amber { font-size: 11px; padding: 4px 8px; border-radius: 8px; color: var(--amber, var(--gold)); background: var(--amber-bg, rgba(232,163,61,.14)); white-space: nowrap; }
.btn.green { background: var(--green); color: #0B0F17; border-color: var(--green); }
.locrow { padding: 4px 0; }
.story-text { white-space: pre-line; font-size: 17px; line-height: 1.55; margin: 14px 0 0; }
.opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-top: 2px; border-radius: 10px; border: 1px solid transparent; }
.opt .oi { width: 18px; text-align: center; font-weight: 700; }
.opt.pick-ok { background: rgba(93,202,165,.18); border-color: var(--green); }
.opt.pick-bad { background: rgba(229,72,77,.2); border-color: var(--red); }
.rr-row[disabled] { opacity: 1; cursor: default; }
.appr { padding: 8px 0 4px; border-bottom: 1px solid var(--line); }
.appr:last-of-type { border-bottom: 0; }
.appr p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
.apprlink { display: inline-block; margin: 0 0 10px; padding: 4px 0; font-size: 14px; color: var(--amber, var(--gold)); text-decoration: none; }
.btn.red-o { border: 2px solid #FF8A8A; color: var(--red); background: transparent; }
.sheet.sos { border-top: 4px solid var(--red); }
.sos-sheet h3 { color: var(--red); }
.nbadge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-style: normal; font-weight: 700; line-height: 20px; }
.req.dashed { border: 1.5px dashed var(--line); border-radius: 12px; background: transparent; margin-top: 8px; cursor: pointer; }
.qrbox { width: 160px; margin: 10px auto; background: #fff; padding: 8px; border-radius: 12px; }
.qrbox svg { width: 100%; height: auto; display: block; }
.kid-card { cursor: pointer; }
.perm-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; margin-bottom: 6px; cursor: pointer; }
.perm-item .pi-ic { font-size: 20px; }
.perm-item .st { display: flex; flex-direction: column; gap: 2px; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 8px 0 6px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.newb { font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--red); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.tcard { display: flex; flex-direction: column; align-items: center; padding: 16px 8px; }
.tcard b { font-size: 28px; }
.tcard span { font-size: 13px; color: var(--muted); }
/* Profil fotoğrafı iPhone Safari'de kayıyordu (grid + %100 yükseklik): kutuyu doldur, ortala, taşanı kırp */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; border-radius: inherit !important; display: block; }
/* Seçim kartı (bölge türü, kural modu): seçili olan belirgin */
.radios .srow { border: 2px solid var(--line); }
.radios .srow.on { border-color: var(--gold); background: var(--gold-dim, rgba(212,168,75,.14)); }
.radios .srow.on::after { content: "✓"; color: var(--gold); font-weight: 800; font-size: 18px; margin-left: auto; }
h3.grp.fold { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; margin: 4px 0 0; border-top: 1px solid var(--line); }
h3.grp.fold::after { content: "▾"; font-size: 14px; color: var(--muted); transition: transform .2s; }
h3.grp.fold.shut::after { transform: rotate(-90deg); }
.status-head .locbtn { margin-left: 6px; font-size: 20px; flex: none; }

.sbanner.danger { border-color: var(--red); background: rgba(229,72,77,.12); }
.pbtn.red { background: var(--red); color: #fff; }

/* Durum noktası (2026-11): çevrimiçi parlak yeşil nokta + halka, çevrimdışı halkasız belirgin kırmızı */
.status-head .dot { width: 12px; height: 12px; background: #EF4444; box-shadow: none; margin-left: 4px; }
.status-head .dot.online { width: 10px; height: 10px; background: #22C55E; box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4.5px #22C55E; margin-left: 8px; }

/* Canlı konum haritası */
.livemap { aspect-ratio: 1 / 1; height: auto; max-height: 70dvh; min-height: 280px; border-radius: 16px; position: relative; margin-bottom: 12px; }
.kid-pin { background: none; border: 0; }
.zone-label { background: rgba(255,255,255,.92); border: 0; border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 600; color: #1F2433; }
.lm-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 900; background: rgba(233,238,243,.85); color: #3d4459; font-weight: 600; }

/* Giriş kilidi */
.applock { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; padding: calc(40px + env(safe-area-inset-top)) 24px 24px; text-align: center; }
.applock .al-logo { width: 76px; height: 76px; border-radius: 22px; }
.applock h2 { margin: 14px 0 4px; }
.applock p { margin: 0; color: var(--text2); }
.al-dots { display: flex; gap: 14px; margin: 20px 0; }
.al-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--text3); }
.al-dots i.on { background: var(--gold); border-color: var(--gold); }
.al-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 22px; }
.al-pad button { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text); font-size: 26px; cursor: pointer; }
.al-pad button svg { width: 34px; height: 34px; display: block; margin: auto; }
.lockset { text-align: center; }
.lockset-ic { width: 76px; height: 76px; margin: 0 auto 12px; padding: 18px; box-sizing: border-box; border-radius: 50%; color: var(--gold); background: var(--bg); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.lockset-ic svg { width: 100%; height: 100%; display: block; }
.lockset b { display: block; margin-top: 14px; font-size: 14px; }
.al-forgot { margin-top: 22px; background: none; border: 0; color: var(--gold); font-size: 14px; cursor: pointer; }

/* Veri akışı şeridi: çok sayıda kayıt birden gelirken (cihaz yeniden internete bağlandı) */
#syncBar { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); transform: translate(-50%, -140%);
  z-index: 9999; background: var(--card, #1f1b2e); color: var(--text, #eceaf5); border-radius: 14px; padding: 8px 14px 10px;
  font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .3s ease; min-width: 210px; text-align: center; overflow: hidden; }
#syncBar.on { transform: translate(-50%, 0); }
#syncBar i { position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--gold, #d4a84b); border-radius: 3px;
  animation: syncRun 1.1s ease-in-out infinite; }
@keyframes syncRun { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { #syncBar i { animation: none; width: 100%; opacity: .6; } }

/* Üst çubuk çizgi ikonları (bildirim · SSS · menü) */
.icon-btn.ico { display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.icon-btn.ico svg { display: block; }

/* Çocuk seçimi: aşağı ok + liste */
.icon-btn.kid-pick { margin-left: 6px; flex: none; }
.kid-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.kid-opt:last-child { border-bottom: 0; }
.kid-opt .kn { flex: 1; min-width: 0; }
.kid-opt.on b { color: var(--gold); }

/* Konum: Konuma git (yeşil) + 5'li aralık seçimi */
.btn.green { background: #1D8A68; color: #fff; border-color: #1D8A68; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.btn.green:disabled { opacity: .5; }
.seg.five { grid-template-columns: repeat(5, 1fr); }

/* Süre ekle: belirgin Offline Kod düğmesi */
.btn.code-cta { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin-top: 12px; padding: 13px 10px; border: 2px solid var(--gold); font-weight: 700; font-size: 15px; }
.btn.code-cta span { font-size: 12.5px; font-weight: 500; color: var(--text2); }

/* Ayak izi bileşeni (panel ve Android ortak) */
.fp{--fp-s:var(--surface,#fff);--fp-s2:var(--surface2,#eceff5);--fp-l:var(--line,#d9dfea);--fp-t:var(--text,#141a26);--fp-t2:var(--text2,#4b5568);--fp-a:var(--gold,#a9781a);color:var(--fp-t);font-size:14px}
.fp button{font:inherit;color:inherit;cursor:pointer}
.fp-mapw{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--fp-l)}.fp-map{height:min(52vh,420px);min-height:280px;background:#e7eef0}
.fp-clock{position:absolute;z-index:500;top:10px;right:10px;background:rgba(15,20,35,.86);color:#fff;border-radius:12px;padding:6px 11px;line-height:1.2;pointer-events:none}.fp-clock b{display:block;font-size:17px}
.fp-walker{display:grid;place-items:center}.fp-walker span{display:block;font-size:24px;line-height:34px;width:34px;height:34px;text-align:center;background:#fff;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .2s}
.fp-step span{display:block;font-size:12px;line-height:16px;width:16px;text-align:center;opacity:.8}
.fp-pin span{display:inline-block;min-width:26px;height:26px;line-height:22px;padding:0 6px;box-sizing:border-box;text-align:center;border-radius:13px;background:#6a52c9;color:#fff;font-weight:800;font-size:12.5px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);white-space:nowrap}
.fp-h{font-weight:800;font-size:15px;margin:14px 2px 8px}
.fp-trips{display:grid;gap:8px}.fp-tr{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--fp-s);border:1px solid var(--fp-l);border-radius:14px;padding:11px 12px;min-height:58px}.fp-tr.on{border-color:#e8765a;box-shadow:0 0 0 2px #e8765a55}
.fp-tr i{flex:none;font-style:normal;font-size:22px}.fp-tr span{flex:1;min-width:0}.fp-tr b{display:block;font-size:15px}.fp-tr small{display:block;color:var(--fp-t2);margin-top:2px}.fp-tr em{flex:none;width:38px;height:38px;line-height:38px;text-align:center;border-radius:50%;background:var(--fp-a);color:#fff;font-style:normal;font-size:14px}
.fp-hint{margin-top:12px;background:var(--fp-s);border:1px solid var(--fp-l);border-radius:14px;padding:12px;font-size:13px;line-height:1.45;color:var(--fp-t2)}.fp-hint b{color:var(--fp-t)}.fp-set{display:block;width:100%;margin-top:9px;min-height:44px;border-radius:12px;border:1px solid var(--fp-a);background:none;font-weight:800;color:var(--fp-a)!important}
.fp-empty{text-align:center;color:var(--fp-t2);padding:18px;background:var(--fp-s);border:1px solid var(--fp-l);border-radius:13px}

/* Mesajlar: okunmamış sayısı + atan kalp (Android ana sayfa ile aynı) */
.btn.qa .unr { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 3px; color: var(--red); font-size: 15px; }
.btn.qa .unr .beat { font-style: normal; font-size: 13px; display: inline-block; animation: beat .52s ease-in-out infinite alternate; }
@keyframes beat { from { transform: scale(1); } to { transform: scale(1.35); } }

/* Konum sayfası büyük düğmeler (Android ile aynı) */
.btn.big { min-height: 58px; font-size: 16px; }

/* ── 2026-11-08: yeni 6 palet (Gece Altını, Fildişi, Okyanus, Buzul, Ametist, Mercan) — Android colors_parent.xml ile aynı; eski tanımları ezer ── */
:root { --bg: #090C12; --surface: #121823; --surface2: #1A2232; --line: #263044; --gold: #E5B54F; --gold-ink: #1A1405;
  --text: #EEF2F8; --text2: #AEB8CA; --text3: #8C98AD; --green: #5DD3A8; --amber: #F2BE62; --red: #F28B82;
  --blue: #8AB8F2; --bar-muted: #3E475A; --gold-dim: #2B2414; --green-bg: #1B2E33; --red-bg: #2D262E; --amber-bg: #2D2C2B; color-scheme: dark; }
:root[data-theme="light"], :root[data-theme="auto-light"] { --bg: #F7F2E8; --surface: #FFFDF8; --surface2: #F1EADC; --line: #E4D9C4; --gold: #8A600E; --gold-ink: #FFFFFF;
  --text: #211A10; --text2: #5C4F3B; --text3: #6E6049; --green: #0F7A4F; --amber: #975A00; --red: #B42318;
  --blue: #1F5FA8; --bar-muted: #D1C6B2; --gold-dim: #F3E6C8; --green-bg: #ECF3EA; --red-bg: #F9ECE6; --amber-bg: #F5EDDF; color-scheme: light; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] { --bg: #F7F2E8; --surface: #FFFDF8; --surface2: #F1EADC; --line: #E4D9C4; --gold: #8A600E; --gold-ink: #FFFFFF;
  --text: #211A10; --text2: #5C4F3B; --text3: #6E6049; --green: #0F7A4F; --amber: #975A00; --red: #B42318;
  --blue: #1F5FA8; --bar-muted: #D1C6B2; --gold-dim: #F3E6C8; --green-bg: #ECF3EA; --red-bg: #F9ECE6; --amber-bg: #F5EDDF; color-scheme: light; } }
:root[data-theme="navy"] { --bg: #04161D; --surface: #0A2430; --surface2: #0F2F3D; --line: #17414F; --gold: #2DD4BF; --gold-ink: #042F2A;
  --text: #E6F6F8; --text2: #A2C3C9; --text3: #84A8AF; --green: #B4E86A; --amber: #FBBF24; --red: #FF9B8F;
  --blue: #7DD3FC; --bar-muted: #305763; --gold-dim: #0D3A3A; --green-bg: #1E3C37; --red-bg: #27323B; --amber-bg: #27372F; color-scheme: dark; }
:root[data-theme="sky"] { --bg: #EDF3FC; --surface: #FFFFFF; --surface2: #E4EDFA; --line: #CFDDF2; --gold: #1D4FD7; --gold-ink: #FFFFFF;
  --text: #0C1A33; --text2: #3A4E6E; --text3: #53668A; --green: #0F7A4F; --amber: #975A00; --red: #B42318;
  --blue: #1D4FD7; --bar-muted: #BCCADF; --gold-dim: #DCE7FD; --green-bg: #ECF4F1; --red-bg: #F9EDED; --amber-bg: #F5EFE6; color-scheme: light; }
:root[data-theme="forest"] { --bg: #110C1F; --surface: #1B1430; --surface2: #241B3E; --line: #33284F; --gold: #C4A0FF; --gold-ink: #1E0F3D;
  --text: #F1ECFB; --text2: #BDB1D6; --text3: #9B90B5; --green: #6EE7B7; --amber: #FCD34D; --red: #FF9AA2;
  --blue: #93C5FD; --bar-muted: #4A4064; --gold-dim: #2C2148; --green-bg: #252D40; --red-bg: #36243E; --amber-bg: #362B33; color-scheme: dark; }
:root[data-theme="lavender"] { --bg: #FFF4EF; --surface: #FFFFFF; --surface2: #FDE8DF; --line: #F4D3C5; --gold: #C2410C; --gold-ink: #FFFFFF;
  --text: #2A1510; --text2: #64403A; --text3: #7E5850; --green: #0F7A4F; --amber: #8A5300; --red: #9F1239;
  --blue: #1F5FA8; --bar-muted: #E0C0B3; --gold-dim: #FDE2D4; --green-bg: #ECF4F1; --red-bg: #F7ECEF; --amber-bg: #F3EEE6; color-scheme: light; }

/* Benim Ailem: ebeveynler yan yana (Android FamilyActivity), 2026-11-08 */
.fam-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.fam-node { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); font: inherit; color: var(--text); cursor: pointer; min-width: 0; }
.fam-node:disabled { cursor: default; opacity: 1; }
.fam-node.dashed { border-style: dashed; color: var(--text2); }
.fam-node b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; }
.fam-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 21px; background: var(--gold); color: var(--gold-ink); }
.fam-av.emo { width: 62px; height: 62px; font-size: 32px; background: var(--gold-dim); border: 2px solid var(--gold); }
.fam-node.dashed .fam-av { background: none; border: 1.5px dashed var(--line); color: var(--text3); }

/* Mesajlar: okunmamışta ikon yerine atan kalp (Android HeartDrawable ile aynı ritim), 2026-11-09 */
.hb { width: 20px; height: 20px; vertical-align: -4px; fill: #F0324F; animation: hbeat 1.25s infinite; transform-origin: center; }
@keyframes hbeat { 0%, 100% { transform: scale(1) } 6% { transform: scale(1.18) } 16% { transform: scale(1) } 26% { transform: scale(1.12) } 38% { transform: scale(1) } }

/* Benim Ailem ağacı (2026-11-10): portreler, altın dallar, akan kalpler */
.fam-tree { position: relative; overflow: hidden; margin: 4px 0 18px; padding: 18px 12px 20px; border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--gold) 12%, var(--surface)), var(--surface) 60%), var(--surface); }
.fam-tree > * { position: relative; z-index: 1; }
.fam-tree .ft-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.ft-title { text-align: center; margin: 0 0 12px; font-size: 18px; letter-spacing: .02em; }
.fam-tree .fam-row { margin: 0; }
.fam-tree .fam-node { background: none; border: 0; padding: 4px 6px; }
.fam-tree .fam-node .fam-av, .ft-kav { width: 76px; height: 76px; font-size: 36px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 35% 30%, var(--surface), color-mix(in srgb, var(--gold) 22%, var(--surface))); border: 3px solid var(--gold); color: var(--gold);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 30%, transparent); }
.fam-tree .fam-node.dashed .fam-av { background: none; border: 1.5px dashed var(--line); box-shadow: none; font-size: 26px; color: var(--text3); }
.fam-tree [data-ft]::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold); animation: ftPulse 2.6s ease-out infinite; pointer-events: none; }
.ft-kav[data-ft]::after { border-color: #F0679E; animation-delay: -1.2s; }
@keyframes ftPulse { 0% { transform: scale(1); opacity: .55 } 100% { transform: scale(1.42); opacity: 0 } }
.ft-gap { height: 132px; }
.ft-kids { display: flex; justify-content: center; gap: 16px; }
.ft-kid { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; font: inherit; color: var(--text); min-width: 0; }
.ft-kid b { font-size: 15px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-kav { border-color: #F0679E; background: radial-gradient(circle at 35% 30%, #FFF5F7, #FFD6E0); box-shadow: 0 6px 18px rgba(240,103,158,.3); overflow: hidden; }
.ft-kav img { width: 100%; height: 100%; object-fit: cover; }
.ft-kav.dashed { background: none; border: 1.5px dashed var(--line); box-shadow: none; font-size: 26px; color: var(--text3); }
.ft-glow { fill: none; stroke: var(--gold); stroke-width: 11; stroke-linecap: round; opacity: .18; }
.ft-line { fill: none; stroke: url(#ftLine); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ft-shine { fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 9 91; animation: ftShine 2.2s linear infinite; }
@keyframes ftShine { from { stroke-dashoffset: 100; opacity: .1 } 50% { opacity: .85 } to { stroke-dashoffset: 0; opacity: .1 } }
.ft-halo { fill: #FF5C7A; opacity: .22; animation: hbeat 1.25s infinite; transform-origin: center; transform-box: fill-box; }
.ft-beat { animation: hbeat 1.25s infinite; transform-origin: center; transform-box: fill-box; }
.ft-stars { position: absolute; inset: 0 0 auto 0; height: 34%; z-index: 0; pointer-events: none; }
.ft-stars i { position: absolute; width: 6px; height: 6px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ftTw 2.4s ease-in-out infinite; }
.ft-stars i:nth-child(1) { left: 8%; top: 22%; } .ft-stars i:nth-child(2) { left: 21%; top: 60%; animation-delay: -.6s; transform: scale(.7); }
.ft-stars i:nth-child(3) { left: 35%; top: 12%; animation-delay: -1.3s; } .ft-stars i:nth-child(4) { left: 47%; top: 48%; animation-delay: -.3s; transform: scale(.6); }
.ft-stars i:nth-child(5) { left: 60%; top: 16%; animation-delay: -1.8s; } .ft-stars i:nth-child(6) { left: 72%; top: 64%; animation-delay: -.9s; transform: scale(.8); }
.ft-stars i:nth-child(7) { left: 84%; top: 26%; animation-delay: -1.5s; } .ft-stars i:nth-child(8) { left: 93%; top: 58%; animation-delay: -.2s; transform: scale(.6); }
.ft-stars i:nth-child(9) { left: 28%; top: 86%; animation-delay: -2s; transform: scale(.5); }
@keyframes ftTw { 0%, 100% { opacity: .15 } 50% { opacity: .9 } }
@media (prefers-reduced-motion: reduce) { .ft-shine, .ft-stars i, .fam-tree [data-ft]::after, .ft-beat, .ft-halo { animation: none; } }

/* Çocuk portresi kalp çerçeve (2026-11-10) */
.ft-kheart { position: relative; width: 92px; height: 85px; display: block; filter: drop-shadow(0 6px 12px rgba(240,103,158,.32)); }
.ft-kheart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ft-kheart .kh-face { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-size: 34px; line-height: 1; }
.ft-kheart .kh-face img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ft-kheart .kh-pulse { fill: none; stroke: #F0679E; stroke-width: 3; transform-origin: 50% 55%; transform-box: fill-box; animation: khPulse 2.6s ease-out infinite; }
@keyframes khPulse { 0% { transform: scale(1); opacity: .6 } 100% { transform: scale(1.38); opacity: 0 } }
.ft-kheart[data-ft]::after { display: none; }
.ft-kheart { animation: khBeat 2.6s ease-in-out infinite; }
@keyframes khBeat { 0%, 100% { transform: scale(1) } 8% { transform: scale(1.06) } 16% { transform: scale(1) } 24% { transform: scale(1.04) } 32% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .ft-kheart, .ft-kheart .kh-pulse { animation: none; } }

/* Güncelleme kartı (2026-11-11, Android Güncellemeler ekranı gibi) */
.ud-card { border-color: var(--gold); }
.ud-h { display: flex; align-items: center; gap: 12px; }
.ud-badge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--gold-dim); flex: none; }
.ud-x { background: none; border: 0; font-size: 18px; color: var(--muted); cursor: pointer; }
.ud-notes { margin: 12px 0 2px; padding: 10px 14px 10px 30px; border-radius: 12px; background: var(--surface2); font-size: 13.5px; line-height: 1.5; color: var(--text2); }
.ud-notes li { margin: 2px 0; }
.ud-sec { margin: 14px 2px 6px; font-size: 12.5px; font-weight: 700; color: var(--text3); }
.ud-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface2); margin-bottom: 8px; }
.ud-ic { font-size: 22px; flex: none; }
.ud-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ud-t b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-t span { font-size: 12.5px; color: var(--gold); }