/* Hazır desteler — Defter 2.0. Önek: dst-. Chromium 80: flex gap, aspect-ratio, inset, :is, :focus-visible yok. */
::selection { background: var(--vurgu); color: var(--metin); }
.dst-sayfa { flex: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-gap: var(--b-5); gap: var(--b-5); min-height: 0; }
.dst-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-gap: var(--b-5); gap: var(--b-5); align-items: end; }
.dst-bas h1 { margin: 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-48); line-height: var(--sy-48); letter-spacing: var(--harf-gosterim); }
.dst-bas p { margin: var(--b-2) 0 0; font-size: var(--y-18); color: var(--metin-2); }
.dst-bas p b { color: var(--metin); }
.dst-bas-sag { display: grid; grid-auto-flow: column; grid-gap: var(--b-3); gap: var(--b-3); align-items: center; }
.dst-adet { font-style: normal; min-width: 26px; padding: 0 8px; border-radius: var(--r-hap); background: var(--secili-zemin); color: var(--secili-metin); font-size: var(--y-14); line-height: 24px; text-align: center; }
.dst-adet[hidden] { display: none; }

.dst-govde { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); grid-gap: var(--b-5); gap: var(--b-5); align-items: stretch; min-height: 0; }

/* ---------- Ders bitmeden 5 dk */
.dst-bes { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--yuzey); border-radius: var(--r-20); box-shadow: var(--golge-2); overflow: hidden; }
.dst-bes-foto { position: relative; height: 0; padding-top: 44%; overflow: hidden; background: var(--yuzey-2); }
.dst-bes-foto img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.dst-bes-ic { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: var(--b-4) var(--b-5) var(--b-5); min-height: 0; }
.dst-bes h2 { margin: 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-28); line-height: var(--sy-28); letter-spacing: var(--harf-baslik); }
.dst-bes-ic > p { margin: var(--b-1) 0 0; font-size: var(--y-16); color: var(--metin-2); }
.dst-cekilis { position: relative; min-height: 132px; margin: var(--b-4) 0; perspective: 900px; }
.dst-kartlar { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-items: center; }
/* 5 dk kartları: beyaz kâğıt kart + Canva nesnesi (v2/kural; düz renkli çizim yerine tek üslup) */
.dst-kartlar span { position: absolute; display: grid; place-items: center; width: 96px; height: 120px; border-radius: var(--r-14); background: #fff; box-shadow: var(--golge-2), inset 0 0 0 1.5px var(--cizgi);
  transition: transform var(--sure-yavas) var(--yay), opacity var(--sure-orta) var(--yay); }
.dst-kartlar span img { width: 76px; height: 76px; object-fit: contain; display: block; }
.dst-kartlar span:nth-child(1) { transform: translateX(-64px) rotate(-10deg); background: #FFF6EE; }
.dst-kartlar span:nth-child(2) { transform: translateY(-6px); }
.dst-kartlar span:nth-child(3) { transform: translateX(64px) rotate(10deg); background: #F2FBF5; }
.dst-cekilis.dst-karisiyor .dst-kartlar span:nth-child(1) { animation: dstKar1 .7s var(--yay) both; }
.dst-cekilis.dst-karisiyor .dst-kartlar span:nth-child(3) { animation: dstKar3 .7s var(--yay) both; }
.dst-cekilis.dst-karisiyor .dst-kartlar span:nth-child(2) { animation: dstKar2 .7s var(--yay) both; }
@keyframes dstKar1 { 40% { transform: translateX(10px) rotate(4deg); } 100% { transform: translateX(-64px) rotate(-10deg); } }
@keyframes dstKar3 { 40% { transform: translateX(-10px) rotate(-4deg); } 100% { transform: translateX(64px) rotate(10deg); } }
@keyframes dstKar2 { 40% { transform: translateY(-22px) scale(1.06); } 100% { transform: translateY(-6px); } }
.dst-cekilis.dst-secildi .dst-kartlar span { opacity: 0; transform: translateY(20px) scale(.9); }
.dst-sonuc { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-gap: var(--b-4); gap: var(--b-4); align-items: center;
  padding: var(--b-3) var(--b-4); border-radius: var(--r-14); background: var(--yuzey-2); transform-origin: 50% 100%; animation: dstCevir var(--sure-yavas) var(--yay) both; }
@keyframes dstCevir { from { opacity: 0; transform: rotateX(-70deg) translateY(10px); } }
.dst-sonuc i { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-20); background: var(--tur-renk, var(--sik-2)); color: var(--metin); }
.dst-sonuc i .bk-simge { width: 40px; height: 40px; }
.dst-sonuc i img { width: 64px; height: 64px; object-fit: contain; display: block; }
.dst-sonuc i.dst-foto { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cizgi); }
/* yaş / sınıf seçici (ortak) */
.dst-kademe .ks-baslik { display: none; }
.dst-kademe .ks-bolum > small { margin-bottom: 4px; }
/* deste kartındaki adım simgeleri: anlamı ipucuyla (fare) ve ekran okuyucuda */
.dst-akis span { cursor: help; }
.dst-akis span::after { content: attr(data-ad); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: var(--r-8); background: var(--metin); color: #fff; font: 700 13px/1.2 var(--govde); opacity: 0; transition: opacity var(--sure-hizli) ease, transform var(--sure-hizli) ease; z-index: 5; }
@media (hover: hover) { .dst-akis span:hover::after { opacity: 1; transform: translate(-50%, 0); } }
.dst-akis-kap { align-self: end; min-width: 0; }
.dst-akis-kap .dst-akis { margin-top: 6px; }
.dst-akis-yazi { margin: 6px 0 0; font-size: 13.5px; line-height: 1.3; color: var(--metin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dst-sonuc b { display: block; font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); line-height: var(--sy-22); letter-spacing: var(--harf-baslik); }
.dst-sonuc span { display: block; margin-top: 2px; font-size: var(--y-16); line-height: 1.4; color: var(--metin-2); }
.dst-bes-dugmeler { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: var(--b-2); gap: var(--b-2); }
.dst-bes-dugmeler.dst-iki { grid-template-columns: auto minmax(0, 1fr); }

/* ---------- deste kartları: arkada iki kâğıt (deste), üstte ders şeridi, altta adım şeridi */
.dst-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-gap: var(--b-5) var(--b-5); gap: var(--b-5) var(--b-5); min-height: 0; padding: 6px 6px 8px 0; }
.dst-kart { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; padding: var(--b-4) var(--b-5) var(--b-4); background: var(--yuzey); border-radius: var(--r-20); box-shadow: var(--golge-1), 0 0 0 1.5px var(--cizgi);
  cursor: pointer; transition: box-shadow var(--sure-orta) var(--yay), transform var(--sure-orta) var(--yay); }
.dst-kart::before, .dst-kart::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -5px; height: 20px; border-radius: 0 0 var(--r-20) var(--r-20); background: var(--yuzey); box-shadow: 0 0 0 1.5px var(--cizgi); z-index: -1; }
.dst-kart::after { left: 22px; right: 22px; bottom: -10px; background: var(--yuzey-2); z-index: -2; }
.dst-kart .dst-serit { position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: var(--r-20) var(--r-20) 0 0; background: var(--ders-renk, var(--ders-hb)); }
@media (hover: hover) { .dst-kart:hover { box-shadow: var(--golge-2), 0 0 0 1.5px var(--kare-koyu); transform: translateY(-2px); } }
.dst-kart:active { transform: translateY(1px); }
.dst-kart { cursor: pointer; }
.dst-kart:focus-within { box-shadow: var(--golge-2), 0 0 0 3px var(--odak); }
.dst-kart .dst-basla:focus { outline: 3px solid var(--odak); outline-offset: 2px; }
.dst-kart h3 { margin: 4px 0 0; padding-right: 40px; font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); line-height: var(--sy-22); letter-spacing: var(--harf-baslik); }
.dst-kart p { margin: var(--b-1) 0 0; font-size: var(--y-16); line-height: 1.4; color: var(--metin-2); overflow: hidden; max-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dst-kart .dst-daha { position: absolute; right: 8px; top: 12px; }
.dst-akis { align-self: end; display: grid; grid-auto-flow: column; grid-gap: 4px; gap: 4px; margin-top: var(--b-3); }
.dst-akis span { position: relative; display: grid; place-items: center; height: 40px; border-radius: var(--r-8); background: var(--tur-zemin, var(--yuzey-2)); color: var(--metin); min-width: 40px; }
.dst-akis span .bk-simge { width: 20px; height: 20px; }
.dst-kart-alt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: var(--b-3); }
.dst-kart-alt .dst-basla { margin-left: 10px; }
.dst-kart-alt small b { font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); line-height: 1.1; color: var(--metin); }
.dst-kart-alt small { display: grid; line-height: 1.2; white-space: nowrap; font-weight: 700; font-size: var(--y-14); color: var(--metin-2); font-variant-numeric: tabular-nums; }
.dst-kart-alt .bk-dugme { min-height: 48px; }
.dst-oneri { position: absolute; left: var(--b-5); top: -12px; padding: 2px 10px; border-radius: var(--r-hap); background: var(--vurgu); color: var(--vurgu-metin); font-weight: 700; font-size: var(--y-14); }

/* adım türü renkleri (tek yer) */
[data-tur="karsilama"], [data-tur="hedef"] { --tur-renk: var(--sik-3); --tur-zemin: #FFF6CC; }
[data-tur="duygu"] { --tur-renk: var(--sik-6); --tur-zemin: #FFE9F2; }
[data-tur="g10"] { --tur-renk: var(--sik-2); --tur-zemin: #E6F0FF; }
[data-tur="oyun"] { --tur-renk: var(--sik-1); --tur-zemin: #FFEDE6; }
[data-tur="sure"] { --tur-renk: var(--sik-5); --tur-zemin: #EFEAFF; }
[data-tur="dep"] { --tur-renk: var(--sik-4); --tur-zemin: #E3F7EA; }
[data-tur="hareket"] { --tur-renk: var(--sik-1); --tur-zemin: #FFEDE6; }
[data-tur="cark"] { --tur-renk: var(--sik-3); --tur-zemin: #FFF6CC; }
[data-tur="cikis"] { --tur-renk: var(--sik-4); --tur-zemin: #E3F7EA; }
[data-tur="nefes"] { --tur-renk: var(--sik-2); --tur-zemin: #E4EFFF; }
[data-tur="hava"] { --tur-renk: var(--sik-3); --tur-zemin: #FFF6CC; }

/* ================================================================ OYNATICI */
.dst-oyna { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background-color: var(--kagit);
  background-image: linear-gradient(var(--kare) 1px, transparent 1px), linear-gradient(90deg, var(--kare) 1px, transparent 1px); background-size: 28px 28px; color: var(--metin); }
.dst-oyna[hidden] { display: none; }
.dst-o-ust { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-gap: var(--b-4); gap: var(--b-4); align-items: center; padding: var(--b-3) var(--b-5); }
.dst-o-ad { min-width: 0; }
.dst-o-ad b { display: block; font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); letter-spacing: var(--harf-baslik); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dst-o-ad span { font-size: var(--y-16); color: var(--metin-2); }
.dst-o-adimlar { display: grid; grid-auto-flow: column; grid-gap: 6px; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dst-o-adimlar li { display: grid; grid-auto-flow: column; grid-gap: 6px; gap: 6px; align-items: center; height: 40px; padding: 0 12px 0 8px; border-radius: var(--r-hap); background: var(--yuzey); box-shadow: 0 0 0 1.5px var(--cizgi);
  font-weight: 700; font-size: var(--y-14); color: var(--metin-2); white-space: nowrap; transition: background-color var(--sure-orta) var(--yay), color var(--sure-orta) var(--yay), box-shadow var(--sure-orta) var(--yay); }
.dst-o-adimlar li .bk-simge { width: 20px; height: 20px; }
.dst-o-adimlar li.dst-gecti { background: var(--tur-zemin); box-shadow: none; color: var(--metin); }
.dst-o-adimlar li.dst-simdi { background: var(--metin); box-shadow: none; color: #fff; }
.dst-o-adimlar li span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.dst-o-sag { justify-self: end; display: grid; grid-auto-flow: column; grid-gap: var(--b-2); gap: var(--b-2); align-items: center; }
.dst-saat { display: grid; justify-items: end; padding: 0 var(--b-2); }
.dst-saat b { font-family: var(--baslik); font-weight: 800; font-size: var(--y-28); line-height: 1; letter-spacing: var(--harf-baslik); font-variant-numeric: tabular-nums; }
.dst-saat span { font-size: var(--y-14); color: var(--metin-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dst-o-sahne { position: relative; min-height: 0; padding: 0 var(--b-5); display: grid; }
.dst-adim { position: relative; min-height: 0; display: grid; background: var(--yuzey); border-radius: var(--r-20); box-shadow: var(--golge-3); overflow: hidden; }
.dst-adim.dst-cerceve { background: transparent; box-shadow: none; border-radius: 0; }
.dst-adim.dst-gir { animation: dstAdimGir var(--sure-yavas) var(--yay) both; }
.dst-adim.dst-gir.dst-geri { animation-name: dstAdimGeri; }
.dst-adim.dst-cik { animation: dstAdimCik var(--sure-orta) cubic-bezier(.4,0,1,1) both; }
@keyframes dstAdimGir { from { opacity: 0; transform: translateX(56px); } }
@keyframes dstAdimGeri { from { opacity: 0; transform: translateX(-56px); } }
@keyframes dstAdimCik { to { opacity: 0; transform: translateX(-36px); } }
.dst-adim iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: var(--r-20); background: var(--kagit); }

.dst-o-alt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-gap: var(--b-4); gap: var(--b-4); align-items: center; padding: var(--b-3) var(--b-5) var(--b-4); }
.dst-o-durum { justify-self: center; display: grid; grid-template-columns: auto auto; grid-gap: 2px var(--b-3); gap: 2px var(--b-3); align-items: baseline; width: min(520px, 100%); }
.dst-o-durum b { font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); letter-spacing: var(--harf-baslik); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dst-o-durum span { justify-self: end; font-size: var(--y-16); color: var(--metin-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dst-o-cubuk { grid-column: 1 / -1; display: block; height: 6px; border-radius: var(--r-hap); background: var(--yuzey-3); overflow: hidden; }
.dst-o-cubuk i { display: block; height: 100%; width: 0; border-radius: var(--r-hap); background: var(--birincil); transition: width 1s linear; }
.dst-o-cubuk i.dst-asti { background: var(--uyari); }

/* ---------- adım içerikleri (ortak) */
.dst-ic { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-gap: var(--b-6); gap: var(--b-6); align-items: center; padding: var(--b-6) var(--b-7); min-height: 0; }
.dst-ic.dst-orta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-content: center; grid-gap: 0; gap: 0; }
.dst-ic.dst-orta > .dst-maskot { margin-bottom: var(--b-3); }
.dst-dev { margin: 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-72); line-height: var(--sy-72); letter-spacing: var(--harf-gosterim); }
.dst-dev em { font-style: normal; color: var(--birincil); }
.dst-orta-yazi { margin: var(--b-3) 0 0; font-size: var(--y-28); line-height: var(--sy-28); color: var(--metin-2); }
.dst-orta-yazi b { color: var(--metin); }
.dst-maskot { width: 260px; height: 260px; }
.dst-baslik { margin: 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-48); line-height: var(--sy-48); letter-spacing: var(--harf-gosterim); }

/* hava ve duygu seçicileri (gerçekçi nesne fotoğrafları) */
.dst-secim { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); grid-gap: var(--b-4); gap: var(--b-4); width: 100%; max-width: 1100px; margin-top: var(--b-5); }
.dst-sec { position: relative; display: grid; justify-items: center; align-content: start; padding: var(--b-4) var(--b-3) var(--b-3); min-height: 88px; border: 0; border-radius: var(--r-20); background: var(--yuzey-2); cursor: pointer;
  font: 700 var(--y-22) var(--baslik); color: var(--metin); transition: background-color var(--sure-orta) var(--yay), transform var(--sure-orta) var(--yay-geri), box-shadow var(--sure-orta) var(--yay); }
.dst-sec { min-width: 0; }
.dst-sec img { max-width: 100%; width: 140px; height: 140px; object-fit: contain; transition: transform var(--sure-yavas) var(--yay-geri); }
.dst-sec:active { transform: scale(.97); }
.dst-sec.dst-secili { background: var(--secili-zemin); box-shadow: inset 0 0 0 3px var(--secili-kenar); }
.dst-sec.dst-secili img { transform: scale(1.08) rotate(-3deg); }
.dst-sec .dst-sayi { position: absolute; right: 12px; top: 10px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--r-hap); background: var(--metin); color: #fff; display: grid; place-items: center;
  font-family: var(--baslik); font-weight: 800; font-size: var(--y-22); font-variant-numeric: tabular-nums; }
.dst-sec .dst-sayi.dst-sifir { background: var(--yuzey-3); color: var(--metin-2); }
.dst-sec .dst-cubukcuk { width: 100%; height: 10px; margin-top: var(--b-2); border-radius: var(--r-hap); background: var(--yuzey-3); overflow: hidden; }
.dst-sec .dst-cubukcuk i { display: block; height: 100%; width: 0; background: var(--tur-renk, var(--birincil)); transition: width var(--sure-yavas) var(--yay); }
.dst-yazisiz .dst-sec span.dst-ad, .dst-yazisiz .dst-yazi { display: none; }

.dst-sayacli { width: 100%; display: grid; justify-items: center; }
.dst-sayacli .dst-dugmeler { margin-top: var(--b-4); }
.dst-sec-ikon { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; color: var(--metin); box-shadow: inset 0 -6px 0 rgba(26,43,76,.12); transition: transform var(--sure-yavas) var(--yay-geri); }
.dst-sec-ikon .bk-simge { width: 72px; height: 72px; }
.dst-sec.dst-secili .dst-sec-ikon { transform: scale(1.08) rotate(-3deg); }
.dst-sec .dst-ad { margin-top: var(--b-2); }
.dst-sayi.dst-pop { animation: dstPop var(--sure-orta) var(--yay-geri); }

/* günün hedefi */
.dst-hedefler { margin: var(--b-5) 0 0; padding: 0; list-style: none; display: grid; grid-gap: var(--b-3); gap: var(--b-3); max-width: 60ch; }
.dst-hedefler li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-gap: var(--b-3); gap: var(--b-3); align-items: baseline; padding: var(--b-3) var(--b-4); border-radius: var(--r-14); background: var(--ders-zemin, var(--yuzey-2));
  font-size: var(--y-22); line-height: 1.35; }
.dst-hedefler code { font-family: var(--govde); font-weight: 700; font-size: var(--y-16); padding: 2px 10px; border-radius: var(--r-8); background: var(--yuzey); white-space: nowrap; }
.dst-yazisiz .dst-hedefler code { display: none; }

.dst-hedef-resim { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); grid-gap: var(--b-4); gap: var(--b-4); margin-bottom: var(--b-5); }
.dst-hedef-resim img { width: 100%; height: auto; max-height: 200px; object-fit: contain; border-radius: var(--r-20); background: var(--ders-zemin, var(--yuzey-2)); padding: var(--b-3); }
.dst-yazisiz .dst-sec img { width: 220px; height: 220px; }
.dst-yazisiz .dst-sec-ikon { width: 200px; height: 200px; }
.dst-yazisiz .dst-hk { grid-template-columns: 360px minmax(0, 1fr) auto; }
.dst-yazisiz .dst-hk-resim { width: 360px; height: 360px; }

/* zamanlayıcı halkası */
.dst-halka { position: relative; width: 340px; height: 340px; }
.dst-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dst-halka circle { fill: none; stroke-width: 22; }
.dst-halka .dst-h-zemin { stroke: var(--yuzey-3); }
.dst-halka .dst-h-dolu { stroke: var(--tur-renk, var(--birincil)); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke var(--sure-orta); }
.dst-halka .dst-h-sayi { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-items: center; align-content: center; }
.dst-halka .dst-h-sayi b { font-family: var(--baslik); font-weight: 800; font-size: var(--y-112); line-height: 1; letter-spacing: var(--harf-gosterim); font-variant-numeric: tabular-nums; }
.dst-halka .dst-h-sayi span { font-size: var(--y-18); color: var(--metin-2); }
.dst-halka.dst-bitti .dst-h-dolu { stroke: var(--basari); }
.dst-dugmeler { display: grid; grid-auto-flow: column; justify-content: center; grid-gap: var(--b-3); gap: var(--b-3); margin-top: var(--b-5); }

/* düşün-eşleş-paylaş */
.dst-dep { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: var(--b-5) var(--b-6); min-height: 0; }
.dst-dep-bas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-gap: var(--b-5); gap: var(--b-5); align-items: center; }
.dst-dep-resim { width: 132px; height: 132px; object-fit: contain; border-radius: var(--r-20); background: var(--tur-zemin, var(--yuzey-2)); padding: 8px; }
.dst-dep-soru { margin: 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-36); line-height: var(--sy-36); letter-spacing: var(--harf-baslik); max-width: 40ch; }
.dst-dep-asamalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: var(--b-4); gap: var(--b-4); margin-top: var(--b-5); min-height: 0; }
.dst-asama { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); justify-items: center; align-content: start; text-align: center; padding: var(--b-5) var(--b-4); border-radius: var(--r-20); background: var(--yuzey-2);
  opacity: .55; transition: opacity var(--sure-yavas) var(--yay), background-color var(--sure-yavas) var(--yay), transform var(--sure-yavas) var(--yay); }
.dst-asama i { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--yuzey); color: var(--metin); }
.dst-asama i .bk-simge { width: 52px; height: 52px; }
.dst-asama h3 { margin: var(--b-3) 0 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-36); letter-spacing: var(--harf-baslik); }
.dst-asama p { margin: var(--b-2) 0 0; font-size: var(--y-18); color: var(--metin-2); }
.dst-asama .dst-a-sure { margin-top: var(--b-3); font-family: var(--baslik); font-weight: 800; font-size: var(--y-48); font-variant-numeric: tabular-nums; color: var(--metin-3); }
.dst-asama.dst-aktif { opacity: 1; background: var(--tur-zemin); transform: translateY(-4px); }
.dst-asama.dst-aktif i { background: var(--tur-renk); }
.dst-asama.dst-aktif .dst-a-sure { color: var(--metin); }
.dst-asama.dst-tamam { opacity: .8; }
.dst-asama.dst-tamam i { background: var(--basari); color: #fff; }
.dst-asama[data-a="0"] { --tur-renk: var(--sik-3); --tur-zemin: #FFF6CC; }
.dst-asama[data-a="1"] { --tur-renk: var(--sik-2); --tur-zemin: #E6F0FF; }
.dst-asama[data-a="2"] { --tur-renk: var(--sik-4); --tur-zemin: #E3F7EA; }

/* hareket kartı */
.dst-hk { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; grid-gap: var(--b-6); gap: var(--b-6); align-items: center; padding: var(--b-6) var(--b-7); }
.dst-hk-resim { display: grid; place-items: center; width: 300px; height: 300px; border-radius: var(--r-20); background: var(--tur-zemin, var(--yuzey-2)); }
.dst-hk-resim svg, .dst-hk-resim img { width: 240px; height: 240px; object-fit: contain; }
.dst-hk-no { font-weight: 700; font-size: var(--y-18); color: var(--metin-2); }
.dst-hk h2 { margin: var(--b-2) 0 0; font-family: var(--baslik); font-weight: 800; font-size: var(--y-48); line-height: var(--sy-48); letter-spacing: var(--harf-baslik); }
.dst-hk .dst-guvenlik { display: inline-grid; grid-auto-flow: column; grid-gap: 8px; gap: 8px; align-items: center; margin-top: var(--b-4); padding: 8px 14px; border-radius: var(--r-14); background: var(--uyari-zemin); color: var(--uyari-koyu); font-weight: 700; font-size: var(--y-16); }
.dst-hk .dst-halka { width: 220px; height: 220px; }
.dst-hk .dst-halka b { font-size: var(--y-72); }

/* çark (numarayla; ad yok) */
.dst-cark-kap { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-gap: var(--b-7); gap: var(--b-7); align-items: center; padding: var(--b-5) var(--b-7); }
.dst-cark { position: relative; width: 440px; height: 440px; }
.dst-cark canvas { width: 100%; height: 100%; display: block; }
.dst-cark::after { content: ""; position: absolute; right: -14px; top: 50%; margin-top: -18px; border-style: solid; border-width: 18px 30px 18px 0; border-color: transparent var(--metin) transparent transparent; filter: drop-shadow(0 2px 2px rgba(26,43,76,.2)); }
.dst-cark-sonuc { min-height: 1em; font-family: var(--baslik); font-weight: 800; font-size: var(--y-112); line-height: 1; letter-spacing: var(--harf-gosterim); color: var(--birincil); font-variant-numeric: tabular-nums; }
.dst-cark-sonuc.dst-pop { animation: dstPop var(--sure-yavas) var(--yay-geri); }
@keyframes dstPop { from { transform: scale(.6); opacity: 0; } }
.dst-mevcut { display: inline-grid; grid-auto-flow: column; grid-gap: var(--b-2); gap: var(--b-2); align-items: center; margin-top: var(--b-4); font-size: var(--y-16); color: var(--metin-2); }
.dst-mevcut b { min-width: 2.2em; text-align: center; font-family: var(--baslik); font-size: var(--y-22); color: var(--metin); font-variant-numeric: tabular-nums; }
.dst-cikanlar { margin-top: var(--b-3); font-size: var(--y-16); color: var(--metin-2); max-width: 36ch; }

/* nefes */
.dst-nefes { position: relative; width: 380px; height: 380px; display: grid; place-items: center; }
.dst-nefes .dst-balon { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E4EFFF, #7DB7FF 60%, #4E8FE8);
  box-shadow: 0 30px 60px -30px rgba(42,75,215,.6); transform: scale(.6); transition: transform 4s cubic-bezier(.45,0,.55,1); }
.dst-nefes.dst-al .dst-balon { transform: scale(1.7); }
.dst-nefes b { position: relative; font-family: var(--baslik); font-weight: 800; font-size: var(--y-48); color: var(--metin); }
.dst-nefes-sayac { margin-top: var(--b-4); font-size: var(--y-22); color: var(--metin-2); }

/* oyun adımı */
.dst-oyun-kapak { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-gap: var(--b-7); gap: var(--b-7); align-items: center; padding: var(--b-6) var(--b-7); }
.dst-oyun-kapak .dst-foto { position: relative; height: 0; padding-top: 62.5%; border-radius: var(--r-20); overflow: hidden; background: var(--yuzey-2); box-shadow: var(--golge-2); }
.dst-oyun-kapak .dst-foto img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* bitti */
.dst-bitti-liste { display: grid; grid-auto-flow: column; justify-content: center; grid-gap: var(--b-2); gap: var(--b-2); margin-top: var(--b-5); }
.dst-bitti-liste span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-14); background: var(--tur-zemin); }
.dst-bitti-liste .bk-simge { width: 28px; height: 28px; }

/* editör (ikinci plan) */
.dst-ed-ad { width: 100%; }
.dst-ed-liste { margin: var(--b-4) 0 0; padding: 0; list-style: none; display: grid; grid-gap: var(--b-2); gap: var(--b-2); }
.dst-ed-liste li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; grid-gap: var(--b-2); gap: var(--b-2); align-items: center; padding: 4px 4px 4px 8px; border-radius: var(--r-14); background: var(--yuzey-2); }
.dst-ed-liste li > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-8); background: var(--tur-zemin); }
.dst-ed-liste li b { font-weight: 700; }
.dst-ed-ekle { margin-top: var(--b-4); }
.dst-ed-ekle > b { display: block; margin-bottom: var(--b-2); color: var(--metin-2); }
.dst-kendi-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-gap: var(--b-2); gap: var(--b-2); }
.dst-kendi-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-gap: var(--b-2); gap: var(--b-2); align-items: center; padding: 8px 8px 8px 16px; border-radius: var(--r-14); background: var(--yuzey-2); }
.dst-kendi-liste li small { display: block; color: var(--metin-2); }
.dst-bos { display: grid; justify-items: center; text-align: center; }
.dst-bos img { width: 100%; max-width: 420px; border-radius: var(--r-20); }
.dst-bos p { margin: var(--b-3) 0 0; color: var(--metin-2); }

/* ---------- duyarlılık */
@media (max-width: 1180px) {
  .dst-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .dst-o-adimlar li span { display: none; }
}
@media (max-width: 900px) {
  .dst-bas { grid-template-columns: 1fr; }
  .dst-bas-sag { grid-auto-flow: row; justify-items: start; }
  .dst-govde { grid-template-columns: 1fr; }
  .dst-izgara { grid-template-columns: 1fr; padding-right: 0; }
  .dst-o-ust { grid-template-columns: minmax(0, 1fr) auto; }
  .dst-o-adimlar { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .dst-o-adimlar li { padding: 0 8px; }
  .dst-saat { display: none; }
  .dst-o-alt .dst-o-durum { display: none; }
  .dst-o-alt { grid-template-columns: auto minmax(0, 1fr); }
  .dst-o-alt > :last-child { justify-self: end; }
  .dst-ic, .dst-hk, .dst-cark-kap, .dst-oyun-kapak { grid-template-columns: 1fr; padding: var(--b-5) var(--b-4); grid-gap: var(--b-4); gap: var(--b-4); justify-items: center; text-align: center; overflow: auto; }
  .dst-dev { font-size: var(--y-48); line-height: var(--sy-48); }
  .dst-baslik, .dst-hk h2 { font-size: var(--y-28); line-height: var(--sy-28); }
  .dst-orta-yazi { font-size: var(--y-18); }
  .dst-maskot { width: 140px; height: 140px; }
  .dst-secim { --n: 2 !important; }
  .dst-sec img, .dst-yazisiz .dst-sec img { width: 88px; height: 88px; }
  .dst-yazisiz .dst-hk { grid-template-columns: 1fr; } .dst-yazisiz .dst-hk-resim { width: 180px; height: 180px; }
  .dst-dep { padding: var(--b-4); overflow: auto; }
  .dst-dep-soru { font-size: var(--y-22); line-height: var(--sy-22); }
  .dst-dep-resim { width: 88px; height: 88px; }
  .dst-sec-ikon { width: 88px; height: 88px; } .dst-sec-ikon .bk-simge { width: 44px; height: 44px; }
  .dst-hedefler li { font-size: var(--y-18); }
  .dst-dep-asamalar { grid-template-columns: 1fr; }
  .dst-asama { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: none; justify-items: start; text-align: left; align-items: center; grid-gap: var(--b-3); gap: var(--b-3); padding: var(--b-3); }
  .dst-asama i { width: 56px; height: 56px; } .dst-asama i .bk-simge { width: 32px; height: 32px; }
  .dst-asama h3 { margin: 0; font-size: var(--y-22); } .dst-asama p { display: none; } .dst-asama .dst-a-sure { margin: 0; font-size: var(--y-28); }
  .dst-halka { width: 240px; height: 240px; } .dst-halka .dst-h-sayi b { font-size: var(--y-72); }
  .dst-hk-resim { width: 180px; height: 180px; } .dst-hk-resim svg, .dst-hk-resim img { width: 140px; height: 140px; }
  .dst-hk .dst-halka { width: 160px; height: 160px; }
  .dst-cark { width: 280px; height: 280px; }
  .dst-cark-sonuc { font-size: var(--y-72); }
  .dst-nefes { width: 260px; height: 260px; } .dst-nefes .dst-balon { width: 130px; height: 130px; }
  .dst-adim .dst-dugmeler { grid-auto-flow: row; justify-content: stretch; width: 100%; }
  .dst-dep-asamalar { align-content: start; }
  .dst-dep-bas { grid-template-columns: minmax(0, 1fr) auto; } .dst-dep-resim { grid-column: 1 / -1; }
  .dst-hedef-resim { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 1280×720 tahta: dikey bütçe */
@media (min-width: 901px) and (max-height: 800px) {
  .kap { padding-top: 8px; padding-bottom: 16px; }
  .dst-sayfa { grid-gap: var(--b-4); gap: var(--b-4); }
  .dst-bas h1 { font-size: var(--y-36); line-height: var(--sy-36); }
  .dst-bes-foto { padding-top: 36%; }
  .dst-cekilis { min-height: 112px; margin: var(--b-3) 0; }
  .dst-kartlar span { width: 80px; height: 100px; }
  .dst-kart { padding: var(--b-3) var(--b-4); }
  .dst-kart p { font-size: var(--y-14); }
  .dst-kart h3 { font-size: var(--y-18); line-height: 1.25; }
  .dst-kart-alt { margin-top: var(--b-2); }
  .dst-kart-alt .bk-dugme { min-height: 48px; padding: 0 var(--b-4); }
  .dst-akis { margin-top: var(--b-2); }
  .dst-akis span { height: 34px; }
  .dst-ic { padding: var(--b-5) var(--b-6); }
  .dst-dev { font-size: var(--y-48); line-height: var(--sy-48); }
  .dst-baslik, .dst-hk h2 { font-size: var(--y-36); line-height: var(--sy-36); }
  .dst-orta-yazi { font-size: var(--y-22); }
  .dst-maskot { width: 200px; height: 200px; }
  .dst-sec img { width: 104px; height: 104px; }
  .dst-sec-ikon { width: 104px; height: 104px; } .dst-sec-ikon .bk-simge { width: 56px; height: 56px; }
  .dst-hedefler { margin-top: var(--b-4); } .dst-hedefler li { font-size: var(--y-18); padding: var(--b-2) var(--b-4); }
  .dst-dep-resim { width: 104px; height: 104px; }
  .dst-yazisiz .dst-sec img { width: 168px; height: 168px; }
  .dst-yazisiz .dst-sec-ikon { width: 150px; height: 150px; }
  .dst-yazisiz .dst-hk { grid-template-columns: 300px minmax(0, 1fr) auto; }
  .dst-yazisiz .dst-hk-resim { width: 300px; height: 300px; }
  .dst-hedef-resim img { max-height: 150px; }
  .dst-halka { width: 260px; height: 260px; } .dst-halka .dst-h-sayi b { font-size: var(--y-72); }
  .dst-dep-soru { font-size: var(--y-28); line-height: var(--sy-28); }
  .dst-asama { padding: var(--b-4) var(--b-3); } .dst-asama i { width: 72px; height: 72px; } .dst-asama i .bk-simge { width: 40px; height: 40px; }
  .dst-asama h3 { font-size: var(--y-28); } .dst-asama .dst-a-sure { font-size: var(--y-36); margin-top: var(--b-2); }
  .dst-hk { padding: var(--b-5) var(--b-6); grid-template-columns: 240px minmax(0, 1fr) auto; }
  .dst-hk-resim { width: 240px; height: 240px; } .dst-hk-resim svg, .dst-hk-resim img { width: 190px; height: 190px; }
  .dst-hk .dst-halka { width: 180px; height: 180px; }
  .dst-cark { width: 360px; height: 360px; }
  .dst-nefes { width: 320px; height: 320px; } .dst-nefes .dst-balon { width: 160px; height: 160px; }
}
@media (min-width: 1700px) and (min-height: 900px) {
  .dst-bas h1 { font-size: var(--y-72); line-height: var(--sy-72); }
  .dst-govde { grid-template-columns: 440px minmax(0, 1fr); }
  .dst-kart h3 { font-size: var(--y-28); line-height: var(--sy-28); }
  .dst-dev { font-size: var(--y-112); line-height: var(--sy-112); }
  .dst-sec img { width: 180px; height: 180px; }
  .dst-halka { width: 420px; height: 420px; }
  .dst-cark { width: 560px; height: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .dst-adim.dst-gir, .dst-adim.dst-cik, .dst-sonuc, .dst-cekilis.dst-karisiyor .dst-kartlar span { animation: none; }
  .dst-nefes .dst-balon { transition-duration: 1ms; }
}