.office701-logo{
	width: 100px;
}

.hide{
	display: none !important;
}

.w-100{
	width: 100% !important;
}

.h-100{
	height: 100% !important;
}

.w-50{
	width: 50% !important;
}

.h-50{
	height: 50% !important;
}

.w-auto{
	width: auto !important;
}

.h-auto{
	height: auto !important; 
}

.has-error{
    border-color: #b94a48;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.has-success{
    border-color: #50cd89;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #555555;
    background: rgba(255, 255, 255, 0.9);
}

.show {
    display: block !important;
}

.closecookies {
   z-index: 2;
    position: absolute !important;
    right: 0 !important;
    border: none;
    background: transparent;
    font-size: 17px;
    padding: 0px;
}

.closeBtn {
    font-weight: bold;
    color: black
}

.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: .9;
    border-style: none;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #555;
    background: #fff;
    box-shadow: 0 0 10 0 rgb(0 0 0 / 24%);
    padding: 15px 10px 15px 5px;
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline
}

.cookiealert a:hover {
    color: var(--theme-color2);
}

.cookiealert .cookiealert-text{
    z-index: 1;
    padding: 15px 0px 0px 10px;
    margin: 0;
    width: 100%;
    font-size: 12px;
}

.cookiealert .cookiealert-text p{
    font-size: 13px;
    line-height: 1.5;
}

.cookiealert .full-width{
    width: 100%;
}

.cookiealert .pull-rightleft{
    text-align: center;
}

@media screen and (min-width: 991px){
    .cookiealert{
        bottom: 10px;
        left: 18px;
        width: 400px;
        border-radius: 10px;
    }

    .cookiealert .cookiealert-text{
        width: 414px;
        line-height: 2;
        margin-bottom: 15px;
    }
}

@media (max-width: 768px){
    .cookiealert .pull-rightleft {
        float: none;
        text-align: center;
    }
}

/* ============================================================
   CORE701 — TEMA STİLLERİ
   ============================================================ */
:root{
    --c7-primary: #144c5c;
    --c7-primary-dark: #0e3a48;
    --c7-primary-light: #1e6677;
    --c7-accent: #3fb4c9;
    --c7-gold: #d9a441;
    --c7-bg: #f6f9fb;
    --c7-dark: #0b2027;
    --c7-text: #243239;
    --c7-muted: #6b7a83;
    --c7-border: #e6edf1;
    --c7-white: #ffffff;
    --c7-radius: 14px;
    --c7-radius-lg: 22px;
    --c7-font: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --c7-transition: .35s cubic-bezier(.4,0,.2,1);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
    font-family: var(--c7-font);
    color: var(--c7-text);
    background: var(--c7-white);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a{ color: var(--c7-primary); text-decoration: none; transition: color var(--c7-transition); }
a:hover{ color: var(--c7-primary-light); }

h1,h2,h3,h4,h5,h6{ font-family: var(--c7-font); font-weight: 700; color: var(--c7-dark); letter-spacing: -.02em; }

img{ max-width: 100%; height: auto; }

.min-vh-90{ min-height: 90vh; }

/* ---------- BUTONLAR ---------- */
.btn{
    font-family: var(--c7-font);
    font-weight: 600;
    border-radius: 999px;
    padding: .7rem 1.6rem;
    border: 2px solid transparent;
    transition: all var(--c7-transition);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.btn-lg{ padding: .95rem 2rem; font-size: 1rem; }

.btn-primary-c7{
    background: var(--c7-primary);
    color: var(--c7-white);
    border-color: var(--c7-primary);
}
.btn-primary-c7:hover{
    background: var(--c7-primary-dark);
    border-color: var(--c7-primary-dark);
    color: var(--c7-white);
    transform: translateY(-2px);
}

.btn-outline-c7{
    background: transparent;
    color: var(--c7-primary);
    border-color: var(--c7-primary);
}
.btn-outline-c7:hover{
    background: var(--c7-primary);
    color: var(--c7-white);
    transform: translateY(-2px);
}

.btn-light-c7{
    background: var(--c7-white);
    color: var(--c7-primary);
    border-color: var(--c7-white);
}
.btn-light-c7:hover{
    background: var(--c7-bg);
    color: var(--c7-primary-dark);
    transform: translateY(-2px);
}

.btn-outline-light{
    background: transparent;
    color: var(--c7-white);
    border: 2px solid rgba(255,255,255,.6);
}
.btn-outline-light:hover{ background: var(--c7-white); color: var(--c7-primary); }

/* ---------- GRADIENT TEXT ---------- */
.gradient-text{
    background: linear-gradient(90deg, var(--c7-primary) 0%, var(--c7-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-text-light{
    background: linear-gradient(90deg, #9feaf7 0%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: all var(--c7-transition);
}
.site-header.scrolled{
    background: rgba(255,255,255,.96);
    border-bottom-color: var(--c7-border);
}
.site-navbar{ padding: .9rem 0; }

.navbar-brand img{ height: 42px; width: auto; }
.navbar-brand .logo-light{ display: none; }
.navbar-brand .logo-dark{ display: inline-block; }

.main-nav .nav-link{
    color: var(--c7-text);
    font-weight: 600;
    font-size: .95rem;
    padding: .5rem 1rem !important;
    position: relative;
}
.main-nav .nav-link::after{
    content: '';
    position: absolute;
    left: 1rem; right: 1rem; bottom: .15rem;
    height: 2px;
    background: var(--c7-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--c7-transition);
}
.main-nav .nav-link:hover{ color: var(--c7-primary); }
.main-nav .nav-link:hover::after{ transform: scaleX(1); }

.btn-nav{ padding: .55rem 1.3rem !important; font-size: .9rem !important; }

/* Lang switch */
.lang-switch{
    display: inline-flex;
    background: var(--c7-bg);
    border-radius: 999px;
    padding: 4px;
}
.lang-switch .lang-item{
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c7-muted);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: all var(--c7-transition);
}
.lang-switch .lang-item.active{
    background: var(--c7-primary);
    color: var(--c7-white);
}
.lang-switch .flag-icon{ font-size: 1rem; line-height: 1; }

/* Hamburger */
.navbar-toggler{ border: none; padding: .5rem; }
.navbar-toggler:focus{ box-shadow: none; }
.nav-burger{ display: inline-block; width: 28px; height: 20px; position: relative; }
.nav-burger span{
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--c7-primary);
    border-radius: 2px;
    transition: all var(--c7-transition);
}
.nav-burger span:nth-child(1){ top: 2px; }
.nav-burger span:nth-child(2){ top: 9px; }
.nav-burger span:nth-child(3){ top: 16px; }

/* Offcanvas */
.mobile-offcanvas{ font-family: var(--c7-font); }
.mobile-nav{ list-style: none; padding: 0; margin: 0; }
.mobile-nav li a{
    display: block;
    padding: .85rem 0;
    color: var(--c7-dark);
    font-weight: 600;
    border-bottom: 1px solid var(--c7-border);
}
.mobile-nav li a:hover{ color: var(--c7-primary); padding-left: .4rem; }
.mobile-lang{ display: flex; gap: .5rem; }
.mobile-lang .lang-item{
    flex: 1;
    text-align: center;
    padding: .6rem;
    border: 1px solid var(--c7-border);
    border-radius: 10px;
    font-weight: 600;
    color: var(--c7-text);
}
.mobile-lang .lang-item.active{
    background: var(--c7-primary);
    color: var(--c7-white);
    border-color: var(--c7-primary);
}

/* ============================================================
   HERO
   ============================================================ */
.hero-section{
    position: relative;
    padding: 140px 0 80px;
    overflow: hidden;
    background: linear-gradient(180deg, #f4fafc 0%, #ffffff 100%);
}
.hero-bg{ position: absolute; inset: 0; pointer-events: none; }
.hero-shape{ position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; }
.hero-shape.shape-1{ width: 500px; height: 500px; background: var(--c7-primary); top: -150px; left: -150px; }
.hero-shape.shape-2{ width: 400px; height: 400px; background: var(--c7-accent); bottom: -100px; right: -120px; opacity: .25; }
.hero-shape.shape-3{ width: 300px; height: 300px; background: var(--c7-gold); top: 40%; right: 30%; opacity: .12; }

.hero-badge{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(20,76,92,.08);
    color: var(--c7-primary);
    padding: .5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 1.5rem;
}
.hero-title{
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.hero-desc{
    font-size: 1.1rem;
    color: var(--c7-muted);
    margin-bottom: 2rem;
    max-width: 560px;
}
.hero-actions{ display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 3rem; }
.hero-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c7-border);
}
.meta-item strong{
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--c7-primary);
    line-height: 1;
    margin-bottom: .25rem;
}
.meta-item span{ color: var(--c7-muted); font-size: .88rem; }

/* Hero Visual */
.hero-visual{
    position: relative;
    padding: 2rem;
    min-height: 520px;
}
.hero-visual-glow{
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 40%, rgba(63,180,201,.25), transparent 60%);
    z-index: 0;
}
.hero-dashboard{
    position: relative;
    z-index: 1;
    border-radius: var(--c7-radius-lg);
    width: 100%;
    border: 10px solid var(--c7-white);
    background: var(--c7-white);
    box-shadow: 0 30px 60px -20px rgba(20,76,92,.25);
}
.hero-phone{
    position: absolute;
    right: -20px; bottom: -20px;
    width: 180px;
    z-index: 2;
    border-radius: 28px;
    overflow: hidden;
    border: 6px solid var(--c7-dark);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.25);
    background: #000;
}
.hero-phone img{ display: block; width: 100%; height: 340px; object-fit: cover; }

.hero-card{
    position: absolute;
    background: var(--c7-white);
    border-radius: 14px;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    z-index: 3;
    border: 1px solid var(--c7-border);
    box-shadow: 0 15px 30px -10px rgba(20,76,92,.15);
}
.hero-card strong{ display: block; font-size: .9rem; color: var(--c7-dark); }
.hero-card small{ color: var(--c7-muted); font-size: .75rem; }
.hero-card .card-icon{
    width: 42px; height: 42px;
    background: var(--c7-primary);
    color: var(--c7-white);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.hero-card .card-icon.green{ background: #2ecc71; }
.hero-card.card-1{ top: 15%; left: -10px; }
.hero-card.card-2{ top: 65%; left: -20px; }

/* ============================================================
   TRUST
   ============================================================ */
.trust-section{
    padding: 40px 0;
    border-top: 1px solid var(--c7-border);
    border-bottom: 1px solid var(--c7-border);
    background: var(--c7-bg);
}
.trust-title{
    text-align: center;
    color: var(--c7-muted);
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .12em;
    margin-bottom: 1.25rem;
}
.trust-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
}
.trust-item{
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--c7-primary);
    font-weight: 600;
    font-size: .95rem;
}
.trust-item i{ font-size: 1.1rem; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
section{ padding: 90px 0; position: relative; }
.section-head{ max-width: 760px; margin: 0 auto 3rem; }
.section-label{
    display: inline-block;
    background: rgba(20,76,92,.08);
    color: var(--c7-primary);
    padding: .35rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.section-label.light{
    background: rgba(255,255,255,.15);
    color: var(--c7-white);
}
.section-title{
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.section-sub{
    color: var(--c7-muted);
    font-size: 1.05rem;
}
.text-white-75{ color: rgba(255,255,255,.8) !important; }

/* ============================================================
   FEATURES
   ============================================================ */
.features-section{ background: var(--c7-white); }
.feature-card{
    background: var(--c7-white);
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius);
    padding: 2rem 1.6rem;
    height: 100%;
    transition: all var(--c7-transition);
    position: relative;
    overflow: hidden;
}
.feature-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c7-primary), var(--c7-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--c7-transition);
}
.feature-card:hover{
    transform: translateY(-6px);
    border-color: var(--c7-primary);
}
.feature-card:hover::before{ transform: scaleX(1); }
.feature-icon{
    width: 58px; height: 58px;
    background: linear-gradient(135deg, var(--c7-primary), var(--c7-primary-light));
    color: var(--c7-white);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
}
.feature-card h4{ font-size: 1.15rem; margin-bottom: .6rem; }
.feature-card p{ color: var(--c7-muted); margin: 0; font-size: .95rem; }

/* ============================================================
   MOBIL
   ============================================================ */
.mobile-section{ background: var(--c7-bg); }

.check-list{ list-style: none; padding: 0; margin: 0; }
.check-list li{
    padding: .5rem 0;
    color: var(--c7-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.check-list li i{ color: var(--c7-primary); font-size: 1.1rem; }

.app-badges{ display: flex; flex-wrap: wrap; gap: .8rem; }
.store-badge{
    background: var(--c7-dark);
    color: var(--c7-white);
    padding: .75rem 1.25rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    transition: transform var(--c7-transition);
}
.store-badge:hover{ transform: translateY(-3px); color: var(--c7-white); }
.store-badge i{ font-size: 1.8rem; }
.store-badge span{ display: flex; flex-direction: column; line-height: 1.1; }
.store-badge small{ font-size: .7rem; opacity: .8; }
.store-badge strong{ font-size: 1rem; }

.mobile-mockup{
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mockup-glow{
    position: absolute;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(20,76,92,.25), transparent 70%);
    border-radius: 50%;
    z-index: 0;
}
.mobile-mockup .phone-main,
.mobile-mockup .phone-side{
    border-radius: 32px;
    border: 8px solid var(--c7-dark);
    background: #000;
    position: relative;
    z-index: 1;
    object-fit: cover;
}
.mobile-mockup .phone-main{ width: 270px; height: 540px; }
.mobile-mockup .phone-side{
    width: 220px; height: 440px;
    position: absolute;
    right: 12%;
    top: 50%;
    transform: translateY(-50%) rotate(6deg);
    opacity: .95;
    z-index: 2;
}
.float-chip{
    position: absolute;
    background: var(--c7-white);
    padding: .6rem .9rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid var(--c7-border);
    z-index: 4;
}
.float-chip i{
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--c7-primary);
    color: var(--c7-white);
    display: flex; align-items: center; justify-content: center;
}
.float-chip strong{ display: block; font-size: .85rem; color: var(--c7-dark); line-height: 1; }
.float-chip small{ font-size: .72rem; color: var(--c7-muted); }
.chip-ocr{ top: 12%; left: 8%; }
.chip-ai{ bottom: 18%; right: 6%; background: var(--c7-dark); }
.chip-ai i{ background: var(--c7-accent); }
.chip-ai strong{ color: var(--c7-white); }
.chip-ai small{ color: rgba(255,255,255,.7); }

/* ============================================================
   CRM
   ============================================================ */
.crm-section{
    background: linear-gradient(135deg, var(--c7-primary) 0%, var(--c7-primary-dark) 100%);
    color: var(--c7-white);
    position: relative;
    overflow: hidden;
}
.crm-section::before{
    content: '';
    position: absolute;
    top: -150px; right: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(63,180,201,.3), transparent 70%);
    border-radius: 50%;
}
.crm-stats .stat-box{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--c7-radius);
    padding: 1.1rem 1rem;
    text-align: center;
    transition: transform var(--c7-transition);
}
.crm-stats .stat-box:hover{ transform: translateY(-4px); background: rgba(255,255,255,.12); }
.crm-stats .stat-box strong{
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--c7-white);
    line-height: 1;
}
.crm-stats .stat-box span{ color: rgba(255,255,255,.75); font-size: .85rem; }

.crm-mockup{
    position: relative;
    border-radius: var(--c7-radius-lg);
    overflow: hidden;
    border: 8px solid rgba(255,255,255,.1);
}
.crm-mockup img{ display: block; width: 100%; }
.crm-mockup-glow{
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(63,180,201,.15));
    pointer-events: none;
}

/* ============================================================
   AUDIENCE
   ============================================================ */
.audience-section{ background: var(--c7-white); }
.audience-card{
    background: var(--c7-white);
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius);
    overflow: hidden;
    height: 100%;
    transition: all var(--c7-transition);
}
.audience-card:hover{ transform: translateY(-6px); border-color: var(--c7-primary); }
.audience-img{ overflow: hidden; aspect-ratio: 16/10; }
.audience-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.audience-card:hover .audience-img img{ transform: scale(1.06); }
.audience-body{ padding: 1.6rem; }
.audience-body h4{ display: flex; align-items: center; gap: .6rem; color: var(--c7-primary); margin-bottom: .8rem; }
.audience-body p{ color: var(--c7-muted); margin: 0; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-section{ background: var(--c7-bg); }
.pricing-card{
    background: var(--c7-white);
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius-lg);
    padding: 2.2rem 1.8rem;
    height: 100%;
    position: relative;
    transition: all var(--c7-transition);
}
.pricing-card:hover{ transform: translateY(-6px); border-color: var(--c7-primary); }
.pricing-card.featured{
    background: linear-gradient(180deg, var(--c7-primary) 0%, var(--c7-primary-dark) 100%);
    color: var(--c7-white);
    border-color: var(--c7-primary);
    transform: scale(1.03);
}
.pricing-card.featured:hover{ transform: scale(1.03) translateY(-6px); }
.pricing-card.featured h4,
.pricing-card.featured .pricing-price strong,
.pricing-card.featured .pricing-list li{ color: var(--c7-white); }
.pricing-card.featured .pricing-list li i{ color: var(--c7-accent); }
.pricing-card.featured p{ color: rgba(255,255,255,.75); }
.pricing-card.featured .btn-primary-c7{
    background: var(--c7-white); color: var(--c7-primary); border-color: var(--c7-white);
}

.featured-badge{
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--c7-gold);
    color: var(--c7-dark);
    padding: .3rem .9rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.pricing-head h4{ font-size: 1.25rem; margin-bottom: .3rem; }
.pricing-head p{ color: var(--c7-muted); font-size: .9rem; }
.pricing-price{ margin: 1.4rem 0; display: flex; align-items: baseline; gap: .25rem; }
.pricing-price sup{ font-size: 1.1rem; color: var(--c7-primary); font-weight: 700; }
.pricing-price strong{ font-size: 3rem; font-weight: 800; color: var(--c7-primary); line-height: 1; }
.pricing-price span{ color: var(--c7-muted); font-size: .95rem; }
.pricing-price .custom-price{ font-size: 1.5rem; font-weight: 700; color: var(--c7-primary); }

.pricing-list{ list-style: none; padding: 0; margin: 1.4rem 0; }
.pricing-list li{
    padding: .55rem 0;
    display: flex; align-items: center; gap: .6rem;
    color: var(--c7-text);
    font-size: .94rem;
    border-bottom: 1px dashed var(--c7-border);
}
.pricing-list li i{ color: var(--c7-primary); }
.pricing-list li.disabled{ color: #b5bfc6; }
.pricing-list li.disabled i{ color: #b5bfc6; }

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.integrations-section{ background: var(--c7-white); }
.integration-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.integration-item{
    background: var(--c7-bg);
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all var(--c7-transition);
}
.integration-item:hover{
    background: var(--c7-white);
    border-color: var(--c7-primary);
    transform: translateY(-4px);
}
.integration-item i{
    font-size: 1.8rem;
    color: var(--c7-primary);
    display: block;
    margin-bottom: .6rem;
}
.integration-item span{ color: var(--c7-dark); font-weight: 600; font-size: .9rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section{ background: var(--c7-bg); }
.faq-accordion .accordion-item{
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius) !important;
    margin-bottom: .85rem;
    overflow: hidden;
    background: var(--c7-white);
}
.faq-accordion .accordion-button{
    font-family: var(--c7-font);
    font-weight: 600;
    color: var(--c7-dark);
    padding: 1.1rem 1.3rem;
    background: var(--c7-white);
}
.faq-accordion .accordion-button:not(.collapsed){
    color: var(--c7-primary);
    background: var(--c7-white);
}
.faq-accordion .accordion-button:focus{ box-shadow: none; }
.faq-accordion .accordion-body{ color: var(--c7-muted); padding: 0 1.3rem 1.3rem; }

/* ============================================================
   CTA
   ============================================================ */
.cta-section{ background: var(--c7-white); }
.cta-wrap{
    background: linear-gradient(135deg, var(--c7-primary) 0%, var(--c7-primary-dark) 100%);
    border-radius: var(--c7-radius-lg);
    padding: 3.5rem;
    color: var(--c7-white);
    position: relative;
    overflow: hidden;
}
.cta-wrap h2{
    color: var(--c7-white);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    margin-bottom: .75rem;
}
.cta-wrap p{ color: rgba(255,255,255,.85); margin: 0; }
.cta-blob{
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(63,180,201,.35), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
    background: var(--c7-dark);
    color: rgba(255,255,255,.75);
    padding: 80px 0 30px;
}
.footer-text{ color: rgba(255,255,255,.7); font-size: .95rem; }
.footer-title{
    color: var(--c7-white);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
}
.footer-list, .footer-contact{ list-style: none; padding: 0; margin: 0; }
.footer-list li{ margin-bottom: .6rem; }
.footer-list a{ color: rgba(255,255,255,.7); font-size: .92rem; transition: all var(--c7-transition); }
.footer-list a:hover{ color: var(--c7-white); padding-left: .3rem; }
.footer-contact li{
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
    font-size: .92rem;
}
.footer-contact i{ color: var(--c7-accent); width: 18px; }
.footer-contact a{ color: rgba(255,255,255,.75); }
.footer-contact a:hover{ color: var(--c7-white); }

.footer-social{ display: flex; gap: .6rem; }
.footer-social a{
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--c7-transition);
}
.footer-social a:hover{ background: var(--c7-primary); color: var(--c7-white); transform: translateY(-3px); }

.footer-divider{ border-color: rgba(255,255,255,.1); margin: 2.5rem 0 1.25rem; }
.footer-bottom{ font-size: .88rem; color: rgba(255,255,255,.6); }
.footer-legal a{ color: rgba(255,255,255,.7); font-size: .88rem; }
.footer-legal a:hover{ color: var(--c7-white); }

.powered-by{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255,255,255,.7) !important;
    font-size: .85rem;
    transition: opacity var(--c7-transition);
}
.powered-by:hover{ opacity: .85; }
.powered-by img{ height: 22px; width: auto; }

/* ============================================================
   FLOATING BUTONS
   ============================================================ */
.floating-wp, .floating-top{
    position: fixed;
    width: 54px; height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 998;
    border: none;
    cursor: pointer;
    transition: all var(--c7-transition);
}
.floating-wp{
    left: 22px; bottom: 22px;
    background: #25d366;
    color: var(--c7-white);
    animation: wpPulse 2s infinite;
}
.floating-wp:hover{ color: var(--c7-white); transform: scale(1.08); }
@keyframes wpPulse{
    0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
    70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.floating-top{
    right: 22px; bottom: 22px;
    background: var(--c7-primary);
    color: var(--c7-white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}
.floating-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
.floating-top:hover{ background: var(--c7-primary-dark); transform: translateY(-3px); }

/* ============================================================
   INNER PAGE (SSS, BLOG, SÖZLEŞMELER)
   ============================================================ */
.page-hero{
    padding: 160px 0 70px;
    background: linear-gradient(135deg, var(--c7-primary) 0%, var(--c7-primary-dark) 100%);
    color: var(--c7-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero h1{ color: var(--c7-white); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.page-hero p{ color: rgba(255,255,255,.8); max-width: 640px; margin: 0 auto; }
.breadcrumb-c7{ display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; font-size: .9rem; }
.breadcrumb-c7 a{ color: rgba(255,255,255,.85); }
.breadcrumb-c7 span{ color: rgba(255,255,255,.5); }

.inner-section{ padding: 70px 0; }

.blog-card{
    background: var(--c7-white);
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius);
    overflow: hidden;
    height: 100%;
    transition: all var(--c7-transition);
}
.blog-card:hover{ transform: translateY(-5px); border-color: var(--c7-primary); }
.blog-card .blog-img{ aspect-ratio: 16/10; overflow: hidden; }
.blog-card .blog-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.blog-card:hover .blog-img img{ transform: scale(1.06); }
.blog-card .blog-body{ padding: 1.4rem; }
.blog-card .blog-meta{ color: var(--c7-muted); font-size: .82rem; margin-bottom: .5rem; }
.blog-card .blog-body h4{ font-size: 1.1rem; margin-bottom: .5rem; }
.blog-card .blog-body h4 a{ color: var(--c7-dark); }
.blog-card .blog-body h4 a:hover{ color: var(--c7-primary); }
.blog-card .blog-body p{ color: var(--c7-muted); font-size: .92rem; margin-bottom: 1rem; }
.blog-card .read-more{ font-weight: 600; color: var(--c7-primary); display: inline-flex; align-items: center; gap: .3rem; }
.blog-card .read-more:hover{ gap: .5rem; }

.contract-list{ list-style: none; padding: 0; margin: 0; }
.contract-list li{
    background: var(--c7-white);
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius);
    margin-bottom: 1rem;
    transition: all var(--c7-transition);
}
.contract-list li:hover{ border-color: var(--c7-primary); transform: translateY(-2px); }
.contract-list a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    color: var(--c7-dark);
    font-weight: 600;
}
.contract-list a i{ color: var(--c7-primary); }

.contract-content{
    background: var(--c7-white);
    border: 1px solid var(--c7-border);
    border-radius: var(--c7-radius-lg);
    padding: 3rem;
    line-height: 1.85;
    color: var(--c7-text);
}
.contract-content h1,
.contract-content h2,
.contract-content h3{ margin-top: 2rem; margin-bottom: 1rem; color: var(--c7-primary); }
.contract-content h2{ font-size: 1.4rem; }
.contract-content h3{ font-size: 1.15rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px){
    .hero-section{ padding: 120px 0 60px; }
    .hero-phone{ right: 10%; width: 140px; }
    .hero-phone img{ height: 260px; }
    .hero-card.card-1{ left: auto; right: 0; top: 5%; }
    .hero-card.card-2{ left: 0; top: auto; bottom: 5%; }
    .mobile-mockup{ min-height: 480px; }
    .mobile-mockup .phone-side{ display: none; }
    .pricing-card.featured{ transform: none; }
    .pricing-card.featured:hover{ transform: translateY(-6px); }
    section{ padding: 70px 0; }
    .cta-wrap{ padding: 2.5rem 1.75rem; text-align: center; }
    .cta-wrap .text-lg-end{ text-align: center !important; }
    .cta-wrap .text-lg-end .btn{ margin: .4rem; }
    .contract-content{ padding: 1.75rem; }
}

@media (max-width: 767.98px){
    .hero-meta{ gap: 1.25rem; }
    .meta-item strong{ font-size: 1.4rem; }
    .main-nav{ display: none; }
    .floating-wp, .floating-top{ width: 48px; height: 48px; font-size: 1.2rem; }
}

@media (max-width: 575.98px){
    .footer-bottom{ justify-content: center; text-align: center; }
    .footer-legal{ justify-content: center; }
}