/* ===========================
   ORBAYSOFT WEBSITE V2
=========================== */

html{

    scroll-behavior:smooth;

}

html,
body{

    overflow-x:hidden;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#222222;
}

/* CONTAINER */

.container{

max-width:1280px;

width:92%;

margin:auto;

}

@media(max-width:1250px){
    .container{
        width:95%;
    }
}

/* ===========================
   HEADER
=========================== */

header{
    width:100%;
    height:90px;
    background:#ffffff;
    border-bottom:1px solid #eeeeee;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
}

.navbar{
    height:90px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    height:55px;
}

nav{
    display:flex;
    gap:35px;
}
nav a.active{

    color:#1976ff;

}

nav a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    background:#1976ff;

    border-radius:50px;

}

nav a{
    position:relative;
    color:#333333;
    text-decoration:none;
    font-size:16px;
    font-weight:bold;
}

nav a:hover{
    color:#1976ff;
}

.demo-btn{
    background:#1976ff;
    color:#ffffff;
    padding:14px 25px;
    border-radius:8px;
    text-decoration:none;
}

/* ===========================
   HERO
=========================== */

.hero{

    padding-top:170px;
    padding-bottom:140px;

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(circle at top right,#d6e9ff 0%,transparent 28%),

    radial-gradient(circle at bottom left,#eef6ff 0%,transparent 35%),

    linear-gradient(180deg,#ffffff,#f7fbff);

}

.hero-grid{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.hero-left{

   width:49%;
    position:relative;
    z-index:2;

}

.hero-right{
    width:50%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:-35px;
    padding-left:20px;

  perspective:2200px;
}

.hero-brand{

    margin-bottom:32px;

}

.hero-brand img{

    width:390px;
    max-width:100%;

    display:block;

    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;

}

.hero h1{

    margin:0 0 32px;

    font-size:64px;
    font-weight:900;

    line-height:1.02;
    letter-spacing:-2.5px;

    color:#1d1d1d;

}

.hero-title-dark,
.hero-title-blue{

    display:block;

}

.hero-title-dark{

    color:#17213a;

}

.hero-title-blue{

    color:#1976ff;

    margin-top:5px;

}

/* YÖNETİN YAZISININ FIRÇA ALANI */

.hero-brush{

    position:relative;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    margin-top:15px;

    padding:8px 48px 12px;

    color:white;

    isolation:isolate;

}

.hero-brush::before{

    content:"";

    position:absolute;

    inset:-3px -18px;

    z-index:-2;

    background:
        linear-gradient(
            90deg,
            #0c63e7 0%,
            #1976ff 35%,
            #065de0 70%,
            #1976ff 100%
        );

    clip-path:polygon(
        2% 18%,
        10% 8%,
        23% 14%,
        36% 5%,
        51% 12%,
        65% 4%,
        79% 11%,
        98% 2%,
        95% 25%,
        100% 39%,
        96% 55%,
        99% 76%,
        86% 89%,
        70% 84%,
        54% 96%,
        37% 88%,
        20% 96%,
        4% 83%,
        7% 65%,
        1% 49%
    );

    transform:rotate(-1deg);

}

/* Fırçanın içindeki hafif boya çizgileri */

.hero-brush::after{

    content:"";

    position:absolute;

    inset:5px -9px;

    z-index:-1;

    opacity:.22;

    background:
        repeating-linear-gradient(
            176deg,
            rgba(255,255,255,.75) 0,
            rgba(255,255,255,.75) 2px,
            transparent 2px,
            transparent 9px
        );

    clip-path:polygon(
        1% 20%,
        18% 10%,
        38% 14%,
        58% 7%,
        80% 12%,
        99% 5%,
        96% 48%,
        100% 82%,
        79% 90%,
        55% 85%,
        28% 95%,
        3% 82%
    );

}

.hero-brush > span{

    position:relative;

    display:block;

    color:white;

    font-size:.95em;
    font-weight:900;

    letter-spacing:1px;

    transform:rotate(-1deg);

    text-shadow:0 2px 3px rgba(0,0,0,.12);

}

.hero p{

    color:#666666;

    font-size:20px;

    line-height:32px;

    margin-bottom:35px;

}

.buttons{

    display:flex;

    gap:20px;

}

.hero-buttons{

    display:flex;
    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.hero-action-btn{

    min-height:58px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    padding:10px 24px;

    border-radius:12px;

    font-size:16px;
    font-weight:700;

    text-decoration:none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;

}

.btn-primary{

    background:#1976ff;
    color:white;

    border:2px solid #1976ff;

    box-shadow:0 12px 28px rgba(25,118,255,.24);

}

.btn-secondary{

    background:white;

    border:2px solid #1976ff;

    color:#1976ff;

}

.hero-btn-icon{

    width:36px;
    height:36px;

    flex-shrink:0;

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

    border-radius:9px;

    font-size:18px;

}

.btn-primary .hero-btn-icon{

    background:rgba(255,255,255,.17);
    color:white;

}

.btn-secondary .hero-btn-icon{

    background:#eaf3ff;
    color:#1976ff;

}

.hero-action-btn:hover{

    transform:translateY(-3px);

}

.btn-primary:hover{

    box-shadow:0 16px 34px rgba(25,118,255,.34);

}

.btn-secondary:hover{

    background:#f5f9ff;

}

.hero-right img{

    width:940px;
    max-width:none;

    display:block;

    transform:
        perspective(2200px)
        rotateY(-10deg)
        rotateX(-2deg)
        rotateZ(-1deg);

    transform-origin:right center;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    transform-style:preserve-3d;

    will-change:transform;
    transition: transform .35s ease, box-shadow .35s ease;

}

.hero-right img:hover{

    transform:
        perspective(2200px)
        rotateY(-8deg)
        rotateX(-2deg)
        rotateZ(-1deg);

}

.hero-right::after{

content:"";

position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

width:380px;

height:40px;

background:rgba(0,0,0,.18);

filter:blur(35px);

border-radius:50%;

z-index:0;

 display:none;

}


/* ===========================
   FEATURES
=========================== */

.features{

    padding:120px 0;

    background:
        radial-gradient(
            circle at top center,
            rgba(25,118,255,.06),
            transparent 34%
        ),
        #f7faff;

}

.section-title{

    max-width:820px;

    margin:0 auto 65px;

    text-align:center;

}

.feature-badge{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    padding:10px 18px;

    margin-bottom:20px;

    border:1px solid #d8e8ff;
    border-radius:50px;

    background:#edf5ff;

    color:#1976ff;

    font-size:14px;
    font-weight:800;

    letter-spacing:.3px;

    box-shadow:0 8px 20px rgba(25,118,255,.08);

}

.feature-badge i{

    font-size:14px;

}

.section-title h2{

    margin:0 0 20px;

    color:#101828;

    font-size:50px;
    font-weight:800;

    line-height:1.15;

    letter-spacing:-1.5px;

}

.section-title p{

    max-width:720px;

    margin:0 auto;

    color:#667085;

    font-size:19px;
    line-height:31px;

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

    align-items:stretch;

}

.feature-card{

    position:relative;

    display:flex;
    flex-direction:column;

    min-width:0;

    padding:32px 30px 28px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfdff 100%
        );

    border:1px solid #dfe9f6;
    border-radius:26px;

    box-shadow:
        0 15px 40px rgba(26,54,93,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;
    left:30px;

    width:90px;
    height:4px;

    border-radius:0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            #1976ff,
            #6bb1ff
        );

}

.feature-card::after{

    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:200px;
    height:200px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(25,118,255,.08),
            transparent 70%
        );

    pointer-events:none;

}

.feature-card:hover{

    transform:translateY(-7px);

    border-color:#c9defb;

    box-shadow:
        0 25px 60px rgba(26,75,145,.12);

}

.feature-head{

    position:relative;
    z-index:1;

    display:flex;

    align-items:center;

    gap:17px;

    margin-bottom:21px;

}

.feature-icon{

    width:66px;
    height:66px;

    flex-shrink:0;

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

    margin:0;

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #e5f0ff
        );

    color:#1976ff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);

}

.feature-icon i{

    color:#1976ff;

    font-size:31px;

}

.feature-card h3{

    margin:0;

    color:#101828;

    font-size:23px;
    font-weight:800;

    line-height:1.25;

}

.feature-card > p{

    min-height:82px;

    margin:0 0 22px;

    padding-bottom:21px;

    border-bottom:1px solid #e5edf7;

    color:#667085;

    font-size:16px;
    line-height:27px;

}

.feature-list{

    display:flex;
    flex-direction:column;

    gap:13px;

    margin:0 0 25px;
    padding:0;

    list-style:none;

}

.feature-list li{

    position:relative;

    margin:0;
    padding-left:29px;

    color:#344054;

    font-size:15.5px;
    line-height:1.45;

}

.feature-list li::before{

    content:"✓";

    position:absolute;

    top:0;
    left:0;

    width:19px;
    height:19px;

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

    border-radius:50%;

    background:#1976ff;

    color:white;

    font-size:11px;
    font-weight:900;

}

.feature-tags{

    display:grid;

    grid-template-columns:repeat(3, minmax(0, 1fr));

    gap:8px;

    margin-top:auto;
    padding-top:20px;

    border-top:1px solid #e5edf7;

}

.feature-tags span{

    min-width:0;
    min-height:38px;

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

    gap:5px;

    padding:7px 6px;

    border:1px solid #d8e7fb;
    border-radius:10px;

    background:#f1f6fd;

    color:#1976ff;

    font-size:11.5px;
    font-weight:600;

    line-height:1.2;
    text-align:center;

    white-space:normal;

}

.feature-tags i{

    flex-shrink:0;

    font-size:12px;

}

/*==========================
ONLINE DEVICE
==========================*/

.device-track{

    padding:140px 0;
    background:#ffffff;
    overflow:hidden;

}

.device-grid{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:90px;

}

.device-left{

    width:48%;

}

.device-right{

    width:52%;
    position:relative;
    display:flex;
    justify-content:center;

}

.device-left h2{

    font-size:54px;
    line-height:1.15;
    font-weight:800;
    margin:25px 0;

}

.device-left h2 span{

    color:#1976ff;
    display:block;

}

.device-left p{

    font-size:20px;
    color:#667085;
    line-height:34px;
    margin-bottom:35px;

}

.device-left ul{

    list-style:none;
    margin-bottom:40px;

}

.device-left ul li{

    margin-bottom:18px;
    font-size:18px;
    padding-left:30px;
    position:relative;

}

.device-left ul li::before{

    content:"✔";
    position:absolute;
    left:0;
    color:#1976ff;
    font-weight:bold;

}

.device-right img{

    width:370px;
    position:relative;
    z-index:2;
    margin-top:40px;
      margin-right:-20px;
    filter:drop-shadow(0 35px 70px rgba(0,0,0,.18));

    transition:.35s;
    
    

}

.device-right img:hover{

    transform:translateY(-10px);

}

.phone-glow{

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:#4da2ff;

    opacity:.13;

    filter:blur(90px);

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

}


/*==========================
SECOND SCREEN
==========================*/

.second-screen{

    padding:140px 0;

    background:#f8fbff;

}

.second-grid{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:90px;

}

.second-left{

    width:52%;

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    transform:
        translateY(-10px)
        scale(1.02);

    filter:drop-shadow(0 45px 90px rgba(0,0,0,.22));

}

.second-right{

    width:48%;

}

.second-right h2{

    font-size:54px;

    font-weight:800;

    line-height:1.15;

    margin:25px 0;

}

.second-right h2 span{

    display:block;

    color:#1976ff;

}

.second-right p{

    color:#667085;

    font-size:20px;

    line-height:34px;

    margin-bottom:35px;

}

.second-right ul{

    list-style:none;

    margin-bottom:40px;

}

.second-right ul li{

    margin-bottom:18px;

    position:relative;

    padding-left:30px;

    font-size:18px;

}

.second-right ul li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#1976ff;

    font-weight:bold;

}

.second-left img{

    width:700px;
    
    display:block;

    margin-top:-20px;

    filter:drop-shadow(0 30px 70px rgba(0,0,0,.18));

    position:relative;

    z-index:2;

    transition:.35s;

}

#monitorImage{

    transition:transform .6s ease, filter .35s ease;

}

#monitorImage.hover{

    transform:translateY(-10px);

}

#monitorImage.flip{

    transform:perspective(1400px) rotateY(90deg);

}

.monitor-glow{

    position:absolute;

    width:500px;

    height:500px;

    background:#5aa8ff;

    opacity:.15;

    filter:blur(100px);

    border-radius:50%;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    transition:.35s;

}

.second-left:hover .monitor-glow{

    transform:translate(-50%,-50%) scale(1.08);

    opacity:.20;

}

.screen-boxes{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.screen-box{

    transition:.30s;
   
    background:white;

    border-radius:18px;

    padding:30px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);
    
    

}

.screen-box:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.screen-box i{

    font-size:34px;

    color:#1976ff;

    margin-bottom:15px;

}

.screen-box h4{

    font-size:20px;

    margin-bottom:6px;

}

.screen-box span{

    color:#667085;

}
/*==========================
INTERACTIVE TOUR
==========================*/

.tour{

    padding:120px 0;

    background:#ffffff;

}

.tour-box{

    margin-top:60px;

    background:#ffffff;

    border:1px solid #e8edf5;

    border-radius:18px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    overflow:hidden;

}

/*-------------------------
WINDOW
-------------------------*/

.tour-window{

    display:flex;
    flex-direction:column;

    width:100%;

}


/*-------------------------
TITLE BAR
-------------------------*/

.tour-titlebar{

    height:34px;

    background:linear-gradient(#f7f7f7,#ececec);

    border-bottom:1px solid #d6d6d6;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 10px;

    user-select:none;

}

.tour-title{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#222;

}

.tour-title i{

    color:#2d8cff;

    font-size:14px;

}

/* Windows Butonları */

.tour-window-buttons{

    display:flex;

    height:100%;

}

.tour-window-buttons button{

    width:46px;

    height:100%;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:14px;

    transition:.20s;

}

.tour-window-buttons button:hover{

    background:#e6e6e6;

}

.tour-window-buttons .close:hover{

    background:#e81123;

    color:#fff;

}

/*-------------------------
BODY
-------------------------*/

.tour-body{

    position:relative;

    width:100%;

}

/*-------------------------
SIDEBAR
-------------------------*/

.tour-sidebar{

    position:absolute;

    top:0;
    bottom:0;
    left:0;

    width:270px;

    z-index:2;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #2d8cff,
        #2b86f5
    );

}

/*-------------------------
CONTENT
-------------------------*/

.tour-content{

    position:relative;

    width:calc(100% - 270px);

    margin-left:270px;

    overflow:hidden;

    background:#edf2f7;

}

.tour-menu{

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    justify-content:space-between;

    padding:12px;

    box-sizing:border-box;

}

.tour-item{

    width:100%;
    min-height:0;

    flex:1;

    border:none;

    background:transparent;

    color:white;

    display:flex;
    align-items:center;

    gap:14px;

    padding:7px 17px;

    margin:2px 0;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    font-size:17px;
    font-weight:600;

    text-align:left;

}

.tour-item i{

    width:31px;

    flex-shrink:0;

    text-align:center;

    font-size:25px;

}

.tour-item:hover{

    background:rgba(255,255,255,.15);

}

.tour-item.active{

    background:rgba(255,255,255,.22);

}

.tour-divider{

    border:none;

    height:1px;

    background:rgba(255,255,255,.18);

    margin:15px 10px;

}

.tour-item.disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

}

.tour-item.disabled:hover{

    background:transparent;

}

#tourImage{

    display:block;

    width:calc(100% + 3px);
    height:auto;

    max-width:none;

    margin-bottom:-3px;

    object-fit:contain;
    object-position:left top;

    clip-path:inset(0 3px 3px 0);

    transition:opacity .25s ease;

    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;

}


.tour-titlebar{

    position:relative;

}

.tour-demo{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    display:flex;

    align-items:center;

    gap:7px;

    font-size:11px;

    font-weight:700;

    color:#19a74d;

    letter-spacing:.4px;

    pointer-events:none;

}

.tour-demo span{

    width:8px;

    height:8px;

    background:#22c55e;

    border-radius:50%;

    animation:livePulse 1.5s infinite;

}

@keyframes livePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.5);

        opacity:.5;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


/*==========================
FAQ
==========================*/

.faq{

    padding:130px 0;

    background:#f8fbff;

}

.faq-box{

    max-width:900px;

    margin:70px auto 0;

}

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    transition:.30s;

}

.faq-item:hover{

    transform:translateY(-3px);

}

.faq-question{

    width:100%;

    background:none;

    border:none;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 35px;

    font-size:22px;

    font-weight:700;

    color:#222;

}

.faq-question i{

    font-size:24px;

    color:#1976ff;

    transition:.30s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:.35s;

}

.faq-answer p{

    padding:0 35px 30px;

    color:#667085;

    line-height:30px;

    font-size:18px;

}

.faq-item.active .faq-answer{

    max-height:250px;

}

.faq-item.active i{

    transform:rotate(45deg);

}

/*==========================
FOOTER
==========================*/

.footer{

    background:#0f172a;

    color:white;

    padding:80px 0 0;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:70px;

}

.footer-logo{

    width:180px;

    margin-bottom:25px;

}

.footer-about p{

    color:#cbd5e1;

    line-height:30px;

    font-size:17px;

}

.footer h4{

    margin-bottom:25px;

    font-size:20px;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-links a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.25s;

}

.footer-links a:hover{

    color:#3b82f6;

}

.footer-contact p{

    color:#cbd5e1;

    margin-bottom:18px;

}

.footer-contact i{

    color:#3b82f6;

    margin-right:10px;

}

.footer-bottom{

    margin-top:70px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    padding:28px;

    color:#94a3b8;

    font-size:15px;

}

.footer-contact a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.25s;

}

.footer-contact a:hover{

    color:#3b82f6;

}

.footer-contact p{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.footer-contact i{

    color:#3b82f6;

    font-size:18px;

    width:22px;

    text-align:center;

}

/*==========================
CTA
==========================*/

.cta{

    padding:120px 0;

    background:#ffffff;

}

.cta-box{

    max-width:950px;

    margin:auto;

    text-align:center;

    background:linear-gradient(135deg,#1976ff,#4ea2ff);

    color:white;

    border-radius:30px;

    padding:70px 50px;

    box-shadow:0 30px 70px rgba(25,118,255,.25);

}

.cta-box h2{

    font-size:48px;

    margin:25px 0;

    line-height:1.2;

}

.cta-box p{

    max-width:700px;

    margin:auto;

    line-height:32px;

    font-size:19px;

    opacity:.95;

}

.cta-button{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:40px;

    padding:20px 40px;

    background:white;

    color:#1976ff;

    text-decoration:none;

    border-radius:12px;

    font-size:19px;

    font-weight:700;

    transition:.30s;

}

.cta-button:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.20);

}

.cta-button i{

    font-size:24px;

}


.menu-toggle{

    display:none;

    border:none;

    background:none;

    cursor:pointer;

    font-size:34px;

    color:#1976ff;

}

/*==========================
RESPONSIVE
==========================*/

@media (max-width:1300px){

.hero h1{

    font-size:58px;

    line-height:1.05;

}

.hero-right img{

    width:720px;

}

.second-left img{

    width:560px;

}

.second-right h2{

    font-size:46px;

}

.device-left h2{

    font-size:46px;

}

}

@media (max-width:1100px){

.hero-grid,
.device-grid,
.second-grid{

    gap:35px;

}

.hero-left{

    width:48%;

}

.hero-right{

    width:52%;

}

.hero h1{

    font-size:50px;

}

.hero p{

    font-size:18px;

}

.hero-right img{

    width:620px;

}

.second-left img{

    width:500px;

}

}

@media (max-width:991px){
    
    
    
    .screen-switch{

    width:100%;

    max-width:340px;

    margin:25px auto 0;

}

.screen-btn{

    flex:1;

    justify-content:center;

    padding:14px 10px;

    font-size:14px;

}

.screen-btn i{

    font-size:16px;

}
    
    
    .mobile-nav a.active{

    color:#1976ff;

    background:#eef6ff;

    border-radius:8px;

    padding-left:15px;

}
    
    
    .driver-btn{

    width:100%;

    padding:12px;

    font-size:15px;

}

    .menu-toggle{

        display:block;

    }

    nav{

        display:none;

    }

    .demo-btn{

        display:none;

    }
    
    .hero{

    padding-top:120px;
    padding-bottom:70px;

}

.hero-grid{

    flex-direction:column;

    gap:60px;

}

.hero-left{

    width:100%;

    text-align:center;

}

.hero-left h1{

    font-size:42px;

    line-height:52px;

}

.hero-left p{

    font-size:18px;

}

.buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-right{

    width:100%;

    margin-top:0;

    padding-left:0;

}

.hero-right img{

    width:100%;

    max-width:700px;

    margin:auto;
    
}

.features{

    padding:80px 0;

}

.section-title h2{

    font-size:34px;

    line-height:42px;

}

.section-title p{

    width:100%;

}

.feature-card{

    padding:35px;

}

}


/*==========================
RESPONSIVE
==========================*/

@media (max-width:991px){

    /* CONTAINER */

    .container{

        width:94%;

    }

    /* HEADER */

    header{

        height:75px;

    }

    .navbar{

        height:75px;

    }

    .logo{

        height:42px;

    }

    .menu-toggle{

        display:block;

        font-size:34px;

        color:#1976ff;

    }

    nav{

        display:none;

    }

    .demo-btn{

        display:none;

    }

    /* HERO */

    .hero{

        padding-top:110px;

        padding-bottom:70px;

    }

    .hero-grid{

        flex-direction:column;

        gap:45px;

    }

    .hero-left,

    .hero-right{

        width:100%;

        text-align:center;

    }

    .badge{

        font-size:13px;

        padding:9px 16px;

    }

    .hero h1{

        font-size:42px;

        line-height:48px;

        letter-spacing:-1px;

    }

    .hero p{

        font-size:18px;

        line-height:30px;

    }

    .buttons{

        justify-content:center;

        flex-wrap:wrap;

        gap:15px;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        max-width:320px;

        text-align:center;

    }

    .hero-right{

        margin-top:0;

        padding-left:0;

        perspective:none;

    }

    .hero-right img{

        width:100%;

        max-width:620px;

        transform:none;

        margin:auto;

    }
    
    /*==========================
FEATURES
==========================*/

.features{

    padding:70px 0;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:32px;

    line-height:40px;

}

.section-title p{

    font-size:17px;

    line-height:28px;

}

.feature-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.feature-card{

    padding:28px;

    border-radius:18px;

}

.feature-icon{

    width:60px;

    height:60px;

    margin-bottom:20px;

}

.feature-icon i{

    font-size:28px;

}

.feature-card h3{

    font-size:24px;

}

.feature-card p{

    font-size:16px;

    line-height:27px;

}

.feature-card ul li{

    font-size:15px;

    line-height:24px;

}

/* ==========================
FEATURE KART SON RÖTUŞLAR
========================== */

.feature-card{

    display:flex;
    flex-direction:column;

    padding:32px 30px 28px;

}

.feature-head{

    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.feature-icon{

    width:62px;
    height:62px;

    flex-shrink:0;

    margin-bottom:0;

    border-radius:18px;

}

.feature-icon i{

    font-size:29px;

}

.feature-card h3{

    margin:0;

    font-size:24px;
    line-height:1.2;

}

.feature-card p{

    min-height:76px;

    margin-bottom:22px;

    padding-bottom:20px;

    border-bottom:1px solid #e8eef6;

}

.feature-card ul{

    margin-top:0;

}

.feature-card ul li{

    margin-bottom:11px;

    padding-left:28px;

}

.feature-card ul li:last-child{

    margin-bottom:0;

}

/*==========================
ONLINE DEVICE
==========================*/

.device-track{

    padding:70px 0;

}

.device-grid{

    flex-direction:column-reverse;

    gap:45px;

}

.device-left,
.device-right{

    width:100%;

    text-align:center;

}

.device-left h2{

    font-size:32px;

    line-height:40px;

}

.device-left p{

    font-size:17px;

    line-height:28px;

}

.device-left ul{

    text-align:left;

    max-width:340px;

    margin:30px auto;

}

.device-left ul li{

    font-size:16px;

    margin-bottom:14px;

}

.device-right{

    justify-content:center;

}

.device-right img{

    width:260px;

    margin:0;

}

.phone-glow{

    width:300px;

    height:300px;

}

/*==========================
SECOND SCREEN
==========================*/

.second-screen{

    padding:70px 0;

}

.second-grid{

    flex-direction:column;

    gap:45px;

}

.second-left,
.second-right{

    width:100%;

    text-align:center;

}

.second-left{

    transform:none;

}

.second-left img{

    width:100%;

    max-width:500px;

    margin:0 auto;

}

.monitor-glow{

    width:300px;

    height:300px;

}

.second-right h2{

    font-size:32px;

    line-height:40px;

}

.second-right p{

    font-size:17px;

    line-height:28px;

}

.second-right ul{

    text-align:left;

    max-width:340px;

    margin:30px auto;

}

.second-right ul li{

    font-size:16px;

    margin-bottom:14px;

}

.screen-boxes{

    grid-template-columns:1fr;

    gap:18px;

}

.screen-box{

    padding:24px;

}

.screen-box h4{

    font-size:20px;

}

.screen-box span{

    font-size:15px;

}

/*==========================
INTERACTIVE TOUR
==========================*/

.tour{

    display:none;

}


/*==========================
FAQ
==========================*/

.faq{

    padding:70px 0;

}

.faq-box{

    margin-top:40px;

}

.faq-question{

    padding:22px;

    font-size:19px;

    text-align:left;

    gap:15px;

}

.faq-question i{

    font-size:20px;

    flex-shrink:0;

}

.faq-answer p{

    padding:0 22px 22px;

    font-size:16px;

    line-height:28px;

}

/*==========================
CTA
==========================*/

.cta{

    padding:70px 0;

}

.cta-box{

    padding:40px 25px;

    border-radius:22px;

}

.cta-box h2{

    font-size:30px;

    line-height:38px;

    margin:18px 0;

}

.cta-box p{

    font-size:16px;

    line-height:28px;

}

.cta-button{

    width:100%;

    justify-content:center;

    padding:18px 20px;

    font-size:17px;

    margin-top:30px;

}

/*==========================
FOOTER
==========================*/

.footer{

    padding:60px 0 0;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:45px;

    text-align:center;

}

.footer-logo{

    width:160px;

    margin:0 auto 20px;

    display:block;

}

.footer-about p{

    font-size:16px;

    line-height:28px;

}

.footer h4{

    margin-bottom:18px;

    font-size:22px;

}

.footer-links{

    align-items:center;

}

.footer-links a{

    font-size:16px;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.footer-contact p{

    justify-content:center;

    font-size:16px;

    flex-wrap:wrap;

}

.footer-bottom{

    margin-top:50px;

    padding:22px;

    font-size:14px;

    line-height:24px;

}

.driver-boxes{

    width:100%;

    margin-top:40px;

}

.driver-card:first-child,
.driver-card:last-child{

    transform:none;

}

}

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

.mobile-menu{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    background:#ffffff;

    z-index:5000;

    transform:translateY(-100%);
    transition:.35s ease;

    padding:22px;

    box-shadow:0 15px 40px rgba(0,0,0,.18);

}

.mobile-menu.active{

    transform:translateY(0);

}

.mobile-menu-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.mobile-menu-top .logo{

    height:42px;

}

.close-menu{

    border:none;

    background:none;

    font-size:30px;

    color:#1976ff;

    cursor:pointer;

}

.mobile-nav{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.mobile-nav a{

    color:#222;

    text-decoration:none;

    font-size:19px;

    font-weight:700;

    padding:16px 5px;

    border-bottom:1px solid #ededed;

}

.mobile-nav a:hover{

    color:#1976ff;

}

.mobile-demo-btn{

    display:block;

    margin-top:25px;

    background:#1976ff;

    color:#fff;

    text-decoration:none;

    text-align:center;

    padding:18px;

    border-radius:10px;

    font-weight:bold;

}

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:4999;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

@media(min-width:992px){

    .mobile-menu,
    .mobile-overlay{

        display:none;

    }

}


.feature-card .btn-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

}

.feature-card .btn-primary i{

    font-size:18px;

}

/*==========================
DRIVERS PAGE
==========================*/

.driver-boxes{

     width:38%;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.driver-card{

    background:#fff;

    border-radius:22px;

    padding:24px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    border-top:4px solid #1976ff;

}

.driver-card:first-child{

    transform:translateY(-25px);

}

.driver-card:last-child{

    transform:translateY(25px);

}

.driver-card:hover{

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.driver-card i{

    font-size:34px;

    color:#1976ff;

    display:block;

    margin-bottom:14px;

    margin-top:-4px;

}

.driver-card h3{

   font-size:22px;

    margin-bottom:8px;

}

.driver-card p{
    
   font-size:15px;

    margin-bottom:18px;


}

.driver-card .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 18px !important;

    font-size:14px;

    border-radius:8px;

    width:auto;

    min-width:160px;

}

.driver-btn{


    gap:8px;

    padding:10px 18px;

    background:#1976ff;

    color:#fff;

    text-decoration:none;

    border-radius:8px;


    font-weight:600;

    transition:.25s;
    
      font-size:16px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

.driver-btn:hover{

    background:#0f65e6;

}

.driver-btn i{

    font-size:16px;

    color:#fff;

}

/*==========================
MONITOR SWITCH
==========================*/

.screen-switch{

    display:flex;

    justify-content:center;

    margin-top:25px;

    background:#ffffff;

    border-radius:50px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    width:max-content;

    margin-left:auto;

    margin-right:auto;
    
     position:relative;
    z-index:9999;


}

.screen-btn{

    border:none;

    background:transparent;

    padding:16px 28px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.30s;

}

.screen-btn.active{

    background:#1976ff;

    color:#fff;

}

.screen-btn i{

    font-size:18px;

}

#monitorImage{

    transition:transform .6s ease;

    transform-style:preserve-3d;

    backface-visibility:hidden;

}

.hero-right img,
.device-right img,
#monitorImage,
#tourImage,
.logo,
.footer-logo{

    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;

}

/* =========================================
   YENİ HERO RESPONSIVE DÜZENLEMELERİ
========================================= */

/* Küçük masaüstü ve tablet yatay */
@media (max-width:1300px){

    .hero{

        padding-top:145px;
        padding-bottom:110px;

    }

    .hero-grid{

        gap:35px;

    }

    .hero-left{

        width:49%;

    }

    .hero-right{

        width:48%;
        padding-left:0;

    }

    .hero-brand img{

        width:330px;

    }

    .hero h1{

        font-size:56px;
        line-height:1.03;

        letter-spacing:-2px;

    }

    .hero-brush{

        padding:7px 40px 11px;

    }

    .hero p{

        font-size:18px;
        line-height:29px;

    }

    .hero-right img{

        width:730px;

    }

    .hero-action-btn{

        padding-left:18px;
        padding-right:18px;

    }

}


/* Dar tablet ve küçük dizüstü */
@media (max-width:1100px){

    .hero-grid{

        gap:25px;

    }

    .hero-brand{

        margin-bottom:25px;

    }

    .hero-brand img{

        width:285px;

    }

    .hero h1{

        font-size:47px;
        letter-spacing:-1.5px;

        margin-bottom:25px;

    }

    .hero-brush{

        margin-top:12px;

        padding:6px 34px 10px;

    }

    .hero p{

        font-size:17px;
        line-height:27px;

        margin-bottom:28px;

    }

    .hero-right img{

        width:630px;

    }

    .hero-action-btn{

        min-height:54px;

        padding:8px 15px;

        gap:9px;

        font-size:14px;

    }

    .hero-btn-icon{

        width:32px;
        height:32px;

        font-size:16px;

    }

}


/* ==========================
INTERAKTİF TUR RESPONSIVE
========================== */

@media(max-width:1300px){

    .tour-sidebar{

        width:235px;

    }

    .tour-content{

        width:calc(100% - 235px);
        margin-left:235px;

    }

    .tour-item{

        gap:11px;

        padding:6px 13px;

        font-size:15px;

    }

    .tour-item i{

        width:27px;

        font-size:22px;

    }

}


@media(max-width:1100px){

    .tour-sidebar{

        width:205px;

    }

    .tour-content{

        width:calc(100% - 205px);
        margin-left:205px;

    }

    .tour-menu{

        padding:8px;

    }

    .tour-item{

        gap:8px;

        padding:5px 10px;

        font-size:13px;

        border-radius:9px;

    }

    .tour-item i{

        width:24px;

        font-size:19px;

    }

}


@media(max-width:850px){

    .tour-sidebar{

        width:175px;

    }

    .tour-content{

        width:calc(100% - 175px);
        margin-left:175px;

    }

    .tour-menu{

        padding:6px;

    }

    .tour-item{

        gap:6px;

        padding:3px 7px;

        font-size:11px;

        border-radius:7px;

    }

    .tour-item i{

        width:20px;

        font-size:16px;

    }

}

/* Mobilde tur kapalı kalacak */
@media(max-width:768px){

    .tour{

        display:none;

    }

}

/* Tablet ve mobil */
@media (max-width:991px){

    .hero{

        padding-top:125px;
        padding-bottom:80px;

        overflow:hidden;

    }

    .hero-grid{

        display:flex;
        flex-direction:column;

        align-items:center;

        gap:55px;

    }

    .hero-left{

        width:100%;

        text-align:center;

    }

    .hero-brand{

        display:flex;
        justify-content:center;

        margin-bottom:26px;

    }

    .hero-brand img{

        width:330px;
        max-width:80%;

    }

    .hero h1{

        max-width:680px;

        margin-left:auto;
        margin-right:auto;
        margin-bottom:28px;

        font-size:57px;
        line-height:1.03;

    }

    .hero-title-dark,
    .hero-title-blue{

        display:block;

    }

    .hero-brush{

        margin-top:14px;

        padding:7px 42px 11px;

    }

    .hero p{

        max-width:650px;

        margin-left:auto;
        margin-right:auto;
        margin-bottom:32px;

        font-size:18px;
        line-height:29px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-action-btn{

        min-height:58px;

        padding:10px 23px;

        font-size:16px;

    }

    .hero-right{

        width:100%;

        margin-top:0;
        padding-left:0;

        justify-content:center;

    }

    .hero-right img{

        width:760px;
        max-width:105%;

        transform:
            perspective(2200px)
            rotateY(-6deg)
            rotateX(-2deg)
            rotateZ(-1deg);

        transform-origin:center;

    }

}


/* Telefon */
@media (max-width:600px){

    .hero{

        padding-top:105px;
        padding-bottom:65px;

    }

    .hero-grid{

        gap:42px;

    }

    .hero-brand{

        margin-bottom:21px;

    }

    .hero-brand img{

        width:250px;
        max-width:85%;

    }

    .hero h1{

        font-size:39px;
        line-height:1.04;

        letter-spacing:-1.2px;

        margin-bottom:24px;

    }

    .hero-title-blue{

        margin-top:4px;

    }

    .hero-brush{

        margin-top:12px;

        padding:6px 30px 9px;

    }

    .hero-brush::before{

        inset:-2px -12px;

    }

    .hero-brush::after{

        inset:4px -5px;

    }

    .hero p{

        font-size:16px;
        line-height:25px;

        margin-bottom:28px;

    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

        gap:12px;

    }

  .hero-action-btn{

    width:100%;
    max-width:340px;

    min-height:56px;

    justify-content:center;

    padding:9px 18px;

    font-size:15px;

}

    .hero-btn-icon{

        width:36px;
        height:36px;

    }

.hero-right img{

    width:430px;
    max-width:100%;

    transform:
        perspective(2200px)
        rotateY(-3deg)
        rotateX(-1deg)
        rotateZ(-1deg);

}

}


/* Çok küçük telefonlar */
@media (max-width:390px){

    .hero h1{

        font-size:34px;
        letter-spacing:-1px;

    }

    .hero-brand img{

        width:220px;

    }

    .hero-brush{

        padding-left:24px;
        padding-right:24px;

    }

    .hero p{

        font-size:15px;
        line-height:23px;

    }

}

/* ===========================
   FEATURES RESPONSIVE
=========================== */

@media(max-width:1100px){

    .feature-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .section-title h2{

        font-size:43px;

    }

}


@media(max-width:768px){

    .features{

        padding:80px 0;

    }

    .section-title{

        margin-bottom:42px;

    }

    .feature-badge{

        padding:9px 15px;

        font-size:12px;

    }

    .section-title h2{

        font-size:34px;
        line-height:1.18;

        letter-spacing:-1px;

    }

    .section-title p{

        font-size:16px;
        line-height:27px;

    }

    .feature-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .feature-card{

        padding:27px 23px 24px;

        border-radius:22px;

    }

    .feature-head{

        gap:14px;

        margin-bottom:19px;

    }

    .feature-icon{

        width:57px;
        height:57px;

        border-radius:17px;

    }

    .feature-icon i{

        font-size:27px;

    }

    .feature-card h3{

        font-size:21px;

    }

    .feature-card > p{

        min-height:auto;

        margin-bottom:20px;
        padding-bottom:18px;

        font-size:15px;
        line-height:25px;

    }

    .feature-list{

        gap:11px;

        margin-bottom:21px;

    }

    .feature-list li{

        padding-left:27px;

        font-size:14.5px;

    }

    .feature-tags{

        gap:7px;

        padding-top:18px;

    }

    .feature-tags span{

        min-height:33px;

        padding:6px 9px;

        font-size:11.5px;

    }

}


@media(max-width:390px){

    .section-title h2{

        font-size:30px;

    }

    .feature-card{

        padding-left:19px;
        padding-right:19px;

    }

    .feature-head{

        align-items:flex-start;

    }

    .feature-tags span{

        white-space:normal;

    }

}

/* ==========================
   KULLANIM VİDEOLARI
========================== */

.video-guides{

    padding:120px 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(25,118,255,.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7faff,
            #ffffff
        );

}

.video-grid{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:28px;

}

.video-card{

    display:block;

    overflow:hidden;

    border:1px solid #dfe9f6;
    border-radius:25px;

    background:#ffffff;

    color:inherit;
    text-decoration:none;

    box-shadow:
        0 18px 48px rgba(26,54,93,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.video-card:hover{

    transform:translateY(-7px);

    border-color:#c7dcfa;

    box-shadow:
        0 28px 65px rgba(26,75,145,.14);

}

.video-thumbnail{

    position:relative;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#eaf3ff;

}

.video-thumbnail img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .4s ease;

}

.video-card:hover .video-thumbnail img{

    transform:scale(1.045);

}

.video-thumbnail::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(8,31,68,.02),
            rgba(8,31,68,.30)
        );

}

.video-number{

    position:absolute;

    top:18px;
    left:18px;

    z-index:2;

    padding:8px 12px;

    border-radius:50px;

    background:rgba(255,255,255,.93);

    color:#1976ff;

    font-size:12px;
    font-weight:800;

    letter-spacing:.5px;

    box-shadow:0 7px 20px rgba(0,0,0,.10);

}

.video-play{

    position:absolute;

    top:50%;
    left:50%;

    z-index:3;

    width:72px;
    height:72px;

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

    border-radius:50%;

    background:#1976ff;

    color:white;

    font-size:38px;

    box-shadow:
        0 15px 35px rgba(25,118,255,.35);

    transform:translate(-50%,-50%);

    transition:
        transform .3s ease,
        background-color .3s ease;

}

.video-play i{

    margin-left:4px;

}

.video-card:hover .video-play{

    transform:
        translate(-50%,-50%)
        scale(1.10);

    background:#0968ed;

}

.video-thumbnail-placeholder{

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

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.23),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #0d66e8,
            #278cff
        );

}

.video-placeholder-content{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:14px;

    color:white;

    opacity:.78;

}

.video-placeholder-content i{

    font-size:72px;

}

.video-placeholder-content span{

    font-size:23px;
    font-weight:800;

}

.video-info{

    display:flex;

    gap:18px;

    padding:27px;

}

.video-icon{

    width:55px;
    height:55px;

    flex-shrink:0;

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

    border-radius:17px;

    background:#edf5ff;

    color:#1976ff;

    font-size:25px;

}

.video-info h3{

    margin:1px 0 10px;

    color:#101828;

    font-size:23px;
    font-weight:800;

}

.video-info p{

    margin:0 0 17px;

    color:#667085;

    font-size:16px;
    line-height:27px;

}

.video-watch{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#1976ff;

    font-size:14px;
    font-weight:800;

}

.video-watch i{

    transition:transform .25s ease;

}

.video-card:hover .video-watch i{

    transform:translateX(5px);

}

.playlist-button{

    display:flex;
    justify-content:center;

    margin-top:38px;

}

.playlist-button a{

    min-height:56px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:11px;

    padding:12px 25px;

    border:1px solid #d8e6f8;
    border-radius:13px;

    background:#ffffff;

    color:#1976ff;

    font-size:15px;
    font-weight:800;

    text-decoration:none;

    box-shadow:0 12px 30px rgba(25,118,255,.08);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.playlist-button a:hover{

    transform:translateY(-3px);

    border-color:#aacdfb;

    box-shadow:0 17px 38px rgba(25,118,255,.14);

}

.playlist-button .bi-youtube{

    font-size:22px;

}


@media(max-width:850px){

    .video-guides{

        padding:80px 0;

    }

    .video-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

}


@media(max-width:600px){

    .video-guides{

        padding:70px 0;

    }

    .video-card{

        border-radius:21px;

    }

    .video-play{

        width:62px;
        height:62px;

        font-size:32px;

    }

    .video-number{

        top:13px;
        left:13px;

        padding:7px 10px;

        font-size:11px;

    }

    .video-info{

        gap:14px;

        padding:22px 19px;

    }

    .video-icon{

        width:48px;
        height:48px;

        border-radius:15px;

        font-size:22px;

    }

    .video-info h3{

        font-size:20px;

    }

    .video-info p{

        font-size:15px;
        line-height:25px;

    }

    .video-placeholder-content i{

        font-size:55px;

    }

    .video-placeholder-content span{

        font-size:18px;

    }

    .playlist-button a{

        width:100%;
        max-width:340px;

        padding-left:15px;
        padding-right:15px;

        text-align:center;

    }

}

/* ===================================
   DRIVER SAYFASI ETİKET POPUP
=================================== */

#labelPopup{

    position:fixed;

    inset:0;

    z-index:999999;

    display:none;

    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(15,23,42,.68);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

}

#labelPopup.show{

    display:flex;

}

body.popup-open{

    overflow:hidden;

}


/* POPUP ANA KUTU */

#labelPopup .label-popup{

    position:relative;

    width:100%;
    max-width:940px;

    max-height:calc(100vh - 48px);

    overflow:auto;

    border:1px solid #dfe7f1;
    border-radius:24px;

    background:#ffffff;

    box-shadow:0 32px 90px rgba(15,23,42,.28);

    animation:labelPopupOpen .32s ease;

}

@keyframes labelPopupOpen{

    from{

        opacity:0;

        transform:
            translateY(18px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* KAPATMA BUTONU */

#labelPopup .label-popup-close{

    position:absolute;

    top:16px;
    right:16px;

    z-index:20;

    width:40px;
    height:40px;

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

    padding:0;

    border:1px solid #dde6f0;
    border-radius:11px;

    background:#ffffff;

    color:#526071;

    cursor:pointer;

    font-size:17px;

    transition:
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease;

}

#labelPopup .label-popup-close:hover{

    border-color:#bfd8fb;

    background:#eef6ff;

    color:#1976ff;

}


/* İÇ DÜZEN */

#labelPopup .label-popup-content{

    display:grid;

    grid-template-columns:minmax(0, 1.45fr) minmax(260px, .75fr);

    align-items:center;

    gap:52px;

    padding:58px 62px 54px;

}


/* SOL METİN TARAFI */

#labelPopup .label-popup-text{

    min-width:0;

}

#labelPopup .label-ad-badge{

    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:18px;
    padding:8px 13px;

    border:1px solid #d7e6f8;
    border-radius:9px;

    background:#f4f8fd;

    color:#1976ff;

    font-size:11px;
    font-weight:800;

    letter-spacing:.7px;

}

#labelPopup .label-ad-badge i{

    font-size:13px;

}

#labelPopup .label-popup-text h2{

    margin:0 0 18px;

    color:#111827;

    font-size:42px;
    font-weight:800;

    line-height:1.12;
    letter-spacing:-1.3px;

}

#labelPopup .label-popup-text h2 span{

    display:block;

    color:#1976ff;

}

#labelPopup .label-popup-text > p{

    max-width:560px;

    margin:0 0 24px;

    color:#667085;

    font-size:15.5px;
    line-height:27px;

}


/* AVANTAJLAR */

#labelPopup .label-ad-features{

    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:11px 18px;

    margin-bottom:28px;

}

#labelPopup .label-ad-features span{

    display:inline-flex;
    align-items:center;

    gap:7px;

    color:#344054;

    font-size:13px;
    font-weight:600;

}

#labelPopup .label-ad-features i{

    color:#1976ff;

    font-size:15px;

}


/* WHATSAPP BUTONU */

#labelPopup .label-ad-button{

    min-height:54px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:11px 22px;

    border-radius:11px;

    background:#20b65a;

    color:#ffffff;

    font-size:14px;
    font-weight:800;

    text-decoration:none;

    box-shadow:0 13px 27px rgba(32,182,90,.23);

    transition:
        transform .22s ease,
        background-color .22s ease,
        box-shadow .22s ease;

}

#labelPopup .label-ad-button .bi-whatsapp{

    font-size:21px;

}

#labelPopup .label-ad-button .bi-arrow-right{

    transition:transform .22s ease;

}

#labelPopup .label-ad-button:hover{

    transform:translateY(-2px);

    background:#19a650;

    box-shadow:0 17px 34px rgba(32,182,90,.29);

}

#labelPopup .label-ad-button:hover .bi-arrow-right{

    transform:translateX(4px);

}


/* SAĞ ETİKET ÖNİZLEME */

#labelPopup .label-popup-visual{

    min-width:0;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:17px;

}


/* İki farklı HTML sınıfını da destekler */

.label-preview-card,
.label-product-card{

    width:100%;
    max-width:285px;

    overflow:hidden;

    border:1px solid #d8e2ee;
    border-radius:16px;

    background:#f8fafc;

    box-shadow:0 16px 38px rgba(22,46,80,.11);

    transform:rotate(-2deg);

}

.label-preview-head,
.label-product-top{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:13px 15px;

    border-bottom:1px solid #dce5ef;

    background:#edf4fb;

}

.label-preview-head span,
.label-product-top span{

    color:#1976ff;

    font-size:13px;
    font-weight:800;

}

.label-preview-head small,
.label-product-top small{

    color:#6b7788;

    font-size:11px;
    font-weight:600;

}

.label-preview-body,
.label-product-body{

    margin:16px;

    padding:18px 16px 15px;

    border:1px dashed #b9c6d6;
    border-radius:7px;

    background:#ffffff;

    text-align:left;

}

.label-preview-body strong,
.label-product-body strong{

    display:block;

    margin-bottom:11px;

    color:#111827;

    font-size:18px;
    font-weight:800;

    letter-spacing:.3px;

}

.label-preview-body p,
.label-product-body > span{

    display:block;

    margin:0 0 5px;

    color:#4b5565;

    font-size:12px;
    line-height:1.4;

}

.label-preview-barcode,
.label-product-barcode{

    width:100%;
    height:43px;

    margin:14px 0 10px;

    background:
        repeating-linear-gradient(
            90deg,
            #111827 0 2px,
            transparent 2px 4px,
            #111827 4px 7px,
            transparent 7px 10px
        );

}

.label-preview-body small,
.label-product-body small{

    display:block;

    color:#1976ff;

    font-size:10px;
    font-weight:700;

    text-align:center;

}

.label-preview-note,
.label-product-caption{

    max-width:285px;

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

    gap:8px;

    color:#526071;

    font-size:12px;
    font-weight:600;

    line-height:1.4;
    text-align:center;

}

.label-preview-note i,
.label-product-caption i{

    flex-shrink:0;

    color:#1eaf59;

    font-size:16px;

}


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

@media(max-width:850px){

    #labelPopup{

        padding:18px;

    }

    #labelPopup .label-popup{

        max-width:620px;

        border-radius:22px;

    }

    #labelPopup .label-popup-content{

        grid-template-columns:1fr;

        gap:34px;

        padding:56px 34px 40px;

        text-align:center;

    }

    #labelPopup .label-popup-text > p{

        max-width:520px;

        margin-left:auto;
        margin-right:auto;

    }

    #labelPopup .label-ad-features{

        justify-content:center;

    }

    #labelPopup .label-popup-text h2{

        font-size:35px;

    }

    .label-preview-card,
    .label-product-card{

        max-width:270px;

    }

}


/* ===================================
   MOBİL
=================================== */

@media(max-width:600px){

    #labelPopup{

        align-items:flex-start;

        padding:12px;

        overflow-y:auto;

    }

    #labelPopup .label-popup{

        margin:14px 0;

        max-height:none;

        border-radius:20px;

    }

    #labelPopup .label-popup-close{

        top:12px;
        right:12px;

        width:38px;
        height:38px;

    }

    #labelPopup .label-popup-content{

        gap:27px;

        padding:56px 18px 27px;

    }

    #labelPopup .label-ad-badge{

        margin-bottom:15px;

        font-size:10px;

    }

    #labelPopup .label-popup-text h2{

        font-size:29px;

        line-height:1.16;
        letter-spacing:-.8px;

    }

    #labelPopup .label-popup-text > p{

        font-size:14px;
        line-height:23px;

    }

    #labelPopup .label-ad-features{

        flex-direction:column;
        align-items:center;

        gap:9px;

    }

    #labelPopup .label-ad-button{

        width:100%;
        max-width:330px;

        padding-left:13px;
        padding-right:13px;

        font-size:13px;

    }

    .label-preview-card,
    .label-product-card{

        max-width:245px;

    }

}

span.section-kicker{

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

    width:auto !important;

    gap:8px !important;

    margin-bottom:22px !important;
    padding:9px 15px !important;

    border:1px solid #d6e7ff !important;
    border-radius:50px !important;

    background:#edf5ff !important;

    color:#1976ff !important;

    font-size:13px !important;
    font-weight:800 !important;

    line-height:1 !important;
    letter-spacing:.5px !important;

}

span.section-kicker i{

    color:#1976ff !important;

    font-size:14px !important;

}

/* ===================================
   DRIVER KART KESİN DÜZELTME
=================================== */

.hero .driver-boxes{

    width:46% !important;

    display:flex !important;
    flex-direction:column !important;

    gap:28px !important;

}

.hero .driver-card{

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;

    display:block !important;

    padding:24px !important;

    box-sizing:border-box !important;

}

.hero .driver-card-head{

    width:100% !important;

    display:flex !important;
    flex-direction:row !important;

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

    gap:15px !important;

    margin:0 0 18px !important;

    text-align:left !important;

}

.hero .driver-card-head > i{

    width:50px !important;
    height:50px !important;

    flex:0 0 50px !important;

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

    margin:0 !important;
    padding:0 !important;

    border-radius:14px !important;

    background:#edf5ff !important;

    color:#1976ff !important;

    font-size:26px !important;
    line-height:1 !important;

}

.hero .driver-card-head h3{

    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#101828 !important;

    font-size:20px !important;
    font-weight:800 !important;

    line-height:1.3 !important;

    text-align:left !important;

}

.hero .driver-card .driver-btn{

    width:100% !important;
    min-height:48px !important;

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

    margin:0 !important;
    padding:10px 18px !important;

    box-sizing:border-box !important;

    border-radius:9px !important;

    text-align:center !important;

}

@media(max-width:768px){

    .hero .driver-boxes{

        width:100% !important;
        max-width:390px !important;

        margin:0 auto !important;

        gap:22px !important;

    }

    .hero .driver-card{

        width:100% !important;
        max-width:390px !important;

        padding:22px 20px !important;

    }

    .hero .driver-card-head{

        gap:13px !important;

        margin-bottom:17px !important;

    }

    .hero .driver-card-head > i{

        width:48px !important;
        height:48px !important;

        flex-basis:48px !important;

        font-size:24px !important;

    }

    .hero .driver-card-head h3{

        font-size:19px !important;

    }

    .hero .driver-card .driver-btn{

        min-height:48px !important;

        font-size:15px !important;

    }

}

/* ===================================
   SABİT WHATSAPP BUTONU
=================================== */

.whatsapp-float{

    position:fixed;

    right:24px;
    bottom:24px;

    z-index:99990;

    width:62px;
    height:62px;

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

    border-radius:50%;

    background:#25d366;

    color:#ffffff;

    text-decoration:none;

    box-shadow:
        0 14px 32px rgba(37,211,102,.34);

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;

}

.whatsapp-float > i{

    font-size:31px;
    line-height:1;

}

.whatsapp-float:hover{

    transform:translateY(-4px) scale(1.04);

    background:#20bd5a;

    box-shadow:
        0 18px 38px rgba(37,211,102,.42);

}


/* Hafif nabız halkası */

.whatsapp-float::before{

    content:"";

    position:absolute;

    inset:-7px;

    z-index:-1;

    border:2px solid rgba(37,211,102,.36);
    border-radius:50%;

    animation:whatsappPulse 2s infinite;

}

@keyframes whatsappPulse{

    0%{

        transform:scale(.85);
        opacity:.85;

    }

    70%{

        transform:scale(1.22);
        opacity:0;

    }

    100%{

        transform:scale(1.22);
        opacity:0;

    }

}


/* Masaüstünde açıklama balonu */

.whatsapp-tooltip{

    position:absolute;

    right:75px;

    width:max-content;
    max-width:230px;

    padding:10px 14px;

    border:1px solid #e1e8f0;
    border-radius:10px;

    background:#ffffff;

    color:#344054;

    font-size:13px;
    font-weight:600;

    box-shadow:
        0 10px 28px rgba(15,23,42,.13);

    opacity:0;
    visibility:hidden;

    transform:translateX(8px);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;

    pointer-events:none;

}

.whatsapp-tooltip::after{

    content:"";

    position:absolute;

    top:50%;
    right:-6px;

    width:11px;
    height:11px;

    border-top:1px solid #e1e8f0;
    border-right:1px solid #e1e8f0;

    background:#ffffff;

    transform:
        translateY(-50%)
        rotate(45deg);

}

.whatsapp-float:hover .whatsapp-tooltip{

    opacity:1;
    visibility:visible;

    transform:translateX(0);

}


/* Mobil */

@media(max-width:600px){

    .whatsapp-float{

        right:17px;
        bottom:17px;

        width:56px;
        height:56px;

    }

    .whatsapp-float > i{

        font-size:28px;

    }

    .whatsapp-tooltip{

        display:none;

    }

}

/* YÖNETİN FIRÇA NEFES ANİMASYONU */

.hero-brush{
    animation:brushBreath 3.2s ease-in-out infinite;
    transform-origin:center;
}

@keyframes brushBreath{

    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.025);
    }

}