/**
 * Siaflex Developer Theme - Custom CSS
 * Preserves original site design within WordPress
 *
 * @package Siaflex
 */

/* ===========================
   GENERAL STYLES
   =========================== */
body {
    overflow-x: hidden;
}

.box-container.limit-width {
    max-width: 100%;
    overflow: hidden;
}

/* ===========================
   TOP BAR / NEWS BAR
   theme.css handles: position: absolute, top: 0, z-index: 12
   [data-background="light"] handles: background-color: #ebeff5
   Do NOT override position or padding - it must be exactly 40px tall
   to align with .menu-wrap top: 40px
   =========================== */
.infonews .badge.bg-purple {
    background-color: #1eb390 !important;
}

.infonews .golink {
    color: #333;
    text-decoration: none;
}

.infonews .golink:hover {
    color: #1eb390;
}

.infonews-nav .iconews {
    margin-left: 15px;
    text-decoration: none;
}

.infonews-nav .tabphone {
    font-weight: 600;
}

/* ===========================
   NAVIGATION
   theme.css handles: position: absolute, top: 40px, padding: 15px 0
   [data-background="light"] handles: background-color: #fff
   .menu-wrap.fixed (added by theme JS on scroll) handles sticky behavior
   Do NOT override position/top - it must start at exactly 40px to sit
   seamlessly below .infonews
   =========================== */

/* ===========================================
   MEGA MENU OVERRIDES
   theme.min.css already handles base megamenu styles:
   - .megamenu,.megamenu-list { left:0; right:0 } (full-width)
   - .megamenu { background:0 0!important } (transparent)
   - .megamenu .service-list { padding:30px; background:#fff; border-radius:12px }
   - .megamenu .start-offer .inner { border-radius:12px; padding:30px }
   Only add extras here that theme.min.css doesn't cover.
   =========================================== */

/* Menu level hierarchy (for services mega menu) */
.menu-level-1 {
    font-weight: 700 !important;
}

.menu-level-2 {
    font-weight: 500 !important;
    margin-left: 10px;
}

.menu-level-3 {
    font-weight: 500 !important;
    margin-left: 20px;
}

/* Our Services mega menu margin (from original site) */
.our-services-margin-left {
    margin-left: 220px !important;
}

/* Service list max-height */
.service-list {
    max-height: 400px;
    overflow-y: auto;
}

/* ===========================================
   LOGO SIZING (v59.1)
   theme.min.css has fixed `width: 200px; max-height: 47px` for
   .logo-menu / .logo-footer which distorts logos whose natural
   aspect ratio differs from 4:1. Override with auto sizing and
   max-bounds so the natural ratio is preserved regardless of
   the uploaded image dimensions.
   =========================================== */
.logo-menu,
.logo-footer {
    width: auto !important;
    height: auto !important;
    max-width: 220px;
    max-height: 50px;
    object-fit: contain;
}

.footer .logo-footer {
    max-width: 240px;
    max-height: 60px;
}

@media (max-width: 991px) {
    .logo-menu,
    .logo-footer {
        max-width: 180px;
        max-height: 42px;
    }
}

/* Mega menu row — even alignment regardless of item count (v65).
   Each .service column already has its own col-N width chosen in PHP via
   siaflex_mega_col_class(); this rule just makes sure the row wraps and
   aligns consistently and that any odd remainder centers itself. */
.mega-row-evenly {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
.mega-row-evenly > .service {
    display: flex;
}
.mega-row-evenly > .service > .media-body {
    width: 100%;
}

/* Narrow mega menu (used on Contact menu after Premium Destek removal v58) */
/* Anchor positioning to the trigger menu-item so dropdown drops below İletişim,
   not the far right edge of the nav container. */
.menu-item-has-children.menu-last {
    position: relative;
}

.sub-menu.megamenu-narrow {
    left: auto;
    right: 0;
    width: 480px;
    max-width: calc(100vw - 40px);
}

.sub-menu.megamenu-narrow > .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 991px) {
    .menu-item-has-children.menu-last {
        position: static;
    }
    .sub-menu.megamenu-narrow {
        position: static;
        width: auto;
        right: auto;
    }
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle .icon {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 4px 0;
    transition: 0.3s;
}

@media (max-width: 991px) {
    .menu-toggle {
        display: block;
        float: right;
    }

    .main-menu {
        display: none;
        width: 100%;
        text-align: left;
    }

    .menu-wrap.active .main-menu {
        display: block;
        margin-top: 30px;
    }

    .main-menu .menu-item {
        display: block;
    }

    .sub-menu.megamenu,
    .sub-menu.megamenu-list {
        position: static;
        min-width: auto;
        box-shadow: none;
    }
}

/* Language Switcher */
.language-switcher {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.language-switcher .lang-btn {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.language-switcher .lang-btn.active {
    background: #1eb390;
    color: #fff;
    border-color: #1eb390;
}

/* ===========================
   HERO SLIDER
   =========================== */
.main-container.slider {
    position: relative;
    overflow: hidden;
}

.silder-container,
.slider-container {
    height: 1000px !important;
}

.carousel-cell {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-cell .slider-content {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}

.carousel-cell .svg.custom-element-right {
    position: absolute;
    right: -5%;
    top: 10%;
    max-width: 50%;
    z-index: 1;
}

.carousel-cell .heading {
    font-size: 36pt;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
}

.carousel-cell .subheading {
    font-size: 16pt;
    color: #333;
    margin-top: 15px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .silder-container {
        height: 600px !important;
    }
    .carousel-cell {
        height: 600px !important;
    }
    .carousel-cell .heading {
        font-size: 24pt !important;
    }
    .carousel-cell .subheading {
        font-size: 14pt !important;
    }
    .carousel-cell .svg.custom-element-right {
        display: none;
    }
}

/* ===========================
   SLICK CLIENTS SLIDER
   =========================== */
.slick.clients {
    padding: 70px 0;
}

.slick.clients img {
    max-width: 90% !important;
    height: auto;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.slick.clients img:hover {
    opacity: 1;
}

/* ===========================
   SERVICES SECTION
   =========================== */
.services .section-heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.services .section-subheading {
    font-size: 16px;
    margin-bottom: 40px;
}

.service-section {
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: 350px;
}

.service-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.service-section hr {
    border-color: #eee;
}

/* ===========================
   WHY SIAFLEX SECTION
   =========================== */
.sec-bg4.exapath {
    background-color: #474d51 !important;
    padding: 80px 0;
}

.service-section2 {
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
}

/* ===========================
   BUTTONS
   theme.min.css handles button styles via [data-color] selectors
   =========================== */

/* ===========================
   BANNER / PAGE HEADER
   =========================== */
.top-header {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 50px;
}

.top-header .heading {
    font-size: 36px;
    font-weight: 700;
    color: #1eb390;
}

.top-header .subheading {
    font-size: 16px;
    color: #333;
    margin-top: 15px;
}

/* Banner with overlay image (Careers, FAQ, Partners, etc.)
   Matches original siaflex.com layout: white bg, image right */
.top-header.overlay {
    position: relative;
    width: 100%;
    height: 425px;
    max-height: 425px;
    overflow: hidden;
    background-color: #fff;
}

.top-header.overlay:before {
    background-color: rgba(0,0,0,0) !important;
}

.top-header.overlay .img-defaultbanner {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    width: 60% !important;
    height: 100% !important;
    min-width: auto !important;
    min-height: auto !important;
    object-fit: cover !important;
    object-position: center !important;
}

.top-header.overlay .container {
    position: relative;
    z-index: 2;
}

.top-header.overlay .wrapper .heading {
    color: #00a651 !important;
    text-shadow: none !important;
}

.top-header.overlay .wrapper .subheading {
    color: #212122 !important;
    font-weight: 600;
    text-shadow: none !important;
}

@media (max-width: 768px) {
    .top-header.overlay {
        height: 250px;
    }
    .top-header.overlay .img-defaultbanner {
        width: 100%;
        opacity: 0.3;
    }
    .top-header.overlay .wrapper {
        margin-top: -20px;
    }
}

@media (max-width: 480px) {
    .top-header.overlay {
        height: 200px;
    }
    .top-header.overlay .wrapper .heading {
        color: #fff !important;
    }
    .top-header.overlay .wrapper .subheading {
        color: #eaeaea !important;
    }
}

/* ===========================
   BLOG / NEWS CARDS
   =========================== */
.blog-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card .blog-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.blog-card .blog-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card .blog-title a:hover {
    color: #1eb390;
}

/* ===========================
   CONTACT FORM
   vendors.min.css handles .cd-filter-block input styling
   theme.min.css handles .form-contact layout
   =========================== */

/* ===========================
   FOOTER
   theme.min.css light-mode sets: bg #ebeff5, headings #212122, links #414142
   WordPress core injects default link styles (green/underline) that override
   the theme's footer link styling. Force correct colors with !important.
   Always use light footer regardless of data-background attribute.
   =========================== */
.footer {
    background-color: #ebeff5 !important;
}

.footer .logo-bg {
    opacity: 0.05 !important;
}

.footer .heading {
    color: #212122 !important;
    font-size: 22px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 10px;
}

.footer .footer-menu .menu-item a {
    color: #414142 !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 600;
    transition: .3s;
}

.footer .footer-menu .menu-item a:hover {
    color: grey !important;
    text-decoration: none !important;
}

.footer .footer-menu .menu-item {
    list-style-type: none;
    margin-top: 15px;
    margin-left: 0;
    display: block;
    text-align: left;
}

.footer .footer-menu {
    margin: 0;
    padding: 0;
    float: none;
}

/* Homepage FAQ accordion (v65) — green brand styling, slim borders. */
.siaflex-home-faq .siaflex-faq-accordion .accordion-item {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.siaflex-home-faq .siaflex-faq-accordion .accordion-button {
    background-color: #fff;
    color: #1c1d1f;
    font-weight: 600;
    font-size: 17px;
    padding: 16px 20px 12px;
    line-height: 1.35;
    box-shadow: none;
}
.siaflex-home-faq .siaflex-faq-accordion .accordion-button:not(.collapsed) {
    background-color: #f0fbf6;
    color: #1eb390;
}
.siaflex-home-faq .siaflex-faq-accordion .accordion-button:focus {
    box-shadow: 0 0 0 .15rem rgba(30, 179, 144, 0.25);
}
.siaflex-home-faq .siaflex-faq-accordion .siaflex-faq-q-num {
    color: #1eb390;
    font-weight: 700;
    min-width: 32px;
    display: inline-block;
}
.siaflex-home-faq .siaflex-faq-accordion .accordion-body {
    padding: 4px 20px 14px 20px;
    color: #4c4a4a;
    font-size: 15.5px;
    line-height: 1.65;
}
.siaflex-home-faq .siaflex-faq-accordion .accordion-body p:last-child {
    margin-bottom: 0;
}
@media (max-width: 575px) {
    .siaflex-home-faq .siaflex-faq-accordion .accordion-button { font-size: 15px; padding: 12px 16px 10px; }
    .siaflex-home-faq .siaflex-faq-accordion .accordion-body { padding: 2px 16px 10px 16px; font-size: 14.5px; }
}

/* TR/EN language switch — re-position to align with the main navigation
   bar (v65). theme.min.css originally placed it at top:150px because the
   old top news bar pushed the nav down; that bar was removed in v64 so
   the switch was floating in mid-air. Snap it back next to the menu. */
.toplang {
    top: 18px !important;
    right: 30px !important;
    line-height: 1 !important;
}

@media (max-width: 991px) {
    .toplang {
        top: 12px !important;
        right: 70px !important;
    }
}

.footer .copyright {
    color: #414142 !important;
}

.footer .footer-phone {
    color: #414142;
    font-size: 14px;
}

.footer .footer-phone a {
    color: #414142 !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer .footer-phone a:hover {
    color: #1eb390 !important;
}

.footer .footer-phone i {
    color: #1eb390;
}

.footer .footer-menu .menu-item.by {
    font-size: 14px;
    color: #414142 !important;
}


/* ===========================
   GO TOP BUTTON
   theme.min.css handles .cd-top styles
   =========================== */

/* ===========================
   LOADING SPINNER
   theme.min.css handles #spinner-area and .spinner styles
   =========================== */

/* ===========================
   COLORS & UTILITIES
   theme.min.css handles these via [data-background] and [data-color] selectors
   =========================== */

/* ===========================
   BODY BORDERS
   Only visible in frame layout mode (data-layout="frame")
   theme.css already handles this with [data-layout="frame"] selectors
   In wide layout mode, body borders should be invisible
   =========================== */

/* ===========================
   PAGINATION
   =========================== */
.pagination-wrap .nav-links {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.pagination-wrap .page-numbers {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
}

.pagination-wrap .page-numbers.current,
.pagination-wrap .page-numbers:hover {
    background: #1eb390;
    color: #fff;
    border-color: #1eb390;
}

/* ===========================
   FAQ ACCORDION
   =========================== */
.accordion-button:not(.collapsed) {
    background-color: #f0faf6;
    color: #1eb390;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(30, 179, 144, 0.25);
}

/* ===========================
   RESPONSIVE SERVICE LIST
   =========================== */
.service-list-items {
    list-style: none;
    padding: 0;
}

.service-list-items li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.service-list-items li i {
    margin-right: 8px;
}

/* ===========================
   BADGE
   =========================== */
.badge.bg-purple {
    background-color: #1eb390 !important;
    font-weight: 500;
    padding: 6px 12px;
}

/* ===========================
   SECTION SPACING
   theme.min.css handles .sec-normal, .sec-bg2, padding utilities
   =========================== */

/* ===========================
   ADMIN BAR FIX
   Only for .fixed state (position: fixed on scroll) - must account for admin bar height
   Default state (position: absolute, top: 40px) doesn't need adjustment
   since it's relative to .box-container, not the viewport
   =========================== */
.admin-bar .menu-wrap.fixed {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .menu-wrap.fixed {
        top: 46px;
    }
}

/* ===========================
   OFFCANVAS SIDEBAR – Campaign Cards
   Base offcanvas styles live in theme.css (.offcanvas.offcanvas-box .card, etc.)
   =========================== */
.offcanvas-campaign-card a {
    text-decoration: none;
    color: inherit;
}

.offcanvas-campaign-card .card-body {
    padding: 12px 15px;
}

.offcanvas-campaign-card .plans.badge.feat {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}

.offcanvas-widgets {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.offcanvas-widget + .offcanvas-widget {
    margin-top: 15px;
}

/* ===========================
   SERVICE PAGE - TALL PRICING CARDS
   Matches original Siaflex site structure with
   special-pricing-row/wrapper classes
   =========================== */
.special-pricing-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.special-pricing-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    min-height: 700px;
    flex: 1 1 0;
    min-width: 280px;
    border-radius: 12px;
}

.special-pricing-wrapper .top-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.special-pricing-wrapper .top-content .title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.special-pricing-wrapper .top-content .fromer {
    flex: 1;
}

.special-pricing-wrapper .top-content .btn {
    align-self: center;
    margin-top: auto;
}

.special-pricing-wrapper .top-content .lazyload img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    margin-bottom: 20px;
}

/* Dynamic height classes matching original site */
.dinamikh4 { min-height: 750px !important; }
.dinamikh5 { min-height: 700px !important; }
.dinamikt1 { min-height: 80px !important; }
.dinamikst1 { min-height: 200px !important; }

@media only screen and (max-width: 1400px) {
    .dinamikh4 { min-height: 700px !important; }
    .dinamikh5 { min-height: 650px !important; }
}

@media only screen and (max-width: 1200px) {
    .dinamikh4 { min-height: 600px !important; }
    .dinamikh5 { min-height: 550px !important; }
}

@media only screen and (max-width: 991px) {
    .special-pricing-row {
        flex-direction: column;
    }
    .special-pricing-wrapper {
        min-height: auto !important;
    }
    .dinamikh4 { min-height: auto !important; }
    .dinamikh5 { min-height: auto !important; }
}

/* ===========================
   SABLON2 – SERVICE TYPE 2
   =========================== */

/* Equal-height card rows */
.sablon2-card-row {
    display: flex;
    flex-wrap: wrap;
}

.sablon2-card-row > [class*="col-"] {
    display: flex;
}

/* "Why Choose" icon cards */
.sablon2-icon-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-left: 4px solid #1eb390;
    border-radius: 8px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.sablon2-icon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.sablon2-icon-card-icon {
    margin-bottom: 20px;
    line-height: 0;
}

.sablon2-icon-card-icon img {
    max-height: 48px;
    max-width: 48px;
    object-fit: contain;
}

.sablon2-icon-card-icon svg {
    width: 48px;
    height: 48px;
}

.sablon2-icon-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1eb390;
    margin-bottom: 12px;
}

.sablon2-icon-card-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    flex: 1;
}

.sablon2-icon-card-btn {
    margin-top: 20px;
}

/* "What Services" cards */
.sablon2-service-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-left: 4px solid #1eb390;
    border-radius: 8px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.sablon2-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.sablon2-service-card-icon {
    margin-bottom: 18px;
    line-height: 0;
}

.sablon2-service-card-icon img {
    max-height: 42px;
    max-width: 42px;
    object-fit: contain;
}

.sablon2-service-card-icon svg {
    width: 42px;
    height: 42px;
}

.sablon2-service-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1eb390;
    margin-bottom: 12px;
}

.sablon2-service-card-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    flex: 1;
}

.sablon2-service-card-btn {
    margin-top: 20px;
}

/* Features section */
.sablon2-features {
    padding: 80px 0;
}

.sablon2-feature-block {
    padding: 50px 0;
    border-bottom: 1px solid #eee;
}

.sablon2-feature-block:last-child {
    border-bottom: none;
}

.sablon2-feature-image {
    text-align: center;
}

.sablon2-feature-image img {
    max-width: 100%;
    width: auto;
    max-height: 350px;
}

.sablon2-feature-content h3 {
    font-size: 28px;
    font-weight: 700;
    color: #212529;
}

.sablon2-feature-content p {
    font-size: 15px;
    line-height: 1.8;
}

/* FAQ accordion */
.sablon2-faq {
    padding: 80px 0;
}

.sablon2-accordion-item {
    background: #fff;
    border-bottom: 1px solid #e0e4e8;
    transition: border-color 0.3s;
}

.sablon2-accordion-item.active {
    border-bottom: 2px solid #1eb390;
}

.sablon2-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.sablon2-accordion-header:hover {
    background: #f8fafb;
}

.sablon2-accordion-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    flex: 1;
    padding-right: 15px;
}

.sablon2-accordion-item.active .sablon2-accordion-title {
    font-weight: 700;
    color: #212529;
}

.sablon2-accordion-icon {
    font-size: 22px;
    font-weight: 300;
    color: #1eb390;
    min-width: 24px;
    text-align: center;
    line-height: 1;
}

.sablon2-accordion-body {
    padding: 0 20px 20px;
    font-size: 14px;
    color: #666;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 991px) {
    .sablon2-card-row {
        flex-direction: column;
    }
    .sablon2-feature-block .row {
        text-align: center;
    }
    .sablon2-feature-image {
        margin-bottom: 25px;
    }
}

@media (max-width: 576px) {
    .sablon2-icon-card,
    .sablon2-service-card {
        padding: 20px 18px;
    }
    .sablon2-accordion-header {
        padding: 14px 15px;
    }
    .sablon2-accordion-title {
        font-size: 14px;
    }
}

/* ===========================
   CONTACT FORM 7 INTEGRATION
   =========================== */
.form-contact .wpcf7 {
    padding: 0;
}
.form-contact .wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.form-contact .wpcf7-form .row {
    width: 100%;
}
.form-contact .wpcf7 input[type="text"],
.form-contact .wpcf7 input[type="email"],
.form-contact .wpcf7 input[type="tel"],
.form-contact .wpcf7 input[type="url"],
.form-contact .wpcf7 select,
.form-contact .wpcf7 textarea {
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 15px;
    color: #333;
    background-color: transparent;
    transition: border-color 0.3s;
}
.form-contact .wpcf7 textarea {
    padding-left: 15px;
    min-height: 120px;
}
.form-contact .wpcf7 input:focus,
.form-contact .wpcf7 select:focus,
.form-contact .wpcf7 textarea:focus {
    border-color: #1aaf5d;
    outline: none;
}
.form-contact .wpcf7 input[type="submit"] {
    background-color: #f5c518;
    color: #000;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.form-contact .wpcf7 input[type="submit"]:hover {
    background-color: #e0b000;
}
.form-contact .wpcf7-response-output {
    margin: 15px 0 0;
    padding: 10px 15px;
    border-radius: 4px;
}
.form-contact .wpcf7-acceptance label {
    font-size: 14px;
    color: #666;
}

/* ===========================================================================
   v76 — surgical fixes for customer feedback batch
   This block is the ONLY thing v76 adds on top of v72's custom.css.
   Earlier attempts (v73-v75) layered desktop-affecting rules that altered
   container/menu padding and caused visible regressions on the staging
   site. This time: nothing in this block fires above 991px except the
   mega-menu inline-table override, which only applies inside .megamenu
   dropdowns (not the page layout). Desktop visitors get exactly v72's
   layout; mobile visitors get the targeted polish from the customer
   feedback batch.
   =========================================================================== */

/* (1) Kurumsal mega menu: column alignment fix.
   theme.min.css applies `display: inline-table` to .megamenu .service-list
   .service which silently overrides Bootstrap's col-N grid widths. With
   four items (Hakkımızda / Kariyer / İş Ortaklarımız / Sertifikalar)
   the columns packed to natural content widths instead of sitting on the
   25% grid lines, so "Hakkımızda" rendered off-grid versus its three
   siblings (customer screenshot 1). Re-assert flex column-grid behaviour
   inside .megamenu only — does NOT affect page-level layout. */
.megamenu .service-list .row.mega-row-evenly > .service {
    display: flex !important;
    flex-direction: column;
}

/* (2) Mobile header logo clamp.
   .menu-wrap.mobile inherits .logo-menu's 200px max-width which reads as
   a hero image inside col-6 on a phone. Cap independently for mobile. */
.menu-wrap.mobile .logo-menu {
    max-width: 140px !important;
    max-height: 38px !important;
}
@media (max-width: 480px) {
    .menu-wrap.mobile .logo-menu {
        max-width: 120px !important;
        max-height: 34px !important;
    }
}
@media (max-width: 360px) {
    .menu-wrap.mobile .logo-menu {
        max-width: 100px !important;
        max-height: 30px !important;
    }
}

/* (3) Mobile bar vertical rhythm.
   theme.min.css leaves .menu-wrap.mobile a chunk of empty top/bottom
   whitespace plus the legacy 40px top offset that no longer has a news
   bar above it ("alttan ve üstten boşluklar var" — customer screenshot 2).
   Snap to top:0 and tighten the row so the bar reads as a phone header. */
.menu-wrap.mobile {
    top: 0 !important;
    padding: 8px 0 !important;
}
.menu-wrap.mobile > .container {
    padding-left: 16px;
    padding-right: 16px;
}
.menu-wrap.mobile .row.align-items-center {
    min-height: 56px;
}

/* (4) Mobile TR/EN: stop the chips from colliding with the hamburger.
   theme.min.css's `right: 70px` on mobile placed the chips directly
   under the menu icon. Slide them to the corner and reserve a lane in
   col-6:last-child so the hamburger doesn't grow into them. */
@media (max-width: 991.98px) {
    .toplang {
        top: 14px !important;
        right: 16px !important;
    }
    .menu-wrap.mobile .col-6:last-child {
        padding-right: 78px;
    }
}
@media (max-width: 480px) {
    .toplang {
        top: 12px !important;
        right: 12px !important;
    }
    .menu-wrap.mobile .col-6:last-child {
        padding-right: 70px;
    }
}

/* (5) 991px exact-frame display gap.
   theme.min.css has BOTH `@media (max-width:991px) { .menu-wrap{display:none} }`
   AND `@media (min-width:991px) { .menu-wrap.mobile{display:none} }`. At
   exactly 991px both fire so neither bar shows. Force the mobile bar to
   stay visible across the boundary (Bootstrap's 991.98 trick). */
@media (max-width: 991.98px) {
    .menu-wrap.mobile {
        display: block !important;
    }
}

/* (6) TR/EN chip smearing fix (v77 — long-standing bug uncovered by 5-agent diagnosis).
   theme.min.css ships `.btn-group.toplang .btn+.btn { margin-left: 1px;
   font-size: 14px !important; font-weight: 700 }` as the only inter-chip
   spacer, but the WordPress port writes `<section class="toplang">` with
   no `.btn-group` class. So that rule never matches. Result:
     - the two chips have ZERO inter-element margin (only collapsed inline
       whitespace between them)
     - each chip carries Bootstrap `.btn`'s `box-shadow: 0 2px 8px 0 rgba(...)`
       which extends ~8px of blur on every side; with zero gap the shadows
       overlap and the active-yellow + inactive-grey backgrounds visually
       fuse — customer reports "biribirine girmiş" (smeared together)
   Bug existed in v60-v76; nobody noticed because the chips sat in the
   empty band above the menu where eyes don't usually land. v76's mobile
   relocation made it more visible.
   Fix: equalize chip sizing, give them real spacing, and drop the shadow
   so any future container shrink can't re-trigger the overlap. */
.toplang .btn {
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    width: 32px !important;
    padding: 6px 4px !important;
}
.toplang .btn + .btn {
    margin-left: 6px !important;
}

/* =====================================================================
   v80 — STRUCTURAL fix: TR/EN chips moved INTO the desktop nav row.
   Customer feedback after v79: hardcoded calc() positioning was
   producing inconsistent results (chips landed on top of "İletişim"
   at 1366px viewports because real menu-item widths exceeded our
   estimate). Customer's hint: "look at the original site code, the
   buttons aren't problematic there" — the legacy site renders TR/EN
   as part of the top news bar (.infonews) which provides natural
   layout context; v64 stripped .infonews but left .toplang orphan
   above the menu, where every subsequent fix was a positioning hack.

   v80 abandons the hack and adopts the structural fix the Round 1
   Performance Specialist + WP Theme Architect already recommended:
   render TR/EN INSIDE the desktop .main-menu as a flex sibling
   (placed immediately before MÜŞTERİ GİRİŞİ in header.php). The
   chips now flow naturally, no math, no breakpoint-by-breakpoint
   guessing about menu-item widths. Mobile keeps the existing
   absolute-positioned external .toplang via Bootstrap d-none/d-lg-flex
   utilities.
   ===================================================================== */

/* (8a) On desktop (≥992px), HIDE the external <nav class="toplang"> that
   used to float above the menu. The inline copy inside .main-menu takes
   over. On mobile the external one stays visible (it's positioned via
   v76/v77 mobile rules at lines 1228-1245, untouched). */
@media (min-width: 992px) {
    body > .toplang,
    .box-container > .toplang {
        display: none !important;
    }
}

/* (8b) Close the desktop band. With chips no longer floating above the
   menu, the legacy `top: 40px` (intended for the v64-removed .infonews
   bar) no longer reserves anything meaningful — collapse to top:0 so
   the menu sits flush at the top of the viewport (matches production
   siaflex.com's single-row closed header). Scoped to data-layout="wide"
   so frame/boxed/wideboxed modes preserve their own offsets. */
@media (min-width: 992px) {
    [data-layout="wide"] .menu-wrap:not(.mobile) {
        top: 0;
    }
}

/* (8c) Style the inline TR/EN as a flex menu-item. Vertically centers
   with the other menu items via parent's `align-items: center`. */
.menu-item.toplang-inline {
    display: none;  /* hidden by Bootstrap d-none until lg, then d-lg-flex */
    align-items: center;
    padding: 8px 4px !important;  /* override theme.min.css's 8px 15px */
    margin: 0 6px;
}
@media (min-width: 992px) {
    .menu-item.toplang-inline {
        display: flex !important;
    }
}
.toplang-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* (8d) Chip styling for inline TR/EN. Same visual as the external chips
   (v77 box-shadow/font/size fix). */
.toplang-nav .btn,
.toplang .btn {
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    width: 32px !important;
    height: 30px !important;
    padding: 6px 4px !important;
    line-height: 18px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.toplang-nav .btn + .btn {
    margin-left: 0 !important;  /* `gap: 6px` on parent handles spacing */
}

/* (8e) Touch-target accessibility for inline chips on coarse pointers
   (touch laptops/tablets). Only at desktop breakpoint where they're
   visible. — A11y Auditor */
@media (hover: none) and (pointer: coarse) and (min-width: 992px) {
    .toplang-nav .btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* (8f) Print + reduced motion. */
@media print {
    .menu-wrap,
    .menu-wrap.mobile,
    .toplang,
    .menu-item.toplang-inline {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .menu-wrap,
    .menu-wrap *,
    .toplang,
    .toplang *,
    .menu-item.toplang-inline,
    .menu-item.toplang-inline * {
        transition: none !important;
        animation: none !important;
    }
}

/* (8g) Logo CLS hint — paired with width/height attrs in header.php. */
.logo-menu {
    aspect-ratio: 200 / 50;
}

/* ============================================================
   v82 — Slider responsive (13"-15" laptop) + Hizmetlerimiz /
   Neden Siaflex eşit yükseklikli kartlar.

   Slider: 992-1399px aralığında (13"-15" laptop) görsel ile metin
   yatay olarak çakışıyordu. Görsel %38'e küçültülüp sağ kenara
   hizalandı, metin sütunu %60'a daraltıldı, slider yüksekliği
   72vh / min 520px'e indirildi. Geniş masaüstü (≥1400px) ve
   tablet/mobil kuralları değişmedi.

   Kartlar: theme.min.css + services-grid.php inline kuralları
   sabit min-height: 450px ile zorluyordu. Flex stretch + sıkı
   spacing + custom.js'teki JS pixel-height sync ile sub-pixel
   render farkı sıfırlandı.

   Neden Siaflex: template-parts/why-siaflex.php'deki inline
   style bloğu min-height: 720px @ <1200px zorluyordu (içerik
   ~300px iken). O blok v82'de template'ten silindi; aşağıdaki
   kurallar yeterli.
   ============================================================ */

@media (min-width: 992px) and (max-width: 1399.98px) {
    .silder-container,
    .header-main-slider,
    .carousel-cell {
        height: 72vh !important;
        min-height: 520px !important;
    }
    .carousel-cell .svg.custom-element-right {
        max-width: 38% !important;
        right: -1% !important;
        top: 14% !important;
    }
    .silder-container .slider-content .container > .col-md-8 {
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
    .silder-container .slider-content .heading,
    .silder-container .slider-content h1 {
        font-size: 28pt !important;
        line-height: 1.2 !important;
    }
    .silder-container .slider-content .subheading,
    .silder-container .slider-content p {
        font-size: 14pt !important;
    }
}

.services:not(.exapath) .service-wrap .row {
    align-items: stretch !important;
}
.services:not(.exapath) .service-wrap .row > .col-md-6.col-lg-4 {
    display: flex !important;
    align-items: stretch !important;
}
.services:not(.exapath) .service-wrap .service-section {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 30px !important;
    margin-top: 30px !important;
}
.services:not(.exapath) .service-wrap .service-section > p:nth-of-type(1) {
    margin: 0 0 8px 0 !important;
}
.services:not(.exapath) .service-wrap .service-section > hr {
    margin: 4px 0 8px 0 !important;
}
.services:not(.exapath) .service-wrap .service-section > p:nth-of-type(2) {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.6 !important;
}
.services:not(.exapath) .service-wrap .service-section > a.btn {
    margin: 0 !important;
    margin-top: auto !important;
    align-self: flex-start !important;
}
@media (min-width: 768px) {
    .services:not(.exapath) .service-wrap .service-section > p:nth-of-type(1) {
        min-height: 90px !important;
    }
    .services:not(.exapath) .service-wrap .service-section > p:nth-of-type(2) {
        min-height: 80px !important;
    }
}

.exapath .service-wrap .row {
    align-items: stretch !important;
}
.exapath .service-wrap .row > .col-lg-3 {
    display: flex !important;
    align-items: stretch !important;
}
.exapath .service-wrap .service-section2,
.exapath .service-wrap .service-section2.dinamikh {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}
.exapath .service-wrap .service-section2 .title.dinamikt,
.exapath .service-wrap .service-section2 .title {
    min-height: 0 !important;
}
.exapath .service-wrap .service-section2 .subtitle.dinamikh2,
.exapath .service-wrap .service-section2 .subtitle {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* v84: Neden Siaflex — padding ve line-height sıkıştırma.
   theme.css'in `.subtitle { line-height: 34px }` (16px font için ~2.125
   ratio) ve `.service-section { padding: 50px }` kuralları, en uzun
   açıklamalı kartın (Güvenlik, 9 satır) yüksekliğini ~510px'e çıkarıyordu.
   Diğer 3 kart bu yüksekliğe stretch edildiği için altlarında büyük gri
   boşluk oluşuyordu. Customer: "kutucukların yükseklikleri biraz fazla
   geliyor". 1.5 line-height test edildi → satır arası çok dar; 1.75 orta
   yol olarak benimsendi. Kart artık ~420px (90px tasarruf), satır arası
   hâlâ rahat okunabilir. */
.exapath .service-wrap .service-section2 {
    padding: 30px !important;
}
.exapath .service-wrap .service-section2 .title {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
}
.exapath .service-wrap .service-section2 .subtitle {
    line-height: 1.75 !important;
}