/* SatışDM tanıtım sitesi görünümü (tema.js ile birlikte). index.html'deki temel stillerin üstüne gelir.
   Koyu, ışıklı giriş bölümü; cam çerçeveli kartlar; hap biçimli bölüm etiketleri; renk geçişli vurgu kelimeler;
   pastel parlamalı kartlar; kıvrımlı bölüm geçişleri. Hareketlerin tamamı azaltılmış hareket tercihinde kapanır. */

:root {
  --navy: #0b0726;
  --navy-2: #150d3f;
  --sky: #6ab7ff;
  --pink: #ff7ac8;
  --egri: cubic-bezier(.2, .7, .2, 1);
  --firla: cubic-bezier(.2, .9, .3, 1.3);
  --golge: 0 1px 2px rgba(28, 11, 68, .04), 0 14px 36px -24px rgba(28, 11, 68, .3);
  --golge-kalk: 0 2px 4px rgba(28, 11, 68, .05), 0 28px 50px -24px rgba(60, 20, 140, .4);
}
body { background: var(--white); }
::selection { background: var(--violet); color: var(--white); }

/* ---------- Tipografi ---------- */
.display { font-weight: 600; letter-spacing: -0.03em; }
.h-lg { font-weight: 600; letter-spacing: -0.025em; }
.h-lg em { font-style: normal; background: linear-gradient(100deg, #4f7cff 0%, var(--violet) 55%, #c03fd6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Hap biçimli bölüm etiketi */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(122, 47, 240, .28); background: rgba(122, 47, 240, .06); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.eyebrow::before { display: none; }
.section-head .h-lg { margin-top: 18px; }

/* ---------- Üst menü: koyu girişin üstünde saydam, kaydırınca beyaz cam ---------- */
header.nav { background: transparent; border-bottom-color: transparent; transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, margin .25s ease; }
header.nav:not(.kaydi) { color: var(--white); }
header.nav:not(.kaydi) .logo, header.nav:not(.kaydi) .nav-links a, header.nav:not(.kaydi) .nav-giris { color: var(--white); }
header.nav:not(.kaydi) .nav-links a:hover, header.nav:not(.kaydi) .nav-giris:hover { color: #d9c4ff; }
header.nav:not(.kaydi) .nav-links a.aktif { color: #d9c4ff; }
header.nav:not(.kaydi) .nav-links a::after { background: #d9c4ff; }
header.nav:not(.kaydi) .logo-mark { background: var(--white); box-shadow: 0 0 24px rgba(255, 255, 255, .35); }
header.nav:not(.kaydi) .logo-mark span { background: var(--violet); }
header.nav:not(.kaydi) .btn-violet { background: var(--white); color: var(--night); box-shadow: 0 10px 30px -12px rgba(255, 255, 255, .5); }
header.nav:not(.kaydi) .btn-violet:hover { background: #efe8ff; }
header.nav:not(.kaydi) .btn-night { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); }
header.nav:not(.kaydi) .btn-night:hover { background: rgba(255, 255, 255, .16); }
header.nav:not(.kaydi) .menu-btn { border-color: rgba(255, 255, 255, .5); color: var(--white); }
/* Telefonda açılan menü beyaz zeminli kalır; yazıları koyu */
header.nav:not(.kaydi) .nav-links.open a { color: var(--ink); }
header.nav.kaydi { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--line); }
.ilerleme { background: linear-gradient(90deg, var(--sky), var(--violet), var(--pink)); }

/* ---------- Giriş bölümü: koyu, ışıklı, kemerli ---------- */
.hero { color: var(--white); padding: 44px 0 0; margin-top: -72px; padding-top: 116px; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, #1a0f4a 100%); }
.hero::before { width: 760px; height: 760px; top: -260px; left: 50%; margin-left: -380px; opacity: .8; background: radial-gradient(circle, rgba(122, 47, 240, .55) 0%, rgba(122, 47, 240, 0) 65%); animation: isik1 16s ease-in-out infinite alternate; }
.hero::after { width: 620px; height: 620px; top: 120px; right: -220px; opacity: .55; background: radial-gradient(circle, rgba(106, 183, 255, .5) 0%, rgba(106, 183, 255, 0) 65%); animation: isik2 20s ease-in-out infinite alternate; }
.hero .wrap { position: relative; }
/* Ufuk kemeri: başlığın arkasında parlayan dev yay */
.hero .wrap::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -1310px; width: 2400px; height: 2400px; margin-left: -1200px; border-radius: 50%; border: 1px solid rgba(199, 166, 255, .35); box-shadow: 0 0 80px rgba(122, 47, 240, .35), inset 0 0 160px rgba(122, 47, 240, .18); pointer-events: none; }
.hero .wrap::after { content: ""; position: absolute; z-index: -1; left: 50%; top: -1310px; width: 2400px; height: 2400px; margin-left: -1200px; border-radius: 50%; background: radial-gradient(circle at 50% 100%, rgba(106, 183, 255, .18), transparent 40%); -webkit-mask: radial-gradient(circle, transparent 1198px, #000 1199px); mask: radial-gradient(circle, transparent 1198px, #000 1199px); pointer-events: none; }
.hero-top .eyebrow { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #e9ddff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-top .eyebrow::before { content: "★"; display: inline; font-size: 12px; color: #ffd66b; }
.hero-top .display { color: var(--white); margin-top: 22px; }
.hero-top .display em, .hero-top .display em .kelime { background: linear-gradient(100deg, #d9c4ff 0%, #a9c8ff 50%, #8fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-top .lead { color: rgba(255, 255, 255, .74); }
.hero-maddeler { color: rgba(255, 255, 255, .88); }
.hero-maddeler li::before { color: #b58cff; }
.hero-cta .btn-violet.hero-olustur { background: var(--white); color: var(--night); box-shadow: 0 16px 40px -14px rgba(255, 255, 255, .45); }
.hero-cta .btn-violet.hero-olustur:hover { background: #efe8ff; box-shadow: 0 20px 44px -14px rgba(255, 255, 255, .55); }
.hero-cta .btn-violet.hemen-dene { background: var(--white); color: var(--night); }
.hero .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .32); color: var(--white); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: var(--white); }
/* Güven satırı tek hap olur */
.trust-line { width: fit-content; margin: 22px auto 0; gap: 14px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .82); font-size: 13.5px; }
.trust-line span::before { color: #7ee2b3; }

/* Başlıkta kelimeler sırayla belirir (tema.js .kelime'ye böler) */
.hr-js .hero-top > .display { animation: none; }
.hr-js .display .kelime { display: inline-block; animation: kelimeGel .7s var(--egri) both; animation-delay: calc(.12s + var(--k, 0) * 55ms); }
@keyframes kelimeGel { from { opacity: 0; transform: translateY(18px) rotate(2deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Temsilci oluşturucu: cam çerçeve içinde */
.builder { margin-top: 56px; padding: 8px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 60px 120px -40px rgba(0, 0, 0, .7), 0 0 120px -30px rgba(122, 47, 240, .6); overflow: visible; }
.builder > * { color: var(--ink); }
.builder-form { border-radius: 20px 0 0 20px; border-right: none; background: var(--white); }
.builder-preview { border-radius: 0 20px 20px 0; background: var(--lavender); }
.builder-form, .builder-preview { position: relative; }
.builder-form::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: var(--line); }
.hr-js .builder { animation: girisYukari 1s .45s var(--egri) both; }
.persona { box-shadow: var(--golge); }
.chat { box-shadow: var(--golge); }

/* Rakam şeridi: büyük sayılar sayarak dolar (tema.js data-sayac) */
.hero-rakamlar { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 56px auto 0; padding: 0 0 56px; text-align: center; }
.hero-rakamlar li { position: relative; display: grid; gap: 6px; padding: 8px 16px; }
.hero-rakamlar li + li::before { content: ""; position: absolute; left: -10px; top: 10%; height: 80%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .25), transparent); }
.hero-rakamlar b { font-size: clamp(40px, 5vw, 60px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(100deg, #d9c4ff 0%, #a9c8ff 50%, #8fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.hero-rakamlar li > span { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hero-rakamlar small { font-size: 14px; color: rgba(255, 255, 255, .8); }

/* Kanal şeridi koyu alanın devamı; altı kıvrımlı bitiş */
.kanal-bant { background: #1a0f4a; color: var(--white); padding: 8px 0 64px; border-radius: 0 0 48px 48px; position: relative; isolation: isolate; }
.kanal-bant::before { content: ""; position: absolute; inset: auto 0 0; height: 160px; z-index: -1; background: radial-gradient(60% 100% at 50% 100%, rgba(122, 47, 240, .35), transparent 70%); border-radius: inherit; }
.kanal-bant p { color: rgba(255, 255, 255, .55); }
.kanal { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: var(--white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kanal small { color: rgba(255, 255, 255, .55); }
.kanallar { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* ---------- Kartlar: gölge, kalkma, fareyi izleyen ışık (tema.js .isik) ---------- */
.step, .feature, .sektor, .plan, .ks-kart, .guven-oge, .persona, .hk-panel { box-shadow: var(--golge); }
.isik { position: relative; }
.isik::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(122, 47, 240, .14), transparent 60%); }
.isik:hover::after { opacity: 1; }
.guven-oge.isik::after, .ks-sonra.isik::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(199, 166, 255, .22), transparent 60%); }
@media (hover: hover) {
  .step:hover, .feature:hover, .plan:hover, .sektor:hover { box-shadow: var(--golge-kalk); }
}

/* ---------- Nasıl çalışır: hikâye sahnesi ve ok bağlantılı adımlar ---------- */
#nasil { padding-top: 96px; }
.hikaye { background: linear-gradient(135deg, #fdf2f8 0%, #eef2ff 48%, #ecfeff 100%); border: 1px solid rgba(122, 47, 240, .1); border-radius: 28px; padding: 36px 36px 28px; max-width: 960px; box-shadow: var(--golge); }
.steps { gap: 36px; }
.step { position: relative; padding: 0 28px 28px; overflow: visible; border-radius: 20px; }
.step::before { content: ""; display: block; height: 110px; margin: 0 -28px 22px; border-radius: 20px 20px 0 0; background: var(--adim-renk, linear-gradient(135deg, #fff2cc, #ffe4e6)); position: relative; }
.step:nth-child(1) { --adim-renk: linear-gradient(135deg, #fff1cc 0%, #ffe0ea 100%); }
.step:nth-child(2) { --adim-renk: linear-gradient(135deg, #dbeafe 0%, #e9ddff 100%); }
.step:nth-child(3) { --adim-renk: linear-gradient(135deg, #d9fbe8 0%, #e0f2fe 100%); }
.step .adim-ikon { position: absolute; top: 30px; left: 28px; width: 50px; height: 50px; border-radius: 14px; background: rgba(255, 255, 255, .85); color: var(--night); display: grid; place-items: center; font-size: 22px; box-shadow: 0 10px 24px -12px rgba(28, 11, 68, .35); }
.step .adim-no { position: absolute; top: 30px; right: 24px; font-size: 56px; font-weight: 700; letter-spacing: -0.04em; color: rgba(28, 11, 68, .08); line-height: 1; }
.step:not(:last-child)::after { content: "→"; position: absolute; right: -32px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); color: var(--violet); font-size: 14px; font-weight: 700; display: grid; place-items: center; z-index: 2; box-shadow: var(--golge); }
.step.hk-aktif::before { filter: saturate(1.3); }
.step.hk-aktif:not(:last-child)::after { background: var(--violet); color: var(--white); border-color: var(--violet); }

/* ---------- Gün boyu satış şeridi (tema.js) ---------- */
#gunboyu { padding-top: 0; }
.gun { max-width: 980px; margin: 0 auto; background: var(--night); color: var(--white); border-radius: 28px; padding: 28px 32px 32px; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 40px 80px -40px rgba(28, 11, 68, .6); }
.gun::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% auto; height: 120%; background: radial-gradient(ellipse at 50% 0%, rgba(122, 47, 240, .5), transparent 60%); }
.gun-ust { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.gun-saat { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 10px; }
.gun-saat i { font-style: normal; font-size: 22px; }
.gun-sayac { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: rgba(255, 255, 255, .7); }
.gun-sayac span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.gun-sayac b { color: var(--white); font-size: 16px; font-variant-numeric: tabular-nums; display: inline-block; }
.gun-sayac b.pat { animation: pat .45s var(--firla); }
@keyframes pat { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }
.gun-serit { position: relative; margin-top: 110px; padding-bottom: 28px; }
.gun-ray { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #1b1550 0%, #4a2f9a 20%, #ffd66b 45%, #ff9f6b 58%, #4a2f9a 80%, #1b1550 100%); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .25); }
.gun-imlec { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .2), 0 0 24px rgba(255, 255, 255, .8); }
.gun-imlec::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px; background: rgba(255, 255, 255, .35); }
.gun-saatler { display: flex; justify-content: space-between; margin-top: 30px; font-size: 12px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.gun-olaylar { list-style: none; position: absolute; left: 0; right: 0; top: -100px; height: 100px; pointer-events: none; }
.gun-olay { position: absolute; bottom: 14px; width: 190px; margin-left: -95px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .96); color: var(--ink); font-size: 12.5px; line-height: 1.35; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); animation: olayGel .45s var(--firla) both; }
.gun-olay::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); }
.gun-olay b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.gun-olay[data-tur="siparis"] b { color: var(--violet); }
.gun-olay[data-tur="randevu"] b { color: #0f766e; }
.gun-olay[data-tur="soru"] b { color: #1d4ed8; }
.gun-olay[data-tur="devir"] b { color: #b45309; }
.gun-olay.sol { margin-left: -24px; } .gun-olay.sol::after { left: 24px; }
.gun-olay.sag { margin-left: -166px; } .gun-olay.sag::after { left: auto; right: 18px; }
.gun-olay.soluk { opacity: .45; transform: scale(.96); transition: opacity .5s ease, transform .5s ease; }
@keyframes olayGel { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
.gun-not { margin-top: 18px; font-size: 13.5px; color: rgba(255, 255, 255, .6); text-align: center; }

/* ---------- Fark: SatışDM kartında tikler sırayla belirir ---------- */
.ks-kart { border-radius: 24px; }
.ks-sonra { background: linear-gradient(160deg, var(--navy) 0%, #2a1260 100%); position: relative; overflow: hidden; }
.ks-sonra::before { content: ""; position: absolute; width: 400px; height: 400px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(122, 47, 240, .55), transparent 65%); pointer-events: none; }
.ks-sonra > * { position: relative; }
.hr-js .ks-sonra li::before { transform: scale(0); }
.hr-js .ks-sonra.gorundu li::before { animation: tik .5s var(--firla) forwards; animation-delay: calc(.3s + var(--i, 0) * 0s + var(--t, 0) * 120ms); }
.ks-sonra li:nth-child(1) { --t: 0; } .ks-sonra li:nth-child(2) { --t: 1; } .ks-sonra li:nth-child(3) { --t: 2; } .ks-sonra li:nth-child(4) { --t: 3; } .ks-sonra li:nth-child(5) { --t: 4; }
@keyframes tik { to { transform: scale(1); } }

/* ---------- Panel vitrini: solda metin, sağda kaydırdıkça değişen ekran (tema.js) ---------- */
.vitrin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.vitrin-metin { display: grid; gap: 0; }
.vitrin-adim { padding: 22vh 0; border-left: 2px solid var(--line); padding-left: 28px; transition: border-color .4s ease; }
.vitrin-adim:first-child { padding-top: 6vh; }
.vitrin-adim:last-child { padding-bottom: 10vh; }
.vitrin-adim.aktif { border-left-color: var(--violet); }
.vitrin-adim .k { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); transition: color .3s ease; }
.vitrin-adim.aktif .k { color: var(--violet); }
.vitrin-adim h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 10px; color: var(--stone); transition: color .3s ease; }
.vitrin-adim.aktif h3 { color: var(--ink); }
.vitrin-adim p { color: var(--muted); margin-top: 10px; font-size: 16px; opacity: .55; transition: opacity .3s ease; }
.vitrin-adim.aktif p { opacity: 1; }
.vitrin-adim img { display: none; }
.vitrin-gorsel { position: sticky; top: 96px; aspect-ratio: 1920 / 1200; border-radius: 20px; overflow: hidden; background: var(--lavender); border: 1px solid var(--line); box-shadow: 0 40px 90px -40px rgba(60, 20, 140, .5); isolation: isolate; }
.vitrin-gorsel::before { content: ""; position: absolute; inset: -40% -20%; z-index: -1; background: conic-gradient(from 0deg, #fdf2f8, #eef2ff, #ecfeff, #fdf2f8); animation: don 18s linear infinite; }
.vitrin-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04) translateY(16px); transition: opacity .55s ease, transform .7s var(--egri); }
.vitrin-gorsel img.aktif { opacity: 1; transform: none; }
.vitrin-gorsel .vitrin-etiket { position: absolute; left: 16px; bottom: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(28, 11, 68, .85); color: var(--white); font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .3s ease; }
@keyframes don { to { transform: rotate(360deg); } }
.ekran-not { margin-top: 24px; }

/* ---------- Sektörler: pastel kaydırak (tema.js okları ekler) ---------- */
.kaydirak { position: relative; }
.sektorler { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 20px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.sektorler::-webkit-scrollbar { display: none; }
/* Kaydırağın sağında duran kartlar ekrana dikey girmediği için belirme efektine takılmasın: hep görünür */
.hr-js .sektorler .hr:not(.gorundu) { opacity: 1; transform: none; }
.sektor { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; min-height: 320px; border-radius: 24px; padding: 26px 24px; border-color: transparent; background: var(--sektor-renk, var(--lavender)); overflow: hidden; }
.sektor:nth-child(1) { --sektor-renk: linear-gradient(160deg, #ffe4ef 0%, #fff7fb 100%); }
.sektor:nth-child(2) { --sektor-renk: linear-gradient(160deg, #ebe3ff 0%, #f8f5ff 100%); }
.sektor:nth-child(3) { --sektor-renk: linear-gradient(160deg, #d9fbe8 0%, #f3fdf8 100%); }
.sektor:nth-child(4) { --sektor-renk: linear-gradient(160deg, #ffe9d6 0%, #fff8f2 100%); }
.sektor:nth-child(5) { --sektor-renk: linear-gradient(160deg, #dbeeff 0%, #f3f9ff 100%); }
.sektor .emoji { width: 56px; height: 56px; border-radius: 16px; font-size: 28px; background: rgba(255, 255, 255, .85); box-shadow: 0 10px 24px -12px rgba(28, 11, 68, .3); transition: transform .3s var(--firla); }
.sektor:hover .emoji { transform: rotate(-6deg) scale(1.08); }
.sektor h3 { font-size: 19px; }
.sektor ul { font-size: 14.5px; }
.sektor button { background: var(--white); border-radius: 999px; padding: 9px 14px; box-shadow: var(--golge); }
.kaydirak-ok { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -32px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 18px; cursor: pointer; display: grid; place-items: center; z-index: 3; box-shadow: var(--golge-kalk); transition: transform .2s ease, opacity .2s ease, background .2s ease; }
.kaydirak-ok:hover { background: var(--violet); color: var(--white); border-color: var(--violet); }
.kaydirak-ok:active { transform: scale(.94); }
.kaydirak-ok[disabled] { opacity: .3; pointer-events: none; }
.kaydirak-ok.sol { left: -22px; } .kaydirak-ok.sag { right: -22px; }

/* ---------- Özellikler: pastel parlamalı kartlar ---------- */
.band { background: linear-gradient(180deg, var(--white) 0%, var(--lavender) 18%, var(--lavender) 82%, var(--white) 100%); }
.feature { position: relative; overflow: hidden; border-radius: 20px; }
.feature::before { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, var(--parla, rgba(122, 47, 240, .18)), transparent 68%); pointer-events: none; transition: transform .4s ease; }
.feature:hover::before { transform: scale(1.4); }
.feature:nth-child(4n+1) { --parla: rgba(122, 47, 240, .2); }
.feature:nth-child(4n+2) { --parla: rgba(106, 183, 255, .28); }
.feature:nth-child(4n+3) { --parla: rgba(255, 122, 200, .25); }
.feature:nth-child(4n+4) { --parla: rgba(45, 212, 191, .25); }
.feature > * { position: relative; }
.icon { transition: transform .3s var(--firla); }
.feature:hover .icon { transform: rotate(-8deg) scale(1.08); }

/* ---------- Güven: koyu, ışıklı, cam kartlar ---------- */
.guven { background: linear-gradient(180deg, var(--navy) 0%, #1c0b44 100%); border-radius: 48px; }
.guven .eyebrow { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #d9c4ff; }
.guven .h-lg em { background: linear-gradient(100deg, #d9c4ff 0%, #a9c8ff 50%, #8fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.guven-oge { border-radius: 20px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.guven-oge .icon { background: linear-gradient(135deg, rgba(199, 166, 255, .25), rgba(106, 183, 255, .2)); }

/* ---------- Fiyat: ışıklı çerçeve, pulsayan rozet (yapı korunur) ---------- */
.plan.featured { border: 1px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, var(--violet), #4f7cff 50%, var(--pink)) border-box; box-shadow: 0 30px 70px -36px rgba(60, 20, 140, .45); border-radius: 24px; }
.plan .badge { background: linear-gradient(90deg, var(--violet), #c03fd6); animation: rozet 2.6s ease-in-out infinite; }
@keyframes rozet { 0%, 100% { box-shadow: 0 0 0 0 rgba(122, 47, 240, .5); } 50% { box-shadow: 0 0 0 8px rgba(122, 47, 240, 0); } }
.plan-fiyat b { background: linear-gradient(100deg, var(--night), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- SSS: kart görünümlü sorular ---------- */
details { border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 10px; background: var(--white); transition: border-color .25s ease, box-shadow .25s ease; }
details[open] { border-color: #d9ccf5; box-shadow: var(--golge); }
summary::after { width: 28px; height: 28px; border-radius: 50%; background: var(--violet-soft); display: grid; place-items: center; font-size: 18px; flex: none; transition: transform .3s var(--firla), background .2s ease; }
details[open] summary::after { content: "+"; transform: rotate(45deg); background: var(--violet); color: var(--white); }
details[open] p { animation: girisYukari .35s var(--egri) both; }

/* ---------- Kapanış ve altbilgi ---------- */
.final-card { background: linear-gradient(160deg, var(--navy) 0%, #24125c 100%); border-radius: 32px; padding: 88px 32px; }
.final-card::before { background: radial-gradient(ellipse at 50% 0%, rgba(122, 47, 240, .65), transparent 60%); }
.final-card::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -900px; width: 1400px; height: 1400px; margin-left: -700px; border-radius: 50%; border: 1px solid rgba(199, 166, 255, .25); box-shadow: inset 0 0 120px rgba(106, 183, 255, .15); pointer-events: none; }
.final-card .h-lg em { background: linear-gradient(100deg, #d9c4ff 0%, #a9c8ff 50%, #8fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-card .btn-violet { background: var(--white); color: var(--night); }
.final-card .btn-violet:hover { background: #efe8ff; }
.final-card .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .35); color: var(--white); }
.final-card .btn-outline:hover { background: rgba(255, 255, 255, .12); }
footer { background: var(--navy); position: relative; overflow: hidden; }
footer::after { content: "SatışDM"; position: absolute; left: 50%; bottom: -0.22em; transform: translateX(-50%); font-size: clamp(120px, 20vw, 300px); font-weight: 700; letter-spacing: -0.05em; color: rgba(255, 255, 255, .035); pointer-events: none; white-space: nowrap; line-height: 1; }
footer .wrap { position: relative; z-index: 1; }

/* ---------- Duyarlı ---------- */
@media (max-width: 960px) {
  .hero { margin-top: -72px; padding-top: 108px; }
  .hero .wrap::before, .hero .wrap::after { top: -1360px; }
  .builder-form { border-radius: 0 0 20px 20px; border-top: none; }
  .builder-form::after { display: none; }
  .builder-preview { border-radius: 20px 20px 0 0; }
  .hero-cta .btn-violet.hero-olustur { background: transparent; border-color: rgba(255, 255, 255, .32); color: var(--white); box-shadow: none; }
  .hero-rakamlar { gap: 12px; margin-top: 40px; }
  .steps { gap: 20px; }
  .step:not(:last-child)::after { right: 50%; top: auto; bottom: -24px; margin: 0 -14px 0 0; transform: rotate(90deg); }
  .vitrin { grid-template-columns: 1fr; gap: 0; }
  .vitrin-gorsel { display: none; }
  .vitrin-adim { padding: 24px 0 24px 22px; border-left-width: 2px; }
  .vitrin-adim:first-child { padding-top: 0; }
  .vitrin-adim img { display: block; width: 100%; height: auto; margin-top: 16px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--golge); }
  .vitrin-adim h3 { color: var(--ink); font-size: 22px; } .vitrin-adim p { opacity: 1; } .vitrin-adim .k { color: var(--violet); }
  /* Telefonda kaydırmak doğal; oklar kartın üstüne binmesin */
  .kaydirak-ok { display: none; }
  .sektorler { -webkit-mask-image: none; mask-image: none; }
  .gun-serit { margin-top: 96px; }
  .guven, .kanal-bant { border-radius: 0 0 32px 32px; }
  .guven { border-radius: 32px; }
  footer::after { font-size: 26vw; }
}
@media (max-width: 560px) {
  .hero { padding-top: 96px; }
  .hero .wrap::before, .hero .wrap::after { display: none; }
  .hero-rakamlar { grid-template-columns: 1fr; gap: 8px; padding-bottom: 40px; }
  .hero-rakamlar li + li::before { left: 20%; right: 20%; top: -4px; height: 1px; width: auto; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); }
  .hero-rakamlar b { font-size: 40px; }
  .trust-line { gap: 8px 14px; }
  .hikaye { padding: 18px 14px 16px; border-radius: 20px; }
  .gun { padding: 20px 16px 24px; border-radius: 20px; }
  .gun-saat { font-size: 26px; }
  .gun-serit { margin-top: 90px; }
  .gun-olay { width: 160px; margin-left: -80px; font-size: 12px; }
  .gun-olay.sag { margin-left: -136px; }
  .kanal-bant { border-radius: 0 0 28px 28px; padding-bottom: 48px; }
  .final-card { padding: 64px 20px; border-radius: 24px; }
  .step::before { height: 96px; }
}

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  .hr-js .display .kelime, .hr-js .builder, .gun-olay, .gun-sayac b.pat, .plan .badge, .vitrin-gorsel::before, .hr-js .ks-sonra.gorundu li::before, details[open] p { animation: none; }
  .hr-js .ks-sonra li::before { transform: none; }
  .hero::before, .hero::after { animation: none; }
  .isik::after, .feature::before, .icon, .sektor .emoji, .vitrin-gorsel img, .vitrin-adim, summary::after { transition: none; }
  .feature:hover::before, .feature:hover .icon, .sektor:hover .emoji { transform: none; }
  .vitrin-gorsel img { transform: none; }
  .sektorler { scroll-behavior: auto; }
}

/* ---------- Fiyat: üç kart, ortadaki öne çıkan ---------- */
.plans { align-items: stretch; gap: 24px; }
.plan { border-radius: 24px; padding: 32px 28px; }
.plan.featured { transform: translateY(-10px); }
.plan.featured:hover { transform: translateY(-14px); }
.plan.featured .plan-name { color: var(--violet); }
.plan .badge { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.plan-not { max-width: 760px; margin: 28px auto 0; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.price-note { margin-top: 14px; }
@media (max-width: 960px) {
  .plans { max-width: 520px; }
  .plan.featured, .plan.featured:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .plan.featured:hover { transform: translateY(-10px); } }

/* ---------- Kazanç hesaplayıcı ---------- */
#kazanc { padding-top: 0; }
.kz { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; max-width: 1040px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 28px; padding: 32px; box-shadow: var(--golge); }
.kz-girdi { display: grid; gap: 10px; align-content: start; }
.kz-girdi label { font-size: 15px; font-weight: 600; margin-top: 10px; }
.kz-satir { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.kz-satir output { min-width: 96px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--violet); font-size: 17px; }
.kz input[type=range] { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: linear-gradient(90deg, var(--violet) var(--p, 50%), var(--line) var(--p, 50%)); border-radius: 999px; outline: none; }
.kz input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 3px solid var(--violet); box-shadow: 0 6px 16px -6px rgba(122, 47, 240, .6); cursor: pointer; transition: transform .15s ease; }
.kz input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.kz input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 3px solid var(--violet); cursor: pointer; }
.kz input[type=range]:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.kz-varsayim { font-size: 13.5px; color: var(--muted); background: var(--lavender); border-radius: 12px; padding: 12px 14px; margin-top: 12px; line-height: 1.5; }
.kz-varsayim b { color: var(--ink); }
.kz-sonuc { display: grid; gap: 12px; align-content: start; }
.kz-kart { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--lavender); border: 1px solid transparent; }
.kz-kart > span { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kz-kart > b { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kz-kart small { font-size: 13px; color: var(--muted); }
.kz-vurgu { background: linear-gradient(160deg, var(--navy) 0%, #2a1260 100%); color: var(--white); border-color: transparent; position: relative; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(60, 20, 140, .7); }
.kz-vurgu::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(122, 47, 240, .7), transparent 65%); }
.kz-vurgu > * { position: relative; }
.kz-vurgu > span, .kz-vurgu small { color: rgba(255, 255, 255, .7); }
.kz-vurgu > b { background: linear-gradient(100deg, #d9c4ff 0%, #a9c8ff 50%, #8fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 36px; }
.kz-sonuc .btn { justify-self: start; margin-top: 4px; }
.kz-kart > b .pat { display: inline-block; animation: pat .4s var(--firla); }

/* ---------- Temsilî senaryolar: öncesi / sonrası ---------- */
#senaryolar { padding-top: 0; }
.sn-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sn { display: grid; gap: 14px; padding: 22px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--golge); transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) { .sn:hover { transform: translateY(-4px); box-shadow: var(--golge-kalk); } }
.sn-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sn-sektor { font-size: 14px; font-weight: 600; }
.sn-saat { font-size: 13px; font-weight: 600; color: var(--violet); background: var(--violet-soft); border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.sn-once, .sn-sonra { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px; border-radius: 16px; }
.sn-once { background: #faf9fc; color: var(--muted); }
.sn-sonra { background: linear-gradient(160deg, #f1ebff 0%, #e8f3ff 100%); }
.sn-once i, .sn-sonra i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; }
.sn-once i { background: #ebe8f1; color: var(--stone); }
.sn-sonra i { background: var(--violet); color: var(--white); }
.sn-once b, .sn-sonra b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.sn-sonra b { color: var(--violet); }
.sn-once p, .sn-sonra p { font-size: 14.5px; line-height: 1.5; }
.sn-once p { text-decoration: line-through; text-decoration-color: rgba(92, 86, 112, .35); }
.sn-sonuc { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--night); color: var(--white); margin-top: auto; }
.sn-sonuc span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.sn-sonuc b { font-size: 15px; font-weight: 600; }
.sn-not { text-align: center; font-size: 13.5px; color: var(--stone); margin-top: 20px; }
.sn-not a { color: var(--violet); font-weight: 600; }
/* Belirirken "sonra" kutusu bir an sonra parlar */
.hr-js .sn.gorundu .sn-sonra { animation: snParla 1.2s .5s ease-out; }
@keyframes snParla { 0% { box-shadow: 0 0 0 0 rgba(122, 47, 240, .45); } 100% { box-shadow: 0 0 0 14px rgba(122, 47, 240, 0); } }

/* ---------- Karşılaştırma tablosu ---------- */
.ky-kutu { max-width: 980px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--golge); }
.ky { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ky th, .ky td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ky thead th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); background: var(--lavender); }
.ky thead th.ky-biz { color: var(--white); background: var(--violet); }
.ky tbody th { font-weight: 600; color: var(--ink); width: 26%; }
.ky tbody tr:last-child th, .ky tbody tr:last-child td { border-bottom: none; }
.ky td { color: var(--muted); }
.ky td::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; background: var(--stone); }
.ky td[data-k="yok"]::before { background: var(--danger); }
.ky td[data-k="orta"]::before { background: #d99a00; }
.ky td[data-k="var"]::before { background: var(--mint-ink); }
.ky td:last-child { color: var(--ink); font-weight: 600; background: rgba(122, 47, 240, .05); }
.ky tbody tr { transition: background .2s ease; }
@media (hover: hover) { .ky tbody tr:hover { background: var(--lavender); } }

/* ---------- Kapanışta kurulum süresi şeridi ---------- */
.kurulum { list-style: none; display: flex; justify-content: center; gap: 0; margin: 28px auto 0; max-width: 760px; flex-wrap: wrap; }
.kurulum li { position: relative; display: grid; gap: 2px; padding: 10px 24px; text-align: center; }
.kurulum li + li::before { content: "→"; position: absolute; left: -8px; top: 14px; color: rgba(255, 255, 255, .4); }
.kurulum b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.kurulum span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.kurulum-son b { background: linear-gradient(100deg, #d9c4ff 0%, #a9c8ff 50%, #8fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Ekranda duran çağrı çubuğu ---------- */
.yapisik-cta { position: fixed; left: 50%; bottom: 18px; z-index: 19; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(28, 11, 68, .92); color: var(--white); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 50px -20px rgba(28, 11, 68, .7); border: 1px solid rgba(255, 255, 255, .12); transition: opacity .35s ease, transform .35s var(--egri), display .35s allow-discrete; }
.yapisik-cta[hidden] { display: none; opacity: 0; transform: translate(-50%, 24px); }
@starting-style { .yapisik-cta:not([hidden]) { opacity: 0; transform: translate(-50%, 24px); } }
.yapisik-metin { font-size: 14px; white-space: nowrap; }
.yapisik-cta .btn { padding: 10px 16px; font-size: 14px; }
.yapisik-cta .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--white); }
.yapisik-cta .btn-outline:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 960px) {
  .kz { grid-template-columns: 1fr; padding: 22px; }
  .sn-izgara { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .ky-kutu { overflow-x: auto; }
  .ky { min-width: 640px; }
}
@media (max-width: 560px) {
  .kurulum li { padding: 8px 14px; }
  .kurulum b { font-size: 17px; }
  .yapisik-cta { left: 12px; right: 12px; bottom: 12px; transform: none; border-radius: 18px; padding: 8px; }
  .yapisik-cta[hidden] { transform: translateY(24px); }
  @starting-style { .yapisik-cta:not([hidden]) { transform: translateY(24px); } }
  .yapisik-metin { display: none; }
  .yapisik-cta .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-js .sn.gorundu .sn-sonra, .kz-kart > b .pat { animation: none; }
  .yapisik-cta { transition: none; }
}

/* ---------- Cila 2: doku, imleç ışığı, uçan kartlar, 3B eğilme, parıltı, oklar ---------- */
:root { --doku: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
/* Koyu alanlara ince film dokusu; girişte imleci izleyen mor ışık (tema.js --hx/--hy) */
.hero { background: var(--doku), radial-gradient(640px circle at var(--hx, 50%) var(--hy, 18%), rgba(122, 47, 240, .22), transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, #1a0f4a 100%); }
.guven { background: var(--doku), linear-gradient(180deg, var(--navy) 0%, #1c0b44 100%); }
.final-card { background: var(--doku), linear-gradient(160deg, var(--navy) 0%, #24125c 100%); }
.gun, .ks-sonra, .kz-vurgu, .sn-sonuc { background-image: var(--doku); background-color: var(--night); }
.ks-sonra { background: var(--doku), linear-gradient(160deg, var(--navy) 0%, #2a1260 100%); }
.kz-vurgu { background: var(--doku), linear-gradient(160deg, var(--navy) 0%, #2a1260 100%); }

/* Uçan sonuç kartları: oluşturucunun köşelerinde süzülür, içerikleri döner */
.builder { position: relative; }
.ucan { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, .96); color: var(--ink); border: 1px solid rgba(122, 47, 240, .14); box-shadow: 0 24px 50px -20px rgba(28, 11, 68, .55), 0 0 0 6px rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: suzul 6s ease-in-out infinite; pointer-events: none; }
.ucan i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 700; background: var(--mint-bg); color: var(--mint-ink); flex: none; }
.ucan-b i { background: var(--violet-soft); color: var(--violet); }
.ucan b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.ucan span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.ucan-a { top: -26px; right: -34px; }
/* İkinci kart sohbetin altındaki boş lavanta alanın sağ kenarında durur; formun üstüne binmez */
.ucan-b { bottom: 120px; right: -34px; animation-delay: -3s; }
.ucan.degisiyor { animation: suzul 6s ease-in-out infinite, ucanDegis .5s ease; }
@keyframes suzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ucanDegis { 0% { opacity: 0; transform: translateY(-6px) scale(.96); } 100% { opacity: 1; transform: none; } }
@media (max-width: 1180px) { .ucan { display: none; } }

/* 3B eğilme: fare kartın üstünde gezerken hafifçe eğilir (tema.js --rx/--ry) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .35s ease, box-shadow .3s ease, border-color .25s ease, background-color .2s ease; }
.tilt:hover { --ty: -4px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty)); }
.plan.featured.tilt { --ty: -10px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty)); }
.plan.featured.tilt:hover { --ty: -14px; }
.sektor.tilt:hover { --ty: -2px; }
@media (max-width: 960px) { .plan.featured.tilt, .plan.featured.tilt:hover { --ty: 0px; } }

/* Düğmeler: üzerine gelince parıltı geçer, önemli çağrılarda ok kayar */
.btn-violet, .hero-cta .btn, .final-card .btn { position: relative; overflow: hidden; }
.btn-violet::before, .hero-cta .btn::before, .final-card .btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; }
.btn-violet:hover::before, .hero-cta .btn:hover::before, .final-card .btn:hover::before { left: 130%; }
.hero-olustur::after, .hemen-dene::after, .steps-cta .btn-violet::after, .kz-sonuc .btn::after, .final-card .btn-violet::after, .yapisik-cta .btn-violet::after, .plan .btn::after { content: "→"; display: inline-block; transition: transform .2s ease; }
.hero-olustur:hover::after, .hemen-dene:hover::after, .steps-cta .btn-violet:hover::after, .kz-sonuc .btn:hover::after, .final-card .btn-violet:hover::after, .yapisik-cta .btn-violet:hover::after, .plan .btn:hover::after { transform: translateX(4px); }

/* Sektör kartlarında örnek yazışma */
.sektor { min-height: 0; }
.sektor-ornek { display: grid; gap: 6px; margin: 2px 0 12px; }
.sektor-ornek span { max-width: 92%; padding: 7px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; }
.sektor-ornek .m { justify-self: start; background: rgba(255, 255, 255, .9); border-bottom-left-radius: 4px; color: var(--ink); }
.sektor-ornek .t { justify-self: end; background: var(--night); color: var(--white); border-bottom-right-radius: 4px; }

/* Belirme yönleri çeşitlensin (yana kayan kartlar sayfayı yatay taşırmasın: main kırpar, yapışkan görsel bozulmaz) */
main { overflow-x: clip; }
.hr-js .ks-once:not(.gorundu) { transform: translateX(-32px); }
.hr-js .ks-sonra:not(.gorundu) { transform: translateX(32px); }
.hr-js .sn:nth-child(1):not(.gorundu) { transform: translate(-28px, 12px); }
.hr-js .sn:nth-child(3):not(.gorundu) { transform: translate(28px, 12px); }
.hr-js .vitrin:not(.gorundu), .hr-js .kz:not(.gorundu), .hr-js .ky-kutu:not(.gorundu) { transform: translateY(24px) scale(.98); }
.hr-js .gun:not(.gorundu) { transform: translateY(24px) scale(.97); }

/* ---------- Cila 3: dönen kelime, altyapı rozetleri, tablo parlaması, görünürlük optimizasyonu ---------- */
/* Giriş metninde sektör kelimesi yukarı kayarak değişir (tema.js); genişliği en uzun kelimeye göre sabit, metin zıplamaz */
.donen { display: inline-block; position: relative; vertical-align: baseline; text-align: left; color: var(--white); font-weight: 600; border-bottom: 2px solid rgba(217, 196, 255, .6); line-height: 1.2; }
.donen.degis { animation: donenGel .45s var(--egri); }
@keyframes donenGel { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
/* Güven bölümünde altyapı rozetleri */
.altyapi { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -24px auto 36px; max-width: 900px; }
.altyapi li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.altyapi i { font-style: normal; font-size: 14px; color: #d9c4ff; }
/* Karşılaştırma tablosunda SatışDM sütunu belirince bir kez parlar */
.hr-js .ky-kutu.gorundu td:last-child { animation: kyParla 1.4s .5s ease-out; }
@keyframes kyParla { 0% { background: rgba(122, 47, 240, .05); } 35% { background: rgba(122, 47, 240, .22); } 100% { background: rgba(122, 47, 240, .05); } }
/* Not: content-visibility: auto denendi; atlanan bölümlerde belirme geçişleri askıda kalıyordu, kaldırıldı. */

/* ---------- Denetim düzeltmeleri (Lighthouse + tablet) ---------- */
/* Küçük notlar okunur kontrastta */
.ekran-not, .sn-not, .gun-not { color: var(--muted); }
.gun-not { color: rgba(255, 255, 255, .72); }
/* Altbilgi başlıkları h3 (kapanıştaki h2'den sonra sıra atlamaz) */
footer h3 { color: #b58cff; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
/* Telefonda küçük bağlantılar en az 24px dokunma alanı alsın */
@media (max-width: 960px) {
  footer ul a, .sn-not a, .price-note a.teklif, .form-note a, .hint a { display: inline-block; padding: 5px 0; margin: -5px 0; }
}
/* Tablet (961-1120px): üst menü tek satırda kalsın; ikinci düğme menüde zaten var */
.nav-links a, .nav-cta .btn, .nav-giris { white-space: nowrap; }
@media (max-width: 1120px) and (min-width: 961px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 14px; }
  .nav-cta .btn-night { display: none; }
  .nav-cta .btn { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .donen.degis, .hr-js .ky-kutu.gorundu td:last-child { animation: none; }
  .ucan, .ucan.degisiyor { animation: none; }
  .tilt, .tilt:hover, .plan.featured.tilt { transform: none; transition: none; }
  .btn-violet::before, .hero-cta .btn::before, .final-card .btn::before { display: none; }
}