/* ========================================
   OFFICE ISTANBUL — Modern Enhancement CSS
   Applied on top of original stylesheets
   ======================================== */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* --- CSS Variables --- */
:root {
    --gold: #fab231;
    --gold-dark: #e2a020;
    --gold-light: rgba(250, 178, 49, 0.12);
    --dark: #0f172a;
    --card-bg: rgba(255,255,255,0.03);
    --radius: 16px;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02);
    --transition: 0.3s cubic-bezier(.4,0,.2,1);
}

/* --- Body & Typography --- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: #334155 !important;
    background-color: #ffffff !important;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

p {
    color: #475569 !important;
    line-height: 1.7 !important;
}

/* --- Smooth Scrolling --- */
html {
    scroll-behavior: smooth;
}

/* ==========================================
   HEADER MODERNIZATION
   ========================================== */

header .fixMenu {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    transition: background var(--transition), box-shadow var(--transition);
}



/* Navigation links — subtle hover underline animation */
header nav.header .menu ul.navbar-nav > li > a {
    position: relative;
    transition: color var(--transition);
}

header nav.header .menu ul.navbar-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width var(--transition);
    border-radius: 2px;
}

header nav.header .menu ul.navbar-nav > li:hover > a::after {
    width: 100%;
}

/* Gold CTA Button */
.btn-sari {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 4px 15px rgba(250,178,49,0.35) !important;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition) !important;
}

.btn-sari:hover {
    background: #000000 !important;
    color: #fab231 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}


/* Phone border button */
header .border-btn {
    border-radius: 8px !important;
    transition: background var(--transition), color var(--transition) !important;
}

header .border-btn:hover {
    background: var(--gold-light) !important;
}

/* ==========================================
   HERO / SLIDER SECTION
   ========================================== */

.slider-alani {
    position: relative;
}

.slider-alani::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.03));
    pointer-events: none;
}

/* ==========================================
   CARDS & BOXES
   ========================================== */

/* Service cards — glass card upgrade */
.hizmet-box, .service-card, .lokasyon-card {
    border-radius: var(--radius) !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
    overflow: hidden;
}

.hizmet-box:hover, .service-card:hover, .lokasyon-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06) !important;
}

/* Image hover zoom */
.hizmet-box img, .lokasyon-card img, .blog-card img {
    transition: transform 0.5s cubic-bezier(.4,0,.2,1) !important;
    will-change: transform;
}

.hizmet-box:hover img, .lokasyon-card:hover img, .blog-card:hover img {
    transform: scale(1.05) !important;
}

/* ==========================================
   SECTION TITLES
   ========================================== */

.baslik-alan h2,
.baslik-alan .baslik {
    position: relative;
    display: inline-block;
}

/* Subtle gold accent under section titles */
.baslik-alan h2::after,
.baslik-alan .baslik::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 3px;
    margin-top: 10px;
}

/* ==========================================
   FORMS — Contact, Quote
   ========================================== */

.form-control, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    border-radius: 8px !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
    font-family: 'Inter', sans-serif !important;
}

.form-control:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, textarea:focus, select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(250,178,49,0.15) !important;
    outline: none !important;
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn, button[type="submit"] {
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    transition: all var(--transition) !important;
}

/* ==========================================
   BREADCRUMB (inner pages)
   ========================================== */

.breadcrumb-alan, .ic-baslik {
    position: relative;
    overflow: hidden;
}

.breadcrumb-alan::before, .ic-baslik::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.6) 0%, rgba(250,178,49,0.08) 100%);
    pointer-events: none;
}

/* ==========================================
   FOOTER MODERNIZATION
   ========================================== */

footer {
    position: relative;
}

footer .footer-alt-bar {
    border-top: 1px solid rgba(255,255,255,0.06);
}

footer .footer-alt-bar .copyright p {
    font-size: 13px;
    opacity: 0.7;
    letter-spacing: 0.01em;
}

footer .footer-alt-bar .copyright a {
    color: var(--gold);
    text-decoration: none;
    transition: opacity var(--transition);
}

footer .footer-alt-bar .copyright a:hover {
    opacity: 0.8;
}

/* ==========================================
   SCROLL ANIMATIONS (WOW.js supplement)
   ========================================== */

[data-wow-delay] {
    will-change: opacity, transform;
}

/* ==========================================
   MOBILE MENU
   ========================================== */

.mobile-menu {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ==========================================
   INNER PAGE — Content Areas
   ========================================== */

.ic-icerik h1, .ic-icerik h2 {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

/* ==========================================
   FAQ ACCORDION
   ========================================== */

.accordion-item {
    border-radius: var(--radius) !important;
    overflow: hidden;
    margin-bottom: 8px;
    transition: box-shadow var(--transition);
}

.accordion-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* ==========================================
   LOCATION / BLOG CARDS
   ========================================== */

.blog-card {
    border-radius: var(--radius) !important;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.10);
}

/* ==========================================
   TABLE STYLES (Admin-like inner tables)
   ========================================== */

table.styled-table {
    border-radius: var(--radius);
    overflow: hidden;
    border-collapse: collapse;
    width: 100%;
}

table.styled-table th {
    background: rgba(250,178,49,0.08);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
}

/* ==========================================
   UTILITY HELPERS
   ========================================== */

.text-gold { color: var(--gold) !important; }
.bg-gold { background: var(--gold) !important; }
.rounded-modern { border-radius: var(--radius) !important; }
.shadow-modern { box-shadow: var(--shadow) !important; }

/* Fade-in animation for page transitions */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease forwards;
}

/* ==========================================
   SCROLLBAR STYLING
   ========================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.04);
}

::-webkit-scrollbar-thumb {
    background: rgba(250,178,49,0.4);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ==========================================
   DROPDOWN MENU MODERNIZATION (Issue 1)
   ========================================== */
header nav.header .menu ul.navbar-nav > li {
    position: relative !important;
}

header nav.header .menu ul.navbar-nav > li > ul {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(15px) !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(250, 178, 49, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15) !important;
    padding: 12px 0 !important;
    min-width: 240px !important;
    margin-top: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
}

header nav.header .menu ul.navbar-nav > li:hover > ul {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

header nav.header .menu ul.navbar-nav > li > ul > li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

header nav.header .menu ul.navbar-nav > li > ul > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13.5px !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
    text-transform: none !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

header nav.header .menu ul.navbar-nav > li > ul > li > a i {
    color: var(--gold) !important;
    margin-right: 0 !important;
    font-size: 11px !important;
    transition: transform 0.2s ease !important;
}

header nav.header .menu ul.navbar-nav > li > ul > li > a:hover {
    background: rgba(250, 178, 49, 0.12) !important;
    color: var(--gold) !important;
    padding-left: 25px !important;
}

header nav.header .menu ul.navbar-nav > li > ul > li > a:hover i {
    transform: translateX(3px) !important;
}

/* Scrolled/Inner Header Dropdown Adaptive White Theme */
header.fixHeader nav.header .menu ul.navbar-nav > li > ul,
header.fixIcHeader nav.header .menu ul.navbar-nav > li > ul {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08) !important;
}

header.fixHeader nav.header .menu ul.navbar-nav > li > ul > li > a,
header.fixIcHeader nav.header .menu ul.navbar-nav > li > ul > li > a {
    color: #475569 !important;
}

header.fixHeader nav.header .menu ul.navbar-nav > li > ul > li > a:hover,
header.fixIcHeader nav.header .menu ul.navbar-nav > li > ul > li > a:hover {
    background: rgba(250, 178, 49, 0.08) !important;
    color: var(--gold-dark) !important;
}



/* ==========================================
   LOKASYON SLIDER & CARD MINIMALIZATION (Issue 3)
   ========================================== */
.lokasyonSlide {
    padding: 40px 0 !important;
}

.lokasyonContent {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 35px !important;
    height: 380px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    background: #0f172a !important;
}

.lokasyonContent:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15) !important;
}

.lokasyonBg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1 !important;
    opacity: 0.88 !important;
}

.lokasyonContent:hover .lokasyonBg {
    transform: scale(1.05) !important;
}

/* Very soft dark gradient mask */
.lokasyonContent::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.3) 50%, rgba(15, 23, 42, 0) 100%) !important;
    z-index: 2 !important;
    transition: background 0.4s ease !important;
}

.lokasyonContent:hover::before {
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.45) 50%, rgba(15, 23, 42, 0.1) 100%) !important;
}

/* Hide old icons and absolute content overrides */
.lokasyonContent i.flaticon-place-1,
.lokasyonContent::after {
    display: none !important;
}

/* Clear all borders, min-widths, paddings and boxes on sehir and all standard spans */
.lokasyonContent .sehir,
.lokasyonContent .sehir span {
    border: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Modern Bottom Left aligned title */
.lokasyonContent .sehir {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    text-align: left !important;
}

.lokasyonContent .sehir .main-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.4) !important;
}

.lokasyonContent .sehir .sub-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--gold) !important;
    margin-top: 6px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 4px rgba(15, 23, 42, 0.4) !important;
}

/* Elegant discover arrow circle at bottom-right */
.lokasyonContent .kesfet-arrow {
    position: absolute !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    z-index: 3 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(4px) !important;
}

.lokasyonContent:hover .kesfet-arrow {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #0f172a !important;
}

.lokasyonContent .kesfet-arrow svg {
    transition: transform 0.3s ease !important;
}

.lokasyonContent:hover .kesfet-arrow svg {
    transform: translateX(3px) !important;
}

/* ==========================================
   TESTIMONIALS MINIMALIZATION (Issue 4)
   ========================================== */
.indMusteri {
    background: #0f172a !important;
    color: #ffffff !important;
}

.indMusteri .sayfaBaslik {
    color: #ffffff !important;
    margin-bottom: 40px !important;
}

.musteriSlide {
    max-width: 800px !important;
    margin: 0 auto !important;
}

.firmaYorum {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    box-shadow: var(--shadow) !important;
    position: relative !important;
    margin-bottom: 20px !important;
}

.firmaYorum .firma {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--gold) !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

.firmaYorum .yorum {
    position: relative !important;
    padding: 0 40px !important;
}

.firmaYorum .yorum p {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-style: italic !important;
    margin: 0 !important;
}

.firmaYorum .yorum i.fa-quote-left,
.firmaYorum .yorum i.fa-quote-right {
    font-size: 20px !important;
    color: rgba(250, 178, 49, 0.3) !important;
    position: absolute !important;
}

.firmaYorum .yorum i.fa-quote-left {
    top: -5px !important;
    left: 0 !important;
}

.firmaYorum .yorum i.fa-quote-right {
    bottom: -5px !important;
    right: 0 !important;
}

.firmaYorum .musteriName {
    margin-top: 25px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.05em !important;
}

.musteriPagi .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
}

.musteriPagi .swiper-pagination-bullet-active {
    background: var(--gold) !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* ==========================================
   BLOG SLIDER CARD ALIGNMENT & MINIMALIZATION (Issues 5 & 6)
   ========================================== */
.indBlog {
    background: #ffffff !important;
}

.blogSlider {
    padding: 20px 0 !important;
}

/* Reset Swiper elements to let Swiper JS control slide width and loop translations */
.blogSlider .swiper-slide {
    height: auto !important;
}

.blogKutu {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.blogKutu:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.indBlogBox {
    display: block !important;
    height: 200px !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.blogBilgi {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    position: relative !important;
}

.yaziTarih {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    padding: 0 !important;
}

.yaziTarih span {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.yaziTarih i {
    font-style: normal !important;
    text-transform: uppercase !important;
}

.blogYazi {
    margin: 0 !important;
    line-height: 1.4 !important;
}

.blogYazi a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--dark) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.blogYazi a:hover {
    color: var(--gold) !important;
}

/* ==========================================
   UNIVERSAL TYPOGRAPHY & RESET OVERRIDES
   ========================================== */
*, body, p, span, a, li, input, button, textarea, select, td, th, div, label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn-sari, .sayfaBaslik, .title-first h1, .baslik-alan h2, .slogan span b {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: -0.02em !important;
}

/* Reset html/body margin and padding globally (Footer Gaps & Sidebar strips Fix) */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
}



/* ==========================================
   WHATSAPP FLOATING WIDGET
   ========================================== */
.whatsapp-float {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important;
    z-index: 99999 !important;
}

.whatsapp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #25d366 !important;
    color: #ffffff !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3) !important;
    text-decoration: none !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
}

.whatsapp-btn svg {
    width: 24px !important;
    height: 24px !important;
    animation: whatsapp-icon-pulse 2s infinite !important;
    display: block !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.whatsapp-btn span {
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: max-width 0.35s ease, opacity 0.35s ease, margin-left 0.35s ease !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

.whatsapp-btn:hover {
    width: 190px !important;
    height: 56px !important;
    border-radius: 30px !important;
    background: #20ba5a !important;
    box-shadow: 0 12px 30px rgba(32, 186, 90, 0.5) !important;
}

.whatsapp-btn:hover span {
    max-width: 150px !important;
    opacity: 1 !important;
    margin-left: 8px !important;
}

.whatsapp-float::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6) !important;
    animation: whatsapp-ring-pulse 2.5s infinite !important;
    pointer-events: none !important;
    z-index: -1 !important;
    transition: border-radius 0.35s ease !important;
}

.whatsapp-float:hover::after {
    border-radius: 30px !important;
}

@keyframes whatsapp-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes whatsapp-ring-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ==========================================
   ADVANTAGE STATS ALIGNMENT (Issue 2 - Dark text on light background)
   ========================================== */
.advantage ul {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

@media (max-width: 991px) {
    .advantage ul {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .advantage ul {
        grid-template-columns: 1fr !important;
    }
}

.advantage ul li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 45px 30px !important;
    min-height: 220px !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

.advantage ul li:hover {
    background: #ffffff !important;
    border-color: var(--gold) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
}

.advantage ul li i {
    font-size: 52px !important;
    color: var(--gold) !important;
    margin-bottom: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
}

.advantage ul li span {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
}

.stat-num {
    color: var(--gold) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    line-height: 1.1 !important;
    margin: 8px 0 4px !important;
}

.advantage ul li span b,
.stat-num b {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    display: inline !important;
    line-height: inherit !important;
    margin: 0 !important;
}

/* ==========================================
   9 FEATURES GRID OVERLAP PREVENTER (Issue 7)
   ========================================== */
.iconItems {
    display: flex !important;
    align-items: flex-start !important;
    gap: 25px !important;
    margin-bottom: 50px !important;
    min-height: auto !important;
    text-align: left !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.iconItems:hover {
    transform: scale(1.03) translateY(-2px) !important;
}

.iconItems .icon {
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    float: none !important;
}

.iconItems .icon i {
    display: inline-block !important;
}

.iconItems .icon i:before {
    font-size: 50px !important;
    color: var(--gold) !important;
    line-height: 1 !important;
}

.iconItems .iconBaslik {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
}

.iconItems .iconBaslik span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--dark) !important;
    line-height: 1.3 !important;
    display: block !important;
}

.iconItems .iconBaslik p {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* ==========================================
   LOCATIONS 2x2 GRID LAYOUT (Issue 3)
   ========================================== */
.lokasyonSlide ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .lokasyonSlide ul {
        grid-template-columns: 1fr !important;
    }
}

.lokasyonSlide ul li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lokasyonContent {
    height: 380px !important;
    border-radius: 12px !important;
}

/* ==========================================
   TESTIMONIALS COMPANY PILL READABILITY (Issue 4)
   ========================================== */
.firmaYorum .firma {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    background: var(--gold) !important;
    color: #0f172a !important; /* Dark text for perfect contrast on gold capsule */
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    display: inline-block !important;
    border-radius: 30px !important;
    margin-bottom: 25px !important;
}

/* ==========================================
   FOOTER ALT BAR & BRANDING
   ========================================== */
.footer-alt-bar {
    background: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 20px 0 !important;
}

.footer-alt-bar .copyright p,
.footer-alt-bar .copyright p a,
.footer-alt-bar .powered-by,
.footer-alt-bar .powered-by a {
    color: #94a3b8 !important;
    font-size: 13.0px !important;
    transition: color var(--transition) !important;
}

.footer-alt-bar .copyright p a:hover,
.footer-alt-bar .powered-by a:hover {
    color: var(--gold) !important;
}

/* ==========================================
   BLOG ARCHIVE PAGE LAYOUT
   ========================================== */
.blogs.page {
    background-color: #f8fafc !important;
    padding: 60px 0 !important;
}

.blog-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}



.sidebar-blog {
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    background: #ffffff !important;
}

.sidebar-blog h4 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--gold) !important;
}

.sidebar-blog .list-group-item {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    border: none !important;
    padding: 10px 0 !important;
    transition: color 0.2s ease !important;
    background: none !important;
}

.sidebar-blog .list-group-item:hover {
    color: var(--gold) !important;
    text-decoration: none !important;
}



/* ==========================================
   SERVICES CARDS ZOOM EFFECT
   ========================================== */
.boxes ul li {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 16px !important;
}

.boxes ul li:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06) !important;
}

.boxes ul li .boxBg {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.boxes ul li:hover .boxBg {
    transform: scale(1.08) !important;
}

/* ==========================================
   TESTIMONIALS NATIVE QUOTES
   ========================================== */
.firmaYorum .yorum {
    position: relative !important;
    padding: 0 45px !important;
}

.quote-mark {
    font-family: 'Outfit', Georgia, serif !important;
    font-size: 80px !important;
    color: rgba(250, 178, 49, 0.25) !important;
    position: absolute !important;
    line-height: 1 !important;
    user-select: none !important;
    font-weight: 900 !important;
}

.quote-mark.left {
    top: -20px !important;
    left: 10px !important;
}

.quote-mark.right {
    bottom: -50px !important;
    right: 10px !important;
}



/* ==========================================
   FOOTER GAP & BODY OVERFLOW RESETS
   ========================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
}

body {
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
}

footer.footer-menu {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* ==========================================
   SOLID CSS SVG FALLBACKS FOR CACHED GLYPHS
   ========================================== */
.fa-facebook::before, .fa-facebook-f::before, .fab.fa-facebook::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23ffffff'%3E%3Cpath d='M80 299.3V256H12v-54.7h68v-40.7c0-67.4 41.2-104 101.2-104 28.7 0 53.4 2.1 60.6 3v70.3h-41.6c-32.7 0-39 15.6-39 38.3V201h78l-10.2 54.7H160v193.3H80z'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
    vertical-align: middle !important;
}

.fa-twitter::before, .fab.fa-twitter::before, .fa-x-twitter::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
    vertical-align: middle !important;
}

.fa-linkedin::before, .fab.fa-linkedin::before, .fa-linkedin-in::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
    vertical-align: middle !important;
}

.fa-instagram::before, .fab.fa-instagram::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.9c-41.4 0-75-33.6-75-75s33.6-75 75-75 75 33.6 75 75-33.6 75-75 75zm146.5-194.3c0 14.9-12 26.9-26.9 26.9-14.9 0-26.9-12-26.9-26.9s12-26.9 26.9-26.9c14.9 0 26.9 12 26.9 26.9zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
    vertical-align: middle !important;
}

.fa-whatsapp::before, .fab.fa-whatsapp::before {
    content: '' !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
    vertical-align: middle !important;
}

/* Viewport bottom gap fallback (HTML is dark, Body remains white) */
html {
    background-color: #0f172a !important;
}

body {
    background-color: #ffffff !important;
}

.f-social a {
    color: #e2e8f0 !important;
}

.f-social a svg {
    fill: currentColor !important;
    width: 18px !important;
    height: 18px !important;
    transition: transform 0.3s ease !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.f-social a:hover {
    color: var(--gold) !important;
}

.f-social a:hover svg {
    transform: scale(1.15) !important;
}

/* ==========================================
   BLOG ARCHIVE LIST REDESIGN
   ========================================== */
.blog-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
    list-style: none !important;
}

@media (max-width: 767px) {
    .blog-list {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

.blog-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}

.blog-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
    border-color: var(--gold) !important;
}

.blog-card__image {
    height: 240px !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.blog-card__image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform 0.6s ease !important;
}

.blog-card:hover .blog-card__image a {
    transform: scale(1.04) !important;
}

.blog-card__body {
    padding: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.blog-card__title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 53px !important;
    transition: color 0.3s ease !important;
}

.blog-card__title:hover {
    color: var(--gold) !important;
}

.blog-card__desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 67px !important;
}

.blog-card__more {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: auto !important;
    transition: color 0.3s ease !important;
    width: fit-content !important;
}

.blog-card__more:hover {
    color: #0f172a !important;
}

.blog-card__more svg {
    transition: transform 0.3s ease !important;
}

.blog-card__more:hover svg {
    transform: translateX(4px) !important;
}

/* Override container backgrounds to ensure clean white display */
.blogs.backWh {
    background: #f8fafc !important;
}

/* ==========================================
   MODERN WHITE STICKY HEADER & INNER HEADER
   ========================================== */
header.fixHeader .fixMenu,
header.fixIcHeader .fixMenu {
    background: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    padding: 10px 0 !important;
    transition: all 0.3s ease !important;
}

header.fixHeader .menu ul.navbar-nav > li > a,
header.fixIcHeader .menu ul.navbar-nav > li > a {
    color: #0f172a !important;
}

header.fixHeader .menu ul.navbar-nav > li:hover > a,
header.fixIcHeader .menu ul.navbar-nav > li:hover > a {
    color: var(--gold) !important;
}

header.fixHeader .menu ul.navbar-nav > li > a::after,
header.fixIcHeader .menu ul.navbar-nav > li > a::after {
    background: var(--gold) !important;
}

/* Yellow Button (Hızlı Teklif Al) on Scrolled/Inner Header */
header.fixHeader .btn-sari,
header.fixIcHeader .btn-sari {
    background: var(--gold) !important;
    border: none !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    padding: 10.5px 22px !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

header.fixHeader .btn-sari:hover,
header.fixIcHeader .btn-sari:hover {
    background: #0f172a !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Border Button (Phone Link) on Scrolled/Inner Header */
header.fixHeader .border-btn,
header.fixIcHeader .border-btn {
    background: transparent !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    padding: 9px 22px !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

header.fixHeader .border-btn b,
header.fixIcHeader .border-btn b {
    color: #0f172a !important;
    font-weight: 700 !important;
    transition: color 0.25s ease !important;
}

header.fixHeader .border-btn i::before,
header.fixIcHeader .border-btn i::before {
    color: var(--gold) !important;
    transition: color 0.25s ease !important;
}

header.fixHeader .border-btn:hover,
header.fixIcHeader .border-btn:hover {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    transform: translateY(-1px) !important;
}

header.fixHeader .border-btn:hover b,
header.fixIcHeader .border-btn:hover b {
    color: #ffffff !important;
}

header.fixHeader .border-btn:hover i::before,
header.fixIcHeader .border-btn:hover i::before {
    color: #ffffff !important;
}

header.fixHeader .headerSag a:not(.border-btn):hover,
header.fixIcHeader .headerSag a:not(.border-btn):hover {
    color: var(--gold) !important;
}

/* Language selector on Scrolled/Inner Header */
header.fixHeader .language li a,
header.fixIcHeader .language li a {
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    background: transparent !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

header.fixHeader .language li a:hover,
header.fixIcHeader .language li a:hover {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

/* Logo toggles correctly in white header */
header.fixHeader .changeSvg,
header.fixIcHeader .changeSvg {
    opacity: 1 !important;
    visibility: visible !important;
}

header.fixHeader .hideSvg,
header.fixIcHeader .hideSvg {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================
   MODERNIZED INNER PAGE BANNER & BREADCRUMBS
   ========================================== */
section.page-title {
    position: relative !important;
    margin-top: 107px !important; /* height of header */
    background: #0f172a !important;
    overflow: hidden !important;
}

.pageBaslik {
    position: relative !important;
    padding: 90px 0 !important;
    min-height: 220px !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1 !important;
}

.pageBaslik::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    z-index: -1 !important;
}

.pageBaslik .bread-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.25 !important;
    z-index: -2 !important;
}

.title-first h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

/* Sleek glassmorphic breadcrumb bar */
.linkAgaci {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

ol.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

ol.breadcrumb li.breadcrumb-item a {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

ol.breadcrumb li.breadcrumb-item a:hover {
    color: var(--gold) !important;
}

.breadcrumb-item.active {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3) !important;
    content: "→" !important;
    font-family: inherit !important;
    transform: none !important;
    font-size: 12px !important;
    right: auto !important;
    left: 0 !important;
    padding: 0 10px !important;
}

/* ==========================================
   MODERN FORM DESIGN SYSTEM
   ========================================== */
.form-div {
    margin-bottom: 24px !important;
    position: relative !important;
}

.form-control,
.form-div input[type="text"],
.form-div input[type="email"],
.form-div input[type="tel"],
.form-div textarea,
.form-div select {
    width: 100% !important;
    height: auto !important;
    padding: 14px 20px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #0f172a !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.01) !important;
    outline: none !important;
}

.form-control::placeholder,
.form-div input::placeholder,
.form-div textarea::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.form-control:focus,
.form-div input:focus,
.form-div textarea:focus,
.form-div select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 4px 16px rgba(250, 178, 49, 0.1) !important;
    background: #ffffff !important;
}

.form-div textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Select2 Modernization */
.select2-container--default .select2-selection--single {
    height: 52px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0f172a !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    padding: 0 !important;
}

/* Premium Form Submit Button */
.submit button.btn-primary,
button[type="submit"].btn-primary,
.formGeneral button[type="submit"],
.career.formGeneral button[type="submit"] {
    background: var(--gold) !important;
    border: none !important;
    color: #0f172a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 14px 36px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(250, 178, 49, 0.2) !important;
    text-transform: uppercase !important;
}

.submit button.btn-primary:hover,
button[type="submit"].btn-primary:hover,
.formGeneral button[type="submit"]:hover,
.career.formGeneral button[type="submit"]:hover {
    background: #0f172a !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15) !important;
}

/* ==========================================
   VALUES (DEĞERLERİMİZ) CARDS MODERNIZATION
   ========================================== */
.degerItems ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

@media (max-width: 991px) {
    .degerItems ul {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.degerItems ul li {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    height: 100% !important;
}

.degerItems ul li:hover {
    transform: translateY(-6px) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

.degerItems ul li i {
    font-size: 48px !important;
    color: var(--gold) !important;
    margin-bottom: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 58px !important;
}

.degerItems ul li h6 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    margin: 0 0 15px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.degerItems ul li p {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* ==========================================
   SSS (FAQ) CATEGORY SELECTOR CARDS
   ========================================== */
.sss-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1140px !important;
    margin: 30px auto 0 !important;
    padding: 0 !important;
}

@media (max-width: 991px) {
    .sss-list {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.sss-list a {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
}

.sss-list a:hover {
    transform: translateY(-6px) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

.sss-list a i {
    font-size: 54px !important;
    color: var(--gold) !important;
    margin-bottom: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 60px !important;
}

.sss-list a span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    display: block !important;
}

.sss-list a span b {
    color: var(--gold) !important;
}

/* ==========================================
   MODERN ACCORDION / FAQ CARDS
   ========================================== */
.accordion {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 20px 0 50px 0 !important;
}

.accordion .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.accordion .card:last-of-type {
    border-radius: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.accordion .card:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

.accordion .card .card-header {
    background: #ffffff !important;
    border: none !important;
    padding: 0 !important;
}

.accordion button.btn.btn-link {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: left !important;
    padding: 22px 30px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    transition: color 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.accordion button.btn.btn-link:hover {
    color: var(--gold) !important;
}

/* Hide default icons and display modern arrow/indicator */
.accordion button::before,
.accordion button::after,
.accordion button.collapsed i::before,
.accordion button[aria-expanded="true"] i::before,
.accordion button[aria-expanded="false"] i::before {
    display: none !important;
}

.accordion button.btn.btn-link::after {
    content: '+' !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    line-height: 1 !important;
}

.accordion button.btn.btn-link[aria-expanded="true"]::after {
    content: '−' !important;
    transform: rotate(180deg) !important;
    color: #0f172a !important;
}

.accordion .card-body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 30px 24px 30px !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.accordion .card-body p {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin: 0 !important;
}

.sssIcon i {
    color: var(--gold) !important;
    margin-bottom: 15px !important;
}

/* ==========================================
   MINIMAL SITE-WIDE REFINEMENT
   ========================================== */
:root {
    --ink: #172033;
    --muted: #64748b;
    --line: #e5eaf1;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --accent: #f2a51b;
    --accent-strong: #d98a08;
}

body {
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

section.pagePad,
section.page {
    padding-top: 88px !important;
    padding-bottom: 88px !important;
}

.backWh,
.why,
.bedel,
.iconSet,
.indBlog,
.blogs,
.degerlerimiz,
.iletisim-alt {
    background: var(--surface-soft) !important;
}

h3.sayfaBaslik,
.sayfaBaslik {
    color: var(--ink) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    margin-bottom: 42px !important;
    text-transform: none !important;
}

h3.sayfaBaslik::before,
h3.sayfaBaslik::after {
    display: none !important;
}

.whyLitleContent,
.hizmetDetail .hizmetContent,
.blogDetayContent,
.iletisim,
.careerContent {
    color: var(--muted) !important;
}

.whyLitleContent h5,
.textStrong,
.whoContent h3,
.blogDetayIsim,
.hizmetDetail h5 {
    color: var(--ink) !important;
    letter-spacing: 0 !important;
}

.whyLitleContent p,
.hizmetDetail p,
.blog-detay,
.blog-card__desc,
.iletisim p,
.careerContent p {
    color: var(--muted) !important;
    line-height: 1.75 !important;
}

/* Header */
header.fixIcHeader .fixMenu,
header.fixHeader .fixMenu {
    background: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
}

header .headerSag .btn-sari,
.btn-sari {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: #1a2333 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}

header .headerSag .btn-sari:hover,
.btn-sari:hover {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    color: #ffffff !important;
    transform: none !important;
}

header .border-btn,
header.fixHeader .border-btn,
header.fixIcHeader .border-btn {
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Intro statistics */
.advantage ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.advantage ul li {
    min-height: 250px !important;
    margin: 0 !important;
    padding: 40px 24px !important;
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.advantage ul li:hover {
    border-color: rgba(250, 178, 49, 0.4) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-6px) !important;
}

.advantage ul li i {
    width: 76px !important;
    height: 76px !important;
    background: rgba(250, 178, 49, 0.08) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 24px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.advantage ul li i::before {
    color: var(--gold) !important;
    font-size: 34px !important;
    line-height: 1 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.advantage ul li:hover i {
    background: var(--gold) !important;
    transform: rotate(360deg) !important;
}

.advantage ul li:hover i::before {
    color: #ffffff !important;
}

.advantage ul li > span {
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    transition: color 0.3s ease !important;
}

.advantage ul li:hover > span {
    color: #0f172a !important;
}

.advantage .stat-num {
    color: #0f172a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.advantage .stat-num b {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    display: inline !important;
    line-height: inherit !important;
}

/* Services, locations and articles */
.boxes ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.boxes ul li {
    width: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    border: 1px solid #f1f5f9 !important;
}

.boxes ul li .boxAlt {
    background: #ffffff !important;
    padding: 78px 24px 32px !important;
}

.boxes ul li .boxAlt > i,
.boxes ul li .boxAlt > i::before {
    color: var(--accent) !important;
}

.boxBaslik,
.boxes ul li .boxAlt p {
    color: var(--ink) !important;
}

.boxes ul li .boxAlt p {
    color: var(--muted) !important;
    line-height: 1.65 !important;
}

.radius-btn,
a.tumu-btn,
.blog-card__more {
    background: transparent !important;
    border: 1px solid var(--ink) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
}

.radius-btn:hover,
a.tumu-btn:hover,
.blog-card__more:hover {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #ffffff !important;
}

.lokasyonSlide ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 14px !important;
}

.lokasyonSlide ul li {
    float: none !important;
    width: auto !important;
}

.lokasyonSlide ul li a {
    height: 390px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.lokasyonSlide ul li a:hover .lokasyonBg {
    opacity: .58 !important;
}

span.sehir,
a.lokasyonContent span:last-child {
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 23px !important;
    font-weight: 700 !important;
}

.blogKutu,
.blog-card,
.sidebar-blog {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 16px rgba(23, 32, 51, .035) !important;
}

.blogKutu:hover,
.blog-card:hover {
    box-shadow: 0 12px 28px rgba(23, 32, 51, .08) !important;
    transform: translateY(-3px) !important;
}

/* Forms and contact surfaces */
.iletisim,
.formGeneral,
.career.formGeneral {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 22px rgba(23, 32, 51, .045) !important;
    padding: 30px !important;
}

.form-control,
.form-div input[type="text"],
.form-div input[type="email"],
.form-div input[type="tel"],
.form-div textarea,
.form-div select,
.select2-container--default .select2-selection--single {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.01) !important;
}

.form-control:focus,
.form-div input:focus,
.form-div textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--gold) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(250, 178, 49, 0.15) !important;
}

.bize-ulasin,
section.page.hizliTeklif {
    background: var(--ink) !important;
}

.bize-ulasin h3.sayfaBaslik,
.bize-ulasin .white {
    color: #ffffff !important;
}

input.border-black,
.submit button.btn-primary,
button[type="submit"].btn-primary,
.formGeneral button[type="submit"],
.career.formGeneral button[type="submit"] {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}

input.border-black:hover,
.submit button.btn-primary:hover,
button[type="submit"].btn-primary:hover,
.formGeneral button[type="submit"]:hover,
.career.formGeneral button[type="submit"]:hover {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    color: #ffffff !important;
    transform: none !important;
}

/* Footer */
.eBulten {
    background: var(--surface-soft) !important;
}

.footer-menu,
.footer-ust-bar,
.footer-alt-bar {
    background: #0f172a !important;
}

.footer-menu a,
.footer-menu p {
    color: #94a3b8 !important;
    font-size: 14px !important;
    transition: all 0.25s ease !important;
}

.footer-menu .f-baslik {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

.footer-menu a:hover,
.footer-menu .footer-item a:hover {
    color: var(--gold) !important;
}

/* The legacy responsive stylesheet added space below the footer for a mobile bar. */
body > footer.footer-menu {
    margin: auto 0 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* Inner-page headers stay in the document flow, so page titles do not leave a spacer. */
header.fixIcHeader {
    position: sticky !important;
    top: 0 !important;
}

section.page-title,
section.page-title-section {
    margin-top: 0 !important;
}

/* Contact form uses legacy floating rules; keep its fields inside one clean surface. */
.iletisim:has(#contactPageForm) {
    display: flow-root !important;
}

#contactPageForm {
    display: flow-root !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#contactPageForm .form-div {
    clear: both !important;
    float: none !important;
    margin: 0 0 18px !important;
}

#contactPageForm .form-div + .form-div {
    margin-top: 0 !important;
}

#contactPageForm .form-control,
#contactPageForm .select2-container {
    width: 100% !important;
}

#contactPageForm ul.cokluSecim {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#contactPageForm ul.cokluSecim li,
#contactPageForm ul.cokluSecim li:last-child {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

#contactPageForm input[type="radio"] + label {
    display: flex !important;
    min-height: 54px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#contactPageForm input[type="radio"] + label:hover {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

#contactPageForm input[type="radio"]:checked + label {
    background: rgba(250, 178, 49, 0.08) !important;
    color: var(--gold-dark) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 4px 15px rgba(250, 178, 49, 0.1) !important;
}

#contactPageForm input[type="radio"] + label span {
    display: inline !important;
}

#contactPageForm ul.cokluSecim li i {
    position: static !important;
    margin: 0 !important;
}

#contactPageForm ul.cokluSecim li i::before {
    color: currentColor !important;
    font-size: 20px !important;
}

#contactPageForm .captcha-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#contactPageForm .captcha-container .form-control {
    width: 90px !important;
}

#contactPageForm .submit {
    clear: both !important;
    float: none !important;
    margin: 0 !important;
    text-align: right !important;
}

@media (max-width: 575px) {
    #contactPageForm ul.cokluSecim {
        grid-template-columns: 1fr !important;
    }

    #contactPageForm .captcha-container {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 991px) {
    section.pagePad,
    section.page {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .advantage ul,
    .lokasyonSlide ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .boxes ul {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575px) {
    h3.sayfaBaslik,
    .sayfaBaslik {
        font-size: 24px !important;
        margin-bottom: 30px !important;
    }

    .advantage ul,
    .lokasyonSlide ul {
        grid-template-columns: 1fr !important;
    }

    .advantage ul li {
        min-height: 190px !important;
    }

    .lokasyonSlide ul li a {
        height: 300px !important;
    }

    .iletisim,
    .formGeneral,
    .career.formGeneral {
        padding: 22px !important;
    }
}

/* ==========================================
   UNIFORM PREMIUM SWIPER STYLES
   ========================================== */
.swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: #cbd5e1 !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    margin: 0 5px !important;
}

.swiper-pagination-bullet-active {
    background: var(--gold) !important;
    width: 22px !important;
    border-radius: 4px !important;
}

.swiper-button-next,
.swiper-button-prev,
.lokasyonNav .swiper-button-next,
.lokasyonNav .swiper-button-prev {
    width: 46px !important;
    height: 46px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.lokasyonNav .swiper-button-next:hover,
.lokasyonNav .swiper-button-prev:hover {
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.swiper-button-next i:before,
.swiper-button-prev i:before,
.lokasyonNav .swiper-button-next i:before,
.lokasyonNav .swiper-button-prev i:before {
    color: #0f172a !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.swiper-button-next:hover i:before,
.swiper-button-prev:hover i:before,
.lokasyonNav .swiper-button-next:hover i:before,
.lokasyonNav .swiper-button-prev:hover i:before {
    color: var(--gold) !important;
}

.swiper-button-next {
    right: 15px !important;
}
.swiper-button-prev {
    left: 15px !important;
}

/* ==========================================
   HOMEPAGE HERO READABILITY OVERRIDES
   ========================================== */
.mansetSlider h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(15, 23, 42, 0.15) !important;
}

.mansetSlider p.letSlogan {
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 4px rgba(15, 23, 42, 0.2) !important;
}

.mansetSlider span {
    color: #ffffff !important;
    text-shadow: 0 1px 5px rgba(15, 23, 42, 0.15) !important;
}

.mansetSlider .asagi span {
    color: #ffffff !important;
}

/* ==========================================
   SECTION SPACING REDUCTION (SHRINK GAPS)
   ========================================== */
section.pagePad,
section.page,
.pagePad,
.page,
section.why,
section.eBulten,
section.iconSet,
.iletisim-alt,
.indMusteri,
.hizmetItem {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
}

section.lokasyonlar {
    padding-bottom: 0 !important;
}

/* ==========================================
   LOCATION PHOTO GALLERY LAYOUT & ZOOM FIXES
   ========================================== */
.fotoGaleri .tab-content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

.fotoGaleri .tab-pane {
    display: none !important;
    height: auto !important;
    opacity: 0;
    transition: opacity 0.15s linear;
}

.fotoGaleri .tab-pane.active {
    display: block !important;
    opacity: 1 !important;
}

.fotoGaleri .slide ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.fotoGaleri .slide ul::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.fotoGaleri .slide ul li {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.fotoGaleri .slide ul li:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12) !important;
}

.fotoGaleri .slide ul li a img {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fotoGaleri .slide ul li:hover a img {
    transform: scale(1.08) !important;
}

/* ==========================================
   FORM INPUT ICON OVERLAP & SUBMIT BUTTONS
   ========================================== */
.form-div {
    position: relative !important;
}

.form-div i {
    position: absolute !important;
    left: 20px !important;
    top: 85% !important;
    transform: translateY(-50%) !important;
    color: var(--gold) !important;
    font-size: 16px !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.form-div textarea ~ i {
    top: 25px !important;
    transform: none !important;
}

/* Handle CSS select values when there is an icon next to input/textarea/select */
.form-div:has(i) input,
.form-div:has(i) textarea,
.form-div:has(i) select,
.form-div:has(i) .form-control {
    padding-left: 52px !important;
}

/* Modernize the Form Submit Buttons (.border-black) */
button.border-black,
input[type="submit"].border-black {
    background-color: var(--gold) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 34px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-block !important;
    box-shadow: 0 4px 14px rgba(250, 178, 49, 0.25) !important;
    width: auto !important;
    min-width: 180px !important;
    text-align: center !important;
}

button.border-black:hover,
input[type="submit"].border-black:hover {
    background-color: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================
   SERVICE AMENITIES LIST CARDS & HOVER ZOOM
   ========================================== */
.hizmetInner {
    padding: 30px 28px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    height: calc(100% - 30px) !important;
    margin-bottom: 30px !important;
    display: flex !important;
    flex-direction: column !important;
}

.hizmetInner:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(250, 178, 49, 0.3) !important;
}

.hizmetIcon i {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.hizmetInner:hover .hizmetIcon i {
    transform: scale(1.15) rotate(5deg) !important;
}

/* ==========================================
   VIRTUAL OFFICE PRICING PACKAGES
   ========================================== */
.paketItems ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.paketItems ul li {
    width: 30% !important;
    min-width: 300px !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 20px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03) !important;
    padding: 40px 30px !important;
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.paketItems ul li:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(250, 178, 49, 0.35) !important;
}

.paketItems ul li h3.sliceBorder {
    margin-bottom: 25px !important;
    text-align: center !important;
    width: 100% !important;
    border: none !important;
}

.paketItems ul li h3.sliceBorder i {
    font-style: normal !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    padding: 12px 18px !important;
    border-radius: 100px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    transition: all 0.3s ease !important;
}

.paketItems ul li:hover h3.sliceBorder i {
    border-color: var(--gold) !important;
    background: rgba(250, 178, 49, 0.05) !important;
    color: var(--gold) !important;
}

.paketItems ul li p {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    padding: 16px 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.paketItems ul li p:first-of-type {
    border-top: none !important;
}

.paketItems ul li p span.del {
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    opacity: 0.7 !important;
}

.paketItems ul li a.teklif-btn {
    margin-top: 25px !important;
    padding: 2px 28px !important;
    width: 100% !important;
    background-color: var(--gold) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 12px rgba(250, 178, 49, 0.2) !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

.paketItems ul li a.teklif-btn:hover {
    background-color: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================
   ADVANTAGE STATS CARDS PREMIUM OVERRIDES
   ========================================== */
.advantage ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.advantage ul li {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
    padding: 40px 24px !important;
    min-height: 260px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.advantage ul li::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark)) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.advantage ul li:hover::before {
    opacity: 1 !important;
}

.advantage ul li:hover {
    transform: translateY(-10px) scale(1.02) !important;
    border-color: rgba(250, 178, 49, 0.4) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1) !important;
}

.advantage ul li i {
    width: 80px !important;
    height: 80px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 20px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02) !important;
    padding: 0 !important;
}

.advantage ul li i::before {
    color: var(--gold) !important;
    font-size: 32px !important;
    transition: all 0.4s ease !important;
}

.advantage ul li:hover i {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
    border-color: var(--gold) !important;
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(250, 178, 49, 0.3) !important;
}

.advantage ul li:hover i::before {
    color: #ffffff !important;
}

.advantage .stat-num {
    color: var(--gold) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
    display: block !important;
    letter-spacing: -0.02em !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    text-align: center !important;
}

.advantage ul li:hover .stat-num {
    transform: scale(1.08) !important;
}

.advantage ul li > span {
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin-top: 6px !important;
    transition: color 0.3s ease !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

.advantage ul li:hover > span {
    color: #0f172a !important;
}

/* ==========================================
   INNER PAGE HEADER MARGIN GAP RESOLUTION
   ========================================== */
section.page-title,
.pageBaslik {
    margin-top: 0 !important;
}

/* ==========================================
   SELECT2 CREATIVE DROPDOWN OVERRIDES
   ========================================== */
/* Dropdown Wrapper */
.select2-dropdown {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    z-index: 99999 !important;
    animation: select2DropdownEntrance 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    transform-origin: top center !important;
    opacity: 0;
    transform: translateY(8px);
}

@keyframes select2DropdownEntrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Options Container */
.select2-results__options {
    padding: 8px !important;
    max-height: 250px !important;
}

/* Custom Scrollbar for Options List */
.select2-results__options::-webkit-scrollbar {
    width: 6px !important;
}

.select2-results__options::-webkit-scrollbar-track {
    background: #f8fafc !important;
    border-radius: 10px !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
    transition: background 0.3s ease !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Individual Option Item styling */
.select2-container--default .select2-results__option {
    padding: 12px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-results__option:last-child {
    margin-bottom: 0 !important;
}

/* Highlighted Option (Hover / Keyboard Nav) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background: rgba(250, 178, 49, 0.08) !important;
    color: var(--gold-dark) !important;
    font-weight: 600 !important;
    padding-left: 24px !important;
}

/* Left indicator bar on highlighted/hovered options */
.select2-container--default .select2-results__option--highlighted[aria-selected]::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 16px !important;
    background-color: var(--gold) !important;
    border-radius: 2px !important;
}

/* Active Selected Option */
.select2-container--default .select2-results__option[aria-selected=true] {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Remove default Select2 styling borders/outlines on opening */
.select2-container--open .select2-dropdown--below {
    border-top: 1.5px solid #e2e8f0 !important;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
}

/* Selection Box Arrow styling */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg) !important;
    border-color: var(--gold) transparent transparent transparent !important;
}

/* ==========================================
   CHECKPOINT 18 FIXES
   ========================================== */

/* 1. Make form section headings visible on dark background */
section.page.hizliTeklif h3.sayfaBaslik,
section.page.hizliTeklif .sayfaBaslik,
section.page.hizliTeklif h3.sayfaBaslik.white,
.hizliTeklif .sayfaBaslik {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}

/* 2. Minimal social media icons - no background boxes, just clean SVGs */
.f-social {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    float: none !important;
    margin-top: 0 !important;
    flex-wrap: wrap !important;
}

.f-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: rgba(148, 163, 184, 0.75) !important;
    float: none !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
}

.f-social a svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    transition: inherit !important;
}

.f-social a:hover {
    color: var(--gold) !important;
    transform: translateY(-2px) !important;
    background: none !important;
}

.f-social a:hover svg {
    transform: none !important;
}

/* 3. Fix file upload input - prevent icon overlapping the Browse button */
.form-div input[type="file"] {
    border: 1.5px dashed #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    width: 100% !important;
}

.form-div input[type="file"]::file-selector-button {
    background: var(--gold) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-right: 12px !important;
    transition: background 0.2s ease !important;
}

.form-div input[type="file"]::file-selector-button:hover {
    background: #0f172a !important;
}

/* Hide flaticon that overlaps file input */
.form-div:has(input[type="file"]) > i,
.form-div:has(input[type="file"]) i.flaticon-man {
    display: none !important;
}

/* 4. Teklif butonları - centered with auto margin */
.paketItems ul li a.teklif-btn {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
}

/* Hizmet secim butonlari */
ul.cokluSecim input[type="checkbox"],
ul.cokluSecim input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

ul.cokluSecim input[type="checkbox"] + label,
ul.cokluSecim input[type="radio"] + label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    min-width: 0;
    padding: 0 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
}

ul.cokluSecim input[type="checkbox"] + label span,
ul.cokluSecim input[type="radio"] + label span {
    display: inline;
}

.form-div ul.cokluSecim li i,
.modal .form-div ul.cokluSecim li i,
ul.cokluSecim li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    order: -1;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    color: currentColor !important;
    line-height: 1 !important;
}

ul.cokluSecim li i::before {
    color: currentColor !important;
    font-size: 28px;
    line-height: 1;
}

@media screen and (max-width: 991px) {
    ul.cokluSecim li i {
        display: none !important;
    }
}