/* ==========================================================================
   Mailmyra — "Buyuyen" mobil navigasyon
   Desen: growing-navigation.framer.website (Daniyal). Mekanigi siteden
   olculdu, kod bizim.

   OLCULEN DAVRANIS (referans, 410px ekran):
     kapali   : kapsul 400×64,  radius 12px, panel 0px
     +220 ms  : radius 11px     (once KOSE acilmaya baslar)
     +400 ms  : kapsul 112px,   radius 3.8px,  panel 48px
     +700 ms  : kapsul 916px,   radius 0.008px, panel 852px
   Yani tek bir kapsul BUYUYOR ve buyurken kose yaricapi 0'a iniyor.
   Yandan kayan offcanvas YOK.

   GORUNUM: mevcut header'in dili birebir kullaniliyor —
   logo `.mm-header-logo` kapsulu, hamburger `.tp-offcanvas-open-btn` cipi,
   acilir menuler `.mm-mega__grid` / `.mm-chip` / `.mm-mega__txt`.
   Bu siniflar main.css'ten geliyor; burada YENIDEN TANIMLANMIYOR, yalniz
   mobil yerlesime uyarlaniyor. Boylece header degisirse menu de degisir.
   ========================================================================== */

.mmnav {
    --navy: #00102b;
    --blue: #5a8ce2;
    --light: #89b4ef;
    --orange: #f2a573;
    /* Header'in kendi degiskenleri (main.css'ten gelir). Buraya SISTEM
       fontu yazma — makineden makineye degisir ve index'e tasininca
       gorunum kayar. */
    --clash: var(--tp-ff-clash-semibold, 'ClashDisplay-Semibold', sans-serif);
    --clash-md: var(--tp-ff-clash-medium, 'ClashDisplay-Medium', sans-serif);
    --body: var(--tp-ff-body, 'Inter', sans-serif);

    --pad: 12px;          /* kapaliyken kenar boslugu */
    --bar: 74px;          /* kapali kapsul yuksekligi (header cipleri 46px) */
    --radius: 999px;      /* kapaliyken tam hap — header kapsulu gibi */

    position: fixed;
    top: var(--pad);
    left: var(--pad);
    right: var(--pad);
    z-index: 9000;
    height: var(--bar);
    /* dvh: mobil tarayici cubugu acilip kapanirken ziplamasin */
    transition:
        top .62s cubic-bezier(.65, 0, .35, 1),
        left .62s cubic-bezier(.65, 0, .35, 1),
        right .62s cubic-bezier(.65, 0, .35, 1),
        height .62s cubic-bezier(.65, 0, .35, 1);
}

.mmnav.is-open {
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
}

/* --- kapsul: buyuyen cam govde ---------------------------------------- */

.mmnav__shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;              /* buyurken icerigi kirpar */
    border: 1px solid rgba(137, 180, 239, .22);
    border-radius: var(--radius);
    background: rgba(6, 18, 42, .74);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .9);
    /* duz lacivert kalmasin: koselerde marka isiklari */
    background-image:
        radial-gradient(520px 300px at 6% -8%, rgba(90, 140, 226, .30), transparent 66%),
        radial-gradient(460px 280px at 104% 4%, rgba(242, 165, 115, .22), transparent 68%),
        radial-gradient(560px 340px at 96% 104%, rgba(90, 140, 226, .20), transparent 70%),
        radial-gradient(420px 260px at -6% 96%, rgba(242, 165, 115, .14), transparent 70%);
    background-repeat: no-repeat;
    /* kose, yukseklikten DAHA HIZLI kapanir — referanstaki gibi */
    transition:
        border-radius .42s cubic-bezier(.65, 0, .35, 1),
        border-color .42s ease,
        background .42s ease;
}

.mmnav.is-open .mmnav__shell {
    border-radius: 0;
    border-color: transparent;
    background: rgba(3, 12, 30, .96);
}

/* --- ust cubuk: header'in kendi logosu + hamburger cipi ---------------- */

.mmnav__bar {
    flex: 0 0 var(--bar);
    height: var(--bar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
}

/* .mm-header-logo main.css'ten geliyor — sadece boyut uyarlamasi */
.mmnav__bar .mm-header-logo {
    padding: 8px 13px;
}

.mmnav__bar .mm-header-logo img {
    display: block;
    height: 20px;
    width: auto;
}

/* --- cubuktaki eylemler: md (768px) ve ustunde gorunur -----------------
   Tema header'i 1200px altinda gizli oldugu icin oradaki Log in / Try the
   Builder butonlari md-lg araliginda kayboluyordu. Ayni bilesenler
   (.mm-btn-outline / .mm-btn-solid) buraya da kondu.
   ---------------------------------------------------------------------- */

.mmnav__baractions {
    display: none;
}

@media (min-width: 768px) {
    .mmnav__baractions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        margin-right: 12px;
    }

    /* cubuk 74px — butonlar oraya sigacak kadar kompakt */
    .mmnav__baractions .mm-btn__face {
        min-height: 44px;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 12.5px;
    }

    /* dar tabletlerde "Log in" metnini kis, ikon kalsin */
    @media (max-width: 860px) {
        .mmnav__baractions .mm-btn-outline .mm-btn__face {
            padding-left: 14px;
            padding-right: 14px;
        }
    }
}

/* .tp-offcanvas-open-btn main.css'ten geliyor — cizgiler burada X'e doner.
   Cizgi yuksekligi 2px, aralik 3.5px → merkezler 5.5px arayla. */
.mmnav__toggle i {
    transition: transform .42s cubic-bezier(.65, 0, .35, 1),
                opacity .24s ease,
                width .4s cubic-bezier(.22, .61, .36, 1);
}

.mmnav.is-open .mmnav__toggle i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.mmnav.is-open .mmnav__toggle i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.mmnav.is-open .mmnav__toggle i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* cubugun altindaki ayirici — yalniz acikken */
.mmnav__rule {
    height: 1px;
    margin: 0 20px;
    background: rgba(137, 180, 239, .18);
    opacity: 0;
    transition: opacity .3s ease .18s;
}

.mmnav.is-open .mmnav__rule { opacity: 1; }

/* --- panel ------------------------------------------------------------ */

.mmnav__panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px 30px;
    visibility: hidden;            /* kapaliyken tiklanabilir kalmasin */
    transition: visibility 0s linear .62s;
}

.mmnav.is-open .mmnav__panel {
    visibility: visible;
    transition-delay: 0s;
}

.mmnav__item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .42s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.mmnav.is-open .mmnav__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(160ms + var(--i) * 42ms);
}

/* --- menu satirlari --------------------------------------------------- */

.mmnav__row { border-bottom: 1px solid rgba(137, 180, 239, .12); }

.mmnav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 2px;
    border: 0;
    background: none;
    color: #fff;
    font-family: var(--clash);
    font-size: 20px;
    letter-spacing: -.01em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color .22s ease;
}

.mmnav__link:hover,
.mmnav__row.is-open > .mmnav__link { color: var(--orange); }

.mmnav__plus {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
}

.mmnav__plus::before,
.mmnav__plus::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    margin-top: -.75px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .34s cubic-bezier(.65, 0, .35, 1);
}

.mmnav__plus::after { transform: rotate(90deg); }
.mmnav__row.is-open .mmnav__plus::after { transform: rotate(0deg); }

/* --- alt menu: header'in mega-menu'sunun BIREBIR icerigi ---------------
   Markup index'ten kopyalandi (mm-mega__links / __grid / __feature / __foot),
   stiller main.css'ten geliyor. Burada yalniz MOBIL YERLESIM var:
   cok sutunlu izgaralar tek sutuna iniyor, tanitim kartlari altta kaliyor.
   Boylece header'daki icerik degisirse mobil menu de kendiliginden degisir.
   ---------------------------------------------------------------------- */

.mmnav__sub {
    overflow: hidden;
    height: 0;
    transition: height .38s cubic-bezier(.65, 0, .35, 1);
}

/* mega kabini masaustu kabuğundan cikar: konum/gölge/panel kurallari
   burada gecerli degil, duz akista dursun */
.mmnav__mega {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Bolum etiketi GIZLI: satirin kendisi zaten "Product" diyor, altinda
   bir daha "PRODUCT" yazmasi tekrar oluyordu. Tema da offcanvas'ta ayni
   seyi yapiyor (.tp-offcanvas-menu .mm-mega__head { display:none }). */
.mmnav__sub .mm-mega__head {
    display: none !important;
}

/* govde masaustunde iki sutun (links + feature) — mobilde alt alta */
.mmnav__sub .mm-mega__body {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

/* link listeleri: tek sutun */
.mmnav__sub .mm-mega__links,
.mmnav__sub .mm-mega__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mmnav__sub .mm-mega__links > a,
.mmnav__sub .mm-mega__grid > a {
    display: flex !important;
    align-items: center;
    gap: 13px;
    width: auto !important;
    padding: 11px 12px 11px 10px !important;
    border-radius: 12px;
    text-decoration: none;
    transition: background .22s ease, transform .22s ease;
}

.mmnav__sub .mm-mega__links > a:hover,
.mmnav__sub .mm-mega__grid > a:hover {
    background: rgba(137, 180, 239, .10);
    transform: translateX(2px);
}

.mmnav__sub .mm-mega__txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mmnav__sub .mm-mega__txt strong {
    font-family: var(--clash-md);
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.2;
    color: #fff;
}

/* aciklama: header'daki ile ayni — govde fontu, sistem mono DEGIL */
.mmnav__sub .mm-mega__txt > span {
    font-family: var(--body);
    font-size: 12.5px;
    line-height: 1.45;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .5);
}

/* --- tanitim kartlari (builder gorseli, imza karti) -------------------
   "Sade kalmasin" — header'daki bu kartlar mobilde de duruyor, altta. */

.mmnav__sub .mm-mega__feature {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 14px 0 4px !important;
    padding: 16px !important;
    border: 1px solid rgba(137, 180, 239, .18) !important;
    border-radius: 16px !important;
    background: rgba(137, 180, 239, .06) !important;
    text-decoration: none;
}

.mmnav__sub .mm-mega__feature img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.mmnav__sub .mm-mega__featnote {
    display: block;
    margin-top: 12px;
    font-family: var(--body);
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .58);
}

.mmnav__sub .mm-mega__featcta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--clash-md);
    font-size: 13px;
    color: var(--orange);
}

.mmnav__sub .mm-mega__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.mmnav__sub .mm-mega__tags span {
    padding: 5px 10px;
    border: 1px solid rgba(137, 180, 239, .22);
    border-radius: 999px;
    font-family: var(--body);
    font-size: 10.5px;
    color: rgba(137, 180, 239, .8);
}

/* --- alt menunun sonundaki "tumu" baglantisi -------------------------- */

.mmnav__sub .mm-mega__foot {
    display: block;
    padding: 6px 0 14px;
}

.mmnav__sub .mm-mega__foot a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 8px 12px 8px 10px !important;
    border-radius: 999px;
    font-family: var(--clash-md);
    font-size: 13px;
    color: var(--orange);
    text-decoration: none;
    transition: gap .24s ease, background .22s ease;
}

.mmnav__sub .mm-mega__foot a:hover {
    gap: 12px;
    background: rgba(242, 165, 115, .12);
}

/* --- butonlar: index'in KENDI bilesenleri ---------------------------
   .mm-btn-solid / .mm-btn-outline main.css'ten geliyor (etiket takasi,
   imleci takip eden isik dahil). Burada yalniz mobil yerlesim var. */

.mmnav__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 26px 0 30px;
}

.mmnav__actions > .mm-btn-solid,
.mmnav__actions > .mm-btn-outline {
    width: 100%;
    margin: 0 !important;
}

.mmnav__actions .mm-btn__face {
    justify-content: center;
    width: 100%;
    min-height: 52px;
}

/* --- alt blok: kisa cumle + ikonlu baglantilar ----------------------- */

.mmnav__foot {
    position: relative;
    margin-top: 4px;
    padding-top: 26px;
}

/* ust ayrac — ortadan sonen ince hat */
.mmnav__foot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(137, 180, 239, .34), rgba(242, 165, 115, .24) 42%, transparent);
}

.mmnav__foot-note {
    margin: 0 0 20px;
    font-family: var(--clash);
    font-size: 21px;
    line-height: 1.22;
    letter-spacing: -.015em;
    color: rgba(255, 255, 255, .34);
}

.mmnav__foot-note em {
    font-style: normal;
    color: rgba(255, 255, 255, .82);
}

.mmnav__foot-links {
    display: grid;
    gap: 2px;
    margin-bottom: 20px;
}

.mmnav__foot-links a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 12px 10px 10px;
    border-radius: 12px;
    color: rgba(255, 255, 255, .78);
    font-family: var(--body);
    font-size: 14.5px;
    text-decoration: none;
    transition: background .22s ease, color .22s ease;
}

/* satirlar arasi ince ayrac (sonuncuda yok) */
.mmnav__foot-links a:not(:last-child) {
    box-shadow: inset 0 -1px 0 rgba(137, 180, 239, .10);
}

.mmnav__foot-links a:hover {
    background: rgba(137, 180, 239, .10);
    color: #fff;
}

/* .mm-chip main.css'ten — burada yalniz olcu */
.mmnav__foot-links .mm-chip {
    width: 34px;
    height: 34px;
    font-size: 13px;
    color: var(--light);
}

.mmnav__foot-links a:hover .mm-chip { color: var(--orange); }

/* satirin sonundaki disari-ok — hover'da kayar */
.mmnav__foot-links a > i:last-child {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, .28);
    transition: transform .24s ease, color .22s ease;
}

.mmnav__foot-links a:hover > i:last-child {
    color: var(--orange);
    transform: translate(2px, -2px);
}

.mmnav__foot-meta {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(137, 180, 239, .10);
    font-family: var(--body);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .34);
}

.mmnav__foot-meta span { color: rgba(137, 180, 239, .7); }

/* --- sayfa ortusu ----------------------------------------------------- */

.mmnav-veil {
    position: fixed;
    inset: 0;
    z-index: 8900;
    background: rgba(0, 8, 22, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .42s ease, visibility 0s linear .42s;
}

.mmnav-veil.is-on {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* --- kirilim noktasi: TEMANIN kendi esigiyle AYNI olmali --------------
   Tema masaustu menusunu `d-none d-xl-block`, hamburgeri `d-xl-none` ile
   yonetiyor → Bootstrap xl = 1200px. 992px'e ayarlayinca 992-1199 arasi
   bosta kaliyordu: header'da hamburger vardi ama acacagi menu yoktu
   (eski offcanvas silinmisti). Esik 1200px'e cekildi.
   -------------------------------------------------------------------- */

@media (min-width: 1200px) {
    .mmnav,
    .mmnav-veil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mmnav,
    .mmnav *,
    .mmnav-veil {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}

/* --------------------------------------------------------------------------
   Index'e tasima: mobilde temanin kendi header'i GIZLI — buyuyen kapsul
   zaten logoyu ve menuyu tasiyor, ikisi birden olunca logo iki kez cikiyor.
   992px ustunde tam tersi: kapsul gizli, tema header'i calisiyor.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    #header-sticky { display: none !important; }
}