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

:root{
--primary:#6C4CF7;
--primary-dark:#5638dc;
--dark:#181A20;
--text:#2B2F38;
--muted:#6E7585;
--bg:#F7F8FC;
--white:#fff;
--border:#e8eaf1;
}

html{scroll-behavior:smooth}
body{
font-family:Inter,Arial,sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button{font:inherit}

header{
min-height:100vh;
background:linear-gradient(135deg,#fff,#f3f5ff);
}

.navbar{
width:1200px;
max-width:95%;
margin:auto;
height:90px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
display:block;
font-size:30px;
font-weight:800;
color:var(--primary);
line-height:0;
}

.logo-img{
display:block;
height:40px;
width:auto;
max-width:100%;
}

.nav-links{
display:flex;
gap:30px;
align-items:center;
}

.nav-links a{
font-weight:600;
color:#4b5060;
transition:.2s;
}

.nav-links a:hover{color:var(--primary)}

.login-btn{
background:var(--primary);
color:#fff;
padding:12px 22px;
border-radius:10px;
font-weight:600;
}

.hero{
width:1200px;
max-width:95%;
margin:auto;
min-height:calc(100vh - 90px);
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
}

.hero-left{flex:1}
.hero-right{
flex:1;
display:flex;
justify-content:center;
}

.badge{
display:inline-block;
background:#ECE8FF;
color:var(--primary);
padding:10px 18px;
border-radius:999px;
font-weight:600;
margin-bottom:25px;
}

.hero h1{
font-size:64px;
line-height:1.1;
margin-bottom:25px;
font-weight:800;
}

.hero h1 span{color:var(--primary)}

.hero p{
font-size:22px;
color:var(--muted);
line-height:1.7;
max-width:650px;
}

.hero-buttons{
margin-top:45px;
display:flex;
gap:20px;
flex-wrap:wrap;
}

.primary-btn,.secondary-btn{
padding:18px 34px;
border-radius:12px;
font-weight:700;
display:inline-block;
}

.primary-btn{
background:var(--primary);
color:#fff;
}

.primary-btn:hover{background:var(--primary-dark)}

.secondary-btn{
border:2px solid var(--primary);
color:var(--primary);
}

.hero-right img{
width:380px;
max-width:100%;
border-radius:35px;
box-shadow:0 40px 80px rgba(0,0,0,.18);
}

.container{
width:1200px;
max-width:95%;
margin:auto;
}

.landing-section{
padding:110px 0;
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title span{
color:var(--primary);
font-size:13px;
font-weight:800;
letter-spacing:2px;
}

.section-title h2{
font-size:42px;
line-height:1.2;
margin:15px auto;
max-width:850px;
}

.section-title p{
color:var(--muted);
max-width:720px;
margin:auto;
line-height:1.8;
font-size:17px;
}

/* ÖZELLİKLER */
.features-section{background:#fff}

.feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}

.feature-card{
background:#fff;
border:1px solid var(--border);
border-radius:20px;
padding:30px;
box-shadow:0 10px 30px rgba(28,31,45,.05);
transition:.25s;
}

.feature-card:hover{
transform:translateY(-5px);
box-shadow:0 18px 40px rgba(28,31,45,.10);
}

.feature-icon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:#eeeaff;
color:var(--primary);
font-size:22px;
font-weight:800;
margin-bottom:20px;
}

.feature-card h3{
font-size:20px;
margin-bottom:10px;
}

.feature-card p{
color:var(--muted);
line-height:1.7;
}

/* DEMOLAR */
.demo-section{
padding:110px 0;
background:#f8f9fc;
}

.demo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}

.demo-card{
position:relative;
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.25s;
}

.demo-card:hover{
transform:translateY(-8px);
box-shadow:0 24px 60px rgba(0,0,0,.15);
}

.demo-card>img{
display:block;
width:100%;
height:240px;
object-fit:cover;
}

.demo-content{
padding:28px;
}

.demo-content h3{
font-size:25px;
margin-bottom:10px;
}

.demo-content p{
color:#666;
margin-bottom:22px;
}

.demo-button{
display:inline-block;
background:var(--primary);
color:#fff;
padding:13px 24px;
border-radius:10px;
font-weight:700;
}

.demo-logo{
position:absolute;
left:28px;
top:198px;
width:82px;
height:82px;
border-radius:50%;
overflow:hidden;
background:#fff;
padding:6px;
box-shadow:0 10px 30px rgba(0,0,0,.18);
z-index:5;
}

.demo-logo img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
}

/* FİYATLAR */
.pricing-section{background:#fff}

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
align-items:stretch;
}

.price-card{
position:relative;
border:1px solid var(--border);
border-radius:22px;
padding:32px;
background:#fff;
box-shadow:0 12px 35px rgba(25,27,40,.06);
display:flex;
flex-direction:column;
}

.price-card.featured{
border:2px solid var(--primary);
transform:translateY(-8px);
box-shadow:0 22px 55px rgba(108,76,247,.16);
}

.popular{
position:absolute;
top:0;
left:50%;
transform:translate(-50%,-50%);
background:var(--primary);
color:#fff;
padding:7px 16px;
border-radius:999px;
font-size:11px;
font-weight:800;
white-space:nowrap;
}

.price-label{
font-size:12px;
font-weight:800;
letter-spacing:2px;
color:var(--primary);
}

.price-head h3{
font-size:28px;
margin:10px 0;
}

.price-head p{
color:var(--muted);
line-height:1.6;
min-height:52px;
}

.price{
margin:28px 0 20px;
display:flex;
align-items:end;
gap:8px;
}

.price strong{font-size:38px}
.price span{font-size:13px;color:var(--muted);margin-bottom:7px}

.price-card ul{
list-style:none;
display:grid;
gap:13px;
margin:0 0 28px;
}

.price-card li{
color:#505564;
line-height:1.45;
padding-left:23px;
position:relative;
}

.price-card li:before{
content:"✓";
position:absolute;
left:0;
color:var(--primary);
font-weight:800;
}

.price-button{
margin-top:auto;
display:block;
text-align:center;
background:var(--primary);
color:#fff;
padding:14px;
border-radius:11px;
font-weight:700;
}

/* SSS */
.faq-section{background:#f8f9fc}

.faq-list{
max-width:850px;
margin:auto;
display:grid;
gap:12px;
}

.faq-item{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:0 22px;
box-shadow:0 5px 18px rgba(25,27,40,.04);
}

.faq-item summary{
cursor:pointer;
list-style:none;
padding:21px 35px 21px 0;
font-weight:700;
position:relative;
}

.faq-item summary::-webkit-details-marker{display:none}

.faq-item summary:after{
content:"+";
position:absolute;
right:0;
font-size:25px;
color:var(--primary);
}

.faq-item[open] summary:after{content:"−"}

.faq-item p{
color:var(--muted);
line-height:1.75;
padding:0 0 22px;
}

/* DİL SEÇİCİ */
.landing-language{
position:fixed;
right:22px;
bottom:22px;
z-index:1000;
}

.landing-language button{
border:0;
background:#fff;
color:var(--dark);
padding:11px 15px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
cursor:pointer;
display:flex;
gap:8px;
align-items:center;
}

.landing-language-menu{
display:none;
position:absolute;
right:0;
bottom:52px;
width:210px;
max-height:360px;
overflow:auto;
background:#fff;
border-radius:16px;
padding:8px;
box-shadow:0 15px 45px rgba(0,0,0,.18);
}

.landing-language.open .landing-language-menu{display:grid}

.landing-language-menu button{
width:100%;
box-shadow:none;
border-radius:9px;
justify-content:flex-start;
padding:10px;
}

.landing-language-menu button:hover{
background:#f2efff;
color:var(--primary);
}

.contact-phone,.contact-whatsapp{
text-decoration:none;
white-space:nowrap;
font-weight:600;
}

#footer{padding:32px 20px}

.footer-contact{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
flex-wrap:wrap;
text-align:center;
}

.footer-contact a{text-decoration:none}

/* MOBİL */
@media(max-width:900px){
.hero{
flex-direction:column;
text-align:center;
padding:55px 0 80px;
gap:45px;
}

.hero h1{font-size:46px}
.hero p{font-size:18px}
.hero-buttons{justify-content:center}

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

.price-card.featured{transform:none}
.nav-links{gap:15px}
}

@media(max-width:768px){
.navbar{
height:72px;
}

.logo-img{height:32px}

.nav-links{
gap:10px;
font-size:13px;
}

.login-btn{padding:9px 13px}

.hero{
min-height:auto;
padding:55px 0 75px;
}

.hero h1{font-size:38px}
.hero-right img{width:310px}

.landing-section,
.demo-section{
padding:80px 0;
}

.section-title{
margin-bottom:40px;
}

.section-title h2{font-size:31px}

.feature-grid,
.pricing-grid,
.demo-grid{
grid-template-columns:1fr;
}

.feature-card{padding:25px}

.price-card.featured{transform:none}

.demo-card>img{height:220px}

.demo-logo{top:178px}

.landing-language{
right:14px;
bottom:14px;
}

@media(max-width:520px){
.contact-phone,.contact-whatsapp{display:none}
.footer-contact{flex-direction:column;gap:10px}
.hero h1{font-size:34px}
.hero-buttons{flex-direction:column}
.primary-btn,.secondary-btn{text-align:center;width:100%}
}
}

/* =========================================================
   QRMENUTEK LANDING PAGE - PROFESSIONAL CARD LAYOUT
   ========================================================= */

/* GENEL BÖLÜM DÜZENİ */
#features,
#pricing,
#faq,
.demo-section {
    padding: 90px 0;
}

#features .container,
#pricing .container,
#faq .container,
.demo-section .container {
    width: 1200px;
    max-width: 92%;
    margin: 0 auto;
}

/* =========================================================
   ÖZELLİKLER
   ========================================================= */

#features .feature-grid,
#features .features-grid,
#features .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 45px;
}

#features .feature-card,
#features .features-card,
#features .card {
    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 18px;
    padding: 28px;
    min-height: 190px;
    box-shadow: 0 10px 30px rgba(25, 30, 50, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

#features .feature-card:hover,
#features .features-card:hover,
#features .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(25, 30, 50, .10);
}

#features .feature-card h3,
#features .features-card h3,
#features .card h3 {
    margin: 12px 0 8px;
    font-size: 20px;
    line-height: 1.3;
}

#features .feature-card p,
#features .features-card p,
#features .card p {
    margin: 0;
    color: #6e7585;
    line-height: 1.65;
}

#features .feature-icon,
#features .icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eeeaff;
    color: #6c4cf7;
    font-size: 21px;
}

/* Eğer özellikler grid class'ı farklıysa section içindeki
   kart benzeri elemanları yine düzenli tut */
#features .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* =========================================================
   FİYATLANDIRMA
   ========================================================= */

#pricing .pricing-grid,
#pricing .plans-grid,
#pricing .price-grid,
#pricing .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    margin-top: 45px;
}

#pricing .pricing-card,
#pricing .plan-card,
#pricing .price-card,
#pricing .card {
    background: #fff;
    border: 1px solid #e5e7ef;
    border-radius: 20px;
    padding: 32px 28px;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 35px rgba(25, 30, 50, .07);
}

#pricing .pricing-card h3,
#pricing .plan-card h3,
#pricing .price-card h3,
#pricing .card h3 {
    font-size: 24px;
    margin: 8px 0 10px;
}

#pricing .pricing-card ul,
#pricing .plan-card ul,
#pricing .price-card ul,
#pricing .card ul {
    margin: 22px 0;
    padding-left: 20px;
    color: #555d6d;
    line-height: 1.9;
}

#pricing .pricing-card a,
#pricing .plan-card a,
#pricing .price-card a,
#pricing .card a {
    margin-top: auto;
}

/* Profesyonel paket öne çıksın */
#pricing .pricing-card:nth-child(2),
#pricing .plan-card:nth-child(2),
#pricing .price-card:nth-child(2) {
    border: 2px solid #6c4cf7;
    box-shadow: 0 18px 50px rgba(108, 76, 247, .15);
    transform: translateY(-8px);
}

#pricing .pricing-card:nth-child(2):hover,
#pricing .plan-card:nth-child(2):hover,
#pricing .price-card:nth-child(2):hover {
    transform: translateY(-12px);
}

/* =========================================================
   SSS
   ========================================================= */

#faq .faq-list,
#faq .faq-items {
    width: 820px;
    max-width: 100%;
    margin: 45px auto 0;
}

#faq details,
#faq .faq-item {
    background: #fff;
    border: 1px solid #e5e7ef;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(25, 30, 50, .045);
}

#faq summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 24px;
    font-size: 17px;
    font-weight: 650;
    color: #292d37;
}

#faq summary::-webkit-details-marker {
    display: none;
}

#faq summary::after {
    content: "+";
    float: right;
    color: #6c4cf7;
    font-size: 22px;
    font-weight: 500;
}

#faq details[open] summary::after {
    content: "−";
}

#faq details p,
#faq .faq-answer {
    padding: 0 24px 22px;
    margin: 0;
    color: #6e7585;
    line-height: 1.7;
}

/* =========================================================
   DEMOLAR
   ========================================================= */

.demo-section {
    background: #f8f9fc;
}

.demo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.demo-card {
    border: 1px solid #e6e8f0;
}

/* =========================================================
   DİL MENÜSÜ
   ========================================================= */

.landing-language {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
}

#landingLanguageButton {
    border: 1px solid #dddff0;
    background: #fff;
    color: #252936;
    border-radius: 12px;
    min-width: 68px;
    height: 46px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

#landingLanguageButton:hover {
    border-color: #6c4cf7;
    color: #6c4cf7;
}

.landing-language-menu {
    position: absolute;
    right: 0;
    bottom: 56px;
    width: 190px;
    max-height: 360px;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #e3e5ee;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0,0,0,.15);
    display: none;
}

.landing-language.open .landing-language-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.landing-language-menu button {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 9px 7px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #3c414d;
}

.landing-language-menu button:hover {
    background: #eeeaff;
    color: #6c4cf7;
}

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

@media (max-width: 900px) {

    #features .feature-grid,
    #features .features-grid,
    #features .grid,
    #features .row,
    #pricing .pricing-grid,
    #pricing .plans-grid,
    #pricing .price-grid,
    #pricing .row {
        grid-template-columns: 1fr 1fr;
    }

    #pricing .pricing-card:nth-child(2),
    #pricing .plan-card:nth-child(2),
    #pricing .price-card:nth-child(2) {
        transform: none;
    }

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

@media (max-width: 600px) {

    #features,
    #pricing,
    #faq,
    .demo-section {
        padding: 65px 0;
    }

    #features .feature-grid,
    #features .features-grid,
    #features .grid,
    #features .row,
    #pricing .pricing-grid,
    #pricing .plans-grid,
    #pricing .price-grid,
    #pricing .row,
    .demo-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #pricing .pricing-card,
    #pricing .plan-card,
    #pricing .price-card,
    #pricing .card {
        min-height: auto;
    }

    #pricing .pricing-card:nth-child(2),
    #pricing .plan-card:nth-child(2),
    #pricing .price-card:nth-child(2) {
        transform: none;
    }

    #faq .faq-list,
    #faq .faq-items {
        margin-top: 30px;
    }

    .landing-language {
        right: 14px;
        bottom: 14px;
    }
}


/* =========================================================
   FİYAT KARTLARI - ÖZEL TEKLİF MODELİ
   ========================================================= */

#pricing .custom-price {
    min-height: 58px;
    display: flex;
    align-items: center;
    margin: 24px 0 18px;
}

#pricing .custom-price strong {
    font-size: 25px;
    color: #252936;
}

#pricing .price-button {
    display: block;
    width: 100%;
    text-align: center;
    background: #6c4cf7;
    color: #fff;
    padding: 14px 18px;
    border-radius: 11px;
    font-weight: 700;
    transition: .2s ease;
}

#pricing .price-button:hover {
    background: #5638dc;
    transform: translateY(-1px);
}


/* =========================================================
   HEADER GİRİŞ BUTONU - NET VE YÜKSEK KONTRAST
   ========================================================= */

header .navbar .login-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #6C4CF7 !important;
    color: #FFFFFF !important;
    border: 1px solid #6C4CF7 !important;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none !important;
    opacity: 1 !important;
    box-shadow: 0 6px 18px rgba(108, 76, 247, 0.18);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

header .navbar .login-btn:hover {
    background: #5938E8 !important;
    color: #FFFFFF !important;
    border-color: #5938E8 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(108, 76, 247, 0.25);
}

header .navbar .login-btn:visited,
header .navbar .login-btn:active,
header .navbar .login-btn:focus {
    color: #FFFFFF !important;
}



/* =========================================================
   QRMENUTEK - PAKET DETAY MODALI
   ========================================================= */

#pricing .package-detail-button {
    width: 100%;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.package-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.package-modal.is-open {
    display: flex;
}

.package-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 30, .58);
    backdrop-filter: blur(4px);
}

.package-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
    padding: 34px;
}

.package-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f2f6;
    color: #252936;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.package-modal-close:hover {
    background: #e6e7ee;
}

.package-modal-header {
    padding-right: 45px;
}

.package-modal-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #6C4CF7;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

#packageModalTitle {
    margin: 0 0 10px;
    color: #252936;
    font-size: 32px;
    line-height: 1.2;
}

#packageModalDescription {
    margin: 0;
    color: #6E7585;
    line-height: 1.65;
}

.package-modal-body {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #ececf2;
}

.package-modal-body h3 {
    margin: 0 0 15px;
    font-size: 17px;
    color: #252936;
}

#packageModalFeatures {
    margin: 0;
    padding: 0;
    list-style: none;
}

#packageModalFeatures li {
    position: relative;
    padding: 10px 0 10px 30px;
    color: #454a57;
    line-height: 1.5;
    border-bottom: 1px solid #f0f1f5;
}

#packageModalFeatures li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 9px;
    color: #6C4CF7;
    font-weight: 800;
}

.package-modal-footer {
    margin-top: 26px;
}

.package-demo-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 20px;
    border-radius: 11px;
    background: #6C4CF7;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: .2s ease;
}

.package-demo-button:hover {
    background: #5938E8;
    transform: translateY(-1px);
}

.package-modal-secondary-link {
    display: block;
    margin-top: 12px;
    text-align: center;
    color: #6C4CF7;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}

.package-modal-secondary-link:hover {
    text-decoration: underline;
}

body.package-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .package-modal-dialog {
        padding: 26px 20px;
        border-radius: 18px;
    }

    #packageModalTitle {
        font-size: 27px;
    }
}


/* =========================================================
   HERO - TELEFON MOCKUP (gerçek public-menu ekranını taklit eder)
   ========================================================= */
.phone-mockup{
    width:300px;
    max-width:100%;
    padding:14px;
    border-radius:44px;
    background:linear-gradient(160deg,#232530,#14151c);
    box-shadow:0 40px 80px rgba(20,20,35,.28);
}
.phone-notch{
    width:90px;
    height:22px;
    margin:0 auto 10px;
    border-radius:0 0 16px 16px;
    background:#14151c;
}
.phone-screen{
    border-radius:30px;
    overflow:hidden;
    background:#FBF7F2;
}
.mockup-cover{
    padding:26px 16px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-align:center;
    color:#fff;
    background:linear-gradient(150deg,#a84f2a,#5b2e18);
}
.mockup-logo{
    width:44px;
    height:44px;
    margin-bottom:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid rgba(255,255,255,.85);
    border-radius:50%;
    background:#fff;
    color:#a84f2a;
    font-weight:800;
    font-size:18px;
}
.mockup-cover strong{font-size:16px}
.mockup-cover span{font-size:11px;opacity:.85}
.mockup-tabs{
    display:flex;
    gap:6px;
    padding:12px 14px 4px;
    overflow-x:auto;
    scrollbar-width:none;
}
.mockup-tabs::-webkit-scrollbar{display:none}
.mockup-tab{
    padding:6px 12px;
    border-radius:99px;
    background:#fff;
    border:1px solid #ece5dc;
    color:#8a8276;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}
.mockup-tab.active{
    background:#a84f2a;
    border-color:#a84f2a;
    color:#fff;
}
.mockup-products{
    padding:10px 14px 22px;
    display:grid;
    gap:8px;
}
.mockup-product{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:14px;
    background:#fff;
    border:1px solid #f0ece5;
    box-shadow:0 4px 14px rgba(60,40,20,.05);
}
.mockup-thumb{
    width:42px;
    height:42px;
    flex:none;
    border-radius:10px;
    background:linear-gradient(135deg,#e7dccb,#c9a978);
}
.mockup-info{min-width:0;flex:1}
.mockup-info strong{display:block;font-size:12.5px;color:#2b2f38}
.mockup-info span{display:block;margin-top:2px;font-size:10.5px;color:#9a9284;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mockup-price{font-size:12.5px;font-weight:800;color:#a84f2a;white-space:nowrap}

@media(max-width:768px){
    .phone-mockup{width:260px}
}


/* =========================================================
   NASIL ÇALIŞIR? — özellik kartlarıyla aynı tasarım dili
   (.feature-card/.feature-icon ile birebir aynı görünüm)
   ========================================================= */
#how,
.how-section{
    background:#fff;
    padding:90px 0;
}
#how .container{
    width:1200px;
    max-width:92%;
    margin:0 auto;
}
.how-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    margin-top:45px;
}
.how-step{
    background:#fff;
    border:1px solid #e8eaf2;
    border-radius:18px;
    padding:28px;
    min-height:190px;
    box-shadow:0 10px 30px rgba(25,30,50,.06);
    transition:transform .2s ease,box-shadow .2s ease;
}
.how-step:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 42px rgba(25,30,50,.10);
}
.how-step-number{
    width:46px;
    height:46px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#eeeaff;
    color:#6c4cf7;
    font-size:17px;
    font-weight:800;
}
.how-step h3{margin:12px 0 8px;font-size:20px;line-height:1.3}
.how-step p{margin:0;color:#6e7585;line-height:1.65}


/* =========================================================
   CANLI DEMOLAR — 3 sütunda son satır (5 kart) artık ortalanıyor.
   grid yerine flex + justify-content:center: 3'e bölünmeyen son
   satırdaki kartlar sola yapışmak yerine ortada kalır.
   ========================================================= */
.demo-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;
}
.demo-card{
    flex:0 1 340px;
    max-width:360px;
}
@media(max-width:600px){
    .demo-card{flex-basis:100%;max-width:420px}
}


/* =========================================================
   DİL SEÇİCİ — artık üst navigasyonun içinde (eskiden sağ alt
   köşede sabit bir baloncuktu). #landingLanguageButton ve
   .landing-language-menu'nun kendi görünüm kuralları (yukarıda)
   aynen kullanılıyor, sadece konumlandırma burada değişiyor.
   ========================================================= */
.nav-language{
    position:relative;
    display:flex;
    align-items:center;
}
.nav-language .landing-language-menu{
    top:calc(100% + 10px);
    bottom:auto;
}
.nav-language.open .landing-language-menu{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
}
@media(max-width:520px){
    #landingCurrentLanguage{display:none}
    #landingLanguageButton{min-width:auto;padding:0 11px}
}
/* Dar ekranlarda (Özellikler+Fiyatlar+SSS+Giriş Yap+Dil) tek satıra
   sığmıyor — logo üstte, menü öğeleri altta ikinci bir satıra sarıyor
   (bkz. .nav-links'in kendisi de sarabiliyor, taşan/görünmeyen buton
   kalmıyor). */
@media(max-width:560px){
    .navbar{flex-wrap:wrap;height:auto;min-height:72px;padding:12px 0;row-gap:8px}
    .nav-links{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;width:100%}
}


/* =========================================================
   FOOTER — marka + hızlı linkler + iletişim + gizlilik/KVKK
   ========================================================= */
#footer{
    padding:60px 20px 0;
    background:#14151c;
    color:#c7c9d6;
}
.footer-inner{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:40px;
    padding-bottom:40px;
}
.footer-brand strong{display:block;margin-bottom:10px;color:#fff;font-size:20px}
.footer-brand p{margin:0;color:#9497aa;line-height:1.7;max-width:320px;font-size:14px}
.footer-col-title{display:block;margin-bottom:14px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:#c7c9d6;font-size:14px;transition:.2s}
.footer-links a:hover{color:#fff}
.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:13px;
    color:#8b8ea0;
    flex-wrap:wrap;
}
.footer-bottom a{color:#8b8ea0;text-decoration:underline}
.footer-bottom a:hover{color:#fff}
@media(max-width:700px){
    .footer-inner{grid-template-columns:1fr;gap:28px;text-align:center}
    .footer-brand p{margin:0 auto;max-width:100%}
    .footer-links{align-items:center}
    .footer-bottom{flex-direction:column;text-align:center}
}


/* =========================================================
   MOBİL — telefon mockup, "Nasıl Çalışır?" ve dil seçici
   ========================================================= */
@media(max-width:900px){
    .how-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
    #how,
    .how-section{padding:65px 0}
    .how-grid{grid-template-columns:1fr;gap:16px}
}


/* =========================================================
   GİZLİLİK / KVKK SAYFASI
   ========================================================= */
.legal-header{min-height:auto;padding:0}
.legal-section{padding-top:60px}
.legal-content{max-width:min(760px,95%)}
.legal-eyebrow{color:var(--primary);font-size:13px;font-weight:800;letter-spacing:2px}
.legal-content h1{margin:14px 0 8px;font-size:38px;line-height:1.2}
.legal-updated{color:var(--muted);margin-bottom:34px}
.legal-content h2{margin:34px 0 10px;font-size:21px}
.legal-content p{color:var(--muted);line-height:1.8;font-size:16px}
.legal-content a{color:var(--primary);text-decoration:underline}
.legal-back{display:inline-block;margin-top:40px;font-weight:700;color:var(--primary)}
@media(max-width:600px){
    .legal-content h1{font-size:28px}
}