/* /assets/css/landing_kadikoy.css */

.nbL * {
    box-sizing: border-box;
}

.nbL,
.nbL * {
    color: rgba(255, 255, 255, .94);
}

.nbL a,
.nbL a:visited {
    color: rgba(255, 255, 255, .94);
    text-decoration: none;
}

.nbL a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nbL {
    background: #060a10;
    padding: 18px 0 28px;
}

.nbW {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 14px;
}

.nbHero {
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: #0b1220;
    position: relative;
}

.nbHero img {
    width: 100%;
    height: auto;
    display: block;

    /* ✅ PHP yok: sayfa inline --hero-ar basacak */
    aspect-ratio: var(--hero-ar, 3 / 2);

    object-fit: cover;
    filter: contrast(1.05) brightness(.80);
}

.nbHero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .62));
    pointer-events: none;
}

.nbCrumb {
    margin: 12px auto 0;
    max-width: 1120px;
    padding: 0 14px;
    opacity: .82;
    font-weight: 900;
    font-size: 13px;
    text-align: center;
}

.nbCrumb a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nbCrumbSep {
    display: inline-block;
    margin: 0 8px;
    opacity: .7;
}

.nbH1 {
    margin: 14px 0 0;
    font-weight: 950;
    letter-spacing: .25px;
    font-size: 42px;
    line-height: 1.05;
    text-align: center;
}

@media (max-width: 980px) {
    .nbH1 {
        font-size: 34px;
    }
}

@media (max-width: 520px) {
    .nbH1 {
        font-size: 28px;
    }
}

.nbSub {
    margin: 10px auto 0;
    opacity: .86;
    font-size: 16px;
    line-height: 1.65;
    max-width: 76ch;
    text-align: center;
}

.nbTrust {
    margin: 10px auto 0;
    max-width: 1120px;
    padding: 10px 14px 0;
    text-align: center;
    opacity: .88;
    font-weight: 850;
    font-size: 13px;
}

.nbTrustItem {
    margin-top: 6px;
}

.nbCards {
    margin: 12px auto 0;
    max-width: 1120px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* mobilde de yan yana */
    gap: 10px;
}

.nbCards {
    align-items: start;
}

/* kartlar farklı oranda olunca gereksiz stretch olmasın */

.nbCard {
    display: block;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    text-decoration: none;
}

.nbCardImg {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: rgba(255, 255, 255, .02);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    --bg: none;
    /* inline style set edecek */
}

/* blur arka plan (boşlukları doldurur) */
.nbCardImg::before {
    content: '';
    position: absolute;
    inset: -18px;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(16px) brightness(.55) saturate(1.06);
    transform: scale(1.08);
    opacity: .92;
    pointer-events: none;
}

/* hafif vignette */
.nbCardImg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .55) 100%);
    opacity: .35;
    pointer-events: none;
}

.nbCardImg img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    filter: none;
    position: relative;
    z-index: 2;
    /* blur katmanlarının üstü */
}

/* Dijital kartvizitte arka blur daha sakin olsun */
.nbCardImg.is-contain::before {
    filter: blur(14px) brightness(.50) saturate(1.02);
    opacity: .86;
}

.nbCardBody {
    padding: 10px 12px 12px;
}

.nbCardTitle {
    font-weight: 950;
    font-size: 14px;
    letter-spacing: .2px;
    opacity: .96;
}

.nbCardDesc {
    margin-top: 4px;
    font-weight: 800;
    font-size: 12px;
    opacity: .82;
}

@media (max-width: 420px) {
    .nbCards {
        gap: 8px;
    }

    .nbCardBody {
        padding: 9px 10px 10px;
    }

    .nbCardTitle {
        font-size: 13px;
    }

    .nbCardDesc {
        font-size: 11px;
    }
}

.nbQuickNav {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: transparent;
}

.nbQuickNavTitle {
    font-weight: 950;
    font-size: 13px;
    opacity: .92;
    margin: 0 0 8px;
}

.nbQuickNavLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-weight: 900;
    opacity: .92;
}

.nbQuickNavLinks a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* sadece çerçeve */
.nbDrop {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .12);
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    border-radius: 18px;
}

.nbLinks {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-weight: 900;
    opacity: .95;
}

.nbLinks a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.nbMeta {
    margin-top: 10px;
    opacity: .88;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
}

.nbMeta a {
    text-decoration: underline;
}

.nbServices {
    margin-top: 12px;
    padding: 14px 16px;
}

.nbServicesTitle {
    font-weight: 900;
    font-size: 14px;
    opacity: .92;
    margin: 0 0 10px;
}

.nbServiceLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-weight: 900;
    opacity: .95;
}

.nbServiceLinks a {
    text-decoration: underline;
}

.nbServiceLinks a.is-active {
    text-decoration-thickness: 3px;
}

.nbGrid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 12px;
}

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

.nbMain {
    padding: 16px;
}

.nbSide {
    padding: 16px;
}

.nbH2 {
    margin: 18px 0 8px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .2px;
}

.nbP {
    margin: 8px 0;
    opacity: .88;
    line-height: 1.65;
}

.nbList {
    margin: 10px 0 0;
    padding-left: 18px;
}

.nbList li {
    margin: 7px 0;
    opacity: .90;
}

.nbDivider {
    height: 1px;
    background: rgba(255, 255, 255, .12);
    margin: 14px 0;
}

.nbFAQ {
    margin-top: 12px;
    padding: 16px;
}

.nbDetails {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 10px;
    margin-top: 10px;
}

.nbDetails:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.nbDetails summary {
    cursor: pointer;
    font-weight: 900;
    opacity: .92;
    list-style: none;
}

.nbDetails summary::-webkit-details-marker {
    display: none;
}

.nbDetails div {
    margin-top: 8px;
    opacity: .86;
    line-height: 1.6;
}
/* ===== Landing Shield (global theme override fix) ===== */
.nbL,
.nbL * {
    color: rgba(255, 255, 255, .94) !important;
}

.nbL a,
.nbL a:visited,
.nbL a:hover {
    color: rgba(255, 255, 255, .94) !important;
}

.nbCards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.nbGrid {
    display: grid !important;
}

.nbDetails {
    display: block !important;
}

.nbDetails summary {
    display: block !important;
}

/* =========================
   LANDING – Hızlı Kartlar (Desktop düzeltme)
   Amaç:
   - Layout bozulmasın
   - Mobil aynen kalsın
   - Desktop’ta çok küçük olmasın
   ========================= */

/* Desktop + büyük tablet */
@media (min-width: 900px) {

    /* Kart alanını küçült ama layout’a uyumlu bırak */
    .nbW .nbCards {
        max-width: 360px;
        /* 🔴 ÖNEMLİ: ideal denge */
        margin-left: auto;
        margin-right: auto;
    }

    /* Kartların kendisi */
    .nbW .nbCards .nbCard {
        width: 170px;
        /* 🔴 150 çok küçüktü → 170 */
    }

    /* Görsel alan oranı korunsun */
    .nbW .nbCards .nbCardImg {
        aspect-ratio: 2 / 3;
    }

}

/* =========================
   LANDING – Hızlı Kartlar (Desktop BÜYÜT)
   Mobil aynen kalır
   ========================= */

/* Desktop + büyük ekran */
@media (min-width: 900px) {

    /* Kart grubunun genel alanı */
    .nbW .nbCards {
        max-width: 560px;
        /* 🔴 büyütüldü (önce 360'tı) */
        margin-left: auto;
        margin-right: auto;
    }

    /* Tek tek kartlar */
    .nbW .nbCards .nbCard {
        width: 270px;
        /* 🔴 kart genişliği büyüdü */
    }

    /* Görsel oranı (değişmiyor, garanti) */
    .nbW .nbCards .nbCardImg {
        aspect-ratio: 2 / 3;
    }
}
/* =========================
   LANDING – Desktop kart aralığı
   Mobil aynen kalır
   ========================= */
@media (min-width: 900px) {

    /* Kart grubunun kendisi */
    .nbW .nbCards {
        max-width: 520px;
        /* webte büyük görünüm */
        margin-left: auto;
        margin-right: auto;

        display: flex;
        /* grid/flex hangisi gelirse gelsin */
        justify-content: center;
        gap: 48px;
        /* 🔴 ARALARINDAKİ BOŞLUK */
    }

    /* Kart boyutu */
    .nbW .nbCards .nbCard {
        width: 250px;
        flex: 0 0 250px;
    }

    /* Görsel oranı garanti */
    .nbW .nbCards .nbCardImg {
        aspect-ratio: 2 / 3;
    }
}
/* =========================
   LANDING – Kart alt başlıklarını ortala
   (Web + Mobil)
   ========================= */

/* Kart içi metin alanı */
.nbW .nbCards .nbCardBody {
    text-align: center;
    align-items: center;
}

/* Başlık */
.nbW .nbCards .nbCardTitle {
    text-align: center;
    width: 100%;
}

/* Alt açıklama */
.nbW .nbCards .nbCardDesc {
    text-align: center;
    width: 100%;
}
/* =========================
   Landing mini cards (Koleksiyon + Dijital Kartvizit)
   - Mobilde çakışmayı bitirir
   - SEO: sadece CSS, HTML'e dokunmuyoruz
   ========================= */

.nbCards.nbCards--mini {
    /* default: grid ile daha stabil */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
    align-items: stretch;
}

/* flex/min-width yüzünden taşmayı kes */
.nbCards.nbCards--mini .nbCard {
    min-width: 0 !important;
    display: block;
}

/* Görsel kutusu: mutlak img için güvenli konteyner */
.nbCards.nbCards--mini .nbCardImg {
    position: relative !important;
    aspect-ratio: 2 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
}

/* img zaten inline style ile absolute geliyor, ama garantiye al */
.nbCards.nbCards--mini .nbCardImg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Dijital kart: contain + padding */
.nbCards.nbCards--mini .nbCardImg.is-contain img {
    object-fit: contain !important;
    padding: 10px;
    background: rgba(0, 0, 0, .10);
}

/* Başlık/alt başlık spacing */
.nbCards.nbCards--mini .nbCardBody {
    padding: 10px 12px 12px;
}

.nbCards.nbCards--mini .nbCardTitle {
    font-weight: 900;
    font-size: 14px;
    line-height: 1.2;
}

.nbCards.nbCards--mini .nbCardDesc {
    margin-top: 4px;
    font-size: 12px;
    opacity: .85;
}

/* Küçük telefonlar: sıkışmayı azalt */
@media (max-width: 420px) {
    .nbCards.nbCards--mini {
        gap: 8px;
    }

    .nbCards.nbCards--mini .nbCardBody {
        padding: 9px 10px 10px;
    }

    .nbCards.nbCards--mini .nbCardTitle {
        font-size: 13px;
    }

    .nbCards.nbCards--mini .nbCardDesc {
        font-size: 11px;
    }
}

/* Çok dar ekran: tek kolona düş */
@media (max-width: 360px) {
    .nbCards.nbCards--mini {
        grid-template-columns: 1fr;
    }
}