@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

:root{
  --bg:#0b0a08;
  --gold1:#f5c56b;
  --gold2:#d4a84f;
  --goldGlow: rgba(245,197,107,.35);
  --line:rgba(255,215,120,.18);
  --text:#f5f3ee;

  --panel: rgba(255,255,255,.04);
  --panel2: rgba(255,255,255,.06);

  --radius: 16px;
}

*{ box-sizing:border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family:Poppins, sans-serif;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(245,197,107,.18), transparent),
    #0b0a08;
  color:var(--text);
}

.no-scroll{ overflow:hidden; }

.container{
  width:min(1200px, calc(100% - 32px));
  margin:auto;
}

/* =========================
   TOP NOTICE (MOBİL UYUMLU)
   ========================= */

.top-notice{
  background:linear-gradient(180deg,#14110b,#0c0a07);
  border-bottom:1px solid var(--gold2);
}

.notice-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
  gap:10px;
}

/* merkez alan: kapatma butonu için sağda boşluk bırak */
.notice-center{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding-right: 44px; /* ✅ close butonu için alan */
}

/* ikon sabit kalsın */
.shield{
  flex: 0 0 auto;
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  color: rgba(245,197,107,.95);
}

/* ✅ desktop: tek satır, mobil: 2 satıra düşebilir */
.notice-text{
  font-size:13px;
  text-align:center;
  max-width: 980px;

  /* desktop default */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* güvenli kırılma */
  min-width: 0;
}

.notice-link{ color:var(--gold1); font-weight:800; }

.notice-close{
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  display:none;
  place-items:center;
}
.notice-close:hover{ background: rgba(255,255,255,.08); }

/* =========================
   📱 MOBİL
   ========================= */
@media (max-width: 820px){
  .notice-inner{
    padding: 10px 0;
  }

  .notice-center{
    padding-right: 44px;
    justify-content:center;
  }

  .notice-text{
    font-size:12px;
    max-width: calc(100vw - 32px - 28px - 44px - 14px);
    white-space: normal;        /* ✅ artık satır kırabilir */
    overflow: visible;          /* ✅ ellipsis yok */
    text-overflow: clip;
    line-height: 1.25;

    display: -webkit-box;       /* ✅ 2 satır limit */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media (max-width: 420px){
  .notice-text{
    max-width: calc(100vw - 28px - 44px - 24px);
    -webkit-line-clamp: 3; /* ✅ çok dar ekranda 3 satır */
  }

  .notice-close{
    width: 32px;
    height: 32px;
    border-radius: 12px;
  }
}




/* =========================
   HEADER (HER ZAMAN SABİT)
   ========================= */
.site-header{ background: radial-gradient(1000px 300px at 50% -200px, rgba(245,197,107,.25), transparent), #0b0a08; border-bottom:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.6); position: sticky; top: 0; z-index: 60; backdrop-filter: blur(10px); }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

/* LOGO ONLY */
.header-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.header-logo img{
  height:150px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 20px rgba(245,197,107,.35));
}

/* NAV LINKS (desktop) */
.nav-links{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,215,120,.14);
  background: rgba(255,255,255,.03);
}
.nav-link{
  text-decoration:none;
  color: rgba(245,243,238,.85);
  font-weight:700;
  font-size:13px;
  padding:8px 10px;
  border-radius: 999px;
  transition: .15s ease;
}
.nav-link:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.nav-link.is-active{
  background: linear-gradient(180deg, rgba(245,197,107,.22), rgba(212,168,79,.12));
  border: 1px solid rgba(255,215,120,.18);
}

/* ACTIONS */
.actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.btn{
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  border:1px solid var(--line);
  color:var(--text);
  background: rgba(255,255,255,.04);
  transition: .15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
.btn.primary{
  background:linear-gradient(180deg,var(--gold1),var(--gold2));
  color:#1a1408;
  border-color: rgba(255,215,120,.28);
}
.btn.dark{ background:rgba(255,255,255,.05); }
.btn.accent{ background:rgba(245,197,107,.12); border-color: rgba(255,215,120,.20); }

.time-pill{
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  font-variant-numeric: tabular-nums;
  letter-spacing:.4px;
  background: rgba(255,255,255,.03);
}

/* ICON BUTTONS */
.icon-btn{
  position:relative;
  width:44px;height:40px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  display:grid;place-items:center;
  cursor:pointer;
  color: rgba(245,243,238,.92);
  transition: .15s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
.badge{
  position:absolute;
  top:-6px;right:-6px;
  width:18px;height:18px;
  background:linear-gradient(180deg,var(--gold1),var(--gold2));
  color:#1a1408;
  border-radius:50%;
  font-size:11px;
  font-weight:900;
  display:grid;place-items:center;
  border: 2px solid #0b0a08;
}
.svg-ico{ width:18px; height:18px; display:block; }

/* Helpers */
.only-mobile{ display:none; }
.only-desktop{ display:inline-flex; }
.hamburger{ width:44px; }

/* =========================
   DRAWER
   ========================= */
.drawer-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: .18s ease;
  z-index: 80;
}
.drawer-backdrop.show{
  opacity:1;
  pointer-events:auto;
}
.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(360px, 88vw);
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(245,197,107,.18), transparent 60%),
    linear-gradient(180deg, #14110b, #0b0a08);
  border-left: 1px solid rgba(255,215,120,.18);
  transform: translateX(110%);
  transition: .22s ease;
  z-index: 90;
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.drawer.open{ transform: translateX(0); }

.drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 2px 10px;
}
.drawer-logo{
  height:150px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 0 18px rgba(245,197,107,.25));
}
.drawer-close{
  width:42px;
  height:42px;
  border-radius: 14px;
  border: 1px solid rgba(255,215,120,.16);
  background: rgba(255,255,255,.04);
  color: rgba(245,243,238,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.drawer-close:hover{ background: rgba(255,255,255,.08); }

.drawer-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,215,120,.12);
}
.w-full{ width:100%; }
.drawer-row{
  display:flex;
  gap:10px;
}
.svc{
  margin-top: 2px;
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,215,120,.14);
  background: radial-gradient(220px 120px at 10% 30%, rgba(245,197,107,.18), transparent 60%),
              rgba(255,255,255,.03);
  color: rgba(245,243,238,.92);
}
.svc:hover{ background: rgba(255,255,255,.06); }
.svc-ico{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,215,120,.14);
  color: rgba(245,197,107,.95);
  box-shadow: 0 0 18px rgba(245,197,107,.12);
}
.svc-title{ font-weight:900; font-size:14px; }
.svc-sub{ font-size:12px; opacity:.72; }

.drawer-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 8px 2px;
}
.drawer-link{
  text-decoration:none;
  color: rgba(245,243,238,.88);
  font-weight:800;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,215,120,.10);
  background: rgba(255,255,255,.02);
}
.drawer-link:hover{ background: rgba(255,255,255,.06); }
.drawer-link.is-active{
  background: linear-gradient(180deg, rgba(245,197,107,.22), rgba(212,168,79,.10));
  border-color: rgba(255,215,120,.18);
}

.drawer-footer{
  margin-top:auto;
  padding-top: 6px;
  opacity:.95;
}

/* =========================
   ✅ RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .nav-links{ gap: 6px; }
  .nav-link{ font-size:12px; padding: 8px 9px; }
}

@media (max-width: 820px){
  .notice-text{ max-width: 72vw; font-size:12px; }
  .only-desktop{ display:none !important; }
  .only-mobile{ display:grid !important; }
  .nav-links{ display:none; }
  .header-logo img{ height:150px; }
  .actions{ gap:8px; }
}

@media (max-width: 420px){
  .notice-text{ max-width: 64vw; }
  .header-logo img{ height:40px; }
  .icon-btn{ width:42px; height:40px; }
}
/* =========================
   ✅ AD SLIDER (FINAL ++)
   - Mobil: DEĞİŞMEZ
   - Desktop: DAHA DA BÜYÜK / HERO-LIKE
   ========================= */

.ad-slider{
  padding: 40px 0 22px; /* ⬅ masaüstünde biraz daha aşağı */
}

.ad-inner{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* dış çerçeve */
.ad-viewport{
  position: relative;
  overflow: hidden;
  border-radius: 30px; /* ⬅ daha iri köşe */
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow:
    0 28px 90px rgba(0,0,0,.75),
    0 0 0 1px rgba(245,197,107,.05) inset;
}

/* kayan şerit */
.ad-track{
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform .6s cubic-bezier(.2,.85,.2,1);
}

/* slide */
.ad-slide{
  position: relative;
  flex: 0 0 100%;
  display: block;

  /* ⬇⬇⬇ ASIL BÜYÜTEN KISIM ⬇⬇⬇ */
  height: clamp(300px, 30vw, 520px);

  overflow: hidden;
  border-radius: 30px;
  text-decoration: none;
  color: inherit;
}

/* banner image */
.ad-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: none;
}

/* dots */
.ad-dots{
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 0 0;
}

.ad-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,197,107,.28);
  background: rgba(255,255,255,.08);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.ad-dot.is-active{
  width: 30px; /* ⬅ biraz daha iri */
  background: rgba(245,197,107,.7);
}

/* =========================
   📱 MOBİL – HİÇ DOKUNULMADI
   ========================= */

@media (max-width: 820px){
  .ad-slider{
    padding: 14px 0 10px;
  }

  .ad-slide{
    height: 220px;
    border-radius: 22px;
  }
}

@media (max-width: 420px){
  .ad-slide{
    height: 190px;
  }
}

/* =========================
   ✅ PAGE LOADER (Modern, Gold)
   ========================= */
.page-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 380px at 50% 20%, rgba(245,197,107,.18), transparent 60%),
    linear-gradient(180deg, rgba(11,10,8,.92), rgba(11,10,8,.98));
  backdrop-filter: blur(10px);
  transition: opacity .28s ease, visibility .28s ease;
}

.page-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-card{
  width: min(520px, calc(100% - 36px));
  border-radius: 22px;
  border: 1px solid rgba(255,215,120,.18);
  background: rgba(255,255,255,.03);
  box-shadow: 0 30px 120px rgba(0,0,0,.75);
  padding: 18px 18px 16px;
}

.loader-brand{
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  margin-bottom: 12px;
}

.loader-logo{
  height: 200px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(245,197,107,.28));
}

.loader-title{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 16px;
}

.loader-sub{
  font-size: 12px;
  opacity: .82;
}

/* dönen halka */
.loader-ring{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255,215,120,.18);
  border-top-color: rgba(245,197,107,.95);
  box-shadow: 0 0 18px rgba(245,197,107,.18);
  margin: 8px auto 14px;
  animation: loaderSpin .9s linear infinite;
}

@keyframes loaderSpin{
  to { transform: rotate(360deg); }
}

/* progress bar */
.loader-bar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,215,120,.18);
  background: rgba(0,0,0,.35);
  overflow: hidden;
}

.loader-bar-fill{
  display:block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  box-shadow: 0 0 18px rgba(245,197,107,.25);
  transition: width .2s ease;
}

.loader-meta{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  opacity: .9;
}

.loader-pct{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: rgba(245,197,107,.95);
}

.loader-tip{
  opacity: .78;
}

/* mobil tuning */
@media (max-width: 420px){
  .loader-card{ padding: 16px 14px 14px; border-radius: 20px; }
  .loader-logo{ height: 80px; }
  .loader-ring{ width: 48px; height: 48px; }
}

/* =========================
   AUTH POPUP – GOLD THEME
   ========================= */

.no-scroll{ overflow:hidden; }

/* ---------- BACKDROP ---------- */
.auth-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;

  background:rgba(0,0,0,.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  opacity:0;
  transition:opacity .2s ease;
}
.auth-backdrop.show{
  display:flex;
  opacity:1;
}

/* ---------- MODAL ---------- */
.auth-modal{
  width:940px;
  max-width:100%;
  height:580px;
  display:flex;
  overflow:hidden;

  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    var(--bg);

  border-radius:var(--radius);
  border:1px solid var(--line);

  box-shadow:
    0 30px 90px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(245,197,107,.06);

  transform:translateY(10px) scale(.98);
  opacity:0;
  filter:blur(2px);
  transition:.25s ease;
}
.auth-backdrop.show .auth-modal{
  transform:none;
  opacity:1;
  filter:none;
}

/* ---------- LEFT IMAGE ---------- */
.auth-left{
  width:44%;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(245,197,107,.18), transparent),
    #0f0d09;
}
.auth-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- RIGHT ---------- */
.auth-right{
  width:56%;
  padding:18px;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* ---------- HEADER ---------- */
.auth-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
}
.auth-logo{
  height:180px;
  filter:drop-shadow(0 0 8px var(--goldGlow));
}

/* Mobilde gizle */
@media (max-width: 768px){
  .auth-logo{
    display: none;
  }
}

.auth-close{
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--gold1);
  font-size:26px;
  cursor:pointer;
  transition:.15s;
}
.auth-close:hover{
  background:var(--panel2);
  box-shadow:0 0 14px var(--goldGlow);
  transform:scale(1.05);
}

/* ---------- SCROLL ---------- */
.auth-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:6px;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.auth-scroll::-webkit-scrollbar{ width:8px; }
.auth-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
  border-radius:999px;
}
.auth-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold1),var(--gold2));
  border-radius:999px;
}
.auth-scroll{
  scrollbar-width:thin;
  scrollbar-color:var(--gold1) rgba(255,255,255,.05);
}

/* ---------- TEXT ---------- */
.auth-title{
  margin:6px 0;
  font-size:26px;
  color:var(--gold1);
  text-shadow:0 0 12px var(--goldGlow);
}
.auth-sub{
  margin-bottom:14px;
  font-size:14px;
  color:rgba(245,243,238,.7);
}

/* ---------- FORM ---------- */
.auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.auth-form input,
.auth-form select{
  height:52px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 14px;
  color:var(--text);
  font-size:14px;
  outline:none;
}
.auth-form input::placeholder{
  color:rgba(245,243,238,.45);
}
.auth-form input:focus,
.auth-form select:focus{
  border-color:var(--gold1);
  box-shadow:0 0 0 3px var(--goldGlow);
}

/* ---------- PHONE ---------- */
/* ---------- PHONE (E-POSTA INPUT STİLİYLE AYNI) ---------- */
.phone-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.phone-group label{
  font-size:12px;
  color:rgba(245,243,238,.7);
  margin-bottom:6px;
}

.phone-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

/* desktop ölçü */
.phone-code{ width:140px; }
.phone-input{ flex:1; }
.phone-country select{ width:100%; }

/* ✅ input/select ortak görünüm (E-posta kutusu gibi) */
.phone-group select,
.phone-group input[type="tel"]{
  width:100%;
  height:52px;
  border-radius:16px;
  padding:0 16px;

  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,215,120,.14);
  color:var(--text);

  outline:none;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* placeholder */
.phone-group input[type="tel"]::placeholder{
  color: rgba(245,243,238,.35);
}

/* focus (E-posta gibi gold glow) */
.phone-group select:focus,
.phone-group input[type="tel"]:focus{
  border-color: rgba(245,197,107,.55);
  box-shadow: 0 0 0 3px rgba(245,197,107,.12), 0 18px 50px rgba(0,0,0,.45);
}

/* select ok rengi */
.phone-group select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  padding-right:44px; /* ok için boşluk */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(245,243,238,.85) 50%),
    linear-gradient(135deg, rgba(245,243,238,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* ✅ açılan option alanı (tarayıcı izin verdiği kadar) */
.phone-group select option{
  background:#14110b;          /* e-posta kutusuna yakın koyu */
  color:#f5f3ee;
}

/* 📱 mobilde yan yana eşit olsun */
@media (max-width: 820px){
  .phone-row{
    gap:10px;
  }
  .phone-code{
    width: 42%;
    min-width: 120px;
  }
  .phone-input{
    flex:1;
  }
}


/* ---------- BUTTONS ---------- */
.auth-btn{
  height:52px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  border:none;
  transition:.15s;
}

.auth-btn.primary{
  background:linear-gradient(135deg,var(--gold1),var(--gold2));
  color:#0b0a08;
  box-shadow:0 0 22px var(--goldGlow);
}
.auth-btn.primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

.auth-btn.ghost{
  background:transparent;
  border:1px solid var(--gold1);
  color:var(--gold1);
}
.auth-btn.ghost:hover{
  box-shadow:0 0 16px var(--goldGlow);
}

/* ---------- FOOTER ---------- */
.auth-footer{
  text-align:center;
  padding-top:8px;
}
.auth-footer a{
  color:var(--gold1);
  font-size:13px;
  text-decoration:none;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width:768px){

  .auth-modal{
    flex-direction:column;
    width:100%;
    max-width:420px;
    max-height:86vh;
  }

  .auth-left{
    width:100%;
    height:110px;
    background:#0b0a08;
    display:flex;
    align-items:center;
    justify-content:center;
  }

@media (max-width:768px){

  .auth-left{
    width:100%;
    height:450px; /* biraz daha premium */
    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.25),
        rgba(0,0,0,.75)
      ),
      url("assets/ads/auth-mobile.jpg") center center / cover no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* mobilde img'i tamamen kapat */
  .auth-img{
    display:none;
  }
}


  .auth-right{
    width:100%;
    padding:14px;
  }

  .auth-scroll{
    max-height:calc(86vh - 110px - 64px);
    padding-right:4px;
  }

  .auth-scroll::-webkit-scrollbar{ width:6px; }

  .auth-title{ font-size:21px; }
  .auth-sub{ font-size:13px; }
}

@media (max-width:420px){
  .phone-code{ width:110px; }
}


/* =========================
   MOBILE PHONE ROW FIX
   ========================= */
@media (max-width: 768px){

  .phone-row{
    display: flex;
    gap: 10px;
    align-items: stretch;
  }

  /* Kodu alanı */
  .phone-code{
    flex: 0 0 90px;       /* sabit ama dengeli */
  }

  /* Telefon alanı */
  .phone-input{
    flex: 1;              /* kalan alanı alsın */
  }

  /* İkisinin de boyu eşit */
  .phone-code select,
  .phone-input input{
    height: 52px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14px;
  }

  /* Label hizası */
  .phone-group label{
    margin-bottom: 6px;
    font-size: 12px;
  }
}

/* =========================
   FEATURED (FIXED + CLEAN)
   ========================= */
.featured-wrap{
  padding: 26px 0 38px;
  position: relative;
  overflow: hidden; /* ✅ taşan dev svg vs. kes */
}

.section-sep{
  height: 1px;
  width: 100%;
  margin: 8px 0 18px;
  background: linear-gradient(90deg, transparent, var(--line), rgba(245,197,107,.28), var(--line), transparent);
  box-shadow: 0 0 18px rgba(245,197,107,.08);
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.section-title{
  margin:0;
  font-size: 22px;
  color: var(--gold1);
  text-shadow: 0 0 14px var(--goldGlow);
}

.section-sub{
  margin:8px 0 0;
  font-size: 13px;
  color: rgba(245,243,238,.7);
}

/* ✅ auto-fit ile her ekranda düzgün */
.featured-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* cards */
.featured-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.featured-card:hover{
  transform: translateY(-2px);
  border-color: rgba(245,197,107,.35);
  box-shadow: 0 22px 70px rgba(0,0,0,.5);
}

/* ✅ ICON BOX */
.fc-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,197,107,.22);
  box-shadow: 0 0 18px rgba(245,197,107,.08);
  margin-bottom: 10px;
  color: var(--gold1);

  overflow: hidden; /* ✅ svg taşmasını kes */
}

/* ✅ SVG kilidi (dev gibi büyümesin) */
.featured-wrap svg,
.fc-svg{
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
}

.fc-title{
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
  font-size: 14px;
}
.fc-text{
  margin:0;
  color: rgba(245,243,238,.68);
  font-size: 12.5px;
  line-height: 1.45;
}

/* mobile */
@media (max-width: 520px){
  .featured-wrap{ padding: 18px 0 28px; }
  .section-title{ font-size: 20px; }
}


/* =========================
   ZEUSCASINO OYUNLAR (HORIZONTAL ROW)
   ========================= */

.games-section{
  padding: 10px 0 30px;
}

.games-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin: 10px 0 12px;
}

.games-title{
  margin:0;
  font-size: 18px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text);
  opacity: .95;
}

.games-more{
  color: rgba(245,243,238,.75);
  font-size: 13px;
  text-decoration: none;
  letter-spacing: .4px;
  display:flex;
  align-items:center;
  gap: 8px;
  transition: .15s ease;
}
.games-more:hover{
  color: var(--gold1);
  text-shadow: 0 0 12px var(--goldGlow);
}

/* yatay kaydırma */
.games-row{
  display:flex;
  gap: 14px;
  overflow-x: auto;
  padding: 10px 2px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* scrollbar */
.games-row::-webkit-scrollbar{ height: 8px; }
.games-row::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 999px;
}
.games-row::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  border-radius: 999px;
}

/* kart */
.game-card{
  flex: 0 0 auto;
  width: 240px;
  height: 170px;
  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(255,215,120,.14);
  background: #000; /* boşluklar siyah & premium dursun */
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  scroll-snap-align: start;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}




.game-card img{
  max-width: 100%;
  max-height: 100%;

  width: auto !important;
  height: auto !important;

  display: block;
  object-fit: contain;   /* ❗ KIRPMA YOK */
  object-position: center;
}


.game-card:hover{
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(245,197,107,.35);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}

/* responsive */
@media (max-width: 900px){
  .game-card{ width: 150px; height: 160px; }
}
@media (max-width: 520px){
  .games-title{ font-size: 16px; }
  .game-card{ width: 210px; height: 150px; border-radius: 16px; }
  .games-row{ gap: 12px; padding-bottom: 14px; }
}


/* =========================
   ALT TEK GÖRSEL SLIDER
   ========================= */

.alt-ad{
  padding: 8px 0 28px;
}

.alt-ad-card{
  display:block;
  width:50%;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,215,120,.14);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  position:relative;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* =========================
   MOBİL – ORTALI + DARALTILMIŞ
   ========================= */
@media (max-width: 767px){
  .alt-ad-card{
    width: 100%;        /* istediğin gibi */
    max-width: none;   /* desktop limiti kalksın */
  }
}

/* resim cuk otursun */
.alt-ad-card img{
  width:100%;
  height:auto;
  display:block;
  object-fit: cover;
}

/* premium glow */
.alt-ad-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(245,197,107,.16), transparent 60%),
    radial-gradient(900px 220px at 80% 100%, rgba(245,197,107,.10), transparent 60%);
  opacity:.85;
}

.alt-ad-card:hover{
  transform: translateY(-2px);
  border-color: rgba(245,197,107,.32);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

/* Mobilde daha kompakt */
@media (max-width: 768px){
  .alt-ad{ padding: 6px 0 20px; }
  .alt-ad-card{ border-radius: 14px; }
}

/* =========================
   ALT BANNER – DESKTOP ORTALAMA
   ========================= */
@media (min-width: 1024px){
  .alt-ad-card{
    max-width: 1200px;   /* vitrin genişliği */
    margin: 0 auto;      /* ortala */
  }
}

/* =========================
   MOBİL – ORTALI + BÜYÜTÜLMÜŞ
   ========================= */
@media (max-width: 767px){
  .alt-ad-card{
    max-width: 94%;        /* kenarlardan nefes alır */
    transform: scale(1.06); /* hafif büyütme (cuk) */
  }
}


/* LOGIN buton loading */
.auth-btn.primary{
  position: relative;
  overflow: hidden;
}

.auth-btn.primary .btn-spin{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25);
  border-top-color: rgba(0,0,0,.85);
  display: none;
}

.auth-btn.primary.is-loading{
  opacity: .95;
  cursor: wait;
}
.auth-btn.primary.is-loading .btn-text{ display:none; }
.auth-btn.primary.is-loading .btn-spin{
  display:inline-block;
  animation: spin .8s linear infinite;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* Login mobil görsel swap (kayıt ile aynı mantık) */
@media (max-width:768px){
  .login-img{
    display:none;
  }
  .auth-left-login{
    width:100%;
    height:450px; /* biraz daha premium */
    background:
      linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.75)),
      url("assets/ads/auth-mobile.jpg") center center / cover no-repeat;
  }
}


/* =========================
   FOOTER
   ========================= */
.site-footer{
  margin-top: 28px;
  background:
    radial-gradient(1200px 420px at 20% -20%, rgba(245,197,107,.10), transparent),
    radial-gradient(900px 360px at 90% 10%, rgba(212,168,79,.08), transparent),
    #0b0a08;
  border-top: 1px solid var(--line);
  box-shadow: 0 -18px 60px rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
}

.footer-wrap{
  padding: 26px 0 18px;
}

/* subtle background image look (optional glow) */
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.72));
  pointer-events:none;
}

/* Desktop grid */
.footer-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.2fr 1fr 1.1fr;
  gap: 26px;
}

.footer-col h4{
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(245,243,238,.92);
}

.footer-col a{
  display: block;
  padding: 7px 0;
  font-size: 12.5px;
  color: rgba(245,243,238,.62);
  text-decoration: none;
  transition: color .16s ease, transform .16s ease;
}

.footer-col a:hover{
  color: rgba(245,197,107,.95);
  transform: translateX(2px);
}

/* Mobile layout hidden on desktop */
.footer-mobile{ display:none; }

/* Sub footer */
.footer-sub{
  border-top: 1px solid rgba(255,215,120,.10);
  background: rgba(255,255,255,.02);
  position: relative;
  z-index: 1;
}

.footer-sub-inner{
  padding: 14px 0;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  color: rgba(245,243,238,.55);
  text-align:center;
}

.footer-dot{ opacity:.5; }

/* =========================
   📱 MOBILE
   ========================= */
@media (max-width: 900px){
  .footer-desktop{ display:none; }
  .footer-mobile{
    display:block;
    position: relative;
    z-index: 1;
    text-align:center;
    padding: 4px 0 6px;
  }

  .footer-group{
    padding: 14px 0 10px;
  }

  .footer-group h4{
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .08em;
    color: rgba(245,243,238,.85);
  }

  .footer-links-line{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items:center;
    justify-content:center;
    line-height: 1.25;
  }

  .footer-links-line a{
    color: rgba(245,243,238,.62);
    font-size: 12.5px;
    text-decoration:none;
    transition: color .16s ease;
    white-space: nowrap;
  }

  .footer-links-line a:hover{
    color: rgba(245,197,107,.95);
  }

  .footer-links-line .sep{
    opacity:.35;
    color: rgba(245,243,238,.55);
  }

  .footer-divider{
    height: 1px;
    width: min(520px, 88%);
    margin: 10px auto 2px;
    background: linear-gradient(90deg, transparent, rgba(255,215,120,.18), transparent);
  }

  .footer-bottom-title h4{
    margin-top: 14px;
    font-size: 12px;
    color: rgba(245,243,238,.72);
  }

  .footer-sub-inner{
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
  }
  .footer-dot{ display:none; }
}

/* =========================
   CGA CERT (SADECE MOBİL)
   ========================= */

.cga-cert-mobile{
  display: none; /* desktop gizli */
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.cga-cert-mobile img{
  max-width: 160px;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 10px var(--goldGlow))
    brightness(1.05);
  transition: transform .2s ease, filter .2s ease;
}

.cga-cert-mobile a:hover img{
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 16px var(--goldGlow))
    brightness(1.1);
}

/* 📱 MOBİL AKTİF */
@media (max-width: 820px){
  .cga-cert-mobile{
    display: block;
  }
}

/* =========================
   FOOTER – DESKTOP FIX
   ========================= */

.site-footer{
  width:100%;
  overflow:hidden; /* ✅ sağdaki yırtılma/taşmayı keser */
  background:
    radial-gradient(1200px 420px at 50% -220px, rgba(245,197,107,.10), transparent),
    #0b0a08;
  border-top:1px solid var(--line);
}

.footer-inner{
  padding: 56px 0 48px;
  display:flex;
  flex-direction:column;
  gap: 34px;
}

/* ✅ container’ın dışına taşmayı engelle */
.footer-inner,
.footer-grid{
  max-width: 100%;
}

/* GRID */
.footer-grid{
  display:grid;
  gap: 28px;
  align-items:start;

  /* ✅ taşmayan responsive desktop grid */
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* sütun */
.footer-col{
  min-width:0;              /* ✅ taşmayı önler */
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-head{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:.8px;
  font-weight:800;
  color:var(--gold1);
}

.footer-col a{
  font-size:13px;
  color:rgba(245,243,238,.72);
  text-decoration:none;
  line-height:1.35;
  transition:color .18s ease;
}
.footer-col a:hover{ color:var(--gold1); }

/* divider */
.footer-divider{
  height:1px;
  width:100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,120,.35), transparent);
}

/* ✅ DÜZENLEMELER: TAM ORTA */
.footer-regulations{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
}

.footer-title{
  font-size:13px;
  letter-spacing:.6px;
  font-weight:700;
  color:rgba(245,243,238,.85);
}

/* CGA */
.cga-cert-desktop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,215,120,.14);
  background: rgba(255,255,255,.03);
}

.cga-cert-desktop img{
  width: 100px;      /* ✅ burada net genişlik, ortalı */
  max-width: 100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 0 14px var(--goldGlow)) brightness(1.06);
  transition: transform .18s ease, filter .18s ease;
}

.cga-cert-desktop:hover img{
  transform: scale(1.05);
  filter: drop-shadow(0 0 22px var(--goldGlow)) brightness(1.1);
}

/* ✅ Ekran daralınca 5 kolon taşmasın (desktop kırılımı) */
@media (max-width: 1200px){
  .footer-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* mobilde desktop footer gizli */
@media (max-width: 820px){
  .site-footer.only-desktop{ display:none; }
}


/* login buton loading */
.auth-btn .btn-spin{ display:none; }
.auth-btn.is-loading .btn-text{ opacity:.6; }
.auth-btn.is-loading .btn-spin{
  display:inline-block;
  width:16px; height:16px;
  border-radius:999px;
  border:2px solid rgba(245,243,238,.35);
  border-top-color: rgba(245,197,107,.95);
  margin-left:10px;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }