/* ==========================================================================
   GoldenBrain — planlar ve kota penceresi
   --------------------------------------------------------------------------
   app.css'e EKLENMEDI, giris.css ile ayni gerekce: o dosya elle duzenlenen ve
   buyuk bir dosya; fiyatlandirmayi ayri tutmak geri almayi kolaylastiriyor.

   Sabit renk yok. Her sey app.css'teki degiskenlerden geliyor, dolayisiyla uc
   temanin (acik / koyu / altin) hepsinde kendiliginden dogru duruyor.
   ========================================================================== */

/* ==========================================================================
   KOTA SAHNESI
   --------------------------------------------------------------------------
   Kullanicinin gunun hakkini bitirdigi an gordugu tek sey bu. Kucuk bir uyari
   kutusu degil, TAM EKRAN bir sahne: arkadaki sohbet bulaniyor, one dort dik
   kart geliyor ve secim burada yapiliyor.

   Sabit renk yok; her sey app.css'teki degiskenlerden geliyor, dolayisiyla uc
   temanin (acik / koyu / altin) hepsinde kendiliginden dogru duruyor.
   ========================================================================== */

/* Sahne acikken arka plan kaymasin. */
body.kota-kilit { overflow: hidden; }

.kota-sahne {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  /* minmax(0, 1fr): sutun genisligini VIEWPORT belirlesin. Varsayilan `auto`
     sutunu icerigin dogal genisligine gore buyutuyor, dar ekranda dort kart
     hucreyi ekrandan tasirip basligi kadraj disina itiyordu. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Sahne zemini TEMAYA gore donuyor. Sabit siyah perde acik temada yaziyi
     yutuyordu: --ink-yumusak orada koyu bir renk ve siyah perdenin uzerinde
     hic okunmuyordu. Iki degisken tanimlanip asagida tema basina veriliyor;
     kurallarin geri kalani ayni kaliyor. */
  --sahne-ic: rgba(0, 0, 0, .58);
  --sahne-dis: rgba(0, 0, 0, .90);
  background: radial-gradient(120% 90% at 50% 45%, var(--sahne-ic), var(--sahne-dis));
  opacity: 0;
  /* Arkadaki sohbet okunur kalirsa goz oraya kayiyor; blur sahneyi one
     aliyor. saturate kismasi, arkadaki renkli balonlarin dikkat cekmesini
     engelliyor. */
  backdrop-filter: blur(0px) saturate(1);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  transition: opacity .3s var(--cikis), backdrop-filter .45s var(--cikis);
}

.kota-sahne.acik {
  opacity: 1;
  backdrop-filter: blur(16px) saturate(.75);
  -webkit-backdrop-filter: blur(16px) saturate(.75);
}

.kota-sahne.kapaniyor { opacity: 0; }

/* Acik temada perde de acik: degerler app.css'teki --bg (#f6f5f2) ile ayni
   aileden, yalnizca saydam. */
.tema-acik .kota-sahne {
  --sahne-ic: rgba(246, 245, 242, .70);
  --sahne-dis: rgba(246, 245, 242, .93);
}

.tema-koyu .kota-sahne {
  --sahne-ic: rgba(10, 10, 12, .60);
  --sahne-dis: rgba(10, 10, 12, .92);
}

/* ── donen isik halesi ──
   Icerigin arkasinda, cok yavas. Hizli donen ya da keskin kenarli bir hale
   dikkati metinden CALIYOR; bu yuzden 30 saniyelik tur ve agir bulaniklik. */
.kota-hale {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 150vw);
  aspect-ratio: 1;
  margin: -1px;
  translate: -50% -50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(var(--vurgu-rgb), .16) 10%,
    transparent 24%,
    transparent 48%,
    rgba(var(--vurgu-rgb), .11) 60%,
    transparent 76%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  animation: kota-don 30s linear infinite;
  transition: opacity .8s var(--cikis);
}

.kota-sahne.acik .kota-hale { opacity: 1; }

@keyframes kota-don {
  to { rotate: 360deg; }
}

.kota-icerik {
  position: relative;
  width: min(1000px, 100%);
  max-width: 100%;
  padding: 0 20px;
  text-align: center;
}

.kota-baslik {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  /* Altin, metnin KENDISINDEN gecen bir gecisle veriliyor: duz altin yazi
     buyuk puntoda cig duruyordu. */
  background: linear-gradient(170deg, var(--ink) 30%, var(--vurgu) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(7px);
  transition: opacity .5s var(--cikis) .1s, transform .6s var(--yay) .1s, filter .5s var(--cikis) .1s;
}

.kota-alt {
  max-width: 540px;
  margin: 0 auto 30px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-yumusak);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--cikis) .2s, transform .6s var(--yay) .2s;
}

.kota-sahne.acik .kota-baslik,
.kota-sahne.acik .kota-alt {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Geri sayim rakamlari: orantili fontta saniye her tikta genislik degistirip
   satiri oynatiyordu. */
.kota-sayac {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--vurgu);
  font-variant-numeric: tabular-nums;
}

/* ── kartlar ── */
.kota-kartlar {
  display: flex;
  max-width: 100%;
  justify-content: center;
  gap: 14px;
  padding: 12px 4px;
  /* Kartlar 3B egilerek geliyor; perspektif olmadan rotateX hicbir sey
     yapmiyor. */
  perspective: 1200px;
}

.kota-kart {
  position: relative;
  display: flex;
  flex: 0 0 208px;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 18px 18px;
  text-align: left;
  background: linear-gradient(180deg, var(--yuzey-2), var(--yuzey-1) 70%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  /* Sirayla ve hafifce yatarak geliyorlar (--sira JS'ten). Hepsi ayni anda
     belirince goz nereye bakacagini bilemiyordu.

     GIRIS ANIMASYONU `transform` DEGIL, ayri `translate`/`rotate`
     ozelliklerini kullaniyor. Sebebi soyle ogrenildi: animasyon `forwards`
     ile bittiginde transform'un son degerini TUTUYOR ve ayni ozelligi
     degistiren hover/secim kurallari hicbir sey yapamiyordu -- kartlar
     tiklaninca yerinden kimildamiyordu. Ayri eksenlerde ikisi birlikte
     calisiyor. */
  opacity: 0;
  translate: 0 34px;
  rotate: x 12deg;
  animation: kota-kart-gir .62s var(--yay) forwards;
  animation-delay: calc(var(--sira, 0) * 85ms + 300ms);
  transition: transform .28s var(--egri), border-color .28s var(--egri),
              box-shadow .28s var(--egri), opacity .28s var(--egri),
              filter .28s var(--egri);
}

@keyframes kota-kart-gir {
  to { opacity: 1; translate: none; rotate: none; }
}

.kota-kart:hover,
.kota-kart:focus-visible {
  transform: translateY(-9px);
  border-color: rgba(var(--vurgu-rgb), .55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--vurgu-rgb), .18);
  outline: none;
}

/* Kartin uzerinden bir kez gecen parlama. Ayri bir katman cunku kartin kendi
   `overflow: hidden`i icinde kalmasi gerekiyor. */
.kota-kart-isik {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .09) 47%, transparent 62%);
  transform: translateX(-110%);
  transition: transform .85s var(--egri);
}

.kota-kart:hover .kota-kart-isik,
.kota-kart:focus-visible .kota-kart-isik { transform: translateX(110%); }

/* Onerilen kart bekleme halinde bile hafifce nefes aliyor: dokunmadan once
   de goz once oraya gidiyor. */
.kota-kart.onerilen,
.kota-kart.one-cikan {
  border-color: rgba(var(--vurgu-rgb), .40);
}

.kota-kart.onerilen {
  animation: kota-kart-gir .62s var(--yay) forwards, kota-nefes 3.6s ease-in-out infinite;

  /* Ayni tuzak burada da vardi: kisayol `animation-delay`i sifirlayinca
     onerilen kart sira beklemeden giriyordu. Ustteki `.kota-kart` kurali
     `calc(var(--sira) * 85ms + 300ms)` diyor; birebir tekrarlanmasi
     gerekiyor. Bkz. `.plan-kart.one-cikan` acikllamasi. */
  animation-delay: calc(var(--sira, 0) * 85ms + 300ms),
                   calc(var(--sira, 0) * 85ms + 1500ms);
}

@keyframes kota-nefes {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--vurgu-rgb), .00); }
  50%      { box-shadow: 0 0 28px -4px rgba(var(--vurgu-rgb), .38); }
}

.kota-kart-rozet {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 3px 9px;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--vurgu-murekkep);
  background: var(--vurgu);
  border-radius: var(--r-tam);
}

.kota-kart-rozet.bos { visibility: hidden; }

.kota-kart-ad {
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.kota-kart-fiyat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 4px 0 8px;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.kota-kart-fiyat i {
  font-size: .8rem;
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}

.kota-kart-ozet {
  margin-bottom: 14px;
  /* Uc satirlik yer her kartta ayrilyor: ozet kisa olan kartta liste yukari
     kayip komsusuyla hizadan cikiyordu. */
  min-height: 3.4em;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--muted);
}

.kota-kart-liste {
  flex: 1;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.kota-kart-liste li {
  position: relative;
  padding: 0 0 8px 19px;
  font-size: .81rem;
  line-height: 1.35;
  color: var(--ink-yumusak);
}

.kota-kart-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 13px;
  height: 13px;
  background: var(--vurgu);
  -webkit-mask: var(--ik-onay) center / contain no-repeat;
  mask: var(--ik-onay) center / contain no-repeat;
}

.kota-kart-sec {
  padding: 9px 12px;
  font-size: .84rem;
  font-weight: 620;
  text-align: center;
  color: var(--ink);
  background: var(--yuzey-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: background var(--hizli) var(--egri), color var(--hizli) var(--egri),
              border-color var(--hizli) var(--egri);
}

.kota-kart:hover .kota-kart-sec,
.kota-kart:focus-visible .kota-kart-sec,
.kota-kart.onerilen .kota-kart-sec {
  color: var(--vurgu-murekkep);
  background: var(--vurgu);
  border-color: transparent;
}

/* ── secim ani ──
   Secilen kart one cikiyor, otekiler geri cekiliyor. Form gonderimi 320 ms
   sonra; aradaki bosluk "tikladim mi?" hissini kaldiriyor. */
.kota-sahne.seciliyor .kota-kart:not(.secili) {
  opacity: .22;
  transform: scale(.95);
  filter: blur(1.5px);
}

.kota-sahne.seciliyor .kota-kart.secili {
  transform: translateY(-14px) scale(1.05);
  border-color: var(--vurgu);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 0 40px -6px rgba(var(--vurgu-rgb), .5);
}

.kota-sahne.seciliyor .kota-eylem { opacity: .3; }

/* ── alt eylemler ── */
.kota-eylem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
  opacity: 0;
  transition: opacity .5s var(--cikis) .7s;
}

.kota-sahne.acik .kota-eylem { opacity: 1; }

.kota-vazgec {
  padding: 9px 16px;
  font: inherit;
  font-size: .88rem;
  color: var(--ink-yumusak);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--hizli) var(--egri), color var(--hizli) var(--egri);
}

.kota-vazgec:hover { background: var(--yuzey-2); color: var(--ink); }

.kota-birincil {
  padding: 11px 22px;
  font-size: .92rem;
  font-weight: 620;
  text-decoration: none;
  color: var(--vurgu-murekkep);
  background: var(--vurgu);
  border-radius: var(--r-sm);
  transition: filter var(--hizli) var(--egri), transform var(--hizli) var(--egri);
}

.kota-birincil:hover { filter: brightness(1.07); transform: translateY(-1px); }

.kota-tumu {
  font-size: .85rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--hizli) var(--egri), border-color var(--hizli) var(--egri);
}

.kota-tumu:hover { color: var(--vurgu); border-bottom-color: rgba(var(--vurgu-rgb), .45); }

/* Kota balonu: hata DEGIL. Kirmizi yerine sakin bir kenar. */
.msg-kota .msg-body {
  color: var(--ink-yumusak);
  padding-left: 10px;
  border-left: 2px solid var(--line-vurgu);
}

/* ── dar ekran ──
   Dort dik kart yan yana sigmiyor; yatay kaydirmaya geciyorlar ve her kart
   ortaya oturuyor (scroll-snap). Alt alta yigmak sahneyi metrelerce
   uzatiyordu. */
@media (max-width: 860px) {
  .kota-sahne { place-items: start center; }

  .kota-icerik { padding: 8px 0 0; }

  .kota-baslik, .kota-alt { padding: 0 20px; }

  .kota-kartlar {
    justify-content: flex-start;
    /* Kaydirilabilir kutunun kendisi ekran genisliginde kaliyor; icindeki
       kartlar tasiyor. min-width olmadan flex kutusu icerige gore buyuyup
       kaydirmayi anlamsiz kiliyor. */
    min-width: 0;
    padding: 12px 20px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .kota-kartlar::-webkit-scrollbar { display: none; }

  .kota-kart {
    flex-basis: 200px;
    scroll-snap-align: center;
  }

  .kota-eylem { flex-wrap: wrap; padding: 0 20px; }
}

/* ==========================================================================
   HAREKETI AZALT
   Kullanici isletim sisteminde hareketi kapatmissa: sahne ve kartlar hala
   GORUNUYOR, yalnizca yol almiyorlar. Animasyonu kaldirirken opacity'yi
   duzeltmeyi unutmak elemani gorunmez birakirdi.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kota-sahne,
  .kota-baslik,
  .kota-alt,
  .kota-eylem,
  .kota-kart {
    transition-duration: .01ms;
    animation: none;
    opacity: 1;
    transform: none;
    translate: none;
    rotate: none;
    filter: none;
  }

  .kota-hale { animation: none; }
  .kota-kart-isik { display: none; }
}

/* Yan menudeki "Planlar" satiri. Ikon app.css'teki kivilcimla ayni; menudeki
   diger satirlarin bicimi oradan geliyor, burada yalniz ikon veriliyor. */
.ey-plan::before {
  -webkit-mask-image: var(--ik-kivilcim);
  mask-image: var(--ik-kivilcim);
}

/* ==========================================================================
   FIYAT SAYFASI
   ========================================================================== */
.plan-sayfa {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}

.plan-sayfa.dar { max-width: 560px; }

.plan-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}

.plan-geri {
  font-size: .9rem;
  color: var(--ink-yumusak);
  text-decoration: none;
}

.plan-geri:hover { color: var(--ink); }

.plan-giris {
  max-width: 620px;
  margin: 0 auto 34px;
  text-align: center;
}

.plan-giris h1 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 680;
  letter-spacing: -.02em;
  color: var(--ink);
}

.plan-giris p {
  margin: 0;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--ink-yumusak);
}

.plan-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 16px;
  /* `start` DEGIL `stretch`: kartlar kendi icerigi kadar uzayinca alttaki
     "geç" dugmeleri farkli hizalarda kaliyor ve tablo bozuk goruniyordu. */
  align-items: stretch;
}

.plan-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  background: var(--yuzey-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Kartlar sirayla giriyor (--gecikme blade'den). Hepsi ayni anda belirince
     goz nereye bakacagini bilemiyordu; 90 ms'lik kayma soldan saga okutuyor.
     Giris `translate` ekseninde: `transform` kullanilirsa animasyon forwards
     ile son degeri tutup hover yukselmesini olduruyor (kota kartlarinda
     yasandi). */
  opacity: 0;
  translate: 0 14px;
  animation: plan-gir .5s var(--yay) forwards;
  animation-delay: var(--gecikme, 0ms);
  transition: border-color var(--orta) var(--egri), transform var(--orta) var(--egri);
}

@keyframes plan-gir {
  to { opacity: 1; translate: none; }
}

.plan-kart:hover {
  border-color: var(--line-vurgu);
  transform: translateY(-2px);
}

.plan-kart.one-cikan {
  border-color: rgba(var(--vurgu-rgb), .38);
  animation: plan-gir .5s var(--yay) forwards, kota-nefes 3.6s ease-in-out infinite;

  /* GECIKMEYI GERI KOYMAK SART (2026-09-06).

     `animation` bir KISAYOL: yazildigi anda `animation-delay` dahil butun
     `animation-*` ozelliklerini basa donduruyor. Bu kural `.plan-kart`ten
     daha ozel oldugu icin oradaki `animation-delay: var(--gecikme)` da
     eziliyordu ve one cikan kart, sirasini beklemeden HEMEN giriyordu:
     otekiler soldan saga sirayla akarken o biri once beliriyor, goz bunu
     "kayma" olarak goruyor. Sahada bildirildi.

     Iki animasyon var, iki gecikme yaziliyor: kart kendi sirasinda girsin,
     nefes de girisinden 1.2 sn SONRA baslasin (sabit 1.2s yazilsaydi
     gecikmeli kartlarda nefes girisin ortasinda baslardi). */
  animation-delay: var(--gecikme, 0ms), calc(var(--gecikme, 0ms) + 1.2s);
}

/* Kartin uzerinden hover'da bir kez gecen parlama (kota sahnesindekiyle ayni
   fikir; iki yerde ayni his). */
.plan-isik {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Karta `overflow: hidden` VERILMIYOR: rozet kartin ust kenarina biniyor ve
     kirpiliyordu. Parlamayi kendi yariçapiyla sinirlamak ayni isi goruyor. */
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .07) 47%, transparent 62%);
  transform: translateX(-110%);
  transition: transform .85s var(--egri);
}

.plan-kart:hover .plan-isik { transform: translateX(110%); }

.plan-kart.suanki { border-color: var(--ok); }

.plan-rozet {
  position: absolute;
  top: -9px;
  left: 20px;
  padding: 3px 9px;
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--vurgu-murekkep);
  background: var(--vurgu);
  border-radius: var(--r-tam);
}

.plan-kart h2 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--ink);
}

.plan-ozet {
  margin: 0 0 16px;
  min-height: 2.9em;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--muted);
}

.plan-fiyat {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--ink);
}

.plan-tutar {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.plan-para { font-size: 1.1rem; font-weight: 600; }

.plan-donem {
  margin-left: 2px;
  font-size: .85rem;
  color: var(--muted);
}

.plan-usd {
  margin: 4px 0 16px;
  font-size: .76rem;
  color: var(--muted);
}

.plan-liste {
  flex: 1;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.plan-liste li {
  position: relative;
  padding: 0 0 11px 23px;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--ink-yumusak);
}

.plan-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  background: var(--ok);
  -webkit-mask: var(--ik-onay) center / contain no-repeat;
  mask: var(--ik-onay) center / contain no-repeat;
}

/* Kapali ozellik gizlenmiyor, SOLUYOR: satin alan kisi neyi almadigini da
   gormeli, yoksa ust plan neden pahali anlasilmiyor. */
.plan-liste li.yok {
  color: var(--muted);
  opacity: .62;
}

.plan-liste li.yok::before {
  background: var(--muted);
  -webkit-mask-image: var(--ik-carpi);
  mask-image: var(--ik-carpi);
}

.plan-liste b { color: var(--ink); font-weight: 620; }

.plan-alt {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  color: var(--muted);
}

.plan-btn {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: .9rem;
  font-weight: 620;
  text-align: center;
  text-decoration: none;
  color: var(--vurgu-murekkep);
  background: var(--vurgu);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: filter var(--hizli) var(--egri), transform var(--hizli) var(--egri);
}

.plan-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.plan-btn:active { transform: translateY(0); }

.plan-btn.pasif {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
  cursor: default;
}

.plan-btn.pasif:hover { filter: none; transform: none; }

.plan-notlar {
  max-width: 620px;
  margin: 40px auto 0;
  text-align: center;
}

.plan-notlar p {
  margin: 0 0 10px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--muted);
}

.plan-uyari,
.plan-bilgi {
  max-width: 620px;
  margin: 0 auto 22px;
  padding: 12px 15px;
  font-size: .88rem;
  line-height: 1.5;
  border-radius: var(--r-sm);
}

.plan-uyari {
  color: var(--danger-ink);
  background: rgba(224, 100, 90, .10);
  border: 1px solid rgba(224, 100, 90, .28);
}

.plan-bilgi {
  color: var(--ink-yumusak);
  background: var(--vurgu-sakin);
  border: 1px solid var(--line-vurgu);
}

.plan-bilgi a { color: var(--vurgu); }

/* ── odeme sayfasi ── */
.plan-odeme {
  padding: 26px 24px;
  background: var(--yuzey-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.plan-odeme h1 {
  margin: 0 0 14px;
  font-size: 1.3rem;
  font-weight: 660;
  color: var(--ink);
}

.plan-anlat {
  margin: 0 0 18px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-yumusak);
}

.plan-hesap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0 0 20px;
  padding: 16px;
  background: var(--yuzey-2);
  border-radius: var(--r);
}

.plan-hesap dt {
  font-size: .8rem;
  color: var(--muted);
}

.plan-hesap dd {
  margin: 0;
  font-size: .9rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* IBAN ve referans elle yazilacak: tek boslukli font okumayi kolaylastiriyor
   ve secildiginde tam kopyalaniyor. */
.tek-boslukta,
.plan-referans {
  font-family: var(--mono);
  letter-spacing: .02em;
}

.plan-referans { color: var(--vurgu); }

.plan-kucuk {
  margin: 16px 0 0;
  font-size: .76rem;
  color: var(--muted);
}

/* Fiyat sayfasi kartlari da hareket kapaliyken yalniz duruyor, kayboluyor
   degil (kota sahnesinin karsiligi yukarida). */
@media (prefers-reduced-motion: reduce) {
  .plan-kart {
    transition-duration: .01ms;
    animation: none;
    opacity: 1;
    transform: none;
    translate: none;
  }

  .plan-isik { display: none; }
}