/*===============================================
CreaDays Custom Styles - RoofStacks Inspired
Hero Section Overrides
================================================*/
:root{
    --accent: #39b54a;
    --accent2: #39b54a;
    --text: #FFFFFF;
    --muted: #FFFFFF;
    --panel: rgba(255,255,255,.04);
    --panelBorder: rgba(255,255,255,.10);
  }

  /* ===== GLOBAL FONT OVERRIDE ===== */

body,
p,
a,
button,
input,
textarea,
select {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500;
  letter-spacing: -0.02em;
}

  .accent-color{ color: var(--accent) !important; }
  
/* ===============================================
   LANGUAGE SWITCHER - TR/EN Button
   =============================================== */

/* Language switch button - desktop & mobile */
.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(38, 109, 7, 0.08);
    border: 1px solid rgba(1, 21, 4, 0.3);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.lang-switch-btn:hover {
    background: rgba(7, 69, 22, 0.15);
    border-color: #4ac204;
}

.lang-switch-btn .lang-tr,
.lang-switch-btn .lang-en {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
}

.lang-switch-btn .lang-tr.active,
.lang-switch-btn .lang-en.active {
    color: #18bb46;
}

.lang-switch-btn .lang-separator {
    color: rgba(255, 255, 255, 0.3);
}

/* Desktop navbar - language button */
@media (min-width: 1200px) {
    .navbar-cta-container {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
    }
    
    /* Mobil dil butonunu desktop'ta gizle */
    .navbar-lang-mobile {
        display: none !important;
    }
}

/* Mobile/Tablet - language button in navbar collapse */
@media (max-width: 1199px) {
    .navbar-lang-mobile {
        display: flex;
        justify-content: center;
        padding: 1rem 0 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 0.5rem;
    }
    
    .navbar-lang-mobile .lang-switch-btn {
        font-size: 0.9375rem;
        padding: 0.625rem 1.25rem;
    }
    
    /* Desktop dil butonunu mobile'da gizle */
    .navbar-cta-container .lang-switch-btn {
        display: none !important;
    }
}

/* ===============================================
   GLOBAL TEXT COLOR - Tüm Yazılar Beyaz
   =============================================== */
body {
    color: #FFFFFF !important;
    position: relative;
}

/* Navbar açıkken body scroll'u engelleme (opsiyonel - kapatılmış durumda) */
/* body.navbar-open {
    overflow: hidden;
} */

h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF !important;
}

p, span, div, li, a {
    color: #FFFFFF !important;
}

/* Accent renkli başlıklar korunur */
.accent-color {
    color: var(--accent) !important;
}
  
/* Hero Section - RoofStacks Full-Width Background Image Style */
.banner-home {
    background: #000000 !important;
    background-image: none !important;
    min-height: auto;
    height: auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

@media (min-width: 1200px) {
    .banner-home {
        min-height: 95vh;
        min-height: 95svh;
    }
}

/* Mobil/Tablet için section düzeni */
@media (max-width: 992px) {
    .banner-home {
        align-items: flex-start;
        padding-top: 70px; /* Fixed header için boşluk */
    }
    
    /* Background ve overlay full-height olsun */
    .hero-bg,
    .hero-overlay {
        height: 100%;
        top: 0;
    }
}

/* Hero Background Image Layer */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/hizmetler-2/multisports2.jpg');
    background-size: cover;
    background-position: center center; /* Desktop - merkez */
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* Desktop için sol pozisyon */
@media (min-width: 1200px) {
    .hero-bg {
        background-position: left center;
    }
}

/* Hero Dark Overlay for Readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 0, 0, 0.65) 45%, 
        rgba(0, 0, 0, 0.20) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Hero Container - Centered with equal spacing */
.banner-home .hero-container{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 6rem clamp(24px, 5vw, 100px) 4rem clamp(24px, 5vw, 100px);
    position: relative;
    z-index: 3;
    min-height: fit-content;
  }
  
  @media (min-width: 1200px) {
    .banner-home .hero-container {
        padding: 8rem clamp(24px, 6vw, 120px) 6rem clamp(24px, 6vw, 120px);
    }
  }
  

/* Banner Content - Left-aligned within centered container */
.banner-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
    position: relative;
    z-index: 3;
    max-width: 700px;
    width: 100%;
    min-width: 0;
    margin-left: 0;
}

@media (min-width: 1200px) {
    .banner-content {
        margin-left: calc(-1 * clamp(24px, 9vw, 120px));
    max-width: 650px;
    }
}

/* Mobilde negatif margin kaldır */
@media (max-width: 768px) {
    .banner-content {
        margin-left: 0;
    }
}

/* Sub-heading Badge - RoofStacks Style */
.banner-sub-heading {
    display: inline-block;
    margin: 0;
    margin-right: auto;
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid rgba(14, 222, 10, 0.5);
    background: linear-gradient(135deg, rgba(57, 181, 74, 0.08) 0%, rgba(255, 80, 20, 0.05) 100%);
    backdrop-filter: blur(10px);
    width: fit-content;
    box-shadow: 0 4px 20px rgba(57, 181, 74, 0.12);
}

.banner-sub-heading h6 {
    color: #39b54a;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin: 0;
}

/* Main Heading - Premium Typography (NEVER truncate) */
.hero-headline {
    font-size:45px;
   /* font-weight: 900;*/
    line-height: 1.05;
    color: #FFFFFF;
    margin: 0;
    margin-left: 0;
    padding: 0;
    padding-left: 0;
    letter-spacing: -0.04em;
    display: block;
    overflow: visible;
    word-wrap: break-word;
    align-self: flex-start; /* Flex container içinde sola hizala */
}

/* Gradient Text Effect - Roofstacks Orange-Red */
.hero-headline .h1-wrapper {
    color: #39b54a;
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 50%, #39b54a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: gradient-shift 4s ease infinite;
    white-space: nowrap; /* Keep "Daha Hızlı Büyür" on single line */
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Description Text */
.hero-description {
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    margin-left: 0;
    padding: 0;
    padding-left: 0;
    max-width: 90%; /* Genişliği %90 ile sınırla */
    text-align: left; /* Sola hizala */
    align-self: flex-start; /* Flex container içinde sola hizala - hero-headline ile aynı */
}

/* CTA Button Group */
.hero-cta-group {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0;
    margin-left: 0;
    padding: 0;
    padding-left: 0;
    align-self: flex-start; /* Flex container içinde sola hizala - hero-description ile aynı */
}

/* Primary CTA Button - Filled (Roofstacks Orange) */
.hero-btn-primary {
    padding: 16px 36px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 50px;
    background: #39b54a;
    box-shadow: 0 10px 40px rgba(57, 181, 74, 0.25);
    transition: all 0.3s ease;
    text-transform: none;
    border: none;
    color: #FFFFFF;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(0, 255, 30, 0.4);
    background: #39b54a;
    color: #FFFFFF;
}

/* Secondary CTA Button - Outline (Roofstacks Orange) */
.hero-btn-secondary {
    padding: 16px 36px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: transparent;
    color: #FFFFFF;
    transition: all 0.3s ease;
    text-transform: none;
}

.hero-btn-secondary:hover {
    background: rgba(57, 181, 74, 0.1);
    border-color: #39b54a;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Old Right Column - REMOVED (hero-visual, dashboard-mock) */
/* These elements no longer exist in DOM */

/* Header/Navbar - Hero Compatible Dark Style (Roofstacks Orange) */
.header-fixed {
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(57, 181, 74, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.3s ease;
}

.header-fixed.scrolled {
    background-color: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Logo Size - Increase from default 30% to normal size */
.logo-container.header-logo {
    max-width: 25% !important;
}

.logo-container.header-logo img {
    max-width: 100% !important; /* Increased from 30% */
    height: auto;
}

/* Navbar Links - White on Dark */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #39b54a !important;
}

/* Navbar CTA Button - Outline Style (Roofstacks Orange) */
.navbar-cta-container .btn-accent-outline {
    border-color: rgba(14, 222, 10, 0.5);
    color: #FFFFFF;
    white-space: normal;
    text-align: center;
    padding: 0.5rem 1.25rem;
    line-height: 1.4;
}

.navbar-cta-container .btn-accent-outline:hover {
    background-color: rgba(3, 38, 3, 0.279);
    border-color: #12d518;
    color: #FFFFFF;
}

@media (min-width: 1200px) {
    .navbar-cta-container .btn-accent-outline {
        white-space: nowrap;
    }
}

/* Mobile Menu Button */
.nav-btn {
    color: #FFFFFF !important;
    border: 1px solid rgba(12, 230, 23, 0.3);
    background: rgba(57, 156, 7, 0.501) !important;
    background-image: none !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-btn i {
    transition: transform 0.3s ease;
}

.nav-btn:hover {
    background: rgba(57, 181, 74, 0.15) !important;
    background-image: none !important;
    border-color: #39b54a !important;
    color: #FFFFFF !important;
    transform: scale(1.05);
}

.nav-btn:hover i {
    transform: rotate(90deg);
}

.nav-btn:focus,
.nav-btn:active {
    background: rgba(57, 181, 74, 0.15) !important;
    background-image: none !important;
    border-color: #39b54a !important;
    color: #FFFFFF !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Navbar açıkken buton stili */
.nav-btn[aria-expanded="true"] {
    background: rgba(57, 181, 74, 0.2) !important;
    border-color: #39b54a !important;
}

.nav-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Navbar Collapse - Mobil/Tablet Stiller */
@media (max-width: 1199px) {
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.98) !important;
        backdrop-filter: blur(20px);
        padding: 1.5rem 1rem;
        margin-top: 1rem;
        border-radius: 12px;
        border: 1px solid rgba(57, 181, 74, 0.2);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        right: 0;
        width: calc(100% - 2rem);
        margin-left: 1rem;
        margin-right: 1rem;
        z-index: 9990;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .navbar-collapse.show {
        animation: slideDown 0.3s ease forwards;
    }

    .navbar-collapse.collapsing {
        transition: height 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: flex !important;
        flex-direction: column;
    }

    .navbar-nav {
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
        text-align: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }

    .navbar-nav .nav-link {
        font-size: clamp(1rem, 2vw, 1.1rem);
        padding: 0.75rem 1rem;
        display: block;
        width: 100%;
        transition: all 0.3s ease;
        border-radius: 8px;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
        overflow-wrap: break-word;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        background: rgba(57, 181, 74, 0.15);
        color: #39b54a !important;
    }

    .navbar-nav .nav-link.active {
        background: rgba(57, 181, 74, 0.2);
        color: #39b54a !important;
    }

    /* Navbar scrollable olduğunda header'ın altında kal */
    .header-fixed .navbar {
        position: relative;
    }

    /* Scrollbar stilleri */
    .navbar-collapse::-webkit-scrollbar {
        width: 6px;
    }

    .navbar-collapse::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }

    .navbar-collapse::-webkit-scrollbar-thumb {
        background: rgba(57, 181, 74, 0.5);
        border-radius: 10px;
    }

    .navbar-collapse::-webkit-scrollbar-thumb:hover {
        background: rgba(57, 181, 74, 0.7);
    }
}


/* ===============================================
   SERVICE SECTION – ROOFSTACKS DIMENSIONS
   =============================================== */

/* Service section başlık - responsive */
#service .d-flex.flex-column.gspace-4 {
    gap: 1.5rem;
}

#service .d-flex.flex-column.align-items-center h3 {
    text-align: center;
    max-width: 800px;
    margin: 20px;
}

#service .d-flex.flex-column.align-items-center p {
    text-align: center;
    max-width: 700px;
}

/* Mobil için başlık ayarları */
@media (max-width: 768px) {
    #service .d-flex.flex-column.gspace-4 {
        gap: 1.25rem;
    }
    
    #service .d-flex.flex-column.align-items-center h3 {
        font-size: 1.75rem;
        padding: 0 1rem;
    }
    
    #service .d-flex.flex-column.align-items-center p {
        font-size: 0.9375rem;
        padding: 0 1rem;
    }
}

/* Service content grid - Base (mobil-first) */
#service .service-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
    margin: 0 auto;
    margin-top: 2rem;
    max-width: 100%;
}

/* Desktop grid layout */
@media (min-width: 1024px) {
#service .service-content-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 260px));
    gap: 24px;
    justify-content: center;
    max-width: 1150px;
    margin-top: 3rem;
        padding: 0;
    }
}

/* Service wrapper - fade border container */
#service .card-service-wrapper {
    background-image: none !important;
    background-color: var(--accent-color-2) !important;
    border: none !important;
    padding: 2px !important;
    position: relative;
    transition: all 0.4s ease !important;
    cursor: pointer;
    overflow: visible;
    width: 100%;
    max-width: 100%; /* Mobil-first: tam genişlik */
    
    /* Initial state for entrance animation */
    opacity: 0;
    transform: translateY(20px); /* Mobilde yukarıdan aşağı animasyon */
}

/* Desktop için sabit genişlik */
@media (min-width: 1024px) {
    #service .card-service-wrapper {
        max-width: 260px;
        transform: translateX(-30px); /* Desktop'ta soldan sağa animasyon */
    }
}

/* Animated state - triggered by IntersectionObserver */
#service .card-service-wrapper.animate-in {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Reduced motion support - skip animation */
@media (prefers-reduced-motion: reduce) {
    #service .card-service-wrapper {
        opacity: 1;
        transform: none;
    }
    
    #service .card-service-wrapper.animate-in {
        transition: none;
    }
}

/* Fade border with mask - turuncu */
#service .card-service-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(180deg, #39b54a 0%, #39b54a 50%, transparent 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.3;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

#service .card-service-wrapper:hover::before {
    opacity: 1;
}

/* Service card - RoofStacks boyutları */
#service .card-service {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--secondary) !important;
    transition: all 0.3s ease;
    z-index: 2;
    min-height: auto; /* Değişti: 410px → auto */
    height: auto;
    width: 100%;
    padding: 1.75rem !important;
    gap: 1rem;
}

@media (min-width: 1200px) {
    #service .card-service {
        min-height: 420px; /* Desktop'ta minimum yükseklik */
    }
}

/* Desktop için minimum yükseklik (sabit değil, esnek) */
@media (min-width: 1024px) {
    #service .card-service {
        min-height: 420px;
        height: auto;
    }
}

/* Mobil/Tablet için küçük gap */
@media (max-width: 1023px) {
    #service .card-service {
        gap: 0.75rem; /* Küçültüldü: 1rem → 0.75rem */
    }
}

/* Çok küçük mobil için daha az gap */
@media (max-width: 479px) {
    #service .card-service {
        gap: 0.65rem; /* Küçültüldü: 0.75rem → 0.65rem */
    }
}

/* Icon container - kompakt */
#service .card-service > div:first-child {
    margin-bottom: 0.5rem;
}

#service .card-service > div:first-child img {
    width: auto;
    height: auto;
}

/* Mobil/Tablet için icon boyutu küçült */
@media (max-width: 1023px) {
    #service .card-service > div:first-child {
        margin-bottom: 0.25rem;
    }
    
    #service .card-service > div:first-child img {
        max-width: 45px;
        max-height: 45px;
    }
}

/* Çok küçük mobil için daha da küçük icon */
@media (max-width: 479px) {
    #service .card-service > div:first-child img {
        max-width: 40px;
        max-height: 40px;
    }
}

#service .card-service h4 {
    margin-bottom: 0.875rem !important;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word;
    word-break: normal;
}

#service .card-service p {
    margin-bottom: 1rem !important;
    font-size: clamp(0.875rem, 1.8vw, 0.9375rem) !important;
    line-height: 1.6 !important;
    overflow-wrap: break-word;
    word-break: normal;
    flex-grow: 1;
}

/* Service Media - Resim alanı */
#service .service-media {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#service .service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Hover - turuncu glow */
#service .card-service-wrapper:hover {
    box-shadow: 0 10px 40px rgba(57, 181, 74, 0.4) !important;
    transform: translateY(-4px);
}

/* "Daha Fazla" yazısını gizle 
#service .service-cta .service-link {
    display: none !important;
}*/

/* CTA sadece ok ikonu */
#service .service-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-top: 0.75rem !important;
    margin-top: auto !important;
    gap: 0 !important;
}

#service .service-cta i {
    color: #39b54a !important;
    transition: all 0.3s ease !important;
    font-size: 1rem !important;
}

#service .card-service-wrapper:hover .service-cta i {
    color: #39b54a !important;
    transform: translateX(5px);
}

/* Highlight service - SİYAH ARKA PLAN (turuncu sadece accent) */
#service .card-service.highlight-service {
    background-color: var(--secondary) !important;
    background-image: none !important;
}

/* Highlight kartın border'ı biraz daha belirgin */
#service .card-service-wrapper:has(.highlight-service)::before {
    opacity: 0.5;
}

#service .card-service-wrapper:has(.highlight-service):hover::before {
    opacity: 1;
}

/* Highlight service ok ikonu turuncu */
#service .card-service.highlight-service .service-cta i {
    color: #39b54a !important;
}

#service .card-service-wrapper:hover .card-service.highlight-service .service-cta i {
    color: #39b54a !important;
}

/* Active/Focus durumları temiz */
#service .card-service-wrapper:active,
#service .card-service-wrapper:focus,
#service .card-service-wrapper:focus-visible {
    outline: none !important;
    border: none !important;
}

#service .card-service a:focus,
#service .card-service a:active {
    outline: none !important;
}

/* Bootstrap active class override */
#service .card-service-wrapper.active,
#service .card-service-wrapper.show,
#service .card-service-wrapper[aria-selected="true"] {
    transform: none !important;
    box-shadow: none !important;
}

/* ===============================================
   SERVICE CAROUSEL - Mobile/Tablet Navigation
   =============================================== */

/* Carousel container - sadece mobil/tablet'ta görünür */
.services-carousel-container {
    position: relative;
}

/* Carousel navigation buttons - default hidden 
.service-carousel-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(57, 181, 74, 0.95);
    border: none;
    color: #FFFFFF;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

.service-carousel-btn:hover {
    background: rgba(57, 181, 74, 1);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(57, 181, 74, 0.4);

.service-carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.service-carousel-btn:focus {
    outline: 2px solid rgba(57, 181, 74, 0.5);
    outline-offset: 2px;
}

.service-carousel-prev {
    left: 0;
}

.service-carousel-next {
    right: 0;
}
*/
/* Desktop (>=1024px) - Grid düzeni korunur */
@media (min-width: 1024px) {
    #service .service-content-wrapper {
        display: grid;
        grid-template-columns: repeat(4, minmax(240px, 260px));
        gap: 24px;
        justify-content: center;
        max-width: 1150px;
        margin: 0 auto;
        overflow: visible;
    }
    
    /* Carousel butonları desktop'ta gizli */
    .service-carousel-btn {
        display: none !important;
    }
}

/* Tablet (<1024px) - Alt Alta Dizilim */
@media (max-width: 1023px) and (min-width: 768px) {
    .services-carousel-container {
      position: relative;
      padding: 0 2rem;
      width: 100%;
    }
  
    #service .service-content-wrapper {
      gap: 45px;
      padding: 25px 0;
      margin-top: 2.5rem;
    }
  
    #service .card-service-wrapper {
      width: 90%;
      max-width: 480px;
    }
    
    #service .card-service {
      min-height: auto; /* Değişti: sabit 300px → auto */
      height: auto;
      padding: 1.5rem !important;
    }
  
    #service .card-service h4 {
      font-size: clamp(1.15rem, 2.5vw, 1.35rem) !important;
    }
  
    #service .card-service p {
      font-size: clamp(0.875rem, 1.8vw, 0.9375rem) !important;
      line-height: 1.6 !important;
    }
    
    #service .service-media {
      height: 120px;
    }
  
    /* Carousel butonlarını gizle */
    .service-carousel-btn {
      display: none !important;
    }
  }
  

/* Mobil (<768px) - Kompakt kartlar */
@media (max-width: 767px) {
    .services-carousel-container {
        padding: 0 1rem;
    }
    
    #service .service-content-wrapper {
        gap: 35px;
        padding: 15px 0;
        margin-top: 2rem;
    }
    
    #service .card-service-wrapper {
        width: 92%;
        max-width: 420px;
    }
    
    #service .card-service {
        min-height: auto; /* Değişti: sabit 320px → auto */
        height: auto;
        padding: 1.25rem 1rem !important;
    }
    
    #service .card-service h4 {
        font-size: clamp(1.1rem, 2.5vw, 1.25rem) !important;
        margin-bottom: 0.75rem !important;
    }
    
    #service .card-service p {
        font-size: clamp(0.8125rem, 1.8vw, 0.875rem) !important;
        line-height: 1.6 !important;
    }
    
    #service .service-media {
        height: 110px;
        margin-bottom: 0.5rem;
    }
}

/* Çok Küçük Mobil (<480px) */
@media (max-width: 479px) {
    .services-carousel-container {
        padding: 0 0.75rem;
    }
    
    #service .service-content-wrapper {
        gap: 30px;
    }
    
    #service .card-service-wrapper {
        width: 95%;
        max-width: 380px;
    }
    
    #service .card-service {
        min-height: auto; /* Değişti: sabit 340px → auto */
        height: auto;
        padding: 1.25rem 1rem !important;
    }
    
    #service .card-service h4 {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
        margin-bottom: 0.75rem !important;
    }
    
    #service .card-service p {
        font-size: clamp(0.75rem, 1.8vw, 0.8125rem) !important;
        line-height: 1.55 !important;
    }
    
    #service .service-media {
        height: 100px;
        margin-bottom: 0.5rem;
    }
}

/* Responsive - Tablet */
@media (max-width: 992px) {
    .banner-home {
        min-height: auto; /* Değişti: sabit 85vh → auto */
        height: auto;
        padding-top: 80px;
        padding-bottom: 3rem;
    }
    
    /* Tablet'te background image merkez */
    .hero-bg {
        background-position: center center;
        background-size: cover;
    }
    
    /* Tablet'te overlay daha dengeli */
    .hero-overlay {
        background: linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.65) 0%, 
            rgba(0, 0, 0, 0.55) 50%, 
            rgba(0, 0, 0, 0.60) 100%);
    }
    
    .banner-home .hero-container,
    .about-banner .hero-container {
        padding-left: clamp(20px, 4vw, 40px);
        padding-right: clamp(20px, 4vw, 40px);
    }
    
    .banner-home .hero-container {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
    
    .banner-content {
        margin-top: 1rem;
    }
    
    .hero-description {
        max-width: 100%;
    }
    
    /* About banner ile aradaki boşluğu azalt */
    .about-banner {
        margin-top: -2em;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .banner-home {
        min-height: auto; /* Değişti: sabit 80vh → auto */
        height: auto;
        padding-top: 70px;
        padding-bottom: 2.5rem;
    }
    
    /* Mobilde background image daha iyi görünsün */
    .hero-bg {
        background-position: center center;
        background-size: cover;
    }
    
    .banner-home .hero-container,
    .about-banner .hero-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .banner-home .hero-container {
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }
    
    /* Overlay mobilde - daha dengeli gradient */
    .hero-overlay {
        background: linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.70) 0%, 
            rgba(0, 0, 0, 0.60) 40%,
            rgba(0, 0, 0, 0.50) 60%, 
            rgba(0, 0, 0, 0.65) 100%);
    }
    
    .banner-content {
        max-width: 100%;
        margin-top: 1rem;
    }
    
    .hero-headline {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }
    
    .hero-description {
        font-size: clamp(0.9375rem, 2vw, 1rem);
    }
    
    /* Buttons stack vertically on mobile */
    .hero-cta-group {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: 0.875rem;
    }
    
    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        text-align: center;
        padding: 14px 24px;
    }
    
    /* About banner ile aradaki boşluğu azalt */
    .about-banner {
        margin-top: -1.5em;
    }
}

@media (max-width: 576px) {
    .banner-home {
        min-height: auto; /* Değişti: sabit 75vh → auto */
        height: auto;
        padding-top: 65px;
        padding-bottom: 2rem;
    }
    
    /* Küçük ekranlarda background tam görünsün */
    .hero-bg {
        background-position: center center;
        background-size: cover;
    }
    
    .banner-home .hero-container,
    .about-banner .hero-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    
    .banner-home .hero-container {
        padding-top: 1.75rem;
        padding-bottom: 1.25rem;
    }
    
    /* Küçük ekranlarda dengeli overlay */
    .hero-overlay {
        background: linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.75) 0%, 
            rgba(0, 0, 0, 0.65) 50%, 
            rgba(0, 0, 0, 0.70) 100%);
    }
    
    .banner-content {
        max-width: 100%;
        margin-top: 1rem;
    }
    
    .hero-headline {
        font-size: clamp(1.5rem, 5vw, 2rem);
        line-height: 1.2;
    }
    
    .hero-description {
        font-size: clamp(0.875rem, 2vw, 1rem);
    }
    
    .banner-sub-heading {
        padding: 8px 18px;
    }
    
    .banner-sub-heading h6 {
        font-size: clamp(0.65rem, 1.5vw, 0.75rem);
        letter-spacing: 1.5px;
    }
    
    .hero-btn-primary,
    .hero-btn-secondary {
        padding: 13px 24px;
        font-size: clamp(0.875rem, 1.8vw, 0.9375rem);
    }
    
    /* About banner ile aradaki boşluğu azalt */
    .about-banner {
        margin-top: -1em;
    }
}
/* ===============================================
   ABOUT SECTION – LAYOUT & ALIGNMENT
   =============================================== */

/* About Section - Banner Home'a yakın konumlandırma */
.about-banner {
    margin-top: -4em;
}

/* About Container - Hero ile aynı hizalama */
.about-banner .hero-container {
    padding-left: clamp(24px, 6vw, 120px);
    padding-right: clamp(24px, 6vw, 120px);
}

/* Sol kolon - görsel hizalama */
#about .row > .col:first-child > div {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* About buton stili - gradient arka plan - TÜM about-banner bölümleri için */
.about-banner .btn-accent {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    box-shadow: 0 10px 40px rgba(57, 181, 74, 0.25);
    transition: all 0.3s ease;
    border: none;
    color: #FFFFFF !important;
}

.about-banner .btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(57, 181, 74, 0.4);
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    color: #FFFFFF !important;
}

/* Görsel stil - küçültme ve yuvarlama */
.about-img {
    max-width: 75% !important;
    width: 75% !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.about-img img {
    border-radius: 16px;
    display: block;
    width: 100%;
    height: auto;
}

/* Sağ kolon - içerik hizalama */
.about-detail {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
    padding-left: 50px !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 35px;
    min-width: 0;
}

.about-detail * {
    min-width: 0;
    overflow-wrap: break-word;
}

/* h6 başlık - görselle dikey hizalama için */
.about-detail h6 {
    margin-top: 0;
    margin-bottom: 0;
}

/* h3 başlık - paragrafla yakın */
.about-detail h3 {
    margin-top: 0;
    margin-bottom: 0;
}

/* Paragraf - h3 ile buton arasında */
.about-detail p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Buton wrapper - paragrafın hemen altında */
.about-detail > div {
    margin-top: 0;
}

/* Tablet responsive */
@media (max-width: 1199px) {
    .about-detail {
        padding-left: 30px !important;
    }
    
    .about-img {
        max-width: 85% !important;
        width: 85% !important;
    }
}

/* Mobil responsive */
@media (max-width: 991px) {
    #about .row > .col:first-child > div {
        margin-bottom: 2rem;
        justify-content: center;
    }
    
    .about-detail {
        padding-left: 0 !important;
        text-align: center;
        align-items: center !important;
        gap: 1.25rem !important;
    }
    
    .about-img {
        max-width: 90% !important;
        width: 90% !important;
        border-radius: 14px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    }
    
    .about-img img {
        border-radius: 14px;
    }
}

@media (max-width: 576px) {
    .about-detail {
        gap: 1rem !important;
    }
    
    .about-img {
        max-width: 95% !important;
        width: 95% !important;
        border-radius: 12px;
    }
    
    .about-img img {
        border-radius: 12px;
    }
}
  
/* PORTFOLIO: mor overlay ve hover efektini kapat, görseli düz göster */
.portfolio-image{
    background: transparent !important;
    background-image: none !important;
  }
  
  .portfolio-image img{
    opacity: 1 !important;
    filter: none !important;
    transition: none !important; /* istersen kalsın, istemiyorsan kapat */
  }
  
  /* Hover olunca da değişmesin */
  .portfolio-image:hover img{
    opacity: 1 !important;
    filter: none !important;
  }

/* ===============================================
   PORTFOLIO BUTON – TURUNCU RENK
   =============================================== */

/* Portfolio buton - turuncu arka plan */
.portfolio-btn {
    background: #39b54a !important;
    background-image: none !important;
    transition: all 0.3s ease;
}

.portfolio-btn:hover {
    background: #39b54a !important;
    background-image: none !important;
    transform: scale(1.1);
}

/* Portfolio buton - active/focus durumları */
.portfolio-btn:active,
.portfolio-btn:focus {
    background: #39b54a !important;
    outline: none;
}

/* Portfolio meta ikonları - turuncu (değişmez) */
.portfolio-meta i {
    color: #39b54a !important;
    flex-shrink: 0;
}

/* Portfolio meta başlık ve yazılar - beyaz */
.portfolio-meta .title,
.portfolio-meta p,
.portfolio-meta span {
    color: #FFFFFF !important;
    overflow-wrap: break-word;
    word-break: normal;
}

.portfolio-meta div {
    color: #FFFFFF !important;
    min-width: 0;
}

.portfolio-meta {
    min-width: 0;
    flex: 1;
}

/* ===============================================
   CONTACT CTA SECTION – BUTON RENGİ
   =============================================== */

/* Contact CTA buton - turuncu gradient */
.contactus-banner .btn-accent {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    box-shadow: 0 10px 40px rgba(57, 181, 74, 0.25);
    border: none;
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

.contactus-banner .btn-accent:hover {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    box-shadow: 0 15px 50px rgba(57, 181, 74, 0.4);
    transform: translateY(-2px);
    color: #FFFFFF !important;
}

/* Active/Focus durumları */
.contactus-banner .btn-accent:active,
.contactus-banner .btn-accent:focus {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    outline: none;
}

/* ===============================================
   CONTACT SECTION – GÖNDER BUTONU
   =============================================== */

/* Contact ikonlar arası boşluk */
#contact .d-flex.flex-row.align-items-center i {
    margin-right: 15px;
    min-width: 24px;
}

/* Contact form gönder butonu - turuncu gradient */
#contact .btn-accent,
#contact-form .btn-accent,
.contact-form .btn-accent {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    box-shadow: 0 10px 40px rgba(57, 181, 74, 0.25);
    border: none;
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

#contact .btn-accent:hover,
#contact-form .btn-accent:hover,
.contact-form .btn-accent:hover {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    box-shadow: 0 15px 50px rgba(57, 181, 74, 0.4);
    transform: translateY(-2px);
    color: #FFFFFF !important;
}

/* Active/Focus durumları */
#contact .btn-accent:active,
#contact .btn-accent:focus,
#contact-form .btn-accent:active,
#contact-form .btn-accent:focus,
.contact-form .btn-accent:active,
.contact-form .btn-accent:focus {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    outline: none;
}

/* ===============================================
   CONTACT FORM – OLD STYLES (Replaced by Modern Contact Section Below)
   =============================================== */
/* These styles are now handled by the Modern Contact Section CSS block at the end of this file */
  
/* ===============================================
   FOOTER SECTION – BUTON RENKLERİ
   =============================================== */

/* Footer underline çizgilerini gizle */
.underline-footer {
    display: none !important;
}

/* Footer sosyal medya butonları - turuncu */
.social-item {
    background: #39b54a !important;
    border: 1px solid #39b54a !important;
    transition: all 0.3s ease;
}

.social-item:hover {
    background: #39b54a !important;
    border-color: #39b54a !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(57, 181, 74, 0.4);
}

.social-item i {
    color: #FFFFFF !important;
}

/* Footer newsletter butonu - turuncu gradient */
footer .btn-accent,
.footer-banner .btn-accent,
#newsletterForm .btn-accent {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    box-shadow: 0 8px 30px rgba(57, 181, 74, 0.25);
    border: none;
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

footer .btn-accent:hover,
.footer-banner .btn-accent:hover,
#newsletterForm .btn-accent:hover {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    box-shadow: 0 12px 40px rgba(57, 181, 74, 0.4);
    transform: translateY(-2px);
    color: #FFFFFF !important;
}

/* Active/Focus durumları */
footer .btn-accent:active,
footer .btn-accent:focus,
.footer-banner .btn-accent:active,
.footer-banner .btn-accent:focus {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    outline: none;
}

/* ===============================================
   FOOTER İKONLAR – HIZALAMA
   =============================================== */

/* Footer ikonlar ile yazılar arasında boşluk */
footer .fa-solid,
.footer-banner .fa-solid {
    margin-right: 15px !important;
    min-width: 24px;
    flex-shrink: 0; /* İkonların küçülmemesini sağla */
}

/* Footer iletişim satırları - dikey hizalama */
footer .d-flex.flex-row.align-items-center,
.footer-banner .d-flex.flex-row.align-items-center {
    align-items: center !important; /* İkonları yazılarla ortala */
}

/* Footer iletişim metinleri - sol boşluk */
footer .d-flex.flex-column.gspace-1,
.footer-banner .d-flex.flex-column.gspace-1 {
    margin-left: 10px;
}

/* ===============================================
   MULTIPAGE FIX - Header & Content Spacing
   =============================================== */

/* Header z-index - Her zaman en üstte kalsın */
.header-fixed {
    z-index: 9999 !important;
}

/* Hero olmayan sayfalarda içerik için üst boşluk */
.page-with-fixed-header main {
    padding-top: 100px;
}

/* Mobil cihazlarda daha az padding */
@media (max-width: 768px) {
    .page-with-fixed-header main {
        padding-top: 80px;
    }
}

/* Service detail sections - anchor scroll offset */
.service-detail-section {
    scroll-margin-top: 120px;
}

@media (max-width: 768px) {
    .service-detail-section {
        scroll-margin-top: 90px;
    }
}
  
/* Desktop (>=1200px) - Sidebar gizli, navbar görünür */
@media (min-width: 1200px) {
    aside, .sidebar-overlay, .sidebar {
        display: none !important;
    }
    
    /* Desktop navbar düzeni */
    .navbar {
        display: flex;
        align-items: center;
    }
    
    /* Logo container - sol tarafa sabitle */
    .logo-container.header-logo {
        flex-shrink: 0;
        margin-right: 1rem;
    }

    .navbar .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 1;
        justify-content: center;
        margin: 0 auto; /* Ortalama */
        max-width: fit-content; /* İçeriğe göre genişlik */
    }

    .navbar-nav {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        margin: 0;
        padding: 0 2rem; /* Sağ ve soldan boşluk ekle */
    }

    .navbar-nav .nav-item {
        margin: 0;
        display: flex;
        align-items: center;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        white-space: nowrap;
        text-align: center;
    }
    
    /* Desktop navbar CTA butonu görünür */
    .navbar-cta-container {
        display: flex !important;
        align-items: center;
        gap: 0.875rem;
        flex-shrink: 0;
        margin-left: auto; /* Sağa yasla */
    }
    
    /* Desktop menü butonu gizli */
    .nav-btn {
        display: none !important;
    }
}

/* Tablet/Mobil (<1200px) - Navbar collapse kullan, sidebar gizli */
@media (max-width: 1199px) {
    /* Sidebar'ı tamamen gizle, sadece navbar collapse kullan */
    aside, .sidebar-overlay, .sidebar {
        display: none !important;
    }
    
    /* Navbar yapısı */
    .navbar {
        display: flex;
        align-items: center;
        position: relative;
    }

    .navbar .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
    }
    
    /* Navbar CTA butonunu mobilde gizle (yer kazanmak için) */
    .navbar-cta-container {
        display: none !important;
    }
    
    /* Menü butonu görünür */
    .nav-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        margin-left: auto;
    }

    .nav-btn i {
        font-size: 1.25rem;
    }
    
    /* Logo boyutu mobilde ayarla */
    .logo-container.header-logo {
        max-width: 180px !important;
        flex-shrink: 0;
    }

    .logo-container.header-logo img {
        max-width: 100%;
        height: auto;
    }
}

/* Küçük ekranlar için ek ayarlar */
@media (max-width: 576px) {
    .navbar .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .logo-container.header-logo {
        max-width: 140px !important;
    }

    .nav-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 0.4rem;
    }

    .nav-btn i {
        font-size: 1.1rem;
    }
}

/* ===============================================
   i18n TEXT FLEXIBILITY - TR/EN Uyumluluğu
   =============================================== */

/* Global text wrapping and overflow fixes */
body * {
    overflow-wrap: break-word;
    word-break: normal;
}

/* Global responsive typography */
h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.25;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 2rem);
    line-height: 1.3;
}

h4 {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    line-height: 1.35;
}

h5 {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.4;
}

h6 {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.4;
}

p {
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
    line-height: 1.65;
}

/* Prevent layout breaks in flex/grid */
.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width: 0;
}

/* Ensure all flex items can shrink */
.d-flex > *,
.d-grid > * {
    min-width: 0;
    min-height: 0;
}

/* Navbar Links - Allow wrapping for longer EN text */
.navbar-nav .nav-link {
    white-space: normal !important;
    text-align: center;
    word-break: keep-all;
    hyphens: auto;
}

@media (min-width: 1200px) {
    .navbar-nav .nav-link {
        white-space: nowrap !important;
    }
}

/* CTA Buttons - Flexible sizing */
.btn-accent,
.btn-accent-outline,
.hero-btn-primary,
.hero-btn-secondary {
    white-space: normal !important;
    text-align: center;
    min-height: fit-content;
    height: auto;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hero Section - Flexible heights */
.banner-home {
    min-height: auto !important;
    height: auto;
    padding-bottom: 4rem !important;
}

@media (min-width: 992px) {
    .banner-home {
        min-height: 90vh !important;
    }
}

/* Hero Headline - Responsive and flexible */
.hero-headline {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
    width: 100%;
}

.hero-headline .h1-wrapper{
  white-space: nowrap;
  display: inline-block;
}


/* Hero Description - Better line height */
.hero-description {
    line-height: 1.65;
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-spacing: normal;
    text-align: left;
    hyphens: none;
}

/* Service Cards - Flexible heights */
#service .card-service {
    min-height: auto !important;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1.5rem !important;
}

#service .card-service h4 {
    font-size: clamp(1.1rem, 2.5vw, 1.375rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
    overflow-wrap: break-word;
    hyphens: auto;
}

#service .card-service p {
    font-size: clamp(0.85rem, 1.8vw, 0.9375rem) !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
    overflow-wrap: break-word;
    flex-grow: 1;
}

#service .service-media {
    flex-shrink: 0;
}

#service .service-cta {
    margin-top: auto !important;
    flex-shrink: 0;
}

/* Service Section Titles */
#service h3 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    overflow-wrap: break-word;
    text-wrap: balance;
}

#service .d-flex.flex-column.align-items-center p {
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
    line-height: 1.6;
}

/* About Section - Flexible text */
.about-detail h3 {
    font-size:24px;
    line-height: 1.25;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.about-detail p {
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: break-word;
}

/* Contact CTA Section */
.contactus-content {
    max-width: 100%;
    padding: 0 1rem;
}

.contactus-banner h3 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.3;
    overflow-wrap: break-word;
    text-wrap: balance;
    margin-bottom: 1.25rem;
}

.contactus-banner p {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
    line-height: 1.65;
    overflow-wrap: break-word;
    margin-bottom: 1.5rem;
}

/* Contact Form Labels */
#contact h3,
.contact-form h3 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: 1.3;
    overflow-wrap: break-word;
}

/* Footer - Flexible text */
footer h5 {
    font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: normal;
    margin-bottom: 1rem;
}

footer p,
footer li,
footer a {
    font-size: clamp(0.8125rem, 1.6vw, 0.9375rem);
    line-height: 1.65;
    overflow-wrap: break-word;
    word-break: normal;
}

footer .footer-list li {
    margin-bottom: 0.5rem;
}

footer .d-flex.flex-column.gspace-1 p {
    word-break: break-word;
}

/* Banner Sub-heading - Flexible */
.banner-sub-heading h6 {
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    white-space: normal;
    overflow-wrap: break-word;
}

.banner-sub-heading {
    padding: 8px 20px;
    width: auto;
    max-width: 100%;
}

/* Language Button - No overflow */
.lang-switch-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Portfolio Cards - Flexible */
.portfolio-content h5 {
    font-size: clamp(1.1rem, 2.5vw, 1.375rem);
    line-height: 1.3;
    overflow-wrap: break-word;
}

.portfolio-description p {
    font-size: clamp(0.875rem, 1.8vw, 1rem);
    line-height: 1.6;
    overflow-wrap: break-word;
}

/* Services Page - Detail sections */
.service-detail-section h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.25;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.service-detail-section h5 {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.3;
    overflow-wrap: break-word;
}

.service-detail-section p,
.service-detail-section li {
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
    line-height: 1.65;
    overflow-wrap: break-word;
}

/* Process Steps */
.d-flex.flex-column.gspace-2.align-items-center h5 {
    font-size: clamp(1.1rem, 2.5vw, 1.375rem);
    line-height: 1.3;
    overflow-wrap: break-word;
    text-align: center;
    hyphens: auto;
}

/* FAQ Section */
.row.g-4 h5 {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.35;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Blog Page */
#blog h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.25;
    overflow-wrap: break-word;
    text-wrap: balance;
}

#blog p {
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
    line-height: 1.65;
    overflow-wrap: break-word;
}

/* About Page - Additional fixes */
#about h2,
#about h3 {
    font-size: 24px;
    line-height: 1.25;
    overflow-wrap: break-word;
    text-wrap: balance;
}

#about p {
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: break-word;
}

/* Portfolio Page */
#portfolio h3 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.25;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* Flex containers - prevent shrinking issues */
.d-flex.flex-column > * {
    min-width: 0;
    flex-shrink: 1;
}

.d-flex.flex-row > * {
    min-width: 0;
    flex-shrink: 1;
}

/* Grid items - prevent overflow */
.row > .col,
.row > [class*="col-"] {
    min-width: 0;
}

/* Ensure buttons don't break layout */
.btn {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    padding: 0.625rem 1.5rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Desktop buttons can be nowrap */
@media (min-width: 1024px) {
    .btn {
        white-space: nowrap;
    }
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .hero-headline {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
    }
    
    #service .card-service {
        min-height: auto !important;
        padding: 1.5rem 1.25rem !important;
    }
    
    #service .card-service h4 {
        font-size: 1.15rem !important;
    }
    
    #service .card-service p {
        font-size: 0.875rem !important;
    }
    
    /* Mobile buttons */
    .btn {
        font-size: clamp(0.875rem, 2vw, 1rem);
        padding: 0.625rem 1.25rem;
    }
    
    /* Mobile navbar collapse max height */
    .navbar-collapse {
        max-height: 80vh !important;
    }
}

@media (max-width: 479px) {
    .hero-headline {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }
    
    #service .card-service {
        padding: 1.25rem 1rem !important;
    }
    
    /* Extra small mobile buttons */
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        min-height: 40px;
    }
    
    /* Extra small mobile - reduce all text slightly */
    p {
        font-size: 0.875rem;
        line-height: 1.6;
    }
    
    h3 {
        font-size: 1.35rem;
    }
    
    h4 {
        font-size: 1.125rem;
    }
    
    h5 {
        font-size: 1rem;
    }
}

/* ===============================================
   MODERN CONTACT SECTION - Premium Dark + Orange
   =============================================== */

/* Contact Section - General */
#contact {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 10, 1) 100%);
    position: relative;
}

/* Contact Info Wrapper - Left Column */
.contact-info-wrapper {
    padding-right: 2rem;
}

.contact-info-wrapper h3 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-info-wrapper p {
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.5rem;
}

/* Trust Badges - Premium Microcopy */
.contact-trust-badge {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.5rem;
    background: rgba(57, 181, 74, 0.03);
    border-left: 3px solid #39b54a;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.contact-trust-badge .trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.contact-trust-badge .trust-item i {
    color: #39b54a;
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Contact Details - Icons & Info */
.contact-details {
    margin-top: 1.5rem;
}

.contact-details .d-flex.flex-row {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contact-details .d-flex.flex-row:hover {
    background: rgba(57, 181, 74, 0.05);
    transform: translateX(5px);
}

.contact-details i {
    font-size: 1.25rem !important;
    min-width: 28px;
    margin-right: 1rem !important;
}

.contact-details strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.contact-details p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
}

/* Contact Form Card - Modern Premium */
.contact-form-card {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.contact-form {
    width: 100%;
    background: linear-gradient(145deg, rgba(17, 17, 17, 0.95) 0%, rgba(21, 21, 21, 0.98) 100%);
    border: 1px solid rgba(57, 181, 74, 0.25);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(57, 181, 74, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #39b54a 50%, transparent 100%);
    opacity: 0.6;
}

.contact-form:hover {
    border-color: rgba(57, 181, 74, 0.4);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(57, 181, 74, 0.12);
    transform: translateY(-2px);
}

/* Form Header */
.form-header {
    margin-bottom: 2rem;
    text-align: left;
}

.form-header h3 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #FFFFFF;
    font-weight: 700;
}

.form-subtitle {
    font-size: clamp(0.9375rem, 1.6vw, 1rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* Form Fields Container */
.form-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Form Rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-group-full {
    width: 100%;
}

/* Modern Input & Textarea Styling */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.875rem 1.125rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #FFFFFF;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

/* Focus State - Orange Glow */
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.6);
    border-color: #39b54a;
    box-shadow: 
        0 0 0 3px rgba(57, 181, 74, 0.15),
        0 4px 20px rgba(57, 181, 74, 0.2);
    transform: translateY(-1px);
}

/* Hover State */
.contact-form input:hover:not(:focus),
.contact-form textarea:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Textarea Specific */
.contact-form textarea {
    min-height: 140px;
    resize: vertical;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Valid/Invalid States (optional) */
.contact-form input:valid:not(:placeholder-shown),
.contact-form textarea:valid:not(:placeholder-shown) {
    border-color: rgba(34, 197, 94, 0.4);
}

.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
    border-color: rgba(239, 68, 68, 0.4);
}

/* Submit Button - Full Width Premium */
.form-submit {
    margin-top: 0.5rem;
}

.contact-form .btn-submit-form {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 12px;
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%);
    border: none;
    color: #FFFFFF;
    box-shadow: 
        0 10px 30px rgba(57, 181, 74, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.contact-form .btn-submit-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.contact-form .btn-submit-form:hover::before {
    left: 100%;
}

.contact-form .btn-submit-form:hover {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%);
    box-shadow: 
        0 15px 40px rgba(57, 181, 74, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.contact-form .btn-submit-form:active {
    transform: translateY(0);
    box-shadow: 
        0 5px 20px rgba(57, 181, 74, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Response Message - Success/Error States */
.response-message {
    padding: 0;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-align: center;
    font-weight: 500;
}

.response-message:not(:empty) {
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

.response-message.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22C55E;
}

.response-message.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

/* Form Footer Note */
.form-footer-note {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.form-footer-note::before {
    content: '\f05a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: rgba(57, 181, 74, 0.6);
}

/* ===============================================
   CONTACT SECTION - Responsive
   =============================================== */

/* Tablet */
@media (max-width: 1199px) {
    .contact-info-wrapper {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    
    .contact-trust-badge {
        margin-bottom: 1.5rem;
    }
    
    .contact-form {
        padding: 2rem 1.75rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .contact-info-wrapper {
        padding-right: 0;
        margin-bottom: 2.5rem;
    }
    
    .contact-trust-badge {
        padding: 1.25rem;
        gap: 0.75rem;
    }
    
    .contact-trust-badge .trust-item {
        font-size: 0.875rem;
    }
    
    .contact-details .d-flex.flex-row {
        padding: 0.875rem;
    }
    
    .contact-form {
        padding: 1.75rem 1.25rem;
        border-radius: 16px;
    }
    
    .form-header {
        margin-bottom: 1.5rem;
    }
    
    .form-fields {
        gap: 1rem;
    }
    
    .form-row {
        gap: 1rem;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
        border-radius: 10px;
    }
    
    .contact-form textarea {
        min-height: 120px;
    }
    
    .contact-form .btn-submit-form {
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
        border-radius: 10px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .contact-form {
        padding: 1.5rem 1rem;
    }
    
    .form-header h3 {
        font-size: 1.5rem;
    }
    
    .form-subtitle {
        font-size: 0.875rem;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
    
    .contact-form .btn-submit-form {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .form-footer-note {
        font-size: 0.75rem;
    }
}

/* ===============================================
   MODERN FOOTER - Premium Agency Style
   =============================================== */

/* Footer General - Dark Background */
.footer-modern {
    background: linear-gradient(180deg, rgba(5, 5, 5, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
}

.footer-banner {
    position: relative;
    padding: 4rem 0 2rem;
}

/* Footer Header - Logo + Description + Social */
.footer-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    position: relative;
}

.footer-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(57, 181, 74, 0.3) 50%, transparent 100%);
}

/* Footer Logo */
.logo-container.footer {
    max-width: 180px !important;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.logo-container.footer:hover {
    transform: scale(1.05);
}

.logo-container.footer img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(57, 181, 74, 0.15));
}

/* Footer Description */
.footer-header p {
    max-width: 500px;
    font-size: clamp(0.9375rem, 1.6vw, 1rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    overflow-wrap: break-word;
}

/* Social Icons - Modern Premium */
.social-container {
    display: flex;
    gap: 0.875rem;
    justify-content: center;
    align-items: center;
}

.social-item {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(57, 181, 74, 0.08) !important;
    border: 1.5px solid rgba(57, 181, 74, 0.3) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.social-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(57, 181, 74, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-item:hover {
    background: rgba(57, 181, 74, 0.15) !important;
    border-color: #39b54a !important;
    box-shadow: 
        0 0 20px rgba(57, 181, 74, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px) scale(1.08);
}

.social-item:hover::before {
    opacity: 1;
}

.social-item i {
    color: #FFFFFF !important;
    font-size: 1.125rem;
    z-index: 1;
    transition: all 0.3s ease;
}

.social-item:hover i {
    color: #39b54a !important;
    transform: scale(1.1);
}

/* Footer Links Section */
.footer-link {
    position: relative;
}

/* Hide old underline dividers */
.footer-link .underline-footer {
    display: none !important;
}

.footer-link .footer-list-underline {
    display: none !important;
}

/* Grid - 4 Columns */
.footer-link .row {
    margin-top: 0;
}

.footer-link .col > div {
    padding: 1.5rem 1rem;
    height: 100%;
}

/* Footer Column Headings - Modern & Bold */
.footer-link h5 {
    font-size: clamp(1rem, 2vw, 1.125rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
    color: #39b54a !important;
    margin-bottom: 1.5rem !important;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-link h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #39b54a 0%, #39b54a 100%);
    border-radius: 2px;
}

@media (max-width: 1199px) {
    .footer-link h5::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Footer Lists - Better Spacing & Hover */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-list li {
    margin: 0;
    padding: 0;
}

.footer-list a {
    display: inline-flex;
    align-items: center;
    font-size: clamp(0.875rem, 1.6vw, 0.9375rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75) !important;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.footer-list a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 0.5rem;
    color: #39b54a;
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.footer-list a:hover {
    color: #39b54a !important;
    transform: translateX(8px);
}

.footer-list a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* Contact Info Items - Better Icon Alignment */
.footer-link .d-flex.flex-row {
    gap: 1rem !important;
    padding: 0.75rem 0;
}

.footer-link .d-flex.flex-row i {
    min-width: 24px !important;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem !important;
    margin-right: 0 !important;
}

.footer-link .d-flex.flex-row .d-flex.flex-column {
    flex: 1;
    min-width: 0;
}

.footer-link .d-flex.flex-row p {
    font-size: clamp(0.8125rem, 1.5vw, 0.875rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7) !important;
    overflow-wrap: break-word;
    word-break: normal;
}

.footer-link .d-flex.flex-row strong {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: clamp(0.875rem, 1.6vw, 0.9375rem);
}

/* Newsletter Section - Modern Input Group */
.newsletter-group {
    width: 100%;
}

.newsletter-group p {
    font-size: clamp(0.875rem, 1.5vw, 0.9375rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 1.25rem;
    overflow-wrap: break-word;
}

#newsletterForm {
    width: 100%;
    margin-bottom: 0.875rem;
}

.newsletter-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.newsletter-input-wrapper input {
    width: 100%;
    padding: 0.875rem 1.125rem;
    background: rgba(17, 17, 17, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: all 0.3s ease;
    font-family: inherit;
}

.newsletter-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.newsletter-input-wrapper input:focus {
    outline: none;
    background: rgba(21, 21, 21, 0.9);
    border-color: #39b54a;
    box-shadow: 
        0 0 0 3px rgba(57, 181, 74, 0.15),
        0 4px 15px rgba(57, 181, 74, 0.2);
}

.newsletter-input-wrapper input:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.2);
}

.newsletter-btn {
    width: 100%;
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 25px rgba(57, 181, 74, 0.3) !important;
    transition: all 0.3s ease;
}

.newsletter-btn:hover {
    background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
    box-shadow: 0 12px 35px rgba(57, 181, 74, 0.4) !important;
    transform: translateY(-2px);
}

/* Newsletter Messages - Clean Icons */
.newsletter-message {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 0.75rem;
}

.newsletter-message:not(.d-none) {
    display: flex;
}

.newsletter-message i {
    font-size: 1rem;
    flex-shrink: 0;
}

.newsletter-message.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22C55E !important;
}

.newsletter-message.success i {
    color: #22C55E !important;
}

.newsletter-message.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444 !important;
}

.newsletter-message.error i {
    color: #EF4444 !important;
}

.newsletter-message span {
    color: inherit !important;
}

/* Copyright Bar - Clean Divider */
.copyright-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2.5rem;
    margin-top: 3rem;
    position: relative;
}

.copyright-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.copyright-container p {
    font-size: clamp(0.8125rem, 1.5vw, 0.875rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0;
}

.copyright-container .d-flex {
    gap: 1.5rem !important;
}

.legal-link {
    font-size: clamp(0.8125rem, 1.5vw, 0.875rem);
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease;
    position: relative;
    overflow-wrap: break-word;
}

.legal-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #39b54a;
    transition: width 0.3s ease;
}

.legal-link:hover {
    color: #39b54a !important;
}

.legal-link:hover::after {
    width: 100%;
}

/* ===============================================
   FOOTER - Responsive Design
   =============================================== */

/* Large Desktop */
@media (min-width: 1400px) {
    .footer-banner {
        padding: 5rem 0 2.5rem;
    }
    
    .footer-header {
        padding-bottom: 3.5rem;
        margin-bottom: 3.5rem;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .footer-link h5 {
        text-align: left;
    }
    
    .footer-list {
        align-items: flex-start;
    }
    
    .newsletter-input-wrapper {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .newsletter-input-wrapper input {
        flex: 1;
    }
    
    .newsletter-btn {
        width: auto !important;
        padding: 0.875rem 1.75rem !important;
        white-space: nowrap;
    }
}

/* Tablet */
@media (max-width: 1199px) {
    .footer-banner {
        padding: 3rem 0 1.5rem;
    }
    
    .footer-header {
        padding-bottom: 2.5rem;
        margin-bottom: 2.5rem;
    }
    
    .footer-link .col > div {
        padding: 1.25rem 0.75rem;
    }
    
    .footer-link h5 {
        text-align: center;
        margin-bottom: 1.25rem !important;
    }
    
    .footer-list {
        align-items: center;
    }
    
    .footer-list a::before {
        display: none;
    }
    
    .footer-list a:hover {
        transform: translateX(0);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .footer-banner {
        padding: 2.5rem 0 1.25rem;
    }
    
    .footer-header {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
    
    .logo-container.footer {
        max-width: 150px !important;
    }
    
    .footer-header p {
        font-size: 0.9375rem;
    }
    
    .social-container {
        gap: 0.75rem;
    }
    
    .social-item {
        width: 40px;
        height: 40px;
    }
    
    .social-item i {
        font-size: 1rem;
    }
    
    .footer-link .col > div {
        padding: 1rem 0.5rem;
    }
    
    .footer-link h5 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-list {
        gap: 0.625rem;
    }
    
    .footer-list a {
        font-size: 0.875rem;
    }
    
    .newsletter-input-wrapper input {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .newsletter-btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
    
    .copyright-container {
        flex-direction: column;
        text-align: center;
        padding-top: 2rem;
        margin-top: 2rem;
    }
    
    .copyright-container .d-flex {
        flex-direction: column;
        gap: 0.75rem !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .footer-banner {
        padding: 2rem 0 1rem;
    }
    
    .footer-header {
        gap: 1.25rem;
        padding-bottom: 1.75rem;
        margin-bottom: 1.75rem;
    }
    
    .logo-container.footer {
        max-width: 130px !important;
    }
    
    .footer-header p {
        font-size: 0.875rem;
    }
    
    .social-container {
        gap: 0.625rem;
    }
    
    .social-item {
        width: 38px;
        height: 38px;
    }
    
    .footer-link .col > div {
        padding: 0.875rem 0.375rem;
    }
    
    .footer-link h5 {
        font-size: 0.9375rem !important;
        margin-bottom: 0.875rem !important;
    }
    
    .footer-list {
        gap: 0.5rem;
    }
    
    .footer-list a {
        font-size: 0.8125rem;
    }
    
    .footer-link .d-flex.flex-row p {
        font-size: 0.8125rem;
    }
    
    .newsletter-input-wrapper input {
        padding: 0.75rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    .newsletter-btn {
        padding: 0.75rem 1.125rem !important;
        font-size: 0.8125rem !important;
    }
    
    .newsletter-message {
        font-size: 0.8125rem;
        padding: 0.625rem 0.875rem;
    }
    
    .copyright-container {
        padding-top: 1.75rem;
        margin-top: 1.75rem;
    }
    
    .copyright-container p,
    .legal-link {
        font-size: 0.75rem;
    }
}
/* ===== teklif-al.html Brief Form (minimum fix) ===== */

.brief-form-card{
  max-width: 980px;
  margin: 28px auto 0;
}

.brief-card{
  background: rgba(17,17,17,.65);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
}

.brief-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.brief-field label,
.brief-legend{
  display:block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: 15px;
}

.brief-field input,
.brief-field textarea{
  width: 100%;
  padding: 14px 14px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: #fff;
  transition: .25s ease;
  font-family: inherit;
}

.brief-field input:focus,
.brief-field textarea:focus{
  outline: none;
  border-color: #39b54a;
  box-shadow: 0 0 0 3px rgba(57, 181, 74, .15), 0 10px 30px rgba(57, 181, 74, .12);
}

.brief-options{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 10px;
}

.opt, .chk, .kvkk{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  cursor: pointer;
  user-select:none;
}

.opt input, .chk input, .kvkk input{
  accent-color: #39b54a;
}

.brief-checkgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.brief-meta{
  display:flex;
  justify-content: space-between;
  margin-top: 6px;
  color: rgba(255,255,255,.60);
  font-size: 13px;
}

.brief-actions{
  max-width: 980px;
  margin: 18px auto 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 992px){
  .brief-grid{ grid-template-columns: 1fr; }
  .brief-checkgrid{ grid-template-columns: 1fr; }
}
/* ===== Teklif Al Formu - Renk Uyum Fix ===== */

/* Submit Button */
.btn-submit-form {
  background: #39b54a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}

.btn-submit-form:hover {
  background: #39b54a !important;
  box-shadow: 0 10px 30px rgba(57, 181, 74, 0.35);
  transform: translateY(-1px);
}
/* ===== Teklif Formu – Kart Başlık Renkleri ===== */

.brief-card-header h3 {
  color: #ffffff !important;
  font-weight: 600;
}

.brief-card-sub {
  color: rgba(255, 255, 255, 0.65) !important;
}
/* ===== Teklif Formu – Radio / Checkbox Accent ===== */

.opt input:checked,
.chk input:checked,
.kvkk input:checked {
  accent-color: #39b54a;
}
/* Kart başlıklarına turuncu accent */
.brief-card {
  position: relative;
}

.brief-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  background: #39b54a;
  border-radius: 3px;
  opacity: 0.85;
}
.brief-card-header h3::before {
  content: "■";
  color: #39b54a;
  margin-right: 8px;
  font-size: 0.8em;
}
.brief-card-header h3 {
  position: relative;
  padding-bottom: 8px;
}

.brief-card-header h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: #39b54a;
  border-radius: 2px;
}
.brief-field input:focus,
.brief-field textarea:focus {
  border-color: #39b54a;
  box-shadow: 0 0 0 1px rgba(57, 181, 74, 0.6);
}
.opt:has(input:checked),
.chk:has(input:checked) {
  border-left: 3px solid #39b54a;
}
.brief-actions::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #39b54a;
  margin: 0 auto 12px auto;
  border-radius: 2px;
}

/* Mobil/Tablet: servis kartlarını sabit yükseklikten kurtar */
@media (max-width: 767px) {
  #service .card-service-wrapper{
    height: auto !important;
    min-height: 0 !important;
  }
}
/* Mobil + Tablet: servis kartları sabit height almasın */
@media (max-width: 1024px) {
  #service .card-service-wrapper{
    height: auto !important;
    min-height: 0 !important;
  }
}

/* İsteğe bağlı: tablet/mobilde taşma-yarım görüntüyü engelle */
@media (max-width: 1024px) {
  #service .card-service-wrapper{
    overflow: hidden !important;
  }
}

/* Desktop'ta (1024px+) bazı kartlarda ok kayboluyor: force-visible fix */
@media (min-width: 1024px) {
  #service .card-service {
    position: relative; /* CTA'yı güvenli sabitlemek için */
    padding-bottom: 3.25rem !important; /* altta CTA için yer aç */
  }

  /* CTA'yı kartın sağ-altına sabitle */
  #service .card-service .service-cta {
    position: absolute !important;
    right: 1.75rem;
    bottom: 1.5rem;
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 5; /* olası overlay/gradient üstüne çıksın */
  }

  /* İkon kesin görünsün */
  #service .card-service .service-cta i {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }
}
/* Hizmetler sayfası: servis görsellerini desktop'ta küçült */
.service-detail-section .image-container{
  /* Görselin col içinde devasa büyümesini engelle */
  max-width: 560px;     /* istersen 480-620 arası oynarsın */
  margin: 0 auto;       /* col içinde ortala */
}

.service-detail-section .image-container img{
  width: 100%;
  height: auto;
  max-height: 420px;    /* görselin dikeyde çok uzamasını engelle */
  object-fit: cover;    /* kırpma doğal dursun */
  display: block;
  border-radius: 12px;  /* inline zaten var ama tutarlı kalsın */
}

/* Büyük ekranlarda biraz daha sıkı */
@media (min-width: 1400px){
  .service-detail-section .image-container{
    max-width: 520px;
  }
  .service-detail-section .image-container img{
    max-height: 380px;
  }
}

/* Tablet/Mobil: çok kısmadan doğal aksın */
@media (max-width: 991.98px){
  .service-detail-section .image-container{
    max-width: 100%;
  }
  .service-detail-section .image-container img{
    max-height: 520px; /* mobilde aşırı kırpmasın */
  }
}

/* ================================
   HOW WE WORK / SÜREÇ SECTION FIX
   ================================ */

/* Genel bölüm nefes alanı */
.section .hero-container .d-flex.flex-column.gspace-4 {
  gap: 3rem; /* önce 1.5-2rem civarıydı */
}

/* Süreç üst başlık alanı */
.section h6[data-i18n="services.processTitle"] {
  margin-bottom: 0.75rem;
  letter-spacing: 1.5px;
}

.section h3[data-i18n="services.processHeading"] {
  margin-bottom: 0.75rem;
}

.section p[data-i18n="services.processDesc"] {
  margin-top: 0;
  max-width: 520px;
  line-height: 1.6;
}

/* Adım kartları */
.section .row.row-cols-lg-4 > .col > div {
  gap: 1.25rem;              /* içeride dikey boşluk */
  padding: 0 0.5rem;
}

/* Numara dairesi */
.section .row.row-cols-lg-4 > .col > div > div:first-child {
  margin-bottom: 0.5rem;
}

/* Adım başlığı */
.section .row.row-cols-lg-4 h5 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Adım açıklaması */
.section .row.row-cols-lg-4 p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 240px;
}

/* Tablet */
@media (max-width: 991px) {
  .section .hero-container .d-flex.flex-column.gspace-4 {
    gap: 2.5rem;
  }

  .section .row.row-cols-md-2 > .col > div {
    gap: 1.15rem;
  }
}

/* Mobil */
@media (max-width: 575px) {
  .section .hero-container .d-flex.flex-column.gspace-4 {
    gap: 2rem;
  }

  .section .row.row-cols-1 > .col > div {
    gap: 1rem;
  }

  .section .row.row-cols-1 p {
    max-width: 100%;
  }
}

/* FAQ – numaralı rozet + boşluk düzeni */
.faq-section .faq-q{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  line-height: 1.25;
}

.faq-section .faq-a{
  margin-top: 0;
  margin-bottom: 26px;
  line-height: 1.65;
  opacity: 0.92;
  padding-left: 46px; /* rozet hizası */
  max-width: 560px;
}

.faq-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #39b54a 0%, #7a3cff 100%);
  box-shadow: 0 0 0 1px rgba(57, 181, 74, 0.22);
  flex-shrink: 0;
}

/* Mobilde padding-left olmasın */
@media (max-width: 575px){
  .faq-section .faq-a{
    padding-left: 0;
  }
}

/* ABOUT – tek kolon + kart */
.about-stack { max-width: 980px; margin: 0 auto; }
.about-card{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(57, 181, 74, 0.18);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
.about-card:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 220px at 20% 0%, rgba(57, 181, 74, 0.22), transparent 60%),
              radial-gradient(520px 220px at 85% 20%, rgba(122,60,255,0.18), transparent 60%);
  pointer-events:none;
}
.about-card > *{ position: relative; }

.about-bullets{
  margin: 14px 0 0;
  padding-left: 18px;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
}
.about-bullets li::marker{ color: #39b54a; }

.about-mini-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.about-mini-grid .mini{
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(122,60,255,0.18);
  border-radius: 14px;
  padding: 12px 14px;
}
.mini-title{ display:block; font-size: 12px; opacity: 0.75; }
.mini-value{ display:block; font-weight: 700; margin-top: 2px; }

@media (max-width: 767px){
  .about-mini-grid{ grid-template-columns: 1fr; }
}

/* LEGAL HUB – KVKK alanını site diliyle uyumlu yap */
.legal-hub{
  padding: 3.5rem 0;
  background: rgba(255,255,255,0.015);
}
.legal-wrap{ max-width: 980px; margin: 0 auto; text-align:center; }
.legal-desc{ color: rgba(255,255,255,0.82); line-height: 1.8; max-width: 820px; margin: 0.75rem auto 0; }

.legal-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
}
.legal-card{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(57, 181, 74, 0.18);
  text-decoration:none;
}
.legal-card .tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(57, 181, 74, 0.22), rgba(122,60,255,0.16));
  border: 1px solid rgba(57, 181, 74, 0.2);
}
.legal-card .name{ font-weight: 700; color: #fff; }
.legal-card .go{ color:#39b54a; font-weight:800; }
.legal-card:hover{ transform: translateY(-2px); transition: .2s ease; }

@media (max-width: 991px){
  .legal-cards{ grid-template-columns: 1fr; }
}


/* Fixed header sayfalarda içerik header'ın altına kaçmasın */
body.page-with-fixed-header main{
  padding-top: 110px; /* header yüksekliğine göre 90-130 arası ayarlanabilir */
}

@media (max-width: 991px){
  body.page-with-fixed-header main{
    padding-top: 90px;
  }
}

/* FIX: Service cards - desktop taşma / arka siyah bleed */
@media (min-width: 1024px) {
  /* Grid item'lar aynı hizada ve aynı yükseklikte davransın */
  #service .service-content-wrapper {
    align-items: stretch;
  }

  /* Wrapper rounded + clip */
  #service .card-service-wrapper {
    border-radius: 15px;
    overflow: hidden; /* önemli: visible -> hidden */
    height: 100%;
  }

  /* İç kart da wrapper ile uyumlu rounded olsun */
  #service .card-service {
    border-radius: 13px;
    height: 100%;
  }
}

/* Blog Index - Card Grid (Grapholio layout, CreaDays theme) */
#blog-index-grid .blog-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#blog-index-grid .blog-card__media{
  display: block;
  position: relative;
  overflow: hidden;
}

#blog-index-grid .blog-card__media img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

#blog-index-grid .blog-card__body{
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#blog-index-grid .blog-card__meta{
  font-size: 13px;
}

#blog-index-grid .blog-card__title{
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

#blog-index-grid .blog-card__title a{
  text-decoration: none;
  color: inherit;
}

#blog-index-grid .blog-card__excerpt{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

#blog-index-grid .blog-card__link{
  margin-top: auto;
  text-decoration: none;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .9;
}

#blog-index-grid .blog-card__link:hover{
  opacity: 1;
}


/* Blog Index - Readability fixes */
.blog-breadcrumb{
  display:flex;
  gap:10px;
  align-items:center;
  opacity:.85;
  font-size:14px;
}
.blog-breadcrumb a{
  color: rgba(255,255,255,.75);
  text-decoration:none;
}
.blog-breadcrumb span{
  color: rgba(255,255,255,.65);
}

.blog-hero-lead{
  max-width: 820px;
  color: rgba(255,255,255,.72); /* text-muted yerine okunur */
  line-height: 1.6;
  margin: 0;
}

/* Blog cards */
#blog-index-grid .blog-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
#blog-index-grid .blog-card__media img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
#blog-index-grid .blog-card__body{
  padding: 16px 16px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#blog-index-grid .blog-card__meta{
  font-size:13px;
  color: rgba(255,255,255,.70);
}
#blog-index-grid .blog-card__title{
  margin:0;
  font-size:18px;
  line-height:1.25;
}
#blog-index-grid .blog-card__title a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
#blog-index-grid .blog-card__excerpt{
  margin:0;
  color: rgba(255,255,255,.68);
  font-size:14px;
  line-height:1.6;
}
#blog-index-grid .blog-card__link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.85);
  text-decoration:none;
  font-weight:600;
  opacity:.9;
}
#blog-index-grid .blog-card__link:hover{ opacity:1; }

/* BLOG HERO - fixed header offset */
#blog-index-hero{
  padding-top: 110px; /* gerekirse 90-130 arası ayarla */
}
@media (max-width: 768px){
  #blog-index-hero{ padding-top: 90px; }
}

/* Blog hero spacing polish */
#blog-index-hero .hero-container{
  padding-bottom: 10px;
}

#blog-index-grid{
  padding-top: 30px;
}


#blog-index-hero h6 {
  display: none;
}

#blog-index-grid .btn-accent-outline {
  background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%);
  border: none;
  color: #fff !important;
  padding: 14px 36px;
  border-radius: 50px;
  box-shadow: 0 8px 30px rgba(57, 181, 74, 0.25);
}

#blog-index-grid .btn-accent-outline:hover {
  background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%);
  transform: translateY(-2px);
}


.blog-card:hover {
  box-shadow: 0 10px 40px rgba(57, 181, 74, 0.35);
  transform: translateY(-4px);
}

.blog-card__link {
  color: #39b54a !important;
}

.blog-card__link:hover {
  color: #39b54a !important;
}

#blog-index-grid .d-flex.justify-content-center {
  margin-top: 48px !important;
}


#blog-index-hero {
  padding-bottom: 20px;
}

.blog-hero-lead {
  max-width: 520px;
  opacity: 0.85;
}


/* ================================
   Blog Post Pages - Hero polish
================================ */

#blog-hero {
  padding-top: 120px;   /* fixed header offset */
  padding-bottom: 42px;
}

#blog-hero .hero-container > .d-flex {
  max-width: 980px;
  margin: 0 auto;
}

#blog-hero h1 {
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.05;
}

#blog-hero .text-muted,
#blog-hero .blog-hero-lead {
  max-width: 900px;
  margin: 0 auto;
  opacity: 0.88;
}

#blog-hero .badge {
  padding: 8px 14px;
  font-weight: 500;
}

/* Back button (hero içindeki) */
#blog-hero .btn.btn-accent-outline {
  border-color: rgba(57, 181, 74, 0.45);
  color: #39b54a;
  background: rgba(57, 181, 74, 0.10);
  border-radius: 999px;
  padding: 10px 18px;
}

#blog-hero .btn.btn-accent-outline:hover {
  background: rgba(57, 181, 74, 0.16);
}

/* ================================
   BLOG POST HERO SPACING (ALL POSTS)
================================ */

.blog-post-hero {
  padding-top: 140px; /* header'dan kopar */
  padding-bottom: 60px;
  text-align: center;
}

.blog-post-hero h1 {
  max-width: 980px;
  margin: 0 auto 24px auto;
  line-height: 1.08;
}

.blog-post-hero .hero-description {
  max-width: 820px;
  margin: 0 auto 28px auto;
  opacity: 0.9;
  font-size: 16px;
}

.blog-post-hero .hero-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.blog-post-hero .hero-actions {
  margin-top: 12px;
}

/* ================================
   BLOG BUTTONS - ORANGE ONLY
================================ */

.blog-post-hero .btn,
.blog-article .btn {
  background: #39b54a;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 500;
}

.blog-post-hero .btn:hover,
.blog-article .btn:hover {
  background: #e62d00;
}


/* =========================================================
   BLOG POST PAGES (blog-social-media / blog-seo / blog-webdesign)
   Hero spacing + orange buttons
========================================================= */

/* Hero: fixed header offset + spacing */
#blog-hero{
  padding-top: 120px;
  padding-bottom: 34px;
}

@media (max-width: 768px){
  #blog-hero{ padding-top: 95px; }
}

/* Kicker (üstteki küçük BLOG/SEO yazısı) kaldır */
#blog-hero h6.accent-color{
  display: none !important;
}

/* Başlık/lead hizası */
#blog-hero h1{
  max-width: 980px;
  line-height: 1.06;
  margin: 0 auto 12px;
}

#blog-hero .blog-hero-lead{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  opacity: .85;
}

/* Badge bloğu düzgün dursun */
#blog-hero .blog-hero-meta{
  margin-top: 14px;
  gap: 10px !important;
}

/* Inline rgba(…,10) gibi hatalı değerleri CSS ile ez */
#blog-hero .blog-hero-meta .badge{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
#blog-hero .blog-hero-meta .badge:nth-child(1){
  background: rgba(57, 181, 74, .10) !important;
  border: 1px solid rgba(57, 181, 74, .25) !important;
}

/* Hero buton alanı */
#blog-hero .blog-hero-actions{
  margin-top: 16px;
}

/* BLOG yazı sayfalarında BUTONLARI turuncuya zorla */
#blog-hero .btn-accent,
#blog-content .btn-accent{
  background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(57, 181, 74, 0.22);
}

#blog-hero .btn-accent-outline,
#blog-content .btn-accent-outline{
  background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(57, 181, 74, 0.22);
}

#blog-hero .btn-accent:hover,
#blog-content .btn-accent:hover,
#blog-hero .btn-accent-outline:hover,
#blog-content .btn-accent-outline:hover{
  background: linear-gradient(135deg, #39b54a 0%, #39b54a 100%) !important;
  transform: translateY(-2px);
}

/* BLOG - Devamını Oku hizalama fix */
.blog-card,
.blog-item,
.blog-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card .blog-content,
.blog-item .blog-content,
.blog-box .blog-content,
.blog-card .card-body,
.blog-item .card-body,
.blog-box .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* "Devamını Oku" her kartta en alta insin */
.blog-card a,
.blog-item a,
.blog-box a {
  /* sadece read more linkine sınıfın varsa daha iyi:
     .read-more / .blog-readmore gibi */
}

.blog-card .read-more,
.blog-item .read-more,
.blog-box .read-more,
.blog-card a.read-more,
.blog-item a.read-more,
.blog-box a.read-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* BLOG kartları: içerik yüksekliği eşitlensin */
.blog-card,
.blog-item,
.blog-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Kartın metin alanı (başlık+açıklama+buton) tüm boşluğu alsın */
.blog-card .card-body,
.blog-item .card-body,
.blog-box .card-body,
.blog-card .blog-content,
.blog-item .blog-content,
.blog-box .blog-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* "Devamını oku" her zaman en alta insin */
.blog-card .read-more,
.blog-item .read-more,
.blog-box .read-more,
.blog-card a.read-more,
.blog-item a.read-more,
.blog-box a.read-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


.banner-home .banner-content{
  margin-top: 3rem;
}

.brand-accent{
  background:#39b54a;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Desktop'ta "MARKANIZ DİJİTALDE" tek satır kalsın */
@media (min-width: 1200px){
  .hero-headline .hero-line2{
    white-space: nowrap;
  }
}

@media (min-width: 1200px) {
  .banner-content {
    max-width: 780px;
  }
}

/* HERO: line1 tek satırda kalsın */
.hero-headline [data-i18n="hero.title.line1"]{
  white-space: nowrap;
}

/* EN: hero line3b alt satıra insin */
html[lang="en"] .hero-line3b{
  display: block;
}


/* ===============================================
   SERVICE CARDS — ICON & TEXT CENTER ALIGN
   =============================================== */

#service .card-service {
  text-align: center;
  align-items: center;   /* flex column olduğu için içeriği ortalar */
}

/* icon container ortala */
#service .card-service > div:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* başlık ortala */
#service .card-service h4 {
  text-align: center;
}

/* açıklama ortala */
#service .card-service p {
  text-align: center;
}

/* CTA ok ikonu da ortada dursun istersen */
#service .service-cta {
  justify-content: center !important;
}

html[lang="tr"] .hero-headline {
  letter-spacing: 0.01em;
}



/* HERO HEADLINE — satır çakışma düzeltme */
.hero-headline {
  line-height: 1.28;
}

#service .service-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0;
}

#service .service-link i {
  font-size: 16px;
}

.kvkk-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
}

.kvkk-label input[type="checkbox"]{
  margin-top:3px;
  flex:0 0 auto;
}


/* KVKK checkbox layout fix */
.kvkk-check { 
  margin-top: 10px;
}

.kvkk-label{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
}

.kvkk-box{
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 3px 0 0 0 !important;
  display: inline-block !important;
}

.kvkk-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.4;
  font-size: 14px;
}

.kvkk-link{
  text-transform: none !important;
}

.copyright-container a{
  font: inherit;
  font-size: inherit;
  text-transform: inherit;
}

/* Teklif Alın linki sadece mobil menüde görünsün */
.navbar-quote-mobile { display: none; }
@media (max-width: 1199.98px){
  .navbar-quote-mobile { display: list-item; }
}

/* Menü içindeki "Teklif Alın" sadece mobilde görünsün */
.navbar-quote-mobile { display: none !important; }

@media (max-width: 1199.98px){
  .navbar-quote-mobile { display: list-item !important; }
}


@media (max-width: 1199.98px){
  .navbar-cta-container { display: none !important; }
}

/* Footer sağ linkleri — copyright ile aynı stil */
.footer-legal a{
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  opacity: .85;
  transition: opacity .2s ease;
}

.footer-legal a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* Menü içindeki Teklif Alın sadece mobilde */
.navbar-quote-mobile { 
  display: none !important; 
}

@media (max-width: 1199.98px){
  .navbar-quote-mobile { 
    display: list-item !important; 
  }
}


/* Desktop'ta hover ile aç (Bootstrap click yerine) */
@media (min-width: 1200px) {
  .nav-services-dropdown .dropdown-menu {
    display: none;
  }

  .nav-services-dropdown.show .dropdown-menu {
    display: block;
  }
}

.btn.btn-accent-outline.hero-btn-secondary {
    box-shadow: 0 0 0 2px #39b54a;
}