/* ===========================================================================
   pricing.css — subscribe.html (fiyatlandirma / donusum sayfasi)
   ---------------------------------------------------------------------------
   Kurallar:
   - Her deger design-system.css tokenlarindan gelir; ham renk/piksel yazilmaz.
   - components.css'ten SONRA yuklenir, bu yuzden .ds-* uzerinde ince ayar
     yapabilir. Tasarim sistemi sinifi varsa once o kullanilir.
   - Ikincil aksan `--accent-2` (turkuaz) design-system.css'ten gelir.
   - Hareket: motion.css zaten components.css icinden @import edilir; sayfa
     ayrica ds-motion-fx.js yukler. `fx-*` ogeleri JS calismazsa ya da
     reduced-motion acikken gizlenmez, oldugu gibi gorunur.
   =========================================================================== */

/* ------------------------------------------------------------------ sayfa */

body.ds {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 46%),
        var(--bg);
}

.ds-skip-link:not(:focus):not(:focus-visible) {
    box-shadow: none;
}

.wrap {
    max-width: var(--container-content);
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--section-y-sm);
}

/* Tema anahtari sag ust kosede sabit duruyor; ust seride onunla cakismayalim. */
.top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-right: 58px;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    text-decoration: none;
}

.brand:hover { color: var(--accent-text); }

.top-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.top-right a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent-text);
    text-decoration: none;
}

.lang-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
}

.lang-group label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
}

.lang-select {
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    outline: none;
    /* Dokunma hedefi esigi: --tap-target = 44px. */
    min-height: var(--tap-target);
}

.lang-select:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

/* `hidden` niteligi HER ZAMAN kazanmali. Eski kodda .sandbox-badge'in
   display:inline-flex kurali [hidden]'i eziyordu; test rozeti canli
   ziyaretcilere de gorunuyordu. */
.wrap [hidden] { display: none !important; }

/* ------------------------------------------------------------------- hero */

.pricing-hero {
    max-width: 46rem;
    margin: 0 0 var(--space-8);
}

.pricing-eyebrow {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-text);
}

.pricing-page h1 {
    margin: 0;
    font-size: clamp(var(--text-2xl), 4.2vw, var(--text-4xl));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    color: var(--text);
}

.pricing-lede {
    max-width: var(--measure);
    margin: var(--space-4) 0 0;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

/* ------------------------------------------------- koltuk karsilastirmasi */
/* Sayfanin en ustundeki kucuk karsilastirma. Buyuk karsilastirma tablosunun
   aksine yatay KAYDIRMAZ: uc sutunu ve kisa sayilari var, 390 px'te de tablo
   olarak okunur. Bu yuzden min-width verilmiyor; kapsayicidaki overflow-x
   yalnizca cok buyuk yazi tipi olceginde devreye giren emniyet supabidir.
   Renkler yalnizca check:contrast'in dogruladigi ciftlerden secilir:
   --text/--accent-soft, --accent-text/--accent-soft, --text-muted/--surface. */

.pricing-seats {
    margin: 0 0 var(--space-5);
    padding: var(--card-pad);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.pricing-seats-head {
    max-width: var(--measure);
    margin-bottom: var(--space-5);
}

.pricing-seats h2 {
    margin: 0;
    font-size: clamp(var(--text-lg), 2.6vw, var(--text-2xl));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    color: var(--text);
}

.pricing-seats-sub {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-seats-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.pricing-seats-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    color: var(--text);
}

.pricing-seats-table th,
.pricing-seats-table td {
    padding: var(--space-3);
    text-align: start;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.pricing-seats-table thead th {
    vertical-align: bottom;
    border-bottom: 1px solid var(--border-strong);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text);
}

.pricing-seats-table tbody th[scope="row"] {
    font-weight: var(--weight-medium);
    white-space: nowrap;
    color: var(--text);
}

.pricing-seats-table tbody tr:last-child th,
.pricing-seats-table tbody tr:last-child td {
    border-bottom: none;
}

.pricing-seats-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pricing-seats-col-note {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--text-muted);
}

.pricing-seats-table td {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pricing-seats-table thead th:not(:first-child) { text-align: end; }

.pricing-seats-rival {
    font-weight: var(--weight-medium);
    color: var(--text-muted);
}

/* Synaptix sutunu isaretli dursun: yumusak marka zemini + koyu govde metni.
   Bu cift check:contrast listesinde (--text / --accent-soft). */
.pricing-seats-table .pricing-seats-ours-col {
    background: var(--accent-soft);
    font-weight: var(--weight-bold);
    color: var(--text);
}

.pricing-seats-table thead th.pricing-seats-ours-col {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.pricing-seats-table tbody tr:last-child .pricing-seats-ours-col {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.pricing-seats-table .pricing-seats-ours-col .pricing-seats-col-note {
    color: var(--accent-text);
}

.pricing-seats-punch {
    margin: var(--space-5) 0 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    text-wrap: balance;
    color: var(--text);
}

.pricing-seats .pricing-footnote {
    margin-top: var(--space-3);
}

/* 390 px: hucre ic bosluklarini kis, sutun basliklari sarilarak sigsin. */
@media (max-width: 560px) {
    .pricing-seats { padding: var(--space-5) var(--space-4); }

    .pricing-seats-table th,
    .pricing-seats-table td {
        padding: var(--space-2);
    }

    /* Kaydirmak yerine kucultuyoruz: uc sutun 390 px'te de tam sigar. */
    .pricing-seats-table { font-size: var(--text-xs); }
}

/* ----------------------------------------------------------- free katmani */
/* Free satin alinabilir bir plan degil (checkout yok, kayit var), bu yuzden
   plan izgarasindan ayri bir seritte duruyor. Yine de bes katmandan biri:
   ayda 100 mesaj / 1 bot / rozet zorunlu / asim yok. */

.pricing-free-tier {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5) var(--space-6);
    align-items: start;
    margin: 0 0 var(--space-5);
    padding: var(--card-pad);
    border: 1px dashed var(--accent-soft-border);
    border-radius: var(--radius-xl);
    background: var(--accent-soft);
}

.pricing-free-lead { min-width: 0; }

.pricing-free-eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-text);
}

.pricing-free-name {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.pricing-free-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
}

.pricing-free-amount {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.pricing-free-amount small {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
}

.pricing-free-term {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
}

.pricing-free-for {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-free-facts {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.pricing-free-facts li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: var(--space-2);
    align-items: start;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text);
}

/* Plan kartlarindaki `.list li::before` ile ayni maske: isaret metin degil,
   ekran okuyucu yalnizca madde metnini okur. */
.pricing-free-facts li::before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    background: var(--accent-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

.pricing-free-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

/* `.btn` zaten width:100%; plan kartlarindaki cagri butonlariyla ayni
   genislik davranisi burada da korunuyor. */
.pricing-free-limit {
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

@media (max-width: 960px) {
    .pricing-free-tier { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- sandbox uyarilari */

.sandbox-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-full);
    background: var(--warning-bg);
    color: var(--warning-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.sandbox-warning {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    color: var(--warning-fg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* ---------------------------------------------------- faturalama anahtari */

.pricing-billing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
}

.billing-toggle,
.pricing-toggle {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-muted);
}

.billing-btn {
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-6);
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.billing-btn:hover:not(.active) {
    color: var(--text);
    background: var(--surface-hover);
}

.billing-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

.billing-btn.active {
    background: var(--accent);
    color: var(--accent-fg);
    box-shadow: var(--shadow-sm);
}

.pricing-save {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-full);
    background: var(--success-bg);
    color: var(--success-fg);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------- plan kartlari */

/* Dort ucretli katman (Starter / Pro / Business / Enterprise) tek satirda
   durur. Free bunlarin ustundeki seritte oldugu icin izgaraya girmiyor;
   1200 px'lik konteynerde bes kart okunamayacak kadar dar olurdu. */
.cards,
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
    margin: 0 0 var(--space-5);
}

.card,
.pricing-card {
    display: flex;
    flex-direction: column;
    padding: var(--card-pad);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* "En populer" gorsel one cikarma: hafif buyutme + belirgin kenarlik + golge. */
.pricing-card--featured {
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg);
}

/* Buyutme yalnizca dort kartin yan yana durdugu genislikte anlamli; iki
   sutuna dustugunde kart zaten genis oluyor ve olcek sayfa kenarina tasiyor. */
@media (min-width: 1101px) {
    .pricing-card--featured {
        transform: scale(1.035);
        z-index: var(--z-raised);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-card--featured { transform: none; }
}

.pricing-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 2rem;
}

.plan-name {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--accent-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.pricing-for {
    margin: var(--space-2) 0 var(--space-5);
    min-height: 2.7em;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-muted);
}

.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: clamp(var(--text-3xl), 3.6vw, var(--text-4xl));
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
    color: var(--text);
}

.price small {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    color: var(--text-muted);
}

.annual {
    min-height: 1.2rem;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* "449 $'dan baslar" gibi sabit olmayan fiyatlarin altindaki aciklama. */
.pricing-price-note {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--accent-fg);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.btn:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-fg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

.btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.btn:disabled {
    background: var(--surface-active);
    border-color: var(--border);
    color: var(--text-subtle);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn-quiet {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    box-shadow: none;
}

.btn-quiet:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--accent);
    color: var(--accent-text);
    box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover:not(:disabled) { transform: none; }
}

.pricing-card .btn { margin-top: var(--space-3); }

/* ----------------------------------------------------- karttaki icerik listesi */

.pricing-included-label {
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-muted);
}

.list li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: var(--space-2);
    align-items: start;
}

/* Onay isareti maskeyle cizilir; ekran okuyucuya sahte metin sizmaz. */
.list li::before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    background: var(--accent-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

/* Ucretli eklenti notu: "Plana dahil" listesinin ALTINDA, listenin ICINDE
   degil. Onay isareti "plan ucretine dahil" demek olur; burada isaret
   kilit, renk de yardimci ton, cunku kalem acilabilir ama ayrica
   ucretlidir. Listeyle ayni izgara (isaret sutunu + metin) kullanilir ki
   metin bloklari ayni cizgiden bassin. */
.pricing-card-addon {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: var(--space-2);
    align-items: start;
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-subtle);
}

.pricing-card-addon::before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    background: var(--text-subtle);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5.1a3 3 0 016 0V7' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Crect x='3.2' y='6.9' width='9.6' height='6.4' rx='1.4' fill='%23000'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5.1a3 3 0 016 0V7' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Crect x='3.2' y='6.9' width='9.6' height='6.4' rx='1.4' fill='%23000'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

.pricing-card-footer {
    margin-top: auto;
    padding-top: var(--space-4);
}

.pricing-all-features {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent-text);
    text-decoration: none;
}

.pricing-all-features:hover { text-decoration: underline; }

.pricing-all-features:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.hint {
    min-height: 1.4rem;
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent-text);
}

.pricing-note {
    max-width: var(--measure);
    margin: 0 0 var(--space-12);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-note a { color: var(--accent-text); }

/* -------------------------------------------------------------- bolum basi */

.pricing-section {
    margin: 0 0 var(--section-y-sm);
    scroll-margin-top: var(--space-6);
}

.pricing-section-head {
    max-width: var(--measure);
    margin: 0 0 var(--space-6);
}

.pricing-section h2 {
    margin: 0;
    font-size: clamp(var(--text-xl), 2.6vw, var(--text-2xl));
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    color: var(--text);
}

.pricing-section-sub {
    margin: var(--space-3) 0 0;
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

/* ---------------------------------------------------- kullanim hesaplayici */

.pricing-calc-panel {
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.pricing-calc-control label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.pricing-calc-value {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
    color: var(--accent-text);
}

.pricing-range {
    display: block;
    width: 100%;
    min-height: var(--tap-target);
    margin: 0;
    padding: 0;
    background: transparent;
    accent-color: var(--accent);
    cursor: pointer;
}

.pricing-range:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 4px;
    border-radius: var(--radius-full);
}

.pricing-range-scale {
    display: flex;
    justify-content: space-between;
    margin: 0 0 var(--space-6);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-subtle);
}

.pricing-calc-results {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.pricing-calc-card {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
}

.pricing-calc-card.is-best {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.pricing-calc-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 1.75rem;
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text);
}

.pricing-calc-best {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-full);
    background: var(--success-bg);
    color: var(--success-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    white-space: nowrap;
}

.pricing-calc-total {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.pricing-calc-total small {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    color: var(--text-muted);
}

/* Enterprise sabit fiyatli degil; toplam "baslangic fiyati" olarak isaretlenir. */
.pricing-calc-from {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.pricing-calc-breakdown {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.pricing-calc-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Deneme aciklamasi: kaydirac 50 mesajda ya da altindayken denemenin bu
   hacmi karsiladigini soyler, ustunde kapsam disi oldugunu yazar. */
.pricing-calc-free {
    margin: var(--space-5) 0 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-calc-free.is-covered {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success-fg);
    font-weight: var(--weight-medium);
}

.pricing-calc-formula {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-calc-formula code {
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--text);
}

/* ------------------------------------------------------- mesaj paketleri */
/* On odemeli ek mesaj paketleri. Plan kartlariyla ayni izgara ritmi
   (4 -> 2 -> 1) kullanilir ki sayfa iki farkli kart olcegine bolunmesin,
   ama paket karti bir PLAN degil: daha kucuk, aksani yok ve butonu sessiz
   (btn-quiet), cunku goturdugu yer checkout degil iletisim formu. */

.pricing-packs-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.pricing-packs-rules li {
    position: relative;
    padding-inline-start: var(--space-6);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-packs-rules li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.45em;
    width: 0.85rem;
    height: 0.85rem;
    background: var(--accent-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pricing-packs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
    margin: 0;
}

.pricing-pack {
    padding: var(--space-5);
    gap: var(--space-2);
}

.pricing-pack-size {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-text);
}

.pricing-pack-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    color: var(--text);
}

.pricing-pack-price small {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--text-muted);
}

/* Tek satirlik kunye: etiket solda, birim fiyat sagda. <dl> secildi cunku
   bu gercekten bir terim/deger cifti. */
.pricing-pack-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    margin: var(--space-3) 0 var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}

.pricing-pack-facts dt {
    margin: 0;
    color: var(--text-muted);
}

.pricing-pack-facts dd {
    margin: 0;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: end;
    color: var(--text);
}

/* "Asimdan ucuz" satiri kunyeden ayri duruyor: dort plan adi yan yana
   sigmadigi icin dl'in dar sag sutununda kelime kelime alt alta dokuluyordu.
   Etiket ustte, degerler altta ve SOLA yasli; satir dolunca dogal sarilir. */
.pricing-pack-beats {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
}

.pricing-pack-beats-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.pricing-pack-beats-value {
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text);
}

/* Kartlar farkli yukseklikte olsa da buton hep en altta hizalansin. Aradaki
   nefes payi .pricing-pack-facts'in alt bosluguyla veriliyor; margin-top:auto
   bir margin degerini kabul etmezdi. Genislik, dokunma hedefi ve ic dolgu
   zaten .btn'den geliyor. */
.pricing-pack-cta {
    margin-top: auto;
}

.pricing-packs-example {
    max-width: var(--measure);
    margin: var(--space-5) 0 0;
    padding: var(--space-4);
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text);
}

@media (max-width: 1100px) {
    .pricing-packs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-packs-rules { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .pricing-packs-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------- karsilastirma tablosu */

.pricing-table-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}

.pricing-table-scroll:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
}

.pricing-compare-table {
    width: 100%;
    /* Mobilde satirlar sikismasin diye min genislik veriyoruz: kapsayici
       yatay kayar, sayfa govdesi tasmaz. Bes plan sutunu (Free, Starter,
       Pro, Business, Enterprise) + ozellik sutunu var. */
    min-width: 64rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    color: var(--text);
}

/* Sutun genisligini sabitle: Enterprise'daki uzun degerler kolonu sismesin,
   bes plan sutunu ayni genislikte kalsin. */
.pricing-compare-table thead th:first-child { width: 22%; }
.pricing-compare-table thead th:not(:first-child) { width: 15.6%; }

.pricing-compare-table th,
.pricing-compare-table td {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

/* Plan sutunlari ortalanir: hem klasik karsilastirma gorunumu, hem de
   isaretler donmus ozellik sutununun kenarina yapismaz. */
.pricing-compare-table td,
.pricing-compare-table thead th:not(:first-child) {
    text-align: center;
}

.pricing-compare-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-strong);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    white-space: nowrap;
}

.pricing-compare-table thead th:first-child {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.pricing-th-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.pricing-th-price {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* "baslangic" gibi fiyati niteleyen kucuk not. */
.pricing-th-note {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: lowercase;
    color: var(--text-subtle);
}

/* Tablo yatay kayarken ozellik adi ekranda kalmali; aksi halde mobilde hangi
   satira baktiginizi kaybediyorsunuz. Kategori basligi 4 sutun genisliginde
   oldugu icin hucreyi degil, ICINDEKI etiketi yapisik tutuyoruz. */
.pricing-compare-table thead th:first-child,
.pricing-compare-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    /* Donmus sutunun kenari belli olsun. */
    box-shadow: 1px 0 0 var(--border);
}

.pricing-compare-table tbody th[scope="row"] {
    z-index: var(--z-raised);
    background: var(--surface);
    font-weight: var(--weight-medium);
    color: var(--text);
}

.pricing-compare-table thead th:first-child {
    z-index: calc(var(--z-sticky) + 1);
}

.pricing-group-row th {
    padding-top: var(--space-5);
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-strong);
}

.pricing-group-label {
    position: sticky;
    left: var(--space-4);
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.pricing-compare-table tbody tr:not(.pricing-group-row):hover td,
.pricing-compare-table tbody tr:not(.pricing-group-row):hover th[scope="row"] {
    background: var(--surface-hover);
}

.pricing-compare-table tbody tr:last-child th,
.pricing-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.pricing-cell-value {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    color: var(--text);
}

/* Isaretler metinle degil, erisilebilir etiketle tasinir:
   <span class="pricing-yes" role="img" aria-label="Dahil"></span> */
.pricing-yes,
.pricing-no {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    vertical-align: middle;
}

.pricing-yes {
    background: var(--success-fg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pricing-no {
    background: var(--text-subtle);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ipucu yalnizca tablonun gercekten kaydigi genisliklerde anlamli. */
/* "Yakinda" rozeti: bir sey satmiyoruz, sadece durumu bildiriyoruz. */
.pricing-soon {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-subtle);
    white-space: nowrap;
}

/* ==========================================================================
   META KANALLARI: "onay bekleniyor" isareti
   --------------------------------------------------------------------------
   WhatsApp / Instagram DM / Messenger planlara DAHIL - karsilastirma
   tablosundaki tikler dogru ve yerinde duruyor. Eksik olan sey kurulabilirlik:
   Meta bu kanallar icin Advanced Access istiyor. Bu yuzden isaret satirin
   BASLIGINDA, tikin yaninda degil: "plana dahil mi" ile "bugun kurulabilir
   mi" ayri iki sorudur ve tablo ilkini yanitliyor.

   Renk uretmiyoruz; hepsi mevcut semantik token'lar, boylece check:contrast
   yeni bir cift gormuyor.
   ========================================================================== */
.pricing-row-pending {
    display: inline-block;
    margin-inline-start: var(--space-2);
    padding: 1px var(--space-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-subtle);
    white-space: nowrap;
    vertical-align: middle;
}

/* Dar ekranda satir basligi zaten sikisik; rozet alt satira insin ve
   yatay kaydirma URETMESIN (mobilde 390px hedefi). */
@media (max-width: 720px) {
    .pricing-row-pending {
        display: block;
        margin-inline-start: 0;
        margin-block-start: var(--space-1);
        white-space: normal;
    }
}

/* Uyari, satin alma dugmelerinin hemen ustunde durur; plan izgarasiyla ayni
   olcude olsun ki dipnot gibi gorunmesin. */
.pricing-channel-notice {
    max-width: var(--measure);
    margin: 0 auto clamp(var(--space-5), 2vw, var(--space-8));
}

.pricing-footnote {
    max-width: var(--measure);
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--text-subtle);
}

.pricing-scroll-hint { display: none; }

@media (max-width: 780px) {
    .pricing-scroll-hint {
        display: block;
        margin: var(--space-3) 0 0;
        font-size: var(--text-xs);
        color: var(--text-subtle);
    }
}

/* ------------------------------------------------- Frontier kutusu */
/* Frontier, Enterprise'in aylik mesaj hakkina DAHIL DEGIL. Kutu bu yuzden
   karsilastirma tablosunun bir satiri gibi degil, tablonun ALTINDA kendi
   cercevesinde durur ve iki ucreti YAN YANA gosterir: aylik erisim kilidi
   ve mesaj basina kullanim. Alt alta dizilseydi biri okunup digeri
   atlanabilir, metin de "Frontier dahil" izlenimi verirdi. */
.pricing-frontier {
    margin-top: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.pricing-frontier-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.pricing-frontier-lede {
    max-width: var(--measure);
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-frontier-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-5) var(--space-6);
    align-items: start;
}

.pricing-frontier-col-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-text);
}

.pricing-frontier-unlock {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    color: var(--text);
}

/* Model adi solda, mesaj basina fiyat sagda: <dl> gercekten bir
   terim/deger cifti oldugu icin secildi. */
.pricing-frontier-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    /* Sutun genisligi serbest birakilsaydi 1440px'te model adi solda,
       fiyat ekranin en saginda kalir ve ikisi ayni satir gibi
       okunmazdi. */
    max-width: 26rem;
    margin: 0;
    font-size: var(--text-sm);
}

.pricing-frontier-facts dt {
    margin: 0;
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.pricing-frontier-facts dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: end;
    color: var(--text-muted);
}

@media (max-width: 780px) {
    .pricing-frontier-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------- SSS */

.pricing-faq-list {
    display: grid;
    gap: var(--space-3);
}

.pricing-faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.pricing-faq-item[open] {
    border-color: var(--accent-soft-border);
    background: var(--bg-elevated);
}

.pricing-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--tap-target);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.pricing-faq-item summary::-webkit-details-marker { display: none; }

.pricing-faq-item summary:hover { color: var(--accent-text); }

.pricing-faq-item summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: -2px;
}

.pricing-faq-item summary::after {
    content: "";
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease-out);
}

.pricing-faq-item[open] summary::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .pricing-faq-item summary::after { transition: none; }
}

.pricing-faq-answer {
    margin: 0;
    padding: 0 var(--space-5) var(--space-5);
    max-width: var(--measure);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-faq-answer a { color: var(--accent-text); }

/* -------------------------------------------------------------- son cagri */

.pricing-final {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin: 0 0 var(--space-10);
    padding: var(--space-8);
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent)),
        var(--surface);
}

.pricing-final-copy { max-width: var(--measure); }

.pricing-final h2 {
    margin: 0;
    font-size: clamp(var(--text-xl), 2.6vw, var(--text-2xl));
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    color: var(--text);
}

.pricing-final p {
    margin: var(--space-3) 0 0;
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.pricing-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.pricing-final-actions .btn {
    width: auto;
    padding-inline: var(--space-6);
}

/* ----------------------------------------------------------------- footer */

.footer {
    margin-top: var(--space-10);
    font-size: var(--text-sm);
    color: var(--text-subtle);
    text-align: center;
}

.footer a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    margin: 0 var(--space-3);
    color: var(--text-muted);
    text-decoration: none;
}

.footer a:hover {
    color: var(--accent-text);
    text-decoration: underline;
}

.footer a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- duyarlilik */

/* Dort kart -> iki kart -> tek kart. Bes katmani mobilde okunur tutmanin
   yolu yigmak: 640 px altinda her kart tam genislige yayilir, karsilastirma
   tablosu ise kendi kapsayicisi icinde yatay kayar. */
@media (max-width: 1100px) {
    .cards,
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pricing-calc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .pricing-final { padding: var(--space-6); }
}

@media (max-width: 640px) {
    .cards,
    .pricing-grid { grid-template-columns: minmax(0, 1fr); }

    .pricing-calc-results { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .wrap { padding: var(--space-6) var(--space-4) var(--space-10); }

    .top {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-right { width: 100%; justify-content: space-between; }

    .pricing-billing { align-items: flex-start; }

    .billing-toggle,
    .pricing-toggle { width: 100%; }

    .billing-btn {
        flex: 1 1 0;
        padding-inline: var(--space-3);
    }

    .pricing-calc-panel { padding: var(--space-5) var(--space-4); }

    .pricing-final-actions { width: 100%; }

    .pricing-final-actions .btn { width: 100%; }

    .footer a { margin: 0 var(--space-2); }
}

/* ===========================================================================
   CAYMA HAKKI ONAYI (.checkout-consent)
   Odemeye gitmeden once alinan iki beyan. Statik HTML'de duruyor ve `hidden`
   ile gizleniyor; JS ile enjekte edilseydi yer rezerve edilemez ve bu sayfanin
   CLS butcesi kirilirdi. Renkler yalnizca check-contrast.js'in dogruladigi
   token ciftlerinden secildi.
   =========================================================================== */

.checkout-consent {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.checkout-consent[hidden] { display: none; }

.checkout-consent-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.checkout-consent-panel {
    position: relative;
    width: min(34rem, 100%);
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.checkout-consent-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.checkout-consent-body {
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
}

/* Onay kutusu ve metni tek hedef: metne tiklamak da isaretliyor. */
.checkout-consent-check {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
    color: var(--text);
    cursor: pointer;
}

.checkout-consent-check input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    cursor: pointer;
}

.checkout-consent-note,
.checkout-consent-link {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.checkout-consent-link a { color: var(--accent-text); }

.checkout-consent-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

/* Onaylanmadan odemeye gecilemez; devre disi hali gorunur olmali. */
.checkout-consent-actions .ds-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .checkout-consent-actions { justify-content: stretch; }
    .checkout-consent-actions .ds-btn { flex: 1 1 auto; }
}

/* ===========================================================================
   ENTERPRISE DOGRUDAN SATIN ALMA (.pricing-enterprise-direct)
   Ikincil yol: giris paketini oldugu gibi almak isteyenler icin. Birincil eylem
   ustteki "Ekibimizle gorusun" olarak kaliyor, cunku Enterprise satislarinin
   cogu kapsam konusmasi gerektiriyor. Bu blok `hidden` ile gelir ve yalnizca
   public-checkout-links enterprise linkini gercekten dondurdugunde acilir.
   =========================================================================== */

.pricing-enterprise-direct {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
}

.pricing-enterprise-direct[hidden] { display: none; }

.pricing-enterprise-direct-note {
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--text-muted);
}

/* ==========================================================================
   PLAN KARSILASTIRMASI — DAR EKRAN
   --------------------------------------------------------------------------
   1100 px'in altinda 6 sutunlu tablo yatay kaydirmali bir seride donusuyor
   ve KARSILASTIRMA yuzeyi olmaktan cikiyor: Free sutunundayken Pro'yu
   goremiyorsunuz. Onun yerine iki plan secilir ve yan yana gosterilir.

   Tablo yalnizca `.has-plan-duel` varken gizlenir; o sinifi plan-duel.js
   YUZEY GERCEKTEN KURULDUKTAN SONRA ekliyor. JS yoksa ya da kurulum
   basarisiz olursa tablo oldugu gibi kalir - karsilastirma hicbir durumda
   kaybolmaz.
   ========================================================================== */
@media (max-width: 1100px) {
    #compare.has-plan-duel .pricing-table-scroll,
    #compare.has-plan-duel .pricing-scroll-hint {
        display: none;
    }
}

/* 1100 px ustunde yuzey hic kurulmuyor; yine de bir gecis aninda gorunmesin. */
@media (min-width: 1101px) {
    .plan-duel { display: none; }
}

.plan-duel {
    margin-top: var(--space-6);
}

.plan-duel-picks {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.plan-duel-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.plan-duel-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.plan-duel-select {
    width: 100%;
    min-height: 44px;   /* dokunma hedefi */
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
}

.plan-duel-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.plan-duel-vs {
    padding-bottom: 12px;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Tablo: sabit duzen, cunku uzun bir ozellik adi 360 px'te sutunlari
   ezip yatay tasma uretiyordu. Ilk sutun genis, iki deger sutunu esit. */
.plan-duel-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.plan-duel-table th,
.plan-duel-table td {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--edge-hair, rgba(148, 163, 184, 0.18));
    text-align: left;
    vertical-align: top;
    /* Uzun bir belirtec (URL, uzun bilesik kelime) sutunu tasirmasin. */
    overflow-wrap: anywhere;
}

.plan-duel-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.plan-duel-table th:first-child { width: 42%; }

.plan-duel-th-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-base);
}

.plan-duel-th-price {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
}

.plan-duel-group th {
    padding-top: var(--space-6);
    border-bottom: none;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.plan-duel-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
    /* Iki CTA ekranda kalsin: uzun listenin sonunda kaybolmasinlar. */
    position: sticky;
    bottom: var(--space-3);
    padding: var(--space-3) 0;
    background: linear-gradient(180deg, transparent, var(--bg) 38%);
}

.plan-duel-btn {
    width: 100%;
    min-height: 44px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plan-duel-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    /* 360 px: "vs" ayirici yer kapliyor, secimler alt alta iner. */
    .plan-duel-picks {
        grid-template-columns: minmax(0, 1fr);
    }

    .plan-duel-vs { display: none; }

    .plan-duel-table { font-size: var(--text-xs); }
    .plan-duel-table th:first-child { width: 40%; }
    .plan-duel-table th,
    .plan-duel-table td { padding: var(--space-2) 6px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Yapiskan CTA bandi kaydirirken hareket ediyormus gibi okunabiliyor;
       hareket kapaliyken akista kalsin. */
    .plan-duel-cta {
        position: static;
        background: none;
    }

    .plan-duel-table thead th { position: static; }
}

/* ==========================================================================
   TELEFON — KART ICI OLCULER (<=640px)
   --------------------------------------------------------------------------
   Yalnizca telefon. Masaustu ve tablet olculeri degismez.

   Olculen (390x844, dsf3, isMobile): plan kartlarindaki fiyat
   `clamp(var(--text-3xl), 3.6vw, var(--text-4xl))` ile yaziliyor. 390px'te
   3.6vw = 14px oldugu icin clamp ALT sinira, yani 39.06px'e oturuyordu -
   vw'nin kucultmesi gereken yerde tam tersi calisiyor, telefonda en buyuk
   deger uygulaniyordu. 28px hala karttaki en buyuk yazi (plan adi
   --text-xl = 25px).

   Ayni sayfadaki diger buyuk sayilar (hesaplayici toplami, paket fiyati)
   --text-2xl = 31.25px'ti; onlar da ayni 28px tavanina cekildi ki kart ici
   tipografi tek bir olcude bulussun.

   Renk, kontrast ve dokunma hedefi bu blokta HIC degismez.
   ========================================================================== */

@media (max-width: 640px) {
    .price {
        font-size: 1.75rem;
    }

    .pricing-calc-total,
    .pricing-calc-value,
    .pricing-pack-price {
        font-size: 1.75rem;
    }
}

/* --------------------------------------------------------------------------
   TELEFONDA FİYAT RAKAMI — ana sayfayla aynı ölçüde.
   Ölçüldü: 390px'te `subscribe.html`in ücretsiz katman rakamı 39px'te
   kalıyordu, oysa ana sayfadaki aynı işi gören `.amount` telefonda 28px'e
   iniyor (`styles.css`). İki sayfada aynı bilgi iki farklı boyutta
   duruyordu; büyük olan dar ekranda kartı gereksiz uzatıyor.
   Masaüstünde ikisi de değişmedi.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .pricing-free-amount {
        font-size: 1.75rem;
    }
}