/* ==========================================================================
   Ortak küçük parçalar: güvenlik bileşenleri, duyuru şeridi, hikâye halkaları,
   katalog başlığı, canlı casino çipleri, yardımcılar. Eski temanın lobby.css ve
   theme.css dosyalarından (2026-10-14'te kaldırıldı) diğer sayfaların da
   kullandığı kurallar buraya taşındı.
   ========================================================================== */

/* ---------- güvenlik: form bal küpü, uyarı balonu, devtools şeridi ---------- */
/* form bal küpü: ekran okuyucudan da gizli değil ki bot görsün, ama gözle görünmesin */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.sec-flash {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9999;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 14px) scale(.96);
  transition: opacity .22s var(--ease), transform .3s var(--ease-spring);
  pointer-events: none;
}
.sec-flash.is-shown { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (max-width: 720px) {
  .sec-flash { bottom: calc(var(--bottom-nav-h, 62px) + 16px); white-space: normal; text-align: center; }
}

/* devtools açıkken üstte ince bir şerit — kullanıcıya "izleniyor" hissi değil,
   geliştiriciye kendi oturumunun işaretlendiğini gösteren nötr bir bilgi */
.devtools-open .topbar::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: sec-sweep 2.4s linear infinite;
}
@keyframes sec-sweep {
  0%   { opacity: .25; }
  50%  { opacity: .9; }
  100% { opacity: .25; }
}

/* ---------- duyuru şeridi (panel › Tasarım › Site ayarları) ---------- */
.announce {
  --tone: var(--accent);
  --tone-rgb: var(--accent-rgb);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 52px 8px var(--gutter);
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--tone-rgb), .28);
  background: linear-gradient(90deg, rgba(var(--tone-rgb), .2), rgba(var(--tone-rgb), .07) 60%, rgba(var(--tone-rgb), .14));
  color: var(--text);
  font-size: 13.5px;
  animation: announce-in .45s var(--ease) both;
}
.announce--success { --tone: var(--green); --tone-rgb: 34, 197, 94; }
.announce--warning { --tone: #fab219; --tone-rgb: 250, 178, 25; }
.announce--promo { --tone: var(--violet); --tone-rgb: 139, 92, 246; }
/* kimlik belgesi uyarısı: kapatılamaz, kapatma düğmesinin yeri de ayrılmaz */
.announce--kyc { --tone: #fab219; --tone-rgb: 250, 178, 25; padding-right: var(--gutter); }
.announce--kyc .announce__text b { color: var(--tone); }

/* üzerinden geçen ışık — transform ile, boyama yok */
.announce::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  transform: translateX(-100%);
  animation: announce-sweep 5.5s var(--ease) 1s infinite;
  pointer-events: none;
}

.announce__ico { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; background: rgba(var(--tone-rgb), .18); color: var(--tone); }
.announce__ico .ico { width: 16px; height: 16px; }
.announce__text { flex: 1; min-width: 0; font-weight: 600; line-height: 1.4; }
.announce__link { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: rgba(var(--tone-rgb), .2); color: #fff; font-weight: 700; font-size: 12.5px; white-space: nowrap; transition: background-color .2s; }
.announce__link:hover { background: rgba(var(--tone-rgb), .34); }
.announce__link .ico { width: 14px; height: 14px; }
.announce__close { position: absolute; right: 10px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--text-dim); transform: translateY(-50%); }
.announce__close:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.announce__close .ico { width: 16px; height: 16px; }
.announce.is-closing { animation: announce-out .3s var(--ease) forwards; }
/* yalnızca kapatılabilir duyuru (data-announce) saklanır; kimlik uyarısı kalır */
.no-announce .announce[data-announce] { display: none; }

@keyframes announce-in { from { opacity: 0; transform: translateY(-100%); } }
@keyframes announce-out { to { opacity: 0; transform: translateY(-100%); } }
@keyframes announce-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(400%); } }

@media (max-width: 720px) {
  .announce { padding-left: 12px; font-size: 13px; }
  .announce__link span { display: none; }
}

/* ---------- hikâye halkaları (lobi; pencere: includes/modals.php, lobby.js) ---------- */
.stories { display: flex; gap: 14px; margin-top: 18px; padding: 4px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; width: 78px; animation: fade-up .5s var(--ease) backwards; animation-delay: var(--d); }
.story__ring { position: relative; display: grid; place-items: center; width: 70px; height: 70px; padding: 3px; border-radius: 50%; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease-spring); }
/* dönen halka: transform ile dönen katman (boyama yok) */
.story__ring::before { content: ''; position: absolute; inset: 0; z-index: -1; background: conic-gradient(var(--c1), var(--cyan), var(--c1)); animation: spin 4s linear infinite; }
.story.is-seen .story__ring::before { background: var(--bg-4); animation: none; }
.story__ico { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg-0); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c1) 65%, #fff), var(--c1) 45%, var(--c2)); color: #fff; }
.story__ico .ico { width: 26px; height: 26px; }
.story:hover .story__ring { transform: scale(1.08) rotate(-4deg); }
.story__label { max-width: 100%; font-size: 11.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
  .story { width: 68px; }
  .story__ring { width: 62px; height: 62px; }
}

/* ---------- casino ve canlı casino kataloğu: başlık ve araçlar ---------- */
.catalog__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.catalog__tools { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.catalog__tools .input { flex: 1; min-width: 220px; }

/* ---------- canlı casino başlığındaki fişler (views/canli-casino.php) ---------- */
.chip3d { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: repeating-conic-gradient(var(--chip) 0 30deg, #fff 30deg 45deg); box-shadow: inset 0 0 0 7px var(--chip), 0 8px 16px rgba(0, 0, 0, .45); }
.chip3d::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--chip); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.chip3d--a { --chip: #2f7bff; right: 150px; bottom: 18px; animation: float-y 3.6s ease-in-out infinite; }
.chip3d--b { --chip: #ef4444; right: 22px; top: 18px; width: 38px; height: 38px; animation: float-y 4.4s ease-in-out infinite reverse; }

/* ---------- yardımcılar ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sec-flash { transition-duration: .01ms; }
  .devtools-open .topbar::after,
  .announce, .announce::after { animation: none; }
}