/* 07.11 açıklama denemeleri 3 (impeccable) — dx10 Laptop Ekranı, dx11 Sahne, dx12 Servis Matı. Metin aynı, yalnız görünüm. */
.dx10 p,.dx11 p,.dx12 p{font-size:16px;line-height:1.7}
.dx10 .dx-note,.dx11 .dx-note,.dx12 .dx-note{background:#fff;border:2px solid var(--red);color:var(--ink);padding:16px 20px;margin:0 0 34px;border-radius:8px}
.dx10 .dx-note b,.dx11 .dx-note b,.dx12 .dx-note b{color:var(--red);font-weight:700;font-size:16px}
.dx10 ::selection,.dx11 ::selection,.dx12 ::selection{background:var(--red);color:#fff}

/* ============ dx10 — LAPTOP EKRANI: açıklama bir ekran çerçevesinin içinde, montaj tek tek oynatılır ============ */
.dx10{position:relative;max-width:900px;background:var(--case2);border-radius:22px 22px 10px 10px;padding:30px 22px 22px;box-shadow:0 18px 40px -18px rgba(27,28,31,.55)}
.dx10:before{content:"";position:absolute;top:11px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#3A3D42;box-shadow:inset 0 0 0 2px #16181a}
.dx10:after{content:"";position:absolute;left:-14px;right:-14px;bottom:-14px;height:14px;border-radius:0 0 16px 16px;background:linear-gradient(#3A3D42,#2A2C30);clip-path:polygon(0 0,100% 0,97% 100%,3% 100%)}
.dx10 .dx-scr{background:#fff;border-radius:6px;padding:30px 32px 8px;min-height:240px}
.dx10 .dx-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.dx10 .dx-facts div{display:flex;gap:8px;align-items:baseline;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.dx10 .dx-facts dt{font-size:13.5px;color:var(--soft)}
.dx10 .dx-facts dd{font-weight:700;font-size:15px}
.dx10 .dx-s{margin:0 0 34px}
.dx10 h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
.dx10 .dx-about p{max-width:68ch}
.dx10 h4{font-size:15px;font-weight:700;color:var(--red);margin:18px 0 8px}
.dx10 .dx-it li{padding:8px 0}
.dx10 .dx-it li b{display:block;font-weight:700}
.dx10 .dx-it li span{color:var(--soft)}
/* oynatıcı (JS açınca) */
.dx10 .dx-tip.play h4,.dx10 .dx-tip.play .dx-it li{display:none}
.dx10 .dx-tip.play .dx-it li.on{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:start;padding:22px 0 10px;animation:dx10in .45s var(--ease-out)}
.dx10 .dx-tip.play li.on:before{content:attr(data-n);grid-row:1 / span 3;font-size:76px;font-weight:800;line-height:.85;letter-spacing:-.04em;color:var(--red);font-variant-numeric:tabular-nums;min-width:1.2ch}
.dx10 .dx-tip.play li.on[data-g]:after{content:attr(data-g);order:-1;font-size:14px;font-weight:700;color:var(--soft)}
.dx10 .dx-tip.play li.on b{font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.dx10 .dx-tip.play li.on span{font-size:16px;max-width:60ch}
@keyframes dx10in{from{opacity:0;transform:translateX(18px)}}
.dx10 .dx-ctl{display:flex;align-items:center;gap:14px;margin-top:14px}
.dx10 .dx-seg{display:flex;gap:4px;flex:1}
.dx10 .dx-seg button{flex:1;height:8px;border:0;border-radius:4px;background:var(--line);cursor:pointer;padding:0;transition:background .2s}
.dx10 .dx-seg button.done{background:var(--case)}
.dx10 .dx-seg button.cur{background:var(--red)}
.dx10 .dx-nav{display:flex;gap:6px}
.dx10 .dx-nav button{font:inherit;font-size:14.5px;font-weight:700;border:1.5px solid var(--case);background:#fff;color:var(--ink);border-radius:8px;padding:8px 14px;cursor:pointer;transition:background .15s,color .15s,transform .1s}
.dx10 .dx-nav button:last-child{background:var(--case);color:#fff}
.dx10 .dx-nav button:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.dx10 .dx-nav button:active:not(:disabled){transform:scale(.97)}
.dx10 .dx-nav button:disabled{opacity:.35;cursor:default}
.dx10 button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.dx10 .dx-gar{background:var(--okbg);border-radius:8px;padding:18px 20px 8px;margin-bottom:24px}
.dx10 .dx-gar h3{font-size:18px;color:var(--ok)}
.dx10 .dx-gar .dx-it{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 26px}

/* ============ dx11 — SAHNE: solda sabit ürün fotoğrafı ve canlı adım sayacı, sağda metin akar ============ */
.dx11{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:56px;max-width:1040px;align-items:start}
.dx11 .dx-stage{position:sticky;top:96px}
.dx11 .dx-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#f2f2f5;color:var(--soft);transition:background .2s,color .2s}
.dx11 .dx-ic:empty{display:none}
.dx11 .dx-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dx11 .dx-idx{display:flex;flex-direction:column;gap:4px}
.dx11 .dx-idx button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:12px;font-size:15px;font-weight:600;line-height:1.25;color:var(--soft);transition:color .2s,background .2s}
.dx11 .dx-idx button:hover{color:var(--ink);background:#f7f7f9}
.dx11 .dx-idx button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.dx11 .dx-idx button.cur{color:var(--ink);font-weight:800}
.dx11 .dx-idx button.cur .dx-ic{background:var(--ink);color:#fff}
.dx11 .dx-read,.dx11 .dx-kv{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px 18px}
.dx11 .dx-read b{display:block;font-size:14px;font-weight:700;color:var(--soft)}
.dx11 .dx-read span{display:block;font-size:56px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;margin:8px 0 4px}
.dx11 .dx-read span:empty{display:none}
.dx11 .dx-read span small{font-size:22px;color:var(--soft);letter-spacing:-.01em;font-weight:700}
.dx11 .dx-read em{display:block;font-style:normal;font-size:15px;font-weight:700;color:var(--ink);margin:2px 0 12px;min-height:1.3em}
.dx11 .dx-read i{display:block;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.dx11 .dx-read i:before{content:"";display:block;height:100%;width:var(--p,0%);background:var(--red);transition:width .4s var(--ease-out)}
.dx11 .dx-kv{list-style:none;display:flex;flex-direction:column;gap:12px}
.dx11 .dx-kv li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:center}
.dx11 .dx-kv .dx-ic{grid-row:1 / span 2;color:var(--ink)}
.dx11 .dx-kv small{font-size:13px;color:var(--soft);line-height:1.2}
.dx11 .dx-kv b{font-size:14.5px;font-weight:700;line-height:1.3}
.dx11 h3{display:flex;align-items:center;gap:14px}
.dx11 h3 .dx-ic{width:42px;height:42px;border-radius:12px;color:var(--ink)}
.dx11 h3 .dx-ic svg{width:22px;height:22px}
.dx11 .dx-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:0 0 38px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.dx11 .dx-facts div{padding:14px 18px;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);display:flex;flex-direction:column;gap:3px}
.dx11 .dx-facts dt{color:var(--soft);font-size:13.5px}
.dx11 .dx-facts dd{font-weight:700;line-height:1.35}
.dx11 .dx-s{margin:0 0 44px}
.dx11 h3{font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:0 0 14px;text-wrap:balance}
.dx11 .dx-about p{max-width:66ch}
.dx11 h4{font-size:15px;font-weight:700;color:var(--red);margin:28px 0 4px}
.dx11 .dx-tip li{padding:18px 0 18px 18px;border-bottom:1px solid var(--line);position:relative;transition:color .3s}
.dx11 .dx-tip li:before{content:"";position:absolute;left:0;top:24px;width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s var(--ease-out)}
.dx11 .dx-tip li.on:before{background:var(--red);transform:scale(1.6)}
.dx11 .dx-tip li b{display:block;font-size:18px;font-weight:700;margin-bottom:2px}
.dx11 .dx-tip li span{color:var(--soft);max-width:62ch;display:block}
.dx11 .dx-gar .dx-it li{padding:10px 0;border-bottom:1px solid var(--line)}
.dx11 .dx-gar li b{font-weight:700;margin-right:6px}
.dx11 .dx-gar li span{color:var(--soft)}

/* ============ dx12 — SERVİS MATI: teknisyenin manyetik tamir matı; adımlar numaralı vida gözlerinde ============ */
.dx12{position:relative;max-width:920px;border-radius:16px;padding:46px 34px 18px;color:#EEF0F2;
 background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/24px 24px,var(--case)}
.dx12:before{content:"";position:absolute;top:0;left:34px;right:34px;height:16px;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 1.5px,transparent 1.5px 60px);
 background-size:auto 8px,auto 16px;background-repeat:repeat-x;background-position:0 0,0 0}
.dx12 .dx-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.dx12 .dx-facts div{background:#fff;color:var(--ink);border-radius:6px;padding:8px 14px 8px 30px;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.dx12 .dx-facts div:before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--case);box-shadow:inset 0 0 0 2px var(--key)}
.dx12 .dx-facts dt{font-size:12.5px;color:var(--soft);line-height:1.3}
.dx12 .dx-facts dd{font-weight:700;font-size:15px;line-height:1.3}
.dx12 .dx-s{margin:0 0 34px}
.dx12 h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px;color:#fff}
.dx12 .dx-about,.dx12 .dx-gar{background:#fff;color:var(--ink);border-radius:10px;padding:24px 26px 12px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transform:rotate(-.4deg)}
.dx12 .dx-gar{transform:rotate(.35deg)}
.dx12 .dx-about h3,.dx12 .dx-gar h3{color:var(--ink)}
.dx12 .dx-about p{max-width:68ch}
.dx12 h4{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:#fff;margin:22px 0 12px}
.dx12 h4:before{content:"";width:14px;height:3px;border-radius:2px;background:var(--red)}
.dx12 h4:first-child{margin-top:0}
.dx12 .dx-tip .dx-it{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dx12 .dx-tip li{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px}
.dx12 .dx-tip li:before{content:counter(n);grid-row:1 / span 2;width:40px;height:40px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.45);display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.dx12 .dx-tip li b{font-weight:700;color:#fff}
.dx12 .dx-tip li span{color:#C9CDD3;font-size:15.5px}
.dx12 .dx-gar .dx-it li{padding:9px 0;border-bottom:1px solid var(--line)}
.dx12 .dx-gar .dx-it li:last-child{border-bottom:0}
.dx12 .dx-gar li b{font-weight:700;margin-right:6px}
.dx12 .dx-gar li span{color:var(--soft)}

@media (max-width:820px){
 .dx11{grid-template-columns:1fr;gap:20px}
 .dx11 .dx-stage{position:static;display:none}
}
@media (max-width:720px){
 .dx10{padding:22px 10px 12px;border-radius:16px 16px 8px 8px}
 .dx10:after{left:-8px;right:-8px}
 .dx10 .dx-scr{padding:20px 16px 4px}
 .dx10 .dx-tip.play li.on:before{font-size:52px}
 .dx10 .dx-tip.play li.on b{font-size:18px}
 .dx10 .dx-ctl{flex-wrap:wrap}
 .dx10 .dx-seg{flex-basis:100%}
 .dx10 .dx-gar .dx-it,.dx12 .dx-tip .dx-it{grid-template-columns:1fr}
 .dx11 .dx-facts{grid-template-columns:1fr}
 .dx12{padding:36px 14px 8px}
 .dx12:before{left:14px;right:14px}
 .dx12 .dx-about,.dx12 .dx-gar{padding:18px 16px 8px;transform:none}
}
@media (prefers-reduced-motion:reduce){
 .dx10 .dx-tip.play li.on{animation:none}
 .dx11 .dx-read i:before,.dx11 .dx-tip li:before,.dx11 .dx-idx button,.dx11 .dx-ic{transition:none}
}

/* ===== dx11 zemin denemeleri (?bg=a|b|c) ===== */
/* A — Gri zemin: tüm açıklama açık gri tabakta, bölümler beyaz kart */
.dx11.bg-a{background:#f3f4f6;border-radius:20px;padding:28px}
.dx11.bg-a .dx-s{background:#fff;border-radius:16px;padding:26px 28px 14px;margin-bottom:20px;box-shadow:0 1px 0 var(--line)}
.dx11.bg-a .dx-facts{margin-bottom:20px}
.dx11.bg-a .dx-note{margin-bottom:20px}
.dx11.bg-a .dx-idx button:hover{background:#e9eaee}
.dx11.bg-a .dx-s .dx-ic{background:#f3f4f6}
/* B — Koyu kenar: sol sütun koyu panel, metin beyaz zeminde */
.dx11.bg-b .dx-stage{background:var(--ink);border-radius:18px;padding:14px 12px 12px;color:#fff}
.dx11.bg-b .dx-idx button{color:#a9adb8}
.dx11.bg-b .dx-idx button:hover{color:#fff;background:rgba(255,255,255,.07)}
.dx11.bg-b .dx-idx button.cur{color:#fff}
.dx11.bg-b .dx-stage .dx-ic{background:rgba(255,255,255,.08);color:#c9ccd4}
.dx11.bg-b .dx-idx button.cur .dx-ic{background:#fff;color:var(--ink)}
.dx11.bg-b .dx-read,.dx11.bg-b .dx-kv{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.dx11.bg-b .dx-read b,.dx11.bg-b .dx-read span small,.dx11.bg-b .dx-kv small{color:#a9adb8}
.dx11.bg-b .dx-read span,.dx11.bg-b .dx-read em,.dx11.bg-b .dx-kv b{color:#fff}
.dx11.bg-b .dx-read i{background:rgba(255,255,255,.14)}
.dx11.bg-b .dx-facts{background:#f6f7f9}
/* C — Bölüm renkleri: her bölüm kendi açık tonunda */
.dx11.bg-c .dx-s{border-radius:16px;padding:26px 28px 14px;margin-bottom:20px}
.dx11.bg-c .dx-facts,.dx11.bg-c .dx-note{margin-bottom:20px}
.dx11.bg-c .dx-about{background:#fff}
.dx11.bg-c .dx-tip{background:#e8eff8}
.dx11.bg-c .dx-gar{background:#e7f4ec}
.dx11.bg-c .dx-s .dx-ic{background:#fff}
.dx11.bg-c .dx-about .dx-ic{background:#f3f4f6}
.dx11.bg-c .dx-tip li,.dx11.bg-c .dx-gar .dx-it li{border-color:rgba(20,30,50,.09)}
.dx11.bg-c .dx-facts{background:#fff}
.dx11.bg-c{background:#f3f4f6;border-radius:20px;padding:28px}
.dx11.bg-c .dx-idx button:hover{background:#e9eaee}
.dx11.bg-c .dx-stage .dx-ic{background:#fff}
.dx11.bg-c .dx-kv .dx-ic{background:#f3f4f6}
.dx11.bg-c .dx-idx button.cur .dx-ic{background:var(--ink)}
@media (max-width:720px){.dx11.bg-a,.dx11.bg-c{padding:14px}.dx11.bg-a .dx-s,.dx11.bg-c .dx-s{padding:20px 16px 10px}}