/* Betovis landing — ortak belirteçler. Değerler canlı siteden ölçüldü (DESIGN.md). */
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(../assets/fonts/Montserrat-Regular.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(../assets/fonts/Montserrat-Medium.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(../assets/fonts/Montserrat-SemiBold.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(../assets/fonts/Montserrat-Bold.woff2) format("woff2")}

:root{
  --kirmizi:#FE1101;
  --kirmizi-a8:rgba(254,17,1,.8);
  --kirmizi-a5:rgba(254,17,1,.5);
  --kirmizi-a2:rgba(254,17,1,.2);
  --kirmizi-glow:0 0 4px #FE1101,0 0 8px rgba(254,17,1,.8),0 0 14px rgba(254,17,1,.5);
  --halka-1:#E81838;--halka-2:#D81030;--halka-3:#A80820;--halka-4:#980018;
  --taban:#050910;--yuzey:#14181C;--yuzey-2:#1E2227;
  --k1:rgba(255,255,255,.04);--k2:rgba(255,255,255,.08);--k3:rgba(255,255,255,.15);
  --cizgi:rgba(255,255,255,.12);
  --metin:#fff;--metin-9:rgba(255,255,255,.9);--metin-7:rgba(255,255,255,.7);
  --metin-6:rgba(255,255,255,.64);--metin-5:rgba(255,255,255,.5);--metin-4:rgba(255,255,255,.4);
  --basari:#069361;--uyari:#FFAD29;
  --r:4px;--r-m:8px;--r-l:16px;--r-hap:999px;
  --gecis:.24s;
  --ease-cik:cubic-bezier(.16,1,.3,1);
  --ust-h:64px;
  --kenar:clamp(20px,5vw,72px);
  --icerik:1328px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--taban);color:var(--metin);font-family:Montserrat,sans-serif;font-weight:400;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--kirmizi);color:#fff}
:focus-visible{outline:2px solid var(--kirmizi);outline-offset:3px}

/* Tipografi ölçeği — başlıklar sitedeki gibi UPPERCASE */
.ust-baslik{font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:.95}
.dev{font-size:clamp(48px,9.5vw,152px)}
.buyuk{font-size:clamp(36px,6vw,88px)}
.orta{font-size:clamp(26px,3.6vw,48px)}
.etiket{font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--metin-6)}
.kirmizi{color:var(--kirmizi)}
.soluk{color:var(--metin-6)}
.kap{width:min(100% - 2*var(--kenar),var(--icerik));margin-inline:auto}

/* Butonlar — sitedeki .btn DNA'sı: düz kırmızı, 4px, 500, UPPERCASE; landing ölçeği */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;
  background:var(--kirmizi);color:#fff;border-radius:var(--r);font-weight:500;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;transition:transform var(--gecis),box-shadow var(--gecis),background var(--gecis);
  -webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--kayit{box-shadow:var(--kirmizi-glow)}
.btn--kayit:hover{box-shadow:0 0 6px #FE1101,0 0 14px rgba(254,17,1,.8),0 0 28px rgba(254,17,1,.5)}
.btn--hayalet{background:var(--k2);box-shadow:inset 0 0 0 1px var(--cizgi)}
.btn--hayalet:hover{background:var(--k3)}
.btn--buyuk{min-height:56px;padding:0 34px;font-size:15px}
.btn--kucuk{min-height:32px;padding:0 14px;font-size:12px}

/* Toast — native alert yerine (kural). toast.js yönetir. */
.toast-kok{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  z-index:1000;display:grid;gap:8px;pointer-events:none;width:min(92vw,420px)}
.toast{background:var(--yuzey);border-left:3px solid var(--kirmizi);border-radius:var(--r);padding:14px 18px;
  font-size:14px;color:var(--metin-9);box-shadow:0 12px 40px rgba(0,0,0,.5);pointer-events:auto;
  animation:toast-gir .4s var(--ease-cik) both}
.toast b{color:#fff;font-weight:600}
.toast.cikiyor{animation:toast-cik .3s ease both}
@keyframes toast-gir{from{opacity:0;transform:translateY(16px)}}
@keyframes toast-cik{to{opacity:0;transform:translateY(8px)}}

.gizli-okuyucu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Film greni: fotoğrafların üstünde tek katman, gerçek baskı hissi */
.gren::after{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.07;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gren .9s steps(4) infinite}
@keyframes gren{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
/* telefonda gren durağan: 2x ekranlık katmanı her karede kaydırmak GPU'yu yorar */
@media (pointer:coarse),(max-width:760px){.gren::after{inset:0;animation:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .gren::after{display:none}
}

/* Çapa/scrollIntoView ile gelen bölümler sabit header altında kalmasın */
main > section { scroll-margin-top: var(--ust-h); }