/* SAHNE · BELGE ŞABLONLARI VE KİMLİK KARTI (includes/scenes/document-templates.php) — adımlar:
   s1 «Okul yöneticisi (imza)» açılır · s2 Kemal Doğru seçilir, önizleme yenilenir, imza dolar · s3 «Belgeyi üret» → «İşleniyor…» ·
   s4 çıktı: «19 belge hazır — Öğrenci Belgesi · Sayı: 2026-0025», sayfalar akar · s5 «Kimlik Kartı Basımı» (varsayılan Klasik Mavi,
   dar kapta önizlemeye kayar) · s6 «Kartları oluştur» · s7 «19 kart yüzü hazır», A4'e 2×5 dizilen kartlar sırayla basılır.
   Dört görünüm aynı ızgara hücresinde üst üste durur (v1 sihirbaz · v2 belge çıktısı · v3 kart sihirbazı · v4 kart çıktısı). */
@property --dct-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.dct { container: dct / inline-size; --H: 440px; --top: 38px; --side: 240px; --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ink: #18181b; --z5: #71717a; --z6: #52525b; --zl: #e4e4e7; --zl2: #d4d4d8; --nv: var(--navy-soft); --nv-50: #f1f6fc; --nv-100: #dbe7f5; }
.dct-win { position: relative; height: var(--H); }
.dct-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: aynı hücrede üst üste */
.dct-x { display: inline-grid; min-width: 0; }
.dct-x > * { grid-area: 1 / 1; min-width: 0; }
.dct :is(.on-0-2, .on-2, .on-0-3, .on-3) { opacity: 0; transform: translateY(3px); transition: opacity .28s var(--ui-ease), transform .32s var(--ui-ease); }
.dct:not(.s2) .on-0-2, .dct.s2 .on-2, .dct:not(.s3) .on-0-3, .dct.s3 .on-3 { opacity: 1; transform: none; }
.dct.s2 .dct-in--sel .on-0-2 { transition-delay: .44s; } .dct.s2 .dct-in--sel .on-2 { transition-delay: .62s; }
.dct.s2 .dct-pg__imza .on-0-2 { transition-delay: .98s; } .dct.s2 .dct-pg__imza .on-2 { transition-delay: 1.18s; }
.dct.s3 .dct-btn--uret .on-0-3 { transition-delay: .42s; } .dct.s3 .dct-btn--uret .on-3 { transition-delay: .58s; }
.dct :is(.on-0-2, .on-0-3) { transition-duration: .18s, .2s; }

/* görünümler */
.dct-views { display: grid; height: 100%; }
.dct-v { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #fafafa;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .35s var(--ui-ease), translate .45s var(--ui-ease), visibility 0s linear .45s; }
.dct:not(.s4) .dct-v1, .dct.s4:not(.s5) .dct-v2, .dct.s5:not(.s7) .dct-v3, .dct.s7 .dct-v4 {
  opacity: 1; visibility: visible; translate: 0 0; transition-delay: .12s, .12s, 0s; }

/* imleç */
.dct-hit { position: absolute; z-index: 9; width: 0; height: 0; pointer-events: none; }
.dct-hit .ui-cur { left: -5px; top: -3px; transform: translate(16px, 14px); transition: opacity .2s var(--ui-ease); }
.dct-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 dct-cur { 0% { opacity: 0; transform: translate(16px, 14px); } 36% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes dct-cur-out { 0% { opacity: 0; transform: translate(16px, 14px); } 32% { opacity: 1; transform: none; scale: 1; } 45% { scale: .8; } 57% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes dct-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes dct-push { 50% { scale: .95; } }

/* ── üst çubuk (uygulama kabuğu) ── */
.dct-top { flex: none; display: flex; align-items: center; gap: 10px; height: var(--top); padding: 0 14px; background: #fff; border-bottom: 1px solid var(--ui-line); }
.dct-bc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.dct-bc__p { font-weight: 600; color: var(--z6); }
.dct-bc__c { font-weight: 800; color: var(--ink); }
.dct-bc__s { width: 12px; height: 12px; color: #a1a1aa; }
.dct-tools { flex: none; display: flex; align-items: center; gap: 12px; color: #3f3f46; }
.dct-tl { width: 16px; height: 16px; stroke-width: 1.8; }
.dct-bell { position: relative; display: block; }
.dct-bell em { position: absolute; right: -8px; top: -7px; min-width: 16px; height: 14px; padding: 0 3px; border-radius: 7px; background: #dc2626; box-shadow: 0 0 0 2px #fff;
  font: 800 10px/14px var(--font); font-style: normal; color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.dct-me { display: flex; align-items: center; gap: 6px; }
.dct-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--navy-soft), var(--navy)); color: #fff; font-size: 11px; font-weight: 800; }
.dct-me__n { font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; }

/* ── sihirbaz gövdesi ── */
.dct-vp { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dct-sc { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); align-items: start; gap: 14px; padding: 12px 14px 14px; }
.dct-main { min-width: 0; }
.dct-h { display: flex; align-items: center; gap: 6px; height: 22px; }
.dct-h b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.dct-help { width: 16px; height: 16px; color: var(--nv); stroke-width: 1.8; }
.dct-kap { display: flex; align-items: center; gap: 8px; min-height: 34px; margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: var(--nv-50);
  box-shadow: inset 0 0 0 1px var(--nv-100), inset 0 1px 0 rgba(255, 255, 255, .7); }
.dct-kap > .dct-i { width: 16px; height: 16px; color: var(--navy); stroke-width: 1.8; }
.dct-kap__t { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; line-height: 16px; color: var(--nv); }
.dct-kap__t b { font-weight: 800; color: #0f2a4a; }
.dct-kap__t small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 700; line-height: 14px; color: #b45309; }
.dct-kap__a { flex: none; font-size: 11px; font-weight: 800; color: var(--nv); white-space: nowrap; }

.dct-sec { position: relative; 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); }
.dct-sec__h { display: flex; align-items: center; justify-content: space-between; height: 14px; margin-bottom: 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--z5); }
.dct-sec__a { font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--nv); }
.dct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.dct-tile { position: relative; display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 8px 9px; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--zl); transition: box-shadow .3s var(--ui-ease), background-color .3s var(--ui-ease); }
.dct-tile > span { min-width: 0; }
.dct-tile b { display: block; font-size: 12px; font-weight: 800; line-height: 16px; color: #27272a; white-space: nowrap; }
.dct-tile small { display: block; font-size: 10.5px; font-weight: 700; line-height: 14px; color: var(--z5); }
.dct-tile em, .dct-chips em { display: inline-block; height: 16px; margin-top: 2px; padding: 0 5px; border-radius: 4px; background: #f4f4f5; font-size: 10px; font-style: normal; font-weight: 800; line-height: 16px; text-transform: uppercase; color: var(--z6); }
.dct-tiles--2 .dct-tile em { margin-top: 3px; }
.dct-chips { display: flex; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.dct-chips em { text-transform: none; }
.dct-chips .dct-chip--cy { background: #e6eef8; color: #1d4f86; }
.dct-rd { flex: none; position: relative; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #a1a1aa; background: #fff; transition: box-shadow .3s var(--ui-ease); }
.dct-rd::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--nv); transform: scale(0); transition: transform .35s var(--spring); }
.dct-tile.is-on { background: var(--nv-50); box-shadow: inset 0 0 0 1.5px #7fa3cf, 0 1px 2px rgba(16, 37, 64, .06); }
.dct-tile.is-on .dct-rd { box-shadow: inset 0 0 0 1.5px var(--nv); }
.dct-tile.is-on .dct-rd::after { transform: none; }

/* alanlar */
.dct-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dct-f { position: relative; display: block; min-width: 0; }
.dct-f--sel { margin-top: 8px; }
.dct-lbl { display: flex; align-items: center; gap: 4px; height: 13px; margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--z5); white-space: nowrap; }
.dct-lbl__q { width: 12px; height: 12px; color: #a1a1aa; }
.dct-in { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 9px; background: #fff; font-size: 12px; font-weight: 600; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--zl2), 0 1px 1px rgba(16, 37, 64, .03); font-variant-numeric: tabular-nums; white-space: nowrap; transition: box-shadow .3s var(--ui-ease); }
.dct-in--d { justify-content: space-between; }
.dct-in--d .dct-i { width: 14px; height: 14px; color: #3f3f46; }
.dct-in--sel { font-weight: 700; }
.dct-in--sel .dct-x { flex: 1; }
.dct-in--sel .dct-x > * { white-space: nowrap; overflow: hidden; }
.dct-chev { width: 14px; height: 14px; color: #3f3f46; }
.dct-in--sel .dct-hit { right: 30px; bottom: 9px; }
.dct.s1:not(.s2) .dct-in--sel { box-shadow: inset 0 0 0 1.5px var(--nv), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .4s; }
.dct.s2:not(.s3) .dct-in--sel { animation: dct-flash 1.2s var(--ui-ease) .5s both; }
@keyframes dct-flash { 0% { box-shadow: inset 0 0 0 1.5px var(--nv), 0 0 0 3px rgba(29, 79, 134, .14); } 100% { box-shadow: inset 0 0 0 1px var(--zl2), 0 0 0 0 rgba(29, 79, 134, 0); } }
.dct.s1:not(.s2) .dct-hit--sel .ui-cur { animation: dct-cur .9s var(--ui-ease) both; }
.dct.s1:not(.s2) .dct-hit--sel .dct-rip { animation: dct-rip .55s ease-out .42s both; }

/* açılan seçenek listesi (yerel select) */
.dct-dd { position: absolute; z-index: 8; left: 0; right: 0; bottom: calc(100% - 13px); padding: 4px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .1), 0 4px 8px rgba(16, 37, 64, .08), 0 18px 34px -12px rgba(16, 37, 64, .45);
  opacity: 0; visibility: hidden; translate: 0 4px; transform-origin: bottom; scale: 1 .96;
  transition: opacity .2s var(--ui-ease), translate .25s var(--ui-ease), scale .25s var(--ui-ease), visibility 0s linear .25s; }
.dct.s1:not(.s2) .dct-dd { opacity: 1; visibility: visible; translate: 0 0; scale: 1 1; transition-delay: .46s, .46s, .46s, 0s; }
.dct.s2 .dct-dd { transition-delay: .55s, .55s, .55s, .8s; }
.dct-op { position: relative; display: block; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 16px; color: #27272a; white-space: nowrap;
  transition: background-color .15s linear, color .15s linear; }
.dct-op.is-cur { background: #eef2f7; color: var(--ink); }
.dct.s2 .dct-op.is-cur { background: transparent; transition-delay: .12s; }
.dct.s2 .dct-op--k { background: var(--nv); color: #fff; transition-delay: .12s; }
.dct-op--k .dct-hit { left: 46%; top: 17px; }
.dct.s2:not(.s3) .dct-hit--opt .ui-cur { animation: dct-cur-out .95s var(--ui-ease) both; }
.dct.s2:not(.s3) .dct-hit--opt .dct-rip { animation: dct-rip .5s ease-out .34s both; }

/* eylem düğmeleri */
.dct-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.dct-btn2 { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 10px; background: #fff; font-size: 12px; font-weight: 700; color: #3f3f46; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--zl2), 0 1px 2px rgba(16, 37, 64, .05); }
.dct-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 10px; font-size: 12px; font-weight: 800; color: #fff; 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 14px -8px rgba(20, 61, 107, .75); transition: opacity .3s var(--ui-ease); }
.dct-btn .dct-x > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dct-btn .dct-hit { right: 26px; bottom: 9px; }
.dct.s3 .dct-btn--uret { animation: dct-push .3s var(--ui-ease) .38s; opacity: .55; transition-delay: .5s; }
.dct.s3:not(.s4) :is(.dct-hit--uret, .dct-hit--muret) .ui-cur { animation: dct-cur-out 1s var(--ui-ease) both; }
.dct.s3:not(.s4) :is(.dct-hit--uret, .dct-hit--muret) .dct-rip { animation: dct-rip .55s ease-out .4s both; }
.dct.s6 .dct-btn--olus { animation: dct-push .3s var(--ui-ease) .38s; }
.dct.s6:not(.s7) .dct-hit--olus .ui-cur { animation: dct-cur-out 1s var(--ui-ease) both; }
.dct.s6:not(.s7) .dct-hit--olus .dct-rip { animation: dct-rip .55s ease-out .4s both; }
.dct-mbar { display: none; }

/* ── önizleme (A4 çerçeve) ── */
.dct-side { min-width: 0; }
.dct-pv__h { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 16px; margin-bottom: 6px; font-size: 10px; font-weight: 600; color: var(--z5); white-space: nowrap; }
.dct-pv__h b { font-weight: 800; color: #3f3f46; }
.dct-pv__a { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--nv); text-decoration: underline; text-underline-offset: 2px; }
.dct-pv__a .dct-i { width: 11px; height: 11px; }
.dct-frame { position: relative; aspect-ratio: 210 / 297; border-radius: 10px; background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1.5px var(--zl), 0 1px 2px rgba(16, 37, 64, .06), 0 14px 28px -20px rgba(16, 37, 64, .45); }
.dct-load { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--z5); opacity: 0; }
.dct.s2:not(.s3) .dct-load { animation: dct-load 1.3s linear both; }
.dct.s2:not(.s3) .dct-frame .dct-pg { animation: dct-dim 1.3s linear both; }
@keyframes dct-load { 0%, 42% { opacity: 0; } 48%, 82% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes dct-dim { 0%, 44% { opacity: 1; } 52%, 80% { opacity: .45; } 90%, 100% { opacity: 1; } }

/* öğrenci belgesi sayfası (şablon #1) */
.dct-pg { display: block; height: 100%; padding: 13px 13px 0; font-size: 10px; line-height: 12px; color: #1a1a1a; }
.dct-pg__hd { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; }
.dct-pg__logo { width: 24px; height: 24px; }
.dct-pg__t { text-align: center; min-width: 0; }
.dct-pg__t b { display: block; font-size: 10.5px; font-weight: 800; line-height: 13px; white-space: nowrap; letter-spacing: -.01em; }
.dct-pg__t span { display: block; font-size: 10px; line-height: 12px; color: #555; }
.dct-pg__rule { display: block; height: 1px; margin: 7px 0 8px; background: #1a1a1a; }
.dct-pg__rows { display: block; }
.dct-pg__r { display: grid; grid-template-columns: 70px 8px minmax(0, 1fr); align-items: baseline; height: 13px; }
.dct-pg__r b { font-weight: 800; white-space: nowrap; letter-spacing: -.01em; }
.dct-pg__r i { font-style: normal; color: #888; }
.dct-pg__r span { white-space: nowrap; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.dct-pg__txt { display: block; margin-top: 8px; line-height: 13px; letter-spacing: -.005em; }
.dct-pg__txt b { font-weight: 800; }
.dct-pg__imza { display: block; margin-top: 16px; text-align: right; line-height: 13px; }
.dct-pg__imza .dct-x { justify-items: end; }
.dct-pg__imza b { display: block; font-weight: 800; }
.dct-pg__ad { padding: 0 2px; margin-right: -2px; border-radius: 3px; background: rgba(255, 182, 39, 0); }
.dct.s2 .dct-pg__ad { animation: dct-mark 1.4s var(--ui-ease) 1.15s both; }
@keyframes dct-mark { 0% { background: rgba(255, 182, 39, 0); } 25% { background: rgba(255, 182, 39, .45); } 100% { background: rgba(255, 182, 39, 0); } }

/* ── çıktı sayfaları (uygulama kabuğu yok): koyu çubuk + gri zemin ── */
.dct-ob { flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: #18181b; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 4px 10px -6px rgba(0, 0, 0, .5); }
.dct-ob__t { min-width: 0; }
.dct-ob__t b { font-weight: 800; }
.dct-ob__i { color: #a9c7ee; font-weight: 700; font-variant-numeric: tabular-nums; }
.dct-ob__b { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 800; }
.dct-ob__b--p { background: var(--nv); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.dct-ob__l { flex: none; font-size: 11.5px; font-weight: 600; color: #e4e4e7; text-decoration: underline; text-underline-offset: 2px; }
.dct-n { counter-reset: dctn var(--dct-n); font-variant-numeric: tabular-nums; transition: --dct-n .9s var(--ui-ease) .3s; }
.dct-n::after { content: counter(dctn); }
.dct.s4 .dct-n--b, .dct.s7 .dct-n--k { --dct-n: 19; }
.dct-gray { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f4f4f5; }
.dct-pages { display: grid; gap: 14px; width: min(300px, calc(100% - 28px)); margin: 14px auto 0; translate: 0 0; transition: translate 1.5s cubic-bezier(.45, 0, .2, 1) .9s; }
/* ikinci sayfanın üstü, birincinin yerine oturur: −(sayfa + 14 px ara) = −(%100 − 28 px) / 3 − 14 px */
.dct.s4 .dct-pages { translate: 0 calc(-33.333% - 4.667px); }
.dct-sheet { display: block; aspect-ratio: 210 / 297; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
.dct-sheet .dct-pg { padding: 20px 22px 0; }
.dct-sheet .dct-pg__rule { margin: 9px 0 10px; }
.dct-sheet .dct-pg__r { height: 14px; grid-template-columns: 76px 8px minmax(0, 1fr); }
.dct-sheet .dct-pg__txt { margin-top: 9px; }
.dct-sheet .dct-pg__imza { margin-top: 20px; }

/* ── kimlik kartı sihirbazı ── */
/* ≥640 px: sihirbaz içeriği pencereye 14 px alt boşlukla sığsın (düğmeler kesilmez) */
.dct-sc--3 { padding-top: 8px; }
.dct-sc--3 .dct-kap { margin-top: 6px; }
.dct-sc--3 .dct-sec { margin-top: 6px; padding: 8px 10px 10px; }
.dct-sc--3 .dct-act { margin-top: 8px; }
.dct-tiles--4 { gap: 6px; }
.dct-tiles--4 .dct-tile { padding: 7px 9px; }
.dct-tile--w { padding: 8px 10px; }
.dct-chk { display: flex; align-items: center; gap: 7px; height: 18px; margin-top: 7px; font-size: 11.5px; font-weight: 700; color: #3f3f46; }
.dct-chk i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--nv); color: #fff; }
.dct-chk .dct-i { width: 11px; height: 11px; stroke-width: 3; }
.dct-pv { display: block; padding: 10px 10px 12px; 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); }
.dct-pv__k { display: block; font-size: 10px; font-weight: 800; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--z5); }
.dct-pv__s { display: block; margin: 2px 0 8px; text-wrap: balance; font-size: 10px; font-weight: 700; line-height: 13px; color: var(--z5); }

/* ── kimlik kartı: öğeler şablonun mm konumlarında (yüzde), yazılar ≥ 10 px ── */
.dct-card { position: relative; display: block; width: 100%; aspect-ratio: 85.6 / 54; border-radius: 7px; overflow: hidden; background: #fff; container: dctc / inline-size;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .12), 0 1px 2px rgba(16, 37, 64, .08), 0 8px 18px -12px rgba(16, 37, 64, .45); }
.dct-card__in { position: absolute; inset: 0; color: #111827; }
.dct-card__in > * { position: absolute; display: block; }
.dct-cl { width: 100%; height: 100%; }
/* fotoğrafsız: boş, kesik çizgili gri çerçeve (uygulamadaki gibi #a1a1aa / #f4f4f5; id-card-helper.php:746–749) */
.dct-c-foto { border: 1px dashed #a1a1aa; border-radius: 2px; background: #f4f4f5; }
.dct-c-f small { display: block; font-size: 10px; font-weight: 600; line-height: 11px; color: #6b7280; white-space: nowrap; }
.dct-c-f b { display: block; font-size: 13px; font-weight: 800; line-height: 15px; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dct-c-kurum { font-size: 10px; font-weight: 600; line-height: 12px; color: #6b7280; white-space: nowrap; }
.dct-k-band { background: #1e3a8a; }
.dct-k-strip { background: #2563eb; }
.dct-k-okul, .dct-k-strip-t { display: flex !important; align-items: center; justify-content: center; color: #fff; white-space: nowrap; }
.dct-k-okul { font-size: 11px; font-weight: 800; }
.dct-k-strip-t { font-size: 10px; font-weight: 800; letter-spacing: .01em; }
.dct-k-ad { top: 38% !important; }
.dct-k-no, .dct-k-sf { top: 57.8% !important; }
.dct-k-line { height: 1px; background: #cbd5e1; }

/* ── kart çıktısı: A4, 2×5, kesim işaretli ── */
.dct-gray--k { padding: 14px 14px 0; }
/* kâğıt yüksekliğe sığar: pencere − çıktı çubuğu (44) − üst (14) − alt (14) boşluk → bütün 2×5 sayfa görünür */
.dct-a4 { --aw: min(560px, calc(100cqw - 28px), calc((var(--H) - 72px) * 210 / 297)); width: var(--aw); margin: 0 auto; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); container-type: inline-size; isolation: isolate; }
.dct-a4__in { --s: calc(100cqw / 210); aspect-ratio: 210 / 297; display: grid; grid-template-columns: repeat(2, calc(85.6 * var(--s))); grid-auto-rows: calc(54 * var(--s));
  gap: calc(2 * var(--s)); align-content: start; padding: calc(9.5 * var(--s)) calc(18.4 * var(--s)) 0; }
.dct-slot { position: relative; display: block; }
.dct-slot .dct-card { border-radius: 0; box-shadow: 0 0 0 .5px rgba(16, 37, 64, .14); opacity: 0; translate: 0 4px; scale: .985;
  transition: opacity .35s var(--ui-ease) calc(.35s + var(--i) * 190ms), translate .45s var(--ui-ease) calc(.35s + var(--i) * 190ms), scale .45s var(--ui-ease) calc(.35s + var(--i) * 190ms); }
.dct.s7 .dct-slot .dct-card { opacity: 1; translate: 0 0; scale: 1; }
/* kesim işaretleri: her kartın dört köşesinde (id-card-helper.php kkKesimIsareti) */
.dct-cut { --m: calc(1.6 * var(--s)); --l: calc(1.3 * var(--s)); position: absolute; z-index: -1; inset: calc(-1 * var(--m)); opacity: 0; transition: opacity .3s var(--ui-ease) calc(.3s + var(--i) * 190ms);
  background:
    linear-gradient(#a1a1aa, #a1a1aa) 0 var(--m) / var(--l) 1px no-repeat,
    linear-gradient(#a1a1aa, #a1a1aa) var(--m) 0 / 1px var(--l) no-repeat,
    linear-gradient(#a1a1aa, #a1a1aa) 100% var(--m) / var(--l) 1px no-repeat,
    linear-gradient(#a1a1aa, #a1a1aa) calc(100% - var(--m)) 0 / 1px var(--l) no-repeat,
    linear-gradient(#a1a1aa, #a1a1aa) 0 calc(100% - var(--m)) / var(--l) 1px no-repeat,
    linear-gradient(#a1a1aa, #a1a1aa) var(--m) 100% / 1px var(--l) no-repeat,
    linear-gradient(#a1a1aa, #a1a1aa) 100% calc(100% - var(--m)) / var(--l) 1px no-repeat,
    linear-gradient(#a1a1aa, #a1a1aa) calc(100% - var(--m)) 100% / 1px var(--l) no-repeat; }
.dct.s7 .dct-cut { opacity: 1; }

/* küçük kart (dar A4): ayrıntı düşer, ad ve numara kalır. Yazı kâğıttakinden büyük (≥ 10 px) olduğundan ad ile soyad arası
   açılır ve fotoğraf çerçevesi sağ kenarı (82 mm) yerinde kalarak 16,5 × 22 mm'ye küçülür: ad çerçeveye ≥ 5 px uzak kalır */
@container dctc (max-width: 200px) {
  .dct-k-okul, .dct-k-strip-t, .dct-c-f small, .dct-c-kurum { display: none !important; }
  .dct-c-f b { font-size: 10px; line-height: 12px; letter-spacing: -.03em; }
  .dct-k-ad b { font-weight: 700; letter-spacing: -.02em; word-spacing: .12em; }
  .dct-k-ad { top: 38% !important; }
  .dct-k-no, .dct-k-sf { top: 56% !important; }
  .dct-c-foto { left: 76.519% !important; width: 19.276% !important; height: 40.741% !important; }
}

/* ── DAR KAPLAR ── */
/* iki sütunun en darında kapalı seçim kutusuna «· okul» sığmaz (kutu 292 px, metin 304 px): yalnız «Ad — Unvan» */
@container dct (min-width: 640px) and (max-width: 659px) {
  .dct-in--sel .dct-okl { display: none; }
}
@container dct (max-width: 700px) {
  .dct-kap--2 .dct-kap__a { display: none; }
}
@container dct (max-width: 660px) {
  .dct-ob__l2 { display: none; }
}
@container dct (max-width: 600px) {
  .dct-ob__l { display: none; }
  .dct-me__n { display: none; }
}
/* tek sütun: önizleme formun altında (uygulamanın telefondaki düzeni gibi); belge sihirbazında alt eylem çubuğu yapışkan
   (admin-document-generate.php mobile-action-bar), kart sihirbazında düğmeler formun sonunda, önizlemenin üstünde; sahne aşağı kayar */
@container dct (max-width: 639px) {
  .dct-win { --H: 480px; --vph: calc(var(--H) - var(--top) - 52px); --vph3: calc(var(--H) - var(--top)); }
  .dct-sc { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; transition: translate .6s cubic-bezier(.45, 0, .2, 1); }
  .dct-act--1 { display: none; }
  .dct-mbar { flex: none; position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 52px; padding: 0 12px; background: #fff;
    box-shadow: 0 -1px 0 var(--ui-line), 0 -8px 16px -12px rgba(16, 37, 64, .3); }
  .dct-side { width: min(250px, 100%); justify-self: center; }
  .dct.s2 .dct-sc--1 { translate: 0 calc(var(--vph) - 100%); transition-delay: .55s; }
  .dct.s5 .dct-sc--3 { translate: 0 calc(var(--vph3) - 100%); transition-delay: 1.2s; }
  .dct-side--3 { width: min(330px, 100%); }
  /* önizleme kartı 330 px'ten darsa kısalır; alt boşluk farkı karşılar → kayınca «2 · Çıktı biçimi» her genişlikte üstte, yazı kesilmez */
  .dct-sc--3 { padding-bottom: calc(12px + (330px - min(330px, 100cqw - 24px)) * .66); }
  .dct-pv__h { justify-content: center; }
  .dct-pv__a { display: none; }
  .dct-tiles--4 .dct-chip--cy { display: none; }
  .dct-olc { display: none; }
  .dct-ob__i { display: none; }
  .dct-ob__ad { display: none; }
}
@container dct (max-width: 470px) {
  .dct-top { padding: 0 12px; }
  .dct-bc__p:not(.dct-bc__m) , .dct-bc__p:not(.dct-bc__m) + .dct-bc__s { display: none; }
  .dct-tools { gap: 10px; }
  .dct-okl { display: none; }
  .dct-op { white-space: normal; }
  .dct-kap { align-items: flex-start; }
  .dct-kap > .dct-i { margin-top: 1px; }
  .dct-kap__a { display: none; }
  .dct-tiles--4 .dct-chips { display: none; }
  .dct-tiles--4 .dct-tile b { white-space: normal; }
  .dct-tiles--2 .dct-tile b { font-size: 11.5px; }
  .dct-ob { gap: 6px; padding: 0 10px; }
  .dct-ob__b { padding: 0 9px; }
}
@container dct (max-width: 360px) {
  .dct-tiles--2 .dct-tile { padding: 8px 7px; gap: 6px; }
  .dct-tiles--2 .dct-tile b { font-size: 11px; }
  .dct-ob__t { font-size: 11.5px; }
}