/* ── GOT BORSASI — MAIN STYLES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:       #1A0E04;
  --surface:  rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.10);
  --border2:  rgba(255,160,60,0.35);
  --acc:      #FF8C00;
  --acc2:     #FFA940;
  --gold:     #FFD166;
  --green:    #06D6A0;
  --red:      #EF476F;
  --white:    #FFF8F0;
  --muted:    rgba(255,248,240,0.55);
  --dim:      rgba(255,248,240,0.28);
  /* Card colours — warm orange glass */
  --card-bg:   rgba(180,80,0,0.22);
  --card-bd:   rgba(255,160,60,0.30);
}

html,body{
  min-height:100vh;overflow-x:hidden;
  background:var(--bg);color:var(--white);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── BACKGROUND ── */
#gb-bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,   rgba(255,140,0,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%,  rgba(255,100,0,0.12) 0%, transparent 60%),
    linear-gradient(170deg,#1E1008 0%,#150C04 50%,#0E0802 100%);
}

/* ── BUTT (PNG hero image, mouse parallax via JS transform) ── */
#gb-butt-wrap{
  position:fixed;bottom:0;left:50%;
  width:min(580px,108vw);
  transform:translateX(-50%);
  z-index:2;pointer-events:none;
  transition:opacity .5s ease;
  will-change:transform;
}
#gb-butt-img{
  width:100%;display:block;
  filter:drop-shadow(0 -6px 60px rgba(255,140,0,.20)) drop-shadow(0 30px 60px rgba(0,0,0,.70));
  animation:gb-idle 5s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes gb-idle{
  0%,100%{transform:translateY(0) rotate(-.5deg);}
  50%{transform:translateY(-14px) rotate(.5deg);}
}
#gb-butt-grad{
  position:fixed;bottom:0;left:50%;
  width:min(580px,108vw);
  /* Match the butt PNG's own rendered height (it's ~1:1 aspect ratio) instead
     of the full viewport — using 100% height here made the gradient's flat
     rgba(21,12,4,...) fill show as a visible rectangular block above the
     image on tall viewports, since the image itself is much shorter than
     100vh. aspect-ratio keeps it locked to the image's real footprint. */
  aspect-ratio: 917 / 937;
  max-height: 100%;
  transform:translateX(-50%);
  z-index:3;pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(21,12,4,.95) 0%,
    rgba(21,12,4,.75) 20%,
    rgba(21,12,4,.40) 42%,
    rgba(21,12,4,.10) 62%,
    transparent       100%
  );
  transition:opacity .5s ease;
}

/* ── SECTIONS ── */
.gb-sec{
  position:relative;z-index:10;
  min-height:100vh;display:none;
  flex-direction:column;align-items:center;
  padding:0 20px 40px;
}
.gb-sec.gb-on{display:flex;}

/* ── HERO ── */
#gb-hero{justify-content:flex-start;padding-top:clamp(44px,8vh,72px);text-align:center;}

.gb-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,140,0,.12);
  border:1px solid rgba(255,140,0,.30);
  border-radius:100px;padding:7px 18px;
  font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--acc2);margin-bottom:32px;
}
.gb-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px var(--green);
  animation:gb-blink 2s ease-in-out infinite;
}
@keyframes gb-blink{0%,100%{opacity:1;}50%{opacity:.2;}}

.gb-title{
  /* IMPORTANT: never use text-transform:uppercase here.
     Anton's glyph table (like many display webfonts) is missing the dotted
     Turkish capitals İ, and the dieresis caps Ö/Ü render inconsistently when
     the browser re-cases lowercase text on the fly. The fix is to always feed
     this element pre-uppercased Turkish text from PHP (already done in
     front-page.php / admin settings) and never transform case in CSS.

     Separately: on some browser/OS combinations, Ç (U+00C7) was rendering as
     a plain C — this is a known class of bug where certain text-rendering
     optimizations or ligature/composition features cause the renderer to
     drop combining diacritics from precomposed Latin-1 Supplement glyphs.
     Explicitly disabling ligatures and resetting font-feature-settings
     forces the browser to use Anton's actual precomposed Ç glyph instead of
     attempting any glyph substitution/composition pass. */
  font-family:'Anton','Arial Black',sans-serif;
  font-size:clamp(56px,15vw,108px);
  color:var(--white);line-height:1.05;
  letter-spacing:.5px;
  margin-bottom:8px;
  text-transform:none;
  font-feature-settings:normal;
  font-variant-ligatures:none;
  text-rendering:optimizeSpeed;
  -webkit-font-feature-settings:normal;
}
.gb-title .gb-hl{
  display:block;
  background:linear-gradient(130deg,var(--gold) 0%,var(--acc) 60%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gb-shimmer 5s linear infinite;background-size:200% auto;
}
@keyframes gb-shimmer{0%{background-position:0% center;}100%{background-position:200% center;}}

.gb-sub{
  font-size:clamp(13px,3.2vw,16px);color:var(--muted);
  font-weight:600;margin:22px 0 42px;
  max-width:320px;line-height:1.7;
}
.gb-spacer{height:clamp(200px,38vw,360px);flex-shrink:0;}

/* ── BUTTONS ── */
.gb-btn{
  font-family:'Anton',sans-serif;letter-spacing:1px;
  border:none;cursor:pointer;border-radius:12px;
  display:inline-flex;align-items:center;gap:9px;
  transition:all .14s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
}
.gb-btn:active{transform:scale(.96) translateY(2px)!important;}
.gb-btn::before{
  content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  transform:skewX(-20deg);transition:left .5s ease;
}
.gb-btn:hover::before{left:140%;}

.gb-btn-main{
  font-size:clamp(16px,4vw,20px);padding:16px 48px;
  background:linear-gradient(135deg,var(--acc) 0%,#D96800 100%);
  color:#fff;
  box-shadow:0 8px 0 rgba(150,60,0,.5),0 14px 32px rgba(255,140,0,.25);
}
.gb-btn-main:hover{transform:translateY(-3px);box-shadow:0 11px 0 rgba(150,60,0,.5),0 18px 40px rgba(255,140,0,.32);}

.gb-btn-ghost{
  font-size:clamp(14px,3.5vw,17px);padding:14px 36px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
}
.gb-btn-ghost:hover{background:rgba(255,255,255,.10);color:var(--white);transform:translateY(-2px);}

/* ── PROGRESS ── */
#gb-quiz{padding-top:clamp(36px,6vh,58px);}
.gb-prog{width:100%;max-width:540px;margin-bottom:24px;}
.gb-prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.gb-prog-lbl{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);}
.gb-prog-n{font-family:'Space Mono',monospace;font-size:12px;color:var(--acc2);}
.gb-prog-track{height:3px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.gb-prog-fill{
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--acc));
  border-radius:3px;
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 10px rgba(255,210,0,.4);
}

/* ── QUESTION CARD — warm orange glass ── */
.gb-qcard{
  max-width:540px;width:100%;
  padding:32px 28px;
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:20px;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  box-shadow:0 2px 0 rgba(255,200,80,.08) inset,
             0 24px 48px rgba(0,0,0,.40);
}
.gb-qcard.gb-ein{animation:gb-cIn .4s cubic-bezier(.34,1.56,.64,1) both;}
.gb-qcard.gb-eout{animation:gb-cOut .24s ease-in both;}
@keyframes gb-cIn{0%{opacity:0;transform:translateX(44px) scale(.95);}100%{opacity:1;transform:none;}}
@keyframes gb-cOut{0%{opacity:1;transform:none;}100%{opacity:0;transform:translateX(-44px) scale(.95);}}

.gb-qemoji{
  width:58px;height:58px;
  background:rgba(255,200,80,.15);
  border:1px solid rgba(255,180,60,.30);
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  margin:0 auto 18px;
  animation:gb-epop .42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gb-epop{0%{transform:scale(0) rotate(-10deg);}100%{transform:none;}}

.gb-qtxt{
  font-family:'Anton',sans-serif;
  font-size:clamp(19px,4.8vw,25px);
  color:#fff;
  text-align:center;margin-bottom:24px;line-height:1.25;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}

.gb-opts{display:flex;flex-direction:column;gap:7px;}
.gb-opt{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,200,80,.18);
  border-radius:13px;padding:13px 17px;
  font-size:clamp(13px,3.2vw,15px);font-weight:700;
  color:rgba(255,248,240,.92);
  cursor:pointer;
  transition:all .15s cubic-bezier(.34,1.56,.64,1);
  text-align:left;display:flex;align-items:center;gap:12px;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.gb-opt:hover{
  background:rgba(255,140,0,.28);
  border-color:rgba(255,180,60,.6);
  color:#fff;transform:translateX(4px);
}
.gb-opt.gb-sel{
  background:rgba(255,140,0,.40);
  border-color:rgba(255,210,80,.8);
  color:#fff;transform:translateX(4px);
}
.gb-oem{font-size:20px;flex-shrink:0;width:26px;text-align:center;}

/* ── LOADING ── */
#gb-loading{justify-content:center;text-align:center;gap:0;}
.gb-load-img-w{width:155px;height:155px;margin:0 auto 36px;position:relative;}
.gb-load-img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(255,140,0,.2));
  animation:gb-lb .65s ease-in-out infinite alternate;}
@keyframes gb-lb{0%{transform:translateY(0) rotate(-3deg) scale(1);}100%{transform:translateY(-16px) rotate(3deg) scale(1.07);}}
.gb-load-shad{
  position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:60px;height:8px;background:rgba(255,140,0,.15);border-radius:50%;filter:blur(4px);
  animation:gb-ls .65s ease-in-out infinite alternate;
}
@keyframes gb-ls{0%{transform:translateX(-50%) scaleX(1);opacity:.4;}100%{transform:translateX(-50%) scaleX(.5);opacity:.1;}}
.gb-load-title{font-family:'Anton',sans-serif;font-size:clamp(24px,6.5vw,38px);color:var(--white);letter-spacing:.5px;margin-bottom:10px;}
.gb-load-step{font-family:'Space Mono',monospace;font-size:clamp(11px,2.8vw,13px);color:var(--muted);margin-bottom:32px;min-height:22px;transition:opacity .22s;}
.gb-load-bar-o{width:min(300px,78vw);height:3px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.gb-load-bar-i{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--acc));border-radius:3px;transition:width .42s ease;}

/* ── RESULT ── */
#gb-result{padding-top:clamp(32px,5vh,52px);gap:0;align-items:center;}
.gb-res-eyebrow{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:18px;text-align:center;}

.gb-price-card{
  max-width:440px;width:100%;
  padding:30px 30px 26px;
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:20px;
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  box-shadow:0 2px 0 rgba(255,200,80,.08) inset,0 28px 56px rgba(0,0,0,.40);
  text-align:center;margin-bottom:12px;position:relative;overflow:hidden;
  animation:gb-pcIn .55s cubic-bezier(.34,1.56,.64,1);
}
.gb-price-card::before{
  content:'';position:absolute;top:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,200,80,.6),transparent);
}
@keyframes gb-pcIn{0%{opacity:0;transform:scale(.9) translateY(16px);}100%{opacity:1;transform:none;}}

.gb-pc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.gb-pc-live{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(6,214,160,.1);border:1px solid rgba(6,214,160,.22);
  border-radius:6px;padding:4px 10px;
  font-family:'Space Mono',monospace;font-size:9px;color:var(--green);letter-spacing:1px;
}
.gb-pc-time{font-family:'Space Mono',monospace;font-size:9px;color:var(--dim);}
.gb-pc-lbl{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:10px;text-align:left;}
.gb-pc-val{font-family:'Anton',sans-serif;font-size:clamp(42px,12vw,74px);color:var(--white);letter-spacing:-1px;line-height:1;margin-bottom:6px;text-align:left;}
.gb-pc-chg{font-family:'Space Mono',monospace;font-size:12px;color:var(--green);margin-bottom:20px;display:flex;align-items:center;gap:4px;}
.gb-pc-chg.gb-chg-down{color:var(--red);}
.gb-grade-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,210,102,.1);border:1px solid rgba(255,210,102,.25);
  border-radius:100px;padding:8px 20px;
  font-family:'Anton',sans-serif;font-size:15px;color:var(--gold);
  margin-bottom:22px;letter-spacing:1px;
  max-width:100%;text-align:center;
}
.gb-grade-pill.gb-worthless{
  background:rgba(239,71,111,.1);border-color:rgba(239,71,111,.3);
  color:var(--red);
  border-radius:16px;white-space:normal;
  font-family:'Inter',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:0;line-height:1.4;padding:14px 18px;
}
.gb-pc-div{height:1px;background:rgba(255,255,255,.07);margin:0 -30px 20px;}
.gb-pc-stats{display:grid;grid-template-columns:repeat(3,1fr);}
.gb-pcs{text-align:center;position:relative;}
.gb-pcs+.gb-pcs::before{content:'';position:absolute;left:0;top:10%;height:80%;width:1px;background:rgba(255,255,255,.07);}
.gb-pcs-lbl{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:4px;}
.gb-pcs-v{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--white);}
.gb-pcs-v.up{color:var(--green);}
.gb-pcs-v.dn{color:var(--red);}
.gb-pcs-v.go{color:var(--gold);}

.gb-breakdown{
  max-width:440px;width:100%;
  padding:20px 24px;
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:16px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  margin-bottom:10px;
  animation:gb-bdIn .5s ease .12s both;
}
@keyframes gb-bdIn{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:none;}}
.gb-bd-head{
  font-family:'Space Mono',monospace;
  font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.gb-bd-head.up{color:var(--green);}
.gb-bd-head.dn{color:var(--red);}
.gb-bd-head::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);}
.gb-bd-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);gap:12px;}
.gb-bd-row:last-child{border-bottom:none;padding-bottom:0;}
.gb-bd-txt{font-size:13px;font-weight:600;color:var(--muted);flex:1;line-height:1.4;}
.gb-bd-amt{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;white-space:nowrap;}
.gb-bd-amt.up{color:var(--green);}
.gb-bd-amt.dn{color:var(--red);}

.gb-stats4{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:440px;width:100%;margin-bottom:18px;animation:gb-bdIn .5s ease .22s both;}
.gb-s4{padding:15px 16px;background:var(--card-bg);border:1px solid var(--card-bd);border-radius:14px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(16px);}
.gb-s4-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ic-o{background:rgba(255,140,0,.18);}
.ic-g{background:rgba(6,214,160,.12);}
.ic-y{background:rgba(255,210,102,.12);}
.ic-r{background:rgba(239,71,111,.12);}
.gb-s4-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin-bottom:3px;}
.gb-s4-v{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--white);}

.gb-acts{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-bottom:90px;}

/* ── FLOATING TAG ── */
#gb-ftag{
  position:fixed;top:clamp(44px,7vh,64px);right:clamp(14px,4vw,50px);
  z-index:50;display:none;flex-direction:column;align-items:center;
  animation:gb-ftSw 2.8s ease-in-out infinite;transform-origin:top center;
  pointer-events:none;
}
@keyframes gb-ftSw{0%,100%{transform:rotate(-4.5deg);}50%{transform:rotate(4.5deg);}}
.gb-ft-rope{width:1px;height:32px;background:linear-gradient(180deg,rgba(255,210,102,.35),rgba(255,210,102,.05));}
.gb-ft-knot{width:8px;height:8px;border-radius:50%;background:rgba(30,16,4,.9);border:1px solid rgba(255,210,102,.3);margin:0 auto -4px;position:relative;z-index:1;}
.gb-ft-body{
  background:rgba(20,12,4,.9);
  border:1px solid rgba(255,140,0,.3);
  border-radius:12px;padding:13px 18px;text-align:center;
  box-shadow:0 14px 36px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.04) inset;
  min-width:138px;backdrop-filter:blur(20px);
}
.gb-ft-lbl{font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:5px;}
.gb-ft-val{font-family:'Anton',sans-serif;font-size:19px;color:var(--acc2);line-height:1.15;}
.gb-ft-grade{font-family:'Space Mono',monospace;font-size:9px;color:var(--gold);margin-top:4px;}

/* ── TICKER ── */
#gb-ticker{
  position:fixed;bottom:0;left:0;width:100%;
  background:rgba(8,4,1,.96);border-top:1px solid rgba(255,140,0,.12);
  backdrop-filter:blur(14px);
  color:var(--green);font-family:'Space Mono',monospace;
  font-size:10px;letter-spacing:1.5px;
  padding:8px 0;z-index:999;overflow:hidden;
}
.gb-ti{white-space:nowrap;display:inline-block;animation:gb-tick 320s linear infinite;}
#gb-ticker:hover .gb-ti{animation-play-state:paused;}
@keyframes gb-tick{0%{transform:translateX(100vw);}100%{transform:translateX(-100%);}}

/* ── MISC ── */
#gb-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;display:none;}
.gb-sp{position:fixed;pointer-events:none;font-size:18px;z-index:500;animation:gb-spf 1.1s ease-out forwards;}
@keyframes gb-spf{0%{opacity:1;transform:scale(0);}100%{opacity:0;transform:scale(1.3) translate(var(--tx),var(--ty));}}

@media(max-width:480px){
  #gb-butt-wrap,#gb-butt-grad{width:122vw;}
  .gb-spacer{height:clamp(160px,40vw,260px);}
  .gb-qcard{padding:26px 18px;}
  .gb-price-card{padding:24px 20px 20px;}
  .gb-breakdown{padding:16px 18px;}
}