/* ============================================================================
   Gates of Bet — Bonus Talep · Tasarım Sistemi (marka kiti)
   Renkler canlı siteden birebir: yeşil #6e560f / parlak #f8cf2c, koyu #05070a.
   Altın (#e6b34d) logodaki zardan — premium vurgu için ölçülü kullanılır.
   ========================================================================== */

:root {
    /* Marka yeşilleri */
    --brand:         #d9a91a;   /* ana aksiyon yeşili (CTA) */
    --brand-bright:  #f8cf2c;   /* parlak vurgu / glow */
    --brand-deep:    #6e560f;   /* marka koyu yeşil */
    --brand-deeper:  #4a3a0a;

    /* Altın (ikincil premium vurgu) */
    --gold:          #e6b34d;
    --gold-bright:   #ffd479;
    --gold-deep:     #b8863a;

    /* Yüzeyler */
    --bg:            #05070a;
    --bg-soft:       #080b11;
    --panel:         #0d1219;
    --panel-2:       #111a25;
    --panel-3:       #16212f;
    --field:         #050810;
    --line:          #1f2937;
    --line-soft:     #172030;
    --line-strong:   #2b3546;

    /* Metin */
    --text:          #eaf2f8;
    --text-2:        #9fb2c6;
    --text-3:        #62748b;
    --text-on-brand: #1c1502;

    /* Anlamsal */
    --ok:            #23c368;
    --ok-bg:         rgba(35,195,104,.12);
    --warn:          #f5a623;
    --warn-bg:       rgba(245,166,35,.12);
    --err:           #ef4d4d;
    --err-bg:        rgba(239,77,77,.12);
    --info:          #3ec3ff;

    /* Efekt / geometri */
    --glow:          0 0 44px rgba(217,169,26,.16);
    --glow-strong:   0 0 60px rgba(248,207,44,.24);
    --shadow:        0 24px 60px -22px rgba(0,0,0,.75);
    --shadow-card:   0 12px 34px -18px rgba(0,0,0,.7);
    --radius:        18px;
    --radius-sm:     11px;
    --radius-xs:     8px;
    --radius-lg:     24px;
    --radius-pill:   999px;

    --ease:          cubic-bezier(.22,.61,.36,1);
    --ease-out:      cubic-bezier(.16,1,.3,1);
    --dur:           .42s;

    --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --display:       'Sora', var(--font);

    --maxw:          600px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* Ambient marka arka planı — radyal yeşil ışıma + ince dokusu */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -2;
    background:
        radial-gradient(1100px 620px at 50% -8%, rgba(110,86,15,.30), transparent 60%),
        radial-gradient(900px 700px at 108% 12%, rgba(248,207,44,.08), transparent 55%),
        radial-gradient(760px 620px at -8% 92%, rgba(110,86,15,.12), transparent 55%),
        var(--bg);
}
body::after {
    content: '';
    position: fixed; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
            mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; line-height: 1.18; }

a { color: var(--brand-bright); text-decoration: none; }

::selection { background: rgba(248,207,44,.28); color: #fff; }

:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; border-radius: 6px; }

/* İnce scrollbar */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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