/* ==========================================================================
   AK SLICE TRANSITION - CUSTOM STYLES
   ========================================================================== */
.ak-slice-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    /* Highest priority during transition */
    pointer-events: none;
    display: none;
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Shown state handled by JS */
.ak-slice-overlay.active {
    display: flex;
}

.ak-slice-bar {
    position: absolute;
    top: 0;
    overflow: hidden;
    height: 100%;
    z-index: 1;
    will-change: transform, opacity;
}

.ak-slice-inner {
    position: absolute;
    top: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
}

/* Structural Fix: Ensure background covers full slider height on all devices */
.hero-inner {
    height: 100% !important;
    min-height: 100% !important;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.hero-inner .th-hero-bg {
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1;
    background-size: cover !important;
    background-position: center center !important;
}

/* Mobile optimization handled via JS quantity, but basic responsive reset here if needed */
/* Fix for mobile white gap and ghosting */
@media (max-width: 768px) {
    .ak-slice-overlay {
        z-index: 25;
    }

    .hero-inner {
        min-height: 100vh !important;
        /* Force full viewport on certain mobile browsers */
    }

    .th-hero-bg {
        background-attachment: scroll !important;
        /* Fixed breaks logic */
    }
}



/* ==========================================================================
   GRUP ŞİRKETLERİMİZ - Konsept 4 (entegre, #gsk altında kapsüllü)
   ========================================================================== */
.gsk-section { position: relative; background: #ffffff; }
.gsk-frame { position: relative; width: 100%; aspect-ratio: 1680 / 775; overflow: hidden; }

#gsk {
    --navy: #0e1b38; --navy-soft: #3a4866; --blue: #2f7df0;
    --blue-deep: #1a63dd; --blue-light: #62a0f8; --muted: #7e8caa;
    position: absolute; top: 0; left: 0; width: 1680px; height: 775px;
    transform-origin: top left;
    font-family: var(--body-font), "DM Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
}
#gsk * { box-sizing: border-box; }

#gsk .scene { position: absolute; inset: 0; overflow: hidden;
    background: #ffffff; }
#gsk .grain { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

#gsk .dome { position: absolute; top: -880px; left: 50%; transform: translateX(-50%); width: 1780px; height: 1780px; border-radius: 50%; border: 1.5px solid rgba(120, 150, 200, 0.28); }
#gsk .dome.d2 { width: 2080px; height: 2080px; top: -1040px; border-color: rgba(150, 170, 210, 0.09); }
#gsk .corner-blob { position: absolute; border-radius: 50%; }
#gsk .cb-tr { top: -150px; right: -170px; width: 560px; height: 560px; background: radial-gradient(circle at 45% 45%, rgba(180, 205, 250, 0.32), rgba(228, 234, 246, 0) 70%); filter: blur(8px); }
#gsk .cb-bl { bottom: -220px; left: -190px; width: 600px; height: 600px; background: radial-gradient(circle at 50% 50%, rgba(190, 210, 250, 0.28), rgba(228, 234, 246, 0) 70%); filter: blur(10px); }
#gsk .dots { position: absolute; background-image: radial-gradient(rgba(120, 140, 180, 0.40) 1.6px, transparent 1.6px); background-size: 18px 18px; }
#gsk .dots-l { top: 54px; left: 92px; width: 140px; height: 96px; }
#gsk .dots-r { top: 118px; right: 104px; width: 140px; height: 96px; opacity: .7; }
#gsk .spark { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.95); }

#gsk .header { position: absolute; top: 48px; left: 0; right: 0; text-align: center; z-index: 4; }
#gsk .header .sub-title { padding-left: 0; margin-bottom: 6px; font-family: var(--title-font); }
#gsk .header .sec-title { margin: 0; font-family: var(--title-font); }
#gsk .subtitle { margin-top: 16px; font-size: 20px; color: var(--navy-soft); font-weight: 500; }
#gsk .title-underline { width: 100px; height: 5px; margin: 18px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 100%); box-shadow: 0 6px 14px -3px rgba(47, 125, 240, 0.55); }

#gsk .connectors { position: absolute; left: 0; top: 0; width: 1680px; height: 775px; z-index: 2; pointer-events: none; }
#gsk .node-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(110, 150, 220, 0.16); left: 840px; top: 155px; transform: translate(-50%, -50%); }
#gsk .nr1 { width: 236px; height: 236px; }
#gsk .nr2 { width: 330px; height: 330px; border-color: rgba(110, 150, 220, 0.10); }
#gsk .nr3 { width: 440px; height: 440px; border-color: rgba(110, 150, 220, 0.06); }
#gsk .pulse { position: absolute; left: 840px; top: 155px; width: 160px; height: 160px; border-radius: 50%; border: 2px solid rgba(47, 125, 240, 0.45); transform: translate(-50%, -50%) scale(1); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    #gsk .pulse { animation: gskpulse 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
    #gsk .p2 { animation-delay: 1.2s; }
    #gsk .p3 { animation-delay: 2.4s; }
    #gsk .node { animation: gskfloat 5s ease-in-out infinite; }
}
@keyframes gskpulse { 0% { transform: translate(-50%, -50%) scale(.95); opacity: .55; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } }
@keyframes gskfloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -7px; } }

#gsk .cards { position: absolute; top: 60px; left: 56px; width: 1568px; display: flex; z-index: 3; }
#gsk .gap-s { width: 48px; flex: none; }
#gsk .gap-m { width: 232px; flex: none; }
#gsk .arch { position: relative; width: 310px; height: 477px; flex: none; border-radius: 155px 155px 46px 46px; background: linear-gradient(168deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 251, 255, 0.8) 55%, rgba(255, 255, 255, 0.7) 100%); box-shadow: 0 2px 4px rgba(40, 60, 110, 0.05), 0 18px 34px -16px rgba(50, 75, 135, 0.32), 0 52px 80px -38px rgba(45, 70, 135, 0.52), inset 0 1px 1px rgba(255, 255, 255, 1); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); display: flex; flex-direction: column; align-items: center; padding: 42px 28px 36px; transition: transform .42s cubic-bezier(.2, .8, .25, 1), box-shadow .42s ease; }
#gsk .arch::before { content: ""; position: absolute; inset: 0; border-radius: 155px 155px 46px 46px; padding: 1px; pointer-events: none; background: linear-gradient(168deg, rgba(255, 255, 255, 1), rgba(160, 195, 250, 0.45) 42%, rgba(255, 255, 255, 0.15) 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
#gsk .arch:hover { transform: translateY(-12px); box-shadow: 0 4px 8px rgba(40, 60, 110, 0.08), 0 28px 42px -18px rgba(45, 75, 150, 0.4), 0 70px 100px -40px rgba(40, 70, 150, 0.58), inset 0 1px 1px rgba(255, 255, 255, 1); }
#gsk .logo-ring { position: relative; width: 197px; height: 197px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 9px rgba(255, 255, 255, 0.42), 0 0 0 10px rgba(140, 165, 210, 0.16), 0 18px 32px -16px rgba(60, 90, 150, 0.5); }
#gsk .logo-ring::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 2px; pointer-events: none; background: conic-gradient(from 210deg, rgba(47, 125, 240, 0), rgba(47, 125, 240, 0.5), rgba(98, 160, 248, 0) 60%, rgba(47, 125, 240, 0)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: transform .9s ease; }
#gsk .arch:hover .logo-ring::before { transform: rotate(130deg); }
#gsk .logo-disc { position: relative; width: 175px; height: 175px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 36% 28%, #ffffff 0%, #f1f5fc 60%, #e7eef8 100%); box-shadow: inset 0 2px 5px rgba(255, 255, 255, 1), inset 0 -9px 18px rgba(150, 168, 205, 0.22); display: flex; align-items: center; justify-content: center; }
#gsk .logo-disc::after { content: ""; position: absolute; top: 7px; left: 20%; width: 60%; height: 32%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
#gsk .logo-disc img { width: 165%; height: 165%; object-fit: contain; position: relative; z-index: 1; }
#gsk .arch h3 { font-size: 26px; font-weight: 800; color: var(--navy); margin-top: 28px; letter-spacing: -.5px; white-space: nowrap; }
#gsk .arch p { font-size: 15px; line-height: 1.64; color: var(--muted); text-align: center; margin-top: 14px; font-weight: 400; max-width: 248px; }
#gsk .incele { margin-top: auto; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 11px; padding: 19px 24px 19px 36px; border-radius: 27px; text-decoration: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 18px; color: var(--navy); border: 1.5px solid rgba(47, 125, 240, 0.4); background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9); transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
#gsk .incele .txt, #gsk .incele .arrow { position: relative; z-index: 1; }
#gsk .incele .arrow { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(47, 125, 240, 0.14); color: var(--blue); transition: background .3s ease, color .3s ease, transform .3s ease; }
#gsk .incele .arrow svg { width: 15px; height: 15px; }
#gsk .incele::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 27px; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); transform: translateX(-101%); transition: transform .42s cubic-bezier(.2, .8, .25, 1); }
#gsk .incele:hover { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(47, 125, 240, 0.7); }
#gsk .incele:hover::before { transform: translateX(0); }
#gsk .incele:hover .arrow { background: rgba(255, 255, 255, 0.24); color: #fff; transform: translateX(4px); }
#gsk .node { position: absolute; left: 840px; top: 155px; transform: translate(-50%, -50%); width: 148px; height: 148px; border-radius: 50%; z-index: 5; background: radial-gradient(circle at 36% 30%, #84baff 0%, #2f7df0 48%, #1655c4 100%); box-shadow: 0 26px 52px -10px rgba(47, 125, 240, 0.72), 0 0 0 12px rgba(255, 255, 255, 0.5), inset 0 4px 9px rgba(255, 255, 255, 0.55), inset 0 -14px 26px rgba(16, 52, 130, 0.55); display: flex; align-items: center; justify-content: center; }
#gsk .node svg { width: 60px; height: 60px; color: #fff; }
#gsk .feature-bar { position: absolute; left: 56px; right: 56px; bottom: 35px; height: 188px; z-index: 4; border-radius: 34px; display: flex; align-items: center; background: linear-gradient(168deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 251, 255, 0.56) 100%); box-shadow: 0 20px 44px -22px rgba(50, 75, 135, 0.45), inset 0 1px 1px rgba(255, 255, 255, 1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#gsk .feature-bar::before { content: ""; position: absolute; inset: 0; border-radius: 34px; padding: 1px; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, 1), rgba(160, 195, 250, 0.4) 50%, rgba(255, 255, 255, 0.15)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
#gsk .feature { flex: 1; display: flex; align-items: center; gap: 20px; padding-left: 58px; position: relative; }
#gsk .feature + .feature::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 66px; background: linear-gradient(180deg, transparent, rgba(150, 170, 210, 0.3), transparent); }
#gsk .feat-icon { width: 64px; height: 64px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: var(--blue); background: radial-gradient(circle at 38% 30%, #ffffff, #eef3fb); box-shadow: 0 12px 20px -10px rgba(60, 90, 150, 0.5), inset 0 2px 4px rgba(255, 255, 255, 1), inset 0 -7px 13px rgba(150, 168, 205, 0.22), 0 0 0 1px rgba(150, 170, 210, 0.12); }
#gsk .feat-icon svg { width: 29px; height: 29px; }
#gsk .feat-title { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: 1.5px; }
#gsk .feat-sub { font-size: 14px; color: var(--muted); margin-top: 3px; font-weight: 400; }

/* ---- Responsive: tablet/mobil akışkan düzen (sabit sahne yerine) ---- */
@media (max-width: 1199px) {
    .gsk-frame { aspect-ratio: auto; height: auto; overflow: visible; }
    #gsk { position: static; width: 100%; height: auto; transform: none !important; padding: 0; }
    #gsk .scene { position: static; overflow: visible; padding: 10px 0; }
    #gsk .dome, #gsk .corner-blob, #gsk .dots, #gsk .spark,
    #gsk .connectors, #gsk .node-ring, #gsk .pulse, #gsk .node, #gsk .grain { display: none; }
    #gsk .header { position: static; margin: 0 0 36px; }
    #gsk .cards { position: static; width: 100%; flex-wrap: wrap; justify-content: center; gap: 28px; }
    #gsk .gap-s, #gsk .gap-m { display: none; }
    #gsk .arch { width: calc(50% - 14px); max-width: 360px; height: auto; }
    #gsk .feature-bar { position: static; left: auto; right: auto; bottom: auto; height: auto; flex-wrap: wrap; margin: 40px auto 0; max-width: 760px; padding: 22px 30px; }
    #gsk .feature { flex: 1 1 45%; padding-left: 0; justify-content: center; }
    #gsk .feature + .feature::before { display: none; }
}

@media (max-width: 575px) {
    #gsk .cards { flex-direction: column; align-items: center; }
    #gsk .arch { width: 100%; max-width: 340px; }
    #gsk .arch h3 { white-space: normal; }
    #gsk .feature { flex: 1 1 100%; }
}

/* KURUMSAL etiketindeki dekoratif ::before yazıya binmesin */
#gsk .header .sub-title::before { display: none; }

/* Header: tek satırda kalsın - tam genişlik + küçük logo + sıkı menü (taşmasın) */
@media (min-width: 1200px) {
  .th-header .container { max-width: 100%; padding-left: 2vw; padding-right: 2vw; }
  .th-header .menu-area .row { flex-wrap: nowrap; }
  .header-layout2 .header-logo img, .th-header .header-logo img { max-height: 56px; width: auto; }
  .main-menu.style2 > ul > li > a { padding: 5.5px 11px; font-size: 15px; }
}

/* Konsept-4 kirpma sonrasi: ust dekorlari gizle, logo/buton ayar */
#gsk .dots { display: none; }
#gsk .arch p { min-height: 74px; }


/* Haberler - sağdaki iki kart (style2) büyük görseller yüzünden büyümüştü; kompaktlaştır */
.blog-grid.style2 { padding: 16px; }
.blog-grid.style2 .blog-img { flex: 0 0 200px; width: 200px; min-width: 0; height: auto; align-self: stretch; }
.blog-grid.style2 .box-content { flex: 1 1 auto; min-width: 0; }
.blog-grid.style2 .box-title { font-size: 19px !important; line-height: 1.4 !important; }
.blog-grid.style2 .blog-img img { object-position: center; }
.blog-grid.style2 .box-title { font-size: 19px; line-height: 1.4; }
.blog-grid.style2 .box-text { font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
.blog-grid.style2 .blog-meta { margin-bottom: 8px; }
@media (max-width: 1399px) {
  .blog-grid.style2 .blog-img { height: 170px; }
}

/* Sadece Odak Enerji logosu büyütüldü (diğerleri değişmez) */
#gsk .logo-disc img[src*="odak_enerji"] { width: 165%; height: 165%; }


/* gsk bölümü altındaki fazla boş alanı azalt */
.gsk-section { padding-bottom: 24px; }

/* Köşe blob ve halkalar çerçevede kare gibi kesiliyordu - gizle (temiz beyaz arka plan) */
#gsk .corner-blob, #gsk .dome { display: none; }

/* gsk başlık yazıları (kart isimleri + özellik başlıkları) site başlık fontuyla aynı */
#gsk .arch h3, #gsk .feat-title { font-family: var(--title-font); font-weight: 700; }
#gsk .arch p, #gsk .feat-sub { font-family: var(--body-font); }

/* Haberler: sağdaki iki kart birbiriyle eşit yükseklik (ve sol kartla dengeli) */
@media (min-width: 1200px) {
  #blog-sec .row.gy-30 > div:last-child { display: flex; flex-direction: column; }
  #blog-sec .row.gy-30 > div:last-child .blog-grid.style2 { flex: 1 1 0; align-items: center; }
}

/* Footer: kart opak + ÜSTTEN küçült (alt dekora/JS'e dokunmadan) */
.footer-island-inner { background: #eef6fd !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; gap: 24px !important; padding-top: 6px !important; }
.headline h2 { font-size: clamp(1.45rem, 2.4vw, 2.1rem) !important; letter-spacing: -0.5px; }
.newsletter-bento h3 { font-size: 1.25rem; }
.newsletter-bento p { font-size: 0.92rem; margin-bottom: 16px; }


/* ===== Site geneli ölçeği biraz düşürüldü (içerik/işlevsellik bozulmadan) ===== */
/* Footer kepçe/toz animasyonu getBoundingClientRect kullandığı için footer'ı ters-zoom ile net %100 tutuyoruz */
body { zoom: 0.92; }
.footer-area { zoom: 1.087; }


/* ===== "Neden Bizi Seçmelisiniz" — kepçe görseli hover'da zoom yapmasın ===== */
.choose-image.global-img:hover img,
.choose-image2.global-img:hover img {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}


/* ============================================================
   REFERANSLAR — Animasyonlu Tünel + Logo Şeridi
   ============================================================ */
.ak-ref {
    position: relative;
    overflow: hidden;
    padding: 80px 0 0;
    min-height: 770px;
    isolation: isolate;
}

/* Arka plan tünel görseli (kullanıcı ekleyecek) + yavaş zoom animasyonu */
.ak-ref-bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/references/referans.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -3;
    /* STATİK tam ekran: büyüme yok, kalite bozulmaz */
    background-color: #e4eaf3;
}

/* Not: glow/speed katmanları kaldırıldı — referans arka planı (referans.webp)
   ışığı ve hız çizgilerini zaten içeriyor; üstüne ekleme yapılmıyor. */

.ak-ref-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ---- Başlık ---- */
.ak-ref-head {
    text-align: center;
    margin: 0 auto;
    max-width: 820px;
}

.ak-ref-sub {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--title-font, 'Anek Latin', sans-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #0a1c38;
    margin-bottom: 14px;
}

.ak-ref-sub i { color: #2f6bff; font-size: 19px; }

.ak-ref-title {
    font-family: var(--title-font, 'Anek Latin', sans-serif);
    font-weight: 700;
    font-size: clamp(2.6rem, 5.2vw, 4.6rem);
    line-height: 1.02;
    margin: 0 0 18px;
    color: #0a1c38;
    letter-spacing: -1px;
}

.ak-ref-title span { color: #2f6bff; }

.ak-ref-line {
    display: block;
    width: 84px;
    height: 4px;
    border-radius: 4px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, #2f6bff, #6aa3ff);
}

.ak-ref-desc {
    font-family: var(--body-font, 'DM Sans', sans-serif);
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.65;
    color: #33425c;
    margin: 0;
}

.ak-ref-desc span { color: #2f6bff; font-weight: 600; }

/* ---- Logo şeridi ---- */
.ak-ref-slider {
    position: absolute;
    left: 50%;
    right: auto;
    top: 68%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1720px;
    padding: 0 72px;
    z-index: 4;
}

.ak-ref-swiper {
    overflow: hidden;
    width: 100%;
    /* Beam gibi çapraz: sol-üstten (ışık) sağ-alta doğru eğim */
    transform: rotate(4deg);
    transform-origin: center center;
    /* Soldan (ışık tarafı) belirip sağa doğru akma hissi: uçlarda erime */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 92%, transparent 100%);
}

.ak-ref-swiper .swiper-slide {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ak-ref-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    transform-origin: center center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

.ak-ref-logo img {
    max-width: 90%;
    max-height: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.32));
}

/* ---- Ok butonları ---- */
.ak-ref-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #2f6bff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 6px 18px rgba(10, 28, 56, 0.18);
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.ak-ref-nav:hover {
    background: #2f6bff;
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.ak-ref-nav.prev { left: 6px; }
.ak-ref-nav.next { right: 6px; }
.ak-ref-nav.swiper-button-disabled { opacity: 0.4; cursor: default; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .ak-ref { min-height: 0; padding: 56px 0 44px; }
    .ak-ref-head { margin-bottom: 34px; }
    .ak-ref-slider {
        position: static;
        transform: none;
        padding: 0 54px;
    }
    .ak-ref-swiper { transform: none; }
    .ak-ref-swiper .swiper-slide { height: 130px; }
}

@media (max-width: 575px) {
    .ak-ref-slider { padding: 0 46px; }
    .ak-ref-nav { width: 38px; height: 38px; font-size: 14px; }
    .ak-ref-logo img { max-height: 42px; }
}


/* ============================================================
   GENİŞ EKRAN: tam-genişlik bölümlerin İÇERİĞİ yayılmasın
   (arka planlar tam genişlik kalır, içerik 1720px'de ortalanır —
    tema .container ile aynı max genişlik)
   ============================================================ */

/* Projelerimiz — full-bleed proje slider'ı */
.project-area2 .slider-area {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

/* Projelerimiz arka planı geniş ekranda ezilmesin (100% 100% -> cover) */
.project-area2 {
    background-size: cover !important;
}

/* Faaliyet Alanlarımız & Üretim Gücümüz — kolaj carousel */
.project-style1-area .auto-container {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer — cam ada içeriği */
.footer-island-inner {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   GÜÇLÜ PROJELERİMİZ — Öne çıkan proje bölümü (referans birebir)
   ========================================================================== */
.ak-proj-section {
    --ak-blue: #009ee3;
    --ak-blue-d: #0083bd;
    --ak-navy: #0e1626;
    --ak-navy-2: #16233a;
    background-color: #f4f6f9;
    position: relative;
}

/* Sitenin gerçek buton animasyonunu koru (th-btn) — sola yasla */
.ak-proj-intro .th-btn {
    align-self: flex-start;
    margin-top: 4px;
}

.ak-proj-section .container {
    max-width: 1600px;
}

/* ---- Üst bölüm: sol tanıtım + öne çıkan kart ---- */
.ak-proj-top {
    display: grid;
    grid-template-columns: 355px 1fr;
    gap: 26px;
    align-items: stretch;
}

/* ---- Sol tanıtım ---- */
.ak-proj-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 20px 10px 0;
}

.ak-proj-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ak-blue);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.ak-proj-label i {
    font-size: 17px;
}

.ak-proj-heading {
    font-size: 58px;
    line-height: 1.02;
    font-weight: 800;
    color: #0e121d;
    letter-spacing: -1px;
    margin: 0 0 26px;
}

.ak-proj-divider {
    display: block;
    width: 54px;
    height: 4px;
    border-radius: 4px;
    background: var(--ak-blue);
    margin-bottom: 30px;
}

.ak-proj-divider.light {
    margin-bottom: 24px;
}

.ak-proj-desc {
    color: #5b6472;
    font-size: 16.5px;
    line-height: 1.75;
    margin: 0 0 34px;
    max-width: 330px;
}

/* ---- Öne çıkan büyük kart ---- */
.ak-proj-featured {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 560px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;
}

.ak-proj-featured-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11,18,32,.97) 0%, rgba(11,18,32,.9) 32%, rgba(11,18,32,.35) 66%, rgba(11,18,32,0) 100%),
        linear-gradient(0deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,0) 40%);
}

.ak-proj-featured-content {
    position: relative;
    z-index: 2;
    padding: 46px 50px;
    max-width: 620px;
}

.ak-proj-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ak-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 9px 16px;
    border-radius: 9px;
    margin-bottom: 26px;
}

.ak-proj-badge i {
    font-size: 13px;
}

.ak-proj-featured-title {
    color: #fff;
    font-size: 52px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.5px;
    margin: 0 0 24px;
}

.ak-proj-featured-desc {
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.7;
    max-width: 340px;
    margin: 0 0 40px;
}

/* ---- İstatistikler ---- */
.ak-proj-stats {
    display: flex;
    gap: 0;
}

.ak-proj-stat {
    position: relative;
    padding-right: 34px;
    margin-right: 34px;
    display: flex;
    flex-direction: column;
}

.ak-proj-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(255,255,255,.18);
}

.ak-proj-stat i {
    color: var(--ak-blue);
    font-size: 24px;
    margin-bottom: 16px;
}

.ak-proj-stat-num {
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}

.ak-proj-stat-lbl {
    color: rgba(255,255,255,.6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    line-height: 1.4;
    text-transform: uppercase;
}

/* ---- Kart üzeri nav okları ---- */
.ak-proj-nav {
    position: absolute;
    right: 34px;
    bottom: 34px;
    z-index: 3;
    display: flex;
    gap: 12px;
}

.ak-proj-nav-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.ak-proj-nav-btn.prev {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
}

.ak-proj-nav-btn.next {
    background: var(--ak-blue);
    color: #fff;
}

.ak-proj-nav-btn:hover {
    transform: translateY(-2px);
}

.ak-proj-nav-btn.prev:hover {
    background: rgba(255,255,255,.22);
}

.ak-proj-nav-btn.next:hover {
    background: var(--ak-blue-d);
}

/* ---- Alt kartlar ---- */
.ak-proj-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-top: 26px;
}

.ak-proj-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(14,22,38,.08);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform .28s ease, box-shadow .28s ease;
}

.ak-proj-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px rgba(14,22,38,.14);
}

.ak-proj-card-img {
    position: relative;
    height: 185px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 16px;
}

.ak-proj-badge.sm {
    margin-bottom: 0;
    font-size: 11px;
    padding: 7px 12px;
    letter-spacing: .5px;
}

.ak-proj-badge.sm i {
    font-size: 11px;
}

.ak-proj-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
}

.ak-proj-card-title {
    font-size: 19px;
    font-weight: 700;
    color: #0e121d;
    margin: 0;
}

.ak-proj-card-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--ak-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .2s ease, transform .2s ease;
}

.ak-proj-card:hover .ak-proj-card-arrow {
    background: var(--ak-blue-d);
    transform: translateX(2px);
}

/* ---- Responsive ---- */
@media (max-width: 1399px) {
    .ak-proj-heading { font-size: 50px; }
    .ak-proj-featured-title { font-size: 44px; }
    .ak-proj-stat-num { font-size: 22px; }
}

@media (max-width: 1199px) {
    .ak-proj-top { grid-template-columns: 1fr; }
    .ak-proj-intro { padding: 0; text-align: center; align-items: center; }
    .ak-proj-desc { max-width: 480px; }
    .ak-proj-featured { min-height: 480px; }
    .ak-proj-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .ak-proj-heading { font-size: 42px; }
    .ak-proj-featured-content { padding: 34px 26px; }
    .ak-proj-featured-title { font-size: 36px; }
    .ak-proj-featured-desc { max-width: 100%; }
    .ak-proj-stats { flex-wrap: wrap; gap: 22px; }
    .ak-proj-stat { margin-right: 0; padding-right: 0; }
    .ak-proj-stat:not(:last-child)::after { display: none; }
    .ak-proj-nav { position: static; margin: 24px 26px 30px; }
    .ak-proj-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HERO GELİŞTİRMELERİ — okunabilirlik scrim'i + Ken Burns sinematik zoom
   ========================================================================== */
/* Metnin görsel üstünde her koşulda okunması için yumuşak karartma (metnin altında). */
.hero-3 .th-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8, 12, 22, 0.60) 0%, rgba(8, 12, 22, 0.30) 42%, rgba(8, 12, 22, 0) 72%),
        linear-gradient(0deg, rgba(8, 12, 22, 0.45) 0%, rgba(8, 12, 22, 0) 45%);
}

/* Metin katmanı scrim'in üstünde kalsın. */
.hero-3 .hero-inner .container {
    position: relative;
    z-index: 2;
}

/* Aktif slide arka planında yavaş, sinematik zoom (Ken Burns). */
.hero-slider-3 .swiper-slide .th-hero-bg {
    transform-origin: center center;
}
.hero-slider-3 .swiper-slide-active .th-hero-bg {
    animation: akKenBurns 9000ms ease-out both;
}
@keyframes akKenBurns {
    from { transform: scale(1.001); }
    to   { transform: scale(1.09); }
}

/* Erişilebilirlik: hareketi azalt tercihinde zoom kapalı. */
@media (prefers-reduced-motion: reduce) {
    .hero-slider-3 .swiper-slide-active .th-hero-bg { animation: none; }
}

/* ==========================================================================
   SCROLL-DOWN GÖSTERGESİ — hero altında "aşağı kaydır" ipucu
   ========================================================================== */
.hero-3 .ak-scroll-down {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    animation: akScrollFloat 2.4s ease-in-out infinite;
}
.hero-3 .ak-scroll-down:hover { opacity: 1; }

.hero-3 .ak-scroll-mouse {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 7px;
}
.hero-3 .ak-scroll-wheel {
    width: 4px;
    height: 8px;
    border-radius: 3px;
    background: #fff;
    animation: akScrollWheel 1.6s ease-in-out infinite;
}
.hero-3 .ak-scroll-txt {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

@keyframes akScrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}
@keyframes akScrollFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 991px) {
    .hero-3 .ak-scroll-down { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-3 .ak-scroll-down { animation: none; }
    .hero-3 .ak-scroll-wheel { animation: none; }
}

/* ==========================================================================
   AUTOPLAY İLERLEME GÖSTERGESİ — sağ altta, dolan segment çubukları
   ========================================================================== */
.hero-3 .ak-progress {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hero-3 .ak-progress-bar {
    position: relative;
    width: 46px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}
.hero-3 .ak-progress-bar.active { width: 68px; }
.hero-3 .ak-progress-bar:hover { background: rgba(255, 255, 255, 0.45); }

.hero-3 .ak-progress-fill {
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}
.hero-3 .ak-progress-bar.done .ak-progress-fill {
    transform: scaleX(1);
    animation: none !important;
}
@keyframes akProgressFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (max-width: 991px) {
    .hero-3 .ak-progress { right: 20px; bottom: 20px; gap: 7px; }
    .hero-3 .ak-progress-bar { width: 30px; }
    .hero-3 .ak-progress-bar.active { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-3 .ak-progress-fill { animation: none !important; }
    .hero-3 .ak-progress-bar.active .ak-progress-fill { transform: scaleX(1); }
}