/* =====================================================================
   FOREXHANE · HERO "IŞIK SAHNESİ" (hero C; birleştirme ve düzeltmeler 2026-11-07)
   Ortalı metin, altın ana çağrı. Zemin efekti eski .hero bölümüyle aynı: site.css'teki .hero-grid (ızgara)
   ve .hero-glow (alttan yükselen hale) — koyu/açık tema renkleri de site.css'te tanımlı, burada tekrar yok.
   Tanıtım videosu sahnede 16:9 bir "ekran": açılışta kısa bir eğimle (≤7° masaüstü, ≤4° tablet,
   telefonda yok) ~1,2 sn'de düzleşir; sonra transform tamamen kalkar (video yeniden örneklenmez, keskin kalır).
   Videonun ÜSTÜNDE perde, karartma, bulanıklık, yansıma YOKTUR; videonun kendi yazıları her zaman okunur.
   Tüm seçiciler .ls-hero köküne bağlıdır. Kök dışında yalnızca üç bilinçli kural var (dosyanın sonunda):
   final bölümünün ana çağrısı (aynı altın), #videoModal yedeği ve telefonda çerez notunun yeri.
   Üst boşluk: --fh-ust-h (sabit üst menünün risk satırı AÇIKKEN yüksekliği; index.html'de menünün hemen
   altındaki satır içi betik ölçer). Davranış: assets/js/hero.js. Bu dosya site.css'ten sonra yüklenir.
   ===================================================================== */

.ls-hero {
  --ls-ust: var(--fh-ust-h, 107px);
  --ls-top-gap: clamp(22px, 3.6vh, 48px);             /* menünün altı → ilk cümle (her dilde aynı) */
  --ls-gap: clamp(26px, 4vh, 52px);                   /* metin → ekran */
  --ls-w: 720px;                                      /* ekran genişliği (≥900 px'te yüksekliğe göre) */
  --ls-card: 268px;                                   /* ≥1680 px'te ekranın iki yanındaki kart */
  --ls-maks: 1120px;                                  /* tek sütunda ekranın en geniş hâli = sayfa ızgarasının (.wrap) içerik genişliği */
  --ls-radius: 14px;
  --ls-warm: 255, 241, 218;                           /* ışık: sıcak beyaz-şampanya (düşük doygunluk: koyuda kahverengiye dönmez) */
  --ls-core: 255, 231, 188;                           /* yalnızca huzmenin çekirdeği: biraz daha altın */
  --ls-dim: #9BA2B0;                                  /* "gölgedeki" ilk cümle: başlıktan sönük */
  --ls-lead: #C9CED8;
  --ls-note: #8F97A7;
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: initial;
  min-height: 0; padding: calc(var(--ls-ust) + var(--ls-top-gap)) 0 clamp(40px, 6vh, 80px);
  overflow: hidden; background: none;
}

/* ---------- zemin: eski .hero ile aynı ızgara + alttan yükselen hale (site.css: .hero-grid, .hero-glow) ---------- */
.ls-hero .hero-grid, .ls-hero .hero-glow { z-index: -1; }

/* ---------- metin: ortada, dengeli ---------- */
.ls-hero .ls-copy { order: 1; position: relative; width: 100%; max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.ls-hero h1 {
  margin: 0 auto; max-width: 15.5em;
  font-size: clamp(36px, min(4.6vw, 7.4vh), 76px); line-height: 1.02; letter-spacing: -.032em;
  color: var(--text); text-wrap: balance;
}
/* ilk cümle: markanın serif italiği (canlı sayfadaki gibi), başlıktan sönük: "gölgede" */
.ls-hero h1 .h1-pre {
  display: block; margin: 0 0 .26em;
  font-family: var(--f-serif); font-style: italic; font-weight: 500;   /* 500: Georgia'da normal italik; Cormorant yüklüyse 600 */
  font-size: .5em; line-height: 1.15; letter-spacing: 0; color: var(--ls-dim);
}
.ls-hero .lead {
  max-width: 38.5em; margin: clamp(14px, 2.2vh, 24px) auto 0;
  font-size: clamp(15px, 1.12vw, 17px); line-height: 1.64; color: var(--ls-lead); text-wrap: balance;
}
.ls-hero .hero-ctas { order: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(20px, 3vh, 32px) 0 0; padding: 0 var(--gutter); }
.ls-hero .hero-ctas .btn {
  flex: 0 0 auto; min-width: 0; height: 54px; min-height: 0; padding: 0 28px; gap: 10px; overflow: hidden;
  font-size: 15px; letter-spacing: .015em; line-height: 1; white-space: nowrap; text-align: center;
}
.ls-hero .hero-ctas .btn svg { width: 19px; height: 19px; }
.ls-hero .hero-ctas .btn-ghost {
  background: rgba(255, 255, 255, .04); color: #F2F2F2; border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ls-hero .hero-ctas .btn-ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .4); }
.ls-hero .cta-note {
  margin: 6px auto 0; max-width: 58em; font-size: 12.5px; line-height: 1.5; letter-spacing: .01em;   /* 58em: fr notu web fontuyla da tek satır (font yüklenince kayma yok) */
  color: var(--ls-note); text-wrap: pretty;   /* "pretty": dar ekranda satır "·" ile başlamasın */
}
.ls-hero .hero-ctas + .cta-note { margin-top: 16px; }

/* ---------- sahne: ekran + kartlar ---------- */
.ls-hero .ls-show {
  order: 3; position: relative; width: 100%; max-width: 1840px; margin: var(--ls-gap) auto 0;
  padding: 0 var(--gutter) calc(min(100vw, var(--ls-w)) * .06);   /* alt pay: zemin ışığı bu payın içinde söner */
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 22px;
}
.ls-hero .ls-screen { position: relative; width: min(100%, var(--ls-w)); }
/* zemindeki ışık havuzu: ekranın altına düşen yumuşak ışık (yazı yok, yansıma yok). Ekran yüksekliğinin %74–104'ü
   arasında; alt kenarın en çok %4 altına iner ve .ls-show'un alt payında (ekran genişliğinin %6'sı) söner. */
.ls-hero .ls-screen::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: -24%; right: -24%; top: 74%; height: 30%;
  background: radial-gradient(closest-side, rgba(var(--ls-warm), .085), rgba(var(--ls-warm), .03) 58%, rgba(var(--ls-warm), 0));
}

/* açılış: kısa bir eğimle gelir, ~1,2 sn'de düzleşir; animasyon bitince transform HİÇ kalmaz (doldurma: backwards).
   Kaydırma, ses, tam ekran ya da modal hero.js'te .ls-flat ekler: anında düz. Hareket azaltmada ve telefonda yok. */
.ls-hero .ls-tilt { position: relative; transform: none; transform-origin: 50% 100%; }
@keyframes ls-reveal-d { from { transform: perspective(1600px) rotateX(7deg); } to { transform: perspective(1600px) rotateX(0deg); } }
@keyframes ls-reveal-t { from { transform: perspective(1600px) rotateX(4deg); } to { transform: perspective(1600px) rotateX(0deg); } }
@media (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  html.js .ls-hero .ls-tilt { animation: ls-reveal-t 1s cubic-bezier(.22, .68, .2, 1) .15s backwards; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.js .ls-hero .ls-tilt { animation-name: ls-reveal-d; }
}
html.js .ls-hero .ls-tilt.ls-flat { animation: none; }

/* tepeden düşen ışığın ekranın üst kenarında bıraktığı ince parıltı ve kenarın hemen üstündeki hale */
.ls-hero .ls-tilt::before {
  content: ""; position: absolute; z-index: 2; left: 6%; right: 6%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--ls-core), 0), rgba(var(--ls-core), .85) 50%, rgba(var(--ls-core), 0));
}
.ls-hero .ls-tilt::after {
  content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; top: -40px; height: 40px; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, rgba(var(--ls-core), .13), rgba(var(--ls-core), 0));
}

/* ekran: 16:9, kırpma yok (contain), üstünde hiçbir katman yok; yer baştan ayrılır (layout shift yok) */
.ls-hero .ls-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--ls-radius); overflow: hidden; background: #07080B;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 -1px 0 1px rgba(var(--ls-core), .14), 0 34px 90px -46px rgba(var(--ls-warm), .34);
}
.ls-hero .ls-poster, .ls-hero .ls-poster img, .ls-hero .ls-frame > .ls-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ls-hero .ls-poster img, .ls-hero .ls-frame > .ls-video { object-fit: contain; }
.ls-hero .ls-frame > .ls-video { background: transparent; transition: opacity .45s var(--ease); }
.ls-hero .ls-screen.is-wait .ls-frame > .ls-video { opacity: 0; }   /* ilk kare gelene dek afiş görünür */
.ls-hero .ls-screen.is-idle .ls-frame { cursor: pointer; }         /* afişe dokunmak da oynatır */
.ls-hero .ls-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .07); pointer-events: none; }
.ls-hero .ls-prog i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #B8862B, #F5D27A); }
.ls-hero .ls-screen.is-idle .ls-prog { opacity: 0; }

/* ---------- kontrol çubuğu ----------
   ≥768 px: ekranın SAĞ ÜST köşesinde (video yazıları solda, "Reklam" etiketi sol üstte, risk kutusu sol altta;
   1366×768 ve 1440×900'de ilk ekranda görünür). <768 px: resmin DIŞINDA, ekranın altında ortada.
   "Video Türkçedir" yalnızca çeviri sayfalarında: ≥768 px'te sağ alt köşede (tablo notunun altında), telefonda çubukta. */
.ls-hero .ls-bar { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.ls-hero .ls-ctl { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; pointer-events: auto; }
.ls-hero .ls-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 13px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(7, 8, 11, .72); color: #F2F2F2;
  font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: .015em; line-height: 1; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.ls-hero .ls-btn:hover { background: rgba(20, 22, 28, .9); border-color: rgba(255, 255, 255, .45); }
.ls-hero .ls-btn svg { width: 16px; height: 16px; flex: none; }
.ls-hero .ls-play { width: 34px; padding: 0; }
.ls-hero .ls-btn:focus-visible, .ls-hero .ls-start:focus-visible { outline: 2px solid #F5D27A; outline-offset: 2px; }   /* video üstünde: iki temada da altın */
.ls-hero .ls-sound .ls-ic-on, .ls-hero .ls-play .ls-ic-play { display: none; }
.ls-hero .ls-screen.is-sound .ls-sound .ls-ic-on, .ls-hero .ls-screen.is-paused .ls-play .ls-ic-play { display: block; }
.ls-hero .ls-screen.is-sound .ls-sound .ls-ic-off, .ls-hero .ls-screen.is-paused .ls-play .ls-ic-pause { display: none; }
.ls-hero .ls-screen.is-sound .ls-sound { border-color: rgba(245, 210, 122, .62); color: #F5D27A; }
.ls-hero .ls-screen.is-idle .ls-sound, .ls-hero .ls-screen.is-idle .ls-play { display: none; }
.ls-hero .ls-screen.is-error .ls-ctl, .ls-hero .ls-screen.is-error .ls-start { display: none; }
.ls-hero:not(.ls-hazir) .ls-ctl, .ls-hero:not(.ls-hazir) .ls-start { display: none; }   /* hero.js çalışınca görünür (.ls-hazir); <head>'deki 2,5 sn'lik 'js' zamanlayıcısına bağlı değil */
.ls-hero .ls-lang {
  position: absolute; right: 12px; bottom: 12px; pointer-events: auto;
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
  background: rgba(7, 8, 11, .72); border: 1px solid rgba(255, 255, 255, .14); color: #D5DAE3;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
html[lang="tr"] .ls-hero [data-dil="ceviri"] { display: none; }

/* oynatılmayı bekleyen afiş: belirgin oynat düğmesi (sağda, robotun üstünde; soldaki kanca sorusu açık kalır) */
.ls-hero .ls-start {
  position: absolute; z-index: 3; left: 67%; top: 47%; transform: translate(-50%, -50%); max-width: 60%;
  display: inline-flex; align-items: center; gap: 14px; padding: 9px 22px 9px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(7, 8, 11, .8); color: #F2F2F2; text-align: left;
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .9); transition: background .2s, border-color .2s;
}
.ls-hero .ls-start[hidden] { display: none; }
.ls-hero .ls-start:hover { background: rgba(20, 22, 28, .92); border-color: rgba(245, 210, 122, .5); }
.ls-hero .ls-start-ic {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #F7D987 0%, #E8BC57 46%, #C8962F 100%); color: #1A1406;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -10px rgba(226, 179, 74, .8);
}
.ls-hero .ls-start-ic svg { width: 22px; height: 22px; margin-left: 3px; }
.ls-hero .ls-start-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ls-hero .ls-start .ls-lbl { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.ls-hero .ls-start small { font-size: 12px; line-height: 1.25; color: #C4CAD6; text-wrap: balance; }

/* ---------- istatistik kartları: ekrana bağlı (altında ortalı çift; geniş ekranda iki yanında, ışığın içinde) ---------- */
.ls-hero .ls-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(100%, 720px); }
.ls-hero .float-card {
  position: relative; inset: auto; width: 100%; max-width: none; margin: 0; padding: 15px 16px 9px; border-radius: 16px;
  animation: none; transform: none;
  background: linear-gradient(180deg, rgba(19, 21, 27, .95) 0%, rgba(9, 10, 14, .97) 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -1px 0 0 rgba(var(--ls-core), .14), 0 26px 50px -30px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ls-hero .float-card::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--ls-core), 0), rgba(var(--ls-core), .5) 50%, rgba(var(--ls-core), 0));
}
.ls-hero .float-card .fc-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; gap: 10px; min-height: 28px; }
/* etiket her kartta "TULPAR ALGO TRADE BOT ·" / "Backtest | Gerçek hesap" diye aynı yerden kırılır */
.ls-hero .float-card .fc-tkr-label { max-width: 15.3em; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.35; color: var(--muted); white-space: normal; overflow: visible; text-overflow: clip; }
.ls-hero .float-card .fc-tkr { flex: none; padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; color: var(--text-2); }
.ls-hero .float-card .fc-price-row { margin-top: 9px; flex-direction: column; align-items: flex-start; gap: 5px; }
.ls-hero .float-card .fc-price { font-size: 21px; letter-spacing: -.015em; }
.ls-hero .float-card .fc-delta { font-size: 11px; font-weight: 700; }
.ls-hero .float-card .fc-chart-wrap { margin-top: 10px; }
.ls-hero .float-card .fc-chart { height: 46px; }
.ls-hero .float-card .fc-foot { margin-top: 8px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .07); }
.ls-hero .float-card .fc-periods { min-height: 24px; }   /* site.js düğmeleri sonradan ekler: yer baştan ayrılı */
.ls-hero .float-card .fc-periods button { padding: 5px 0; border-radius: 6px; font-size: 9.5px; letter-spacing: .02em; color: rgba(242, 242, 242, .52); }
.ls-hero .float-card .fc-periods button:hover { color: #F2F2F2; }
.ls-hero .float-card .fc-periods button[aria-pressed="true"] { color: #F2F2F2; background: rgba(255, 255, 255, .09); }

/* ---------- ≥900 px: ekran genişliği ekran YÜKSEKLİĞİNE göre ----------
   hedef: ilk ekranda videonun ~%60'ı (1366×768'de ≥%55), 1920×1080'de büyük; masaüstünde asla 760 px'ten dar değil
   (videonun kendi yazıları okunur kalsın), en çok 1120 px (= sayfa ızgarasının içerik genişliği).
   Formül: (91vh − menü − ~340 px metin) × 16/9 ÷ 0,6 */
@media (min-width: 900px) {
  .ls-hero { --ls-w: clamp(760px, calc((91vh - var(--ls-ust) - 340px) * 2.963), var(--ls-maks)); }
  .ls-hero .ls-screen { width: min(100%, var(--ls-w)); }
  @supports (width: round(up, 10px, 16px)) {
    .ls-hero .ls-screen { width: min(100%, round(up, var(--ls-w), 16px)); }   /* 16 px'in katı: yükseklik tam piksel */
  }
}
/* ---------- ≥1680 px: yer varsa kartlar ekranın iki yanında, ekrana 28 px, ışığın içinde ----------
   Üçlü (kart + ekran + kart) en çok .ls-show'un içerik kutusu kadar geniştir: min(100%, 1840 px) − 2 × kenar boşluğu.
   Bu, üst menü satırıyla aynı ızgaradır (hizalama.css 9b: .navrow en çok 1840 px): yer yettiğinde kartların dış
   kenarı logonun sol kenarı ve sağ grubun sağ kenarıyla aynı hizada. Ekran yüksekliği yetmezse üçlü daralır, ortada kalır. */
@media (min-width: 1680px) {
  .ls-hero { --ls-w: clamp(760px, calc((91vh - var(--ls-ust) - 340px) * 2.963), 1200px); }
  .ls-hero .ls-show { grid-template-columns: var(--ls-card) min(var(--ls-w), calc(100% - 2 * var(--ls-card) - 56px)) var(--ls-card); justify-content: center; align-items: center; column-gap: 28px; }
  @supports (width: round(down, 10px, 16px)) {
    .ls-hero .ls-show { grid-template-columns: var(--ls-card) round(down, min(var(--ls-w), calc(100% - 2 * var(--ls-card) - 56px)), 16px) var(--ls-card); }
  }
  .ls-hero .ls-stats { display: contents; }
  .ls-hero .ls-screen { grid-column: 2; grid-row: 1; width: 100%; }
  .ls-hero .ls-stats > .fc-a { grid-column: 1; grid-row: 1; }
  .ls-hero .ls-stats > .fc-b { grid-column: 3; grid-row: 1; }
  .ls-hero .ls-screen::after { left: -52%; right: -52%; }                       /* havuz kartların altına da uzanır */
  /* sahne yıkaması: huzmenin aşağıda genişleyen kısmı kartları da aydınlatır (durağan, kutunun içinde söner) */
  .ls-hero .ls-show::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: -6%; bottom: 0;
    background: radial-gradient(closest-side, rgba(var(--ls-warm), .055), rgba(var(--ls-warm), .02) 62%, rgba(var(--ls-warm), 0));
  }
}

/* ---------- <900 px: tek sütun ---------- */
@media (max-width: 899.98px) {
  .ls-hero { --ls-radius: 12px; }
  .ls-hero h1 { font-size: clamp(34px, 6.4vw, 52px); }
  .ls-hero h1 .h1-pre { font-size: .54em; }
  .ls-hero .hero-ctas { order: 4; }   /* mobilde: videonun/kartların altına iner */
}
/* ---------- <768 px: kontroller resmin DIŞINDA, ekranın altında ortada ---------- */
@media (max-width: 767.98px) {
  .ls-hero .ls-bar { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 12px; }
  .ls-hero .ls-ctl { position: static; justify-content: center; }
  .ls-hero .ls-lang { position: static; order: 2; height: 22px; font-size: 11px; }
  .ls-hero .ls-btn { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); }
  .ls-hero .ls-btn:hover { background: rgba(255, 255, 255, .1); }
  .ls-hero .ls-lang { background: transparent; border-color: rgba(255, 255, 255, .14); color: var(--ls-note); }
  .ls-hero .ls-screen::after { top: 70%; height: 26%; }
}
@media (max-width: 600px) {
  .ls-hero { --ls-ust: var(--fh-ust-h, 150px); --ls-top-gap: 22px; --ls-gap: 28px; --ls-radius: 10px; padding-bottom: 36px; }
  .ls-hero h1 { font-size: clamp(32px, 9.6vw, 42px); line-height: 1.05; }
  .ls-hero h1 .h1-pre { font-size: .58em; margin-bottom: .3em; }
  .ls-hero .lead { font-size: 15px; line-height: 1.62; }
  .ls-hero .hero-ctas .btn { height: 52px; padding: 0 22px; font-size: 14.5px; }
  .ls-hero .cta-note { font-size: 12px; }
  .ls-hero .ls-btn { height: 40px; padding: 0 14px 0 11px; font-size: 12.5px; }   /* parmak hedefi */
  .ls-hero .ls-play { width: 40px; padding: 0; }
  .ls-hero .ls-show { row-gap: 18px; }
  .ls-hero .ls-stats { gap: 10px; }
  /* telefonda oynat düğmesi: sağda, dikey ortada; kanca sorusunu (sol, %4–37) ve risk kutusunu (sol alt, %4–42)
     örtmez; uzun çeviri alt satıra iner */
  .ls-hero .ls-start { left: auto; right: 3.5%; top: 50%; bottom: auto; transform: translateY(-50%); max-width: 54%; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 26px; }
  .ls-hero .ls-start-ic { width: 38px; height: 38px; }
  .ls-hero .ls-start-ic svg { width: 17px; height: 17px; }
  .ls-hero .ls-start .ls-lbl { font-size: 13px; }
  .ls-hero .ls-start small { font-size: 10.5px; }
}
/* büyük ekran düğmesi dar çerçevede simgeye iner (adı ekran okuyucuda kalır) */
@media (max-width: 767.98px) and (min-width: 601px), (max-width: 419.98px) {
  .ls-hero .ls-big { width: 40px; padding: 0; }
  .ls-hero .ls-big .ls-lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 519.98px) {
  .ls-hero .ls-stats { grid-template-columns: minmax(0, 1fr); width: min(100%, 420px); }
  /* iki çağrı alt alta, tam genişlik: çevirilerde uzayan etiketler de tek satırda kalır */
  .ls-hero .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; gap: 10px; }
  .ls-hero .hero-ctas .btn { width: 100%; }
}

/* ---------- açık tema: sayfanın geri kalanıyla aynı açık, nötr zemin; ışık yalnızca hafif ---------- */
[data-theme="light"] .ls-hero { --ls-warm: 255, 246, 230; --ls-core: 250, 226, 178; --ls-dim: #5F6673; --ls-lead: #3F4654; --ls-note: #5A616E; }
[data-theme="light"] .ls-hero .ls-screen::after { background: radial-gradient(closest-side, rgba(20, 22, 28, .16), rgba(20, 22, 28, .05) 58%, rgba(20, 22, 28, 0)); }
[data-theme="light"] .ls-hero .ls-tilt::after { background: radial-gradient(50% 100% at 50% 100%, rgba(255, 236, 196, .55), rgba(255, 236, 196, 0)); }
[data-theme="light"] .ls-hero .ls-frame { box-shadow: 0 0 0 1px rgba(10, 12, 16, .55), 0 28px 60px -34px rgba(20, 18, 14, .5); }
[data-theme="light"] .ls-hero .hero-ctas .btn-ghost { background: rgba(255, 255, 255, .85); color: #14171F; border-color: rgba(20, 23, 31, .22); box-shadow: 0 8px 22px -16px rgba(20, 23, 31, .35); }
[data-theme="light"] .ls-hero .hero-ctas .btn-ghost:hover { background: #FFFFFF; border-color: rgba(20, 23, 31, .4); }
[data-theme="light"] .ls-hero .float-card { --emerald-l: #7FDDB0; box-shadow: 0 0 0 1px rgba(10, 12, 16, .35), 0 24px 46px -28px rgba(20, 18, 14, .55); }
@media (max-width: 767.98px) {   /* telefonda kontroller açık zeminde */
  [data-theme="light"] .ls-hero .ls-btn { background: #FFFFFF; color: #14171F; border-color: rgba(20, 23, 31, .2); }
  [data-theme="light"] .ls-hero .ls-btn:hover { background: #F4F4F5; }
  [data-theme="light"] .ls-hero .ls-screen.is-sound .ls-sound { color: #8E6A24; border-color: rgba(142, 106, 36, .55); }
  [data-theme="light"] .ls-hero .ls-btn:focus-visible { outline-color: #8E6A24; }
  [data-theme="light"] .ls-hero .ls-lang { color: #5A616E; border-color: rgba(20, 23, 31, .16); }
}

/* ---------- hareket azaltma: eğim yok, geçiş yok ---------- */
@media (prefers-reduced-motion: reduce) {
  .ls-hero .ls-tilt { animation: none !important; transform: none !important; }
  .ls-hero .ls-frame > .ls-video { transition: none; }
}

/* ======================= .ls-hero kökü DIŞINDAKİ bilinçli kurallar ======================= */
/* "Büyük ekranda izle" yedeği: tam ekran yoksa aynı video #videoModal'a taşınır (ikinci indirme yok) */
.video-modal .video-frame > .ls-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 85vh; object-fit: contain; }
[data-theme="light"] .video-modal { --text: #F2F2F2; }   /* kapatma simgesi koyu fonda görünür kalsın */
/* telefonda ilk ziyaret: çerez notu sabit üst menünün (risk satırı + menü) hemen altında; risk satırını, logoyu,
   menü düğmesini, hero çağrılarını ve videoyu örtmez (not kapanana dek yalnız başlığı örter). Dil öneri çubuğu varsa
   --dil-oneri-h kadar aşağı iner (dil.css; i18n.js notu_kaydir çakışma görmez). Menü ya da dil listesi açıkken not
   üst menünün (z-index 50) altına iner, açılan liste örtülmez. */
@media (max-width: 600px) {
  body:has(.ls-hero) .cookie-note { top: calc(var(--dil-oneri-h, 0px) + var(--fh-ust-h, 150px) + 8px); bottom: auto; transform: translateY(-12px); }
  body:has(.ls-hero) .cookie-note.show { transform: translateY(0); }
  body:has(.ls-hero):has(.nav.open, .nav .dil-secici[open]) .cookie-note { z-index: 40; }
}