/* ============================================================
   Marinecos — tanıtım yüzeyi (2026)
   Kullanan sayfalar: resources/views/landing/*.blade.php
   Uygulama geneli stiller: public/css/styles.css  (buraya karışmaz)
   Önek: .ml-*   Durum sınıfları: .is-*
   Tema: yalnız açık. Zemin beyaz; tek koyu bant hero + kapanış CTA.
   ============================================================ */

:root {
    --ml-white: #ffffff;
    --ml-paper: #f7f9fc;
    --ml-line: #e6ecf3;
    --ml-line-soft: #f0f4f9;

    --ml-navy: #0a1e38;
    --ml-navy-deep: #071324;
    --ml-ink: #0f172a;
    --ml-body: #4a5a6e;
    --ml-muted: #7b8ca3;

    --ml-blue: #2563eb;
    --ml-blue-dark: #1d4ed8;
    --ml-blue-soft: #eff6ff;
    --ml-sea: #38bdf8;

    --ml-r: 14px;
    --ml-r-lg: 20px;
    --ml-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    --ml-shadow-lift: 0 18px 40px -18px rgba(10, 30, 56, .22);
    --ml-ease: cubic-bezier(.22, 1, .36, 1);

    --ml-container: 1240px;
    --ml-gutter: 24px;
    --ml-section: 112px;
}

/* ---------- taban ---------- */
body.ml {
    margin: 0;
    background: var(--ml-white);
    color: var(--ml-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Taban sıfırlamalar :where() ile YAZILIR — özgüllükleri sıfırdır, böylece
   aşağıdaki bileşen kuralları (.ml-hero h1, .ml-brand, .ml-btn--white …)
   fazladan ağırlık gerektirmeden kazanır. */
body.ml :where(*) { box-sizing: border-box; }
body.ml :where(img) { max-width: 100%; display: block; }
:where(body.ml) :where(a) { color: inherit; text-decoration: none; }

:where(body.ml) :where(h1, h2, h3, h4) {
    margin: 0;
    color: var(--ml-ink);
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 700;
}

:where(body.ml) :where(p) { margin: 0; color: var(--ml-body); }

.ml-container {
    width: 100%;
    max-width: var(--ml-container);
    margin-inline: auto;
    padding-inline: var(--ml-gutter);
}

.ml-section { padding-block: var(--ml-section); }
.ml-section--paper { background: var(--ml-paper); }
.ml-section--tight { padding-block: 88px; }
.ml-section--line { border-top: 1px solid var(--ml-line); }

/* ---------- tipografi ---------- */
.ml-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ml-blue);
    margin-bottom: 18px;
}

.ml-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .55;
}

.ml-h1 { font-size: clamp(44px, 5.4vw, 74px); letter-spacing: -.035em; }
.ml-h2 { font-size: clamp(30px, 3.2vw, 44px); }
.ml-h3 { font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -.02em; }

.ml-lead {
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.62;
    color: var(--ml-body);
    max-width: 62ch;
}

.ml-head { max-width: 720px; margin-bottom: 56px; }
.ml-head--center { margin-inline: auto; text-align: center; }
.ml-head .ml-lead { margin-top: 18px; }
.ml-head--center .ml-lead { margin-inline: auto; }

/* ---------- butonlar ---------- */
.ml-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s var(--ml-ease), color .2s var(--ml-ease),
                border-color .2s var(--ml-ease), transform .2s var(--ml-ease),
                box-shadow .2s var(--ml-ease);
}

.ml-btn:hover { transform: translateY(-1px); }
.ml-btn:active { transform: translateY(0); }
.ml-btn--lg { padding: 16px 32px; font-size: 16px; }
.ml-btn--block { width: 100%; }

.ml-btn--primary { background: var(--ml-blue); color: #fff; }
.ml-btn--primary:hover { background: var(--ml-blue-dark); box-shadow: 0 10px 24px -10px rgba(37, 99, 235, .7); }

.ml-btn--ink { background: var(--ml-navy); color: #fff; }
.ml-btn--ink:hover { background: #0d2749; box-shadow: 0 10px 24px -10px rgba(10, 30, 56, .6); }

.ml-btn--outline { background: transparent; color: var(--ml-ink); border-color: var(--ml-line); }
.ml-btn--outline:hover { border-color: #cbd8e6; background: var(--ml-paper); }

.ml-btn--white { background: #fff; color: var(--ml-navy); }
.ml-btn--white:hover { background: #eef4fb; }

.ml-btn--glass {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .24);
    backdrop-filter: blur(6px);
}
.ml-btn--glass:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }

.ml-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ml-blue);
}
.ml-link i { transition: transform .2s var(--ml-ease); font-size: .85em; }
.ml-link:hover i { transform: translateX(3px); }

/* ---------- header ---------- */
.ml-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: background .3s var(--ml-ease), border-color .3s var(--ml-ease),
                box-shadow .3s var(--ml-ease);
    border-bottom: 1px solid transparent;
}

.ml-header.is-solid {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--ml-line);
}

.ml-header-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 76px;
}

.ml-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.02em;
    color: #fff;
    transition: color .3s var(--ml-ease);
}
.ml-brand img {
    height: 32px;
    width: auto;
    /* Logo sabit lacivert/mavi renklerle çizili: header başlangıçta koyu
       hero'nun üstünde şeffaf durduğu için ("Marin" kısmı okunmuyordu) açık
       bir plaka arkasına konur. Scroll'da .is-solid'e geçince (beyaz zemin)
       plaka kaldırılır — orada zaten okunuyor. */
    background: rgba(255, 255, 255, .92);
    border-radius: 7px;
    padding: 4px 8px;
    transition: background .3s var(--ml-ease), padding .3s var(--ml-ease);
}
.ml-header.is-solid .ml-brand { color: var(--ml-ink); }
.ml-header.is-solid .ml-brand img { background: transparent; padding: 0; }

.ml-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }

.ml-nav a {
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    transition: color .2s, background .2s;
}
.ml-nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.ml-nav a.is-current { color: #fff; background: rgba(255, 255, 255, .14); }

.ml-header.is-solid .ml-nav a { color: var(--ml-body); }
.ml-header.is-solid .ml-nav a:hover { color: var(--ml-ink); background: var(--ml-paper); }
.ml-header.is-solid .ml-nav a.is-current { color: var(--ml-blue); background: var(--ml-blue-soft); }

.ml-header-actions { display: flex; align-items: center; gap: 10px; }

/* Dil değiştirici (partials/locale-switcher) color:inherit kullanıyor —
   koyu hero üzerinde okunur kalması için burada bağlama göre boyanır. */
.ml-header .locale-switcher { color: #fff; border-color: rgba(255, 255, 255, .26); }
.ml-header .locale-switcher button.is-active { background: rgba(255, 255, 255, .18); }
.ml-header.is-solid .locale-switcher { color: var(--ml-body); border-color: var(--ml-line); }
.ml-header.is-solid .locale-switcher button.is-active { background: var(--ml-paper); color: var(--ml-ink); }

/* giriş açılır menüsü — iki guard olduğu için tek "Giriş" linki yetmiyor */
.ml-login { position: relative; }

.ml-login-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.ml-login-trigger:hover { background: rgba(255, 255, 255, .12); }
.ml-login-trigger i { font-size: 11px; transition: transform .25s var(--ml-ease); }
.ml-login.is-open .ml-login-trigger i { transform: rotate(180deg); }

.ml-header.is-solid .ml-login-trigger { border-color: var(--ml-line); color: var(--ml-ink); }
.ml-header.is-solid .ml-login-trigger:hover { background: var(--ml-paper); border-color: #cbd8e6; }

.ml-login-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 268px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--ml-line);
    border-radius: var(--ml-r);
    box-shadow: 0 20px 48px -16px rgba(10, 30, 56, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ml-ease), transform .2s var(--ml-ease), visibility .2s;
}
.ml-login.is-open .ml-login-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.ml-login-menu a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    transition: background .18s;
}
.ml-login-menu a:hover { background: var(--ml-paper); }
.ml-login-menu i { width: 34px; height: 34px; flex: none; display: grid; place-items: center;
    border-radius: 9px; background: var(--ml-blue-soft); color: var(--ml-blue); font-size: 14px; }
.ml-login-menu strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--ml-ink); }
.ml-login-menu span { display: block; font-size: 12.5px; color: var(--ml-muted); line-height: 1.45; }

.ml-burger {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
}
.ml-header.is-solid .ml-burger { border-color: var(--ml-line); color: var(--ml-ink); }

.ml-mobile {
    display: none;
    background: #fff;
    border-top: 1px solid var(--ml-line);
    padding: 12px var(--ml-gutter) 22px;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
}
.ml-header.is-menu-open .ml-mobile { display: block; }
.ml-header.is-menu-open { background: #fff; border-bottom-color: var(--ml-line); }

.ml-mobile a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 6px;
    border-bottom: 1px solid var(--ml-line-soft);
    font-size: 15.5px; font-weight: 500; color: var(--ml-ink);
}
.ml-mobile a i { width: 20px; color: var(--ml-muted); font-size: 14px; }
.ml-mobile-cta { display: grid; gap: 10px; margin-top: 18px; }

/* ---------- hero (koyu bant) ---------- */
.ml-hero {
    position: relative;
    background: radial-gradient(120% 90% at 78% 20%, #12345c 0%, var(--ml-navy) 45%, var(--ml-navy-deep) 100%);
    color: #fff;
    padding-top: 148px;
    padding-bottom: 96px;
    overflow: hidden;
}

.ml-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, rgba(7, 19, 36, .55));
    pointer-events: none;
}

.ml-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 52px;
    align-items: center;
}

.ml-hero h1 { color: #fff; }
.ml-hero .ml-eyebrow { color: var(--ml-sea); }
.ml-hero p { color: rgba(226, 238, 250, .8); }
.ml-hero-lead { margin-top: 22px; max-width: 52ch; }
.ml-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.ml-hero-trust {
    display: flex; flex-wrap: wrap; gap: 12px 24px;
    margin-top: 40px; padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13.5px; color: rgba(226, 238, 250, .68);
}
.ml-hero-trust span { display: inline-flex; align-items: center; gap: 9px; }
.ml-hero-trust i { color: var(--ml-sea); font-size: 13px; }

/* ---------- hero görseli: liman fotoğrafı + platform kartları ---------- */
.ml-hero-visual { position: relative; padding: 18px 0 26px; }

.ml-hero-photo {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 3.9;
    position: relative;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .75);
    border: 1px solid rgba(255, 255, 255, .1);
}

.ml-hero-photo img {
    width: 100%; height: 100%; object-fit: cover;
    /* Ham stok fotoğrafın canlı renkleri lacivert bantla çakışıyor:
       doygunluğu düşürüp üstüne marka rengi bindiriyoruz. */
    filter: saturate(.62) contrast(1.04) brightness(.98);
}

.ml-hero-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(155deg, rgba(10, 30, 56, .12) 0%, rgba(7, 19, 36, .5) 100%),
                radial-gradient(80% 60% at 20% 0%, rgba(56, 189, 248, .14), transparent 70%);
}

.ml-float {
    position: absolute;
    background: rgba(12, 30, 54, .74);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 15px;
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .8);
    color: #fff;
    animation: ml-bob 7s var(--ml-ease) infinite;
}

.ml-float--req { left: -34px; bottom: 52px; width: 250px; padding: 15px 17px 14px; }
.ml-float--bid {
    right: -14px; top: 42px;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 16px 12px 13px;
    animation-delay: -3.5s;
}

.ml-float strong { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.02em; }
.ml-float-sub { display: block; font-size: 12px; color: rgba(226, 238, 250, .6); margin-top: 2px; }

.ml-float-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #6ee7b7; margin-bottom: 9px;
}
.ml-float-tag i { font-size: 10px; }

.ml-float--bid > i {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(56, 189, 248, .18);
    color: var(--ml-sea);
    font-size: 14px;
}

.ml-float-row { display: flex; align-items: center; gap: 5px; margin-top: 12px; }
.ml-float-row em {
    font-style: normal; font-size: 11.5px; color: rgba(226, 238, 250, .66); margin-inline-start: 6px;
}
.ml-float-dot {
    width: 19px; height: 19px; border-radius: 50%;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    border: 1.5px solid rgba(12, 30, 54, .9);
    margin-inline-start: -7px;
}
.ml-float-dot:first-child { margin-inline-start: 0; }

@keyframes ml-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* ---------- küre yuvası ---------- */
.ml-globe-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 560px;
    margin-inline: auto;
}

.ml-globe-slot img {
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: .9;
    transition: opacity .6s var(--ml-ease);
}
.ml-globe-slot.is-live img { opacity: 0; }

.ml-globe-canvas {
    position: fixed;
    top: 0; left: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .55s var(--ml-ease);
    will-change: transform;
}

.ml-credit {
    margin-top: 14px;
    text-align: center;
    font-size: 11.5px;
    color: rgba(226, 238, 250, .42);
    letter-spacing: .01em;
}
.ml-credit a { text-decoration: underline; text-underline-offset: 2px; }
.ml-credit a:hover { color: rgba(226, 238, 250, .8); }
.ml-credit--ink { color: var(--ml-muted); }

/* ---------- iki kapı ---------- */
.ml-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.ml-door {
    display: flex;
    flex-direction: column;
    padding: 40px;
    background: #fff;
    border: 1px solid var(--ml-line);
    border-radius: var(--ml-r-lg);
    transition: border-color .25s var(--ml-ease), box-shadow .25s var(--ml-ease),
                transform .25s var(--ml-ease);
}
.ml-door:hover { border-color: #cfdcea; box-shadow: var(--ml-shadow-lift); transform: translateY(-3px); }

.ml-door-icon {
    width: 50px; height: 50px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--ml-blue-soft);
    color: var(--ml-blue);
    font-size: 19px;
    margin-bottom: 24px;
}
.ml-door--corp .ml-door-icon { background: #eef2f8; color: var(--ml-navy); }

.ml-door h3 { font-size: 25px; }
.ml-door-who { margin-top: 10px; font-size: 14.5px; color: var(--ml-muted); }

.ml-door-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.ml-door-list li { display: flex; gap: 11px; font-size: 15px; color: var(--ml-body); line-height: 1.5; }
.ml-door-list i { color: var(--ml-blue); font-size: 13px; margin-top: 5px; flex: none; }
.ml-door--corp .ml-door-list i { color: var(--ml-navy); }

.ml-door-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; justify-items: start; }
.ml-door-foot .ml-btn { width: 100%; }

/* ---------- küre scroll hikâyesi ---------- */
.ml-story { position: relative; }

.ml-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: start;
}

.ml-story-stage {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ml-story-stage .ml-globe-slot { max-width: 500px; }

.ml-story-blocks { display: grid; }

/* Her blok kabaca bir ekran: küre o blok görünürken ilgili yüzüne döner.
   Pasif bloklar geri çekilip bulanıklaşır; aktif olan kürenin arkasından
   dönerek öne gelir — metnin dünyanın etrafından geldiği hissi. */
.ml-story-blocks { perspective: 1400px; }

.ml-story-block {
    min-height: 74dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 40px;
}

/* 3D eğim ve bulanıklık İÇ sarmalda: IntersectionObserver dış .ml-story-block'u
   gözlemliyor. Transform dıştaki elemanda olsaydı (eskiden öyleydi), tarayıcının
   ölçtüğü ekran kutusu rotateY/translateZ yüzünden gerçek boyutundan çok daha
   büyük çıkıyordu (ölçüldü: pasif blok ~700px yerine ~720px'e yayılıyor ve orta
   gözlem şeridine tekrar giriyordu) — bu da küreyi bir önceki bölüme fırlatan
   "geri sıçrama" hatasına yol açıyordu. Ölçülen kutu artık hep sade kalıyor.
*/
.ml-story-block-inner {
    opacity: .16;
    transform: translate3d(-56px, 0, -170px) rotateY(14deg);
    transform-origin: left center;
    filter: blur(2px);
    transition: opacity .8s var(--ml-ease), transform .9s var(--ml-ease), filter .8s var(--ml-ease);
    will-change: transform, opacity;
}

.ml-story-block.is-active .ml-story-block-inner {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Aktif blokta içerik kademeli girer */
.ml-story-block-inner > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ml-ease), transform .6s var(--ml-ease);
}
.ml-story-block.is-active .ml-story-block-inner > * { opacity: 1; transform: none; }
.ml-story-block.is-active .ml-story-block-inner > *:nth-child(1) { transition-delay: .06s; }
.ml-story-block.is-active .ml-story-block-inner > *:nth-child(2) { transition-delay: .14s; }
.ml-story-block.is-active .ml-story-block-inner > *:nth-child(3) { transition-delay: .22s; }
.ml-story-block.is-active .ml-story-block-inner > *:nth-child(4) { transition-delay: .30s; }
.ml-story-block.is-active .ml-story-block-inner > *:nth-child(5) { transition-delay: .38s; }

.ml-story-index {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ml-muted);
    margin-bottom: 20px;
}
.ml-story-index b { color: var(--ml-blue); font-variant-numeric: tabular-nums; }
.ml-story-index::after { content: ''; width: 26px; height: 1px; background: var(--ml-line); }

.ml-story-block h3 { font-size: clamp(26px, 2.6vw, 34px); }
.ml-story-block p { margin-top: 16px; font-size: 17px; max-width: 48ch; }

.ml-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ml-chip {
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--ml-paper);
    border: 1px solid var(--ml-line);
    font-size: 13px; font-weight: 500; color: var(--ml-body);
}
.ml-chip--soon { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.ml-story-block .ml-link { margin-top: 26px; }

/* ---------- katalog / sayı satırı ---------- */
.ml-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--ml-line);
    border-radius: var(--ml-r-lg);
    overflow: hidden;
    background: #fff;
}
.ml-stat { padding: 34px 26px; border-inline-start: 1px solid var(--ml-line); text-align: center; }
.ml-stat:first-child { border-inline-start: 0; }
.ml-stat b {
    display: block;
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--ml-navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.ml-stat span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ml-muted); }

/* ---------- özellik ızgarası ---------- */
.ml-grid { display: grid; gap: 24px; }
.ml-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ml-card {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--ml-line);
    border-radius: var(--ml-r-lg);
    transition: border-color .25s var(--ml-ease), box-shadow .25s var(--ml-ease),
                transform .25s var(--ml-ease);
}
.ml-card--hover:hover { border-color: #cfdcea; box-shadow: var(--ml-shadow-lift); transform: translateY(-3px); }
.ml-card-icon {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 11px; background: var(--ml-blue-soft); color: var(--ml-blue);
    font-size: 16px; margin-bottom: 20px;
}
.ml-card h3 { font-size: 18px; letter-spacing: -.02em; }
.ml-card p { margin-top: 10px; font-size: 14.8px; line-height: 1.6; }

.ml-card-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.ml-card-list li { font-size: 13.6px; color: var(--ml-muted); display: flex; gap: 9px; }
.ml-card-list li::before { content: '·'; color: var(--ml-blue); font-weight: 700; }

/* ---------- adım şeması ---------- */
.ml-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.ml-step { position: relative; padding: 0 26px 0 0; }
.ml-step::before {
    content: ''; position: absolute; top: 19px; left: 0; right: 0; height: 1px;
    background: var(--ml-line);
}
.ml-step:last-child::before { right: auto; width: 40px; }
.ml-step b {
    position: relative;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ml-line);
    color: var(--ml-blue);
    font-size: 14px; font-weight: 700;
    margin-bottom: 20px;
}
.ml-step h4 { font-size: 16.5px; letter-spacing: -.02em; }
.ml-step p { margin-top: 8px; font-size: 14.2px; padding-inline-end: 14px; }

/* ---------- canlı içerik kartları ---------- */
.ml-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--ml-line);
    border-radius: var(--ml-r);
    overflow: hidden;
    transition: border-color .22s var(--ml-ease), box-shadow .22s var(--ml-ease),
                transform .22s var(--ml-ease);
}
.ml-tile:hover { border-color: #cfdcea; box-shadow: var(--ml-shadow-lift); transform: translateY(-2px); }
.ml-tile-media { aspect-ratio: 4/3; background: var(--ml-paper); position: relative; }
.ml-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.ml-tile-media i { position: absolute; inset: 0; display: grid; place-items: center;
    color: #c3d1e2; font-size: 26px; }
.ml-tile-body { padding: 16px 18px 18px; }
.ml-tile-body h4 { font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-tile-meta { margin-top: 8px; font-size: 13px; color: var(--ml-muted); }
.ml-tile-price { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--ml-blue); }

.ml-row-head { display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 28px; }
.ml-row-head h3 { font-size: 22px; }

/* ---------- SSS ---------- */
.ml-faq { max-width: 840px; margin-inline: auto; border-top: 1px solid var(--ml-line); }
.ml-faq details { border-bottom: 1px solid var(--ml-line); }
.ml-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 24px 4px; cursor: pointer; list-style: none;
    font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ml-ink);
}
.ml-faq summary::-webkit-details-marker { display: none; }
.ml-faq summary::after {
    content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 12px; color: var(--ml-muted); flex: none;
    transition: transform .25s var(--ml-ease), color .25s;
}
.ml-faq details[open] summary::after { transform: rotate(45deg); color: var(--ml-blue); }
.ml-faq p { padding: 0 4px 26px; font-size: 15.5px; max-width: 68ch; }

/* ---------- kapanış CTA ---------- */
.ml-cta {
    background: radial-gradient(110% 130% at 50% 0%, #12345c 0%, var(--ml-navy) 55%, var(--ml-navy-deep) 100%);
    color: #fff;
    text-align: center;
    padding-block: 104px;
}
.ml-cta h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.ml-cta p { color: rgba(226, 238, 250, .78); margin: 20px auto 0; max-width: 54ch; }
.ml-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 38px; }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .55s var(--ml-ease), transform .55s var(--ml-ease);
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    :root { --ml-section: 96px; }
    .ml-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .ml-hero { padding-top: 128px; text-align: center; }
    .ml-hero .ml-eyebrow, .ml-hero-actions, .ml-hero-trust { justify-content: center; }
    .ml-hero-lead { margin-inline: auto; }
    .ml-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ml-stat:nth-child(4) { border-inline-start: 0; }
    .ml-stat { border-top: 1px solid var(--ml-line); }
    .ml-stat:nth-child(-n+3) { border-top: 0; }
    .ml-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ml-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
    .ml-step::before { display: none; }
    .ml-story-grid { grid-template-columns: 1fr; gap: 0; }
    .ml-story-stage { display: none; }
    .ml-story-block {
        min-height: 0; padding-block: 34px; border-bottom: 1px solid var(--ml-line);
    }
    .ml-story-block-inner { opacity: 1; transform: none; filter: none; }
    .ml-story-block-inner > * { opacity: 1; transform: none; }
    .ml-story-block:last-child { border-bottom: 0; }
    .ml-hero-visual { padding: 0; }
    .ml-float--req { left: 8px; bottom: 20px; }
    .ml-float--bid { right: 8px; top: 16px; }
}

@media (max-width: 860px) {
    .ml-nav, .ml-header-actions .ml-login, .ml-header-actions .ml-btn { display: none; }
    .ml-burger { display: inline-flex; }
    .ml-header-actions { margin-inline-start: auto; }
    .ml-doors { grid-template-columns: 1fr; }
    .ml-grid--3, .ml-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    :root { --ml-section: 72px; --ml-gutter: 20px; }
    body.ml { font-size: 16px; }
    .ml-header-inner { height: 66px; }
    .ml-hero { padding-top: 108px; padding-bottom: 72px; }
    .ml-door { padding: 30px 24px; }
    .ml-card { padding: 24px; }
    .ml-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ml-stat { border-inline-start: 1px solid var(--ml-line); border-top: 1px solid var(--ml-line); }
    .ml-stat:nth-child(odd) { border-inline-start: 0; }
    .ml-stat:nth-child(-n+2) { border-top: 0; }
    .ml-stat:last-child { grid-column: 1 / -1; border-inline-start: 0; }
    .ml-grid--4 { grid-template-columns: 1fr; }
    .ml-steps { grid-template-columns: 1fr; gap: 30px; }
    .ml-cta { padding-block: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    body.ml *, body.ml *::before, body.ml *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}