/* ══════════════════════════════════════════════════════════════
   assets/qb-enhancements.css
   QB Enhancements — Modal + Register Button + Video Filter
   Author: said nihat önal

   Tasarım prensipleri:
     - Siyah-beyaz (sadece #000, #fff, #666 gri tonları)
     - Arial, Helvetica
     - Keskin köşe + yumuşak transition (cubic-bezier)
     - Emoji/renkli ikon yok
     - Mevcut .tp-*/.qb-* stillerini BOZMAZ, sadece ÜZERİNE yazar
   ══════════════════════════════════════════════════════════════ */

/* ─── TEMEL NAMESPACE ─── */
.qbe-launch-row,
.qbe-launch-row *,
.qbe-modal,
.qbe-modal *,
.qbe-video-section,
.qbe-video-section * {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   1. KAYIT OL BUTONU (Sağ üst — tarla konteynerine göre hizalı)
   ══════════════════════════════════════════════════════════════ */
.qbe-launch-row {
    max-width: 720px;
    margin: 0 auto 14px;
    padding: 0 22px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.qbe-launch-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    padding: 10px 22px;
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    transition: background-color .22s cubic-bezier(.4,0,.2,1),
                color            .22s cubic-bezier(.4,0,.2,1),
                transform        .15s cubic-bezier(.4,0,.2,1),
                box-shadow       .22s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 0 #000;
}

.qbe-launch-btn:hover,
.qbe-launch-btn:focus-visible {
    background: #000;
    color: #fff;
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #000;
}

.qbe-launch-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #000;
}

/* ══════════════════════════════════════════════════════════════
   2. MODAL (POPUP)
   ══════════════════════════════════════════════════════════════ */
.qbe-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s cubic-bezier(.4,0,.2,1);
}

/* "hidden" HTML attribute'u — browser default'u görünmezlik.
   Ekstra güvence: display:none ile kesin gizle. */
.qbe-modal[hidden] {
    display: none !important;
}

.qbe-modal.qbe-open {
    opacity: 1;
    pointer-events: auto;
}

.qbe-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.qbe-modal__dialog {
    position: relative;
    z-index: 1;
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 6px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 0 #000, 0 14px 36px rgba(0,0,0,0.35);
    transform: translateY(16px) scale(.98);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}

.qbe-modal.qbe-open .qbe-modal__dialog {
    transform: translateY(0) scale(1);
}

.qbe-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 2px solid #000;
    background: #fff;
    flex-shrink: 0;
}

.qbe-modal__title {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #000;
}

.qbe-modal__close {
    appearance: none;
    -webkit-appearance: none;
    width: 34px;
    height: 34px;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color .2s cubic-bezier(.4,0,.2,1),
                color            .2s cubic-bezier(.4,0,.2,1);
}

.qbe-modal__close:hover,
.qbe-modal__close:focus-visible {
    background: #000;
    color: #fff;
    outline: none;
}

.qbe-modal__body {
    padding: 20px 22px 24px;
    overflow-y: auto;
    flex: 1;
}

/* Modal içindeki mevcut qb-kayit-form'u modal'a adapte et
   (dış kartın border/shadow'unu sıfırlar) */
.qbe-modal__body .qb-kayit-wrap {
    margin: 0 !important;
    padding: 0 !important;
}
.qbe-modal__body .qb-kayit-form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.qbe-modal__body .qb-kayit-header {
    text-align: left;
    margin-bottom: 16px;
}
.qbe-modal__body .qb-kayit-header h3 {
    font-size: 13px;
    font-weight: 900;
    color: #000;
    margin: 0 0 6px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.qbe-modal__body .qb-kayit-header p {
    color: #666;
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}
.qbe-modal__body .qb-kayit-field input[type="text"],
.qbe-modal__body .qb-kayit-field input[type="email"],
.qbe-modal__body .qb-kayit-field input[type="tel"],
.qbe-modal__body .qb-kayit-field textarea {
    border: 2px solid #000 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #000 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    transition: box-shadow .18s cubic-bezier(.4,0,.2,1) !important;
}
.qbe-modal__body .qb-kayit-field input:focus,
.qbe-modal__body .qb-kayit-field textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.15) !important;
    border-color: #000 !important;
}
.qbe-modal__body .qb-kayit-field label {
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
}
.qbe-modal__body .qb-kayit-btn {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 4px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    transition: background-color .22s cubic-bezier(.4,0,.2,1),
                color            .22s cubic-bezier(.4,0,.2,1) !important;
}
.qbe-modal__body .qb-kayit-btn:hover:not(:disabled) {
    background: #fff !important;
    color: #000 !important;
}
.qbe-modal__body .qb-kayit-feedback.qb-kayit-success {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    padding: 8px 10px;
    border-radius: 4px;
    font-weight: 700;
}
.qbe-modal__body .qb-kayit-feedback.qb-kayit-error {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    padding: 8px 10px;
    border-radius: 4px;
    font-weight: 700;
}

/* Sayfa scroll'unu modal açıkken kilitle */
body.qbe-modal-open {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   3. VIDEO SECTION (Quiz üstünde filtrelenebilir kutu)
   ══════════════════════════════════════════════════════════════ */
.qbe-video-section {
    max-width: 720px;
    margin: 0 auto 22px;
    padding: 18px 22px 22px;
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-bottom: 6px solid #000;
    border-radius: 6px;
    filter:
        drop-shadow(-2px 0 0 transparent)
        drop-shadow(2px 0 0 transparent);
}

.qbe-video-head {
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
}
.qbe-video-title {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #000;
}
.qbe-video-subtitle {
    margin: 6px 0 0;
    font-size: 12px;
    color: #666;
    line-height: 1.45;
}

.qbe-video-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.qbe-filter-item { display: flex; flex-direction: column; gap: 4px; }

.qbe-filter-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #000;
    text-transform: uppercase;
}

.qbe-filter-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 9px 30px 9px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    background: #fff;
    border: 2px solid #000;
    border-radius: 4px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #000 50%),
        linear-gradient(-45deg, transparent 50%, #000 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: background-color .2s cubic-bezier(.4,0,.2,1),
                color            .2s cubic-bezier(.4,0,.2,1),
                box-shadow       .2s cubic-bezier(.4,0,.2,1);
}

.qbe-filter-select:hover {
    box-shadow: 0 2px 0 #000;
}

.qbe-filter-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.18);
}

.qbe-filter-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Video grid */
.qbe-video-results {
    position: relative;
    min-height: 60px;
}

.qbe-video-results.qbe-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.55);
    pointer-events: none;
}

.qbe-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.qbe-video-card {
    background: #fff;
    border: 2px solid #000;
    border-bottom: 4px solid #000;
    border-radius: 4px;
    overflow: hidden;
    transition: transform .2s cubic-bezier(.4,0,.2,1),
                box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.qbe-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #000;
}

.qbe-video-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}
.qbe-video-frame video,
.qbe-video-frame iframe,
.qbe-video-frame embed,
.qbe-video-frame object {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.qbe-video-meta { padding: 10px 14px 12px; }
.qbe-video-card-title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 900;
    color: #000;
    line-height: 1.3;
}
.qbe-video-desc {
    margin: 0 0 6px;
    font-size: 12px;
    color: #666;
    line-height: 1.45;
}
.qbe-video-duration {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #000;
    border: 1.5px solid #000;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
}
.qbe-video-empty,
.qbe-video-err {
    text-align: center;
    padding: 24px 12px;
    color: #666;
    font-size: 13px;
    font-weight: 700;
    background: #fff;
    border: 2px dashed #000;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   4. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
    .qbe-video-filters {
        grid-template-columns: 1fr;
    }
    .qbe-modal__dialog {
        max-width: 100%;
    }
    .qbe-launch-row {
        padding: 0 16px;
    }
    .qbe-video-section {
        padding: 14px 16px 18px;
    }
}

/* ══════════════════════════════════════════════════════════════
   5. KARAKTER GÖRSELİ — yumuşak geçiş (v3.4.0)
   ══════════════════════════════════════════════════════════════
   Profil karakter görseli market'ten kıyafet alındığında değişir;
   ani değişimi yumuşatmak için kısa bir fade. ODAK ALANININ
   ETRAFINA HİÇBİR ANİMASYON / KENAR / PULS UYGULANMAZ. Çiftçi
   GIF'i zaten tarla.js tarafından durum bazlı (SAPKASIZ ↔ diggin)
   değiştirilir; başka görsel sinyale gerek yok. */
#tarla-productivity-embed .tp-char-single img {
    transition: opacity .25s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════
   6. MODAL — Ek savunma katmanı (v3.4.0)
   ══════════════════════════════════════════════════════════════
   Bazı temalar .qbe-modal'a display:none giydirebiliyor (ör. sticky
   header CSS reset'leri). Açıkken display:flex'in kazandığından emin
   olalım: */
.qbe-modal.qbe-open {
    display: flex !important;
}

/* Buton başka bir tema CSS'iyle gizlenebilir; namespace ile
   nükleer override: */
.qbe-launch-row .qbe-launch-btn,
.qbe-launch-btn#qbe-open-register {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}