/* Paket fiyatlandırması: üyelik sayfası (uyelik.html) ve vito-ekle.html ücretlendirme bölümü.
   Yalnız css/tokens.css değişkenleri kullanılır; kırılma noktaları 900/760/560/400. */

/* --- Öncü Üye bandı --- */
.early-banner{
  margin:0 0 var(--space-5);padding:.8rem 1.1rem;
  background:var(--surface);border:1px solid var(--brass);border-radius:var(--radius);
  color:var(--ivory);font-size:.95rem;
}

/* --- Paket tablosu (vito-ekle.html); dar ekranda yatay kayar --- */
.pricing-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--space-4)}
.pricing-table{width:100%;min-width:560px;border-collapse:collapse;font-size:.95rem}
.pricing-table th,.pricing-table td{padding:.7rem .9rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.pricing-table thead th{color:var(--ivory);font-family:var(--font-display);font-size:1.15rem;letter-spacing:.02em;border-bottom:1px solid var(--line-strong)}
.pricing-table th.is-pro{color:var(--brass)}
/* İlk sütun başlığı bir paket adı değil, satır etiketidir: paket adlarından ayrışsın */
.pricing-table thead th:first-child{color:var(--silver);font-family:var(--font-body);font-size:.95rem;font-weight:500;letter-spacing:0}
.pricing-table tbody th{color:var(--silver);font-weight:500}
.pricing-table td{color:var(--silver)}
.pricing-table tr.is-yearly{background:var(--surface-2)}
.pricing-table tr.is-yearly th,.pricing-table tr.is-yearly td{color:var(--ivory);font-weight:600}
.pricing-note{font-size:.85rem;margin:0 0 var(--space-4)}
/* vito-ekle.html: dipnotun ardından gelen "Deneme ve paket şartları" başlığı */
.pricing-terms-title{margin:var(--space-5) 0 var(--space-3)}

/* --- Dönem anahtarı: Yıllık | Aylık (yıllık solda ve varsayılan — K13) --- */
.period-toggle{
  display:inline-flex;flex-wrap:wrap;gap:.25rem;margin:0 0 var(--space-5);padding:.25rem;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-pill);
}
.period-toggle button{
  padding:.45rem 1.1rem;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:transparent;color:var(--silver);font:inherit;font-size:.95rem;
}
.period-toggle button:hover{color:var(--ivory)}
.period-toggle button[aria-pressed="true"]{background:var(--brass);color:var(--brass-ink);font-weight:600}

/* --- Paket kartları --- */
.plan-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin:0 0 var(--space-5)}
.plan-card{
  display:flex;flex-direction:column;gap:.5rem;padding:var(--space-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.plan-card.is-selected{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass-glow)}
.plan-card h3{margin:0;font-size:1.35rem}
.plan-card-price{margin:0;color:var(--silver);font-size:.95rem}
.plan-card-price strong{color:var(--ivory);font-size:1.5rem;font-family:var(--font-display)}
.plan-card-old{margin:0;color:var(--silver);font-size:.9rem;text-decoration:line-through}
.plan-card-features{margin:0;color:var(--silver);font-size:.9rem;flex:1}
.plan-card .btn{align-self:flex-start;margin-top:.25rem}

/* --- Fiyat kırılımı --- */
.price-breakdown{margin:0 0 var(--space-4);padding:var(--space-4);background:var(--surface);border-radius:var(--radius)}
.price-breakdown>div{display:flex;justify-content:space-between;gap:var(--space-4);padding:.3rem 0}
.price-breakdown dt{color:var(--silver)}
.price-breakdown dd{margin:0;color:var(--ivory);white-space:nowrap}
.price-breakdown .is-discount dd{color:var(--success)}
.price-breakdown .is-total{margin-top:.35rem;padding-top:.6rem;border-top:1px solid var(--line-strong)}
.price-breakdown .is-total dt{color:var(--ivory);font-weight:600}
.price-breakdown .is-total dd{font-family:var(--font-display);font-size:1.4rem}

/* --- Değişiklik ön izlemesi (ödeme onaylanınca ne olacak) --- */
.change-preview{
  margin:0 0 var(--space-5);padding:.8rem 1.1rem;
  background:var(--surface-2);border-inline-start:3px solid var(--brass);border-radius:var(--radius);
  color:var(--ivory);font-size:.95rem;
}

/* --- Banka kutusu ve referans kodu --- */
.bank-box{margin:0 0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.bank-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--space-4);
  padding:.7rem 1rem;border-bottom:1px solid var(--line);
}
.bank-row:last-child{border-bottom:0}
.bank-row>span{flex:0 0 11rem;color:var(--silver);font-size:.9rem}
.bank-row>strong{flex:1;min-width:12rem;color:var(--ivory);font-weight:500;word-break:break-word}
.ref-code{
  display:inline-block;padding:.1rem .5rem;border:1px dashed var(--brass);border-radius:var(--radius-sm);
  color:var(--brass);font-family:var(--font-display);letter-spacing:.12em;
}
.bank-row>strong.ref-code{flex:0 0 auto;min-width:0}   /* kesikli çerçeve kodu sarsın, satırı doldurmasın */

/* Ödeme geçmişi rozetleri (panel.css'te karşılığı olmayan iki durum) */
.status-pending{color:var(--brass);border-color:var(--brass)}
.status-approved{color:var(--success);border-color:var(--success)}

@media (max-width:900px){
  .plan-cards{gap:var(--space-3)}
}
@media (max-width:760px){
  .plan-cards{grid-template-columns:1fr}
  .bank-row>span{flex-basis:100%}
  .bank-row>strong{min-width:0}
}
@media (max-width:560px){
  .period-toggle{display:flex;width:100%}
  .period-toggle button{flex:1;text-align:center}
  .price-breakdown{padding:var(--space-3)}
}
@media (max-width:400px){
  .pricing-table{font-size:.9rem}
  .price-breakdown .is-total dd{font-size:1.2rem}
}