/* ==========================================================================
   Betofbet Mobil Uygulama — ortak stil
   Dört sayfa bunu paylaşır; servis işçisi önbelleğe aldığı için sayfalar
   arası geçiş anında olur. Dış kaynak yok: yazı tipi sistemden, arka plan
   ve tüm ikonlar CSS/SVG.
   ========================================================================== */

:root{
  --neon:#00E676;
  --neon-koyu:#00b25c;
  --kirmizi:#ff3d55;
  --beyaz:#ffffff;
  --gri:#9db3a6;
  --zemin-1:#04150d;
  --zemin-2:#020b07;
  --panel:rgba(6,26,17,.72);
  --cizgi:rgba(0,230,118,.22);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--beyaz);
  background:var(--zemin-2);
  display:flex;flex-direction:column;align-items:center;
  padding:26px 18px calc(26px + env(safe-area-inset-bottom));
  min-height:100%;
  overflow-x:hidden;
  line-height:1.5;
}

/* Zemin tamamen CSS: koyu yeşil-siyah gradyan + iki yumuşak ışık odağı.
   Görsel yüklenmediği için ilk boyanma anında oluyor. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 620px at 50% -12%, #0b3a24 0%, transparent 62%),
    radial-gradient(760px 520px at 92% 108%, #072b1b 0%, transparent 64%),
    linear-gradient(170deg, var(--zemin-1) 0%, var(--zemin-2) 62%, #000 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.33;
  background-image:
    linear-gradient(rgba(0,230,118,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,230,118,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 28%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 28%, #000 0%, transparent 78%);
}

.sarmal{width:100%;max-width:440px;display:flex;flex-direction:column;
  align-items:center;flex:1}

/* ---------- logo ---------- */
header{text-align:center;margin-bottom:26px}
#logo{
  width:182px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));
}
/* Yazı logosu YEDEK: yalnızca görsel yüklenemezse görünür. Varsayılan
   gizli — logo varken kısa süreliğine yanlış marka görünmesin. */
.yazi-logo{
  display:none;
  font-size:27px;font-weight:800;letter-spacing:.055em;
  background:linear-gradient(92deg,var(--beyaz) 12%,var(--neon) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.yazi-logo.gorunur{display:block}

/* ---------- metin ---------- */
h1{
  font-size:clamp(23px,6.4vw,30px);font-weight:900;line-height:1.22;
  text-align:center;letter-spacing:-.012em;margin-bottom:14px;
  background:linear-gradient(96deg,var(--beyaz) 10%,var(--neon) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.alt-yazi{
  text-align:center;font-size:15px;color:var(--gri);
  max-width:360px;margin:0 auto 30px;
}

/* ---------- butonlar ---------- */
.buton{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  border:0;border-radius:14px;padding:17px 18px;margin-bottom:14px;
  font-size:15.5px;font-weight:800;letter-spacing:.01em;cursor:pointer;
  font-family:inherit;text-decoration:none;text-align:center;
  transition:transform .12s,filter .12s;
}
.buton:active{transform:scale(.985)}
.buton svg{width:22px;height:22px;flex:none}

.buton-birincil{
  background:linear-gradient(96deg,var(--neon) 0%,var(--neon-koyu) 100%);
  color:#01180d;box-shadow:0 8px 28px rgba(0,230,118,.32);
}
.buton-birincil:hover{filter:brightness(1.07)}
.buton-birincil svg{fill:#01180d}

.buton-ikincil{
  background:var(--panel);color:var(--beyaz);
  border:1.5px solid var(--cizgi);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.buton-ikincil svg{fill:var(--beyaz)}
.buton-ikincil:hover{border-color:var(--neon)}

/* ---------- uyarı ---------- */
.uyari{
  width:100%;margin-top:4px;padding:14px 16px;border-radius:12px;
  background:rgba(255,61,85,.11);border:1px solid rgba(255,61,85,.32);
  color:#ffd9de;font-size:14px;text-align:center;
  display:none;animation:belir .28s ease both;
}
.uyari.gorunur{display:block}
@keyframes belir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- adım listesi (rehberler) ---------- */
.adimlar{width:100%;list-style:none;counter-reset:adim}
.adim{
  position:relative;counter-increment:adim;
  background:var(--panel);border:1px solid var(--cizgi);border-radius:14px;
  padding:18px 18px 18px 62px;margin-bottom:13px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.adim::before{
  content:counter(adim);
  position:absolute;left:16px;top:16px;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(96deg,var(--neon),var(--neon-koyu));
  color:#01180d;font-weight:900;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.adim b{display:block;font-size:15.5px;margin-bottom:5px;color:var(--beyaz)}
.adim span{font-size:14px;color:var(--gri);display:block}
/* Adım içindeki arayüz simgesi (paylaş ikonu, üç nokta vb.) */
.simge{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;vertical-align:-5px;margin:0 2px;
  border-radius:5px;background:rgba(0,230,118,.14);
}
.simge svg{width:14px;height:14px;fill:var(--neon)}

/* ---------- adım görseli: telefon çizimi ----------
   Dış görsel yok, tamamı SVG. Üç adım boyunca aynı telefon çerçevesi
   korunur, yalnızca ekran içeriği değişir - akış bir çizgi film gibi
   okunsun diye. */
.telefon-sarmal{
  display:flex;justify-content:center;margin:0 0 16px;
}
.telefon-sarmal svg{
  width:100%;max-width:172px;height:auto;display:block;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));
}

.tel-govde{fill:#08160f}
.tel-ekran{fill:#0d2318}
.tel-panel{fill:#0a1f15;stroke:rgba(0,230,118,.28);stroke-width:1}
.tel-metin{fill:#3d5c4c}
.tel-metin-2{fill:#284839}
.tel-yazi{fill:var(--beyaz);font-size:7.5px;font-weight:700;font-family:inherit}
.tel-yazi-soluk{fill:var(--gri);font-size:6.5px;font-family:inherit}

/* Vurgulanan öğe: parlak yeşil dolgu + üzerindeki ikon koyu (kontrast). */
.tel-vurgu-bg{fill:var(--neon)}
.tel-vurgu-ikon{fill:#01180d}
.tel-vurgu-satir{fill:rgba(0,230,118,.16);stroke:var(--neon);stroke-width:1}

/* "Buraya bak" halkası - nabız gibi genişleyip kaybolur. */
.tel-halka{
  fill:none;stroke:var(--neon);stroke-width:2;
  transform-box:fill-box;transform-origin:center;
  animation:tel-nabiz 1.8s ease-out infinite;
}
@keyframes tel-nabiz{
  0%{opacity:.95;transform:scale(.8)}
  70%{opacity:0;transform:scale(1.45)}
  100%{opacity:0;transform:scale(1.45)}
}

/* Ok / üçgen gösterge - vurgulanan ögeye isaret eder. */
.tel-ok{fill:var(--neon)}

/* ---------- bilgi kutusu ---------- */
.bilgi{
  width:100%;margin-top:6px;padding:14px 16px;border-radius:12px;
  background:rgba(0,230,118,.07);border:1px solid var(--cizgi);
  font-size:13.5px;color:#cfe9db;line-height:1.55;
}
.bilgi b{color:var(--neon)}

/* Vurgulu uyari: adimlardan ONCE gosterilen "once uygulamayi ac" notu.
   Sade .bilgi'den daha dogru gorunmesi kasitli - sayfadaki en onemli
   yonlendirme burasi. Kullanici adimlari gormeden bu kutuyu gormeli. */
.bilgi-vurgu{
  width:100%;margin-bottom:18px;padding:16px 18px;border-radius:14px;
  background:rgba(0,230,118,.1);border:1.5px solid rgba(0,230,118,.4);
  font-size:14px;color:var(--beyaz);line-height:1.55;
  box-shadow:0 0 0 1px rgba(0,230,118,.08) inset;
}
.bilgi-vurgu b{color:var(--neon)}

/* ---------- yüklemeden devam linki ----------
   Kasıtlı olarak sade: asıl eylem kurulum, bu yalnızca çıkış yolu.
   Cihaz uygun değilse (masaüstü) tek yol bu olduğu için vurgusu artar. */
.devam-link{
  margin-top:18px;display:inline-flex;align-items:center;gap:5px;
  font-size:14px;color:var(--gri);text-decoration:none;
  padding:8px 4px;transition:color .14s;
}
.devam-link svg{width:15px;height:15px;flex:none}
.devam-link:hover{color:var(--neon)}
.devam-link.one-cikar{
  color:var(--neon);font-weight:700;
  border:1.5px solid var(--cizgi);border-radius:12px;padding:13px 20px;
}
.devam-link.one-cikar:hover{border-color:var(--neon)}

/* ---------- geri linki ---------- */
.geri{
  margin-top:22px;font-size:14px;color:var(--gri);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.geri:hover{color:var(--neon)}

/* ---------- alt bilgi ---------- */
footer{
  margin-top:auto;padding-top:32px;text-align:center;font-size:11.5px;
  color:#5f7a6c;line-height:1.75;
}
.yas-rozet{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(255,61,85,.5);color:var(--kirmizi);
  border-radius:999px;padding:3px 11px;font-weight:800;font-size:11px;
  margin-bottom:8px;
}
footer a{color:var(--gri);text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:var(--neon)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}