/* ---------- Pocket+ 2.0: hero sonrası bölümler (Figma 98:3452) ---------- */
.sec { position: relative; padding: 80px 24px; }
.sec h2 { font: 500 50px/1.1 var(--display); color: #fff; letter-spacing: 0; }
.sec-head { width: min(714px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.sec-head p { font: 300 20px/1.3 var(--display); letter-spacing: .2px; color: #fff; }
.sec-head .btn { margin-top: 20px; align-self: flex-start; }
.sec-head.center { align-items: center; text-align: center; }
.sec-head.center .btn { align-self: center; }

/* Sayfa içi kaydırma: sabit menü yok (masaüstü), başlığa biraz boşluk */
section[id] { scroll-margin-top: 70px; }

/* Görünürlükte belirme */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Kamera PNG (hero) ---------- */
.cam {
  position: absolute; left: 1079px; top: 288px; width: 265px; height: 682px; max-width: none; z-index: 3; pointer-events: none;
  /* Figma: 30/10/64 kutu gölgesi, 1200/1050 ölçeğinde. PNG şeffaf olduğu için box-shadow yerine şekli izleyen drop-shadow. */
  filter: drop-shadow(34px 12px 34px rgba(0,0,0,.55)) drop-shadow(6px 3px 6px rgba(0,0,0,.35));
  opacity: 0; transform: translate(60px, 24px);
}
.go .cam { animation: cam-in 1.1s cubic-bezier(.16, .8, .2, 1) .8s forwards; }
@keyframes cam-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cam { opacity: 1; transform: none; animation: none !important; } }
.hero { overflow-x: clip; overflow-y: visible; z-index: 2; padding-bottom: 0; }
.hero-bg { height: auto; bottom: 0; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent 100%); }  /* alt kenarda sonraki bölümle kesik çizgi oluşmasın */

/* ---------- Kullanım alanları ---------- */
.sec-uc { background: linear-gradient(180deg, #000, #0f061f); padding-top: 200px; padding-bottom: 80px; }
.sec-uc .sec-head { gap: 8px; }
.uc-grid { width: min(1160px, 100%); margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.uc {
  --c: 255 255 255; position: relative; display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: 16px;
  background: rgb(var(--c) / .1); border: 1px solid rgb(var(--c) / .22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 10px 40px rgb(0 0 0 / .25);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s;
}
.uc:hover { transform: translateY(-6px); background: rgb(var(--c) / .16); border-color: rgb(var(--c) / .4); }
.c-red { --c: 255 0 51; } .c-purple { --c: 208 0 255; } .c-blue { --c: 0 174 255; } .c-mint { --c: 0 255 204; }
.uc .ico { width: 48px; height: 48px; margin: -4px 0 0 -4px; }
.uc h3 { font: 500 20px/23px var(--text); color: #fff; }
.uc p { margin-top: -14px; font: 200 16px/23px var(--text); letter-spacing: .32px; color: #f2eaff; }
.compat { margin: 56px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.compat > p { font: 200 16px/23px var(--text); letter-spacing: .32px; color: #f5eaff; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 50px; }
.logos > img, .logos .lg-link > img { max-width: none; }
.lg-link { display: inline-flex; align-items: center; transition: opacity .2s; }
.lg-link:hover { opacity: .7; }
.lg-yt { position: relative; width: 116.25px; height: 25px; }
.lg-yt img { position: absolute; max-width: none; }
.lg-yt img:nth-child(1) { left: 0; top: 0; width: 31.18%; height: 100%; }
.lg-yt img:nth-child(2) { left: 33.49%; top: 7.2%; width: 66.14%; height: 88.35%; }
.lg-meet { position: relative; width: 109px; height: 32px; }
.lg-meet img { position: absolute; max-width: none; }
.lg-meet .m4 { left: 0; top: 0; width: 29.68px; height: 32px; }
.lg-meet .m2 { left: 22.45px; top: 4.72px; width: 18.36px; height: 23.6px; }
.lg-meet .mc { left: 3.71px; top: 21.8px; width: 10.2px; height: 6.5px; }
.lg-meet .mt { left: 50.81px; top: 6.49px; width: 58.18px; height: 19.02px; }

/* ---------- One camera. Every angle. ---------- */
.sec-scn { background: linear-gradient(180deg, #0f061f 0, #000 200px, #000 100%); padding: 150px 24px 100px; }
.scn { width: min(1050px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.scn-head { width: min(714px, 100%); display: flex; flex-direction: column; gap: 8px; }
.scn-head p { font: 300 20px/1.3 var(--display); letter-spacing: .2px; }
.scn-stage { position: relative; }
.scn-frame {
  position: relative; aspect-ratio: 1050 / 590.625; border-radius: 8px; overflow: hidden; background: #111;
  border: 1px solid rgb(255 255 255 / .2); box-shadow: 0 30px 80px rgb(0 0 0 / .5);
}
.scn-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%);
  transition: opacity .8s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.scn-frame img.on { opacity: 1; }
.scn-rail { position: absolute; left: calc(100% + 42px); top: 0; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 21px; }
.sb {
  width: 51px; height: 51px; border-radius: 50%; border: 0; cursor: pointer; color: #d7d7d7; font: 400 29px/1 var(--sf);
  background: rgb(255 255 255 / .1); opacity: .75; display: grid; place-items: center; padding: 0;
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -10px 18px -8px rgb(255 255 255 / .08), 0 0 12.7px rgb(0 0 0 / .15);
  transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s;
}
.sb:hover { opacity: .95; transform: scale(1.07); }
.sb.on { opacity: 1; color: #fff; background: rgb(255 255 255 / .16); }
.sb:active { transform: scale(.95); }
.sb:focus-visible { outline: 2px solid rgb(255 255 255 / .7); outline-offset: 3px; }
.sb-plus { position: relative; width: 68px; height: 68px; opacity: 1; cursor: default; }
.sb-plus:hover, .sb-plus:active { transform: none; opacity: 1; }
.sb-plus .tip { display: flex; align-items: center; gap: 8px; position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: rgb(0 0 0 / .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / .18); font: 300 14px/normal var(--text); letter-spacing: .2px; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.sb-plus .tip .pro { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 5px; border-radius: 5px; font: 700 10.5px/1 var(--sf); letter-spacing: .2px; }
.sb-plus .tip .pro i { width: 12px; height: 10px; background: #000; -webkit-mask: url("assets/icons/crown.fill.png") center / 17px no-repeat; mask: url("assets/icons/crown.fill.png") center / 17px no-repeat; }
.sb-plus:hover .tip, .sb-plus:focus-visible .tip { opacity: 1; transform: translate(0, -50%); }
.sb-plus .ic { --s: 22px; --w: 44px; width: 44px; height: 44px; margin: 0; }
.scn-text { min-height: 56px; display: flex; flex-direction: column; gap: 10px; transition: opacity .28s ease, transform .28s ease; }
.scn-text.swap { opacity: 0; transform: translateY(8px); }
.scn-text h3 { font: 500 24px/23px var(--text); color: #fff; }
.scn-text p { font: 200 16px/23px var(--text); letter-spacing: .32px; color: #fff; }

/* ---------- Everything you need ---------- */
.sec-feat { background: linear-gradient(180deg, #000, #08152a); padding-bottom: 90px; }
.fgrid { margin: 88px auto 0; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.frow { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 60px; }
.fi { opacity: 0; transform: translateY(26px) scale(.82); filter: blur(7px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.34,1.4,.4,1), filter .8s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.fi.in { opacity: 1; transform: none; filter: none; }
.fi-in { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; transition: opacity .35s ease; }
.fi-in img { width: 48px; height: 48px; margin: -4px 0; transform-origin: 50% 60%; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.fi-in span { font: 200 15px/normal var(--text); letter-spacing: .3px; color: #82a3d9; white-space: nowrap; transition: color .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
.fgrid:has(.fi-in:hover) .fi-in:not(:hover) { opacity: .55; }
.fi-in:hover img { transform: scale(1.4) translateY(-2px); }
.fi-in:hover span { color: #fff; transform: translateY(6px); }
.fi-in:focus-visible { outline: 1px solid rgb(255 255 255 / .5); outline-offset: 8px; border-radius: 8px; }
.fi-in:focus-visible img { transform: scale(1.25); }
.fi-in:focus-visible span { color: #fff; }

/* ---------- Pricing ---------- */
.sec-price { background: #000; padding-top: 120px; }  /* özellikler gradyanı burada sert biter */
.plans { width: min(1000px, 100%); margin: 56px auto 0; display: flex; gap: 40px; align-items: flex-start; }
.plan { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding: 24px; border-radius: 16px; border: 1px solid rgb(255 255 255 / .12); }
.plan-free { background: linear-gradient(145deg, rgb(255 255 255 / .13), rgb(255 255 255 / .04)); }
.plan-pro { background: linear-gradient(145deg, rgb(0 174 255 / .2), rgb(0 174 255 / .05)); border-color: rgb(255 255 255 / .2); }
.plan header { display: flex; justify-content: space-between; align-items: flex-start; color: #f3f2ff; }
.plan header h3 { font: 300 32px/normal var(--display); letter-spacing: .64px; }
.plan header b { font: 500 32px/normal var(--display); }
.price { display: flex; flex-direction: column; align-items: flex-end; height: 58px; justify-content: space-between; }
.price b { line-height: 42px; }
.price small { font: 300 12px/16px var(--text); letter-spacing: .36px; color: #bdbabd; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.ticks li { display: flex; gap: 10px; align-items: center; font: 300 18px/normal var(--text); letter-spacing: .18px; color: #f3f2ff; }
.ticks li::before { content: ""; flex: none; width: 25px; height: 24px; background: #3fd35b; -webkit-mask: url("assets/icons/checkmark.png") center / 34px no-repeat; mask: url("assets/icons/checkmark.png") center / 34px no-repeat; }
.btn-block { width: 100%; }
.buy { display: flex; flex-direction: column; gap: 24px; }
.buy .btn i, .plan .btn i { font-style: normal; margin: 0 6px; }
.btn-gold { font-weight: 500; }
.btn-teal { background: rgb(150 205 235 / .14); }
.btn-teal:hover { background: rgb(150 205 235 / .22); }
.plan .btn-glass { font-weight: 300; }

/* ---------- FAQ ---------- */
.sec-faq { background: #000; padding-bottom: 60px; }
.faq { width: min(800px, 100%); margin: 50px auto 0; display: flex; flex-direction: column; gap: 20px; }
.faq details {
  position: relative; border-radius: 24px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); padding: 0 24px; transition: background .3s;
}
.faq details[open], .faq details:hover { background: rgb(255 255 255 / .08); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: 400 18px/21px var(--text); color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { width: 28px; height: 28px; margin: -4px; opacity: .85; transition: transform .35s cubic-bezier(.34,1.3,.4,1); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details.closing .chev { transform: none; }
.faq details > div { display: grid; grid-template-rows: 1fr; }
.faq p { padding-bottom: 16px; font: 200 16px/21px var(--text); letter-spacing: .32px; color: #d8d8d8; max-width: 750px; }

/* ---------- Yorumlar ---------- */
.sec-rev { background: linear-gradient(180deg, #000, #0f061f); padding-top: 60px; padding-bottom: 100px; }
.rev-grid { width: min(1040px, 100%); margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rev { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 24px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.rev .stars { color: #f9d235; letter-spacing: .12em; font-size: 16px; }
.rev blockquote { font: 200 16px/22px var(--text); letter-spacing: .32px; color: #d8d8d8; }
.rev figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rev .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 16px var(--text); color: #fff; flex: none; }
.rev .who { display: grid; line-height: 1.25; font: 400 15px var(--text); }
.rev .who small { color: #9594a1; font-weight: 300; }
@media (max-width: 860px) { .rev-grid { grid-template-columns: 1fr; } }

/* ---------- Download CTA ---------- */
.sec-cta { background: #0f061f; padding: 150px 24px 130px; }
.cta-card {
  position: relative; width: min(1040px, 100%); margin: 0 auto; min-height: 405px; border-radius: 8px; overflow: visible;
  background: linear-gradient(113deg, #000 6.6%, #2f1a56 90.6%); display: flex; align-items: center;
}
.cta-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 30px 80px rgb(0 0 0 / .35); pointer-events: none; }
.cta-copy { position: relative; z-index: 2; padding: 56px 60px; display: flex; flex-direction: column; gap: 30px; max-width: 700px; }
.cta-copy h2 { font-size: 50px; white-space: nowrap; }
.cta-copy p { margin-top: -20px; max-width: 562px; font: 300 20px/1.3 var(--display); letter-spacing: .2px; color: #fff; }
.cta-btns { display: flex; gap: 20px; }
.cta-links { display: flex; flex-direction: column; gap: 10px; font: 300 18px/normal var(--text); letter-spacing: .18px; color: #00d9ff; }
.cta-links a { width: fit-content; transition: opacity .2s; }
.cta-links a:hover { opacity: .7; }
.cta-cam { position: absolute; right: 40px; bottom: 0; width: 253px; height: 460px; max-width: none; z-index: 2; pointer-events: none; filter: drop-shadow(28px 10px 30px rgba(0,0,0,.55)) drop-shadow(5px 2px 6px rgba(0,0,0,.35)); }
.pl { position: absolute; mix-blend-mode: overlay; pointer-events: none; transform: rotate(180deg) scaleY(-1); }
.p1 { right: 69px; top: 122.9px; width: 34.8px; }
.p2 { right: 364.4px; top: 331.4px; width: 54px; }
.p3 { right: 0; top: 299.6px; width: 37.5px; }
.p4 { right: 302.7px; top: 118.2px; width: 29.3px; }
.p5 { right: 398.1px; top: 19.6px; width: 40.5px; }

/* ---------- Footer ---------- */
.foot { background: linear-gradient(180deg, #0f061f, #12193a); padding: 30px 24px; }
.foot-in { width: min(1040px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.foot-top, .foot-mid { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.foot-brand { display: flex; align-items: center; gap: 15px; }
.foot-brand > span:last-child { font: 500 30px/29px var(--display); letter-spacing: .9px; }
.fb-icon { --lg: 60px; position: relative; width: var(--lg); height: var(--lg); flex: none; }
.fb-icon img { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; }
.fb-icon::before, .fb-icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 50%; filter: blur(calc(var(--lg) * .234)); }
.fb-icon::before { top: 50%; background: #35b1f9; opacity: .6; }
.fb-icon::after { top: 0; background: #35f2f9; opacity: .5; }
.foot-links { display: flex; gap: 50px; font: 300 18px/normal var(--text); color: #f3f2ff; }
.foot-links a, .ig { transition: opacity .2s; }
.foot-links a:hover, .ig:hover { opacity: .65; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 999px; background: rgb(255 255 255 / .1); color: #fff; font: 300 14px/normal var(--text); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: rgb(255 255 255 / .18); }
.lang summary img { width: 22px; height: 22px; margin: -4px -4px -4px -6px; opacity: .9; transition: rotate .2s; }
.lang[open] summary img { rotate: 180deg; }
.lang .menu { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 5; display: grid; min-width: 170px; padding: 6px; border-radius: 16px; background: #1d1a33; box-shadow: 0 10px 40px rgb(0 0 0 / .5); }
.lang .menu a { text-decoration: none; color: #d8d8d8; font: 300 14px/normal var(--text); padding: .6em .8em; border-radius: 10px; white-space: nowrap; }
.lang .menu a:hover { background: rgb(255 255 255 / .1); color: #fff; }
.lang .menu a[aria-current] { color: #fff; font-weight: 500; }
.ig { flex-direction: row-reverse; display: inline-flex; align-items: center; gap: 10px; font: 300 14px/normal var(--text); color: #fff; }
.foot-bot { display: flex; justify-content: space-between; align-items: center; gap: 24px; font: 300 13px/normal var(--text); color: #9594a1; }
.foot-bot { flex-direction: row-reverse; }
.foot-bot p { width: 540px; max-width: 100%; text-align: left; font-size: 12px; }

/* ---------- Sabit menü: yukarıdan aşağıya siyah gradyan + kademeli (progressive) blur ---------- */
.nav-bg { position: absolute; left: 0; right: 0; top: 0; bottom: -70px; z-index: -1; pointer-events: none; }  /* opacity/transition YOK: üst öğede opacity<1 olunca backdrop-filter çalışmaz, yanıp sönerdi */
.nav-bg i { position: absolute; inset: 0; }
/* Kademeli blur: her katman bir öncekinden daha kısa yerde biter, blur yukarı doğru güçlenir */
.nav-bg i:nth-child(1) { -webkit-backdrop-filter: blur(2px);  backdrop-filter: blur(2px);  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); }
.nav-bg i:nth-child(2) { -webkit-backdrop-filter: blur(6px);  backdrop-filter: blur(6px);  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 40%, transparent 85%); mask-image: linear-gradient(180deg, #000 0, #000 40%, transparent 85%); }
.nav-bg i:nth-child(3) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 28%, transparent 68%); mask-image: linear-gradient(180deg, #000 0, #000 28%, transparent 68%); }
.nav-bg i:nth-child(4) { -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 15%, transparent 52%); mask-image: linear-gradient(180deg, #000 0, #000 15%, transparent 52%); }
.nav-bg::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; background: linear-gradient(180deg, rgb(0 0 0 / .7) 0, rgb(0 0 0 / .45) 40%, rgb(0 0 0 / .18) 75%, rgb(0 0 0 / 0) 100%); }
@media (min-width: 861px) {
  .nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; margin: 0; z-index: 30; padding: 30px max(32px, calc((100% - 1440px) / 2)) 0; transition: padding .3s ease; }
  .nav.scrolled { padding-top: 14px; padding-bottom: 14px; }
.nav.scrolled .nav-bg::after { opacity: 1; }
  .hero { padding-top: 94px; }
}
@media (max-width: 860px) {
  .cam { left: 983px; }
  .nav { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Genişlik ayarları ---------- */
@media (max-width: 1260px) {
  .scn-rail { left: auto; right: 14px; top: 14px; width: auto; gap: 10px; }
  .sb { width: 38px; height: 38px; font-size: 22px; background: rgb(0 0 0 / .4); }
  .sb-plus { width: 46px; height: 46px; }
  .sb-plus .ic { width: 34px; height: 34px; }
  .uc-grid { grid-template-columns: repeat(2, 1fr); width: min(580px, 100%); }
}
@media (max-width: 860px) {
  .hero { min-height: 0; padding-bottom: 0; }
  .hero-bg { background: radial-gradient(300px 300px at 50% 340px, var(--bg-0) 0, var(--bg-1) 25%, var(--bg-2) 50%, var(--bg-3) 75%, var(--bg-4) 87.5%, #000 100%); }
  .sec { padding: 56px 16px; }
  .sec h2 { font-size: 32px; line-height: 1.12; }
  .sec-head p, .scn-head p { font-size: 16px; }
  .sec-uc .sec-head h2 { font-size: min(32px, 6.7vw); }
  .sec-uc { padding-top: 56px; }
  .uc-grid { grid-template-columns: 1fr; width: 100%; gap: 14px; margin-top: 36px; }
  .logos { gap: 22px 30px; transform: scale(.85); }
  .sec-scn { padding-top: 90px; }
  .scn { gap: 28px; }
  .scn-text h3 { font-size: 20px; }
  .fgrid { gap: 34px; margin-top: 64px; }
  .frow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 8px; width: 100%; max-width: 360px; }
  .fi-in { min-width: 0; }
  .fi-in span { white-space: normal; text-align: center; font-size: 13px; }
  .plans { flex-direction: column; gap: 28px; margin-top: 40px; }
  .plan .btn-lg { height: 50px; font-size: 20px; }
  .plan { width: 100%; }
  .plan header h3, .plan header b { font-size: 26px; }
  .ticks li { font-size: 16px; align-items: flex-start; }
  .faq summary { font-size: 16px; }
  .sec-cta { padding: 90px 16px 70px; }
  .cta-card { flex-direction: column; align-items: flex-start; padding-bottom: 0; }
  .cta-copy { padding: 32px 24px 24px; gap: 20px; }
  .cta-copy h2 { white-space: normal; }
  .cta-copy p { margin-top: -8px; font-size: 16px; }
  .cta-btns { flex-wrap: wrap; gap: 10px; }
  .cta-cam { position: relative; right: auto; align-self: center; margin-top: 10px; width: 200px; height: auto; aspect-ratio: 253 / 460; }
  .pl { display: none; }
  .foot-top, .foot-mid, .foot-bot { flex-direction: column; align-items: flex-start; }
  .foot-links { flex-direction: column; gap: 14px; }
  .foot-bot p { text-align: left; width: 100%; }
  .foot { margin-top: -40px; }
  .foot-bot { flex-direction: column-reverse; gap: 16px; }
  .nav:not(.scrolled) .nav-bg i { display: none; }   /* açılışta başlık bulanmasın; kaydırınca blur gelir */
  .nav-bg { bottom: -36px; }
}
@media (prefers-reduced-motion: reduce) { .reveal, .fi { opacity: 1; transform: none; filter: none; transition: none; } }

.brand .fb-icon { --lg: 64px; }
@media (max-width: 860px) { .brand .fb-icon { --lg: 42px; } }

/* CRT sürerken hero'nun altındaki bölümler görünmesin (yarıların yumuşak kenarından sızmasın) */
html.intro:not(.crt-done) .sec, html.intro:not(.crt-done) .foot { opacity: 0; }

/* Telefon: sahne düğmeleri açıklamanın altında yatay */
@media (max-width: 860px) {
  .scn-stage { display: contents; }
  .scn-frame { order: 1; }
  .scn-text { order: 2; }
  .scn-rail { order: 0; position: static; flex-direction: row; justify-content: center; align-items: center; width: auto; gap: 12px; }
  .sb-plus { display: none; }
  .sb-plus .tip { right: 0; top: auto; bottom: calc(100% + 10px); transform: translateY(6px); }
  .sb-plus:hover .tip, .sb-plus:focus-visible .tip { transform: none; }
}

/* uzun çevirilerde (de, fr…) üst menü sıkışmasın */
@media (max-width: 1200px) { .links { gap: 22px; font-size: 16px; } }
@media (min-width: 861px) and (max-width: 1000px) { .links { gap: 14px; font-size: 14px; } .nav-cta .btn-sm { padding: 0 12px; font-size: 14px; } .brand span { font-size: 26px; } }

/* Logo easter egg baloncuğu */
.nav .brand { position: relative; }
.nav .brand .egg-tip { position: absolute; left: 54px; top: calc(100% + 18px); white-space: nowrap; padding: 6px 12px; border-radius: 16px; background: rgb(255 255 255 / .15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: italic 500 16px/normal var(--sf); letter-spacing: -.32px; color: #fff; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .35s, transform .35s; z-index: 5; }
.nav .brand .egg-tip::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 51.445px; height: 13.732px; background: rgb(255 255 255 / .15); clip-path: polygon(39.4% 100%, 0 0, 100% 100%); }
.nav .brand .egg-tip.on { opacity: 1; transform: none; }
@media (max-width: 860px) { .nav .brand .egg-tip { white-space: normal; width: max-content; max-width: min(260px, calc(100vw - 32px)); } }

.rev-note { margin: 18px auto 0; text-align: center; font: 400 13px/1.4 var(--sf); color: rgb(255 255 255 / .55); }

/* İç sayfalar: ana sayfadaki hero ile aynı ritim. Geçiş (transition) yerine animasyon: elementlerin kendi
   hover geçişleri (.fx-nav a, kartlar) .reveal geçişini eziyor ve öğeler gecikmesiz, titrek beliriyordu. */
.page-ft .reveal { opacity: 0; transform: translateY(18px); }
.page-ft .reveal.in { opacity: 1; transform: none; animation: ft-rv .7s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1s) backwards; }
.page-ft .fx-nav > .reveal.in { animation-duration: .55s; }
@keyframes ft-rv { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .page-ft .reveal, .page-ft .reveal.in { opacity: 1; transform: none; animation: none; } }

/* Gizleme JS'ten önce, CSS'te başlar: .reveal sınıfı sayfa sonundaki betikle eklendiği için içerik önce görünüp sonra
   kayboluyor ve animasyon başlıyordu (açılışta tekleme). JS kapalıysa (scripting: none) içerik gizlenmez. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .page-ft :is(.sec-head, .plan, .rev, .faq details, .cta-card, .fx-head > *, .fx-nav > *, .fx-set:not(:has(.fx-cards)) > .fx-group, .fx-set:has(.fx-cards), .fx-body > *, .ucx-card, .ucx-more, .blog-card, .post > *):not(.in) { opacity: 0; transform: translateY(18px); }
}

/* Sayfalar arası geçiş: yumuşak çözülme (dissolve). Yeni sayfanın öğeleri CSS'te gizli başladığı için önce zemin ve
   üst menü çözülür, sonra öğeler sırayla belirir. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: ease; }
}

/* Fiyat başlığı: telefonda ilk cümleden sonra alt satır (JS ekler) */
.mbr { display: none; }
@media (max-width: 860px) { .mbr { display: inline; } }

/* Fiyat blokları: cam. Arkada yumuşak renk ışımaları, kartlarda bulanıklık + parlak üst kenar */
.plans { position: relative; isolation: isolate; }
.plans::before { content: ""; position: absolute; inset: -90px -60px; z-index: -1; pointer-events: none; filter: blur(36px);
  background: radial-gradient(38% 46% at 24% 42%, rgb(130 80 255 / .42), transparent 72%), radial-gradient(38% 46% at 78% 58%, rgb(0 174 255 / .36), transparent 72%); }
.plan { border-color: rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 -14px 26px -14px rgb(255 255 255 / .1), 0 18px 48px rgb(0 0 0 / .35); }
@media (max-width: 860px) {
  .plans::before { inset: -60px -30px; background: radial-gradient(60% 22% at 30% 22%, rgb(130 80 255 / .42), transparent 72%), radial-gradient(60% 22% at 70% 78%, rgb(0 174 255 / .36), transparent 72%); }
}