/* zeka-oyunlari — Ada Cam eşlemesi (D116). Yalnız html[data-tema="ada"].canli altında; v2 zeka-oyunlari.css değişmez.
   Dört ders paketi sayfası (robot-atolyesi, zeka-oyunlari, dijital-guvenlik, medya-okuryazarligi) aynı kuralları paylaşır:
   renk = bant/tema (sayfanın --zo-renk değişkeni), yalnız ince ray, yumuşak zemin ve karo tonunda; metin hep koyu. */

/* ---- Kahraman: kalın alt çizgi yok; başlık Nunito 900; görsel cam çerçevede ---- */
html[data-tema="ada"].canli .zo-hero { border-bottom: 0; }
html[data-tema="ada"].canli .zo-hero__text h1 { font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.02em; color: var(--ac-metin); text-wrap: balance; }
html[data-tema="ada"].canli :is(.zo-hero__lead, .zo-ust, .zo-hero__not) { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .zo-hero__adimlar li {
  border: 1px solid rgba(255,255,255,.95); color: var(--ac-metin);
  background: color-mix(in srgb, var(--zo-adim, #7B5CFF) 20%, rgba(255,255,255,.82));
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 4px 12px -8px rgba(var(--ac-golge-r), .35);
}
html[data-tema="ada"].canli .zo-sahne {
  background: linear-gradient(160deg, color-mix(in srgb, var(--zo-renk) 12%, #FFFFFF), rgba(255,255,255,.7));
  border: 1px solid var(--ac-kenar); border-radius: 28px;
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge-ust), inset 0 1px 0 #FFFFFF;
}
/* İlerleme: ince ray; girişsiz ziyaretçide (kilit uyarısı varken) boş çubuk gösterilmez */
html[data-tema="ada"].canli .zo-hero__ilerleme .v2-progress { height: 8px; }
html[data-tema="ada"].canli body:has(.v2-notice--lock) .zo-hero__ilerleme:has([aria-valuenow="0"]) { display: none; }

/* ---- Üst uyarı: tek ince cam şerit (sayfadaki ikinci kilit notu bunun altında sade kalır) ---- */
html[data-tema="ada"].canli .zo-ust-not .v2-notice {
  min-height: 0; padding: 10px 16px; border-radius: 16px; font-size: var(--v2-text-sm);
  background: rgba(255,255,255,.62); box-shadow: 0 0 0 1px var(--ac-cizgi);
}
html[data-tema="ada"].canli .zo-ust-not .v2-notice > .v2-icon { width: 20px; height: 20px; color: var(--ac-metin-2); }

/* ---- Bant seçici: cam sekme, sol renk rayı ince degrade; seçili = lavanta → mavi ---- */
html[data-tema="ada"].canli .zo-secici { gap: 12px; }
html[data-tema="ada"].canli .zo-bant-btn {
  min-height: 68px; padding-left: 26px; border: 1px solid var(--ac-kenar); border-radius: 20px; outline: 0;
  background: var(--ac-cam); color: var(--ac-metin);
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge), inset 0 1px 0 #FFFFFF;
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
  transition: transform .25s var(--ac-ease), box-shadow .25s var(--ac-ease), background-color .2s;
}
html[data-tema="ada"].canli .zo-bant-btn::before {
  left: 11px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--zo-renk), color-mix(in srgb, var(--zo-renk) 25%, transparent));
}
html[data-tema="ada"].canli .zo-bant-btn:hover { background: rgba(255,255,255,.94); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge-ust); }
html[data-tema="ada"].canli .zo-bant-btn:active { transform: translateY(0); }
html[data-tema="ada"].canli .zo-bant-btn__ad { font-family: var(--ac-font-baslik); font-weight: 900; }
html[data-tema="ada"].canli .zo-bant-btn__alt { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .zo-bant-btn[aria-pressed="true"] {
  color: #FFFFFF; border-color: transparent; outline: 0; background: var(--ac-birincil);
  box-shadow: 0 16px 32px -14px rgba(91,72,255,.75), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-tema="ada"].canli .zo-bant-btn[aria-pressed="true"] .zo-bant-btn__alt { color: #FFFFFF; opacity: .95; }
html[data-tema="ada"].canli .zo-bant-btn[aria-pressed="true"]::before { background: rgba(255,255,255,.75); }
html[data-tema="ada"].canli .zo-bant-btn:focus-visible { outline: none; box-shadow: var(--ac-odak), var(--ac-golge-ust); }

/* ---- Bant özet kartı + sayı kutuları ---- */
html[data-tema="ada"].canli .zo-kbas {
  position: relative; isolation: isolate; padding: 24px; border: 1px solid var(--ac-kenar); border-radius: 28px; background: var(--ac-cam);
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge), inset 0 1px 0 #FFFFFF;
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
}
html[data-tema="ada"].canli .zo-kbas::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--zo-renk) 16%, transparent), transparent 60%);
}
html[data-tema="ada"].canli .zo-kbas h2 { font-weight: 900; letter-spacing: -.02em; }
html[data-tema="ada"].canli .zo-kbas__kisa { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .zo-olgu { gap: 10px; }
html[data-tema="ada"].canli .zo-olgu li {
  padding: 10px 14px; border: 1px solid var(--ac-kenar); border-radius: 16px; background: rgba(255,255,255,.74);
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 6px 16px -12px rgba(var(--ac-golge-r), .45);
}
html[data-tema="ada"].canli .zo-olgu b { font-family: var(--ac-font-baslik); font-weight: 900; color: var(--ac-metin); }
html[data-tema="ada"].canli .zo-olgu span { color: var(--ac-metin-2); }

/* ---- Tema başlıkları: kalın sol şerit → ince degrade ray (renk = tema) ---- */
html[data-tema="ada"].canli .zo-tema { position: relative; border-left: 0; padding-left: 20px; }
html[data-tema="ada"].canli .zo-tema::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--zo-renk) 0%, color-mix(in srgb, var(--zo-renk) 35%, transparent) 70%, transparent 100%);
}
html[data-tema="ada"].canli .zo-tema__bas h3 { font-weight: 900; letter-spacing: -.01em; }
html[data-tema="ada"].canli .zo-tema__bas p { color: var(--ac-metin-2); }

/* ---- Ünite kartları: cam kart, hafta etiketi kartın içinde hap ---- */
html[data-tema="ada"].canli .zo-uniteler { gap: 16px; }
/* Yetim kart yok: temadaki ünite sayısı kadar sütun (en çok 3), kartlar satırı doldurur */
@media (min-width: 640px) { html[data-tema="ada"].canli .zo-uniteler { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } }
html[data-tema="ada"].canli .zo-ukart {
  isolation: isolate; padding: 48px 16px 16px; border: 1px solid var(--ac-kenar); border-radius: 22px; background: var(--ac-cam); color: var(--ac-metin);
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge), inset 0 1px 0 #FFFFFF;
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
  transition: transform .3s var(--ac-ease), box-shadow .3s var(--ac-ease);
}
html[data-tema="ada"].canli .zo-ukart::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110% 80% at 0% 0%, color-mix(in srgb, var(--zo-renk) 11%, transparent), transparent 55%);
}
html[data-tema="ada"].canli .zo-ukart:hover {
  background: var(--ac-cam); transform: translateY(-4px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--zo-renk) 30%, transparent), var(--ac-golge-ust), inset 0 1px 0 #FFFFFF;
}
html[data-tema="ada"].canli .zo-ukart:active { transform: translateY(-1px) scale(.995); }
html[data-tema="ada"].canli .zo-ukart:focus-visible { outline: none; box-shadow: var(--ac-odak), var(--ac-golge-ust); }
html[data-tema="ada"].canli .zo-ukart__hafta {
  left: 14px; top: 14px; display: inline-flex; align-items: center; min-height: 26px; padding: 2px 11px; border: 0; border-radius: 999px;
  color: var(--ac-metin); font-family: var(--v2-font-body); font-weight: 800; letter-spacing: .01em;
  background: color-mix(in srgb, var(--zo-renk) 16%, rgba(255,255,255,.9));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zo-renk) 28%, transparent);
}
html[data-tema="ada"].canli .zo-ukart__ad { font-family: var(--ac-font-baslik); font-weight: 800; color: var(--ac-metin); }
html[data-tema="ada"].canli :is(.zo-ukart__no, .zo-ukart__saat) { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .zo-ukart__kavram { color: var(--ac-metin-2); }

/* ---- Görsel kutuları: çerçevesiz, tema renginde yumuşak karo ---- */
html[data-tema="ada"].canli .zo-gorsel {
  border: 0; border-radius: 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--zo-renk) 20%, #FFFFFF), color-mix(in srgb, var(--zo-renk) 6%, #FFFFFF));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 18px -12px color-mix(in srgb, var(--zo-renk) 70%, transparent);
}
html[data-tema="ada"].canli .zo-gorsel--tema { border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 10px 20px -12px color-mix(in srgb, var(--zo-renk) 80%, transparent); }
html[data-tema="ada"].canli .zo-gorsel--buyuk { border-radius: 24px; }

/* ---- Rozet / etiket hapları ---- */
html[data-tema="ada"].canli :is(.zo-rozet, .zo-etiket) { border: 1px solid rgba(91,72,200,.14); color: var(--ac-metin); }
html[data-tema="ada"].canli .zo-etiket { background: rgba(255,255,255,.82); }
html[data-tema="ada"].canli .zo-rozet--dijital { background: rgba(52,217,176,.16); border-color: rgba(11,110,102,.22); }
html[data-tema="ada"].canli .zo-rozet--kagit { background: rgba(255,154,31,.16); border-color: rgba(138,75,0,.2); }

/* ---- Bant hazır değil kutusu ---- */
html[data-tema="ada"].canli .zo-hazir {
  border: 1.5px dashed rgba(123,92,255,.35); border-radius: var(--ac-r); background: rgba(255,255,255,.6);
}

/* ---- Ünite görünümü ---- */
html[data-tema="ada"].canli :is(.zo-ubas, .zo-onot, .zo-eylem) {
  position: relative; isolation: isolate; border: 1px solid var(--ac-kenar); border-radius: 28px; background: var(--ac-cam);
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge), inset 0 1px 0 #FFFFFF;
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
}
html[data-tema="ada"].canli .zo-ubas::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--zo-renk) 16%, transparent), transparent 60%);
}
html[data-tema="ada"].canli :is(.zo-ubas h2, .zo-eylem__bas, .zo-blok > h3) { font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.015em; color: var(--ac-metin); }
html[data-tema="ada"].canli :is(.zo-hedefler li, .zo-dersi, .zo-adim__govde, .zo-onot__kutu, .zo-veli__kutu, .zo-kkart, .zo-oyun) {
  border: 1px solid var(--ac-kenar); background: rgba(255,255,255,.78);
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 6px 16px -12px rgba(var(--ac-golge-r), .4);
}
html[data-tema="ada"].canli :is(.zo-hedefler li, .zo-dersi, .zo-adim__govde, .zo-onot__kutu, .zo-veli__kutu, .zo-oyun) { border-radius: 18px; }
html[data-tema="ada"].canli .zo-hedefler li::before { border: 0; background: linear-gradient(140deg, color-mix(in srgb, var(--zo-renk) 60%, #FFFFFF), var(--zo-renk)); }
html[data-tema="ada"].canli .zo-bolum { background: color-mix(in srgb, var(--zo-renk) 8%, rgba(255,255,255,.7)); }
html[data-tema="ada"].canli .zo-adim::before { border-left-width: 3px; opacity: .45; }
html[data-tema="ada"].canli .zo-adim__ic {
  border: 0; color: #FFFFFF; background: linear-gradient(140deg, color-mix(in srgb, var(--zo-renk) 55%, #FFFFFF), var(--zo-renk));
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--zo-renk) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-tema="ada"].canli .zo-adim__ic .v2-icon { color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3); }
html[data-tema="ada"].canli .zo-oyun { background: rgba(255,255,255,.78); }
html[data-tema="ada"].canli .zo-kkart { border-radius: 16px; }
html[data-tema="ada"].canli .zo-kkart__simge { background: linear-gradient(150deg, rgba(255,210,74,.32), rgba(255,154,31,.14)); }
html[data-tema="ada"].canli .zo-cikis__harf { border-color: rgba(91,72,200,.3); }
html[data-tema="ada"].canli .zo-onot { background: linear-gradient(165deg, rgba(227,234,255,.9), rgba(255,255,255,.7)); }
html[data-tema="ada"].canli .zo-eylem { background: linear-gradient(165deg, rgba(255,246,222,.92), rgba(255,255,255,.72)); }
html[data-tema="ada"].canli .zo-eylem__bas { color: var(--ac-metin); }
html[data-tema="ada"].canli .zo-eylem__adim {
  border: 1px solid var(--ac-kenar); border-radius: 22px; color: var(--ac-metin);
  background: color-mix(in srgb, var(--zo-adim) 18%, rgba(255,255,255,.88));
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 8px 20px -14px rgba(var(--ac-golge-r), .45);
}
html[data-tema="ada"].canli .zo-eylem__ic {
  border: 0; background: linear-gradient(140deg, color-mix(in srgb, var(--zo-adim) 55%, #FFFFFF), var(--zo-adim));
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--zo-adim) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-tema="ada"].canli .zo-eylem__no { border: 0; color: var(--ac-metin); background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px var(--ac-cizgi); }
html[data-tema="ada"].canli .zo-eylem__ad { font-family: var(--ac-font-baslik); font-weight: 900; }
html[data-tema="ada"].canli .zo-eylem__dip { color: var(--ac-metin-2); }

/* ---- Hareket azaltma ve zayıf cihaz ---- */
@media (prefers-reduced-motion: reduce) {
  html[data-tema="ada"].canli :is(.zo-ukart, .zo-bant-btn) { transition: none; }
  html[data-tema="ada"].canli :is(.zo-ukart, .zo-bant-btn):hover { transform: none; }
}
html:is(.efekt-az, .a11y-calm)[data-tema="ada"].canli :is(.zo-ukart, .zo-bant-btn, .zo-kbas, .zo-ubas, .zo-onot, .zo-eylem) {
  -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; transition: none;
}

/* ---- MEB eşleme tablosu (açılır) ---- */
html[data-tema="ada"].canli .zo-meb {
  border: 1px solid var(--ac-kenar); border-radius: 20px; background: rgba(255,255,255,.68);
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 8px 20px -14px rgba(var(--ac-golge-r), .4);
}
html[data-tema="ada"].canli .zo-meb__tablo :is(th, td) { border-bottom-color: rgba(91,72,200,.12); }
html[data-tema="ada"].canli .zo-rozet--meb { background: rgba(255,210,74,.22); border-color: rgba(138,75,0,.22); }

/* ---- Zekâ Oyunları'na özel: hazırlık notu (özet kartındaki rozetin açıklaması → sade bilgi satırı), ilkeler ---- */
html[data-tema="ada"].canli .zo-hazirlik-not {
  border: 0; border-radius: 14px; padding: 10px 14px; color: var(--ac-metin-2);
  background: linear-gradient(90deg, rgba(255,210,74,.16), rgba(255,255,255,.5) 70%);
  box-shadow: inset 3px 0 0 rgba(255,154,31,.7);
}
html[data-tema="ada"].canli .zo-hazirlik-not .v2-icon { width: 18px; height: 18px; color: #8A4B00; }
html[data-tema="ada"].canli .zo-hazirlik-not b { color: var(--ac-metin); }
html[data-tema="ada"].canli .zo-rozet--yakinda { background: rgba(123,92,255,.10); border: 1px dashed rgba(91,72,200,.35); }
html[data-tema="ada"].canli .zo-ilke { border-top: 0; }
html[data-tema="ada"].canli .zo-ilke h2 { font-weight: 900; letter-spacing: -.02em; }
html[data-tema="ada"].canli .zo-ilke__izgara { gap: 20px; }
html[data-tema="ada"].canli .zo-ilke__kart {
  position: relative; isolation: isolate; padding: 22px 24px; border: 1px solid var(--ac-kenar); border-radius: var(--ac-r); background: var(--ac-cam);
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge), inset 0 1px 0 #FFFFFF;
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
}
html[data-tema="ada"].canli .zo-ilke__kart::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 70% at 0% 0%, var(--zo-ilke-renk, rgba(123,92,255,.14)), transparent 60%);
}
html[data-tema="ada"].canli .zo-rakip { --zo-ilke-renk: rgba(20,190,170,.16); }
html[data-tema="ada"].canli .zo-kagit-oneri { --zo-ilke-renk: rgba(255,154,31,.16); }
html[data-tema="ada"].canli .zo-ilke__kart h3 { font-weight: 900; }
html[data-tema="ada"].canli .zo-ilke__kart h3 .v2-icon {
  box-sizing: content-box; padding: 8px; border-radius: 12px; color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3);
  background: linear-gradient(140deg, #9B7BFF, #5B6CFF); box-shadow: 0 6px 14px -6px rgba(123,92,255,.75);
}
html[data-tema="ada"].canli .zo-rakip h3 .v2-icon { background: linear-gradient(140deg, #34D9B0, #14B8C8); box-shadow: 0 6px 14px -6px rgba(20,190,170,.8); }
html[data-tema="ada"].canli .zo-kagit-oneri h3 .v2-icon { background: linear-gradient(140deg, #FFB347, #FF7A3D); box-shadow: 0 6px 14px -6px rgba(255,130,60,.8); }
html[data-tema="ada"].canli .zo-neden__kutu {
  border: 1px solid var(--ac-kenar); border-radius: 18px; background: linear-gradient(165deg, rgba(255,241,199,.92), rgba(255,255,255,.72));
  box-shadow: 0 0 0 1px var(--ac-cizgi), 0 6px 16px -12px rgba(var(--ac-golge-r), .4);
}