/* ==========================================================================
   Yapo Paneli - bilesen.css  [T2.4-a, kume 2C1]
   Kaynak: 31-mockup/panel.html (bilesen blogu) + 32/32b design review duzeltmeleri.
   YALNIZ var(--...) tuketir: ham #hex / rgb() / keyfi px YOK (tek istisna: @media kirilma noktalari
   ve SVG geometri ozellikleri - birimsiz). Mobil-first: taban 360 px, sidebar >= 1024 px.
   Robot yuzu aynasi `.yuz-cerceve` YATAY 4:3 (robot ekrani 320x240); panel.html'deki dikey 3:4 UYGULANMAZ.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
pre { margin: 0; }
.atla { position: absolute; left: var(--p-space-4); top: -100vh; z-index: var(--p-z-toast); background: var(--accent); color: var(--text-on-accent); padding: var(--p-space-3) var(--p-space-4); border-radius: var(--p-radius-sm); font-weight: var(--p-fw-black); }
.atla:focus { top: var(--p-space-2); }
.sr { position: absolute; width: var(--p-x-piksel); height: var(--p-x-piksel); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Uygulama kabugu ---- */
.uygulama { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.ust-blok { position: sticky; top: 0; z-index: var(--p-z-nav); }
.ust { display: flex; align-items: center; gap: var(--p-space-3); padding: var(--p-space-2) var(--p-space-4); background: var(--bg-surface); border-bottom: var(--p-cizgi-normal) solid var(--border-ui); flex-wrap: wrap; }
.marka { display: flex; align-items: center; gap: var(--p-space-2); font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-xl); line-height: var(--p-lh-sikis); }
.marka-yuz { width: var(--p-x-ikon-xl); height: var(--p-x-ikon-xl); border-radius: var(--p-radius-md); border: var(--p-cizgi-normal) solid var(--border-ui); background: var(--bg-canvas); }
.ust-bosluk { flex: 1; }
.rol-sec { display: inline-flex; border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-pill); background: var(--bg-canvas); padding: var(--p-space-1); gap: var(--p-space-1); }
.rol-sec button { min-height: var(--p-hedef-yetiskin); min-width: var(--p-hedef-yetiskin); padding: 0 var(--p-space-3); border: 0; border-radius: var(--p-radius-pill); background: transparent; cursor: pointer; font-weight: var(--p-fw-bold); display: inline-flex; align-items: center; gap: var(--p-space-1); }
.rol-sec button[aria-checked="true"] { background: var(--accent); color: var(--text-on-accent); }
.demo-not { font-family: var(--font-mono); font-size: var(--p-fs-xs); color: var(--text-muted); }

.yayin-serit { display: flex; align-items: center; gap: var(--p-space-3); flex-wrap: wrap; padding: var(--p-space-2) var(--p-space-4); background: var(--c-yayin-serit-bg); color: var(--c-yayin-serit-fg); font-weight: var(--p-fw-black); }
.yayin-serit .yayin-oge { display: inline-flex; align-items: center; gap: var(--p-space-2); }
.yayin-serit .dugme { background: var(--text-on-accent); color: var(--status-err); border-color: var(--text-on-accent); min-height: var(--p-hedef-yetiskin); box-shadow: none; }
.yayin-nokta { width: var(--p-x-nokta); height: var(--p-x-nokta); border-radius: var(--p-radius-pill); background: var(--c-yayin-serit-fg); animation: nabiz var(--p-sure-yavas) var(--ease-cikis) infinite alternate; }
@keyframes nabiz { from { opacity: 1; } to { opacity: 0.35; } }

.menu { background: var(--bg-surface); border-top: var(--p-cizgi-normal) solid var(--border-ui); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--p-z-nav); display: flex; height: var(--p-x-alt-menu-yuk); }
.menu-oge { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-1); min-height: var(--p-hedef-yetiskin); border: 0; background: transparent; cursor: pointer; font-size: var(--p-fs-xs); font-weight: var(--p-fw-bold); color: var(--text-primary); text-decoration: none; border-top: var(--p-cizgi-kalin) solid transparent; }
.menu-oge[aria-current="page"] { border-top-color: var(--accent); background: var(--bg-accent-soft); }
.menu-oge[aria-current="page"] .ikon { color: var(--accent); }
.menu-oge .ikon { width: var(--p-x-ikon-md); height: var(--p-x-ikon-md); }
.menu-oge[data-mobil="0"] { display: none; }
.menu-daha { display: flex; }
.icerik { padding: var(--p-space-4); padding-bottom: calc(var(--p-x-alt-menu-yuk) + var(--p-space-6)); max-width: var(--p-x-icerik-max); width: 100%; margin: 0 auto; outline: none; }

@media (min-width: 1024px) {
  .uygulama { grid-template-columns: var(--p-x-menu-genis) minmax(0, 1fr); grid-template-areas: "ust ust" "menu icerik"; }
  .ust-blok { grid-area: ust; }
  .menu { grid-area: menu; position: sticky; top: 0; align-self: start; flex-direction: column; height: auto; border-top: 0; border-right: var(--p-cizgi-normal) solid var(--border-ui); padding: var(--p-space-4) var(--p-space-3); gap: var(--p-space-1); min-height: calc(100vh - var(--p-x-alt-menu-yuk)); }
  .menu-oge { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--p-space-3); padding: 0 var(--p-space-4); font-size: var(--p-fs-md); border-top: 0; border-left: var(--p-cizgi-kalin) solid transparent; border-radius: var(--p-radius-md); min-height: var(--hedef-min); }
  .menu-oge[aria-current="page"] { border-left-color: var(--accent); }
  .menu-oge[data-mobil="0"] { display: flex; }
  .menu-daha { display: none; }
  .icerik { grid-area: icerik; padding: var(--p-space-6); padding-bottom: var(--p-space-10); }
}

/* ---- Sayfa iskeleti ---- */
.sayfa { display: flex; flex-direction: column; gap: var(--p-space-4); }
.sayfa-baslik { display: flex; align-items: center; gap: var(--p-space-3); flex-wrap: wrap; }
.sayfa-baslik h1 { font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-2xl); line-height: var(--p-lh-sikis); }
.sayfa-baslik .alt { color: var(--text-muted); font-size: var(--p-fs-sm); }
.izgara { display: grid; gap: var(--p-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--p-x-kart-min)), 1fr)); align-items: start; }
.izgara.iki { grid-template-columns: 1fr; }
.izgara.dar { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--p-x-ikon-2xl)), 1fr)); gap: var(--p-space-2); }
@media (min-width: 768px) { .izgara.iki { grid-template-columns: 1fr 1fr; } .izgara.iki-bir { grid-template-columns: 2fr 1fr; } }
.genis { grid-column: 1 / -1; }
.yigin { display: flex; flex-direction: column; gap: var(--p-space-3); }
.satir { display: flex; align-items: center; gap: var(--p-space-2); flex-wrap: wrap; }
.satir.ayri { justify-content: space-between; }
.bosluk { flex: 1; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.kucuk { font-size: var(--p-fs-sm); }
.xs { font-size: var(--p-fs-xs); }
.tab-sayi { font-variant-numeric: tabular-nums; }
.okunur { max-width: var(--p-x-okunur-genis); }

/* ---- Kart ---- */
.kart { overflow-wrap: anywhere; background: var(--c-kart-bg); border: var(--p-cizgi-normal) solid var(--c-kart-border); border-radius: var(--c-kart-radius); padding: var(--c-kart-pad); box-shadow: var(--c-kart-golge); display: flex; flex-direction: column; gap: var(--p-space-3); min-width: 0; }
.kart-baslik { display: flex; align-items: center; gap: var(--p-space-2); flex-wrap: wrap; }
.kart-baslik h2, .kart-baslik h3 { font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-xl); line-height: var(--p-lh-sikis); }
.kart-baslik .ikon { color: var(--accent); }
.kart.vurgu { border-color: var(--accent); }
.kart.ic { background: var(--bg-raised); box-shadow: none; padding: var(--p-space-3); border-radius: var(--p-radius-md); }

/* ---- Ikon ---- */
.ikon { display: inline-flex; width: var(--p-x-ikon-md); height: var(--p-x-ikon-md); flex: none; }
.ikon svg { width: 100%; height: 100%; }
.ikon.sm { width: var(--p-x-ikon-sm); height: var(--p-x-ikon-sm); }
.ikon.lg { width: var(--p-x-ikon-lg); height: var(--p-x-ikon-lg); }
.ikon.xl { width: var(--p-x-ikon-xl); height: var(--p-x-ikon-xl); }

/* ---- Dugme ---- */
.dugme { min-height: var(--c-dugme-min-h); min-width: var(--c-dugme-min-w); padding: 0 var(--p-space-5); border-radius: var(--c-dugme-radius); border: var(--p-cizgi-normal) solid var(--border-ui); background: var(--bg-raised); color: var(--text-primary); font-size: var(--c-dugme-fs); font-weight: var(--p-fw-bold); display: inline-flex; align-items: center; justify-content: center; gap: var(--p-space-2); cursor: pointer; box-shadow: var(--golge-1); transition: transform var(--sure-hizli) var(--ease-cikis), box-shadow var(--sure-hizli) var(--ease-cikis), background var(--sure-hizli) var(--ease-cikis); text-decoration: none; line-height: var(--p-lh-sikis); }
.dugme:hover { background: var(--bg-accent-soft); }
.dugme:active, .dugme.basili { transform: translateY(var(--p-cizgi-kalin)); box-shadow: none; }
.dugme[disabled], .dugme[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; color: var(--text-muted); box-shadow: none; }
.dugme.birincil { background: var(--c-dugme-bg); color: var(--c-dugme-fg); border-color: var(--c-dugme-bg); }
.dugme.birincil:hover { background: var(--c-dugme-bg); filter: brightness(1.08); }
.dugme.ikincil { background: var(--c-dugme-bg-2); color: var(--c-dugme-fg-2); border-color: var(--c-dugme-bg-2); }
.dugme.ikincil:hover { background: var(--c-dugme-bg-2); filter: brightness(1.08); }
.dugme.tehlike { border-color: var(--status-err); background: var(--bg-err-soft); }
.dugme.hayalet { background: transparent; box-shadow: none; }
.dugme.kucuk { min-height: var(--p-hedef-yetiskin); padding: 0 var(--p-space-3); font-size: var(--p-fs-sm); }
.dugme.buyuk { min-height: calc(var(--hedef-min) * 1.25); font-family: var(--font-baslik); font-size: var(--p-fs-lg); box-shadow: var(--c-dugme-golge); }
.dugme .ikon { width: var(--c-dugme-ikon); height: var(--c-dugme-ikon); }
.dugme.kucuk .ikon, .dugme.hayalet .ikon { width: var(--p-x-ikon-md); height: var(--p-x-ikon-md); }
.dugme[aria-pressed="true"] { background: var(--bg-accent-soft); border-color: var(--accent); box-shadow: var(--parilti); }
.dugme.dikey { flex-direction: column; padding: var(--p-space-3); gap: var(--p-space-1); }
.eylem-sirasi { display: flex; flex-wrap: wrap; gap: var(--hedef-bosluk); }
.eylem-sirasi > .dugme { flex: 1 1 auto; }

/* ---- Rozet ---- */
.rozet { display: inline-flex; align-items: center; gap: var(--p-space-1); min-height: var(--c-rozet-min-h); padding: 0 var(--c-rozet-pad-x); border-radius: var(--c-rozet-radius); border: var(--p-cizgi-normal) solid var(--border-ui); background: var(--bg-raised); font-size: var(--p-fs-sm); font-weight: var(--p-fw-bold); white-space: nowrap; }
.rozet .ikon { width: var(--p-x-ikon-sm); height: var(--p-x-ikon-sm); }
.rozet.ok { background: var(--bg-ok-soft); border-color: var(--status-ok); } .rozet.ok .ikon { color: var(--status-ok); }
.rozet.warn { background: var(--bg-warn-soft); border-color: var(--status-warn); } .rozet.warn .ikon { color: var(--status-warn); }
.rozet.err { background: var(--bg-err-soft); border-color: var(--status-err); } .rozet.err .ikon { color: var(--status-err); }
.rozet.info { background: var(--bg-info-soft); border-color: var(--status-info); } .rozet.info .ikon { color: var(--status-info); }
.rozet.vurgu { background: var(--bg-accent-soft); border-color: var(--accent); } .rozet.vurgu .ikon { color: var(--accent); }
.rozet.mono { font-family: var(--font-mono); font-size: var(--p-fs-xs); }
.serit { display: flex; gap: var(--p-space-3); align-items: flex-start; padding: var(--p-space-3) var(--p-space-4); border-radius: var(--p-radius-md); border: var(--p-cizgi-normal) solid var(--border-ui); border-left-width: var(--p-space-2); background: var(--bg-raised); }
.serit.ok { border-color: var(--status-ok); background: var(--bg-ok-soft); } .serit.ok > .ikon { color: var(--status-ok); }
.serit.warn { border-color: var(--status-warn); background: var(--bg-warn-soft); } .serit.warn > .ikon { color: var(--status-warn); }
.serit.err { border-color: var(--status-err); background: var(--bg-err-soft); } .serit.err > .ikon { color: var(--status-err); }
.serit.info { border-color: var(--status-info); background: var(--bg-info-soft); } .serit.info > .ikon { color: var(--status-info); }

/* ---- Form ---- */
.alan { display: flex; flex-direction: column; gap: var(--p-space-1); }
.alan > label, .etiket { font-weight: var(--p-fw-bold); font-size: var(--p-fs-sm); }
.girdi { min-height: var(--p-hedef-yetiskin); width: 100%; padding: var(--p-space-2) var(--p-space-3); background: var(--bg-canvas); border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-sm); }
textarea.girdi { min-height: calc(var(--p-hedef-yetiskin) * 2); resize: vertical; line-height: var(--p-lh-normal); }
.girdi::placeholder { color: var(--text-muted); }
.ipucu { font-size: var(--p-fs-xs); color: var(--text-muted); }
.hata-mesaj { color: var(--text-primary); background: var(--bg-err-soft); border: var(--p-cizgi-normal) solid var(--status-err); border-radius: var(--p-radius-sm); padding: var(--p-space-2) var(--p-space-3); font-size: var(--p-fs-sm); }
.segment { display: inline-flex; flex-wrap: wrap; gap: var(--p-space-1); padding: var(--p-space-1); background: var(--bg-canvas); border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-lg); }
.segment button { min-height: var(--p-hedef-yetiskin); padding: 0 var(--p-space-4); border: 0; background: transparent; border-radius: var(--p-radius-md); font-weight: var(--p-fw-bold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--p-space-2); }
.segment button[aria-pressed="true"], .segment button[aria-selected="true"], .segment button[aria-checked="true"] { background: var(--accent); color: var(--text-on-accent); }
.anahtar { display: inline-flex; align-items: center; gap: var(--p-space-3); cursor: pointer; min-height: var(--p-hedef-yetiskin); }
.anahtar input { position: absolute; opacity: 0; width: var(--p-x-piksel); height: var(--p-x-piksel); }
.anahtar .iz { width: var(--p-space-12); height: var(--p-space-6); border-radius: var(--p-radius-pill); background: var(--bg-raised); border: var(--p-cizgi-normal) solid var(--border-ui); position: relative; flex: none; transition: background var(--sure-hizli); }
.anahtar .iz::after { content: ""; position: absolute; top: 50%; left: var(--p-space-1); width: var(--p-space-4); height: var(--p-space-4); transform: translateY(-50%); border-radius: var(--p-radius-pill); background: var(--text-primary); transition: left var(--sure-hizli) var(--ease-cikis); }
.anahtar input:checked + .iz { background: var(--accent); border-color: var(--accent); }
.anahtar input:checked + .iz::after { left: calc(100% - var(--p-space-4) - var(--p-space-1)); background: var(--text-on-accent); }
.anahtar input:focus-visible + .iz { outline: var(--p-cizgi-kalin) solid var(--odak-halka); outline-offset: var(--p-cizgi-kalin); }

input[type="range"].kaydirici { -webkit-appearance: none; appearance: none; width: 100%; height: var(--c-kaydirici-tutac); background: transparent; cursor: pointer; --alt: 0; --ust: 100; }
input[type="range"].kaydirici::-webkit-slider-runnable-track { height: var(--c-kaydirici-iz-h); border-radius: var(--p-radius-pill); background: linear-gradient(to right, var(--bg-err-soft) 0 calc(var(--alt) * 1%), var(--c-kaydirici-iz-bg) calc(var(--alt) * 1%) calc(var(--ust) * 1%), var(--bg-err-soft) calc(var(--ust) * 1%) 100%); border: var(--p-cizgi-ince) solid var(--border-ui); }
input[type="range"].kaydirici::-moz-range-track { height: var(--c-kaydirici-iz-h); border-radius: var(--p-radius-pill); background: linear-gradient(to right, var(--bg-err-soft) 0 calc(var(--alt) * 1%), var(--c-kaydirici-iz-bg) calc(var(--alt) * 1%) calc(var(--ust) * 1%), var(--bg-err-soft) calc(var(--ust) * 1%) 100%); border: var(--p-cizgi-ince) solid var(--border-ui); }
input[type="range"].kaydirici::-webkit-slider-thumb { -webkit-appearance: none; width: var(--p-hedef-yetiskin); height: var(--p-hedef-yetiskin); margin-top: calc((var(--c-kaydirici-iz-h) - var(--p-hedef-yetiskin)) / 2); border-radius: var(--p-radius-pill); background: var(--c-kaydirici-dolgu); border: var(--p-cizgi-kalin) solid var(--bg-canvas); box-shadow: var(--golge-1); }
input[type="range"].kaydirici::-moz-range-thumb { width: var(--p-hedef-yetiskin); height: var(--p-hedef-yetiskin); border-radius: var(--p-radius-pill); background: var(--c-kaydirici-dolgu); border: var(--p-cizgi-kalin) solid var(--bg-canvas); box-shadow: var(--golge-1); }
[data-rol="cocuk"] input[type="range"].kaydirici::-webkit-slider-thumb { width: var(--c-kaydirici-tutac); height: var(--c-kaydirici-tutac); margin-top: calc((var(--c-kaydirici-iz-h) - var(--c-kaydirici-tutac)) / 2); }
.ilerleme { height: var(--p-space-3); border-radius: var(--p-radius-pill); background: var(--bg-raised); border: var(--p-cizgi-ince) solid var(--border-ui); overflow: hidden; }
.ilerleme > span { display: block; height: 100%; width: calc(var(--yuzde, 0) * 1%); background: var(--accent); transition: width var(--sure-normal) var(--ease-cikis); }
.ilerleme.ok > span { background: var(--status-ok); } .ilerleme.warn > span { background: var(--status-warn); } .ilerleme.err > span { background: var(--status-err); } .ilerleme.info > span { background: var(--status-info); }

/* ---- Sekmeler ---- */
.sekmeler { display: flex; gap: var(--p-space-1); flex-wrap: wrap; border-bottom: var(--p-cizgi-normal) solid var(--border-ui); }
.sekmeler button { min-height: var(--p-hedef-yetiskin); padding: 0 var(--p-space-4); background: transparent; border: 0; border-bottom: var(--p-cizgi-kalin) solid transparent; font-weight: var(--p-fw-bold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--p-space-2); }
.sekmeler button[aria-selected="true"] { border-bottom-color: var(--accent); background: var(--bg-accent-soft); border-radius: var(--p-radius-sm) var(--p-radius-sm) 0 0; }
.sekmeler button[aria-selected="true"] .ikon { color: var(--accent); }

/* ---- Yuz / robot ekrani aynasi ---- */
.yuz-cerceve { position: relative; width: var(--p-x-yuz-genis); max-width: 100%; aspect-ratio: 4 / 3; border-radius: var(--p-radius-xl); border: var(--p-cizgi-kalin) solid var(--border-ui); background: var(--bg-canvas); overflow: hidden; box-shadow: var(--parilti); --goz: var(--accent); flex: none; }
.yuz-cerceve.uyku { box-shadow: none; }
.yuz-cerceve.buyuk { width: calc(var(--p-x-yuz-genis) * 1.25); }
.yuz-svg { width: 100%; height: 100%; }
.yuz-svg .goz { fill: var(--goz); transform-box: fill-box; transform-origin: center; transition: transform var(--sure-hizli) var(--ease-cikis); }
.yuz-svg .parlak { fill: var(--bg-canvas); }
.yuz-svg .cizgi { fill: none; stroke: var(--goz); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.yuz-svg .kas { fill: none; stroke: var(--text-muted); stroke-width: 6; stroke-linecap: round; }
.yuz-svg .z-harf { fill: var(--text-muted); font-family: var(--font-baslik); font-weight: 800; }
.yuz-svg.kirp .goz { transform: scaleY(0.12); }
.yuz-yazi { position: absolute; left: var(--p-space-2); right: var(--p-space-2); bottom: var(--p-space-3); padding: var(--p-space-2) var(--p-space-3); border-radius: var(--p-radius-md); background: var(--bg-raised); border: var(--p-cizgi-normal) solid var(--border-ui); color: var(--text-primary); font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-md); text-align: center; line-height: var(--p-lh-sikis); }
.yuz-yazi .kalan { display: block; height: var(--p-space-1); margin-top: var(--p-space-1); background: var(--accent); width: calc(var(--kalan, 0) * 1%); border-radius: var(--p-radius-pill); }
.yuz-kart { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--p-space-4); font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-xl); line-height: var(--p-lh-sikis); background: var(--bg-surface); color: var(--text-primary); border: var(--p-cizgi-kalin) solid var(--kart-renk, var(--accent)); box-shadow: inset 0 0 0 var(--p-space-4) var(--kart-renk, var(--accent)); }
.yuz-gosterge { position: absolute; top: var(--p-space-2); right: var(--p-space-2); display: flex; gap: var(--p-space-1); }
.yuz-gosterge .ikon { width: var(--p-x-ikon-sm); height: var(--p-x-ikon-sm); color: var(--status-err); background: var(--bg-canvas); border-radius: var(--p-radius-pill); }
.yuz-saat { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-2); font-family: var(--font-baslik); }
.yuz-saat strong { font-size: var(--p-fs-4xl); font-variant-numeric: tabular-nums; }
.yuz-ag { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-1); padding: var(--p-space-2); text-align: center; background: var(--bg-canvas); font-size: var(--p-fs-sm); line-height: var(--p-lh-sikis); }
.yuz-ag .qr { width: calc(var(--p-x-yuz-genis) * 0.5); color: var(--text-primary); }
.yuz-ag b { font-family: var(--font-baslik); font-size: var(--p-fs-lg); }
.yuz-ifade-dugme { padding: var(--p-space-1); }
.yuz-ifade-dugme .yuz-mini { width: var(--p-x-ikon-2xl); height: calc(var(--p-x-ikon-2xl) * 1.2); border-radius: var(--p-radius-md); background: var(--bg-canvas); border: var(--p-cizgi-normal) solid var(--border-ui); --goz: var(--accent); overflow: hidden; }
.konusma-balon { position: relative; background: var(--bg-raised); border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-lg); padding: var(--p-space-3) var(--p-space-4); font-size: var(--p-fs-lg); }
.durum-cumle { font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-3xl); line-height: var(--p-lh-sikis); }
[data-rol="cocuk"] .durum-cumle { font-size: var(--p-fs-4xl); }
.kahraman { display: flex; gap: var(--p-space-6); align-items: center; flex-wrap: wrap; }
.kahraman-metin { flex: 1 1 var(--p-x-kart-min); display: flex; flex-direction: column; gap: var(--p-space-3); }

/* ---- Sayac / halka ---- */
.sayaclar { display: grid; gap: var(--p-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--p-x-halka) * 1.15)), 1fr)); }
.sayac { display: flex; flex-direction: column; align-items: center; gap: var(--p-space-2); padding: var(--p-space-3); background: var(--bg-raised); border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-lg); text-align: center; }
.sayac .ad { display: inline-flex; align-items: center; gap: var(--p-space-1); font-weight: var(--p-fw-bold); font-size: var(--p-fs-sm); }
.sayac .ad .ikon { width: var(--p-x-ikon-sm); height: var(--p-x-ikon-sm); color: var(--accent); }
.halka { position: relative; width: var(--p-x-halka); height: var(--p-x-halka); }
.halka svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.halka .iz { fill: none; stroke: var(--bg-canvas); }
.halka .dolgu { fill: none; stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset var(--sure-yavas) var(--ease-cikis); }
.halka.ok .dolgu { stroke: var(--status-ok); } .halka.warn .dolgu { stroke: var(--status-warn); } .halka.err .dolgu { stroke: var(--status-err); } .halka.info .dolgu { stroke: var(--status-info); }
.halka .deger { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--p-fs-2xl); font-variant-numeric: tabular-nums; line-height: var(--p-lh-sikis); }
.halka .deger small { font-size: var(--p-fs-xs); color: var(--text-muted); font-weight: 500; }
.mini-sayac { display: flex; align-items: center; gap: var(--p-space-3); padding: var(--p-space-3) var(--p-space-4); background: var(--bg-raised); border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-lg); }
.mini-sayac .ikon { color: var(--accent); }
.mini-sayac b { font-family: var(--font-mono); font-size: var(--p-fs-xl); font-variant-numeric: tabular-nums; display: block; line-height: var(--p-lh-sikis); }
.mini-sayac span.et { font-size: var(--p-fs-sm); color: var(--text-muted); }
.spark { width: 100%; height: var(--p-x-grafik-yuk); }
.spark .alan-dolgu { fill: var(--bg-accent-soft); stroke: none; }
.spark .cizgi { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark.iki .cizgi { stroke: var(--accent-2); }
.spark .izgara-cizgi { stroke: var(--border-ui); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.cubuk-grafik { width: 100%; height: calc(var(--p-x-grafik-yuk) * 1.5); }
.cubuk-grafik .cubuk { fill: var(--accent); }
.cubuk-grafik .cubuk.iki { fill: var(--accent-2); }
.cubuk-grafik text { fill: var(--text-muted); font-family: var(--font-mono); }

/* ---- Canli yayin ---- */
.yayin-cerceve { position: relative; border-radius: var(--c-yayin-radius); border: var(--p-cizgi-normal) solid var(--border-ui); background: var(--bg-canvas); overflow: hidden; aspect-ratio: 16 / 9; }
.yayin-cerceve.acik { border: var(--c-yayin-border); }
.yayin-cerceve canvas { width: 100%; height: 100%; }
.yayin-bos { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg-canvas) 88%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-3); text-align: center; padding: var(--p-space-4); }
.yayin-ust { position: absolute; top: var(--p-space-2); left: var(--p-space-2); right: var(--p-space-2); display: flex; gap: var(--p-space-2); flex-wrap: wrap; }
.rozet.yayin-etiket { background: var(--c-yayin-serit-bg); color: var(--c-yayin-serit-fg); border-color: var(--c-yayin-serit-bg); }
.rozet.yayin-etiket .ikon { color: var(--c-yayin-serit-fg); }
.seviye-cubuk { width: 100%; height: calc(var(--p-x-grafik-yuk) * 0.6); border-radius: var(--p-radius-md); background: var(--bg-canvas); border: var(--p-cizgi-normal) solid var(--border-ui); }
.gosterge-liste { display: flex; flex-direction: column; gap: var(--p-space-2); }
.gosterge-satir { display: flex; align-items: center; gap: var(--p-space-3); padding: var(--p-space-2) var(--p-space-3); background: var(--bg-raised); border-radius: var(--p-radius-md); border: var(--p-cizgi-normal) solid var(--border-ui); }
.gosterge-satir.yanik { border-color: var(--status-warn); background: var(--bg-warn-soft); }
.medya-satir { display: flex; align-items: center; gap: var(--p-space-3); padding: var(--p-space-2) 0; border-bottom: var(--p-cizgi-ince) solid var(--border-ui); flex-wrap: wrap; }
.medya-satir .esnek { flex: 1 1 40%; }
.medya-kucuk { width: var(--p-x-ikon-2xl); aspect-ratio: 16 / 9; border-radius: var(--p-radius-sm); background: var(--bg-canvas); border: var(--p-cizgi-normal) solid var(--border-ui); }
.panorama { width: 100%; aspect-ratio: 3 / 1; border-radius: var(--p-radius-md); border: var(--p-cizgi-normal) solid var(--border-ui); background: var(--bg-canvas); }

/* ---- Hareket / servo ---- */
.pad { position: relative; width: var(--c-pad-boyut); max-width: 100%; aspect-ratio: 1; background: var(--c-pad-bg); border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-xl); touch-action: none; cursor: grab; overflow: hidden; --px: 50; --py: 50; --sol: 0; --sag: 0; --ust-b: 0; --alt-b: 0; }
.pad:active { cursor: grabbing; }
.pad .sinir { position: absolute; background: var(--c-pad-sinir-bg); }
.pad .sinir.sol { left: 0; top: 0; bottom: 0; width: calc(var(--sol) * 1%); }
.pad .sinir.sag { right: 0; top: 0; bottom: 0; width: calc(var(--sag) * 1%); }
.pad .sinir.ust { left: 0; right: 0; top: 0; height: calc(var(--ust-b) * 1%); }
.pad .sinir.alt { left: 0; right: 0; bottom: 0; height: calc(var(--alt-b) * 1%); }
.pad .merkez-yatay, .pad .merkez-dikey { position: absolute; background: var(--border-ui); }
.pad .merkez-yatay { left: 0; right: 0; top: 50%; height: var(--p-cizgi-ince); }
.pad .merkez-dikey { top: 0; bottom: 0; left: 50%; width: var(--p-cizgi-ince); }
.pad .tutac { position: absolute; left: calc(var(--px) * 1%); top: calc(var(--py) * 1%); width: var(--c-pad-tutac); height: var(--c-pad-tutac); margin-left: calc(var(--c-pad-tutac) / -2); margin-top: calc(var(--c-pad-tutac) / -2); border-radius: var(--p-radius-pill); background: var(--accent); border: var(--p-cizgi-kalin) solid var(--bg-canvas); box-shadow: var(--golge-2); display: flex; align-items: center; justify-content: center; color: var(--text-on-accent); }
.pad.tutuyor .tutac { box-shadow: var(--parilti); }
.pad-etiket { position: absolute; font-size: var(--p-fs-xs); color: var(--text-muted); font-family: var(--font-mono); }
.pad-etiket.u { top: var(--p-space-1); left: 50%; transform: translateX(-50%); } .pad-etiket.a { bottom: var(--p-space-1); left: 50%; transform: translateX(-50%); }
.pad-etiket.l { left: var(--p-space-1); top: 50%; transform: translateY(-50%); } .pad-etiket.r { right: var(--p-space-1); top: 50%; transform: translateY(-50%); }
.kafa-onizleme { width: calc(var(--p-x-yuz-genis) * 0.8); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-canvas); border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-xl); overflow: hidden; --pan: 0; --tilt: 0; --roll: 0; }
.kafa-onizleme .kafa { width: 60%; aspect-ratio: 1; transform: translateX(calc(var(--pan) * 0.9%)) translateY(calc(var(--tilt) * -0.9%)) rotate(calc(var(--roll) * 1deg)); transition: transform var(--sure-hizli) linear; --goz: var(--accent); border-radius: 40%; background: var(--bg-raised); border: var(--p-cizgi-kalin) solid var(--border-ui); }
.eksen-satir { display: grid; grid-template-columns: var(--p-space-12) 1fr auto; gap: var(--p-space-3); align-items: center; }
.eksen-satir .ad { font-weight: var(--p-fw-black); font-family: var(--font-baslik); font-size: var(--p-fs-lg); }
.eksen-satir .deger { font-family: var(--font-mono); font-variant-numeric: tabular-nums; min-width: calc(var(--p-space-16) + var(--p-space-4)); text-align: right; }
.jest-izgara { display: grid; gap: var(--hedef-bosluk); grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--p-x-ikon-2xl) * 2)), 1fr)); }
.sihirbaz-adim { display: flex; gap: var(--p-space-2); align-items: center; flex-wrap: wrap; }
.sihirbaz-adim .nokta { width: var(--p-x-ikon-md); height: var(--p-x-ikon-md); border-radius: var(--p-radius-pill); display: inline-flex; align-items: center; justify-content: center; border: var(--p-cizgi-normal) solid var(--border-ui); font-weight: var(--p-fw-black); font-size: var(--p-fs-sm); background: var(--bg-raised); }
.sihirbaz-adim .nokta.aktif { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.sihirbaz-adim .nokta.bitti { background: var(--bg-ok-soft); border-color: var(--status-ok); }

/* ---- Tablo / liste ---- */
.tablo { width: 100%; border-collapse: collapse; font-size: var(--p-fs-sm); }
.tablo th { text-align: left; font-weight: var(--p-fw-black); color: var(--text-muted); padding: var(--p-space-2) var(--p-space-3); border-bottom: var(--p-cizgi-normal) solid var(--border-ui); white-space: nowrap; }
.tablo td { padding: var(--p-space-2) var(--p-space-3); border-bottom: var(--p-cizgi-ince) solid var(--border-ui); vertical-align: middle; }
.tablo td.sayi, .tablo th.sayi { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tablo-sarma { overflow-x: auto; border-radius: var(--p-radius-md); }
.liste { display: flex; flex-direction: column; }
.liste-oge { display: flex; align-items: center; gap: var(--p-space-3); padding: var(--p-space-3) 0; border-bottom: var(--p-cizgi-ince) solid var(--border-ui); min-height: var(--c-zaman-min-h); flex-wrap: wrap; }
.liste-oge:last-child { border-bottom: 0; }

/* ---- Zaman cizelgesi ---- */
.zaman { position: relative; display: flex; flex-direction: column; }
.zaman-satir { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--p-space-3); align-items: start; min-height: var(--c-zaman-min-h); padding: var(--p-space-2) 0; position: relative; }
.zaman-satir::before { content: ""; position: absolute; left: calc(var(--p-space-16) + var(--p-space-3) + var(--p-x-ikon-sm) / 2); top: 0; bottom: 0; width: var(--p-cizgi-normal); background: var(--c-zaman-cizgi); }
.zaman-saat { font-family: var(--font-mono); font-size: var(--p-fs-xs); color: var(--text-muted); width: var(--p-space-16); padding-top: var(--p-space-2); font-variant-numeric: tabular-nums; }
.zaman-nokta { position: relative; z-index: 1; width: var(--p-x-ikon-lg); height: var(--p-x-ikon-lg); border-radius: var(--p-radius-pill); background: var(--bg-surface); border: var(--p-cizgi-kalin) solid var(--tur-renk, var(--border-ui)); display: flex; align-items: center; justify-content: center; margin-left: calc((var(--p-x-ikon-sm) - var(--p-x-ikon-lg)) / 2); }
.zaman-nokta .ikon { width: var(--p-x-ikon-sm); height: var(--p-x-ikon-sm); color: var(--tur-renk, var(--text-primary)); }
.zaman-govde { min-width: 0; display: flex; flex-direction: column; gap: var(--p-space-1); padding-top: var(--p-space-1); }
.zaman-govde .tur { font-size: var(--p-fs-xs); font-family: var(--font-mono); color: var(--text-muted); }
.zaman-ayrinti { background: var(--c-log-bg); border: var(--p-cizgi-ince) solid var(--border-ui); border-radius: var(--p-radius-sm); padding: var(--p-space-2) var(--p-space-3); font-family: var(--font-mono); font-size: var(--p-fs-xs); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
[data-tur="sohbet"] { --tur-renk: var(--accent-2); } [data-tur="oyun"] { --tur-renk: var(--accent); } [data-tur="algi"] { --tur-renk: var(--status-info); }
[data-tur="kip"], [data-tur="uyku"] { --tur-renk: var(--status-info); } [data-tur="jest"] { --tur-renk: var(--accent); } [data-tur="panel_audit"] { --tur-renk: var(--status-warn); }
[data-tur="saglik"] { --tur-renk: var(--status-ok); } [data-tur="ajan_arac"] { --tur-renk: var(--accent-2); } [data-tur="ses"] { --tur-renk: var(--status-info); }
[data-tur="hata"] { --tur-renk: var(--status-err); } [data-tur="ag"] { --tur-renk: var(--status-info); }
.log { background: var(--c-log-bg); border: var(--p-cizgi-normal) solid var(--border-ui); border-radius: var(--p-radius-md); font-family: var(--c-log-font); font-size: var(--c-log-fs); max-height: var(--p-x-log-yuk); overflow: auto; padding: var(--p-space-2); }
.log-satir { display: grid; grid-template-columns: auto auto auto 1fr; gap: var(--p-space-3); padding: var(--c-log-satir-pad-y) var(--p-space-1); align-items: baseline; }
.log-satir .sev { display: inline-flex; align-items: center; gap: var(--p-space-1); font-weight: 700; padding: 0 var(--p-space-2); border-radius: var(--p-radius-sm); border: var(--p-cizgi-ince) solid var(--border-ui); }
.log-satir .sev.I { background: var(--bg-info-soft); border-color: var(--status-info); }
.log-satir .sev.W { background: var(--bg-warn-soft); border-color: var(--status-warn); }
.log-satir .sev.E { background: var(--bg-err-soft); border-color: var(--status-err); }
.log-satir .kaynak { color: var(--text-muted); }

/* ---- Sohbet / AI ---- */
.tur-kart { display: flex; flex-direction: column; gap: var(--p-space-2); padding: var(--p-space-3); background: var(--bg-raised); border-radius: var(--p-radius-md); border: var(--p-cizgi-normal) solid var(--border-ui); }
.balon { padding: var(--p-space-2) var(--p-space-3); border-radius: var(--p-radius-md); max-width: var(--p-x-okunur-genis); }
.balon.duyulan { background: var(--bg-surface); border: var(--p-cizgi-normal) solid var(--border-ui); align-self: flex-start; }
.balon.soyledi { background: var(--bg-accent-2-soft); border: var(--p-cizgi-normal) solid var(--accent-2); align-self: flex-end; }
.balon .kim { display: block; font-size: var(--p-fs-xs); font-weight: var(--p-fw-black); color: var(--text-muted); }
.balon.parca::after { content: " ..."; color: var(--text-muted); }
.zarf-onizleme { font-family: var(--font-mono); font-size: var(--p-fs-xs); background: var(--c-log-bg); border: var(--p-cizgi-normal) dashed var(--border-ui); border-radius: var(--p-radius-sm); padding: var(--p-space-2) var(--p-space-3); overflow-wrap: anywhere; }
.chip-sira { display: flex; flex-wrap: wrap; gap: var(--p-space-2); }
.chip { min-height: var(--p-hedef-yetiskin); padding: 0 var(--p-space-4); border-radius: var(--p-radius-pill); background: var(--bg-raised); border: var(--p-cizgi-normal) solid var(--border-ui); cursor: pointer; font-weight: var(--p-fw-bold); display: inline-flex; align-items: center; gap: var(--p-space-2); }
.chip:hover { background: var(--bg-accent-soft); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
[data-rol="cocuk"] .chip { min-height: var(--hedef-min); font-size: var(--p-fs-lg); }
.skor { display: inline-flex; align-items: center; gap: var(--p-space-2); }
.skor .ilerleme { width: calc(var(--p-space-16) + var(--p-space-4)); }

/* ---- Tema secici ---- */
.tema-secici { display: flex; flex-wrap: wrap; gap: var(--p-space-3); }
.tema-oge { display: flex; flex-direction: column; align-items: center; gap: var(--p-space-2); background: transparent; border: 0; cursor: pointer; padding: var(--p-space-1); min-width: var(--hedef-min); font-weight: var(--p-fw-bold); color: var(--text-primary); }
.tema-ornek { width: calc(var(--c-tema-ornek-boyut) * 1.5); height: var(--c-tema-ornek-boyut); border-radius: var(--c-tema-ornek-radius); background: var(--bg-canvas); border: var(--p-cizgi-normal) solid var(--border-ui); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--p-space-1); padding: var(--p-space-1); position: relative; overflow: hidden; }
.tema-ornek .y1 { height: 30%; background: var(--bg-surface); border-radius: var(--p-radius-sm); }
.tema-ornek .y2 { height: 24%; display: flex; gap: var(--p-space-1); }
.tema-ornek .y2 i { flex: 1; border-radius: var(--p-radius-sm); }
.tema-ornek .y2 i:first-child { background: var(--accent); } .tema-ornek .y2 i:last-child { background: var(--accent-2); }
.tema-oge[aria-checked="true"] .tema-ornek { border: var(--c-tema-secili-halka); box-shadow: var(--parilti); }
.tema-oge .tik { position: absolute; top: var(--p-space-1); right: var(--p-space-1); width: var(--p-x-ikon-sm); height: var(--p-x-ikon-sm); color: var(--text-primary); }

/* ---- Cocuk ana ekrani ---- */
.cocuk-izgara { display: grid; gap: var(--hedef-bosluk); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .cocuk-izgara { grid-template-columns: repeat(3, 1fr); } }
.cocuk-kart { min-height: var(--p-x-cocuk-kart-yuk); border-radius: var(--p-radius-xl); border: var(--p-cizgi-kalin) solid var(--border-ui); background: var(--bg-surface); box-shadow: var(--golge-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-2); cursor: pointer; font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-xl); color: var(--text-primary); transition: transform var(--sure-hizli) var(--ease-cikis), box-shadow var(--sure-hizli) var(--ease-cikis); }
.cocuk-kart:active { transform: translateY(var(--p-space-2)); box-shadow: none; }
.cocuk-kart .ikon { width: var(--p-x-ikon-2xl); height: var(--p-x-ikon-2xl); padding: var(--p-space-3); border-radius: var(--p-radius-pill); background: var(--kart-ton, var(--accent)); color: var(--kart-on, var(--text-on-accent)); box-sizing: content-box; }
.cocuk-kart.t1 { --kart-ton: var(--accent); --kart-on: var(--text-on-accent); }
.cocuk-kart.t2 { --kart-ton: var(--accent-2); --kart-on: var(--text-on-accent-2); }
.cocuk-kart.t3 { --kart-ton: var(--status-ok); --kart-on: var(--text-on-accent); }
.cocuk-kart.t4 { --kart-ton: var(--status-warn); --kart-on: var(--text-on-accent); }
.cocuk-kart.t5 { --kart-ton: var(--status-info); --kart-on: var(--text-on-accent); }
.cocuk-kart.t6 { --kart-ton: var(--status-err); --kart-on: var(--text-on-accent); }
.cocuk-secenekler { display: grid; gap: var(--hedef-bosluk); grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--p-x-ikon-2xl) * 2.4)), 1fr)); }

/* ---- Dialog / toast / tamam ---- */
dialog.modal { border: var(--p-cizgi-kalin) solid var(--border-ui); border-radius: var(--p-radius-xl); background: var(--bg-surface); color: var(--text-primary); padding: 0; width: min(calc(100% - var(--p-space-8)), var(--p-x-modal-genis)); max-height: calc(100vh - var(--p-space-8)); box-shadow: var(--golge-2); }
dialog.modal.genis-modal { width: min(calc(100% - var(--p-space-8)), calc(var(--p-x-modal-genis) * 1.5)); }
dialog.modal::backdrop { background: var(--p-golge-sert); }
.modal-baslik { display: flex; align-items: center; gap: var(--p-space-3); padding: var(--p-space-4) var(--p-space-5); border-bottom: var(--p-cizgi-normal) solid var(--border-ui); }
.modal-baslik h2 { font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-xl); flex: 1; line-height: var(--p-lh-sikis); }
.modal-govde { padding: var(--p-space-5); display: flex; flex-direction: column; gap: var(--p-space-3); overflow: auto; max-height: calc(100vh - var(--p-x-ikon-2xl) * 3); }
.modal-alt { display: flex; gap: var(--p-space-2); justify-content: flex-end; flex-wrap: wrap; padding: var(--p-space-4) var(--p-space-5); border-top: var(--p-cizgi-normal) solid var(--border-ui); }
.toastlar { position: fixed; left: var(--p-space-4); right: var(--p-space-4); bottom: calc(var(--p-x-alt-menu-yuk) + var(--p-space-4)); z-index: var(--p-z-toast); display: flex; flex-direction: column; gap: var(--p-space-2); align-items: center; pointer-events: none; }
@media (min-width: 1024px) { .toastlar { bottom: var(--p-space-6); align-items: flex-end; } }
.toast { pointer-events: auto; display: flex; gap: var(--p-space-3); align-items: center; padding: var(--p-space-3) var(--p-space-4); background: var(--bg-raised); border: var(--p-cizgi-normal) solid var(--border-ui); border-left-width: var(--p-space-2); border-radius: var(--p-radius-md); box-shadow: var(--golge-2); max-width: var(--p-x-modal-genis); font-weight: var(--p-fw-bold); }
.toast.ok { border-color: var(--status-ok); } .toast.ok .ikon { color: var(--status-ok); }
.toast.err { border-color: var(--status-err); } .toast.err .ikon { color: var(--status-err); }
.toast.warn { border-color: var(--status-warn); } .toast.warn .ikon { color: var(--status-warn); }
.toast.info { border-color: var(--status-info); } .toast.info .ikon { color: var(--status-info); }
.tamam { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: var(--p-z-toast); }
.tamam .yildiz { display: flex; flex-direction: column; align-items: center; gap: var(--p-space-2); padding: var(--p-space-6) var(--p-space-10); border-radius: var(--p-radius-xl); background: var(--bg-surface); border: var(--p-cizgi-kalin) solid var(--accent); box-shadow: var(--golge-2), var(--parilti); font-family: var(--font-baslik); font-weight: var(--p-fw-bold); font-size: var(--p-fs-2xl); animation: ziplama var(--p-sure-yavas) var(--ease-ziplama) both; }
.tamam .yildiz .ikon { width: var(--p-x-ikon-2xl); height: var(--p-x-ikon-2xl); color: var(--accent); }
@keyframes ziplama { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Rol/yogunluk ince ayar ---- */
[data-yogunluk="siki"] .izgara, [data-yogunluk="siki"] .sayfa { gap: var(--p-space-2); }
[data-yogunluk="siki"] .kart { padding: var(--p-space-3); }
[data-rol="cocuk"] .sadece-yetiskin { display: none !important; }
[data-rol="cocuk"] .icerik { padding-top: var(--p-space-6); }
.bos-durum { display: flex; flex-direction: column; align-items: center; gap: var(--p-space-3); padding: var(--p-space-8) var(--p-space-4); text-align: center; color: var(--text-muted); }
.sonuc-ok { color: var(--text-primary); }
.esnek { flex: 1; min-width: 0; }
.ayrac { border: 0; border-top: var(--p-cizgi-normal) solid var(--border-ui); width: 100%; margin: var(--p-space-2) 0; }
.renk-nokta { display: inline-block; width: var(--p-space-4); height: var(--p-space-4); border-radius: var(--p-radius-pill); background: var(--nokta-renk, var(--accent)); border: var(--p-cizgi-normal) solid var(--text-primary); }
.dar-girdi { width: calc(var(--p-space-16) + var(--p-space-4)); }
.yukleniyor { display: inline-flex; gap: var(--p-space-1); }
.yukleniyor i { width: var(--p-space-2); height: var(--p-space-2); border-radius: var(--p-radius-pill); background: var(--accent); animation: nabiz var(--p-sure-yavas) var(--ease-cikis) infinite alternate; }
.yukleniyor i:nth-child(2) { animation-delay: var(--p-sure-hizli); } .yukleniyor i:nth-child(3) { animation-delay: var(--p-sure-normal); }

/* ---- 32-DESIGN-REVIEW duzeltmeleri (tasarim denetimi, token-only) ---- */
.uygulama { align-content: start; }                                   /* B-2: kisa sayfada ust cubuk uzamasin */
.rozet { white-space: normal; max-width: 100%; }                       /* B-3: 360px tasma (Sistem) */
.liste-oge > .esnek { flex: 1 1 50%; overflow-wrap: anywhere; }                                 /* B-3: Hafiza satir metni 53px'e ezilmesin */
.gosterge-satir { flex-wrap: wrap; }
.gosterge-satir > div { flex: 1 1 50%; min-width: 0; }                /* W-5: gizlilik gostergesi metni ezilmesin */
.yayin-serit :focus-visible { outline-color: var(--text-on-accent); } /* W-1: beyaz halka/hata zemini 2.3-2.5:1 idi */
[data-rol="cocuk"] { --p-x-alt-menu-yuk: calc(var(--p-hedef-cocuk) + var(--p-space-4)); } /* W-2: alt menu >=76 */
[data-rol="cocuk"] .menu-oge { min-height: var(--hedef-min); }
[data-rol="cocuk"] .dugme.kucuk, [data-rol="cocuk"] .segment button, [data-rol="cocuk"] .sekmeler button { min-height: var(--hedef-min); }
[data-rol="cocuk"] .chip { min-width: var(--hedef-min); justify-content: center; }
[data-rol="cocuk"] input[type="range"].kaydirici::-moz-range-thumb { width: var(--c-kaydirici-tutac); height: var(--c-kaydirici-tutac); }

/* ---- Kabuk eklentileri (T2.4-b / 2C2 tuketir) ---- */
.baglanti-serit { display: flex; align-items: center; gap: var(--p-space-3); flex-wrap: wrap; padding: var(--p-space-2) var(--p-space-4); background: var(--bg-warn-soft); border-bottom: var(--p-cizgi-normal) solid var(--status-warn); color: var(--text-primary); font-weight: var(--p-fw-bold); }
.baglanti-serit.cevrimdisi { background: var(--bg-err-soft); border-bottom-color: var(--status-err); }
.baglanti-serit .ikon { color: var(--status-warn); }
.baglanti-serit.cevrimdisi .ikon { color: var(--status-err); }
.yakinda-kart { border-style: dashed; background: var(--bg-surface); box-shadow: none; }
.yakinda-kart .kart-baslik .ikon { color: var(--text-muted); }
.yakinda-kart .rozet { align-self: flex-start; }
.giris-sayfa { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--p-space-4); }
.giris-kart { width: min(100%, var(--p-x-modal-genis)); }
.surum-toast { cursor: pointer; }
.sayac-listesi { display: grid; gap: var(--p-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--p-x-kart-min)), 1fr)); }

/* ---- Hareket azaltma: gecis ve animasyon yok, ziplama yok ---- */
@media (prefers-reduced-motion: reduce) {
  .dugme, .cocuk-kart, .anahtar .iz, .anahtar .iz::after, .ilerleme > span, .halka .dolgu, .kafa-onizleme .kafa, .yuz-svg .goz { transition: none; }
  .dugme:active, .dugme.basili, .cocuk-kart:active { transform: none; }
  .yayin-nokta, .yukleniyor i, .tamam .yildiz { animation: none; }
}