/* ============================================================================
   Jet Stok - Mobil UX katmani
   Amac: 375px'te temiz, okunur, dokunulabilir bir SaaS deneyimi ve
   kullaniciyi surekli iletisime (ara / WhatsApp / demo) yonlendiren kalici bir bar.
   Cogu kural mobil media query icinde; dosyanin sonunda masaustu tipografi
   kusurlarini duzelten ayri bir (min-width:768px) blogu var.
   ============================================================================ */

:root {
    --m-primary: #4e1c99;
    --m-primary-2: #a44cee;
    --m-wa: #25d366;
    --m-touch: 44px;                 /* min dokunma hedefi (HIG / Material) */
    --m-bar-h: 62px;                 /* alt iletisim cubugu yuksekligi */

    /* --- MOBIL TIPOGRAFI OLCEGI (rol bazli, etiket bazli degil) ---
       Denetimde 4 farkli H1 (25/28/33/55px), 7 farkli H2 (18-32px) ve
       6 farkli govde boyutu (12-17px) bulundu. Asagisi tek standarttir. */
    --m-h1: 1.75rem;     /* 28px - sayfa / hero basligi */
    --m-h2: 1.5rem;      /* 24px - bolum basligi */
    --m-h3: 1.25rem;     /* 20px - kart / alt blok basligi */
    --m-h4: 1.0625rem;   /* 17px - akordiyon sorusu, widget basligi */
    --m-body: 1rem;      /* 16px - govde (iOS otomatik zoom esigi de bu) */
    --m-small: .8125rem; /* 13px - etiket / eyebrow / dipnot ALT SINIRI */

    --m-lh-tight: 1.25;  /* basliklar */
    --m-lh-head: 1.3;
    --m-lh-body: 1.65;   /* govde metni */
}

/* ============================================================
   ALT ILETISIM CUBUGU (yalnizca mobil)
   Sitenin birincil donusum yolu: Ara / WhatsApp / Demo
   ============================================================ */
.m-contactbar { display: none; }

@media (max-width: 767.98px) {

    .m-contactbar {
        display: grid;
        grid-template-columns: 1fr 1fr 1.15fr;
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;                                   /* popup (2147483647) altinda kalir */
        background: #fff;
        border-top: 1px solid rgba(78,28,153,.12);
        box-shadow: 0 -8px 24px -12px rgba(20,12,40,.28);
        padding-bottom: env(safe-area-inset-bottom, 0);  /* iPhone gesture bar */
    }

    .m-cb-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--m-bar-h);                      /* >=44px dokunma hedefi */
        padding: 8px 6px;
        font-size: .74rem;
        font-weight: 700;
        line-height: 1.1;
        text-decoration: none;
        color: #2a1f3d;
        background: none;
        border: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .m-cb-item i { font-size: 1.15rem; line-height: 1; }
    .m-cb-item:active { background: #f4f0fb; }
    .m-cb-item:focus-visible { outline: 3px solid rgba(78,28,153,.4); outline-offset: -3px; }

    .m-cb-call i { color: var(--m-primary); }
    .m-cb-wa i { color: var(--m-wa); }

    /* Birincil aksiyon: gorsel olarak baskin (tek primary CTA kurali) */
    .m-cb-demo {
        background: linear-gradient(145deg, var(--m-primary), var(--m-primary-2));
        color: #fff;
    }
    .m-cb-demo i { color: #fff; }
    .m-cb-demo:active { background: linear-gradient(145deg, #45168a, #9440e0); color: #fff; }
    .m-cb-demo:hover, .m-cb-demo:focus { color: #fff; }

    /* Cubuk icerigi kapatmasin: footer'a nefes payi */
    body { padding-bottom: calc(var(--m-bar-h) + env(safe-area-inset-bottom, 0px)); }

    /* Yuzen WhatsApp balonu: alt cubukta zaten WhatsApp var -> mukerrer + icerigi kapatiyordu */
    .right-fast-bar1,
    .right-fast-bar2 { display: none !important; }


    /* ============================================================
       PROMO BAR - mobilde tasip kirpiliyordu (telefon numarasi okunmuyordu)
       ============================================================ */
    .promo-banner-content {
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Dar ekranda ikincil ogeleri gizle; telefon + WhatsApp kalsin */
    .promo-campaign-link,
    .promo-actions .promo-sep,
    .promo-actions .promo-dealer-btn { display: none !important; }

    .promo-actions {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    /* Telefon numarasi TAM gorunur olsun - sitenin iletisim hedefi bu */
    .promo-actions .promo-phone {
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
        font-size: .95rem;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .promo-actions .promo-wa-btn {
        min-height: 36px;
        padding: 5px 14px 5px 6px;
        flex: 0 0 auto;
    }
    .promo-actions .promo-wa-btn .wa-tx { font-size: .82rem; }


    /* ============================================================
       HERO CAROUSEL - oklar paragraf metninin UZERINE biniyordu (olculdu: overlap)
       Mobilde kaydirma (swipe) + noktalar yeterli, oklari kaldir
       ============================================================ */
    .jsh-arrow,
    .jsh-prev,
    .jsh-next { display: none !important; }


    /* ============================================================
       DOKUNMA HEDEFLERI - olculen ihlaller (h<44px)
       ============================================================ */

    /* Hero carousel noktalari: 11px idi. Gorsel nokta ayni, tiklama alani buyutuldu.
       DIKKAT: 9 slayt var. Her noktaya 44px genislik verilirse 9x44=396px > ekran
       genisligi -> nokta siri tasiyor. Bu yuzden genislik 34px, YUKSEKLIK 44px
       (dikeyde tam dokunma hedefi, yatayda 8px+ bosluk zaten var). */
    .jsh-dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }
    .jsh-dot {
        min-width: 34px;
        min-height: var(--m-touch);
        background: transparent !important;
        border: 0;
        opacity: 1 !important;
        position: relative;
        padding: 0;
        margin: 0 !important;
        flex: 0 0 auto;
    }
    .jsh-dot::after {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 9px; height: 9px;
        border-radius: 999px;
        background: #cdbff0;
        transition: width .2s ease, background .2s ease;
    }
    /* Aktif slayt: markup aria-current="true" kullaniyor (sinif degil) */
    .jsh-dot[aria-current="true"]::after {
        background: var(--m-primary);
        width: 24px;
        border-radius: 999px;
    }

    /* Hamburger, yukari cik, popup kapat, entegrasyon logolari, footer linkleri */
    .navbar-toggler,
    .to_top,
    .jspop-close,
    .jpint-logo { min-width: var(--m-touch); min-height: var(--m-touch); }

    .jspop-close {
        top: 8px;
        right: 8px;
        width: var(--m-touch);
        height: var(--m-touch);
    }

    .navbar .nav-link,
    .navbar .dropdown-item,
    footer a,
    footer .links a,
    .js-breadcrumb a,
    .tool-card-link {
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
    }

    /* footer'daki liste linkleri blok gibi davransin (tam genislik dokunma alani) */
    footer .links a { display: flex; }

    /* Araclar hub'i: kart basligi linki 22px idi */
    .tool-card-title a {
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
    }

    /* Logo ve promo WhatsApp hapi 40px idi -> 44px */
    a.logo,
    .promo-actions .promo-wa-btn { min-height: var(--m-touch); }

    .btn { min-height: var(--m-touch); }


    /* ============================================================
       "NEDEN JET STOK?" KARSILASTIRMA TABLOSU
       Sorun: 3 sutunlu tablo min-width:520px, mobil sarmalayici 312px.
       Yatay kayiyordu ve en onemli sutun (Jet Stok) kesik kaliyordu;
       kullanici kaydirilabildigini fark etmiyordu.
       Cozum: mobilde tabloyu KARTA cevir - yatay kaydirma tamamen kalkar.
       ============================================================ */
    body .jsf-table-wrap { overflow-x: visible; }

    .jsf-table-wrap .jsf-table {
        display: block;
        width: 100%;
        min-width: 0;                    /* 520px min-width'i kaldir */
    }
    .jsf-table-wrap .jsf-table thead { display: none; }  /* sutun basliklari artik hucre icinde */
    .jsf-table-wrap .jsf-table tbody { display: block; }

    /* Her satir = bir kart */
    .jsf-table-wrap .jsf-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid rgba(88,66,188,.14);
        border-radius: 16px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }

    /* Satir basligi = kart basligi */
    .jsf-table-wrap .jsf-table tbody th {
        display: block;
        padding: 0 0 10px;
        font-size: 1rem;
        font-weight: 800;
        color: #1c1530;
        border: 0 !important;
    }

    /* Hucreler: solda sutun etiketi (data-col), sagda deger */
    .jsf-table-wrap .jsf-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
        border: 0 !important;
        font-size: .92rem;
        line-height: 1.45;
        text-align: right !important;
        background: none;
        border-radius: 0;
    }
    .jsf-table-wrap .jsf-table tbody td::before {
        content: attr(data-col);
        flex: 0 0 auto;
        font-weight: 700;
        color: #6b6681;                  /* WCAG AA */
        text-align: left;
        margin-right: 0;
    }

    /* Jet Stok hucresi vurgulu kalsin + yesil onay isareti etikette */
    .jsf-table-wrap .jsf-table tbody td:nth-child(3) {
        background: rgba(88,66,188,.07);
        border-radius: 10px;
        padding: 10px 12px;
        margin-top: 6px;
        font-weight: 600;
        color: #1c1530;
    }
    .jsf-table-wrap .jsf-table tbody td:nth-child(3)::before {
        content: "\2713\00a0" attr(data-col);
        color: #2e7d4f;
    }
    .jsf-table-wrap .jsf-table tbody tr:last-child td:nth-child(3) { border-radius: 10px; }


    /* ============================================================
       OZELLIK KARTLARI (.jsfeat-card)
       Kart mobilde text-align:center aliyor -> baslik/metin ortali.
       Ama ikon rozeti sabit 62px'lik bir flex ogesi oldugu icin sola yasliyordu,
       "Detayli bilgi" de inline-flex oldugundan (justify-content:flex-start) sola
       kayiyordu. Ikisini de ortala ki kart tutarli gorunsun.
       ============================================================ */
    .jsfeat-card .jsfeat-badge { align-self: center; }

    /* "Detayli bilgi": duz metin linkti -> dolu gradient pill buton (.jpint-btn ile ayni dil),
       kartin ortasinda ve dip hizada. margin-top:auto -> farkli uzunluktaki
       aciklamalarda butonlar ayni hizada kalir. */
    .jsfeat-card .jsfeat-more {
        align-self: center;
        justify-content: center;
        margin-top: auto;
        min-height: var(--m-touch);
        padding: .7rem 1.5rem;
        border-radius: 999px;
        background: linear-gradient(145deg, #4e1c99, #5842bc);
        color: #fff;
        font-weight: 600;
        box-shadow: 0 10px 22px -14px rgba(78,28,153,.7);
    }
    .jsfeat-card .jsfeat-more i { color: #fff; }
    .jsfeat-card:hover .jsfeat-more { color: #fff; }


    /* ============================================================
       PAZARYERI / ENTEGRASYON KARTLARI (.jpint-card)
       Masaustunde ikon solda + baslik sagda yatay duruyor. Mobilde tek sutuna
       dusunce baslik 2 satira sariyor ve ikonla yan yana dengesiz gorunuyor.
       Mobilde: ikon basligin ustunde, ortali; buton da ortali.
       NOT: Index.cshtml'deki body-ici <style> blogu bu dosyadan SONRA geliyor,
       esit ozgullukte o kazaniyor -> secicileri .jpint-card ile yukselttik.
       ============================================================ */
    .jpint .jpint-card { text-align: center; }

    .jpint-card .jpint-head {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 1rem;
    }
    .jpint-card .jpint-head h3 { text-align: center; }

    /* Madde listesi okunabilirlik icin sola dayali kalsin, blok olarak ortalansin */
    .jpint-card .jpint-list {
        display: inline-block;
        text-align: left;
        margin-inline: auto;
    }

    .jpint-card .jpint-logos { justify-content: center; }

    .jpint-card .jpint-btn {
        align-self: center;
        justify-content: center;
        min-height: var(--m-touch);
    }


    /* ============================================================
       TIPOGRAFI STANDARDI
       Tema 10+ bespoke prefix (jsh-, jsf-, jsd-, hk-, jspw-, np-, tool-...)
       kullaniyor ve her biri kendi baslik boyutunu tanimliyor. Tek tek ezmek
       yerine ROL bazli tek bir olcek uyguluyoruz.
       !important gerekli: bu dosya <head>'de, sayfalarin kendi <style> bloklari
       <body>'de -> esit ozgullukte sayfa kazaniyor. Kapsam mobille sinirli.
       ============================================================ */

    /* NOT: style.css'te `.headerSpanColor { font-size: 30px !important }` var (0,1,0).
       Duz `h1`/`h2` (0,0,1) bunu yenemez -> asagida h1.headerSpanColor / h2.headerSpanColor
       (0,1,1) olarak esitleyip mobile-ux.css en son yuklendigi icin beraberligi kazaniyoruz. */

    /* --- Kademe A: sayfa / hero basligi --- */
    h1,
    h1.headerSpanColor,
    .jsh-title {                         /* anasayfa hero (gorunur baslik; h1 gizli) */
        font-size: var(--m-h1) !important;
        line-height: var(--m-lh-tight) !important;
        font-weight: 800;
    }

    /* --- Kademe B: bolum basligi ---
       .section-head icindeki h3'ler de bolum basligi rolunde ("Entegrasyon Blog",
       "Sikca Sorulan Sorular") -> etiketi degil, rolu esas aliyoruz. */
    h2,
    h2.headerSpanColor,
    h3.headerSpanColor,
    .section-head h3,
    .jsf-h2, .jsd-h2, .hk-h2, .tool-cat-title {
        font-size: var(--m-h2) !important;
        line-height: var(--m-lh-head) !important;
    }

    /* --- Kademe C: kart / alt blok basligi --- */
    h3,
    .jpint-card h3, .jsfeat-card h3, .tool-card-title, .hk-card h3, .jscrit-card h3 {
        font-size: var(--m-h3) !important;
        line-height: 1.35 !important;
    }

    /* --- Kademe D: akordiyon sorusu / widget basligi --- */
    h4,
    .accordion-header,
    .accordion-header .accordion-button {
        font-size: var(--m-h4) !important;
        line-height: 1.45 !important;
    }

    /* --- Govde metni --- */
    .section-head p,
    .subtitle p,
    .np-prose p, .np-prose li,
    main > section p:not([class]),
    .jsf-lead, .hk-lead {
        font-size: var(--m-body) !important;
        line-height: var(--m-lh-body) !important;
    }

    /* --- Kucuk metin ALT SINIRI (13px) ---
       Denetimde 11.5-12.8px'e kadar dusen etiketler vardi; mobilde okunmuyor. */
    .jsh-eyebrow, .jsf-eyebrow, .jstesti-eyebrow, .jspop-eyebrow,
    .jsd-cd-eyebrow, .jspw-eyebrow, .jspcorp-eyebrow, .hk-eyebrow,
    .jstesti-role, .jsd-note, .jspop-note, .np-note, .np-updated,
    .np-metric-label, .js-bc-current, .breadcrumb a, .breadcrumb li {
        font-size: var(--m-small) !important;
        line-height: 1.5 !important;
    }

    /* Footer 12px'e kadar dusuyordu */
    footer p, footer li, footer a, footer span { font-size: .9375rem !important; }  /* 15px */
    footer .links li a { font-size: .9375rem !important; }
    footer .links-group > span { font-size: 1.0625rem !important; }                 /* 17px - sutun basligi */
    footer .info-logo > div { font-size: .9375rem !important; line-height: 1.6 !important; }

    /* Satir uzunlugu: mobilde 35-60 karakter hedefi (okunabilirlik) */
    .np-prose p, .section-head p { max-width: 62ch; margin-inline: auto; }


    /* ============================================================
       MOBIL MENU
       Onceki hali: her sey ORTALI, alt maddeler ust seviyeyle birebir ayni
       (ayni boyut/agirlik/hiza) -> hiyerarsi yok, uzun etiketler sariyordu.
       Ayrica Araclar/Blog/Destek/Iletisim mobilde hic yoktu (mobile-hide).
       Yeni hali: sola hizali, ayrac cizgili, alt maddeler girintili ve hafif.
       ============================================================ */
    .navbar-collapse {
        max-height: calc(100vh - 120px);   /* panel 583px'ti, CTA'lar ekran disinda kaliyordu */
        overflow-y: auto;
        overscroll-behavior: contain;      /* menu sonunda sayfa kaymasin */
        padding-bottom: 8px;
    }

    .navbar-nav { width: 100%; }

    .navbar-nav > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;    /* etiket solda, caret sagda */
        text-align: left !important;
        padding: 12px 4px !important;
        font-size: 1rem !important;
        font-weight: 600;
        min-height: var(--m-touch);
        border-bottom: 1px solid rgba(88,66,188,.09);
    }

    /* Aktif sayfa: solda mor seritle isaretli (renk tek basina yeterli degil) */
    .navbar-nav > .nav-item > .nav-link.active {
        color: var(--m-primary) !important;
        box-shadow: inset 3px 0 0 var(--m-primary);
        padding-left: 12px !important;
    }

    /* Ikincil grubun basladigi yer (Blog'dan itibaren) belirgin olsun */
    .navbar-nav > .nav-item.m-nav-sep { margin-top: 10px; padding-top: 10px; border-top: 2px solid rgba(88,66,188,.16); }
    .navbar-nav > .nav-item.m-nav-sep > .nav-link { border-top: 0; }

    /* --- Alt menu: acilir grup --- */
    .m-nav-group > .nav-link.dropdown-toggle::after {
        transition: transform .2s ease;
        margin-left: auto;
    }
    .m-nav-group > .nav-link[aria-expanded="true"]::after { transform: rotate(180deg); }

    .m-subnav {
        padding: 4px 0 8px 14px !important;
        margin: 0 0 0 4px;
        border-left: 2px solid rgba(88,66,188,.18);   /* nested oldugunu gosteren dikey cizgi */
    }
    .m-subnav .nav-link {
        display: flex;
        align-items: center;
        text-align: left !important;
        padding: 10px 4px !important;
        font-size: .9375rem !important;               /* 15px - ust seviyeden bir kademe kucuk */
        font-weight: 500 !important;                  /* ust seviye 600 */
        color: #4a4460 !important;
        min-height: var(--m-touch);
        border: 0;
    }
    .m-subnav .nav-link.active { color: var(--m-primary) !important; font-weight: 600 !important; }

    @media (prefers-reduced-motion: reduce) {
        .m-nav-group > .nav-link.dropdown-toggle::after { transition: none; }
    }


    /* ============================================================
       FOOTER
       Mobilde uc ayri kirik vardi:
       1) Sosyal ikonlar: <a> inline-flex ama justify-content:normal ->
          temanin ortalama mekanizmasi (text-align + line-height) devre disi
          kalmis, ikon dairenin soluna yapisiyordu (olculen sapma: -32px).
       2) "Kurumsal/Araclar" basliklari ortali ama alt cizgileri (::after) left:0'da,
          link listeleri de sola dayali -> baslik ortada, her sey solda.
          Cozum: link sutunlarini butunuyle SOLA hizala (SaaS standardi;
          uzun link listeleri ortalanmaz). Marka/telefon/sosyal blogu ortali kalir.
       3) Alt bar .rounded-pill (border-radius:50rem) -> 312x179px kutuda
          oval/elips gorunuyordu.
       ============================================================ */

    /* 1) Sosyal ikonlar */
    footer .social-links {
        display: flex;
        justify-content: center;
        gap: 12px;
    }
    footer .social-links a {
        justify-content: center;         /* eksik olan buydu */
        line-height: 1;
        flex: 0 0 auto;
    }

    /* 2) Link sutunlari sola hizali (baslik + alt cizgi + linkler ayni eksende) */
    footer .links-side,
    footer .links-group,
    footer .links-group > span,
    footer .links li,
    footer .links li a { text-align: left !important; }
    footer .links-group > span { display: inline-block; }

    /* Marka blogu ortali kalsin (logo, aciklama, telefon, sosyal) */
    footer .info-logo { text-align: center !important; }

    /* Sutunlar arasi nefes */
    footer .links-group { margin-bottom: 26px; }

    /* 3) Alt bar: elips degil, kart */
    .jsfoot-bottom {
        border-radius: 20px !important;
        padding: 18px 16px !important;
    }
    .jsfoot-legal { gap: 1rem; row-gap: .2rem; }
    .jsfoot-legal a {
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
    }


    /* ============================================================
       SAYFALAMA (blog) - 390px'te 718px'e tasiyordu, son sayfalara ulasilamiyordu
       ============================================================ */
    .pagination {
        flex-wrap: wrap;
        gap: 6px;
        max-width: 100%;
        padding-inline: 0;
    }
    .pagination .page-item { margin: 0 !important; }
    .pagination .page-link {
        min-width: var(--m-touch);
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
    }


    /* ============================================================
       YUKARI CIK butonu: sag kenardan 50px tasiyordu (gorunmez) ve
       alt iletisim cubuguyla cakisiyordu. Cubuk zaten kalici -> gizle.
       ============================================================ */
    .to_top { display: none !important; }


    /* ============================================================
       YATAY TASMA GUVENLIGI
       ============================================================ */
    img, svg, video, iframe, canvas { max-width: 100%; }

    /* Sayfa hicbir kosulda yana kaydirilamasin (kayma emniyeti) */
    html, body { overflow-x: hidden; }


    /* ============================================================
       FORMLAR - iOS otomatik zoom'u onle + dokunulabilir yukseklik
       ============================================================ */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .jspop-field,
    .form-group input,
    .form-group select {
        font-size: 16px;                 /* <16px -> iOS otomatik zoom yapiyor */
        min-height: var(--m-touch);
    }

    /* Gonder butonlari tam genislik + rahat dokunulur */
    form .btn,
    form button[type="submit"] { min-height: 48px; }
}

/* ============================================================================
   MASAUSTU (>=768px) TIPOGRAFI OLCEGI
   Denetimde olculen dagilim: H1 30/40/54/55px, bolum H2 30/34/35/37/38/42px,
   kart H3 17/18/19/20/21px, eyebrow 11.5-12.5px, satir uzunlugu 160 karaktere
   kadar. Asagisi tek standarttir.
   ============================================================================ */
@media (min-width: 768px) {

    /* --- Bolum basligi: ayni rolde 6 farkli boyut vardi -> tek olcek --- */
    h2,
    h2.headerSpanColor,
    h3.headerSpanColor,
    .section-head h3,
    .jsf-h2, .jsd-h2, .hk-h2, .jspw-title, .jscrit-head h2, .hk-cta h2,
    .jspcorp-title, .tool-cat-title {
        font-size: 2.25rem !important;         /* 36px */
        line-height: 1.25 !important;
    }
    /* Kart ici H2'ler bolum basligi degil (CTA karti, guven karti) -> kart kademesi */
    .np-cta-title, .tool-trust-title, .jspop-title {
        font-size: 1.375rem !important;        /* 22px */
        line-height: 1.35 !important;
    }

    /* --- Sayfa basligi: 30 / 40 / 55px arasinda savruluyordu --- */
    h1 {
        font-size: 2.5rem !important;          /* 40px - sayfalarin cogunda zaten buydu */
        line-height: 1.2 !important;
    }
    h1.headerSpanColor { font-size: 2.5rem !important; }   /* blog 30px'te kalmisti (.headerSpanColor !important) */

    /* Gercek hero istisnalari: anasayfa slider + hakkimizda acilis */
    .jsh-title,
    .hk-wrap h1 { font-size: 3.375rem !important; }        /* 54px */

    /* --- Alt baslik (H3): govde metni 18px iken np-prose H3'leri de 18px'ti,
       yani baslik ile paragraf ayni boyutta -> hiyerarsi yok. --- */
    h3 {
        font-size: 1.375rem !important;        /* 22px */
        line-height: 1.35 !important;
    }

    /* Akordiyon sorusu / widget basligi: 24 ve 30px karisikti */
    h4, .accordion-header, .accordion-header .accordion-button {
        font-size: 1.5rem !important;          /* 24px - sayfalarin cogunda zaten buydu */
        line-height: 1.4 !important;
    }

    /* --- Kart basligi: 17/18/19/20/21px -> ayirt edilemeyen 5 farkli deger.
       Hepsi ayni rolde (kart ici baslik) -> tek boyut. --- */
    .jsfeat-card h3,
    .jpint-card h3,
    .tool-card-title,
    .hk-card h3,
    .hk-mv-card h3,
    .jscrit-card h3 {
        font-size: 1.25rem !important;         /* 20px */
        line-height: 1.35 !important;
    }

    /* --- Kucuk metin alt siniri: eyebrow'lar 11.5px'e kadar dusuyordu --- */
    .jsh-eyebrow, .jsf-eyebrow, .jstesti-eyebrow, .jspop-eyebrow,
    .jsd-cd-eyebrow, .jspw-eyebrow, .jspcorp-eyebrow, .hk-eyebrow,
    .package-month-price-custom, .np-metric-label {
        font-size: .8125rem !important;        /* 13px */
    }

    /* --- Satir uzunlugu: SEO metinlerinde satir basina 160 KARAKTERE kadar
       cikiyordu (hedef 60-75). Goz satir sonundan basina donerken kayboluyor. --- */
    .np-prose p,
    .np-prose li,
    .np-prose h2, .np-prose h3 { max-width: 72ch; }

    /* Sayfa giris paragraflari 1440px'in tamamina yayiliyordu (~160 karakter/satir).
       Ortali kaldiklari icin max-width + auto margin ile daraltmak hizayi bozmuyor. */
    .section-head > p,
    .section-head .subtitle p,
    .tool-trust p {
        max-width: 68ch;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    .m-cb-item,
    .m-cb-demo { transition: none !important; }
}