/* =========================================================
   EĞİTİM SAYFALARI (robotik-kodlama, 3d-tasarim, ...)
   Ana sitenin style.css değişkenlerini kullanır.
   ========================================================= */
.egitim-sayfa main { overflow-x: clip; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* Giriş */
.eg-hero { padding: 170px 0 70px; position: relative; }
.eg-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 20%, rgba(255, 107, 53, .14), transparent 45%),
              radial-gradient(circle at 10% 90%, rgba(255, 183, 77, .08), transparent 40%);
}
.eg-hero .container { position: relative; }
.eg-yol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; color: var(--text-mute); margin-bottom: 28px; }
.eg-yol a { color: var(--text-mute); }
.eg-yol a:hover { color: var(--orange); }
.eg-yol b { color: var(--text-main); font-weight: 600; }
.eg-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.eg-hero h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.1; margin: 14px 0 18px; }
.eg-hero h1 span { color: var(--orange); }
.eg-lead { color: var(--text-mute); font-size: 1.08rem; line-height: 1.75; max-width: 600px; }
.eg-lead strong { color: var(--text-main); }
.eg-butonlar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.eg-ozet { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.eg-ozet li { padding: 14px 16px; border-radius: 16px; background: var(--navy-800); border: 1px solid var(--navy-line); }
.eg-ozet b { display: block; font-size: .95rem; color: var(--text-main); }
.eg-ozet small { color: var(--text-mute); font-size: .8rem; }
.eg-hero-gorsel { margin: 0; border-radius: 24px; overflow: hidden; border: 4px solid var(--orange); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: rotate(1.2deg); }
.eg-hero-gorsel img { display: block; width: 100%; height: auto; }
.eg-hero-gorsel figcaption { padding: 10px 16px; font-size: .85rem; font-weight: 600; color: var(--on-accent, #0a0f22); background: var(--orange); }

/* Koyu bant bölümler */
.eg-koyu { background: var(--navy-900); border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); }

/* Ortak rozet ve süre */
.eg-rozet { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); background: rgba(255, 107, 53, .12); border: 1px solid rgba(255, 107, 53, .3); }
.eg-rozet-altin { color: #b45309; background: #fde68a; border-color: #fcd34d; text-transform: none; letter-spacing: 0; }
.eg-sure { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--navy-line); font-weight: 600; font-size: .9rem; color: var(--orange-light); }
.eg-sure a { color: var(--orange-light); }
.eg-tag-link { text-decoration: none; border-color: var(--orange) !important; color: var(--orange) !important; }

/* Seviyeler */
.eg-seviyeler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.eg-seviye { display: flex; flex-direction: column; gap: 12px; }
.eg-seviye h3 { font-size: 1.15rem; }
.eg-seviye p { color: var(--text-mute); line-height: 1.65; font-size: .95rem; }

/* Sınıflar */
.eg-siniflar, .eg-projeler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.eg-sinif, .eg-proje { display: flex; flex-direction: column; gap: 10px; }
.eg-sinif p, .eg-proje p { color: var(--text-mute); line-height: 1.65; }
.eg-sinif p strong { color: var(--text-main); }
.eg-ikon { font-size: 1.8rem; }
.eg-vurgu { border-color: rgba(255, 138, 61, .55) !important; box-shadow: 0 0 40px rgba(255, 138, 61, .12); }

/* Adımlar */
.eg-adimlar { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: none; }
.eg-adimlar li { padding: 24px; border-radius: 20px; background: var(--navy-800); border: 1px solid var(--navy-line); }
.eg-adimlar b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--orange); color: var(--on-accent, #0a0f22); font-size: 1.1rem; margin-bottom: 14px; }
.eg-adimlar h3 { font-size: 1.1rem; margin-bottom: 6px; }
.eg-adimlar p { color: var(--text-mute); line-height: 1.6; font-size: .95rem; }

/* TEKNOFEST */
.eg-teknofest { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 28px; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 107, 53, .14), var(--navy-800) 60%); border: 1px solid var(--navy-line); }
.eg-teknofest img { display: block; width: 100%; height: auto; border-radius: 18px; }
.eg-teknofest h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 10px 0 14px; }
.eg-teknofest p { color: var(--text-mute); line-height: 1.75; margin-bottom: 12px; }
.eg-teknofest p strong { color: var(--text-main); }

/* SSS */
.eg-dar { max-width: 860px; }
.eg-sss { display: grid; gap: 12px; }
.eg-sss details { border-radius: 16px; background: var(--navy-800); border: 1px solid var(--navy-line); padding: 0 22px; }
.eg-sss details[open] { border-color: rgba(255, 107, 53, .5); }
.eg-sss summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; font-weight: 600; position: relative; color: var(--text-main); }
.eg-sss summary::-webkit-details-marker { display: none; }
.eg-sss summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--orange); transition: transform .2s; }
.eg-sss details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.eg-sss p { color: var(--text-mute); line-height: 1.7; padding-bottom: 18px; }
.eg-sss a { color: var(--orange); }

/* Son çağrı */
.eg-cagri { text-align: center; padding: 50px 28px; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 107, 53, .2), rgba(255, 183, 77, .08) 50%, var(--navy-800)); border: 1px solid rgba(255, 138, 61, .45); }
.eg-cagri h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 12px; }
.eg-cagri p { color: var(--text-mute); max-width: 620px; margin: 0 auto; line-height: 1.7; }
.eg-cagri .eg-butonlar { justify-content: center; }

/* Aydınlık mod */
[data-theme="light"] .eg-rozet-altin { color: #92400e; }

/* Duyarlı */
@media (max-width: 1100px) {
  .eg-seviyeler, .eg-adimlar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .eg-hero { padding-top: 150px; }
  .eg-hero-grid, .eg-teknofest { grid-template-columns: 1fr; }
  .eg-hero-gorsel { transform: none; }
  .eg-siniflar, .eg-projeler { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .eg-hero { padding: 135px 0 50px; }
  .eg-ozet { grid-template-columns: 1fr; }
  .eg-seviyeler, .eg-adimlar { grid-template-columns: 1fr; }
  .eg-teknofest { padding: 16px; }
  .eg-butonlar .btn { width: 100%; justify-content: center; }
}

/* Dikey fotoğraf: giriş görseli çok uzun olmasın */
.eg-dik { max-width: 460px; justify-self: center; }
.eg-dik img { aspect-ratio: 4 / 5; object-fit: cover; }

/* 3 seviyeli sayfalar (örn. Yapay Zeka) */
.eg-seviyeler.eg-uc { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .eg-seviyeler.eg-uc { grid-template-columns: 1fr; } }