/* =========================================================
   61MEDYA HOME HERO V2
   MODULE 260 - JOURNAL NATIVE SWIPER
   ========================================================= */


/* =========================================================
   BASLIKLAR
   H1 / H2 SEMANTIK FARKLI - GORSEL OLARAK AYNI
   ========================================================= */

.module-blocks-260 .m61-hero-content h1.m61-hero-heading,
.module-blocks-260 .m61-hero-content h2.m61-hero-heading,
.module-blocks-260 .m61-hero-content .m61-slide-heading{
    margin:0 0 18px!important;

    font-family:
        Montserrat,
        Arial,
        Helvetica,
        sans-serif!important;

    font-size:47px!important;
    line-height:.99!important;
    font-weight:850!important;
    letter-spacing:-1.7px!important;

    color:#fff!important;
}

.module-blocks-260 .m61-hero-heading span{
    display:block!important;
}

.module-blocks-260 .m61-heading-white{
    color:#fff!important;
}

.module-blocks-260 .m61-heading-red{
    color:#ef233c!important;
}


/* =========================================================
   JOURNAL SWIPER TEMIZLIK
   ========================================================= */

.module-blocks-260.carousel-mode .swiper-slide,
.module-blocks-260.carousel-mode .block-body,
.module-blocks-260.carousel-mode .block-wrapper,
.module-blocks-260.carousel-mode .block-content{
    margin:0!important;
    padding:0!important;
}

.module-blocks-260.carousel-mode .swiper-buttons{
    display:none!important;
}


/* BULLETLAR */

.module-blocks-260.carousel-mode .swiper-pagination{
    position:absolute!important;

    left:50%!important;
    right:auto!important;
    bottom:13px!important;

    z-index:40!important;

    width:auto!important;

    display:flex!important;
    align-items:center!important;
    gap:7px!important;

    transform:translateX(-50%)!important;
}

.module-blocks-260.carousel-mode .swiper-pagination-bullet{
    display:block!important;

    width:8px!important;
    height:8px!important;

    margin:0!important;

    border:0!important;
    border-radius:999px!important;

    background:rgba(255,255,255,.50)!important;

    opacity:1!important;

    transition:
        width .2s ease,
        background .2s ease!important;
}

.module-blocks-260.carousel-mode .swiper-pagination-bullet-active{
    width:25px!important;
    background:#ef233c!important;
}


/* =========================================================
   SAG GORSEL - ORTAK
   ========================================================= */

.module-blocks-260 .m61-hero-visual{
    position:relative!important;
    min-height:340px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.module-blocks-260 .m61-viz{
    position:relative!important;

    width:100%!important;
    max-width:570px!important;
    height:330px!important;

    margin:0 auto!important;

    font-family:
        Montserrat,
        Arial,
        sans-serif!important;
}

.module-blocks-260 .m61-viz *,
.module-blocks-260 .m61-viz *:before,
.module-blocks-260 .m61-viz *:after{
    box-sizing:border-box!important;
}

.module-blocks-260 .m61-viz-kicker{
    position:absolute!important;

    top:5px!important;
    right:16px!important;

    z-index:20!important;

    padding:7px 11px!important;

    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:20px!important;

    background:rgba(255,255,255,.07)!important;
    backdrop-filter:blur(6px);

    color:rgba(255,255,255,.88)!important;

    font-size:9px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.5px!important;
}


/* =========================================================
   SLIDE 1
   WEB TASARIM / AJANS
   ========================================================= */

.module-blocks-260 .m61-web-monitor{
    position:absolute!important;

    left:25px!important;
    top:53px!important;

    width:405px!important;
    height:225px!important;

    overflow:hidden!important;

    border:7px solid #101925!important;
    border-radius:12px!important;

    background:#fff!important;

    box-shadow:
        0 25px 55px rgba(0,0,0,.30)!important;
}

.module-blocks-260 .m61-browser-bar{
    height:29px!important;

    display:flex!important;
    align-items:center!important;

    gap:5px!important;

    padding:0 10px!important;

    background:#f3f5f8!important;
}

.module-blocks-260 .m61-browser-bar > span{
    display:block!important;

    width:6px!important;
    height:6px!important;

    border-radius:50%!important;

    background:#ef233c!important;
}

.module-blocks-260 .m61-browser-bar > span:nth-child(2){
    background:#ffbd3c!important;
}

.module-blocks-260 .m61-browser-bar > span:nth-child(3){
    background:#24b56a!important;
}

.module-blocks-260 .m61-browser-bar small{
    margin-left:auto!important;

    color:#8390a0!important;

    font-size:7px!important;
}

.module-blocks-260 .m61-web-stage{
    height:196px!important;

    padding:26px!important;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(255,255,255,.15),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #24575d,
            #4e817b
        )!important;

    color:#fff!important;
}

.module-blocks-260 .m61-web-stage > small{
    color:#fff!important;

    font-size:7px!important;
    font-weight:800!important;
    letter-spacing:1px!important;
}

.module-blocks-260 .m61-web-stage > strong{
    display:block!important;

    width:210px!important;

    margin-top:7px!important;

    color:#fff!important;

    font-size:23px!important;
    line-height:1!important;
    font-weight:850!important;
}

.module-blocks-260 .m61-web-stage > p{
    margin:9px 0 17px!important;

    color:rgba(255,255,255,.8)!important;

    font-size:8px!important;
}

.module-blocks-260 .m61-web-cards{
    display:flex!important;
    gap:7px!important;
}

.module-blocks-260 .m61-web-cards i{
    display:block!important;

    min-width:76px!important;

    padding:9px 10px!important;

    border:1px solid rgba(17,50,77,.08)!important;
    border-radius:5px!important;

    background:#fff!important;

    color:#15324d!important;

    font-size:7px!important;
    font-style:normal!important;
    text-align:center!important;
}

.module-blocks-260 .m61-web-phone{
    position:absolute!important;

    right:23px!important;
    top:105px!important;

    z-index:4!important;

    width:117px!important;
    height:195px!important;

    padding:18px 13px!important;

    border:6px solid #101925!important;
    border-radius:18px!important;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f1f5f8
        )!important;

    box-shadow:
        0 20px 35px rgba(0,0,0,.26)!important;
}

.module-blocks-260 .m61-web-phone small{
    color:#ef233c!important;

    font-size:7px!important;
    font-weight:900!important;
}

.module-blocks-260 .m61-web-phone strong{
    display:block!important;

    margin:21px 0 16px!important;

    color:#17324d!important;

    font-size:16px!important;
    line-height:1.05!important;
    font-weight:850!important;
}

.module-blocks-260 .m61-web-phone > span{
    display:block!important;

    height:22px!important;

    margin-top:5px!important;

    border-radius:4px!important;

    background:#e6edf2!important;
}


/* =========================================================
   SLIDE 2
   E-TICARET / SEO
   ========================================================= */

.module-blocks-260 .m61-store-panel{
    position:absolute!important;

    left:17px!important;
    top:51px!important;

    width:420px!important;
    height:234px!important;

    padding:18px!important;

    border:6px solid #111a27!important;
    border-radius:12px!important;

    background:#f6f8fb!important;

    box-shadow:
        0 25px 55px rgba(0,0,0,.30)!important;
}

.module-blocks-260 .m61-store-top{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;

    color:#17324d!important;
}

.module-blocks-260 .m61-store-top b{
    color:#17324d!important;

    font-size:14px!important;
    font-weight:850!important;
}

.module-blocks-260 .m61-store-top span{
    padding:5px 9px!important;

    border-radius:5px!important;

    background:#ef233c!important;

    color:#fff!important;

    font-size:7px!important;
}

.module-blocks-260 .m61-store-stats{
    display:flex!important;

    gap:8px!important;

    margin-top:14px!important;
}

.module-blocks-260 .m61-store-stats > div{
    flex:1!important;

    padding:11px!important;

    border:1px solid #e3e8ef!important;
    border-radius:7px!important;

    background:#fff!important;
}

.module-blocks-260 .m61-store-stats small{
    display:block!important;

    color:#8794a5!important;

    font-size:7px!important;
}

.module-blocks-260 .m61-store-stats strong{
    display:inline-block!important;

    margin-top:4px!important;

    color:#17324d!important;

    font-size:14px!important;
}

.module-blocks-260 .m61-store-stats em{
    float:right!important;

    margin-top:5px!important;

    color:#22a565!important;

    font-size:7px!important;
    font-style:normal!important;
}

.module-blocks-260 .m61-store-products{
    display:flex!important;

    gap:7px!important;

    margin-top:11px!important;
}

.module-blocks-260 .m61-store-products i{
    display:block!important;
    flex:1!important;

    color:#68778c!important;

    font-size:7px!important;
    font-style:normal!important;
}

.module-blocks-260 .m61-store-products i > span{
    display:block!important;

    height:37px!important;

    margin-bottom:4px!important;

    border-radius:5px!important;

    background:
        linear-gradient(
            135deg,
            #e7edf4,
            #cbd7e3
        )!important;
}

.module-blocks-260 .m61-store-chart{
    position:absolute!important;

    right:17px!important;
    bottom:15px!important;

    width:98px!important;
    height:39px!important;

    display:flex!important;
    align-items:flex-end!important;

    gap:5px!important;
}

.module-blocks-260 .m61-store-chart > span{
    display:block!important;
    flex:1!important;

    border-radius:3px 3px 0 0!important;

    background:#ef233c!important;
}

.module-blocks-260 .m61-store-chart > span:nth-child(1){height:23%!important}
.module-blocks-260 .m61-store-chart > span:nth-child(2){height:40%!important}
.module-blocks-260 .m61-store-chart > span:nth-child(3){height:35%!important}
.module-blocks-260 .m61-store-chart > span:nth-child(4){height:58%!important}
.module-blocks-260 .m61-store-chart > span:nth-child(5){height:72%!important}
.module-blocks-260 .m61-store-chart > span:nth-child(6){height:95%!important}

.module-blocks-260 .m61-order-phone{
    position:absolute!important;

    right:20px!important;
    top:108px!important;

    z-index:4!important;

    width:127px!important;

    padding:18px 15px!important;

    border:6px solid #111a27!important;
    border-radius:17px!important;

    background:#fff!important;

    box-shadow:
        0 20px 35px rgba(0,0,0,.27)!important;
}

.module-blocks-260 .m61-order-phone small{
    color:#ef233c!important;

    font-size:7px!important;
    font-weight:850!important;
}

.module-blocks-260 .m61-order-phone strong{
    display:block!important;

    margin-top:15px!important;

    color:#17324d!important;

    font-size:21px!important;
}

.module-blocks-260 .m61-order-phone p{
    margin:8px 0!important;

    color:#718096!important;

    font-size:8px!important;
}

.module-blocks-260 .m61-order-phone b{
    color:#22a565!important;

    font-size:14px!important;
}


/* =========================================================
   SLIDE 3
   LOGO / BASKI / FOTO / DRONE
   ========================================================= */

.module-blocks-260 .m61-brand-board{
    position:absolute!important;

    left:30px!important;
    top:52px!important;

    width:285px!important;
    height:220px!important;

    padding:22px!important;

    border-radius:13px!important;

    background:#fff!important;

    box-shadow:
        0 25px 50px rgba(0,0,0,.27)!important;
}

.module-blocks-260 .m61-brand-board small{
    color:#8693a5!important;

    font-size:7px!important;
    font-weight:850!important;
}

.module-blocks-260 .m61-brand-logo{
    width:60px!important;
    height:60px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    margin:18px 0 12px!important;

    border-radius:12px!important;

    background:#ef233c!important;

    color:#fff!important;

    font-size:25px!important;
    font-weight:900!important;
}

.module-blocks-260 .m61-brand-board strong{
    display:block!important;

    color:#17324d!important;

    font-size:15px!important;
    font-weight:850!important;
}

.module-blocks-260 .m61-brand-colors{
    display:flex!important;

    gap:6px!important;

    margin-top:19px!important;
}

.module-blocks-260 .m61-brand-colors i{
    display:block!important;

    width:25px!important;
    height:8px!important;

    border-radius:5px!important;

    background:#102b57!important;
}

.module-blocks-260 .m61-brand-colors i:nth-child(2){
    background:#ef233c!important;
}

.module-blocks-260 .m61-brand-colors i:nth-child(3){
    background:#d9dee5!important;
}

.module-blocks-260 .m61-brand-colors i:nth-child(4){
    background:#111!important;
}

.module-blocks-260 .m61-print-stack{
    position:absolute!important;

    right:18px!important;
    top:72px!important;

    width:175px!important;
    height:105px!important;
}

.module-blocks-260 .m61-card-back,
.module-blocks-260 .m61-card-front{
    position:absolute!important;

    width:145px!important;
    height:82px!important;

    border-radius:7px!important;

    box-shadow:
        0 14px 25px rgba(0,0,0,.25)!important;
}

.module-blocks-260 .m61-card-back{
    left:0!important;
    top:16px!important;

    transform:rotate(-7deg)!important;

    background:#ef233c!important;
}

.module-blocks-260 .m61-card-front{
    right:0!important;
    top:0!important;

    padding:14px!important;

    transform:rotate(4deg)!important;

    background:#fff!important;
}

.module-blocks-260 .m61-card-front small{
    color:#ef233c!important;

    font-size:6px!important;
}

.module-blocks-260 .m61-card-front strong{
    display:block!important;

    margin-top:8px!important;

    color:#17324d!important;

    font-size:12px!important;
    font-weight:850!important;
}

.module-blocks-260 .m61-card-front span{
    color:#7e8c9e!important;

    font-size:7px!important;
}

.module-blocks-260 .m61-camera-card{
    position:absolute!important;

    right:132px!important;
    bottom:13px!important;

    width:108px!important;
    height:92px!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;

    border-radius:11px!important;

    background:#192532!important;

    color:#fff!important;

    box-shadow:
        0 16px 30px rgba(0,0,0,.28)!important;
}

.module-blocks-260 .m61-camera-lens{
    width:43px!important;
    height:43px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:5px solid #cfd7df!important;
    border-radius:50%!important;

    background:#294054!important;
}

.module-blocks-260 .m61-camera-lens i{
    display:block!important;

    width:17px!important;
    height:17px!important;

    border-radius:50%!important;

    background:#648ba7!important;
}

.module-blocks-260 .m61-camera-card strong{
    margin-top:7px!important;

    color:#fff!important;

    font-size:7px!important;
    letter-spacing:.5px!important;
}

.module-blocks-260 .m61-drone-card{
    position:absolute!important;

    right:3px!important;
    bottom:16px!important;

    width:120px!important;

    color:#fff!important;
    text-align:center!important;
}

.module-blocks-260 .m61-drone{
    position:relative!important;

    height:55px!important;
}

.module-blocks-260 .m61-drone:before,
.module-blocks-260 .m61-drone:after{
    content:""!important;

    position:absolute!important;

    top:16px!important;

    width:45px!important;
    height:3px!important;

    background:#e2e7ec!important;
}

.module-blocks-260 .m61-drone:before{
    left:5px!important;
    transform:rotate(-15deg)!important;
}

.module-blocks-260 .m61-drone:after{
    right:5px!important;
    transform:rotate(15deg)!important;
}

.module-blocks-260 .m61-drone i{
    position:absolute!important;

    top:4px!important;

    display:block!important;

    width:27px!important;
    height:5px!important;

    border-radius:50%!important;

    background:#fff!important;
}

.module-blocks-260 .m61-drone i:first-child{
    left:2px!important;
}

.module-blocks-260 .m61-drone i:nth-child(2){
    right:2px!important;
}

.module-blocks-260 .m61-drone b{
    position:absolute!important;

    left:50%!important;
    top:19px!important;

    transform:translateX(-50%)!important;

    padding:5px 8px!important;

    border-radius:5px!important;

    background:#ef233c!important;

    color:#fff!important;

    font-size:7px!important;
}

.module-blocks-260 .m61-drone-card > span{
    color:rgba(255,255,255,.82)!important;

    font-size:7px!important;
}


/* =========================================================
   ORTAK FLOATING CHIP
   ========================================================= */

.module-blocks-260 .m61-viz-chip{
    position:absolute!important;

    z-index:12!important;

    display:flex!important;
    align-items:center!important;

    gap:9px!important;

    padding:9px 12px!important;

    border-radius:8px!important;

    background:#fff!important;

    box-shadow:
        0 12px 27px rgba(0,0,0,.22)!important;
}

.module-blocks-260 .m61-viz-chip > b{
    min-width:35px!important;

    padding:7px 5px!important;

    border-radius:5px!important;

    background:#ef233c!important;

    color:#fff!important;

    font-size:10px!important;
    text-align:center!important;
}

.module-blocks-260 .m61-viz-chip > span{
    color:#46546a!important;

    font-size:8px!important;
}

.module-blocks-260 .m61-viz-chip > span strong{
    color:#21a665!important;
}

.module-blocks-260 .m61-chip-seo,
.module-blocks-260 .m61-chip-growth{
    right:28px!important;
    bottom:0!important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(min-width:768px) and (max-width:1023px){

    .module-blocks-260 .m61-hero-content h1.m61-hero-heading,
    .module-blocks-260 .m61-hero-content h2.m61-hero-heading{
        font-size:39px!important;
    }

    .module-blocks-260 .m61-viz{
        transform:scale(.88)!important;
        transform-origin:center center!important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

    .module-blocks-260 .m61-hero-content h1.m61-hero-heading,
    .module-blocks-260 .m61-hero-content h2.m61-hero-heading{
        font-size:34px!important;
        line-height:1!important;
        letter-spacing:-1px!important;
    }

    .module-blocks-260 .m61-hero-visual{
        min-height:250px!important;
    }

    .module-blocks-260 .m61-viz{
        height:320px!important;

        transform:scale(.69)!important;
        transform-origin:top center!important;
    }

    .module-blocks-260 .m61-viz-kicker{
        display:none!important;
    }

    .module-blocks-260.carousel-mode .swiper-pagination{
        bottom:6px!important;
    }
}


/* M61_HOME_HERO_POLISH_V3_START */


/* =========================================================
   DESKTOP LAYOUT
   Sol taraf biraz daha geniş.
   Başlıkların plansız kırılması engelleniyor.
   ========================================================= */

@media(min-width:1024px){

    .module-blocks-260
    .m61-hero-inner{

        grid-template-columns:
            minmax(0,510px)
            minmax(0,1fr)!important;

        column-gap:54px!important;
    }

    .module-blocks-260
    .m61-hero-content{

        width:100%!important;
        max-width:510px!important;
    }


    /* H1 ve H2 aynı görsel güç */

    .module-blocks-260
    .m61-hero-content
    h1.m61-hero-heading,

    .module-blocks-260
    .m61-hero-content
    h2.m61-hero-heading{

        width:100%!important;

        font-size:47px!important;
        line-height:.98!important;

        letter-spacing:-1.65px!important;
    }


    /* Her span gerçekten tek satır */

    .module-blocks-260
    .m61-hero-heading > span{

        display:block!important;

        white-space:nowrap!important;
    }


    /* =====================================================
       SLIDE 1
       Biraz daha güçlü / dolu visual
       ===================================================== */

    .module-blocks-260
    .m61-viz-web{

        transform:
            translateX(6px)
            scale(1.035)!important;

        transform-origin:
            center center!important;
    }


    /* =====================================================
       SLIDE 3
       Sağ taraf biraz daha iri ve dengeli
       ===================================================== */

    .module-blocks-260
    .m61-viz-brand{

        transform:
            translateX(9px)
            scale(1.065)!important;

        transform-origin:
            center center!important;
    }

}


/* TABLET / MOBILE nowrap KAPALI */

@media(max-width:1023px){

    .module-blocks-260
    .m61-hero-heading > span{

        white-space:normal!important;
    }

}


/* M61_HOME_HERO_POLISH_V3_END */


/* =========================================================
   M61 HERO BULLETS V4
   3 SLIDE HER ZAMAN GORUNUR
   ========================================================= */

.module-blocks-260.carousel-mode
.swiper-pagination{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
}


/* PASIF BULLETLAR */

.module-blocks-260.carousel-mode
.swiper-pagination-bullet{
    display:block!important;

    width:8px!important;
    height:8px!important;

    margin:0!important;

    border:1px solid rgba(16,43,87,.14)!important;
    border-radius:999px!important;

    background:#b9c4d2!important;

    opacity:1!important;

    cursor:pointer!important;

    box-shadow:
        0 1px 2px
        rgba(16,43,87,.08)!important;

    transition:
        width .22s ease,
        background .22s ease,
        transform .22s ease!important;
}


/* HOVER */

.module-blocks-260.carousel-mode
.swiper-pagination-bullet:hover{
    background:#7f8da1!important;
    transform:scale(1.15)!important;
}


/* AKTIF */

.module-blocks-260.carousel-mode
.swiper-pagination-bullet-active{
    width:24px!important;
    height:8px!important;

    border-color:#ef233c!important;

    background:#ef233c!important;

    transform:none!important;

    box-shadow:
        0 2px 7px
        rgba(239,35,60,.24)!important;
}


/* M61_SLIDE3_LINKS_START */

.module-blocks-260
.m61-feature-link{
    text-decoration:none!important;
    color:inherit!important;
    cursor:pointer!important;

    transition:
        transform .18s ease,
        opacity .18s ease!important;
}

.module-blocks-260
.m61-feature-link strong,
.module-blocks-260
.m61-feature-link small{
    color:inherit!important;
}

.module-blocks-260
.m61-feature-link:hover{
    transform:translateY(-2px)!important;
    opacity:.92!important;
}

/* M61_SLIDE3_LINKS_END */

/* M61_HERO_PROGRESS_START */

/*
 * M61 Hero Soft Side Progress
 * Bulletlar ortada kalır.
 * Progress hemen sağ tarafta, ince ve yarı şeffaf.
 */

.module-blocks-260.carousel-mode .swiper-pagination {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}

/* Bullet konumlarına dokunma */
.module-blocks-260.carousel-mode .swiper-pagination-bullet {
    position: static !important;
}


/* Şeffaf arka ray */
.module-blocks-260.carousel-mode .swiper-pagination::before {
    content: "";

    position: absolute;

    left: calc(50% + 52px);
    top: 50%;

    width: 88px;
    height: 2px;

    transform: translateY(-50%);

    border-radius: 999px;

    background: rgba(16, 43, 87, .08);

    pointer-events: none;
}


/* İlerleyen kırmızı çizgi */
.module-blocks-260.carousel-mode
.swiper-pagination-bullet-active::after {

    content: "";

    position: absolute;

    left: calc(50% + 52px);
    top: 50%;

    width: 88px;
    height: 2px;

    border-radius: 999px;

    background: rgba(239, 35, 60, .38);

    transform:
        translateY(-50%)
        scaleX(0);

    transform-origin: left center;

    animation:
        m61HeroSoftProgress
        12s
        linear
        forwards;

    pointer-events: none;
}


@keyframes m61HeroSoftProgress {

    from {
        transform:
            translateY(-50%)
            scaleX(0);
    }

    to {
        transform:
            translateY(-50%)
            scaleX(1);
    }

}


/* Slider hover'da duruyorsa çizgi de dursun */
.module-blocks-260:hover
.swiper-pagination-bullet-active::after {
    animation-play-state: paused;
}


/* Mobilde daha ufak ve daha silik */
@media (max-width:767px) {

    .module-blocks-260.carousel-mode
    .swiper-pagination::before,

    .module-blocks-260.carousel-mode
    .swiper-pagination-bullet-active::after {

        left: calc(50% + 42px);

        width: 52px;
        height: 1px;
    }

}

/* M61_HERO_PROGRESS_END */