/* MES Akademi · Gemini "Canlı Keşif" öğrenci tasarımının GERÇEK hub DOM'una bağlantısı (2026-10-10, Claude).
 *
 * Kaynak tasarım: design/gemini-canli-kesif/ (Gemini). Oradaki .ck-card/.ck-sidebar/.ck-nav-item vb. bileşen sınıfları hub.html'de
 * YOKTUR; bu dosya aynı görünümü (tokenlar, yüzeyler, aktif durum, tek mavi eylem) MEVCUT kimlik/sınıflara uygular.
 * HTML yapısı, kimlikler, filtre/oturum/görev/ilerleme/MESRobot davranışları DEĞİŞMEZ; yalnız görünüm.
 * Kapsam: html.ck.ckg — head betiği ekler. Geri alma: ?tasarim=onceki (tercih saklanır), geri getirme: ?tasarim=yeni.
 * Tailwind CDN stilleri bu dosyadan SONRA eklendiği ve satır içi stiller bulunduğu için !important kullanılır.
 */

/* ---- Gövde: Arapça (RTL) yazı tipi korunur ----
 * Gemini temelindeki `html.ck body { font-family }` gövdeye doğrudan yazı tipi verir ve i18n katmanının
 * html[dir=rtl] üzerindeki Cairo/Noto Sans Arabic seçimini EZERDİ (ölçüldü). RTL'de Arapça yazı tipleri öne alınır. */
html.ck.ckg[dir="rtl"] body { font-family: 'Cairo', 'Noto Sans Arabic', var(--ck-font-family) !important; }

/* ---- Üst çubuk: düz beyaz yüzey, ince alt çizgi ---- */
html.ck.ckg header.hub-topbar {
  background: var(--ck-surface) !important; border-bottom: 1px solid var(--ck-line) !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
html.ck.ckg header.hub-topbar a[href="/"] span.bg-gradient-to-r {
  background: var(--ck-soft) !important; color: var(--ck-action-text) !important; box-shadow: none !important; border: 1px solid #CFE0FF;
}
html.ck.ckg #hub-header-filtre select,
html.ck.ckg #hub-header-filtre input {
  background-color: var(--ck-surface) !important; border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius-md) !important;
  color: var(--ck-ink) !important; box-shadow: none !important;
}
html.ck.ckg #hub-header-filtre select:hover,
html.ck.ckg #hub-header-filtre input:hover { border-color: var(--ck-line-strong) !important; }

/* ---- Kenar çubuğu (.ck-sidebar karşılığı) ---- */
html.ck.ckg #hub-sidebar {
  background: var(--ck-surface) !important; border-right: 1px solid var(--ck-line) !important; box-shadow: none !important;
}
html.ck.ckg[dir="rtl"] #hub-sidebar { border-right: 0 !important; border-left: 1px solid var(--ck-line) !important; }
/* Profil özeti (.ck-sidebar-profile karşılığı): mor degrade yerine açık mavi yüzey */
html.ck.ckg #hub-sidebar > div[onclick="openReportCardModal()"] {
  background: var(--ck-soft) !important; color: var(--ck-ink) !important; border: 1px solid #CFE0FF !important;
  box-shadow: none !important; border-radius: var(--ck-radius-md) !important;
}
html.ck.ckg #sidebar-user-name { color: var(--ck-ink) !important; filter: none !important; }
html.ck.ckg #hub-sidebar > div[onclick="openReportCardModal()"] .user-dynamic-level { color: var(--ck-action-text); }
html.ck.ckg #hub-sidebar > div[onclick="openReportCardModal()"] span.bg-amber-400 {
  background: #fff !important; color: var(--ck-action-text) !important; border: 1px solid #CFE0FF; box-shadow: none !important;
}
html.ck.ckg #hub-sidebar > div[onclick="openReportCardModal()"] .bg-black\/25 { background: var(--ck-line) !important; }
html.ck.ckg #sidebar-xp-bar { background: var(--ck-action) !important; }
html.ck.ckg #hub-sidebar > div[onclick="openReportCardModal()"] .text-amber-300,
html.ck.ckg #hub-sidebar > div[onclick="openReportCardModal()"] .text-white\/50 { color: var(--ck-ink-2) !important; }

/* Altı sekme (.ck-nav-item karşılığı): etkin sekme açık mavi yüzey + mavi yazı + ince çerçeve */
html.ck.ckg .hub-tab-btn {
  min-height: 42px; padding: 0 14px; gap: 12px; border-radius: var(--ck-radius-md);
  font-size: 14px; font-weight: 600; color: var(--ck-ink-2); border: 1px solid transparent !important;
}
html.ck.ckg .hub-tab-btn:hover { background: var(--ck-bg) !important; color: var(--ck-ink) !important; }
html.ck.ckg .hub-tab-btn.mesa-tab-active {
  background: var(--ck-soft) !important; color: var(--ck-action-text) !important; border-color: #CFE0FF !important;
  box-shadow: none !important; font-weight: 700;
}
html.ck.ckg #hub-sidebar details > summary,
html.ck.ckg #hub-sidebar details { border-color: var(--ck-line) !important; color: var(--ck-ink-2) !important; }

/* ---- Karşılama alanı: Gemini'deki sade üst bölüm gibi beyaz yüzey (açık mavi yerine) ---- */
html.ck.ckg #hub-global-hero {
  background: var(--ck-surface) !important; border: 1px solid var(--ck-line) !important; box-shadow: var(--ck-shadow-sm) !important;
}
html.ck.ckg #hub-global-hero h1 { font-size: 22px !important; font-weight: 800 !important; }
html.ck.ckg #hub-global-hero button { border-radius: var(--ck-radius-md) !important; min-height: 40px; font-weight: 700 !important; }

/* ---- Son açtıkların ---- */
html.ck.ckg #hub-son-acilanlar {
  background: var(--ck-surface) !important; border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius-lg) !important; box-shadow: var(--ck-shadow-sm) !important;
}
html.ck.ckg #hub-son-acilanlar h3 { color: var(--ck-ink) !important; font-size: 16px !important; }
html.ck.ckg #hub-son-acilanlar [data-son-acilan] {
  background: var(--ck-surface) !important; border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius-md) !important;
  color: var(--ck-ink) !important; box-shadow: none !important;
}
html.ck.ckg #hub-son-acilanlar [data-son-acilan]:hover { border-color: #B8D2FF !important; background: var(--ck-soft) !important; }

/* ---- Öğretmen görevleri (.ck-resume-rail / .ck-resume-card görünümü; veri ve eylemler aynı) ---- */
html.ck.ckg #hub-student-tasks-section { border-radius: var(--ck-radius-xl) !important; box-shadow: var(--ck-shadow-sm) !important; }
html.ck.ckg #hub-student-tasks-section h3 { font-size: 16px !important; }
html.ck.ckg #hub-student-tasks-section > div:first-child { border-color: var(--ck-line) !important; }
html.ck.ckg #hub-student-tasks-section > div:first-child > div:first-child > span:first-child { background: var(--ck-soft) !important; border-color: #CFE0FF !important; }
html.ck.ckg #hub-student-assignments-list > div {
  background: var(--ck-surface) !important; border: 1px solid #CFE0FF !important; border-radius: var(--ck-radius-md) !important;
  backdrop-filter: none !important; box-shadow: none !important;
}
html.ck.ckg #hub-student-assignments-list > div:hover { border-color: #99C2FF !important; box-shadow: var(--ck-shadow-md) !important; }
html.ck.ckg #hub-student-assignments-list h4 { color: var(--ck-ink) !important; font-size: 14px !important; }
html.ck.ckg #hub-student-assignments-list > div > div:last-child { border-color: var(--ck-line) !important; }
html.ck.ckg #hub-student-assignments-list span.font-mono { background: var(--ck-soft) !important; color: var(--ck-action-text) !important; border-color: #CFE0FF !important; }
html.ck.ckg #hub-student-assignments-list .text-amber-300 { color: var(--ck-warn-ink) !important; }
html.ck.ckg #hub-student-assignments-list button[onclick^="openAssignmentActivity"],
html.ck.ckg #hub-student-tasks-section button[onclick="joinLiveLessonFromHub()"] {
  background: var(--ck-action) !important; color: #fff !important; box-shadow: none !important; border: 0 !important;
  border-radius: var(--ck-radius-md) !important; min-height: 36px;
}
html.ck.ckg #hub-student-assignments-list button[onclick^="openAssignmentActivity"]:hover,
html.ck.ckg #hub-student-tasks-section button[onclick="joinLiveLessonFromHub()"]:hover { background: var(--ck-action-hover) !important; }
html.ck.ckg #hub-student-assignments-list .bg-emerald-500\/20 { background: var(--ck-ok-bg) !important; color: var(--ck-ok-ink) !important; border-color: var(--ck-ok-border) !important; }
html.ck.ckg #hub-student-assignments-list [data-ogretmen-notu] { background: var(--ck-info-bg) !important; color: var(--ck-info-ink) !important; border-color: var(--ck-info-border) !important; }
html.ck.ckg #hub-student-assignments-list .bg-sky-400\/25 { background: var(--ck-info-bg) !important; color: var(--ck-info-ink) !important; border-color: var(--ck-info-border) !important; }
html.ck.ckg #hub-live-lesson-status { background: var(--ck-ok-bg) !important; color: var(--ck-ok-ink) !important; border-color: var(--ck-ok-border) !important; }
html.ck.ckg #hub-live-lesson-status b,
html.ck.ckg #hub-live-lesson-status .text-emerald-400 { color: var(--ck-ok-ink) !important; }

/* ---- Öğrenci Ana Akışı & Kart Hiyerarşisi (Temiz, Okunaklı, 16:9 Orantılı) ---- */
html.ck.ckg main#hub-main-arena { padding: 24px 28px !important; max-width: 1440px !important; margin: 0 auto !important; }
html.ck.ckg #hub-global-hero { margin-bottom: 24px !important; padding: 24px !important; border-radius: var(--ck-radius-xl) !important; }
html.ck.ckg #hub-student-tasks-section { margin-bottom: 24px !important; padding: 20px !important; }

/* İçerik kartları (.ck-card görünümü; 16:9 oran, ferah başlıklar ve dokunulabilir butonlar) */
html.ck.ckg .arcade-card {
  border-radius: var(--ck-radius-lg) !important; box-shadow: var(--ck-shadow-sm) !important;
  border: 1px solid var(--ck-line) !important; background: var(--ck-surface) !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
html.ck.ckg .arcade-card:hover { box-shadow: var(--ck-shadow-md) !important; border-color: #B8D2FF !important; transform: translateY(-2px) !important; transition: all 0.2s ease !important; }
html.ck.ckg .arcade-card .relative { aspect-ratio: 16 / 9 !important; overflow: hidden !important; width: 100% !important; background: #0f172a !important; }
html.ck.ckg .arcade-card img,
html.ck.ckg .arcade-card svg { object-fit: cover !important; width: 100% !important; height: 100% !important; }
html.ck.ckg .arcade-card h4 { font-size: 16px !important; line-height: 1.35 !important; font-weight: 700 !important; color: var(--ck-ink) !important; margin-bottom: 6px !important; }
html.ck.ckg .arcade-card p { font-size: 13px !important; color: var(--ck-ink-2) !important; line-height: 1.4 !important; }
html.ck.ckg .arcade-card button[onclick^="openCardById"] {
  border-radius: var(--ck-radius-md) !important; font-weight: 700 !important;
  font-size: 14px !important; min-height: 42px !important; padding: 8px 18px !important;
  background: var(--ck-action) !important; color: #fff !important; border: 0 !important;
  box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html.ck.ckg .arcade-card button[onclick^="openCardById"]:hover { background: var(--ck-action-hover) !important; }

/* Masaüstünde kesintisiz kart ızgarası (Yatay kesilme olmadan ferah düzen) */
@media (min-width: 1024px) {
  html.ck.ckg #desktop-cards-grid {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important; gap: 24px !important;
  }
  html.ck.ckg .showcase-shelf .snap-x {
    display: flex !important; gap: 20px !important; padding-bottom: 12px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important;
  }
  html.ck.ckg .showcase-shelf .arcade-card {
    flex: 0 0 280px !important; max-width: 320px !important;
  }
}

/* Üst çubuk kontrol ve rozet hiyerarşisi */
html.ck.ckg header.hub-topbar { padding: 0 24px !important; height: 68px !important; }
html.ck.ckg .mesa-topbar-badges { display: flex !important; align-items: center !important; gap: 10px !important; }
html.ck.ckg .mesa-topbar-badges span { border-radius: var(--ck-radius-full) !important; font-size: 12px !important; font-weight: 600 !important; padding: 4px 10px !important; }

/* Zeko Paneli: İçeriği örtmeyen köşeye kenetlenmiş düzen */
html.ck.ckg #mes-robot-narrator-widget,
html.ck.ckg .zeko-guide-widget {
  position: fixed !important; bottom: 24px !important; right: 24px !important; z-index: 70 !important; max-width: 320px !important;
}
html.ck.ckg .robot-speech-bubble,
html.ck.ckg #mes-narrator-bubble {
  box-shadow: var(--ck-shadow-lg) !important; border-radius: var(--ck-radius-lg) !important; border: 1px solid var(--ck-line) !important;
  background: var(--ck-surface) !important; color: var(--ck-ink) !important;
}
html.ck.ckg .robot-speech-bubble[style*="opacity: 0"],
html.ck.ckg #mes-narrator-bubble[style*="opacity: 0"] {
  pointer-events: none !important;
}

/* ---- Zeko ile Ara (Gemini .ck-zeko-dock: tek mavi eylem) ---- */
html.ck.ckg #zeko-arama-btn { background: var(--ck-action) !important; color: #fff !important; box-shadow: none !important; border-radius: var(--ck-radius-md) !important; }
html.ck.ckg #zeko-arama-btn:hover { background: var(--ck-action-hover) !important; }

/* ---- Filtre durum çubuğu, özellik çipleri (.ck-active-filters-bar / .ck-chip) ---- */
html.ck.ckg #filter-status-bar { background: #F1F5F9 !important; border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius-md) !important; }
html.ck.ckg #feature-filter-bar .feature-chip {
  border-radius: var(--ck-radius-full) !important; border: 1px solid var(--ck-line) !important; background: var(--ck-surface) !important; color: var(--ck-ink) !important; box-shadow: none !important;
}
html.ck.ckg #feature-filter-bar .feature-chip[aria-pressed="true"] { background: var(--ck-soft) !important; color: var(--ck-action-text) !important; border-color: #CFE0FF !important; }

/* ---- Mobil alt gezinti (.ck-mobile-bottom-nav görünümü; 5 sekme + Diğer aynı kalır) ---- */
html.ck.ckg .hub-mobile-tab { color: var(--ck-ink-2) !important; font-size: 10px; font-weight: 600; }
html.ck.ckg .hub-mobile-tab.mesa-tab-active { color: var(--ck-action-text) !important; font-weight: 700; }
html.ck.ckg nav:has(> .hub-mobile-tab) { border-top: 1px solid var(--ck-line) !important; box-shadow: none !important; }
html.ck.ckg #mobile-filtre-hap { border-color: #CFE0FF !important; color: var(--ck-action-text) !important; box-shadow: var(--ck-shadow-md) !important; }

/* ---- İçerik penceresi hata kutusu (JS satır içi stil verir; Gemini durum kartı .ck-state-error görünümü) ---- */
html.ck.ckg #game-modal-yukleme-uyari {
  background: var(--ck-surface) !important; color: var(--ck-ink) !important; border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-radius-lg) !important; box-shadow: var(--ck-shadow-lg) !important;
}
html.ck.ckg #game-modal-yukleme-uyari[data-hata] { border-color: var(--ck-bad-border) !important; }
html.ck.ckg #game-modal-yukleme-uyari[data-hata] > div:first-child { color: var(--ck-bad-ink) !important; }
html.ck.ckg #game-modal-yeniden-dene { background: var(--ck-action) !important; }
html.ck.ckg #game-modal-kataloga-don,
html.ck.ckg #game-modal-yeni-sekme { background: var(--ck-surface) !important; color: var(--ck-ink) !important; border: 1px solid var(--ck-line) !important; }

/* ---- Akıllı tahta: büyük dokunmatik ekranda (ya da html.ck-board-mode) 52 px hedefler (Gemini .ck-board-mode) ---- */
@media (pointer: coarse) and (min-width: 1280px) {
  html.ck.ckg .hub-tab-btn { min-height: 52px; font-size: 16px; }
  html.ck.ckg .arcade-card button[onclick^="openCardById"],
  html.ck.ckg #hub-student-assignments-list button,
  html.ck.ckg #hub-global-hero button { min-height: 52px !important; }
  html.ck.ckg #hub-header-filtre select,
  html.ck.ckg #hub-header-filtre input { min-height: 48px !important; font-size: 15px !important; }
}
html.ck.ckg.ck-board-mode .hub-tab-btn { min-height: 52px; font-size: 16px; }
html.ck.ckg.ck-board-mode .arcade-card button[onclick^="openCardById"],
html.ck.ckg.ck-board-mode #hub-student-assignments-list button,
html.ck.ckg.ck-board-mode #hub-global-hero button { min-height: 52px !important; }

/* ---- Erişilebilirlik ---- */
html.ck.ckg .hub-tab-btn:focus-visible,
html.ck.ckg .hub-mobile-tab:focus-visible,
html.ck.ckg .arcade-card button:focus-visible,
html.ck.ckg #hub-student-assignments-list button:focus-visible { outline: 3px solid var(--ck-action) !important; outline-offset: 2px !important; }
@media (prefers-reduced-motion: reduce) {
  html.ck.ckg .arcade-card, html.ck.ckg .arcade-card * { transition: none !important; }
}