/* ==========================================================================
   EntegreSmart – Responsive kurallar
   Laptop ≤ 1199px · Tablet ≤ 991px · Mobil ≤ 767px · Küçük mobil ≤ 479px
   Mobilde bileşenler küçültülmez, yeniden düzenlenir: hub diyagramı dikey akışa,
   yatay adımlar dikey zaman çizelgesine, iki parçalı kartlar üst üste dizilir.
   ========================================================================== */

/* ---------- Laptop ---------- */
@media (max-width: 1199px) {
    /* Hamburger menü (7 bağlantı + CTA laptop genişliğine sığmadığı için 1199px'te devreye girer).
       backdrop-filter, position: fixed alt öğeler için yeni bir containing block oluşturur;
       menünün tam ekran açılabilmesi için burada kapatılır. */
    .site-header { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav-toggle { display: grid; }
    .site-nav {
        position: fixed; inset: var(--header-h) 0 0 0;
        flex-direction: column; align-items: stretch; gap: 24px;
        margin: 0; padding: 24px var(--gutter) 32px;
        background: var(--surface-solid);
        border-top: 1px solid var(--border);
        overflow-y: auto;
        visibility: hidden; opacity: 0; transform: translateY(-8px);
        transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
    }
    .site-nav.is-open {
        visibility: visible; opacity: 1; transform: none;
        transition: opacity .2s var(--ease), transform .2s var(--ease);
    }
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; max-width: 640px; margin-inline: auto; }
    .site-nav__link {
        padding: 16px 12px; border-radius: 12px;
        font-size: 1.2rem; font-weight: 700;
        border-bottom: 1px solid var(--border);
    }
    .site-nav__link--ai { display: flex; }
    .site-nav__link.is-active { background: rgba(57, 103, 217, .08); }
    .site-nav__cta { width: 100%; max-width: 640px; margin-inline: auto; min-height: 56px; font-size: 1.05rem; }
    .site-nav__login + .site-nav__cta { margin-top: -12px; margin-left: auto; }
    body.nav-open { overflow: hidden; }

    .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .hub { --link: 32px; padding: 22px; }
    .hub__core-inner { width: 128px; }
    .node { font-size: .8rem; padding: 8px 10px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    :root { --header-h: 64px; }

    /* Hero: metin üstte, diyagram altta */
    .hero__grid { grid-template-columns: 1fr; }
    .hero__content { max-width: 680px; }
    .hero__visual { max-width: 720px; }

    .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

    .split { grid-template-columns: 1fr; justify-items: center; }
    .split__piece { width: 100%; }
    .split__joint { margin: -14px 0; }

    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .module-card--ai { grid-column: auto; }

    .section-foot { flex-direction: column; }

    .feature { grid-template-columns: 1fr; }
    .feature__visual { max-width: 520px; }

    /* Kullanım modelleri: üst üste, aralarında dikey ok */
    .usage { grid-template-columns: 1fr; }
    .usage__scale { width: auto; height: 76px; }
    .usage__scale-line {
        left: 50%; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; margin: 0 0 0 -1.5px;
        background: linear-gradient(180deg, rgba(57, 103, 217, .5), var(--sun));
    }
    .usage__scale-line::after { right: auto; top: auto; bottom: -2px; left: 50%; margin: 0 0 0 -6px; transform: rotate(135deg); }
    .usage__scale-label { top: 0; left: 70px; width: auto; }

    .ai-feature { grid-template-columns: 1fr; }
    .ai-feature__visual { max-width: 560px; }
    .value-grid--three { grid-template-columns: 1fr; }

    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step:not(:last-child)::after { display: none; }

    .cta-band { grid-template-columns: 1fr; }

    .scenario__body { grid-template-columns: 1fr 1fr; }
    .scenario__block--solution { grid-column: 1 / -1; grid-row: 2; border-left: 0 !important; border-top: 1px solid var(--border); }
    .scenario__block:last-child { border-left: 1px solid var(--border); }

    .module-detail { grid-template-columns: 1fr; }
    .module-detail--reverse .module-detail__text { order: 0; }

    .connect-note { grid-template-columns: auto 1fr; }
    .connect-note .btn { grid-column: 2; justify-self: start; }

    .method-row { grid-template-columns: auto minmax(0, 1fr); }
    .method-row__tags { grid-column: 2; justify-content: flex-start; max-width: none; }

    .two-col, .story { grid-template-columns: 1fr; }
    .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .contact-layout { grid-template-columns: 1fr; }
    .contact-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }

    .page-header .orb--accent { right: -140px; }
    .hero .orb--orange, .hero .orb--green { display: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
    :root { --gutter: 16px; }

    body { font-size: .975rem; }

    .hero { padding-top: 36px; }
    .hero__lead { font-size: 1.05rem; }
    .hero__actions .btn { flex: 1 1 auto; }
    .hero__trust { flex-direction: column; align-items: flex-start; gap: 8px; }
    .hero__pill { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; border: 0; background: none; }

    /* Hub diyagramı: dikey akış
       [Mevcut sistemler: yatay kaydırılabilir etiketler] ↓ [EntegreSmart] ↓ [Modüller: 2 sütun] */
    .hub {
        --link: 28px;
        grid-template-columns: 1fr;
        row-gap: var(--link);
        padding: 18px;
    }
    .hub__col--modules .hub__label { text-align: left; }
    .hub__nodes { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .node { padding: 7px 10px; font-size: .8rem; }
    .node::after, .node::before { display: none; }
    .hub__col--modules .hub__nodes { display: grid; grid-template-columns: 1fr 1fr; }
    .hub__col--modules .node:last-child { grid-column: 1 / -1; }

    .hub__core { position: relative; }
    .hub__core::before, .hub__core::after {
        content: ""; position: absolute; left: 50%;
        width: 2px; height: var(--link); margin-left: -1px;
        background: repeating-linear-gradient(180deg, rgba(57, 103, 217, .55) 0 6px, transparent 6px 11px);
        background-size: 2px 22px;
        animation: flow-down 1.1s linear infinite;
    }
    .hub__core::before { bottom: 100%; }
    .hub__core::after { top: 100%; }
    .hub__core-inner {
        flex-direction: row; justify-content: flex-start; gap: 14px;
        width: 100%; padding: 14px 16px; text-align: left;
    }
    .hub__core-inner img { width: 52px; height: 52px; padding: 5px; border-radius: 12px; }
    .hub__core-inner strong { display: block; }
    .hub__protocols { display: block; }

    .section-head--row { flex-direction: column; align-items: flex-start; }

    .value-grid { grid-template-columns: 1fr; gap: 24px; }
    .value { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
    .value__icon { grid-row: span 2; margin: 0; }

    .module-grid { grid-template-columns: 1fr; gap: 16px; }
    .module-card { padding: 22px; }
    .module-card__top { margin-bottom: 14px; }
    .module-card .piece-icon { --size: 44px; }
    .module-card__text { margin-bottom: 12px; }

    .method-grid { grid-template-columns: 1fr; gap: 12px; }
    .method-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 18px; }
    .method-card .piece-icon { grid-row: span 2; margin: 0; }
    .method-card:hover { transform: none; }

    /* Adımlar: dikey zaman çizelgesi */
    .steps { grid-template-columns: 1fr; gap: 0; }
    .step {
        display: grid; grid-template-columns: 44px 1fr; column-gap: 16px;
        padding: 0 0 28px; border: 0; background: transparent; box-shadow: none;
    }
    .step__num { grid-row: span 2; margin: 0; }
    .step:not(:last-child)::after {
        display: block; top: 50px; bottom: 6px; left: 21px; right: auto;
        width: 2px; height: auto;
        background: repeating-linear-gradient(180deg, rgba(57, 103, 217, .45) 0 4px, transparent 4px 8px);
    }

    .order-flow { padding: 16px; }

    .cta-band { padding: 28px 22px 32px; }
    .cta-band__actions .btn { flex: 1 1 auto; }

    .orb { width: 240px; height: 240px; filter: blur(60px); }
    .page-header__lead { font-size: 1.05rem; }

    .jump-nav {
        flex-wrap: nowrap; overflow-x: auto;
        margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px;
        scrollbar-width: none;
    }
    .jump-nav::-webkit-scrollbar { display: none; }

    .scenario__head { gap: 14px; }
    .scenario__head .piece-icon { --size: 44px; }
    .scenario__body { grid-template-columns: 1fr; }
    .scenario__block + .scenario__block,
    .scenario__block:last-child { border-left: 0; border-top: 1px solid var(--border); }
    .scenario__block--solution { grid-row: auto; }

    .module-tabs {
        flex-wrap: nowrap; overflow-x: auto;
        margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px;
        scrollbar-width: none;
    }
    .module-tabs::-webkit-scrollbar { display: none; }
    .module-tabs__item { flex: none; }
    .module-detail { padding: 22px 18px; border-radius: var(--r-card); }
    .module-detail__panel { padding: 22px; }

    .connect-note { grid-template-columns: 1fr; }
    .connect-note .btn { grid-column: auto; }

    .method-row { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
    .method-row__tags { grid-column: auto; }

    .data-grid { grid-template-columns: 1fr 1fr; }
    .data-grid li { font-size: .875rem; padding: 10px 12px; }

    .principle-grid { grid-template-columns: 1fr; }
    .puzzle-art { max-width: 300px; }

    .story__quote { padding: 26px; }
    .story__quote blockquote { font-size: 1.3rem; }

    .form__grid { grid-template-columns: 1fr; gap: 18px; }
    .contact-aside { grid-template-columns: 1fr; }

    .site-footer { padding-top: 56px; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Küçük mobil ---------- */
@media (max-width: 479px) {
    .brand__name { font-size: 1.15rem; }
    .hero__actions .btn, .cta-band__actions .btn { width: 100%; }
    .data-grid { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .split__piece h3 { font-size: 1.35rem; }
}

@keyframes flow-down { to { background-position: 0 22px; } }