/* =====================================================================
   maliofis.tr · Ana sayfa (index.html) · yalnız bu sayfanın bölümleri
   ortak/scrollcraft.css ve ortak/ortak.css'ten SONRA yüklenir. Satır içi <style> yok; sınıflar sayfaya özgü önekli:
     ah-  açılış sahnesi (katmanlı hero)     ag   uygulamalara giriş (+ ortak.js'in .uyg-kutu, .uk-* kutuları)
     ki / eb-  indirmeler ve e-imza kurulumu  hz-  sunduklarımız listesi     sr-  "neden tek muhatap" sahnesi
     raf-  yazılım rafı                       df-  daha fazlası kartları     kp-  kapanış
   Sahne bölümleri motorun yazdığı --sc-p (0..1) ile çizilir; hareket azaltılınca ortak/baslat.js bölümlere
   .hareketsiz ekler ve son kompozisyon durağan gösterilir.
   ===================================================================== */

main [id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ============================================================ 1 · SAHNE (katmanlı hero) */
.ah { position: relative; overflow-x: clip; background: var(--navy); color: var(--krem); }
.ah-sahne { height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; --p: var(--sc-p, 0); }
.ah-duz { position: absolute; will-change: transform, opacity; }
.ah-arka { inset: -10%; z-index: 0;
  background:
    radial-gradient(60% 50% at 70% 40%, #1A3A6B 0%, transparent 70%),
    radial-gradient(40% 40% at 15% 85%, rgba(34,211,238,.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 56px);
  transform: translateY(calc(var(--p) * -4vh)) scale(calc(1 + var(--p) * .04)); }
.ah-ekran { z-index: 1; margin: 0; right: -8vw; top: 18vh; width: min(60vw, 940px);
  border-radius: 14px; overflow: hidden; box-shadow: 0 50px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  transform: perspective(1400px) rotateY(-14deg) rotateX(4deg) translateY(calc(var(--p) * -10vh)) scale(calc(1 - var(--p) * .08));
  opacity: calc(1 - var(--p) * .35); filter: saturate(.9) brightness(.8); }
.ah-ekran img { width: 100%; height: auto; }
.ah-metin { position: absolute; z-index: 2; left: clamp(16px, 6vw, 96px); top: 19vh; max-width: 44rem;
  transform: translateY(calc(var(--p) * -22vh)); opacity: clamp(0, calc(1.6 - var(--p) * 3), 1); }
.ah .ust-baslik { color: var(--cyan-light); }
.ah h1 { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; text-shadow: 0 4px 40px rgba(11,29,58,.85); }
.ah h1 em { font-style: italic; color: var(--gold); }
.ah-govde { margin-top: 20px; max-width: 40ch; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.6; color: var(--krem-soft); text-shadow: 0 2px 20px rgba(11,29,58,.9); }
.ah .dugmeler { margin-top: 28px; }

.ah-fatura { z-index: 3; left: 44vw; bottom: -10vh; width: clamp(200px, 20vw, 300px); perspective: 1200px;
  transform: translate(calc(var(--p) * 6vw), calc(var(--p) * -52vh)) rotate(calc(-8deg + var(--p) * 8deg)); }
.ah-kagit { position: relative; aspect-ratio: 3 / 4; transform-style: preserve-3d;
  transform: rotateY(calc(clamp(0, (var(--p) - .28) * 4, 1) * 180deg)); }
.ah-yuz { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.ah-yuz--on { background: var(--kagit); color: #2A2A2A; background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(0,0,0,.05) 27px 28px); }
.ah-yuz--arka { transform: rotateY(180deg); background: #fff; color: var(--navy); border-top: 6px solid var(--cyan-deep); }
.ah-kagit-ust { font-family: var(--font-brand); font-size: 1.7rem; letter-spacing: .06em; line-height: 1.1; }
.ah-kagit-ust--e { color: var(--cyan-deep); }
.ah-cizgi { display: block; height: 8px; border-radius: 4px; background: rgba(0,0,0,.14); }
.ah-cizgi--kisa { width: 62%; }
.ah-toplam { margin-top: auto; font: 600 .8rem/1 var(--font-mono); }
.ah-not { font-size: .72rem; color: #475569; }
.ah-gib { align-self: flex-start; background: #D1FAE5; color: #047857; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; }

.ah-muhur { z-index: 4; left: 64vw; top: 46vh; --m: clamp(0, (var(--p) - .58) * 6, 1);
  transform: translate(-50%, -50%) scale(calc(2.4 - var(--m) * 1.4)) rotate(-12deg); opacity: var(--m); }
.ah-muhur-ic { display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; width: 150px; height: 150px; border-radius: 50%; border: 5px double var(--gold);
  color: var(--gold); font: 800 1.05rem/1.1 var(--font-ui); letter-spacing: .12em; background: rgba(11,29,58,.9); }
.ah-muhur-ic small { display: block; font-size: .6rem; letter-spacing: .08em; font-weight: 600; }

.ah-ikinci { position: absolute; z-index: 5; margin: 0; text-shadow: 0 4px 30px rgba(11,29,58,.9); left: clamp(16px, 6vw, 96px); top: 34vh; font-family: var(--font-brand); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.05; color: var(--krem);
  opacity: clamp(0, calc((var(--p) - .66) * 6), 1); transform: translateY(calc((1 - clamp(0, (var(--p) - .66) * 6, 1)) * 30px)); }
.ah-on { z-index: 6; inset: auto -10% -20% -10%; height: 40vh; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(11,29,58,.95), transparent 70%); transform: translateY(calc(var(--p) * -12vh)); }

/* ============================================================ 2 · UYGULAMALARA GİRİŞ (lacivert ada) */
.ag { padding-top: clamp(56px, 7vw, 96px); }
.ag .bolum-baslik { margin-bottom: 36px; }
.uyg-izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.uyg-izgara > .uyg-kutu { grid-column: span 3; }
.uyg-izgara > .uyg-kutu:nth-child(n+5) { grid-column: span 4; }
.uyg-kutu { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 20px; border-radius: var(--r); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); box-shadow: var(--sc-edge, inset 0 1px 0 rgba(255,255,255,.06)); transition: transform .25s var(--kolay), border-color .2s ease, background-color .2s ease; }
.uyg-kutu[data-urun-renk] { --renk: var(--u); }
.uyg-kutu::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--renk, var(--cyan-light)); opacity: .9; }
.uyg-kutu:hover { transform: translateY(-3px); background: rgba(255,255,255,.06); border-color: color-mix(in srgb, var(--renk, var(--cyan-light)) 50%, transparent); }
.uyg-kutu.son { border-color: color-mix(in srgb, var(--renk, var(--cyan-light)) 60%, transparent); }
.uk-ust { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.uk-ikon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--urun, var(--navy-3)); box-shadow: 0 10px 22px -10px var(--urun, #000); }
.uk-ikon .ik { width: 22px; height: 22px; }
.uyg-kutu > b { font-size: 1.08rem; line-height: 1.25; color: var(--krem); }
.uk-ana { color: inherit; }
.uk-ana::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.uk-ana:focus-visible { outline: none; }
.uk-ana:focus-visible::after { outline: 3px solid var(--cyan-light); outline-offset: -3px; }
.uk-ac { font-size: .86rem; color: var(--g600); line-height: 1.5; }
.uk-adres { font-family: var(--font-mono); font-size: .74rem; color: var(--g500); overflow-wrap: anywhere; }
.uk-alt { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.uk-kilavuz { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; font-size: .84rem; font-weight: 700; color: var(--g600); }
.uk-kilavuz:hover { color: var(--gold-light); }
.uk-kilavuz .ik { width: 15px; height: 15px; }
.uk-git { display: inline-flex; align-items: center; gap: 5px; font-size: .86rem; font-weight: 700; color: var(--gold-light); }
.uk-git .ik { width: 16px; height: 16px; transition: transform .2s var(--kolay); }
.uyg-kutu:hover .uk-git .ik { transform: translateX(3px); }
.uk-son { font-size: .72rem; font-weight: 800; padding: 4px 9px; border-radius: var(--r-hap); background: rgba(232,168,56,.16); color: var(--gold-light); white-space: nowrap; }
/* Durum yalnız sorun varken görünür (her şey yolundayken "Erişilebilir" gürültü olur) */
.ag .uyg-durum.acik, .ag .uyg-durum.bekliyor, .ag .uyg-durum.yerel { display: none; }
.vu-alt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.vu-alt a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-hap); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); font-size: .9rem; font-weight: 700; color: var(--krem); transition: border-color .15s, background-color .15s; }
.vu-alt a:hover { border-color: rgba(244,199,107,.6); background: rgba(255,255,255,.08); }
.vu-alt .ik { width: 17px; height: 17px; color: var(--gold-light); }
@media (max-width: 1080px) {
  .uyg-izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .uyg-izgara > .uyg-kutu { grid-column: span 2; }
  .uyg-izgara > .uyg-kutu:nth-child(n+4) { grid-column: span 3; }
}

/* ============================================================ 3 · İNDİRMELER VE E-İMZA KURULUMU */
.indir-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.indir-satiri { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-k); transition: border-color .15s, transform .2s var(--kolay), box-shadow .2s ease; }
.indir-satiri:hover { border-color: color-mix(in srgb, var(--vurgu) 45%, transparent); transform: translateY(-2px); box-shadow: var(--golge); }
.indir-satiri b { display: block; font-size: .98rem; line-height: 1.3; }
.indir-satiri small { display: block; font-size: .8rem; color: var(--g500); }
.indir-satiri > .ik { margin-left: auto; width: 18px; height: 18px; color: var(--vurgu); }
.kl-ik { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--u, var(--vurgu)); background: var(--u-zemin, var(--cyan-50)); flex: none; }
.kl-ik .ik { width: 21px; height: 21px; }
.ki { overflow-x: clip; }
.eimza-blok { margin-top: 72px; padding-top: 64px; border-top: 1px solid var(--cizgi); }
.eb-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.eb-metin { min-width: 0; }
.eimza-bas { margin-bottom: 24px; }
.eimza-bas h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.08; }
.eimza-bas p { margin-top: 14px; color: var(--g700); line-height: 1.72; max-width: 62ch; }
.eimza-asistan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: center; padding: 22px 24px; border-radius: 20px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.eimza-asistan b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1.12rem; color: var(--metin); }
.eimza-asistan small { display: block; margin-top: 4px; font-size: .88rem; color: var(--g600); }
.eimza-asistan .ea-dugmeler { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.eimza-alt { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.eimza-hat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-k); transition: border-color .15s, transform .2s var(--kolay); }
.eimza-hat:hover { border-color: color-mix(in srgb, var(--vurgu) 45%, transparent); transform: translateY(-2px); }
.eimza-hat b { display: block; font-size: 1rem; line-height: 1.3; color: var(--metin); }
.eimza-hat b .etiket { margin-left: 6px; vertical-align: 1px; }
.eimza-hat small { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.45; color: var(--g600); }
.eimza-hat > .ik { margin-left: auto; width: 18px; height: 18px; color: var(--vurgu); }
/* Asistan ekranı: arka düzlem, metinden farklı hızda (data-sc-parallax); eğim iç çerçevede */
.eb-gorsel { margin: 0; position: relative; min-width: 0; }
.eb-cerceve { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -36px rgba(11,29,58,.55), 0 0 0 1px var(--cizgi); transform: perspective(1500px) rotateY(-9deg) rotateX(2deg); transform-origin: 20% 50%; }
.eb-cerceve img { width: 100%; height: auto; }
@media (max-width: 1080px) {
  .indir-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eb-izgara { grid-template-columns: minmax(0, 1fr); }
  .eb-gorsel { max-width: 640px; }
}

/* ============================================================ 4 · SUNDUKLARIMIZ (prototipin saç çizgili listesi) */
.hz-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--g300); border: 1px solid var(--g300); border-radius: var(--r); overflow: hidden; }
.hz-liste > li { display: flex; }
.hz { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 22px; min-height: 176px; background: var(--yuzey); transition: background-color .2s ease; }
.hz:hover { background: #F2FBFD; }
.hz:focus-visible { outline-offset: -4px; }
.hz-ik { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--cyan-light); background: var(--navy); margin-bottom: 4px; }
.hz-ik .ik { width: 20px; height: 20px; }
.hz--altin .hz-ik { background: var(--gold); color: var(--navy); }
.hz h3 { font-size: 1.6rem; line-height: 1.1; }
.hz-ac { color: var(--g600); font-size: .95rem; line-height: 1.5; }
.hz .urun-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: .86rem; font-weight: 700; color: var(--g700); }
.hz .urun-fiyat b { font-size: 1.06rem; font-weight: 800; color: var(--metin); }
.hz-git { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; color: var(--vurgu); }
.hz-git .ik { width: 16px; height: 16px; transition: transform .2s var(--kolay); }
.hz:hover .hz-git .ik { transform: translateX(3px); }
.urun-fiyatlar-notu { margin-top: 22px; }
@media (max-width: 1080px) { .hz-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hz-liste > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .hz:hover { background: var(--g100); } }
:root[data-tema="koyu"] .hz:hover { background: var(--g100); }

/* ============================================================ 5 · NEDEN TEK MUHATAP (sabit sahne, satırlar sırayla) */
.sr { overflow-x: clip; background: var(--navy); color: var(--krem); }
.sr-sahne { height: 100vh; height: 100svh; display: grid; place-items: center; background: radial-gradient(50% 50% at 50% 50%, var(--navy-2), var(--navy)); }
.sr-satir { grid-area: 1 / 1; margin: 0; padding: 0 24px; max-width: 22ch; text-align: center; font-family: var(--font-brand); font-size: clamp(2rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.sr-donus { color: var(--gold); }
.sr-donus span { display: block; margin-top: 18px; font: 500 clamp(1rem, .9rem + .4vw, 1.25rem)/1.5 var(--font-ui); letter-spacing: 0; color: var(--krem-soft); }

/* ============================================================ 6 · YAZILIM RAFI (yatay ray) */
.raf { background: var(--navy-4); color: var(--krem); }
.raf-sahne { height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(40% 50% at 15% 30%, rgba(26,58,107,.6), transparent 70%), var(--navy-4); }
.raf-ray { display: flex; gap: 32px; padding: 0 clamp(16px, 6vw, 96px); align-items: center; }
.raf-bas { flex: 0 0 min(420px, 80vw); }
.raf-bas h2 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.04; }
.raf-bas h2 em { font-style: italic; color: var(--gold); }
.raf-bas p { margin: 16px 0 26px; color: var(--krem-soft); font-size: 1.06rem; line-height: 1.6; max-width: 34ch; }
.raf-kart { flex: 0 0 min(540px, 78vw); display: block; color: var(--krem); border-radius: var(--r); }
.raf-kart:focus-visible { outline-color: var(--cyan-light); outline-offset: 6px; }
.raf-resim { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.raf-resim img { width: 100%; height: auto; }
.raf-kart h3 { font-size: 1.7rem; margin: 18px 0 4px; transition: color .2s ease; }
.raf-kart:hover h3 { color: var(--gold-light); }
.raf-kart p { margin: 0; color: var(--krem-soft); }

/* ============================================================ 7 · DAHA FAZLASI (asimetrik: geniş lacivert kart + iki kart) */
.df-izgara { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; }
.df-kart { flex-direction: row; align-items: flex-start; gap: 18px; padding: 26px; }
.df-kart h3 { font-size: 1.45rem; margin: 0 0 6px; }
.df-metin { display: block; min-width: 0; }
.df-metin > span { display: block; font-size: .95rem; color: var(--g600); line-height: 1.6; }
.df-kart .kart-baglanti { margin-left: auto; align-self: flex-end; white-space: nowrap; }
.df-kart--genis { grid-row: 1 / span 2; flex-direction: column; gap: 16px; padding: 34px; color: var(--krem); border-color: transparent;
  background: radial-gradient(60% 70% at 100% 0%, rgba(232,168,56,.22), transparent 65%), linear-gradient(155deg, var(--navy-3), var(--navy)); }
.df-kart--genis h3 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.05; }
.df-kart--genis .df-metin > span { color: var(--krem-soft); font-size: 1.04rem; }
.df-kart--genis .kart-baglanti { margin-left: 0; margin-top: auto; align-self: flex-start; color: var(--gold-light); }
.df-kart--genis .kart-ikon { width: 56px; height: 56px; }

/* ============================================================ SİHİRBAZ ve REHBERLER (Aşama 3; şimdi gizli) */
.sihirbaz { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.sihirbaz ul.tikli { margin-top: 26px; }
.sh-form { padding: 26px; gap: 18px; }
.sh-soru { display: grid; gap: 8px; }
.sh-soru > span { font-size: .84rem; font-weight: 700; color: var(--g700); }
.sh-soru > span i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--gold-light); font-size: .72rem; margin-right: 8px; }
.sh-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sh-sonuc { margin-top: 4px; border-radius: 16px; background: linear-gradient(150deg, var(--navy), var(--navy-2)); color: var(--krem); padding: 20px; }
.sh-sonuc h4 { font-family: var(--font-ui); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-light); font-weight: 800; margin-bottom: 12px; }
.sh-satirlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-weight: 700; font-size: .9rem; }
.sh-satir span { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.sh-satir .z { background: rgba(239,68,68,.2); color: #FCA5A5; }
.sh-satir .i { background: rgba(148,163,184,.2); color: #CBD5E1; }
.sh-sonuc p { margin-top: 12px; font-size: .78rem; color: var(--krem-soft); }
.rehber { padding: 0; gap: 0; }
.rehber-gorsel { height: 150px; display: grid; place-items: center; position: relative; overflow: hidden; }
.rehber-gorsel::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 26px 26px; }
.rehber-gorsel .ik { width: 56px; height: 56px; color: #fff; position: relative; z-index: 1; opacity: .95; }
.rehber-ic { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rehber h3 { font-size: 1.3rem; line-height: 1.25; }
.rehber .meta { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; font-size: .82rem; color: var(--g500); }

/* ============================================================ 8 · SSS */
.sss-duzen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.sss-duzen .bolum-baslik h2 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); }
.sss-iletisim { margin-top: 28px; display: grid; gap: 12px; }
.sss-iletisim a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--yuzey); box-shadow: var(--golge-k); font-weight: 700; transition: border-color .15s, transform .2s var(--kolay); }
.sss-iletisim a:hover { border-color: color-mix(in srgb, var(--vurgu) 45%, transparent); transform: translateY(-2px); }
.sss-iletisim a small { display: block; font-size: .72rem; font-weight: 700; color: var(--g500); letter-spacing: .08em; text-transform: uppercase; }
.sss-iletisim .kart-ikon { width: 40px; height: 40px; border-radius: 50%; }
.sss-iletisim .kart-ikon .ik { width: 20px; height: 20px; }

/* ============================================================ 9 · KAPANIŞ (sayfanın son bölümü) */
.kp { overflow-x: clip; background: var(--navy); color: var(--krem); }
.kp-sahne { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(40% 50% at calc(var(--sc-mx, .5) * 100%) calc(var(--sc-my, .5) * 100%), rgba(232,168,56,.14), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 56px),
    var(--navy); }
.kp-ic { width: min(920px, calc(100% - 32px)); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.kp-ic h2 { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.8rem); line-height: 1.02; letter-spacing: -.02em; }
.kp-ic h2 em { font-style: italic; color: var(--gold); }
.kp-ic p { margin: 20px auto 0; max-width: 46ch; color: var(--krem-soft); font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem); line-height: 1.65; }
.kp-ic .dugmeler { justify-content: center; margin-top: 34px; }

/* ============================================================ Orta genişlik */
@media (max-width: 1080px) {
  .sihirbaz, .sss-duzen { grid-template-columns: minmax(0, 1fr); }
}

/* 1366 gibi dizüstü genişliklerinde başlık uygulama ekranının üstüne binmesin */
@media (min-width: 861px) and (max-width: 1500px) {
  .ah h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
  .ah-ekran { right: -18vw; }
}

/* ============================================================ Telefon: ayrı kompozisyon */
@media (max-width: 860px) {
  /* Sahne: metin üstte; uygulama ekranı altta, fatura soldan yükselir, mühür üstüne basılır */
  .ah-metin { top: 11vh; right: 16px; }
  .ah h1 { font-size: clamp(2.5rem, 1.5rem + 4.6vw, 3.4rem); line-height: 1.04; }
  .ah-govde { font-size: 1rem; margin-top: 14px; }
  .ah .dugmeler { margin-top: 22px; }
  .ah .dugmeler .btn-cizgi-acik { display: none; }   /* telefon: tek birincil eylem; arama düğmesi menüde ve kapanışta */
  .ah-ekran { right: -34vw; top: auto; bottom: -4vh; width: 118vw; transform: perspective(900px) rotateY(-10deg) translateY(calc(var(--p) * -8vh)); opacity: calc(.7 - var(--p) * .3); }
  .ah-fatura { left: 16px; bottom: -8vh; width: 42vw; transform: translate(calc(var(--p) * 20vw), calc(var(--p) * -46vh)) rotate(calc(-6deg + var(--p) * 6deg)); }
  .ah-muhur { left: 56vw; top: 57vh; }
  .ah-muhur-ic { width: 112px; height: 112px; font-size: .82rem; border-width: 4px; }
  .ah-ikinci { top: auto; bottom: 9vh; }
  .ah-kagit-ust { font-size: 1.12rem; }
  .ah-yuz { padding: 14px 12px; gap: 7px; }
  .ah-cizgi { height: 6px; }
  .ah-toplam { font-size: .62rem; }
  .ah-not { font-size: .6rem; }
  .ah-gib { font-size: .62rem; padding: 3px 8px; }

  .hz-liste { grid-template-columns: minmax(0, 1fr); }
  .hz-liste > li:last-child:nth-child(odd) { grid-column: auto; }
  .hz { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; column-gap: 14px; row-gap: 2px; align-items: center; min-height: 0; padding: 14px 16px; }
  .hz-ik { grid-row: 1 / span 3; margin: 0; align-self: start; }
  .hz h3 { grid-column: 2; font-size: 1.3rem; }
  .hz-ac, .hz .urun-fiyat { grid-column: 2; font-size: .88rem; }
  .hz-git { grid-column: 3; grid-row: 1 / span 3; margin: 0; padding: 0; font-size: 0; gap: 0; }
  .hz-git .ik { width: 18px; height: 18px; }

  .df-izgara { grid-template-columns: minmax(0, 1fr); }
  .df-kart--genis { grid-row: auto; padding: 26px 22px; }
  .df-kart { padding: 20px; }
  .df-kart:not(.df-kart--genis) .kart-baglanti { display: none; }

  .sr-satir { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); }
  .raf-bas p { margin-bottom: 20px; }
  .raf-kart h3 { font-size: 1.4rem; margin-top: 14px; }
}
@media (max-width: 680px) {
  .uyg-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .uyg-izgara > .uyg-kutu, .uyg-izgara > .uyg-kutu:nth-child(n+4) { grid-column: auto; }
  .uyg-izgara > .uyg-kutu:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .uyg-izgara > .uyg-kutu:last-child:nth-child(odd) .uk-alt { justify-content: flex-start; gap: 28px; }
  .uyg-kutu { padding: 14px; gap: 4px; }
  .uyg-kutu .uk-ac, .uyg-kutu .uk-adres { display: none; }
  .uk-ust { margin-bottom: 4px; }
  .uk-ikon { width: 38px; height: 38px; border-radius: 11px; }
  .uk-ikon .ik { width: 19px; height: 19px; }
  .uyg-kutu > b { font-size: 1rem; }
  .uk-alt { padding-top: 10px; }
  .uk-git { font-size: .82rem; }
  .vu-alt a { font-size: .84rem; padding: 0 12px; }
  .sh-iki, .sh-satirlar { grid-template-columns: 1fr; }
  .eimza-asistan { padding: 20px; }
  .eimza-asistan .ea-dugmeler .btn { flex: 1 1 100%; }
}
@media (max-width: 620px) {
  /* Windows kurulumları telefonda işe yaramaz: indirme ızgarası gizli, yalnız e-imza kurulumu kalır */
  #kilavuzlar > .kap > .bolum-baslik-satir, .indir-izgara { display: none; }
  .eimza-blok { margin-top: 0; padding-top: 0; border-top: 0; }
  body[data-sayfa="anasayfa"] .ust-serit { display: none; }   /* telefon ve durum bilgisi sayfada zaten var */
  .vu-alt .vu-masaustu { display: none; }
  .eb-gorsel { margin-right: -24vw; }
}

/* ============================================================ Hareket azaltma: son kompozisyon durağan, fazladan kaydırma yok
   ortak/baslat.js sahneleri akışa çevirir ve .hareketsiz ekler. Motor yoksa (html:not(.sc-ready)) da aynı düzen geçerlidir. */
@media (prefers-reduced-motion: reduce) {
  .ah-arka, .ah-ekran, .ah-metin, .ah-on { transform: none; }
  .ah-ekran { opacity: .9; transform: perspective(1400px) rotateY(-14deg) rotateX(4deg); }
  .ah-metin { opacity: 1; }
  .ah-fatura { transform: translate(14vw, -40vh); }
  .ah-kagit { transform: rotateY(180deg); }
  .ah-muhur { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg); left: 70vw; top: 52vh; }
  .ah-ikinci { display: none; }
  .ah-duz, .ah-metin { will-change: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .ah-ekran { opacity: .6; transform: perspective(900px) rotateY(-10deg); }
  .ah-fatura { transform: translate(20vw, -14vh); }
  .ah-muhur { left: 64vw; top: 80vh; }
}
.sr.hareketsiz .sr-sahne, html:not(.sc-ready) .sr-sahne { height: auto; padding: clamp(80px, 12vh, 140px) 0; gap: 26px; }
.sr.hareketsiz .sr-satir, html:not(.sc-ready) .sr-satir { grid-area: auto; opacity: 1 !important; transform: none !important; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); }
.raf.hareketsiz .raf-sahne, html:not(.sc-ready) .raf-sahne { height: auto; padding: clamp(72px, 10vh, 120px) 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; align-items: flex-start; }
.raf.hareketsiz .raf-kart, html:not(.sc-ready) .raf-kart { scroll-snap-align: center; }
.kp.hareketsiz .kp-sahne { height: auto; min-height: 70vh; padding: clamp(80px, 12vh, 140px) 0; }