:root {
    --dt-stack-gap: 40px;
    --hb-primary: #ff6969;
    --hb-primary-dark: #e55555;
    --hb-orange-grad: linear-gradient(135deg, #ff9a44 0%, #ff6969 100%);
    --hb-text: #1e293b;
    --hb-text-muted: #64748b;
    --hb-bg: #ffffff;
    --hb-border: #e2e8f0;
    --hb-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    --hb-shadow-sm: 0 2px 12px rgba(255, 105, 105, 0.12);
    --header-height: 72px;
    --header-height-mob: 64px;
    --hb-header-box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --hb-header-box-shadow-scrolled: 0 12px 40px -12px rgba(15, 23, 42, 0.12);
    --hb-header-radius: 22px
}

.hb-header,.hb-mobile-menu {
    font-family: "Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,sans-serif
}

.hb-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: auto;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 20px 0;
    width: 100%;
    background: 0 0;
    border: none;
    box-shadow: none;
    box-sizing: border-box
}

@media (max-width: 639px) {
    .hb-header {
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right: max(16px,env(safe-area-inset-right))
    }
}

.hb-header.scrolled .hb-header-inner {
    box-shadow: var(--hb-header-box-shadow-scrolled);
    border-color: rgba(255,105,105,.22)
}

.hb-header-inner {
    max-width: none;
    margin: 0;
    width: 100%;
    min-height: 56px;
    padding: 0 14px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-header-radius);
    box-shadow: var(--hb-header-box-shadow);
    box-sizing: border-box;
    transition: box-shadow .3s ease,border-color .25s ease
}

.hb-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.5px;
    color: var(--hb-text);
    transition: opacity .2s ease;
    flex-shrink: 0
}

@media (min-width: 1280px) {
    .hb-logo {
        font-size:22px
    }
}

.hb-logo .logo-hoca {
    color: var(--hb-primary)
}

.hb-logo .logo-burada {
    color: var(--hb-text)
}

.hb-logo:hover .logo-hoca {
    color: var(--hb-primary-dark)
}

.hb-site-logo__img {
    max-width: 200px;
    width: auto;
    height: auto;
    display: block
}

.hb-f2__logo .hb-site-logo__img {
    max-width: 180px
}

.hb-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
    min-width: 0
}

.hb-nav a {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hb-text);
    text-decoration: none;
    border-radius: 12px;
    transition: all .2s ease;
    white-space: nowrap
}

@media (min-width: 1100px) {
    .hb-nav {
        gap:6px
    }

    .hb-nav a {
        padding: 10px 14px;
        font-size: 13px
    }
}

@media (min-width: 1280px) {
    .hb-header-inner {
        gap:16px;
        padding: 0 18px 0 22px
    }
}

.hb-nav a:hover {
    color: var(--hb-primary);
    background: linear-gradient(135deg,#fff8f8 0,#fff0f0 100%)
}

.hb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 13px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    border-radius: var(--hb-header-radius);
    text-decoration: none;
    transition: all .25s ease;
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1.2
}

.hb-btn-outline {
    background: 0 0;
    color: var(--hb-text);
    border-color: #cbd5e1
}

.hb-btn-outline:hover {
    border-color: #9fd8b7;
    color: #2f8f5b;
    background: linear-gradient(135deg,#f5fcf8 0,#ecf9f1 100%);
    box-shadow: 0 4px 14px rgba(47,143,91,.14)
}

.hb-btn-primary {
    background: #ff6969;
    color: #fff!important;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(255,105,105,.3)
}

.hb-btn-primary:hover {
    background: #ff6969;
    border-color: #ff6969;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255,105,105,.4)
}

@media (min-width: 1100px) {
    .hb-btn {
        padding:10px 20px;
        font-size: 13px
    }
}

.hb-hamburger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid rgba(255,105,105,.35);
    border-radius: var(--hb-header-radius);
    cursor: pointer;
    transition: all .3s ease;
    -webkit-tap-highlight-color: transparent;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: var(--hb-primary)
}

@media (min-width: 1100px) {
    .hb-hamburger {
        font-size:13px
    }
}

.hb-hamburger .hb-menu-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px
}

.hb-hamburger .hb-menu-bars span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: all .3s ease
}

.hb-hamburger.active .hb-menu-bars span:first-child {
    transform: rotate(45deg) translate(5px,5px)
}

.hb-hamburger.active .hb-menu-bars span:nth-child(2) {
    opacity: 0
}

.hb-hamburger.active .hb-menu-bars span:nth-child(3) {
    transform: rotate(-45deg) translate(5px,-5px)
}

.hb-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s,visibility .3s
}

.hb-mobile-overlay.open {
    opacity: 1;
    visibility: visible
}

.hb-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px,85vw);
    height: 100vh;
    background: #fff;
    z-index: 1001;
    box-shadow: -8px 0 40px rgba(0,0,0,.12);
    transition: right .35s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.hb-mobile-menu.open {
    right: 0
}

.hb-mobile-menu-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff
}

.hb-mobile-menu-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--hb-text)
}

.hb-mobile-menu-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 999px;
    border: 1px solid rgba(255,105,105,.3);
    background: linear-gradient(135deg,#fff8f8 0,#fff5f5 100%);
    color: var(--hb-primary);
    cursor: pointer;
    transition: all .2s
}

.hb-mobile-menu-close:hover {
    background: #ff6969;
    border-color: #ff6969;
    color: #fff
}

.hb-mobile-menu-close i {
    font-size: 14px
}

.hb-mobile-menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px
}

.hb-mobile-menu.hb-logged-in .hb-mobile-menu-body {
    padding-top: 12px
}

.hb-mobile-menu .hb-nav-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0
}

.hb-mobile-menu .hb-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 20px
}

.hb-mobile-menu.hb-logged-in .hb-nav {
    margin-bottom: 2px
}

.hb-mobile-menu .hb-nav a {
    padding: 11px 16px;
    font-size: 13px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9
}

.hb-mobile-menu .hb-nav a:last-child {
    border-bottom: none
}

.hb-mobile-menu .hb-nav a i {
    font-size: 15px;
    color: var(--hb-primary);
    opacity: .8
}

.hb-mobile-menu .hb-actions {
    flex-direction: column;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f5f9;
    gap: 12px
}

.hb-mobile-menu .hb-actions-top {
    order: -1
}

.hb-mobile-menu .hb-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 14px
}

@media (max-width: 991px) {
    .hb-header .hb-actions,.hb-header .hb-hesabim-dropdown-wrap,.hb-header .hb-logged-wrap,.hb-header .hb-nav {
        display:none!important
    }

    .hb-hamburger {
        display: flex
    }

    .hb-mobile-overlay {
        display: block
    }

    .hb-mobile-menu .hb-actions,.hb-mobile-menu .hb-nav,.hb-mobile-menu .hb-nav-wrapper {
        display: flex
    }
}

@media (max-width: 991px) {
    .hb-header {
        --hb-header-radius:18px
    }

    .hb-header-inner {
        min-height: 52px;
        padding: 0 12px 0 14px;
        border-radius: var(--hb-header-radius);
        gap: 8px
    }

    .hb-logo {
        font-size: 19px
    }
}

@media (max-width: 480px) {
    .hb-logo {
        font-size:19px
    }
}

.hb-hesabim-dropdown-wrap {
    position: relative
}

.hb-btn-hesabim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    border-radius: var(--hb-header-radius);
    border: none;
    background: #ff6969;
    color: #fff!important;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 16px rgba(255,105,105,.3);
    line-height: 1.2
}

.hb-btn-hesabim:hover {
    background: #ff6969;
    box-shadow: 0 6px 24px rgba(255,105,105,.4);
    transform: translateY(-1px)
}

@media (min-width: 1100px) {
    .hb-btn-hesabim {
        padding:10px 18px;
        font-size: 13px
    }
}

.hb-btn-hesabim .hb-chevron {
    font-size: 10px;
    transition: transform .2s
}

.hb-hesabim-dropdown-wrap.open .hb-chevron {
    transform: rotate(180deg)
}

.hb-hesabim-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(15,23,42,.15);
    border: 1px solid var(--hb-border);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .2s ease;
    z-index: 100
}

.hb-hesabim-dropdown-wrap.open .hb-hesabim-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.hb-hesabim-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hb-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all .2s
}

.hb-hesabim-dropdown a:hover {
    background: #fff5f5;
    color: var(--hb-primary)
}

.hb-hesabim-dropdown a i {
    font-size: 14px;
    color: var(--hb-primary)
}

.hb-logged-wrap {
    display: flex;
    align-items: center;
    gap: 10px
}

.hb-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,105,105,.35);
    background: #fff;
    color: var(--hb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    transition: all .2s ease;
    flex-shrink: 0
}

.hb-icon-btn:hover {
    background: #ff6969;
    border-color: #ff6969;
    color: #fff
}

.hb-icon-btn i {
    font-size: 18px
}

.hb-icon-btn .hb-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--hb-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center
}

.hb-btn-logout-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 999px;
    border: 1px solid var(--hb-primary);
    background: linear-gradient(135deg,#fff8f8 0,#fff5f5 100%);
    color: var(--hb-primary);
    text-decoration: none;
    transition: all .2s ease;
    cursor: pointer;
    margin-left: 4px
}

.hb-btn-logout-header:hover {
    background: #ff6969;
    border-color: #ff6969;
    color: #fff
}

.hb-btn-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 12px;
    border: 1px solid rgba(255,105,105,.35);
    background: #fff;
    color: var(--hb-primary);
    cursor: pointer;
    transition: all .2s ease
}

.hb-btn-menu:hover {
    background: #ff6969;
    border-color: #ff6969;
    color: #fff
}

.hb-btn-menu .hb-menu-bars {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.hb-btn-menu .hb-menu-bars span {
    display: block;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 2px
}

.hb-header .hb-guest-only {
    display: flex
}

.hb-header .hb-logged-only {
    display: none
}

.hb-header.hb-logged-in .hb-guest-only {
    display: none
}

.hb-header.hb-logged-in .hb-logged-only {
    display: flex
}

.hb-mobile-menu .hb-guest-only {
    display: flex
}

.hb-mobile-menu.hb-logged-in .hb-guest-only {
    display: none
}

.hb-mobile-menu.hb-logged-in .hb-logged-menu-content {
    display: block
}

.hb-mobile-menu.hb-logged-in .hb-menu-logout {
    display: block
}

.hb-logged-menu-content {
    margin-bottom: 16px;
    margin-top: 0;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0
}

.hb-hesabim-section {
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden
}

.hb-hesabim-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f8fafc;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    color: var(--hb-text)
}

.hb-hesabim-header i {
    font-size: 12px;
    color: var(--hb-primary);
    transition: transform .2s
}

.hb-hesabim-section:not(.open) .hb-hesabim-list {
    display: none
}

.hb-hesabim-list {
    padding: 8px 0;
    background: #fff
}

.hb-hesabim-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hb-text);
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: all .2s
}

.hb-hesabim-list a:last-child {
    border-bottom: none
}

.hb-hesabim-list a:hover {
    background: #fff8f8;
    color: var(--hb-primary)
}

.hb-hesabim-list a i {
    font-size: 14px;
    color: var(--hb-primary);
    flex-shrink: 0
}

.hb-menu-logout {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid #f1f5f9
}

.hb-menu-logout a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #b91c1c;
    background: linear-gradient(135deg,#fff8f8 0,#fff5f5 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
    text-decoration: none;
    transition: all .2s
}

.hb-menu-logout a:hover {
    background: #fef2f2;
    border-color: #f87171;
    color: #dc2626
}

.hb-footer.hb-footer--anasayfa.hb-f2 {
    --f2-bg: linear-gradient(165deg, #fff5f4 0%, #f8fafc 42%, #eef2f7 100%);
    --f2-panel: rgba(255, 255, 255, 0.78);
    --f2-border: rgba(15, 23, 42, 0.09);
    --f2-ink: #0f172a;
    --f2-muted: #64748b;
    --f2-brand: #ff6969;
    margin-top: auto;
    font-family: "Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
    color: var(--f2-ink);
    background: var(--f2-bg);
    border-top: 1px solid rgba(15,23,42,.07)
}

.hb-footer.hb-footer--anasayfa.hb-f2 a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease
}

.hb-footer.hb-footer--anasayfa.hb-f2 .hb-f2__cat-cell:hover {
    color: var(--f2-ink)
}

.hb-footer.hb-footer--anasayfa.hb-f2 .hb-f2__cat-cell:hover .hb-f2__cat-name {
    color: var(--f2-brand)
}

.hb-f2__wrap {
    box-sizing: border-box;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(22px,4vw,40px) clamp(16px,2.5vw,20px) max(20px,env(safe-area-inset-bottom))
}

.hb-f2__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(16px,3vw,28px);
    padding-bottom: clamp(18px,3vw,26px);
    border-bottom: 1px solid var(--f2-border)
}

.hb-f2__brand-block {
    min-width: min(100%,280px)
}

.hb-f2__logo {
    display: inline-flex;
    align-items: baseline;
    font-size: clamp(1.45rem, 3.4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1
}

.hb-f2__logo .logo-hoca {
    color: var(--f2-brand)
}

.hb-f2__logo .logo-burada {
    color: var(--f2-ink)
}

.hb-f2__lead {
    margin: 10px 0 0;
    font-size: clamp(12px, 2.1vw, 14px);
    line-height: 1.55;
    color: var(--f2-muted);
    max-width: 38ch
}

.hb-f2__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px,2vw,18px)
}

.hb-f2__social {
    display: flex;
    align-items: center;
    gap: 8px
}

.hb-f2__social a {
    width: clamp(36px,8vw,40px);
    height: clamp(36px,8vw,40px);
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 2px 12px rgba(15,23,42,.1);
    transition: transform .18s ease,box-shadow .18s ease,background .18s ease,filter .18s ease;
    color: #fff
}

.hb-f2__social a i {
    color: #fff
}

.hb-f2__social a:hover,.hb-f2__social a:hover i {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15,23,42,.16)
}

.hb-f2__social .hb-fs-fb:hover {
    background: #166bda
}

.hb-f2__social .hb-fs-fb {
    background: #1877f2
}

.hb-f2__social .hb-fs-x {
    background: #000;
    font-size: 1.2rem
}

.hb-f2__social .hb-fs-x:hover {
    background: #222
}

.hb-f2__social .hb-fs-ig {
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)
}

.hb-f2__social .hb-fs-ig:hover {
    filter: saturate(1.08)
}

.hb-f2__social .hb-fs-in {
    background: #0a66c2
}

.hb-f2__social .hb-fs-in:hover {
    background: #0958aa
}

.hb-f2__grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: clamp(12px,2vw,18px);
    padding: clamp(18px,3vw,26px) 0;
    align-items: stretch
}

@media (max-width: 900px) {
    .hb-f2__grid {
        grid-template-columns:1fr 1fr
    }

    .hb-f2__panel--contact {
        grid-column: 1/-1
    }
}

@media (max-width: 560px) {
    .hb-f2__grid {
        grid-template-columns:1fr
    }

    .hb-f2__panel--contact {
        grid-column: auto
    }

    .hb-f2__head {
        flex-direction: column;
        align-items: flex-start
    }

    .hb-f2__toolbar {
        justify-content: flex-start;
        width: 100%
    }
}

.hb-f2__panel {
    background: var(--f2-panel);
    border: 1px solid var(--f2-border);
    border-radius: 14px;
    padding: clamp(14px,2.5vw,18px);
    min-width: 0
}

.hb-f2__h-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
    padding: 9px 16px;
    border-radius: 12px;
    background: #ff6969;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 3px 12px rgba(255,105,105,.35)
}

.hb-f2__h-wrap .hb-f2__h {
    margin: 0;
    font-size: clamp(10px, 1.5vw, 11px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #fff
}

.hb-f2__h {
    margin: 0 0 12px;
    font-size: clamp(10px, 1.5vw, 11px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--f2-muted)
}

.hb-f2__cat-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px 8px
}

@media (max-width: 340px) {
    .hb-f2__cat-grid {
        grid-template-columns:1fr
    }
}

.hb-f2__cat-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 11px;
    border-radius: 10px;
    background: linear-gradient(145deg,#fff 0,#f4f7fb 100%);
    border: 1px solid rgba(15,23,42,.07);
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,0 1px 3px rgba(15,23,42,.04);
    font-size: clamp(11px, 1.75vw, 13px);
    font-weight: 600;
    color: var(--f2-ink);
    overflow: hidden;
    transition: border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease
}

.hb-f2__cat-cell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,#ff6969 0,#ff8787 100%);
    border-radius: 10px 0 0 10px;
    opacity: .95
}

.hb-f2__cat-cell:hover {
    border-color: rgba(255,105,105,.38);
    background: #fff;
    box-shadow: 0 6px 18px rgba(255,105,105,.1);
    transform: translateY(-1px)
}

.hb-f2__cat-name {
    min-width: 0;
    line-height: 1.3;
    padding-left: 2px
}

.hb-f2__cat-go {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: #ff6969;
    background: rgba(255,105,105,.14);
    border: 1px solid rgba(255,105,105,.2);
    transition: background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease
}

.hb-f2__cat-cell:hover .hb-f2__cat-go {
    background: #ff6969;
    color: #fff;
    border-color: rgba(0,0,0,.06);
    transform: translateX(2px)
}

.hb-f2__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.hb-f2__links a {
    font-size: clamp(11px, 1.85vw, 13px);
    font-weight: 500;
    color: var(--f2-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.hb-f2__links a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--f2-brand);
    opacity: .7;
    flex-shrink: 0
}

.hb-f2__links a:hover {
    color: var(--f2-ink)
}

.hb-f2__panel--quick .hb-f2__h-wrap {
    margin-bottom: 18px
}

.hb-f2__quick-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    column-gap: clamp(22px,4vw,36px);
    row-gap: 16px;
    align-items: start;
    min-width: 0
}

.hb-f2__quick-grid .hb-f2__subh {
    margin: 0;
    font-size: clamp(10px, 1.4vw, 11px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--f2-ink);
    opacity: .92;
    line-height: 1.45;
    padding-top: 2px;
    width: fit-content;
    max-width: 100%;
    background-image: linear-gradient(90deg,#ff6969 0,rgba(255,105,105,.72) 42%,rgba(255,105,105,.22) 78%,transparent 100%);
    background-size: 50% 2px;
    background-position: left bottom;
    background-repeat: no-repeat
}

.hb-f2__quick-grid .hb-f2__quick-link {
    font-size: clamp(11px, 1.85vw, 13px);
    font-weight: 500;
    color: var(--f2-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.45;
    min-width: 0
}

.hb-f2__quick-grid .hb-f2__quick-link::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--f2-brand);
    opacity: .7;
    flex-shrink: 0
}

.hb-f2__quick-grid .hb-f2__quick-link:hover {
    color: var(--f2-ink)
}

@media (max-width: 480px) {
    .hb-f2__quick-grid {
        column-gap:18px;
        row-gap: 14px
    }
}

@media (max-width: 360px) {
    .hb-f2__quick-grid {
        display:flex;
        flex-direction: column;
        row-gap: 14px
    }

    .hb-f2__quick-grid>:first-child {
        order: 1
    }

    .hb-f2__quick-grid>:nth-child(3) {
        order: 2
    }

    .hb-f2__quick-grid>:nth-child(5) {
        order: 3
    }

    .hb-f2__quick-grid>:nth-child(7) {
        order: 4
    }

    .hb-f2__quick-grid>:nth-child(9) {
        order: 5
    }

    .hb-f2__quick-grid>:nth-child(11) {
        order: 6
    }

    .hb-f2__quick-grid>:nth-child(2) {
        order: 7
    }

    .hb-f2__quick-grid>:nth-child(4) {
        order: 8
    }

    .hb-f2__quick-grid>:nth-child(6) {
        order: 9
    }

    .hb-f2__quick-grid>:nth-child(8) {
        order: 10
    }

    .hb-f2__quick-grid>:nth-child(10) {
        order: 11
    }

    .hb-f2__quick-grid>:nth-child(12) {
        order: 12
    }
}

.hb-f2__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.hb-f2__panel--contact {
    display: flex;
    flex-direction: column
}

.hb-f2__contacts li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: clamp(11px, 1.85vw, 13px);
    line-height: 1.38;
    color: var(--f2-muted);
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 5px 8px;
    margin: 0 -2px;
    box-sizing: border-box;
    transition: background .2s ease,border-color .2s ease,box-shadow .2s ease
}

.hb-f2__contacts li:last-child {
    align-items: flex-start
}

.hb-f2__contacts i {
    flex-shrink: 0;
    margin-top: 0;
    font-size: 1.05rem;
    line-height: 1;
    transition: color .2s ease
}

.hb-f2__contacts li:last-child i {
    margin-top: 3px
}

.hb-f2__contacts li a {
    line-height: 1.38;
    transition: color .2s ease
}

.hb-f2__contacts li:first-child:hover {
    background: rgba(59,130,246,.1);
    border-color: rgba(37,99,235,.45);
    box-shadow: 0 2px 10px rgba(37,99,235,.12)
}

.hb-f2__contacts li:first-child:hover .i-mail {
    color: #1d4ed8
}

.hb-f2__contacts li:first-child:hover a {
    color: #0f172a
}

.hb-f2__contacts li:nth-child(2):hover {
    background: rgba(13,148,136,.1);
    border-color: rgba(15,118,110,.45);
    box-shadow: 0 2px 10px rgba(13,148,136,.12)
}

.hb-f2__contacts li:nth-child(2):hover .i-phone {
    color: #0f766e
}

.hb-f2__contacts li:nth-child(2):hover a {
    color: #0f172a
}

.hb-f2__contacts li:nth-child(3):hover {
    background: rgba(34,197,94,.1);
    border-color: rgba(22,163,74,.45);
    box-shadow: 0 2px 10px rgba(22,163,74,.12)
}

.hb-f2__contacts li:nth-child(3):hover .i-wa {
    color: #15803d
}

.hb-f2__contacts li:nth-child(3):hover a {
    color: #0f172a
}

.hb-f2__contacts li:nth-child(4):hover {
    background: rgba(249,115,22,.1);
    border-color: rgba(234,88,12,.45);
    box-shadow: 0 2px 10px rgba(234,88,12,.12)
}

.hb-f2__contacts li:nth-child(4):hover .i-loc {
    color: #c2410c
}

.hb-f2__contacts li:nth-child(4):hover span {
    color: #0f172a
}

.hb-f2__contact-legal {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(15,23,42,.1);
    display: flex;
    flex-direction: column;
    gap: 8px
}

.hb-f2__contact-legal a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 3px 0;
    font-size: clamp(11px, 1.7vw, 12px);
    font-weight: 600;
    color: var(--f2-muted);
    text-decoration: none;
    line-height: 1.4;
    transition: color .18s ease
}

.hb-f2__contact-legal a i {
    flex-shrink: 0;
    font-size: 1.08rem;
    color: #ff6969;
    line-height: 1
}

.hb-f2__contact-legal a:hover {
    color: var(--f2-ink)
}

.hb-f2__contact-legal a:hover i {
    color: #e11d48
}

.hb-f2__contact-note {
    margin-top: auto;
    padding-top: 14px;
    margin-bottom: 0;
    border-top: 1px dashed rgba(15,23,42,.12);
    font-size: clamp(11px, 1.75vw, 12px);
    line-height: 1.55;
    color: var(--f2-muted);
    margin-top:0.5rem;
}

.hb-f2__contact-note a {
    color: var(--f2-brand);
    font-weight: 700
}

.hb-f2__contact-note a:hover {
    color: var(--f2-ink)
}

.hb-f2__contacts .i-mail {
    color: #60a5fa
}

.hb-f2__contacts .i-phone {
    color: #2dd4bf
}

.hb-f2__contacts .i-wa {
    color: #4ade80
}

.hb-f2__contacts .i-loc {
    color: #fb923c
}

.hb-f2__contacts a {
    color: var(--f2-muted)
}

.hb-f2__bar {
    border-top: 1px solid var(--f2-border);
    padding-top: clamp(16px,2.5vw,22px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px,2vw,16px);
    text-align: center
}

.hb-f2__trust {
    width: 100%;
    max-width: 100%;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--f2-border);
    border-radius: 14px;
    padding: clamp(14px,2.4vw,22px) clamp(14px,2.2vw,20px);
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(15,23,42,.05)
}

.hb-f2__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(14px,2.5vw,24px);
    margin-bottom: clamp(10px,1.6vw,14px)
}

.hb-f2__logos img {
    height: clamp(30px,5.5vw,44px);
    width: auto;
    max-width: min(160px,38vw);
    object-fit: contain;
    opacity: .98;
    mix-blend-mode: multiply
}

.hb-f2__logos a img {
    display: block
}

.hb-f2__pay-copy {
    margin: 0;
    font-size: clamp(10px, 1.7vw, 12px);
    line-height: 1.5;
    color: var(--f2-muted);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto
}

.hb-f2__pay-copy strong {
    color: var(--f2-ink);
    font-weight: 700
}

.hb-f2__copy {
    margin: 0;
    font-size: clamp(10px, 1.6vw, 12px);
    font-weight: 600;
    color: #64748b
}

:root {
    --bc-gap: 24px;
    --bc-gap-after: 5px
}

.bd-breadcrumb-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--bc-gap) 20px 0;
    margin-bottom: var(--bc-gap-after);
    width: 100%;
    box-sizing: border-box
}

.bd-breadcrumb-wrap--boxed {
    margin-bottom: var(--bc-gap)
}

@media (max-width: 639px) {
    .bd-breadcrumb-wrap {
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right: max(16px,env(safe-area-inset-right))
    }
}

.bd-breadcrumb {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--muted,#94a3b8);
    margin: 0;
    padding: 0;
    background: 0 0;
    border: none;
    border-radius: 0;
    box-shadow: none
}

.bd-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0
}

.bd-breadcrumb-wrap:not(.bd-breadcrumb-wrap--boxed) .bd-breadcrumb ol {
    padding-left: 10px
}

.bd-breadcrumb a {
    color: var(--muted,#64748b);
    text-decoration: none;
    font-weight: 500
}

.bd-breadcrumb a:hover {
    color: var(--brand,#ff6969)
}

.bd-breadcrumb li:not(:last-child)::after {
    content: ">";
    margin-left: 2px;
    color: #cbd5e1;
    font-weight: 500;
    font-size: .7rem
}

.bd-breadcrumb-wrap--boxed .bd-breadcrumb {
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted,#64748b);
    padding: 8px 14px;
    background: var(--surface-elevated,#fff);
    border: 1px solid var(--border,#e2e8f0);
    border-radius: var(--radius-lg,22px);
    box-shadow: var(--shadow,0 4px 6px -1px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.04))
}

.bd-breadcrumb-wrap--boxed .bd-breadcrumb a {
    font-weight: 600
}

.bd-breadcrumb-wrap--boxed .bd-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    font-size: inherit;
    font-weight: 400
}

:root {
    --brand: #ff6969;
    --brand-soft: rgba(255, 105, 105, 0.12);
    --brand-hover: #f05555;
    --ink: #0f172a;
    --ink-muted: #475569;
    --muted: #64748b;
    --surface-elevated: #ffffff;
    --card: #ffffff;
    --border: #e2e8f0;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 40px -12px rgba(15, 23, 42, 0.12)
}

.ogrenci-dt-page {
    min-width: 0
}

.ogrenci-dt-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px,3vw,20px);
    padding: clamp(18px,3vw,22px) clamp(18px,3vw,24px);
    margin-bottom: clamp(1.25rem,3vw,1.75rem);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,105,105,.18);
    background: radial-gradient(100% 120% at 100% 0,rgba(255,105,105,.1) 0,transparent 45%),linear-gradient(145deg,#fff 0,#fffbfb 40%,#f8fafc 100%);
    box-shadow: var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.9)
}

.ogrenci-dt-cta__copy {
    flex: 1 1 220px;
    min-width: 0
}

.ogrenci-dt-cta__copy h3 {
    margin: 0 0 6px;
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em
}

.ogrenci-dt-cta__copy p {
    margin: 0;
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.55;
    max-width: 40ch
}

@media (min-width: 992px) {
    .ogrenci-dt-cta__copy p {
        max-width:none;
        white-space: nowrap
    }
}

.ogrenci-dt-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    color: #fff;
    font-weight: 800;
    font-size: .92rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 12px 32px -8px rgba(255,105,105,.55);
    transition: transform .2s,box-shadow .2s;
    white-space: nowrap
}

.ogrenci-dt-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -8px rgba(255,105,105,.6);
    color: #fff
}

@media (max-width: 520px) {
    .ogrenci-dt-cta__btn {
        width:100%;
        justify-content: center
    }
}

.ogrenci-dt-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: clamp(1.25rem,3vw,1.75rem)
}

.ogrenci-dt-cta-stack>.ogrenci-dt-cta {
    margin-bottom: 0
}

.ogrenci-dt-cta--ai-soon {
    border-color: rgba(99,102,241,.2);
    background: radial-gradient(100% 120% at 100% 0,rgba(99,102,241,.09) 0,transparent 45%),linear-gradient(145deg,#fff 0,#fafbff 42%,#f8fafc 100%)
}

.ogrenci-dt-cta--ai-soon .ogrenci-dt-cta__copy p {
    white-space: normal;
    max-width: 52ch
}

@media (min-width: 992px) {
    .ogrenci-dt-cta--ai-soon .ogrenci-dt-cta__copy p {
        white-space:normal;
        max-width: min(62ch,100%)
    }
}

.ogrenci-dt-ai-soon__aside {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.ogrenci-dt-ai-soon__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 14px;
    font-weight: 800;
    font-size: .9rem;
    font-family: inherit;
    color: #4338ca;
    background: linear-gradient(135deg,rgba(99,102,241,.12) 0,rgba(129,140,248,.18) 100%);
    border: 1px solid rgba(99,102,241,.24);
    box-shadow: 0 10px 28px -14px rgba(79,70,229,.4);
    white-space: nowrap
}

.ogrenci-dt-ai-soon__pill i {
    font-size: 1.15rem;
    line-height: 1
}

@media (max-width: 520px) {
    .ogrenci-dt-ai-soon__aside {
        width:100%
    }

    .ogrenci-dt-ai-soon__pill {
        width: 100%
    }
}

.ogrenci-dt-sample-list {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.dt-sample-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(165deg,#fff 0,#f8fafc 55%,#fff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.9);
    transition: border-color .25s ease,box-shadow .25s ease,transform .2s ease
}

.dt-sample-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--brand),#ffc9c9);
    pointer-events: none
}

.dt-sample-card::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -8%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle,rgba(255,105,105,.07) 0,transparent 68%);
    pointer-events: none
}

.dt-sample-card:hover {
    border-color: rgba(255,105,105,.32);
    box-shadow: 0 22px 56px -28px rgba(15,23,42,.12),0 0 0 1px rgba(255,105,105,.1);
    transform: translateY(-3px)
}

.dt-sample-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 1.25rem clamp(1.1rem,2.5vw,1.6rem) 1.05rem;
    border-bottom: 1px solid rgba(226,232,240,.85);
    background: linear-gradient(180deg,rgba(255,255,255,.99) 0,rgba(241,245,249,.45) 100%)
}

@media (min-width: 521px) {
    .dt-sample-card__head {
        align-items:center
    }
}

.dt-sample-card__title {
    margin: 0;
    font-size: clamp(.95rem, 2vw, 1.08rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.3;
    flex: 1;
    min-width: 0
}

.dt-request-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: none;
    border: 1px solid transparent
}

.dt-request-status i {
    font-size: .95rem
}

.dt-request-status--pending {
    background: linear-gradient(135deg,#fffbeb 0,#fef3c7 100%);
    border-color: rgba(245,158,11,.45);
    color: #b45309
}

.dt-request-status--live {
    background: linear-gradient(135deg,#ecfdf5 0,#dcfce7 100%);
    border-color: rgba(34,197,94,.35);
    color: #166534
}

.dt-sample-card__tiles {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(132px,1fr));
    gap: 10px;
    padding: .95rem clamp(.85rem,2vw,1.25rem) .85rem
}

@media (min-width: 640px) and (max-width:899px) {
    .dt-sample-card__tiles {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 900px) {
    .dt-sample-card__tiles {
        grid-template-columns:repeat(3,1fr)
    }
}

@media (max-width: 639px) {
    .dt-sample-card__tiles {
        grid-template-columns:1fr;
        gap: 8px;
        padding: .75rem .75rem .65rem
    }
}

.dt-sample-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg,#fff 0,#f8fafc 100%);
    border: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 1px 3px rgba(15,23,42,.04),inset 0 1px 0 #fff;
    transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease
}

.dt-sample-card:hover .dt-sample-tile {
    border-color: rgba(255,105,105,.22);
    box-shadow: 0 4px 14px -4px rgba(15,23,42,.08)
}

.dt-sample-tile__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.05rem;
    color: var(--brand);
    background: linear-gradient(145deg,var(--brand-soft) 0,rgba(255,105,105,.06) 100%);
    border: 1px solid rgba(255,105,105,.2)
}

.dt-sample-tile__body {
    min-width: 0
}

.dt-sample-tile__label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.25
}

.dt-sample-tile__value {
    display: block;
    margin-top: 3px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35
}

@media (max-width: 639px) {
    .dt-sample-tile__label {
        font-size:.72rem
    }

    .dt-sample-tile__value {
        font-size: .8rem
    }

    .dt-sample-tile__icon {
        width: 34px;
        height: 34px;
        font-size: .95rem
    }
}

.dt-sample-card__note {
    position: relative;
    z-index: 1;
    margin: 0 clamp(.85rem,2vw,1.25rem) .75rem;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg,rgba(255,105,105,.06) 0,rgba(248,250,252,.95) 100%);
    border: 1px solid rgba(255,105,105,.2);
    border-left: 4px solid var(--brand)
}

.dt-sample-card__note-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: .35rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(255,105,105,.12);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--brand)
}

.dt-sample-card__note-text {
    margin: 0;
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink-muted);
    line-height: 1.55
}

.dt-sample-card__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px clamp(.85rem,2vw,1.25rem) .85rem;
    border-top: 1px solid #f1f5f9;
    background: linear-gradient(180deg,rgba(248,250,252,.5) 0,rgba(255,255,255,.85) 100%)
}

.dt-sample-card__time {
    font-size: .76rem;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px
}

.dt-sample-card__time i {
    color: var(--brand);
    font-size: 1.05rem
}

.dt-sample-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-left: auto
}

.dt-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 11px;
    font-size: .78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s,border-color .2s,color .2s,transform .15s;
    white-space: nowrap
}

.dt-card-btn--edit {
    border: 1px solid rgba(22,163,74,.5);
    background: linear-gradient(180deg,#f0fdf4 0,#ecfdf5 100%);
    color: #15803d;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,0 1px 0 rgba(22,163,74,.12)
}

.dt-card-btn--edit:hover {
    background: linear-gradient(180deg,#dcfce7 0,#d1fae5 100%);
    border-color: #16a34a;
    color: #166534
}

.dt-card-btn--delete {
    border: 1px solid rgba(239,68,68,.45);
    background: #fff;
    color: #dc2626
}

.dt-card-btn--delete:hover {
    background: #fef2f2;
    border-color: #ef4444;
    color: #b91c1c
}

@media (max-width: 520px) {
    .dt-sample-card__foot {
        flex-direction:column;
        align-items: stretch
    }

    .dt-sample-card__actions {
        margin-left: 0;
        justify-content: stretch
    }

    .dt-card-btn {
        flex: 1;
        justify-content: center
    }
}

.dt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease,visibility .3s ease
}

.dt-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.dt-modal-overlay .dt-modal {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: min(92vh,900px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,#fff 0,#fafbfc 100%);
    border-radius: var(--radius-xl);
    box-shadow: 0 28px 80px -32px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.06);
    border: 1px solid rgba(226,232,240,.95);
    transform: scale(.94) translateY(20px);
    opacity: 0;
    transition: transform .42s cubic-bezier(.34, 1.25, .64, 1),opacity .35s ease
}

.dt-modal-overlay .dt-modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--brand),#ffc9c9);
    z-index: 2
}

.dt-modal-overlay.is-open .dt-modal {
    transform: scale(1) translateY(0);
    opacity: 1
}

.dt-modal-overlay .dt-modal.dt-modal--wide {
    max-width: 840px
}

.dt-modal-overlay .dt-modal.dt-modal--wide.dt-modal--choice-ui {
    max-width: min(620px,calc(100vw - 24px))
}

.dt-modal--success::before {
    height: 5px;
    background: linear-gradient(90deg,#16a34a 0,#4ade80 45%,#86efac 100%)!important
}

.dt-modal.dt-modal--success {
    max-width: min(460px,calc(100vw - 32px));
    border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(167,243,208,.45),0 20px 50px -20px rgba(22,163,74,.22),0 32px 64px -28px rgba(15,23,42,.28);
    background: linear-gradient(165deg,#fff 0,#f8fffb 42%,#fff 100%)
}

.dt-modal--success .dt-modal__head {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(187,247,208,.55);
    background: linear-gradient(180deg,#fff 0,rgba(240,253,244,.65) 100%)
}

.dt-modal--success .dt-modal__head h3 {
    font-size: 1.22rem;
    letter-spacing: -.03em;
    color: #0f172a
}

.dt-modal__message-block--success {
    align-items: center;
    gap: 18px;
    padding: 20px 18px;
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(240,253,244,.98) 0,rgba(255,255,255,.92) 55%,rgba(236,253,245,.5) 100%);
    border: 1px solid rgba(134,239,172,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85),0 10px 28px -16px rgba(22,163,74,.18)
}

.dt-modal--success .dt-modal__icon-ring--success {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 1.85rem;
    color: #15803d;
    background: radial-gradient(circle at 30% 28%,#ecfdf5 0,#d1fae5 45%,#bbf7d0 100%);
    border-color: rgba(34,197,94,.35);
    box-shadow: 0 10px 26px -8px rgba(22,163,74,.35),inset 0 1px 0 rgba(255,255,255,.7)
}

.dt-modal--success .dt-modal__text .dt-auth-note.dt-success-modal__lead {
    margin: 0;
    font-size: .97rem;
    line-height: 1.72;
    color: #334155;
    font-weight: 600
}

.dt-modal--success .dt-modal__text .dt-auth-note a.dt-success-inline-link {
    color: #ff6969;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,105,105,0.55)
}

.dt-modal--success .dt-modal__text .dt-auth-note a.dt-success-inline-link:hover {
    color: #f05555;
    text-decoration-color: rgba(240,85,85,0.75)
}

.dt-modal--success .dt-modal__text .dt-auth-note a.dt-success-inline-link strong {
    color: inherit;
    font-weight: 800
}

.dt-modal__head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(241,245,249,.95);
    background: linear-gradient(180deg,rgba(255,255,255,.98) 0,rgba(248,250,252,.6) 100%)
}

.dt-modal__head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.25;
    padding-top: 2px
}

.dt-modal__close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--ink-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    transition: background .2s,color .2s
}

.dt-modal__close:hover {
    background: #e2e8f0;
    color: var(--ink)
}

.dt-modal__body {
    padding: 22px 22px 24px;
    overflow-y: auto;
    flex: 1
}

.dt-modal__body.dt-modal__body--success {
    padding: 24px 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.dt-modal__body--form {
    max-height: calc(92vh - 120px);
    padding-top: 18px
}

.dt-modal__message-block {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.dt-modal__icon-ring {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    border: 1px solid transparent
}

.dt-modal__icon-ring--success {
    background: linear-gradient(145deg,#dcfce7,#f0fdf4);
    color: #16a34a;
    border-color: rgba(34,197,94,.28)
}

.dt-modal__text {
    flex: 1;
    min-width: 0
}

.dt-modal__text .dt-auth-note {
    margin-bottom: 0;
    font-size: .95rem;
    color: var(--ink-muted);
    line-height: 1.68
}

.dt-modal__text .dt-auth-note strong {
    color: var(--ink);
    font-weight: 800
}

.dt-modal__text .dt-auth-note a.dt-success-inline-link {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px
}

.dt-modal__text .dt-auth-note a.dt-success-inline-link:hover {
    color: var(--brand-hover)
}

.dt-modal__text .dt-auth-note a.dt-success-inline-link strong {
    color: inherit;
    font-weight: 800
}

.dt-modal-form .dt-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    align-items: start
}

@media (max-width: 640px) {
    .dt-modal-form .dt-form-grid {
        grid-template-columns:1fr;
        gap: 10px 0
    }
}

.dt-modal-form--choice .dt-form-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box
}

.dt-modal-form .dt-form-cell {
    min-width: 0;
    margin-bottom: 0
}

.dt-modal-form .dt-form-cell .hb-combo {
    margin-bottom: 0
}

.dt-modal-form .dt-form-cell .dt-err {
    margin-bottom: 10px
}

.dt-modal-form .dt-form-cell--full {
    grid-column: 1/-1
}

.dt-modal-form .dt-form-cell--full .dt-textarea {
    margin-bottom: 4px
}

.dt-modal-form .dt-form-loc-wrap {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    align-items: start
}

@media (max-width: 640px) {
    .dt-modal-form .dt-form-loc-wrap {
        grid-template-columns:1fr
    }
}

.dt-modal-form--choice .dt-form-loc-wrap {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

@media (max-width: 380px) {
    .dt-modal-form--choice .dt-form-loc-wrap {
        grid-template-columns:1fr
    }
}

.dt-modal-form .dt-form-budget-contact-wrap {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 20px;
    align-items: start
}

#modalForm .hb-combo {
    margin-bottom: 0
}

.hb-combo {
    position: relative;
    min-width: 0;
    margin-bottom: 14px
}

.hb-combo__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s,box-shadow .2s
}

.hb-combo__trigger:hover {
    border-color: #cbd5e1
}

.hb-combo.is-open .hb-combo__trigger {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

.hb-combo__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.hb-combo__label.is-placeholder {
    color: #94a3b8;
    font-weight: 500
}

.hb-combo__chev {
    color: #94a3b8;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform .2s
}

.hb-combo.is-open .hb-combo__chev {
    transform: rotate(180deg)
}

.hb-combo__dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
    padding: 10px;
    max-height: min(320px,55vh);
    flex-direction: column;
    gap: 8px
}

.hb-combo.is-open .hb-combo__dropdown {
    display: flex
}

.hb-combo__filter {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--brand);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    outline: 0
}

.hb-combo__filter:focus {
    box-shadow: 0 0 0 3px var(--brand-soft)
}

.hb-combo__list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    overflow-y: auto;
    max-height: 220px
}

.dt-modal-form--choice .hb-combo__list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px 8px;
    align-content: start
}

@media (max-width: 480px) {
    .dt-modal-form--choice .hb-combo__list {
        grid-template-columns:1fr
    }
}

.dt-modal-form--choice .hb-combo__empty {
    grid-column: 1/-1;
    text-align: center
}

.hb-combo__option {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s,color .15s
}

.hb-combo__option:hover {
    background: var(--brand);
    color: #fff
}

.hb-combo__empty {
    list-style: none;
    padding: 12px;
    font-size: 13px;
    color: #94a3b8;
    text-align: center
}

.hb-combo.is-disabled .hb-combo__trigger {
    opacity: .55;
    pointer-events: none
}

.dt-form-label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px
}

.dt-form-label .req {
    color: var(--brand)
}

.dt-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: .9rem;
    resize: vertical
}

.dt-textarea:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

.dt-submit {
    width: 100%;
    margin-top: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(255,105,105,.35)
}

.dt-submit:hover {
    filter: brightness(1.03)
}

.dt-err {
    font-size: .78rem;
    color: #dc2626;
    margin-top: 4px;
    display: none
}

.dt-err.is-visible {
    display: block
}

.dt-modal--choice-ui .dt-modal__body--form {
    background: linear-gradient(180deg,#f1f5f9 0,#f8fafc 28%,#fff 100%);
    padding: 20px 22px 24px
}

.dt-modal--choice-ui.dt-modal-overlay .dt-modal::before {
    background: linear-gradient(90deg,#0ea5e9 0,var(--brand) 45%,#f472b6 100%);
    height: 4px
}

.dt-modal-form--choice .dt-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .01em;
    color: #475569
}

.dt-modal-form--choice .dt-form-label .req {
    color: var(--brand)
}

.dt-modal-form--choice .dt-form-cell--full .dt-form-label {
    margin-bottom: 10px
}

.dt-modal-form--choice .dt-form-label--icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px
}

.dt-modal-form--choice label.dt-form-label--icon {
    cursor: pointer
}

.dt-form-label__ico {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: .95rem;
    color: #ff6969;
    background: rgba(255,105,105,.08);
    border: 1px solid rgba(255,105,105,.22);
    box-shadow: none
}

.dt-form-label__txt {
    flex: 1;
    min-width: 0;
    line-height: 1.35
}

.dt-modal-form--choice .dt-choice-chip,.dt-modal-form--choice .hb-combo__filter,.dt-modal-form--choice .hb-combo__option,.dt-modal-form--choice .hb-combo__trigger {
    font-size: .875rem
}

.dt-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin-top: 2px
}

.dt-choice-group--lvl {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px
}

@media (min-width: 420px) {
    .dt-choice-group--lvl {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (min-width: 900px) {
    .dt-choice-group--lvl {
        grid-template-columns:repeat(2,minmax(220px,1fr))
    }
}

.dt-choice-group--where {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px
}

@media (min-width: 400px) {
    .dt-choice-group--where {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (min-width: 720px) {
    .dt-choice-group--where {
        grid-template-columns:repeat(2,minmax(168px,1fr))
    }
}

.dt-choice-group--budget.dt-choice-group--compact {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px
}

@media (min-width: 420px) {
    .dt-choice-group--budget.dt-choice-group--compact {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (min-width: 900px) {
    .dt-choice-group--budget.dt-choice-group--compact {
        grid-template-columns:repeat(2,minmax(220px,1fr))
    }
}

.dt-choice-group--contact {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px
}

@media (min-width: 480px) {
    .dt-choice-group--contact {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

.dt-choice-chip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .15s ease;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto
}

.dt-choice-chip:hover {
    border-color: rgba(255,105,105,.35);
    background: linear-gradient(180deg,#fff 0,#fffafb 100%);
    box-shadow: 0 4px 14px rgba(255,105,105,.1)
}

.dt-choice-chip:hover .dt-choice-chip__box {
    border-color: #94a3b8
}

.dt-choice-chip:focus {
    outline: 0;
    border-color: rgba(255,105,105,.55);
    box-shadow: 0 0 0 3px rgba(255,105,105,.18)
}

.dt-choice-chip.is-selected {
    border-color: rgba(255,105,105,.55);
    background: linear-gradient(145deg,rgba(255,105,105,.1) 0,#fff 70%);
    box-shadow: 0 4px 18px rgba(255,105,105,.2);
    color: #0f172a
}

.dt-choice-chip__box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    background: linear-gradient(180deg,#fff 0,#f1f5f9 100%);
    position: relative;
    transition: border-color .2s,background .2s,box-shadow .2s,transform .15s;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06)
}

.dt-choice-chip.is-selected .dt-choice-chip__box {
    background: linear-gradient(145deg,#ff6969 0,#ff8585 100%);
    border-color: #f43f5e;
    box-shadow: 0 2px 10px rgba(255,105,105,.45),inset 0 1px 0 rgba(255,255,255,.25);
    transform: scale(1.02)
}

.dt-choice-chip.is-selected .dt-choice-chip__box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15))
}

.dt-choice-chip__text {
    flex: 1;
    min-width: 0;
    display: block
}

.dt-choice-group--budget.dt-choice-group--compact .dt-choice-chip {
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.dt-choice-group--budget.dt-choice-group--compact .dt-choice-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dt-modal-form--choice .dt-textarea {
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fafafa;
    min-height: 128px;
    padding: 14px 15px;
    line-height: 1.55;
    transition: border-color .2s,box-shadow .2s,background .2s
}

.dt-modal-form--choice .dt-textarea:focus {
    outline: 0;
    background: #fff;
    border-color: rgba(14,165,233,.5);
    box-shadow: 0 0 0 3px rgba(14,165,233,.12)
}

.dt-modal--success .dt-submit.dt-submit--hb-brand,.dt-modal-form--choice .dt-submit.dt-submit--hb-brand {
    border-radius: 14px;
    padding: 15px 22px;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: #fff;
    background: #ff6969;
    border: none;
    box-shadow: 0 8px 26px rgba(255,105,105,.42);
    transition: background .2s ease,box-shadow .2s ease,transform .15s ease;
    width: 100%
}

.dt-modal--success .dt-submit.dt-submit--hb-brand {
    margin-top: 0
}

.dt-modal--success .dt-submit.dt-submit--hb-brand:hover,.dt-modal-form--choice .dt-submit.dt-submit--hb-brand:hover {
    background: #f05555;
    box-shadow: 0 12px 34px rgba(255,105,105,.5);
    transform: translateY(-2px)
}

.dt-modal--success .dt-submit.dt-submit--hb-brand:active,.dt-modal-form--choice .dt-submit.dt-submit--hb-brand:active {
    background: #e84848;
    transform: translateY(0);
    box-shadow: 0 4px 18px rgba(255,105,105,.4)
}

@media (max-width: 639px) {
    .dt-modal-form--choice .dt-form-label {
        font-size:.72rem
    }

    .dt-modal-form--choice .dt-form-label__ico {
        width: 30px;
        height: 30px;
        font-size: .88rem
    }

    .dt-modal--choice-ui .dt-modal__body--form {
        padding: 16px 14px 20px
    }

    .dt-modal-form--choice .dt-choice-chip {
        padding: 10px 11px;
        font-size: .8125rem
    }

    .dt-modal-form--choice .hb-combo__filter,.dt-modal-form--choice .hb-combo__option,.dt-modal-form--choice .hb-combo__trigger {
        font-size: .8125rem
    }
}

@media (max-width: 399px) {
    .dt-modal-form--choice .dt-choice-chip {
        padding:10px 11px;
        font-size: .8125rem
    }
}

.dt-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    margin-top: 1.25rem;
    padding: 14px 12px;
    border-radius: var(--radius-lg);
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow)
}

.dt-pagination__info {
    width: 100%;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px
}

.dt-pagination__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px
}

#ogrenciDtPageNumbers {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.dt-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s,border-color .2s,color .2s
}

.dt-page-btn:hover:not(:disabled) {
    border-color: rgba(255,105,105,.45);
    color: var(--brand);
    background: #fffafb
}

.dt-page-btn:disabled {
    opacity: .45;
    cursor: not-allowed
}

.dt-page-num {
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s,border-color .2s,color .2s
}

.dt-page-num:hover {
    border-color: rgba(255,105,105,.35);
    color: var(--brand)
}

.dt-page-num.is-active {
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(255,105,105,.45)
}

.ogrenci-pdt-page {
    min-width: 0
}

.pdt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(165deg,#fff 0,#f8fafc 55%,#fff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.9);
    transition: border-color .25s ease,box-shadow .25s ease,transform .2s ease
}

.pdt-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,#6366f1,var(--brand));
    pointer-events: none
}

.pdt-card:hover {
    border-color: rgba(99,102,241,.28);
    box-shadow: 0 22px 56px -28px rgba(15,23,42,.12),0 0 0 1px rgba(99,102,241,.12);
    transform: translateY(-2px)
}

.pdt-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 1.1rem clamp(1rem,2.5vw,1.5rem) .95rem;
    border-bottom: 1px solid rgba(226,232,240,.85);
    background: linear-gradient(180deg,rgba(255,255,255,.99) 0,rgba(241,245,249,.4) 100%)
}

.pdt-card__teacher {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 200px
}

.pdt-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.95);
    box-shadow: 0 4px 14px rgba(15,23,42,.12)
}

.pdt-card__teacher-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.pdt-card__name {
    margin: 0;
    font-size: clamp(.95rem, 2vw, 1.05rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.25;
    text-decoration: none;
    transition: color .2s
}

.pdt-card__name:hover {
    color: var(--brand)
}

.pdt-card__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.3
}

.pdt-card__source i {
    color: #6366f1;
    font-size: .85rem
}

.pdt-card__actions {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0
}

@media (min-width: 576px) {
    .pdt-card__actions {
        flex:0 0 auto;
        width: auto;
        max-width: min(100%,300px);
        align-self: center
    }
}

.pdt-card__profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: clamp(.78rem, 2.6vw, .875rem);
    font-weight: 800;
    text-decoration: none;
    color: #fff!important;
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    border: none;
    box-shadow: 0 6px 20px rgba(255,105,105,.38);
    line-height: 1.3;
    text-align: center;
    transition: transform .2s,box-shadow .2s;
    -webkit-tap-highlight-color: transparent
}

.pdt-card__profile-btn:hover {
    color: #fff!important;
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(255,105,105,.45)
}

.pdt-card__profile-btn:focus-visible {
    outline: 3px solid rgba(255,105,105,.45);
    outline-offset: 2px
}

.pdt-card__profile-btn span {
    flex: 1 1 auto;
    min-width: 0
}

@media (min-width: 576px) {
    .pdt-card__profile-btn {
        width:auto;
        min-width: min(100%,220px)
    }
}

.dt-request-status--info {
    background: linear-gradient(135deg,#eef2ff 0,#e0e7ff 100%);
    border-color: rgba(99,102,241,.35);
    color: #4338ca
}

.ogrenci-pdt-empty {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 22px 36px;
    margin-bottom: 8px;
    border-radius: var(--radius-xl);
    border: 1px dashed rgba(255,105,105,.35);
    background: linear-gradient(160deg,#fffbfb 0,#f8fafc 100%)
}

.ogrenci-pdt-empty[hidden] {
    display: none!important
}

.ogrenci-pdt-empty:not([hidden]) {
    display: flex
}

.pdt-empty {
    text-align: center;
    padding: 40px 22px 36px;
    border-radius: var(--radius-xl);
    border: 1px dashed rgba(255,105,105,.35);
    background: linear-gradient(160deg,#fffbfb 0,#f8fafc 100%)
}

.pdt-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: linear-gradient(135deg,#eef2ff 0,#fff 100%);
    border: 1px solid #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #6366f1
}

.pdt-empty__title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0 0 8px
}

.pdt-empty__text {
    font-size: .88rem;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 18px;
    line-height: 1.55;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 480px) {
    .pdt-card__avatar {
        width:46px;
        height: 46px;
        border-radius: 12px
    }
}

.ogrenci-dt-empty {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 22px 36px;
    margin-bottom: 12px;
    border-radius: var(--radius-xl);
    border: 1px dashed rgba(255,105,105,.35);
    background: linear-gradient(160deg,#fffbfb 0,#f8fafc 100%);
    box-shadow: 0 6px 24px rgba(15,23,42,.05)
}

.ogrenci-dt-empty[hidden] {
    display: none!important
}

.ogrenci-dt-empty:not([hidden]) {
    display: flex
}

.ogrenci-dt-empty__hint {
    display: none;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    max-width: 520px;
    text-align: left
}

.ogrenci-dt-empty__icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: linear-gradient(135deg,#fff 0,#ffe8e8 100%);
    border: 1px solid #fecaca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--brand)
}

.ogrenci-dt-empty__title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0 0 8px
}

.ogrenci-dt-empty__text {
    font-size: .88rem;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 18px;
    line-height: 1.55;
    max-width: 420px
}

.ogrenci-dt-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    font-size: .92rem;
    font-family: inherit;
    cursor: pointer;
    color: #fff!important;
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    box-shadow: 0 12px 32px -8px rgba(255,105,105,.55);
    transition: transform .2s,box-shadow .2s
}

.ogrenci-dt-empty__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -8px rgba(255,105,105,.6);
    color: #fff!important
}

body.ogrenci-body-havuz-dt-empty-demo .ogrenci-dt-empty__hint {
    display: block
}

body.ogrenci-body-havuz-dt-empty-demo #ogrenciDtEmptyState {
    display: flex!important
}

body.ogrenci-body-havuz-dt-empty-demo #ogrenciDtEmptyState[hidden] {
    display: flex!important
}

body.ogrenci-body-havuz-dt-empty-demo #ogrenciDtCtaBlock,body.ogrenci-body-havuz-dt-empty-demo #ogrenciDtList,body.ogrenci-body-havuz-dt-empty-demo #ogrenciDtPagination {
    display: none!important
}

body[data-hb-page=anasayfa] {
    --brand: #ff6969;
    --brand-soft: rgba(255, 105, 105, 0.12);
    --brand-hover: #f05555;
    --ink: #0f172a;
    --ink-muted: #475569;
    --muted: #64748b;
    --surface: #f1f5f9;
    --surface-elevated: #ffffff;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --accent-slate: #1e293b;
    --accent-teal: #0d9488;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 40px -12px rgba(15, 23, 42, 0.12)
}

body[data-hb-page],body[data-hb-page] *,body[data-hb-page] ::after,body[data-hb-page] ::before {
    box-sizing: border-box
}

body[data-hb-page=anasayfa],body[data-hb-page=blog],body[data-hb-page=ogretmen-ara],body[data-hb-page=online-ders],body[data-hb-page=yardim-merkezi] {
    font-family: "Plus Jakarta Sans",system-ui,sans-serif;
    color: var(--ink-muted);
    background: var(--surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

@media (max-width: 959px) {
    body[data-hb-page],html {
        overflow-x:hidden;
        max-width: 100%
    }
}

body[data-hb-page=anasayfa] .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 96px;
    width: 100%;
    box-sizing: border-box
}

@media (max-width: 639px) {
    body[data-hb-page=anasayfa] .page,body[data-hb-page=blog] .page,body[data-hb-page=ders-almak-isteyenler] .page,body[data-hb-page=yardim-merkezi] .page {
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right: max(16px,env(safe-area-inset-right))
    }
}

body[data-hb-page=anasayfa] .hero-wrap {
    display: grid;
    gap: 24px;
    margin-bottom: 8px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0
}

@media (min-width: 960px) {
    body[data-hb-page=anasayfa] .hero-wrap {
        grid-template-columns:minmax(0,1fr) minmax(260px,0.4fr)
    }
}

body[data-hb-page=anasayfa] .hero-photo {
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: 280px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    background: #e2e8f0;
    position: relative
}

body[data-hb-page] .hero-photo img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    object-position: center center;
    display: block
}

@media (max-width: 959px) {
    body[data-hb-page=anasayfa] .hero-photo {
        display:none
    }
}

body[data-hb-page=anasayfa] .hero {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(24px,3.5vw,40px);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box
}

@media (max-width: 959px) {
    body[data-hb-page=anasayfa] .hero {
        overflow-x:clip
    }
}

body[data-hb-page] .hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse 80% 70% at 100% 0,var(--brand-soft) 0,transparent 55%);
    pointer-events: none;
    border-radius: inherit
}

body[data-hb-page] .hero-inner {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%
}

body[data-hb-page=anasayfa] .hero h1 {
    font-size: clamp(1.45rem, 3.5vw, 1.85rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -.03em;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word
}

@media (min-width: 960px) {
    body[data-hb-page=anasayfa] .hero h1 {
        max-width:28ch
    }
}

body[data-hb-page=anasayfa] .hero-lead {
    margin-top: 12px;
    font-size: clamp(.78rem, 1.85vw, .95rem);
    color: var(--muted);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (max-width: 959px) {
    body[data-hb-page=anasayfa] .hero-lead {
        white-space:normal;
        overflow: visible;
        text-overflow: unset;
        font-size: .875rem;
        line-height: 1.45;
        word-break: break-word
    }
}

body[data-hb-page] .search-panel {
    margin-top: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: grid;
    gap: 12px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

body[data-hb-page] .search-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

body[data-hb-page] .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255,105,105,.35);
    background: #fff;
    color: var(--accent-slate);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s,background .2s,color .2s,box-shadow .2s
}

body[data-hb-page] .pill:hover {
    border-color: rgba(255,105,105,.55);
    background: #fff8f8
}

body[data-hb-page] .pill.is-on {
    border-color: var(--brand);
    background: linear-gradient(180deg,#fff5f5 0,#ffeded 100%);
    color: #b91c1c;
    box-shadow: 0 0 0 1px rgba(255,105,105,.2)
}

body[data-hb-page] .pill.is-on i {
    color: var(--brand)
}

body[data-hb-page=anasayfa] .search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    min-width: 0;
    width: 100%
}

body[data-hb-page=anasayfa] .search-panel--online .search-grid {
    grid-template-columns: 1fr auto
}

body[data-hb-page] .search-panel--online .hb-combo--city {
    display: none!important
}

@media (max-width: 640px) {
    body[data-hb-page=anasayfa] .search-grid {
        grid-template-columns:1fr
    }

    body[data-hb-page=anasayfa] .search-panel--online .search-grid {
        grid-template-columns: 1fr
    }
}

body[data-hb-page=anasayfa] .hb-combo {
    position: relative;
    min-width: 0;
    margin: 0
}

body[data-hb-page=anasayfa] .hb-combo__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-elevated);
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page=anasayfa] .hb-combo__trigger:hover {
    border-color: var(--border-strong)
}

body[data-hb-page] .hb-combo.is-open .hb-combo__trigger {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

body[data-hb-page] .hb-combo__trigger i:first-child {
    color: var(--muted);
    font-size: 1.05rem;
    flex-shrink: 0
}

body[data-hb-page] .hb-combo__trigger .hb-combo__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

body[data-hb-page] .hb-combo__trigger .hb-combo__label.is-placeholder {
    color: #94a3b8;
    font-weight: 500
}

body[data-hb-page] .hb-combo__trigger .hb-combo__chev {
    color: var(--muted);
    font-size: 12px;
    flex-shrink: 0;
    transition: transform .2s
}

body[data-hb-page] .hb-combo.is-open .hb-combo__chev {
    transform: rotate(180deg)
}

body[data-hb-page=anasayfa] .hb-combo__dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
    padding: 10px;
    max-height: min(320px,70vh);
    flex-direction: column;
    gap: 8px
}

body[data-hb-page] .hb-combo.is-open .hb-combo__dropdown {
    display: flex
}

body[data-hb-page] .hb-combo__filter {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--brand);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    outline: 0
}

body[data-hb-page] .hb-combo__filter:focus {
    box-shadow: 0 0 0 3px var(--brand-soft)
}

body[data-hb-page=anasayfa] .hb-combo__list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    overflow-y: auto;
    max-height: 220px;
    border-radius: 0 0 8px 8px
}

body[data-hb-page] .hb-combo__list::-webkit-scrollbar {
    width: 6px
}

body[data-hb-page] .hb-combo__list::-webkit-scrollbar-thumb {
    background: var(--brand);
    border-radius: 4px
}

body[data-hb-page] .hb-combo__option {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s,color .15s
}

body[data-hb-page] .hb-combo__option.is-highlight,body[data-hb-page] .hb-combo__option:hover {
    background: var(--brand);
    color: #fff
}

body[data-hb-page] .hb-combo__option.is-muted {
    color: var(--muted)
}

body[data-hb-page] .hb-combo__list>li.hb-combo__empty {
    list-style: none;
    padding: 12px;
    font-size: 13px;
    color: var(--muted);
    text-align: center
}

body[data-hb-page] .hb-combo__list>li.hb-combo__option {
    list-style: none
}

body[data-hb-page=anasayfa] .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 22px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255,105,105,.28);
    transition: background .2s,transform .15s;
    max-width: 100%;
    box-sizing: border-box
}

body[data-hb-page] .btn-primary:hover {
    background: var(--brand-hover);
    transform: translateY(-1px)
}

body[data-hb-page=anasayfa] .stat-banner {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,#fff 0,#f8fafc 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box
}

body[data-hb-page=anasayfa] .stat-banner__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px
}

body[data-hb-page] .stat-banner__icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(145deg,var(--brand) 0,#e85555 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(255,105,105,.22)
}

body[data-hb-page] .stat-banner__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    flex: 1;
    min-height: 48px;
    line-height: 1.2
}

body[data-hb-page] .stat-banner__count {
    margin: 0;
    font-size: .88rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.15;
    white-space: nowrap
}

body[data-hb-page] .stat-banner__count .stat-banner__num {
    color: var(--brand);
    font-size: 1.08em
}

body[data-hb-page] .stat-banner__text {
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.2;
    max-width: 100%
}

@media (max-width: 639px) {
    body[data-hb-page=anasayfa] .stat-banner__main {
        flex:1 1 auto;
        min-width: 0
    }

    body[data-hb-page=anasayfa] .stat-banner__tag {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center;
        margin-left: 0!important;
        box-sizing: border-box
    }
}

@media (min-width: 640px) {
    body[data-hb-page=anasayfa] .stat-banner {
        flex-wrap:nowrap
    }
}

body[data-hb-page=anasayfa] .stat-banner__tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent-teal);
    background: #e0f2f1;
    padding: 5px 9px;
    border-radius: 8px;
    margin-left: auto;
    flex-shrink: 0
}

body[data-hb-page=anasayfa] .section,body[data-hb-page=yardim-merkezi] .section {
    margin-top: 48px
}

body[data-hb-page] .section-head {
    margin-bottom: 22px
}

body[data-hb-page] .section-head h2 {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em
}

body[data-hb-page] .section-head p {
    margin-top: 8px;
    font-size: 15px;
    color: var(--muted);
    max-width: 560px
}

body[data-hb-page] .panel {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(22px,3vw,32px);
    box-shadow: var(--shadow)
}

body[data-hb-page=anasayfa] .categories-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 20px;
    align-items: center
}

body[data-hb-page=anasayfa] .categories-title {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0;
    min-width: 0;
    align-self: center
}

body[data-hb-page=anasayfa] .categories-wrap .grid-categories {
    grid-column: 1/-1;
    grid-row: 2
}

body[data-hb-page=anasayfa] .categories-all-link {
    grid-column: 2;
    grid-row: 1;
    justify-self: end
}

body[data-hb-page] .link-all--boxed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-slate);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-elevated);
    box-shadow: var(--shadow);
    transition: border-color .2s,color .2s,box-shadow .2s,transform .15s;
    white-space: nowrap
}

body[data-hb-page] .link-all--boxed:hover {
    border-color: rgba(255,105,105,.45);
    color: var(--brand);
    box-shadow: 0 4px 14px rgba(15,23,42,.08);
    transform: translateY(-1px)
}

body[data-hb-page] .link-all--boxed i {
    font-size: 14px
}

@media (max-width: 639px) {
    body[data-hb-page=anasayfa] .categories-wrap {
        grid-template-columns:1fr
    }

    body[data-hb-page=anasayfa] .categories-title {
        grid-column: 1;
        grid-row: 1
    }

    body[data-hb-page=anasayfa] .categories-wrap .grid-categories {
        grid-row: 2
    }

    body[data-hb-page=anasayfa] .categories-all-link {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        margin-top: 4px
    }
}

body[data-hb-page=anasayfa] .grid-categories {
    display: grid;
    gap: 12px;
    width: 100%
}

@media (max-width: 639px) {
    body[data-hb-page=anasayfa] .grid-categories {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 10px
    }

    body[data-hb-page=anasayfa] .cat {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px 10px;
        gap: 8px;
        min-height: 0
    }

    body[data-hb-page] .grid-categories .cat-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        max-width: 100%
    }

    body[data-hb-page] .grid-categories .cat-body strong {
        text-align: center;
        width: 100%;
        font-size: 13px;
        line-height: 1.3
    }

    body[data-hb-page] .grid-categories .cat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
        margin-inline:auto;align-self: center
    }

    body[data-hb-page] .grid-categories .cat-icon i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        line-height: 1
    }

    body[data-hb-page] .grid-categories .cat-icon i::before {
        margin: 0;
        line-height: 1;
        vertical-align: 0
    }

    body[data-hb-page] .grid-categories .cat-meta {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 6px;
        font-size: 11px
    }
}

@media (min-width: 640px) and (max-width:959px) {
    body[data-hb-page=anasayfa] .grid-categories {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

@media (min-width: 960px) {
    body[data-hb-page=anasayfa] .grid-categories {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
}

body[data-hb-page=anasayfa] .cat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s,box-shadow .2s,transform .18s;
    box-shadow: 0 1px 3px rgba(15,23,42,.04)
}

body[data-hb-page] .cat:hover {
    border-color: var(--border-strong);
    box-shadow: 0 8px 24px rgba(15,23,42,.07);
    transform: translateY(-2px)
}

body[data-hb-page] .cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1px solid var(--border)
}

body[data-hb-page] .cat-icon i {
    color: var(--brand)
}

body[data-hb-page] .cat-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35
}

body[data-hb-page] .cat-meta {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted)
}

body[data-hb-page] .cat-meta .cat-num {
    color: #ff6969;
    font-weight: 800
}

body[data-hb-page] .link-all {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-slate);
    text-decoration: none;
    transition: color .2s
}

body[data-hb-page] .link-all:hover {
    color: var(--brand)
}

body[data-hb-page=anasayfa] .vitrin-top {
    margin-bottom: 18px;
    text-align: center
}

@media (min-width: 640px) {
    body[data-hb-page=anasayfa] .vitrin-top {
        margin-bottom:22px
    }
}

body[data-hb-page] .vitrin-title {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em
}

body[data-hb-page=anasayfa] .vitrin-tabs-wrap {
    width: 100%;
    margin-bottom: 40px
}

@media (max-width: 639px) {
    body[data-hb-page=anasayfa] .vitrin-tabs-wrap {
        margin-bottom:36px
    }
}

@media (min-width: 640px) {
    body[data-hb-page=anasayfa] .vitrin-tabs-wrap {
        display:flex;
        justify-content: center
    }
}

body[data-hb-page=anasayfa] .vitrin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

@media (min-width: 640px) {
    body[data-hb-page=anasayfa] .vitrin-tabs {
        justify-content:center;
        max-width: 100%
    }
}

body[data-hb-page=anasayfa] .vitrin-tabs button {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,105,105,.35);
    background: #fff;
    color: var(--accent-slate);
    cursor: pointer;
    transition: border-color .2s,background .2s,color .2s,box-shadow .2s
}

body[data-hb-page] .vitrin-tabs button:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: #fff8f8
}

body[data-hb-page=anasayfa] .vitrin-tabs button.is-active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 4px 14px rgba(255,105,105,.35)
}

@media (max-width: 639px) {
    body[data-hb-page=anasayfa] .vitrin-top {
        margin-bottom:14px
    }

    body[data-hb-page=anasayfa] .vitrin-tabs-wrap {
        display: block
    }

    body[data-hb-page=anasayfa] .vitrin-tabs {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px
    }

    body[data-hb-page=anasayfa] .vitrin-tabs button {
        width: 100%;
        border-radius: 999px;
        padding: 7px 8px;
        font-size: 11px;
        font-weight: 700;
        min-height: 0;
        line-height: 1.25;
        border-width: 1px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04)
    }

    body[data-hb-page=anasayfa] .vitrin-tabs button.is-active {
        box-shadow: 0 3px 12px rgba(255,105,105,.35)
    }
}

body[data-hb-page=anasayfa] .teacher-grid,body[data-hb-page=ogretmen-ara] .teacher-grid,body[data-hb-page=online-ders] .teacher-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

@media (min-width: 520px) {
    body[data-hb-page=anasayfa] .teacher-grid,body[data-hb-page=ogretmen-ara] .teacher-grid,body[data-hb-page=online-ders] .teacher-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (min-width: 880px) {
    body[data-hb-page=anasayfa] .teacher-grid,body[data-hb-page=ogretmen-ara] .teacher-grid,body[data-hb-page=online-ders] .teacher-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap: 14px
    }
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-grid,body[data-hb-page=ogretmen-ara] .teacher-grid,body[data-hb-page=online-ders] .teacher-grid {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap: 14px
    }
}

body[data-hb-page] .teacher-card {
    --tc-brand: #ff6969;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s,border-color .2s,transform .2s;
    box-shadow: 0 4px 20px rgba(15,23,42,.06);
    cursor: pointer
}

body[data-hb-page] .teacher-card:hover {
    border-color: rgba(255,105,105,.45);
    box-shadow: 0 12px 36px rgba(255,105,105,.12);
    transform: translateY(-4px)
}

body[data-hb-page=anasayfa] .teacher-card__media,body[data-hb-page=ogretmen-ara] .teacher-card__media,body[data-hb-page=online-ders] .teacher-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    min-height: 128px;
    flex-shrink: 0;
    background: linear-gradient(145deg,#f1f5f9 0,#e2e8f0 100%);
    overflow: hidden
}

@media (min-width: 480px) {
    body[data-hb-page=anasayfa] .teacher-card__media,body[data-hb-page=ogretmen-ara] .teacher-card__media,body[data-hb-page=online-ders] .teacher-card__media {
        min-height:138px
    }
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__media,body[data-hb-page=ogretmen-ara] .teacher-card__media,body[data-hb-page=online-ders] .teacher-card__media {
        min-height:120px;
        aspect-ratio: 5/4
    }
}

body[data-hb-page] .teacher-card__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52%;
    background: linear-gradient(to top,rgba(15,23,42,.76) 0,rgba(15,23,42,.18) 52%,transparent 100%);
    pointer-events: none;
    z-index: 1
}

body[data-hb-page] .teacher-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%
}

body[data-hb-page=anasayfa] .teacher-card__chip-price,body[data-hb-page=ogretmen-ara] .teacher-card__chip-price,body[data-hb-page=online-ders] .teacher-card__chip-price {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    max-width: calc(100% - 48px);
    padding: 6px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg,#fff5f5 0,#ffe8e8 100%);
    box-shadow: 0 2px 0 rgba(255,255,255,.85) inset,0 4px 14px rgba(15,23,42,.14);
    border: 1px solid rgba(255,105,105,.55);
    font-size: .875rem;
    font-weight: 800;
    color: #e11d48;
    letter-spacing: -.02em;
    line-height: 1.15;
    white-space: nowrap
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__chip-price,body[data-hb-page=ogretmen-ara] .teacher-card__chip-price,body[data-hb-page=online-ders] .teacher-card__chip-price {
        font-size:.8125rem;
        padding: 5px 9px
    }
}

body[data-hb-page=anasayfa] .teacher-card__fav {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.95);
    background: rgba(255,255,255,.96);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(15,23,42,.12);
    transition: color .2s,background .2s,border-color .2s,transform .15s
}

body[data-hb-page] .teacher-card__fav:hover {
    color: var(--tc-brand);
    background: #fff;
    border-color: var(--tc-brand);
    transform: scale(1.04)
}

body[data-hb-page] .teacher-card__fav.is-active {
    color: var(--tc-brand);
    background: #fff0f0;
    border-color: var(--tc-brand)
}

body[data-hb-page] .teacher-card__media-foot {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 2
}

body[data-hb-page] .teacher-card__rating-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px
}

body[data-hb-page=anasayfa] .teacher-card__media-foot .teacher-card__rating,body[data-hb-page=ogretmen-ara] .teacher-card__media-foot .teacher-card__rating,body[data-hb-page=online-ders] .teacher-card__media-foot .teacher-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.35)
}

body[data-hb-page] .teacher-card__media-foot .teacher-card__rating i {
    color: #fde047;
    font-size: 13px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35))
}

body[data-hb-page=anasayfa] .teacher-card__media-foot .teacher-card__review-count,body[data-hb-page=ogretmen-ara] .teacher-card__media-foot .teacher-card__review-count,body[data-hb-page=online-ders] .teacher-card__media-foot .teacher-card__review-count {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    line-height: 1.2;
    padding-left: 1px
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__media-foot .teacher-card__rating,body[data-hb-page=ogretmen-ara] .teacher-card__media-foot .teacher-card__rating,body[data-hb-page=online-ders] .teacher-card__media-foot .teacher-card__rating {
        font-size:11px
    }

    body[data-hb-page=anasayfa] .teacher-card__media-foot .teacher-card__review-count,body[data-hb-page=ogretmen-ara] .teacher-card__media-foot .teacher-card__review-count,body[data-hb-page=online-ders] .teacher-card__media-foot .teacher-card__review-count {
        font-size: 9px
    }
}

body[data-hb-page=anasayfa] .teacher-card__body,body[data-hb-page=ogretmen-ara] .teacher-card__body,body[data-hb-page=online-ders] .teacher-card__body {
    padding: 10px 10px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__body,body[data-hb-page=ogretmen-ara] .teacher-card__body,body[data-hb-page=online-ders] .teacher-card__body {
        padding:8px 9px 10px;
        gap: 6px
    }
}

body[data-hb-page=anasayfa] .teacher-card__head,body[data-hb-page=ogretmen-ara] .teacher-card__head,body[data-hb-page=online-ders] .teacher-card__head {
    margin: 0;
    padding: 8px 10px 8px 8px;
    border-radius: 11px;
    background: linear-gradient(135deg,#f8fafc 0,#f1f5f9 100%);
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0
}

body[data-hb-page=anasayfa] .teacher-card__accent-bar,body[data-hb-page=ogretmen-ara] .teacher-card__accent-bar,body[data-hb-page=online-ders] .teacher-card__accent-bar {
    flex-shrink: 0;
    width: 5px;
    min-height: 2.5em;
    align-self: stretch;
    border-radius: 6px;
    background: linear-gradient(180deg,var(--tc-brand) 0,#ff9d9d 55%,#ffc9c9 100%);
    box-shadow: 0 0 0 1px rgba(255,105,105,.2)
}

body[data-hb-page] .teacher-card__head-text {
    flex: 1;
    min-width: 0
}

body[data-hb-page=anasayfa] .teacher-card__name,body[data-hb-page=ogretmen-ara] .teacher-card__name,body[data-hb-page=online-ders] .teacher-card__name {
    font-size: .9375rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0
}

body[data-hb-page=anasayfa] .teacher-card__slogan,body[data-hb-page=ogretmen-ara] .teacher-card__slogan,body[data-hb-page=online-ders] .teacher-card__slogan {
    margin: 4px 0 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.35;
    min-height: 1.35em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__head,body[data-hb-page=ogretmen-ara] .teacher-card__head,body[data-hb-page=online-ders] .teacher-card__head {
        padding:6px 8px 6px 6px;
        gap: 8px
    }

    body[data-hb-page=anasayfa] .teacher-card__accent-bar,body[data-hb-page=ogretmen-ara] .teacher-card__accent-bar,body[data-hb-page=online-ders] .teacher-card__accent-bar {
        width: 4px
    }

    body[data-hb-page=anasayfa] .teacher-card__name,body[data-hb-page=ogretmen-ara] .teacher-card__name,body[data-hb-page=online-ders] .teacher-card__name {
        font-size: .8125rem
    }

    body[data-hb-page=anasayfa] .teacher-card__slogan,body[data-hb-page=ogretmen-ara] .teacher-card__slogan,body[data-hb-page=online-ders] .teacher-card__slogan {
        font-size: .6875rem;
        margin-top: 3px
    }
}

body[data-hb-page] .teacher-card__meta-icon i {
    line-height: 1;
    display: block
}

body[data-hb-page] .teacher-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 11px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.07);
    overflow: hidden
}

body[data-hb-page=anasayfa] .teacher-card__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    min-width: 0
}

body[data-hb-page] .teacher-card__meta-row+.teacher-card__meta-row {
    border-top: 1px solid rgba(15,23,42,.06)
}

body[data-hb-page=anasayfa] .teacher-card__meta-icon,body[data-hb-page=ogretmen-ara] .teacher-card__meta-icon,body[data-hb-page=online-ders] .teacher-card__meta-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff8f8;
    color: var(--tc-brand);
    font-size: 1rem;
    border: 1px solid rgba(255,105,105,.22)
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__meta-icon,body[data-hb-page=ogretmen-ara] .teacher-card__meta-icon,body[data-hb-page=online-ders] .teacher-card__meta-icon {
        width:30px;
        height: 30px;
        font-size: .9rem
    }

    body[data-hb-page=anasayfa] .teacher-card__meta-row,body[data-hb-page=ogretmen-ara] .teacher-card__meta-row,body[data-hb-page=online-ders] .teacher-card__meta-row {
        padding: 6px 7px;
        gap: 6px
    }
}

body[data-hb-page=anasayfa] .teacher-card__meta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center
}

body[data-hb-page=anasayfa] .teacher-card__meta-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

body[data-hb-page] .teacher-card__meta-value .teacher-card__loc-sep {
    color: #94a3b8;
    font-weight: 500;
    margin: 0 3px
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__meta-value,body[data-hb-page=ogretmen-ara] .teacher-card__meta-value,body[data-hb-page=online-ders] .teacher-card__meta-value {
        font-size:11px
    }
}

body[data-hb-page=anasayfa] .teacher-card__lesson-line {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
    letter-spacing: -.01em;
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word
}

body[data-hb-page] .teacher-card__lesson-line .teacher-card__lesson-core {
    font-weight: 700
}

body[data-hb-page] .teacher-card__lesson-line .teacher-card__lesson-sep {
    display: inline;
    color: #cbd5e1;
    font-weight: 500;
    margin: 0 3px
}

body[data-hb-page] .teacher-card__lesson-line .teacher-card__lesson-branch {
    font-weight: 600;
    color: var(--muted)
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__lesson-line,body[data-hb-page=ogretmen-ara] .teacher-card__lesson-line,body[data-hb-page=online-ders] .teacher-card__lesson-line {
        font-size:11px
    }
}

body[data-hb-page=anasayfa] .teacher-card__cta,body[data-hb-page=ogretmen-ara] .teacher-card__cta,body[data-hb-page=online-ders] .teacher-card__cta {
    width: 100%;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 10px;
    border: none;
    background: var(--tc-brand);
    color: #fff;
    cursor: pointer;
    margin-top: auto;
    box-shadow: 0 4px 16px rgba(255,105,105,.28);
    transition: background .2s,transform .15s,box-shadow .2s;
    text-align: center;
}

body[data-hb-page] .teacher-card__cta:hover {
    background: #f05555;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,105,105,.38)
}

@media (min-width: 1200px) {
    body[data-hb-page=anasayfa] .teacher-card__cta,body[data-hb-page=ogretmen-ara] .teacher-card__cta,body[data-hb-page=online-ders] .teacher-card__cta {
        font-size:11px;
        padding: 8px 10px
    }
}

body[data-hb-page] .btn-ghost {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--accent-slate);
    cursor: pointer;
    transition: border-color .2s,color .2s
}

body[data-hb-page] .btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand)
}

body[data-hb-page=anasayfa] .vitrin-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center
}

body[data-hb-page=anasayfa] .vitrin-all-teachers-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 22px;
    border-radius: 12px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 6px 22px rgba(255,105,105,.35);
    transition: background .2s,transform .15s,box-shadow .2s,opacity .2s;
    max-width: min(100%,300px);
    width: auto;
    text-align: center;
    line-height: 1.3;
    cursor: pointer
}

body[data-hb-page] .vitrin-all-teachers-btn:hover:not([aria-disabled=true]) {
    background: #f05555;
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(255,105,105,.42)
}

body[data-hb-page] .vitrin-all-teachers-btn[aria-disabled=true] {
    opacity: .72;
    cursor: wait;
    pointer-events: none
}

body[data-hb-page] .vitrin-all-teachers-btn i {
    font-size: 1.05rem;
    flex-shrink: 0
}

@media (max-width: 639px) {
    body[data-hb-page=anasayfa] .vitrin-actions {
        margin-top:16px
    }

    body[data-hb-page=anasayfa] .vitrin-all-teachers-btn {
        font-size: 13px;
        padding: 11px 18px;
        min-height: 44px
    }
}

body[data-hb-page=anasayfa] .dt-demo,body[data-hb-page=ogretmen-ara] .dt-demo,body[data-hb-page=online-ders] .dt-demo {
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    font-size: .82rem;
    color: #475569
}

body[data-hb-page] .dt-demo strong {
    color: var(--ink)
}

body[data-hb-page] .dt-demo button {
    margin: 0 4px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer
}

body[data-hb-page] .dt-demo button:hover {
    border-color: var(--brand);
    color: var(--brand)
}

body[data-hb-page] .dt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease,visibility .3s ease
}

body[data-hb-page] .dt-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

body[data-hb-page] .dt-modal-overlay .dt-modal {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: min(92vh,900px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,#fff 0,#fafbfc 100%);
    border-radius: var(--radius-xl);
    box-shadow: 0 28px 80px -32px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.06);
    border: 1px solid rgba(226,232,240,.95);
    transform: scale(.94) translateY(20px);
    opacity: 0;
    transition: transform .42s cubic-bezier(.34, 1.25, .64, 1),opacity .35s ease
}

body[data-hb-page] .dt-modal-overlay .dt-modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--brand),#ffc9c9);
    z-index: 2
}

body[data-hb-page] .dt-modal-overlay.is-open .dt-modal {
    transform: scale(1) translateY(0);
    opacity: 1
}

body[data-hb-page=anasayfa] .dt-modal--success::before,body[data-hb-page=ogretmen-ara] .dt-modal--success::before,body[data-hb-page=online-ders] .dt-modal--success::before,body[data-hb-page=ogretmen-profil] .dt-modal--success::before {
    background: linear-gradient(90deg,#22c55e,#86efac)!important
}

body[data-hb-page=anasayfa] .dt-modal--warning::before,body[data-hb-page=ogretmen-ara] .dt-modal--warning::before,body[data-hb-page=online-ders] .dt-modal--warning::before,body[data-hb-page=ogretmen-profil] .dt-modal--warning::before {
    background: linear-gradient(90deg,#f59e0b,#fcd34d)!important
}

body[data-hb-page=anasayfa] .dt-modal__head,body[data-hb-page=ogretmen-ara] .dt-modal__head,body[data-hb-page=online-ders] .dt-modal__head,body[data-hb-page=ogretmen-profil] .dt-modal__head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(241,245,249,.95)
}

body[data-hb-page] .dt-modal__head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.25;
    padding-top: 2px
}

body[data-hb-page=anasayfa] .dt-modal__close,body[data-hb-page=ogretmen-ara] .dt-modal__close,body[data-hb-page=online-ders] .dt-modal__close,body[data-hb-page=ogretmen-profil] .dt-modal__close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--ink-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    transition: background .2s,color .2s
}

body[data-hb-page] .dt-modal__close:hover {
    background: #e2e8f0;
    color: var(--ink)
}

body[data-hb-page=anasayfa] .dt-modal__body,body[data-hb-page=ogretmen-ara] .dt-modal__body,body[data-hb-page=online-ders] .dt-modal__body,body[data-hb-page=ogretmen-profil] .dt-modal__body {
    padding: 22px 22px 24px
}

body[data-hb-page=anasayfa] .dt-modal__message-block,body[data-hb-page=ogretmen-ara] .dt-modal__message-block,body[data-hb-page=online-ders] .dt-modal__message-block,body[data-hb-page=ogretmen-profil] .dt-modal__message-block {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

body[data-hb-page] .dt-modal__icon-ring {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    border: 1px solid transparent
}

body[data-hb-page] .dt-modal__icon-ring--warning {
    background: linear-gradient(145deg,#fef3c7,#fffbeb);
    color: #d97706;
    border-color: rgba(245,158,11,.35)
}

body[data-hb-page] .dt-modal__icon-ring--success {
    background: linear-gradient(145deg,#dcfce7,#f0fdf4);
    color: #16a34a;
    border-color: rgba(34,197,94,.28)
}

body[data-hb-page] .dt-modal__text {
    flex: 1;
    min-width: 0
}

body[data-hb-page] .dt-modal__text p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.55;
    color: var(--ink-muted)
}

body[data-hb-page=anasayfa] .dt-auth-actions,body[data-hb-page=ogretmen-ara] .dt-auth-actions,body[data-hb-page=online-ders] .dt-auth-actions,body[data-hb-page=ogretmen-profil] .dt-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px
}

body[data-hb-page=anasayfa] .dt-auth-actions a,body[data-hb-page=ogretmen-ara] .dt-auth-actions a,body[data-hb-page=online-ders] .dt-auth-actions a,body[data-hb-page=ogretmen-profil] .dt-auth-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s,box-shadow .2s
}

body[data-hb-page=anasayfa] .dt-auth-actions a.primary,body[data-hb-page=ogretmen-ara] .dt-auth-actions a.primary,body[data-hb-page=online-ders] .dt-auth-actions a.primary,body[data-hb-page=ogretmen-profil] .dt-auth-actions a.primary {
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    color: #fff;
    box-shadow: 0 10px 28px -8px rgba(255,105,105,.55)
}

body[data-hb-page=anasayfa] .dt-auth-actions a.secondary,body[data-hb-page=ogretmen-ara] .dt-auth-actions a.secondary,body[data-hb-page=online-ders] .dt-auth-actions a.secondary,body[data-hb-page=ogretmen-profil] .dt-auth-actions a.secondary {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border)
}

body[data-hb-page] .dt-btn-fav-ok {
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    color: #fff;
    box-shadow: 0 10px 28px -8px rgba(255,105,105,.45)
}

body[data-hb-page] .dt-btn-fav-ok:hover {
    filter: brightness(1.03)
}

body[data-hb-page] .panel--why {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg,#fff 0,#fffbfb 38%,#f8fafc 100%);
    border: 1px solid rgba(255,105,105,.14);
    box-shadow: 0 20px 50px -24px rgba(255,105,105,.18),var(--shadow)
}

body[data-hb-page] .panel--why::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -15%;
    width: min(55vw,420px);
    height: min(55vw,420px);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,105,105,.12) 0,transparent 68%);
    pointer-events: none
}

body[data-hb-page] .why-wrap {
    position: relative;
    z-index: 1
}

body[data-hb-page] .how-top,body[data-hb-page] .why-top {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 28px
}

body[data-hb-page] .how-kicker,body[data-hb-page] .why-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 12px
}

body[data-hb-page] .how-kicker::after,body[data-hb-page] .how-kicker::before,body[data-hb-page] .why-kicker::after,body[data-hb-page] .why-kicker::before {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,transparent,var(--brand),transparent);
    opacity: .55
}

body[data-hb-page] .how-title,body[data-hb-page] .why-title {
    font-size: clamp(1.45rem, 4vw, 1.85rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1.2;
    margin: 0 0 10px
}

body[data-hb-page] .how-title__brand,body[data-hb-page] .why-title__brand {
    background: linear-gradient(120deg,var(--brand) 0,#ff9a9a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

body[data-hb-page] .how-lead,body[data-hb-page] .why-lead {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0
}

body[data-hb-page=anasayfa] .why-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start
}

@media (min-width: 900px) {
    body[data-hb-page=anasayfa] .why-split {
        grid-template-columns:minmax(0,1.15fr) minmax(260px,0.85fr);
        gap: 28px
    }
}

body[data-hb-page=anasayfa] .why-matrix {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

@media (min-width: 560px) {
    body[data-hb-page=anasayfa] .why-matrix {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 14px
    }
}

body[data-hb-page] .why-tile {
    position: relative;
    padding: 18px 18px 18px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.06);
    background: rgba(255,255,255,.92);
    box-shadow: 0 2px 12px rgba(15,23,42,.04);
    transition: transform .2s,box-shadow .2s,border-color .2s
}

body[data-hb-page] .why-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -12px rgba(255,105,105,.22);
    border-color: rgba(255,105,105,.22)
}

body[data-hb-page] .why-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--brand);
    background: linear-gradient(145deg,#fff5f5 0,#fff 100%);
    border: 1px solid rgba(255,105,105,.2);
    margin-bottom: 12px
}

body[data-hb-page] .why-tile__ttl {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0 0 8px;
    line-height: 1.25
}

body[data-hb-page] .why-tile p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
    margin: 0
}

body[data-hb-page] .why-aside {
    border-radius: 20px;
    padding: 18px 16px 18px 18px;
    background: linear-gradient(180deg,rgba(255,105,105,.07) 0,rgba(248,250,252,.95) 100%);
    border: 1px solid rgba(255,105,105,.16)
}

body[data-hb-page] .why-aside__head {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand);
    margin: 0 0 16px;
    padding-left: 4px
}

body[data-hb-page] .why-perk {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0
}

body[data-hb-page] .why-perk+.why-perk {
    border-top: 1px solid rgba(15,23,42,.06)
}

body[data-hb-page] .why-perk__ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--brand);
    background: #fff;
    border: 1px solid rgba(255,105,105,.2);
    box-shadow: 0 4px 12px rgba(15,23,42,.05)
}

body[data-hb-page] .why-perk__body {
    min-width: 0
}

body[data-hb-page] .why-perk__ttl {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.3
}

body[data-hb-page] .why-perk__txt {
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    margin: 0
}

body[data-hb-page] .panel--how {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg,#fff 0,#fffbfb 38%,#f8fafc 100%);
    border: 1px solid rgba(255,105,105,.14);
    box-shadow: 0 20px 50px -24px rgba(255,105,105,.18),var(--shadow)
}

body[data-hb-page] .panel--how::before {
    content: "";
    position: absolute;
    left: -18%;
    bottom: -38%;
    width: min(52vw,400px);
    height: min(52vw,400px);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,105,105,.11) 0,transparent 68%);
    pointer-events: none
}

body[data-hb-page] .how-wrap {
    position: relative;
    z-index: 1
}

body[data-hb-page=anasayfa] .how-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    body[data-hb-page=anasayfa] .how-steps {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (min-width: 1100px) {
    body[data-hb-page=anasayfa] .how-steps {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap: 16px
    }
}

body[data-hb-page] .how-step {
    position: relative;
    padding: 20px 18px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.06);
    background: rgba(255,255,255,.92);
    box-shadow: 0 2px 12px rgba(15,23,42,.04);
    transition: transform .2s,box-shadow .2s,border-color .2s;
    min-height: 100%;
    display: flex;
    flex-direction: column
}

body[data-hb-page] .how-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -12px rgba(255,105,105,.22);
    border-color: rgba(255,105,105,.22)
}

body[data-hb-page] .how-step__badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px
}

body[data-hb-page] .how-step__num {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(145deg,var(--brand) 0,#ff8a8a 100%);
    box-shadow: 0 4px 14px rgba(255,105,105,.35)
}

body[data-hb-page] .how-step__ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: var(--brand);
    background: linear-gradient(145deg,#fff5f5 0,#fff 100%);
    border: 1px solid rgba(255,105,105,.2);
    flex-shrink: 0
}

body[data-hb-page] .how-step__ttl {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0 0 8px;
    line-height: 1.25
}

body[data-hb-page] .how-step__txt {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
    margin: 0;
    flex: 1
}

body[data-hb-page] .ai-soon {
    margin-top: 48px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: linear-gradient(165deg,#fff 0,#f8fafc 55%,#fff7f6 100%);
    padding: clamp(22px,4vw,36px);
    box-shadow: var(--shadow-md)
}

body[data-hb-page] .ai-soon::before {
    content: "";
    position: absolute;
    inset: -35% -15% auto auto;
    width: 55%;
    height: 70%;
    background: radial-gradient(ellipse at center,rgba(255,105,105,.06) 0,transparent 68%);
    pointer-events: none
}

body[data-hb-page] .ai-soon::after {
    content: "";
    position: absolute;
    inset: auto auto -28% -12%;
    width: 50%;
    height: 65%;
    background: radial-gradient(ellipse at center,rgba(15,23,42,.04) 0,transparent 70%);
    pointer-events: none
}

body[data-hb-page] .ai-soon__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(20px,3vw,28px)
}

body[data-hb-page] .ai-soon__title-box {
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    background: linear-gradient(118deg,#4f46e5 0,#7c3aed 38%,#db2777 78%,#f97316 100%);
    box-shadow: 0 10px 32px rgba(79,70,229,.28),0 2px 0 rgba(255,255,255,.12) inset
}

body[data-hb-page] .ai-soon__title-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 80% at 100% 0,rgba(255,255,255,.22) 0,transparent 50%);
    pointer-events: none
}

body[data-hb-page] .ai-soon__title {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.03em;
    margin: 0;
    color: #fff;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(15,23,42,.15)
}

body[data-hb-page] .ai-soon__lead {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-muted);
    max-width: none;
    width: 100%
}

body[data-hb-page] .ai-soon__sub {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    max-width: none;
    width: 100%;
    padding-left: 18px;
    position: relative
}

body[data-hb-page] .ai-soon__sub::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg,rgba(255,105,105,.85) 0,rgba(255,105,105,.35) 100%)
}

body[data-hb-page=anasayfa] .ai-cards {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr
}

@media (min-width: 880px) {
    body[data-hb-page=anasayfa] .ai-cards {
        grid-template-columns:repeat(3,minmax(0,1fr));
        align-items: stretch
    }
}

body[data-hb-page] .ai-card {
    border-radius: 16px;
    padding: 16px 16px 18px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease,box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    height: 100%
}

body[data-hb-page] .ai-card:hover {
    transform: translateY(-2px)
}

body[data-hb-page] .ai-card--teacher {
    background: linear-gradient(160deg,#eef2ff 0,#fff 52%,#f5f3ff 100%);
    border: 1px solid rgba(99,102,241,.35);
    box-shadow: 0 2px 12px rgba(99,102,241,.08)
}

body[data-hb-page] .ai-card--teacher:hover {
    box-shadow: 0 14px 32px rgba(99,102,241,.18)
}

body[data-hb-page] .ai-card--student {
    background: linear-gradient(160deg,#fdf2f8 0,#fff 50%,#fff1f2 100%);
    border: 1px solid rgba(236,72,153,.38);
    box-shadow: 0 2px 12px rgba(236,72,153,.08)
}

body[data-hb-page] .ai-card--student:hover {
    box-shadow: 0 14px 32px rgba(236,72,153,.16)
}

body[data-hb-page] .ai-card--search {
    background: linear-gradient(160deg,#fffbeb 0,#fff 48%,#ecfeff 100%);
    border: 1px solid rgba(245,158,11,.42);
    box-shadow: 0 2px 12px rgba(245,158,11,.1)
}

body[data-hb-page] .ai-card--search:hover {
    box-shadow: 0 14px 32px rgba(14,165,233,.14)
}

body[data-hb-page] .ai-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 8px;
    margin-bottom: 10px
}

body[data-hb-page] .ai-card--teacher .ai-card__badge {
    color: #3730a3;
    background: linear-gradient(135deg,rgba(224,231,255,.95),rgba(199,210,254,.85));
    border: 1px solid rgba(99,102,241,.28);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset
}

body[data-hb-page] .ai-card--student .ai-card__badge {
    color: #9d174d;
    background: linear-gradient(135deg,rgba(252,231,243,.95),rgba(251,207,232,.88));
    border: 1px solid rgba(236,72,153,.3);
    box-shadow: 0 1px 0 rgba(255,255,255,.65) inset
}

body[data-hb-page] .ai-card--search .ai-card__badge {
    color: #b45309;
    background: linear-gradient(135deg,rgba(254,243,199,.95),rgba(253,230,138,.85));
    border: 1px solid rgba(245,158,11,.38);
    box-shadow: 0 1px 0 rgba(255,255,255,.65) inset
}

body[data-hb-page] .ai-card h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.3
}

body[data-hb-page] .ai-card--teacher h4 {
    color: #312e81
}

body[data-hb-page] .ai-card--student h4 {
    color: #9d174d
}

body[data-hb-page] .ai-card--search h4 {
    color: #0c4a6e
}

body[data-hb-page] .ai-card p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted)
}

body[data-hb-page] .ai-prompt {
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    font-family: ui-monospace,"Cascadia Code","Segoe UI Mono",monospace;
    position: relative;
    margin-top: auto
}

body[data-hb-page] .ai-card--teacher .ai-prompt {
    background: rgba(255,255,255,.85);
    border: 1px dashed rgba(99,102,241,.45);
    color: #4338ca
}

body[data-hb-page] .ai-card--teacher .ai-prompt__label {
    color: #6366f1;
    opacity: .95
}

body[data-hb-page] .ai-card--student .ai-prompt {
    background: rgba(255,255,255,.88);
    border: 1px dashed rgba(236,72,153,.45);
    color: #9d174d
}

body[data-hb-page] .ai-card--student .ai-prompt__label {
    color: #db2777;
    opacity: .95
}

body[data-hb-page] .ai-card--search .ai-prompt {
    background: rgba(255,255,255,.9);
    border: 1px dashed rgba(14,165,233,.5);
    color: #0e7490
}

body[data-hb-page] .ai-card--search .ai-prompt__label {
    color: #0891b2;
    opacity: .95
}

body[data-hb-page] .ai-prompt__label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: .75
}

body[data-hb-page] .ai-prompt__cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: currentColor;
    animation: ai-blink 1s step-end infinite
}

@keyframes ai-blink {
    50% {
        opacity: 0
    }
}

body[data-hb-page] .ai-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px
}

body[data-hb-page] .ai-points span {
    font-size: 11px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.1);
    background: #f1f5f9;
    color: var(--ink-muted)
}

body[data-hb-page=anasayfa] .ai-mini-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    body[data-hb-page=anasayfa] .ai-mini-list {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (min-width: 1100px) {
    body[data-hb-page=anasayfa] .ai-mini-list {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
}

body[data-hb-page] .ai-mini-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-muted);
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-top: 3px solid rgba(255,105,105,.35);
    border-radius: 12px;
    padding: 10px 12px
}

body[data-hb-page] .ai-mini-list li i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1rem;
    color: var(--brand)
}

body[data-hb-page=anasayfa] .panel--blog,body[data-hb-page=blog] .panel--blog,body[data-hb-page=yardim-merkezi] .panel--blog {
    position: relative
}

body[data-hb-page] .blog-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 20px;
    margin-bottom: 22px
}

body[data-hb-page=anasayfa] .blog-panel__header .section-head,body[data-hb-page=blog] .blog-panel__header .section-head,body[data-hb-page=yardim-merkezi] .blog-panel__header .section-head {
    margin-bottom: 0;
    flex: 1;
    min-width: min(100%,280px)
}

body[data-hb-page] .blog-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-slate);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-elevated);
    box-shadow: var(--shadow);
    transition: border-color .2s,color .2s,box-shadow .2s,transform .15s;
    white-space: nowrap;
    flex-shrink: 0
}

body[data-hb-page] .blog-all-btn:hover {
    border-color: rgba(255,105,105,.45);
    color: var(--brand);
    box-shadow: 0 6px 20px rgba(15,23,42,.08);
    transform: translateY(-1px)
}

body[data-hb-page] .blog-all-btn i {
    font-size: 15px;
    transition: transform .2s ease
}

body[data-hb-page] .blog-all-btn:hover i {
    transform: translateX(3px)
}

body[data-hb-page=anasayfa] .blog-all-btn--mobile,body[data-hb-page=blog] .blog-all-btn--mobile,body[data-hb-page=online-ders] .blog-all-btn--mobile,body[data-hb-page=yardim-merkezi] .blog-all-btn--mobile {
    display: none
}

@media (max-width: 639px) {
    body[data-hb-page] .blog-all-btn--desktop {
        display:none
    }

    body[data-hb-page=anasayfa] .blog-all-btn--mobile,body[data-hb-page=blog] .blog-all-btn--mobile,body[data-hb-page=online-ders] .blog-all-btn--mobile,body[data-hb-page=yardim-merkezi] .blog-all-btn--mobile {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        margin-top: 8px
    }
}

body[data-hb-page] .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,240px),1fr));
    gap: 18px
}

body[data-hb-page] .blog-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    overflow: hidden;
    transition: transform .22s ease,box-shadow .22s ease,border-color .2s;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset
}

body[data-hb-page] .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255,105,105,.2)
}

body[data-hb-page] .blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    text-decoration: none;
    color: inherit
}

body[data-hb-page] .blog-card__media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(145deg,#e2e8f0,#f1f5f9)
}

body[data-hb-page] .blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease
}

body[data-hb-page] .blog-card:hover .blog-card__media img {
    transform: scale(1.05)
}

body[data-hb-page] .blog-card__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px
}

body[data-hb-page=anasayfa] .blog-card__cat {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--brand);
    transition: color .2s ease
}

body[data-hb-page] .blog-card:hover .blog-card__cat {
    color: #222
}

body[data-hb-page=anasayfa] .blog-card h4,body[data-hb-page=blog] .blog-card h4,body[data-hb-page=yardim-merkezi] .blog-card h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.38;
    flex: 0 0 auto;
    transition: color .2s
}

body[data-hb-page] .blog-card:hover h4 {
    color: var(--brand-hover)
}

body[data-hb-page] .blog-card__excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

body[data-hb-page] .blog-card__meta {
    margin-top: auto;
    padding-top: 6px;
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px
}

body[data-hb-page] .blog-card__meta-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0
}

body[data-hb-page=anasayfa] .blog-card__meta-date,body[data-hb-page=blog] .blog-card__meta-date,body[data-hb-page=yardim-merkezi] .blog-card__meta-date {
    flex-shrink: 0;
    text-align: right;
    color: var(--muted)
}

body[data-hb-page=anasayfa] .blog-card__meta i,body[data-hb-page=blog] .blog-card__meta i,body[data-hb-page=blog-detay] .blog-card__meta i,body[data-hb-page=yardim-merkezi] .blog-card__meta i {
    font-size: .88rem;
    opacity: .85;
    flex-shrink: 0
}

body[data-hb-page] .prose-block p {
    font-size: 15px;
    color: var(--muted);
    margin-top: 12px
}

body[data-hb-page] .prose-block p:first-of-type {
    margin-top: 0
}

body[data-hb-page] .seo-feature {
    position: relative;
    overflow: hidden;
    padding: clamp(22px,3vw,36px)
}

body[data-hb-page] .seo-feature::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -8%;
    width: min(48vw,320px);
    height: min(48vw,320px);
    border-radius: 50%;
    pointer-events: none
}

body[data-hb-page] .seo-feature--find {
    background: linear-gradient(155deg,#fff 0,#fafafa 52%,#f8fafc 100%);
    border-color: rgba(226,232,240,.95);
    box-shadow: 0 14px 40px -26px rgba(15,23,42,.08),var(--shadow)
}

body[data-hb-page] .seo-feature--find::before {
    background: radial-gradient(circle,rgba(148,163,184,.07) 0,transparent 68%)
}

body[data-hb-page] .seo-feature--find::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,#e2e8f0,#f1f5f9);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0
}

body[data-hb-page] .seo-feature--trust {
    background: linear-gradient(155deg,#fff 0,#fafafa 52%,#f8fafc 100%);
    border-color: rgba(226,232,240,.95);
    box-shadow: 0 14px 40px -26px rgba(15,23,42,.08),var(--shadow)
}

body[data-hb-page] .seo-feature--trust::before {
    background: radial-gradient(circle,rgba(148,163,184,.06) 0,transparent 68%)
}

body[data-hb-page] .seo-feature--trust::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,#e2e8f0,#f1f5f9);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0
}

body[data-hb-page=anasayfa] .seo-feature__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 22px 28px;
    align-items: start
}

@media (min-width: 720px) {
    body[data-hb-page=anasayfa] .seo-feature__grid {
        grid-template-columns:auto minmax(0,1fr)
    }
}

body[data-hb-page=anasayfa] .seo-feature__aside {
    display: flex;
    justify-content: center
}

@media (min-width: 720px) {
    body[data-hb-page=anasayfa] .seo-feature__aside {
        justify-content:flex-start;
        padding-top: 4px
    }
}

body[data-hb-page] .seo-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    font-size: 1.85rem;
    flex-shrink: 0;
    box-shadow: 0 10px 28px -12px rgba(15,23,42,.15)
}

body[data-hb-page] .seo-feature--find .seo-feature__icon {
    color: var(--brand);
    background: linear-gradient(145deg,#fff7f7 0,rgba(255,105,105,.14) 100%);
    border: 1px solid rgba(255,105,105,.28);
    box-shadow: 0 10px 28px -12px rgba(255,105,105,.14)
}

body[data-hb-page] .seo-feature--trust .seo-feature__icon {
    color: var(--accent-teal);
    background: linear-gradient(145deg,#ecfdf5 0,#d1fae5 100%);
    border: 1px solid rgba(13,148,136,.22);
    box-shadow: 0 10px 28px -12px rgba(13,148,136,.12)
}

body[data-hb-page] .seo-feature__head {
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 0
}

body[data-hb-page] .seo-feature__head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(100px,28%);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,#cbd5e1,rgba(203,213,225,.2))
}

body[data-hb-page] .seo-feature__main .section-head {
    margin-bottom: 0
}

body[data-hb-page=anasayfa] .seo-feature__prose {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px
}

body[data-hb-page] .seo-feature__col {
    padding: 16px 18px 18px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
    padding-bottom:0;
}

body[data-hb-page] .seo-feature--find .seo-feature__col,body[data-hb-page] .seo-feature--trust .seo-feature__col {
    border-left: 2px solid #cbd5e1
}

body[data-hb-page] .seo-feature__prose p {
    margin-top: 0
}

body[data-hb-page] .seo-feature__prose strong {
    font-weight: 700;
    color: var(--ink)
}

@media (min-width: 960px) {
    body[data-hb-page=anasayfa] .seo-feature__prose {
        display:grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 18px 24px
    }
}

body[data-hb-page] .panel--faq {
    position: relative;
    overflow: hidden;
    background: linear-gradient(168deg,#fff 0,#f8fafc 42%,#fffbfb 100%);
    border-color: rgba(255,105,105,.12);
    box-shadow: 0 22px 56px -28px rgba(255,105,105,.12),var(--shadow)
}

body[data-hb-page] .panel--faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--brand),#ffc9c9);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    pointer-events: none
}

body[data-hb-page=anasayfa] .faq-layout,body[data-hb-page=ders-almak-isteyenler] .faq-layout,body[data-hb-page=hakkimizda] .faq-layout,body[data-hb-page=online-ders] .faq-layout,body[data-hb-page=yardim-merkezi] .faq-layout,body[data-hb-page=ogretmen-ara] .faq-layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 28px
}

body[data-hb-page] .panel--faq .faq-layout__head {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 22px 20px 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg,rgba(255,255,255,.95) 0,rgba(255,250,250,.9) 55%,rgba(248,250,252,.85) 100%);
    border: 1px solid rgba(255,105,105,.12);
    box-shadow: 0 12px 36px -20px rgba(255,105,105,.15),inset 0 1px 0 rgba(255,255,255,.9)
}

body[data-hb-page] .panel--faq .faq-layout__head.section-head {
    margin-bottom: 0
}

body[data-hb-page=anasayfa] .panel--faq .faq-layout__head h2,body[data-hb-page=ders-almak-isteyenler] .panel--faq .faq-layout__head h2,body[data-hb-page=hakkimizda] .panel--faq .faq-layout__head h2,body[data-hb-page=online-ders] .panel--faq .faq-layout__head h2,body[data-hb-page=yardim-merkezi] .panel--faq .faq-layout__head h2,body[data-hb-page=ogretmen-ara] .panel--faq .faq-layout__head h2 {
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 0
}

body[data-hb-page] .panel--faq .faq-layout__head h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--brand),#ffc9c9)
}

body[data-hb-page=anasayfa] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=ders-almak-isteyenler] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=hakkimizda] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=online-ders] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=yardim-merkezi] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=ogretmen-ara] .panel--faq .faq-layout__lead-wrap {
    margin-top: 16px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    text-align: center
}

body[data-hb-page] .panel--faq .faq-layout__lead-wrap::-webkit-scrollbar {
    display: none
}

body[data-hb-page=anasayfa] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=ders-almak-isteyenler] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=hakkimizda] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=yardim-merkezi] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=ogretmen-ara] .panel--faq .faq-layout__lead-wrap p {
    margin: 0;
    display: inline-block;
    width: max-content;
    max-width: none;
    line-height: 1.45;
    font-size: clamp(11px, 2.65vw, 15px);
    white-space: nowrap;
    color: var(--muted)
}

@media (max-width: 959px) {
    body[data-hb-page=anasayfa] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=ders-almak-isteyenler] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=hakkimizda] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=online-ders] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=yardim-merkezi] .panel--faq .faq-layout__lead-wrap,body[data-hb-page=ogretmen-ara] .panel--faq .faq-layout__lead-wrap {
        overflow-x:visible;
        overflow-y: visible;
        text-align: center
    }

    body[data-hb-page=anasayfa] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=ders-almak-isteyenler] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=hakkimizda] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=online-ders] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=yardim-merkezi] .panel--faq .faq-layout__lead-wrap p,body[data-hb-page=ogretmen-ara] .panel--faq .faq-layout__lead-wrap p {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        font-size: 14px;
        line-height: 1.55;
        padding: 0 2px
    }
}

@media (min-width: 960px) {
    body[data-hb-page=anasayfa] .panel--faq .faq-layout__head h2,body[data-hb-page=ders-almak-isteyenler] .panel--faq .faq-layout__head h2,body[data-hb-page=hakkimizda] .panel--faq .faq-layout__head h2,body[data-hb-page=online-ders] .panel--faq .faq-layout__head h2,body[data-hb-page=yardim-merkezi] .panel--faq .faq-layout__head h2,body[data-hb-page=ogretmen-ara] .panel--faq .faq-layout__head h2 {
        font-size:clamp(1.45rem, 2.2vw, 1.9rem)
    }

    body[data-hb-page=anasayfa] .faq-layout,body[data-hb-page=ders-almak-isteyenler] .faq-layout,body[data-hb-page=hakkimizda] .faq-layout,body[data-hb-page=online-ders] .faq-layout,body[data-hb-page=yardim-merkezi] .faq-layout,body[data-hb-page=ogretmen-ara] .faq-layout {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto
    }
}

body[data-hb-page] .faq-wrap {
    margin-top: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    width: 100%
}

body[data-hb-page] .faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.92);
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15,23,42,.04);
    transition: border-color .22s ease,box-shadow .22s ease,transform .2s ease
}

body[data-hb-page] .faq-item:hover {
    border-color: rgba(255,105,105,.22);
    box-shadow: 0 10px 32px -18px rgba(15,23,42,.12)
}

body[data-hb-page] .faq-item.is-open {
    border-color: rgba(255,105,105,.38);
    box-shadow: 0 14px 40px -16px rgba(255,105,105,.2);
    transform: translateY(-1px)
}

body[data-hb-page=anasayfa] .faq-trigger,body[data-hb-page=ders-almak-isteyenler] .faq-trigger,body[data-hb-page=hakkimizda] .faq-trigger,body[data-hb-page=online-ders] .faq-trigger,body[data-hb-page=yardim-merkezi] .faq-trigger,body[data-hb-page=ogretmen-ara] .faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
    background: 0 0;
    border: none;
    cursor: pointer;
    transition: background .2s ease
}

body[data-hb-page] .faq-trigger:hover {
    background: linear-gradient(90deg,rgba(255,105,105,.06),rgba(255,255,255,0))
}

body[data-hb-page] .faq-item.is-open .faq-trigger {
    background: linear-gradient(90deg,rgba(255,105,105,.08),rgba(255,255,255,0))
}

body[data-hb-page=anasayfa] .faq-trigger__num,body[data-hb-page=ders-almak-isteyenler] .faq-trigger__num,body[data-hb-page=hakkimizda] .faq-trigger__num,body[data-hb-page=online-ders] .faq-trigger__num,body[data-hb-page=yardim-merkezi] .faq-trigger__num,body[data-hb-page=ogretmen-ara] .faq-trigger__num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(255,105,105,.2);
    transition: background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease
}

body[data-hb-page] .faq-item.is-open .faq-trigger__num {
    background: linear-gradient(145deg,var(--brand),#ff8585);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(255,105,105,.55)
}

body[data-hb-page=anasayfa] .faq-trigger__label,body[data-hb-page=ders-almak-isteyenler] .faq-trigger__label,body[data-hb-page=hakkimizda] .faq-trigger__label,body[data-hb-page=online-ders] .faq-trigger__label,body[data-hb-page=yardim-merkezi] .faq-trigger__label,body[data-hb-page=ogretmen-ara] .faq-trigger__label {
    flex: 1;
    min-width: 0;
    line-height: 1.4
}

body[data-hb-page=anasayfa] .faq-trigger__chev,body[data-hb-page=ders-almak-isteyenler] .faq-trigger__chev,body[data-hb-page=hakkimizda] .faq-trigger__chev,body[data-hb-page=online-ders] .faq-trigger__chev,body[data-hb-page=yardim-merkezi] .faq-trigger__chev,body[data-hb-page=ogretmen-ara] .faq-trigger__chev {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background .2s ease,border-color .2s ease
}

body[data-hb-page] .faq-item.is-open .faq-trigger__chev {
    background: rgba(255,105,105,.1);
    border-color: rgba(255,105,105,.28)
}

body[data-hb-page=anasayfa] .faq-trigger i,body[data-hb-page=ders-almak-isteyenler] .faq-trigger i,body[data-hb-page=hakkimizda] .faq-trigger i,body[data-hb-page=online-ders] .faq-trigger i,body[data-hb-page=yardim-merkezi] .faq-trigger i,body[data-hb-page=ogretmen-ara] .faq-trigger i {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--muted);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),color .2s
}

body[data-hb-page] .faq-item.is-open .faq-trigger i {
    transform: rotate(180deg);
    color: var(--brand)
}

body[data-hb-page=anasayfa] .faq-panel,body[data-hb-page=ders-almak-isteyenler] .faq-panel,body[data-hb-page=hakkimizda] .faq-panel,body[data-hb-page=online-ders] .faq-panel,body[data-hb-page=yardim-merkezi] .faq-panel,body[data-hb-page=ogretmen-ara] .faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.4, 0, .2, 1)
}

body[data-hb-page=anasayfa] .faq-panel-inner,body[data-hb-page=ders-almak-isteyenler] .faq-panel-inner,body[data-hb-page=hakkimizda] .faq-panel-inner,body[data-hb-page=online-ders] .faq-panel-inner,body[data-hb-page=yardim-merkezi] .faq-panel-inner,body[data-hb-page=ogretmen-ara] .faq-panel-inner {
    padding: 0 18px 18px;
    padding-left: calc(18px + 40px + 14px);
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.68;
    border-top: 1px solid transparent;
    transition: border-color .2s
}

body[data-hb-page] .faq-item.is-open .faq-panel-inner {
    border-top-color: rgba(255,105,105,.12);
    padding-top: 14px
}

@media (max-width: 639px) {
    body[data-hb-page=anasayfa] .faq-trigger,body[data-hb-page=ders-almak-isteyenler] .faq-trigger,body[data-hb-page=hakkimizda] .faq-trigger,body[data-hb-page=online-ders] .faq-trigger,body[data-hb-page=yardim-merkezi] .faq-trigger,body[data-hb-page=ogretmen-ara] .faq-trigger {
        font-size:13px
    }

    body[data-hb-page=anasayfa] .faq-trigger i,body[data-hb-page=ders-almak-isteyenler] .faq-trigger i,body[data-hb-page=hakkimizda] .faq-trigger i,body[data-hb-page=online-ders] .faq-trigger i,body[data-hb-page=yardim-merkezi] .faq-trigger i,body[data-hb-page=ogretmen-ara] .faq-trigger i {
        font-size: 13px
    }
}

@media (max-width: 479px) {
    body[data-hb-page=anasayfa] .faq-trigger,body[data-hb-page=ders-almak-isteyenler] .faq-trigger,body[data-hb-page=hakkimizda] .faq-trigger,body[data-hb-page=online-ders] .faq-trigger,body[data-hb-page=yardim-merkezi] .faq-trigger,body[data-hb-page=ogretmen-ara] .faq-trigger {
        padding:14px 14px;
        gap: 10px;
        font-size: 12.5px
    }

    body[data-hb-page=anasayfa] .faq-trigger__label,body[data-hb-page=ders-almak-isteyenler] .faq-trigger__label,body[data-hb-page=hakkimizda] .faq-trigger__label,body[data-hb-page=online-ders] .faq-trigger__label,body[data-hb-page=yardim-merkezi] .faq-trigger__label,body[data-hb-page=ogretmen-ara] .faq-trigger__label {
        line-height: 1.35
    }

    body[data-hb-page=anasayfa] .faq-trigger__num,body[data-hb-page=ders-almak-isteyenler] .faq-trigger__num,body[data-hb-page=hakkimizda] .faq-trigger__num,body[data-hb-page=online-ders] .faq-trigger__num,body[data-hb-page=yardim-merkezi] .faq-trigger__num,body[data-hb-page=ogretmen-ara] .faq-trigger__num {
        width: 34px;
        height: 34px;
        font-size: 10px;
        border-radius: 10px
    }

    body[data-hb-page=anasayfa] .faq-trigger__chev,body[data-hb-page=ders-almak-isteyenler] .faq-trigger__chev,body[data-hb-page=hakkimizda] .faq-trigger__chev,body[data-hb-page=online-ders] .faq-trigger__chev,body[data-hb-page=yardim-merkezi] .faq-trigger__chev,body[data-hb-page=ogretmen-ara] .faq-trigger__chev {
        width: 34px;
        height: 34px
    }

    body[data-hb-page=anasayfa] .faq-trigger i,body[data-hb-page=ders-almak-isteyenler] .faq-trigger i,body[data-hb-page=hakkimizda] .faq-trigger i,body[data-hb-page=online-ders] .faq-trigger i,body[data-hb-page=yardim-merkezi] .faq-trigger i,body[data-hb-page=ogretmen-ara] .faq-trigger i {
        font-size: 12px
    }

    body[data-hb-page=anasayfa] .faq-panel-inner,body[data-hb-page=ders-almak-isteyenler] .faq-panel-inner,body[data-hb-page=hakkimizda] .faq-panel-inner,body[data-hb-page=online-ders] .faq-panel-inner,body[data-hb-page=yardim-merkezi] .faq-panel-inner,body[data-hb-page=ogretmen-ara] .faq-panel-inner {
        padding-left: calc(14px + 34px + 10px);
        padding-right: 14px;
        padding-bottom: 16px;
        font-size: 13px
    }
}

body[data-hb-page] .testimonial-section {
    font-family: "Plus Jakarta Sans",system-ui,sans-serif;
    margin: 48px auto 0;
    padding: clamp(24px,3.5vw,36px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: linear-gradient(165deg,#fff 0,#f8fafc 45%,#fff5f5 100%);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden
}

body[data-hb-page] .testimonial-section::before {
    content: "";
    position: absolute;
    inset: -20% 40% auto -10%;
    height: 60%;
    background: radial-gradient(ellipse,rgba(255,105,105,.12) 0,transparent 70%);
    pointer-events: none
}

body[data-hb-page] .testimonial-section__inner {
    position: relative;
    z-index: 1
}

body[data-hb-page=anasayfa] .testimonial-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: clamp(22px,3vw,32px)
}

@media (min-width: 880px) {
    body[data-hb-page=anasayfa] .testimonial-head {
        display:grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: end;
        gap: 20px 28px
    }
}

body[data-hb-page] .testimonial-head__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 6px
}

body[data-hb-page] .testimonial-head__label i {
    font-size: 1rem
}

body[data-hb-page=anasayfa] .testimonial-head__text {
    min-width: 0;
    width: 100%;
    max-width: none
}

@media (min-width: 880px) {
    body[data-hb-page=anasayfa] .testimonial-head__text {
        grid-column:1
    }

    body[data-hb-page=anasayfa] .testimonial-cta {
        grid-column: 2;
        align-self: end
    }
}

body[data-hb-page] .testimonial-head h2 {
    color: var(--ink);
    font-size: clamp(1.45rem, 2.8vw, 2.05rem);
    line-height: 1.2;
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: -.035em;
    max-width: none;
    width: 100%
}

body[data-hb-page] .testimonial-head h2 br {
    display: block
}

body[data-hb-page] .testimonial-head h2 .testimonial-head__brand {
    color: var(--brand)
}

body[data-hb-page=anasayfa] .testimonial-head__h2-desktop {
    display: none
}

body[data-hb-page=anasayfa] .testimonial-head__h2-mobile {
    display: block
}

@media (min-width: 880px) {
    body[data-hb-page=anasayfa] .testimonial-head__h2-desktop {
        display:block
    }

    body[data-hb-page=anasayfa] .testimonial-head__h2-mobile {
        display: none
    }
}

body[data-hb-page] .testimonial-head__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
    max-width: none;
    width: 100%
}

body[data-hb-page=anasayfa] .testimonial-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(255,105,105,.35);
    transition: transform .2s ease,box-shadow .2s ease,background .2s ease;
    white-space: nowrap
}

body[data-hb-page] .testimonial-cta:hover {
    background: var(--brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,105,105,.4)
}

body[data-hb-page] .testimonial-cta i {
    font-size: 1.05rem
}

body[data-hb-page=anasayfa] .testimonial-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    body[data-hb-page=anasayfa] .testimonial-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (min-width: 1024px) {
    body[data-hb-page=anasayfa] .testimonial-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

body[data-hb-page] .t-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 18px 18px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease,box-shadow .2s ease
}

body[data-hb-page] .t-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0
}

body[data-hb-page] .t-card:first-child::before {
    background: linear-gradient(90deg,#6366f1,#8b5cf6)
}

body[data-hb-page] .t-card:nth-child(2)::before {
    background: linear-gradient(90deg,#ec4899,#f97316)
}

body[data-hb-page] .t-card:nth-child(3)::before {
    background: linear-gradient(90deg,#0ea5e9,#06b6d4)
}

body[data-hb-page] .t-card:nth-child(4)::before {
    background: linear-gradient(90deg,#a855f7,#d946ef)
}

body[data-hb-page] .t-card:nth-child(5)::before {
    background: linear-gradient(90deg,#10b981,#14b8a6)
}

body[data-hb-page] .t-card:nth-child(6)::before {
    background: linear-gradient(90deg,#f59e0b,#ef4444)
}

body[data-hb-page] .t-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md)
}

body[data-hb-page] .t-card__deco {
    position: absolute;
    right: 10px;
    top: 14px;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand);
    opacity: .07;
    pointer-events: none;
    user-select: none
}

body[data-hb-page] .t-card__stars {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
    color: #f59e0b;
    font-size: 13px
}

body[data-hb-page] .t-card__text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.62;
    color: var(--ink-muted);
    flex: 1
}

body[data-hb-page] .t-teacher {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
    transition: background .2s ease
}

body[data-hb-page] .t-teacher:hover {
    background: rgba(255,105,105,.06)
}

body[data-hb-page] .t-teacher:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

body[data-hb-page] .t-teacher__photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand-soft);
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
    flex-shrink: 0
}

body[data-hb-page] .t-teacher__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left
}

body[data-hb-page] .t-teacher__name {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25
}

body[data-hb-page] .t-teacher__sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    line-height: 1.35;
    word-break: break-word
}

body[data-hb-page] .t-teacher__arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 1rem;
    transition: color .2s,background .2s,border-color .2s
}

body[data-hb-page] .t-teacher:hover .t-teacher__arrow {
    color: var(--brand);
    border-color: rgba(255,105,105,.35);
    background: #fff
}

body[data-hb-page=blog] {
    --brand: #ff6969;
    --brand-soft: rgba(255, 105, 105, 0.12);
    --brand-hover: #f05555;
    --ink: #0f172a;
    --ink-muted: #475569;
    --muted: #64748b;
    --surface: #f1f5f9;
    --surface-elevated: #ffffff;
    --border: #e2e8f0;
    --accent-slate: #1e293b;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 40px -12px rgba(15, 23, 42, 0.12)
}

body[data-hb-page] .hb-nav a[aria-current=page] {
    color: var(--hb-primary,#ff6969);
    background: linear-gradient(135deg,#fff8f8 0,#fff0f0 100%)
}

body[data-hb-page=blog] .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(48px,6vw,72px) 20px 96px;
    width: 100%;
    box-sizing: border-box
}

@media (max-width: 639px) {
}

body[data-hb-page] .blog-page__hero {
    text-align: center;
    margin-bottom: 0;
    padding-top: 12px
}

body[data-hb-page] .blog-page__hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1.15;
    margin: 0 0 24px
}

body[data-hb-page] .blog-search-wrap {
    max-width: 520px;
    margin: 0 auto 32px
}

body[data-hb-page] .blog-search {
    display: flex;
    align-items: center;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 5px 4px 20px;
    box-shadow: var(--shadow);
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page] .blog-search:focus-within {
    border-color: rgba(255,105,105,.45);
    box-shadow: 0 6px 20px rgba(15,23,42,.08)
}

body[data-hb-page] .blog-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: 0 0;
    font-family: inherit;
    font-size: 15px;
    padding: 12px 10px 12px 0;
    outline: 0;
    color: var(--ink)
}

body[data-hb-page] .blog-search input::placeholder {
    color: var(--muted)
}

body[data-hb-page] .blog-search__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s,transform .15s
}

body[data-hb-page] .blog-search__btn:hover {
    background: var(--brand-hover)
}

body[data-hb-page] .blog-search__btn:active {
    transform: scale(.96)
}

body[data-hb-page] .blog-search__btn i {
    font-size: 1.15rem
}

body[data-hb-page] .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

body[data-hb-page] .blog-featured-slider {
    margin-bottom: 8px
}

body[data-hb-page] .blog-slider {
    position: relative
}

body[data-hb-page] .blog-slider__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-md)
}

body[data-hb-page] .blog-slider__track {
    display: flex;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1)
}

body[data-hb-page] .blog-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    width: 100%;
    display: flex
}

body[data-hb-page] .blog-slider__slide-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0
}

body[data-hb-page] .blog-slider__media-wrap {
    position: relative;
    aspect-ratio: 16/9;
    max-height: 440px;
    background: #e2e8f0;
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0
}

body[data-hb-page] .blog-slider__img-link {
    display: block;
    width: 100%;
    height: 100%
}

body[data-hb-page] .blog-slider__img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

body[data-hb-page] .blog-slider__text-link {
    display: block;
    text-decoration: none;
    color: inherit
}

body[data-hb-page] .blog-slider__text-link:hover .blog-slider__title {
    color: var(--brand)
}

body[data-hb-page] .blog-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.65);
    background: rgba(241,245,249,.82);
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background .2s,color .2s,transform .15s;
    box-shadow: 0 2px 12px rgba(15,23,42,.12)
}

body[data-hb-page] .blog-slider__nav:hover {
    background: #fff;
    color: var(--ink)
}

body[data-hb-page] .blog-slider__nav:active {
    transform: translateY(-50%) scale(.96)
}

body[data-hb-page] .blog-slider__nav--prev {
    left: 12px
}

body[data-hb-page] .blog-slider__nav--next {
    right: 12px
}

body[data-hb-page] .blog-slider__progress {
    position: absolute;
    right: 14px;
    bottom: 12px;
    left: auto;
    width: min(132px,38%);
    z-index: 2;
    pointer-events: none
}

body[data-hb-page] .blog-slider__progress-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(15,23,42,.22);
    overflow: hidden
}

body[data-hb-page] .blog-slider__progress-fill {
    height: 100%;
    width: 25%;
    border-radius: 999px;
    background: var(--ink);
    transition: width .45s cubic-bezier(.4, 0, .2, 1)
}

body[data-hb-page] .blog-slider__nav i {
    font-size: 1.25rem
}

body[data-hb-page] .blog-slider__body {
    padding: 22px 22px 26px;
    text-align: left;
    background: var(--surface-elevated);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl)
}

body[data-hb-page] .blog-slider__cat {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand)
}

body[data-hb-page] .blog-slider__title {
    font-size: clamp(1.2rem, 2.8vw, 1.55rem);
    font-weight: 800;
    color: var(--ink);
    margin: 8px 0 10px;
    line-height: 1.28;
    letter-spacing: -.02em
}

body[data-hb-page] .blog-slider__excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden
}

body[data-hb-page] .blog-slider__meta {
    font-size: 12.5px;
    color: #94a3b8;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
    line-height: 1.45
}

body[data-hb-page] .blog-slider__meta-date {
    font-weight: 700;
    color: #64748b
}

body[data-hb-page] .blog-slider__meta-pipe {
    color: #cbd5e1;
    font-weight: 400
}

body[data-hb-page] .blog-slider__meta-read {
    color: #94a3b8
}

body[data-hb-page] .blog-promo-strip {
    margin-top: 44px
}

body[data-hb-page] .blog-promo-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    body[data-hb-page] .blog-promo-grid:not(.blog-promo-grid--single) {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

body[data-hb-page] .blog-promo-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 26px 24px;
    background: linear-gradient(145deg,#fff 0,#fff8f7 48%,#fff 100%);
    border: 2px solid rgba(255,105,105,.28);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px -12px rgba(15,23,42,.14),0 2px 0 rgba(255,255,255,.9) inset;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s,box-shadow .2s,transform .18s;
    position: relative;
    overflow: hidden
}

body[data-hb-page] .blog-promo-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--brand) 0,#ffb4b4 100%);
    opacity: .95
}

body[data-hb-page] .blog-promo-card:hover {
    border-color: rgba(255,105,105,.55);
    box-shadow: 0 16px 44px -16px rgba(255,105,105,.35),0 0 0 1px rgba(255,105,105,.08);
    transform: translateY(-3px)
}

body[data-hb-page] .blog-promo-card:active {
    transform: translateY(-1px)
}

body[data-hb-page] .blog-promo-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(145deg,#fff0f0 0,var(--brand-soft) 100%);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(255,105,105,.2)
}

body[data-hb-page] .blog-promo-card__kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    opacity: .9
}

body[data-hb-page] .blog-promo-card__title {
    font-weight: 800;
    color: var(--ink);
    font-size: 1.12rem;
    letter-spacing: -.02em;
    line-height: 1.28
}

body[data-hb-page] .blog-promo-card__desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
    flex: 1
}

body[data-hb-page] .blog-promo-card__cta {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px
}

body[data-hb-page] .blog-promo-card__cta i {
    transition: transform .2s
}

body[data-hb-page] .blog-promo-card:hover .blog-promo-card__cta i {
    transform: translateX(4px)
}

body[data-hb-page=blog] .blog-promo-card--wide {
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    padding: 28px 28px 26px
}

body[data-hb-page] .blog-promo-card--wide .blog-promo-card__icon {
    margin-top: 4px
}

@media (max-width: 639px) {
    body[data-hb-page=blog] .blog-promo-card--wide {
        flex-direction:column;
        align-items: flex-start
    }
}

body[data-hb-page] .blog-promo-card--wide .blog-promo-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

body[data-hb-page=blog] .blog-cat-body {
    display: flex;
    flex-direction: column;
    gap: 14px
}

body[data-hb-page=blog] .blog-cat-list {
    display: flex;
    flex-direction: column;
    gap: 14px
}

@media (min-width: 768px) {
    body[data-hb-page=blog] .blog-cat-body {
        display:flex;
        flex-direction: column;
        gap: 18px
    }

    body[data-hb-page=blog] .blog-cat-list {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 18px
    }

    body[data-hb-page] .blog-card--featured .blog-card__link {
        flex-direction: row;
        align-items: stretch;
        min-height: 0
    }

    body[data-hb-page] .blog-card--featured .blog-card__media {
        flex: 0 0 56%;
        max-width: 56%;
        height: 275px;
        min-height: 275px;
        max-height: 275px;
        aspect-ratio: unset;
        border-radius: var(--radius-lg) 0 0 var(--radius-lg)
    }

    body[data-hb-page] .blog-card--featured .blog-card__body {
        flex: 1;
        justify-content: center;
        padding: 20px 24px 22px;
        min-width: 0;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        gap: 8px
    }

    body[data-hb-page] .blog-card--featured h4 {
        font-size: clamp(1.05rem, 2.4vw, 1.28rem);
        line-height: 1.3
    }

    body[data-hb-page] .blog-card--featured .blog-card__excerpt {
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: 14px
    }

    body[data-hb-page] .blog-card--featured .blog-card__meta {
        margin-top: auto;
        padding-top: 10px
    }
}

body[data-hb-page] .blog-card--horizontal {
    overflow: hidden
}

body[data-hb-page=blog] .blog-card--horizontal .blog-card__link {
    flex-direction: row;
    align-items: stretch;
    height: 100%
}

body[data-hb-page=blog] .blog-card--horizontal .blog-card__media {
    width: 112px;
    min-width: 112px;
    aspect-ratio: 1;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg)
}

body[data-hb-page=blog] .blog-card--horizontal .blog-card__body {
    padding: 12px 14px 12px 12px;
    justify-content: center;
    gap: 6px
}

@media (max-width: 767px) {
    body[data-hb-page=blog] .blog-card--horizontal .blog-card__body {
        border-radius:0 var(--radius-lg) var(--radius-lg) 0
    }
}

body[data-hb-page=blog] .blog-card--horizontal .blog-card__cat {
    font-size: 11px;
    display: none
}

body[data-hb-page=blog] .blog-card--horizontal h4 {
    font-size: 14px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

body[data-hb-page=blog] .blog-card--horizontal .blog-card__excerpt {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 12.5px
}

body[data-hb-page] .blog-card__meta--inline {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    font-size: 11.5px;
    padding-top: 4px
}

body[data-hb-page] .blog-card__meta--inline .blog-card__meta-sep {
    opacity: .6
}

@media (min-width: 768px) {
    body[data-hb-page=blog] .blog-card--horizontal .blog-card__link {
        flex-direction:column
    }

    body[data-hb-page=blog] .blog-card--horizontal .blog-card__media {
        width: 100%;
        min-width: 0;
        aspect-ratio: 4/3;
        border-radius: 0
    }

    body[data-hb-page=blog] .blog-card--horizontal .blog-card__body {
        padding: 16px 18px 18px;
        gap: 8px
    }

    body[data-hb-page=blog] .blog-card--horizontal .blog-card__cat {
        display: block;
        font-size: 12px
    }

    body[data-hb-page=blog] .blog-card--horizontal h4 {
        font-size: 15px;
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible
    }

    body[data-hb-page=blog] .blog-card--horizontal .blog-card__excerpt {
        font-size: 13px;
        -webkit-line-clamp: 2
    }

    body[data-hb-page] .blog-card--horizontal .blog-card__meta {
        justify-content: space-between
    }

    body[data-hb-page=blog] .blog-card--horizontal .blog-card__meta--inline {
        display: none
    }

    body[data-hb-page=blog] .blog-card--horizontal .blog-card__meta:not(.blog-card__meta--inline) {
        display: flex
    }
}

@media (max-width: 767px) {
    body[data-hb-page=blog] .blog-card--horizontal .blog-card__meta:not(.blog-card__meta--inline) {
        display:none
    }

    body[data-hb-page=blog] .blog-card--horizontal .blog-card__meta--inline {
        display: flex
    }
}

body[data-hb-page=blog] .section {
    margin-top: 40px
}

body[data-hb-page] .section:first-of-type {
    margin-top: 0
}

body[data-hb-page] .blog-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border)
}

body[data-hb-page] .blog-section__head h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0
}

body[data-hb-page] .blog-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    text-decoration: none;
    transition: color .2s
}

body[data-hb-page] .blog-cat-link:hover {
    color: var(--brand)
}

body[data-hb-page] .blog-cat-link i {
    font-size: 14px;
    transition: transform .2s
}

body[data-hb-page] .blog-cat-link:hover i {
    transform: translateX(3px)
}

@media (max-width: 639px) {
}

body[data-hb-page=blog] .blog-card__cat,body[data-hb-page=blog-detay] .blog-card__cat,body[data-hb-page=yardim-merkezi] .blog-card__cat {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand);
    transition: color .2s ease
}

body[data-hb-page=ogretmen-ara],body[data-hb-page=online-ders] {
    --brand: #ff6969;
    --brand-soft: rgba(255, 105, 105, 0.12);
    --brand-hover: #f05555;
    --brand-bg-gradient: linear-gradient(180deg, #ffffff 0%, #fff8f8 45%, #fff0f0 100%);
    --brand-bg-gradient-desk: linear-gradient(165deg, #ffffff 0%, #fffbfb 52%, #ffecec 100%);
    --brand-border-soft: rgba(255, 105, 105, 0.22);
    --brand-shadow-soft: 0 12px 40px -20px rgba(255, 105, 105, 0.18);
    --ink: #0f172a;
    --ink-muted: #475569;
    --muted: #64748b;
    --surface: #f1f5f9;
    --surface-elevated: #ffffff;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --accent-slate: #1e293b;
    --accent-teal: #0d9488;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 40px -12px rgba(15, 23, 42, 0.12)
}

body[data-hb-page=ogretmen-ara] .page,body[data-hb-page=online-ders] .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 20px 80px;
    width: 100%
}

@media (max-width: 639px) {
    body[data-hb-page=ogretmen-ara] .page,body[data-hb-page=online-ders] .page {
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right: max(16px,env(safe-area-inset-right));
        padding-bottom: max(80px,env(safe-area-inset-bottom))
    }
}

body[data-hb-page] .search-lead-box {
    margin-bottom: 24px;
    padding: clamp(28px,5vw,44px) clamp(24px,4.5vw,42px);
    border-radius: clamp(24px,3.5vw,34px);
    background: radial-gradient(ellipse 90% 70% at 92% -8%,rgba(255,105,105,.11),transparent 55%),radial-gradient(ellipse 70% 55% at -5% 105%,rgba(13,148,136,.06),transparent 50%),linear-gradient(172deg,#fff 0,#f8fafc 42%,#eef2f7 100%);
    border: 1px solid rgba(203,213,225,.65);
    box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset,0 1px 2px rgba(15,23,42,.045),0 18px 48px -18px rgba(15,23,42,.11),0 0 0 1px rgba(255,105,105,.04);
    text-align: left;
    position: relative;
    overflow: hidden;
    isolation: isolate
}

body[data-hb-page] .search-lead-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: inherit;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    background: linear-gradient(180deg,#ffa3a3 0,var(--brand) 42%,#f97316 100%);
    box-shadow: 3px 0 24px -6px rgba(255,105,105,.28),inset -1px 0 0 rgba(255,255,255,.35);
    pointer-events: none;
    z-index: 0
}

body[data-hb-page] .search-lead-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle min(200px,48vw) at 96% 8%,rgba(255,105,105,.06),transparent 70%),radial-gradient(circle min(160px,42vw) at 4% 92%,rgba(255,255,255,.5),transparent 65%)
}

body[data-hb-page] .search-lead-box__inner {
    margin: 0;
    max-width: 56rem;
    position: relative;
    z-index: 1;
    padding-left: 10px
}

body[data-hb-page] .search-lead-box__title {
    margin: 0 0 16px;
    font-size: clamp(1.15rem, 2.8vw, 1.55rem);
    font-weight: 800;
    color: var(--accent-slate);
    letter-spacing: -.035em;
    line-height: 1.45
}

body[data-hb-page=ogretmen-ara] .search-lead-box__count,body[data-hb-page=online-ders] .search-lead-box__count {
    display: inline-block;
    position: relative;
    margin: 0 .04em;
    padding: 0 .02em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 1em;
    line-height: inherit;
    letter-spacing: inherit;
    vertical-align: baseline;
    background: linear-gradient(125deg,#ff9a9a 0,#ff6969 38%,#e85555 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(255, 105, 105, .22)) drop-shadow(0 0 24px rgba(255, 105, 105, .12))
}

@supports not ((-webkit-background-clip: text) or (background-clip:text)) {
    body[data-hb-page=ogretmen-ara] .search-lead-box__count,body[data-hb-page=online-ders] .search-lead-box__count {
        color:#ff6969;
        -webkit-text-fill-color: unset;
        background: 0 0;
        filter: none;
        text-shadow: 0 0 20px rgba(255,105,105,.2),0 2px 12px rgba(255,105,105,.12)
    }
}

body[data-hb-page=ogretmen-ara] .search-lead-box__subtitle,body[data-hb-page=online-ders] .search-lead-box__subtitle {
    margin: 0;
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-muted);
    line-height: 1.65;
    max-width: 52rem;
    opacity: .96
}

@media (min-width: 640px) {
    body[data-hb-page=ogretmen-ara] .search-lead-box__subtitle,body[data-hb-page=online-ders] .search-lead-box__subtitle {
        font-size:.875rem
    }
}

body[data-hb-page=ogretmen-ara] .search-toolbar,body[data-hb-page=online-ders] .search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 20px;
    width: 100%;
    justify-content: flex-start
}

body[data-hb-page=ogretmen-ara] .search-toolbar__sort,body[data-hb-page=online-ders] .search-toolbar__sort {
    flex: 0 1 auto;
    width: min(100%,220px);
    max-width: 220px;
    margin-left: auto
}

body[data-hb-page] .sort-select-wrap {
    position: relative;
    display: block
}

body[data-hb-page] .sort-select-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--muted);
    pointer-events: none
}

body[data-hb-page] .sort-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    padding: 10px 38px 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page] .sort-select:focus,body[data-hb-page] .sort-select:hover {
    outline: 0;
    border-color: rgba(255,105,105,.45);
    box-shadow: 0 4px 14px rgba(15,23,42,.06)
}

body[data-hb-page=ogretmen-ara] .search-toolbar__meta,body[data-hb-page=online-ders] .search-toolbar__meta {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    flex-shrink: 0
}

body[data-hb-page=ogretmen-ara] .search-toolbar__filter-btn,body[data-hb-page=online-ders] .search-toolbar__filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-slate);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color .2s,color .2s
}

body[data-hb-page] .search-toolbar__filter-btn:hover {
    border-color: var(--brand);
    color: var(--brand)
}

body[data-hb-page] .search-toolbar__filter-btn i {
    font-size: 16px
}

@media (min-width: 960px) {
    body[data-hb-page=ogretmen-ara] .search-toolbar__filter-btn,body[data-hb-page=online-ders] .search-toolbar__filter-btn {
        display:none
    }
}

@media (max-width: 639px) {
    body[data-hb-page=ogretmen-ara] .search-toolbar,body[data-hb-page=online-ders] .search-toolbar {
        flex-direction:column;
        align-items: stretch
    }

    body[data-hb-page=ogretmen-ara] .search-toolbar__meta,body[data-hb-page=online-ders] .search-toolbar__meta {
        display: none
    }

    body[data-hb-page=ogretmen-ara] .search-toolbar__filter-btn,body[data-hb-page=online-ders] .search-toolbar__filter-btn {
        order: 1;
        width: 100%
    }

    body[data-hb-page=ogretmen-ara] .search-toolbar__sort,body[data-hb-page=online-ders] .search-toolbar__sort {
        order: 2;
        width: 100%;
        max-width: none;
        margin-left: 0
    }

    body[data-hb-page=ogretmen-ara] .teacher-paged-meta,body[data-hb-page=online-ders] .teacher-paged-meta {
        display: block
    }
}

body[data-hb-page] .search-layout {
    display: block
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo,body[data-hb-page=online-ders] .search-filters .hb-combo {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__trigger,body[data-hb-page=online-ders] .search-filters .hb-combo__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__trigger:hover,body[data-hb-page=online-ders] .search-filters .hb-combo__trigger:hover {
    border-color: var(--border-strong)
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo.is-open .hb-combo__trigger,body[data-hb-page=online-ders] .search-filters .hb-combo.is-open .hb-combo__trigger {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__label,body[data-hb-page=online-ders] .search-filters .hb-combo__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__label.is-placeholder,body[data-hb-page=online-ders] .search-filters .hb-combo__label.is-placeholder {
    color: #94a3b8;
    font-weight: 500
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__chev,body[data-hb-page=online-ders] .search-filters .hb-combo__chev {
    color: var(--muted);
    font-size: 12px;
    flex-shrink: 0;
    transition: transform .2s
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo.is-open .hb-combo__chev,body[data-hb-page=online-ders] .search-filters .hb-combo.is-open .hb-combo__chev {
    transform: rotate(180deg)
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__dropdown,body[data-hb-page=online-ders] .search-filters .hb-combo__dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1200;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
    padding: 10px;
    max-height: min(320px,70vh);
    flex-direction: column;
    gap: 8px
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo.is-open .hb-combo__dropdown,body[data-hb-page=online-ders] .search-filters .hb-combo.is-open .hb-combo__dropdown {
    display: flex
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__filter,body[data-hb-page=online-ders] .search-filters .hb-combo__filter {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--brand);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    outline: 0
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__filter:focus,body[data-hb-page=online-ders] .search-filters .hb-combo__filter:focus {
    box-shadow: 0 0 0 3px var(--brand-soft)
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__list,body[data-hb-page=online-ders] .search-filters .hb-combo__list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    overflow-y: auto;
    max-height: 220px;
    border-radius: 0 0 8px 8px
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__list::-webkit-scrollbar,body[data-hb-page=online-ders] .search-filters .hb-combo__list::-webkit-scrollbar {
    width: 6px
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__list::-webkit-scrollbar-thumb,body[data-hb-page=online-ders] .search-filters .hb-combo__list::-webkit-scrollbar-thumb {
    background: var(--brand);
    border-radius: 4px
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__option,body[data-hb-page=online-ders] .search-filters .hb-combo__option {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s,color .15s;
    list-style: none
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__option.is-selected,body[data-hb-page=online-ders] .search-filters .hb-combo__option.is-selected,body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__option:hover,body[data-hb-page=online-ders] .search-filters .hb-combo__option:hover {
    background: var(--brand);
    color: #fff
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__option--sub,body[data-hb-page=online-ders] .search-filters .hb-combo__option--sub {
    padding-left: 24px;
    font-size: 13px;
    color: var(--muted)
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__option--sub.is-selected,body[data-hb-page=online-ders] .search-filters .hb-combo__option--sub.is-selected,body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__option--sub:hover,body[data-hb-page=online-ders] .search-filters .hb-combo__option--sub:hover {
    color: #fff
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo__empty,body[data-hb-page=online-ders] .search-filters .hb-combo__empty {
    list-style: none;
    padding: 12px;
    font-size: 13px;
    color: var(--muted);
    text-align: center
}

body[data-hb-page=ogretmen-ara] .search-filters .hb-combo.is-disabled .hb-combo__trigger,body[data-hb-page=online-ders] .search-filters .hb-combo.is-disabled .hb-combo__trigger {
    opacity: .55;
    cursor: not-allowed;
    background: #f8fafc
}

body[data-hb-page] .search-filters .filter-group.is-hidden {
    display: none !important
}

body[data-hb-page=ogretmen-ara] .search-filters-backdrop,body[data-hb-page=online-ders] .search-filters-backdrop {
    display: none
}

@media (max-width: 959px) {
    body[data-hb-page=ogretmen-ara] .search-filters-backdrop,body[data-hb-page=online-ders] .search-filters-backdrop {
        display:block;
        position: fixed;
        inset: 0;
        z-index: 1005;
        background: rgba(15,23,42,.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease
    }

    body[data-hb-page] .search-filters-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto
    }
}

body[data-hb-page=ogretmen-ara] .search-filters,body[data-hb-page=online-ders] .search-filters {
    background: var(--brand-bg-gradient);
    border: 1px solid var(--brand-border-soft);
    border-radius: var(--radius-xl);
    padding: 20px 16px 14px;
    box-shadow: var(--shadow-md)
}

@media (min-width: 960px) {
    body[data-hb-page=ogretmen-ara] .search-filters,body[data-hb-page=online-ders] .search-filters {
        position:relative;
        top: auto;
        margin-bottom: 24px;
        padding: 16px 22px 12px;
        background: var(--brand-bg-gradient-desk);
        border: 1px solid var(--brand-border-soft);
        border-radius: var(--radius-xl);
        box-shadow: 0 1px 0 rgba(255,255,255,.8) inset,0 12px 40px -20px rgba(15,23,42,.15)
    }

    body[data-hb-page=ogretmen-ara] .search-filters__form,body[data-hb-page=online-ders] .search-filters__form {
        display: grid;
        grid-template-columns: repeat(12,minmax(0,1fr));
        align-items: flex-end;
        gap: 10px 14px
    }

    body[data-hb-page=ogretmen-ara] .search-filters__body,body[data-hb-page=online-ders] .search-filters__body {
        display: contents
    }

    body[data-hb-page] .search-filters .filter-group {
        margin-bottom: 0;
        padding: 0;
        background: 0 0;
        border: none;
        box-shadow: none;
        border-radius: 0;
        min-width: 0
    }

    body[data-hb-page] .search-filters .filter-group--ders {
        grid-column: span 3
    }

    body[data-hb-page] .search-filters .filter-group--seviye {
        grid-column: span 3
    }

    body[data-hb-page] .search-filters .filter-group--il {
        grid-column: span 2
    }

    body[data-hb-page] .search-filters .filter-group--ilce {
        grid-column: span 2
    }

    body[data-hb-page] .search-filters .filter-group--ucret {
        grid-column: span 2
    }

    body[data-hb-page] .search-filters .filter-group--kampanya {
        grid-column: span 6
    }

    body[data-hb-page] .search-filters .filter-group--cinsiyet {
        grid-column: span 3
    }

    body[data-hb-page=ogretmen-ara] .search-filters .filter-field--inline,body[data-hb-page=online-ders] .search-filters .filter-field--inline {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    body[data-hb-page] .search-filters .filter-check-row {
        padding: 4px 0;
        border-bottom: none;
        font-size: 12px
    }

    body[data-hb-page=ogretmen-ara] .search-filters .filter-actions,body[data-hb-page=online-ders] .search-filters .filter-actions {
        grid-column: span 3;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        align-self: end;
        gap: 6px;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 0;
        padding-top: 0;
        border-top: none
    }

    body[data-hb-page=ogretmen-ara] .search-filters .filter-actions .btn-text,body[data-hb-page=online-ders] .search-filters .filter-actions .btn-text {
        padding: 4px 0 2px;
        min-height: 0;
        display: inline;
        align-items: unset;
        justify-content: unset
    }
}

@media (max-width: 959px) {
    body[data-hb-page=ogretmen-ara] .search-filters,body[data-hb-page=online-ders] .search-filters {
        position:fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 75vw;
        z-index: 1010;
        border-radius: 14px 0 0 14px;
        border: 1px solid var(--border);
        border-right: none;
        transform: translateX(100%);
        transition: transform .32s cubic-bezier(.4, 0, .2, 1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: max(8px,env(safe-area-inset-top,0px)) 0 0;
        -webkit-overflow-scrolling: touch;
        box-shadow: -8px 0 32px rgba(15,23,42,.12)
    }

    body[data-hb-page] .search-filters.is-open {
        transform: translateX(0)
    }

    body[data-hb-page=ogretmen-ara] .search-filters__header,body[data-hb-page=online-ders] .search-filters__header {
        flex-shrink: 0;
        margin-bottom: 12px;
        padding-left: 14px;
        padding-right: 14px
    }

    body[data-hb-page=ogretmen-ara] .search-filters__form,body[data-hb-page=online-ders] .search-filters__form {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0 14px
    }

    body[data-hb-page=ogretmen-ara] .search-filters__body,body[data-hb-page=online-ders] .search-filters__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px
    }

    body[data-hb-page=ogretmen-ara] .search-filters .filter-actions,body[data-hb-page=online-ders] .search-filters .filter-actions {
        flex-shrink: 0;
        margin-top: 0;
        margin-left: -14px;
        margin-right: -14px;
        padding: 10px 14px;
        padding-bottom: max(12px,env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255,105,105,.14);
        background: rgba(255,255,255,.96);
        box-shadow: 0 -8px 24px -12px rgba(15,23,42,.08);
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 0
    }

    body[data-hb-page=ogretmen-ara] .search-filters .filter-actions .btn-text,body[data-hb-page=online-ders] .search-filters .filter-actions .btn-text {
        padding: 12px 16px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center
    }
}

body[data-hb-page=ogretmen-ara] .search-filters__header,body[data-hb-page=online-ders] .search-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border)
}

body[data-hb-page] .search-filters__header h2 {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink)
}

body[data-hb-page=ogretmen-ara] .search-filters__close,body[data-hb-page=online-ders] .search-filters__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.25rem
}

@media (min-width: 960px) {
    body[data-hb-page=ogretmen-ara] .search-filters__close,body[data-hb-page=online-ders] .search-filters__close {
        display:none
    }

    body[data-hb-page=ogretmen-ara] .search-filters__header,body[data-hb-page=online-ders] .search-filters__header {
        display: none
    }
}

body[data-hb-page=ogretmen-ara] .filter-group,body[data-hb-page=online-ders] .filter-group {
    margin-bottom: 10px;
    padding: 14px 14px 16px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04)
}

body[data-hb-page] .filter-field {
    margin-bottom: 12px
}

body[data-hb-page] .filter-field:last-child {
    margin-bottom: 0
}

body[data-hb-page=ogretmen-ara] .filter-field .filter-field__label,body[data-hb-page=ogretmen-ara] .filter-field label,body[data-hb-page=online-ders] .filter-field .filter-field__label,body[data-hb-page=online-ders] .filter-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-slate);
    margin-bottom: 6px
}

body[data-hb-page] .filter-field input[type=text],body[data-hb-page] .filter-field select {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page] .filter-field input:focus,body[data-hb-page] .filter-field select:focus {
    outline: 0;
    border-color: rgba(255,105,105,.5);
    box-shadow: 0 0 0 3px rgba(255,105,105,.12)
}

body[data-hb-page] .filter-field--inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

@media (max-width: 959px) {
    body[data-hb-page=ogretmen-ara] .search-filters .filter-field--inline,body[data-hb-page=online-ders] .search-filters .filter-field--inline {
        grid-template-columns:1fr
    }
}

body[data-hb-page=ogretmen-ara] .campaign-checkboxes,body[data-hb-page=online-ders] .campaign-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 12px
}

@media (min-width: 960px) {
    body[data-hb-page=ogretmen-ara] .campaign-checkboxes,body[data-hb-page=online-ders] .campaign-checkboxes {
        flex-direction:row;
        flex-wrap: wrap;
        gap: 20px 28px;
        align-items: center
    }
}

body[data-hb-page] .hb-form-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0
}

body[data-hb-page] .hb-form-switch-input {
    appearance: none;
    -webkit-appearance: none;
    width: 42px;
    height: 22px;
    margin: 0;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    align-self: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    position: relative;
    transition: background .2s,border-color .2s
}

body[data-hb-page] .hb-form-switch-input::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #cbd5e1;
    top: 1px;
    left: 2px;
    box-shadow: 0 1px 3px rgba(15,23,42,.12);
    transition: transform .2s,background .2s
}

body[data-hb-page] .hb-form-switch-input:checked {
    background: var(--brand);
    border-color: var(--brand)
}

body[data-hb-page] .hb-form-switch-input:checked::after {
    background: #fff;
    transform: translateX(18px)
}

body[data-hb-page] .hb-form-switch-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    line-height: 22px;
    display: inline-flex;
    align-items: center
}

body[data-hb-page] .filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

body[data-hb-page] .filter-pills label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    margin: 0;
    color: var(--accent-slate);
    transition: border-color .2s,background .2s
}

body[data-hb-page] .filter-pills input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none
}

body[data-hb-page] .filter-pills label:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff
}

body[data-hb-page] .filter-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 0;
    border-top: none
}

body[data-hb-page=ogretmen-ara] .btn-primary,body[data-hb-page=online-ders] .btn-primary {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255,105,105,.35);
    transition: background .2s,transform .15s
}

body[data-hb-page] .btn-text {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 10px;
    border: none;
    background: 0 0;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px
}

body[data-hb-page] .filter-actions .btn-text {
    padding: 4px 0 2px
}

body[data-hb-page=ogretmen-ara] .search-ai-note,body[data-hb-page=online-ders] .search-ai-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid rgba(139,92,246,.24);
    border-radius: 14px;
    background: linear-gradient(120deg,rgba(139,92,246,.08),rgba(255,105,105,.08))
}

body[data-hb-page] .search-ai-note__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #8b5cf6;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

body[data-hb-page] .search-ai-note p {
    margin: 0;
    font-size: 13px;
    color: #312e81;
    font-weight: 600;
    line-height: 1.45
}

body[data-hb-page=ogretmen-ara] .search-filters,body[data-hb-page=online-ders] .search-filters {
    background: var(--brand-bg-gradient);
    border: 1px solid var(--brand-border-soft)
}

body[data-hb-page=ogretmen-ara] .filter-group,body[data-hb-page=online-ders] .filter-group {
    background: #fff;
    border: 1px solid rgba(255,105,105,.12);
    border-radius: 16px;
    box-shadow: var(--brand-shadow-soft)
}

body[data-hb-page=ogretmen-ara] .filter-field .filter-field__label,body[data-hb-page=ogretmen-ara] .filter-field label,body[data-hb-page=online-ders] .filter-field .filter-field__label,body[data-hb-page=online-ders] .filter-field label {
    color: #334155;
    font-size: 12px
}

body[data-hb-page] .filter-field .filter-field__label i,body[data-hb-page] .filter-field label i {
    color: var(--brand);
    font-size: 13px;
    margin-right: 6px;
    vertical-align: -.1em
}

body[data-hb-page] .filter-inline-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin: 0 0 8px
}

body[data-hb-page] .filter-inline-label i {
    color: var(--brand);
    margin-right: 6px;
    font-size: 13px
}

body[data-hb-page] .smart-select {
    position: relative
}

body[data-hb-page] .smart-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

body[data-hb-page] .smart-select__trigger {
    width: 100%;
    border: 1px solid #d1defd;
    border-radius: 14px;
    background: #fff;
    min-height: 44px;
    padding: 10px 42px 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    text-align: left;
    transition: border-color .2s,box-shadow .2s;
    position: relative
}

body[data-hb-page] .smart-select__trigger::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: translateY(-60%) rotate(45deg);
    transition: transform .2s
}

body[data-hb-page] .smart-select.is-open .smart-select__trigger {
    border-color: rgba(255,105,105,.9);
    box-shadow: 0 0 0 3px rgba(255,105,105,.12);
    color: #334155
}

body[data-hb-page] .smart-select.is-open .smart-select__trigger::after {
    transform: translateY(-35%) rotate(-135deg)
}

body[data-hb-page] .smart-select.is-disabled .smart-select__trigger {
    opacity: .6;
    cursor: not-allowed
}

body[data-hb-page] .smart-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 80;
    background: #fff;
    border: 1px solid #d7e3ff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 14px 32px -18px rgba(30,41,59,.35);
    display: none
}

body[data-hb-page] .smart-select.is-open .smart-select__menu {
    display: block
}

body[data-hb-page] .smart-select__search {
    width: 100%;
    border: 1px solid rgba(255,105,105,.35);
    border-radius: 10px;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 8px;
    outline: 0
}

body[data-hb-page] .smart-select__options {
    max-height: 190px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px
}

body[data-hb-page] .smart-select__option {
    border: none;
    border-radius: 9px;
    background: 0 0;
    text-align: left;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    cursor: pointer
}

body[data-hb-page] .smart-select__option:hover {
    background: #f1f5ff
}

body[data-hb-page] .smart-select__option.is-active {
    background: #ff6969;
    color: #fff;
    font-weight: 700
}

@media (min-width: 960px) {
    body[data-hb-page=ogretmen-ara] .search-ai-note,body[data-hb-page=online-ders] .search-ai-note {
        margin-bottom:14px
    }
}

body[data-hb-page] .search-main {
    min-width: 0
}

@media (min-width: 520px) {
}

@media (min-width: 880px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 480px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

body[data-hb-page=ogretmen-ara] .teacher-card__fav,body[data-hb-page=online-ders] .teacher-card__fav {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.95);
    background: rgba(255,255,255,.96);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(15,23,42,.12);
    transition: color .2s,background .2s,border-color .2s,transform .15s
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

body[data-hb-page=ogretmen-ara] .teacher-card__meta-row,body[data-hb-page=online-ders] .teacher-card__meta-row {
    display: flex;
    align-items: center;
    /*align-items: flex-start;*/
    gap: 8px;
    padding: 8px 9px;
    min-width: 0
}

@media (min-width: 1200px) {
}

body[data-hb-page=ogretmen-ara] .teacher-card__meta-text,body[data-hb-page=online-ders] .teacher-card__meta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

body[data-hb-page=ogretmen-ara] .teacher-card__meta-label,body[data-hb-page=online-ders] .teacher-card__meta-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--muted)
}

body[data-hb-page=ogretmen-ara] .teacher-card__meta-value,body[data-hb-page=online-ders] .teacher-card__meta-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35
}

@media (min-width: 1200px) {
    body[data-hb-page=ogretmen-ara] .teacher-card__meta-label,body[data-hb-page=online-ders] .teacher-card__meta-label {
        font-size:8px
    }
}

body[data-hb-page=ogretmen-ara] .teacher-card__lesson-line,body[data-hb-page=online-ders] .teacher-card__lesson-line {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    letter-spacing: -.01em
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

body[data-hb-page=ogretmen-ara].filters-open,body[data-hb-page=online-ders].filters-open {
    overflow: hidden
}

@media (min-width: 960px) {
    body[data-hb-page=ogretmen-ara].filters-open,body[data-hb-page=online-ders].filters-open {
        overflow:auto
    }
}

body[data-hb-page] .teacher-list-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    min-height: 48px
}

body[data-hb-page] .teacher-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 14px;
    border: none;
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255,105,105,.38);
    transition: background .2s,transform .15s,box-shadow .2s
}

body[data-hb-page] .teacher-load-more:hover:not(:disabled) {
    background: var(--brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,105,105,.42)
}

body[data-hb-page] .teacher-load-more:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none
}

body[data-hb-page] .teacher-load-more[hidden] {
    display: none!important
}

body[data-hb-page] .teacher-load-more i {
    font-size: 1.1rem
}

body[data-hb-page=ogretmen-ara] .teacher-paged-meta,body[data-hb-page=online-ders] .teacher-paged-meta {
    display: none;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-slate);
    text-align: center;
    line-height: 1.4;
    letter-spacing: -.01em
}

body[data-hb-page] .teacher-list-loader {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-muted)
}

body[data-hb-page] .teacher-list-loader[hidden] {
    display: none!important
}

body[data-hb-page=ogretmen-ara] .teacher-list-loader__spin,body[data-hb-page=online-ders] .teacher-list-loader__spin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,105,105,.25);
    border-top-color: var(--brand);
    animation: teacher-spin .7s linear infinite
}

@keyframes teacher-spin {
    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion:reduce) {
    body[data-hb-page=ogretmen-ara] .teacher-list-loader__spin,body[data-hb-page=online-ders] .teacher-list-loader__spin {
        animation: none;
        border-top-color: var(--brand);
        opacity: .7
    }
}

body[data-hb-page] .teacher-list-end {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-align: center
}

body[data-hb-page] .teacher-list-end[hidden] {
    display: none!important
}

body[data-hb-page] .search-info-strip {
    margin-top: clamp(40px,6vw,64px);
    padding-top: clamp(28px,4vw,40px);
    border-top: 1px solid var(--border)
}

body[data-hb-page] .search-info-strip__head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto clamp(28px,4vw,36px)
}

body[data-hb-page] .search-info-strip__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 8px
}

body[data-hb-page] .search-info-strip__title {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1.25;
    margin: 0
}

body[data-hb-page=ogretmen-ara] .search-info-cards,body[data-hb-page=online-ders] .search-info-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media (min-width: 768px) {
    body[data-hb-page=ogretmen-ara] .search-info-cards,body[data-hb-page=online-ders] .search-info-cards {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap: 20px;
        align-items: stretch
    }
}

body[data-hb-page] .search-info-card {
    position: relative;
    border-radius: var(--radius-lg);
    padding: clamp(22px,3vw,28px) clamp(20px,2.5vw,26px);
    border: 1px solid rgba(15,23,42,.06);
    background: linear-gradient(165deg,#fffefb 0,#faf8f5 100%);
    box-shadow: 0 4px 24px -12px rgba(15,23,42,.1);
    transition: transform .28s ease,box-shadow .28s ease,border-color .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 100%
}

body[data-hb-page=ogretmen-ara] .search-info-card:hover,body[data-hb-page=online-ders] .search-info-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 48px -24px rgba(15,23,42,.14),0 0 0 1px rgba(255,105,105,.12);
    border-color: rgba(255,105,105,.2)
}

@media (prefers-reduced-motion:reduce) {
    body[data-hb-page=ogretmen-ara] .search-info-card:hover,body[data-hb-page=online-ders] .search-info-card:hover {
        transform: none
    }
}

body[data-hb-page] .search-info-card--accent {
    background: linear-gradient(165deg,#fff5f5 0,#ffe8ec 55%,#fff0f2 100%);
    border-color: rgba(255,105,105,.18)
}

body[data-hb-page] .search-info-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
    background: linear-gradient(145deg,#fff 0,#fff5f5 100%);
    color: var(--brand);
    border: 1px solid rgba(255,105,105,.22);
    box-shadow: 0 8px 20px -12px rgba(255,105,105,.45)
}

body[data-hb-page] .search-info-card--accent .search-info-card__icon {
    background: linear-gradient(145deg,#fff 0,#ffe4e8 100%)
}

body[data-hb-page] .search-info-card__heading {
    font-size: clamp(1.05rem, 2vw, 1.15rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.35;
    margin: 0 0 12px
}

body[data-hb-page] .search-info-card__text {
    margin: 0;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink-muted);
    line-height: 1.72;
    max-width: 32em
}

body[data-hb-page] .qa-quick-access {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,3vw,28px);
    margin-top: clamp(36px,5vw,56px)
}

body[data-hb-page] .qa-block {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(20px,3vw,28px);
    box-shadow: var(--shadow)
}

body[data-hb-page] .qa-block__header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: clamp(16px,2.5vw,20px)
}

body[data-hb-page] .qa-block__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0
}

body[data-hb-page] .qa-block__title {
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0 0 6px
}

body[data-hb-page] .qa-block__hint {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.5;
    max-width: 52rem
}

body[data-hb-page] .qa-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start
}

body[data-hb-page] .qa-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-slate);
    background: #fff;
    border: 1px solid var(--border);
    text-decoration: none;
    transition: border-color .2s,background .2s,color .2s,box-shadow .2s;
    cursor: pointer;
    line-height: 1.3
}

body[data-hb-page] .qa-chip:hover {
    border-color: rgba(255,105,105,.42);
    background: #fff;
    color: var(--brand-hover);
    box-shadow: 0 2px 14px rgba(255,105,105,.12)
}

body[data-hb-page] .qa-chip:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255,105,105,.28);
    border-color: rgba(255,105,105,.55)
}

body[data-hb-page] .qa-chip--location {
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 600
}

body[data-hb-page] .qa-details {
    position: relative;
    display: inline-block;
    max-width: 100%
}

body[data-hb-page] .qa-details>summary.qa-chip {
    list-style: none
}

body[data-hb-page] .qa-details>summary.qa-chip::-webkit-details-marker {
    display: none
}

body[data-hb-page] .qa-details .qa-chip__caret {
    font-size: .68rem;
    opacity: .72;
    transition: transform .22s ease
}

body[data-hb-page] .qa-details[open]>summary .qa-chip__caret {
    transform: rotate(180deg)
}

body[data-hb-page] .qa-details[open]>summary.qa-chip {
    border-color: rgba(255,105,105,.45);
    color: var(--brand-hover);
    background: rgba(255,255,255,.98)
}

body[data-hb-page=ogretmen-ara] .qa-chip-panel,body[data-hb-page=online-ders] .qa-chip-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: min(300px,calc(100vw - 48px));
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md)
}

body[data-hb-page] .qa-chip-panel__label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px 2px
}

body[data-hb-page] .qa-chip-panel__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

body[data-hb-page] .qa-sublink {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color .2s,color .2s,background .2s
}

body[data-hb-page] .qa-sublink:hover {
    border-color: var(--brand-border-soft);
    color: var(--brand-hover);
    background: #fff
}

body[data-hb-page] .qa-sublink:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(255,105,105,.35)
}

@media (max-width: 639px) {
    body[data-hb-page=ogretmen-ara] .qa-chip-panel,body[data-hb-page=online-ders] .qa-chip-panel {
        position:static;
        margin-top: 8px;
        width: 100%;
        min-width: 0;
        box-shadow: 0 1px 0 rgba(15,23,42,.06);
        border-style: dashed
    }
}

@media (prefers-reduced-motion:reduce) {
    body[data-hb-page] .qa-chip,body[data-hb-page] .qa-details .qa-chip__caret,body[data-hb-page] .qa-sublink {
        transition: none
    }
}

@media (max-width: 639px) {
}

@supports not ((-webkit-background-clip: text) or (background-clip:text)) {
}

@media (min-width: 640px) {
}

@media (min-width: 960px) {
}

@media (max-width: 639px) {
}

@media (max-width: 959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 959px) {
}

@media (min-width: 960px) {
}

@media (min-width: 960px) {
}

@media (min-width: 520px) {
}

@media (min-width: 880px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 480px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 960px) {
}

@keyframes teacher-spin {
    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion:reduce) {
}

@media (min-width: 768px) {
}

@media (prefers-reduced-motion:reduce) {
}

@media (max-width: 639px) {
}

@media (prefers-reduced-motion:reduce) {
}

@media (min-width: 960px) {
    body[data-hb-page] .search-filters--online .filter-group--ders {
        grid-column:span 4
    }

    body[data-hb-page] .search-filters--online .filter-group--seviye {
        grid-column: span 4
    }

    body[data-hb-page] .search-filters--online .filter-group--ucret {
        grid-column: span 4
    }

    body[data-hb-page] .search-filters--online .filter-group--cinsiyet {
        grid-column: span 4
    }

    body[data-hb-page] .search-filters--online .filter-group--kampanya {
        grid-column: span 8
    }

    body[data-hb-page] .search-filters--online .filter-actions {
        grid-column: 10/span 3;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        align-self: end;
        gap: 6px;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 0;
        padding-top: 0;
        border-top: none
    }
}

body[data-hb-page] .od-faq-section {
    margin-top: clamp(36px,5vw,52px)
}

body[data-hb-page] .od-faq-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 8px
}

body[data-hb-page=online-ders] .panel--faq .faq-layout__lead-wrap p {
    margin: 0;
    display: inline-block;
    width: max-content;
    max-width: none;
    line-height: 1.45;
    font-size: clamp(11px, 2.65vw, 15px);
    white-space: nowrap;
    color: var(--muted);
    font-weight: 500
}

body[data-hb-page] .panel--faq .faq-layout__lead-wrap a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,105,105,.35)
}

body[data-hb-page] .panel--faq .faq-layout__lead-wrap a:hover {
    color: var(--brand-hover);
    border-bottom-color: var(--brand-hover)
}

@media (max-width: 959px) {
}

@media (min-width: 960px) {
}

body[data-hb-page] .faq-panel-inner p+p {
    margin-top: 10px
}

@media (max-width: 639px) {
}

@media (max-width: 479px) {
}

body[data-hb-page=online-ders] .od-recruit {
    margin-top: clamp(36px,5vw,52px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: 1fr
}

@media (min-width: 900px) {
    body[data-hb-page=online-ders] .od-recruit {
        grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)
    }
}

body[data-hb-page] .od-recruit__visual {
    position: relative;
    min-height: 220px;
    background: linear-gradient(145deg,#ecfdf5 0,#d1fae5 40%,#a7f3d0 100%)
}

body[data-hb-page] .od-recruit__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block
}

body[data-hb-page] .od-recruit__content {
    padding: clamp(22px,3.5vw,36px);
    display: flex;
    flex-direction: column;
    gap: 16px
}

body[data-hb-page] .od-recruit__title {
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1.25
}

body[data-hb-page] .od-recruit__content p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ink-muted)
}

body[data-hb-page] .od-recruit__highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--accent-slate)
}

body[data-hb-page] .od-recruit__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start
}

body[data-hb-page] .od-recruit__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--brand);
    text-decoration: none;
    border-bottom: 2px solid rgba(255,105,105,.35);
    padding-bottom: 2px;
    transition: color .2s,border-color .2s
}

body[data-hb-page] .od-recruit__link:hover {
    color: var(--brand-hover);
    border-bottom-color: var(--brand-hover)
}

body[data-hb-page] .od-value {
    margin-top: clamp(40px,5vw,56px)
}

body[data-hb-page] .od-value__head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto clamp(24px,4vw,32px)
}

body[data-hb-page] .od-value__title {
    margin: 0 0 10px;
    font-size: clamp(1.2rem, 2.4vw, 1.45rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1.25
}

body[data-hb-page] .od-value__subtitle {
    margin: 0;
    font-size: .9375rem;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.55
}

body[data-hb-page=online-ders] .od-value__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media (min-width: 768px) {
    body[data-hb-page=online-ders] .od-value__grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap: 18px
    }
}

body[data-hb-page] .od-value__card {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 22px 20px 20px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform .25s ease,box-shadow .25s ease,border-color .2s;
    overflow: hidden
}

body[data-hb-page] .od-value__card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--brand) 0,#ff9a9a 100%)
}

body[data-hb-page] .od-value__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -20px rgba(15,23,42,.15);
    border-color: rgba(255,105,105,.22)
}

body[data-hb-page] .od-value__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 14px
}

body[data-hb-page] .od-value__card h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.3
}

body[data-hb-page] .od-value__card p {
    margin: 0 0 14px;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--ink-muted)
}

body[data-hb-page] .od-value__card a {
    font-weight: 700;
    font-size: .875rem;
    color: var(--brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

body[data-hb-page] .od-value__card a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
    text-underline-offset: 3px
}

body[data-hb-page=online-ders] .panel--blog {
    position: relative;
    margin-top: clamp(40px,5vw,56px)
}

body[data-hb-page=online-ders] .blog-panel__header .section-head {
    margin: 0;
    flex: 1;
    min-width: min(100%,280px)
}

body[data-hb-page] .blog-panel__header .section-head h2 {
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em
}

body[data-hb-page] .blog-panel__header .section-head p {
    margin: 6px 0 0;
    font-size: .875rem;
    color: var(--muted)
}

@media (max-width: 639px) {
}

body[data-hb-page=online-ders] .panel--blog .blog-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

@media (max-width: 1199px) {
    body[data-hb-page=online-ders] .panel--blog .blog-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 639px) {
    body[data-hb-page=online-ders] .panel--blog .blog-grid {
        grid-template-columns:1fr
    }
}

body[data-hb-page=online-ders] .blog-card__cat {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand)
}

body[data-hb-page=online-ders] .blog-card h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.38
}

body[data-hb-page=blog-detay] .blog-card__meta-date,body[data-hb-page=online-ders] .blog-card__meta-date {
    flex-shrink: 0;
    text-align: right
}

body[data-hb-page=online-ders] .blog-card__meta i {
    font-size: .88rem;
    opacity: .85
}

body[data-hb-page=hesap-olustur] {
    --hb-primary: #ff6969;
    --hb-primary-dark: #e85555;
    --hb-primary-soft: #fff1f1;
    --hb-text: #1a1f36;
    --hb-muted: #5b6478;
    --hb-border: #e6eaf0;
    --hb-surface: #ffffff;
    --hb-bg: #faf8f9;
    --hb-accent-warm: #c2410c;
    --hb-accent-warm-soft: #fff4ed;
    --hb-grad: linear-gradient(135deg, #ff7a7a 0%, #ff6969 52%, #f55f5f 100%)
}

body[data-hb-page=hesap-olustur] .ha-page-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 4rem;
    width: 100%;
    box-sizing: border-box
}

@media (max-width: 639px) {
    body[data-hb-page=hesap-olustur] .ha-page-wrap {
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right: max(16px,env(safe-area-inset-right))
    }
}

body[data-hb-page] .ha-page-wrap .container {
    max-width: none!important;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto
}

body[data-hb-page],body[data-hb-page] * {
    box-sizing: border-box
}

body[data-hb-page=hesap-olustur] {
    font-family: "Plus Jakarta Sans",sans-serif;
    color: var(--hb-text);
    background: radial-gradient(ellipse 70% 50% at 8% 0,rgba(255,105,105,.08),transparent 50%),radial-gradient(ellipse 60% 45% at 92% 8%,rgba(251,146,60,.055),transparent 48%),linear-gradient(180deg,#fff 0,var(--hb-bg) 38%,#fcfcfd 100%);
    line-height: 1.6;
    overflow-x: hidden
}

body[data-hb-page] a {
    text-decoration: none
}

body[data-hb-page] .ha-navbar {
    padding: 1rem 0
}

body[data-hb-page] .ha-brand {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hb-text);
    font-size: 1.2rem
}

body[data-hb-page] .ha-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,105,105,.09);
    color: #c73d3d;
    border: 1px solid rgba(255,105,105,.22);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase
}

body[data-hb-page] .ha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .92rem;
    padding: .84rem 1.2rem;
    border: 1px solid transparent;
    transition: .25s ease
}

body[data-hb-page] .ha-btn-main {
    background: var(--hb-grad);
    color: #fff;
    box-shadow: 0 10px 28px rgba(255,105,105,.28),0 2px 8px rgba(15,23,42,.06)
}

body[data-hb-page] .ha-btn-main:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(255,105,105,.34),0 4px 12px rgba(15,23,42,.08)
}

body[data-hb-page] .ha-btn-ghost {
    border-color: rgba(255,105,105,.34);
    color: var(--hb-primary-dark);
    background: #fff
}

body[data-hb-page] .ha-btn-ghost:hover {
    color: var(--hb-primary-dark);
    background: var(--hb-primary-soft)
}

body[data-hb-page] .ha-hero {
    padding: 0 0 2.5rem
}

body[data-hb-page=hesap-olustur] .ha-role-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem,2.5vw,1.5rem);
    align-items: stretch;
    min-height: min(520px,52vh);
    margin-bottom: clamp(2rem,4vw,3rem)
}

body[data-hb-page] .ha-role-panel {
    position: relative;
    border-radius: 26px;
    padding: clamp(1.75rem,4vw,2.75rem) clamp(1.35rem,3.5vw,2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    border: 2px solid transparent;
    transition: transform .28s ease,box-shadow .28s ease,border-color .28s ease
}

body[data-hb-page] .ha-role-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    pointer-events: none
}

body[data-hb-page] .ha-role-panel--teacher {
    background: linear-gradient(160deg,#fff 0,#fff9f9 42%,#fff2f2 100%);
    border-color: rgba(255,105,105,.26);
    box-shadow: 0 3px 0 rgba(255,105,105,.09),0 22px 50px rgba(15,23,42,.07),0 12px 32px rgba(255,105,105,.08),inset 0 1px 0 rgba(255,255,255,.95)
}

body[data-hb-page] .ha-role-panel--teacher::before {
    background: radial-gradient(120% 80% at 100% 0,rgba(255,105,105,.14),transparent 58%)
}

body[data-hb-page] .ha-role-panel--student {
    background: linear-gradient(160deg,#fffcfa 0,#fff6f2 45%,#ffefe8 100%);
    border-color: rgba(194,65,12,.16);
    box-shadow: 0 3px 0 rgba(234,88,12,.08),0 22px 50px rgba(15,23,42,.07),0 12px 32px rgba(234,88,12,.07),inset 0 1px 0 rgba(255,255,255,.96)
}

body[data-hb-page] .ha-role-panel--student::before {
    background: radial-gradient(120% 80% at 0 0,rgba(251,146,60,.11),transparent 58%)
}

body[data-hb-page] .ha-role-panel:hover {
    transform: translateY(-4px)
}

body[data-hb-page] .ha-role-panel--teacher:hover {
    border-color: rgba(255,105,105,.42);
    box-shadow: 0 6px 0 rgba(255,105,105,.1),0 28px 60px rgba(15,23,42,.09),0 16px 40px rgba(255,105,105,.12)
}

body[data-hb-page] .ha-role-panel--student:hover {
    border-color: rgba(194,65,12,.28);
    box-shadow: 0 6px 0 rgba(234,88,12,.09),0 28px 60px rgba(15,23,42,.09),0 16px 40px rgba(234,88,12,.1)
}

body[data-hb-page] .ha-role-panel__inner {
    position: relative;
    z-index: 2
}

body[data-hb-page] .ha-role-panel__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    margin-bottom: 1rem
}

body[data-hb-page] .ha-role-panel--teacher .ha-role-panel__icon {
    background: linear-gradient(145deg,var(--hb-primary-soft),#fff);
    color: var(--hb-primary-dark);
    border: 1px solid rgba(255,105,105,.35)
}

body[data-hb-page] .ha-role-panel--student .ha-role-panel__icon {
    background: linear-gradient(145deg,var(--hb-accent-warm-soft),#fff);
    color: #b45309;
    border: 1px solid rgba(234,88,12,.2)
}

body[data-hb-page] .ha-role-panel__label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .5rem
}

body[data-hb-page] .ha-role-panel--teacher .ha-role-panel__label {
    color: var(--hb-primary-dark)
}

body[data-hb-page] .ha-role-panel--student .ha-role-panel__label {
    color: #b45309
}

body[data-hb-page] .ha-role-panel h2 {
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
    line-height: 1.2;
    margin: 0 0 .85rem;
    color: var(--hb-text)
}

body[data-hb-page] .ha-role-panel__lead {
    color: var(--hb-muted);
    font-size: clamp(.92rem, 2vw, 1.02rem);
    line-height: 1.65;
    margin: 0 0 1.25rem;
    max-width: 52ch
}

body[data-hb-page=hesap-olustur] .ha-role-panel .ha-btn {
    align-self: flex-start;
    padding: .95rem 1.35rem;
    font-size: .95rem
}

body[data-hb-page] .ha-role-panel--student .ha-btn-main {
    background: var(--hb-grad);
    box-shadow: 0 12px 28px rgba(255,105,105,.28),0 2px 8px rgba(15,23,42,.06)
}

body[data-hb-page] .ha-role-panel--student .ha-btn-main:hover {
    color: #fff;
    box-shadow: 0 16px 36px rgba(255,105,105,.34),0 4px 12px rgba(15,23,42,.08)
}

body[data-hb-page] .ha-section.ha-role-info {
    padding-top: 0;
    padding-bottom: clamp(2rem,4vw,3rem)
}

body[data-hb-page=hesap-olustur] .ha-role-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem,2.5vw,1.5rem);
    align-items: stretch
}

body[data-hb-page] .ha-role-info-card {
    border-radius: 22px;
    padding: clamp(1.35rem,3vw,1.75rem);
    border: 1px solid var(--hb-border);
    background: #fff;
    box-shadow: 0 10px 32px rgba(15,23,42,.055);
    transition: border-color .22s ease,box-shadow .22s ease
}

body[data-hb-page] .ha-role-info-card:hover {
    box-shadow: 0 16px 44px rgba(15,23,42,.075)
}

body[data-hb-page] .ha-role-info-card--teacher {
    border-color: rgba(255,105,105,.18)
}

body[data-hb-page] .ha-role-info-card--teacher:hover {
    border-color: rgba(255,105,105,.3)
}

body[data-hb-page] .ha-role-info-card--student {
    border-color: rgba(234,88,12,.14)
}

body[data-hb-page] .ha-role-info-card--student:hover {
    border-color: rgba(234,88,12,.26)
}

body[data-hb-page] .ha-role-info-card__head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .85rem
}

body[data-hb-page] .ha-role-info-card__ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    flex-shrink: 0
}

body[data-hb-page] .ha-role-info-card--teacher .ha-role-info-card__ico {
    background: linear-gradient(145deg,var(--hb-primary-soft),#fff);
    color: var(--hb-primary-dark);
    border: 1px solid rgba(255,105,105,.28)
}

body[data-hb-page] .ha-role-info-card--student .ha-role-info-card__ico {
    background: linear-gradient(145deg,var(--hb-accent-warm-soft),#fff);
    color: #b45309;
    border: 1px solid rgba(234,88,12,.18)
}

body[data-hb-page] .ha-role-info-card h3 {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 .2rem;
    color: var(--hb-text);
    line-height: 1.25
}

body[data-hb-page] .ha-role-info-card .ha-role-info-card__head small {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hb-muted)
}

body[data-hb-page] .ha-role-info-card .tagline {
    font-weight: 700;
    color: var(--hb-text);
    font-size: .98rem;
    margin: 0 0 1rem;
    line-height: 1.5
}

body[data-hb-page] .ha-role-info-card--student .tagline {
    color: #854a38
}

body[data-hb-page] .ha-role-info-card ul {
    list-style: none;
    padding: 0;
    margin: 0
}

body[data-hb-page] .ha-role-info-card li {
    display: flex;
    gap: .65rem;
    margin-bottom: .85rem;
    color: var(--hb-muted);
    font-size: .92rem;
    line-height: 1.55
}

body[data-hb-page] .ha-role-info-card li:last-child {
    margin-bottom: 0
}

body[data-hb-page] .ha-role-info-card li i {
    flex-shrink: 0;
    margin-top: .15rem;
    font-size: 1.05rem;
    color: var(--hb-primary-dark)
}

body[data-hb-page] .ha-role-info-card--student li i {
    color: #b45309
}

body[data-hb-page] .ha-section--muted {
    background: linear-gradient(180deg,transparent 0,rgba(15,23,42,.035) 42%,transparent 100%);
    border-radius: 0
}

body[data-hb-page] .ha-section {
    padding: clamp(2.5rem,4vw,4rem) 0
}

body[data-hb-page] .ha-section-head {
    text-align: center;
    margin-bottom: 1.6rem
}

body[data-hb-page] .ha-section-head .ha-chip {
    margin-bottom: .65rem
}

body[data-hb-page] .ha-section-head h2 {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    margin: .5rem 0 .45rem
}

body[data-hb-page] .ha-section-head p {
    color: var(--hb-muted);
    max-width: 64ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.65
}

body[data-hb-page=hesap-olustur] .ha-features {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1.1rem
}

body[data-hb-page] .ha-feature-item {
    background: #fff;
    border: 1px solid var(--hb-border);
    border-radius: 20px;
    padding: 1.25rem 1.15rem;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease;
    box-shadow: 0 8px 28px rgba(15,23,42,.05)
}

body[data-hb-page] .ha-feature-item::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--hb-grad);
    opacity: 0;
    transition: opacity .25s ease
}

body[data-hb-page] .ha-feature-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255,105,105,.26);
    box-shadow: 0 18px 48px rgba(15,23,42,.08),0 8px 24px rgba(255,105,105,.08)
}

body[data-hb-page] .ha-feature-item:hover::after {
    opacity: 1
}

body[data-hb-page] .ha-feature-item .ha-feature-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,var(--hb-primary-soft),#fff);
    border: 1px solid rgba(255,105,105,.22);
    margin-bottom: .75rem
}

body[data-hb-page] .ha-feature-item i {
    font-size: 1.2rem;
    color: var(--hb-primary-dark)
}

body[data-hb-page] .ha-feature-item h4 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em
}

body[data-hb-page] .ha-feature-item p {
    margin: 0;
    color: var(--hb-muted);
    font-size: .88rem;
    line-height: 1.55
}

body[data-hb-page] .ha-how-wrap {
    max-width: 920px;
    margin: 0 auto;
    position: relative
}

body[data-hb-page] .ha-how-list {
    display: grid;
    gap: 1rem
}

body[data-hb-page] .ha-how-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1rem;
    align-items: start;
    border: 1px solid var(--hb-border);
    border-radius: 20px;
    background: #fff;
    padding: 1.15rem 1.2rem;
    box-shadow: 0 8px 26px rgba(15,23,42,.045);
    transition: border-color .22s ease,box-shadow .22s ease
}

body[data-hb-page] .ha-how-item:hover {
    border-color: rgba(255,105,105,.22);
    box-shadow: 0 14px 40px rgba(15,23,42,.07)
}

body[data-hb-page] .ha-how-item .num {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    background: var(--hb-grad);
    box-shadow: 0 8px 22px rgba(255,105,105,.28),0 2px 6px rgba(15,23,42,.06)
}

body[data-hb-page] .ha-how-item h3 {
    margin: .1rem 0 .35rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em
}

body[data-hb-page] .ha-how-item p {
    margin: 0;
    color: var(--hb-muted);
    font-size: .93rem;
    line-height: 1.6
}

body[data-hb-page] .ha-how-item a {
    color: var(--hb-primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px
}

body[data-hb-page] .ha-faq {
    max-width: 860px;
    margin: 0 auto
}

body[data-hb-page] .ha-faq .accordion-item {
    border: 1px solid var(--hb-border)!important;
    border-radius: 18px!important;
    margin-bottom: .85rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 24px rgba(15,23,42,.04);
    transition: box-shadow .22s ease
}

body[data-hb-page] .ha-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
    box-shadow: 0 12px 36px rgba(15,23,42,.07),0 4px 16px rgba(255,105,105,.07);
    border-color: rgba(255,105,105,.18)!important
}

body[data-hb-page] .ha-faq .accordion-button {
    box-shadow: none!important;
    font-weight: 700;
    font-size: .98rem;
    color: var(--hb-text);
    padding: 1.1rem 1.25rem;
    line-height: 1.45
}

body[data-hb-page] .ha-faq .accordion-button:not(.collapsed) {
    color: var(--hb-primary-dark);
    background: linear-gradient(180deg,#fffbfb 0,#fff 100%)
}

body[data-hb-page] .ha-faq .accordion-button::after {
    filter: opacity(.65)
}

body[data-hb-page] .ha-faq .accordion-body {
    color: var(--hb-muted);
    font-size: .95rem;
    line-height: 1.65;
    padding: 0 1.25rem 1.15rem
}

body[data-hb-page] .ha-cta {
    margin-top: .6rem;
    background: linear-gradient(145deg,#1a2436 0,#131d2e 48%,#121a28 100%);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    padding: clamp(1.4rem,4vw,2.5rem);
    color: #fff;
    border: 1px solid rgba(255,255,255,.06)
}

body[data-hb-page] .ha-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 8% 35%,rgba(255,105,105,.32),transparent 38%),radial-gradient(circle at 88% 65%,rgba(255,120,110,.22),transparent 36%);
    pointer-events: none
}

body[data-hb-page] .ha-cta .content {
    position: relative;
    z-index: 2
}

body[data-hb-page] .ha-cta h2 {
    font-weight: 800;
    font-size: clamp(1.55rem, 3.2vw, 2.2rem);
    margin-bottom: .45rem
}

body[data-hb-page] .ha-cta p {
    color: rgba(255,255,255,.88);
    margin-bottom: 1rem
}

body[data-hb-page] .ha-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem
}

body[data-hb-page] .ha-social-links a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.34);
    transition: .22s ease
}

body[data-hb-page] .ha-social-links a:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.18);
    color: #fff
}

body[data-hb-page] .ha-footer-note {
    text-align: center;
    color: var(--hb-muted);
    font-size: .83rem;
    margin-top: 1rem
}

@media (max-width: 991.98px) {
    body[data-hb-page=hesap-olustur] .ha-role-split {
        grid-template-columns:1fr;
        min-height: auto
    }

    body[data-hb-page=hesap-olustur] .ha-role-info-grid {
        grid-template-columns: 1fr
    }

    body[data-hb-page=hesap-olustur] .ha-features {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 575.98px) {
    body[data-hb-page] .container {
        padding-left:1rem;
        padding-right: 1rem
    }

    body[data-hb-page=hesap-olustur] .ha-features {
        grid-template-columns: 1fr
    }

    body[data-hb-page=hesap-olustur] .ha-role-panel .ha-btn {
        width: 100%
    }

    body[data-hb-page] .ha-cta .ha-btn {
        width: 100%;
        justify-content: center
    }
}

body[data-hb-page=ders-almak-isteyenler] {
    --brand: #ff6969;
    --brand-soft: rgba(255, 105, 105, 0.12);
    --brand-hover: #f05555;
    --ink: #0f172a;
    --ink-muted: #475569;
    --muted: #64748b;
    --surface: #f1f5f9;
    --surface-elevated: #ffffff;
    --card: #ffffff;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 40px -12px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 20px 50px -20px rgba(15, 23, 42, 0.15)
}

body[data-hb-page=ders-almak-isteyenler] {
    margin: 0;
    font-family: "Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background: var(--surface);
    color: var(--ink-muted);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

body[data-hb-page=ders-almak-isteyenler] .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 96px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: clip;
    --dt-stack-gap: 1.75rem
}

@media (max-width: 639px) {
}

body[data-hb-page=ders-almak-isteyenler] .dt-hero {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: clamp(2rem,4.5vw,3.25rem) clamp(1.5rem,3.5vw,2.75rem);
    margin-bottom: 0;
    border: 1px solid rgba(255,105,105,.18);
    box-shadow: var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.92),0 0 0 1px rgba(255,255,255,.4);
    background: radial-gradient(ellipse 85% 70% at 100% 0,rgba(255,105,105,.11) 0,transparent 52%),radial-gradient(ellipse 70% 60% at 0 100%,rgba(99,102,241,.06) 0,transparent 50%),linear-gradient(168deg,#fff 0,snow 35%,#f8fafc 100%)
}

body[data-hb-page] .dt-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,var(--brand) 0,#ffb4b4 42%,rgba(99,102,241,.35) 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    pointer-events: none;
    z-index: 1
}

body[data-hb-page] .dt-hero::after {
    content: "";
    position: absolute;
    bottom: -38%;
    right: -12%;
    width: 52%;
    height: 88%;
    background: radial-gradient(circle,rgba(255,105,105,.055) 0,transparent 65%);
    pointer-events: none
}

body[data-hb-page=ders-almak-isteyenler] .dt-hero__row {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem,3vw,2rem)
}

body[data-hb-page=ders-almak-isteyenler] .dt-hero__copy {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 760px
}

body[data-hb-page=ders-almak-isteyenler] .dt-hero__cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

@media (max-width: 640px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-hero {
        padding:1.15rem 1rem 1.1rem
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-hero__row {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(.85rem,3.5vw,1.15rem)
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-hero__copy {
        flex-basis: auto
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-hero__cta {
        justify-content: stretch;
        margin-top: 0
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-btn-hero {
        width: 100%;
        justify-content: center
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-hero .dt-hero-lead {
        max-width: none;
        line-height: 1.5;
        letter-spacing: -.012em
    }
}

body[data-hb-page=ders-almak-isteyenler] .dt-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--ink);
    line-height: 1.14
}

body[data-hb-page=ders-almak-isteyenler] .dt-hero .dt-hero-lead {
    margin: 0;
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.55;
    max-width: 62ch
}

body[data-hb-page] .dt-hero-lead a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,105,105,.35);
    transition: color .15s ease,border-color .15s ease
}

body[data-hb-page] .dt-hero-lead a:hover {
    color: var(--brand-hover);
    border-bottom-color: rgba(240,85,85,.65)
}

body[data-hb-page] .dt-hero-lead a:focus-visible {
    outline: 2px solid rgba(255,105,105,.45);
    outline-offset: 3px;
    border-radius: 2px
}

@media (max-width: 640px) {
    body[data-hb-page] .dt-hero-lead__continue {
        display:block;
        margin-top: .75rem
    }
}

@media (min-width: 641px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-hero .dt-hero-lead {
        font-size:.9rem;
        max-width: min(68ch,100%)
    }
}

body[data-hb-page] .dt-hero-actions {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

body[data-hb-page=ders-almak-isteyenler] .dt-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 12px 32px -8px rgba(255,105,105,.55);
    transition: transform .2s,box-shadow .2s;
    white-space: nowrap
}

body[data-hb-page] .dt-btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -8px rgba(255,105,105,.6);
    color: #fff
}

body[data-hb-page] .dt-btn-hero:focus-visible {
    outline: 2px solid rgba(255,105,105,.55);
    outline-offset: 3px
}

@media (max-width: 640px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-hero h1 {
        margin-bottom:8px;
        font-size: 1.55rem
    }
}

body[data-hb-page=ders-almak-isteyenler] #dtSamplesSection {
    scroll-margin-top: 88px
}

@media (max-width: 640px) {
    body[data-hb-page=ders-almak-isteyenler] #dtSamplesSection {
        scroll-margin-top:76px
    }
}

body[data-hb-page] .page .dt-ai {
    margin-top: var(--dt-stack-gap);
    margin-bottom: var(--dt-stack-gap)
}

body[data-hb-page] .page .dt-samples-section {
    margin-top: 0
}

body[data-hb-page] .page .dt-section-intro {
    margin-bottom: var(--dt-stack-gap)
}

body[data-hb-page] .page .dt-how {
    margin-top: var(--dt-stack-gap)
}

body[data-hb-page=ders-almak-isteyenler] .dt-section-intro {
    margin-bottom: clamp(1.5rem,3vw,2rem);
    padding: clamp(1.35rem,2.8vw,1.85rem) clamp(1.35rem,2.8vw,2.1rem);
    padding-left: clamp(1.35rem,2.8vw,2.1rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg,rgba(255,255,255,.97) 0,#fff 40%,#fafbfc 100%);
    border: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 8px 32px -16px rgba(15,23,42,.1),0 2px 8px -4px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.95);
    position: relative;
    overflow: hidden
}

body[data-hb-page=ders-almak-isteyenler] .dt-section-intro::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 5px 0 0 5px;
    background: linear-gradient(180deg,var(--brand) 0,#ff9a9a 55%,#fecaca 100%);
    box-shadow: 2px 0 12px rgba(255,105,105,.2)
}

body[data-hb-page] .dt-section-intro::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,rgba(255,105,105,.35) 0,transparent 55%);
    pointer-events: none
}

body[data-hb-page=ders-almak-isteyenler] .dt-section-intro .dt-section-desc,body[data-hb-page=ders-almak-isteyenler] .dt-section-intro .dt-section-title {
    position: relative;
    z-index: 1;
    padding-left: 10px
}

@media (min-width: 640px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-section-intro {
        padding-left:clamp(1.65rem,3vw,2.25rem)
    }
}

body[data-hb-page] .dt-section-title {
    font-size: clamp(1.3rem, 3vw, 1.58rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.032em;
    line-height: 1.22
}

body[data-hb-page=ders-almak-isteyenler] .dt-section-desc {
    margin: .7rem 0 0;
    font-size: .93rem;
    color: var(--muted);
    line-height: 1.58;
    max-width: 42rem
}

body[data-hb-page] .dt-section-desc a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,105,105,.35);
    transition: color .15s ease,border-color .15s ease
}

body[data-hb-page] .dt-section-desc a:hover {
    color: var(--brand-hover);
    border-bottom-color: rgba(240,85,85,.65)
}

body[data-hb-page] .dt-section-desc a:focus-visible {
    outline: 2px solid rgba(255,105,105,.45);
    outline-offset: 3px;
    border-radius: 2px
}

body[data-hb-page=ders-almak-isteyenler] .dt-section-intro--compact {
    display: flex;
    align-items: center;
    gap: clamp(.85rem,2.2vw,1.2rem);
    padding: clamp(1rem,2.2vw,1.35rem) clamp(1.2rem,2.8vw,1.85rem);
    background: radial-gradient(ellipse 120% 80% at 100% 0,rgba(255,105,105,.09) 0,transparent 52%),radial-gradient(ellipse 90% 70% at 0 100%,rgba(99,102,241,.04) 0,transparent 48%),linear-gradient(165deg,#fff 0,rgba(255,252,252,.97) 42%,#f8fafc 100%);
    border: 1px solid rgba(255,105,105,.14);
    box-shadow: 0 10px 40px -18px rgba(255,105,105,.18),0 8px 28px -14px rgba(15,23,42,.08),0 2px 8px -4px rgba(15,23,42,.05),inset 0 1px 0 rgba(255,255,255,.98)
}

body[data-hb-page] .dt-section-intro--compact::after {
    height: 3px;
    background: linear-gradient(90deg,var(--brand) 0,rgba(255,154,154,.65) 38%,transparent 72%);
    opacity: 1
}

body[data-hb-page] .dt-section-intro__icon {
    flex-shrink: 0;
    width: clamp(44px,8vw,52px);
    height: clamp(44px,8vw,52px);
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: clamp(1.2rem, 2.8vw, 1.45rem);
    color: var(--brand);
    background: linear-gradient(155deg,rgba(255,105,105,.14) 0,rgba(255,255,255,.95) 100%);
    border: 1px solid rgba(255,105,105,.22);
    box-shadow: 0 4px 14px -4px rgba(255,105,105,.35),inset 0 1px 0 rgba(255,255,255,.9)
}

body[data-hb-page] .dt-section-intro__headlines {
    min-width: 0;
    flex: 1
}

body[data-hb-page=ders-almak-isteyenler] .dt-section-intro--compact .dt-section-title {
    margin: 0;
    padding-left: 0;
    font-size: clamp(1.22rem, 2.8vw, 1.48rem);
    letter-spacing: -.038em;
    color: var(--ink)
}

@media (max-width: 639px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-section-intro {
        text-align:left;
        padding: 1.15rem 1rem 1.2rem 1.1rem
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-section-intro--compact {
        padding: 1rem 1rem 1.05rem 1rem;
        gap: .75rem
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-section-intro::before {
        display: block;
        width: 4px
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-section-intro .dt-section-desc,body[data-hb-page=ders-almak-isteyenler] .dt-section-intro .dt-section-title {
        padding-left: 8px
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-section-intro--compact .dt-section-title {
        padding-left: 0
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-section-desc {
        margin-left: 0;
        margin-right: 0;
        font-size: .88rem;
        line-height: 1.5
    }
}

body[data-hb-page] .dt-section-lead {
    margin: 0 0 20px;
    font-size: .95rem;
    color: var(--ink-muted)
}

body[data-hb-page] .dt-sample-list-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    min-width: 0
}

body[data-hb-page] .dt-sample-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(165deg,#fff 0,#f8fafc 55%,#fff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.9);
    transition: border-color .25s ease,box-shadow .25s ease,transform .2s ease
}

body[data-hb-page] .dt-sample-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--brand),#ffc9c9);
    pointer-events: none
}

body[data-hb-page] .dt-sample-card::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -8%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle,rgba(255,105,105,.07) 0,transparent 68%);
    pointer-events: none
}

body[data-hb-page] .dt-sample-card:hover {
    border-color: rgba(255,105,105,.32);
    box-shadow: 0 22px 56px -28px rgba(15,23,42,.12),0 0 0 1px rgba(255,105,105,.1);
    transform: translateY(-3px)
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 1.25rem clamp(1.1rem,2.5vw,1.6rem) 1.05rem;
    border-bottom: 1px solid rgba(226,232,240,.85);
    background: linear-gradient(180deg,rgba(255,255,255,.99) 0,rgba(241,245,249,.45) 100%)
}

@media (min-width: 521px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__head {
        align-items:center
    }
}

body[data-hb-page] .dt-sample-card__title {
    margin: 0;
    font-size: clamp(.95rem, 2vw, 1.08rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.3;
    flex: 1;
    min-width: 0
}

body[data-hb-page] .dt-btn-respond {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,105,105,.45);
    background: #fff;
    color: var(--brand);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s,color .2s,border-color .2s,box-shadow .2s
}

body[data-hb-page] .dt-btn-respond:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: #e85555
}

body[data-hb-page] .dt-btn-respond--mobile {
    display: none
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__mobile-cta .dt-btn-respond--mobile {
    display: inline-flex!important
}

body[data-hb-page] .dt-btn-respond--primary {
    padding: 9px 14px;
    border: none;
    border-radius: 12px;
    font-size: .8125rem;
    font-weight: 800;
    color: #fff!important;
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    box-shadow: 0 8px 20px -6px rgba(255,105,105,.55)
}

body[data-hb-page] .dt-btn-respond--primary:hover {
    background: linear-gradient(135deg,var(--brand-hover) 0,#ff6969 100%);
    color: #fff!important;
    box-shadow: 0 12px 28px -6px rgba(255,105,105,.6)
}

@media (max-width: 520px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__head {
        flex-direction:column;
        align-items: stretch
    }

    body[data-hb-page] .dt-btn-respond--head {
        display: none!important
    }
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__tiles {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(132px,1fr));
    gap: 10px;
    padding: .95rem clamp(.85rem,2vw,1.25rem) .85rem
}

@media (min-width: 640px) and (max-width:899px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__tiles {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 900px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__tiles {
        grid-template-columns:repeat(3,1fr)
    }
}

@media (max-width: 639px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__tiles {
        grid-template-columns:1fr;
        gap: 8px;
        padding: .75rem .75rem .65rem
    }
}

body[data-hb-page] .dt-sample-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg,#fff 0,#f8fafc 100%);
    border: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 1px 3px rgba(15,23,42,.04),inset 0 1px 0 #fff;
    transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease
}

body[data-hb-page] .dt-sample-card:hover .dt-sample-tile {
    border-color: rgba(255,105,105,.22);
    box-shadow: 0 4px 14px -4px rgba(15,23,42,.08)
}

body[data-hb-page] .dt-sample-card:hover .dt-sample-tile:hover {
    transform: translateY(-1px)
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-tile__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.05rem;
    color: var(--brand);
    background: linear-gradient(145deg,var(--brand-soft) 0,rgba(255,105,105,.06) 100%);
    border: 1px solid rgba(255,105,105,.2)
}

body[data-hb-page] .dt-sample-tile__body {
    min-width: 0
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-tile__label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: none;
    letter-spacing: .01em;
    line-height: 1.25
}

@media (max-width: 639px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-tile__label {
        font-size:.72rem
    }
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-tile__value {
    display: block;
    margin-top: 3px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35
}

@media (max-width: 639px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-tile__value {
        font-size:.8rem
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-sample-tile__icon {
        width: 34px;
        height: 34px;
        font-size: .95rem
    }
}

body[data-hb-page] .dt-sample-card__note {
    position: relative;
    z-index: 1;
    margin: 0 clamp(.85rem,2vw,1.25rem) .75rem;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg,rgba(255,105,105,.06) 0,rgba(248,250,252,.95) 100%);
    border: 1px solid rgba(255,105,105,.2);
    border-left: 4px solid var(--brand)
}

body[data-hb-page] .dt-sample-card__note-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: .35rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(255,105,105,.12);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--brand)
}

body[data-hb-page] .dt-sample-card__note-head i {
    font-size: 1.05rem
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__note-text {
    margin: 0;
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink-muted);
    line-height: 1.55
}

@media (max-width: 639px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__note-text {
        font-size:.8rem
    }
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px clamp(.85rem,2vw,1.25rem) .65rem;
    border-top: 1px solid #f1f5f9;
    background: linear-gradient(180deg,rgba(248,250,252,.5) 0,rgba(255,255,255,.85) 100%)
}

@media (min-width: 521px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__foot {
        padding-bottom:.85rem
    }
}

body[data-hb-page] .dt-sample-card__time {
    font-size: .76rem;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px
}

body[data-hb-page] .dt-sample-card__time i {
    color: var(--brand);
    font-size: 1.05rem
}

body[data-hb-page] .dt-sample-card__foot p {
    margin: 0
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__mobile-cta {
    display: block;
    padding: .5rem clamp(.85rem,2vw,1.25rem) .85rem;
    width: 100%;
    box-sizing: border-box;
    min-width: 0
}

body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__mobile-cta .dt-btn-respond--mobile {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    margin: 0
}

@media (min-width: 521px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card__mobile-cta {
        display:none!important
    }
}

@media (max-width: 639px) {
    body[data-hb-page] .page .dt-sample-card__foot {
        justify-content:flex-start;
        align-items: flex-start
    }

    body[data-hb-page] .page .dt-sample-card__time {
        justify-content: flex-start;
        align-self: flex-start;
        width: 100%;
        text-align: left
    }
}

body[data-hb-page] .dt-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 14px 12px;
    border-radius: var(--radius-lg);
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow)
}

body[data-hb-page] .dt-pagination__info {
    width: 100%;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px
}

body[data-hb-page] .dt-pagination__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px
}

body[data-hb-page] #dtPageNumbers {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px
}

body[data-hb-page] .dt-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s,border-color .2s,color .2s
}

body[data-hb-page] .dt-page-btn:hover:not(:disabled) {
    border-color: rgba(255,105,105,.45);
    color: var(--brand);
    background: #fffafb
}

body[data-hb-page] .dt-page-btn:disabled {
    opacity: .45;
    cursor: not-allowed
}

body[data-hb-page] .dt-page-num {
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s,border-color .2s,color .2s
}

body[data-hb-page] .dt-page-num:hover {
    border-color: rgba(255,105,105,.35);
    color: var(--brand)
}

body[data-hb-page] .dt-page-num.is-active {
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(255,105,105,.45)
}

body[data-hb-page] .dt-page-num:disabled {
    cursor: default;
    opacity: 1
}

body[data-hb-page] .dt-ai {
    border-radius: var(--radius-lg);
    padding: clamp(1.65rem,4.2vw,2.25rem);
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.45);
    background: linear-gradient(145deg,rgba(15,23,42,.22) 0,transparent 42%),linear-gradient(125deg,#e85d7a 0,#a855f7 38%,#6366f1 68%,#0ea5e9 100%);
    color: #fff;
    box-shadow: 0 4px 0 rgba(255,255,255,.12) inset,0 24px 56px -18px rgba(99,102,241,.45),0 18px 48px -24px rgba(232,93,122,.35)
}

body[data-hb-page] .dt-ai::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -20%;
    width: 70%;
    height: 120%;
    background: radial-gradient(circle,rgba(255,255,255,.28) 0,transparent 55%);
    pointer-events: none;
    animation: dt-ai-shimmer 8s ease-in-out infinite alternate
}

body[data-hb-page] .dt-ai::after {
    content: "✨";
    position: absolute;
    font-size: clamp(2.5rem, 8vw, 4rem);
    right: 8%;
    bottom: 12%;
    opacity: .35;
    filter: blur(.5px);
    animation: dt-ai-bounce 2.5s ease-in-out infinite;
    pointer-events: none
}

@keyframes dt-ai-shimmer {
    0% {
        transform: translate(0,0) rotate(0);
        opacity: .4
    }

    100% {
        transform: translate(12%,8%) rotate(6deg);
        opacity: .65
    }
}

@keyframes dt-ai-bounce {
    0%,100% {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-10px) scale(1.08)
    }
}

body[data-hb-page=ders-almak-isteyenler] .dt-ai__grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 18px;
    align-items: center
}

@media (min-width: 768px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-ai__grid {
        grid-template-columns:auto 1fr;
        gap: 28px
    }
}

body[data-hb-page] .dt-ai__orb {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.3);
    border: 2px solid rgba(255,255,255,.65);
    font-size: 2.25rem;
    color: #fff;
    box-shadow: 0 12px 36px rgba(15,23,42,.2);
    animation: dt-ai-wiggle 4s ease-in-out infinite
}

@keyframes dt-ai-wiggle {
    0%,100% {
        transform: rotate(-3deg)
    }

    50% {
        transform: rotate(3deg)
    }
}

body[data-hb-page] .dt-ai h2 {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 3.4vw, 1.75rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.2;
    text-shadow: 0 2px 14px rgba(15,23,42,.35)
}

body[data-hb-page] .dt-ai p {
    margin: 0;
    font-size: clamp(.94rem, 2vw, 1.02rem);
    color: rgba(255,255,255,.98);
    line-height: 1.68;
    max-width: 52ch;
    text-shadow: 0 1px 6px rgba(15,23,42,.25)
}

body[data-hb-page] .dt-how {
    margin-bottom: clamp(2.5rem,5vw,3.5rem);
    padding-top: clamp(.25rem,1.5vw,.75rem)
}

body[data-hb-page] .dt-how__head {
    margin-bottom: clamp(1.75rem,3.5vw,2.5rem);
    padding: clamp(2rem,4.5vw,3rem) clamp(1.35rem,3.5vw,2.25rem);
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 1px solid rgba(226,232,240,.95);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md),0 1px 0 rgba(255,255,255,.9) inset
}

body[data-hb-page] .dt-how__title {
    margin: 0;
    font-size: clamp(1.55rem, 3.8vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.22;
    color: var(--ink)
}

body[data-hb-page] .dt-how__head-rule {
    display: block;
    width: 72px;
    height: 3px;
    margin: clamp(1rem,2.5vw,1.25rem) auto clamp(1rem,2.5vw,1.2rem);
    border-radius: 999px;
    background: linear-gradient(90deg,var(--brand) 0,#ff9d9d 50%,#ffb4b4 100%);
    box-shadow: 0 2px 8px rgba(255,105,105,.35)
}

body[data-hb-page] .dt-how__head-lead {
    margin: 0 auto;
    max-width: 42ch;
    font-size: clamp(.98rem, 2.2vw, 1.08rem);
    font-weight: 500;
    line-height: 1.55;
    color: var(--muted)
}

body[data-hb-page=ders-almak-isteyenler] .dt-how-grid {
    display: grid;
    gap: 18px;
    position: relative
}

@media (min-width: 900px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-how-grid {
        grid-template-columns:repeat(4,1fr);
        gap: 0
    }

    body[data-hb-page] .dt-how-grid::before {
        content: "";
        position: absolute;
        top: 52px;
        left: 8%;
        right: 8%;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg,transparent,var(--brand-soft) 15%,var(--brand) 50%,var(--brand-soft) 85%,transparent);
        opacity: .65;
        pointer-events: none
    }
}

body[data-hb-page=ders-almak-isteyenler] .dt-how-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    box-shadow: var(--shadow);
    transition: transform .2s ease,border-color .2s ease,box-shadow .25s ease;
    position: relative;
    z-index: 1
}

@media (min-width: 900px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-how-card {
        margin:0 8px
    }
}

body[data-hb-page] .dt-how-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,105,105,.28);
    box-shadow: var(--shadow-lg)
}

body[data-hb-page] .dt-how-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,var(--brand-soft) 0,rgba(255,105,105,.06) 100%);
    border: 1px solid rgba(255,105,105,.2);
    color: var(--brand);
    font-size: 1.35rem;
    margin-bottom: 12px
}

body[data-hb-page] .dt-how-card__num {
    font-size: .7rem;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: .06em;
    margin-bottom: 6px
}

body[data-hb-page] .dt-how-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink)
}

body[data-hb-page] .dt-how-card p {
    margin: 0;
    font-size: .86rem;
    color: var(--ink-muted);
    line-height: 1.6
}

body[data-hb-page] .page>.section {
    margin-top: var(--dt-stack-gap)
}

body[data-hb-page] .page>.section:first-child {
    margin-top: 0 !important;
}

@media (max-width: 959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 639px) {
}

@media (max-width: 479px) {
}

body[data-hb-page=ders-almak-isteyenler] .dt-demo {
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    font-size: .82rem;
    color: #475569;
    line-height: 1.65
}

body[data-hb-page] .dt-modal-overlay .dt-modal.dt-modal--wide {
    max-width: 840px
}

body[data-hb-page=ders-almak-isteyenler] .dt-modal--success::before {
    background: linear-gradient(90deg,#22c55e,#86efac)
}

body[data-hb-page=ders-almak-isteyenler] .dt-modal--warning::before {
    background: linear-gradient(90deg,#f59e0b,#fcd34d)
}

body[data-hb-page] .dt-modal--danger::before {
    background: linear-gradient(90deg,#ef4444,#fca5a5)
}

body[data-hb-page] .dt-modal--neutral::before {
    background: linear-gradient(90deg,#64748b,#cbd5e1)
}

body[data-hb-page] .dt-modal.dt-modal--credit.dt-modal--danger::before {
    background: linear-gradient(90deg,#ef4444,#fca5a5)
}

body[data-hb-page=ders-almak-isteyenler] .dt-modal__head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(241,245,249,.95);
    background: linear-gradient(180deg,rgba(255,255,255,.98) 0,rgba(248,250,252,.6) 100%)
}

body[data-hb-page=ders-almak-isteyenler] .dt-modal__close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--ink-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    transition: background .2s,color .2s,transform .2s
}

body[data-hb-page] .dt-modal__close:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

body[data-hb-page=ders-almak-isteyenler] .dt-modal__body {
    padding: 22px 22px 24px;
    overflow-y: auto;
    flex: 1
}

body[data-hb-page] .dt-modal__body--form {
    max-height: calc(92vh - 120px);
    padding-top: 18px
}

body[data-hb-page=ders-almak-isteyenler] .dt-modal__message-block {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 4px
}

body[data-hb-page] .dt-modal__message-block:last-child {
    margin-bottom: 0
}

body[data-hb-page] .dt-modal__icon-ring--brand {
    background: linear-gradient(145deg,var(--brand-soft),rgba(255,105,105,.08));
    color: var(--brand);
    border-color: rgba(255,105,105,.22)
}

body[data-hb-page] .dt-modal__icon-ring--info {
    background: linear-gradient(145deg,#e0f2fe,#f0f9ff);
    color: #0284c7;
    border-color: rgba(14,165,233,.25)
}

body[data-hb-page] .dt-modal__icon-ring--danger {
    background: linear-gradient(145deg,#fee2e2,#fef2f2);
    color: #dc2626;
    border-color: rgba(239,68,68,.3)
}

body[data-hb-page] .dt-modal__text .dt-auth-note {
    margin-bottom: 0
}

body[data-hb-page=ders-almak-isteyenler] .dt-modal-form .dt-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    align-items: start
}

@media (max-width: 640px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-modal-form .dt-form-grid {
        grid-template-columns:1fr;
        gap: 10px 0
    }
}

body[data-hb-page] .dt-modal-form .dt-form-cell {
    min-width: 0;
    margin-bottom: 0
}

body[data-hb-page] .dt-modal-form .dt-form-cell .hb-combo {
    margin-bottom: 0
}

body[data-hb-page] .dt-modal-form .dt-form-cell .dt-err {
    margin-bottom: 10px
}

body[data-hb-page] .dt-modal-form .dt-form-cell--full {
    grid-column: 1/-1
}

body[data-hb-page] .dt-modal-form .dt-form-cell--full .dt-textarea {
    margin-bottom: 4px
}

body[data-hb-page] .dt-auth-note {
    font-size: .95rem;
    color: var(--ink-muted);
    line-height: 1.68;
    margin: 0 0 18px
}

body[data-hb-page] .dt-auth-note strong {
    color: var(--ink);
    font-weight: 800
}

body[data-hb-page] .dt-modal-callout {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid transparent
}

body[data-hb-page] .dt-modal-callout--danger {
    background: linear-gradient(135deg,#fef2f2 0,#fff7ed 100%);
    border-color: rgba(239,68,68,.35);
    color: #991b1b
}

body[data-hb-page] .dt-modal-callout--danger i {
    vertical-align: -.1em;
    margin-right: 6px;
    color: #dc2626
}

body[data-hb-page] .dt-modal-callout--amber {
    background: linear-gradient(135deg,#fffbeb 0,#fef3c7 100%);
    border-color: rgba(245,158,11,.4);
    color: #92400e
}

body[data-hb-page] .dt-modal-callout--amber i {
    margin-right: 6px;
    color: #d97706
}

body[data-hb-page=ders-almak-isteyenler] .dt-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px
}

body[data-hb-page=ders-almak-isteyenler] .dt-auth-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    text-align: center;
    transition: transform .15s,box-shadow .15s
}

body[data-hb-page=ders-almak-isteyenler] .dt-auth-actions a.primary {
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    color: #fff;
    box-shadow: 0 10px 28px -6px rgba(255,105,105,.55)
}

body[data-hb-page] .dt-auth-actions a.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -6px rgba(255,105,105,.6);
    color: #fff
}

body[data-hb-page=ders-almak-isteyenler] .dt-auth-actions a.secondary {
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--border)
}

body[data-hb-page] .dt-auth-actions a.secondary:hover {
    border-color: #cbd5e1;
    background: #f8fafc
}

body[data-hb-page] .dt-modal__title--credit {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em
}

body[data-hb-page] .dt-modal--credit .dt-modal__body {
    padding-bottom: 26px
}

body[data-hb-page] .dt-modal--credit .dt-auth-note {
    margin-bottom: .75rem!important;
    text-align: left
}

body[data-hb-page] .dt-credit-warn {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg,#fef2f2 0,#fff7ed 100%);
    border: 1px solid rgba(239,68,68,.35);
    font-size: .88rem;
    font-weight: 700;
    color: #991b1b;
    text-align: left;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 10px
}

body[data-hb-page] .dt-credit-warn i {
    flex-shrink: 0;
    font-size: 1.15rem;
    margin-top: 2px;
    color: #dc2626
}

body[data-hb-page] .dt-credit-warn span {
    flex: 1;
    min-width: 0
}

body[data-hb-page] .dt-modal__message-block+.dt-modal-callout {
    margin-top: 16px
}

body[data-hb-page] .dt-btn-credit-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 18px;
    border-radius: 12px;
    border: 2px solid #15803d;
    background: linear-gradient(180deg,#4ade80 0,#22c55e 100%);
    color: #052e16!important;
    font-weight: 800;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(34,197,94,.35)
}

body[data-hb-page] .dt-btn-credit-ok:hover {
    filter: brightness(1.05);
    color: #052e16!important
}

body[data-hb-page] .dt-btn-credit-cancel {
    width: 100%;
    padding: 12px 18px;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink);
    cursor: pointer
}

body[data-hb-page] .dt-btn-credit-cancel:hover {
    border-color: #cbd5e1;
    background: #f8fafc
}

body[data-hb-page] .dt-modal-overlay .dt-modal.dt-modal--detail {
    max-width: 640px
}

body[data-hb-page=ders-almak-isteyenler] .dt-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 16px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px
}

@media (max-width: 480px) {
    body[data-hb-page=ders-almak-isteyenler] .dt-detail-top {
        flex-direction:column;
        align-items: stretch
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-detail-actions {
        justify-content: space-between;
        width: 100%
    }
}

body[data-hb-page] .dt-detail-name {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -.03em
}

body[data-hb-page] .dt-detail-sub {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-muted)
}

body[data-hb-page=ders-almak-isteyenler] .dt-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

body[data-hb-page] .dt-detail-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .82rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2
}

body[data-hb-page] .dt-detail-primary-btn--wa {
    background: #25d366;
    color: #fff!important;
    box-shadow: 0 6px 16px rgba(37,211,102,.35)
}

body[data-hb-page] .dt-detail-primary-btn--wa:hover {
    filter: brightness(1.06);
    color: #fff!important
}

body[data-hb-page] .dt-detail-primary-btn--phone {
    background: linear-gradient(180deg,#38bdf8 0,#0ea5e9 100%);
    color: #fff!important;
    box-shadow: 0 6px 16px rgba(14,165,233,.35)
}

body[data-hb-page] .dt-detail-primary-btn--phone:hover {
    filter: brightness(1.05);
    color: #fff!important
}

body[data-hb-page] .dt-detail-primary-btn--msg {
    background: linear-gradient(180deg,#818cf8 0,#6366f1 100%);
    color: #fff!important;
    box-shadow: 0 6px 16px rgba(99,102,241,.35)
}

body[data-hb-page] .dt-detail-primary-btn--msg:hover {
    filter: brightness(1.05);
    color: #fff!important
}

body[data-hb-page] .dt-detail-primary-btn.is-disabled {
    opacity: .45;
    pointer-events: none
}

body[data-hb-page] .dt-modal__body--detail {
    padding-top: 18px;
    max-height: min(85vh,880px)
}

body[data-hb-page] .dt-modal--detail .dt-modal__head h3 {
    font-size: 1.05rem;
    color: var(--muted);
    font-weight: 700
}

body[data-hb-page] .dt-detail-sheet {
    margin-top: 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg,#fafbfc 0,#fff 40%);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(15,23,42,.06)
}

body[data-hb-page] .dt-detail-sheet__title {
    margin: 0;
    padding: 12px 16px;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--muted);
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9
}

body[data-hb-page] .dt-detail-rows {
    list-style: none;
    margin: 0;
    padding: 8px 0
}

body[data-hb-page] .dt-detail-rows li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    font-size: .88rem;
    color: var(--ink);
    border-bottom: 1px solid #f8fafc
}

body[data-hb-page] .dt-detail-rows li:last-child {
    border-bottom: none
}

body[data-hb-page] .dt-detail-rows i {
    color: #ff6969;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0
}

body[data-hb-page] .dt-detail-rows strong {
    color: #64748b;
    font-weight: 600;
    font-size: .75rem;
    display: block;
    margin-bottom: 2px
}

body[data-hb-page] .dt-detail-notebox {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--brand-soft);
    border: 1px solid rgba(255,105,105,.2)
}

body[data-hb-page] .dt-detail-notebox__label {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--brand);
    margin-bottom: 6px
}

body[data-hb-page] .dt-detail-notebox p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink)
}

body[data-hb-page] .dt-detail-contact {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed #cbd5e1;
    background: #fff
}

body[data-hb-page] .dt-detail-contact h4 {
    margin: 0 0 10px;
    font-size: .85rem;
    font-weight: 800;
    color: var(--ink)
}

body[data-hb-page] .dt-detail-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink)
}

body[data-hb-page] .dt-detail-contact-row i {
    color: #ff6969
}

body[data-hb-page] .dt-detail-phone-blur {
    display: inline-block;
    max-width: 100%;
    filter: blur(7px);
    -webkit-filter: blur(7px);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    opacity: .88;
    letter-spacing: .04em
}

body[data-hb-page] #modalForm .hb-combo {
    margin-bottom: 0
}

body[data-hb-page] #dtFormLocWrap[hidden] {
    display: none!important
}

body[data-hb-page=ders-almak-isteyenler] .hb-combo {
    position: relative;
    min-width: 0;
    margin-bottom: 14px
}

body[data-hb-page=ders-almak-isteyenler] .hb-combo__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page=ders-almak-isteyenler] .hb-combo__trigger:hover {
    border-color: #cbd5e1
}

body[data-hb-page] .hb-combo__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

body[data-hb-page] .hb-combo__label.is-placeholder {
    color: #94a3b8;
    font-weight: 500
}

body[data-hb-page] .hb-combo__chev {
    color: #94a3b8;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform .2s
}

body[data-hb-page=ders-almak-isteyenler] .hb-combo__dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
    padding: 10px;
    max-height: min(320px,55vh);
    flex-direction: column;
    gap: 8px
}

body[data-hb-page=ders-almak-isteyenler] .hb-combo__list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    overflow-y: auto;
    max-height: 220px
}

body[data-hb-page] .hb-combo__empty {
    list-style: none;
    padding: 12px;
    font-size: 13px;
    color: #94a3b8;
    text-align: center
}

body[data-hb-page] .hb-combo.is-disabled .hb-combo__trigger {
    opacity: .55;
    pointer-events: none
}

body[data-hb-page] .dt-form-label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px
}

body[data-hb-page] .dt-form-label .req {
    color: var(--brand)
}

body[data-hb-page] .dt-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: .9rem;
    resize: vertical
}

body[data-hb-page] .dt-textarea:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

body[data-hb-page] .dt-submit {
    width: 100%;
    margin-top: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--brand) 0,#ff8585 100%);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(255,105,105,.35)
}

body[data-hb-page] .dt-submit:hover {
    filter: brightness(1.03)
}

body[data-hb-page] .dt-err {
    font-size: .78rem;
    color: #dc2626;
    margin-top: 4px;
    display: none
}

body[data-hb-page] .dt-err.is-visible {
    display: block
}

@media (prefers-reduced-motion:reduce) {
    body[data-hb-page] .dt-ai::after,body[data-hb-page] .dt-ai::before,body[data-hb-page] .dt-ai__orb {
        animation: none!important
    }

    body[data-hb-page=ders-almak-isteyenler] .faq-panel {
        transition-duration: 0s!important
    }

    body[data-hb-page=ders-almak-isteyenler] .faq-trigger i {
        transition-duration: 0s!important
    }

    body[data-hb-page=ders-almak-isteyenler] .dt-sample-card {
        transition-duration: 0s!important
    }

    body[data-hb-page] .dt-modal-overlay,body[data-hb-page] .dt-modal-overlay .dt-modal {
        transition-duration: 0s!important
    }
}

body[data-hb-page=hakkimizda] {
    --hk-ink: #0f172a;
    --hk-coral: #ff6969;
    --hk-coral-soft: rgba(255, 105, 105, 0.12);
    --hk-muted: #64748b;
    --hk-surface: #f1f5f9;
    --hk-card: #ffffff;
    --hk-border: #e2e8f0;
    --hk-radius: 22px;
    --hk-radius-sm: 14px;
    --linkedin-color: #0a66c2;
    --brand: var(--hk-coral);
    --brand-soft: var(--hk-coral-soft);
    --brand-hover: #f05555;
    --ink: var(--hk-ink);
    --ink-muted: #475569;
    --muted: var(--hk-muted);
    --border: var(--hk-border);
    --surface: var(--hk-surface);
    --surface-elevated: #ffffff;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04)
}

body[data-hb-page=hakkimizda] {
    margin: 0;
    font-family: "Plus Jakarta Sans",system-ui,sans-serif;
    background: var(--hk-surface);
    color: var(--hk-muted);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

body[data-hb-page=hakkimizda] .hk-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 72px;
    width: 100%
}

@media (max-width: 639px) {
    body[data-hb-page=hakkimizda] .hk-page {
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right: max(16px,env(safe-area-inset-right));
        padding-bottom: 56px
    }
}

body[data-hb-page] .hk-section {
    margin-bottom: 20px
}

body[data-hb-page] .hk-section:last-child {
    margin-bottom: 0
}

body[data-hb-page=hakkimizda] .hk-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: var(--hk-radius);
    overflow: hidden;
    border: 1px solid var(--hk-border);
    box-shadow: 0 4px 6px -1px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.04);
    background: var(--hk-card)
}

@media (min-width: 992px) {
    body[data-hb-page=hakkimizda] .hk-hero {
        grid-template-columns:1.05fr 0.95fr;
        min-height: 420px
    }
}

body[data-hb-page] .hk-hero__copy {
    padding: clamp(1.75rem,4vw,2.75rem);
    background: radial-gradient(120% 80% at 0 0,rgba(255,105,105,.14) 0,transparent 55%),linear-gradient(165deg,#0f172a 0,#1e293b 48%,#0f172a 100%);
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

body[data-hb-page] .hk-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(255,105,105,.18);
    color: #fecaca;
    margin-bottom: 1.25rem
}

body[data-hb-page] .hk-hero__copy h1 {
    margin: 0 0 1.1rem;
    font-size: clamp(1.85rem, 4vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
    color: #f8fafc
}

body[data-hb-page] .hk-hero__copy h1 .hk-gradient {
    background: linear-gradient(105deg,#fda4af 0,#ff6969 45%,#fb7185 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

body[data-hb-page] .hk-hero__copy p {
    margin: 0 0 1.75rem;
    font-size: .98rem;
    color: #cbd5e1;
    max-width: 38rem
}

body[data-hb-page] .hk-hero__copy p strong {
    color: #f1f5f9
}

body[data-hb-page] .hk-hero__copy p .hk-accent {
    color: var(--hk-coral);
    font-weight: 700
}

body[data-hb-page] .hk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

body[data-hb-page] .hk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.35rem;
    font-size: .9rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: var(--hk-radius-sm);
    text-decoration: none;
    transition: transform .2s ease,box-shadow .2s ease,background .2s ease;
    border: none;
    cursor: pointer
}

body[data-hb-page] .hk-btn--coral {
    background: var(--hk-coral);
    color: #fff;
    box-shadow: 0 12px 28px -8px rgba(255,105,105,.55)
}

body[data-hb-page] .hk-btn--coral:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -8px rgba(255,105,105,.6);
    color: #fff
}

body[data-hb-page] .hk-btn--ghost {
    background: rgba(255,255,255,.08);
    color: #f8fafc;
    border: 1px solid rgba(255,255,255,.2)
}

body[data-hb-page] .hk-btn--ghost:hover {
    background: rgba(255,255,255,.14);
    color: #fff
}

body[data-hb-page=hakkimizda] .hk-hero__visual {
    position: relative;
    min-height: 240px;
    background: #e2e8f0
}

@media (min-width: 992px) {
    body[data-hb-page=hakkimizda] .hk-hero__visual {
        min-height:auto
    }
}

body[data-hb-page] .hk-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

body[data-hb-page] .hk-hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(15,23,42,.35) 0,transparent 45%);
    pointer-events: none
}

body[data-hb-page=hakkimizda] .hk-bento {
    display: grid;
    gap: 20px
}

@media (min-width: 992px) {
    body[data-hb-page=hakkimizda] .hk-bento {
        grid-template-columns:1.15fr 0.85fr;
        align-items: start
    }
}

body[data-hb-page] .hk-panel {
    background: var(--hk-card);
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius);
    padding: clamp(1.5rem,3vw,2.25rem);
    box-shadow: 0 4px 6px -1px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.04)
}

body[data-hb-page] .hk-panel h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hk-ink);
    line-height: 1.25
}

body[data-hb-page] .hk-panel p {
    margin: 0 0 1rem;
    font-size: .95rem;
    color: var(--hk-muted);
    line-height: 1.75
}

body[data-hb-page] .hk-panel p:last-child {
    margin-bottom: 0
}

body[data-hb-page] .hk-panel .hk-strong {
    color: var(--hk-ink);
    font-weight: 700
}

body[data-hb-page] .hk-mission {
    position: relative;
    border-left: 4px solid var(--hk-coral);
    background: linear-gradient(180deg,#fff 0,#fff8f8 100%)
}

body[data-hb-page] .hk-mission__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.35rem
}

body[data-hb-page] .hk-mission__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--hk-radius-sm);
    background: var(--hk-coral-soft);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--hk-coral)
}

body[data-hb-page] .hk-mission h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--hk-ink)
}

body[data-hb-page] .hk-checklist {
    list-style: none;
    margin: 0;
    padding: 0
}

body[data-hb-page] .hk-checklist li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: .92rem;
    color: var(--hk-muted);
    margin-bottom: 1rem;
    line-height: 1.6
}

body[data-hb-page] .hk-checklist li:last-child {
    margin-bottom: 0
}

body[data-hb-page] .hk-checklist svg {
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--hk-coral)
}

body[data-hb-page] .hk-steps-intro {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 2rem
}

body[data-hb-page] .hk-steps-intro h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 800;
    color: var(--hk-ink);
    letter-spacing: -.02em
}

body[data-hb-page] .hk-steps-intro p {
    margin: 0;
    font-size: .95rem;
    color: var(--hk-muted);
    line-height: 1.7
}

body[data-hb-page=hakkimizda] .hk-steps {
    display: grid;
    gap: 0;
    position: relative
}

@media (min-width: 768px) {
    body[data-hb-page=hakkimizda] .hk-steps {
        grid-template-columns:repeat(2,1fr);
        gap: 16px
    }
}

body[data-hb-page] .hk-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    background: var(--hk-card);
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius-sm);
    align-items: start;
    transition: border-color .2s ease,box-shadow .2s ease
}

body[data-hb-page] .hk-step:hover {
    border-color: rgba(255,105,105,.35);
    box-shadow: 0 12px 32px -16px rgba(15,23,42,.12)
}

body[data-hb-page] .hk-step__lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem
}

body[data-hb-page] .hk-step__num {
    font-size: .68rem;
    font-weight: 800;
    color: var(--hk-coral);
    letter-spacing: .08em
}

body[data-hb-page] .hk-step__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: var(--hk-surface);
    border: 1px solid var(--hk-border);
    display: grid;
    place-items: center;
    color: var(--hk-coral);
    flex-shrink: 0
}

body[data-hb-page] .hk-step h4 {
    margin: 0 0 .35rem;
    font-size: .95rem;
    font-weight: 800;
    color: var(--hk-ink)
}

body[data-hb-page] .hk-step p {
    margin: 0;
    font-size: .86rem;
    color: var(--hk-muted);
    line-height: 1.6
}

@media (max-width: 959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 639px) {
}

@media (max-width: 479px) {
}

body[data-hb-page] .hk-social-head {
    text-align: center;
    margin-bottom: 1.5rem
}

body[data-hb-page] .hk-social-head h2 {
    margin: 0 0 .4rem;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 800;
    color: var(--hk-ink)
}

body[data-hb-page] .hk-social-head p {
    margin: 0;
    font-size: .95rem;
    color: var(--hk-muted)
}

body[data-hb-page=hakkimizda] .hk-social-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px
}

@media (min-width: 768px) {
    body[data-hb-page=hakkimizda] .hk-social-grid {
        grid-template-columns:repeat(4,1fr)
    }
}

body[data-hb-page] .hk-social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.35rem .85rem;
    background: var(--hk-card);
    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease
}

body[data-hb-page] .hk-social-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -18px rgba(15,23,42,.18);
    border-color: rgba(255,105,105,.35)
}

body[data-hb-page] .hk-social-card .hk-soc-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: .85rem;
    color: #fff
}

body[data-hb-page] .hk-social-card .hk-soc-icon .hk-soc-icon__bi {
    font-size: 1.35rem;
    line-height: 1;
    color: #fff
}

body[data-hb-page] .hk-social-card .hk-soc-cta svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: inherit;
    stroke: currentColor
}

body[data-hb-page] .hk-social-card .hk-soc-name {
    font-weight: 800;
    font-size: .95rem;
    color: var(--hk-ink);
    margin-bottom: .65rem
}

body[data-hb-page] .hk-social-card .hk-soc-cta {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: var(--hk-coral-soft);
    color: var(--hk-coral)
}

body[data-hb-page] .hk-social-card--fb .hk-soc-cta {
    background: rgba(24,119,242,.1);
    color: #1877f2
}

body[data-hb-page] .hk-social-card--in .hk-soc-cta {
    background: rgba(10,102,194,.1);
    color: var(--linkedin-color)
}

body[data-hb-page] .hk-social-card--tw .hk-soc-cta {
    background: rgba(15,23,42,.08);
    color: #0f172a
}

body[data-hb-page] .hk-cta {
    text-align: center;
    padding: clamp(2rem,5vw,2.75rem) clamp(1.25rem,3vw,2rem);
    border-radius: var(--hk-radius);
    background: radial-gradient(80% 120% at 50% -20%,rgba(255,255,255,.35) 0,transparent 50%),linear-gradient(135deg,#1e293b 0,#0f172a 50%,#1e1b4b 100%);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 50px -24px rgba(15,23,42,.45)
}

body[data-hb-page] .hk-cta__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.1rem;
    border-radius: var(--hk-radius-sm);
    background: rgba(255,105,105,.2);
    display: grid;
    place-items: center;
    color: #fecaca
}

body[data-hb-page] .hk-cta h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.35rem, 2.8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #f8fafc;
    line-height: 1.2
}

body[data-hb-page] .hk-cta p {
    margin: 0 auto 1.5rem;
    max-width: 36rem;
    font-size: .95rem;
    color: #cbd5e1;
    line-height: 1.65
}

body[data-hb-page] .hk-cta .hk-actions {
    justify-content: center
}

body[data-hb-page] .hk-btn--coral-light {
    background: #fff;
    color: var(--hk-coral);
    box-shadow: 0 8px 24px rgba(0,0,0,.15)
}

body[data-hb-page] .hk-btn--coral-light:hover {
    background: #fff5f5;
    color: #e11d48
}

body[data-hb-page] .hk-btn--dark {
    background: 0 0;
    color: #f8fafc;
    border: 1px solid rgba(255,255,255,.35)
}

body[data-hb-page] .hk-btn--dark:hover {
    background: rgba(255,255,255,.08);
    color: #fff
}

body[data-hb-page=ogretmen-profil] {
    --ink: #1e293b;
    --ink-muted: #64748b;
    --hb-primary: #ff6969;
    --hb-primary-dark: #e85555;
    --hb-primary-light: #fff0f0;
    --hb-primary-rgb: 255,105,105;
    --hb-text: #1e293b;
    --hb-text-secondary: #64748b;
    --hb-text-light: #94a3b8;
    --hb-bg: #f8fafc;
    --hb-white: #ffffff;
    --hb-border: #e2e8f0;
    --hb-border-light: #f1f5f9;
    --hb-star: #f59e0b;
    --hb-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --hb-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --hb-shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
    --hb-radius: 16px;
    --hb-radius-sm: 10px;
    --hb-radius-xs: 6px;
    --muted: var(--hb-text-secondary);
    --surface-elevated: var(--hb-white);
    --border: var(--hb-border);
    --radius-lg: var(--hb-radius);
    --shadow: var(--hb-shadow-sm);
    --brand: var(--hb-primary)
}

body[data-hb-page=ogretmen-profil] {
    font-family: 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    background: var(--hb-bg);
    color: var(--hb-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

body[data-hb-page=ogretmen-profil] .hb-profil-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    width: 100%;
    box-sizing: border-box
}

@media (max-width: 639px) {
    body[data-hb-page=ogretmen-profil] .hb-profil-shell {
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right: max(16px,env(safe-area-inset-right))
    }
}

body[data-hb-page=ogretmen-profil] .hb-profile-card {
    background: var(--hb-white);
    border-radius: var(--hb-radius);
    border: 1px solid var(--hb-border);
    box-shadow: var(--hb-shadow-md);
    padding: 28px;
    margin-bottom: 24px
}

body[data-hb-page=ogretmen-profil] .hb-profile-top {
    display: flex;
    gap: 24px;
    align-items: flex-start
}

body[data-hb-page] .hb-avatar-area {
    flex-shrink: 0;
    width: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px
}

body[data-hb-page=ogretmen-profil] .hb-avatar-placeholder {
    width: 156px;
    height: 156px;
    border-radius: var(--hb-radius);
    background: var(--hb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    box-shadow: 0 6px 20px rgba(var(--hb-primary-rgb),.3)
}

body[data-hb-page=ogretmen-profil] .hb-avatar-actions {
    display: flex;
    gap: 8px;
    margin-top: 3px;
    width: 100%;
    justify-content: center;
    align-self: center;
    transform: none
}

body[data-hb-page] .hb-avatar-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--hb-border);
    background: var(--hb-white);
    color: var(--hb-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s
}

body[data-hb-page] .hb-avatar-action-btn i {
    font-size: .9rem
}

body[data-hb-page] .hb-avatar-action-btn:hover {
    border-color: var(--hb-primary);
    color: var(--hb-primary);
    background: var(--hb-primary-light);
    box-shadow: 0 4px 10px rgba(var(--hb-primary-rgb),.16)
}

body[data-hb-page] .hb-avatar-action-btn.is-active {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #fff
}

body[data-hb-page=ogretmen-profil] .hb-profile-info {
    flex: 1;
    min-width: 0
}

body[data-hb-page=ogretmen-profil] .hb-profile-name {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 4px;
    color: var(--hb-text)
}

body[data-hb-page=ogretmen-profil] .hb-profile-title {
    font-size: .92rem;
    color: var(--hb-text-secondary);
    margin-bottom: 14px;
    line-height: 1.5
}

body[data-hb-page=ogretmen-profil] .hb-profile-divider {
    border: none;
    height: 4px;
    background: linear-gradient(90deg,#b5c8dc 0,#d4e0ec 100%);
    border-radius: 999px;
    margin: 14px 0
}

body[data-hb-page=ogretmen-profil] .hb-profile-meta {
    display: flex;
    flex-direction: column;
    gap: 10px
}

body[data-hb-page=ogretmen-profil] .hb-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--hb-text-secondary)
}

body[data-hb-page=ogretmen-profil] .hb-meta-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--hb-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

body[data-hb-page] .hb-meta-icon i {
    color: var(--hb-primary);
    font-size: .9rem
}

body[data-hb-page=ogretmen-profil] .hb-meta-item strong {
    color: var(--hb-text);
    font-weight: 700;
    margin-right: 2px
}

body[data-hb-page=ogretmen-profil] .hb-ongoing-text {
    font-style: italic;
    color: var(--hb-primary);
    font-weight: 600;
    font-size: .82rem
}

body[data-hb-page=ogretmen-profil] .hb-meta-ders-inline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    flex: 1
}

body[data-hb-page] .hb-meta-ders-inline strong {
    margin-right: 0
}

@media (min-width: 768px) {
    body[data-hb-page=ogretmen-profil] .hb-meta-ders-inline {
        gap:2px
    }
}

body[data-hb-page] .hb-ders-list {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap
}

body[data-hb-page] .hb-ders-list span {
    white-space: nowrap
}

body[data-hb-page] .hb-ders-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--hb-primary-light);
    color: var(--hb-primary);
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(var(--hb-primary-rgb),.2);
    transition: all .2s
}

body[data-hb-page] .hb-ders-more:hover {
    background: var(--hb-primary);
    color: #fff
}

body[data-hb-page] .hb-ders-hidden {
    display: none
}

body[data-hb-page] .hb-ders-hidden.show {
    display: contents
}

body[data-hb-page] .hb-ders-more.is-expanded {
    min-width: 44px
}

body[data-hb-page=ogretmen-profil] .hb-profile-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    min-width: 220px
}

body[data-hb-page] .hb-profile-actions {
    display: flex;
    gap: 8px
}

body[data-hb-page] .hb-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--hb-radius-sm);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    white-space: nowrap
}

body[data-hb-page] .hb-action-btn i {
    font-size: .9rem
}

body[data-hb-page] .hb-action-btn--share {
    background: #eef2ff;
    color: #6366f1
}

body[data-hb-page] .hb-action-btn--share:hover {
    background: #6366f1;
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,.3)
}

body[data-hb-page] .hb-action-btn--fav {
    background: var(--hb-primary-light);
    color: var(--hb-primary)
}

body[data-hb-page] .hb-action-btn--fav:hover {
    background: var(--hb-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--hb-primary-rgb),.3)
}

body[data-hb-page] .hb-action-btn--fav.is-active {
    background: var(--hb-primary);
    color: #fff
}

body[data-hb-page] .hb-price-box {
    background: var(--hb-white);
    border: 2px solid var(--hb-primary);
    border-radius: var(--hb-radius);
    padding: 20px;
    text-align: center;
    width: 100%;
    position: relative;
    overflow: hidden
}

body[data-hb-page] .hb-price-box-top {
    background: var(--hb-primary);
    color: #fff;
    margin: -20px -20px 16px;
    padding: 10px 20px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

body[data-hb-page] .hb-price-box-top i {
    font-size: .85rem
}

body[data-hb-page] .hb-price-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--hb-primary);
    line-height: 1
}

body[data-hb-page] .hb-price-unit {
    font-size: .9rem;
    font-weight: 600;
    color: var(--hb-text-secondary)
}

body[data-hb-page] .hb-price-box-divider {
    width: 50px;
    height: 2px;
    background: var(--hb-border);
    margin: 12px auto
}

body[data-hb-page] .hb-rating-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .88rem
}

body[data-hb-page] .hb-rating-inline .bi-star-fill {
    color: var(--hb-star);
    font-size: .95rem
}

body[data-hb-page] .hb-rating-inline .hb-rating-num {
    font-weight: 800;
    color: var(--hb-text)
}

body[data-hb-page] .hb-rating-inline .hb-rating-count {
    color: var(--hb-text-light);
    font-size: .82rem
}

body[data-hb-page=ogretmen-profil] .hb-mobile-price-box {
    display: none
}

body[data-hb-page=ogretmen-profil] .hb-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start
}

body[data-hb-page] .hb-main {
    flex: 1;
    min-width: 0
}

body[data-hb-page=ogretmen-profil] .hb-sidebar {
    width: 340px;
    flex-shrink: 0
}

body[data-hb-page=ogretmen-profil] .hb-card {
    background: var(--hb-white);
    border-radius: var(--hb-radius);
    border: 1px solid var(--hb-border);
    box-shadow: var(--hb-shadow-sm);
    padding: 24px;
    margin-bottom: 16px
}

body[data-hb-page] .hb-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hb-text)
}

body[data-hb-page] .hb-card-title i {
    color: var(--hb-primary);
    font-size: 1.15rem
}

body[data-hb-page] .hb-card p:not(.hb-review-text) {
    font-size: .92rem;
    color: var(--hb-text-secondary);
    line-height: 1.75
}

body[data-hb-page] .hb-card p+p {
    margin-top: 8px
}

body[data-hb-page=ogretmen-profil] .hb-rich-text {
    font-size: .92rem;
    color: var(--hb-text-secondary);
    line-height: 1.75;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%
}

body[data-hb-page=ogretmen-profil] .hb-rich-text p {
    margin: 0 0 1rem
}

body[data-hb-page=ogretmen-profil] .hb-rich-text p:last-child {
    margin-bottom: 0
}

body[data-hb-page=ogretmen-profil] .hb-rich-text ul,
body[data-hb-page=ogretmen-profil] .hb-rich-text ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem
}

body[data-hb-page=ogretmen-profil] .hb-rich-text ul {
    list-style: disc outside
}

body[data-hb-page=ogretmen-profil] .hb-rich-text ol {
    list-style: decimal outside
}

body[data-hb-page=ogretmen-profil] .hb-rich-text ul+ol,
body[data-hb-page=ogretmen-profil] .hb-rich-text ol+ul,
body[data-hb-page=ogretmen-profil] .hb-rich-text ul+ul,
body[data-hb-page=ogretmen-profil] .hb-rich-text ol+ol {
    margin-top: 1rem
}

body[data-hb-page=ogretmen-profil] .hb-rich-text li {
    margin-bottom: .35rem;
    line-height: 1.6
}

body[data-hb-page=ogretmen-profil] .hb-rich-text ul ul,
body[data-hb-page=ogretmen-profil] .hb-rich-text ol ol,
body[data-hb-page=ogretmen-profil] .hb-rich-text ul ol,
body[data-hb-page=ogretmen-profil] .hb-rich-text ol ul {
    margin-top: .35rem;
    margin-bottom: 0
}

body[data-hb-page=ogretmen-profil] .hb-rich-text blockquote {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--hb-border);
    color: var(--hb-text-secondary)
}

body[data-hb-page=ogretmen-profil] .hb-rich-text h1,
body[data-hb-page=ogretmen-profil] .hb-rich-text h2,
body[data-hb-page=ogretmen-profil] .hb-rich-text h3,
body[data-hb-page=ogretmen-profil] .hb-rich-text h4,
body[data-hb-page=ogretmen-profil] .hb-rich-text h5,
body[data-hb-page=ogretmen-profil] .hb-rich-text h6 {
    margin: 0 0 .75rem;
    font-weight: 700;
    color: var(--hb-text);
    line-height: 1.35
}

body[data-hb-page] .hb-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    color: var(--hb-primary);
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    border: none;
    background: 0 0;
    padding: 0;
    transition: color .2s
}

body[data-hb-page] .hb-read-more-btn:hover {
    color: var(--hb-primary-dark)
}

body[data-hb-page] .hb-read-more-btn i {
    font-size: .8rem;
    transition: transform .3s
}

body[data-hb-page] .hb-read-more-btn.is-open i {
    transform: rotate(180deg)
}

body[data-hb-page] .hb-collapsible {
    max-height: 6.5em;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.4,0,.2,1)
}

body[data-hb-page] .hb-collapsible.is-open {
    max-height: 600px
}

body[data-hb-page] .hb-exp-list {
    list-style: none;
    padding: 0
}

body[data-hb-page] .hb-exp-list li {
    position: relative;
    padding: 0 0 10px 20px;
    font-size: .92rem;
    color: var(--hb-text-secondary);
    line-height: 1.7
}

body[data-hb-page] .hb-exp-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--hb-primary);
    border-radius: 50%
}

body[data-hb-page] .hb-exp-list li:last-child {
    padding-bottom: 0
}

body[data-hb-page] .hb-campaign-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--hb-white);
    border: 1px solid rgba(var(--hb-primary-rgb),.2);
    border-left: 4px solid var(--hb-primary);
    border-radius: var(--hb-radius-sm);
    margin-bottom: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: #475569
}

body[data-hb-page] .hb-campaign-item:last-child {
    margin-bottom: 0
}

body[data-hb-page] .hb-campaign-item i {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: var(--hb-primary);
    background: var(--hb-primary-light)
}

body[data-hb-page] .hb-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: var(--hb-radius-sm);
    overflow: hidden;
    background: #000
}

body[data-hb-page] .hb-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

body[data-hb-page] .hb-kategori-card {
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
    transition: all .2s;
    background: var(--hb-white)
}

body[data-hb-page] .hb-kategori-card:last-child {
    margin-bottom: 0
}

body[data-hb-page] .hb-kategori-card:hover {
    box-shadow: var(--hb-shadow-md);
    border-color: rgba(var(--hb-primary-rgb),.3)
}

body[data-hb-page=ogretmen-profil] .hb-kategori-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px
}

body[data-hb-page] .hb-kategori-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--hb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

body[data-hb-page] .hb-kategori-icon i {
    color: #fff;
    font-size: 1.15rem
}

body[data-hb-page] .hb-kategori-info {
    flex: 1;
    min-width: 0
}

body[data-hb-page] .hb-kategori-breadcrumb {
    font-size: .65rem;
    color: var(--hb-text-light);
    margin-bottom: 1px;
    line-height: 1.3;
    letter-spacing: .02em
}

body[data-hb-page] .hb-kategori-name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--hb-text)
}

body[data-hb-page] .hb-kategori-duration {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 700;
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
    flex-shrink: 0
}

body[data-hb-page=ogretmen-profil] .hb-kategori-duration-label {
    font-weight: 600;
    color: #92400e
}

body[data-hb-page] .hb-kategori-duration i {
    font-size: .8rem
}

body[data-hb-page=ogretmen-profil] .hb-kategori-prices {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 18px 16px
}

body[data-hb-page=ogretmen-profil] .hb-kategori-price-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    flex: 1;
    justify-content: center
}

body[data-hb-page] .hb-kategori-price-chip i {
    font-size: .9rem
}

body[data-hb-page] .hb-kategori-price-chip--online {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe
}

body[data-hb-page] .hb-kategori-price-chip--yuzyuze {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0
}

body[data-hb-page] .hb-location-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px
}

body[data-hb-page] .hb-location-row:last-child {
    margin-bottom: 0
}

body[data-hb-page=ogretmen-profil] .hb-location-city {
    font-size: .95rem;
    font-weight: 700;
    color: var(--hb-text-secondary);
    min-width: 74px;
    padding-top: 6px;
    flex-shrink: 0
}

body[data-hb-page=ogretmen-profil] .hb-locations-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start
}

body[data-hb-page] .hb-location-row .hb-locations-wrap {
    flex: 1;
    min-width: 0
}

body[data-hb-page=ogretmen-profil] .hb-loc-tag {
    padding: 6px 14px;
    background: var(--hb-white);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius-xs);
    font-size: .82rem;
    color: var(--hb-text);
    font-weight: 500;
    transition: all .2s;
    cursor: default
}

body[data-hb-page] .hb-loc-tag:hover {
    border-color: var(--hb-primary);
    color: var(--hb-primary);
    background: var(--hb-primary-light);
    transform: translateY(-1px)
}

body[data-hb-page=ogretmen-profil] .hb-loc-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--hb-radius-xs);
    background: var(--hb-primary-light);
    border: 1px solid rgba(var(--hb-primary-rgb),.2);
    color: var(--hb-primary);
    font-weight: 500;
    font-size: .82rem;
    white-space: nowrap
}

body[data-hb-page=ogretmen-profil] .hb-loc-all i {
    font-size: .82rem
}

body[data-hb-page] .hb-cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px
}

body[data-hb-page] .hb-mobile-bar .hb-btn,body[data-hb-page] .hb-modal-overlay .hb-btn,body[data-hb-page] .hb-profil-shell .hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: .9rem;
    font-weight: 700;
    border-radius: var(--hb-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .25s;
    text-decoration: none;
    text-align: center;
    font-family: inherit
}

body[data-hb-page] .hb-mobile-bar .hb-btn-primary,body[data-hb-page] .hb-modal-overlay .hb-btn-primary,body[data-hb-page] .hb-profil-shell .hb-btn-primary {
    background: var(--hb-primary);
    color: #fff!important;
    box-shadow: 0 4px 14px rgba(var(--hb-primary-rgb),.3)
}

body[data-hb-page] .hb-mobile-bar .hb-btn-primary:hover,body[data-hb-page] .hb-modal-overlay .hb-btn-primary:hover,body[data-hb-page] .hb-profil-shell .hb-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--hb-primary-rgb),.4);
    background: var(--hb-primary-dark);
    color: #fff
}

body[data-hb-page] .hb-mobile-bar .hb-btn-outline,body[data-hb-page] .hb-modal-overlay .hb-btn-outline,body[data-hb-page] .hb-profil-shell .hb-btn-outline {
    background: var(--hb-white);
    border-color: var(--hb-border);
    color: var(--hb-text)
}

body[data-hb-page] .hb-mobile-bar .hb-btn-outline:hover,body[data-hb-page] .hb-modal-overlay .hb-btn-outline:hover,body[data-hb-page] .hb-profil-shell .hb-btn-outline:hover {
    border-color: var(--hb-primary);
    color: var(--hb-primary);
    background: var(--hb-primary-light)
}

body[data-hb-page] .hb-modal-overlay .hb-btn-block,body[data-hb-page] .hb-profil-shell .hb-btn-block {
    width: 100%
}

body[data-hb-page=ogretmen-profil] .hb-timeline-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--hb-border-light);
    display: flex;
    gap: 16px;
    align-items: flex-start
}

body[data-hb-page] .hb-timeline-item:last-child {
    border-bottom: none
}

body[data-hb-page=ogretmen-profil] .hb-timeline-period {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--hb-primary);
    min-width: 90px;
    padding-top: 2px
}

body[data-hb-page] .hb-timeline-content {
    flex: 1
}

body[data-hb-page] .hb-timeline-title {
    font-weight: 700;
    font-size: .92rem;
    color: var(--hb-text);
    margin-bottom: 2px
}

body[data-hb-page] .hb-timeline-sub {
    font-size: .84rem;
    color: var(--hb-primary);
    font-weight: 600
}

body[data-hb-page] .hb-timeline-note {
    font-size: .82rem;
    color: #334155;
    margin-top: 4px;
    line-height: 1.6
}

body[data-hb-page=ogretmen-profil] .hb-rating-overview {
    display: flex;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
    background: linear-gradient(180deg,#fff 0,#fff7f7 100%);
    border: 1px solid rgba(var(--hb-primary-rgb),.14);
    border-radius: 14px;
    padding: 16px
}

body[data-hb-page] .hb-rating-big {
    min-width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--hb-border-light);
    border-radius: 12px;
    padding: 14px 12px
}

body[data-hb-page] .hb-rating-big-num {
    font-size: 2.7rem;
    font-weight: 800;
    color: var(--hb-primary);
    line-height: 1
}

body[data-hb-page] .hb-rating-big-label {
    font-size: .82rem;
    color: var(--hb-text-secondary);
    margin-top: 5px;
    font-weight: 600
}

body[data-hb-page] .hb-rating-summary-meta {
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--hb-primary-light);
    color: #222;
    font-size: .74rem;
    font-weight: 700
}

body[data-hb-page=ogretmen-profil] .hb-rating-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

body[data-hb-page=ogretmen-profil] .hb-rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

body[data-hb-page] .hb-rating-bar-row:last-child {
    margin-bottom: 0
}

body[data-hb-page=ogretmen-profil] .hb-rating-bar-label {
    font-size: .82rem;
    color: var(--hb-text-secondary);
    min-width: 138px;
    flex-shrink: 0
}

body[data-hb-page] .hb-rating-bar-track {
    flex: 1;
    height: 7px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden
}

body[data-hb-page] .hb-rating-bar-fill {
    height: 100%;
    background: var(--hb-primary);
    border-radius: 999px;
    transition: width .6s ease
}

body[data-hb-page] .hb-rating-bar-val {
    font-weight: 700;
    font-size: .82rem;
    color: var(--hb-text);
    min-width: 30px;
    text-align: right
}

body[data-hb-page=ogretmen-profil] .hb-review-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px;
    background: #f8fafc;
    border: 1px solid var(--hb-border-light);
    border-radius: 12px
}

body[data-hb-page=ogretmen-profil] .hb-review-tab {
    padding: 9px 14px;
    font-size: .84rem;
    font-weight: 700;
    border-radius: 9px;
    border: 1px solid transparent;
    background: 0 0;
    color: var(--hb-text-secondary);
    cursor: pointer;
    transition: all .2s;
    flex: 1
}

body[data-hb-page] .hb-review-tab.active,body[data-hb-page] .hb-review-tab:hover {
    border-color: rgba(var(--hb-primary-rgb),.24);
    color: var(--hb-primary);
    background: #fff;
    box-shadow: 0 1px 8px rgba(15,23,42,.06)
}

body[data-hb-page=ogretmen-profil] .hb-review-item {
    padding: 18px 18px 16px;
    border: 1px solid var(--hb-border);
    border-radius: 14px;
    background: var(--hb-white);
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04),0 4px 20px rgba(15,23,42,.04)
}

body[data-hb-page=ogretmen-profil] .hb-review-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 0
}

body[data-hb-page] .hb-review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg,#fff5f5 0,#ffe4e6 45%,#fecdd3 100%);
    border: 2px solid rgba(var(--hb-primary-rgb),.14);
    box-shadow: 0 2px 8px rgba(var(--hb-primary-rgb),.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .04em;
    color: #c2410c;
    flex-shrink: 0
}

body[data-hb-page] .hb-review-meta {
    flex: 1;
    min-width: 0;
    padding-top: 1px
}

body[data-hb-page] .hb-review-author {
    font-weight: 800;
    font-size: clamp(.88rem,2.5vw,.95rem);
    color: var(--hb-text);
    letter-spacing: -.02em;
    margin: 0 0 5px;
    line-height: 1.25
}

body[data-hb-page] .hb-review-date {
    font-size: .78rem;
    color: var(--hb-text-light)
}

body[data-hb-page=ogretmen-profil] .hb-review-date-right {
    font-size: .74rem;
    font-weight: 600;
    color: #64748b;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    border: none;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-top: 1px
}

body[data-hb-page] .hb-review-stars {
    display: flex;
    gap: 3px;
    align-items: center
}

body[data-hb-page] .hb-review-stars i {
    color: var(--hb-star);
    font-size: .8rem;
    line-height: 1
}

body[data-hb-page=ogretmen-profil] .hb-card p.hb-review-text {
    font-size: .9rem;
    color: #475569;
    line-height: 1.7;
    margin: 14px 0 0
}

body[data-hb-page] .hb-review-breakdown {
    margin-top: 18px;
    padding: 14px 0 0;
    border: none;
    border-radius: 0;
    background: 0 0;
    border-top: 1px solid #e2e8f0
}

body[data-hb-page=ogretmen-profil] .hb-review-breakdown-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 7px 0;
    margin-bottom: 0;
    border-bottom: 1px solid #f1f5f9
}

body[data-hb-page] .hb-review-breakdown-row:last-child {
    border-bottom: none;
    padding-bottom: 0
}

body[data-hb-page=ogretmen-profil] .hb-review-breakdown-label {
    flex: 1 1 0;
    min-width: 0;
    font-size: .8rem;
    color: #475569;
    font-weight: 600;
    line-height: 1.35;
    padding-right: 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

body[data-hb-page=ogretmen-profil] .hb-review-breakdown-rating {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-shrink: 0;
    padding: 5px 8px 5px 10px;
    margin-left: 4px;
    background: rgba(248,250,252,.95);
    border: 1px solid #f1f5f9;
    border-radius: 10px
}

body[data-hb-page] .hb-review-breakdown-stars {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0
}

body[data-hb-page=ogretmen-profil] .hb-review-breakdown-stars i {
    font-size: .74rem;
    color: #e2e8f0;
    line-height: 1;
    filter: saturate(1.05)
}

body[data-hb-page] .hb-review-breakdown-stars i.active {
    color: var(--hb-star)
}

body[data-hb-page=ogretmen-profil] .hb-review-breakdown-val {
    font-size: .76rem;
    font-weight: 800;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    min-width: 2.1em;
    text-align: right;
    letter-spacing: -.02em
}

body[data-hb-page] .hb-complaint-box,body[data-hb-page] .hb-review-form-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--hb-border-light);
    border-radius: 12px;
    background: #fff
}

body[data-hb-page] .hb-review-form-title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 12px;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid var(--hb-border-light);
    border-radius: 10px
}

body[data-hb-page] .hb-review-form-content {
    padding: 12px;
    border: 1px solid var(--hb-border-light);
    border-radius: 10px;
    background: #fff
}

body[data-hb-page=ogretmen-profil] .hb-review-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px
}

body[data-hb-page=ogretmen-profil] .hb-complaint-check-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px
}

@media (min-width: 480px) {
    body[data-hb-page=ogretmen-profil] .hb-complaint-check-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 10px
    }
}

body[data-hb-page] .hb-complaint-chip-wrap {
    position: relative
}

body[data-hb-page] .hb-complaint-chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

body[data-hb-page] .hb-complaint-chip-input:focus-visible+.hb-complaint-chip-label {
    outline: 2px solid var(--hb-primary);
    outline-offset: 2px
}

body[data-hb-page] .hb-complaint-chip-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: var(--hb-radius-sm);
    border: 1.5px solid var(--hb-border);
    background: var(--hb-white);
    font-size: .86rem;
    font-weight: 600;
    color: var(--hb-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: border-color .2s,background .2s,color .2s,box-shadow .2s
}

body[data-hb-page] .hb-complaint-chip-label:hover {
    border-color: rgba(var(--hb-primary-rgb),.45);
    color: var(--hb-primary)
}

body[data-hb-page] .hb-complaint-chip-input:checked+.hb-complaint-chip-label {
    background: var(--hb-primary-light);
    border-color: var(--hb-primary);
    color: var(--hb-text);
    box-shadow: 0 2px 8px rgba(var(--hb-primary-rgb),.12)
}

body[data-hb-page] .hb-complaint-chip-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--hb-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: transparent;
    background: var(--hb-white);
    transition: background .2s,border-color .2s,color .2s
}

body[data-hb-page] .hb-complaint-chip-input:checked+.hb-complaint-chip-label .hb-complaint-chip-box {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #fff
}

body[data-hb-page] .hb-complaint-chip-text {
    flex: 1;
    line-height: 1.35
}

body[data-hb-page] .hb-social-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

body[data-hb-page] .hb-social-link {
    width: 42px;
    height: 42px;
    border-radius: var(--hb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.15rem;
    transition: all .2s;
    color: #fff
}

body[data-hb-page] .hb-social-link:hover {
    transform: translateY(-2px);
    color: #fff
}

body[data-hb-page] .hb-social-link--whatsapp {
    background: #25d366;
    box-shadow: 0 3px 10px rgba(37,211,102,.3)
}

body[data-hb-page] .hb-social-link--instagram {
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    box-shadow: 0 3px 10px rgba(225,48,108,.3)
}

body[data-hb-page] .hb-social-link--linkedin {
    background: #0a66c2;
    box-shadow: 0 3px 10px rgba(10,102,194,.3)
}

body[data-hb-page] .hb-social-link--facebook {
    background: #1877f2;
    box-shadow: 0 3px 10px rgba(24,119,242,.3)
}

body[data-hb-page] .hb-social-link--phone {
    background: #34d399;
    box-shadow: 0 3px 10px rgba(52,211,153,.3)
}

body[data-hb-page] .hb-social-link--email {
    background: #6366f1;
    box-shadow: 0 3px 10px rgba(99,102,241,.3)
}

body[data-hb-page=ogretmen-profil] .hb-sidebar-sticky {
    position: sticky;
    top: 20px
}

body[data-hb-page] .hb-sidebar-card {
    background: var(--hb-white);
    border-radius: var(--hb-radius);
    border: 1px solid var(--hb-border);
    box-shadow: var(--hb-shadow-md);
    padding: 20px;
    margin-bottom: 16px
}

body[data-hb-page] .hb-sidebar-section-title {
    font-size: .88rem;
    font-weight: 800;
    color: var(--hb-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px
}

body[data-hb-page] .hb-sidebar-section-title i {
    color: var(--hb-primary)
}

body[data-hb-page] .hb-sidebar-schedule {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    font-size: .78rem
}

body[data-hb-page] .hb-sidebar-schedule-row {
    display: contents
}

body[data-hb-page] .hb-sidebar-schedule-day {
    font-weight: 700;
    color: var(--hb-text);
    padding: 6px 0
}

body[data-hb-page] .hb-sidebar-schedule-time {
    color: var(--hb-text-secondary);
    padding: 6px 0;
    text-align: right
}

body[data-hb-page] .hb-sidebar-schedule-time.off {
    color: var(--hb-text-light)
}

body[data-hb-page] .hb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px
}

body[data-hb-page] .hb-modal-overlay.show {
    display: flex
}

body[data-hb-page] .hb-modal {
    background: var(--hb-white);
    border-radius: var(--hb-radius);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--hb-shadow-lg);
    animation: hbModalIn .25s ease
}

@keyframes hbModalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

body[data-hb-page] .hb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--hb-border)
}

body[data-hb-page] .hb-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 800
}

body[data-hb-page] .hb-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--hb-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--hb-text-secondary);
    transition: all .2s
}

body[data-hb-page] .hb-modal-close:hover {
    background: var(--hb-primary-light);
    color: var(--hb-primary)
}

body[data-hb-page] .hb-modal-body {
    padding: 24px
}

body[data-hb-page] .hb-modal--review-flow {
    max-width: 440px
}

body[data-hb-page] .hb-modal--review-flow .hb-modal-header h3 {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    line-height: 1.3
}

body[data-hb-page] .hb-review-flow-msg {
    font-size: .9rem;
    color: #475569;
    line-height: 1.65;
    margin: 0 0 18px
}

body[data-hb-page] .hb-modal--student-only {
    position: relative;
    max-width: 440px;
    overflow: hidden;
    border: 1px solid var(--hb-border)
}

body[data-hb-page] .hb-modal--student-only .hb-modal-close--float {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(255,255,255,.95);
    box-shadow: var(--hb-shadow-sm)
}

body[data-hb-page] .hb-modal-student-only__hero {
    background: linear-gradient(135deg,#fff5f5 0,#fff 48%,#f8fafc 100%);
    padding: 28px 24px 20px;
    text-align: center;
    border-bottom: 1px solid var(--hb-border-light)
}

body[data-hb-page] .hb-modal-student-only__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(145deg,var(--hb-primary) 0,var(--hb-primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 8px 24px rgba(var(--hb-primary-rgb),.35)
}

body[data-hb-page] .hb-modal-student-only__hero h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--hb-text);
    letter-spacing: -.02em;
    margin: 0 0 10px;
    line-height: 1.3
}

body[data-hb-page] .hb-modal-student-only__lead {
    font-size: .9rem;
    color: var(--hb-text-secondary);
    line-height: 1.55;
    margin: 0
}

body[data-hb-page] .hb-modal-student-only__body {
    padding-top: 20px
}

body[data-hb-page] .hb-modal-student-only__bullets {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    text-align: left
}

body[data-hb-page] .hb-modal-student-only__bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .86rem;
    color: var(--hb-text);
    line-height: 1.45;
    margin-bottom: 10px
}

body[data-hb-page] .hb-modal-student-only__bullets li:last-child {
    margin-bottom: 0
}

body[data-hb-page] .hb-modal-student-only__bullets i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--hb-primary);
    font-size: 1rem
}

body[data-hb-page] .hb-modal-student-only__actions {
    display: flex;
    flex-direction: column;
    gap: 10px
}

body[data-hb-page] .hb-modal-student-only__hint {
    font-size: .78rem;
    color: var(--hb-text-light);
    text-align: center;
    margin-top: 12px;
    line-height: 1.4
}

body[data-hb-page=ogretmen-profil] .hb-demo-rolebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 102;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    padding: 10px 14px;
    background: linear-gradient(90deg,#1e293b 0,#334155 100%);
    color: #f1f5f9;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 -4px 24px rgba(15,23,42,.25);
    border-top: 1px solid rgba(255,255,255,.08)
}

body[data-hb-page] .hb-demo-rolebar__label {
    opacity: .9
}

body[data-hb-page] .hb-demo-rolebar__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center
}

body[data-hb-page] .hb-demo-rolebar__btns button {
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #e2e8f0;
    font-size: .76rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s,border-color .2s,color .2s
}

body[data-hb-page] .hb-demo-rolebar__btns button:hover {
    background: rgba(255,255,255,.15);
    color: #fff
}

body[data-hb-page] .hb-demo-rolebar__btns button.is-active {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--hb-primary-rgb),.4)
}

body[data-hb-page=ogretmen-profil].hb-has-demo-bar {
    padding-bottom: 56px
}

body[data-hb-page] .hb-form-group {
    margin-bottom: 16px
}

body[data-hb-page] .hb-form-label {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--hb-text);
    margin-bottom: 8px
}

body[data-hb-page] .hb-form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius-sm);
    font-family: inherit;
    font-size: .9rem;
    color: var(--hb-text);
    transition: border-color .2s;
    background: var(--hb-white)
}

body[data-hb-page] .hb-form-control:focus {
    outline: 0;
    border-color: var(--hb-primary);
    box-shadow: 0 0 0 3px rgba(var(--hb-primary-rgb),.1)
}

body[data-hb-page] .hb-form-control::placeholder {
    color: var(--hb-text-light)
}

body[data-hb-page] select.hb-form-control {
    appearance: auto
}

body[data-hb-page] textarea.hb-form-control {
    resize: vertical;
    min-height: 80px
}

body[data-hb-page] .hb-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

body[data-hb-page] .hb-chip-input {
    display: none
}

body[data-hb-page] .hb-chip-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--hb-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    border: 1.5px solid var(--hb-border);
    background: var(--hb-white);
    color: var(--hb-text-secondary);
    cursor: pointer;
    transition: all .2s;
    user-select: none;
    position: relative
}

body[data-hb-page] .hb-chip-label:hover {
    border-color: var(--hb-primary);
    color: var(--hb-primary)
}

body[data-hb-page] .hb-chip-label .chip-check {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

body[data-hb-page] .hb-chip-label .chip-check i {
    font-size: .7rem;
    color: var(--hb-primary)
}

body[data-hb-page] .hb-chip-input:checked+.hb-chip-label {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #fff
}

body[data-hb-page] .hb-chip-input:checked+.hb-chip-label .chip-check {
    display: flex
}

body[data-hb-page] .hb-modal--share {
    max-width: 460px
}

body[data-hb-page] .hb-modal-body--share {
    padding-top: 8px
}

body[data-hb-page] .hb-share-lead {
    font-size: .88rem;
    color: var(--hb-text-secondary);
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.5
}

body[data-hb-page=ogretmen-profil] .hb-share-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 8px 4px 24px
}

body[data-hb-page=ogretmen-profil] .hb-share-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s,box-shadow .2s;
    box-shadow: 0 4px 12px rgba(15,23,42,.12)
}

body[data-hb-page=ogretmen-profil] .hb-share-icon:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 20px rgba(15,23,42,.18);
    color: #fff
}

body[data-hb-page] .hb-share-icon:focus-visible {
    outline: 2px solid var(--hb-primary);
    outline-offset: 3px
}

body[data-hb-page] .hb-share-icon--round {
    border-radius: 50%
}

body[data-hb-page=ogretmen-profil] .hb-share-icon--square {
    border-radius: 14px
}

body[data-hb-page] .hb-share-icon--instagram {
    background: linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)
}

body[data-hb-page] .hb-share-icon--whatsapp {
    background: #25d366
}

body[data-hb-page] .hb-share-icon--facebook {
    background: #1877f2
}

body[data-hb-page] .hb-share-icon--x {
    background: #0f1419
}

body[data-hb-page] .hb-share-icon--linkedin {
    background: #0a66c2
}

body[data-hb-page] .hb-share-icon.is-done {
    animation: hbSharePulse .5s ease
}

@keyframes hbSharePulse {
    0% {
        transform: scale(1)
    }

    40% {
        transform: scale(1.08)
    }

    100% {
        transform: scale(1)
    }
}

body[data-hb-page] .hb-share-url-block {
    margin-top: 4px
}

body[data-hb-page] .hb-share-url-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hb-text-light);
    margin-bottom: 8px
}

body[data-hb-page] .hb-share-url-field {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--hb-bg);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius-sm);
    overflow: hidden;
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page] .hb-share-url-field:focus-within {
    border-color: var(--hb-primary);
    box-shadow: 0 0 0 3px rgba(var(--hb-primary-rgb),.12)
}

body[data-hb-page] .hb-share-url-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: 0 0;
    padding: 12px 14px;
    font-size: .82rem;
    color: var(--hb-text);
    font-family: inherit
}

body[data-hb-page] .hb-share-url-input:focus {
    outline: 0
}

body[data-hb-page] .hb-share-url-copy {
    flex-shrink: 0;
    width: 48px;
    border: none;
    border-left: 1px solid var(--hb-border);
    background: var(--hb-white);
    color: var(--hb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.15rem;
    transition: background .2s,color .2s
}

body[data-hb-page] .hb-share-url-copy:hover {
    background: var(--hb-primary-light)
}

body[data-hb-page] .hb-share-url-copy.is-copied {
    background: #ecfdf5;
    color: #059669
}

body[data-hb-page] .hb-share-url-hint {
    font-size: .75rem;
    color: var(--hb-text-light);
    margin-top: 10px;
    text-align: center;
    line-height: 1.4
}

@media (max-width: 767px) {
    body[data-hb-page=ogretmen-profil] .hb-share-icons {
        flex-wrap:nowrap;
        justify-content: center;
        gap: 5px;
        padding: 8px 0 20px
    }

    body[data-hb-page=ogretmen-profil] .hb-share-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        box-shadow: 0 3px 10px rgba(15,23,42,.1)
    }

    body[data-hb-page=ogretmen-profil] .hb-share-icon:hover {
        transform: translateY(-2px) scale(1.03)
    }

    body[data-hb-page=ogretmen-profil] .hb-share-icon--square {
        border-radius: 11px
    }
}

body[data-hb-page=ogretmen-profil] .hb-mobile-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--hb-white);
    border-top: 1px solid var(--hb-border);
    padding: 12px 16px;
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    gap: 8px
}

body[data-hb-page] .hb-mobile-bar .hb-btn {
    flex: 1;
    padding: 12px 8px;
    font-size: .82rem
}

body[data-hb-page] .hb-star-input {
    display: flex;
    gap: 4px
}

body[data-hb-page] .hb-star-input i {
    color: var(--hb-border);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color .15s,transform .2s cubic-bezier(.34,1.56,.64,1);
    display: inline-block;
    transform-origin: center center
}

body[data-hb-page=ogretmen-profil] .hb-star-input i.active {
    color: var(--hb-star);
    filter: drop-shadow(0 1px 2px rgba(245,158,11,.45));
    animation: hbStarPick .5s cubic-bezier(.34,1.56,.64,1)
}

body[data-hb-page] .hb-star-input i:hover {
    color: var(--hb-star)
}

@keyframes hbStarPick {
    0% {
        transform: scale(1)
    }

    35% {
        transform: scale(1.28)
    }

    100% {
        transform: scale(1)
    }
}

@media (prefers-reduced-motion:reduce) {
    body[data-hb-page=ogretmen-profil] .hb-star-input i.active {
        animation: none
    }
}

@media(max-width: 991px) {
    body[data-hb-page=ogretmen-profil] .hb-layout {
        flex-direction:column
    }

    body[data-hb-page=ogretmen-profil] .hb-sidebar {
        width: 100%;
        order: -1
    }

    body[data-hb-page=ogretmen-profil] .hb-sidebar-sticky {
        position: static
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-right {
        min-width: 180px
    }
}

body[data-hb-page] .hb-mobile-mini-actions {
    display: none
}

@media(max-width: 767px) {
    body[data-hb-page=ogretmen-profil] .hb-profile-card {
        padding:0;
        border-radius: var(--hb-radius);
        overflow: hidden;
        position: relative
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-right {
        display: none
    }

    body[data-hb-page=ogretmen-profil] .hb-avatar-actions {
        display: none
    }

    body[data-hb-page] .hb-mobile-mini-actions {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        gap: 6px;
        z-index: 2
    }

    body[data-hb-page] .hb-mobile-mini-actions .hb-mini-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .85rem;
        cursor: pointer;
        transition: all .2s;
        background: rgba(255,255,255,.9);
        color: var(--hb-text-secondary);
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px rgba(0,0,0,.1)
    }

    body[data-hb-page] .hb-mobile-mini-actions .hb-mini-btn:hover {
        color: var(--hb-primary)
    }

    body[data-hb-page] .hb-mobile-mini-actions .hb-mini-btn.is-active,
    body[data-hb-page] .hb-mobile-mini-actions .hb-mini-btn.is-favorite {
        color: var(--hb-primary)
    }

    body[data-hb-page] .hb-mobile-mini-actions .hb-mini-btn.is-favorite i {
        color: var(--hb-primary)
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-top {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px 16px 16px;
        text-align: center
    }

    body[data-hb-page=ogretmen-profil] .hb-avatar-placeholder {
        width: 165px;
        height: 165px;
        font-size: 3rem;
        border-radius: 20px
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-info {
        text-align: center;
        width: 100%
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-name {
        font-size: 1.2rem;
        justify-content: center;
        gap: 6px;
        margin-bottom: 3px
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-title {
        font-size: .82rem;
        justify-content: center;
        text-align: center;
        margin-bottom: 0
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-divider {
        display: none
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-meta {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 10px 16px;
        border-top: 1px solid var(--hb-border-light)
    }

    body[data-hb-page=ogretmen-profil] .hb-meta-item {
        font-size: .78rem;
        gap: 5px;
        padding: 5px 10px;
        background: var(--hb-bg);
        border-radius: 999px;
        border: 1px solid var(--hb-border-light)
    }

    body[data-hb-page=ogretmen-profil] .hb-meta-icon {
        display: none
    }

    body[data-hb-page=ogretmen-profil] .hb-meta-item strong {
        font-size: .78rem;
        margin-right: 1px
    }

    body[data-hb-page=ogretmen-profil] .hb-ongoing-text {
        font-size: .72rem
    }

    body[data-hb-page=ogretmen-profil] .hb-mobile-price-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-top: 1px solid var(--hb-border);
        background: var(--hb-primary-light);
        border: none;
        border-radius: 0
    }

    body[data-hb-page] .hb-mobile-price-box .hb-price-amount {
        font-size: 1.35rem
    }

    body[data-hb-page] .hb-mobile-price-box .hb-price-box-divider,body[data-hb-page] .hb-mobile-price-box .hb-price-box-top {
        display: none
    }

    body[data-hb-page=ogretmen-profil] .hb-card {
        padding: 18px
    }

    body[data-hb-page=ogretmen-profil] .hb-rating-overview {
        flex-direction: column;
        align-items: stretch;
        text-align: left
    }

    body[data-hb-page=ogretmen-profil] .hb-rating-bars {
        width: 100%
    }

    body[data-hb-page=ogretmen-profil] .hb-rating-bar-row {
        justify-content: flex-start
    }

    body[data-hb-page=ogretmen-profil] .hb-rating-bar-label {
        min-width: 112px;
        font-size: .78rem
    }

    body[data-hb-page=ogretmen-profil] .hb-timeline-item {
        flex-direction: column;
        gap: 4px
    }

    body[data-hb-page=ogretmen-profil] .hb-timeline-period {
        min-width: unset
    }

    body[data-hb-page=ogretmen-profil] .hb-mobile-bar {
        display: flex
    }

    body[data-hb-page=ogretmen-profil] {
        padding-bottom: 72px
    }

    body[data-hb-page=ogretmen-profil].hb-has-demo-bar {
        padding-bottom: 132px
    }

    body[data-hb-page=ogretmen-profil] .hb-demo-rolebar {
        bottom: 72px;
        left: 0;
        right: 0
    }

    body[data-hb-page=ogretmen-profil] .hb-sidebar {
        display: none
    }

    body[data-hb-page=ogretmen-profil] .hb-kategori-header {
        padding: 14px
    }

    body[data-hb-page=ogretmen-profil] .hb-kategori-prices {
        padding: 0 14px 14px
    }

    body[data-hb-page=ogretmen-profil] .hb-kategori-price-chip {
        font-size: .78rem;
        padding: 7px 10px
    }

    body[data-hb-page=ogretmen-profil] .hb-kategori-duration-label {
        display: none
    }

    body[data-hb-page=ogretmen-profil] .hb-review-tabs {
        padding: 3px;
        gap: 6px
    }

    body[data-hb-page=ogretmen-profil] .hb-review-tab {
        padding: 8px 10px;
        font-size: .8rem
    }

    body[data-hb-page=ogretmen-profil] .hb-review-score-grid {
        grid-template-columns: 1fr
    }

    body[data-hb-page=ogretmen-profil] .hb-review-breakdown-row {
        min-height: 44px;
        padding: 6px 0;
        gap: 6px
    }

    body[data-hb-page=ogretmen-profil] .hb-review-breakdown-label {
        font-size: .76rem;
        -webkit-line-clamp: 2
    }

    body[data-hb-page=ogretmen-profil] .hb-review-breakdown-rating {
        padding: 4px 6px 4px 8px;
        gap: 6px
    }

    body[data-hb-page=ogretmen-profil] .hb-review-breakdown-stars i {
        font-size: .68rem
    }

    body[data-hb-page=ogretmen-profil] .hb-review-breakdown-val {
        font-size: .74rem;
        min-width: 2em
    }

    body[data-hb-page=ogretmen-profil] .hb-card p.hb-review-text {
        font-size: .75rem
    }

    body[data-hb-page=ogretmen-profil] .hb-location-city {
        min-width: 62px;
        font-size: .84rem;
        padding-top: 4px
    }

    body[data-hb-page=ogretmen-profil] .hb-loc-all {
        padding: 5px 10px;
        font-size: .78rem;
        gap: 5px
    }

    body[data-hb-page=ogretmen-profil] .hb-loc-all i {
        font-size: .78rem
    }
}

@media(max-width: 480px) {
    body[data-hb-page=ogretmen-profil] .hb-review-header {
        flex-wrap:wrap;
        gap: 10px
    }

    body[data-hb-page=ogretmen-profil] .hb-review-date-right {
        margin-left: auto
    }

    body[data-hb-page=ogretmen-profil] .hb-review-item {
        padding: 16px 14px 14px
    }

    body[data-hb-page=ogretmen-profil] .hb-review-breakdown-row {
        min-height: 42px
    }

    body[data-hb-page=ogretmen-profil] .hb-review-breakdown-rating {
        padding: 3px 5px 3px 7px;
        gap: 5px;
        margin-left: 2px
    }

    body[data-hb-page=ogretmen-profil] .hb-review-breakdown-stars i {
        font-size: .64rem
    }

    body[data-hb-page=ogretmen-profil] .hb-locations-wrap {
        gap: 6px
    }

    body[data-hb-page=ogretmen-profil] .hb-loc-tag {
        padding: 5px 10px;
        font-size: .78rem
    }

    body[data-hb-page=ogretmen-profil] .hb-profile-name {
        font-size: 1.1rem
    }

    body[data-hb-page=ogretmen-profil] .hb-avatar-placeholder {
        width: 148px;
        height: 148px;
        font-size: 2.75rem
    }
}

body[data-hb-page=blog-detay] {
    --brand: #ff6969;
    --brand-soft: rgba(255, 105, 105, 0.12);
    --brand-hover: #f05555;
    --ink: #0f172a;
    --ink-muted: #475569;
    --muted: #64748b;
    --surface: #f1f5f9;
    --surface-elevated: #ffffff;
    --border: #e2e8f0;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 40px -12px rgba(15, 23, 42, 0.12);
    --ai-chatgpt: #10a37f;
    --ai-claude: #d97757;
    --ai-gemini: #4285f4;
    --ai-perplexity: #d98365;
    --ai-grok: #000000
}

body[data-hb-page=blog-detay] {
    font-family: "Plus Jakarta Sans",system-ui,sans-serif;
    color: var(--ink-muted);
    background: var(--surface);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

body[data-hb-page=blog-detay] .bd-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(24px,4vw,40px) 20px 96px;
    width: 100%
}

@media (max-width: 639px) {
    body[data-hb-page=blog-detay] .bd-page {
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right: max(16px,env(safe-area-inset-right))
    }
}

body[data-hb-page=blog-detay] .bd-breadcrumb {
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
    margin-top: 0;
    margin-bottom: 24px;
    padding: 8px 14px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow)
}

body[data-hb-page] .bd-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px
}

body[data-hb-page] .bd-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600
}

body[data-hb-page] .bd-breadcrumb a:hover {
    color: var(--brand)
}

body[data-hb-page] .bd-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: #cbd5e1;
    font-weight: 400
}

body[data-hb-page=blog-detay] .bd-hero-card {
    --bd-hero-bg: #fdf7f5;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
    background: var(--bd-hero-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden
}

body[data-hb-page] .bd-hero-fw {
    --bd-hero-bg: #fdf7f5;
    background: var(--bd-hero-bg)
}

body[data-hb-page=blog-detay] .bd-hero-fw__inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    min-height: clamp(260px,32vw,400px);
    align-items: stretch;
    max-width: 100%
}

@media (max-width: 900px) {
    body[data-hb-page=blog-detay] .bd-hero-fw__inner {
        grid-template-columns:1fr;
        min-height: 0
    }
}

body[data-hb-page] .bd-hero-fw__text {
    padding: clamp(24px,4vw,44px) clamp(18px,3.5vw,36px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bd-hero-bg);
    min-width: 0
}

body[data-hb-page] .bd-hero-fw__text h1 {
    font-size: clamp(1.45rem, 3.8vw, 2.1rem);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin: 0 0 14px
}

body[data-hb-page] .bd-hero-fw__lead {
    font-size: clamp(.92rem, 1.8vw, 1.02rem);
    color: #1e293b;
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 100%
}

body[data-hb-page] .bd-hero-fw__meta {
    font-size: 13px;
    color: #475569;
    font-weight: 500;
    margin: 0
}

body[data-hb-page] .bd-hero-fw__meta .bd-dot {
    margin: 0 .35em;
    opacity: .55
}

body[data-hb-page=blog-detay] .bd-hero-fw__visual {
    position: relative;
    min-height: 260px;
    background: #e8ddd8;
    min-width: 0
}

@media (max-width: 900px) {
    body[data-hb-page=blog-detay] .bd-hero-fw__visual {
        min-height:220px;
        aspect-ratio: 16/10
    }
}

body[data-hb-page] .bd-hero-fw__visual::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: min(45%,180px);
    background: linear-gradient(90deg,var(--bd-hero-bg) 0,rgba(253,247,245,0) 100%);
    z-index: 1;
    pointer-events: none
}

body[data-hb-page] .bd-hero-fw__img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: 70% center;
    display: block
}

body[data-hb-page=blog-detay] .bd-layout {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr
}

@media (max-width: 639px) {
    body[data-hb-page=blog-detay] .bd-hero-card {
        margin-bottom:25px
    }

    body[data-hb-page=blog-detay] .bd-breadcrumb {
        margin-bottom: 25px
    }

    body[data-hb-page=blog-detay] .bd-layout {
        gap: 0
    }
}

@media (min-width: 1024px) {
    body[data-hb-page=blog-detay] .bd-layout {
        grid-template-columns:280px minmax(0,1fr);
        align-items: stretch
    }
}

body[data-hb-page] .bd-main-col {
    min-width: 0
}

body[data-hb-page] .bd-sidebar {
    display: block;
    min-height: 0;
    position: relative
}

body[data-hb-page=blog-detay] .bd-sidebar-track {
    position: sticky;
    top: calc(72px + 16px + env(safe-area-inset-top,0px));
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: start;
    max-height: calc(100vh - 88px - env(safe-area-inset-top,0px))
}

body[data-hb-page=blog-detay] .bd-toc {
    position: relative;
    z-index: 2;
    background: linear-gradient(165deg,#fff 0,#fafafa 55%,#f8fafc 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 0;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto
}

body[data-hb-page=blog-detay] .bd-toc__close {
    display: none
}

body[data-hb-page=blog-detay] .bd-toc__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    background: linear-gradient(135deg,rgba(255,105,105,.1) 0,rgba(251,113,133,.06) 100%);
    border-bottom: 1px solid rgba(226,232,240,.9);
    flex-shrink: 0
}

body[data-hb-page] .bd-toc__head-text {
    flex: 1;
    min-width: 0
}

body[data-hb-page=blog-detay] .bd-toc__head-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--brand) 0,#fb7185 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(255,105,105,.35)
}

body[data-hb-page=blog-detay] .bd-toc__head-text h2 {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -.02em
}

body[data-hb-page=blog-detay] .bd-toc__head-text p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.4
}

body[data-hb-page=blog-detay] .bd-toc__list-wrap {
    padding: 16px 18px 20px;
    max-height: min(52vh,420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0
}

body[data-hb-page=blog-detay] .bd-toc-backdrop {
    display: none
}

body[data-hb-page=blog-detay] .bd-toc-fab {
    display: none
}

@media (max-width: 1023px) {
    body[data-hb-page=blog-detay] .bd-sidebar-track {
        position:static;
        max-height: none;
        gap: 0
    }

    body[data-hb-page=blog-detay] .bd-toc {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(75vw,calc(100vw - max(16px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px))));
        max-width: 100%;
        height: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
        z-index: 1205;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1),visibility .28s;
        box-shadow: -12px 0 40px rgba(15,23,42,.18)
    }

    body[data-hb-page] .bd-toc.bd-toc--open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto
    }

    body[data-hb-page=blog-detay] .bd-toc-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(15,23,42,.45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease,visibility .25s
    }

    body[data-hb-page] .bd-toc-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

    body[data-hb-page=blog-detay] .bd-toc-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: max(16px,env(safe-area-inset-right));
        bottom: calc(76px + env(safe-area-inset-bottom,0px));
        width: 52px;
        height: 52px;
        padding: 0;
        border: none;
        border-radius: 16px;
        z-index: 1190;
        cursor: pointer;
        color: #fff;
        background: linear-gradient(135deg,var(--brand) 0,#fb7185 100%);
        box-shadow: 0 8px 28px rgba(255,105,105,.45);
        transition: transform .15s ease,box-shadow .2s
    }

    body[data-hb-page] .bd-toc-fab:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(255,105,105,.5)
    }

    body[data-hb-page] .bd-toc-fab:active {
        transform: translateY(0)
    }

    body[data-hb-page] .bd-toc-fab i {
        font-size: 1.35rem
    }

    body[data-hb-page=blog-detay] .bd-toc__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: -6px -8px -6px 8px;
        flex-shrink: 0;
        border: none;
        border-radius: 12px;
        background: rgba(15,23,42,.06);
        color: var(--ink-muted);
        cursor: pointer;
        transition: background .2s,color .2s
    }

    body[data-hb-page] .bd-toc__close:hover {
        background: rgba(255,105,105,.12);
        color: var(--brand)
    }

    body[data-hb-page=blog-detay] .bd-toc__list-wrap {
        max-height: none;
        flex: 1
    }

    body[data-hb-page].bd-toc-drawer-open {
        overflow: hidden;
        touch-action: none
    }

    body[data-hb-page] .bd-toc .bd-read-wrap {
        flex-shrink: 0
    }
}

body[data-hb-page] .bd-toc ul {
    list-style: none;
    margin: 0;
    padding: 0
}

body[data-hb-page] .bd-toc li {
    margin-bottom: 6px
}

body[data-hb-page] .bd-toc li:last-child {
    margin-bottom: 0
}

body[data-hb-page=blog-detay] .bd-toc a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 10px;
    transition: color .2s,background .2s
}

body[data-hb-page=blog-detay] .bd-toc a::before {
    content: "";
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg,var(--brand),#fda4af);
    margin-top: 6px;
    flex-shrink: 0;
    opacity: .35;
    align-self: stretch;
    min-height: 1em
}

body[data-hb-page] .bd-toc a:hover {
    color: var(--brand);
    background: rgba(255,105,105,.06)
}

body[data-hb-page] .bd-toc a:hover::before {
    opacity: 1
}

@media (max-width: 1023px) {
    body[data-hb-page=blog-detay] .bd-toc__head {
        padding:14px 16px 12px;
        gap: 10px
    }

    body[data-hb-page=blog-detay] .bd-toc__head-text h2 {
        font-size: 13px
    }

    body[data-hb-page=blog-detay] .bd-toc__head-text p {
        font-size: 11px
    }

    body[data-hb-page=blog-detay] .bd-toc__head-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem
    }

    body[data-hb-page=blog-detay] .bd-toc__close {
        width: 36px;
        height: 36px;
        margin: -4px -6px -4px 6px
    }

    body[data-hb-page=blog-detay] .bd-toc__list-wrap {
        padding: 12px 14px 16px
    }

    body[data-hb-page=blog-detay] .bd-toc a {
        font-size: 12px;
        gap: 8px;
        line-height: 1.42;
        padding: 6px 8px;
        margin: 0 -8px
    }

    body[data-hb-page=blog-detay] .bd-toc a::before {
        margin-top: 5px
    }
}

body[data-hb-page] .bd-read-wrap {
    margin-top: 0;
    padding: 16px 18px 20px;
    border-top: 1px solid var(--border);
    background: rgba(248,250,252,.6)
}

@media (max-width: 1023px) {
    body[data-hb-page] .bd-read-wrap--in-toc {
        display:none
    }

    body[data-hb-page=blog-detay] .bd-read-wrap--mobile {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        margin: 0;
        padding: 12px 18px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom,0px));
        border-top: 1px solid var(--border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 -8px 32px rgba(15,23,42,.08)
    }

    body[data-hb-page=blog-detay] .bd-page {
        padding-bottom: calc(96px + 72px + env(safe-area-inset-bottom,0px))
    }
}

@media (min-width: 1024px) {
    body[data-hb-page=blog-detay] .bd-read-wrap--mobile {
        display:none!important
    }
}

body[data-hb-page] .bd-read-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px
}

body[data-hb-page] .bd-read-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8
}

body[data-hb-page] .bd-read-pct {
    font-size: 12px;
    font-weight: 800;
    color: var(--brand);
    font-variant-numeric: tabular-nums
}

body[data-hb-page] .bd-read-track {
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden
}

body[data-hb-page] .bd-read-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--brand) 0,#fb7185 100%);
    transition: width .12s ease-out
}

body[data-hb-page] .bd-article {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(22px,4vw,36px);
    box-shadow: var(--shadow)
}

body[data-hb-page] .bd-article__body {
    max-width: none;
    width: 100%;
    min-width: 0
}

body[data-hb-page] .bd-article__body>p {
    margin: 0 0 1.15em;
    font-size: 14px;
    line-height: 1.75
}

body[data-hb-page] .bd-article__body h2 {
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 800;
    color: var(--ink);
    margin: 2em 0 .75em;
    letter-spacing: -.02em;
    scroll-margin-top: 100px
}

body[data-hb-page] .bd-article__body h2:first-of-type {
    margin-top: 0
}

body[data-hb-page] .bd-article__body h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent-slate,#1e293b);
    margin: 1.5em 0 .6em;
    scroll-margin-top: 96px
}

body[data-hb-page] .bd-article__body ul {
    margin: .75em 0 1.15em 1.25em
}

body[data-hb-page] .bd-article__body ul ul {
    margin: .5em 0 .5em .85em;
    list-style: circle
}

body[data-hb-page] .bd-article__body a {
    color: var(--brand-hover);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px
}

body[data-hb-page] .bd-article__body a:hover {
    color: var(--brand)
}

body[data-hb-page] .bd-article__body li {
    margin-bottom: .45em;
    font-size: 14px;
    line-height: 1.7
}

body[data-hb-page] .bd-article__body strong {
    color: var(--ink);
    font-weight: 700
}

body[data-hb-page] .bd-article__body ol {
    margin: .75em 0 1.15em 1.35em;
    padding: 0
}

body[data-hb-page] .bd-article__body ol li {
    list-style: decimal
}

body[data-hb-page] .bd-article__body hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--border),transparent);
    margin: 2.25em 0
}

body[data-hb-page] .bd-article__body blockquote {
    margin: 1.25em 0;
    padding: 16px 18px 16px 20px;
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(90deg,var(--brand-soft),transparent);
    color: var(--ink-muted);
    font-style: italic;
    font-size: 14px;
    line-height: 1.7
}

body[data-hb-page] .bd-article__body blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--muted)
}

body[data-hb-page] .bd-figure {
    margin: 1.5em 0
}

body[data-hb-page] .bd-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border)
}

body[data-hb-page] .bd-figure figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45
}

body[data-hb-page=blog-detay] .bd-gallery {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin: 1.5em 0
}

@media (max-width: 520px) {
    body[data-hb-page=blog-detay] .bd-gallery {
        grid-template-columns:1fr
    }
}

body[data-hb-page] .bd-gallery img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border)
}

body[data-hb-page] .bd-video-wrap {
    position: relative;
    margin: 1.5em 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0f172a;
    aspect-ratio: 16/9;
    max-width: 100%
}

body[data-hb-page] .bd-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

body[data-hb-page] .bd-table-wrap {
    margin: 1.5em 0;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    -webkit-overflow-scrolling: touch
}

body[data-hb-page] .bd-article__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 480px
}

body[data-hb-page] .bd-article__body td,body[data-hb-page] .bd-article__body th {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border)
}

body[data-hb-page] .bd-article__body thead th {
    background: var(--surface);
    font-weight: 800;
    color: var(--ink);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase
}

body[data-hb-page] .bd-article__body tbody tr:nth-child(2n) {
    background: rgba(241,245,249,.65)
}

body[data-hb-page] .bd-article__body tbody tr:last-child td {
    border-bottom: none
}

body[data-hb-page] .bd-callout {
    margin: 1.5em 0;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,105,105,.28);
    background: linear-gradient(135deg,rgba(255,105,105,.08) 0,#fff 55%);
    display: flex;
    gap: 12px;
    align-items: flex-start
}

body[data-hb-page] .bd-callout__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem
}

body[data-hb-page] .bd-callout__body {
    min-width: 0
}

body[data-hb-page] .bd-callout__body p:last-child {
    margin-bottom: 0
}

body[data-hb-page] .bd-code-block {
    margin: 1.25em 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: #0f172a;
    overflow: hidden
}

body[data-hb-page] .bd-code-block__label {
    display: block;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    background: rgba(15,23,42,.92);
    border-bottom: 1px solid rgba(148,163,184,.2)
}

body[data-hb-page] .bd-article__body pre {
    margin: 0;
    padding: 16px 18px;
    overflow-x: auto;
    font-family: ui-monospace,"Cascadia Code","Segoe UI Mono",Menlo,monospace;
    font-size: 13px;
    line-height: 1.55;
    color: #e2e8f0
}

body[data-hb-page] .bd-dl {
    margin: 1.15em 0;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
    background: var(--surface)
}

body[data-hb-page] .bd-dl dt {
    font-weight: 800;
    color: var(--ink);
    margin-top: 12px
}

body[data-hb-page] .bd-dl dt:first-child {
    margin-top: 0
}

body[data-hb-page] .bd-dl dd {
    margin: 6px 0 0 0;
    padding-left: 0
}

body[data-hb-page] .bd-ai {
    margin: 0;
    padding: 0;
    border: 1px solid rgba(226,232,240,.95);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg,#fff 0,#f8fafc 48%,#fff 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,var(--shadow);
    overflow: hidden
}

body[data-hb-page] .bd-ai.bd-ai--article-top {
    margin: 0 0 25px;
    width: 100%
}

body[data-hb-page] .bd-ai__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 14px;
    background: linear-gradient(135deg,rgba(255,105,105,.09) 0,rgba(251,113,133,.05) 100%);
    border-bottom: 1px solid rgba(226,232,240,.85)
}

body[data-hb-page] .bd-ai__head-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg,#fff 0,#fef2f2 100%);
    border: 1px solid rgba(255,105,105,.22);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0
}

body[data-hb-page] .bd-ai__title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.3
}

body[data-hb-page] .bd-ai__subtitle {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.35
}

body[data-hb-page] .bd-ai__body {
    padding: 16px 18px 18px
}

body[data-hb-page=blog-detay] .bd-ai__icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: rgba(241,245,249,.65);
    border: 1px solid rgba(226,232,240,.8)
}

body[data-hb-page=blog-detay] .bd-ai__btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid #e8e8e8;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .2s,box-shadow .2s,transform .15s,background .2s;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6)
}

body[data-hb-page] .bd-ai__btn:hover {
    box-shadow: 0 6px 18px rgba(15,23,42,.12);
    border-color: #cbd5e1;
    background: #fafafa;
    transform: translateY(-1px)
}

body[data-hb-page] .bd-ai__btn:active {
    transform: translateY(0)
}

body[data-hb-page] .bd-ai__btn.bd-ai__btn--mask {
    position: relative
}

body[data-hb-page=blog-detay] .bd-ai__btn--mask .bd-ai__mask-i {
    display: block;
    width: 26px;
    height: 26px;
    background-color: var(--ai-c,#0f172a);
    -webkit-mask-image: var(--ai-icon);
    mask-image: var(--ai-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center
}

body[data-hb-page] .bd-ai__btn .bd-ai__custom-svg {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0
}

body[data-hb-page=blog-detay] .bd-ai__btn--logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    flex-shrink: 0
}

body[data-hb-page=blog-detay] .bd-ai__btn--logo.bd-ai__copilot-wrap {
    padding: 4px;
    background: #fff;
    border-color: #e8e8e8
}

body[data-hb-page=blog-detay] .bd-ai__btn--logo.bd-ai__copilot-wrap img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    display: block
}

body[data-hb-page] .bd-ai__btn span.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

body[data-hb-page] .bd-ai__desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0
}

@media (max-width: 639px) {
    body[data-hb-page=blog-detay] .bd-ai__icons {
        flex-wrap:nowrap;
        justify-content: center;
        gap: 0;
        column-gap: 0;
        padding: 8px 4px;
        margin-bottom: 10px
    }

    body[data-hb-page=blog-detay] .bd-ai__btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin: 0 8px;
        border-radius: 10px
    }

    body[data-hb-page=blog-detay] .bd-ai__btn--logo img {
        width: 22px;
        height: 22px
    }

    body[data-hb-page=blog-detay] .bd-ai__btn--logo.bd-ai__copilot-wrap {
        padding: 2px
    }

    body[data-hb-page=blog-detay] .bd-ai__btn--logo.bd-ai__copilot-wrap img {
        width: 24px;
        height: 24px
    }

    body[data-hb-page=blog-detay] .bd-ai__btn--mask .bd-ai__mask-i {
        width: 22px;
        height: 22px
    }
}

body[data-hb-page] .bd-tags {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border)
}

body[data-hb-page] .bd-tags__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px
}

body[data-hb-page] .bd-tags__head h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0
}

body[data-hb-page] .bd-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

body[data-hb-page] .bd-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .2s,color .2s,background .2s
}

body[data-hb-page] .bd-tag:hover {
    border-color: rgba(255,105,105,.45);
    color: var(--brand);
    background: rgba(255,105,105,.06)
}

body[data-hb-page] .bd-tag i {
    font-size: .85rem;
    margin-right: 6px;
    opacity: .7
}

body[data-hb-page=blog-detay] .bd-share {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

body[data-hb-page=blog-detay] .bd-share__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink)
}

body[data-hb-page=blog-detay] .bd-share__links {
    display: flex;
    gap: 8px
}

body[data-hb-page=blog-detay] .bd-share__links a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: transform .15s,filter .2s,box-shadow .2s;
    box-shadow: 0 2px 8px rgba(15,23,42,.12)
}

body[data-hb-page] .bd-share__links a:hover {
    filter: brightness(1.08);
    transform: translateY(-2px)
}

body[data-hb-page] .bd-share__links a:active {
    transform: translateY(0)
}

body[data-hb-page=blog-detay] .bd-share__links a i {
    color: #fff;
    font-size: 1.1rem
}

body[data-hb-page] .bd-share--native {
    background: linear-gradient(135deg,#ff6969 0,#f97316 100%)
}

body[data-hb-page] .bd-share--copy {
    background: linear-gradient(135deg,#64748b 0,#475569 100%)
}

body[data-hb-page] .bd-share--x {
    background: #000
}

body[data-hb-page] .bd-share--fb {
    background: #1877f2
}

body[data-hb-page] .bd-share--wa {
    background: #25d366
}

@media (max-width: 639px) {
    body[data-hb-page=blog-detay] .bd-share {
        flex-direction:column;
        align-items: stretch;
        gap: 8px
    }

    body[data-hb-page=blog-detay] .bd-share__label {
        font-size: 13px
    }

    body[data-hb-page=blog-detay] .bd-share__links {
        flex-wrap: nowrap;
        width: 100%;
        gap: 6px;
        justify-content: space-between
    }

    body[data-hb-page=blog-detay] .bd-share__links a {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        height: 38px;
        border-radius: 10px
    }

    body[data-hb-page=blog-detay] .bd-share__links a i {
        font-size: 1.05rem
    }
}

body[data-hb-page=blog-detay] .bd-pager {
    margin-top: 32px;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    body[data-hb-page=blog-detay] .bd-pager {
        grid-template-columns:1fr 1fr
    }
}

body[data-hb-page] .bd-pager__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s,box-shadow .2s,transform .18s;
    min-height: 100%;
    position: relative;
    overflow: hidden
}

body[data-hb-page] .bd-pager__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,var(--brand),#fda4af);
    opacity: 0;
    transition: opacity .2s
}

body[data-hb-page] .bd-pager__card:hover {
    border-color: rgba(255,105,105,.35);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px)
}

body[data-hb-page] .bd-pager__card:hover::before {
    opacity: 1
}

body[data-hb-page] .bd-pager__card--next {
    text-align: right;
    align-items: flex-end
}

body[data-hb-page] .bd-pager__card--next::before {
    left: auto;
    right: 0
}

body[data-hb-page] .bd-pager__kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 6px
}

body[data-hb-page] .bd-pager__title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
    letter-spacing: -.02em;
    transition: color .2s
}

body[data-hb-page] .bd-pager__card:hover .bd-pager__title {
    color: var(--brand-hover)
}

body[data-hb-page] .bd-pager__hint {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600
}

body[data-hb-page] .bd-comments {
    margin-top: 40px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(22px,4vw,32px);
    box-shadow: var(--shadow)
}

body[data-hb-page] .bd-comments__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border)
}

body[data-hb-page] .bd-comments__top h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px
}

body[data-hb-page] .bd-comments__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg,var(--brand) 0,#fb7185 100%);
    border-radius: 999px
}

body[data-hb-page] .bd-comments__empty {
    text-align: center;
    padding: 28px 16px;
    border-radius: var(--radius-lg);
    border: 1px dashed #cbd5e1;
    background: var(--surface);
    margin-bottom: 24px
}

body[data-hb-page] .bd-comments__empty i {
    font-size: 2rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: 10px
}

body[data-hb-page] .bd-comments__empty p {
    margin: 0;
    font-size: 14px;
    color: var(--muted)
}

body[data-hb-page] .bd-rating {
    margin: 0 0 18px;
    padding: 0;
    border: none;
    min-width: 0
}

body[data-hb-page] .bd-rating__legend {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    padding: 0
}

body[data-hb-page] .bd-rating__optional {
    font-weight: 600;
    color: var(--muted);
    font-size: 12px
}

body[data-hb-page] .bd-rating__hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45
}

body[data-hb-page] .bd-rating__interactive {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0
}

body[data-hb-page] .bd-rating__star-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2px
}

body[data-hb-page] .bd-rating__star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: 0 0;
    color: #d1d5db;
    cursor: pointer;
    transition: color .15s ease,transform .12s ease,background .15s ease
}

body[data-hb-page] .bd-rating__star-btn i {
    font-size: 1.4rem;
    line-height: 1;
    display: block
}

body[data-hb-page] .bd-rating__star-btn:hover {
    color: #fcd34d;
    background: rgba(251,191,36,.12);
    transform: scale(1.06)
}

body[data-hb-page] .bd-rating__star-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

body[data-hb-page] .bd-rating__star-btn.is-active {
    color: #f59e0b
}

body[data-hb-page] .bd-rating__star-btn.is-active:hover {
    color: #d97706
}

body[data-hb-page] .bd-rating__value {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

body[data-hb-page] .bd-comment-form__guest-fields {
    margin-bottom: 18px
}

body[data-hb-page=blog-detay] .bd-comment-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px
}

@media (max-width: 520px) {
    body[data-hb-page=blog-detay] .bd-comment-form__row {
        grid-template-columns:1fr
    }
}

body[data-hb-page] .bd-comment-form__guest-fields input[type=email],body[data-hb-page] .bd-comment-form__guest-fields input[type=text] {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page] .bd-comment-form__guest-fields input:focus {
    outline: 0;
    border-color: rgba(255,105,105,.45);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

body[data-hb-page] .bd-comment-form__account-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-left: 4px solid var(--brand)
}

body[data-hb-page] .bd-comment-form__account-notice strong {
    color: var(--ink)
}

body[data-hb-page] #hbHeader:not(.hb-logged-in)~main .bd-comment-form--member {
    display: none!important
}

body[data-hb-page] #hbHeader.hb-logged-in~main .bd-comment-form--guest {
    display: none!important
}

body[data-hb-page] #hbHeader.hb-logged-in~main .bd-comment-form--member {
    display: block!important
}

body[data-hb-page] .bd-comments__list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px
}

body[data-hb-page] .bd-comment {
    padding: 18px 18px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    box-shadow: var(--shadow)
}

body[data-hb-page] .bd-comment__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px
}

body[data-hb-page] .bd-comment__author {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    padding: 0;
    letter-spacing: -.02em
}

body[data-hb-page] .bd-comment__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 6px;
    vertical-align: middle
}

body[data-hb-page] .bd-comment__meta {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap
}

body[data-hb-page] .bd-comment__stars {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
    color: #f59e0b
}

body[data-hb-page] .bd-comment__stars i {
    font-size: .95rem
}

body[data-hb-page] .bd-comment__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-muted)
}

body[data-hb-page] .bd-comment-form__guest-fields label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px
}

body[data-hb-page] .bd-comment-form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px
}

body[data-hb-page] .bd-comment-form textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
    transition: border-color .2s,box-shadow .2s
}

body[data-hb-page] .bd-comment-form textarea:focus {
    outline: 0;
    border-color: rgba(255,105,105,.45);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

body[data-hb-page] .bd-comment-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px
}

body[data-hb-page] .bd-comment-form__note {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px
}

body[data-hb-page] .bd-comment-form__note i {
    color: var(--brand)
}

@keyframes bd-modal-icon-pop {
    0% {
        opacity: 0;
        transform: scale(.55) rotate(-10deg)
    }

    70% {
        transform: scale(1.06) rotate(2deg)
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0)
    }
}

body[data-hb-page] .bd-comment-sent-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease,visibility .3s ease
}

body[data-hb-page] .bd-comment-sent-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

body[data-hb-page] .bd-comment-sent-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.52);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .35s ease
}

body[data-hb-page] .bd-comment-sent-modal.is-open .bd-comment-sent-modal__backdrop {
    opacity: 1
}

body[data-hb-page] .bd-comment-sent-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: 0 0;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    transition: background .2s ease,color .2s ease
}

body[data-hb-page] .bd-comment-sent-modal__close:hover {
    background: rgba(15,23,42,.06);
    color: var(--ink)
}

body[data-hb-page] .bd-comment-sent-modal__close:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

body[data-hb-page] .bd-comment-sent-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 26px 28px 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px) scale(.93);
    transition: opacity .42s cubic-bezier(.22, 1, .36, 1),transform .48s cubic-bezier(.22, 1, .36, 1);
    transition-delay: 40ms
}

body[data-hb-page=blog-detay] .bd-comment-sent-modal.is-open .bd-comment-sent-modal__panel {
    opacity: 1;
    transform: translateY(0) scale(1)
}

body[data-hb-page] .bd-comment-sent-modal:not(.is-open) .bd-comment-sent-modal__panel {
    transition-delay: 0s
}

body[data-hb-page] .bd-comment-sent-modal__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    opacity: 0;
    transform: scale(.55) rotate(-10deg)
}

body[data-hb-page=blog-detay] .bd-comment-sent-modal.is-open .bd-comment-sent-modal__icon {
    animation: bd-modal-icon-pop .58s cubic-bezier(.34,1.4,.64,1) .12s both
}

body[data-hb-page] .bd-comment-sent-modal__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0 0 10px
}

body[data-hb-page] .bd-comment-sent-modal__text {
    font-size: 14px;
    line-height: 1.62;
    color: var(--ink-muted);
    margin: 0 0 22px
}

body[data-hb-page] .bd-comment-sent-modal__ok {
    width: 100%;
    max-width: 220px
}

body[data-hb-page].bd-comment-modal-open {
    overflow: hidden
}

@media (prefers-reduced-motion:reduce) {
    body[data-hb-page] .bd-comment-sent-modal,body[data-hb-page] .bd-comment-sent-modal__backdrop,body[data-hb-page] .bd-comment-sent-modal__icon,body[data-hb-page] .bd-comment-sent-modal__panel {
        animation: none!important;
        transition-duration: 0s!important
    }

    body[data-hb-page=blog-detay] .bd-comment-sent-modal.is-open .bd-comment-sent-modal__panel {
        transform: none
    }

    body[data-hb-page=blog-detay] .bd-comment-sent-modal.is-open .bd-comment-sent-modal__icon {
        opacity: 1;
        transform: none
    }
}

body[data-hb-page] .bd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    transition: background .2s,transform .15s
}

body[data-hb-page] .bd-btn:hover {
    background: var(--brand-hover)
}

body[data-hb-page] .bd-btn:active {
    transform: scale(.98)
}

body[data-hb-page] .bd-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none
}

body[data-hb-page] .bd-related {
    margin-top: 48px
}

body[data-hb-page] .bd-related__head {
    margin-bottom: 22px
}

body[data-hb-page] .bd-related__head h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0 0 6px
}

body[data-hb-page] .bd-related__head p {
    margin: 0;
    font-size: 14px;
    color: var(--muted)
}

body[data-hb-page=blog-detay] .blog-card h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.38;
    transition: color .2s
}

body[data-hb-page=yardim-merkezi] {
    --brand: #ff6969;
    --brand-soft: rgba(255, 105, 105, 0.12);
    --brand-hover: #f05555;
    --ink: #0f172a;
    --ink-muted: #475569;
    --muted: #64748b;
    --surface: #f1f5f9;
    --surface-elevated: #ffffff;
    --border: #e2e8f0;
    --accent-slate: #1e293b;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 40px -12px rgba(15, 23, 42, 0.12);
    --wa-green: #25d366;
    --wa-green-dark: #128c7e
}

body[data-hb-page=yardim-merkezi] .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 120px;
    width: 100%;
    box-sizing: border-box
}

@media (max-width: 639px) {
}

body[data-hb-page=yardim-merkezi] .ym-hero {
    display: grid;
    gap: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    background: var(--surface-elevated)
}

@media (min-width: 900px) {
    body[data-hb-page=yardim-merkezi] .ym-hero {
        grid-template-columns:1.05fr 0.95fr;
        min-height: 380px
    }
}

body[data-hb-page] .ym-hero__copy {
    padding: clamp(1.75rem,4vw,2.75rem);
    background: radial-gradient(120% 80% at 0 0,rgba(255,105,105,.16) 0,transparent 55%),linear-gradient(165deg,#0f172a 0,#1e293b 48%,#0f172a 100%);
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

body[data-hb-page] .ym-hero__copy h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.85rem, 4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
    color: #f8fafc
}

body[data-hb-page] .ym-hero__copy h1 .ym-gradient {
    background: linear-gradient(105deg,#fda4af 0,#ff6969 45%,#fb7185 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

body[data-hb-page] .ym-hero__copy p {
    margin: 0;
    font-size: .98rem;
    color: #cbd5e1;
    max-width: 36rem
}

body[data-hb-page=yardim-merkezi] .ym-hero__visual {
    position: relative;
    min-height: 220px;
    background: #e2e8f0
}

@media (min-width: 900px) {
    body[data-hb-page=yardim-merkezi] .ym-hero__visual {
        min-height:auto
    }
}

body[data-hb-page] .ym-hero__visual img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block
}

body[data-hb-page] .ym-hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(15,23,42,.45) 0,transparent 50%);
    pointer-events: none
}

body[data-hb-page=yardim-merkezi] .ym-quick {
    display: grid;
    gap: 16px;
    margin-top: 28px
}

@media (min-width: 720px) {
    body[data-hb-page=yardim-merkezi] .ym-quick {
        grid-template-columns:repeat(3,1fr)
    }
}

body[data-hb-page] .ym-quick-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    padding: 20px 20px 22px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .2s ease,box-shadow .2s ease,border-color .2s
}

body[data-hb-page] .ym-quick-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255,105,105,.22)
}

body[data-hb-page] .ym-quick-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: var(--brand-soft);
    color: var(--brand)
}

body[data-hb-page] .ym-quick-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink)
}

body[data-hb-page] .ym-quick-card p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0
}

body[data-hb-page] .ym-steps-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 28px
}

body[data-hb-page] .ym-steps-intro h2 {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin-bottom: 10px
}

body[data-hb-page] .ym-steps-intro p {
    font-size: 15px;
    color: var(--muted);
    margin: 0
}

body[data-hb-page=yardim-merkezi] .ym-flow {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr
}

@media (min-width: 700px) {
    body[data-hb-page=yardim-merkezi] .ym-flow {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

body[data-hb-page] .ym-flow-card {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    padding: 22px 22px 24px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .22s ease,box-shadow .22s ease,border-color .2s
}

body[data-hb-page] .ym-flow-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0
}

body[data-hb-page] .ym-flow-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255,105,105,.2)
}

body[data-hb-page] .ym-flow-card--a::before {
    background: linear-gradient(90deg,#ff6969,#fda4af)
}

body[data-hb-page] .ym-flow-card--b::before {
    background: linear-gradient(90deg,#0d9488,#5eead4)
}

body[data-hb-page] .ym-flow-card--c::before {
    background: linear-gradient(90deg,#d97706,#fbbf24)
}

body[data-hb-page] .ym-flow-card--d::before {
    background: linear-gradient(90deg,#7c3aed,#a78bfa)
}

body[data-hb-page] .ym-flow-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px
}

body[data-hb-page] .ym-flow-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    flex-shrink: 0
}

body[data-hb-page] .ym-flow-card--a .ym-flow-card__icon {
    color: #be123c;
    background: linear-gradient(145deg,#fff1f2,#ffe4e6);
    border: 1px solid rgba(255,105,105,.25)
}

body[data-hb-page] .ym-flow-card--b .ym-flow-card__icon {
    color: #0f766e;
    background: linear-gradient(145deg,#ecfdf5,#d1fae5);
    border: 1px solid rgba(13,148,136,.22)
}

body[data-hb-page] .ym-flow-card--c .ym-flow-card__icon {
    color: #b45309;
    background: linear-gradient(145deg,#fffbeb,#fef3c7);
    border: 1px solid rgba(217,119,6,.22)
}

body[data-hb-page] .ym-flow-card--d .ym-flow-card__icon {
    color: #5b21b6;
    background: linear-gradient(145deg,#f5f3ff,#ede9fe);
    border: 1px solid rgba(124,58,237,.2)
}

body[data-hb-page] .ym-flow-card__step {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--muted);
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border)
}

body[data-hb-page] .ym-flow-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0 0 10px;
    line-height: 1.3
}

body[data-hb-page] .ym-flow-card p {
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--muted);
    margin: 0
}

body[data-hb-page] .ym-wa-float {
    position: fixed;
    right: max(20px,env(safe-area-inset-right));
    bottom: max(24px,env(safe-area-inset-bottom));
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg,#25d366,#128c7e);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(18,140,126,.45);
    transition: transform .2s ease,box-shadow .2s ease
}

body[data-hb-page] .ym-wa-float:hover {
    transform: scale(1.03);
    box-shadow: 0 16px 40px rgba(18,140,126,.5);
    color: #fff
}

body[data-hb-page] .ym-wa-float i {
    font-size: 1.5rem
}

body[data-hb-page=yardim-merkezi] .ym-wa-float__text {
    display: none
}

@media (min-width: 400px) {
    body[data-hb-page=yardim-merkezi] .ym-wa-float__text {
        display:inline
    }
}

@media (max-width: 639px) {
}

@media (max-width: 959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 639px) {
}

@media (max-width: 479px) {
}

body[data-hb-page] .ym-contact-panel {
    margin-top: 48px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: radial-gradient(100% 80% at 100% 0,rgba(255,105,105,.08) 0,transparent 50%),radial-gradient(80% 60% at 0 100%,rgba(13,148,136,.08) 0,transparent 45%),var(--surface-elevated);
    padding: clamp(24px,4vw,40px);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden
}

body[data-hb-page] .ym-contact-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--brand),#94a3b8,#0d9488);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0
}

body[data-hb-page] .ym-contact-panel__head {
    max-width: 640px;
    margin-bottom: 26px
}

body[data-hb-page] .ym-contact-panel__head h2 {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0 0 10px
}

body[data-hb-page] .ym-contact-panel__head p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted)
}

body[data-hb-page=yardim-merkezi] .ym-contact-panel__grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr
}

@media (min-width: 560px) {
    body[data-hb-page=yardim-merkezi] .ym-contact-panel__grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (min-width: 960px) {
    body[data-hb-page=yardim-merkezi] .ym-contact-panel__grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

body[data-hb-page] .ym-chan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.85);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s,box-shadow .2s,transform .2s;
    min-height: 100%
}

body[data-hb-page] .ym-chan:hover {
    border-color: rgba(255,105,105,.35);
    box-shadow: 0 10px 28px -16px rgba(15,23,42,.12);
    transform: translateY(-2px)
}

body[data-hb-page] .ym-chan__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0
}

body[data-hb-page] .ym-chan--phone .ym-chan__icon {
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(255,105,105,.2)
}

body[data-hb-page] .ym-chan--mail .ym-chan__icon {
    color: #0369a1;
    background: rgba(14,165,233,.1);
    border: 1px solid rgba(14,165,233,.2)
}

body[data-hb-page] .ym-chan--addr .ym-chan__icon {
    color: #0d9488;
    background: rgba(13,148,136,.1);
    border: 1px solid rgba(13,148,136,.2)
}

body[data-hb-page] .ym-chan__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

body[data-hb-page] .ym-chan__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
    word-break: break-word
}

body[data-hb-page] .ym-chan--addr .ym-chan__value {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-muted)
}

body[data-hb-page] .ym-chan__hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: auto;
    padding-top: 4px
}

body[data-hb-page] .ym-chan--addr {
    cursor: default
}

body[data-hb-page] .ym-chan--addr:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none
}

body[data-hb-page] .ym-contact-panel__note {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
    background: rgba(241,245,249,.9);
    border: 1px dashed var(--border)
}

body[data-hb-page] .ym-contact-panel__note a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none
}

body[data-hb-page] .ym-contact-panel__note a:hover {
    text-decoration: underline
}

body[data-hb-page] {
    margin: 0
}

h1 , h2 , h3{
    margin: 0
}

.hb-f2__contacts i {
    margin-right:.3rem;
}
.hb-f2__contacts  span {
    display:flex;
    align-items:start;
}
#dtRequestForm .dt-form-label {
    display: flex;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    color: rgb(71, 85, 105);
}
#comboFormCityList , #comboDistList {
    display: inline-block;
}

.d-none { 
    display: none;
}