/* ============================================================
 * features/shell.css — splash + app kabuğu + sekmeler + karşılama
 * (JS karşılığı: js/features/shell/ + index.html iskeleti)
 *
 * Dil: koyu glassmorphism + gradient vurgu (tokens.css).
 * İkonlar Font Awesome <i> öğeleridir (SVG yok).
 * ============================================================ */

/* ── KABUK ÇUBUKLARI — ORTAK REÇETE (K3/K7, 2026-07-16) ──────
   Mobilde kabuğun İKİ cam çubuğu vardır: üstte header (.sidebar-head)
   + altta dock (.bottom-nav). İkisi de ICB'ye absolute çıpalı overlay;
   temel geometri/malzeme BU var'lardan gelir (içerik ve animasyon farkı
   serbest — K2 gereği her öğe kendi bloğundan boyanır).
   Çubuk toplamı = pad-out + row + pad-in = 66px (+dış kenarda safe).

   KAYDIRMA SÖZLEŞMESİ (chat-msgs kalıbının kabuk eşi, chat.css):
   her sekmenin GERÇEK scroller'ı kabuğu TAM kaplar; çubuk payları
   scroller'ın İÇ padding'idir (--shellbar-pay + safe, iki uçta) →
   içerik kaydırınca İKİ camın da altından akar. Tam kaplama kuralının
   bedeli --rootlock-inset'tir (tokens.css) — kabı .side-pages tek
   noktada yer. */
:root {
  --shellbar-row: 44px;       /* içerik satırı yüksekliği (bn-btn boyu) */
  --shellbar-pad-in: 9px;     /* içeriğe bakan kenar */
  --shellbar-pad-out: 13px;   /* viewport kenarına bakan kenar (+safe) */
  --shellbar-h: calc(var(--shellbar-row) + var(--shellbar-pad-in) + var(--shellbar-pad-out));
  --shellbar-pay: calc(var(--shellbar-h) + 10px);   /* scroller nefes payı */
  --shellbar-blur: var(--glass-blur);
  --shellbar-line: var(--border);

  /* TEK sayfa kenar payı (K3, 2026-07-24): HER sekmenin (.side-page)
     iç payı bu reçeteden gelir — literal 12px/8px/0 ad-hoc padding
     ARTIK YOK. Bir sekme inseti kendi katmanında başka bir öğeye
     devretse bile (chats → .conv-list, galeri → gövde hizası) net
     görünür pay HEP --page-pad'e çözülür → beş ana div birebir
     simetrik. Değiştirmek = tek satır. */
  --page-pad: 12px;
}

/* ── Splash ───────────────────────────────────────────────── */
.splash {
  /* fixed değil absolute — kök kilidi mimarisi (base.css, 2026-07-12):
     tam-ekran katmanlar ICB'ye çıpalanır, tarayıcı bar'ından etkilenmez */
  position: absolute; inset: 0; z-index: var(--z-splash);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* background-image: var(--bg-grad); ← kapalı (2026-07-12): app zemini
     düzken splash'in menekşe perdesi fade sırasında ekranı SOLUK
     gösterip kalkınca "bir anda canlanma" yapıyordu — splash artık
     zeminle AYNI düz renk, fade görünmezleşir */
  gap: 16px; background: var(--bg);
  /* HIZLI kapanış: uzun fade sırasında yarı saydam koyu perde alttaki
     ekranı soluk gösteriyordu ("renkler soluk açılıyor" şikâyeti,
     2026-07-06) — .35s → .15s, algılanamaz */
  transition: opacity .15s ease;
}
.splash.out { opacity: 0; pointer-events: none; }
.splash-name { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }

/* ── App kabuğu ───────────────────────────────────────────── */
/* 100dvh DEĞİL: dvh telefonda adres çubuğu gizlenince değişir ve
   tabana çıpalı chat bar'ı zıplatır (2026-07-12). %100 → ICB'ye
   çözülür; ICB adres çubuğundan etkilenmez, klavyede ise
   interactive-widget=resizes-content sayesinde yine küçülür. */
/* DOĞUŞ (renk sıçraması fix'i 2026-07-15): kabuk şeffaf başlar,
   main.js dropSplash .in basınca yavaşça belirir. Splash zemini =
   body zemini (düz --bg) olduğundan aradaki karede EKRAN RENGİ HİÇ
   DEĞİŞMEZ: önce loader söner (150ms), sonra kabuk aynı zeminin
   üstünde yumuşakça doğar — eski "panel açılırken renkler anlık
   değişiyor" flash'ı bu sıralamayla ölür. */
.app { display: flex; height: 100%; }
/* #app ID'siyle (sınıfla DEĞİL): harness'ler .app iskeletini main.js'siz
   kullanır — sınıf kuralı onları kalıcı görünmez yapıyordu (2026-07-15). */
#app { opacity: 0; transition: opacity .55s ease .08s; }
#app.in { opacity: 1; }

.sidebar {
  /* desktop'ta 500px (2026-07-14 kullanıcı isteği; önce 448);
     dar desktop penceresinde 400px'e iner. */
  width: 500px; flex: 0 0 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: transparent;   /* zemindeki ışık blob'ları görünsün */
  /* border-right SİLİNDİ (kullanıcı 2026-07-15) — çizgisiz ayrım */
  position: relative;
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px;
  /* masaüstünde ZEMİNSİZ — surface zemini yalnız mobil overlay'de
     (kullanıcı 2026-07-19, aynı gün ikinci karar) */
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
/* sekme adı başlığı — tipografisi brand-name'in ikizi (aynı yuvada
   birbirinin yerine geçerler); metni shell/index.js yazar. Masaüstünde
   HİÇ görünmez, mobil takas kuralları mobil blokta (2026-07-18). */
.brand-page { display: none; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
/* Sağ aksiyon satırı (görev: flex satırı) — çıkış + ayar çarkı */
.head-actions { display: flex; align-items: center; gap: 4px; }

/* Çıkış — "exit" yazılı surface pill (2026-07-19: 2px çerçeve silindi,
   yerine cam zemin — kullanıcı istedi; profildeki çıkış kartının
   yerine). İkonu hydrate doldurur (data-ic) — inline boyu komşu ikon
   butonlarla aynı; onay + logout main.js'te. */
.head-exit {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--circle-md); padding: 0 12px;
  background: var(--surface); border-radius: var(--r-full);
  color: var(--text-2); font-size: 12px; font-weight: 650; letter-spacing: .03em;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.head-exit:hover { color: var(--danger); background: var(--danger-soft); }

/* Çark — krom ikon butonu burada KALICI surface daire taşır (genel
   .icon-btn zemini yalnız hover'da alır; hover kademesi --surface-2
   components.css'ten gelir, doğal kademe atlaması) */
.head-actions .icon-btn { background: var(--surface); }

/* Sekmeler — cam segment kapsül; aktif = koyu cam kademe */
.side-tabs {
  display: flex; gap: 2px; margin: 0 12px 12px; padding: 4px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.side-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 4px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  white-space: nowrap; min-width: 0;
  transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
.side-tab:hover { color: var(--text); }
/* Aktif sekme glow'suz ("bloom" beğenilmedi 2026-07-05); gradient
   pill 2026-07-19'da söküldü, 2026-07-20'de önce DÜZ accent, aynı gün
   2. turda ACCENT-SOFT zemine indi; 2026-07-22'de dolu ACCENT-STRONG
   zemine çıktı ve glif rengi EZİLMEZ oldu — .side-tab'ın --text-2'si
   (hover'da --text) miras kalır. */
.side-tab.active {
  background: var(--accent-strong);
}
.tab-ic i { font-size: 14px; display: block; }

.side-pages { flex: 1; min-height: 0; position: relative; }
.side-page {
  display: none; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--page-pad);
  /* minimal özel scrollbar (varsayılan 8px bar çirkin bulundu) */
  scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent;
}
.side-page::-webkit-scrollbar { width: 4px; }
.side-page::-webkit-scrollbar-thumb {
  background: var(--scrollbar); border-radius: 4px;
}
.side-page::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.side-page::-webkit-scrollbar-track { background: transparent; }
/* Galeri + cüzdan: scrollbar GİZLİ (mobil-app hissi; kaydırma çalışır,
   kullanıcı aşağı kaydırılabildiğini zaten anlar) */
#page-gallery, #page-wallet { scrollbar-width: none; }
#page-gallery::-webkit-scrollbar,
#page-wallet::-webkit-scrollbar { width: 0; height: 0; }
.side-page.active { display: block; }
/* Not: ID seçicisi .side-page'i ezmesin diye display yalnız .active'te
   verilir (aksi hâlde sekme değişse de chats listesi görünür kalıyordu). */
/* overflow:visible (2026-07-20): gerçek scroller içteki .conv-list —
   liste, + dairesinin pulse halkası için negatif marjla bu kabın
   padding'ine taşar (chats.css kırpma tamponu); kap kırparsa tampon
   boşa gider. .side-page'in auto'sunu ID eziyor.
   İÇ PAY VERİLMEZ (2026-07-24): --page-pad .side-page tabanından
   miras — conv-list'in +20/-20 tamponu net 0'a çözülür, görünür pay
   yine --page-pad → chats öbür sekmelerle simetrik. */
#page-chats { overflow: visible; }
#page-chats.active { display: flex; flex-direction: column; }

.main { flex: 1; min-width: 0; position: relative; }
.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; }

/* Karşılama — sade merkez içerik */
.welcome {
  margin: auto; display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center; color: var(--text-2); padding: 24px;
}
.welcome-logo { margin-bottom: 8px; }
.welcome h2 { color: var(--text); font-size: 26px; }
.welcome p { max-width: 340px; line-height: 1.65; }

/* Mobil alt nav — tabana yapışık İNCE cam bar (2026-07-18, seçim:
   design-tests/mobile-nav-designs.html varyant 7 "üst çizgi"; eski
   varyant 6 "aktif gradient pill + yanında yazı" SÖKÜLDÜ): ikon-only
   eşit dağılım, yazı yok (sekme adı header'da — .brand-page), aktiflik
   çubuğun tepesinden inen kısa gradient çizgi + ikon renginin açılması.
   2026-07-15: DOM'da .sidebar'ın FOOTER'ı (HTML simetrisi — kabuk
   gezinmesi kabuk sütununda); absolute çıpası sidebar (position:
   relative, mobilde tam ekran). */
.bottom-nav {
  display: none;
  /* absolute (ICB çıpası) + statik --safe-bottom: fixed + canlı env
     ikilisi araç çubuğu animasyonunda dock'u dans ettiriyordu
     (2026-07-12, kök kilidi mimarisi — base.css/tokens.css) */
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 40;
  /* geometri + malzeme = kabuk çubuğu reçetesi (dosya başı);
     hairline İÇ kenarda (üstte) — head'inki altta, ayna simetrisi.
     Zemin --surface + hairline YOK (kullanıcı 2026-07-19; 07-18'deki
     "yalnız blur" kararını geri aldı) */
  padding: var(--shellbar-pad-in) 8px calc(var(--shellbar-pad-out) + var(--safe-bottom));
  background: var(--surface);
  backdrop-filter: var(--shellbar-blur); -webkit-backdrop-filter: var(--shellbar-blur);
}
.bn-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 0; min-width: 0; height: var(--shellbar-row);
  color: var(--text-2);
  transition: color var(--tr-fast);
}
/* aktiflik çizgisi — çubuğun GERÇEK tepe kenarından iner: buton üst
   padding'in içinde durduğundan çıpa -pad-in ile bar kenarına taşınır.
   scaleX ile doğar/söner. Renk cam kademesi (kullanıcı 2026-07-19:
   gradient bırakıldı). */
.bn-btn::before {
  content: ""; position: absolute;
  top: calc(-1 * var(--shellbar-pad-in)); left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--surface-3);
  transition: transform var(--tr-med);
}
.bn-btn.active { color: var(--text); }
.bn-btn.active::before { transform: translateX(-50%) scaleX(1); }
/* İkon dairesi — GERÇEK öğe (kullanıcı 2026-07-19: .bn-btn::after
   hayalet dairesi HTML'deki .bn-ic'in kendisine indi — görünen daire
   artık adreslenebilir, K6 şeffaflığı. İkon dairenin ÇOCUĞU olduğundan
   backdrop blur ikonu flulaştırmaz — eski z-index:-1 hilesi öldü).
   Zemin surface, blur YOK (kullanıcı 2026-07-19: bar zaten blur'lu —
   daire yalnız renk kademesi; head'deki çark/exit kademesi = kabuk
   simetrisi); boy = satır yüksekliği (sığan en büyük daire). Kimlik
   aynı gün doğdu (side-tab'ın .tab-ic ödüncü + specificity ezmesiyle
   birlikte öldü, ALTIN KURAL K1/K8). */
.bn-ic {
  display: grid; place-items: center;
  width: var(--shellbar-row); height: var(--shellbar-row);
  border-radius: 50%;
  background: var(--surface);
}
.bn-ic i { font-size: 17px; display: block; }

/* Dar desktop penceresi: sohbet alanına yer kalsın */
@media (min-width: 861px) and (max-width: 1100px) {
  .sidebar { width: 400px; }
}

/* ── Responsive kabuk (mobil) ─────────────────────────────── */
@media (max-width: 860px) {
  .sidebar { width: 100%; border-right: 0; }
  .side-tabs { display: none; }   /* alt dock zaten var — çift sekme olmasın */

  /* HEAD = NAV'IN TEPE AYNASI (K7, 2026-07-16 kabuk simetrisi):
     masaüstünde akışta duran header mobilde .bottom-nav'la AYNI türden
     cam overlay olur — absolute (ICB çıpası, fixed YASAK), aynı çubuk
     reçetesi, hairline İÇ kenarda (altta), dış kenar payı --safe-top.
     min-height content'i (36px icon-btn) 44px satıra tamamlar → iki
     çubuğun toplam boyu birebir eşit (--shellbar-h + safe). */
  .sidebar-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 40;
    padding: calc(var(--shellbar-pad-out) + var(--safe-top)) 16px var(--shellbar-pad-in);
    min-height: calc(var(--shellbar-h) + var(--safe-top));
    /* hairline (box-shadow) SİLİNDİ; surface zemin YALNIZ bu mobil
       overlay'de — masaüstü head zeminsiz (kullanıcı 2026-07-19) */
    background: var(--surface);
    backdrop-filter: var(--shellbar-blur); -webkit-backdrop-filter: var(--shellbar-blur);
  }
  /* Başlık takası (WhatsApp deseni, kullanıcı 2026-07-18): Sohbetler'de
     marka, diğer sekmelerde sekme adı — data-tab'ı shell/index.js basar,
     .brand-page metnini de o yazar. Masaüstünde takas YOK (hep marka). */
  body:not([data-tab="chats"]) .brand-name { display: none; }
  body:not([data-tab="chats"]) .brand-page { display: block; }

  /* KAYDIRMA SÖZLEŞMESİ (dosya başındaki reçete): head artık akışta yer
     kaplamadığından .side-pages kabuğu TAM kaplar — --rootlock-inset'i
     (tokens.css: implicit root scroller terfi kırıcısı) TEK NOKTA olarak
     bu kap yer; içindeki hiçbir sekme scroller'ı ICB'yi tam dolduramaz. */
  .side-pages { margin-top: var(--rootlock-inset); }
  /* Çubuk payları scroller'ın İÇ padding'i: içerik iki uçta camların
     altında BAŞLAMAZ, kaydırınca altlarından AKAR (statik --safe-*:
     canlı env scrollHeight'ı kaydırma sırasında oynatıyordu 2026-07-12).
     Kendi scroller'ını kuran sekmeler aynı payları KENDİ scroller'ına
     verir: #page-chats → .conv-list (chats.css), #page-gallery →
     kendisi (gallery.css; ID padding'i bu kuralı zaten eziyor). */
  .side-page {
    padding-top: calc(var(--shellbar-pay) + var(--safe-top));
    padding-bottom: calc(var(--shellbar-pay) + var(--safe-bottom));
  }
  #page-chats { padding: 0; }   /* scroller .conv-list — paylar onda (chats.css) */
  /* fixed DEĞİL absolute: fixed'in kapsayıcısı tarayıcı araç çubuğu
     gizlenirken CANLI değişen viewport'tur — chat bar + vinyetler
     mesajlara göre zıplıyordu (2026-07-12). absolute (konumlu ata yok)
     → sabit ICB'ye çıpalanır; araç çubuğu animasyonundan etkilenmez. */
  .main {
    position: absolute; inset: 0; z-index: 45;
    /* ZEMİNSİZ (2026-07-18): eski opak var(--bg) zemini #bgfx arkaplan
       katmanlarını (features/settings) mobil sohbette tamamen örtüyordu
       ("PC'de var, mobilde yok" şikâyeti). Altındaki listeyi örtme işi
       artık sidebar'ın kendisinde: chat açıkken sidebar söner (aşağıda
       body.chat-open .sidebar) — arkada hep body zemini + bgfx kalır,
       fade-through geçişi sabit fonun üstünde olur (daha da doğru). */
    background: transparent;
    /* TAŞMA KAPANI (2026-07-16, "gri çizgi"): kayıt radar halkası gibi
       viewport dışına uzanan animasyonlar kökün kaydırılabilir alanını
       büyütüp Android'in overlay scrollbar göstergelerini tetikliyordu
       (asıl düzeltme base.css kök clip'i). Mobilde .main zaten tam
       viewport — clip görüntüyü değiştirmez, chat içindeki HİÇBİR
       taşmanın köke ulaşmamasını garantiler. Masaüstünde UYGULANMAZ
       (bar glow'u sidebar sınırında kesilmesin diye yalnız bu blokta). */
    overflow: clip;
    /* GEÇİŞ v3 (kullanıcı 2026-07-15 gece): tam-genişlik translateX
       kaydırması TÜMDEN GİTTİ — (a) KASIYORDU: kayan katmanın içindeki
       backdrop-filter'lı pill'ler her karede altlarındaki değişen zemini
       yeniden örnekliyordu + sol-kenar gölgesi ("karartı" sızıntısının
       kaynağı); (b) estetik bulunmadı. Yerine evrensel kalıp (Material
       fade-through / shared-axis'in hafif dikey hâli): kapalı = görünmez
       + 14px aşağıda; açılış = yumuşayan (decelerate) belirme + süzülüp
       oturma; kapanış = kısa + ivmelenen sönme. Ucuz: yalnız opacity +
       minik translate, blur'un altındaki zemin sabit. visibility
       gecikmesi = kapanış animasyonu bitmeden katman yok olmaz;
       kapalıyken tıklama/odak da ölü (eskiden ekran dışıydı). */
    opacity: 0; visibility: hidden;
    transform: translateY(14px);
    transition: opacity 160ms cubic-bezier(.4, 0, 1, 1),
                transform 160ms cubic-bezier(.4, 0, 1, 1),
                visibility 0s 160ms;
    display: flex; flex-direction: column;
  }
  body.chat-open .main {
    opacity: 1; visibility: visible;
    transform: none;
    transition: opacity 240ms cubic-bezier(0, 0, .2, 1),
                transform 280ms cubic-bezier(0, 0, .2, 1),
                visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .main, body.chat-open .main { transition: none; transform: none; }
  }
  #view-welcome { display: none !important; }
  .bottom-nav { display: flex; }
  /* Sohbet açıkken İKİ kabuk çubuğu da TAMAMEN gizli: .main zaten
     viewport'u kaplıyor (erişilemez) ve tarayıcı araç çubuğu
     animasyonunda fixed katmanlar farklı hızda yerleşince dock pill'in
     altından sızıyordu (2026-07-12; head'e K7 aynası 2026-07-16) */
  body.chat-open .bottom-nav { display: none; }
  body.chat-open .sidebar-head { display: none; }
  /* Sohbet açıkken sidebar (liste) SÖNER — .main artık zeminsiz
     (yukarıda), listeyi opak zemin değil bu kural gizler. Zaten
     erişilemezdi; visibility gecikmesi = sönme bitmeden yok olmaz.
     Kapanışta anında görünür olur, chat 160ms'de üstünden çekilir. */
  .sidebar { transition: opacity 200ms cubic-bezier(0, 0, .2, 1), visibility 0s; }
  body.chat-open .sidebar {
    opacity: 0; visibility: hidden;
    transition: opacity 120ms cubic-bezier(.4, 0, 1, 1), visibility 0s 120ms;
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar, body.chat-open .sidebar { transition: none; }
  }
}