/* Clinic Platform fiyat tablosu.
   Tasarim: her plan basliktan son satira kadar TEK parca beyaz kart
   (yuvarlak kose + ince kenarlik + hafif golge), sol kolon kartsiz.
   Satirlarin arasindaki cizgiler kisa ve ortalanmis; grubun ilk/son
   satirinda cizgi yok. Bir kategori grubunun uzerine gelindiginde tablonun
   iki yanindan tasan, gradyan kenarlikli beyaz bant beliriyor.

   Butun dikey olculer asagidaki degiskenlerden turetiliyor. Bir ozellik
   satiri eklenip cikarildiginda SADECE --pt-h1..4 icindeki satir carpanini
   guncellemek yeterli - hover bantlarinin konumu kendiliginden kayar. */
.price-container {
    /* olcu birimleri */
    --pt-row-h: 32px;           /* tek bir ozellik satiri */
    --pt-cat-h: 46px;           /* kategori basligi satiri */
    --pt-gap: 24px;             /* iki kategori grubu arasi bosluk */
    --pt-head-h: 330px;         /* kart basligi (isim/fiyat/buton) alani */
    --pt-card-pad-b: 40px;      /* son satirin altindaki kart boslugu */
    --pt-col-gap: 16px;         /* kolonlar arasi bosluk */
    --pt-band-out: 24px;        /* hover bandinin tablodan tasma miktari */
    --pt-band-pad: 10px;        /* hover bandinin satirlari sarma payi */

    /* renkler */
    --pt-line: #ECEDF1;
    --pt-ink: #0B0B0F;
    --pt-muted: #666D7C;
    --pt-off: #666D7C;
    --pt-brand: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);

    max-width: 1560px;
    margin: 0 auto;
    padding: 0;
}

.pricing-wrapper {
    position: relative;
    display: grid;
    /* tasarimdaki oran: sol kolon ~1.36 x bir plan kolonu */
    grid-template-columns: 1.36fr repeat(3, 1fr);
    gap: var(--pt-col-gap);
}

/* Hover bantlarinin yuksekligi/konumu TABLO BAZINDA: iki platformun grup
   boylari farkli (Clinic 2/5/3/2, Angle 2/4/5/2). Ozel ozellikler hesaplanmis
   degerleriyle miras alindigi icin --pt-b* zinciri her iki tabloda yeniden
   tanimlanmali - yoksa Angle bantlari Clinic olculeriyle kalir. */
#pricing-wrapper {
    --pt-h1: calc(var(--pt-cat-h) + 2 * var(--pt-row-h));   /* Core: 2 satir */
    --pt-h2: calc(var(--pt-cat-h) + 5 * var(--pt-row-h));   /* Radiography: 5 satir */
    --pt-h3: calc(var(--pt-cat-h) + 3 * var(--pt-row-h));   /* Features: 3 satir */
    --pt-h4: calc(var(--pt-cat-h) + 2 * var(--pt-row-h));   /* Admin: 2 satir */
}

#pricing-wrapper-angle {
    --pt-h1: calc(var(--pt-cat-h) + 2 * var(--pt-row-h));   /* Core: 2 satir */
    --pt-h2: calc(var(--pt-cat-h) + 4 * var(--pt-row-h));   /* Radiography: 4 satir */
    --pt-h3: calc(var(--pt-cat-h) + 5 * var(--pt-row-h));   /* Features: 5 satir */
    --pt-h4: calc(var(--pt-cat-h) + 2 * var(--pt-row-h));   /* Admin: 2 satir */
}

#pricing-wrapper,
#pricing-wrapper-angle {
    /* bant baslangiclari: bir onceki bant + gruplar arasi bosluk */
    --pt-b1: var(--pt-head-h);
    --pt-b2: calc(var(--pt-b1) + var(--pt-h1) + var(--pt-gap));
    --pt-b3: calc(var(--pt-b2) + var(--pt-h2) + var(--pt-gap));
    --pt-b4: calc(var(--pt-b3) + var(--pt-h3) + var(--pt-gap));
}

/* ---------------------------------------------------------------- sol kolon */

/* Sol kolonun karti yok; yazilar dogrudan beyaz sayfa uzerinde ve
   basliklarla ayni hizada (girinti yok). */
.features-column {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Yuksekligi plan kartinin baslik alanina esit - iki tarafin satirlari
   ayni y ekseninde baslasin. */
.features-header-wrapper {
    height: var(--pt-head-h);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.features-column h1,
.features-column .mobile-plans-title {
    margin: 0 0 18px;
    padding: 36px 0 0;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.32;
    color: var(--pt-ink);
}

/* DIKKAT: base.html'de global bir span{font-size:1.25rem;display:block;
   font-weight:500;margin-bottom:.5rem;line-height:1.2;color:...} kurali var.
   Basliktaki <span class="hero-light"> parcalari bu yuzden kendi satirina
   dusuyor, 20px/500 oluyor ve altlarina 8px bosluk biniyordu. Tasarimda uc
   satirin tamami ayni 26px; sadece agirlik ve renk degisiyor. Element
   secicisini yenmek icin secicilerin sinif tasimasi yeterli. */
.features-column h1 span,
.features-column h1 b,
.features-column .mobile-plans-title span,
.features-column .mobile-plans-title b {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    unicode-bidi: normal;
}

/* "Choose the" / "for Your" - light */
.features-column h1 .hero-light,
.features-column .mobile-plans-title .hero-light {
    font-weight: 300;
    color: var(--pt-ink);
}

/* "Perfect Plan" - siyah semibold */
.features-column h1 b,
.features-column .mobile-plans-title b {
    font-weight: 600;
    color: var(--pt-ink);
}

/* "Clinic Platform" - gradyan semibold */
.features-column h1 .title-gradient,
.features-column .mobile-plans-title .title-gradient {
    font-weight: 600;
    background: var(--pt-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.features-column p {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--pt-muted);
}

.features-column .subtitle {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--pt-muted);
}

.features-list {
    display: grid;
    gap: 0;
}

/* Kategoriler grid'in kendi satirlarina aksin - boylece sag kolonlardaki
   satirlarla birebir ayni yuksekligi paylasirlar. */
.feature-category {
    display: contents;
}

.category-header,
.feature-item,
.category-spacer,
.feature-value {
    /* z-index'in isleyebilmesi icin konumlandirilmis olmalari sart:
       hover bandi z-index:1, icerik z-index:2 ile bandin ustunde kalir. */
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    /* fare hareketi bandin uzerinde kalsin (hover kaybolmasin) */
    pointer-events: none;
}

.category-header {
    display: flex;
    align-items: center;
    height: var(--pt-cat-h);
    margin: var(--pt-gap) 0 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-ink);
}

.features-list .feature-category:first-child .category-header,
.features-values .category-spacer:first-of-type {
    margin-top: 0;
}

.feature-item {
    display: flex;
    align-items: center;
    height: var(--pt-row-h);
    padding: 0 8px 0 0;
    font-size: 13px;
    font-weight: 400;
    /* uzun etiketler (TR ceviriler) iki satira siginsin: 2 x 1.2 x 13 < 32px */
    line-height: 1.2;
    color: var(--pt-muted);
}

/* Ayirici cizgi satirlarin ARASINA cizilir: gruptaki ilk satirin ustunde
   (kategori basligindan sonra) ve son satirin altinda cizgi olusmaz. */
.feature-item + .feature-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--pt-line);
}

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

/* Kart cercevesi tek bir elemanda: baslik ve satirlar ayni kartin icinde
   kaliyor, arada dikis izi olmuyor.
   Dolgu ve golge YOK - kart kendi beyazini basmiyor, arkasindaki
   .pricing-page-card zemini oldugu gibi gorunuyor; kart sadece cerceve cizer. */
.pricing-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    background: transparent;
    border: 1px solid var(--pt-line);
    border-radius: 24px;
}

.plan-header {
    /* kartin 1px kenarligi dusulur ki satirlar sol kolonla ayni y'de baslasin */
    height: calc(var(--pt-head-h) - 1px);
    box-sizing: border-box;
    padding: 38px 18px 26px;
    text-align: center;
}

/* Baslik icerigi dikey kolon: aciklamadan sonraki bosluk esnek oldugu icin
   "Buy" butonu 2 ve 3 satirlik aciklamalarda ayni hizada duruyor. */
.card-style {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan-header h2,
.plan-header h3,
.plan-header .h3 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pt-ink);
}

.price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 10px;
}

.currency {
    margin: 0 1px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-ink);
}

.amount {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pt-ink);
}

.period {
    margin: 0 0 0 1px;
    font-size: 11px;
    font-weight: 400;
    color: var(--pt-muted);
}

.subtitle-text {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--pt-muted);
}

.description {
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pt-muted);
}

.card-style .description {
    /* butonu baslik alaninin altina sabitler */
    margin-bottom: auto;
}

/* Bire bir navbar'daki .demo-request / edu-cta__btn tasarimi: beyaz zemin,
   gradyan yazi, gradyan kenarlik (mask-composite ile). */
.contact-btn,
.angle-demo-btn {
    position: relative;
    width: auto;
    min-width: 88px;
    background-color: #fff;
    background-image: var(--pt-brand);
    -webkit-background-clip: text, padding-box;
    background-clip: text, padding-box;
    -webkit-text-fill-color: transparent;
    color: transparent;
    border: 1px solid #7640E8;
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 0 auto 8px;
}

.contact-btn:hover,
.angle-demo-btn:hover {
    background-color: rgba(118, 64, 232, 0.06);
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .contact-btn,
    .angle-demo-btn {
        border-color: transparent;
    }

    .contact-btn::before,
    .angle-demo-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }
}

.demo-link {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--pt-muted);
    cursor: pointer;
}

.demo-link a {
    background: var(--pt-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 600;
    text-decoration: underline;
}

/* --------------------------------------------------------- plan deger satirlari */

.features-values {
    display: grid;
    gap: 0;
    padding-bottom: var(--pt-card-pad-b);
    background: transparent;
    border: 0;
}

/* Sol kolondaki kategori basligiyla ayni yuksekligi tutan bos satir. */
.category-spacer {
    height: var(--pt-cat-h);
    margin: var(--pt-gap) 0 0;
}

.feature-value {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--pt-row-h);
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Deger kolonlarindaki cizgi kolon genisliginden kisa ve ortalanmis. */
.feature-value + .feature-value::before {
    content: "";
    position: absolute;
    top: 0;
    left: 21%;
    right: 21%;
    height: 1px;
    background: var(--pt-line);
}

.feature-value.available {
    font-size: 14px;
    font-weight: 500;
    color: var(--pt-ink);
}

.feature-value.unavailable {
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-off);
}

.feature-value.text {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-ink);
}

.professional {
    position: relative;
}

/* ------------------------------------------------------- kategori hover bantlari */

/* Beyaz zemin + gradyan kenarlik. Bant tablonun iki yanindan tasar ve
   altindaki kart kenarliklarini kapatir - tasarimdaki gorunum bu.
   Icerik (.feature-item / .feature-value) z-index:2 ile bandin ustunde. */
.hover-1,
.hover-2,
.hover-3,
.hover-4 {
    position: absolute;
    left: calc(-1 * var(--pt-band-out));
    right: calc(-1 * var(--pt-band-out));
    background: #fff;
    border-radius: 32px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.hover-1::before,
.hover-2::before,
.hover-3::before,
.hover-4::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--pt-brand);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.hover-1 {
    top: calc(var(--pt-b1) - var(--pt-band-pad));
    height: calc(var(--pt-h1) + 2 * var(--pt-band-pad));
}

.hover-2 {
    top: calc(var(--pt-b2) - var(--pt-band-pad));
    height: calc(var(--pt-h2) + 2 * var(--pt-band-pad));
}

.hover-3 {
    top: calc(var(--pt-b3) - var(--pt-band-pad));
    height: calc(var(--pt-h3) + 2 * var(--pt-band-pad));
}

.hover-4 {
    top: calc(var(--pt-b4) - var(--pt-band-pad));
    height: calc(var(--pt-h4) + 2 * var(--pt-band-pad));
}

.hover-1:hover,
.hover-2:hover,
.hover-3:hover,
.hover-4:hover {
    opacity: 1;
}

/* ------------------------------------------------------------- mobil kartlar */

.mobile-plans {
    display: none;
}

.mobile-plan-card {
    /* masaustu kartla ayni: dolgu yok, sadece cerceve */
    background: transparent;
    border: 1px solid var(--pt-line);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(11, 11, 15, .04);
    margin-bottom: 24px;
    overflow: hidden;
}

.mobile-plan-header {
    text-align: center;
    padding: 28px 24px;
    border-bottom: 1px solid var(--pt-line);
}

.mobile-plan-header h2,
.mobile-plan-header h3,
.mobile-plan-header .h3 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pt-ink);
}

.mobile-plan-features {
    padding: 0;
}

.mobile-feature-group {
    border-bottom: 1px solid var(--pt-line);
}

.mobile-feature-group:last-child {
    border-bottom: none;
}

.mobile-category-header {
    background: #F5F6F8;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-ink);
    border-bottom: 1px solid var(--pt-line);
}

.mobile-feature-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--pt-line);
}

.mobile-feature-item:last-child {
    border-bottom: none;
}

.mobile-feature-name {
    font-size: 13px;
    color: var(--pt-muted);
    flex: 1;
}

.mobile-feature-value {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.mobile-feature-value.available {
    font-size: 14px;
    font-weight: 500;
    color: var(--pt-ink);
}

.mobile-feature-value.unavailable {
    font-size: 14px;
    color: var(--pt-off);
}

.mobile-feature-value.text {
    color: var(--pt-ink);
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .pricing-wrapper {
        display: none;
    }

    .hover-1,
    .hover-2,
    .hover-3,
    .hover-4{
        display: none;
    }

    .mobile-plans {
        display: block;
    }

    .features-column {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 20px 16px;
    }

    .features-column h1, .features-column .mobile-plans-title {
        font-size: 24px;
    }

    .mobile-plan-header {
        padding: 24px 20px;
    }

    .amount {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .features-column h1, .features-column .mobile-plans-title {
        font-size: 22px;
    }

    .mobile-plan-header {
        padding: 20px 16px;
    }

    .mobile-feature-item {
        padding: 12px 16px;
    }
}


/* -------------------------------------------------------- kurumsal banner */

/* Sayfanin diger bolumleri gibi iki yandan 20px bosluklu, yuvarlak koseli
   tek gorsel. Yukseklik SABIT DEGIL: gorsel mutlak konumla kutuyu kapliyor,
   yuksekligi icerik + dolgu belirliyor. Boylece dar ekranda metin buyudugunde
   banner uzuyor, tasma/kirpilma olmuyor (eskiden min-height:300px + mutlak
   ortalanmis icerik yuzunden buton gorselin altinda kaliyordu). */
.enterprise-plan {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* tam genislik - iki yandan 20px */
    width: auto;
    margin: 60px calc(50% - 50vw + 20px) 0;
    padding: clamp(32px, 4.5vw, 52px) 24px;
    border-radius: 24px;
    overflow: hidden;
}

.enter-prise {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    padding: 0;
    text-align: center;
    color: #fff;
}

.hero-title {
    margin: 0 0 10px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.hero-subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

.hero-button {
    padding: 9px 22px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    background-color: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.hero-button:hover {
    background-color: rgba(255, 255, 255, .16);
    border-color: #fff;
    color: #fff;
}

@media (max-width: 768px) {
    .enterprise-plan {
        margin-top: 40px;
    }
}

@media (max-width: 480px) {
    .enterprise-plan {
        margin-top: 30px;
        min-height: 200px;
    }
    
    .hero-content {
        padding: 10px;
    }
    
    .hero-button {
        padding: 8px 14px;
        min-width: 100px;
    }
}

/* Cards built from the API for products without a hand-built comparison matrix. */
.generated-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.generated-plan-card {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.generated-plan-card.favourite {
    border-color: #2563eb;
    box-shadow: 0 12px 32px rgba(37, 99, 235, .18);
}

.generated-plan-card .price {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    margin-top: .75rem;
    font-weight: 700;
}

.generated-plan-card .price .amount {
    font-size: 2.25rem;
    line-height: 1;
}

.generated-plan-card .price .period {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

.generated-plan-card .subtitle-text {
    margin: .5rem 0 0;
    color: #64748b;
    font-size: .9rem;
}

.generated-plan-card .description {
    margin: .75rem 0 0;
    color: #334155;
}

.generated-plan-features {
    margin: 1.25rem 0 0;
    padding-left: 1.1rem;
    color: #334155;
    line-height: 1.9;
}

.generated-plan-card .purchase-btn {
    margin-top: auto;
    padding: .75rem 1.25rem;
    border: none;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.generated-plan-card .purchase-btn:hover {
    background: #1d4ed8;
}