/* DersTeders ana sayfa canlı demoları (15.10.2026). anasayfa-sade.css'ten SONRA yüklenir.
   Kurallar: hareket yalnız transform/opacity (tek istisna: hero altın çizgisinin tek seferlik stroke-dashoffset çizilişi);
   3B/WebGL/gradyan/blur/cam yok; prefers-reduced-motion'da tüm hareket kapalı, nihai durum görünür;
   görünmeyen demo ve gizli sekmede animasyon durur (.gorunur / .dm-gizli). */

/* Serif yazı tipi yüklenirken satır kırılması kaymasın: yedek yüz, Instrument Serif genişliğine ölçülür (Instrument/Georgia 0,77 · Instrument/Times 0,84; tarayıcıda ölçüldü) */
@font-face{font-family:'DT Serif G';src:local('Georgia');size-adjust:77%}
@font-face{font-family:'DT Serif T';src:local('Times New Roman'),local('Times');size-adjust:84%}
/* Gövde yazı tipi için local() yedek yüz DENENDİ: FCP +170 ms çıktı (ölçüldü, headless) -> kullanılmıyor.
   Onun yerine index.html başında 3 yazı tipi dosyası preload edilir (CLS 0,13-0,16 -> <=0,01; FCP +~100 ms). */
:root{--serif:'Instrument Serif','DT Serif G','DT Serif T',Georgia,'Times New Roman',serif;--dm-en:#9A6410;--dm-bg:#0B2229}
[data-theme="dark"]{--dm-en:#F5C542}
.dm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ortak: etiket, düğme, aralık, bölünmüş seçici ---------- */
.dm-etiket{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:4px 12px;border:1px solid rgba(245,197,66,.55);border-radius:999px;color:#F5C542}
.dm-etiket::before{content:"";width:7px;height:7px;border-radius:50%;background:#F5C542}
.dm-etiket-sim{margin-bottom:14px}
.dm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:10px;background:var(--btn);color:var(--btn-ink);border:1.5px solid var(--btn);font-weight:700;font-size:.95rem;transition:background .15s ease,border-color .15s ease}
.dm-btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.dm-btn[hidden]{display:none}
.dm-btn-ikinci{background:transparent;color:var(--ink);border-color:var(--ink-soft)}
.dm-btn-ikinci:hover{background:var(--accent-light);border-color:var(--accent)}
.dm-link{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;font-weight:700;font-size:.95rem;color:var(--accent)}
.dm-link:hover{text-decoration:underline;text-underline-offset:3px}

.dm-seg{align-self:flex-start;display:inline-flex;gap:2px;padding:3px;border:1px solid var(--dm-seg-b,var(--border));border-radius:999px;max-width:100%}
.dm-seg button{min-width:52px;min-height:44px;padding:0 12px;border-radius:999px;font-size:.9rem;font-weight:700;color:var(--dm-seg-c,var(--ink-soft));transition:background .15s ease,color .15s ease}
.dm-seg button:hover{background:rgba(127,160,170,.18)}
.dm-seg button[aria-checked="true"]{background:var(--dm-seg-on,var(--btn));color:var(--dm-seg-on-c,#fff)}
.dm-kart{--dm-seg-b:var(--border);--dm-seg-c:var(--ink-soft);--dm-seg-on:var(--btn);--dm-seg-on-c:#fff}

.dm-aralik{display:flex;flex-direction:column;gap:2px;min-width:0}
.dm-aralik span{display:flex;justify-content:space-between;gap:8px;font-size:.9rem;font-weight:600}
.dm-aralik output{font-weight:700;font-variant-numeric:tabular-nums}
.dm-aralik input{width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.dm-aralik input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--dm-iz,var(--border))}
.dm-aralik input::-moz-range-track{height:6px;border-radius:3px;background:var(--dm-iz,var(--border))}
.dm-aralik input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--dm-th,var(--btn));border:3px solid var(--dm-th-k,var(--surface))}
.dm-aralik input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--dm-th,var(--btn));border:3px solid var(--dm-th-k,var(--surface))}
.dm-aralik input:focus-visible{outline:2px solid var(--dm-od,var(--accent));outline-offset:2px;border-radius:6px}

/* ---------- 1) HERO: canlı devre ---------- */
.sd-stage{padding:0}
.dm-live{--dm-seg-b:rgba(255,255,255,.3);--dm-seg-c:#CFE3E8;--dm-seg-on:#F5C542;--dm-seg-on-c:#0A3D4A;--dm-iz:rgba(255,255,255,.3);--dm-th:#F5C542;--dm-th-k:#0B2229;--dm-od:#F5C542;
  background:var(--dm-bg);border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 34px 60px -28px rgba(0,0,0,.65);color:#EAF3F5;overflow:hidden}
.dm-bar{display:flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.dm-dot{width:9px;height:9px;border-radius:50%;background:#F5C542;flex-shrink:0}
.dm-bar b{font-size:.98rem;color:#fff}
.dm-bar-ipucu{margin-left:auto;font-size:.82rem;color:#A9C2C9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-devre{display:block;width:100%;height:auto;padding:10px 10px 0}
.dm-tel path{stroke:#7FB4C0;stroke-width:3}
.dm-tel .dm-uc{stroke:#5F93A0;stroke-width:2;stroke-dasharray:4 5}
.dm-nokta{fill:#7FB4C0}
.dm-nk circle{fill:#F5C542}
.dm-akis{opacity:0;transition:opacity .2s ease}
.dm-kapak rect{fill:var(--dm-bg)}
.dm-gov path{stroke:#EAF3F5;stroke-width:3}
.dm-gov .dm-bicak path{stroke-width:4}
.dm-gov .dm-led-g{fill:#3A2226}
.dm-gov .dm-ok{stroke:#9CC0C9;stroke-width:2}
.dm-bicak{transform-origin:150px 60px;transition:transform .18s ease}
.dm-acik .dm-bicak{transform:rotate(-26deg)}
.dm-hale{display:none}
.dm-led-yan{fill:#FF5A44;stroke:none;opacity:0;pointer-events:none;transition:opacity .15s ease}
.dm-olcer circle{fill:var(--dm-bg);stroke:#EAF3F5;stroke-width:2.5}
.dm-olcer text{fill:#fff;font:700 15px var(--font)}
.dm-olcer .dm-bi{font-size:10.5px;fill:#B5D0D7;font-weight:600}
.dm-et text{fill:#CFE3E8;font:600 13px var(--font)}
.dm-et .dm-kucuk{font-size:11px;fill:#9CC0C9}
.dm-kontrol{display:grid;grid-template-columns:auto auto minmax(150px,1fr);gap:10px 16px;align-items:center;padding:6px 18px 0}
.dm-anahtar{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#EAF3F5;font-weight:600;font-size:.92rem;transition:background .15s ease}
.dm-anahtar:hover{background:rgba(255,255,255,.08)}
.dm-anahtar b{font-weight:700;color:#fff}
.dm-sw-yuz{position:relative;display:inline-block;width:38px;height:22px;border-radius:11px;background:rgba(255,255,255,.28);transition:background .15s ease;flex-shrink:0}
.dm-sw-yuz i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s ease}
.dm-anahtar[aria-checked="true"] .dm-sw-yuz{background:#F5C542}
.dm-anahtar[aria-checked="true"] .dm-sw-yuz i{transform:translateX(16px);background:#0A3D4A}
.dm-aralik{color:#EAF3F5}
.dm-aralik output{color:#F5C542}
.dm-formul{padding:8px 18px 0;font-weight:600;font-size:.98rem;color:#F5C542;font-variant-numeric:tabular-nums}
.dm-oku{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 18px 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.dm-oku dt{font-size:.78rem;color:#A9C2C9}
.dm-oku dd{font-weight:700;font-size:1.12rem;color:#fff;font-variant-numeric:tabular-nums}
.dm-durum{min-height:3.1em;padding:10px 18px 0;font-size:.92rem;color:#CFE3E8}
.dm-asiri .dm-durum{color:#FFB4A8}
.dm-alt{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:4px 18px 12px}
.dm-daha{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#F5C542}
.dm-daha:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- 2) HİKAYE ---------- */
.dm-story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.dm-stage{position:sticky;top:calc(var(--header-h) + 52px);aspect-ratio:420/310;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-soft);overflow:hidden;z-index:2}
.dm-stage-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.dm-stage-bar i{width:9px;height:9px;border-radius:50%;background:var(--border)}
.dm-stage-bar span{margin-left:10px;font-size:.72rem;color:var(--muted)}
.dm-sahne{position:absolute;left:0;right:0;top:32px;bottom:0;padding:14px 16px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.dm-sahne.on{opacity:1;transform:none}
.dm-sahne svg{display:block;width:100%;height:100%}
.s-vurgu{fill:var(--accent)}
.s-satir rect,.s-iz rect{fill:var(--border)}
.s-kutu{fill:var(--bg);stroke:var(--border);stroke-width:1.5}
.s-etiket text{fill:var(--ink-soft);font:600 13.5px var(--font)}
.s-etiket rect{fill:var(--accent-light);stroke:var(--accent-border)}
.s-etiket .s-b,.s-b{fill:var(--ink);font-weight:700}
.s-halka{fill:var(--accent-light);stroke:var(--accent);stroke-width:3}
.s-cizgi{stroke:var(--accent);stroke-width:4;stroke-linecap:round;fill:none}
.s-sik rect{fill:var(--bg);stroke:var(--border);stroke-width:1.5}
.s-sik .s-sec{fill:var(--accent-light);stroke:var(--accent);stroke-width:2}
.s-tik{stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.s-tel path,.s-pil,.s-direnc,.s-led,.s-dalga,.s-satir2{fill:none;stroke:var(--ink-soft);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s-led{fill:var(--accent-light);stroke:var(--accent)}
.s-halka2{fill:var(--accent-light)}
.s-dalga{stroke:var(--accent);stroke-width:3}
.s-satir2{stroke:var(--border);stroke-width:1.5}
.s-iz rect{fill:var(--border)}
.s-dol rect{fill:var(--accent)}
.dm-steps{position:relative;display:flex;flex-direction:column;padding-left:38px}
.dm-steps::before,.dm-steps::after{content:"";position:absolute;left:0;top:40px;bottom:40px;width:3px;border-radius:2px;background:var(--border)}
.dm-steps::after{background:var(--gold);transform-origin:top;transform:scaleY(var(--p,.25));transition:transform .4s ease}
.dm-step{display:flex;flex-direction:column;justify-content:center;min-height:54vh;max-width:30em}
.dm-step b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--border);font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--ink-soft);background:var(--surface);transition:background .2s ease,color .2s ease,border-color .2s ease}
.dm-step.on b{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="dark"] .dm-step.on b{color:#06222A}
.dm-step h3{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.1;color:var(--ink-soft)}
.dm-step.on h3{color:var(--ink)}
.dm-step p{margin-top:8px;font-size:1.05rem;color:var(--ink-soft)}
.dm-step:first-child{min-height:44vh}.dm-step:last-child{min-height:44vh}

/* ---------- 3) DEMOLAR ---------- */
.dm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dm-kart{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.dm-kart h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.15;color:var(--ink)}
.dm-ac{font-size:.95rem;color:var(--ink-soft)}
.dm-sema{display:block;width:100%;height:auto;background:var(--bg);border:1px solid var(--border);border-radius:12px}
.dm-sira{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.dm-sonuc{font-weight:700;font-size:.95rem;color:var(--ink)}
.dm-formul-k{font-weight:700;color:var(--ink);font-size:.98rem;padding:0}
.dm-sonuc-k{font-weight:600;color:var(--ink-soft);font-size:.9rem;min-height:2.8em}
/* PLC */
.dm-plc-satir{display:flex;align-items:center;gap:12px}
.dm-plc-satir .dm-sema{flex:1;min-width:0}
.p-ray path{stroke:var(--ink-soft);stroke-width:4}
.p-hat path{stroke:var(--border);stroke-width:3.5;transition:stroke .15s ease}
.p-hat path.ac{stroke:var(--dm-en)}
.p-tem path{stroke:var(--ink-soft);stroke-width:4;fill:none;stroke-linecap:round}
.p-tem path.ac{stroke:var(--dm-en)}
.p-tem .p-nc{stroke-width:3}
.p-bobin{fill:var(--surface);stroke:var(--ink-soft);stroke-width:4;transition:fill .15s ease,stroke .15s ease}
.p-bobin.ac{fill:var(--dm-en);stroke:var(--dm-en)}
.p-et text{fill:var(--ink);font:700 14px var(--font)}
.p-et .p-kk{font-size:11px;font-weight:600;fill:var(--ink-soft)}
.dm-calisir #pBt{fill:#fff}
[data-theme="dark"] .dm-calisir #pBt{fill:#10262E}
.dm-motor{display:flex;flex-direction:column;align-items:center;gap:2px;width:68px;flex-shrink:0;font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.dm-motor svg{width:56px;height:56px}
.m-dis{fill:var(--surface);stroke:var(--ink-soft);stroke-width:2.5;transition:stroke .15s ease}
.m-halka{fill:none;stroke:var(--ink-soft);stroke-width:2.5;stroke-dasharray:5 6.7;stroke-linecap:round}
.m-pervane{transform-origin:20px 20px}
.m-m{fill:var(--ink);font:700 13px var(--font)}
.dm-calisir .m-dis{stroke:var(--dm-en)}
.dm-calisir .m-halka{stroke:var(--dm-en)}
.dm-kart .dm-oku{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--border)}
.dm-kart .dm-oku dt{color:var(--ink-soft)}
.dm-kart .dm-oku dd{color:var(--ink)}
/* Kapı */
.dm-kapi-govde{display:flex;align-items:center;gap:16px}
.dm-kapi-sema{flex:1;min-width:0;max-width:62%}
.g-a,.g-b,.g-c{fill:none;stroke:var(--ink-soft);stroke-width:4;stroke-linecap:round;transition:stroke .15s ease}
.g-a-on .g-a,.g-b-on .g-b,.g-c-on .g-c{stroke:var(--dm-en)}
.g-sek path,.g-sek circle{fill:var(--surface);stroke:var(--ink);stroke-width:3;display:none}
#gSvg[data-g="and"] .g-and,#gSvg[data-g="or"] .g-or,#gSvg[data-g="xor"] .g-xor,#gSvg[data-g="nand"] .g-and,#gSvg[data-g="nand"] .g-nand{display:inline}
.g-sek .g-xor+.g-xor{fill:none}
.g-lamba{fill:var(--border);stroke:var(--ink-soft);stroke-width:2.5;transition:fill .15s ease}
.g-c-on .g-lamba{fill:var(--dm-en);stroke:var(--dm-en)}
.dm-girisler{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.dm-tog{min-height:44px;min-width:96px;padding:0 14px;border:1.5px solid var(--ink-soft);border-radius:10px;font-weight:700;color:var(--ink);background:var(--surface);transition:background .15s ease,color .15s ease}
.dm-tog b{display:inline-block;min-width:.7em;text-align:center}
.dm-tog[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:#fff}
.dm-cikis{font-weight:700;color:var(--ink);padding:2px 2px}
.dm-cikis b{color:var(--accent);font-size:1.15rem}
.dm-tablo{display:table;width:100%;overflow:visible;border-collapse:collapse;text-align:center;font-variant-numeric:tabular-nums;font-size:.95rem}
.dm-tablo th,.dm-tablo td{white-space:normal}
.dm-tablo th{padding:6px;font-size:.8rem;font-weight:700;color:var(--ink-soft);border-bottom:2px solid var(--border)}
.dm-tablo td{padding:6px;border-bottom:1px solid var(--border-light);color:var(--ink)}
.dm-tablo tr.on td{background:var(--accent-light);font-weight:700;border-bottom-color:var(--accent-border)}
.dm-tablo tr.on td:last-child{color:var(--accent)}
/* RC */
.r-izgara path{stroke:var(--border);stroke-width:1;fill:none}
.r-izgara .r-tau{stroke:var(--dm-en);stroke-width:2;stroke-dasharray:4 4}
.r-eksen{stroke:var(--ink-soft);stroke-width:2;fill:none}
.r-egri{stroke:var(--accent);stroke-width:3.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.r-nokta{fill:var(--dm-en)}
.r-et text{fill:var(--ink-soft);font:600 11px var(--font)}
#rTt{fill:var(--dm-en);font-weight:700;font-size:13px}
.dm-ikili{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}
.dm-ikili .dm-aralik{color:var(--ink)}
.dm-ikili output,.dm-kart .dm-aralik output{color:var(--accent)}
/* Quiz */
.dm-soru{font-family:var(--serif);font-size:1.55rem;line-height:1.2;color:var(--ink)}
.dm-sikler{display:grid;gap:8px}
.dm-sik{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;text-align:left;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font-weight:600;transition:border-color .15s ease,background .15s ease}
.dm-sik:hover{border-color:var(--accent)}
.dm-sik i{font-style:normal;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;background:var(--accent-light);color:var(--accent);flex-shrink:0}
.dm-sik[aria-disabled="true"]{cursor:default}
.dm-sik[aria-disabled="true"]:hover{border-color:var(--border)}
.dm-sik.dogru,.dm-sik.dogru:hover{border-color:#1A7F4B;background:rgba(26,127,75,.12)}
.dm-sik.yanlis,.dm-sik.yanlis:hover{border-color:#B42318;background:rgba(180,35,24,.1)}
.dm-sik.dogru::after,.dm-sik.yanlis::after{margin-left:auto;font-size:.82rem;font-weight:700}
.dm-sik.dogru::after{content:"Doğru";color:#1A7F4B}
.dm-sik.yanlis::after{content:"Yanlış";color:#B42318}
.dm-geri{min-height:3.2em;font-size:.95rem;color:var(--ink-soft)}
.dm-geri.dm-iyi{color:#1A7F4B;font-weight:700}
.dm-geri.dm-kotu{color:#B42318;font-weight:700}
[data-theme="dark"] .dm-sik.dogru,[data-theme="dark"] .dm-sik.dogru:hover{border-color:#6FD6A0}
[data-theme="dark"] .dm-sik.yanlis,[data-theme="dark"] .dm-sik.yanlis:hover{border-color:#FFA39A}
[data-theme="dark"] .dm-sik.dogru::after,[data-theme="dark"] .dm-geri.dm-iyi{color:#6FD6A0}
[data-theme="dark"] .dm-sik.yanlis::after,[data-theme="dark"] .dm-geri.dm-kotu{color:#FFA39A}

/* ---------- 4) TİPOGRAFİ ---------- */
.sd-h1{font-size:clamp(2.7rem,6.2vw,5.6rem);line-height:1.0}
.vurgu{position:relative;display:inline-block;white-space:nowrap}
.vurgu .alt{position:absolute;left:0;bottom:-.04em;width:100%;height:.2em;overflow:visible;pointer-events:none}
.vurgu .alt path{fill:none;stroke:#F5C542;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sd-stat b{font-variant-numeric:lining-nums}
.sd-sinavsirit li{flex-shrink:0}

/* ---------- 5) VİTRİN ---------- */
.dm-vit{display:flex;flex-direction:column;gap:14px;min-width:0}
.dm-vit .sd-frame{transition:transform .2s ease}
.dm-vit .sd-frame:hover{transform:translateY(-4px)}
.dm-ne{font-size:.98rem;color:#CFE3E8}
.dm-ne b{color:#F5C542;font-weight:700}

/* JS yoksa etkileşimli parçalar gizlenir (başlangıç değerleri hero'da statik örnek olarak kalır) */
html:not(.js) #dene,html:not(.js) .dm-kontrol{display:none}
.dm-anahtar{position:relative}

/* ---------- HAREKET (yalnız azaltılmamışsa) ---------- */
@media (prefers-reduced-motion:no-preference){
  .dm-ipucu::after{content:"";position:absolute;inset:-4px;border:2px solid #F5C542;border-radius:999px;pointer-events:none;animation:dm-nabiz 1.4s ease-out 1.4s 3 both}
  .sd-h1 .w{display:inline-block;animation:dm-w .24s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
  .vurgu .alt path{stroke-dasharray:1;stroke-dashoffset:1;animation:dm-cizgi .5s ease .55s forwards}
  .dm-nk{animation-duration:var(--dm-dur,1.4s);animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused}
  .dm-sag{animation-name:dm-sag}.dm-sol{animation-name:dm-sol-a}.dm-yukari{animation-name:dm-yukari}.dm-asagi{animation-name:dm-asagi}
  .dm-live.gorunur.dm-akim .dm-nk{animation-play-state:running}
  .dm-calisir.gorunur .m-pervane{animation:dm-don .9s linear infinite}
  .js .sd-sinavsirit ul{flex-wrap:nowrap;overflow:hidden;min-width:0;flex:1}
  .dm-kayar{flex:1;min-width:0;width:100%;max-width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .dm-kayar ul{display:flex;flex-wrap:nowrap;width:max-content;gap:0;overflow:visible;max-width:none}
  .dm-kayar li{margin-right:8px;flex-shrink:0}
  .dm-kayar.kayar ul{animation:dm-kay var(--dm-sn,30s) linear infinite;animation-play-state:paused}
  .sd-sinavsirit.gorunur .dm-kayar.kayar ul{animation-play-state:running}
  .dm-kayar.kayar:hover ul,.dm-kayar:focus-within ul{animation-play-state:paused!important}
  .dm-sda .dm-steps::after{transition:none;animation:dm-hat linear both;animation-timeline:--dm-st;animation-range:cover 12% cover 88%}
  .dm-sda .dm-steps{view-timeline:--dm-st block}
  .dm-gizli .dm-nk,.dm-gizli .m-pervane,.dm-gizli .dm-kayar ul{animation-play-state:paused!important}
}
@keyframes dm-nabiz{from{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(1.14)}}
@keyframes dm-w{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes dm-cizgi{to{stroke-dashoffset:0}}
@keyframes dm-sag{to{transform:translateX(34px)}}
@keyframes dm-sol-a{to{transform:translateX(-34px)}}
@keyframes dm-yukari{to{transform:translateY(-34px)}}
@keyframes dm-asagi{to{transform:translateY(34px)}}
@keyframes dm-don{to{transform:rotate(360deg)}}
@keyframes dm-kay{to{transform:translateX(calc(var(--dm-w) * -1))}}
@keyframes dm-hat{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .vurgu .alt path{stroke-dashoffset:0;stroke-dasharray:none}
}

/* ---------- DUYARLI ---------- */
@media (max-width:1100px){
  .dm-grid{gap:16px}
  .dm-oku{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .dm-kontrol{grid-template-columns:auto 1fr}
  .dm-kontrol .dm-aralik{grid-column:1/-1}
  .dm-story{grid-template-columns:1fr;gap:18px}
  .dm-stage{top:calc(var(--header-h) + 44px);aspect-ratio:auto;height:min(40vh,270px)}
  .dm-steps{padding-left:30px}
  .dm-step{min-height:42vh}.dm-step:first-child,.dm-step:last-child{min-height:34vh}
  .dm-step h3{font-size:1.7rem}
  .dm-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .dm-bar-ipucu{display:none}
  .dm-kontrol{grid-template-columns:1fr;padding:6px 14px 0}
  .dm-seg{justify-self:start}
  .dm-live .dm-formul,.dm-live .dm-durum,.dm-live .dm-alt{padding-left:14px;padding-right:14px}
  .dm-live .dm-oku{margin-left:14px;margin-right:14px;gap:8px 10px}
  .dm-kart{padding:18px}
  .dm-kapi-govde{flex-direction:column;align-items:stretch}
  .dm-kapi-sema{max-width:none}
  .dm-girisler{flex-direction:row;flex-wrap:wrap;align-items:center}
  .dm-ikili{grid-template-columns:1fr}
  .dm-plc-satir{gap:6px}
  .dm-motor{width:56px}.dm-motor svg{width:44px;height:44px}
  .dm-step h3{font-size:1.5rem}
}

/* ---------- MOBİL SIRALAMA: devre ilk ekranda görünsün ---------- */
@media (max-width:900px){
  .sd-hero-grid{gap:18px}
  .sd-hero-text{display:contents}
  .sd-hero-text>.sd-eyebrow{order:1}
  .sd-hero-text>.sd-h1{order:2}
  .sd-hero-text>.sd-lead{order:3;margin-top:0;font-size:1.02rem}
  .sd-hero-text>.sd-actions{order:4;margin-top:0;flex-wrap:nowrap}
  .sd-hero-grid>.sd-stage{order:5}
  .sd-hero-text>.sd-stats{order:6;margin-top:6px}
  .sd-actions .sd-btn{min-height:48px;padding:0 14px;font-size:.95rem;flex:1 1 0}
  .dm-step{justify-content:flex-start;padding-top:14px}
}
@media (max-width:600px){
  .sd-actions .sd-btn{flex:1 1 0}
  .dm-stage{height:min(34vh,250px)}
}

/* ---------- kart genişliğine göre kontrol düzeni (konteyner sorgusu) ---------- */
.sd-stage{container-type:inline-size;container-name:dmst}
.dm-anahtar,.dm-seg button{white-space:nowrap}
@container dmst (max-width:660px){
  .dm-kontrol{grid-template-columns:auto 1fr}
  .dm-kontrol .dm-aralik{grid-column:1/-1}
  .dm-seg{justify-self:end}
}
@container dmst (max-width:430px){
  .dm-kontrol{grid-template-columns:1fr}
  .dm-seg{justify-self:start}
  .dm-et text{font-size:19px}.dm-et .dm-kucuk{font-size:15px}.dm-olcer text{font-size:18px}.dm-olcer .dm-bi{font-size:13px}
}