/* Mecra SuperApp (yeni nesil): kabuğa ekler. Tasarım dili ses.css'te; burada pencereler, pano, ajan,
   komut paleti, bildirim merkezi, sergi ve giriş. */



/* ---- şeridin sağı ---- */
.serit-sag { margin-left: auto; display: flex; align-items: center; }
.ust-sag { display: flex; align-items: center; gap: 4px; padding-right: 10px; }
.ust-dugme { position: relative; }
.ust-dugme .rozet { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: var(--vurgu); color: var(--vurgu-uzeri); font: 600 10px/15px var(--yazi, inherit); font-style: normal; }
.ara-dugme { width: auto; padding: 0 8px 0 10px; gap: 8px; display: flex; color: var(--ikincil); box-shadow: inset 0 0 0 1px var(--cizgi-guclu); border-radius: 8px; margin-right: 6px; }
.ara-dugme span { font-size: 13px; }
.ara-dugme kbd { font: 11px var(--yazi, inherit); color: var(--ucuncul); }
.ajan-dugme.calisiyor { color: var(--vurgu); }
.ajan-dugme.calisiyor .mc-icon { animation: nabiz 1.4s ease-in-out infinite; }
@keyframes nabiz { 50% { opacity: .45; transform: scale(.9); } }

/* ---- simge çubuğu: çalışan uygulama göstergesi ---- */
.ray-oge { position: relative; padding: 0; }   /* tarayıcının düğme boşluğu 36 px simgeyi sağa itiyordu */
.ray-oge.calisiyor::after { content: ""; position: absolute; left: -7px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ikincil); }
.ray-oge.onde::after { height: 18px; margin-top: -9px; background: var(--murekkep); }

/* ---- pencereler: ui-kit (McWindow); katman ekranın tamamı, tıklamayı yalnız pencereler alır ---- */
.pencere-katmani { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.pencere-katmani > .mecra-window { pointer-events: auto; }
/* Telefon: ui-kit tam ekran pencereyi cam şerit ile alt sekme çubuğu arasına sığdırır; ana ekrana dönüş
   sekme çubuğundan (wm.goHome). */
/* Dar masaüstü penceresinde de telefon düzeni: şerit 52 px; gerçek telefonda 44 px + çentik. */
.pencere-katmani.cihaz-mobil { top: 52px; bottom: calc(56px + env(safe-area-inset-bottom)); }
[data-cihaz="mobil"] .pencere-katmani.cihaz-mobil { top: calc(44px + env(safe-area-inset-top)); }
.pencere-katmani.cihaz-mobil > .mecra-window { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
/* Kabuk ui-kit'in masaüstü ölçülerinde: şerit menü çubuğu yüksekliği (28 px), simge çubuğu 64 px (dock payı). */
@media (min-width: 701px) {
  .kabuk { grid-template-rows: 28px 1fr; }
  .pencere-ust { padding-left: 10px; }
  .mac .pencere-ust { padding-left: 78px; }
  .ust-dugme { height: 24px; width: 28px; }
  .ara-dugme { height: 22px; gap: 6px; padding: 0 8px; }
  .ara-dugme span { display: none; }
  .ust-dugme .rozet { top: -3px; right: -3px; min-width: 14px; height: 14px; line-height: 14px; }
  .ray { padding-top: 8px; }
  .asistan-cekmece { top: 36px; }
  .bildirim-paneli { top: 32px; }
  .yan-panel-perde { top: 28px; }
}

/* ---- widget panosu ---- */
.ses-pano { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 14px; }
.pano-parca { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; padding: 12px 14px; background: var(--kart, var(--panel));
  box-shadow: 0 0 0 .5px var(--cizgi-guclu), 0 1px 3px rgba(0, 0, 0, .04); overflow: hidden; }
:root[data-tema="koyu"] .pano-parca { background: #232325; }
.pano-parca.boyut-2x1 { grid-column: span 2; } .pano-parca.boyut-1x2 { grid-row: span 2; } .pano-parca.boyut-2x2 { grid-column: span 2; grid-row: span 2; }
.pano-parca > header { display: flex; align-items: center; gap: 6px; height: 22px; margin-bottom: 8px; color: var(--ikincil); font-size: 12px; font-weight: 600; }
.pano-parca > header > span:not(.mc-icon) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parca-govde { flex: 1; min-height: 0; overflow: auto; }
.parca-govde .ses-metrikler { gap: 8px; }
.parca-govde .ses-liste .oge { margin: 0; width: 100%; padding: 6px; }
.parca-govde .oge-simge { width: 32px; height: 32px; border-radius: 8px; }
.parca-govde .ses-afis { padding: 10px 12px; }
.parca-dugme { width: 22px; height: 22px; border: 0; border-radius: 6px; background: var(--dolgu); color: var(--murekkep); display: grid; place-items: center; padding: 0; }
.ses-pano.duzen .pano-parca { cursor: grab; animation: kipir .3s ease-in-out infinite alternate; }
.ses-pano.duzen .pano-parca:nth-child(2n) { animation-delay: .15s; }
.pano-parca.surukleniyor { opacity: .4; }
@keyframes kipir { from { transform: rotate(-.35deg); } to { transform: rotate(.35deg); } }
.pano-ekle { border: 1.5px dashed var(--cizgi-guclu); border-radius: 16px; background: transparent; color: var(--ikincil); display: grid; place-content: center; justify-items: center; gap: 6px; font-size: 13px; }
.pano-ekle:hover { color: var(--murekkep); border-color: var(--ikincil); }

/* ---- ajan: görev ve onay kartları ---- */
.gorev-karti, .onay-karti { align-self: stretch; max-width: 560px; padding: 12px 14px; border-radius: 16px; background: var(--kart, var(--panel));
  box-shadow: 0 0 0 .5px var(--cizgi-guclu), 0 2px 8px rgba(0, 0, 0, .05); }
:root[data-tema="koyu"] .gorev-karti, :root[data-tema="koyu"] .onay-karti { background: #232325; }
.gorev-karti header, .onay-karti header { display: flex; align-items: center; gap: 8px; }
.gorev-karti header strong, .onay-karti header strong { flex: 1; font-size: 14px; }
.gorev-simge { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--vurgu) 14%, transparent); color: var(--vurgu); }
.durum-calisiyor .gorev-simge .mc-icon { animation: nabiz 1.4s ease-in-out infinite; }
.durum-bitti .gorev-simge { background: color-mix(in srgb, var(--iyi, #28a745) 16%, transparent); color: var(--iyi, #28a745); }
.durum-hata .gorev-simge { background: color-mix(in srgb, var(--kotu) 16%, transparent); color: var(--kotu); }
.gorev-sayac { font-size: 12px; color: var(--ikincil); font-variant-numeric: tabular-nums; }
.gorev-karti ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.gorev-karti li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ikincil); }
.adim-simge { width: 18px; display: grid; place-items: center; color: var(--ucuncul); }
.adim-calisiyor { color: var(--murekkep); font-weight: 500; }
.adim-calisiyor .adim-simge { color: var(--vurgu); }
.adim-calisiyor .adim-simge .mc-icon { animation: don 1s linear infinite; }
.adim-bitti .adim-simge { color: var(--iyi, #28a745); }
.adim-hata .adim-simge { color: var(--kotu); }
@keyframes don { to { transform: rotate(360deg); } }
.gorev-ozet { margin: 10px 0 0; font-size: 13px; }
.onay-karti { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--vurgu) 45%, transparent), 0 4px 14px rgba(0, 0, 0, .06); }
.onay-karti.cevaplandi { box-shadow: 0 0 0 .5px var(--cizgi-guclu); }
.onay-karti > p { margin: 8px 0 0; font-size: 14px; }
.onay-dugmeler { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.onay-cevap { color: var(--ikincil); font-size: 13px; display: flex; align-items: center; gap: 4px; }

/* ---- asistan çekmecesi ---- */
.asistan-cekmece { position: fixed; z-index: 28; right: 8px; top: 56px; bottom: 8px; width: min(420px, calc(100vw - 16px)); display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; background: var(--sohbet-zemin); box-shadow: 0 0 0 .5px var(--cizgi-guclu), 0 24px 60px rgba(0, 0, 0, .22);
  animation: sagdan .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes sagdan { from { transform: translateX(24px); opacity: 0; } }
.asistan-cekmece > header { flex: none; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; border-bottom: .5px solid var(--cizgi); background: var(--cam);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.asistan-cekmece > header strong { flex: 1; font-size: 14px; }
.cekmece-govde { flex: 1; min-height: 0; position: relative; }
.cekmece-govde .ses-sohbet { height: 100%; }
.cekmece-govde .akis-ic { padding: 16px 12px var(--giris-y, 140px); }
.cekmece-govde .giris-kap { padding: 8px; }
.cekmece-govde .giris-araclar .arac-etiket { display: none; }
.cekmece-govde .giris-araclar .arac-hap { padding: 0 9px; }

/* ---- komut paleti ---- */
.palet-perde { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .18); display: grid; justify-items: center; align-items: start; padding-top: 16vh; animation: belir .1s; }
.palet { width: min(600px, calc(100vw - 24px)); border-radius: 16px; overflow: hidden; background: var(--yuzey); box-shadow: var(--golge-yuzen), 0 30px 80px rgba(0, 0, 0, .25); }
:root[data-tema="koyu"] .palet { background: #2a2a2c; }
.palet-girdi { height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 18px; color: var(--ikincil); border-bottom: .5px solid var(--cizgi); }
.palet-girdi input { flex: 1; border: 0; outline: none; background: transparent; color: var(--murekkep); font-size: 17px; }
.palet-liste { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.palet-liste li { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: 9px; font-size: 14px; color: var(--murekkep); cursor: default; }
.palet-liste li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palet-liste li small { color: var(--ucuncul); font-size: 12px; }
.palet-liste li img { width: 18px; height: 18px; border-radius: 5px; }
.palet-liste li.secili { background: var(--vurgu); color: var(--vurgu-uzeri); }
.palet-liste li.secili small { color: color-mix(in srgb, var(--vurgu-uzeri) 75%, transparent); }

/* ---- bildirim merkezi ---- */
.bildirim-paneli { position: fixed; z-index: 31; right: 8px; top: 52px; width: min(360px, calc(100vw - 16px)); max-height: 70vh; overflow: auto; border-radius: 14px;
  background: var(--yuzey); box-shadow: var(--golge-yuzen); animation: belir .12s; }
:root[data-tema="koyu"] .bildirim-paneli { background: #2c2c2e; }
.bildirim-paneli header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.bildirim-paneli ul { list-style: none; margin: 0; padding: 4px 8px 10px; display: grid; gap: 2px; }
.bildirim-paneli li { display: flex; gap: 10px; align-items: baseline; padding: 8px; border-radius: 8px; font-size: 13px; }
.bildirim-paneli li span { flex: 1; }
.bildirim-paneli li small { color: var(--ucuncul); }
.bildirim-paneli .ses-bos-durum { padding: 32px 16px; }

/* ---- açık pencerelerin sergisi ---- */
.sergi-perde { position: fixed; inset: 0; z-index: 44; background: color-mix(in srgb, var(--ray) 70%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: grid; place-items: center; padding: 24px; animation: belir .14s; }
.sergi { width: min(860px, 100%); }
.sergi header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 17px; }
.sergi ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.sergi li { position: relative; }
.sergi-kart { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 16px; background: var(--panel); box-shadow: var(--golge-yuzen);
  display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--murekkep); }
.sergi-kart img { width: 44px; height: 44px; border-radius: 11px; }
.sergi-kart small { color: var(--ikincil); }
.sergi-kapat { position: absolute; top: -6px; left: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--murekkep); color: var(--panel); display: grid; place-items: center; }

/* ---- giriş ---- */
.giris-ekrani { min-height: 100vh; display: grid; place-items: center; padding: 24px; box-sizing: border-box;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--vurgu) 14%, var(--ray)), var(--ray)); }
.giris-kart { width: min(380px, 100%); display: grid; gap: 14px; padding: 32px 28px 24px; border-radius: 20px; background: var(--yuzey); box-shadow: var(--golge-yuzen); text-align: center; }
:root[data-tema="koyu"] .giris-kart { background: #232325; }
.giris-isaret { width: 52px; height: 52px; margin: 0 auto; }
.giris-kart h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.giris-alt-baslik { margin: -6px 0 6px; color: var(--ikincil); }
.giris-kart .grup { text-align: left; }
.giris-dugme { height: 40px; border: 0; border-radius: 12px; background: var(--vurgu); color: var(--vurgu-uzeri); font-size: 15px; font-weight: 600; }
.giris-dugme:disabled { opacity: .5; }
.satir-dugme.tehlike { color: var(--kotu); }

/* ---- dar düzen ve cihazlar ---- */
@media (max-width: 700px) {
  .yuzey { grid-row: 1; grid-column: 1; border-radius: 0; margin: 52px 0 calc(56px + env(safe-area-inset-bottom)); }
  [data-cihaz="mobil"] .yuzey { margin-top: calc(44px + env(safe-area-inset-top)); }
  .ara-dugme span, .ara-dugme kbd { display: none; }
  .ara-dugme { box-shadow: none; padding: 0; width: 30px; margin: 0; }
  .ses-pano { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 10px; }
  .ses-pano .parca-govde { overflow: visible; }
  /* alt sekme çubuğunda çalışıyor göstergesi simgenin altında */
  .ray-oge.calisiyor::after { left: 50%; top: auto; bottom: 3px; width: 4px; height: 4px; margin: 0 0 0 -2px; }
  .ray-oge.onde::after { width: 14px; height: 3px; margin-left: -7px; }
  .pano-parca.boyut-2x1, .pano-parca.boyut-2x2 { grid-column: span 2; }
  .asistan-cekmece { inset: 0; width: auto; border-radius: 0; z-index: 35; }
  .sergi ul { grid-template-columns: repeat(2, 1fr); }
}
[data-cihaz="mobil"] .ust-sag { padding-right: 0; }
[data-cihaz="mobil"] .pencere-ust { justify-content: space-between; }

.tarayici.mac .pencere-ust { padding-left: 10px; }   /* tarayıcıda trafik ışığı yok */

/* ===================== arka plan videosu (superapp'in background.js + host.css) ===================== */
#uygulama { position: relative; z-index: 1; height: 100%; }
html, body { background: #0f172a; }
.kabuk { background: transparent; }
.ana-panel { background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); }
.ana-panel.sohbet-sayfasi { background: color-mix(in srgb, var(--sohbet-zemin) 90%, transparent); }
/* Ana sayfa bir masaüstü: video görünür, widget'lar cam kart. */
.ana-panel.sayfa-anasayfa { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sayfa-anasayfa .sayfa-bas h1, .sayfa-anasayfa .sayfa-bas p { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.sayfa-anasayfa .sayfa-bas .ses-dugme.tur-ikincil { background: rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); }
.sayfa-anasayfa .pano-parca { background: color-mix(in srgb, var(--kart, var(--panel)) 72%, transparent); backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .28), 0 10px 30px rgba(0, 0, 0, .18); }
:root[data-tema="koyu"] .sayfa-anasayfa .pano-parca { background: rgba(28, 28, 30, .66); }
.sayfa-anasayfa .pano-ekle { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); }

/* ===================== dock (sol menü): yüzen koyu cam ===================== */
@media (min-width: 701px) {
  .pencere-ust { background: color-mix(in srgb, var(--ray) 55%, transparent); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
  .ray { margin: 6px 0 8px 8px; width: 56px; box-sizing: border-box; padding: 8px 0 10px; border-radius: 18px; gap: 8px;
    background: rgba(22, 22, 24, .72); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 0 0 .5px rgba(255, 255, 255, .16), 0 14px 36px rgba(0, 0, 0, .35); }
  .ray-ust { gap: 6px; overflow-y: auto; scrollbar-width: none; padding: 0 6px; min-height: 0; }
  .ray-ust::-webkit-scrollbar { display: none; }
  .ray-oge { flex: none; width: 44px; height: 44px; border-radius: 11px; color: rgba(255, 255, 255, .78); transition: transform .14s cubic-bezier(.2, .8, .2, 1); }
  .ray-oge:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: scale(1.1); }
  .ray-oge.secili { background: rgba(255, 255, 255, .16); color: #fff; }
  .ray-oge.dock-karo, .ray-oge.resimli { background: transparent; }
  .ray-oge.dock-karo:hover, .ray-oge.resimli:hover { background: transparent; }
  .ray-ayrac { width: 32px; border-top-color: rgba(255, 255, 255, .2); margin: 4px auto; }
  .ray-oge.calisiyor::after { background: rgba(255, 255, 255, .7); left: -5px; }
  .ray-oge.onde::after { background: #fff; }
  .ray-avatar { flex: none; }
}
/* Sayfa öğeleri uygulama karosu gibi (gradyan, beyaz simge); katalog uygulamaları kendi logolarıyla. */
.ray-oge.dock-karo { color: #fff; }
.dock-karo-zemin { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--t) 62%, #fff), var(--t)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 2px 6px rgba(0, 0, 0, .3); }
.ray-oge.resimli .ray-resim { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }

/* ===================== başlatıcı (Uygulamalar paneli) ===================== */
.baslatici-perde { position: fixed; inset: 0; z-index: 42; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .22); animation: belir .12s; }
.baslatici { width: min(900px, calc(100vw - 32px)); height: min(660px, calc(100vh - 64px)); display: flex; flex-direction: column; box-sizing: border-box;
  padding: 16px 22px 0; border-radius: 28px; color: #fff; background: rgba(26, 26, 28, .84); backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .18), 0 40px 100px rgba(0, 0, 0, .5);
  animation: baslatici-ac .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes baslatici-ac { from { opacity: 0; transform: scale(.96); } }
.baslatici > header { display: flex; align-items: center; gap: 14px; padding: 4px 2px 14px; border-bottom: .5px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .75); }
.baslatici > header input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font-size: 30px; font-weight: 400; letter-spacing: -.01em; }
.baslatici > header input::placeholder { color: rgba(255, 255, 255, .5); }
.baslatici-daha { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .65); background: transparent; color: #fff; display: grid; place-items: center; padding: 0; }
.baslatici-gruplar { display: flex; gap: 8px; padding: 14px 0; border-bottom: .5px solid rgba(255, 255, 255, .16); overflow-x: auto; scrollbar-width: none; }
.baslatici-gruplar button { flex: 1 0 auto; height: 32px; padding: 0 16px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font-size: 15px; }
.baslatici-gruplar button:hover { background: rgba(255, 255, 255, .16); }
.baslatici-gruplar button[aria-pressed="true"] { background: rgba(255, 255, 255, .3); color: #fff; }
.baslatici-govde { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 0 22px; scrollbar-width: thin; }
.baslatici-govde hr { border: 0; border-top: .5px solid rgba(255, 255, 255, .16); margin: 6px 0 18px; }
.baslatici-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 20px 6px; }
.baslatici-oge { min-width: 0; display: grid; justify-items: center; gap: 8px; padding: 4px; border: 0; border-radius: 14px; background: transparent; color: #fff; font-size: 14px; }
.baslatici-oge img, .baslatici-harf { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transition: transform .14s; }
.baslatici-harf { display: grid; place-items: center; background: linear-gradient(160deg, #8e8e93, #48484a); font-size: 22px; font-weight: 600; }
.baslatici-oge span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baslatici-oge:hover img, .baslatici-oge:hover .baslatici-harf { transform: scale(1.06); }
.baslatici-oge:focus-visible { outline: 2px solid rgba(255, 255, 255, .6); }
.baslatici-bos { text-align: center; color: rgba(255, 255, 255, .6); padding: 48px 0; }
@media (max-width: 700px) {
  .baslatici { border-radius: 22px; padding: 12px 14px 0; }
  .baslatici > header input { font-size: 22px; }
  .baslatici-izgara { grid-template-columns: repeat(4, 1fr); gap: 16px 4px; }
  .baslatici-oge img, .baslatici-harf { width: 56px; height: 56px; border-radius: 13px; }
  .baslatici-oge { font-size: 12px; }
}

/* ===================== sohbet subapp'i (pencerede) ===================== */
.asistan-pencere { position: relative; height: 100%; }
.asistan-pencere .ses-sohbet { height: 100%; }
.asistan-pencere .akis-ic { padding: 16px 14px var(--giris-y, 140px); }
.asistan-pencere .giris-kap { padding: 8px 10px 12px; background: none; }
.asistan-pencere .bos { margin-top: 18vh; }
.asistan-pencere .satir.o.zengin, .asistan-pencere .gorev-karti, .asistan-pencere .onay-karti { background: var(--kart, #fff);
  box-shadow: 0 0 0 .5px var(--cizgi-guclu), 0 2px 6px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06); }
:root[data-tema="koyu"] .asistan-pencere .satir.o.zengin, :root[data-tema="koyu"] .asistan-pencere .gorev-karti,
:root[data-tema="koyu"] .asistan-pencere .onay-karti { background: #232325; }
.asistan-pencere .zengin .anlatim { background: color-mix(in srgb, var(--kart, #fff) 92%, var(--murekkep)); }
.asistan-pencere .oneriler { flex-wrap: wrap; }

/* ===================== sağ panel (belgenin `sagPanel` düğümü; varsayılanda Asistan) ===================== */
/* Masaüstünün parçası: ana alanın üstünde, pencerelerin altında (pencereler üstüne çıkar). */
:root { --sag-panel-en: 400px; }
.sag-panel { position: fixed; z-index: 16; top: calc(28px + 8px); right: 8px; bottom: 8px; width: var(--sag-panel-en); display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .28), 0 14px 40px rgba(0, 0, 0, .22); animation: sag-panel-ac .2s cubic-bezier(.2, .8, .2, 1); }
:root[data-tema="koyu"] .sag-panel { background: rgba(30, 30, 32, .82); }
@keyframes sag-panel-ac { from { opacity: 0; transform: translateX(16px); } }
.sag-panel > .gomulu-uygulama, .gomulu-uygulama { flex: 1; min-height: 0; height: 100%; }
.sag-panel .asistan-pencere .giris-kap { padding: 8px 10px 10px; }
/* Açıkken ana alan (widget'lar) dock ile panelin solu arasına sığar. */
@media (min-width: 701px) {
  :root.sag-panel-acik .ana-panel { margin-right: calc(var(--sag-panel-en) + 16px); }
}
@media (max-width: 1000px) and (min-width: 701px) { :root { --sag-panel-en: 340px; } }
@media (max-width: 700px) {
  .sag-panel { inset: 52px 0 calc(56px + env(safe-area-inset-bottom)) 0; width: auto; border-radius: 0; box-shadow: none; }
  [data-cihaz="mobil"] .sag-panel { top: calc(44px + env(safe-area-inset-top)); }
}

/* ---- arka plan: görsel (son kare) altta, video üstte; video yalnız oynarken görünür ---- */
#mecra-background { opacity: 0; transition: opacity .7s ease; }
#mecra-background.gorunur { opacity: 1; }

/* ---- sesle yazma (mikrofon): dinlerken kırmızı, halka sesin seviyesiyle büyür; çözerken döner ---- */
.giris .yuvarlak.mikrofon.dinliyor { background: var(--kotu, #ff3b30); color: #fff;
  box-shadow: 0 0 0 calc(2px + var(--seviye, 0) * 10px) color-mix(in srgb, var(--kotu, #ff3b30) 28%, transparent); transition: box-shadow .1s linear; }
.giris .yuvarlak.mikrofon.cozuyor .mc-icon { animation: dondur 1s linear infinite; }
@keyframes dondur { to { transform: rotate(360deg); } }

/* Pencere içi (subapp) ui-kit yazı tipiyle: kabuğun --font'u yalnız kabuğun kendi yüzeylerinde; alanlar
   (ses.css: font: inherit) pencereden miras alır. */
.mecra-window { font-family: var(--mc-font); }