/* Pusula Oyun (Bonus Pusula's games): the site's colours, navy black with gold, Cinzel titles.
   The hero (hero.html) replaces the default banner: the Bonus Pusula wordmark over a gold "OYUNLAR",
   then the Altın Pusula and Pusula 21 cards. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&display=swap");

:root {
  --bg: #07090e;
  --bg-2: #0f1420;
  --card: rgba(255, 255, 255, 0.05);
  --card-strong: rgba(255, 255, 255, 0.09);
  --line: rgba(240, 180, 41, 0.18);
  --text: #e8ecf4;
  --muted: #9aa4b8;
  --gold: #f5c84a;
  /* the per-game accents become the site's gold and blue */
  --green: #f0b429;
  --sky: #38bdf8;
  --violet: #f5c84a;
  --pink: #e0a21a;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --gold-1: #ffe7a3;
  --gold-2: #f5c84a;
  --gold-3: #f0b429;
  --gold-4: #b9800f;
}

.app-bg {
  background:
    linear-gradient(rgba(7, 9, 14, 0.4), rgba(7, 9, 14, 0.62)),
    url("wallpaper.webp") center top / cover no-repeat,
    var(--bg);
}

.hero.brand-hero {
  aspect-ratio: auto;
  overflow: visible;
  border: 0;
  box-shadow: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0 22px;
  container-type: inline-size; /* the title sizes itself to this box, not to the window */
}

/* more specific than the app's `.hero img` (full-size cover) rule */
.hero.brand-hero .brand-hero-logo {
  display: block;
  width: min(78%, 320px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(240, 180, 41, 0.2));
}

/* fine gold rules either side of the title */
.brand-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.brand-hero-title::before,
.brand-hero-title::after {
  content: "";
  flex: 1 1 0;
  min-width: 10px;
  max-width: 56px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(240, 180, 41, 0), var(--gold-2));
}
.brand-hero-title::after { background: linear-gradient(270deg, rgba(240, 180, 41, 0), var(--gold-2)); }

/* the glow sits on a wrapper: filters on a background-clip:text element misbehave in some WebViews */
.brand-hero-glow {
  display: inline-block;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 6px 16px rgba(240, 180, 41, 0.25));
  animation: brand-glow 3.6s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}

.brand-hero-word {
  display: inline-block;
  font: 800 clamp(30px, 11vw, 46px) / 1.05 var(--display);
  font-size: clamp(30px, 11.5cqi, 46px);
  white-space: nowrap;
  letter-spacing: 0.14em;
  margin-right: -0.14em; /* tracking adds space after the last letter; keep the word centred */
  color: var(--gold-2); /* if background-clip:text is unsupported */
  background:
    linear-gradient(105deg, transparent 22%, rgba(255, 252, 235, 0.45) 38%, #fffdf2 50%, rgba(255, 252, 235, 0.45) 62%, transparent 78%) -160% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 40%, var(--gold-3) 75%, var(--gold-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-shine 3.6s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}

/* the light crosses the word, then the word rests before the next pass */
@keyframes brand-shine {
  0%, 18% { background-position: -160% 0, 0 0; }
  62%, 100% { background-position: 260% 0, 0 0; }
}
@keyframes brand-glow {
  0%, 18%, 70%, 100% { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 6px 16px rgba(240, 180, 41, 0.25)); }
  40% { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 4px 26px rgba(255, 214, 110, 0.7)); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-hero-word,
  .brand-hero-glow { animation: none; }
}

/* Altın Pusula and Pusula 21 cards at the top of the list (they open /oyunlar/ on this site) */
.brand-promo {
  position: relative;
  display: block;
  margin: 0 0 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(240, 180, 41, 0.4);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(240, 180, 41, 0.14);
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.brand-promo img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.brand-promo-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 26px 110px 12px 14px;
  background: linear-gradient(180deg, rgba(7, 9, 14, 0), rgba(7, 9, 14, 0.92) 55%);
}
.brand-promo-info b { font: 800 20px/1.1 var(--display); color: var(--gold-1); letter-spacing: 0.02em; }
.brand-promo-info small { font-size: 13px; color: #c3cad8; }
.brand-promo-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(180deg, #f8d567, #e0a21a);
  color: #0b0e14;
  font: 800 11px/1.4 var(--display); letter-spacing: 0.1em;
}
.brand-promo-play {
  position: absolute; right: 12px; bottom: 14px;
  padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #f8d567, #e0a21a);
  border: 1px solid #ffe08a;
  color: #0b0e14;
  font: 800 14px/1 var(--display); letter-spacing: 0.08em;
  box-shadow: 0 0 16px rgba(240, 180, 41, 0.35);
}
.brand-promo:active { transform: scale(0.985); }