@import url('/__/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;
}

.side-banner-sticky {
    position: sticky;
    /* Viewport ortası — üste yapışmaz */
    top: max(12px, calc((100vh - 750px) / 2));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 150px;
    margin-inline: auto;
}

.side-banner-link {
    display: block;
    width: 150px;
    height: 750px;
    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: 150px;
    height: 750px;
    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). */
@media (min-width: 1960px) {
    .site-main-shell.has-side-banners {
        position: relative;
    }

    .site-main-shell.has-side-banners .side-banner-rail {
        display: block;
        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: 100%;
        margin-right: 12px;
    }

    .site-main-shell.has-side-banners .side-banner-rail--right {
        left: 100%;
        margin-left: 12px;
    }
}

/* 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 dokusu : 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;
}

/* 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;
    }
}