/* =========================================
   KOVAN EKİP | KURUMSAL & MİNİMAL AJANS
   ========================================= */

   :root {
    /* LIGHT THEME (Corporate Clean) */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --accent-color: #FFC107;
    --border-color: #E2E8F0;
    --card-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
    
    --font-main: 'Poppins', sans-serif;
    --transition: all 0.3s ease-in-out;
}

[data-theme="dark"] {
    /* DARK THEME (Corporate Premium) */
    --bg-primary: #0B0F19;
    --bg-secondary: #111827;
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --accent-color: #FFD500;
    --border-color: #1E293B;
    --card-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.4s ease, color 0.4s ease;
    overflow-x: hidden;
}

/* Screen Reader / SEO Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-center { text-align: center; }
.text-highlight { color: var(--accent-color); }

/* Typography */
h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.sub-heading {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.section-head {
    margin-bottom: 60px;
}

.section-head h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-head p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 6px; /* Corporate slightly rounded corners */
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--accent-color);
    color: #111827; /* Always dark text on yellow */
}

.btn-primary:hover {
    background-color: transparent;
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--text-primary);
}

.btn-icon {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: var(--transition);
}

.btn-icon:hover {
    background-color: var(--bg-secondary);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(var(--bg-primary-rgb), 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}

/* Add a js class to handle rgba string depending on theme */
[data-theme="light"] .navbar { background-color: rgba(255,255,255,0.9); }
[data-theme="dark"] .navbar { background-color: rgba(11,15,25,0.9); }

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
}

.brand-icon { color: var(--accent-color); }
.brand-dot { color: var(--accent-color); }

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--text-primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: var(--transition);
}

.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-primary);
    cursor: pointer;
}

/* Theme Toggle Icons & Transitions */
.btn-icon#theme-toggle {
    position: relative;
    overflow: hidden;
}
.btn-icon#theme-toggle i {
    position: absolute;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.sun-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
.moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: var(--accent-color);
}
[data-theme="dark"] .moon-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Snappy and smooth logo transition */
.brand, .brand * {
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.brand {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.brand:hover {
    transform: scale(1.03);
}

/* Premium Page-wide Theme Transition */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning .navbar,
html.theme-transitioning footer,
html.theme-transitioning .btn,
html.theme-transitioning .sp-card,
html.theme-transitioning .proc-card__body,
html.theme-transitioning .testi-card,
html.theme-transitioning .perk-item,
html.theme-transitioning .position-card {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =========================================
   SLIDER
   ========================================= */
.slider-wrapper {
    padding: 20px 0 60px;
    margin-top: 110px;
    background: transparent;
}

[data-theme="dark"] .slider-wrapper {
    background: transparent;
}

.slider {
    position: relative;
    width: 100%;
    height: 100%;       /* Banner container controls height */
    border-radius: 0;   /* Banner container controls radius */
    overflow: hidden;
    background: #0B1121;
    box-shadow: none;   /* Banner container controls shadow */
}

.slider__track { position: relative; width: 100%; height: 100%; }

.slider__slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .9s ease;
}
.slider__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* Slide Gradyanları — her slide'a farklı atmosferik gradyan */
.slider__grad-1 {
    background: linear-gradient(
        135deg,
        #0B1A3E 0%,
        #1B2B5A 25%,
        #3A2470 50%,
        #5C2D8C 75%,
        #7B3FA0 100%
    );
}

.slider__grad-2 {
    background: linear-gradient(
        135deg,
        #0A1628 0%,
        #0D2137 25%,
        #0F3443 50%,
        #11998E 75%,
        #38EF7D 100%
    );
}

.slider__grad-3 {
    background: linear-gradient(
        135deg,
        #1A0A2E 0%,
        #2D1B4E 25%,
        #6B2FA0 50%,
        #D63384 75%,
        #FF6B9D 100%
    );
}

.slider__inner {
    position: relative; z-index: 3;
    height: 100%;
    display: flex; align-items: center;
    padding: 0 60px;
}

.slider__left {
    max-width: 600px;
    display: flex; flex-direction: column;
}

/* Pill Wrap */
.slider__pill-wrap {
    display: flex; align-items: center; gap: 15px;
    margin-bottom: 30px;
    position: relative;
    left: -60px; /* Pull to touch the left edge of slider container */
    opacity: 0; transform: translateX(-20px);
    transition: opacity .5s ease .15s, transform .5s ease .15s;
}
.slider__slide.is-active .slider__pill-wrap { opacity: 1; transform: translateX(0); }

.slider__pill-icon {
    background: #fff;
    color: #4A6CFA;
    padding: 12px 25px;
    border-radius: 0 30px 30px 0;
    font-size: 1.2rem;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
}
.slider__pill-text {
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Heading */
.slider__heading {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700; line-height: 1.2;
    color: #fff; margin-bottom: 20px;
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease .3s, transform .6s ease .3s;
}
.slider__slide.is-active .slider__heading { opacity: 1; transform: none; }

/* Text */
.slider__text {
    font-size: 1rem; line-height: 1.6;
    color: rgba(255,255,255,.8);
    font-weight: 400;
    margin-bottom: 35px; max-width: 500px;
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease .5s, transform .6s ease .5s;
}
.slider__slide.is-active .slider__text { opacity: 1; transform: none; }

/* Bottom Area */
.slider__bottom {
    display: flex; align-items: center; gap: 25px; flex-wrap: wrap;
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease .65s, transform .6s ease .65s;
}
.slider__slide.is-active .slider__bottom { opacity: 1; transform: none; }

.slider__socials { display: flex; gap: 12px; }

.slider__social {
    width: 45px; height: 45px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: all .3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.slider__social:hover {
    transform: translateY(-3px);
}
.slider__social.instagram { color: #E1306C; }
.slider__social.tiktok { color: #000; }
.slider__social.youtube { color: #FF0000; }

.slider__sep { color: rgba(255,255,255,.3); font-size: 1.2rem; }

/* Glass Button */
.glass-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 25px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff; font-size: 0.95rem; font-weight: 600;
    transition: all .3s;
}
.glass-btn i { font-size: 0.8rem; }
.glass-btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

.slider__stats-text {
    display: flex; flex-direction: column;
}
.slider__stats-text strong {
    font-size: 1.1rem; font-weight: 700; color: #fff; line-height: 1.2;
}
.slider__stats-text span {
    font-size: .8rem; color: rgba(255,255,255,.6);
}

/* Right-side nav panel */
.slider__rnav.glass-pill {
    position: absolute; right: 40px; bottom: 40px; z-index: 10;
    display: flex; align-items: center; gap: 15px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 8px 12px;
}

.slider__rlabel {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 0 15px;
}
.slider__rlabel-text {
    font-size: .8rem; font-weight: 600; color: #fff;
    white-space: nowrap;
}

/* Arrows */
.slider__arrow {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .3s;
}
.slider__arrow:hover { background: rgba(255,255,255,.25); }

/* Dots */
.slider__dots {
    display: flex; gap: 6px;
}
.slider__dot {
    width: 12px; height: 4px; border-radius: 2px; border: none; padding: 0;
    background: rgba(255,255,255,.3);
    cursor: pointer; transition: all .3s;
}
.slider__dot.is-active { background: #fff; width: 24px; }

/* Progress */
.slider__progress {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 4px;
    background: rgba(255,255,255,.1); z-index: 10;
}
.slider__bar { height: 100%; background: rgba(255,255,255,0.5); width: 0; }

/* ---- SLIDER MOBILE ---- */
@media (max-width: 768px) {
    .slider-wrapper { padding-top: 20px; margin-top: 90px; }
    .slider { border-radius: 24px; height: 520px; }
    
    .slider__inner { padding: 0 24px; align-items: center; }
    .slider__left { max-width: 100%; }
    
    .slider__pill-wrap { left: 0; margin-bottom: 20px; }
    .slider__pill-icon { padding: 8px 16px; font-size: 1rem; }
    .slider__pill-text { font-size: 0.95rem; }
    
    .slider__heading { font-size: 1.8rem; margin-bottom: 12px; }
    .slider__text { font-size: 0.95rem; margin-bottom: 24px; }
    
    .slider__bottom { gap: 12px; flex-wrap: wrap; }
    .slider__socials { gap: 8px; }
    .slider__social { width: 40px; height: 40px; font-size: 1rem; }
    .slider__sep { display: none; } /* Mobilde çizgiyi gizleyip yer kazanalım */
    .slider__link { padding: 10px 16px; font-size: 0.85rem; }
    
    .slider__rnav.glass-pill { display: none; }
}


/* Services */
/* =============================================
   SERVİSLER — BENTO LAYOUT (Asimetrik)
   ============================================= */
.services {
    padding: 110px 0 130px;
    position: relative;
    overflow: hidden;
}
.services::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    top: 0; left: -100px;
    background: radial-gradient(ellipse, rgba(255,193,7,0.05) 0%, transparent 65%);
    pointer-events: none;
}

/* Bento grid: sol büyük kart + sağ 3'lü kolon */
.services-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

/* ── BÜYÜK HERO KART ─────────────────────── */
.svc-card {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
                border-color 0.35s, box-shadow 0.4s;
}
.svc-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,193,7,0.4);
    box-shadow: 0 24px 70px rgba(0,0,0,0.2),
                0 0 0 1px rgba(255,193,7,0.12);
}

/* Sol alt dikey aksan şeridi */
.svc-card::after {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    opacity: 0;
    transition: opacity 0.4s, top 0.4s, bottom 0.4s;
    border-radius: 3px;
}
.svc-card:hover::after { opacity: 1; top: 10%; bottom: 10%; }

/* Büyük numara watermark */
.svc-num {
    position: absolute;
    top: 18px; right: 24px;
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.07;
    font-family: 'Poppins', sans-serif;
    transition: opacity 0.4s;
    pointer-events: none;
    user-select: none;
}
.svc-card:hover .svc-num { opacity: 0.14; }

/* Hero kart içeriği */
.svc-hero {
    padding: 50px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    min-height: 380px;
}

/* Dekoratif daire arka plan */
.svc-deco {
    position: absolute;
    right: -60px; bottom: -60px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,193,7,0.09) 0%, transparent 70%);
    pointer-events: none;
    transition: transform 0.6s ease;
}
.svc-hero:hover .svc-deco { transform: scale(1.15); }

/* Büyük ikon */
.svc-icon {
    width: 72px; height: 72px;
    background: rgba(255,193,7,0.1);
    border: 1.5px solid rgba(255,193,7,0.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: var(--accent-color);
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    flex-shrink: 0;
}
.svc-card:hover .svc-icon {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #111;
    box-shadow: 0 10px 35px rgba(255,193,7,0.35);
    transform: scale(1.08);
}

/* Küçük ikon (yan kartlar için) */
.svc-icon-sm {
    width: 52px; height: 52px;
    font-size: 1.35rem;
    border-radius: 15px;
    flex-shrink: 0;
}

/* Metin alanı */
.svc-body h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    transition: color 0.3s;
}
.svc-card:hover .svc-body h3 { color: var(--accent-color); }

.svc-body p {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--text-secondary);
}

/* "Detaylı Bilgi" linki */
.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.3px;
    margin-top: 6px;
    transition: gap 0.3s;
}
.svc-link i { font-size: 0.8rem; transition: transform 0.3s; }
.svc-link:hover { gap: 14px; }
.svc-link:hover i { transform: translateX(4px); }

/* ── SAĞ KOLON: 3 yatay kart ─────────────── */
.svc-col-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.svc-sm {
    flex: 1;
    padding: 28px 30px;
}

/* Yatay iç düzen: ikon + metin yan yana */
.svc-row-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Vurgulu (sarı arka planlı) kart */
.svc-accent {
    background: linear-gradient(135deg, var(--accent-color) 0%, #e6a800 100%);
    border-color: transparent;
}
.svc-accent .svc-num { color: #111; opacity: 0.1; }
.svc-accent .svc-icon-sm {
    background: rgba(0,0,0,0.12);
    border-color: rgba(0,0,0,0.15);
    color: #111;
}
.svc-accent .svc-body h3,
.svc-accent .svc-body p { color: #111; }
.svc-accent:hover {
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(255,193,7,0.35);
}
.svc-accent:hover .svc-icon { background: rgba(0,0,0,0.18); }
.svc-accent:hover .svc-body h3 { color: #111; }
.svc-accent::after { background: linear-gradient(to bottom, transparent, #111, transparent); }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 900px) {
    .services-bento {
        grid-template-columns: 1fr;
    }
    .svc-hero { min-height: 280px; }
    .svc-col-right { flex-direction: row; flex-wrap: wrap; }
    .svc-sm { flex: 1 1 calc(50% - 9px); }
}
@media (max-width: 560px) {
    .svc-col-right { flex-direction: column; }
    .svc-sm { flex: unset; }
    .svc-hero { padding: 36px 28px; }
}

/* Eski services-grid — artık kullanılmıyor ama responsive için tutuyoruz */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* Kartlar arasındaki ince bağlantı çizgisi */
.services-grid::before {
    content: '';
    position: absolute;
    top: 52px;
    left: calc(12.5% + 10px);
    right: calc(12.5% + 10px);
    height: 2px;
    background: linear-gradient(to right,
        transparent,
        rgba(255, 193, 7, 0.25) 20%,
        rgba(255, 193, 7, 0.25) 80%,
        transparent
    );
    z-index: 0;
    pointer-events: none;
}

.service-box {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 28px 32px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    overflow: hidden;
    z-index: 1;
}

/* Üst aksan şeridi */
.service-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 20px 20px 0 0;
}

/* Parlak köşe ışığı */
.service-box::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(255,193,7,0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.service-box:hover {
    border-color: rgba(255, 193, 7, 0.45);
    transform: translateY(-10px);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.2),
        0 0 0 1px rgba(255,193,7,0.15);
}

.service-box:hover::before { opacity: 1; }
.service-box:hover::after  { opacity: 1; }

/* İkon kutusu */
.icon-box {
    width: 58px;
    height: 58px;
    background: rgba(255, 193, 7, 0.12);
    border: 1.5px solid rgba(255, 193, 7, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-box:hover .icon-box {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #111;
    box-shadow: 0 8px 30px rgba(255, 193, 7, 0.35);
    transform: scale(1.08) rotate(-4deg);
}

.service-box h3 {
    font-size: 1.18rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
    transition: color 0.3s;
}
.service-box:hover h3 {
    color: var(--accent-color);
}

.service-box p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}

/* Sıra numarası rozeti */
.service-box .step-num {
    position: absolute;
    top: 20px; right: 22px;
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent-color);
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.4s;
    font-family: 'Poppins', sans-serif;
}
.service-box:hover .step-num { opacity: 0.12; }


/* Special Services */
/* =============================================
   ÖZEL ÇÖZÜMLER — YENİ SP-CARD TASARIMI
   ============================================= */
.special-services {
    padding: 120px 0 140px;
    background-color: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .special-services {
    background: radial-gradient(circle at 10% 20%, rgba(15, 23, 42, 1) 0%, rgba(9, 13, 26, 1) 90%);
}

/* Dekoratif arka plan ışıkları */
.sp-bg-glow {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
    display: none;
}

[data-theme="dark"] .sp-bg-glow {
    display: block;
}

.sp-glow-left {
    left: -200px; top: 100px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.08) 0%, transparent 70%);
}
.sp-glow-right {
    right: -200px; bottom: 100px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
}

.special-services .container { position: relative; z-index: 1; }

/* Satırlar */
.sp-row {
    display: flex;
    gap: 20px;
}
.sp-row-top  { margin-bottom: 20px; align-items: stretch; }
.sp-row-bottom { align-items: stretch; }

/* ── Ana kart ────────────────────────────── */
.sp-card {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 35px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

[data-theme="dark"] .sp-card {
    background: rgba(13, 18, 36, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .sp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%, rgba(255,255,255,0.02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.45s;
}

.sp-card:hover {
    transform: translateY(-8px);
    background: var(--bg-primary);
    border-color: var(--sp-icon-color);
    box-shadow: var(--card-shadow), 0 10px 25px var(--sp-color);
}

[data-theme="dark"] .sp-card:hover {
    background: rgba(18, 24, 48, 0.75);
    box-shadow: 0 20px 45px rgba(0,0,0,0.3),
                0 0 30px var(--sp-color);
}

[data-theme="dark"] .sp-card:hover::before {
    background: linear-gradient(135deg, var(--sp-icon-color) 0%, transparent 70%);
}

/* Geniş kart */
.sp-card--wide { flex: 1.6; }

/* Küçük kart */
.sp-card.sp-card--sm { padding: 26px 24px; gap: 12px; }

/* Platform ikon */
.sp-icon {
    width: 50px; height: 50px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
    background: var(--sp-color, rgba(255,193,7,0.12));
    color: var(--sp-icon-color, var(--accent-color));
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255,255,255,0.05);
}
.sp-card--sm .sp-icon { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 12px; }
.sp-card:hover .sp-icon {
    transform: scale(1.15) rotate(-6deg);
    box-shadow: 0 8px 25px var(--sp-color);
    color: #fff !important;
    background: var(--sp-icon-color) !important;
}

/* Platform etiketi */
.sp-platform {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Başlık */
.sp-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0;
    transition: color 0.3s;
}
.sp-card--sm h3 { font-size: 1.05rem; }
.sp-card:hover h3 { color: var(--sp-icon-color, var(--accent-color)); }

/* Açıklama */
.sp-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
}
.sp-card--sm p { font-size: 0.85rem; }

/* Özellik pill'leri */
.sp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}
.sp-tags span {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all 0.3s;
}
.sp-card:hover .sp-tags span {
    border-color: var(--sp-icon-color);
    color: var(--sp-icon-color);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* ── Platform renk değişkenleri (data-color) ── */
.sp-card[data-color="instagram"] {
    --sp-color: rgba(220,39,67,0.15);
    --sp-icon-color: #e1306c;
}
.sp-card[data-color="instagram"] .sp-icon {
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    color: #fff;
}

.sp-card[data-color="google"] {
    --sp-color: rgba(66,133,244,0.15);
    --sp-icon-color: #4285F4;
}
.sp-card[data-color="google"] .sp-icon {
    background: rgba(66,133,244,0.1);
    color: #4285F4;
}

.sp-card[data-color="video"] {
    --sp-color: rgba(255,0,80,0.15);
    --sp-icon-color: #ff0050;
}
.sp-card[data-color="video"] .sp-icon {
    background: #111;
    color: #00f2fe;
    border: 1px solid #fe0050;
}

.sp-card[data-color="blue"] {
    --sp-color: rgba(29,155,240,0.15);
    --sp-icon-color: #1D9BF0;
}
.sp-card[data-color="blue"] .sp-icon {
    background: rgba(29,155,240,0.08);
    color: #1D9BF0;
}

.sp-card[data-color="orange"] {
    --sp-color: rgba(249,115,22,0.15);
    --sp-icon-color: #f97316;
}
.sp-card[data-color="orange"] .sp-icon {
    background: rgba(249,115,22,0.08);
    color: #f97316;
}

.sp-card[data-color="whatsapp"] {
    --sp-color: rgba(37,211,102,0.15);
    --sp-icon-color: #25D366;
}
.sp-card[data-color="whatsapp"] .sp-icon {
    background: rgba(37,211,102,0.08);
    color: #25D366;
}

.sp-card[data-color="purple"] {
    --sp-color: rgba(147,51,234,0.15);
    --sp-icon-color: #9333ea;
}
.sp-card[data-color="purple"] .sp-icon {
    background: rgba(147,51,234,0.08);
    color: #9333ea;
}

/* Yeni kart renkleri */
.sp-card[data-color="teal"] {
    --sp-color: rgba(38,208,206,0.15);
    --sp-icon-color: #26D0CE;
}
.sp-card[data-color="teal"] .sp-icon {
    background: linear-gradient(135deg, #1A2980, #26D0CE);
    color: #fff;
}

.sp-card[data-color="gaming"] {
    --sp-color: rgba(147,51,234,0.15);
    --sp-icon-color: #a855f7;
}
.sp-card[data-color="gaming"] .sp-icon {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
}

.sp-card[data-color="ecom"] {
    --sp-color: rgba(239,68,68,0.15);
    --sp-icon-color: #ef4444;
}
.sp-card[data-color="ecom"] .sp-icon {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
}

.sp-card[data-color="web"] {
    --sp-color: rgba(16,185,129,0.15);
    --sp-icon-color: #10b981;
}
.sp-card[data-color="web"] .sp-icon {
    background: rgba(16,185,129,0.08);
    color: #10b981;
}

.sp-card[data-color="ai"] {
    --sp-color: rgba(99,102,241,0.15);
    --sp-icon-color: #6366f1;
}
.sp-card[data-color="ai"] .sp-icon {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
}

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 1024px) {
    .sp-card--wide { flex: 1.3; }
}
@media (max-width: 768px) {
    .sp-row { flex-direction: column; gap: 14px; }
    .sp-row-top { margin-bottom: 14px; }
    .sp-card--wide { flex: unset; }
}
@media (max-width: 480px) {
    .sp-card { padding: 24px 20px; border-radius: 18px; }
    .sp-card h3 { font-size: 1rem; }
    .sp-card p { font-size: 0.82rem; }
}


/* Awards & Partnerships Redesign - 100% Creative Glassmorphism & Neon Glow */
.awards-section {
    padding: 120px 0;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

/* Subtle background glowing orb in the center */
.awards-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.06) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.awards-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.awards-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Floating Golden Badge */
.awards-text .sub-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 193, 7, 0.08) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    border-radius: 50px !important;
    padding: 6px 16px !important;
    color: var(--accent-color) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.05);
    animation: pillPulse 3s infinite ease-in-out;
}

@keyframes pillPulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 15px rgba(255, 193, 7, 0.05); }
    50% { transform: translateY(-3px); box-shadow: 0 0 25px rgba(255, 193, 7, 0.15); }
}

.awards-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.25;
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.awards-text p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

/* Glassmorphism Dynamic Glow Card */
.award-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 35px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-theme="dark"] .award-item {
    background: rgba(20, 26, 46, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Card inner glow border */
[data-theme="dark"] .award-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Holographic dynamic card shadow/glow */
.award-item.google-partner:hover {
    border-color: rgba(66, 133, 244, 0.4);
    box-shadow: 0 15px 35px rgba(66, 133, 244, 0.12);
    transform: translateY(-8px);
}
.award-item.meta-partner:hover {
    border-color: rgba(6, 104, 225, 0.4);
    box-shadow: 0 15px 35px rgba(6, 104, 225, 0.12);
    transform: translateY(-8px);
}
.award-item.spider-partner:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.12);
    transform: translateY(-8px);
}
.award-item.apple-partner:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.12);
    transform: translateY(-8px);
}

/* Icon Wrap Container */
.award-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.4s ease;
}

[data-theme="dark"] .award-icon-wrap {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.award-item:hover .award-icon-wrap {
    transform: scale(1.1) rotate(5deg);
}

/* Specific Brand Backdrops */
.award-item.google-partner .award-icon-wrap { background: rgba(66, 133, 244, 0.08); border-color: rgba(66, 133, 244, 0.2); }
.award-item.meta-partner .award-icon-wrap { background: rgba(6, 104, 225, 0.08); border-color: rgba(6, 104, 225, 0.2); }
.award-item.spider-partner .award-icon-wrap { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); }
.award-item.apple-partner .award-icon-wrap { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); }

/* Icons styling */
.award-icon-wrap i {
    font-size: 2.2rem;
    transition: all 0.4s ease;
}
.award-item.google-partner i { color: #4285F4; text-shadow: 0 0 15px rgba(66, 133, 244, 0.3); }
.award-item.meta-partner i { color: #0668E1; text-shadow: 0 0 15px rgba(6, 104, 225, 0.3); }
.award-item.spider-partner i { color: #F59E0B; text-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
.award-item.apple-partner i { color: #10B981; text-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }

/* Card Content styling */
.award-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.award-info h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.award-info span {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Micro Pill Tag inside Card */
.award-tag {
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 50px;
    margin-top: 4px;
}
.award-item.google-partner .award-tag { background: rgba(66, 133, 244, 0.12); color: #4285F4; border: 1px solid rgba(66, 133, 244, 0.25); }
.award-item.meta-partner .award-tag { background: rgba(6, 104, 225, 0.12); color: #0668E1; border: 1px solid rgba(6, 104, 225, 0.25); }
.award-item.spider-partner .award-tag { background: rgba(245, 158, 11, 0.12); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.25); }
.award-item.apple-partner .award-tag { background: rgba(16, 185, 129, 0.12); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.25); }

/* Portfolio */
.portfolio {
    padding: 100px 0;
    background-color: var(--bg-secondary);
}

.portfolio .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.project-card {
    background-color: var(--bg-primary);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.project-card:hover {
    box-shadow: var(--card-shadow);
    transform: translateY(-5px);
}

.project-img {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .project-img img {
    transform: scale(1.05);
}

.project-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(11, 15, 25, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.overlay-btn {
    width: 50px; height: 50px;
    background-color: var(--accent-color);
    color: #111827;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transform: translateY(20px);
    transition: var(--transition);
}

.project-card:hover .overlay-btn {
    transform: translateY(0);
}

.project-info {
    padding: 25px;
}

.category {
    font-size: 0.8rem;
    color: var(--accent-color);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

/* Process */
/* =============================================
   SÜREÇ — PREMİUM PROC-GRID TASARIMI
   ============================================= */
.process {
    padding: 120px 0 130px;
    position: relative;
    background: var(--bg-primary);
    overflow: hidden;
}
.process::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color), transparent);
}

/* Grid kapsayıcı */
.proc-grid {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 60px;
    position: relative;
}

/* Yatay bağlantı çizgisi */
.proc-line {
    position: absolute;
    top: 35px;                          /* İkon merkezine hizalı */
    left: calc(10% + 20px);
    right: calc(10% + 20px);
    height: 2px;
    background: linear-gradient(to right,
        #FFC107 0%, #3B82F6 25%,
        #8B5CF6 50%, #10B981 75%, #EF4444 100%
    );
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

/* ── Kart ─────────────────────────────────── */
.proc-card {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: default;
}

/* Üst alan: ikon + nokta */
.proc-card__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

/* Renkli ikon dairesi */
.proc-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 3px solid var(--border-color);
    background: var(--bg-primary);
}

[data-theme="dark"] .proc-icon {
    border-color: rgba(255,255,255,0.05);
    background: rgba(20, 26, 46, 0.6);
}

.proc-card:hover .proc-icon {
    transform: scale(1.15) translateY(-5px);
    color: #fff !important;
}

/* İkon renk varyantları */
.proc-icon--yellow { color: #FFC107; border-color: rgba(255,193,7,0.25); background: rgba(255,193,7,0.06); }
.proc-icon--blue   { color: #3B82F6; border-color: rgba(59,130,246,0.25); background: rgba(59,130,246,0.06); }
.proc-icon--purple { color: #8B5CF6; border-color: rgba(139,92,246,0.25); background: rgba(139,92,246,0.06); }
.proc-icon--green  { color: #10B981; border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.06); }
.proc-icon--red    { color: #EF4444; border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.06);  }

.proc-card:hover .proc-icon--yellow { background: #FFC107 !important; box-shadow: 0 10px 30px rgba(255,193,7,0.4); }
.proc-card:hover .proc-icon--blue   { background: #3B82F6 !important; box-shadow: 0 10px 30px rgba(59,130,246,0.4); }
.proc-card:hover .proc-icon--purple { background: #8B5CF6 !important; box-shadow: 0 10px 30px rgba(139,92,246,0.4); }
.proc-card:hover .proc-icon--green  { background: #10B981 !important; box-shadow: 0 10px 30px rgba(16,185,129,0.4); }
.proc-card:hover .proc-icon--red    { background: #EF4444 !important; box-shadow: 0 10px 30px rgba(239,68,68,0.4); }

/* Bağlantı noktası */
.proc-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: block;
    transition: all 0.3s ease;
    border: 2px solid var(--bg-primary);
}
.proc-card:hover .proc-dot { transform: scale(1.5); }
.proc-dot--yellow { background: #FFC107; box-shadow: 0 0 10px rgba(255,193,7,0.6); }
.proc-dot--blue   { background: #3B82F6; box-shadow: 0 0 10px rgba(59,130,246,0.6); }
.proc-dot--purple { background: #8B5CF6; box-shadow: 0 0 10px rgba(139,92,246,0.6); }
.proc-dot--green  { background: #10B981; box-shadow: 0 0 10px rgba(16,185,129,0.6); }
.proc-dot--red    { background: #EF4444; box-shadow: 0 0 10px rgba(239,68,68,0.6); }

/* Kart gövdesi */
.proc-card__body {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 26px 24px 22px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left;
}

[data-theme="dark"] .proc-card__body {
    background: rgba(20, 26, 46, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .proc-card__body::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.proc-card:hover .proc-card__body {
    transform: translateY(-8px);
    background: var(--bg-secondary);
    box-shadow: var(--card-shadow), 0 10px 25px rgba(0,0,0,0.03);
}

[data-theme="dark"] .proc-card:hover .proc-card__body {
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
    background: rgba(25, 32, 58, 0.65);
}

.proc-card[data-step="1"]:hover .proc-card__body { border-color: rgba(255,193,7,0.5); }
.proc-card[data-step="2"]:hover .proc-card__body { border-color: rgba(59,130,246,0.5); }
.proc-card[data-step="3"]:hover .proc-card__body { border-color: rgba(139,92,246,0.5); }
.proc-card[data-step="4"]:hover .proc-card__body { border-color: rgba(16,185,129,0.5); }
.proc-card[data-step="5"]:hover .proc-card__body { border-color: rgba(239,68,68,0.5); }

/* Büyük numara watermark */
.proc-num {
    position: absolute;
    top: 6px; right: 14px;
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--text-primary);
    opacity: 0.05;
    line-height: 1;
    pointer-events: none;
    font-family: 'Poppins', sans-serif;
    transition: all 0.4s;
}
.proc-card:hover .proc-num { opacity: 0.12; transform: scale(1.05); }

.proc-card__body h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
    transition: color 0.3s;
}
.proc-card:hover .proc-card__body h4 { color: var(--accent-color); }

.proc-card__body p {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Pill etiketler */
.proc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.proc-tags span {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    color: var(--text-secondary);
    transition: all 0.3s;
}
/* Hover pill renkleri */
.proc-card[data-step="1"]:hover .proc-tags span { color: #FFC107; border-color: rgba(255,193,7,0.4); background: rgba(255,193,7,0.07); }
.proc-card[data-step="2"]:hover .proc-tags span { color: #3B82F6; border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.07); }
.proc-card[data-step="3"]:hover .proc-tags span { color: #8B5CF6; border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.07); }
.proc-card[data-step="4"]:hover .proc-tags span { color: #10B981; border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.07); }
.proc-card[data-step="5"]:hover .proc-tags span { color: #EF4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.07); }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 1024px) {
    .proc-grid { gap: 12px; }
    .proc-icon { width: 58px; height: 58px; font-size: 1.35rem; }
    .proc-line { top: 30px; }
}
@media (max-width: 768px) {
    .proc-grid { flex-wrap: wrap; }
    .proc-card { flex: 1 1 calc(50% - 8px); }
    .proc-line { display: none; }
}
@media (max-width: 480px) {
    .proc-card { flex: 1 1 100%; }
    .proc-card__top { flex-direction: row; justify-content: flex-start; gap: 16px; margin-bottom: 12px; }
    .proc-dot { display: none; }
}


/* Culture Slider */
.culture-slider-section {
    padding: 120px 0;
    background-color: var(--bg-secondary);
}

.slider-wrapper {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide-card {
    min-width: calc(33.333% - 20px);
    height: 450px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.slide-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.slide-card:hover img {
    transform: scale(1.1);
}

.slide-gradient {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(11, 15, 25, 0.9) 0%, rgba(11, 15, 25, 0.2) 50%, transparent 100%);
}

.slide-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 40px;
    color: #FFFFFF;
}

.slide-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #FFFFFF;
}

.slide-content p {
    color: #94A3B8;
    margin: 0;
}

.slider-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.slider-btn {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

.slider-btn:hover {
    background-color: var(--accent-color);
    color: #111827;
    border-color: var(--accent-color);
}

/* Showreel Video */
.showreel-section {
    padding: 100px 0;
    background-color: var(--bg-primary);
}

.showreel-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.showreel-animated-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #010514; /* Koyu lacivert zemin */
    z-index: 0;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.7;
    animation: floatBlob 12s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.blob-1 {
    width: 350px; height: 350px;
    background-color: var(--accent-color); /* Kovan Sarı */
    top: -100px; left: -100px;
}

.blob-2 {
    width: 450px; height: 450px;
    background-color: #3B82F6; /* Mavi/Lacivert kontrastı */
    bottom: -150px; right: -150px;
    animation-delay: -5s;
    animation-duration: 18s;
}

@keyframes floatBlob {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(150px, 80px) scale(1.1); }
    100% { transform: translate(50px, 150px) scale(0.9); }
}

.showreel-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(11,15,25,0.6);
    z-index: 1;
}

.showreel-content {
    position: relative;
    z-index: 2;
    color: #FFFFFF;
}

.play-btn {
    position: relative;
    width: 80px; height: 80px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: #111827;
    border: none;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.play-btn:hover {
    transform: scale(1.1);
}

.play-ripple {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background-color: var(--accent-color);
    animation: ripple 2s infinite ease-out;
    z-index: -1;
}

@keyframes ripple {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

.showreel-content h2 {
    color: #FFFFFF;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.showreel-content p {
    color: #E2E8F0;
    font-size: 1.1rem;
}

/* Stats Counter Section Redesign - 100% Unique & Premium Dashboard Aesthetic */
.stats-section {
    padding: 100px 0;
    background-color: var(--bg-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

/* Background glowing matrix orb */
.stats-section::before {
    content: '';
    position: absolute;
    bottom: -150px; right: -150px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    text-align: center;
}

/* Premium Tech-Widget Box */
.stat-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-theme="dark"] .stat-box {
    background: rgba(20, 26, 46, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Technical Corner brackets effect using pseudo elements */
[data-theme="dark"] .stat-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.stat-box:hover {
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow: var(--card-shadow), 0 15px 35px rgba(255, 193, 7, 0.08);
    transform: translateY(-6px);
    background: var(--bg-secondary);
}

[data-theme="dark"] .stat-box:hover {
    background: rgba(20, 26, 46, 0.65);
}

/* Stat Icon Circle Wrapper */
.stat-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.06);
    border: 1px solid rgba(255, 193, 7, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 8px;
    transition: all 0.4s ease;
}

.stat-box:hover .stat-icon-wrap {
    transform: scale(1.1);
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.4);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.15);
}

.stat-icon-wrap i {
    font-size: 1.8rem;
    color: var(--accent-color);
    transition: all 0.4s ease;
}

/* Premium Gradient Numbers */
.stat-num {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    background: linear-gradient(135deg, var(--text-primary) 40%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.stat-box p {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.78rem;
    margin: 0;
    transition: color 0.3s ease;
}

.stat-box:hover p {
    color: var(--accent-color);
}

/* Tiny Badge */
.stat-box-tag {
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(255, 193, 7, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(255, 193, 7, 0.08);
    padding: 3px 8px;
    border-radius: 50px;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

/* FAQ Section */
.faq-section {
    padding: 120px 0;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

.faq-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    overflow: hidden;
}

.faq-question {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.faq-question i {
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question {
    background-color: var(--accent-color);
}

.faq-item.active .faq-question h4,
.faq-item.active .faq-question i {
    color: #111827; /* Dark text for yellow bg */
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer p {
    padding: 0 25px 20px 25px;
    color: var(--text-secondary);
    margin: 0;
}

/* Testimonials */
.testimonials {
    padding: 100px 0;
    background-color: var(--bg-secondary);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testi-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 40px;
    border-radius: 24px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-theme="dark"] .testi-card {
    background: rgba(20, 26, 46, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .testi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.testi-card:hover {
    transform: translateY(-8px);
    background: var(--bg-primary);
    border-color: var(--accent-color);
    box-shadow: var(--card-shadow), 0 10px 25px rgba(255, 193, 7, 0.05);
}

[data-theme="dark"] .testi-card:hover {
    background: rgba(25, 32, 58, 0.6);
    box-shadow: 0 20px 45px rgba(0,0,0,0.25), 0 0 25px rgba(255, 193, 7, 0.12);
}

.testi-stars {
    display: flex;
    gap: 5px;
    color: #FFC107;
    font-size: 0.85rem;
    margin-bottom: 18px;
}
.testi-stars i {
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
}

.quote-icon {
    font-size: 2rem;
    color: var(--accent-color);
    opacity: 0.3;
    margin-bottom: 20px;
}

.testi-text {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 30px;
    line-height: 1.8;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.author-info h5 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.author-info span {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 600;
}

/* =========================================
   GENÇ KARİYER
   ========================================= */
.career-section {
    padding: 120px 0;
    background-color: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .career-section {
    background: radial-gradient(circle at 50% 100%, rgba(16, 22, 40, 0.95) 0%, rgba(9, 13, 26, 1) 100%);
}

[data-theme="dark"] .career-section::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.03) 0%, transparent 70%);
    bottom: -300px;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.career-section .container {
    position: relative;
    z-index: 1;
}

/* Perks Grid */
.career-perks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 90px;
}

.perk-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 35px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-theme="dark"] .perk-item {
    background: rgba(20, 26, 46, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .perk-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.perk-item:hover {
    transform: translateY(-8px);
    background: var(--bg-primary);
    border-color: var(--accent-color);
    box-shadow: var(--card-shadow), 0 10px 25px rgba(255, 193, 7, 0.05);
}

[data-theme="dark"] .perk-item:hover {
    background: rgba(25, 32, 58, 0.6);
    box-shadow: 0 20px 45px rgba(0,0,0,0.25), 0 0 25px rgba(255, 193, 7, 0.12);
}

.perk-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 193, 7, 0.06);
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--accent-color);
    margin: 0 auto 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.perk-item:hover .perk-icon {
    transform: scale(1.12) rotate(-5deg);
    background: var(--accent-color);
    color: #0b0f19;
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
}

.perk-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
    transition: color 0.3s;
}
.perk-item:hover h4 {
    color: var(--accent-color);
}

.perk-item p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Positions List */
.career-positions {
    margin-bottom: 60px;
}

.positions-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--text-primary);
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.positions-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
}

.position-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.position-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-theme="dark"] .position-card {
    background: rgba(18, 24, 45, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.position-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent-color);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.position-card:hover {
    transform: translateX(6px);
    background: var(--bg-primary);
    border-color: rgba(255, 193, 7, 0.25);
    box-shadow: var(--card-shadow), 0 10px 25px rgba(255, 193, 7, 0.03);
}

[data-theme="dark"] .position-card:hover {
    background: rgba(23, 31, 58, 0.65);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 193, 7, 0.05);
}

.position-card:hover::before {
    transform: scaleY(1);
}

.position-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.position-icon {
    width: 52px;
    height: 52px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--accent-color);
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .position-icon {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.position-card:hover .position-icon {
    transform: scale(1.1) rotate(-5deg);
    background: var(--accent-color);
    color: #0b0f19;
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3);
}

.position-info h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
    transition: color 0.3s;
}

.position-card:hover .position-info h4 {
    color: var(--accent-color);
}

.position-dept {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.position-tags {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.3s;
}

.tag-type {
    background: rgba(255, 193, 7, 0.06);
    color: var(--accent-color);
    border: 1px solid rgba(255, 193, 7, 0.15);
}

.tag-loc {
    background: rgba(59, 130, 246, 0.06);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.position-card:hover .tag-type {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.3);
}

.position-card:hover .tag-loc {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.position-apply {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--accent-color), #ffaa00);
    color: #0b0f19;
    font-size: 0.88rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.position-apply:hover {
    background: linear-gradient(135deg, #ffaa00, #ff8800);
    color: #0b0f19;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

.position-apply i {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.position-apply:hover i {
    transform: translateX(4px);
}

/* Career CTA */
.career-cta {
    background: linear-gradient(135deg, #0B1121 0%, #1B2B5A 100%);
    border-radius: 16px;
    padding: 48px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid rgba(255, 193, 7, 0.15);
}

.career-cta-text h3 {
    color: #ffffff;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.career-cta-text p {
    color: rgba(255,255,255,0.65);
    font-size: 0.95rem;
    max-width: 500px;
}

.career-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Career Responsive */
@media (max-width: 1024px) {
    .career-perks { grid-template-columns: repeat(2, 1fr); }
    .position-card { flex-wrap: wrap; gap: 14px; }
}

@media (max-width: 768px) {
    .career-section { padding: 70px 0; }
    .career-perks { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .perk-item { padding: 24px 16px; }
    .position-card { flex-direction: column; align-items: flex-start; }
    .position-tags { flex-wrap: wrap; }
    .career-cta { flex-direction: column; text-align: center; }
    .career-cta-text p { max-width: 100%; }
    .career-cta-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .career-perks { grid-template-columns: 1fr; }
}

/* Creative CTA */
.cta-banner {
    padding: 100px 0;
    background-color: var(--bg-primary);
}

.cta-box {
    background-color: #111827;
    border-radius: 20px;
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    color: #FFFFFF;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-content p {
    color: #94A3B8;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.cta-btn {
    gap: 10px;
}

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

.cta-btn:hover i {
    transform: translateX(5px);
}

.cta-decor {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    overflow: hidden;
}

.cta-decor .circle {
    position: absolute;
    border-radius: 50%;
    background-color: var(--accent-color);
    filter: blur(80px);
    opacity: 0.15;
}

.cta-decor .circle-1 {
    width: 300px; height: 300px;
    top: -100px; left: -50px;
}

.cta-decor .circle-2 {
    width: 400px; height: 400px;
    bottom: -150px; right: -100px;
}

/* SEO Section */
.seo-section {
    padding: 40px 0 40px 0;
    background-color: var(--bg-primary);
}

.seo-content h2 {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    font-weight: 600;
}

.seo-scroll-box p:first-child {
    margin-top: 0;
}

.seo-scroll-box {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 15px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--bg-secondary);
}

.seo-scroll-box::-webkit-scrollbar {
    width: 6px;
}

.seo-scroll-box::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 10px;
}

.seo-scroll-box::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
}

.seo-scroll-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.8;
    text-align: justify;
    opacity: 0.75;
    margin-bottom: 15px;
}

.seo-content a, .seo-content strong, .seo-content em {
    color: var(--text-secondary);
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.seo-content a:hover {
    color: var(--accent-color);
}

/* Footer */
.footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding-top: 80px;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.brand-col {
    display: flex;
    justify-content: flex-start;
}

.brand-col-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.brand-col .corporate-desc {
    margin-top: 20px;
    color: var(--text-secondary);
    max-width: 300px;
    text-align: left;
}

.footer-col h4 {
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul a {
    color: var(--text-secondary);
}

.footer-col ul a:hover {
    color: var(--accent-color);
}

.contact-list li {
    color: var(--text-secondary);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.contact-list i {
    color: var(--accent-color);
    margin-top: 5px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.social-links a:hover {
    background-color: var(--accent-color);
    color: #111827;
    border-color: var(--accent-color);
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-title { font-size: 3rem; }
    .hero-stats-row { flex-direction: column; gap: 20px; }
    
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .showreel-box { height: 400px; }
    .marquee-content span { font-size: 2rem; }
    
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    
    .process-wrapper { flex-wrap: wrap; gap: 40px; }
    .process-arrow { display: none; }
    .process-step { min-width: 40%; }
    
    .faq-wrapper { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    
    .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-box { padding: 60px 20px; }

    .footer-top { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .brand-col { justify-content: center; }
    .brand-col-inner { align-items: center; text-align: center; }
    .brand-col .corporate-desc { margin: 15px 0 0 0; text-align: center; }
    .contact-list li { justify-content: center; }
}

@media (max-width: 768px) {
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--bg-primary);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 60px;
        gap: 30px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s ease;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: flex !important;
    }
    
    .nav-links a {
        font-size: 1.5rem;
    }
    
    .nav-actions .btn-primary { display: none; }
    .mobile-menu-btn { display: block; z-index: 101; }
    
    .hero-slider-section {
        border-radius: 30px;
        margin: 100px 15px 40px 15px;
        width: calc(100% - 30px);
    }
    
    .hero-slide { min-height: 85vh; }
    .hero-title { font-size: 2.2rem; }
    .hero-desc { margin: 0 auto 30px auto; }
    .full-bg-content { padding: 60px 0 160px 0; text-align: center; }
    .hero-stats-row { flex-direction: column; align-items: center; gap: 15px; margin-top: 20px; }
    .hero-buttons { justify-content: center; display: flex; flex-direction: column; gap: 15px; }
    .hero-controls-wrapper { bottom: 15px; flex-direction: column; gap: 15px; }
    .hero-arrows { gap: 30px; }
    
    .hero-overlay { background: linear-gradient(to top, #010514 0%, rgba(1, 5, 20, 0.8) 50%, rgba(1, 5, 20, 0.2) 100%); }
    [data-theme="dark"] .hero-overlay { background: linear-gradient(to top, #FFFFFF 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.2) 100%); }
    
    .slide-card { min-width: 100%; }
    .showreel-box { height: 300px; }
    
    .stats-grid { grid-template-columns: 1fr; }
    .special-services-grid { grid-template-columns: 1fr; }
    .awards-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    
    .portfolio-grid { grid-template-columns: 1fr; }
    .contact-content { flex-direction: column; }
    .contact-info, .contact-form-container { width: 100%; }
    
    /* Global Mobile Padding Reductions */
    .services, .special-services, .portfolio, .showreel-section, .culture-slider-section, .faq-section, .contact, .awards-section {
        padding: 60px 0;
    }
    
    .section-head { margin-bottom: 40px; text-align: center; flex-direction: column; gap: 15px; }
    .section-head h2 { font-size: 2rem; }
    
    .footer { padding: 60px 0 20px 0; }
    
    .process-step { min-width: 100%; }
    .testimonial-grid { grid-template-columns: 1fr; }
    
    .cta-content h2 { font-size: 2rem; }
    
    .portfolio .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    
    .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
}

/* =========================================
   CUSTOM CURSOR
   ========================================= */
body, a, button, .btn, .btn-icon, input, textarea {
    cursor: none !important;
}

.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
    visibility: hidden;
    opacity: 0;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    transition: opacity 0.3s ease;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(100, 116, 139, 0.5);
    /* Transform transition creates the smooth trailing effect */
    transition: transform 0.15s ease-out, width 0.2s ease-in-out, height 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, opacity 0.3s ease;
}

[data-theme="dark"] .cursor-outline {
    border: 2px solid rgba(148, 163, 184, 0.5);
}

.cursor-outline.hover-active {
    width: 60px;
    height: 60px;
    background-color: transparent;
    border-color: var(--accent-color);
    opacity: 0.8;
}

/* Hide custom cursor on touch/mobile devices */
@media (max-width: 768px) {
    .cursor-dot, .cursor-outline {
        display: none !important;
    }
    body, a, button, .btn, .btn-icon, input, textarea {
        cursor: auto !important;
    }
}

/* ====== HERO SLIDER RESPONSIVE ====== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .hero-slider-section {
        width: calc(100% - 24px);
        margin: 90px auto 24px auto;
        border-radius: 20px;
    }
    .hero-slide {
        min-height: 55vh;
    }
    .full-bg-content {
        padding: 60px 0 60px 0;
        max-width: 520px;
    }
    .hero-title {
        font-size: 2.4rem !important;
    }
    .hero-desc {
        font-size: 0.95rem !important;
    }
}

/* Mobil (max 768px) */
@media (max-width: 768px) {
    .hero-slider-section {
        width: calc(100% - 16px);
        margin: 80px auto 20px auto;
        border-radius: 16px;
    }
    .hero-slide {
        min-height: 70vh;
        align-items: flex-end;
    }
    .hero-overlay {
        background: linear-gradient(to top, #010514 0%, rgba(1, 5, 20, 0.85) 60%, rgba(1, 5, 20, 0.2) 100%) !important;
    }
    [data-theme="dark"] .hero-overlay {
        background: linear-gradient(to top, #FFFFFF 0%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0.2) 100%) !important;
    }
    .full-bg-content {
        padding: 30px 0 80px 0;
        max-width: 100%;
    }
    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    .hero-desc {
        font-size: 0.88rem !important;
        margin-top: 10px;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .hero-stats-row {
        gap: 20px;
        margin-top: 20px;
    }
    .stat-item i {
        font-size: 1.3rem;
    }
    .stat-item strong {
        font-size: 1rem;
    }
    .hero-controls-wrapper {
        bottom: 20px;
        padding: 0 16px;
    }
    .hero-arrow {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .hero-dot {
        width: 8px;
        height: 8px;
    }
}
/* =========================================
   PORTFOLIO SECTION
   ========================================= */
.portfolio-section {
    padding: 100px 0;
    background-color: var(--bg-secondary);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.portfolio-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: none;
}

[data-theme="dark"] .portfolio-item {
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 45px rgba(255, 193, 7, 0.15);
}

.portfolio-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--bg-primary);
    overflow: hidden;
}

.portfolio-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-item:hover .portfolio-img-box img {
    transform: scale(1.08);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(11, 17, 33, 0.95) 0%, rgba(11, 17, 33, 0.2) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-overlay-content {
    color: #fff;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.portfolio-item:hover .portfolio-overlay-content {
    transform: translateY(0);
}

.port-category {
    display: inline-block;
    padding: 5px 12px;
    background-color: rgba(255, 193, 7, 0.2);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.portfolio-overlay-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.ig-stats {
    display: flex;
    gap: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 12px;
}

.ig-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #cbd5e1;
}

.ig-stats i {
    color: var(--accent-color);
}



/* =============================================
   HERO SECTION - SIFIRDAN YAZILMIS
   Sol buyuk banner + sagda 2 kart
   ============================================= */

/* Wrapper */
.slider-wrapper {
    margin-top: 110px;
    padding: 20px 0 60px;
    background: transparent;
}

/* Grid: 1 genis + 1 dar sutun */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 18px;
    align-items: stretch;
}

/* SOL BUYUK BANNER */
.hero-main-banner {
    position: relative;
    height: 400px;
    border-radius: 28px;
    overflow: hidden;
    background: #0d1b3e;
}

.hero-main-banner .slider {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
}

.hero-main-banner .slider__inner {
    position: relative;
    display: flex;
    height: 100%;
    z-index: 2;
}

/* ── Sol metin alani — tamamen sola hizali ── */
.hero-main-banner .slider__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* Her sey sola hizali */
    justify-content: center;
    padding: 40px 40px 40px 0; /* Sol padding yok — container padding yapiyor */
    width: 55%;
    flex-shrink: 0;
    position: relative;
    z-index: 4;
    text-align: left;
}

/* ── Sırt arka plan gorseli — TUM bannerı kaplıyor ── */
.hero-main-banner .slider__right-img {
    position: absolute;
    inset: 0;            /* Tum alani doldur */
    width: 100%;
    height: 100%;
    z-index: 1;          /* Gradyan (z:2) ve metin (z:4) altinda */
    overflow: hidden;
    background: transparent;
}

/* ── Gradyan overlay: soldan koyulasiyor, saga saydam ── */
.hero-main-banner .slider__right-img::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Referanstaki gibi: sol yuzde 55'e kadar solid, sonra erir */
    background: linear-gradient(
        to right,
        rgba(13, 27, 62, 1.0)   0%,
        rgba(13, 27, 62, 1.0)  35%,
        rgba(13, 27, 62, 0.85) 50%,
        rgba(13, 27, 62, 0.45) 65%,
        rgba(13, 27, 62, 0.10) 80%,
        transparent           100%
    );
    z-index: 2;  /* Gorsel (z:0) uzerinde */
    pointer-events: none;
}

/* ── Arka plan gorseli — cover ile tam doluyor ── */
.hero-main-banner .slider__right-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    transform: scale(1.04);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-main-banner .slider__slide.is-active .slider__right-img img {
    transform: scale(1);
}

/* Pill etiketi — site'nin sarı temasıyla */
.hero-main-banner .slider__pill-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 193, 7, 0.15);   /* Sarı tonu — site aksan rengi */
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 50px;
    padding: 5px 14px;
    margin-bottom: 18px;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    position: static;
    left: auto;
}
.hero-main-banner .slider__pill-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFC107;      /* Site aksan rengi — sarı */
    letter-spacing: 0.5px;
}

/* Baslik */
.hero-main-banner .slider__heading {
    font-size: clamp(1.55rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 14px;
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.hero-main-banner .slider__slide:not(.is-active) .slider__heading {
    opacity: 0;
    transform: translateY(14px);
}
/* Aksan rengi — site'nin sarı teması */
.hero-main-banner .text-accent {
    color: var(--accent-color);  /* #FFC107 light / #FFD500 dark */
}

/* Aciklama */
.hero-main-banner .slider__text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
    margin-bottom: 24px;
    max-width: 340px;
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease 0.45s, transform 0.6s ease 0.45s;
}
.hero-main-banner .slider__slide:not(.is-active) .slider__text {
    opacity: 0;
    transform: translateY(12px);
}

/* Yildiz + rozet */
.slider__rating {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 1;
    transform: none;
}
.slider__rating .stars {
    display: flex;
    gap: 3px;
}
.slider__rating .stars i {
    color: #FFC107;       /* Sarı yildizlar */
    font-size: 0.95rem;
}
.slider__rating .rating-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--accent-color);  /* Site aksan rengi */
    color: #111;          /* Sarı üzerine koyu metin — okunabilir */
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 50px;
}
.slider__rating .btn-play {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    padding-left: 2px;
}
.slider__rating .btn-play:hover {
    border-color: #ff4d6b;
    color: #ff4d6b;
}

/* SAG KARTLAR */
.hero-right-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 400px;
}

.hero-card {
    flex: 1;
    min-height: 0;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 20px;
    transition: transform 0.3s ease;
}
.hero-card:hover {
    transform: translateY(-4px);
}

.hero-card--dark {
    background: linear-gradient(145deg, #1c2d52 0%, #111d38 100%);
}
.hero-card--red {
    background: linear-gradient(145deg, #e8365d 0%, #c01040 100%);
}

/* Soldan saga gradyan golge - metin okunabilirligi */
.hero-card--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #111d38                  0%,
        rgba(17, 29, 56, 0.95)  30%,
        rgba(17, 29, 56, 0.50)  58%,
        transparent              82%
    );
    z-index: 2;
    pointer-events: none;
}
.hero-card--red::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #c01040                   0%,
        rgba(192, 16, 64, 0.95)  30%,
        rgba(192, 16, 64, 0.50)  58%,
        transparent               82%
    );
    z-index: 2;
    pointer-events: none;
}

.hero-card__pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 14px 14px;
    pointer-events: none;
    z-index: 1;
}

/* Gorsel - kart arkaplanini tamamen kapliyor (ana banner gibi) */
.hero-card__img {
    position: absolute;
    inset: 0;               /* Tüm kartı doldur */
    z-index: 0;             /* En arkada */
    pointer-events: none;
    overflow: hidden;
}
.hero-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;  /* Karakteri sağda göster */
    display: block;
    transition: transform 0.5s ease;
}
.hero-card:hover .hero-card__img img {
    transform: scale(1.06);
}

.hero-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: left;
    max-width: 55%;
}
.hero-card__tag {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    color: #FFC107 !important;
    text-transform: uppercase;
    display: block;
}
.hero-card h3 {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.2;
    margin-bottom: 10px;
    text-align: left;
}
.btn-card-outline {
    display: inline-block;
    border: 1.5px solid rgba(255,255,255,0.5);
    background: transparent;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 50px;
    text-align: center;
    width: fit-content;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.btn-card-outline:hover {
    background: #FFC107;
    border-color: #FFC107;
    color: #111;
}

/* =============================================
   RESPONSIVE - HERO MOBİL UYUM (TAM)
   ============================================= */

/* ── 1280px: Tablet büyük ── */
@media (max-width: 1280px) {
    .hero-grid { grid-template-columns: 1fr 260px; gap: 14px; }
}

/* ── 1024px: Tablet ── */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr 220px; gap: 12px; }
    .hero-main-banner { height: 360px; }
    .hero-right-cards { height: 360px; }
    .hero-main-banner .slider__left { width: 58%; }
    .hero-main-banner .slider__heading { font-size: 1.55rem; }
}

/* ── 768px: Tablet dikey / büyük telefon ── */
@media (max-width: 768px) {
    .slider-wrapper { margin-top: 90px; padding: 16px 0 32px; }

    /* Grid tek kolona düş, kartlar alta */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Ana banner */
    .hero-main-banner {
        height: 380px; /* Increased to prevent vertical overflow/clipping of text */
        border-radius: 22px;
    }
    .hero-main-banner .slider__left {
        width: 62%;
        padding: 28px 20px 28px 30px; /* Slightly increased left padding for better safety against corner border-radius */
    }
    .hero-main-banner .slider__heading { font-size: 1.45rem; line-height: 1.25; }
    .hero-main-banner .slider__text   { font-size: 0.85rem; max-width: 260px; }

    /* Pill */
    .hero-main-banner .slider__pill-wrap { margin-bottom: 10px; }
    .hero-main-banner .slider__pill-text { font-size: 0.72rem; padding: 5px 12px; }

    /* Rating */
    .slider__rating { gap: 8px; flex-wrap: wrap; }
    .slider__rating .rating-badge { font-size: 0.75rem; padding: 4px 10px; }
    .slider__rating .btn-play { width: 30px; height: 30px; font-size: 0.7rem; }

    /* Promo kartlar — 2'li yan yana */
    .hero-right-cards {
        flex-direction: row;
        height: 200px;
        gap: 12px;
    }
    .hero-card { border-radius: 18px; }
    .hero-card h3 { font-size: 0.95rem !important; margin-bottom: 6px; }
    .hero-card__tag { font-size: 0.65rem !important; }
    .btn-card-outline { font-size: 0.75rem; padding: 5px 12px; }
}

/* ── 576px: Telefon (Mobil Uyumlu Glassmorphism) ── */
@media (max-width: 576px) {
    /* Ana banner */
    .hero-main-banner {
        height: auto;
        min-height: 290px;
        border-radius: 20px;
        overflow: hidden;
    }

    /* Slide iç düzen - Dikey ve yatay ortalama */
    .hero-main-banner .slider__inner {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 100%;
        min-height: 290px;
    }

    /* Premium Cam Panel (Text Container) */
    .hero-main-banner .slider__left {
        width: calc(100% - 32px); /* Perfect responsive margins */
        padding: 16px 20px;
        background: rgba(10, 16, 36, 0.68); /* Semi-transparent dark overlay */
        backdrop-filter: blur(6px); /* High-end glass effect */
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle premium border */
        border-radius: 16px;
        z-index: 10;
        max-height: 210px;
        overflow: hidden;
        position: relative;
        bottom: auto; left: auto; right: auto; /* Removed bottom-pin absolute positioning */
    }

    /* Görsel tüm banner arka planı */
    .hero-main-banner .slider__right-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .hero-main-banner .slider__right-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
        opacity: 1;
    }

    /* Pill */
    .hero-main-banner .slider__pill-wrap { margin-bottom: 6px; }
    .hero-main-banner .slider__pill-text { font-size: 0.65rem; padding: 3px 10px; }

    /* Başlık */
    .hero-main-banner .slider__heading {
        font-size: 1.15rem;
        line-height: 1.3;
        margin-bottom: 6px; /* Reduced spacing */
    }

    /* Açıklama — mobilde 2 satır limitli göster */
    .hero-main-banner .slider__text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.82rem;
        line-height: 1.45;
        margin-bottom: 8px; /* Reduced spacing */
        color: rgba(255, 255, 255, 0.8);
    }

    /* Rating */
    .slider__rating { gap: 6px; flex-wrap: nowrap; }
    .slider__rating .stars i { font-size: 0.72rem; }
    .slider__rating .rating-badge { font-size: 0.7rem; padding: 3px 8px; gap: 4px; }
    .slider__rating .btn-play { width: 26px; height: 26px; font-size: 0.6rem; }

    /* Promo kartlar */
    .hero-right-cards {
        flex-direction: row;
        height: 165px;
        gap: 10px;
    }
    .hero-card { border-radius: 16px; }
    .hero-card__content { padding: 12px 14px; }
    .hero-card h3 { font-size: 0.82rem !important; margin-bottom: 6px; line-height: 1.2; }
    .hero-card__tag { font-size: 0.58rem !important; letter-spacing: 0.8px; margin-bottom: 8px; }
    .btn-card-outline { font-size: 0.65rem; padding: 4px 10px; border-radius: 20px; }
}

/* ── 390px: iPhone boyutu ── */
@media (max-width: 390px) {
    .hero-main-banner { min-height: 270px; border-radius: 18px; }
    .hero-main-banner .slider__inner { min-height: 270px; }
    .hero-main-banner .slider__heading { font-size: 1.05rem; }
    .hero-main-banner .slider__text    { -webkit-line-clamp: 1; font-size: 0.76rem; }

    .hero-right-cards { height: 155px; gap: 8px; }
    .hero-card__tag { display: none; } /* Çok küçük ekranda etiketi gizle */
    .hero-card h3 { font-size: 0.8rem !important; margin-bottom: 4px; }
    .btn-card-outline { font-size: 0.65rem; padding: 4px 8px; }
}

/* ── 360px: Küçük Android ── */
@media (max-width: 360px) {
    .hero-main-banner { min-height: 255px; }
    .hero-main-banner .slider__inner { min-height: 255px; }
    .hero-main-banner .slider__heading { font-size: 1rem; }
    .hero-right-cards { height: 140px; }
}

/* =============================================
   MOBİL OVERRIDE — YÜKSEK ÖNCELİK
   (Specificity sorunlarını çözer)
   ============================================= */
@media (max-width: 576px) {

    /* Açıklama paragrafı — mobilde 2 satırla sınırla, gizleme */
    .hero-main-banner .slider__text,
    .hero-main-banner .slider__slide.is-active .slider__text,
    .hero-main-banner .slider__slide .slider__text {
        display: -webkit-box !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
        margin-bottom: 8px !important; /* Reduced from 12px */
        color: rgba(255,255,255,0.8) !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Pill etiketi — tek satır, taşma yok */
    .hero-main-banner .slider__pill-wrap {
        margin-bottom: 6px !important;
    }
    .hero-main-banner .slider__pill-text {
        font-size: 0.65rem !important;
        padding: 3px 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px;
        display: block;
    }

    /* Başlık — 2-3 satırda kes */
    .hero-main-banner .slider__heading {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important; /* Reduced from 10px */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Sol panel — cam panel ortalama override */
    .hero-main-banner .slider__left {
        width: calc(100% - 32px) !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-height: 210px !important;
        overflow: hidden !important;
        padding: 16px 20px !important;
        background: rgba(10, 16, 36, 0.68) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
    }
}

@media (max-width: 390px) {
    .hero-main-banner .slider__heading {
        font-size: 1.05rem !important;
        -webkit-line-clamp: 3;
    }
    .hero-main-banner .slider__pill-text {
        font-size: 0.65rem !important;
        max-width: 170px;
    }
    .hero-main-banner .slider__text {
        -webkit-line-clamp: 1 !important;
    }
}

/* ==========================================================================
   Modern Footer Redesign (SosyalEvin Inspired Premium Card Footer)
   ========================================================================== */
.modern-footer {
    background-color: #010514; /* Deep premium dark background */
    position: relative;
    padding: 0 0 45px 0;
    margin-top: 80px;
    overflow: visible;
    border-top: 1px solid var(--border-color);
    transition: background-color 0.4s ease;
}

[data-theme="light"] .modern-footer {
    background-color: #f8fafc; /* Beautiful clean light gray background for light theme */
}

/* Floating Card top overlay */
.footer-floating-card {
    background-color: #0a0f24; /* Darker navy block */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -36px; /* Pulls it upwards to overlap slightly */
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
    gap: 30px;
}

[data-theme="light"] .footer-floating-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.footer-contacts {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Rounded yellow contact icon buttons */
.contact-badge-btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background-color: var(--accent-color);
    color: #111827 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25);
}

.contact-badge-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
}

.contact-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.badge-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.3s ease;
    text-decoration: none;
}

.badge-value:hover {
    color: var(--accent-color);
}

/* Brand logotype wrap */
.footer-brand-wrap {
    display: flex;
    align-items: center;
}

.footer-brand-wrap .brand {
    font-size: 1.5rem;
}

/* Vertical Divider line */
.footer-divider-vert {
    width: 1px;
    height: 40px;
    background-color: var(--border-color);
}

/* Social icons wrap on the right */
.footer-social-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .social-badge {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.social-badge:hover {
    background-color: var(--accent-color);
    color: #111827 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3);
}

/* Divider across the footer */
.footer-horizontal-divider {
    height: 2px;
    background-color: var(--accent-color); /* Vibrant hot yellow brand accent line! */
    width: 100%;
    margin-top: 30px;
    border-radius: 2px;
}

/* Lower Navigation pill container */
.footer-nav-bar {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.footer-nav-pills {
    display: inline-flex;
    background-color: rgba(10, 15, 36, 0.6);
    border: 1px solid var(--border-color);
    padding: 6px;
    border-radius: 50px;
    gap: 5px;
    align-items: center;
}

[data-theme="light"] .footer-nav-pills {
    background-color: rgba(255, 255, 255, 0.9);
}

.nav-pill {
    padding: 10px 24px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    border-radius: 50px;
    transition: all 0.3s ease;
    letter-spacing: 0.8px;
    text-decoration: none;
}

.nav-pill:hover {
    color: var(--accent-color);
}

.nav-pill.active {
    background-color: var(--accent-color);
    color: #111827 !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25);
}

/* Footer bottom info block */
.footer-bottom-info {
    text-align: center;
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-bottom-info .copyright {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.footer-bottom-info .small-desc {
    color: var(--text-secondary);
    opacity: 0.7;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Responsive updates for custom footer */
@media (max-width: 991px) {
    .footer-floating-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px;
        margin-top: -20px;
    }
    .footer-contacts {
        justify-content: center;
        gap: 25px;
    }
    .footer-contact-item {
        flex-direction: column;
        align-items: center;
    }
    .footer-divider-vert {
        display: none;
    }
}

@media (max-width: 480px) {
    .footer-nav-pills {
        flex-direction: column;
        border-radius: 20px;
        width: 100%;
        padding: 10px;
    }
    .nav-pill {
        width: 100%;
        text-align: center;
        padding: 8px 12px;
    }
}