/* SAHNE · REHBERLİK TESTİ (includes/scenes/guidance-tests.php) — modül sayfası kahraman sütunu, ~330–680 px. Adımlar:
   s0 öğrencinin telefonu: Madde 50 · s1 «Yanlış» → 50/50, kendiliğinden «Son kontrol» · s2 «Testi gönder» → «Teşekkürler!» ·
   s3 rehberin panosu: bant dağılımı · s4 «Isı haritası» · s5 Can Kılınç'ın satırı · s6 bireysel karne · s7 karne kayar: uzman görüşü.
   Katmanlar aynı ızgara hücresinde üst üste durur (display değiş-tokuşu yok); --d: o adımda sonucun göründüğü an. */
@property --gtt-ring { syntax: '<number>'; inherits: false; initial-value: 98; }

.gtt { container-type: inline-size; --H: 452px; --kbar: 40px; --d: 0s;
  --gtt-d: #e8eef7; --gtt-d-ink: #1d3a5f; --gtt-y: #1f4573; --gtt-y-ink: #fff;
  --gtt-bd: #e3eaf4; --gtt-by: #a9bcd8; --gtt-sel: #e9f0f8; --gtt-ok: #047857;
  --gtt-sp: cubic-bezier(.34, 1.56, .64, 1); }
.gtt.s1 { --d: .78s; } .gtt.s2 { --d: .45s; } .gtt.s3 { --d: 0s; }
.gtt-win { position: relative; display: flex; flex-direction: column; height: var(--H); border-radius: 14px; }
.gtt-i { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gtt-x { display: grid; min-width: 0; }
.gtt-x > * { grid-area: 1 / 1; min-width: 0; }
.gtt .o01, .gtt .o1, .gtt .o02, .gtt .o2 { opacity: 0; translate: 0 4px; transition: opacity .25s var(--ui-ease) var(--d), translate .3s var(--ui-ease) var(--d); }
.gtt:not(.s1) .o01, .gtt.s1 .o1, .gtt:not(.s2) .o02, .gtt.s2 .o2 { opacity: 1; translate: 0 0; }

/* imleç (masaüstü) */
.gtt-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.gtt-hit .ui-cur { left: -5px; top: -3px; transform: translate(16px, 14px); transition: opacity .2s var(--ui-ease); }
.gtt-rip { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .55); opacity: 0; }
@keyframes gtt-cur { 0% { opacity: 0; transform: translate(16px, 14px); } 34% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes gtt-cur-out { 0% { opacity: 0; transform: translate(18px, 3px); } 30% { opacity: 1; transform: none; scale: 1; } 44% { scale: .8; } 56% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes gtt-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
/* parmak (telefon): yumuşak daire iner, basar, halka yayılır, kalkar */
.gtt-tap { position: absolute; z-index: 6; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .78), rgba(220, 229, 241, .55) 70%);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .3), 0 2px 5px rgba(16, 37, 64, .25), 0 10px 18px -8px rgba(16, 37, 64, .45); }
.gtt-tap i { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(16, 37, 64, .28); opacity: 0; }
@keyframes gtt-dokun { 0% { opacity: 0; transform: translate(10px, 14px); scale: 1; } 30% { opacity: 1; transform: none; scale: 1; } 46% { scale: .76; } 62% { scale: 1; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(6px, 8px); } }
@keyframes gtt-dalga { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: 2.3; } }

/* ══ PANO: başlık bandı (kurum rengi) + klasör sekmeleri ══ */
.gtt-band { flex: none; padding: 12px 14px 0; color: #fff; border-radius: 13px 13px 0 0;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.gtt-hd { display: flex; align-items: center; gap: 11px; height: 36px; }
.gtt-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.gtt-ico .gtt-i { width: 18px; height: 18px; stroke-width: 1.8; }
.gtt-ttl { flex: 1; min-width: 0; line-height: 1; }
.gtt-ttl b { display: block; font-size: 15px; font-weight: 800; line-height: 19px; letter-spacing: -.012em; white-space: nowrap; }
.gtt-ttl small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; line-height: 15px; color: rgba(255, 255, 255, .8); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gtt-more { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.gtt-more .gtt-i { width: 16px; height: 16px; }
.gtt-chips { display: flex; gap: 5px; height: 20px; margin-top: 8px; overflow: hidden; }
.gtt-chip { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-size: 10.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gtt-chip b { font-weight: 900; }
.gtt-chip--ac { background: #d1fae5; color: #065f46; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); font-weight: 800; }
.gtt-tabs { position: relative; display: flex; gap: 2px; height: 30px; margin-top: 10px; overflow: hidden; }
.gtt-tab { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 9px 9px 0 0; font-size: 11.5px; font-weight: 800;
  color: rgba(255, 255, 255, .86); white-space: nowrap; transition: color .3s var(--ui-ease) var(--d); }
.gtt-tab .gtt-i { width: 13px; height: 13px; }
.gtt-tab em { margin-left: 1px; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .16); font-style: normal; font-size: 10px; font-weight: 800; }
/* etkin sekme: beyaz «klasör» zemini iki sekme arasında kayar */
.gtt-tab--gb::before, .gtt-tab--ih::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: #fff; opacity: 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .6); transition: opacity .28s var(--ui-ease) var(--d); }
.gtt-tabs > * { z-index: 0; }
.gtt-tab--gb, .gtt-tab--ih { isolation: isolate; }
.gtt:not(.s4) .gtt-tab--gb, .gtt.s4 .gtt-tab--ih { color: var(--navy); }
.gtt:not(.s4) .gtt-tab--gb::before, .gtt.s4 .gtt-tab--ih::before { opacity: 1; }
/* sekme şeridi 28–30 px ve overflow:hidden: ok ucu yazının üst yarısında, imleç sağdan neredeyse yatay gelir, dalga küçük kalır */
.gtt-tab--ih .gtt-hit { left: 64%; top: 11px; }
.gtt.s4 { --d: .48s; } .gtt.s5 { --d: .3s; }
.gtt.s4:not(.s5) .gtt-hit--tab .ui-cur { animation: gtt-cur-out 1.15s var(--ui-ease) both; }
.gtt.s4:not(.s5) .gtt-hit--tab .gtt-rip { animation: gtt-rip-t .55s ease-out .4s both; }
@keyframes gtt-rip-t { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1; } }

/* gövde: iki sekme aynı hücrede */
.gtt-body { position: relative; flex: 1; min-height: 0; display: grid; overflow: hidden; background: var(--ui-bg-2); }
.gtt-p { grid-area: 1 / 1; min-width: 0; padding: 10px 14px 0; }
.gtt-card { border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), 0 10px 22px -18px rgba(16, 37, 64, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* Genel bakış */
.gtt-gb { transition: opacity .3s var(--ui-ease) var(--d), translate .4s var(--ui-ease) var(--d); }
.gtt.s4 .gtt-gb { opacity: 0; translate: -10px 0; }
.gtt-vis { display: flex; align-items: center; gap: 6px; min-height: 20px; font-size: 11px; font-weight: 600; line-height: 15px; color: var(--ui-text-2); }
.gtt-vis > .gtt-i { width: 13px; height: 13px; color: var(--navy-soft); }
.gtt-vis b { font-weight: 800; color: var(--ui-text); }
.gtt-bdc { margin-top: 8px; padding: 10px 12px 12px; }
.gtt-sh, .gtt-bsh { display: flex; align-items: center; gap: 9px; min-height: 30px; }
.gtt-sh__i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ui-primary-soft); color: var(--navy-soft); box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .1); }
.gtt-sh__i .gtt-i { width: 15px; height: 15px; }
.gtt-sh__t { min-width: 0; line-height: 1; }
.gtt-sh__t b { display: block; font-size: 12.5px; font-weight: 800; line-height: 16px; letter-spacing: -.005em; }
.gtt-sh__t small { display: block; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--ui-muted); }
.gtt-dims { display: grid; gap: 4px; margin-top: 10px; }
.gtt-dim { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 26px; }
.gtt-dim__h { min-width: 0; line-height: 12px; }
.gtt-dim__h b { font-size: 10.5px; font-weight: 700; color: var(--ui-text); }
.gtt-sb { position: relative; display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: #f1f4f8; }
.gtt-sb i { position: relative; display: grid; place-items: center; width: var(--w); height: 100%; font-style: normal; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  scale: 0 1; transform-origin: left; transition: scale .6s var(--ui-ease) calc(.25s + var(--i) * 70ms); }
.gtt-sb i.d { background: var(--gtt-d); color: var(--gtt-d-ink); }
.gtt-sb i.y { background: var(--gtt-y); color: var(--gtt-y-ink); transform-origin: right; transition-delay: calc(.4s + var(--i) * 70ms); }
.gtt-sb i span { opacity: 0; transition: opacity .3s var(--ui-ease) calc(.7s + var(--i) * 70ms); }
.gtt-sb i.y + i, .gtt-sb i.d + i.y { box-shadow: -1px 0 0 #fff; }
.gtt.s3 .gtt-sb i { scale: 1 1; }
.gtt.s3 .gtt-sb i span { opacity: 1; }
/* lejant (tpYiginHtml): yalnız ilk boyutun altında; son sütunda durur (geniş kapta çubuğun altı, dar kapta tek sütun) */
.gtt-dim:first-child .gtt-dim__h { grid-row: span 2; }   /* ad, çubuk + lejant bloğunun ortasında */
.gtt-lg { grid-column: -2 / -1; display: flex; gap: 12px; margin-top: 3px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--ui-text-2);
  opacity: 0; transition: opacity .3s var(--ui-ease) .85s; }
.gtt.s3 .gtt-lg { opacity: 1; }
.gtt-lg > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gtt-lg i { flex: none; width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .12); }
.gtt-lg b { font-weight: 800; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.gtt-lg small { font-size: 10px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }

/* Isı haritası */
.gtt-ih { opacity: 0; translate: 10px 0; transition: opacity .3s var(--ui-ease) var(--d), translate .4s var(--ui-ease) var(--d); }
.gtt.s4 .gtt-ih { opacity: 1; translate: 0 0; }
.gtt-tool { display: flex; align-items: center; gap: 6px; height: 28px; }
.gtt-sel { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 8px 0 10px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 700; color: var(--ui-text); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); }
.gtt-sel .gtt-i { width: 12px; height: 12px; color: var(--ui-muted); }
.gtt-cnt { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 600; color: var(--ui-text-2); white-space: nowrap; }
.gtt-cnt b { font-weight: 800; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.gtt-csv { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 800; color: var(--ui-text);
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); }
.gtt-csv .gtt-i { width: 12px; height: 12px; }
.gtt-hm { margin-top: 8px; padding-bottom: 4px; overflow: hidden; }
.gtt-key { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 28px; padding: 6px 12px; border-bottom: 1px solid #eef0f3; font-size: 10px; font-weight: 600; line-height: 14px; color: var(--ui-text-2); }
.gtt-key b { font-weight: 800; color: var(--ui-text); }
.gtt-key > span { display: inline-flex; align-items: center; gap: 5px; }
.gtt-key i { display: block; width: 18px; height: 11px; border-radius: 3px; }
.gtt-key small { font-size: 10px; color: var(--ui-muted); }
.gtt i.d { background: var(--gtt-d); } .gtt i.y { background: var(--gtt-y); }
.gtt-key i.d { box-shadow: inset 0 0 0 1px rgba(29, 58, 95, .12); }
.gtt-hr { --hc: 24px; display: grid; grid-template-columns: 150px repeat(7, minmax(0, 1fr)); align-items: center; column-gap: 4px; height: 30px; padding: 0 8px 0 12px;
  box-shadow: inset 0 -1px 0 #f1f2f5; transition: background-color .25s var(--ui-ease) .25s; }
.gtt-hr--h { height: 26px; font-size: 10px; font-weight: 800; color: #52525b; }
.gtt-hr--h .gtt-hc { text-align: center; }
.gtt-hr__ad { min-width: 0; line-height: 12px; white-space: nowrap; }
.gtt-hr__ad small { font-size: 10px; font-weight: 600; color: var(--ui-muted); }
.gtt-hr__ad b { position: relative; display: block; width: max-content; max-width: 100%; font-size: 11.5px; font-weight: 800; line-height: 14px; color: var(--ui-text);
  text-decoration: underline transparent; text-underline-offset: 2px; transition: color .25s var(--ui-ease) .25s, text-decoration-color .25s var(--ui-ease) .25s; }
.gtt-hr__ad b + small { display: block; }
.gtt-hc { min-width: 0; }
.gtt-hc i { display: grid; place-items: center; height: var(--hc); border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  opacity: 0; scale: .6; transition: opacity .25s var(--ui-ease), scale .4s var(--gtt-sp); transition-delay: calc(.55s + var(--r) * 55ms + var(--c) * 25ms); }
.gtt-hc i.d { color: var(--gtt-d-ink); } .gtt-hc i.y { color: var(--gtt-y-ink); }
.gtt.s4 .gtt-hc i { opacity: 1; scale: 1; }
.gtt.s5 .gtt-hr--can { background: #f3f7fc; box-shadow: inset 2px 0 0 var(--navy-soft), inset 0 -1px 0 #e6edf6; }
.gtt.s5 .gtt-hr--can .gtt-hr__ad b { color: var(--navy-soft); text-decoration-color: currentColor; }
.gtt-hr__ad .gtt-hit { left: 38px; top: 9px; }
.gtt.s5:not(.s6) .gtt-hit--can .ui-cur { animation: gtt-cur .85s var(--ui-ease) both; }
.gtt.s5:not(.s6) .gtt-hit--can .gtt-rip { animation: gtt-rip .55s ease-out .4s both; }
.gtt-hm .gtt-hr:nth-child(n+10) { display: none; }   /* tabanda 7 öğrenci satırı */

/* ══ BİREYSEL KARNE (yaprak yukarı kayar) ══ */
.gtt-kar { position: absolute; z-index: 8; inset: 6px 6px 0; display: flex; flex-direction: column; border-radius: 12px 12px 0 0; background: var(--ui-bg-2); overflow: hidden; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 -1px 3px rgba(16, 37, 64, .06), 0 -20px 40px -18px rgba(16, 37, 64, .5);
  opacity: 0; translate: 0 40px; transition: opacity .3s var(--ui-ease), translate .6s cubic-bezier(.3, 1.2, .5, 1); }
.gtt.s6 .gtt-kar { opacity: 1; translate: 0 0; }
.gtt-kbar { flex: none; display: flex; align-items: center; gap: 10px; height: var(--kbar); padding: 0 8px 0 12px; background: #fff; box-shadow: inset 0 -1px 0 var(--ui-line); }
.gtt-kbar__b { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ui-text-2); white-space: nowrap; }
.gtt-kbar__b .gtt-i { width: 13px; height: 13px; }
.gtt-kbar__t { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.gtt-kbar__p { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap;
  background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 12px -8px rgba(20, 61, 107, .75); }
.gtt-kbar__p .gtt-i { width: 13px; height: 13px; }
.gtt-kv { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.gtt-kv::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(rgba(246, 247, 249, 0), rgba(246, 247, 249, .92) 62%, var(--ui-bg-2)); pointer-events: none; }
.gtt-kv::after { transition: opacity .3s var(--ui-ease) .9s; }
.gtt.s7 .gtt-kv::after { opacity: 0; }
.gtt-ks { padding: 8px 8px 12px; }
/* s7: karne aşağı kayar — üstteki bölümler (baş, özet, ilk üç boyut) yukarı çıkarak kaybolur, yükseklikleri sıfıra iner;
   kaydırma miktarı içeriğin kendisinden gelir: her kap genişliğinde son kare bir satır sınırında başlar, yarım satır kalmaz */
.gtt-cl { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 1s cubic-bezier(.45, .05, .2, 1) .15s, opacity .45s var(--ui-ease) .15s, margin-top 1s cubic-bezier(.45, .05, .2, 1) .15s; }
.gtt-cl > div { min-height: 0; overflow: hidden; }
.gtt-cl > div > * { transition: translate 1s cubic-bezier(.45, .05, .2, 1) .15s; }
.gtt.s7 .gtt-cl { grid-template-rows: 0fr; opacity: 0; }
.gtt.s7 .gtt-cl > div > * { translate: 0 -40px; }
.gtt-cl--oz { margin-top: 8px; }
.gtt.s7 .gtt-cl--oz { margin-top: 0; }
.gtt.s7 .gtt-bls { margin-top: 0; }

.gtt-kh { display: block; padding: 11px 12px; border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px -14px rgba(11, 36, 64, .7); }
.gtt-kh__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gtt-kh__kr { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; font-weight: 800; line-height: 16px; white-space: nowrap; }
.gtt-kh__lg { flex: none; display: grid; place-items: center; height: 24px; padding: 0 6px; border-radius: 7px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.gtt .gtt-kh__lg .gtt-logo { width: 18px; height: 18px; box-shadow: none; }
.gtt-kh__ad { display: block; margin-top: 9px; min-width: 0; line-height: 1; }
.gtt-kh__ad small { display: block; font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.gtt-kh__ad b { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; line-height: 20px; letter-spacing: -.015em; }
.gtt-kh__ad > span { display: block; font-size: 10.5px; font-weight: 600; line-height: 14px; color: rgba(255, 255, 255, .84); white-space: nowrap; }
.gtt-gizli { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.gtt-gizli .gtt-i { width: 11px; height: 11px; }
.gtt-kun { display: grid; grid-template-columns: minmax(0, 1.25fr) 70px minmax(0, 1.6fr) 70px; margin-top: 9px; border-radius: 9px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.gtt-kun > span { min-width: 0; padding: 5px 9px; line-height: 1; }
.gtt-kun > span + span { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16); }
.gtt-kun small { display: block; font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.gtt-kun b { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 800; line-height: 15px; white-space: nowrap; }
.gtt-kun .gtt-kun__ad b { font-size: 13px; letter-spacing: -.01em; }   /* künyenin ad hücresi iri (tk-kunye-ad) */
.gtt-gor { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.gtt-gor__b { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.gtt-gor__b .gtt-i { width: 12px; height: 12px; }
.gtt-hap { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 10px; font-weight: 800; white-space: nowrap; }

.gtt-oz { display: block; padding: 9px 11px 10px; border-radius: 12px; background: #eef3fa; box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .1); }
.gtt-oz > span { display: block; }
.gtt-oz__e { display: flex !important; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; line-height: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--navy-soft); }
.gtt-oz__e .gtt-i { width: 12px; height: 12px; }
.gtt-oz__s { display: flex !important; gap: 7px; margin-top: 5px; font-size: 10.5px; font-weight: 500; line-height: 14px; color: var(--ui-text-2); }
.gtt-oz__s b { font-weight: 800; color: var(--ui-text); }
.gtt-oz__s > i { flex: none; width: 9px; height: 9px; margin-top: 2.5px; border-radius: 50%; }
.gtt-oz__s > i.y { background: var(--gtt-by); box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .2); }
.gtt-oz__s > i.d { background: var(--gtt-bd); box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .16); }

.gtt-bls { display: block; margin-top: 8px; padding: 9px 11px 6px; transition: margin-top 1s cubic-bezier(.45, .05, .2, 1) .15s; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.gtt-blg { display: flex; gap: 12px; margin: 6px 0 2px; font-size: 10px; font-weight: 700; color: var(--ui-text-2); }
.gtt-blg > span { display: inline-flex; align-items: center; gap: 5px; }
.gtt-blg i { display: block; width: 14px; height: 9px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .1); }
.gtt-blg i.d, .gtt-bl__iz i.d, .gtt-bl__et i.d { background: var(--gtt-bd); }
.gtt-blg i.y, .gtt-bl__iz i.y, .gtt-bl__et i.y { background: var(--gtt-by); }
.gtt-bl { display: grid; grid-template-columns: minmax(0, 1fr) 196px 64px; grid-template-areas: "ad iz p" "ad o et"; align-items: center; column-gap: 12px; padding: 7px 0 4px; border-top: 1px solid #eef0f3;
  opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(.3s + var(--i) * 60ms), translate .4s var(--ui-ease) calc(.3s + var(--i) * 60ms); }
.gtt-cl:nth-child(2) > div > .gtt-bl:first-child { border-top: 0; }
.gtt.s7 .gtt-bl--y { border-top-color: transparent; }
.gtt.s6 .gtt-bl { opacity: 1; translate: 0 0; }
.gtt-bl__ad { grid-area: ad; min-width: 0; font-size: 11px; font-weight: 800; line-height: 14px; color: var(--ui-text); }
.gtt-bl__p { grid-area: p; justify-self: end; font-size: 10px; font-weight: 600; color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gtt-bl__p b { font-size: 13px; font-weight: 900; color: var(--ui-text); letter-spacing: -.02em; }
.gtt-bl__iz { grid-area: iz; position: relative; height: 10px; border-radius: 5px; background: #eef1f5; }
.gtt-bl__iz i.d, .gtt-bl__iz i.y { position: absolute; top: 0; bottom: 0; }
.gtt-bl__iz i.d { left: 0; border-radius: 5px 0 0 5px; }
.gtt-bl__iz i.y { right: 0; border-radius: 0 5px 5px 0; box-shadow: inset 1px 0 0 #fff; }
.gtt-bl__iz i.m { position: absolute; top: -6px; bottom: -6px; left: 0; width: 0; transition: left .7s var(--ui-ease) calc(.55s + var(--i) * 70ms); }
.gtt-bl__iz i.m::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--ui-text); }
.gtt-bl__iz i.m::after { content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--navy-soft); box-shadow: 0 0 0 2.5px #fff, 0 1px 3px rgba(16, 37, 64, .35); }
.gtt.s6 .gtt-bl__iz i.m { left: var(--x); }  /* --x: işaretin konumu (puanın aralıktaki yüzdesi) */
/* s6'da görünmeyen son dört boyutun (SK4–SK7, .gtt-bls'in doğrudan çocukları) işareti s7'de, kayma bitince puana gider */
.gtt.s6:not(.s7) .gtt-bls > .gtt-bl .gtt-bl__iz i.m { left: 0; }
.gtt.s7 .gtt-bls > .gtt-bl .gtt-bl__iz i.m { transition-delay: calc(1.05s + (var(--i) - 3) * 70ms); }
.gtt-bl__et { grid-area: et; justify-self: end; display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 7px 0 5px; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 800; color: var(--ui-text-2);
  box-shadow: inset 0 0 0 1px var(--ui-line); white-space: nowrap; }
.gtt-bl__et i { display: block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .15); }
.gtt-bl--y .gtt-bl__et { background: #e9eff8; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .28); }
.gtt-bl__o { grid-area: o; position: relative; height: 13px; font-size: 10px; font-weight: 700; line-height: 13px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.gtt-bl__o span { position: absolute; top: 0; translate: -50% 0; }
.gtt-bl__o span:first-child { translate: 0 0; }
.gtt-bl__o span:last-child { translate: -100% 0; }

.gtt-uz { display: block; margin-top: 8px; padding: 9px 11px 11px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: box-shadow .4s var(--ui-ease) .9s; }
.gtt.s7 .gtt-uz { box-shadow: 0 0 0 1px rgba(29, 79, 134, .35), 0 0 0 4px rgba(29, 79, 134, .08), 0 1px 2px rgba(16, 37, 64, .05); }
.gtt-uz__k { display: block; margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: #f4f7fb; box-shadow: inset 3px 0 0 var(--navy-soft); }
.gtt-uz__m { display: block; font-size: 11px; font-weight: 500; line-height: 16px; color: var(--ui-text); text-wrap: pretty; }
.gtt-uz__a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 7px; }
.gtt-uz__y { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--ui-text-2); white-space: nowrap; }
.gtt-uz__y .gtt-i { width: 12px; height: 12px; }
.gtt-uz__r { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 999px; background: #e3ebf6; color: var(--navy); font-size: 10px; font-weight: 800; white-space: nowrap; }
.gtt-uz__r .gtt-i { width: 11px; height: 11px; }

/* ══ ÖĞRENCİNİN TELEFONU (panonun önünde, s0–s2) ══ */
.gtt-scrim { position: absolute; z-index: 9; inset: 0; border-radius: inherit; background: rgba(14, 30, 52, .34); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  transition: opacity .5s var(--ui-ease) .15s; }
.gtt.s3 .gtt-scrim { opacity: 0; }
.gtt-ph { position: absolute; z-index: 10; top: 14px; left: 26px; width: 244px; height: calc(var(--H) - 28px); padding: 6px; border-radius: 34px;
  background: linear-gradient(160deg, #22344d, var(--navy-night) 40%, #0a1626);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 4px rgba(11, 36, 64, .2), 0 30px 60px -24px rgba(11, 36, 64, .65);
  transition: opacity .4s var(--ui-ease) .05s, translate .6s cubic-bezier(.5, 0, .75, .2); }
.gtt:not(.s1) .gtt-ph { animation: gtt-ph-in .7s cubic-bezier(.3, 1.2, .5, 1) .05s both; }
@keyframes gtt-ph-in { from { opacity: 0; translate: -30px 24px; } }
@keyframes gtt-ph-in-n { from { opacity: 0; translate: 0 30px; } }
.gtt.s3 .gtt-ph { opacity: 0; translate: -40px 60px; }
.gtt-ph__tag { position: absolute; left: 50%; bottom: -9px; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px 0 6px; border-radius: 999px;
  background: var(--sun); color: var(--sun-ink, #2a1c00); font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16, 37, 64, .45); }
.gtt-ph__tag .gtt-i { width: 11px; height: 11px; stroke-width: 2.4; }
.gtt-scr { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #f5f6fa; }
.gtt-stb { position: absolute; z-index: 5; inset: 0 0 auto; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 20px; color: #0b1526; pointer-events: none; }
.gtt-stb > b { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gtt-isl { position: absolute; left: 50%; top: 6px; width: 60px; height: 17px; margin-left: -30px; border-radius: 999px; background: #05070b; }
.gtt-stb__i { display: flex; align-items: center; gap: 3px; }
.gtt-stb__i .gtt-i { width: 12px; height: 12px; stroke-width: 2.4; }
.gtt-stb__i .gtt-bat { width: 17px; height: 13px; }

/* test formu (odak kipi) */
.gtt-fill { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 26px; transition: opacity .3s var(--ui-ease) 1s, translate .4s var(--ui-ease) 1s; }
.gtt.s2 .gtt-fill { opacity: 0; translate: 0 -8px; }
.gtt-fu { position: relative; flex: none; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 4px; height: 44px; padding: 0 6px 3px; }
.gtt-ib { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--ui-text); }
.gtt-ib .gtt-i { width: 17px; height: 17px; }
.gtt-fu__o { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; line-height: 1; }
.gtt-fu__o .gtt-x { justify-items: center; }
.gtt-fu__o b { font-size: 12.5px; font-weight: 800; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gtt-fu__o small { font-size: 10px; font-weight: 600; line-height: 13px; color: #52525b; white-space: nowrap; }
.gtt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #e4e4e7; }
.gtt-bar i { display: block; width: 100%; height: 100%; border-radius: 0 3px 3px 0; background: var(--navy-soft); scale: .98 1; transform-origin: left; transition: scale .4s cubic-bezier(.2, .8, .2, 1) var(--d); }
.gtt.s1 .gtt-bar i { scale: 1 1; border-radius: 0; }
.gtt-fs { position: relative; flex: 1; min-height: 0; display: grid; padding: 0 12px; }
.gtt-q, .gtt-son { grid-area: 1 / 1; align-self: center; min-width: 0; }
.gtt-q { display: block; transition: opacity .1s linear 1.1s, translate .2s cubic-bezier(.2, .8, .2, 1) 1.1s; }   /* uygulamada eski madde anında gizlenir */
.gtt.s1 .gtt-q { opacity: 0; translate: -28px 0; }
.gtt-q__no { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #52525b; }
.gtt-q__m { display: block; margin: 4px 0 16px; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: -.01em; color: #18181b; text-wrap: pretty; }
.gtt-sec { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 12px; background: #fff; font-size: 13.5px; font-weight: 600; color: #18181b;
  box-shadow: inset 0 0 0 1.5px #d4d4d8; transition: box-shadow .15s ease var(--d), background-color .15s ease var(--d); }
.gtt-sec + .gtt-sec { margin-top: 8px; }
.gtt-rd { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px #71717a; background: #fff; transition: box-shadow .15s ease var(--d), background-color .15s ease var(--d); }
.gtt.s1 .gtt-sec--y { background: var(--gtt-sel); box-shadow: inset 0 0 0 1.5px var(--navy-soft), inset 0 0 0 2.5px var(--navy-soft); animation: gtt-secim .2s ease-out var(--d) both; }
.gtt.s1 .gtt-sec--y .gtt-rd { background: var(--navy-soft); box-shadow: inset 0 0 0 2px var(--navy-soft), inset 0 0 0 5px #fff; }
@keyframes gtt-secim { 0% { scale: .975; } 100% { scale: 1; } }
.gtt-tap--yan { left: 62%; top: 50%; }
.gtt.s1:not(.s2) .gtt-tap--yan { animation: gtt-dokun .9s var(--ui-ease) .4s both; }
.gtt.s1:not(.s2) .gtt-tap--yan i { animation: gtt-dalga .55s ease-out .74s both; }

/* son kontrol */
.gtt-son { display: block; opacity: 0; translate: 28px 0; transition: opacity .28s var(--ui-ease) 1.2s, translate .28s cubic-bezier(.2, .8, .2, 1) 1.2s; }   /* tfGirIleri: 28 px sağdan */
.gtt.s1 .gtt-son { opacity: 1; translate: 0 0; }
.gtt-son__u { display: flex; align-items: center; gap: 11px; }
.gtt-ring { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; }
.gtt-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.gtt-ring circle { fill: none; stroke-width: 3.4; }
.gtt-ring .t { stroke: #e4e4e7; }
.gtt-ring .f { stroke: var(--navy-soft); stroke-linecap: round; stroke-dasharray: var(--gtt-ring) 100; transition: --gtt-ring .5s cubic-bezier(.2, .8, .2, 1) 1.35s; }
.gtt.s1 .gtt-ring .f { --gtt-ring: 100; }
.gtt-ring b { position: relative; font-size: 11.5px; letter-spacing: -.02em; font-weight: 800; font-variant-numeric: tabular-nums; }
.gtt-son__t { display: block; font-size: 17px; font-weight: 800; line-height: 21px; letter-spacing: -.01em; color: #18181b; }
.gtt-son__u small { display: block; font-size: 11px; font-weight: 600; line-height: 15px; color: #52525b; }
.gtt-son__ok { display: block; margin-top: 12px; padding: 8px 10px; border-radius: 11px; background: #e3f3ec; font-size: 11px; font-weight: 700; line-height: 15px; color: #18181b; }
.gtt-son__g { display: flex; gap: 6px; margin-top: 10px; font-size: 10.5px; font-weight: 500; line-height: 15px; color: #52525b; }
.gtt-son__g > .gtt-i { width: 14px; height: 14px; margin-top: 1px; }
.gtt-son__g b { font-weight: 800; color: #27272a; }
.gtt-send { position: relative; display: grid; height: 40px; margin-top: 11px; border-radius: 12px; color: #fff; background: linear-gradient(180deg, #1b4b80, var(--navy));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .22), 0 8px 16px -10px rgba(16, 37, 64, .6); }
.gtt-send .gtt-x > * { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.gtt-send .gtt-i { width: 15px; height: 15px; }
.gtt-send::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #f5f6fa; opacity: 0; pointer-events: none; transition: opacity .15s ease var(--d); }
.gtt.s2 .gtt-send::after { opacity: .4; }   /* gönderimde düğme devre dışı: .tf-d[disabled] { opacity: .6 } */
.gtt.s2 .gtt-send { animation: gtt-bas .4s var(--ui-ease) .3s both; }
@keyframes gtt-bas { 0%, 100% { scale: 1; filter: none; } 40% { scale: .97; filter: brightness(.86); } }
.gtt-tap--send { left: 58%; top: 50%; }
.gtt.s2 .gtt-tap--send { animation: gtt-dokun .9s var(--ui-ease) 0s both; }
.gtt.s2 .gtt-tap--send i { animation: gtt-dalga .55s ease-out .34s both; }
.gtt-son__n { display: block; margin-top: 7px; text-align: center; font-size: 10px; font-weight: 600; line-height: 13px; color: #52525b; }

/* alt şerit */
.gtt-fa { flex: none; display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 8px 10px; border-top: 1px solid #e4e4e7; background: #fff; }
.gtt-nb { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; border-radius: 10px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.gtt-nb .gtt-i { width: 13px; height: 13px; stroke-width: 2.4; }
.gtt-nb--geri { gap: 0; padding: 0 7px 0 3px; color: #18181b; background: #fff; box-shadow: inset 0 0 0 1.5px #d4d4d8; }
.gtt-kay { flex: 1; justify-items: center; font-size: 10px; font-weight: 600; letter-spacing: -.01em; color: #52525b; }
.gtt-kay > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; transition: opacity .2s var(--ui-ease); }
.gtt-kay .gtt-i { width: 12px; height: 12px; }
.gtt-kay--ok .gtt-i { color: var(--gtt-ok); }
.gtt-kay--sp { opacity: 0; }
.gtt.s1:not(.s2) .gtt-kay--ok { animation: gtt-kay-ok 1s linear .8s both; }
.gtt.s1:not(.s2) .gtt-kay--sp { animation: gtt-kay-sp 1s linear .8s both; }
.gtt.s1:not(.s2) .gtt-kay--sp .ui-loop { animation: gtt-don .9s linear infinite; }   /* yalnız kayıt sürerken döner */
@keyframes gtt-kay-ok { 0% { opacity: 1; } 8%, 62% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes gtt-kay-sp { 0% { opacity: 0; } 8%, 62% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes gtt-don { to { rotate: 360deg; } }
.gtt-nb.gtt-nb--ile { display: inline-grid; }
.gtt-nb--ile { transition: opacity .2s var(--ui-ease) 1.1s, scale .2s var(--ui-ease) 1.1s; }
.gtt-nb--ile > span { display: flex; align-items: center; justify-content: center; gap: 0; height: 32px; padding: 0 3px 0 7px; border-radius: 10px; transition: opacity .15s ease var(--d); }
.gtt-atla { color: #18181b; background: #fff; box-shadow: inset 0 0 0 1.5px #d4d4d8; }
.gtt-bitir { opacity: 0; color: #fff; background: var(--navy-soft); }
.gtt.s1 .gtt-atla { opacity: 0; }
.gtt.s1 .gtt-bitir { opacity: 1; }
.gtt.s1 .gtt-nb--ile { opacity: 0; scale: .9; }

/* bitiş (portal kabuğu) */
.gtt-done { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 26px; background: #f5f6fa; opacity: 0; scale: 1.02; pointer-events: none;
  transition: opacity .35s var(--ui-ease) 1.05s, scale .5s var(--ui-ease) 1.05s; }
.gtt.s2 .gtt-done { opacity: 1; scale: 1; }
.gtt-ph__hd { flex: none; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px; }
.gtt-ib--z .gtt-i { width: 16px; height: 16px; }
.gtt .gtt-logo { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7), 0 2px 5px -1px rgba(16, 37, 64, .4); }
.gtt-ph__sp { flex: 1; }
.gtt-ib--bell { position: relative; }
.gtt-ib--bell .gtt-i { width: 16px; height: 16px; }
.gtt-ib--bell::after { content: ""; position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px #f5f6fa; }
.gtt-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 13px; font-weight: 900;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .08); }
.gtt-ph__t { flex: none; padding: 2px 14px 8px; line-height: 1; }
.gtt-ph__t b { display: block; font-size: 16px; font-weight: 800; line-height: 20px; letter-spacing: -.015em; color: #0f172a; }
.gtt-ph__t small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #3f3f46; }
.gtt-bit { display: flex; flex-direction: column; align-items: center; margin: 0 10px; padding: 14px 12px 12px; border-radius: 16px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(30, 34, 86, .06); }
.gtt-bit > * { opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease), translate .45s var(--gtt-sp); }
.gtt.s2 .gtt-bit > * { opacity: 1; translate: 0 0; }
.gtt.s2 .gtt-bit > :nth-child(1) { transition-delay: 1.15s; } .gtt.s2 .gtt-bit > :nth-child(2) { transition-delay: 1.4s; }
.gtt.s2 .gtt-bit > :nth-child(3) { transition-delay: 1.48s; } .gtt.s2 .gtt-bit > :nth-child(4) { transition-delay: 1.56s; } .gtt.s2 .gtt-bit > :nth-child(5) { transition-delay: 1.64s; }
.gtt-onay { width: 46px; height: 46px; }
.gtt-onay .c { fill: rgba(4, 120, 87, .12); stroke: var(--gtt-ok); stroke-width: 2.5; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset .6s ease-out 1.2s; }
.gtt-onay .k { fill: none; stroke: var(--gtt-ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .35s ease-out 1.65s; }
.gtt.s2 .gtt-onay .c, .gtt.s2 .gtt-onay .k { stroke-dashoffset: 0; }
.gtt-bit__t { margin-top: 8px; font-size: 17px; font-weight: 800; line-height: 21px; letter-spacing: -.02em; color: #18181b; }
.gtt-bit__m { margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 15px; color: #52525b; text-wrap: balance; }
.gtt-bit__n { display: flex; gap: 6px; margin-top: 9px; text-align: left; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #52525b; }
.gtt-bit__n > .gtt-i { width: 13px; height: 13px; margin-top: 1px; }
.gtt-bit__d { display: grid; place-items: center; align-self: stretch; height: 34px; margin-top: 11px; border-radius: 11px; font-size: 12px; font-weight: 800; color: #18181b; box-shadow: inset 0 0 0 1.5px #d4d4d8; }
.gtt-ptab { margin-top: auto; flex: none; display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); height: 46px; padding: 3px 8px 5px; background: #fff; box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08); }
.gtt-ptab > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 700; color: #3f3f46; white-space: nowrap; }
.gtt-ptab .gtt-i { width: 15px; height: 15px; }

/* ══ DAR KAPLAR ══ */
@container (max-width: 660px) {
  .gtt-tarih { display: none; }
}
@container (max-width: 560px) {
  .gtt-win { --H: 460px; }
  .gtt .gtt-w1 { display: none; }
  .gtt-dim { grid-template-columns: 150px minmax(0, 1fr); column-gap: 10px; }
  .gtt-ph { left: 18px; }
  .gtt-kun { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1.4fr) 76px; }
  .gtt-hr { grid-template-columns: 110px repeat(7, minmax(0, 1fr)); column-gap: 3px; }
  .gtt-bl { grid-template-columns: minmax(0, 1fr) 120px 60px; }
}
@container (max-width: 470px) {
  .gtt-win { --H: 476px; --kbar: 38px; }
  .gtt .gtt-w2 { display: none; }
  .gtt-band { padding: 10px 10px 0; }
  .gtt-hd { height: 34px; gap: 8px; }
  .gtt-ico { display: none; }
  .gtt-ttl b { font-size: 14px; line-height: 18px; }
  .gtt-ttl small { font-size: 10.5px; }
  .gtt-chips { margin-top: 6px; }
  .gtt-tabs { margin-top: 8px; height: 28px; }
  .gtt-tabs::after { content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 26px; background: linear-gradient(90deg, rgba(29, 79, 134, 0), var(--navy-soft) 85%); pointer-events: none; }
  .gtt-tab { padding: 0 9px; gap: 5px; font-size: 11px; }
  .gtt-p { padding: 8px 8px 0; }
  .gtt-vis { align-items: flex-start; font-size: 10.5px; line-height: 14px; }
  .gtt-vis > .gtt-i { margin-top: 1px; }
  .gtt-bdc { margin-top: 6px; padding: 8px 10px; }
  .gtt-sh__t small { display: none; }
  .gtt-dims { gap: 4px; margin-top: 8px; }
  .gtt-dim { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
  .gtt-dim:first-child .gtt-dim__h { grid-row: auto; }
  .gtt-lg { margin-top: 1px; }
  .gtt-dim__h { white-space: nowrap; }
  .gtt-sb { height: 15px; }
  .gtt-tool { height: 26px; }
  .gtt-cnt { font-size: 10.5px; }
  .gtt-csv { height: 26px; }
  .gtt-hm { margin-top: 6px; }
  .gtt-key { padding: 6px 10px; gap: 2px 10px; }
  .gtt-hr { --hc: 22px; grid-template-columns: 86px repeat(7, minmax(0, 1fr)); column-gap: 3px; padding: 0 6px 0 8px; }
  .gtt-hr__ad b { font-size: 11px; }
  .gtt-hc i { font-size: 10px; border-radius: 5px; }
  .gtt-hm .gtt-hr:nth-child(n+10) { display: grid; }
  .gtt-hr__ad .gtt-hit { left: 30px; }
  .gtt-ph { left: 50%; margin-left: -122px; }
  .gtt:not(.s1) .gtt-ph { animation-name: gtt-ph-in-n; }
  .gtt.s3 .gtt-ph { translate: 0 70px; }
  .gtt-kar { inset: 5px 5px 0; }
  .gtt-kbar { padding: 0 6px 0 10px; gap: 8px; }
  .gtt-kbar__t { display: none; }
  .gtt-kbar__b { flex: 1; }
  .gtt-ks { padding: 6px 6px 12px; }
  .gtt-kh { padding: 10px; }
  .gtt-kh__ad > span { white-space: normal; }
  .gtt-kun { grid-template-columns: 44px minmax(0, 1fr) 68px; }
  .gtt-kun__ad { grid-column: 1 / -1; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16); }   /* dar ekranda ad hücresi tam satır (tk-kunye-ad) */
  .gtt-kun > .gtt-kun__ad + span { box-shadow: none; }
  .gtt-kun > span { padding: 5px 7px; }
  .gtt-kun b { font-size: 11px; white-space: normal; }
  .gtt-bls { padding: 8px 9px 6px; }
  .gtt-bsh .gtt-sh__t small { display: none; }
  .gtt-bl { grid-template-columns: minmax(0, 1fr) 62px; grid-template-areas: "ad p" "iz et"; row-gap: 3px; column-gap: 10px; padding: 5px 0 6px; }
  .gtt-bl__o { display: none; }   /* dar kapta aralık başlangıç sayıları düşer (portal karnesi de göstermez) */
  .gtt-bl__iz { width: 100%; }
  .gtt-oz__s { font-size: 10.5px; }
  .gtt-uz { padding: 8px 9px 9px; }
  .gtt-kv::after { height: 46px; }
  .gtt-uz__k { margin-top: 6px; padding: 7px 8px; }
  .gtt-uz__m { font-size: 10.5px; line-height: 15px; }
  .gtt-uz__a { margin-top: 5px; }

}
@container (max-width: 380px) {
  .gtt-chips .gtt-chip:nth-child(n+4) { display: none; }
  .gtt-tab { padding: 0 6px; gap: 4px; }   /* «7 eksik» rozeti solma şeridinin altında kalmasın */
  .gtt-tabs::after { width: 18px; }
}