/* page-qi-transactions sablonundan tasindi (FOUC duzeltmesi). Kaynak: page-qi-transactions.php */

/* ============================================================
   DAO YOLCULUĞU BANNER
   ============================================================ */
.dao-journey-hero {
    background: linear-gradient(160deg, #eaf3ff 0%, #d5e6fb 45%, #c3d9f7 100%);
    border-radius: 20px;
    padding: 28px 30px 24px;
    margin-bottom: 28px;
    color: #0f2547;
    position: relative;
    overflow: hidden;
}

.dao-yinyang { margin-right: 4px; }

.dao-journey-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f2547;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    border: none;
}

.dao-journey-cta:hover { background: #16346b; }

/* Rütbe yolu */
.dao-journey-track {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6px;
    margin-top: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.dao-track-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 64px;
    flex: 1;
}

/* Görsel yoksa: basit, temalı, dairesel bir rozet */
.dao-track-avatar.no-image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(15,37,71,0.18);
}

/* Görsel varsa: HİÇBİR çerçeveye/daireye kırpılmadan, karakterin tamamı
   olduğu gibi gösterilir — kullanıcı isteği: "bir çerçeveye alma ve
   kırpma ki resimlerim tam görünsün". */
.dao-track-avatar.has-image {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 74px;
}

.dao-track-avatar.has-image img {
    height: 100%;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(15,37,71,0.2));
}

.dao-track-locked .dao-track-avatar {
    opacity: 0.4;
    filter: grayscale(60%);
}

.dao-track-current .dao-track-avatar.has-image img {
    filter: drop-shadow(0 0 10px rgba(74,127,217,0.65)) drop-shadow(0 3px 6px rgba(15,37,71,0.25));
    transform: scale(1.12);
}

.dao-track-current .dao-track-avatar.no-image {
    box-shadow: 0 0 0 4px rgba(74,127,217,0.35), 0 0 18px rgba(74,127,217,0.55);
    transform: scale(1.12);
}

.dao-track-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2ecc71;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    border: 2px solid #eaf3ff;
}

.dao-track-current-marker {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: dao-pulse 2s infinite;
}

@keyframes dao-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,127,217,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(74,127,217,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,127,217,0); }
}

.dao-track-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #35507a;
    text-align: center;
}

.dao-track-locked .dao-track-label { color: #9aa8bf; }

.dao-journey-track-line {
    position: relative;
    height: 6px;
    background: rgba(15,37,71,0.12);
    border-radius: 999px;
    margin: 4px 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dao-journey-track-line-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: linear-gradient(90deg, #4a7fd9, #0f2547);
    border-radius: 999px;
}

.dao-track-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c7d3e6;
    position: relative;
    z-index: 1;
}

.dao-track-dot-completed,
.dao-track-dot-current {
    background: #0f2547;
}

/* Kullanıcı kartı satırı */
.dao-journey-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 0;
}

.dao-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.75);
    border-radius: 16px;
    padding: 12px 18px;
    flex: 1;
    min-width: 280px;
}

.dao-user-avatar img,
.dao-user-avatar .avatar-fallback {
    border-radius: 50%;
    width: 52px;
    height: 52px;
    object-fit: cover;
    display: block;
}

.dao-user-avatar .avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4a7fd9, #0f2547);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
}

.dao-user-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 700;
    color: #0f2547;
    font-size: 0.95rem;
}

.dao-user-tag {
    font-weight: 500;
    color: #7c8ba6;
    font-size: 0.8rem;
}

.dao-user-rank-pill {
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

.dao-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: #4a6285;
    margin-top: 4px;
}

.dao-user-active-badge { color: #2ecc71; font-weight: 600; }
.dao-user-inactive-badge { color: #9aa5b8; font-weight: 600; }
.dao-user-legacy strong { font-weight: 700; }

@media (max-width: 782px) {
    .dao-journey-track { gap: 2px; }
    .dao-track-avatar.no-image { width: 44px; height: 44px; font-size: 1rem; }
    .dao-track-avatar.has-image { height: 52px; }
    .dao-track-avatar.has-image img { max-width: 60px; }
    .dao-track-label { font-size: 0.55rem; }
    .dao-journey-track-line { margin: 4px 20px 0; }
}

@media (max-width: 640px) {
    .qi-redeem-form-inline { flex-direction: column; }
    .qi-redeem-form-inline .qi-submit-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   EK MOBİL DUYARLILIK — dar telefon ekranları (≤480px) için.
   Dashboard'a taşındıktan sonra bu içerik daha dar bir sütunda
   göründüğü için burası özellikle önemli.
   ============================================================ */
@media (max-width: 600px) {
    .dao-journey-hero {
        padding: 20px 16px 18px;
        border-radius: 14px;
    }

    .dao-journey-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .dao-user-card {
        min-width: 0;
        flex-direction: column;
        text-align: center;
    }

    .dao-user-name {
        justify-content: center;
    }

    .dao-user-meta {
        justify-content: center;
    }

    .qi-summary-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .qi-summary-cell {
        justify-content: center;
    }

    .qi-summary-sep {
        display: none;
    }

    .qi-summary-actions {
        justify-content: center;
        margin-left: 0;
    }

    .qi-redeem-card {
        padding: 16px;
    }

    .qi-redeem-heading {
        text-align: left;
    }

    .transactions-table table {
        font-size: 0.8rem;
    }

    .shopier-packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   ÖZET ŞERİDİ (minimalist) — Bakiye + Patreon + Aksiyonlar tek satırda
   ============================================================ */
.qi-summary-bar {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-xl, 12px);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.qi-summary-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qi-summary-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.qi-summary-icon-patreon {
    background: none;
    color: #ff424d;
    font-size: 1.3rem;
    width: auto;
    height: auto;
}

.qi-summary-text {
    line-height: 1.3;
}

.qi-summary-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.qi-summary-label strong.is-ok  { color: #4caf50; }
.qi-summary-label strong.is-off { color: var(--color-text-muted); }

.qi-summary-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text-primary);
}

.qi-summary-unit {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.qi-summary-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.qi-summary-sep {
    width: 1px;
    align-self: stretch;
    background: var(--color-border, rgba(255,255,255,.08));
    min-height: 30px;
}

.qi-summary-patreon-btn {
    margin-left: 4px;
}

.qi-summary-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.qi-summary-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
    padding: 8px 14px;
    border-radius: 8px;
    margin-bottom: var(--space-6, 24px);
}

.qi-redeem-card {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-xl, 12px);
    padding: var(--space-6, 24px);
    margin: var(--space-6, 24px) 0;
}

.qi-redeem-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.qi-redeem-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e53935;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.qi-redeem-title {
    margin: 0 0 2px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.qi-redeem-subtitle {
    color: var(--color-text-muted, #888);
    font-size: 14px;
    margin: 0;
}

.qi-redeem-form-inline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.qi-redeem-form-inline .qi-code-input {
    flex: 1;
    min-width: 220px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 14px;
    border-radius: 8px;
    border: 2px solid var(--color-border, #e0e0e0);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.qi-redeem-form-inline .qi-submit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    white-space: nowrap;
}

.qi-redeem-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.qi-redeem-links .qi-link {
    font-size: 13px;
    color: var(--color-text-muted, #888);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.qi-redeem-links .qi-link:hover {
    color: var(--color-primary, #ff6d00);
}

.qi-redeem-message {
    display: none; padding: 12px 16px; border-radius: 8px;
    margin-bottom: 16px; font-size: 14px; font-weight: 500;
}
.qi-redeem-message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.qi-redeem-message.error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* İşlem Geçmişi accordion */
.transactions-accordion {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-xl, 12px);
    overflow: hidden;
}

.transactions-accordion-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5, 20px) var(--space-6, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.05rem;
    user-select: none;
}

.transactions-accordion-summary::-webkit-details-marker { display: none; }

.tx-count-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.accordion-caret {
    transition: transform 0.2s ease;
    color: var(--color-text-muted);
}

.transactions-accordion[open] .accordion-caret {
    transform: rotate(180deg);
}

.transactions-accordion-body {
    padding: 0 var(--space-6, 24px) var(--space-6, 24px);
}

.transaction-na {
    color: var(--color-text-muted);
}

.transactions-table tbody tr td:first-child {
    color: var(--color-text-muted);
}

/* ============================================================
   MOBİL TAŞMA (OVERFLOW) DÜZELTMESİ — KÖK SEBEP
   ============================================================
   Flexbox öğeleri VARSAYILAN OLARAK "min-width: auto" alır — yani
   içindeki metin/içerik ne kadar genişse, o öğe o genişliğin ALTINA
   asla küçülmez, gerekirse tüm sayfayı sağa doğru taşırır (dar telefon
   ekranlarında "ekran sağa sola kayıyor" sorununun en yaygın sebebi).
   Bu blok, EN SONDA olduğu için (CSS'te aynı özgüllükte SONRAKİ kural
   kazanır) dosyanın başındaki min-width değerlerini güvenle geçersiz
   kılıyor. Yeterli yer varken hiçbir görsel değişiklik olmaz — sadece
   yer daralınca öğeler düzgün küçülüp satır kaydırabiliyor.
   ============================================================ */
.dao-journey-hero,
.dao-journey-footer,
.dao-user-card,
.dao-user-info,
.dao-user-name,
.dao-user-meta,
.dao-track-item,
.qi-summary-bar,
.qi-summary-cell,
.qi-summary-text,
.qi-redeem-form-inline,
.qi-redeem-form-inline .qi-code-input,
.store-card-footer {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.dao-user-name {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Bu sayfanın taşacak HİÇBİR yeri kalmasın diye son bir güvence.
   NOT: Kasıtlı olarak yatay kaydırılan öğeler (rütbe tablosu, rütbe
   yolu) burada İSTİSNA — onların İÇİNDEKİ genişlik, kendi
   overflow-x:auto kutularının içinde kalmaya devam ediyor, sorun
   değil; sadece dışarıya taşmalarını engelliyoruz. */
.qi-transactions-container {
    max-width: 100%;
    overflow-x: hidden;
}
/* Mobilde Dao yolunun TAMAMI değil, sadece MEVCUT ve bir SONRAKİ rütbe
   gösterilsin — 10 rozeti sığdırmaya çalışmak yerine sade ve okunaklı.
   Bu kural en sonda olduğu için (aynı özgüllükte sonraki kazanır)
   yukarıdaki 782px kuralını da güvenle geçersiz kılıyor. */
@media (max-width: 600px) {
    .dao-journey-track .dao-track-item {
        display: none;
    }
    .dao-journey-track .dao-track-current,
    .dao-journey-track .dao-track-current + .dao-track-item {
        display: flex;
    }
    /* Kullanıcı hiç abone olmamışsa (mevcut rütbe yok) ilk iki rütbeyi
       "hedef" olarak göster — aksi halde mobilde hiçbir şey görünmez. */
    .dao-journey-track:not(:has(.dao-track-current)) .dao-track-item:nth-child(1),
    .dao-journey-track:not(:has(.dao-track-current)) .dao-track-item:nth-child(2) {
        display: flex;
    }
    .dao-journey-track {
        justify-content: center;
        gap: 32px;
        margin-top: 20px;
    }
    .dao-journey-track-line {
        display: none;
    }
}