/* Rapor App Akademi — sitenin v2 belirteçlerini (--acc, --surface, --text…) kullanır. */

html.ak-kilit, html.ak-kilit body { overflow: hidden; }

.ak-hero { position: relative; padding: clamp(120px, 14vw, 170px) 0 clamp(50px, 7vw, 90px); overflow: hidden; }
.ak-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; background: radial-gradient(60% 50% at 70% 30%, var(--acc-faint), transparent 70%); pointer-events: none; }
.ak-hero-izgara { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 70px); align-items: center; position: relative; }
.ak-rozet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--acc-line); background: var(--acc-faint); color: var(--acc); font: 600 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.ak-hero h1 { font-family: var(--f-disp); font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -.035em; margin: 18px 0 16px; color: var(--text); }
.ak-hero h1 em { font-style: normal; color: var(--acc); }
.ak-hero p.ak-giris { font-size: clamp(17px, 1.6vw, 19px); color: var(--text-dim); line-height: 1.6; max-width: 34em; }
.ak-hero-eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.ak-hero-not { font-size: 13.5px; color: var(--text-mute); }

/* ilerleme halkası */
.ak-ilerleme { justify-self: center; display: grid; place-items: center; gap: 18px; text-align: center; }
.ak-halka { --oran: 0; width: min(260px, 60vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--acc) calc(var(--oran) * 360deg), var(--surface-2) 0); transition: --oran .8s; box-shadow: 0 0 80px var(--acc-glow); }
.ak-halka::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--bg); }
.ak-halka > div { position: relative; }
.ak-halka strong { display: block; font: 700 clamp(44px, 6vw, 60px)/1 var(--f-disp); color: var(--text); letter-spacing: -.03em; }
.ak-halka span { font-size: 14px; color: var(--text-dim); }
.ak-halka-yorunge { position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed var(--acc-line); animation: ak-don 40s linear infinite; }
.ak-halka-yorunge i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 16px var(--acc); }
@keyframes ak-don { to { transform: rotate(360deg); } }
.ak-sifirla { background: none; border: 0; color: var(--text-mute); font-size: 13px; text-decoration: underline; cursor: pointer; }

/* bölümler */
.ak-bolum { padding: clamp(46px, 7vw, 90px) 0; border-top: 1px solid var(--line-soft); }
.ak-bolum-bas { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 30px; margin-bottom: 28px; }
.ak-bolum-bas h2 { font-family: var(--f-disp); font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.03em; color: var(--text); }
.ak-bolum-bas p { color: var(--text-dim); max-width: 38em; }
.ak-yol-no { font: 600 13px/1 var(--f-mono); color: var(--acc); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 10px; }

.ak-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.ak-kart { text-align: left; display: flex; flex-direction: column; border: 1px solid var(--line-soft); background: var(--surface); border-radius: 20px; overflow: hidden; cursor: pointer; padding: 0; color: inherit; font: inherit;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s; }
.ak-kart:hover, .ak-kart:focus-visible { transform: translateY(-4px); border-color: var(--acc-line); box-shadow: 0 24px 50px oklch(0 0 0 / .25); outline: none; }
.ak-kart:focus-visible { box-shadow: 0 0 0 3px var(--acc-glow); }
.ak-kart-gorsel { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); position: relative; }
.ak-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ak-kart-gorsel img.tel { object-fit: cover; object-position: top center; }
.ak-kart:hover .ak-kart-gorsel img { transform: scale(1.06); }
.ak-kart-sema { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(circle at 50% 60%, var(--acc-faint), transparent 70%); }
.ak-kart-sema span { width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--acc-line); background: var(--surface-2); position: relative; }
.ak-kart-sema span + span::before { content: ""; position: absolute; right: 100%; top: 50%; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--acc) 0 4px, transparent 4px 8px); animation: ak-akis 1s linear infinite; }
@keyframes ak-akis { to { background-position: 8px 0; } }
.ak-kart-govde { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ak-kart-ust { font: 600 12px/1.2 var(--f-mono); color: var(--text-mute); letter-spacing: .03em; }
.ak-kart-govde strong { font-family: var(--f-disp); font-size: 19px; line-height: 1.25; color: var(--text); letter-spacing: -.01em; }
.ak-kart-ozet { font-size: 14.5px; color: var(--text-dim); line-height: 1.5; flex: 1; }
.ak-kart-durum { margin-top: 8px; font-weight: 700; font-size: 14px; color: var(--acc); }
.ak-kart.bitti { border-color: var(--acc-line); }
.ak-kart.bitti .ak-kart-gorsel::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); font-weight: 800; }

/* sözlük + sertifika */
.ak-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ak-panel { border: 1px solid var(--line-soft); background: var(--surface); border-radius: 22px; padding: clamp(20px, 3vw, 30px); }
.ak-panel h3 { font-family: var(--f-disp); font-size: 24px; color: var(--text); margin-bottom: 8px; letter-spacing: -.02em; }
.ak-panel > p { color: var(--text-dim); margin-bottom: 16px; }
.ak-girdi { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; font-size: 15px; }
.ak-girdi:focus { outline: 2px solid var(--acc-line); outline-offset: 1px; }
.ak-sozluk { margin-top: 14px; display: grid; gap: 4px; max-height: 360px; overflow: auto; padding-right: 4px; }
.ak-terim { padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.ak-terim dt { font-weight: 700; color: var(--text); }
.ak-terim dd { color: var(--text-dim); font-size: 14.5px; line-height: 1.5; margin: 2px 0 0; }
.ak-bos { color: var(--text-mute); padding: 10px 0; }
.ak-sertifika-kilit { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg-2); color: var(--text-dim); font-size: 14.5px; }
#ak-sertifika-form { display: grid; gap: 10px; }
.ak-sertifika-onizleme { aspect-ratio: 1600 / 1130; border-radius: 14px; margin-bottom: 14px; display: grid; place-items: center; text-align: center; padding: 20px;
  background: linear-gradient(135deg, #0d1520, #0f2a1d); border: 1px solid rgba(62,224,143,.4); color: #fff; }
.ak-sertifika-onizleme small { display: block; color: #3ee08f; font: 700 12px/1 var(--f-mono); letter-spacing: .12em; }
.ak-sertifika-onizleme b { display: block; font: 700 clamp(22px, 3vw, 30px)/1.1 var(--f-disp); margin: 10px 0 6px; }
.ak-sertifika-onizleme span { color: #9fb0c0; font-size: 13px; }

/* ───────── oynatıcı ───────── */
.ak-oynatici { position: fixed; inset: 0; z-index: 1000; background: oklch(0.12 0.01 255 / .92); backdrop-filter: blur(8px); display: flex; flex-direction: column; color: #eaf1f5; }
.ak-oynatici[hidden] { display: none; }
.ak-ust { display: flex; align-items: center; gap: 12px; padding: 12px clamp(12px, 3vw, 24px); border-bottom: 1px solid rgba(255,255,255,.08); }
.ak-ust .ak-ders-baslik { font: 700 clamp(15px, 1.8vw, 18px)/1.2 var(--f-disp); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-ust button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #eaf1f5; border-radius: 10px; padding: 8px 12px; font: 600 13px/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.ak-ust button:hover { background: rgba(255,255,255,.14); }
.ak-ust button[aria-pressed="true"] { background: var(--acc); color: #04110a; border-color: var(--acc); }
.ak-ust .ak-kapat { width: 38px; height: 38px; padding: 0; font-size: 20px; }
.ak-govde { flex: 1; min-height: 0; display: flex; }
.ak-tur { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(280px, 360px); }
.ak-tur[hidden] { display: none; }
.ak-sahne { position: relative; overflow: hidden; margin: clamp(10px, 2vw, 22px); border-radius: 16px; background: #0b1118; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ak-oynatici.telefon .ak-sahne { justify-self: center; aspect-ratio: 720 / 1558; height: calc(100% - 44px); margin-inline: auto; border-radius: 36px; border: 10px solid #1b2430; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.6); }
.ak-resim { position: absolute; top: 0; left: 0; transform-origin: 0 0; transition: transform .9s cubic-bezier(.65,0,.25,1); will-change: transform; }
.ak-resim img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.ak-perde { position: absolute; top: 0; left: 0; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(5,10,16,.62); border: 2px solid var(--acc); pointer-events: none;
  transition: transform .9s cubic-bezier(.65,0,.25,1), width .9s cubic-bezier(.65,0,.25,1), height .9s cubic-bezier(.65,0,.25,1); }
.ak-perde::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; box-shadow: 0 0 0 0 var(--acc); animation: ak-nabiz 1.8s ease-out infinite; }
@keyframes ak-nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--acc) 60%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.ak-isaret { position: absolute; top: -17px; left: -17px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #04110a; font: 800 15px/1 var(--f-disp);
  box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .9s cubic-bezier(.65,0,.25,1); pointer-events: none; }
.ak-yan { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(14px, 2.5vw, 28px) clamp(14px, 2.5vw, 28px) clamp(14px, 2.5vw, 28px) 4px; }
.ak-sayac { font: 600 13px/1 var(--f-mono); color: var(--acc); letter-spacing: .06em; }
.ak-aciklama h3 { font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--f-disp); letter-spacing: -.02em; margin: 10px 0 10px; color: #fff; }
.ak-aciklama p { color: #c3cfda; font-size: 16.5px; line-height: 1.65; }
.ak-aciklama.gir > * { animation: ak-gir .55s cubic-bezier(.2,.7,.2,1) both; }
.ak-aciklama.gir > *:nth-child(2) { animation-delay: .06s; }
.ak-aciklama.gir > *:nth-child(3) { animation-delay: .12s; }
@keyframes ak-gir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ak-noktalar { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-nokta { width: 26px; height: 6px; border-radius: 3px; border: 0; background: rgba(255,255,255,.16); cursor: pointer; padding: 0; transition: background .3s, width .3s; }
.ak-nokta.gecti { background: color-mix(in oklab, var(--acc) 50%, transparent); }
.ak-nokta.aktif { background: var(--acc); width: 40px; }
.ak-dugmeler { display: flex; gap: 10px; }
.ak-dugmeler button { flex: 1; padding: 13px 16px; border-radius: 12px; font: 700 15px/1 var(--f-body); cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #eaf1f5; }
.ak-dugmeler .ak-ileri { background: var(--acc); color: #04110a; border-color: var(--acc); flex: 1.6; }
.ak-dugmeler button:disabled { opacity: .35; cursor: default; }
.ak-oto-iz { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.ak-oto-cubuk { height: 100%; width: 0; background: var(--acc); }
.ak-oto-cubuk.kos { animation: ak-dol linear forwards; }
@keyframes ak-dol { to { width: 100%; } }
.ak-ipucu { font-size: 12.5px; color: #8796a5; }

/* sınav */
.ak-sinav, .ak-ozel { flex: 1; overflow: auto; display: flex; justify-content: center; padding: clamp(20px, 4vw, 50px) clamp(14px, 3vw, 30px); }
.ak-sinav[hidden], .ak-ozel[hidden] { display: none; }
.ak-sinav-ic { width: min(640px, 100%); margin: auto 0; }
.ak-sinav-ic .ak-rozet { margin-bottom: 18px; }
.ak-sinav-soru { font: 700 clamp(22px, 3vw, 30px)/1.25 var(--f-disp); letter-spacing: -.02em; margin-bottom: 22px; color: #fff; }
.ak-secenekler { display: grid; gap: 10px; }
.ak-secenek { text-align: left; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #eaf1f5; font: 500 16px/1.4 var(--f-body); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.ak-secenek:hover:not(:disabled) { border-color: var(--acc-line); transform: translateX(4px); }
.ak-secenek.dogru { border-color: var(--acc); background: color-mix(in oklab, var(--acc) 18%, transparent); }
.ak-secenek.yanlis { border-color: #f87171; background: rgba(248,113,113,.12); animation: ak-salla .4s; }
.ak-secenek:disabled:not(.dogru):not(.yanlis) { opacity: .5; }
@keyframes ak-salla { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ak-sinav-sonuc { min-height: 26px; margin-top: 16px; font-weight: 600; }
.ak-sinav-sonuc.dogru { color: var(--acc); }
.ak-sinav-sonuc.yanlis { color: #fca5a5; }
.ak-sinav-bitir { margin-top: 18px; width: 100%; padding: 15px; border-radius: 12px; border: 0; background: var(--acc); color: #04110a; font: 700 16px/1.2 var(--f-body); cursor: pointer; }

/* kurulum dersi */
.ak-ozel-ic { width: min(980px, 100%); margin: auto 0; display: grid; gap: 22px; }
.ak-ozel-ic h3 { font: 700 clamp(22px, 2.8vw, 30px)/1.2 var(--f-disp); color: #fff; letter-spacing: -.02em; }
.ak-ozel-ic > p { color: #c3cfda; line-height: 1.6; }
.ak-sema { position: relative; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(80% 120% at 50% 0%, rgba(62,224,143,.08), transparent 70%), #0b1118; padding: 26px 18px; }
.ak-sema svg { width: 100%; height: auto; display: block; }
.ak-sema text { font-family: var(--f-body); }
.ak-paket { animation: ak-paket 3.2s cubic-bezier(.55,0,.45,1) infinite; offset-rotate: 0deg; }
.ak-paket.p2 { animation-delay: 1.07s; } .ak-paket.p3 { animation-delay: 2.14s; }
@keyframes ak-paket { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.ak-kilit-ikon { animation: ak-kilit 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ak-kilit { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.ak-maddeler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ak-madde { padding: 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ak-madde b { display: block; color: #fff; margin-bottom: 4px; }
.ak-madde span { color: #aebccb; font-size: 14px; line-height: 1.5; }
.ak-kontrol { display: grid; gap: 8px; }
.ak-kontrol label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); cursor: pointer; color: #dbe4ec; line-height: 1.45; }
.ak-kontrol input { width: 18px; height: 18px; margin-top: 2px; accent-color: #3ee08f; flex: none; }
.ak-kontrol input:checked + span { color: #8796a5; text-decoration: line-through; }
.ak-kod { position: relative; border-radius: 14px; background: #060a0f; border: 1px solid rgba(255,255,255,.1); }
.ak-kod pre { margin: 0; padding: 18px; overflow: auto; font: 500 13.5px/1.6 var(--f-mono); color: #c7f9dc; }
.ak-kod button { position: absolute; top: 10px; right: 10px; padding: 7px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #eaf1f5; font: 600 12px/1 var(--f-body); cursor: pointer; }
.ak-ozel-alt { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ak-ozel-alt a { color: var(--acc); font-weight: 600; }

.ak-konfeti { position: fixed; inset: 0; pointer-events: none; z-index: 1100; }

/* açık tema: oynatıcı karanlık kalır (ekran odaklı), sayfa açık */
html[data-theme="light"] .ak-halka::before { background: var(--bg); }

@media (max-width: 900px) {
  .ak-hero-izgara { grid-template-columns: 1fr; }
  .ak-ilerleme { justify-self: start; grid-auto-flow: column; align-items: center; }
  .ak-halka { width: 130px; }
  .ak-halka strong { font-size: 34px; }
  .ak-halka-yorunge { inset: -10px; }
  .ak-iki { grid-template-columns: 1fr; }
  .ak-tur { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .ak-sahne { margin: 10px 10px 0; }
  .ak-oynatici.telefon .ak-sahne { height: auto; width: min(64vw, 300px); max-height: 100%; }
  .ak-yan { padding: 14px 14px 18px; gap: 12px; }
  .ak-aciklama h3 { margin: 6px 0; }
  .ak-aciklama p { font-size: 15px; line-height: 1.55; }
  .ak-maddeler { grid-template-columns: 1fr; }
  .ak-ust .ak-oto span, .ak-ipucu { display: none; }
}
@media (max-width: 560px) {
  .ak-ust { flex-wrap: wrap; }
  .ak-ust .ak-ders-baslik { flex-basis: calc(100% - 50px); order: -2; }
  .ak-ust .ak-kapat { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ak-halka-yorunge, .ak-paket, .ak-kilit-ikon, .ak-perde::after { animation: none; }
}