/* =====================================================================
   Otobonus — bonus kartı tasarımı
   ---------------------------------------------------------------------
   Seçilen varyant: "İkon kutulu buton" (önizlemede 4 numara).

   Çözdüğü sorun: eski kartta görsel ile buton arasında geniş bir ölü
   boşluk vardı; altın başlık orada tek başına duruyor, kart gereksiz
   uzuyor ve ekranda az bonus görünüyordu.

   Yeni düzen:
       ┌───────────────────────────┐
       │        görsel (1.9:1)     │
       ├──────────────────┬────────┤
       │ Bonus adı        │ [ikon] │   ← tek satır, ölü boşluk yok
       └──────────────────┴────────┘

   Buton, onaylanan nav sekmeleriyle aynı dilde: ikon ayrı bir kutuda,
   yanında yazı.

   SADECE CSS — hiçbir HTML/PHP/JS değişmez.
   Renkler general_settings'ten türer (--btn-take-bonus-bg,
   --btn-take-bonus-rgb, --bonus-name-color), panelden değiştirilebilir.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Izgara — sabit 300px flex yerine esnek grid
   ------------------------------------------------------------------ */
.otobonus-app .bonus-container {
    display: grid !important;
    /* Kart genişliği 300–330px arasına sabitlenir.
       "1fr" kullanılsaydı kartlar kalan boşluğu doldurmak için esner ve
       ara genişliklerde 389px'e kadar şişerdi; üst sınır bunu engelliyor.
       auto-fit + justify-content:center → sütunlar ortalanır. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 330px));
    justify-content: center;
    gap: 16px;
    align-items: stretch;
    padding: 4px 0;

    /* ÖNEMLİ: style.css'te ".container { display:flex; flex-direction:column;
       align-items:center }" tanımlı. align-items:center, bu ızgarayı bir flex
       öğesi olarak içeriğine göre büzüyor; ızgara tam genişliği alamadığı için
       kartlar yan yana dizilemiyordu. Aşağısı ızgarayı tam genişliğe zorlar. */
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;

    /* Satır başına en fazla 4 kart + yatayda ortalama.
       4×330 + 3×16 = 1368px */
    max-width: 1368px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Temadaki sabit genişlik/margin'i sıfırla */
.otobonus-app .bonus-container > .bonus-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* ---------------------------------------------------------------------
   2) Kart kabuğu
   ------------------------------------------------------------------ */
.otobonus-app .bonus-card {
    overflow: hidden;
    border-radius: 12px !important;
    /* Kart arka planı = renk ayarları sayfasındaki "Kart Arka Plan" ve
       "Kart Hover Arka Plan". İki tonu gradient'in iki durağı yapıyoruz;
       böylece panelden değiştirince site birebir yansır. */
    background: linear-gradient(160deg,
                var(--bonus-card-bg, #5E0D10) 0%,
                var(--bonus-card-hover-bg, #3D090B) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), border-color .2s ease;
}
.otobonus-app .bonus-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .5) !important;
}

/* Kart içeriği: görsel üstte, altında "ad + buton" satırı */
.otobonus-app .bonus-card > a {
    display: grid !important;
    grid-template-areas:
        "img img"
        "ad  btn";
    grid-template-columns: 1fr auto;
    /* Görsel tepede sabit; alt satır (ad + buton) kalan tüm boşluğu kaplar
       ve içindeki ad + buton dikeyde ORTALANIR. Kart eşit yüksekliğe
       gerildiğinde ad/buton alttaki alanın ortasında durur. */
    grid-template-rows: auto 1fr;
    align-items: center;
    height: 100%;
    padding: 0 !important;
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   3) Görsel
   ------------------------------------------------------------------ */
.otobonus-app .bonus-image {
    grid-area: img;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.9 / 1;      /* banner'ların doğal oranına yakın */
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   4) Bonus adı
   ------------------------------------------------------------------ */
.otobonus-app .bonus-name {
    grid-area: ad;
    margin: 0 !important;
    padding: 11px 0 11px 13px !important;
    text-align: left !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--bonus-name-color, #E2A731) !important;
    /* En fazla 2 satır — kart yükseklikleri hizalı kalsın */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Dikeyde butonla aynı hizada dursun.
       Tema ".bonus-name"e "min-height: 62px" veriyor; benim display:-webkit-box
       kuralım temanın dikey ortalamasını iptal edince yazı o 62px'lik kutunun
       TEPESİNDE kalıyor, buton (38px) ise ortalı oluyordu. min-height'i
       sıfırlayınca kutu yazı kadar oluyor ve align-self:center işe yarıyor. */
    min-height: 0 !important;
    align-self: center;
}

/* ---------------------------------------------------------------------
   5) "TALEP ET" — ikon kutulu buton
   ------------------------------------------------------------------ */
.otobonus-app .btn-take-bonus {
    grid-area: btn;
    margin: 0 11px 0 9px !important;
    padding: 6px 11px 6px 6px !important;
    width: auto !important;
    border-radius: 10px !important;
    font-size: .64rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    background: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .16) !important;
    border: 1px solid rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .4) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease;
}
/* Temadaki kayan parlama efekti bu düzende gereksiz */
.otobonus-app .btn-take-bonus::before {
    display: none !important;
}
.otobonus-app .btn-take-bonus > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: .72rem;
    background: var(--btn-take-bonus-bg, #D50D0D);
    color: #fff;
}
.otobonus-app .bonus-card:hover .btn-take-bonus {
    background: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .3) !important;
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .6) !important;
}

/* ---------------------------------------------------------------------
   6) Mobil
   ------------------------------------------------------------------ */
/* Tablet: 300px alt sınırıyla bu aralıkta yalnızca 2 çok geniş sütun
   oluşuyordu; alt sınırı düşürüp 3 sütuna çıkarıyoruz. */
@media (max-width: 900px) {
    .otobonus-app .bonus-container {
        grid-template-columns: repeat(auto-fit, minmax(230px, 290px));
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .otobonus-app .bonus-container {
        grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
        gap: 10px;
    }
    /* Dar kartta ad ve buton yan yana sığmıyordu (ad taşıyordu).
       Alt alta diziyoruz: ad tam genişlik, buton altında. */
    .otobonus-app .bonus-card > a {
        /* Mobilde flex kolon: görsel üstte, ad + buton grubu dikeyde
           ORTALANIR. Ad'a "margin-top:auto", butona "margin-bottom:auto"
           verilince artan boşluk grubun üstüne ve altına eşit dağılır. */
        display: flex !important;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-areas: none;
        grid-template-rows: none;
        /* Görsel tepede/kenarda flush kalsın (0), ama kartın ALTINDA her zaman
           boşluk olsun — böylece en uzun kartta bile buton kenara yapışmaz. */
        padding: 0 0 12px !important;
    }
    .otobonus-app .bonus-image {
        flex: 0 0 auto;
    }
    .otobonus-app .bonus-name {
        font-size: .72rem !important;
        padding: 9px 10px 6px !important;
        text-align: center !important;
        /* Ad alanı HER kartta 2 satır yüksekliğinde sabit; tek satırlık adlar
           bu alanda dikeyde ortalanır. Böylece kartlar arasında ad ve buton
           hep aynı hizada olur (içeriğe göre kayma olmaz). */
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: calc(2.6em + 15px);
        max-height: calc(2.6em + 15px);
        overflow: hidden;
        margin-top: auto !important;
        margin-bottom: 0 !important;
    }
    .otobonus-app .btn-take-bonus {
        align-self: stretch;           /* tam genişlik */
        justify-content: center;
        font-size: .6rem !important;
        /* bottom:auto → alttaki boşluğu yut (üstteki margin-top:auto ile eşit) */
        margin: 0 10px auto 10px !important;
        padding: 6px 8px !important;
        gap: 6px;
    }
    .otobonus-app .btn-take-bonus > i {
        width: 20px; height: 20px; font-size: .64rem; border-radius: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .otobonus-app .bonus-card { transition: none !important; }
    .otobonus-app .bonus-card:hover { transform: none; }
}

/* =====================================================================
   ALT BİLGİ (footer)
   ---------------------------------------------------------------------
   index.php sonuna eklenen sabit alt bilgi. Logo ve marka adı oradan
   (koddan) gelir, panelden değiştirilemez. Telegram butonu yalnızca
   $footer_telegram doldurulduğunda basılır.
   ===================================================================== */
.otobonus-app .otb-footer {
    /* style.css'te "footer { position:fixed; bottom:0 }" tanımlı — her footer
       ekrana sabitleniyor ve içeriğin üstünü kapatıyordu. Normal akışa alıp
       sayfanın sonuna yerleştiriyoruz; içerik kısa olduğunda da ekranın altına
       yapışsın diye margin-top:auto (body flex kolonu) kullanılıyor. */
    position: static !important;
    bottom: auto !important;
    width: auto !important;
    z-index: auto !important;
    margin-top: auto;

    /* Tema ".otobonus-app footer" için background ve padding'i !important ile
       veriyor; ezmek için biz de !important kullanıyoruz.
       Zemin deseni artık sayfanın tamamında olduğu için footer yalnızca
       hafif bir koyulaşma ve üst ayırıcı alıyor. */
    padding: 30px 18px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(180deg,
                transparent 0%,
                rgba(0, 0, 0, .38) 100%) !important;
}

/* Sabit footer kalktığı için altta ayrılan boşluğa gerek yok;
   ayrıca içerik kısa olduğunda footer'ı aşağı itmek için flex kolonu. */
/* =====================================================================
   SAYFA ZEMİNİ — giriş sayfasıyla birebir aynı
   ---------------------------------------------------------------------
   Temanın ".otobonus-app::before" katmanında hâlâ mor bir ışık vardı
   (rgba(109, 40, 217, .06)) ve taban rengi DB'den değil sabit bir
   gradient'ten geliyordu. Giriş sayfasındaki katmanların aynısıyla
   değiştiriliyor; taban artık general_settings'ten gelen
   --background-color.
   ===================================================================== */
/* Tema, panelde de 2123.jpg görselini ::after ile basıyor (z-index:-1).
   Bu katman ::before'un (z-index:-2) ÜSTÜNDE olduğu için yeni zemini
   tamamen örtüyordu — arka planın "değişmemesinin" sebebi buydu.
   Giriş sayfasında kapatılmıştı, panelde de kapatıyoruz. Böylece 342 KB'lık
   indirme burada da kalkıyor. */
.otobonus-app::after {
    display: none !important;
}

.otobonus-app::before {
    background:
        /* Üstten inen marka ışığı */
        radial-gradient(ellipse 85% 55% at 50% -8%,
            rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .20) 0%, transparent 62%),
        /* Sağ altta ikinci, daha sönük odak */
        radial-gradient(ellipse 60% 45% at 92% 100%,
            rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .10) 0%, transparent 65%),
        /* Sol üstte hafif beyaz kırılma — düz siyahlığı kırar */
        radial-gradient(ellipse 45% 35% at 8% 12%,
            rgba(255, 255, 255, .035) 0%, transparent 60%),
        /* Diyagonal doku — bu katmanın İÇİNDE olmalı.
           body'ye verildiğinde bu ::before (position:fixed, opak taban)
           onun üstüne boyandığı için desen hiç görünmüyordu. */
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .045) 0px,
            rgba(255, 255, 255, .045) 1px,
            transparent 1px,
            transparent 9px),
        repeating-linear-gradient(
            45deg,
            rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .05) 0px,
            rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .05) 1px,
            transparent 1px,
            transparent 22px),
        /* Taban */
        var(--background-color, #0C0809) !important;
    opacity: 1 !important;
    filter: none !important;
}

body.otobonus-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0 !important;

}
.otobonus-app .otb-footer-inner {
    max-width: 1368px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 22px;
    text-align: center;
}

/* Telegram butonu */
.otobonus-app .otb-footer-tg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .16);
    border: 1px solid rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .4);
    transition: background .18s ease, border-color .18s ease;
}
.otobonus-app .otb-footer-tg:hover {
    background: var(--btn-take-bonus-bg, #D50D0D);
    border-color: var(--btn-take-bonus-bg, #D50D0D);
}
.otobonus-app .otb-footer-tg i { font-size: 1rem; }

@media (max-width: 600px) {
    /* padding'e !important şart: tema ".otobonus-app footer" için
       "padding: 12px !important" veriyor ve !important olmayan kuralı ezer. */
    .otobonus-app .otb-footer {
        margin-top: 34px;
        padding: 22px 14px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    }
    }