/**
 * Otobonus — modern casino / dark luxury UI
 * DB renkleri (--*) uzerine katman; animasyon + glassmorphism
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Renkler artik DB'den (general_settings) geliyor.
       index.php / login.php sayfanin basinda --btn-take-bonus-bg,
       --btn-take-bonus-rgb, --background-color, --bonus-card-bg gibi
       degiskenleri basiyor; asagidaki fallback degerler yalnizca o
       degiskenler tanimsizsa devreye girer.
       NOT: --otb-gold ismi tarihsel; artik "vurgu rengi" anlaminda. */
    --otb-gold: var(--btn-take-bonus-bg, #D50D0D);
    --otb-gold-2: var(--btn-take-bonus-hover-bg, #A80A0A);
    --otb-gold-glow: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.45);
    --otb-dark: var(--background-color, #0C0809);
    /* Bunlar yari saydam kalmali (glassmorphism efekti bunlara bagli);
       opak DB rengine baglanirsa cam gorunumu kaybolur. Yalnizca mor
       tonlamasi cikarilip sicak (kirmiziya calan) koyu tona cevrildi. */
    --otb-card: rgba(26, 18, 20, 0.75);
    --otb-glass: rgba(20, 14, 15, 0.68);
    --otb-radius: 18px;
    --otb-radius-sm: 10px;
    --otb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Onay modalı — dengeli (kırmızı yok; altın + nötr) */
    --otb-modal-surface: #2c2c2c;
    --otb-modal-bonus-bg-1: rgba(44, 44, 52, 0.98);
    --otb-modal-bonus-bg-2: rgba(26, 26, 30, 0.99);
    --otb-modal-note-bg: rgba(0, 0, 0, 0.28);
}

/* iOS'ta aşırı kaydırmada (rubber-band) ve çentik/ada güvenli alanlarında
   beyaz zemin görünmesin: html tabanını site arka planına eşitle. */
html {
    background-color: var(--background-color, #0C0809);
}

.otobonus-app {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    padding-bottom: 70px;
}

/* Ambient background */
.otobonus-app::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.12), transparent 55%),
        radial-gradient(ellipse 60% 40% at 100% 50%, rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.06), transparent 50%),
        radial-gradient(ellipse 50% 35% at 0% 80%, rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.05), transparent 45%),
        linear-gradient(180deg, #050506 0%, #0d0d10 40%, #080809 100%);
    pointer-events: none;
}

.otobonus-app::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url('2123.jpg') center center / cover no-repeat fixed;
    opacity: 0.22;
    filter: saturate(0.85) brightness(0.45);
    pointer-events: none;
}

/* Header */
.otobonus-app header {
    background: var(--otb-glass) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    padding: 1rem 1.25rem !important;
    animation: otb-fade-down 0.7s var(--otb-ease) both;
}

@keyframes otb-fade-down {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.otobonus-app .logo {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    transition: transform 0.45s var(--otb-ease);
}

.otobonus-app .logo:hover {
    transform: scale(1.02);
}

/* Filter strips */
.otb-filter-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 12px;
    animation: otb-fade-up 0.65s var(--otb-ease) 0.1s both;
}

@keyframes otb-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.otb-filter-primary,
.otb-filter-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px 0;
}

.otb-filter-secondary {
    margin-top: 6px;
    opacity: 0.95;
}

.otobonus-app .filter-buttons .tab {
    background: rgba(12, 12, 14, 0.5);
    border-radius: 999px !important;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.otobonus-app .filter-button {
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.25s var(--otb-ease),
        box-shadow 0.25s,
        background 0.25s;
}

.otobonus-app .filter-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s var(--otb-ease);
}

.otobonus-app .filter-button:hover::after {
    transform: translateX(100%);
}

.otobonus-app .filter-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.otobonus-app .filter-button.active {
    box-shadow:
        0 0 0 1px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.35),
        0 8px 28px var(--otb-gold-glow);
}

/* Secondary chips */
.otb-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s var(--otb-ease);
}

.otb-chip i {
    font-size: 12px;
    opacity: 0.85;
    color: var(--otb-gold);
}

.otb-chip:hover {
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.35);
    color: #fff;
}

.otb-chip.active {
    background: linear-gradient(135deg, rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.2), rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.12));
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.45);
    color: #fff;
    box-shadow: 0 4px 20px var(--otb-gold-glow);
}

/* Bonus cards */
.otobonus-app .container {
    padding-bottom: 100px;
}

/* Filtre ile gizlenen kart.
   NOT: Asagidaki .bonus-card kuralinda "display: flex !important" var ve bu,
   main.js'in inline "card.style.display = 'none'" atamasini eziyordu; bu yuzden
   Tum Bonuslar / Spor / Casino ve Yatirim / Kayip / Deneme filtreleri hicbir sey
   yapmiyordu. Ayni agirlikta bir sinif ile gizliyoruz. */
.otobonus-app .bonus-card.otb-filtered-out {
    display: none !important;
}

.otobonus-app .bonus-card {
    display: flex !important;
    flex-direction: column;
    background: var(--otb-card) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--otb-radius) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    width: 300px !important;
    min-width: 280px !important;
    max-width: 300px !important;
    margin: 14px !important;
    overflow: hidden;
    animation: otb-card-in 0.55s var(--otb-ease) both;
    transition:
        transform 0.35s var(--otb-ease),
        box-shadow 0.35s,
        border-color 0.35s;
}

/* Kart içeriğini tam yükseklikte dikey diz, butonu daima en alta hizala */
.otobonus-app .bonus-card > a {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.otobonus-app .bonus-card:nth-child(1) {
    animation-delay: 0.05s;
}
.otobonus-app .bonus-card:nth-child(2) {
    animation-delay: 0.1s;
}
.otobonus-app .bonus-card:nth-child(3) {
    animation-delay: 0.15s;
}
.otobonus-app .bonus-card:nth-child(4) {
    animation-delay: 0.2s;
}
.otobonus-app .bonus-card:nth-child(n + 5) {
    animation-delay: 0.22s;
}

@keyframes otb-card-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.otobonus-app .bonus-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.35);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 40px var(--otb-gold-glow) !important;
}

.otobonus-app .bonus-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--otb-radius) var(--otb-radius) 0 0 !important;
    border-bottom: none !important;
    flex: 0 0 auto;
}

.otobonus-app .bonus-name {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 auto;
    min-height: 62px;
    padding: 12px 14px 8px;
    margin: 0;
    font-weight: 700;
    font-size: 14px !important;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.otobonus-app .btn-take-bonus {
    margin-top: auto;
    flex: 0 0 auto;
}

.otobonus-app .btn-take-bonus {
    background: linear-gradient(135deg, var(--otb-gold) 0%, var(--otb-gold-2) 100%) !important;
    border: none !important;
    border-radius: 0 0 var(--otb-radius) var(--otb-radius) !important;
    padding: 14px 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    font-size: 12px !important;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.35);
}

.otobonus-app .btn-take-bonus::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    animation: otb-shimmer 2.5s ease-in-out infinite;
}

@keyframes otb-shimmer {
    0% {
        transform: translateX(-100%);
    }
    40%,
    100% {
        transform: translateX(100%);
    }
}

.otobonus-app .btn-take-bonus:hover {
    filter: brightness(1.08);
    transform: none;
    box-shadow: 0 8px 28px var(--otb-gold-glow);
}

.otobonus-app .btn-take-bonus i {
    margin-right: 6px;
}

/* Overlay — dark screen */
.otobonus-app .overlay,
#otb-loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    background: rgba(5, 5, 8, 0.82) !important;
    transition: opacity 0.35s ease;
}

body.otb-no-scroll {
    overflow: hidden;
    touch-action: none;
}

/* Popups */
.otobonus-app .popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    background: rgba(30, 30, 34, 0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--otb-radius) !important;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    animation: otb-modal-in 0.45s var(--otb-ease) both;
}

@keyframes otb-modal-in {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.otobonus-app .popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--otb-gold-2), var(--otb-gold), var(--otb-gold-2));
    opacity: 0.9;
}

.otobonus-app .popup h2,
.otobonus-app .popup .title {
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin-top: 8px;
}

.otobonus-app .close-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s, background 0.2s;
}

.otobonus-app .close-btn:hover {
    transform: rotate(90deg) scale(1.05);
}

.otobonus-app table {
    border-radius: var(--otb-radius-sm);
    overflow: hidden;
}

.otobonus-app th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.otobonus-app .popup-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--otb-gold-2), var(--otb-gold));
}

/* ——— Bonus Geçmişim popup (#popup) — akordeon + koyu gövde ——— */
.otobonus-app .otb-popup-history {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: 560px !important;
    width: min(560px, 94vw) !important;
    max-height: 90vh !important;
    padding: 0 !important;
    border-radius: 20px !important;
    /* "Popup Arka Plan" ayarı (popup_bg) — panelden değişince yansır. */
    background: var(--popup-bg, #2b2b2b) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.35) inset !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
    z-index: 10005 !important;
}

.otobonus-app .otb-popup-history.popup {
    animation: otb-history-modal-in 0.4s var(--otb-ease) both !important;
}

@keyframes otb-history-modal-in {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.otobonus-app .otb-popup-history::before {
    display: none !important;
}

.otb-popup-history-inner {
    padding: 22px 20px 18px;
}

.otb-popup-history-title {
    margin: 0 44px 16px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}

.otb-popup-history .otb-popup-history-scroll.popup-content {
    max-height: min(420px, 62vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 4px 8px 0;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--btn-take-bonus-bg, #D50D0D) rgba(0, 0, 0, 0.35);
}

.otb-popup-history .otb-popup-history-scroll::-webkit-scrollbar {
    width: 6px;
}

.otb-popup-history .otb-popup-history-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
}

.otb-popup-history .otb-popup-history-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--btn-take-bonus-bg, #D50D0D), var(--btn-take-bonus-hover-bg, #A80A0A));
    border-radius: 999px;
}

.otb-popup-history-close.close-btn {
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    border: none !important;
    /* "Popup Kapat Buton" ayarı (popup_close_btn_bg) — panelden değişince yansır. */
    background: var(--popup-close-btn-bg, #e74c3c) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(180, 40, 40, 0.45);
}

.otb-popup-history-close.close-btn:hover {
    transform: scale(1.06) !important;
    filter: brightness(1.05);
}

/* Kimlik / TC popup — bonus geçmişinden açılınca üstte kalsın (#popup 10005) */
.otobonus-app #popupTC.popup {
    z-index: 10020 !important;
}

/* ——— Kişisel bilgi / TC popup (#popupTC) — promosyon kodu modalı ile aynı dil ——— */
.otobonus-app .otb-popup-tc {
    max-width: 480px !important;
    width: min(480px, 94vw) !important;
    padding: 0 !important;
    border-radius: 20px !important;
    background: #2b2b2b !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.35) inset !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
}

.otobonus-app .otb-popup-tc::before {
    display: none !important;
}

.otb-popup-tc-inner {
    padding: 28px 24px 26px;
    max-height: min(78vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--btn-take-bonus-bg, #D50D0D) rgba(0, 0, 0, 0.35);
}

.otb-popup-tc-inner::-webkit-scrollbar {
    width: 6px;
}

.otb-popup-tc-inner::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
}

.otb-popup-tc-inner::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--btn-take-bonus-bg, #D50D0D), var(--btn-take-bonus-hover-bg, #A80A0A));
    border-radius: 999px;
}

.otb-popup-tc-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.35);
    background: linear-gradient(145deg, rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.16), rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otb-gold);
    font-size: 1.35rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.otb-popup-tc-title {
    margin: 0 40px 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}

.otb-popup-tc-hint-block {
    margin: 0 0 18px;
}

.otb-popup-tc-hint {
    margin: 0 0 10px;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

.otb-popup-tc-warning {
    margin: 0;
    padding: 12px 14px;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(0, 0, 0, 0.32);
    border-radius: 12px;
    border: 1px solid rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.2);
}

.otb-popup-tc-warn-ok {
    color: #b8f5c8;
    font-weight: 700;
}

.otb-popup-tc-warn-bad {
    color: #ffb8b8;
    font-weight: 700;
}

.otb-popup-tc-form {
    margin: 0;
}

.otb-popup-tc-field {
    margin-bottom: 14px;
}

.otb-popup-tc-label {
    display: block;
    margin: 0 0 6px 2px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.otb-popup-tc-optional {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.35);
}

.otobonus-app .otb-popup-tc-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(0, 0, 0, 0.38) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: left;
    font-family: inherit;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.otb-popup-tc-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.otb-popup-tc-input:focus {
    outline: none;
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.55) !important;
    box-shadow: 0 0 0 3px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.18);
}

.otb-popup-tc-input--date {
    /* iOS/Android date input'u varsayılan olarak içeriğe göre boyutlanır ve
       diğer metin alanlarından dar/farklı görünür. appearance sıfırlanıp
       tam genişlik zorlanınca hepsi aynı hizaya gelir. */
    -webkit-appearance: none;
    appearance: none;
    width: 100% !important;
    min-height: 46px;
    color-scheme: dark;
}
/* Tarih değeri iOS'ta ortalı gelir; diğer alanlar gibi sola hizala. */
.otb-popup-tc-input--date::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}
/* Takvim ikonu koyu zeminde görünsün. */
.otb-popup-tc-input--date::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    opacity: 0.65;
    cursor: pointer;
}

.otb-popup-tc-submit.otb-popup-code-btn {
    margin-top: 8px;
}

.otb-popup-tc-close.close-btn {
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(180deg, #3d3d42, #2e2e32) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.otb-popup-tc-close.close-btn i {
    font-size: 15px;
    line-height: 1;
}

.otb-popup-tc-close.close-btn:hover {
    transform: scale(1.06) !important;
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.45) !important;
    background: linear-gradient(180deg, #4a4a50, #35353a) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    filter: none;
}

@media (max-width: 480px) {
    .otb-popup-tc-title {
        font-size: 1.05rem;
        margin-left: 36px;
        margin-right: 36px;
    }

    .otb-popup-tc-inner {
        padding: 26px 18px 22px;
    }
}

/* ——— Promosyon kodu popup (#codepopup) ——— */
.otobonus-app .otb-popup-code {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-width: 440px !important;
    width: min(440px, 92vw) !important;
    max-height: 90vh !important;
    padding: 0 !important;
    border-radius: 20px !important;
    /* "Popup Arka Plan" ayarı (popup_bg) — panelden değişince yansır. */
    background: var(--popup-bg, #2b2b2b) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.35) inset !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
    z-index: 10005 !important;
}

.otobonus-app .otb-popup-code::before {
    display: none !important;
}

.otobonus-app .otb-popup-code.popup {
    animation: otb-code-modal-in 0.4s var(--otb-ease) both !important;
}

@keyframes otb-code-modal-in {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.otb-popup-code-inner {
    padding: 28px 24px 26px;
}

.otb-popup-code-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.35);
    background: linear-gradient(145deg, rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.16), rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otb-gold);
    font-size: 1.35rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.otb-popup-code-title {
    margin: 0 40px 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}

.otb-popup-code-hint {
    margin: 0 0 20px;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

.otb-popup-code-field {
    margin-bottom: 4px;
}

.otobonus-app .otb-popup-code-input.form-control {
    width: 100% !important;
    box-sizing: border-box;
    padding: 14px 16px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(0, 0, 0, 0.38) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    font-family: inherit;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.otb-popup-code-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.06em;
    font-weight: 500;
    text-transform: none;
}

.otb-popup-code-input:focus {
    outline: none;
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.55) !important;
    box-shadow: 0 0 0 3px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.18);
}

.otb-popup-code-btn {
    width: 100%;
    margin-top: 18px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(145deg, var(--otb-gold), var(--otb-gold-2));
    color: #1a1208;
    box-shadow: 0 8px 24px var(--otb-gold-glow);
    transition:
        transform 0.2s var(--otb-ease),
        filter 0.2s,
        box-shadow 0.2s;
}

.otb-popup-code-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 30px var(--otb-gold-glow);
}

.otb-popup-code-btn:active {
    transform: scale(0.98);
}

.otb-popup-code-btn i {
    font-size: 0.85em;
    transition: transform 0.25s var(--otb-ease);
}

.otb-popup-code-btn:hover i {
    transform: translateX(3px);
}

.otb-popup-code-close.close-btn {
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(180deg, #3d3d42, #2e2e32) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.otb-popup-code-close.close-btn i {
    font-size: 15px;
    line-height: 1;
}

.otb-popup-code-close.close-btn:hover {
    transform: scale(1.06) !important;
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.45) !important;
    background: linear-gradient(180deg, #4a4a50, #35353a) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    filter: none;
}

@media (max-width: 480px) {
    .otb-popup-code-title {
        font-size: 1.05rem;
        margin-left: 36px;
        margin-right: 36px;
    }

    .otb-popup-code-inner {
        padding: 26px 18px 22px;
    }
}

.otb-history-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* style.css #bonus-request-history max-height kaldır (scroll üst konteynerde) */
.otb-popup-history #bonus-request-history {
    max-height: none !important;
    overflow: visible !important;
}

.otb-history-empty {
    text-align: center;
    padding: 28px 16px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
}

.otb-history-empty p {
    margin: 0;
}

.otb-history-item {
    border-radius: 15px;
    overflow: hidden;
    background: linear-gradient(145deg, #e63946 0%, #d93025 55%, #c72c24 100%);
    box-shadow: 0 10px 28px rgba(217, 48, 37, 0.35);
}
.otb-history-item--onay {
    background: linear-gradient(145deg, #1e9e5a 0%, #16854a 55%, #0f6b39 100%);
    box-shadow: 0 10px 28px rgba(22, 133, 74, 0.35);
}
.otb-history-item--bekliyor {
    background: linear-gradient(145deg, #b07e10 0%, #956a0d 55%, #7a560a 100%);
    box-shadow: 0 10px 28px rgba(176, 126, 16, 0.35);
}

.otb-history-item__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 14px 14px 16px;
    margin: 0;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: filter 0.2s ease;
}

.otb-history-item__head:hover {
    filter: brightness(1.06);
}

.otb-history-item__name {
    flex: 1 1 140px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

.otb-history-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.otb-history-item__date {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}

.otb-history-item__toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition:
        transform 0.3s var(--otb-ease),
        background 0.2s;
}

.otb-history-item__toggle i {
    font-size: 12px;
    transition: transform 0.3s var(--otb-ease);
}

.otb-history-item.is-open .otb-history-item__toggle {
    background: rgba(0, 0, 0, 0.35);
}

.otb-history-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s var(--otb-ease);
}

.otb-history-item.is-open .otb-history-item__body {
    grid-template-rows: 1fr;
}

.otb-history-item__body-inner {
    overflow: hidden;
    min-height: 0;
}

.otb-history-item__rows {
    padding: 0 16px 10px;
}

.otb-history-item__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.otb-history-item__row:last-of-type {
    border-bottom: none;
}

.otb-history-item__label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.otb-history-item__label::after {
    content: ':';
}

.otb-history-item__val {
    font-weight: 700;
    color: #fff;
    text-align: right;
}

.otb-history-item__status--onay {
    color: #a8f5c0 !important;
}

.otb-history-item__status--red {
    color: #ffd4d4 !important;
}

.otb-history-item__status--bekliyor {
    color: #ffe6a8 !important;
}

.otb-history-item__note {
    margin: 4px 12px 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(90, 20, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.otb-history-item__note--identity {
    margin: 8px 12px 16px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.otb-history-item__note p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

.otb-history-item__note .btn-take-bonus:not(.otb-btn-identity) {
    margin-top: 10px;
}

/* Kimlik uyarısı — cam panel + altın CTA (kırmızı kart üzerinde uyumlu) */
.otb-history-identity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 22px 20px 18px;
    border-radius: 14px;
    background: linear-gradient(
        155deg,
        rgba(8, 6, 8, 0.72) 0%,
        rgba(28, 14, 16, 0.78) 48%,
        rgba(12, 8, 10, 0.82) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 12px 32px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.otb-history-identity__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.otb-history-identity__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.22), rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.08));
    border: 1px solid rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.35);
    color: var(--otb-gold);
    font-size: 1.15rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.otb-history-identity__copy {
    text-align: center;
    max-width: 440px;
    min-width: 0;
}

.otb-history-identity__eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--otb-gold);
    margin-bottom: 6px;
    opacity: 0.95;
}

.otb-history-identity__text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    font-weight: 500;
    font-style: normal;
    color: rgba(255, 255, 255, 0.94);
}

.otb-btn-identity {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border: none !important;
    background: linear-gradient(180deg, var(--otb-gold) 0%, var(--otb-gold-2) 100%) !important;
    color: #1a0f08 !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    box-shadow:
        0 4px 0 rgba(180, 100, 20, 0.45),
        0 8px 24px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.28);
    transition:
        transform 0.2s var(--otb-ease),
        box-shadow 0.2s var(--otb-ease),
        filter 0.2s ease;
}

.otb-btn-identity:hover {
    background: linear-gradient(180deg, var(--bonus-name-color, #E2A731) 0%, var(--otb-gold) 100%) !important;
    color: #1a0f08 !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow:
        0 5px 0 rgba(180, 100, 20, 0.4),
        0 12px 28px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.35);
}

.otb-btn-identity:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 0 rgba(180, 100, 20, 0.5),
        0 4px 16px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.2);
}

.otb-btn-identity__label {
    line-height: 1.3;
    text-align: center;
}

.otb-btn-identity__icon {
    font-size: 0.75rem;
    opacity: 0.9;
    transition: transform 0.25s var(--otb-ease);
}

.otb-btn-identity:hover .otb-btn-identity__icon {
    transform: translateX(3px);
}

@media (max-width: 480px) {
    .otb-history-identity-card {
        padding: 16px 14px 14px;
        gap: 16px;
    }

    .otb-history-identity__head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .otb-history-identity__copy {
        text-align: center;
    }

    .otb-btn-identity {
        flex-direction: column;
        gap: 6px;
        padding: 13px 14px !important;
    }
}

@media (max-width: 480px) {
    .otb-history-item__head {
        flex-direction: column;
        align-items: flex-start;
        /* Sutun yonunde "space-between" dikeyde bosluk acar; icerik
           kadar yer kaplamasi icin baslangica yasla. */
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 13px 14px;
    }

    /* Masaustunde ".otb-history-item__name" flex: 1 1 140px ile GENISLIK
       taban degeri aliyor. Yon sutuna donunce ayni 140px YUKSEKLIGE
       donusuyor ve flex-grow onu daha da buyutuyordu: baslik ile tarih
       arasinda yuz piksellerce bos alan olusuyordu. */
    .otb-history-item__name {
        flex: 0 0 auto;
        width: 100%;
        font-size: 0.78rem;
    }

    .otb-history-item__meta {
        width: 100%;
        justify-content: space-between;
        flex-shrink: 1;
    }

    .otb-popup-history-title {
        font-size: 1.05rem;
        margin-left: 40px;
        margin-right: 40px;
    }
}

/* Loader — tam ekran overlay */
.otobonus-app .loader {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(5, 5, 8, 0.88) !important;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: unset !important;
}

.otobonus-app .loader.otb-loader-visible {
    display: flex !important;
    z-index: 10020 !important;
    animation: otb-loader-in 0.25s ease both;
}

@keyframes otb-loader-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* İçerik kartı */
.otb-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: rgba(22, 22, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 36px 44px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    min-width: 280px;
    max-width: 340px;
    animation: otb-card-in 0.3s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}

@keyframes otb-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo */
.otobonus-app .loader .otb-loading-logo {
    opacity: 0.90;
    filter: drop-shadow(0 0 18px rgba(232,168,56,0.30));
}

/* Loader metin */
.otobonus-app .loader #otb-loader-text {
    color: rgba(255,255,255,0.92);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.otb-loader-ring {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--otb-gold);
    border-radius: 50%;
    animation: otb-spin 0.85s linear infinite;
}

@keyframes otb-spin {
    to {
        transform: rotate(360deg);
    }
}

.otobonus-app .pageloader {
    background: rgba(5, 5, 8, 0.85) !important;
    backdrop-filter: blur(8px);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.otobonus-app footer {
    background: rgba(12, 12, 14, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px !important;
}


/* Notifications */
#notifications .notification {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    animation: otb-toast-in 0.4s var(--otb-ease) both;
}

@keyframes otb-toast-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#yukariCikBtn {
    background: linear-gradient(135deg, var(--otb-gold), var(--otb-gold-2)) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px var(--otb-gold-glow);
}

/* ——— Onay modalı: koyu yüzey + altın vurgu (kırmızı baskın değil) ——— */
.otb-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
    background: rgba(8, 8, 10, 0.78);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.4s var(--otb-ease),
        backdrop-filter 0.4s ease;
}

.otb-modal-backdrop.is-open {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
}

@keyframes otb-panel-enter {
    0% {
        opacity: 0;
        transform: scale(0.94) translateY(22px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes otb-modal-child-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes otb-modal-actions-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.otb-modal-backdrop.is-open .otb-modal-panel {
    animation: otb-panel-enter 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.otb-modal-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: min(88vh, 640px);
    overflow: hidden;
    margin: auto;
    border-radius: 18px;
}

.otb-modal-panel--history {
    background: var(--otb-modal-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}

.otb-modal-panel__inner {
    position: relative;
    padding: 28px 26px 24px;
    z-index: 1;
}

.otb-modal-heading {
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
    margin: 0 40px 20px;
    line-height: 1.4;
    color: #fff;
    letter-spacing: 0.02em;
}

.otb-modal-bonus-card {
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: linear-gradient(165deg, var(--otb-modal-bonus-bg-1) 0%, var(--otb-modal-bonus-bg-2) 100%);
    border: 1px solid rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.38);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(0, 0, 0, 0.2);
}

.otb-modal-bonus-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.88);
    margin-bottom: 8px;
}

.otb-modal-bonus-name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    color: #f7f7f8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.otb-modal-note {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 22px;
    background: var(--otb-modal-note-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.otb-modal-note p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    text-align: center;
    font-style: italic;
    color: rgba(255, 255, 255, 0.88);
}

.otb-modal-actions {
    display: flex;
    gap: 12px;
}

.otb-btn {
    flex: 1;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        transform 0.22s var(--otb-ease),
        box-shadow 0.22s,
        filter 0.22s,
        background 0.22s;
}

.otb-btn:active {
    transform: scale(0.97);
}

.otb-btn-cancel {
    background: #1e1e1e;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.otb-btn-cancel:hover {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.18);
}

.otb-btn-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(145deg, var(--otb-gold), var(--otb-gold-2));
    color: #1a1208;
    box-shadow: 0 8px 24px var(--otb-gold-glow);
}

.otb-btn-ok:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 30px var(--otb-gold-glow);
}

.otb-btn-ok i {
    transition: transform 0.3s var(--otb-ease);
    font-size: 0.9em;
}

.otb-btn-ok:hover i {
    transform: scale(1.15);
}

/* İçerik sıralı giriş */
.otb-modal-backdrop.is-open .otb-modal-heading {
    animation: otb-modal-child-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}

.otb-modal-backdrop.is-open .otb-modal-bonus-card {
    animation: otb-modal-child-in 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.otb-modal-backdrop.is-open .otb-modal-note {
    animation: otb-modal-child-in 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.otb-modal-backdrop.is-open .otb-modal-actions {
    animation: otb-modal-actions-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
}

.otb-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, #3d3d42, #2e2e32);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition:
        transform 0.28s var(--otb-ease),
        box-shadow 0.28s,
        border-color 0.28s,
        background 0.28s;
}

.otb-modal-close i {
    font-size: 15px;
    line-height: 1;
}

.otb-modal-close:hover {
    transform: scale(1.07);
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.45);
    background: linear-gradient(180deg, #4a4a50, #35353a);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.otb-modal-close:active {
    transform: scale(0.96);
}

.otb-loading-logo {
    max-width: 160px;
    margin: 0 auto 12px;
    display: block;
    animation: otb-pulse 1.5s ease-in-out infinite;
}

@keyframes otb-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.03);
    }
}

.otb-stepper {
    margin-top: 20px;
    text-align: left;
    padding-left: 8px;
}

.otb-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

.otb-step.active {
    color: var(--otb-gold);
    font-weight: 600;
}

.otb-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.otb-step.active .otb-step-dot {
    background: var(--otb-gold);
    border-color: var(--otb-gold);
    box-shadow: 0 0 12px var(--otb-gold-glow);
    animation: otb-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes otb-dot-pulse {
    50% {
        box-shadow: 0 0 16px var(--otb-gold-glow);
    }
}

@media (max-width: 768px) {
    .otb-modal-panel--history .otb-modal-panel__inner {
        padding: 24px 18px 20px;
    }

    .otb-modal-heading {
        margin-left: 36px;
        margin-right: 36px;
        font-size: 0.98rem;
    }
    .otobonus-app .filter-button {
        font-size: 9px !important;
        padding: 8px 8px !important;
    }
}

/* ——— Login page (otb-login-page) ——— */
.otb-login-page {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 100px;
}

.otb-login-page .logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.otb-login-page .logo img {
    display: block;
    margin: 0 auto;
    max-width: 220px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.otb-login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.14), transparent 55%),
        linear-gradient(180deg, #050506 0%, #0c0c0f 100%);
}

.otb-login-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url('2123.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.2;
    filter: saturate(0.8) brightness(0.4);
}

#otb-login-form {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(32, 32, 36, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 40px 32px 36px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
    animation: otb-login-in 0.65s var(--otb-ease) both;
}

#otb-login-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--otb-gold-2), var(--otb-gold), var(--otb-gold-2));
}

@keyframes otb-login-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.otb-login-welcome {
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.otb-login-sub {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    margin-bottom: 24px;
    line-height: 1.45;
}

.otb-input-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.otb-input-wrap i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--otb-gold);
    opacity: 0.85;
    font-size: 15px;
    pointer-events: none;
}

.otb-login-page input[type='text'] {
    width: 100%;
    padding: 14px 16px 14px 44px !important;
    margin: 0 !important;
    background: rgba(10, 10, 12, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 15px !important;
    transition:
        border-color 0.25s,
        box-shadow 0.25s;
}

.otb-login-page input[type='text']:focus {
    outline: none;
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.55) !important;
    box-shadow: 0 0 0 3px rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.15);
}

#otb-login-submit {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--otb-gold), var(--otb-gold-2));
    color: #1a1208;
    box-shadow: 0 8px 28px var(--otb-gold-glow);
    transition:
        transform 0.2s,
        filter 0.2s,
        box-shadow 0.2s;
}

#otb-login-submit:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 12px 36px var(--otb-gold-glow);
}

#otb-login-submit i {
    transition: transform 0.25s var(--otb-ease);
}

#otb-login-submit:hover i {
    transform: translateX(4px);
}

.otb-secure-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.otb-secure-row i {
    color: #3ecf8e;
    font-size: 14px;
}

.otb-login-page footer {
    position: fixed;
    bottom: 0;
    background: rgba(12, 12, 14, 0.85) !important;
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.otb-login-page .error-message {
    display: block;
    text-align: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(200, 60, 60, 0.2);
    border: 1px solid rgba(220, 80, 80, 0.35);
    margin-bottom: 16px;
    font-size: 13px;
}

/* ====================================================
   ANA BÖLÜM NAVİGASYONU (Bonus Talep / Çarkıfelek / Bilet)
   ==================================================== */
.otb-section-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px 10px;
    max-width: 1500px;
    margin: 0 auto;
    animation: otb-fade-down 0.6s var(--otb-ease) 0.05s both;
}

.otb-snav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    /* "Bölüm Menüsü" ayarları — pasif buton zemini ve yazı rengi. */
    background: var(--snav-inactive-bg, rgba(22, 22, 28, 0.60));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--snav-text, rgba(255, 255, 255, 0.58));
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        background 0.25s var(--otb-ease),
        color 0.25s,
        border-color 0.25s,
        transform 0.22s var(--otb-ease),
        box-shadow 0.25s;
}

.otb-snav-btn i {
    font-size: 14px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

/* shimmer sweep */
.otb-snav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.55s var(--otb-ease);
}

.otb-snav-btn:hover::before {
    transform: translateX(120%);
}

.otb-snav-btn:hover {
    transform: translateY(-2px);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(var(--btn-take-bonus-rgb, 213, 13, 13), 0.30);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.otb-snav-btn.active {
    /* "Bölüm Menüsü" ayarları — aktif buton zemini ve yazı rengi. */
    background: var(--snav-active-bg, #D50D0D);
    border-color: transparent;
    color: var(--snav-active-text, #0a0a0c);
    box-shadow: 0 4px 20px var(--otb-gold-glow), 0 2px 8px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.otb-snav-btn.active i {
    opacity: 1;
}

.otb-snav-btn:active {
    transform: translateY(0) scale(0.97);
}

/* Bölüm konteynerları */
.otb-section {
    animation: otb-section-in 0.38s var(--otb-ease) both;
}

.otb-section--hidden {
    display: none !important;
}

@keyframes otb-section-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Placeholder (çark + bilet henüz hazır değil) */
.otb-placeholder-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    gap: 16px;
    padding: 48px 24px;
    text-align: center;
}

.otb-placeholder-icon {
    font-size: 56px;
    color: var(--otb-gold);
    opacity: 0.55;
    animation: otb-pulse-soft 2.8s ease-in-out infinite;
}

@keyframes otb-pulse-soft {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%       { opacity: 0.75; transform: scale(1.06); }
}

.fa-spin-slow {
    animation: fa-spin 3.5s linear infinite;
}

.otb-placeholder-title {
    font-size: 22px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.80);
    margin: 0;
}

.otb-placeholder-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
}

@media (max-width: 600px) {
    .otb-snav-btn {
        padding: 9px 16px;
        font-size: 11px;
        gap: 6px;
    }

    .otb-snav-btn i {
        font-size: 12px;
    }

    .otb-section-nav {
        gap: 7px;
        padding: 12px 8px 8px;
        flex-wrap: wrap;
    }
}

@media (max-width: 400px) {
    .otb-snav-btn {
        padding: 8px 12px;
        font-size: 10.5px;
        gap: 5px;
    }

    .otb-section-nav {
        gap: 6px;
    }
}

/* ====================================================
   ÇARKIFELEK — v3 modern redesign
   (sınıf isimleri / JS kancaları v2 ile birebir aynı)
   ==================================================== */

/* Page wrapper */
.otb-cark-page {
    /* Yerel tema kancaları — admin panelden gelen renklere bağlı */
    --ck-accent:   var(--cark-border, #d4a843);
    --ck-hub:      var(--cark-hub, #c0272d);
    --ck-surface:  rgba(13, 11, 16, 0.72);
    --ck-surface-2:rgba(255, 255, 255, 0.045);
    --ck-line:     rgba(255, 255, 255, 0.09);
    --ck-txt:      rgba(255, 255, 255, 0.92);
    --ck-txt-dim:  rgba(255, 255, 255, 0.52);
    --ck-txt-soft: rgba(255, 255, 255, 0.38);

    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 72px;
}

/* ── Header / hero ── */
.otb-cark-hdr {
    position: relative;
    text-align: center;
    max-width: 620px;
    margin: 0 auto 30px;
}
.otb-cark-hdr-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--ck-hub) 82%, #fff) 0%,
            var(--ck-hub) 45%,
            color-mix(in srgb, var(--ck-hub) 55%, #000) 100%);
    box-shadow:
        0 12px 30px color-mix(in srgb, var(--ck-hub) 38%, transparent),
        0 0 0 1px color-mix(in srgb, var(--ck-accent) 26%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.28);
    font-size: 23px;
    color: #fff;
    margin-bottom: 16px;
    animation: cark-badge-float 3.6s ease-in-out infinite;
}
.otb-cark-hdr-badge i { animation: cark-badge-turn 9s linear infinite; }
@keyframes cark-badge-float {
    0%, 100% { transform: translateY(0)    rotate(-3deg); }
    50%      { transform: translateY(-7px) rotate(3deg); }
}
@keyframes cark-badge-turn { to { transform: rotate(360deg); } }

.otb-cark-hdr-title {
    font-size: clamp(25px, 5vw, 40px);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 10px;
    letter-spacing: -0.025em;
    color: #fff;
    background: linear-gradient(140deg, #ffffff 32%, var(--ck-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.otb-cark-hdr-sub {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ck-txt-soft);
    margin: 0;
}

/* ── Main layout ── */
.otb-cark-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 46px;
    flex-wrap: wrap;
}

/* ── Wheel zone ── */
.otb-cark-wheel-zone {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    isolation: isolate;
}

/* Yavaşça dönen renkli aura */
.otb-cark-wheel-zone::before {
    content: '';
    position: absolute;
    inset: -4%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0 8%,
        color-mix(in srgb, var(--ck-accent) 34%, transparent) 18%,
        transparent 30%,
        transparent 52%,
        color-mix(in srgb, var(--ck-hub) 38%, transparent) 66%,
        transparent 80%);
    filter: blur(30px);
    opacity: 0.6;
    animation: cark-aura-turn 16s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes cark-aura-turn { to { transform: rotate(360deg); } }

/* Ambient glow behind wheel */
.otb-cark-glow-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--ck-hub) 26%, transparent) 0%,
        transparent 66%);
    animation: cark-glow-pulse 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes cark-glow-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.05); }
}

/* Frame — canvas kendi dış halkasını çiziyor, padding yok */
.otb-cark-frame {
    position: relative;
    width: 480px;
    max-width: 90vw;
    aspect-ratio: 1;
    z-index: 1;
    border-radius: 50%;
    box-shadow:
        0 28px 70px rgba(0,0,0,0.72),
        0 0 70px color-mix(in srgb, var(--ck-accent) 12%, transparent);
    transition: box-shadow 0.4s var(--otb-ease);
}
/* İnce dış çember — canvas boyutunu etkilemez */
.otb-cark-frame::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ck-accent) 22%, transparent);
    pointer-events: none;
}
/* Çevrilirken parlaklık artar */
.otb-cark-frame--spin {
    box-shadow:
        0 28px 80px rgba(0,0,0,0.75),
        0 0 110px color-mix(in srgb, var(--ck-accent) 28%, transparent);
}

/* Canvas fills the frame */
#carkCanvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* ── Pointer (ibre) — metalik damla + glow ── */
.otb-cark-ptr {
    --cark-border: #d4a843;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: 34px;
    height: 54px;
    clip-path: polygon(50% 100%, 6% 40%, 6% 14%, 22% 0%, 78% 0%, 94% 14%, 94% 40%);
    background: linear-gradient(
        178deg,
        #ffffff 0%,
        color-mix(in srgb, var(--cark-border) 55%, #fff) 16%,
        var(--cark-border) 46%,
        color-mix(in srgb, var(--cark-border) 58%, #000) 100%
    );
    filter:
        drop-shadow(0 5px 12px color-mix(in srgb, var(--cark-border) 55%, transparent))
        drop-shadow(0 0 7px color-mix(in srgb, var(--cark-border) 45%, transparent));
    animation: cark-ptr-pulse 2.2s ease-in-out infinite;
}
.otb-cark-ptr::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 100%, 6% 40%, 6% 14%, 22% 0%, 78% 0%, 94% 14%, 94% 40%);
    background: linear-gradient(
        105deg,
        rgba(255,255,255,0.65) 0%,
        rgba(255,255,255,0.10) 42%,
        transparent 60%
    );
    pointer-events: none;
}
/* Ibrenin tepesindeki vida/nokta */
.otb-cark-ptr::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, rgba(0,0,0,0.55));
    opacity: 0.85;
}
@keyframes cark-ptr-pulse {
    0%,100% { filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--cark-border) 50%, transparent)) drop-shadow(0 0  7px color-mix(in srgb, var(--cark-border) 40%, transparent)); }
    50%     { filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--cark-border) 65%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--cark-border) 55%, transparent)); }
}

/* ── Sidebar ── */
.otb-cark-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 300px;
    flex: 0 0 300px;
}

/* Counter card */
.otb-cark-counter-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015)),
        var(--ck-surface);
    border: 1px solid var(--ck-line);
    border-radius: 22px;
    padding: 24px 20px 18px;
    text-align: center;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.48),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
/* üst aksan şeridi */
.otb-cark-counter-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--ck-accent), transparent);
    opacity: 0.85;
}
/* yumuşak iç ışık */
.otb-cark-counter-card::after {
    content: '';
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 210px;
    height: 150px;
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, var(--ck-accent) 20%, transparent),
        transparent 68%);
    pointer-events: none;
}
.otb-cark-counter-top {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}
.otb-cark-counter-num {
    display: block;
    font-size: 62px;
    font-weight: 900;
    line-height: 1;
    min-height: 66px;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--otb-gold);
    background: linear-gradient(160deg, #fff 18%, var(--ck-accent) 92%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 6px 22px var(--otb-gold-glow));
}
.otb-cark-counter-loader {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.14);
    border-top-color: var(--otb-gold);
    border-radius: 50%;
    animation: otb-spin 0.9s linear infinite;
    vertical-align: middle;
    margin-top: 20px;
}
@keyframes otb-spin { to { transform: rotate(360deg); } }
.otb-cark-counter-lbl {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ck-txt-soft);
    text-transform: uppercase;
}
/* Hata mesajı buraya basıldığında cümle düzeninde kalsın */
.otb-cark-counter-lbl span {
    text-transform: none;
    letter-spacing: normal;
}

/* Spin button */
.otb-cark-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 24px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    color: rgba(255,255,255,0.26);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: not-allowed;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s var(--otb-ease);
}
.otb-cark-btn-pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.otb-cark-btn-content {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}
.otb-cark-btn--ready {
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--ck-hub) 78%, #fff) 0%,
        var(--ck-hub) 44%,
        color-mix(in srgb, var(--ck-hub) 52%, #000) 100%);
    border-color: color-mix(in srgb, var(--ck-hub) 55%, transparent);
    color: #fff;
    cursor: pointer;
    box-shadow:
        0 10px 34px color-mix(in srgb, var(--ck-hub) 42%, transparent),
        0 2px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.22);
}
.otb-cark-btn--ready .otb-cark-btn-content i {
    animation: cark-btn-icon 2.6s var(--otb-ease) infinite;
}
@keyframes cark-btn-icon {
    0%, 62%, 100% { transform: rotate(0); }
    80%           { transform: rotate(360deg); }
}
/* parlama süpürmesi */
.otb-cark-btn--ready::after {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-18deg);
    animation: cark-btn-shine 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes cark-btn-shine {
    0%, 55%  { left: -70%; }
    100%     { left: 130%; }
}
.otb-cark-btn--ready .otb-cark-btn-pulse {
    animation: cark-pulse-ring 1.9s ease-out infinite;
    background: color-mix(in srgb, var(--ck-hub) 32%, transparent);
}
@keyframes cark-pulse-ring {
    0%   { transform: scale(0.96); opacity: 0.75; }
    70%  { transform: scale(1.05); opacity: 0; }
    100% { opacity: 0; }
}
.otb-cark-btn--ready:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 44px color-mix(in srgb, var(--ck-hub) 52%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.26);
}
.otb-cark-btn--ready:active { transform: translateY(-1px) scale(0.985); }

/* ── Geçmiş Spin Butonu ── */
.otb-cark-history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 18px;
    border: 1px solid var(--ck-line);
    border-radius: 14px;
    background: var(--ck-surface-2);
    color: var(--ck-txt-dim);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.otb-cark-history-btn:hover {
    background: rgba(255,255,255,0.085);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
    transform: translateY(-1px);
}
.otb-cark-history-btn i { font-size: 14px; color: var(--ck-accent); opacity: 0.9; }

/* Rules card */
.otb-cark-rules-card {
    background:
        linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)),
        var(--ck-surface);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 18px 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.otb-cark-rules-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ck-txt-dim);
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 8px;
}
.otb-cark-rules-title i { color: var(--ck-accent); }
.otb-cark-rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.otb-cark-rules-list li {
    font-size: 12px;
    color: var(--ck-txt-soft);
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.55;
}
.otb-cark-rules-list i {
    color: #34d399;
    font-size: 9px;
    margin-top: 4px;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(52,211,153,0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Prize grid ── */
.otb-cark-prizes-section {
    margin-top: 48px;
    padding-top: 34px;
    border-top: 1px solid rgba(255,255,255,0.055);
}
.otb-cark-prizes-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ck-txt-dim);
    text-align: center;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.otb-cark-prizes-title i { color: var(--ck-accent); }
.otb-cark-prizes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}
.otb-cark-prize-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--pc, #444) 16%, transparent), transparent 70%),
        rgba(255,255,255,0.035);
    border: 1px solid color-mix(in srgb, var(--pc, #fff) 22%, rgba(255,255,255,0.07));
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.78);
    transition: background 0.2s, border-color 0.2s, transform 0.2s var(--otb-ease);
    cursor: default;
}
.otb-cark-prize-chip:hover {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--pc, #444) 26%, transparent), transparent 70%),
        rgba(255,255,255,0.06);
    border-color: color-mix(in srgb, var(--pc, #fff) 38%, transparent);
    transform: translateY(-2px);
    color: #fff;
}
.otb-cark-prize-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pc, #0d1642);
    box-shadow: 0 0 8px var(--pc, #0d1642), inset 0 0 0 1px rgba(255,255,255,0.35);
    flex-shrink: 0;
}

/* ── Geçmiş Spin Popup ── */
.otb-cark-hist-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(4,4,8,0.76);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.otb-cark-hist-overlay--open { display: flex; }
.otb-cark-hist-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    background: linear-gradient(180deg, #14121a 0%, #0c0b11 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: otb-cark-hist-in 0.3s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes otb-cark-hist-in {
    from { opacity: 0; transform: scale(0.93) translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.otb-cark-hist-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.otb-cark-hist-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.otb-cark-hist-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.otb-cark-hist-head i { font-size: 16px; color: var(--cark-border, #d4a843); }
.otb-cark-hist-head h2 { font-size: 16.5px; font-weight: 700; color: #fff; margin: 0; }
.otb-cark-hist-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 20px;
    flex: 1;
}
.otb-cark-hist-loader { display: flex; justify-content: center; padding: 32px 0; }
.otb-cark-hist-empty {
    text-align: center;
    padding: 34px 16px;
    color: rgba(255,255,255,0.4);
    font-size: 13.5px;
}
.otb-cark-hist-item {
    background: rgba(255,255,255,0.038);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 13px 15px;
    margin-bottom: 9px;
    transition: background 0.15s, border-color 0.15s;
}
.otb-cark-hist-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.otb-cark-hist-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
}
.otb-cark-hist-item-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}
.otb-cark-hist-item-date {
    font-size: 10.5px;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
    flex-shrink: 0;
}
.otb-cark-hist-item-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.otb-cark-hist-item-msg {
    font-size: 11.5px;
    color: rgba(255,255,255,0.52);
    line-height: 1.45;
}
.otb-cark-hist-item-status {
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.otb-cark-hist-status--onay { background: rgba(52,211,153,0.14); color: #34d399; }
.otb-cark-hist-status--red  { background: rgba(239,68,68,0.15);  color: #f87171; }

/* ── Win Modal ── */
.otb-cark-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.otb-cark-modal--open { opacity: 1; pointer-events: auto; }
.otb-cark-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,4,8,0.76);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.otb-cark-modal-box {
    position: relative;
    z-index: 1;
    background:
        radial-gradient(ellipse 120% 70% at 50% -10%,
            color-mix(in srgb, var(--cark-hub, #c0272d) 22%, transparent), transparent 70%),
        var(--cark-modal-bg, #12152a);
    border: 1px solid color-mix(in srgb, var(--cark-hub, #c0272d) 42%, transparent);
    border-radius: 26px;
    padding: 46px 34px 38px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 30px 90px rgba(0,0,0,0.78),
        0 0 50px color-mix(in srgb, var(--cark-hub, #c0272d) 22%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.08);
    animation: cark-modal-in 0.4s var(--otb-ease) both;
    overflow: hidden;
}
@keyframes cark-modal-in {
    from { transform: scale(0.86) translateY(18px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
.otb-cark-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.otb-cark-modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.otb-cark-modal-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.otb-spark {
    position: absolute;
    top: -10px;
    border-radius: 50%;
    animation: cark-spark-fall linear both;
}
@keyframes cark-spark-fall {
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(420px) rotate(720deg); opacity: 0; }
}
.otb-cark-modal-trophy {
    position: relative;
    z-index: 2;
    font-size: 58px;
    line-height: 1;
    margin-bottom: 14px;
    display: block;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
    animation: cark-trophy-bounce 0.65s var(--otb-ease) 0.1s both;
}
@keyframes cark-trophy-bounce {
    0%   { transform: scale(0) rotate(-18deg); }
    70%  { transform: scale(1.16) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}
.otb-cark-modal-heading {
    position: relative;
    z-index: 2;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 10px;
    background: linear-gradient(140deg, #fff 30%, var(--cark-border, var(--otb-gold, #d4a843)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.otb-cark-modal-prize {
    position: relative;
    z-index: 2;
    font-size: 15.5px;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    margin: 0 0 26px;
}
.otb-cark-modal--error .otb-cark-modal-trophy { font-size: 44px; }
.otb-cark-modal-ok {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--cark-hub, #c0272d) 55%, transparent);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--cark-hub, #c0272d) 78%, #fff) 0%,
        var(--cark-hub, #c0272d) 46%,
        color-mix(in srgb, var(--cark-hub, #c0272d) 50%, #000) 100%);
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 10px 28px color-mix(in srgb, var(--cark-hub, #c0272d) 42%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.22);
    transition: transform 0.2s, box-shadow 0.2s;
}
.otb-cark-modal-ok:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 36px color-mix(in srgb, var(--cark-hub, #c0272d) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.26);
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .otb-cark-page { padding: 14px 14px 64px; }
    .otb-cark-hdr { margin-bottom: 22px; }
    .otb-cark-hdr-badge { width: 52px; height: 52px; border-radius: 18px; font-size: 21px; margin-bottom: 13px; }
    .otb-cark-main { flex-direction: column; align-items: center; gap: 26px; }
    .otb-cark-sidebar { width: 100%; max-width: 480px; flex: 0 0 auto; }
    .otb-cark-frame { width: min(440px, 92vw); }
    .otb-cark-ptr { width: 30px; height: 48px; top: -7px; }
    .otb-cark-prizes-section { margin-top: 34px; padding-top: 26px; }
}

@media (max-width: 500px) {
    .otb-cark-wheel-zone { padding: 8px; }
    .otb-cark-frame { width: min(320px, 88vw); }
    .otb-cark-ptr { width: 25px; height: 40px; top: -5px; }
    .otb-cark-ptr::after { top: 6px; width: 6px; height: 6px; }
    .otb-cark-counter-card { padding: 20px 16px 15px; border-radius: 20px; }
    .otb-cark-counter-num { font-size: 52px; min-height: 56px; }
    .otb-cark-btn { font-size: 16px; padding: 16px 20px; border-radius: 16px; }
    .otb-cark-modal-box { padding: 38px 22px 30px; border-radius: 22px; }
    .otb-cark-modal-heading { font-size: 22px; }
    .otb-cark-modal-prize { font-size: 14.5px; }
    .otb-cark-prize-chip { padding: 8px 13px; font-size: 11.5px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    .otb-cark-hdr-badge,
    .otb-cark-hdr-badge i,
    .otb-cark-wheel-zone::before,
    .otb-cark-glow-ring,
    .otb-cark-ptr,
    .otb-cark-btn--ready::after,
    .otb-cark-btn--ready .otb-cark-btn-pulse,
    .otb-cark-btn--ready .otb-cark-btn-content i {
        animation: none !important;
    }
}

/* ===================================================================
   BİLET / ÇEKİLİŞ SİSTEMİ — Premium UI v2
   Inline <style> in index.php is the primary source.
   This block kept in sync as fallback.
   =================================================================== */

.bt-wrap { padding: 20px 0 32px; max-width: 520px; margin: 0 auto; }
.bt-hero { position: relative; text-align: center; padding: 40px 24px 36px; background: linear-gradient(170deg,rgba(232,168,56,.10) 0%,transparent 50%); border-radius: 20px; margin: 0 0 16px; border: 1px solid rgba(232,168,56,.08); overflow: hidden; }
.bt-hero-glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 400px; height: 200px; background: radial-gradient(ellipse,rgba(232,168,56,.12),transparent 70%); pointer-events: none; }
.bt-hero-icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; background: linear-gradient(135deg,#e8a838,#d4922c); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #000; box-shadow: 0 8px 24px rgba(232,168,56,.3),0 0 0 4px rgba(232,168,56,.08); }
.bt-hero-title { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: .2px; }
.bt-hero-badges { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.bt-badge-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 8px; font-size: 10px; font-weight: 700; letter-spacing: .5px; background: rgba(232,168,56,.08); color: #e8a838; border: 1px solid rgba(232,168,56,.15); text-transform: uppercase; }
.bt-badge-pill--ok { background: rgba(34,197,94,.08); color: #4ade80; border-color: rgba(34,197,94,.2); }
.bt-badge-pill--win { background: rgba(232,168,56,.1); font-family: 'Courier New',monospace; font-size: 12px; letter-spacing: 2px; }
.bt-cd { display: flex; justify-content: center; align-items: center; gap: 8px; }
.bt-cd-box { display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,.5); border: 1px solid rgba(232,168,56,.12); border-radius: 14px; padding: 12px 8px 10px; min-width: 64px; backdrop-filter: blur(8px); }
.bt-cd-num { font-family: 'Courier New',monospace; font-size: 28px; font-weight: 900; color: #e8a838; line-height: 1; text-shadow: 0 0 20px rgba(232,168,56,.3); }
.bt-cd-lbl { font-size: 8px; font-weight: 700; color: rgba(255,255,255,.3); letter-spacing: 1.5px; margin-top: 6px; text-transform: uppercase; }
.bt-cd-sep { font-size: 20px; font-weight: 800; color: rgba(232,168,56,.25); padding-bottom: 14px; }
.bt-card { margin: 0 0 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; overflow: hidden; transition: border-color .2s; }
.bt-card:hover { border-color: rgba(255,255,255,.1); }
.bt-card-head { display: flex; align-items: center; gap: 8px; padding: 13px 18px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.04); background: rgba(255,255,255,.015); }
.bt-card-head i { color: #e8a838; font-size: 14px; }
.bt-card-body { padding: 14px 18px; }
.bt-card-body--flush { padding: 0; }
.bt-badge { margin-left: auto; background: linear-gradient(135deg,#e8a838,#d4922c); color: #000; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 8px; min-width: 20px; text-align: center; }
.bt-prize { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.bt-prize:last-child { border-bottom: none; }
.bt-prize-rank { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bt-prize-info { flex: 1; min-width: 0; }
.bt-prize-label { font-weight: 600; color: rgba(255,255,255,.85); font-size: 13px; }
.bt-prize-meta { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 3px; }
.bt-prize-val { font-weight: 900; color: #e8a838; font-size: 17px; white-space: nowrap; }
.bt-prize-val small { font-size: 12px; font-weight: 600; margin-left: 2px; opacity: .7; }
.bt-dep { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); gap: 12px; }
.bt-dep:last-child { border-bottom: none; }
.bt-dep-left { min-width: 0; }
.bt-dep-amount { font-weight: 700; color: #fff; font-size: 14px; }
.bt-dep-sub { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 3px; }
.bt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 20px; border-radius: 12px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s ease; white-space: nowrap; text-decoration: none; }
.bt-btn--primary { background: linear-gradient(135deg,#e8a838,#d4922c); color: #000; box-shadow: 0 4px 16px rgba(232,168,56,.25); }
.bt-btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,168,56,.35); }
.bt-btn--gold { background: linear-gradient(135deg,#ffd966,#e8a838); color: #000; box-shadow: 0 4px 16px rgba(255,217,102,.2); }
.bt-btn--gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bt-btn--full { width: 100%; }
.bt-btn--lg { padding: 14px 24px; font-size: 15px; border-radius: 14px; }
.bt-btn b { font-weight: 800; }
.bt-tickets { display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 8px; }
.bt-tk { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px 8px 12px; text-align: center; transition: all .2s; position: relative; }
.bt-tk:hover { border-color: rgba(232,168,56,.2); background: rgba(255,255,255,.04); }
.bt-tk--won { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.18); }
.bt-tk--lost { background: rgba(239,68,68,.03); border-color: rgba(239,68,68,.1); opacity: .5; }
.bt-tk-num { font-family: 'Courier New',monospace; font-size: 16px; font-weight: 900; color: #e8a838; letter-spacing: 2px; margin-bottom: 5px; }
.bt-tk--won .bt-tk-num { color: #4ade80; }
.bt-tk--lost .bt-tk-num { color: rgba(255,255,255,.2); }
.bt-tk-status { font-size: 10px; color: rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; gap: 4px; }
.bt-tk--won .bt-tk-status { color: #4ade80; }
.bt-tk--lost .bt-tk-status { color: #f87171; }
.bt-tk-win { font-size: 10px; color: #4ade80; font-weight: 700; margin-top: 4px; }
.bt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 16px; gap: 10px; color: rgba(255,255,255,.15); }
.bt-empty i { font-size: 30px; }
.bt-empty span { font-size: 12px; letter-spacing: .3px; }
.bt-lb-head { display: grid; grid-template-columns: 40px 1fr auto; padding: 10px 18px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.05); }
.bt-lb-row { display: grid; grid-template-columns: 40px 1fr auto; padding: 12px 18px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.03); transition: background .2s; }
.bt-lb-row:last-child { border-bottom: none; }
.bt-lb-row:hover { background: rgba(255,255,255,.02); }
.bt-lb-rank { font-weight: 800; color: rgba(255,255,255,.35); font-size: 13px; }
.bt-lb--top1 .bt-lb-rank { color: #ffd700; font-size: 17px; }
.bt-lb--top2 .bt-lb-rank { color: #c0c0c0; font-size: 15px; }
.bt-lb--top3 .bt-lb-rank { color: #cd7f32; font-size: 15px; }
.bt-lb-name { color: rgba(255,255,255,.55); font-size: 13px; font-weight: 500; }
.bt-lb--top1 .bt-lb-name { color: #ffd700; font-weight: 700; }
.bt-lb--top2 .bt-lb-name { color: #e0e0e0; font-weight: 600; }
.bt-lb--top3 .bt-lb-name { color: #e8b878; font-weight: 600; }
.bt-lb-count { font-weight: 800; color: #e8a838; font-size: 14px; min-width: 30px; text-align: right; }
#biletRulesText { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.8; }
.bt-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10010; display: flex; align-items: center; justify-content: center; padding: 16px; animation: bt-fade .2s ease; }
@keyframes bt-fade { from{opacity:0} to{opacity:1} }
.bt-modal { background: linear-gradient(160deg,#1e1e2a 0%,#16161d 100%); border: 1px solid rgba(232,168,56,.15); border-radius: 20px; padding: 32px 24px 28px; width: 100%; max-width: 380px; position: relative; box-shadow: 0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.2) inset; animation: bt-slide .3s cubic-bezier(.16,1,.3,1); }
@keyframes bt-slide { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.bt-modal-x { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); font-size: 13px; cursor: pointer; transition: all .2s; }
.bt-modal-x:hover { background: rgba(255,255,255,.1); color: #fff; }
.bt-modal-icon { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; background: linear-gradient(135deg,#e8a838,#d4922c); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #000; box-shadow: 0 6px 20px rgba(232,168,56,.25); }
.bt-modal-title { text-align: center; font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.bt-modal-sub { text-align: center; font-size: 12px; color: rgba(255,255,255,.4); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.bt-modal-sub span { color: #e8a838; font-weight: 700; }
.bt-modal-or { text-align: center; margin: 14px 0; position: relative; color: rgba(255,255,255,.18); font-size: 11px; }
.bt-modal-or::before,.bt-modal-or::after { content: ''; position: absolute; top: 50%; width: calc(50% - 45px); height: 1px; background: rgba(255,255,255,.06); }
.bt-modal-or::before { left: 0; }
.bt-modal-or::after { right: 0; }
.bt-modal-or span { background: #1a1a24; padding: 0 10px; position: relative; }
.bt-numara-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bt-numara-input { flex: 1; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; font-family: 'Courier New',monospace; font-size: 24px; font-weight: 900; color: #e8a838; text-align: center; letter-spacing: 8px; outline: none; transition: border-color .2s; }
.bt-numara-input::placeholder { color: rgba(255,255,255,.1); }
.bt-numara-input:focus { border-color: rgba(232,168,56,.4); box-shadow: 0 0 0 3px rgba(232,168,56,.08); }
.bt-numara-check { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.bt-modal-msg { text-align: center; font-size: 12px; margin-top: 16px; min-height: 22px; }
.bt-modal--wide { max-width: 460px; }
.bt-mytickets-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 12px; padding: 16px 20px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; cursor: pointer; transition: all .2s; color: #fff; -webkit-appearance: none; appearance: none; }
.bt-mytickets-btn:hover { border-color: rgba(232,168,56,.2); background: rgba(255,255,255,.04); }
.bt-mytickets-btn:active { transform: scale(.99); }
.bt-mytickets-btn-left { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.8); }
.bt-mytickets-btn-left i { color: #e8a838; font-size: 15px; }
.bt-mytickets-btn-right { display: flex; align-items: center; gap: 10px; }
.bt-mytickets-btn-right i { color: rgba(255,255,255,.25); font-size: 11px; transition: transform .2s; }
.bt-mytickets-btn:hover .bt-mytickets-btn-right i { transform: translateX(2px); color: rgba(255,255,255,.4); }
.bt-mytickets-count { background: linear-gradient(135deg,#e8a838,#d4922c); color: #000; font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 10px; min-width: 28px; text-align: center; box-shadow: 0 2px 8px rgba(232,168,56,.2); }
@media (max-width: 560px) {
    .bt-wrap { padding: 14px 12px 24px; }
    .bt-hero { padding: 32px 18px 28px; border-radius: 16px; }
    .bt-hero-icon { width: 46px; height: 46px; font-size: 18px; border-radius: 14px; }
    .bt-hero-title { font-size: 16px; }
    .bt-cd-box { min-width: 56px; padding: 10px 6px 8px; border-radius: 12px; }
    .bt-cd-num { font-size: 24px; }
    .bt-cd-sep { font-size: 16px; }
    .bt-card { border-radius: 14px; margin: 0 0 10px; }
    .bt-card-head { padding: 12px 14px; font-size: 12px; }
    .bt-card-body { padding: 12px 14px; }
    .bt-tickets { grid-template-columns: repeat(auto-fill,minmax(90px,1fr)); gap: 6px; }
    .bt-modal { padding: 24px 18px 22px; max-width: 92vw; border-radius: 16px; }
    .bt-numara-input { font-size: 20px; letter-spacing: 5px; padding: 10px; }
    .bt-dep { flex-direction: column; align-items: stretch; padding: 12px 14px; }
    .bt-dep .bt-btn { width: 100%; }
    .bt-lb-head,.bt-lb-row { padding: 10px 14px; }
}

/* ════════════════════════════════════════════════════════════
   ETKİNLİK SİSTEMİ — etk- prefix
   ════════════════════════════════════════════════════════════ */

/* Kapsayıcı */
.etk-wrap {
    padding: 16px 14px 24px;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Kart ─────────────────────────────────────────────────── */
.etk-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.etk-card {
    background: var(--etk-card-bg, #1c1c2a);
    border: 1px solid var(--etk-card-border, #2a2a3a);
    border-radius: 16px;
    overflow: hidden;
}

.etk-card-img {
    width: 100%;
    max-height: 180px;
    overflow: hidden;
}
.etk-card-img img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.etk-card-body {
    padding: 16px;
}

.etk-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--etk-text, #fff);
    margin: 0 0 8px;
    line-height: 1.35;
}

.etk-card-desc {
    font-size: 13px;
    color: var(--etk-text-muted, rgba(255,255,255,.55));
    margin: 0 0 12px;
    line-height: 1.5;
}

/* ── Meta chips ────────────────────────────────────────────── */
.etk-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.etk-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255,255,255,.1);
    color: var(--etk-text-muted, rgba(255,255,255,.75));
}

.etk-meta-chip--gold {
    background: color-mix(in srgb, var(--etk-accent, #ffc700) 15%, transparent);
    color: var(--etk-accent, #ffc700);
}

.etk-soru-count {
    font-size: 12px;
    color: var(--etk-text-muted, rgba(255,255,255,.4));
    margin-bottom: 14px;
}

/* ── Butonlar ──────────────────────────────────────────────── */
.etk-katil-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--etk-btn-bg, #ffc700), var(--etk-accent-dark, #ff9900));
    color: var(--etk-btn-text, #1a1a1a);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
}
.etk-katil-btn:hover { opacity: .88; }

.etk-katilindi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--etk-correct, #50cd89) 12%, transparent);
    color: var(--etk-correct, #50cd89);
    font-size: 14px;
    font-weight: 600;
}

.etk-gecmis-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border: 1px solid var(--etk-card-border, rgba(255,255,255,.18));
    border-radius: 20px;
    background: transparent;
    color: var(--etk-text-muted, rgba(255,255,255,.6));
    font-size: 13px;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.etk-gecmis-btn:hover {
    border-color: var(--etk-accent, #ffc700);
    color: var(--etk-accent, #ffc700);
}

/* ── Durum badge ── */
.etk-durum-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.etk-durum--active   { background: rgba(80,205,137,.15); color: #50cd89; }
.etk-durum--expired  { background: rgba(241,65,108,.12); color: #f1416c; }
.etk-durum--finalized{ background: rgba(255,199,0,.15);  color: var(--etk-accent, #ffc700); }

/* Katılım süresi doldu mesajı */
.etk-katilim-kapali {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 0 4px;
    font-size: 13px;
    color: rgba(241,65,108,.7);
    font-weight: 600;
}

/* Sonuçlarımı Gör butonu */
.etk-sonuc-btn {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    margin-top: 14px;
    background: linear-gradient(135deg, #50cd89, #17b26a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: opacity .2s;
}
.etk-sonuc-btn:hover { opacity: .88; }

/* Sonuç modalı — cevap satırları */
.etk-sonuc-item {
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-left: 3px solid transparent;
}
.etk-sonuc-dogru  { background: rgba(80,205,137,.1);  border-left-color: #50cd89; }
.etk-sonuc-yanlis { background: rgba(241,65,108,.1);  border-left-color: #f1416c; }
.etk-sonuc-bekliyor{ background: rgba(255,255,255,.05); border-left-color: rgba(255,255,255,.2); }
.etk-sonuc-soru   { font-size: 12px; color: var(--etk-text-muted, #8a8a9a); margin-bottom: 5px; }
.etk-sonuc-cevap  { font-size: 14px; color: var(--etk-text, #fff); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.etk-sonuc-dogru-cevap { width: 100%; margin-top: 5px; font-size: 12px; color: #50cd89; }

/* ── Modal overlay ─────────────────────────────────────────── */
.etk-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.etk-modal {
    position: relative;
    background: var(--etk-modal-bg, #1c1c2a);
    border-radius: 20px;
    padding: 28px 22px 24px;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    border: 1px solid var(--etk-card-border, rgba(255,255,255,.08));
}

.etk-modal-x {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--etk-text, #fff);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.etk-modal-x:hover { background: rgba(255,255,255,.2); }

.etk-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--etk-text, #fff);
    margin: 0 0 8px;
    padding-right: 32px;
}

.etk-modal-desc {
    font-size: 13px;
    color: var(--etk-text-muted, rgba(255,255,255,.5));
    margin-bottom: 18px;
    line-height: 1.5;
}

/* ── Soru blokları ─────────────────────────────────────────── */
.etk-soru-block {
    margin-bottom: 20px;
}

.etk-soru-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--etk-text, #fff);
    margin-bottom: 10px;
    line-height: 1.4;
}

.etk-soru-img {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
    display: block;
}

.etk-secenekler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.etk-secenek {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.etk-secenek-radio {
    display: none;
}

.etk-secenek-text {
    display: block;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--etk-card-border, rgba(255,255,255,.18));
    font-size: 13px;
    font-weight: 500;
    color: color-mix(in srgb, var(--etk-text, #fff) 80%, transparent);
    background: color-mix(in srgb, var(--etk-card-bg, #1c1c2a) 100%, #fff 5%);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.etk-secenek input:checked ~ .etk-secenek-text,
.etk-secenek-text:hover {
    border-color: var(--etk-accent, #ffc700);
    background: color-mix(in srgb, var(--etk-accent, #ffc700) 12%, transparent);
    color: var(--etk-accent, #ffc700);
}

.etk-serbest-input {
    width: 100%;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--etk-card-bg, #1c1c2a) 100%, #fff 7%);
    border: 1.5px solid var(--etk-card-border, rgba(255,255,255,.15));
    border-radius: 10px;
    color: var(--etk-text, #fff);
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.etk-serbest-input:focus { border-color: var(--etk-accent, #ffc700); }

.etk-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    margin-top: 8px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--etk-btn-bg, #ffc700), var(--etk-accent-dark, #ff9900));
    color: var(--etk-btn-text, #1a1a1a);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
}
.etk-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Geçmiş ────────────────────────────────────────────────── */
.etk-gecmis-item {
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--etk-card-border, #2a2a3a) 100%, transparent);
}
.etk-gecmis-item:last-child { border-bottom: none; }

.etk-gecmis-adi {
    font-size: 14px;
    font-weight: 600;
    color: var(--etk-text, #fff);
    margin-bottom: 4px;
}

.etk-gecmis-tarih {
    font-size: 11px;
    color: var(--etk-text-muted, rgba(255,255,255,.35));
    margin-bottom: 8px;
}

.etk-gecmis-cevap {
    font-size: 12px;
    color: var(--etk-text-muted, rgba(255,255,255,.55));
    margin-bottom: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--etk-card-bg, #1c1c2a) 100%, #fff 4%);
}
.etk-gecmis-cevap.etk-cevap--dogru {
    background: color-mix(in srgb, var(--etk-correct, #50cd89) 10%, transparent);
    color: var(--etk-correct, #50cd89);
}
.etk-gecmis-cevap.etk-cevap--yanlis {
    background: color-mix(in srgb, var(--etk-wrong, #f1416c) 8%, transparent);
    color: color-mix(in srgb, var(--etk-wrong, #f1416c) 80%, transparent);
}

.etk-gecmis-soru { font-weight: 600; }
.etk-dogru-cevap { color: var(--etk-correct, #50cd89); font-size: 11px; margin-left: 4px; }

.etk-odullendi {
    margin-top: 8px;
    font-size: 12px;
    color: var(--etk-accent, #ffc700);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Mobil ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .etk-wrap { padding: 12px 10px 20px; }
    .etk-modal { padding: 22px 16px 20px; }
    .etk-card-title { font-size: 14.5px; }
    .etk-secenek-text { padding: 8px 12px; font-size: 12px; }
}

/* ── Bonus kartı: otomatik şartlar ve ön kontrol (Plan v2 P3) ───────────── */
.otobonus-app .otb-sartlar {
    list-style: none;
    margin: -2px 10px 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.otobonus-app .otb-sartlar li {
    font-size: 10.5px;
    line-height: 1.3;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}
.otobonus-app .otb-sartlar li.otb-sart-daha { color: rgba(255, 255, 255, 0.5); }
.otobonus-app .otb-uygunluk {
    margin: 0 10px 8px;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    border-radius: 8px;
    padding: 4px 8px;
}
.otobonus-app .otb-uygunluk.otb-uygun   { background: rgba(47, 163, 107, 0.16); color: #7ee2ae; }
.otobonus-app .otb-uygunluk.otb-uygun-degil { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.6); }
.otobonus-app .otb-uygunluk .fa { margin-right: 4px; }