:root {
    --bg: #0b1220;
    --paper: #ffffff;
    --muted: #f3f5f8;
    --text: #101828;
    --sub: #475467;
    --brand: #0b4ea2;
    --brand2: #062a57;
    --line: #e6e8ec;
    --shadow: 0 10px 30px rgba(16,24,40,.10);
    --radius: 18px;
    --radius2: 26px;
    --container: 1180px;
    --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--text);
    background: #fff
}

a {
    color: inherit;
    text-decoration: none
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    border: 1px solid transparent;
    gap: 10px;
    cursor: pointer;
    transition: .2s transform,.2s box-shadow,.2s background,.2s border-color;
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(16,24,40,.12)
    }

.btn-sm {
    padding: 10px 14px;
    font-size: .92rem
}

.btn-primary {
    background: var(--brand);
    color: #fff
}

    .btn-primary:hover {
        background: #0a4490
    }

.btn-outline {
    background: transparent;
    border-color: rgba(255,255,255,.55);
    color: #fff
}

    .btn-outline:hover {
        border-color: #fff
    }

.btn-light {
    background: #fff;
    color: var(--brand2)
}

    .btn-light:hover {
        background: #f7faff
    }

.link {
    color: var(--brand);
    font-weight: 700
}

    .link:hover {
        text-decoration: underline
    }

.topbar {
    background: linear-gradient(90deg,var(--brand2),var(--brand));
    color: #fff;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 14px;
}

.topbar-text {
    font-size: .95rem;
    opacity: .95
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--brand2),var(--brand));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.brand-text {
    letter-spacing: .02em
}

.nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-link {
    padding: 10px 10px;
    border-radius: 999px;
    font-weight: 700;
    color: var(--text);
}

    .nav-link:hover {
        background: var(--muted)
    }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px
}

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

    .icon-btn:hover {
        background: var(--muted)
    }

.nav-toggle {
    display: none
}

.nav-hamburger {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer
}

    .nav-hamburger span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--text);
        border-radius: 2px
    }

.mobile-nav {
    display: none;
    border-top: 1px solid var(--line);
    background: #fff
}

    .mobile-nav .container {
        display: flex;
        flex-direction: column;
        padding: 10px 18px 16px
    }

.hero {
    background: linear-gradient(135deg,var(--brand2),var(--brand));
    color: #fff;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 26px;
    align-items: center;
    padding: 44px 0;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    font-weight: 700;
    font-size: .9rem;
}

.hero-title {
    font-size: 46px;
    line-height: 1.05;
    margin: 14px 0 10px;
    font-weight: 900
}

.hero-lead {
    max-width: 56ch;
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
    line-height: 1.6
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px
}

.hero-media {
    display: flex;
    justify-content: flex-end
}

.hero-img {
    width: 100%;
    min-height: 320px;
    border-radius: var(--radius2);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.25);
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: .02em;
}

.section {
    padding: 42px 0
}

.section-muted {
    background: var(--muted)
}

.section-title {
    font-size: 28px;
    margin: 0 0 10px;
    font-weight: 900
}

.section-lead {
    color: var(--sub);
    max-width: 78ch;
    line-height: 1.7;
    margin: 0 0 22px
}

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

.feature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: .2s transform,.2s box-shadow,.2s border-color;
    position: relative;
    overflow: hidden;
}

    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: #d8dce3
    }

.feature-badge {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--muted);
    display: grid;
    place-items: center;
    font-weight: 900;
    color: var(--brand2);
    margin-bottom: 10px;
}

.feature-title {
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 6px
}

.feature-text {
    color: var(--sub);
    line-height: 1.6
}

.feature-cta {
    margin-top: 12px;
    color: var(--brand);
    font-weight: 900
}

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

.tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: .2s transform,.2s box-shadow,.2s border-color;
}

    .tile:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: #d8dce3
    }

.tile-img {
    height: 160px;
    background: #e9eef7;
    display: grid;
    place-items: center;
    color: var(--brand2);
    font-weight: 900;
}

.tile-body {
    padding: 16px
}

.tile-title {
    font-weight: 900;
    font-size: 18px;
    margin: 0 0 6px
}

.tile-text {
    color: var(--sub);
    line-height: 1.6;
    margin: 0 0 12px
}

.tile-cta {
    color: var(--brand);
    font-weight: 900
}

.cta {
    background: linear-gradient(90deg,var(--brand2),var(--brand));
    color: #fff;
    padding: 28px 0;
}

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

.cta-title {
    font-weight: 900;
    font-size: 20px
}

.cta-text {
    opacity: .9;
    margin-top: 4px
}

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

.quick-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    transition: .2s transform,.2s box-shadow,.2s border-color;
}

    .quick-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: #d8dce3
    }

.quick-title {
    font-weight: 900;
    margin: 0 0 6px
}

.quick-text {
    color: var(--sub)
}

.news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}

.news-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
}

.news-feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
}

.news-img {
    background: #e9eef7;
    display: grid;
    place-items: center;
    color: var(--brand2);
    font-weight: 900;
    min-height: 220px
}

.news-body {
    padding: 16px
}

.news-tag {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--muted);
    color: var(--brand2);
    font-weight: 900;
    font-size: .82rem;
}

.news-title {
    margin: 10px 0 6px;
    font-size: 20px;
    font-weight: 900
}

.news-text {
    margin: 0 0 10px;
    color: var(--sub);
    line-height: 1.6
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.news-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    transition: .2s transform,.2s box-shadow,.2s border-color;
}

    .news-item:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow);
        border-color: #d8dce3
    }

.news-item-title {
    font-weight: 900
}

.news-item-meta {
    color: var(--sub);
    font-size: .92rem;
    margin-top: 4px
}

.footer {
    background: #0b1220;
    color: #c7d0df;
    padding: 40px 0 20px;
}

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

.footer-title {
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px
}

.footer-link {
    display: block;
    color: #c7d0df;
    padding: 6px 0
}

    .footer-link:hover {
        color: #fff
    }

.footer-muted {
    color: #c7d0df;
    opacity: .9;
    line-height: 1.7
}

.footer-bottom {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px) {
    .hero-inner {
        grid-template-columns: 1fr
    }

    .hero-title {
        font-size: 38px
    }

    .card3, .tile3, .quick-grid {
        grid-template-columns: 1fr
    }

    .news-grid {
        grid-template-columns: 1fr
    }

    .news-feature {
        grid-template-columns: 1fr
    }

    .nav {
        display: none
    }

    .header-actions {
        display: none
    }

    .nav-hamburger {
        display: flex
    }

    .nav-toggle:checked ~ .mobile-nav {
        display: block
    }
}

/* ---------- Layout polish + image backgrounds ---------- */

.topbar--img {
    position: relative;
    color: #fff;
    background-image: linear-gradient(90deg, rgba(6,42,87,.92), rgba(11,78,162,.86)), var(--topbar-bg);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
}

.top-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    font-size: .95rem;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
}

    .topbar-link:hover {
        background: rgba(255,255,255,.16);
    }

/* Header subtle image texture */
.header--img {
    position: sticky;
    top: 0;
    z-index: 50;
}

    .header--img::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(circle at 12% 0%, rgba(11,78,162,.08), transparent 48%), var(--header-bg);
        background-size: cover;
        background-position: center;
        opacity: .12;
    }

.header-inner {
    position: relative;
}

.brand-logo {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 20px rgba(16,24,40,.10);
}

.brand {
    gap: 10px;
}

.brand-mark {
    display: none;
}
/* artık logo var */

/* Search box */
.search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e6e8ec;
    background: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    min-width: 260px;
}

    .search input {
        border: 0;
        outline: 0;
        width: 100%;
        font: inherit;
        color: #101828;
    }

    .search:focus-within {
        border-color: #c9d7ff;
        box-shadow: 0 10px 20px rgba(16,24,40,.08);
    }

/* Mobile auth buttons */
.mobile-auth {
    display: flex;
    gap: 10px;
    margin: 8px 0 10px;
}

.btn-outline-dark {
    background: #fff;
    border: 1px solid #e6e8ec;
    color: #101828;
}

    .btn-outline-dark:hover {
        background: #f3f5f8;
    }

/* Image strip */
.imgstrip {
    padding: 18px 0;
    background: #f3f5f8;
    border-top: 1px solid #e6e8ec;
    border-bottom: 1px solid #e6e8ec;
}

.imgstrip-inner {
    display: flex;
    gap: 12px;
    overflow: auto;
    padding-bottom: 4px;
}

.imgstrip img {
    width: 220px;
    height: 110px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 20px rgba(16,24,40,.08);
    flex: 0 0 auto;
}

/* Footer image background */
.footer--img {
    position: relative;
    background-image: linear-gradient(180deg, rgba(11,18,32,.96), rgba(11,18,32,.96)), var(--footer-bg);
    background-size: cover;
    background-position: center;
}

.footer-grid {
    gap: 22px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.10);
}

.footer-brandText {
    font-weight: 900;
    color: #fff;
}

/* Responsive small tweak */
@media (max-width: 980px) {
    .search {
        display: none;
    }
}

.auth-card {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(16,24,40,.10);
}

.f-label {
    display: block;
    font-weight: 800;
    margin: 12px 0 6px
}

.f-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #e6e8ec;
    outline: 0;
    font: inherit;
}

    .f-input:focus {
        border-color: #c9d7ff;
        box-shadow: 0 10px 20px rgba(16,24,40,.08)
    }

.f-foot {
    margin-top: 12px;
    color: #475467
}

/* ===== Brand polish ===== */
.brand-text {
    letter-spacing: -.02em;
    font-weight: 900;
    text-transform: lowercase;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.social-ico {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

    .social-ico:hover {
        background: rgba(255,255,255,.14);
    }

/* ===== Topbar/Header images ===== */
.topbar--img {
    color: #fff;
    background-image: linear-gradient(90deg, rgba(6,42,87,.92), rgba(11,78,162,.86)), var(--topbar-bg);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
}

.top-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    font-size: .95rem;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
}

    .topbar-link:hover {
        background: rgba(255,255,255,.16);
    }

/* Header subtle texture */
.header--img {
    position: sticky;
    top: 0;
    z-index: 50;
}

    .header--img::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(circle at 12% 0%, rgba(11,78,162,.10), transparent 48%), var(--header-bg);
        background-size: cover;
        background-position: center;
        opacity: .14;
    }

.header-inner {
    position: relative;
}

.brand-logo {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 20px rgba(16,24,40,.10);
}

/* Search */
.search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e6e8ec;
    background: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    min-width: 280px;
}

    .search input {
        border: 0;
        outline: 0;
        width: 100%;
        font: inherit;
        color: #101828;
    }

    .search:focus-within {
        border-color: #c9d7ff;
        box-shadow: 0 10px 20px rgba(16,24,40,.08);
    }

/* ===== Image strip ===== */
.imgstrip {
    padding: 18px 0;
    background: #f3f5f8;
    border-top: 1px solid #e6e8ec;
    border-bottom: 1px solid #e6e8ec;
}

.imgstrip-inner {
    display: flex;
    gap: 12px;
    overflow: auto;
    padding-bottom: 4px;
}

.imgstrip img {
    width: 220px;
    height: 110px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 20px rgba(16,24,40,.08);
    flex: 0 0 auto;
}

/* ===== Footer image ===== */
.footer--img {
    position: relative;
    background-image: linear-gradient(180deg, rgba(11,18,32,.96), rgba(11,18,32,.96)), var(--footer-bg);
    background-size: cover;
    background-position: center;
}

/* ===== HERO with background image ===== */
.hero--img {
    position: relative;
    background-image: linear-gradient(135deg, rgba(11,78,162,.92), rgba(6,42,87,.90)), var(--hero-bg);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.hero-inner {
    padding: 54px 0;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    font-weight: 800;
    font-size: .95rem;
}

.kico {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
}

.hero-title {
    font-weight: 950;
    letter-spacing: -.03em;
}

.hero-lead {
    color: rgba(255,255,255,.88);
}

.hero-media {
    display: flex;
    justify-content: flex-end;
}

.hero-img {
    position: relative;
    width: 100%;
    max-width: 520px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

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

.hero-imgOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.28));
}

.hero-imgBadge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    font-weight: 800;
}

.badge-ico {
    width: 28px;
    height: 28px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
}

.hero-metrics {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.metric {
    flex: 1 1 220px;
    padding: 12px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
}

.metric-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
}

.mico {
    width: 32px;
    height: 32px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
}

.metric-text {
    opacity: .9;
    margin-top: 6px;
    line-height: 1.55;
}

/* ===== Feature cards with image vibe ===== */
.feature-card--img {
    position: relative;
    background-image: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.00)), var(--card-bg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

    .feature-card--img::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: lightgray;
    }

    .feature-card--img > * {
        position: relative;
    }

.feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 20px rgba(16,24,40,.08);
}

.feature-badge {
    font-weight: 900;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(11,78,162,.10);
    border: 1px solid rgba(11,78,162,.18);
}

/* ===== Tiles with real images ===== */
.tile-img {
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    background: #e9eef7;
}

    .tile-img img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        display: block;
    }

.tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
}

/* ===== Quick cards icons ===== */
.quick-card--ico {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.qico {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #f3f5f8;
    border: 1px solid rgba(0,0,0,.06);
    font-size: 18px;
}

/* ===== News image ===== */
.news-feature--img .news-img {
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
}

    .news-feature--img .news-img img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        display: block;
    }

.section-head2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

@media (max-width:980px) {
    .search {
        display: none;
    }

    .hero-img img {
        height: 300px;
    }
}

/* ===== Mobile nav: garanti davranış ===== */
.nav-toggle {
    display: none;
}

.nav-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

    .nav-hamburger span {
        display: block;
        width: 18px;
        height: 2px;
        background: #101828;
        border-radius: 2px;
    }

/* Desktop */
.nav {
    display: flex;
    gap: 18px;
    align-items: center;
}

.mobile-nav {
    display: none;
}

/* Mobile */
@media (max-width: 980px) {
    .nav {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .mobile-nav {
        display: none;
        background: #fff;
        border-top: 1px solid #e6e8ec;
        padding: 12px 0;
    }

        .mobile-nav .nav-link {
            display: block;
            padding: 12px 0;
        }

    /* checkbox checked => mobile menu open */
    .nav-toggle:checked ~ .mobile-nav {
        display: block;
    }
}

/* ===== Hero responsive garanti ===== */
.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 24px;
    align-items: center;
}

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

    .hero-media {
        order: 2;
    }

    .hero-content {
        order: 1;
    }

    .hero-actions {
        flex-wrap: wrap;
    }

        .hero-actions .btn {
            width: 100%;
        }
}
/* ===== Grid blokları: garanti ===== */
.card3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tile3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.news-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
    align-items: start;
}

.news-list {
    display: grid;
    gap: 10px;
}

@media (max-width: 980px) {
    .card3, .tile3, .quick-grid {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }
}
.container {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}
img {
    max-width: 100%;
    height: auto;
}

/* ===== Topbar: mobilde şişmesin ===== */
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .topbar {
        padding: 10px 0;
    }

    .topbar-right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ===== Hamburger + mobile-nav: GARANTİ ===== */
.nav-toggle {
    display: none;
}

/* Masaüstü */
.nav {
    display: flex;
    gap: 18px;
    align-items: center;
}

.mobile-nav {
    display: none;
}

/* Hamburger (3 çizgi) */
.nav-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

    .nav-hamburger span {
        display: block;
        width: 18px;
        height: 2px;
        background: #fff; /* header koyu ise beyaz daha iyi */
        border-radius: 2px;
    }

/* Mobil */
@media (max-width: 980px) {
    .nav {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .header-actions .search {
        display: none;
    }
    /* mobilde arama gizli kalsın */

    .mobile-nav {
        display: none;
        background: rgba(255,255,255,.95);
        border-top: 1px solid rgba(0,0,0,.08);
        padding: 10px 0 14px 0;
    }

        .mobile-nav .nav-link {
            display: block;
            padding: 12px 0;
            color: #101828;
        }

    .mobile-auth {
        margin-top: 10px;
        display: flex;
        gap: 10px;
    }

    /* ✅ checkbox checked olunca menü aç */
    .nav-toggle:checked ~ .mobile-nav {
        display: block;
    }
}

/* ===== Header: logo / boşluk / tek satır ===== */
.brand {
    display: flex;
    align-items: center;
    gap: 12px; /* logo - isim arası */
}

.brand-logo {
    height: 44px; /* logo büyüsün */
    width: auto;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 18px; /* brand ile nav yakın olmasın */
}

.nav {
    margin-left: 10px; /* brand sonrası nefes */
}

.nav-link {
    white-space: nowrap; /* Ana Sayfa / Sosyal Medya tek satır */
}

/* Header actions: arama + buton aynı satır */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

    .header-actions .btn {
        white-space: nowrap; /* Bize Ulaş bölünmesin */
        min-width: 120px; /* kırılmayı önle */
    }

.search {
    max-width: 260px; /* çok uzayıp butonu itmesin */
    width: 260px;
}

    .search input {
        width: 100%;
    }

/* ===== Mobil hamburger: mavi olsun, 3 çizgi net ===== */
:root {
    --brand-blue: #1e4da8;
}

/* Senin eski CSS'in span'leri bozmuş olabilir: burada netliyoruz */
.nav-hamburger {
    display: none; /* masaüstünde kapalı */
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(16,24,40,.15);
    background: rgba(255,255,255,.92);
    color: var(--brand-blue); /* çizgiler currentColor kullanacak */
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

    .nav-hamburger span {
        display: block;
        width: 20px;
        height: 3px; /* daha kalın -> ikon gibi */
        background: currentColor; /* mavi */
        border-radius: 2px;
    }

/* Mobil davranış */
@media (max-width: 980px) {
    .nav {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .header-actions .search {
        display: none;
    }
    /* mobilde aramayı gizle */

    .mobile-nav {
        display: none;
    }

    .nav-toggle:checked ~ .mobile-nav {
        display: block;
    }
}

/* ===== Hero: "Yayınları İncele" ikon rengi ===== */
.btn-primary .btn-ico {
    color: #fff; /* ikon beyaz */
}

    .btn-primary .btn-ico svg path {
        stroke: currentColor;
    }

/* ===== Feature kart etiketleri kart içinde kalsın ===== */
.feature-card {
    position: relative;
    overflow: hidden; /* etiket dışarı taşmasın */
}

.feature-badge {
    position: absolute;
    top: 16px !important;
    right: 16px !important;
    transform: none !important;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(16,24,40,.12);
    color: #0b2b57;
    font-weight: 800;
    letter-spacing: .01em;
    backdrop-filter: blur(6px);
}

/* ===== Feature kart etiketleri görünmüyor -> overlay üstte kalıyor (z-index fix) ===== */
.feature-card {
    position: relative;
    overflow: hidden;
}

    /* Kartın arka plan/overlay katmanları varsa onları alta it */
    .feature-card::before,
    .feature-card::after {
        z-index: 0 !important;
    }

/* Kart içindeki içerikleri üstte tut */
.feature-top,
.feature-title,
.feature-text,
.feature-cta {
    position: relative;
    z-index: 2;
}

/* Etiket (pill) kesin üstte */
.feature-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(16,24,40,.12);
    color: #0b2b57;
    font-weight: 800;
    white-space: nowrap;
}

/* Eğer bazı kartlarda badge görünmüyorsa, opacity/visibility override */
.feature-badge {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== Brand yazısı logonun altına (mobil/tablet) ===== */
@media (max-width: 1100px) {
    .header-inner {
        align-items: flex-start;
    }

    .brand {
        display: flex;
        flex-direction: column; /* alt alta */
        align-items: flex-start;
        gap: 6px;
        min-width: 150px; /* menü ile çakışmayı azaltır */
    }

    .brand-logo {
        height: 46px;
    }

    .brand-text {
        font-size: 14px;
        line-height: 1;
        opacity: .95;
        white-space: nowrap;
    }

    /* menüyü brand ile araya mesafe koy */
    .nav {
        margin-left: 18px;
        margin-top: 8px; /* brand alt satır yaptı diye hizala */
    }
}

.feature-card--img {
    overflow: visible;
}
/* badge kırpılıyorsa */

/* =========================
   HEADER FIXES
   ========================= */

/* Brand + menu arasında boşluk oluşsun */
.header-inner {
    gap: 22px;
}

/* Logo büyüsün */
.brand-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* "informaticsleadership" logo ALTINA gelsin */
.brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-right: 18px; /* nav'a yapışmasın */
    margin-right: 6px;
}

.brand-text {
    line-height: 1.05;
    font-size: 13px;
    font-weight: 800;
}

/* Menü linkleri aralıklı olsun */
.nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* "Bize Ulaş" tek satır kalsın */
.header-actions .btn {
    white-space: nowrap;
}

/* Primary butondaki ikon mavi görünmesin, beyaz olsun */
.btn-primary .btn-ico {
    color: #fff !important;
}

    .btn-primary .btn-ico svg {
        stroke: currentColor;
    }

/* =========================
   HAMBURGER (MOBILE) FIXES
   ========================= */

.nav-toggle {
    position: absolute;
    left: -9999px;
}

/* Hamburger gerçekten hamburger gibi görünsün (3 çizgi) */
.nav-hamburger {
    width: 44px;
    height: 44px;
    display: none; /* desktop'ta gizli */
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(30,64,175,.18);
    cursor: pointer;
}

    .nav-hamburger span {
        display: block !important;
        position: static !important; /* üst üste binmesin */
        width: 22px;
        height: 2px;
        margin: 3px 0;
        border-radius: 2px;
        background: #1d4ed8; /* mavi çizgiler */
    }

/* Mobilde menü davranışı */
@media (max-width: 992px) {
    .nav {
        display: none;
    }

    .header-actions .search {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .brand {
        align-items: center;
        padding-right: 0;
        margin-right: 0;
    }

    .mobile-nav {
        display: none;
    }

    .nav-toggle:checked ~ .mobile-nav {
        display: block;
    }
}

/* =========================
   FEATURE CARD BADGE FIXES
   (etiket kırpılmasın)
   ========================= */

.feature-card {
    position: relative;
    overflow: hidden; /* kalsın ama badge içerde duracak */
}

.feature-top {
    position: relative;
}

/* Etiketi kartın içine al (sağdan taşmasın) */
.feature-badge {
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
    transform: none !important;
    z-index: 3 !important;
    max-width: calc(100% - 64px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* TOPBAR BRAND */
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    min-width: 220px; /* menüyü sıkıştırmasın */
}

.topbar-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.topbar-brandText {
    font-size: 22px; /* daha büyük */
    font-weight: 850;
    letter-spacing: .2px;
    line-height: 1.05;
    white-space: nowrap; /* birleşme/alt satır kontrolü */
}

/* Mobilde taşma olursa yazıyı küçült */
@media (max-width: 520px) {
    .topbar-brandText {
        font-size: 18px;
    }

    .topbar-brand {
        min-width: 0;
    }
}

/* ===== HAMBURGER İKON FIX ===== */
.nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* mobilde görünsün */
@media (max-width: 980px) {
    .nav-hamburger {
        display: flex !important;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.10);
        background: rgba(255,255,255,.95);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* 3 çizgiyi dikey hizala */
    .nav-hamburger {
        flex-direction: column;
        gap: 5px;
    }

        .nav-hamburger span {
            display: block;
            width: 22px;
            height: 3px;
            border-radius: 999px;
            background: #1f4fae; /* mavi net görünür */
        }
}

/* ===== FEATURE BADGE (etiket) FIX ===== */
.feature-card {
    position: relative;
}

    /* etiket kırpılmasın */
    .feature-card .feature-badge {
        width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 7px 12px !important;
        border-radius: 999px;
        z-index: 5;
    }

    /* eğer etiket sağ üstteyse ve içerikle çakışıyorsa boşluk bırak */
    .feature-card .feature-top {
        padding-right: 120px;
    }

/* ===== SVG HAMBURGER (HAZIR GÖRÜNÜM) ===== */
.nav-hamburger {
    display: none;
}

@media (max-width: 980px) {
    .nav-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,.10);
        background: rgba(255,255,255,.95);
        box-shadow: 0 10px 24px rgba(0,0,0,.10);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        .nav-hamburger .hamb-ico {
            width: 24px;
            height: 24px;
        }

            .nav-hamburger .hamb-ico path {
                stroke: #1f4fae; /* mavi, net görünsün */
                stroke-width: 2.4;
                stroke-linecap: round;
                fill: none;
            }

    /* İstersen açılınca hafif basılı efekti */
    .nav-toggle:checked + .container .nav-hamburger {
        background: #fff;
        box-shadow: 0 6px 16px rgba(0,0,0,.12);
        transform: translateY(1px);
    }
}

@media (max-width: 980px) {
    .hamb-ico path {
        transition: transform .18s ease, opacity .18s ease;
        transform-origin: 12px 12px;
    }

    .nav-toggle:checked + .container .hamb-ico .l2 {
        opacity: 0;
    }

    .nav-toggle:checked + .container .hamb-ico .l1 {
        transform: translateY(5px) rotate(45deg);
    }

    .nav-toggle:checked + .container .hamb-ico .l3 {
        transform: translateY(-5px) rotate(-45deg);
    }
}