:root {
    --bg: #07060a;
    --panel: #0e0b12;
    --panel2: #120f17;
    --text: #f4f2f8;
    --muted: #bfb8cc;
    /* LOGO RENGİ (2. görsel): RGB(141,23,26) */
    --primary: #8D171A;
    --primary2: #b21e22;
    --ring: 0 0 0 3px rgba(141,23,26,.25);
    --shadow: 0 20px 50px rgba(0,0,0,.45);
    --radius: 18px;
    --radius2: 26px;
    --container: 1160px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 700px at 70% 0%, rgba(141,23,26,.22), transparent 55%), radial-gradient(900px 600px at 10% 10%, rgba(141,23,26,.12), transparent 55%), var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

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

.container {
    width: min(var(--container), calc(100% - 48px));
    margin: 0 auto;
}

.hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    /* daha temiz bar */
    background: rgba(7,6,10,.72);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(141,23,26,.22);
}

.hdr__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
}

.brand__logo {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center; /* menü ortada dursun */
    justify-self: center;
    gap: 18px;
    min-width: 0;
}

    .nav > a,
    .dd__btn {
        color: rgba(255,255,255,.88); /* daha beyaz */
        font-weight: 600;
        font-size: 14px;
        letter-spacing: .1px;
    }

        .nav > a:hover,
        .dd:hover .dd__btn {
            color: rgba(255,255,255,1);
        }

.hdr__actions {
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
    .hdr__actions:empty {
        visibility: hidden;
    }

.navbtn {
    display: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}  


    .btn:active {
        transform: translateY(1px);
    }

.btn--primary {
    background: linear-gradient(180deg, var(--primary2), var(--primary));
    border-color: rgba(255,255,255,.10);
    color: #fff;
    box-shadow: 0 14px 30px rgba(141,23,26,.25);
}

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


.btn--ghost {
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.88);
}

    .btn--ghost:hover {
        border-color: rgba(255,255,255,.22);
        background: rgba(255,255,255,.04);
        color: rgba(255,255,255,1);
    }

.btn--soft {
    background: rgba(141,23,26,.14);
    border-color: rgba(141,23,26,.30);
}

    .btn--soft:hover {
        background: rgba(141,23,26,.18);
    }

.hero {
    position: relative;
    padding: 72px 0 36px;
}

.hero__bg {
    position: absolute;
    inset: -1px 0 0 0;
    background: radial-gradient(900px 500px at 70% 30%, rgba(141,23,26,.35), transparent 55%), radial-gradient(900px 600px at 20% 10%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.50), transparent 55%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr .9fr;
    gap: 26px;
    align-items: center;
}

.hero h1 {
    font-size: 54px;
    line-height: 1.05;
    margin: 0 0 14px;
    letter-spacing: -1.2px;
}

    .hero h1 span {
        color: rgba(244,242,248,.95);
    }

.hero p {
    color: rgba(191,184,204,.92);
    font-size: 16px;
    line-height: 1.7;
    max-width: 56ch;
    margin: 0 0 18px;
}

.hero__cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.hero__stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.stat {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    padding: 12px 14px;
    border-radius: 14px;
}

    .stat b {
        display: block;
        font-size: 14px;
    }

    .stat span {
        color: rgba(191,184,204,.9);
        font-size: 13px;
    }

.hero__card {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius2);
    padding: 16px;
    box-shadow: var(--shadow);
}

.mini {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mini__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary2);
    box-shadow: 0 0 0 6px rgba(141,23,26,.18);
    margin-top: 5px;
}

.mini__text {
    font-size: 13px;
    color: rgba(244,242,248,.9);
}

    .mini__text span {
        color: rgba(191,184,204,.92);
    }

.hero__mock {
    margin: 14px 0;
    background: radial-gradient(700px 300px at 20% 10%, rgba(141,23,26,.25), transparent 55%), rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    height: 220px;
    position: relative;
    overflow: hidden;
}
.hero__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.mock__row {
    height: 12px;
    width: 70%;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    margin: 18px 16px;
}

.mock__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .28;
}

.hero__note {
    color: rgba(191,184,204,.9);
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
}

.strip {
    padding: 44px 0;
    background: rgba(255,255,255,.02);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.strip__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.strip__title h2 {
    margin: 0 0 6px;
    font-size: 22px;
    letter-spacing: -.4px;
}

.strip__title p {
    margin: 0;
    color: rgba(191,184,204,.9);
}

.logos {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.logo-pill {
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    color: rgba(244,242,248,.86);
    font-weight: 600;
    font-size: 13px;
}


.section__head {
    margin-bottom: 18px;
}

    .section__head h2 {
        margin: 0 0 8px;
        font-size: 34px;
        letter-spacing: -.8px;
    }

    .section__head p {
        margin: 0;
        color: rgba(191,184,204,.92);
    }

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

.imgcard {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius2);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.imgcard__img {
    height: 220px;
    background-size: cover;
    background-position: center;
    filter: saturate(1.05) contrast(1.02);
}

.img1 {
    background-image: radial-gradient(900px 300px at 20% 10%, rgba(141,23,26,.55), transparent 55%), linear-gradient(120deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), url("assets/hero-server.jpg");
}

.img2 {
    background-image: radial-gradient(900px 300px at 20% 10%, rgba(141,23,26,.55), transparent 55%), linear-gradient(120deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), url("assets/hero-network.jpg");
}

.imgcard__body {
    padding: 16px;
}

    .imgcard__body h3 {
        margin: 0 0 6px;
    }

    .imgcard__body p {
        margin: 0 0 12px;
        color: rgba(191,184,204,.92);
        line-height: 1.65;
    }

.stack {
    padding: 70px 0;
}

.section__head--stack {
    margin-bottom: 22px;
}

.stack__stage {
    position: relative;
    height: 420px;
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.stackcard {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
}

    .stackcard.is-active {
        opacity: 1;
        transform: translateY(0);
    }

.stackcard__img {
    background-size: cover;
    background-position: center;
    filter: saturate(1.05) contrast(1.05);
}

.gallery1 {
    background-image: radial-gradient(900px 320px at 20% 10%, rgba(141,23,26,.55), transparent 55%), linear-gradient(120deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), url("assets/gallery-storage.jpg");
}

.gallery2 {
    background-image: radial-gradient(900px 320px at 20% 10%, rgba(141,23,26,.55), transparent 55%), linear-gradient(120deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), url("assets/gallery-backup.jpg");
}

.gallery3 {
    background-image: radial-gradient(900px 320px at 20% 10%, rgba(141,23,26,.55), transparent 55%), linear-gradient(120deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), url("assets/gallery-maint.jpg");
}

.stackcard__copy {
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}

    .stackcard__copy h3 {
        margin: 0 0 8px;
        font-size: 26px;
        letter-spacing: -.6px;
    }

    .stackcard__copy p {
        margin: 0 0 14px;
        color: rgba(191,184,204,.92);
        line-height: 1.7;
    }

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

.fbox {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.fbox--active {
    background: rgba(141,23,26,.16);
    border-color: rgba(141,23,26,.35);
}

.fbox h4 {
    margin: 0 0 6px;
}

.fbox p {
    margin: 0 0 10px;
    color: rgba(191,184,204,.92);
    line-height: 1.65;
}

.link {
    color: rgba(244,242,248,.92);
    font-weight: 600;
}

.strip--light {
    background: rgba(141,23,26,.10);
    border-top: 1px solid rgba(141,23,26,.20);
    border-bottom: 1px solid rgba(141,23,26,.20);
}

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

.price {
    position: relative;
    border-radius: var(--radius2);
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.10);
    padding: 18px;
}

.price--featured {
    background: rgba(0,0,0,.25);
    border-color: rgba(141,23,26,.35);
    box-shadow: 0 18px 50px rgba(141,23,26,.18);
}

.badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(141,23,26,.25);
    border: 1px solid rgba(141,23,26,.35);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.price__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.price__val {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.8px;
}

    .price__val span {
        font-size: 14px;
        font-weight: 700;
        color: rgba(191,184,204,.9);
    }

.price ul {
    margin: 14px 0;
    padding-left: 18px;
    color: rgba(191,184,204,.92);
}

.price li {
    margin: 8px 0;
}

.testi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.tcard {
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    padding: 16px;
}

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

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(141,23,26,.25);
    border: 1px solid rgba(141,23,26,.35);
    font-weight: 800;
}

.tcard span {
    color: rgba(191,184,204,.9);
    font-size: 13px;
}

.tcard p {
    margin: 0;
    color: rgba(191,184,204,.92);
    line-height: 1.7;
}

.strip--cta {
    background: radial-gradient(900px 500px at 70% 0%, rgba(141,23,26,.30), transparent 55%), rgba(0,0,0,.18);
}

.cta {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 16px;
    align-items: start;
}

    .cta h2 {
        margin: 0 0 8px;
        font-size: 34px;
        letter-spacing: -.8px;
    }

    .cta p {
        margin: 0;
        color: rgba(191,184,204,.92);
        line-height: 1.7;
    }

.cta__panel {
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
    padding: 16px;
}

.form {
    display: grid;
    gap: 10px;
}

label span {
    display: block;
    font-size: 12px;
    color: rgba(191,184,204,.9);
    margin-bottom: 6px;
}

input, textarea {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: var(--text);
    outline: none;
}

    input:focus, textarea:focus {
        box-shadow: var(--ring);
        border-color: rgba(141,23,26,.45);
    }

.form small {
    color: rgba(191,184,204,.85);
    font-size: 12px;
}

.ftr {
    padding: 34px 0 0;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.22);
}

.ftr__inner {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ftr__logo {
    height: 36px;
    width: auto;
    display: block;
}

.ftr p {
    margin: 8px 0 0;
    color: rgba(191,184,204,.92);
}

.ftr__cols {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

    .ftr__cols b {
        display: block;
        margin-bottom: 8px;
    }

    .ftr__cols a {
        display: block;
        color: rgba(191,184,204,.92);
        margin: 6px 0;
    }

        .ftr__cols a:hover {
            color: var(--text);
        }

.ftr__bottom {
    margin-top: 18px;
    padding: 12px 0;
    text-align: center;
    color: rgba(191,184,204,.85);
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 13px;
}

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

    .grid2 {
        grid-template-columns: 1fr;
    }

    .stackcard {
        grid-template-columns: 1fr;
    }

    .stack__stage {
        height: 520px;
    }

    .feature3 {
        grid-template-columns: 1fr;
    }

    .pricing {
        grid-template-columns: 1fr;
    }

    .testi {
        grid-template-columns: 1fr;
    }

    .cta {
        grid-template-columns: 1fr;
    }

    .nav {
        display: none;
    }
    .hdr__inner {
        grid-template-columns: auto auto;
    }
    .hdr__actions {
        gap: 8px;
    }

    .navbtn {
        display: inline-flex;
        margin-left: auto;
        background: transparent;
        border: 1px solid rgba(255,255,255,.14);
        color: var(--text);
        border-radius: 12px;
        padding: 10px 12px;
    }
}
/* ---------- Dropdown ---------- */
.dd {
    position: relative;
}
    /* Menü butonu ile açılır panel arasındaki boşluğu kapatmak için */
    .dd::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 12px; /* boşluk kadar ayarla (8-14px ideal) */
        background: transparent;
    }

.dd__btn {
    background: transparent;
    border: 0;
    padding: 10px 10px;
    border-radius: 12px;
    cursor: pointer;
}

    .dd__btn:hover {
        background: rgba(255,255,255,.03);
    }

.dd__chev {
    opacity: .8;
}

.dd__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(10,9,14,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 22px 60px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 60;
}

.dd__item {
    display: block;
    padding: 10px 10px;
    border-radius: 12px;
    color: rgba(244,242,248,.88);
    font-weight: 600;
    font-size: 13px;
}

    .dd__item:hover {
        background: rgba(141,23,26,.16);
        border: 1px solid rgba(141,23,26,.28);
    }


.dd:hover .dd__menu,
.dd:focus-within .dd__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Klavye ile erişim için */
.dd:focus-within .dd__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---------- Mobil Menü ---------- */
.mnav {
    display: none;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(7,6,10,.72);
    backdrop-filter: blur(10px);
    padding: 12px 0;
}

    .mnav a {
        display: block;
        width: min(var(--container), calc(100% - 48px));
        margin: 0 auto;
        padding: 12px 10px;
        border-radius: 12px;
        color: rgba(244,242,248,.9);
    }

        .mnav a:hover {
            background: rgba(255,255,255,.03);
        }

.mnav__cta {
    width: min(var(--container), calc(100% - 48px));
    margin: 10px auto 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* JS toggled sınıf */
.mnav.is-open {
    display: block;
}

/* ---------- CSS "Görsel" (dosyasız) ---------- */
/* Bu sınıfları kartların görsel alanında kullanacağız */
.fakeimg {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    background: radial-gradient(900px 320px at 18% 20%, rgba(141,23,26,.55), transparent 58%), radial-gradient(700px 280px at 70% 55%, rgba(255,255,255,.10), transparent 60%), linear-gradient(120deg, rgba(255,255,255,.08), rgba(0,0,0,.30)), linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35));
}

    .fakeimg::before {
        content: "";
        position: absolute;
        inset: -40px;
        background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
        background-size: 54px 54px;
        opacity: .25;
        transform: rotate(-8deg);
    }

    .fakeimg::after {
        
        /* Noise hissi */
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 10% 20%, rgba(255,255,255,.06), transparent 35%), radial-gradient(circle at 80% 30%, rgba(255,255,255,.05), transparent 40%), radial-gradient(circle at 40% 80%, rgba(255,255,255,.04), transparent 45%);
        opacity: .8;
        mix-blend-mode: overlay;
    }

/* Farklı varyasyonlar */
.fakeimg--1 {
    filter: saturate(1.05) contrast(1.05);
}

.fakeimg--2 {
    background: radial-gradient(900px 320px at 20% 10%, rgba(141,23,26,.60), transparent 58%), radial-gradient(700px 280px at 85% 60%, rgba(255,255,255,.10), transparent 60%), linear-gradient(140deg, rgba(255,255,255,.08), rgba(0,0,0,.35));
}

.fakeimg--3 {
    background: radial-gradient(900px 320px at 30% 25%, rgba(141,23,26,.50), transparent 60%), radial-gradient(700px 280px at 65% 55%, rgba(255,255,255,.12), transparent 60%), linear-gradient(110deg, rgba(255,255,255,.06), rgba(0,0,0,.38));
}

/* Responsive: 980 altı dropdown hover yerine menüden gitsin diye
   nav zaten kapanıyor, mobil menü açılıyor. */
@media (max-width: 980px) {
    .dd {
        display: none;
    }
    /* mobilde dropdown yerine basit link kullandık */
}
/* Container - eğer zaten varsa çakışmayacak şekilde */
.m-container {
    width: min(var(--container, 1160px), calc(100% - 48px));
    margin: 0 auto;
}

/* Footer temel */
.m-footer {
    padding: 34px 0 0;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,1);
}

.m-footer__grid {
    /* YATAY DİZİLİMİN ANAHTARI */
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 18px;
    align-items: start;
}

/* Brand */
.m-footer__brand {
    max-width: 44ch;
    align-items: center;
}

.m-footer__logo {
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 18px;
    display: inline-flex;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(141,23,26,.35);
    background: rgba(141,23,26,.16);
}

.m-footer__desc {
    margin: 10px 0 0;
    color: rgba(191,184,204,.92);
    line-height: 1.7;
    font-size: 13.5px;
}

/* Nav */
.m-footer__nav h4,
.m-footer__contact h4 {
    margin: 0 0 10px;
    font-size: 14px;
    letter-spacing: -.2px;
}

.m-footer__nav a {
    display: block;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 12px;
    color: rgba(191,184,204,.92);
    text-decoration: none;
    border: 1px solid transparent;
}

    .m-footer__nav a:hover {
        color: rgba(244,242,248,.95);
        background: rgba(255,255,255,.03);
        border-color: rgba(255,255,255,.08);
    }

/* Contact */
.m-footer__contact span {
    display: block;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 12px;
    color: rgba(191,184,204,.92);
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
}

/* Bottom bar */
.m-footer__bottom {
    margin-top: 18px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: rgba(191,184,204,.85);
    font-size: 13px;
}

.m-link {
    color: rgba(191,184,204,.9);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}

    .m-link:hover {
        color: rgba(244,242,248,.95);
        border-color: rgba(141,23,26,.30);
        background: rgba(141,23,26,.10);
    }

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

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

    .m-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

.m-footer__logoWrap {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    gap: 10px;
}

.m-footer__img {
    height: 60px;
    width: auto;
}
/* Kurumsal sayfalar - theme uyumu */
.page-hero {
    padding: 56px 0 18px;
    position: relative;
}

.page-hero__inner {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
    align-items: center;
}

.page-hero__title {
    margin: 0 0 10px;
    font-size: 40px;
    letter-spacing: -.8px;
}

.page-hero__lead {
    margin: 0 auto 18px;
    text-align: left;
    color: rgba(191,184,204,.92);
    line-height: 1.75;
    max-width: 60ch;
}
.hero__content.center {
    text-align: center;
}

.hero__content.center .hero__lead {
    max-width: 62ch;
    margin: 0 auto;
}

.page-hero__visual {
    height: 190px;
    overflow: hidden;
    background: #111; /* fallback */
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    box-shadow: var(--shadow);
}
.page-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card {
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    padding: 16px;
}

    .card h3 {
        margin: 0 0 8px;
        letter-spacing: -.3px;
    }

    .card p {
        margin: 0;
        color: rgba(191,184,204,.92);
        line-height: 1.7;
    }

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

.spacer {
    height: 14px;
}

.pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pill {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    color: rgba(244,242,248,.86);
    font-weight: 700;
    font-size: 12px;
}

.prose ul {
    margin: 10px 0 0;
    padding-left: 18px;
    color: rgba(191,184,204,.92);
}

.prose li {
    margin: 8px 0;
}

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

    .page-hero__visual {
        height: 210px;
    }

    .cards3 {
        grid-template-columns: 1fr;
    }
}
/* ===== PRODUCT LIST ===== */

.section--pagehead {
    padding: 60px 0 20px;
}

.pagehead h1 {
    font-size: 38px;
    margin: 0 0 8px;
}

.pagehead p {
    color: rgba(191,184,204,.92);
    max-width: 60ch;
}

.product-filter {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

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

.filter-btn {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
    font-weight: 600;
    cursor: pointer;
}

    .filter-btn:hover,
    .filter-btn.is-active {
        background: rgba(141,23,26,.18);
        border-color: rgba(141,23,26,.35);
    }

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

.product-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-img {
    height: 200px;
}

.product-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .product-body h3 {
        margin: 0;
        font-size: 18px;
    }

    .product-body p {
        margin: 0;
        color: rgba(191,184,204,.9);
        font-size: 14px;
        line-height: 1.6;
    }

.product-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .product-tags span {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
    }

.product-badge {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

    .product-badge.sale {
        background: rgba(141,23,26,.20);
        border: 1px solid rgba(141,23,26,.35);
    }

    .product-badge.rent {
        background: rgba(0,150,136,.20);
        border: 1px solid rgba(0,150,136,.35);
    }

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

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

@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}
/* ================================
   PRODUCT LIST (Frontend)
   ================================ */

/* Sayfa başlığı alanı */
.section--pagehead {
    padding: 64px 0 18px;
}

.pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

    .pagehead h1 {
        margin: 0;
        font-size: 40px;
        letter-spacing: -1px;
        line-height: 1.1;
    }

    .pagehead p {
        margin: 6px 0 0;
        color: rgba(191,184,204,.92);
        max-width: 70ch;
        line-height: 1.7;
    }

/* Filtre bar */
.product-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 22px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 16px 50px rgba(0,0,0,.25);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Filtre butonları */
.filter-btn {
    appearance: none;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.88);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform .10s ease, background .12s ease, border-color .12s ease, filter .12s ease;
    user-select: none;
}

    .filter-btn:hover {
        border-color: rgba(255,255,255,.22);
        background: rgba(255,255,255,.05);
    }

    .filter-btn:active {
        transform: translateY(1px);
    }

    /* aktif filtre */
    .filter-btn.is-active {
        background: rgba(141,23,26,.18);
        border-color: rgba(141,23,26,.40);
        box-shadow: 0 12px 26px rgba(141,23,26,.18);
    }

/* Ürün grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 12px;
}

/* Kart */
.product-card {
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 20px 55px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Görsel alan */
.product-img {
    height: 200px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* İçerik */
.product-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Badge */
.product-badge {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}

    /* Satılık/Kiralık renkleri */
    .product-badge.sale {
        background: rgba(141,23,26,.18);
        border-color: rgba(141,23,26,.40);
    }

    .product-badge.rent {
        background: rgba(0,150,136,.18);
        border-color: rgba(0,150,136,.40);
    }

/* Başlık / açıklama */
.product-body h3 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -.3px;
}

.product-body p {
    margin: 0;
    color: rgba(191,184,204,.92);
    font-size: 14px;
    line-height: 1.65;
}

/* Tag'ler */
.product-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

    .product-tags span {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        color: rgba(255,255,255,.82);
    }

/* Buton alanı */
.product-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

    /* “Detay / Teklif Al” butonları temayla uyumlu olsun */
    .product-actions .btn {
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 800;
    }

/* Kart hover efekti */
.product-card:hover {
    border-color: rgba(141,23,26,.30);
    box-shadow: 0 24px 70px rgba(141,23,26,.12), 0 24px 60px rgba(0,0,0,.40);
}

    .product-card:hover .product-img {
        filter: saturate(1.05) contrast(1.03);
    }

/* Responsive */
@media (max-width: 980px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .pagehead h1 {
        font-size: 34px;
    }

    .product-filter {
        padding: 10px;
    }
}
.m-inline {
    display: inline;
    margin: 0;
}

.m-dd__btnlike {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 10px;
    border-radius: 12px;
    color: rgba(255,255,255,.88);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

    .m-dd__btnlike:hover {
        background: rgba(141,23,26,.16);
        border: 1px solid rgba(141,23,26,.28);
    }

/* =========================
   ADMIN / USERS (THEME)
   ========================= */

.admin-users.section--pagehead {
    padding: 44px 0 56px;
}

.au-grid {
    display: grid;
    gap: 14px;
}

.au-card {
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    box-shadow: 0 20px 60px rgba(0,0,0,.38);
    padding: 18px;
}

.au-card--glow {
    border-color: rgba(178,30,34,.45); /* #b21e22 */
    box-shadow: 0 24px 75px rgba(0,0,0,.45), 0 18px 55px rgba(178,30,34,.14);
}

.au-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .au-card__head h3 {
        margin: 0;
        font-size: 18px;
        letter-spacing: -.3px;
        color: rgba(255,255,255,.95);
    }

.au-hint {
    font-size: 12.5px;
    color: rgba(191,184,204,.95);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
}

.au-badge {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .4px;
    color: rgba(255,255,255,.95);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(178,30,34,.40);
    background: rgba(178,30,34,.16);
}

/* Form */
.au-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

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

.au-label {
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255,255,255,.88);
}

.au-input,
.au-select {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.28);
    color: rgba(255,255,255,.95);
    outline: none;
}

    .au-input::placeholder {
        color: rgba(191,184,204,.75);
    }

    .au-input:focus,
    .au-select:focus {
        border-color: rgba(178,30,34,.55);
        box-shadow: 0 0 0 3px rgba(178,30,34,.22);
    }

.au-actions {
    display: flex;
    align-items: end;
    justify-content: flex-start;
}

.au-summary {
    grid-column: 1 / -1;
}

/* Validation */
.m-val {
    color: rgba(255, 95, 95, .95);
    font-size: 12.5px;
}

/* Alert */
.m-alert {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.92);
    box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

.m-alert--info {
    border-color: rgba(178,30,34,.35);
    background: radial-gradient(900px 240px at 20% 0%, rgba(178,30,34,.18), transparent 55%), rgba(0,0,0,.20);
}

/* Table */
.m-tablewrap {
    overflow: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
}

.m-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

    .m-table thead th {
        text-align: left;
        padding: 12px 14px;
        font-size: 12.5px;
        letter-spacing: .2px;
        color: rgba(255,255,255,.92);
        background: rgba(0,0,0,.18);
        border-bottom: 1px solid rgba(255,255,255,.08);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .m-table tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255,255,255,.06);
        color: rgba(255,255,255,.90);
        vertical-align: middle;
    }

    .m-table tbody tr:hover {
        background: rgba(178,30,34,.06);
    }

.m-mono {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .1px;
    color: rgba(255,255,255,.92);
}


/* Roles */
.au-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.au-role {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.90);
}

.au-role--empty {
    opacity: .75;
}

/* Row actions */
.au-rowActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.au-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.au-select--sm {
    padding: 10px 12px;
    border-radius: 12px;
    max-width: 190px;
}

/* Danger button (delete) */
.btn--danger {
    background: rgba(178,30,34,.18);
    border-color: rgba(178,30,34,.45);
    color: rgba(255,255,255,.95);
    border-radius: 999px;
    padding: 10px 14px;
    border: 1px solid rgba(178,30,34,.75);
    background: rgba(178,30,34,.25);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

    .btn--danger:hover {
        background: rgba(178,30,34,.24);
        border-color: rgba(178,30,34,.95);
        box-shadow: 0 0 0 3px rgba(178,30,34,.12);
    }

.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: #fff;
    text-decoration: none;
    transition: .2s ease;
    cursor: pointer;
}

.btn-mini:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}    
.btn-mini--danger {
    border-color: rgba(178,30,34,.65);
}

    .btn-mini--danger:hover {
        background: rgba(178,30,34,.12);
        border-color: rgba(178,30,34,.92);
    }

.m-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.88);
    font-weight: 700;
    font-size: 12px;
}

.m-badge--warn {
    border-color: rgba(255,200,0,.35);
}

.m-badge--danger {
    border-color: rgba(255,120,120,.45);
}

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

    .m-table {
        min-width: 740px;
    }
}
/* SUCCESS BUTTON (Role Update) */
.m-btn--success {
    background: #1f8f4a;
    border-color: rgba(31,143,74,.65);
    color: #fff;
    /* ✅ daha ince karakter */
    font-weight: 700;
    letter-spacing: .1px;
    /* ✅ Sil butonu gibi oval */
    border-radius: 999px !important;
    /* ✅ sil butonu hissi: daha kompakt */
    padding: 7px 12px;
    font-size: 12.5px;
    line-height: 1;
    /* ✅ daha az “kutu” hissi */
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

    .m-btn--success:hover {
        background: #187a3f;
        border-color: rgba(31,143,74,.85);
    }

    .m-btn--success:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(31,143,74,.22);
    }
/* Admin Users: card separation + clearer table */
.au-card, .m-card {
    backdrop-filter: blur(6px);
}
.m-card__head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 10px;
}

.m-tablewrap {
    padding: 8px; /* kenarlardan nefes */
}

.m-table {
    border-radius: 16px;
    overflow: hidden;
}

    .m-table thead th {
        background: linear-gradient(180deg, rgba(178,30,34,.26), rgba(0,0,0,.40));
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .m-table tbody tr:nth-child(odd) {
        background: rgba(255,255,255,.02);
    }

    .m-table tbody tr:nth-child(even) {
        background: rgba(0,0,0,.10);
    }

    .m-table tbody tr:hover {
        background: rgba(178,30,34,.10);
    }

.dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between; /* h1 solda, buton sağda */
    gap: 12px;
}

/* Action column içindeki form elemanları birbirine girmesin */
.au-rowActions, .au-inline {
    gap: 10px !important;
}

.au-select--sm {
    background: rgba(0,0,0,.40);
    border-color: rgba(255,255,255,.16);
}


/* =========================
   Identity / Account Manage
   ========================= */

.id-manage {
    color: rgba(255,255,255,.92);
}

    /* Sayfa içini kart gibi yapalım */
    .id-manage main {
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(0,0,0,.26);
        padding: 18px !important;
        box-shadow: 0 20px 60px rgba(0,0,0,.30);
    }

    /* Başlıklar */
    .id-manage h1, .id-manage h2, .id-manage h3 {
        color: rgba(255,255,255,.95);
        letter-spacing: -.3px;
    }

    .id-manage hr {
        border-color: rgba(255,255,255,.10);
    }

    /* Sol menü */
    .id-manage .nav-pills .nav-link {
        border-radius: 999px;
        padding: 10px 12px;
        color: rgba(255,255,255,.85);
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(0,0,0,.18);
        margin-bottom: 10px;
        transition: .15s;
    }

        .id-manage .nav-pills .nav-link:hover {
            border-color: rgba(178,30,34,.55);
            background: rgba(178,30,34,.10);
            box-shadow: 0 0 0 1px rgba(178,30,34,.12) inset;
            color: rgba(255,255,255,.95);
        }

        .id-manage .nav-pills .nav-link.active {
            background: rgba(178,30,34,.20);
            border-color: rgba(178,30,34,.75);
            color: #fff;
            box-shadow: 0 0 0 1px rgba(178,30,34,.20) inset;
        }

    /* Sağ içerik alanı */
    .id-manage .col-md-9 {
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(0,0,0,.20);
        padding: 16px;
    }

    /* Input & Select */
    .id-manage .form-control,
    .id-manage .form-select {
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(0,0,0,.28);
        color: rgba(255,255,255,.95);
    }

        .id-manage .form-control:focus,
        .id-manage .form-select:focus {
            border-color: rgba(178,30,34,.55);
            box-shadow: 0 0 0 3px rgba(178,30,34,.22);
            background: rgba(0,0,0,.28);
            color: rgba(255,255,255,.95);
        }

    /* Label */
    .id-manage label {
        color: rgba(255,255,255,.88);
        font-weight: 700;
        font-size: 12.5px;
    }

    /* Save butonu (mavi -> kırmızı) */
    .id-manage .btn-primary {
        background: #b21e22;
        border-color: #b21e22;
        color: #fff;
        font-weight: 800;
        border-radius: 999px;
        padding: 10px 14px;
    }

        .id-manage .btn-primary:hover {
            background: rgba(178,30,34,.92);
            border-color: rgba(178,30,34,.92);
        }

    /* Linkler */
    .id-manage a {
        color: rgba(255,255,255,.85);
    }

        .id-manage a:hover {
            color: #fff;
            text-decoration: none;
        }

    /* Validation */
    .id-manage .text-danger {
        color: rgba(255,95,95,.95) !important;
    }
/* Select (dropdown) - oval + dark theme */
.m-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.30);
    color: rgba(255,255,255,.92);
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    transition: .15s;
    -webkit-appearance: none;
    appearance: none;
}

/* ok ikonu hissi için */
.m-select {
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%), linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
    background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

    .m-select:focus {
        border-color: rgba(178,30,34,.60);
        box-shadow: 0 0 0 3px rgba(178,30,34,.18), inset 0 0 0 1px rgba(178,30,34,.25);
    }

    /* seçenek listesi (tarayıcıya göre sınırlı) */
    .m-select option {
        background: #0b0b0d;
        color: #fff;
    }
/* ---------- AUTH (Login/Register) ---------- */
.auth-wrap {
    min-height: calc(100vh - 220px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 34px 16px 60px;
}

.auth-card {
    width: min(560px, 100%);
    border-radius: 22px;
    padding: 22px 22px 18px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}

.auth-head {
    margin-bottom: 12px;
}

.auth-title {
    margin: 0 0 6px;
    font-size: 46px;
    letter-spacing: .2px;
    color: #fff;
}

.auth-sub {
    margin: 0;
    color: rgba(255,255,255,.74);
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
}

.auth-check__box {
    width: 18px;
    height: 18px;
    accent-color: #b21e22;
}

.auth-btn {
    margin-top: 8px;
    width: 100%;
    height: 44px;
}

.auth-links {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}

.m-link {
    color: rgba(255,255,255,.86);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.25);
}

    .m-link:hover {
        color: #fff;
        border-bottom-color: rgba(178,30,34,.95);
    }

/* Identity'nin default text-danger / validation renkleri */
.validation-summary-errors,
.text-danger {
    color: rgba(255,120,120,.95) !important;
}
/* ---------- MANAGE (Identity) TOP NAV ---------- */
.manage-shell {
    padding: 18px;
}

.manage-head {
    margin-bottom: 12px;
    padding: 8px 6px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.manage-title {
    margin: 0;
    font-size: 44px;
    letter-spacing: .2px;
    color: #fff;
}

.manage-sub {
    margin-top: 4px;
    color: rgba(255,255,255,.72);
}

.manage-topnav {
    margin: 12px 0 14px;
}

.manage-navlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.manage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
    border-radius: 999px;
    height: 42px;
    padding: 0 14px;
    font-weight: 600;
    white-space: nowrap;
}

    .manage-pill:hover {
        color: #fff;
        border-color: rgba(178,30,34,.65);
        box-shadow: 0 0 0 3px rgba(178,30,34,.12);
    }

    .manage-pill.active {
        background: rgba(178,30,34,.18);
        border-color: rgba(178,30,34,.9);
        color: #fff;
    }

.manage-card {
    padding: 16px;
    border-radius: 18px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
}

    .manage-card h3 {
        margin: 0 0 12px;
    }

.m-link {
    color: var(--m-text);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.25);
}

    .m-link:hover {
        border-bottom-color: rgba(178,30,34,.9);
    }

.m-rowlink {
    cursor: pointer;
}

    .m-rowlink:hover {
        background: rgba(178, 30, 34, .10);
    }

    .m-rowlink:active {
        background: rgba(178, 30, 34, .16);
    }

/* Row hover action chip */
.m-rowlink__action {
    text-align: right;
    white-space: nowrap;
}

.m-editchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.22);
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    text-decoration: none;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .15s ease, transform .15s ease, border-color .15s ease, background .15s ease;
}

/* satır hover olunca chip görünsün */
tr.m-rowlink:hover .m-editchip {
    opacity: 1;
    transform: translateX(0);
}

/* chip hover efekti */
.m-editchip:hover {
    border-color: rgba(178,30,34,.75);
    background: rgba(178,30,34,.18);
    color: #fff;
}

/* satır hover arkaplanın zaten vardı */
.m-rowlink {
    cursor: pointer;
}

    .m-rowlink:hover {
        background: rgba(178, 30, 34, .10);
    }

    .m-rowlink:active {
        background: rgba(178, 30, 34, .16);
    }
/* Close chip */
.m-closechip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.22);
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .15s ease, transform .15s ease, border-color .15s ease, background .15s ease;
}

tr.m-rowlink:hover .m-closechip {
    opacity: 1;
    transform: translateX(0);
}

.m-closechip:hover {
    border-color: rgba(178,30,34,.85);
    background: rgba(178,30,34,.22);
    color: #fff;
}

/* Modal */
.m-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}
.m-modal.is-open {
        display: block;
}
.m-modal[aria-hidden="false"] {
        display: block;
}

.m-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
}

.m-modal__panel {
    position: fixed;
    max-width: 520px;
    margin: 10vh auto;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 28px));
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(8,8,10,.92);
    box-shadow: 0 18px 60px rgba(0,0,0,.65);
    z-index: 1001;
    overflow: hidden;
}

.m-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    gap: 12px;
    background: linear-gradient(180deg, rgba(178,30,34,.18), rgba(0,0,0,.35));
}

.m-modal__title {
    color: #fff;
    font-weight: 900;
    letter-spacing: .2px;
}

.m-modal__x {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);  
    background: rgba(255,255,255,.06);
    padding: 6px 10px;
    cursor: pointer;
}

    .m-modal__x:hover {
        border-color: rgba(178,30,34,.65);
        color: #fff;
    }
.m-modal__sub {
    margin-top: 4px;
    opacity: .85;
}
.m-modal__body {
    padding: 14px 16px;
}

.m-modal__case {
    margin-top: 10px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
}

.m-strong {
    font-weight: 800;
    color: #fff;
    margin-top: 6px;
}

.m-warn {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(178,30,34,.35);
    background: rgba(178,30,34,.12);
    color: rgba(255,255,255,.85);
}

.m-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,.10);
}

body.m-modal-open {
    overflow: hidden;
}

/* Create - chip bar */
.chipbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 12px;
}

.chip {
    appearance: none;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.92);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: .2px;
}

    .chip:hover {
        border-color: rgba(178,30,34,.65);
        background: rgba(178,30,34,.12);
    }

    .chip.is-active {
        border-color: rgba(178,30,34,1);
        background: rgba(178,30,34,.20);
        box-shadow: 0 0 0 2px rgba(178,30,34,.18);
    }

/* --- Stock/Items badges (Bootstrap .badge ile çakışmasın) --- */
.m-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);   /* <-- net görünür */
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.m-badge--red{
  border-color: rgba(178,30,34,.70);
  background: rgba(178,30,34,.18);
  box-shadow: 0 0 0 1px rgba(178,30,34,.18) inset;
  color: rgba(255,255,255,.96);
}

/* PARTNERS - marquee */
.partner-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 6px 0;
    /* istersen köşeleri yumuşat */
    border-radius: 14px;
}

    /* sağ/sol fade (görseldeki gibi yumuşak kaybolma efekti istersen) */
    .partner-marquee::before,
    .partner-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        pointer-events: none;
        z-index: 2;
    }

    .partner-marquee::before {
        left: 0;
        background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,0));
    }

    .partner-marquee::after {
        right: 0;
        background: linear-gradient(to left, rgba(0,0,0,.65), rgba(0,0,0,0));
    }

/* kayan hat */
.partner-track {
    display: flex;
    align-items: center;
    gap: 26px; /* logo aralığı */
    width: max-content; /* içerik kadar genişle */
    animation: partnerScroll 22s linear infinite;
    will-change: transform;
}

/* tek logo */
.partner-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 26px; /* ayırıcı için alan */
}

    .partner-item img {
        height: 28px; /* logoların boyu (isteğe göre 24-36) */
        width: auto;
        display: block;
        object-fit: contain;
        filter: none;
        opacity: .95;
    }

    /* kırmızı ayırıcı NOKTA (varsayılan) */
    .partner-item::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 64, 64, .85);
        box-shadow: 0 0 10px rgba(255, 64, 64, .35);
    }


/* animasyon: set1 genişliği kadar sola kay */
@keyframes partnerScroll {
    from {
        transform: translateX(0);
    }

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

/* hover olunca durdur (istersen) */
.partner-marquee:hover .partner-track {
    animation-play-state: paused;
}

/* erişilebilirlik: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .partner-track {
        animation: none;
    }
}
.strip__inner--partners {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
}

    .strip__inner--partners .strip__title {
        flex: 0 0 380px;
        min-width: 320px;
    }

    .strip__inner--partners .partner-marquee {
        flex: 1 1 auto;
        width: auto;
        max-width: 460px; /* <-- sağdan daraltıldı, başlıkla dengeli dursun */
        min-width: 300px; /* çok daralmasın */
        position: relative;
        overflow: hidden;
        height: 56px;
        display: flex;
        align-items: center;
        border-radius: 999px;
        padding: 0 16px;
    }

@media (max-width: 860px) {
    .strip__inner--partners {
        flex-wrap: wrap;
    }

        .strip__inner--partners .strip__title {
            flex: 1 1 100%;
            min-width: 0;
        }

        .strip__inner--partners .partner-marquee {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
        }
}
/* Kenar fade */
.partner-marquee::before,
.partner-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    pointer-events: none;
    z-index: 2;
}
.partner-marquee::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,.60), rgba(0,0,0,0));
}

.partner-marquee::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,.60), rgba(0,0,0,0));
}

/* Aynı anda 3-4 logo görünmesi için: küçült */
/* Kayan şerit */
.partner-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
    width: max-content;
    animation: partnerScroll 18s linear infinite;
    will-change: transform;
}
.partner-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
    flex: 0 0 auto;
    line-height: 1;
}
    .partner-item img {
        height: 26px;
        width: auto;
        display: block;
        object-fit: contain;
        opacity: .95;
    }
    /* kırmızı ayırıcı nokta */
    .partner-item::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 3px;
        border-radius: 999px;
        background: rgba(255, 64, 64, .85);
    }
    /* set sonlarında ayırıcı yok 
    .partner-item:nth-child(10)::after,
    .partner-item:nth-child(20)::after {
        display: none;
    }
             */
/* animasyon */
@keyframes partnerScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
.partner-marquee, .partner-track, .partner-item {
    line-height: 1;
}

html, body {
    background: var(--bg);
}

/* Eğer bir üst wrapper’da gradient varsa onu da temizle */
body, .layout, #root {
    background-image: none !important;
    background-color: var(--bg) !important;
}

.hero, footer {
    position: relative;
    overflow: hidden;
    background: transparent;
}

    .hero::before, footer::before {
        content: "";
        position: absolute;
        inset: -220px;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(60% 45% at 25% 20%, rgba(141,23,26,.40), rgba(141,23,26,.12) 45%, rgba(0,0,0,0) 75%), radial-gradient(55% 40% at 80% 30%, rgba(178,30,34,.22), rgba(0,0,0,0) 70%);
        filter: blur(14px);
    }

    .hero > *, footer > * {
        position: relative;
        z-index: 1;
    }

.hero--page {
    padding: 64px 0 26px;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.2fr .9fr;
    gap: 28px;
    align-items: center;
}

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

.hero__title {
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.1;
    margin: 0 0 12px;
}

.hero__lead {
    margin: 0 0 18px;
    color: var(--muted);
    max-width: 62ch;
}

.hero__ctaRow {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero__panel {
    display: flex;
    justify-content: flex-end;
}

.contactPanel {
    width: 100%;
    border-radius: var(--radius2);
    background: radial-gradient(1200px 500px at 20% 10%, rgba(141,23,26,.55), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    padding: 18px;
    min-height: 260px;
}

.contactPanel__head {
    margin-bottom: 14px;
}

.contactPanel__title {
    font-weight: 800;
    font-size: 18px;
}

.contactPanel__sub {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}

.contactPanel__items {
    display: grid;
    gap: 10px;
}

.contactItem {
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.08);
}

.contactItem__label {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.contactItem__value {
    font-weight: 700;
    text-decoration: none;
    color: var(--text);
}

.contactItem__value--wrap {
    font-weight: 600;
    line-height: 1.35;
}

.section {
    padding: 22px 0 70px;
}

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

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

.card {
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    padding: 18px;
}

.card--padded {
    padding: 20px;
}

.card__title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
}

.card__text {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.link {
    color: var(--text);
    font-weight: 800;
}

.contactSplit {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

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

.field span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

.field input, .field textarea {
    width: 100%;
    border-radius: 14px;
    padding: 12px 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.35);
    color: var(--text);
    outline: none;
}

    .field input:focus, .field textarea:focus {
        box-shadow: var(--ring);
        border-color: rgba(141,23,26,.55);
    }

.mapBox {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.35);

}

    .mapBox iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

.formNote {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.muted {
    color: var(--muted);
    font-size: 12px;
    margin-top: 10px;
}

.center {
    text-align: center;
}

.referenceGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 40px;
}

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

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

@media (max-width: 480px) {
    .referenceGrid {
        grid-template-columns: 1fr;
    }
}

.referenceCard {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    box-shadow: var(--shadow);
    transform: translateY(12px) scale(.985);
    opacity: 0;
    transition: transform .38s ease, opacity .38s ease, border-color .38s ease, box-shadow .38s ease;
}

    /* Scroll ile görünür olunca */
    .referenceCard.is-inview {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Hover: hafif scale + kırmızı glow + sheen */
    .referenceCard:hover {
        transform: translateY(-6px) scale(1.02);
        border-color: rgba(141,23,26,.60);
        box-shadow: 0 18px 55px rgba(141,23,26,.22);
    }
    .referenceCard::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(600px 180px at 15% 10%, rgba(141,23,26,.55), transparent 55%);
        opacity: 0;
        transition: opacity .38s ease;
        pointer-events: none;
    }
    .referenceCard::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 35%, transparent 70%);
        transform: translateX(-120%);
        transition: transform .65s ease;
        pointer-events: none;
    }
    .referenceCard img {
        max-width: 100%;
        max-height: 70px;
        object-fit: contain;
        filter: grayscale(100%) brightness(1.1);
        transition: 0.3s ease;
    }

    .referenceCard:hover img {
        filter: grayscale(0%);
    }

    .referenceCard:hover::before {
        opacity: 1;
    }

    .referenceCard:hover::after {
        transform: translateX(120%);
    }

    /* Logo: default daha “kurumsal” (gri) */
    .referenceCard img {
        max-width: 100%;
        max-height: 70px;
        object-fit: contain;
        filter: grayscale(100%) brightness(1.12) contrast(1.02);
        opacity: .92;
        transform: scale(.98);
        transition: filter .38s ease, transform .38s ease, opacity .38s ease;
    }

    /* Hover’da logo renklenir + çok hafif büyür */
    .referenceCard:hover img {
        filter: grayscale(0%) brightness(1.05) contrast(1.05);
        opacity: 1;
        transform: scale(1.04);
    }

/* Reduce motion (erişilebilirlik) */
@media (prefers-reduced-motion: reduce) {
    .referenceCard, .referenceCard::before, .referenceCard::after, .referenceCard img {
        transition: none !important;
    }

    .referenceCard {
        opacity: 1 !important;
        transform: none !important;
    }
}

    .hero__grid--single {
        display: grid;
        grid-template-columns: 1.2fr .9fr;
        gap: 28px;
        align-items: center;
    }

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

    .serviceGrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
        margin-top: 22px;
    }

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

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

    @media (max-width: 520px) {
        .serviceGrid {
            grid-template-columns: 1fr;
        }
    }

    .serviceCard {
        display: block;
        padding: 16px 16px;
        border-radius: var(--radius);
        background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: var(--shadow);
        text-decoration: none;
        color: var(--text);
        transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
        position: relative;
        overflow: hidden;
    }

        .serviceCard:hover {
            transform: translateY(-4px);
            border-color: rgba(141,23,26,.55);
            box-shadow: 0 18px 55px rgba(141,23,26,.20);
        }

    .serviceCard__title {
        font-weight: 800;
        font-size: 16px;
        margin-bottom: 6px;
    }

    .serviceCard__text {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
    }

    .serviceSections {
        margin-top: 22px;
        display: grid;
        gap: 16px;
    }

    .serviceSection {
        border-radius: var(--radius2);
        background: radial-gradient(900px 220px at 10% 0%, rgba(141,23,26,.22), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: var(--shadow);
        padding: 22px 22px;
    }

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

    .serviceSection h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 900;
    }

    .bullet {
        margin: 14px 0 0;
        padding-left: 18px;
        color: var(--muted);
        line-height: 1.7;
    }

        .bullet li {
            margin: 6px 0;
        }

    .btn--sm {
        padding: 10px 14px;
        border-radius: 999px;
        font-size: 13px;
    }

    /* ============================
   HİZMETLER SAYFASI FIX
   ============================ */

    .section {
        padding-top: 60px;
        padding-bottom: 90px;
    }

    .container {
        max-width: 1000px; /* sayfayı daralt */
    }

    /* Chips */
    .serviceChips {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 40px;
    }

    .chip {
        padding: 10px 16px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.12);
        color: var(--text);
        transition: all .25s ease;
    }

        .chip:hover {
            background: rgba(141,23,26,.25);
            border-color: rgba(141,23,26,.6);
        }

    /* Service blocks */
    .serviceStack {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .serviceBlock {
        padding: 30px 34px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 20px 50px rgba(0,0,0,.45);
    }

    /* Başlık alanı */
    .serviceBlock__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 18px;
    }

        .serviceBlock__head h2 {
            font-size: 26px;
            font-weight: 800;
            margin: 0;
        }

    /* Alt başlık */
    .muted {
        font-size: 14px;
        opacity: .65;
        margin-top: 6px;
    }

    /* Paragraf */
    #hizmetler .serviceBlock__body p {
        margin-bottom: 16px;
        line-height: 1.7;
        max-width: 85ch;
    }

    /* Liste düzeltme */
    #hizmetler .bullet {
        padding-left: 22px;
        margin-top: 10px;
    }

        #hizmetler .bullet li {
            margin: 8px 0;
            opacity: .85;
        }

    /* Buton küçült */
    #hizmetler .btn--sm {
        padding: 10px 16px;
        font-size: 13px;
        border-radius: 999px;
    }

    /* Mobil */
    @media (max-width:768px) {
        #hizmetler .serviceBlock__head {
            flex-direction: column;
            gap: 14px;
        }
    }

    /****Loading Button****/

    .btn-submitfx.is-success {
        background: rgba(255,255,255,.02) !important;
        color: rgba(255,255,255,.78) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: none !important;
    }

    .btn-submitfx.is-error {
        background: rgba(255,255,255,.02) !important;
        color: rgba(255,255,255,.82) !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        box-shadow: none !important;
    }

    /**********************/
    .footer-ibm {
        margin-top: 12px;
        font-size: 13px;
        color: #aaa;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .footer-ibm img {
            height: 12px;
            width: auto;
            margin: 0 4px;
            vertical-align: middle;
        }

        .footer-ibm span {
            font-size: 13px;
            color: #aaa;
        }

/*** Partners ***/
.partnersWrap {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
}

.partnersHero {
    padding: 72px 0 36px;
}

.partnersHero__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.partnersHero__title {
    margin: 0 0 18px;
    font-size: 56px;
    line-height: 1.08;
    font-weight: 700;
    color: #f5f3f8;
}

.partnersHero__text {
    margin: 0 auto;
    max-width: 980px;
    font-size: 18px;
    line-height: 1.8;
    color: #cfc9d9;
}

.partnersSection {
    padding: 20px 0 80px;
}

.partnersStack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.partnerBox {
    display: block;
    width: 100%;
    min-height: 200px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(12, 12, 18, 0.92);
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
    overflow: hidden;
    opacity: 1;
    transform: none;
}

.partnerBox__inner {
    min-height: 2000px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(141,23,26,.14), rgba(0,0,0,0) 45%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.partnerBox:hover {
    border-color: rgba(141,23,26,.42);
    box-shadow: 0 24px 48px rgba(0,0,0,.26);
}
/*Partner Inner Box*********************/

/* partner box iç layout */
.partnerBox__inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 270px;
}

/* SOL LOGO BLOĞU */
.partnerBox--Llogo {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SAĞ LOGO BLOĞU */
.partnerBox--Rlogo {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* VIDEO */
.partnerBox--video {
    width: 100%;
    height: 100%;
}

    .partnerBox--video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }

/* SAĞ CONTENT BLOĞU */
.partnerBox--Rcontent {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 75%;
    display: flex;
    align-items: center;
}

/* TEXT */
.partnerBox--Rtext {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.8;
    color: #cfcbd8;
    margin-left: auto;     
    text-align: right;     
}

/* Stock Edit Page */
.stock-edit-page {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px 40px;
}

.stock-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.stock-edit-title {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.stock-edit-subtitle {
    margin: 6px 0 0;
    color: #aaa;
    font-size: 14px;
}

.stock-edit-card {
    padding: 24px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(135deg, rgba(141,23,26,.16), rgba(0,0,0,0) 45%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.stock-edit-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.stock-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
}

.stock-field--full {
    grid-column: 1 / -1;
}

.stock-label {
    font-size: 13px;
    font-weight: 700;
    color: #cfcbd8;
    margin: 0;
}

.stock-input {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    color: #fff;
    outline: none;
    transition: .2s ease;
}

.stock-input:focus {
    border-color: rgba(141,23,26,.85);
    box-shadow: 0 0 0 3px rgba(141,23,26,.20);
    background: rgba(0,0,0,.32);
}

.stock-input::placeholder {
    color: #8f8a99;
}

.stock-textarea {
    min-height: 120px;
    resize: vertical;
}

.stock-edit-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}

.validation-summary {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

.text-danger {
    color: #ff7b7b !important;
    font-size: 13px;
}

.btn-mini--primary {
    background: rgba(141,23,26,.22);
    border: 1px solid rgba(141,23,26,.65);
    color: #fff;
}

.btn-mini--primary:hover {
    background: rgba(141,23,26,.34);
    border-color: rgba(141,23,26,.95);
    color: #fff;
}

@media (max-width: 768px) {
    .stock-edit-form {
        grid-template-columns: 1fr;
    }

    .stock-field--full,
    .stock-edit-actions,
    .validation-summary {
        grid-column: auto;
    }

    .stock-edit-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .stock-edit-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .stock-edit-actions .btn-mini,
    .stock-edit-actions .btn-mini--primary {
        width: 100%;
        text-align: center;
    }
}