@layer pages {

            /* ── Mini hero ── */
            .hsp-hero {
                position: relative;
                background: var(--bb-grad-hero);
                color: var(--bb-on-dark);
                overflow: hidden
            }

            /* tek, ince teal aydınlatma — kapsayıcı overflow:hidden içinde */
            .hsp-hero::before {
                content: "";
                position: absolute;
                width: 520px;
                height: 520px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(63, 180, 180, .14), transparent 70%);
                top: -220px;
                right: -140px
            }

            .hsp-hero__inner {
                position: relative;
                display: flex;
                align-items: center;
                gap: var(--bb-5);
                flex-wrap: wrap;
                padding-block: clamp(40px, 7vh, 76px)
            }

            .hsp-hero__av {
                width: 76px;
                height: 76px;
                border-radius: var(--bb-r-pill);
                background: var(--bb-grad-teal);
                display: grid;
                place-items: center;
                font-family: var(--bb-font-display);
                font-size: 34px;
                color: #fff;
                flex-shrink: 0
            }

            .hsp-hero__txt {
                min-width: 0
            }

            .hsp-hero h1 {
                font-family: var(--bb-font-display);
                font-size: var(--bb-display-m);
                line-height: var(--bb-lh-tight);
                letter-spacing: var(--bb-ls-display);
                margin-bottom: 8px
            }

            .hsp-hero h1 .teal {
                color: var(--bb-teal-400)
            }

            .hsp-hero__sub {
                font-size: var(--bb-text-m);
                color: var(--bb-on-dark-dim);
                max-width: 46ch
            }

            .hsp-hero__spend {
                margin-left: auto;
                display: flex;
                gap: var(--bb-6)
            }

            .hsp-hero__metric {
                text-align: right
            }

            .hsp-hero__metric b {
                display: block;
                font-family: var(--bb-font-display);
                font-size: var(--bb-display-s);
                color: var(--bb-gold-400);
                line-height: 1;
                font-variant-numeric: tabular-nums
            }

            .hsp-hero__metric span {
                font-size: var(--bb-text-xs);
                text-transform: uppercase;
                letter-spacing: var(--bb-ls-label);
                color: var(--bb-on-dark-dim);
                margin-top: 6px;
                display: block
            }

            /* ── İki kolon yerleşim ── */
            .hsp-grid {
                display: grid;
                grid-template-columns: .3fr 1fr;
                gap: var(--bb-7);
                align-items: start
            }

            /* ── Sol: dikey menü ── */
            .hsp-menu {
                position: sticky;
                top: 100px;
                display: flex;
                flex-direction: column;
                gap: 2px
            }

            .hsp-menu__btn {
                position: relative;
                display: flex;
                align-items: center;
                gap: var(--bb-3);
                width: 100%;
                text-align: left;
                padding: 11px 14px;
                border-radius: var(--bb-r-md);
                font-weight: 700;
                font-size: var(--bb-text-m);
                color: var(--bb-ink-700);
                transition: background var(--bb-dur-fast) var(--bb-ease-standard),
                    color var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-menu__btn .ic {
                width: 30px;
                height: 30px;
                border-radius: var(--bb-r-sm);
                display: grid;
                place-items: center;
                font-size: 16px;
                flex-shrink: 0;
                filter: grayscale(.25);
                opacity: .85;
                transition: filter var(--bb-dur-fast) var(--bb-ease-standard), opacity var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-menu__btn:hover {
                background: rgba(92, 42, 16, .05);
                color: var(--bb-cacao-700)
            }

            .hsp-menu__btn:hover .ic {
                filter: none;
                opacity: 1
            }

            .hsp-menu__btn.active {
                background: var(--bb-surface-raised);
                color: var(--bb-cacao-700);
                font-weight: 800;
                box-shadow: var(--bb-e1)
            }

            .hsp-menu__btn.active .ic {
                filter: none;
                opacity: 1
            }

            .hsp-menu__btn .cnt {
                margin-left: auto;
                font-size: var(--bb-text-xs);
                font-weight: 800;
                background: var(--bb-surface-2);
                color: var(--bb-cacao-600);
                border-radius: var(--bb-r-pill);
                min-width: 22px;
                height: 22px;
                display: grid;
                place-items: center;
                padding: 0 7px
            }

            .hsp-menu__btn.active .cnt {
                background: var(--bb-teal-500);
                color: #fff
            }

            .hsp-menu__sep {
                height: 1px;
                background: var(--bb-border);
                margin: var(--bb-3) 6px
            }

            .hsp-menu__btn--exit {
                color: var(--bb-error)
            }

            .hsp-menu__btn--exit:hover {
                background: rgba(192, 57, 43, .07);
                color: var(--bb-error)
            }

            /* ── Sağ: panel ── */
            .hsp-panel {
                display: none;
                animation: hsp-fade var(--bb-dur-base) var(--bb-ease-standard)
            }

            .hsp-panel.active {
                display: block
            }

            @keyframes hsp-fade {
                from {
                    opacity: 0;
                    transform: translateY(10px)
                }

                to {
                    opacity: 1;
                    transform: none
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .hsp-panel {
                    animation: none
                }
            }

            .hsp-panel__head {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: var(--bb-4);
                flex-wrap: wrap;
                margin-bottom: var(--bb-5);
                padding-bottom: var(--bb-4);
                border-bottom: 1px solid var(--bb-border)
            }

            .hsp-panel__head h2 {
                font-family: var(--bb-font-display);
                font-size: var(--bb-display-s);
                letter-spacing: .02em;
                color: var(--bb-cacao-700);
                line-height: 1.02
            }

            .hsp-panel__head p {
                font-size: var(--bb-text-s);
                color: var(--bb-on-light-dim);
                margin-top: 5px;
                max-width: 52ch
            }

            /* ── Sipariş kartı ── */
            .hsp-orders {
                display: flex;
                flex-direction: column;
                gap: var(--bb-4)
            }

            /* Sipariş yükleniyor iskeleti — boş-durum yerine (algılanan hız) */
            .hsp-skel {
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-lg);
                padding: 18px 20px;
                margin-bottom: var(--bb-4)
            }

            .hsp-skel__top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 16px
            }

            .hsp-skel__body {
                display: flex;
                align-items: center;
                gap: 12px
            }

            .sk {
                display: inline-block;
                border-radius: 8px;
                background: linear-gradient(90deg, var(--bb-surface-2) 25%, var(--bb-ivory-100) 50%, var(--bb-surface-2) 75%);
                background-size: 200% 100%;
                animation: skShim 1.25s ease-in-out infinite
            }

            .sk-code {
                width: 120px;
                height: 22px
            }

            .sk-badge {
                width: 78px;
                height: 22px;
                border-radius: var(--bb-r-pill)
            }

            .sk-thumb {
                width: 48px;
                height: 48px
            }

            .sk-line {
                flex: 1;
                height: 16px
            }

            @keyframes skShim {
                0% {
                    background-position: 200% 0
                }

                100% {
                    background-position: -200% 0
                }
            }

            @media (prefers-reduced-motion:reduce) {
                .sk {
                    animation: none
                }
            }

            .hsp-order {
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-lg);
                overflow: hidden;
                transition: border-color var(--bb-dur-base) var(--bb-ease-standard),
                    box-shadow var(--bb-dur-base) var(--bb-ease-standard)
            }

            .hsp-order:hover {
                border-color: var(--bb-ink-200);
                box-shadow: var(--bb-e1)
            }

            .hsp-order__top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--bb-4);
                flex-wrap: wrap;
                padding: var(--bb-4) var(--bb-5)
            }

            .hsp-order__code {
                font-family: var(--bb-font-display);
                font-size: var(--bb-text-xl);
                letter-spacing: .04em;
                color: var(--bb-cacao-700);
                line-height: 1
            }

            .hsp-order__date {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim);
                margin-top: 3px
            }

            .hsp-order__body {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--bb-4);
                flex-wrap: wrap;
                padding: 0 var(--bb-5) var(--bb-4)
            }

            .hsp-order__items {
                display: flex;
                align-items: center;
                gap: var(--bb-3);
                min-width: 0
            }

            .hsp-order__thumbs {
                display: flex
            }

            .hsp-order__thumbs img {
                width: 46px;
                height: 46px;
                border-radius: var(--bb-r-sm);
                object-fit: contain;
                background: var(--bb-surface-2);
                margin-left: -10px;
                border: 2px solid var(--bb-surface-raised)
            }

            .hsp-order__thumbs img:first-child {
                margin-left: 0
            }

            .hsp-order__desc b {
                font-size: var(--bb-text-s);
                color: var(--bb-cacao-700);
                display: block
            }

            .hsp-order__desc span {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim)
            }

            .hsp-order__right {
                display: flex;
                align-items: center;
                gap: var(--bb-5);
                margin-left: auto
            }

            .hsp-order__total {
                text-align: right
            }

            .hsp-order__total b {
                font-family: var(--bb-font-display);
                font-size: 24px;
                color: var(--bb-cacao-700);
                line-height: 1;
                font-variant-numeric: tabular-nums
            }

            .hsp-order__total span {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim)
            }

            .hsp-order__detbtn {
                background: none;
                color: var(--bb-cacao-600);
                font-weight: 700;
                font-size: var(--bb-text-xs);
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 7px 12px;
                border-radius: var(--bb-r-pill);
                border: 1px solid var(--bb-border);
                transition: color var(--bb-dur-fast) var(--bb-ease-standard), background var(--bb-dur-fast) var(--bb-ease-standard),
                    border-color var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-order__detbtn:hover {
                color: var(--bb-teal-700);
                background: rgba(63, 180, 180, .07);
                border-color: var(--bb-teal-300)
            }

            .hsp-order__detbtn .ar {
                display: inline-block;
                transition: transform var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-order.open .hsp-order__detbtn .ar {
                transform: rotate(180deg)
            }

            .hsp-order__det {
                max-height: 0;
                overflow: hidden;
                transition: max-height var(--bb-dur-base) var(--bb-ease-standard)
            }

            .hsp-order__detinner {
                padding: var(--bb-4) var(--bb-5);
                border-top: 1px solid var(--bb-border);
                background: var(--bb-ivory-50)
            }

            .hsp-line {
                display: flex;
                align-items: center;
                gap: var(--bb-3);
                padding: var(--bb-2) 0;
                border-bottom: 1px solid var(--bb-border)
            }

            .hsp-line:last-of-type {
                border-bottom: 0
            }

            .hsp-line img {
                width: 40px;
                height: 40px;
                border-radius: var(--bb-r-sm);
                object-fit: contain;
                background: var(--bb-grad-ivory);
                box-shadow: var(--bb-e1);
                flex-shrink: 0
            }

            .hsp-line__t {
                flex: 1;
                min-width: 0
            }

            .hsp-line__t b {
                font-size: var(--bb-text-s);
                color: var(--bb-ink-700);
                display: block
            }

            .hsp-line__t span {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim)
            }

            .hsp-line__p {
                font-weight: 800;
                font-size: var(--bb-text-s);
                color: var(--bb-cacao-700);
                white-space: nowrap
            }

            .hsp-order__meta {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: var(--bb-3) var(--bb-5);
                margin-top: var(--bb-4);
                padding-top: var(--bb-3);
                border-top: 1px solid var(--bb-border)
            }

            .hsp-ometa {
                display: flex;
                flex-direction: column;
                gap: 3px;
                min-width: 0
            }

            .hsp-ometa span {
                font-size: var(--bb-text-xs);
                text-transform: uppercase;
                letter-spacing: var(--bb-ls-label);
                color: var(--bb-on-light-dim)
            }

            .hsp-ometa b {
                font-size: var(--bb-text-s);
                color: var(--bb-ink-700);
                font-weight: 800;
                word-break: break-word
            }

            .hsp-ometa b.trk {
                font-family: var(--bb-font-mono, monospace);
                letter-spacing: .04em;
                color: var(--bb-teal-700)
            }

            .hsp-det__foot {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--bb-4);
                flex-wrap: wrap;
                margin-top: var(--bb-4);
                padding-top: var(--bb-3);
                border-top: 1px solid var(--bb-border)
            }

            .hsp-det__addr {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim);
                line-height: var(--bb-lh-snug)
            }

            .hsp-det__addr b {
                color: var(--bb-ink-700);
                display: block;
                font-size: var(--bb-text-s);
                margin-bottom: 2px
            }

            /* ── Adres kartı ── */
            .hsp-cards {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: var(--bb-4)
            }

            .hsp-addr {
                position: relative;
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-lg);
                padding: var(--bb-5);
                transition: border-color var(--bb-dur-base) var(--bb-ease-standard)
            }

            .hsp-addr:hover {
                border-color: var(--bb-ink-200)
            }

            .hsp-addr--default {
                border-color: var(--bb-border-gold)
            }

            .hsp-addr__title {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 900;
                font-size: var(--bb-text-m);
                color: var(--bb-cacao-700);
                margin-bottom: var(--bb-2)
            }

            .hsp-addr__title .ic {
                font-size: 16px
            }

            .hsp-addr p {
                font-size: var(--bb-text-s);
                color: var(--bb-on-light-dim);
                line-height: var(--bb-lh-snug)
            }

            .hsp-addr__name {
                color: var(--bb-ink-700);
                font-weight: 800;
                margin-bottom: 2px
            }

            .hsp-addr__actions {
                display: flex;
                gap: var(--bb-4);
                margin-top: var(--bb-4);
                padding-top: var(--bb-3);
                border-top: 1px solid var(--bb-border)
            }

            .hsp-addr__actions button {
                font-size: var(--bb-text-xs);
                font-weight: 800;
                color: var(--bb-cacao-600);
                transition: color var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-addr__actions button:hover {
                color: var(--bb-teal-700)
            }

            .hsp-addr__actions button.rm {
                color: var(--bb-error)
            }

            .hsp-addr__actions button.rm:hover {
                opacity: .72
            }

            .hsp-addr-form {
                margin-top: var(--bb-5)
            }

            .hsp-addr-form .bb-card {
                padding: var(--bb-6)
            }

            .hsp-addr-form__row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: var(--bb-4)
            }

            /* ── Favoriler ── */
            .hsp-fav-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: var(--bb-4)
            }

            .hsp-fav {
                position: relative;
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-lg);
                overflow: hidden;
                display: flex;
                flex-direction: column;
                transition: border-color var(--bb-dur-base) var(--bb-ease-standard), box-shadow var(--bb-dur-base) var(--bb-ease-standard)
            }

            .hsp-fav:hover {
                border-color: var(--bb-ink-200);
                box-shadow: var(--bb-e1)
            }

            .hsp-fav__media {
                position: relative;
                aspect-ratio: 4/3;
                background: var(--bb-grad-ivory);
                display: grid;
                place-items: center;
                padding: var(--bb-4)
            }

            .hsp-fav__media img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                filter: drop-shadow(0 10px 18px rgba(46, 14, 0, .12))
            }

            .hsp-fav__heart {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 34px;
                height: 34px;
                border-radius: var(--bb-r-pill);
                background: var(--bb-surface-raised);
                box-shadow: var(--bb-e1);
                display: grid;
                place-items: center;
                font-size: 15px;
                transition: transform var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-fav__heart:hover {
                transform: scale(1.1)
            }

            .hsp-fav__heart:active {
                transform: scale(.96)
            }

            .hsp-fav__b {
                padding: var(--bb-4);
                display: flex;
                flex-direction: column;
                gap: 6px;
                flex: 1
            }

            .hsp-fav__b h3 {
                font-size: var(--bb-text-m);
                font-weight: 900;
                color: var(--bb-cacao-700)
            }

            .hsp-fav__b p {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim);
                line-height: var(--bb-lh-snug);
                flex: 1
            }

            .hsp-fav__price {
                display: flex;
                align-items: baseline;
                gap: 8px;
                margin-top: 2px
            }

            .hsp-fav__price b {
                font-family: var(--bb-font-display);
                font-size: var(--bb-text-xl);
                color: var(--bb-cacao-700);
                font-variant-numeric: tabular-nums
            }

            .hsp-fav__price span {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim)
            }

            /* ── Destek bileti satırı ── */
            .hsp-tickets {
                display: flex;
                flex-direction: column;
                gap: var(--bb-3)
            }

            .hsp-ticket {
                display: flex;
                align-items: center;
                gap: var(--bb-4);
                width: 100%;
                text-align: left;
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-lg);
                padding: var(--bb-4) var(--bb-5);
                transition: border-color var(--bb-dur-base) var(--bb-ease-standard), box-shadow var(--bb-dur-base) var(--bb-ease-standard)
            }

            .hsp-ticket:hover {
                box-shadow: var(--bb-e1);
                border-color: var(--bb-teal-300)
            }

            .hsp-ticket__ic {
                width: 44px;
                height: 44px;
                border-radius: var(--bb-r-md);
                display: grid;
                place-items: center;
                font-size: 19px;
                background: var(--bb-surface-2);
                flex-shrink: 0;
                transition: background var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-ticket:hover .hsp-ticket__ic {
                background: rgba(63, 180, 180, .1)
            }

            .hsp-ticket__info {
                min-width: 0;
                flex: 1
            }

            .hsp-ticket__code {
                font-family: var(--bb-font-display);
                font-size: var(--bb-text-l);
                letter-spacing: .04em;
                color: var(--bb-cacao-700);
                line-height: 1
            }

            .hsp-ticket__konu {
                font-size: var(--bb-text-s);
                color: var(--bb-ink-700);
                font-weight: 700;
                margin-top: 2px
            }

            .hsp-ticket__meta {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim);
                margin-top: 2px
            }

            .hsp-ticket__arrow {
                color: var(--bb-cacao-500);
                font-size: 18px;
                flex-shrink: 0;
                transition: transform var(--bb-dur-fast) var(--bb-ease-standard), color var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-ticket:hover .hsp-ticket__arrow {
                transform: translateX(3px);
                color: var(--bb-teal-700)
            }

            /* ── Bilet thread (mesaj balonları) ── */
            .hsp-thread__back {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                font-weight: 800;
                font-size: var(--bb-text-s);
                color: var(--bb-cacao-600);
                margin-bottom: var(--bb-4);
                transition: color var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .hsp-thread__back:hover {
                color: var(--bb-teal-700)
            }

            .hsp-thread {
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-xl);
                box-shadow: var(--bb-e1);
                overflow: hidden
            }

            .hsp-thread__head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--bb-3);
                flex-wrap: wrap;
                padding: var(--bb-4) var(--bb-5);
                border-bottom: 1px solid var(--bb-border)
            }

            .hsp-thread__head h3 {
                font-family: var(--bb-font-display);
                font-size: var(--bb-text-xl);
                letter-spacing: .03em;
                color: var(--bb-cacao-700)
            }

            .hsp-thread__head p {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim);
                margin-top: 2px
            }

            .hsp-thread__body {
                padding: var(--bb-5);
                display: flex;
                flex-direction: column;
                gap: var(--bb-4)
            }

            .hsp-msg {
                max-width: 78%;
                display: flex;
                flex-direction: column;
                gap: 5px
            }

            .hsp-msg__bub {
                padding: 12px 16px;
                border-radius: 18px;
                font-size: var(--bb-text-s);
                line-height: var(--bb-lh-snug)
            }

            .hsp-msg__meta {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim);
                padding: 0 6px
            }

            .hsp-msg--musteri {
                align-self: flex-end;
                align-items: flex-end
            }

            .hsp-msg--musteri .hsp-msg__bub {
                background: var(--bb-grad-cacao);
                color: var(--bb-on-dark);
                border-bottom-right-radius: 5px
            }

            .hsp-msg--temsilci {
                align-self: flex-start;
                align-items: flex-start
            }

            .hsp-msg--temsilci .hsp-msg__bub {
                background: var(--bb-surface-2);
                color: var(--bb-ink-700);
                border-bottom-left-radius: 5px;
                border: 1px solid var(--bb-border)
            }

            .hsp-thread__reply {
                display: flex;
                gap: var(--bb-3);
                padding: var(--bb-4) var(--bb-5);
                border-top: 1px solid var(--bb-border);
                background: var(--bb-surface-2)
            }

            .hsp-thread__reply .bb-input {
                margin: 0
            }

            .hsp-thread__reply button {
                flex-shrink: 0
            }

            /* ── Formlar ── */
            .hsp-form {
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-xl);
                padding: var(--bb-6);
                box-shadow: var(--bb-e1);
                max-width: 620px
            }

            .hsp-form__row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: var(--bb-4)
            }

            .hsp-form__hint {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim);
                margin-top: var(--bb-2)
            }

            .hsp-form__foot {
                display: flex;
                align-items: center;
                gap: var(--bb-4);
                margin-top: var(--bb-2);
                flex-wrap: wrap
            }

            .hsp-form__sep {
                height: 1px;
                background: var(--bb-border);
                margin: var(--bb-5) 0
            }

            .hsp-sec-note {
                display: flex;
                gap: var(--bb-3);
                align-items: flex-start;
                background: var(--bb-surface-2);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-md);
                padding: var(--bb-4);
                margin-bottom: var(--bb-5);
                font-size: var(--bb-text-s);
                color: var(--bb-on-light-dim);
                line-height: var(--bb-lh-snug);
                max-width: 620px
            }

            .hsp-sec-note .ic {
                font-size: 22px;
                flex-shrink: 0
            }

            /* ── Boş durum (genel) ── */
            .hsp-empty {
                text-align: center;
                padding: var(--bb-7) var(--bb-4);
                color: var(--bb-on-light-dim)
            }

            .hsp-empty .em {
                width: 80px;
                height: 80px;
                border-radius: var(--bb-r-pill);
                margin: 0 auto var(--bb-4);
                display: grid;
                place-items: center;
                font-size: 36px;
                background: var(--bb-grad-ivory)
            }

            .hsp-empty h3 {
                font-family: var(--bb-font-display);
                font-size: var(--bb-display-s);
                color: var(--bb-cacao-700);
                letter-spacing: .03em;
                margin-bottom: var(--bb-2)
            }

            /* ── Değerlendirmelerim ── */
            .deg-block {
                margin-bottom: var(--bb-6)
            }

            .deg-block__title {
                display: flex;
                align-items: center;
                gap: 8px;
                font-family: var(--bb-font-display);
                font-size: var(--bb-text-xl);
                letter-spacing: .03em;
                color: var(--bb-cacao-700);
                margin-bottom: var(--bb-4)
            }

            .deg-block__title .deg-cnt {
                font-family: var(--bb-font-body, inherit);
                font-size: var(--bb-text-xs);
                font-weight: 900;
                background: var(--bb-surface-2);
                color: var(--bb-cacao-600);
                border-radius: var(--bb-r-pill);
                min-width: 22px;
                height: 22px;
                display: inline-grid;
                place-items: center;
                padding: 0 8px;
                letter-spacing: 0
            }

            .deg-list {
                display: flex;
                flex-direction: column;
                gap: var(--bb-4)
            }

            /* Yorum yazma kartı (satın alınan ürün) */
            .deg-item {
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-lg);
                overflow: hidden;
                transition: border-color var(--bb-dur-base) var(--bb-ease-standard)
            }

            .deg-item:hover {
                border-color: var(--bb-ink-200)
            }

            .deg-item--done {
                border-color: var(--bb-border-gold)
            }

            .deg-item__head {
                display: flex;
                align-items: center;
                gap: var(--bb-3);
                padding: var(--bb-4) var(--bb-5);
                border-bottom: 1px solid var(--bb-border)
            }

            .deg-item__img {
                width: 46px;
                height: 46px;
                border-radius: var(--bb-r-sm);
                object-fit: contain;
                background: var(--bb-surface-2);
                flex-shrink: 0
            }

            .deg-item__t {
                min-width: 0;
                flex: 1
            }

            .deg-item__t b {
                font-size: var(--bb-text-m);
                color: var(--bb-cacao-700);
                font-weight: 900;
                display: block;
                line-height: 1.1
            }

            .deg-item__t span {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim)
            }

            .deg-item__badge {
                font-size: var(--bb-text-xs);
                font-weight: 800;
                color: var(--bb-gold-600, var(--bb-cacao-600));
                background: rgba(201, 162, 75, .12);
                border: 1px solid var(--bb-border-gold);
                border-radius: var(--bb-r-pill);
                padding: 5px 11px;
                flex-shrink: 0
            }

            .deg-item__body {
                padding: var(--bb-4) var(--bb-5);
                display: flex;
                flex-direction: column;
                gap: var(--bb-3)
            }

            /* Yıldız seçici */
            .deg-stars {
                display: flex;
                align-items: center;
                gap: 4px
            }

            .deg-star {
                font-size: 26px;
                line-height: 1;
                color: var(--bb-border);
                cursor: pointer;
                background: none;
                padding: 2px;
                transition: transform var(--bb-dur-fast) var(--bb-ease-standard), color var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .deg-star:hover {
                transform: scale(1.18)
            }

            .deg-star.on {
                color: var(--bb-gold-400)
            }

            .deg-stars__lbl {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim);
                margin-left: 6px
            }

            .deg-ta {
                width: 100%;
                min-height: 88px;
                resize: vertical;
                font-family: inherit
            }

            .deg-item__foot {
                display: flex;
                align-items: center;
                gap: var(--bb-3);
                flex-wrap: wrap
            }

            /* Yorum kartı (yazılmış) */
            .deg-rv {
                background: var(--bb-surface-raised);
                border: 1px solid var(--bb-border);
                border-radius: var(--bb-r-lg);
                padding: var(--bb-4) var(--bb-5);
                transition: border-color var(--bb-dur-base) var(--bb-ease-standard)
            }

            .deg-rv:hover {
                border-color: var(--bb-ink-200)
            }

            .deg-rv__top {
                display: flex;
                align-items: center;
                gap: var(--bb-3);
                margin-bottom: var(--bb-2)
            }

            .deg-rv__top b {
                font-size: var(--bb-text-m);
                color: var(--bb-cacao-700);
                font-weight: 900;
                flex: 1;
                min-width: 0
            }

            .deg-rv__stars {
                color: var(--bb-gold-400);
                font-size: 15px;
                letter-spacing: 1px;
                flex-shrink: 0
            }

            .deg-rv__stars .off {
                color: var(--bb-border)
            }

            .deg-rv__metin {
                font-size: var(--bb-text-s);
                color: var(--bb-ink-700);
                line-height: var(--bb-lh-snug)
            }

            .deg-rv__foot {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--bb-3);
                margin-top: var(--bb-3);
                padding-top: var(--bb-2);
                border-top: 1px solid var(--bb-border)
            }

            .deg-rv__tarih {
                font-size: var(--bb-text-xs);
                color: var(--bb-on-light-dim)
            }

            .deg-rv__sil {
                font-size: var(--bb-text-xs);
                font-weight: 800;
                color: var(--bb-error);
                transition: opacity var(--bb-dur-fast) var(--bb-ease-standard)
            }

            .deg-rv__sil:hover {
                opacity: .7
            }

            /* Mobil sekme şeridi (yatay kaydırma) */
            .hsp-menu__scroll {
                display: contents
            }

            @media (max-width:980px) {
                .hsp-hero__spend {
                    margin-left: 0;
                    width: 100%;
                    justify-content: flex-start;
                    gap: var(--bb-6)
                }

                .hsp-hero__metric {
                    text-align: left
                }

                .hsp-grid {
                    grid-template-columns: minmax(0, 1fr);
                    gap: var(--bb-5)
                }

                .hsp-grid>* {
                    min-width: 0
                }

                .hsp-menu {
                    position: static;
                    top: auto;
                    background: var(--bb-surface-raised);
                    border: 1px solid var(--bb-border);
                    border-radius: var(--bb-r-lg);
                    padding: var(--bb-2)
                }

                /* Mobil: menü butonları yatay kaydırmada gizleniyordu → 2'li grid, HEPSİ görünür */
                .hsp-menu__scroll {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: var(--bb-1);
                    overflow: visible;
                    padding-bottom: 0
                }

                .hsp-menu__btn {
                    flex: initial;
                    white-space: normal;
                    overflow-wrap: anywhere;
                    padding: 11px 12px;
                    justify-content: flex-start
                }

                .hsp-menu__btn .cnt {
                    margin-left: auto
                }

                .hsp-menu__btn--exit {
                    grid-column: 1 / -1;
                    justify-content: center
                }

                .hsp-menu__sep {
                    display: none
                }

                .hsp-cards {
                    grid-template-columns: 1fr
                }

                .hsp-fav-grid {
                    grid-template-columns: repeat(2, 1fr)
                }
            }

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

                .hsp-msg {
                    max-width: 90%
                }
            }

            @media (max-width:768px) {
                .hsp-order__right {
                    margin-left: 0;
                    width: 100%;
                    justify-content: space-between;
                    border-top: 1px solid var(--bb-border);
                    padding-top: var(--bb-3)
                }

                .hsp-order__items {
                    width: 100%
                }

                .hsp-form__row,
                .hsp-addr-form__row {
                    grid-template-columns: 1fr
                }

                .hsp-thread__reply {
                    flex-direction: column
                }

                .hsp-order__meta {
                    grid-template-columns: 1fr 1fr
                }
            }

            @media (max-width:480px) {

                /* hero: avatar üstte, metrikler tek satır kaymasın */
                .hsp-hero__inner {
                    gap: var(--bb-4)
                }

                .hsp-hero__av {
                    width: 64px;
                    height: 64px;
                    font-size: 30px
                }

                .hsp-hero__spend {
                    gap: var(--bb-5) var(--bb-6);
                    flex-wrap: wrap
                }

                .hsp-hero__metric b {
                    font-size: 28px;
                    overflow-wrap: anywhere
                }

                /* sekme ikonları mobilde gizle (yalnız metin) */
                .hsp-menu__btn .ic {
                    display: none
                }

                /* 2'li grid hücresi küçülebilsin + uzun etiket ("Değerlendirmelerim") kırılsın → taşma yok.
         Yaygın kısa etiketler (Siparişlerim/Adreslerim) tek satır kalsın diye font/ls daraltıldı;
         overflow-wrap:anywhere yalnız taşma guard'ı olarak kalır. */
                .hsp-menu__scroll {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .hsp-menu__btn {
                    padding: 10px 12px;
                    min-width: 0;
                    font-size: var(--bb-text-s);
                    letter-spacing: -.01em;
                    white-space: normal;
                    overflow-wrap: anywhere
                }

                .hsp-menu__btn .cnt {
                    flex-shrink: 0
                }

                /* sipariş kartı: başlık/tutar taşmasın */
                .hsp-order__top,
                .hsp-order__body,
                .hsp-order__detinner {
                    padding-left: var(--bb-4);
                    padding-right: var(--bb-4)
                }

                .hsp-order__total b {
                    font-size: 22px
                }

                .hsp-order__meta {
                    grid-template-columns: 1fr
                }

                .hsp-det__foot {
                    flex-direction: column;
                    align-items: stretch;
                    gap: var(--bb-3)
                }

                .hsp-det__foot .bb-btn {
                    width: 100%;
                    justify-content: center
                }

                /* form / kart iç boşluk daralt */
                .hsp-form,
                .hsp-addr-form .bb-card {
                    padding: var(--bb-5)
                }

                /* panel başlığı: buton alta sarsın */
                .hsp-panel__head {
                    flex-direction: column;
                    align-items: flex-start
                }

                /* bilet satırı: rozet alta sarsın, taşma engelle */
                .hsp-ticket {
                    flex-wrap: wrap
                }

                .hsp-ticket__arrow {
                    display: none
                }

                /* mobil yatay-taşma savunması: uzun değer/string kırılsın, input/buton tam genişlik */
                .hsp-line__p,
                .hsp-order__total b,
                .hsp-order__code,
                .hsp-ticket__code {
                    overflow-wrap: anywhere
                }

                .hsp-ometa b.trk {
                    overflow-wrap: anywhere
                }

                .hsp-msg__bub {
                    overflow-wrap: anywhere
                }

                .hsp-ticket__info,
                .hsp-ticket__konu,
                .hsp-ticket__meta {
                    min-width: 0;
                    overflow-wrap: anywhere
                }

                .hsp-thread__reply {
                    flex-direction: column
                }

                .hsp-thread__reply .bb-input,
                .hsp-thread__reply button {
                    width: 100%
                }

                /* yıldız seçici: mobilde dokunma hedefi >=44px (glif boyutu korunur) */
                .deg-star {
                    min-width: 44px;
                    min-height: 44px;
                    display: inline-grid;
                    place-items: center;
                    padding: 0
                }

                /* 5×44px yıldız + etiket dar ekrana sığmazsa etiket alta sarsın (yatay taşma engeli) */
                .deg-stars {
                    flex-wrap: wrap
                }

                .deg-stars__lbl {
                    margin-left: 0;
                    flex-basis: 100%
                }
            }
        }

.hsp-davet{margin-top:var(--bb-4)}
.hsp-davet__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bb-3);margin-bottom:var(--bb-5)}
.hsp-davet__metric{background:var(--bb-surface-raised);border:1px solid var(--bb-ink-100);border-radius:var(--bb-r-lg);padding:var(--bb-4);text-align:center}
.hsp-davet__metric b{display:block;font-family:var(--bb-font-display);font-size:1.6rem;color:var(--bb-cacao-700);line-height:1.1}
.hsp-davet__metric span{font-size:var(--bb-text-xs);font-weight:700;color:var(--bb-on-light-dim);text-transform:uppercase;letter-spacing:.06em}
.hsp-davet__row{display:flex;gap:10px;align-items:stretch}
.hsp-davet__row .bb-input{flex:1 1 auto}
.hsp-davet__hint{margin-top:var(--bb-4);padding:12px 14px;border-radius:var(--bb-r-lg);background:rgba(63,180,180,.12);border:1px solid rgba(63,180,180,.35);color:var(--bb-teal-700);font-size:var(--bb-text-s);line-height:1.45}
@media (max-width:560px){.hsp-davet__row{flex-direction:column}}