/* =========================================================
   neredeo.com - ortak tema (header, menüler, alt bar, footer)
   header.ascx tarafından yüklenir; tüm master sayfalarda geçerli.
   Sınıflar "nd-" ön ekiyle kapsüllenmiştir, eski sayfaları etkilemez.
   ========================================================= */

:root {
    --nd-navy: #2F3369;
    --nd-navy-900: #1F2248;
    --nd-navy-050: #EEEFF7;
    --nd-amber: #F9B233;
    --nd-amber-600: #E39A12;
    --nd-amber-050: #FEF4DF;
    --nd-ink: #1B1E38;
    --nd-muted: #62668A;
    --nd-line: #E3E5EF;
    --nd-bg: #F4F5FA;
    --nd-paper: #FFFFFF;
    --nd-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --nd-wrap: 1320px;
    --nd-radius: 10px;
}

.nd-header, .nd-header *, .nd-bottomnav, .nd-bottomnav *, .nd-footer, .nd-footer *, .nd-home, .nd-home * {
    box-sizing: border-box;
}

.nd-header span, .nd-bottomnav span, .nd-footer span, .nd-home span {
    /* nostyle.css içindeki global span kuralını nötrle */
    display: inline;
    word-break: normal;
}

.nd-header ul, .nd-footer ul, .nd-home ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-header a, .nd-bottomnav a, .nd-footer a, .nd-home a {
    text-decoration: none;
}

.nd-wrap {
    max-width: var(--nd-wrap);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------- HEADER ---------------- */
.nd-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    font-family: var(--nd-font);
    color: var(--nd-ink);
    background: var(--nd-paper);
}

.nd-bar {
    border-bottom: 1px solid var(--nd-line);
}

.nd-bar-in {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 72px;
}

.nd-logo {
    flex: 0 0 auto;
    display: block;
}

    .nd-logo img {
        display: block;
        height: 42px;
        width: auto;
    }

.nd-burger {
    display: none;
    border: 0;
    background: none;
    padding: 6px;
    margin-left: -6px;
    font-size: 28px;
    line-height: 1;
    color: var(--nd-navy);
    cursor: pointer;
}

.nd-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 680px;
    display: flex;
    height: 46px;
    border: 2px solid var(--nd-navy);
    border-radius: 8px;
    background: var(--nd-paper);
    overflow: hidden;
}

    .nd-search:focus-within {
        box-shadow: 0 0 0 3px rgba(249, 178, 51, .45);
    }

.nd-search-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nd-muted);
    font-size: 17px;
    pointer-events: none;
}

.nd-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0 12px 0 42px;
    font: 500 15px/1 var(--nd-font);
    color: var(--nd-ink);
    background: transparent;
}

    .nd-search input::placeholder {
        color: #8A8DAA;
        font-weight: 400;
    }

.nd-search-btn {
    flex: 0 0 auto;
    border: 0;
    padding: 0 22px;
    background: var(--nd-navy);
    color: #fff;
    font: 600 15px/1 var(--nd-font);
    cursor: pointer;
}

    .nd-search-btn:hover {
        background: var(--nd-navy-900);
    }

.nd-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nd-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--nd-navy);
    font: 600 15px/1 var(--nd-font);
    cursor: pointer;
    white-space: nowrap;
}

    .nd-link:hover {
        background: var(--nd-navy-050);
        color: var(--nd-navy);
    }

    .nd-link .bi-chevron-down {
        font-size: 11px;
    }

.nd-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    margin-left: 6px;
    border-radius: 8px;
    background: var(--nd-amber);
    color: var(--nd-navy-900);
    font: 700 15px/1 var(--nd-font);
    white-space: nowrap;
}

    .nd-cta:hover {
        background: var(--nd-amber-600);
        color: var(--nd-navy-900);
    }

    .nd-cta .bi {
        font-size: 17px;
    }

/* Açılır kutular (Üye ol / Hesabım) */
.nd-dd {
    position: relative;
}

.nd-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 250px;
    padding: 6px;
    background: var(--nd-paper);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-radius);
    box-shadow: 0 12px 32px rgba(31, 34, 72, .14);
    display: none;
    z-index: 5;
}

.nd-dd.open .nd-dd-menu {
    display: block;
}

.nd-dd-right .nd-dd-menu {
    left: auto;
    right: 0;
}

.nd-dd-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--nd-ink);
    font-size: 15px;
}

    .nd-dd-menu a:hover {
        background: var(--nd-bg);
    }

    .nd-dd-menu a strong {
        display: block;
        font-weight: 600;
    }

    .nd-dd-menu a small {
        display: block;
        margin-top: 2px;
        color: var(--nd-muted);
        font-size: 13px;
    }

    .nd-dd-menu a .bi {
        width: 22px;
        display: inline-block;
        color: var(--nd-muted);
    }

.nd-dd-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--nd-line);
}

/* ---------------- KATEGORİ MENÜSÜ (masaüstü) ---------------- */
.nd-nav {
    position: relative;
    background: var(--nd-paper);
    border-bottom: 1px solid var(--nd-line);
}

.nd-nav-head, .nd-nav-account, .nd-exp {
    display: none;
}

.nd-menu {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 48px;
    cursor: auto !important; /* no.js setmovesimple 'grab' imlecini ezer */
}

.nd-item {
    position: static;
    display: flex;
}

.nd-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: var(--nd-ink);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

    .nd-top .bi {
        color: var(--nd-navy);
        font-size: 17px;
    }

    .nd-top .bi-chevron-down {
        font-size: 11px;
        color: var(--nd-muted);
    }

.nd-item:hover > .nd-top,
.nd-item:focus-within > .nd-top {
    color: var(--nd-navy);
    border-bottom-color: var(--nd-amber);
}

.nd-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--nd-paper);
    border-top: 1px solid var(--nd-line);
    box-shadow: 0 18px 40px rgba(31, 34, 72, .12);
    visibility: hidden;
    opacity: 0;
    /* kapanırken kısa bir gecikme: fare menüden panele geçerken titremesin */
    transition: opacity .12s ease, visibility 0s linear .18s;
}

.nd-item:hover > .nd-panel,
.nd-item:focus-within > .nd-panel {
    visibility: visible;
    opacity: 1;
    /* açılırken kısa bekleme: menü üzerinden geçip giden fare paneli açmasın */
    transition: opacity .12s ease .12s, visibility 0s linear .12s;
}

.nd-panel-in {
    max-width: var(--nd-wrap);
    margin: 0 auto;
    padding: 26px 20px 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 260px;
    gap: 28px;
}

.nd-panel-sm {
    grid-template-columns: 260px 300px;
    justify-content: start;
}

.nd-col h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nd-muted);
}

.nd-col a,
.nd-grp-list a {
    display: block;
    padding: 7px 0;
    color: var(--nd-ink);
    font-size: 15px;
}

    .nd-col a:hover,
    .nd-grp-list a:hover {
        color: var(--nd-navy);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .nd-col a.nd-all,
    .nd-grp-list a.nd-all {
        margin-top: 4px;
        color: var(--nd-navy);
        font-weight: 600;
    }

.nd-side {
    background: var(--nd-bg);
    border-radius: var(--nd-radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .nd-side a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        background: var(--nd-paper);
        border: 1px solid var(--nd-line);
        color: var(--nd-ink);
        font-weight: 600;
        font-size: 15px;
    }

        .nd-side a:hover {
            border-color: var(--nd-navy);
        }

        .nd-side a .bi {
            color: var(--nd-navy);
            font-size: 18px;
        }

    .nd-side p {
        margin: 0;
        color: var(--nd-muted);
        font-size: 14px;
        line-height: 1.45;
    }

/* Hizmetler: solda gruplar, sağda seçili grubun alt kategorileri */
.nd-hizmet {
    max-width: var(--nd-wrap);
    margin: 0 auto;
    padding: 18px 20px 24px;
    display: grid;
    grid-template-columns: 230px 1fr;
    column-gap: 28px;
}

.nd-grp {
    display: contents;
}

.nd-grp-btn {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--nd-ink);
    font: 600 15px/1.2 var(--nd-font);
    text-align: left;
    cursor: pointer;
}

    .nd-grp-btn .bi {
        color: var(--nd-navy);
        font-size: 17px;
        width: 20px;
    }

    .nd-grp-btn .bi-chevron-right {
        margin-left: auto;
        font-size: 12px;
        color: var(--nd-muted);
        width: auto;
    }

.nd-grp.active .nd-grp-btn {
    background: var(--nd-navy-050);
    color: var(--nd-navy);
}

.nd-grp-list {
    grid-column: 2;
    grid-row: 1 / span 8;
    display: none;
    align-content: start;
    padding: 6px 0 0 28px;
    border-left: 1px solid var(--nd-line);
    column-count: 3;
    column-gap: 28px;
}

.nd-grp.active .nd-grp-list {
    display: block;
}

.nd-grp-list a {
    break-inside: avoid;
}

/* Hesap linkleri yalnızca mobil çekmecede */
.nd-overlay {
    display: none;
}

/* ---------------- MOBİL / TABLET (< 992px) ---------------- */
@media (max-width: 991.98px) {
    .nd-bar-in {
        flex-wrap: wrap;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        row-gap: 10px;
        column-gap: 10px;
    }

    .nd-burger {
        display: block;
    }

    .nd-logo img {
        height: 34px;
    }

    .nd-search {
        order: 5;
        flex: 1 0 100%;
        max-width: none;
        height: 44px;
    }

    .nd-search-btn {
        padding: 0 16px;
    }

    .nd-actions .nd-link,
    .nd-actions .nd-dd {
        display: none;
    }

    .nd-cta {
        height: 38px;
        padding: 0 14px;
        font-size: 14px;
    }

    /* Kategori menüsü çekmeceye dönüşür */
    .nd-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(88vw, 380px);
        z-index: 1050;
        overflow-y: auto;
        border: 0;
        transform: translateX(-100%);
        transition: transform .22s ease;
        visibility: hidden;
    }

    body.nd-nav-open .nd-nav {
        transform: none;
        visibility: visible;
    }

    body.nd-nav-open {
        overflow: hidden;
    }

    body.nd-nav-open .nd-header {
        z-index: 1060;
    }

    .nd-overlay {
        position: fixed;
        inset: 0;
        z-index: 1045;
        background: rgba(27, 30, 56, .45);
    }

    body.nd-nav-open .nd-overlay {
        display: block;
    }

    .nd-nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--nd-line);
    }

        .nd-nav-head img {
            height: 30px;
            width: auto;
        }

    .nd-close {
        border: 0;
        background: none;
        font-size: 26px;
        line-height: 1;
        color: var(--nd-navy);
        padding: 4px;
        cursor: pointer;
    }

    .nd-nav-account {
        display: flex;
        gap: 8px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--nd-line);
        flex-wrap: wrap;
    }

        .nd-nav-account a {
            flex: 1 1 auto;
            text-align: center;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--nd-navy);
            color: var(--nd-navy);
            font-weight: 600;
            font-size: 15px;
        }

            .nd-nav-account a.nd-primary {
                background: var(--nd-navy);
                color: #fff;
            }

        .nd-nav-account .nd-cikis {
            flex: 0 0 100%;
            border: 0;
            padding: 6px 0 0;
            color: var(--nd-muted);
            font-weight: 500;
        }

    .nd-nav .nd-wrap {
        padding: 0;
    }

    .nd-menu {
        display: block;
        height: auto;
    }

    .nd-item {
        display: grid;
        grid-template-columns: 1fr auto;
        border-bottom: 1px solid var(--nd-line);
    }

    .nd-top {
        padding: 15px 16px;
        border: 0;
        margin: 0;
        font-size: 16px;
    }

        .nd-top .bi-chevron-down {
            display: none;
        }

    .nd-item:hover > .nd-top,
    .nd-item:focus-within > .nd-top {
        border: 0;
    }

    .nd-exp {
        display: block;
        width: 52px;
        border: 0;
        border-left: 1px solid var(--nd-line);
        background: none;
        color: var(--nd-navy);
        font-size: 15px;
        cursor: pointer;
    }

        .nd-exp .bi {
            display: inline-block;
            transition: transform .18s ease;
        }

    .nd-item.open > .nd-exp .bi {
        transform: rotate(180deg);
    }

    .nd-panel,
    .nd-item:hover > .nd-panel,
    .nd-item:focus-within > .nd-panel {
        grid-column: 1 / -1;
        position: static;
        display: none;
        visibility: visible;
        opacity: 1;
        box-shadow: none;
        transition: none;
        background: var(--nd-bg);
    }

    .nd-item.open > .nd-panel {
        display: block;
    }

    .nd-panel-in {
        display: block;
        padding: 6px 16px 14px;
    }

    .nd-col {
        padding: 8px 0;
    }

        .nd-col h4 {
            margin: 6px 0 2px;
        }

    .nd-side {
        background: none;
        padding: 8px 0 0;
    }

        .nd-side p {
            display: none;
        }

    .nd-hizmet {
        display: block;
        padding: 6px 8px 10px;
    }

    .nd-grp {
        display: block;
    }

    .nd-grp-btn .bi-chevron-right {
        transition: transform .18s ease;
    }

    .nd-grp.active .nd-grp-btn {
        background: none;
    }

    .nd-grp.open .nd-grp-btn .bi-chevron-right {
        transform: rotate(90deg);
    }

    .nd-grp-list,
    .nd-grp.active .nd-grp-list {
        display: none;
        column-count: 1;
        border: 0;
        padding: 0 12px 8px 42px;
    }

    .nd-grp.open .nd-grp-list {
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .nd-top {
        padding: 0 10px;
        font-size: 14px;
    }

    .nd-panel-in {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 220px;
    }

    .nd-panel-sm {
        grid-template-columns: 240px 260px;
    }

    .nd-grp-list {
        column-count: 2;
    }
}

/* ---------------- MOBİL ALT BAR ---------------- */
.nd-bottomnav {
    display: none;
}

.nd-bottomnav-spacer {
    display: none;
}

@media (max-width: 991.98px) {
    .nd-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: 62px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: var(--nd-paper);
        border-top: 1px solid var(--nd-line);
        font-family: var(--nd-font);
    }

    .nd-bottomnav-spacer {
        display: block;
        height: 62px;
    }

    .nd-bn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: none;
        color: var(--nd-muted);
        font: 600 12px/1 var(--nd-font);
        cursor: pointer;
    }

        .nd-bn .bi {
            font-size: 21px;
            line-height: 1;
        }

        .nd-bn.on {
            color: var(--nd-navy);
        }

        .nd-bn.nd-bn-cta .bi {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--nd-amber);
            color: var(--nd-navy-900);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .nd-bn.nd-bn-cta {
            color: var(--nd-navy-900);
        }
}

/* ---------------- FOOTER ---------------- */
.nd-footer {
    margin-top: 64px;
    background: var(--nd-navy-900);
    color: #C9CBE3;
    font-family: var(--nd-font);
    font-size: 15px;
}

.nd-footer-in {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
    gap: 36px;
    padding-top: 48px;
    padding-bottom: 40px;
}

.nd-footer h5 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.nd-footer li {
    padding: 5px 0;
}

.nd-footer a {
    color: #C9CBE3;
}

    .nd-footer a:hover {
        color: var(--nd-amber);
    }

.nd-footer-brand img {
    height: 36px;
    width: auto;
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
}

.nd-footer-brand p {
    margin: 14px 0 0;
    line-height: 1.55;
}

.nd-footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
}

    .nd-footer-phone .bi {
        color: var(--nd-amber);
        font-size: 20px;
    }

.nd-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

    .nd-stores img {
        height: 40px;
        width: auto;
        display: block;
    }

.nd-social {
    display: flex;
    gap: 8px;
}

    .nd-social a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .25);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
    }

        .nd-social a:hover {
            background: var(--nd-amber);
            border-color: var(--nd-amber);
            color: var(--nd-navy-900);
        }

.nd-copy {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 16px 0;
    font-size: 13px;
    color: #9EA1C4;
}

@media (max-width: 991.98px) {
    .nd-footer-in {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding-top: 36px;
    }
}

@media (max-width: 575.98px) {
    .nd-footer-in {
        grid-template-columns: 1fr;
    }
}

/* Klavye odak görünürlüğü */
.nd-header a:focus-visible, .nd-header button:focus-visible,
.nd-bottomnav a:focus-visible, .nd-bottomnav button:focus-visible,
.nd-footer a:focus-visible, .nd-home a:focus-visible, .nd-home button:focus-visible {
    outline: 3px solid var(--nd-amber);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .nd-nav, .nd-panel, .nd-exp .bi, .nd-grp-btn .bi-chevron-right {
        transition: none !important;
    }
}