/* Font-family düzeltmesi — canlı referansta (m.galabet1101.com,
   .layout-header-holder-bc VE .header-bc, 2026-09-06'da document.
   styleSheets'ten okundu) TÜM site font-family: Roboto, Arial, Helvetica,
   sans-serif kullanıyor (Roboto İLK sırada). css/site.css'teki (Next.js
   build çıktısı) body kuralı system-ui/-apple-system'i Roboto'dan ÖNCE
   koyuyordu — Roboto @font-face dosyaları zaten yüklüydü (bkz. site.css
   içindeki @font-face bloğu, media/ klasöründeki .woff2'ler) ama sıralama
   yüzünden fiilen HİÇ kullanılmıyordu, tarayıcı hep işletim sisteminin
   kendi fontuna (macOS'ta San Francisco, Windows'ta Segoe UI) düşüyordu. */
body { font-family: Roboto, Arial, Helvetica, sans-serif; }

/* Modül 8 — vanilla JS ile toggle edilen etkileşim durumları için el yazımı
   CSS. Next.js kaynağında bu durumlar React state'e bağlı koşullu Tailwind
   class'larıydı (ör. side-rail.tsx: `mobileMenuOpen && "min-[900px]:w-60 ..."`);
   burada aynı görsel sonucu üreten sabit değerlerle (Tailwind'in ürettiği
   piksel karşılıkları) tek bir toggle class'ı üzerinden veriyoruz. */

/* Modül 8 doğrulama turu: css/site.css tek seferlik `npm run build` çıktısı
   olduğu için (Bölüm 6 kararı), sonradan eklenen sayfalarda Next.js
   kaynağında birebir aynı arbitrary-value class olsa bile derlenmiş
   çıktıda bulunmayabiliyor (ör. build sırasında o rota taranmamışsa).
   Aşağıdakiler, projede tarandığı tüm .php dosyaları class="..." bazında
   taranıp css/site.css'te karşılığı olmayanlar (bkz. gen_missing_classes.py
   mantığı) tek tek eklendi — değerler Next.js kaynağındaki aynı class'ın
   ürettiği piksel karşılıklarıyla birebir. */
/* Site geneli scrollbar track/thumb — referansta (galabet1095.com,
   2026-08-24) hem ana sayfa akışında hem Hesabım overlay'inin sidebar/
   içerik panellerinde AYNI özel scrollbar kullanılıyor: 6px genişlik,
   thumb #49ac50 (yeşil), track rgb(249,250,249) (açık/beyaza yakın —
   koyu tema üstünde ince bir açık kenar olarak görünüyor), radius 4-5px.
   Önceki sürümde sadece .account-sidebar'a uygulanmıştı ve track şeffaftı
   — ikisi de yanlıştı, gerçek ölçüme göre düzeltildi ve site geneline
   yayıldı. */
html {
  scrollbar-width: thin;
  scrollbar-color: #49ac50 rgb(249, 250, 249);
}
/* Track/thumb'ı açıkça stillendirmek Chrome/Safari'yi scroll'suzken
   küçülüp scroll'da beliren overlay davranışından çıkarıp klasik, her
   zaman görünen scrollbar'a geçiriyor. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar:horizontal { height: 6px; }
::-webkit-scrollbar-track { background: rgb(249, 250, 249); border-radius: 4px; }
::-webkit-scrollbar-thumb {
  background: #49ac50;
  border-radius: 4px;
}
::-webkit-scrollbar-corner { background: rgb(249, 250, 249); }

.h-\[11px\] { height: 11px; }
.w-\[22px\] { width: 22px; }
.w-4 { width: 1rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.pr-2 { padding-right: 0.5rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* Mobil alt sekme çubuğu — kullanıcı talebiyle (2026-09-06) kesin değere
   güncellendi: rgba(45,52,68,.94) — bu da bizim --background (#2d3444)
   token'ımızın %94 opaklığı. Önceki rgba(23,28,44,.78) (bg-brand-surface
   #171c2c bazlı, 2026-08-28'de kullanıcı tercihiyle ayarlanmıştı) artık
   geçersiz. */
.mobile-tab-bar-transparent {
  background-color: rgba(45, 52, 68, 0.94);
}
/* Alt nav çubuğunun üstündeki yeşil "glow" çizgi — canlı referansta
   (.tab-navigation-w-bc::before, m.galabet1101.com, 2026-09-06) 1px
   yükseklikte, tam genişlikte bir gradyan: kenarlarda koyu, ortada
   (MENÜ'nün üstünde) parlak yeşil. Blur/box-shadow değil, düz bir
   linear-gradient — "glow" hissi rengin ortada yoğunlaşmasından geliyor.
   NOT: buraya "position:relative" EKLEME — <nav> zaten Tailwind'in
   "fixed" utility'siyle position:fixed, bu ::before için yeterli
   positioning context'i sağlıyor. "position:relative" eklemek (bir
   önceki turda yapılan hata) site-custom.css site.css'ten SONRA
   yüklendiği için aynı specificity'deki "fixed" utility'sini override
   edip nav'ı position:relative'e düşürüyordu — nav sayfa akışına girip
   scroll ile kayboluyor, sadece sayfanın en altına gelince görünüyordu. */
.mobile-tab-bar-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(to left, rgba(0, 2, 5, 0.2), rgb(88, 164, 0), rgba(0, 2, 5, 0.2));
}
/* Alt nav renkleri — text-white/50 utility'si bu sayfada @layer sıralaması
   yüzünden override ediliyordu (bkz. .header-row'daki aynı bilinen sorun),
   bu yüzden !important'lı özel class'lar. Canlı referansta ölçülen tam
   değerler: pasif rgba(255,255,255,.5), aktif rgba(255,255,255,1) —
   --brand-green DEĞİL. */
.mobile-tab-inactive { color: rgba(255, 255, 255, 0.5) !important; }
.mobile-tab-active { color: rgba(255, 255, 255, 1) !important; }

@media (min-width: 900px) {
  #side-rail.rail-expanded {
    width: 15rem; /* w-60 */
    align-items: stretch;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  #side-rail.rail-expanded .rail-link {
    width: 100%;
    justify-content: flex-start;
    gap: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  #side-rail.rail-expanded .rail-badge {
    right: 0.5rem;
  }
  #side-rail.rail-expanded .rail-label {
    max-width: 160px;
    opacity: 1;
  }
}

/* Oyun kartı favori (kalp) butonu — src/components/casino/game-card.tsx */
.game-fav-btn {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 30;
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.game-fav-btn.is-favorited {
  background-color: var(--brand-gold, #f0b90b);
  color: var(--brand-gold-foreground, #1a1a1a);
}
.game-fav-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}
.game-fav-btn.is-favorited svg {
  fill: currentColor;
}

/* Sağlayıcılar modalı — includes/games.php render_game_category_browser().
   auth-modal-overlay ile aynı fixed+centered dialog deseni (bkz. bu dosyada
   aşağıdaki .auth-modal-overlay), gerçek sağlayıcı logomuz olmadığından
   (bu oturumdaki asset taraması: site-demo/ai-website-cloner-template'te
   provider-adı eşleşen bir logo dosyası bulunamadı) baş harf rozetiyle. */
.provider-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1rem;
}
.provider-modal-overlay.open {
  display: flex;
}
.provider-modal-panel {
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--brand-surface, #1a1f2e);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.provider-modal-grid {
  overflow-y: auto;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .provider-modal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.provider-modal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.04);
  padding: 0.75rem 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s;
}
.provider-modal-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.provider-modal-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #1a1a1a;
  text-transform: uppercase;
}
.provider-modal-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--foreground, #fff);
  line-height: 1.2;
}
.provider-modal-count {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 10px;
  color: var(--muted-foreground, #9ca3af);
}

/* Arama/Rastgele Oyun/Sağlayıcılar pill'leri (casino.php/canli-casino.php) —
   includes/games.php render_game_category_browser(). Ölçüler canlı
   referanstan (2026-08-23) getComputedStyle ile alındı: .ds-textfield__field/
   .ds-select__field/btn üçü de aynı stil — rgba(255,255,255,.08) dolgu,
   999px (tam pill) köşe, 40px yükseklik. Önceki sürüm beyaz arama kutusu +
   altın "Sağlayıcılar" butonu kullanıyordu, referansla hiç eşleşmiyordu. */
.filter-pill {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}
.filter-pill-muted {
  color: rgba(255, 255, 255, 0.56);
}
.filter-pill-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
}
.filter-pill-input::placeholder {
  color: rgba(255, 255, 255, 0.56);
}
.filter-pill-icon {
  color: rgba(255, 255, 255, 0.56);
}

/* Kategori pill'leri (casino.php/canli-casino.php) — includes/games.php
   render_game_category_browser(). Canlı referansta (galabet1095.com,
   2026-08-22) kompakt "ikon + yazı" tek satır pill, büyük ikon-üstte-kart
   değil (o eski görünüm .category-pill'den önceydi). */
.category-pill {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid transparent;
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.category-pill:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.category-pill.is-active {
  border-color: var(--brand-green, #30d426);
  background-color: rgba(48, 212, 38, 0.12);
  color: var(--brand-green, #30d426);
}
.category-pill-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  text-transform: none;
}
.category-pill-badge-green {
  background-color: #16a34a;
}
.category-pill-badge-purple {
  background-color: #a855f7;
}
.category-pill-badge-blue {
  background-color: #4a3fd4;
}
.category-pill-badge-amber {
  background-color: #f0b90b;
  color: #1a1a1a;
}

/* Arama/Rastgele Oyun/Sağlayıcılar satırı — mobilde arama+sağlayıcılar yan
   yana (satır 1), Rastgele Oyun Oyna tam genişlik altta (satır 2); lg:'de
   üçü de tek satırda, canlı referanstaki sıra: arama - rastgele - sağlayıcılar. */
.filter-row-search {
  order: 1;
}
.filter-row-providers {
  order: 2;
}
.filter-row-random {
  order: 3;
  flex: 0 0 100%;
}
@media (min-width: 1024px) {
  .filter-row-random {
    order: 2;
    flex: 0 0 auto;
  }
  .filter-row-providers {
    order: 3;
  }
}

/* Jackpot ticker — includes/games.php render_jackpot_ticker(). TÜM ölçüler
   canlı referanstan (galabet1095.com, 2026-08-22) Chrome DevTools/
   getComputedStyle ile birebir alındı — .jackpot-pool-card__wrapper,
   .jackpot-pool(--large), .jackpot-pool__item/title/money sınıflarının
   gerçek değerleri (bu oturumda ölçüldü, bkz. sohbet). Masaüstünde 3 kart
   aynı anda görünüp ok butonlarıyla kaydırılıyor (referans Swiper.js
   kullanıyor, biz scrollBy ile aynı görsel sonucu native scroll-snap'le
   üretiyoruz — kütüphane farklı, sonuç birebir), mobilde tek kart + touch
   swipe. */
.jackpot-viewport {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.jackpot-nav-btn {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: var(--brand-surface, #1a1f2e);
  color: #fff;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .jackpot-nav-btn {
    display: flex;
  }
}
.jackpot-track {
  display: flex;
  flex: 1;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.jackpot-track::-webkit-scrollbar {
  display: none;
}
.jackpot-card {
  position: relative;
  scroll-snap-align: center;
  flex: 0 0 86%;
  max-width: 380px;
  border-radius: 12px;
  padding: 12px;
  /* .jackpot-pool-card__wrapper: düz %4 beyaz kaplama + üstte %12'ye kadar
     yeşil tonlu gradyan (0deg = alttan üste, alt şeffaf → üst yeşil). */
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(0deg, rgba(88, 164, 0, 0), rgba(88, 164, 0, 0.12) 95%),
    var(--brand-surface, #1a1f2e);
  overflow: hidden;
}
/* Kartın üst kenarındaki ince altın gradyan çizgi — .jackpot-pool-card__wrapper
   ::before, hem 5 kartlık casino ticker'ında hem tekli spor jackpot
   kartında aynı (referansta getComputedStyle ile doğrulandı, 2026-08-23). */
.jackpot-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(to right, rgba(255, 153, 0, 0) 10%, rgb(237, 210, 113) 40%, rgb(255, 153, 0), rgb(255, 168, 38), rgba(255, 153, 0, 0));
}
@media (min-width: 1024px) {
  .jackpot-card {
    flex: 0 0 calc((100% - 24px) / 3);
    max-width: none;
  }
}
/* Spor Bahisleri Jackpotu (index.php) — casino ticker'ıyla aynı .jackpot-card
   sistemi, tek kart, carousel/ok yok. flex context'e bağımlı olmasın diye
   ayrı bir class. */
.jackpot-card-solo {
  flex: none;
  max-width: none;
  width: 100%;
}
/* Sağlayıcı başlığının sağ üst köşesindeki dekoratif grafik — crisp katman
   üstte (top:0), blur/glow katmanı 25px aşağıda ve arkada (z-index düşük).
   Kutu 196x62, sağa-ortaya yaslı, "contain" — referansla birebir. */
.jackpot-card-header-crisp,
.jackpot-card-header-blur {
  position: absolute;
  top: 0;
  right: 12px;
  width: 196px;
  height: 62px;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: contain;
  pointer-events: none;
}
.jackpot-card-header-crisp {
  z-index: 3;
}
.jackpot-card-header-blur {
  top: 25px;
  z-index: 2;
}
.jackpot-card-body {
  position: relative;
  z-index: 4;
}
/* Canlı referansta (m.galabet1101.com, 2026-09-06,
   .jackpot-pool-card__title-text sınıfı) 16px DEĞİL 12px, letter-spacing
   0.4px + line-height 16px eksikti. font-weight/color/uppercase zaten
   doğruydu. */
.jackpot-card-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.4px;
  line-height: 16px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.jackpot-tier-icon-img {
  flex: none;
  object-fit: contain;
}
.jackpot-tier {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.08);
}
.jackpot-tier-grand {
  justify-content: center;
  margin-bottom: 12px;
}
.jackpot-tier-money {
  display: flex;
  flex-direction: column;
}
.jackpot-tier-label {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.64);
}
.jackpot-tier-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.jackpot-tier-sub .jackpot-tier-label {
  font-size: 12px;
}
.jackpot-tier-sub .jackpot-amount {
  font-size: 14px;
}
.jackpot-amount {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

/* Footer dil seçici dropdown — src/components/layout/footer-extras.tsx */
.lang-dropdown-panel {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 20;
  margin-bottom: 0.5rem;
  width: 10rem;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: var(--brand-surface, #1a1f2e);
}
.lang-dropdown-panel.open {
  display: block;
}

/* Header (logo/buton satırı) arka plan rengi — kullanıcı talebiyle
   (2026-09-06) announcement-bar/body/side-rail ile aynı renge (--background,
   rgba(45,52,68,1) = #2d3444) çekildi; önceki #000c21 değeri (galabet1095.com,
   2026-08-22 ölçümü) artık kullanılmıyor. announcement-bar'a dokunulmadı. */
.header-bar-bg {
  background-color: rgba(45, 52, 68, 1);
}

/* AnnouncementBar — canlı referansta (.informative-widget/.informative-
   widget-link/.e-p-close-icon-bc, galabet1101.com, 2026-09-06,
   document.styleSheets'ten okunan gerçek CSS kuralları) ölçülen tam
   padding/pozisyon/kart değerleri; Tailwind derlemesinde bu arbitrary
   değerler yoktu. Dış boşluk .hm-row-bc margin-top:5px + .informative-
   widget margin-top:4px toplamına (9px) karşılık geliyor. */
.announcement-bar-outer-pad { padding: 9px 10px; }
.announcement-bar-card { border-top-width: 2px; border-top-style: solid; border-radius: 5px; }
.announcement-bar-pad { padding: 10px 40px 10px 10px; }
.announcement-bar-close { top: 13px; right: 21px; }

/* min-w-0 — Next.js'in taranan build çıktısında (css/site.css) hiç
   kullanılmadığı için derlenmiş halde yok, düz CSS olarak ekleniyor.
   Owl Carousel banner'ının flex satırındaki taşma bug'ının kalıcı
   güvenlik ağı: bkz. includes/site-content.php render_hero_slider()
   içindeki .relative/.hero-banner-secondary sarmalayıcı yorumu. */
.min-w-0 {
  min-width: 0;
}

/* İkinci (küçük) banner kutusu — canlı referansta (galabet1095.com,
   2026-08-22) casino.php'de ana banner'ın yanında görülen "büyük kazanç"
   kutusu, bkz. includes/site-content.php render_hero_slider() $db parametresi.
   Ölçüler canlı referanstan getBoundingClientRect ile alındı: kutu 399x245,
   köşe 5px (ana banner'ın 10px'i ile aynı değil), ana banner'a oranı ~70/30.
   Sadece lg:'de (mobilde referans da tek carousel'e dönüyor). flex-basis
   arbitrary Tailwind class'ı (lg:flex-[0_0_66%]) derlenmiş css/site.css'te
   yoktu, bu yüzden düz CSS. */
@media (min-width: 1024px) {
  .hero-banner-primary {
    flex: 0 0 70%;
    max-width: 70%;
  }
  .hero-banner-secondary {
    flex: 1 1 auto;
    height: 300px;
    border-radius: 5px;
  }
}

/* Banner dekoratif yeşil çerçeve — bkz. includes/site-content.php
   render_hero_slider(). */
.hero-banner-frame {
  border: 2px solid rgba(48, 212, 38, 0.85);
  box-shadow: 0 0 26px 0 rgba(48, 212, 38, 0.3);
}
.hero-banner-frame-circle {
  position: absolute;
  border-radius: 999px;
  border: 1.5px solid rgba(48, 212, 38, 0.55);
}
.hero-banner-frame-circle-tl {
  top: -22px;
  left: 32%;
  width: 44px;
  height: 44px;
}
.hero-banner-frame-circle-br {
  bottom: -22px;
  right: 6%;
  width: 44px;
  height: 44px;
  border-color: rgba(148, 163, 184, 0.4);
}
.hero-banner-frame-chevrons {
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 60px;
  height: 60px;
}

/* "CASİNO EN ÇOK KAZANANLAR" — kesintisiz sağdan sola kayan marquee (bkz.
   includes/games.php render_winners_ticker()). Track, havuzun iki katı
   (aynı liste arkasına bir daha eklenmiş) — %50 kaydırıp anında başa
   sarıyor, iki kopya birebir aynı olduğu için dikiş görünmüyor. */
.winners-marquee-viewport {
  overflow: hidden;
}
.winners-marquee-track {
  display: flex;
  width: max-content;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  animation-name: winners-marquee-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.winners-marquee-track:hover {
  animation-play-state: paused;
}
@keyframes winners-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .winners-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}

/* Kayıt butonu — mobilde dolu yeşil arka plan + %50 opaklıkta beyaz metin
   (kullanıcı tercihiyle, 2026-08-28 — önceden düz siyah metindi), lg:'de
   canlı referansta doğrulandı (galabet1095.com, 2026-08-22) yeşil glow'lu
   şeffaf çerçeve + tam opak beyaz metin. Bu lg: kombinasyonu Next.js
   kaynağında (site-header.tsx) hiç yer almadığı için (build çıktısında
   karşılığı yok) elle yazıldı. */
.kayit-btn {
  color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 1024px) {
  .kayit-btn {
    background-color: transparent;
    color: #fff;
    box-shadow: 0 0 10px 2px var(--brand-green-glow, #30d426);
  }
  .kayit-btn:hover {
    background-color: rgba(88, 164, 0, 0.1);
    filter: none;
  }
}

/* Giriş/Kayıt kartı — "Destek ile iletişime geçin" linki: css/site.css'in
   en başındaki eski taban stil `a { color: inherit; text-decoration: none; }`
   (2026-08-28'de fark edildi) katmansız (unlayered) olduğu için, sonradan
   eklenen Tailwind build çıktısındaki `@layer utilities` içindeki
   `.underline`/`.text-white/50` class'larını (katmanlı olduğu için,
   CSS Cascade Layers kuralı gereği özgüllükten BAĞIMSIZ olarak) eziyordu —
   link altı çizili görünmüyordu. Kullanıcı isteğiyle altı çizili olacak
   şekilde, bu class da katmansız (site.css'ten SONRA yüklenen
   site-custom.css'te) tanımlanarak düzeltildi. */
.auth-support-link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
}
.auth-support-link:hover {
  color: #fff;
}

/* Logo boyutu — MOBİL DEĞERİ (2026-08-24 mobil turu): aşağıdaki 2447.
   satırdaki ".brand-logo-img{height:72px}" kuralı media query'siz yazılmış
   olduğu için (o kural masaüstü canlı referanstan ölçülmüştü) cascade'de bu
   bloğu da eziyordu — mobilde de 72px render oluyordu, referansta ise mobil
   logo ekran genişliğinin ~%28'i (≈36px yükseklik) kadar. Düzeltme: burada
   SADECE mobil (<1024px) değer kalıyor, 72px kuralı artık lg:'ye taşındı. */
.brand-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* Header "..." (üç nokta) dropdown menüsü — src/components/layout/
   site-header.tsx'te sadece statik bir MoreVertical + "3" rozetli buton
   vardı, tıklama davranışı hiç inşa edilmemişti (Next.js kaynağında ölü
   bir buton). İçerik/şekil/hover davranışı referans sitenin canlı
   incelemesinden türetildi (iPhone Yansıtma, 2026-08-22): koyu, tam
   yuvarlak (pill) bir panel, üstte bildirim/favori/ayarlar (+ oturum
   açıkken hesabım/bonuslar/bahis geçmişi), altta ayrı bir kapat butonu. */
.header-more-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 44px;
  padding: 14px 0 44px;
  border-radius: 999px;
  background-color: rgba(28, 26, 25, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.header-more-panel.open {
  display: flex;
}
.header-more-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.15s, color 0.15s;
}
.header-more-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.header-more-item svg {
  width: 18px;
  height: 18px;
}
.header-more-badge {
  position: absolute;
  top: -3px;
  right: -3px;
}
.header-more-item-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 14px;
  height: 14px;
}
.header-more-close {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: #fff;
  color: #1c1a19;
  border: 0;
  cursor: pointer;
}
.header-more-close svg {
  width: 16px;
  height: 16px;
}

/* Giriş/Kayıt popup — src/components/auth/auth-dropdown.tsx birebir.
   header.php'deki JS bu overlay'i açıp giris.php/kayit.php'den ?modal=1
   fragment'ini #auth-modal-slot içine enjekte ediyor (bkz. header.php
   sonundaki openAuthModal/closeAuthModal). */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0;
}
.auth-modal-overlay.open {
  display: flex;
}
@media (min-width: 1024px) {
  .auth-modal-overlay {
    padding: 1rem;
  }
}
/* giris.php/kayit.php'nin JS'siz doğrudan ziyaretinde (ör. arama motoru,
   JS kapalı tarayıcı) auth-card'ı normal sayfa akışı içinde ortalar. */
.auth-page-wrap {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 4rem;
}
@media (min-width: 1024px) {
  .auth-page-wrap {
    padding: 3rem 1rem 5rem;
  }
}

/* ==========================================================================
   Modül 9 — bire bir referans eşleştirme (PLAN.md Bölüm 11)
   ========================================================================== */

/* SideRail hover — referansta ikonun genişliği değişmiyor, sağında ayrı
   beyaz bir tooltip pill'i beliriyor (bkz. Bölüm 11.2.G). Eski inline
   label-genişletme (.rail-expanded) rail-toggle'ın artık nav-menu-drawer'ı
   açması yüzünden kullanılmıyor, tooltip onun yerini alıyor. */
.rail-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  white-space: nowrap;
  background: #fff;
  color: #171c2c;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 40;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.rail-link:hover .rail-tooltip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* rail-toggle (masaüstü ☰) + mobile-menu-open (mobil "MENÜ") — AYNI panel
   (#mobile-menu-drawer), masaüstünde rail'in hemen sağında dar bir sütun +
   arkası karartılıp bulanıklaştırılıyor, mobilde alttan sabit tam ekran
   (bkz. Bölüm 11.2.H). */
.nav-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(10, 12, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav-menu-backdrop.open {
  display: block;
}
@media (min-width: 1024px) {
  .nav-menu-drawer {
    top: 0 !important;
    left: 4rem !important;
    right: auto !important;
    bottom: 0 !important;
    width: 18rem !important;
    max-width: 80vw;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Para birimi / cüzdan seçici (₺▾) — referansta küçük bir dropdown, tek
   satırlık "+ Yeni bir cüzdan ekle" seçeneği (bkz. Bölüm 11.2.B). */
.currency-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 200px;
  padding: 6px;
  border-radius: 10px;
  background: var(--brand-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.currency-dropdown-panel.open {
  display: block;
}
.currency-dropdown-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  transition: background-color 0.15s;
}
.currency-dropdown-add:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* TUR/ENG/AZE dil dropdown'ı — referansta bayraklı gerçek bir liste
   (bkz. Bölüm 11.2.C). Site tek dilli, ENG/AZE tıklaması paneli kapatır. */
.header-lang-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 140px;
  padding: 6px;
  border-radius: 10px;
  background: var(--brand-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.header-lang-panel.open {
  display: block;
}
.header-lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.header-lang-item img {
  height: 15px;
  width: 21px;
  border-radius: 2px;
}
.header-lang-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.header-lang-item.active {
  color: var(--brand-green-bright, var(--brand-green));
}

/* Mobil "⋮" dikey liste — masaüstünden farklı, 7 öğe, kapat X'i yok
   (bkz. Bölüm 11.9.B). Görünürlük ayrımı burada, panelin kendisi
   header.php'de her zaman render ediliyor. */
.header-more-panel-mobile {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 44px;
  padding: 10px 0;
  border-radius: 22px;
  background-color: rgba(28, 26, 25, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.header-more-panel-mobile.open {
  display: flex;
}
.header-more-item-mobile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.15s, color 0.15s;
}
.header-more-item-mobile:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.header-more-item-mobile svg {
  width: 18px;
  height: 18px;
}
@media (min-width: 1024px) {
  .header-more-panel-mobile { display: none !important; }
}
@media (max-width: 1023.98px) {
  .header-more-panel-desktop { display: none !important; }
}

/* Cüzdan Bağla — küçük, ortalanmış, yeşil glow'lu modal (bkz. Bölüm 11.2.F). */
.wallet-connect-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1rem;
}
.wallet-connect-modal-overlay.open {
  display: flex;
}
.wallet-connect-modal-panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 28px 24px 24px;
  border-radius: 24px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-green);
  box-shadow: 0 0 30px var(--brand-green-glow);
  text-align: center;
}
.wallet-connect-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 0;
  cursor: pointer;
}
.wallet-connect-modal-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
}
.wallet-connect-modal-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.wallet-connect-modal-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 14px;
}

/* ==========================================================================
   Hesabım overlay — masaüstünde ortalanmış geniş popup, mobilde tam ekran
   (bkz. Bölüm 11.2.D, 11.9.C). auth-modal-overlay ile aynı backdrop
   deseni, panel çok daha geniş (2 kolon).
   ========================================================================== */
.account-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: none;
  /* flex-start + panelde margin:auto: içerik ekrandan kısaysa ortalanır,
     uzunsa üstten başlar ve kaydırılabilir (align-items:center üst kısmı
     ekran dışında ulaşılmaz bırakıyordu). */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0;
}
.account-modal-overlay.open {
  display: flex;
}
/* #account-modal-slot bilinçli olarak class'sız (JS fetch'iyle enjekte
   edilen fragment'in wrapper'ı) — display:contents ile kendi kutusunu
   üretmiyor, .account-panel doğrudan overlay'in flex item'ı oluyor.
   Bu olmadan slot'un genişlik kısıtı olmayan block box'ı, içindeki
   width:100%'ün neye göre hesaplanacağını belirsizleştirip .account-panel'i
   içeriğin shrink-to-fit genişliğine (mobilde viewport'tan geniş) düşürüyordu. */
#account-modal-slot {
  display: contents;
}
@media (min-width: 1024px) {
  .account-modal-overlay {
    padding: 1.5rem;
  }
}

.account-panel {
  box-sizing: border-box;
  margin-block: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--background);
  color: #fff;
}
.account-panel * {
  box-sizing: border-box;
  min-width: 0;
}
@media (min-width: 1024px) {
  .account-panel {
    min-height: 0;
    max-height: calc(100vh - 3rem);
    width: 100%;
    max-width: 1410px;
    border-radius: 40px;
    border: 2px solid var(--brand-green);
    box-shadow: 0 -2px 30px 0 var(--brand-green-glow);
    overflow: hidden;
  }
}

.account-panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.account-panel-topbar .brand-logo-img { height: 28px; }
.account-panel-topbar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 0;
  cursor: pointer;
}
.account-panel-close {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: 0;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .account-panel-topbar { display: none; }
}
@media (max-width: 1023.98px) {
  .account-panel-close { display: none; }
}

/* ---- Üst blok: avatar+ID → doğrulanmış rozet → bakiye kartları →
   sadakat butonu (canlı referansta ölçülen sıra, bkz. Bölüm 11.11 devamı). */
.account-panel-summary {
  flex-shrink: 0;
  padding: 16px;
  overflow-y: auto;
}
.account-identity-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  /* 2026-09-05: kullanıcının paylaştığı gerçek ekran görüntüsünde bu
     hep dolu yeşil (--brand-green) — yarı saydam beyaz/gri DEĞİL. */
  background: var(--brand-green);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-green-foreground);
  text-transform: uppercase;
  flex-shrink: 0;
}
.account-identity-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.account-identity-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-identity-id {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.account-verified-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.account-verified-row svg { color: var(--brand-green); flex-shrink: 0; }

.account-balances {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.account-balance-card {
  border-radius: 5px;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}
.account-balance-card.ana {
  background: #109121;
  color: #fff;
}
.account-balance-card.bonus {
  background: #aa7f00;
  color: #fff;
}
.account-balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.account-balance-label {
  font-size: 14px;
  font-weight: 500;
}
/* 2026-09-08: m.galabet1102.com'da gerçek ölçüm (i.bc-i-eye kutusu) —
   34x34, radius 5px (999px DEĞİL, köşeli), bg rgba(255,255,255,.1). Önceki
   değerler (22px, tam yuvarlak, .15) tahminiydi. */
.account-balance-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.account-balance-eye svg { width: 20px; height: 20px; }
.account-balance-eye .acc-sprite { width: 20px; height: 20px; }
.account-balance-value {
  font-size: 20px;
  font-weight: 700;
  margin-top: 2px;
}
.account-balance-value.hidden-value { filter: blur(6px); user-select: none; }
.account-balance-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
/* 2026-09-08 canlı ölçüm: PARA YATIR/ÇEKİM birbirinden farklı DEĞİL —
   ikisi de aynı yarı saydam beyaz (rgba(255,255,255,.25)) + beyaz metin,
   14px/500, yükseklik 34px (padding 0 5px, dikey ortalama flex ile).
   Önceki sürümde deposit'in "dolu beyaz + yeşil metin" olması tahminiydi. */
.account-balance-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  height: 34px;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.account-balance-btn svg { width: 18px; height: 18px; }
.account-balance-btn .acc-sprite { width: 18px; height: 18px; }
.account-balance-btn { transition: filter 0.15s ease; }
.account-balance-btn.deposit,
.account-balance-btn.withdraw {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.account-balance-btn:hover { filter: brightness(1.08); }
.account-bonus-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 500;
}
.account-bonus-subrow span:last-child { font-weight: 700; }

/* SADAKAT PUANLARI — 2026-09-08 canlı ölçüm (m.galabet1102.com):
   yatay satır (ikon SOL + etiket SAĞ), dikey/ortalı DEĞİL — önceki sürüm
   tahminen dikeydi. Gradyan (radial-gradient -14% 113%, #624811→#b07d10)
   zaten birebir doğruymuş, dokunulmadı. */
.account-loyalty-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 10px 0;
  padding: 5px 10px;
  border-radius: 5px;
  text-align: left;
  background: radial-gradient(circle at -14% 113%, #624811, #b07d10);
  transition: filter 0.15s ease;
}
.account-loyalty-btn:hover { filter: brightness(1.1); }
.account-loyalty-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f7d004;
}
.account-loyalty-icon { width: 36px; height: 36px; object-fit: contain; }
.account-loyalty-label {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Sol nav: gerçek akordeon (grup başlığı JS ile açılıp kapanıyor,
   bkz. includes/footer.php wireAccountToggles). ---- */
.account-panel-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.account-nav {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px;
  overflow-y: auto;
}
.account-group-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  /* Referansta her grup satırı kalıcı olarak kendi kutusunda duruyor.
     2026-09-05'te m.galabet1100.com'da Chrome DevTools ile (kullanıcı
     kendi renk seçiciyle R255 G255 B255 A0.15 doğruladı) kesin ölçüldü:
     rgba(255,255,255,.04) DEĞİL, rgba(255,255,255,.15) — önceki değer
     çok soluktu. */
  background: rgba(255, 255, 255, 0.15);
}
.account-group.open > .account-group-header,
.account-group-header:hover {
  background: rgba(255, 255, 255, 0.22);
}
.account-standalone-item { position: relative; }
.account-group-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* 2026-09-05: kullanıcının paylaştığı gerçek Hesabım ekran görüntüsünde
   6 grup ikonu da (Bakiye Yönetimi/Bonuslar/Profilim/Bahis Geçmişi/
   Mesajlar/Bonus Yolculuk) AYNI koyu kare rozet içinde, altın vurgu YOK
   — önceki iPhone Yansıtma zoom'undan çıkarılan "2'si altın" bulgusu
   yanlıştı (muhtemelen yanlış ekran/ışık okuması). Artık .account-group-
   item-icon-wrap ile aynı koyu rozeti paylaşıyorlar (aşağıda ikon boyutu
   da o kapsamda 14px'e küçültülüyor). */
.account-group-item-icon-wrap .account-group-icon { width: 14px; height: 14px; }
/* Mobil-özel "grup açıkken sol ok" ikonu — bkz. includes/account-panel.php
   ve aşağıdaki mobil media query'deki .account-group.open kuralı.
   Masaüstünde her zaman gizli (referansta masaüstü davranışı bu turda
   değişmedi — sadece sağ ok 180° dönüyor, ikon aynı kalıyor). */
.account-group-back-icon {
  display: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.account-group-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-group-badge {
  /* Referansta (iPhone Yansıtma, abet1099.com) rozet satırın İÇİNDE değil,
     sağ üst KÖŞESİNDE, kutudan taşarak duruyor. */
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-size: 10px;
  font-weight: 800;
}
.account-group-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.15s ease;
}
.account-group.open > .account-group-header .account-group-arrow {
  transform: rotate(180deg);
}
.account-group-arrow.static { transform: none !important; }
.account-group-list {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 8px 12px;
}
.account-group.open .account-group-list {
  display: flex;
}
.account-group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  /* Üst grup satırlarıyla (.account-group-header) aynı köşe yuvarlaklığı
     ve arka plan — 2026-09-05'te m.galabet1100.com'da ölçülen gerçek
     değer (5px / rgba(255,255,255,.15)); önceki 8px/.04 hem daha
     yuvarlak hem daha soluktu. */
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.15);
}
.account-group-item:hover {
  background: rgba(255, 255, 255, 0.22);
}
.account-group-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.28);
  border-left: 2px solid var(--brand-green);
  padding-left: 8px;
}
.account-group-item-title { flex: 1; }
.account-group-item-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}
.account-group-item-icon { width: 14px; height: 14px; }
.account-group-item-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-size: 9px;
  font-weight: 800;
}
.account-standalone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}
.account-standalone-item .account-group-icon { width: 20px; height: 20px; }
.account-standalone-item .account-group-item-icon-wrap .account-group-icon { width: 14px; height: 14px; }
.account-standalone-item:hover { background: rgba(255, 255, 255, 0.05); }

/* "BAKİYE YÖNETİMİ" mobil liste ekranı — bkz. includes/account-sections.php
   render_account_section_bakiye() $page===null dalı. Satırlar
   .account-standalone-item'ı (Bonus Yolculuk ile aynı stil) paylaşıyor.
   2026-08-28: kullanıcının paylaştığı referans ekran görüntüsünde her
   satır kendi başına koyu, belirgin köşeli bir kutu — .account-standalone-
   item'ın varsayılanı (arka plan YOK, sadece hover'da %5 beyaz) sayfa
   arka planıyla birleşip "kutu" hissi vermiyordu. Sadece bu listeye özel
   (Bonus Yolculuk gibi diğer .account-standalone-item kullanımları
   etkilenmesin diye) kalıcı bir kutu arka planı + belirgin köşe
   yuvarlaklığı eklendi. */
.account-bakiye-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-bakiye-menu .account-standalone-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
}
.account-bakiye-menu .account-standalone-item:hover {
  background: rgba(255, 255, 255, 0.13);
}

.account-promo-widget {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.account-promo-widget.wide { max-width: 520px; padding: 0; background: none; }
.account-promo-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 5px;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
}
.account-promo-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.account-promo-btn {
  flex-shrink: 0;
  padding: 0 16px;
  border-radius: 5px;
  border: 0;
  background: #58a400;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.account-promo-btn:hover { filter: brightness(1.1); }
.account-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.15s ease;
}
.account-logout-btn:hover { background: rgba(255, 255, 255, 0.22); }

/* ---- Sağ içerik paneli — genel bileşenler (filtre formu, tablo, sekme,
   boş durum, kart grid'i vb.) tüm alt sayfalarda paylaşılıyor. ---- */
.account-panel-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.account-panel-content-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
}
.account-panel-back {
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.account-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  text-align: center;
}
.account-empty-icon { width: 40px; height: 40px; color: rgba(255, 255, 255, 0.25); }
.account-empty-note {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 14px;
}
.account-empty-note.center { text-align: center; }
.account-empty-note.left { text-align: left; }
.account-empty-note.small { font-size: 11px; opacity: 0.5; font-family: monospace; }
.account-highlight-green { color: var(--brand-green); font-weight: 700; }

.account-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.account-filter-input,
.account-filter-select {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}
.account-filter-input input,
.account-filter-input-search input {
  background: none;
  border: 0;
  color: #fff;
  font-size: 13px;
  width: 100%;
  outline: none;
}
.account-filter-input-search {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.account-filter-select-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.45);
}
.account-filter-select-value { font-size: 13px; font-weight: 600; }
.account-filter-submit {
  flex-shrink: 0;
  padding: 0 24px;
  border-radius: 8px;
  border: 0;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .account-filter-submit { width: 100%; padding: 10px 0; }
}

.account-simple-table { border-radius: 10px; overflow: hidden; }
.account-simple-table-head,
.account-bonus-table-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.account-bonus-table-head { grid-template-columns: 1fr auto auto; }
.account-simple-table-empty {
  padding: 40px 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.02);
}

.account-bonus-row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.account-bonus-row-head {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.account-bonus-row-title { font-size: 13px; font-weight: 600; }
.account-bonus-row-amount { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.account-bonus-row-status { font-size: 12px; color: var(--brand-green); }
.account-bonus-row-chevron { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.4); transition: transform 0.15s; }
.account-bonus-row.open .account-bonus-row-chevron { transform: rotate(180deg); }
.account-bonus-row-body { display: none; padding: 0 12px 16px; }
.account-bonus-row.open .account-bonus-row-body { display: block; }
.account-bonus-row-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  margin-bottom: 14px;
}
.account-bonus-row-grid div { display: flex; flex-direction: column; gap: 2px; }
.account-bonus-row-grid span { font-size: 11px; color: rgba(255, 255, 255, 0.45); }
.account-bonus-row-grid strong { font-size: 12px; color: #fff; }
.account-bonus-activate-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}

.account-balance-strip {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 16px;
}
.account-balance-strip div { display: flex; flex-direction: column; gap: 4px; }
.account-balance-strip div.align-right { margin-left: auto; text-align: right; }
.account-balance-strip span { font-size: 10px; color: rgba(255, 255, 255, 0.45); }
.account-balance-strip strong { font-size: 15px; color: var(--brand-green); }

.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.account-tab {
  position: relative;
  text-align: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.account-tab.active {
  background: linear-gradient(90deg, #c6ff3d, #7ed321);
  color: #1c1a19;
}
.account-tab-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: #e0334a;
  vertical-align: top;
}

.account-cta-btn {
  padding: 12px 24px;
  border-radius: 8px;
  border: 0;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
}
.account-cta-btn.align-end { display: block; margin-left: auto; }
.account-cta-btn.inline-block { display: inline-block; }

.account-profile-form { display: flex; flex-direction: column; gap: 12px; }
.account-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  .account-profile-grid { grid-template-columns: 1fr; }
}
.account-field { display: flex; flex-direction: column; gap: 4px; }
.account-field label { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.5); }
.account-field input,
.account-field select,
.account-field textarea {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
}
.account-field input[readonly] { color: rgba(255, 255, 255, 0.45); }
.account-bonus-eligible-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}
.account-bonus-eligible-note strong { color: var(--brand-green); }
.account-password-confirm-bar {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(180, 40, 60, 0.35);
  color: #fff;
  font-size: 12px;
  text-align: center;
  margin: 6px 0;
}
.account-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.account-toggle-box {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #fff;
}
.account-toggle-row span:not(.account-toggle-box):not(.account-toggle-switch) {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
}
.account-toggle-switch {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
  flex-shrink: 0;
}
.account-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
}
.account-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 16px;
}

.account-message-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.account-message-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.account-message-item strong { font-size: 13px; font-weight: 700; color: #fff; }
.account-message-item span { font-size: 11px; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }

.account-quick-claim-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.account-quick-claim-head strong { font-size: 14px; }
.account-pill {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.account-bonus-quick-grid {
  /* Madde 5 — referansta mobilde de 2 sütun kalıyor (bkz. 5.orj.png),
     tek sütuna düşen önceki @media kaldırıldı. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.account-bonus-quick-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.account-bonus-quick-icon { font-size: 20px; }
.account-bonus-quick-card strong { font-size: 14px; }
.account-bonus-quick-btn {
  padding: 10px;
  border-radius: 8px;
  border: 0;
  background: linear-gradient(90deg, #c6ff3d, #7ed321);
  color: #1c1a19;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.account-bonus-quick-btn.small { padding: 8px 16px; }
.account-trial-bonus-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border-left: 3px solid #e07a1f;
  background: rgba(224, 122, 31, 0.1);
  margin-bottom: 16px;
}
.account-trial-dot { width: 8px; height: 8px; border-radius: 999px; background: #e07a1f; flex-shrink: 0; }
.account-trial-bonus-row strong { font-size: 13px; }
.account-trial-bonus-row p { margin: 2px 0 0; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.account-recent-claims { margin-bottom: 16px; }
.account-recent-claims-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.account-accordion-link {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.account-loyalty-tier-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 20px;
}
.account-loyalty-tier-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: rgba(176, 141, 87, 0.15);
  color: #b08d57;
  flex-shrink: 0;
}
.account-loyalty-tier-info { display: flex; flex-direction: column; gap: 6px; }
.account-loyalty-tier-info strong { font-size: 18px; }
.account-loyalty-tier-info span { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.account-loyalty-swap-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  width: fit-content;
}
.account-loyalty-tier-progress { flex: 1; min-width: 220px; }
.account-loyalty-tier-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 6px;
}
.account-loyalty-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.account-loyalty-progress-bar span {
  display: block;
  height: 100%;
  background: var(--brand-green);
}
.account-loyalty-tier-progress-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 6px;
}
.account-loyalty-rewards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.account-loyalty-tier-desc-card {
  padding: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 24px;
}
.account-loyalty-tier-desc-card strong { font-size: 15px; }
.account-loyalty-tier-desc-card p { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin: 6px 0 12px; }
.account-loyalty-tier-desc-foot { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.account-loyalty-active-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 160, 40, 0.15);
  color: #ffa028;
  font-weight: 700;
  font-size: 11px;
}
.account-store-title { display: block; font-size: 13px; font-weight: 800; margin: 0 0 12px; }
.account-loyalty-tier-strip {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  overflow-x: auto;
}
.account-loyalty-tier-chip {
  flex: 1;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
}
.account-loyalty-tier-chip.active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.account-loyalty-tier-chip em { font-style: normal; font-weight: 500; font-size: 10px; opacity: 0.7; }

.account-store-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.account-store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.account-store-grid.carousel { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 24px; }
@media (max-width: 900px) {
  .account-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .account-store-grid { grid-template-columns: 1fr; }
}
.account-store-card {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.account-store-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(0, 0, 0, 0.3);
}
.account-store-card-media img { width: 100%; height: 100%; object-fit: cover; }
.account-store-card-points-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-size: 10px;
  font-weight: 800;
}
.account-store-card-sub-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.account-store-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}
.account-store-card-foot span { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.7); line-height: 1.4; }
.account-store-card-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 6px;
  border: 0;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* Masaüstü: TEK sidebar sütunu (özet+nav aynı kaydırılabilir kolon —
   referansta ölçülen `.u-i-profile-page-content` deseniyle birebir, bkz.
   includes/account-panel.php üst yorumu), sağda içerik. Önceki sürümde
   summary ve nav ayrı flex item'lardı ve content ile birlikte 3 görsel
   kolon oluşturuyordu — bu bug'ı düzeltmek için ikisi tek `.account-sidebar`
   içinde birleştirildi. */
@media (min-width: 1024px) {
  .account-panel-body {
    flex-direction: row;
    height: 100%;
  }
  .account-sidebar {
    width: 314px;
    flex-shrink: 0;
    padding: 24px 13px;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .account-nav {
    padding: 0;
    overflow-y: visible;
  }
  .account-panel-content {
    border-top: 0;
    padding: 28px 32px;
  }
}

/* Mobil drill-in: view=overview'de sadece özet+nav, view=detail'de sadece
   geri oklu içerik görünür (bkz. Bölüm 11.9.C). */
@media (max-width: 1023.98px) {
  .account-panel[data-view="overview"] .account-panel-content {
    display: none;
  }
  .account-panel[data-view="detail"] .account-sidebar {
    display: none;
  }
  .account-panel[data-view="detail"] .account-panel-back {
    display: flex;
  }
  .account-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  /* Hesabım özet sırası — canlı referansta (galabet1096.com, 2026-08-24
     mobil turu) sıra: bakiye kartları (yatay kaydırmalı) → sadakat puanları
     (ince bar) → profil satırı → menü listesi. PHP çıktısında DOM sırası
     profil→bakiye→sadakat (masaüstü için değişmedi), burada SADECE mobilde
     flex `order` ile görsel sıra referansa çevriliyor. */
  .account-panel-summary {
    display: flex;
    flex-direction: column;
  }
  .account-identity-row { order: 3; margin-top: 12px; }
  .account-verified-row { order: 4; }
  .account-balances { order: 1; margin-top: 0; }
  .account-loyalty-btn { order: 2; }

  /* Bakiye kartları — referansta küçük, yan yana, yatay kaydırmalı (tek
     satır); önceki sürümde tam genişlik + alt alta idi. Sitenin genel
     yeşil ::-webkit-scrollbar'ı burada görünür oluyordu (aynı sınıftan
     bug, bkz. .deposit-category-pills — Modül 18) — gizlendi. */
  .account-balances {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .account-balances::-webkit-scrollbar { display: none; }
  .account-balance-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  /* Font/ikon/padding boyutları artık base kuralla (yukarıda,
     .account-balance-label/-value/-btn/.account-loyalty-*) birebir aynı —
     2026-09-05'te burada eklenen küçültme (10px/16px/18px vb.) 2026-09-08
     canlı ölçümüyle YANLIŞ çıktı (referans mobilde de masaüstüyle aynı
     14px/20px/34px/36px değerlerini kullanıyor), bu yüzden ayrı bir mobil
     override'a gerek kalmadı. */

  /* BUG FIX (2026-08-28, iPhone Yansıtma ile canlı doğrulandı): önceki not
     ("referansta her satır akordeon değil, doğrudan navigasyon") YANLIŞTI
     — gerçek referans DOM'unda grup başlığına dokunmak masaüstündeki gibi
     kendi alt listesini YERİNDE açıyor, ayrı bir ekrana gitmiyor (üstteki
     avatar/bakiye kartları/sadakat barı görünür kalıyor, sadece nav
     listesi morphluyor). `.account-group-list`'in display:none/flex
     geçişi artık BURADA override edilmiyor — üstteki (masaüstüyle
     paylaşılan) `.account-group.open .account-group-list { display:flex }`
     kuralı mobilde de geçerli oluyor (bkz. includes/header.php
     wireAccountToggles — mobil özel "navigasyon yap" dalı da kaldırıldı).
     Kapalıyken ok sağa bakıyor (-90°); açıkken referansta ok tamamen
     kayboluyor ve grup ikonu bir sol ok "<" ile değişiyor (bkz.
     .account-group-back-icon, includes/account-panel.php). */
  .account-group-arrow { transform: rotate(-90deg); }
  .account-group.open .account-group-icon,
  .account-group.open .account-group-arrow {
    display: none;
  }
  /* Bug: ikon .account-group-item-icon-wrap ile koyu bir kutuya sarılınca
     (madde: menü ikonları düzeltmesi), yukarıdaki display:none SADECE
     içindeki SVG'yi gizliyordu — kutu boş/gri bir kare olarak kalıyordu.
     Grup açıkken artık sarmalayıcı da tamamen gizleniyor, sadece sol ok
     "<" görünüyor. */
  .account-group.open .account-group-header > .account-group-item-icon-wrap {
    display: none;
  }
  .account-group.open .account-group-back-icon {
    display: block;
  }

  /* UYGULA butonu — referansta input ile aynı nötr koyu gri, ayrı bir
     yeşil vurgu yok. */
  .account-promo-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
  }
}

/* ==========================================================================
   Para Yatır paneli — banner + kategori pilleri + gerçek 17 yöntem kartı
   (bkz. Bölüm 11.2.E). Hem odeme-yontemleri.php hem Hesabım overlay'inin
   Bakiye Yönetimi > Para Yatır sekmesi bunu kullanıyor.
   ========================================================================== */
.deposit-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.deposit-category-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  /* Site geneli yeşil (#49ac50) scrollbar bu yatay-kaydırmalı pil satırının
     ALTINDA yeşil bir çizgi olarak görünüyordu — referansta (galabet1097.com,
     iPhone Yansıtma, 2026-08-28) pil satırında görünür scrollbar YOK. Bu
     satıra özel gizleniyor (kaydırma çalışmaya devam ediyor). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.deposit-category-pills::-webkit-scrollbar { display: none; }
.deposit-category-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.deposit-category-pill-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* Kategori pil sırası — referansta (galabet1096.com, 2026-08-24 mobil
   turu) TÜMÜ en sonda ve varsayılan aktif değil; PHP'deki DEPOSIT_
   CATEGORY_PILLS dizisinde masaüstü için "all" bilinçli olarak ilk sırada
   tutuluyor (dokunulmadı) — burada SADECE mobilde flex `order` ile TÜMÜ
   pili sona alınıyor.
   2026-08-28 (iPhone Yansıtma, galabet1097.com canlı): mobilde pil düzeni
   masaüstündeki yatay (ikon solda + etiket sağda) DEĞİL, DİKEY — ikon
   üstte, küçük etiket altta, kompakt kareler. Referanstan ölçülen: her
   hücre ~68pt genişlik, ikon ~22px, etiket ~10px tek satır, radius ~8px,
   yatay kaydırılabilir satır. Masaüstü (lg:) yatay düzeni korunuyor. */
@media (max-width: 1023.98px) {
  .deposit-category-pill[data-category="all"] { order: 999; }
  .deposit-category-pill {
    flex-direction: column;
    gap: 6px;
    min-width: 72px;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
  }
  .deposit-category-pill-icon { width: 22px; height: 22px; }
}
.deposit-category-pill:hover:not(.active) {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
/* Referansta ölçülen: seçili pil YEŞİL değil, hafif beyaz vurgu
   (rgba(255,255,255,.3)) — kart seçimindeki aynı desen. */
.deposit-category-pill.active {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}
/* Banner: referansta ölçülen gerçek oran 1056×269 (≈3.93:1), radius 5px —
   önceki sabit h-[140px]/lg:h-[180px] farklı bir oran üretiyordu. Sabit
   piksel yükseklik (breakpoint'e göre) kullanılıyor — `aspect-ratio` ile
   owl-carousel'in kendi genişlik/yükseklik ölçüm JS'i arasında yarış
   durumu oluşup carousel'in bazen 0 yükseklikte donuk kalmasına yol
   açıyordu (owl slide'ları klonlarken geçici olarak genişliği
   sıfırlıyor, o anda aspect-ratio da 0 yüksekliğe çöküyor). */
.deposit-banner { border-radius: 5px; }
.deposit-banner-slide { height: clamp(130px, 17vw, 280px); }
/* Mobil banner'lar (ana sayfa hero + para yatır) — gerçek görsel oranı
   1200x738 (~1.63:1). aspect-ratio yerine sabit clamp() yükseklik
   kullanılıyor (yukarıdaki nottaki owl-carousel genişlik/yükseklik ölçüm
   yarış durumu bunun için de geçerli). */
.hero-mobile-slide,
.deposit-banner-slide-mobile { height: clamp(190px, 61.5vw, 300px); }

.deposit-method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 700px) {
  .deposit-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .deposit-method-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Ödeme yöntemi kartları — referansta (galabet1095.com, 2026-08-24)
   `.m-nav-items-list-item-bc` piksel piksel ölçüldü: kart aslında TEK bir
   sağlayıcı görseli (isim+limit+"İŞLEM YAP" hepsi görselin içine gömülü,
   ayrı DOM metni YOK) — 260×82, radius 5px, ~3px iç boşluk (görsel
   254×78). Seçili değilken kenarlık tamamen şeffaf (YEŞİL DEĞİL — önceki
   sürümün varsayımı yanlıştı), seçiliyken sadece hafif beyaz vurgu:
   border rgba(255,255,255,.2) + bg rgba(255,255,255,.1). Gerçek kart
   görselleri icons.galabet1095.com'dan indirildi (images/payment-cards/). */
.deposit-method-card-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 260 / 82;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.deposit-method-card-v2:hover:not(.selected) {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}
.deposit-method-card-v2.selected {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}
.deposit-method-card-v2-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.deposit-method-card-v2-fallback-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

/* Seçili yöntemin altında tek paylaşılan açıklama + tutar + gönder alanı
   (bkz. includes/deposit.php üst yorumu — kart bazlı ayrı mini-form deseni
   yanlıştı, referans TEK paylaşılan form kullanıyor). */
/* Referansta ölçülen gerçek düzen: açıklama tam genişlik, ama tutar+gönder
   FORM'u dar bir alt sütun (~560px / içerik genişliğinin yarısı), input
   tam genişlik, buton input'un ALTINDA ve auto-width (sol hizalı,
   0 20px padding, 36px yükseklik, #58a400 arka plan). */
.deposit-selected-form-wrap {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 16px;
}
.deposit-selected-disclaimer p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.deposit-selected-disclaimer p:last-child { margin-bottom: 16px; }
.deposit-selected-form-wrap form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  width: 100%;
}
.deposit-selected-form-wrap input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}
.deposit-selected-form-wrap input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.deposit-selected-submit {
  flex-shrink: 0;
  height: 36px;
  padding: 0 20px;
  border-radius: 5px;
  background: #58a400;
  color: #e7ebe5;
  font-size: 12px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.deposit-selected-submit:hover { filter: brightness(1.1); }

/* Banka havalesi seçilince inline "Tutar" formu yerine görünen link —
   bkz. includes/deposit.php render_deposit_panel() üst yorumu. .a
   elementi .deposit-selected-submit'in tüm görselini miras alıyor,
   sadece <a> varsayılan inline/underline davranışını sıfırlıyoruz. */
.deposit-bank-transfer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.deposit-page-v2 {
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.deposit-page-v2-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}

/* Madde 10/12/13 — odeme-bilgi.php (sanal cüzdan/kripto/kredi kartı için
   kendi-site "yöntem bilgisi" ekranı). */
.deposit-info-page { max-width: 560px; }
.deposit-info-back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}
.deposit-info-back-icon { width: 18px; height: 18px; flex-shrink: 0; }
.deposit-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 20px;
}
.deposit-info-card-img { width: 64px; height: auto; border-radius: 6px; flex-shrink: 0; }
.deposit-info-card-text { display: flex; flex-direction: column; gap: 4px; }
.deposit-info-card-text strong { font-size: 13px; color: #fff; }
.deposit-info-card-text span { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.deposit-info-currency-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}
.deposit-info-currency-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 560px;
}
.deposit-info-currency-label > span {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
.deposit-info-currency-trigger {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  cursor: pointer;
}

/* Madde: kripto para birimi seçici — iPhone Yansıtma'da (FulgurPay,
   abet1099.com) canlı ölçülen "Arama Kripto" arama alanlı popup. */
.deposit-currency-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.6);
}
.deposit-currency-picker {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 71;
  width: min(360px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 64px));
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--background);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.deposit-currency-picker-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.deposit-currency-picker-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}
.deposit-currency-picker-search-icon { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.45); flex-shrink: 0; }
.deposit-currency-picker-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 13px;
}
.deposit-currency-picker-search input::placeholder { color: rgba(255, 255, 255, 0.4); }
.deposit-currency-picker-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: #fff;
  cursor: pointer;
}
.deposit-currency-picker-list { overflow-y: auto; padding: 6px; }
.deposit-currency-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
}
.deposit-currency-picker-item:last-child { border-bottom: 0; }
.deposit-currency-picker-item:hover { background: rgba(255, 255, 255, 0.06); }

/* Kripto adım 2 — tek kullanımlık adres + QR (bkz. includes/deposit.php
   render_deposit_crypto_qr_step()). */
.deposit-crypto-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}
.deposit-crypto-qr-svg { width: 168px; height: 168px; border-radius: 8px; }
.deposit-crypto-qr-label { font-size: 13px; font-weight: 700; color: #fff; margin: 0; }
.deposit-crypto-qr-timer { font-size: 12px; color: rgba(255, 255, 255, 0.6); margin: 0; }
.deposit-crypto-qr-timer span { color: var(--brand-green); font-weight: 700; }
.deposit-crypto-address-field {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.deposit-crypto-address-label { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; }
.deposit-crypto-address-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.deposit-crypto-address-value {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deposit-crypto-copy-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 5px;
  border: 0;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.deposit-crypto-copy-btn.copied { background: rgba(255, 255, 255, 0.2); }
.deposit-crypto-rate { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin: 0; }
.deposit-crypto-amount-value { font-weight: 700; color: var(--brand-green); white-space: normal; }
.deposit-crypto-estimate { font-size: 12px; font-weight: 600; color: var(--brand-green); margin: -6px 0 0; width: 100%; max-width: 560px; }
.account-page-v2-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 16px 60px;
}
.account-page-v2-wrap .account-panel {
  min-height: 640px;
}
@media (min-width: 1024px) {
  .account-page-v2-wrap .account-panel {
    box-shadow: 0 0 40px var(--brand-green-glow);
  }
}

/* Mobil header — "Görevler ve Bonuslar" hızlı popover (bkz. header.php
   #mobile-tasks-toggle). Küçük, koyu, BRONZE satırının hemen altında. */
.mobile-tasks-panel {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
}
.mobile-tasks-panel.open {
  display: flex;
}
.mobile-tasks-panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.mobile-tasks-panel-empty {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
/* Mobil header BRONZE rozeti — TAM ölçüm (2026-09-06, m.galabet1101.com,
   document.styleSheets + getComputedStyle ile). Önceki clip-path yaklaşımı
   (2026-09-05) sadece kabaca bir sivri-kenar şekliydi — gerçek teknik bu
   DEĞİL. Gerçek rozet 76x46px'lik bir kutu, içinde 2 katman:
   1) .header-loyalty-badge-bg::before/::after — 80.65x23px, arka plan
      rgb(88,164,0) (=--brand-green), matrix3d ile perspective(80px)
      rotateX(55deg) / rotateX(125deg) döndürülmüş iki panel — üst üste
      binerek katlı/kırık bir kurdele görünümü oluşturuyor (z-index -3).
   2) .header-loyalty-badge-shadow — 88x30px, rgba(0,0,0,.6), blur(4px),
      opacity .5 — kurdelenin arkasında yumuşak bir gölge (z-index -2).
   Metin "BRONZE" 10px/400/rgba(0,2,5,.9), ikon 20x20px (önceden 12x12
   yanlıştı). matrix3d değerleri canlı siteden BİREBİR kopyalandı — kendi
   perspective/rotateX kombinasyonumuzu tahmin etmek yerine. */
.header-loyalty-badge {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 46px;
  padding: 0 6px 0 10px;
  overflow: visible;
  box-sizing: border-box;
}
.header-loyalty-badge-text {
  font-size: 10px;
  font-weight: 400;
  color: rgba(0, 2, 5, 0.9);
  text-transform: uppercase;
  white-space: nowrap;
}
.header-loyalty-badge-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  margin-left: 2px;
  color: #f7d004;
}
.header-loyalty-badge-shadow {
  position: absolute;
  z-index: -2;
  top: 8px;
  left: -6px;
  width: 88px;
  height: 30px;
  background: rgba(0, 0, 0, 0.6);
  filter: blur(4px);
  opacity: 0.5;
}
.header-loyalty-badge-bg {
  position: absolute;
  z-index: -3;
  top: 0;
  left: -2px;
  width: 81px;
  height: 46px;
}
.header-loyalty-badge-bg::before,
.header-loyalty-badge-bg::after {
  content: "";
  position: absolute;
  left: 0;
  width: 81px;
  height: 23px;
  background: rgb(88, 164, 0);
}
.header-loyalty-badge-bg::before {
  top: 13px;
  transform: matrix3d(1, 0, 0, 0, 0, 0.573576, 0.819152, -0.0102394, 0, -0.819152, 0.573576, -0.00716971, 0, 0, 0, 1);
}
.header-loyalty-badge-bg::after {
  top: 10px;
  transform: matrix3d(1, 0, 0, 0, 0, -0.573576, 0.819152, -0.0102394, 0, -0.819152, -0.573576, 0.00716971, 0, 0, 0, 1);
}
/* Mobil header hızlı ikon satırı (BRONZE'un yanındaki gift/$/mesaj/telefon
   butonları) — önceki size-8 (32px) referansa göre büyüktü (referansta
   ekran genişliğinin ~%5.5'i, ~21px); 24px'e küçültüldü. Bu class SADECE
   #mobile-logged-in-bar içinde kullanılıyor (o da zaten lg:hidden), bu
   yüzden masaüstündeki .size-8 kullanımlarını etkilemiyor. */
.mobile-quick-icon {
  width: 24px;
  height: 24px;
}
/* Ödüllerim/Para Yatır/Bonus Talep/Mesajlar/Beni Ara — 2026-09-05'te
   m.galabet1100.com'da giriş yapılmış oturumdan kesin ölçüldü: hepsi
   AYNI stili paylaşıyor (parlak yeşil değil, --accent tonu; 5px radius). */
.mobile-header-icon-btn {
  background: #9cbf63;
  color: #000205;
  border-radius: 5px;
}
.mobile-header-icon-btn svg { width: 16px; height: 16px; }
/* Ödüllerim ikonu BRONZE rozetine bitişik duruyor (0px boşluk) — üst satır
   flex'i gap-1.5 (6px) kullandığı için, sadece bu ilk komşuluğu iptal
   ediyoruz.
   DÜZELTME (2026-09-06, m.galabet1101.com, document.styleSheets'ten
   gerçek kural okundu): 2026-09-05'teki "ayraç/çizgi elementi YOK" tespiti
   YANLIŞTI — gerçekte .fast-track-my-rewards-button{border-right:1px
   solid rgba(255,255,255,.1)} var, 33px kutu (24px ikon + 8px padding-right
   + 1px çizgi), sonrasında 6px margin ile bir sonraki ikona geçiyor.
   Padding+çizgi burada, 6px'lik son boşluk üst satırın kendi gap-1.5'i
   (6px) ile zaten sağlanıyor. */
.header-loyalty-rewards-divider {
  margin-left: -8px;
  padding-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
/* CÜZDAN BAĞLA (mobil) — gerçek referans kuralı: width:45%, flex-shrink:0
   (m.galabet1100.com'da doğrudan stylesheet'ten okundu, 2026-09-05). */
.mobile-wallet-connect-btn { width: 45%; flex-shrink: 0; }
/* ₺▾ para birimi butonu artık mobilde de görünüyor (referansta öyle) —
   masaüstü dolgusu (px-2.5 py-2 text-[13px]) 375px genişlikte logo+bakiye+
   avatar+"..." satırının sarmasına neden oluyordu, mobilde daha dar. */
@media (max-width: 639.98px) {
  #currency-toggle {
    padding: 4px 6px;
    font-size: 12px;
    gap: 2px;
  }
}

/* ==========================================================================
   Header boyut düzeltmesi (2026-08-23, masaüstü boyut turu) — canlı
   referansta (galabet1095.com) getBoundingClientRect/getComputedStyle ile
   ölçüldü: header 56px, aksiyon butonları 28px yükseklik/11px font/500
   weight/5px radius/~10px yatay dolgu, TUR bayrağı 22x14, avatar ikonu
   28px, "..." ve rail-toggle kare butonlar. Önceki h-20 (80px) + py-2 px-4
   Tailwind dolguları referanstan ~%40 daha büyüktü. Tailwind utility
   class'ları yerine (bazılarının @layer sırası nedeniyle override
   edilemediği bu oturumda görüldü) burada özel class'larla, !important ile
   garantiye alınıyor.
   ========================================================================== */
.header-row {
  height: 56px !important;
}
/* .hdr-main-content-bc'nin altındaki ayraç çizgisi — canlı referansta
   (m.galabet1101.com, 2026-09-06, document.styleSheets'ten okundu)
   border-bottom:1px solid rgba(255,255,255,.05). Bizde hiç yoktu. */
.header-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.header-action-btn {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  gap: 6px !important;
}
.header-action-btn svg {
  width: 12px !important;
  height: 12px !important;
}
.header-vip-badge {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
}
#currency-toggle {
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
}
#header-lang-toggle {
  height: 36px;
  padding: 0 8px;
  font-size: 12px;
}
#header-lang-toggle img {
  height: 14px;
  width: 22px;
}
.header-lang-item img {
  height: 14px;
  width: 22px;
}
#header-more-toggle {
  width: 32px !important;
  height: 32px !important;
}
.header-avatar-btn {
  width: 32px !important;
  height: 32px !important;
}
.header-avatar-btn svg {
  width: 16px !important;
  height: 16px !important;
}
.header-avatar-menu {
  /* Referansta ölçülen gerçek dolgu rengi rgb(45,52,68) — bakiye/avatar
     hover kutularıyla aynı ton (bkz. .header-dropdown-trigger:hover
     > .header-balance-text). Köşeli çerçeve, sitedeki diğer 6px
     köşelerle tutarlı. */
  height: 40px;
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgb(45, 52, 68);
}
.header-balance-text {
  font-size: 13px !important;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 5px;
  transition: background-color 0.15s;
}
.header-dropdown-trigger:hover > .header-balance-text {
  background: rgb(45, 52, 68);
}

/* Bakiye + Avatar hover dropdown'ları — referansta canlı ölçüldü
   (galabet1095.com, 2026-08-23): "0 ₺" ve avatar İKİ AYRI hover
   tetikleyicisi, her birinin KENDİ dropdown'ı var (bkz. header.php'deki
   yorum). "Çift kutu" katmanlaması: dış panel (rgb(45,52,68), sadece alt
   köşeler yuvarlak — üstte tetikleyiciye bitişik) + her öğe kendi hafif
   degrade kartı (linear-gradient(to right, rgba(255,255,255,.15),
   rgba(255,255,255,.05)), 5px köşe, 34px yükseklik) — ölçülen ham
   değerler, tahmini değil. */
.header-dropdown-trigger {
  display: flex;
  align-items: center;
}
.header-avatar-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 55;
  min-width: 235px;
  padding: 6px;
  margin-top: 10px;
  border-radius: 0 0 5px 5px;
  background: rgb(45, 52, 68);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.header-avatar-dropdown.header-avatar-dropdown-right {
  left: auto;
  right: 0;
}
.header-dropdown-trigger:hover .header-avatar-dropdown,
.header-avatar-dropdown:hover {
  display: block;
}
.header-dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  margin: 2px 0;
  padding: 0 10px;
  border-radius: 5px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--brand-green-bright, var(--brand-green));
  white-space: nowrap;
}
.header-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.header-dropdown-item:hover {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
}
.header-dropdown-item-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brand-green);
  color: var(--brand-green-foreground);
  font-size: 10px;
  font-weight: 800;
}
.header-dropdown-item-logout {
  height: 30px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.header-dropdown-item-logout:hover {
  background: rgba(255, 255, 255, 0.22);
}
#rail-toggle {
  height: 56px !important;
  width: 56px !important;
}
@media (min-width: 1024px) {
  .brand-logo-img {
    /* Referansta logo kutusu 200x84px ölçüldü ama box-sizing:border-box +
       padding:8px 8px 4px uyguluyor — yani GERÇEK görünür logo içeriği
       84-8-4=72px yükseklik (200-16=184px genişlik), 84px'in kendisi
       padding'i de içeriyordu, bir önceki turda bunu atladık ("çok büyük"
       geri bildirimi buradan geldi). Kendi logomuz aynı kaynak dosya
       (360x120, 3:1 oran) olduğu için doğal oranı bozmadan 72px'e
       getiriliyor. Header'ın kendi 56px'i (.header-row) DEĞİŞMEDİ — logo
       yine de (72-56)/2=8px üstten/alttan taşıyor, referanstaki gibi.
       Bu kural SADECE masaüstünde (≥1024px) geçerli — mobil değer yukarıda
       (591. satır civarı) ayrı, media query'siz bir kuralda; önceden bu
       kural media query'siz olduğu için mobili de eziyordu (bkz. 2026-08-24
       mobil turu notu). */
    height: 72px;
    width: auto;
    max-width: none;
  }
}

/* havale-odeme.php — banka havalesi yöntemlerinin (Trinkpara/MegaPayz/
   XHavale/Anında Havale) KENDİ sitemizdeki, 3. taraf origin'e hiç
   çıkmayan ödeme akışı. Kart/renk/tipografi ölçüleri, galabet1095.com'un
   gerçek "Trinkpara Havale" seçildiğinde yönlendirdiği
   pay.trinkpara.com hosted sayfasından (canlı incelendi — beyaz kart,
   teal/mint arka plan, "Havale ile para yatırma" başlığı, Miktar+TL
   input, yeşil "Sonraki aşamaya geç" butonu) alındı. MegaPayz/XHavale/
   Anında Havale'nin kendi sonraki-adım ekranları hiç görülemedi (tutar
   girip ilerlemek gerçek hesapta gerçek bir para yatırma talebi
   başlatır) — bu yüzden 4 yöntem de AYNI doğrulanmış kart iskeletini
   paylaşıyor, ama her sayfa kendi deposit_methods satırının verisiyle
   (logo/isim/limit/örnek İsim-IBAN/açıklama/buton metni) doluyor,
   karışmasınlar diye. İkinci adım (İsim/Hesap No kopyala + "Yatırılacak
   Tutar" + onay butonu) Next.js kaynağındaki payment-method-1.tsx'in
   (zaten "referans havale onay ekranının recreation'ı" olarak yazılmış)
   beyaz temalı yapısından — buton/uyarı metinleri oradan birebir. */
.havale-page-body {
  margin: 0;
  min-height: 100vh;
  background: #5ec994;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}
.havale-card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 32px 32px 24px;
  box-sizing: border-box;
}
.havale-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.havale-card-brand { font-size: 22px; font-weight: 800; color: #1a1a1a; text-decoration: none; }
.havale-card-brand span { color: #58a400; }
.havale-card-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a1a1a;
}
.havale-card-hr { border: 0; border-top: 1px solid #e5e7eb; margin: 20px 0; }
.havale-heading {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
}
.havale-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.havale-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #9ca3af; flex-shrink: 0; }
.havale-step.active, .havale-step.done { color: #1a1a1a; }
.havale-step-num { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid #d1d5db; font-size: 11px; flex-shrink: 0; }
.havale-step.active .havale-step-num { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.havale-step.done .havale-step-num { background: #58a400; color: #fff; border-color: #58a400; }
.havale-step-line { flex: 1; height: 1px; background: #e5e7eb; }

.havale-amount-form { display: flex; flex-direction: column; gap: 16px; }
.havale-amount-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f5f8;
}
.havale-amount-input-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 14px 16px;
  font-size: 15px;
  color: #1a1a1a;
}
.havale-amount-input-wrap input::placeholder { color: #9ca3af; }
.havale-amount-suffix {
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #e9edf3;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.havale-warnings { margin: 0 0 18px; }
.havale-warnings p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.havale-warnings p::before { content: "!"; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; background: #e02424; color: #fff; font-size: 11px; font-weight: 800; }

.havale-copy-fields { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
.havale-copy-label { display: block; margin-bottom: 8px; font-size: 13px; color: #6b7280; }
.havale-copy-box {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f3f5f8;
}
.havale-copy-value {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.havale-copy-btn {
  flex-shrink: 0;
  width: 96px;
  border: 0;
  border-left: 1px solid #e5e7eb;
  background: transparent;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.havale-copy-btn:hover { background: #e9edf3; }
.havale-copy-btn.copied { color: #58a400; }

.havale-instruction { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #6b7280; }
.havale-example-tag { margin: 8px 0 0; font-size: 11px; font-style: italic; color: #9ca3af; }

.havale-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e5e7eb;
  margin-top: 18px;
  padding: 18px 0;
  font-size: 14px;
  color: #6b7280;
}
.havale-amount-row strong { font-size: 19px; font-weight: 800; color: #1a1a1a; }

.havale-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #58a400;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 15px 0;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}
.havale-btn-primary:hover { filter: brightness(1.08); }
.havale-back-form { margin: 10px 0 0; text-align: center; }
.havale-link-btn { border: 0; background: none; color: #6b7280; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 6px; }

.havale-success { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 20px 0 28px; }
.havale-success-icon-wrap { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 999px; border: 1px solid #e5e7eb; }
.havale-success-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: linear-gradient(135deg, #5fcb5f, #2e9e2e); color: #fff; font-size: 28px; font-weight: 800; }
.havale-success-title { margin: 0; font-size: 18px; font-weight: 800; color: #1a1a1a; }
.havale-success-sub { margin: 0; font-size: 13px; color: #6b7280; }

.havale-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #9ca3af;
}
.havale-card-footer a { color: #9ca3af; }
.havale-form-message {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.havale-form-message.error { background: #fdecec; color: #b91c1c; }

/* MegaPayz Havale — gerçek megapayz01.com hosted sayfasından (kullanıcının
   kendi galabet hesabından, kendi tıklamalarıyla ilerletilip canlı
   ölçüldü) birebir ölçülen değerler: mavi gradyan arka plan, köşeleri
   az yuvarlak (4px) beyaz kart, açık gri kutulu alanlar, sarı uyarı
   kutusu. */
.havale-mp-body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(145deg, #0099ff, #0066cc);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}
.havale-mp-card {
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 4px;
  padding: 48px 56px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.19);
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-sizing: border-box;
}
.havale-mp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.havale-mp-heading { margin: 0; font-size: 15.2px; font-weight: 600; color: #212529; }
.havale-mp-back { font-size: 13px; font-weight: 600; color: #0d6efd; text-decoration: none; }
.havale-mp-hr { margin: 24px 0 16px; }

.havale-mp-field-box {
  background: rgba(221, 228, 236, 0.3);
  border: 1px solid rgba(221, 228, 236, 0.46);
  border-radius: 5px;
  padding: 8px 12px;
  margin: 0 0 14px;
}
.havale-mp-field-label { display: block; font-size: 11.2px; color: #808080; }
.havale-mp-field-value {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  box-sizing: border-box;
}
.havale-mp-field-value::placeholder { color: #9ca3af; font-weight: 400; }
.havale-mp-field-caption { display: block; margin-top: 6px; font-size: 12.8px; color: #888; }

.havale-mp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(6deg, #0099ff, #0066cc);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 0;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}
.havale-mp-btn:hover { filter: brightness(1.06); }

.havale-mp-amount-top { text-align: right; font-size: 19px; font-weight: 700; color: #212529; margin-bottom: 16px; }
.havale-mp-alert-warning {
  background: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
}
.havale-mp-copy-row { margin-bottom: 14px; }
.havale-mp-copy-label { display: block; font-size: 11.2px; color: #808080; margin-bottom: 4px; }
.havale-mp-copy-box {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(221, 228, 236, 0.6);
  border-radius: 5px;
  overflow: hidden;
}
.havale-mp-copy-value {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.havale-mp-copy-btn {
  flex-shrink: 0;
  width: 48px;
  border: 0;
  background: linear-gradient(6deg, #0099ff, #0066cc);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.havale-mp-copy-btn.copied { background: #28a745; }

.havale-mp-brand { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: #1a1a1a; }
.havale-mp-provider { font-size: 13px; font-weight: 800; color: #0099ff; }

.havale-mp-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 70px 0; text-align: center; }
.havale-mp-spinner {
  width: 64px; height: 64px; border-radius: 999px;
  border: 4px solid rgba(0, 153, 255, 0.2);
  border-top-color: #0099ff;
  animation: havale-mp-spin 0.8s linear infinite;
}
@keyframes havale-mp-spin { to { transform: rotate(360deg); } }
.havale-mp-loading-title { margin: 0; font-size: 18px; font-weight: 800; color: #212529; }
.havale-mp-loading-sub { margin: 0; font-size: 13px; color: #6b7280; }
.havale-mp-success { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 20px 0 28px; }

/* XHavale — gerçek deposit.xyatirim1.com hosted sayfasından (aynı şekilde
   kullanıcının kendi hesabından ilerletilip ölçüldü) birebir ölçülen
   değerler: koyu lacivert DaisyUI teması, kesikli çizgili input'lar, mor
   birincil buton, sayaçlı uyarı kutusu. Renkler DaisyUI kütüphanesi
   eklenmeden, doğrudan ölçülen oklch() değerleriyle yazıldı (modern
   tarayıcılarda native destekleniyor). */
.havale-xh-body {
  margin: 0;
  min-height: 100vh;
  background: oklch(0.2533 0.016 252.42);
  display: flex;
  justify-content: center;
  padding: 40px 16px;
  box-sizing: border-box;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}
.havale-xh-card { width: 100%; max-width: 672px; }
.havale-xh-heading { margin: 0 0 20px; font-size: 24px; font-weight: 700; color: oklch(0.97807 0.029 256.847); text-align: center; }

.havale-xh-timer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: oklch(0.2326 0.014 253.1);
  border: 1px solid oklch(0.2326 0.014 253.1);
  border-radius: 6px;
  padding: 12px 16px;
  color: oklch(0.97807 0.029 256.847);
  font-size: 14px;
  margin-bottom: 20px;
}
.havale-xh-timer strong { font-weight: 700; }

.havale-xh-steps { margin-bottom: 24px; }
.havale-xh-step-row { display: flex; align-items: center; gap: 8px; max-width: 200px; }
.havale-xh-step-circle {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: oklch(0.2326 0.014 253.1);
  color: oklch(0.97807 0.029 256.847);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px; font-weight: 700;
}
.havale-xh-step-circle.active { background: oklch(0.58 0.233 277.117); border-color: oklch(0.58 0.233 277.117); }
.havale-xh-step-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.15); }
.havale-xh-step-labels {
  display: flex; justify-content: space-between; max-width: 200px;
  margin-top: 4px; font-size: 13px; color: oklch(0.97807 0.029 256.847 / 0.75);
}

.havale-xh-field { margin-bottom: 20px; }
.havale-xh-field-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: oklch(0.97807 0.029 256.847); }
.havale-xh-field-caption { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: oklch(0.97807 0.029 256.847 / 0.5); }
.havale-xh-input-static {
  display: block;
  height: 40px; line-height: 38px;
  padding: 0 12px;
  background: oklch(0.2533 0.016 252.42);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: oklch(0.97807 0.029 256.847);
  font-size: 14px;
}
.havale-xh-input-join {
  display: flex;
  align-items: stretch;
  height: 40px;
  background: oklch(0.2533 0.016 252.42);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}
.havale-xh-input-prefix {
  display: flex; align-items: center;
  padding: 0 12px;
  color: oklch(0.97807 0.029 256.847 / 0.4);
  font-size: 14px;
  border-right: 1px dashed rgba(255, 255, 255, 0.2);
}
.havale-xh-input, .havale-xh-input-editable {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  border: 0; background: transparent;
  color: oklch(0.97807 0.029 256.847);
  font-size: 14px;
  padding: 0 12px;
}
.havale-xh-input-editable::placeholder { color: oklch(0.97807 0.029 256.847 / 0.4); }
.havale-xh-copy-btn {
  flex-shrink: 0;
  border: 0;
  background: oklch(0.58 0.233 277.117);
  color: oklch(0.96 0.018 272.314);
  font-size: 14px; font-weight: 600;
  padding: 0 16px;
  cursor: pointer;
}
.havale-xh-copy-btn.copied { background: oklch(0.6 0.15 150); }

.havale-xh-warning-list { list-style: none; margin: 20px 0; padding: 0; color: oklch(0.97807 0.029 256.847); font-size: 14px; line-height: 1.6; }
.havale-xh-warning-list li { margin-bottom: 8px; }

.havale-xh-btn-row { display: flex; gap: 12px; margin-top: 24px; }
.havale-xh-btn-row-end { justify-content: flex-end; }
.havale-xh-btn-primary, .havale-xh-btn-ghost {
  height: 40px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.havale-xh-btn-primary {
  background: oklch(0.58 0.233 277.117);
  color: oklch(0.96 0.018 272.314);
  border: 1px solid oklch(0.55 0.02 272);
}
.havale-xh-btn-ghost {
  background: oklch(0.2326 0.014 253.1);
  color: oklch(0.97807 0.029 256.847);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.havale-xh-btn-block { display: flex; width: 100%; margin-top: 16px; box-sizing: border-box; }

/* Bildirim izni pop-up'ı — galabet1097.com'dan canlı ölçülen değerler
   (masaüstü: sağ üst Toastify-tarzı toast; mobil: müşterinin gönderdiği
   ekran görüntüsüne dayanan ortalanmış kart). */
@keyframes notif-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes notif-modal-in {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}
.notif-toast-desktop {
  position: fixed;
  top: 20px;
  right: 26px;
  z-index: 60;
  width: min(470px, calc(100vw - 32px));
  background: var(--background);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  animation: notif-toast-in 0.3s ease;
}
.notif-toast-body { display: flex; gap: 12px; padding-right: 20px; }
.notif-toast-icon { width: 48px; height: 48px; flex-shrink: 0; }
.notif-toast-title { font: 500 16px/24px Roboto, Arial, Helvetica, sans-serif; color: #fff; margin: 0 0 4px; }
.notif-toast-desc { font: 14px/20px Roboto, Arial, Helvetica, sans-serif; color: rgba(255, 255, 255, 0.56); margin: 0; }
.notif-toast-close {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: #fff; opacity: 0.8; cursor: pointer; padding: 0;
}
.notif-toast-close:hover { opacity: 1; }
.notif-toast-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.notif-btn-dismiss, .notif-btn-allow {
  border: none; border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.notif-btn-dismiss { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); }
.notif-btn-dismiss:hover { background: rgba(255, 255, 255, 0.14); }
.notif-btn-allow { background: var(--brand-green); color: #000205; }
.notif-btn-allow:hover { filter: brightness(1.1); }

.notif-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: notif-backdrop-in 0.3s ease;
}
@keyframes notif-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.notif-modal-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  z-index: 60;
  background: var(--background);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.35);
  padding: 20px 20px 32px;
  text-align: center;
  animation: notif-modal-in 0.3s ease;
}
.notif-modal-handle { width: 36px; height: 4px; background: rgba(255, 255, 255, 0.25); border-radius: 999px; margin: 0 auto 20px; }
.notif-modal-icon { width: 56px; height: 56px; margin: 0 auto 16px; }
.notif-modal-title { font: 700 16px/22px Roboto, Arial, Helvetica, sans-serif; color: #fff; margin: 0 0 8px; }
.notif-modal-desc { font: 14px/20px Roboto, Arial, Helvetica, sans-serif; color: rgba(255, 255, 255, 0.56); margin: 0 0 20px; }
.notif-modal-actions { display: flex; gap: 10px; }
.notif-modal-actions .notif-btn-dismiss,
.notif-modal-actions .notif-btn-allow { flex: 1; padding: 11px 12px; font-size: 13px; }

/* LiveChatLauncher — gerçek LiveChat (livechat.com) widget'ının "minimized"
   ikonundan (galabet1097.com, tarayıcıyla ölçüldü, 2026-08-28)
   birebir. Referansta konteyner 84x84px (tıklama alanı) ama görünen daire
   60x60px, ortalanmış; sadece masaüstünde bottom:40px/right:16px ölçüldü,
   mobilde kendi alt tab bar'ımızın üzerinde kalması için ayrı bir değer
   korundu (referansın kendi mobil offset'i bu oturumda ölçülmedi). Bu
   class'lar Tailwind arbitrary-value olarak derlenmiş css/site.css'te hiç
   yoktu (bkz. includes/footer.php yorumu), bu yüzden düz CSS. */
.live-chat-launcher {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #73d943;
  box-shadow: 0 0.36px 0.94px -1px rgba(0, 0, 0, 0.125), 0 3px 7.8px -2px rgba(0, 0, 0, 0.18);
}
.live-chat-launcher-icon {
  width: 32px;
  height: 32px;
}
/* Hover'daki ikon değişimi — kullanıcının paylaştığı ekran görüntüsüyle
   doğrulandı, bkz. includes/footer.php yorumu. Geçiş eğrisi + gecikme +
   nokta konum/yarıçapı canlı referanstan (React widget'ın DOM'una senkron
   mouseenter event dispatch edilerek) ölçüldü. */
.live-chat-launcher-cutout {
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.05s;
}
.live-chat-launcher-dots {
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.05s;
}
.live-chat-launcher:hover .live-chat-launcher-cutout {
  opacity: 0;
}
.live-chat-launcher:hover .live-chat-launcher-dots {
  opacity: 1;
}
@media (min-width: 1024px) {
  .live-chat-launcher {
    bottom: 40px;
  }
}

/* Mobil hamburger menü — Casino/Canlı Casino akordeon alt listesi. Bug fix
   2026-08-28: bkz. includes/header.php $MOBILE_MENU_EXPANDABLE yorumu.
   Ok, .open class'ı eklenince 180° dönüyor (Hesabım akordeonundaki
   .account-group-arrow ile aynı davranış). */
.nav-menu-arrow {
  transition: transform 0.15s ease;
}
.nav-menu-group.open .nav-menu-arrow {
  transform: rotate(180deg);
}
.nav-menu-sublist {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 8px 12px;
}
.nav-menu-group.open .nav-menu-sublist {
  display: flex;
}
.nav-menu-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}
.nav-menu-subitem:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.nav-menu-subitem-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* "BAKİYE YÖNETİMİ" mobil liste ekranı — ikon rozeti. Kullanıcının
   paylaştığı referans ekran görüntüsünde her satırın ikonu düz değil,
   koyu (neredeyse siyah) yuvarlak köşeli bir kare rozetin içinde —
   önceki uygulama (.account-group-icon, düz 20px ikon) bunu atlamıştı.
   Sadece bu listeye özel (bkz. includes/account-sections.php) — Bonus
   Yolculuk gibi .account-standalone-item'ın diğer kullanımları
   etkilenmesin diye .account-bakiye-menu içine scope'landı. */
.account-bakiye-menu .account-group-icon {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 9px;
  border-radius: 8px;
  /* background-color (background: DEĞİL) — shorthand kullanılırsa
     background-image'i 'none'e resetleyip .acc-sprite'ın arka plan
     görselini eziyordu (bu satır .acc-sprite'tan daha spesifik: 2 class
     vs 1 class). 2026-09-08'de bulunan bug — bkz. account_icon_markup(). */
  background-color: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

/* papara-odeme.php — Aninda_Papara'nın gerçek 3. taraf tasarımı (FST
   Papara, deposit.fstpapara.com'dan getComputedStyle ile canlı ölçüldü,
   2026-08-30). Bootstrap tabanlı bir sağlayıcı: açık gri sayfa zemini,
   beyaz/köşeleri az yuvarlak kart, cam-mavisi (#0dcaf0, Bootstrap
   "btn-info") birincil buton, açık camgöbeği bilgi kutusu. Kopyalanabilir
   İsim/IBAN alanları (2. adım) havale-odeme.php ile paylaşılan nötr
   .havale-copy-* class'larını kullanıyor. */
.papara-fst-body {
  margin: 0;
  min-height: 100vh;
  background: #f9f9f9;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}
.papara-fst-card {
  width: 100%;
  max-width: 856px;
  background: #fff;
  border: 1px solid #dddfeb;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
.papara-fst-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.papara-fst-logo { flex-shrink: 0; }
.papara-fst-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.papara-fst-pill {
  display: inline-block;
  border: 1px solid #dddfeb;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: #5e6278;
  cursor: pointer;
  background: #fff;
  transition: background-color 0.15s ease;
}
.papara-fst-pill:hover { background: #f9f9f9; }
.papara-fst-body-inner { padding: 24px; }
.papara-fst-field-label { display: block; margin-bottom: 8px; font-size: 14px; color: #3f4254; }
.papara-fst-input {
  display: block;
  width: 100%;
  max-width: 383px;
  border: 1px solid #e4e6ef;
  border-radius: 8px;
  background: #fff;
  color: #5e6278;
  font-size: 14px;
  padding: 12px 16px;
  box-sizing: border-box;
  text-align: right;
}
.papara-fst-submit-row { display: flex; justify-content: flex-end; margin-top: 16px; max-width: 383px; }
.papara-fst-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: #0dcaf0;
  color: #fff;
  font-size: 13.6px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}
.papara-fst-btn:hover { filter: brightness(1.06); }
.papara-fst-btn-block { display: flex; width: 100%; }
.papara-fst-info-box {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #cff4fc;
  color: #055160;
  font-size: 13px;
  line-height: 1.6;
}
.papara-fst-copy-intro { margin: 0 0 18px; font-size: 14px; color: #3f4254; }
@media (max-width: 639.98px) {
  .papara-fst-input, .papara-fst-submit-row { max-width: none; }
}

/* papara-odeme.php — MPay Papara'nın gerçek 3. taraf tasarımı
   (oto.cekdimtis.link, açık kaynak "Colorlib Login Form v10" şablonu,
   canlı ölçüldü 2026-08-30). Açık gri zemin, beyaz yükseltilmiş kart,
   alt çizgili input'lar, koyu lacivert buton. */
.papara-mpay-body {
  margin: 0;
  min-height: 100vh;
  background: #eeeeee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}
.papara-mpay-card {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
  padding: 35px 25px 24px;
  box-sizing: border-box;
  text-align: center;
}
.papara-mpay-logo { display: block; width: 180px; height: auto; margin: 0 auto 20px; }
.papara-mpay-disclaimer { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: #1b2a56; }
.papara-mpay-form { text-align: left; }
.papara-mpay-field { margin-bottom: 16px; }
.papara-mpay-field-label { display: block; margin-bottom: 6px; font-size: 12px; color: #6b7280; }
.papara-mpay-input {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #d9d9d9;
  background: transparent;
  padding: 8px 4px;
  font-size: 15px;
  color: #1a1a1a;
  box-sizing: border-box;
}
.papara-mpay-input:disabled { color: #6b7280; }
.papara-mpay-input::placeholder { color: #9ca3af; }
.papara-mpay-cancel-row { text-align: right; margin-bottom: 16px; }
.papara-mpay-cancel { font-size: 12px; color: #6b7280; text-decoration: underline; }
.papara-mpay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #2f3350, #1c1f38);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}
.papara-mpay-btn:hover { filter: brightness(1.1); }

/* Madde 1 (EKSIKLER-13-MADDE-NEXTJS-AKTARIM.md) — header.php'deki VIP
   rozeti + "Cüzdan Bağla" butonlarında canlı referansla eşleşmesi için
   text-brand-gold-foreground/text-brand-green-foreground yerine kullanılan
   koyu metin rengi. Tailwind derlemesinde bu class hiç yoktu. */
/* Madde 1 düzeltme (2026-09-05, Chrome ile m.galabet1100.com'da giriş
   yapılmış oturumdan gerçek ölçüldü): BRONZE rozeti + Cüzdan Bağla metni
   var(--brand-bg) (#2d3444) DEĞİL, #000205 (neredeyse siyah) kullanıyor —
   diğer düğmelerde de (.notif-btn-allow) zaten aynı sabit değer var. */
.text-brand-bg { color: #000205; }

/* Madde 4 — Ayarlar sayfası (Oran Formatı/Dil/Saat Formatı), .account-filter-select
   ile aynı görsel dil (rounded, bg-white/[0.06], küçük gri UPPERCASE etiket). */
.account-settings-list { display: flex; flex-direction: column; gap: 10px; }
.account-settings-row {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 36px 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.account-settings-row-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}
.account-settings-row-select {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  outline: none;
  padding: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.account-settings-row-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* Madde 2 — footer link grupları ("|" ayraçlı yatay akış). Bu 2 utility
   Tailwind derlemesinde (purge) yoktu. */
.gap-y-1\.5 { row-gap: 0.375rem; }
.text-white\/20 { color: rgb(255 255 255 / 0.2); }

/* kripto-odeme.php — TrinkParaCrypto'nun gerçek 3. taraf tasarımı
   (pay.trinkpara.com/Methods/Crypto/, canlı ölçüldü 2026-09-05, kullanıcının
   kendi hesabından kendi tıklamalarıyla): mint/teal zemin, beyaz 386px kart,
   Bootstrap-4 form kontrolleri, yeşil "İşleme Başla!" butonu. */
.kripto-tp-body {
  margin: 0;
  min-height: 100vh;
  background: #71d0ae;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}
.kripto-tp-card {
  width: 100%;
  max-width: 386px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.25);
  padding: 30px 25px;
  box-sizing: border-box;
}
.kripto-tp-title { margin: 0 0 18px; font-size: 16px; font-weight: 500; color: #212529; }
.kripto-tp-select {
  display: block;
  width: 100%;
  height: 38px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  color: #495057;
  font-size: 16px;
  padding: 6px 12px;
  margin: 0 0 14px;
  box-sizing: border-box;
}
.kripto-tp-amount-wrap { display: flex; margin: 0 0 16px; }
.kripto-tp-amount-wrap input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 1px solid #ced4da;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  padding: 6px 12px;
  font-size: 16px;
  color: #495057;
  box-sizing: border-box;
}
.kripto-tp-amount-suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0 4px 4px 0;
  color: #495057;
  font-size: 16px;
}
.kripto-tp-btn {
  display: block;
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: 4px;
  background: #28a745;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}
.kripto-tp-btn:hover { filter: brightness(1.05); }
.kripto-tp-btn-block { display: flex; align-items: center; justify-content: center; }
.kripto-tp-hr { border: 0; border-top: 1px solid #dee2e6; margin: 24px 0 16px; }
.kripto-tp-footer { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #6c757d; }

/* kripto-odeme.php — MegaPayzCrypto'nun gerçek 3. taraf tasarımı
   (megapayz01.com/payment/crypto/, canlı ölçüldü 2026-09-05): kart/mavi
   gradyan zemin/buton havale-odeme.php'deki MegaPayz Havale tasarımıyla
   (.havale-mp-*) BİREBİR AYNI ölçüldü — kod tekrarı önlemek için o class'lar
   doğrudan yeniden kullanıldı, sadece 7'li kripto ikon grid'i buraya yeni. */
.kripto-mp-title { margin: 0; font-size: 15.2px; font-weight: 600; color: #212529; }
.kripto-mp-coin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 8px;
  margin: 20px 0 24px;
  text-align: center;
}
.kripto-mp-coin { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.kripto-mp-coin input { position: absolute; opacity: 0; pointer-events: none; }
.kripto-mp-coin-icon { width: 50px; height: 50px; }
.kripto-mp-coin-label { font-size: 14px; font-weight: 600; color: #007bff; }
.kripto-mp-coin:has(input:checked) .kripto-mp-coin-label { text-decoration: underline; }
@media (max-width: 479.98px) {
  .kripto-mp-coin-grid { grid-template-columns: repeat(3, 1fr); }
}

/* kripto-odeme.php — miktar hesaplama onay adımı (TrinkParaCrypto +
   MegaPayzCrypto ortak, kullanıcı talebi 2026-09-05). Her iki kart da
   beyaz/açık zeminli olduğu için nötr, Bootstrap'a yakın bir gri kutu —
   FulgurPay'in koyu temalı .deposit-crypto-address-* eşdeğeri. */
.kripto-confirm-field { margin: 0 0 14px; text-align: left; }
.kripto-confirm-label { display: block; font-size: 11px; font-weight: 700; color: #6c757d; text-transform: uppercase; margin-bottom: 4px; }
.kripto-confirm-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 5px;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
}
.kripto-confirm-value {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kripto-confirm-copy-btn {
  flex-shrink: 0;
  border: 0;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: #6c757d;
  color: #fff;
}
.kripto-confirm-copy-btn.copied { background: #28a745; }
.kripto-tp-rate-note { font-size: 12px; color: #6c757d; margin: 0 0 16px; }

/* havale-odeme.php — Aninda_Havale'nin gerçek 3. taraf tasarımı
   (deposit.ftbankpay2.com, "Havale/Fast" markası, 2026-09-05). Sadece hata
   durumu gözlemlendi (beyaz kart, serif başlık) — buradaki değerler o
   gözlemden yaklaşık alındı, tam ölçülemedi (bkz. render_havale_ftbankpay
   üst yorumu). */
.havale-fb-body {
  margin: 0;
  min-height: 100vh;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  font-family: Georgia, 'Times New Roman', serif;
}
.havale-fb-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  padding: 32px 28px;
  box-sizing: border-box;
}
.havale-fb-brand { margin: 0 0 24px; font-size: 22px; font-weight: 700; color: #1a1a1a; text-align: center; }
.havale-fb-brand span { color: #9ca3af; font-weight: 400; }
.havale-fb-field { display: block; margin: 0 0 18px; font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }
.havale-fb-field span { display: block; margin-bottom: 6px; font-size: 12px; color: #6b7280; }
.havale-fb-field input {
  display: block;
  width: 100%;
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 15px;
  color: #1a1a1a;
  box-sizing: border-box;
}
.havale-fb-btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: #1a1a1a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  transition: filter 0.15s ease;
}
.havale-fb-btn:hover { filter: brightness(1.2); }
.havale-fb-btn-block { display: flex; align-items: center; justify-content: center; }
.havale-fb-hr { margin: 24px 0 16px; }

/* Hesabım paneli — gerçek ikon sprite'ı (2026-09-08, m.galabet1102.com,
   iPhone ile canlı ölçüldü). Referans, ikonları düz SVG
   değil "BetConstruct-Icons" adlı özel bir icon-font'un glifleriyle
   çiziyor (bkz. includes/header.php'deki eski bc-i-circle-dollar/
   bc-i-message notu, Güncelleme 15). Font dosyasını indirmek Cloudflare'e
   takılıyor (403) — bu yüzden glifler sitede zaten yüklü haldeyken bir
   <canvas>'a 56px boyutunda render edilip tek bir 6x6'lık (480x480, hücre
   80px) sprite PNG'sine dönüştürülüp indirildi (includes/account-panel.php
   account_sprite_available()/account_icon_markup() bu dosyayı kullanıyor,
   yoksa eski lucide SVG'lere düşüyor). Konum hesaplaması: col/5*100%,
   row/5*100% (6 sütun/satır, background-size 600% 600% element'in kendi
   kutusuna göre orantılanıyor — bu yüzden 14px/18px/20px/26px gibi farklı
   ikon kutularının hepsinde otomatik doğru ölçekleniyor). */
.acc-sprite {
  display: inline-block;
  background-image: url('/images/account/account-icons-sprite.png');
  background-repeat: no-repeat;
  background-size: 600% 600%;
}
.acc-sprite-balance-management        { background-position: 0%   0%; }
.acc-sprite-promotion                 { background-position: 20%  0%; }
.acc-sprite-user                      { background-position: 40%  0%; }
.acc-sprite-history                   { background-position: 60%  0%; }
.acc-sprite-message                   { background-position: 80%  0%; }
.acc-sprite-journey                   { background-position: 100% 0%; }
.acc-sprite-small-arrow-right         { background-position: 0%   20%; }
.acc-sprite-small-arrow-left          { background-position: 20%  20%; }
.acc-sprite-circle-dollar             { background-position: 40%  20%; }
.acc-sprite-withdraw                  { background-position: 60%  20%; }
.acc-sprite-withdraws                 { background-position: 80%  20%; }
.acc-sprite-wallet                    { background-position: 100% 20%; }
.acc-sprite-bonus-request             { background-position: 0%   40%; }
.acc-sprite-loyalty-points            { background-position: 20%  40%; }
.acc-sprite-bonus-sportsbook          { background-position: 40%  40%; }
.acc-sprite-bonus                     { background-position: 60%  40%; }
.acc-sprite-casino-free-chip          { background-position: 80%  40%; }
.acc-sprite-bonus-casino              { background-position: 100% 40%; }
.acc-sprite-promo-code                { background-position: 0%   60%; }
.acc-sprite-scratch-card              { background-position: 20%  60%; }
.acc-sprite-exchange-shop             { background-position: 40%  60%; }
.acc-sprite-refer-to-friend           { background-position: 60%  60%; }
.acc-sprite-change-password           { background-position: 80%  60%; }
.acc-sprite-time-out                  { background-position: 100% 60%; }
.acc-sprite-two-factor-authentication { background-position: 0%   80%; }
.acc-sprite-confirmation-settings     { background-position: 20%  80%; }
.acc-sprite-verify-account            { background-position: 40%  80%; }
.acc-sprite-open-bets                 { background-position: 60%  80%; }
.acc-sprite-bet-history               { background-position: 80%  80%; }
.acc-sprite-cashed-out                { background-position: 100% 80%; }
.acc-sprite-inbox                     { background-position: 0%   100%; }
.acc-sprite-sent                      { background-position: 20%  100%; }
.acc-sprite-add-circle                { background-position: 40%  100%; }
.acc-sprite-eye                       { background-position: 60%  100%; }
.acc-sprite-copy                      { background-position: 80%  100%; }
.acc-sprite-verified                  { background-position: 100% 100%; }

/* papara-odeme.php — TrinkPara Papara (render_papara_trinkpara). Gerçek
   pay.trinkpara.com/Methods/Papara/'den (2026-09-09, m.galabet1102.com)
   canlı ölçüldü: standart Bootstrap 4 form-control/input-group/
   btn-success, teal arka plan, radius 15px beyaz kart. */
.papara-trink-body {
  margin: 0;
  min-height: 100vh;
  background: #71d0ae;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}
.papara-trink-card {
  width: 100%;
  max-width: 490px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
  padding: 30px 25px;
  box-sizing: border-box;
}
.papara-trink-title { margin: 0 0 20px; font-size: 16px; font-weight: 500; color: #212529; }
.papara-trink-input-group { display: flex; align-items: stretch; height: 38px; }
.papara-trink-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #ced4da;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  padding: 6px 12px;
  font-size: 16px;
  color: #495057;
  background: #fff;
  box-sizing: border-box;
}
.papara-trink-input::placeholder { color: #6c757d; }
.papara-trink-suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0 4px 4px 0;
  font-size: 16px;
  color: #495057;
}
.papara-trink-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 1px solid #28a745;
  border-radius: 4px;
  background: #28a745;
  color: #fff;
  font-size: 16px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  transition: filter 0.15s ease;
}
.papara-trink-btn:hover { filter: brightness(1.06); }
.papara-trink-hr { border: 0; border-top: 1px solid #e9ecef; margin: 20px 0 12px; }
.papara-trink-footer { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #6c757d; }

/* papara-odeme.php — MegaCüzdan (render_papara_megacuzdan), sadece 2.
   adımın (gerçek giriş formunun kozmetik klonu) kendine özgü class'ları
   — geri kalanı includes/havale-designs.php .havale-mp-* ile paylaşılıyor
   (aynı MegaPayz görsel sistemi, canlı doğrulandı 2026-09-09). */
.papara-mc-logo { text-align: center; font-size: 22px; font-weight: 800; color: #181c32; margin-bottom: 18px; }
.papara-mc-logo span { color: #009ef7; }
.papara-mc-heading { text-align: center; margin: 0 0 24px; font-size: 19.5px; font-weight: 600; color: #181c32; }

/* papara-odeme.php — MegaPayz Papara (render_papara_megapayzpapara),
   2. adımın sayaç/giriş satırı + 1. adımın video-yardım kutusu/hızlı
   tutar pilleri — geri kalanı yine .havale-mp-* ile paylaşılıyor. */
.papara-mpp-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border-radius: 20px;
  background: linear-gradient(145deg, #0099ff, #0066cc);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 18px;
}
.papara-mpp-login-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 15.2px; font-weight: 600; color: #212529; }
.papara-mpp-login-row strong { font-size: 16px; font-weight: 700; }
.papara-mpp-phone-link { margin: -6px 0 14px; text-align: right; font-size: 13px; font-weight: 600; color: #808080; }
.papara-mpp-help {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: #eef7ff;
  cursor: default;
}
.papara-mpp-help-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid #0099ff;
  color: #0099ff;
  font-size: 11px;
}
.papara-mpp-help-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.papara-mpp-help-text strong { font-size: 13.5px; font-weight: 700; color: #212529; }
.papara-mpp-help-text small { font-size: 12px; color: #6b7280; }
.papara-mpp-help-chevron { flex-shrink: 0; font-size: 20px; color: #0099ff; }
.papara-mpp-pills-label { margin: 0 0 8px; font-size: 12.8px; font-weight: 600; color: #0099ff; }
.papara-mpp-pills { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; scrollbar-width: none; }
.papara-mpp-pills::-webkit-scrollbar { display: none; }
.papara-mpp-pill {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid rgba(221, 228, 236, 0.6);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}


/* Mobil yöntem detay ekranı (referans m.galabet1106.com, 2026-09-20):
   karta basınca banner/pil/kart listesi gizlenir, sadece başlık + mini
   kart + uyarı + Tutar/PARA YATIR görünür. Masaüstünde etkisiz. */
.deposit-detail-head { display: none; }
@media (max-width: 1023.98px) {
  .deposit-panel.deposit-detail-open > :not(.deposit-selected-form-wrap) { display: none !important; }
  .deposit-panel.deposit-detail-open .deposit-selected-form-wrap { background: transparent; padding: 0; }
  .deposit-panel.deposit-detail-open .deposit-detail-head { display: block; margin-bottom: 14px; }
  .deposit-detail-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .deposit-detail-back {
    width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.85); color: #2d3444;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  .deposit-detail-title { font-size: 14px; font-weight: 600; color: #fff; text-transform: uppercase; }
  .deposit-detail-card img { width: 190px; max-width: 60%; height: auto; border-radius: 6px; display: block; }
  .deposit-panel.deposit-detail-open .deposit-selected-disclaimer {
    background: rgba(0, 0, 0, 0.15); border-radius: 6px; padding: 12px; margin-bottom: 14px;
  }
  .deposit-panel.deposit-detail-open .deposit-selected-disclaimer p:last-child { margin-bottom: 0; }
  .deposit-panel.deposit-detail-open .deposit-selected-form-wrap form,
  .deposit-panel.deposit-detail-open .deposit-selected-submit { max-width: none; width: 100%; }
}
@media (max-width: 1023.98px) {
  .deposit-page-v2:has(.deposit-detail-open) .deposit-page-v2-title { display: none; }
}

/* Detay ekranında site header'ı/duyuru çubuğu/alt tab bar gizlenir; yerine
   referanstaki gibi logo + X üst çubuğu (referans m.galabet1106.com). */
.deposit-detail-topbar { display: none; }
@media (max-width: 1023.98px) {
  body:has(.deposit-detail-open) header,
  body:has(.deposit-detail-open) #announcement-bar,
  body:has(.deposit-detail-open) nav[aria-label="Alt gezinme"] { display: none !important; }
  .deposit-panel.deposit-detail-open .deposit-detail-topbar {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
  }
  .deposit-detail-logo { height: 26px; width: auto; display: block; }
  .deposit-detail-close { color: rgba(255, 255, 255, 0.85); display: inline-flex; background: transparent; border: 0; padding: 0; cursor: pointer; }
}
@media (max-width: 1023.98px) {
  body:has(.deposit-detail-open) footer { display: none !important; }
}

/* Hesabım panelinin içinde (overlay) yöntem detayı açıkken paneli kendi
   üst çubuğu/geri/başlığı gizlenir — detay kendi logo+X ve başlığını çiziyor. */
@media (max-width: 1023.98px) {
  .account-panel:has(.deposit-detail-open) .account-panel-topbar,
  .account-panel:has(.deposit-detail-open) .account-panel-back,
  .account-panel:has(.deposit-detail-open) .account-panel-content-title { display: none; }
}