/* TayGame ortak bileşenleri.
   Tema CSS'i budanmış bir Tailwind derlemesi; burada kullanılan yardımcılar
   derlemede olmayabileceği için bileşenler kendi sınıflarıyla tanımlanır. */

[hidden] { display: none !important }
body { padding-bottom: 3.5rem }
@media (min-width: 1024px) { body { padding-bottom: 0 } }

/* ---- Kutular, form öğeleri, düğmeler ---- */
.tg-kutu  { background: rgb(var(--color-primary)); border-radius: .5rem }
.tg-alt   { background: rgb(var(--color-secondary)); border-radius: .375rem }
.tg-input { background: rgb(var(--color-secondary)); color: rgb(var(--color-text));
            border: 1px solid rgba(255,255,255,.08); border-radius: .375rem; padding: .7rem .9rem; width: 100% }
.tg-input:focus { outline: none; border-color: rgb(var(--color-logo)) }
.tg-btn { background: rgb(var(--color-logo)); color: #fff; border-radius: .375rem; padding: .7rem 1.4rem;
          font-weight: 600; display: inline-block; text-align: center; border: 0; cursor: pointer; transition: opacity .2s }
.tg-btn:hover { opacity: .85 }
.tg-btn:disabled { opacity: .5; cursor: not-allowed }
.tg-btn-alt  { background: rgb(var(--color-secondary)); color: rgb(var(--color-text)) }
.tg-btn-yesil { background: #1f9254 }
.tg-btn-kucuk { padding: .4rem .8rem; font-size: .8rem }
.tg-etiket { display: block; font-size: .85rem; margin-bottom: .3rem }

.tg-tablo { width: 100%; border-collapse: collapse }
.tg-tablo th, .tg-tablo td { padding: .8rem .6rem; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; text-align: left }
.tg-tablo th { font-size: .75rem; text-transform: uppercase; color: #8b8f96; font-weight: 600 }
.tg-rozet { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap }
.tg-bekleme { background: #b4881b; color: #fff }
.tg-onay    { background: #1b74b4; color: #fff }
.tg-tamam   { background: #1f9254; color: #fff }
.tg-iptal   { background: #b42318; color: #fff }

/* ---- Izgaralar ---- */
.tg-izgara      { display: grid; gap: 1rem; grid-template-columns: 1fr }
.tg-izgara-esit { display: grid; gap: .75rem; grid-template-columns: 1fr }
.tg-sarmala     { overflow-x: auto }
@media (min-width: 768px) {
  .tg-izgara-esit { grid-template-columns: repeat(2, minmax(0,1fr)) }
  .tg-izgara-esit.tg-uc { grid-template-columns: repeat(3, minmax(0,1fr)) }
  .tg-izgara-esit.tg-dort { grid-template-columns: repeat(4, minmax(0,1fr)) }
}
@media (min-width: 1024px) { .tg-izgara { grid-template-columns: minmax(0,2fr) minmax(0,1fr) } }

.tg-alt-izgara { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (min-width: 1024px) { .tg-alt-izgara { grid-template-columns: repeat(5, minmax(0,1fr)) } }

/* ---- Hesap sayfaları ---- */
/* minmax(0,1fr): ızgara sütunu içeriğinden geniş olamaz. Yoksa yan menünün
   yatay kayan şeridi sütunu şişirip tüm sayfayı yana kaydırıyordu. */
.tg-hesap-duzen { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) }
.tg-hesap-yan, .tg-hesap-yan nav { min-width: 0 }
@media (min-width: 1024px) { .tg-hesap-duzen { grid-template-columns: 260px minmax(0,1fr) } }
.tg-hesap-link { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: .375rem; font-size: .9rem }
.tg-hesap-link i { width: 1.1rem; text-align: center; color: rgb(var(--color-logo)) }
.tg-hesap-link:hover, .tg-hesap-link.aktif { background: rgb(var(--color-secondary)) }
.tg-hesap-link.aktif { font-weight: 600 }
@media (max-width: 1023px) {
  .tg-hesap-yan nav { display: flex; overflow-x: auto; gap: .25rem }
  .tg-hesap-yan nav .tg-hesap-link { white-space: nowrap }
}
/* Üye avatarı: yüklenen fotoğraf (tg-avatar-resim) ya da baş harfli daire (tg-avatar).
   Ölçü, çağıran yerdeki satır içi width/height ile belirlenir (includes/avatar.php). */
.tg-avatar { width: 2.6rem; height: 2.6rem; border-radius: 999px; background: rgb(var(--color-logo)); color: #fff;
             display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
             line-height: 1; text-transform: uppercase; letter-spacing: .02em }
.tg-avatar-resim { border-radius: 999px; object-fit: cover; flex-shrink: 0; background: rgb(var(--color-secondary)) }
.tg-istatistik { background: rgb(var(--color-primary)); border-radius: .5rem; padding: 1rem }
.tg-istatistik span { display: block; font-size: .75rem; color: #8b8f96 }
.tg-istatistik b { font-size: 1.3rem }

/* ---- Başlık açılır menüsü ---- */
.tg-hesap-menu { min-width: 380px }
.tg-hesap-menu .grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem }
.tg-nokta { position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: 999px; background: rgb(var(--color-logo)) }

/* ---- Puan ve favori ---- */
.tg-yildizlar { color: #fbbf24; letter-spacing: 1px }
.tg-puan { font-size: .72rem; color: #fbbf24 }
.tg-favori { position: absolute; z-index: 20; right: .5rem; top: .5rem; width: 2rem; height: 2rem; border-radius: 999px;
             background: rgba(0,0,0,.55); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center }
.tg-favori.aktif, .tg-favori.aktif i { color: #ef4444 }
.tg-favori-buyuk { position: static; width: auto; height: auto; padding: .6rem 1rem; border-radius: .375rem; gap: .5rem; background: rgb(var(--color-secondary)) }
.tg-uyari-bolge { background: rgba(180,136,27,.18); border: 1px solid rgba(180,136,27,.5); border-radius: .375rem; padding: .6rem .8rem; font-size: .8rem }

/* ---- Sekmeler ve akordeon ---- */
.tg-sekmeler { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.08) }
.tg-sekme { padding: .8rem 1rem; white-space: nowrap; border-bottom: 2px solid transparent; background: none; color: inherit; cursor: pointer }
.tg-sekme.aktif { border-color: rgb(var(--color-logo)); font-weight: 600 }
.tg-akordeon { border-bottom: 1px solid rgba(255,255,255,.07) }
.tg-akordeon-baslik { width: 100%; text-align: left; padding: 1rem .25rem; display: flex; justify-content: space-between; gap: 1rem;
                      background: none; color: inherit; border: 0; cursor: pointer; font-weight: 600 }
.tg-akordeon-baslik i { transition: transform .2s }
.tg-akordeon.acik .tg-akordeon-baslik i { transform: rotate(180deg) }
.tg-akordeon-govde { padding: 0 .25rem 1rem; color: #b3b7bd; line-height: 1.75; font-size: .92rem }

/* ---- Geri sayım ---- */
.tg-geri-sayim { display: inline-flex; gap: .35rem; font-variant-numeric: tabular-nums }
.tg-geri-sayim b { background: rgb(var(--color-logo)); border-radius: .3rem; padding: .15rem .45rem; font-size: .8rem }

/* ---- Hikâyeler ---- */
.tg-hikayeler { display: flex; gap: .9rem; overflow-x: auto; padding: .25rem }
.tg-hikaye { flex: 0 0 auto; width: 88px; text-align: center; font-size: .72rem }
.tg-hikaye img { width: 80px; height: 80px; border-radius: 999px; object-fit: cover; border: 3px solid rgb(var(--color-logo));
                 padding: 2px; margin: 0 auto .35rem; transition: transform .4s }
.tg-hikaye:hover img { transform: rotate(8deg) scale(1.05) }
@media (min-width: 1024px) { .tg-hikaye { width: 110px } .tg-hikaye img { width: 100px; height: 100px } }

/* ---- Modallar ---- */
.tg-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 1rem }
.tg-modal-ic { position: relative; background: rgb(var(--color-primary)); border-radius: .6rem; padding: 1.5rem; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto }
.tg-modal-kapat { position: absolute; right: .8rem; top: .5rem; font-size: 1.6rem; background: none; border: 0; color: inherit; cursor: pointer }

/* ---- Başa dön, sohbet, çerez ---- */
.tg-yukari { position: fixed; right: 1rem; bottom: 5rem; z-index: 40; width: 2.6rem; height: 2.6rem; border-radius: 999px;
             background: rgb(var(--color-secondary)); color: #fff; border: 1px solid rgba(255,255,255,.1); cursor: pointer;
             opacity: 0; visibility: hidden; transition: all .2s }
.tg-yukari.gorunur { opacity: 1; visibility: visible }
.tg-sohbet { position: fixed; left: 1rem; bottom: 4.5rem; z-index: 45 }
@media (min-width: 1024px) { .tg-sohbet { bottom: 1.2rem } .tg-yukari { bottom: 1.2rem } }
.tg-sohbet-dugme { width: 3.7rem; height: 3.7rem; border-radius: 999px; background: #25d366; color: #fff; font-size: 2rem;
                   border: 0; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35) }
.tg-sohbet-kutu { position: absolute; bottom: 4rem; left: 0; width: 300px; background: rgb(var(--color-primary));
                  border-radius: .6rem; box-shadow: 0 10px 30px rgba(0,0,0,.45) }
.tg-cerez { position: fixed; left: 0; right: 0; bottom: 3.5rem; z-index: 55; background: rgb(var(--color-secondary));
            border-top: 1px solid rgba(255,255,255,.08); padding: 1rem 0 }
@media (min-width: 1024px) { .tg-cerez { bottom: 0 } }

/* ---- Mesajlaşma ---- */
.tg-mesaj-duzen { display: grid; gap: 1rem; grid-template-columns: 1fr }
@media (min-width: 768px) { .tg-mesaj-duzen { grid-template-columns: 260px minmax(0,1fr) } }
.tg-mesajlar { display: flex; flex-direction: column; gap: .6rem; max-height: 480px; overflow-y: auto; padding: .5rem }
.tg-mesaj { max-width: 80%; padding: .7rem .9rem; border-radius: .6rem; background: rgb(var(--color-secondary)); white-space: pre-line }
.tg-mesaj.benim { align-self: flex-end; background: rgba(237,28,36,.25) }
.tg-mesaj small { display: block; margin-top: .3rem; font-size: .7rem; color: #8b8f96 }

/* ---- İçerik metinleri (haber, sayfa) ---- */
.tg-metin { line-height: 1.85; font-size: .95rem }
.tg-metin p { margin-bottom: 1rem }
.tg-metin h2, .tg-metin h3 { font-weight: 600; margin: 1.2rem 0 .6rem; font-size: 1.15rem }
.tg-metin ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem }
.tg-metin img { border-radius: .5rem; margin: 1rem 0 }
.tg-metin a { color: rgb(var(--color-logo)); text-decoration: underline }
.tg-kisalt { max-height: 4.8em; overflow: hidden; position: relative }
.tg-kisalt.acik { max-height: none }

/* ---- Panel › Banner Listesi (üst, alt, anasayfa arası…) ---- */
.tg-bannerlar{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tg-bannerlar a,.tg-bannerlar>div{display:block;border-radius:10px;overflow:hidden}
.tg-bannerlar img{display:block;width:100%;height:auto}
.tg-banner-ust,.tg-banner-alt{grid-template-columns:1fr}
.tg-rozet-boost{background:linear-gradient(90deg,#f59e0b,#ef4444);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}
.tg-anket-cubuk{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.tg-anket-cubuk span{display:block;height:100%;background:rgb(var(--color-logo))}

/* ================================================================== *
 * Görünüm (sürüm 4): lacivert palet, Inter yazı tipi, yapışkan başlık,
 * geniş arama, menü satırı, kart ve bölüm başlıkları.
 * Renkler :root değişkenlerinden gelir (Panel › Site Ayarları › Tema).
 * ================================================================== */
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background-color: rgb(var(--color-main)); color: rgb(var(--color-text));
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
::selection { background: rgb(var(--color-logo) / .35) }
a, button { transition: color .15s, background-color .15s, border-color .15s, opacity .15s }
:focus-visible { outline: 2px solid rgb(var(--color-logo)); outline-offset: 2px }
@media (min-width: 1400px) { .container { max-width: 1400px } }
.tg-sarici { max-width: 1400px; margin: 0 auto; padding: 0 1rem }
@media (min-width: 768px) { .tg-sarici { padding: 0 1.5rem } }
.text-gray { color: #9aa6bd }

/* ---- Üst şerit ---- */
.tg-ust-serit { background: #162232; color: #c2c9dc; font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.05) }
.tg-ust-serit .tg-sarici { min-height: 40px }
.tg-ust-serit h1, .tg-ust-serit .truncate { font-size: .8rem; font-weight: 400; color: #8e9bb3 }
.tg-ust-serit a:hover, .tg-ust-serit button:hover { color: #fff }
/* Temanın budanmış Tailwind derlemesinde min-w-0 / overflow-x-auto yok; şerit kendi sınıflarıyla daralır. */
.tg-serit-sol { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; overflow: hidden }
.tg-serit-sol .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.tg-serit-sag { display: flex; align-items: center; min-width: 0; flex: 0 1 auto }
.tg-serit-baglantilar { display: flex; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none }
.tg-serit-baglantilar::-webkit-scrollbar { display: none }
.tg-serit-baglantilar a { white-space: nowrap }
.tg-serit-sabit { flex-shrink: 0 }
.tg-vurgu-link { color: #fd4301 !important; font-weight: 600 }
.tg-vurgu-link:hover { color: #ff6a33 !important }
.tg-sosyal { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 15px; color: #c2c9dc }
.tg-sosyal:hover { background: rgba(255,255,255,.08); color: #fff }
.select-language > div { border-radius: 0 0 10px 10px; box-shadow: 0 12px 30px rgba(0,0,0,.4) }

/* ---- Başlık ---- */
.tg-baslik { position: sticky; top: 0; z-index: 45; background: rgb(var(--color-main) / .94);
             -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
             border-bottom: 1px solid rgba(255,255,255,.06) }
.tg-baslik-satir { display: flex; align-items: center; gap: .5rem; height: 64px }
.tg-logo { display: block; flex-shrink: 0; width: 128px; margin-right: auto }
.tg-logo img { display: block; width: 100%; max-height: 52px; object-fit: contain; object-position: left center }
/* Logo görünüm moduna göre değişir: iki logo da sayfada durur, CSS birini gizler,
   böylece tema düğmesine basınca sayfa yenilenmeden anında değişir. */
html[data-tema="koyu"] img.tg-logo-acik,
html[data-tema="acik"] img.tg-logo-koyu { display: none !important }
.tg-baslik-araclar { display: flex; align-items: center; flex-shrink: 0; gap: .15rem }
.tg-sepet-rozet { position: absolute; right: -10px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
                  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff;
                  background: rgb(var(--color-logo)); box-shadow: 0 0 0 2px rgb(var(--color-main)) }
.tg-sepet-yazi { padding-left: .35rem }
@media (min-width: 1024px) {
  .tg-baslik-satir { gap: 1.5rem; height: 80px }
  .tg-logo { width: 180px; margin-right: 0 }
}
.tg-arama { flex: 1; max-width: 680px; margin: 0 auto; position: relative; align-items: center }
/* Büyüteç tıklanabilir: yazı varsa arar, boşsa alana odaklanır (scripts/tg-site.js) */
.tg-arama > i { position: absolute; left: 1rem; color: #8e9bb3; font-size: 1rem; cursor: pointer; padding: .4rem; margin: -.4rem }
.tg-arama > i:hover { color: rgb(var(--color-logo)) }
.tg-arama input { width: 100%; height: 46px; border-radius: 10px; background: #2f4056; border: 1px solid #3c455e; color: #e0e1e5;
                  padding: 0 5.6rem 0 2.8rem; font-size: .9rem; transition: border-color .2s, box-shadow .2s }
.tg-arama input::placeholder { color: #8e9bb3 }
.tg-arama input:focus { outline: none; border-color: rgb(var(--color-logo)); box-shadow: 0 0 0 3px rgb(var(--color-logo) / .2) }
.tg-arama button { position: absolute; right: 5px; height: 36px; padding: 0 1.1rem; border-radius: 8px;
                   background: rgb(var(--color-logo)); color: #fff; font-weight: 600; font-size: .85rem }
.tg-arama button:hover { background: rgb(var(--color-logo-hover)) }
.tg-baslik-dugme { display: flex; align-items: center; gap: .6rem; height: 46px; padding: 0 .75rem; border-radius: 10px; white-space: nowrap }
.tg-baslik-dugme:hover, .tg-baslik-dugme.active { background: rgba(255,255,255,.07) }
.tg-baslik-dugme > span > i, .tg-baslik-dugme > i { font-size: 20px }
.tg-ikon-dugme { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 10px }
.tg-ikon-dugme:hover { background: rgba(255,255,255,.07) }
.tg-baslik .dropdown-menu { top: calc(100% + 8px); border-radius: 12px; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 16px 40px rgba(0,0,0,.45) }
.tg-ana-menu { border-top: 1px solid rgba(255,255,255,.05) }
.tg-ana-menu .tg-sarici { overflow-x: auto }
.tg-menu-oge { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 8px;
               font-size: .875rem; font-weight: 500; color: #c2c9dc; white-space: nowrap }
.tg-menu-oge:hover { color: #fff; background: rgba(255,255,255,.07) }
.tg-menu-tum { background: rgb(var(--color-logo) / .14); color: #fff; font-weight: 600 }
.tg-menu-tum i { color: rgb(var(--color-logo)) }
.tg-baslik .search_popup { border-bottom: 1px solid rgba(255,255,255,.06) }
.tg-baslik .search_popup .tg-arama { max-width: none }
.mobile-menu .inner { max-width: 340px }

/* ---- Düğme, kutu, form ---- */
.tg-btn { border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem }
.tg-btn:hover { opacity: 1; background: rgb(var(--color-logo-hover)) }
.tg-btn-alt:hover { background: #3a4d67 }
.tg-kutu { border: 1px solid rgba(255,255,255,.05); border-radius: 12px }
.tg-input { border-radius: 10px; border-color: #3c455e }
.tg-input:focus { box-shadow: 0 0 0 3px rgb(var(--color-logo) / .2) }
.breadcrumbs { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.05) }
.tg-mesaj.benim { background: rgb(var(--color-logo) / .22) }

/* ---- Bölüm başlıkları ---- */
.tg-bolum-baslik { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 .375rem .9rem }
.tg-bolum-baslik h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 700; letter-spacing: .01em }
.tg-bolum-baslik h2::before { content: ""; width: 4px; height: 1.15em; border-radius: 4px; background: rgb(var(--color-logo)) }
.tg-bolum-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 500; color: #c2c9dc;
                 padding: .4rem .9rem; border-radius: 999px; background: rgb(var(--color-secondary) / .7) }
.tg-bolum-link:hover { background: rgb(var(--color-logo)); color: #fff }

/* ---- Ürün ve kategori kartları ---- */
.product_card > div, .game_card > a > div { border: 1px solid rgba(255,255,255,.05); border-radius: 12px;
                                              transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease }
.product_card:hover > div, .game_card:hover > a > div { transform: translateY(-4px); border-color: rgb(var(--color-logo) / .55);
                                                        box-shadow: 0 14px 30px rgba(0,0,0,.35) }
.product_card .rounded, .game_card .rounded { border-radius: 8px }
.product_card .lbl_product_title { color: #fff }
.tg-fiyat { font-size: 1rem; font-weight: 700; color: #fff }
.product_card form button, .product_card a.bg-orange, .game_card .bg-orange { font-size: .91rem; padding-top: .45rem; padding-bottom: .45rem }

/* ---- Hikâyeler ---- */
.tg-hikaye img { border: 0; padding: 3px; background: linear-gradient(135deg, rgb(var(--color-logo)), #7b5cff) }
.tg-hikaye span { color: #c2c9dc; margin-top: .15rem }

/* ---- Alt bilgi ---- */
.tg-alt-bilgi { background: #162232; border-top: 1px solid rgba(255,255,255,.06) }
.tg-alt-bilgi h4 { font-size: .95rem; color: #fff }
.tg-alt-bilgi a.text-gray:hover { color: #fff }
.tg-alt-bilgi .bg-primary { background: rgb(var(--color-primary) / .6) }

/* ---- Sepet: adet seçici (değişince otomatik güncellenir, scripts/tg-sepet.js) ---- */
.tg-adet { display: inline-flex; align-items: center; border: 1px solid #3c455e; border-radius: 10px; overflow: hidden;
           background: rgb(var(--color-secondary)) }
.tg-adet button { width: 34px; height: 38px; display: flex; align-items: center; justify-content: center;
                  background: none; border: 0; color: #c2c9dc; cursor: pointer; font-size: .75rem }
.tg-adet button:hover { background: rgb(var(--color-logo)); color: #fff }
.tg-adet input { width: 46px; height: 38px; text-align: center; background: transparent; border: 0; color: #fff;
                 font-weight: 600; -moz-appearance: textfield; appearance: textfield }
.tg-adet input::-webkit-outer-spin-button, .tg-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.tg-adet input:focus { outline: none; background: rgba(255,255,255,.05) }
.tg-adet:focus-within { border-color: rgb(var(--color-logo)) }
.tg-satir-yukleniyor { opacity: .55; pointer-events: none; transition: opacity .15s }

/* Izgara sütunları içerikleri (geniş tablo vb.) yüzünden sayfayı taşırmasın */
.tg-izgara > * { min-width: 0 }

/* Telefonda sepet satırları kart düzeninde: üstte görsel + ad + sil, altta adet + tutar */
@media (max-width: 640px) {
  .tg-sepet-tablo thead { display: none }
  .tg-sepet-tablo, .tg-sepet-tablo tbody { display: block; width: 100% }
  .tg-sepet-tablo tr { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center;
                       column-gap: .75rem; row-gap: .75rem; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.07) }
  .tg-sepet-tablo tr:last-child { border-bottom: 0 }
  .tg-sepet-tablo td { display: block; padding: 0; border: 0; width: auto !important }
  .tg-sepet-tablo td:nth-child(1) { grid-column: 1; grid-row: 1; align-self: start }
  .tg-sepet-tablo td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: start }
  .tg-sepet-tablo td:nth-child(5) { grid-column: 3; grid-row: 1; align-self: start; justify-self: end }
  .tg-sepet-tablo td:nth-child(3) { grid-column: 1 / span 2; grid-row: 2 }
  .tg-sepet-tablo td:nth-child(4) { grid-column: 3; grid-row: 2; font-size: 1.05rem }
}
.tg-parla { animation: tgParla .9s ease }
@keyframes tgParla { from { color: rgb(var(--color-logo)); text-shadow: 0 0 12px rgb(var(--color-logo) / .6) } }

/* ==================================================================
   Görünüm modları: <html data-tema="koyu|acik"> — koyu varsayılandır.
   Arkaplan ve yazı renkleri burada tanımlıdır; vurgu rengi (--color-logo)
   her iki modda da panelden gelir (Tema Ayarları).
   ================================================================== */

/* ---- İki parçalı mod anahtarı (koyu | açık) ---- */
.tg-tema-anahtar {
  position: relative; display: inline-grid; grid-template-columns: repeat(2, 30px); height: 34px; padding: 3px;
  border-radius: 999px; background: rgb(var(--color-secondary)); border: 1px solid rgb(var(--color-text) / .08);
  margin-right: .35rem; flex-shrink: 0;
}
.tg-tema-anahtar::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 30px; height: 26px; border-radius: 999px;
  background: rgb(var(--color-logo)); box-shadow: 0 2px 8px rgb(var(--color-logo) / .45);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
html[data-tema="acik"] .tg-tema-anahtar::before { transform: translateX(30px) }
.tg-tema-anahtar button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 13px; color: rgb(var(--color-text) / .6); transition: color .2s;
}
.tg-tema-anahtar button:hover { color: rgb(var(--color-text)) }
.tg-tema-anahtar button[aria-checked="true"] { color: #fff }
.tg-tema-anahtar button:focus-visible { outline: 2px solid rgb(var(--color-logo)); outline-offset: 2px }
/* Telefonda başlık tek satıra sığsın: logo, anahtar ve ikonlar küçülür */
@media (max-width: 480px) {
  .tg-tema-anahtar { grid-template-columns: repeat(2, 26px); height: 32px; margin-right: .1rem }
  .tg-tema-anahtar::before, .tg-tema-anahtar button { width: 26px; height: 24px }
  .tg-tema-anahtar button { font-size: 12px }
  html[data-tema="acik"] .tg-tema-anahtar::before { transform: translateX(26px) }
  .tg-baslik-satir { gap: .35rem }
  .tg-logo { min-width: 0; flex: 1 1 auto }
  .tg-logo img { max-width: 100%; height: auto; max-height: 40px; object-fit: contain; object-position: left center }
  .tg-baslik-araclar .tg-ikon-dugme { width: 36px; height: 38px; font-size: 18px }
}
html.tg-tema-gecis body, html.tg-tema-gecis body * {
  transition: background-color .3s, border-color .3s, color .2s !important;
}

/* ---- Koyu: daha derin, nötr siyah tonlar ---- */
html[data-tema="koyu"] {
  --color-text: 229 231 235;
  --color-main: 10 13 18;
  --color-primary: 20 24 31;
  --color-secondary: 31 37 47;
  color-scheme: dark;
}
html[data-tema="koyu"] .tg-ust-serit, html[data-tema="koyu"] .tg-alt-bilgi { background: #06080c }
html[data-tema="koyu"] .tg-arama input { background: rgb(var(--color-secondary)); border-color: rgb(255 255 255 / .08) }

/* ---- Açık ---- */
html[data-tema="acik"] {
  --color-text: 17 24 39;
  --color-main: 243 245 249;
  --color-primary: 255 255 255;
  --color-secondary: 234 238 244;
  color-scheme: light;
}
html[data-tema="acik"] .text-gray { color: #5f6b7d }
html[data-tema="acik"] .tg-tablo th, html[data-tema="acik"] .tg-istatistik span,
html[data-tema="acik"] .tg-mesaj small { color: #5f6b7d }

/* Sabit beyaz yazılar: renkli zemin (düğme, rozet) üzerindekiler beyaz kalır */
html[data-tema="acik"] .text-white:not(:is(.bg-orange, .bg-danger, .bg-success, .badge, .tg-btn, [class*="bg-red"], [class*="bg-green"])):not(:is(.bg-orange, .bg-danger, .bg-success, .badge, .tg-btn, .tg-bolum-link:hover, .swiper-slide, .tg-rozet) *),
html[data-tema="acik"] .hover\:text-white:hover:not(:is(.bg-orange, .tg-btn)),
html[data-tema="acik"] .product_card .lbl_product_title,
html[data-tema="acik"] .tg-fiyat,
html[data-tema="acik"] .tg-alt-bilgi h4,
html[data-tema="acik"] .tg-alt-bilgi a.text-gray:hover,
html[data-tema="acik"] .tg-menu-oge:hover,
html[data-tema="acik"] .tg-ust-serit a:hover, html[data-tema="acik"] .tg-ust-serit button:hover,
html[data-tema="acik"] .tg-sosyal:hover,
html[data-tema="acik"] .tg-adet input { color: rgb(var(--color-text)) }
html[data-tema="acik"] .tg-menu-tum { color: rgb(var(--color-logo)) }
html[data-tema="acik"] .text-white\/70, html[data-tema="acik"] .text-white\/80 { color: rgb(var(--color-text) / .75) }

/* Beyaz saydam kenarlık ve zeminler → koyu saydam */
html[data-tema="acik"] .tg-kutu, html[data-tema="acik"] .product_card > div, html[data-tema="acik"] .game_card > a > div,
html[data-tema="acik"] .breadcrumbs, html[data-tema="acik"] .tg-ana-menu, html[data-tema="acik"] .tg-baslik,
html[data-tema="acik"] .tg-baslik .search_popup, html[data-tema="acik"] .tg-baslik .dropdown-menu,
html[data-tema="acik"] .tg-sekmeler, html[data-tema="acik"] .tg-akordeon, html[data-tema="acik"] .tg-tablo th,
html[data-tema="acik"] .tg-tablo td, html[data-tema="acik"] .tg-input, html[data-tema="acik"] .tg-alt-bilgi,
html[data-tema="acik"] .tg-ust-serit { border-color: rgb(15 23 42 / .09) }
html[data-tema="acik"] [style*="rgba(255,255,255,.1)"] { border-color: rgb(15 23 42 / .09) !important }
html[data-tema="acik"] .tg-baslik-dugme:hover, html[data-tema="acik"] .tg-baslik-dugme.active,
html[data-tema="acik"] .tg-ikon-dugme:hover, html[data-tema="acik"] .tg-menu-oge:hover,
html[data-tema="acik"] .tg-sosyal:hover, html[data-tema="acik"] .tg-adet input:focus { background: rgb(15 23 42 / .06) }
html[data-tema="acik"] .tg-anket-cubuk { background: rgb(15 23 42 / .08) }
html[data-tema="acik"] .bg-white\/5, html[data-tema="acik"] .bg-white\/10 { background-color: rgb(15 23 42 / .05) }

/* Gölgeler yumuşar */
html[data-tema="acik"] .product_card > div, html[data-tema="acik"] .game_card > a > div, html[data-tema="acik"] .tg-kutu {
  box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 4px 14px rgb(15 23 42 / .05);
}
html[data-tema="acik"] .product_card:hover > div, html[data-tema="acik"] .game_card:hover > a > div { box-shadow: 0 14px 30px rgb(15 23 42 / .12) }
html[data-tema="acik"] .tg-baslik .dropdown-menu, html[data-tema="acik"] .select-language > div { box-shadow: 0 16px 40px rgb(15 23 42 / .14) }

/* Başlık, üst şerit, alt bilgi, arama */
html[data-tema="acik"] .tg-baslik { background: rgb(255 255 255 / .92) }
html[data-tema="acik"] .tg-ust-serit { background: #e6ebf2; color: #475467 }
html[data-tema="acik"] .tg-alt-bilgi { background: #e9eef5 }
html[data-tema="acik"] .tg-arama input { background: rgb(var(--color-secondary)); border-color: transparent; color: rgb(var(--color-text)) }
html[data-tema="acik"] .tg-arama input:focus { background: #fff; border-color: rgb(var(--color-logo)) }
html[data-tema="acik"] .tg-sepet-rozet { box-shadow: 0 0 0 2px #fff }
html[data-tema="acik"] .tg-modal { background: rgb(15 23 42 / .45) }
html[data-tema="acik"] .tg-ust-serit .text-white, html[data-tema="acik"] .tg-ust-serit a:not(.tg-vurgu-link), html[data-tema="acik"] .tg-ust-serit button { color: #475467 }
html[data-tema="acik"] .tg-ust-serit a:hover, html[data-tema="acik"] .tg-ust-serit button:hover { color: rgb(var(--color-text)) }
html[data-tema="acik"] input::placeholder, html[data-tema="acik"] textarea::placeholder { color: #8a94a6 }
html[data-tema="acik"] .swal2-popup { background: #fff; color: rgb(var(--color-text)) }

/* Açık modda #c2c9dc tonundaki ikincil yazılar koyulaşır */
html[data-tema="acik"] .tg-sosyal, html[data-tema="acik"] .tg-menu-oge, html[data-tema="acik"] .tg-bolum-link,
html[data-tema="acik"] .tg-hikaye span, html[data-tema="acik"] .tg-adet button:not(:hover) { color: #475467 }
html[data-tema="acik"] .tg-adet { border-color: rgb(15 23 42 / .12) }
html[data-tema="acik"] .tg-bolum-link { background: rgb(var(--color-secondary)) }
html[data-tema="acik"] .tg-bolum-link:hover { color: #fff; background: rgb(var(--color-logo)) }
html[data-tema="acik"] .tg-puan { color: #d97706 }

/* Açık modda okunabilirlik: vurgu rengi yazıda ve düğmede koyulaşır (açık zeminde yeterli kontrast) */
html[data-tema="acik"] { --tg-vurgu-koyu: color-mix(in srgb, rgb(var(--color-logo)) 72%, #000) }
html[data-tema="acik"] .text-orange, html[data-tema="acik"] a.text-orange, html[data-tema="acik"] .text-orange\/80 { color: var(--tg-vurgu-koyu) }
html[data-tema="acik"] .tg-btn:not(.tg-btn-alt):not(.tg-btn-yesil), html[data-tema="acik"] .tg-arama button,
html[data-tema="acik"] .bg-orange, html[data-tema="acik"] .tg-sepet-rozet { background-color: var(--tg-vurgu-koyu) }
html[data-tema="acik"] .tg-ust-serit h1, html[data-tema="acik"] .tg-ust-serit .truncate { color: #5f6b7d }
html[data-tema="acik"] .tg-vurgu-link { color: #c2410c !important }
html[data-tema="acik"] .tg-favori-buyuk { color: rgb(var(--color-text)) }
html[data-tema="acik"] .tg-arama > i, html[data-tema="acik"] .tg-arama input::placeholder { color: #6b7688 }
html[data-tema="acik"] [style*="color:#4ade80"] { color: #15803d !important }
html[data-tema="acik"] [style*="color:#f87171"], html[data-tema="acik"] [style*="color:#fca5a5"] { color: #b91c1c !important }
html[data-tema="acik"] [style*="color:#fbbf24"] { color: #b45309 !important }
html[data-tema="acik"] .bg-orange, html[data-tema="acik"] .bg-orange * { color: #fff }
html[data-tema="acik"] .hover\:bg-orange\/70:hover { background-color: color-mix(in srgb, var(--tg-vurgu-koyu) 80%, #fff) }

/* ==================================================================
   Neon efekti — Panel › Tema Ayarları › "Neon efekti"
   <html data-neon="1"> ile açılır, şiddeti --tg-neon çarpanıyla ayarlanır.
   Yalnızca koyu temada uygulanır: açık zeminde ışıma kirli görünür.
   Renk her yerde vurgu renginden (--color-logo) türetilir; panelden mavi
   dışında bir renk seçilirse efekt o renge uyar.
   ================================================================== */
html[data-neon="1"][data-tema="koyu"] {
  /* Işıma katmanları: yakın (keskin) + uzak (yumuşak hale) */
  --tg-isik-1: 0 0 calc(10px * var(--tg-neon, 1)) rgb(var(--color-logo) / calc(.6 * var(--tg-neon, 1)));
  --tg-isik-2: 0 0 calc(30px * var(--tg-neon, 1)) rgb(var(--color-logo) / calc(.38 * var(--tg-neon, 1)));
  --tg-yazi-isik: 0 0 calc(6px * var(--tg-neon, 1)) rgb(var(--color-logo) / calc(.5 * var(--tg-neon, 1))), 0 0 calc(18px * var(--tg-neon, 1)) rgb(var(--color-logo) / calc(.4 * var(--tg-neon, 1)));
}

/* --- Düğmeler --- */
html[data-neon="1"][data-tema="koyu"] .tg-btn:not(.tg-btn-alt):not(.tg-btn-yesil),
html[data-neon="1"][data-tema="koyu"] .tg-arama button,
html[data-neon="1"][data-tema="koyu"] .bg-orange {
  box-shadow: var(--tg-isik-1), var(--tg-isik-2);
  transition: box-shadow .25s ease, background-color .25s ease;
}
html[data-neon="1"][data-tema="koyu"] .tg-btn:not(.tg-btn-alt):not(.tg-btn-yesil):hover,
html[data-neon="1"][data-tema="koyu"] .tg-arama button:hover {
  box-shadow: 0 0 calc(14px * var(--tg-neon, 1)) rgb(var(--color-logo) / calc(.8 * var(--tg-neon, 1))),
              0 0 calc(42px * var(--tg-neon, 1)) rgb(var(--color-logo) / calc(.5 * var(--tg-neon, 1)));
}

/* --- Vurgu yazıları: fiyat, bağlantı, aktif sekme --- */
html[data-neon="1"][data-tema="koyu"] .text-orange,
html[data-neon="1"][data-tema="koyu"] a.text-orange,
html[data-neon="1"][data-tema="koyu"] .tg-metin a,
html[data-neon="1"][data-tema="koyu"] .tg-sekme.aktif { text-shadow: var(--tg-yazi-isik) }

/* --- Çizgiler ve küçük öğeler --- */
html[data-neon="1"][data-tema="koyu"] .tg-sekme.aktif { box-shadow: 0 2px calc(10px * var(--tg-neon, 1)) rgb(var(--color-logo) / calc(.45 * var(--tg-neon, 1))) }
html[data-neon="1"][data-tema="koyu"] .tg-bolum-baslik h2::before,
html[data-neon="1"][data-tema="koyu"] .tg-nokta,
html[data-neon="1"][data-tema="koyu"] .tg-sepet-rozet,
html[data-neon="1"][data-tema="koyu"] .tg-geri-sayim b,
html[data-neon="1"][data-tema="koyu"] .tg-avatar { box-shadow: var(--tg-isik-1), var(--tg-isik-2) }
html[data-neon="1"][data-tema="koyu"] .tg-anket-cubuk span { box-shadow: var(--tg-isik-1) }

/* --- Kartlar: üzerine gelince çerçeve ışıldar --- */
html[data-neon="1"][data-tema="koyu"] .product_card:hover > div,
html[data-neon="1"][data-tema="koyu"] .game_card:hover > a > div {
  box-shadow: 0 8px 24px rgb(0 0 0 / .35), var(--tg-isik-2);
}
html[data-neon="1"][data-tema="koyu"] .tg-hikaye:hover img { box-shadow: var(--tg-isik-1), var(--tg-isik-2) }

/* --- Form odağı --- */
html[data-neon="1"][data-tema="koyu"] .tg-input:focus,
html[data-neon="1"][data-tema="koyu"] .tg-arama input:focus {
  box-shadow: 0 0 0 3px rgb(var(--color-logo) / .2), var(--tg-isik-2);
}

/* --- Tema anahtarındaki kaydırıcı --- */
html[data-neon="1"][data-tema="koyu"] .tg-tema-anahtar::before {
  box-shadow: 0 2px 8px rgb(var(--color-logo) / .45), var(--tg-isik-2);
}

/* Hareketi azalt diyen cihazlarda geçişler kapanır (ışıma durur, yanıp sönme olmaz) */
@media (prefers-reduced-motion: reduce) {
  html[data-neon="1"][data-tema="koyu"] .tg-btn,
  html[data-neon="1"][data-tema="koyu"] .tg-arama button { transition: none }
}

/* --- Neon: menü, şerit ve liste öğeleri --- */
html[data-neon="1"][data-tema="koyu"] .tg-menu-tum { box-shadow: inset 0 0 0 1px rgb(var(--color-logo) / .35), var(--tg-isik-2) }
html[data-neon="1"][data-tema="koyu"] .tg-menu-tum i,
html[data-neon="1"][data-tema="koyu"] .tg-hesap-link i { text-shadow: var(--tg-yazi-isik) }
html[data-neon="1"][data-tema="koyu"] .tg-hikaye img { box-shadow: var(--tg-isik-2) }
html[data-neon="1"][data-tema="koyu"] .tg-bolum-link:hover,
html[data-neon="1"][data-tema="koyu"] .tg-adet button:hover { box-shadow: var(--tg-isik-1), var(--tg-isik-2) }
/* Vurgu rengindeki çerçeveler (aktif kategori, seçili kart) da ışıldar */
html[data-neon="1"][data-tema="koyu"] .tg-sekme.aktif,
html[data-neon="1"][data-tema="koyu"] .tg-input:focus,
html[data-neon="1"][data-tema="koyu"] .tg-adet:focus-within { border-color: rgb(var(--color-logo)) }

/* ==================================================================
   Mobil menü çekmecesi (sağdan açılır) — includes/tema.php #tg-mobil-menu
   ================================================================== */
.tg-cekmece { position: fixed; inset: 0; z-index: 60 }
.tg-cekmece[hidden] { display: none }
.tg-cekmece-perde {
  position: absolute; inset: 0; background: rgb(0 0 0 / .55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s ease;
}
.tg-cekmece-panel {
  position: absolute; top: 0; right: 0; display: flex; flex-direction: column;
  width: min(86vw, 360px); height: 100%; background: rgb(var(--color-primary));
  box-shadow: -18px 0 40px rgb(0 0 0 / .35);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.tg-cekmece.acik .tg-cekmece-perde { opacity: 1 }
.tg-cekmece.acik .tg-cekmece-panel { transform: none }

.tg-cekmece-ust {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; border-bottom: 1px solid rgb(var(--color-secondary));
  padding-top: calc(.85rem + env(safe-area-inset-top));
}
.tg-cekmece-logo { display: block; max-width: 150px }
.tg-cekmece-logo img { max-height: 34px; width: auto; object-fit: contain }
.tg-cekmece-kapat {
  flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgb(var(--color-secondary)); color: rgb(var(--color-text)); font-size: 17px;
}
.tg-cekmece-kapat:active { transform: scale(.94) }

/* Kaydırılan orta bölüm */
.tg-cekmece-govde { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: .9rem 1rem 1.2rem }

.tg-cekmece-kart { background: rgb(var(--color-secondary)); border-radius: 14px; padding: .75rem; margin-bottom: .9rem }
.tg-cekmece-uye { display: flex; align-items: center; gap: .7rem; color: inherit }
.tg-cekmece-uye .tg-avatar, .tg-cekmece-uye .tg-avatar-resim { flex: 0 0 auto }
.tg-cekmece-uye > span:not(.tg-avatar) { min-width: 0; flex: 1 }
.tg-cekmece-uye b { display: block; font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tg-cekmece-uye small { display: block; font-size: .72rem; color: rgb(var(--color-text) / .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tg-cekmece-uye > i { color: rgb(var(--color-text) / .45) }
.tg-cekmece-bakiye {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgb(var(--color-text) / .08);
}
.tg-cekmece-bakiye span { font-size: .72rem; color: rgb(var(--color-text) / .6) }
.tg-cekmece-bakiye b { display: block; font-size: 1.05rem; color: rgb(var(--color-logo)) }

.tg-cekmece-giris { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .9rem }
.tg-cekmece-giris .tg-btn { justify-content: center; padding: .7rem .5rem; font-size: .85rem }

.tg-cekmece-arama { margin-bottom: .4rem }
.tg-cekmece-arama input { width: 100%; padding-left: 2.4rem; font-size: 16px }
.tg-cekmece-arama input::placeholder { font-size: .85rem }

.tg-cekmece-baslik {
  margin: 1rem 0 .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgb(var(--color-text) / .45);
}
.tg-cekmece-liste a {
  display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: .55rem .6rem;
  border-radius: 11px; font-size: .92rem; color: rgb(var(--color-text)); transition: background .15s;
}
.tg-cekmece-liste a:active { background: rgb(var(--color-secondary)) }
.tg-cekmece-liste a > i:first-child { width: 20px; text-align: center; color: rgb(var(--color-logo)); font-size: 15px }
.tg-cekmece-liste a.aktif { background: rgb(var(--color-logo) / .12); color: rgb(var(--color-logo)); font-weight: 600 }
.tg-cekmece-liste a.aktif > i:first-child { color: inherit }
.tg-cekmece-liste .tg-rozet { margin-left: auto }
.tg-cekmece-cikis { margin-top: .4rem; color: #f87171 !important }
.tg-cekmece-cikis > i:first-child { color: inherit !important }

/* Alt şerit: görünüm, bölge, para birimi */
.tg-cekmece-alt {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(var(--color-secondary)); background: rgb(var(--color-primary));
}
.tg-cekmece-tercih {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border: 0;
  border-radius: 999px; background: rgb(var(--color-secondary)); color: rgb(var(--color-text));
  font-size: .8rem; cursor: pointer;
}
.tg-cekmece-tercih i { color: rgb(var(--color-logo)) }

/* Çekmece açıkken arka plan kaymasın */
html.tg-cekmece-acik body { overflow: hidden }

@media (prefers-reduced-motion: reduce) {
  .tg-cekmece-panel, .tg-cekmece-perde { transition: none }
}

/* ---- Mobil alt menü (hızlı erişim şeridi) ---- */
.tg-alt-menu {
  position: fixed; left: 0; bottom: 0; z-index: 40; display: flex; width: 100%;
  background: rgb(var(--color-primary)); border-top: 1px solid rgb(var(--color-secondary));
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgb(0 0 0 / .18);
}
.tg-alt-menu a {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: .35rem .2rem; font-size: 14px; line-height: 1.1; text-align: center;
  color: rgb(var(--color-text) / .7); transition: color .15s;
}
.tg-alt-menu a.aktif { color: rgb(var(--color-logo)); font-weight: 600 }
.tg-alt-ikon { position: relative; display: block; font-size: 18px; line-height: 1 }
.tg-alt-rozet {
  position: absolute; top: -6px; left: 12px; min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgb(var(--color-logo)); color: #fff; font-size: 9px; font-weight: 700;
}
body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)) }
@media (min-width: 1024px) { body { padding-bottom: 0 } }

/* ==================================================================
   Telefon düzeni — dar ekranda bileşenler sıkıştırılır, kaydırılan
   şeritlere tutunma (snap) eklenir, dokunma hedefleri büyütülür.
   ================================================================== */
@media (max-width: 767px) {

  /* ---- Duyuru şeridi: tek satır, yana kaydırılır ---- */
  .tg-duyuru-serit > .container {
    display: flex; flex-wrap: nowrap; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-top: .45rem; padding-bottom: .45rem; scrollbar-width: none;
  }
  .tg-duyuru-serit > .container::-webkit-scrollbar { display: none }
  .tg-duyuru { flex: 0 0 auto; max-width: 92vw; white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; scroll-snap-align: start; font-size: .78rem }

  /* ---- Hikâyeler: daha küçük daireler, ekranda 4,5 tanesi görünür ---- */
  .tg-hikayeler { gap: .6rem }
  .tg-hikaye { width: 74px; font-size: .66rem }
  .tg-hikaye img { width: 68px; height: 68px; border-width: 2px }

  /* ---- Oyun şeridi: kartlar ekrana göre, tutunarak kayar ---- */
  .tg-oyun-serit { scroll-snap-type: x mandatory; scroll-padding-left: 1rem }
  .tg-oyun-serit .tg-serit-oge { min-width: 63vw; scroll-snap-align: start }

  /* ---- Instagram şeridi ---- */
  .tg-instagram { padding: .7rem .8rem; gap: .7rem }
  .tg-instagram > i { font-size: 1.7rem }
  .tg-instagram b { font-size: .88rem; line-height: 1.25 }
  .tg-instagram span span, .tg-instagram > span > .text-sm { font-size: .72rem }
  .tg-instagram > span:last-child { padding: .45rem .8rem; font-size: .8rem; white-space: nowrap; border-radius: .5rem }

  /* ---- Ürün kartı ---- */
  .product_card .badge { font-size: .65rem; padding: .15rem .5rem }
  .product_card .lbl_product_title {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    min-height: 2.4em; font-size: .8rem; line-height: 1.2;
  }
  .product_card .tg-fiyat { font-size: .92rem }
  .product_card form button, .product_card a[href*="urun-detay"] strong { font-size: .82rem }
  .product_card .px-2 > .flex.items-center.justify-center { min-height: 34px }
  .product_card form button, .product_card .px-2.pb-2 > a { min-height: 38px }

  /* ---- Bölüm başlıkları ---- */
  .tg-bolum-baslik h2 { font-size: 1.05rem }
  .tg-bolum-link { font-size: .78rem; padding: .3rem .7rem }

  /* ---- Yüzen düğmeler: telefonda küçültülür. "Başa dön" gizlenir; alt
     menü zaten parmağın altında ve iki yuvarlak düğme içeriği kapatıyordu. ---- */
  .tg-sohbet { left: .6rem; bottom: calc(4.1rem + env(safe-area-inset-bottom)) }
  .tg-sohbet-dugme { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; opacity: .92 }
  .tg-sohbet-kutu { width: min(84vw, 300px) }
  .tg-yukari { display: none }

  /* ---- Çerez şeridi: tek satırda, kısa ---- */
  .tg-cerez { bottom: calc(3.5rem + env(safe-area-inset-bottom)); padding: .7rem 0 }
  .tg-cerez .container { flex-direction: row; align-items: center; gap: .7rem }
  .tg-cerez .text-sm { font-size: .74rem; line-height: 1.35 }
  .tg-cerez .text-sm b { margin-bottom: .1rem }
  .tg-cerez .tg-btn { padding: .5rem .9rem; font-size: .8rem }
}

@media (max-width: 380px) {
  .tg-hikaye { width: 66px } .tg-hikaye img { width: 60px; height: 60px }
  .tg-oyun-serit .tg-serit-oge { min-width: 72vw }
}

@media (max-width: 767px) {
  /* ---- Kırıntı yolu: tek satır, yana kaydırılır ---- */
  .breadcrumbs { padding-top: .5rem; padding-bottom: .5rem }
  .breadcrumbs > .container {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: .78rem; gap: .35rem;
  }
  .breadcrumbs > .container::-webkit-scrollbar { display: none }
  .breadcrumbs > .container > a, .breadcrumbs > .container > span { white-space: nowrap }
  /* Son öğe uzunsa kısaltılır, tamamı kaydırılarak okunur */
  .breadcrumbs > .container > span:last-child { max-width: 60vw; overflow: hidden; text-overflow: ellipsis }
}

/* ---- Ürün sayfası: telefonda sepete ekleme şeridi ---- */
.tg-satin-serit {
  position: fixed; left: 0; right: 0; bottom: calc(3.5rem + env(safe-area-inset-bottom)); z-index: 46;
  display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem;
  background: rgb(var(--color-primary) / .97); border-top: 1px solid rgb(var(--color-secondary));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 -8px 24px rgb(0 0 0 / .3);
}
.tg-satin-serit[hidden] { display: none }
.tg-satin-fiyat { display: flex; flex-direction: column; line-height: 1.1 }
.tg-satin-fiyat small { font-size: .65rem; color: rgb(var(--color-text) / .6) }
.tg-satin-fiyat b { font-size: 1.05rem; color: rgb(var(--color-logo)) }
.tg-satin-serit .tg-btn { flex: 1; justify-content: center; min-height: 44px }
@media (min-width: 768px) { .tg-satin-serit { display: none !important } }

@media (max-width: 767px) {
  /* Ürün görseli ekranı tek başına doldurmasın; fiyat ve düğme yukarı gelsin */
  .tg-urun-gorsel { max-height: 42vh; width: auto; margin: 0 auto }
  /* Şerit görünürken son bölümün altında boşluk kalsın */
  .tg-satin-serit:not([hidden]) ~ * { margin-bottom: 0 }
}

@media (max-width: 767px) {
  /* Sayı kutuları telefonda ikişerli — tek tek alt alta dizilince sayfa uzuyordu.
     :has desteklemeyen tarayıcıda eski tek sütunlu düzen sürer. */
  .tg-izgara-esit.tg-dort:has(> .tg-istatistik),
  .tg-izgara-esit.tg-uc:has(> .tg-istatistik) { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem }
  .tg-istatistik { padding: .7rem .75rem }
  .tg-istatistik span { font-size: .7rem }
  .tg-istatistik b { font-size: 1.05rem }
  .tg-istatistik a { font-size: .68rem }
}

@media (max-width: 767px) {
  /* ---- Dokunma hedefleri ---- */
  /* iOS, 16px'ten küçük yazılı bir alana odaklanınca sayfayı yakınlaştırır */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0 }
  .tg-favori { width: 36px; height: 36px }
  .tg-btn-kucuk { min-height: 36px }
  .tg-bolum-link { min-height: 34px }
  .tg-tema-anahtar { height: 34px }
  .tg-tema-anahtar::before, .tg-tema-anahtar button { height: 30px }
  /* Alt bilgideki bağlantı listeleri parmakla ayırt edilebilsin */
  .tg-alt-bilgi a { min-height: 36px; display: flex; align-items: center }
  .tg-alt-bilgi .flex a, .tg-alt-bilgi a.inline-block, .tg-alt-bilgi img { min-height: 0; display: inline-flex }
}

@media (max-width: 767px) {
  /* ---- Arama sayfası ---- */
  .tg-ara-formu { flex-wrap: nowrap }
  .tg-ara-formu .tg-input { min-width: 0 !important }
  .tg-ara-formu .tg-btn { flex-shrink: 0; padding-left: .9rem; padding-right: .9rem }
  /* Kategori ve süzgeç çipleri: alt alta yığılmak yerine tek satırda kayar */
  .tg-cip-satiri {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 -1rem .75rem; padding: .15rem 1rem; scrollbar-width: none;
  }
  .tg-cip-satiri::-webkit-scrollbar { display: none }
  .tg-cip-satiri > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap }
}

/* Form alanına odaklanıldığında yüzen sohbet düğmesi kenara çekilir */
.tg-sohbet { transition: opacity .2s, transform .2s }
.tg-sohbet.tg-gizli { opacity: 0; transform: translateY(120%); pointer-events: none }

/* ==================================================================
   Tailwind'in duyarlı yardımcıları (lg:hidden) tema CSS'inde tanımlı ama
   bu dosya ondan SONRA yükleniyor; buradaki "display" kuralları aynı
   özgüllükte olduğu için onları eziyordu. Sonuç: masaüstünde mobil
   büyüteç düğmesi, hamburger ve alt menü görünüyordu — üstelik büyütecin
   açtığı arama kutusu lg:hidden ile gizli olduğu için düğme hiçbir şey
   yapmıyordu. Masaüstünde bu öğeler kesin olarak gizlenir.
   ================================================================== */
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important }
}

/* ---- Arama önerileri (autocomplete) — scripts/tg-site.js ---- */
.tg-oneri {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  max-height: min(62vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  background: rgb(var(--color-primary)); border: 1px solid rgb(var(--color-text) / .10);
  border-radius: 12px; box-shadow: 0 18px 44px rgb(0 0 0 / .38); padding: .35rem;
}
.tg-oneri[hidden] { display: none }
.tg-oneri-baslik {
  margin: .45rem .6rem .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgb(var(--color-text) / .45);
}
.tg-oneri-satir {
  display: flex; align-items: center; gap: .65rem; padding: .45rem .6rem; border-radius: 9px;
  color: rgb(var(--color-text)); font-size: .88rem; text-decoration: none;
}
.tg-oneri-satir:hover, .tg-oneri-satir.aktif { background: rgb(var(--color-secondary)) }
.tg-oneri-satir img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgb(var(--color-secondary)) }
.tg-oneri-satir > i { width: 34px; text-align: center; color: rgb(var(--color-logo)); flex-shrink: 0 }
.tg-oneri-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tg-oneri-ad small { display: block; font-size: .7rem; color: rgb(var(--color-text) / .55);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tg-oneri-fiyat { flex-shrink: 0; text-align: right; font-weight: 700; font-size: .85rem; color: rgb(var(--color-logo)) }
.tg-oneri-fiyat small { display: block; font-weight: 500; font-size: .66rem; color: #f87171 }
.tg-oneri-bos { padding: .9rem .6rem; text-align: center; font-size: .85rem; color: rgb(var(--color-text) / .55) }

@media (max-width: 767px) {
  .tg-oneri { max-height: 56vh }
  .tg-oneri-satir { padding: .55rem .6rem; min-height: 46px }
}

/* Dar arama kutusunda (kategori sayfası) öneri listesi kutudan geniş olur */
.tg-oneri-sag { left: auto; right: 0; width: min(340px, 92vw) }
/* Telefonda sağa yaslanırsa ekranın solundan taşıyor: soldan hizalanır ve
   genişlik ekranla sınırlanır. */
@media (max-width: 767px) {
  .tg-oneri-sag { left: 0; right: auto; width: min(340px, calc(100vw - 2.5rem)) }
}

/* Slider ve yanındaki bannerlar aynı satırda (includes/on-yuz.php: slider_ciz).
   Sütunlar hangi yanın dolu olduğuna göre satır içi değişkenle gelir. */
.tg-slider-satir { display: grid; gap: .75rem; grid-template-columns: 1fr; align-items: start }
.tg-slider-satir > * { min-width: 0 }
/* Swiper'ın kendi "margin-left/right:auto" değeri ızgara hücresinde esnemeyi
   engelliyor ve slider içeriği kadar daralıyor; sütunu doldurması sağlanır. */
.tg-slider-satir > .swiper { width: 100%; margin-left: 0; margin-right: 0 }
.tg-slider-yan .tg-bannerlar { grid-template-columns: 1fr }
.tg-slider-yan .tg-bannerlar img { height: auto }

@media (min-width: 1024px) {
  .tg-slider-satir { grid-template-columns: var(--tg-slider-kolonlar, 1fr) }
}
/* Telefon ve tablette yan bannerlar slider'ın altına iner; ikisi varsa yan yana */
@media (max-width: 1023px) {
  .tg-slider-yan .tg-bannerlar { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
}

/* ------------------------------------------------------------------ *
 * Çekiliş kartı (includes/ozellikler.php: cekilis_karti)
 *
 * Yapı: afiş (görsel + rozet + düzenleyen + başlık) → geri sayım / durum →
 * ödüller → sayaçlar → doluluk çubuğu → çağrı düğmesi.
 *
 * Renkler tema değişkenlerinden gelir (--color-primary/secondary/logo), bu
 * yüzden koyu ve açık temada aynı kart çalışır. Hareketler yalnızca fareyle
 * üzerine gelince ve kısa; "hareketi azalt" diyen ziyaretçide kapanır.
 * ------------------------------------------------------------------ */
/* ---- Liste sayfasının giriş bölümü ---- */
.tg-cekilis-giris {
  position: relative; overflow: hidden;
  margin-bottom: 1.25rem; padding: 1.6rem 1.4rem;
  border-radius: 18px; border: 1px solid rgb(var(--color-text) / .10);
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(var(--color-logo) / .28), transparent 55%),
    radial-gradient(110% 150% at 100% 10%, rgba(239,68,68,.18), transparent 50%),
    rgb(var(--color-primary));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.tg-cekilis-giris-metin { min-width: 0 }
.tg-cekilis-giris-etiket {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: rgb(var(--color-logo) / .16); color: rgb(var(--color-logo));
  border: 1px solid rgb(var(--color-logo) / .32);
}
.tg-cekilis-giris h1 { margin: .55rem 0 .3rem; font-size: 1.9rem; font-weight: 800; line-height: 1.15 }
.tg-cekilis-giris p { margin: 0; font-size: .92rem; opacity: .75; max-width: 46ch }
.tg-cekilis-giris-sayaclar { display: flex; gap: .5rem; flex-wrap: wrap }
.tg-cekilis-giris-sayaclar > div {
  min-width: 108px; padding: .7rem .9rem; border-radius: 12px; text-align: center;
  background: rgb(var(--color-secondary) / .75); border: 1px solid rgb(var(--color-text) / .10);
}
.tg-cekilis-giris-sayaclar b { display: block; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere }
.tg-cekilis-giris-sayaclar span { display: block; font-size: .7rem; opacity: .7; margin-top: .1rem }
@media (max-width: 520px) { .tg-cekilis-giris h1 { font-size: 1.5rem } }

.tg-cekilis-izgara { display: grid; gap: 1.25rem; grid-template-columns: 1fr }
@media (min-width: 768px)  { .tg-cekilis-izgara { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 1280px) { .tg-cekilis-izgara { grid-template-columns: repeat(3, minmax(0,1fr)) } }

.tg-cekilis-kart {
  position: relative;
  background: rgb(var(--color-primary));
  border: 1px solid rgb(var(--color-text) / .10);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tg-cekilis-kart:hover {
  transform: translateY(-5px);
  border-color: rgb(var(--color-logo) / .55);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.75), 0 0 0 1px rgb(var(--color-logo) / .12);
}
/* Süresi dolmuş / sonuçlanmış kart öne çıkmasın */
.tg-cekilis-kart-kapali .tg-cekilis-afis > img { filter: grayscale(.65) brightness(.8) }

/* ---- Afiş ---- */
.tg-cekilis-afis {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgb(var(--color-logo) / .35), rgb(var(--color-secondary) / 1));
  overflow: hidden; color: inherit;
}
.tg-cekilis-afis > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease;
}
.tg-cekilis-kart:hover .tg-cekilis-afis > img { transform: scale(1.06) }
.tg-cekilis-afis-bos {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem; color: rgba(255,255,255,.35);
}
/* Yazıların okunması için alttan yukarı koyulaşan perde */
.tg-cekilis-perde {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,10,14,.92) 0%, rgba(8,10,14,.6) 38%, rgba(8,10,14,.05) 72%);
}

/* Canlı / kapandı rozeti */
.tg-cekilis-rozet {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.tg-cekilis-rozet-canli  { background: rgba(34,197,94,.22); color: #4ade80; border: 1px solid rgba(74,222,128,.45) }
.tg-cekilis-rozet-kapali { background: rgba(0,0,0,.45); color: #cbd5e1; border: 1px solid rgba(255,255,255,.2) }
.tg-cekilis-nokta {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: tg-cekilis-canli 1.8s infinite;
}
@keyframes tg-cekilis-canli {
  70%  { box-shadow: 0 0 0 7px rgba(74,222,128,0) }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0) }
}

/* Düzenleyen ve başlık afişin üstünde */
.tg-cekilis-duzenleyen {
  position: absolute; left: .85rem; top: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem; max-width: calc(100% - 7rem);
  padding: .25rem .6rem .25rem .25rem; border-radius: 999px;
  background: rgba(8,10,14,.55); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.14);
  font-size: .78rem; color: #fff;
}
.tg-cekilis-duzenleyen b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tg-cekilis-avatar {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  object-fit: cover; background: #0f1319;
}
.tg-cekilis-avatar-bos { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff }
.tg-cekilis-baslik {
  position: absolute; left: .95rem; right: .95rem; bottom: .75rem; z-index: 2;
  font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Gövde ---- */
.tg-cekilis-govde {
  padding: .9rem 1rem 1rem; display: grid; gap: .8rem;
  flex: 1; align-content: start;   /* kartlar farklı uzunlukta olsa da düğme altta hizalanır */
}

/* Geri sayım: bitişe kalan süre — dikkat çekmesi için kırmızı */
.tg-cekilis-geri {
  padding: .6rem .7rem; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08));
  border: 1px solid rgba(239,68,68,.38); color: #ef4444;
}
.tg-cekilis-geri-etiket { display: block; font-size: .7rem; opacity: .9; text-transform: uppercase; letter-spacing: .04em }
.tg-cekilis-geri-sure {
  display: block; margin-top: .1rem; font-size: 1.35rem; line-height: 1.25; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
/* Son bir saat: yanıp sönerek uyarır */
.tg-cekilis-geri-acil { animation: tg-cekilis-nabiz 1.4s ease-in-out infinite }
@keyframes tg-cekilis-nabiz { 50% { opacity: .55 } }

/* Çekiliş ayrıntı sayfasının yan sütununda kutu kenara dayanır */
.tg-cekilis-geri-yan { margin: 0 0 .75rem }

/* Durum şeridi (geri sayım yoksa) */
.tg-cekilis-durum {
  padding: .6rem; border-radius: 12px; text-align: center; font-weight: 600; font-size: .9rem;
  background: rgb(var(--color-secondary));
}
.tg-cekilis-durum-acik { color: #4ade80 }

/* ---- Ödüller ---- */
/* Sabit dört sütun: tek ödülde de görsel küçük kalır, kart oranı bozulmaz */
.tg-cekilis-oduller { display: grid; gap: .55rem; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.tg-cekilis-odul { display: grid; gap: .35rem; justify-items: center; text-align: center; min-width: 0 }
.tg-cekilis-odul-gorsel {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px;
  background: rgb(var(--color-secondary)); border: 1px solid rgb(var(--color-text) / .10);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tg-cekilis-odul-gorsel img { width: 100%; height: 100%; object-fit: cover }
.tg-cekilis-odul-gorsel i { font-size: 1.6rem; opacity: .45 }
.tg-cekilis-odul-gorsel b { font-size: 1.1rem; color: rgb(var(--color-logo)) }
.tg-cekilis-odul-adet {
  position: absolute; left: .3rem; bottom: .3rem;
  padding: .1rem .4rem; border-radius: 999px;
  background: rgba(8,10,14,.72); color: #fff; font-size: .62rem; font-weight: 600;
}
.tg-cekilis-odul-ad {
  font-size: .76rem; line-height: 1.3; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tg-cekilis-odul-fazla .tg-cekilis-odul-gorsel { border-style: dashed }

/* ---- Sayaçlar ---- */
.tg-cekilis-sayaclar { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .4rem }
.tg-cekilis-sayac {
  background: rgb(var(--color-secondary)); border: 1px solid rgb(var(--color-text) / .08);
  border-radius: 10px; padding: .55rem .35rem; text-align: center; min-width: 0;
}
.tg-cekilis-sayac b { display: block; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere }
.tg-cekilis-sayac span { display: block; font-size: .67rem; opacity: .65; margin-top: .15rem; white-space: nowrap }
.tg-cekilis-sayac span i { margin-right: .15rem }
.tg-cekilis-sayac-havuz b { color: rgb(var(--color-logo)) }

/* ---- Doluluk çubuğu ---- */
.tg-cekilis-doluluk { display: grid; gap: .3rem }
.tg-cekilis-doluluk-cubuk {
  height: 7px; border-radius: 999px; background: rgb(var(--color-text) / .12); overflow: hidden;
}
.tg-cekilis-doluluk-cubuk span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--color-logo)), #f59e0b);
  transition: width .6s ease;
}
.tg-cekilis-doluluk small { font-size: .7rem; opacity: .7 }

/* ---- Çağrı düğmesi: kartın enini kaplar ---- */
.tg-cekilis-dugme {
  margin: 0 1rem 1rem; padding: .8rem 1rem; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  background: rgb(var(--color-logo)); color: #fff; font-weight: 700;
  transition: filter .2s ease, gap .2s ease;
}
.tg-cekilis-dugme:hover { filter: brightness(1.08); gap: .75rem; color: #fff }
.tg-cekilis-kart-kapali .tg-cekilis-dugme { background: rgb(var(--color-secondary)); color: rgb(var(--color-text)) }

/* ---- Çekiliş ayrıntı sayfası ---- */
.tg-cekilis-detay { padding: 0; overflow: hidden }
.tg-cekilis-detay-afis { aspect-ratio: 21 / 9; border-radius: 0 }
.tg-cekilis-detay-afis .tg-cekilis-baslik { font-size: 1.6rem; -webkit-line-clamp: 3 }
@media (max-width: 640px) {
  .tg-cekilis-detay-afis { aspect-ratio: 16 / 9 }
  .tg-cekilis-detay-afis .tg-cekilis-baslik { font-size: 1.2rem }
}
.tg-cekilis-detay-govde { padding: 1.1rem 1.25rem 1.35rem; display: grid; gap: .5rem }
.tg-cekilis-detay-baslik {
  margin: .9rem 0 .2rem; font-size: 1.05rem; font-weight: 700;
  display: flex; align-items: center; gap: .45rem;
}
.tg-cekilis-detay-baslik i { color: rgb(var(--color-logo)) }
/* Ödül kutuları listede küçük, ayrıntıda biraz daha geniş */
.tg-cekilis-detay-oduller { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) }

.tg-cekilis-kazananlar { display: grid; gap: .5rem }
.tg-cekilis-kazanan {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: 12px;
  background: rgb(var(--color-secondary)); border: 1px solid rgb(var(--color-text) / .08);
}
.tg-cekilis-kazanan b { min-width: 0; overflow-wrap: anywhere }
.tg-cekilis-kazanan-ikon {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--color-logo) / .16); color: rgb(var(--color-logo)); font-size: .85rem;
}
.tg-cekilis-kazanan-odul { margin-left: auto; font-size: .82rem; opacity: .75; text-align: right }

@media (prefers-reduced-motion: reduce) {
  .tg-cekilis-kart, .tg-cekilis-afis > img, .tg-cekilis-dugme,
  .tg-cekilis-doluluk-cubuk span { transition: none }
  .tg-cekilis-kart:hover { transform: none }
  .tg-cekilis-kart:hover .tg-cekilis-afis > img { transform: none }
  .tg-cekilis-geri-acil, .tg-cekilis-nokta { animation: none }
}