/* ═══════════════════════════════════════
   PLUGIN UYUM — OUG Widget Stilleri
═══════════════════════════════════════ */

/* ── Countdown — sağ sütunda tam genişlik ── */
.oug-countdown {
    background: #1c1c1e;
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.oug-countdown__label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oug-countdown__digits {
    display: flex;
    align-items: center;
    gap: 6px;
}

.oug-countdown__block {
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 10px;
    padding: 8px 12px 6px;
    min-width: 56px;
    text-align: center;
}

.oug-countdown__block span {
    font-family: 'DM Mono', monospace;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    display: block;
    line-height: 1;
}

.oug-countdown__block span.is-urgent { color: #ff6b6b; }
.oug-countdown__block small { color: rgba(255,255,255,.3); font-size: 9px; margin-top: 4px; display: block; }
.oug-sep { color: rgba(255,255,255,.2); font-size: 22px; margin-bottom: 4px; }

@media (max-width: 480px) {
    .oug-countdown { flex-direction: column; gap: 10px; text-align: center; }
    .oug-countdown__digits { justify-content: center; }
    .oug-countdown__block span { font-size: 24px; }
}

/* ── Stok barı — canlı bonus kartı ── */
.oug-stock {
    background: linear-gradient(135deg, #fff7ed 0%, #fef2f2 100%);
    border: 1.5px solid #fed7aa;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.oug-stock::before {
    content: '⭐';
    position: absolute;
    right: -14px; bottom: -18px;
    font-size: 90px;
    opacity: .06;
    pointer-events: none;
    transform: rotate(-12deg);
}

.oug-stock__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.oug-stock__label {
    font-size: 12px;
    font-weight: 800;
    color: #c2410c;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.oug-stock__label::before { content: '🎯 '; }
.oug-stock__count {
    font-size: 13px;
    font-weight: 500;
    color: #aeaeb2;
    display: flex;
    align-items: baseline;
    gap: 1px;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.oug-stock__count strong {
    font-size: 26px;
    font-weight: 900;
    color: #ff4500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.oug-stock__sep { font-size: 15px; color: #c7c7cc; margin: 0 1px; font-weight: 400; }

/* Bar + tier işaretleri */
.oug-stock__bar-wrap {
    position: relative;
    margin: 6px 0;
}

.oug-stock__bar {
    height: 12px;
    background: #ffe4d1;
    border-radius: 99px;
    overflow: visible;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(194, 65, 12, .12);
}

.oug-stock__fill {
    height: 100%;
    background: linear-gradient(90deg, #ff4500, #ff8c42);
    border-radius: 99px;
    transition: width .4s ease;
    position: relative;
    min-width: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(255, 69, 0, .35);
}
/* Bar üzerinde akan parıltı */
.oug-stock__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: ougBarShimmer 2s ease infinite;
}
@keyframes ougBarShimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(200%); }
}

/* Tier eşik işaretleri */
.oug-stock__mark {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 18px;
    background: #fff;
    border: 1px solid #fdba74;
    border-radius: 2px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}

.oug-stock__bonus-info {
    font-size: 14px;
    color: #7c2d12;
    margin-top: 10px;
    font-weight: 600;
}
.oug-stock__bonus-info strong { color: #ff4500; font-weight: 900; font-size: 16px; }

.oug-stock__explain {
    font-size: 12px;
    color: #92400e;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.65);
    border: 1px solid #fed7aa;
    border-radius: 10px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.oug-stock__explain strong { color: #ff4500; font-weight: 800; }
.oug-stock__how {
    color: #c0392b;
    font-size: 12px;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.oug-stock.is-empty { background: #f0fdf4 !important; border-color: #86efac !important; }
.oug-stock__empty { display: flex; align-items: center; gap: 12px; font-size: 24px; }
.oug-stock__empty > div { display: flex; flex-direction: column; gap: 2px; }
.oug-stock__empty strong { font-size: 15px; color: #1a8a3a; display: block; }
.oug-stock__empty span { font-size: 13px; color: #636366; }

/* ── Tier listesi — ödül merdiveni ── */
.oug-tiers {
    background: none;
    border: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin-bottom: 18px;
    align-items: stretch;
}

.oug-tiers__item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #e5e5ea;
    border-radius: 12px;
    padding: 14px 4px 12px;
    text-align: center;
    min-height: 82px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    position: relative;
}
.oug-tiers__item:hover { transform: translateY(-2px); }

/* Son tier = şampiyon — altın vurgu + taç (KART İÇİNDE) */
.oug-tiers__item:last-child {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fbbf24;
    padding-top: 24px; /* Taç için üstte yer aç */
}
.oug-tiers__item:last-child::before {
    content: '🏆';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.oug-tiers__item:last-child .oug-tiers__bonus { color: #b45309; }

/* Aktif tier — turuncu parlar, rozet KART İÇİNDE altta */
.oug-tiers__item.is-active {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: #ff4500;
    box-shadow: 0 0 0 3px rgba(255, 69, 0, .12);
    animation: ougTierGlow 2s ease infinite;
    padding-bottom: 26px;
}
@keyframes ougTierGlow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 69, 0, .12); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 69, 0, .06); }
}
.oug-tiers__item.is-active::after {
    content: 'AKTİF';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff4500;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 3px 10px;
    border-radius: 99px;
    z-index: 2;
    line-height: 1.2;
}

/* Geçilmiş tier — yeşil onay */
.oug-tiers__item.is-done { opacity: .8; background: #f0fdf4; border-color: #bbf7d0; }
.oug-tiers__item.is-done .oug-tiers__range::before { content: '✓ '; color: #16a34a; font-weight: 800; }

.oug-tiers__range {
    font-size: 10px;
    color: #8e8e93;
    font-weight: 600;
    white-space: nowrap;
    font-family: var(--font);
    line-height: 1.2;
}

/* Bonus rakamı — her kartta TUTARLI: "+X" büyük, altında "kredi" küçük */
.oug-tiers__bonus {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 900;
    color: #ff4500;
    letter-spacing: -.02em;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.oug-tiers__bonus small {
    font-size: 10px;
    font-weight: 700;
    opacity: .75;
    text-transform: lowercase;
    letter-spacing: .02em;
}
.oug-tiers__item.is-done .oug-tiers__bonus { color: #16a34a; }
.oug-tiers__item.is-active .oug-tiers__bonus { color: #ff4500; }

/* Mobil: tier'lar 2 satıra sarar, dokunmatik dostu, taç yeri korunur */
@media (max-width: 600px) {
    .oug-tiers { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .oug-tiers__item { flex: 1 1 calc(33.33% - 6px); min-width: calc(33.33% - 6px); padding: 12px 4px 10px; min-height: 74px; }
    .oug-tiers__item:last-child { padding-top: 22px; }
    .oug-tiers__bonus { font-size: 15px; }
    .oug-tiers__bonus small { font-size: 9px; }
    .oug-stock { padding: 14px; border-radius: 14px; }
    .oug-stock__count strong { font-size: 22px; }
    .oug-stock__bar { height: 10px; }
}

.oug-section-title {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8e8e93;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ── Gelecek ürünler ── */
.oug-upcoming__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.oug-upcoming__grid::-webkit-scrollbar { display: none; }

.oug-upcoming__card {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    flex: 0 0 180px;
    scroll-snap-align: start;
}

.oug-upcoming__card:hover { border-color: #d1d1d6; box-shadow: 0 4px 16px rgba(0,0,0,.07); }

.oug-upcoming__img { aspect-ratio: 1; background: #f5f5f7; overflow: hidden; }
.oug-upcoming__img img { width: 100%; height: 100%; object-fit: cover; }
.oug-upcoming__img.is-blurred img { filter: blur(14px); transform: scale(1.1); }
.oug-upcoming__noimg { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #d1d1d6; }

.oug-upcoming__body { padding: 12px 12px 14px; }
.oug-upcoming__day { font-size: 11px; font-weight: 700; color: #0071e3; letter-spacing: .02em; display: block; margin-bottom: 4px; }
.oug-upcoming__name { font-size: 13px; font-weight: 600; color: #1c1c1e; line-height: 1.3; display: block; margin-bottom: 10px; }

.oug-reminder-btn {
    display: block; width: 100%;
    background: #f5f5f7; border: 1px solid #e5e5ea;
    border-radius: 8px; padding: 7px 8px;
    font-size: 12px; font-weight: 600; color: #636366;
    cursor: pointer; text-align: center;
    transition: all .15s; font-family: inherit;
}
.oug-reminder-btn:hover { background: #e8f1fd; border-color: #93c5fd; color: #0071e3; }

/* ── Geçmiş ürünler ── */
.oug-past__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.oug-past__grid::-webkit-scrollbar { display: none; }

.oug-past__card {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s;
    flex: 0 0 180px;
    scroll-snap-align: start;
}
.oug-past__card:hover { border-color: #d1d1d6; }

.oug-past__thumb { aspect-ratio: 1; background: #f5f5f7; position: relative; overflow: hidden; }
.oug-past__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%) opacity(.85); }

/* Çapraz damga */
.oug-past__stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    border: 3px solid rgba(160,0,0,.55);
    color: rgba(160,0,0,.6);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 8px 14px;
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.3;
    user-select: none;
    text-shadow: 0 1px 2px rgba(160,0,0,.15);
}

.oug-past__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.oug-past__date { font-size: 10px; color: #8e8e93; font-weight: 500; display: block; }
.oug-past__name { font-size: 12px; font-weight: 600; color: #1c1c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.oug-past__price { font-size: 13px; font-weight: 700; color: #1c1c1e; display: block; margin: 3px 0; }

.oug-past__bar { height: 3px; background: #e5e5ea; border-radius: 4px; overflow: hidden; margin: 4px 0; }
.oug-past__fill { height: 100%; background: #0071e3; border-radius: 4px; }
.oug-past__card.is-full .oug-past__fill { background: #1a8a3a; }

.oug-past__stats { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #8e8e93; font-weight: 500; }
.oug-past__bonus-info { color: #e67700; font-weight: 700; }

/* ── Kısmi kredi ── */
.oug-partial-credit {
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    margin-bottom: 16px;
}

#oug-apply-credit {
    background: #1c1c1e;
    color: #fff;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: none;
    padding: 9px 16px;
    cursor: pointer;
}

/* ── Kredi sayfası override ── */
.oug-credits-balance {
    background: linear-gradient(135deg, #0071e3 0%, #0062c4 100%) !important;
    border-radius: 16px !important;
    border: none !important;
}

@media (max-width: 500px) {
    .oug-upcoming__grid, .oug-past__grid { grid-template-columns: repeat(2, 1fr); }
    .oug-tiers { flex-wrap: wrap; }
    .oug-tiers__item { min-width: calc(33% - 4px); }
}

/* ── Bildirim & Bekleme Listesi ── */
.oug-subscribe-box,
.oug-waitlist-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 8px;
    font-size: 13px;
}

.oug-subscribe-box {
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
    color: #636366;
}

.oug-waitlist-box {
    background: #fff8e6;
    border: 1px solid #f0c040;
    color: #92400e;
}

.oug-notify-btn {
    flex-shrink: 0;
    background: #1c1c1e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}
.oug-notify-btn:hover { background: #333; color: #fff; }
.oug-notify-btn:disabled { background: #1a8a3a; cursor: default; }

.oug-notify-btn--outline {
    background: transparent;
    color: #636366;
    border: 1.5px solid #d1d1d6;
}
.oug-notify-btn--outline:hover { border-color: #0071e3; color: #0071e3; background: transparent; }
.oug-notify-btn--outline:disabled { background: #f0fdf4; color: #1a8a3a; border-color: #86efac; }