/* Genel header stili */
.site-header {
    background-color: #fff;
    width: 100%;
}

.header-container {
    width: 1400px;
    margin: 0 auto; /* ortalar */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
}

.main-nav a {
    text-decoration: none;
    font-size: 16px;
    color: #333;
}

/* Mobil buton için */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 1400px) {
    .header-container {
        width: 95%;
    }
}



/* Logo */
.logo img {
    max-height: 60px;
    width: auto;
}

/* Menü */
.main-nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    text-decoration: none;
    font-weight: 600;
    color: #333;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: #0073e6;
}

/* Mobil menü butonu */
.menu-toggle {
    display: none;
    font-size: 34px;
    background: none;
    border: none;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: #fff;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 15px;
    }

    .menu-toggle {
        display: block;
    }

    /* Menü aktif olduğunda */
    .main-nav.active {
        display: block;
    }
}
/* ANA BÖLÜM – FLEX TABLO YERİNE */
.hero-section {
    width: 100%;
    background-color: #2794F1;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.hero-section img {
    max-width: 90%;
    height: auto;
    border-radius: 4px;
    }/* İKİLİ GÖRSEL ALANI (TABLE YERİNE FLEX) */
.dual-section {
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    padding: 40px 0;
}

.dual-item {
    flex: 1 1 300px;          /* Küçük ekranda daralır, büyükte genişler */
    max-width: 400px;         /* Çok büyümesin diye üst sınır */
    display: flex;
    justify-content: center;
}

.dual-item img {
    width: 90%;
    height: auto;
    display: block;
    border-radius: 4px;
    color: #FFFFFF;
}@media (max-width: 768px) {
    .dual-section {
        padding: 20px 10px;
        gap: 20px;
    }
}
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.responsive-table {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
}

.content-cell {
    text-align: left;
    font-weight: normal;
    font-size: 16px;
    padding: 20px;
    line-height: 1.6;
}

/* Mobil uyum */
@media (max-width: 768px) {
    .content-cell {
        font-size: 15px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .content-cell {
        font-size: 14px;
        padding: 12px;
    }
}
.footer-table {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
}

.footer-img img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-space {
    height: 30px;
}

.footer-text {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    padding: 20px;
    font-weight: normal;
}

.footer-title {
    font-size: 26px;
    font-weight: bold;
}

.light {
    font-weight: 300;
}

.address,
.mail {
    display: block;
    font-size: 15px;
}

/* 📱 Mobil uyum */
@media (max-width: 768px) {

    .footer-text {
        font-size: 14px;
        padding: 15px;
    }

    .footer-title {
        font-size: 20px;
    }

    .address,
    .mail {
        font-size: 13px;
    }
}
/* Tam genislik mavi alan */
.full-blue {
    width: 100%;
    background-color: #2794F1;
}

/* Içerik alani */
.blue-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Görsel responsive */
.blue-inner img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 992px) {
    .brands-inner tr {
        display: flex;
        flex-wrap: wrap;
    }

    .brands-inner th {
        width: 50%;
    }
}

@media (max-width: 376px) {
    .brands-inner th {
        width: 100%;
    }
}
/* MARKALAR DIS KAPSAYICI */
.brands-inner {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* Içteki 1300px tabloyu esnek yap */
.brands-inner table {
    width: 100%;
    height: auto;
}

/* Hücreler */
.brands-inner th {
    text-align: center;
    padding: 15px;
}

/* Görseller responsive */
.brands-inner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* TABLET */
@media (max-width: 1024px) {
    .brands-inner th {
        padding: 10px;
    }
}

/* MOBIL */
@media (max-width: 768px) {

    /* Tabloyu blok yap */
    .brands-inner table,
    .brands-inner tbody,
    .brands-inner tr {
        display: block;
        width: 100%;
    }

    /* Hücreleri %100 yap */
    .brands-inner th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .brands-inner img {
        max-width: 70%;
    }
}
/* ANA TABLO */
.services-table {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* Hücreler */
.services-table th {
    padding: 15px;
    text-align: center;
}

/* Görseller responsive */
.services-table img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* TABLET */
@media (max-width: 1024px) {
    .services-table th {
        padding: 10px;
    }
}

/* MOBIL */
@media (max-width: 768px) {

    /* Tabloyu blok yap */
    .services-table,
    .services-table tbody,
    .services-table tr {
        display: block;
        width: 100%;
    }

    .services-table th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Büyük görseli de hizala */
    .services-table th[colspan] img {
        max-width: 90%;
    }
}
body {
    padding-top: 80px; /* Header yüksekligi kadar bosluk açin */
}
a {
  text-decoration: none;   /* Alt çizgiyi kaldirir */
  color: inherit;          /* Yazi rengini bulundugu yerden miras alir */
}
.dual-section .dual-item img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 8px;
}

.dual-section .dual-item img:hover {
    transform: scale(1.08);       /* hover aninda hafif büyür */
    box-shadow: 0 8px 18px rgba(0,0,0,0.25); /* gölge efekti */
    text-align: center;
}
.markalar img {
  width: 360px;
  height: 270px;
  object-fit: contain; /* Görsel bozulmadan sigar */
}
.site-header {
    background-color: #fff;
    width: 100%;
    position: fixed;     /* Yukariya sabitle */
    top: 0;
    left: 0;
    z-index: 9999;       /* Içerik üzerine çiksin */
    border-bottom: 1px solid #e5e5e5; /* Hafif alt çizgi (istege bagli) */
}
.site-header {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* Hamburger gizli (desktop) */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: #000;
    margin: 5px 0;
    transition: 0.4s;
}

/* X ikon */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* MOBIL */
@media (max-width: 768px) {

    .menu-toggle {
        display: block; margin-right: 20px;
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        border-top: 1px solid #ddd;
    }

    .main-nav.active {
        max-height: 300px;
    }

    .main-nav ul {
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .main-nav li {
        border-bottom: 1px solid #e5e5e5; /* yazilar arasi çizgi */
        text-align: center;
    }

    .main-nav li:last-child {
        border-bottom: none;
    }

    .main-nav a {
        display: block;
        padding: 15px;
    }
}
body {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-weight: 400;
}
.hizmetler{
    max-width:800px;
    margin:40px auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.kart{
    background:#FFFFFF;
    padding:25px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 3px 10px rgba(0,0,0,0.14);
    transition:.3s;
}

.kart:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.26);
}

.kart h3{
    color:#FB6C0F;
    margin-bottom:15px;
    font-size:22px;
}

.kart p{
    color:#555;
    line-height:1.7;
    font-size:16px;
}

@media (max-width:768px){

    .hizmetler{
        grid-template-columns:1fr;
    }

}
.baslik-tablo{
    width:100%;
    max-width:850px;
    margin:0 auto;
    border-collapse:collapse;
}

.baslik-tablo th{
    background:#EF1C53;
    color:#fff;
    padding:15px;
    font-size:24px;
    font-weight:bold;
    text-align:center;
}
.paketler{
    width:100%;
    max-width:800px;
    margin:30px auto;
    border-collapse:separate;
    border-spacing:10px;
}

.paketler th{
    padding:20px;
    text-align:center;
    vertical-align:top;
    border-radius:12px;
    font-size:16px;
}

.paketler tr:last-child th{
    color:#fff;
    font-size:24px;
    font-weight:bold;
    padding:15px;
}

@media (max-width:800px){

    .paketler,
    .paketler tbody,
    .paketler tr,
    .paketler th{
        display:block;
        width:100%;
        box-sizing:border-box;
    }

    .paketler tr{
        margin-bottom:25px;
    }

    .paketler tr:last-child{
        margin-top:-20px;
    }

}
/* Çalışma Süreci */

.surec{
    max-width:1200px;
    margin:40px auto;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.adim{
    background:#F5F7FA;
    padding:30px 20px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
    transition:.3s;
}

.adim:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

/* Numara */

.no{
    width:55px;
    height:55px;
    margin:0 auto 20px;
    background:#04B6D0;
    color:#fff;
    border-radius:50%;
    font-size:24px;
    font-weight:bold;
    line-height:55px;
}

/* Başlık */

.adim h3{
    color:#FB6C0F;
    font-size:22px;
    margin-bottom:15px;
    line-height:1.4;
}

/* Açıklama */

.adim p{
    color:#555;
    font-size:16px;
    line-height:1.7;
    margin:0;
}

/* Tablet */

@media (max-width:992px){

    .surec{
        grid-template-columns:repeat(2,1fr);
    }

}

/* Telefon */

@media (max-width:768px){

    .surec{
        grid-template-columns:1fr;
    }

}
.platforms-section{
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
    text-align:center;
}

.platforms-section h2{
    font-size:34px;
    font-weight:700;
    color:#2c3e50;
    margin-bottom:40px;
}

.platforms-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
}

.platform-card{
    background:#fff;
    border-radius:18px;
    padding:35px 20px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.35s;
    cursor:default;
}

.platform-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.platform-card i{
    font-size:48px;
    margin-bottom:18px;
    display:block;
}

.platform-card span{
    font-size:20px;
    font-weight:600;
    color:#444;
}

/* Renkler */

.instagram i{
    color:#E4405F;
}

.facebook i{
    color:#1877F2;
}

.linkedin i{
    color:#0A66C2;
}

.google i{
    color:#34A853;
}

.youtube i{
    color:#FF0000;
}

/* Mobil */

@media(max-width:768px){

    .platforms-section h2{
        font-size:28px;
    }

    .platform-card{
        padding:30px 15px;
    }

    .platform-card i{
        font-size:42px;
    }

    .platform-card span{
        font-size:18px;
    }

}
.social-section{
    padding:70px 20px;
    background:linear-gradient(135deg,#eef5ff,#f7fbff);
    text-align:center;
}

.social-section h2{
    font-size:40px;
    margin-bottom:45px;
    color:#243447;
    font-weight:700;
}

.social-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:28px;
    max-width:1200px;
    margin:auto;
}

.social-card{

    backdrop-filter:blur(14px);
    background:rgba(255,255,255,.65);
    border:1px solid rgba(255,255,255,.7);
    border-radius:24px;

    padding:35px 20px;

    transition:.4s;
    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.social-card:hover{

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

    box-shadow:0 25px 55px rgba(0,0,0,.18);

}

.icon{

    width:90px;
    height:90px;

    border-radius:50%;

    margin:auto auto 20px;

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

    color:#fff;

    transition:.4s;

}

.social-card:hover .icon{

    transform:rotate(12deg) scale(1.12);

}

.icon svg{

    width:42px;
    height:42px;

}

/* Renkler */

.instagram .icon{
    background:linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045);
}

.facebook .icon{
    background:#1877F2;
}

.linkedin .icon{
    background:#0A66C2;
}

.google .icon{
    background:#34A853;
}

.youtube .icon{
    background:#FF0000;
}

.social-card h3{

    margin:0;

    font-size:22px;

    color:#243447;

}

@media(max-width:768px){

.social-section h2{

font-size:30px;

}

.social-card{

padding:28px 15px;

}

.icon{

width:75px;
height:75px;

}

.icon svg{

width:35px;
height:35px;

}

.social-card h3{

font-size:19px;

}

}
.advantages-section{

    max-width:1100px;
    margin:70px auto;
    padding:0 20px;

}

.advantages-section h2{

    text-align:center;
    font-size:38px;
    color:#243447;
    margin-bottom:45px;

}

.advantages-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:20px;

}

.advantage-item{

    display:flex;
    align-items:center;

    padding:20px 24px;

    background:#fff;

    border-radius:18px;

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

    transition:.35s;

}

.advantage-item:hover{

    transform:translateY(-6px);

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

}

.check{

    min-width:44px;
    width:44px;
    height:44px;

    border-radius:50%;

    background:#18b85b;

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

    color:#fff;

    margin-right:18px;

}

.check svg{

    width:26px;
    height:26px;

}

.advantage-item span:last-child{

    font-size:19px;
    font-weight:600;
    color:#2f3b52;
    line-height:1.5;

}

@media(max-width:768px){

.advantages-section h2{

font-size:30px;

}

.advantage-item{

padding:18px;

}

.advantage-item span:last-child{

font-size:17px;

}

.check{

width:40px;
height:40px;
min-width:40px;

}

}
.cta-section{

    padding:80px 20px;

}

.cta-box{

    max-width:1000px;
    margin:auto;

    text-align:center;

    padding:60px 40px;

    border-radius:28px;

    background:linear-gradient(135deg,#1f3b73,#2f5fa7);

    color:#fff;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.cta-box h2{

    font-size:38px;
    line-height:1.4;
    margin-bottom:20px;
    font-weight:700;

}

.cta-box p{

    font-size:20px;
    color:rgba(255,255,255,.90);
    margin-bottom:40px;

}

.cta-button{

    display:inline-block;

    background:#FB6C0F;

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    font-size:20px;

    font-weight:700;

    border-radius:60px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(251,108,15,.35);

}

.cta-button:hover{

    transform:translateY(-5px);

    background:#ff7d2a;

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

}

@media(max-width:768px){

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:28px;

}

.cta-box p{

font-size:18px;

}

.cta-button{

width:100%;
padding:18px 20px;
font-size:18px;

}

}
.pricing{

max-width:1200px;
margin:80px auto;
display:flex;
gap:35px;
justify-content:center;
flex-wrap:wrap;
padding:20px;

}



.card{

position:relative;
width:340px;

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

border-radius:28px;

overflow:hidden;

padding:45px 35px;

transition:.45s;

box-shadow:

0 20px 40px rgba(0,0,0,.08),

0 0 0 1px rgba(255,255,255,.4) inset;

animation:fade .8s ease;

}



.card:hover{

transform:translateY(-14px);

box-shadow:

0 35px 70px rgba(0,0,0,.18);

}



.card::before{

content:"";

position:absolute;

width:180px;

height:180px;

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

border-radius:50%;

top:-70px;

left:-70px;

filter:blur(25px);

transition:.7s;

}



.card:hover::before{

transform:scale(1.4);

}



.plan{

font-size:34px;

font-weight:800;

letter-spacing:2px;

color:#0A1B43;

margin-bottom:8px;

}



.subtitle{

font-size:15px;

color:#7a7a7a;

margin-bottom:30px;

}



.card ul{

padding:0;

margin:0;

list-style:none;

}



.card li{

padding:15px 0;

border-bottom:1px solid #ececec;

font-size:16px;

color:#444;

}



.card li:last-child{

border:none;

}



.card a{

display:block;

margin-top:35px;

padding:16px;

border-radius:60px;

text-align:center;

text-decoration:none;

font-weight:bold;

font-size:16px;

background:linear-gradient(135deg,#0A1B43,#214b9c);

color:#fff;

transition:.35s;

}



.card a:hover{

transform:scale(1.04);

background:linear-gradient(135deg,#C8A568,#b68d47);

}



.popular{

transform:scale(1.05);

border:2px solid rgba(200,165,104,.6);

}



.popular:hover{

transform:scale(1.08) translateY(-12px);

}



.badge{

position:absolute;

top:20px;

right:-55px;

padding:12px 60px;

background:linear-gradient(135deg,#FFD66B,#D7A63E);

color:#222;

font-size:12px;

font-weight:bold;

letter-spacing:1px;

transform:rotate(40deg);

box-shadow:0 10px 25px rgba(0,0,0,.15);

}



@keyframes fade{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@media(max-width:1100px){

.card{

width:100%;

max-width:450px;

}

.popular{

transform:none;

}

.popular:hover{

transform:translateY(-12px);

}

}