/* Yazı tipleri yerel (dış adres yok); dosyalar site/statik/font/ altında, lisansları LISANS.md'de (üçü de SIL OFL 1.1).
   Archivo: başlık (değişken ağırlık 500–900, genişlik 100–112). Source Sans 3: gövde (400–900). IBM Plex Mono: etiket (500).
   Üç dosya da Türkçe harfleri (ğ ş ı İ ö ü ç) taşır; tarayıcı testi yedek yazı tipine düşülmediğini ölçer. */
@font-face{font-family:"Archivo";src:url(/font/archivo.woff2) format("woff2");font-weight:500 900;font-stretch:100% 112%;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/font/sourcesans3.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/font/plexmono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Firma tanıtım sitesi: stil.
   Malzeme: devre kartı. Zemin koyu lehim maskesi (yeşile çalan çok koyu ton), vurgu bakır yol ve altın ped, yazı serigrafi
   beyazı, tek sinyal rengi (LED). Mor-mavi gradyan, cam efekti ve fotoğraf yok.
   Düzen: her sayfa dikey bir slayt dizisidir; bir kaydırma bir slayttır ("çat" diye oturur). Sunum dilinden alınanlar:
   her slaytta tek fikir, çok büyük başlık, eş aralıklı küçük etiketler, sağ üstte bölüm etiketi, sayaç ve ilerleme çubuğu,
   etkin ve a0..aN sınıflarıyla CSS geçişi, kademeli giriş, harf maskeli başlık.
   KURAL: içerik betiksiz tam görünür. Bir öğeyi gizleyen başlangıç hâli (opacity:0, translate, çizgi uzunluğu) yalnız
   .js altında ve @media (prefers-reduced-motion:no-preference) içinde yazılır (test denetler). Hareket yalnız transform,
   opacity ve çizgi uzunluğuyla yapılır. */
:root{
  color-scheme:dark;
  --zemin:#08130e;--zemin-2:#0c1b14;--yuzey:#10241b;--yuzey-2:#173326;
  --cizgi:rgba(222,236,226,.13);--cizgi-2:rgba(222,236,226,.26);
  --seri:#eef2ea;--seri-2:rgba(238,242,234,.84);--soluk:#9db3a5;
  --bakir:#c98a4b;--bakir-acik:#e3a868;--bakir-koyu:#7c5128;--altin:#dcb75e;--altin-acik:#efd38c;--murekkep:#0b130e;
  --sinyal:#5ee6d0;--kesik:#ef7a64;
  --f-baslik:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-govde:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --e-cikis:cubic-bezier(.16,1,.3,1);--e-yumusak:cubic-bezier(.65,0,.35,1);
  --kenar:clamp(18px,4.6vw,56px);
  --kenar-sol:max(var(--kenar),env(safe-area-inset-left,0px));--kenar-sag:max(var(--kenar),env(safe-area-inset-right,0px));
  --ust-y:calc(58px + env(safe-area-inset-top,0px));
  --slayt-yuk:calc(100vh - var(--ust-y));
  --alt-bosluk:calc(clamp(46px,7vh,84px) + env(safe-area-inset-bottom,0px));
}
@supports (height:100svh){:root{--slayt-yuk:calc(100svh - var(--ust-y));--alt-bosluk:calc(clamp(46px,7svh,84px) + env(safe-area-inset-bottom,0px))}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--ust-y);background:var(--zemin)}
/* Tutturma: betik varsa bir kaydırma bir slayt. Kısa ekranda, uzun slayt varken (.serbest, betik ölçer) ve "hareketi azalt"
   açıkken yalnız yakındaki slayta çeker; betiksiz hiç tutturmaz (içerik hiçbir ekranda erişilmez kalmaz). */
html.js{scroll-snap-type:y mandatory}
html.js.serbest{scroll-snap-type:y proximity}
@media (max-height:560px){html.js{scroll-snap-type:y proximity}}
@media (prefers-reduced-motion:reduce){html.js{scroll-snap-type:y proximity}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;padding-top:var(--ust-y);color:var(--seri);background-color:var(--zemin);
  background-image:radial-gradient(circle,rgba(220,183,94,.07) 1.2px,transparent 1.7px);background-size:28px 28px;
  font:400 clamp(1.05rem,.98rem + .35vw,1.25rem)/1.5 var(--f-govde);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--f-baslik);margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2rem,.8rem + 5vw,5.4rem);line-height:.98}
h2{font-weight:800;font-size:clamp(1.85rem,.9rem + 3.4vw,4rem);line-height:1.02}
h3{font-weight:700;font-size:clamp(1.12rem,1rem + .45vw,1.4rem);line-height:1.18;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-underline-offset:.18em}
a:hover{color:var(--bakir-acik)}
::selection{background:var(--altin);color:var(--murekkep)}
:focus-visible{outline:3px solid var(--sinyal);outline-offset:3px;border-radius:4px}
svg{overflow:visible}
.atla{position:fixed;left:12px;top:-80px;z-index:100;background:var(--altin);color:var(--murekkep);padding:12px 16px;border-radius:6px;font-weight:700;text-decoration:none}
.atla:focus{top:12px}
.seri,.slayt-etiket,.iz,.ust-etiket,.cizim-tur,.durum,.ornek-etiket,.kanal-ad,.alan-durum,.alt-baslik,.im,.marka-imza,.cikti span{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;letter-spacing:.12em}
.seri{font-size:.74rem;color:var(--bakir-acik)}

/* ---------- Üst başlık (ince, sabit; slayt yüksekliği hesabına girer) ---------- */
.ust{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--ust-y);display:flex;align-items:center;gap:clamp(8px,1.6vw,24px);
  padding:env(safe-area-inset-top,0px) var(--kenar-sag) 0 var(--kenar-sol);background:rgba(8,19,14,.94);border-bottom:1px solid var(--cizgi)}
.marka{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;text-decoration:none;color:var(--seri)}
.marka:hover{color:var(--seri)}
.marka-im{flex:none;color:var(--bakir)}
.marka-im rect{fill:var(--altin)}
.marka-yazi{display:grid;line-height:1}
.marka-ad{font-family:var(--f-baslik);font-weight:800;font-size:1.32rem;letter-spacing:-.01em}
.marka-imza{font-size:.58rem;letter-spacing:.08em;text-transform:none;color:var(--soluk);margin-top:4px}
.gezinti{display:flex;gap:2px}
.gezinti-bag{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:6px;text-decoration:none;font-size:.98rem;color:var(--seri-2)}
.gezinti-bag[aria-current="page"],.gezinti-bag[data-bolum-etkin]{color:var(--seri);box-shadow:inset 0 -2px 0 var(--bakir)}
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:6px;border:1px solid transparent;
  background:var(--altin);color:var(--murekkep);font:700 1.02rem/1.1 var(--f-govde);text-decoration:none;text-align:center}
.dugme:hover{background:var(--altin-acik);color:var(--murekkep)}
.dugme-cizgi{background:transparent;color:var(--seri);border-color:var(--cizgi-2)}
.dugme-cizgi:hover{background:transparent;color:var(--bakir-acik);border-color:var(--bakir)}
.dugme-kucuk{min-height:44px;padding:0 16px;font-size:.95rem}
.dugme .ok{flex:none}
.harita-dugme{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;border:1px solid var(--cizgi-2);color:var(--bakir-acik)}
.menu{position:static}
.menu summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--cizgi-2);border-radius:6px;cursor:pointer;font:500 .74rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.menu summary::-webkit-details-marker{display:none}
.menu-cizgiler{display:grid;gap:4px;width:18px}
.menu-cizgiler span{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform .25s var(--e-cikis),opacity .2s}
.menu[open] .menu-cizgiler span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[open] .menu-cizgiler span:nth-child(2){opacity:.2}
.menu[open] .menu-cizgiler span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-panel{position:fixed;left:0;right:0;top:var(--ust-y);max-height:calc(var(--slayt-yuk));overflow:auto;overscroll-behavior:contain;display:grid;
  padding:8px var(--kenar-sag) calc(24px + env(safe-area-inset-bottom,0px)) var(--kenar-sol);background:var(--zemin-2);border-bottom:1px solid var(--cizgi-2)}
.menu-bag{display:flex;align-items:center;min-height:52px;font:700 1.25rem var(--f-baslik);text-decoration:none;border-bottom:1px solid var(--cizgi)}
.menu-bag[aria-current="page"]{color:var(--bakir-acik)}
@media (max-width:1139px){.gezinti{display:none}}
@media (min-width:1140px){.menu{display:none}}
@media (max-width:419px){.ust-cta{display:none}}

/* ---------- Slayt destesi ---------- */
.slayt{position:relative;min-height:var(--slayt-yuk);display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always;
  padding:clamp(6px,1.4svh,18px) var(--kenar-sag) var(--alt-bosluk) var(--kenar-sol);border-top:1px solid var(--cizgi)}
.slayt:first-child{border-top:0}
.slayt-bas{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:1240px;margin:0 auto;min-height:44px}
.slayt-etiket{margin:0 0 0 auto;color:var(--soluk);font-size:.7rem;text-align:right;white-space:nowrap}
.slayt-no{color:var(--bakir-acik);margin-right:6px}
.slayt-govde{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:1240px;margin:0 auto;padding-block:clamp(4px,2svh,36px)}
.iz{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:.68rem;color:var(--soluk)}
.iz a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.iz a:hover{color:var(--bakir-acik)}
.iz [aria-current]{color:var(--seri-2)}
.tek-sutun{max-width:900px}
.genis{width:100%}
.buyuk{font-size:clamp(1.1rem,1rem + .6vw,1.45rem);color:var(--seri-2);max-width:46ch;margin-top:clamp(10px,2svh,20px)}
.tek-sutun > p + p.buyuk{margin-top:12px}
.not{margin-top:18px;padding:12px 14px;border-left:3px solid var(--sinyal);background:var(--zemin-2);color:var(--seri-2);font-size:1rem;max-width:60ch}

/* Adımlı slayt: içindeki sahne yapışkan durur, görünmez tutturma noktaları adım sayısı kadardır. Betiksiz, "hareketi azalt"
   açıkken, kısa ekranda ve sahne ekrana sığmadığında (.duz, betik ölçer) tek ekran yüksekliğinde son adım hâlinde durur. */
.slayt-adimli{display:block;padding:0}
.sahne{display:flex;flex-direction:column;min-height:var(--slayt-yuk);padding:clamp(6px,1.4svh,18px) var(--kenar-sag) var(--alt-bosluk) var(--kenar-sol)}
.tutturma{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none}

/* ---------- Giriş slaytı ---------- */
.giris{display:grid;gap:clamp(18px,4vw,64px);align-items:center}
.giris-metin > * + *{margin-top:clamp(10px,2svh,24px)}
@media (max-width:520px){.dugmeler .dugme{padding:0 16px;flex:1 1 auto}.cizim-kart svg{max-height:26svh}.giris-metin > * + *{margin-top:clamp(8px,1.3svh,16px)}.durum-notu{padding:8px 12px;font-size:.95rem}}
.giris-alt{font-size:clamp(1.1rem,1rem + .6vw,1.45rem);color:var(--seri-2);max-width:42ch}
.giris-cizim{min-width:0}
.giris-cizim .cizim{max-width:640px;margin-inline:auto}
@media (min-width:1000px){
  .giris-cizimli{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .giris-cizimli h1{font-size:clamp(3rem,.6rem + 3.9vw,5.2rem)}
}
.ust-etiket{display:flex;align-items:center;gap:12px;font-size:.72rem;color:var(--soluk)}
.ust-etiket .seri{padding:3px 8px;border:1px solid var(--bakir);border-radius:3px}
.im{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;color:var(--sinyal)}
.im::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sinyal);box-shadow:0 0 12px var(--sinyal)}
.dugmeler{display:flex;flex-wrap:wrap;gap:12px}
.harfli > span{display:inline}
.maske{display:inline-block;overflow:hidden;padding:.1em .04em .14em;margin:-.1em -.04em -.14em;vertical-align:top}
.harf{display:inline-block}

/* ---------- Durum etiketi (çözüm sayfaları) ---------- */
.durum{display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 12px;border:1px solid currentColor;border-radius:4px;font-size:.72rem;color:var(--altin)}
.durum-plan{color:var(--soluk)}
.durum-isik{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.durum-plan .durum-isik{background:transparent;border:1.5px solid currentColor;box-shadow:none}
.durum-kutu{display:grid;gap:10px;justify-items:start}
.durum-metni{color:var(--seri-2);font-size:1rem;max-width:58ch}
.durum-notu{padding:10px 14px;border-left:3px solid var(--altin);background:var(--zemin-2);color:var(--seri-2)}

/* ---------- Listeler ve kutular ---------- */
.madde-listesi{list-style:none;margin:clamp(16px,3svh,30px) 0 0;padding:0;display:grid;gap:clamp(8px,1.5svh,14px);font-size:clamp(1.06rem,.96rem + .6vw,1.38rem)}
.madde-listesi li{position:relative;padding-left:34px}
.madde-listesi li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:11px;border-radius:2px;background:var(--altin)}
.madde-listesi li::after{content:"";position:absolute;left:14px;top:calc(.42em + 4.5px);width:12px;height:2px;background:var(--bakir)}
.madde-listesi.kucuk{font-size:1.02rem;gap:8px}
.madde-listesi.numarali{counter-reset:madde}
.madde-listesi.numarali li{counter-increment:madde;padding-left:52px}
.madde-listesi.numarali li::before{content:counter(madde,decimal-leading-zero);width:auto;height:auto;top:.16em;padding:2px 6px;background:transparent;border:1px solid var(--bakir);color:var(--bakir-acik);font:500 .72rem var(--f-mono)}
.madde-listesi.numarali li::after{display:none}
.kutular{display:grid;gap:clamp(10px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:clamp(16px,3svh,34px)}
.kutular-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.kutu{position:relative;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:10px;padding:clamp(16px,2vw,24px)}
.kutu::before{content:"";position:absolute;top:12px;right:12px;width:12px;height:12px;border-radius:2px;background:var(--altin);opacity:.9}
.kutu::after{content:"";position:absolute;top:17px;right:24px;width:22px;height:2px;background:var(--bakir);opacity:.9}
.kutu-vurgu{border-color:var(--bakir)}
.kutu-soluk{background:var(--zemin-2)}
.kutu h3{margin-bottom:8px;padding-right:40px}
.kutu p{color:var(--seri-2);font-size:1.02rem}
.kutu-kodlu{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline}
.kutu-kodlu .kutu-kod{grid-row:1}
.kutu-kodlu h3{grid-row:1;margin:0}
.kutu-kodlu .kutu-metin{grid-column:1/-1;margin-top:6px}
@media (max-width:520px){.kutu{padding:14px}.kutu .madde-listesi{margin-top:10px}}

/* ---------- Dört katman ve süreç ---------- */
.katman-sahne{display:grid;gap:clamp(14px,3vw,48px);align-items:center}
@media (min-width:900px){.katman-sahne{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.katman-cizim svg{max-height:min(34svh,420px);margin-inline:auto}
@media (min-width:900px){.katman-sahne{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.katman-sahne .katman-cizim svg{max-height:min(68svh,620px)}}
@media (max-width:899px){.katman-sahne{gap:clamp(14px,2.4svh,24px)}.katman-sahne .katman-cizim{order:-1}.katman-sahne .katman-cizim svg{max-height:30svh}.katman-cizim figcaption{margin-top:4px}.calisma .katman-cizim .cizim-sistem svg{max-height:36svh}}
.adim-listesi{list-style:none;margin:clamp(14px,2.6svh,28px) 0 0;padding:0;display:grid;gap:14px}
.adim-ogesi{border-left:3px solid var(--bakir);padding:4px 0 4px 16px}
.adim-ogesi h3{margin:4px 0 6px}
.adim-ogesi p{color:var(--seri-2);font-size:1.02rem;max-width:56ch}
.adim-ogesi .seri{color:var(--bakir-acik)}
.adim-ogesi a{white-space:nowrap}
.surec-sahne{width:100%}
.surec-hat{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;height:44px;margin-top:clamp(16px,3svh,32px)}
.surec-yol{position:absolute;left:4%;right:4%;top:50%;width:92%;height:20px;transform:translateY(-50%)}
.surec-yol path{stroke-width:4;vector-effect:non-scaling-stroke}
.surec-nokta{position:relative;justify-self:center;display:grid;place-items:center;width:36px;height:36px;border-radius:5px;background:var(--altin);color:var(--murekkep);font:500 .72rem var(--f-mono)}
.surec-listesi{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cikti{margin-top:8px;font-size:.95rem}
.cikti span{font-size:.66rem;color:var(--bakir-acik);margin-right:6px}
.surec-kisa{list-style:none;margin:clamp(16px,3svh,30px) 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.surec-kisa li{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:8px;font-weight:600}

/* ---------- Sistem nasıl çalışır ---------- */
.akis{list-style:none;margin:clamp(14px,2.6svh,26px) 0 0;padding:0;display:grid;gap:10px}
.akis li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;color:var(--seri-2)}
.akis li strong{color:var(--seri)}
.akis li > :not(.seri){grid-column:2}
.akis .seri{grid-row:span 2;min-width:3.4em}
.kesinti{display:flex;gap:12px;align-items:center;margin-top:18px;padding:12px 14px;border:1px dashed var(--sinyal);border-radius:8px;color:var(--seri);max-width:52ch}
.kesinti-isik{flex:none;width:10px;height:10px;border-radius:50%;background:var(--sinyal);box-shadow:0 0 12px var(--sinyal)}
.cizim-sistem svg{max-height:min(46svh,520px);margin-inline:auto}
@media (min-width:900px){.katman-sahne .cizim-sistem svg{max-height:min(62svh,600px)}}

/* ---------- Çizimler ---------- */
.cizim{margin:0}
.cizim svg{display:block;width:100%;height:auto}
/* Alt yazı: tür etiketi ve açıklama sola yaslı; açıklama kırılırsa etiketin yanında sola yaslı kalır. */
.cizim figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:10px;font-size:.92rem;line-height:1.35;color:var(--soluk);text-align:left}
.cizim-tur{flex:0 1 auto;max-width:100%;padding:2px 6px;border:1px solid var(--bakir);border-radius:3px;font-size:.62rem;color:var(--bakir-acik)}
.cizim-yazi{flex:1 1 14em;min-width:0}
.cizim-kart svg{max-height:min(44svh,440px)}
.cizim-telefon svg{max-height:min(46svh,400px)}
.cizim-cift{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:clamp(10px,2vw,24px);align-items:end}
.cizim-sensor svg{max-height:min(34svh,300px)}
@media (max-width:520px){.giris-cizim .cizim-sensor svg{max-height:22svh}}
.k-kenar{fill:#0f2a1e;stroke:#2f6047;stroke-width:2}
.k-halka,.k-gecis,.k-ped{fill:var(--altin)}
.k-delik{fill:var(--zemin)}
.k-yol{fill:none;stroke:var(--bakir);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.k-yol-guc{stroke-width:9}
.k-modul{fill:#14301f;stroke:#3d7056;stroke-width:1.5}
.k-anten{fill:none;stroke:var(--bakir);stroke-width:3}
.k-kalkan{fill:#aab6ae}
.k-role{fill:#16201c;stroke:#5c6f65;stroke-width:1.5}
.k-role-iz{stroke:#5c6f65;stroke-width:2}
.k-cip{fill:#0d1311}
.k-pasif{fill:#b28b5e}
.k-klemens{fill:#2c6a4d;stroke:#4f9573}
.k-vida{fill:#c8cec9}
.k-vida-iz{stroke:#59625d;stroke-width:2}
.k-fis{fill:#e6e0cf}
.k-led{fill:#e9f7f3}
.k-isik{fill:var(--sinyal)}
.k-isik-hale{fill:var(--sinyal);opacity:.26}
.k-seri{fill:var(--seri);font:500 13px var(--f-mono);letter-spacing:.08em}
.k-seri-kucuk{font-size:10px;fill:var(--soluk)}
.k-seri-kutu{fill:none;stroke:var(--seri);stroke-width:1.4}
.k-marka{fill:var(--seri);font:500 17px var(--f-mono);letter-spacing:.14em}
.t-govde{fill:#0a110d;stroke:#6f8579;stroke-width:2}
.t-ekran{fill:#13261d}
.t-ada{fill:#0a110d}
.t-ornek{fill:var(--altin);font:500 10px var(--f-mono);letter-spacing:.14em}
.t-led{fill:var(--sinyal)}
.t-marka{fill:var(--seri);font:500 11px var(--f-mono);letter-spacing:.1em}
.t-baslik{fill:var(--seri);font:800 21px var(--f-baslik)}
.t-ad{fill:var(--soluk);font:400 13px var(--f-govde)}
.t-deger{fill:var(--seri);font:700 17px var(--f-govde)}
.t-cizgi{stroke:rgba(222,236,226,.16);stroke-width:1.2;fill:none}
.t-dugme{fill:var(--altin)}
.t-dugme-yazi{fill:var(--murekkep);font:700 15px var(--f-govde)}
.c-bulut{fill:none;stroke:var(--seri-2);stroke-width:2}
.c-raf,.c-kutu{fill:#173527;stroke:#3d7056;stroke-width:1.5}
.c-led{fill:var(--sinyal)}
.c-raf-iz{stroke:#3d7056;stroke-width:2}
.c-olcer{fill:var(--bakir)}
.c-dongu{fill:none;stroke:var(--sinyal);stroke-width:2;stroke-dasharray:5 5}
.c-dongu-ok{fill:none;stroke:var(--sinyal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-sinyal{fill:var(--sinyal)}
.c-dongu-sinyal,.c-sinyal-g{transform-box:view-box}
.c-internet{fill:none;stroke:var(--seri-2);stroke-width:2.5}
/* İnternet kesilince (istemci.js "kesik" sınıfını yazar): bağlantı kesik çizgi ve kırmızımsı olur. */
.kesik .c-internet{stroke:var(--kesik);stroke-dasharray:.05 .045}
.c-etiket{fill:var(--soluk);font:500 12px var(--f-mono);letter-spacing:.1em}
.c-not{fill:var(--sinyal);font:500 11px var(--f-mono);letter-spacing:.1em}
.c-kesinti path{fill:none;stroke:var(--altin);stroke-width:3;stroke-linecap:round}
.c-not-uyari{fill:var(--altin)}
[data-dugum],[data-baglanti],[data-adim="yerel-karar"],[data-adim="kesinti"]{transition:opacity .5s var(--e-cikis)}
.c-yuz{fill:#1a3b2b;stroke:#4b7d62;stroke-width:1.2}
.c-yuz-sol{fill:#0e2219}
.c-yuz-sag{fill:#12291e}
.c-ayrinti{fill:none;stroke:var(--bakir);stroke-width:2.5;stroke-linecap:round}
.c-ayrinti-dolu{fill:var(--altin)}
.s-govde{fill:#173527;stroke:#5f8e74;stroke-width:2}
.s-sivi{fill:rgba(238,242,234,.86)}
.s-ayak,.s-cubuk,.s-dis{fill:none;stroke:#8fa79a;stroke-width:3;stroke-linecap:round}
.s-olcer{fill:var(--bakir)}
.s-uc{fill:var(--altin)}
.s-kablo{fill:none;stroke:var(--bakir);stroke-width:3;stroke-linecap:round}
.s-ic,.s-cam{fill:#0e2219;stroke:#5f8e74;stroke-width:2}
.s-role{fill:#16201c;stroke:var(--bakir);stroke-width:1.5}
.s-cati{fill:var(--bakir-koyu)}
.s-ic-cizgi{stroke:var(--zemin);stroke-width:4}
.s-etiket{fill:var(--soluk);font:500 11px var(--f-mono);letter-spacing:.12em}

/* ---------- Alan değiştirici ---------- */
.alanlar{margin-top:clamp(12px,2.2svh,24px)}
.alan-secici{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.alan-sekme{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--cizgi-2);border-radius:6px;text-decoration:none;font-weight:700}
.alan-sekme[aria-selected="true"]{background:var(--altin);border-color:var(--altin);color:var(--murekkep)}
.alan-paneller{display:grid;gap:20px;margin-top:14px}
.alan-panel{display:grid;gap:14px;align-items:center;padding:clamp(12px,2vw,24px);background:var(--zemin-2);border:1px solid var(--cizgi);border-radius:12px}
.alan-panel[hidden]{display:none}
@media (min-width:860px){.alan-panel{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.cizim-akis{display:grid;grid-template-columns:minmax(0,1.9fr) 16px minmax(0,.8fr);align-items:center;gap:6px}
.cizim-akis figcaption{grid-column:1/-1;margin-top:4px}
.alan-sensor{display:grid;grid-template-columns:minmax(0,1.5fr) 16px minmax(0,1fr);align-items:center;gap:6px}
.alan-tel svg{max-height:min(26svh,280px);margin-inline:auto}
.akis-ok{height:2px;background:var(--bakir);position:relative}
.akis-ok::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid var(--bakir)}
.alan-metin{display:grid;gap:8px;justify-items:start}
.alan-metin p{color:var(--seri-2)}
.alan-metin a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700}
.marka-sira{max-width:880px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(12px,3vw,40px);align-items:center;margin-top:clamp(8px,2svh,20px)}
.marka-sira .cizim-telefon svg{max-height:min(40svh,400px)}
.marka-bag{margin-top:18px}
@media (max-width:640px){.marka-sira{grid-template-columns:minmax(0,1fr);gap:10px}.marka-bag{margin-top:10px}.marka-sira .cizim-kart svg{max-height:20svh}.marka-sira .cizim-telefon svg{max-height:24svh}}

/* ---------- Sensörden telefona ---------- */
.sistem-sutunlar{display:grid;gap:clamp(12px,2vw,28px);margin-top:clamp(14px,2.6svh,28px)}
@media (min-width:760px){.sistem-sutunlar{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}}
.sistem-sutun{display:grid;gap:8px;align-content:start}
@media (max-width:759px){.sistem-sutun{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:14px;align-items:center}.sistem-cizim{grid-row:span 2}}
.sistem-sutun > p:not(.seri){color:var(--seri-2);font-size:1rem}
.sistem-cizim .cizim-telefon svg{max-height:min(24svh,260px)}
@media (max-width:759px){.sistem-cizim .cizim-sensor svg{max-height:15svh}.sistem-cizim .cizim-kucuk-kart svg{max-height:10svh}}
.cizim-kucuk-kart svg{max-width:180px;margin-inline:auto}

/* ---------- Sık sorulanlar ---------- */
.sss-liste{margin-top:clamp(14px,2.6svh,26px);max-width:900px}
.sss{border-top:1px solid var(--cizgi)}
.sss:last-child{border-bottom:1px solid var(--cizgi)}
.sss summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:10px 0;cursor:pointer;list-style:none}
.sss summary::-webkit-details-marker{display:none}
.sss summary h3{font-size:clamp(1.08rem,1rem + .45vw,1.32rem)}
.arti{position:relative;flex:none;width:28px;height:28px;border:1px solid var(--cizgi-2);border-radius:4px}
.arti::before,.arti::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--bakir-acik);transition:transform .25s var(--e-cikis)}
.arti::after{transform:rotate(90deg)}
.sss[open] .arti::after{transform:rotate(0)}
.sss p{padding:0 0 16px;color:var(--seri-2);max-width:68ch}

/* ---------- İletişim ve keşif çağrısı ---------- */
.kanallar{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kanal{display:flex;gap:12px;align-items:flex-start}
.kanal > svg{flex:none;margin-top:4px;color:var(--bakir)}
.kanal-ad{display:block;font-size:.66rem;color:var(--soluk)}
.kanal a{display:inline-flex;align-items:center;min-height:44px;font-size:1.15rem;font-weight:700;overflow-wrap:anywhere}
.kanallar-kucuk .kanal a{font-size:1rem}
.kanal-kutu{padding:clamp(14px,2vw,22px);background:var(--zemin-2);border:1px solid var(--cizgi);border-radius:10px;max-width:640px}
.ornek-etiket{display:inline-block;margin-left:8px;padding:2px 6px;border:1px dashed var(--altin);border-radius:3px;font-size:.6rem;color:var(--altin);vertical-align:middle}
.kesif-ic{max-width:900px}
.slayt-kesif .slayt-govde{background-image:radial-gradient(circle,rgba(220,183,94,.16) 4px,transparent 5px);background-size:40px 40px;background-position:right center;background-repeat:repeat-y}
.slayt-kesif .dugmeler{margin-top:clamp(18px,3svh,30px)}

/* ---------- Sağ kenarda slayt noktaları, sayaç ve ilerleme çubuğu ---------- */
.noktalar{position:fixed;right:max(8px,env(safe-area-inset-right,0px));top:50%;z-index:40;transform:translateY(-50%)}
.noktalar ol{list-style:none;margin:0;padding:0;display:grid}
.noktalar a{display:grid;place-items:center;width:32px;height:44px}
.noktalar a span{display:block;width:8px;height:8px;border-radius:2px;background:var(--cizgi-2);transition:transform .3s var(--e-cikis)}
.noktalar a:hover span{background:var(--bakir)}
.noktalar a[aria-current="true"] span{transform:scaleY(2.75);background:var(--sinyal)}
@media (max-width:1139px),(max-height:600px){.noktalar{display:none}}
.sayac{position:fixed;right:var(--kenar-sag);bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;margin:0;padding:5px 11px;border:1px solid var(--cizgi);border-radius:999px;
  background:rgba(8,19,14,.9);color:var(--seri-2);font:500 .7rem var(--f-mono);letter-spacing:.12em;font-variant-numeric:tabular-nums;pointer-events:none}
.ilerleme{position:fixed;left:0;right:0;bottom:0;z-index:41;height:3px;background:rgba(222,236,226,.08);pointer-events:none}
.ilerleme span{display:block;height:100%;background:var(--sinyal);transform-origin:0 50%;transform:scaleX(var(--ilerleme,0))}

/* ---------- Alt bilgi (telefonda bir ekrana sığacak kadar kısa) ---------- */
.alt{padding:clamp(22px,4svh,48px) var(--kenar-sag) calc(30px + env(safe-area-inset-bottom,0px)) var(--kenar-sol);background:var(--zemin-2);border-top:1px solid var(--cizgi-2);scroll-snap-align:end}
.alt-ic{max-width:1240px;margin:0 auto;display:grid;gap:14px 40px}
@media (min-width:900px){.alt-ic{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}.alt-marka{grid-row:span 2}}
.alt-marka{display:grid;gap:8px}
.alt-ad{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:800 1.4rem var(--f-baslik)}
.alt-imza{font:500 .62rem var(--f-mono);letter-spacing:.08em;color:var(--soluk)}
.alt-aciklama{color:var(--soluk);font-size:.95rem;max-width:52ch}
.alt-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 16px}
.alt-liste a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--seri-2);font-size:.98rem}
.alt-son{max-width:1240px;margin:10px auto 0;padding-top:6px;border-top:1px solid var(--cizgi);color:var(--soluk);font-size:.88rem}
.alt-son a{display:inline-flex;align-items:center;min-height:44px;color:var(--seri)}

/* ---------- Yol tarifi penceresi ---------- */
.yol-pencere{width:min(420px,calc(100vw - 32px));padding:0;border:1px solid var(--cizgi-2);border-radius:12px;background:var(--zemin-2);color:var(--seri)}
.yol-pencere::backdrop{background:rgba(3,8,6,.72)}
.yp-ust{padding:20px 20px 8px}
.yp-ust h2{font-size:1.6rem}
.yp-ust p{color:var(--soluk)}
.yp-liste{list-style:none;margin:0;padding:8px 12px;display:grid;gap:6px}
.yp-liste a{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 10px;border:1px solid var(--cizgi);border-radius:8px;text-decoration:none}
.yp-ad{display:grid;flex:1}
.yp-ad small{color:var(--soluk)}
.yp-adres{padding:4px 20px;color:var(--seri-2)}
.yp-adres span{display:block;font:500 .66rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soluk)}
.yp-alt{padding:12px 20px 20px}

/* ---------- Giriş çizimleri ve yeni çizim parçaları ---------- */
.giris-cizim .cizim-giris svg{max-height:min(46svh,420px);margin-inline:auto}
.giris-cizim .cizim-katman svg{max-height:min(54svh,460px);margin-inline:auto}
.giris-cizim .cizim-sistem svg{max-height:min(62svh,560px)}
.giris-cizim .cizim-akis{max-width:600px}
.giris-cizim .alan-tel svg{max-height:min(44svh,380px)}
@media (max-width:999px){
  .giris-cizim .cizim{max-width:520px}
  .giris-cizim svg,.giris-cizim .cizim-giris svg,.giris-cizim .cizim-katman svg,.giris-cizim .cizim-sistem svg,.giris-cizim .alan-tel svg{max-height:22svh;margin-inline:auto}
  .giris-cizim .cizim-kart svg{max-height:24svh}
  .giris-cizim .cizim-akis{grid-template-columns:minmax(0,1.9fr) 16px minmax(0,.7fr);max-width:400px}
  .giris-cizim .cizim-akis .alan-tel svg,.giris-cizim .cizim-akis .alan-sensor svg{max-height:14svh}
  .giris-cizim figcaption{margin-top:6px}
}
.alan-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
@media (max-width:999px){.alan-izgara{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}
.c-pano{fill:#173527;stroke:#5f8e74;stroke-width:2}
.c-mandal,.c-muhur{fill:var(--altin)}
.c-kutucuk{fill:none;stroke:var(--seri-2);stroke-width:2}
.c-tik{fill:none;stroke:var(--sinyal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.c-muhur + .c-tik{stroke:var(--murekkep)}
.c-satir{stroke:rgba(238,242,234,.4);stroke-width:4;stroke-linecap:round}
.c-olcu{fill:#16201c;stroke:#5c6f65;stroke-width:2}
.c-olcu-ekran{fill:#0e2219;stroke:#3d7056}
.c-olcu-yazi{fill:var(--sinyal);font:500 18px var(--f-mono)}
.c-olcu-dugme{fill:#1d2a25;stroke:#8fa79a;stroke-width:2}
.c-olcu-ibre{stroke:var(--altin);stroke-width:3;stroke-linecap:round}
.c-paket{fill:#173527;stroke:var(--altin);stroke-width:1.5}
.c-yuva{fill:#0e2219;stroke:#4b7d62;stroke-width:1.5}
.c-yuva-etkin{stroke:var(--sinyal)}
.c-donus{fill:none;stroke:var(--altin);stroke-width:2;stroke-dasharray:.04 .03}
.k-yol-silik{stroke:var(--bakir-koyu)}
.c-bina{fill:#12291e;stroke:#5f8e74;stroke-width:2}
.c-zemin{stroke:#5f8e74;stroke-width:2}
.c-makine{fill:#1d2a25;stroke:#8fa79a;stroke-width:2}
.c-makine-ic{fill:none;stroke:#8fa79a;stroke-width:3}
.c-konum{fill:var(--bakir)}
.c-konum-ic{fill:var(--zemin)}
.c-yerinde{fill:none;stroke:var(--sinyal);stroke-width:2;stroke-dasharray:.04 .03}
.k-kenar-cizgi{fill:none;stroke:#3c7a5a;stroke-width:2}
.k-kilif{fill:#16201c;stroke:#6f8579;stroke-width:1.5}
.k-kilif-ic{fill:#0d1311}
.k-kilif-cent{fill:#0f2a1e}
.k-parca,.k-gecis-g{transform-box:fill-box;transform-origin:50% 50%}
.t-vurgu{fill:var(--sinyal)}
/* Marka değişimi: sıra değişince vurgu rengi değişir (ad ve renk görünmezken değişir; görünürlük opacity ile geçer). */
[data-marka-sira="1"] .t-vurgu,[data-marka-sira="1"] .t-led{fill:var(--bakir-acik)}
[data-marka-sira="2"] .t-vurgu,[data-marka-sira="2"] .t-led{fill:#f2a99a}
[data-uygulama],.k-marka{transition:opacity .3s var(--e-yumusak)}

/* Süreç yolu: dolu çizgi ve sinyal noktası (betiksiz ve son adımda tam dolu). */
.surec-ray{position:absolute;left:4%;right:4%;top:50%;height:16px;margin-top:-8px;overflow:hidden;pointer-events:none}
.surec-dolu{position:absolute;inset:0}
.surec-dolu::before{content:"";position:absolute;left:0;right:6px;top:7px;height:2px;background:var(--bakir-acik)}
.surec-dolu::after{content:"";position:absolute;right:1px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--sinyal);box-shadow:0 0 10px var(--sinyal)}
.surec-nokta{z-index:1}
.surec-bag{margin-top:clamp(12px,2svh,22px)}

/* Ana sayfa: slaytları sol kenarda bağlayan tek bakır yol. Her slaytın parçası slayt görülünce dolar; sinyal noktası
   parçanın ucunda durur. Dar ekranda gizlidir (içeriği engellemesin). */
.yol-parca{position:absolute;top:0;bottom:0;left:calc(var(--kenar-sol) / 2 - 7px);width:14px;overflow:hidden;pointer-events:none}
.yol-parca::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:rgba(201,138,75,.22)}
.yol-iz{position:absolute;inset:0}
.yol-iz::before{content:"";position:absolute;left:6px;top:0;bottom:6px;width:2px;background:var(--bakir)}
.yol-iz::after{content:"";position:absolute;left:2px;bottom:1px;width:10px;height:10px;border-radius:50%;background:var(--sinyal);box-shadow:0 0 10px var(--sinyal)}
@media (max-width:899px){.yol-parca{display:none}}

/* Alan değiştirici sekme hâlindeyken paneller aynı yerde üst üste durur: çıkan panel solar, giren belirir; kart yerinde kalır. */
.alanlar.sekmeli .alan-paneller{display:grid}
.alanlar.sekmeli .alan-panel{grid-area:1/1}
.alan-panel.cikiyor{pointer-events:none}

/* Sürekli dönen hareket yalnız etkin slaytta oynar; ekran dışındaki ve etkin olmayan slaytta durur. */
/* !important: sahne kurallarındaki "animation" kısaltması oynatma durumunu yeniden "running" yapar; durdurma her zaman kazanır. */
.slayt:not(.etkin) [data-surekli],.slayt:not(.etkin) [data-surekli] *{animation-play-state:paused!important}

/* ---------- Hareket (yalnız betik varken ve "hareketi azalt" kapalıyken) ----------
   Slayt ilk kez görünür olunca "gorulmus" sınıfını alır; data-gir taşıyan öğeler sırayla (--i) belirir, başlık harfleri
   maskeden yukarı kayar. Geri dönünce yeniden kurulmaz. Geçilen slaytın içeriği hafif yukarı kayıp solar.
   Hareket yalnız transform, opacity ve stroke-dashoffset ile yapılır. */
@media (prefers-reduced-motion:no-preference){
  .js .slayt:not(.gorulmus) [data-gir]{opacity:0;transform:translateY(26px)}
  .js [data-gir]{transition:opacity .7s var(--e-cikis),transform .9s var(--e-cikis);transition-delay:calc(80ms + var(--i,0) * 85ms)}
  .js .slayt:not(.gorulmus) .harf{transform:translateY(112%)}
  .js .harf{transition:transform .95s var(--e-cikis);transition-delay:calc(120ms + var(--i,0) * 24ms)}

  /* 1. Açılış: kart kenarı çizilir, bakır yollar döşenir, geçiş delikleri belirir, parçalar oturur, LED yanar,
     serigrafi gelir (markanın adı istemci.js ile harf harf yazılır). Toplam ~2,4 sn. */
  .js [data-sahne="acilis"] .k-kenar-cizgi,.js [data-sahne="acilis"] .k-yol{stroke-dasharray:1}
  .js .slayt:not(.gorulmus) [data-sahne="acilis"] .k-kenar-cizgi,.js .slayt:not(.gorulmus) [data-sahne="acilis"] .k-yol{stroke-dashoffset:1}
  .js .slayt:not(.gorulmus) [data-sahne="acilis"] .k-kenar,.js .slayt:not(.gorulmus) [data-sahne="acilis"] .k-parca,
  .js .slayt:not(.gorulmus) [data-sahne="acilis"] .k-gecis-g,.js .slayt:not(.gorulmus) [data-sahne="acilis"] [data-adim="isik"],
  .js .slayt:not(.gorulmus) [data-sahne="acilis"] [data-adim="serigrafi"]{opacity:0}
  .js .gorulmus [data-sahne="acilis"] .k-kenar-cizgi{animation:ciz .7s var(--e-yumusak) both}
  .js .gorulmus [data-sahne="acilis"] .k-kenar,.js .gorulmus [data-sahne="acilis"] .k-halka,.js .gorulmus [data-sahne="acilis"] [data-adim="kenar"] .k-delik{animation:belir .6s .25s both}
  .js .gorulmus [data-sahne="acilis"] .k-yol{animation:ciz .55s var(--e-yumusak) both;animation-delay:calc(.45s + var(--y,0) * 65ms)}
  .js .gorulmus [data-sahne="acilis"] .k-gecis-g{animation:pop .35s var(--e-cikis) both;animation-delay:calc(.7s + var(--y,0) * 65ms)}
  .js .gorulmus [data-sahne="acilis"] .k-parca{animation:otur .5s var(--e-cikis) both;animation-delay:calc(1.05s + var(--p,0) * 85ms)}
  .js .gorulmus [data-sahne="acilis"] [data-adim="serigrafi"]{animation:belir .45s 1.6s both}
  .js .gorulmus [data-sahne="acilis"] [data-adim="isik"]{animation:belir .5s 1.8s both}
  .js .etkin.gorulmus [data-sahne="acilis"] .k-isik-hale{animation:nefes 2.8s 2.4s ease-in-out infinite}

  /* Geçilen slayt: içerik hafif yukarı kayıp solar (sıkı tutturmada; gevşek tutturmada okunurluk için kapalı). */
  .js .slayt-govde{transition:opacity .6s var(--e-yumusak),transform .7s var(--e-yumusak)}

  /* 3. Ana sayfanın tek yolu: slayt görülünce parçası dolar; adımlı slaytta adım ilerledikçe dolar. */
  .js .slayt:not(.gorulmus) .yol-iz{transform:translateY(-100%)}
  .js .yol-iz{transition:transform 1.3s var(--e-yumusak) .15s}
  .js .slayt-adimli.gorulmus:not(.duz) .yol-iz{transform:translateY(calc(((var(--adim,0) + 1) / var(--adim-sayisi) - 1) * 100%))}

  /* 6. Alan değiştirici: sensör, telefon ekranı ve metin çapraz solar, kısa kayar; kart yerinde kalır. */
  .js .alan-panel.giriyor .degisen{animation:alan-gir .45s var(--e-cikis) both}
  .js .alan-panel.cikiyor .degisen{animation:alan-cik .3s var(--e-yumusak) both}

  /* 7. Marka değişimi: ad ve vurgu, görünmezken değişir. */
  .js [data-marka-sahne].degisiyor [data-uygulama],.js [data-marka-sahne].degisiyor .k-marka{opacity:0}

  /* 2. Kararı kart verir: internet kesilince bağlantı kısa bir solma ile kesik çizgiye döner. */
  .js .kesik .c-internet{animation:belir .5s var(--e-yumusak) both}
  .js .kesik .c-sinyal-g{opacity:0}

  @keyframes ciz{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes belir{from{opacity:0}to{opacity:1}}
  @keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
  @keyframes otur{from{opacity:0;transform:translateY(-10px) scale(1.06)}to{opacity:1;transform:none}}
  @keyframes nefes{0%,100%{opacity:.26}50%{opacity:.62}}
  @keyframes alan-gir{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
  @keyframes alan-cik{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-10px)}}
  @keyframes sinyal-yuru{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(var(--boy))}}
  @keyframes don{to{transform:rotate(360deg)}}
}
@media (prefers-reduced-motion:no-preference) and (min-height:561px){
  .js:not(.serbest) .slayt.gecmis .slayt-govde{opacity:.28;transform:translateY(-28px)}
}

/* Adımlı slaytın adım düzeni. Etkin tutturma noktasının sırası sahneye a0..aN olarak yazılır (geçilen adımlar birikir);
   sahne ayrıca data-adim (o anki adım) ve --adim taşır. Adım metni yandan kayarak gelir: henüz gelinmemiş adım sağda,
   geçilmiş adım solda bekler. */
@media (prefers-reduced-motion:no-preference) and (min-height:561px){
  .js .slayt-adimli:not(.duz){height:calc(var(--adim-sayisi) * var(--slayt-yuk));scroll-snap-align:none}
  .js .slayt-adimli:not(.duz) .sahne{position:sticky;top:var(--ust-y);height:var(--slayt-yuk);min-height:0;overflow:hidden}
  .js .slayt-adimli:not(.duz) .tutturma{top:calc(var(--sira) * var(--slayt-yuk));height:var(--slayt-yuk);scroll-snap-align:start;scroll-snap-stop:always}
  .js .slayt-adimli:not(.duz) .adim-listesi{grid-template-columns:minmax(0,1fr)}
  .js .slayt-adimli:not(.duz) .adim-ogesi{grid-area:1/1;transition:opacity .45s var(--e-cikis),transform .6s var(--e-cikis),visibility 0s}
  .js .slayt-adimli:not(.duz) .sahne:not(.a0) .adim-ogesi[data-adim-no="0"],.js .slayt-adimli:not(.duz) .sahne:not(.a1) .adim-ogesi[data-adim-no="1"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a2) .adim-ogesi[data-adim-no="2"],.js .slayt-adimli:not(.duz) .sahne:not(.a3) .adim-ogesi[data-adim-no="3"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a4) .adim-ogesi[data-adim-no="4"],.js .slayt-adimli:not(.duz) .sahne:not(.a5) .adim-ogesi[data-adim-no="5"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a6) .adim-ogesi[data-adim-no="6"]{opacity:0;transform:translateX(40px);visibility:hidden;pointer-events:none;transition:opacity .3s,transform .3s,visibility 0s .3s}
  .js .slayt-adimli:not(.duz) .sahne.a1 .adim-ogesi[data-adim-no="0"],.js .slayt-adimli:not(.duz) .sahne.a2 .adim-ogesi[data-adim-no="1"],
  .js .slayt-adimli:not(.duz) .sahne.a3 .adim-ogesi[data-adim-no="2"],.js .slayt-adimli:not(.duz) .sahne.a4 .adim-ogesi[data-adim-no="3"],
  .js .slayt-adimli:not(.duz) .sahne.a5 .adim-ogesi[data-adim-no="4"],.js .slayt-adimli:not(.duz) .sahne.a6 .adim-ogesi[data-adim-no="5"]{opacity:0;transform:translateX(-40px);visibility:hidden;pointer-events:none;transition:opacity .3s,transform .3s,visibility 0s .3s}

  /* 4. Dört katman: katman alttan üste oturur, simgesi kendini çizer; etkin katman öne çıkar, öncekiler solar. */
  .js .slayt-adimli:not(.duz) .katman{transition:opacity .6s var(--e-cikis),transform .8s var(--e-cikis)}
  .js .slayt-adimli:not(.duz) .sahne:not(.a0) .katman-kart,.js .slayt-adimli:not(.duz) .sahne:not(.a1) .katman-yazilim,
  .js .slayt-adimli:not(.duz) .sahne:not(.a2) .katman-uygulama,.js .slayt-adimli:not(.duz) .sahne:not(.a3) .katman-sunucu{opacity:0;transform:translateY(-44px)}
  .js .slayt-adimli:not(.duz) .sahne[data-adim="1"] .katman-kart,
  .js .slayt-adimli:not(.duz) .sahne[data-adim="2"] .katman-kart,.js .slayt-adimli:not(.duz) .sahne[data-adim="2"] .katman-yazilim,
  .js .slayt-adimli:not(.duz) .sahne[data-adim="3"] .katman-kart,.js .slayt-adimli:not(.duz) .sahne[data-adim="3"] .katman-yazilim,
  .js .slayt-adimli:not(.duz) .sahne[data-adim="3"] .katman-uygulama{opacity:.42}
  .js .slayt-adimli:not(.duz) .sahne[data-adim="0"] .katman-kart,.js .slayt-adimli:not(.duz) .sahne[data-adim="1"] .katman-yazilim,
  .js .slayt-adimli:not(.duz) .sahne[data-adim="2"] .katman-uygulama,.js .slayt-adimli:not(.duz) .sahne[data-adim="3"] .katman-sunucu{transform:translateY(-8px)}
  .js .slayt-adimli:not(.duz) .sahne[data-adim="0"] .katman-kart .c-yuz,.js .slayt-adimli:not(.duz) .sahne[data-adim="1"] .katman-yazilim .c-yuz,
  .js .slayt-adimli:not(.duz) .sahne[data-adim="2"] .katman-uygulama .c-yuz,.js .slayt-adimli:not(.duz) .sahne[data-adim="3"] .katman-sunucu .c-yuz{stroke:var(--sinyal);stroke-width:2}
  .js .slayt-adimli:not(.duz) .c-ayrinti{stroke-dasharray:1;transition:stroke-dashoffset .9s var(--e-yumusak) .3s}
  .js .slayt-adimli:not(.duz) .sahne:not(.a0) .katman-kart .c-ayrinti,.js .slayt-adimli:not(.duz) .sahne:not(.a1) .katman-yazilim .c-ayrinti,
  .js .slayt-adimli:not(.duz) .sahne:not(.a2) .katman-uygulama .c-ayrinti,.js .slayt-adimli:not(.duz) .sahne:not(.a3) .katman-sunucu .c-ayrinti{stroke-dashoffset:1}

  /* 5. Süreç: sinyal yolun üstünde ilerler (yalnız transform), noktaya gelince adım yanar. */
  .js .slayt-adimli:not(.duz) .surec-dolu{transform:translateX(calc((var(--adim,0) / 6 - 1) * 100%));transition:transform .75s var(--e-yumusak)}
  .js .slayt-adimli:not(.duz) .sahne:not(.a1) .surec-nokta[data-adim-no="1"],.js .slayt-adimli:not(.duz) .sahne:not(.a2) .surec-nokta[data-adim-no="2"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a3) .surec-nokta[data-adim-no="3"],.js .slayt-adimli:not(.duz) .sahne:not(.a4) .surec-nokta[data-adim-no="4"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a5) .surec-nokta[data-adim-no="5"],.js .slayt-adimli:not(.duz) .sahne:not(.a6) .surec-nokta[data-adim-no="6"]{background:var(--yuzey-2);color:var(--soluk)}
  .js .slayt-adimli:not(.duz) .sahne[data-adim="0"] .surec-nokta[data-adim-no="0"],.js .slayt-adimli:not(.duz) .sahne[data-adim="1"] .surec-nokta[data-adim-no="1"],
  .js .slayt-adimli:not(.duz) .sahne[data-adim="2"] .surec-nokta[data-adim-no="2"],.js .slayt-adimli:not(.duz) .sahne[data-adim="3"] .surec-nokta[data-adim-no="3"],
  .js .slayt-adimli:not(.duz) .sahne[data-adim="4"] .surec-nokta[data-adim-no="4"],.js .slayt-adimli:not(.duz) .sahne[data-adim="5"] .surec-nokta[data-adim-no="5"],
  .js .slayt-adimli:not(.duz) .sahne[data-adim="6"] .surec-nokta[data-adim-no="6"]{box-shadow:0 0 0 3px var(--zemin),0 0 0 5px var(--sinyal)}

  /* 2. Kararı kart verir: adım geçilince düğüm ve bağlantı yanar; o adımın bağlantısında sinyal noktası yürür; kart
     yanınca yerel karar döngüsü döner (yalnız slayt etkinken); son adımda internet kesilir, döngü sürer. */
  .js .slayt-adimli:not(.duz) .sahne:not(.a0) [data-dugum="sensor"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a1) [data-dugum="kart"],.js .slayt-adimli:not(.duz) .sahne:not(.a1) [data-baglanti="kablo"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a1) [data-adim="yerel-karar"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a2) [data-dugum="sunucu"],.js .slayt-adimli:not(.duz) .sahne:not(.a2) [data-baglanti="internet"],
  .js .slayt-adimli:not(.duz) .sahne:not(.a3) [data-dugum="telefon"],.js .slayt-adimli:not(.duz) .sahne:not(.a3) [data-baglanti="uygulama"]{opacity:.16}
  .js .slayt-adimli:not(.duz) .sahne:not(.a4) [data-adim="kesinti"]{opacity:0}
  .js .slayt-adimli:not(.duz) .sahne.a4 [data-baglanti="uygulama"],.js .slayt-adimli:not(.duz) .sahne.a4 [data-dugum="sunucu"],
  .js .slayt-adimli:not(.duz) .sahne.a4 [data-dugum="telefon"]{opacity:.3}
  .js .slayt-adimli:not(.duz) .sahne[data-adim="0"] [data-dugum="sensor"] .c-kutu,.js .slayt-adimli:not(.duz) .sahne[data-adim="1"] [data-dugum="kart"] .k-kenar,
  .js .slayt-adimli:not(.duz) .sahne[data-adim="2"] [data-dugum="sunucu"] .c-raf,.js .slayt-adimli:not(.duz) .sahne[data-adim="3"] [data-dugum="telefon"] .t-govde,
  .js .slayt-adimli:not(.duz) .sahne[data-adim="4"] [data-dugum="kart"] .k-kenar{stroke:var(--sinyal);stroke-width:2.5}
  .js .slayt-adimli:not(.duz) .c-sinyal-g{opacity:0}
  .js .slayt-adimli:not(.duz) .sahne[data-adim="1"] [data-sinyal="kablo"],.js .slayt-adimli:not(.duz) .sahne[data-adim="2"] [data-sinyal="internet"],
  .js .slayt-adimli:not(.duz) .sahne[data-adim="3"] [data-sinyal="uygulama"]{animation:sinyal-yuru 1.4s var(--e-yumusak) infinite}
  .js .slayt-adimli:not(.duz) .sahne.a1 .c-dongu-sinyal{animation:don 2.6s linear infinite}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.ust,.noktalar,.sayac,.ilerleme{display:none}.slayt{min-height:0;break-inside:avoid}}