/* robot-atolyesi — Ada Cam eşlemesi (D116). Yalnız html[data-tema="ada"].canli altında; v2 robot-atolyesi.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 --ra-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 .ra-hero { border-bottom: 0; }
html[data-tema="ada"].canli .ra-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(.ra-hero__lead, .ra-ust) { color: var(--ac-metin-2); }
/* İlerleme: ince ray; girişsiz ziyaretçide (kilit uyarısı varken) boş çubuk gösterilmez */
html[data-tema="ada"].canli .ra-hero__ilerleme .v2-progress { height: 8px; }
html[data-tema="ada"].canli body:has(.v2-notice--lock) .ra-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 .ra-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 .ra-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 .ra-secici { gap: 12px; }
html[data-tema="ada"].canli .ra-kademe-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 .ra-kademe-btn::before {
  left: 11px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--ra-renk), color-mix(in srgb, var(--ra-renk) 25%, transparent));
}
html[data-tema="ada"].canli .ra-kademe-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 .ra-kademe-btn:active { transform: translateY(0); }
html[data-tema="ada"].canli .ra-kademe-btn__ad { font-family: var(--ac-font-baslik); font-weight: 900; }
html[data-tema="ada"].canli .ra-kademe-btn__alt { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ra-kademe-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 .ra-kademe-btn[aria-pressed="true"] .ra-kademe-btn__alt { color: #FFFFFF; opacity: .95; }
html[data-tema="ada"].canli .ra-kademe-btn[aria-pressed="true"]::before { background: rgba(255,255,255,.75); }
html[data-tema="ada"].canli .ra-kademe-btn:focus-visible { outline: none; box-shadow: var(--ac-odak), var(--ac-golge-ust); }

/* ---- Bant özet kartı + sayı kutuları ---- */
html[data-tema="ada"].canli .ra-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 .ra-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(--ra-renk) 16%, transparent), transparent 60%);
}
html[data-tema="ada"].canli .ra-kbas h2 { font-weight: 900; letter-spacing: -.02em; }
html[data-tema="ada"].canli .ra-kbas__kisa { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ra-olgu { gap: 10px; }
html[data-tema="ada"].canli .ra-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 .ra-olgu b { font-family: var(--ac-font-baslik); font-weight: 900; color: var(--ac-metin); }
html[data-tema="ada"].canli .ra-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 .ra-tema { position: relative; border-left: 0; padding-left: 20px; }
html[data-tema="ada"].canli .ra-tema::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--ra-renk) 0%, color-mix(in srgb, var(--ra-renk) 35%, transparent) 70%, transparent 100%);
}
html[data-tema="ada"].canli .ra-tema__bas h3 { font-weight: 900; letter-spacing: -.01em; }
html[data-tema="ada"].canli .ra-tema__bas p { color: var(--ac-metin-2); }

/* ---- Ünite kartları: cam kart, hafta etiketi kartın içinde hap ---- */
html[data-tema="ada"].canli .ra-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 .ra-uniteler { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } }
html[data-tema="ada"].canli .ra-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 .ra-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(--ra-renk) 11%, transparent), transparent 55%);
}
html[data-tema="ada"].canli .ra-ukart:hover {
  background: var(--ac-cam); transform: translateY(-4px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ra-renk) 30%, transparent), var(--ac-golge-ust), inset 0 1px 0 #FFFFFF;
}
html[data-tema="ada"].canli .ra-ukart:active { transform: translateY(-1px) scale(.995); }
html[data-tema="ada"].canli .ra-ukart:focus-visible { outline: none; box-shadow: var(--ac-odak), var(--ac-golge-ust); }
html[data-tema="ada"].canli .ra-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(--ra-renk) 16%, rgba(255,255,255,.9));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ra-renk) 28%, transparent);
}
html[data-tema="ada"].canli .ra-ukart__ad { font-family: var(--ac-font-baslik); font-weight: 800; color: var(--ac-metin); }
html[data-tema="ada"].canli :is(.ra-ukart__no, .ra-ukart__saat) { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ra-ukart__kavram { color: var(--ac-metin-2); }

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

/* ---- Rozet / etiket hapları ---- */
html[data-tema="ada"].canli :is(.ra-rozet, .ra-etiket) { border: 1px solid rgba(91,72,200,.14); color: var(--ac-metin); }
html[data-tema="ada"].canli .ra-etiket { background: rgba(255,255,255,.82); }
html[data-tema="ada"].canli .ra-rozet--dijital { background: rgba(52,217,176,.16); border-color: rgba(11,110,102,.22); }
html[data-tema="ada"].canli .ra-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 .ra-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(.ra-ubas, .ra-onot) {
  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 .ra-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(--ra-renk) 16%, transparent), transparent 60%);
}
html[data-tema="ada"].canli :is(.ra-hedefler li, .ra-dersi, .ra-adim__govde, .ra-onot__kutu, .ra-veli__kutu, .ra-kkart, .ra-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(.ra-hedefler li, .ra-dersi, .ra-adim__govde, .ra-onot__kutu, .ra-veli__kutu, .ra-oyun) { border-radius: 18px; }
html[data-tema="ada"].canli .ra-hedefler li::before { border: 0; background: linear-gradient(140deg, color-mix(in srgb, var(--ra-renk) 60%, #FFFFFF), var(--ra-renk)); }
html[data-tema="ada"].canli .ra-bolum { background: color-mix(in srgb, var(--ra-renk) 8%, rgba(255,255,255,.7)); }
html[data-tema="ada"].canli .ra-adim::before { border-left-width: 3px; opacity: .45; }
html[data-tema="ada"].canli .ra-adim__ic {
  border: 0; color: #FFFFFF; background: linear-gradient(140deg, color-mix(in srgb, var(--ra-renk) 55%, #FFFFFF), var(--ra-renk));
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--ra-renk) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-tema="ada"].canli .ra-adim__ic .v2-icon { color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3); }
html[data-tema="ada"].canli .ra-oyun { background: rgba(255,255,255,.78); }
html[data-tema="ada"].canli .ra-kkart { border-radius: 16px; }
html[data-tema="ada"].canli .ra-kkart__simge { background: linear-gradient(150deg, rgba(255,210,74,.32), rgba(255,154,31,.14)); }
html[data-tema="ada"].canli .ra-cikis__harf { border-color: rgba(91,72,200,.3); }
html[data-tema="ada"].canli .ra-onot { background: linear-gradient(165deg, rgba(227,234,255,.9), rgba(255,255,255,.7)); }

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

/* ---- Robot Atölyesi'ne özel: kahraman robot kutusu, tema numarası, isteğe bağlı bloklar ---- */
html[data-tema="ada"].canli .ra-hero__gorsel {
  border: 1px solid var(--ac-kenar); border-radius: 28px; background: linear-gradient(160deg, rgba(227,234,255,.92), rgba(255,255,255,.66));
  box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge-ust), inset 0 1px 0 #FFFFFF;
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
}
html[data-tema="ada"].canli .ra-tema__no {
  border: 0; border-radius: 15px; color: var(--ac-metin); font-family: var(--ac-font-baslik); font-weight: 900;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ra-renk) 26%, #FFFFFF), color-mix(in srgb, var(--ra-renk) 10%, #FFFFFF));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 18px -10px color-mix(in srgb, var(--ra-renk) 80%, transparent);
}
html[data-tema="ada"].canli :is(.ra-okul-temelli) {
  border: 0; border-radius: 14px; padding: 10px 14px; color: var(--ac-metin-2);
  background: linear-gradient(90deg, rgba(123,92,255,.10), rgba(255,255,255,.5) 70%); box-shadow: inset 3px 0 0 rgba(123,92,255,.55);
}
html[data-tema="ada"].canli :is(.ra-oturum, .ra-dersd, .ra-tablo-kap) {
  border: 1px solid var(--ac-kenar); border-radius: 18px; 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 .ra-dersd[open] > summary { border-bottom: 1px solid rgba(91,72,200,.12); background: color-mix(in srgb, var(--ra-renk) 10%, rgba(255,255,255,.7)); }
html[data-tema="ada"].canli .ra-oturum__no { border: 0; background: color-mix(in srgb, var(--ra-renk) 20%, #FFFFFF); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); }
html[data-tema="ada"].canli .ra-rubrik :is(th, td) { border-bottom-color: rgba(91,72,200,.12); }

/* ---- Görev haritası: cam duraklar, bant rengi yumuşak ---- */
html[data-tema="ada"].canli .ra-harita { border-top: 0; }
html[data-tema="ada"].canli :is(.ra-harita__bas h2, .ra-bolge__bas h3, .ra-durak__govde h4) { font-weight: 900; letter-spacing: -.015em; }
html[data-tema="ada"].canli .ra-harita__bas p, html[data-tema="ada"].canli .ra-bolge__bas p { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ra-bolge__ic {
  border: 0; border-radius: 20px; color: #FFFFFF;
  background: linear-gradient(140deg, color-mix(in srgb, var(--band) 60%, #FFFFFF), var(--band));
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--band) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-tema="ada"].canli .ra-bolge__ic .v2-icon { color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3); }
html[data-tema="ada"].canli .ra-yol::before { left: 19px; border-left-width: 3px; opacity: .45; }
html[data-tema="ada"].canli .ra-durak__nokta {
  border: 1px solid var(--ac-kenar); background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px var(--ac-cizgi), 0 6px 14px -8px rgba(var(--ac-golge-r), .5);
}
html[data-tema="ada"].canli .ra-durak.is-done .ra-durak__nokta { background: #DDF5E7; }
html[data-tema="ada"].canli .ra-durak.is-next .ra-durak__nokta { background: linear-gradient(140deg, #9B7BFF, #4F6BFF); }
html[data-tema="ada"].canli .ra-durak__kart {
  position: relative; isolation: isolate; 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 .ra-durak.is-next .ra-durak__kart { background: linear-gradient(165deg, color-mix(in srgb, var(--band) 14%, #FFFFFF), rgba(255,255,255,.74)); }
html[data-tema="ada"].canli .ra-durak.is-locked .ra-durak__kart { background: rgba(255,255,255,.6); }
html[data-tema="ada"].canli .ra-durak__tile {
  border: 0; border-radius: 22px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--band) 24%, #FFFFFF), color-mix(in srgb, var(--band) 8%, #FFFFFF));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 18px -12px color-mix(in srgb, var(--band) 80%, transparent);
}
html[data-tema="ada"].canli .ra-durak__govde > p { color: var(--ac-metin-2); }
html[data-tema="ada"].canli .ra-durak__sinif {
  border: 0; font-family: var(--v2-font-body); font-weight: 800; color: var(--ac-metin);
  background: color-mix(in srgb, var(--band) 16%, rgba(255,255,255,.9)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band) 30%, transparent);
}
html:is(.efekt-az, .a11y-calm)[data-tema="ada"].canli :is(.ra-durak__kart, .ra-hero__gorsel) { -webkit-backdrop-filter: none; backdrop-filter: none; }