/* Bölüm: E-Com Asistan paketleri.

   E-Com Asistan'ın kendi kimliği turkuaz; bu bölüm sitenin tek yerinde
   gradyanı serbest bırakıyor. Kural şu: GRADYAN ÇERÇEVEDE VE BAŞLIK
   ALANINDA, metin her zaman beyaz zeminde. Madde listesini gradyanın
   üstüne koymak okunurluğu düşürürdü.

   Kontrast notları satır aralarında; hepsi beyaz ya da çok açık turkuaz
   (#ecfeff / #cffafe) zemine göre ölçüldü. */

.ecp { position: relative; }

/* Izgaranın arkasında yumuşak turkuaz ışıma — kartları öne çıkarır,
   metnin altına girmez (blur + düşük opaklık). */
.ecp::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 12%;
    left: 50%;
    width: min(940px, 92%);
    height: 420px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side,
                rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0) 72%);
    filter: blur(18px);
    pointer-events: none;
}

.ecp > * { position: relative; z-index: 1; }

/* DİKKAT — boşluk ölçeğinde --sp-7 ve --sp-9 YOK (bkz. tokens.css: 1,2,3,4,
   5,6,8,10,12,16,20,24). Olmayan bir token yazınca bildirimin tamamı geçersiz
   sayılıyor ve boşluk sıfıra düşüyor; kartların kenar boşluğu bu yüzden hiç
   çizilmemişti. Yalnızca ölçekte OLAN adımlar kullanılır. */

.ecp__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-8);
    align-items: start;
    margin-top: var(--sp-10);
}

/* --------------------------------------------------------------- kart */

/* Gradyan çerçeve: dış katman gradyan, iç katman beyaz. */
.ecp__card {
    position: relative;
    padding: 2px;
    border-radius: 24px;
    background: linear-gradient(150deg, var(--brand-200), rgba(207, 250, 254, 0.35) 55%, rgba(255, 255, 255, 0));
    box-shadow: 0 16px 40px rgba(8, 51, 68, 0.08);
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.ecp__card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(8, 51, 68, 0.14); }

/* Öne çıkan paket: gradyan doygunlaşır ve kart bir tık yukarı kalkar. */
.ecp__card--one {
    background: linear-gradient(150deg, #22d3ee, var(--brand-600) 48%, #0e7490);
    box-shadow: 0 26px 60px rgba(8, 51, 68, 0.22);
}

.ecp__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
    border-radius: 22px;
    background: #fff;
}

/* Başlık alanının açık turkuaz yıkaması */
.ecp__inner::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 2px 2px auto 2px;
    height: 190px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(170deg, #f0fdff, #ecfeff 42%, rgba(255, 255, 255, 0));
    pointer-events: none;
}

.ecp__inner > * { position: relative; z-index: 1; }

.ecp__badge {
    position: absolute;
    top: -13px;
    right: 20px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22d3ee, var(--brand-700));
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    color: #fff;
    box-shadow: 0 6px 16px rgba(8, 51, 68, 0.22);
}

.ecp__card--one .ecp__badge { top: -12px; }

/* --------------------------------------------------------------- başlık */

.ecp__channels {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.18);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    /* brand-800 açık turkuaz üstünde 7:1 üstü */
    color: var(--brand-800);
}

.ecp__name {
    margin-top: var(--sp-4);
    font-size: 1.45rem;
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

.ecp__tagline {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    /* Beyaz üstünde ink-600 → 7,4:1 */
    color: var(--ink-600);
}

/* ---------------------------------------------------------------- fiyat */

.ecp__price-box {
    margin-top: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.ecp__price {
    font-size: clamp(2rem, 1.4rem + 1.7vw, 2.5rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink-900);
}

.ecp__price-note {
    margin-top: 4px;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde ink-500 → 4,8:1 */
    color: var(--ink-500);
}

.ecp__unit {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--brand-50);
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    color: var(--brand-800);
}

/* -------------------------------------------------------------- taksit */

/* Taksit satırı, "kanal başına" rozetinden DAHA GÜÇLÜ durur: biri
   karşılaştırma bilgisi, diğeri satın alma kararını doğrudan değiştiren
   bilgi. Dolu turkuaz zemin, ince rozetin yanında ayrışıyor. */
.ecp__taksit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    /* brand-50 zeminin bir tık üstü: kart beyazından ayrılsın ama
       fiyatın kendisiyle yarışmasın */
    background: var(--brand-50);
    border: 1px solid var(--brand-100, #cdeef3);
}

.ecp__taksit-tutar {
    font-size: 15px;
    font-weight: var(--fw-bold);
    /* brand-50 üstünde brand-800 → 7,1:1 */
    color: var(--brand-800);
}

/* "vade farksız" ibaresi ayrı satırda değil, tutarın yanında: ikisi tek
   cümle gibi okunuyor ve kart uzamıyor. */
.ecp__taksit-not {
    font-size: 11.5px;
    font-weight: var(--fw-semibold);
    color: var(--brand-700);
    text-transform: lowercase;
}

/* ---------------------------------------------------------------- buton */

.ecp__cta {
    width: 100%;
    margin-top: var(--sp-5);
    justify-content: center;
}

/* Öne çıkan kartın butonu gradyan; beyaz yazı brand-700'e kadar iniyor. */
.ecp__card--one .ecp__cta {
    background: linear-gradient(135deg, var(--brand-700), #0e7490);
    border-color: transparent;
}

/* Diğer iki kart: `btn--ghost` saydam ve ÇERÇEVESİZ olduğu için buton düz
   yazı gibi duruyordu. Fiyat kartında en kritik öğe butondur; turkuaz
   çerçeveyle butona benzetiliyor.
   brand-600 çizgi beyaz üstünde 3,68:1 (grafik öğe eşiği 3:1),
   brand-800 yazı 7:1 üstü. */
.ecp__card:not(.ecp__card--one) .ecp__cta {
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--brand-600);
    color: var(--brand-800);
}

.ecp__card:not(.ecp__card--one) .ecp__cta:hover {
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1.5px var(--brand-700);
    color: var(--brand-800);
}

/* ---------------------------------------------------------------- liste */

.ecp__list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; flex: 1; }

.ecp__li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
    line-height: 1.5;
    /* Beyaz üstünde ink-700 → 10,4:1 */
    color: var(--ink-700);
}

.ecp__tick {
    position: relative;
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee, var(--brand-700));
}

.ecp__tick::after {
    content: "";
    position: absolute;
    top: 4.5px;
    left: 6px;
    width: 4.5px;
    height: 7.5px;
    border: solid #fff;
    border-width: 0 1.9px 1.9px 0;
    transform: rotate(45deg);
}

/* ------------------------------------------------------------------ not */

.ecp__note {
    max-width: 60ch;
    margin: var(--sp-8) auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-600);
}

/* ------------------------------------------------------------ duyarlılık */

@media (min-width: 1024px) {
    /* Öne çıkan kart yalnız geniş ekranda yukarı kalkar; dar ekranda
       yığılmış kartlar arasında kayma hizayı bozuyor. */
    .ecp__card--one { transform: translateY(-14px); }
    .ecp__card--one:hover { transform: translateY(-18px); }
}

@media (min-width: 1024px) {
    .ecp__inner { padding: var(--sp-8); }
}

@media (max-width: 600px) {
    .ecp__inner { padding: var(--sp-6) var(--sp-5); }
    .ecp::before { height: 300px; }
    .ecp__badge { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ecp__card,
    .ecp__card:hover,
    .ecp__card--one,
    .ecp__card--one:hover { transition: none; transform: none; }
}