/* ================================================================
   Euprathes Soft — Özel CSS
   Marka renkleri: Lacivert #1B3566 | Mavi #0AADEA
   ================================================================ */

/* Preloader devre dışı */
.loading-screen { display: none !important; }

/* ----------------------------------------------------------------
   Base / Typography
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    color: var(--ep-text);
    background: #fff;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--ep-dark);
    font-weight: 700;
    line-height: 1.25;
}

a { transition: var(--ep-transition); }

/* Bootstrap utility gap */
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

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

/* ----------------------------------------------------------------
   EP HEADER
   ---------------------------------------------------------------- */
.ep-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .3s ease;
}
.ep-header-scrolled .ep-navbar {
    box-shadow: 0 4px 24px rgba(27,53,102,.14);
}

/* ----------------------------------------------------------------
   EP CAMPAIGN BAR
   ---------------------------------------------------------------- */
.ep-campaign-bar {
    background: var(--ep-accent);
    color: #fff;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.ep-campaign-bar .swiper-slide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #fff;
}
.ep-campaign-btn {
    background: rgba(255,255,255,.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 4px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ep-transition);
}
.ep-campaign-btn:hover {
    background: rgba(255,255,255,.35);
    color: #fff;
}
.ep-campaign-close {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: var(--ep-transition);
    padding: 0;
    line-height: 1;
}
.ep-campaign-close:hover { background: rgba(255,255,255,.3); }

/* ----------------------------------------------------------------
   EP NAVBAR
   ---------------------------------------------------------------- */
.ep-navbar {
    background: #fff;
    padding: 14px 0;
    border-bottom: 1px solid rgba(27,53,102,.07);
}
.ep-navbar .nav-link {
    color: var(--ep-dark) !important;
    font-weight: 600;
    font-size: 14.5px;
    padding: 6px 12px !important;
    border-radius: 6px;
    transition: var(--ep-transition);
    position: relative;
}
.ep-navbar .nav-link:hover,
.ep-navbar .nav-link.active {
    color: var(--ep-accent) !important;
    background: rgba(10,173,234,.06);
}
.ep-navbar .nav-link.dropdown-toggle::after {
    border: none;
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    margin-left: 5px;
    vertical-align: middle;
}

/* Logo */
.ep-logo { display: inline-flex; align-items: center; }
.ep-logo img { max-height: 44px; width: auto; }

/* Hamburger toggler */
.ep-toggler {
    border: none;
    background: transparent;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.ep-toggler span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ep-dark);
    border-radius: 2px;
    transition: var(--ep-transition);
}
.ep-toggler:focus { outline: none; box-shadow: none; }

/* ----------------------------------------------------------------
   MEGA MENU
   ---------------------------------------------------------------- */
.ep-services-drop { position: static !important; }

.ep-mega-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    top: 100% !important;
    border: 1px solid #e8ecf4;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(27,53,102,.15);
    padding: 20px;
    background: #fff;
    display: none;
}
.ep-services-drop:hover .ep-mega-menu,
.ep-services-drop .dropdown-menu.show { display: block; }

.ep-mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--ep-dark);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 8px;
    transition: var(--ep-transition);
    margin: 3px 0;
}
.ep-mega-item:hover {
    background: var(--ep-light);
    color: var(--ep-accent);
}
.ep-mega-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(10,173,234,.1);
    color: var(--ep-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   LANGUAGE SWITCHER
   ---------------------------------------------------------------- */
.ep-lang-switcher { display: flex; align-items: center; gap: 6px; }
.ep-lang-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: var(--ep-dark);
    background: var(--ep-light);
    border: 1px solid #e2e8f0;
    transition: var(--ep-transition);
}
.ep-lang-link:hover {
    background: var(--ep-dark);
    color: #fff;
    border-color: var(--ep-dark);
}

/* ----------------------------------------------------------------
   HEADER BUTTONS
   ---------------------------------------------------------------- */
.ep-cta-btn {
    background: #25D366;
    color: #fff !important;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ep-transition);
}
.ep-cta-btn:hover {
    background: #1eb958;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37,211,102,.3);
}
.ep-contact-btn {
    background: transparent;
    color: var(--ep-dark) !important;
    border: 2px solid var(--ep-dark);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ep-transition);
}
.ep-contact-btn:hover {
    background: var(--ep-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   EP FOOTER
   ---------------------------------------------------------------- */
.ep-footer { background: var(--ep-dark); }

.ep-footer-top {
    padding: 70px 0 50px;
}

.ep-footer-about {
    color: rgba(255,255,255,.6);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

.ep-footer-heading {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 12px;
}
.ep-footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--ep-accent);
    border-radius: 2px;
}

.ep-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ep-footer-links li { margin-bottom: 10px; }
.ep-footer-links a {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--ep-transition);
}
.ep-footer-links a::before {
    content: '›';
    color: var(--ep-accent);
    font-size: 16px;
    line-height: 1;
}
.ep-footer-links a:hover {
    color: var(--ep-accent);
    padding-left: 4px;
}

.ep-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ep-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    line-height: 1.5;
}
.ep-footer-contact li i {
    color: var(--ep-accent);
    width: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}
.ep-footer-contact a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
}
.ep-footer-contact a:hover { color: var(--ep-accent); }

.ep-footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.ep-social-link {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 15px;
    border: 1px solid rgba(255,255,255,.1);
    transition: var(--ep-transition);
}
.ep-social-link:hover {
    background: var(--ep-accent);
    border-color: var(--ep-accent);
    color: #fff;
    transform: translateY(-2px);
}

.ep-footer-wa-btn {
    background: #25D366;
    color: #fff !important;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: var(--ep-transition);
}
.ep-footer-wa-btn:hover { background: #1eb958; color: #fff !important; }

.ep-footer-call-btn {
    background: rgba(255,255,255,.1);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.2);
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: var(--ep-transition);
}
.ep-footer-call-btn:hover {
    background: rgba(255,255,255,.2);
    color: #fff !important;
}

.ep-footer-bottom {
    background: rgba(0,0,0,.2);
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.07);
}
.ep-footer-bottom p { color: rgba(255,255,255,.5); font-size: 13px; margin: 0; }
.ep-footer-bottom-link {
    color: rgba(255,255,255,.5);
    text-decoration: none;
    font-size: 13px;
    transition: var(--ep-transition);
}
.ep-footer-bottom-link:hover { color: var(--ep-accent); }

/* ----------------------------------------------------------------
   EP SCROLL TO TOP
   ---------------------------------------------------------------- */
.ep-scroll-top {
    position: fixed;
    bottom: 90px;
    right: 25px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ep-dark);
    color: #fff;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: var(--ep-transition);
    box-shadow: var(--ep-shadow);
}
.ep-scroll-top:hover { background: var(--ep-accent); transform: translateY(-2px); }
.ep-scroll-top.show  { display: flex; }

@media (max-width: 991px) {
    .ep-scroll-top { bottom: 150px; right: 15px; }
}

/* ----------------------------------------------------------------
   MOBILE NAV (collapsed)
   ---------------------------------------------------------------- */
@media (max-width: 991px) {
    .ep-navbar .navbar-collapse {
        background: #fff;
        padding: 16px;
        border-top: 1px solid #e8ecf4;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 30px rgba(27,53,102,.1);
    }
    .ep-mega-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #e8ecf4 !important;
        border-radius: 8px !important;
        margin: 8px 0 0 !important;
        padding: 12px !important;
    }
    .ep-mega-item { padding: 8px 10px; }
}


:root {
    --ep-dark:        #1B3566;
    --ep-dark-hover:  #122650;
    --ep-accent:      #0AADEA;
    --ep-accent-hover:#0090C8;
    --ep-white:       #FFFFFF;
    --ep-light:       #F4F7FC;
    --ep-text:        #2D3748;
    --ep-text-muted:  #718096;
    --ep-radius:      12px;
    --ep-shadow:      0 8px 32px rgba(27,53,102,.12);
    --ep-transition:  all .3s cubic-bezier(.4,0,.2,1);
}

/* ----------------------------------------------------------------
   Spacing & Layout Utilities
   ---------------------------------------------------------------- */
.space    { padding: 100px 0; }
.space-top    { padding-top: 100px; }
.space-bottom { padding-bottom: 100px; }

/* Bootstrap 5 gy-* extension (Bootstrap uses --bs-gutter-y) */
.gy-30 { --bs-gutter-y: 30px; }
.gy-40 { --bs-gutter-y: 40px; }
.gy-50 { --bs-gutter-y: 50px; }

@media (max-width: 767px) {
    .space    { padding: 60px 0; }
    .space-top    { padding-top: 60px; }
    .space-bottom { padding-bottom: 60px; }
}

/* ----------------------------------------------------------------
   Section Title / Sub-title — only brand colour overrides, sizes left to template
   ---------------------------------------------------------------- */
.title-wrap       { max-width: 100%; }
.title-wrap.two   { text-align: center; }
.title-wrap.three { max-width: 540px; }

/* ----------------------------------------------------------------
   Marka Renk Override (Inotek --thm-base → EP accent)
   ---------------------------------------------------------------- */
.text-theme  { color: var(--ep-accent) !important; }
.text-accent { color: var(--ep-accent) !important; }

/* Newsletter CTA button wrapper */
.newsletter-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

/* ep-lang-switcher renk uyumu — header-style6 şeffaf header üzerinde (beyaz metin) */
.tv-header.header-style6 .ep-lang-link {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.3);
    color: #fff;
}
.tv-header.header-style6 .ep-lang-link:hover {
    background: rgba(255,255,255,.3);
    border-color: #fff;
    color: #fff;
}
/* sticky header'da normal renk */
.sticky-header .ep-lang-link {
    background: var(--ep-light);
    border-color: #e2e8f0;
    color: var(--ep-dark);
}

/* Euprathes brand colour override on template buttons (no !important on radius so br-30 works) */
.theme-btn {
    background: var(--ep-dark);
    border-color: var(--ep-dark);
}
.theme-btn:hover {
    background: var(--ep-accent);
    border-color: var(--ep-accent);
}
/* WhatsApp flavour */
.theme-btn.whatsapp-btn {
    background: #25D366 !important;
    border-color: #25D366 !important;
}
.theme-btn.whatsapp-btn:hover {
    background: #1eb958 !important;
    border-color: #1eb958 !important;
}
/* style2 — transparent/outline variant used by service cards */
.theme-btn.style2, .theme-btn.outline-btn {
    background: transparent;
    border: 2px solid var(--ep-dark);
    color: var(--ep-dark);
}
.theme-btn.style2:hover, .theme-btn.outline-btn:hover {
    background: var(--ep-dark);
    color: #fff;
}

/* ----------------------------------------------------------------
   Buttons — link-effect (Inotek hover text effect — template handles animation)
   ---------------------------------------------------------------- */
.link-effect { overflow: hidden; display: inline-block; }

/* ----------------------------------------------------------------
   Extra spacing utilities missing from euprathes.css
   ---------------------------------------------------------------- */
.mt-50  { margin-top: 50px !important; }
.mt-60  { margin-top: 60px !important; }
.mb-40  { margin-bottom: 40px !important; }
.mb-50  { margin-bottom: 50px !important; }
.mb-15  { margin-bottom: 15px !important; }
.mt-15  { margin-top: 15px !important; }
.pb-40  { padding-bottom: 40px !important; }
.pt-40  { padding-top: 40px !important; }

/* border2 — service card divider */
.border2 {
    display: block;
    height: 1px;
    background: #e8ecf4;
}

/* Images */
.img-anim-left, .img-anim-right { width: 100%; border-radius: var(--ep-radius); display: block; }

/* count-number / odometer */
.count-number { font-size: 32px; font-weight: 800; color: var(--ep-accent); line-height: 1; }

/* ----------------------------------------------------------------
   Marquee / Services Strip — speed controlled by marquee.min.js
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Header CTA butonu (eski) */
.header-cta-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ----------------------------------------------------------------
   Background Utility — ep-only classes (don't override template bg-light)
   ---------------------------------------------------------------- */
.bg-dark-blue  { background: var(--ep-dark) !important; }
.bg-accent     { background: var(--ep-accent) !important; }
.ep-bg-light   { background: var(--ep-light) !important; }
.text-white-60 { color: rgba(255,255,255,.65) !important; }

/* ----------------------------------------------------------------
   Header — header-style6 is position:absolute overlay on hero (transparent bg)
   ---------------------------------------------------------------- */
/* style6: transparent nav on hero — let template CSS handle white text */
.tv-header.header-style6 .main-wrapper { background: transparent; box-shadow: none; }

/* Hero slider sol taraf gradient — koyu antrasit (logo kontrastı için) */
.tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area::before {
    background-image: linear-gradient(90deg, rgba(14, 14, 22, 0.95) 0%, rgba(14, 14, 22, 0.95) 40%, rgba(14, 14, 22, 0) 58%, rgba(14, 14, 22, 0) 100%) !important;
}
@media (max-width: 767px) {
    .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area::before {
        background-image: linear-gradient(100deg, rgba(14, 14, 22, 0.95) 0%, rgba(14, 14, 22, 0.95) 38%, rgba(14, 14, 22, 0) 85%, rgba(14, 14, 22, 0) 100%) !important;
    }
}

/* sticky header stays white */
.sticky-header .main-menu .navigation > li > a { color: var(--ep-dark); }
.sticky-header .main-menu .navigation > li > a:hover { color: var(--ep-accent); }

/* ----------------------------------------------------------------
   Contact Section Five — dark navy bg fallback (bg image garantisi)
   ---------------------------------------------------------------- */
.tv-contact-section.style-5 {
    background-color: #04103e !important;
}
.tv-contact-section.style-5 .title-wrap.white .sub-title-2,
.tv-contact-section.style-5 .title-wrap.white h2.sec-title {
    color: #fff !important;
}
.tv-contact-section.style-5 .contact-form.style-5 {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    margin-top: 25px;
}
.tv-contact-section.style-5 .contact-form.style-5 h2.sec-title {
    color: var(--ep-dark);
    text-align: center;
    margin-bottom: 30px;
    font-size: 22px;
}
@media (max-width: 575px) {
    .tv-contact-section.style-5 .contact-form.style-5 {
        padding: 25px 20px;
    }
}

/* Dil seçici */
.lang-switcher { display: flex; gap: 8px; }
.lang-item {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: var(--ep-transition);
}
.lang-item.active, .lang-item:hover {
    color: #fff;
    background: rgba(255,255,255,.15);
}
.header-phone {
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 15px;
}
.header-phone:hover { color: var(--ep-accent); }

/* ----------------------------------------------------------------
   Hero Section — style-6 template handles layout, EP only overrides accent colour
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Marquee
   ---------------------------------------------------------------- */
.tv-marquee-section.bg-accent .item { color: #fff !important; font-weight: 600; }
.tv-marquee-section.bg-accent .item i { margin-right: 8px; }

/* ----------------------------------------------------------------
   Hizmet Kartları
   ---------------------------------------------------------------- */
.tv-service-single-box .inner-box {
    background: #fff;
    border-radius: var(--ep-radius);
    padding: 35px 28px;
    border: 1px solid #e8ecf4;
    transition: var(--ep-transition);
    height: 100%;
}
.tv-service-single-box .inner-box:hover {
    border-color: var(--ep-accent);
    box-shadow: var(--ep-shadow);
    transform: translateY(-4px);
}
.tv-service-single-box .icon {
    font-size: 36px;
    margin-bottom: 20px;
    display: block;
}
.tv-service-single-box .title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ep-dark);
    margin-bottom: 0;
}
.tv-service-single-box .text { color: var(--ep-text-muted); line-height: 1.7; }

/* ----------------------------------------------------------------
   Blog & Proje Kartları
   ---------------------------------------------------------------- */
.tv-blog-box, .tv-project-single-box {
    background: #fff;
    border-radius: var(--ep-radius);
    border: 1px solid #e8ecf4;
    overflow: hidden;
    transition: var(--ep-transition);
}
.tv-blog-box:hover, .tv-project-single-box:hover {
    box-shadow: var(--ep-shadow);
    transform: translateY(-4px);
}
.tv-blog-box .blog-img img,
.tv-project-single-box .project-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.tv-blog-box .blog-content,
.tv-project-single-box .project-content { padding: 25px; }
.blog-cat, .project-cat {
    background: var(--ep-light);
    color: var(--ep-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
}
.tv-blog-box h4 a, .tv-project-single-box h4 a {
    color: var(--ep-dark);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}
.tv-blog-box h4 a:hover, .tv-project-single-box h4 a:hover { color: var(--ep-accent); }
.blog-meta { display: flex; gap: 15px; color: var(--ep-text-muted); font-size: 13px; margin-top: 12px; }
.read-more {
    color: var(--ep-accent);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.read-more:hover { color: var(--ep-dark); }

/* ----------------------------------------------------------------
   Referanslar (Testimonials)
   ---------------------------------------------------------------- */
.tv-testimonial-box {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--ep-radius);
    padding: 35px;
}
.testimonial-text {
    color: rgba(255,255,255,.85);
    font-size: 16px;
    line-height: 1.8;
    font-style: italic;
    margin: 15px 0 25px;
}
.author-info { display: flex; align-items: center; gap: 15px; }
.author-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ep-accent);
}
.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}
.author-info h5 { color: #fff; font-size: 15px; margin: 0; }
.author-info span { color: rgba(255,255,255,.6); font-size: 13px; }

/* ----------------------------------------------------------------
   Feature Grid (Neden Biz)
   ---------------------------------------------------------------- */
.feature-grid { display: flex; flex-direction: column; gap: 20px; }
.feature-item { display: flex; gap: 15px; align-items: flex-start; }
.feature-item .icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(10,173,234,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-accent);
    font-size: 18px;
    flex-shrink: 0;
}
.feature-item h4 { color: #fff; font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.feature-item p  { color: rgba(255,255,255,.65); font-size: 14px; margin: 0; line-height: 1.6; }

/* ----------------------------------------------------------------
   CTA Section
   ---------------------------------------------------------------- */
.tv-cta-section .cta-title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.tv-cta-section .cta-desc  { font-size: 17px; opacity: .85; }
.cta-btns { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------
   Kampanya Slider Bandı
   ---------------------------------------------------------------- */
.campaign-slider-bar {
    background: var(--ep-dark);
    padding: 12px 0;
    position: relative;
    z-index: 10;
}
.campaign-slide-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}
.campaign-slide-inner .campaign-text strong { font-size: 14px; }
.campaign-slide-inner .campaign-text span   { font-size: 13px; opacity: .8; margin-left: 8px; }
.campaign-slide-inner .sm-btn {
    font-size: 12px;
    padding: 6px 16px;
    margin-left: auto;
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   FLOATING WHATSAPP BUTONU
   ---------------------------------------------------------------- */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 25px;
    z-index: 9999;
    background: #25D366;
    color: #fff;
    border-radius: 50px;
    padding: 14px 22px 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 30px rgba(37,211,102,.4);
    transition: var(--ep-transition);
    animation: wpPulse 2.5s infinite;
}
.floating-whatsapp:hover {
    background: #1eb958;
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 40px rgba(37,211,102,.5);
}
.floating-whatsapp i { font-size: 24px; }
.floating-whatsapp .float-label { white-space: nowrap; }

@keyframes wpPulse {
    0%, 100% { box-shadow: 0 8px 30px rgba(37,211,102,.4); }
    50%       { box-shadow: 0 8px 40px rgba(37,211,102,.65); }
}

/* Mobilde sadece ikon göster */
@media (max-width: 575px) {
    .floating-whatsapp {
        border-radius: 50%;
        padding: 16px;
        bottom: 80px;
        right: 15px;
    }
    .floating-whatsapp .float-label { display: none; }
}

/* ----------------------------------------------------------------
   MOBİL STICKY BAR
   ---------------------------------------------------------------- */
.mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    display: flex;
    height: 58px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.12);
}
.mobile-sticky-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
}
.sticky-call     { background: var(--ep-dark); }
.sticky-call:hover { background: var(--ep-dark-hover); color: #fff; }
.sticky-whatsapp { background: #25D366; }
.sticky-whatsapp:hover { background: #1eb958; color: #fff; }

/* Mobil sticky bar için body padding */
@media (max-width: 991px) {
    body { padding-bottom: 58px; }
    .floating-whatsapp { bottom: 75px; }
}

/* ----------------------------------------------------------------
   POPUP KAMPANYA
   ---------------------------------------------------------------- */
.campaign-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: var(--ep-transition);
}
.campaign-popup-overlay.show {
    opacity: 1;
    visibility: visible;
}
.campaign-popup {
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    position: relative;
    transform: scale(.9);
    transition: var(--ep-transition);
    box-shadow: 0 25px 80px rgba(0,0,0,.3);
}
.campaign-popup-overlay.show .campaign-popup { transform: scale(1); }
.popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-dark);
    font-size: 14px;
    z-index: 2;
    transition: var(--ep-transition);
}
.popup-close:hover { background: var(--ep-dark); color: #fff; }
.popup-image { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.popup-content { padding: 30px; text-align: center; }
.popup-content h3 { color: var(--ep-dark); font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.popup-content p  { color: var(--ep-text-muted); line-height: 1.6; margin: 0 0 10px; }
.popup-cta { margin-top: 20px; display: inline-block; }

/* ----------------------------------------------------------------
   Hizmet Detay Sayfası
   ---------------------------------------------------------------- */
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--ep-light);
    border-radius: 8px;
}
.benefit-item i { color: var(--ep-accent); font-size: 16px; margin-top: 2px; flex-shrink: 0; }

.process-steps { display: flex; flex-direction: column; gap: 0; }
.process-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 10px;
    margin-bottom: 12px;
    transition: var(--ep-transition);
}
.process-step:hover { border-color: var(--ep-accent); box-shadow: var(--ep-shadow); }
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--ep-dark);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-content h4 { color: var(--ep-dark); font-size: 17px; font-weight: 700; margin: 0 0 5px; }
.step-content p  { color: var(--ep-text-muted); margin: 0; font-size: 14px; line-height: 1.6; }

.service-end-cta .cta-box { padding: 40px; }

/* Sidebar */
.sticky-sidebar { position: sticky; top: 100px; }
.sidebar-widget .service-list { list-style: none; padding: 0; margin: 0; }
.service-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    color: var(--ep-dark);
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    font-weight: 500;
    transition: var(--ep-transition);
}
.service-link:hover { color: var(--ep-accent); padding-left: 5px; }
.service-link i:last-child { margin-left: auto; font-size: 12px; }
.widget-box { box-shadow: var(--ep-shadow); }

/* ----------------------------------------------------------------
   İletişim Sayfası
   ---------------------------------------------------------------- */
.contact-form-box, .contact-info-box { box-shadow: var(--ep-shadow); }
.info-item { display: flex; align-items: flex-start; gap: 14px; }
.info-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(10,173,234,.15);
    color: var(--ep-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.info-label { font-size: 12px; color: rgba(255,255,255,.6); display: block; margin-bottom: 2px; }
.info-value { color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
a.info-value:hover { color: var(--ep-accent); }

/* ----------------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------------- */
.tv-breadcumb-section {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, var(--ep-dark) 0%, #0d2148 100%);
}
.breadcumb-title { color: #fff; font-size: clamp(28px, 4vw, 46px); font-weight: 800; margin: 10px 0 20px; }
.breadcumb-list {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.breadcumb-list li { color: rgba(255,255,255,.6); font-size: 14px; }
.breadcumb-list li a { color: rgba(255,255,255,.7); text-decoration: none; }
.breadcumb-list li a:hover { color: var(--ep-accent); }
.breadcumb-list li:not(:last-child)::after { content: '/'; margin-left: 8px; }
.breadcumb-list li.active { color: var(--ep-accent); }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.tv-footer-section { background: var(--ep-dark); }
.footer-text { color: rgba(255,255,255,.65); line-height: 1.7; font-size: 14px; }
.footer-title { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 20px; }
.footer-menu { list-style: none; padding: 0; margin: 0; }
.footer-menu li { margin-bottom: 10px; }
.footer-menu li a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: 14px;
    transition: var(--ep-transition);
    display: flex;
    align-items: center;
    gap: 6px;
}
.footer-menu li a:hover { color: var(--ep-accent); padding-left: 5px; }
.footer-contact .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: rgba(255,255,255,.7);
    font-size: 14px;
}
.footer-contact .contact-item i { color: var(--ep-accent); margin-top: 2px; width: 16px; }
.footer-contact .contact-item a { color: rgba(255,255,255,.7); text-decoration: none; }
.footer-contact .contact-item a:hover { color: var(--ep-accent); }
.social-links { display: flex; gap: 10px; flex-wrap: wrap; }
.social-links a {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--ep-transition);
}
.social-links a:hover { background: var(--ep-accent); color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
}
.copyright { color: rgba(255,255,255,.5); font-size: 13px; margin: 0; }
.footer-bottom-links a { color: rgba(255,255,255,.5); text-decoration: none; font-size: 13px; }
.footer-bottom-links a:hover { color: var(--ep-accent); }
.footer-bottom-links span { color: rgba(255,255,255,.3); margin: 0 8px; }

/* ----------------------------------------------------------------
   404 Sayfası
   ---------------------------------------------------------------- */
.tv-error-section { padding: 100px 0; text-align: center; }
.error-number {
    font-size: 140px;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 3px var(--ep-dark);
    line-height: 1;
    margin-bottom: 20px;
}
.error-btns { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------
   Genel Yardımcılar
   ---------------------------------------------------------------- */
.br-20 { border-radius: 20px; }
.br-30 { border-radius: 30px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.p-40  { padding: 40px; }
.p-35  { padding: 35px; }
.mbm-d-none { display: block; }
@media (max-width: 575px) { .mbm-d-none { display: none; } }

/* Scroll-to-top (EP custom) */
.scroll-top {
    position: fixed;
    bottom: 30px;
    left: 25px;
    right: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ep-dark);
    color: #fff;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: var(--ep-transition);
    box-shadow: var(--ep-shadow);
}
.scroll-top:hover { background: var(--ep-accent); }
.scroll-top.show  { display: flex; }

/* Template scroll-to-top butonu (.scrollToTop) — sola al */
.scrollToTop {
    right: auto !important;
    left: 25px !important;
    bottom: 30px !important;
}

@media (max-width: 991px) {
    .scroll-top   { bottom: 75px; left: 15px; }
    .scrollToTop  { left: 15px !important; bottom: 75px !important; }
}