:root {
    --brand: #0066b2;
    --brand-dark: #2748D8;
    --accent-1: #0066b2;
    --accent-2: #8B5CF6;

    --bg: #F5F7FB;
    --text: #0F172A;
    --muted: #64748B;
    --muted-2: #94A3B8;
    --line: #E5E7EB;
    --nav: #334155;
    --dot: #f5f5f5;
    --dot-active: #616a7f;

    --hero-mask:
        radial-gradient(1100px 520px at 68% 34%, rgb(0 4 255 / 0%) 0%, rgb(0 13 255 / 8%) 40%, rgb(0 15 44 / 85%) 100%);

    --container: 1200px;
    --radius: 14px;
    --gap: 18px;

    --angled-bg: #2d3a4f;
    --footer-bg: #0F1420;
    --footer-sep: rgba(255, 255, 255, .08);
}

/* =====================
   BASE
===================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.logo {
    height: 35px;
}

body {
    margin: 0;
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    background-image:
        radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);

    background-size: 12px 12px, 12px 12px;
    background-position: 0 0, 6px 6px;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.spacer {
    flex: 1;
}

a {
    color: #f5f5f5;
    font-weight: bold;
}

/* --- Tunable tokens (mevcut root değişkenlerinle uyumlu) --- */
:root {
    --header-bg: rgba(17, 25, 40, .55);
    --header-line: rgba(255, 255, 255, .14);
    --header-ink: #fff;
    --header-shadow: 0 10px 30px rgba(2, 8, 20, .35);
    --header-glow: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 40%);
}

/* Motion duyarlı */
@media (prefers-reduced-motion: reduce) {
    header {
        transition: none !important;
    }
}

/* Varsayılan: (Ana sayfada) transparan üstte oturur */
header {
    position: absolute;
    inset: 0 auto auto 0;
    right: 0;
    top: 0;
    z-index: 40;
    /* Esnek yatay padding: 16–28px, dikey 12–18px */
    padding: clamp(12px, 1.8vw, 18px) clamp(16px, 2.2vw + env(safe-area-inset-left), 28px);
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    width: 100%;
    transition: background .25s, backdrop-filter .25s, box-shadow .25s, padding .2s, border-color .25s;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Scroll ile (ana sayfa): cam + sıkı padding */
header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--header-bg) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--header-line);
    box-shadow: var(--header-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
    padding: 10px max(18px, calc(env(safe-area-inset-left) + 18px));
}

header.sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--header-glow);
}





/* Birincil nav tek satır; taşanları JS ile "Daha"ya aktaracağız */
header .primary {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 16px);
    white-space: nowrap;
    flex-wrap: nowrap;
    /* kritik: asla alt satır yok */
    overflow: visible;
    /* JS ile node taşıyoruz; clipping yok */
    position: relative;
}

/* Linkler minimum daralma davranışı */
header .primary>a {
    flex: 0 0 auto;
}

/* "Daha..." kapsayıcısı */
.nav-more {
    position: relative;
    flex: 0 0 auto;
}

.more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--header-line, rgba(255, 255, 255, .1));
    background: transparent;
    cursor: pointer;
    transition: transform .15s ease;
}

.more-btn:focus-visible {
    outline: 2px solid #7aa2ff;
    outline-offset: 2px;
}

.more-btn[aria-expanded="true"] {
    transform: rotate(90deg);
}

/* Dropdown */
.more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--header-line, rgba(255, 255, 255, .12));
    border-radius: 10px;
    background: var(--header-bg, rgba(15, 23, 35, .7));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    display: none;
    /* JS ile aç/kapat */
    z-index: 120;
}

.more-menu a[role="menuitem"] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
}

.more-menu a[role="menuitem"]:hover,
.more-menu a[role="menuitem"]:focus-visible {
    background: rgba(255, 255, 255, .06);
}

/* Sticky olunca da doğru z-index */
header.sticky .more-menu {
    z-index: 160;
}







/* Ana sayfa HARİÇ: her zaman cam */
body:not(.is-home) header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--header-bg) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--header-line);
    box-shadow: var(--header-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
    padding: 10px max(18px, calc(env(safe-area-inset-left) + 18px));
}

body:not(.is-home) header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--header-glow);
}

/* --- Brand --- */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .4px;
}

.brand .logo {
    height: clamp(22px, 3.2vw, 34px);
    width: auto;
    display: block;
}

/* --- Primary Nav --- */
nav.primary {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.2vw, 12px);
    margin-left: 10px;
    position: relative;
    flex-wrap: nowrap;
}

nav.primary a {
    color: var(--nav);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(12px, 1.2vw, 13px);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .95;
    line-height: 1;
}

nav.primary a:hover {
    color: #fff;
}

nav.primary a.active {
    color: var(--brand);
}

.nav-dot {
    width: 4px;
    height: 4px;
    background: #98a2b3;
    border-radius: 50%;
}

/* --- Utility (arama/telefon/sosyal) --- */
header .utility {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.utility {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 10px 6px 14px;
    background: rgb(255 255 255 / 10%);
    border: 1px solid var(--header-line);
    border-radius: 28px;
    height: 40px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.utility .phone,
.utility .social a {
    font-size: 13px;
    color: var(--header-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
}

.utility .social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.utility .social a:hover {
    opacity: .85;
}

.utility .divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, .16);
}

.utility .search {
    position: relative;
    width: clamp(160px, 14vw, 260px);
}

.utility .search input {
    width: 100%;
    height: 28px;
    border-radius: 18px;
    background: rgb(255 255 255 / 21%);
    border: 1px solid rgb(255 255 255 / 56%);
    color: #f5f5f5;
    padding: 6px 12px 6px 34px;
    outline: none;
    font-size: 13px;
}

.utility .search input::placeholder {
    color: #f5f5f5;
}

.utility .search i {
    position: absolute;
    left: 10px;
    top: 6px;
    font-size: 14px;
    color: #f5f5f5;
}


/* ===== Teklif Al CTA ===== */
.cta-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 clamp(14px, 2vw, 18px);
    margin-left: 10px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .2px;
    text-decoration: none;
    color: #fff;
    background: var(--brand);
    border: 1px solid color-mix(in oklab, var(--brand) 70%, #fff 30%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18), inset 0 -1px 0 rgba(255, 255, 255, .15);
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    will-change: transform;
    min-width: max-content;
}

.cta-quote:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
}

.cta-quote:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

.cta-quote:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Sticky veya cam zeminde kontrastı koru */
header.sticky .cta-quote,
body:not(.is-home) header .cta-quote {
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(255, 255, 255, .18);
}

/* Responsive: dar ekranlarda daha kompakt */
@media (max-width:1100px) {
    .cta-quote {
        height: 38px;
        padding: 0 14px;
    }
}

@media (max-width:800px) {

    /* Utility içindeki arama gizlenince CTA rahatlar */
    .cta-quote {
        margin-left: 8px;
    }
}

@media (max-width:560px) {

    /* Çok dar ekranda kısa etiket */
    .cta-quote {
        padding: 0 12px;
        font-weight: 800;
        font-size:.8rem;
    }
}



/* --- Mobile Toggle --- */
.mobile-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 10%);
    border: 1px solid var(--header-line);
    color: #fff;
}

/* --- Spacer: nav ve utility arasında alan --- */
.spacer {
    flex: 1;
}

/* =====================
   R E S P O N S I V E
===================== */

/* 1280 ve altı: boşlukları daralt */
@media (max-width:1280px) {
    nav.primary {
        gap: clamp(10px, 1.5vw, 18px);
    }
}

/* 1100 ve altı: mobil düzen: nav gizle, toggle göster, utility sadeleşsin */
@media (max-width:1100px) {
    .mobile-toggle {
        display: flex;
    }

    nav.primary {
        display: none;
    }

    /* Drawer/Offcanvas JS’in varsa burada devreye girer */
    .utility {
        gap: 10px;
        height: 38px;
        padding: 4px 8px;
    }

    .utility .phone {
        display: none;
    }

    .utility .divider {
        display: none;
    }

    .utility .search {
        width: clamp(110px, 20vw, 160px);
    }
}

/* 800 ve altı: arama da sadeleşsin */
@media (max-width:800px) {
    .utility .search {
        display: none;
    }
}

/* 600 ve altı: logo ve header paddings iyice sıkışsın */
@media (max-width:600px) {
    header {
        padding: 10px max(12px, calc(env(safe-area-inset-left) + 12px));
    }

    .brand .logo {
        height: 26px;
    }
}

/* Yüksek DPI/çok dar ekranlar için güvenlik: öğeler taşmasın */
header,
nav.primary,
.utility {
    min-width: 0;
}

nav.primary a,
.utility .phone,
.utility .social a {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Koyu cam zemin üzerinde nav linklerinin rahat okunması için
   sticky/glass hâlinde link rengi beyaza yaklaşır; aktifte brand rengi korunur */
header.sticky nav.primary a,
body:not(.is-home) header nav.primary a {
    color: rgba(255, 255, 255, .92);
}

header.sticky nav.primary a.active,
body:not(.is-home) header nav.primary a.active {
    color: var(--brand);
}

/* Daha iyi tıklanabilirlik */
nav.primary a,
.utility .social a {
    padding: 6px 2px;
}

.cart {
    margin-right: 14px;
    color: var(--brand);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

/* Mobile header controls */
.mobile-toggle {
    margin-left: 8px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
}

.mobile-toggle:focus {
    outline: 2px solid #fff3;
    outline-offset: 2px;
}

/* Mobile Drawer */
.mobile-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: 84vw;
    max-width: 380px;
    background: #0d1117;
    color: #e6edf7;
    z-index: 120;
    transform: translateX(100%);
    transition: transform .3s;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-drawer.open {
    transform: translateX(0);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .5);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #1f2630;
}

.drawer-body {
    padding: 14px 18px 24px;
    display: grid;
    gap: 12px;
}

.drawer-body a {
    color: #d0dae7;
    text-decoration: none;
    font-weight: 800;
    padding: 12px 10px;
    border-radius: 8px;
    background: #0f1723;
    border: 1px solid #1f2a3a;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-body a:hover {
    background: #111c2a;
    color: #fff;
}

.drawer-footer {
    margin-top: auto;
    padding: 16px 18px;
    border-top: 1px solid #1f2630;
    display: grid;
    gap: 12px;
}

.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

/* =====================
   PRIMARY NAV DROPDOWN
===================== */
nav.primary .mi {
    position: relative;
}

.mi-btn {
    background: transparent;
    border: 0;
    color: var(--nav);
    font-weight: 800;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
}

.mi-btn:hover {
    color: #fff;
}

.submenu {
    position: absolute;
    top: calc(100% + 12px);
    left: -10px;
    z-index: 120;
    min-width: 520px;
    background: rgba(12, 16, 24, .96);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    border-radius: 14px;
    padding: 16px;
    display: grid;
    grid-auto-flow: column;
    gap: 24px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}

.sub-col {
    display: grid;
    gap: 8px;
    min-width: 160px;
}

.sub-ttl {
    font-weight: 900;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: .3px;
}

.submenu a {
    color: #d6deec;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    display: block !important;
}

.submenu a:hover {
    color: #fff;
}

.has-sub.open>.submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.has-sub.open>.mi-btn {
    color: #fff;
}

header.sticky .submenu {
    top: calc(100% + 8px);
}

@media (hover:hover) {
    .has-sub:hover>.submenu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* =====================
   SLIDER / HERO
===================== */
.slider {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    background: #05070a center/cover no-repeat;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .8s, transform 1.2s;
}

.slide.active {
    opacity: 1;
    transform: scale(1);
}

.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-mask);
}

.slide.s1 {
    background-image: url('https://autoparts.themerex.net/wp-content/uploads/2017/06/slide-1-bg.jpg');
}

.slide.s2 {
    background-image: url('https://autoparts.themerex.net/wp-content/uploads/2017/07/slide-2-bg.jpg');
}

.slide.s3 {
    background-image: url('https://autoparts.themerex.net/wp-content/uploads/2017/06/slide-1-bg.jpg');
}

.hero-inner {
    position: absolute;
    z-index: 10;
    left: 5%;
    transform: translateX(0%);
    width: 100%;
    max-width: var(--container);
    padding: 220px 28px 120px;
    pointer-events: none;
}

.headline {
    font-size: clamp(42px, 7vw, 88px);
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.35;
    /*     display: flex;
    flex-wrap: wrap; */
    gap: 18px;
    align-items: baseline;
    margin: 0;
    color: #fff;
}

.headline .cyan {
    color: var(--brand);
}

.headline .white {
    color: #fff;
    font-weight: 800;
}

.sub {
    margin-top: 18px;
    font-size: clamp(22px, 5vw, 64px);
    font-weight: 700;
    color: #eaf0f8;
}

.desc {
    margin-top: 22px;
    max-width: 640px;
    color: #c8d0dc;
    line-height: 1.7;
    font-size: 20px;
    font-weight: 500;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateX(0%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0%) translateY(0);
    }
}

.hero-bump {
    animation: heroFadeUp .45s ease both;
}

.dots {
    position: absolute;
    left: 50%;
    bottom: 20%;
    z-index: 15;
    display: flex;
    gap: 10px;
    align-items: center;
    transform: translateX(-50%);
    pointer-events: auto;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot);
    opacity: .6;
    cursor: pointer;
    transition: opacity .2s, transform .2s;
}

.dot.active {
    background: var(--dot-active);
    opacity: 1;
    transform: scale(1.2);
}

.qa {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-45%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 60;
    pointer-events: auto;
}

.qa a {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 60, 0, .25);
}

.qa a:hover {
    background: var(--brand-dark);
}

.side-visual {
    position: absolute;
    right: clamp(12px, 5vw, 60px);
    bottom: clamp(40px, 12vh, 140px);
    width: min(34vw, 520px);
    max-height: 58vh;
    z-index: 18;
    pointer-events: none;
    --press: 9deg;
    --roll: .6deg;
    --squash: .996;
    transform-origin: 50% 90%;
    animation: press-sway 6.2s ease-in-out infinite;
    animation-play-state: paused;
    will-change: transform;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35));
}

.slide.active .side-visual {
    animation-play-state: running;
}

.side-visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    user-select: none;
}

@keyframes press-sway {
    0% {
        transform: perspective(900px) rotateY(calc(var(--press)*-1)) rotateZ(calc(var(--roll)*-1)) scaleX(var(--squash));
    }

    50% {
        transform: perspective(900px) rotateY(var(--press)) rotateZ(var(--roll)) scaleX(var(--squash));
    }

    100% {
        transform: perspective(900px) rotateY(calc(var(--press)*-1)) rotateZ(calc(var(--roll)*-1)) scaleX(var(--squash));
    }
}

/* =====================
   ANGLED FEATURE STRIP
===================== */
.angled-section {
    position: relative;
    background: var(--angled-bg);
    color: #eaf7f6;
    padding: 60px 0 120px 0;
    z-index: 5;
}

.angled-section .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.angled-section h3 {
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: .3px;
}

.angled-section p {
    margin: 0;
    color: #e2f1ef;
    opacity: .95;
    line-height: 1.7;
}

.angled-section .cover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 99%;
    z-index: -1;
    overflow: hidden;
}

/* =====================
   STATS STRIP
===================== */
.stats-strip {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: var(--bg-url, url('https://idealauto.jwsuperthemes.com/wp-content/uploads/2021/01/alex-suprun-AHnhdjyTNGM-unsplash.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

@media (hover:hover) {
    .stats-strip {
        background-attachment: fixed;
    }
}

.stats-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    mix-blend-mode: multiply;
    z-index: 0;
}

.stats-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  justify-items: center;
  align-items: center;  
  text-align: center;   
}

.metric {
    position: relative;
    display: flex;
    flex-direction: column;
}

.metric .value {
    position: relative;
    color: #fff;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    padding: 16px 18px;
    border-radius: 6px;
    letter-spacing: 1px;
    min-width: 110px;
    text-align: left;
}

.metric .value::after {
    content: "";
    position: absolute;
    top: 8px;
    left: -4px;
    width: 72px;
    height: 90px;
    background: var(--brand-dark);
    border-radius: 20px 0 0 0;
    z-index: -1;
}

.metric .label {
    padding-left: 15px;
    font-weight: 700;
    letter-spacing: .3px;
}

.metric .label .top {
    font-size: 16px;
    color: #dbeafe;
}

.metric .label .bottom {
    font-size: 16px;
    color: #fff;
}

/* =====================
   LATEST POSTS
===================== */
.latest-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 72px 24px 120px;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}

.latest-title {
    flex: 0 0 30%;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .95;
    margin: 0;
}

.post-list {
    flex: 1 1 0%;
    min-width: 0;
    position: relative;
}

.post {
    position: relative;
    padding: 28px 0 34px;
    border-bottom: 1px solid var(--line);
}

.post .row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.date {
    flex: 0 0 80px;
    color: var(--muted-2);
    text-transform: uppercase;
    line-height: 1.05;
}
.date .mon { font-size: 14px; opacity: .9; }
.date .day { font-size: 34px; font-weight: 700; color: #161616; margin-top: 4px; }

.meta {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
}
.meta .sep {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-1); display: inline-block;
}

.content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.post .thumb {
    flex: 0 0 200px;
    width: 200px;
    aspect-ratio: 16 / 9;
    background: #0b0b0b center/cover no-repeat;
    border: 1px solid #1d1d1d;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    border-radius: 10px;
    overflow: hidden;
}
.post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content-body {
    flex: 1 1 auto;
    min-width: 0;
}

.content .title {
    display: block;
    margin-top: 6px;
    padding-left: 1rem;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #161616;
    text-decoration: none;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.content .title::after { content: none; }
.post::before { content: none; }
.post:hover .title { color: #000; } 

/* ============ Responsive ============ */
@media (max-width: 980px) {
    .latest-wrap {
        gap: 28px;
        padding: 56px 16px 90px;
    }
    .latest-title {
        flex: 1 1 100%;
        font-size: 40px;
        line-height: 1.1;
        margin: 0;
    }

    .post { padding: 22px 0 24px; }

    .post .row {
        align-items: flex-start;
        gap: 16px;
    }

    /* Görsel akışa tam genişlikte girsin */
    .post .thumb {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16/9;
        margin-top: 10px;
        box-shadow: 0 12px 32px rgba(0,0,0,.12);
    }

    .content {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .content .title { font-size: 32px; padding-left: 0; }
}

@media (max-width: 820px) {
    .date .day { font-size: 28px; }
}

@media (max-width: 640px) {
    .content .title { font-size: 26px; }
    .meta { font-size: 12px; letter-spacing: .14em; }
}

@media (max-width: 480px) {
    .date .day { font-size: 24px; }
    .content .title { font-size: 22px; }
}





/* === Kategoriler === */
.category-grid {
    padding: 48px 0;
    margin: 0 auto;
    max-width: 1300px;

}

.category-grid .cg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.category-grid .cg-list {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media(max-width:1280px) {
    .category-grid .cg-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media(max-width:768px) {
    
    .category-grid{
        padding:24px 5%;
    }
    .category-grid .cg-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .product-slider{
        padding:24px 5% !important;
    }
}

.cg-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
}

.cg-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    background: #f3f4f6 var(--bg) center/cover no-repeat;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.cg-title {
    font-weight: 700;
    color: #111827;
    line-height: 1.2
}
/* === Ürün Slider === */
.product-slider{padding:36px 0 12px;margin:0 auto;max-width:1300px}
.ps-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ps-actions{display:flex;gap:8px}
.ps-nav{width:36px;height:36px;border:1px solid #e5e7eb;background:#fff;border-radius:8px;cursor:pointer}

.ps-card{scroll-snap-align:start;border:1px solid #e5e7eb;border-radius:12px;background:#fff;display:flex;flex-direction:column;height:100%}
.ps-thumb{display:block;border-bottom:1px solid #f1f5f9;border-top-left-radius:12px;border-top-right-radius:12px;overflow:hidden}
.ps-thumb img{width:100%;height:220px;object-fit:cover;display:block}
.ps-body{padding:12px;display:flex;flex-direction:column;gap:6px}
.ps-title{font-weight:700;color:#0f172a;text-decoration:none}

/* Swiper loader görünürlüğü için (opsiyonel) */
.swiper-lazy-preloader{--size:22px;width:var(--size);height:var(--size)}


/* =====================
   GALLERY
===================== */
.gallery {
    margin: 0 auto;
    max-width: 1600px;

    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "left right1 right2" "left right3 right3";
    gap: var(--gap);
    padding: 0 24px 80px;
}

.tile {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    background: #111;
    isolation: isolate;
    border-radius: var(--radius);
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform .5s ease;
    z-index: 0;
    background-image: var(--img);
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55) 100%);
    z-index: 1;
}

.tile:hover::before {
    transform: scale(1.05);
}

.caption {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* === Gallery: caption + CTA hizası ve katman düzeltmeleri === */

/* 1) Arka planın iki kez set edilmesini engelle (sadece ::before kullanalım) */
.gallery .tile {
    /* varsa bu satır kalsın ama background-image: var(--img); KALDIRILSIN */
    background-image: none !important;
}

/* 2) İçerik grubunu mutlak konumla, başlık ve CTA'yı alt alta tut */
.gallery .tile .caption-wrap {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 2;
    /* ::after (1) üstüne çık */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    /* tüm kutu tıklanabilir kalsın */
}

/* 3) Başlığı akışa al (absolute değil), CTA'nın üstünde dursun */
.gallery .tile .caption {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    display: inline-block;
    margin: 0;
    pointer-events: auto;
    /* link/selection için */
}

/* 4) CTA katmanı ve görünürlük davranışı (masaüstü hover, mobil her zaman) */
.gallery .tile .cta {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    color: white;
}

.gallery .tile:hover .cta,
.gallery .tile:focus-visible .cta {
    opacity: 1;
    transform: translateY(0);
}

/* 5) Overlay katmanı (hatırlatma): altta kalsın */
.tile::after {
    z-index: 1;
}

/* 6) Mobil: CTA her zaman açık */
@media (hover:none),
(pointer:coarse),
(max-width:768px) {
    .gallery .tile .cta {
        opacity: 1;
        transform: none;
    }
}



.left {
    grid-area: left;
    min-height: 100vh;
}

.r1 {
    grid-area: right1;
    min-height: 320px;
}

.r2 {
    grid-area: right2;
    min-height: 320px;
}

.r3 {
    grid-area: right3;
    min-height: 340px;
}

/* =====================
   MAILING STRIP
===================== */
.mailing-strip {
    position: relative;
    isolation: isolate;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 90px 40px 110px;
    border-bottom: 3px solid var(--brand-dark);
    background: var(--hero-mask), url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=2400&auto=format&fit=crop") center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

.mailing-left {
    max-width: 620px;
    z-index: 2;
}

.ml-eyebrow {
    font-size: 12px;
    letter-spacing: .26em;
    font-weight: 800;
    color: #ffb4a2;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.ml-title {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.ml-desc {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.8;
    color: #e3e9f3;
    max-width: 520px;
}

.ml-row {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.ml-input {
    width: 360px;
    height: 52px;
    border-radius: 8px;
    outline: none;
    border: 2px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .06);
    color: #eaf1fb;
    font-weight: 600;
    padding: 0 16px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.ml-input::placeholder {
    color: #a9b5c6;
}

.ml-btn {
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(255, 60, 0, .28);
}

.ml-btn:hover {
    filter: brightness(.95);
}

.ml-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #cfd7e9;
}

.ml-consent a {
    color: #e6edf7;
    text-decoration: none;
    font-weight: 800;
}

.ml-consent a:hover {
    text-decoration: underline;
}

.mailing-right {
    position: relative;
    min-height: 360px;
}

.truck {
    position: absolute;
    right: -40px;
    bottom: -70px;
    max-width: 900px;
    width: 105%;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55));
    pointer-events: none;
    user-select: none;
}

.ml-watermark {
    position: absolute;
    left: 0;
    bottom: 20px;
    font-weight: 900;
    font-size: 140px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .06);
    z-index: 1;
    pointer-events: none;
    user-select: none;
    font-style: italic;
}

/* layering safety */
.mailing-strip .truck,
.mailing-strip .ml-watermark {
    transform: translate3d(0, 0, 0);
}

.mailing-strip .ml-watermark {
    z-index: 1;
}

.mailing-strip .truck {
    z-index: 2;
}

/* =====================
   FOOTER
===================== */
.site-footer {
    background: var(--footer-bg);
    color: #cfd6e4;
    border-top: 3px solid var(--brand-dark);
}

.site-footer .container {
    max-width: 1500px;
    margin-inline: auto;
    padding: 56px 24px 28px;
}

.footer-top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem
}

.footer-col h4 {
    margin: 0 0 16px;
    color: #fff;
    font-weight: 800;
    letter-spacing: .3px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.footer-brand .mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 35%, #fff 0 14%, transparent 15%),
        radial-gradient(circle at 65% 65%, #fff 0 14%, transparent 15%),
        radial-gradient(circle at 35% 65%, #fff 0 14%, transparent 15%),
        radial-gradient(circle at 65% 35%, #fff 0 14%, transparent 15%), var(--brand);
    box-shadow: 0 6px 18px rgba(255, 60, 0, .25);
}

.brand-text {
    font-weight: 900;
    letter-spacing: .3px;
    font-size: 20px;
}

.brand-text .auto {
    color: #fff;
}

.brand-text .soe {
    color: var(--brand);
}

.footer-about {
    line-height: 1.8;
    margin-bottom: 15px;
}

.footer-connect {
    margin-top: 18px;
    color: #e6edf7;
    font-weight: 800;
}

.socials {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

.socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #1b1f26;
    color: #e5ecf7;
    text-decoration: none;
    border: 1px solid var(--footer-sep);
}

.socials a:hover {
    color: #fff;
}

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    margin-bottom: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.contact-item i {
    color: #fff;
    opacity: .9;
}

.livechat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1a1a1a;
    font-weight: 800;
    border-radius: 8px;
    padding: 6px 10px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 255, 255, .12);
}

.business-hours {
    margin-top: 14px;
    color: #e3e8f3;
    font-weight: 600;
    line-height: 1.8;
    font-size: 14px;
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.footer-list a {
    color: #cfd6e4;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.footer-list a:hover {
    color: #fff;
}

.footer-bottom {
    margin-top: 40px;
    border-top: 1px solid var(--footer-sep);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.brand-link {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.payments {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #1a1a1a;
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 12px;
}

.legal-links {
    display: flex;
    gap: 18px;
    justify-content: flex-end;
    text-align: right;
    flex-wrap: wrap;
}

.legal-links a {
    color: #cfd6e4;
    text-decoration: none;
    font-weight: 700;
}

.legal-links a:hover {
    color: #fff;
}

.back-to-top {
    position: fixed;
    right: 17px;
    bottom: 85px;
    z-index: 70;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: grid;
    place-items: center;
    border: 1px solid var(--footer-sep);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    cursor: pointer;
}

@media (min-width:1200px) {
    .footer-col {
        max-width: 20%;
    }

}

/* =====================
   RESPONSIVE
===================== */
@media (max-width:1200px) {
    .dots {
        left: 30px;
    }

    .utility .search {
        width: 200px;
    }
}

@media (max-width:1100px) {
    .footer-col.hide-md {
        display: none;
    }

    .legal-links {
        justify-content: center;
        margin-top: 2rem;
    }

    .payments {
        justify-content: center;
    }
}

@media (max-width:960px) {
    header {
        padding: 14px 16px;
    }

    nav.primary,
    .utility {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .hero-inner {
        padding: 160px 18px 90px;
    }

    .mailing-strip {
        grid-template-columns: 1fr;
        min-height: 560px;
        padding: 64px 20px 90px;
    }

    .mailing-right {
        order: -1;
        min-height: 220px;
    }

    .truck {
        position: relative;
        right: auto;
        bottom: 0;
        width: 100%;
    }

    .ml-row {
        flex-wrap: wrap;
    }

    .ml-input {
        flex: 1 1 100%;
        width: 100%;
    }

    .ml-btn {
        width: 200px;
    }

    .ml-watermark {
        display: none;
    }

    .angled-section .container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .stats-inner {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        row-gap: 18px;
    }

    .dots {
        left: 16px;
        bottom: 22px;
    }

    .qa {
        top: auto;
        bottom: 20px;
        transform: none;
        flex-direction: row;
    }
}

@media (max-width:820px) {
    .stats-inner {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        row-gap: 20px;
    }
}

@media (max-width:700px) {
    .gallery {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        padding: 0 16px 56px !important;
    }

    .left {
        min-height: 56vw;
    }

    .r1,
    .r2,
    .r3 {
        min-height: 48vw;
    }

    .headline {
        gap: 12px;
    }
}

@media (max-width:640px) {
    .gallery .left {
        min-height: 380px;
    }

    .gallery .r1,
    .gallery .r2,
    .gallery .r3 {
        min-height: 260px;
    }
}

/* =====================
   ACCESSIBILITY / MOTION
===================== */
@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .slide {
        transform: none !important;
    }
}

/* =====================
   HEADER (sticky tweaks)
===================== */
header.sticky .utility {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
}

header.sticky .brand .auto,
header.sticky .brand .parts {
    transform: translateY(-1px);
}

/* =====================
   SMALL FIXES
===================== */
@media (max-width:960px) {
    .submenu {
        display: none !important;
    }
}


.feat {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 20px;
}
.feat i{
    margin-bottom: 10px;
    font-size: 2rem;
}
/* === Angled Features: CTA'lar === */
.angled-section .feat-actions {
    grid-column: 1 / -1;
    /* 3 sütunun altına tam genişlikte otursun */
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.angled-section .cta-btn {
    height: 48px;
    padding: 0 20px;
    border-radius: 10px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand);
    color: #fff;
    border: 0;
    box-shadow: 0 10px 22px #00ffee40;
    transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}

.angled-section .cta-btn:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
}

.angled-section .cta-btn.ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgb(195 195 195 / 80%);
    box-shadow: none;
}

.angled-section .cta-btn.ghost:hover {
    background: rgba(255, 255, 255, .12);
}

/* küçük ekran dokunuşu */
@media (max-width: 700px) {
    .angled-section .feat-actions {
        justify-content: center;
    }

    .angled-section .cta-btn {
        height: 46px;
        padding: 0 18px;
    }
}

/* === Latest Posts: Mobile - resmi başlığın ÜSTÜNDE göster === */
@media (max-width: 980px) {

    /* Eski reveal davranışını kapat */
    .post {
        padding: 22px 0;
    }

    .post:hover,
    .post.is-active {
        padding: 22px 0;
    }

    /* Var olan .thumb'u gizle (DOM'u değiştirmeden) */
  
    /* Başlık üstünde responsive görsel */
    .post .title {
        position: relative;
    }


    /* Liste düzeni: tarih + içerik daha kompakt */
    .post .row {
        grid-template-columns: 72px 1fr;
        gap: 14px;
    }

    .title {
        font-size: 28px;
        -webkit-line-clamp: 3;
    }

    /* başlık biraz küçülsün */
}

.slide[data-type="duo"] .stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 5;
}

.slide[data-type="duo"] .stand {
    width: min(70vw, 980px);
    max-height: 62vh;
    object-fit: contain;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .35));
}

.slide[data-type="duo"] .product {
    position: absolute;
    width: min(46vw, 680px);
    max-height: 54vh;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35));
    transition: filter .25s ease;
}

.slide[data-type="duo"] .product::after {
    content: "";
    position: absolute;
    inset: -10%;
    background: radial-gradient(120px 60px at var(--glow-x, 50%) 10%,
            rgba(255, 255, 255, .25), transparent 60%);
    mix-blend-mode: screen;
    opacity: var(--glow-o, .0);
    pointer-events: none;
    transition: opacity .2s ease;
}

.slide[data-type="duo"] .product.is-hover {
    filter: drop-shadow(0 36px 56px rgba(0, 0, 0, .45));
}

.slide[data-type="duo"] .product.is-hover::after {
    --glow-o: .9;
}

/* Yönsel giriş mikro animleri */
@keyframes enter-left {
    from {
        transform: translate3d(-6%, -3vh, 0) rotateY(-8deg);
    }

    to {
        transform: translate3d(0, -3vh, 0);
    }
}

@keyframes enter-right {
    from {
        transform: translate3d(6%, -3vh, 0) rotateY(8deg);
    }

    to {
        transform: translate3d(0, -3vh, 0);
    }
}

@keyframes enter-top {
    from {
        transform: translate3d(0, -9vh, 0) rotateX(8deg);
    }

    to {
        transform: translate3d(0, -3vh, 0);
    }
}

@keyframes enter-bottom {
    from {
        transform: translate3d(0, 5vh, 0) rotateX(-6deg);
    }

    to {
        transform: translate3d(0, -3vh, 0);
    }
}

.slide[data-type="duo"] .product.dir-left {
    animation: enter-left .35s ease both;
}

.slide[data-type="duo"] .product.dir-right {
    animation: enter-right .35s ease both;
}

.slide[data-type="duo"] .product.dir-top {
    animation: enter-top .35s ease both;
}

.slide[data-type="duo"] .product.dir-bottom {
    animation: enter-bottom .35s ease both;
}

@media (prefers-reduced-motion: reduce) {

    .slide[data-type="duo"] .product,
    .slide[data-type="duo"] .stand {
        transition: none !important;
        animation: none !important;
    }
}

/* Hero metni mouse olaylarını engellemesin */
.hero-inner {
    pointer-events: none;
    z-index: 10;
    /* görsel olarak üstte kalsın ama etkileşim kapalı */
}

/* Dot’lar ve diğer kontroller tıklanabilir kalsın */
.dots,
header,
.qa {
    pointer-events: auto;
}

/* Atropos sahnesini maskelerin üzerine çıkar */
.slide[data-type="duo"] .stage {
    z-index: 20;
    /* .hero-inner (10) ve ::after maskesinin üstü */
    pointer-events: auto;
    /* Atropos root tıklanabilir */
}

/* Güvenlik: slide maskesinin çocukları kapatmaması için z-index vermeyelim.
   (Zaten vermemişsin; yine de hatırlatma) */
.slide::after {
    z-index: 0;
}



/* ===== Slide sağ görsel ===== */
.side-visual {
    position: absolute;
    right: clamp(12px, 5vw, 60px);
    bottom: clamp(40px, 12vh, 140px);
    width: min(34vw, 520px);
    max-height: 58vh;
    z-index: 18;
    pointer-events: none;
    /* Bastırma hissi için parametreler */
    --press: 9deg;
    /* yana eğim miktarı (rotateY) */
    --roll: 0.6deg;
    /* çok hafif roll (rotateZ) */
    --squash: .996;
    /* bastırılınca çok az sıkışma */
    transform-origin: 50% 90%;
    /* tabana yakın pivot daha gerçekçi */
    animation: press-sway 6.2s ease-in-out infinite;
    animation-play-state: paused;
    /* sadece aktif slaytta çalışsın */
    will-change: transform;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35));
}

.slide.active .side-visual {
    animation-play-state: running;
}

.side-visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    user-select: none;
}

/* Yana bastırma animasyonu: sadece yerde durup sağ/sola yük biniyormuş gibi */
@keyframes press-sway {
    0% {
        transform:
            perspective(900px) rotateY(calc(var(--press) * -1)) rotateZ(calc(var(--roll) * -1)) scaleX(var(--squash));
    }

    50% {
        transform:
            perspective(900px) rotateY(var(--press)) rotateZ(var(--roll)) scaleX(var(--squash));
    }

    100% {
        transform:
            perspective(900px) rotateY(calc(var(--press) * -1)) rotateZ(calc(var(--roll) * -1)) scaleX(var(--squash));
    }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
    .side-visual {
        animation: none !important;
        transform: none !important;
    }
}

/* Responsive ufak dokunuşlar */
@media (max-width:960px) {
    .side-visual {
        width: min(50vw, 360px);
        bottom: clamp(24px, 8vh, 80px);
        right: 16px;
    }
}

@media (max-width:560px) {
    .side-visual {
        display: none;
    }
}

/* ===== HERO CTA ===== */
.hero-cta {
    max-width: var(--container);
    padding: 0 28px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    pointer-events: auto;
    /* tıklanabilir! */
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px;
    border-radius: 10px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    background: var(--brand);
    color: #fff;
    border: 0;
    box-shadow: 0 12px 26px rgba(255, 60, 0, .28);
    transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}

.cta-btn:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
}

.cta-btn:active {
    transform: translateY(0);
}

.cta-btn.ghost {
    background: transparent;
    color: #161616;
    border: 2px solid rgb(195 195 195 / 80%);
    box-shadow: none;
}

.cta-btn.ghost:hover {
    background: rgba(255, 255, 255, .08);
}



/* CTA konumu ekranlara göre */
@media (max-width:960px) {
    .hero-cta {
        top: calc(160px + 18px + 80px);
        left: 0;
        right: 0;
        padding: 0 18px;
    }

    .logo {
        height: 25px;
    }
}

@media (max-width:560px) {
    .cta-btn {
        height: 48px;
        padding: 0 18px;
    }
}

.mailing-strip .truck,
.mailing-strip .ml-watermark {
    transform: translate3d(0, 0, 0);
}

.mailing-strip .ml-watermark {
    z-index: 1;
}

.mailing-strip .truck {
    z-index: 2;
}











/* ===== SUBHEADER ===== */
.page-subheader {
    position: relative;
    padding: clamp(56px, 10vw, 120px) 24px 28px;
    min-height: 330px;
    color: #fff;
    border-bottom: 3px solid var(--brand-dark);
    isolation: isolate;
    /* style içinden gelen görsel + maske */
    background:
        var(--hero-mask, linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55))),
        var(--page-subheader-bg, none) center/cover no-repeat;
}


.page-subheader .container {
    max-width: var(--container);
    margin-inline: auto
}

.breadcrumbs {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 5px #161616);
}

.breadcrumbs a {
    color: #fff;
    text-decoration: none;
    font-weight: 800
}

.breadcrumbs .sep {
    opacity: .6
}

.page-title {
    margin: 0;
    font-size: clamp(32px, 5vw, 45px);
    font-weight: 900;
    filter: drop-shadow(0 0 5px #161616);
}

.page-subdesc {
    margin: 10px 0 0;
    max-width: 920px;
    color: #ebf3ff;
    line-height: 1.8
}



@media(max-width: 768px){
    .page-subheader{
        padding-top: 14%;
    }
}

@media(max-width: 576px){
    .page-subheader{
        padding-top: 20%;
    }
}


/* ===== TOP BAR ===== */
/* ===== TOPBAR ===== */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.topbar .container {
    max-width: var(--container);
    margin-inline: auto;
    padding: 12px 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap
}

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer
}

.chip.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.topbar .search {
    position: relative;
    flex: 1;
    min-width: 220px;
    margin-left: auto
}

.topbar .search input {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--line);
    padding: 0 14px 0 38px;
    font-weight: 700
}

.topbar .search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b
}

.view-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    height: 44px
}

@media(max-width:760px) {
    .view-toggle{
        display: none;
    }
}

.view-toggle button {
    background: #fff;
    border: 0;
    width: 44px;
    display: grid;
    place-items: center;
    cursor: pointer
}

.view-toggle button.is-active {
    background: var(--brand);
    color: #fff
}

/* ===== LAYOUT ===== */
.wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px
}

.wrap.cozumler,
.wrap.docs,
.wrap.bloglar,
.wrap.galeri {
    grid-template-columns: 1fr;
}



@media (max-width:980px) {
    .wrap {
        grid-template-columns: 1fr
    }
}

/* =====================
   FILTERS
===================== */
.filters {
    position: sticky;
    top: 70px;
    align-self: start
}

.filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}
@media(max-width: 768px){
    .filters{
        position: static;
    }
}

.filter-title {
    font-weight: 700;
    font-size: 15px
}

.filter-reset {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none
}

.filter-reset:hover {
    text-decoration: underline
}

.filter {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden
}

.filter+.filter {
    margin-top: 12px
}

.filter summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    font-weight: 700;
    outline: none;
    border-bottom: 1px solid var(--line);
}

.filter[open] summary {
    color: var(--brand-ink)
}

.filter-body {
    padding: 12px 14px
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.pill-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    text-decoration: none;
    font-size: 13px;
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
    transition: border-color .2s, box-shadow .2s, transform .06s, background .2s;
}

.pill-link:hover {
    border-color: #c7ced6;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06)
}

.pill-link:active {
    transform: translateY(1px)
}

.pill-link .x {
    opacity: .6
}

.pill-link.is-active {
    border-color: transparent;
    background: color-mix(in oklab, var(--brand) 12%, #ffffff);
    outline: 2px solid var(--brand);
}



/* ===== GRID ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px
}

.card {
    grid-column: span 4;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    transition: transform .12s ease, box-shadow .22s ease
}

.card.urun {
    background: transparent;
    border: none;
    overflow: inherit;
}

.card.urun .media {
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    background: transparent;
}


@media(max-width:1200px) {
    .card {
        grid-column: span 6
    }
}

@media(max-width:760px) {
    .card {
        grid-column: span 12
    }
    .card .title{
        font-size:20px;
    }
}


.media {
    position: relative;
    aspect-ratio: 4/3;
    background: #0b0b0b
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease
}

.badges {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    gap: 6px;
    z-index: 2
}

.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2)
}

.actions {
    position: absolute;
    right: 10px;
    top: 10px;
    display: grid;
    gap: 8px;
    z-index: 2
}

.icon-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--line);
    color: #0f172a;
    cursor: pointer
}

.body {
    padding: 12px 12px 0;
    display: grid;
    gap: 8px
}

.brand {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 800
}

.card .title {
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.35;
    margin-bottom: 1rem;
}

.card.urun .media img {
    border-radius: 10px;
}

.summary {
    color: #334155;
    font-weight: 700
}

.kfacts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.k {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--line);
    font-weight: 800;
    font-size: 12px;
    color: #0f172a
}

.foot {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--line)
}

.btn {
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none
}

.btn.ghost {
    background: #fff;
    color: #0f172a;
    border: 2px solid #e5e7eb
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12)
}

.card:hover .media img {
    transform: scale(1.04)
}

/* ===== PAGINATION ===== */
.pagination {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap
}

.page-btn {
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 900;
    cursor: pointer
}

.page-btn.is-active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand)
}

.filter-reset {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer
}


.grid.list {
    display: block;
}

.grid.list .card.urun {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 1rem;
}

.grid.list .card.urun .media {
    width: 160px;
    height: 100px;
    flex: 0 0 160px;
}

.grid.list .card.urun .body {
    flex: 1;
}













/* Liste ızgarası aynı kalabilir */
.solutions {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

/* SADECE cozum kartları */
.card.cozum {
    grid-column: span 6;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 180px;
    transition: transform .12s ease, box-shadow .22s ease;
}

.card.cozum:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

/* Medya alanı */
.card.cozum .ph {
    background: #0b0b0b;
    position: relative;
}

.card.cozum .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1/1;
}

/* Rozet */
.card.cozum .badge {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

/* Gövde */
.card.cozum .body {
    padding: 12px;
    display: grid;
    gap: 10px;
}

.card.cozum .title {
    font-weight: 900;
    line-height: 1.35;
}

.card.cozum .meta {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    flex-wrap: wrap;
}

.card.cozum .desc {
    color: #334155;
    font-weight: 700;
}


/* Alt kısım ve butonlar */
.card.cozum .foot {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.card.cozum .btn {
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.card.cozum .btn.ghost {
    background: #fff;
    color: #0f172a;
    border: 2px solid #e5e7eb;
}

/* Küçük ekran iyileştirmesi (opsiyonel) */
@media (max-width: 768px) {
    .card.cozum {
        grid-template-columns: 1fr;
    }

    .card.cozum .ph {
        height: 180px;
    }
}



/* ===== FEATURED ===== */
.featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px
}

@media (max-width:900px) {
    .featured {
        grid-template-columns: 1fr
    }
}

.f-card {
    position: relative;
    min-height: 320px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #0b0b0b
}

.f-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--img) center/cover no-repeat;
    filter: contrast(1.05) brightness(.95);
    transition: transform .35s ease
}

.f-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .0) 34%, rgba(0, 0, 0, .65) 100%)
}

.f-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px;
    z-index: 2;
    color: #fff
}

.f-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e3e9f3;
    font-weight: 800
}

.f-title {
    margin: 8px 0 6px;
    font-weight: 900;
    font-size: clamp(22px, 3.5vw, 34px)
}

.f-desc {
    color: #e8eef8;
    font-weight: 700;
    opacity: .95
}

.f-card:hover::before {
    transform: scale(1.04)
}

/* ===== GRID LIST ===== */
/* ===== GRID LIST (scoped to .blog) ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px
}

.blog {
    grid-column: span 4;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    transition: transform .12s ease, box-shadow .22s ease;
}

@media(max-width:1200px) {
    .blog {
        grid-column: span 6
    }
}

@media(max-width:680px) {
    .blog {
        grid-column: span 12
    }
}

.blog .thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #0b0b0b;
}

.blog .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.blog .badge {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.blog .content {
    padding: 12px 12px 0;
    display: grid;
    gap: 8px;
}

.blog .meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.blog .title {
    font-weight: 900;
    font-size: 20px;
    line-height: 1.35;
}

.blog .excerpt {
    color: #334155;
    font-weight: 700;
}

.blog .foot {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
}

.blog .read {
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.blog .more {
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.blog:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12)
}

.blog:hover .thumb img {
    transform: scale(1.04)
}


/* =========================================================
       BLOG KARTI (DETAY)
       - article.blog: Tüm blog detayı kapsayan ana kart
       - .blog-hero: Kapak görseli
       - .blog-content: Başlık, alt başlık, paragraf, liste, kod vb.
       ========================================================= */
article.blog-detay {
    background: var(--dot);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden
}

.blog-hero {
    position: relative;
    aspect-ratio: 16/9;
    background: #0b0b0b
}

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

.blog-content {
    padding: 18px 18px 8px
}

.blog-content h1 {
    margin: 8px 0 12px;
    font-size: 34px;
    line-height: 1.2
}

.blog-content .blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-weight: 700
}

.blog-content h2 {
    margin: 22px 0 10px;
    font-size: 28px
}

.blog-content h3 {
    margin: 18px 0 8px;
    font-size: 22px
}

.blog-content p {
    color: #334155;
    line-height: 1.9;
    font-weight: 700
}

.blog-content ul,
.blog-content ol {
    color: #334155;
    font-weight: 700;
    line-height: 1.9;
    padding-left: 18px
}

.blog-content code {
    background: #0f1420;
    color: #e6edf7;
    padding: .12em .4em;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .9em
}

pre {
    background: #0f1420;
    color: #e6edf7;
    border-radius: 12px;
    border: 1px solid #223047;
    padding: 14px;
    overflow: auto
}

blockquote {
    margin: 14px 0;
    padding: 10px 14px;
    border-left: 4px solid var(--brand);
    background: #f8fafc;
    color: #0f172a;
    border-radius: 8px
}

figure {
    margin: 18px 0
}

figure img {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--line)
}

figcaption {
    color: #64748b;
    font-weight: 700;
    margin-top: 6px
}

/* =========================================================
       PAYLAŞIM + ETİKETLER
       - .blog-foot: Alt çubuk (etiketler + paylaşım ikonları)
       - .blog-tags / .blog-tag: Etiket yongaları
       - .blog-share / .icon-btn: Paylaşım butonları
       ========================================================= */
.blog-foot {
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between
}

.blog-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.blog-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--line);
    font-weight: 800
}

.blog-share {
    display: flex;
    gap: 8px
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
    color: #0f172a;
    cursor: pointer
}

/* =========================================================
       YAZAR KARTI
       - .blog-author: Yazar bilgi kartı
       ========================================================= */
.blog-author {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 16px 18px;
    border-top: 1px solid var(--line)
}

.blog-author img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line)
}

.blog-author .name {
    font-weight: 900
}

.blog-author .role {
    color: #64748b;
    font-weight: 800
}

/* =========================================================
       ÖNCEKİ / SONRAKİ YAZI
       - .blog-prevnext: Izgara
       - .blog-pn: Kart bağlantısı
       ========================================================= */
.blog-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px 18px;
    border-top: 1px solid var(--line)
}

.blog-pn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: #0f172a
}

.blog-pn small {
    color: #64748b;
    font-weight: 800
}

.blog-pn strong {
    font-weight: 900
}

@media(max-width:700px) {
    .blog-prevnext {
        grid-template-columns: 1fr
    }
}

/* =========================================================
       YAN SÜTUN
       - .blog-side: Sticky yan kolon
       - .blog-card: Basit kart
       - .blog-toc: Başlık içindekiler
       - .blog-callout: CTA alanı
       ========================================================= */
.blog-side {
    display: grid;
    gap: 14px;
    align-self: start;
    position: sticky;
    top: 86px
}

.blog-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px
}

.blog-toc {
    display: grid;
    gap: 8px
}

.blog-toc a {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #0f172a;
    font-weight: 800;
    border: 1px solid var(--line)
}

.blog-callout {
    display: grid;
    gap: 10px
}

.blog-callout .cta {
    height: 44px;
    border-radius: 10px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    cursor: pointer
}

/* =========================================================
       İLGİLİ İÇERİKLER
       - .blog-related: Liste
       - .rel: Tek ilgili içerik kartı
       ========================================================= */
.blog-related {
    display: grid;
    gap: 12px
}

.rel {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: #0f172a;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px;
    background: #fff
}

.rel img {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line)
}

/* ===== KATALOG / DOCS ALANI – SCOPE: .docs ===== */

.docs .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.docs .doc {
    grid-column: span 4;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    transition: transform .12s ease, box-shadow .22s ease;
}

@media (max-width:1200px) {
    .docs .doc {
        grid-column: span 6;
    }
}

@media (max-width:680px) {
    .docs .doc {
        grid-column: span 12;
    }
}

/* Kapak görseli */
.docs .thumb {
    position: relative;
    aspect-ratio: 16/10;
    background: #0b0b0b;
}

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

/* Rozet */
.docs .badge {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

/* Gövde */
.docs .body {
    padding: 12px 12px 0;
    display: grid;
    gap: 8px;
}

/* Meta satırı */
.docs .meta {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    flex-wrap: wrap;
}

/* Başlık + açıklama */
.docs .title {
    font-weight: 900;
    line-height: 1.35;
}

.docs .desc {
    color: #334155;
    font-weight: 700;
}

/* Dosya bilgisi */
.docs .fileinfo {
    display: flex;
    gap: 10px;
    color: #64748b;
    font-weight: 800;
}

/* Alt çubuk */
.docs .foot {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
}

/* Butonlar (docs scope) */
.docs .btn {
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.docs .btn.ghost {
    background: #fff;
    color: #0f172a;
    border: 2px solid #e5e7eb;
}

/* Hover/focus sadece docs içindeki kartlara */
.docs .doc:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.docs .btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent);
}













/* HERO */
.contact-hero {
    position: relative;
    padding: 120px 0 140px;
    background:
        radial-gradient(800px 400px at 80% -10%, rgba(61, 102, 245, .20), transparent 70%),
        radial-gradient(600px 360px at 10% 10%, rgba(139, 92, 246, .20), transparent 60%),
        #0c111b;
    color: #fff;
    overflow: hidden;
}

.contact-hero .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.contact-hero h1 {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: clamp(36px, 6vw, 64px);
    letter-spacing: .04em;
}

.contact-hero p {
    margin: 0;
    opacity: .86;
}

.contact-hero .angle-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -80px;
    height: 160px;
    background:
        linear-gradient(180deg, rgba(12, 17, 27, 0) 0%, rgba(12, 17, 27, 1) 80%),
        var(--hero-mask);
    transform: skewY(-3deg);
    transform-origin: 0 100%;
    pointer-events: none;
}

/* CONTENT WRAP */
.contact-wrap {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 34px;
    margin-top: 50px;
    margin-bottom: 40px;
    align-items: center;
}

/* LEFT SIDE */
.contact-info .ci-title {
    margin: 0 0 10px;
    font-weight: 800;
    font-size: 28px;
    color: var(--text);
}

.contact-info .ci-desc {
    margin: 0 0 18px;
    color: var(--muted);
}

.ci-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    gap: 14px;
}

.ci-list li {
    display: flex;
    align-items: start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 12px 12px;
    border-radius: 12px;
}

.ci-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 8px 22px rgba(61, 102, 245, .25);
}

.ci-text .ci-head {
    font-weight: 800;
    color: var(--text) !important;
}

.ci-text .ci-head a {
    font-weight: 800;
    color: var(--text) !important;
}

.ci-text .ci-sub {
    color: var(--muted);
    font-size: 13px;
}

.ci-note {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--muted);
}

/* RIGHT: FORM CARD */
.contact-card {
    position: relative;
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    padding: 22px 22px 18px;
    color: #eaf0ff;
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .20);
    background-color: #0f1624;
    /* koyu cam taban */
}

.card-title {
    margin: 0 0 8px;
    font-weight: 800;
    letter-spacing: .3px;
}

#contactForm .hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.f-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    font-weight: 700;
    color: #cfd7ea;
    font-size: 13px;
}

.field label span {
    color: #8ab4ff
}

.field input,
.field textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    padding: 10px 0;
    color: #fff;
    outline: none;
    font-weight: 600;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #93a0ba;
}

.error {
    color: #ffb4a2;
    font-size: 12px;
    min-height: 14px;
}

.consent {
    margin: 10px 0 4px;
    color: #cbd5e1;
    font-size: 13px;
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: #fff;
    border: 0;
    border-radius: 12px;
    height: 48px;
    padding: 0 20px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(61, 102, 245, .3);
}

.btn-primary:hover {
    filter: brightness(.96)
}

.btn-ghost {
    height: 48px;
    padding: 0 18px;
    border: 2px solid rgba(255, 255, 255, .5);
    color: #161616;
    background: transparent;
    border-radius: 12px;
    font-weight: 800;
}

.form-toast {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #eaf0ff;
}

/* MAP */
.contact-map {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

#map {
    width: 100%;
    height: 360px;
}



/* CTA STRIP */
.contact-cta {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    color: #fff;
    padding: 34px 0;
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cta-text h3 {
    margin: 0 0 4px;
    font-weight: 900;
}

.cta-text p {
    margin: 0;
    opacity: .9
}

.cta-form {
    display: flex;
    gap: 10px;
}

.cta-form input {
    height: 46px;
    border-radius: 10px;
    border: 0;
    padding: 0 14px;
    width: min(380px, 55vw);
}

.cta-form button {
    height: 46px;
    border: 0;
    border-radius: 10px;
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
    color: #1a1a1a;
    background: #fff;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .contact-wrap {
        grid-template-columns: 1fr;
    }
}

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

    .cta-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-form {
        width: 100%;
    }

    .cta-form input {
        width: 100%;
    }
}



/* ===== GALERİ SAYFASI (scope: .galeri) ===== */

.galeri .item {
    display: inline-block;
    margin: 0 0 18px;
    width: 100%;
    break-inside: avoid;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.galeri .thumb {
    position: relative;
}

.galeri .thumb img {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.galeri .badge {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.galeri .meta {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #64748b;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    flex-wrap: wrap;
}

.galeri .body {
    padding: 12px;
}

.galeri .title {
    font-weight: 900;
}

.galeri .desc {
    color: #334155;
    font-weight: 700;
    margin: 6px 0 0;
}

.galeri .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.galeri .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--line);
    font-weight: 800;
    font-size: 12px;
}

.galeri .actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.galeri .btn {
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.galeri .btn.ghost {
    background: #fff;
    color: #0f172a;
    border: 2px solid #e5e7eb;
}

/* ===== GRID ===== */
.galeri .grid {
    /* Eğer mevcut .grid global stilin varsa, bu satırlar onu override eder */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

@media (max-width:1200px) {
    .galeri .grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width:680px) {
    .galeri .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Kart genişliği kontrolü: 4 kolonluk kart */
.galeri .grid>.item {
    grid-column: span 4;
}

@media (max-width:1200px) {
    .galeri .grid>.item {
        grid-column: span 4;
    }
}

@media (max-width:680px) {
    .galeri .grid>.item {
        grid-column: span 4;
    }
}

/* ===== LIGHTBOX ===== */
.galeri .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 160;
}

.galeri .lightbox.open {
    display: flex;
}

.galeri .lb-inner {
    position: relative;
    max-width: 92vw;
    max-height: 86vh;
}

.galeri .lb-img {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 14px;
    border: 1px solid #1f2630;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.galeri .lb-cap {
    color: #e6edf7;
    font-weight: 700;
    margin-top: 8px;
    text-align: center;
}

.galeri .lb-actions {
    position: absolute;
    inset: auto 0 100% 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.galeri .icon-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--line);
    color: #0f172a;
    cursor: pointer;
}

.galeri .lb-close {
    position: absolute;
    top: -56px;
    right: 0;
}

/* ===== LOAD MORE ===== */
.galeri .load {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.galeri .load .btn {
    min-width: 200px;
}










/* ===== INTRO ===== */
.intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 10px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 24px
}

@media(max-width:980px) {
    .intro {
        grid-template-columns: 1fr
    }
}

.intro .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px
}

.lead {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.6
}

.bullets {
    display: grid;
    gap: 10px;
    margin-top: 12px
}

.bullets li {
    font-weight: 800;
    color: #334155
}

.certs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.cert {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 12px
}

/* ===== STATS STRIP (light) ===== */
.stats {
    max-width: 1300px;
    margin: 10px auto 0;
    padding: 0 24px 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

@media(max-width:900px) {
    .stats {
        grid-template-columns: repeat(1, 1fr)
    }
}

.m {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px
}

.m .num {
    font-weight: 900;
    font-size: 32px
}

.m .txt {
    font-weight: 800;
    color: #64748b
}

/* ===== TIMELINE ===== */
.timeline {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px 8px
}

.tl {
    position: relative;
    margin: 12px 0 0;
    padding-left: 16px
}

.tl::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line)
}

.event {
    position: relative;
    margin: 0 0 18px 0;
    padding-left: 18px
}

.event::before {
    content: "";
    position: absolute;
    left: -1px;
    top: .45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 0 0 4px #fff
}

.event time {
    font-weight: 900;
    color: #0f172a
}

.event h3 {
    margin: 6px 0 4px;
    font-weight: 900
}

.event p {
    margin: 0;
    color: #334155;
    font-weight: 700
}

/* ===== VALUES ===== */
.values {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

@media(max-width:900px) {
    .values {
        grid-template-columns: 1fr
    }
}

.val {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px
}

.val h4 {
    margin: 0 0 6px;
    font-weight: 900
}

.val p {
    margin: 0;
    color: #334155;
    font-weight: 700
}

/* ===== TEAM ===== */
.team {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px 8px
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

@media(max-width:1100px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:800px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:560px) {
    .team-grid {
        grid-template-columns: 1fr
    }
}

.person {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden
}

.person .ph {
    aspect-ratio: 4/3;
    background: #0b0b0b
}

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

.person .pb {
    padding: 12px
}

.person .name {
    font-weight: 900
}

.person .role {
    font-weight: 800;
    color: #64748b
}

.person .lnk {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    font-weight: 900;
    text-decoration: none;
    color: var(--brand);
    font-size: 13px;
}

/* ===== CTA STRIP ===== */
.cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center
}

@media(max-width:800px) {
    .cta-inner {
        grid-template-columns: 1fr
    }
}

.cta .btn {
    height: 48px;
    padding: 0 18px;
    border-radius: 10px;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none
}

.cta .btn.ghost {
    background: transparent;
    border: 2px solid #fff
}

/* helpers */
.section-title {
    margin: 8px 0 10px;
    font-weight: 900;
    font-size: 24px
}

.muted {
    color: #64748b;
    font-weight: 800
}


/* ===== VIDEO SPOT ===== */
.video-spot {
    padding: 60px 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .04) 100%)
}

.video-spot .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px
}

.video-card {
    border: 1px solid var(--card-line, #E5E7EB);
    background: radial-gradient(1200px 400px at 20% 0%,
            color-mix(in oklab, var(--accent-1, #ff7a18) 12%, transparent) 0%,
            transparent 60%), #fff;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .06)
}

.v-head {
    padding: 20px 20px 0
}

.v-head .pill {
    display: inline-block;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .2px;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-1, #ff7a18), var(--accent-2, #ff3d77));
    padding: 6px 10px;
    border-radius: 999px;
    margin-bottom: 10px
}

.v-head h2 {
    margin: 0 0 6px;
    font-weight: 900
}

.v-head .lead {
    margin: 0 0 14px;
    color: var(--muted, #64748b);
    font-weight: 600
}

/* Lite YouTube button */
.yt-lite {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    padding: 0;
    background: #0b0b0b;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden
}

.yt-lite .poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.9)
}

.yt-lite::after {
    /* gradient kenar */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .0) 30%, rgba(0, 0, 0, .45) 100%)
}

.yt-lite .play {
    position: absolute;
    inset: auto auto 18px 18px;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(90deg, var(--accent-1, #ff7a18), var(--accent-2, #ff3d77));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transition: transform .18s ease, filter .18s ease
}

.yt-lite:hover .play {
    transform: translateY(-2px);
    filter: brightness(1.05)
}

.v-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 18px;
    background: #fff
}

.v-meta .bits {
    display: flex;
    gap: 12px;
    color: var(--muted, #64748b);
    font-weight: 700;
    font-size: 13px
}

.v-meta .bits i {
    margin-right: 6px;
    opacity: .9
}

@media (max-width:740px) {
    .v-head {
        padding: 16px 14px 0
    }

    .v-meta {
        padding: 10px 12px 14px
    }

    .yt-lite .play {
        width: 56px;
        height: 56px
    }
}


/* Hem poster butonu hem iframe aynı oranı kullansın */
.yt-lite,
.yt-lite+iframe,
/* bazı temalarda sıradaki elemanı hedeflemek istersen */
.video-spot iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 2.5;
    /* ≈1.6 */
    display: block;
    border: 0;
    border-radius: 14px;
    /* istersen */
    background: #0b0b0b;
    /* yüklenene kadar hoş dursun */
}

/* Poster görseli tam otursun */
.yt-lite .poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ===== WHATSAPP WIDGET (LEFT, LIGHT) ===== */
.wa-widget {
    position: fixed;
    left: auto;
    right: 12px;
    bottom: 18px;
    z-index: 1200;
    font-family: inherit;
}

@media (max-width:560px) {
    .wa-widget {
        left: 14px;
        bottom: 14px
    }
}

/* Toggle input (JS’siz aç/kapat) */
.wa-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

/* FAB (aç/kapat düğmesi) */
.wa-fab {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    user-select: none;
    background: #25D366;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}

.wa-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .3)
}

.wa-fab i {
    font-size: 24px;
    line-height: 1
}

/* Panel */
.wa-panel {
    position: absolute;
    left: auto;
    right: 5px;
    bottom: 72px;
    width: 320px;
    max-width: 90vw;
    background: #fff;
    color: var(--text, #0F172A);
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
    transform-origin: bottom left;
    transform: scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.wa-widget.open .wa-panel {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Toggle açıkken panel görünür */
.wa-toggle:checked~.wa-panel {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Başlık */
.wa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px;
    background: linear-gradient(90deg, var(--accent-1, #25D366), var(--accent-2, #128C7E));
    color: #fff;
}

.wa-title {
    font-weight: 800
}

.wa-close {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.wa-close:hover {
    background: rgba(255, 255, 255, .15)
}

/* Gövde */
.wa-body {
    padding: 12px;
    background: #fff
}

.wa-agent {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px
}

.wa-agent img {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover
}

.wa-name {
    font-weight: 800
}

.wa-status {
    font-size: 12px;
    color: var(--muted, #64748B)
}

/* Alanlar */
.wa-label {
    display: block;
    font-size: 12px;
    color: var(--muted, #64748B);
    margin: 6px 0 6px
}

.wa-input {
    width: 100%;
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 10px;
    padding: 10px 12px;
    resize: vertical;
    min-height: 64px;
    background: #fff;
    color: var(--text, #0F172A);
    outline: none;
}

.wa-input:focus {
    border-color: var(--accent-1, #25D366);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-1, #25D366) 20%, transparent);
}

/* Gönder butonu */
.wa-send {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    height: 42px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    background: linear-gradient(90deg, #25D366, #128C7E);
    color: #fff;
}

.wa-send:hover {
    filter: brightness(1.05)
}

/* Hazır mesajlar */
.wa-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px
}

.wa-chip {
    border: 1px solid var(--line, #E5E7EB);
    background: #f8fafc;
    color: var(--nav, #334155);
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
}

.wa-chip:hover {
    filter: brightness(0.98)
}

.wa-toggle:checked+.wa-fab {
    transform: translateY(-2px) rotate(-3deg)
}


.text-danger {
    color: #ff4d4f;
    font-weight: 700;
    font-size: 13px;
}

.oneCikanUrunlerBtnCnt{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
}

.post {
    position: relative;
}

.post::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;              
    height: 3px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2, var(--accent-1)));
    border-radius: 2px;
    transform: scaleX(0);      
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    z-index: 1;             
}

.post:hover::after {
    transform: scaleX(1);    
}

@media (prefers-reduced-motion: reduce) {
    .post::after { transition: none; }
}