/* ═══════════════════════════════════════════════════════
   SBC Theme — Base CSS
   Reset + Global + Utilities
   ═══════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
p { margin: 0 0 1em; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── OVERFLOW GUARD — mobil yatay kaydırmayı engelle ─── */
/* body'ye overflow-x:clip uygula — dropdown menüler header'dan taştığı
   için #page/.site'a koymuyoruz */
body { overflow-x: clip; }
#page, .site { max-width: 100vw; }
.sbc-wrap { max-width: var(--sbc-max-w); overflow: hidden; }
/* Header wrap'ları overflow:visible olmalı — dropdown menüler taşar */
.sbc-header .sbc-wrap,
.sbc-nav .sbc-wrap { overflow: visible; }
/* Tablo ve pre gibi doğal taşabilecek elementler */
table { max-width: 100%; overflow-x: auto; display: block; }
pre { max-width: 100%; overflow-x: auto; }

/* ─── GLOBAL TYPOGRAPHY ─── */
body {
    font-family: var(--sbc-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sbc-black);
    background: var(--sbc-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sbc-font);
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1.15;
    color: var(--sbc-black);
}

/* ─── WRAP ─── */
.sbc-wrap {
    max-width: var(--sbc-max-w);
    margin: 0 auto;
    padding: 0 var(--sbc-gap);
}

/* ─── SECTION PATTERN ─── */
.sbc-sec { padding: 48px 0; }
.sbc-sec__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}
.sbc-sec__title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 900;
    letter-spacing: -.5px;
    margin: 0;
    color: var(--sbc-black);
}
.sbc-sec__more {
    font-size: 14px;
    font-weight: 700;
    color: var(--sbc-500);
    white-space: nowrap;
    transition: color var(--sbc-ease);
}
.sbc-sec__more:hover { color: var(--sbc-red); }

/* ─── BUTTONS ─── */
.sbc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sbc-font);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 14px 28px;
    border-radius: var(--sbc-r-sm);
    transition: all var(--sbc-ease);
    cursor: pointer;
    border: none;
}
.sbc-btn--primary {
    background: var(--sbc-black);
    color: var(--sbc-white);
}
.sbc-btn--primary:hover {
    background: var(--sbc-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(255,77,0,.25);
}
.sbc-btn--hero {
    background: var(--sbc-white);
    color: var(--sbc-black);
}
.sbc-btn--hero:hover {
    background: var(--sbc-red);
    color: var(--sbc-white);
    transform: translateY(-2px);
}
/* Neon CTA — app'teki "KAYKAYINI SEÇ" butonu */
.sbc-btn--neon {
    background: var(--sbc-neon);
    color: var(--sbc-black);
    border: none;
    font-weight: 900;
    letter-spacing: .8px;
}
.sbc-btn--neon:hover {
    background: var(--sbc-neon-dk);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(190,255,0,.3);
}
/* Ghost/outline — app'teki "KENDİN TOPLA" secondary stili */
.sbc-btn--ghost {
    background: transparent;
    color: var(--sbc-white);
    border: 1.5px solid rgba(255,255,255,.25);
}
.sbc-btn--ghost:hover {
    border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.08);
}
.sbc-btn--outline {
    background: transparent;
    color: var(--sbc-black);
    border: 2px solid var(--sbc-black);
    padding: 12px 24px;
}
.sbc-btn--outline:hover {
    background: var(--sbc-black);
    color: var(--sbc-white);
}

/* ─── BADGES / PILLS ─── */
.sbc-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    border-radius: var(--sbc-r-sm);
    background: var(--sbc-100);
    color: var(--sbc-700);
    width: fit-content;
}
.sbc-badge--fire {
    background: var(--sbc-accent);
    color: var(--sbc-white);
}
.sbc-badge--neon {
    background: var(--sbc-neon);
    color: var(--sbc-black);
}
.sbc-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: var(--sbc-r-full);
    border: 2px solid var(--sbc-200);
    font-size: 13px;
    font-weight: 700;
    color: var(--sbc-black);
    background: var(--sbc-white);
    transition: all var(--sbc-ease);
}
.sbc-pill:hover {
    border-color: var(--sbc-black);
    background: var(--sbc-black);
    color: var(--sbc-white);
}
.sbc-pill--cta {
    background: var(--sbc-red);
    color: var(--sbc-white);
    border-color: var(--sbc-red);
}
.sbc-pill--cta:hover {
    background: var(--sbc-red-dk);
    border-color: var(--sbc-red-dk);
}

/* ─── TAG ─── */
.sbc-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sbc-500);
    padding: 4px 12px;
    border-radius: var(--sbc-r-full);
    background: var(--sbc-50);
    transition: all var(--sbc-ease);
}
.sbc-tag:hover {
    background: var(--sbc-100);
    color: var(--sbc-black);
}

/* ─── FORMS ─── */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"],
input[type="search"], textarea, select {
    font-family: var(--sbc-font);
    font-size: 16px;
    border-radius: var(--sbc-r-sm);
    border: 2px solid var(--sbc-200);
    padding: 12px 16px;
    transition: border-color var(--sbc-ease);
    width: 100%;
    background: var(--sbc-white);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--sbc-black);
    outline: none;
    box-shadow: 0 0 0 4px rgba(17,17,17,.06);
}

/* ─── SCREEN READER ONLY ─── */
.sbc-sr-only, .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ─── SKIP LINK ─── */
.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--sbc-black);
    color: var(--sbc-white);
    border-radius: var(--sbc-r);
    font-weight: 700;
    clip: auto;
    width: auto;
    height: auto;
}

/* ─── CONTENT AREA ─── */
.sbc-content-area {
    padding: 32px 0 64px;
    min-height: 50vh;
}
.sbc-content-main--narrow {
    max-width: 780px;
    margin: 0 auto;
}
.sbc-content-main--full {
    max-width: 100%;
}

/* ─── PAGE HEADER ─── */
.sbc-page-header {
    margin-bottom: 32px;
}
.sbc-page-header--center {
    text-align: center;
}
.sbc-page-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 8px;
}
.sbc-archive-desc {
    font-size: 15px;
    color: var(--sbc-500);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ─── NO RESULTS ─── */
.sbc-no-results {
    text-align: center;
    padding: 80px 20px;
}
.sbc-no-results h2 {
    font-size: 24px;
    margin-bottom: 12px;
}
.sbc-no-results p {
    color: var(--sbc-500);
    font-size: 16px;
}
.sbc-no-results__icon {
    font-size: 64px;
    margin-bottom: 16px;
}
.sbc-no-results__suggestions {
    margin-top: 32px;
}
.sbc-no-results__suggestions h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--sbc-500);
    margin-bottom: 12px;
}
.sbc-no-results__pills {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ─── PAGINATION ─── */
.nav-links {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 32px 0;
}
.nav-links a, .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--sbc-r-sm);
    font-weight: 700;
    font-size: 14px;
    transition: all var(--sbc-ease);
}
.nav-links a:hover {
    background: var(--sbc-50);
}
.nav-links .current {
    background: var(--sbc-black);
    color: var(--sbc-white);
}

/* ─── 404 ─── */
.sbc-404 {
    text-align: center;
    padding: 80px 20px;
}
.sbc-404__emoji { font-size: 80px; display: block; margin-bottom: 16px; }
.sbc-404__title { font-size: 96px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.sbc-404__subtitle { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.sbc-404__text { font-size: 16px; color: var(--sbc-500); max-width: 500px; margin: 0 auto 32px; }
.sbc-404__actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 48px; }
.sbc-404__pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sbc-404__suggestions h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--sbc-500);
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════
   FLOATING ELEMENT STACK — z-index yönetimi
   
   Z-INDEX STACK (aşağıdan yukarıya):
   9988  WP Loyalty widget
   9989  CookieYes revisit butonu
   9990  Back-to-top butonu
   9995  SBC WhatsApp butonu
   9998  SBC Smart App Banner
   999…  CookieYes consent (kendi z-index'i)
   
   Tüm floating elementlerin birbiriyle çakışmasını
   bu tek bölüm yönetir. Smart banner açıkken
   WhatsApp + back-to-top otomatik yukarı kayar.
   ═══════════════════════════════════════════════════════ */

/* ─── HT CTC (eski WhatsApp eklentisi) — GİZLE ─── */
/* Kendi butonumuzu kullandığımız için eklenti çıktısını gizle.
   Eklenti deaktif edilince bu kural gereksiz hale gelir. */
#ht-ctc-chat,
.ht-ctc,
.ht_ctc_style {
    display: none !important;
}

/* ─── Eski 3rd party WhatsApp selectorler (legacy compat) ─── */
.joinchat,
.wa-chat-box-brand,
[class*="whatsapp-button"],
[class*="joinchat"] {
    display: none !important;
}

/* ─── SBC WhatsApp butonu ─── */
.sbc-wa {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9995;
    display: flex;
    align-items: center;
    gap: 0;
    transition: bottom .3s cubic-bezier(.4,0,.2,1), transform .2s, box-shadow .2s;
}
.sbc-wa__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 14px rgba(37,211,102,.4);
    cursor: pointer;
    border: none;
    padding: 0;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.sbc-wa__btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(37,211,102,.5);
}
.sbc-wa__btn:active {
    transform: scale(0.95);
}
.sbc-wa__btn svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

/* Pulse animasyonu — dikkat çekmek için */
.sbc-wa__btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(37,211,102,.3);
    animation: sbc-wa-pulse 2s ease-out infinite;
}
@keyframes sbc-wa-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    70%  { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* Tooltip — hover'da "WhatsApp" yazısı */
.sbc-wa__label {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--sbc-black, #0A0A0A);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.sbc-wa__label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--sbc-black, #0A0A0A);
}
.sbc-wa:hover .sbc-wa__label {
    opacity: 1;
    visibility: visible;
}

/* ─── Smart banner açıkken: WhatsApp + back-to-top yukarı kayar ─── */
/* JS .sbc-floating-lifted class'ını body'ye ekler */
body.sbc-floating-lifted .sbc-wa {
    bottom: 76px; /* banner yüksekliği (~56px) + gap */
}
body.sbc-floating-lifted .sbc-btt {
    bottom: 80px;
}

/* ─── CookieYes — kabul edildikten sonra revisit butonu küçük ─── */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left {
    bottom: 80px !important;
    z-index: 9989 !important;
    transform: scale(0.75) !important;
    transform-origin: bottom left !important;
    opacity: 0.6 !important;
    transition: opacity .2s, transform .2s !important;
}
.cky-btn-revisit-wrapper:hover,
.cky-revisit-bottom-left:hover {
    opacity: 1 !important;
    transform: scale(1) !important;
}
/* CookieYes consent banner — kapandıktan sonra tekrar gösterme */
.cky-consent-container[style*="display: none"],
.cky-consent-bar[style*="display: none"] {
    display: none !important;
}
/* CookieYes preference center — mobilde taşma engelle */
.cky-preference-center {
    max-width: 100vw !important;
    width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
}
.cky-preference-body-wrapper,
.cky-preference-content-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
/* WP Loyalty sağ alt — notify ile çakışma önle */
.wlr-myrewards-widget,
[class*="wlr-launcher"] {
    z-index: 9988 !important;
}

/* ─── Mobil ayarlar ─── */
@media (max-width: 768px) {
    .cky-btn-revisit-wrapper,
    .cky-revisit-bottom-left {
        bottom: 72px !important;
        left: 10px !important;
    }
    .sbc-wa {
        bottom: calc(64px + env(safe-area-inset-bottom) + 12px);
        right: 16px;
    }
    .sbc-wa__btn {
        width: 50px;
        height: 50px;
    }
    .sbc-wa__btn svg {
        width: 26px;
        height: 26px;
    }
    .sbc-wa__label { display: none; }
    .sbc-btt {
        bottom: calc(64px + env(safe-area-inset-bottom) + 16px);
    }
    /* Smart banner açıkken */
    body.sbc-floating-lifted .sbc-wa {
        bottom: calc(64px + env(safe-area-inset-bottom) + 72px);
    }
    body.sbc-floating-lifted .sbc-btt {
        bottom: calc(64px + env(safe-area-inset-bottom) + 76px);
    }

    /* ─── Bottom nav üstüne çık: tüm fixed sağ-alt widgetlar ─── */
    /* JoinChat, WhatsApp eklentileri, benzeri 3. parti butonlar */
    .joinchat,
    .joinchat__button,
    [class*="joinchat"],
    [class*="whatsapp"]:not(.sbc-bottom-nav *),
    [id*="whatsapp"]:not(.sbc-bottom-nav *),
    [class*="WhatsApp"],
    .wc-wa-btn,
    .wa-widget,
    .wa-chat-btn {
        bottom: calc(64px + env(safe-area-inset-bottom) + 12px) !important;
    }
}

/* ─── SELECTION ─── */
::selection { background: var(--sbc-red); color: var(--sbc-white); }

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ─── BACK TO TOP ─── */
.sbc-btt {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9990;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sbc-black, #0A0A0A);
    color: var(--sbc-white, #fff);
    border: 2px solid var(--sbc-200, #e5e7eb);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease, bottom .3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.sbc-btt.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sbc-btt:hover {
    background: var(--sbc-accent, #FF4D00);
    border-color: var(--sbc-accent, #FF4D00);
    transform: translateY(-2px);
}
@media (max-width: 768px) {
    .sbc-btt { bottom: 24px; left: 16px; width: 40px; height: 40px; }
}

/* ─── PRINT ─── */
@media print {
    .sbc-announce, .sbc-campaign-bar, .sbc-header, .sbc-footer,
    .sbc-hero, .sbc-cta, .sbc-mobile-nav,
    .sbc-wa, .sbc-app-banner,
    [class*="whatsapp"], [class*="joinchat"],
    .cky-consent-container, .sbc-btt { display: none !important; }
}