/* Ana sayfa — Ada Cam eşlemesi (D116). Yalnız html[data-tema="ada"].canli altında; ?tema=yok / ?kabuk=eski aynen kalır.
   Kahraman (.hero, hero-parkur.css, heroParkur.js) bilerek DIŞARIDA: burada yalnız kahramanın altındaki bölümler.
   Bölüm bileşenleri (.sec .section-head .eyebrow .verb .step .stats .grade .facts .offer .contact) Nasıl çalışır ve
   Okullar için sayfalarıyla aynı; aynı kurallar nasil-calisir-ada.css ve okullar-ada.css'te de var (ortaklaştırma önerisi: ada-cam.css §2d).
   Renk anlamı: dört fiil = dört beceri ailesi; sınıf kartları = yaş bandı; "Okulda neler var" = ürün kapısı (data-renk). */

/* =================================================================== 1. Bölüm ritmi ve başlık hiyerarşisi */
html[data-tema="ada"].canli main > .sec { padding-block: clamp(56px, 4rem + 2vw, 96px); }
html[data-tema="ada"].canli main > .sec + .sec { padding-top: clamp(24px, 1rem + 2vw, 48px); }
html[data-tema="ada"].canli .section-head { gap: 12px; max-width: 780px; margin-bottom: clamp(24px, 1.2rem + 1vw, 36px); }
html[data-tema="ada"].canli .section-head h2 {
  font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.1rem); color: var(--ac-metin); text-wrap: balance;
}
html[data-tema="ada"].canli .section-head p { color: var(--ac-metin-2); font-size: var(--v2-text-lg); line-height: 1.55; max-width: 64ch; }

/* Göz etiketi kuralları site geneline taşındı: ada-cam.css §2b */

/* Bölüm altı bağlantı satırı */
html[data-tema="ada"].canli .curr-links { gap: 12px; margin-top: clamp(20px, 1rem + 1vw, 32px); }

/* =================================================================== 2. Biz kimiz: dört fiil (renk = beceri ailesi) */
html[data-tema="ada"].canli .verbs { gap: 20px; }
html[data-tema="ada"].canli .verbs > .verb:nth-child(1) { --ra: #FFD24A; --rb: #FF9A1F; --rr: 255, 170, 40; --ri: #8A4B00; }
html[data-tema="ada"].canli .verbs > .verb:nth-child(2) { --ra: #FF9A6B; --rb: #FF5C7A; --rr: 255, 110, 110; --ri: #B0302E; }
html[data-tema="ada"].canli .verbs > .verb:nth-child(3) { --ra: #34D9B0; --rb: #0E9F8A; --rr: 20, 190, 170; --ri: #0B6E66; }
html[data-tema="ada"].canli .verbs > .verb:nth-child(4) { --ra: #38BDF8; --rb: #3B6CFF; --rr: 56, 140, 255; --ri: #1D4FC4; }
html[data-tema="ada"].canli .verb {
  display: flex; flex-direction: column; align-items: flex-start; isolation: isolate; gap: 10px; padding: 22px 22px 20px; border: 1px solid var(--ac-kenar); border-radius: var(--ac-r);
  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);
}
html[data-tema="ada"].canli .verb::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 85% at 0% 0%, rgba(var(--rr, 123, 92, 255), .16), transparent 56%),
              radial-gradient(80% 60% at 100% 100%, rgba(var(--rr, 123, 92, 255), .07), transparent 60%);
}
html[data-tema="ada"].canli body.v2-page:not(.v2-game-page) .verbs > .verb .verb__ic {
  width: 52px; height: 52px; background: linear-gradient(140deg, var(--ra, #9B7BFF), var(--rb, #5B6CFF));
  box-shadow: 0 8px 18px -8px rgba(var(--rr, 123, 92, 255), .8), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.08);
}
html[data-tema="ada"].canli .verb h3 { font-family: var(--ac-font-baslik); font-weight: 900; font-size: 1.4rem; letter-spacing: -.01em; color: var(--ac-metin); }
html[data-tema="ada"].canli .verb p { color: var(--ac-metin-2); font-size: var(--v2-text-sm); line-height: 1.5; }
html[data-tema="ada"].canli .verb small {
  margin-top: auto; padding: 4px 10px; border-radius: var(--ac-r-pill);
  color: var(--ri, var(--ac-metin)); background: rgba(var(--rr, 123, 92, 255), .12); font-weight: 800;
}

/* Amacımız: el yazısı serbest cümle → cam alıntı kartı */
html[data-tema="ada"].canli .mission {
  position: relative; isolation: isolate; overflow: hidden; gap: 24px;
  margin-top: clamp(28px, 1.4rem + 1.5vw, 48px); padding: clamp(22px, 1rem + 1.5vw, 36px) clamp(22px, 1rem + 2vw, 44px);
  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 .mission::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 120% at 0% 50%, rgba(123,92,255,.16), transparent 60%),
              radial-gradient(50% 90% at 100% 100%, rgba(56,189,248,.12), transparent 60%);
}
html[data-tema="ada"].canli .mission svg.spark { width: 96px; height: 96px; }
html[data-tema="ada"].canli .mission blockquote {
  position: relative; max-width: 54ch; padding-left: 22px;
  font-family: var(--ac-font-baslik); font-weight: 800; letter-spacing: -.01em; line-height: 1.32; color: var(--ac-metin);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); text-wrap: balance;
}
html[data-tema="ada"].canli .mission blockquote::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 99px; background: var(--ac-birincil);
}
@media (min-width: 900px) { html[data-tema="ada"].canli .mission { justify-content: center; } }
@media (max-width: 899.98px) {
  html[data-tema="ada"].canli .mission { justify-items: start; }
  html[data-tema="ada"].canli .mission { gap: 12px; }
  html[data-tema="ada"].canli .mission svg.spark { width: 64px; height: 64px; }
}

/* =================================================================== 3. Yapay Zekâ Dedektifi: başlık solda, kart sağda (geniş ekran) */
@media (min-width: 1100px) {
  html[data-tema="ada"].canli .dedektif > .v2-container {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: center;
  }
  html[data-tema="ada"].canli .dedektif .section-head { margin-bottom: 0; }
  html[data-tema="ada"].canli .dedektif .dk-kart { max-width: none; }
}
html[data-tema="ada"].canli .dedektif .dk-kart { box-shadow: 0 0 0 1px var(--ac-cizgi), var(--ac-golge-ust), inset 0 1px 0 #FFFFFF; }
html[data-tema="ada"].canli .dedektif .dk-baslik h3 { font-family: var(--ac-font-baslik); font-weight: 900; }

/* =================================================================== 4. Öğrenme yöntemi: beş adım */
html[data-tema="ada"].canli .steps { gap: 16px; }
html[data-tema="ada"].canli .step {
  gap: 10px; padding: 20px 18px; border: 1px solid var(--ac-kenar); border-radius: 22px; 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 body.v2-page:not(.v2-game-page) .steps > .step::before {
  /* canli.css [data-tilt]::before (ışık parıltısı) adım numarasını silip görünmez yapıyordu → numara geri */
  content: counter(adim); position: relative; inset: auto; opacity: 1; transition: none;
  border: 0; background: linear-gradient(140deg, #9B7BFF, #4F6BFF); box-shadow: 0 6px 14px -6px rgba(91,72,255,.8); font-family: var(--ac-font-baslik); font-weight: 900; width: 40px; height: 40px; border-radius: 13px; color: #FFFFFF; font-size: 1.15rem; }
html[data-tema="ada"].canli .step b { font-family: var(--ac-font-baslik); font-weight: 900; font-size: 1.1rem; color: var(--ac-metin); }
html[data-tema="ada"].canli .step p { color: var(--ac-metin-2); }
/* dar ekranda numara solda, metin sağda: beş kart daha az yer kaplar */
@media (max-width: 899.98px) {
  html[data-tema="ada"].canli .step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px; }
  html[data-tema="ada"].canli body.v2-page:not(.v2-game-page) .steps > .step::before { grid-row: span 2; }
}

/* =================================================================== 5. Müfredat: tek cam sayı şeridi + dört sınıf kartı */
html[data-tema="ada"].canli .stats {
  gap: 0; padding: 6px; border: 1px solid var(--ac-kenar); border-radius: 26px; 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 .stats li {
  display: grid; align-content: start; gap: 6px; padding: 18px 20px; border: 0; border-radius: 20px;
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-tema="ada"].canli .stats li + li { border-radius: 0; box-shadow: inset 1px 0 0 rgba(91,72,200,.12); }
html[data-tema="ada"].canli .stats li:hover { background: rgba(255,255,255,.55); transform: none; }
html[data-tema="ada"].canli .stats b { font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.02em; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
html[data-tema="ada"].canli .stats span { color: var(--ac-metin-2); line-height: 1.4; }
@media (max-width: 899.98px) {
  html[data-tema="ada"].canli .stats li + li { box-shadow: none; }
  html[data-tema="ada"].canli .stats li:nth-child(even) { box-shadow: inset 1px 0 0 rgba(91,72,200,.12); }
  html[data-tema="ada"].canli .stats li:nth-child(n+3) { border-top: 1px solid rgba(91,72,200,.12); }
}

/* Sınıf kartları: renk = yaş bandı (v2 bant renkleri yumuşak ton olarak) */
html[data-tema="ada"].canli .grades { gap: 20px; }
html[data-tema="ada"].canli .grades > .grade:nth-child(1) { --ra: #FFD24A; --rb: #FFA51F; --rr: 255, 190, 40; --ri: #8A4B00; }
html[data-tema="ada"].canli .grades > .grade:nth-child(2) { --ra: #4ADE80; --rb: #0E9F6E; --rr: 29, 180, 106; --ri: #0C6B3F; }
html[data-tema="ada"].canli .grades > .grade:nth-child(3) { --ra: #38BDF8; --rb: #3B6CFF; --rr: 59, 108, 255; --ri: #1D4FC4; }
html[data-tema="ada"].canli .grades > .grade:nth-child(4) { --ra: #FF9A6B; --rb: #F0462E; --rr: 255, 91, 58; --ri: #B0302E; }
html[data-tema="ada"].canli .grade {
  isolation: isolate; gap: 6px; padding: 20px; border: 1px solid var(--ac-kenar); border-radius: var(--ac-r);
  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 .grade::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 85% at 0% 0%, rgba(var(--rr, 123, 92, 255), .2), transparent 58%),
              radial-gradient(80% 60% at 100% 100%, rgba(var(--rr, 123, 92, 255), .08), transparent 60%);
}
html[data-tema="ada"].canli .grade:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(var(--rr, 123, 92, 255), .25), var(--ac-golge-ust), 0 20px 40px -24px rgba(var(--rr, 123, 92, 255), .7), inset 0 1px 0 #FFFFFF;
}
html[data-tema="ada"].canli .grade:active { transform: translateY(-1px) scale(.995); }
html[data-tema="ada"].canli .grade:focus-visible { outline: none; box-shadow: var(--ac-odak), var(--ac-golge-ust); }
html[data-tema="ada"].canli .grade__num { font-family: var(--ac-font-baslik); font-weight: 900; letter-spacing: -.03em; color: var(--ac-metin); }
html[data-tema="ada"].canli .grade__num small { margin-top: 6px; letter-spacing: .01em; color: var(--ac-metin-2); }
html[data-tema="ada"].canli .grade__ic {
  width: 48px; height: 48px; border: 0; border-radius: 15px; background: linear-gradient(140deg, var(--ra), var(--rb));
  box-shadow: 0 8px 18px -8px rgba(var(--rr), .8), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.08);
}
html[data-tema="ada"].canli .grade__ic .v2-icon { color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3); }
/* sarı bant: beyaz ikon yetersiz kontrast → koyu ikon */
html[data-tema="ada"].canli .grades > .grade:nth-child(1) .grade__ic .v2-icon { color: #5A3300; --v2-icon-fill: rgba(255,255,255,.45); }
html[data-tema="ada"].canli .grade__age {
  justify-self: start; padding: 3px 10px; border-radius: var(--ac-r-pill); font-family: var(--v2-font-body); font-weight: 800;
  color: var(--ri, var(--ac-metin)); background: rgba(var(--rr, 123, 92, 255), .13);
}
html[data-tema="ada"].canli .grade__title { font-family: var(--ac-font-baslik); font-weight: 900; font-size: 1.12rem; }
html[data-tema="ada"].canli .grade__desc { color: var(--ac-metin-2); }

/* =================================================================== 6. Okulda neler var: dört kapı kartı (index.html .ac-kapilar) */
html[data-tema="ada"].canli .ac-kapilar { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { html[data-tema="ada"].canli .ac-kapilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { html[data-tema="ada"].canli .ac-kapilar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-tema="ada"].canli .ac-kapilar > li { display: flex; min-width: 0; }
html[data-tema="ada"].canli .ac-kapi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding: 22px 22px 20px; text-decoration: none;
}
html[data-tema="ada"].canli .ac-kapi:hover { text-decoration: none; }
html[data-tema="ada"].canli .ac-kapi .ac-ikon { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 2px; }
/* sarı/güneş ailesi: koyu ikon */
html[data-tema="ada"].canli .ac-kapi[data-renk="gunes"] .ac-ikon .v2-icon { color: #5A3300; --v2-icon-fill: rgba(255,255,255,.45); }
html[data-tema="ada"].canli .ac-kapi h3 { margin: 0; font-family: var(--ac-font-baslik); font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; line-height: 1.15; color: var(--ac-metin); }
html[data-tema="ada"].canli .ac-kapi p { flex: 1 1 auto; margin: 0; color: var(--ac-metin-2); font-size: var(--v2-text-sm); line-height: 1.5; }
html[data-tema="ada"].canli .ac-kapi__alt {
  display: inline-block; max-width: 100%; margin-top: 4px; padding: 6px 12px; border-radius: var(--ac-r-pill);
  color: var(--ri); background: rgba(var(--rr), .12); font-weight: 800; font-size: var(--v2-text-sm); line-height: 1.25;
}
html[data-tema="ada"].canli .ac-kapi__alt b { font-family: var(--ac-font-baslik); font-weight: 900; font-size: 1.05em; }
html[data-tema="ada"].canli .ac-kapi__alt::after { content: "→"; display: inline-block; margin-left: 6px; font-weight: 900; transition: transform .25s var(--ac-ease); }
html[data-tema="ada"].canli .ac-kapi:hover .ac-kapi__alt::after { transform: translateX(3px); }

/* (Okullar için sayfasıyla ortak) paydaş kartları — ana sayfada artık yok, eski önbellek için zararsız */
html[data-tema="ada"].canli .role h3 { font-family: var(--ac-font-baslik); font-weight: 900; }

/* =================================================================== 7. Güvenlik: dört madde cam kart */
html[data-tema="ada"].canli .facts { gap: 18px; }
@media (min-width: 768px) { html[data-tema="ada"].canli .facts { gap: 18px 20px; } }
html[data-tema="ada"].canli .facts li {
  gap: 16px; padding: 20px 22px; border: 1px solid var(--ac-kenar); border-radius: 22px; 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 body.v2-page .facts li > span { width: 48px; height: 48px; }
html[data-tema="ada"].canli .facts b { font-family: var(--ac-font-baslik); font-weight: 900; font-size: 1.08rem; margin-bottom: 4px; color: var(--ac-metin); }
html[data-tema="ada"].canli .facts p { color: var(--ac-metin-2); line-height: 1.5; }

/* =================================================================== 8. Okullar için: kurulum listesi (cam panel) + İletişim kartı */
html[data-tema="ada"].canli .school { gap: 24px; }
@media (min-width: 960px) { html[data-tema="ada"].canli .school { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: stretch; } }
html[data-tema="ada"].canli .offer {
  gap: 0; padding: 8px 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 .offer li { grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 16px 0; }
html[data-tema="ada"].canli .offer li > .v2-icon {
  width: 44px; height: 44px; padding: 10px; border-radius: 14px; color: #FFFFFF; --v2-icon-fill: rgba(255,255,255,.3);
  background: linear-gradient(140deg, #9B7BFF, #5B6CFF); box-shadow: 0 8px 18px -8px rgba(123,92,255,.75), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-tema="ada"].canli .offer b { font-family: var(--ac-font-baslik); font-weight: 900; font-size: 1.05rem; color: var(--ac-metin); }
html[data-tema="ada"].canli .offer p { color: var(--ac-metin-2); line-height: 1.5; }

html[data-tema="ada"].canli .contact {
  isolation: isolate; overflow: hidden; align-content: center; gap: 14px; padding: clamp(22px, 1rem + 1.5vw, 32px);
}
html[data-tema="ada"].canli .contact::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 80% at 100% 0%, rgba(255,170,40,.18), transparent 58%),
              radial-gradient(90% 70% at 0% 100%, rgba(123,92,255,.14), transparent 60%);
}
html[data-tema="ada"].canli .contact h3 { font-family: var(--ac-font-baslik); font-weight: 900; font-size: 1.5rem; letter-spacing: -.01em; color: var(--ac-metin); }
html[data-tema="ada"].canli .contact > p { color: var(--ac-metin-2); line-height: 1.55; margin-bottom: 4px; }
html[data-tema="ada"].canli .contact > .v2-btn { width: 100%; justify-content: center; min-height: 52px; margin: 0; }

/* =================================================================== 9. Mobil */
@media (max-width: 599.98px) {
  html[data-tema="ada"].canli .verb, html[data-tema="ada"].canli .facts li { padding: 18px; }
  html[data-tema="ada"].canli .offer { padding: 4px 18px; }
  html[data-tema="ada"].canli .stats li { padding: 14px; }
  html[data-tema="ada"].canli .curr-links .v2-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}

/* =================================================================== 9b. Mobil düzen (D126): alt alta uzayan kartlar yatay kaydırmalı şeride döner
   Dört beceri, beş adım, "Okulda neler var" ve güvenlik maddeleri tek satırda kaydırılır (sonraki kart kenardan görünür); sayfa kısalır,
   bölüm başlıkları küçülür, güven satırı yan yana dizilir. Kaydırma şeridi sayfayı yatay kaydırmaz (kap taşmayı keser). */
@media (max-width: 767.98px) {
  html[data-tema="ada"].canli .sec { padding-block: 26px; }
  html[data-tema="ada"].canli .section-head h2 { font-size: 1.4rem; line-height: 1.15; }
  html[data-tema="ada"].canli .section-head p { font-size: .98rem; line-height: 1.5; }
  /* Kahraman (D126, sahip: "ilk görülen yer, sıkışık olmasın"): metin ilk ekranı doldurur — büyük başlık, rahat satır aralığı, iri düğmeler;
     oyun kartı kaydırınca altta gelir. Üst çubuk ve alt çubuk payı düşülür. */
  html[data-tema="ada"].canli .hero__in { padding-block: 24px 40px; gap: 32px; }
  html[data-tema="ada"].canli .hero__text { gap: 24px; align-content: center; min-height: calc(100svh - 170px); }
  html[data-tema="ada"].canli body .hero h1.hero-baslik, html[data-tema="ada"].canli .hero h1 { font-size: clamp(2.15rem, 9.6vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; }
  html[data-tema="ada"].canli .hero__lead { font-size: 1.1rem; line-height: 1.6; max-width: none; }
  html[data-tema="ada"].canli .hero__actions { gap: 14px; margin-top: 8px; }
  html[data-tema="ada"].canli .hero__actions .v2-btn { min-height: 60px; font-size: 1.1rem; }
  html[data-tema="ada"].canli .hero__trust { display: flex; flex-wrap: wrap; gap: 12px 18px; font-size: .92rem; margin-top: 10px; }
  html[data-tema="ada"].canli :is(#biz .steps, #kimler .ac-kapilar, #guven .facts) {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--v2-gutter, 16px)); padding: 4px var(--v2-gutter, 16px) 14px; scroll-padding-inline: var(--v2-gutter, 16px);
  }
  html[data-tema="ada"].canli :is(#biz .steps, #kimler .ac-kapilar, #guven .facts)::-webkit-scrollbar { display: none; }
  html[data-tema="ada"].canli :is(#biz .steps, #kimler .ac-kapilar, #guven .facts) > li { flex: 0 0 min(80%, 300px); scroll-snap-align: start; }
  html[data-tema="ada"].canli .mission { padding: 16px 18px; gap: 12px; }
  html[data-tema="ada"].canli .mission blockquote { font-size: 1.1rem; line-height: 1.4; }
  html[data-tema="ada"].canli .mission .spark { width: 56px; height: 56px; }
  html[data-tema="ada"].canli .curr-links { flex-direction: column; align-items: stretch; }
}

/* =================================================================== 10. Hareket azaltma ve zayıf cihaz */
@media (prefers-reduced-motion: reduce) {
  html[data-tema="ada"].canli .grade, html[data-tema="ada"].canli .ac-kapi__alt::after { transition: none; }
  html[data-tema="ada"].canli .grade:hover, html[data-tema="ada"].canli .ac-kapi:hover .ac-kapi__alt::after { transform: none; }
}
html:is(.efekt-az, .a11y-calm)[data-tema="ada"].canli :is(.verb, .mission, .step, .stats, .grade, .facts li, .offer, .contact, .eyebrow) {
  -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; transition: none;
}

/* =================================================================== 11. Sahip revizyonu (belge "Piksir.docx", 2026-10-26)
   Kahraman düğmesi mor · birleşik "Her Oyun, Yeni Bir Öğrenme Fırsatı" bölümü (amaç kartı üstte, dört adım) · sınıf ve ürün kartlarında
   3B illüstrasyon (assets/anasayfa/*.webp; sahibin ürettiği görsellerden kırpıldı) · daha açık zemin + mor-pembe bulut/dalga deseni */
html[data-tema="ada"].canli .hero .hero__actions .v2-btn--primary {
  color: #FFFFFF; background: var(--ac-birincil);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(20,10,90,.18) inset, 0 12px 26px -8px rgba(91,72,255,.75), 0 0 0 1px rgba(255,255,255,.4);
}
html[data-tema="ada"].canli .hero .hero__actions .v2-btn--primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(20,10,90,.18) inset, 0 18px 34px -8px rgba(91,72,255,.95), 0 0 0 1px rgba(255,255,255,.5);
}
html[data-tema="ada"].canli .hero .hero__actions .v2-btn--primary .v2-icon { color: #FFFFFF; }

/* Birleşik bölüm: amaç kartı başlığın hemen altında, dört adım onun altında */
html[data-tema="ada"].canli #biz .mission { margin: 0 0 clamp(32px, 1.4rem + 1.6vw, 52px); }
@media (min-width: 900px) { html[data-tema="ada"].canli #biz .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Sınıf kartları: 3B illüstrasyonlu; ikon ve yaş yazısı yok */
html[data-tema="ada"].canli .grades > .grade {
  min-height: 330px; padding: 22px 22px 150px; background: var(--sanat) right bottom / cover no-repeat, var(--ac-cam);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-tema="ada"].canli .grades > .grade::after { display: none; }
html[data-tema="ada"].canli .grades > .grade:nth-child(1) { --sanat: url("../../../assets/anasayfa/sinif-12.webp"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(2) { --sanat: url("../../../assets/anasayfa/sinif-34.webp"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(3) { --sanat: url("../../../assets/anasayfa/sinif-56.webp"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(4) { --sanat: url("../../../assets/anasayfa/sinif-78.webp"); }
@media (max-width: 599.98px) { html[data-tema="ada"].canli .grades > .grade { min-height: 290px; padding: 18px 16px 124px; } }

/* Oyun / Ders / Atölye / Proje kartları: uzun illüstrasyonlu; ikon karosu yok, sayı hapı metnin hemen altında, görsel altta */
html[data-tema="ada"].canli .ac-kapilar > li > .ac-kapi {
  min-height: 410px; padding: 24px 22px; background: var(--sanat) right bottom / cover no-repeat, var(--ac-cam);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-tema="ada"].canli .ac-kapilar > li > .ac-kapi::after { display: none; }
html[data-tema="ada"].canli .ac-kapilar > li > .ac-kapi p { flex: 0 0 auto; }
html[data-tema="ada"].canli .ac-kapilar > li:nth-child(1) > .ac-kapi { --sanat: url("../../../assets/anasayfa/oyunlar.webp?v=2"); }
html[data-tema="ada"].canli .ac-kapilar > li:nth-child(2) > .ac-kapi { --sanat: url("../../../assets/anasayfa/dersler.webp?v=2"); }
html[data-tema="ada"].canli .ac-kapilar > li:nth-child(3) > .ac-kapi { --sanat: url("../../../assets/anasayfa/atolye.webp?v=2"); }
html[data-tema="ada"].canli .ac-kapilar > li:nth-child(4) > .ac-kapi { --sanat: url("../../../assets/anasayfa/proje.webp?v=2"); }

/* Zemin: iki ton daha açık + hafif mor-pembe bulut/dalga deseni (düz renk yerine) */
html[data-tema="ada"].canli { background-color: #FBF9FF; }
/* D161 (sahip: "daha sade … tekrar eden büyük bulutlar … bulutu tamamlama sadece kıvrımlar"): dalga + dolu bulut deseni yerine yalnız büyük bulut kıvrımları */
html[data-tema="ada"].canli body.v2-page:not(.v2-game-page) { background: url("../../../assets/anasayfa/desen-kivrim.svg") center top / 960px auto repeat; }
@media (max-width: 599.98px) { html[data-tema="ada"].canli body.v2-page:not(.v2-game-page) { background-size: 640px auto; } }
/* desen durağan olduğu için Sakin mod / efekt-az'da da kalır (hareket yok) */

/* Ana sayfa "Her Oyun, Yeni Bir Öğrenme Fırsatı" kartları (2026-10-27 sahip): adım numarası yok; kart başlık + metin */
html[data-tema="ada"].canli body.v2-page:not(.v2-game-page) #biz .steps > .step::before { content: none; display: none; }
@media (max-width: 899.98px) { html[data-tema="ada"].canli #biz .step { grid-template-columns: minmax(0, 1fr); } }

/* Kahraman sahnesi (D170): giriş ekranının "Devre Bahçesi" sahnesi (okul-giris-sahne.js) parkur kartının yerinde. Yalnız süs; dar ekranda gizli,
   metin ilk ekranı doldurur. Sabit görünüm (WebGL yok / hareket azaltma / zayıf cihaz): Rota resmi. */
.hero__sahne { display: none; }
@media (min-width: 960px) {
  .hero__sahne { display: block; position: relative; width: 100%; min-height: clamp(420px, calc(100svh - 190px), 680px); }
  .hero__sahne > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero__sahne.okul-giris__sahne--sabit { display: grid; place-items: center; }
  .hero__sahne .okul-giris__resim { width: min(420px, 80%); height: auto; filter: drop-shadow(0 28px 30px rgba(60,40,140,.22)); }
}
/* D181 (sahip: telefonda da robot + bahçe): dar ekranda 3B yok; metnin altında sahnenin durağan görüntüsü (assets/maskot/rota-bahce.webp) */
@media (max-width: 959.98px) {
  .hero__sahne.okul-giris__sahne--sabit { display: grid; place-items: center; margin-top: -8px; }
  .hero__sahne .okul-giris__resim--bahce { width: min(300px, 74%); height: auto; filter: drop-shadow(0 22px 24px rgba(60,40,140,.2)); }
}
@media print { .hero__sahne { display: none !important; } }

/* Açık mor şerit (2026-10-28, sahip: "yaşa uygun yol / güven bölümlerinin arkasındaki şerit rengini beğendim, açık mor ekleyelim"):
   .sec--tint bölümleri (#mufredat, #guven) tam genişlikte açık mor bant; üst boşluk bantla birlikte normale döner. */
html[data-tema="ada"].canli main > .sec--tint {
  background: linear-gradient(180deg, rgba(228,218,255,.78), rgba(236,228,255,.78));
  border-block: 1px solid rgba(139,111,255,.14);
  padding-top: clamp(56px, 4rem + 2vw, 96px);
}
html[data-tema="ada"].canli main > .sec--tint + .sec { padding-top: clamp(56px, 4rem + 2vw, 96px); }

/* ================================================================ Sınıf kartları: sınıf robotları (2026-10-28 sahip tasarımı)
   Sağ altta o sınıfın robotu (assets/anasayfa/sinif-robot-*.webp, Higgsfield GPT Image 2.5; KAYNAKLAR §35). Görselin zemini neredeyse beyaz →
   multiply ile kartın rengine karışır. Büyük kalın sayı + iri "sınıf" etiketi. */
html[data-tema="ada"].canli .grades > .grade {
  background: var(--sanat) right 8px bottom 6px / auto 62% no-repeat, var(--ac-cam);
}
html[data-tema="ada"].canli .grades > .grade:nth-child(1), html[data-tema="ada"].canli .grades > .grade[data-band="12"] { --sanat: url("../../../assets/anasayfa/sinif-robot-12.webp?v=3"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(2), html[data-tema="ada"].canli .grades > .grade[data-band="34"] { --sanat: url("../../../assets/anasayfa/sinif-robot-34.webp?v=3"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(3), html[data-tema="ada"].canli .grades > .grade[data-band="56"] { --sanat: url("../../../assets/anasayfa/sinif-robot-56.webp?v=3"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(4), html[data-tema="ada"].canli .grades > .grade[data-band="78"] { --sanat: url("../../../assets/anasayfa/sinif-robot-78.webp?v=3"); }
html[data-tema="ada"].canli .grades > .grade .grade__num { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; font-weight: 900; color: #15131F; }
html[data-tema="ada"].canli .grades > .grade .grade__num small { display: block; margin-top: 6px; font-size: 1.25rem; font-weight: 800; color: #15131F; text-transform: capitalize; }

/* Orta bölüm "Her Oyun, Yeni Bir Öğrenme Fırsatı": kartlar büyür, aralarında ve altında üstünde boşluk açılır (2026-10-28 sahip) */
html[data-tema="ada"].canli #biz { padding-block: clamp(72px, 5rem + 3vw, 128px); }
html[data-tema="ada"].canli #biz .section-head, html[data-tema="ada"].canli #biz > .v2-container > h2 { margin-bottom: clamp(28px, 1.6rem + 1.4vw, 48px); }
html[data-tema="ada"].canli #biz .steps { gap: clamp(20px, 1rem + 1.2vw, 32px); }
html[data-tema="ada"].canli #biz .steps > .step { min-height: 240px; padding: 30px 28px; align-content: start; gap: 14px; }
html[data-tema="ada"].canli #biz .steps > .step b { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); line-height: 1.2; }
html[data-tema="ada"].canli #biz .steps > .step p { font-size: 1.04rem; line-height: 1.6; }
/* Ana sayfa sınıf kartları: metin üstte, robot altta (yazının üstüne binmez) */
html[data-tema="ada"].canli .grades > .grade { min-height: 430px; padding: 24px 22px 210px; background: var(--sanat) center bottom 8px / auto 200px no-repeat, var(--ac-cam); }
@media (max-width: 599.98px) { html[data-tema="ada"].canli .grades > .grade { min-height: 400px; padding-bottom: 190px; background-size: auto 180px; } }

/* Sayfanın beyaza çalan yerleri (2026-10-28 sahip: sınıf seçim tasarımındaki zemin ana sayfanın açık kısımlarına da yayılsın):
   açık lavanta → beyaz geçişi + yumuşak mor ışık lekeleri, tüm sayfa boyunca döşenir (şeritlerin ve kartların arkasında görünür). */
html[data-tema="ada"].canli {
  background-image:
    radial-gradient(48% 420px at 12% 220px, rgba(196,181,253,.28), transparent 70%),
    radial-gradient(44% 380px at 90% 640px, rgba(221,208,255,.34), transparent 70%),
    linear-gradient(180deg, #F2ECFF 0, #FAF7FF 520px, #F6F1FF 1100px, #FBF9FF 1700px);
  background-size: 100% 1700px; background-repeat: repeat-y;
}

/* Şerit ritmi (2026-10-28 sahip: "her section'da zıt renkler: mor, açık mor, mor, açık mor"): bölümler sırayla koyu lavanta / açık lavanta tam genişlik şerit.
   Önceki yalnız .sec--tint kuralının yerini alır. */
html[data-tema="ada"].canli main > .sec { border-block: 1px solid rgba(139,111,255,.12); padding-block: clamp(56px, 4rem + 2vw, 96px); }
html[data-tema="ada"].canli main > .sec:is(#biz, #mufredat, #guven) { background: linear-gradient(180deg, rgba(222,209,255,.9), rgba(230,220,255,.9)); }
html[data-tema="ada"].canli main > .sec:is(#dedektif, #kimler, #okullar) { background: linear-gradient(180deg, rgba(253,252,255,.9), rgba(255,254,255,.9)); }
html[data-tema="ada"].canli main > .sec + .sec { padding-top: clamp(56px, 4rem + 2vw, 96px); }
html[data-tema="ada"].canli #biz { padding-block: clamp(72px, 5rem + 3vw, 128px); }

/* Alt bölümlerde arka plan süsü (2026-10-28 sahip: "süzülen mor rüzgâr çizgileri aşağılarda da arka plan olsun; mor baloncuklar da aşağıda sağda solda, çok fazla olmasın"):
   kahramanın altından sayfa sonuna kadar, bölüm şeritlerinin ve kartların ARKASINDA: dikeyde döşenen ince mor rüzgâr çizgileri (ruzgar.svg) +
   kenarlarda 6 cam küre (üst kısımdaki kürelerle aynı dil). Şeritler biraz saydamlaştı ki süs şeritlerin arkasından da seçilsin. */
html[data-tema="ada"].canli main#icerik { position: relative; }
html[data-tema="ada"].canli main#icerik::before {
  content: ""; position: absolute; left: 0; right: 0; top: max(860px, 100svh); bottom: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 11px at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0)) calc(4% + 13px) calc(9% + 14px) / 35px 35px no-repeat,
    radial-gradient(circle 35px at 50% 50%, rgba(214,204,255,.85) 0, rgba(170,145,255,.62) 55%, rgba(123,92,255,.46) 88%, rgba(123,92,255,0) 100%) 4% 9% / 70px 70px no-repeat,
    radial-gradient(circle 18px at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0)) calc(94% + -20px) calc(19% + 22px) / 56px 56px no-repeat,
    radial-gradient(circle 56px at 50% 50%, rgba(214,204,255,.85) 0, rgba(170,145,255,.62) 55%, rgba(123,92,255,.46) 88%, rgba(123,92,255,0) 100%) 94% 19% / 112px 112px no-repeat,
    radial-gradient(circle 9px at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0)) calc(6% + 10px) calc(38% + 11px) / 27px 27px no-repeat,
    radial-gradient(circle 27px at 50% 50%, rgba(214,204,255,.85) 0, rgba(170,145,255,.62) 55%, rgba(123,92,255,.46) 88%, rgba(123,92,255,0) 100%) 6% 38% / 54px 54px no-repeat,
    radial-gradient(circle 13px at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0)) calc(95% + -15px) calc(52% + 17px) / 42px 42px no-repeat,
    radial-gradient(circle 42px at 50% 50%, rgba(214,204,255,.85) 0, rgba(170,145,255,.62) 55%, rgba(123,92,255,.46) 88%, rgba(123,92,255,0) 100%) 95% 52% / 84px 84px no-repeat,
    radial-gradient(circle 17px at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0)) calc(3% + 19px) calc(71% + 21px) / 52px 52px no-repeat,
    radial-gradient(circle 52px at 50% 50%, rgba(214,204,255,.85) 0, rgba(170,145,255,.62) 55%, rgba(123,92,255,.46) 88%, rgba(123,92,255,0) 100%) 3% 71% / 104px 104px no-repeat,
    radial-gradient(circle 10px at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0)) calc(93% + -11px) calc(86% + 12px) / 30px 30px no-repeat,
    radial-gradient(circle 30px at 50% 50%, rgba(214,204,255,.85) 0, rgba(170,145,255,.62) 55%, rgba(123,92,255,.46) 88%, rgba(123,92,255,0) 100%) 93% 86% / 60px 60px no-repeat,
    url("../../../assets/anasayfa/ruzgar.svg?v=2") center top / 100% auto repeat-y;
}
html[data-tema="ada"].canli main#icerik > .sec { position: relative; z-index: 1; }
html[data-tema="ada"].canli main > .sec:is(#biz, #mufredat, #guven) { background: linear-gradient(180deg, rgba(222,209,255,.62), rgba(230,220,255,.62)); }
html[data-tema="ada"].canli main > .sec:is(#dedektif, #kimler, #okullar) { background: linear-gradient(180deg, rgba(253,252,255,.82), rgba(255,254,255,.82)); }
@media (max-width: 760px) { html[data-tema="ada"].canli main#icerik::before { background-size: 100% auto; background-image: url("../../../assets/anasayfa/ruzgar.svg?v=2"); } }
@media print { html[data-tema="ada"].canli main#icerik::before { display: none; } }

/* Sınıf kartları: robot yerine sınıfa özel 3B nesne grubu (2026-10-28 sahip örneği): 1–2 yapboz + küp, 3–4 döngü/oynat/kod blokları,
   5–6 kod ekranlı dizüstü + konuşma balonu, 7–8 kalkan + büyüteç. Görseller sahibin tasarım görselinden kırpıldı (kenarları saydam);
   robotlu sürüm assets/anasayfa/sinif-robot-*.webp olarak duruyor. */
html[data-tema="ada"].canli .grades > .grade:nth-child(1), html[data-tema="ada"].canli .grades > .grade[data-band="12"] { --sanat: url("../../../assets/anasayfa/sinif-nesne-12.webp?v=3"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(2), html[data-tema="ada"].canli .grades > .grade[data-band="34"] { --sanat: url("../../../assets/anasayfa/sinif-nesne-34.webp?v=3"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(3), html[data-tema="ada"].canli .grades > .grade[data-band="56"] { --sanat: url("../../../assets/anasayfa/sinif-nesne-56.webp?v=3"); }
html[data-tema="ada"].canli .grades > .grade:nth-child(4), html[data-tema="ada"].canli .grades > .grade[data-band="78"] { --sanat: url("../../../assets/anasayfa/sinif-nesne-78.webp?v=3"); }
html[data-tema="ada"].canli .grades > .grade { background: var(--sanat) center bottom 18px / auto 190px no-repeat, var(--ac-cam); transition: transform .3s var(--ac-ease), box-shadow .3s var(--ac-ease), background-size .4s var(--ac-ease); }
html[data-tema="ada"].canli .grades > .grade:hover { background-size: auto 202px, auto; }
@media (max-width: 599.98px) { html[data-tema="ada"].canli .grades > .grade { background-size: auto 170px, auto; } }
@media (prefers-reduced-motion: reduce) { html[data-tema="ada"].canli .grades > .grade:hover { background-size: auto 190px, auto; } }

/* D189 (2026-11-02 sahip örneği): sınıf kartında "sınıf" sayının yanında (alt alta değil); altındaki başlıkla arada boşluk */
html[data-tema="ada"].canli .grades > .grade .grade__num { display: inline-flex; align-items: baseline; gap: .32em; }
html[data-tema="ada"].canli .grades > .grade .grade__num small { display: inline; margin-top: 0; }
html[data-tema="ada"].canli .grades > .grade .grade__top { margin-bottom: 10px; }

/* D189: Oyun / Ders / Atölye / Proje kartları — beyaz-lavanta cam kart, iri başlık, metin; altta ortada 3B nesne
   (assets/anasayfa/kapi-*.webp, Higgsfield GPT Image 2.5, sahibin örnek görselinden; beyaz zemin multiply ile kartın rengine karışır). Sayı hapı yok. */
html[data-tema="ada"].canli .ac-kapilar > li > .ac-kapi {
  min-height: 0; gap: 16px; padding: clamp(26px, 1.2rem + 1vw, 40px) clamp(22px, 1rem + .9vw, 34px) clamp(18px, 1rem + .5vw, 28px);
  border-radius: 28px; background: linear-gradient(180deg, #FFFFFF 0%, #F8F5FF 100%);
  box-shadow: 0 0 0 1px rgba(139,111,255,.12), 0 18px 40px -26px rgba(91,72,255,.45), inset 0 1px 0 #FFFFFF;
}
html[data-tema="ada"].canli .ac-kapilar > li > .ac-kapi h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; color: #15131F; }
html[data-tema="ada"].canli .ac-kapilar > li > .ac-kapi p { flex: 0 0 auto; font-size: clamp(1rem, .95rem + .15vw, 1.08rem); line-height: 1.6; color: #2A2640; }
html[data-tema="ada"].canli .ac-kapi__gorsel {
  display: block; align-self: center; width: min(82%, 260px); height: auto; object-fit: contain;
  max-height: 230px; margin-top: auto; padding-top: 12px; mix-blend-mode: multiply; transition: transform .35s var(--ac-ease);
}
html[data-tema="ada"].canli .ac-kapi:hover .ac-kapi__gorsel { transform: translateY(-4px) scale(1.03); }
@media (prefers-reduced-motion: reduce) { html[data-tema="ada"].canli .ac-kapi:hover .ac-kapi__gorsel { transform: none; } }
@media (max-width: 1099.98px) { html[data-tema="ada"].canli .ac-kapi__gorsel { max-height: 200px; } }