/* PLANLAR (#plansPage) — plan kartlari, mevcut plan ve kullanim, kredi yukleme.
   Atelier tokenlariyla (atelier.css 1. bolum) cizilir: acik/koyu tema tokenlardan
   gelir, burada sabit renk yok. Isaretleme: pro.html #plansPage, js/billing-plans.js. */

#plansPage .bill-hero { max-width: 22ch; font-size: clamp(34px, 4.4vw, 60px); }
#plansPage .bill-hero-sub { margin-bottom: 28px; }

/* ---------- mevcut plan + kullanim ---------- */
.bill-usage { margin: 0 0 34px; }
.bill-current {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2fr);
    gap: 28px;
    padding: 26px 28px;
    border-radius: var(--atl-r-3);
    background: linear-gradient(160deg,
        color-mix(in oklab, var(--atl-aurora-1) 10%, transparent),
        color-mix(in oklab, var(--atl-aurora-2) 5%, transparent)),
        var(--atl-surface-2);
    border: 1px solid var(--atl-glass-stroke);
    backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
}
.bill-current--loading, .bill-current--error { display: flex; flex-direction: column; gap: 10px; }
.bill-current--error p { margin: 0; color: var(--atl-mute); }
.bill-current__eyebrow {
    font-family: var(--atl-font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--atl-mute);
}
.bill-current__name {
    font-family: var(--atl-font-display); font-weight: 400; font-size: 34px;
    letter-spacing: -.03em; line-height: 1.05; margin: 8px 0 8px; color: var(--atl-ink);
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.bill-current__line { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--atl-mute); }
.bill-current__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.bill-chip {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    font-family: var(--atl-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; border: 1px solid var(--atl-line);
    background: var(--atl-surface-3); color: var(--atl-mute);
}
.bill-chip--active { color: var(--atl-success); border-color: color-mix(in oklab, var(--atl-success) 40%, transparent); }
.bill-chip--trialing, .bill-chip--internal { color: var(--atl-accent); border-color: color-mix(in oklab, var(--atl-accent) 40%, transparent); }
.bill-chip--past_due { color: var(--atl-danger); border-color: color-mix(in oklab, var(--atl-danger) 45%, transparent); }

.bill-notice {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
    padding: 11px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--atl-ink-soft);
}
.bill-notice i { margin-top: 2px; }
.bill-notice--warn { background: color-mix(in oklab, var(--atl-warn) 12%, transparent); border: 1px solid color-mix(in oklab, var(--atl-warn) 40%, transparent); }
.bill-notice--warn i { color: var(--atl-warn); }
.bill-notice--danger { background: color-mix(in oklab, var(--atl-danger) 10%, transparent); border: 1px solid color-mix(in oklab, var(--atl-danger) 40%, transparent); }
.bill-notice--danger i { color: var(--atl-danger); }

.bill-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.bill-meter {
    padding: 16px 16px 14px; border-radius: var(--atl-r-2);
    background: var(--atl-surface-3); border: 1px solid var(--atl-line);
    min-width: 0;
}
.bill-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bill-meter__label {
    font-family: var(--atl-font-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--atl-mute); white-space: nowrap;
}
.bill-meter__label i { margin-right: 4px; color: var(--atl-accent); }
.bill-meter__value {
    font-family: var(--atl-font-display); font-weight: 300; font-size: 24px;
    letter-spacing: -.02em; color: var(--atl-ink); white-space: nowrap;
}
.bill-bar {
    position: relative; display: flex; height: 8px; margin: 12px 0 10px;
    border-radius: 999px; overflow: hidden;
    background: color-mix(in oklab, var(--atl-ink) 8%, transparent);
}
.bill-bar__seg {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--atl-aurora-1), var(--atl-aurora-4));
    transition: width var(--atl-d-3) var(--atl-ease);
}
.bill-bar--warn .bill-bar__seg { background: var(--atl-warn); }
.bill-bar--danger .bill-bar__seg { background: var(--atl-danger); }
/* Sinirsiz: cubuk yok, deger "Sinirsiz"; aciklama satiri basliga yakin durur. */
.bill-meter--unlimited .bill-legend { margin-top: 12px; }
.bill-unlimited {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 17px; font-weight: 500; letter-spacing: -.01em;
    background: linear-gradient(120deg, var(--atl-aurora-1), var(--atl-aurora-4));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bill-unlimited i { font-size: 14px; }
.bill-bar__seg--allow { background: linear-gradient(90deg, var(--atl-aurora-1), var(--atl-aurora-4)); }
.bill-bar__seg--buy { background: var(--atl-aurora-2); }
.bill-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--atl-ink-soft); line-height: 1.4; }
.bill-legend li { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.bill-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bill-dot--allow { background: linear-gradient(135deg, var(--atl-aurora-1), var(--atl-aurora-4)); }
.bill-dot--buy { background: var(--atl-aurora-2); }
.bill-mute { color: var(--atl-faint); }
.bill-over { color: var(--atl-danger); font-weight: 600; }

/* ---------- aylik / yillik ---------- */
.bill-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px 20px;
    flex-wrap: wrap; margin: 0 0 18px;
}
.bill-toolbar__head { min-width: 0; }
.bill-toolbar__head .bill-note { margin: 4px 0 0; }
.bill-toolbar__head .bill-note[hidden] { display: none; }
.bill-toolbar__title { font-family: var(--atl-font-display); font-weight: 400; font-size: 24px; letter-spacing: -.02em; margin: 0; color: var(--atl-ink); }
.bill-toggle {
    display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px;
    background: var(--atl-surface-2); border: 1px solid var(--atl-glass-stroke);
}
.bill-toggle button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer;
    background: transparent; color: var(--atl-mute);
    font: inherit; font-size: 13.5px; font-weight: 600;
    transition: background var(--atl-d-1) var(--atl-ease), color var(--atl-d-1) var(--atl-ease);
}
.bill-toggle button:hover { color: var(--atl-ink); }
.bill-toggle button.is-active { background: var(--atl-ink); color: var(--atl-surface-0); }
.bill-toggle button:focus-visible { outline: 2px solid var(--atl-accent); outline-offset: 2px; }
.bill-toggle__save {
    padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
    background: color-mix(in oklab, var(--atl-success) 18%, transparent); color: var(--atl-success);
}
.bill-toggle button.is-active .bill-toggle__save { background: color-mix(in oklab, var(--atl-success) 30%, transparent); color: inherit; }
.bill-note { font-size: 12px; color: var(--atl-faint); }

/* ---------- plan kartlari ---------- */
.bill-plans {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
    align-items: stretch;
}
.bill-plan {
    position: relative; display: flex; flex-direction: column;
    padding: 22px 20px 20px; border-radius: var(--atl-r-3);
    background: var(--atl-surface-2); border: 1px solid var(--atl-glass-stroke);
    backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--atl-blur-2)) saturate(1.3);
    transition: transform var(--atl-d-2) var(--atl-ease), border-color var(--atl-d-2) var(--atl-ease), box-shadow var(--atl-d-2) var(--atl-ease);
    min-width: 0;
}
.bill-plan:hover { transform: translateY(-2px); border-color: var(--atl-glass-stroke-strong); box-shadow: 0 24px 60px -30px rgba(11, 11, 20, .28); }
.bill-plan.is-popular {
    background: linear-gradient(170deg, color-mix(in oklab, var(--atl-aurora-1) 12%, transparent), transparent 55%), var(--atl-surface-3);
    border-color: color-mix(in oklab, var(--atl-aurora-1) 45%, var(--atl-glass-stroke));
    box-shadow: 0 22px 60px -30px color-mix(in oklab, var(--atl-aurora-1) 55%, transparent);
}
.bill-plan.is-current { border-color: color-mix(in oklab, var(--atl-success) 55%, var(--atl-glass-stroke)); }
.bill-plan--skeleton { min-height: 360px; gap: 12px; }
.bill-plan__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; min-height: 22px; }
/* "En populer": kartin ust kenarinda serit, akista yer tutmaz (kartlar hizali kalir). */
.bill-plan > .bill-badge--popular {
    position: absolute; top: -11px; left: 18px; z-index: 1;
    box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--atl-aurora-1) 70%, transparent);
}
.bill-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.bill-badge i { font-size: 9.5px; }
.bill-badge--popular { background: linear-gradient(120deg, var(--atl-aurora-1), var(--atl-aurora-4)); color: #fff; }
.bill-badge--trial { background: color-mix(in oklab, var(--atl-success) 16%, transparent); color: var(--atl-success); }
.bill-badge--current { background: var(--atl-ink); color: var(--atl-surface-0); }
.bill-plan__name {
    margin: 0; font-family: var(--atl-font-display); font-weight: 500; font-size: 21px;
    letter-spacing: -.02em; color: var(--atl-ink);
}
.bill-plan__tagline { margin: 4px 0 16px; font-size: 13px; color: var(--atl-mute); min-height: 1.4em; }
.bill-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.bill-plan__strike { font-size: 15px; color: var(--atl-faint); }
.bill-plan__amount {
    font-family: var(--atl-font-display); font-weight: 300; font-size: 42px;
    letter-spacing: -.04em; line-height: 1; color: var(--atl-ink);
}
.bill-plan__per { font-size: 13px; color: var(--atl-mute); }
.bill-plan__sub { margin: 8px 0 18px; font-size: 12px; line-height: 1.45; color: var(--atl-faint); min-height: 2.9em; }
.bill-save {
    display: inline-block; margin-left: 2px; padding: 1px 7px; border-radius: 999px;
    font-weight: 700; color: var(--atl-success); background: color-mix(in oklab, var(--atl-success) 14%, transparent);
}
.bill-plan__action { min-height: 44px; display: flex; }
.bill-plans--readonly .bill-plan__action { display: none; }
.bill-plan__cta { width: 100%; justify-content: center; }
.bill-plan__cta[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.bill-plan__here {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    color: var(--atl-success); border: 1px dashed color-mix(in oklab, var(--atl-success) 50%, transparent);
}
.bill-plan__fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--atl-faint); }
.bill-plan__list {
    list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--atl-line);
    display: flex; flex-direction: column; gap: 9px;
}
.bill-plan__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--atl-ink-soft); }
.bill-plan__list i { margin-top: 3px; font-size: 11px; color: var(--atl-accent); flex: none; }
.bill-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--atl-mute); }

/* ---------- kredi yukleme ---------- */
.bill-topup {
    margin: 40px 0 0; padding: 26px 28px; border-radius: var(--atl-r-3);
    display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr); gap: 22px 32px;
    background: var(--atl-surface-2); border: 1px solid var(--atl-glass-stroke);
    scroll-margin-top: 100px;
}
.bill-topup[hidden] { display: none; }
.bill-topup__title { margin: 0 0 6px; font-family: var(--atl-font-display); font-weight: 400; font-size: 24px; letter-spacing: -.02em; color: var(--atl-ink); }
.bill-topup__text p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--atl-mute); }
.bill-topup__amounts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bill-amt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 12px 12px; border-radius: 14px; cursor: pointer; text-align: left;
    background: var(--atl-surface-3); border: 1px solid var(--atl-line); color: var(--atl-ink);
    font: inherit; min-width: 0;
    transition: border-color var(--atl-d-1) var(--atl-ease), background var(--atl-d-1) var(--atl-ease);
}
.bill-amt:hover { border-color: var(--atl-glass-stroke-strong); }
.bill-amt.is-active {
    border-color: var(--atl-accent);
    background: color-mix(in oklab, var(--atl-accent) 10%, var(--atl-surface-3));
    box-shadow: 0 0 0 1px var(--atl-accent) inset;
}
.bill-amt:focus-visible { outline: 2px solid var(--atl-accent); outline-offset: 2px; }
.bill-amt__usd { font-family: var(--atl-font-display); font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.bill-amt__credits { font-size: 11.5px; color: var(--atl-mute); }
.bill-amt__input { display: flex; align-items: center; gap: 2px; width: 100%; font-size: 14px; color: var(--atl-mute); }
.bill-amt__input input {
    width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--atl-line); background: transparent;
    color: var(--atl-ink); font: inherit; font-size: 14px; padding: 2px 0; outline: none;
    -moz-appearance: textfield;
}
.bill-amt__input input::-webkit-outer-spin-button,
.bill-amt__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bill-amt__input input:focus { border-bottom-color: var(--atl-accent); }
.bill-topup__foot {
    grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.bill-topup__summary { font-size: 14px; color: var(--atl-ink-soft); }
.bill-topup__summary strong { font-weight: 700; color: var(--atl-ink); }
.bill-topup__summary.is-invalid { color: var(--atl-danger); }
.bill-topup__btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.bill-topup__promo { grid-column: 2; font-size: 12.5px; color: var(--atl-mute); }
.bill-topup__promo summary { cursor: pointer; width: max-content; }
.bill-topup__promo input {
    margin-top: 8px; width: min(260px, 100%); padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--atl-line); background: var(--atl-surface-3); color: var(--atl-ink); font: inherit;
}
.bill-topup__fine { grid-column: 2; margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--atl-faint); }
.bill-internal-note {
    margin: 40px 0 0; padding: 18px 22px; border-radius: var(--atl-r-2);
    background: var(--atl-surface-2); border: 1px solid var(--atl-glass-stroke); color: var(--atl-mute); font-size: 13.5px;
}
.bill-internal-note[hidden] { display: none; }
.bill-foot { margin: 22px 0 0; font-size: 12px; line-height: 1.55; color: var(--atl-faint); max-width: 80ch; }

/* ---------- iskelet ---------- */
.bill-skel {
    display: block; height: 12px; border-radius: 6px; width: 70%;
    background: linear-gradient(90deg, var(--atl-line), color-mix(in oklab, var(--atl-ink) 12%, transparent), var(--atl-line));
    background-size: 200% 100%; animation: bill-skel 1.4s ease-in-out infinite;
}
.bill-skel--title { height: 22px; width: 45%; }
@keyframes bill-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .bill-skel { animation: none; } .bill-plan:hover { transform: none; } }

/* ---------- anasayfa plan/kredi kutusu ve Ayarlar karti girisleri ---------- */
.atl-plan-widget {
    cursor: pointer; border-radius: var(--atl-r-3); padding: 6px 10px 6px 6px; margin: -6px -10px -6px -6px;
    transition: background var(--atl-d-1) var(--atl-ease);
}
.atl-plan-widget:hover { background: var(--atl-surface-2); }
.atl-plan-widget:focus-visible { outline: 2px solid var(--atl-accent); outline-offset: 2px; }
.atl-plan-widget__more { margin-left: 6px; font-size: 10px; color: var(--atl-faint); }
.atl-credit-card__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.atl-credit-card__actions .atl-btn { justify-content: center; }
.atl-credit-card__actions .atl-credit-card__billing-btn { margin-top: 0; }
/* atelier.css "#addCreditBalanceButton { display:inline-flex }" hidden'i eziyordu (internal hesap). */
.atl-credit-card [data-billing-purchase][hidden] { display: none !important; }

/* ---------- dar ekran ---------- */
@media (max-width: 1100px) {
    .bill-current { grid-template-columns: 1fr; }
    .bill-topup { grid-template-columns: 1fr; }
    .bill-topup__foot, .bill-topup__promo, .bill-topup__fine { grid-column: 1; }
}
@media (max-width: 760px) {
    .bill-current { padding: 20px 18px; gap: 18px; }
    .bill-current__name { font-size: 28px; }
    .bill-meters { grid-template-columns: 1fr; gap: 10px; }
    .bill-toolbar { align-items: flex-start; }
    .bill-toggle { width: 100%; }
    .bill-toggle button { flex: 1; justify-content: center; padding: 9px 10px; }
    .bill-plans { grid-template-columns: 1fr; }
    .bill-plan__badges:empty { display: none; }   /* tek sutunda hizalama payina gerek yok */
    .bill-plan__sub, .bill-plan__tagline { min-height: 0; }
    .bill-topup { padding: 20px 18px; }
    .bill-topup__amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bill-amt--custom { grid-column: 1 / -1; }
    .bill-topup__foot .atl-btn { width: 100%; justify-content: center; }
}