/* Kodend hesap portalı (kayıt, giriş, hesabım). Form iskeleti site.css .demo-form ile ortak. */
.hs-narrow { max-width: 520px; }
.hs-code { font-size: 1.6rem; letter-spacing: .24em; font-variant-numeric: tabular-nums; min-height: 54px; }
.hs-resend { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--kd-line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hs-resend p { flex-basis: 100%; margin: 0; line-height: 1.6; }
.hs-resend a { font-size: var(--kd-text-sm); }
.hs-login { grid-template-columns: 1fr; margin-top: 24px; }
.hs-form .kd-select { width: 100%; }
.kd-hint { font-size: var(--kd-text-xs); color: var(--kd-ink-3, #697090); }
.kd-hint.hs-good { color: var(--kd-ok, #0F7B55); font-weight: 600; }
.kd-hint.hs-bad { color: var(--kd-err, #C42B2B); font-weight: 600; }
.hs-slug { display: flex; align-items: stretch; }
.hs-slug .kd-input { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; min-width: 0; }
.hs-slug-suf { display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--kd-line); border-left: 0; border-radius: 0 var(--kd-r-sm, 10px) var(--kd-r-sm, 10px) 0; background: var(--kd-surface-2, #F8F9FC); color: var(--kd-ink-3, #697090); font-weight: 600; white-space: nowrap; }
.hs-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--kd-text-sm); line-height: 1.5; cursor: pointer; }
.hs-check input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.hs-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hs-plan { margin: 24px 0 18px; padding: 20px; border: 1px solid var(--kd-line); border-radius: var(--kd-r-lg); background: var(--kd-surface); display: flex; flex-direction: column; gap: 6px; }
.hs-plan-k, .hs-kind { font-size: var(--kd-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kd-ink-3, #697090); }
.hs-plan b { font-size: 1.35rem; }
.hs-plan-p { font-weight: 700; font-size: 1.1rem; }
.hs-plan-p small { font-weight: 500; color: var(--kd-ink-3, #697090); font-size: .8rem; }
.hs-plan .checks { margin: 8px 0 4px; }
.hs-plan-ch { font-weight: 600; font-size: var(--kd-text-sm); }

.hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.hs-h2 { margin: 40px 0 14px; font-size: 1.25rem; }

/* Mağaza kurulum çubuğu (Mağazalarım; hesap.js durumu yoklar) */
.hs-prog { margin-top: 6px; }
.hs-prog > span { display: block; height: 6px; border-radius: 999px; background: var(--kd-surface-2, #EEF0F6); overflow: hidden; }
.hs-prog > span > i { display: block; width: 35%; height: 100%; border-radius: 999px; background: var(--kd-accent, #2F49D1); animation: hs-akis 1.4s ease-in-out infinite; }
@keyframes hs-akis { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .hs-prog > span > i { animation: none; width: 60%; } }
.hs-prog p, .hs-note { margin: 8px 0 0; font-size: var(--kd-text-sm); color: var(--kd-ink-3, #697090); }

/* Gizli öğeler: .kd-btn gibi display tanımlı bileşenlerde de gizli kalsın */
.hs-form [hidden] { display: none !important; }
.form-ok { padding: 12px 16px; border-radius: var(--kd-r-md); background: color-mix(in srgb, var(--kd-ok, #0F7B55) 12%, transparent); color: var(--kd-ok, #0F7B55); font-weight: 600; font-size: .92rem; }

/* =====================================================================
   Hesap merkezi (views/hesap/*): sol menü, üst çubuk, kartlar, formlar.
   Kodend UI belirteçleri; açık/koyu tema sistemden. Satır içi stil yok (CSP).
   ===================================================================== */
body.hp {
  --kd-ink: #20242e; --kd-bg: #f6f7f9; --kd-surface: #fff; --kd-soft: #f1f3f6;
  --kd-line: #e3e6ec; --kd-muted: #626975; --kd-brand: #cb2228; --kd-brand-soft: #fff0f1;
  --kd-accent: var(--kd-brand); --kd-accent-soft: var(--kd-brand-soft); --kd-on-accent: #fff;
  --kd-focus: 0 0 0 3px color-mix(in srgb, var(--kd-brand) 28%, transparent);
  --hp-radius: 18px; --hp-shadow: 0 2px 6px -4px rgba(16, 24, 40, .15);
  margin: 0; background: var(--kd-bg); color: var(--kd-ink); font: 400 15px/1.6 var(--kd-font-body); -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.hp {
    --kd-ink: #eef0f4; --kd-bg: #101217; --kd-surface: #191c23; --kd-soft: #22262f;
    --kd-line: #30353f; --kd-muted: #a5acb9; --kd-brand: #ff777d; --kd-brand-soft: #392127; --kd-on-accent: #191217;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] body.hp {
  --kd-ink: #eef0f4; --kd-bg: #101217; --kd-surface: #191c23; --kd-soft: #22262f;
  --kd-line: #30353f; --kd-muted: #a5acb9; --kd-brand: #ff777d; --kd-brand-soft: #392127; --kd-on-accent: #191217;
  color-scheme: dark;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp-icerik :where(a:not([class])), .hp-icerik a.hp-bag, .hp-bolum-bas > a { color: var(--kd-accent); text-underline-offset: 3px; }
.hp :is(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--kd-brand); outline-offset: 3px; }
.hp .kd-btn { min-height: 44px; padding: 10px 18px; border-radius: 10px; font-size: .875rem; }
.hp .kd-btn--sm { min-height: 38px; padding: 7px 12px; }
.hp h1, .hp h2, .hp h3, .hp p, .hp dl, .hp dd, .hp ol, .hp ul { margin: 0; }
.hp [hidden] { display: none !important; }
.hp-atla { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--kd-ink); color: var(--kd-bg); border-radius: var(--kd-r-md); }
.hp-atla:focus { left: 8px; }
.hp-ic { width: 18px; height: 18px; flex: none; }

.hp-kabuk { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.hp-yan { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 28px; padding: 28px 16px 20px; background: #17191f; color: #f5f6f8; border-right: 1px solid #2b2d35; overflow-y: auto; overscroll-behavior: contain; }
.hp-yan-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hp-logo { display: flex; align-items: center; gap: 10px; padding: 0 10px; text-decoration: none; }
.hp-logo img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }
.hp-logo span { font: 500 .75rem var(--kd-font-body); color: #a7adb9; padding-left: 10px; border-left: 1px solid #424651; }
.hp-menu-kapat { display: none; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid #424651; border-radius: 10px; background: none; color: #fff; cursor: pointer; }
.hp-calisma { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border: 1px solid #363943; border-radius: 12px; background: #21242c; }
.hp-calisma .hp-avatar { width: 34px; height: 34px; border-radius: 9px; background: #38313a; color: #ffc4c7; }
.hp-calisma > div { min-width: 0; display: grid; gap: 1px; }
.hp-calisma small { color: #a7adb9; font-size: .7rem; }
.hp-calisma b { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-menu { display: grid; gap: 5px; }
.hp-menu-etiket { padding: 0 12px 10px; color: #a7adb9; font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.hp-menu a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 12px; border-radius: 9px; color: #b9bfcb; font-weight: 500; font-size: .84rem; text-decoration: none; transition: background .15s, color .15s; }
.hp-menu a:hover { background: #252831; color: #fff; }
.hp-menu a.is-on { background: #3a2229; color: #ffb3b8; }
.hp-menu a.is-on::before { content: ""; position: absolute; left: -16px; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: #ef4852; }
.hp-yan-alt { margin-top: auto; display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid #363943; }
.hp-yan-alt a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 9px; color: #a7adb9; font-size: .8rem; font-weight: 500; text-decoration: none; }
.hp-yan-alt a:hover { color: #fff; background: #252831; }
.hp-yan-alt .hp-ic { width: 15px; height: 15px; }

.hp-ana { min-width: 0; display: flex; flex-direction: column; }
.hp-ust { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 12px 40px; background: color-mix(in srgb, var(--kd-surface) 95%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--kd-line); }
.hp-ust-baslik { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hp-ust-baslik > span { color: var(--kd-muted); font-size: .69rem; font-weight: 500; }
.hp-baslik { min-width: 0; font: 700 1.1rem/1.4 var(--kd-font-body); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-menu-ac { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--kd-line); border-radius: var(--kd-r-md); background: var(--kd-surface); color: var(--kd-ink); cursor: pointer; }
.hp-kim { position: relative; }
.hp-kim-btn { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 9px 5px 5px; border: 1px solid transparent; border-radius: 12px; background: var(--kd-surface); color: var(--kd-ink); font: inherit; cursor: pointer; text-align: left; }
.hp-kim-btn > .hp-ic { width: 15px; color: var(--kd-muted); }
.hp-kim-btn[aria-expanded="true"] { background: var(--kd-soft); border-color: var(--kd-line); }
.hp-kim-btn:hover { border-color: color-mix(in srgb, var(--kd-ink) 30%, var(--kd-line)); }
.hp-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--kd-brand-soft); color: var(--kd-brand); font: 700 .9rem var(--kd-font-body); flex: none; }
.hp-kim-ad { display: grid; line-height: 1.2; max-width: 200px; }
.hp-kim-ad b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-kim-ad small { font-size: .76rem; color: var(--kd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-kim-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-r-lg); box-shadow: var(--kd-shadow-float); display: grid; gap: 2px; }
.hp-kim-menu a, .hp-kim-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--kd-r-md); background: none; color: var(--kd-ink); font: 500 .85rem var(--kd-font-body); text-decoration: none; cursor: pointer; text-align: left; }
.hp-kim-menu a:hover, .hp-kim-menu button:hover { background: var(--kd-soft); }
.hp-kim-menu form { margin: 2px 0 0; border-top: 1px solid var(--kd-line); padding-top: 2px; }
.hp-kim-menu button { color: var(--kd-err); }

.hp-icerik { width: 100%; max-width: 1280px; margin: 0 auto; padding: 36px 40px 56px; display: grid; gap: 28px; align-content: start; }
.hp-icerik > *, .hp-kutu > *, .hp-alan { min-width: 0; }
.hp-icerik :is(p, dd, .hp-alt, .hp-not) { overflow-wrap: anywhere; }
.hp-uyari { padding: 12px 16px; border-radius: var(--kd-r-md); font-weight: 600; font-size: .92rem; border: 1px solid transparent; }
.hp-uyari.is-ok { background: color-mix(in srgb, var(--kd-ok) 10%, var(--kd-surface)); color: var(--kd-ok); border-color: color-mix(in srgb, var(--kd-ok) 25%, transparent); }
.hp-uyari.is-err { background: color-mix(in srgb, var(--kd-err) 9%, var(--kd-surface)); color: var(--kd-err); border-color: color-mix(in srgb, var(--kd-err) 25%, transparent); }

/* Yazı */
.hp-h1 { font: 700 clamp(1.7rem, 3vw, 2.3rem)/1.2 var(--kd-font-display); letter-spacing: -.035em; margin-top: 6px; }
.hp-ust-bilgi { font: 700 .76rem var(--kd-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--kd-muted); }
.hp-alt { color: var(--kd-muted); font-size: .93rem; }
.hp-karsilama .hp-alt { margin-top: 6px; max-width: 64ch; }
.hp-sayfa-bas { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.hp-sayfa-bas .hp-alt { max-width: 70ch; }
.hp-bolum { display: grid; gap: 14px; }
.hp-bolum-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hp-bolum-bas h2, .hp-kutu h2 { font: 700 1rem/1.5 var(--kd-font-body); letter-spacing: -.02em; }
.hp-kutu-bas { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--kd-line); }
.hp-kutu-bas .hp-alt { font-size: .82rem; }
.hp-bolum-bas a, .hp-bag { font-weight: 600; font-size: .9rem; text-decoration: none; }
.hp-bolum-bas a:hover, .hp-bag:hover { text-decoration: underline; }

/* Kutular, rozetler */
.hp-kutu { padding: 26px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); display: grid; gap: 16px; align-content: start; }
.hp-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.hp-iki-genis { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.hp-rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--kd-r-pill); font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--kd-soft); color: var(--kd-muted); }
.hp-rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hp-rozet.is-ok { background: color-mix(in srgb, var(--kd-ok) 12%, transparent); color: var(--kd-ok); }
.hp-rozet.is-wait { background: color-mix(in srgb, var(--kd-info) 12%, transparent); color: var(--kd-info); }
.hp-rozet.is-warn { background: color-mix(in srgb, var(--kd-warn) 14%, transparent); color: var(--kd-warn); }
.hp-rozet.is-err { background: color-mix(in srgb, var(--kd-err) 12%, transparent); color: var(--kd-err); }
.hp-urun { display: inline-block; font: 700 .72rem var(--kd-font-body); letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--kd-r-pill); background: var(--kd-soft); color: var(--kd-muted); }
.hp-urun-commerce { background: var(--kd-commerce-soft); color: var(--kd-commerce); }
.hp-urun-connect { background: var(--kd-connect-soft); color: var(--kd-connect); }
.hp-urun-bundle { background: var(--kd-brand-soft); color: var(--kd-brand); }

/* Deneme şeridi */
.hp-deneme { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 24px; align-items: center; padding: 22px 24px; border-radius: var(--hp-radius); background: var(--kd-surface); border: 1px solid var(--kd-line); box-shadow: var(--hp-shadow); }
.hp-deneme.is-acil { background: linear-gradient(120deg, color-mix(in srgb, var(--kd-warn) 12%, var(--kd-surface)), var(--kd-surface)); border-color: color-mix(in srgb, var(--kd-warn) 35%, var(--kd-line)); }
.hp-deneme.is-bitti { grid-template-columns: minmax(0, 1fr) auto; background: color-mix(in srgb, var(--kd-err) 7%, var(--kd-surface)); border-color: color-mix(in srgb, var(--kd-err) 30%, var(--kd-line)); }
.hp-deneme-t { display: grid; gap: 3px; }
.hp-deneme-t b { font-size: 1rem; }
.hp-deneme-t span { color: var(--kd-muted); font-size: .88rem; }
.hp-cubuk { height: 6px; border-radius: var(--kd-r-pill); background: var(--kd-soft); overflow: hidden; }
.hp-cubuk i { display: block; height: 100%; border-radius: inherit; background: var(--kd-brand); }
.hp-deneme.is-acil .hp-cubuk i { background: var(--kd-warn); }
.hp-w-0 { width: 0 } .hp-w-5 { width: 5% } .hp-w-10 { width: 10% } .hp-w-15 { width: 15% } .hp-w-20 { width: 20% } .hp-w-25 { width: 25% } .hp-w-30 { width: 30% }
.hp-w-35 { width: 35% } .hp-w-40 { width: 40% } .hp-w-45 { width: 45% } .hp-w-50 { width: 50% } .hp-w-55 { width: 55% } .hp-w-60 { width: 60% } .hp-w-65 { width: 65% }
.hp-w-70 { width: 70% } .hp-w-75 { width: 75% } .hp-w-80 { width: 80% } .hp-w-85 { width: 85% } .hp-w-90 { width: 90% } .hp-w-95 { width: 95% } .hp-w-100 { width: 100% }

/* Panel geçişi */
.hp-paneller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hp-panel-form { margin: 0; min-width: 0; }
.hp-panel { width: 100%; height: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 24px; border: 1px solid var(--kd-line); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); background: var(--kd-surface); color: var(--kd-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.hp-panel:hover:not(:disabled) { border-color: color-mix(in srgb, var(--kd-brand) 55%, var(--kd-line)); box-shadow: 0 4px 16px -10px rgba(16, 24, 40, .4); }
.hp-panel .hp-rozet { grid-row: 2; grid-column: 2; justify-self: start; }
.hp-panel:disabled { cursor: default; opacity: .75; }
.hp-panel-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; }
.hp-panel-ic svg { width: 24px; height: 24px; }
.hp-panel-commerce .hp-panel-ic { background: var(--kd-commerce-soft); color: var(--kd-commerce); }
.hp-panel-connect .hp-panel-ic { background: var(--kd-connect-soft); color: var(--kd-connect); }
.hp-panel-t { display: grid; gap: 5px; min-width: 0; }
.hp-panel-t small { font: 600 .64rem/1.5 var(--kd-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--kd-muted); }
.hp-panel-t b { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-panel-t em { font-style: normal; color: var(--kd-muted); font-size: .8rem; }
.hp-panel-ok { grid-column: 3; grid-row: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--kd-soft); font-size: 1rem; color: var(--kd-muted); }

/* Özet kartları */
.hp-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hp-kart { display: grid; gap: 8px; padding: 22px 24px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); text-decoration: none; color: var(--kd-ink); transition: border-color .15s; }
.hp-kart:hover { border-color: color-mix(in srgb, var(--kd-ink) 35%, var(--kd-line)); }
.hp-kart small { font: 600 .7rem var(--kd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--kd-muted); }
.hp-kart b { font: 700 1.35rem/1.4 var(--kd-font-display); letter-spacing: -.02em; }
.hp-kart span { color: var(--kd-muted); font-size: .86rem; }

/* Kurulum rehberi ve iletişim */
.hp-adimlar { list-style: none; padding: 0; display: grid; gap: 4px; counter-reset: adim; }
.hp-adimlar li { counter-increment: adim; }
.hp-adimlar a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 10px; border-radius: var(--kd-r-md); text-decoration: none; color: var(--kd-ink); }
.hp-adimlar a::before { content: counter(adim); grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--kd-soft); font: 700 .82rem var(--kd-font-display); color: var(--kd-ink); }
.hp-adimlar a:hover { background: var(--kd-soft); }
.hp-adimlar a:hover::before { background: var(--kd-ink); color: var(--kd-bg); }
.hp-adimlar b { font-size: .95rem; }
.hp-adimlar span { color: var(--kd-muted); font-size: .84rem; }
.hp-iletisim { list-style: none; padding: 0; display: grid; gap: 8px; }
.hp-iletisim a { display: grid; padding: 12px 14px; border: 1px solid var(--kd-line); border-radius: var(--kd-r-md); text-decoration: none; color: var(--kd-ink); }
.hp-iletisim a:hover { border-color: var(--kd-ink); }
.hp-iletisim small { color: var(--kd-muted); font-size: .78rem; }
.hp-iletisim b { font-size: .95rem; }
.hp-destek-kutu .kd-btn { justify-self: start; }

/* Mağazalar */
.hp-magazalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; }
.hp-magaza { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); }
.hp-magaza-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hp-magaza h2 { font: 700 1.3rem var(--kd-font-display); letter-spacing: -.01em; }
.hp-adres { font-weight: 600; font-size: .9rem; word-break: break-all; }
.hp-adres.is-soluk { color: var(--kd-muted); }
.hp-bilgi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 0; border-top: 1px solid var(--kd-line); border-bottom: 1px solid var(--kd-line); }
.hp-bilgi div { display: grid; gap: 1px; }
.hp-bilgi dt { color: var(--kd-muted); font-size: .78rem; }
.hp-bilgi dd { font-weight: 600; font-size: .92rem; }
.hp-bilgi-yatay { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; padding: 8px 0; gap: 20px; }
.hp-bilgi-yatay > div { gap: 6px; }
.hp-not { color: var(--kd-muted); font-size: .88rem; }
.hp-not.is-uyari { color: var(--kd-warn); font-weight: 600; }
.hp-magaza-eylem { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 6px; }
.hp-magaza-eylem form { margin: 0; }
.hp-magaza-eylem .hp-bag { margin-left: auto; }
.hp-bos { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 60px 24px; background: var(--kd-surface); border: 1px dashed var(--kd-line); border-radius: var(--hp-radius); }
.hp-bos b { font: 700 1.15rem var(--kd-font-display); }
.hp-bos p { color: var(--kd-muted); }

/* Abonelik */
.hp-abone { display: grid; grid-template-columns: minmax(0, 1fr) 280px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); overflow: hidden; }
.hp-abone-ana { min-width: 0; padding: 30px; display: grid; gap: 22px; align-content: start; }
.hp-abone-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hp-abone-bas h2 { font: 800 1.6rem var(--kd-font-display); letter-spacing: -.02em; margin: 8px 0 2px; }
.hp-fiyat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hp-fiyat b { font: 800 2rem var(--kd-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hp-fiyat span { color: var(--kd-muted); font-size: .9rem; }
.hp-ozellik { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.hp-ozellik li { position: relative; padding-left: 26px; font-size: .92rem; }
.hp-ozellik li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--kd-ok) 16%, transparent); }
.hp-ozellik li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 4px; height: 8px; border: solid var(--kd-ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hp-abone-yan { padding: 26px; display: grid; gap: 16px; align-content: start; background: var(--kd-soft); border-left: 1px solid var(--kd-line); }
.hp-abone-yan div { display: grid; gap: 2px; }
.hp-abone-yan dt { color: var(--kd-muted); font-size: .78rem; }
.hp-abone-yan dd { font-weight: 700; display: grid; }
.hp-abone-yan small { font-weight: 500; font-size: .8rem; color: var(--kd-muted); }
.hp .is-uyari, .hp-abone-yan small.is-uyari { color: var(--kd-warn); font-weight: 700; }
.hp-paket-form { display: grid; gap: 16px; }
.hp-paketler { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.hp-paket { position: relative; cursor: pointer; }
.hp-paket input { position: absolute; opacity: 0; inset: 0; }
.hp-paket-ic { height: 100%; display: grid; gap: 4px; align-content: start; padding: 18px; border: 1.5px solid var(--kd-line); border-radius: var(--kd-r-lg); background: var(--kd-surface); transition: border-color .15s, box-shadow .15s; }
.hp-paket-ic small { font: 700 .72rem var(--kd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--kd-muted); }
.hp-paket-ic b { font: 700 1.1rem var(--kd-font-display); }
.hp-paket-ic strong { font: 800 1.35rem var(--kd-font-display); font-variant-numeric: tabular-nums; }
.hp-paket-ic strong em { font: 500 .82rem var(--kd-font-body); font-style: normal; color: var(--kd-muted); }
.hp-paket-ic span { color: var(--kd-muted); font-size: .85rem; }
.hp-paket:hover .hp-paket-ic { border-color: color-mix(in srgb, var(--kd-ink) 35%, var(--kd-line)); }
.hp-paket input:checked + .hp-paket-ic { border-color: var(--kd-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kd-brand) 18%, transparent); }
.hp-paket input:focus-visible + .hp-paket-ic { box-shadow: var(--kd-focus); }
.hp-form-alt { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--kd-line); }
.hp-form-alt .hp-alt { flex: 1 1 320px; font-size: .86rem; }

/* Formlar */
.hp-form { gap: 22px; }
.hp-form > .hp-form-alt { margin-top: auto; }
.hp-form.hp-kutu { align-content: normal; }
.hp-alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; align-content: start; }
.hp-alanlar.hp-tek { grid-template-columns: minmax(0, 1fr); }
.hp-alan { display: grid; gap: 8px; font-weight: 600; font-size: .82rem; align-content: start; }
.hp-alan.is-genis { grid-column: 1 / -1; }
.hp-alan > span { overflow-wrap: anywhere; }
.hp-alan em { font-style: normal; font-weight: 500; color: var(--kd-muted); font-size: .8rem; margin-left: 4px; }
.hp-alan .kd-input { width: 100%; min-width: 0; min-height: 46px; padding: 11px 13px; border-color: color-mix(in srgb, var(--kd-muted) 70%, var(--kd-line)); border-radius: 10px; background: var(--kd-surface); font: 400 1rem/1.5 var(--kd-font-body); transition: border-color .15s, box-shadow .15s; }
.hp-alan .kd-input:hover { border-color: var(--kd-muted); }
.hp-alan .kd-input:focus { border-color: var(--kd-brand); box-shadow: var(--kd-focus); }
.hp-alan .kd-input::placeholder { color: var(--kd-muted); opacity: .8; }
.hp-alan textarea.kd-input { resize: vertical; min-height: 104px; }
.hp-alan [aria-invalid="true"] { border-color: var(--kd-err); }
.hp-hata { color: var(--kd-err); font-size: .82rem; font-weight: 600; }
.hp-salt { font-weight: 500; font-size: .9rem; padding: 12px 14px; background: var(--kd-soft); border: 1px solid var(--kd-line); border-radius: 10px; overflow-wrap: anywhere; }
.hp-alan > small.hp-alt { font-size: .76rem; font-weight: 400; }
.hp-tercih { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--kd-line); border-radius: 12px; cursor: pointer; }
.hp-tercih:has(input:checked) { border-color: color-mix(in srgb, var(--kd-brand) 45%, var(--kd-line)); background: color-mix(in srgb, var(--kd-brand-soft) 45%, var(--kd-surface)); }
.hp-tercih input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--kd-brand); cursor: pointer; }
.hp-tercih > span { display: grid; gap: 4px; }
.hp-tercih b { font-size: .875rem; font-weight: 600; }
.hp-tercih small { color: var(--kd-muted); font-size: .8rem; }
.hp-secim { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hp-secim legend { font-weight: 600; font-size: .88rem; margin-bottom: 8px; padding: 0; }
.hp-secim label { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px solid var(--kd-line); border-radius: 12px; cursor: pointer; }
.hp-secim label:has(input:checked) { border-color: var(--kd-brand); background: color-mix(in srgb, var(--kd-brand) 4%, var(--kd-surface)); }
.hp-secim input { width: 18px; height: 18px; flex: none; margin: 4px 0 0; accent-color: var(--kd-brand); }
.hp-secim span { display: grid; }
.hp-secim small { color: var(--kd-muted); font-size: .82rem; }

/* Yardım */
.hp-belgeler { list-style: none; padding: 0; display: grid; gap: 10px; }
.hp-belgeler a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--kd-line); border-radius: var(--kd-r-md); text-decoration: none; color: var(--kd-ink); }
.hp-belgeler a:hover { border-color: var(--kd-ink); }
.hp-belgeler span { color: var(--kd-muted); font-size: .86rem; }
.hp-sss { display: grid; }
.hp-sss details { border-top: 1px solid var(--kd-line); }
.hp-sss details:first-child { border-top: 0; }
.hp-sss summary { padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.hp-sss summary::-webkit-details-marker { display: none; }
.hp-sss summary::after { content: "+"; color: var(--kd-muted); font-size: 1.2rem; line-height: 1; }
.hp-sss details[open] summary::after { content: "–"; }
.hp-sss p { padding: 0 0 14px; color: var(--kd-muted); font-size: .92rem; }

/* Mobil: menü çekmece olur */
.hp-perde { display: none; }
@media (max-width: 980px) {
  .hp-kabuk { grid-template-columns: minmax(0, 1fr); background: none; }
  .hp-yan { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: min(300px, calc(100vw - 28px)); visibility: hidden; transform: translateX(-102%); transition: transform .22s var(--kd-ease), visibility 0s .22s; box-shadow: var(--kd-shadow-float); }
  .hp.is-menu { overflow: hidden; }
  .hp.is-menu .hp-yan { visibility: visible; transform: none; transition-delay: 0s; }
  .hp.is-menu .hp-perde { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(10, 12, 18, .6); backdrop-filter: blur(3px); }
  .hp-menu-ac { display: grid; width: 44px; height: 44px; flex: none; }
  .hp-menu-kapat { display: grid; }
  .hp-ust { padding: 0 16px; }
  .hp-icerik { padding: 28px 24px 40px; gap: 24px; }
  .hp-iki, .hp-iki-genis, .hp-abone { grid-template-columns: minmax(0, 1fr); }
  .hp-abone-yan { border-left: 0; border-top: 1px solid var(--kd-line); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-deneme { grid-template-columns: minmax(0, 1fr); }
  .hp-deneme .hp-cubuk { max-width: 240px; width: 100%; }
  .hp-deneme > .kd-btn { justify-self: start; }
  .hp-paneller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-panel { padding: 20px; gap: 10px; grid-template-columns: 38px minmax(0, 1fr) auto; }
  .hp-panel-ic { width: 38px; height: 38px; }
}
@media (max-width: 640px) {
  .hp-kim-ad { display: none; }
  .hp-kim-btn { padding: 4px; border-color: var(--kd-line); }
  .hp-kim-btn > .hp-ic { display: none; }
  .hp-ust { min-height: 76px; gap: 10px; padding: 10px 16px; }
  .hp-baslik { font-size: .95rem; }
  .hp-icerik { padding: 24px 16px 40px; gap: 20px; }
  .hp-ozet { grid-template-columns: minmax(0, 1fr); }
  .hp-paneller, .hp-magazalar { grid-template-columns: minmax(0, 1fr); }
  .hp-panel { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .hp-panel .hp-rozet { grid-column: 2; justify-self: start; }
  .hp-panel-ok { grid-row: 1; grid-column: 3; }
  .hp-alanlar, .hp-secim, .hp-ozellik, .hp-bilgi-yatay { grid-template-columns: minmax(0, 1fr); }
  .hp-kutu, .hp-magaza, .hp-abone-ana, .hp-abone-yan { padding: 20px; }
  .hp-kart { padding: 20px; gap: 6px; }
  .hp-form-alt > .kd-btn { width: 100%; }
  .hp .kd-btn--sm { min-height: 44px; }
  .hp-form-alt > span:empty { display: none; }
  .hp-form-alt .hp-alt { flex-basis: 100%; }
  .hp-kutu-bas { padding-bottom: 16px; }
  .hp-deneme { padding: 20px; gap: 16px; }
  .hp-magaza-eylem > form, .hp-magaza-eylem > form .kd-btn { width: 100%; }
  .hp-magaza-eylem .hp-bag { margin-left: 0; }
  .hp-sekme { width: 100%; border-radius: 12px; }
  .hp-sekme a { flex: 1 0 auto; white-space: nowrap; text-align: center; padding: 9px 6px; font-size: .8rem; }
  .hp-abone-bas { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .hp *, .hp *::before, .hp *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.hp-panel.is-bekliyor { opacity: .7; cursor: progress; }
.hp-panel.is-bekliyor .hp-panel-ok { animation: hp-nabiz 1s ease-in-out infinite; }
@keyframes hp-nabiz { 50% { transform: translateX(4px); } }

/* ---------- Faturalar ---------- */
.hp-menu a .hp-menu-sayi { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 6px; background: #453b25; color: #f8cf79; font: 700 .74rem var(--kd-font-body); font-style: normal; }
.hp-menu a .hp-menu-sayi.is-kirmizi { background: var(--kd-err); color: #fff; }
.hp-gecikme { display: grid; gap: 4px; padding: 16px 20px; border-radius: var(--kd-r-lg); background: color-mix(in srgb, var(--kd-err) 9%, var(--kd-surface)); border: 1.5px solid color-mix(in srgb, var(--kd-err) 45%, var(--kd-line)); border-left-width: 6px; color: var(--kd-ink); text-decoration: none; }
.hp-gecikme b { color: var(--kd-err); font-size: 1.02rem; }
.hp-gecikme span { color: var(--kd-ink); font-size: .9rem; }
a.hp-gecikme-bag { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; transition: box-shadow .15s, transform .15s; }
a.hp-gecikme-bag b, a.hp-gecikme-bag span { grid-column: 1; }
a.hp-gecikme-bag strong { grid-column: 2; grid-row: 1 / span 2; padding: 10px 16px; border-radius: var(--kd-r-md); background: var(--kd-err); color: #fff; font-size: .9rem; white-space: nowrap; }
a.hp-gecikme-bag:hover { box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--kd-err) 70%, transparent); transform: translateY(-1px); }
.hp-bekleyen { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 14px 20px; border-radius: var(--kd-r-lg); background: color-mix(in srgb, var(--kd-warn) 9%, var(--kd-surface)); border: 1px solid color-mix(in srgb, var(--kd-warn) 35%, var(--kd-line)); color: var(--kd-ink); text-decoration: none; }
.hp-bekleyen b, .hp-bekleyen span { grid-column: 1; }
.hp-bekleyen span { color: var(--kd-muted); font-size: .88rem; }
.hp-bekleyen strong { grid-column: 2; grid-row: 1 / span 2; color: var(--kd-warn); font-size: .9rem; white-space: nowrap; }
.hp-kart.is-kirmizi { border-color: color-mix(in srgb, var(--kd-err) 45%, var(--kd-line)); }
.hp-kart.is-kirmizi b { color: var(--kd-err); }
.hp-kirmizi-yazi, .hp .is-kirmizi { color: var(--kd-err); }
.hp-sekme { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--kd-line); border-radius: 12px; background: var(--kd-soft); justify-self: start; flex-wrap: wrap; }
.hp-sekme a { min-height: 40px; padding: 9px 16px; border-radius: 9px; color: var(--kd-muted); font-weight: 600; font-size: .85rem; text-decoration: none; }
.hp-sekme a em { font-style: normal; margin-left: 4px; color: var(--kd-muted); font-weight: 500; }
.hp-sekme a[aria-current] { background: var(--kd-surface); color: var(--kd-ink); box-shadow: 0 1px 3px rgba(20, 26, 51, .12); }
.hp-tablo-kap { border: 1px solid var(--kd-line); border-radius: var(--kd-r-lg); background: var(--kd-surface); overflow: hidden; }
.hp-tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hp-tablo th, .hp-tablo td { padding: 18px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--kd-line); }
.hp-tablo thead th { padding-top: 14px; padding-bottom: 14px; font: 600 .7rem var(--kd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--kd-muted); background: var(--kd-soft); }
.hp-tablo tbody tr:hover td { background: color-mix(in srgb, var(--kd-soft) 55%, var(--kd-surface)); }
.hp-tablo tbody tr:last-child td { border-bottom: 0; }
.hp-tablo td small { display: block; color: var(--kd-muted); font-size: .78rem; margin-top: 2px; }
.hp-tablo tr.is-gecikti td { background: color-mix(in srgb, var(--kd-err) 5%, var(--kd-surface)); }
.hp-tablo tr.is-gecikti td:first-child { box-shadow: inset 4px 0 0 var(--kd-err); }
.hp-tablo .is-sag, .hp-belge-kalem .is-sag { text-align: right; font-variant-numeric: tabular-nums; }
.hp-tablo-eylem { text-align: right; white-space: nowrap; }
.hp-tablo-eylem form { margin: 0; display: inline; }
.hp-mono { font-family: var(--kd-font-mono, ui-monospace, monospace); font-size: .88em; }
.hp-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 1200px) {
  .hp-tablo thead { display: none; }
  .hp-tablo, .hp-tablo tbody, .hp-tablo tr, .hp-tablo td { display: block; width: 100%; }
  .hp-tablo tr { padding: 20px; border-bottom: 1px solid var(--kd-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .hp-tablo tr:last-child { border-bottom: 0; }
  .hp-tablo td { padding: 0; border: 0; }
  .hp-tablo td[data-k="Açıklama"], .hp-tablo td[data-k="Tarih"] { grid-column: 1 / -1; }
  .hp-tablo td[data-k="Tarih"]::before, .hp-tablo td[data-k="Son ödeme"]::before { content: attr(data-k) ": "; color: var(--kd-muted); font-size: .82rem; }
  .hp-tablo td.is-sag { text-align: left; }
  .hp-tablo-eylem { text-align: left; }
  a.hp-gecikme-bag, .hp-bekleyen { grid-template-columns: minmax(0, 1fr); }
  a.hp-gecikme-bag strong, .hp-bekleyen strong { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
}
@media (max-width: 640px) {
  .hp-sekme a { padding: 9px 6px; font-size: .8rem; }
  .hp-tablo td[data-k="Son ödeme"], .hp-tablo td[data-k="İşlem"] { grid-column: 1 / -1; }
}

/* Fatura belgesi */
.hp-belge {
  --kd-ink: #20242e; --kd-surface: #fff; --kd-muted: #626975; --kd-line: #e3e6ec;
  --kd-ok: #15803d; --kd-warn: #b45309; --kd-err: #c42b2b; --kd-brand: #cb2228; --kd-accent: var(--kd-brand);
  color-scheme: light; color: var(--kd-ink); padding: 32px; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--hp-radius); display: grid; gap: 24px;
}
.hp-belge-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid var(--kd-ink); }
.hp-belge-bas img { height: 38px; width: auto; display: block; margin-bottom: 6px; }
.hp-belge-no { display: grid; gap: 4px; justify-items: end; text-align: right; }
.hp-belge-no small { font: 700 .74rem var(--kd-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--kd-muted); }
.hp-belge-no b { font-size: 1.2rem; }
.hp-belge-kisi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
.hp-belge-kisi > div { display: grid; gap: 2px; }
.hp-belge-kisi small, .hp-belge-kisi dt { color: var(--kd-muted); font-size: .78rem; }
.hp-belge-kisi span { font-size: .9rem; }
.hp-belge-kisi dl { display: grid; gap: 8px; min-width: 200px; }
.hp-belge-kisi dl div { display: flex; justify-content: space-between; gap: 16px; }
.hp-belge-kisi dd { font-weight: 700; }
.hp-belge-kalem { width: 100%; border-collapse: collapse; }
.hp-belge-kalem th, .hp-belge-kalem td { padding: 12px 0; border-bottom: 1px solid var(--kd-line); text-align: left; }
.hp-belge-kalem thead th { font: 700 .74rem var(--kd-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--kd-muted); }
.hp-belge-kalem tfoot th { font-weight: 500; color: var(--kd-muted); text-align: right; padding-right: 24px; }
.hp-belge-kalem tfoot tr.is-toplam th, .hp-belge-kalem tfoot tr.is-toplam td { font: 800 1.15rem var(--kd-font-display); color: var(--kd-ink); border-bottom: 0; }
@media (max-width: 640px) { .hp-belge { padding: 20px; } .hp-belge-kisi { grid-template-columns: minmax(0, 1fr); } .hp-belge-no { justify-items: start; text-align: left; } }

/* Yazdırma: yalnız fatura belgesi */
@media print {
  .hp-yan, .hp-ust, .hp-perde, .hp-yazdirma, .hp-uyari { display: none !important; }
  .hp-kabuk { display: block; background: none; }
  .hp-icerik { padding: 0; max-width: none; }
  body.hp { background: #fff; color: #000; }
  .hp-belge { border: 0; padding: 0; }
}