/* =====================================================================
   Otobonus — buton güncellemesi
   ---------------------------------------------------------------------
   Yerleşim: İKON ÜSTTE, YAZI ALTTA (dikey istif).

   Değişenler:
     • Köşeler: hap (999px) → köşeli ama modern (12–14px)
     • İkonlar yumuşak kenarlı bir kutu içinde
     • Filtre çubuğu marka kırmızısı zeminde (daha belirgin)
     • Seçili sekme beyaz dolgu — eskiden yalnızca ince kırmızı halka +
       parıltı vardı, yuvarlak kapsayıcıyla çakışıp bozuk görünüyordu
     • MOBİL: filtre çubuğundaki 5 sekme tek satıra eşit sığdırılır,
       kırpılma yok (önceden son sekme görünmüyordu)

   SADECE CSS — hiçbir HTML/PHP/JS değişmez.
   Renkler general_settings'ten türer, panelden değiştirilebilir.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Bölüm sekmeleri: Bonus Talep / Çarkıfelek / Bilet / Etkinlik …
   ------------------------------------------------------------------ */
.otobonus-app .otb-snav-btn,
.otb-snav-btn {
    display: inline-flex !important;
    flex-direction: column !important;   /* ikon üstte, yazı altta */
    align-items: center !important;
    justify-content: center;
    gap: 9px !important;
    padding: 15px 22px !important;
    min-width: 108px;
    border-radius: 14px !important;
    line-height: 1.2;
    text-align: center;
}

.otobonus-app .otb-snav-btn > i,
.otb-snav-btn > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.otobonus-app .otb-snav-btn > span,
.otb-snav-btn > span {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
.otobonus-app .otb-snav-btn:hover > i,
.otb-snav-btn:hover > i {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .16);
}
.otobonus-app .otb-snav-btn.active > i,
.otb-snav-btn.active > i {
    background: rgba(0, 0, 0, .22);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

/* ---------------------------------------------------------------------
   2) Ana filtre çubuğu: Tüm Bonuslar / Spor / Casino / …
   İç içe köşe kuralı: dış yarıçap = iç yarıçap + iç boşluk (12 + 6 = 18).
   ------------------------------------------------------------------ */
.otobonus-app .filter-buttons .tab {
    background: linear-gradient(135deg,
                var(--btn-take-bonus-bg, #D50D0D) 0%,
                var(--btn-take-bonus-hover-bg, #A80A0A) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 18px !important;
    padding: 6px !important;
    gap: 4px;
    box-shadow: 0 10px 30px -12px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .75),
                inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    align-items: stretch;

    /* style.css'te ".tab { display:flex; overflow:hidden }" tanımlı ve
       flex-wrap belirtilmemiş → varsayılan "nowrap". Dar ekranda sekmeler
       taşıyor, overflow:hidden de taşanı kırpıyordu; son sekme
       ("Geçmiş Talepler") görünmez hâle geliyordu. */
    overflow: visible !important;
}

.otobonus-app .filter-button {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* İkon tepede sabit — butonlar eşit yüksekliğe gerildiği için "center"
       ile tek/iki satırlık etiketlerin ikonları farklı hizada kalıyordu.
       flex-start ile TÜM ikonlar aynı hizada, yazılar da altında hizalı. */
    justify-content: flex-start;
    gap: 8px !important;
    padding: 14px 20px !important;
    min-width: 104px;
    border-radius: 12px !important;
    line-height: 1.25;
    text-align: center;
    /* "Buton Yazı Rengi" ayarı (filter_button_color). */
    color: var(--filter-button-color, rgba(255, 255, 255, .85)) !important;
    background: transparent !important;
    border: 0 !important;
    /* Temanın kayan parlama efekti dikey düzende kutunun dışına taşıyordu */
    overflow: visible !important;
}
.otobonus-app .filter-button::before,
.otobonus-app .filter-button::after {
    display: none !important;
}
.otobonus-app .filter-button:hover:not(.active) {
    background: rgba(255, 255, 255, .13) !important;
    color: #fff !important;
}

.otobonus-app .filter-button > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .95rem;
    background: rgba(255, 255, 255, .18) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    color: #fff !important;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* SEÇİLİ: beyaz dolgu — halka/parıltı yerine net bir kutu */
.otobonus-app .filter-button.active {
    /* "Aktif Buton Arka Plan / Yazı" ayarları — panelden değişince yansır. */
    background: var(--filter-button-active-bg, #fff) !important;
    color: var(--filter-button-active-color, #A80A0A) !important;
    box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .45) !important;
}
.otobonus-app .filter-button.active > i {
    background: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .12) !important;
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .25) !important;
    color: var(--btn-take-bonus-bg, #D50D0D) !important;
}

/* ---------------------------------------------------------------------
   3) İkincil çipler + kart köşeleri
   ------------------------------------------------------------------ */
.otobonus-app .otb-chip {
    border-radius: 10px !important;
    gap: 7px;
    /* Pasif çipler nötr — seçiliyle arasındaki fark artsın */
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: rgba(255, 255, 255, .60) !important;
    box-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.otobonus-app .otb-chip > i {
    color: rgba(255, 255, 255, .45);
    transition: color .18s ease;
}
.otobonus-app .otb-chip:hover:not(.active) {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .20) !important;
    color: #fff !important;
}

/* SEÇİLİ: dolu marka kırmızısı.
   Tema yalnızca %20–12 opaklıkta sönük bir dolgu veriyordu, hangisinin
   seçili olduğu ayırt edilemiyordu. */
.otobonus-app .otb-chip.active {
    background: linear-gradient(135deg,
                var(--btn-take-bonus-bg, #D50D0D) 0%,
                var(--btn-take-bonus-hover-bg, #A80A0A) 100%) !important;
    border-color: var(--btn-take-bonus-bg, #D50D0D) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px -4px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), .8) !important;
}
.otobonus-app .otb-chip.active > i {
    color: #fff !important;
    opacity: 1;
}
.otobonus-app .bonus-card    { border-radius: 12px !important; }
.otobonus-app .bonus-image   { border-radius: 12px 12px 0 0 !important; }
.otobonus-app .btn-take-bonus{ border-radius: 0 0 12px 12px !important; }

/* ---------------------------------------------------------------------
   4) MOBİL — filtre çubuğu tek satıra sığsın
   NOT: max-width sorguları GENİŞTEN DARA sıralanmalı; eşit özgüllükte
   sonraki kural kazandığı için ters sırada dar ekran ayarları eziliyor.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .otobonus-app .otb-section-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    .otobonus-app .otb-snav-btn,
    .otb-snav-btn {
        min-width: 92px;
        padding: 12px 14px !important;
        gap: 7px !important;
        border-radius: 12px !important;
    }
    .otobonus-app .otb-snav-btn > i,
    .otb-snav-btn > i { width: 32px; height: 32px; font-size: .92rem; border-radius: 9px; }
    .otobonus-app .otb-snav-btn > span,
    .otb-snav-btn > span { font-size: .72rem; }
}

@media (max-width: 720px) {
    /* Filtre çubuğu: 5 sekme mobilde de TEK SATIRDA, masaüstündeki gibi.
       Sabit küçük punto yerine clamp() ile ekran genişliğine göre
       ölçekleniyor — böylece 320px'de bile okunur kalıyor, geniş
       ekrana doğru masaüstü boyutuna yaklaşıyor.
       min-width sıfırlanmazsa flex daralamaz ve taşma sürer. */
    .otobonus-app .filter-buttons .tab {
        width: 100%;
        box-sizing: border-box;
        flex-wrap: nowrap !important;
        gap: clamp(2px, .8vw, 4px);
        padding: clamp(4px, 1.2vw, 6px) !important;
    }
    /* Dikeyde daha az yer kaplasın: iç boşluk ve ikon küçültüldü. */
    .otobonus-app .filter-button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: clamp(6px, 1.6vw, 9px) clamp(1px, .8vw, 6px) !important;
        gap: clamp(3px, 1vw, 5px) !important;
        font-size: clamp(.54rem, 2.4vw, .72rem) !important;
        letter-spacing: 0 !important;
        line-height: 1.18;
        /* Etiketler boşluktan sarsın; kelime ortasından bölünmesin */
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
    .otobonus-app .filter-button > i {
        width:  clamp(19px, 5.4vw, 28px);
        height: clamp(19px, 5.4vw, 28px);
        font-size: clamp(.62rem, 2vw, .82rem);
        border-radius: 7px;
    }

    /* ── Bonus çeşitleri (Hepsi / Yatırım / Kayıp / Deneme) ──
       Sarmak yerine tek sırada eşit paylaşsın; etiketler ekran
       genişliğine göre ölçeklenir. */
    .otobonus-app .otb-filter-secondary {
        flex-wrap: nowrap !important;
        gap: clamp(3px, 1vw, 6px) !important;
        padding-left: 12px;
        padding-right: 12px;
    }
    /* "flex: 1 1 0" ile hepsi eşit bölünüyordu ve en uzun etiket
       ("Deneme & Hoşgeldin") üç noktayla kesiliyordu. İçeriğe göre
       boyutlandırıp artan boşluğu paylaştırınca dördü de tam sığıyor. */
    .otobonus-app .otb-chip {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        padding: clamp(6px, 1.8vw, 9px) clamp(4px, 1.4vw, 10px) !important;
        font-size: clamp(.52rem, 2.2vw, .78rem) !important;
        gap: clamp(3px, 1vw, 6px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .otobonus-app .otb-chip > i {
        font-size: clamp(.6rem, 2vw, .85rem);
        flex: 0 0 auto;
    }

    /* Bölüm sekmeleri (6 madde) sarmaya devam eder — tek satıra
       sığdırmak onları okunamayacak kadar daraltırdı. */
    .otobonus-app .otb-section-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------
   MOBİL — bölüm sekmeleri dikey istiften YATAY düzene
   Dikey istifte her kutu ~140px yükseliyordu; 6 kutu iki satırda ~290px
   dikey alan kaplıyordu. İkon ve yazıyı yan yana alınca kutu yüksekliği
   ~44px'e iniyor, blok yaklaşık üçte birine düşüyor.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .otobonus-app .otb-section-nav {
        /* Grid yerine ORTALANAN flex: görünür sekme sayısı 3'ten az olduğunda
           (bazı bölümler engelliyse) grid onları sola yaslıyordu. Flex +
           justify-content:center ile kutular HER SAYIDA ortalı kalır. */
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px !important;
        /* Önceki hâlde "padding: 0" yazılmıştı ve temanın 16px üst boşluğunu
           sıfırladığı için sekmeler header'a yapışıyordu. */
        padding: 14px 12px 10px !important;
    }
    .otobonus-app .otb-snav-btn,
    .otb-snav-btn {
        /* Kutu genişliği İÇERİĞE göre — sabit 1/3 sınırı yazıyı "B..." diye
           kesiyordu. İçerik kadar olup satıra sığdığı kadar dizilir, kalan
           yer justify-content:center ile ortalanır. */
        flex: 0 0 auto !important;
        max-width: 100%;
        flex-direction: row !important;   /* ikon solda, yazı sağda */
        justify-content: flex-start !important;
        min-width: 0 !important;
        width: auto;
        padding: 8px 7px !important;
        gap: 6px !important;
        border-radius: 10px !important;
        text-align: left !important;
    }
    .otobonus-app .otb-snav-btn > i,
    .otb-snav-btn > i {
        width: 22px;
        height: 22px;
        font-size: .72rem;
        border-radius: 6px;
        flex: 0 0 auto;
    }
    .otobonus-app .otb-snav-btn > span,
    .otb-snav-btn > span {
        font-size: .63rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
}

@media (max-width: 360px) {
    /* Çok dar ekran: yazıyı biraz küçült, kutular yine içerik kadar ve ortalı
       (genişlik sınırı koymuyoruz — yazı kesilmesin). */
    .otobonus-app .otb-snav-btn > span,
    .otb-snav-btn > span { font-size: .68rem; }
}

/* ---------------------------------------------------------------------
   iOS OTOMATİK YAKINLAŞTIRMA ENGELİ
   Safari, yazı boyutu 16px'in ALTINDA olan bir alana dokunulduğunda
   sayfayı yakınlaştırır ve düzen bozulur. Temada birkaç alan 14–15px
   tanımlı (otb-popup-tc-input, etk-serbest-input …). Yalnızca dokunmatik
   genişliklerde 16px'e çekiyoruz; masaüstü tasarımı etkilenmiyor.
   Not: user-scalable=no ile de engellenebilirdi ama o, görme güçlüğü
   olan kullanıcıların sayfayı büyütmesini de keserdi.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .otobonus-app input[type="text"],
    .otobonus-app input[type="number"],
    .otobonus-app input[type="tel"],
    .otobonus-app input[type="email"],
    .otobonus-app input[type="search"],
    .otobonus-app input:not([type]),
    .otobonus-app select,
    .otobonus-app textarea {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .otobonus-app .otb-snav-btn > i,
    .otb-snav-btn > i,
    .otobonus-app .filter-button > i { transition: none !important; }
}