/* ═══════════════════════════════════════════════════════════
   MENÜ KATMANI (v191) — "bulunabilirlik" katmanı.
   Yeni görünüm KURALI DEĞİL, gezinme yolu: telefonda "Daha"
   ekranı, hesap menüsü, sayfa başlığı + geri, ayarlar penceresi.
   Renk/yazı tipi/kart dili site değişkenlerinden geliyor
   (--panel, --line, --red, --disp); yeni renk TANIMLANMIYOR.
   Dosya EN SON yükleniyor — kaynak sırası tuzağı (bkz. CLAUDE.md)
   yüzünden eski kuralları ezmesi gereken kurallar burada.
   ═══════════════════════════════════════════════════════════ */

/* ── ÜST BAR: ARKASINDAN YAZI GEÇMESİN ──
   Ölçüldü (375px, panel kaydırılınca): zemin alfa .82 ve blur
   `hafif` kipte kapalı; logo ile altından geçen kart başlığı üst
   üste biniyordu ("M4MİZANİS"). Zemin %96 opak + blur; alt kenar
   çizgisi var, ince gölge içerik üstüne biner gibi görünmesin. */
#topnav{
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:max(10px, env(safe-area-inset-top, 0));
}
body.hafif #topnav{background:var(--panel)}

/* ── ZİYARETÇİ HAMBURGER MENÜSÜ ──
   Açılınca arkadaki sayfa yazıları menü maddelerinin arasından
   okunuyordu. Panel opak, arkada karartma, sayfa kaydırması kilitli. */
@media(max-width:860px){
  /* Gövde JS ile position:fixed kilitleniyor (menu-mobil.js); nav da
     açıkken fixed — sticky, kilitli gövdede tepeye kaçıyordu. */
  body.gk-navacik #topnav{position:fixed; top:0; left:0; right:0; z-index:50; background:var(--panel);
    max-height:100vh; max-height:100dvh; overflow-y:auto}
  body.gk-navacik #topnav .nav-links.acik{max-height:none}
  body.gk-navacik #topnav .nav-links{background:var(--panel)}
  .nav-ortu{position:fixed; inset:0; z-index:49; background:rgba(4,4,10,.66)}
  html.gk-capasiz, html.gk-capasiz body, html.gk-capasiz #view-landing{overflow-anchor:none}
  .nav-ortu[hidden]{display:none}
}

/* ── MOBİLDE YAN MENÜ YOK — yerini "Daha" ekranı aldı ──
   Yan menü dar ekranda içeriğin ÜSTÜNDE duran 68 maddelik bir
   bloktu; "Daha" düğmesi de onu aç/kapa yapıyordu. Artık telefonda
   hiç çizilmiyor; içindeki her şey (hesap kartı, durum, arama,
   bütün sekmeler) Daha ekranında ve hesap menüsünde. */
@media(max-width:820px){
  body.mdaha-var .sidebar{display:none!important}
  body.mdaha-var .mobil-menu-dugme{display:none!important}
}

/* ── "DAHA" EKRANI ── */
.mdaha{
  position:fixed; inset:0; z-index:900; display:flex; flex-direction:column;
  background:var(--bg); color:var(--txt);
  padding-bottom:calc(62px + env(safe-area-inset-bottom,0));
  transform:translateY(12px); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .22s ease;
}
.mdaha.acik{transform:none; opacity:1; pointer-events:auto}
body.mdaha-acik{overflow:hidden}
.mdaha-ust{
  display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top,0)) 14px 10px;
  border-bottom:1px solid var(--line); flex:none;
}
.mdaha-hesap{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:44px;
  background:none; border:0; color:var(--txt); font:inherit; text-align:left; cursor:pointer; padding:0;
}
.mdaha-hesap img{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line)}
.mdaha-hesap b{display:block; font-family:var(--disp); font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mdaha-hesap small{display:block; color:var(--muted); font-size:12.5px}
.mdaha-kapat{
  width:44px; height:44px; flex:none; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--txt); font-size:18px; cursor:pointer;
}
.mdaha-ara{padding:12px 14px 4px; flex:none}
.mdaha-ara input{
  width:100%; min-height:50px; font-size:16px; padding:12px 14px 12px 44px;
  border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--txt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9AB5' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:14px center; background-size:20px;
}
.mdaha-ara input:focus{outline:none; border-color:var(--red)}
.mdaha-govde{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 14px 24px}
.mdaha-bolum{margin:10px 0 4px}
.mdaha-bolum h4{
  font-family:var(--disp); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:8px 2px 8px; font-weight:700;
}
.mdaha-bolum h4 small{font-weight:500; letter-spacing:0; text-transform:none; margin-left:6px}
.mdaha-cipler{display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none}
.mdaha-cipler::-webkit-scrollbar{display:none}
.mdaha-cip{
  flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px 8px 10px;
  border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--txt);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; max-width:220px;
}
.mdaha-cip:active{border-color:var(--red)}
.mdaha-cip .mo-ik{width:24px; height:24px}
.mdaha-cip span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mdaha-bos{color:var(--muted); font-size:13.5px; padding:4px 2px 8px}

/* Kategoriler: KAPALI akordeon, açılınca iki sütun. */
.mdaha-kat{border:1px solid var(--line); border-radius:14px; background:var(--panel); margin:8px 0; overflow:hidden}
.mdaha-kat summary{
  list-style:none; display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 14px;
  font-family:var(--disp); font-weight:700; font-size:15px; cursor:pointer; user-select:none;
}
.mdaha-kat summary::-webkit-details-marker{display:none}
.mdaha-kat summary .mk-ik{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--red)}
.mdaha-kat summary .mk-ik svg{width:19px; height:19px}
.mdaha-kat summary small{color:var(--muted); font-weight:500; font-size:12.5px; margin-left:auto}
.mdaha-kat summary::after{content:"▾"; color:var(--muted); font-size:13px; transition:transform .18s; margin-left:6px}
.mdaha-kat[open] summary::after{transform:rotate(180deg)}
.mdaha-izgara{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 10px 10px}
.mdaha-oge{
  position:relative; display:flex; flex-direction:column; gap:4px; min-height:84px; padding:10px 34px 10px 10px;
  border-radius:12px; border:1px solid var(--line); background:var(--panel2); color:var(--txt);
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mdaha-oge:active{border-color:var(--red)}
.mdaha-oge .mo-ik{width:26px; height:26px; color:var(--red)}
.mo-ik svg{width:100%; height:100%; display:block}
.mo-ik img{width:100%; height:100%; border-radius:7px; object-fit:cover; display:block}
.mo-ik .mo-harf{display:grid; place-items:center; width:100%; height:100%; border-radius:7px;
  background:color-mix(in srgb, var(--red) 16%, transparent); color:var(--red); font-family:var(--disp); font-weight:800; font-size:13px}
.mdaha-oge .mo-ad{font-family:var(--disp); font-weight:700; font-size:14.5px; line-height:1.25}
.mdaha-oge small{color:var(--muted); font-size:12.5px; line-height:1.3}
.mdaha-oge .mo-yeni{position:absolute; left:10px; top:8px; transform:translateY(-50%); display:none}
.mo-yildiz{
  position:absolute; right:2px; top:2px; width:34px; height:34px; border:0; background:none;
  color:var(--muted); font-size:18px; cursor:pointer; opacity:.55; border-radius:10px;
}
.mo-yildiz.aktif{color:var(--gold); opacity:1}
/* Arama sonuçları tek sütun liste: açıklama satırı okunur kalsın. */
.mdaha-sonuc .mdaha-izgara{grid-template-columns:1fr; padding:0}
.mdaha-sonuc .mdaha-oge{flex-direction:row; align-items:center; gap:12px; min-height:60px}
.mdaha-sonuc .mdaha-oge .mo-ik{width:30px; height:30px; flex:none}
.mdaha-sonuc .mdaha-oge .mo-metin{display:flex; flex-direction:column; gap:2px; min-width:0}
.mdaha-alt{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 4px}
.mdaha-alt button{
  flex:1; min-height:46px; border-radius:12px; border:1px solid var(--line); background:var(--panel);
  color:var(--txt); font:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.mdaha-alt button.cikis{color:var(--red)}
.mdaha-oge.vurgulu{border-color:color-mix(in srgb, var(--red) 55%, var(--line))}
.mdaha-arama-bos{color:var(--muted); padding:14px 4px; font-size:14px}

/* ── MOBİL SAYFA BAŞLIĞI + GERİ ── */
.mobil-baslik{display:none}
@media(max-width:820px){
  .mobil-baslik{
    display:flex; align-items:center; gap:6px; min-height:44px; margin:0 0 6px;
    font-size:14px; color:var(--muted);
  }
  .mobil-baslik button{
    display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 12px 0 6px;
    border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--txt);
    font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  }
  .mobil-baslik button svg{width:18px; height:18px}
  .mobil-baslik .mb-yol{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
  .mobil-baslik .mb-yol b{color:var(--txt); font-weight:600}
}

/* ── HESAP MENÜSÜ (avatar) ── */
.nav-avatar{
  display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); padding:0;
  background:var(--panel); cursor:pointer; overflow:hidden; flex:none; margin-left:6px;
}
.nav-avatar img{width:100%; height:100%; object-fit:cover; display:block}
body.gk-giris .nav-avatar{display:block}
.me-card{cursor:pointer}
.hesap-menu{
  position:fixed; z-index:950; min-width:230px; max-width:calc(100vw - 24px);
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); padding:8px; display:none;
}
.hesap-menu.acik{display:block}
.hesap-menu .hm-bas{display:flex; align-items:center; gap:10px; padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px}
.hesap-menu .hm-bas img{width:40px; height:40px; border-radius:50%; object-fit:cover}
.hesap-menu .hm-bas b{display:block; font-family:var(--disp); font-size:14.5px; line-height:1.2}
.hesap-menu .hm-bas small{color:var(--muted); font-size:12.5px}
.hesap-menu button, .hesap-menu label{
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 10px;
  border:0; background:none; color:var(--txt); font:inherit; font-size:14.5px; text-align:left;
  border-radius:10px; cursor:pointer;
}
.hesap-menu button:hover, .hesap-menu button:focus-visible{background:var(--panel2); outline:none}
.hesap-menu button svg{width:18px; height:18px; color:var(--muted); flex:none}
.hesap-menu button.cikis{color:var(--red)}
.hesap-menu label{cursor:default}
.hesap-menu label select{flex:1; width:auto; min-height:38px; font-size:14px; padding:6px 10px;
  border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--txt)}
.hesap-ortu{position:fixed; inset:0; z-index:949; display:none}
.hesap-ortu.acik{display:block}

/* ── PROFİLİNİ TAMAMLA KARTI (Ana Panel) ── */
.pf-tamamla{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px; padding:14px 16px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
}
.pf-tamamla .pt-metin{flex:1; min-width:180px}
.pf-tamamla b{font-family:var(--disp); font-size:15px; display:block; margin-bottom:4px}
.pf-tamamla small{color:var(--muted); font-size:13px; display:block}
.pf-tamamla .pt-cubuk{height:6px; border-radius:999px; background:var(--panel2); margin-top:8px; overflow:hidden}
.pf-tamamla .pt-cubuk i{display:block; height:100%; background:var(--red); border-radius:999px}
.pf-tamamla .pt-eksik{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.pf-tamamla .pt-eksik span{font-size:12.5px; color:var(--muted); border:1px dashed var(--line); border-radius:999px; padding:3px 10px}
.pf-tamamla .pt-dugmeler{display:flex; gap:8px}
.pf-tamamla button{min-height:44px; padding:0 14px; border-radius:11px; font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.pf-tamamla .pt-git{background:var(--red); color:#fff; border:0}
.pf-tamamla .pt-kapat{background:none; color:var(--muted); border:1px solid var(--line)}

/* ── AYARLAR PENCERESİ ── */
.mz-modal{position:fixed; inset:0; z-index:960; display:none; align-items:center; justify-content:center;
  background:rgba(4,4,10,.7); padding:16px}
.mz-modal.acik{display:flex}
.mz-modal .mzm-kutu{width:100%; max-width:460px; max-height:min(86vh, 720px); overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px}
.mz-modal h3{font-family:var(--disp); font-size:18px; margin:0 0 4px}
.mz-modal .mzm-alt{color:var(--muted); font-size:13.5px; margin-bottom:12px}
.mz-modal .mzm-satir{display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 0; border-top:1px solid var(--line)}
.mz-modal .mzm-satir:first-of-type{border-top:0}
.mz-modal .mzm-satir .ms-metin{flex:1; min-width:0}
.mz-modal .mzm-satir b{display:block; font-size:14.5px}
.mz-modal .mzm-satir small{display:block; color:var(--muted); font-size:12.5px; line-height:1.3}
.mz-modal .mzm-satir input[type=checkbox]{flex:none; width:22px; height:22px; accent-color:var(--red)}
.mz-modal .mzm-satir select{flex:none; width:auto; max-width:46%; min-height:40px; font-size:14px; padding:6px 10px;
  border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--txt)}
.mz-modal .mzm-dugmeler{display:flex; gap:8px; justify-content:flex-end; margin-top:14px}
.mz-modal .mzm-dugmeler button{min-height:44px; padding:0 16px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel2); color:var(--txt); font:inherit; font-size:14px; font-weight:600; cursor:pointer}
.mz-modal .mzm-dugmeler button.birincil{background:var(--red); border-color:var(--red); color:#fff}
.mz-modal h4{font-family:var(--disp); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:16px 0 4px}

/* ── MÜZİK ÇALAR MOBİLDE İÇERİĞİ KAPATMASIN ──
   Açıkken içerik alt boşluğu çalar yüksekliği kadar artıyor. */
@media(max-width:820px){
  body.mini-acik .content, body.mini-acik .app-shell{padding-bottom:calc(62px + 74px + env(safe-area-inset-bottom,0))}
  html.gk-kure-gizli .jarvis-kure, html.gk-kure-gizli #jarvisKure{display:none!important}
  html.gk-kure-gizli .mini-oynatici{right:12px}
}

/* ── MOBİLDE KLAVYE KISAYOLU İPUÇLARI GİZLİ ── */
@media(pointer:coarse){
  .klavye-ipucu{display:none!important}
}

/* Alt çubuk ikon kabı ve etiket boyu (fable.css 10px veriyordu). */
.mobil-alt .mo-ik{width:22px;height:22px;display:block}
.mobil-alt .mo-ik svg{width:100%;height:100%}
.mobil-alt button>span:last-child{font-size:11px}

/* "Daha" ekranı alt çubuğun ALTINDA kalsın (çubuk z-850), çubuk
   görünür ve "Daha"ya yeniden basınca kapanır. Açıkken Jarvis
   küresi ve mini çalar görünmez — ekranı kaplıyorlardı. */
.mdaha{z-index:845}
body.mdaha-acik .jarvis-kure, body.mdaha-acik #jarvisKure, body.mdaha-acik .mini-oynatici,
body.mzm-acik .jarvis-kure, body.mzm-acik #jarvisKure{display:none!important}

/* ── KÜÇÜK YAZILAR (ölçüldü: profil 134, ses bankası 75, müsaitlik 49
   öğe 12px altında). Telefonda etiket en az 12px, gövde 14px. ── */
@media(max-width:820px){
  .fnote-mini, small.fnote-mini, p.fnote-mini{font-size:12.5px!important}
  .cerceve-onizle > span, .ap-ad, .sb-kaynak, .sb-rozet, .sb-tip, .rozet-admin, .yeni-rozet, .upk-rozet,
  .manga-tur-rozet, .manga-bolum-rozet, .pk-durum, .zaman, .msg-saat, .badge, .gy-ust, .duzenlendi,
  .d0-durum, .not-balon{font-size:12px!important}
  #tab-musaitlik .ms-hucre{font-size:12.5px!important}
  #tab-musaitlik small, #tab-sesbanka small, #tab-tekerleme small, #tab-manga small, #tab-dm small{font-size:12.5px!important}
  h3.fsec{font-size:12.5px!important}
  .content .empty-note, .content .fnote{font-size:14px}
}

/* ── SON DUYURU: "Devamını oku" ── */
.pd-kutu .pd-devam{display:block; margin-top:6px; color:var(--red); font-style:normal; font-size:13px; font-weight:600}

/* ── STÜDYO TELEFONDA ── */
.st-mobil{display:none}
@media(max-width:820px){
  .st-mobil{display:block; margin:0 0 14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
  .st-mobil h3{font-family:var(--disp); font-size:17px; margin:0 0 6px}
  .st-mobil p{color:var(--muted); font-size:14px; margin:0 0 12px}
  .st-mobil .stm-yollar{display:grid; gap:10px}
  .st-mobil .stm-yol{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 12px; border-radius:12px;
    border:1px solid var(--line); background:var(--panel2); color:var(--txt); text-decoration:none; font:inherit; text-align:left; cursor:pointer}
  .st-mobil .stm-yol.birincil{border-color:var(--red); background:color-mix(in srgb, var(--red) 12%, var(--panel2))}
  .st-mobil .stm-yol .mo-ik{width:26px; height:26px; color:var(--red); flex:none}
  .st-mobil .stm-yol b{display:block; font-family:var(--disp); font-size:14.5px}
  .st-mobil .stm-yol small{display:block; color:var(--muted); font-size:12.5px}
  details.str-masa{margin-top:8px}
  details.str-masa > summary{list-style:none; display:flex; align-items:center; gap:10px; min-height:52px; padding:12px 14px;
    border:1px solid var(--line); border-radius:12px; background:var(--panel); font-family:var(--disp); font-weight:700; font-size:15px; cursor:pointer}
  details.str-masa > summary::-webkit-details-marker{display:none}
  details.str-masa > summary::after{content:"▾"; margin-left:auto; color:var(--muted)}
  details.str-masa[open] > summary::after{transform:rotate(180deg)}
  details.str-masa > summary small{display:block; font-weight:500; color:var(--muted); font-size:12.5px}
}
@media(pointer:coarse){ #stRehber kbd{display:none} }
/* Hızlı kayıt penceresi */
.hk-kayit{display:flex; align-items:center; gap:12px; margin:10px 0}
.hk-kayit button{min-height:52px; flex:1; border-radius:12px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); font:inherit; font-size:15px; font-weight:700; cursor:pointer}
.hk-kayit button.kaydediyor{background:var(--red); border-color:var(--red); color:#fff}
.hk-sure{font-variant-numeric:tabular-nums; color:var(--muted); min-width:48px; text-align:right}
.hk-dinle{width:100%; margin:8px 0}
.hk-secim{width:100%; min-height:44px; font-size:15px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); margin:6px 0 10px}
.hk-not{color:var(--muted); font-size:13px}

/* ── YENİ MESAJ: DM açmak yukarıdan aramaya bağlıydı ── */
.dm-yeni-tus{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; margin:0 0 10px;
  border-radius:12px; border:0; background:var(--red); color:#fff; font:inherit; font-family:var(--disp); font-size:15px; font-weight:700; cursor:pointer}
.dm-yeni-tus svg{width:18px; height:18px}
.ym-liste{display:flex; flex-direction:column; gap:4px; max-height:52vh; overflow-y:auto; margin-top:8px}
.ym-kisi{display:flex; align-items:center; gap:10px; min-height:52px; padding:6px 8px; border-radius:10px; border:0; background:none; color:var(--txt);
  font:inherit; text-align:left; cursor:pointer}
.ym-kisi:hover, .ym-kisi:focus-visible{background:var(--panel2); outline:none}
.ym-kisi img, .ym-kisi .ym-harf{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--red) 18%, transparent); color:var(--red); font-family:var(--disp); font-weight:800}
.ym-kisi b{display:block; font-size:14.5px}
.ym-kisi small{display:block; color:var(--muted); font-size:12.5px}
.ym-ara{width:100%; min-height:46px; font-size:16px; padding:10px 12px; border-radius:11px; border:1px solid var(--line); background:var(--panel2); color:var(--txt)}
.uye-mesaj-tus{display:inline-flex; align-items:center; gap:6px; min-height:40px; margin-top:10px; padding:0 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); color:var(--txt); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer}
.uye-mesaj-tus svg{width:16px; height:16px; color:var(--red)}
.pm-mesaj-tus{display:inline-flex; align-items:center; gap:8px; min-height:42px; margin-top:8px; padding:0 16px; border-radius:11px;
  border:0; background:var(--red); color:#fff; font:inherit; font-family:var(--disp); font-size:14px; font-weight:700; cursor:pointer}
.pm-mesaj-tus svg{width:17px; height:17px}

/* Kalan küçük yazılar (ölçüldü: öneriler, üyeler, anime, yayın). */
@media(max-width:820px){
  .content small{font-size:12.5px}
  .or-hece, .or-zaman, .ok-rozet, .ok-meta, .or-orijinal, .ok-klip-not, .om-ipucu, .om-rozet, .ok-durum,
  .rol-rozet, .ud-ad, .anime-tur, .anime-puan, .yy-rozet, .piyano-nota, .piyano-midi-durum{font-size:12px!important}
  .piyano-tus-harf{font-size:11px!important}
}

/* ═══ v191 SADELEŞTİRME (masaüstü yan menü, Araçlar, kadro, dekor) ═══ */

/* ── MASAÜSTÜ YAN MENÜ: 68 madde yerine 7 + Araçlar ──
   Eski gruplar DOM'da duruyor (katalog oradan okunuyor, openTab
   çalışıyor) ama çizilmiyor. Geri almak: bu bloğu sil. */
@media(min-width:821px){
  body.sade-menu #sideNav > .nav-grup{display:none!important}
  body.sade-menu .sira-toggle{display:none}
}
.nav-ana{display:flex; flex-direction:column; gap:2px; margin:4px 0 10px}
.nav-ana .snav{position:relative}
.nav-ana .snav .fsec-ik{width:18px; height:18px; vertical-align:-4px; margin-right:6px; color:var(--red)}
.nav-ana .snav.nav-araclar{margin-top:8px; border:1px dashed var(--line); border-radius:10px}
.nav-ana .snav.nav-araclar .fsec-ik{color:var(--muted)}
/* Yan menü Japonca etiketleri (data-kana) ve bölüm mühürleri:
   dekor olarak her satırda tekrar ediyor, "şablon" hissi veriyordu. */
#sideNav .snav[data-kana]::after{content:none!important}
.pane-title .hanko, #view-landing .sec-title .hanko{display:none!important}
/* "YENİ" rozeti tarihe bağlı (menu-mobil.js YENI_TARIH); statik olanlar kapalı. */
#sideNav .upk-rozet, #sideNav .yeni-rozet{display:none!important}
.mdaha-oge .mo-yeni, .ta-oge .mo-yeni{display:inline-block; position:static; transform:none; margin-left:6px; font-size:10px; font-weight:800;
  letter-spacing:.06em; color:#fff; background:var(--red); border-radius:999px; padding:2px 7px; vertical-align:middle}

/* ── ARAÇLAR SAYFASI ── */
.tum-araclar .ta-ara{width:100%; min-height:50px; font-size:16px; padding:12px 14px 12px 44px; margin:0 0 14px;
  border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--txt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9AB5' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:14px center; background-size:20px}
.tum-araclar .ta-ara:focus{outline:none; border-color:var(--red)}
.tum-araclar .ta-kat{margin:0 0 18px}
.tum-araclar .ta-kat h3{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-size:15px; margin:0 0 10px}
.tum-araclar .ta-kat h3 .mk-ik{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--red)}
.tum-araclar .ta-kat h3 .mk-ik svg{width:17px; height:17px}
.tum-araclar .ta-kat h3 small{color:var(--muted); font-weight:500; font-size:12.5px}
.tum-araclar .ta-izgara{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.ta-oge{position:relative; display:flex; align-items:flex-start; gap:12px; min-height:72px; padding:12px 36px 12px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel); color:var(--txt); text-align:left; cursor:pointer; transition:border-color .15s, transform .15s}
.ta-oge:hover{border-color:var(--red); transform:translateY(-1px)}
.ta-oge .mo-ik{width:30px; height:30px; flex:none; color:var(--red)}
.ta-oge .mo-ad{display:block; font-family:var(--disp); font-weight:700; font-size:14.5px; line-height:1.25}
.ta-oge small{display:block; color:var(--muted); font-size:12.5px; line-height:1.3; margin-top:2px}
.ta-oge .mo-yildiz{top:4px; right:4px}
.tum-araclar .ta-bos{color:var(--muted); padding:16px 4px}
.tum-araclar .ta-sabit{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
@media(max-width:820px){ .tum-araclar .ta-izgara{grid-template-columns:repeat(2,minmax(0,1fr))} .ta-oge{flex-direction:column; gap:6px; padding-right:34px} }

/* ── ALT SEKME ŞERİDİ (Çeviri / Stüdyo / Jarvis aileleri) ── */
.alt-sekmeler{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.alt-sekmeler button{display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-height:44px; padding:7px 12px; border-radius:10px; border:1px solid transparent;
  background:none; color:var(--muted); font:inherit; cursor:pointer; text-align:left}
.alt-sekmeler button b{font-family:var(--disp); font-size:13.5px; color:var(--txt)}
.alt-sekmeler button small{font-size:11.5px; line-height:1.2}
.alt-sekmeler button.aktif{background:var(--panel2); border-color:var(--line)}
.alt-sekmeler button.aktif b{color:var(--red)}
/* Telefonda yatay kaydırma değil iki sütun: kaydırmalı şeritte ilk
   (etkin) madde ekran dışında kalıyordu ve hiçbir şey onu geri
   getirmiyordu. */
@media(max-width:820px){ .alt-sekmeler{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px} .alt-sekmeler button{min-width:0} .alt-sekmeler button b, .alt-sekmeler button small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%} }

/* ── KADRO: daha küçük kartlar ("profiller çok büyük") ── */
#view-landing .kadro-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px}
#view-landing .kadro-card{padding:14px 10px 12px}
#view-landing .kadro-card img, #view-landing .kadro-card .kadro-ph, #view-landing .kadro-card .avatar{width:60px; height:60px; margin-bottom:8px}
#view-landing .kadro-ph{font-size:20px}
#view-landing .kadro-card h3{font-size:13.5px}
#view-landing .kadro-rol{font-size:11.5px; padding:3px 9px}
#view-landing .kadro-card.kadro-ozet{border-style:dashed}
#view-landing .kadro-card.kadro-ozet .kadro-ph{font-size:17px}
@media(max-width:820px){
  #view-landing .kadro-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  #view-landing .kadro-card{padding:12px 6px 10px}
  #view-landing .kadro-card img, #view-landing .kadro-card .kadro-ph{width:52px; height:52px}
  #view-landing .kadro-card h3{font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #view-landing .kadro-rol{font-size:11px; padding:2px 7px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
.fragman-vitrin{grid-column:1 / -1; max-width:860px; margin:0 auto}

/* ── ÜST MENÜ ORTA GENİŞLİK: 861–1180px'te "Ekibe Başvur" alta
   düşüp MARK plakasının üstüne biniyordu. ── */
.ataturk-link .al-ad{font-size:12.5px; letter-spacing:.02em; margin-right:6px}
@media(min-width:861px) and (max-width:1180px){
  body:is(.gk-landing,#gk_).gk-landing #topnav .nav-btn{padding:8px 9px; font-size:13px}
  body:is(.gk-landing,#gk_).gk-landing #topnav .nav-btn-panel{display:none}
  body:is(.gk-landing,#gk_).gk-landing #topnav .ataturk-link .al-yil{display:none}
}
@media(max-width:860px){ .ataturk-link .al-ad{margin-right:8px} }

/* ── ALTBİLGİ: gelişim bağlantıları yalnız giriş yapana ── */
body:not(.gk-giris) footer a[href="/takinti"], body:not(.gk-giris) footer a[href="/dort-ocak"], body:not(.gk-giris) footer a[href="/kotodama"],
body:not(.gk-giris) footer a[href="/kisilik-testi"], body:not(.gk-giris) footer a[href="/3d-atolye"], body:not(.gk-giris) footer a[href="/palet"]{display:none}

/* ═══ v191-b: TELEFON İNCELEMESİ (14 ekran görüntüsü) ═══ */

/* Emniyet: yatay taşma sayfayı kaydırmasın. overflow-x:hidden DEĞİL —
   sticky üst barı bozuyor; clip bozmuyor. */
html, body{overflow-x:clip}

/* 1) SON DUYURU KARTI — fable'ın genel button kuralı (.pd-kutu'dan
   özgül) kartı inline-flex SATIR yapıyordu: başlık sütunu 23px'e
   sıkışıp harf harf kırılıyordu ("He/pin/iz…"). Ölçüldü: çocuklar
   B:23 SPAN:207 SMALL:24 EM:15. Tek sütun ızgara, altta tarih + oku. */
#tab-panel .pd-kutu{display:grid!important; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"b b" "s s" "k d";
  gap:6px 10px; width:100%; min-width:0; text-align:left; align-items:center}
#tab-panel .pd-kutu > b{grid-area:b; min-width:0; overflow-wrap:break-word; word-break:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3}
#tab-panel .pd-kutu > span{grid-area:s; min-width:0; overflow-wrap:break-word; word-break:normal; white-space:normal}
#tab-panel .pd-kutu > small{grid-area:k; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#tab-panel .pd-kutu > .pd-devam{grid-area:d; margin:0; white-space:nowrap; justify-self:end}

/* 2) Süren Projeler: isim solda, durum etiket, yüzde sağda. */
.pp-satir{text-align:left}
.pp-satir .pp-ust{display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; grid-area:ust}
.pp-satir .pp-ust b{flex:1; min-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pp-satir .pp-durum{font-size:11.5px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); background:var(--panel)}

@media(max-width:820px){
  /* iPhone: 16px altı girdi odaklanınca yakınlaştırıyor. */
  .content input:not([type=checkbox]):not([type=radio]):not([type=range]), .content select, .content textarea,
  .mz-modal input:not([type=checkbox]), .mz-modal select, .mdaha-ara input{font-size:16px!important}

  /* 3) Jarvis küresi: küçük, alt çubuğun hemen üstünde, aşağı
     kaydırırken gizli. İçerik alt boşluğu çubuk + küre + 16px. */
  #jarvisKure, .jarvis-kure{width:44px!important; height:44px!important; right:12px!important;
    bottom:calc(62px + 10px + env(safe-area-inset-bottom,0))!important; transition:transform .25s, opacity .25s}
  body.kaydiriyor-asagi #jarvisKure, body.kaydiriyor-asagi .jarvis-kure{transform:translateY(90px); opacity:0; pointer-events:none}
  .content, .app-shell{padding-bottom:calc(62px + 44px + 16px + env(safe-area-inset-bottom,0))!important}
  body.mini-acik .content, body.mini-acik .app-shell{padding-bottom:calc(62px + 44px + 74px + 16px + env(safe-area-inset-bottom,0))!important}

  /* 4) Üst bar, giriş yapmış: logo · boşluk · Discord · avatar.
     "Atatürk ∞" parçası ve ziyaretçi hamburgeri yok. */
  body.gk-giris #topnav .ataturk-link, body.gk-giris #topnav .nav-ayrac, body.gk-giris #navHamburger{display:none!important}
  body.gk-giris #topnav .nav-links{display:flex!important; max-height:none!important; visibility:visible!important; opacity:1!important;
    flex-direction:row!important; align-items:center; flex-basis:auto!important; width:auto!important; margin:0!important; gap:8px}
  body.gk-giris:is(.gk-landing,#gk_).gk-landing #topnav .nav-links > :not(.nav-btn-panel){display:none!important}
  body.gk-giris #topnav{justify-content:space-between}
  body.gk-giris #topnav .nav-btn-panel{min-height:40px}

  /* 5) MESAJLAR: liste ve konuşma ayrı iki ekran. */
  #tab-dm .dm-duzen{display:block}
  body:not(.dm-konusma) #tab-dm .dm-sag{display:none}
  body.dm-konusma #tab-dm .dm-sol, body.dm-konusma #tab-dm .notlar-serit, body.dm-konusma #tab-dm > .fnote,
  body.dm-konusma #tab-dm .dm-baslik-satir, body.dm-konusma #tab-dm #dmYeniTus, body.dm-konusma #mobilBaslik{display:none!important}
  body.dm-konusma #tab-dm .dm-sag{display:flex; flex-direction:column; min-height:calc(100dvh - var(--ust-yuk,76px) - 62px - 110px - env(safe-area-inset-bottom,0))}
  .dm-geri{display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 10px 0 4px; margin-right:8px; border-radius:10px;
    border:1px solid var(--line); background:var(--panel2); color:var(--txt); font:inherit; font-size:14px; font-weight:600; cursor:pointer; flex:none}
  .dm-geri svg{width:18px; height:18px}
  #dmUst{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  /* Sohbet satırındaki × tarihin üstüne biniyordu: kendi sütununda. */
  #tab-dm .dm-sohbet{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding-right:8px}
  #tab-dm .dm-sohbet .dm-s-kapat{position:static!important; opacity:1; width:36px; height:36px; display:grid; place-items:center; flex:none; grid-column:3}
  #tab-dm .dm-sohbet > *:not(.dm-s-kapat){min-width:0}
  /* "Notun" balonu: kesilmesin, iki satıra kadar. */
  .not-balon{width:max-content; max-width:150px; white-space:normal; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}

  /* 6) SOHBET: eylem ikonları dokununca; tam yükseklik; yazma kutusu altta sabit. */
  #chatBox .chat-msg .msg-aksiyon{display:none}
  #chatBox .chat-msg.secili .msg-aksiyon{display:inline-flex; opacity:1}
  #chatBox .chat-msg.secili{background:color-mix(in srgb, var(--red) 7%, transparent); border-radius:10px}
  #tab-sohbet .chat-box{height:calc(100dvh - var(--ust-yuk,76px) - 62px - 230px - env(safe-area-inset-bottom,0)); min-height:280px}
  #tab-sohbet .chat-alt{position:sticky; bottom:calc(62px + env(safe-area-inset-bottom,0)); z-index:5; background:var(--bg); padding-top:6px}
  .drama0-btn .d0-yazi{display:inline!important}

  /* 7) PROJELER */
  #projeSirala{padding-right:38px!important}
  .pk-ilerleme + .pk-kaydirici{height:14px; margin-top:-14px}
  .pk-yonet .btn-mini.danger{display:none}
  .pk-yonet.acik .btn-mini.danger{display:inline-flex}
  .pk-yonet .pk-dahafazla{margin-left:auto; min-width:44px; min-height:40px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); font:inherit; font-size:18px; cursor:pointer}

  /* 8) DAHA: çipler iki satıra sığsın. */
  .mdaha-cip span{white-space:normal; line-height:1.2; max-width:160px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .mdaha-cipler{padding-bottom:4px; border:0}

  /* 9) AYARLAR / pencereler: alttan açılan panel, Kapat hep görünür. */
  .mz-modal{align-items:flex-end; padding:0}
  .mz-modal .mzm-kutu{max-width:none; border-radius:18px 18px 0 0; max-height:calc(100dvh - var(--ust-yuk,76px) - 62px - env(safe-area-inset-bottom,0));
    margin-bottom:calc(62px + env(safe-area-inset-bottom,0)); display:flex; flex-direction:column; padding-bottom:0}
  .mz-modal .mzm-kutu > :not(.mzm-dugmeler){flex:none}
  .mz-modal .mzm-dugmeler{position:sticky; bottom:0; background:var(--panel); padding:12px 0 14px; margin-top:auto; border-top:1px solid var(--line)}
  .mz-modal .ym-liste{max-height:none}

  /* 12) Ana sayfa (giriş yapmış telefonda) */
  #view-landing .section, #view-landing section[id]{scroll-margin-top:calc(var(--ust-yuk,76px) + 16px)}
  #view-landing .mf-soz::before{display:none}
  .uyg-liste li.masaustu-ipucu{display:none}
}
@media(pointer:coarse){ .uyg-liste li.masaustu-ipucu{display:none} }
/* Japonca etiketler: altbilgi, yan menü ayracı, kahraman, logo altı. */
.ft-kana, .side-ayrac span, .hero-kana, #topnav .logo-alt{display:none!important}

/* v191-b düzeltme 2 (ölçüldü): küre kökü .jarvis-kok (fixed), #jarvisKure
   onun içinde relative — konum köke yazılmalı. Sil düğmesi tasarim.css'in
   #tab-projeler kuralına yeniliyordu. DM konuşması telefonda sayfayı
   1500px uzatıyordu; konuşma kendi kutusunda kaysın, yazma kutusu altta. */
@media(max-width:820px){
  .jarvis-kok{bottom:calc(62px + 10px + env(safe-area-inset-bottom,0))!important; right:12px!important; transition:transform .25s, opacity .25s}
  .jarvis-kok #jarvisKure, .jarvis-kok .jarvis-kure{bottom:auto!important; right:auto!important}
  body.kaydiriyor-asagi .jarvis-kok{transform:translateY(100px); opacity:0; pointer-events:none}
  #tab-projeler .pk-yonet .btn-mini.danger{display:none!important}
  #tab-projeler .pk-yonet.acik .btn-mini.danger{display:inline-flex!important}
  body.dm-konusma #tab-dm .dm-sag{height:calc(100dvh - var(--ust-yuk,61px) - 62px - 56px - env(safe-area-inset-bottom,0)); min-height:0; overflow:hidden}
  body.dm-konusma #dmPencere{display:flex; flex-direction:column; height:100%; min-height:0}
  body.dm-konusma #dmUst{flex:none}
  body.dm-konusma #dmAkis{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
  body.dm-konusma #tab-dm .dm-yaz{flex:none}
  body.dm-konusma .content{padding-bottom:calc(62px + env(safe-area-inset-bottom,0))!important}
  #tab-dm .dm-sohbet{display:flex!important; align-items:center; gap:10px}
  #tab-dm .dm-sohbet .dm-s-kapat{order:9; margin-left:auto; grid-column:auto}
  #tab-dm .dm-sohbet > :not(.dm-s-kapat){min-width:0}
}
/* Süren Projeler: yüzde her satırda aynı sağ hizada (flex düzende yüzde
   isim bitince geliyordu, satır satır kayıyordu). */
.pp-satir .pp-ust{flex:1 1 auto}
.pp-satir .pp-yuzde{margin-left:auto; min-width:48px; text-align:right; flex:none}

/* ═══ v191-c: SİMETRİ / HİZALAMA TURU (telefon, 20 ekran görüntüsü) ═══ */
@media(max-width:860px){
  /* 1) SÜS DOLABI */
  .sd-ust{flex-wrap:nowrap!important; gap:8px; padding:12px 16px}
  .sd-ust h2{flex:1; min-width:0; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sd-ust .sd-discord{font-size:12.5px; padding:8px 10px; white-space:nowrap}
  .sd-ust .modal-kapat{margin-left:0; width:40px; height:40px}
  /* Üst: önizleme kartı ortada (%70), altında tam genişlik kuşanılı satırı */
  .sd-sag{flex-direction:column!important; align-items:center!important; gap:10px; max-height:none; padding:12px 16px}
  .sd-sag .sd-kart{width:70%!important; max-width:260px}
  .sd-sag .sd-secim{width:100%; min-width:0; flex-direction:row!important; align-items:center!important; justify-content:space-between; gap:10px; flex-wrap:wrap}
  .sd-sag .sd-secim .btn-outline.small, .sd-sag .sd-secim .btn-red.small{width:auto!important; min-height:44px; padding:0 18px}
  /* efektin içinde isim okunsun */
  .sd-kart .sd-k-ad, .sd-kart .sd-k-rol, .sd-kart .sd-k-govde b{text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.85)}
  /* Izgara: 3 kare sütun, eşit boşluk, isim tek satır */
  .sd-izgara{grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; padding:4px 16px 20px!important}
  .sd-oge{aspect-ratio:1; padding:8px 6px 6px; gap:4px; justify-content:center; min-width:0}
  .sd-oge.sd-genis{grid-column:span 3; aspect-ratio:auto; min-height:64px}
  .sd-sus{width:100%; height:auto; aspect-ratio:1; max-width:84px}
  .sd-sus img, .sd-dek{object-fit:contain}
  .sd-ef, .sd-kn{width:100%; height:auto; aspect-ratio:3/4; max-width:84px}
  .sd-ef img{object-fit:cover} .sd-kn img{object-fit:contain}
  .sd-np{height:40px}
  .sd-ad{display:block!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; font-size:11.5px; width:100%}
  /* Yapışık sekme/arama/çipler opak; bölüm başlığı altına girmesin */
  .sd-sekmeler, .sd-arac, .sd-koller{position:sticky; z-index:3; background:var(--panel)}
  .sd-sekmeler{top:0} .sd-arac{top:46px} .sd-koller{top:98px; padding-bottom:6px}
  .sd-obek{scroll-margin-top:150px; padding-top:6px}
  /* Kaydırılabilir şeritlerde sağ kenarda solma */
  .sd-sekmeler, .sd-koller{overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent); mask-image:linear-gradient(90deg,#000 86%,transparent); padding-right:28px}
  /* Pencere açıkken Jarvis yok */
  body.sd-acik .jarvis-kok, body.sd-acik #navJarvis, body.mzm-acik .jarvis-kok{display:none!important}
}

@media(max-width:820px){
  /* 2) JARVIS: yüzen balon kaldırıldı, üst barda 32px ikon (avatarın solunda).
     Uygulama kipinde üst bar yok → orada balon duruyor. */
  body:not(.mobil-uygulama) .jarvis-kok{display:none!important}
  #navJarvis{display:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--panel2); padding:0; margin-left:auto; margin-right:6px; cursor:pointer; overflow:hidden; flex:none}
  #navJarvis img{width:100%; height:100%; object-fit:cover; display:block}
  #navJarvis svg{width:18px; height:18px; color:var(--red)}
  body.gk-giris:not(.mobil-uygulama) #navJarvis{display:grid; place-items:center}
  html.gk-kure-gizli #navJarvis{display:none!important}
  body.gk-giris #topnav .nav-avatar{margin-left:0}
  /* Jarvis sohbeti: alttan açılan OPAK panel */
  .jarvis-panel{position:fixed!important; left:0!important; right:0!important; bottom:0!important; top:auto!important; width:100%!important; max-width:none!important;
    max-height:min(72dvh, 560px); border-radius:18px 18px 0 0!important; background:var(--panel)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
    transform:translateY(16px)!important; transform-origin:bottom center!important}
  .jarvis-panel.acik{transform:none!important}
  .jarvis-kok{z-index:960}

  /* 3) OYUNLAR: seçici 3 sütun ızgara; tahta ekrana sığsın; kontroller sabit */
  #tab-oyunlar .tab-bar{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
  #tab-oyunlar .tab-bar .tab{width:100%; min-height:44px; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px}
  #tab-oyunlar .oyun-duzen{width:100%}
  #tab-oyunlar .oyun-sol{width:100%; max-width:none}
  #tetrisCanvas{width:auto!important; max-width:100%; height:min(60vw, calc(100dvh - var(--ust-yuk,76px) - 62px - 250px)); display:block; margin:0 auto}
  #tab-oyunlar .oyun-kontrol{position:sticky; bottom:calc(62px + 8px + env(safe-area-inset-bottom,0)); z-index:4; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px; display:flex; gap:6px; justify-content:center}
  #tab-oyunlar .oyun-kontrol .btn-mini{flex:1; min-height:44px; max-width:72px}
  #tab-oyunlar .klavye-ipucu{display:none!important}
  #tab-oyunlar canvas{max-width:100%}

  /* 4) ARAÇ AİLESİ ŞERİDİ: başlık ve açıklama 2 satır */
  .alt-sekmeler button b, .alt-sekmeler button small{white-space:normal!important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:clip}
  #tab-indirici #indCozBtn, #tab-indirici .ind-url-satir + button, #tab-indirici .ind-coz{width:100%!important}
  #tab-indirici .ind-url-satir{width:100%}

  /* 5) PROJELER: yöneticinin görünmez kaydırıcısı telefonda yer kaplamasın */
  #tab-projeler .pk-kaydirici{display:none!important}
  #tab-projeler .pk-anime:empty, #tab-projeler .pk-aciklama:empty, #tab-projeler .pk-rozetler:empty{display:none}

  /* 6) SÜREN PROJELER: 3 sabit sütun */
  .pp-satir{display:grid!important; grid-template-columns:minmax(0,1fr) 108px 48px!important; grid-template-areas:"ad durum yuzde" "cubuk cubuk cubuk"!important; gap:6px 8px!important; align-items:center}
  .pp-satir .pp-ust{display:contents!important}
  .pp-satir .pp-ust b{grid-area:ad; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left}
  .pp-satir .pp-durum{grid-area:durum; justify-self:center; max-width:108px; overflow:hidden; text-overflow:ellipsis}
  .pp-satir .pp-yuzde{grid-area:yuzde; justify-self:end; margin:0}
  .pp-satir .pp-cubuk{grid-area:cubuk}

  /* 7) AYARLAR ALT PANELİ: alt çubuk gizli, son satır tam görünür */
  body.mzm-acik #mobilAlt{display:none!important}
  .mz-modal .mzm-kutu{margin-bottom:0!important; max-height:calc(100dvh - var(--ust-yuk,76px))!important; padding-bottom:0}
  .mz-modal .mzm-dugmeler{padding-bottom:calc(14px + env(safe-area-inset-bottom,0))}
  .mz-modal .mzm-satir:last-of-type{margin-bottom:8px}

  /* 9) küçük hizalar */
  #tab-sohbet .chat-alt{padding-top:0; background:transparent}
  #tab-sohbet .chat-alt #chatForm, #tab-sohbet .chat-alt .chat-form{background:var(--panel)}
  #tab-sohbet .chat-box{border-bottom:0; border-radius:16px 16px 0 0}
  .sd-giris{align-items:center}
  .sd-giris-ok{font-size:0!important; width:20px; height:20px; flex:none; align-self:center;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9AB5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/20px no-repeat}
  .mdaha-ara input{box-shadow:none}
  .mdaha-bolum h4{display:block}

  /* GENEL: 16px kenar — içerik kabı ve tam genişlik kartlar */
  .content{padding-left:16px!important; padding-right:16px!important}
}
/* v191-c düzeltme 2 (ölçüldü): Jarvis PANELİ kökün içinde — kökü gizlemek
   paneli de öldürüyordu; yalnız küre ve figürler gizli. Süs Dolabı'nda
   izgara 151px'lik kendi kutusunda kayıyordu (ön izleme 425px yiyordu);
   artık bütün pencere tek kaydırma, çipler onun içinde yapışık. */
@media(max-width:820px){
  body:not(.mobil-uygulama) .jarvis-kok{display:block!important; pointer-events:none}
  body:not(.mobil-uygulama) .jarvis-kok > .jarvis-kure, body:not(.mobil-uygulama) .jarvis-kok > .melis-figur,
  body:not(.mobil-uygulama) .jarvis-kok > .jarvis-figur, body:not(.mobil-uygulama) .jarvis-halka{display:none!important}
  body:not(.mobil-uygulama) .jarvis-kok > .jarvis-panel{pointer-events:auto}
  body.sd-acik .jarvis-kok{display:none!important}
  #tetrisCanvas{height:min(calc(100dvh - var(--ust-yuk,76px) - 62px - 250px), calc((100vw - 64px) * 2))!important}
  #tab-oyunlar .tab-bar .tab{font-size:13px; text-overflow:ellipsis; display:flex; gap:6px}
  #tab-oyunlar .tab-bar .tab > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
@media(max-width:860px){
  .sd-govde{display:block!important; overflow-y:auto!important; height:100%; min-height:0}
  .sd-sag{max-height:none!important; overflow:visible!important; border-bottom:1px solid var(--line)}
  .sd-sol{min-height:0; overflow:visible}
  .sd-izgara{overflow:visible!important; flex:none; min-height:0}
}
@media(max-width:860px){
  /* kare kutuya görsel + tek satır ad sığsın (ölçüldü: 84 + ad > 107) */
  .sd-sus, .sd-ef, .sd-kn{max-width:64px}
  .sd-oge{padding:6px 4px 4px}
}
@media(max-width:820px){
  #oyun-tetris .oyun-sol > :has(> #tetrisCanvas){display:flex; flex-direction:column; align-items:center; position:relative; width:100%}
  #oyun-tetris .oyun-sol{display:flex; flex-direction:column; align-items:stretch}
}
/* #navJarvis masaüstünde 3px'lik stilsiz bir düğme olarak görünüyordu
   (ölçüldü 1536px: gri zemin, outset kenarlık): kurallar yalnız mobil
   medya sorgusundaydı. Varsayılan stil sıfır, masaüstünde gizli. */
#navJarvis{display:none; appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:0; outline:none}
@media(min-width:821px){ #navJarvis{display:none!important} }
@media(max-width:820px){ .mz-modal .mzm-kutu{padding-left:16px; padding-right:16px} .mdaha-cip span{white-space:normal!important} }
@media(max-width:820px){ body.gk-giris:not(.mobil-uygulama) #navJarvis{background:var(--panel2); border:1px solid var(--line)} }
/* PWA satırı: uygulama indirme listesinin başında, dolu düğme dili */
.uyg-dugme.uyg-pwa{border-color:var(--red)}

/* ═══ v191-d: PROFİLİM — 3 sekme + yapışık canlı önizleme + tek Kaydet ═══ */
.pf-sekmeler{display:flex; gap:6px; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--panel); margin:0 0 16px; position:sticky; top:calc(var(--ust-yuk,61px) + 8px); z-index:6}
.pf-sekmeler button{flex:1; min-height:44px; border-radius:10px; border:1px solid transparent; background:none; color:var(--muted); font:inherit; font-family:var(--disp); font-size:14px; font-weight:700; cursor:pointer}
.pf-sekmeler button.aktif{background:var(--panel2); border-color:var(--line); color:var(--txt)}
.pf-duzen{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
.pf-icerik{min-width:0}
.pf-bolme{display:grid; gap:14px}
.pf-yan{position:sticky; top:calc(var(--ust-yuk,61px) + 72px)}
.pf-yan .pf-onizle{position:static; max-height:none}
.pf-on-durum{display:block; font-size:12.5px; color:var(--txt); margin-top:4px}
.pf-on-durum:empty, .pf-on-hakkimda:empty, .pf-on-hesaplar:empty{display:none}
.pf-on-hakkimda{font-size:12.5px; color:var(--muted); margin:6px 0 0; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pf-on-hesaplar{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.pf-on-hesaplar span{font-size:11px; padding:2px 7px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
/* Bölüm başına "Kaydet" düğmeleri gizli — tek çubuk var. Şifre ve
   kendi düğmeli bölümler (QR, kurtarma, Discord) dokunulmadı. */
#tab-profil section.pf-kart[data-pf="görünen-adın"] button.btn-red, #tab-profil section.pf-kart[data-pf="hakkımda"] button.btn-red,
#tab-profil section.pf-kart[data-pf="ozel-durum"] button.btn-red.small:not([onclick*="Temizle"]), #tab-profil section.pf-kart[data-pf="bagli-hesaplar"] button.btn-red.small,
#tab-profil section.pf-kart[data-pf="profil-rengi"] button.btn-red.small, #tab-profil section.pf-kart[data-pf="cinsiyet"] button.btn-red,
#tab-profil section.pf-kart[data-pf="dogum-tarihi"] button.btn-red{display:none!important}
.pf-kaydet-cubuk{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:940; display:flex; align-items:center; gap:14px; padding:10px 10px 10px 16px;
  border-radius:14px; border:1px solid var(--line); background:var(--panel); box-shadow:0 14px 40px rgba(0,0,0,.5); font-size:14px; max-width:calc(100vw - 32px)}
.pf-kaydet-cubuk div{display:flex; gap:8px}
.pf-kaydet-cubuk button{min-height:42px; padding:0 16px; border-radius:10px; font:inherit; font-weight:700; cursor:pointer}
.pf-kaydet-cubuk .pk-vazgec{background:none; border:1px solid var(--line); color:var(--txt)}
.pf-kaydet-cubuk .pk-kaydet{background:var(--red); border:0; color:#fff}
.pf-diger-avatar{margin-top:10px; border:1px solid var(--line); border-radius:12px; padding:0 12px}
.pf-diger-avatar > summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--muted)}
.pf-diger-avatar[open] > summary{color:var(--txt)}
.pf-gorunum-link{margin-top:6px}
.pf-gorunum-link button{width:100%; min-height:46px; border-radius:12px; border:1px dashed var(--line); background:none; color:var(--muted); font:inherit; font-size:14px; cursor:pointer}
.pf-gorunum-link button:hover{color:var(--txt); border-color:var(--red)}
.gorunum-ayar-kap{display:grid; gap:14px}
.gorunum-modal .mzm-kutu{max-width:720px}
/* Sürüm bildirimi: sağ alt, küçük, kapanır */
.pwa-guncelle{position:fixed!important; left:auto!important; right:16px!important; bottom:calc(16px + env(safe-area-inset-bottom,0))!important; top:auto!important; transform:none!important;
  max-width:300px; padding:10px 40px 10px 14px!important; font-size:13px; z-index:935!important}
.pwa-guncelle .pg-kapat{position:absolute; right:6px; top:6px; width:28px; height:28px; border:0; background:none; color:var(--muted); font-size:18px; cursor:pointer}
.pwa-guncelle.kucuk{max-width:160px; font-size:12px; opacity:.85}
.pwa-guncelle.kucuk span{display:none}
@media(max-width:820px){
  .pwa-guncelle{bottom:calc(62px + 10px + env(safe-area-inset-bottom,0))!important}
  .pf-duzen{grid-template-columns:1fr}
  .pf-yan{order:-1; position:sticky; top:calc(var(--ust-yuk,61px) + 60px); z-index:5}
  .pf-yan .pf-onizle{max-height:120px; overflow:hidden; border-radius:14px}
  .pf-yan .pf-onizle-banner{height:40px!important}
  .pf-yan .pf-onizle-avatar{width:48px!important; height:48px!important}
  .pf-yan .pf-onizle-avatar img{width:48px!important; height:48px!important}
  .pf-on-hakkimda{display:none!important}
  .pf-sekmeler{top:calc(var(--ust-yuk,61px) + 4px)}
  .pf-kaydet-cubuk{bottom:calc(62px + 10px + env(safe-area-inset-bottom,0)); width:calc(100vw - 32px); justify-content:space-between}
}
@media(max-width:1180px) and (min-width:821px){ .pf-duzen{grid-template-columns:minmax(0,1fr) 260px} }
/* `hidden` özniteliği display:grid'e yeniliyor (CLAUDE.md tuzağı): ölçüldü,
   üç bölme de çiziliyor ve sayfa 10218px'e çıkıyordu. */
.pf-bolme[hidden], .gorunum-ayar-kap[hidden], .pf-kaydet-cubuk[hidden]{display:none!important}

/* ═══ v191-e: ONAY / SORU / UYARI KUTUSU (tarayıcı diyaloğu yok) ═══ */
.mz-onay-ortu{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(4,4,10,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .14s}
.mz-onay-ortu.acik{opacity:1} .mz-onay-ortu.kapaniyor{opacity:0}
.mz-onay{width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px 18px 16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,61,90,.08); transform:translateY(10px) scale(.98); transition:transform .16s cubic-bezier(.2,.9,.3,1.2)}
.mz-onay-ortu.acik .mz-onay{transform:none}
.mz-onay-ust{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.mz-onay-ik{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; font-family:var(--disp); font-weight:900; font-size:15px;
  background:color-mix(in srgb, var(--red) 16%, transparent); color:var(--red)}
.mz-onay-ust b{font-family:var(--disp); font-size:16px; font-weight:800}
.mz-onay-metin{margin:0; color:var(--txt); font-size:14.5px; line-height:1.5}
.mz-onay-girdi{width:100%; margin-top:12px; min-height:46px; font-size:16px; padding:10px 12px; border-radius:11px; border:1px solid var(--line); background:var(--panel2); color:var(--txt)}
.mz-onay-girdi:focus{outline:none; border-color:var(--red)}
.mz-onay-dugmeler{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}
.mz-onay-dugmeler button{min-height:44px; padding:0 18px; border-radius:11px; font:inherit; font-family:var(--disp); font-size:14px; font-weight:700; cursor:pointer}
.mz-onay-hayir{background:none; border:1px solid var(--line); color:var(--txt)}
.mz-onay-evet{background:var(--red); border:1px solid var(--red); color:#fff}
.mz-onay-evet.tehlike{background:color-mix(in srgb, var(--red) 88%, #000)}
@media(max-width:820px){ .mz-onay-ortu{align-items:flex-end; padding:0} .mz-onay{max-width:none; border-radius:18px 18px 0 0; padding-bottom:calc(16px + env(safe-area-inset-bottom,0))} .mz-onay-dugmeler button{flex:1} }
/* Profilim sekme şeridi: daha alçak, telefonda kısa etiket */
.pf-sekmeler{padding:4px; margin-bottom:12px}
.pf-sekmeler button{min-height:38px; font-size:13px}
.pf-sekmeler .kisa{display:none}
@media(max-width:820px){ .pf-sekmeler button{min-height:36px; font-size:12.5px; padding:0 6px} .pf-sekmeler .tam{display:none} .pf-sekmeler .kisa{display:inline} }
/* Kaydet çubuğu: sade, koyu, kırmızı dolgu yok (kurucu: "AI duran kırmızı çirkin") */
.pf-kaydet-cubuk{background:color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.4); font-size:13.5px; color:var(--muted); gap:12px; padding:8px 8px 8px 14px}
.pf-kaydet-cubuk button{min-height:38px; padding:0 14px; border-radius:9px; font-size:13.5px; font-weight:600}
.pf-kaydet-cubuk .pk-vazgec{background:none; border:0; color:var(--muted)}
.pf-kaydet-cubuk .pk-vazgec:hover{color:var(--txt)}
.pf-kaydet-cubuk .pk-kaydet{background:var(--panel2); border:1px solid var(--line); color:var(--txt)}
.pf-kaydet-cubuk .pk-kaydet:hover{border-color:var(--red); color:var(--red)}
.pf-cizgi-avatar[hidden]{display:none!important}

body:not(.gk-s-profil) .pf-kaydet-cubuk{display:none!important}

@media(max-width:820px){ .pf-yan .pf-onizle{max-height:156px} }

/* ═══ v191-f ═══ */
/* 1) Chrome şifre yöneticisi arama kutusunu kullanıcı adı sanıp dolduruyordu;
   doldursa bile tema bozulmasın (beyaz zemin yok). */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-internal-autofill-selected{
  -webkit-box-shadow:0 0 0 1000px var(--panel2) inset!important; box-shadow:0 0 0 1000px var(--panel2) inset!important;
  -webkit-text-fill-color:var(--txt)!important; caret-color:var(--txt); transition:background-color 9999s ease-out 0s}
/* 2) Proje Bulucu: küçük yazılar her genişlikte 12px+, "daha fazla" düğmesi */
.or-hece, .or-zaman, .ok-rozet, .ok-meta, .or-orijinal, .ok-klip-not, .om-ipucu, .om-rozet, .ok-durum{font-size:12px!important}
.oneri-daha{width:100%; min-height:46px; margin:12px 0 4px; font-weight:700}
/* 5) Sürüm bildirimi: en üst katman, küre ve çaların SOLUNDA */
.pwa-guncelle{z-index:9600!important; right:calc(16px + 62px + 16px)!important}
body.mini-acik .pwa-guncelle{right:calc(16px + 62px + 340px)!important}
@media(max-width:820px){ .pwa-guncelle{right:16px!important; left:16px!important; max-width:none} }
/* 7) Küçük yazılar her genişlikte (ses bankası, piyano, anime, müsaitlik) */
.sb-kaynak, .sb-rozet, .sb-tip, .anime-tur, .anime-puan, .piyano-nota, .piyano-midi-durum, .rol-rozet, .ud-ad{font-size:12px!important}
.piyano-tus-harf{font-size:11px!important}
#tab-musaitlik small, #tab-sesbanka small, #tab-anime small{font-size:12.5px!important}
/* 4) Uygulamalar: SHA-256 küçük kod, güven notu */
.upk-sha{display:block; margin-top:4px; font:500 11px/1.3 'JetBrains Mono', ui-monospace, monospace; color:var(--muted); letter-spacing:.02em; cursor:help}
.upk-guven{font-size:12.5px; color:var(--muted); margin:8px 0 0; line-height:1.4}

/* Stüdyo rehberi masaüstünde de katlanır; telefon kartı yalnız telefonda */
details.str-masa{margin-top:12px}
details.str-masa > summary{list-style:none; display:flex; align-items:center; gap:10px; min-height:52px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); font-family:var(--disp); font-weight:700; font-size:15px; cursor:pointer}
details.str-masa > summary::-webkit-details-marker{display:none}
details.str-masa > summary::after{content:"▾"; margin-left:auto; color:var(--muted)}
details.str-masa[open] > summary::after{transform:rotate(180deg)}
details.str-masa > summary small{display:block; font-weight:500; color:var(--muted); font-size:12.5px}

/* ═══ v191-g ═══ */

/* 1) SEKME BAŞLIK İKONU TEK BOY. Ölçüldü: aynı başlık kutusu Uygulamalar/
   Panel/Profilim'de 64px, Projeler'de 44px, Stüdyo'da 40px, görselli
   sekmelerde 24px, Piyano'da 22px — kurucu "uygulamalar sekmesindeki
   kırmızı logo ile projelerdeki bir değil". Hepsi 44 (telefonda 38). */
.pane-title > .fsec-ik, .pane-title .sekme-ik, #stRehber > .pane-title .sekme-ik{
  width:44px!important; height:44px!important; padding:10px!important; box-sizing:border-box!important; border-radius:14px!important; border:0!important; color:#fff!important; stroke-width:1.9;
  background:linear-gradient(145deg,#ff5a74,#d62848 62%,#9c1734)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -6px 12px rgba(0,0,0,.18),0 8px 24px rgba(255,61,90,.3)!important; flex:none}
.pane-title > svg.pane-ikon{width:44px!important; height:44px!important; padding:10px!important; box-sizing:border-box!important; border-radius:14px!important; color:#fff;
  background:linear-gradient(145deg,#ff5a74,#d62848 62%,#9c1734); box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 8px 24px rgba(255,61,90,.3); flex:none}
.pane-title > img.sekme-ikon{width:44px!important; height:44px!important; border-radius:14px!important; object-fit:cover; flex:none; box-shadow:0 8px 24px rgba(0,0,0,.3)}
@media(max-width:860px){
  .pane-title > .fsec-ik, .pane-title .sekme-ik, #stRehber > .pane-title .sekme-ik, .pane-title > svg.pane-ikon{width:38px!important; height:38px!important; padding:8px!important; border-radius:12px!important}
  .pane-title > img.sekme-ikon{width:38px!important; height:38px!important; border-radius:12px!important}
}

/* 2) YAN MENÜ İKONLARI: seçili olmayan yazı renginde ve soluk, yalnız seçili
   olan marka renginde. Önceden hepsi kırmızıydı ("hazır şablon gibi").
   stroke 1.75, 18px, yazıyla dikey ortalı. Aynı dil alt çubuk ve Daha. */
.snav .sekme-ik, .snav .fsec-ik, .nav-ana .snav .fsec-ik{width:18px!important; height:18px!important; color:var(--txt)!important; opacity:.55; stroke-width:1.75; vertical-align:middle; transition:opacity .15s, color .15s}
.snav:hover .sekme-ik, .snav:hover .fsec-ik{opacity:.85; color:var(--txt)!important}
.snav.active .sekme-ik, .snav.active .fsec-ik, .snav.active svg, .snav.aktif .sekme-ik, .snav.aktif .fsec-ik{color:var(--red)!important; opacity:1}
.snav.active:not(#tab-studyo *), .snav.aktif:not(#tab-studyo *){color:#fff}
.nav-ana .snav > span{display:inline-flex; align-items:center; gap:10px}
.nav-ana .snav .fsec-ik{margin-right:0; vertical-align:middle}
.nav-ana .snav.nav-araclar .fsec-ik{color:var(--txt)!important; opacity:.55}
.snav .sekme-ikon{opacity:1}
/* Alt çubuk */
.mobil-alt button .mo-ik, .mobil-alt button > svg{color:var(--txt); opacity:.55; stroke-width:1.75; transition:opacity .15s, color .15s}
.mobil-alt button .mo-ik img{opacity:1}
.mobil-alt button.aktif .mo-ik, .mobil-alt button.aktif > svg{color:var(--red); opacity:1}
/* Daha ekranı: kategori ve madde ikonları */
.mdaha-kat summary .mk-ik{background:color-mix(in srgb, var(--txt) 7%, transparent); color:var(--txt); opacity:.8}
.mdaha-kat summary .mk-ik svg{stroke-width:1.75}
.mdaha-oge .mo-ik svg, .mdaha-cip .mo-ik svg, .ta-oge .mo-ik svg, .st-mobil .stm-yol .mo-ik svg{color:var(--txt); opacity:.6; stroke-width:1.75}
.mdaha-oge:active .mo-ik svg{color:var(--red); opacity:1}
/* İsteğe bağlı: seçili maddenin sağında bölümün 20px anime görseli
   (Ayarlar → "Menüde bölüm görseli", varsayılan KAPALI). */
.snav .snav-sticker{display:none; width:20px; height:20px; border-radius:5px; object-fit:cover; margin-left:auto; flex:none}
html.gk-menu-sticker .snav.active .snav-sticker{display:block}

/* 3) PROFİL PENCERESİ "Mesaj gönder": kurucu "çok büyük, tam kırmızı
   bile olmayan kırmızı, AI kokuyor". Üye kartındaki düğmeyle aynı dil. */
.pm-mesaj-tus{min-height:36px; margin-top:6px; padding:0 14px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--txt);
  font-family:inherit; font-size:13px; font-weight:600; gap:7px}
.pm-mesaj-tus svg{width:15px; height:15px; color:var(--red)}
.pm-mesaj-tus:hover{border-color:var(--red)}

/* 4) ANA SAYFA KADROSU: herkes kartla, daha küçük ("gerekirse küçült
   yine de göster"). Fotoğrafsızlar aynı boyda harf kutusuyla. */
#view-landing .kadro-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px}
#view-landing .kadro-card{padding:12px 8px 10px}
#view-landing .kadro-card img, #view-landing .kadro-card .kadro-ph, #view-landing .kadro-card .avatar{width:52px; height:52px; margin-bottom:6px}
#view-landing .kadro-ph{font-size:18px}
#view-landing .kadro-card h3{font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
#view-landing .kadro-rol{font-size:11px; padding:2px 8px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:820px){
  #view-landing .kadro-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  #view-landing .kadro-card img, #view-landing .kadro-card .kadro-ph{width:46px; height:46px}
}

/* 5) ÜYELER IZGARASI: kart tek demo taşıyor (app.js), satırlar eşit. */
#uyeList .uye-grid{align-items:stretch}
#uyeList .uye-card{display:flex; flex-direction:column}
#uyeList .uye-card .uye-mesaj-tus{margin-top:auto; align-self:flex-start}

/* 6) JARVIS PANELİ TELEFONDA: açıkken kaydırma onu gizlemesin
   (ölçüldü: kaydırınca kök opacity 0'a düşüyor, panel 2px'e büzülüyordu),
   pencere açıkken (profil, modal) üstte kalmasın, sohbet alanı sayfa
   boyunda olsun. */
@media(max-width:820px){
  body.jarvis-panel-acik .jarvis-kok{transform:none!important; opacity:1!important}
  body.jarvis-panel-acik .jarvis-kok > .jarvis-panel{pointer-events:auto!important}
  body.gk-modal-arka .jarvis-kok, html.gk-modal-arka .jarvis-kok, body.mdaha-acik .jarvis-kok, body.pf-gorunum-acik .jarvis-kok{display:none!important}
  .jarvis-panel.acik{height:min(72dvh, 560px); display:flex!important; flex-direction:column}
  .jarvis-panel.acik .jarvis-akis{flex:1 1 auto; max-height:none; min-height:0}
  /* Sohbet: liste kendi kutusunda kayar, sayfa sabit (yükseklik JS'te ölçülüyor) */
  #tab-sohbet #chatBox{overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  body.gk-s-sohbet{overscroll-behavior-y:none}
  /* Ayarlar penceresi: iç kaydırma sayfaya taşmasın */
  .mz-modal .mzm-kutu{overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  body.mzm-acik{overflow:hidden!important}
}
/* Görselli sekme başlığı (bsl-ikon kabı): aynı 44px kutu. */
.pane-title .bsl-ikon{width:44px!important; height:44px!important; border-radius:14px!important; overflow:hidden; flex:none; display:inline-grid; place-items:center; border:0!important; background:var(--panel2)!important; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.pane-title .bsl-ikon img.sekme-ikon, .pane-title .bsl-ikon .sekme-ikon{width:100%!important; height:100%!important; border-radius:0!important; object-fit:cover}
@media(max-width:860px){ .pane-title .bsl-ikon{width:38px!important; height:38px!important; border-radius:12px!important} }
/* Sohbet telefonda: altta 122px içerik dolgusu + 48px boş yan sütun sayfayı
   kaydırıyordu; kutu sabit, sayfa kaymıyor. */
@media(max-width:820px){
  body.gk-s-sohbet .content{padding-bottom:calc(62px + env(safe-area-inset-bottom,0))!important}
  body.gk-s-sohbet #tab-sohbet{padding-bottom:0!important}
  #tab-sohbet .chat-box{min-height:200px}
  #tab-sohbet .sohbet-govde{padding-bottom:0; gap:0}
}
@media(max-width:820px){ body.gk-s-sohbet .app-shell{padding-bottom:0!important; min-height:0!important} }

/* ═══ v191-g İLK YÜKLEME KAYMASI (CLS) ═══
   Ölçüldü (375/1366, ziyaretçi/girişli): sade menü JS ile 50 ms sonra
   ekleniyordu (yan menü 488→382 px), logo yazısı yedek fontta iki satıra
   sarılıp Archivo gelince tek satıra iniyordu (58→34 px). */
html.gk-girisli #sideNav > .nav-grup, body.sade-menu #sideNav > .nav-grup{display:none!important}
html.gk-girisli .sira-toggle, body.sade-menu .sira-toggle{display:none}
#navAna{display:none}
html.gk-girisli #navAna, body.sade-menu #navAna{display:flex}
#topnav .logo-txt{white-space:nowrap}
#topnav .logo-marka{height:34px; overflow:hidden; align-items:center}

/* ═══ v191-h: İLK YÜKLEME — kapak <img> + iskeletler ═══ */
.pk-kapak{position:relative; background-size:cover; background-position:center}
.pk-kapak .pk-kapak-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:inherit}
.pk-kapak > :not(.pk-kapak-img){position:relative; z-index:1}
body.pro-kip .pk-kapak .pk-kapak-img{display:none}
/* Sonradan dolan panel kutuları: sabit en az yükseklik (ölçüldü, 3 kayma: proje kartı, çevrimiçi, duyuru) */
#tab-panel .panel-kart{min-height:120px}
#tab-panel .stats-grid > .panel-kart{min-height:150px}
#pfTamamla{min-height:132px}

/* ═══ v192-b: 1024-1279 px'te üst menü ilk boyamada TEK SATIR ═══
   Ölçüldü (1024×768, girişsiz): nav ilk anda 117 px (iki satıra sarıyor),
   JS Discord düğmesini gizleyince 65 px'e iniyor — CLS 0,66. Bu aralıkta
   sarma yok, düğmeler biraz dar, Atatürk bağlantısında yalnız ad; sığmazsa
   şerit yatay kayar (kaydırma çubuğu gizli). Yükseklik sabit. */
@media(min-width:861px) and (max-width:1279px){
  body.gk-landing #topnav{height:65px; min-height:65px; box-sizing:border-box; padding-top:0!important; padding-bottom:0!important; flex-wrap:nowrap; overflow:hidden}
  body.gk-landing #topnav .nav-links{flex:1; min-width:0; flex-wrap:nowrap!important; justify-content:flex-end!important; gap:4px!important; overflow-x:auto; overflow-y:hidden; scrollbar-width:none}
  body.gk-landing #topnav .nav-links::-webkit-scrollbar{display:none}
  body.gk-landing #topnav .nav-btn{white-space:nowrap; flex:none; padding-inline:8px!important; font-size:13px!important}
  body.gk-landing #topnav .ataturk-link .al-yil, body.gk-landing #topnav .ataturk-link .al-sonsuz{display:none}
  body.gk-landing #topnav .logo-alt{display:none}
}

/* ═══ v192-c: TELEFONDA DOKUNUNCA ÇIKAN MAVİ KARE ═══
   Kurucu: "sekmelere basarken telefonda mavi kare çıkıyor". İki kaynağı
   var: Android Chrome'un dokunma vurgusu (-webkit-tap-highlight-color,
   varsayılan yarı saydam mavi) ve dokunulan düğmede kalan tarayıcı odak
   çerçevesi. Vurgu kapalı; odak çerçevesi yalnız KLAVYEYLE gezenlere
   (:focus-visible) ve marka renginde — erişilebilirlik kaybolmuyor. */
*, *::before, *::after{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid color-mix(in srgb, var(--red) 70%, white); outline-offset:2px}
@media(pointer:coarse){
  button:focus, a:focus, [role="button"]:focus, .snav:focus, [onclick]:focus{outline:none; box-shadow:none}
  /* Jarvis kapat düğmesi 33×40 ölçüldü → 44×44 */
  #jarvisKapatTus, #jarvisSesTus{min-width:44px; min-height:44px}
}

/* ═══ v192-c: SES YÖNETİMİ ═══ */
.sy-bolum{margin-bottom:16px}
.sy-yeni{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px}
.sy-yeni select, .sy-yeni input{flex:1 1 160px; width:auto; min-height:44px}
.sy-yeni .btn-red{flex:none; min-height:44px}
.sy-oy, .sy-demo{border:1px solid var(--line); border-radius:12px; padding:12px; margin:8px 0; background:var(--panel2)}
.sy-oy-ust, .sy-demo-ust{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.sy-sayac{margin-left:auto; font-weight:700; color:var(--txt)}
.sy-oy small, .sy-demo small{display:block; color:var(--muted); font-size:12.5px; margin-top:4px}
.sy-dugmeler{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px}
.sy-dugmeler .btn-mini{min-height:40px; padding:0 14px}
.sy-dugmeler .btn-mini.secili{border-color:var(--txt); color:var(--txt)}
.sy-etiket{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.sy-etiket.uyari{border-color:#b98a2a; color:#e7c878}
.sy-etiket.iyi{border-color:#2f7d55; color:#7ee0a5}
.sy-demo audio{width:100%; margin-top:8px}
.sy-demo.gizli{opacity:.6}
.sy-suzgec{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.sy-suzgec button{min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel2); color:var(--muted); font:inherit; font-size:13.5px; cursor:pointer}
.sy-suzgec button.aktif{color:var(--txt); border-color:var(--txt)}
.sy-suzgec button span{opacity:.7; margin-left:4px}
.sy-gecmis summary{cursor:pointer; color:var(--muted); padding:6px 0}
.sy-oy.kabul, .sy-oy.red, .sy-oy.iptal{opacity:.75}
/* Ses Bankası: süre rozeti ve "daha fazla" */
.sb-sure, .sb-onay{font-size:12px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.sb-sure.uyari{border-color:#b98a2a; color:#e7c878}
.sb-onay{border-color:#2f7d55; color:#7ee0a5}
.sb-daha{margin-top:6px}
.sb-daha > summary{cursor:pointer; color:var(--muted); font-size:13.5px; padding:8px 2px; min-height:40px; display:flex; align-items:center}
.sb-sorunlu-tus{background:none; border:0; padding:6px 0; color:var(--muted); text-decoration:underline; font:inherit; font-size:13px; cursor:pointer; min-height:36px}

/* ═══ v192-c: GÖRÜNMEZ JARVIS PANELİ DOKUNUŞLARI YUTUYORDU ═══
   ÖLÇÜLDÜ (Playwright, dokunmatik 375 px): alt çubuktaki "Sohbet"e
   dokunuş #jarvisYazi'ya düşüyordu — "jarvisKok subtree intercepts
   pointer events". Sebep v191-c'deki `.jarvis-kok > .jarvis-panel
   {pointer-events:auto}` kuralı: panel KAPALIYKEN de (opacity 0,
   ekranın altında 560 px) dokunuş alıyordu; kullanıcı Sohbet'e, alt
   sekmelere basınca görünmez yazı kutusuna basıyor, klavye açılıyordu
   ("sohbete basınca sürekli klavye geliyor", "Jarvis bugda bırakıyor").
   Kapalı panel artık dokunuş almıyor ve görünmez. */
.jarvis-panel:not(.acik){pointer-events:none!important; visibility:hidden; transition:opacity .22s ease, transform .28s ease, visibility 0s linear .28s}
.jarvis-panel.acik{visibility:visible; transition:opacity .22s ease, transform .28s ease, visibility 0s}
/* Ses Bankası ana bölümleri */
.sb-ana-bolum{margin:18px 0 8px}
.sb-ana-baslik{font-family:var(--disp); font-size:20px; margin:0 0 2px; display:flex; align-items:center; gap:8px}
.sb-ana-baslik span{font-size:13px; color:var(--muted); font-weight:600}
.sb-ana-bolum h4.sb-bolum-baslik{font-size:15px}
/* Üyeler: kadro başlıkları ve kadro seçici */
.uye-kadro{margin:8px 0 26px}
.uye-kadro-baslik{font-size:22px!important; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:6px}
.uye-alt-bolum{font-family:var(--disp); font-size:14px; color:var(--muted); margin:14px 0 8px; display:flex; gap:6px; align-items:center}
.uye-alt-bolum span{font-weight:600; opacity:.8}
.uye-kadro-sec{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12.5px; color:var(--muted)}
.uye-kadro-sec select{flex:1; width:auto; min-height:36px; font-size:13.5px; padding:4px 8px}
.uye-kadro-arac{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 14px}
.uye-kadro-arac .btn-outline.small{width:auto; min-height:40px}
.uye-kadro-arac small{color:var(--muted)}
.kd-liste{max-height:60vh; overflow:auto; display:flex; flex-direction:column; gap:6px}
.kd-satir{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 4px; border-bottom:1px solid var(--line)}
.kd-satir b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kd-secenek{display:flex; gap:4px; flex:none}
.kd-sec{min-height:36px; padding:0 10px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--muted); font:inherit; font-size:13px; cursor:pointer}
.kd-sec.aktif{color:var(--txt); border-color:var(--txt); background:var(--panel)}

/* v192-c Üyeler uyarısı — kurucunun geçici notu. Göz alıcı ama
   bağırmayan: koyu kart, solda marka kırmızısı çizgi, büyük harf. */
.uye-uyari{display:flex; align-items:center; gap:12px; margin:4px 0 16px; padding:12px 12px 12px 14px;
  border:1px solid rgba(255,61,90,.35); border-left:4px solid var(--red); border-radius:12px;
  background:var(--panel)}
.uye-uyari p{margin:0; flex:1; min-width:0; font-weight:800; letter-spacing:.02em; line-height:1.35; font-size:15px; color:#F4F1FA}
.uye-uyari-ik{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--red); color:var(--red); font-weight:900; font-size:15px; line-height:1}
.uye-uyari-kapat{flex:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:#F4F1FA; font-size:16px; cursor:pointer; padding:0; min-width:40px}
.uye-uyari-kapat:hover{border-color:var(--red); color:var(--red)}
@media(max-width:520px){.uye-uyari p{font-size:14px}}
/* Görev seçimi (yalnız yönetici): satır iki kata iner — ad + kadro üstte,
   görevler altta ve sarıyor. Tek satırda altı düğme telefona sığmıyordu. */
.kd-satir.kd-genis{flex-wrap:wrap}
.kd-gorev{display:flex; flex-wrap:wrap; gap:4px; flex-basis:100%}
.kd-gor{min-height:34px; padding:0 10px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; font-size:12.5px; cursor:pointer}
.kd-gor.aktif{color:#fff; border-color:var(--red); background:rgba(255,61,90,.16)}
.kd-gor:disabled{opacity:.6}
@media(max-width:520px){.kd-satir.kd-genis .kd-secenek{flex-basis:100%}.kd-satir.kd-genis .kd-sec{flex:1}}
/* Kurallar → "Discord'da yenile" (yalnız kuralYonet) */
.kural-discord{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 14px}
.kural-discord .btn-outline.small{width:auto; min-height:40px; flex:none}
.kural-discord small{color:var(--muted); line-height:1.4; flex:1; min-width:200px}

/* v192-c ÜYE KARTI HİZASI — kurucu: "kartların içindeki şeyler mümkün
   mertebe aynı hizada sıralansın". Kart beş satırlık alt ızgara (subgrid):
   baş / bilgiler / demo / kadro / Mesaj. Satır yüksekliği o sıradaki EN UZUN
   kartın bölgesine göre veriliyor, böylece Discord satırı, oynatıcı, kadro
   seçici ve Mesaj düğmesi yan yana kartlarda aynı çizgide. Subgrid'i
   tanımayan eski tarayıcıda eski düzen (flex sütun) kalıyor. */
@supports (grid-template-rows: subgrid){
  #uyeList .uye-grid{align-items:stretch; row-gap:16px}
  #uyeList .uye-card{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:10px; align-content:start}
  #uyeList .uye-card > *{margin-top:0!important; margin-bottom:0!important; min-width:0; align-self:start}
  #uyeList .uye-card .uye-mesaj-tus{justify-self:start}
  #uyeList .uye-bilgiler .bilgi{margin:0 0 2px}
}
/* Dört kadro düğmesi (Seçilmedi eklendi) telefonda adın yanına sığmıyor: alt satıra */
@media(max-width:520px){.kd-satir{flex-wrap:wrap}.kd-satir .kd-secenek{flex-basis:100%}.kd-satir .kd-sec{flex:1;padding:0 6px}}
/* "+N demo daha" artık düğme: bağlantı görünümü korunuyor, dokunma hedefi 40 px */
#uyeList .uye-demo-tus{display:block; width:100%; min-height:40px; font:inherit; font-size:12.5px; cursor:pointer; text-align:center; background:transparent}
#uyeList .uye-demo-daha{display:flex; flex-direction:column; gap:6px}
#uyeList .uye-demo-daha[hidden]{display:none}
/* Beş kadro düğmesi (Yönetim eklendi) 340 px'lik pencereye tek satırda sığmıyordu:
   ÖLÇÜLDÜ, "1. Kadro" iki satıra kırıldı, "Rookie" 10 px taştı. Telefonda sarıyor. */
@media(max-width:520px){
  .kd-satir .kd-secenek{flex-wrap:wrap; gap:6px}
  /* özgüllük .kd-satir.kd-genis .kd-sec{flex:1}'i (0,3,0) yenmeli: flex:1 = taban
     0, düğmeler sarmak yerine tek satırda büzülüp metni taşırıyordu */
  .kd-liste .kd-satir .kd-sec{flex:1 1 auto; min-width:auto; padding:0 10px; white-space:nowrap}
}