/* ============================================================================
   Jet Stok - Site geneli görsel standart (Kasım 2026)
   ----------------------------------------------------------------------------
   Amaç: Her sayfada aynı içerik genişliği, aynı kenar boşluğu, aynı bölüm
   ritmi ve aynı gövde metni ölçüsü. "Premium" his tutarlılıktan gelir;
   sayfadan sayfaya 1536px / 1152px / 1024px arasında savrulan konteyner ve
   14 / 16 / 18px arasında değişen giriş paragrafı bunu bozuyordu.

   Kapsam: yalnızca <body class="js-site"> (_Layout). Admin paneli
   (_AdminLayout, nk-body) etkilenmez.

   NELERE DOKUNMAZ:
   - Başlık (h1-h4) boyutları: mobile-ux.css'teki tek tip ölçek geçerli.
   - Başlık / metin RENKLERİ: koyu zeminli hero ve CTA bölümleri var;
     global renk kuralı beyaz başlıkları karartırdı. Renk yalnızca beyaz
     zeminli olduğu bilinen prose bloklarında (np-prose, blog) verilir.
   - Kart yarıçap/gölge: mevcut kartlar zaten 16-22px / yumuşak gölge
     ailesinde; tekrar yazmak kazanç getirmiyor.

   Ölçülen eski durum (1920px): .container 1528px içerik (padding %10),
   navbar 1504px; 1440px'te 1152px; 375px'te 300px (37px kenar).
   ============================================================================ */

:root {
    --js-container: 1240px;              /* max-w-7xl ailesi; 24px kenar ile 1192px içerik */
    --js-gutter: 24px;
    --js-gutter-m: 16px;                 /* <768: mobile-ux ve pricing satırı (-16px) bununla hizalı */
    --js-section-y: clamp(40px, 6vw, 80px);   /* 375→40 · 768→46 · 1200→72 · 1440+→80 */

    --js-brand-700: #4e1c99;
    --js-brand-600: #5b2bb0;
    --js-brand-100: #ede7fa;
    --js-ink: #1c1530;
    --js-ink-2: #5a5670;                 /* beyazda 7.1:1 */
    --js-ink-3: #6b6782;
    --js-line: #e4e1ee;

    --js-lead: 1.0625rem;                /* 17px - bölüm giriş paragrafı */
    --js-body: 1rem;                     /* 16px - prose / blog gövdesi */
    --js-lh-body: 1.65;
    --js-focus: 0 0 0 3px rgba(91, 43, 176, .35);
}

/* ---------------------------------------------------------------------------
   1) KONTEYNER: tek genişlik, tek kenar boşluğu
   style.css:1005 ".container{max-width:100%!important;padding:1% 10%!important}"
   ve :997/:1001 navbar varyantlarını ezer. Dikey padding'e (1%) dokunulmaz;
   yalnızca yatay longhand'ler yazılır.
   Navbar <992'de hamburger moduna geçiyor ve responsive.css padding:0 veriyor;
   o düzen bozulmasın diye navbar ≥992'de ayrıca hizalanır, altında dışarıda
   bırakılır. .z-donusum-packages bilerek 1000px'lik dar bir ızgara.
   --------------------------------------------------------------------------- */
.js-site .container:not(.navbar .container):not(.top-navbar .container):not(.z-donusum-packages .container) {
    max-width: var(--js-container) !important;
    padding-left: var(--js-gutter) !important;
    padding-right: var(--js-gutter) !important;
    margin-left: auto;
    margin-right: auto;
}

/* Navbar ≥1200: içerikle aynı kenar. 992-1199 arasında menü (7 öğe + Giriş +
   Demo butonu) 24px kenarla sığmıyor ve ikinci satıra kırılıyordu (ölçüm:
   1024px'te 16px kenar sığıyor, 992px'te yalnız 0px); responsive.css'in
   ≤1366 için verdiği padding:0 o aralıkta olduğu gibi kalır. */
@media (min-width: 1200px) {
    /* responsive.css navbar'a kendi yatay padding'ini veriyor; 1200-1239
       arasında konteyner 1240'a sığmayıp logo içerikten 8-20px kayıyordu. */
    .js-site .navbar,
    .js-site .top-navbar {
        padding-left: 0;
        padding-right: 0;
    }

    .js-site .top-navbar > .container,
    .js-site .navbar > .container {
        max-width: var(--js-container) !important;
        padding-left: var(--js-gutter) !important;
        padding-right: var(--js-gutter) !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* <768: kenar 16px. Ayrı bir kural yerine token değişir; yukarıdaki
   seçicinin özgüllüğü (:not zinciri) medya bloğundaki kopyasını eziyordu. */
@media (max-width: 767.98px) {
    :root {
        --js-gutter: var(--js-gutter-m);
    }
}

/* ---------------------------------------------------------------------------
   2) BÖLÜM RİTMİ
   style.css:661 55px, responsive.css:474 40px (≤991). pt-0/pb-80 gibi
   utility'ler !important ile kendi kenarını korur; onlara dokunulmaz.
   --------------------------------------------------------------------------- */
.js-site .section-padding {
    padding-top: var(--js-section-y);
    padding-bottom: var(--js-section-y);
}

/* ---------------------------------------------------------------------------
   3) GÖVDE METNİ (≥768; mobil ölçek mobile-ux.css'te)
   Bölüm giriş paragrafı sayfadan sayfaya 14/16/18px'ti → 17px.
   Prose (SEO metni, blog) → 16px / 1.65. Satır uzunluğu sınırları
   mobile-ux.css'te (68ch / 72ch) zaten var.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .js-site .section-head > p,
    .js-site .section-head .subtitle p {
        font-size: var(--js-lead) !important;
        line-height: 1.6 !important;
    }

    .js-site .np-prose p,
    .js-site .np-prose li,
    .js-site .blog-content-info p,
    .js-site .blog-content-info li {
        font-size: var(--js-body) !important;
        line-height: var(--js-lh-body) !important;
    }
}

.js-site .np-prose p,
.js-site .np-prose li,
.js-site .blog-content-info p,
.js-site .blog-content-info li {
    color: var(--js-ink-2);
}

/* responsive.css:350 ≤991'de body'yi ortalıyor; uzun metin ortalı okunmaz. */
@media (max-width: 991.98px) {
    .js-site .np-prose,
    .js-site .blog-content-info {
        text-align: left;
    }
}

/* ---------------------------------------------------------------------------
   4) KLAVYE ODAĞI
   style.css:569 "body a:focus{outline:0}" odak halkasını siliyordu.
   Yalnızca klavye odağında (focus-visible) geri verilir; fare tıklamasında
   halka çıkmaz.
   --------------------------------------------------------------------------- */
.js-site a:focus-visible,
.js-site button:focus-visible,
.js-site [role="button"]:focus-visible,
.js-site input:focus-visible,
.js-site select:focus-visible,
.js-site textarea:focus-visible {
    outline: 2px solid var(--js-brand-600);
    outline-offset: 3px;
    box-shadow: var(--js-focus);
}

/* ---------------------------------------------------------------------------
   5) HAREKET AZALTMA
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js-site *,
    .js-site *::before,
    .js-site *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}