/* ============================================================
   casibow-app.css — Casibow mobil PWA tanıtım/kurulum sayfası

   YAPI betesbet-app'ten geliyor (aynı akış: hero + kurulum adımları +
   iOS modalı), GÖRSEL DİL ise bilerek ayrıştırıldı — iki uygulama
   birbirinin kopyası görünmesin diye:

     betesbet          casibow
     -------------     ----------------------------------------
     Archivo + Inter   Rubik (kumarhanenin kendi yazı tipi, tek aile)
     8/14/22/30        6/10/14/18  (daha keskin köşeler)
     altın degrade     düz renk
     yeşil/altın hale  nötr gölge + 1px kenarlık

   Ayrışma keyfi değil: Casibow'un zaten seçilmiş tasarım yönü
   "düz renkli, degradesiz, neonsuz". Derinlik renkle değil yüzey
   tonu ve kenarlıkla kuruluyor.

   Kalan tek degrade telefon maketindeki cam yansıması — o DEKORATİF
   DEĞİL İŞLEVSEL: maketin gerçek bir cihaz gibi okunmasını sağlıyor.

   iOS'a özel "Ana Ekrana Ekle" modalı (bkz. .iossheet) hero'daki
   butona dokununca açılır.
   ============================================================ */

:root{
  --ink:#050807; --surface:#0A110E; --card:#121B18; --raised:#18231F; --raised-2:#1D2B25;
  --brand:#00D968; --brand-bright:#00F078; --brand-light:#4DE894; --brand-deep:#00A64F; --on-brand:#050807;
  --cream:#F1F5F3; --body:rgba(241,245,243,.80); --muted:#8D9A94; --faint:#55635C;
  --line:rgba(0,217,104,.25); --line-soft:rgba(0,217,104,.12); --line-strong:rgba(0,217,104,.5);
  --success:#34D399;
  --r1:6px; --r2:10px; --r3:14px; --r4:18px; --rpill:999px;
  --grad-brand:var(--brand);
  --grad-card:var(--card);
  --shadow-brand:0 8px 22px rgba(0,0,0,.42);
  --shadow-panel:0 18px 46px rgba(0,0,0,.55);
  --font-d:'Rubik',-apple-system,'Segoe UI',sans-serif;
  --font-b:'Rubik',-apple-system,'Segoe UI',sans-serif;
  --nav-h:60px;
}

/* ---- reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--body);font-family:var(--font-b);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--font-d);color:var(--cream);text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:rgba(0,217,104,.32);color:var(--cream)}
[hidden]{display:none!important}
.ic{width:1em;height:1em;display:inline-block;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,40px);background:rgba(8,7,5,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.brand{display:block;height:24px;width:auto}
.nav__back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:600}
.nav__back:hover{color:var(--brand-light)}

/* ---- shared: eyebrow / bullets / buttons / badges ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--brand-light);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.eyebrow::before{content:"";width:14px;height:2px;border-radius:var(--rpill);background:var(--brand)}
.bullets{display:flex;flex-direction:column;gap:11px}
.bullets li{display:flex;align-items:flex-start;gap:10px;color:var(--body);font-size:14px}
.bullets .ic{color:var(--brand);margin-top:.2em;flex:0 0 16px;width:16px;height:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border-radius:var(--r2);font-family:var(--font-b);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:filter .2s,transform .2s,box-shadow .2s,border-color .2s;border:1px solid transparent}
.btn--brand{background:var(--brand);color:var(--on-brand);border-color:var(--line-strong);box-shadow:var(--shadow-brand)}
.btn--brand:hover{background:var(--brand-bright);transform:translateY(-1px)}
.btn--brand:active{transform:translateY(0)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--brand-light)}
.btn--ghost:hover{background:rgba(0,217,104,.08);color:var(--brand-bright)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}

.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:var(--rpill);color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em}
.badge i{width:5px;height:5px;border-radius:50%;background:var(--success);flex:0 0 5px}

.fallback-note{margin-top:10px;color:var(--faint);font-size:12px;max-width:38ch}

/* ---- shared: phone mockup ---- */
.phone-slot{display:flex}
.phone{position:relative;width:20em;aspect-ratio:20/36.38;font-size:12px;border-radius:2.6em;background:var(--raised);border:1px solid var(--line-strong);box-shadow:var(--shadow-panel),inset 0 1px 0 rgba(255,255,255,.06);padding:.5em}
.phone--sm{font-size:9px}
/* cam parlaması — sol üstten süzülen hafif ışık, ekranın gerçek cihaz
   fotoğrafı gibi durmasını sağlıyor */
.phone::after{content:"";position:absolute;inset:0;border-radius:2.6em;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 24%,transparent 42%)}
.phone__notch{position:absolute;top:.5em;left:50%;transform:translateX(-50%);width:34%;height:.6em;border-radius:var(--rpill);background:var(--ink);z-index:3}
.phone__screen{position:relative;width:100%;height:100%;border-radius:2.1em;overflow:hidden;background:var(--ink);display:flex;flex-direction:column}
/* gerçek ekran görüntüsü modu — çentiğin bindiği üst şeritte ink boşluk */
.phone__screen--shot{padding-top:1.5em}
.phone__screen--shot img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border-radius:0 0 2.1em 2.1em}

/* ---- shared: QR chip (qr.png ŞU AN YER TUTUCU — alan adı belli olunca
       o alana giden gerçek kod konacak) ---- */
.qr{display:inline-flex;align-items:center;justify-content:center;width:3.6em;height:3.6em;flex:0 0 3.6em;border-radius:.65em;background:var(--cream);color:var(--ink);padding:.3em;overflow:hidden}
.qr img{width:100%;height:100%;display:block;border-radius:.35em;image-rendering:-webkit-optimize-contrast}
.qr-chip{display:flex;align-items:center;gap:10px}
.qr-chip__tx b{display:block;color:var(--cream);font-size:12.5px;font-weight:700}
.qr-chip__tx span{display:block;color:var(--faint);font-size:11px}

/* ---- hero (konsept: gece vitrini) ---- */
.hero{position:relative;overflow:hidden;padding:clamp(3.4rem,5vw + 1rem,6rem) 0 clamp(3rem,4vw,5rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:none}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero__title{font-size:clamp(2.1rem,1.35rem + 2.9vw,3.5rem);font-weight:800;line-height:1.06;letter-spacing:-.01em;margin-bottom:16px}
.hero__sub{max-width:46ch;font-size:15px;color:var(--body);margin-bottom:26px}
.hero__bullets{margin-bottom:30px}
.hero__cta{margin-bottom:26px;min-height:50px}
.hero__phonewrap{position:relative;display:flex;justify-content:center}
.hero .phone{box-shadow:var(--shadow-panel),inset 0 1px 0 rgba(255,255,255,.06)}
.hero__sticker{position:absolute;right:2%;bottom:-6%;background:var(--grad-card);border:1px solid var(--line-strong);border-radius:var(--r2);padding:10px;box-shadow:var(--shadow-panel);transform:rotate(4deg)}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__bullets{display:inline-flex;align-items:flex-start}
  .hero__cta,.badges{justify-content:center}
  .hero__phonewrap{margin-top:16px}
  .hero__sticker{right:-4%}
}

/* ---- features ---- */
.features{padding:clamp(2.6rem,3.5vw,4rem) 0;border-top:1px solid var(--line-soft)}
.features__head{max-width:520px;margin-bottom:30px}
.features__head h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);font-weight:800}
.features__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:20px 18px}
.feature__ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r1);background:rgba(0,217,104,.10);color:var(--brand);margin-bottom:14px}
.feature__ic .ic{width:18px;height:18px}
.feature h3{font-size:14px;font-weight:700;margin-bottom:6px}
.feature p{font-size:12.5px;color:var(--muted);line-height:1.5}
@media (max-width:900px){.features__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.features__grid{grid-template-columns:1fr}}

/* ---- how it works ---- */
.how{padding:clamp(2.8rem,4vw + 1rem,5rem) 0;background:var(--surface);border-top:1px solid var(--line-soft)}
.how__head{text-align:center;max-width:560px;margin:0 auto 36px}
.how__head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);font-weight:800;margin-bottom:10px}
.how__head p{color:var(--body);font-size:14px}
.how__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.how__col{background:var(--grad-card);border:1px solid var(--line);border-radius:var(--r3);padding:26px 24px}
.how__col header{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.how__col header b{font-family:var(--font-d);color:var(--cream);font-size:15px}
.how__col header span{color:var(--faint);font-size:11.5px}
.how__col header svg{width:22px;height:22px;color:var(--brand);flex:0 0 22px}
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:12px}
.step__n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);color:var(--brand-bright);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.step p{font-size:13px;color:var(--body);padding-top:2px}
.step b{color:var(--cream)}
@media (max-width:760px){.how__cols{grid-template-columns:1fr}}

/* ---- standalone splash (yüklü PWA açılışı, index.html'in en tepesindeki
   script tarafından gösterilir). Kendisi bir <a href> — ekranın tamamı
   dokunulabilir, ayrı bir "buton" yok (reklam gibi durmasın diye). ---- */
.splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--ink);padding:24px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.splash:active{transform:scale(.98)}
.splash__mark{height:32px;width:auto}
.splash__spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:bbspin .8s linear infinite}
@keyframes bbspin{to{transform:rotate(360deg)}}
.splash__tx{display:flex;align-items:center;gap:2px;color:var(--body);font-size:14px}
.splash__dots{display:inline-flex;gap:3px}
.splash__dots i{width:3px;height:3px;border-radius:50%;background:var(--brand);animation:bbdot 1.2s ease-in-out infinite}
.splash__dots i:nth-child(2){animation-delay:.15s}
.splash__dots i:nth-child(3){animation-delay:.3s}
@keyframes bbdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.splash__hint{color:var(--faint);font-size:11px;letter-spacing:.06em;text-transform:uppercase;animation:bbhint 2s ease-in-out infinite}
@keyframes bbhint{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.splash__spin,.splash__dots i,.splash__hint{animation:none}}

/* ---- iOS "Ana Ekrana Ekle" modalı — hero'daki butona dokununca açılır
   (kendiliğinden açılmıyor). betroz.app referansı: marka ikonu + isim +
   adım adım kart. ---- */
.sheetback{position:fixed;inset:0;z-index:998;background:rgba(6,5,4,.6)}
.iossheet{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;padding:56px 24px 32px;background:var(--ink);overflow-y:auto}
/* JS'siz/JS başarısız olsa bile çalışan yedek: gerçek bir <a href="#iosSheet">
   dokununca tarayıcı kendiliğinden bunu tetikler, hiçbir script'e bağlı değil. */
#iosSheet:target{display:flex!important}
.iossheet__close{position:absolute;top:16px;right:16px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:16px}
.iossheet__close:hover{color:var(--brand);border-color:var(--line-strong)}
.iossheet__icon{width:72px;height:72px;border-radius:18px;margin:0 auto 14px;box-shadow:var(--shadow-panel)}
.iossheet__name{font-size:20px;font-weight:800;text-align:center;margin-bottom:4px}
.iossheet__tag{color:var(--muted);font-size:13px;text-align:center;margin-bottom:28px}
.iossheet__card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:var(--r4) var(--r4) 0 0;padding:24px 22px;margin-top:auto}
.iossheet__card h3{font-size:16px;font-weight:800;text-align:center;margin-bottom:4px}
.iossheet__cardsub{display:block;color:var(--muted);font-size:12.5px;text-align:center;margin-bottom:20px}
.iossheet__steps{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.iossheet__steps li{display:flex;align-items:flex-start;gap:12px}
.iossheet__steps b{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:rgba(0,217,104,.14);border:1px solid var(--line-strong);color:var(--brand-bright);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.iossheet__steps span{font-size:13.5px;color:var(--body);padding-top:3px;display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.iossheet__steps .ic{color:var(--brand);width:15px;height:15px}
.iossheet__note{font-size:12px;color:var(--faint);text-align:center;line-height:1.6;padding-top:16px;border-top:1px solid var(--line-soft)}

/* ---- bildirim izni modalı — yüklü uygulama açılışında, izin verilmemişse
   çıkar (bkz. casibow-app.js). z-index 10001: splash (9999) örtüsünün
   ÜSTÜNDE olmak ZORUNDA — eskiden 1000'di, standalone açılışta splash
   modalı örtüyordu ve dokunuşlar splash linkine gidiyordu. ---- */
.notifymodal{position:fixed;inset:0;z-index:10001;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 24px;text-align:center;background:var(--ink)}
#notifyModalBack{z-index:10000}
.notifymodal__note{max-width:36ch;color:var(--brand-light);font-size:12.5px;line-height:1.6;border:1px solid var(--line);border-radius:var(--r2);padding:10px 14px}
.notifymodal__ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(0,217,104,.12);border:1px solid var(--line-strong);color:var(--brand);margin-bottom:6px}
.notifymodal__ic .ic{width:24px;height:24px}
.notifymodal__title{font-size:19px;font-weight:800}
.notifymodal__tx{max-width:34ch;color:var(--muted);font-size:13.5px;line-height:1.55;margin-bottom:10px}
.notifymodal__acts{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px}
.notifymodal__acts .btn{width:100%}

/* ---- footer ---- */
.foot{padding:34px 0 44px;border-top:1px solid var(--line-soft)}
.foot__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.foot__brand{display:block;height:18px;width:auto}
.foot__links{display:flex;gap:18px;flex-wrap:wrap}
.foot__links a{color:var(--muted);font-size:12.5px;font-weight:500}
.foot__links a:hover{color:var(--brand-light)}