/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300..800;1,300..800&family=Manrope:wght@400..800&display=swap');
/*fonts*/

/* ROOT — Smart Steps (Erasmus+ KA153) marka paleti.
   Not: --renk1..6 / --primary-blue / --gradient1-2 isimleri şablonun her yerinde kullanılıyor;
   yeni müşteri teması için isimler korunup sadece değerleri değiştirildi (bkz. SABLON-REHBERI §4). */
:root {
    --mobil-menu-bg: #f9f9f9;
    --mobil-menu-yazi: #674747;

    /* Smart Steps marka renkleri */
    --primary-blue: #0A66C2;
    --accent-blue: #00A8E8;
    --ink: #1A1A1A;
    --surface: #F5F7FA;
    --surface-2: #E9EEF5;
    --navy-deep: #0A2E5C;

    /* legacy değişken adları — yeni palete eşlendi */
    --renk1: #0A2E5C;
    --renk2: #0A66C2;
    --renk3: #00A8E8;
    --renk4: #0E7AC4;
    --renk5: #1A1A1A;
    --renk6: #F5F7FA;

    --font1: "Inter", sans-serif;
    --font2: "Manrope", sans-serif;

    --gradient1: linear-gradient(-90deg, rgba(10,102,194,1) 0%, rgba(0,168,232,1) 100%);
    --gradient2: linear-gradient(90deg, rgba(10,102,194,1) 0%, rgba(0,168,232,1) 100%);
    --gradient-mesh: radial-gradient(ellipse at top left, rgba(10,102,194,.10), transparent 55%);

    /* Premium katman token'ları — glassmorphism, gölge, radius, easing */
    --glass-light: rgba(255,255,255,0.6);
    --glass-light-strong: rgba(255,255,255,0.78);
    --glass-dark: rgba(10,46,92,0.45);
    --glass-border: rgba(255,255,255,0.35);
    --glass-border-dark: rgba(255,255,255,0.14);

    --shadow-xs: 0 2px 8px rgba(10,46,92,.06);
    --shadow-sm: 0 8px 24px rgba(10,46,92,.08);
    --shadow-md: 0 10px 10px rgba(10,46,92,.10);
    --shadow-lg: 0 30px 70px rgba(10,46,92,.18);
    --shadow-glow: 0 12px 32px rgba(10,102,194,.28);

    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-pill: 999px;

    --ease-premium: cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: .28s;
    --dur-base: .5s;
    --dur-slow: .9s;
}

/* Global gövde: düz beyaz yerine çok hafif mesh gradient + noise doku (sabit arka plan, scroll'da kaymaz) */
body {
    font-family: var(--font1);
    color: var(--ink);
    background-color: var(--surface);
    background-image:
        radial-gradient(circle at 8% 12%, rgba(0,168,232,.09), transparent 38%),
        radial-gradient(circle at 92% 8%, rgba(10,102,194,.08), transparent 42%),
        radial-gradient(circle at 85% 92%, rgba(10,46,92,.05), transparent 40%),
        radial-gradient(circle at 12% 88%, rgba(0,168,232,.06), transparent 36%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    /* background-attachment:fixed KASITLI OLARAK kullanılmıyor — çok katmanlı gradyan +
       doku ile birlikte scroll sırasında ciddi tekrar-boyama (repaint) maliyetine ve
       kasmaya yol açıyordu. Normal scroll-attachment çok daha ucuz. */
    background-attachment: scroll;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

h1, h2, h3, h4, h5, h6,
.sayfaBaslik h2, .short-title h1, .hizmet-card-title h5 {
    font-family: var(--font2);
    letter-spacing: -0.01em;
}

:focus-visible {
    outline: 2.5px solid var(--accent-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

::selection {
    background: var(--renk3);
    color: #ffffff;
}

.active5 {
    position: relative;
}

.active5:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--secondary);
    border: 3px solid #ffffff;
    border-radius: 50px;
    left: 50%;
    transform: translateX(-50%);
    top: 92%;
}




body {
    font-size: 14px;
}

body::-webkit-scrollbar-track {
    background-color: transparent
}

body::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #aaa
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #606060
}

a {
    color: var(--renk3);
}


a:hover {
    text-decoration: none;
    color: var(--renk3);
}

/* SCROLL TOP */
.scrollup {
    position: fixed;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 24px;
    width: 24px;
    bottom: 60px;
    right: 20px;
    background-color: var(--renk2);
    border: 1px solid white;
    color: white;
    font-size: 12px;
    z-index: 99;
    border-radius: 10%;
    opacity: 0;
    transform: rotate(-45deg);
    transition: 400ms;
    pointer-events: none;
}

.scrollup.aktif {
    bottom: 48px;
    opacity: 1;
    transition: 400ms;
    pointer-events: all;
}

.scrollup i {
    transform: rotate(45deg);
    transition: 400ms;
}

.scrollup:hover {
    background-color: var(--renk1);
    color: white;
    transform: scale(.9) rotate(0);
    transition: 400ms;
}

.scrollup:hover i {
    transform: rotate(0);
    transition: 400ms;
}
address p {
display: flex;
}

ul {
    list-style-type: none;
}

/* HC-OFFCANVAS */
.hc-nav-trigger {
    right: 15px;
    top: 35px;
}

.hc-nav-trigger span {
    background-color: var(--renk2);
}

.yanbasliklar {
    color: #209cd2;
}

.hc-offcanvas-nav.nav-levels-overlap .nav-content::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    right: 0;
    opacity: .4;
    background-repeat: no-repeat;
    background-position-y: bottom;
}

.hc-offcanvas-nav .nav-close-button span::after, .hc-offcanvas-nav .nav-close-button span::before {
    width: 10px;
    height: 10px;
    margin-top: -5px;
}

.hc-offcanvas-nav .nav-title + .nav-close a:not(.has-label) {
    top: 15px;
    right: 0;
}

.hc-offcanvas-nav .nav-close-button span::before {
    margin-left: -11px;
}

.fancybox__container {
    z-index: 9999;
}


/* HEADER */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9997;
    animation: fadeIn linear;
    background-color: rgba(0,0,0,0.5);
    animation-duration: 0.6s;
}



header.is-sticky {
    background: #ffffff;
    box-shadow: rgb(0 0 0 / 35%) 0 5px 15px;
    animation: fadeInDown linear;
    animation-duration: 0.6s;
}


.navbar-brand {
    position: relative;
}

.hbtlogoGizle {
    position: absolute;
    right: 0;
    top: 0;
    width: 75%;
    height: 100%;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: right center;
    transition: .5s;
}

header.is-sticky .hbtlogoGizle {
    transform: scaleX(1);
    transition-delay: .45s;
}

header.is-sticky .headerSosyal {
    display: none !important;
}

header.is-sticky .navbar-brand:hover .hbtlogoGizle {
    transform: scaleX(0);
    transition-delay: 0ms;
    transition: .5s;
}

.hizmetlerimiz-altmenu a {
    color: black;
    transition: 800ms;
    border-bottom: 1px groove slategray;
    padding-bottom: 5px;
}

.hizmetlerimiz-altmenu:hover a {
    transition: 800ms;
    padding-right: 15px;

}
.nav-link{
    color: var(--renk6);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
.is-sticky .nav-link{
    color: black;
}
.is-sticky .nav-link:hover{
    color: black;
}

.nav-link:hover::before{
    width: 100%;
    left: 0;
}
.nav-link::before{
    content: "";
    width: 0;
    transition: all .4s;
    height: 2px;
    background-color: white;
    position: absolute;
    bottom: 0;
    right: 0;
}
.nav-link:hover{
    color: var(--renk6);
}
.dropdown-menu .nav-link{
    color: black;
}

/* header sosyal medya */
.sosyalMedyaUl {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sosyalMedyaUl li:not(:last-of-type) {
    margin-right: 2px;
}

.sosyalMedyaUl li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--renk6);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 10px 5px 2px 5px;
    width: 27px;
    font-size: 14px;
    transform: translateY(-11px);
    transition: .2s ease-in-out;
}
.telefonnumaramiz a , .telefonnumaramiz i{
    color: var(--renk6) !important;
}


.headerTelefon,
.headerTelefon:hover {
    color: #b6bbbe;
}

.headerTelefonIcon {
    display: inline-block;
    min-width: 30px;
    border: 1px solid #b6bbbe;
    border-radius: 50%;
    aspect-ratio: 1/1;
    text-align: center;
    line-height: 28px;
    color: #b6bbbe;
}

/*
* FOOTER
*/


footer .footer-alt-bg {
    border-top: 8px solid var(--renk2);
    background: #fff;
    color: #fff;
    font-size: 15px;
    position: relative;
    z-index: 30;
    padding-bottom: 8px
}

.footer-alt-bg::before{
    content: "";
    width: 100%;
    height: 5px;
    background-color: white;
    position: absolute;
    top: -10px;
    left: 0;
}
.footer-alt{
    position: relative;
    padding-left: 74px;
}
.footer-alt::before{
    content: "";
    position: absolute;
    background-image: url("../img/f-icon.png");
    width: 74px;
    height: 74px;
    left: 0;
    bottom: 0;
}

footer .footer-alt-bg .footer-alt-ic {
    margin-right: auto
}

footer .footer-alt-bg p {
    padding: .8em 0 .4em;
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: #555;
    text-align: right
}

footer .footer-Link{
    transition: all .4s;
}

footer .footer-Link:hover{
    padding-left: 10px;
}

footer .footer-ust-img {
    position: absolute;
    width: 100%;
    height: 55px;
    top: -40px;
    transform: perspective(1px)
}

footer .hakanbt-logo:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -44px;
    left: -16px;
    border-style: solid;
    border-width: 0 30px 35px 30px;
    border-color: transparent transparent #fff transparent
}

footer .hakanbt-logo:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -34px;
    left: -6px;
    border-style: solid;
    border-width: 0 20px 24px 20px;
    border-color: transparent transparent var(--renk2) transparent
}

footer .hakanbt-logo {
    position: absolute;
    bottom: -14px;
    left: 15px;
    height: 35%;
    width: 100%
}

.hakanbt {
    width: 28px !important;
    height: 25px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    transition: all .5s ease-in-out .1s !important
}

.hakanbt img {
    max-width: none !important;
    user-select: none;
}

.hakanbt:hover {
    width: 125px !important
}

.dropdown-menu {
    border: 1px solid #dddddd;
    border-radius: 0;
    padding: 0;
}

.navbar .nav-item .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    margin-top: 0;
}

.navbar .dropdown-menu.fade-down {
    top: 80%;
    transform: rotateX(-75deg);
    transform-origin: 0 0;
}

.navbar .nav-item:hover .dropdown-menu {
    transition: .3s;
    opacity: 1;
    visibility: visible;
    top: 52px;
    transform: rotateX(0deg);
}

.right-menu {
    position: absolute;
    top: 0;
    left: 100%;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    margin-top: 0;
    background-color: #fff;
    list-style: none;
}
.navbar .nav-item.right:hover .right-menu {
    transition: .3s;
    opacity: 1;
    visibility: visible;
    display: block;
    pointer-events: all;
    animation-name: dropdownAnimasyon;
    animation-duration: 1s;
    animation-timing-function: ease;
}

/* .slider {
    margin-top: 110px;
} */

/* Slider */
.swiper {
    width: 100%;
}

.mySwiper {
    height: 100vh;
}


.swiper-slide {
    text-align: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sayfaBaslik{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sayfaBaslik h2 {
    text-align: center;
    display: inline-flex;
    position: relative;
    padding: 0 0 10px 0;
    justify-content: center;
    align-items: center;
    font: var(--font1);
    color: var(--renk3);
    font-size: 30px;
}
.sayfaBaslik svg{
    position: absolute;
    width: 40%;
    bottom: -10px;
}

.ortalaX {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.card {
    border-radius: 0 0 0 0;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    margin-top: 30px;
}

.card-body .btn {
    padding: 10px 40px;
}

.swiper-button-next, .swiper-button-prev {
    width: 50px !important;
    height: 50px !important;
    margin-top: -25px !important;
    background: #fff;
    border-radius: 50%;
    color: var(--primary-blue) !important;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(10,46,92,.06);
    transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium),
                background var(--dur-base) var(--ease-premium), color var(--dur-base) var(--ease-premium);
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 16px !important;
    font-weight: 900;
    transition: transform var(--dur-base) var(--ease-premium);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background: var(--gradient2);
    color: #fff !important;
    transform: scale(1.08) translateY(-1px);
    box-shadow: var(--shadow-glow);
}
.swiper-button-next:hover::after { transform: translateX(2px); }
.swiper-button-prev:hover::after { transform: translateX(-2px); }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .3;
    box-shadow: var(--shadow-xs);
}
.swiper-button-next{
    right: -10px;
}
.swiper-button-prev{
    left: -10px;
}

footer {
    background: var(--navy-deep);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(0,168,232,.16), transparent 40%),
        radial-gradient(circle at 88% 0%, rgba(10,102,194,.22), transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(0,168,232,.08), transparent 55%),
        linear-gradient(180deg, #0A2E5C 0%, #081F42 100%);
    color: white;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    padding-top: 40px;
}
footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,168,232,.55), transparent);
}
footer::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .4;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
footer > .container { position: relative; z-index: 1; }
footer > .container:first-of-type { padding-bottom: 12px; }
footer > .container:first-of-type .col-md-6 img {
    filter: drop-shadow(0 12px 34px rgba(0,168,232,.3));
    transition: transform var(--dur-slow) var(--ease-premium);
}
footer > .container:first-of-type .col-md-6 img:hover {
    transform: scale(1.04) rotate(-1deg);
}

footer a {
    color: white !important;
}

footer .navbar-brand,
footer > .container:first-of-type img[alt] {
    filter: drop-shadow(0 8px 24px rgba(0,168,232,.25));
}

.footer-list h3{
    color: #fff;
    font-family: var(--font2);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    position: relative;
    margin-bottom: 26px;
    padding-bottom: 14px;
}
.footer-list h3::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 3px;
    border-radius: 3px;
    background: var(--gradient2);
}
.footer-list i{
    margin-right: 12px;
    transition: transform var(--dur-base) var(--ease-premium), background var(--dur-base) var(--ease-premium), color var(--dur-base) var(--ease-premium);
    color: var(--accent-blue);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.footer-social li i:hover{
    box-shadow: 0 8px 24px rgba(0,168,232,.45);
}
.footer-social li i{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    color: white;
    transition: all var(--dur-base) var(--ease-premium);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px 0 0;
    font-size: 15px;
    padding: 0;
}
.footer-social li i:hover {
    background: var(--gradient2);
    border-color: transparent;
    transform: translateY(-4px) scale(1.06);
}
.footer-list li:hover i{
    margin-right: 12px;
    background: var(--gradient2);
    color: #fff;
    transform: scale(1.1);
    border-color: transparent;
}
.footer-list li{
    margin: 14px 0;
    opacity: .88;
    transition: opacity var(--dur-fast) var(--ease-premium);
    display: flex;
    align-items: baseline;
}
.footer-list a:hover li {
    opacity: 1;
}
.footer-list, .footer-social { margin-bottom: 8px; }

.hizmet-card {
    display: inline-block;
    background-color: transparent;
    margin-top: 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    width: 100%;
    border-radius: 10px;
    border: none;
    overflow: hidden;
    position: relative;
}

.hizmet-card-top img {
    width: 100%;
    transition: all .4s;
}
.hizmet-card-top{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.hizmet-card-top i{
    display: none;
}

.hakkimizda .img-fluid{
    width: 100%;
    border-radius: 10px;
    transition: all .4s;
}
.hizmet-card-title {
    font-size: 16px;
    font-weight: 500;
    position: relative;
    background-color: var(--renk6);
    padding: 10px !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.hizmet-card-title i{
    position: absolute;
    width: 50px;
    height: 50px;
    transition: all .4s;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--renk3);
    color: white;
    border-radius: 10px;
    top: -40px;
    right: 10px;
}
.hizmet-card-title h5{
    font-size: 16px;
    margin-top: 10px;
}
.hizmet-card-title p{
    font-size: 13px;
}

.mySwiperzaman .swiper-slide{
    text-align: left !important;
    cursor: context-menu;
}
.mySwiperzaman hr{
    background-color: black;
    position: relative;
}
.mySwiperzaman hr::before{
    content: "\f111";
    font: var(--fa-font-solid);
    font-size: 15px;
    position: absolute;
    left: 0;
    top: -7.5px;
}

.rakamlarlaBiz {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    align-items: center;
    height: auto;
    color: white;
    background-color: var(--renk1);
}
.rakamlarlaBiz .sayfaBaslik h2, .rakamlarlaBiz .cls-1{
    color: white;
    fill: white !important;
}
.countreup i {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 30px;
    color: white;
    font-size: 40px;
    line-height: 80px;
}

.count {
    font-size: 35px;
    color: #fff;
    font-family: Rubik, sans-serif;
    font-weight: 500;
    margin-bottom: 13px;
    line-height: 1;
    display: inline-block;
}

.countreup p {
    font-size: 18px;
    font-weight: 600;
}



.snip1573 {
    background-color: #fff;
    display: inline-block;
    font-family: sans-serif Poppins-Regular;
    font-size: 10px;
    max-width: 180px;
    height: 135px;
    padding-top: 10px;
    min-width: 180px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    -webkit-box-shadow: 0 6px 14px 0 rgb(215 215 219);
    -moz-box-shadow: 0 6px 14px 0 rgba(215, 215, 219, 1);
    box-shadow: 0 6px 14px 0 rgb(215 215 219);
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

/* Slider Haberler*/

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

.swiper-container {
    width: 100%;
    height: 300px;
    margin: 20px auto;
}

.append-buttons {
    text-align: center;
    margin-top: 20px;
}

.append-buttons button {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #007aff;
    color: #007aff;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    margin: 0 10px;
    font-size: 13px;
}

.modal-content {
 top: 50px;
}

/* .slider'ın overflow:hidden'ı okların gölgesini kesiyordu (10px boşluk vardı,
   gölge ~40px yayılıyor) — kenardan içeri alındılar. */
.slider .swiper-button-next{
    right: 32px;
}
.slider .swiper-button-prev{
    left: 32px;
}
@media (max-width: 767px) {
    /* dar ekranda 32px metin alanını fazla daraltıyor */
    .slider .swiper-button-next{ right: 16px; }
    .slider .swiper-button-prev{ left: 16px; }
}
.slider{
    overflow: hidden;
}
.slider .swiper-slide::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 100%);
}
.slider svg{
    position: absolute;
    z-index: 10;
    left: -12%;
    width: 40%;
    bottom: -35%;
}
.slogon {

    background-color: var(--renk2);
    color: white;
}
.countreup svg{
    stroke: white;
    width: 50px;
    stroke-width: 20px;
    fill: none;
}
.referans_content {
    background-color: #fff;
    max-width: 200px;
    height: 135px;
    min-width: 180px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    transition: all .4s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.referans_content img{
    width: 90% !important;
}
.referans_content:hover{
    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
}
.referans_content::before{
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), transparent);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    pointer-events: none;
}

.referans_content:hover::before {
    animation: shine 1s ease-in-out 0.2s forwards;
}

@keyframes shine {
    0% {
        transform: translate(150%, -35%);
        opacity:0.3;
    }
    100% {
        transform: translate(-150%, 35%);
        opacity:0.8;
    }
}

.faaliyetAlaniSlider{
    background-color: var(--renk1);
    position: relative;
}

.hbr-card {
    display: inline-block;
    background-color: white;
    margin-bottom: 5px;
    color: black;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 30px;
    height: auto;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}

.referans_content img {
    width: auto;
    height: auto;
}

.hbr-card-top img {
    width: 100%;
}

.hbr-card-title {
    padding: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background-color: var(--renk4);
}

.galeri_link {
    display: inline-block;
    background-color: #e0e0e0;
    color: #dc3545;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
    width: 100%;
}

.galeri-card-top img {
    width: 100%;
    height: 191px;
}

.galeri-card-title {
    padding-top: 20px;
    height: 80px;
    font-size: 16px;
    font-weight: 500;
}



address a {
    color: black;

}

address {
    font-size: 14px;
}

/* Slider  */
.swiper-slide .title {
    font-size: 30px;
    color: white;
    font: var(--font1);
    font-size: 35px;
    font-weight: 900;
}

.slider-yazi{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left !important;
    top: 0;
    left: 0;
}

.swiper-slide .subtitle {
    font-size: 20px !important;
    color: white;
    font-weight: 650 !important;
    font: var(--font1);
}


.headerSosyal .fa-phone {
    color: var(--renk3)
}

.custom-swipper-wrapper {
    transform: translate(-15px, 0);
    width: 1110px;
}

.buton-sag {
    position: fixed;
    right: -40px;
}

.buton-sol {
    position: fixed;
    left: -40px;

}


.list-unstyled li {
    padding: 5px 0;
}

.short_image {
    height: 300px;
    width: 100%;
    color: white;
    display: flex;
    padding-top: 125px;
    align-items: center;
    position: relative;
    background: radial-gradient(circle, rgba(140,3,14,1) 0%, rgba(89,2,9,1) 50%, rgba(89,2,9,1) 100%);
}

.short-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.short-title h1 {
    font-weight: 400;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: white;
}

.bread-nav {
    display: flex;
    justify-content: center;
}

.breadcrumb {
    margin: 0;
    background: transparent;
}

.breadcrumb .breadcrumb-item, .breadcrumb-item a {
    color: white !important;
}
.hk-content {
    padding: 10px;
    text-align: justify;
    min-height: 350px;
}

.hk-img {
    width: 100%;
}

figure.snip0023 {
    color: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #000000;
    text-align: center;
}

figure.snip0023 img {
    opacity: 1;
    width: 100%;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.snip0023 * {
    box-sizing: border-box;
}

.faaliyetimg {
    width: 100%;
    height: 191px;
}

figure.snip0023 > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.snip0023 > div::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
    background-image: linear-gradient(45deg, #000000 0%, transparent 40%, rgba(255, 255, 255, 0.15));
}

figure.snip0023 i {
    display: inline-block;
    font-size: 36px;
    color: #ffffff;
    padding: 6px 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: 0.05s linear;
    transition: 0.05s linear;
    -webkit-transition-delay: 0.01s;
    transition-delay: 0.01s;
}

figure.snip0023 .curl {
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(225deg, #ffffff, #f3f3f3 20%, #bbbbbb 38%, #aaaaaa 44%, #888888 50%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.3));
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    transition: all .4s ease;
}

figure.snip0023 .curl:before, figure.snip0023 .curl:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 12%;
    bottom: 6%;
    width: 70%;
    max-width: 300px;
    max-height: 100px;
    height: 55%;
    box-shadow: 0 12px 15px rgb(0 0 0 / 30%);
    transform: skew(-10deg) rotate(-6deg);
}

figure.snip0023 .curl:after {
    left: auto;
    right: 6%;
    bottom: auto;
    top: 14%;
    transform: skew(-15deg) rotate(-84deg);
}

figure.snip0023:hover > div::before, figure.snip0023.hover > div::before {
    opacity: 1;
}

figure.snip0023:hover i, figure.snip0023.hover i {
    opacity: 0.7;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

figure.snip0023:hover .curl, figure.snip0023.hover .curl {
    width: 90px;
    height: 90px;
}

.alt_baslik {
    height: 60px;
    text-align: center;
    color: black;
    font-weight: 500;
}

.whatsapp_sor {
    color: white;
    bottom: 50px;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    left: 30px;
    background: #34AF23;
    text-align: center;
    z-index: 99;
    font-size: 30px;
    text-decoration: none;
    border-radius: 100%;
    transition: all .2s;
}
.whatsapp_sor:hover {
    color: white;
    height: 60px;
    width: 60px;
    left: 25px;
    bottom: 45px;
}
.joinchat__box {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 48px;
    left: 28px;
    z-index: 9999;
    width: calc(100vw - 20px*2);
    max-width: 400px;
    min-height: 170px;
    max-height: calc(100vh - 20px - 20pc);
    border-radius: 32px;
    background: transparent;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 50%);
    text-align: left;
    overflow: hidden;
    transform: scale3d(0,0,0);
    opacity: 0;
    transition: max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s;
    -webkit-transform-origin: -webkit-calc(100% - 30px) 0;
    transform-origin: 10% 100%;
}
.joinchat__header {
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    height: 70px;
    padding: 0 70px 0 26px;
    margin: 0;
    background: rgb(37, 209, 102);
}

.joinchat__powered {
    font-size: 11px;
    line-height: 18px;
    color: inherit!important;
    text-decoration: none!important;
    fill: white;
    opacity: .8;
}
.joinchat__powered svg {
    display: inline-block;
    width: auto;
    height: 18px;
    vertical-align: -30%;
}
.joinchat__close {
    position: absolute;
    top: 50%;
    right: 0;
    width: 34px;
    height: 34px;
    margin-top: -16px;
    border-radius: 50%;
    background-size: 12px;
    cursor: pointer;
    transition: background-color .3s ease-out;
}
.joinchat__box__scroll {
    padding: 20px 0 calc(60px + 10px) 70px;
    background: #fff linear-gradient(0deg,rgba(37,211,102,0.04),rgba(37,211,102,0.04));
    overflow-x: hidden;
    overflow-y: auto;
    will-change: scroll-position;
}
.joinchat__message {
    position: relative;
    min-height: 60px;
    padding: 17px 20px;
    margin: 0 26px 26px;
    border-radius: 32px;
    background: #fff;
    color: #4a4a4a;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    transform: translateZ(0);
}
.joinchat--show {
    opacity: 1;
    transform: scaleX(1);
    transition: transform .5s cubic-bezier(.18,.89,.32,1.28);
}
.wp-btn {
    font-weight: 600;
    transition: all .4s;
    background-color: #25d166;
    color: white;
    border-radius: 30px;
    padding: 15px 20px;
    margin-right: 20px;
    margin-left: 26px;
}

.wp-btn:hover {
    color: white;
    background-color: #3aec7b;
}

.say-list{
    width: 100%;
    text-align: center;
    background-color: var(--renk1);
    padding: 10px 10px;
    margin-top: 5px;
    border-radius: 5px;
    color: white;
}
.say-list:hover{
    background-color: var(--renk2);
}
.btn-style-1{
    background-color: var(--renk1);
    color: white;
    padding: 2px 20px;
    display: inline-flex;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    position: relative;
}
.btn-style-1:hover{
    color: white;
}
.btn-style-1 span{
    position: relative;
    z-index: 2;
    color: white;
}
.btn-style-1:hover span{
    color: var(--renk1);
}
.btn-style-1:hover{
    border: 1px solid var(--renk1);
    background-color: white;
}
.harita iframe{
    width: 100%;
    height: 350px;
}
.z-10{
    position: relative;
    z-index: 10;
}
.logo-2{
    display: none;
}
.is-sticky .logo-2{
    display: block;
}
.is-sticky .logo-1{
    display: none;
}
.sayfaHeader .logo-1{
    display: none;
}
.sayfaHeader .logo-2{
    display: block;
}
.sayfaHeader .is-sticky .logo-2{
    display: none !important;
}
.galeri-kutu a{
    width: 100%;
    height: 100%;
}
address a {
    color: black;
    transition: all .4s;

}
address p:hover a {
    color: black;
    transform: translateX(10px);
}

address {
    font-size: 14px;
}
address p{
    display: flex;
    justify-content: start;
    align-items: center;
}
address p i{
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border-radius: 50%;
    background-color: var(--renk1);
    color: white;
    display: flex !important;
    justify-content: center;
    align-items: center;
    outline: 1px solid var(--renk1);
    outline-offset: 3px;
    transition: all .4s;
}
address p:hover i{
    transform: rotate(360deg);
    outline-offset: 5px;
}
.hc-offcanvas-nav .nav-back a, .hc-offcanvas-nav .nav-item-link, .hc-offcanvas-nav li.nav-close a {
    color: var(--renk1);
}

.nav-item-link {
    display: flex !important;
}

.nav-item-link i {
    font-size: 18px;
    margin-right: 10px;
}

.nav-item-link .hbt-icon {
    background-color: var(--renk1);
    width: 20px;
    height: 20px;
}

.hc-offcanvas-nav .nav-close-button span::after, .hc-offcanvas-nav .nav-close-button span::before {
    border-color: var(--renk1);
}
.hbt-card{
    width: 100%;
    margin: 15px 0;
    position: relative;
    border-radius: 10px;
    transition: all .4s;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}
.hbt-card-top{
    width: 100%;
    aspect-ratio: 4/3;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%);
    filter: drop-shadow(rgba(10, 46, 92, 0.18) 0 8px 17px);
    transition: filter .4s;
}
.hbt-card:hover .hbt-card-top{
    filter: drop-shadow(rgba(10, 102, 194, 0.35) 0 12px 24px);
}
.hbt-card:hover .hbt-card-title{
    filter: drop-shadow(rgba(10, 102, 194, 0.28) 0 8px 17px);
}
.hbt-card-top::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    z-index: 4;
    pointer-events: none;
}
.hbt-card:hover .hbt-card-top::after{
    transform: translateX(120%);
}
.hbt-card-top::before{
    content: "\2b";
    font: var(--fa-font-solid);
    font-size: 22px;
    color: white;
    z-index: 5;
    position: absolute;
    transform: scale(0) rotate(-90deg);
    transition: all .4s;
}
.hbt-card-top img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .4s;
}
.hbt-card:hover .hbt-card-top img{
    filter: brightness(0.55);
    transform: scale(1.06);
}
.hbt-card:hover .hbt-card-top::before{
    transform: scale(1) rotate(0deg);
}
.hbt-card-title {
    width: 100%;
    height: 100px;
    font-size: 14px;
    font-family: var(--font2);
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ink);
    padding: 5px 10px;
    background-color: white;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
    filter: drop-shadow(rgba(10, 46, 92, 0.15) 0 8px 17px);
    transition: filter .4s;
    margin-top: -20px;
}
.kurumsal-img{
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    transition: all .4s;
}
.kurumsal-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kurumsal-img:hover{
    transform: rotate(-3deg) scale(1.03);
}
main{
    overflow: hidden;
}
.is-sticky .hc-nav-trigger{
    top: 20px;
}
.canvasSocial li i{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient1);
    color: white;
    margin-right: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}
.canvasSocial li{
    align-content: center;
    margin: 5px 0;
}
@media screen and (min-width: 998px){
    .col-lg-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .swiper-button-next{
        right: -30px;
    }
    .swiper-button-prev{
        left: -30px;
    }
}
@media screen and (min-width: 450px) and (max-width: 998px){
    .swiper-button-next{
        right: -15px;
    }
    .swiper-button-prev{
        left: -15px;
    }
}
@media screen and (max-width: 450px) {
    .sayfaDetay-img{
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
    }
}

.notify {
    width: 400px;
}

.notify.alert-success {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    position: relative;
    display: flex !important;
    z-index: 9999 !important;
    justify-content: center;
    align-items: center;
}

.notify.alert-success span[data-notify="icon"] {
    color: green;
    position: absolute;
    left: 15px;
}

.close {
    top: auto !important;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.notify.alert-danger {
    background-color: white !important;
    border-radius: 10px;
    text-align: center;
    position: relative;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.notify.alert-danger span[data-notify="icon"] {
    color: red;
    position: absolute;
    left: 15px;
}

@media screen and (max-width: 450px) {
    .notify {
        width: 90%;
    }
}

/* popup */


.pop-kutu, .pop-up img {
    width: 100%;
    height: 100%;
}
.pop-up img{
    border-radius: 10px;
}
.pop-kapat{
    cursor: pointer;
}
.pop-kutu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    background-color: rgba(0, 0, 0, .7)
}
.pop-up .gosterme{
    position: absolute;
    bottom: 12px;
    border-radius: 5px;
    padding: 3px 20px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid white;
    color: white;
    left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.pop-up .kapat{
    position: absolute;
    bottom: 10px;
    border-radius: 5px;
    padding: 3px 20px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid white;
    color: white;
    right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.kapat span i, .gosterme span i {
    font-size: 9px;
    position: relative !important;
    left: -9px;
    right: auto;
    float: left;
}
.pop-up .gosterme span, .pop-up .kapat span{
    z-index: 2;
    transition: all .4s;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pop-up .kapat:hover span i, .pop-up .gosterme:hover span i{
    color: var(--renk1);
}
.pop-up .gosterme:hover span, .pop-up .kapat:hover span{
    color: var(--renk1);
}
.pop-up .gosterme:hover::before, .pop-up .kapat:hover::before{
    width: 120%;
    left: -10%;
}
.pop-up .gosterme::before, .pop-up .kapat::before{
    content: "";
    left: 15px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    width: 0;
    aspect-ratio: 1/1;
    transition: all .4s;
}
.pop{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 100%;
}
.pop-up {
    margin: 0 15px;
    z-index: 3000 !important;
    border-radius: 10px;
    display: flex;
    padding-bottom: 50px;
    justify-content: center;
    align-items: center;
    max-height: 80vh;
    max-width: 1200px;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    aspect-ratio: 1 / 1;
}
.pop-up img{
    border: 10px solid white;
}

.pop-up i {
    position: absolute;
    right: -13px;
    cursor: pointer;
    font-size: 26px;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    transition: all .2s;
    opacity: 1 !important;
    color: white;
}
.pop-up i:hover{
    color: white;
    transform: scale(1.1);
}
.pop .fa-circle-xmark{
    top: -13px;
}

/*CONTAINER*/
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
}
.instagram-bg {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.facebook-bg {
    background-color: #3b5998;
}
.twitter-bg {
    background-color: #1da1f2;
}
.whatsapp-bg {
    background-color: #25D366;
}
.linkedin-bg {
    background-color: #0A66C2;
}

/* ==========================================================================
   2026 PREMIUM KATMAN — Smart Steps (Erasmus+ KA153)
   Mevcut Bootstrap4/hbt.css sınıflarını renk değişkenleri üzerinden
   yeniden temalandırır; yıkıp yeniden yazmaz (bkz. SABLON-REHBERI §6).
   ========================================================================== */

.premium-section {
    padding: 128px 0;
}
@media (max-width: 991px) {
    .premium-section { padding: 88px 0; }
}
@media (max-width: 767px) {
    .premium-section { padding: 64px 0; }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font2);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 14px;
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--gradient2);
    border-radius: 2px;
}

.sayfaBaslik h2 {
    font-family: var(--font2);
    font-weight: 800;
    font-size: 40px;
    color: var(--ink);
}
@media (max-width: 767px) {
    .sayfaBaslik h2 { font-size: 28px; }
}
.sayfaBaslik h4 {
    font-family: var(--font2);
    font-weight: 700;
    font-size: 20px;
    color: var(--ink);
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 22px;
    width: 100%;
}
.sayfaBaslik h4::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 44px; height: 3px;
    border-radius: 3px;
    background: var(--gradient2);
}
.sayfaBaslik svg { display: none; }
.sayfa-liste { padding-top: 8px; }
.sayfaBaslik.baslik-underline {
    display: block;
    text-align: center;
}
.sayfaBaslik.baslik-underline::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 4px;
    background: var(--gradient2);
}

/* Header — yüzen cam kapsül */
header {
    background-color: transparent;
    padding-top: 18px;
    transition: padding var(--dur-base) var(--ease-premium);
}
/* Üst şerit — cam kapsülün ÜSTÜNDEKİ boşlukta duran iletişim bilgileri + sosyal medya.
   Scroll edilip header sticky olduğunda gizlenir (mevcut `header.is-sticky .headerSosyal`
   kuralı devreye girer), böylece açık zemin üzerinde okunmaz metin kalmaz. */
.header-topbar {
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    padding: 0 24px 10px;
    margin: 0;
}
.header-topbar .telefonnumaramiz {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    float: none !important;
    margin: 0 !important;
}
.header-topbar .telefonnumaramiz a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .2px;
    opacity: .82;
    transition: opacity var(--dur-fast) var(--ease-premium);
}
.header-topbar .telefonnumaramiz a:hover { opacity: 1; }
.header-topbar .telefonnumaramiz a i {
    margin: 0 !important;
    font-size: 11px;
    color: var(--accent-blue) !important;
}
.header-topbar .sosyalMedyaUl {
    float: none !important;
    gap: 4px;
    padding-left: 20px;
    border-left: 1px solid rgba(255,255,255,.18);
}
.header-topbar .sosyalMedyaUl li { margin: 0 !important; }
.header-topbar .sosyalMedyaUl li a {
    transform: none;
    padding: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    opacity: .8;
    transition: all var(--dur-fast) var(--ease-premium);
}
.header-topbar .sosyalMedyaUl li a:hover {
    opacity: 1;
    background: rgba(255,255,255,.14);
    transform: translateY(-2px);
}
/* Sosyal medya hesabı tanımlı değilse ayırıcı çizgi tek başına kalmasın */
.header-topbar .sosyalMedyaUl:empty { display: none; }

/* Marka bloğu: proje logosu + AB eş-finansman bayrağı */
.header-brand-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-brand-wrap .navbar-brand { margin: 0; flex-shrink: 0; }
.header-eu-flag {
    display: inline-flex;
    align-items: center;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,.22);
    flex-shrink: 0;
    transition: border-color var(--dur-base) var(--ease-premium);
}
.header-eu-flag img {
    height: 42px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.22));
    transition: transform var(--dur-base) var(--ease-premium);
}
.header-eu-flag:hover img { transform: translateY(-2px) scale(1.05); }
header.is-sticky .header-eu-flag,
.sayfaHeader .header-eu-flag { border-left-color: rgba(10,46,92,.14); }
.sayfaHeader .header-eu-flag img,
header.is-sticky .header-eu-flag img {
    filter: drop-shadow(0 2px 6px rgba(10,46,92,.18));
}
header.is-sticky .header-eu-flag img { height: 60px; }
@media (max-width: 991px) {
    .header-brand-wrap { justify-content: flex-start; }
    .header-eu-flag img { height: 34px; }
}

header .container > .row {
    background: var(--glass-dark);
    backdrop-filter: blur(9px) saturate(150%);
    -webkit-backdrop-filter: blur(9px) saturate(150%);
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border-dark);
    padding: 6px 22px;
    box-shadow: 0 8px 32px rgba(10,46,92,.16), inset 0 1px 0 rgba(255,255,255,.08);
    transition: background var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium),
                border-color var(--dur-base) var(--ease-premium), padding var(--dur-base) var(--ease-premium);
}
header.is-sticky {
    background-color: transparent;
    box-shadow: none;
    padding-top: 10px;
}
header.is-sticky .container > .row {
    background: var(--glass-light-strong);
    backdrop-filter: blur(11px) saturate(160%);
    -webkit-backdrop-filter: blur(11px) saturate(160%);
    border-color: rgba(10,46,92,0.08);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.6);
    padding: 3px 22px;
}

.nav-link {
    transition: color var(--dur-fast) var(--ease-premium);
    padding: 10px 14px !important;
}
.nav-link::before {
    height: 2.5px;
    left: 14px;
    right: 14px;
    width: auto;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--gradient2);
    border-radius: 2px;
    transition: transform var(--dur-base) var(--ease-premium);
}
.nav-link:hover::before {
    width: auto;
    transform: scaleX(1);
}
.is-sticky .nav-link::before { background: var(--gradient2); }
.nav-item.active .nav-link {
    color: var(--accent-blue) !important;
}
.is-sticky .nav-item.active .nav-link { color: var(--primary-blue) !important; }
.nav-item.active .nav-link::before { transform: scaleX(1); }

/* Ortak kuruluşlar carousel okları: şablonun 998px+ için verdiği -30px, 992–1199
   aralığında konteynerin yan boşluğundan büyük olduğu için oklar viewport dışına
   taşıp yatay kaydırma yaratıyordu. Bu aralıkta içeri çekildi. */
@media (min-width: 992px) and (max-width: 1199px) {
    .faaliyetAlaniSlider .swiper-button-next { right: -8px; }
    .faaliyetAlaniSlider .swiper-button-prev { left: -8px; }
}

/* Menü ikonları (menu.icon sütunundan gelir) */
.nav-link .nav-ikon {
    font-size: 12.5px;
    margin-right: 8px;
    opacity: .72;
    transition: opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}
.nav-link:hover .nav-ikon,
.nav-item.active .nav-link .nav-ikon {
    opacity: 1;
    transform: translateY(-1px);
}
/* CTA görünümündeki son öğede (İletişim) ikon tam opak dursun */
.header-nav .navbar-nav .nav-item:last-child .nav-link .nav-ikon { opacity: .95; }

/* Dar masaüstünde menü sığmazsa önce ikonlar çekilir, metin korunur */
@media (min-width: 992px) and (max-width: 1199px) {
    .nav-link .nav-ikon { display: none; }
}

/* Dropdown — glass panel */
.dropdown-menu {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    padding: 8px;
}
.dropdown-menu .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    transition: background var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
    font-size: 13px;
}
.dropdown-menu .dropdown-item:hover {
    background: var(--surface-2);
    color: var(--primary-blue);
    transform: translateX(4px);
}
.dropdown-menu .dropdown-item i {
    color: var(--primary-blue);
    transition: transform var(--dur-fast) var(--ease-premium);
}
.dropdown-menu .dropdown-item:hover i { transform: translateX(2px); }

/* CTA butonu — son menü öğesi (İletişim) */
.header-nav .navbar-nav .nav-item:last-child .nav-link {
    background: var(--gradient2);
    color: #fff !important;
    padding: 9px 24px !important;
    border-radius: var(--radius-pill);
    margin-left: 8px;
    box-shadow: 0 6px 18px rgba(10,102,194,.35);
    transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.header-nav .navbar-nav .nav-item:last-child .nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(10,102,194,.45);
}
.header-nav .navbar-nav .nav-item:last-child .nav-link::before { display: none; }

/* Ortak logo şeridi (footer) */
footer > .container:nth-of-type(2) {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 36px;
    padding-top: 36px;
}
.partner-logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 14px 0 34px;
}
.partner-logo-strip img {
    height: 78px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 12px 20px;
    opacity: .96;
    box-shadow: var(--shadow-sm);
    transition: opacity var(--dur-base) var(--ease-premium), transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
@media (max-width: 767px) {
    .partner-logo-strip { gap: 20px; }
    .partner-logo-strip img { height: 58px; max-width: 180px; padding: 10px 14px; }
}
.partner-logo-strip img:hover {
    opacity: 1;
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.eu-disclaimer {
    font-size: 12px;
    line-height: 1.8;
    color: rgba(255,255,255,0.62);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 15px 8px;
}
.eu-disclaimer strong { color: rgba(255,255,255,0.85); font-weight: 600; }
.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    padding: 20px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 18px;
}
.footer-legal-links a {
    font-size: 12.5px;
    font-weight: 500;
    opacity: .65;
    position: relative;
    transition: opacity var(--dur-fast) var(--ease-premium);
}
.footer-legal-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    width: 0; height: 1px;
    background: var(--accent-blue);
    transition: width var(--dur-base) var(--ease-premium);
}
.footer-legal-links a:hover { opacity: 1; }
.footer-legal-links a:hover::after { width: 100%; }

/* ============ 404 sayfası ============ */
.error-404-section { position: relative; overflow: hidden; }
.error-404-section::before {
    content: "";
    position: absolute;
    top: -10%; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 500px;
    max-width: 140vw;
    background: radial-gradient(ellipse at center, rgba(0,168,232,.10), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.error-404-section > .container { position: relative; z-index: 1; }
.error-404-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    margin-bottom: 8px;
}
.error-404-num {
    position: relative;
    z-index: 2;
    font-family: var(--font2);
    font-weight: 800;
    font-size: 110px;
    line-height: 1;
    letter-spacing: -.02em;
    background: var(--gradient2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 575px) {
    .error-404-num { font-size: 76px; }
    .error-404-badge { height: 110px; }
}
.error-404-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 1.5px solid rgba(10,102,194,.18);
    transform: translate(-50%, -50%) scale(1);
    animation: error404Pulse 3.2s var(--ease-soft) infinite;
}
.error-404-ring-2 {
    width: 230px; height: 230px;
    border-color: rgba(0,168,232,.12);
    animation-delay: -1.6s;
}
@keyframes error404Pulse {
    0% { transform: translate(-50%, -50%) scale(0.85); opacity: .9; }
    100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .error-404-ring { animation: none; opacity: .4; }
}
.error-404-link {
    text-decoration: none !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.error-404-link h5 { font-size: 13.5px; margin: 0; }
.error-404-link .resource-icon { margin-bottom: 4px; }

/* ============ Hero alt bilgi şeridi ============ */
.hero-info-strip {
    background: var(--navy-deep);
    position: relative;
    overflow: hidden;
}
.hero-info-strip::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,168,232,.12), transparent 40%, transparent 60%, rgba(10,102,194,.16));
    pointer-events: none;
}
.hero-info-strip-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    padding: 13px 10px;
    text-align: center;
}
.hero-info-strip-inner span {
    color: rgba(255,255,255,.82);
    font-family: var(--font2);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .3px;
}
.hero-info-strip-inner span i { color: var(--accent-blue); margin-right: 6px; }
.hero-info-strip-inner .dot { color: var(--accent-blue); opacity: .7; font-weight: 700; }

/* ============ HERO — anasayfa slider ============ */
.slider {
    position: relative;
}
.slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(0,168,232,.35), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(10,102,194,.4), transparent 36%);
    mix-blend-mode: screen;
}
.slider::after {
    content: "\f107";
    font: var(--fa-font-solid);
    position: absolute;
    left: 50%;
    bottom: 34px;
    z-index: 20;
    transform: translateX(-50%);
    color: #fff;
    font-size: 22px;
    opacity: .75;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    animation: heroScrollBounce 2.2s var(--ease-soft) infinite;
}
@keyframes heroScrollBounce {
    0%, 100% { transform: translate(-50%, 0); opacity: .55; }
    50% { transform: translate(-50%, 10px); opacity: .95; }
}
.slider .swiper-slide::before {
    background: linear-gradient(100deg, rgba(10,20,40,.85) 0%, rgba(10,46,92,.55) 38%, rgba(10,46,92,.15) 65%, transparent 100%);
    z-index: 2;
}
.slider-yazi { z-index: 6; }
.swiper-slide .title {
    font-family: var(--font2);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-shadow: 0 4px 30px rgba(0,0,0,.25);
    max-width: 780px;
}
.swiper-slide .subtitle {
    font-family: var(--font1) !important;
    font-weight: 400 !important;
    font-size: clamp(15px, 1.6vw, 19px) !important;
    line-height: 1.6;
    opacity: .88;
    max-width: 560px;
    margin-top: 14px;
}
.slider .text { margin-top: 30px; }
.slider .btn-style-1 { padding: 15px 34px; font-size: 15px; }

/* ============ Alt sayfa "hero" bandı (short_image) ============ */
.short_image {
    /* Üst şerit eklenince header 141px'e çıktı; başlığın altına sıkışmaması için pay artırıldı */
    height: 350px;
    padding-top: 150px;
    background: var(--navy-deep);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(0,168,232,.35), transparent 42%),
        radial-gradient(circle at 85% 15%, rgba(10,102,194,.4), transparent 40%),
        radial-gradient(circle at 50% 120%, rgba(0,168,232,.2), transparent 50%),
        linear-gradient(160deg, #0A2E5C 0%, #0A1F3D 100%);
    position: relative;
    overflow: hidden;
}
.short_image::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    pointer-events: none;
}
.short_image .container { position: relative; z-index: 1; }
.short-title h1 {
    font-family: var(--font2);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -0.01em;
}
.short_image .breadcrumb-item, .short_image .breadcrumb-item a { opacity: .82; }

/* KPI / sayaç kartları */
.kpi-band { background: var(--navy-deep); position: relative; overflow: hidden; }
.kpi-band::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(0,168,232,.25), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(10,102,194,.3), transparent 45%);
    pointer-events: none;
}
.kpi-card {
    position: relative;
    text-align: center;
    padding: 30px 10px;
    color: #fff;
}
.kpi-card .kpi-icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 26px;
    color: var(--accent-blue);
}
.kpi-card .kpi-num {
    font-family: var(--font2);
    font-weight: 800;
    font-size: 42px;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
    background: linear-gradient(90deg,#fff, var(--accent-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.kpi-card p { font-size: 14px; opacity: .85; margin: 0; }

/* Timeline (Faaliyetler) */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 60px auto 0;
    padding-left: 40px;
}
.timeline {
    --tl-progress: 0;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 10px; top: 6px; bottom: 6px;
    width: 3px;
    background: rgba(10,102,194,.14);
    border-radius: 3px;
    z-index: 0;
}
.timeline::after {
    content: "";
    position: absolute;
    left: 10px; top: 6px;
    width: 3px;
    height: calc((100% - 12px) * var(--tl-progress));
    background: var(--gradient2);
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(0,168,232,.55);
    transition: height .05s linear;
    z-index: 0;
}
.timeline-item {
    position: relative;
    z-index: 1;
    padding-bottom: 48px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -34px; top: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--primary-blue);
    box-shadow: 0 0 0 5px var(--surface);
}
.timeline-item .timeline-date {
    display: inline-block;
    font-family: var(--font2);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--primary-blue);
    background: var(--surface-2);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.timeline-item h4 { font-family: var(--font2); font-weight: 700; margin-bottom: 8px; }
.timeline-item p { color: #4a5568; margin: 0; }

/* CTA bandı */
.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: var(--gradient1);
    padding: 64px 40px;
    text-align: center;
    color: #fff;
}
.cta-band::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% -10%, rgba(255,255,255,.25), transparent 55%);
    pointer-events: none;
}
.cta-band h2 { font-family: var(--font2); font-weight: 800; margin-bottom: 14px; }
.cta-band p { opacity: .92; max-width: 640px; margin: 0 auto 26px; }
.cta-band .btn-style-1 { background: #fff; color: var(--primary-blue); }
.cta-band .btn-style-1:hover { background: transparent; border-color: #fff; color: #fff; }
.cta-band .btn-style-1:hover span { color: #fff; }

/* SSS / FAQ akordeon */
.faq-accordion .faq-item {
    background: #fff;
    border: 1px solid var(--surface-2);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}
.faq-accordion .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    font-family: var(--font2);
    font-weight: 700;
    color: var(--ink);
}
.faq-accordion .faq-q i { color: var(--primary-blue); transition: transform .3s; flex-shrink: 0; }
.faq-accordion .faq-item.active .faq-q i { transform: rotate(180deg); }
.faq-accordion .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    padding: 0 24px;
    color: #4a5568;
}
.faq-accordion .faq-item.active .faq-a {
    padding-bottom: 22px;
}

/* Kaynak / doküman kartları */
.resource-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--surface-2);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: all .3s;
}
.resource-card:hover {
    border-color: var(--primary-blue);
    filter: drop-shadow(0 12px 24px rgba(10,102,194,.14));
    transform: translateY(-4px);
}
.resource-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--surface-2);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium),
                border-color var(--dur-base) var(--ease-premium), background var(--dur-base) var(--ease-premium);
    position: relative;
    overflow: hidden;
    margin: 15px 0;
    height: auto !important;
}
.resource-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: var(--radius-lg);
    background: var(--gradient2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-premium);
    pointer-events: none;
}
.resource-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    background: #fff;
}
.resource-card:hover::before { opacity: 1; }
.resource-card .resource-icon {
    width: 54px; height: 54px; flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--primary-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    transition: transform var(--dur-base) var(--ease-premium), background var(--dur-base) var(--ease-premium), color var(--dur-base) var(--ease-premium);
}
.resource-card:hover .resource-icon {
    background: var(--gradient2);
    color: #fff;
    transform: scale(1.1) rotate(-6deg);
}
.resource-card h5 { font-family: var(--font2); font-weight: 700; margin-bottom: 6px; transition: color var(--dur-fast); }
.resource-card:hover h5 { color: var(--primary-blue); }
.resource-card p { font-size: 14px; line-height: 1.7; color: #4a5568; margin-bottom: 10px; }

/* KPI kartı — cam panel */
.kpi-card {
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(6px);
    transition: transform var(--dur-base) var(--ease-premium), background var(--dur-base) var(--ease-premium);
}
.kpi-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.09);
}
.kpi-card .kpi-icon { transition: transform var(--dur-base) var(--ease-premium); }
.kpi-card:hover .kpi-icon { transform: scale(1.12); }

/* Bülten / haber kartları */
.card {
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
    background: #fff;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.card-top {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.card-top img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-premium);
}
.card:hover .card-top img { transform: scale(1.08); }
.card-top::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(200deg, transparent 55%, rgba(10,46,92,.5));
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-premium);
}
.card:hover .card-top::after { opacity: 1; }
.card-title {
    padding: 22px;
    position: relative;
}
.card .baslik {
    font-family: var(--font2);
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 10px;
    transition: color var(--dur-fast);
    min-height: 70px;
}
.card:hover .baslik { color: var(--primary-blue); }
.card-btn {
    font-family: var(--font2);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .3px;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.card-btn i { transition: transform var(--dur-base) var(--ease-premium); }
.card:hover .card-btn i { transform: translateX(6px); }

/* Hizmet / ortak kuruluş kartı
   Farklı uzunluktaki kurum adları kartları farklı boyda bırakıyordu; swiper-slide → a →
   card → title zinciri flex ile esnetilip başlık satır sayısı sınırlanarak sabitlendi
   (bkz. SABLON-REHBERI §8). */
/* Swiper kapsayıcısının overflow:hidden'ı zorunlu (komşu slaytları gizler) ama kart
   gölgelerini de kesiyordu. Kırpma kutusunu padding ile büyütüp aynı ölçüde negatif
   margin vererek düzeni bozmadan gölgeye yer açıyoruz. Yatay değer bilinçli olarak
   küçük tutuldu: gölgenin offset-x'i 0 olduğu için yanlarda az yer gerekiyor ve büyük
   negatif margin dar ekranlarda yatay taşma riski yaratırdı. */
.mySwiperFaaliyet .swiper-wrapper { align-items: stretch; }
.mySwiperFaaliyet .swiper-slide {
    height: auto;
    display: flex;
}
.mySwiperFaaliyet .swiper-slide > a {
    display: flex;
    width: 100%;
}
.hizmet-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.hizmet-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.hizmet-card-top {
    aspect-ratio: 4/3;
    flex-shrink: 0;
}
.hizmet-card-top img { background-color: white; transition: transform var(--dur-slow) var(--ease-premium); }
.hizmet-card:hover .hizmet-card-top img { transform: scale(1.08); }
.hizmet-card-title {
    background: #fff;
    flex: 1 1 auto;
    height: auto;
    min-height: 96px;
    justify-content: center;
    padding: 18px 16px !important;
    transition: background var(--dur-base) var(--ease-premium);
}
.hizmet-card-title h5 {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Timeline hover */
.timeline-item::before {
    transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.timeline-item:hover::before,
.timeline-item.active::before {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px var(--surface), 0 0 18px rgba(0,168,232,.55);
    border-color: var(--accent-blue);
}

/* ============ Scroll ilerleme çubuğu ============ */
.scroll-progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    z-index: 10000;
    pointer-events: none;
    background: rgba(10,46,92,.06);
}
.scroll-progress-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--gradient2);
    box-shadow: 0 0 12px rgba(0,168,232,.65);
}

/* ============ Bölüm gezinme (yalnızca anasayfa, JS ile enjekte edilir) ============ */
.section-dot-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    justify-content: center;
    transition: opacity .4s var(--ease-premium), transform .5s var(--ease-premium), visibility .4s;
}
/* Hero slider ekranı kaplarken gizlenir — koyu görselin üstünde dikkat dağıtıyordu */
.section-dot-nav.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(24px);
}
.section-dot-nav .track {
    position: relative;
    width: 2px;
    background: rgba(10,46,92,.14);
    border-radius: 2px;
}
.section-dot-nav .track-fill {
    position: absolute;
    top: 0; left: 0; width: 100%;
    height: 0%;
    background: var(--gradient2);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,168,232,.55);
    transition: height .05s linear;
}
.section-dot-nav .dot {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(10,46,92,.28);
    cursor: pointer;
    padding: 0;
    transition: all var(--dur-base) var(--ease-premium);
}
.section-dot-nav .dot:hover {
    border-color: var(--primary-blue);
    transform: translate(-50%, -50%) scale(1.3);
}
.section-dot-nav .dot.active {
    border-color: transparent;
    background: var(--gradient2);
    transform: translate(-50%, -50%) scale(1.7);
    box-shadow: 0 0 14px rgba(0,168,232,.65);
}
@media (max-width: 1199px) {
    .section-dot-nav { display: none !important; }
}

/* ============ Hero'da yüzen ışık orbları (yalnızca anasayfa slider'ı) ============ */
.slider .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 4;
    opacity: .55;
    animation: orbDrift 14s ease-in-out infinite;
    will-change: transform;
}
.slider .orb-1 { width: 220px; height: 220px; left: 8%; top: 18%; background: radial-gradient(circle, rgba(0,168,232,.55), transparent 70%); animation-delay: 0s; }
.slider .orb-2 { width: 280px; height: 280px; right: 10%; bottom: 12%; background: radial-gradient(circle, rgba(10,102,194,.55), transparent 70%); animation-delay: -5s; }
.slider .orb-3 { width: 160px; height: 160px; right: 30%; top: 8%; background: radial-gradient(circle, rgba(0,168,232,.4), transparent 70%); animation-delay: -9s; }
@keyframes orbDrift {
    0%, 100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(24px,-18px) scale(1.08); }
    66% { transform: translate(-18px,14px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .slider .orb { animation: none; }
}

/* FAQ kartı hover */
.faq-accordion .faq-item {
    border-radius: var(--radius-md);
    transition: box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) var(--ease-premium);
}
.faq-accordion .faq-item:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-sm);
}

/* Galeri kutusu — yeni palet gölgesi */
.galeri-kutu {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.galeri-kutu:hover {
    box-shadow: var(--shadow-lg);
}

/* Ortak logo şeridi kartı */
.partner-logo-strip img {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}

/* Coming soon rozet */
.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    color: var(--primary-blue);
    font-family: var(--font2);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(10,102,194,.12);
}

/* ==========================================================================
   BUTON SİSTEMİ
   ========================================================================== */
.btn-style-1 {
    will-change: transform;
    position: relative;
    overflow: hidden;
    background: var(--gradient2);
    border: 1.5px solid transparent;
    color: #fff;
    font-family: var(--font2);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
    padding: 13px 30px;
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 26px rgba(10,102,194,.28);
    transition: box-shadow var(--dur-base) var(--ease-premium), transform var(--dur-fast) var(--ease-premium),
                background var(--dur-base) var(--ease-premium), border-color var(--dur-base) var(--ease-premium);
}
.btn-style-1::before {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    transition: left .7s var(--ease-soft);
    pointer-events: none;
}
.btn-style-1:hover {
    box-shadow: 0 16px 36px rgba(10,102,194,.4);
}
.btn-style-1:hover::before { left: 130%; }
.btn-style-1 span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    transition: color var(--dur-base) var(--ease-premium);
}
.btn-style-1:hover span { color: #fff; }
.btn-style-1:hover { border: 1.5px solid transparent; background: var(--gradient2); }
.btn-style-1 .btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    transform: scale(0);
    animation: btnRipple .6s var(--ease-soft) forwards;
    pointer-events: none;
}
@keyframes btnRipple {
    to { transform: scale(2.6); opacity: 0; }
}

/* İkincil buton görünümü (CTA bandı içinde beyaz zemin üzerinde) */
.cta-band .btn-style-1 {
    background: #fff;
    color: var(--primary-blue);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.cta-band .btn-style-1:hover {
    background: transparent;
    border-color: rgba(255,255,255,.7);
    box-shadow: none;
}
.cta-band .btn-style-1 span { color: var(--primary-blue); }
.cta-band .btn-style-1:hover span { color: #fff; }

/* İkon mikro-etkileşim: interaktif ebeveyn üzerinde hover'da hafif büyüme + renk geçişi */
a i.fa, a i.fas, a i.fa-solid, a i.fa-regular, a i.fab,
.resource-icon i, .kpi-icon i {
    transition: transform var(--dur-base) var(--ease-premium), color var(--dur-base) var(--ease-premium);
}
a:hover > i.fa, a:hover > i.fas, a:hover i.fa-solid:not(.card-btn i):not(.dropdown-item i) {
    transform: scale(1.12);
}

/* ==========================================================================
   İÇ SAYFALAR — prose içerik, kenar çubuğu, form, harita, breadcrumb
   ========================================================================== */

/* Genel amaçlı "panel" yardımcı sınıfı — şablonda tanımsız bırakılmıştı */
.bg-container {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.hk-content.bg-container { padding: 44px; }
@media (max-width: 767px) {
    .hk-content.bg-container { padding: 26px 22px; }
}
h5.bg-container {
    padding: 16px 22px !important;
    text-align: left;
    font-family: var(--font2);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    border-left: 4px solid var(--primary-blue);
    letter-spacing: .2px;
}

/* Prose tipografisi (sayfa.php / bulten-detay.php ortak içerik alanı) */
.hk-content {
    padding: 0;
    text-align: left;
    min-height: 570px;
    font-size: 16px;
    line-height: 1.9;
    color: #445064;
}
.hk-content p { margin-bottom: 20px; }
.hk-content p:last-child { margin-bottom: 0; }
.hk-content h3 {
    font-family: var(--font2);
    font-weight: 800;
    font-size: 23px;
    color: var(--ink);
    margin: 36px 0 16px;
    letter-spacing: -.01em;
}
.hk-content h3:first-child { margin-top: 0; }
.hk-content strong { color: var(--ink); font-weight: 700; }
.hk-content ul, .hk-content ol { padding-left: 22px; margin-bottom: 20px; }
.hk-content li { margin: 9px 0; }
.hk-content a {
    color: var(--primary-blue);
    transition: text-decoration-color var(--dur-base) var(--ease-premium);
}
.hk-content a:hover { text-decoration-color: var(--primary-blue); }

/* İçerik görseli (fancybox) */
.s-det-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.hk-img {
    border-radius: var(--radius-lg);
    transition: transform var(--dur-slow) var(--ease-premium);
}
.s-det-img:hover .hk-img { transform: scale(1.05); }

/* Kenar çubuğu — ilgili içerik listesi */
.say-list {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--surface-2);
    padding: 10px 14px;
    margin-top: 12px;
    border-radius: var(--radius-md);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: all var(--dur-base) var(--ease-premium);
}
.say-list img {
    width: 46px; height: 46px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.say-list span {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}
.say-list:hover, .say-list.active {
    background: var(--gradient2);
    color: #fff;
    border-color: transparent;
    transform: translateX(6px);
    box-shadow: var(--shadow-sm);
}
.altSayfaListe { margin-top: 6px; }

/* Breadcrumb rafine */
.breadcrumb { font-size: 13px; }
.breadcrumb-item {
    font-family: var(--font2);
    font-weight: 500;
    letter-spacing: .2px;
}
.breadcrumb-item a { opacity: .75; transition: opacity var(--dur-fast); }
.breadcrumb-item a:hover { opacity: 1; }
.breadcrumb-item.active { opacity: .95; font-weight: 600; }

/* İletişim formu */
.form h4 {
    font-family: var(--font2);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .3px;
    color: var(--ink);
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 14px;
}
.form h4::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 42px; height: 3px;
    border-radius: 3px;
    background: var(--gradient2);
}
.form .form-control {
    border: 1.5px solid var(--surface-2);
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 13px 18px;
    height: auto;
    font-size: 14.5px;
    color: var(--ink);
    box-shadow: none;
    transition: all var(--dur-base) var(--ease-premium);
    margin: 5px 0;
}
.form .form-control::placeholder { color: #92a0b3; }
.form .form-control:focus {
    background: #fff;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(10,102,194,.12);
    outline: none;
}
.form textarea.form-control { border-radius: var(--radius-lg); resize: vertical; }
.form select.form-control { cursor: pointer; }
.form .formBtn { margin-top: 6px; }
address { font-size: 15px; }

/* Harita */
.harita { overflow: hidden; }
.harita .container-fluid {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}
.harita iframe {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
@media (max-width: 767px) {
    .harita iframe { height: 280px; border-radius: var(--radius-md); }
}

/* ==========================================================================
   LENIS — kütüphanenin ZORUNLU stil seti.
   Lenis <html>'e `lenis`, `lenis-smooth` ve kaydırma sırasında `lenis-scrolling`
   sınıflarını ekler; bu stiller olmadan tarayıcının kendi scroll davranışı Lenis'in
   animasyonuyla çakışıp titremeye yol açar.
   ========================================================================== */
html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ==========================================================================
   ETKİ VE SONUÇLAR — asimetrik KPI vitrini + çarpan zinciri
   ========================================================================== */

.impact-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 26px;
    align-items: stretch;
}
@media (max-width: 991px) {
    .impact-grid { grid-template-columns: 1fr; }
}

/* Öne çıkan tek büyük hedef */
.impact-hero-stat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px 44px;
    border-radius: var(--radius-xl);
    background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
}
.impact-hero-ring {
    position: absolute;
    right: -90px; top: 50%;
    width: 320px; height: 320px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 0 90px rgba(0,168,232,.22);
    pointer-events: none;
}
.impact-hero-icon {
    width: 60px; height: 60px;
    border-radius: var(--radius-sm);
    background: var(--gradient2);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff;
    margin-bottom: 26px;
    box-shadow: 0 10px 26px rgba(0,168,232,.35);
}
.impact-hero-num {
    display: block;
    font-family: var(--font2);
    font-weight: 800;
    font-size: clamp(58px, 8vw, 92px);
    line-height: 1;
    letter-spacing: -.03em;
    background: linear-gradient(92deg, #fff 20%, var(--accent-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.impact-hero-label {
    font-family: var(--font2);
    font-weight: 600;
    font-size: 17px;
    margin: 12px 0 0;
    opacity: .9;
}
.impact-hero-note {
    margin-top: 22px;
    font-size: 11.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent-blue);
    opacity: .85;
}
@media (max-width: 575px) {
    .impact-hero-stat { padding: 38px 26px; }
    .impact-hero-ring { display: none; }
}

/* Destekleyici dört hedef */
.impact-sub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
@media (max-width: 575px) {
    .impact-sub-grid { grid-template-columns: 1fr; }
}
.impact-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 24px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    transition: transform var(--dur-base) var(--ease-premium),
                background var(--dur-base) var(--ease-premium),
                border-color var(--dur-base) var(--ease-premium);
}
.impact-stat:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.09);
    border-color: rgba(0,168,232,.4);
}
.impact-stat-icon {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    color: var(--accent-blue);
    font-size: 17px;
    transition: transform var(--dur-base) var(--ease-premium);
}
.impact-stat:hover .impact-stat-icon { transform: scale(1.1); }
.impact-stat-num {
    display: block;
    font-family: var(--font2);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -.02em;
}
.impact-stat p {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: .78;
    line-height: 1.45;
}

/* Çarpan zinciri: 25 kişi → 20 genç/atölye → 600+ ulaşım */
.cascade {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
}
@media (max-width: 991px) {
    .cascade { grid-template-columns: 1fr; gap: 6px; }
}
.cascade-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-lg);
    padding: 34px 26px 28px;
    text-align: center;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.cascade-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.cascade-index {
    position: absolute;
    top: 14px; left: 20px;
    font-family: var(--font2);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--primary-blue);
    opacity: .35;
}
.cascade-num {
    display: block;
    font-family: var(--font2);
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -.03em;
    background: var(--gradient2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cascade-step h4 {
    font-family: var(--font2);
    font-weight: 700;
    font-size: 16px;
    margin: 12px 0 8px;
    color: var(--ink);
}
.cascade-step p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}
.cascade-step-final {
    background: var(--gradient1);
    border-color: transparent;
    box-shadow: var(--shadow-glow);
}
.cascade-step-final .cascade-index { color: #fff; opacity: .55; }
.cascade-step-final .cascade-num {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}
.cascade-step-final h4 { color: #fff; }
.cascade-step-final p { color: rgba(255,255,255,.88); }
.cascade-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    opacity: .4;
    font-size: 18px;
    padding: 0 4px;
}
@media (max-width: 991px) {
    .cascade-arrow { transform: rotate(90deg); padding: 6px 0; }
}

/* ==========================================================================
   GİRİŞ ANİMASYON SİSTEMİ — tek kaynak (IntersectionObserver)

   WOW.js/animate.css ve GSAP'in "önce gizle, scroll'da göster" yaklaşımı, görseller
   geç yüklenip sayfa yüksekliği değiştiğinde içeriği kalıcı görünmez bırakabiliyordu.
   Gizleme durumu artık YALNIZCA <html class="js-reveal"> varken uygulanır; script
   çalışmazsa hiçbir şey gizlenmez.
   ========================================================================== */

/* WOW.js / animate.css gizlemesini tamamen etkisizleştir (inline visibility dahil) */
.wow, .animated, [class*="animate__"] {
    visibility: visible !important;
    animation: none !important;
}

html.js-reveal [data-reveal] {
    opacity: 0;
    transition: opacity .75s var(--ease-premium),
                transform .75s var(--ease-premium),
                clip-path .85s var(--ease-premium);
    will-change: opacity, transform;
}
html.js-reveal [data-reveal="up"]    { transform: translateY(42px); }
html.js-reveal [data-reveal="left"]  { transform: translateX(-34px); }
html.js-reveal [data-reveal="right"] { transform: translateX(34px); }
html.js-reveal [data-reveal="scale"] { transform: scale(.93); }
html.js-reveal [data-reveal="mask"]  { opacity: 1; clip-path: inset(0 0 100% 0); }

html.js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}
/* clip-path YALNIZCA mask varyantına uygulanır. Daha önce her açılan elemana
   `clip-path: inset(0)` veriliyordu; bu "kırpma yok" demek değil, elemanı tam kendi
   kutusuna kırpmak demek — içindeki tüm box-shadow'lar kesiliyordu. Mask animasyonu
   bitince JS clip-path'i temizler (premium-fx.js), böylece orada da gölge kırpılmaz. */
html.js-reveal [data-reveal="mask"].is-revealed {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    html.js-reveal [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

/* ==========================================================================
   MOBİL RAFİNAJ (≤767px)
   Masaüstü için ayarlanmış tipografi ve iç boşluklar dar ekranda orantısız
   kalıyordu. Ölçülen somut sorunlar: KPI rakamı "10.000+" kutusundan taşıyordu
   (42px'te 170px içerik / 139px kutu), kart başlıkları Bootstrap'ın varsayılan
   h4/h5 boyutlarını (24px/20px) miras alıp gövde metnini eziyordu, CTA bandının
   40px yatay dolgusu 351px genişlikte içeriğe 271px bırakıyordu.
   ========================================================================== */
@media (max-width: 767px) {

    /* --- Bölüm başlıkları / eyebrow --- */
    .eyebrow {
        font-size: 11px;
        letter-spacing: 1.6px;
        margin-bottom: 10px;
    }
    .eyebrow::before { width: 20px; }

    /* --- KPI kartları: rakam kutuya sığmıyordu --- */
    .kpi-card { padding: 22px 8px; }
    .kpi-card .kpi-num { font-size: 30px; }
    .kpi-card p { font-size: 12.5px; line-height: 1.5; }
    .kpi-card .kpi-icon {
        width: 50px; height: 50px;
        font-size: 20px;
        margin-bottom: 12px;
    }

    /* --- Resource / özellik kartları --- */
    .resource-card {
        padding: 20px;
        gap: 14px;
        border-radius: var(--radius-md);
    }
    .resource-card h5 { font-size: 16px; line-height: 1.4; }
    .resource-card p { font-size: 13.5px; line-height: 1.65; }
    .resource-card .resource-icon {
        width: 46px; height: 46px;
        font-size: 19px;
    }

    /* --- Haber kartları --- */
    .card-title { padding: 18px; }
    .card .baslik { font-size: 15px; line-height: 1.45; }
    .card-btn { font-size: 12px; }

    /* --- Ortak kuruluş kartları --- */
    .hizmet-card-title {
        min-height: 84px;
        padding: 14px 12px !important;
    }
    .hizmet-card-title h5 { font-size: 14px; line-height: 1.4; }

    /* --- Faaliyet takvimi --- */
    .timeline { padding-left: 32px; margin-top: 40px; }
    .timeline-item { padding-bottom: 36px; }
    .timeline-item h4 { font-size: 17px; line-height: 1.4; }
    .timeline-item p { font-size: 14px; line-height: 1.7; }
    .timeline-item .timeline-date { font-size: 11.5px; padding: 4px 12px; }

    /* --- Çağrı bandı: yatay dolgu içeriği fazla daraltıyordu --- */
    .cta-band {
        padding: 44px 22px;
        border-radius: var(--radius-md);
    }
    .cta-band h2 { font-size: 24px; line-height: 1.3; }
    .cta-band p { font-size: 14.5px; margin-bottom: 22px; }

    /* --- SSS --- */
    .faq-accordion .faq-q { padding: 17px 18px; font-size: 15px; gap: 12px; }
    .faq-accordion .faq-a { padding: 0 18px; font-size: 14px; }
    .faq-accordion .faq-item.active .faq-a { padding-bottom: 18px; }

    /* --- Çarpan zinciri (Etki ve Sonuçlar) --- */
    .cascade-step { padding: 28px 20px 24px; }
    .cascade-num { font-size: 38px; }
    .cascade-step h4 { font-size: 15px; }
    .cascade-step p { font-size: 13px; }

    /* --- Butonlar: dokunma hedefi korunarak daraltıldı --- */
    .btn-style-1 {
        padding: 13px 26px;
        font-size: 14px;
    }
    .slider .btn-style-1 { padding: 13px 28px; font-size: 14px; }

    /* --- İç sayfa metin gövdesi --- */
    .hk-content { font-size: 15.5px; line-height: 1.85; }
    .hk-content h3 { font-size: 19px; margin: 26px 0 12px; }

    /* --- Kenar çubuğu başlığı --- */
    .sayfaBaslik h4 { font-size: 17px; }

    /* --- Hero metni: Bootstrap'ın pl-5 sınıfı mobilde 48px sol dolgu verirken sağ
           15px kalıyordu; metin sağa kaymış görünüyordu. Simetrik hâle getirildi.
           (pl-5 !important taşıdığı için burada da !important gerekiyor.) --- */
    .slider-yazi .col-12 {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    /* --- Ortak kuruluşlar carousel'i: oklar dar ekranda kartların ÜSTÜNE biniyordu
           (ok 323–373px, kart 195–351px). Dokunmatikte kaydırma doğal etkileşim ve
           yanda beliren kart zaten kaydırılabilirliği belli ediyor. --- */
    .faaliyetAlaniSlider .swiper-button-next,
    .faaliyetAlaniSlider .swiper-button-prev {
        display: none;
    }

    /* === 1) Sayfa başlığı (h1) küçültüldü — 28px'te iki satıra taşıyordu === */
    .short-title h1 { font-size: 22px; line-height: 1.3; }
    .short_image { height: 300px; padding-top: 138px; }

    /* === 2) Breadcrumb tek satırda kalsın === */
    .breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
        max-width: 100%;
        font-size: 12px;
    }
    .breadcrumb-item {
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* son (aktif) öğe uzunsa satır atlamak yerine üç nokta ile kısalır */
    .breadcrumb-item.active {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* === 4) Ana slider okları: yanlardan alınıp alt-ortaya yerleştirildi === */
    .slider .swiper-button-prev,
    .slider .swiper-button-next {
        top: auto !important;
        bottom: 104px;
        margin-top: 0 !important;
        width: 44px !important;
        height: 44px !important;
        left: 50%;
        right: auto;
    }
    .slider .swiper-button-prev { transform: translateX(-52px); }
    .slider .swiper-button-next { transform: translateX(8px); }
    /* hover kuralının translateX'i ezmemesi için konum korunarak ölçekleniyor */
    .slider .swiper-button-prev:hover { transform: translateX(-52px) scale(1.06); }
    .slider .swiper-button-next:hover { transform: translateX(8px) scale(1.06); }
    .slider .swiper-button-next::after,
    .slider .swiper-button-prev::after { font-size: 14px !important; }

    /* === 5) Anasayfa "Son Haberler": mobilde 2'li ızgara === */
    .son-haberler .stagger-group { margin-left: -7px; margin-right: -7px; }
    .son-haberler .stagger-group > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 7px;
        padding-right: 7px;
    }
    .son-haberler .card-title { padding: 13px 12px; }
    .son-haberler .card .baslik {
        font-size: 12.5px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .son-haberler .card-btn { font-size: 11px; gap: 6px; }
}

/* === 3) Hamburger butonu: kapsüle dikey ortalandı + sticky değilken beyaz ===
   Tetikleyici `position:absolute` ve konumlandırıcı atası yüksekliği 0 olan
   nav.navbar idi; bu yüzden sabit `top:35px` ile kapsülün ortasına denk gelmiyordu.
   Nav'ı static yapıp kapsülü konumlandırıcı yaparak %50 + translate ile ortalanıyor. */
@media (max-width: 991px) {
    header .container > .row { position: relative; }
    /* Tetikleyici ile kapsül arasında konumlandırılmış iki ara sarmalayıcı vardı
       (.col-12 ve .z-10); bunlar containing block'u kapıyordu. Mobilde header
       zaten fixed + yüksek z-index olduğu için .z-10'a gerek yok. */
    .navbar.header-nav,
    header .container > .row > .col-12,
    header .container > .row .row > .col-12 { position: static; }

    .hc-nav-trigger,
    .is-sticky .hc-nav-trigger {
        top: 50% !important;
        transform: translateY(-50%);
        right: 30px;
    }
    /* sticky değilken koyu hero/başlık bandı üzerinde: beyaz */
    .hc-nav-trigger span,
    .hc-nav-trigger span::before,
    .hc-nav-trigger span::after {
        background-color: #fff;
    }
    /* sticky olunca zemin açık cama döndüğü için koyu */
    header.is-sticky .hc-nav-trigger span,
    header.is-sticky .hc-nav-trigger span::before,
    header.is-sticky .hc-nav-trigger span::after {
        background-color: var(--primary-blue);
    }
}
.cnvs-links a {
    display: flex !important;
    align-items: center;
    font-size: 12px;
}
.cnvs-links a i{
    flex: 0 0 30px;
}

.galeri-kutu {
    width: 100%;
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
}
.galeri-kutu img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.galeri-kutu a{
    display: flex;
    justify-content: center;
    align-items: center;
}
.galeri-kutu i{
    position: absolute;
    transform: scale(0);
    transition: all .4s;
    color: white;
    font-size: 26px;
}
.galeri-kutu:hover i{
    transform: scale(1);
}