/* ============================================================
   style.css — Sohbetella Rose Gold Teması
   ============================================================ */

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

:root {
  --bg:       #2a1520;
  --bg2:      #341820;
  --bg3:      #3e1e28;
  --card:     #3a1c24;
  --card2:    #44202c;
  --border:   #6a3040;
  --primary:  #c9866a;
  --primary2: #b06b50;
  --secondary:#e8a090;
  --accent:   #d4967c;
  --rose:     #e8b4a0;
  --gold:     #c9866a;
  --text:     #f5e8e4;
  --muted:    #9a7a72;
  --radius:   14px;
  --shadow:   0 4px 24px rgba(0,0,0,.55);
  --trans:    .22s ease;

  /* Rose Gold gradient */
  --rg-grad: linear-gradient(135deg, #c9866a 0%, #e8b4a0 40%, #b87a5e 70%, #d4967c 100%);
  --rg-glow: rgba(201,134,106,.18);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
body.preload { overflow: hidden; height: 100vh; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── TICKER ── */
.ticker {
  background: linear-gradient(90deg, #1a0c10 0%, #3e2028 40%, #3a1820 100%);
  border-bottom: 1px solid #4a2830;
  padding: 4px 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 200;
  position: relative;
  line-height: 1.2;
}
.ticker::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,134,106,.06) 50%, transparent 100%);
  pointer-events: none;
}
.ticker-belt {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: scrollX 40s linear infinite;
  width: max-content;
}
.ticker-item {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--rg-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ticker-item i {
  font-size: .62rem;
  -webkit-text-fill-color: var(--primary);
  color: var(--primary);
}
@keyframes scrollX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── HEADER ── */
.hd {
  background: rgba(52,24,32,.96);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--trans);
  backdrop-filter: blur(12px);
}
.hd.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.7); }
.hd-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 66px; width: auto; object-fit: contain; }

.hd-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Search */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  gap: 8px;
  transition: border-color var(--trans);
}
.search-wrap:focus-within { border-color: var(--primary); }
.si { color: var(--muted); font-size: .85rem; pointer-events: none; }
.search-wrap input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: .82rem;
  font-family: inherit;
  width: 180px;
  height: 38px;
}
.search-wrap input::placeholder { color: var(--muted); }
.search-clear {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: .75rem;
  padding: 2px;
  display: none;
}
.search-wrap.has-val .search-clear { display: block; }

.hd-tg-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #b87a5e, #c9866a);
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: .78rem;
  font-weight: 600;
  transition: all var(--trans);
  white-space: nowrap;
  border: 1px solid rgba(201,134,106,.3);
}
.hd-tg-btn:hover {
  background: linear-gradient(135deg, #c9866a, #e8b4a0);
  box-shadow: 0 2px 12px var(--rg-glow);
}
.hd-tg-btn i { font-size: 1rem; }

/* ── PAGE ── */
.page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 20px 60px;
  width: 100%;
  flex: 1 0 auto;
}

/* Search info */
.search-info {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--muted);
}
.search-info i { color: var(--primary); }
.search-info button {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: .75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: border-color var(--trans), color var(--trans);
}
.search-info button:hover { border-color: var(--primary); color: var(--primary); }

/* ── SECTION HEADER ── */
.sec-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  margin-top: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sec-header:first-of-type { margin-top: 0; }
.sec-header::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--rg-grad);
  border-radius: 2px;
}
.sec-header .sec-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}
/* Section 1 — ANA SPONSOR */
.sec-icon.ana  { background: linear-gradient(135deg, #b87a5e22, #c9866a33); border: 1px solid #c9866a55; color: var(--primary); }
/* Section 2 — VIP */
.sec-icon.vip  { background: linear-gradient(135deg, #7c3aed22, #a855f733); border: 1px solid #a855f755; color: #c084fc; }
/* Section 3 — NORMAL */
.sec-icon.norm { background: linear-gradient(135deg, #0ea5e922, #38bdf833); border: 1px solid #38bdf855; color: #7dd3fc; }

.sec-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.sec-header h2 span {
  background: var(--rg-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sec-header.vip-header h2 span {
  background: linear-gradient(135deg, #a855f7, #c084fc, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sec-header.norm-header h2 span {
  background: linear-gradient(135deg, #38bdf8, #7dd3fc, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sec-header .sec-badge {
  margin-left: auto;
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.sec-badge.ana-badge  { background: rgba(201,134,106,.15); color: var(--primary); border: 1px solid rgba(201,134,106,.3); }
.sec-badge.vip-badge  { background: rgba(168,85,247,.15); color: #c084fc; border: 1px solid rgba(168,85,247,.3); }
.sec-badge.norm-badge { background: rgba(56,189,248,.15); color: #7dd3fc; border: 1px solid rgba(56,189,248,.3); }

.sec-header p { font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* ── GRIDS ── */
/* ANA SPONSOR — yatay panel kartlar, 2 sütun geniş ekranda */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
/* VIP — dikey watermark kartlar */
.sp-grid--vip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* NORMAL — kompakt satır kartlar, daha çok sütun sığar */
.sp-grid--norm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) {
  .sp-grid--norm { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sp-grid--vip  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .sp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sp-grid--vip  { grid-template-columns: repeat(2, 1fr); }
  .sp-grid--norm { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SPONSOR CARD — PREMIUM EDITION
   Her kart logo renginden enerji alır: glow, kenarlık, buton,
   etiket ve şerit hepsi --logo-color'a bağlı. Tier'lar (ana/vip/
   norm) sadece ölçek ve "kişilik" farkı yaratır, renk farkı değil.
   ═══════════════════════════════════════════════════════════ */

@keyframes spShine {
  0%   { transform: translateX(-130%) skewX(-20deg); }
  100% { transform: translateX(230%)  skewX(-20deg); }
}
@keyframes spPulseRing {
  0%   { box-shadow: 0 0 0 0 var(--card-glow); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes spFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes spGemSpin {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-card::after, .sp-card.ana .sp-crown-band, .sp-card.vip .sp-vip-icon { animation: none !important; }
}

.sp-card {
  --card-accent: var(--primary);
  --card-glow:   var(--rg-glow);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  transition: transform .28s cubic-bezier(.2,.8,.3,1),
              box-shadow .28s cubic-bezier(.2,.8,.3,1),
              border-color .28s ease;
  isolation: isolate;
}

/* sürekli yumuşak parlama geçişi (shine sweep) — üstte ince ışık şeridi */
.sp-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  pointer-events: none;
  z-index: 4;
  animation: spShine 5.5s ease-in-out infinite;
  animation-delay: calc(var(--shine-delay, 0) * 1s);
}

/* Üst gradient çizgi (tier rengi / logo rengi) */
.sp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 3;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .sp-card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 18px 46px var(--card-glow);
    border-color: var(--card-accent);
  }
  .sp-card:hover .sp-btn { transform: scale(1.03); }
}

/* Logo renginden gelen dinamik vurgu — tüm tier'larda geçerli */
.sp-card[style*="--logo-color"] {
  border-color: color-mix(in srgb, var(--logo-color) 38%, var(--border));
}
.sp-card[style*="--logo-color"]::before {
  background: linear-gradient(90deg,
    transparent,
    var(--logo-color),
    color-mix(in srgb, var(--logo-color) 60%, #fff 25%),
    var(--logo-color),
    transparent
  );
}
@media (hover: hover) and (pointer: fine) {
  .sp-card[style*="--logo-color"]:hover {
    border-color: var(--logo-color);
    box-shadow: 0 18px 46px color-mix(in srgb, var(--logo-color) 32%, transparent);
  }
}
/* buton HER ZAMAN logo renginden — tüm tier'larda */
.sp-card[style*="--logo-color"] .sp-btn {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--logo-color) 80%, #0a0a0a 8%),
    color-mix(in srgb, var(--logo-color) 92%, #fff 8%)
  );
  box-shadow: 0 4px 16px color-mix(in srgb, var(--logo-color) 35%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .sp-card[style*="--logo-color"] .sp-btn:hover {
    filter: brightness(1.15) saturate(1.1);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--logo-color) 50%, transparent);
  }
}
.sp-card[style*="--logo-color"] .sp-label i,
.sp-card[style*="--logo-color"] .sp-ana-logo span,
.sp-card[style*="--logo-color"] .sp-vip-logo-chip span,
.sp-card[style*="--logo-color"] .sp-norm-logo span {
  color: var(--logo-color);
  -webkit-text-fill-color: var(--logo-color);
}
.sp-card[style*="--logo-color"] .sp-label {
  border-color: color-mix(in srgb, var(--logo-color) 35%, rgba(255,255,255,.1));
  background: color-mix(in srgb, var(--logo-color) 12%, rgba(255,255,255,.04));
}

/* ═══════════════════════════════════════════
   ANA SPONSOR — taçlı, en gösterişli, nabız glow
   ═══════════════════════════════════════════ */
.sp-card.ana {
  background: linear-gradient(160deg, #3e1e28 0%, #2a131c 100%);
  border-color: rgba(201,134,106,.55);
  box-shadow: 0 10px 38px rgba(201,134,106,.28), 0 6px 26px rgba(0,0,0,.45);
  --card-accent: var(--primary);
  --card-glow:   rgba(201,134,106,.45);
}
.sp-card.ana::before { background: var(--rg-grad); height: 4px; }
.sp-card.ana[style*="--logo-color"] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--logo-color) 24%, #1a0810) 0%,
    color-mix(in srgb, var(--logo-color) 13%, #110610) 100%
  );
  border-color: color-mix(in srgb, var(--logo-color) 48%, var(--border));
  --card-glow: color-mix(in srgb, var(--logo-color) 36%, transparent);
}
.sp-card.ana[style*="--logo-color"]::before {
  background: linear-gradient(90deg,
    transparent, var(--logo-color),
    color-mix(in srgb, var(--logo-color) 55%, #fff 30%),
    var(--logo-color), transparent
  );
}
.sp-card.ana::after { animation-duration: 4.2s; }
.sp-card.ana { animation: anaAmbientGlow 3.2s ease-in-out infinite; }
@keyframes anaAmbientGlow {
  0%, 100% { box-shadow: 0 10px 38px rgba(201,134,106,.28), 0 6px 26px rgba(0,0,0,.45); }
  50%      { box-shadow: 0 14px 48px rgba(201,134,106,.42), 0 6px 26px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion: reduce) { .sp-card.ana { animation: none; } }

/* ═══════════════════════════════════════════
   VIP CARD — orta boy, mor tema, elmas nabız
   ═══════════════════════════════════════════ */
.sp-card.vip {
  background: linear-gradient(160deg, #2e1a3e 0%, #1c0e28 100%);
  border-color: rgba(168,85,247,.26);
  --card-accent: #a855f7;
  --card-glow:   rgba(168,85,247,.2);
}
.sp-card.vip::before { background: linear-gradient(135deg, #a855f7, #c084fc, #7c3aed); }
/* not[style*=--logo-color] durumunda fallback buton */
.sp-card.vip:not([style*="--logo-color"]) .sp-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
  box-shadow: 0 4px 16px rgba(168,85,247,.35);
}
@media (hover: hover) and (pointer: fine) {
  .sp-card.vip:not([style*="--logo-color"]) .sp-btn:hover {
    background: linear-gradient(135deg, #a855f7, #c084fc);
    box-shadow: 0 6px 20px rgba(168,85,247,.5);
  }
}
.sp-card.vip[style*="--logo-color"] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--logo-color) 20%, #180a28) 0%,
    color-mix(in srgb, var(--logo-color) 11%, #0e061e) 100%
  );
  border-color: color-mix(in srgb, var(--logo-color) 42%, rgba(168,85,247,.3));
  --card-glow: color-mix(in srgb, var(--logo-color) 30%, transparent);
}
.sp-card.vip[style*="--logo-color"]::before {
  background: linear-gradient(90deg,
    transparent, var(--logo-color),
    color-mix(in srgb, var(--logo-color) 50%, #c084fc 35%),
    var(--logo-color), transparent
  );
}

/* VIP elmas rozeti — köşede hafif dönen */
.sp-vip-icon {
  position: absolute;
  top: 9px; left: 9px;
  width: 22px; height: 22px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #c084fc);
  color: #fff;
  font-size: .62rem;
  z-index: 5;
  box-shadow: 0 3px 9px rgba(124,58,237,.32);
  animation: spGemSpin 3.4s ease-in-out infinite;
}
.sp-card.vip[style*="--logo-color"] .sp-vip-icon {
  background: linear-gradient(135deg, var(--logo-color), color-mix(in srgb, var(--logo-color) 50%, #c084fc 35%));
  box-shadow: 0 3px 9px color-mix(in srgb, var(--logo-color) 50%, transparent);
}

/* ═══════════════════════════════════════════
   NORMAL CARD — küçük, mavi tema, sade ama parlak
   ═══════════════════════════════════════════ */
.sp-card.norm {
  background: linear-gradient(160deg, #1a2e3e 0%, #0e1c28 100%);
  border-color: rgba(56,189,248,.24);
  --card-accent: #38bdf8;
  --card-glow:   rgba(56,189,248,.24);
}
.sp-card.norm::before { background: linear-gradient(135deg, #0ea5e9, #38bdf8, #7dd3fc); }
.sp-card.norm:not([style*="--logo-color"]) .sp-btn {
  background: linear-gradient(135deg, #0369a1, #0ea5e9); color: #fff;
  box-shadow: 0 4px 14px rgba(56,189,248,.3);
}
@media (hover: hover) and (pointer: fine) {
  .sp-card.norm:not([style*="--logo-color"]) .sp-btn:hover {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    box-shadow: 0 6px 18px rgba(56,189,248,.45);
  }
}
.sp-card.norm[style*="--logo-color"] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--logo-color) 20%, #0c1a28) 0%,
    color-mix(in srgb, var(--logo-color) 11%, #0a1220) 100%
  );
  border-color: color-mix(in srgb, var(--logo-color) 42%, rgba(56,189,248,.2));
  --card-glow: color-mix(in srgb, var(--logo-color) 27%, transparent);
}
.sp-card.norm[style*="--logo-color"]::before {
  background: linear-gradient(90deg,
    transparent, var(--logo-color),
    color-mix(in srgb, var(--logo-color) 50%, #7dd3fc 35%),
    var(--logo-color), transparent
  );
}

.sp-card.hidden { display: none; }

/* ── CARD BADGE — daha gösterişli, hafif nabız ── */
.sp-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: .62rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: .6px;
  text-transform: uppercase;
  z-index: 5;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  animation: spPulseRing 2.6s ease-out infinite;
}
.cbadge-red    { background: #ef4444; color: #fff; --card-glow: rgba(239,68,68,.5); }
.cbadge-green  { background: #22c55e; color: #fff; --card-glow: rgba(34,197,94,.5); }
.cbadge-gold   { background: var(--rg-grad); color: #fff; }
.cbadge-purple { background: #a855f7; color: #fff; --card-glow: rgba(168,85,247,.5); }

/* ══════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════
   ÜÇ FARKLI KART MİMARİSİ
   Ana: yatay panel | VIP: dikey watermark | Norm: kompakt satır
   ══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────
   ANA SPONSOR — yatay panel, logo solda
   ─────────────────────────────────────── */
.sp-card.ana {
  flex-direction: column;
  min-height: 168px;
}
.sp-crown-band {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  background: var(--rg-grad);
  color: #2a131c;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 4px 16px 5px;
  border-radius: 0 0 10px 10px;
  display: flex; align-items: center; gap: 5px;
  z-index: 5;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.sp-card.ana[style*="--logo-color"] .sp-crown-band {
  background: linear-gradient(135deg, var(--logo-color), color-mix(in srgb, var(--logo-color) 60%, #fff 30%));
  color: #1a0d10;
}
.sp-ana-body {
  display: flex;
  align-items: stretch;
  flex: 1;
  padding-top: 30px;
}
.sp-ana-logo {
  width: 38%;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,.25));
  flex-shrink: 0;
  position: relative;
}
.sp-ana-logo::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border), transparent);
}
.sp-ana-logo img {
  width: 100%; height: 100%;
  max-height: 100px;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.sp-ana-logo span {
  font-size: 1.6rem; font-weight: 800;
  background: var(--rg-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: 1px;
}
.sp-card.ana:hover .sp-ana-logo img { transform: scale(1.08) rotate(-1deg); }

.sp-ana-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 14px 20px;
  gap: 8px;
  min-width: 0;
}
.sp-ana-name {
  font-size: clamp(.82rem, 3.2vw, 1.05rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  line-height: 1.25;
}
.sp-ana-desc {
  font-size: clamp(.62rem, 2.4vw, .78rem);
  color: rgba(255,255,255,.78);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  word-break: break-word;
}
.sp-ana-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  flex-wrap: wrap;
}
.sp-ana-foot .sp-label { flex: 1; min-width: 110px; }
.sp-ana-foot .sp-btn.sp-btn--ana {
  width: auto;
  padding: 11px 20px;
  flex-shrink: 0;
}

/* ───────────────────────────────────────
   VIP — dikey, devasa logo watermark arkada
   ─────────────────────────────────────── */
.sp-card.vip {
  min-height: 230px;
  padding-top: 4px;
}
.sp-vip-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.6) rotate(-6deg);
  filter: blur(.4px);
}
.sp-vip-watermark img { width: 100%; height: 100%; object-fit: contain; }

.sp-vip-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 14px 14px;
  gap: 8px;
  flex: 1;
}
.sp-vip-logo-chip {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(0,0,0,.3);
  border: 2px solid rgba(168,85,247,.4);
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  box-shadow: 0 0 0 3px rgba(168,85,247,.05), 0 6px 18px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.sp-card.vip[style*="--logo-color"] .sp-vip-logo-chip {
  border-color: color-mix(in srgb, var(--logo-color) 55%, rgba(168,85,247,.4));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--logo-color) 14%, transparent), 0 6px 18px rgba(0,0,0,.4);
}
.sp-vip-logo-chip img { width: 100%; height: 100%; object-fit: contain; }
.sp-vip-logo-chip span {
  font-size: 1rem; font-weight: 800;
  background: linear-gradient(135deg, #a855f7, #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sp-card.vip:hover .sp-vip-logo-chip { transform: scale(1.08) translateY(-2px); }

.sp-vip-name {
  font-size: clamp(.72rem, 2.6vw, .88rem);
  font-weight: 800;
  color: #f3e8ff;
  letter-spacing: .2px;
  line-height: 1.25;
  word-break: break-word;
}
.sp-vip-desc {
  font-size: clamp(.56rem, 2vw, .68rem);
  color: rgba(243,232,255,.68);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.sp-vip-body .sp-label { width: 100%; }
.sp-btn--vip {
  background: transparent !important;
  border: 1.5px solid #a855f7 !important;
  color: #e9d5ff !important;
  box-shadow: none !important;
  margin-top: 2px;
}
.sp-card.vip[style*="--logo-color"] .sp-btn--vip {
  border-color: var(--logo-color) !important;
  color: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
  .sp-btn--vip:hover {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    box-shadow: 0 6px 20px rgba(168,85,247,.45) !important;
  }
  .sp-card.vip[style*="--logo-color"] .sp-btn--vip:hover {
    background: linear-gradient(135deg, var(--logo-color), color-mix(in srgb, var(--logo-color) 60%, #fff 25%)) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--logo-color) 45%, transparent) !important;
  }
}

/* ───────────────────────────────────────
   NORMAL — kompakt yatay satır
   ─────────────────────────────────────── */
.sp-card.norm {
  min-height: auto;
}
.sp-norm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.sp-norm-logo {
  width: 62px; height: 62px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 8px;
  transition: transform .25s ease;
}
.sp-norm-logo img { width: 100%; height: 100%; object-fit: contain; }
.sp-norm-logo span {
  font-size: .92rem; font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sp-card.norm:hover .sp-norm-logo { transform: scale(1.1); }

.sp-norm-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-norm-name {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-norm-mid .sp-label {
  width: fit-content;
  max-width: 100%;
}

.sp-norm-row .sp-btn.sp-btn--norm {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 12px;
  flex-shrink: 0;
}
.sp-btn--norm i { font-size: 1.05rem; }

/* ── BONUS ETİKETİ (ortak) ── */
.sp-label {
  font-size: clamp(.6rem, 2.2vw, .74rem);
  font-weight: 700;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 6px 10px;
  letter-spacing: .1px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
  transition: border-color var(--trans), background var(--trans);
}
.sp-card.vip  .sp-label { font-size: clamp(.54rem, 2vw, .66rem); padding: 5px 8px; background: rgba(168,85,247,.1); border-color: rgba(168,85,247,.22); justify-content: center; }
.sp-card.norm .sp-label { font-size: clamp(.64rem, 2.2vw, .74rem); padding: 5px 10px; background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.2); justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-label i { color: var(--primary); flex-shrink: 0; font-size: .7rem; }
.sp-card.vip  .sp-label i { color: #c084fc; }
.sp-card.norm .sp-label i { color: #38bdf8; font-size: .72rem; }

/* ── GİRİŞ BUTONU (ortak temel) ── */
.sp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #b87a5e, #c9866a);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 9px;
  width: 100%;
  transition: all .22s cubic-bezier(.2,.8,.3,1);
  border: none;
  letter-spacing: .3px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  position: relative;
  overflow: hidden;
}
.sp-btn i {
  font-size: .65rem;
  transition: transform .22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sp-card:hover .sp-btn i { transform: translateX(3px); }
  .sp-card.norm:hover .sp-btn--norm i { transform: translateX(2px); }
}

/* ── NO RESULTS ── */
.no-results {
  display: none;
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  gap: 8px;
}
.no-results.show { display: flex; align-items: center; justify-content: center; }
.no-results i { color: var(--primary); }

/* ── FOOTER SOCIAL (Bizi Takip Et) ── */
.soc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
.soc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--border);
  transition: background var(--trans), border-color var(--trans), transform .1s;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .soc-btn:hover { transform: translateY(-2px); }
  .soc-btn.telegram:hover { background: rgba(201,134,106,.15); border-color: var(--rose); }
  .soc-btn.instagram:hover { background: rgba(225,48,108,.12); }
  .soc-btn.youtube:hover   { background: rgba(255,0,0,.12); }
  .soc-btn.twitter:hover   { background: rgba(29,155,240,.12); }
  .soc-btn.discord:hover   { background: rgba(114,137,218,.12); }
  .soc-btn.whatsapp:hover  { background: rgba(37,211,102,.12); }
  .soc-btn.tiktok:hover    { background: rgba(255,0,80,.12); }
  .soc-btn.facebook:hover  { background: rgba(24,119,242,.12); }
}
.soc-btn.telegram  { border-color: var(--primary); }
.soc-btn.instagram { border-color: #e1306c; }
.soc-btn.youtube   { border-color: #ff0000; }
.soc-btn.twitter   { border-color: #1d9bf0; }
.soc-btn.discord   { border-color: #7289da; }
.soc-btn.whatsapp  { border-color: #25d366; }
.soc-btn.tiktok    { border-color: #ff0050; }
.soc-btn.facebook  { border-color: #1877f2; }

/* ── FOOTER ── */
.ft {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 30px 20px;
  flex-shrink: 0;
}
.ft-inner { max-width: 1160px; margin: 0 auto; }
.ft-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ft-soc { display: none; }
.ft-soc-follow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ft-soc-label {
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}
.ft-soc-label span {
  background: var(--rg-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: .73rem;
  color: var(--muted);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.ft-warn { display: flex; align-items: center; gap: 5px; color: var(--secondary); }

/* ══════════════════════════════════════════════════════════════
   POPUP — PREMIUM EDITION
   Ana Sponsor kartı kalitesinde: shine sweep, logo-renk glow,
   opsiyonel görsel banner desteği.
   ══════════════════════════════════════════════════════════════ */
.popup-ov {
  position: fixed;
  inset: 0;
  background: rgba(10,4,6,.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  padding: 20px;
}
.popup-ov.open { opacity: 1; pointer-events: all; }

.popup-box {
  background: linear-gradient(160deg, #3e1e28 0%, #2a131c 100%);
  border: 1px solid rgba(201,134,106,.4);
  border-radius: 22px;
  text-align: center;
  min-width: 300px;
  max-width: 380px;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both;
  transition: border-color var(--trans), background var(--trans), box-shadow var(--trans);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
@keyframes popIn { from { transform: scale(.85) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

/* Üst gradient şerit (Ana sponsor diliyle aynı) */
.popup-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--rg-grad);
  z-index: 5;
}
/* Shine sweep — aynı sponsor kartı dili */
.popup-box::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events: none;
  z-index: 4;
  animation: spShine 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .popup-box::after { animation: none; } }

.popup-box[style*="--logo-color"] {
  border-color: color-mix(in srgb, var(--logo-color) 48%, var(--border));
  box-shadow: 0 20px 60px color-mix(in srgb, var(--logo-color) 30%, transparent), 0 0 0 1px rgba(255,255,255,.04);
}
.popup-box[style*="--logo-color"]::before {
  background: linear-gradient(90deg,
    transparent, var(--logo-color),
    color-mix(in srgb, var(--logo-color) 55%, #fff 30%),
    var(--logo-color), transparent
  );
}

.popup-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: #fff;
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--trans);
  z-index: 10;
  backdrop-filter: blur(4px);
}
@media (hover: hover) and (pointer: fine) {
  .popup-close:hover { background: rgba(0,0,0,.65); transform: rotate(90deg); }
}

/* ── GÖRSEL BANNER (opsiyonel özel görsel) ──
   Görsel artık kırpılmıyor: bulanık dolgu arka plan üstüne, oranı korunarak (contain) basılır. */
.popup-visual {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.popup-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  background: rgba(20,8,12,.35);
}
.popup-visual img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.popup-visual-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, #2a131c 100%);
  pointer-events: none;
}

.popup-content {
  position: relative;
  z-index: 2;
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-visual + .popup-content { padding-top: 14px; margin-top: -36px; }

.popup-logo {
  width: 92px; height: 60px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.2);
  border-radius: 12px;
  padding: 8px;
}
.popup-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.popup-logo span {
  font-size: 1.2rem;
  font-weight: 800;
  background: var(--rg-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.popup-spark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: #2a131c;
  background: var(--rg-grad);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  animation: spPulseRing 2.4s ease-out infinite;
  --card-glow: rgba(201,134,106,.4);
}
.popup-box[style*="--logo-color"] .popup-spark {
  background: linear-gradient(135deg, var(--logo-color), color-mix(in srgb, var(--logo-color) 60%, #fff 30%));
  color: #1a0d10;
  --card-glow: color-mix(in srgb, var(--logo-color) 45%, transparent);
}

.popup-amount {
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 900;
  background: var(--rg-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -.5px;
  text-shadow: 0 4px 24px rgba(201,134,106,.3);
}
.popup-box[style*="--logo-color"] .popup-amount {
  background: linear-gradient(135deg, var(--logo-color), color-mix(in srgb, var(--logo-color) 60%, #fff 30%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.popup-label {
  color: rgba(255,255,255,.85);
  font-size: .92rem;
  font-weight: 700;
  margin: 8px 0 22px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1.4;
}
.popup-label span {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 2px;
}

.popup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, #b87a5e, #c9866a);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  padding: 14px 32px;
  border-radius: 12px;
  width: 100%;
  transition: all .22s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  letter-spacing: .3px;
}
.popup-box[style*="--logo-color"] .popup-cta {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--logo-color) 78%, #0a0a0a 8%),
    color-mix(in srgb, var(--logo-color) 92%, #fff 8%)
  );
  box-shadow: 0 6px 22px color-mix(in srgb, var(--logo-color) 38%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .popup-cta:hover {
    filter: brightness(1.15) saturate(1.1);
    transform: scale(1.02);
    box-shadow: 0 8px 28px rgba(201,134,106,.5);
  }
  .popup-box[style*="--logo-color"] .popup-cta:hover {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--logo-color) 55%, transparent);
  }
}

@media (max-width: 480px) {
  .popup-box { max-width: 94vw; border-radius: 18px; }
  .popup-visual { height: 130px; }
  .popup-content { padding: 22px 20px 22px; }
  .popup-amount { font-size: clamp(1.7rem, 11vw, 2.2rem); }
  .popup-label { font-size: .8rem; margin-bottom: 18px; }
  .popup-cta { padding: 13px 24px; font-size: .85rem; }
}


/* ── SCROLL TOP ── */
.stt {
  position: fixed;
  bottom: 24px; right: 20px;
  background: linear-gradient(135deg, #b87a5e, #c9866a);
  color: #fff;
  border: none;
  border-radius: 10px;
  width: 40px; height: 40px;
  font-size: .85rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--trans), transform var(--trans), background var(--trans);
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
}
.stt.show { opacity: 1; pointer-events: all; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .stt:hover { background: linear-gradient(135deg, #c9866a, #e8b4a0); }
}

/* ── REVEAL ── */
.reveal { opacity: 1; transform: none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .search-wrap input { width: 120px; }
  .hd-tg-btn span { display: none; }

  /* ANA — yatay panelde logo daralır */
  .sp-ana-logo { width: 34%; min-width: 90px; padding: 10px; }
  .sp-ana-info { padding: 12px 14px 12px 14px; gap: 6px; }
  .sp-ana-name { font-size: .92rem; }
  .sp-ana-desc { font-size: .72rem; -webkit-line-clamp: 2; }
  .sp-ana-foot { flex-direction: column; align-items: stretch; }
  .sp-btn--ana { width: 100%; }

  /* VIP — biraz daha kompakt watermark kart */
  .sp-vip-body { padding: 26px 10px 12px; gap: 6px; }
  .sp-vip-logo-chip { width: 52px; height: 52px; }
  .sp-vip-name { font-size: .8rem; }
  .sp-vip-desc { font-size: .62rem; min-height: 22px; }

  /* NORMAL — büyük ve net kalsın, sadece hafif sıkışır */
  .sp-norm-row { padding: 12px 14px; gap: 12px; }
  .sp-norm-logo { width: 54px; height: 54px; }
  .sp-norm-name { font-size: .9rem; }
  .sp-norm-row .sp-btn.sp-btn--norm { width: 42px; height: 42px; }

  .sp-crown-band { font-size: .56rem; padding: 3px 12px 4px; }
  .sp-vip-icon { width: 20px; height: 20px; font-size: .56rem; top: 7px; left: 7px; }
  .sp-badge { top: 7px; right: 7px; font-size: .56rem; padding: 3px 7px; }
  .soc-btn { min-width: 140px; }

  /* Footer mobilde daha kompakt: dikey boşluklar azaltılır */
  .ft { padding: 18px 16px; }
  .ft-top {
    align-items: flex-start;
    margin-bottom: 12px;
  }
  .ft-soc-follow { gap: 8px; }
  .ft-soc-label { font-size: .78rem; }
  .soc-btn { min-width: 0; padding: 6px 12px; font-size: .7rem; }
  .ft-bottom { padding-top: 12px; font-size: .68rem; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   LOGO BANDI
   Her zaman SAĞDAN başlar, SOLA kayar.
   Klonlama YOK: kaç logo olursa olsun hepsi tek sırada yan yana,
   topluca ekranın tam sağından girer, tam solundan çıkar,
   ardından kesintisiz (sıçramasız) tekrar sağdan başlar.
   Ekran boyutundan bağımsız çalışır, sabit hızda (JS ile hesaplanır).
   ═══════════════════════════════════════════════════════════ */
.logo-band {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 78px; /* track absolute konumlandığı için band'in kendi yüksekliği olmalı */
}

/* Kenar soluklaştırma */
.logo-band::before,
.logo-band::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.logo-band::before { left: 0;  background: linear-gradient(to right, var(--bg2) 0%, transparent 100%); }
.logo-band::after  { right: 0; background: linear-gradient(to left,  var(--bg2) 0%, transparent 100%); }

/* Track: tüm logolar tek sırada, band içinde absolute konumlanır,
   topluca sağdan tam girip soldan tam çıkar (kesintisiz tekrarlar). */
.logo-band-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: bandScrollSingle linear infinite;
  animation-duration: 18s;
}
@keyframes bandScrollSingle {
  from { transform: translate(var(--single-start, 100%), -50%); }
  to   { transform: translate(var(--single-end, -100%), -50%); }
}

.logo-band-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 50px;
  flex-shrink: 0;
  margin: 0 14px;
  opacity: 0.7;
  border-radius: 8px;
  padding: 6px;
  /* Dokunmatik cihazlarda transition yok */
  transition: none;
}
/* Hover sadece mouse cihazlarda */
@media (hover: hover) and (pointer: fine) {
  .logo-band-item {
    transition: opacity 0.2s, transform 0.2s;
  }
  .logo-band-item:hover {
    opacity: 1;
    transform: scale(1.08);
  }
  .logo-band-item:hover img { filter: none; }
  .logo-band:hover .logo-band-track { animation-play-state: paused; }
}

.logo-band-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(20%) sepia(10%);
}

/* Mobil için daha küçük band item */
@media (max-width: 480px) {
  .logo-band {
    padding: 8px 0;
    min-height: 50px;
  }
  .logo-band-item {
    width: 76px;
    height: 32px;
    margin: 0 8px;
  }
  .page { padding-top: 16px; }
}
/* ══════════════════════════════════════════════════════════════
   LOADING SCREEN — logo merkezde, soldan sağa parlama geçişi
   ══════════════════════════════════════════════════════════════ */
/* ── LOADING OVERLAY ── */
.loader-ov {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 50% 42%, #3a1c24 0%, #2a1520 55%, #1d0e16 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 900px;
  transition: opacity .5s ease, visibility .5s ease;
}
.loader-ov.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(52vw, 400px);
  max-height: 55vh;
  object-fit: contain;
  filter: drop-shadow(0 6px 32px rgba(201,134,106,.55));
  transform-origin: center center;
  opacity: 0;
  animation: loaderSequence 2.8s ease-in-out 1 both;
}

/*
 * 0–15%   belirir, küçükten ortaya gelir
 * 15–38%  3D dalgalanma: rotateY + rotateX + translateY ile sağa-sola sallanır
 * 38–58%  sol tarafa zoom-in (yakınlaşma)
 * 58–82%  sağa pan (logo soldan sağa okunur)
 * 82–100% uzaklaşır ve solar
*/
@keyframes loaderSequence {
  0%   { opacity:0;  transform: translate(-50%,-50%) scale(.5) rotateY(0deg); }
  12%  { opacity:1;  transform: translate(-50%,-50%) scale(1)  rotateY(0deg) rotateX(0deg); }
  20%  { opacity:1;  transform: translate(-50%,-53%) scale(1)  rotateY(12deg) rotateX(-4deg); }
  27%  { opacity:1;  transform: translate(-50%,-47%) scale(1)  rotateY(-10deg) rotateX(5deg); }
  34%  { opacity:1;  transform: translate(-50%,-51%) scale(1)  rotateY(6deg) rotateX(-2deg); }
  40%  { opacity:1;  transform: translate(-50%,-50%) scale(1)  rotateY(0deg) rotateX(0deg); }
  50%  { opacity:1;  transform: translate(-70%,-50%) scale(2)  rotateY(0deg); }
  72%  { opacity:1;  transform: translate(-30%,-50%) scale(2)  rotateY(0deg); }
  84%  { opacity:1;  transform: translate(-30%,-50%) scale(2)  rotateY(0deg); }
  100% { opacity:0;  transform: translate(-30%,-50%) scale(.6) rotateY(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-logo-img {
    animation: none;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
}

@media (max-width: 480px) {
  .loader-logo-img { width: min(78vw, 300px); }
}