*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --black: #1e1e1e;
    --white: #ffffff;
    --yellow: #35c4e6;
    --yellow-dark: #1a9cbd;
    --gray-light: #f4f4f2;
    --gray-mid: #e0dedd;
    --gray-dark: #888;
    --red: #d93025;
   /* V2 Colors */
    --v2-bg: #ffffff;
    --v2-card-bg: #f8f9fa;
    --v2-gold: #35c4e6;
    --v2-gold-glow: rgba(53, 196, 230, 0.3);
    --v2-glass: rgba(255, 255, 255, 0.8);
    --v2-glass-border: rgba(0, 0, 0, 0.05);
    --v2-text: #1e1e1e;
    --v2-text-muted: #666666;
    --v2-darker: #ffffff;
}
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--white);
    color: var(--black);
    overflow-x: hidden;
}
/* ── NAVBAR ── */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 70px;
    background: var(--white);
    border-bottom: 1px solid var(--gray-mid);
}
.logo {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: -1px;
    color: var(--black);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
}
.logo span {
    color: var(--yellow);
}
nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 32px;
}
nav ul li a {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
    transition: color 0.2s;
}
nav ul li a:hover {
    color: var(--yellow-dark);
}
.nav-cta {
    background: var(--yellow) !important;
    color: var(--black) !important;
    padding: 8px 20px;
    font-size: 12px !important;
}
/* ── HERO / SLIDER ── */
.hero {
    margin-top: 70px;
    height: 580px;
    background: var(--black);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-slides {
    position: absolute;
    inset: 0;
    display: flex;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 80px;
}
.hero-slide.active {
    opacity: 1;
}
.hero-slide-1 {
    background: linear-gradient(135deg, #0a0a0a 55%, #1a1a1a 100%);
}
.hero-slide-2 {
    background: linear-gradient(135deg, #0a0a0a 45%, #1f1a00 100%);
}
.hero-slide-3 {
    background: linear-gradient(135deg, #0a0a0a 45%, #1a0a00 100%);
}
.hero-slide-4 {
    background: linear-gradient(135deg, #0a0a0a 45%, #001a0a 100%);
}
.hero-slide-5 {
    background: linear-gradient(135deg, #0a0a0a 45%, #00121a 100%);
}
.hero-slide-6 {
    background: linear-gradient(135deg, #0a0a0a 45%, #1a000c 100%);
}
.hero-slide-7 {
    background: linear-gradient(135deg, #0a0a0a 45%, #14001f 100%);
}
/* Big graphic number / billboard mockup */
.hero-visual {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 620px;
    height: 320px;
    background: #1a1a1a;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-visual-inner {
    width: 100%;
    height: 100%;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}
.hero-visual-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.hero-visual:hover .hero-visual-inner img {
    transform: scale(1.08);
}
.hero-visual-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 64px;
    color: var(--black);
    line-height: 1;
}
.hero-visual-sub {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--black);
    opacity: 0.7;
}
.hero-text {
    position: relative;
    z-index: 2;
    max-width: 480px;
    padding-left: 80px;
    left: 0;
    position: absolute;
    left: 80px;
}
.hero-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 2px;
    background: var(--yellow);
}
.hero h1 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 56px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 28px;
    letter-spacing: 0.5px;
}
.hero h1 em {
    font-style: normal;
    color: var(--yellow);
    display: block;
    margin-top: 6px;
}
.hero p {
    font-size: 17px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.78);
    max-width: 460px;
    margin-bottom: 36px;
}
.hero-eyebrow {
    font-size: 12px;
    letter-spacing: 4px;
    margin-bottom: 22px;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--yellow);
    color: var(--black);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 32px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover {
    background: var(--yellow-dark);
    transform: translateY(-1px);
}
.btn-arrow::after {
    content: '→';
    font-size: 16px;
}
/* Slider dots */
.hero-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.3s, width 0.3s;
}
.dot.active {
    background: var(--yellow);
    width: 24px;
}
/* ── STATS TICKER ── */
.stats-bar {
    background: var(--yellow);
    padding: 0;
    overflow: hidden;
    height: 60px;
    display: flex;
    align-items: center;
}
.ticker-track {
    display: flex;
    gap: 0;
    animation: ticker 30s linear infinite;
    white-space: nowrap;
}
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 0 40px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}
.ticker-item strong {
    font-size: 22px;
    font-weight: 900;
}
@keyframes ticker {
    0% {
        transform: translateX(0);
   }
    100% {
        transform: translateX(-50%);
   }
}
/* ── SECTION HEADER ── */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
}
.section-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--yellow-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.section-tag::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--yellow-dark);
    display: inline-block;
}
.section-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 34px;
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--black);
}
/* ── MOTTOS / FEATURED ── */
.mottos-section {
    padding: 96px 80px;
    background: var(--white);
}
.mottos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--gray-mid);
    border: 2px solid var(--gray-mid);
}
.motto-card {
    background: var(--white);
    padding: 48px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
    cursor: default;
}
.motto-card:hover {
    background: var(--black);
}
.motto-card:hover .motto-num, .motto-card:hover .motto-title, .motto-card:hover .motto-body {
    color: var(--white);
}
.motto-card:hover .motto-icon-bg {
    background: var(--yellow);
}
.motto-card.featured {
    background: var(--black);
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 64px;
    padding: 64px 64px;
}
.motto-num {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--gray-dark);
    margin-bottom: 16px;
    transition: color 0.3s;
}
.motto-icon-bg {
    width: 56px;
    height: 56px;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
    transition: background 0.3s;
}
.motto-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 12px;
    transition: color 0.3s;
    line-height: 1.05;
}
.motto-body {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    transition: color 0.3s;
    max-width: 340px;
}
.motto-card:hover .motto-body {
    color: rgba(255, 255, 255, 0.6);
}
.motto-card.featured .motto-title {
    font-size: 42px;
    color: var(--white);
    max-width: 400px;
}
.motto-card.featured .motto-body {
    color: rgba(255, 255, 255, 0.55);
    max-width: 460px;
    font-size: 15px;
}
.motto-card.featured .motto-num {
    color: var(--yellow);
}
.featured-accent {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.featured-big-num {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 44px;
    color: var(--black);
    line-height: 1;
}
.featured-big-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
}
/* ── WHY BRF ── */
.why-section {
    background: var(--black);
    padding: 96px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.why-text .section-title {
    color: var(--white);
}
.why-text .section-tag {
    color: var(--yellow);
}
.why-text .section-tag::before {
    background: var(--yellow);
}
.why-lead {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.65);
    margin: 24px 0 40px;
}
.why-lead strong {
    color: var(--yellow);
    font-weight: 600;
}
.why-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.why-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}
.why-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: var(--black);
    margin-top: 2px;
}
.why-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: #222;
}
.stat-box {
    background: #111;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
}
.stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--yellow);
}
.stat-big {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 60px;
    color: var(--white);
    line-height: 1;
    margin-bottom: 8px;
}
.stat-big span {
    color: var(--yellow);
}
.stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
/* ── REFERENCES ── */
.refs-section {
    padding: 80px 80px;
    background: var(--gray-light);
}
.refs-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    margin-top: 48px;
}
.ref-logo {
    width: 120px;
    height: 60px;
    background: var(--white);
    border: 1px solid var(--gray-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #bbb;
    transition: color 0.2s, border-color 0.2s;
}
.ref-logo:hover {
    color: var(--black);
    border-color: var(--yellow);
}
/* ── CONTACT CTA ── */
.cta-section {
    padding: 100px 80px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.cta-text .section-title {
    color: var(--black);
    font-size: 60px;
}
.cta-body {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    max-width: 460px;
    margin-top: 16px;
    line-height: 1.7;
}
.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--black);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px 40px;
    text-decoration: none;
    transition: background 0.2s;
    flex-shrink: 0;
    align-self: center;
}
.btn-dark:hover {
    background: #222;
}
.btn-dark::after {
    content: '→';
    font-size: 16px;
}
/* ── FOOTER ── */
footer {
    background: var(--black);
    padding: 64px 80px 40px;
    color: rgba(255, 255, 255, 0.5);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 48px;
}
.footer-brand .logo {
    color: var(--white);
    margin-bottom: 16px;
    display: inline-flex;
}
.footer-brand p {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
}
.footer-social {
    display: flex;
    gap: 10px;
}
.social-icon {
    width: 34px;
    height: 34px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.social-icon:hover {
    background: var(--yellow);
    color: var(--black);
}
.footer-col h4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 20px;
}
.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-col ul li a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-col ul li a:hover {
    color: var(--yellow);
}
.footer-partners {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.partner-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #111;
    padding: 12px 16px;
    border: 1px solid #1f1f1f;
}
.partner-icon {
    width: 32px;
    height: 32px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.partner-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
}
.partner-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.4;
}
.footer-bottom {
    border-top: 1px solid #1a1a1a;
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}
.footer-bottom a {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
}
/* ── WhatsApp ── */
.wa-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 52px;
    height: 52px;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    text-decoration: none;
    font-size: 22px;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transition: transform 0.2s;
}
.wa-btn:hover {
    transform: scale(1.08);
}
/* ── DROPDOWN ── */
.has-dropdown {
    position: relative;
}
.has-dropdown>a {
    display: flex;
    align-items: center;
    gap: 5px;
}
.has-dropdown>a::after {
    content: '▾';
    font-size: 10px;
    opacity: 0.5;
}
.dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--gray-mid);
    border-top: 2px solid var(--accent);
    min-width: 260px;
    list-style: none;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.has-dropdown:hover .dropdown {
    display: block;
}
.dropdown li {
    border-bottom: 1px solid var(--gray-mid);
}
.dropdown li:last-child {
    border-bottom: none;
}
.dropdown li a {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.15s, color 0.15s;
    gap: 2px;
}
.dropdown li a:hover {
    background: var(--gray-light);
    color: var(--accent-dark);
}
.dropdown li a span {
    font-size: 11px;
    font-weight: 400;
    color: var(--gray-text);
    text-transform: none;
    letter-spacing: 0;
}
.dropdown li a:hover span {
    color: var(--accent-dark);
    opacity: 0.7;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --black: #1e1e1e;
    --white: #ffffff;
    --accent: #35c4e6;
    --accent-dark: #1a9cbd;
    --gray-light: #f6f6f4;
    --gray-mid: #e2e1df;
    --gray-text: #777;
}
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--white);
    color: var(--black);
    overflow-x: hidden;
}
/* ── NAVBAR ── */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 68px;
    padding: 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-bottom: 1px solid var(--gray-mid);
}
.logo {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 26px;
    color: var(--black);
    text-decoration: none;
    letter-spacing: -1px;
}
.logo span {
    color: var(--accent);
}
nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 32px;
}
nav ul a {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
    transition: color 0.2s;
}
nav ul a:hover {
    color: var(--accent-dark);
}
nav ul a.active {
    color: var(--accent-dark);
}
.nav-btn {
    background: var(--accent) !important;
    color: var(--black) !important;
    padding: 8px 20px;
}
.nav-btn:hover {
    background: var(--accent-dark) !important;
    color: var(--white) !important;
}
/* ── BREADCRUMB ── */
.breadcrumb {
    margin-top: 68px;
    padding: 12px 56px;
    background: var(--gray-light);
    border-bottom: 1px solid var(--gray-mid);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray-text);
}
.breadcrumb a {
    color: var(--gray-text);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--accent-dark);
}
.breadcrumb .sep {
    color: var(--gray-mid);
}
.breadcrumb .cur {
    color: var(--black);
}
/* ── PAGE HERO ── */
.page-hero {
    padding: 96px 56px 80px;
    border-bottom: 1px solid var(--gray-mid);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
}
.hero-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.hero-eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--accent);
    display: inline-block;
}
.page-hero h1 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 28px;
}
.page-hero h1 span {
    display: block;
    color: var(--accent);
}
.page-hero-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-text);
    margin-bottom: 32px;
}
.page-hero p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    max-width: 420px;
    margin-bottom: 36px;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: var(--black);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 32px;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-primary:hover {
    background: var(--accent-dark);
    color: var(--white);
}
.btn-primary::after {
    content: ' →';
}
/* Hero stats */
.hero-visual {
    background: var(--gray-light);
    border: 1px solid var(--gray-mid);
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--gray-mid);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
/* ── INTRO ── */
.intro {
    padding: 96px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: start;
    border-bottom: 1px solid var(--gray-mid);
}
.intro-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.intro-tag::before {
    content: '';
    width: 16px;
    height: 2px;
    background: var(--accent-dark);
    display: inline-block;
}
.intro h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--black);
    margin-bottom: 28px;
}
.intro-body {
    font-size: 15px;
    line-height: 1.85;
    color: #555;
}
.intro-body+.intro-body {
    margin-top: 16px;
}
.intro-quote {
    border-left: 3px solid var(--accent);
    padding: 28px 32px;
    background: var(--gray-light);
    margin-top: 0;
}
.intro-quote p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    color: var(--black);
    margin-bottom: 16px;
}
.intro-quote small {
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.65;
    display: block;
}
/* ── SORUMLULUKLAR ── */
.resp-section {
    border-bottom: 1px solid var(--gray-mid);
}
.section-header {
    padding: 72px 56px 48px;
    border-bottom: 1px solid var(--gray-mid);
}
.section-header .tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.section-header .tag::before {
    content: '';
    width: 16px;
    height: 2px;
    background: var(--accent-dark);
    display: inline-block;
}
.section-header h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--black);
}
/* Accordion */
.acc-item {
    border-bottom: 1px solid var(--gray-mid);
}
.acc-header {
    padding: 28px 56px;
    display: flex;
    align-items: center;
    gap: 28px;
    cursor: pointer;
    transition: background 0.2s;
}
.acc-header:hover {
    background: var(--gray-light);
}
.acc-n {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gray-mid);
    min-width: 30px;
    transition: color 0.2s;
}
.acc-item.open .acc-n {
    color: var(--accent);
}
.acc-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--black);
    flex: 1;
}
.acc-toggle {
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gray-text);
    flex-shrink: 0;
    transition: all 0.25s;
}
.acc-item.open .acc-toggle {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--black);
    transform: rotate(45deg);
}
.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s;
    padding: 0 56px 0 114px;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}
.acc-item.open .acc-body {
    max-height: 160px;
    padding: 0 56px 28px 114px;
}
/* ── TİPLER ── */
.types-section {
    border-bottom: 1px solid var(--gray-mid);
    background: var(--gray-light);
}
.types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.type-card {
    padding: 56px 48px;
    border-right: 1px solid var(--gray-mid);
    background: var(--gray-light);
    transition: background 0.25s;
    position: relative;
}
.type-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    transition: background 0.25s;
}
.type-card:hover {
    background: var(--white);
}
.type-card:hover::after {
    background: var(--accent);
}
.type-card:last-child {
    border-right: none;
}
.type-model {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--black);
    color: var(--white);
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 20px;
}
.type-model.accent {
    background: var(--accent);
    color: var(--black);
}
.type-card h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 6px;
    line-height: 1;
}
.type-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 20px;
}
.type-divider {
    width: 24px;
    height: 2px;
    background: var(--gray-mid);
    margin-bottom: 20px;
}
.type-card p {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
}
/* ── FAYDALAR ── */
.benefits-section {
    border-bottom: 1px solid var(--gray-mid);
    background: var(--gray-light);
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--gray-mid);
    padding: 0 0 1px 0;
}
.benefit-card {
    background: var(--white);
    padding: 40px 36px;
    position: relative;
    transition: background 0.2s;
}
.benefit-card:hover {
    background: var(--gray-light);
}
.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--gray-mid);
    transition: background 0.2s;
}
.benefit-card:hover::before {
    background: var(--accent);
}
.benefit-num {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--gray-mid);
    margin-bottom: 16px;
    transition: color 0.2s;
}
.benefit-card:hover .benefit-num {
    color: var(--accent);
}
.benefit-card h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--black);
    line-height: 1.1;
    margin-bottom: 12px;
}
.benefit-body {
    font-size: 13px;
    line-height: 1.75;
    color: #666;
}
.benefit-body strong {
    color: var(--black);
    font-weight: 600;
}
/* ── SEKTÖRLER ── */
.sectors {
    background: var(--black);
    padding: 20px 56px;
    display: flex;
    align-items: center;
    gap: 0;
}
.sectors-lbl {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    margin-right: 36px;
    flex-shrink: 0;
}
.sector {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 6px 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    transition: color 0.2s;
}
.sector:hover {
    color: var(--accent);
}
/* ── DİĞER HİZMETLER ── */
.other {
    padding: 56px;
    background: var(--gray-light);
    border-top: 1px solid var(--gray-mid);
}
.other-lbl {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray-text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.other-lbl::before {
    content: '';
    width: 14px;
    height: 1px;
    background: var(--gray-text);
    display: inline-block;
}
.other-grid {
    display: flex;
    gap: 2px;
}
.other-card {
    flex: 1;
    background: var(--white);
    padding: 20px 24px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s;
}
.other-card:hover {
    border-color: var(--accent);
}
.other-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--black);
}
.other-sub {
    font-size: 10px;
    color: var(--gray-text);
    margin-top: 3px;
}
.other-arrow {
    color: var(--gray-mid);
    font-size: 13px;
    transition: color 0.2s;
}
.other-card:hover .other-arrow {
    color: var(--accent);
}
/* ── CTA ── */
.cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 3px solid var(--accent);
}
.cta-left {
    padding: 80px 56px;
    border-right: 1px solid var(--gray-mid);
}
.cta-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.cta-tag::before {
    content: '';
    width: 14px;
    height: 2px;
    background: var(--accent-dark);
    display: inline-block;
}
.cta-left h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 34px;
    text-transform: uppercase;
    line-height: 0.92;
    color: var(--black);
    margin-bottom: 24px;
}
.cta-left h2 em {
    font-style: normal;
    color: var(--accent);
}
.cta-left p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    max-width: 380px;
}
.cta-right {
    padding: 80px 56px;
    background: var(--gray-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.cta-btn-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--accent);
    color: var(--black);
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 22px 28px;
    text-decoration: none;
    transition: background 0.2s;
}
.cta-btn-main:hover {
    background: var(--accent-dark);
    color: var(--white);
}
.cta-btn-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    color: var(--black);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 18px 28px;
    text-decoration: none;
    border: 1px solid var(--gray-mid);
    transition: all 0.2s;
}
.cta-btn-sec:hover {
    background: var(--black);
    /* color: var(--white); */
    border-color: var(--black);
}
.cta-contact {
    font-size: 12px;
    color: var(--gray-text);
    padding-top: 4px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.cta-contact a {
    color: var(--gray-text);
    text-decoration: none;
    transition: color 0.2s;
}
.cta-contact a:hover {
    color: var(--accent-dark);
}
/* ── FOOTER ── */
footer {
    background: var(--black);
    padding: 64px 56px 36px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 48px;
    margin-bottom: 48px;
}
.foot-logo {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -1px;
    color: var(--white);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
}
.foot-logo span {
    color: var(--accent);
}
.foot-addr {
    font-size: 12px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
}
.foot-social {
    display: flex;
    gap: 8px;
}
.soc {
    width: 32px;
    height: 32px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.soc:hover {
    background: var(--accent);
    color: var(--black);
}
.foot-col h4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 20px;
}
.foot-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.foot-col ul a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.2s;
}
.foot-col ul a:hover {
    color: var(--accent);
}
.cert-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #111;
    padding: 10px 14px;
    border: 1px solid #1f1f1f;
}
.cert-icon {
    width: 30px;
    height: 30px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    color: var(--black);
    font-weight: 700;
}
.cert-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
}
.foot-bottom {
    border-top: 1px solid #1a1a1a;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
}
.foot-bottom a {
    color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}
/* WA */
.wa {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 50px;
    height: 50px;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 22px;
    z-index: 300;
    transition: transform 0.2s;
}
.wa:hover {
    transform: scale(1.1);
}
/* ── DROPDOWN ── */
.has-dropdown {
    position: relative;
}
.has-dropdown>a {
    display: flex;
    align-items: center;
    gap: 5px;
}
.has-dropdown>a::after {
    content: '▾';
    font-size: 10px;
    opacity: 0.5;
}
.dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--gray-mid);
    border-top: 2px solid var(--accent);
    min-width: 260px;
    list-style: none;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.has-dropdown:hover .dropdown {
    display: block;
}
.dropdown li {
    border-bottom: 1px solid var(--gray-mid);
}
.dropdown li:last-child {
    border-bottom: none;
}
.dropdown li a {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.15s, color 0.15s;
    gap: 2px;
}
.dropdown li a:hover {
    background: var(--gray-light);
    color: var(--accent-dark);
}
.dropdown li a span {
    font-size: 11px;
    font-weight: 400;
    color: var(--gray-text);
}
.dropdown li a:hover span {
    color: var(--accent-dark);
    opacity: 0.7;
}
.page {
    display: none !important;
}
.page.active {
    display: block !important;
}
/* === GLOBAL SERVICE PAGE IMPROVEMENTS === */
/* HİZMETLERİMİZ eyebrow — biraz daha büyük ve belirgin */
.page-hero .hero-eyebrow {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--accent);
    margin-bottom: 16px;
}
.page-hero .hero-eyebrow::before {
    width: 36px;
    height: 2px;
}
/* Larger body text on service pages */
.page-hero p {
    font-size: 16px;
    line-height: 1.9;
}
/* More breathing room in intro sections */
.intro-body {
    font-size: 16px;
    line-height: 2;
}
/* Accordion headers bigger and clearer */
.acc-header .acc-title {
    font-size: 17px !important;
}
.acc-body p, .acc-body li {
    font-size: 15px !important;
    line-height: 1.85 !important;
}
/* Benefit cards cleaner */
.benefit-body {
    font-size: 15px !important;
    line-height: 1.8 !important;
}
/* Type cards cleaner */
.type-card p {
    font-size: 15px;
    line-height: 1.8;
}
/* Section headers readable */
.section-header h2 {
    font-size: 28px !important;
}
/* Page hero title bigger on service pages */
.page-hero h1 {
    font-size: 40px !important;
    line-height: 1.05 !important;
}
/* CTA contact info more visible */
.cta-contact a {
    font-size: 15px !important;
    font-weight: 600 !important;
}
/* Mail/WhatsApp more prominent in sidebar */
.cta-btn-sec {
    font-size: 15px !important;
}
/* TEKLİF ALIN button mail link visibility */
a.cta-btn-main {
    font-size: 16px !important;
}
.faydalar-prominent {
    background: linear-gradient(135deg, #fffbe8 0%, #fff7d1 100%) !important;
    border-top: 4px solid var(--yellow);
    border-bottom: 1px solid var(--gray-mid);
    padding: 70px 56px !important;
}
.faydalar-prominent .m-section-header {
    margin: 0 auto 48px;
    max-width: 100%;
    text-align: center;
}
.faydalar-prominent .m-section-header .tag {
    justify-content: center;
    color: #8a6d00;
}
.faydalar-prominent .m-section-header h2 {
    font-size: 44px;
    font-weight: 900;
    color: var(--black);
    letter-spacing: -0.5px;
}
.faydalar-prominent .m-section-header h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--yellow);
    margin: 18px auto 0;
}
.mottos-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 380px;
  }
  .motto7 {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--white);
    display: block;
    background: linear-gradient(135deg, var(--m7c) 0%, var(--m7c2) 100%);
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.3s ease;
  }
  .motto7:last-child { border-right: none; }
  .motto7-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
    transition: background 0.3s;
  }
  .motto7:hover .motto7-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 100%);
  }
  .motto7::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--yellow);
    z-index: 3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
  }
  .motto7:hover::before { transform: scaleX(1); }
  .motto7-text {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 22px;
    z-index: 2;
  }
  .motto7-sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 12px;
  }
  .motto7-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 14px;
  }
  .motto7-arrow {
    display: inline-block;
    font-size: 18px;
    color: var(--yellow);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s, transform 0.3s;
  }
  .motto7:hover .motto7-arrow {
    opacity: 1;
    transform: translateX(0);
  }
  @media (max-width: 1200px) {
    .mottos-7 { grid-template-columns: repeat(4, 1fr); height: auto; }
    .motto7 { height: 220px; }
  }
  @media (max-width: 700px) {
    .mottos-7 { grid-template-columns: repeat(2, 1fr); }
  }

  .mottos-section {
    padding: 0;
    background: var(--white);
    margin-bottom: 50px;
  }

  .mottos-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 380px;
  }

  .motto5 {
    position: relative;
    overflow: hidden;
    cursor: default;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .motto5:last-child {
    border-right: none;
  }

  .motto5-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    overflow: hidden;
  }

  .motto5:nth-child(1) .motto5-bg {
    background: linear-gradient(135deg, #0d1d2e 0%, #15334f 60%, #1d4d75 100%);
  }

  .motto5:nth-child(1) .motto5-bg::after {
    content: '✓';
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 80px;
    color: rgba(255, 193, 7, 0.12);
    font-weight: 900;
    line-height: 1;
  }

  .motto5:nth-child(2) .motto5-bg {
    background: linear-gradient(135deg, #0a0a0a 0%, #1f1a00 60%, #3d2f00 100%);
  }

  .motto5:nth-child(2) .motto5-bg::after {
    content: '16';
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 72px;
    color: rgba(255, 193, 7, 0.18);
    font-weight: 900;
    line-height: 1;
  }

  .motto5:nth-child(3) .motto5-bg {
    background: linear-gradient(135deg, #11253b 0%, #1c3e60 60%, #275685 100%);
  }

  .motto5:nth-child(3) .motto5-bg::after {
    content: '∞';
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 80px;
    color: rgba(255, 193, 7, 0.12);
    font-weight: 900;
    line-height: 1;
  }

  .motto5:nth-child(4) .motto5-bg {
    background: linear-gradient(135deg, #161616 0%, #2a2a2a 60%, #3d3d3d 100%);
  }

  .motto5:nth-child(4) .motto5-bg::after {
    content: '01';
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 72px;
    color: rgba(255, 193, 7, 0.14);
    font-weight: 900;
    line-height: 1;
  }

  .motto5:nth-child(5) .motto5-bg {
    background: linear-gradient(135deg, #0d1d2e 0%, #15334f 60%, #1d4d75 100%);
  }

  .motto5:nth-child(5) .motto5-bg::after {
    content: '₺';
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 80px;
    color: rgba(255, 193, 7, 0.14);
    font-weight: 900;
    line-height: 1;
  }

  .motto5:hover .motto5-bg {
    transform: scale(1.06);
  }

  .motto5-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
    transition: background 0.4s;
  }

  .motto5:hover .motto5-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.3) 100%);
  }

  .motto5-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 20px;
    z-index: 2;
  }

  .motto5-num {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
  }

  .motto5-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--white);
  }

  .motto5-body {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .motto5:hover .motto5-body {
    max-height: 100px;
  }

  .motto5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--yellow);
    z-index: 3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
  }

  .motto5:hover::before {
    transform: scaleX(1);
  }

  .brf-starts-guncel {
    padding: 80px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    border-top: 1px solid var(--gray-mid);
    background: var(--white);
  }

  .brf-starts-guncel h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 20px;
  }

  .brf-starts-guncel h2 em {
    font-style: normal;
    color: var(--yellow-dark);
  }

  .brf-starts-guncel p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 16px;
  }

  .brf-starts-guncel p strong {
    color: var(--black);
    font-weight: 600;
  }

  .brf-stats-guncel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--gray-mid);
  }

  .brf-stat-g {
    background: var(--white);
    padding: 32px 28px;
    transition: background 0.2s;
  }

  .brf-stat-g:hover {
    background: var(--gray-light);
  }

  .brf-stat-g-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--black);
    line-height: 1;
    margin-bottom: 6px;
  }

  .brf-stat-g-num span {
    color: var(--yellow-dark);
  }

  .brf-stat-g-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray-dark);
  }

  .site-footer-guncel {
    background: #1e2d3d;
    padding: 56px 56px 32px;
  }

  .footer-top-g {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-logo-g {
    text-decoration: none;
  }

  .footer-addr-g {
    font-size: 12px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
  }

  .footer-socials-g {
    display: flex;
    gap: 8px;
  }

  .fsoc-g {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }

  .fsoc-g:hover {
    background: var(--yellow);
    color: var(--black);
  }

  .footer-col-title-g {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 18px;
  }

  .footer-links-g {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-links-g li a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
  }

  .footer-links-g li a:hover {
    color: var(--yellow);
  }

  .footer-cert-list-g {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .footer-cert-g {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    transition: transform 0.2s;
  }

  .footer-cert-g:hover {
    transform: translateY(-2px);
  }

  .footer-cert-icon-g {
    width: 28px;
    height: 28px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--black);
    font-weight: 700;
    border-radius: 3px;
    flex-shrink: 0;
  }

  .footer-cert-name-g {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
  }

  .footer-cert-name-g strong {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: var(--black);
    margin-bottom: 2px;
  }

  .footer-bottom-g {
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
  }

  .footer-bottom-g a {
    color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
  }

  .wa-widget {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .wa-bubble {
    background: var(--white);
    border: 1px solid var(--gray-mid);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    max-width: 240px;
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
  }

  .wa-widget:hover .wa-bubble {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .wa-bubble-icon {
    width: 36px;
    height: 36px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  .wa-bubble-text {
    font-size: 12px;
    line-height: 1.5;
    color: #333;
  }

  .wa-bubble-text strong {
    display: block;
    font-size: 13px;
    color: var(--black);
    margin-bottom: 2px;
  }

  .wa-btn {
    width: 52px;
    height: 52px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .wa-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  }

  .brf-starts-centered {
    padding: 80px 56px;
    text-align: center;
    border-top: 1px solid var(--gray-mid);
    background: var(--white);
  }

  .brf-starts-centered h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--black);
    margin-bottom: 20px; 
    margin-left: auto;
    margin-right: auto;
  }

  .brf-starts-centered h2 em {
    font-style: normal;
    color: var(--yellow-dark);
  }

  .brf-starts-centered p {
    font-size: 16px;
    line-height: 1.85;
    color: #666; 
    margin: 0 auto 16px;
  }

  .brf-starts-centered p strong {
    color: var(--black);
    font-weight: 600;
  }

  .brf-starts-centered .btn-primary {
    margin-top: 16px;
  }

  .corp-section {
    padding: 80px 56px;
    background: var(--gray-light);
    margin-top: 68px;
  }

  .corp-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .corp-title {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--black);
    margin-bottom: 12px;
    line-height: 1.05;
  }

  .corp-subtitle {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--yellow-dark);
    text-transform: uppercase;
    margin-bottom: 32px;
  }

  .corp-body {
    background: var(--white);
    border-radius: 12px;
    padding: 48px 56px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .corp-body p {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 18px;
  }

  .corp-highlight {
    background: linear-gradient(135deg, var(--yellow-dark) 0%, var(--yellow) 100%);
    color: var(--white);
    padding: 32px 40px;
    border-radius: 12px;
    margin-top: 32px;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .hakk-stats {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    background: var(--white);
    border-radius: 12px;
    padding: 48px 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    align-items: center;
  }

  .hakk-map {
    background: var(--gray-light);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
  }

  .hakk-img-container {
    width: 100%;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
    background: var(--gray-mid);
  }

  .hakk-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hakk-map-caption {
    font-size: 12px;
    color: #666;
    margin-top: 12px;
    font-style: italic;
  }

  .hakk-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .hakk-stat {
    background: var(--gray-light);
    padding: 28px 24px;
    border-radius: 10px;
    text-align: center;
    transition: background 0.2s;
  }

  .hakk-stat:hover {
    background: #e5f6fb;
  }

  .hakk-stat-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--black);
    line-height: 1;
    margin-bottom: 8px;
  }

  .hakk-stat-num span {
    color: var(--yellow-dark);
  }

  .hakk-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #666;
    text-transform: uppercase;
  }
  .iletisim-section {
    padding: 60px 56px 80px;
    background: var(--gray-light);
    margin-top: 68px;
  }

  .iletisim-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .iletisim-title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--black);
    margin-bottom: 40px;
    line-height: 1;
  }

  /* Info cards row */
  .iletisim-cards {
    background: var(--white);
    border-radius: 12px;
    padding: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .ilet-card {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .ilet-icon {
    width: 52px;
    height: 52px;
    background: var(--yellow);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
  }

  .ilet-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--white);
  }

  .ilet-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 4px;
  }

  .ilet-card-value {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
  }

  .ilet-card-value a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
  }

  .ilet-card-value a:hover {
    color: var(--yellow-dark);
  }

  /* Map + form + photo row */
  .iletisim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }

  .ilet-map {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    min-height: 400px;
  }

  .ilet-map iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
    display: block;
  }

  .ilet-form-box {
    background: var(--white);
    border-radius: 12px;
    padding: 36px 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
  }

  .ilet-motto {
    background: var(--yellow);
    color: var(--white);
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 500;
  }

  .ilet-motto strong {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
  }

  .ilet-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 6px;
    margin-top: 14px;
  }

  .ilet-form label:first-child {
    margin-top: 0;
  }

  .ilet-form input,
  .ilet-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-mid);
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    background: var(--gray-light);
    transition: border-color 0.2s, background 0.2s;
  }

  .ilet-form input:focus,
  .ilet-form textarea:focus {
    outline: none;
    border-color: var(--yellow);
    background: var(--white);
  }

  .ilet-form textarea {
    resize: vertical;
    min-height: 90px;
  }

  .ilet-form button {
    margin-top: 20px;
    background: var(--yellow);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
  }

  .ilet-form button:hover {
    background: var(--yellow-dark);
  }



  /* Yolsuzluk bildiri bandı */
  .iletisim-bildirim {
    background: var(--white);
    border-left: 4px solid var(--yellow);
    border-radius: 12px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .bildirim-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--yellow-dark);
  }

  .bildirim-content strong {
    font-size: 15px;
    color: var(--black);
    display: block;
    margin-bottom: 4px;
  }

  .bildirim-content {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
  }

  .bildirim-content a {
    color: var(--yellow-dark);
    font-weight: 600;
    text-decoration: none;
  }

  .bildirim-content a:hover {
    text-decoration: underline;
  }

  .kariyer-section {
    padding: 80px 56px;
    background: var(--gray-light);
    min-height: calc(100vh - 68px);
    margin-top: 68px;
  }

  .kariyer-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .kariyer-title {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--black);
    margin-bottom: 48px;
    line-height: 1;
  }

  .kariyer-body {
    background: var(--white);
    border: 1px solid var(--gray-mid);
    border-radius: 12px;
    padding: 48px 56px;
    max-width: 860px;
  }

  .kariyer-lead {
    font-size: 22px;
    font-weight: 700;
    color: var(--yellow-dark);
    margin-bottom: 28px;
    line-height: 1.3;
  }

  .kariyer-body p {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 18px;
  }

  .kariyer-body p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--black);
  }

  .kariyer-mail {
    color: var(--yellow-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid black;
    transition: color 0.2s, border-color 0.2s;
  }

  .kariyer-mail:hover {
    color: var(--black);
    border-color: var(--black);
  }
  .ref-grid-wrap {
    padding: 40px 56px 80px;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
  }
  .ref-grid-img {
    width: 100%;
    max-width: 1280px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 3px solid #003a7a;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 58, 122, 0.12);
  }
  .ref-tagline {
    max-width: 1100px;
    margin: 36px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    font-style: italic;
    text-align: center;
    font-weight: 500;
  }
  
  .ref-hero {
    padding: 80px 56px 48px;
    background: var(--gray-light);
    border-bottom: 1px solid var(--gray-mid);
    text-align: center;
  }

  .ref-hero .tag {
    justify-content: center;
    margin-bottom: 16px;
  }

  .ref-hero h1 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--black);
    margin-bottom: 20px;
  }

  .ref-hero p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    max-width: 720px;
    margin: 0 auto;
    font-style: italic;
  }

  .ref-category {
    padding: 56px 56px;
    border-bottom: 1px solid var(--gray-mid);
  }

  .ref-category:nth-child(even) {
    background: var(--gray-light);
  }

  .ref-cat-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--yellow-dark);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-mid);
  }

  .ref-cat-title::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--yellow-dark);
    display: inline-block;
  }

  .ref-logos-img {
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    width: 100%;
  }
  #page-neden .neden-certs-section {
    padding: 60px 5%;
    background: var(--v2-bg);
    position: relative;
    border-top: 1px solid var(--v2-glass-border);
  }

  #page-neden .neden-certs-title {
    text-align: center;
    margin-bottom: 80px;
  }

  #page-neden .neden-certs-title .tag {
    background: var(--v2-glass);
    color: var(--v2-gold);
    border: 1px solid var(--v2-gold-glow);
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    justify-content: center;
  }

  #page-neden .neden-certs-title h2 {
    font-size: 42px;
    font-weight: 900;
    color: var(--v2-text);
    margin-top: 15px;
    letter-spacing: -1px;
  }

  #page-neden .neden-certs-title p {
    font-size: 18px;
    color: var(--v2-text-muted);
    margin: 20px auto 0;
    max-width: 700px;
    line-height: 1.6;
  }

  #page-neden .neden-certs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  #page-neden .neden-cert-card {
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-gold-glow);
    border-radius: 20px;
    padding: 30px 15px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08), 0 0 15px rgba(53, 196, 230, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  #page-neden .neden-cert-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(53, 196, 230, 0.05) 0%, transparent 100%);
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  #page-neden .neden-cert-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--v2-glass-border);
  }

  #page-neden .neden-cert-card:hover::before {
    opacity: 0;
  }

  #page-neden .neden-cert-card img {
    width: auto;
    height: 140px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 25px;
    filter: grayscale(0%) brightness(1) contrast(1);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
  }

  #page-neden .neden-cert-card:hover img {
    filter: grayscale(100%) brightness(0.9) contrast(1.1);
    transform: scale(0.95);
  }

  #page-neden .neden-cert-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--v2-text);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
  }

  #page-neden .neden-cert-desc {
    font-size: 13px;
    color: var(--v2-text-muted);
    line-height: 1.4;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 1200px) {
    #page-neden .neden-certs-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  }

  @media (max-width: 900px) {
    #page-neden .neden-certs-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    #page-neden .neden-certs-title h2 {
      font-size: 32px;
    }
  }

  @media (max-width: 600px) {
    #page-neden .neden-certs-grid {
      grid-template-columns: 1fr;
      max-width: 400px;
    }

    #page-neden .neden-certs-section {
      padding: 80px 5%;
    }
  }

  #page-neden {
    --v2-bg: #ffffff;
    --v2-card-bg: #f8f9fa;
    --v2-gold: #35c4e6;
    --v2-gold-glow: rgba(53, 196, 230, 0.3);
    --v2-glass: rgba(255, 255, 255, 0.8);
    --v2-glass-border: rgba(0, 0, 0, 0.05);
    --v2-text: #1e1e1e;
    --v2-text-muted: #666666;
    --v2-darker: #ffffff;
    background-color: var(--v2-bg);
    color: var(--v2-text);
  }

  /* Hero Section */
  #page-neden .m-neden-intro {
    padding: 140px 5% 80px;
    background: radial-gradient(circle at 50% 0%, #eef8fb 0%, var(--v2-bg) 70%);
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    overflow: hidden;
  }

  #page-neden .m-neden-intro-content {
    flex: 1;
    position: relative;
    z-index: 2;
  }

  #page-neden .m-neden-intro-content .tag {
    background: var(--v2-glass);
    color: var(--v2-gold);
    border: 1px solid var(--v2-gold-glow);
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    backdrop-filter: blur(10px);
  }

  #page-neden .m-neden-intro-content h1 {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--v2-text);
    letter-spacing: -1.5px;
  }

  #page-neden .m-neden-intro-content h1 span {
    color: var(--v2-gold);
  }

  #page-neden .m-neden-intro-content p {
    font-size: 18px;
    color: var(--v2-text-muted);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 600px;
  }

  #page-neden .m-neden-intro-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 2;
  }

  #page-neden .m-neden-intro-visual img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--v2-glass-border);
  }

  #page-neden .m-neden-badge {
    position: absolute;
    bottom: -20px;
    left: -30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 20px 30px;
    border-radius: 16px;
    border: 1px solid var(--v2-glass-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  #page-neden .m-neden-badge strong {
    font-size: 28px;
    font-weight: 900;
    color: var(--v2-gold);
  }

  #page-neden .m-neden-badge span {
    font-size: 14px;
    color: var(--v2-text);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Infinite Marquee */
  .v2-marquee-container {
    width: 100%;
    overflow: hidden;
    background: var(--v2-gold);
    padding: 15px 0;
    display: flex;
    position: relative;
    box-shadow: 0 10px 30px rgba(53, 196, 230, 0.2);
    z-index: 10;
  }

  .v2-marquee-content {
    display: flex;
    white-space: nowrap;
    animation: v2-marquee 25s linear infinite;
  }

  .v2-marquee-item {
    font-size: 16px;
    font-weight: 800;
    color: var(--v2-darker);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 40px;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .v2-marquee-item::after {
    content: "•";
    font-size: 20px;
  }

  @keyframes v2-marquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  /* Stats Bar Glassmorphism */
  #page-neden .m-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 40px;
    background: var(--v2-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--v2-glass-border);
    border-radius: 20px;
    margin: 80px 5% 40px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  #page-neden .m-stat-item {
    text-align: center;
    position: relative;
  }

  #page-neden .m-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--v2-glass-border);
  }

  #page-neden .m-stat-item h3 {
    font-size: 48px;
    font-weight: 900;
    color: var(--v2-text);
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  }

  #page-neden .m-stat-item p {
    font-size: 15px;
    color: var(--v2-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Advantages - Glow Cards */
  #page-neden .neden-cards {
    padding: 60px 5% 100px;
  }

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

  #page-neden .neden-card {
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-gold);
    border-radius: 16px;
    padding: 40px 30px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 0 15px var(--v2-gold-glow);
  }

  #page-neden .neden-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, var(--v2-gold-glow), transparent 60%);
    opacity: 1;
    transition: opacity 0.4s ease;
  }

  #page-neden .neden-card:hover {
    transform: none;
    border-color: var(--v2-glass-border);
    box-shadow: none;
  }

  #page-neden .neden-card:hover::before {
    opacity: 0;
  }

  #page-neden .neden-card-num {
    font-size: 72px;
    font-weight: 900;
    color: rgba(53, 196, 230, 0.1);
    -webkit-text-stroke: 1px var(--v2-gold);
    position: absolute;
    top: 20px;
    right: 20px;
    transition: all 0.4s ease;
    line-height: 1;
  }

  #page-neden .neden-card:hover .neden-card-num {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05);
    color: transparent;
  }

  #page-neden .neden-card-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--v2-text);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }

  #page-neden .neden-card-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--v2-text-muted);
    position: relative;
    z-index: 1;
  }

  /* Process Section */
  #page-neden .m-process-section {
    padding: 100px 5%;
    background: #fdfdfd;
    text-align: center;
    border-top: 1px solid var(--v2-glass-border);
  }

  #page-neden .m-process-section .tag {
    background: var(--v2-glass);
    color: var(--v2-gold);
    border: 1px solid var(--v2-gold-glow);
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  #page-neden .m-process-section h2 {
    font-size: 42px;
    font-weight: 900;
    color: var(--v2-text);
    margin-bottom: 60px;
  }

  #page-neden .m-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
  }

  #page-neden .m-process-grid::before {
    content: '';
    position: absolute;
    top: 45px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--v2-glass-border);
    z-index: 1;
  }

  #page-neden .m-process-step {
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }

  #page-neden .m-step-icon {
    width: 90px;
    height: 90px;
    background: var(--v2-card-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 28px;
    font-weight: 900;
    color: var(--v2-gold);
    border: 2px solid var(--v2-gold);
    box-shadow: 0 0 0 6px rgba(53, 196, 230, 0.1);
    transition: all 0.4s ease;
    position: relative;
  }

  #page-neden .m-step-icon::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 1px solid var(--v2-gold);
    opacity: 0;
    animation: v2-pulse 2s infinite;
  }

  @keyframes v2-pulse {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }

    100% {
      transform: scale(1.3);
      opacity: 0;
    }
  }

  #page-neden .m-process-step:hover .m-step-icon {
    background: var(--v2-gold);
    color: var(--v2-darker);
    box-shadow: 0 0 20px var(--v2-gold-glow);
  }

  #page-neden .m-process-step h4 {
    font-size: 20px;
    font-weight: 800;
    color: var(--v2-text);
    margin-bottom: 12px;
  }

  #page-neden .m-process-step p {
    font-size: 14px;
    color: var(--v2-text-muted);
    line-height: 1.6;
  }

  /* Responsive */
  @media (max-width: 1024px) {
    #page-neden .m-neden-intro {
      flex-direction: column;
      text-align: center;
      padding-top: 120px;
    }

    #page-neden .m-neden-intro-content p {
      margin: 0 auto 40px;
    }

    #page-neden .m-neden-badge {
      left: 50%;
      transform: translateX(-50%);
      bottom: -30px;
      width: 80%;
    }

    #page-neden .m-stats-bar {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      margin-top: 100px;
    }

    #page-neden .m-stat-item:not(:last-child)::after {
      display: none;
    }

    #page-neden .neden-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    #page-neden .m-process-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
    }

    #page-neden .m-process-grid::before {
      display: none;
    }
  }

  @media (max-width: 600px) {
    #page-neden .m-neden-intro-content h1 {
      font-size: 40px;
    }

    #page-neden .neden-grid {
      grid-template-columns: 1fr;
    }

    #page-neden .m-stats-bar {
      grid-template-columns: 1fr;
    }

    #page-neden .m-process-grid {
      grid-template-columns: 1fr;
    }
  }

  .merch-page-content {
    padding: 60px 56px;
    background: var(--white);
  }

  .merch-page-content.bg-light {
    background: var(--gray-light);
  }

  .m-section-header {
    margin-bottom: 48px;
    max-width: 800px;
  }

  .m-section-header .tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }

  .m-section-header .tag::before {
    content: '';
    width: 16px;
    height: 2px;
    background: var(--accent-dark);
    display: inline-block;
  }

  .m-section-header h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--black);
  }

  .m-intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
  }

  .m-intro-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
  }

  .m-intro-quote {
    background: var(--gray-light);
    padding: 40px;
    border-radius: 12px;
    border-left: 4px solid var(--accent);
  }

  .m-intro-quote p {
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .m-intro-quote small {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    display: block;
  }

  .m-cards-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }

  .m-cards-grid .m-card {
    grid-column: span 3;
  }

  #page-merchandising .m-cards-grid .m-card:nth-child(n+5) {
    grid-column: span 4;
  }

  /* Promotör, Outsource ve Tanıtım sayfalarındaki 5 kart için: ilk 4 (span 3), son 1 (span 4 ve ortalı) */
  #page-promotor .m-cards-grid .m-card:nth-child(5),
  #page-outsource .m-cards-grid .m-card:nth-child(5),
  #page-tanitim .m-cards-grid .m-card:nth-child(5) {
    grid-column: 5 / span 4;
  }

  /* Saha Etkinlikleri, Tedarik ve Yazılım sayfalarındaki 6 kart için: ilk 4 (span 3), son 2 (span 3 ve ortalı) */
  #page-etkinlik .m-cards-grid .m-card:nth-child(5),
  #page-tedarik .m-cards-grid .m-card:nth-child(5),
  #page-yazilim .m-cards-grid .m-card:nth-child(5) {
    grid-column: 4 / span 3;
  }

  #page-etkinlik .m-cards-grid .m-card:nth-child(6),
  #page-tedarik .m-cards-grid .m-card:nth-child(6),
  #page-yazilim .m-cards-grid .m-card:nth-child(6) {
    grid-column: 7 / span 3;
  }

  /* Outsource sayfasındaki "Kimler İçin Uygundur" (7 kart) için: ilk 4 (span 3), son 3 (span 4) */
  #page-outsource .m-types-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }

  #page-outsource .m-types-grid .m-type-card {
    grid-column: span 3;
  }

  #page-outsource .m-types-grid .m-type-card:nth-child(n+5) {
    grid-column: span 4;
  }

  /* Tedarik sayfasındaki "Neden Dış Tedarik" (5 kart) için: ilk 3 (span 4), son 2 (span 4 ve ortalı) */
  #page-tedarik .m-types-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }

  #page-tedarik .m-types-grid .m-type-card {
    grid-column: span 4;
  }

  #page-tedarik .m-types-grid .m-type-card:nth-child(4) {
    grid-column: 3 / span 4;
  }

  /* Yazılım sayfasındaki "Teknolojik Çözümler" (8 kart) için: 4 usstte 4 altta */
  #page-yazilim .m-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  @media (max-width: 1024px) {

    .m-cards-grid .m-card,
    #page-merchandising .m-cards-grid .m-card:nth-child(n+5),
    #page-promotor .m-cards-grid .m-card:nth-child(5),
    #page-outsource .m-cards-grid .m-card:nth-child(5),
    #page-tanitim .m-cards-grid .m-card:nth-child(5),
    #page-etkinlik .m-cards-grid .m-card:nth-child(5),
    #page-etkinlik .m-cards-grid .m-card:nth-child(6),
    #page-tedarik .m-cards-grid .m-card:nth-child(5),
    #page-tedarik .m-cards-grid .m-card:nth-child(6),
    #page-yazilim .m-cards-grid .m-card:nth-child(5),
    #page-yazilim .m-cards-grid .m-card:nth-child(6),
    #page-outsource .m-types-grid .m-type-card,
    #page-outsource .m-types-grid .m-type-card:nth-child(n+5),
    #page-tedarik .m-types-grid .m-type-card,
    #page-tedarik .m-types-grid .m-type-card:nth-child(4) {
      grid-column: span 6;
    }

    #page-yazilim .m-types-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {

    .m-cards-grid .m-card,
    #page-merchandising .m-cards-grid .m-card:nth-child(n+5),
    #page-promotor .m-cards-grid .m-card:nth-child(5),
    #page-outsource .m-cards-grid .m-card:nth-child(5),
    #page-tanitim .m-cards-grid .m-card:nth-child(5),
    #page-etkinlik .m-cards-grid .m-card:nth-child(5),
    #page-etkinlik .m-cards-grid .m-card:nth-child(6),
    #page-tedarik .m-cards-grid .m-card:nth-child(5),
    #page-tedarik .m-cards-grid .m-card:nth-child(6),
    #page-yazilim .m-cards-grid .m-card:nth-child(5),
    #page-yazilim .m-cards-grid .m-card:nth-child(6),
    #page-outsource .m-types-grid .m-type-card,
    #page-outsource .m-types-grid .m-type-card:nth-child(n+5),
    #page-tedarik .m-types-grid .m-type-card,
    #page-tedarik .m-types-grid .m-type-card:nth-child(4) {
      grid-column: span 12;
    }

    #page-yazilim .m-types-grid {
      grid-template-columns: 1fr;
    }
  }

  .m-card {
    background: var(--white);
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--gray-mid);
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
    overflow: hidden;
  }

  .m-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
  }

  .m-card-num {
    font-family: 'DM Sans', sans-serif;
    font-size: 80px;
    font-weight: 900;
    color: var(--gray-light);
    line-height: 1;
    position: absolute;
    top: -10px;
    right: -10px;
    opacity: 0.5;
    z-index: 0;
  }

  .m-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .m-card h3 span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .m-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
  }

  .m-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .m-type-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--gray-mid);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s;
  }

  .m-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  }

  .m-type-header {
    background: var(--black);
    color: var(--white);
    padding: 32px 24px;
    text-align: center;
    position: relative;
  }

  .m-type-header.accent {
    background: var(--accent-dark);
  }

  .m-type-header h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--white);
  }

  .m-type-header span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
  }

  .m-type-body {
    padding: 32px;
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    flex: 1;
  }

  .m-benefit-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .m-benefit-item {
    display: flex;
    gap: 24px;
    background: var(--white);
    padding: 28px;
    border-radius: 12px;
    border-left: 4px solid var(--gray-mid);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  }

  .m-benefit-item:nth-child(7) {
    grid-column: 1 / -1;
  }

  .m-benefit-item:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  }

  .m-benefit-num {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: var(--accent);
    margin-top: -4px;
  }

  .m-benefit-content h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 8px;
  }

  .m-benefit-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0;
  }
  .degerler-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .degerler-left {
    background: var(--white);
    border-radius: 12px;
    padding: 48px 44px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .degerler-intro {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-mid);
  }

  .deger-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--gray-mid);
  }

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

  .deger-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--yellow-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .deger-name::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--yellow);
    border-radius: 2px;
  }

  .deger-desc {
    font-size: 14px;
    line-height: 1.75;
    color: #555;
  }

  .degerler-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 88px;
  }

  .deger-stat-card {
    background: var(--white);
    border-radius: 12px;
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s;
  }

  .deger-stat-card:hover {
    transform: translateY(-2px);
  }

  .deger-stat-num {
    font-size: 60px;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--yellow-dark);
    margin-bottom: 8px;
  }

  .deger-stat-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--black);
    text-transform: uppercase;
  }

  .deger-visual-photo {
    width: 100%;
    aspect-ratio: 960 / 537;
    /* Kullanıcının belirttiği 960x537 ölçüsü */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    background: var(--gray-light);
  }

  .deger-visual-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }

  .deger-visual-photo:hover img {
    transform: scale(1.05);
  }

  .deger-visual {
    background: linear-gradient(135deg, #e5f6fb 0%, #b8e0ec 100%);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: var(--yellow-dark);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .deger-visual svg {
    width: 80px;
    height: 80px;
    opacity: 0.6;
  }
  .blog-detail-hero {
    position: relative;
    width: 100%;
    height: 450px;
    background-color: var(--gray-mid);
    background-size: cover;
    background-position: center;
    margin-top: 68px;
    /* For fixed nav */
  }

  .blog-detail-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
  }

  .blog-detail-container {
    max-width: 900px;
    margin: -100px auto 80px;
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 56px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
  }

  .blog-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
  }

  .blog-detail-meta .blog-card-category {
    color: #5245fb;
    font-weight: 700;
  }

  .blog-detail-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 40px;
    letter-spacing: -0.5px;
  }

  .blog-detail-body p {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 24px;
  }

  .blog-detail-body h4 {
    font-size: 24px;
    font-weight: 800;
    margin-top: 48px;
    margin-bottom: 20px;
    color: var(--black);
  }

  .blog-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #666;
    text-decoration: none;
    margin-bottom: 32px;
    cursor: pointer;
    transition: 0.2s;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .blog-detail-back:hover {
    color: var(--yellow-dark);
  }

  .blog-detail-body .blog-tags {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .blog-detail-body .blog-tag {
    font-size: 13px;
    color: #555;
    background: #f5f5f5;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
  }

  .ceo-hero {
    padding: 80px 56px 60px;
    background: linear-gradient(135deg, #1e2d3d 0%, #2a3f5c 100%);
    color: var(--white);
    margin-top: 68px;
    text-align: center;
  }

  .ceo-hero .corp-subtitle {
    color: var(--yellow);
  }

  .ceo-hero h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 20px;
  }

  .ceo-hero h1 em {
    font-style: normal;
    color: var(--yellow);
  }

  .ceo-hero p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 640px;
    margin: 0 auto;
  }

  .ceo-section {
    padding: 80px 56px;
    background: var(--gray-light);
  }

  .ceo-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
  }

  .ceo-card {
    background: var(--white);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 88px;
  }

  .ceo-avatar {
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yellow-dark) 0%, var(--yellow) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 44px;
    font-weight: 800;
  }

  .ceo-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 6px;
  }

  .ceo-title-role {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--yellow-dark);
    text-transform: uppercase;
  }

  .ceo-signature {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-mid);
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-weight: 600;
    color: #666;
    font-size: 14px;
  }

  .ceo-content {
    background: var(--white);
    border-radius: 12px;
    padding: 48px 56px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .ceo-content h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--black);
    margin-top: 32px;
    margin-bottom: 14px;
    line-height: 1.3;
  }

  .ceo-content h3:first-child {
    margin-top: 0;
  }

  .ceo-content p {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 18px;
  }

  .ceo-content .ceo-quote {
    background: var(--gray-light);
    border-left: 4px solid var(--yellow);
    padding: 20px 28px;
    margin: 28px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--black);
    font-style: italic;
    line-height: 1.6;
    border-radius: 0 8px 8px 0;
  }

  .ceo-big-quote {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 180px;
    line-height: 0.85;
    color: var(--yellow-dark);
    opacity: 0.95;
    display: block;
    height: 90px;
    margin: 0 0 -10px -8px;
    font-weight: 700;
    user-select: none;
    font-style: italic;
  }
  .blog-hero {
    padding: 80px 56px 56px;
    background: var(--gray-light);
    margin-top: 68px;
    text-align: center;
  }

  .blog-hero h1 {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--black);
    margin-bottom: 16px;
  }

  .blog-hero p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    max-width: 1000px;
    margin: 0 auto;
  }

  .blog-list {
    padding: 64px 56px 80px;
    background: var(--white);
  }

  .blog-list-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 32px;
  }

  .blog-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  }

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

  .blog-card-img {
    width: 100%;
    height: 220px;
    background-color: var(--gray-mid);
    background-size: cover;
    background-position: center;
  }

  .blog-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .blog-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #888;
    margin-bottom: 16px;
    text-transform: uppercase;
    font-weight: 600;
  }

  .blog-card-category {
    color: #35c4e6;
    font-weight: 700;
  }

  .blog-card-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--black);
    margin: 0;
  }

  .blog-card-body {
    display: none;
  }