* { box-sizing: border-box; } body {margin: 0;}
/* Mobile horizontal overflow guard — sticky drawer + translated elements
   can extend past viewport. `overflow-x: clip` keeps the document at viewport
   width without breaking position:sticky inside (which `hidden` would).
   Fallback to `hidden` for older browsers. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
#isnjksr { position: relative; padding-top: 56.25%; }
#ipte1ax { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#iznnh58 { position: relative; padding-top: 56.25%; }
#ittqo9k { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#iyy12uo { position: relative; padding-top: 56.25%; }
#i9oiomv { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#il9lwmi { position: relative; padding-top: 56.25%; }
#iasw7o6 { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#i4nj4je { position: relative; padding-top: 56.25%; }
#ilxj1zl { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#ik8r807 { position: relative; padding-top: 56.25%; }
#isytc0r { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#ipgqgwr { position: relative; padding-top: 56.25%; }
#i4wi0re { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#ichf97a { position: relative; padding-top: 56.25%; }
#iq5lthd { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#iqmg21p { position: relative; padding-top: 56.25%; }
#i5sdird { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

/* Lazy click-to-play placeholders for the s02 mode demos. The wrapper divs above
   keep their padding-top:56.25% aspect ratio; this button fills the frame with a
   Cloudflare Stream thumbnail poster + a centered play affordance. The real
   iframe is injected on click (see @section Scripts in the view), so the page
   ships only the hero video instead of autoplaying 9 streams at load. */
.aipb-lazyvid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: #0B0420;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter .2s ease;
}
.aipb-lazyvid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 4, 32, 0.18);
    transition: background .2s ease;
}
.aipb-lazyvid:hover { filter: brightness(1.04); }
.aipb-lazyvid:hover::after { background: rgba(11, 4, 32, 0.08); }
.aipb-lazyvid:focus-visible { outline: 2px solid #F43F5E; outline-offset: -3px; }
/* Play affordance: white disc + CSS triangle (no SVG inside the button) */
.aipb-lazyvid-play {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s cubic-bezier(.23,1,.32,1), background .2s ease;
}
.aipb-lazyvid:hover .aipb-lazyvid-play { transform: scale(1.08); background: #fff; }
.aipb-lazyvid-play::before {
    content: '';
    width: 0;
    height: 0;
    margin-left: 4px;
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #0B0420;
}
@media (max-width: 560px) {
    .aipb-lazyvid-play { width: 48px; height: 48px; }
    .aipb-lazyvid-play::before { border-width: 9px 0 9px 15px; }
}

/* ============================================================================
   Site-standard alignment overrides — loaded AFTER sections.css so these win
   the cascade without !important. Brings /ai-photo-booth-software in line with
   the homepage standard:
     - section padding clamp(80px, 9vw, 128px)
     - h2 Montserrat / 800 / clamp(28-48px) / lh 1.12
     - eyebrow purple 12px / Montserrat 700 / uppercase 0.08em tracking
   Hero (.s01) intentionally untouched.
   ========================================================================== */
.s02, .s03, .s04, .s05, .s06, .s07, .s08, .s09, .s10, .s11, .s13, .s14 {
    padding: clamp(80px, 9vw, 128px) 0;
}
.s02-t, .s03-t, .s04-t, .s05-t, .s06-t, .s07-t, .s08-t, .s09-t, .s10-t,
.s11-t, .s13-t, .s14-t, .s10-h {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(32px, 3.8vw, 48px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
/* H2 em emphasis — gradient text for the highlighted word. Matches aurora hue. */
.s11-t em, .s13-t em {
    background: linear-gradient(135deg, #ED4D6D 0%, #FBD065 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: normal;
}
/* Section-head wrapper spacing parity with homepage .hx-head */
.s02-hd, .s03-hd, .s04-hd, .s05-hd, .s06-hd, .s07-hd, .s08-hd, .s09-hd, .s10-h,
.s11-hd, .s13-hd {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
    text-align: center;
}
/* Subheads / leads */
.s02-sub, .s03-sub, .s04-sub, .s05-sub, .s06-sub, .s07-sub, .s08-sub, .s09-sub, .s10-desc,
.s11-sub, .s13-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.6;
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
}
/* Mid-section spacing between heading and grid */
.s02-grid, .s03-layout, .s04-grid, .s05-grid, .s06-cards, .s07-plans, .s08-yt, .s09-faq {
    margin-top: 0;
}

/* Eyebrows — site standard. Not all sections have one in the current markup;
   when added, this style picks them up. */
.s02-eyebrow, .s03-eyebrow, .s04-eyebrow, .s05-eyebrow, .s06-eyebrow,
.s07-eyebrow, .s08-eyebrow, .s09-eyebrow, .s10-eyebrow {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7F56D9;
    margin-bottom: 14px;
}
/* Dark-bg sections soften the eyebrow color */
.s02-eyebrow, .s07-eyebrow, .s10-eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
    .s02-hd, .s03-hd, .s04-hd, .s05-hd, .s06-hd, .s07-hd, .s08-hd, .s09-hd, .s10-h {
        margin-bottom: 40px;
    }
}

/* ===== Section background rhythm (TEMPLATE STANDARD) =====================
   Bu sayfa diğer landing'ler için şablon. DOM sırasında HİÇBİR iki ardışık
   content section aynı arka planı paylaşmaz → her geçişte görünür ayrım,
   "kopuk/boş 256px boşluk" hissi olmaz. Ritim: koyu hero → beyaz/gri
   alternasyonu → koyu kapanış (Stripe/Linear/Vercel pattern).
   DOM: s01(dark) [s02 s03 s04 s14] s12(CTA) [s05 s06 s15 s07 s13 s11 s08 s09] s10(dark)
   tokens-aurora.css s02'yi !important ile FAFAFB yapıyor; ritmi netleştirmek
   için ilgili section'ları burada !important ile sabitliyoruz. */
.page-aipb .s02 { background: #FAFAFB !important; }  /* gri */
.page-aipb .s03 { background: #fff !important; }     /* beyaz */
.page-aipb .s04 { background: #FAFAFB !important; }  /* gri */
.page-aipb .s14 { background: #fff !important; }     /* beyaz */
/* s12 = transparan mid-CTA, komşularını böler */
.page-aipb .s05 { background: #FAFAFB !important; }  /* gri */
.page-aipb .s06 { background: #fff !important; }     /* beyaz */
.page-aipb .s15 { background: #FAFAFB !important; }  /* gri */
.page-aipb .s07 { background: #fff !important; }     /* beyaz */
.page-aipb .s13 { background: #FAFAFB !important; }  /* gri */
.page-aipb .s11 { background: #fff !important; }     /* beyaz */
.page-aipb .s08 { background: #FAFAFB !important; }  /* gri */
.page-aipb .s09 { background: #fff !important; }     /* beyaz */
/* Fallback (page-aipb dışı / eski) */
.s04, .s06, .s09 { background: #FAFAFB; }
/* Dark-bg subtitle readability — raise opacity from .45 → .7 for site parity */
.s02-sub, .s07-sub { color: rgba(255, 255, 255, 0.7); }
/* Body-text gray normalization for LIGHT-bg sections only. Dark sections
   (s02 + s07 hero subtitle) keep their white-translucent — pushing #667085
   onto a dark gradient reads as a washed-out blue-gray. */
.s03 p, .s04 p, .s05 p, .s06 p, .s08 p, .s09 p, .s11 p, .s13 p,
.s03 li, .s04 li, .s05 li, .s06 li, .s08 li, .s09 li,
.s03-sub, .s04-sub, .s05-sub, .s06-sub, .s08-sub, .s09-sub,
.s11-sub, .s13-sub,
.s03-ai-name, .s04-feat-d, .s05-uc-d, .s05-tm-d, .s06-feat-row,
.s11-step-d {
    color: #667085;
}

/* ===== S01 Hero (AIPB) — masterpiece pass ==================================
   12-point polish: H1 single-gradient, primary CTA solid+shadow, outline
   secondary weight, merged meta row, single-color badge gold, bg face soften,
   logo grayscale force, sub2 smaller. */

/* Trust badge — single-color gold (was gradient muddy on dark bg) */
.page-aipb .s01-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
    width: fit-content;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 12px rgba(0, 0, 0, 0.22);
}
.page-aipb .s01-badge strong { font-weight: 700; color: #fff; }
.page-aipb .s01-badge .s01-gold {
    color: #FBD065 !important;
    -webkit-text-fill-color: #FBD065 !important;
    font-weight: 700;
    background: none !important;
}
.page-aipb .s01-badge-dot {
    width: 7px !important;
    height: 7px !important;
    box-shadow: 0 0 10px rgba(18, 183, 106, 0.7);
}

/* H1 — single gradient phrase ("Any Device" only), balanced wrapping */
.page-aipb .s01-t {
    max-width: 14ch;
    text-wrap: balance;
}
@media (min-width: 960px) {
    .page-aipb .s01-t { max-width: 18ch; }
}

/* Primary CTA — solid coral with stronger shadow, uppercase letter-spacing for buy-now energy */
.page-aipb .s01-btn-primary {
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 24px rgba(244, 63, 94, 0.45),
        0 2px 6px rgba(244, 63, 94, 0.30) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}
.page-aipb .s01-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 12px 32px rgba(244, 63, 94, 0.55),
        0 4px 10px rgba(244, 63, 94, 0.36) !important;
}

/* Outline CTA — secondary visual weight (ghost button, half opacity border, no shadow) */
.page-aipb .s01-btn-outline {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.page-aipb .s01-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.08) !important;
}

/* Sub hierarchy — Linear pattern: stronger bold lead, tighter secondary */
.page-aipb .s01-sub {
    font-size: clamp(17px, 1.5vw, 21px) !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.94) !important;
    line-height: 1.45 !important;
    margin-bottom: 6px !important;
}
.page-aipb .s01-sub2 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.5 !important;
    margin-bottom: 28px !important;
}

/* Merged meta row — trust checks + platform pills inline (was 2 separate rows)
   Uses ghost separator + smaller pills, single horizontal scan line. */
.page-aipb .s01-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 18px;
}
.page-aipb .s01-meta-trust {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.page-aipb .s01-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.74);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
}
.page-aipb .s01-meta-item svg {
    width: 13px; height: 13px;
    color: #12b76a;
    flex-shrink: 0;
}
.page-aipb .s01-meta-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.16);
    display: inline-block;
}
.page-aipb .s01-meta-platforms {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.page-aipb .s01-meta-plat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.74);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.page-aipb .s01-meta-plat svg {
    width: 14px; height: 14px;
    fill: currentColor;
    flex-shrink: 0;
    opacity: 0.85;
}
.page-aipb .s01-meta-plat:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.page-aipb .s01-meta-plat:hover svg { opacity: 1; }

@media (max-width: 1100px) {
    /* Meta row wraps naturally — break between trust and platforms */
    .page-aipb .s01-meta { gap: 12px 14px; }
}
@media (max-width: 960px) {
    .page-aipb .s01-meta { justify-content: center; }
    .page-aipb .s01-meta-sep { display: none; }
    .page-aipb .s01-meta { flex-direction: column; gap: 14px; align-items: center; }
}
@media (max-width: 560px) {
    .page-aipb .s01-meta-trust { gap: 12px; justify-content: center; flex-wrap: wrap; }
    .page-aipb .s01-meta-item { font-size: 12px; }
    .page-aipb .s01-meta-platforms { flex-wrap: wrap; justify-content: center; gap: 6px; }
    .page-aipb .s01-meta-plat { padding: 6px 10px; font-size: 11.5px; }
}

/* Logo wall — force grayscale on stubborn colored logos (BMW, Mercedes) */
.page-aipb .s01-marquee-track img {
    filter: brightness(0) invert(1) opacity(0.45) !important;
    transition: opacity 0.2s, filter 0.2s;
}
.page-aipb .s01-marquee-track img:hover {
    filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* Background — soften the face silhouette so H1 doesn't compete with it */
.page-aipb .s01-bg {
    opacity: 0.5;
}
.page-aipb .s01-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11, 4, 32, 0.85) 0%, rgba(11, 4, 32, 0.55) 45%, transparent 75%);
    pointer-events: none;
}

/* Sub hierarchy — Linear pattern: punchy bold lead, secondary detail below.
   !important required because aurora-typography.css forces 0.72 site-wide. */
.page-aipb .s01-sub {
    font-size: clamp(17px, 1.5vw, 21px) !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.94) !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
}
.page-aipb .s01-sub2 {
    font-size: clamp(15px, 1.2vw, 17px) !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
}

/* Hero wrapper padding — Stripe symmetry (was top-heavy 130/94) */
.page-aipb .s01-w {
    padding-top: clamp(112px, 9vw, 144px);
    padding-bottom: clamp(96px, 7vw, 120px);
}

/* Outline CTA hover transform — match primary for tactile parity */
.page-aipb .s01-btn-outline {
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.page-aipb .s01-btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.12);
}

/* Tablet H1 sweet spot — clamp lift so 768-960 reads 44-48px not 38-40 */
@media (min-width: 720px) and (max-width: 960px) {
    .page-aipb .s01-t { font-size: clamp(44px, 6vw, 52px); line-height: 1.05; }
}

/* Rating badge — pill inside video corner, no float animation
   (sections.css default puts it overhanging at bottom:-12,right:-16 with float). */
.page-aipb .s01-rating {
    bottom: 12px !important;
    right: 12px !important;
    gap: 7px;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    font-size: 12.5px !important;
    letter-spacing: 0.01em;
    animation: none !important;
}
.page-aipb .s01-rating svg { width: 14px !important; height: 14px !important; }
.page-aipb .s01-rating strong { font-weight: 700; }

@media (max-width: 560px) {
    .page-aipb .s01-rating {
        bottom: 10px !important; right: 10px !important;
        font-size: 11.5px !important; padding: 6px 11px !important;
    }
    .page-aipb .s01-rating svg { width: 12px !important; height: 12px !important; }
}

/* Marquee edge fade — sections.css already has 10/90% mask. Soften further. */
.page-aipb .s01-marquee {
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* ===== S07 light-bg color overrides (AIPB) ================================
   S07 was flipped from dark to light per tokens-aurora.css. Toggle inactive
   button + guarantee strip still use white-on-white from sections.css. Override. */
/* Toggle ile pricing kartları arası nefes — "BEST SELLER" rozeti kartın
   üstünden ~14px taştığı için görünür boşluk daralıyordu. Gap'i artır. */
.page-aipb .s07 .s07-tog-wrap { margin-bottom: clamp(56px, 5vw, 72px); }
.page-aipb .s07 .s07-tog {
    background: #F2F4F7;
    border: 1px solid #EAECF0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.page-aipb .s07 .s07-tog-btn {
    color: #475467;
}
.page-aipb .s07 .s07-tog-btn.active {
    color: #fff;
}
.page-aipb .s07 .s07-tog-btn:not(.active):hover {
    color: #101828;
}
/* Trust strip (4-cell row) — under pricing tiers, climax reassurance */
.page-aipb .s07 .s07-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 48px);
    margin-top: clamp(48px, 6vw, 64px);
    padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 40px);
    border-radius: 16px;
    background: #FAFAFB;
    border: 1px solid #EAECF0;
    max-width: none;
}
.page-aipb .s07 .s07-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #475467;
    white-space: nowrap;
}
.page-aipb .s07 .s07-trust-item strong {
    color: #101828;
    font-weight: 600;
}
.page-aipb .s07 .s07-trust-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #7F56D9;
}
@media (max-width: 720px) {
    .page-aipb .s07 .s07-trust { gap: 14px 24px; padding: 18px 20px; }
    .page-aipb .s07 .s07-trust-item { font-size: 12.5px; }
}
/* ============================================================================
   S07 PRICING — MASTERPIECE (v2: restraint over flash, Inter site-wide)
   Stripe/Linear/Vercel pattern. White section, cards float, Pro AI subtly lead.
   ============================================================================ */

/* Section: keep #FFF (white), add gentle radial depth so it doesn't feel flat
   sandwiched between S06 (#FAFAFB) and S13 (#FFF) */
.page-aipb .s07 {
    position: relative;
    overflow: hidden;
    background: #FFFFFF !important;
}
.page-aipb .s07::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 30%, rgba(244, 63, 94, 0.035) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 50% 75%, rgba(127, 86, 217, 0.025) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.page-aipb .s07 .s07-w { position: relative; z-index: 1; }

/* Plan cards — clean, floating on canvas.
   overflow: visible so the top badges (-14px) don't get clipped by the card edge. */
.page-aipb .s07 .s07-plan {
    border-radius: 20px !important;
    border: 1px solid #EAECF0 !important;
    background: #fff !important;
    padding: 36px 30px 30px !important;
    overflow: visible !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 8px 24px -12px rgba(16, 24, 40, 0.08) !important;
    transition: transform .28s cubic-bezier(.23,1,.32,1), box-shadow .28s, border-color .28s !important;
}
.page-aipb .s07 .s07-plan:hover {
    transform: translateY(-4px);
    border-color: #D0D5DD !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 16px 40px -16px rgba(16, 24, 40, 0.14) !important;
}

/* Pro AI — restrained emphasis. NO heavy glow ring, just subtle coral border +
   slight lift + clean shadow. Stripe/Vercel restraint. */
.page-aipb .s07 .s07-plan.pop {
    border: 1.5px solid #F43F5E !important;
    padding: 48px 30px 32px !important;
    transform: translateY(-8px);
    position: relative;
    z-index: 2;
    background: #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 12px 32px -8px rgba(244, 63, 94, 0.18),
        0 24px 48px -16px rgba(244, 63, 94, 0.12) !important;
}
.page-aipb .s07 .s07-plan.pop:hover {
    transform: translateY(-12px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 20px 48px -12px rgba(244, 63, 94, 0.28),
        0 32px 64px -20px rgba(244, 63, 94, 0.20) !important;
}

/* Ultimate — subtle gold accent border (no fancy tint bg) */
.page-aipb .s07 .s07-plan.ult {
    border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
    background: #fff !important;
}
.page-aipb .s07 .s07-plan.ult:hover {
    border-color: rgba(245, 158, 11, 0.65) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 16px 40px -16px rgba(245, 158, 11, 0.22) !important;
}

/* Top badge — pill style, sits cleanly above card */
.page-aipb .s07 .s07-top-badge {
    top: -14px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    border: none !important;
}
.page-aipb .s07 .s07-top-badge.starter {
    background: #F2F4F7 !important;
    color: #475467 !important;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06) !important;
}
.page-aipb .s07 .s07-top-badge.popular {
    background: linear-gradient(135deg, #FF7A5C, #F43F5E) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.32) !important;
}
.page-aipb .s07 .s07-top-badge.ultimate {
    background: linear-gradient(135deg, #FBBF24, #F59E0B) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.28) !important;
}

/* Plan name + description — ALL Inter site-wide (no more Montserrat) */
.page-aipb .s07 .s07-name {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #101828 !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.02em;
}
.page-aipb .s07 .s07-desc {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #667085 !important;
    margin: 0 0 28px !important;
    line-height: 1.5 !important;
}

/* Price typography — bold Inter, generous size */
.page-aipb .s07 .s07-pr-row { margin-bottom: 8px !important; }
.page-aipb .s07 .s07-pr {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(44px, 4vw, 56px) !important;
    font-weight: 800 !important;
    color: #101828 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
}
.page-aipb .s07 .s07-plan.pop .s07-pr {
    color: #101828 !important;
    -webkit-text-fill-color: #101828 !important;
    background: none !important;
}
.page-aipb .s07 .s07-per {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #98A2B3 !important;
    margin-left: 4px !important;
}
.page-aipb .s07 .s07-pr-sub {
    font-size: 13px !important;
    color: #667085 !important;
    margin-bottom: 28px !important;
    font-weight: 500;
}

/* Tier-specific CTA buttons — ghost / coral / gold */
.page-aipb .s07 .s07-plan .s07-cta {
    padding: 16px 24px !important;
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif;
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 100%;
    justify-content: center;
    transition: all .25s cubic-bezier(.23,1,.32,1) !important;
}
/* Starter: ghost button */
.page-aipb .s07 .s07-plan:not(.pop):not(.ult) .s07-cta {
    background: #F9FAFB !important;
    color: #101828 !important;
    border: 1.5px solid #EAECF0 !important;
    box-shadow: none !important;
}
.page-aipb .s07 .s07-plan:not(.pop):not(.ult) .s07-cta:hover {
    background: #fff !important;
    border-color: #101828 !important;
    transform: translateY(-1px);
}
/* Pro AI: coral primary (already inherited but enhance) */
.page-aipb .s07 .s07-plan.pop .s07-cta {
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 8px 20px -4px rgba(244, 63, 94, 0.4) !important;
    border: none !important;
}
.page-aipb .s07 .s07-plan.pop .s07-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 12px 28px -4px rgba(244, 63, 94, 0.52) !important;
}
/* Ultimate: gold gradient */
.page-aipb .s07 .s07-plan.ult .s07-cta {
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%) !important;
    color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 8px 20px -4px rgba(244, 63, 94, 0.4) !important;
    border: none !important;
}
.page-aipb .s07 .s07-plan.ult .s07-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 12px 28px -4px rgba(244, 63, 94, 0.52) !important;
}

/* Feature list — tighter, single-line guaranteed */
.page-aipb .s07 .s07-feats { gap: 10px !important; padding-top: 4px; }
.page-aipb .s07 .s07-feat {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #344054 !important;
    align-items: center !important;
    gap: 10px !important;
}
.page-aipb .s07 .s07-feat.off { color: #98A2B3 !important; }
.page-aipb .s07 .s07-feat svg {
    width: 14px !important; height: 14px !important;
    flex-shrink: 0;
    margin-top: 0 !important;
}
.page-aipb .s07 .s07-feat:not(.off) svg { stroke: #12B76A !important; }
.page-aipb .s07 .s07-feat.off svg { stroke: #D0D5DD !important; }

/* Divider polish */
.page-aipb .s07 .s07-div {
    margin: 24px -32px 20px !important;
    background: #F2F4F7 !important;
}

/* ============================================================================
   S08 "Watch all tutorials" — secondary off-site link, clean ghost button.
   Was a heavy dark gradient pill with shimmer; downgraded to text-only ghost
   so it doesn't compete with primary coral CTAs elsewhere on the page.
   ============================================================================ */
.page-aipb .s08-yt { margin-top: 32px !important; }
.page-aipb .s08-yt-btn {
    background: #fff !important;
    color: #344054 !important;
    border: 1px solid #D0D5DD !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    transition: border-color .14s ease, background .14s ease, transform .14s ease !important;
    gap: 8px !important;
}
.page-aipb .s08-yt-btn::after { display: none !important; }
.page-aipb .s08-yt-btn:hover {
    background: #F9FAFB !important;
    border-color: #98A2B3 !important;
    color: #101828 !important;
    transform: none !important;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06) !important;
}
.page-aipb .s08-yt-btn:active {
    transform: scale(.98) !important;
}

/* ============================================================================
   S09 FAQ — masterpiece polish (accordion refined, Aurora typography)
   ============================================================================ */
.page-aipb .s09 .s09-item {
    border-radius: 16px !important;
    border: 1px solid #EAECF0 !important;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
}
.page-aipb .s09 .s09-item:hover {
    border-color: #D0D5DD !important;
    box-shadow: 0 8px 20px -12px rgba(16, 24, 40, 0.08);
}
.page-aipb .s09 .s09-item.open {
    border-color: #F43F5E !important;
    box-shadow: 0 8px 24px -12px rgba(244, 63, 94, 0.16) !important;
    background: #fff !important;
}
.page-aipb .s09 .s09-q {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #101828 !important;
    padding: 20px 22px !important;
    gap: 16px;
}
.page-aipb .s09 .s09-q:hover { color: #F43F5E !important; }
/* FAQ ikonu = PRICING ile birebir: gri daire + chevron (aşağı ok), açıkken
   180° döner. Eski "+ → × (rotate45)" deseni eğik durduğu için chevron'a
   geçildi (Stripe/Linear FAQ standardı). Markup'taki + SVG gizlenir,
   chevron ::after ile çizilir (pricing .pr-faq-item summary::after ile aynı). */
.page-aipb .s09 .s09-q-icon {
    width: 20px !important; height: 20px !important;
    min-width: 20px !important; min-height: 20px !important; /* global min-width:44 elips yapıyordu */
    max-width: 20px !important;
    border-radius: 50% !important;
    background: var(--c-bg-muted, #F2F4F7) !important;
    border: 0 !important;
    flex: 0 0 20px !important;
    position: relative;
    transition: transform .2s cubic-bezier(.23,1,.32,1), background .25s !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.page-aipb .s09 .s09-q-icon svg { display: none !important; } /* eski + SVG gizle */
.page-aipb .s09 .s09-item.open .s09-q-icon {
    transform: rotate(180deg) !important; /* chevron yukarı (pricing ile aynı) */
}
.page-aipb .s09 .s09-a-inner {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14.5px !important;
    color: #475467 !important;
    line-height: 1.65 !important;
    padding: 18px 22px 22px !important;
    border-top: 1px solid #F2F4F7 !important;
}
.page-aipb .s09 .s09-a-inner strong { color: #101828 !important; }
.page-aipb .s09 .s09-a-inner p { margin: 0 0 10px !important; }
.page-aipb .s09 .s09-a-inner p:last-child { margin-bottom: 0 !important; }
.page-aipb .s09 .s09-a-inner ul,
.page-aipb .s09 .s09-a-inner ol { margin: 0 0 10px 18px !important; padding: 0 !important; }
.page-aipb .s09 .s09-a-inner li { margin: 0 0 4px !important; }
.page-aipb .s09 .s09-a-inner a {
    color: #F43F5E !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(244, 63, 94, 0.35) !important;
    transition: border-color .14s ease, color .14s ease !important;
}
.page-aipb .s09 .s09-a-inner a:hover {
    border-color: #F43F5E !important;
    color: #BE123C !important;
}
/* Smooth accordion height animation */
.page-aipb .s09 .s09-a { transition: max-height .35s cubic-bezier(.23,1,.32,1) !important; }

/* ============================================================================
   S10 Closing CTA — second-hero treatment (matches hero typographic scale)
   ============================================================================ */
/* Footer'dan net optik ayrım — s10 koyu, site footer da koyu; hairline
   ikisini "tek devasa koyu blok" olmaktan kurtarır + bottom padding artırılır. */
.page-aipb .s10 { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
/* Closing CTA dikey ritmi = pricing .pr-bcta ile BİREBİR. Section padding
   aurora-typography'de --section-pad-lg (128) ile veriliyor; inner çift
   binmesin diye .s10-cta dikey padding sıfır (sadece yatay 24px). */
.page-aipb .s10 .s10-cta {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}
.page-aipb .s10 .s10-h {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(32px, 3.8vw, 48px) !important; /* site H2 ölçeği (hero değil) */
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    color: #fff !important;
    margin: 0 0 18px !important;
}
.page-aipb .s10 .s10-desc {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(16px, 1.3vw, 19px) !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.6 !important;
    max-width: 56ch;
    margin: 0 auto clamp(28px, 3vw, 36px) !important;
}
.page-aipb .s10 .s10-btn-primary {
    min-width: 220px;
    justify-content: center !important; /* metin ortalansın (min-width>içerik) */
    gap: 0 !important; /* ikon yok — hayalet gap'i sıfırla, sağ boşluk gitsin */
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 16px !important; /* hero CTA ile eş baseline */
    font-weight: 700 !important;
    padding: 18px 36px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%) !important; /* tek standart coral */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 10px 30px rgba(244, 63, 94, 0.48),
        0 0 0 0 rgba(244, 63, 94, 0.28);
    animation: s10-pulse 3.8s ease-in-out infinite; /* sakin pulse */
}
.page-aipb .s10 .s10-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 14px 40px rgba(244, 63, 94, 0.55) !important;
    animation-play-state: paused;
}
@keyframes s10-pulse {
    0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 10px 30px rgba(244, 63, 94, 0.48), 0 0 0 0 rgba(244, 63, 94, 0.28); }
    50% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 10px 30px rgba(244, 63, 94, 0.48), 0 0 0 8px rgba(244, 63, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .page-aipb .s10 .s10-btn-primary { animation: none; }
}

/* ============================================================================
   Section entrance animations — IntersectionObserver-triggered fade-in-up.
   Applies to section heads + cards. Respects prefers-reduced-motion.
   ============================================================================ */
.page-aipb [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1);
    will-change: opacity, transform;
}
.page-aipb [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .page-aipb [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== S05 — Stats grid (replaces fake testimonials) ===================== */
.s05-stats-section {
    margin-top: 80px;
    max-width: 1232px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}
.s05-stats-hd { text-align: center; margin-bottom: 48px; }
/* Stats heading — clearly subordinate to main S05 H2 (was 44px / matched main).
   Drop to ~32-36px to establish visual hierarchy (Stripe sub-section pattern). */
.s05-stats-t {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 2.4vw, 32px);
    color: #101828;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.s05-stats-t em {
    background: linear-gradient(135deg, #ED4D6D 0%, #FBD065 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
}
.s05-stats-sub {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #667085;
    margin: 0;
}
.s05-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.s05-stat {
    background: #FAFAFB;
    border: 1px solid #EAECF0;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
}
.s05-stat-num {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 3.6vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 10px;
}
/* Varied brand-aligned gradients per stat (S04 icon palette consistency) */
.s05-stat:nth-child(1) .s05-stat-num { background-image: linear-gradient(135deg, #7F56D9 0%, #6941C6 100%); } /* purple */
.s05-stat:nth-child(2) .s05-stat-num { background-image: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); } /* blue */
.s05-stat:nth-child(3) .s05-stat-num { background-image: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%); } /* coral */
.s05-stat:nth-child(4) .s05-stat-num { background-image: linear-gradient(135deg, #FBD065 0%, #F59E0B 100%); } /* gold */
.s05-stat-lbl {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #475467;
    line-height: 1.4;
}
@media (max-width: 880px) {
    .s05-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .s05-stats-section { margin-top: 56px; }
}

/* ===== S11 — "Live in 3 minutes" 3-step setup ============================ */
.s11 { background: #FFFFFF; }
.s11-w { max-width: 1232px; margin: 0 auto; padding: 0 24px; }
.s11-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.s11-step {
    background: #fff;
    border: 1px solid #EAECF0;
    border-radius: 16px;
    padding: 32px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.06);
    transition: transform .28s cubic-bezier(.23,1,.32,1), box-shadow .28s cubic-bezier(.23,1,.32,1), border-color .28s;
}
.s11-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -16px rgba(16,24,40,.12);
    border-color: #D0D5DD;
}
/* Icon container — matches S05 use case icon style (subtle bg + border + stroked SVG). */
.s11-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 18px;
    transition: transform .3s;
}
.s11-step-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.s11-step:hover .s11-step-icon { transform: scale(1.08); }
/* Step variants — match S05 use case palette (purple/blue/green light tints) */
.s11-step:nth-child(1) .s11-step-icon { background: rgba(127, 86, 217, 0.08); border: 1px solid rgba(127, 86, 217, 0.20); }
.s11-step:nth-child(1) .s11-step-icon svg { stroke: #7F56D9; }
.s11-step:nth-child(2) .s11-step-icon { background: rgba(14, 165, 233, 0.08); border: 1px solid rgba(14, 165, 233, 0.20); }
.s11-step:nth-child(2) .s11-step-icon svg { stroke: #0EA5E9; }
.s11-step:nth-child(3) .s11-step-icon { background: rgba(18, 183, 106, 0.08); border: 1px solid rgba(18, 183, 106, 0.20); }
.s11-step:nth-child(3) .s11-step-icon svg { stroke: #12B76A; }
/* Step 3 play icon — has fill:currentColor on polygon, override to make it stroked */
.s11-step:nth-child(3) .s11-step-icon svg polygon { fill: #12B76A !important; stroke: #12B76A; }
.s11-step-t {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.4vw, 20px);
    color: #101828;
    margin: 0 0 10px;
    line-height: 1.3;
}
.s11-step-d {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 880px) {
    .s11-steps { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== S12 — Mid-page CTA strip ========================================== */
.s12 {
    background: linear-gradient(135deg, #0B0420 0%, #1A0B3D 100%);
    padding: clamp(48px, 6vw, 72px) 0;
}
.s12-w {
    max-width: 1232px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.s12-text { flex: 1 1 auto; min-width: 0; }
.s12-t {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.4vw, 30px);
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}
.s12-d {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}
.s12-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 188px;
    height: 56px;
    padding: 0 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.14s, box-shadow 0.14s;
}
.s12-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px -8px rgba(244, 63, 94, 0.5);
}

/* ============================================================================
   Container width parity (TEMPLATE STANDARD) — HER section wrapper'ı HEADER
   container'ı ile BİREBİR aynı genişlik + padding kullanır. Header standardı:
   max-width var(--hdr-container-max,1280px) + var(--hdr-px,24px) yatay padding
   (mobilde --hdr-mobile-px,16px). Aynı değişkenleri kullanıyoruz ki header
   değişirse tüm section'lar otomatik takip etsin. Böylece hero, her content
   section ve header içeriği TAM AYNI sol/sağ kenarda hizalanır.
   ============================================================================ */
.page-aipb .s01-w,
.page-aipb .s02-w,
.page-aipb .s03-w,
.page-aipb .s04-w,
.page-aipb .s05-w,
.page-aipb .s06-w,
.page-aipb .s07-w,
.page-aipb .s08-w,
.page-aipb .s09-w,
.page-aipb .s10-w,
.page-aipb .s11-w,
.page-aipb .s12-w,
.page-aipb .s13-w,
.page-aipb .s14-w,
.page-aipb .s15-w {
    max-width: var(--hdr-container-max, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--hdr-px, 24px) !important;
    padding-right: var(--hdr-px, 24px) !important;
}
@media (max-width: 720px) {
    .page-aipb .s01-w,
    .page-aipb .s02-w,
    .page-aipb .s03-w,
    .page-aipb .s04-w,
    .page-aipb .s05-w,
    .page-aipb .s06-w,
    .page-aipb .s07-w,
    .page-aipb .s08-w,
    .page-aipb .s09-w,
    .page-aipb .s10-w,
    .page-aipb .s11-w,
    .page-aipb .s12-w,
    .page-aipb .s13-w,
    .page-aipb .s14-w,
    .page-aipb .s15-w {
        padding-left: var(--hdr-mobile-px, 16px) !important;
        padding-right: var(--hdr-mobile-px, 16px) !important;
    }
}

/* ============================================================================
   S05 use case card — match S04/S07 masterpiece style (white bg, crisp border).
   Also fix: flex child needs min-width:0 so text doesn't push card wider.
   ============================================================================ */
.page-aipb .s05 .s05-uc {
    background: #fff !important;
    border: 1px solid #EAECF0 !important;
    padding: 28px 28px !important;
    border-radius: 16px !important;
    transition: transform .28s cubic-bezier(.23,1,.32,1), box-shadow .28s, border-color .28s !important;
    overflow: hidden;
}
.page-aipb .s05 .s05-uc:hover {
    transform: translateY(-2px);
    background: #fff !important;
    border-color: #D0D5DD !important;
    box-shadow: 0 16px 32px -16px rgba(16, 24, 40, 0.10) !important;
}
.page-aipb .s05 .s05-uc-body {
    flex: 1 1 0;
    min-width: 0; /* CRITICAL: lets flex child shrink so text doesn't overflow */
}
.page-aipb .s05 .s05-uc-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #101828 !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.015em;
}
.page-aipb .s05 .s05-uc-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px !important;
    color: #475467 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ============================================================================
   S14 — Unique Features showcase (tabbed, BIG screenshot + detail).
   Stripe homepage pattern: tabs at top, big visual panel beside detail content.
   Each tab = one differentiating capability. NO eyebrow (site doesn't use them).
   ============================================================================ */
.s14 { background: #FAFAFB; }
.s14-w { max-width: 1232px; margin: 0 auto; padding: 0 24px; }
.s14-hd { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.s14-t {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(32px, 3.8vw, 48px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #101828;
    margin: 0 0 16px;
}
.s14-t em {
    background: linear-gradient(135deg, #ED4D6D 0%, #FBD065 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: normal;
}
.s14-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.6;
    color: #475467;
    max-width: 64ch;
    margin: 0 auto;
}
/* Tab navigation — pills, scroll on mobile if overflowing */
.s14-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto 40px;
    max-width: 100%;
}
.s14-tab {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #475467;
    background: transparent;
    border: 1px solid #EAECF0;
    border-radius: 999px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    white-space: nowrap;
}
.s14-tab:hover { background: #fff; border-color: #D0D5DD; color: #101828; }
.s14-tab.is-active {
    background: #101828;
    color: #fff;
    border-color: #101828;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.18);
}

/* Showcase panel — BIG screenshot left (60%), detail content right (40%) */
.s14-panels { position: relative; }
.s14-panel {
    display: none;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
    background: #fff;
    border: 1px solid #EAECF0;
    border-radius: 24px;
    padding: clamp(28px, 3vw, 40px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 12px 32px -16px rgba(16, 24, 40, 0.10);
}
.s14-panel.is-active { display: grid; animation: s14fade .4s cubic-bezier(.23,1,.32,1); }
@keyframes s14fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.s14-panel-img {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/10;
    position: relative;
    border: 1px solid rgba(16, 24, 40, 0.06);
}
.s14-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.s14-img-templates { background: linear-gradient(135deg, #EBE5FA 0%, #DCD2F5 100%); }
.s14-img-editor    { background: linear-gradient(135deg, #FCE2E7 0%, #FFCAD4 100%); }
.s14-img-ux        { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); }
.s14-img-wizard    { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); }
.s14-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        linear-gradient(rgba(255,255,255,0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.45) 1px, transparent 1px);
    background-size: 32px 32px;
}
.s14-img-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(16, 24, 40, 0.55);
    background: rgba(255, 255, 255, 0.86);
    padding: 8px 18px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(16, 24, 40, 0.06);
}
.s14-panel-body { display: flex; flex-direction: column; gap: 16px; }
.s14-panel-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    color: #101828;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.s14-panel-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    color: #475467;
    line-height: 1.6;
    margin: 0;
}
.s14-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.s14-bullets li {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: #344054;
    padding-left: 26px;
    position: relative;
    line-height: 1.5;
}
.s14-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(127, 86, 217, 0.12);
    border: 1px solid rgba(127, 86, 217, 0.30);
}
.s14-bullets li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    width: 8px;
    height: 5px;
    border-left: 1.8px solid #7F56D9;
    border-bottom: 1.8px solid #7F56D9;
    transform: rotate(-45deg);
}

/* Mobile: stack panel vertically (image top, content below) */
@media (max-width: 880px) {
    .s14-panel { grid-template-columns: 1fr; gap: 24px; }
    .s14-tabs { gap: 6px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; justify-content: flex-start; }
    .s14-tabs::-webkit-scrollbar { display: none; }
    .s14-tab { padding: 9px 16px; font-size: 13px; }
}

/* ===== S13 — Hardware logo row =========================================== */
.s13 { background: #FFFFFF; }
.s13-w { max-width: 1232px; margin: 0 auto; padding: 0 24px; }
.s13-t { font-size: clamp(22px, 2vw, 28px); }
.s13-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.s13-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    background: #FAFAFB;
    border: 1px solid #EAECF0;
    border-radius: 12px;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    padding: 18px;
}
.s13-cell img {
    width: auto;
    height: auto;
    max-height: 30px;   /* uniform optical-height baseline (tuned per-logo below) */
    max-width: 116px;   /* keep wide wordmarks from dominating */
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.18s;
    filter: grayscale(100%);
}
/* Per-logo optical balance — equalize visual weight (wordmarks vs symbols vs
   dense marks). Measured + tuned via Puppeteer so every logo reads the same. */
.s13-cell img[src*="/canon"]      { max-height: 20px; }
.s13-cell img[src*="/nikon"]      { max-height: 20px; }
.s13-cell img[src*="/sony"]       { max-height: 20px; }
.s13-cell img[src*="/fujifilm"]   { max-height: 20px; }
.s13-cell img[src*="/panasonic"]  { max-height: 20px; }
.s13-cell img[src*="/gopro"]      { max-height: 28px; }
.s13-cell img[src*="/dnp"]        { max-height: 20px; }
.s13-cell img[src*="/mitsubishi"] { max-height: 36px; }
.s13-cell img[src*="/hiti"]       { max-height: 24px; }
.s13-cell img[src*="/epson"]      { max-height: 20px; }
.s13-cell img[src*="/hp"]         { max-height: 34px; }
.s13-cell img[src*="/apple"]      { max-height: 26px; }
.s13-cell img[src*="/samsung"]    { max-height: 20px; }
.s13-cell img[src*="/dobot"]      { max-height: 36px; }
.s13-cell img[src*="/stripe"]     { max-height: 22px; }
.s13-cell:hover {
    border-color: #D0D5DD;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px -1px rgba(16, 24, 40, 0.06);
}
.s13-cell:hover img {
    opacity: 1;
    filter: grayscale(0%);
}
@media (max-width: 1024px) {
    .s13-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .s13-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .s13-cell { height: 72px; padding: 14px; }
}

/* ============================================================================
   S15 · Comparison table — competitor-agnostic feature parity grid.
   Positioned between S06 Calc and S07 Pricing so the buyer sees value vs
   alternatives right before the price reveal.
   ============================================================================ */
.page-aipb .s15 {
    background: #FAFAFB;
    padding: clamp(80px, 9vw, 128px) 0;
}
.page-aipb .s15-w {
    max-width: var(--hdr-container-max, 1280px) !important;
    margin: 0 auto;
    padding: 0 var(--hdr-px, 24px);
}
.page-aipb .s15-hd {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.page-aipb .s15-t {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(32px, 3.8vw, 48px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    color: #101828 !important;
    margin: 0 0 14px !important;
}
.page-aipb .s15-t em {
    font-style: normal;
    background: linear-gradient(90deg, #F43F5E 0%, #FBD065 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-aipb .s15-sub {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(16px, 1.3vw, 18px) !important;
    color: #667085 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}
.page-aipb .s15-card {
    background: #fff;
    border: 1px solid #EAECF0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.06);
    transition: transform .28s cubic-bezier(.23,1,.32,1), box-shadow .28s cubic-bezier(.23,1,.32,1);
}
.page-aipb .s15-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -16px rgba(16, 24, 40, 0.10);
}
.page-aipb .s15-table {
    display: flex;
    flex-direction: column;
}
.page-aipb .s15-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.1fr) minmax(220px, 1.3fr) minmax(220px, 1.3fr);
    border-bottom: 1px solid #F2F4F7;
    transition: background .14s ease;
}
.page-aipb .s15-row:last-child { border-bottom: 0; }
.page-aipb .s15-row:not(.s15-row-head):hover { background: #FAFBFC; }
.page-aipb .s15-row-head {
    background: linear-gradient(180deg, #F9FAFB 0%, #F2F4F7 100%);
    border-bottom: 1px solid #EAECF0;
}
.page-aipb .s15-cell {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: #344054;
}
.page-aipb .s15-cell-feat {
    font-weight: 600;
    color: #101828;
    font-size: 14px;
    background: #FAFAFB;
    border-right: 1px solid #F2F4F7;
}
.page-aipb .s15-row-head .s15-cell-feat {
    background: transparent;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.page-aipb .s15-cell-us {
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.04) 0%, rgba(251, 208, 101, 0.03) 100%);
    border-right: 1px solid #F2F4F7;
    position: relative;
}
.page-aipb .s15-cell-us::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #F43F5E 0%, #FBD065 100%);
    opacity: 0;
    transition: opacity .14s ease;
}
.page-aipb .s15-row:not(.s15-row-head):hover .s15-cell-us::before { opacity: 1; }
.page-aipb .s15-cell-them {
    color: #98A2B3;
}
.page-aipb .s15-brand {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #101828;
    letter-spacing: -0.01em;
}
.page-aipb .s15-row-head .s15-cell-them .s15-brand { color: #475467; }
.page-aipb .s15-brand-sub {
    font-size: 12px;
    font-weight: 500;
    color: #98A2B3;
    letter-spacing: 0;
    text-transform: none;
}
.page-aipb .s15-yes,
.page-aipb .s15-no {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding-left: 26px;
}
.page-aipb .s15-yes::before,
.page-aipb .s15-no::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.page-aipb .s15-yes::before {
    content: '✓';
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.page-aipb .s15-no::before {
    content: '✕';
    background: #F2F4F7;
    color: #98A2B3;
}
.page-aipb .s15-yes {
    color: #101828;
    font-weight: 600;
}
.page-aipb .s15-no {
    color: #98A2B3;
}
/* Footer = card'ı mühürleyen CTA bandı. Üstteki başlık bandına (s15-row-head)
   simetrik: tonlu bg, kenardan kenara, sol metin + sağ buton (space-between).
   Yetim ortada-yüzen buton hissi gider; tablo "kapanır". */
.page-aipb .s15-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    /* Yatay padding tablo hücreleriyle (24px) hizalı — CTA'nın sağ kenarı
       son kolonun sağ kenarıyla aynı hatta otursun, sağda boşluk kalmasın. */
    padding: 24px;
    background: linear-gradient(180deg, #FBFCFD 0%, #F5F7FA 100%);
    border-top: 1px solid #EAECF0;
}
.page-aipb .s15-foot-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.page-aipb .s15-foot-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #101828;
}
.page-aipb .s15-cta {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%);
    color: #fff !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 24px -8px rgba(244, 63, 94, 0.45);
    transition: transform .14s ease, box-shadow .14s ease;
}
.page-aipb .s15-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 12px 32px -8px rgba(244, 63, 94, 0.55);
}
.page-aipb .s15-foot-note {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    color: #667085;
}
@media (max-width: 820px) {
    .page-aipb .s15-row {
        grid-template-columns: 1fr 1fr;
    }
    .page-aipb .s15-cell-feat {
        grid-column: 1 / -1;
        background: #F9FAFB;
        border-right: 0;
        border-bottom: 1px solid #F2F4F7;
        padding: 12px 18px;
        flex-direction: row;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #667085;
    }
    .page-aipb .s15-row-head { display: none; }
    .page-aipb .s15-cell { padding: 16px 18px; font-size: 13.5px; }
    .page-aipb .s15-yes,
    .page-aipb .s15-no { padding-left: 22px; font-size: 13px; }
    .page-aipb .s15-yes::before,
    .page-aipb .s15-no::before { width: 16px; height: 16px; font-size: 10px; }
    .page-aipb .s15-cell-us {
        background: linear-gradient(180deg, rgba(244, 63, 94, 0.04), rgba(251, 208, 101, 0.03));
        border-right: 1px solid #F2F4F7;
    }
    .page-aipb .s15-cell-us::before {
        opacity: 1;
        top: auto;
        bottom: 0;
        height: 3px;
        width: 100%;
    }
    .page-aipb .s15-foot { flex-direction: column; align-items: stretch; gap: 16px; text-align: center; }
    .page-aipb .s15-foot-text { align-items: center; text-align: center; }
    .page-aipb .s15-cta { justify-content: center; }
}

/* ============================================================================
   S07 · Guarantee + 3rd-party ratings band — between pricing cards and trust
   strip. Money-back guarantee in a hero left block, 4 review-platform cells
   on the right. Stripe/Linear/Vercel trust-row pattern.
   ============================================================================ */
.page-aipb .s07 .s07-guarantee {
    margin: 48px auto 0;
    max-width: none;
    padding: 32px clamp(24px, 3vw, 44px);
    background: #fff;
    border: 1px solid #EAECF0;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 12px 32px -16px rgba(16, 24, 40, 0.10);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: center;
}
.page-aipb .s07 .s07-guarantee-main {
    display: flex;
    align-items: center;
    gap: 16px;
}
.page-aipb .s07 .s07-guarantee-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -8px rgba(244, 63, 94, 0.55);
}
.page-aipb .s07 .s07-guarantee-icon svg {
    width: 28px;
    height: 28px;
}
.page-aipb .s07 .s07-guarantee-body {
    min-width: 0;
}
.page-aipb .s07 .s07-guarantee-t {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #101828;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.page-aipb .s07 .s07-guarantee-d {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    color: #667085;
    line-height: 1.5;
}
.page-aipb .s07 .s07-ratings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    border-left: 1px solid #EAECF0;
    padding-left: clamp(20px, 3vw, 32px);
}
.page-aipb .s07 .s07-rating-cell {
    text-align: center;
    padding: 6px 4px;
}
.page-aipb .s07 .s07-rating-source {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #98A2B3;
    margin-bottom: 6px;
}
.page-aipb .s07 .s07-rating-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.page-aipb .s07 .s07-rating-stars {
    color: #FBBF24;
    font-size: 13px;
    letter-spacing: -1px;
}
.page-aipb .s07 .s07-rating-value {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #101828;
    letter-spacing: -0.01em;
}
.page-aipb .s07 .s07-rating-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: #667085;
    line-height: 1.3;
}
@media (max-width: 820px) {
    .page-aipb .s07 .s07-guarantee {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 20px;
    }
    .page-aipb .s07 .s07-ratings {
        border-left: 0;
        border-top: 1px solid #EAECF0;
        padding-left: 0;
        padding-top: 20px;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}