@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary: 245, 158, 11;
    --secondary: 56, 189, 248;
    --secondary-on: #0b0f1a;
    --bg-color: #0a0a0a;
    --card-bg: #161616;
    --sponsor-card-bg: #161616;
    --text-primary: #f8fafc;
    --text-secondary: #9ca3af;
    --accent: #f59e0b;
    --accent-hover: #d97706;
    --gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --font-main: 'Outfit', system-ui, -apple-system, sans-serif;
    --layout-max-width: 1300px;
    --layout-padding-x: 2rem;
    --topbar-height: 100px;
    --topbar-main-height: 58px;
    --topbar-sub-height: 40px;
    --desktop-sidebar-width: 250px;
    --desktop-sidebar-collapsed-width: 60px;
    --layout-sidebar-offset: 0px;

    /* Marka turuncu/altin + koyu yuzeyler */
    --brand-red: #f59e0b;
    --brand-red-hover: #fbbf24;
    --brand-red-dark: #b45309;
    --brand-red-mid: #f59e0b;
    --brand-red-soft: #fcd34d;
    --brand-red-pale: #fef3c7;
    --surface-900: #050505;
    --surface-800: #111111;
    --surface-700: #1c1c1c;
    --surface-600: #2a2a2a;
    --text-on-dark: #f1f5f9;
    --text-light: #ffffff;
    --text-on-accent: #000000;
    --text-gray: #6b7280;
    --text-muted: #8a9aa6;
    --section-title-color: #5f6b78;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-soft: rgba(255, 255, 255, 0.1);
}

.section-title,
.social-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-on-dark, #f1f5f9);
    text-transform: none;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.section-title__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--primary), 0.1);
    border: 1px solid rgba(var(--primary), 0.2);
    color: var(--brand-red, #f59e0b);
    font-size: 16px;
    line-height: 1;
}

.section-title__label {
    min-width: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color, #0a0a0a);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    padding-top: var(--topbar-height);
}

/*
 * iOS Safari: input/textarea/select font-size < 16px ise odaklanınca sayfayı zoomlar.
 * Mobilde form kontrollerini 16px yaparak otomatik zoom'u engelle.
 */
@media (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
    textarea,
    select,
    .select2-container .select2-selection,
    .select2-container .select2-search__field,
    [contenteditable="true"] {
        font-size: 16px !important;
    }
}

/* Tüm site genel scroll stili (koyu tema) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-700);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-red);
}

/* Sadece ana sayfa (body/html) scrollbar'ı topbar altında başlasın */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: var(--surface-800); /* Topbar arka plan rengi */
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    margin-top: var(--topbar-height);
    background: var(--bg-color);
}

main {
    max-width: var(--layout-max-width);
    margin: 1rem auto;
    padding: 0;
}

/* Sol / sağ sticky banner (yalnızca masaüstü) */
.site-main-shell {
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.site-main-shell > main#pjax-container {
    max-width: none;
    width: 100%;
    margin: 1rem 0;
    min-width: 0;
}

.side-banner-rail {
    display: none;
}

/* Yan banner 150×750 (1:5). Sabit (fixed) üst bar --topbar-height kadar yer kaplar (JS ölçer);
   banner onun ALTINDA yapışır ve ekran alçaksa oranını koruyarak küçülür, böylece
   ne üst barın altına girer ne de altta kırpılır. */
.side-banner-rail {
    --rail-h: min(750px, max(260px, calc(100vh - var(--topbar-height, 100px) - 28px)));
    --rail-w: calc(var(--rail-h) / 5);
}

.side-banner-sticky {
    position: sticky;
    /* Viewport ortası, ama üst barın (+12px) altına asla girmez */
    top: max(calc(var(--topbar-height, 100px) + 12px), calc((100vh - var(--rail-h)) / 2));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: var(--rail-w);
    margin-inline: auto;
}

.side-banner-link {
    display: block;
    width: var(--rail-w);
    height: var(--rail-h);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
    background: var(--surface-800, #111);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.side-banner-link:hover {
    border-color: rgba(var(--primary), 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.side-banner-link img {
    width: var(--rail-w);
    height: var(--rail-h);
    object-fit: cover;
    display: block;
}

/* Yan bannerlar içerik sütununu daraltmaz: yalnızca iki yanda 150px + boşluk sığdığında dış boşlukta durur,
   daha dar ekranda gizlenir (ana içerik her zaman tam 1310px sütun kalır). */
.site-main-shell.has-side-banners {
    position: relative;
}

/* Raylar, içeriğin 20px'lik yan boşluğuna (--content-gutter) 12px girecek şekilde konumlanır
   (içerikle arada 8px nefes payı).

   Menü açık/kapalı fark etmeden HEP görünür: dış boşluk yetmezse içerik sütunu (--layout-max-width,
   dolayısıyla üst bar, footer ve sayfa kapsayıcıları da aynı değerle) rayların payı kadar daralır.
   Geniş ekranda (boşluk yeterliyse) min() 1300px'te kalır → hiçbir şey değişmez.
   Pay: 2×(150px ray + 8px boşluk) = 316px + 17px scrollbar güvenliği = 333px.
   Rayın hiç açılmadığı çok dar ekranlarda içerik ~860px altına inmesin diye eşikler:
   - sol menü açık  (250px) : 1440px
   - sol menü kapalı (60px) : 1260px
   - sol menü yok           : 1200px */
@media (min-width: 1440px) {
    .site-main-shell.has-side-banners .side-banner-rail {
        display: block;
    }

    html.has-side-banners body {
        --layout-max-width: min(1300px, calc(100vw - var(--layout-sidebar-offset) - 333px));
    }
}

@media (min-width: 1260px) {
    html.sidebar-collapsed body.sidebar-pos-sol .site-main-shell.has-side-banners .side-banner-rail,
    body.sidebar-pos-sol.sidebar-collapsed .site-main-shell.has-side-banners .side-banner-rail {
        display: block;
    }

    html.has-side-banners.sidebar-collapsed body.sidebar-pos-sol,
    html.has-side-banners body.sidebar-pos-sol.sidebar-collapsed {
        --layout-max-width: min(1300px, calc(100vw - var(--layout-sidebar-offset) - 333px));
    }
}

@media (min-width: 1200px) {
    body:not(.sidebar-pos-sol) .site-main-shell.has-side-banners .side-banner-rail {
        display: block;
    }

    html.has-side-banners body:not(.sidebar-pos-sol) {
        --layout-max-width: min(1300px, calc(100vw - 333px));
    }
}

/* Sol menülü düzende kabuk = içerik + 2×gutter; daralan --layout-max-width'e uyar */
@media (min-width: 1025px) {
    body.sidebar-pos-sol .site-main-shell.has-side-banners {
        max-width: min(calc(1310px + 2 * var(--content-gutter, 20px)), calc(var(--layout-max-width) + 50px));
    }
}

@media (min-width: 1200px) {
    .site-main-shell.has-side-banners .side-banner-rail {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 150px;
        padding-top: 1rem;
        padding-bottom: 1rem;
        box-sizing: border-box;
    }

    .site-main-shell.has-side-banners .side-banner-rail--left {
        right: calc(100% - var(--content-gutter, 0px));
        margin-right: 8px;
    }

    .site-main-shell.has-side-banners .side-banner-rail--right {
        left: calc(100% - var(--content-gutter, 0px));
        margin-left: 8px;
    }
}

/* Sol menü genişliği tek bir animasyonlu değerden sürülür. Sidebar genişliği, içeriğin sol boşluğu,
   üst bar alt satırı ve hızlı bağlantı çubuğu bu değişkene bağlı; değişken kare kare animasyonlandığı
   için hepsi AYNI anda ve aynı eğriyle hareket eder (eskiden her biri ayrı geçişteydi, header
   bağlantıları ise hiç geçişsiz tek karede zıplıyordu). Desteklemeyen tarayıcıda geçiş anlık olur. */
@property --layout-sidebar-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

@media (min-width: 1025px) {
    body.sidebar-pos-sol {
        --layout-sidebar-offset: var(--desktop-sidebar-width);
        padding-left: var(--layout-sidebar-offset);
    }

    html.sidebar-collapsed body.sidebar-pos-sol,
    body.sidebar-pos-sol.sidebar-collapsed {
        --layout-sidebar-offset: var(--desktop-sidebar-collapsed-width);
    }

    body.sidebar-pos-sol.sidebar-transitions {
        transition: --layout-sidebar-offset 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sidebar-pos-sol.sidebar-transitions {
        transition: none;
    }
}

/* Anasayfa bölümleri — main ile aynı genişlik (ek max-width / yatay padding yok) */
main .social-section,
main .qa-section,
main .events-section,
main .tickets-section,
main .games-section,
main .winners-section,
main .sizden-gelenler-section,
main .social-points-section,
main .bonuses-story-section,
main .live-matches-section,
main .main-slider {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.hero {
    text-align: center;
    padding: 6rem 0;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
}

.hero p {
    color: var(--text-secondary);
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.btn {
    background: var(--gradient);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease;
    display: inline-block;
}

.btn:hover {
    transform: translateY(-2px);
}

footer {
    padding: 4rem 2rem;
    text-align: center;
    border-top: 1px solid var(--surface-700);
    color: var(--text-secondary);
}

@media (max-width: 1024px) {
    main {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 0 auto;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-x: clip; /* kaydırma kabı oluşturmaz: dokunmatik dikey kaydırma iç içe kapta takılmasın */
        padding: 12px 12px calc(var(--mobile-nav-height, 64px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    main .section-title,
    main .social-section-header {
        margin-bottom: 14px;
    }

    main .social-section-header .social-section-title {
        margin-bottom: 0;
    }

    main .main-slider,
    main .social-section,
    main .qa-section,
    main .quick-links-section,
    main .tickets-section,
    main .games-section,
    main .winners-section,
    main .sizden-gelenler-section,
    main .events-section,
    main .social-points-section,
    main .bonuses-story-section,
    main .live-matches-section {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

#pjax-container {
    transition: opacity 0.3s ease;
}

@keyframes globalPageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-page-wrapper {
    animation: globalPageFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* PJAX soft-nav: CSS globalPageFadeIn'i kapat, tek animasyon .pjax-animate olsun
   (çift F5 hissi olmasın). .pjax-animate eklenince aşağıdaki kural devreye girer. */
html.pjax-active .auth-page-wrapper,
html.pjax-active .profile-page-wrapper,
html.pjax-active .policy-wrapper {
    animation: none;
}

html.pjax-active .auth-page-wrapper.pjax-animate,
html.pjax-active .profile-page-wrapper.pjax-animate,
html.pjax-active .policy-wrapper.pjax-animate {
    animation: pjax-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Quill Editor Frontend Output Styles */
.ql-editor ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 10px;
}
.ql-editor ol {
    list-style-type: decimal;
    padding-left: 20px;
    margin-bottom: 10px;
}
.ql-editor li {
    margin-bottom: 5px;
}
.ql-editor p {
    margin-bottom: 10px;
}
.ql-editor strong {
    font-weight: bold;
}
.ql-editor em {
    font-style: italic;
}

.icon-sm {
    font-size: 0.7rem;
}

.search-btn-size {
    height: 38px;
    width: 38px;
}

.notif-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--brand-red, #f59e0b);
    color: var(--text-on-accent, #000);
    font-size: 10px;
    font-weight: 800;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface-800, #0a0a0a);
    pointer-events: none;
}

.flex-center-align {
    display: flex;
    align-items: center;
}

.ud-notif-badge {
    background: var(--brand-red, #f59e0b);
    color: var(--text-on-accent, #000);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
}

.sidebar-btn--register {
    color: var(--text-on-accent, #000) !important;
    font-weight: 800;
}


.sg-nav-btn-inline {
    width: auto !important;
    padding: 0 12px !important;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    gap: 4px;
    white-space: nowrap;
}

.icon-14 {
    font-size: 14px;
}

.flex-center-gap {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.empty-state-text {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-gray);
    padding: 2rem;
}

/* Ortak boş sayfa / boş liste durumu */
.page-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    width: 100%;
    min-height: 220px;
    box-sizing: border-box;
    color: var(--text-secondary, #9ca3af);
    background: color-mix(in srgb, var(--surface-800, #111) 40%, transparent);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.page-empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--primary), 0.18);
}

.page-empty-state__icon i {
    font-size: 26px;
    color: var(--brand-red, #f59e0b);
    line-height: 1;
}

.page-empty-state h3 {
    margin: 0;
    letter-spacing: -0.01em;
}

.page-empty-state p {
    margin: 0;
    max-width: 380px;
    line-height: 1.55;
}

.flex-center-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.social-btn-disabled {
    background: rgba(255,255,255,0.05);
    color: var(--text-gray);
    cursor: not-allowed;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.social-btn-inline {
    text-decoration: none;
    text-align: center;
}


/* Zemin (varsayılan): ince nokta ızgarası + alttan ana renk halesi. Renkler tema değişkenlerinden. */
body {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(var(--stroke-rgb, 140, 200, 255), 0.055) 1px, transparent 1.4px),
        radial-gradient(1200px 700px at 50% 120%, rgba(var(--primary), 0.07), transparent 60%);
    background-size: 26px 26px, auto;
    background-attachment: fixed, fixed;
    background-repeat: repeat, no-repeat;
}

/* Zemin (yönetimden "Arka plan logo deseni" açıkken): iki köşede ana renk halesi + canlı site logosu deseni.
   Desen body::before'da, yönetimdeki GÜNCEL site_logo'dan çizilir (sabit PNG yok → logo değişince desen de değişir).
   Logo kendi renkleriyle (dolu/renkli logolar silüete çevrilince seçilmiyordu), dama dizilimiyle (maske) aralıklı döşenir. Değişkenleri header.php'deki script koyar:
   --bg-logo-url (logo), --bg-logo-ratio (yükseklik/genişlik); hazır olunca body.bg-logo-ready eklenir. */
body.bg-logo-on {
    background-image:
        radial-gradient(1100px 560px at 10% -12%, rgba(var(--primary), 0.08), transparent 60%),
        radial-gradient(1200px 700px at 50% 120%, rgba(var(--primary), 0.07), transparent 60%);
    background-size: auto, auto;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    --bg-logo-w: 120px;
    --bg-logo-h: calc(var(--bg-logo-w) * var(--bg-logo-ratio, 0.4));
}

body.bg-logo-on::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background-image: var(--bg-logo-url, none);
    background-size: var(--bg-logo-w) var(--bg-logo-h);
    background-repeat: repeat;
    -webkit-mask: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 0 0 / calc(var(--bg-logo-w) * 2) calc(var(--bg-logo-h) * 2);
    mask: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 0 0 / calc(var(--bg-logo-w) * 2) calc(var(--bg-logo-h) * 2);
}

body.bg-logo-on.bg-logo-ready::before {
    opacity: 0.09;
}

@media (max-width: 640px) {
    body.bg-logo-on {
        --bg-logo-w: 84px;
    }
}

/* Masaüstü sol menülü düzen: içerik kenarlardan nefes alsın (~20px yan boşluk).
   Alt şerit (topbar-sub-inner) ve footer aynı değerle hizalanır. */
@media (min-width: 1025px) {
    body.sidebar-pos-sol {
        --content-gutter: 20px;
    }

    body.sidebar-pos-sol .site-main-shell {
        padding-left: var(--content-gutter);
        padding-right: var(--content-gutter);
        box-sizing: border-box;
    }

    body.sidebar-pos-sol .main-footer {
        padding-left: var(--content-gutter);
        padding-right: var(--content-gutter);
        box-sizing: border-box;
    }
}

/* içerik sütunu: 1310px + yan boşluk (eskiden 1300 - 2x20 = 1260 kalıyordu) */
@media (min-width: 1025px) {
    body.sidebar-pos-sol .site-main-shell {
        max-width: calc(1310px + 2 * var(--content-gutter, 20px));
    }
}

/* Mobil: iOS Safari, yazı boyutu 16px'ten küçük alanlara odaklanınca sayfayı yakınlaştırır ve geri küçültmez.
   Giriş alanlarını 16px yaparak yakınlaştırma tetiklenmez (pinch-zoom açık kalır: erişilebilirlik). */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    input,
    select,
    textarea,
    button,
    a {
        touch-action: manipulation;
    }
}