/* Abonelik ekranı
 *
 * TASARIM KARARI: BU EKRANDA HİÇBİR ŞEY SAKLANMAZ.
 *
 * Rakiplerdeki iptal deneyimi genellikle şudur: iptal bağlantısı gri ve
 * küçük, "aboneliği yönet" iki menü altında, iptale bastığınızda üç ekran
 * "emin misiniz" ve bir indirim teklifi. Bu ekran bunun tersini yapar:
 *   · İptal düğmesi durum kartının İÇİNDE, ilk ekranda, tam boy.
 *   · Sönük ya da devre dışı görünmez; gerçek bir düğme gibi durur.
 *   · Onay labirenti yok — tek tık, tek ekran.
 *   · Yanında her zaman "erişiminiz şu tarihe kadar sürüyor" yazar.
 *
 * Renk ve ölçüler app.css'ten gelir; burada YENİ RENK TANIMLANMAZ.
 * Yeni bir sabit renk, kontrast denetiminin (scripts/check-contrast.mjs)
 * göremediği bir çift yaratırdı.
 */

/* ─────────────────────────────────────────────────────────── DÜZEN */

.abn-baslik { margin-bottom: 26px; }
.abn-baslik h1 { font-size: clamp(28px, 4vw, 34px); }
.abn-baslik p { margin-top: 8px; color: var(--muted); }

.abn-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .abn-duzen { grid-template-columns: 1fr; }
}

.abn-bolum + .abn-bolum { margin-top: 22px; }

.abn-bolum h2 {
  font-size: 19px;
  margin-bottom: 6px;
}
.abn-bolum > .abn-alt {
  color: var(--muted); font-size: 14.5px; line-height: 1.55;
  margin-bottom: 16px; max-width: 62ch;
}

/* ───────────────────────────────────────────────── DURUM KARTI */

.abn-durum { display: flex; flex-direction: column; gap: 18px; }

.abn-durum-ust {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.abn-plan {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.2;
}
.abn-fiyat { color: var(--soft-text); font-size: 15px; margin-top: 4px; }

/* Durum rozetleri — RENK TEK BAŞINA ANLAM TAŞIMAZ.
 * Her rozette metin de vardır; renk körü bir kullanıcı için yeşil/kehribar
 * ayrımı görünmez olsa bile "Yürürlükte" / "İptal edildi" okunur. */
.abn-rozet {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-pill); padding: 6px 13px;
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  border: 1px solid;
}
.abn-rozet-ok    { background: var(--ok-soft);     border-color: #BEE5DA; color: var(--ok); }
.abn-rozet-uyari { background: var(--warn-soft);   border-color: #EFD9AE; color: var(--warn); }
.abn-rozet-sakin { background: var(--sunken);      border-color: var(--line-strong); color: var(--muted); }

.abn-ozet {
  font-size: 16px; line-height: 1.6; color: var(--muted);
  max-width: 64ch;
}

/* Bilgi satırları — dönem, yenileme, bildirim tarihi */
.abn-satirlar {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden;
}
.abn-satir {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 12px 15px; font-size: 14.5px;
}
.abn-satir + .abn-satir { border-top: 1px solid var(--line); }
.abn-satir dt { color: var(--soft-text); margin: 0; }
.abn-satir dd { color: var(--ink); margin: 0; text-align: right; font-weight: 500; }

/* ─────────────────────────────────────────── İPTAL — TEK TIK */

.abn-eylem {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}

/* İptal düğmesi GİZLENMEZ, KÜÇÜLTÜLMEZ, SOLUKLAŞTIRILMAZ.
 * Karanlık desenlerin en yaygını, iptali görsel olarak "ikincil" bir
 * eyleme çevirmektir. Burada kenarlığı belirgin, punto tam boy. */
.abn-iptal-btn { min-width: 210px; }

.abn-iptal-not {
  font-size: 13.5px; color: var(--soft-text); line-height: 1.55;
  max-width: 58ch;
}

/* İptalden sonraki geri alma şeridi */
.abn-geri {
  border: 1px solid var(--line-strong); background: var(--sunken);
  border-radius: var(--r-sm); padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
}
.abn-geri p { font-size: 14.5px; color: var(--muted); max-width: 52ch; }

/* ───────────────────────────────────────────────── İADE FORMU */

.abn-iade-uyari {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--amber-fill);
  background: var(--surface); border-radius: var(--r-sm);
  padding: 14px 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted);
  margin-bottom: 16px;
}
.abn-iade-uyari strong { color: var(--ink); font-weight: 500; }

.abn-iade-form { display: flex; flex-direction: column; gap: 14px; }
.abn-iade-form .hint { font-size: 13px; color: var(--soft-text); line-height: 1.5; }

/* ──────────────────────────────────────────── ÖDEME GEÇMİŞİ */

.abn-gecmis-sar { overflow-x: auto; }

.abn-gecmis {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  min-width: 460px;
}
.abn-gecmis th {
  text-align: left; font-weight: 500; color: var(--soft-text);
  font-size: 13px; padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--line-strong);
}
.abn-gecmis td {
  padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.5;
}
.abn-gecmis td:first-child { color: var(--ink); }
.abn-gecmis .abn-tutar { text-align: right; font-variant-numeric: tabular-nums; }
.abn-gecmis th.abn-tutar { text-align: right; padding-right: 0; }

.abn-bos {
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 28px 20px; text-align: center; color: var(--soft-text);
  font-size: 14.5px; line-height: 1.6;
}

/* ─────────────────────────────────────── DURUM DUYURUSU (aria-live) */

/* Duyuru alanı GÖRÜNÜR bir kutudur, ekran okuyucuya özel gizli bir alan
 * değil. Gören kullanıcı da "iptal edildi mi?" diye sayfayı yeniden
 * yüklemek zorunda kalmasın. Boşken hiç yer kaplamaz. */
.abn-duyuru:empty { display: none; }
.abn-duyuru { margin-bottom: 20px; }

/* ─────────────────────────────────────────────── İSKELET (yükleniyor) */

.abn-iskelet {
  background: var(--sunken); border-radius: var(--r);
  height: 210px; animation: abn-nabiz 1.4s ease-in-out infinite;
}
@keyframes abn-nabiz { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* ───────────────────────────────────────────────── HAREKET TERCİHİ */

/* Hareket kapanır, İÇERİK GÖRÜNÜR KALIR.
 *
 * app.css'teki genel kural bütün geçiş ve animasyon SÜRELERİNİ zaten
 * `.01ms`e indiriyor. Ama nabız animasyonu için bu yetmez: animasyon
 * anında durunca iskelet %55 opaklıkta donabilir ve yükleniyor kutusu
 * "sönük" görünür. Opaklık burada AÇIKÇA 1'e sabitlenir.
 *
 * Aynı sebeple hiçbir bilgi yalnızca hareketle anlatılmaz; iskeletin
 * yerini alan içerik animasyonsuz da tam görünür. */
@media (prefers-reduced-motion: reduce) {
  .abn-iskelet { animation: none; opacity: 1; }
}

/* ───────────────────────────────────────────────────────── DAR EKRAN */

@media (max-width: 560px) {
  .abn-satir { flex-direction: column; gap: 3px; }
  .abn-satir dd { text-align: left; }
  .abn-iptal-btn { min-width: 0; width: 100%; }
  .abn-eylem { flex-direction: column; align-items: stretch; }
}