/* noteland.net · iki yenilik demosu (DE-13): kart kalemi ve uçucu çeviri kalemi.
   Not kâğıdı dili (ref. 11): düz zemin.not_sayfa (doku yok, DESIGN §2.7), IBM Plex, 1 px ayırıcı; çevresinde önizleme camı (blursuz ince cam).
   Varsayılan CSS = son kare (JS yoksa ya da azaltılmış harekette okunur durgun kare). Canlı döngü demo.js'te; yalnız transform/opacity. */

.demo { position: relative; margin: 0; isolation: isolate; }
.demo-cerceve { position: relative; padding: 9px; border-radius: 23px;
  background: color-mix(in srgb, var(--panel) var(--kapsul-op), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--isik-kenar) var(--isik-kenar-op), transparent), var(--golge-cam); }
.demo-kagit { position: relative; overflow: hidden; border-radius: 14px; background: var(--not);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ayirici) 70%, transparent); }
.demo-serit { display: flex; align-items: center; gap: 8px; height: 50px; padding: 12px 18px 0; color: var(--metin-2); font-size: var(--t-ikincil); }
.demo-serit svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--metin); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-govde { padding: 6px 28px 0; font-size: var(--t-govde); line-height: var(--satir); }
.demo-govde .dn-1 { font-weight: 600; font-size: var(--t-buyuk); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 4px; }
.demo-govde .dn-2 { font-weight: 600; font-size: var(--t-baslik); line-height: 1.25; margin: 8px 0 8px; }
.demo-govde .dn-p { margin: 0 0 10px; }
.demo-govde .dn-soluk { color: var(--metin-2); }

/* hero: kâğıdın arkasında Kardiyoloji adası; not denizin üstünde yüzer */
.giris-ada { position: absolute; z-index: -1; width: 46%; right: -9%; top: -24%; height: auto; filter: var(--ada-suzgec); pointer-events: none; }
@media (max-width: 899.98px) { .giris-ada { width: 40%; right: -12%; top: -12%; } }
@media (max-width: 599.98px) { .giris-ada { display: none; } }

/* ---------- kart kalemi ---------- */
.dk-hedef { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.dk-bant { position: absolute; z-index: -1; inset: -1px -5px; border-radius: 3px; background: var(--vurgu); transform-origin: 0 50%; }
.dk-yaz { position: relative; overflow: hidden; }
.dk-ortu { position: absolute; inset: 0 -2px; background: var(--not); transform: translateX(101%); }
.dk-tepsi { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 0; padding: 14px 18px 16px 28px; border-top: 1px solid var(--ayirici); }
.dk-tepsi-ad { display: grid; gap: 2px; }
.dk-tepsi-ust { font-size: var(--t-kucuk); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--kiyi-iz); }
.dk-sayi { display: grid; font-size: var(--t-ikincil); color: var(--metin-2); font-variant-numeric: tabular-nums; }
.dk-sayi > span { grid-area: 1 / 1; }
.dk-sayi-eski { opacity: 0; }
.dk-yer { position: relative; flex: none; width: 214px; height: 84px; }
.dk-eski, .dk-kart { position: absolute; inset: 0; border-radius: 12px; background: var(--hap);
  box-shadow: inset 0 0 0 1px var(--ayirici), calc(var(--gx) * 3px) calc(var(--gx) * 3px) 10px color-mix(in srgb, var(--golge-murekkep) var(--cam-golge-op), transparent); }
.dk-eski--1 { transform: translate(-7px, -6px) rotate(-2.2deg); opacity: 0.9; }
/* eski kartların yüzünde iki soluk satır: tepsi boş bir yer tutucu gibi görünmesin */
.dk-eski::before, .dk-eski::after { content: ""; position: absolute; left: 14px; height: 7px; border-radius: 4px; background: var(--ayirici); opacity: 0.8; }
.dk-eski::before { top: 18px; width: 38%; }
.dk-eski::after { top: 36px; width: 62%; }
.dk-eski--2 { transform: translate(-13px, -11px) rotate(-4deg); opacity: 0.7; }
.dk-kart { transform-origin: 0 0; overflow: hidden; }
.dk-kart-yuz { display: grid; gap: 4px; padding: 11px 14px; }
.dk-kart-ust { font-size: var(--t-kucuk); font-weight: 600; color: var(--metin-2); }
.dk-kart-soru { font-size: var(--t-ikincil); font-weight: 600; line-height: 1.3; color: var(--metin); }
/* uçan ifade (demo.js üretir): çizilen ifadenin kendisi (aynı yazı, aynı bant); kalkar, tepsiye uçar, kart olur */
.dk-ucan { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; padding: 0 5px; white-space: nowrap; border-radius: 3px;
  background: var(--vurgu); color: var(--metin); font-size: var(--t-govde); line-height: var(--satir); opacity: 0; pointer-events: none;
  box-shadow: calc(var(--gx) * 3px) calc(var(--gx) * 3px) 10px color-mix(in srgb, var(--golge-murekkep) var(--cam-golge-op), transparent); }
.kalem { position: absolute; left: 0; top: 0; z-index: 3; width: 36px; height: 36px; opacity: 0; pointer-events: none; overflow: visible; }
.kalem-govde { fill: var(--hap); stroke: var(--metin); stroke-width: 1.6; stroke-linejoin: round; }
.kalem-uc { fill: var(--metin); stroke: var(--metin); stroke-width: 1.2; stroke-linejoin: round; }
.kalem-cizgi { fill: none; stroke: var(--metin); stroke-width: 1.4; stroke-linecap: round; }
.demo--ceviri .kalem-uc { fill: var(--eylem); stroke: var(--eylem); }

/* ---------- çeviri kalemi ---------- */
.dc-hedef { position: relative; isolation: isolate; }
.dc-bant { position: absolute; z-index: -1; border-radius: 3px; background: color-mix(in srgb, var(--eylem) 24%, transparent); transform-origin: 0 50%; }
/* çeviri, aynı satırların üstüne yerinde yazılır (balon yok): özgünü örten kâğıt, üstünde mavi mürekkep */
.dc-ceviri { position: absolute; inset: -3px -6px; padding: 3px 6px; border-radius: 4px; color: var(--eylem); font-size: 0.97em;
  background: color-mix(in srgb, var(--eylem) 9%, var(--not)); }
.dc-k { display: inline-block; }
[data-demo-durum="temiz"] .dc-ceviri { opacity: 0; }

/* ---------- alt yazı ve durdurma düğmesi ---------- */
.demo-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 16px; padding: 0 4px; font-size: var(--t-ikincil); color: var(--metin-2); }
.demo-alt-metin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; flex: 1 1 18rem; }
.demo-alt b { color: var(--metin); font-weight: 600; }
.demo-dur { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 var(--t-ikincil) / 1 var(--yazi); color: var(--metin); background: var(--kapsul-zemin); box-shadow: var(--golge-dugme);
  transition: transform 120ms var(--e-standart), background-color 150ms ease; }
.demo-dur:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .demo-dur:hover { background: var(--panel); } }
.demo-dur svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-dur .i-oyna { display: none; fill: currentColor; stroke: none; }
.demo-dur[aria-pressed="true"] .i-dur { display: none; }
.demo-dur[aria-pressed="true"] .i-oyna { display: inline; }
html:not(.js) .demo-dur { display: none; }
.demo-dur--durgun svg { display: none; }

/* azaltılmış hareket: döngü yok; düğme önce/sonra karesi arasında geçer (180 ms solma) */
.demo--durgun .dk-bant, .demo--durgun .dk-kart, .demo--durgun .dk-sayi > span, .demo--durgun .dc-ceviri, .demo--durgun .dc-bant { transition: opacity 180ms linear; }
.demo--durgun[data-demo-durum="once"] .dk-bant, .demo--durgun[data-demo-durum="once"] .dk-kart { opacity: 0; }
.demo--durgun[data-demo-durum="once"] .dk-ortu { transform: none; }
.demo--durgun[data-demo-durum="once"] .dk-sayi-eski { opacity: 1; }
.demo--durgun[data-demo-durum="once"] .dk-sayi-yeni { opacity: 0; }
.demo--durgun[data-demo-durum="temiz"] .dc-bant { opacity: 0; }

@media (max-width: 599.98px) {
  .demo-cerceve { padding: 7px; border-radius: 21px; }
  .demo-govde { padding: 4px 18px 0; font-size: 16px; }
  .demo-govde .dn-1 { font-size: 24px; }
  .demo-govde .dn-2 { font-size: 19px; }
  .dk-tepsi { padding: 12px 12px 14px 18px; }
  .dk-yer { width: 176px; height: 84px; }
  .dk-ucan { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-dur { transition: none; }
  .demo-dur:active { transform: none; }
}