/* ── Pricing Page ─────────────────────────────────── */
.pricing-web-grid,
.pricing-api-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    overflow: visible;
    align-items: stretch;
}
.pricing-api-grid { gap: 1.25rem; }

@media (min-width: 640px) {
    .pricing-api-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .pricing-web-grid { grid-template-columns: repeat(var(--web-cols, 3), 1fr); }
    .pricing-api-grid { grid-template-columns: repeat(var(--api-cols, 4), 1fr); }
}

.pricing-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .pricing-trust-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Hero description ──────────────────────────── */
.pricing-hero-desc { max-width: 560px; }

/* ── Billing Toggle ────────────────────────────── */
.billing-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    padding: 6px 8px;
}
.billing-pill-wrap {
    position: relative;
    border-radius: 999px;
    padding: 1.5px;
    overflow: hidden;
    min-width: 150px;
}
.billing-pill-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.10);
    pointer-events: none;
    z-index: 2;
}
[data-theme="light"] .billing-pill-wrap::after {
    border-color: rgba(0,0,0,0.10);
}
.billing-pill-wrap.billing-pill-active::after { display: none; }
.billing-pill-wrap.billing-pill-active::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0%, transparent 62%,
        rgba(87,226,186,0.5) 70%, rgba(87,226,186,1) 77%,
        rgba(64,201,162,1) 82%, rgba(87,226,186,0.5) 89%,
        transparent 97%, transparent 100%
    );
    animation: billing-beam-spin 3.5s linear infinite;
    z-index: 0;
}
@keyframes billing-beam-spin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.billing-pill-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 10px 28px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted, #8a9bb0);
    transition: color 0.2s;
    background: var(--theme-card-bg);
}
.billing-pill-wrap.billing-pill-active .billing-pill-btn { color: var(--primary, #57e2ba); }
[data-theme="light"] .billing-pill-wrap.billing-pill-active .billing-pill-btn { color: #1bae89; }

.billing-savings-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(52,211,153,0.15);
    color: #34d399;
}
[data-theme="light"] .billing-savings-badge { background: rgba(27,174,137,0.12); color: #1bae89; }

/* Statik (Web/API) toggle */
.billing-pill-wrap.billing-pill-static::before { display: none; }
.billing-pill-wrap.billing-pill-static.billing-pill-active { background: rgba(87,226,186,0.65); }
[data-theme="light"] .billing-pill-wrap.billing-pill-static.billing-pill-active { background: rgba(27,174,137,0.60); }

/* ── Cards ─────────────────────────────────────── */
.pricing-card {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.pricing-card:hover:not(.pricing-card--featured) {
    border-color: rgba(87,226,186,0.3);
    box-shadow: 0 4px 24px rgba(87,226,186,0.08);
}

/* Featured outer: tek kapsayıcı — yeşil arka plan, üstte POPÜLER, içte normal kart */
.pricing-featured-outer {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(135deg, #017353 0%, #04986e 50%, #40C9A2 100%);
    border-radius: 1rem;
    padding: 0 2px 2px 2px;
    box-shadow: 0 0 16px rgba(64,201,162,0.20), 0 8px 40px rgba(64,201,162,0.12);
}
[data-theme="light"] .pricing-featured-outer {
    box-shadow: 0 0 16px rgba(4,152,110,0.18), 0 4px 20px rgba(4,152,110,0.12);
}

/* POPÜLER yazısı — outer'ın üst kısmı */
.pricing-featured-header {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.pricing-featured-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff;
    text-transform: uppercase;
}
.pricing-sparkle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    pointer-events: none;
    z-index: 0;
    animation: sparkle-twinkle var(--sp-dur,2.2s) var(--sp-delay,0s) ease-in-out infinite;
}
@keyframes sparkle-twinkle {
    0%,100% { opacity:0; transform:scale(0) translateY(0); }
    30%      { opacity:0.9; transform:scale(1) translateY(-4px); }
    60%      { opacity:0.5; transform:scale(0.6) translateY(-7px); }
}

/* Card content */
.pricing-card-body     { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pricing-card-head     { margin-bottom: 1rem; }
.pricing-card-title    { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.25rem; }
.pricing-card-desc     { font-size: 0.75rem; line-height: 1.5; }
.pricing-price-value   { font-size: 2rem; line-height: 1; font-weight: 900; }
.pricing-price-unit    { font-size: 0.75rem; padding-bottom: 0.2rem; }
.pricing-price-saving  { font-size: 0.7rem; margin-top: 0.3rem; color: #34d399; font-weight: 500; }
.pricing-free-label    { font-size: 2rem; line-height: 1; font-weight: 900; color: var(--primary); }
.pricing-free-sub      { font-size: 0.75rem; margin-top: 0.3rem; }

.pricing-divider {
    border-bottom: 1px solid var(--theme-border);
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
}
.pricing-divider-sm {
    border-bottom: 1px solid var(--theme-border);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

/* Feature list */
.pricing-feature-list  { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; font-size: 0.8125rem; }
.pricing-feature-item  { display: flex; align-items: center; gap: 0.625rem; line-height: 1.4; }
.pricing-feature-icon  { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; }
.pricing-feature-icon svg { width: 11px; height: 11px; }
.pricing-feature-icon--on      { background: rgba(52,211,153,0.15); color: #34d399; }
.pricing-feature-icon--primary { background: rgba(87,226,186,0.10); color: var(--primary, #57e2ba); }
.pricing-feature-icon--off     { background: var(--theme-subtle-bg); color: var(--text-muted, #8a9bb0); }
.pricing-feature-label strong  { color: var(--text-primary); font-weight: 600; }
.pricing-feature-note          { font-size: 0.6875rem; color: var(--text-muted, #8a9bb0); }
.pricing-feature-off           { opacity: .4; }
.pricing-feature-off .pricing-feature-label { text-decoration: line-through; }

/* CTA button */
.pricing-cta-btn {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    font-size: 0.8125rem !important;
}

/* Section label badge */
.pricing-section-badge {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.375rem 1rem;
    border-radius: 999px;
    color: var(--primary);
    border: 1px solid rgba(87,226,186,0.25);
    background: rgba(87,226,186,0.07);
}

/* Grid wrappers */
.pricing-web-wrap  { max-width: 960px;  margin: 0 auto; padding-top: 0; }
.pricing-api-wrap  { max-width: 1100px; margin: 0 auto; padding-top: 0; }
.pricing-api-section { margin-top: 5rem; }

/* Her kart bir slot içinde */
.pricing-slot {
    display: flex;
    flex-direction: column;
}
/* Non-featured kartlar: üstte banner yüksekliği kadar boşluk — içerikler hizalanır */
.pricing-slot > .pricing-card {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pricing-slot > .pricing-featured-outer {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Trust card icon */
.pricing-trust-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(87,226,186,0.10);
}
.pricing-trust-icon i { color: var(--primary); }
.pricing-trust-title { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.pricing-trust-desc  { font-size: 0.7rem; margin-top: 2px; line-height: 1.4; }
.pricing-trust-grid > div { gap: 0.875rem; }

/* FAQ */
.pricing-faq-item {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    background: var(--theme-card-bg);
    transition: border-color .2s, background .2s;
}
.pricing-faq-item--open {
    border-color: rgba(87,226,186,0.20);
    background: rgba(87,226,186,0.03);
}
.pricing-faq-divider {
    border-top: 1px solid var(--theme-border);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    line-height: 1.7;
}

/* Section separator */
.pricing-sep-line {
    width: 60px; height: 1px;
    background: linear-gradient(to var(--direction), rgba(87,226,186,0.4), transparent);
}

/* Page sections */
.pricing-hero-section  { padding-top: var(--page-hero-offset, 100px); padding-bottom: 60px; position: relative; overflow: hidden; }
.pricing-bg-blob-1     { pointer-events: none; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 1000px; height: 600px; background: radial-gradient(ellipse at 50% 20%, rgba(87,226,186,0.08) 0%, transparent 60%); z-index: 0; }
.pricing-bg-blob-2     { pointer-events: none; position: absolute; bottom: 0; right: -100px; width: 500px; height: 500px; background: radial-gradient(ellipse at 80% 80%, rgba(87,226,186,0.04) 0%, transparent 60%); z-index: 0; }
.pricing-container     { position: relative; z-index: 1; }
.pricing-trust-section { padding: 0 0 60px; }
.pricing-faq-section   { padding: 20px 0 60px; }
.pricing-faq-inner     { max-width: 760px; margin: 0 auto; }
.pricing-cta-section   { padding: 0 0 80px; }

/* Accessibility: respect reduced-motion preference — stop the continuous
   billing beam + sparkle loops that otherwise repaint indefinitely. */
@media (prefers-reduced-motion: reduce) {
    .billing-pill-wrap.billing-pill-active::before { animation: none; }
    .pricing-sparkle { animation: none; opacity: 0.6; }
}