.error,.hero-title,.kd-auth-sub,.kd-auth-title,.kd-bottom-link,.kd-err,.kd-fg-link,.kd-fg-sub,.kd-fg-title,.kd-link,.kd-mini,.kd-ok,.kd-reg-sub,.kd-reg-title,.kd-success,.kd-title,.mpDash,.price,.toggle {
    text-align:center
}
:root {
    --green:#2E7D32;
    --green2:#1b5e20;
    --t0:rgba(17,24,39,.92);
    --t1:rgba(17,24,39,.78);
    --t2:rgba(17,24,39,.58)
}
.authTitle,.footerBrandName,.hero-hover-card h4,.hero-title,.kd-roletitle,.login-tab {
    letter-spacing:.2px
}
.contactText,.contactVal,.iosText,.kd-rolehint,.packNavBtn,.perkPill {
    white-space:nowrap
}
.authDD,.authItem::before,.hero-cta::after,.kd-auth-glow,.kd-rolepick::after,.roadmap-card::after,.system-card::after {
    pointer-events:none
}
.authItem,.btn-cta,.btnPackDetail,.demoDot,.demoNav,.demoTab,.hero-hover-card,.kd-btn,.kd-link a,.kd-links a,.kd-uni-item,.login-choice button,.login-tab,.modalCTA button,.nav-toggle,.packClose,.packNavBtn,.packTab,.toggle {
    cursor:pointer
}
.bg,.overlay,.topbar-wrap {
    position:fixed
}
.topbar,.topbar-wrap {
    width:100%;
    display:flex
}
.authItem,.kd-bottom-link a,.kd-fg-link a,.kd-link a,.kd-links a,.kd-links-row a,.login-tab,.menu a,.socialBtn {
    text-decoration:none
}
.main,.topbar {
    max-width:1200px
}
.demoHead p,.demoTab,.menu a,.rm-status,body,p {
    color:var(--t1)
}
.hero-hover-card,.roadmap-card,.system-card {
    transition:transform .25s,box-shadow .25s,background .25s
}
.inline-card,.packModalBody {
    scrollbar-color:rgba(17,24,39,.20) transparent
}
.contactText,.iosText {
    text-overflow:ellipsis
}
:root {
    --bg0:#eef1f4;
    --bg1:#e7ebef;
    --bg2:#f7f9fb;
    --bg3:#ffffff;
    --line:rgba(17,24,39,.12);
    --line2:rgba(17,24,39,.08);
    --sh1:0 14px 36px rgba(17,24,39,.10);
    --sh2:0 26px 80px rgba(17,24,39,.14);
    --r-xl:28px;
    --r-lg:22px;
    --r-md:16px;
    --pm-pad:12px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Inter,sans-serif;
    background:var(--bg0)
}
a {
    color:inherit
}
.bg {
    inset:0;
    background:url('/giris-blur.webp') center/cover no-repeat;
    z-index:-2;
    filter:none!important
}
.brand img,.footerLogo {
    object-fit:contain;
    filter:drop-shadow(0 10px 18px rgba(17,24,39,.14))
}
.overlay {
    inset:0;
    z-index:-1
}
*,::after,::before {
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important
}
.topbar-wrap {
    top:16px;
    left:0;
    right:0;
    z-index:50;
    justify-content:center;
    padding:0 14px
}
.topbar {
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 14px;
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(245,247,250,.84));
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:var(--sh1)
}
.authHead,.authWrap,.brand,.footerBrand,.footerContact,.iosCheck,.iosItem,.menu,.nav-actions {
    display:flex;
    align-items:center
}
.brand {
    gap:10px;
    min-width:180px
}
.brand img {
    width:34px;
    height:34px;
    border-radius:10px
}
.menu a,.nav-toggle {
    border-radius:999px
}
.brand .brand-text {
    display:flex;
    flex-direction:column;
    line-height:1.1
}
.bpTop,.brand .brand-text b {
    font-size:14px;
    color:var(--t0)
}
.brand .brand-text span {
    font-size:11px;
    color:var(--t2)
}
.menu {
    gap:18px
}
.menu a {
    font-size:13.5px;
    font-weight:900;
    padding:8px 10px;
    transition:background .15s,color .15s,transform .15s
}
.menu a:hover {
    background:rgba(17,24,39,.05);
    transform:translateY(-1px)
}
.login-tab,.menu a.active {
    border-radius:999px;
    background:linear-gradient(180deg,var(--green),var(--green2));
    color:#fff
}
.menu a.active {
    padding:6px 12px;
    box-shadow:0 12px 22px rgba(46,125,50,.18)
}
.nav-actions {
    gap:10px
}
.login-tab {
    box-shadow:0 12px 24px rgba(46,125,50,.18)
}
#sss .faq-q,.hero-title,.mpTop,.packCard h3,h1,h2 {
    color:var(--t0)
}
.bpOld,.mpOld,.old-price {
    text-decoration:line-through
}
.btn-cta.primary:hover,.btnPackDetail:hover,.inline-back:hover,.kd-fg-btn:hover,.login-tab:hover {
    filter:brightness(.98)
}
.nav-toggle {
    display:none;
    width:40px;
    height:40px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.84);
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 18px rgba(17,24,39,.1)
}
.nav-toggle span {
    display:block;
    width:18px;
    height:2px;
    background:rgba(17,24,39,.72);
    position:relative
}
.nav-toggle span::after,.nav-toggle span::before {
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:rgba(17,24,39,.72)
}
.nav-toggle span::before {
    top:-6px
}
.nav-toggle span::after {
    top:6px
}
.demoMeta,.footerCol,.iosItem,.packCard,.perkLeft {
    min-width:0
}
.main {
    margin:0 auto;
    padding:140px 24px 80px
}
section {
    margin-bottom:120px;
    scroll-margin-top:160px
}
.glass {
    background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(245,247,250,.82));
    border-radius:var(--r-xl);
    padding:48px;
    border:1px solid var(--line);
    box-shadow:var(--sh2)
}
.hero-cta,.hero-hover-card,.pack {
    background:rgba(255,255,255,.78);
    position:relative
}
h1 {
    font-size:40px
}
h2 {
    font-size:28px
}
p {
    font-size:15.5px;
    line-height:1.65
}
.grid,.system-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px
}
.hero-title {
    font-family:'Playfair Display',serif;
    font-size:42px
}
.kd-auth-shell,.kd-auth-wrap,.kd-fg-wrap,.kd-reg-wrap {
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial
}
.hero-hover-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr)
}
@media (max-width:1000px) {
    .hero-hover-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
.hero-hover-card {
    border:1px solid var(--line);
    box-shadow:0 14px 34px rgba(17,24,39,.1)
}
.demoMeta h4,.hero-hover-card h4 {
    margin:0 0 8px;
    font-size:16px;
    font-weight:950;
    color:var(--t0)
}
.demoMeta p,.hero-hover-card p {
    margin:0;
    font-size:14.5px;
    line-height:1.6;
    color:var(--t1)
}
.hero-hover-card:hover {
    background:rgba(255,255,255,.92);
    box-shadow:0 30px 70px rgba(17,24,39,.14)
}
.hero-hover-card::before {
    content:"";
    bottom:14px;
    border-radius:4px;
    background:linear-gradient(180deg,var(--green),var(--green2));
    opacity:0;
    transition:opacity .25s
}
.system-title .hover,.system-title .normal {
    line-height:26px;
    transition:opacity .2s,transform .2s;
    position:absolute
}
.hero-hover-card:hover::before {
    opacity:1
}
.hero-cta {
    margin-top:22px;
    padding:18px;
    border:1px solid var(--line);
    box-shadow:0 18px 48px rgba(17,24,39,.12);
    overflow:hidden
}
.hero-cta::after {
    content:"";
    position:absolute;
    inset:-50px -80px auto auto;
    width:260px;
    height:260px;
    background:radial-gradient(circle at 30% 30%,rgba(46,125,50,.14),transparent 62%);
    transform:rotate(14deg)
}
.hero-cta-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    position:relative;
    z-index:2
}
.demoHead h3,.hero-cta-left h3 {
    margin:0 0 6px;
    font-size:18px;
    font-weight:950;
    color:var(--t0)
}
.hero-cta-left p,.rm-title p {
    margin:0;
    font-size:14.5px;
    line-height:1.55;
    color:var(--t1)
}
.hero-cta-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto
}
.btn-cta {
    padding:12px 14px;
    border-radius:999px;
    border:0;
    font-weight:950;
    font-size:13.5px;
    box-shadow:0 12px 22px rgba(17,24,39,.1)
}
.btn-cta.primary,.login-choice .dyt {
    background:linear-gradient(180deg,var(--green),var(--green2));
    color:#fff;
    box-shadow:0 14px 26px rgba(46,125,50,.18)
}
.btn-cta.secondary,.login-choice .dan {
    background:rgba(17,24,39,.06);
    border:1px solid rgba(17,24,39,.12);
    color:var(--t0)
}
.btn-cta.secondary:hover {
    background:rgba(17,24,39,.09)
}
.pack {
    padding:26px;
    border-radius:22px;
    border:1px solid var(--line);
    box-shadow:0 18px 46px rgba(17,24,39,.12)
}
.prices {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:14px
}
.price {
    background:rgba(255,255,255,.86);
    border:1px solid var(--line);
    padding:12px;
    border-radius:14px;
    font-weight:900;
    color:var(--t0)
}
.pack .ribbon {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#c62828;
    color:#fff;
    padding:6px 12px;
    font-size:11px;
    font-weight:950;
    border-radius:14px;
    box-shadow:0 14px 26px rgba(198,40,40,.18)
}
.pack .badges {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:10px
}
.pack .badge {
    font-size:11px;
    padding:5px 10px;
    border-radius:999px;
    font-weight:900;
    border:1px solid rgba(17,24,39,.12);
    background:rgba(255,255,255,.6);
    color:rgba(17,24,39,.78)
}
.badge-demo {
    background:rgba(21,101,192,.1);
    border-color:rgba(21,101,192,.2);
    color:rgba(21,101,192,.88)
}
.badge-free {
    background:rgba(46,125,50,.1);
    border-color:rgba(46,125,50,.22);
    color:rgba(27,94,32,.9)
}
.badge-kvkk {
    background:rgba(239,108,0,.1);
    border-color:rgba(239,108,0,.22);
    color:rgba(239,108,0,.92)
}
.badge-launch {
    background:rgba(194,24,91,.1);
    border-color:rgba(194,24,91,.22);
    color:rgba(194,24,91,.92)
}
.old-price {
    color:rgba(17,24,39,.45);
    font-size:13px
}
.new-price {
    color:rgba(27,94,32,.95);
    font-weight:950;
    font-size:16px
}
.remaining {
    margin-top:8px;
    font-size:12px;
    color:rgba(198,40,40,.92);
    font-weight:950
}
.modline {
    margin:6px 0;
    font-size:13.5px;
    line-height:1.35;
    color:var(--t1)
}
#paketler .grid {
    grid-template-columns:repeat(4,1fr)
}
@media(max-width:1100px) {
    #paketler .grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:640px) {
    .hero-hover-card:hover {
        transform:none
    }
    #paketler .grid {
        grid-template-columns:1fr
    }
}
.inline-panel {
    position:fixed;
    inset:0;
    background:rgba(17,24,39,.22);
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center
}
.inline-card {
    width:92%;
    max-width:420px;
    max-height:90vh;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,247,250,.92));
    border:1px solid var(--line);
    border-radius:28px;
    padding:26px;
    overflow:auto;
    position:relative;
    box-shadow:var(--sh2);
    color:var(--t1);
    scrollbar-width:thin
}
.bigPrice,.demoCarousel,.demoFrame,.demoViewport,.iosText,.packCard,.packWrap,.rm-spark,.roadmap-card,.sys-spark,.system-card,.system-title {
    overflow:hidden
}
.inline-card.wide {
    max-width:900px
}
.inline-card::-webkit-scrollbar {
    width:5px
}
.inline-card::-webkit-scrollbar-thumb {
    background:rgba(17,24,39,.2);
    border-radius:6px
}
.inline-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px
}
.inline-back,.inline-close {
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    position:static;
    box-shadow:0 14px 26px rgba(17,24,39,.16)
}
.demoCarousel,.rm-kpi,.rm-tags,.rm-top,.roadmap-card,.sys-kpi,.sys-spark,.sys-top,.system-card,.system-card p,.system-title {
    position:relative
}
.inline-back {
    background:linear-gradient(180deg,var(--green),var(--green2))
}
.inline-close {
    background:#c62828
}
.inline-close:hover,.packClose:hover {
    filter:brightness(.95)
}
.inline-card h3 {
    margin:6px 0 12px;
    color:var(--t0);
    font-weight:950
}
.login-choice button {
    width:100%;
    padding:14px;
    margin:10px 0;
    border-radius:16px;
    border:none;
    font-size:15px;
    font-weight:900
}
@media(max-width:480px) {
    .inline-card {
        padding:18px;
        border-radius:22px
    }
}
.system-card {
    background:rgba(255,255,255,.78);
    border-radius:22px;
    padding:22px 22px 18px;
    box-shadow:0 16px 40px rgba(17,24,39,.1);
    border:1px solid var(--line)
}
.system-card:hover {
    transform:translateY(-4px);
    background:rgba(255,255,255,.92);
    box-shadow:0 30px 78px rgba(17,24,39,.14)
}
.system-card::after {
    content:"";
    position:absolute;
    inset:-40px -60px auto auto;
    width:220px;
    height:220px;
    background:radial-gradient(circle at 30% 30%,rgba(46,125,50,.12),transparent 60%);
    transform:rotate(18deg)
}
.sys-top {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
    z-index:2
}
.sys-ico {
    width:44px;
    height:44px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    background:rgba(46,125,50,.12);
    color:#0f5132;
    flex:0 0 auto;
    box-shadow:0 14px 26px rgba(17,24,39,.1)
}
.system-title {
    height:26px;
    margin-bottom:2px
}
.system-title .normal {
    inset:0;
    font-size:18px;
    font-weight:950;
    color:var(--t0)
}
.system-title .hover {
    inset:0;
    font-size:18px;
    font-weight:950;
    color:rgba(27,94,32,.95);
    opacity:0;
    transform:translateY(8px)
}
.system-card:hover .system-title .normal {
    opacity:0;
    transform:translateY(-8px)
}
.system-card:hover .system-title .hover {
    opacity:1;
    transform:translateY(0)
}
.sys-tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:6px
}
.sys-kpi,.sys-spark {
    margin-top:12px;
    z-index:2
}
.rm-tag,.sys-tag {
    font-size:11px;
    font-weight:950;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(17,24,39,.05);
    border:1px solid rgba(17,24,39,.1);
    color:var(--t1)
}
.rm-kpi-top,.sys-kpi-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px
}
.rm-kpi-top .lbl,.sys-kpi-top .lbl {
    font-size:12px;
    font-weight:950;
    color:var(--t2)
}
.rm-kpi-top .val,.sys-kpi-top .val {
    font-size:12px;
    font-weight:950;
    color:var(--t0)
}
.rm-bar,.sys-bar {
    height:10px;
    border-radius:999px;
    background:rgba(17,24,39,.06);
    overflow:hidden;
    border:1px solid rgba(17,24,39,.1)
}
.rm-bar>span,.sys-bar>span {
    display:block;
    height:100%;
    width:0%;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(46,125,50,.92),rgba(46,125,50,.35));
    box-shadow:0 14px 22px rgba(46,125,50,.14);
    transition:width .9s cubic-bezier(.2,.9,.2,1)
}
.sys-spark {
    height:40px;
    border-radius:14px;
    background:rgba(17,24,39,.04);
    border:1px solid rgba(17,24,39,.1)
}
.rm-spark svg,.sys-spark svg {
    width:100%;
    height:100%;
    display:block
}
.rm-spark .gridline,.sys-spark .gridline {
    stroke:rgba(17,24,39,.10);
    stroke-width:1
}
.rm-spark .line,.sys-spark .line {
    fill:none;
    stroke:rgba(27,94,32,.92);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round
}
.rm-spark .area,.sys-spark .area {
    fill:rgba(46,125,50,.12)
}
.system-card p {
    margin:10px 0 0;
    font-size:14.5px;
    line-height:1.55;
    color:var(--t1);
    z-index:2
}
#sss .faq-q,.rm-title h4 {
    margin:0 0 6px
}
.roadmap-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:26px
}
.packHead,.packModal.open,.packModalTop,.packTabs,.rm-ico,.rm-tags,.rm-top {
    display:flex
}
.roadmap-card {
    background:rgba(255,255,255,.78);
    border:1px solid var(--line);
    border-radius:22px;
    padding:22px 22px 18px;
    box-shadow:0 18px 46px rgba(17,24,39,.12)
}
.demoFrame,.rm-ico {
    border-radius:16px
}
.roadmap-card:hover {
    transform:translateY(-6px);
    background:rgba(255,255,255,.92);
    box-shadow:0 34px 90px rgba(17,24,39,.14)
}
.roadmap-card::after {
    content:"";
    position:absolute;
    inset:-60px -80px auto auto;
    width:260px;
    height:260px;
    background:radial-gradient(circle at 30% 30%,rgba(46,125,50,.12),transparent 62%);
    transform:rotate(14deg)
}
.rm-top {
    align-items:flex-start;
    gap:12px;
    z-index:2
}
.rm-ico {
    width:46px;
    height:46px;
    align-items:center;
    justify-content:center;
    font-size:22px;
    background:rgba(46,125,50,.12);
    color:#0f5132;
    box-shadow:0 14px 26px rgba(17,24,39,.1);
    flex:0 0 auto
}
.demoMeta .chip,.demoNav,.packClose,.rm-status {
    border-radius:999px;
    font-weight:950
}
.rm-spark,.rm-status {
    background:rgba(17,24,39,.04);
    z-index:2;
    position:relative
}
.demoCarousel,.demoWrap {
    box-shadow:0 18px 46px rgba(17,24,39,.12)
}
.rm-title h4 {
    font-size:17px;
    font-weight:950;
    color:var(--t0);
    line-height:1.25
}
.rm-tags {
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
    z-index:2
}
.rm-status {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    padding:7px 12px;
    font-size:12px;
    border:1px solid rgba(17,24,39,.1)
}
.perkRow,.rm-spark {
    border-radius:14px
}
.rm-status .dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(27,94,32,.92);
    box-shadow:0 0 0 4px rgba(46,125,50,.14)
}
.rm-status.info .dot {
    background:rgba(21,101,192,.92);
    box-shadow:0 0 0 4px rgba(21,101,192,.14)
}
.rm-status.warn .dot {
    background:rgba(239,108,0,.92);
    box-shadow:0 0 0 4px rgba(239,108,0,.14)
}
.rm-kpi {
    margin-top:14px;
    z-index:2
}
.rm-bar.indeterminate>span {
    width:50%;
    background:linear-gradient(90deg,rgba(46,125,50,.14),rgba(46,125,50,.7),rgba(46,125,50,.14));
    animation:1.35s ease-in-out infinite rmSlide
}
@keyframes rmSlide {
    0% {
        transform:translateX(-80%)
    }
    50% {
        transform:translateX(40%)
    }
    100% {
        transform:translateX(180%)
    }
}
.rm-spark {
    margin-top:12px;
    height:40px;
    border:1px solid rgba(17,24,39,.1)
}
.demoWrap {
    margin-top:10px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.78);
    border:1px solid var(--line)
}
.demoTab,.packNavBtn {
    border:1px solid rgba(17,24,39,.12)
}
.demoHead p {
    margin:0;
    font-size:14px;
    line-height:1.55
}
.demoTabs {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:10px 0
}
.demoTab {
    background:rgba(17,24,39,.04);
    padding:9px 12px;
    border-radius:999px;
    font-weight:950;
    font-size:13.5px;
    transition:background .15s,transform .15s;
    user-select:none
}
.demoTab:hover {
    background:rgba(17,24,39,.07);
    transform:translateY(-1px)
}
.bigPrice::after,.miniPrice::after {
    content:"%50";
    transform:rotate(35deg)
}
.demoTab.active,.packTab.active {
    background:linear-gradient(180deg,var(--green),var(--green2));
    color:#fff;
    border-color:transparent
}
.demoCarousel {
    border-radius:18px;
    background:rgba(255,255,255,.7);
    border:1px solid var(--line)
}
.demoViewport {
    width:100%
}
.demoTrack {
    display:flex;
    width:100%;
    transform:translateX(0);
    transition:transform 420ms cubic-bezier(.2,.9,.2,1)
}
.demoSlide {
    flex:0 0 100%;
    padding:10px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:10px;
    align-items:stretch
}
.demoFrame {
    border:1px solid rgba(17,24,39,.12);
    background:rgba(17,24,39,.03);
    aspect-ratio:16/9;
    display:flex;
    align-items:center;
    justify-content:center
}
.demoFrame img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    background:0 0
}
.demoMeta {
    border-radius:16px;
    border:1px solid rgba(17,24,39,.1);
    background:rgba(255,255,255,.82);
    padding:12px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.demoMeta .chips {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:12px
}
.demoMeta .chip {
    font-size:11px;
    padding:6px 10px;
    background:rgba(46,125,50,.12);
    color:#0f5132;
    border:1px solid rgba(46,125,50,.18)
}
.demoNav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:1px solid rgba(17,24,39,.12);
    background:rgba(255,255,255,.86);
    color:var(--t0);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 14px 26px rgba(17,24,39,.12);
    z-index:5
}
.demoNav:hover {
    background:rgba(255,255,255,.96)
}
.demoNav.prev {
    left:10px
}
.demoNav.next {
    right:10px
}
.demoDots {
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:10px
}
.demoDot {
    width:9px;
    height:9px;
    border-radius:50%;
    background:rgba(17,24,39,.18);
    border:1px solid rgba(17,24,39,.1)
}
.demoDot.active {
    background:rgba(27,94,32,.92)
}
@media (max-width:900px) {
    .demoSlide {
        grid-template-columns:1fr
    }
}
@media (max-width:640px) {
    .hero-hover-grid {
        grid-template-columns:1fr
    }
    .demoWrap {
        padding:10px;
        border-radius:16px
    }
    .demoHead h3 {
        font-size:17px
    }
    .demoHead p {
        font-size:13.8px
    }
    .demoTabs {
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        padding-bottom:6px;
        margin:8px 0 10px;
        scroll-snap-type:x mandatory
    }
    .demoTabs::-webkit-scrollbar {
        height:0
    }
    .demoTab {
        flex:0 0 auto;
        white-space:nowrap;
        padding:8px 10px;
        font-size:13px;
        scroll-snap-align:start
    }
    .demoNav {
        width:38px;
        height:38px
    }
    .demoNav.prev {
        left:8px
    }
    .demoNav.next {
        right:8px
    }
    .demoMeta {
        padding:11px
    }
}
@media (max-width:380px) {
    .demoTab {
        padding:7px 9px;
        font-size:12.5px
    }
}
body.packmodal-open,html.packmodal-open {
    height:100%;
    overflow:hidden!important
}
.packModal {
    position:fixed;
    inset:0;
    z-index:260;
    display:none;
    align-items:center;
    justify-content:center;
    padding:var(--pm-pad);
    background:rgba(17,24,39,.22)
}
.packModalCard {
    height:calc((var(--vh,1vh)*100)-(var(--pm-pad)*2));
    max-height:calc((var(--vh,1vh)*100)-(var(--pm-pad)*2));
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,247,250,.94))!important;
    border:1px solid var(--line)!important;
    box-shadow:var(--sh2);
    display:flex;
    flex-direction:column;
    color:var(--t1)
}
.packModalTop {
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:5;
    background:rgba(245,247,250,.96)!important;
    border-bottom:1px solid rgba(17,24,39,.1)!important;
    align-items:center;
    gap:10px;
    padding:12px
}
.packClose {
    margin-left:auto;
    width:38px;
    height:38px;
    border:0;
    background:#c62828;
    color:#fff;
    font-size:18px;
    box-shadow:0 14px 26px rgba(17,24,39,.16)
}
.packNavBtn,.packTab {
    background:rgba(17,24,39,.04);
    font-weight:950
}
.packNavBtn {
    padding:10px 12px;
    border-radius:999px;
    color:var(--t0)
}
.packNavBtn:hover {
    background:rgba(17,24,39,.07)
}
.packTabs {
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
    flex:1 1 auto
}
.packTab {
    border:1px solid rgba(17,24,39,.12);
    padding:9px 12px;
    border-radius:999px;
    color:var(--t1)
}
.packModalBody {
    flex:1 1 auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:16px 18px 28px
}
.packModalBody::-webkit-scrollbar {
    width:6px
}
.packModalBody::-webkit-scrollbar-thumb {
    background:rgba(17,24,39,.2);
    border-radius:10px
}
.iosItem,.perkBox {
    border:1px solid rgba(17,24,39,.1)
}
.packHead {
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px
}
.bpTop,.perkRow {
    margin-bottom:10px
}
.packHead h2 {
    margin:0;
    color:var(--t0)
}
.packDetailGrid {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:18px
}
@media(max-width:980px) {
    .packDetailGrid {
        grid-template-columns:1fr
    }
}
.iosGrid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
}
@media(max-width:520px) {
    .iosGrid {
        grid-template-columns:1fr
    }
}
.iosItem {
    gap:10px;
    background:rgba(255,255,255,.84);
    border-radius:16px;
    padding:10px 12px
}
.iosCheck {
    width:26px;
    height:26px;
    border-radius:10px;
    background:rgba(46,125,50,.14);
    color:#0f5132;
    justify-content:center;
    font-weight:950;
    flex:0 0 auto
}
.iosText,.perkText b {
    font-size:13.5px;
    color:var(--t0)
}
.perkLeft,.perkRow {
    align-items:center;
    gap:10px;
    display:flex
}
.iosText {
    font-weight:900;
    line-height:1.25
}
.bpTop,.btnPackDetail,.contactVal,.footerTitle,.kd-auth-title,.kd-btn,.kd-links a,.modalCTA button,.mpDash,.mpNew,.mpTop,.perkDot,.perkPill {
    font-weight:950
}
.perkBox {
    background:rgba(255,255,255,.82);
    border-radius:18px;
    padding:12px
}
.perkRow {
    justify-content:space-between;
    padding:10px;
    background:rgba(17,24,39,.03);
    border:1px solid rgba(17,24,39,.1)
}
.perkIco,.pillGood {
    background:rgba(46,125,50,.12)
}
.perkIco {
    width:34px;
    height:34px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto
}
.authView.is-active,.perkText b {
    display:block
}
.mpOld,.mpTop,.packRibbon,.perkPill,.perkText span {
    font-size:12px
}
.perkItem small,.perkText span {
    display:block;
    color:var(--t2);
    font-weight:850
}
.perkPill {
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(17,24,39,.1)
}
.pillGood {
    color:#0f5132
}
.pillInfo {
    background:rgba(21,101,192,.1);
    color:rgba(21,101,192,.92)
}
.pillWarn {
    background:rgba(239,108,0,.1);
    color:rgba(239,108,0,.92)
}
.perkList {
    display:grid;
    gap:8px;
    margin-top:10px
}
.perkItem {
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:rgba(17,24,39,.03);
    border:1px solid rgba(17,24,39,.1);
    border-radius:14px;
    padding:10px
}
.perkDot {
    width:22px;
    height:22px;
    border-radius:9px;
    background:rgba(46,125,50,.14);
    color:#0f5132;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto
}
.perkItem small {
    margin-top:3px
}
.bigPrices {
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
}
@media(max-width:780px) {
    .bigPrices {
        grid-template-columns:1fr
    }
}
.bigPrice {
    position:relative;
    background:rgba(255,255,255,.84);
    border:1px solid rgba(17,24,39,.1);
    border-radius:18px;
    padding:16px
}
.bigPrice::after {
    position:absolute;
    top:14px;
    right:-46px;
    background:#c62828;
    color:#fff;
    font-size:11px;
    font-weight:950;
    padding:7px 56px
}
.bpOld,.mpOld {
    color:rgba(17,24,39,.45);
    font-weight:900
}
.bpNew {
    font-size:26px;
    font-weight:950;
    color:rgba(27,94,32,.95);
    margin-top:4px
}
.bpPm {
    margin-top:10px;
    font-size:13px;
    font-weight:900;
    color:var(--t2)
}
.modalCTA {
    margin-top:14px
}
.modalCTA button {
    width:100%;
    border:0;
    padding:14px 16px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--green),var(--green2));
    color:#fff;
    box-shadow:0 14px 26px rgba(46,125,50,.16)
}
.packGrid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px
}
@media(max-width:1200px) {
    .packGrid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
.packCard {
    position:relative;
    background:rgba(255,255,255,.78);
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    box-shadow:0 18px 46px rgba(17,24,39,.12);
    display:flex;
    flex-direction:column;
    gap:12px;
    color:var(--t1)
}
.miniPrice::after,.packRibbon {
    position:absolute;
    background:#c62828;
    color:#fff;
    font-weight:950
}
.packCard h3 {
    margin:0;
    font-size:20px
}
.packRibbon {
    top:12px;
    right:12px;
    padding:6px 10px;
    border-radius:999px;
    box-shadow:0 14px 26px rgba(198,40,40,.18)
}
.kd-auth-box,.miniPrice {
    position:relative;
    overflow:hidden
}
.miniPrices {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px
}
.miniPrice {
    background:rgba(255,255,255,.86);
    border-radius:16px;
    padding:10px;
    border:1px solid rgba(17,24,39,.1)
}
.miniPrice::after {
    top:10px;
    right:-44px;
    font-size:10px;
    padding:6px 52px
}
.authDD,.authDD::before,.footerContact:hover,.socialBtn:hover {
    background:rgba(255,255,255,.92)
}
.mpTop {
    margin-bottom:6px
}
.mpNew {
    color:rgba(27,94,32,.95);
    font-size:16px;
    margin-top:2px
}
.mpPm {
    font-size:11px;
    font-weight:850;
    color:var(--t2);
    margin-top:6px
}
.mpDash {
    padding:10px 0;
    color:var(--t1)
}
.packFooterRow {
    margin-top:auto;
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between
}
.btnPackDetail {
    border:0;
    padding:11px 14px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--green),var(--green2));
    color:#fff;
    box-shadow:0 14px 26px rgba(46,125,50,.16)
}
.siteFooter {
    background:linear-gradient(180deg,rgba(245,247,250,.98),rgba(231,235,239,.98))!important;
    color:rgba(17,24,39,.82)!important;
    padding:46px 18px 20px;
    border-top:1px solid rgba(17,24,39,.12)!important;
    border-radius:28px 28px 0 0!important;
    box-shadow:0 -22px 70px rgba(17,24,39,.1)!important;
    margin-top:40px;
    overflow:hidden
}
.footerInner {
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.25fr 0.9fr 1.1fr;
    gap:44px;
    align-items:start
}
.footerBrand {
    gap:12px;
    margin-bottom:14px
}
.footerLogo {
    width:42px;
    height:42px;
    border-radius:10px
}
.footerBrandName {
    font-weight:950;
    font-size:15px;
    color:rgba(17,24,39,.92)
}
.footerBrandTag {
    margin-top:3px;
    font-size:12px;
    color:rgba(17,24,39,.58)
}
.footerDesc {
    margin:0;
    font-size:13.5px;
    line-height:1.75;
    color:rgba(17,24,39,.7);
    max-width:380px
}
.footerTitle {
    font-size:14px;
    margin-bottom:12px;
    color:rgba(17,24,39,.92)
}
.footerContact,.footerLink {
    font-size:13.5px;
    text-decoration:none
}
.footerLink {
    display:block;
    color:rgba(17,24,39,.72);
    padding:7px 0;
    transition:color .15s,transform .15s
}
.footerContact,.footerPartner strong {
    color:rgba(17,24,39,.82)
}
.contactVal,.footerContact:hover,.footerLink:hover,.socialBtn:hover {
    color:rgba(17,24,39,.92)
}
.footerLink:hover {
    transform:translateX(2px)
}
.footerContact {
    margin-top:10px;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(17,24,39,.12);
    background:rgba(255,255,255,.72)
}
.contactIco,.socialBtn {
    align-items:center;
    display:flex
}
.contactIco {
    width:28px;
    height:28px;
    justify-content:center;
    flex:0 0 auto
}
.contactText {
    opacity:.95;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden
}
.kd-auth-sub,.kd-hint {
    opacity:.9
}
.footerSocial {
    display:flex;
    gap:10px;
    margin-top:12px
}
.socialBtn {
    width:42px;
    height:42px;
    justify-content:center;
    color:rgba(17,24,39,.72);
    border:1px solid rgba(17,24,39,.12);
    transition:transform .15s,background .15s,color .15s
}
.footerDivider {
    max-width:1200px;
    margin:34px auto 16px;
    height:1px;
    background:rgba(17,24,39,.12)
}
.footerBottom {
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:12px;
    color:rgba(17,24,39,.62)
}
.footerPartner {
    color:rgba(17,24,39,.58)
}
@media (max-width:980px) {
    .footerInner {
        grid-template-columns:1fr 1fr;
        gap:28px
    }
    .brandCol {
        grid-column:1/-1
    }
    .footerDesc {
        max-width:100%
    }
}
@media (max-width:640px) {
    .siteFooter {
        padding:34px 14px 18px
    }
    .footerInner {
        grid-template-columns:1fr;
        gap:22px
    }
    .footerBottom {
        flex-direction:column;
        align-items:flex-start
    }
}
.footer {
    background:0 0!important;
    color:inherit!important;
    padding:0!important
}
@media (max-width:480px) {
    .glass {
        padding:22px;
        border-radius:22px
    }
    .siteFooter {
        border-radius:22px 22px 0 0!important
    }
}
.kd-auth-shell {
    max-width:460px;
    color:rgba(17,24,39,.86)
}
.kd-auth-box {
    box-shadow:0 22px 70px rgba(17,24,39,.14)
}
.kd-auth-glow {
    position:absolute;
    inset:-120px -120px auto auto;
    width:240px;
    height:240px;
    background:radial-gradient(circle,rgba(46,125,50,.18),rgba(46,125,50,0) 60%)
}
.kd-inp,input,select,textarea {
    background:#fff;
    box-sizing:border-box
}
.kd-btn {
    background:#2e7d32
}
.kd-btn:hover {
    background:#256428;
    filter:brightness(.98)
}
.kd-links {
    margin-top:10px;
    display:flex;
    gap:10px;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    font-size:13px
}
.kd-links a {
    color:rgba(27,94,32,.95)
}
.kd-bottom-link a:hover,.kd-fg-link a:hover,.kd-links a:hover,.kd-links-row a:hover {
    text-decoration:underline
}
.invite-box,.kd-uni-item:hover {
    background:rgba(46,125,50,.08)
}
.kd-mini {
    color:rgba(17,24,39,.8);
    font-weight:850;
    margin:0 0 12px
}
.form-section,.invite-prefix,.kd-link a,.kd-ok,.kd-title,.toggle {
    color:#2e7d32;
    font-weight:950
}
.kd-reg-wrap {
    max-width:980px;
    margin:8px auto
}
.kd-title {
    font-size:26px;
    margin:8px 0 14px
}
.hidden {
    display:none
}
.form-section {
    margin:14px 0 6px
}
.form-grid,.kd-reg-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.invite-flex,.kd-row {
    display:flex;
    gap:10px;
    align-items:center
}
@media(max-width:720px) {
    :root {
        --pm-pad:8px
    }
    .form-grid,.packGrid {
        grid-template-columns:1fr
    }
}
input,select,textarea {
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #d2d6dc
}
textarea {
    resize:vertical
}
.invite-box {
    border:1px dashed rgba(46,125,50,.35);
    padding:12px;
    border-radius:12px;
    margin-top:10px
}
.invite-flex {
    margin-top:8px
}
.invite-prefix {
    flex:0 0 auto;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #d2d6dc;
    background:#f6faf7
}
.kd-reg-card,.kd-success {
    background:#fff;
    border-radius:18px;
    box-shadow:0 24px 60px rgba(17,24,39,.14)
}
.kd-reg-actions,.toggle {
    margin-top:12px
}
.error {
    color:#c62828;
    font-size:13px;
    margin-top:10px;
    font-weight:900
}
.kd-reg-box h3,.kd-reg-title,.kd-success h2 {
    font-weight:950;
    color:#2e7d32
}
.kd-success {
    max-width:740px;
    margin:18px auto;
    padding:34px 22px
}
.kd-success h2 {
    margin:0 0 8px;
    font-size:30px
}
#sss .faq-a,.kd-success p {
    margin:0;
    line-height:1.55
}
.kd-success p {
    color:#222
}
.kd-success .kd-btn {
    max-width:520px;
    margin-top:16px
}
.kd-reg-title {
    font-size:28px;
    margin:6px 0 4px
}
.kd-reg-sub {
    color:#2e7d32;
    opacity:.9;
    margin:0 0 14px;
    font-weight:800
}
.kd-reg-card {
    padding:18px;
    overflow:visible!important
}
@media(max-width:820px) {
    .hero-cta-inner {
        flex-direction:column;
        align-items:stretch
    }
    .btn-cta,.hero-cta-actions {
        width:100%
    }
    .kd-reg-grid {
        grid-template-columns:1fr
    }
}
.kd-reg-box {
    border:1px solid rgba(46,125,50,.25);
    border-radius:14px;
    padding:14px;
    background:rgba(46,125,50,.05)
}
.kd-reg-box h3 {
    margin:0 0 10px;
    font-size:14px
}
.kd-reg-box input,.kd-reg-box select,.kd-reg-box textarea {
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #d2d6dc;
    background:#fff;
    margin-bottom:10px;
    font-size:14px;
    box-sizing:border-box;
    outline:0
}
.kd-reg-box input:focus,.kd-reg-box select:focus,.kd-reg-box textarea:focus {
    border-color:#2e7d32;
    box-shadow:0 0 0 3px rgba(46,125,50,.12)
}
.kd-reg-box textarea {
    resize:vertical;
    min-height:88px
}
.kd-row {
    margin:6px 0 10px;
    color:#1b5e20;
    font-weight:850
}
.kd-row input[type=checkbox] {
    width:16px;
    height:16px
}
.kd-btn.small {
    padding:12px 14px;
    border-radius:12px;
    font-size:14px
}
.kd-link {
    margin-top:10px;
    font-weight:850;
    color:#333
}
.kd-ok {
    margin-top:8px;
    display:none
}
.kd-label {
    font-weight:950;
    color:#1b5e20;
    font-size:13px;
    display:block;
    margin:2px 0 6px
}
.kd-hint,.kd-uni-item {
    font-weight:850;
    color:#1b5e20
}
.kd-hint {
    font-size:12px;
    margin:-2px 0 8px
}
.kd-disabled {
    opacity:.58;
    filter:saturate(.75)
}
.kd-reg-box input:disabled {
    background:#f3f4f6;
    cursor:not-allowed
}
.kd-uni-wrap {
    position:relative;
    z-index:99999
}
.kd-uni-dd {
    position:absolute;
    left:0;
    right:0;
    top:calc(100% - 6px);
    background:#fff;
    border:1px solid rgba(46,125,50,.25);
    border-radius:12px;
    box-shadow:0 18px 40px rgba(17,24,39,.14);
    max-height:240px;
    overflow:auto;
    z-index:999999;
    padding:6px;
    display:none
}
.kd-uni-item,.kd-uni-note {
    padding:10px 12px;
    border-radius:10px
}
.kd-uni-note {
    font-weight:950;
    color:#0f5132;
    background:rgba(46,125,50,.06);
    border:1px dashed rgba(46,125,50,.3)
}
.kd-badge,.kd-links-row a {
    color:#1b5e20
}
.kd-badge {
    display:none;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background:rgba(46,125,50,.1);
    border:1px solid rgba(46,125,50,.25);
    font-weight:950;
    font-size:12px;
    margin:-2px 0 10px
}
.authItemMain,.authTitle {
    font-weight:950;
    font-size:14px
}
.kd-dot {
    width:8px;
    height:8px;
    border-radius:999px;
    background:#2e7d32;
    display:inline-block
}
#sss .faq-item {
    padding:14px 0;
    border-bottom:1px solid rgba(17,24,39,.12)
}
#sss .faq-item:last-child {
    border-bottom:0;
    padding-bottom:0
}
#sss .faq-a {
    opacity:.85;
    color:var(--t1)
}
.authDD {
    display:none;
    box-shadow:0 24px 70px rgba(0,0,0,.18)
}
.authView {
    display:none;
    padding:14px
}
.authItem,.authList {
    display:grid
}
.authTitle {
    flex:1 1 auto
}
.authItem {
    grid-template-columns:1fr auto;
    gap:2px 10px
}
.authItem:hover {
    background:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.1)
}
.authItemMain {
    color:#111827
}
.authItemSub {
    grid-column:1/2;
    font-weight:800;
    color:rgba(17,24,39,.65);
    font-size:12px;
    line-height:1.35
}
.authArrow {
    grid-column:2/3;
    grid-row:1/span 2;
    align-self:center;
    font-weight:950;
    color:rgba(17,24,39,.55)
}
.authFoot {
    font-weight:800;
    font-size:12px
}
@media (max-width:860px) {
    .brand .brand-text span,.menu {
        display:none
    }
    .topbar {
        border-radius:22px;
        padding:10px 12px
    }
    .brand {
        min-width:auto
    }
    .menu {
        position:fixed;
        top:74px;
        left:14px;
        right:14px;
        flex-direction:column;
        gap:8px;
        padding:12px;
        background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,247,250,.88));
        border:1px solid var(--line);
        border-radius:18px;
        box-shadow:var(--sh1);
        z-index:60
    }
    .menu.open,.nav-toggle {
        display:flex
    }
    .menu a {
        width:100%;
        padding:12px;
        font-size:14px;
        text-align:left
    }
    .login-tab {
        padding:10px 12px
    }
    .main {
        padding:120px 16px 60px
    }
    .authDD {
        right:auto;
        left:0
    }
}
.kd-auth-wrap,.kd-fg-wrap {
    max-width:420px;
    margin:8px auto
}
.kd-auth-box {
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    padding:26px;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.14);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:#111827
}
.kd-auth-title {
    margin:0 0 8px;
    color:#0f172a;
    font-weight:900
}
.kd-auth-sub {
    margin:0 0 16px;
    color:rgba(15,23,42,.68);
    font-weight:800
}
.kd-err {
    display:none;
    margin:0 0 12px;
    color:#b91c1c;
    font-size:14px;
    font-weight:900;
    background:rgba(185,28,28,.08);
    border:1px solid rgba(185,28,28,.18);
    padding:10px 12px;
    border-radius:12px
}
.kd-btn,.kd-links-row a {
    font-weight:950;
    cursor:pointer
}
.kd-btn,.kd-inp {
    padding:13px 14px;
    font-size:15px;
    width:100%;
    box-sizing:border-box
}
.kd-inp {
    margin-bottom:12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    background:rgba(255,255,255,.95);
    color:#111827;
    outline:0
}
.kd-inp::placeholder {
    color:rgba(15,23,42,.45)
}
.kd-fg-inp:focus,.kd-fg-row select:focus,.kd-inp:focus {
    border-color:rgba(46,125,50,.55);
    box-shadow:0 0 0 3px rgba(46,125,50,.14)
}
.kd-btn {
    margin-top:2px;
    border-radius:12px;
    border:none;
    background:linear-gradient(180deg,#2e7d32,#1b5e20);
    color:#fff;
    box-shadow:0 14px 28px rgba(46,125,50,.18)
}
.kd-btn:disabled,.kd-fg-btn:disabled {
    opacity:.65;
    cursor:not-allowed;
    box-shadow:none
}
.kd-links-row {
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
    font-size:13px
}
.kd-divider {
    margin:14px 0;
    height:1px;
    background:rgba(0,0,0,.08)
}
.kd-bottom-link {
    font-size:13px;
    color:rgba(15,23,42,.72);
    font-weight:800
}
.kd-bottom-link a {
    color:#1b5e20;
    font-weight:950
}
.kd-fg-card {
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.14);
    padding:22px;
    color:#111827
}
.kd-fg-title {
    margin:0 0 10px;
    font-weight:950;
    font-size:20px;
    color:#0f172a
}
.kd-fg-sub {
    margin:0 0 14px;
    font-weight:800;
    color:rgba(15,23,42,.68);
    font-size:13px
}
.kd-fg-row {
    display:flex;
    gap:10px;
    margin-bottom:10px
}
.kd-fg-btn,.kd-fg-inp,.kd-fg-row select {
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
    box-sizing:border-box;
    outline:0
}
.kd-fg-err,.kd-fg-ok {
    display:none;
    margin:10px 0 0;
    font-weight:950;
    padding:10px 12px;
    text-align:center
}
.kd-fg-inp,.kd-fg-row select {
    border:1px solid rgba(0,0,0,.12);
    background:rgba(255,255,255,.95);
    color:#111827
}
.kd-fg-inp::placeholder {
    color:rgba(15,23,42,.45)
}
.kd-fg-btn {
    border:none;
    background:linear-gradient(180deg,#2e7d32,#1b5e20);
    color:#fff;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(46,125,50,.18)
}
.kd-fg-err {
    color:#b91c1c;
    background:rgba(185,28,28,.08);
    border:1px solid rgba(185,28,28,.18);
    border-radius:12px
}
.kd-fg-ok {
    color:#0f5132;
    background:rgba(46,125,50,.1);
    border:1px solid rgba(46,125,50,.18);
    border-radius:12px
}
.kd-fg-link {
    margin-top:12px;
    font-size:13px;
    color:rgba(15,23,42,.72);
    font-weight:800
}
.kd-fg-link a {
    color:#1b5e20;
    font-weight:950;
    cursor:pointer
}
.login-tab {
    display:inline-flex;
    align-items:center;
    position:relative
}
.authBtnCaret {
    margin-top:-2px;
    opacity:.9
}
.authDD {
    width:360px;
    max-width:min(92vw,380px);
    border-radius:22px;
    border:1px solid rgba(15,23,42,.1);
    box-shadow:0 26px 80px rgba(2,6,23,.18),0 10px 26px rgba(2,6,23,.1);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transform:translateY(-6px);
    outline:0
}
.authDD::before {
    content:"";
    position:absolute;
    top:-9px;
    right:18px;
    width:18px;
    height:18px;
    border-left:1px solid rgba(15,23,42,.1);
    border-top:1px solid rgba(15,23,42,.1);
    transform:rotate(45deg);
    border-top-left-radius:4px
}
.authWrap.open .authDD {
    display:block;
    transform:translateY(0);
    pointer-events:auto
}
.authHead {
    display:flex;
    align-items:center;
    justify-content:space-between
}
.kd-auth-shell,.kd-auth-wrap,.kd-fg-wrap {
    font-size:15px
}
.kd-auth-title {
    font-size:22px;
    line-height:1.2
}
.kd-auth-sub {
    font-size:13px;
    line-height:1.35
}
.hero-title {
    font-family:var(--font-serif, "Playfair", Georgia, serif);
    font-weight:700;
    line-height:1.1;
    margin:10px 0 18px;
    font-size:clamp(30px, 3.1vw, 52px);
    color:#0f172a;
    text-shadow:0 1px 0 rgba(255,255,255,.75)
}
.hero-title::after {
    content:"";
    display:block;
    width:min(220px,54vw);
    height:4px;
    margin:14px auto 0;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(46,125,50,.15),rgba(46,125,50,.75),rgba(46,125,50,.15));
    box-shadow:0 10px 24px rgba(46,125,50,.18)
}
.hero-hover-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:18px
}
@media (max-width:980px) {
    .hero-hover-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media (max-width:620px) {
    .hero-hover-grid {
        grid-template-columns:1fr;
        gap:14px
    }
}
.hero-hover-card {
    position:relative;
    overflow:hidden;
    border-radius:18px;
    padding:16px 16px 15px;
    background:radial-gradient(120% 140% at 20% 10%,rgba(255,255,255,.95) 0,rgba(255,255,255,.78) 42%,rgba(255,255,255,.7) 100%),linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.6));
    border:1px solid rgba(15,23,42,.1);
    box-shadow:0 18px 50px rgba(15,23,42,.07),0 1px 0 rgba(255,255,255,.7) inset;
    transition:transform .16s,box-shadow .16s,border-color .16s;
    --c1:#16a34a;
    --c2:#22c55e;
    background:radial-gradient(120% 140% at 20% 10%,color-mix(in srgb,var(--c2) 10%,rgba(255,255,255,.96)) 0,rgba(255,255,255,.78) 45%,rgba(255,255,255,.68) 100%)
}
.hero-hover-card::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,var(--c1),var(--c2));
    opacity:.95
}
.hero-hover-card::after {
    content:"";
    position:absolute;
    right:-60px;
    top:-70px;
    width:180px;
    height:180px;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),rgba(255,255,255,0) 60%),radial-gradient(circle at 60% 60%,color-mix(in srgb,var(--c2) 22%,transparent),transparent 62%);
    filter:blur(2px);
    opacity:.85;
    pointer-events:none
}
.hero-hover-card:hover {
    transform:translateY(-3px);
    border-color:rgba(15,23,42,.14);
    box-shadow:0 26px 70px rgba(15,23,42,.1),0 1px 0 rgba(255,255,255,.75) inset
}
.hero-hover-card h4 {
    margin:2px 0 8px;
    font-size:15px;
    font-weight:900;
    color:#0f172a
}
.hero-hover-card p {
    margin:0;
    font-size:13.5px;
    line-height:1.55;
    color:rgba(15,23,42,.78)
}
.hero-hover-card:first-child {
    --c1:#2563eb;
    --c2:#60a5fa
}
.hero-hover-card:nth-child(2) {
    --c1:#16a34a;
    --c2:#22c55e
}
.hero-hover-card:nth-child(3) {
    --c1:#7c3aed;
    --c2:#a78bfa
}
.hero-hover-card:nth-child(4) {
    --c1:#f59e0b;
    --c2:#fb7185
}
.hero-hover-card:nth-child(5) {
    --c1:#0ea5e9;
    --c2:#22c55e
}
.hero-hover-card:nth-child(6) {
    --c1:#ef4444;
    --c2:#f97316
}
.hero-cta {
    border-radius:20px;
    border:1px solid rgba(15,23,42,.1);
    background:radial-gradient(110% 140% at 10% 0,rgba(255,255,255,.92),rgba(255,255,255,.65)),linear-gradient(90deg,rgba(46,125,50,.1),rgba(255,255,255,0));
    box-shadow:0 18px 50px rgba(15,23,42,.07)
}
.contactIco,.socialBtn {
    border-radius:16px;
    background:rgba(255,255,255,.76);
    box-shadow:0 10px 26px rgba(17,24,39,.1)
}
.contactIco svg,.socialBtn svg {
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2.2;
    fill:none
}
.socialBtn:hover {
    transform:translateY(-2px);
    background:rgba(255,255,255,.92)
}
.overlay {
    background:0 0!important
}
.packModal {
    padding:10px;
    align-items:center;
    justify-content:center;
    overflow:hidden
}
.authHead,.login-tab {
    align-items:center;
    gap:10px
}
.packModalCard {
    width:min(980px,100%);
    max-width:100%;
    max-height:92vh;
    height:auto;
    margin:0 auto;
    overflow:hidden;
    border-radius:22px;
    box-sizing:border-box
}
.packModalBody {
    min-height:0;
    overflow:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain
}
.authDD,.authItem,.kd-rolecard,.kd-rolepick {
    overflow:hidden
}
:root {
    --auth-radius:18px;
    --auth-line:rgba(255,255,255,.18);
    --auth-shadow:0 18px 60px rgba(0,0,0,.18);
    --auth-text:#0b1220;
    --auth-sub:rgba(15,23,42,.70);
    --auth-soft:rgba(255,255,255,.70);
    --auth-glass:rgba(255,255,255,.78);
    --auth-login-a:#2563eb;
    --auth-login-b:#60a5fa;
    --auth-signup-a:#16a34a;
    --auth-signup-b:#86efac;
    --auth-dyt-a:#7c3aed;
    --auth-dyt-b:#c4b5fd;
    --auth-dan-a:#0ea5e9;
    --auth-dan-b:#67e8f9
}
.authWrap {
    position:relative;
    display:inline-flex
}
.login-tab {
    display:inline-flex;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(10px);
    box-shadow:0 10px 28px rgba(0,0,0,.1);
    font-weight:800;
    transition:transform .18s,box-shadow .18s,background .18s
}
.login-tab:hover {
    background:rgba(255,255,255,.7);
    box-shadow:0 16px 44px rgba(0,0,0,.14)
}
.login-tab:focus-visible {
    outline-offset:3px
}
.authBtnCaret {
    width:10px;
    height:10px;
    display:inline-block;
    border-right:2px solid rgba(15,23,42,.65);
    border-bottom:2px solid rgba(15,23,42,.65);
    transform:rotate(45deg);
    margin-left:2px;
    transition:transform .18s
}
.authWrap.open .authBtnCaret {
    opacity:1;
    transform:rotate(225deg)
}
.authDD {
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:min(420px,calc(100vw - 26px));
    border-radius:var(--auth-radius);
    border:1px solid var(--auth-line);
    background:var(--auth-glass);
    backdrop-filter:blur(16px);
    box-shadow:var(--auth-shadow);
    opacity:0;
    transform:translateY(-6px) scale(.98);
    transition:opacity .18s,transform .18s;
    z-index:1000;
    max-height:min(560px,calc((var(--vh,1vh) * 100) - 110px));
    display:flex;
    flex-direction:column
}
.authWrap.open .authDD {
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto
}
.authDD .authView.is-active {
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable both-edges
}
.authHead {
    display:flex;
    justify-content:space-between;
    padding:14px 14px 12px;
    border-bottom:1px solid rgba(15,23,42,.1)
}
.authTitle {
    color:#0f172a;
    font-size:15px;
    font-weight:900;
    color:var(--auth-text)
}
.authBack,.authClose {
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,.1);
    background:rgba(255,255,255,.6);
    color:rgba(15,23,42,.8);
    font-weight:900;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .16s,background .16s
}
.authBack:hover,.authClose:hover {
    transform:translateY(-1px);
    background:rgba(255,255,255,.78)
}
.authBack:focus-visible,.authClose:focus-visible {
    outline:rgba(99,102,241,.3) solid 3px;
    outline-offset:2px
}
.authList {
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px
}
.authItem {
    position:relative;
    text-align:left;
    width:100%;
    border:0;
    border-radius:16px;
    padding:14px 14px 14px 56px;
    background:rgba(255,255,255,.7);
    box-shadow:0 10px 26px rgba(0,0,0,.08);
    cursor:pointer;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:10px;
    transition:transform .18s,box-shadow .18s,filter .18s;
    --auth-ico:none
}
.authItem.link {
    text-decoration:none;
    color:inherit
}
.authItem:hover {
    transform:translateY(-1px);
    box-shadow:0 16px 40px rgba(0,0,0,.12)
}
.authItem::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(16,185,129,.1));
    opacity:1
}
.authItem::after,.authView[data-view=root] .authItem[data-go=login]::after {
    background:linear-gradient(180deg,var(--auth-login-a),var(--auth-login-b))
}
.authItem::after {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:8px;
    opacity:.95
}
.authItem .authArrow,.authItem .authItemMain,.authItem .authItemSub {
    position:relative;
    z-index:2
}
.authItem .authItemMain {
    font-weight:950;
    color:var(--auth-text);
    grid-column:1/2;
    grid-row:1
}
.authItem .authItemSub {
    font-size:12.5px;
    color:var(--auth-sub);
    margin-top:2px;
    grid-column:1/2;
    grid-row:2
}
.authItem .authArrow {
    font-weight:900;
    color:rgba(15,23,42,.75);
    grid-column:2/3;
    grid-row:1/3
}
.authItem .authItemMain::before {
    content:"";
    position:absolute;
    left:-44px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:12px;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.75),rgba(255,255,255,.35)),linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.1));
    border:1px solid rgba(15,23,42,.1);
    box-shadow:0 10px 18px rgba(0,0,0,.1)
}
.authItem[data-ico] .authItemMain::before {
    background-image:var(--auth-ico),radial-gradient(circle at 30% 30%,rgba(255,255,255,.75),rgba(255,255,255,.35)),linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.1));
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-size:70px 70px,cover,cover;
    background-position:center,center,center
}
.authView[data-view=root] .authItem[data-go=signup]::after,.authView[data-view=signup] a.authItem[href*=diyetisyen]::after {
    background:linear-gradient(180deg,var(--auth-signup-a),var(--auth-signup-b))
}
.authView[data-view=root] .authItem[data-go=login]::before {
    background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(96,165,250,.12))
}
.authView[data-view=root] .authItem[data-go=signup]::before,.authView[data-view=signup] a.authItem[href*=diyetisyen]::before {
    background:linear-gradient(135deg,rgba(22,163,74,.12),rgba(134,239,172,.12))
}
.authView[data-view=login] a.authItem[href*=diyetisyen]::after {
    background:linear-gradient(180deg,var(--auth-dyt-a),var(--auth-dyt-b))
}
.authView[data-view=login] a.authItem[href*=danisan]::after,.authView[data-view=signup] a.authItem[href*=danisan]::after {
    background:linear-gradient(180deg,var(--auth-dan-a),var(--auth-dan-b))
}
.authView[data-view=login] a.authItem[href*=diyetisyen]::before {
    background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(196,181,253,.12))
}
.authView[data-view=login] a.authItem[href*=danisan]::before,.authView[data-view=signup] a.authItem[href*=danisan]::before {
    background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(103,232,249,.12))
}
.authFoot {
    padding:12px 14px 14px;
    border-top:1px solid rgba(15,23,42,.1);
    color:rgba(15,23,42,.7)
}
.authFoot small {
    font-size:12.5px
}
.login-tab {
    color:#fff!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.12)),linear-gradient(180deg,var(--green) 0,var(--green2) 100%)!important;
    box-shadow:0 12px 28px rgba(46,125,50,.3),0 6px 14px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.22)!important;
    backdrop-filter:none!important
}
.login-tab:hover {
    transform:translateY(-1px);
    filter:saturate(1.05);
    box-shadow:0 16px 36px rgba(46,125,50,.34),0 8px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.24)!important
}
.login-tab:active {
    transform:translateY(1px);
    box-shadow:0 10px 22px rgba(46,125,50,.26),0 4px 10px rgba(0,0,0,.1),inset 0 2px 0 rgba(0,0,0,.12),inset 0 -2px 0 rgba(255,255,255,.1)!important
}
.authWrap.open .login-tab {
    box-shadow:0 18px 44px rgba(46,125,50,.36),0 10px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.24)!important
}
.login-tab .authBtnCaret {
    border-right:2px solid rgba(255,255,255,.92)!important;
    border-bottom:2px solid rgba(255,255,255,.92)!important
}
.login-tab:focus-visible {
    outline:rgba(46,125,50,.35) solid 3px!important;
    outline-offset:3px!important
}
:root {
    --kd-role-radius:22px;
    --kd-role-line:rgba(17,24,39,.10);
    --kd-role-line2:rgba(17,24,39,.08);
    --kd-role-shadow:0 26px 80px rgba(17,24,39,.14);
    --kd-role-shadow2:0 16px 44px rgba(17,24,39,.12)
}
.kd-rolecard {
    width:min(980px,calc(100vw - 28px));
    margin:10px auto 16px;
    border-radius:var(--kd-role-radius);
    border:1px solid var(--kd-role-line);
    background:radial-gradient(120% 160% at 12% 0,rgba(255,255,255,.92) 0,rgba(255,255,255,.78) 42%,rgba(255,255,255,.7) 100%),linear-gradient(180deg,rgba(255,255,255,.76),rgba(245,247,250,.86));
    box-shadow:var(--kd-role-shadow);
    color:var(--t1)
}
.kd-rolepick .t,.kd-roletitle {
    color:var(--t0);
    font-weight:950
}
.kd-rolehead {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:18px 18px 14px;
    border-bottom:1px solid var(--kd-role-line2)
}
.kd-roletitle {
    font-size:18px
}
.kd-rolesub {
    margin-top:4px;
    font-size:13.5px;
    line-height:1.45;
    color:var(--t1);
    max-width:70ch
}
.kd-rolehint {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-radius:999px;
    border:1px solid rgba(46,125,50,.22);
    background:rgba(46,125,50,.1);
    color:rgba(27,94,32,.92);
    font-weight:950;
    font-size:12.5px;
    box-shadow:0 12px 26px rgba(46,125,50,.1)
}
.kd-rolehint .pin {
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(46,125,50,.92);
    box-shadow:0 0 0 5px rgba(46,125,50,.16)
}
.kd-rolegrid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:16px 18px 18px
}
.kd-rolepick {
    --kd-a:var(--green);
    --kd-b:var(--green2);
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:16px;
    border-radius:18px;
    border:1px solid rgba(17,24,39,.1);
    text-decoration:none;
    color:inherit;
    background:radial-gradient(120% 160% at 20% 0,rgba(255,255,255,.96) 0,rgba(255,255,255,.8) 46%,rgba(255,255,255,.72) 100%),linear-gradient(180deg,rgba(255,255,255,.78),rgba(245,247,250,.86));
    box-shadow:var(--kd-role-shadow2);
    transition:transform .16s,box-shadow .16s,border-color .16s,filter .16s
}
.kd-rolepick::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:6px;
    background:linear-gradient(90deg,var(--kd-a),var(--kd-b));
    opacity:.95
}
.kd-rolepick::after {
    content:"";
    position:absolute;
    right:-60px;
    top:-70px;
    width:190px;
    height:190px;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.85),rgba(255,255,255,0) 60%),radial-gradient(circle at 60% 60%,color-mix(in srgb,var(--kd-b) 22%,transparent),transparent 62%);
    opacity:.85;
    filter:blur(2px)
}
.kd-rolepick[data-rolepick=patient] {
    --kd-a:#16a34a;
    --kd-b:#22c55e
}
.kd-rolepick[data-rolepick=dietitian] {
    --kd-a:#7c3aed;
    --kd-b:#a78bfa
}
.kd-rolepick:hover {
    transform:translateY(-2px);
    border-color:rgba(17,24,39,.14);
    box-shadow:0 30px 78px rgba(17,24,39,.14)
}
.kd-rolepick:focus-visible {
    outline:rgba(46,125,50,.28) solid 3px;
    outline-offset:3px
}
.kd-rolebadge {
    width:48px;
    height:48px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.92),rgba(255,255,255,.62)),linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.2));
    border:1px solid rgba(17,24,39,.1);
    box-shadow:0 14px 26px rgba(17,24,39,.1);
    flex:0 0 auto
}
.kd-rolebadge img {
    width:28px;
    height:28px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 10px 18px rgba(17,24,39,.12))
}
.kd-rolepick .t {
    font-size:16px;
    line-height:1.15
}
.kd-rolepick .s {
    margin-top:4px;
    font-size:13px;
    color:var(--t1);
    line-height:1.35
}
.kd-rolepick .arr {
    font-weight:950;
    color:rgba(17,24,39,.55);
    font-size:18px;
    padding-left:6px;
    transition:transform .16s,color .16s
}
.kd-rolepick:hover .arr {
    transform:translateX(2px);
    color:rgba(17,24,39,.7)
}
.kd-seg {
    width:min(980px,calc(100vw - 28px));
    margin:10px auto 8px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:10px;
    border-radius:18px;
    border:1px solid var(--kd-role-line);
    background:rgba(255,255,255,.7);
    box-shadow:0 14px 34px rgba(17,24,39,.1)
}
.kd-rolebtn {
    border:1px solid rgba(17,24,39,.1);
    background:rgba(255,255,255,.74);
    border-radius:16px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-weight:950;
    color:rgba(17,24,39,.78);
    cursor:pointer;
    transition:transform .14s,box-shadow .14s,background .14s,border-color .14s;
    user-select:none
}
.kd-rolebtn:hover {
    transform:translateY(-1px);
    background:rgba(255,255,255,.88);
    box-shadow:0 18px 44px rgba(17,24,39,.12);
    border-color:rgba(17,24,39,.14)
}
.kd-rolebtn.active {
    border-color:transparent;
    color:#fff;
    background:linear-gradient(180deg,var(--green),var(--green2));
    box-shadow:0 18px 40px rgba(46,125,50,.2)
}
.kd-rolebtn:focus-visible {
    outline:rgba(46,125,50,.28) solid 3px;
    outline-offset:3px
}
.kd-roleicon {
    width:20px;
    height:20px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 10px 16px rgba(17,24,39,.1))
}
@media (max-width:820px) {
    .packModal {
        padding:8px
    }
    .packModalCard {
        width:min(640px,100%);
        max-height:94vh;
        border-radius:20px
    }
    .kd-rolehead {
        padding:16px 14px 12px
    }
    .kd-rolegrid {
        padding:14px 14px 16px;
        grid-template-columns:1fr
    }
    .kd-roletitle {
        font-size:17px
    }
    .kd-rolesub {
        font-size:13.2px
    }
    .kd-rolehint {
        padding:8px 10px;
        font-size:12.2px
    }
    .kd-seg {
        gap:8px;
        padding:8px
    }
    .kd-rolebtn {
        padding:11px 10px
    }
}
@media (max-width:520px) {
    .packModal {
        padding:6px
    }
    .packModalCard {
        width:100%;
        max-height:96vh;
        border-radius:18px
    }
    .login-tab {
        padding:9px 12px
    }
    .authItem {
        padding:13px 12px 13px 54px
    }
    .authItem .authItemMain {
        font-size:14px
    }
    .authItem .authItemSub {
        font-size:12px
    }
    .kd-rolehead {
        flex-direction:column;
        align-items:flex-start;
        gap:10px
    }
    .kd-rolehint {
        align-self:flex-start
    }
    .kd-rolepick {
        padding:14px;
        border-radius:16px
    }
    .kd-rolebadge {
        width:46px;
        height:46px;
        border-radius:15px
    }
    .kd-rolepick .t {
        font-size:15px
    }
    .kd-rolepick .s {
        font-size:12.6px
    }
    .kd-seg {
        border-radius:16px
    }
    .kd-rolebtn {
        border-radius:14px;
        font-size:14px
    }
}
@media (prefers-reduced-motion:reduce) {
    .authDD,.authItem,.kd-rolebtn,.kd-rolepick,.kd-rolepick .arr,.login-tab {
        transition:none!important
    }
}
.kd-auth-shell {
    width:min(980px,calc(100vw - 28px));
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:stretch;
    min-width:0
}
.kd-auth-shell>.kd-reg-wrap,.kd-auth-shell>.kd-rolecard,.kd-auth-shell>.kd-seg {
    width:100%!important;
    margin:0!important
}
.packModalBody .kd-auth-shell {
    flex:1 1 100%
}
#panelLoader,#panelLoading,.kd-loading,.panel-loader,.panel-loading,.panelLoadText,.panelLoading {
    display:none!important
}
.kd-loading.show {
    display:flex!important
}
.kd-loading {
    position:fixed;
    inset:0;
    align-items:center;
    justify-content:center;
    z-index:9999;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(6px)
}
.packModalBody.kd-auth-body {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:14px !important;
}
.kd-auth-root {
    width:min(980px, calc(100vw - 28px));
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
}
/* === TOPBAR: arka plan tam kapalı === */
.topbar {
    background:#ffffff !important;
    border:1px solid rgba(17,24,39,.14) !important;
}
.topbar * {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}
/* === AUTH DROPDOWN: kart arka planı tam kapalı === */
.authDD {
    background:#ffffff !important;
    /* transparan olmasın */
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    border:1px solid rgba(15,23,42,.14) !important;
}
.authItem {
    background:#ffffff !important;
    /* item'lar da opak */
}
.authDD::before {
    background:#ffffff !important;
    /* ok (triangle) opak */
}
/* Auth menüsü overlay'in üstünde kalsın */
.authDD {
    z-index:1000 !important;
}
/* === MOBİL: authDD dropdown değil, ortada modal gibi çıksın === */
@media (max-width: 640px) {
    /* authDD'yi viewport ortasına sabitle */
    .authDD {
        position:fixed !important;
        left:50% !important;
        top:50% !important;
        right:auto !important;
        transform:translate(-50%,-50%) !important;
        width:min(420px, calc(100vw - 24px)) !important;
        max-height:calc((var(--vh, 1vh) * 100) - 24px) !important;
        overflow:hidden !important;
        border-radius:18px !important;
    }
    /* mobilde ok (triangle) istemiyoruz */
    .authDD::before {
        display:none !important;
    }
    /* içeriğin scroll’u düzgün aksın */
    .authDD .authView.is-active {
        overflow:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }
}
/* =========================
   AUTH DROPDOWN — ikon ortalama (PNG)
   - ikonu .authItem içine alır
   - title/sub/arrow hizası düzelir
========================= */

/* Eski pseudo-ikon'u kapat */
.authItem .authItemMain::before{
  content:none !important;
  background:none !important;
  width:0 !important;
  height:0 !important;
  box-shadow:none !important;
  border:0 !important;
}

/* Auth item'ı 3 kolon yap: [ikon] [text] [arrow] */
.authItem{
  padding:14px !important;              /* soldaki padding-left hack'i kalksın */
  grid-template-columns:86px 1fr auto !important;
  grid-template-rows:auto auto !important;
  column-gap:12px !important;
  align-items:center !important;

  /* ::before overlay yerine item arkaplanını direkt verelim */
  background-color:rgba(255,255,255,.70) !important;
  background-image:linear-gradient(135deg,rgba(99,102,241,.10),rgba(16,185,129,.10)) !important;
}

/* View’e göre arkaplan tonları (eski ::before efektinin karşılığı) */
.authView[data-view=root] .authItem[data-go=login]{
  background-image:linear-gradient(135deg,rgba(37,99,235,.12),rgba(96,165,250,.12)) !important;
}
.authView[data-view=root] .authItem[data-go=signup]{
  background-image:linear-gradient(135deg,rgba(22,163,74,.12),rgba(134,239,172,.12)) !important;
}
.authView[data-view=login] a.authItem[href*="diyetisyen"]{
  background-image:linear-gradient(135deg,rgba(124,58,237,.12),rgba(196,181,253,.12)) !important;
}
.authView[data-view=login] a.authItem[href*="danisan"],
.authView[data-view=signup] a.authItem[href*="danisan"]{
  background-image:linear-gradient(135deg,rgba(14,165,233,.12),rgba(103,232,249,.12)) !important;
}

/* Title/Sub/Arrow yerleşimi */
.authItem .authItemMain{
  grid-column:2/3 !important;
  grid-row:1 !important;
  align-self:end !important;
}
.authItem .authItemSub{
  grid-column:2/3 !important;
  grid-row:2 !important;
  align-self:start !important;
  margin-top:3px !important;
}
.authItem .authArrow{
  grid-column:3/4 !important;
  grid-row:1/3 !important;
  align-self:center !important;
}

/* Yeni ikon: .authItem::before (tam ortalı) */
.authItem::before{
  content:"" !important;
  position:relative !important;
  grid-column:1/2 !important;
  grid-row:1/3 !important;
  justify-self:center !important;
  align-self:center !important;

  width:70px !important;
  height:70px !important;
  border-radius:18px !important;

  /* ÇERÇEVE İSTEMİYORSUN: border/gölge yok */
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;

  /* PNG'yi CSS değişkeninden bas (sende var(--auth-ico) kullanılıyor) */
  background-image:var(--auth-ico) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}

/* Eski overlay pseudo’sunu tamamen kapat (biz artık background-image kullandık) */
.authItem::before, .authItem::after{ pointer-events:none; }
.authItem::before{ z-index:2; }
.authItem .authItemMain, .authItem .authItemSub, .authItem .authArrow{ position:relative; z-index:3; }

/* Eğer senin mevcut CSS’te .authItem::before overlay kalmışsa kesin kapansın */
.authItem::before{ opacity:1 !important; }