/* LTLearner · tanıtım sayfası, ajan A bölümleri: canlı demo, oyunlar ve kahramanlar, Odak Programı, yaş bantları, ses.
   DESIGN.md içinde kalır: lacivert ton katmanları, 1px hairline, camgöbeği = kurulu/ölçülen, kum = eylem, tuğla renkleri yalnız beceriye.
   Bölüm fikirleri: telefon çerçevesinde gerçek uygulama · tuğla gibi kademeli oyun şeridi · bir günün çizelgesi · sınıf kaydırıcısı · ses dalgası. */
.ck { --yumusak: #C9D5E6; }
.ck .ck-giris { margin-top: 16px; font-size: 1.1rem; color: var(--soluk); }
.ck h3 { text-wrap: balance; }

/* ---- Telefon çerçevesi (ortak) ---- */
.tel { position: relative; width: min(100%, 300px); padding: 24px 9px 14px; border-radius: 40px; background: linear-gradient(160deg, #13253F, #0A1424 60%); box-shadow: inset 0 0 0 1px var(--kenar-2), inset 0 1px 0 rgba(255, 255, 255, 0.08); margin-inline: auto; }
.tel::before { content: ""; position: absolute; z-index: 3; top: 10px; left: 50%; width: 52px; height: 5px; margin-left: -26px; border-radius: 999px; background: #02060C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); pointer-events: none; }
.tel::after { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -26px; height: 40px; border-radius: 50%; background: rgba(91, 242, 230, 0.16); filter: blur(18px); pointer-events: none; }
.tel-ekran { position: relative; overflow: hidden; border-radius: 24px; background: var(--zemin); aspect-ratio: 390 / 760; isolation: isolate; }
.tel-ekran img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.tel-ekran img.cd-poster { height: 100%; object-fit: cover; object-position: 50% 0; }
.tel-buyuk { width: min(100%, 372px); }
.tel-buyuk .tel-ekran { aspect-ratio: 360 / 740; }
.tel-kucuk { width: min(100%, 230px); border-radius: 32px; padding: 20px 7px 11px; }
.tel-kucuk .tel-ekran { border-radius: 20px; aspect-ratio: 390 / 640; }
.tel-kucuk::before { top: 8px; width: 40px; height: 4px; margin-left: -20px; }

/* =============================================================================================
   1) CANLI DEMO
   ============================================================================================= */
.cd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px clamp(28px, 5vw, 80px); align-items: center; }
.cd-metin h2 { max-width: 14ch; }
.cd-dene-bas { margin: clamp(26px, 3vw, 36px) 0 12px; font: 600 0.74rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); }
.cd-adimlar { position: relative; display: grid; gap: 6px; max-width: 520px; }
.cd-adimlar::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; background: var(--kenar-2); }
.cd-adim { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 6px 16px 6px 0; border: 0; border-radius: 16px; background: transparent; color: var(--metin); font: inherit; text-align: left; cursor: pointer; transition: background 200ms var(--ease); }
.cd-adim:hover { background: rgba(255, 255, 255, 0.03); }
.cd-tugla { position: relative; z-index: 1; width: 56px; height: 56px; color: var(--r); translate: 0 0; transition: translate 320ms var(--ease), filter 320ms var(--ease); }
.cd-adim:hover .cd-tugla { translate: 0 -3px; }
.cd-adim-metin b { display: block; font: 600 1.06rem/1.2 var(--display); letter-spacing: -0.02em; font-variation-settings: "opsz" 24; }
.cd-adim-metin small { display: block; margin-top: 3px; font-size: 0.9rem; line-height: 1.4; color: var(--soluk); }
.cd-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--kenar-2); font: 600 0.78rem/1 var(--sans); color: var(--soluk); transition: color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease); }
.cd-adim[aria-current="step"] { background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--kenar-2); }
.cd-adim[aria-current="step"] .cd-tugla { translate: 0 -5px; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--r) 55%, transparent)); }
.cd-adim[aria-current="step"] .cd-no { color: #041018; background: var(--isik); box-shadow: 0 0 12px 1px rgba(91, 242, 230, 0.45); }
.cd-not { margin-top: 18px; max-width: 520px; }
.cd-sahne { margin: 0; display: grid; justify-items: center; gap: 22px; }
.cd-poster { filter: saturate(0.85) brightness(0.62); transition: filter 400ms var(--ease); }
.cd-perde { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; background: radial-gradient(120% 70% at 50% 60%, rgba(5, 11, 22, 0.25), rgba(5, 11, 22, 0.82)); }
.cd-perde .dugme { font-size: 1.04rem; }
.cd-perde-not { font-size: 0.86rem; color: var(--yumusak); }
.cd-sahne iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: var(--zemin); opacity: 0; transition: opacity 500ms var(--ease); }
.tel[data-durum="acik"] iframe { opacity: 1; }
.tel[data-durum="acik"] .cd-perde, .tel[data-durum="yukleniyor"] .cd-perde { opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease), visibility 0s linear 240ms; }
.cd-yukleniyor { position: absolute; z-index: 2; left: 50%; top: 50%; display: none; gap: 6px; transform: translate(-50%, -50%); }
.tel[data-durum="yukleniyor"] .cd-yukleniyor { display: flex; }
.cd-yukleniyor i { width: 14px; height: 14px; border-radius: 3px; background: var(--isik); opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
  .cd-yukleniyor i { animation: cd-yuk 900ms var(--ease) infinite; }
  .cd-yukleniyor i:nth-child(2) { animation-delay: 150ms; } .cd-yukleniyor i:nth-child(3) { animation-delay: 300ms; }
}
@keyframes cd-yuk { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-6px); } }
.cd-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; width: min(100%, 372px); }
.cd-durum { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--soluk); }
.cd-durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--soluk); }
.cd-durum.acik { color: var(--metin); }
.cd-durum.acik::before { border-color: var(--isik); background: var(--isik); box-shadow: 0 0 10px 1px rgba(91, 242, 230, 0.55); }
.cd-alt-bag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.cd-sifirla { min-height: 44px; padding: 0; border: 0; background: none; color: var(--soluk); font: 500 0.94rem/1 var(--sans); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--kenar-2); cursor: pointer; }
.cd-sifirla:hover { color: var(--metin); }
@media (max-width: 860px) {
  .cd { grid-template-columns: 1fr; }
  .cd-sahne { order: -1; }
  .cd-metin h2 { max-width: 18ch; }
}
@media (max-width: 400px) { .tel-buyuk .tel-ekran { aspect-ratio: 360 / 700; } }

/* =============================================================================================
   2) OYUNLAR VE KAHRAMANLAR
   ============================================================================================= */
.oy-filtre { display: flex; flex-wrap: wrap; gap: 6px; }
.oy-f { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--kenar); color: var(--soluk); font: 500 0.92rem/1 var(--sans); cursor: pointer; transition: color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease); }
.oy-f i { width: 9px; height: 9px; border-radius: 2px; background: var(--r); }
.oy-f span { font-size: 0.78rem; color: var(--soluk); font-variant-numeric: tabular-nums; }
.oy-f:hover { color: var(--metin); box-shadow: inset 0 0 0 1px var(--kenar-2); }
.oy-f[aria-pressed="true"] { background: var(--yuzey-2); color: var(--metin); box-shadow: inset 0 0 0 1px var(--kenar-2); }
.oy-f[aria-pressed="true"] span { color: var(--isik); }
.oy-sayac { margin: 12px 0 0; font-size: 0.86rem; color: var(--soluk); }

/* Özgün dört oyun: tuğla gibi kademeli dizilmiş uzun kartlar */
.oy-ozgun { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(22px, 3vw, 34px); padding-bottom: 40px; }
.oy-kart { display: grid; align-content: start; gap: 14px; translate: 0 calc(var(--k, 0) * 40px); transition: translate 520ms var(--ease); }
.oy-ozgun .oy-kart:nth-child(even) { --k: 1; }
.oy-ozgun.suzgec .oy-kart { --k: 0; }
.oy-ekran { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: var(--zemin); box-shadow: inset 0 0 0 1px var(--kenar-2); aspect-ratio: 780 / 880; }
.oy-ekran::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--kenar-2); pointer-events: none; }
.oy-ekran img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: transform 700ms var(--ease); }
.oy-kart:hover .oy-ekran img { transform: scale(1.035) translateY(-1%); }
.oy-govde { display: grid; gap: 8px; padding: 0 2px; }
.oy-et { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--soluk); }
.oy-et svg { width: 26px; height: 26px; flex: none; color: var(--r); margin: -4px 0; }
.oy-govde h3 { font-size: 1.42rem; }
.oy-govde p { font-size: 0.98rem; color: var(--yumusak); }
.oy-veri { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--kenar); }
.oy-veri div { display: grid; gap: 1px; }
.oy-veri dt { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--soluk); }
.oy-veri dd { margin: 0; font-weight: 600; font-size: 0.92rem; }

/* Dokuz klasik oyun: yoğun defter satırları */
.oy-alt-bas { margin: clamp(30px, 4vw, 48px) 0 12px; font-size: 1.2rem; }
.oy-klasik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 32px); }
.oy-satir { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 84px; padding: 12px 0; border-top: 1px solid var(--kenar); }
.oy-satir img { width: 52px; height: 64px; border-radius: 9px; object-fit: cover; object-position: 50% 12%; background: var(--zemin); box-shadow: inset 0 0 0 1px var(--kenar-2); }
.oy-satir b { display: block; font: 600 1rem/1.2 var(--display); letter-spacing: -0.02em; font-variation-settings: "opsz" 24; }
.oy-satir span { display: block; margin-top: 2px; font-size: 0.86rem; line-height: 1.4; color: var(--soluk); }
.oy-satir em { font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--soluk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oy-satir em::after { content: ". sınıf"; font-weight: 400; }
.oy-satir em::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; background: var(--r); vertical-align: 1px; }
.oy-bos { margin-top: 14px; color: var(--soluk); }
.oy-kart[hidden], .oy-satir[hidden] { display: none; }
.oy-alt-bas[hidden] { display: none; }

/* Oyunlarda yok */
.oy-yok { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(26px, 3.4vw, 40px); padding: 14px 18px; border: 1px dashed var(--kenar-2); border-radius: 18px; }
.oy-yok-bas { font: 700 1rem/1.2 var(--display); letter-spacing: -0.02em; color: var(--metin); }
.oy-yok ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.oy-yok li { display: inline-flex; align-items: center; gap: 8px; color: var(--soluk); font-size: 0.94rem; text-decoration: line-through; text-decoration-color: rgba(143, 162, 189, 0.55); }
.oy-yok li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--soluk); background: linear-gradient(135deg, transparent 44%, var(--soluk) 44% 56%, transparent 56%); flex: none; }

/* Kahramanlar */
.kh { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--kenar); }
.kh-metin h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.05; font-variation-settings: "opsz" 48; }
.kh-metin p { margin-top: 12px; color: var(--yumusak); }
.kh-tema { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.kh-tema li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--kenar); font-size: 0.84rem; color: var(--soluk); }
.kh-tema b { color: var(--metin); font-weight: 600; font-variant-numeric: tabular-nums; }
.kh-serit { position: relative; display: grid; gap: 12px; min-width: 0; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.kh-sira { display: flex; width: max-content; gap: 12px; }
.kh-sira:empty { display: none; }
.kh-av { flex: none; display: grid; justify-items: center; gap: 6px; width: 84px; }
.kh-av .avatar { display: block; width: var(--boy, 72px); height: var(--boy, 72px); border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px var(--kenar-2), 0 0 0 1px var(--kenar); }
.kh-av .avatar svg { width: 100%; height: 100%; }
.kh-av small { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; color: var(--soluk); }
.kh-sira[data-sira="1"] .kh-av { width: 72px; }
.kh-sira[data-sira="1"] .avatar { --boy: 60px !important; width: 60px; height: 60px; }
.kh-yedek { display: none; color: var(--soluk); font-size: 0.92rem; }
.kh-serit[data-durum="yok"] .kh-yedek { display: block; }
.kh-serit[data-durum="yok"] { -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: no-preference) {
  .kh-serit[data-durum="hazir"] .kh-sira { animation: kh-kay 90s linear infinite; }
  .kh-serit[data-durum="hazir"] .kh-sira[data-sira="1"] { animation-duration: 110s; animation-direction: reverse; }
  .kh-serit[data-durum="hazir"]:hover .kh-sira, .kh-serit[data-durum="hazir"]:focus-within .kh-sira, .kh-serit.durdu .kh-sira { animation-play-state: paused; }
}
@keyframes kh-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kh-dur { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--zemin-2); box-shadow: inset 0 0 0 1px var(--kenar-2); color: var(--soluk); font: 500 0.86rem/1 var(--sans); cursor: pointer; margin-right: 9%; }
.kh-dur::before { content: ""; width: 10px; height: 10px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.kh-dur[aria-pressed="true"]::before { background: none; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.kh-dur:hover { color: var(--metin); }
@media (prefers-reduced-motion: reduce) { .kh-dur { display: none !important; } }
.kh-evren { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 8px 0 0; border-top: 1px solid var(--kenar); }
.kh-evren div { padding: 16px 18px 4px 0; }
.kh-evren div + div { padding-left: 18px; border-left: 1px solid var(--kenar); }
.kh-evren dt { font: 700 1.05rem/1.15 var(--display); letter-spacing: -0.02em; color: var(--kum); }
.kh-evren dd { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--soluk); }

@media (max-width: 1000px) {
  .oy-ozgun { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oy-ozgun .oy-kart:nth-child(even) { --k: 0.6; }
  .oy-klasik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh { grid-template-columns: 1fr; }
  .kh-evren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-evren div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kh-evren div:nth-child(n+3) { border-top: 1px solid var(--kenar); }
}
@media (max-width: 640px) {
  .oy-ozgun { grid-template-columns: 1fr; gap: 12px; padding-bottom: 0; }
  .oy-ozgun .oy-kart, .oy-ozgun .oy-kart:nth-child(even) { --k: 0; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 14px; }
  .oy-ekran { aspect-ratio: 780 / 1000; border-radius: 14px; }
  .oy-govde h3 { font-size: 1.2rem; }
  .oy-govde p { font-size: 0.92rem; }
  .oy-klasik { grid-template-columns: 1fr; }
  .kh-evren { grid-template-columns: 1fr; }
  .kh-evren div, .kh-evren div + div { padding: 12px 0 2px; border-left: 0; }
  .kh-evren div + div { border-top: 1px solid var(--kenar); }
  .kh-dur { margin-right: 0; }
}

/* =============================================================================================
   3) ODAK PROGRAMI: bir günün çizelgesi
   ============================================================================================= */
.gun { display: grid; gap: clamp(22px, 3vw, 34px); }
.gun-serit { --sec: 1; position: relative; display: flex; gap: 6px; padding: 12px; border-radius: 22px; background: var(--zemin-2); box-shadow: inset 0 0 0 1px var(--kenar); }
.gun-dilim { position: relative; flex: var(--w) 1 0; min-width: 0; display: grid; align-content: start; gap: 4px; min-height: 76px; padding: 18px 12px 10px; border: 0; border-radius: 14px; background: transparent; color: var(--soluk); font: inherit; text-align: left; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease); }
.gun-dilim::before { content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--r) 35%, transparent); transition: background 240ms var(--ease), box-shadow 240ms var(--ease); }
.gun-dilim:hover { color: var(--metin); }
.gun-dilim[aria-selected="true"] { background: var(--yuzey-2); color: var(--metin); box-shadow: inset 0 0 0 1px var(--kenar-2); }
.gun-dilim[aria-selected="true"]::before { background: var(--r); box-shadow: 0 0 14px 0 color-mix(in srgb, var(--r) 60%, transparent); }
.gun-ad { font: 600 1rem/1.15 var(--display); letter-spacing: -0.02em; font-variation-settings: "opsz" 24; }
.gun-sure { font-size: 0.8rem; color: var(--soluk); }
.gun-t { display: flex; gap: 4px; margin-top: 4px; }
.gun-t i { width: 16px; height: 9px; border-radius: 2px; background: color-mix(in srgb, var(--r) 70%, #fff 0%); opacity: 0.55; }
.gun-dilim[aria-selected="true"] .gun-t i { opacity: 1; }
.gun-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 72px); align-items: center; border-radius: 18px; }
.gun-panel .tel { width: 290px; }
.gun-ekranlar img { opacity: 0; transition: opacity 420ms var(--ease); }
.gun-ekranlar img.aktif { opacity: 1; }
.gun-metin { display: grid; gap: 12px; max-width: 52ch; }
.gun-icerik h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.05; font-variation-settings: "opsz" 48; }
.gun-icerik p { margin-top: 12px; font-size: 1.06rem; color: var(--yumusak); }
.gun-icerik[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .gun-icerik:not([hidden]) { animation: ck-gir 520ms var(--ease) both; } }
@keyframes ck-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.od-alt { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.sure { padding: clamp(20px, 2.6vw, 30px); border-radius: 18px; background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--kenar); }
.sure > p { margin-top: 10px; color: var(--yumusak); font-size: 0.98rem; }
.sure-cubuk { display: grid; gap: 12px; margin-top: 22px; }
.sure-cubuk li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 3.6rem; align-items: center; gap: 12px; }
.sure-sinif { font-size: 0.9rem; color: var(--soluk); }
.sure-bar { position: relative; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--kenar); overflow: hidden; }
.sure-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc((var(--dk) - 5) / 115 * 100%); border-radius: 3px; background: linear-gradient(90deg, rgba(91, 242, 230, 0.35), var(--isik)); box-shadow: 0 0 12px rgba(91, 242, 230, 0.35); transform-origin: 0 50%; }
.sure-cubuk b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sure-olcek { position: relative; height: 1.3em; margin: 8px calc(3.6rem + 12px) 0 calc(6.6rem + 12px); font-size: 0.74rem; color: var(--soluk); font-variant-numeric: tabular-nums; }
.sure-olcek span { position: absolute; top: 0; white-space: nowrap; }
.sure-olcek span:nth-child(1) { left: 0; }
.sure-olcek span:nth-child(2) { left: calc(55 / 115 * 100%); transform: translateX(-50%); }
.sure-olcek span:nth-child(3) { right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sure.gir-k .sure-bar i { transform: scaleX(0); }
  .sure.gir-k.goster .sure-bar i { transform: scaleX(1); transition: transform 1100ms var(--ease); }
  .sure.gir-k.goster li:nth-child(2) .sure-bar i { transition-delay: 90ms; } .sure.gir-k.goster li:nth-child(3) .sure-bar i { transition-delay: 180ms; } .sure.gir-k.goster li:nth-child(4) .sure-bar i { transition-delay: 270ms; }
}
.hafta-kart { margin: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.hafta-gorsel { position: relative; overflow: hidden; max-height: 470px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--kenar-2); background: var(--zemin); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.hafta-gorsel img { display: block; width: 100%; height: auto; }
.hafta-kart figcaption { display: grid; gap: 14px; padding-top: 6px; }
.hafta-kart .liste li { font-size: 0.95rem; }

/* Katmanlar: tuğla gibi kaydırılmış satırlar */
.katman { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-top: clamp(36px, 5vw, 56px); }
.katman li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--kenar); }
.katman li:nth-child(odd) { padding-left: 0; } .katman li:nth-child(even) { padding-left: 28px; }
.katman svg { grid-row: span 2; width: 40px; height: 40px; color: var(--r); }
.katman b { font: 600 1.04rem/1.2 var(--display); letter-spacing: -0.02em; font-variation-settings: "opsz" 24; }
.katman span { font-size: 0.9rem; line-height: 1.45; color: var(--soluk); }

.gorevler { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.gorev-tel { margin: 0; }
.gorev-tel .tel { width: 230px; }
.gorev-metin h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.05; font-variation-settings: "opsz" 48; }
.gorev-metin > p { margin-top: 12px; color: var(--yumusak); }
.gorev-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 720px; }
.gorev-liste li { padding: 7px 13px; border-radius: 999px; background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--kenar); font-size: 0.88rem; color: var(--yumusak); }
.gorev-liste li:nth-child(3n+1) { box-shadow: inset 0 0 0 1px rgba(46, 194, 126, 0.32); }
.od-durust { margin-top: clamp(32px, 4vw, 48px); padding-top: 16px; border-top: 1px solid var(--kenar); max-width: none; color: var(--soluk); font-size: 0.98rem; }
.od-durust b { color: var(--metin); font-weight: 600; }

@media (max-width: 1100px) { .hafta-kart { grid-template-columns: 1fr; } .hafta-gorsel { max-height: 380px; } }
@media (max-width: 860px) {
  .gun-panel { grid-template-columns: 1fr; justify-items: center; }
  .gun-panel .tel { width: min(100%, 260px); }
  .gun-metin { justify-self: stretch; }
  .od-alt { grid-template-columns: 1fr; }
  .hafta-kart { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
  .katman { grid-template-columns: 1fr; }
  .katman li:nth-child(even) { padding-left: 28px; }
}
@media (max-width: 640px) {
  .gun-serit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 8px; border-radius: 18px; }
  .gun-dilim { padding: 16px 6px 8px; min-height: 70px; text-align: center; justify-items: center; }
  .gun-dilim::before { left: 6px; right: 6px; }
  .gun-ad { font-size: 0.84rem; }
  .gun-sure { font-size: 0.7rem; line-height: 1.2; }
  .gun-t { display: none; }
  .hafta-kart { grid-template-columns: 1fr; }
  .gorevler { grid-template-columns: 1fr; }
  .gorev-tel .tel { width: 200px; }
  .sure-cubuk li { grid-template-columns: 5.2rem minmax(0, 1fr) 3.2rem; gap: 10px; }
  .sure-olcek { margin-left: calc(5.2rem + 10px); margin-right: calc(3.2rem + 10px); }
  .katman li:nth-child(even) { padding-left: 16px; }
}

/* =============================================================================================
   4) YAŞ BANTLARI: sınıf kaydırıcısı
   ============================================================================================= */
.bant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.bant-sol { display: grid; gap: clamp(24px, 3vw, 34px); }
.bant-kontrol { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 16px; padding: clamp(18px, 2.4vw, 26px); border-radius: 18px; background: var(--zemin-2); box-shadow: inset 0 0 0 1px var(--kenar); }
.bant-et { font-size: 0.86rem; color: var(--soluk); }
.bant-cikti { font: 700 1.5rem/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--metin); }
.bant-kontrol input[type="range"] { grid-column: 1 / -1; --oran: 45.45%; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.bant-kontrol input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--isik) 0 var(--oran), rgba(255, 255, 255, 0.08) var(--oran)); box-shadow: inset 0 0 0 1px var(--kenar); }
.bant-kontrol input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.bant-kontrol input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--isik); }
.bant-kontrol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--kum); border: 4px solid var(--zemin-2); box-shadow: 0 0 0 1px var(--kum), 0 6px 18px -6px rgba(244, 217, 166, 0.7); transition: transform 200ms var(--ease); }
.bant-kontrol input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--kum); border: 4px solid var(--zemin-2); box-shadow: 0 0 0 1px var(--kum); }
.bant-kontrol input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.bant-kontrol input[type="range"]:focus-visible { outline: 2px solid var(--kum); outline-offset: 4px; border-radius: 10px; }
.bant-cetvel { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: -4px; }
.bant-cetvel li { flex: var(--n) 1 0; display: grid; gap: 4px; padding-top: 8px; border-top: 2px solid var(--kenar-2); font-size: 0.78rem; color: var(--soluk); font-variant-numeric: tabular-nums; transition: border-color 240ms var(--ease), color 240ms var(--ease); }
.bant-cetvel li span { font: 700 0.92rem/1 var(--display); color: var(--soluk); }
.bant[data-bant="a"] .bant-cetvel [data-b="a"], .bant[data-bant="b"] .bant-cetvel [data-b="b"], .bant[data-bant="c"] .bant-cetvel [data-b="c"], .bant[data-bant="d"] .bant-cetvel [data-b="d"], .bant[data-bant="e"] .bant-cetvel [data-b="e"] { border-color: var(--isik); color: var(--metin); }
.bant[data-bant="a"] .bant-cetvel [data-b="a"] span, .bant[data-bant="b"] .bant-cetvel [data-b="b"] span, .bant[data-bant="c"] .bant-cetvel [data-b="c"] span, .bant[data-bant="d"] .bant-cetvel [data-b="d"] span, .bant[data-bant="e"] .bant-cetvel [data-b="e"] span { color: var(--isik); }
.bant-harf { display: flex; align-items: center; gap: 16px; max-width: none; }
.bant-harf span { display: inline-grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 18px; background: var(--yuzey); box-shadow: inset 0 0 0 1px rgba(91, 242, 230, 0.45), 0 0 26px -8px rgba(91, 242, 230, 0.5); font: 800 2.6rem/1 var(--display); color: var(--isik); font-variation-settings: "opsz" 96; }
.bant-harf b { font: 700 clamp(1.6rem, 3vw, 2.3rem)/1 var(--display); letter-spacing: -0.03em; font-variation-settings: "opsz" 48; }
.bant-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 18px 0 0; }
.bant-dl div { padding: 12px 0; border-top: 1px solid var(--kenar); }
.bant-dl dt { font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--soluk); }
.bant-dl dd { margin: 3px 0 0; font-weight: 600; font-size: 0.98rem; }
.bant-kural h3 { font-size: 1.1rem; margin-bottom: 12px; }
.bant-sag { display: grid; justify-items: center; gap: 20px; }
.bant-sag .tel { width: 300px; }
.bant-ekranlar img { opacity: 0; transform: scale(0.985); transition: opacity 380ms var(--ease), transform 520ms var(--ease); }
.bant-ekranlar img.aktif { opacity: 1; transform: none; }
.bant-kucuk { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; }
.bant-kucuk button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--kenar); color: var(--soluk); font: 500 0.86rem/1 var(--sans); cursor: pointer; transition: color 160ms var(--ease), background 160ms var(--ease); }
.bant-kucuk b { font: 700 0.9rem/1 var(--display); color: var(--metin); }
.bant-kucuk button:hover { color: var(--metin); }
.bant-kucuk button[aria-pressed="true"] { background: var(--yuzey-2); color: var(--metin); box-shadow: inset 0 0 0 1px rgba(91, 242, 230, 0.45); }
.bant-kucuk button[aria-pressed="true"] b { color: var(--isik); }
#yas-bantlari > .not { margin-top: 18px; }
@media (max-width: 860px) {
  .bant { grid-template-columns: 1fr; }
  .bant-sag { order: -1; }
  .bant-sag .tel { width: min(100%, 260px); }
}
@media (max-width: 420px) { .bant-dl { grid-template-columns: 1fr; } .bant-harf span { width: 60px; height: 60px; font-size: 2.1rem; } }

/* =============================================================================================
   5) SES
   ============================================================================================= */
.ses { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px clamp(24px, 4vw, 64px); align-items: start; }
.ses-dinle h3, .ses-yol h3 { font-size: 1.3rem; }
.ses-dinle > .not { margin-top: 6px; }
.ses-liste { display: grid; gap: 8px; margin-top: 18px; }
.ses-dugme { --p: 0; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "ik metin yer" "ik dalga dalga"; align-items: center; gap: 6px 14px; width: 100%; min-height: 76px; padding: 12px 16px 12px 12px; border: 0; border-radius: 16px; background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--kenar); color: var(--metin); font: inherit; text-align: left; cursor: pointer; transition: background 200ms var(--ease), box-shadow 200ms var(--ease); }
.ses-dugme:hover { background: var(--yuzey-2); box-shadow: inset 0 0 0 1px var(--kenar-2); }
.ses-dugme[aria-pressed="true"] { background: var(--yuzey-2); box-shadow: inset 0 0 0 1px rgba(91, 242, 230, 0.5); }
.ses-ik { grid-area: ik; position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(91, 242, 230, 0.1); box-shadow: inset 0 0 0 1px rgba(91, 242, 230, 0.55); }
.ses-ik::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 13px solid var(--isik); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.ses-dugme[aria-pressed="true"] .ses-ik::before { margin: 0; width: 12px; height: 13px; border: 0; background: linear-gradient(90deg, var(--isik) 0 36%, transparent 36% 64%, var(--isik) 64%); }
.ses-metin { grid-area: metin; font-size: 0.98rem; line-height: 1.4; }
.ses-yer { grid-area: yer; align-self: start; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soluk); white-space: nowrap; }
.ses-dalga { grid-area: dalga; display: flex; align-items: center; gap: 3px; height: 22px; }
.ses-dalga i { flex: 1 1 0; max-width: 5px; min-width: 2px; height: var(--h, 40%); border-radius: 2px; background: var(--kenar-2); transition: background 120ms linear; }
.ses-dalga i.cal { background: var(--isik); }
.ses-durum { min-height: 1.4em; margin-top: 10px; }
.ses-yol { padding: clamp(20px, 2.6vw, 28px); border-radius: 18px; background: var(--zemin-2); box-shadow: inset 0 0 0 1px var(--kenar); }
.ses-adim { position: relative; display: grid; gap: 4px; margin: 16px 0 18px; }
.ses-adim li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 8px 0; transition: opacity 260ms var(--ease); }
.ses-adim li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 42px; bottom: -6px; width: 2px; border-radius: 2px; background: var(--isik); box-shadow: 0 0 10px rgba(91, 242, 230, 0.45); transition: background 260ms var(--ease), box-shadow 260ms var(--ease); }
.sa-no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--isik); color: #041018; font: 700 0.9rem/1 var(--sans); }
.ses-adim b { font: 600 1rem/1.25 var(--display); letter-spacing: -0.02em; }
.ses-adim p { margin-top: 2px; font-size: 0.9rem; line-height: 1.45; color: var(--soluk); }
.sa-yok .sa-no { background: transparent; color: var(--soluk); box-shadow: inset 0 0 0 1.5px var(--soluk); }
.ses-adim[data-bulut="kapali"] .sa-bulut { opacity: 0.42; }
.ses-adim[data-bulut="kapali"] .sa-bulut .sa-no { background: transparent; color: var(--soluk); box-shadow: inset 0 0 0 1.5px var(--soluk); }
.ses-adim[data-bulut="kapali"] .sa-paket::after, .ses-adim[data-bulut="kapali"] .sa-bulut::after { background: var(--kenar-2); box-shadow: none; }
.ses-anahtar { padding-top: 16px; border-top: 1px solid var(--kenar); min-height: 44px; }
.ses-yol > .not { margin-top: 10px; }
.ses-veri { margin-top: clamp(28px, 3.6vw, 40px); }
@media (max-width: 860px) { .ses { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .ses-dugme { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ik metin" "ik dalga" "ik yer"; padding-right: 12px; }
  .ses-ik { width: 44px; height: 44px; }
}

/* ---- Hareket azaltma: kesintisiz hareket yok, geçişler kısa ---- */
@media (prefers-reduced-motion: reduce) {
  .ck *, .ck *::before, .ck *::after { transition-duration: 0s !important; animation: none !important; }
  .oy-kart { translate: 0 0; }
  .oy-ozgun .oy-kart:nth-child(even) { --k: 0; }
}
.oy-ozgun[hidden], .oy-klasik[hidden] { display: none; }