/* ============================================================
   bonus.css — /deneme ve /promosyonlar sayfaları
   (liste görünümü + detay sayfası). home.css'in üzerine biner.
   ============================================================ */

.bonus-page{ position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:26px 22px 46px; }

/* ── Liste başlığı ── */
.bl-head{ margin-bottom:20px; }
.bl-head h1{
  font-size:1.75rem; font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:12px;
  color:var(--text);
}
.bl-head h1 i{ color:var(--blue); font-size:1.35rem; }
.bl-head p{ margin:8px 0 0; color:var(--text-dim); font-size:.9rem; }

/* ── Kategori filtreleri ── */
.bl-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.bl-filter{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border); color:var(--text-dim);
  font-size:.82rem; font-weight:600; transition:.2s;
}
.bl-filter i{ font-size:.75rem; color:var(--text-mute); }
.bl-filter .cnt{
  font-size:.7rem; font-weight:700; padding:2px 7px; border-radius:99px;
  background:rgba(255,255,255,.07); color:var(--text-dim);
}
.bl-filter:hover{ color:#fff; border-color:var(--blue); }
.bl-filter.active{
  color:#fff; background:linear-gradient(135deg, rgba(59,109,240,.26), rgba(59,109,240,.07));
  border-color:rgba(59,109,240,.6); box-shadow:0 0 0 3px var(--blue-soft);
}
.bl-filter.active i, .bl-filter.active .cnt{ color:#fff; }

/* ── Liste ── */
.bl-list{ display:flex; flex-direction:column; gap:10px; }
.bl-item{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:var(--r-md);
  /* Camsı yüzey (blur'suz — performans için backdrop-filter kaldırıldı) */
  background:linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--sh-card), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.bl-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--blue), var(--red)); opacity:.65;
}
.bl-item:hover{ transform:translateY(-2px); border-color:rgba(59,109,240,.55); box-shadow:var(--sh-card-hover); }
.bl-logo{
  flex:0 0 auto; width:84px; height:44px; border-radius:8px;
  background:#fff0; border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background-color:rgba(255,255,255,.04);
}
.bl-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.bl-logo span{ font-family:var(--f-display); font-weight:800; font-size:.95rem; color:var(--plat-2); }
.bl-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.bl-name{ font-size:1rem; font-weight:700; color:var(--text); line-height:1.25; }
.bl-sub{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--text-dim); }
.bl-sub i{ font-size:.7rem; color:var(--text-mute); }
.bl-cat{
  font-style:normal; font-size:.7rem; font-weight:700; letter-spacing:.4px;
  padding:3px 8px; border-radius:99px; text-transform:uppercase;
  background:var(--blue-soft); color:#9fb8ff; border:1px solid rgba(59,109,240,.35);
}
.bl-go{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
  font-size:.75rem; transition:.2s;
}
.bl-item:hover .bl-go{ background:var(--blue); border-color:var(--blue); color:#fff; }

.bl-noresult{ text-align:center; color:var(--text-mute); padding:26px 0; font-size:.9rem; }

/* ── Boş durum ── */
.bl-empty{
  text-align:center; padding:56px 22px; border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1);
}
.bl-empty > i{ font-size:2.4rem; color:var(--text-mute); }
.bl-empty h2{ margin:14px 0 6px; font-size:1.2rem; color:var(--text); }
.bl-empty p{ margin:0 0 18px; color:var(--text-dim); font-size:.88rem; }

/* ── Breadcrumb ── */
.crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.8rem; color:var(--text-mute); margin-bottom:16px;
}
.crumbs a{ color:var(--text-dim); transition:.2s; }
.crumbs a:hover{ color:var(--blue); }
.crumbs .sep{ font-size:.6rem; opacity:.6; }
.crumbs span{ color:var(--text); font-weight:600; }

/* ── Detay kartı ── */
.bd-card{
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(10,11,16,.5));
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--sh-card), inset 0 1px 0 rgba(255,255,255,.05);
}
.bd-head{
  display:flex; align-items:center; gap:16px; padding:22px 22px 18px;
  border-bottom:1px solid var(--border-soft);
  background:radial-gradient(ellipse 70% 120% at 0% 0%, rgba(59,109,240,.14), transparent 70%);
}
.bd-logo{
  flex:0 0 auto; width:110px; height:56px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.bd-logo img{ max-width:88%; max-height:82%; object-fit:contain; }
.bd-logo span{ font-family:var(--f-display); font-weight:800; font-size:1.1rem; color:var(--plat-2); }
.bd-headtxt{ min-width:0; }
.bd-title{ font-size:1.5rem; font-weight:800; line-height:1.2; color:var(--text); }
.bd-metaline{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.bd-chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:99px;
  font-size:.75rem; font-weight:600; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--border);
}
.bd-chip i{ font-size:.7rem; color:var(--text-mute); }
.bd-chip.cat{ color:#9fb8ff; background:var(--blue-soft); border-color:rgba(59,109,240,.35); }
.bd-chip.cat i{ color:#9fb8ff; }
.bd-chip.gift{ color:#ffd9df; background:var(--red-soft); border-color:rgba(228,43,69,.35); }
.bd-chip.gift i{ color:#ff8ea0; }

.bd-image{ padding:20px 22px 0; }
.bd-image img{
  width:100%; height:auto; border-radius:var(--r-md);
  border:1px solid var(--border-soft); box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.bd-desc{
  padding:20px 22px 4px; color:var(--text-dim); font-size:.95rem; line-height:1.75;
  white-space:normal; word-break:break-word;
}

/* ── Alt kısım: Giriş butonu ── */
.bd-cta{ padding:22px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.bd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:420px; padding:16px 26px; border-radius:999px;
  font-size:1.02rem; font-weight:800; letter-spacing:.4px; color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--blue-deep));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(59,109,240,.35);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.bd-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 18px 44px rgba(59,109,240,.5); }
.bd-btn:active{ transform:translateY(0); }
.bd-btn.small{
  width:auto; padding:11px 20px; font-size:.86rem; box-shadow:none;
  background:var(--surface-2); border-color:var(--border); color:var(--text);
}
.bd-cta-note{
  display:flex; align-items:center; gap:8px; text-align:center;
  font-size:.74rem; color:var(--text-mute);
}
.bd-back{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-size:.85rem; font-weight:600; color:var(--text-dim); transition:.2s;
}
.bd-back:hover{ color:var(--blue); }

@media (max-width:640px){
  .bonus-page{ padding:18px 14px 36px; }
  .bl-head h1{ font-size:1.35rem; }
  .bl-item{ padding:12px; gap:11px; }
  .bl-logo{ width:64px; height:36px; }
  .bl-name{ font-size:.92rem; }
  .bd-head{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px 16px 14px; }
  .bd-title{ font-size:1.2rem; }
  .bd-image, .bd-desc, .bd-cta{ padding-left:16px; padding-right:16px; }
  .bd-btn{ max-width:none; }
}