/* MES Akademi · "Canlı Keşif" tasarım katmanı (2026-10-06).
 *
 * hub.html'e EK bir katmandır: yalnız <html class="ck"> iken etkindir. HTML/JS/veri modeli DEĞİŞMEZ;
 * geri dönüş: adres çubuğuna ?tema=eski (tercih localStorage'da tutulur), ?tema=ck ile geri gelir.
 * Tokenlar gerçek kontrast ölçümüyle seçildi (bkz. tests/hub_canli_kesif_tema.test.js):
 *   yazı #102A56 / #F8FAFC ≈ 14:1, ikincil #52627A / #FFFFFF ≈ 6:1, #0066FF / #FFFFFF ≈ 5.3:1.
 * Not: Tailwind CDN yardımcı sınıfları satır içi/yüksek öncelikli olduğu için !important kullanılır;
 * kapsam yalnız html.ck altındadır, başka sayfaya/çerçeveye sızmaz.
 */
html.ck {
  --ck-bg: #F8FAFC;
  --ck-surface: #FFFFFF;
  --ck-soft: #EBF3FF;
  --ck-action: #0066FF;
  --ck-action-hover: #0052CC;
  --ck-action-text: #0052CC; /* mavi YAZI için (açık mavi yüzeyde #0066FF 4.3:1 kalıyordu) */
  --ck-ink: #102A56;
  --ck-ink-2: #52627A;
  --ck-line: #E2E8F0;
  --ck-radius: 16px;
}

/* ---- Zemin: fantastik duvar kâğıdı + akan ışık katmanı kapalı ---- */
html.ck #hub-main-arena { background: var(--ck-bg) !important; }
html.ck #hub-main-arena::before,
html.ck #hub-main-arena::after { display: none !important; }
html.ck #hub-main-arena > div.fixed.inset-0 { display: none !important; }

/* ---- Karşılama alanı: 120–160 px, açık mavi; reklam/ölçülmemiş sayaç yok ---- */
html.ck #hub-global-hero {
  background: var(--ck-soft) !important; color: var(--ck-ink) !important;
  border: 1px solid #CFE0FF !important; box-shadow: none !important;
  padding: 16px 20px !important; border-radius: var(--ck-radius) !important;
}
html.ck #hub-global-hero > div.absolute,
html.ck #hub-global-hero .grid.shrink-0,          /* "170+ / %100 Çevrimdışı" gibi tanımsız toplamlar */
html.ck #hub-global-hero p,
html.ck #hub-global-hero .flex.items-center.gap-2.flex-wrap.mb-3 { display: none !important; }
html.ck #hub-global-hero h1 { color: var(--ck-ink) !important; font-size: 24px !important; margin: 0 !important; }
html.ck #hub-global-hero h1 span {
  background: none !important; -webkit-text-fill-color: var(--ck-action-text) !important; color: var(--ck-action-text) !important;
}
html.ck #hub-global-hero button { box-shadow: none !important; transform: none !important; }
html.ck #hub-global-hero button:not(:first-of-type) {
  background: #fff !important; color: var(--ck-ink) !important; border: 1px solid var(--ck-line) !important; backdrop-filter: none !important;
}
html.ck #hub-global-hero button:first-of-type {
  background: var(--ck-action) !important; color: #fff !important; border: 0 !important;
}
html.ck #hub-global-hero button:first-of-type:hover { background: var(--ck-action-hover) !important; }

/* ---- Öğretmen görevleri bölümü ---- */
html.ck #hub-student-tasks-section {
  background: var(--ck-surface) !important; color: var(--ck-ink) !important;
  border: 1px solid var(--ck-line) !important; box-shadow: none !important; border-radius: var(--ck-radius) !important;
}
html.ck #hub-student-tasks-section .text-white { color: var(--ck-ink) !important; }
html.ck #hub-student-tasks-section [class*="text-slate-"],
html.ck #hub-student-tasks-section [class*="text-indigo-"] { color: var(--ck-ink-2) !important; }
html.ck #hub-student-tasks-section input {
  background: #fff !important; color: var(--ck-ink) !important; border-color: #B8C7DD !important;
}
html.ck #hub-student-tasks-section [class*="bg-slate-9"],
html.ck #hub-student-tasks-section [class*="bg-indigo-9"] { background: var(--ck-soft) !important; border-color: #CFE0FF !important; }
html.ck #hub-student-tasks-section a { color: var(--ck-action-text) !important; }

/* ---- Sidebar: aktif öğe açık mavi yüzey + mavi yazı ---- */
html.ck #hub-sidebar { background: #fff !important; }
html.ck .hub-tab-btn.mesa-tab-active {
  background: var(--ck-soft) !important; color: var(--ck-action-text) !important; box-shadow: inset 3px 0 0 var(--ck-action) !important;
}
html.ck .hub-mobile-tab.mesa-tab-active { color: var(--ck-action-text) !important; }
html.ck .hub-tab-btn:focus-visible,
html.ck .hub-mobile-tab:focus-visible,
html.ck #hub-sidebar button:focus-visible,
html.ck #hub-sidebar a:focus-visible { outline: 2px solid var(--ck-action) !important; outline-offset: 2px; }

/* ---- Kartlar: beyaz yüzey, ince sınır, 16 px köşe; sıcak parşömen/renkli gradyan yok ---- */
html.ck .arcade-card {
  background: var(--ck-surface) !important; border: 1px solid var(--ck-line) !important; border-width: 1px !important;
  border-radius: var(--ck-radius) !important; box-shadow: 0 1px 2px rgba(16, 42, 86, .06) !important; backdrop-filter: none !important;
}
html.ck .arcade-card:hover { box-shadow: 0 6px 18px rgba(16, 42, 86, .12) !important; border-color: #B8D2FF !important; }
html.ck .arcade-card .text-stone-600,
html.ck .arcade-card .text-stone-500 { color: var(--ck-ink-2) !important; }
html.ck .arcade-card h4 { color: var(--ck-ink) !important; }
html.ck .arcade-card button[onclick^="openCardById"].px-2\.5,
html.ck .arcade-card button[onclick^="openCardById"].sm\:px-3\.5 {
  background: var(--ck-action) !important; color: #fff !important; box-shadow: none !important; border: 0 !important;
}

/* ---- Vitrin rayı başlıkları: parşömen kutu yerine sade başlık ---- */
html.ck #showcase-sections-container [style*="linear-gradient"].rounded-2xl {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; backdrop-filter: none !important;
}
html.ck #showcase-sections-container [style*="linear-gradient"].rounded-2xl p { color: var(--ck-ink-2) !important; }

/* ---- Üst durum çubuğu / mobil alt-modül çubuğu ---- */
html.ck #filter-status-bar { box-shadow: none !important; border-color: var(--ck-line) !important; background: #fff !important; }
html.ck #mobile-submodule-bar > div:first-child { background: var(--ck-soft) !important; color: var(--ck-ink) !important; border-color: #CFE0FF !important; }
html.ck #mobile-submodule-bar .text-amber-300,
html.ck #mobile-submodule-bar .text-white { color: var(--ck-ink) !important; }
html.ck #mobile-submodule-bar button { background: #fff !important; color: var(--ck-ink) !important; border-color: var(--ck-line) !important; }

html.ck #hub-teacher-panel-gate button {
  background: var(--ck-soft) !important; color: var(--ck-action-text) !important; border: 1px solid #CFE0FF !important; box-shadow: none !important;
}
html.ck #hub-teacher-panel-gate button > span:last-child { background: #fff !important; color: var(--ck-action-text) !important; }

/* ---- Öğretmen paneli (hub içi tam ekran): mor üst çubuk yerine açık yüzey, aktif sekme açık mavi ---- */
html.ck #teacher-cockpit-modal > header {
  background: var(--ck-surface) !important; color: var(--ck-ink) !important; border-bottom: 1px solid var(--ck-line); box-shadow: none !important;
}
html.ck #teacher-cockpit-modal > header h2 { color: var(--ck-ink) !important; }
html.ck #teacher-cockpit-modal > header p { color: var(--ck-ink-2) !important; }
html.ck #teacher-cockpit-modal > header .bg-white\/15 { background: var(--ck-soft) !important; border-color: #CFE0FF !important; }
html.ck #teacher-cockpit-modal > header input { background: var(--ck-bg) !important; border: 1px solid var(--ck-line) !important; color: var(--ck-ink) !important; }
html.ck #teacher-cockpit-modal > header a,
html.ck #teacher-cockpit-modal > header button {
  background: #fff !important; color: var(--ck-ink) !important; border: 1px solid var(--ck-line) !important;
}
html.ck #teacher-cockpit-modal .tcp-tab-btn.bg-purple-600 {
  background: var(--ck-soft) !important; color: var(--ck-action-text) !important; border-color: #CFE0FF !important; box-shadow: inset 3px 0 0 var(--ck-action) !important;
}
html.ck #teacher-cockpit-modal .tcp-tab-btn.bg-purple-600 > span:last-child { background: #fff !important; color: var(--ck-action-text) !important; }
html.ck #teacher-cockpit-modal .tcp-tab-btn:focus-visible,
html.ck #teacher-cockpit-modal > header :focus-visible { outline: 2px solid var(--ck-action) !important; outline-offset: 2px; }

/* ---- Sabit (sahte) örnek veri taşıyan eski kartlar: "Melis K. 4.820 XP", "8/24 Kupa", "5/5 Can",
   "HAZIR! +150 XP", "Mavi Aslan 1.450" gibi değerler GERÇEK sunucu verisi değil, HTML'e gömülü örneklerdir.
   Canlı üründe sahte metrik gösterilmez; aynı işlevlerin GERÇEK erişimi yeni sekmelerde (İlerlemem /
   Benim Sayfam / Oyunlar) durur. HTML silinmedi: ?tema=eski eski görünümü geri getirir. ---- */
html.ck [data-demo-veri] { display: none !important; }

/* ---- Azaltılmış hareket tercihi ---- */
@media (prefers-reduced-motion: reduce) {
  html.ck *, html.ck *::before, html.ck *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}